.gn{--gn-go:var(--green);--gn-go-lip:var(--green-lip);--gn-stop:var(--red);--gn-stop-lip:var(--red-lip);gap:var(--s3);width:100%;max-width:720px;height:100%;padding:var(--s2) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom));flex-direction:column;margin-inline:auto;display:flex;position:relative}.gn[data-safe="1"]{--gn-go:var(--d-math);--gn-go-lip:var(--d-math-lip);--gn-stop:var(--d-speed);--gn-stop-lip:var(--d-speed-lip)}.gn-time{border-radius:var(--r-pill);background:var(--line);flex:none;height:12px;overflow:hidden}.gn-time i{border-radius:inherit;background:var(--dc);height:100%;box-shadow:inset 0 -3px 0 var(--dc-lip);transform-origin:0;will-change:transform;display:block}.gn-time.is-late i{background:var(--gn-stop);box-shadow:inset 0 -3px 0 var(--gn-stop-lip)}.gn-pad{border-radius:var(--r-xl);background:var(--dc-soft);width:100%;min-height:0;box-shadow:inset 0 0 0 3px var(--dc), 0 var(--lip) 0 var(--dc-lip);color:var(--ink);isolation:isolate;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;flex:1;place-items:center;display:grid;position:relative;overflow:hidden;container-type:size}.gn-pad:before{content:"";z-index:-2;background-image:radial-gradient(circle, var(--dc) 2px, transparent 2.5px);opacity:.35;pointer-events:none;background-position:13px 13px;background-size:26px 26px;position:absolute;inset:0}.gn-pad:focus-visible{outline:4px solid var(--ink);outline-offset:3px;border-radius:var(--r-xl)}.gn-ripple{z-index:-1;background:var(--dc);opacity:0;pointer-events:none;width:140px;height:140px;animation:gn-ripple .44s var(--ease-out) forwards;border-radius:50%;margin:-70px 0 0 -70px;position:absolute}@keyframes gn-ripple{0%{opacity:.6;transform:scale(.2)}to{opacity:0;transform:scale(1.7)}}.gn-streak{top:var(--s3);right:var(--s3);border-color:var(--dc);min-height:34px;box-shadow:0 var(--lip-sm) 0 var(--dc-lip);font-size:var(--t-md);opacity:0;gap:4px;position:absolute;transform:scale(.8)}.gn-streak svg{color:var(--dc-lip)}.gn-streak small{font-family:var(--font-body);font-size:var(--t-xs);color:var(--ink-2);font-weight:700}.gn-streak.is-on{opacity:1;animation:gn-pop .24s var(--ease-bounce);transform:none}.gn-spot{--disc:min(84cqw, 64cqh, 360px);width:var(--disc);height:var(--disc);margin-top:-3%;display:block;position:relative}.gn--large .gn-spot{--disc:min(88cqw, 68cqh, 420px)}.gn-spot:before{content:"";background:var(--dc);opacity:.28;border-radius:50%;position:absolute;inset:-9%}.gn-socket{background:var(--surface);box-shadow:inset 0 0 0 4px var(--line), inset 0 -10px 0 var(--line);border-radius:50%;position:absolute;inset:2%}.gn-socket:after{content:"";background:var(--dc-lip);border-radius:50%;width:16px;height:16px;margin:-8px 0 0 -8px;position:absolute;top:50%;left:50%}.gn-stim{animation:gn-in .17s var(--ease-out) both;display:block;position:absolute;inset:0}.gn-plate{width:100%;max-width:none;height:auto;position:absolute;top:0;left:0;overflow:visible}.gn-mochi{pointer-events:none;transform-origin:50% 90%;-webkit-user-drag:none;user-select:none;width:86%;max-width:none;height:auto;position:absolute;top:2%;left:7%}.gn-stim--nogo .gn-mochi{width:82%;top:4%;left:9%}.gn-stim--go .gn-mochi{animation:gn-lift .38s var(--ease-bounce) both}.gn-stim--nogo .gn-mochi{animation:gn-settle .42s var(--ease-out) both}.gn-stim.is-hit .gn-mochi{animation:gn-jump .34s var(--ease-bounce) both}.gn-stim.is-fa{animation:gn-wobble .32s var(--ease-out) both}.gn-tag{border-radius:var(--r-pill);min-height:2.4em;box-shadow:0 var(--lip-sm) 0 #15172b2e;font-family:var(--font-display);font-weight:var(--fw-display);font-synthesis:none;letter-spacing:.02em;white-space:nowrap;background:#fff;align-items:center;gap:4px;padding:0 .9em;font-size:clamp(1.05rem,7.5cqmin,1.9rem);line-height:1;display:inline-flex;position:absolute;bottom:-2%;left:50%;transform:translate(-50%)}.gn-stim--go .gn-tag{color:var(--gn-go-lip)}.gn-stim--nogo .gn-tag{color:var(--gn-stop)}.gn-tag .gn-hand{flex:none;width:1.05em;height:1.05em}.gn-badge{z-index:2;width:max(52px, calc(var(--disc) * .3));height:max(52px, calc(var(--disc) * .3));color:#fff;animation:gn-badge .3s var(--ease-bounce) both, gn-fade .14s ease-in .38s forwards;border:4px solid #fff;border-radius:50%;place-items:center;display:grid;position:absolute;top:-3%;right:-3%}.gn-badge--hit{background:var(--gn-go);box-shadow:0 var(--lip) 0 var(--gn-go-lip)}.gn-badge--fa{background:var(--gn-stop);box-shadow:0 var(--lip) 0 var(--gn-stop-lip)}.gn-missed{z-index:2;padding:var(--s1) var(--s4);border-radius:var(--r-pill);background:var(--surface);border:2px solid var(--line-strong);color:var(--ink-2);font-family:var(--font-display);font-weight:var(--fw-display);font-synthesis:none;white-space:nowrap;animation:gn-missed .22s var(--ease-out) both;font-size:clamp(1rem,5.5cqmin,1.4rem);line-height:1.4;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.gn-legend{justify-content:center;gap:var(--s2) var(--s6);margin:var(--s1) 0 0;font-family:var(--font-display);font-weight:var(--fw-display);font-synthesis:none;font-size:var(--t-md);line-height:var(--lh-display);color:var(--ink-2);flex-wrap:wrap;flex:none;padding:0;list-style:none;display:flex}.gn-legend li{align-items:center;gap:var(--s2);display:inline-flex}.gn-legend__mark{color:#fff;flex:none;place-items:center;width:38px;height:38px;display:grid;position:relative}.gn-legend__mark b{letter-spacing:.02em;margin-top:-2px;font-size:12px;position:relative}.gn-legend__mark .gn-hand{flex:none;width:18px;height:18px;margin-top:-2px;position:relative}.gn-keys{text-align:center;flex:none}@keyframes gn-in{0%{transform:scale(.8)}65%{transform:scale(1.04)}to{transform:scale(1)}}@keyframes gn-lift{0%{transform:translateY(7%)scale(1.04,.94)}to{transform:none}}@keyframes gn-settle{0%{transform:translateY(-4%)scale(.97,1.04)}to{transform:none}}@keyframes gn-jump{0%{transform:scale(1.06,.92)}45%{transform:translateY(-9%)scale(.97,1.04)}to{transform:none}}@keyframes gn-wobble{0%,to{transform:none}25%{transform:rotate(-6deg)}55%{transform:rotate(5deg)}80%{transform:rotate(-2deg)}}@keyframes gn-badge{0%{transform:scale(.3)rotate(-25deg)}70%{transform:scale(1.12)rotate(5deg)}to{transform:none}}@keyframes gn-fade{to{opacity:0;transform:scale(.85)}}@keyframes gn-missed{0%{opacity:0;transform:translate(-50%,-30%)}}@keyframes gn-pop{0%{transform:scale(.7)}}.gn--still .gn-stim,.gn--still .gn-mochi,.gn--still .gn-badge,.gn--still .gn-missed,.gn--still .gn-streak,.gn--still .gn-ripple{transition:none!important;animation:none!important}@media (orientation:landscape) and (height<=500px){.gn{gap:var(--s2);padding-top:var(--s1)}.gn-legend{display:none}.gn-spot{--disc:min(78cqh, 340px)}}