:root {
  --black:#050606;
  --ink:#0a0b0c;
  --ink2:#111315;
  --line:rgba(255,255,255,.15);
  --muted:#9aa0a4;
  --white:#f3f3f2;
  --red:#ef1b24;
  --lime:#baff38;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:var(--black);color:var(--white);overflow:hidden;color-scheme:dark}
body{font-family:Arial,Helvetica,sans-serif}
button{font:inherit}
button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.race-stage{position:relative;width:100vw;height:100svh;overflow:hidden;background:#0a0d0e;isolation:isolate}
#raceCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.stage-vignette{position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(180deg,rgba(0,0,0,.36) 0%,transparent 18%,transparent 72%,rgba(0,0,0,.5) 100%);box-shadow:inset 0 0 110px rgba(0,0,0,.42)}

/* Broadcast HUD: deliberately flat and compact, closer to live sport graphics than app cards. */
.broadcast-hud{position:absolute;z-index:8;left:18px;right:18px;top:16px;height:56px;display:flex;align-items:flex-start;pointer-events:none}
.broadcast-bug{width:150px;height:56px;background:#ededec;color:#090a0b;box-shadow:0 3px 12px rgba(0,0,0,.35)}
.bug-mark{height:34px;padding:6px 12px 0;font-weight:1000;font-style:italic;font-size:23px;letter-spacing:-.08em}
.bug-live{height:22px;display:flex;align-items:center;gap:7px;padding:0 11px;background:var(--red);color:#fff;font:900 9px/1 Arial,sans-serif;letter-spacing:.09em}
.bug-live i{width:6px;height:6px;border-radius:50%;background:#fff;opacity:.45}
.live-cell.is-live i,.bug-live.is-live i{opacity:1;box-shadow:0 0 8px #fff}
.session-strip{height:42px;margin-left:10px;display:flex;background:#101214;border-top:3px solid #e8e8e7;box-shadow:0 3px 12px rgba(0,0,0,.34)}
.session-strip>div{min-width:108px;padding:6px 12px 0;border-right:1px solid #323638}
.session-strip span{display:block;color:#8d9498;font:800 7px/1 Arial,sans-serif;letter-spacing:.12em}
.session-strip b{display:block;margin-top:5px;color:#f4f4f3;font:900 11px/1 Arial,sans-serif;letter-spacing:.02em}
.session-clock b{font-variant-numeric:tabular-nums}
.camera-tag{margin-left:auto;height:27px;padding:8px 10px 0;background:#0c0e0f;border-top:3px solid #e8e8e7;color:#b4b9bc;font:900 8px/1 Arial,sans-serif;letter-spacing:.11em;box-shadow:0 3px 12px rgba(0,0,0,.3)}
.camera-tag i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--red);margin-right:6px;vertical-align:1px}

.timing-tower{position:absolute;z-index:7;left:18px;top:84px;width:214px;background:#0a0c0d;box-shadow:0 5px 18px rgba(0,0,0,.38)}
.tower-title{height:29px;display:grid;grid-template-columns:35px 1fr;align-items:center;background:#e9e9e7;color:#0a0a0b;font:900 8px/1 Arial,sans-serif;letter-spacing:.06em}
.tower-title span{height:100%;display:grid;place-items:center;background:#151718;color:#fff}
.tower-title b{padding-left:10px}
.timing-row{position:relative;display:grid;grid-template-columns:33px 1fr 53px;gap:7px;align-items:center;height:39px;padding:0 9px 0 0;border-top:1px solid #242729;font:800 10px/1 Arial,sans-serif;background:#101214;transition:transform .2s ease}
.timing-row::before{content:"";position:absolute;left:33px;top:0;bottom:0;width:3px;background:var(--driver,#fff)}
.timing-row.is-leader{background:#181b1d}
.pos-num{height:100%;display:grid;place-items:center;background:#08090a;color:#fff;font-size:12px;font-weight:1000}
.driver-name{display:flex;align-items:center;gap:7px;min-width:0;padding-left:7px}
.driver-dot{width:9px;height:9px;border-radius:50%;flex:none;border:1px solid rgba(255,255,255,.5)}
.driver-name b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gap-time{text-align:right;color:#d2d5d6;font-size:9px;font-variant-numeric:tabular-nums}
.timing-row.is-leader .gap-time{color:var(--lime)}
.tower-footer{height:22px;padding:7px 9px 0;color:#7f878b;background:#070809;border-top:1px solid #26292b;font:800 7px/1 Arial,sans-serif;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.sector-progress{position:absolute;z-index:7;left:50%;bottom:18px;transform:translateX(-50%);width:min(740px,calc(100% - 320px));background:#090b0c;box-shadow:0 4px 16px rgba(0,0,0,.35)}
.sector-marks{height:26px;display:grid;grid-template-columns:repeat(7,1fr);border-top:3px solid #e8e8e7}
.sector-marks span{display:grid;place-items:center;border-right:1px solid #292c2e;color:#767d81;font:900 8px/1 Arial,sans-serif;letter-spacing:.05em}
.sector-marks span:last-child{border-right:0}
.sector-marks span.passed{color:#fff;background:#151719}
.sector-marks span.active{color:#fff;background:var(--red)}
.sector-line{height:4px;background:#26292b;overflow:hidden}
.sector-line span{display:block;width:0;height:100%;background:var(--red);transition:width .15s linear}

.race-message{position:absolute;z-index:9;left:50%;top:50%;transform:translate(-50%,-48%);width:min(650px,calc(100% - 44px));text-align:center;transition:opacity .25s ease,transform .25s ease}
.race-message.hidden{opacity:0;pointer-events:none;transform:translate(-50%,-44%)}
.intro-tag{display:inline-block;padding:7px 10px 5px;background:#ececeb;color:#090a0b;font:1000 8px/1 Arial,sans-serif;letter-spacing:.13em}
.intro-session{display:flex;align-items:center;justify-content:center;gap:10px;margin:2px auto 18px;color:#c9cdcf;font:900 9px/1 Arial,sans-serif;letter-spacing:.12em}
.intro-session i{display:block;width:22px;height:1px;background:#5b6063}
.race-message h1{margin:16px 0 12px;font-size:clamp(58px,7.5vw,116px);line-height:.76;letter-spacing:-.075em;font-style:italic;font-weight:1000;text-shadow:0 4px 28px rgba(0,0,0,.55)}
.race-message h1 em{font-style:inherit;color:var(--red)}
.primary-action,.secondary-action{border:0;cursor:pointer;background:var(--red);color:#fff;font-weight:1000;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.primary-action{display:flex;align-items:center;justify-content:space-between;width:220px;height:46px;margin:24px auto 0;padding:0 15px 0 18px;clip-path:polygon(0 0,100% 0,94% 100%,0 100%)}
.primary-action b{font-size:20px}
.secondary-action{height:42px;padding:0 18px}

.start-lights{position:absolute;z-index:12;left:50%;top:18%;transform:translateX(-50%);display:flex;gap:7px;padding:8px 10px;background:#090a0b;opacity:0;pointer-events:none;box-shadow:0 4px 18px rgba(0,0,0,.4)}
.start-lights.show{opacity:1}
.start-lights span{width:28px;height:28px;border-radius:50%;background:#28090a;border:2px solid #4a1114;box-shadow:inset 0 0 8px #000}
.start-lights span.on{background:#f1262e;border-color:#ff4e55;box-shadow:0 0 18px rgba(241,38,46,.85),inset 0 0 8px rgba(255,255,255,.35)}
.start-lights.go span{background:#101211;border-color:#252827;box-shadow:none}

.checkpoint-banner{position:absolute;z-index:18;top:17%;left:50%;transform:translate(-50%,-10px);width:320px;opacity:0;pointer-events:none;box-shadow:0 5px 20px rgba(0,0,0,.45);transition:.22s ease}
.checkpoint-banner.show{opacity:1;transform:translate(-50%,0)}
.checkpoint-banner span,.checkpoint-banner small{display:block;height:22px;padding:7px 10px 0;background:#131516;color:#adb2b5;font:900 7px/1 Arial,sans-serif;letter-spacing:.12em}
.checkpoint-banner strong{display:block;padding:10px 12px 9px;background:#e9e9e7;color:#0a0a0b;font:1000 17px/1 Arial,sans-serif;font-style:italic}
.checkpoint-banner small{background:var(--red);color:#fff;height:20px;padding-top:6px}

.pause-dimmer{position:absolute;z-index:20;inset:0;background:rgba(1,2,2,.64);opacity:0;pointer-events:none;transition:opacity .2s ease}
.race-stage.is-paused .pause-dimmer{opacity:1}
.race-stage.is-paused #raceCanvas,.race-stage.is-paused .timing-tower,.race-stage.is-paused .sector-progress,.race-stage.is-paused .broadcast-hud{filter:brightness(.46) saturate(.68);opacity:.72;transition:.2s ease}

.pit-wall{position:absolute;z-index:30;left:50%;top:50%;width:min(790px,calc(100% - 34px));max-height:calc(100svh - 56px);display:flex;flex-direction:column;background:#0d0f10;border-top:4px solid #e8e8e7;box-shadow:0 15px 58px rgba(0,0,0,.72);opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,-47%);transition:opacity .18s ease,transform .2s ease,visibility .18s}
.pit-wall.show{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,-50%)}
.pause-ribbon{height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;background:var(--red);color:#fff;font:1000 8px/1 Arial,sans-serif;letter-spacing:.1em}
.pause-live{display:flex;align-items:center;gap:7px}.pause-live i{width:6px;height:6px;border-radius:50%;background:#fff}
.pause-ribbon b{font-size:8px}
.pit-headline{display:grid;grid-template-columns:58px 1fr auto;align-items:center;gap:14px;min-height:82px;padding:13px 16px;background:#e7e7e5;color:#080909}
.question-position{height:50px;display:grid;place-items:center;background:#111314;color:#fff;font:1000 19px/1 Arial,sans-serif}
.pit-kicker{display:block;color:#62676a;font:1000 7px/1 Arial,sans-serif;letter-spacing:.12em}
.pit-headline h2{margin:7px 0 0;font-size:20px;line-height:1;font-style:italic;letter-spacing:-.02em}
.question-hint{align-self:start;margin-top:3px;color:#676c6f;font:900 7px/1 Arial,sans-serif;letter-spacing:.1em}
.pit-telemetry{display:grid;grid-template-columns:repeat(4,1fr);height:58px;background:#111315;border-bottom:1px solid #2d3032}
.pit-telemetry>div{padding:10px 12px;border-right:1px solid #2d3032}.pit-telemetry>div:last-child{border-right:0}
.pit-telemetry span{display:block;color:#777f83;font:900 7px/1 Arial,sans-serif;letter-spacing:.1em}.pit-telemetry b{display:inline-block;margin-top:7px;font:1000 13px/1 Arial,sans-serif}.pit-telemetry em{color:#6f767a;font:800 7px/1 Arial,sans-serif;font-style:normal}
.question-shell{min-height:0;overflow:auto;padding:24px 22px 22px;background:#0b0d0e;overscroll-behavior:contain}
.question-shell h3{margin:0;max-width:710px;font-size:clamp(26px,3vw,38px);line-height:1.02;letter-spacing:-.045em;font-style:italic}
.question-shell>p{margin:10px 0 0;max-width:680px;color:#969da1;font-size:12px;line-height:1.5}
.answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:22px}
.answer{position:relative;width:100%;min-height:52px;display:grid;grid-template-columns:34px 1fr 18px;align-items:center;gap:8px;padding:0 11px 0 0;border:1px solid #303436;background:#151719;color:#e4e5e5;text-align:left;cursor:pointer;transition:.14s ease}
.answer::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:#33383b}.answer:hover{background:#1a1d1f;border-color:#4b5053}.answer .answer-key{height:100%;display:grid;place-items:center;background:#0c0e0f;color:#8e9599;font:1000 9px/1 Arial,sans-serif}.answer .answer-copy{font-size:12px;font-weight:800;line-height:1.22}.answer .answer-check{width:9px;height:9px;border-radius:50%;border:1px solid #697074}.answer.selected{background:#1b1d1f;border-color:#5b6063}.answer.selected::before{background:var(--red)}.answer.selected .answer-key{background:var(--red);color:#fff}.answer.selected .answer-check{background:var(--red);border-color:var(--red)}.answer:disabled{cursor:default;opacity:.72}
.pit-footer{height:62px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 14px 0 17px;background:#08090a;border-top:1px solid #2b2e30}
.response-status{display:flex;align-items:center;gap:8px;color:#777e82;font:900 8px/1 Arial,sans-serif;letter-spacing:.08em}.response-status i{width:6px;height:6px;border-radius:50%;background:#52585b}.response-status.ready{color:#d9dcdd}.response-status.ready i{background:var(--lime)}
.continue-button{width:190px;height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 12px 0 15px;border:0;background:var(--red);color:#fff;cursor:pointer;font:1000 9px/1 Arial,sans-serif;letter-spacing:.08em;clip-path:polygon(0 0,100% 0,94% 100%,0 100%)}.continue-button:disabled{opacity:.25;filter:grayscale(1);cursor:not-allowed}.continue-button b{font-size:18px}

.finish-overlay{position:absolute;z-index:40;inset:0;display:grid;place-items:center;background:rgba(2,3,3,.76);opacity:0;visibility:hidden;pointer-events:none;transition:.25s ease}.finish-overlay.show{opacity:1;visibility:visible;pointer-events:auto}.finish-panel{width:min(660px,calc(100% - 36px));border-top:5px solid #e8e8e7;background:#0a0c0d;box-shadow:0 15px 55px rgba(0,0,0,.7);padding:28px 28px 26px}.finish-kicker{display:block;color:var(--red);font:1000 8px/1 Arial,sans-serif;letter-spacing:.12em}.finish-panel h2{margin:12px 0 8px;font-size:clamp(48px,7vw,86px);line-height:.82;letter-spacing:-.07em;font-style:italic}.finish-panel p{color:#9aa0a4;font-size:12px}.finish-panel .secondary-action{margin-top:12px}

@media(max-width:900px){
  .broadcast-hud{left:10px;right:10px;top:10px}.broadcast-bug{width:118px}.bug-mark{font-size:20px}.session-strip>div{min-width:86px;padding-left:8px;padding-right:8px}.session-strip>div:first-child{display:none}.camera-tag{display:none}
  .timing-tower{left:10px;top:76px;width:192px;transform:scale(.9);transform-origin:top left}
  .sector-progress{width:min(650px,calc(100% - 24px));bottom:10px}
  .race-message{top:53%}
}
@media(max-width:600px){
  .broadcast-hud{height:50px}.broadcast-bug{width:98px;height:48px}.bug-mark{height:28px;font-size:17px;padding-top:5px}.bug-live{height:20px;font-size:7px}.session-strip{height:36px;margin-left:6px}.session-strip>div{min-width:74px;padding-top:5px}.session-strip>div:nth-child(1),.session-strip>div:nth-child(3){display:none}.session-strip span{font-size:6px}.session-strip b{font-size:9px;margin-top:4px}
  .timing-tower{top:66px;left:8px;width:188px;transform:scale(.72)}
  .sector-progress{bottom:7px}.sector-marks{height:22px}.sector-marks span{font-size:7px}
  .race-message{width:calc(100% - 26px)}.race-message h1{font-size:55px}.intro-session{margin-bottom:14px;font-size:8px}
  .start-lights{top:14%}.start-lights span{width:23px;height:23px}
  .checkpoint-banner{top:13%;width:270px}
  .pit-wall{width:calc(100% - 12px);max-height:calc(100svh - 18px)}
  .pause-ribbon{height:30px;padding:0 10px}.pause-ribbon b{display:none}
  .pit-headline{grid-template-columns:48px 1fr;min-height:72px;padding:10px;gap:10px}.question-position{height:44px}.question-hint{display:none}.pit-headline h2{font-size:17px}
  .pit-telemetry{grid-template-columns:repeat(2,1fr);height:auto}.pit-telemetry>div{height:50px;padding:8px 9px}.pit-telemetry>div:nth-child(2){border-right:0}.pit-telemetry>div:nth-child(-n+2){border-bottom:1px solid #2d3032}
  .question-shell{padding:17px 12px 14px}.question-shell h3{font-size:25px}.question-shell>p{font-size:11px}.answers{grid-template-columns:1fr;gap:6px;margin-top:14px}.answer{min-height:46px}.answer .answer-copy{font-size:11px}
  .pit-footer{height:57px;padding:0 9px}.response-status{display:none}.continue-button{width:100%;height:39px}
  .finish-panel{padding:22px 18px}.finish-panel h2{font-size:54px}
}

.question-shell>p:empty{display:none}