:root{color-scheme:dark;--bg:#0b121f;--surface:#17263a;--panel:#1e3149;--ink:#eaf1fa;--muted:#91a3ba;--accent:#63e2c6;--accent-soft:#14332f;--board:#101d2d;--grid:#1e3046;--border:#344860;--veil:rgba(11,18,31,.92);--cell:min(calc((100vw - 140px)/10),calc((100dvh - 250px - env(safe-area-inset-top) - env(safe-area-inset-bottom))/20),25px)}
[data-theme=light]{color-scheme:light;--bg:#f0f5fa;--surface:#e1eaf3;--panel:#d3e0ec;--ink:#192d45;--muted:#52677e;--accent:#007e6c;--accent-soft:#d9eee7;--board:#fcfdff;--grid:#e0e8f1;--border:#b5c8d9;--veil:rgba(240,245,250,.93)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;overscroll-behavior:none;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif}body{overflow:hidden}button,input{font:inherit}button{border:0;color:inherit;background:var(--surface);cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation}button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button:active,button.held{background:var(--panel);transform:translateY(1px)}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.sprite{position:absolute;width:0;height:0;overflow:hidden}.app{height:100dvh;max-height:900px;width:100%;max-width:480px;margin:auto;padding:calc(14px + env(safe-area-inset-top)) 16px calc(8px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px}.toolbar{display:flex;align-items:center;gap:8px;flex-shrink:0;height:50px}.speed-badge{background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent),transparent 85%);border-radius:12px;flex:1;height:50px;min-width:92px;padding:6px 9px;display:flex;flex-direction:column;justify-content:center;gap:2px}.speed-badge span{font-size:10px;color:var(--muted);white-space:nowrap}.speed-badge i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent);margin-right:5px}.speed-badge strong{color:var(--accent);font-size:13px;letter-spacing:.2px;white-space:nowrap}.tool{width:44px;height:50px;border-radius:12px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;flex-shrink:0}.tool small{font-size:8px;color:var(--muted)}.tool svg{width:23px;height:23px}.tool.theme svg{width:27px;height:27px;color:var(--accent)}#records svg{color:var(--accent)}.play-area{display:flex;justify-content:center;align-items:stretch;gap:14px;flex:1;min-height:0}.board-wrap{position:relative;width:calc(var(--cell)*10);height:calc(var(--cell)*20);border-radius:6px;box-shadow:0 0 0 2px var(--border),0 10px 30px #0002;flex-shrink:0;overflow:hidden;background:var(--board);align-self:center;touch-action:none}#board{display:block;width:100%;height:100%}.sidebar{width:80px;display:flex;flex-direction:column;justify-content:space-between;height:calc(var(--cell)*20);align-self:center;padding:0 0 4px}.metrics{display:flex;flex-direction:column;gap:15px}.metrics>div{display:flex;flex-direction:column;gap:4px}.metrics span{font-size:10px;color:var(--muted)}.metrics strong{font-size:22px;font-weight:650;font-variant-numeric:tabular-nums;line-height:1.1;overflow-wrap:anywhere}.metrics strong.long{font-size:13px}.metrics .next{margin-top:3px;gap:5px}#next{width:72px;height:54px;display:block}.pause-wrap{display:flex;align-items:center;flex-direction:column;gap:7px}.pause{border:1px solid var(--accent);color:var(--accent);width:50px;height:50px;border-radius:50%;display:grid;place-items:center}.pause svg{width:25px;height:25px}.pause-wrap span{font-size:10px;color:var(--muted);white-space:nowrap}.overlay{position:absolute;inset:0;background:var(--veil);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;touch-action:manipulation;width:100%;border-radius:0}.overlay[hidden]{display:none}.overlay-title{font-size:25px;font-weight:650;letter-spacing:.5px}.overlay-detail{font-size:12px;color:var(--muted)}.overlay-hint{font-size:12px;color:var(--accent);margin-top:8px}.overlay.countdown .overlay-title{font-size:70px;color:var(--accent);font-variant-numeric:tabular-nums}.overlay.countdown .overlay-hint{display:none}.controls{flex-shrink:0;display:flex;flex-direction:column;gap:10px;touch-action:none}.controls>div{display:grid;gap:10px}.drop-row{grid-template-columns:1fr 1fr}.move-row{grid-template-columns:1fr 1fr 1fr}.controls button{height:49px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:9px;font-size:14px;font-weight:550;touch-action:none}.drop-row button,.move-row button:nth-child(2){color:var(--accent)}.controls svg{width:22px;height:22px}footer{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:9px;color:var(--muted);height:21px;flex-shrink:0}footer button{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--muted);padding:2px;background:transparent}footer svg{width:13px;height:13px}dialog{border:1px solid var(--border);border-radius:20px;background:var(--bg);color:var(--ink);width:min(92vw,420px);max-height:80dvh;padding:24px;box-shadow:0 20px 80px #0007;overscroll-behavior:contain}dialog::backdrop{background:#020811b8;backdrop-filter:blur(5px)}.dialog-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;gap:12px}h1{font-size:21px;letter-spacing:.2px;margin:0;font-weight:650}h2{font-size:16px;margin-top:26px}.close{border-radius:50%;width:32px;height:32px;font-size:24px;line-height:1;background:var(--surface)}dialog p,dialog li{font-size:14px;line-height:1.85}dialog li+li{margin-top:12px}ol{padding-left:20px}.subtle{color:var(--muted)!important;font-size:12px!important;line-height:1.8!important}.range-label{display:flex;justify-content:space-between;font-size:14px;gap:12px}.range-label strong{color:var(--accent);font-weight:600}input[type=range]{width:100%;margin:24px 0 12px;accent-color:var(--accent);height:28px;touch-action:pan-x}.range-ends{display:flex;justify-content:space-between;color:var(--muted);font-size:11px}.indented{text-indent:2em}.dialog-actions{display:flex;gap:12px;margin-top:26px}.dialog-actions button{flex:1;border-radius:10px;min-height:44px;font-size:14px}.primary{background:var(--accent)!important;color:var(--bg)!important;font-weight:650}.wide{width:100%;border-radius:10px;min-height:44px;margin-top:10px}.record-grid{display:grid;gap:18px}.record-grid>div{background:var(--surface);padding:16px 18px;border-radius:13px;display:flex;justify-content:space-between;align-items:center;gap:12px}.record-grid span{font-size:13px;color:var(--muted)}.record-grid strong{font-size:24px;font-variant-numeric:tabular-nums;color:var(--accent);overflow-wrap:anywhere}.inline-icon{width:17px;height:17px;vertical-align:middle}#toast{position:fixed;bottom:calc(22px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;font-size:12px;max-width:90vw;text-align:center;opacity:0;pointer-events:none;transition:opacity .15s;z-index:10}#toast.visible{opacity:1}[hidden]{display:none!important}
@media(max-height:660px){.app{gap:10px}.metrics{gap:10px}.metrics strong{font-size:18px}.metrics .next{margin-top:0}.sidebar{width:76px}.pause{width:44px;height:44px}.overlay-title{font-size:22px}.controls button{height:46px}#next{width:60px;height:45px}}
@media(min-width:600px){body{display:grid;place-items:center}.app{height:min(100dvh,900px);border-left:1px solid var(--grid);border-right:1px solid var(--grid);padding-left:24px;padding-right:24px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@media(max-width:350px){.toolbar{gap:5px}}
.tool.theme svg{width:34px;height:26px}