.sc{justify-content:flex-end;gap:var(--s3);width:100%;max-width:min(720px,100dvh - 258px);height:100%;padding:var(--s2) var(--s2) calc(var(--s3) + env(safe-area-inset-bottom));-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;flex-direction:column;margin-inline:auto;display:flex;position:relative;container:sc/size}.sc-side{--coach:clamp(64px, min(calc((100cqh - 100cqw - 100px) * .72), 40cqw), 156px);gap:var(--s3);padding-inline:var(--s1);flex-direction:column;flex:auto;display:flex}.sc-hud{justify-content:center;align-items:center;gap:var(--s3);margin-block:auto;display:flex}.sc-coach{width:var(--coach);height:var(--coach);isolation:isolate;flex:none;position:relative}.sc-coach:after{content:"";background:var(--line);z-index:-1;border-radius:50%;height:9%;position:absolute;bottom:1%;left:22%;right:22%}.sc-coach__body{transform-origin:50% 100%;position:absolute;inset:0}.sc-coach .mascot{opacity:0;pointer-events:none;width:100%;height:100%;transition:opacity 60ms linear;position:absolute;inset:0}.sc-coach .mascot.is-on{opacity:1}.sc-next{align-items:center;gap:var(--s2);padding:5px 5px 5px var(--s3);background:var(--surface);border:2px solid var(--line);border-radius:var(--r-md);box-shadow:0 var(--lip-sm) 0 var(--line);margin-left:6px;display:flex;position:relative}.sc-next:before,.sc-next:after{content:"";border-style:solid;border-color:#0000;position:absolute;top:50%;transform:translateY(-50%)}.sc-next:before{border-width:8px 12px 8px 0;border-right-color:var(--line);left:-12px}.sc-next:after{border-width:6px 9px 6px 0;border-right-color:var(--surface);left:-8px}.sc-next__label{font-family:var(--font-display);font-weight:var(--fw-display);font-synthesis:none;font-size:clamp(var(--t-sm), calc(var(--coach) * .12), var(--t-lg));color:var(--ink-2);white-space:nowrap;line-height:1.25}.sc-next__n{--h:clamp(44px, calc(var(--coach) * .44), 64px);min-width:calc(var(--h) * 1.1);height:var(--h);padding:0 var(--s2);border-radius:var(--r-sm);background:var(--dc);color:var(--dc-ink);box-shadow:0 var(--lip-sm) 0 var(--dc-lip);font-size:calc(var(--h) * .64);animation:sc-pop .26s var(--ease-bounce);place-items:center;font-weight:700;line-height:1;display:grid}.sc-next__n svg{width:62%;height:62%}.sc-time{padding:7px var(--s3);border-radius:var(--r-pill);background:var(--surface);border:2px solid var(--line);font-family:var(--font-display);font-weight:var(--fw-display);font-synthesis:none;white-space:nowrap;flex:none;align-items:baseline;gap:3px;margin:0;line-height:1;display:flex}.sc-time .num{font-size:var(--t-lg);text-align:right;min-width:3.1ch;font-weight:700}.sc-time__u{font-size:var(--t-sm);color:var(--ink-2)}.sc-track{align-items:center;gap:var(--s2);display:flex}.sc-meter{border-radius:var(--r-pill);background:var(--line);flex:1;height:10px;overflow:hidden}.sc-meter__fill{border-radius:inherit;background:var(--dc);transform-origin:0;height:100%;transition:transform var(--dur-ui) var(--ease-out)}.sc-chip{min-height:26px;padding:0 var(--s2);border-radius:var(--r-pill);background:var(--dc-soft);color:var(--ink);font-family:var(--font-display);font-weight:var(--fw-display);font-synthesis:none;font-size:var(--t-xs);white-space:nowrap;align-items:center;gap:4px;line-height:1;display:inline-flex}.sc-board{flex:0 1 calc(100cqw + var(--lip));place-items:center;min-height:0;display:grid;container-type:size}.sc-grid{--pad:0px;--board:min(100cqw, 100cqh - var(--lip));--gap:clamp(6px, calc(var(--board) / var(--n) * .1), 14px);--cell:calc((var(--board) - 2 * var(--pad) - (var(--n) - 1) * var(--gap)) / var(--n));grid-template-columns:repeat(var(--n), minmax(0, 1fr));grid-template-rows:repeat(var(--n), minmax(0, 1fr));gap:var(--gap);width:var(--board);height:var(--board);padding:var(--pad);margin-bottom:var(--lip);display:grid}@container (width>=480px) and (height>=480px){.sc-grid{--pad:clamp(10px, calc(var(--board) * .028), 18px);background:var(--dc-soft);border-radius:var(--r-xl);box-shadow:0 var(--lip) 0 var(--line)}}.sc-cell{border:2px solid var(--line);border-radius:clamp(10px, calc(var(--cell) * .24), 22px);background:var(--surface);min-width:0;min-height:0;color:var(--ink);box-shadow:0 var(--lip) 0 var(--line-strong);font-size:calc(var(--cell) * .44);touch-action:manipulation;transition:transform var(--dur-press) ease-out, box-shadow var(--dur-press) ease-out, background-color var(--dur-ui) ease-out, color var(--dur-ui) ease-out, border-color var(--dur-ui) ease-out;place-items:center;font-weight:700;line-height:1;display:grid;position:relative}.sc--large .sc-cell{font-size:calc(var(--cell) * .5)}.sc-cell:active:not(.is-found){transform:translateY(var(--lip));box-shadow:0 0 0 var(--line-strong)}.sc-cell:focus-visible{outline-offset:2px;z-index:1}.sc-cell__n{pointer-events:none;display:block}.sc--shuffle .sc-cell__n{animation:sc-in .17s var(--ease-out)}.sc-cell.is-found{transform:translateY(var(--lip));background:var(--bg-deep);color:var(--ink-3);cursor:default;border-color:#0000;box-shadow:0 0 #0000}.sc-cell.is-wrong{z-index:2;background:var(--bad);border-color:var(--red-lip);color:#fff;box-shadow:0 var(--lip) 0 var(--red-lip);transition:none}:root[data-colorsafe="1"] .sc-cell.is-wrong{background:var(--d-speed);border-color:var(--d-speed-lip);box-shadow:0 var(--lip) 0 var(--d-speed-lip)}.sc-cell__x{--x:clamp(18px, calc(var(--cell) * .3), 30px);top:calc(var(--x) * -.3);right:calc(var(--x) * -.3);z-index:1;width:var(--x);height:var(--x);padding:calc(var(--x) * .2);color:var(--bad);box-shadow:0 0 0 2px var(--red-lip);pointer-events:none;background:#fff;border-radius:50%;place-items:center;display:grid;position:absolute}.sc-cell__x svg{width:100%;height:100%}:root[data-colorsafe="1"] .sc-cell__x{color:var(--d-speed);box-shadow:0 0 0 2px var(--d-speed-lip)}.sc-cell__pen{z-index:3;border-radius:var(--r-pill);background:var(--ink);color:var(--surface);font-size:clamp(.8rem, calc(var(--cell) * .24), 1.15rem);white-space:nowrap;pointer-events:none;animation:sc-float .6s var(--ease-out) forwards;padding:3px 9px;font-weight:700;line-height:1.2;position:absolute;bottom:calc(100% - 6px);left:50%;transform:translate(-50%)}.sc--done .sc-cell{background:var(--good);color:#fff;box-shadow:0 var(--lip) 0 var(--green-lip);transition-delay:calc(var(--d) * 35ms);animation:sc-wave .42s var(--ease-bounce) both;animation-delay:calc(var(--d) * 35ms);border-color:#0000}.sc--done .sc-next__n{background:var(--good);color:#fff;box-shadow:0 var(--lip-sm) 0 var(--green-lip)}.sc--done .sc-meter__fill{background:var(--good)}:root[data-motion=reduced] .sc--done .sc-cell{transition-delay:0s;animation:none}.sc-kbd{justify-content:center;align-items:center;gap:var(--s2);min-height:36px;font-size:var(--t-sm);color:var(--ink-2);font-weight:600;display:flex}.sc-kbd__buf{min-width:44px;height:32px;padding:0 var(--s2);border-radius:var(--r-xs);background:var(--surface);border:2px solid var(--line);color:var(--ink);font-size:var(--t-lg);place-items:center;font-weight:700;display:inline-grid}.sc-kbd__key{height:32px;padding:0 var(--s2);border-radius:var(--r-xs);background:var(--surface);border:2px solid var(--line);box-shadow:0 var(--lip-sm) 0 var(--line-strong);font-family:var(--font-body);font-size:var(--t-xs);color:var(--ink);place-items:center;font-weight:700;display:inline-grid}@media (hover:none),(pointer:coarse){.sc-kbd{display:none}}@media (orientation:landscape) and (height<=540px){.sc{justify-content:center;align-items:stretch;gap:var(--s6);max-width:none;padding-top:var(--s1);flex-direction:row}.sc-board{flex:0 100cqh}.sc-side{--coach:76px;justify-content:center;gap:var(--s3);flex:none;width:min(40%,280px)}.sc-hud{row-gap:var(--s3);flex-wrap:wrap;margin-block:0}.sc-track{flex-wrap:wrap}.sc-kbd{display:none}}@keyframes sc-pop{0%{transform:scale(.55)}}@keyframes sc-in{0%{opacity:0;transform:scale(.6)}}@keyframes sc-float{0%{opacity:0;transform:translate(-50%,8px)scale(.8)}20%{opacity:1;transform:translate(-50%)scale(1.05)}75%{opacity:1}to{opacity:0;transform:translate(-50%,-14px)scale(1)}}@keyframes sc-wave{0%{transform:translateY(var(--lip))}45%{transform:translateY(-6px)scale(1.04)}to{transform:translateY(0)}}:root[data-motion=reduced] .sc-cell__pen{opacity:1;animation:none}@media (prefers-reduced-motion:reduce){.sc-cell__pen{opacity:1;animation:none}}