:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#233d33;background:#f5f4ef;font-synthesis:none;--green:#214e40;--muted:#727d75;--line:#dedfd6;--yellow:#efd463;--unit:62px;--half:30px}
*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button{cursor:pointer;border:0;transition:background .15s,opacity .15s}button:disabled{cursor:default;opacity:.42}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid #a2be55;outline-offset:3px}button:hover:not(:disabled){filter:brightness(.94)}a{color:inherit}h1,h2,p{margin:0}h1{font-size:38px;font-weight:600;letter-spacing:-1.5px;line-height:1.2}h2{font-size:21px;font-weight:600;letter-spacing:-.55px;line-height:1.35}.shell{max-width:1200px;margin:auto;padding:0 44px}header{height:88px;display:flex;align-items:center;gap:24px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:9px;font-size:28px;font-weight:700;letter-spacing:-1px;text-decoration:none}.brand-dot{margin-left:-9px;color:#95a364}.header-note{font-size:12px;color:var(--muted)}.quiet{margin-left:auto;background:transparent;border:1px solid #cfD4c8;border-radius:8px;padding:9px 16px;font-size:12px}.intro{display:flex;align-items:flex-end;justify-content:space-between;padding:36px 0 28px;gap:20px}.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:700;color:#76816e;margin-bottom:10px}.lede{font-size:14px;color:var(--muted);margin-top:11px;line-height:1.6}.engine-label{font-size:10px;color:var(--muted);white-space:nowrap;margin-bottom:5px}.engine-label i{display:inline-block;width:6px;height:6px;background:#77995c;border-radius:50%;margin-right:6px}.workspace{display:grid;grid-template-columns:1.16fr 1fr;gap:22px;align-items:stretch}.cube-card,.control-card,.state-card,.playback{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fffef9}.cube-card{background:#e9ece2;padding:20px 23px 0;position:relative}.card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative;z-index:2}.state-badge{font-size:11px;background:#d9e5cb;color:#3f5d34;border-radius:20px;padding:6px 11px}.state-badge.mixed{background:#e2e2d4;color:#70664a}.view-toggle{border:1px solid #d1d6c9;border-radius:7px;padding:3px;display:flex;gap:2px}.view-toggle button{background:transparent;color:#6e7867;padding:5px 10px;border-radius:4px;font-size:10px}.view-toggle [aria-pressed=true]{background:#fffef9;color:#294333;box-shadow:0 1px 3px #263f2912}.stage{height:305px;position:relative;perspective:900px;touch-action:none;cursor:grab;isolation:isolate}.stage:active{cursor:grabbing}.camera{position:absolute;left:50%;top:49%;width:0;height:0;transform:rotateX(-25deg) rotateY(-33deg);transform-style:preserve-3d}.cube,.layer{position:absolute;width:0;height:0;transform-style:preserve-3d}.cubie{position:absolute;width:60px;height:60px;margin:-30px;transform-style:preserve-3d}.face{position:absolute;inset:0;background:#24352e;border:1px solid #24352e;border-radius:4px;backface-visibility:hidden;padding:4px;display:flex;align-items:center;justify-content:center}.sticker{width:100%;height:100%;border-radius:4px;box-shadow:inset 0 0 0 1px #ffffff15,inset 0 -3px 0 #0000000c}.face.F{transform:translateZ(var(--half))}.face.B{transform:rotateY(180deg) translateZ(var(--half))}.face.R{transform:rotateY(90deg) translateZ(var(--half))}.face.L{transform:rotateY(-90deg) translateZ(var(--half))}.face.U{transform:rotateX(90deg) translateZ(var(--half))}.face.D{transform:rotateX(-90deg) translateZ(var(--half))}.cube-shadow{position:absolute;width:215px;height:28px;left:50%;top:86%;transform:translateX(-50%);background:#243d3033;filter:blur(15px);border-radius:50%;z-index:-1}.viewer-foot{display:flex;justify-content:space-between;align-items:center;color:#82907a;font-size:10px;margin-bottom:18px}.text-button{background:none;color:#5a725d;font-size:10px;padding:4px}.main-actions{display:grid;grid-template-columns:1fr 2fr;gap:10px}.solve-actions{display:flex;gap:8px;min-width:0}.solve-actions .primary{flex:1}.solve-actions select{border:1px solid #cfd6c5;border-radius:8px;background:#fffef9;color:#37553b;padding:8px;font-size:11px;min-width:0}.primary,.secondary{border-radius:8px;padding:12px 16px;font-size:12px;font-weight:600;line-height:1.2;min-height:40px}.primary{background:var(--green);color:#fffef5;display:inline-flex;align-items:center;justify-content:center;gap:10px}.primary span{margin-left:auto}.secondary{background:#fffef9;color:#37553b;border:1px solid #cfd6c5}.history-bar{display:flex;justify-content:space-between;align-items:center;padding:10px 0 15px}.history-bar button{background:none;padding:7px 6px;color:#61725b;font-size:10px}.history-bar div{display:flex;gap:8px}.scramble-line{margin:0 -23px;background:#e2e6d9;border-top:1px solid #d9dece;padding:12px 23px;display:flex;align-items:flex-start;gap:15px;min-height:49px}.scramble-line>span{font-size:8px;letter-spacing:1.1px;font-weight:700;color:#839176;padding-top:3px}.scramble-line output{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:10px;line-height:1.65;color:#647357;overflow-wrap:anywhere}.tabs{display:flex;padding:7px 18px 0;border-bottom:1px solid var(--line);gap:18px}.tabs button{flex:1;background:none;font-size:12px;color:#8b9387;padding:16px 5px 15px;border-bottom:2px solid transparent}.tabs [aria-selected=true]{color:#2d4b38;border-bottom-color:#345b43;font-weight:600}.panel{padding:26px}.section-heading{display:flex;align-items:center;justify-content:space-between}.small-pill{font-size:10px;color:#6c7b63;border:1px solid #e0e4d8;border-radius:6px;padding:5px 8px;white-space:nowrap}.muted{font-size:12px;line-height:1.75;color:var(--muted);margin-top:11px}kbd{font-size:10px;background:#f0f1e9;border:1px solid #e1e3d6;border-radius:3px;padding:1px 4px}.move-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:21px 0 14px}.move-grid button{background:#f0f1e9;color:#33513c;border:1px solid #e0e4d6;border-radius:7px;padding:10px 0;font-family:ui-monospace,monospace;font-size:17px;font-weight:600}.move-grid button.prime{background:#fafaf5;font-size:14px;color:#7f8b73;padding:7px 0}.notation{display:flex;justify-content:space-between;font-size:8px;color:#8c9588;border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:22px}.notation b{font-size:10px;color:#5d7151;padding-right:3px}.field-label{display:block;font-size:9px;letter-spacing:1.4px;font-weight:700;color:#687c5c;margin-bottom:10px}textarea,input:not([type=range]){border:1px solid #dce1d2;border-radius:8px;background:#fafbf5;color:#38533b;padding:12px;font-size:12px}textarea{width:100%;resize:vertical;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;line-height:1.75;display:block}textarea::placeholder{color:#a2aa96}.algorithm-actions{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:10px}.algorithm-actions .muted{font-size:9px;line-height:1.6;margin:0;max-width:165px}.algorithm-actions button{padding:9px 17px;min-height:34px}.advanced{margin-top:18px;color:#829177;font-size:10px}.advanced summary{cursor:pointer}.extra-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin-top:10px}.extra-grid button{padding:8px 0;border-radius:5px;background:#edf0e5;color:#4e6c46}.lesson-content{margin-top:20px}.empty-note{color:#8b967e;line-height:1.8;font-size:12px;border-left:2px solid #dce4cb;padding:12px 0 12px 15px}.lesson-content h3{font-size:16px;font-weight:600;line-height:1.5;margin:0 0 12px}.lesson-action{padding:12px;background:#f1f3e9;border-radius:7px;margin-top:9px;font-size:12px;line-height:1.7}.lesson-action code{display:block;color:#3a6744;font-size:11px;overflow-wrap:anywhere;margin-top:5px}.checkpoint-check{font-size:12px;color:#6b7a61;line-height:1.7;margin:16px 0}.search-options{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}.search-options label{font-size:10px;color:#7b8871}.search-options input{width:60px;margin-left:8px;padding:9px!important}.search-note{font-size:10px}.search-result{font-size:12px;line-height:1.8;margin-top:18px;overflow-wrap:anywhere}.search-result button{display:block;margin-top:10px}.panel>h2{margin-bottom:10px}.panel>.primary{margin-top:18px}#target{margin-top:4px}#search .field-label{margin-top:24px}.playback{margin-top:22px;padding:22px 26px}.playback-heading{display:flex;justify-content:space-between;align-items:center;gap:15px}.transport{display:flex;align-items:center;gap:8px;margin-top:18px}.speed-label{font-size:11px;color:#7c8872;margin-left:auto}.speed-label select{border:0;color:#3a593d;background:#eff2e6;border-radius:6px;padding:8px}.transport output{font-family:ui-monospace,monospace;font-size:11px;color:#738367;margin-left:9px}input[type=range]{width:100%;accent-color:#52764b;margin:20px 0 10px;cursor:pointer}.sequence-moves{display:flex;flex-wrap:wrap;gap:5px;max-height:130px;overflow:auto;padding:4px}.sequence-moves button{font-family:ui-monospace,monospace;font-size:12px;padding:7px;border-radius:5px;background:#f1f2eb;color:#6c7b5d}.sequence-moves button.done{background:#e4ebd6;color:#436538}.sequence-moves button.current{background:#29563c;color:white}.state-card{display:flex;gap:24px;align-items:center;justify-content:space-between;margin-top:22px;padding:23px 26px}.state-card h2{font-size:18px}.state-card .muted{font-size:10px;margin-top:6px}.state-card .eyebrow{font-size:8px;margin-bottom:7px}.state-input{width:52%;display:flex;gap:9px;align-items:center}.state-input input{width:100%;min-width:0;font-family:ui-monospace,monospace;font-size:10px}.state-input>div{display:flex;gap:6px;white-space:nowrap}.state-input button{padding:11px 12px;font-size:10px}.notice{font-size:11px;line-height:1.6;min-height:20px;margin:16px 0;color:#678153}.notice.error{color:#a34c30}footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:20px 0 30px;font-size:10px;color:#929c87}.net{height:305px;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);gap:8px;align-content:center;max-width:365px;margin:auto;padding:20px 0}.net:not([hidden]){display:grid}.net-face{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;background:#2a3f30;border:4px solid #2a3f30;border-radius:5px;position:relative}.net-face span{border-radius:2px;aspect-ratio:1}.net-face.U{grid-area:1/2}.net-face.L{grid-area:2/1}.net-face.F{grid-area:2/2}.net-face.R{grid-area:2/3}.net-face.B{grid-area:2/4}.net-face.D{grid-area:3/2}.net-face::before{content:attr(data-face);position:absolute;color:#214e40;left:-13px;top:0;font-size:9px}.net-face.L::before,.net-face.F::before,.net-face.R::before,.net-face.B::before{top:-15px;left:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}
@media(max-width:900px){.shell{padding:0 25px}.intro{align-items:flex-start}.engine-label{display:none}.workspace{grid-template-columns:1fr 1fr;gap:15px}.panel{padding:20px}.cube-card{padding:18px 17px 0}.scramble-line{margin:0 -17px;padding:12px 17px}.notation{font-size:7px}.state-card{align-items:flex-start}.state-input{flex-direction:column;align-items:stretch}.state-input>div{justify-content:flex-end}}
@media(max-width:650px){.shell{padding:0 18px}header{height:70px;gap:14px}.brand{font-size:26px}.header-note{display:none}.quiet{font-size:11px;padding:8px 12px}.intro{padding:27px 0 24px}.eyebrow{font-size:8px;letter-spacing:1.5px}h1{font-size:30px;letter-spacing:-1px}.lede{font-size:12px;max-width:310px}.workspace{grid-template-columns:1fr;gap:16px}.cube-card{padding:17px 18px 0}.card-top{gap:5px}.stage,.net{height:300px}.state-badge{font-size:10px}.view-toggle button{padding:5px 8px}.viewer-foot{margin-bottom:14px}.main-actions{grid-template-columns:1fr;gap:8px}.scramble-line{margin:0 -18px;padding:11px 18px;min-height:48px}.panel{padding:23px}.tabs{padding:4px 16px 0}.tabs button{padding:15px 5px}.move-grid{gap:7px}.notation{font-size:8px}.playback{padding:20px 18px;margin-top:16px}.transport{flex-wrap:wrap}.transport .primary,.transport .secondary{padding:10px 12px}.speed-label{margin-left:auto;font-size:9px}.speed-label select{font-size:10px;padding:6px}.transport output{margin-left:0;font-size:9px}.state-card{display:block;padding:22px;margin-top:16px}.state-input{width:100%;margin-top:15px}.state-input>div{justify-content:flex-start}.net{gap:6px;padding:23px 12px}.net-face{border-width:3px;gap:2px}footer{font-size:8px;gap:12px;padding-bottom:25px}.notice{font-size:10px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.sequence-moves.grouped{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-height:460px}.sequence-stage{border:1px solid var(--line);border-radius:8px;padding:10px;min-width:0}.sequence-stage h3{font-size:12px;margin:0 0 4px}.sequence-stage .case-name{font-size:10px;line-height:1.6;color:var(--muted);margin-bottom:6px;overflow-wrap:anywhere}.sequence-stage>div{display:flex;flex-wrap:wrap;gap:4px}@media(max-width:650px){.sequence-moves.grouped{grid-template-columns:1fr}}
.header-actions{margin-left:auto;display:flex;gap:8px}.header-actions .quiet{margin-left:0}.header-actions kbd{margin-left:5px}.stage[data-dragging]{cursor:grabbing}.sticker{cursor:grab;user-select:none;-webkit-user-select:none}.viewer-foot{gap:8px}.viewer-foot .text-button{flex-shrink:0}.keyboard-help{width:min(430px,calc(100vw - 36px));border:1px solid var(--line);border-radius:16px;padding:23px;background:#fffef9;color:#233d33;box-shadow:0 16px 65px #233d3326}.keyboard-help::backdrop{background:#233d331a}.help-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.keyboard-help dl{margin:22px 0;display:grid;gap:7px}.keyboard-help dt{font-size:12px;margin-top:8px}.keyboard-help dd{margin:0;font-size:12px;color:var(--muted);line-height:1.5}.keyboard-help p{font-size:12px;line-height:1.75;color:#61725b}@media(max-width:650px){.viewer-foot{font-size:9px}.header-actions{gap:6px}.header-actions .quiet{padding:8px 10px}.header-actions kbd{display:none}}

.face:empty{background:#111;border-color:#111}.sticker{backface-visibility:hidden}
.cubie,.svg-cube{pointer-events:none}.cube .sticker{pointer-events:auto}.viewer-foot,.main-actions,.history-bar,.scramble-line{position:relative;z-index:2}

.size-picker{display:flex;align-items:center;gap:12px;margin:-8px 0 20px;font-size:12px;color:#61725b;flex-wrap:wrap}.size-picker select,.layer-picker select{border:1px solid #cfd6c5;border-radius:7px;padding:7px;background:#fffef9;color:#37553b;font-size:12px}.size-picker>span{font-size:11px}.layer-picker{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:15px;font-size:11px;color:#61725b}.layer-picker label{display:flex;align-items:center;gap:6px}.layer-picker>span{width:100%;font-size:10px}.cubie{width:calc(var(--unit) - 2px);height:calc(var(--unit) - 2px);margin:calc(1px - var(--unit)/2)}.cube .face{padding:clamp(2px,calc(var(--unit)/15),4px);border-radius:3px}.cube .sticker{border-radius:3px}.net-face{grid-template-columns:repeat(var(--size,3),1fr);gap:clamp(1px,calc(8px/var(--size,3)),3px)}#cancel-task{margin-top:8px}
.svg-cube{position:absolute;width:360px;height:360px;margin:-180px;overflow:visible}.svg-cube .plastic{fill:#24352e;stroke:#111;stroke-width:.7px;stroke-linejoin:round}.svg-cube .sticker{stroke:#24352e;stroke-width:var(--sticker-stroke,1.6px);stroke-linejoin:round}.svg-cube .cap{position:static;border:0;padding:0;transform:none;background:#111;fill:#111}.turn-camera,.turn-block{position:absolute;width:0;height:0;transform-style:preserve-3d;pointer-events:none}.turn-surface{position:absolute;backface-visibility:hidden;pointer-events:none}

/* Keep small control text and keyboard focus legible on the light cards. */
.update-notice{position:sticky;top:12px;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:20px 0;padding:16px;border:1px solid var(--line);border-radius:8px;background:#fffef9;color:#37553b;font-size:13px;line-height:1.6}
.view-toggle button,.text-button,.history-bar button,.tabs button,.move-grid button.prime,.advanced summary,.sequence-moves button{color:#52664c}
/* Keep text and fill changes together when the playback selection changes. */
.sequence-moves button,.checkpoints button,.move-log button{transition:opacity .15s}
:is(button,a,input,textarea,select,summary,[tabindex]):focus-visible{outline-color:#42663b}
/* Async tasks can return focus to their trigger after a pointer activation. */
button:focus{outline:3px solid #42663b;outline-offset:3px}

.checkpoints{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0}.checkpoints button{background:#edf1e4;color:#365c3d;border:1px solid #ccd8be;border-radius:7px;padding:10px 12px;font-size:12px;min-height:40px}.checkpoints button[aria-current=step]{background:#29563c;color:white}.checkpoint-state{display:block;color:#52664c;font-size:12px;line-height:1.6;margin:8px 0 12px}

input[type=range]{color:#37553b}

.explorer-canvas { position:absolute; inset:0; width:100%; height:100%; touch-action:none; }
.seed-field { display:flex; align-items:center; gap:12px; padding:0 24px 12px; font-size:13px; }
.seed-field input { min-width:0; width:150px; }
.move-log { display:flex; flex-wrap:wrap; align-items:center; gap:5px; padding:12px 24px; border-top:1px solid var(--line); }
.move-log button { padding:4px 10px; font-size:12px; }
.move-log [aria-current="step"] { background:#264c3c; color:white; }
.move-log span { font-size:12px; color:#526257; }
.session-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:16px 0; }
.file-action { position:relative; display:flex; align-items:center; padding:0 12px; min-height:44px; font-size:13px; border:1px solid var(--line); border-radius:6px; cursor:pointer; }
.file-action input { position:absolute; inset:0; width:100%; opacity:0; cursor:pointer; }
.file-action:focus-within { outline:2px solid #264c3c; outline-offset:2px; }
button, select, input:not([type=range]), summary { min-height:44px; }
button { min-width:44px; }
.net-face span { position:relative; }
.net-face::before { content:attr(data-face); position:absolute; font-weight:700; color:#16231e; text-shadow:0 1px white; z-index:1; pointer-events:none; }
.net-face { position:relative; }
button.primary, button.secondary, .algorithm-actions button, .checkpoints button { min-height:44px; }
.brand { min-height:44px; }
.state-input>div{flex-wrap:wrap;white-space:normal}.state-input{flex-direction:column;align-items:stretch}

.slice-focus{padding:12px 0 16px;border-top:1px solid #cbd3c3}.slice-heading{display:flex;align-items:center;justify-content:space-between;font-size:12px}.slice-heading button{padding:8px 12px;min-height:40px}.slice-heading output{font-weight:600}.slice-focus input{margin:12px 0;min-height:28px}.focus-row{display:flex;align-items:center;gap:14px}.focus-row p{font-size:12px}.focus-row .muted{font-size:10px;margin-top:5px}.focus-grid{display:grid;grid-template-columns:repeat(5,15px);gap:2px;padding:3px;background:#24352e;border-radius:4px}.focus-grid span{height:15px;border-radius:1px}.focus-grid .selected{outline:2px solid #fff;outline-offset:-2px}.svg-cube .sticker[data-focus]{stroke:#fff;stroke-width:1px}.slice-heading button[aria-pressed=true]{background:#214e40;color:#fff}

.focus-grid{touch-action:none;cursor:grab;user-select:none}
/* Four-dimensional cells share one depth-tested perspective surface. */
#hypercube {padding:0 18px 16px} .hyper-heading {display:flex;justify-content:space-between;gap:10px;font-size:12px;align-items:center}
#hyper-stage {height:300px;position:relative;touch-action:none;border-radius:14px;background:radial-gradient(ellipse,#ecf1e8,transparent 75%);overflow:hidden}
#hyper-stage canvas {display:block;width:100%;height:100%}
.hyper-controls {display:grid;gap:12px} .hyper-controls h2 {font-size:14px;margin:0 0 7px}
#cell-atlas {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
#cell-atlas button {padding:7px 5px;font-size:11px;min-width:0;display:grid;gap:5px;text-align:left}
#cell-atlas [aria-pressed=true] {outline:2px solid var(--accent,#26724f);background:#e5eddf}
.atlas-colors {display:grid;grid-template-columns:repeat(9,1fr);gap:1px;pointer-events:none}.atlas-colors i {height:4px;border-radius:1px}
.plane-row {display:flex;gap:6px;align-items:center;margin-top:5px}.plane-row strong {width:30px;font-size:12px}.plane-row button {padding:5px 10px;min-height:34px;font-size:12px}
#plane-prompt {font-size:12px;margin:0}.needs-choice {outline:2px solid #b17c20;outline-offset:6px}
#hyper-rotations {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.hyper-controls label {display:flex;align-items:center;font-size:12px;gap:8px}.hyper-controls input {min-width:0;width:100%}.hyper-controls summary {font-size:12px;cursor:pointer}
body[data-dimension="4"] .control-card,body[data-dimension="4"] .view-toggle,body[data-dimension="4"] .viewer-foot,body[data-dimension="4"] .solve-actions {display:none}
body[data-dimension="4"] .workspace {grid-template-columns:1fr;max-width:850px;margin:auto}
body[data-dimension="4"] #rewind-hyper {margin:8px 18px}body[data-dimension="4"] .intro {margin-bottom:14px}
@media(max-width:600px){#hypercube{padding:0 10px 12px}#hyper-stage{height:240px}.hyper-heading{font-size:10px}.hyper-heading .eyebrow{font-size:10px}#cell-atlas button{font-size:10px}body[data-dimension="4"] .intro .lede{display:none}body[data-dimension="4"] .intro h1{font-size:26px}body[data-dimension="4"] .intro .eyebrow{display:none}}

body[data-dimension="4"] #cfen,body[data-dimension="4"] #import,body[data-dimension="4"] #export {display:none}
@media(min-width:900px){.hyper-controls {grid-template-columns:1fr 1fr;column-gap:24px}#hyper-stage {height:260px}}
@media(max-width:600px){#hyper-stage {height:230px}}

/* Landing composition; the explorer keeps its established controls and materials. */
.landing{background:#f5f4ef;color:#151b22;color-scheme:light;font-family:Inter,system-ui,sans-serif}
.landing header,.landing main,.landing footer{max-width:1440px;margin-inline:auto}
.landing header{height:88px;padding:0 64px;border-bottom:1px solid #151b221a}
.landing header>a:last-child{display:inline-flex;align-items:center;min-height:44px;font-size:.875rem}
.landing .brand{font-size:24px;letter-spacing:-1px}
.landing .brand span{color:#2855d9}
.landing .hero{padding:40px 64px 64px;min-height:650px;display:grid;grid-template-columns:440px minmax(0,760px);gap:112px;align-items:center}
.landing .hero-copy{min-width:0}
.landing .eyebrow{color:#57616c;font-size:.6875rem;letter-spacing:.16em;margin:0 0 20px}
.landing .hero h1{font-size:4rem;font-weight:650;letter-spacing:-.055em;line-height:1.04;margin:0 0 24px;overflow-wrap:normal}
.landing .hero-copy>p:not(.eyebrow){font-size:1.125rem;line-height:1.6;color:#57616c;margin:0;max-width:400px}
.landing .hero-actions{display:flex;gap:12px 24px;flex-wrap:wrap;margin-top:28px}
.landing .hero-actions a{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:.875rem;font-weight:650;border-bottom:1px solid #151b224d;padding:10px 0;margin:0}
.landing .hero-actions a span{color:#2855d9}
.landing .playground{min-width:0;min-height:520px;background:#151b22;color:#fff;padding:24px;border:0;border-radius:20px;box-shadow:none;display:grid;grid-template-rows:auto minmax(300px,1fr) auto auto;color-scheme:dark}
.landing .play-top{font-size:.75rem;line-height:1.4;color:#fff;gap:12px;flex-wrap:wrap}
.landing .live{font-size:.625rem;line-height:1.4;color:#fff}
.landing .live i{background:#fff}
.landing .cube-stage{height:auto;min-height:300px}
/* Preserve the showcase's cube geometry when sharing the explorer stylesheet. */
.landing .cube{position:relative;width:160px;height:160px;margin:0;transform:rotateX(-26deg) rotateY(-35deg);transform-style:preserve-3d;z-index:1}
.landing .cube .face{position:absolute;inset:0;display:grid;gap:3px;background:#121c18;border:0;padding:3px;border-radius:5px;backface-visibility:hidden;align-items:normal;justify-content:normal}
.landing .cube .face span{border-radius:3px}
.landing .face-f{transform:translateZ(80px)}
.landing .face-r{transform:rotateY(90deg) translateZ(80px)}
.landing .face-u{transform:rotateX(90deg) translateZ(80px)}
.landing .results{gap:clamp(24px,4vw,50px);padding:14px 0;border-top:1px solid #ffffff26}
.landing .results span,.landing .controls label{color:#fff;font-size:.625rem;line-height:1.4;letter-spacing:.13em}
.landing .results strong{font-size:1rem;line-height:1.4}
.landing .controls{display:flex;gap:8px;flex-wrap:wrap;align-items:end}
.landing .controls label{flex:1 1 88px;min-width:8em;display:grid;gap:5px}
.landing .controls select{width:100%;min-width:0}
.landing .controls button,.landing .controls select{height:auto;min-height:44px;border:1px solid #ffffff4d;border-radius:7px;background:#26313f;color:#fff;padding:10px 14px;font:600 .875rem/1.4 system-ui;white-space:normal}
.landing .controls button{flex:1 1 auto}
.landing .controls .primary{background:#2855d9;border-color:#2855d9;display:inline-flex;align-items:center;justify-content:center}
.landing :is(a,button,select):focus-visible{outline:3px solid #2855d9;outline-offset:4px}
.landing .playground :is(button,select):focus-visible{outline-color:#fff}
.landing .library{background:#f5f4ef;padding-inline:64px;border-top:1px solid #151b221a}
.landing .library-grid>div{min-width:0}
.landing .library pre{max-width:100%}
.landing footer{padding-inline:64px;color:#57616c}
@media(max-width:1350px){
 .landing .hero{grid-template-columns:minmax(0,440px) minmax(0,760px);gap:48px}
 .landing .hero h1{font-size:3.5rem}
 .landing .hero-actions{gap:8px 20px}
}
@media(max-width:900px){
 .landing header,.landing footer{padding-inline:24px}
 .landing .hero{padding-inline:24px;gap:24px}
 .landing .hero h1{font-size:2.75rem}
 .landing .playground{padding:18px}
 .landing .library{padding-inline:24px}
}
@media(max-width:700px){
 .landing header{height:64px;padding-inline:16px}
 .landing .hero{padding:24px 16px 40px;min-height:0;display:flex;flex-direction:column;align-items:stretch;gap:20px}
 .landing .hero-copy{display:block}
 .landing .hero h1{font-size:2.25rem;line-height:1.06;letter-spacing:-.045em;margin:0 0 12px}
 .landing .hero h1 br{display:block}
 .landing .hero-copy>p:not(.eyebrow){font-size:1rem;line-height:1.5;max-width:358px}
 .landing .hero-actions{margin-top:16px;gap:8px 20px}
 .landing .hero-actions a{font-size:.875rem}
 .landing .playground{min-height:288px;padding:12px;border-radius:14px;grid-template-rows:auto minmax(132px,1fr) auto auto}
 .landing .cube-stage{min-height:132px}
 .landing .cube{position:absolute;left:50%;top:50%;margin:-69px;width:138px;height:138px;scale:.65}
 .landing .face-f{transform:translateZ(69px)}
 .landing .face-r{transform:rotateY(90deg) translateZ(69px)}
 .landing .face-u{transform:rotateX(90deg) translateZ(69px)}
 .landing .results{padding:6px 0;gap:28px}
 .landing .results div{gap:2px}
 .landing .results strong{font-size:.875rem}
 .landing .controls button,.landing .controls select{font-size:.8125rem;padding:9px 10px}
 .landing .library{padding:40px 16px}
 .landing .library-heading a{min-height:44px;display:inline-flex;align-items:center}
 .landing footer{padding-inline:16px}
}

.landing #demo-control{position:absolute;right:0;top:0;z-index:2;min-height:44px;border:1px solid #ffffff4d;border-radius:7px;background:#26313f;color:#fff;padding:8px 10px;font:600 .8125rem/1.4 system-ui;cursor:pointer}
.landing .cube [role="button"]{cursor:pointer}
@media(prefers-reduced-motion:reduce){.landing{scroll-behavior:auto}.landing *{scroll-behavior:auto}}