:root{--bg:#0f1115;--surface:#181b22;--surface-2:#20242d;--border:#2c313c;--text:#e9ecf1;--muted:#9aa3b2;--accent:#ff2e93;--accent-text:#fff;--err:#ff6b6b;--ok:#4ade80;--radius:12px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}@media (prefers-color-scheme:light){:root{--bg:#f3f4f7;--surface:#fff;--surface-2:#eef0f4;--border:#d9dde5;--text:#171a21;--muted:#5d6675;--err:#d62839;--ok:#15803d;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}}*{box-sizing:border-box}html,body{margin:0}body{background:var(--bg);color:var(--text);flex-direction:column;min-height:100vh;font:15px/1.55 system-ui,-apple-system,PingFang TC,Noto Sans TC,Microsoft JhengHei,sans-serif;display:flex}button{font:inherit;color:inherit;cursor:pointer}button:disabled{opacity:.4;cursor:default}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.topbar{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:12px;padding:12px 20px;display:flex}.brand{align-items:center;gap:10px;min-width:0;display:flex}.brand h1{margin:0;font-size:18px;line-height:1.2}.tagline{color:var(--muted);margin:0;font-size:13px}.layout{flex:1;grid-template-columns:minmax(340px,460px) 1fr;gap:16px;min-height:0;padding:16px 20px;display:grid}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:12px;min-width:0;padding:16px;display:flex}.viewer{background:radial-gradient(circle at 50% 40%, var(--surface-2), var(--surface) 70%);border:1px solid var(--border);border-radius:var(--radius);min-height:460px;position:relative;overflow:hidden}.canvas-wrap{touch-action:none;position:absolute;inset:0}.canvas-wrap canvas{width:100%;height:100%;display:block}.engine-status{color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:99px;padding:4px 10px;font-size:12px;position:absolute;bottom:12px;left:12px}.engine-status[hidden]{display:none}.tip{margin:0}.hint{color:var(--muted);margin:0;font-size:12.5px}.palette{grid-template-columns:repeat(6,1fr);gap:8px;display:grid}.swatch{aspect-ratio:1;border:2px solid var(--border);background:var(--c);border-radius:10px;padding:0;transition:transform .1s;position:relative}.swatch.on{border-color:var(--text);box-shadow:0 0 0 3px var(--accent);transform:scale(1.06)}.swatch .count{background:var(--surface);border:1px solid var(--border);color:var(--muted);white-space:nowrap;border-radius:99px;padding:3px 5px;font-size:11px;line-height:1;position:absolute;bottom:-9px;left:50%;transform:translate(-50%)}.swatch .count.full{color:var(--ok)}.swatch .count.over{color:var(--err);border-color:var(--err)}.net{-webkit-user-select:none;user-select:none;touch-action:manipulation;grid-template-rows:repeat(3,auto);grid-template-columns:repeat(4,1fr);gap:4px;margin-top:8px;display:grid}.face{background:#0b0c10;border-radius:6px;grid-template-columns:repeat(3,1fr);gap:2px;padding:2px;display:grid}.cell{aspect-ratio:1;background:var(--c);border:0;border-radius:4px;padding:0}.cell.blank{background:repeating-linear-gradient(45deg,#3a3f4a 0 4px,#2e323b 4px 8px)}.cell.center{cursor:default;box-shadow:inset 0 0 0 2px #00000059}.cell.center:after{content:"";background:#00000047;border-radius:50%;width:26%;height:26%;margin:auto;display:block}.cell.bad{outline:3px solid var(--accent);outline-offset:-3px;animation:.9s infinite alternate pulse}@keyframes pulse{to{outline-color:#0000}}@media (hover:hover){.cell:not(.center):hover{filter:brightness(1.15)}}.msg{min-height:1.5em;color:var(--muted);font-size:14px}.msg.err{color:var(--err)}.actions{flex-wrap:wrap;gap:8px;display:flex}.actions .primary{margin-left:auto}.ghost{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:8px 14px}.primary{background:var(--accent);color:var(--accent-text);border:0;border-radius:10px;padding:9px 18px;font-weight:600}.solve-head{justify-content:space-between;align-items:center;display:flex}.total{color:var(--muted);font-size:14px}.card{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);text-align:center;flex-direction:column;justify-content:center;gap:4px;min-height:168px;padding:16px;display:flex}.card.done{border-color:var(--ok)}.step-of{color:var(--muted);font-size:13px}.notation{color:var(--accent);font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:44px;font-weight:800;line-height:1.1}.desc{font-size:16px}.desc .sub{color:var(--muted);font-size:12.5px;display:block}.done-text{color:var(--ok);font-size:22px;font-weight:700}.controls{align-items:center;gap:8px;display:flex}.icon{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;flex:none;width:42px;height:42px;font-size:15px}.icon.play{width:52px}.next{flex:1;height:42px}.opts{color:var(--muted);flex-wrap:wrap;gap:6px 16px;font-size:13.5px;display:flex}.opts label{align-items:center;gap:6px;display:flex}.opts input[type=range]{width:110px;accent-color:var(--accent)}.opts input[type=checkbox]{accent-color:var(--accent)}.chips{flex-wrap:wrap;gap:6px;max-height:180px;margin:0;padding:0;list-style:none;display:flex;position:relative;overflow:auto}.chip{border:1px solid var(--border);background:var(--surface-2);border-radius:8px;align-items:baseline;gap:4px;padding:3px 8px;font-family:ui-monospace,SF Mono,Menlo,monospace;font-weight:600;display:flex}.chip small{color:var(--muted);font-size:10px;font-weight:400}.chip.past{opacity:.45}.chip.cur{border-color:var(--accent);color:var(--accent)}.chip.start{font-family:inherit;font-weight:400}.footer{color:var(--muted);text-align:center;padding:10px 20px 18px;font-size:12px}@media (width<=820px){.topbar{padding:10px 16px}.tagline{display:none}.layout{grid-template-columns:1fr;gap:12px;padding:12px 16px}.viewer{order:-1;height:42vh;min-height:0;max-height:380px}.panel{padding:14px}.notation{font-size:36px}.card{min-height:140px}}