:root{--ink:#ece7dc;--ink-dim:#b7b1a4;--bg:#161410;--stage:#0e0d0b;--paper:#f4efe4;--paper-ink:#2a261f;--paper-mute:#6d675c;--line:#d8d0c2;--accent:#c45c26;--ok:#2f7d4a;--plastic:#1c1a18}*{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}html,body,#app{background:var(--bg);height:100dvh;color:var(--ink);font-family:Figtree,system-ui,sans-serif}body{overflow:hidden}#app{grid-template-rows:auto minmax(0,1fr) auto;min-height:100%;display:grid}.topbar{padding:calc(14px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) 10px calc(20px + env(safe-area-inset-left));border-bottom:1px solid #2a2622;justify-content:space-between;align-items:center;gap:12px 16px;display:flex}.brand{align-items:center;gap:12px;display:flex}.brand-mark{background-blend-mode:multiply;background:linear-gradient(#c62828 0 33%,#f4f1ea 33% 66%,#2e7d32 66%),linear-gradient(90deg,#ef6c00 0 50%,#0000 50%);border-radius:4px;width:28px;height:28px;box-shadow:inset 0 0 0 2px #1c1a18}.brand h1{letter-spacing:-.02em;font-family:Fraunces,Georgia,serif;font-size:1.35rem;font-weight:560;line-height:1}.brand p{color:var(--ink-dim);margin-top:3px;font-size:.78rem}.top-status{flex-wrap:wrap;gap:8px;display:flex}.pill{letter-spacing:.04em;text-transform:uppercase;color:var(--ink-dim);border:1px solid #3a3530;border-radius:999px;padding:4px 9px;font-family:IBM Plex Mono,monospace;font-size:.72rem}.pill.ok{color:#b7e0c4;border-color:#2f7d4a}.pill.busy{color:#f0c9a8;border-color:var(--accent)}.pill.muted{opacity:.8}.about-btn{letter-spacing:.04em;text-transform:uppercase;border:1px solid var(--accent);color:#f0c9a8;background:0 0;border-radius:999px;padding:4px 11px;font-family:IBM Plex Mono,monospace;font-size:.72rem}.about-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}.lang-select{max-width:9.5rem;color:var(--ink);background:#1c1a18;border:1px solid #3a3530;border-radius:999px;padding:4px 8px;font-family:Figtree,Noto Sans SC,Noto Sans JP,Noto Sans KR,Noto Naskh Arabic,sans-serif;font-size:.78rem}html[lang=zh] body,html[lang=zh] h1,html[lang=zh] h2,html[lang=zh] h3,html[lang=zh] h4,html[lang=zh] .about-btn,html[lang=zh] .lang-select,html[lang=zh] .hint,html[lang=zh] .pill{font-family:Noto Sans SC,Figtree,sans-serif}html[lang=ja] body,html[lang=ja] h1,html[lang=ja] h2,html[lang=ja] h3,html[lang=ja] h4,html[lang=ja] .about-btn,html[lang=ja] .lang-select,html[lang=ja] .hint,html[lang=ja] .pill{font-family:Noto Sans JP,Figtree,sans-serif}html[lang=ko] body,html[lang=ko] h1,html[lang=ko] h2,html[lang=ko] h3,html[lang=ko] h4,html[lang=ko] .about-btn,html[lang=ko] .lang-select,html[lang=ko] .hint,html[lang=ko] .pill{font-family:Noto Sans KR,Figtree,sans-serif}html[lang=ar] body,html[lang=ar] h1,html[lang=ar] h2,html[lang=ar] h3,html[lang=ar] h4,html[lang=ar] .about-btn,html[lang=ar] .lang-select,html[lang=ar] .hint,html[lang=ar] .pill{font-family:Noto Naskh Arabic,Figtree,sans-serif}html[dir=rtl] .moves,html[dir=rtl] .path,html[dir=rtl] .brand h1{direction:ltr}.about-overlay{z-index:40;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0e0d0bcc;place-items:center;padding:24px 16px;display:grid;position:fixed;inset:0}.about-overlay[hidden]{display:none!important}.about-dialog{background:var(--paper);width:min(860px,100%);max-height:min(88vh,920px);color:var(--paper-ink);border:1px solid #d9d1c3;grid-template-rows:auto minmax(0,1fr);display:grid;box-shadow:0 24px 64px #0006}.about-head{border-bottom:1px solid var(--line);justify-content:space-between;align-items:flex-start;gap:16px;padding:20px 22px 14px;display:flex}.about-kicker{letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-family:IBM Plex Mono,monospace;font-size:.66rem}.about-head h2{margin-top:4px;font-family:Fraunces,Georgia,serif;font-size:1.45rem;font-weight:560}.about-close{border-radius:999px;min-height:0;font-size:.82rem;font-weight:600;color:var(--paper-ink)!important;background:#fff!important;border:1.5px solid #2a261f!important;padding:6px 14px!important}.about-close:hover{color:#f4efe4!important;background:#2a261f!important}.about-body{padding:8px 22px 24px;overflow:auto}.about-contact,.about-sources{padding:14px 0 8px}.about-contact{border-bottom:1px solid var(--line)}.about-body h3{font-family:Fraunces,Georgia,serif;font-size:1.22rem;font-weight:560}.about-body h4{letter-spacing:.08em;text-transform:uppercase;color:var(--paper-mute);margin:16px 0 8px;font-size:.78rem;font-weight:600}.about-role,.about-pitch,.about-lead,.about-meta{color:var(--paper-ink);margin-top:8px;font-size:.92rem;line-height:1.5}.about-meta,.about-lead{color:var(--paper-mute);font-size:.84rem}.about-body a{color:var(--accent)}.about-body a:hover{text-decoration:underline}.about-links{flex-wrap:wrap;gap:8px;margin-top:14px;display:flex}.about-links a{color:#1c1914;background:#fff;border:1.5px solid #2a261f;border-radius:999px;padding:7px 13px;font-size:.8rem;font-weight:600;text-decoration:none}.about-links a:hover{background:var(--accent);border-color:var(--accent);color:#fff;text-decoration:none}.about-sources ul{gap:8px;padding-left:18px;display:grid}.about-sources li{color:var(--paper-ink);font-size:.88rem;line-height:1.45}.about-sources code,.help-section code{font-family:IBM Plex Mono,monospace;font-size:.8em}.help-section{border-bottom:1px solid var(--line);padding:14px 0 8px}.help-section:last-child{border-bottom:0;padding-bottom:0}.help-list{gap:8px;margin-top:10px;padding:0;list-style:none;display:grid}.help-list li{grid-template-columns:1.5rem minmax(0,1fr);align-items:start;gap:8px;font-size:.9rem;line-height:1.45;display:grid}.workspace{grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);min-height:0;display:grid;overflow:hidden}.stage{background:var(--stage);min-height:0;position:relative;overflow:hidden}#cube-canvas,#robot-canvas{cursor:grab;touch-action:none;width:100%;height:100%;display:block}#graph-canvas{touch-action:pan-y}#cube-canvas.dragging{cursor:grabbing}.cursor{pointer-events:none;z-index:3;border:2px solid #f4efe4;border-radius:50%;width:18px;height:18px;margin:-9px 0 0 -9px;position:absolute}.cursor.pinch{background:#c45c26aa}.cursor.hidden{display:none}.stage-hud{pointer-events:none;position:absolute;inset:0}.hint{color:#9c9588;text-align:center;text-wrap:balance;font-size:.78rem;line-height:1.35;position:absolute;bottom:10px;left:12px;right:12px}.cam-box{pointer-events:none;background:#000;border:1px solid #3a3530;width:220px;display:none;position:absolute;top:14px;left:14px}.cam-box.on{display:block}#webcam,#hands-overlay{object-fit:cover;width:100%;height:124px;display:block;transform:scaleX(-1)}#hands-overlay{position:absolute;top:0;left:0}.touchpad{color:#8d8678;letter-spacing:.12em;background:#141210aa;border-top:1px solid #3a3530;place-items:center;height:92px;font-family:IBM Plex Mono,monospace;font-size:.62rem;display:grid}.paper{background:var(--paper);color:var(--paper-ink);border-left:1px solid #d9d1c3;grid-template-rows:auto minmax(0,1fr) auto;min-height:0;display:grid;overflow:hidden}.paper-head{padding:16px 20px 10px}.paper-title-row{justify-content:space-between;align-items:center;gap:12px;display:flex}.paper-head h2{font-family:Fraunces,Georgia,serif;font-size:1.18rem;font-weight:560}.paper-head p a{color:var(--accent)}.view-tabs{background:#e5dfd3;border-radius:999px;flex-shrink:0;padding:3px;display:flex}.view-tabs [role=tab]{letter-spacing:.02em;border-radius:999px;min-height:0;font-size:.75rem;font-weight:600;color:var(--paper-ink)!important;opacity:1!important;background:0 0!important;border:0!important;padding:6px 12px!important}.view-tabs [role=tab][aria-selected=true]{box-shadow:0 1px 2px #2a261f1f;background:#fff!important}.view-tabs [role=tab]:hover:not([aria-selected=true]){background:#ece6da!important}.viz-stage{background:var(--paper);min-height:0;position:relative;overflow:hidden}.viz-canvas{opacity:0;visibility:hidden;pointer-events:none;z-index:0;width:100%;height:100%;display:block;position:absolute;inset:0}.viz-canvas.is-active{opacity:1;visibility:visible;pointer-events:auto;z-index:1}#graph-canvas{background:var(--paper)}#robot-canvas{background:#e8edf1}.robot-hud{z-index:2;pointer-events:none;justify-content:space-between;align-items:flex-end;gap:10px;display:flex;position:absolute;bottom:12px;left:12px;right:12px}.robot-hud[hidden]{display:none!important}.robot-hud a{pointer-events:auto}.robot-kicker{letter-spacing:.12em;color:#6a7380;font-family:IBM Plex Mono,monospace;font-size:.62rem;display:block}.robot-hud strong{color:#1b2430;font-size:.92rem;display:block}.robot-link{color:#3d4a5c;background:#ffffffd8;border:1px solid #c9d2dc;border-radius:999px;padding:5px 10px;font-size:.68rem;text-decoration:none}.robot-link:hover{border-color:#8aa0b8}.solution{z-index:3;border-top:1px solid var(--line);background:#f7f3ea;padding:14px 18px 16px;position:relative;box-shadow:0 -10px 18px #f4efe4e6}.solution-head{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.solution-head h3{font-family:Fraunces,Georgia,serif;font-size:1.05rem}.solution-meta{color:var(--paper-mute);white-space:nowrap;flex-direction:column;align-items:flex-end;gap:2px;font-family:IBM Plex Mono,monospace;font-size:.68rem;display:flex}#sol-progress{color:var(--paper-ink);font-weight:500}.cayley{color:var(--paper-mute);margin-top:3px;font-size:.75rem;line-height:1.35}.path-wrap{max-height:4.8em;margin-top:10px;overflow-y:auto}.path{flex-wrap:wrap;gap:5px;min-height:28px;display:flex}.path:empty:before{content:"Aucun chemin — mélangez puis lancez le solveur ou le robot.";color:var(--paper-mute);font-size:.78rem}.path .chip{color:var(--paper-ink);cursor:pointer;background:#fff;border:1px solid #ddd4c4;border-radius:6px;padding:4px 8px;font-family:IBM Plex Mono,monospace;font-size:.72rem}.path .chip:hover{border-color:var(--accent)}.path .chip.done{color:#f4efe4;background:#2f7d4a;border-color:#2f7d4a}.path .chip.now{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 0 0 3px #c45c262e}.progress-track{background:#e2d8c8;border-radius:99px;height:3px;margin:10px 0 12px;overflow:hidden}.progress-fill{background:var(--accent);border-radius:99px;width:0;height:100%;transition:width .25s}.transport{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.icon-btn{border-radius:999px;min-height:38px;font-size:.82rem;font-weight:600;color:#1c1914!important;opacity:1!important;background:#fff!important;border:1.5px solid #2a261f!important;padding:7px 14px!important}.icon-btn:hover:not(:disabled){color:#f4efe4!important;background:#2a261f!important}.icon-btn:disabled{color:#6d675c!important;background:#efe9dc!important;border-color:#b7ae9f!important}.icon-btn.play{color:#fff!important;background:#c45c26!important;border-color:#c45c26!important}.icon-btn.play:hover:not(:disabled){background:#a44b1d!important;border-color:#a44b1d!important}.icon-btn.play:disabled{color:#fff!important;background:#d9a078!important;border-color:#d9a078!important}.icon-btn.robot{margin-left:auto;color:#f4efe4!important;background:#1c1914!important;border-color:#1c1914!important}.icon-btn.robot:hover:not(:disabled){color:#fff!important;background:#c45c26!important;border-color:#c45c26!important}.toolbar{padding:10px calc(16px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));z-index:8;background:#12100e;border-top:1px solid #2a2622;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.cluster{flex-wrap:wrap;gap:6px;display:flex}button{color:var(--ink);cursor:pointer;touch-action:manipulation;background:0 0;border:1px solid #3f3a34;padding:7px 12px;font-family:Figtree,sans-serif;font-size:.85rem;font-weight:500}button:hover:not(:disabled){border-color:#cbbba8}button:disabled{opacity:.4;cursor:default}button.primary{background:var(--accent);border-color:var(--accent);color:#fff}.moves button{min-width:40px;padding:7px 8px;font-family:IBM Plex Mono,monospace}@media (pointer:coarse){button{min-height:44px}.view-tabs [role=tab]{min-height:40px;padding:8px 14px!important}.path .chip{align-items:center;min-height:36px;display:inline-flex}.about-links a{align-items:center;min-height:44px;display:inline-flex}}@media (width<=960px){body{overflow:auto}#app{grid-template-rows:auto auto auto;height:auto;min-height:100svh}.topbar{flex-wrap:wrap;align-items:flex-start}.brand p{display:none}.brand h1{font-size:1.15rem}.top-status{gap:6px}.workspace{display:block;overflow:visible}.stage{height:min(56dvh,560px);min-height:260px}.paper{border-top:1px solid #d9d1c3;border-left:0;flex-direction:column;min-height:0;display:flex;overflow:visible}.viz-stage{flex:none;height:min(46dvh,420px);min-height:240px}.paper-head{padding:14px 16px 8px}.paper-head h2{font-size:1.05rem}.paper-head p{font-size:.88rem;line-height:1.4}.solution{padding:12px 14px 14px}.icon-btn.robot{margin-left:0}.cam-box{width:min(168px,46vw);top:10px;left:10px}#webcam,#hands-overlay{height:96px}.touchpad{letter-spacing:.08em;height:52px}.hint{-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:.72rem;display:-webkit-box;overflow:hidden}.toolbar{gap:8px;display:grid;position:sticky;bottom:0}.cluster{grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.moves{grid-template-columns:repeat(6,minmax(0,1fr))}.toolbar button,.icon-btn{min-height:44px}.moves button{width:100%;min-width:0;padding:8px 0}.about-overlay{align-items:stretch;padding:0}.about-dialog{border:0;width:100%;min-height:100%;max-height:100%}.about-head,.about-body{padding-left:16px;padding-right:16px}}@media (width<=420px){.stage{height:min(50dvh,420px)}.paper-title-row{align-items:flex-start}}@media (orientation:landscape) and (height<=540px){body{overflow:hidden}#app{grid-template-rows:auto minmax(0,1fr) auto;height:100dvh;min-height:0;overflow:hidden}.brand p{display:none}.workspace{grid-template-columns:minmax(0,1.15fr) minmax(220px,.9fr);min-height:0;display:grid;overflow:hidden}.stage{height:auto;min-height:0}.paper{border-top:0;border-left:1px solid #d9d1c3;grid-template-rows:auto minmax(0,1fr) auto;min-height:0;display:grid;overflow:hidden}.paper-head{padding:8px 12px 4px}.paper-head p,.cayley{display:none}.viz-stage{flex:unset;height:auto;min-height:0}.solution{padding:8px 10px}.solution-head h3{font-size:.95rem}.cam-box{width:112px}#webcam,#hands-overlay{height:64px}.touchpad{height:28px}.hint{display:none}.toolbar{padding-top:6px;padding-bottom:calc(6px + env(safe-area-inset-bottom));flex-wrap:nowrap;gap:6px;display:flex;position:static;overflow-x:auto}.cluster{flex-wrap:nowrap;display:flex}.moves{display:flex}.toolbar button,.icon-btn{min-height:36px;padding:4px 8px}.moves button{width:auto;min-width:36px}}
