body,html,#root{background:#101419;width:100%;height:100%;margin:0;padding:0;overflow-x:clip}#root{height:auto;min-height:100%}:root{color:#edf1f5;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-synthesis:none;background:#101419;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:#eaf0f5;cursor:pointer;touch-action:manipulation;background:#222a34;border:1px solid #39434f;border-radius:10px;min-height:46px;padding:11px 15px;font-size:.9rem;font-weight:600;transition:background .15s}button:hover:not(:disabled){background:#343e4b}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible{outline-offset:3px;outline:3px solid #ffd166}button.primary{color:#1a1c20;background:#f5ce78;border-color:#f5ce78}button.primary:hover:not(:disabled){background:#ffdda1}.app-shell{max-width:1600px;min-height:100dvh;margin:auto}.app-header{border-bottom:1px solid #28303a;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding:24px 32px;display:grid}.brand{color:inherit;letter-spacing:-.06em;align-items:center;gap:12px;font-size:1.5rem;font-weight:750;text-decoration:none;display:flex}.brand img{width:42px;height:42px}.brand small{color:#a6b1be;letter-spacing:0;margin-top:2px;font-size:.7rem;font-weight:400;display:block}nav{background:#191f27;border:1px solid #2c3541;border-radius:13px;gap:5px;padding:4px;display:flex}nav button{white-space:nowrap;background:0 0;border:0}nav button[aria-current=page]{background:#35404d}.offline-app{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:2px 12px;font-size:.72rem;display:flex;position:relative}.offline-status{color:#9aabb9;align-items:center;gap:6px;display:flex}.offline-status i{background:#79818c;border-radius:50%;width:6px;height:6px}.offline-status.ready i{background:#87d6a6}.text-button{color:#f5ce78;background:0 0;border:0;min-height:44px;padding:8px 0;font-weight:500}.install-help{z-index:20;background:#242e39;border:1px solid #566174;border-radius:12px;width:min(360px,100vw - 32px);margin-top:8px;padding:20px;font-size:.85rem;position:absolute;top:100%;right:0;box-shadow:0 16px 60px #0008}.workspace{grid-template-columns:minmax(320px,420px) minmax(0,1fr);align-items:start;gap:28px;min-height:calc(100dvh - 165px);padding:32px;display:grid}.control-panel{background:#191f27;border:1px solid #303944;border-radius:20px;min-width:0;padding:28px}.eyebrow{letter-spacing:.14em;color:#f5ce78;font-size:.68rem;font-weight:650}h1{letter-spacing:-.04em;margin:10px 0 14px;font-size:clamp(1.6rem,2.8vw,2.1rem);font-weight:650;line-height:1.15}h2{letter-spacing:-.02em;margin:14px 0 8px;font-size:1.2rem;font-weight:600;line-height:1.35}p{color:#aebbc9;margin:8px 0 20px;font-size:.9rem;line-height:1.65}.muted{color:#9daab8;font-size:.8rem}.actions{flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;display:flex}.actions>button{white-space:nowrap;flex:1}.full-width{width:100%;margin-top:12px}.manual-controls{gap:9px;margin:24px 0;display:grid}.face-control{grid-template-columns:22px 1fr 48px 48px;align-items:center;gap:10px;font-size:.9rem;display:grid}.face-control i,.palette i,.face-steps i,.neighbor i,.orientation-key i{border:1px solid #ffffff30;border-radius:4px;flex-shrink:0;width:18px;height:18px;display:block}.face-control button{padding:4px;font-size:1.4rem}.play-status{color:#a5d5b8;font-size:.8rem}.cube-stage{background:radial-gradient(#263442 0,#121b24 66%,#10161d 100%);border:1px solid #2b343e;border-radius:24px;height:min(690px,100dvh - 185px);min-height:360px;position:sticky;top:24px;overflow:hidden}.cube-stage canvas{touch-action:none}.stage-caption{z-index:2;color:#aebbc9;pointer-events:none;justify-content:space-between;align-items:center;gap:8px;font-size:.8rem;display:flex;position:absolute;top:20px;left:24px;right:24px}.stage-caption button{pointer-events:auto;background:#1a222bc9;min-height:38px;padding:7px 10px;font-size:.72rem}.orientation-key{color:#aebbc9;pointer-events:none;gap:20px;font-size:.75rem;display:flex;position:absolute;bottom:22px;left:24px}.orientation-key span{align-items:center;gap:8px;display:flex}.orientation-key i{border-radius:3px;width:12px;height:12px}.view-input{max-width:780px;margin:0 auto;display:block}.view-input .control-panel{padding:32px}.editor{border:0;min-width:0;margin:28px 0 0;padding:0}.section-heading{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.face-steps{grid-template-columns:repeat(6,1fr);gap:5px;display:grid}.face-steps button{background:#202833;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:9px 2px;font-size:.72rem;display:flex}.face-steps button[aria-current=step]{background:#313331;border-color:#f5ce78}.face-steps small{color:#a7b6c6;font-size:.65rem}.oriented-face{grid-template-rows:34px auto 34px;grid-template-columns:65px minmax(160px,280px) 65px;justify-content:center;gap:7px;margin:20px 0;display:grid}.oriented-face .face-grid{grid-area:2/2}.neighbor{color:#aebbc9;justify-content:center;align-items:center;gap:5px;font-size:.72rem;display:flex}.neighbor.top{grid-area:1/2}.neighbor.bottom{grid-area:3/2}.neighbor.left{flex-direction:column;grid-area:2/1}.neighbor.right{flex-direction:column;grid-area:2/3}.neighbor i{width:13px;height:13px}.face-grid{aspect-ratio:1;background:#0c1015;border-radius:13px;grid-template-rows:repeat(3,minmax(0,1fr));grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;min-width:0;padding:6px;display:grid}.sticker{aspect-ratio:1;color:#eff3f8;border:2px solid #0004;border-radius:7px;min-height:0;padding:0}.sticker:hover:not(:disabled){filter:brightness(1.13)}.sticker.empty{color:#788a9e;background:repeating-linear-gradient(135deg,#242e3a,#242e3a 7px,#2b3541 7px 14px);font-size:1.5rem}.sticker.fixed{opacity:1;border:3px solid #fffa}.center-label{color:#fff;background:#07101899;border-radius:4px;padding:3px 5px;font-size:.7rem}.palette-label{color:#d0d9e3;margin-bottom:10px;font-size:.8rem}.orientation-reminder{color:#9cacbe;border-left:2px solid #576779;padding-left:10px;font-size:.75rem}.palette{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.palette button{text-align:left;grid-template-columns:22px minmax(0,1fr);grid-template-areas:"swatch name""swatch count";align-items:center;gap:3px 9px;min-width:0;padding:10px;font-size:.8rem;display:grid}.palette button>span{overflow-wrap:anywhere;grid-area:name}.palette button.selected{background:#34372f;border-color:#f5ce78;outline:1px solid #f5ce78}.palette i{grid-area:swatch;width:21px;height:21px}.palette small{color:#a7b5c6;text-align:left;grid-area:count;font-size:.72rem}.palette .over-count{color:#ff9898}.cube-net{grid-template-rows:repeat(3,auto);grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin-top:16px;display:grid}.cube-net .face-grid{border-radius:5px;gap:3px;padding:3px}.cube-net .sticker{border-radius:3px}.cube-net .center-label{padding:2px;font-size:.55rem}.entry-error{color:#ffbcbc;background:#43292b;border:1px solid #b16b6b;border-radius:10px;margin-top:16px;padding:14px;font-size:.85rem;line-height:1.7}.input-actions{border-top:1px solid #323c49;padding-top:18px}.privacy-note{color:#899bac;margin:18px 0 0;font-size:.72rem}.move-card{background:#282b27;border:1px solid #615d46;border-radius:14px;padding:20px}.move-card p{margin-bottom:0;font-size:.82rem}.move-symbol{align-items:center;gap:14px;display:flex}.move-symbol i{border:1px solid #ffffff50;border-radius:7px;width:28px;height:28px;display:block}.move-symbol span{color:#f5ce78;font-size:2.2rem}.move-symbol small{color:#aebbc9;margin-left:auto;font-size:1rem}.success-check{color:#9adcac;font-size:2rem;display:inline-block}progress{appearance:none;background:#303d49;border:0;border-radius:20px;width:100%;height:5px;margin-top:22px;overflow:hidden}progress::-webkit-progress-bar{background:#303d49}progress::-webkit-progress-value{background:#f5ce78}progress::-moz-progress-bar{background:#f5ce78}.move-details{color:#aebbc9;margin-top:24px;font-size:.8rem}.move-details summary{cursor:pointer;min-height:44px;padding-top:12px}.move-list{flex-wrap:wrap;gap:6px;margin:8px 0 0;padding:0;list-style:none;display:flex}.move-list li{background:#27313d;border-radius:6px;padding:7px 10px}.move-list .done{background:#304c3e}.move-list .current{color:#161b20;background:#f5ce78}footer{color:#7f90a1;padding:12px 32px 24px;font-size:.7rem}.lesson-label{color:#b6c4d3;margin-bottom:8px;font-size:.8rem;display:block}#lesson-select{color:#edf1f5;width:100%;min-height:46px;font:inherit;background:#222a34;border:1px solid #566174;border-radius:10px;padding:10px;font-size:.9rem}#lesson-select:focus-visible{outline-offset:3px;outline:3px solid #ffd166}.learning-modes{gap:8px;margin:16px 0 24px;display:flex}.learning-modes button{flex:1}.learning-modes button[aria-pressed=true]{background:#373b32;border-color:#f5ce78}.learning-sequence{margin:16px 0}.learning-feedback{min-height:44px;margin-top:12px;line-height:1.6}.practice-turns{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px;display:grid}.practice-turns>div{gap:4px;display:flex}.practice-turns button{flex:1;padding:8px 3px;font-size:.8rem}.lesson-source{color:#f5ce78;margin-top:12px;font-size:.75rem;line-height:1.6;display:inline-block}h3{margin:18px 0 8px;font-size:.92rem;line-height:1.5}.case-guide{background:#202a34;border:1px solid #394653;border-radius:12px;margin:16px 0;padding:14px}.case-guide h3{margin-top:0}.case-guide ul{color:#b6c4d3;margin-bottom:0;padding-left:18px;font-size:.8rem;line-height:1.7}.case-guide li+li{margin-top:7px}.pattern-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:16px;display:grid}.pattern-grid figure{margin:0}.pattern-grid svg{width:100%}.pattern-grid figcaption{text-align:center;color:#bdc9d5;font-size:.7rem}.method-choice{border:1px solid #465361;border-radius:12px;margin:20px 0;padding:14px;font-size:.85rem}.method-choice legend{color:#f5ce78;padding:0 6px}.method-choice label{align-items:center;gap:10px;min-height:44px;line-height:1.5;display:flex}.method-choice input{accent-color:#f5ce78}.phase-list{color:#95a5b6;padding:0;font-size:.78rem;line-height:1.7;list-style:none}.phase-list li{border-left:2px solid #394653;padding:4px 8px}.phase-list .done{color:#98c9a9;border-color:#98c9a9}.phase-list .current{color:#f5ce78;background:#292c25;border-color:#f5ce78}.method-case{background:#222c35;border-left:2px solid #f5ce78;margin:16px 0;padding:10px 14px;font-size:.85rem}.method-case p{margin:8px 0 0;font-size:.8rem}@media (width<=1050px){.app-header{grid-template-columns:1fr auto;gap:16px}.offline-app{grid-column:1/-1;justify-content:flex-start}.install-help{left:0;right:auto}.workspace{grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:20px;padding:24px}.control-panel{padding:22px}}@media (width<=700px){.app-header{padding:max(16px, env(safe-area-inset-top)) 16px 12px;flex-wrap:wrap;gap:12px;display:flex}.brand{font-size:1.35rem}.brand img{width:34px;height:34px}.brand small{display:none}nav{order:3;width:100%}nav button{flex:1;padding:9px 5px;font-size:.8rem}.offline-app{flex-direction:column;align-items:flex-end;gap:0;margin-left:auto;font-size:.65rem}.offline-app .text-button{min-height:28px;padding:4px 0;font-size:.7rem}.install-help{left:auto;right:0}.workspace{flex-direction:column;gap:16px;min-height:0;padding:16px;display:flex}.control-panel{border-radius:16px;width:100%;padding:22px 18px}.cube-stage{border-radius:16px;order:-1;width:100%;height:280px;min-height:0;position:relative;top:auto}.view-solve .cube-stage,.view-learn .cube-stage{z-index:3;flex-shrink:0;height:240px;position:sticky;top:8px}.stage-caption{font-size:.7rem;top:12px;left:14px;right:14px}.stage-caption button{min-height:30px;padding:5px 7px;font-size:.65rem}.orientation-key{font-size:.65rem;bottom:12px;left:16px}.view-input{display:block}.view-input .control-panel{padding:22px 16px}.oriented-face{grid-template-columns:42px minmax(0,260px) 42px;gap:4px;margin:12px 0}.neighbor{font-size:.65rem}.face-steps{gap:4px}.face-steps button{border-radius:7px;padding:9px 1px;font-size:.63rem}.palette button{grid-template-columns:18px minmax(0,1fr);gap:3px 7px;padding:9px 7px;font-size:.74rem}.palette i{width:18px;height:18px}.guide-actions button{padding:10px 8px;font-size:.77rem}.center-label{font-size:.6rem}footer{padding:8px 16px max(20px, env(safe-area-inset-bottom))}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}.course-note{color:#b6c4d3;border-left:3px solid #6c775e;padding-left:12px;font-size:.8rem;line-height:1.65}.lesson-step h3{color:#f5ce78;font-size:1rem}.lesson-step p,.lesson-step details{font-size:.83rem;line-height:1.65}.lesson-step details summary{cursor:pointer}.cross-goal{background:#202a34;border-radius:12px;align-items:center;gap:18px;margin:20px 0;padding:14px;display:flex}.cross-goal svg{width:90px;min-width:90px}.cross-goal figcaption{color:#c4d0db;font-size:.8rem;line-height:1.6}.algorithm-blocks{gap:10px;padding:0;list-style:none;display:grid}.algorithm-blocks li{border:1px solid #415060;border-radius:9px;gap:6px;padding:12px;display:grid}.algorithm-blocks li span{color:#b6c4d3;font-size:.78rem}.algorithm-blocks li strong{word-spacing:6px;font-size:1rem;line-height:1.8}.algorithm-blocks li small{color:#b6c4d3;font-size:.7rem}.algorithm-blocks li.current{background:#343b35;border-color:#f5ce78}.algorithm-blocks li.done{border-color:#47745e}.algorithm-blocks li.done small{color:#a4dbba}.checkpoint{background:#393b30;border:1px solid #f5ce78;border-radius:10px;margin:14px 0;padding:14px}.checkpoint button{white-space:normal;width:100%}.result-patterns{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid}.result-patterns figure{margin:0}.result-patterns svg{width:100%}.result-patterns figcaption{color:#b6c4d3;text-align:center;font-size:.68rem;line-height:1.4}.result-check li strong{font-size:.7rem;display:block}.result-check.achieved{border-color:#76b48f}.lesson-step button.full-width{white-space:normal;line-height:1.5}.basics-toggle{white-space:normal;text-align:left;width:100%;margin:6px 0 18px;line-height:1.5}.cube-basics{background:#1b2a36;border:1px solid #5e7890;border-radius:14px;margin-bottom:24px;padding:16px}.cube-basics p,.case-guide p{line-height:1.65}.cube-picture{width:100%;height:auto;display:block;overflow:visible}.cube-face-label{fill:#e3edf6;paint-order:stroke;stroke:#18232e;stroke-width:3px;stroke-linejoin:round;font-size:10px;font-weight:700}.piece-basics{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.piece-basics figure,.case-comparison figure{min-width:0;margin:0}.piece-basics figcaption{font-size:.76rem;line-height:1.5}.basics-moves,.case-comparison{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0;display:grid}.case-comparison figcaption{text-align:center;color:#d2dce6;font-size:.78rem;line-height:1.5}.picture-sequence{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0;padding:0;list-style:none;display:grid}.picture-sequence li{min-width:0;position:relative}.move-diagram{color:#e9f2fa;text-align:left;white-space:normal;background:#1b2530;border:1px solid #4a5b6d;border-radius:10px;flex-direction:column;align-items:stretch;gap:7px;min-width:0;margin:0;padding:9px;display:flex}.move-diagram.current{background:#203543;border:2px solid #46c9ff;padding:8px}.move-diagram.done{border-color:#76b48f}.move-diagram .diagram-word{font-size:.8rem;font-weight:650;line-height:1.45}.move-diagram small{color:#ccd7e0;font-size:.65rem;line-height:1.4}.move-diagram .notation-secondary{color:#b5c2ce}.picture-done{color:#a4dbba;padding:4px;font-size:.7rem;display:block}.next-move{border-top:1px solid #5a6872;padding-top:16px;line-height:1.5}.next-move button{white-space:normal;width:100%;margin-top:12px}.picture-choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.picture-choices .cube-picture{max-height:150px}.all-algorithms,.practice-choices{margin:18px 0}.case-guide summary{cursor:pointer;margin:12px 0;line-height:1.6}@media (width<=400px){.piece-basics{grid-template-columns:1fr}.piece-basics figure{grid-template-columns:100px 1fr;align-items:center;display:grid}.move-card{padding:12px}.picture-sequence{gap:8px}.move-diagram{padding:6px}.move-diagram.current{padding:5px}}@media (width<=440px){.palette{grid-template-columns:repeat(2,minmax(0,1fr))}.guide-actions{align-items:stretch}.guide-actions>button{white-space:normal;min-width:0;line-height:1.4}.cube-net .center-label{display:none}}