:root{color-scheme:dark;--ink:#f6f5ef;--muted:#a8b4bb;--panel:#172129f5;--line:#ffffff1e;--accent:#ffab45;--safe-top:max(14px,env(safe-area-inset-top));--safe-bottom:max(12px,env(safe-area-inset-bottom));--edge-left:max(12px,env(safe-area-inset-left));--edge-right:max(12px,env(safe-area-inset-right));font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;background:#101820;color:var(--ink)}
button{font:inherit;color:inherit;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:focus-visible,a:focus-visible,[role=slider]:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
button:active{filter:brightness(1.12)}
.app{position:relative;width:100%;max-width:600px;height:100vh;height:100dvh;min-height:0;margin:auto;overflow:hidden;isolation:isolate;background:#454e52}
#course{display:block;width:100%;height:100%;touch-action:manipulation}
/* Framing belongs to the HUD. No post-processing pass, blur or animated filter. */
.app::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(#0b141d76,transparent 24%,transparent 66%,#0b141d9e)}
.topbar{position:absolute;top:var(--safe-top);left:var(--edge-left);right:var(--edge-right);display:flex;align-items:center;justify-content:space-between;gap:8px;pointer-events:none;min-height:70px;padding:7px;background:linear-gradient(145deg,#1d2a34f7,#0d171ff7);border:1px solid #ffffff24;border-top-color:#ffffff38;border-radius:18px;box-shadow:0 8px 24px #07111b30,inset 0 -1px #0006}
.brand-button{display:flex;align-items:center;gap:9px;padding:0;text-align:left;pointer-events:auto;min-width:0;min-height:48px;background:transparent;border-radius:10px}
.brand-mark{display:block;width:44px;height:44px;border-radius:11px;object-fit:contain;flex:none;background:#000;border:1px solid #ffffff1a}
.brand-copy{display:block;min-width:0}
.brand-copy strong{display:block;font-size:1.025rem;line-height:1.2;font-weight:850;font-style:italic;letter-spacing:-.055em;white-space:nowrap;text-transform:uppercase}
.brand-copy small{display:block;margin-top:5px;color:#b4c1c6;font-size:.625rem;font-weight:550;line-height:1.2;letter-spacing:.075em;text-transform:uppercase;white-space:nowrap}
.instruments{display:flex;align-items:center;gap:9px;padding:0 4px 0 10px;font-variant-numeric:tabular-nums;flex:none;border-left:1px solid var(--line)}
.speed{display:flex;flex-direction:column;align-items:flex-end;min-width:50px}
.speed strong{font-size:2.3rem;line-height:1;font-weight:650;letter-spacing:-.065em}
.speed span{font-size:.625rem;line-height:1.3;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.gear{display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 7px;background:#07101999;border:1px solid #ffffff15;border-radius:9px;min-width:36px}
.gear span{font-size:.5rem;letter-spacing:.07em;color:var(--muted);line-height:1.25}
.gear strong{font-size:1.4rem;line-height:1;font-weight:650;color:var(--accent)}
.phase-chip{position:absolute;top:calc(var(--safe-top) + 82px);left:calc(var(--edge-left) + 2px);max-width:calc(100% - 154px);font-size:.75rem;line-height:1.4;font-weight:650;letter-spacing:.015em;color:#f0eee6;padding:7px 10px 7px 22px;background:#172129ed;border:1px solid #ffffff20;border-radius:7px;pointer-events:none;box-shadow:0 3px 10px #09131d20}
.phase-chip::before{content:"";position:absolute;left:10px;top:50%;width:4px;height:13px;background:var(--accent);transform:translateY(-50%);border-radius:2px}
.slow-clock{position:absolute;left:calc(var(--edge-left) + 2px);top:calc(var(--safe-top) + 129px);padding:9px 12px 10px;min-width:117px;border:1px solid #ffffff2a;border-radius:10px;background:linear-gradient(135deg,#24323bf2,#101b24f2);color:var(--ink);font-size:1.5rem;line-height:1.2;font-weight:600;letter-spacing:-.045em;font-variant-numeric:tabular-nums;pointer-events:none;box-shadow:0 4px 14px #07111b20}
.slow-clock::before{content:"LENT · CHRONO";display:block;margin-bottom:5px;color:#aebec6;font-size:.5625rem;font-weight:600;line-height:1;letter-spacing:.14em}
.slow-clock.finished{color:var(--accent)}
.slow-clock[hidden]{display:none}
/* The rail keeps a full 48 px gesture target, independently of its fine graphics. */
.scrub-zone{position:absolute;right:max(0px,env(safe-area-inset-right));top:calc(var(--safe-top) + 104px);bottom:calc(var(--safe-bottom) + 224px);width:48px;display:flex;flex-direction:column;align-items:center;user-select:none;-webkit-user-select:none}
.rail-label{font-size:.625rem;line-height:22px;font-weight:650;color:#f2f3ed;text-shadow:0 1px 5px #0b141c;letter-spacing:.09em}
.scrubber{position:relative;flex:1;width:100%;min-height:40px;touch-action:none;cursor:ns-resize;border-radius:12px}
.rail{position:absolute;top:22px;bottom:22px;left:calc(50% - 2px);width:4px;background:#101b25b3;border-radius:4px;overflow:hidden;box-shadow:0 0 0 1px #ffffff24}
.phase-segment{position:absolute;left:0;right:0;opacity:.5;border-bottom:2px solid #15202b}
.rail-progress{position:absolute;top:0;left:0;right:0;background:linear-gradient(#ffc66d,#ff9d32);opacity:.95}
.thumb{position:absolute;top:0;left:calc(50% - 15px);width:30px;height:44px;display:flex;gap:4px;align-items:center;justify-content:center;border:1px solid #ffe1a7;border-radius:10px;background:linear-gradient(130deg,#ffc16a,#ff9c33);box-shadow:0 3px 12px #07111c50,inset 0 1px #ffffff60;pointer-events:none;transition:opacity .14s}
.thumb i{width:2px;height:14px;border-radius:2px;background:#533c23}
.scrubbing .thumb{opacity:.15}.scrubbing .rail{opacity:.3}.scrubbing .rail-label{opacity:.4}
.context-line{position:absolute;left:calc(var(--edge-left) + 2px);right:64px;bottom:calc(var(--safe-bottom) + 181px);pointer-events:none}
.context-line p{position:relative;margin:0;display:inline-block;max-width:100%;background:linear-gradient(115deg,#182630f5,#101b24ee);border:1px solid #ffffff25;border-left:2px solid var(--accent);border-radius:4px 11px 11px 4px;padding:10px 13px 11px;font-size:.875rem;line-height:1.45;font-weight:540;box-shadow:0 6px 18px #07111c2a}
.context-line p::before{content:"EN PRATIQUE";display:block;margin-bottom:5px;color:#aebbc4;font-size:.5625rem;font-weight:650;letter-spacing:.16em;line-height:1.2}
.context-line output{position:absolute;bottom:calc(100% + 8px);left:0;font-size:.75rem;padding:6px 9px;border:1px solid #ffb45340;border-radius:7px;background:var(--panel);color:var(--accent);white-space:nowrap}
/* Camera choice above transport; named overlays remove guesswork on a phone. */
.toolbar{position:absolute;bottom:calc(var(--safe-bottom) + 49px);left:var(--edge-left);right:var(--edge-right);display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:9px;background:linear-gradient(155deg,#23303afc,#111b24fc);border:1px solid #ffffff28;border-top-color:#ffffff3b;border-radius:18px;box-shadow:0 10px 28px #04101c50,inset 0 -1px #0007}
.play-button{order:2;display:flex;align-items:center;justify-content:center;gap:8px;min-width:105px;height:52px;flex:1;border:1px solid #ffd394;border-radius:11px;background:linear-gradient(135deg,#ffbd61,#ff9731);color:#251e16;box-shadow:inset 0 1px #fff4,0 2px 7px #080f1640;font-size:.875rem;font-weight:750}
.play-button svg{width:23px;height:23px;fill:currentColor}
.view-switch{order:1;display:flex;align-items:center;flex-basis:100%;min-width:0;padding:3px;gap:3px;border:1px solid #ffffff0f;border-radius:10px;background:#08131d90}
.view-switch button{flex:1;min-width:0;min-height:38px;padding:0 6px;background:transparent;border-radius:7px;color:#aabac4;font-size:.6875rem;line-height:1;font-weight:700;letter-spacing:.07em}
.view-switch button[aria-pressed=true]{background:linear-gradient(#ecf0ee,#cdd8da);color:#14242d;box-shadow:0 1px 5px #0005,inset 0 1px #fff7}
.icon-button{width:48px;height:48px;flex:none;border-radius:10px;display:grid;place-items:center;background:#202e39;border:1px solid var(--line);color:#d8e2e8}
.toolbar .icon-button{order:2;display:flex;flex-direction:column;justify-content:center;gap:4px;width:58px;height:52px;border-radius:10px}
.icon-button span{font-size:.625rem;line-height:1.1;font-weight:600;letter-spacing:.01em}
.icon-button[aria-pressed=true]{color:#ffbd70;border-color:#ffc27a3b;background:#ffad450d;box-shadow:inset 0 -2px #ffac4570}
.icon-button[aria-pressed=false]{color:#9cabb5;background:#0c17204d;border-color:#ffffff0f;box-shadow:none}
.icon-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.free-camera #course{touch-action:none;cursor:grab}.free-camera #course:active{cursor:grabbing}
.mini-context{position:absolute;right:64px;top:calc(var(--safe-top) + 88px);width:18%;max-width:72px;pointer-events:none}
.map-toggle{display:grid;place-items:center;width:44px;height:40px;margin-left:auto;border-radius:9px;background:var(--panel);border:1px solid #ffffff24;pointer-events:auto;box-shadow:0 2px 8px #09131d25}
.map-toggle svg{width:18px;height:18px;fill:none;stroke:#c5d2d8;stroke-width:1.5;stroke-linejoin:round}
#minimap{display:block;width:100%;height:142px;border-radius:10px;background:linear-gradient(#1d2b35f0,#101b25f0);border:1px solid #ffffff29;pointer-events:none;margin-top:7px;box-shadow:0 5px 14px #07111b20}
#minimap[hidden]{display:none}
.mirror-button{position:absolute;left:calc(var(--edge-left) + 2px);bottom:var(--safe-bottom);display:flex;align-items:center;gap:7px;min-height:40px;padding:6px 11px;background:#111e28dc;border:1px solid #ffffff27;border-radius:9px;font-size:.75rem;color:#c9d5dc}
.mirror-button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mirror-button[aria-pressed=true]{border-color:#ffad5870;color:#ffd0a1}
.recenter{position:absolute;right:var(--edge-right);bottom:calc(var(--safe-bottom) + 183px);background:var(--panel)}
.recenter[hidden]{display:none}
.gesture-help{position:absolute;bottom:calc(var(--safe-bottom) + 271px);left:calc(var(--edge-left) + 2px);right:64px;margin:0;max-width:260px;color:#e8eff1;font-size:.75rem;line-height:1.4;text-shadow:0 1px 5px #0a141e;pointer-events:none;transition:opacity .25s}
.interacted .gesture-help,.free-camera .gesture-help{opacity:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
dialog{color:var(--ink);background:linear-gradient(150deg,#24323c,#121e28);border:1px solid #ffffff30;border-radius:22px;padding:30px 24px;width:min(480px,calc(100% - 28px));max-height:84dvh;box-shadow:0 20px 80px #05101aa8}
dialog::backdrop{background:#06101bc9}
.close{position:absolute;top:9px;right:9px;width:44px;height:44px;border-radius:12px;background:#ffffff0a;font-size:1.5rem}
.eyebrow{display:block;max-width:85%;font-size:.6875rem;font-weight:650;letter-spacing:.1em;color:var(--accent)}
dialog h1{font-size:1.85rem;line-height:1.12;letter-spacing:-.045em;margin:14px 0 24px}
dialog p{font-size:1rem;line-height:1.6;color:#c4d0d9;margin:14px 0}
dialog a{font-size:.875rem;color:#ffd0a1;text-underline-offset:4px}
dialog .small{font-size:.875rem;color:var(--muted)}
@media(max-width:374px){.brand-mark{width:36px;height:40px}.brand-button{gap:6px}.brand-copy strong{font-size:.875rem}.brand-copy small{font-size:.5rem}.instruments{gap:6px;padding-left:7px}.speed{min-width:43px}.speed strong{font-size:2rem}.gear{padding:5px}.toolbar{gap:6px;padding:8px}.toolbar .icon-button{width:49px}.play-button{min-width:96px;gap:5px}.mini-context{right:54px}.phase-chip{font-size:.6875rem;max-width:calc(100% - 135px)}}
@media(min-width:620px){.app{border-left:1px solid #ffffff16;border-right:1px solid #ffffff16}.topbar{left:20px;right:20px}.toolbar{left:20px;right:20px}.toolbar .icon-button{width:70px}.context-line{left:22px}.brand-copy strong{font-size:1.15rem}.brand-copy small{font-size:.6875rem}}
@media(prefers-reduced-motion:reduce){.thumb,.gesture-help{transition:none}}
/* One-row controls recover scene height on short landscape/standalone screens. */
@media(max-height:590px){
 .topbar{top:max(8px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));min-height:60px;padding:5px}
 .brand-mark{width:38px;height:38px}.speed strong{font-size:1.9rem}
 .phase-chip{display:none}.slow-clock{top:calc(max(8px,env(safe-area-inset-top)) + 72px);font-size:1.2rem;padding:8px 10px}
 .mini-context{top:calc(max(8px,env(safe-area-inset-top)) + 68px)}#minimap{height:110px}
 .toolbar{bottom:calc(max(8px,env(safe-area-inset-bottom)) + 45px);gap:5px;padding:6px}
 .mirror-button{bottom:max(4px,env(safe-area-inset-bottom))}
 .recenter{bottom:calc(max(8px,env(safe-area-inset-bottom)) + 118px)}
 .scrub-zone{top:calc(max(8px,env(safe-area-inset-top)) + 70px);bottom:calc(max(8px,env(safe-area-inset-bottom)) + 153px)}
 .context-line{bottom:calc(max(8px,env(safe-area-inset-bottom)) + 115px)}.context-line p{padding:7px 10px;font-size:.8125rem}.context-line p::before{display:none}.gesture-help{display:none}
 @media(min-width:440px){.toolbar{flex-wrap:nowrap}.view-switch{order:2;flex:1}.play-button{order:1;min-width:46px;flex:0;width:46px}.play-button span{display:none}.toolbar .icon-button{width:42px}.view-switch button{min-height:44px}}
 @media(max-width:439px){.context-line,.recenter{bottom:calc(max(8px,env(safe-area-inset-bottom)) + 172px)}.scrub-zone{bottom:calc(max(8px,env(safe-area-inset-bottom)) + 208px)}}
}