:root{font-family:Arial,Helvetica,sans-serif;color:#203b32;background:#f4f3ed;font-synthesis:none}*{box-sizing:border-box}body{margin:0}a{color:inherit}button,a.button{font:inherit;cursor:pointer}button:disabled{cursor:wait;opacity:.55}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #ba8526;outline-offset:4px}header{display:flex;align-items:center;justify-content:space-between;padding:30px 6vw}.brand{text-decoration:none;font-size:24px;letter-spacing:-1px;font-weight:750;display:flex;align-items:center;gap:5px}.brand-dot{width:7px;height:7px;border-radius:50%;background:#a6bb6b;margin-top:12px}.eyebrow{text-transform:uppercase;font-size:11px;letter-spacing:1.8px;font-weight:600}.hero{max-width:1200px;margin:55px auto 0;padding:0 6vw}.hero h1{font-size:clamp(56px,7.7vw,108px);line-height:1;letter-spacing:-.065em;font-weight:500;margin:28px 0}.hero h1 em{font-style:normal;color:#78875d}.hero>p{max-width:480px;color:#64726a;font-size:18px;line-height:1.65;margin:30px 0}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:36px;border:0;border-radius:5px;padding:17px 24px;background:#244638;color:#fff;text-decoration:none}.button:hover{background:#345a46}.caption{font-size:12px;color:#68736c;line-height:1.6;margin:14px 0 0}.milestone{border-top:1px solid #cdd2c6;display:grid;grid-template-columns:1fr 1fr;gap:50px;margin-top:70px;padding:35px 0}.milestone h2{font-size:28px;font-weight:500;letter-spacing:-1px;margin:12px 0}.milestone p{font-size:15px;line-height:1.7;color:#64726a;margin:0}.landing-footer{display:flex;justify-content:space-between;padding:30px 6vw;font-size:12px;color:#67776a;border-top:1px solid #dcdfd5}.simulator{overflow:hidden}#viewport{position:fixed;inset:0}canvas{display:block;touch-action:none}.sim-header{position:fixed;inset:0 0 auto;padding:22px 28px;background:#f4f3eded;gap:20px}.test-label{font-size:14px}.test-label span{display:block;color:#67756c;font-size:11px;margin-top:4px}.simulator button:not(.button){background:#f4f3ed;border:1px solid #c5cec3;border-radius:5px;padding:10px 14px;font-size:12px;color:#244638}.hud{position:fixed;bottom:90px;left:28px;display:flex;align-items:center;gap:24px;background:#f4f3edf5;padding:18px 25px;border-radius:8px;min-width:175px}.hud>div{display:flex;flex-direction:column;gap:3px}.hud strong{font-size:40px;line-height:1;font-weight:500;font-variant-numeric:tabular-nums}.hud span{font-size:11px;color:#67756c}.hud b{font-size:17px}.sim-tools{position:fixed;right:28px;bottom:90px;display:flex;gap:8px}.controls{position:fixed;bottom:0;inset-inline:0;display:flex;justify-content:center;flex-wrap:wrap;gap:12px 24px;padding:18px;background:#f4f3ed;font-size:12px}.controls span{display:flex;align-items:center;gap:5px}kbd{font:11px Arial,sans-serif;background:white;border:1px solid #ccd2c9;border-bottom-width:2px;border-radius:4px;padding:4px 6px;min-width:22px;text-align:center}.overlay{position:fixed;inset:0;display:grid;place-items:center;background:#182c325c;backdrop-filter:blur(3px)}.overlay[hidden]{display:none}.dialog{max-width:430px;margin:20px;padding:36px;background:#f4f3ed;border-radius:10px;box-shadow:0 20px 80px #172e3a33}.dialog h1{font-size:32px;letter-spacing:-1px;line-height:1.1;margin:20px 0}.dialog>p:not(.caption){font-size:15px;line-height:1.6;color:#64726a}.dialog .button{width:100%;margin-top:10px}.dialog>a{display:inline-block;margin-top:18px;font-size:12px}@media(max-width:700px){header{padding:24px}.hero{margin-top:36px;padding:0 24px}.milestone{grid-template-columns:1fr;gap:16px;margin-top:45px}.landing-footer{gap:20px;padding:24px}.sim-header{padding:16px}.sim-header .brand{font-size:19px}.test-label{font-size:11px}.hud{left:12px;bottom:138px;padding:12px}.sim-tools{left:12px;right:auto;bottom:86px}.controls{gap:8px;font-size:10px;padding:12px}.dialog{padding:26px}}

.attribution{position:fixed;right:28px;top:94px;font-size:10px;background:#f4f3edef;padding:7px 10px;border-radius:3px}.attribution a{text-decoration:none}.attribution a:hover{text-decoration:underline}

.mode-label{display:block;font-size:12px;margin:20px 0 8px}.mode-label select{display:block;width:100%;padding:12px;margin-top:8px;border:1px solid #c5cec3;border-radius:5px;background:white;color:#244638;font:inherit}.exercise-status{position:fixed;top:135px;left:28px;max-width:330px;padding:14px 18px;border-left:3px solid #78875d;border-radius:4px;background:#f4f3edf5;font-size:14px;line-height:1.5}.exercise-status[hidden]{display:none}

.mode-label[hidden]{display:none}

/* The environment name is a bold line above the sub-label, so the drive view
   always says which world the exercise runs in. */
.test-label b{display:block;font-weight:600;font-size:14px;color:#203b32}
.test-label b[hidden]{display:none}

/* Signal readout for the intersection exercises. One row of lamps, the same
   three colours the model shows, so the HUD and the 3D view agree. */
.signal-readout{position:fixed;top:135px;right:28px;display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:6px;background:#f4f3edf5;font-size:11px;color:#4d5b54}
.signal-readout[hidden]{display:none}
.signal-row{display:flex;align-items:center;gap:8px}
.signal-row b{font-weight:600;color:#203b32;min-width:34px}
.signal-lamp{width:12px;height:12px;border-radius:50%;border:1px solid #0003;background:#cfd4cb}
.signal-lamp[data-lit=true][data-colour=red]{background:#ee3a42}
.signal-lamp[data-lit=true][data-colour=yellow]{background:#ffd51d}
.signal-lamp[data-lit=true][data-colour=green]{background:#258d63}
.indicator-readout{position:fixed;bottom:184px;left:28px;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:6px;background:#f4f3edf5;font-size:11px;color:#4d5b54}
.indicator-readout[hidden]{display:none}
.indicator-text{min-width:170px;text-align:center}
.indicator-lamp{width:14px;height:14px;border-radius:3px;border:1px solid #0003;background:#cfd4cb}
.indicator-lamp[data-lit=true]{background:#ffb000}
@media(max-width:700px){.indicator-readout{bottom:auto;top:120px;left:12px;right:12px;justify-content:center}}
/* Short viewports: the dialog scrolls inside itself instead of growing over the
   HUD and the key legend, and the fixed panels are pulled closer together. */
@media(max-height:660px){
 .dialog{max-height:calc(100vh - 20px);overflow-y:auto;padding:22px;margin:10px}
 .dialog h1{font-size:24px;margin:12px 0}
 .dialog>p:not(.caption){font-size:14px;line-height:1.5}
 .exercise-status{top:94px;max-width:300px;padding:10px 12px;font-size:13px}
 .indicator-readout{bottom:158px}
 .hud{bottom:74px;padding:12px 16px;min-width:150px}
 .hud strong{font-size:30px}
 .sim-tools{bottom:74px}
 .controls{padding:10px;gap:8px 16px;font-size:11px}
}
@media(max-height:480px){
 .exercise-status{display:none}
 .indicator-readout{bottom:auto;top:78px}
}
.dialog-links{margin:10px 0 0;font-size:12px;color:#5d6a63;line-height:1.6}
.dialog-links[hidden]{display:none}
.dialog-links a{color:#244638}
@media(max-width:700px){.signal-readout{top:auto;bottom:150px;right:12px;left:12px}}

.mirror-frame{position:fixed;top:130px;left:50%;transform:translateX(-50%);width:clamp(220px,34vw,340px);aspect-ratio:3.2;border:4px solid #26332e;border-radius:7px;pointer-events:none;box-shadow:0 3px 10px #0005}.mirror-frame[hidden]{display:none}.mirror-frame span{position:absolute;bottom:4px;left:8px;color:white;font-size:10px;text-shadow:0 1px 3px black}.simulator button[aria-pressed=true]{border-color:#54765c;background:#e2eadb}.sim-tools button[hidden]{display:none}body[data-mirror=on] .exercise-status{top:250px}

.side-mirror{top:auto;bottom:220px;width:clamp(130px,18vw,210px);aspect-ratio:5/3;transform:none}.left-mirror{left:24px}.right-mirror{left:auto;right:24px}@media(max-width:700px){.side-mirror{bottom:240px}.left-mirror{left:12px}.right-mirror{right:12px}}

/* Drive view additions: library link, access badge, dialogue notes and the
   end-of-run summary. Same palette as the rest of the simulator. */
.header-link{font-size:12px;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.header-link:hover{opacity:.75}
.access-badge{font-size:11px;background:#fdf3d8;border:1px solid #e2c98b;color:#6b5620;padding:10px 12px;border-radius:4px;margin:14px 0 0}
.access-badge[hidden]{display:none}
.dialog-notes{margin:14px 0 0;padding-left:16px;font-size:12px;color:#5d6a63;line-height:1.6}
.dialog-notes[hidden]{display:none}
.dialog-notes li{margin:6px 0}

.summary{margin-top:22px;border-top:1px solid #cdd2c6;padding-top:18px;display:flex;flex-direction:column;gap:18px;max-height:46vh;overflow:auto}
.summary[hidden]{display:none}
.summary h2{font-size:12px;text-transform:uppercase;letter-spacing:1.4px;color:#5d6a63;margin:0 0 10px}
.summary ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.criterion{display:flex;flex-direction:column;gap:3px;font-size:12px;line-height:1.5;border-left:3px solid #cdd2c6;padding-left:10px}
.criterion-head{font-size:10px;text-transform:uppercase;letter-spacing:1.1px;color:#5d6a63}
.criterion-passed{border-left-color:#6f9a5f}
.criterion-needsPractice{border-left-color:#b3792c}
.criterion-incomplete{border-left-color:#9aa39a}
.criterion-none{border-left-color:#cdd2c6;color:#5d6a63}
.summary dl{display:grid;grid-template-columns:1fr auto;gap:6px 14px;margin:0;font-size:12px}
.summary dt{color:#5d6a63}
.summary dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.summary-practice{font-size:12px;margin:0;padding:12px 14px;background:#eef2e6;border-radius:4px}
.summary-source{font-size:11px;margin:0}
.summary-source[hidden]{display:none}
@media(max-width:700px){.summary{max-height:38vh}.header-link{display:none}}

/* A link styled as a button keeps its own display value, so [hidden] has to be
   enforced explicitly or the element stays visible. */
.dialog a.button[hidden],.dialog button[hidden]{display:none}
.exercise-cue{position:fixed;left:50%;bottom:130px;transform:translateX(-50%);max-width:calc(100vw - 32px);padding:13px 20px;border:1px solid #9aa98e;border-radius:6px;background:#f4f3edf5;color:#244638;font-size:16px;font-weight:600;text-align:center;pointer-events:none}.exercise-cue[hidden]{display:none}.exercise-cue[data-active=true]{background:#fff3cf;border-color:#c98a25;color:#563809}@media(max-width:700px){.exercise-cue{bottom:230px;font-size:14px;width:max-content}}
.light-readout{position:fixed;left:28px;bottom:230px;padding:8px 12px;border-radius:6px;background:#f4f3edf5;font-size:12px;color:#244638}.light-readout[hidden]{display:none}@media(max-width:700px){.light-readout{left:12px;bottom:200px}}
/* Long exercise instructions must remain reachable at every viewport height. */
.overlay .dialog{max-height:calc(100dvh - 40px);overflow-y:auto;overscroll-behavior:contain}
@media(min-width:701px){.light-readout{left:290px;bottom:184px}}@media(min-width:701px) and (max-height:780px){.light-readout{bottom:158px}}

/* Phone pairing stays available both before driving and in the driving tools. */
#phone-pairing{width:min(440px,calc(100vw - 32px));max-height:90dvh;overflow:auto;border:1px solid #b8c8bb;border-radius:16px;padding:24px;color:#183626;background:#f7f9f5;box-shadow:0 12px 80px #0005;font:inherit}
#phone-pairing::backdrop{background:#10251ed0}#phone-pairing h2{font-size:24px;margin:0 0 12px}#phone-pairing p{font-size:14px;line-height:1.5}#phone-pairing button{margin:4px;padding:10px;min-height:44px}#phone-qr svg{display:block;width:240px;max-width:100%;height:auto;margin:16px auto}#phone-status{font-weight:600}#phone-live-status{font-size:12px;align-self:center;max-width:240px}

select{appearance:none}summary{list-style:none}summary::marker{content:''}summary::-webkit-details-marker{display:none}summary::after{content:'+';margin-left:12px}details[open]>summary::after{content:'−'}