*,:before,:after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bg:var(--lightningcss-light,#e8ebef)var(--lightningcss-dark,#080c10);--surface:var(--lightningcss-light,#f3f5f8)var(--lightningcss-dark,#0d1117);--panel:var(--lightningcss-light,#fff)var(--lightningcss-dark,#161b22);--panel-2:var(--lightningcss-light,#eef2f6)var(--lightningcss-dark,#1c2128);--border:var(--lightningcss-light,#d6dce2)var(--lightningcss-dark,#21262d);--border-2:var(--lightningcss-light,#c3ccd5)var(--lightningcss-dark,#30363d);--text:var(--lightningcss-light,#1c2128)var(--lightningcss-dark,#e6edf3);--sub:var(--lightningcss-light,#56606b)var(--lightningcss-dark,#7d8590);--teal:var(--lightningcss-light,#0f766e)var(--lightningcss-dark,#2dd4bf);--teal-dim:var(--lightningcss-light,#0f766e1f)var(--lightningcss-dark,#2dd4bf26);--teal-glow:var(--lightningcss-light,#0f766e40)var(--lightningcss-dark,#2dd4bf59);--amber:var(--lightningcss-light,#b45309)var(--lightningcss-dark,#fbbf24);--amber-dim:var(--lightningcss-light,#b453091f)var(--lightningcss-dark,#fbbf2426);--violet:var(--lightningcss-light,#6d28d9)var(--lightningcss-dark,#c084fc);--violet-dim:var(--lightningcss-light,#6d28d91f)var(--lightningcss-dark,#c084fc26);--violet-glow:var(--lightningcss-light,#6d28d940)var(--lightningcss-dark,#c084fc59);--red:var(--lightningcss-light,#dc2626)var(--lightningcss-dark,#f85149);--red-dim:var(--lightningcss-light,#dc26261a)var(--lightningcss-dark,#f8514926);--green:var(--lightningcss-light,#15803d)var(--lightningcss-dark,#3fb950);--green-dim:var(--lightningcss-light,#15803d1a)var(--lightningcss-dark,#3fb95026);--teal-border:var(--lightningcss-light,#0f766e73)var(--lightningcss-dark,#2dd4bf66);--teal-soft:var(--lightningcss-light,#0f766e1a)var(--lightningcss-dark,#2dd4bf14);--amber-border:var(--lightningcss-light,#b4530973)var(--lightningcss-dark,#fbbf2466);--amber-line:var(--lightningcss-light,#b4530999)var(--lightningcss-dark,#fbbf2499);--amber-soft:var(--lightningcss-light,#b453092e)var(--lightningcss-dark,#fbbf2433);--amber-glow:var(--lightningcss-light,#b4530959)var(--lightningcss-dark,#fbbf2480);--violet-border:var(--lightningcss-light,#6d28d973)var(--lightningcss-dark,#c084fc66);--violet-line:var(--lightningcss-light,#6d28d999)var(--lightningcss-dark,#c084fc99);--green-border:var(--lightningcss-light,#15803d73)var(--lightningcss-dark,#3fb95066);--red-border:var(--lightningcss-light,#dc262673)var(--lightningcss-dark,#f8514966);--line:var(--lightningcss-light,#0f766e8c)var(--lightningcss-dark,#2dd4bf66);--header-bg:var(--lightningcss-light,#f3f5f8d9)var(--lightningcss-dark,#080c10d9);--board-shadow:var(--lightningcss-light,#0f172a24)var(--lightningcss-dark,#0009);--bg-glow:var(--lightningcss-light,#0f766e0d)var(--lightningcss-dark,#2dd4bf0f);--sq-light:var(--lightningcss-light,#eceff3)var(--lightningcss-dark,#1c2128);--sq-dark:var(--lightningcss-light,#dde3e9)var(--lightningcss-dark,#161b22);--sq-blocked:var(--lightningcss-light,#4b525c)var(--lightningcss-dark,#3d444d);--font-ui:"JetBrains Mono", "Courier New", monospace;--font-title:"Crimson Pro", Georgia, serif;--sat:env(safe-area-inset-top,0px);--sar:env(safe-area-inset-right,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--h-chip:26px;--h-tool:36px;--h-piece:44px;--h-tray:34px;--h-act:46px;--deck-gap:8px;--edge:14px}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}html{background:var(--bg);height:100%;color:var(--text);font-family:var(--font-ui);overscroll-behavior:none;font-size:14px;line-height:1.5}body{background:var(--bg);background-image:radial-gradient(ellipse 80% 60% at 50% 0%, var(--bg-glow) 0%, transparent 70%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");height:100%;overflow:hidden}#root{overflow-anchor:none;height:100dvh;padding-bottom:calc(var(--sab) + 6px);padding-left:var(--sal);padding-right:var(--sar);flex-direction:column;align-items:center;display:flex;overflow:hidden auto}@media (display-mode:standalone){body{min-height:100vh}#root{height:100vh}}.app{flex-direction:column;align-items:stretch;gap:0;width:100%;max-width:560px;min-height:100%;display:flex}.app-header{--header-pad-top:10px;width:100%;padding:calc(var(--header-pad-top) + var(--sat)) var(--edge) 8px;border-bottom:1px solid var(--border);background:var(--header-bg);-webkit-backdrop-filter:blur(12px);z-index:10;align-items:baseline;gap:8px;display:flex;position:sticky;top:0}.app-header h1{font-family:var(--font-title);color:var(--teal);letter-spacing:.01em;font-size:1.4rem;font-weight:600;line-height:1.15}.app-header .tagline{color:var(--sub);letter-spacing:.04em;text-transform:uppercase;font-size:.68rem}.theme-toggle{background:var(--panel);width:32px;height:32px;color:var(--text);cursor:pointer;-webkit-user-select:none;user-select:none;border:1px solid #0000;border-radius:8px;flex-shrink:0;justify-content:center;align-self:center;align-items:center;margin-left:auto;font-size:1rem;line-height:1;transition:background .15s,border-color .15s,transform .1s;display:flex}.theme-toggle:active{transform:scale(.92)}.setup-strip{width:100%;padding:8px var(--edge) 7px;background:var(--surface);border-bottom:1px solid var(--border)}.mode-tabs{gap:4px;display:grid}.mode-tab{background:var(--panel);color:var(--sub);font-family:var(--font-ui);cursor:pointer;white-space:nowrap;text-overflow:ellipsis;text-align:center;-webkit-user-select:none;user-select:none;border:1px solid #0000;border-radius:6px;padding:5px 4px;font-size:.63rem;font-weight:500;transition:background .15s,color .15s,border-color .15s;overflow:hidden}.mode-tab.active{background:var(--teal-dim);color:var(--teal);border-color:var(--teal-border)}.mode-tab:active{opacity:.7}.status-line{min-height:1.45em;color:var(--sub);align-items:baseline;gap:8px;margin-top:5px;font-size:.68rem;line-height:1.45;display:flex}.status-line .status-text{-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;animation:.25s hintFade;display:-webkit-box;overflow:hidden}.status-line.result{font-weight:700}.status-line.result.success{color:var(--green)}.status-line.result.failure{color:var(--red)}.status-line.result.warning{color:var(--amber)}.status-time{font-variant-numeric:tabular-nums;opacity:.75;flex-shrink:0;margin-left:auto;font-size:.64rem;font-weight:700}@keyframes hintFade{0%{opacity:0}to{opacity:1}}.stage{padding:10px var(--edge);flex:1 1 0;display:flex}.board-area{min-height:calc(var(--board-rows,5) * 24px + (var(--board-rows,5) - 1) * 2px + 4px);flex:1 1 0;place-items:end center;width:100%;min-width:0;display:grid;container-type:size}.board-grid{--cell:max(24px, min(calc((100cqw - (var(--board-cols) - 1) * 2px - 4px) / var(--board-cols)), calc((100cqh - (var(--board-rows) - 1) * 2px - 4px) / var(--board-rows))));grid-template-columns:repeat(var(--board-cols), var(--cell));grid-template-rows:repeat(var(--board-rows), var(--cell));touch-action:none;-webkit-user-select:none;user-select:none;border:2px solid var(--border-2);box-shadow:0 0 0 1px var(--teal-soft), 0 8px 32px var(--board-shadow);border-radius:6px;gap:2px;display:grid;overflow:hidden}.board-cell{width:var(--cell);height:var(--cell);font-size:calc(var(--cell) * .58);cursor:pointer;will-change:contents;-webkit-font-smoothing:antialiased;justify-content:center;align-items:center;line-height:1;transition:background-color 80ms;display:flex;position:relative;transform:translateZ(0)}.board-cell.light{background:var(--sq-light)}.board-cell.dark{background:var(--sq-dark)}.board-cell.blocked{cursor:pointer;background:var(--sq-blocked)!important}.blk-fill{background:var(--sq-blocked);pointer-events:none;z-index:1;position:absolute}.blk-t{height:2px;top:-2px;left:-2px;right:-2px}.blk-b{height:2px;bottom:-2px;left:-2px;right:-2px}.blk-l{width:2px;top:0;bottom:0;left:-2px}.blk-r{width:2px;top:0;bottom:0;right:-2px}.board-cell.fixed-piece .piece-glyph{color:var(--amber);filter:drop-shadow(0 0 6px var(--amber-glow));animation:.22s cubic-bezier(.34,1.56,.64,1) piecePop}.board-cell.fixed-piece:after{content:"";border:2px solid var(--amber);opacity:.7;pointer-events:none;border-radius:4px;position:absolute;inset:2px}.board-cell.solution-piece .piece-glyph{color:var(--amber);filter:drop-shadow(0 0 8px var(--amber-glow));animation:piecePop .3s cubic-bezier(.34, 1.56, .64, 1) var(--d,0s) backwards}.board-cell.solution-piece:after{content:"";background:var(--amber-dim);border:2px solid var(--amber-line);pointer-events:none;animation:solveFlash .4s ease-out var(--d,0s) backwards;border-radius:0;position:absolute;inset:0}@keyframes solveFlash{0%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}@keyframes piecePop{0%{opacity:0;transform:scale(.4)}70%{opacity:1;transform:scale(1.12)}to{opacity:1;transform:scale(1)}}.bnd{pointer-events:none;z-index:2;background:var(--line);position:absolute}.bnd-t{height:2px;top:-1px;left:-1px;right:-1px}.bnd-b{height:2px;bottom:-1px;left:-1px;right:-1px}.bnd-l{width:2px;top:-1px;bottom:-1px;left:-1px}.bnd-r{width:2px;top:-1px;bottom:-1px;right:-1px}.deck{gap:var(--deck-gap);padding:0 var(--edge);flex-direction:column;flex:none;display:flex}.deck-row{align-items:center;gap:6px;display:flex}.mini-label{color:var(--sub);letter-spacing:.06em;text-transform:uppercase;flex-shrink:0;font-size:.62rem;font-weight:700}.mini-label.rows{margin-left:8px}.chip-group{gap:4px;display:flex}.chip{width:30px;height:var(--h-chip);border:1px solid var(--border);background:var(--panel);color:var(--sub);font-family:var(--font-ui);cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:5px;font-size:.75rem;font-weight:700;transition:all .15s}.chip.active{background:var(--teal-dim);color:var(--teal);border-color:var(--teal-border)}.chip:active:not(:disabled){transform:scale(.94)}.history-tools{border-left:1px solid var(--border);flex-shrink:0;gap:4px;padding-left:6px;display:flex}.icon-btn{width:32px;height:var(--h-tool);border:1px solid var(--border);background:var(--panel);color:var(--text);font-family:var(--font-ui);cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:8px;font-size:1rem;line-height:1;transition:all .15s}.icon-btn:active:not(:disabled){transform:scale(.94)}.icon-btn:disabled{opacity:.35;cursor:not-allowed}.tool-btn{height:var(--h-tool);border:1px solid var(--border);background:var(--panel);color:var(--sub);font-family:var(--font-ui);cursor:pointer;letter-spacing:.04em;-webkit-user-select:none;user-select:none;border-radius:8px;flex:1;font-size:.72rem;font-weight:700;transition:all .15s}.tool-btn.active{border-color:var(--teal);background:var(--teal-dim);color:var(--teal)}.tool-btn:active{transform:scale(.96)}.piece-bar{gap:5px;animation:.18s ease-out rowIn}@keyframes rowIn{0%{opacity:0}to{opacity:1}}.piece-btn{height:var(--h-piece);border:1px solid var(--border);background:var(--panel);color:var(--text);cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:8px;flex:1;justify-content:center;align-items:center;font-size:1.5rem;line-height:1;transition:all .15s;display:flex;position:relative}.piece-btn.active{border-color:var(--amber);background:var(--amber-dim);color:var(--amber);box-shadow:0 0 12px var(--amber-soft)}.piece-btn:active{transform:scale(.93)}.colour-toggle{flex-shrink:0;gap:4px;margin-left:4px;display:flex}.colour-btn{width:30px;height:var(--h-piece);border:1px solid var(--border);background:var(--panel);color:var(--sub);cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:8px;justify-content:center;align-items:center;transition:all .15s;display:flex}.colour-btn.active{background:var(--amber-dim);color:var(--amber);border-color:var(--amber-border)}.swatch{border:1.5px solid;border-radius:3px;width:12px;height:12px}.swatch.filled{background:currentColor}.tray-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;align-items:center;gap:6px;padding:5px 6px;display:flex}.tray-rows{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}.tray-row{align-items:center;gap:4px;display:flex}.tray-colour-label{width:10px;color:var(--amber);flex-shrink:0;font-size:.62rem;font-weight:700}.tray-piece-btn{min-width:0;height:var(--h-tray);background:var(--panel);color:var(--text);font-family:var(--font-ui);cursor:pointer;-webkit-user-select:none;user-select:none;border:1px solid #0000;border-radius:6px;flex:1;justify-content:center;align-items:center;gap:3px;font-size:.75rem;font-weight:500;transition:all .15s;display:flex}.tray-piece-btn .tray-sym{font-size:1.05rem;line-height:1}.tray-piece-btn .tray-cnt{color:var(--sub);font-size:.7rem}.tray-piece-btn.has-pieces{background:var(--amber-dim);border-color:var(--amber-border)}.tray-piece-btn.has-pieces .tray-cnt{color:var(--amber)}.tray-piece-btn:active{transform:scale(.94)}.tray-tools{border-left:1px solid var(--border);flex-shrink:0;align-items:center;gap:3px;padding-left:6px;display:flex}.mod-btn{width:30px;height:var(--h-tray);background:var(--panel);color:var(--sub);font-family:var(--font-ui);cursor:pointer;-webkit-user-select:none;user-select:none;border:1px solid #0000;border-radius:6px;font-size:.85rem;font-weight:700;transition:all .15s}.mod-btn.active{background:var(--teal-dim);color:var(--teal);border-color:var(--teal-border)}.mod-btn:active:not(:disabled){transform:scale(.94)}.tray-clear-btn{font-size:.8rem}.tray-clear-btn:disabled{opacity:.35;cursor:not-allowed}.action-row{gap:8px}.btn-solve{height:var(--h-act);border:1px solid var(--teal);background:var(--teal-dim);color:var(--teal);font-family:var(--font-ui);cursor:pointer;letter-spacing:.04em;-webkit-user-select:none;user-select:none;border-radius:10px;flex:1;font-size:.85rem;font-weight:700;transition:all .15s;position:relative;overflow:hidden}.btn-solve:before{content:"";background:linear-gradient(135deg, transparent 40%, var(--teal-soft));position:absolute;inset:0}.btn-solve:active{transform:scale(.97)}.btn-solve.solving{border-color:var(--red-border);background:var(--red-dim);color:var(--red)}.spinner{vertical-align:-1px;border:2px solid;border-top-color:#0000;border-radius:50%;width:12px;height:12px;margin-right:8px;animation:.7s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.btn-clear{height:var(--h-act);border:1px solid var(--border-2);background:var(--panel);color:var(--sub);font-family:var(--font-ui);cursor:pointer;letter-spacing:.04em;-webkit-user-select:none;user-select:none;border-radius:10px;flex-shrink:0;padding:0 18px;font-size:.78rem;font-weight:700;transition:all .15s}.btn-clear:active{transform:scale(.96)}.board-cell.fixed-piece.black .piece-glyph{color:var(--violet);filter:drop-shadow(0 0 6px var(--violet-glow))}.board-cell.fixed-piece.black:after{border-color:var(--violet)}.board-cell.solution-piece.black .piece-glyph{color:var(--violet);filter:drop-shadow(0 0 8px var(--violet-glow))}.board-cell.solution-piece.black:after{background:var(--violet-dim);border-color:var(--violet-line)}.piece-btn.active.black{border-color:var(--violet);background:var(--violet-dim);color:var(--violet);box-shadow:0 0 12px var(--violet-glow)}.colour-btn.active.black{background:var(--violet-dim);color:var(--violet);border-color:var(--violet-border)}.tray-piece-btn.has-pieces.black{background:var(--violet-dim);border-color:var(--violet-border)}.tray-piece-btn.has-pieces.black .tray-cnt,.tray-colour-label.black{color:var(--violet)}.board-cell.preset{position:relative}.board-cell.preset:before{content:"";border:2.5px solid var(--teal);opacity:.75;pointer-events:none;border-radius:50%;width:56%;height:56%;position:absolute}.tool-btn.preset-tool{color:var(--teal)}.tool-btn.preset-tool.active{border-color:var(--teal);background:var(--teal-dim);color:var(--teal)}@media (width>=640px) and (height>=700px){html{font-size:16px}.app{max-width:760px}.app-header h1{font-size:1.7rem}:root{--h-chip:32px;--h-tool:44px;--h-piece:54px;--h-tray:42px;--h-act:54px;--deck-gap:10px}.chip,.mod-btn,.colour-btn{width:38px}.icon-btn{width:40px}.board-area{place-items:center}}@media (width>=1024px) and (height>=700px){html{font-size:17px}.app{max-width:880px}.app-header h1{font-size:1.9rem}:root{--h-chip:34px;--h-tool:48px;--h-piece:60px;--h-tray:46px;--h-act:58px}.chip,.mod-btn,.colour-btn{width:42px}.icon-btn{width:44px}}@media (width>=860px) and (orientation:landscape),(orientation:landscape) and (height<=620px) and (width>=640px){.app{grid-template:"header header""strip strip""stage deck"minmax(0,1fr)/minmax(0,1fr) clamp(290px,30%,400px);column-gap:16px;max-width:1400px;display:grid}.app-header{grid-area:header}.setup-strip{grid-area:strip}.stage{padding:12px 0 12px var(--edge);grid-area:stage}.deck{padding:12px var(--edge) 12px 0;grid-area:deck;justify-content:center}.stage .board-area{place-items:center;height:100%}}@media (orientation:landscape) and (height<=500px){.app-header{--header-pad-top:6px;padding-bottom:5px}.app-header h1{font-size:1.15rem}.setup-strip{padding:6px var(--edge) 5px}.stage{padding:8px var(--edge)}:root{--h-tool:32px;--h-piece:38px;--h-tray:30px;--h-act:38px;--deck-gap:6px}}@media (height<=720px) and (orientation:portrait){.app-header{--header-pad-top:8px;padding-bottom:6px}.setup-strip{padding:6px var(--edge) 5px}.stage{padding:8px var(--edge)}:root{--h-tool:34px;--h-piece:40px;--h-tray:32px;--h-act:42px;--deck-gap:6px}}@media (hover:hover) and (pointer:fine){.theme-toggle:hover{border-color:var(--teal-border);background:var(--teal-dim)}.mode-tab:not(.active):hover,.chip:not(.active):not(:disabled):hover,.tool-btn:not(.active):hover,.mod-btn:not(.active):not(.tray-clear-btn):hover,.colour-btn:not(.active):hover,.icon-btn:not(:disabled):hover{color:var(--text);border-color:var(--border-2);background:var(--panel-2)}.piece-btn:not(.active):hover{border-color:var(--border-2);background:var(--panel-2)}.tray-piece-btn:not(.has-pieces):hover{border-color:var(--border);background:var(--panel-2)}.tray-clear-btn:hover:not(:disabled),.btn-clear:hover{color:var(--red);border-color:var(--red-border);background:var(--red-dim)}.btn-solve:hover{background:var(--teal-glow);box-shadow:0 0 20px var(--teal-glow)}.btn-solve.solving:hover{background:var(--red-dim);box-shadow:none}}button:focus-visible{outline:2px solid var(--teal);outline-offset:2px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-delay:0s!important}}