.sn{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;max-width:480px;margin:0 auto}.sn-row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:36px}.sn-meta{display:flex;gap:14px;color:var(--ink-2);font-variant-numeric:tabular-nums;font-size:.95rem;white-space:nowrap}.sn-meta b{color:var(--ink);font-size:1.1rem}.sn-meta b.is-beat{color:#2e9e6b}.sn-stage{position:relative;width:min(100%,420px,calc((100dvh - 300px) * 16 / 22));margin:0 auto;aspect-ratio:16 / 22;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--bg-2);touch-action:none;user-select:none;-webkit-user-select:none}.sn-stage canvas{display:block;width:100%;height:100%}.sn-overlay{position:absolute;inset:0;display:grid;place-items:center;background:#fffaf08c;backdrop-filter:blur(2px);text-align:center;padding:16px}:root[data-look=ink] .sn-overlay,:root[data-look=dusk] .sn-overlay{background:#14141e8c}.sn-overlay .suvi-btn{font-size:1.15rem;padding:12px 28px}.sn-overlay p{margin:6px 0 12px;color:var(--ink-2)}.sn-pad{display:grid;grid-template-columns:repeat(3,64px);grid-template-rows:repeat(2,56px);gap:6px;justify-content:center}.sn-pad button{border-radius:12px;border:1px solid var(--line);background:var(--cell);font-size:1.3rem;color:var(--ink);cursor:pointer;touch-action:manipulation}.sn-pad button:active{background:var(--cell-selected)}.sn-pad .u{grid-column:2;grid-row:1}.sn-pad .l{grid-column:1;grid-row:2}.sn-pad .d{grid-column:2;grid-row:2}.sn-pad .r{grid-column:3;grid-row:2}@media(pointer:fine)and (min-width:700px){.sn-pad{display:none}}.sn-msg{min-height:1.3em;text-align:center;color:var(--ink-2);font-size:.95rem}.sn-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}