:root{--bg: #0b0d1c;--surface: #151a33;--line: #2a3057;--ink: #eef1ff;--muted: #9aa3cc;--accent: #7c8cff;--accent-ink: #0b0d1c;color-scheme:dark}:root{--pad-bg: var(--bg);--pad-surface: var(--surface);--pad-ink: var(--ink);--pad-muted: var(--muted);--pad-line: var(--line);--pad-accent: var(--accent);--pad-accent-strong: var(--accent);--pad-accent-ink: var(--accent-ink);--pad-tile: var(--line)}@media(prefers-color-scheme:light){:root{--bg: #f5f6fb;--surface: #ffffff;--line: #dfe3f2;--ink: #161a2e;--muted: #5d6488;--accent: #4353d6;--accent-ink: #ffffff;color-scheme:light}}*{box-sizing:border-box}html,body{height:100%;margin:0}body{display:flex;flex-direction:column;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overscroll-behavior:none;touch-action:manipulation}.hud{font-variant-numeric:tabular-nums;font-weight:700}.hud .goal{font-weight:400;color:var(--muted)}.hud.holding,.hud.holding .goal{color:var(--accent)}.pause{padding:4px 12px;font-size:.9rem}.pause[hidden]{display:none}main{position:relative;display:flex;flex-direction:column;gap:8px;flex:1;min-height:0;margin:0 max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-right))}canvas{display:block;width:100%;flex:1;min-height:0;background:#05060f;border:1px solid var(--line);border-radius:16px;touch-action:none}.tray{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;flex:none}.tray[hidden]{display:none}.tray-piece{display:flex;align-items:center;gap:8px;padding:6px 14px 6px 8px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:999px;font-weight:600;touch-action:none;cursor:grab}.tray-piece.empty{opacity:.45;cursor:default}.tray-disc{display:inline-block;border-radius:50%;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--tint),white 45%),var(--tint) 50%,color-mix(in srgb,var(--tint),black 55%))}.tray-count{color:var(--muted);font-variant-numeric:tabular-nums}.tray-count:before{content:"× "}.best{font-weight:700}.best:empty{display:none}button{font:inherit;font-weight:700;padding:12px 28px;color:var(--accent-ink);background:var(--accent);border:0;border-radius:999px;cursor:pointer}button:hover{filter:brightness(1.08)}.links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;margin:4px 0 0}.link{padding:0;color:var(--muted);background:none;font-weight:400;text-decoration:underline}.link:hover{color:var(--ink)}.tray-disc.star{background:radial-gradient(circle,#fff 0 35%,var(--tint) 50%,transparent 72%);box-shadow:0 0 10px 2px var(--tint)}.levels{list-style:none;margin:0;padding:0;display:grid;gap:6px;min-width:min(280px,70vw)}.levels .level{display:flex;justify-content:space-between;gap:16px;width:100%;padding:10px 14px;border:1px solid color-mix(in srgb,currentColor 20%,transparent);border-radius:10px;background:transparent;color:inherit;font:inherit;cursor:pointer}.levels .level.here{border-color:currentColor}.levels .level-note{color:var(--muted)}.solved{position:absolute;top:12px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:12px;max-width:calc(100% - 24px);padding:6px 6px 6px 16px;color:var(--ink);background:var(--surface);border:1px solid var(--accent);border-radius:999px;box-shadow:0 4px 18px #00000059;font-weight:600;animation:solved-in .25s ease-out}.solved[hidden]{display:none}.solved button{flex:none;padding:6px 14px;color:#fff;background:var(--accent);border:0;border-radius:999px;font:inherit;cursor:pointer}.solved button[hidden]{display:none}@keyframes solved-in{0%{opacity:0;transform:translate(-50%,-8px)}}