@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap";:root{--bg: #fdfbf7;--ink: #1f1e1c;--muted: #646059;--accent: #2f6f58;--accent-strong: #1e4a3b;--error: #dc2626;--card-bg: #ffffff;--xxs: .125rem;--xs: .25rem;--s: .5rem;--m: .75rem;--l: 1.25rem;--xl: 2rem;--xxl: 3rem;--control-w: 104px;--control-h: 40px;--swatch: 40px;--sticker: 25px;--full: 100%;--screen-h: 100vh;--layout-max: 1100px;--shift-up: -2px;--alpha-shift: -7px;--net-gap: 2px;--outline-offset: 1px;--panel-min-h: 220px;--algo-min-h: 48px;--hint-min-h: 1.2rem;--cube-3d-size: clamp(180px, 28vw, 240px);--cube-3d-preview-size: clamp(100px, 16vw, 128px);--r-s: 6px;--r-m: 12px;--r-l: 16px;--r-round: 50%;--r-pill: 999px;--b1: 1px;--b2: 2px;--b3: 3px;--text-xs: .76rem;--text-s: .85rem;--text-m: .95rem;--text-l: 1.1rem;--text-xl: clamp(1.7rem, 3.8vw, 2.4rem);--lh-tight: 1.1;--lh-1: 1;--lh-relaxed: 1.6;--fast: .15s;--bp: 980px;--grad-start: 0%;--grad-end: 100%;--grad-s: 28%;--grad-m: 32%}*{box-sizing:border-box}body{margin:0;font-family:Space Grotesk,sans-serif;color:var(--ink);background:radial-gradient(circle at var(--grad-start) var(--grad-start),rgba(47,111,88,.08),transparent var(--grad-m)),radial-gradient(circle at var(--grad-end) var(--grad-end),rgba(239,138,59,.08),transparent var(--grad-s)),var(--bg);min-height:var(--screen-h)}.layout{width:min(var(--layout-max),calc(var(--full) - var(--xl)));margin:0 auto;padding:var(--s) 0 var(--m);display:grid;align-content:start;gap:var(--s);min-height:100vh;box-sizing:border-box}.hero{padding:var(--m) 0 var(--s) 0;display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:var(--m)}.hero-left{display:flex;flex-direction:column;gap:var(--xs)}.alpha-tag{display:inline-flex;align-items:center;padding:var(--xs) var(--s);border:var(--b1) solid #cdbfa8;border-radius:var(--r-pill);font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:#ffffff80;line-height:var(--lh-1);transform:translateY(var(--alpha-shift))}.header-links{font-size:var(--text-s);color:var(--muted);display:flex;gap:var(--s);align-items:center}.header-links a{color:inherit;text-decoration:none;transition:color .4s ease}.header-links a:hover{color:var(--ink);text-decoration:underline}@keyframes spin{to{transform:rotate(360deg)}}.spinner{animation:spin .8s linear infinite;display:block}.section-block{padding-top:var(--l);padding-bottom:var(--l);padding-left:0;padding-right:0;border-top:none}.wizard-step{display:none!important}.wizard-step.active{display:flex!important;flex-direction:column;animation:fadeSlideUp .4s cubic-bezier(.16,1,.3,1) forwards}@keyframes fadeSlideUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.card{background:var(--card-bg);border-radius:var(--r-l);padding:var(--l);box-shadow:0 4px 20px #0000000a,0 2px 8px #00000005;border:1px solid rgba(0,0,0,.04)}.top-grid{display:grid;grid-template-columns:1fr;gap:var(--m);align-items:start}@media(min-width:981px){.top-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--xxl)}}.compact-section{min-width:0}.controls{display:flex;flex-direction:column;gap:var(--s)}.controls>p{margin-bottom:var(--m)}.controls h2{margin-bottom:var(--s);font-weight:700}.section-block h2{display:inline-block;padding-right:var(--s);position:relative}.stepper{display:flex;align-items:center;justify-content:flex-start;gap:var(--m);margin-bottom:var(--m);flex-wrap:wrap}.step-indicator{display:flex;align-items:center;gap:8px;font-size:var(--text-s);color:#a3a19b;font-weight:600;transition:color .4s ease}.step-indicator span{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#eae6db;color:#8f8c85;font-size:.75rem;transition:all .4s ease}.step-indicator.active{color:var(--accent)}.step-indicator.active span{background:var(--accent);color:#fff;box-shadow:0 0 0 4px #2f6f5826}.step-indicator.completed{color:var(--ink)}.step-indicator.completed span{background:var(--ink);color:#fff}h1,h2,h3,h4,p{margin:0}h1{margin-top:var(--xs);margin-bottom:var(--xs);font-size:var(--text-xl);line-height:var(--lh-tight)}h2{margin-bottom:var(--s);font-size:var(--text-l)}h3{margin-bottom:var(--s);font-size:var(--text-m)}label{display:block;font-size:var(--text-s);color:var(--muted);margin-bottom:var(--xs)}.row{display:flex;gap:var(--s);align-items:center}.row input,.row select{flex:1 1 auto}.row button:not(.swatch){flex:0 0 auto;width:var(--control-w)}.paint-controls-row{align-items:center;justify-content:flex-start;gap:var(--s);flex-wrap:nowrap;overflow-x:auto;padding:4px var(--r-s) var(--r-s) var(--r-s);margin-top:-4px;margin-inline:calc(-1 * var(--r-s))}.paint-controls-row .palette{margin-right:auto;flex:0 0 auto}.paint-controls-row button:not(.swatch){flex:0 0 auto}.buttons-row{margin-top:var(--s);justify-content:flex-start;flex-wrap:wrap}.walkthrough-buttons{gap:var(--s);justify-content:center}.walkthrough-buttons button{width:auto}.nav-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:0 0 auto}input,select,textarea,button{font-family:inherit;height:var(--control-h);font-size:var(--text-m)}input,select,textarea{width:var(--full);border:var(--b1) solid #d6d3cc;border-radius:var(--r-m);background:#fdfbf7;color:var(--ink);padding:0 var(--m);transition:border-color .4s ease}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #2f6f581a}select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23646059' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:40px}button,.btn-secondary{border:var(--b1) solid #e2ded5;background:#fff;color:var(--ink);border-radius:var(--r-m);padding:0 var(--m);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s cubic-bezier(.16,1,.3,1),background-color var(--fast) ease,border-color var(--fast) ease;font-weight:600;box-shadow:0 1px 2px #00000008}button:hover:not(:disabled):not(.btn-primary):not(.sticker):not(.swatch),.btn-secondary:hover:not(:disabled){transform:translateY(var(--shift-up));background:#fdfbf7;border-color:#d6d3cc;box-shadow:0 4px 6px #0000000a}.swatch,.cube-net.interactive-net .sticker{transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s cubic-bezier(.16,1,.3,1),filter .4s ease}.swatch:hover,.cube-net.interactive-net .sticker:not(.center):hover{transform:translateY(var(--shift-up))}.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 2px 4px #2f6f5833}.btn-primary:hover:not(:disabled){transform:translateY(var(--shift-up));background:var(--accent-strong);border-color:var(--accent-strong);box-shadow:0 4px 8px #2f6f5840}.btn-primary:disabled{background:var(--accent);border-color:var(--accent);color:#ffffffbf;opacity:.5;transform:none;box-shadow:none}.paint-row{margin-top:var(--s);display:flex;gap:var(--s);align-items:center}.palette{display:flex;gap:var(--xs);flex-wrap:nowrap}.palette .swatch{-webkit-appearance:none;appearance:none;position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--swatch);height:var(--swatch);min-width:var(--swatch);min-height:var(--swatch);max-width:var(--swatch);max-height:var(--swatch);aspect-ratio:1 / 1;flex:0 0 var(--swatch);padding:0;border-radius:var(--r-round);border:var(--b2) solid #ffffff;box-shadow:inset 0 0 0 var(--b1) #00000047}.palette .swatch.active{box-shadow:inset 0 0 0 var(--b1) #00000047,inset 0 0 0 calc(var(--b1) + var(--b2)) var(--ink)}.hint{color:var(--muted);margin-top:var(--xs);font-size:var(--text-s);min-height:var(--hint-min-h)}.validity-line{margin-top:var(--s);font-size:var(--text-s);color:var(--muted);min-height:var(--hint-min-h)}.validity-line.valid{color:var(--accent-strong)}.validity-line.invalid{color:var(--error)}.validity-line.idle{color:var(--muted)}.source-cube-wrap{margin-top:var(--s);padding-top:0;min-height:var(--panel-min-h);display:grid;grid-template-rows:auto 1fr;align-content:start}.target-preview-wrap{margin-top:var(--s);padding-top:var(--xxs);min-height:var(--panel-min-h);display:grid;grid-template-rows:auto 1fr;align-content:start}.walkthrough-preview-wrap{margin-top:var(--s);padding-top:0;display:grid;grid-template-rows:auto 1fr;align-content:start}.step-heading-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s);margin-bottom:var(--xs)}.preview-toggle-btn{width:auto;min-width:116px;height:34px;padding:0 .8rem;font-size:var(--text-s)}.walkthrough-preview-surface{border-radius:var(--r-m);overflow:hidden;min-height:clamp(190px,24vw,240px);display:grid;place-items:center}.walkthrough-preview-surface.is-3d{min-height:clamp(190px,24vw,240px);padding:0;border:0;background:transparent}.walkthrough-preview-surface.is-2d{border:0;background:transparent;padding:0}.move-coach{margin-top:var(--m);padding:var(--l);border-radius:var(--r-l);border:1px solid rgba(47,111,88,.12);background:radial-gradient(circle at top left,rgba(47,111,88,.12),transparent 36%),linear-gradient(135deg,#fffffffa,#f8f4ebf5);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--l);align-items:center}.move-coach-copy,.move-coach-visual{display:grid;gap:var(--s)}.move-coach-kicker,.move-coach-caption,.move-coach-note{font-size:var(--text-s);color:var(--muted)}.move-coach-kicker{text-transform:uppercase;letter-spacing:.08em;font-weight:700}.move-coach-note{line-height:1.5}.move-coach-visual{justify-items:center}.move-coach-chips{display:flex;flex-wrap:wrap;gap:var(--xs)}.move-chip{display:inline-flex;align-items:center;min-height:32px;padding:0 .75rem;border-radius:var(--r-pill);border:1px solid rgba(31,30,28,.1);background:#fffc;font-size:var(--text-s);font-weight:600}.move-chip-strong{background:#2f6f581f;border-color:#2f6f583d;color:var(--accent-strong)}.cube-scene{--cube-size: var(--cube-3d-size);--cube-face-gap: clamp(3px, calc(var(--cube-size) * .03), 6px);--cube-face-padding: clamp(5px, calc(var(--cube-size) * .05), 10px);--cube-face-radius: clamp(12px, calc(var(--cube-size) * .085), 20px);--cube-sticker-radius: clamp(5px, calc(var(--cube-size) * .034), 8px);width:var(--cube-size);height:var(--cube-size);perspective:900px;perspective-origin:center}.walkthrough-preview-surface .cube-scene{--cube-size: var(--cube-3d-preview-size)}.cube-3d{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:var(--cube-view);transition:transform .42s cubic-bezier(.16,1,.3,1)}.cube-3d-face{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:var(--cube-face-gap);padding:var(--cube-face-padding);border-radius:var(--cube-face-radius);background:#1c1b19e6;border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px #ffffff0a;backface-visibility:hidden}.cube-3d-face--f{transform:translateZ(calc(var(--cube-size) / 2))}.cube-3d-face--b{transform:rotateY(180deg) translateZ(calc(var(--cube-size) / 2))}.cube-3d-face--r{transform:rotateY(90deg) translateZ(calc(var(--cube-size) / 2))}.cube-3d-face--l{transform:rotateY(-90deg) translateZ(calc(var(--cube-size) / 2))}.cube-3d-face--u{transform:rotateX(90deg) translateZ(calc(var(--cube-size) / 2))}.cube-3d-face--d{transform:rotateX(-90deg) translateZ(calc(var(--cube-size) / 2))}.cube-3d-face.active{box-shadow:inset 0 0 0 2px #ffffff29,0 0 0 2px #2f6f5847;animation:facePulse 1.5s ease-in-out infinite}.cube-3d-sticker{display:flex;align-items:center;justify-content:center;border-radius:var(--cube-sticker-radius);border:1px solid rgba(0,0,0,.25);box-shadow:inset 0 1px #ffffff47}.cube-3d-sticker.center{font-size:.85rem;font-weight:700;color:#000000ad}@keyframes facePulse{0%,to{box-shadow:inset 0 0 0 2px #ffffff29,0 0 0 2px #2f6f583d}50%{box-shadow:inset 0 0 0 2px #ffffff38,0 0 0 6px #2f6f5824}}.cube-net{display:grid;grid-template-rows:repeat(9,var(--sticker));grid-template-columns:repeat(12,var(--sticker));gap:var(--net-gap);justify-content:center;justify-self:center;padding-top:var(--net-gap);overflow-x:auto;padding-bottom:var(--xs)}.sticker{width:var(--sticker);height:var(--sticker);border:var(--b1) solid rgba(0,0,0,.33);border-radius:var(--r-s);padding:0}.cube-net.interactive-net .sticker:not(.center){cursor:pointer}.cube-net.static-net .sticker,.cube-net.interactive-net .sticker.center,.cube-net .sticker:disabled{cursor:default}.sticker.center{border-width:var(--b2);display:inline-flex;align-items:center;justify-content:center;font-size:var(--text-s);font-weight:700;line-height:var(--lh-1);color:#000000ad}.sticker.highlight{box-shadow:inset 0 0 0 var(--b2) #000000ad,0 0 0 var(--b1) #ffffffb3}.output .row{margin-top:var(--s)}.algorithm-box{margin-top:var(--s);width:var(--full);min-height:var(--algo-min-h);border:var(--b1) solid #c8c0b4;border-radius:var(--r-m);background:#fff;color:var(--ink);padding:var(--m);font-family:IBM Plex Mono,monospace;line-height:var(--lh-relaxed);overflow-wrap:anywhere}.move-token{display:inline-block;padding:var(--xxs) var(--xs);border-radius:var(--r-s)}.move-token.current{background:#2f6f5829;box-shadow:inset 0 0 0 var(--b1) #2f6f5873;font-weight:600}.moves-count{color:var(--muted);white-space:nowrap}.notation{margin-top:var(--xs);border-top:0;padding-top:var(--xs);color:var(--muted);font-size:var(--text-s);line-height:var(--lh-tight);opacity:.9}.notation p+p{margin-top:var(--xxs)}.wizard-nav{display:flex;justify-content:space-between;margin-top:var(--m);padding-top:var(--m);border-top:var(--b1) solid #eae6db}.help-details{margin-top:var(--s);font-size:var(--text-s)}.help-details summary{cursor:pointer;color:var(--muted);font-weight:600;margin-bottom:var(--xs);transition:color .4s ease;-webkit-user-select:none;user-select:none;padding:4px 0}.help-details summary::marker{margin-right:8px}.help-details summary:hover{color:var(--ink)}.help-content{padding-top:var(--xs)}.wizard-nav button{width:auto;padding:0 var(--l);min-width:120px}@media (max-width: var(--bp)){body{padding-inline:1.25rem}.layout{width:min(var(--layout-max),var(--full));gap:var(--m)}.row{flex-wrap:wrap}.row>*{flex:1 1 var(--full)}button:not(.swatch):not(.sticker):not(.step-indicator){width:var(--full)}.paint-controls-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;overflow-x:visible;margin-inline:0;padding-inline:0;row-gap:var(--xs);column-gap:var(--xs)}.paint-controls-row button:not(.swatch){width:var(--full);min-width:0}.paint-controls-row .palette{grid-column:1 / -1;justify-content:flex-start;margin-right:0}.source-cube-wrap,.target-preview-wrap{min-height:0}.move-coach{grid-template-columns:1fr}.walkthrough-buttons .nav-btn{width:auto}}@media(max-width:1180px){.paint-controls-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;overflow-x:visible;margin-inline:0;padding-inline:0;row-gap:var(--xs);column-gap:var(--xs)}.paint-controls-row>button:not(.swatch){order:1}.paint-controls-row>.palette{order:2}.paint-controls-row button:not(.swatch){width:var(--full);min-width:0}.paint-controls-row .palette{grid-column:1 / -1;justify-content:flex-start;margin-right:0}}@media(max-width:700px){:root{--xl: 1.25rem;--xxl: 1.5rem;--control-h: 46px;--swatch: 40px;--sticker: 28px}.layout{width:min(var(--layout-max),var(--full));margin:var(--s) auto var(--xl)}body{margin:0;padding-inline:1rem;padding-top:1rem}.card{padding:var(--l);border-radius:var(--r-m)}.hero{padding:0 0 var(--s)}.section-block{padding-top:var(--l);padding-bottom:var(--l)}.controls>p{margin-bottom:var(--s)}.row{gap:var(--xs)}.cube-net{justify-content:flex-start}.move-coach{padding:var(--m)}.walkthrough-preview-header{flex-wrap:wrap;align-items:stretch}.preview-toggle-btn{width:auto;min-width:116px}.stepper{gap:var(--s);justify-content:space-between}.step-indicator{font-size:.8rem;gap:4px;flex-direction:column}.wizard-nav{position:sticky;bottom:0;left:0;right:0;background:#fdfbf7f2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:var(--m);margin:var(--l) -1rem 0;border-top:1px solid rgba(0,0,0,.06);z-index:10}.wizard-nav button{flex:1;margin:0 var(--xs)}.palette{flex-wrap:wrap;gap:6px}.walkthrough-buttons .nav-btn{flex:1 1 calc(50% - var(--xs));min-width:120px}.walkthrough-buttons .nav-btn:last-child{flex-basis:var(--full)}}@media(max-width:420px){:root{--swatch: 38px;--sticker: 24px;--text-xl: 1.5rem;--cube-3d-preview-size: 122px}body{padding-inline:.75rem}.wizard-nav{margin-inline:-.75rem}.paint-controls-row{margin-inline:0;padding-inline:0}.palette{gap:2px}.walkthrough-buttons .nav-btn{flex-basis:var(--full)}.notation{font-size:.74rem}.walkthrough-preview-surface.is-3d{min-height:240px}.cube-scene{width:var(--cube-3d-preview-size);height:var(--cube-3d-preview-size);perspective:720px}}