:root{--bg:#f4f5fc;--panel:#fff;--panel-2:#eef0fa;--ink:#3a4152;--ink-2:#565e70;--ink-3:#414a5c;--muted:#8a92a6;--line:#e5e8f4;--line-strong:#cfd3e0;--accent:#ff86ab;--accent-2:#3fb0dd;--cube-bg:#e7ebf5;--stage-glow:#fff;--topbar-bg:linear-gradient(180deg, #fff, #f7f7fd);--radius:14px;--shadow:0 12px 30px #5c609624}:root[data-theme=dark]{--bg:#0e1116;--panel:#171b22;--panel-2:#1e232c;--ink:#e7eaf1;--ink-2:#b7bfce;--ink-3:#c6cdd9;--muted:#868ea0;--line:#262b36;--line-strong:#39414f;--accent:#ff86ab;--accent-2:#58c5f0;--cube-bg:#0b0e13;--stage-glow:#ffffff0d;--topbar-bg:linear-gradient(180deg, #171b22, #12151b);--shadow:0 14px 34px #00000080}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--ink);-webkit-font-smoothing:antialiased;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}#app{flex-direction:column;min-height:100%;display:flex}.topbar{border-bottom:1px solid var(--line);background:var(--topbar-bg);z-index:10;justify-content:space-between;align-items:center;padding:14px 20px;display:flex;position:sticky;top:0}.brand{align-items:center;gap:12px;display:flex}.mark{border-radius:8px;width:30px;height:30px;transition:transform .25s cubic-bezier(.34,1.56,.64,1);display:block;box-shadow:0 4px 12px #5c609638}.brand:hover .mark{transform:rotate(-8deg)scale(1.06)}.brand-text{letter-spacing:.3px;font-size:18px;font-weight:700}.brand-text em{color:var(--accent);font-style:normal}.crumbs{color:var(--muted);font-size:14px}.layout{flex:1;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:0;height:calc(100vh - 57px);display:grid;overflow:hidden}.stage-col{background:radial-gradient(1200px 500px at 50% -10%, var(--stage-glow) 0%, transparent 55%), var(--cube-bg);flex-direction:column;justify-content:center;align-items:center;height:calc(100vh - 57px);padding:24px;display:flex;position:sticky;top:57px}.stage{touch-action:none;cursor:grab;flex:1;justify-content:center;align-items:center;width:100%;max-width:460px;display:flex;overflow:hidden}.stage:active{cursor:grabbing}.scene{perspective:1100px;justify-content:center;align-items:center;width:300px;height:300px;display:flex}.cube{width:0;height:0;transform-style:preserve-3d;transition:transform 50ms linear;position:relative}.cubie{width:62px;height:62px;transform-style:preserve-3d;transform-origin:50%;position:absolute;top:-31px;left:-31px}.face{width:62px;height:62px;transform-style:preserve-3d;backface-visibility:hidden;background:#262b38;position:absolute}.sticker{backface-visibility:hidden;border-radius:8px;position:absolute;inset:5px;transform:translateZ(2px);box-shadow:inset 0 0 9px #00000029}.face-arrow{width:190px;height:190px;transform-style:preserve-3d;backface-visibility:hidden;pointer-events:none;position:absolute;top:-95px;left:-95px}.face-arrow svg{filter:drop-shadow(0 0 3px #000000d9);width:100%;height:100%}.piece-mark{pointer-events:none;filter:drop-shadow(0 3px 5px #0000008c);width:32px;height:40px;animation:1.15s ease-in-out infinite mark-bob;position:absolute;top:-20px;left:-16px}.piece-mark svg{width:100%;height:100%;display:block}@keyframes mark-bob{0%,to{margin-top:0}50%{margin-top:-6px}}@media (prefers-reduced-motion:reduce){.piece-mark{animation:none}}.scene.is-playing .cubie:not(.is-turning) .sticker{box-shadow:inset 0 0 0 200px #262b389e}.cubie.is-turning .sticker{box-shadow:inset 0 0 0 3px #fffffff2,0 0 20px 3px #ff69a0cc}.scene.has-highlight .cubie.is-muted .sticker{filter:brightness(.82)saturate(1.05)}.scene.has-highlight .cubie.is-key .sticker{filter:saturate(1.12)brightness(1.03);box-shadow:inset 0 0 0 2px #ffffffe6,inset 0 0 10px #0000001f,0 0 14px 1px #ff69a080}.hint{color:var(--muted);text-align:center;min-height:1.2em;margin:14px 0 0;font-size:14px}.steps-col{border-left:1px solid var(--line);background:var(--bg);min-height:0;padding:28px 26px 60px;overflow-y:auto}.method-head h1{margin:0 0 6px;font-size:26px}.method-head p{color:var(--muted);margin:0 0 22px}.steps{gap:12px;margin:0;padding:0;list-style:none;display:grid}.step{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);transition:min-height .28s cubic-bezier(.33,0,.2,1);position:relative;overflow:hidden}.step.is-active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.step-head{width:100%;color:var(--ink);cursor:pointer;text-align:left;background:0 0;border:0;align-items:center;gap:14px;padding:16px 18px;display:flex}.step-num{background:var(--panel-2);width:30px;height:30px;color:var(--accent);border:1px solid var(--line);border-radius:50%;flex:none;place-items:center;font-size:15px;font-weight:700;display:grid}.step.is-active .step-num{background:var(--accent);color:#6e2740;border-color:#0000}.step-title{font-size:17px;font-weight:650}.step-body{padding:0 18px 18px 62px;display:none}.step.is-active .step-body{display:block}.step-body p{color:var(--ink-2);margin:0 0 10px;font-size:15px;line-height:1.55}.step-body .goal{color:var(--ink)}.tech-link{appearance:none;cursor:pointer;color:var(--accent-2);background:0 0;border:0;margin-top:12px;padding:0;font-family:inherit;font-size:14px;font-weight:600;display:inline-block}.tech-link:hover{text-decoration:underline}.step-tech{z-index:3;background:var(--panel);visibility:hidden;flex-direction:column;transition:transform .28s cubic-bezier(.33,0,.2,1),visibility 0s linear .28s;display:flex;position:absolute;inset:0;transform:translate(100%)}.step-tech.is-open{visibility:visible;transition:transform .28s cubic-bezier(.33,0,.2,1);transform:translate(0)}.step-tech-body{flex-direction:column;flex:1;padding:16px 18px;display:flex;overflow:visible}.step-tech-title{margin:0 0 12px;font-size:17px}.tech-back{appearance:none;cursor:pointer;color:var(--accent-2);background:0 0;border:0;align-self:flex-start;margin-top:auto;padding-top:18px;font-family:inherit;font-size:14px;font-weight:600}.tech-back:hover{text-decoration:underline}.step-tech-body>p{color:var(--ink-2);margin:0 0 12px;font-size:15px;line-height:1.6}.notation-hint{color:var(--accent-2);cursor:help;outline:none;align-self:flex-start;align-items:center;margin-top:14px;font-size:14px;font-weight:600;display:inline-flex;position:relative}.notation-hint-label{border-bottom:1px dotted;padding-bottom:1px}.notation-hint:focus-visible .notation-hint-label{outline:2px solid var(--accent-2);outline-offset:3px}.notation-pop{opacity:0;visibility:hidden;z-index:6;filter:drop-shadow(0 14px 26px #00000080);width:min(320px,80vw);max-height:260px;transition:opacity .16s,transform .16s,visibility 0s linear .16s;position:absolute;bottom:calc(100% + 10px);left:0;overflow-y:auto;transform:translateY(6px)}.notation-hint:hover .notation-pop,.notation-hint:focus .notation-pop,.notation-hint:focus-within .notation-pop{opacity:1;visibility:visible;transition:opacity .16s,transform .16s;transform:translateY(0)}.notation-pop .notation-key{margin:0}.notation-key{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);margin-bottom:18px;padding:16px 18px}.notation-key h3{margin:0 0 10px;font-size:16px}.notation-key p{color:var(--ink-2);margin:0 0 10px;font-size:15px;line-height:1.55}.notation-key p:last-child{margin-bottom:0}.notation-key code{color:var(--accent-2);background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px}.face-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 16px;margin:0 0 12px;padding:0;list-style:none;display:grid}.face-list li{color:var(--ink-2);font-size:15px}.face-list b{width:1.5em;color:var(--accent-2);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;display:inline-block}.tech-moves{gap:10px;margin-top:14px;display:grid}.tech-move{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;flex-direction:column;gap:6px;padding:12px 14px;display:flex}.move-label{color:var(--muted);font-size:13px}.move-plain{color:var(--ink);margin:0;font-size:15px;line-height:1.5}.tech-move code{color:var(--accent-2);letter-spacing:1px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px}.topbar-right{align-items:center;gap:14px;display:flex}.toolbar{align-items:center;gap:8px;display:flex}.tool-btn{appearance:none;cursor:pointer;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);letter-spacing:.4px;border-radius:9px;justify-content:center;align-items:center;min-width:36px;height:34px;padding:0 10px;font-family:inherit;font-size:13px;font-weight:700;transition:border-color .15s,background .15s,color .15s;display:inline-flex}.tool-btn:hover{border-color:var(--line-strong)}.tool-btn.tool-icon{letter-spacing:0;font-size:16px;font-weight:400}.mainnav{gap:8px;display:flex}.navlink{appearance:none;cursor:pointer;color:var(--muted);background:0 0;border:1px solid #0000;border-radius:9px;padding:8px 14px;font-family:inherit;font-size:14px;font-weight:600;transition:color .15s,background .15s,border-color .15s}.navlink:hover{color:var(--ink)}.navlink.is-active{color:var(--ink);background:var(--panel-2);border-color:var(--line)}.page.is-hidden{display:none}.training{max-width:1000px;height:calc(100vh - 57px);margin:0 auto;padding:28px 26px 60px;overflow-y:auto}.training-head h1{margin:0 0 6px;font-size:26px}.training-head p{color:var(--muted);max-width:72ch;margin:0 0 24px;line-height:1.55}.swatch-from,.swatch-to{font-weight:700}.swatch-from{color:#35c2f0}.swatch-to{color:#57d98a}.trainer{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);margin-bottom:18px;padding:20px 22px}.trainer h2{margin:0 0 8px;font-size:20px}.trainer>p{color:var(--ink-2);margin:0 0 8px;font-size:15px;line-height:1.55}.trainer-why{border-left:3px solid var(--accent);color:var(--ink-3);background:#ff86ab1a;border-radius:0 8px 8px 0;margin:0 0 12px;padding:12px 14px;font-size:15px;line-height:1.6}.trainer-note{color:var(--muted);font-style:italic}.four-moves{margin:18px 0 4px}.four-moves h3{margin:0 0 6px;font-size:16px}.four-moves-intro{color:var(--ink-2);margin:0 0 14px;font-size:15px;line-height:1.55}.filmstrip{flex-wrap:wrap;align-items:flex-start;gap:10px 6px;display:flex}.film-cell{flex-direction:column;align-items:center;gap:6px;display:flex}.film-cube{background:radial-gradient(240px 140px at 50% 0%, var(--stage-glow) 0%, transparent 70%), var(--cube-bg);border:1px solid var(--line);border-radius:10px;justify-content:center;align-items:center;width:118px;height:118px;display:flex;overflow:hidden}.film-label{color:var(--accent-2);align-items:baseline;gap:2px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;display:inline-flex}.film-label .film-mod{color:var(--muted)}.film-label .film-dir{color:#ff2ea6;margin-left:5px;font-family:initial}.film-label .film-start{color:var(--muted);font-family:inherit;font-size:13px}.techpage{max-width:1000px;height:calc(100vh - 57px);margin:0 auto;padding:28px 26px 60px;overflow-y:auto}.lesson{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);margin-bottom:14px;overflow:hidden}.lesson.is-open{box-shadow:var(--shadow)}.lesson-head{width:100%;color:var(--ink);cursor:pointer;text-align:left;background:0 0;border:0;align-items:center;gap:16px;padding:18px 22px;font-family:inherit;display:flex}.lesson-headings{flex-direction:column;flex:1;gap:3px;min-width:0;display:flex}.lesson-title{font-size:19px;font-weight:700}.lesson-goal-text{color:var(--ink-3);margin:0;font-size:14.5px;line-height:1.5}.lesson-chevron{color:var(--muted);flex:none;font-size:22px;line-height:1;transition:transform .25s cubic-bezier(.33,0,.2,1);transform:rotate(0)}.lesson.is-open .lesson-chevron{color:var(--accent);transform:rotate(90deg)}.lesson-content{padding:0 22px 26px;display:none}.lesson.is-open .lesson-content{display:block}.lesson-purpose{border-left:3px solid var(--accent);color:var(--ink-3);background:#ff86ab1a;border-radius:0 10px 10px 0;margin:16px 0 4px;padding:13px 16px;font-size:15.5px;line-height:1.6}.lesson-purpose strong{color:var(--ink);font-weight:700}.purpose-label{letter-spacing:.7px;text-transform:uppercase;color:var(--accent);vertical-align:1px;margin-right:8px;font-size:11px;font-weight:800;display:inline-block}.lesson-steps{counter-reset:step;margin:8px 0 4px;padding-left:0;list-style:none}.lesson-steps li{color:var(--ink-2);counter-increment:step;margin:0 0 12px;padding-left:40px;font-size:15.5px;line-height:1.55;position:relative}.lesson-steps li:before{content:counter(step);background:var(--panel-2);border:1px solid var(--line);width:26px;height:26px;color:var(--accent);border-radius:50%;justify-content:center;align-items:center;font-size:14px;font-weight:700;display:flex;position:absolute;top:-1px;left:0}.lesson-steps li strong{color:var(--ink)}.practice-callout{border:1px solid var(--accent);background:#ff86ab1f;border-radius:12px;align-items:flex-start;gap:13px;margin-top:26px;padding:15px 17px;display:flex}.practice-icon{flex:none;font-size:22px;line-height:1.4}.practice-callout p{color:var(--ink-3);margin:0;font-size:15.5px;line-height:1.6}.practice-callout strong{color:var(--accent)}.lesson-h{color:var(--ink);align-items:center;gap:10px;margin:26px 0 12px;font-size:15px;font-weight:700;display:flex}.lesson-h code{color:var(--accent-2);background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:2px 8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;font-weight:600}.goalrow{flex-wrap:wrap;align-items:center;gap:18px;margin-top:16px;display:flex}.goalfig{flex-direction:column;align-items:center;gap:8px;margin:0;display:flex}.goal-cube{background:radial-gradient(300px 180px at 50% 0%, var(--stage-glow) 0%, transparent 70%), var(--cube-bg);border:1px solid var(--line);touch-action:none;cursor:grab;border-radius:12px;justify-content:center;align-items:center;width:168px;height:168px;display:flex;overflow:hidden}.goal-cube:active{cursor:grabbing}.goalfig figcaption{color:var(--muted);text-align:center;font-size:13px}.goal-cap{color:var(--ink);margin-right:5px;font-weight:700}.goal-arrow{color:var(--accent);flex:none;font-size:30px}.movecells{flex-wrap:wrap;gap:12px 14px;display:flex}.movecell{flex-direction:column;align-items:center;gap:6px;display:flex}.movecell-cube{background:radial-gradient(240px 140px at 50% 0%, var(--stage-glow) 0%, transparent 70%), var(--cube-bg);border:1px solid var(--line);touch-action:none;cursor:grab;border-radius:10px;justify-content:center;align-items:center;width:118px;height:118px;display:flex;overflow:hidden}.movecell-cube:active{cursor:grabbing}.stepplayer{flex-wrap:wrap;align-items:center;gap:24px;margin-top:4px;display:flex}.stepplayer-cube{background:radial-gradient(420px 240px at 50% 0%, var(--stage-glow) 0%, transparent 70%), var(--cube-bg);border:1px solid var(--line);touch-action:none;cursor:grab;border-radius:12px;flex:none;justify-content:center;align-items:center;width:220px;height:220px;display:flex;overflow:hidden}.stepplayer-cube:active{cursor:grabbing}.stepplayer-controls{flex-direction:column;align-items:flex-start;gap:12px;display:flex}.stepplayer-alg{margin:0}.stepplayer-alg code{color:var(--accent-2);background:var(--panel-2);border:1px solid var(--line);border-radius:7px;padding:4px 10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:16px;font-weight:600}.stepplayer-buttons{gap:10px;display:flex}.stepplayer-hint{color:var(--muted);max-width:30ch;margin:0;font-size:13px;line-height:1.5}.trainer-main{align-items:flex-start;gap:22px;margin-top:14px;display:flex}.trainer-cube{background:radial-gradient(420px 240px at 50% 0%, var(--stage-glow) 0%, transparent 70%), var(--cube-bg);border:1px solid var(--line);touch-action:none;cursor:grab;border-radius:12px;flex:none;justify-content:center;align-items:center;width:220px;height:220px;display:flex;overflow:hidden}.trainer-cube:active{cursor:grabbing}.trainer-side{flex:1;min-width:0}.trainer-alg+.trainer-alg{border-top:1px solid var(--line);margin-top:18px;padding-top:18px}.move-strip{flex-wrap:wrap;gap:8px;margin:8px 0 10px;display:flex}.move-chip{appearance:none;cursor:pointer;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);border-radius:9px;align-items:center;gap:5px;padding:7px 11px;font-family:inherit;font-size:15px;transition:border-color .15s,background .15s,transform 80ms;display:inline-flex}.move-chip b{color:var(--accent-2);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.move-chip .chip-arrow{color:var(--muted);font-size:13px}.move-chip:hover{border-color:var(--line-strong)}.move-chip:active{transform:translateY(1px)}.move-chip.is-active{border-color:var(--accent);background:#ff86ab29}.move-chip.is-active .chip-arrow{color:var(--accent)}.trainer-controls{gap:10px;margin-top:12px;display:flex}.mini-btn{appearance:none;cursor:pointer;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);border-radius:9px;padding:8px 14px;font-family:inherit;font-size:14px;font-weight:600;transition:border-color .15s,background .15s}.mini-btn:hover{border-color:var(--line-strong)}.mini-btn.primary{color:#6e2740;background:linear-gradient(#ffb0c9,#ff86ab);border-color:#0000}.mini-btn:disabled{opacity:.5;cursor:default}.mini-btn:disabled:hover{border-color:#0000}.trainer-legend{margin-top:26px}.trainer-legend h3{margin:0 0 10px;font-size:16px}.cheatpage{max-width:820px;height:calc(100vh - 57px);margin:0 auto;padding:28px 26px 60px;overflow-y:auto}.cheat-table-wrap{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow);margin-bottom:26px;overflow-x:auto}.cheat-table{border-collapse:collapse;width:100%;font-size:15px}.cheat-table th,.cheat-table td{text-align:left;border-bottom:1px solid var(--line);padding:13px 16px}.cheat-table tbody tr:last-child td{border-bottom:0}.cheat-table thead th{background:var(--panel-2);color:var(--muted);letter-spacing:.6px;text-transform:uppercase;z-index:1;font-size:12px;font-weight:700;position:sticky;top:0}.cheat-table tbody tr:hover td{background:var(--panel-2)}.cheat-num{white-space:nowrap;width:1%;color:var(--accent);font-weight:700}.cheat-lesson{color:var(--ink);font-weight:600}.cheat-alg{white-space:nowrap}.cheat-alg code{letter-spacing:1px;color:var(--accent-2);background:var(--panel-2);border:1px solid var(--line);border-radius:7px;padding:3px 9px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14.5px;font-weight:600}@media (width<=860px){.topbar{gap:10px;padding:12px 14px}.topbar-right{gap:8px}.navlink{padding:8px 10px}.layout{grid-template-columns:1fr;height:auto;overflow:visible}.training,.techpage,.cheatpage{height:auto;padding:20px 16px 80px;overflow:visible}.goalrow{gap:12px}.goal-cube{width:44vw;max-width:200px;height:44vw;max-height:200px}.stepplayer-cube{width:100%;height:240px}.trainer-main{flex-direction:column}.trainer-cube{width:100%;height:240px}.stage-col{border-bottom:1px solid var(--line);z-index:5;height:44vh;min-height:300px;padding:12px;position:sticky;top:57px}.stage{max-width:none}.steps-col{border-left:0;padding:20px 16px 80px;overflow:visible}.method-head h1{font-size:22px}.step-body{padding-left:18px}}