:root{--su-cell: var(--surface);--su-line: #dfe2ea;--su-thick: #59617a;--su-house: color-mix(in srgb, var(--accent) 7%, var(--surface));--su-same: color-mix(in srgb, var(--accent) 20%, var(--surface));--su-sel: color-mix(in srgb, var(--accent) 34%, var(--surface));--su-ink: var(--accent);--su-note: #6b7286}html.dark{--su-cell: var(--surface);--su-line: #2b3446;--su-thick: #8a93a8;--su-house: color-mix(in srgb, var(--accent) 16%, var(--surface));--su-same: color-mix(in srgb, var(--accent) 34%, var(--surface));--su-sel: color-mix(in srgb, var(--accent) 52%, var(--surface));--su-ink: color-mix(in srgb, var(--accent) 45%, #ffffff);--su-note: #a3abbd}main.su-main{padding-top:10px;gap:12px}.su-meta{display:flex;align-items:center;justify-content:center;gap:12px;font-size:.9rem;font-weight:700;color:var(--muted)}.su-clock{font-variant-numeric:tabular-nums;color:var(--text);font-weight:800;min-width:3.2em;text-align:center}.su-clock.over{color:var(--muted)}.su-par{font-variant-numeric:tabular-nums}.su-board{display:grid;grid-template-rows:repeat(var(--n, 9),1fr);aspect-ratio:1 / 1;width:calc(100% + 12px);max-width:460px;margin:0 -6px;align-self:center;border:2px solid var(--su-thick);border-radius:10px;overflow:hidden;background:var(--su-cell);box-shadow:var(--shadow)}.su-board.s6{--n: 6;width:100%;margin:0;max-width:400px}.su-row{display:grid;grid-template-columns:repeat(var(--n, 9),1fr);min-height:0}.su-cell{position:relative;min-width:0;min-height:0;border-right:1px solid var(--su-line);border-bottom:1px solid var(--su-line);background:var(--su-cell);display:grid;place-items:center;font-variant-numeric:tabular-nums;transition:background .12s}.su-row>.su-cell:last-child{border-right:0}.su-row:last-child>.su-cell{border-bottom:0}.su-cell.br{border-right:2px solid var(--su-thick)}.su-cell.bb{border-bottom:2px solid var(--su-thick)}.su-cell:focus-visible{outline:3px solid var(--accent);outline-offset:-3px;border-radius:0;z-index:1}.su-cell.house{background:var(--su-house)}.su-cell.same{background:var(--su-same)}.su-cell.sel{background:var(--su-sel)}.su-v{font-size:clamp(1.25rem,6.2vw,1.75rem);font-weight:800;line-height:1}.s6 .su-v{font-size:clamp(1.6rem,8.5vw,2.2rem)}.su-cell.given .su-v{color:var(--text);font-weight:900}.su-cell.entry .su-v{color:var(--su-ink);font-weight:700}.su-cell.wrong .su-v{color:var(--bad)}.su-cell.wrong{background:color-mix(in srgb,var(--bad) 12%,var(--su-cell))}.su-cell.wrong.sel{background:color-mix(in srgb,var(--bad) 22%,var(--su-sel))}.su-notes{position:absolute;inset:1px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);place-items:center;font-size:clamp(.56rem,2.75vw,.78rem);font-weight:700;line-height:1;color:var(--su-note)}.s6 .su-notes{grid-template-rows:repeat(2,1fr);font-size:clamp(.7rem,3.4vw,.95rem)}.su-notes i{font-style:normal}.su-notes i.on{color:var(--accent-ink);background:var(--accent);border-radius:4px;padding:1px 2px}.su-cell.pop .su-v{animation:su-pop .22s var(--ease-bounce)}.su-cell.hinted{animation:su-hint .9s var(--ease)}.su-cell.unit{animation:su-unit .5s var(--ease)}@keyframes su-pop{0%{transform:scale(.6)}70%{transform:scale(1.12)}to{transform:none}}@keyframes su-hint{0%,40%{background:color-mix(in srgb,var(--warn) 45%,var(--su-cell))}}@keyframes su-unit{0%{background:color-mix(in srgb,var(--good) 28%,var(--su-cell))}}.su-board.glow .su-cell{animation:su-glow 1s var(--ease) both;animation-delay:calc(var(--d) * .12s)}@keyframes su-glow{0%{background:var(--su-cell)}35%{background:color-mix(in srgb,var(--accent) 42%,var(--su-cell))}to{background:var(--su-cell)}}.su-tools{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.su-tool{position:relative;min-height:52px;display:grid;justify-items:center;align-content:center;gap:2px;border-radius:12px;color:var(--text);font-size:.74rem;font-weight:800;transition:background .15s,transform .1s var(--ease)}.su-tool svg{width:22px;height:22px}.su-tool:hover{background:var(--surface-2)}.su-tool:active{transform:scale(.95)}.su-tool[aria-pressed=true]{color:var(--accent);background:var(--accent-soft)}html.dark .su-tool[aria-pressed=true]{color:var(--su-ink)}.su-badge{position:absolute;top:3px;left:calc(50% + 8px);font-size:.56rem;font-weight:900;letter-spacing:.03em;padding:1px 4px;border-radius:6px;background:var(--surface-3);color:var(--muted)}.su-tool[aria-pressed=true] .su-badge{background:var(--accent);color:var(--accent-ink)}.su-badge.cost{background:transparent;color:var(--muted);left:calc(50% + 6px)}.su-tool.pop{animation:su-press .22s var(--ease-bounce)}@keyframes su-press{0%{transform:scale(.9)}to{transform:none}}.su-pad{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.su-key{flex:0 0 calc((100% - 32px)/5);height:clamp(48px,7dvh,58px);border-radius:12px;background:var(--surface);box-shadow:0 2px 0 var(--surface-3);color:var(--su-ink);font-size:1.65rem;font-weight:800;font-variant-numeric:tabular-nums;display:grid;place-items:center;transition:transform .06s var(--ease),box-shadow .06s,opacity .2s,font-size .15s}html.dark .su-key{background:var(--surface-2);box-shadow:0 2px #0a0e16}.su-pad.s6 .su-key{flex-basis:calc((100% - 40px) / 6)}.su-key:active:not(:disabled){transform:translateY(2px);box-shadow:none}.su-key.hit{animation:su-press .16s var(--ease)}.su-key.done{opacity:.32}.su-pad.notes .su-key{font-size:1.05rem;color:var(--muted);place-items:start;padding:6px 9px}.su-end{display:grid;justify-items:center;gap:6px;text-align:center;animation:su-in .4s var(--ease) both;animation-delay:.6s}.su-end-head{font-size:1.35rem;font-weight:900;letter-spacing:-.02em}.su-stars{display:flex;justify-content:center;gap:6px;font-size:2rem;line-height:1}.su-stars span{color:var(--surface-3)}.su-stars span.on{color:var(--warn);animation:su-star .45s var(--ease-bounce) both;animation-delay:calc(var(--i) * .12s + .1s)}.su-par-line{margin-top:6px}@keyframes su-star{0%{transform:scale(.3) rotate(-30deg);opacity:0}to{transform:none;opacity:1}}@keyframes su-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}