/* The simulator look: the world fills the screen, and dark glass panels in the brand ink and blue sit on top of it. */
:root{--ink:#15233b;--ink-2:#0d1729;--glass:rgba(13,23,41,.72);--glass-2:rgba(21,35,59,.86);--line:rgba(255,255,255,.14);--line-2:rgba(255,255,255,.26);--blue:#2563eb;--blue-2:#5b9bff;--text:#f4f7fc;--dim:#b3bfd2;--ok:#2ecc83;--warn:#ffb020;--bad:#ff5a4d;--r:16px;--safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);font-family:Inter,"Segoe UI",system-ui,-apple-system,"Noto Sans Arabic","Geeza Pro",sans-serif}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--ink-2);color:var(--text);overflow:hidden;-webkit-text-size-adjust:100%}
button,select,input{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:inherit}
h1,h2,h3,p{margin:0}
.hidden{display:none!important}
:focus-visible{outline:2px solid var(--blue-2);outline-offset:2px}
.ico{flex:none;vertical-align:-.2em}
#scene{position:fixed;inset:0;width:100%;height:100%;display:block;outline:none;touch-action:none}
#rain-layer{position:fixed;inset:0;pointer-events:none;z-index:1}
#labels{position:fixed;inset:0;pointer-events:none;z-index:2;overflow:hidden}
.w-label{position:absolute;left:0;top:0;padding:3px 8px;border-radius:7px;background:rgba(10,18,32,.82);border:1px solid var(--line-2);font-size:12px;font-weight:600;white-space:nowrap;will-change:transform}
.w-label.react{color:#ffd27a}.w-label.brake{color:#ff9d94}.w-label.blind{color:#ffc36b;background:rgba(70,30,0,.82)}
/* Header */
#header{position:fixed;z-index:20;top:0;inset-inline:0;display:flex;align-items:center;gap:14px;padding:calc(12px + var(--safe-t)) calc(20px + var(--safe-r)) 28px calc(20px + var(--safe-l));background:linear-gradient(180deg,rgba(8,15,28,.94) 62%,rgba(8,15,28,0));pointer-events:none}
#header>*{pointer-events:auto}
body[data-page=drive] #header,body[data-page=boot] #header{display:none}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:#fff;font-weight:700;letter-spacing:-.01em}
.brand-mark{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;background:var(--blue);color:#fff;font-weight:800;font-size:15px;line-height:1}
.brand-mark span{font-size:12px;margin-inline-start:1px}
.brand-mark.big{width:58px;height:58px;font-size:28px;border-radius:16px}.brand-mark.big span{font-size:22px}
.brand-mark.small{width:34px;height:34px}
#nav{display:flex;gap:2px;margin-inline-start:12px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
#nav::-webkit-scrollbar{display:none}
.nav-btn{display:flex;align-items:center;gap:7px;padding:8px 12px;border-radius:10px;color:var(--dim);font-size:14px;font-weight:600;white-space:nowrap;transition:background .15s,color .15s}
.nav-btn:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav-btn.on{color:#fff;background:rgba(37,99,235,.42)}
.header-actions{display:flex;gap:8px;align-items:center;flex:none}
.ltd-back{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.1);color:#fff;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}
.ltd-back:hover{background:rgba(255,255,255,.18)}
/* Pages */
#page{position:fixed;inset:0;z-index:10;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--blue-2);margin-bottom:8px}
[dir=rtl] .eyebrow{letter-spacing:0}
.lead{color:var(--dim);font-size:16px;line-height:1.55;max-width:60ch}
.fineprint{font-size:12px;color:#93a1b6;line-height:1.5;margin-top:16px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:9px 16px;border-radius:11px;font-weight:650;font-size:15px;text-decoration:none;transition:transform .12s,background .15s,border-color .15s}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--blue);color:#fff}.btn.primary:hover{background:#1d55d4}
.btn.ghost{background:rgba(255,255,255,.08);border:1px solid var(--line-2);color:#fff}.btn.ghost:hover{background:rgba(255,255,255,.16)}
.btn.big{min-height:54px;padding:12px 22px;font-size:16px;flex-wrap:wrap}
.btn.big small{flex-basis:100%;text-align:center;font-weight:500;font-size:13px;opacity:.85;margin-top:-2px}
.btn:disabled{cursor:default;opacity:.72}
.btn.right{background:rgba(46,204,131,.26);border-color:var(--ok);opacity:1}
.btn.wrong{background:rgba(255,90,77,.24);border-color:var(--bad);opacity:1}
/* Home: the live town stays visible behind a scrim. */
.home{min-height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,330px);align-items:end;gap:28px;padding:96px calc(36px + var(--safe-r)) 34px calc(36px + var(--safe-l));background:linear-gradient(90deg,rgba(8,15,28,.84),rgba(8,15,28,.42) 52%,rgba(8,15,28,.1)),linear-gradient(0deg,rgba(8,15,28,.62),rgba(8,15,28,0) 42%)}
[dir=rtl] .home{background:linear-gradient(270deg,rgba(8,15,28,.84),rgba(8,15,28,.42) 52%,rgba(8,15,28,.1)),linear-gradient(0deg,rgba(8,15,28,.62),rgba(8,15,28,0) 42%)}
.home h1{font-size:clamp(38px,6.1vw,78px);line-height:1.02;letter-spacing:-.03em;font-weight:800;max-width:13ch;margin-bottom:16px}
[dir=rtl] .home h1{letter-spacing:0;line-height:1.16}
.home .lead{font-size:clamp(16px,1.5vw,19px);color:#d6deeb}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 22px}
.home-facts{display:flex;flex-wrap:wrap;gap:24px;list-style:none;padding:0;margin:0;color:var(--dim);font-size:13px}
.home-facts b{display:block;color:#fff;font-size:24px;font-weight:750;line-height:1.1}
.stage-rail{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px}
.stage-rail button{width:100%;display:grid;grid-template-columns:1fr auto;gap:0 10px;padding:11px 14px;border-radius:12px;background:var(--glass);border:1px solid var(--line);text-align:start;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:background .15s}
.stage-rail button:hover{background:var(--glass-2)}
.stage-rail b{font-size:14px;font-weight:700}
.stage-rail span{grid-row:2;color:var(--dim);font-size:12px;line-height:1.35}
.stage-rail i{grid-row:1/3;grid-column:2;align-self:center;font-style:normal;font-weight:700;color:var(--blue-2);font-size:14px}
.stage-rail .done i{color:var(--ok)}
/* Panels */
.panel{max-width:1120px;margin:0 auto;padding:88px calc(24px + var(--safe-r)) 56px calc(24px + var(--safe-l))}
body:not([data-page=home]):not([data-page=garage]):not([data-page=drive]):not([data-page=brief]):not([data-page=debrief]) #page{background:rgba(9,17,31,.8);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.panel-head{margin-bottom:28px}
.panel-head h1,.brief h1,.deb-card h1,.garage h1{font-size:clamp(28px,3.6vw,42px);font-weight:800;letter-spacing:-.02em;line-height:1.1;margin-bottom:10px}
[dir=rtl] .panel-head h1,[dir=rtl] .brief h1,[dir=rtl] .deb-card h1,[dir=rtl] .garage h1{letter-spacing:0;line-height:1.25}
.panel-head .btn{margin-top:16px}
.stage-block{margin-top:30px}
.stage-block h2{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;font-size:19px;font-weight:750;margin-bottom:12px}
.stage-block h2>span{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;background:var(--blue);font-size:13px;align-self:center}
.stage-block h2 small{font-weight:500;font-size:14px;color:var(--dim)}
.mission-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:10px}
.mission{display:flex;gap:12px;padding:14px;border-radius:var(--r);background:rgba(255,255,255,.055);border:1px solid var(--line);text-align:start;transition:background .15s,border-color .15s,transform .15s}
.mission:hover{background:rgba(255,255,255,.1);border-color:var(--line-2);transform:translateY(-1px)}
.mission.next{border-color:var(--blue-2);background:rgba(37,99,235,.2)}
.mission.done .m-ico{color:var(--ok)}
.m-ico{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.08);color:var(--blue-2)}
.m-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.m-body b{font-size:15px;font-weight:700}
.m-body>span{color:var(--dim);font-size:13px;line-height:1.4}
.m-body em{font-style:normal;font-size:12px;color:#93a1b6;margin-top:3px}
.m-body em strong{color:#fff}
/* Signs */
.sign-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.sign-card{display:flex;gap:14px;padding:14px;border-radius:var(--r);background:rgba(255,255,255,.055);border:1px solid var(--line);align-items:flex-start}
.sign-card.seen{border-color:rgba(46,204,131,.5)}
.sign-card small{color:var(--dim);font-size:12px}
.sign-card b{display:block;margin:2px 0 4px;font-size:15px}
.sign-card p{font-size:13px;color:#cfd8e6;line-height:1.45}
.sign-art{flex:none;display:block;width:68px;height:68px;border-radius:10px;background:#d9e1ea;padding:4px}
.sign-art canvas{display:block;width:100%;height:100%}
.quiz{display:flex;gap:18px;align-items:flex-start;padding:18px;border-radius:var(--r);background:rgba(37,99,235,.18);border:1px solid var(--blue-2);margin-bottom:12px}
.quiz .sign-art{width:104px;height:104px}
.quiz.done{align-items:center;justify-content:space-between;flex-wrap:wrap}
.quiz small{color:var(--dim);font-size:12px}.quiz b{display:block;font-size:17px;margin:2px 0 10px}
.quiz-opts{display:flex;flex-wrap:wrap;gap:8px}
.quiz p{font-size:14px;color:#dbe4f1;margin-top:10px;line-height:1.45}
/* Lab */
.lab-grid{display:grid;grid-template-columns:minmax(230px,300px) 1fr;gap:18px}
.lab-controls,.lab-out,.lab-rule,.prog-card{padding:18px;border-radius:var(--r);background:rgba(255,255,255,.055);border:1px solid var(--line)}
.lab-controls{display:flex;flex-direction:column;gap:16px}
.lab-controls label{display:block;font-size:14px;font-weight:600}
.lab-controls output{float:inline-end;color:var(--blue-2);font-weight:700}
input[type=range]{display:block;width:100%;margin-top:10px;accent-color:var(--blue-2)}
.seg{display:flex;background:rgba(0,0,0,.25);border-radius:10px;padding:3px;gap:3px}
.seg button{flex:1;padding:8px 6px;border-radius:8px;font-size:13px;font-weight:600;color:var(--dim)}
.seg button.on{background:var(--blue);color:#fff}
#lab-canvas{display:block;width:100%;height:190px}
.lab-num{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.lab-num div{padding:10px;border-radius:10px;background:rgba(0,0,0,.2)}
.lab-num b{display:block;font-size:22px;font-weight:800}
.lab-num span{font-size:12px;color:var(--dim)}
.lab-num div:nth-child(1) b{color:#ffc14d}.lab-num div:nth-child(2) b{color:#ff7a6e}.lab-num .tot b{color:var(--blue-2)}
.lab-insight{margin-top:12px;font-size:15px;line-height:1.5;color:#fff;font-weight:550}
.lab-rule{margin-top:18px}
.lab-rule h2{font-size:18px;margin-bottom:10px}
.lab-rule ul{margin:0 0 14px;padding-inline-start:18px;color:#dbe4f1;font-size:14px;line-height:1.65}
/* Garage: the car stays in view, so the panel takes one side only. */
.garage{min-height:100%;display:flex;padding:84px calc(24px + var(--safe-r)) 28px calc(24px + var(--safe-l))}
.garage-card{width:min(400px,100%);padding:20px;border-radius:18px;background:var(--glass-2);border:1px solid var(--line);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);align-self:flex-start}
.garage h3{font-size:13px;color:var(--dim);margin:16px 0 8px;font-weight:600}
.specs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:14px 0}
.specs div{padding:7px;border-radius:9px;background:rgba(0,0,0,.2)}
.specs dt{font-size:11px;color:var(--dim)}.specs dd{margin:0;font-size:13px;font-weight:700;white-space:nowrap}
.car-list{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.car-list button{padding:8px 3px;border-radius:9px;background:rgba(255,255,255,.07);border:1px solid transparent;font-size:12.5px;font-weight:650;min-width:0}
.car-list small{display:block;font-size:10px;font-weight:500;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.car-list .on{border-color:var(--blue-2);background:rgba(37,99,235,.32)}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.swatches button{width:30px;height:30px;border-radius:50%;border:2px solid rgba(255,255,255,.3)}
.swatches .on{border-color:#fff;box-shadow:0 0 0 2px var(--blue-2)}
.settings{display:flex;flex-direction:column;gap:9px;font-size:14px}
.settings label{display:flex;align-items:center;justify-content:space-between;gap:12px}
.settings select{min-width:136px;padding:6px 8px;border-radius:8px;background:rgba(0,0,0,.34);border:1px solid var(--line-2)}
.settings select option{color:#111}
.settings .check{justify-content:flex-start}
.settings input[type=checkbox]{width:17px;height:17px;accent-color:var(--blue-2);flex:none}
/* Progress */
.prog-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.radar{display:block;width:100%;max-width:380px;margin:0 auto 10px}
.radar .r-grid{fill:none;stroke:rgba(255,255,255,.14)}
.radar .r-val{fill:rgba(91,155,255,.32);stroke:var(--blue-2);stroke-width:2}
.radar text{fill:#dbe4f1;font-size:10.5px}
.prog-card p{margin-bottom:12px;color:#dbe4f1;line-height:1.45;font-size:14px}
.prog-card h3{font-size:16px;margin-bottom:10px}
.hist{list-style:none;padding:0;margin:0 0 12px}
.hist button{display:grid;grid-template-columns:1fr auto;width:100%;gap:0 10px;padding:8px 2px;text-align:start;border-bottom:1px solid var(--line)}
.hist b{font-size:14px}.hist span{font-size:12px;color:var(--dim);grid-row:2}
.hist i{grid-row:1/3;grid-column:2;align-self:center;font-style:normal;font-weight:750;color:var(--warn)}
.hist i.ok{color:var(--ok)}
/* Brief */
.brief{min-height:100%;display:flex;align-items:center;padding:calc(20px + var(--safe-t)) calc(24px + var(--safe-r)) 20px calc(24px + var(--safe-l));background:linear-gradient(90deg,rgba(8,15,28,.72),rgba(8,15,28,.08) 70%)}
[dir=rtl] .brief{background:linear-gradient(270deg,rgba(8,15,28,.72),rgba(8,15,28,.08) 70%)}
.brief-card{width:min(520px,100%);padding:22px 24px;border-radius:20px;background:var(--glass-2);border:1px solid var(--line);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.link-back{display:inline-flex;align-items:center;gap:5px;color:var(--dim);font-size:13px;font-weight:600;margin-bottom:12px}
.link-back:hover{color:#fff}
[dir=rtl] .link-back .ico,[dir=rtl] .ltd-back .ico{transform:scaleX(-1)}
.rule-list{margin:14px 0;padding:0;list-style:none;counter-reset:r;display:flex;flex-direction:column;gap:9px}
.rule-list li{counter-increment:r;position:relative;padding-inline-start:32px;font-size:14.5px;line-height:1.45;color:#e6ecf5}
.rule-list li::before{content:counter(r);position:absolute;inset-inline-start:0;top:0;width:22px;height:22px;border-radius:7px;background:rgba(37,99,235,.42);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.de-term{font-size:13px;color:var(--dim);margin-bottom:14px}
.de-term b{color:#fff}
.brief-go{display:flex;flex-wrap:wrap;gap:8px}
.brief-go .btn.primary{flex:1 1 200px}
.keys{margin-top:12px;font-size:13px;color:var(--dim)}
.keys summary{cursor:pointer;font-weight:600;padding:4px 0}
.key-table{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;margin-top:6px}
.key-table div{display:flex;justify-content:space-between;align-items:center;gap:8px}
kbd{font:inherit;font-size:11.5px;font-weight:650;padding:1px 6px;border-radius:5px;background:rgba(255,255,255,.12);white-space:nowrap}
@media(pointer:coarse){.keys{display:none}}
/* Driving HUD */
#hud{position:fixed;inset:0;z-index:12;pointer-events:none}
#hud button{pointer-events:auto}
.h-top{position:absolute;top:calc(12px + var(--safe-t));inset-inline-start:calc(14px + var(--safe-l));display:flex;gap:10px;align-items:center;max-width:46vw}
.h-btn{width:40px;height:40px;border-radius:12px;background:var(--glass);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex:none;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.h-mission{min-width:0;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.h-mission b{display:block;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#h-steps{display:flex;gap:4px;margin-top:4px}
#h-steps i{display:block;width:18px;height:4px;border-radius:2px;background:rgba(255,255,255,.3);box-shadow:0 1px 2px rgba(0,0,0,.4)}
#h-steps i.d{background:var(--ok)}#h-steps i.c{background:var(--blue-2)}
#view-toolbar{position:fixed;z-index:13;top:calc(12px + var(--safe-t));inset-inline-end:calc(14px + var(--safe-r));display:flex;gap:6px;align-items:center}
#view-toolbar>button{padding:0 11px;height:34px;border-radius:10px;background:var(--glass);border:1px solid var(--line);font-size:12.5px;font-weight:600;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#view-toolbar>button.on{background:var(--blue);border-color:transparent}
.ltd-record{height:34px;padding:0 11px;border-radius:10px;background:var(--glass);border:1px solid var(--line);font-size:12.5px;font-weight:600;color:#fff}
.h-nav{position:absolute;top:calc(14px + var(--safe-t));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:11px;padding:8px 16px 8px 9px;border-radius:15px;background:var(--glass-2);border:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.nv-ico{display:flex;width:38px;height:38px;align-items:center;justify-content:center;border-radius:10px;background:var(--blue)}
.h-nav b{display:block;font-size:15px;font-weight:700;line-height:1.1}
.h-nav small{font-size:12px;color:var(--dim)}
.h-coach{position:absolute;bottom:calc(112px + var(--safe-b));left:50%;transform:translateX(-50%);width:min(620px,calc(100vw - 36px));text-align:center;font-size:16px;line-height:1.38;font-weight:550;color:#fff}
.h-coach span{display:inline;padding:4px 10px;border-radius:8px;background:rgba(9,17,31,.74);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.h-coach.pulse span{animation:coach .5s ease-out}
@keyframes coach{from{background:rgba(37,99,235,.92)}to{background:rgba(9,17,31,.74)}}
.h-feedback{position:absolute;top:calc(74px + var(--safe-t));left:50%;transform:translate(-50%,-8px);width:max-content;max-width:min(560px,calc(100vw - 32px));padding:9px 15px;border-radius:12px;font-size:14px;line-height:1.38;font-weight:550;opacity:0;transition:opacity .22s,transform .22s;background:var(--glass-2);border:1px solid var(--line)}
.h-feedback.show{opacity:1;transform:translate(-50%,0)}
.h-feedback.good{background:rgba(9,78,48,.92);border-color:var(--ok)}
.h-feedback.warn,.h-feedback.note{background:rgba(92,58,4,.94);border-color:var(--warn)}
.h-feedback.bad,.h-feedback.urgent{background:rgba(120,24,18,.95);border-color:var(--bad)}
.h-feedback b{margin-inline-end:4px}
.h-sign{position:absolute;top:calc(68px + var(--safe-t));inset-inline-start:calc(14px + var(--safe-l));display:flex;gap:11px;width:min(306px,42vw);padding:10px;border-radius:13px;background:var(--glass-2);border:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:signin .28s ease-out}
@keyframes signin{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
[dir=rtl] .h-sign{animation-name:signinr}
@keyframes signinr{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
.h-sign .sign-art{width:54px;height:54px;padding:2px}
.h-sign small{font-size:11px;color:var(--dim)}.h-sign em{font-style:normal;color:var(--ok);font-weight:700}
.h-sign b{display:block;font-size:13.5px;margin:1px 0 2px}
.h-sign p{font-size:12px;color:#cfd8e6;line-height:1.35}
.h-look{position:absolute;top:44%;left:50%;transform:translateX(-50%);padding:6px 14px;border-radius:10px;background:rgba(255,176,32,.92);color:#231500;font-weight:750;font-size:14px}
.h-cluster{position:absolute;bottom:calc(18px + var(--safe-b));left:50%;transform:translateX(-50%);direction:ltr;display:flex;align-items:center;gap:13px;padding:9px 16px;border-radius:20px;background:var(--glass-2);border:1px solid var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.sig{width:36px;height:36px;border-radius:10px;font-size:15px;color:rgba(255,255,255,.3);background:rgba(255,255,255,.05)}
.sig.on{color:#3bf08e;background:rgba(46,204,131,.2)}
.speed{display:flex;flex-direction:column;align-items:center;min-width:66px;line-height:1}
.speed strong{font-size:40px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.speed span{font-size:11px;color:var(--dim);margin-top:1px}
.limit{width:46px;height:46px;border-radius:50%;background:#fff;border:6px solid #d0261c;display:flex;align-items:center;justify-content:center;color:#141414;font-weight:800;font-size:16px;flex:none;font-variant-numeric:tabular-nums}
.limit.over{animation:over .7s infinite alternate}
@keyframes over{to{box-shadow:0 0 0 6px rgba(255,60,50,.55)}}
.gear-sel{display:flex;gap:2px;padding:3px;border-radius:12px;background:rgba(255,255,255,.07)}
.gear-sel button{min-width:32px;height:34px;padding:0 4px;border-radius:9px;color:rgba(255,255,255,.55);font-size:16px;font-weight:800;line-height:1;background:transparent}
.gear-sel button:hover{background:rgba(255,255,255,.12);color:#fff}
.gear-sel button.on{background:#fff;color:#10203a}
.gear-sel button.hint,.hand.hint{animation:hint 1s ease-in-out infinite alternate}
@keyframes hint{from{box-shadow:0 0 0 0 rgba(255,176,32,.9)}to{box-shadow:0 0 0 5px rgba(255,176,32,.55);color:#ffb020}}
.hand,.lamp{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:32px;padding:4px 3px;border-radius:9px;font-size:12px;font-weight:800;color:rgba(255,255,255,.34);background:transparent}
.hand:hover,.lamp:hover{background:rgba(255,255,255,.1)}
.hand.on{color:var(--bad)}.lamp.on{color:#5fc0ff}
.sig{position:relative}
.h-cluster kbd,.h-lookbtns kbd{font-size:9.5px;line-height:1.25;padding:0 4px;border-radius:4px;color:rgba(255,255,255,.75);background:rgba(255,255,255,.14);font-weight:700}
.sig kbd{position:absolute;right:-3px;bottom:-4px}
.h-lookbtns{position:absolute;bottom:calc(18px + var(--safe-b));inset-inline-start:calc(186px + var(--safe-l));display:flex;gap:5px;direction:ltr}
.h-lookbtns button{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:46px;padding:6px 6px 4px;border-radius:11px;font-size:13px;line-height:1.1;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);touch-action:none;user-select:none;-webkit-user-select:none}
.h-lookbtns button:hover{background:rgba(255,255,255,.14)}
.h-lookbtns button:active{background:rgba(255,176,32,.9);color:#231500}
.h-coach kbd{display:inline-block;min-width:1.5em;padding:0 .35em;margin:0 .1em;border-radius:5px;font-size:.88em;line-height:1.35;text-align:center;font-weight:750;color:#10203a;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.45)}
body.has-touch .h-lookbtns,body.has-touch .h-cluster kbd{display:none}
body.has-touch .gear-sel{background:none;padding:0}
body.has-touch .gear-sel button:not(.on){display:none}
@media(max-width:1320px){.h-lookbtns{bottom:calc(72px + var(--safe-b));inset-inline-start:auto;inset-inline-end:calc(16px + var(--safe-r))}}
@media(max-width:820px){.h-lookbtns{display:none}}
#h-map{position:absolute;bottom:calc(18px + var(--safe-b));inset-inline-start:calc(16px + var(--safe-l));width:158px;height:158px;border-radius:50%;box-shadow:0 6px 22px rgba(0,0,0,.42)}
.h-actions{position:absolute;bottom:calc(18px + var(--safe-b));inset-inline-end:calc(16px + var(--safe-r));display:flex;flex-direction:column;gap:6px;align-items:stretch}
#h-retry{background:var(--glass);border:1px solid var(--line);color:#dbe4f1;font-size:13.5px;min-height:38px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#h-finish{background:var(--glass);border:1px solid var(--line);color:#dbe4f1;font-size:13.5px;min-height:38px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#h-finish.ready{background:var(--ok);color:#04291a;border-color:transparent;animation:ready 1s infinite alternate}
@keyframes ready{to{box-shadow:0 0 0 7px rgba(46,204,131,.34)}}
.h-xray{position:absolute;inset-inline-end:calc(16px + var(--safe-r));bottom:calc(120px + var(--safe-b));width:250px;padding:10px;border-radius:14px;background:var(--glass-2);border:1px solid var(--line);direction:ltr}
.xray-svg{display:block;width:100%}
.xray-svg text{fill:var(--dim);font-size:10px}
.xray-svg circle{fill:rgba(255,255,255,.08);stroke:#fff;stroke-width:1.5}
.xray-svg path{stroke:#fff;stroke-width:2.5;fill:none}
.xray-svg .x-shaft{stroke:rgba(255,255,255,.4)}
.xray-svg rect{fill:#7f8ea3}.xray-svg rect.lock{fill:var(--ok)}.xray-svg rect.bite{fill:var(--warn)}.xray-svg rect.free{fill:#7f8ea3}
#x-note{font-size:12.5px;color:#dbe4f1;margin-top:4px;text-align:center}#x-note b{font-variant-numeric:tabular-nums}
/* Modals */
#modal-root:empty{display:none}
#modal-root{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(6,12,22,.52)}
.decide{width:min(540px,100%);max-height:100%;overflow:auto;padding:22px;border-radius:20px;background:var(--ink);border:1px solid var(--line-2);box-shadow:0 24px 70px rgba(0,0,0,.5)}
.decide h2{font-size:21px;font-weight:750;line-height:1.28;margin-bottom:14px}
.dec-opts{display:flex;flex-direction:column;gap:8px}
.dec-opts .btn{justify-content:flex-start;text-align:start}
#dec-why{margin:14px 0;font-size:14.5px;line-height:1.5;color:#e6ecf5}
#dec-go{width:100%}
.toast{position:fixed;z-index:40;bottom:calc(168px + var(--safe-b));left:50%;transform:translate(-50%,8px);padding:9px 15px;border-radius:12px;background:var(--ink);border:1px solid var(--line-2);font-size:14px;font-weight:600;opacity:0;transition:.2s;pointer-events:none;max-width:calc(100vw - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0)}
/* Debrief */
.debrief{min-height:100%;padding:calc(72px + var(--safe-t)) calc(24px + var(--safe-r)) 28px calc(24px + var(--safe-l));display:flex;align-items:flex-start}
.deb-card{width:min(560px,100%);padding:22px 24px;border-radius:20px;background:var(--glass-2);border:1px solid var(--line);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.deb-top{display:flex;gap:18px;align-items:center;margin:6px 0 14px}
.ring{--c:var(--ok);flex:none;width:92px;height:92px;border-radius:50%;background:conic-gradient(var(--c) calc(var(--p)*1%),rgba(255,255,255,.12) 0);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}
.ring.low{--c:var(--warn)}
.ring::before{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--ink)}
.ring b,.ring small{position:relative}
.ring b{font-size:28px;font-weight:800;line-height:1}.ring small{font-size:11px;color:var(--dim)}
.deb-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:6px;margin:0 0 12px}
.deb-stats div{padding:8px;border-radius:10px;background:rgba(0,0,0,.2)}
.deb-stats dd{margin:0;font-weight:750;font-size:15px;white-space:nowrap}.deb-stats dt{font-size:11px;color:var(--dim)}
.deb-note{padding:10px 12px;border-radius:10px;background:rgba(37,99,235,.2);font-size:14px;line-height:1.45;margin-bottom:10px}
.deb-card h3{font-size:14px;font-weight:700;margin:14px 0 8px}
.timeline{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}
.timeline button,.timeline li>span{display:flex;gap:9px;align-items:baseline;width:100%;padding:8px 10px;border-radius:9px;background:rgba(255,255,255,.055);text-align:start;font-size:13.5px;line-height:1.38}
.timeline button:hover{background:rgba(255,255,255,.11)}
.timeline .sel button{outline:1px solid var(--blue-2)}
.timeline time{flex:none;color:var(--dim);font-variant-numeric:tabular-nums;font-size:12px}
.timeline span{flex:1;min-width:0}
.timeline em{flex:none;font-style:normal;font-weight:750;color:var(--bad)}
.timeline .good time{color:var(--ok)}
.moment{margin-top:8px;padding:12px;border-radius:11px;background:rgba(37,99,235,.17);border:1px solid rgba(91,155,255,.4);font-size:14px;line-height:1.45}
.moment b{display:block;font-size:12px;color:var(--blue-2);margin-top:8px}.moment b:first-child{margin-top:0}
.skill-bars{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.skill-bars li{display:grid;grid-template-columns:118px 1fr;gap:10px;align-items:center;font-size:13px}
.skill-bars i{display:block;height:7px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden}
.skill-bars b{display:block;height:100%;background:var(--blue-2)}
.exam-q{margin-top:14px;padding:13px;border-radius:12px;background:rgba(255,255,255,.055)}
.exam-q h3{margin:0 0 4px;font-size:12px;color:var(--blue-2)}
.exam-q>p{font-size:15px;line-height:1.42;margin-bottom:9px}
.q-opts{display:flex;flex-direction:column;gap:6px}
.q-opts .btn{justify-content:flex-start;text-align:start;font-size:14px;min-height:36px;font-weight:550}
#q-exp{font-size:13.5px;color:#dbe4f1;margin:9px 0 0}
.exam-q small{display:block;color:#93a1b6;font-size:11.5px;margin-top:9px}
.deb-go{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.deb-go .btn.primary{flex:1 1 100%}
.replay-tag{position:fixed;bottom:calc(14px + var(--safe-b));inset-inline-end:calc(16px + var(--safe-r));padding:7px 12px;border-radius:10px;background:var(--glass);font-size:12.5px;font-weight:600;border:1px solid var(--line);display:none}
.debrief.replaying .replay-tag{display:block}
/* Boot and fallback */
#boot{position:fixed;inset:0;z-index:50;background:radial-gradient(circle at 50% 42%,#1d3155,var(--ink-2) 70%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;transition:opacity .55s}
#boot.gone{opacity:0;pointer-events:none}
#boot .wordmark{font-weight:700;margin-top:6px}
#boot h2{font-size:27px;font-weight:800;margin-top:8px;letter-spacing:-.01em}
.load-track{width:min(260px,70vw);height:4px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden;margin-top:12px}
.load-track i{display:block;width:40%;height:100%;background:var(--blue-2);border-radius:2px;animation:load 1.15s ease-in-out infinite alternate}
@keyframes load{from{transform:translateX(-30%)}to{transform:translateX(180%)}}
#boot-status{color:var(--dim);font-size:13px;margin-top:6px;min-height:18px}
#fatal{position:fixed;inset:0;z-index:60;background:var(--ink-2);display:flex;align-items:center;justify-content:center;padding:20px}
.fallback-card{width:min(440px,100%);padding:24px;border-radius:18px;background:var(--ink);border:1px solid var(--line)}
.fallback-card h1{font-size:22px;margin:12px 0 8px}.fallback-card p{color:var(--dim);line-height:1.5;margin-bottom:14px}
/* Touch */
#touch{position:fixed;z-index:14;inset:0;pointer-events:none;direction:ltr}
#touch button,.t-steer{pointer-events:auto;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;touch-action:none}
.t-steer{position:absolute;left:calc(14px + var(--safe-l));bottom:calc(16px + var(--safe-b));width:208px;height:84px;border-radius:42px;background:rgba(13,23,41,.52);border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center}
.t-steer i{display:block;width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.34);border:2px solid rgba(255,255,255,.65);transition:transform .08s}
.t-pedals{position:absolute;right:calc(14px + var(--safe-r));bottom:calc(16px + var(--safe-b));display:flex;gap:9px;align-items:flex-end}
.t-pedals button{width:76px;height:112px;border-radius:17px;background:rgba(13,23,41,.56);border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}
.t-pedals [data-p=brake]{height:84px;background:rgba(150,28,22,.62)}
.t-pedals [data-p=throttle]{background:rgba(22,110,66,.62)}
.t-pedals button.on{transform:scale(.96);filter:brightness(1.5)}
.t-mid{position:absolute;right:calc(14px + var(--safe-r));bottom:calc(138px + var(--safe-b));display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end;width:212px}
.t-mid button{width:48px;height:40px;border-radius:11px;background:rgba(13,23,41,.6);border:1px solid var(--line-2);font-size:13px;font-weight:700}
body.has-touch #h-map{bottom:auto;top:calc(62px + var(--safe-t));inset-inline-start:calc(14px + var(--safe-l));width:96px;height:96px}
body.has-touch .h-actions{top:calc(54px + var(--safe-t));bottom:auto;inset-inline-end:calc(14px + var(--safe-r));flex-direction:row}
body.has-touch .h-cluster{bottom:calc(10px + var(--safe-b));gap:8px;padding:6px 10px;border-radius:15px}
body.has-touch .h-cluster .sig{display:none}
body.has-touch .speed strong{font-size:27px}
body.has-touch .speed{min-width:44px}
body.has-touch .limit{width:36px;height:36px;border-width:4px;font-size:13px}
body.has-touch .gear{height:30px;min-width:30px;font-size:15px}
body.has-touch .h-coach{bottom:calc(72px + var(--safe-b));font-size:13.5px;width:min(320px,42vw)}
body.has-touch .h-xray,body.has-touch .h-sign{display:none}
/* Rotate hint: only on a portrait phone while driving. */
#rotate{display:none;position:fixed;inset:0;z-index:45;background:var(--ink-2);color:#fff;align-items:center;justify-content:center;flex-direction:column;gap:14px;font-weight:650;text-align:center;padding:24px}
#rotate::after{content:attr(data-text)}
.rotate-phone{width:42px;height:72px;border:3px solid #fff;border-radius:8px;animation:rot 1.8s ease-in-out infinite alternate}
@keyframes rot{to{transform:rotate(90deg)}}
@media(orientation:portrait) and (max-width:700px){body[data-page=drive] #rotate{display:flex}}
/* Responsive */
@media(max-width:1020px){.h-nav{top:calc(54px + var(--safe-t))}.h-feedback{top:calc(112px + var(--safe-t))}.h-sign{top:calc(60px + var(--safe-t));width:min(250px,36vw)}.h-sign p{display:none}}
body.cockpit .h-cluster .speed{display:none}
body.cockpit .h-cluster{padding:6px 10px;bottom:auto;left:auto;transform:none;top:calc(56px + var(--safe-t));right:calc(14px + var(--safe-r));gap:8px}
body.cockpit .limit{width:36px;height:36px;border-width:4px;font-size:13px}
body.cockpit .sig{width:30px;height:30px}
body.cockpit .h-coach{bottom:auto;top:calc(60px + var(--safe-t))}
body.cockpit .h-look{top:calc(100px + var(--safe-t))}
body.cockpit.has-touch .h-actions{top:calc(110px + var(--safe-t))}
body.looking .h-coach{visibility:hidden}
body.cockpit .toast{bottom:auto;top:calc(104px + var(--safe-t))}
html[dir=rtl] body.cockpit:not(.has-touch) #h-map{left:calc(16px + var(--safe-l));right:auto}
html[dir=rtl] body.cockpit:not(.has-touch) .h-lookbtns{left:calc(186px + var(--safe-l));right:auto}
body.cockpit:not(.has-touch) .h-actions{top:116px;bottom:auto;flex-direction:row}
html[dir=rtl] body.cockpit:not(.has-touch) .h-actions{right:calc(14px + var(--safe-r));left:auto}
body.looking .h-look{top:auto;bottom:calc(22px + var(--safe-b))}
@media(max-width:900px){.home{grid-template-columns:1fr;align-items:end;padding:84px calc(18px + var(--safe-r)) 22px calc(18px + var(--safe-l))}.stage-rail{display:none}.lab-grid,.prog-grid{grid-template-columns:1fr}#nav{margin-inline-start:0}.nav-btn span{display:none}.nav-btn{padding:9px}.wordmark{display:none}.nav-btn.on span{display:inline}#header{gap:6px;padding-inline:12px}.panel{padding-inline:16px;padding-top:72px}.brief,.garage,.debrief{padding-inline:12px}.sign-grid,.mission-grid{grid-template-columns:1fr}#h-map{width:112px;height:112px}.h-sign{width:min(250px,46vw)}.h-xray{width:180px}.garage{padding-top:64px}.skill-bars li{grid-template-columns:96px 1fr}.quiz{flex-direction:column}}
@media(max-height:520px){body[data-page=brief] #header{display:none}.home{padding-top:58px;padding-bottom:14px;align-items:center}.home h1{font-size:34px;margin-bottom:8px}.home .lead{font-size:14px}.cta{margin:12px 0}.home-facts,.fineprint{display:none}.brief{align-items:flex-start;padding-block:10px}.brief-card{padding:14px 16px}.brief h1{font-size:23px;margin-bottom:6px}.brief .lead{font-size:13.5px}.rule-list{margin:9px 0;gap:6px}.rule-list li{font-size:13px}.de-term{margin-bottom:9px}.brief-go .btn.big{min-height:44px;padding:8px 14px}.debrief,.panel{padding-top:56px}#header{padding-top:calc(6px + var(--safe-t));padding-bottom:12px}}
[dir=rtl] .specs dd,[dir=rtl] .deb-stats dd,[dir=rtl] .lab-num b{direction:ltr;unicode-bidi:isolate;text-align:right}[dir=rtl] .lab-controls output{direction:ltr;unicode-bidi:isolate}#lab-canvas{direction:ltr}
@media(max-width:1160px){.h-xray{bottom:calc(178px + var(--safe-b))}body.cockpit .h-xray{bottom:calc(226px + var(--safe-b))}}
@media(max-width:420px){.nav-btn.on span{display:none}.nav-btn{padding:8px 6px}#header{gap:2px;padding-inline:8px}.ltd-back{padding:8px 9px;font-size:13px}}
.ltd-challenge{position:fixed;top:calc(68px + var(--safe-t));inset-inline-start:50%;transform:translateX(-50%);z-index:30;padding:7px 14px;border-radius:999px;background:var(--glass-2);border:1px solid var(--line);color:#fff;font-size:13px;font-weight:700;white-space:nowrap;pointer-events:none}
[dir=rtl] .ltd-challenge{transform:translateX(50%)}
body[data-page=drive] .ltd-challenge{top:calc(58px + var(--safe-t))}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

.lim-pill{position:fixed;top:calc(12px + var(--safe-t,0px));left:50%;transform:translateX(-50%);z-index:30;padding:6px 14px;border-radius:999px;background:rgba(15,23,42,.82);color:#fff;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;pointer-events:none;white-space:nowrap}
.lim-pill.low{background:#b91c1c}
.lim-card{margin:14px 0;padding:14px;border-radius:14px;background:rgba(37,99,235,.2)}
.lim-card p{margin:6px 0 10px;font-size:14px;line-height:1.45}
.lim-card .dec-opts,.lim-offer .dec-opts{display:flex;flex-direction:column;gap:8px}
.lim-card a.btn,.lim-offer a.btn{text-align:center;text-decoration:none}
.lim-offer>p:not(.eyebrow):not(.fineprint){margin:0 0 14px;line-height:1.45}
.lim-used{color:#fca5a5}

.h-rep{position:absolute;top:calc(92px + var(--safe-t));left:50%;transform:translateX(-50%);display:flex;gap:6px;padding:6px 8px;border-radius:999px;background:rgba(13,23,41,.82)}
.h-rep i{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.14)}
.h-rep[data-p=red] i[data-l=red],.h-rep[data-p=redamber] i[data-l=red]{background:#ef4444}
.h-rep[data-p=amber] i[data-l=amber],.h-rep[data-p=redamber] i[data-l=amber]{background:#f59e0b}
.h-rep[data-p=green] i[data-l=green]{background:#22c55e}
body[data-page=drive] .analytics-consent{display:none}