:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#0e1116;--panel:#161b22;--panel-2:#1f2630;--border:#2d333b;--text:#e6edf3;--muted:#8b949e;--accent:#58a6ff;--accent-2:#2ea043;--canvas-bg-1:#1a2030;--canvas-bg-2:#0e1116}:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f6f8fa;--panel:#fff;--panel-2:#eef1f5;--border:#d0d7de;--text:#1f2328;--muted:#57606a;--accent:#0969da;--accent-2:#1a7f37;--canvas-bg-1:#e6ecf3;--canvas-bg-2:#fff}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.confetti-canvas{pointer-events:none;z-index:90;position:fixed;inset:0}#btn-theme-toggle{border-radius:6px;justify-content:center;align-items:center;width:32px;height:32px;padding:4px 8px;font-size:14px;font-weight:600;display:flex}*{box-sizing:border-box}html,body,#app{height:100%}body{background:var(--bg);color:var(--text);margin:0;font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}#app{flex-direction:column;display:flex}.topbar{border-bottom:1px solid var(--border);background:var(--panel);justify-content:space-between;align-items:center;padding:10px 16px;display:flex}.topbar h1{margin:0;font-size:18px;font-weight:600}.topbar-controls{align-items:center;gap:10px;display:flex}.topbar-controls .speed{color:var(--muted);align-items:center;gap:6px;display:flex}.dd-scramble{position:relative}.dd-scramble summary{cursor:pointer;background:var(--panel-2);border:1px solid var(--border);font:inherit;-webkit-user-select:none;user-select:none;border-radius:6px;padding:6px 12px;list-style:none}.dd-scramble summary::-webkit-details-marker{display:none}.dd-scramble summary:hover,.dd-scramble[open] summary{background:#283040}.dd-menu{background:var(--panel);border:1px solid var(--border);z-index:30;border-radius:8px;min-width:220px;max-height:60vh;padding:6px;position:absolute;top:calc(100% + 4px);right:0;overflow-y:auto;box-shadow:0 8px 24px #0006}.dd-menu hr{border:none;border-top:1px solid var(--border);margin:4px 0}.dd-section{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:4px 8px;font-size:11px}.dd-item{text-align:left;cursor:pointer;width:100%;color:var(--text);font:inherit;background:0 0;border:none;border-radius:4px;padding:6px 8px;display:block}.dd-item:hover{background:var(--panel-2)}.dd-item:disabled{opacity:.5;cursor:not-allowed}button{background:var(--panel-2);color:var(--text);border:1px solid var(--border);cursor:pointer;font:inherit;border-radius:6px;padding:6px 12px}button:hover{background:#283040}button:disabled{opacity:.5;cursor:not-allowed}main{flex:1;grid-template-columns:1fr 380px;min-height:0;display:grid}@media (width<=800px) and (orientation:portrait){main{grid-template-rows:72vh 1fr;grid-template-columns:1fr}.step-pane{border-left:none;border-top:1px solid var(--border);max-height:45vh}}@media (width<=800px) and (orientation:landscape){main{grid-template-columns:1fr 280px}}@media (width<=800px){.move-history{max-height:28px;padding:4px 12px;font-size:12px}.solver-chart-body{max-height:32vh}.solver-chart-wrap{padding:4px 10px;font-size:11px}.solver-chart-wrap>summary{align-items:center;min-height:36px;padding:6px 0}.chart-section>summary{align-items:center;min-height:36px;padding:8px;display:flex}.summary-tools .trails-toggle{display:none}.cube-pane,.step-pane{min-width:0}.move-palette{min-width:0;max-width:100%}.move-palette .palette-row{-webkit-overflow-scrolling:touch;scrollbar-width:thin;flex-wrap:nowrap;justify-content:flex-start;min-width:0;max-width:100%;padding-bottom:4px;overflow:auto hidden}.step-pane{padding:12px}.topbar h1{font-size:14px}.topbar{gap:6px;min-width:0}.topbar-controls{scrollbar-width:none;flex-wrap:nowrap;gap:6px;min-width:0;overflow:auto hidden}.topbar-controls::-webkit-scrollbar{display:none}.topbar-controls>*{flex-shrink:0}.topbar-controls .speed,.topbar-controls #btn-undo,.topbar-controls #btn-cam-reset,.topbar-controls #btn-set-front,.topbar-controls #btn-unscramble,.topbar-controls #btn-help{display:none}.topbar-controls .timer{min-width:48px;padding:4px 6px;font-size:13px}button.mv{min-width:44px;min-height:44px;padding:4px 6px;font-size:12px}button.mv.mv2{min-width:48px}button.mv.mv-rot,button.mv.mv-slice{min-width:44px}.topbar-controls button,#btn-help,#btn-cam-reset,#btn-cb-toggle,#btn-theme-toggle,#btn-keymap,#btn-settings{min-width:40px;min-height:40px}.step-header .nav{min-width:44px;min-height:44px;padding:6px 14px}.step-dots .dot{height:12px;min-height:12px}.footer .link-btn{min-width:44px;min-height:36px;padding:8px 12px;display:inline-block}.step-dots{gap:4px;padding:8px 0}.step-dots .dot{height:14px;min-height:14px;padding:0}.palette-hint{display:none}.move-palette{padding:6px 8px}}@media (width<=420px){.topbar-controls #btn-keymap{display:none}.topbar-controls h1{font-size:13px}.topbar-controls #btn-cb-toggle{min-width:36px;padding:3px 6px;font-size:10px}.topbar-controls .timer{min-width:42px}}.cube-pane{background:radial-gradient(ellipse at center, var(--canvas-bg-1) 0%, var(--canvas-bg-2) 70%);flex-direction:column;min-height:0;display:flex}#cube-canvas{flex:1;min-height:0}#cube-canvas canvas{touch-action:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;display:block}.move-palette{border-top:1px solid var(--border);background:var(--panel);padding:10px 12px}.palette-row{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}button.mv{background:#1f2630;min-width:42px;padding:6px 10px;font-family:ui-monospace,JetBrains Mono,Consolas,monospace;font-size:13px;font-weight:600}button.mv.mv2{color:var(--muted);background:#1a2030}button.mv.mv-rot{color:#d8b4fe;background:#2a1f30}button.mv.mv-slice{color:#93c5fd;background:#1f2a30}.palette-sep{background:var(--border);align-self:stretch;width:1px;margin:0 4px}.advanced-moves{color:var(--muted);margin-bottom:4px;font-size:12px}.advanced-moves summary{cursor:pointer;padding:2px 0;list-style:none}.advanced-moves summary:before{content:"▸ ";transition:transform .15s;display:inline-block}.advanced-moves[open] summary:before{transform:rotate(90deg)}.palette-row-adv{margin-bottom:6px}button.mv:hover,button.mv.mv2:hover{color:var(--text);background:#2c3543}.palette-hint{text-align:center;color:var(--muted);margin-top:6px;font-size:12px}.move-history{border-top:1px solid var(--border);background:var(--panel);color:var(--muted);white-space:nowrap;scroll-behavior:smooth;max-height:64px;padding:8px 12px;font-family:ui-monospace,JetBrains Mono,Consolas,monospace;font-size:13px;overflow:auto}.solver-chart-wrap{border-top:1px solid var(--border);background:var(--panel);padding:6px 12px 8px;font-size:12px}.solver-chart-wrap>summary{cursor:pointer;color:var(--muted);-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;gap:10px;padding:2px 0;list-style:none;display:flex}.solver-chart-wrap>summary::-webkit-details-marker{display:none}.summary-label:before{content:"▸ ";transition:transform .15s;display:inline-block}.solver-chart-wrap[open] .summary-label:before{transform:rotate(90deg)}.solver-chart-wrap>summary:hover{color:var(--text)}.summary-tools{align-items:center;gap:8px;display:flex}.ghost-lag{letter-spacing:.04em;border-radius:999px;padding:2px 8px;font-family:ui-monospace,JetBrains Mono,Consolas,monospace;font-size:11px;font-weight:700}.ghost-lag.idle{background:var(--panel-2);color:var(--muted)}.ghost-lag.on-track{color:var(--accent-2);background:#2ea0432e}.ghost-lag.drift{color:#d4a72c;background:#ffc83c2e}.ghost-lag.behind{color:#dc5050;background:#dc50502e}.trails-toggle{background:var(--panel-2);color:var(--muted);border:1px solid var(--border);cursor:pointer;border-radius:999px;padding:2px 8px;font-size:11px}.trails-toggle.on{background:var(--accent);color:#0d1117;border-color:var(--accent)}.trails-toggle:hover{color:var(--text)}.ghost-preview-row{align-items:baseline;gap:6px;padding:2px 4px;font-family:ui-monospace,JetBrains Mono,Consolas,monospace;font-size:11px;display:flex}.ghost-preview-label{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-size:10px}.ghost-preview{color:var(--accent)}.solver-chart-body{max-height:38vh;margin-top:4px;overflow-y:auto}.chart-stack{flex-direction:column;gap:6px;display:flex}.chart-section>summary{cursor:pointer;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);background:var(--panel-2);-webkit-user-select:none;user-select:none;border-radius:4px;padding:4px 6px;font-size:11px;list-style:none}.chart-section>summary::-webkit-details-marker{display:none}.chart-section>summary:before{content:"▸ ";transition:transform .15s;display:inline-block}.chart-section[open]>summary:before{transform:rotate(90deg)}.chart-section>summary:hover{color:var(--text)}.chart-section>:not(summary){margin-top:4px}.chart-row{position:relative}#solver-chart,#rhythm-chart,#mosaic-chart{background:var(--panel-2);border-radius:6px;width:100%;display:block}#solver-chart{height:72px}#rhythm-chart{height:40px}#mosaic-chart{height:120px}.best-moves{background:var(--panel-2);border-radius:6px;padding:6px 8px;font-family:ui-monospace,JetBrains Mono,Consolas,monospace;font-size:11px}.best-moves .bm-header{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--border);justify-content:space-between;margin-bottom:4px;padding:2px 0 4px;font-size:10px;display:flex}.best-moves .bm-current{color:var(--accent)}.best-moves .best-moves-empty{color:var(--muted);text-align:center;padding:8px 0;font-size:11px}.best-row{grid-template-columns:32px 1fr 28px 32px;align-items:center;gap:6px;padding:1px 0;display:grid}.best-row .bm-move{color:var(--text)}.best-row .bm-dist{color:var(--text);text-align:right}.best-row .bm-delta{color:var(--muted);text-align:right;font-size:10px}.best-row.best .bm-move,.best-row.best .bm-dist{color:var(--accent-2);font-weight:700}.best-row.good .bm-delta{color:var(--accent-2)}.best-row.bad .bm-delta{color:#dc5050}.bm-bar{background:#8c949e26;border-radius:3px;height:6px;overflow:hidden}.bm-bar-fill{background:var(--accent);border-radius:3px;height:100%;transition:width .18s}.best-row.best .bm-bar-fill{background:var(--accent-2)}.best-row.bad .bm-bar-fill{background:#dc5050}.solver-chart-status{color:var(--muted);pointer-events:none;font-size:11px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.move-history .label{color:var(--muted);margin-right:8px}.move-history .count{color:var(--accent);margin-left:2px}#moves{color:var(--text)}.replay-bar{border-top:1px solid var(--border);background:var(--panel);align-items:center;gap:8px;padding:6px 12px;display:flex}.replay-bar[hidden]{display:none}.replay-bar input[type=range]{accent-color:var(--accent);flex:1}.replay-bar button{width:30px;height:28px;padding:0;font-size:14px}#btn-help,#btn-cam-reset{border-radius:50%;width:32px;height:32px;padding:0;font-size:16px;font-weight:600;line-height:1}#btn-cb-toggle{letter-spacing:.5px;border-radius:6px;padding:4px 8px;font-size:11px;font-weight:700}#btn-cb-toggle[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#0d1117}.timer{color:var(--muted);text-align:right;min-width:56px;padding:4px 8px;font-family:ui-monospace,JetBrains Mono,Consolas,monospace;font-size:15px}.timer.running{color:var(--accent)}.timer.solved{color:var(--accent-2);font-weight:600}.timer.paused{color:var(--muted)}.timer.inspection{color:#ff8c42;font-weight:600}.offline-pill{color:#ffd0d0;background:#5b2126;border-radius:999px;padding:2px 8px;font-size:11px;font-weight:600;display:inline-block}#btn-install{background:var(--accent);color:#0d1117;border-color:#0000;font-weight:600}#btn-install:hover{background:#4a96ef}.settings-grid{flex-direction:column;gap:12px;margin-top:8px;display:flex}.setting{background:var(--panel-2);cursor:pointer;border-radius:8px;justify-content:space-between;align-items:center;gap:12px;padding:8px 12px;display:flex}.setting input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent);cursor:pointer}.setting span small{color:var(--muted);font-size:11px}button#btn-hint{color:#ffe066;background:#2a2a1a}button#btn-hint:hover{background:#3a3a20}.alg-moves .tok.hint{color:#0d1117;background:#ffe066;font-weight:700;animation:1.2s ease-in-out 3 hintPulse}@keyframes hintPulse{0%,to{box-shadow:0 0 #ffe066}50%{box-shadow:0 0 0 4px #ffe06666}}.solved-toast{z-index:50;pointer-events:none;position:fixed;top:70px;left:50%;transform:translate(-50%)}.solved-toast[hidden]{display:none}.solved-card{background:linear-gradient(135deg, var(--accent-2) 0%, #36b150 100%);color:#fff;text-align:center;border-radius:12px;padding:16px 28px;animation:.45s cubic-bezier(.18,.89,.32,1.28) solvedPop;box-shadow:0 12px 32px #00c85059}.solved-card h3{margin:0 0 4px;font-size:22px}.solved-card p{opacity:.9;margin:0;font-size:14px}.solved-card .confetti{letter-spacing:8px;opacity:.8;font-size:18px}@keyframes solvedPop{0%{opacity:0;transform:translateY(-20px)scale(.8)}to{opacity:1;transform:translateY(0)scale(1)}}.solved-toast.fading .solved-card{animation:.6s ease-out forwards solvedFade}@keyframes solvedFade{to{opacity:0;transform:translateY(-8px)scale(.97)}}.keymap-overlay{z-index:80;background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.keymap-overlay[hidden]{display:none}.keymap-card{background:var(--panel);border:1px solid var(--border);border-radius:12px;width:calc(100% - 32px);max-width:480px;padding:22px 26px;position:relative;box-shadow:0 16px 60px #00000080}.keymap-card h3{margin:0 0 12px}.keymap-card table{border-collapse:collapse;width:100%;font-size:13px}.keymap-card th,.keymap-card td{border-bottom:1px solid var(--border);text-align:left;padding:6px 4px}.keymap-card th{color:var(--muted);font-weight:600}.keymap-card .hint{color:var(--muted);margin:12px 0 0;font-size:12px}.keymap-card .close{width:32px;height:32px;color:var(--muted);cursor:pointer;background:0 0;border:none;font-size:22px;position:absolute;top:8px;right:8px}kbd{background:var(--panel-2);border:1px solid var(--border);color:var(--text);border-radius:4px;padding:1px 6px;font-family:ui-monospace,JetBrains Mono,Consolas,monospace;font-size:11px;display:inline-block}.axes-hint{color:var(--muted);pointer-events:none;z-index:5;-webkit-user-select:none;user-select:none;gap:4px;font-family:ui-monospace,JetBrains Mono,Consolas,monospace;font-size:10px;display:flex;position:absolute;bottom:14px;left:14px}.axes-hint .axis{background:#0000004d;border-radius:3px;padding:2px 5px}.axes-hint .ax-x{color:#ff6b6b}.axes-hint .ax-y{color:#6bff8c}.axes-hint .ax-z{color:#6b9aff}.cube-pane{position:relative}.footer{color:var(--muted);text-align:center;border-top:1px solid var(--border);background:var(--panel);padding:6px 10px;font-size:11px}.footer a{color:var(--accent);text-decoration:none}.footer a:hover{text-decoration:underline}.footer .link-btn{color:var(--accent);cursor:pointer;font:inherit;background:0 0;border:none;padding:0;text-decoration:underline}.footer .link-btn:hover{color:var(--accent-2)}button.danger{color:#ffd0d0;background:#5b2126;border-color:#7d2a30}button.danger:hover{background:#6b2a30}button.primary{background:var(--accent);color:#0d1117;border-color:#0000;font-weight:600}button.primary:hover{background:#4a96ef}#stats-body{font-size:13px;line-height:1.6}#stats-body table{border-collapse:collapse;width:100%;margin-top:8px}#stats-body th,#stats-body td{border-bottom:1px solid var(--border);text-align:left;padding:4px 8px;font-size:12px}#stats-body th{color:var(--muted);font-weight:600}#stats-body .big{flex-wrap:wrap;gap:18px;margin:4px 0 8px;display:flex}#stats-body .big>div{background:var(--panel-2);border-radius:8px;padding:8px 14px}#stats-body .big .num{color:var(--accent);font-size:22px;font-weight:700}#stats-body .big .lbl{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-size:11px}.sparkline-wrap{background:var(--panel-2);border-radius:8px;margin-top:8px;padding:8px}.onboarding{z-index:100;background:#000000a6;justify-content:center;align-items:center;padding:16px 0;display:flex;position:fixed;inset:0;overflow-y:auto}.onboarding[hidden]{display:none}.onboarding-card{background:var(--panel);border:1px solid var(--border);border-radius:12px;width:calc(100% - 32px);max-width:480px;max-height:calc(100vh - 32px);padding:24px 28px;position:relative;overflow-y:auto;box-shadow:0 16px 60px #00000080}.onboarding-card h2{margin:0 0 8px;font-size:22px}.onboarding-card p{color:var(--muted);margin:0 0 14px}.onboarding-card a{color:var(--accent)}.onboarding-card ol{margin:0 0 18px;padding-left:20px;line-height:1.7}.onboarding-card ol strong{color:var(--text)}.onboarding-card .close{width:32px;height:32px;color:var(--muted);cursor:pointer;background:0 0;border:none;font-size:22px;position:absolute;top:8px;right:8px}.onboarding-card .primary{background:var(--accent-2);color:#fff;border-color:#0000;padding:10px 20px;font-size:14px;font-weight:600}.onboarding-card .primary:hover{background:#36b150}.step-pane{border-left:1px solid var(--border);background:var(--panel);padding:16px;overflow-y:auto}.step-header{align-items:center;gap:10px;margin-bottom:8px;display:flex}.step-header .nav{background:var(--panel-2);padding:4px 14px;font-size:18px;font-weight:700;line-height:1}.step-header .nav:hover{background:#2c3543}.step-progress{color:var(--muted);background:var(--panel-2);white-space:nowrap;border-radius:999px;padding:2px 8px;font-family:ui-monospace,JetBrains Mono,Consolas,monospace;font-size:12px;font-weight:600;transition:background .3s,color .3s}.step-progress.full{color:var(--accent-2);background:#2ea04326}.step-progress.flash-up{animation:1.2s ease-out chipFlashUp}.step-progress.flash-flat{animation:1.2s ease-out chipFlashFlat}.step-progress.flash-down{animation:1.2s ease-out chipFlashDown}@keyframes chipFlashUp{0%,30%{color:#fff;background:#2ea04399;transform:scale(1.15)}to{background:var(--panel-2);color:var(--muted);transform:scale(1)}}@keyframes chipFlashFlat{0%,30%{color:#1a1a00;background:#ffc83c99}to{background:var(--panel-2);color:var(--muted)}}@keyframes chipFlashDown{0%,30%{color:#fff;background:#dc505099}to{background:var(--panel-2);color:var(--muted)}}button#btn-apply-3,button#btn-apply-5{color:var(--muted);background:#1a2030;flex:none;padding:6px 8px;font-family:ui-monospace,Consolas,monospace;font-size:13px}button#btn-apply-3:hover,button#btn-apply-5:hover{color:var(--text);background:#283040}.step-dots{gap:6px;margin:0 0 14px;padding:0;display:flex}.step-dots .dot{background:var(--panel-2);border:1px solid var(--border);cursor:pointer;border-radius:3px;flex:1;height:6px;padding:0;transition:background .12s}.step-dots .dot:hover{background:#2c3543}.step-dots .dot.active{background:var(--accent);border-color:var(--accent)}#step-title{flex:1}#step-number{text-transform:uppercase;letter-spacing:.08em;color:var(--accent);font-size:12px;font-weight:700}#step-title{font-size:18px;font-weight:600}.step-goal{color:var(--muted);margin:0 0 14px}.alg-card{background:var(--panel-2);border:1px solid var(--border);border-radius:8px;margin-bottom:12px;padding:12px}.alg-name{margin-bottom:6px;font-weight:600}.alg-name.try-other{border-radius:4px;animation:1.6s ease-out 2 tryOtherPulse}@keyframes tryOtherPulse{0%,to{background:0 0;box-shadow:0 0 #ffc83c00}50%{background:#ffc83c2e;box-shadow:0 0 0 4px #ffc83c2e}}.alg-moves{color:var(--accent);letter-spacing:.04em;background:#0d1117;border-radius:6px;flex-wrap:wrap;gap:6px;margin-bottom:8px;padding:6px 10px;font-family:ui-monospace,JetBrains Mono,Consolas,monospace;font-size:16px;display:flex}.alg-moves .tok{border-radius:4px;padding:1px 4px;transition:background .18s,color .18s}.alg-moves .tok.current{background:var(--accent);color:#0d1117;font-weight:700}.alg-moves .tok.done{color:var(--muted)}.alg-when{color:var(--muted);margin-bottom:10px;font-size:13px}.alg-actions{gap:8px;display:flex}.alg-actions button{flex:1}#btn-apply{background:var(--accent-2);color:#fff;border-color:#0000}#btn-apply:hover{background:#36b150}.ref-image{text-align:center;background:#fff;border-radius:8px;margin-bottom:12px;padding:10px}.ref-image img{max-width:100%;height:auto}.ref-image .src-link{color:#555;margin-top:6px;font-size:11px;text-decoration:none;display:block}.tips{color:var(--muted)}.tips ul{margin:8px 0 0 18px;padding:0}.tips li{margin-bottom:4px}
