@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap";:root{--bg: #f4f1eb;--ink: #22211e;--muted: #666157;--accent: #2f6f58;--accent-strong: #255645;--error: #b83737;--xxs: .1rem;--xs: .25rem;--s: .5rem;--m: .75rem;--l: 1rem;--xl: 2rem;--xxl: 3rem;--control-w: 104px;--control-h: 44px;--swatch: 44px;--sticker: 21px;--full: 100%;--screen-h: 100vh;--layout-max: 1100px;--shift-up: -1px;--alpha-shift: -7px;--net-gap: 2px;--outline-offset: 1px;--panel-min-h: 260px;--algo-min-h: 84px;--hint-min-h: 1.2rem;--r-s: 4px;--r-m: 8px;--r-round: 50%;--r-pill: 999px;--b1: 1px;--b2: 2px;--b3: 3px;--text-xs: .76rem;--text-s: .8rem;--text-m: .95rem;--text-l: 1.02rem;--text-xl: clamp(1.7rem, 3.8vw, 2.4rem);--lh-tight: 1.02;--lh-1: 1;--lh-relaxed: 1.5;--fast: .12s;--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,.14),transparent var(--grad-m)),radial-gradient(circle at var(--grad-end) var(--grad-end),rgba(239,138,59,.17),transparent var(--grad-s)),var(--bg);min-height:var(--screen-h)}.layout{width:min(var(--layout-max),calc(var(--full) - var(--xl)));margin:var(--m) auto var(--xl);display:grid;gap:var(--m)}.hero{padding:var(--xs) 0 var(--l)}.hero-title-row{display:flex;align-items:baseline;gap:var(--s);flex-wrap:wrap}.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))}.section-block{padding:var(--s) 0 0;border-top:var(--b3) solid #d3c4ab}.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(--xs)}.section-block h2{display:inline-block;padding-right:var(--s);background:linear-gradient(to right,#ef8a3b33,#ef8a3b00)}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:var(--b1) var(--r-s) var(--r-s) var(--r-s);margin-top:calc(-1 * var(--b1));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:4px;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 #c8c0b4;border-radius:var(--r-m);background:#fff;color:var(--ink);padding:0 var(--m)}button{border:var(--b1) solid #c4baab;background:#fcfaf6;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 var(--fast) ease,background-color var(--fast) ease}button:hover:not(:disabled):not(.btn-primary){transform:translateY(var(--shift-up));background:#f2ece2}.swatch,.cube-net.interactive-net .sticker{transition:transform var(--fast) ease,box-shadow var(--fast) ease,filter var(--fast) 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)}.btn-primary:hover:not(:disabled){transform:translateY(var(--shift-up));background:var(--accent-strong);border-color:var(--accent-strong)}.btn-primary:disabled{background:var(--accent);border-color:var(--accent);color:#ffffffbf;opacity:.65}.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)}.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}.walkthrough-block{padding-bottom:0}.walkthrough-preview-wrap h3{margin-bottom:var(--s)}.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)}.site-footer{margin-top:var(--xl);padding-top:var(--m);border-top:var(--b1) solid #d7ccb9;color:var(--muted);font-size:var(--text-s);display:flex;gap:var(--s);align-items:center;justify-content:center}.site-footer a{color:inherit}.site-footer a:hover{color:var(--ink)}@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){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}.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: 42px;--swatch: 38px;--sticker: 24px}.layout{width:min(var(--layout-max),var(--full));margin:var(--s) auto var(--xl)}body{margin:1rem .5rem;padding-inline:1.5rem}.hero{padding:0 0 var(--s)}.section-block{padding-top:var(--xs)}.controls>p{margin-bottom:var(--s)}.row{gap:var(--xs)}.cube-net{justify-content:flex-start}.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: 34px;--sticker: 22px;--text-xl: 1.5rem}body{padding-inline:1rem}.paint-controls-row{margin-inline:0;padding-inline:0}.palette{gap:2px}.walkthrough-buttons .nav-btn{flex-basis:var(--full)}.notation{font-size:.74rem}}