.gr-kn-page{min-height:100vh;background:#050505;color:#d8b766;padding:1.25rem 1rem 2.5rem;font-family:Georgia,'Times New Roman',serif}
.gr-kn-nav{width:min(720px,100%);margin:0 auto .7rem;display:flex;justify-content:space-between;align-items:center}
.gr-kn-nav a{color:#d8b766;text-decoration:none;font-size:clamp(15px,2.2vw,20px)}
.gr-kn-game{width:min(720px,100%);margin:0 auto}
.gr-kn-shell{position:relative;width:100%;aspect-ratio:1122/1402;user-select:none;-webkit-user-select:none}
.gr-kn-base{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
.gr-kn-play,.gr-kn-clear,.gr-kn-key{position:absolute;border:0;background:transparent;padding:0;cursor:pointer;appearance:none;-webkit-appearance:none;z-index:4}
.gr-kn-play{left:50%;top:38.5%;width:18%;height:10%;transform:translate(-50%,-50%);border-radius:50%}
.gr-kn-clear{left:50%;top:83.1%;width:29%;height:6.8%;transform:translate(-50%,-50%);border-radius:8px}
.gr-kn-play:focus-visible,.gr-kn-clear:focus-visible,.gr-kn-key:focus-visible{outline:3px solid #f0cf76;outline-offset:-5px}
@media(hover:hover) and (pointer:fine){.gr-kn-play:hover,.gr-kn-clear:hover{box-shadow:inset 0 0 0 3px rgba(224,186,86,.32),0 0 16px rgba(224,186,86,.2)}.gr-kn-key:hover{box-shadow:inset 0 0 0 4px rgba(236,199,105,.23)}}
.gr-kn-play.is-playing{filter:brightness(1.25);pointer-events:none}
.gr-kn-indicators{position:absolute;inset:0;z-index:5;pointer-events:none}
.gr-kn-indicator{position:absolute;width:4.25%;aspect-ratio:1;border-radius:50%;background:transparent;transform:translate(-50%,-50%);transition:background .12s ease,box-shadow .12s ease,filter .12s ease}
.gr-kn-indicator:nth-child(1){left:37.70%;top:48.36%}
.gr-kn-indicator:nth-child(2){left:43.76%;top:48.36%}
.gr-kn-indicator:nth-child(3){left:49.64%;top:48.36%}
.gr-kn-indicator:nth-child(4){left:55.70%;top:48.36%}
.gr-kn-indicator:nth-child(5){left:61.68%;top:48.36%}
.gr-kn-indicator.is-filled{background:radial-gradient(circle,#fff5c0 0 16%,#f4c04f 36%,#a6650d 67%,#4b2804 100%);box-shadow:0 0 10px rgba(255,190,56,.75),0 0 19px rgba(255,151,20,.4)}
.gr-kn-indicator.is-wrong{background:radial-gradient(circle,#ffe1cf 0 15%,#d56d45 42%,#6a2616 75%,#2d0a05 100%);box-shadow:0 0 11px rgba(198,72,38,.7)}
.gr-kn-key{height:12.7%;border-radius:9px;transform:translate(-50%,-50%)}
.gr-kn-key-0{left:22.5%;top:57.2%;width:13.4%}.gr-kn-key-1{left:35.6%;top:57.2%;width:13.4%}.gr-kn-key-2{left:48.7%;top:57.2%;width:13.4%}.gr-kn-key-3{left:61.8%;top:57.2%;width:13.4%}.gr-kn-key-4{left:74.9%;top:57.2%;width:13.4%}
.gr-kn-key-5{left:28.7%;top:70.0%;width:13.8%}.gr-kn-key-6{left:42.4%;top:70.0%;width:13.8%}.gr-kn-key-7{left:56.1%;top:70.0%;width:13.8%}.gr-kn-key-8{left:69.8%;top:70.0%;width:13.8%}
.gr-kn-key.is-pressed{box-shadow:inset 0 0 0 5px rgba(255,216,117,.42),0 0 18px rgba(255,188,51,.26);filter:brightness(1.16)}
.gr-kn-modal[hidden]{display:none!important}.gr-kn-modal{position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.78);display:flex;align-items:center;justify-content:center;padding:1rem}
.gr-kn-modal-card{width:min(500px,94vw);background:#1b1208;border:1px solid #c79a3b;color:#e3c876;text-align:center;padding:2rem 1.4rem;box-shadow:0 16px 55px rgba(0,0,0,.55);font-family:Georgia,'Times New Roman',serif}
.gr-kn-modal-card h2{margin:0 0 .8rem;font-size:clamp(30px,6vw,44px);font-weight:500}.gr-kn-modal-card p{margin:.2rem 0 1.4rem;color:#ead9a6;font-size:18px}
.gr-kn-modal-actions{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}.gr-kn-modal-actions button,.gr-kn-modal-actions a{background:linear-gradient(#3b2a13,#241709);border:1px solid #9f772d;color:#e8cb74;padding:.8rem 1rem;text-decoration:none;font-family:inherit;font-weight:700;cursor:pointer;min-height:44px}
.gr-kn-modal-actions button:focus-visible,.gr-kn-modal-actions a:focus-visible{outline:2px solid #e0ba56;outline-offset:2px}
@media(max-width:520px){.gr-kn-page{padding:.5rem .25rem 1.5rem}.gr-kn-nav{padding:0 .35rem}}