@import url('/styles.css');
:root{color-scheme:dark;--bg:#101715;--panel:#17211c;--line:#344138;--muted:#a1afa3;--ink:#f1f1e5;--lime:#d1e89c;--gold:#d0b477}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,Arial,sans-serif;font-size:14px}button,a{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--lime);outline-offset:4px}button:disabled{opacity:.4;cursor:not-allowed}.topbar{height:76px;border-bottom:1px solid #ffffff12;display:flex;justify-content:space-between;align-items:center;padding:0 max(5vw,24px)}.brand{display:flex;align-items:center;gap:12px;color:#eee;text-decoration:none;font-size:10px;letter-spacing:.13em;font-weight:700}.brand b{color:#7d8d80;font-weight:400}.brand-mark{border:1px solid #b2c69b;width:31px;height:31px;display:grid;place-items:center;color:var(--lime);font-family:Georgia;font-size:13px;letter-spacing:0}.top-right{display:flex;align-items:center;gap:32px}.top-caption,.panel-num,.label,.eyebrow,.setting-label,.card-number,.learn-index,.stage-corner,.intro-index small{font-family:monospace;font-size:10px;letter-spacing:.14em}.top-caption{color:#718075}.lang{display:flex;gap:4px}.lang button{border:0;background:none;color:#77867a;font-size:10px;padding:7px}.lang button.active{color:var(--lime)}main{max-width:1440px;margin:auto;padding:0 5vw}.intro{display:flex;justify-content:space-between;align-items:end;padding:72px 0 46px}.eyebrow{display:flex;align-items:center;gap:10px;color:var(--lime)}.eyebrow>span:first-child{width:7px;height:7px;background:var(--lime);border-radius:50%}h1,h2,h3,p{margin:0}h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(58px,8vw,112px);letter-spacing:-.065em;line-height:1.08;margin:18px 0}h1 em{font-weight:400;color:#bbd493} .intro p,.learn-heading p{color:var(--muted);font-size:15px;line-height:1.7}.intro-index{text-align:right;color:#526356}.intro-index span{display:block;font-family:Georgia;font-size:70px;line-height:1}.intro-index small{font-size:9px}.workspace{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(340px,.8fr);border:1px solid var(--line);background:#141d18}.stage-panel{padding:28px 32px 22px;min-width:0}.stage-head{display:flex;justify-content:space-between;align-items:center}.label{color:#9dad9f}.stage-head h2{font-family:Georgia;font-size:28px;font-weight:400;margin-top:8px}.status{border:1px solid #4a6050;border-radius:20px;padding:8px 12px;font-size:11px;color:#c3d5b2;display:flex;align-items:center;gap:7px}.status i{width:6px;height:6px;background:var(--lime);border-radius:50%}.stage{position:relative;height:clamp(360px,39vw,535px);margin:18px 0;background:radial-gradient(ellipse at 50% 46%,#35483b 0,#223127 35%,#1a261e 72%);overflow:hidden}.stage:before,.stage:after{content:'';position:absolute;inset:18px;border:1px solid #ffffff0c;pointer-events:none}.stage:after{inset:auto 18px 50%;height:1px;border:0;background:#ffffff09}#canvas{width:100%;height:100%;touch-action:none;cursor:grab}#canvas:active{cursor:grabbing}canvas{display:block;width:100%;height:100%}.stage-hint,.stage-corner{position:absolute;bottom:27px;color:#b6c6b5;font-size:10px}.stage-hint{left:28px}.stage-hint span:first-child{font-size:16px;margin-right:7px}.stage-corner{right:28px;color:#859789}#webgl-error{position:absolute;top:40%;left:10%;right:10%;text-align:center}.stage-actions{display:flex;gap:9px}.stage-actions button,.card-button{min-height:48px;border:1px solid #788e73;padding:0 18px;font-size:12px;font-weight:600}.stage-actions .primary{background:var(--lime);color:#1b291a;border-color:var(--lime);flex:1}.stage-actions .outline{background:transparent;color:#e3eadd;flex:1}.stage-actions .icon-button{background:transparent;color:#e3eadd;font-size:22px;width:48px;padding:0}.under-actions,.fine{color:#879a89;font-size:11px;line-height:1.6;margin-top:13px}.control-panel{border-left:1px solid var(--line);padding:32px;background:#18221c}.panel-top,.setting-label{display:flex;justify-content:space-between;gap:12px;align-items:center}.panel-num{color:#6b7e6f}.control-panel h2,.learn-card h3{font:normal 30px Georgia,serif;letter-spacing:-.03em;margin:25px 0 10px}.control-panel>p,.learn-card>p:not(.fine){color:var(--muted);line-height:1.7;font-size:13px}.divider{height:1px;background:var(--line);margin:27px 0}.setting-label{color:#c4d1c1;font-size:10px}.setting-label span+span{color:#7e9181;font-size:9px;letter-spacing:0}.sizes{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:15px}.sizes button,.moves button{background:#202d24;border:1px solid #405044;color:#c1d0bd;min-height:45px}.sizes button.active{border-color:var(--lime);background:#d1e89c;color:#1d2a1c}.moves{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:15px}.moves button{font:18px Georgia,serif;color:#edf3e6}.moves button:hover,.algorithm-list button:hover{border-color:var(--lime);background:#2c3c2e}.direction{display:flex;justify-content:space-between;align-items:center;margin-top:14px}.direction button{border:0;background:none;color:#cfdbc9;padding:0;font-size:11px}.direction-icon{font-size:18px;color:var(--lime);vertical-align:middle;margin-right:6px}.direction>span{font:9px monospace;letter-spacing:.08em;color:#718574}.notation{display:flex;gap:10px;margin-top:24px;padding:14px;background:#202e24;color:#97aa99;font-size:11px;line-height:1.6}.notation>span{color:var(--lime);font-family:Georgia;font-size:15px}.activity{margin-top:28px}.activity button{border:0;background:none;color:var(--lime);font:10px monospace}.activity #history{color:#d4e5c9;font:14px monospace;min-height:42px;line-height:1.8;margin-top:12px;overflow-wrap:anywhere}.learn{padding:115px 0 100px}.learn-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:32px}.learn-heading h2{font:normal clamp(38px,4.5vw,60px) Georgia,serif;letter-spacing:-.05em;margin:15px 0}.learn-heading h2 span{color:var(--lime)}.learn-index{color:#718574}.learn-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.learn-card{padding:30px;background:#19241d;border:1px solid var(--line)}.card-number{color:#a8bd9c}.learn-card h3{margin-top:22px}.next-move{display:flex;align-items:center;gap:17px;margin:26px 0;padding:18px;background:#233328}.next-move>span{width:57px;height:57px;background:var(--lime);color:#1a281a;display:grid;place-items:center;font:28px Georgia,serif}.next-move b,.next-move small{display:block}.next-move b{font-size:13px}.next-move small{font-size:10px;color:#9caf9d;margin-top:6px}.card-button{width:100%;display:flex;align-items:center;justify-content:space-between;color:#e4efdc;background:transparent}.algorithm-list{margin-top:24px}.algorithm-list button{width:100%;display:flex;justify-content:space-between;align-items:center;text-align:left;border:1px solid #3a4c3d;background:#202e24;color:var(--lime);padding:13px 15px;margin-top:7px}.algorithm-list b,.algorithm-list small{display:block}.algorithm-list b{font-size:12px;color:#e6ede0}.algorithm-list small{font:12px monospace;color:#a5bc9d;margin-top:5px}footer{border-top:1px solid var(--line);padding:25px 0 35px;display:flex;justify-content:space-between;color:#718174;font:10px monospace}footer a{color:var(--lime);text-decoration:none}@media(max-width:850px){.workspace{grid-template-columns:1fr}.control-panel{border-left:0;border-top:1px solid var(--line)}.stage{height:430px}.intro{padding-top:50px}.top-caption{display:none}}@media(max-width:600px){main{padding:0 16px}.topbar{padding:0 16px;height:60px}.brand{font-size:9px}.intro{padding:48px 0 30px}.intro-index{display:none}h1{font-size:60px}.intro p{font-size:13px}.stage-panel,.control-panel{padding:22px 18px}.stage{height:330px}.stage-actions button{padding:0 9px;font-size:11px}.learn{padding:75px 0}.learn-grid{grid-template-columns:1fr}.learn-card{padding:24px}.learn-heading h2{font-size:38px}footer span:nth-child(2){display:none}.setting-label span+span{font-size:8px}.moves{gap:4px}}

.layer-row{display:flex;justify-content:space-between;align-items:center;margin-top:15px;color:#9bad9d;font:9px monospace;letter-spacing:.09em}.layer-row div{display:flex;gap:5px}.layer-row button{min-width:30px;height:28px;background:#202d24;color:#b9cbb8;border:1px solid #405044}.layer-row button.active{background:#d1e89c;color:#1d2a1c;border-color:#d1e89c}.method-note{border-top:1px solid var(--line);margin-top:20px;padding-top:18px}.method-note b{font-size:12px;color:#e2ebdd}.method-note p{color:#9aab9b;font-size:11px;line-height:1.7;margin-top:8px}

.step-panel[hidden]{display:none}.step-panel{background:#203027;border:1px solid #526b55;margin-top:15px;padding:18px}.step-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#b9d0ad;font:10px monospace;letter-spacing:.1em}.step-heading button{border:0;background:none;color:#bbcdb8;font:11px sans-serif}.step-body{display:flex;align-items:center;gap:15px;margin:16px 0}.step-symbol{width:52px;height:52px;display:grid;place-items:center;background:var(--lime);color:#1a281a;font:26px Georgia,serif;flex-shrink:0}.step-body b{display:block;color:#e5ede0;font-size:12px;line-height:1.5}.step-body p{color:#a5b8a3;font-size:11px;margin:5px 0 0}.step-actions{display:flex;gap:8px}.step-actions button{min-height:40px;padding:0 14px;border:1px solid #80977a;color:#e6efdf;background:transparent;font-size:11px}.step-actions button:last-child{flex:1;background:var(--lime);border-color:var(--lime);color:#1b291a;font-weight:600}@media(max-width:1100px){.stage-actions{flex-wrap:wrap}.stage-actions #start-steps{flex:1 1 100%;order:4}}@media(max-width:600px){.step-panel{padding:14px}.step-actions button{padding:0 9px}}

.sizes{grid-template-columns:repeat(5,1fr)}@media(max-width:400px){.sizes{grid-template-columns:repeat(3,1fr)}}

.solver-feedback{display:flex;align-items:center;justify-content:space-between;gap:12px}.solver-feedback button{border:0;background:transparent;color:var(--lime);font-size:11px;text-decoration:underline;margin-top:13px}.solver-feedback button[hidden]{display:none}

.solution-progress{height:4px;background:#425447;margin:0 0 16px;overflow:hidden}.solution-progress span{display:block;height:100%;width:0;background:var(--lime);transition:width .15s ease}.step-actions{flex-wrap:wrap}.step-actions #step-play{flex:1 1 100%;background:transparent;color:#e6efdf;border-color:#80977a}.step-body #step-count{color:#c1d3ba;margin-top:4px}

.step-body .step-unit{font-size:10px;color:#899e8c;line-height:1.5}

.thinking[hidden]{display:none}.thinking{position:absolute;top:28px;left:28px;display:flex;gap:12px;align-items:center;padding:11px 15px;background:#17241def;border:1px solid #829a74;color:#eaf1e4;box-shadow:0 8px 24px #0004;z-index:2;pointer-events:none}.thinking b,.thinking small{display:block}.thinking b{font-size:11px;font-weight:600}.thinking small{font-size:10px;color:#acc0a7;margin-top:4px}.thinking__spinner{position:relative;width:29px;height:29px;border:2px solid #708a724d;border-top-color:var(--lime);border-right-color:var(--lime);border-radius:50%;animation:thinking-spin 1s linear infinite}.thinking__spinner i{position:absolute;inset:8px;background:#c8df95;transform:rotate(45deg);border-radius:2px}@keyframes thinking-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.thinking__spinner{animation:none;border-color:var(--lime);border-left-color:#708a724d}}@media(max-width:600px){.thinking{top:22px;left:22px;padding:9px 11px}}

/* Navigation commune aux autres Labs. */
.cube-page .nav{background:rgba(8,11,10,.92);border-bottom:1px solid #ffffff12}.cube-page main>.intro{padding-top:145px}@media(max-width:600px){.cube-page main>.intro{padding-top:116px}}

.cube-floating[hidden]{display:none}.cube-floating{position:fixed;left:18px;bottom:18px;z-index:45;width:258px;background:#17231c;border:1px solid #60785f;box-shadow:0 15px 45px #0009;color:#eef2e8}.cube-floating__head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;color:#b7c8b3;font:10px monospace;letter-spacing:.08em}.cube-floating__head b{color:#e9f1df;font-weight:500;margin-left:7px}.cube-floating__head button{background:none;border:0;color:#e2ebda;font:20px Arial;line-height:1;cursor:pointer}.cube-floating__view{height:220px;background:radial-gradient(ellipse at 50% 45%,#35483b,#1c2a20 75%);overflow:hidden}.cube-floating__view #canvas{height:100%;width:100%}.cube-floating__return{display:block;width:100%;border:0;border-top:1px solid #3b4f3d;background:none;color:#cfe39f;text-align:left;font:11px Arial,sans-serif;padding:10px 12px;cursor:pointer}.cube-floating__return:hover{background:#263a2b}.cube-floating button:focus-visible{outline:2px solid var(--lime);outline-offset:-3px}@media(max-width:600px){.cube-floating{left:10px;bottom:10px;width:165px}.cube-floating__head{padding:7px 9px;font-size:9px}.cube-floating__view{height:145px}.cube-floating__return{font-size:10px;padding:7px 9px}}

@media(min-width:1100px){.cube-page.cube-floating-active .learn{padding-left:280px}.cube-floating{left:max(18px,calc((100vw - 1440px)/2 + 5vw))}}
@media(max-width:1099px){.cube-floating{left:auto;right:12px;top:88px;bottom:auto}}
@media(max-width:600px){.cube-floating{left:auto;right:10px;top:88px;bottom:auto;width:145px}.cube-floating__view{height:125px}}