:root{--bg:#0b0c10;--ink:#f2f4f8;--muted:#8a90a2;--warn:#ffb547;--glass:#ffffff12;--glass-edge:#ffffff17}html,body{background:var(--bg);height:100%;color:var(--ink);overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;margin:0;font:16px/1.3 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}#scene{outline:none;width:100%;height:100%;position:fixed;inset:0}#app{position:fixed;inset:0;overflow:hidden}.screen{box-sizing:border-box;padding:calc(env(safe-area-inset-top) + 8px) calc(env(safe-area-inset-right) + 16px) calc(env(safe-area-inset-bottom) + 18px) calc(env(safe-area-inset-left) + 16px);opacity:0;visibility:hidden;flex-direction:column;transition:opacity .3s,visibility 0s .3s;display:flex;position:absolute;inset:0}.screen.on{opacity:1;visibility:visible;transition:opacity .3s}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;background:0 0;border:0;padding:0}button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}.hud{grid-template-columns:44px 1fr 44px;align-items:center;gap:8px;min-height:56px;display:grid}.hud .mid{text-align:center;min-width:0}.caps{letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-size:11px;font-weight:600}.name{letter-spacing:-.01em;white-space:nowrap;text-overflow:ellipsis;margin-top:2px;font-size:18px;font-weight:600;overflow:hidden}.num{color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;font:600 15px ui-monospace,SF Mono,Menlo,Consolas,monospace}.round{background:var(--glass);width:44px;height:44px;box-shadow:inset 0 0 0 1px var(--glass-edge);border-radius:50%;place-items:center;display:grid}.round:active{background:#ffffff24}.ic{fill:none;stroke:currentColor;stroke-width:2.2px;stroke-linecap:round;stroke-linejoin:round;width:22px;height:22px}.sub{color:var(--muted);text-align:center;min-height:20px;margin:6px 0 0;font-size:15px;transition:color .2s}.sub.warn{color:var(--warn)}#picList{flex-direction:column;gap:12px;margin-top:24px;display:flex}.card{text-align:left;background:#ffffff0b;border-radius:22px;grid-template-columns:60px 1fr auto;align-items:center;gap:16px;min-height:84px;padding:12px 20px 12px 14px;display:grid;box-shadow:inset 0 0 0 1px #ffffff12}.card:active{background:#ffffff17}.card .thumb{width:60px;height:60px;overflow:visible}.card .cname{margin-bottom:4px;font-size:19px;font-weight:600;display:block}.picwrap{flex:1;min-height:0;margin:10px 0}.next{justify-content:center;align-items:center;gap:8px;min-height:20px;margin-top:4px;display:flex}.next i{background:var(--c);width:8px;height:8px;box-shadow:0 0 8px var(--c);border-radius:50%}.bar{justify-content:center;min-height:60px;margin-top:16px;display:flex}.play{color:#0b0c10;min-width:240px;height:60px;box-shadow:-14px 0 34px -10px var(--g1,#fff5), 14px 0 34px -10px var(--g2,#fff5);background:#f4f6fb;border-radius:30px;justify-content:center;align-items:center;gap:10px;padding:0 32px;font-size:18px;font-weight:650;display:inline-flex}.play:active{transform:scale(.97)}.play .ic{fill:currentColor;stroke:none}#boardWrap{touch-action:none;flex:1;min-height:0;margin:8px 0 14px}.tools{justify-content:center;gap:64px;display:flex}.tool{color:var(--muted);letter-spacing:.04em;flex-direction:column;align-items:center;gap:8px;font-size:12px;display:flex}.round.big{width:60px;height:60px}.round.nudge{animation:.9s ease-in-out infinite nudge}@keyframes nudge{50%{box-shadow:inset 0 0 0 1.5px var(--warn), 0 0 22px -4px var(--warn);color:var(--warn);transform:scale(1.07)}}@media (prefers-reduced-motion:reduce){.round.nudge{animation:none}}