:root{
  color-scheme:dark;
  --panelw:308px;
  --bg:#07090d; --panel:rgba(14,17,23,.82); --line:rgba(255,255,255,.10);
  --txt:#e9edf3; --dim:#98a2b3; --dim2:#69707d;
  --accent:#61d0ff; --warn:#ffb454; --bad:#ff6b6b; --good:#5ad6a0;
  --r:14px; --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:999px;
  border:3px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.28);background-clip:padding-box}
*::-webkit-scrollbar-corner{background:transparent}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--txt);font-family:var(--font);overflow:hidden;
  -webkit-font-smoothing:antialiased}
#app{position:fixed;inset:0}
canvas#scene,canvas#overlay{position:absolute;inset:0;width:100%;height:100%;display:block}
canvas#overlay{pointer-events:none}

/* loading */
#loading{position:absolute;inset:0;display:grid;place-content:center;gap:14px;justify-items:center;
  background:#07090d;color:var(--dim);font-size:13px;letter-spacing:.02em;z-index:50;transition:opacity .5s}
#loading.gone{opacity:0;pointer-events:none}
.spinner{width:26px;height:26px;border:2px solid rgba(255,255,255,.15);border-top-color:var(--accent);
  border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* top bar */
#topbar{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;
  padding:14px 16px;gap:16px;pointer-events:none;z-index:20}
#topbar>*{pointer-events:auto}
.brand{display:flex;gap:10px;align-items:center;background:var(--panel);backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:var(--r);padding:9px 14px;
  /* same width as the panel below it: it was content-sized and 22px narrower */
  width:var(--panelw);box-sizing:border-box}
.brand h1{margin:0;font-size:13px;font-weight:600;letter-spacing:.01em}
.brand p{margin:2px 0 0;font-size:11px;color:var(--dim2)}
.mark{width:24px;height:24px;flex:none;color:var(--txt);overflow:visible}
.mark.big{width:34px;height:34px}
.wordmark{display:flex;align-items:center;gap:13px;margin-bottom:26px}
.wordmark span{font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  color:var(--dim);padding-top:1px}
.brand h1{letter-spacing:-.005em}
.topactions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.chip{background:var(--panel);backdrop-filter:blur(14px);border:1px solid var(--line);color:var(--dim);
  border-radius:999px;padding:8px 14px;font-size:12px;font-family:inherit;cursor:pointer;transition:.15s}
.chip:hover{color:var(--txt);border-color:rgba(255,255,255,.24)}
.chip.on{color:#07090d;background:var(--accent);border-color:transparent;font-weight:600}
/* a chip that carries an icon next to its label, so the state is the colour
   rather than a ": on" / ": off" suffix */
.chip.labeled{display:inline-flex;align-items:center;gap:7px;padding:7px 13px}
.chip.labeled svg{display:block;flex:none}
.chip.labeled .eyeo{fill:none;stroke:currentColor;stroke-width:1.5}
.chip.labeled .eyep{fill:currentColor}
.chip.labeled .bub{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.chip.labeled .bubdot{fill:currentColor}
.chip.labeled .bubstem{stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.chip.labeled:not(.on) svg{opacity:.7}
.chip.primaryChip{color:#07090d;background:#ffd479;border-color:transparent;font-weight:600}
.chip.primaryChip:hover{filter:brightness(1.06);color:#07090d}

/* panel */
#panel{position:absolute;left:16px;top:74px;display:flex;flex-direction:column;gap:10px;z-index:20;
  width:calc(var(--panelw) + 10px);padding-right:10px;
  max-height:calc(100% - 96px);overflow-y:auto;overflow-x:hidden}
.card{background:var(--panel);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.card h2{margin:0 0 10px;font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--dim2);font-weight:600}
.row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.row label{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--dim2);font-weight:600}
#bacValue{font-size:20px;font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:-.01em}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}

input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;
  background:linear-gradient(90deg,#3fb27f 0%,#7fc55f 22%,#e8c34a 42%,#e88a3c 62%,#e2553f 82%,#8e2f6b 100%)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-6px;border-radius:50%;
  background:#fff;border:2px solid #0b0d12;box-shadow:0 2px 10px rgba(0,0,0,.6)}
input[type=range]::-moz-range-track{height:6px;border-radius:999px;
  background:linear-gradient(90deg,#3fb27f,#e8c34a,#e2553f,#8e2f6b)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #0b0d12}
.ticks{display:flex;justify-content:space-between;font-size:9px;color:var(--dim2);
  font-variant-numeric:tabular-nums;margin-top:-2px}
.category{margin-top:10px;padding:9px 11px;border-radius:10px;background:rgba(255,255,255,.045);
  border:1px solid var(--line);border-left:3px solid var(--good)}
.category strong{display:block;font-size:12.5px;margin-bottom:3px}
.category span{font-size:11px;color:var(--dim);line-height:1.45}

.sober{width:100%;margin-top:10px;padding:10px;border-radius:10px;border:1px solid var(--line);
  background:rgba(255,255,255,.05);color:var(--txt);font-size:12px;font-family:inherit;cursor:pointer;transition:.15s}
.sober:hover{background:rgba(255,255,255,.11)}
.sober.active{background:var(--good);color:#062015;border-color:transparent;font-weight:600}
.sober kbd{font-family:inherit;font-size:10px;color:var(--dim2);border:1px solid var(--line);
  border-radius:4px;padding:1px 5px;margin-left:6px}
.sober.active kbd{color:#062015;border-color:rgba(0,0,0,.25)}
.soberflag{display:none;margin-top:7px;font-size:10.5px;color:var(--good);letter-spacing:.05em;text-transform:uppercase}
.soberflag.on{display:block}

.bars{display:flex;flex-direction:column;gap:9px}
.bar{display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:center}
.bar span{font-size:11px;color:var(--dim);grid-column:1}
.bar em{font-size:11px;font-style:normal;color:var(--dim2);font-variant-numeric:tabular-nums;grid-column:2;grid-row:1}
.bar i{grid-column:1/3;height:4px;border-radius:999px;background:rgba(255,255,255,.09);display:block;overflow:hidden}
.bar i b{display:block;height:100%;width:0%;border-radius:999px;background:var(--accent);transition:width .25s ease}

.metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.metrics div{background:rgba(255,255,255,.04);border-radius:9px;padding:7px 9px}
.metrics em{display:block;font-style:normal;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.metrics span{font-size:9.5px;color:var(--dim2);text-transform:uppercase;letter-spacing:.05em}

select,.ghost,.primary{font-family:inherit}
select{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--txt);
  border-radius:9px;padding:8px 10px;font-size:12px;cursor:pointer}
.ghost{background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--dim);border-radius:9px;
  padding:8px 10px;font-size:12px;cursor:pointer;transition:.15s}
.ghost:hover{color:var(--txt);background:rgba(255,255,255,.1)}
.primary{background:var(--accent);color:#06131a;border:none;border-radius:9px;padding:9px 16px;
  font-size:12.5px;font-weight:600;cursor:pointer}
.upcoming{margin-top:9px;font-size:11px;color:var(--dim2)}
.disclaimer{font-size:10.5px;line-height:1.5;color:var(--dim2);margin:2px 4px 20px;}
.disclaimer em{color:var(--dim);font-style:italic}

.meas{display:flex;flex-direction:column;gap:7px}
.meas div{display:grid;grid-template-columns:1fr auto;gap:0 8px;align-items:baseline}
.meas span{font-size:11px;color:var(--dim)}
.meas em{font-style:normal;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.meas i{grid-column:1/3;font-style:normal;font-size:9.5px;color:var(--dim2);letter-spacing:.02em}
.meas em.off{color:var(--warn)}
.extrap{display:none;margin:10px 0 0;padding:8px 10px;border-radius:9px;font-size:10.5px;line-height:1.5;
  color:#e8d3b4;background:rgba(255,180,84,.09);border:1px solid rgba(255,180,84,.28)}
.extrap.on{display:block}
.evtable{width:100%;border-collapse:collapse;margin:8px 0 4px;font-size:11.5px;table-layout:fixed}
.evtable col.c1{width:19%}.evtable col.c2{width:42%}.evtable col.c3{width:39%}
.evtable th{text-align:left;font-size:9.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--dim2);
  font-weight:600;padding:6px 8px 6px 0;border-bottom:1px solid var(--line)}
.evtable td{padding:7px 8px 7px 0;border-bottom:1px solid rgba(255,255,255,.05);color:var(--dim);vertical-align:top}
.evtable td b{color:var(--txt);font-weight:600}
.st{display:inline-block;font-size:9px;text-transform:uppercase;letter-spacing:.06em;padding:2px 6px;
  border-radius:999px;white-space:nowrap}
.st.measured{background:rgba(90,214,160,.16);color:#8ee9c0}
.st.direction{background:rgba(97,208,255,.14);color:#9adcff}
.st.interpolated{background:rgba(255,180,84,.14);color:#f0c68a}
.st.extrapolated,.st.illustrative{background:rgba(255,107,107,.14);color:#ffa8a8}

/* cluster */
#cluster{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;align-items:flex-end;gap:16px;z-index:15}
.gauge{position:relative}
#speedo{width:170px;height:170px;display:block;filter:drop-shadow(0 10px 24px rgba(0,0,0,.55))}
.stale{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-size:9.5px;color:var(--dim2);letter-spacing:.03em}
.stale.warn{color:var(--warn)}
.clusterside{display:flex;flex-direction:column;gap:10px;align-items:center;padding-bottom:16px}
.limit{width:62px;height:62px;border-radius:50%;background:#f4f4f4;border:6px solid #d13b2f;
  display:grid;place-content:center;color:#111;box-shadow:0 8px 20px rgba(0,0,0,.5);transition:.3s}
.limit span{font-size:23px;font-weight:800;line-height:1;letter-spacing:-.02em}
.limit small{font-size:7.5px;font-weight:700;letter-spacing:.02em;text-align:center;display:block}
.limit.unknown{filter:grayscale(1);opacity:.32}
.limitwrap{display:flex;flex-direction:column;align-items:center;gap:5px}
.limitnote{font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--warn);
  height:11px;white-space:nowrap}
/* posted but never processed: the road says it, the driver does not know it */
.limit.unread{border-style:dashed;opacity:.72}
.limit.unread span{color:#7b7b7b}
.limit.violated{animation:pulse 1s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(209,59,47,.28)}}
.lane{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:7px 10px;backdrop-filter:blur(14px)}
.lane>span{font-size:9px;color:var(--dim2);text-transform:uppercase;letter-spacing:.06em}
.lanetrace{display:block;width:110px;height:56px;margin-top:5px}
.lanescale{display:flex;justify-content:space-between;align-items:baseline;width:110px;margin-top:3px}
.lanescale span{font-size:8.5px;color:var(--dim2);letter-spacing:.05em;text-transform:uppercase}
.lanescale b{font-size:10.5px;font-variant-numeric:tabular-nums;color:var(--dim);font-weight:600}
.lanescale b.off{color:var(--bad)}

/* events */
#events{position:absolute;right:16px;top:74px;width:var(--panelw);display:flex;flex-direction:column;gap:8px;z-index:20;
  max-height:calc(100% - 190px);overflow:hidden;pointer-events:none}
.event{background:var(--panel);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:var(--r);
  padding:11px 13px;animation:slide .4s cubic-bezier(.2,.8,.2,1);border-left:3px solid var(--dim2)}
.event.good{border-left-color:var(--good)} .event.late{border-left-color:var(--warn)}
.event.bad{border-left-color:var(--bad)}
@keyframes slide{from{opacity:0;transform:translateX(22px)}}
.event.out{opacity:0;transform:translateX(22px);transition:.4s}
.event h4{margin:0 0 2px;font-size:12px;font-weight:600;display:flex;justify-content:space-between;gap:8px}
.event h4 b{font-weight:600;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--dim2)}
.event p{margin:3px 0 0;font-size:11px;line-height:1.45;color:var(--dim)}
.tl{margin-top:8px;display:flex;flex-direction:column;gap:5px}
.tl .lane2{display:grid;grid-template-columns:52px 1fr 44px;gap:7px;align-items:center;font-size:9.5px;color:var(--dim2)}
.tl .track{position:relative;height:14px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden}
.tl .seg{position:absolute;top:0;bottom:0;border-radius:3px}
.tl .seg.notice{background:rgba(97,208,255,.45)} .tl .seg.interp{background:rgba(255,180,84,.45)}
.tl .seg.act{background:rgba(90,214,160,.5)}
.tl .val{text-align:right;font-variant-numeric:tabular-nums;color:var(--dim)}
.tl .miss{color:var(--bad)}

/* modals */
.modal{position:absolute;inset:0;background:rgba(4,6,9,.72);backdrop-filter:blur(6px);display:none;
  place-content:center;z-index:60;padding:24px}
.modal.on{display:grid}
.modalinner{width:min(560px,92vw);background:#0e1117;border:1px solid var(--line);border-radius:18px;padding:22px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);animation:pop .28s cubic-bezier(.2,.8,.2,1)}
.modalinner.wide{width:min(880px,95vw);max-height:84vh;overflow:auto}
@keyframes pop{from{opacity:0;transform:scale(.96) translateY(8px)}}

/* The report on a hazard is not a dialogue box. It describes something that is
   on screen and frozen, so covering the screen with it defeats the point and
   makes it read as an interruption rather than an annotation. Same treatment as
   the held frame: docked to the bottom, no blur over the road, the scene
   visible above it. */
/* Centred, and small. This card is read by someone who wants to know what just
   happened, not by someone reading a paper: headline, the one comparison that
   matters, and the mechanism folded away behind a toggle for anyone who wants
   it. The scene behind stays unblurred because it is still the subject. */
#explainModal{background:rgba(4,6,9,.55);backdrop-filter:none;
  place-content:center;padding:24px}
#explainModal .modalinner{width:min(560px,92vw);max-height:76vh;overflow-y:auto;
  background:rgba(14,17,23,.97);backdrop-filter:blur(20px);padding:18px 20px 15px;
  animation:pop .3s cubic-bezier(.2,.8,.2,1)}
#explainModal .modalinner h3{font-size:19px;letter-spacing:-.015em}
#explainModal .modalinner p{margin:7px 0}
#explainModal .note{display:none}
#explainModal.why .note{display:block}
.whytoggle{background:none;border:none;padding:6px 0;margin:0;font-family:inherit;
  font-size:12px;color:var(--accent);cursor:pointer}
.whytoggle:hover{text-decoration:underline}
.modalhead{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.tag{align-self:flex-start;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);
  border:1px solid rgba(97,208,255,.35);border-radius:999px;padding:3px 9px}
.modalinner h3{margin:0;font-size:18px;font-weight:600;letter-spacing:-.01em}
.modalinner p{font-size:13px;line-height:1.6;color:var(--dim);margin:8px 0}
.note{font-size:11px;color:var(--dim2);border-top:1px solid var(--line);padding-top:10px;line-height:1.55}
.modalfoot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:16px}
.modalfoot a.tinylink{text-decoration:none}
.compare{display:grid;gap:8px;margin:12px 0;background:rgba(255,255,255,.035);border-radius:12px;padding:12px}
.aboutbody h4{margin:16px 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim2)}
.aboutbody p,.aboutbody li{font-size:12.5px;line-height:1.6;color:var(--dim)}
.aboutbody ul{margin:6px 0;padding-left:18px}
.aboutbody a{color:var(--accent)}
.aboutbody .caution{border:1px solid rgba(255,180,84,.3);background:rgba(255,180,84,.07);
  border-radius:12px;padding:12px;color:#e8d3b4;font-size:12.5px;line-height:1.6}

@media (max-width:1080px){
  :root{--panelw:270px}
  #events{width:250px}
}

/* ── small screens ─────────────────────────────────────────────────────── */
@media (max-width:820px){
  /* the launch screen already says what this is, so the brand goes */
  .brand{display:none}
  /* one scrollable row rather than three wrapped ones */
  #topbar{padding:8px 0 8px 10px;gap:0}
  /* These used to scroll sideways with the scrollbar hidden, so on a phone the
     row simply ended after Overlay and nothing said that Explain and About
     were still out there. About is where the methods and the sources are, so
     losing it on mobile loses the reason to trust any of this. Wrap instead,
     and drop fullscreen, which is unreliable on iOS anyway. */
  .topactions{flex-wrap:wrap;overflow:visible;justify-content:flex-end;
    gap:6px;padding:2px 0 4px}
  #btnFullscreen{display:none}
  .chip{padding:6px 10px;font-size:11.5px}
  .chip{padding:7px 12px;font-size:11.5px;white-space:nowrap;flex:none}

  #events{display:none}

  /* instruments tuck under the top bar, panel becomes a bottom sheet */
  /* The top bar is two rows on a phone now, so the cluster has to clear it. */
  #cluster{top:98px;bottom:auto;left:auto;right:6px;
    transform:scale(.58);transform-origin:top right;gap:8px}
  #panel{top:auto;bottom:0;left:0;right:0;width:auto;max-height:46%;
    padding:12px 12px 18px;gap:8px;overflow:auto;
    background:linear-gradient(to bottom,rgba(7,9,13,0),rgba(7,9,13,.94) 20px);
    border-radius:18px 18px 0 0}
  #panel .card{padding:12px}
  .metrics{grid-template-columns:1fr 1fr}
  .disclaimer{margin-bottom:6px}
  #glosspop{width:calc(100vw - 20px);max-width:none}

  #launch h1{font-size:23px;max-width:none}
  #launch p{font-size:13.5px}
  .launchinner{width:calc(100vw - 32px)}
  .launchbtns{gap:8px}

  .gcard{padding:20px 18px !important}
  .gcard h2{font-size:19px !important}
  #momentwrap .gcard,#lapwrap .gcard,#gorillawrap .gcard{width:calc(100vw - 16px)}
  #momentwrap{padding:0 8px 14px}
  .gstats,.lapgrid{grid-template-columns:1fr 1fr}
  .gmini span{font-size:11px}
  .gskip{top:auto;bottom:14px;right:14px}
  .modalinner{padding:18px}
  .evtable{font-size:11px}
  .evtable col.c1,.evtable col.c2,.evtable col.c3{width:auto}
  .plan{height:78px}
}

@media (max-width:820px) and (orientation:landscape){
  #panel{max-height:100%;width:240px;padding-right:10px;right:auto;top:52px;bottom:0;
    border-radius:0 14px 0 0}
  #cluster{top:52px;right:4px;transform:scale(.5);transform-origin:top right}
}


@keyframes dropin{from{opacity:0;transform:translateX(-50%) translateY(24px)}}

.gtask{position:absolute;top:78px;left:50%;transform:translateX(-50%);background:rgba(10,13,18,.9);
  backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:999px;padding:10px 22px;
  font-size:13px;letter-spacing:.01em;opacity:0;transition:.3s;white-space:nowrap;max-width:92vw;overflow:hidden}
.gtask.on{opacity:1}

.gcheck{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:none;align-items:center;
  gap:12px;background:rgba(10,13,18,.9);backdrop-filter:blur(14px);border:1px solid var(--line);
  border-radius:14px;padding:11px 16px}
.gcheck.on{display:flex}
.gcheck>span{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim2)}
.gcheck b{font-size:11px;font-weight:500;color:var(--dim)}
.gcheck kbd{font-family:inherit;font-size:10px;border:1px solid var(--line);border-radius:4px;padding:1px 5px}
.gcheckbar{width:130px;height:5px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.gcheckbar i{display:block;height:100%;width:0;background:var(--accent);transition:width .1s linear}
.gcheckbar i.warn{background:var(--bad)}

.gping{position:absolute;top:132px;left:50%;transform:translateX(-50%) translateY(-6px);opacity:0;
  font-size:13px;padding:8px 16px;border-radius:999px;transition:.25s;white-space:nowrap}
.gping.on{opacity:1;transform:translateX(-50%) translateY(0)}
.gping.good{background:rgba(90,214,160,.16);color:#8ee9c0;border:1px solid rgba(90,214,160,.3)}
.gping.bad{background:rgba(255,107,107,.16);color:#ffa8a8;border:1px solid rgba(255,107,107,.3)}

.gcardwrap{position:absolute;inset:0;display:none;place-content:center;padding:24px;
  background:rgba(4,6,9,.82);backdrop-filter:blur(10px);pointer-events:auto}
.gcardwrap.on{display:grid}
   grown tall enough to cover the whole viewport, which hid the thing it was
.gmini{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0 2px}
.gmini span{background:rgba(255,255,255,.05);border-radius:8px;padding:5px 9px;font-size:11px;color:var(--dim2)}
.gmini b{color:var(--txt);font-weight:600;font-size:13px}
@keyframes riseup{from{opacity:0;transform:translateY(28px)}}
.gcard{width:min(620px,94vw);max-height:86vh;overflow:auto;background:#0e1117;border:1px solid var(--line);
  border-radius:20px;padding:32px;box-shadow:0 40px 100px rgba(0,0,0,.7);animation:pop .32s cubic-bezier(.2,.8,.2,1)}
.gcard h2{margin:0 0 14px;font-size:25px;line-height:1.25;font-weight:600;letter-spacing:-.02em}
.gcard p{margin:12px 0;font-size:14px;line-height:1.65;color:var(--dim)}
.gcard p.big{font-size:16px;line-height:1.6;color:var(--txt)}
.gcard p.small{font-size:12px;color:var(--dim2);line-height:1.6}
.gcard b{color:var(--txt);font-weight:600}
/* the counting rule, as two scannable rows rather than a sentence to parse */
.gtag{display:inline-block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dim2);border:1px solid var(--line);border-radius:999px;padding:4px 10px;margin-bottom:13px}
.rules{display:grid;gap:8px;margin:16px 0 6px}
.rule{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:11px;
  background:rgba(255,255,255,.035);border:1px solid var(--line)}
.rule .lamp{width:13px;height:13px;border-radius:50%;flex:none}
.rule .lamp.red{background:#ff5a4d;box-shadow:0 0 13px rgba(255,90,77,.55)}
.rule .lamp.amber{background:#ffab3d;box-shadow:0 0 13px rgba(255,171,61,.5)}
.rule .rl{flex:1;font-size:14px;color:var(--txt)}
.rule .rop{font-size:12px;font-weight:500;color:var(--dim2)}
.rule .rop.plus{color:var(--good)}
.rule .rop.minus{color:var(--warn)}
.gcard kbd{font-family:inherit;font-size:12px;color:var(--txt);border:1px solid var(--line);
  border-radius:5px;padding:2px 7px;background:rgba(255,255,255,.05)}
.gtag,.gmoment{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--dim2);margin-bottom:10px}
.gmoment{color:var(--bad)}
.gbtn{margin-top:22px;background:var(--accent);color:#06131a;border:none;border-radius:11px;
  padding:13px 24px;font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;transition:.15s}
.gbtn:hover{filter:brightness(1.08)}
.gbtns{display:flex;gap:10px;justify-content:flex-end;align-items:center}
.gbtn.alt{background:rgba(255,255,255,.06);color:var(--dim);border:1px solid var(--line)}
.gbtn.alt:hover{color:var(--txt);background:rgba(255,255,255,.11)}
.gskip{position:absolute;top:16px;right:16px;background:rgba(14,17,23,.9);backdrop-filter:blur(14px);
  border:1px solid var(--line);color:var(--dim);border-radius:999px;padding:9px 16px;
  font-size:12px;font-family:inherit;cursor:pointer}
.gskip:hover{color:var(--txt);border-color:rgba(255,255,255,.28)}

.gstats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}
.gstats div{background:rgba(255,255,255,.045);border-radius:12px;padding:12px}
.gstats em{display:block;font-style:normal;font-size:22px;font-weight:600;letter-spacing:-.02em;margin-bottom:4px}
.gstats span{font-size:10.5px;color:var(--dim2);line-height:1.4;display:block}
.gcompare{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}
.gcompare div{background:rgba(255,255,255,.045);border-radius:12px;padding:14px;text-align:center}
.gcompare span{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--dim2);margin-bottom:6px}
.gcompare em{font-style:normal;font-size:26px;font-weight:600;letter-spacing:-.02em}
.gcompare em.worse{color:var(--bad)}
.gbars{display:flex;flex-direction:column;gap:12px;margin:18px 0}
.gbars div{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center}
.gbars span{font-size:12px;color:var(--dim)}
.gbars em{font-style:normal;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.gbars u{grid-column:1/3;display:block;height:8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.gbars i{display:block;height:100%;border-radius:999px;background:var(--accent);min-width:3px}
.gbars i.bad{background:var(--bad)}

#momentwrap{position:absolute;inset:0;z-index:45;display:none;place-content:center;
  padding:20px;background:rgba(4,6,9,.6)}
#momentwrap.on{display:grid}
#momentwrap .gcard{background:rgba(14,17,23,.97);backdrop-filter:blur(20px);
  width:min(560px,92vw);padding:20px 22px 16px;max-height:88vh;overflow-y:auto;margin:0 auto;
  animation:pop .32s cubic-bezier(.2,.8,.2,1)}
#momentwrap .gcard h2{font-size:21px;margin:0 0 6px;line-height:1.25}
#momentwrap .gcard p{margin:8px 0;font-size:13.5px;line-height:1.55}
#momentwrap .gbtns{display:flex;justify-content:flex-end;margin-top:6px}
#momentwrap .gbtn{margin-top:8px;padding:9px 22px}


/* ── attention test ────────────────────────────────────────────────────── */
#gorillawrap{position:absolute;inset:0;z-index:48;display:none;place-content:center;padding:24px;
  background:rgba(4,6,9,.86);backdrop-filter:blur(10px)}
#gorillawrap.on{display:grid}
#gorillawrap .gcard{width:min(600px,94vw);max-height:86vh;overflow:auto;background:#0e1117;
  border:1px solid var(--line);border-radius:20px;padding:32px;
  box-shadow:0 40px 100px rgba(0,0,0,.7);animation:pop .3s cubic-bezier(.2,.8,.2,1)}
#gorillahint{position:absolute;top:78px;left:50%;transform:translateX(-50%);z-index:47;
  background:rgba(10,13,18,.9);backdrop-filter:blur(14px);border:1px solid var(--line);
  border-radius:999px;padding:10px 22px;font-size:13px;opacity:0;transition:.3s;pointer-events:none}
#gorillahint.on{opacity:1}
.numrow{display:flex;gap:10px;margin-top:18px}
.numbtn{flex:1;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--txt);
  border-radius:12px;padding:16px 0;font-size:20px;font-weight:600;font-family:inherit;cursor:pointer;transition:.15s}
.numbtn:hover{background:var(--accent);color:#06131a;border-color:transparent}

.plan{width:100%;height:78px;margin-top:12px;display:block;border-radius:10px;background:rgba(255,255,255,.03)}

/* ── launch ────────────────────────────────────────────────────────────── */
#launch{position:absolute;inset:0;z-index:55;display:grid;place-content:center;padding:32px;
  background:radial-gradient(120% 90% at 50% 0%,rgba(18,26,38,.92) 0%,rgba(5,7,11,.97) 70%);
  backdrop-filter:blur(3px);transition:opacity .45s ease}
#launch.gone{opacity:0;pointer-events:none}
.launchinner{width:min(660px,92vw);animation:pop .5s cubic-bezier(.2,.8,.2,1)}
.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--dim2);margin-bottom:18px}
#launch h1{margin:0 0 20px;font-size:clamp(26px,3.6vw,40px);line-height:1.16;font-weight:600;
  letter-spacing:-.025em;max-width:15ch}
#launch p{font-size:14.5px;line-height:1.68;color:var(--dim);margin:0 0 14px;max-width:56ch}
#launch p.quiet{color:var(--dim2);font-size:13.5px}
#launch p b{color:var(--txt);font-weight:600}
.launchbtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.launchbtns .gbtn{margin-top:0}
.launchbtns .gbtn[disabled]{opacity:.45;cursor:default}
.launchnote{font-size:11.5px !important;color:var(--dim2) !important;margin-top:16px !important;max-width:52ch}
.launchnote.dim{color:#5c626d !important;margin-top:8px !important;line-height:1.55}
@media (max-width:640px){ #launch h1{max-width:none} }

/* ── how this works ────────────────────────────────────────────────────── */

/* ── glossary ──────────────────────────────────────────────────────────── */
.gloss{display:inline-grid;place-content:center;width:14px;height:14px;margin-left:5px;padding:0;
  vertical-align:middle;border-radius:50%;border:1px solid rgba(255,255,255,.24);background:transparent;
  color:var(--dim2);font-family:inherit;font-size:9.5px;font-weight:700;line-height:1;cursor:pointer;
  transition:.15s;flex:none}
.gloss:hover{color:#07090d;background:var(--accent);border-color:transparent}
#glosspop{position:fixed;z-index:70;width:min(310px,88vw);background:#141922;border:1px solid var(--line);
  border-radius:13px;padding:14px 16px;box-shadow:0 20px 50px rgba(0,0,0,.65);opacity:0;
  pointer-events:none;transform:translateY(-5px);transition:.16s}
#glosspop.on{opacity:1;pointer-events:auto;transform:translateY(0)}
#glosspop h4{margin:0 0 6px;font-size:12.5px;font-weight:600;color:var(--txt)}
#glosspop p{margin:0;font-size:12px;line-height:1.6;color:var(--dim)}

/* ── lap summary ───────────────────────────────────────────────────────── */
#lapwrap{position:absolute;inset:0;z-index:46;display:none;place-content:center;padding:24px;
  background:rgba(4,6,9,.8);backdrop-filter:blur(8px)}
#lapwrap.on{display:grid}
#lapwrap .gcard{width:min(560px,94vw);max-height:88vh;overflow:auto;background:#0e1117;
  border:1px solid var(--line);border-radius:18px;padding:24px 26px;
  box-shadow:0 30px 80px rgba(0,0,0,.65);animation:pop .3s cubic-bezier(.2,.8,.2,1)}
.lapgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:16px 0 6px}
.lapgrid div{background:rgba(255,255,255,.045);border-radius:12px;padding:12px;text-align:center}
.lapgrid em{display:block;font-style:normal;font-size:24px;font-weight:600;letter-spacing:-.02em}
.lapgrid span{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--dim2)}
.lapgrid .good em{color:var(--good)} .lapgrid .late em{color:var(--warn)} .lapgrid .bad em{color:var(--bad)}
.laprow{display:flex;justify-content:space-between;font-size:12.5px;padding:9px 2px;
  border-top:1px solid var(--line);color:var(--dim)}
.laprow b{color:var(--txt);font-weight:600}
.laprow .sob{color:var(--good)} .laprow .imp{color:var(--bad)}

.laplist{display:flex;flex-direction:column;gap:6px;margin:14px 0 4px;padding-right:2px}
.lapitem{padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.04);
  border-left:3px solid var(--dim2)}
.lapitem.good{border-left-color:var(--good)} .lapitem.late{border-left-color:var(--warn)}
.lapitem.bad{border-left-color:var(--bad)}
.laphead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:3px}
.laphead b{font-size:13px;font-weight:600;color:var(--txt)}
.laphead i{font-style:normal;font-size:9.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;white-space:nowrap;padding:3px 8px;border-radius:999px;
  background:rgba(255,255,255,.06);color:var(--dim2)}
.lapitem.good .laphead i{background:rgba(90,214,160,.16);color:#8ee9c0}
.lapitem.late .laphead i{background:rgba(255,180,84,.16);color:#f0c68a}
.lapitem.bad .laphead i{background:rgba(255,107,107,.16);color:#ffa8a8}
.lapitem span{display:block;font-size:12px;color:var(--dim);line-height:1.5}

.watchfor{margin-top:8px;padding:9px 11px;border-radius:10px;
  background:rgba(97,208,255,.07);border:1px solid rgba(97,208,255,.18)}
.watchfor b{display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--accent);font-weight:600;margin-bottom:4px}
.watchfor span{font-size:11.5px;line-height:1.5;color:var(--dim)}

/* ── sound toggle ──────────────────────────────────────────────────────── */
.chip.icon{padding:6px 11px;display:inline-grid;place-items:center;line-height:0}
.chip.icon svg{display:block;overflow:visible}
.chip.icon .spk{fill:currentColor;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
.chip.icon .wave{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;
  transition:opacity .15s}
.chip.icon .slash{stroke:currentColor;stroke-width:1.7;stroke-linecap:round;
  opacity:0;transition:opacity .15s}
/* muted: chip is not .on, so the waves go and the slash appears */
.chip.icon:not(.on) .wave{opacity:0}
.chip.icon:not(.on) .slash{opacity:1}

.chip.icon .fsopen path,.chip.icon .fsclose path{fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.chip.icon .fsclose{opacity:0}
.chip.icon.expanded .fsopen{opacity:0}
.chip.icon.expanded .fsclose{opacity:1}

.evtable .sub{color:var(--dim2);font-size:10.5px;margin-top:3px;line-height:1.45}
.evtable td div{margin-bottom:2px}
.srclist{margin:6px 0 0;padding-left:18px}
.srclist li{font-size:11.5px;line-height:1.55;margin-bottom:3px}

.aboutbody .origin{font-size:13.5px;color:var(--dim);font-style:italic;margin:16px 0}

.carrow{display:block;width:100%;height:auto;max-height:34px;margin:0 0 12px}
.carrow.big{max-height:52px;margin:0 0 18px}
.carrow .c path,.carrow .c circle{fill:#e9edf3}
.carrow .c{opacity:0;animation:carlight .34s ease forwards}
.carrow .her circle,.carrow .her rect{fill:#ff6b6b}
.carrow .her{opacity:0;animation:carlight .34s ease forwards}
@keyframes carlight{from{opacity:0}to{opacity:1}}
.lengths{font-size:14px !important;color:var(--dim) !important;margin:2px 0 10px !important}
.lengths b{color:var(--txt);font-weight:600}
.aftermath{font-size:12.5px;color:var(--dim);margin:9px 0 2px !important;padding:8px 11px;
  border-radius:9px;background:rgba(255,107,107,.07);border:1px solid rgba(255,107,107,.2)}
.aftermath b{color:#ffa8a8;font-weight:600}

.chip.icon .pauseIcon rect,.chip.icon .playIcon path{fill:currentColor}
.chip.icon .playIcon{opacity:0}
.chip.icon.paused .pauseIcon{opacity:0}
.chip.icon.paused .playIcon{opacity:1}


/* ── the beat after the moment ─────────────────────────────────────────── */
#blackout{position:absolute;inset:0;z-index:58;background:#000;opacity:0;pointer-events:none;
  display:grid;place-content:center;padding:32px;transition:opacity .55s ease}
#blackout.on{opacity:1;pointer-events:auto}
#blackout p{max-width:34ch;margin:0;text-align:center;font-size:clamp(15px,2vw,19px);
  line-height:1.6;color:var(--dim);opacity:0;transition:opacity .8s ease .35s}
#blackout.showtext p{opacity:1}
/* The duration, held in real time before anything is said. Four seconds of an
   empty screen is a length nobody can argue with, because they just spent it. */
#blackoutHold{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(620px,84vw);opacity:0;transition:opacity .5s}
#blackout.holding #blackoutHold{opacity:1}
#blackout.showtext #blackoutHold{opacity:0}
#blackoutHold i{display:block;height:2px;border-radius:999px;background:rgba(255,255,255,.14);
  overflow:hidden;position:relative}
#blackoutHold i::after{content:'';position:absolute;inset:0;width:0;background:#e9edf3;
  border-radius:999px}
#blackout.holding #blackoutHold i::after{width:100%;
  transition:width var(--hold,3s) linear}
#blackoutHold .holdlabel{display:block;margin-top:11px;text-align:center;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--dim2)}

#glosspop p{white-space:pre-line}

/* ── where it lands ────────────────────────────────────────────────────── */
.brainwrap{position:relative}
.brainlabel{position:absolute;transform:translate(-50%,-100%);pointer-events:none;
  background:rgba(8,10,14,.96);border:1px solid var(--line);border-left:3px solid var(--tint,#fff);
  border-radius:8px;padding:5px 9px;font-size:10.5px;color:var(--txt);white-space:nowrap;
  opacity:0;transition:opacity .12s;z-index:2;text-align:left}
.brainlabel b{display:block;font-weight:600;font-size:11px}
.brainlabel em{display:block;font-style:normal;color:var(--dim);font-size:10px;margin-top:2px;
  font-variant-numeric:tabular-nums}
.brainlabel.on{opacity:1}
.brainhint{position:absolute;right:9px;bottom:16px;font-size:9.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dim2);opacity:.55;pointer-events:none}
.brainwrap:hover .brainhint{opacity:0;transition:opacity .2s}
#brainCanvas{width:100%;display:block;margin:2px 0 10px;border-radius:10px;cursor:grab;
  touch-action:pan-y;
  background:radial-gradient(120% 100% at 50% 30%,rgba(255,255,255,.05),rgba(255,255,255,.012) 70%)}
#brainCanvas.grabbing{cursor:grabbing;touch-action:none}

.brainkey{list-style:none;margin:0 0 9px;padding:0;display:grid;gap:2px}
.brainkey li{display:flex;align-items:flex-start;gap:8px;font-size:11.5px;color:var(--dim);
  cursor:default;border-radius:7px;padding:4px 5px;margin:0 -5px;transition:background .15s}
.brainkey li:hover,.brainkey li.hot{background:rgba(255,255,255,.055)}
.brainkey i{width:8px;height:8px;border-radius:50%;flex:none;margin-top:4px}
.brainkey span{display:flex;flex-direction:column;gap:1px;min-width:0}
.brainkey b{color:var(--txt);font-weight:500;line-height:1.3}
.brainkey small{font-size:10px;line-height:1.35;color:var(--dim2)}
.brainkey em{margin-left:auto;padding-left:8px;font-style:normal;color:var(--dim2);
  font-size:10.5px;white-space:nowrap;margin-top:1px}
.brainkey em.hi{color:#ff8a84}
.brainkey li.steady em{color:#59c8f5}
.brainnote{margin:0;font-size:10.5px;line-height:1.55;color:var(--dim2)}
.brainnote .src{color:var(--dim);border-bottom:1px dotted rgba(255,255,255,.28);cursor:help}

#glosspop p b{color:var(--txt);font-weight:600}
#glosspop p .cav{display:block;margin-top:2px;padding-top:8px;border-top:1px solid var(--line);
  color:var(--dim2);font-size:11.5px}

/* ── collapsible panel sections ────────────────────────────────────────── */
.card.fold > h2{display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none;
  margin:0;padding:2px 0;transition:color .15s}
.card.fold > h2:hover{color:var(--txt)}
.card.fold > h2:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
/* Pinned to the right edge rather than pushed there. The heading can also hold
   a glossary button, and with margin-left:auto on both they split the free
   space between them, so the chevron landed in a different place on every row
   depending on whether that row had a "?". */
.card.fold > h2{position:relative;padding-right:26px}
.card.fold .chev{position:absolute;right:2px;top:calc(50% - 7px);margin:0;
  width:9px;height:9px;flex:none;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg);
  transition:transform .22s cubic-bezier(.2,.8,.2,1);opacity:.75}
.card.fold.open .chev{transform:rotate(-135deg);top:calc(50% - 3px)}
.card.fold .cardbody{display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .28s cubic-bezier(.2,.8,.2,1),opacity .2s,margin-top .28s}
.card.fold .cardinner{overflow:hidden;min-height:0}
.card.fold.open .cardbody{grid-template-rows:1fr;opacity:1;margin-top:11px}
/* a folded section is a row, not a box */
.card.fold:not(.open){padding-top:11px;padding-bottom:11px}

/* ── what else is going on in the car ──────────────────────────────────── */
.cabin{margin-top:12px}
.cabinlab{display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim2);margin-bottom:6px}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;padding:3px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:10px}
.seg button{border:none;border-radius:7px;padding:6px 4px;font-size:11.5px;font-family:inherit;
  background:transparent;color:var(--dim);cursor:pointer;transition:.15s}
.seg button:hover{color:var(--txt)}
.seg button.on{background:rgba(255,255,255,.10);color:var(--txt);font-weight:500}

/* ── belief against ability ────────────────────────────────────────────── */
.selfgap{margin:0 0 14px;padding:11px 12px;border-radius:11px;
  background:rgba(255,255,255,.035);border:1px solid var(--line)}
.sgrow{display:flex;align-items:center;gap:9px;font-size:11px;color:var(--dim);margin-bottom:7px}
.sgrow span{flex:none;width:112px;line-height:1.3}
.sgrow i{flex:1;height:7px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}
.sgrow i b{display:block;height:100%;border-radius:999px;background:var(--dim);
  transition:width .3s ease}
.sgrow em{flex:none;width:34px;text-align:right;font-style:normal;font-variant-numeric:tabular-nums;
  color:var(--dim2)}
.sgrow.act i b{background:var(--bad)}
.sgrow.act em{color:#ff8a84}
.sgnote{margin:2px 0 0;font-size:10.5px;line-height:1.5;color:var(--dim2)}
.sgnote.wide{color:#ff8a84}

/* ── the first-run tour ────────────────────────────────────────────────── */
#tour{position:absolute;inset:0;z-index:60;display:none}
#tour.on{display:block}
/* the dim is the hole's own shadow, so there is nothing covering the cutout
   and the control underneath stays visible and lit */
.tourhole{position:fixed;border-radius:14px;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(4,6,9,.74), 0 0 0 1px rgba(97,208,255,.55) inset,
             0 0 26px rgba(97,208,255,.28);
  transition:left .28s cubic-bezier(.2,.8,.2,1),top .28s cubic-bezier(.2,.8,.2,1),
             width .28s cubic-bezier(.2,.8,.2,1),height .28s cubic-bezier(.2,.8,.2,1)}
.tourcard{position:fixed;width:min(310px,84vw);background:#141922;border:1px solid var(--line);
  border-radius:14px;padding:15px 16px 13px;box-shadow:0 22px 54px rgba(0,0,0,.62);
  transition:left .28s cubic-bezier(.2,.8,.2,1),top .28s cubic-bezier(.2,.8,.2,1)}
.tourstep{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim2);
  margin-bottom:7px}
.tourcard h3{margin:0 0 6px;font-size:15px;font-weight:600;color:var(--txt);letter-spacing:-.01em}
.tourcard p{margin:0;font-size:12.5px;line-height:1.6;color:var(--dim)}
.tourbtns{display:flex;align-items:center;gap:8px;margin-top:14px}
.tskip{background:none;border:none;color:var(--dim2);font-family:inherit;font-size:12px;
  cursor:pointer;padding:6px 2px}
.tskip:hover{color:var(--txt)}
.tourcard .gbtn{margin:0 0 0 auto;padding:8px 17px;font-size:12.5px}
@media (max-width:820px){
  .tourcard{width:calc(100vw - 24px);left:12px !important}
}

.agenote{margin:10px 0 0;font-size:10.5px;line-height:1.55;color:var(--dim2)}
.agenote b{color:var(--dim);font-weight:600}
.agenote .src{color:var(--dim);border-bottom:1px dotted rgba(255,255,255,.28);cursor:help}

/* ── reaction test ─────────────────────────────────────────────────────── */
#rxn{position:absolute;inset:0;z-index:64;display:none;background:rgba(4,6,9,.72);
  backdrop-filter:blur(4px)}
#rxn.on{display:grid;place-items:center;padding:24px}
.rxnwrap{width:min(430px,92vw);display:grid;gap:12px}
.rxncard{background:#141922;border:1px solid var(--line);border-radius:14px;padding:16px 17px 13px;
  box-shadow:0 22px 54px rgba(0,0,0,.6)}
.rxnstep{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim2);margin-bottom:7px}
.rxncard h3{margin:0 0 7px;font-size:20px;font-weight:600;color:var(--txt);letter-spacing:-.015em;
  font-variant-numeric:tabular-nums}
.rxncard p{margin:0;font-size:12.5px;line-height:1.6;color:var(--dim)}
.rxnline{display:block;margin-bottom:9px}
.rxnline b{color:var(--txt);font-weight:600}
.rxnkey{padding-top:9px;border-top:1px solid var(--line);color:var(--txt)}
.rxnkey b{color:#ff8a84}
.rxnsrc{display:block;margin-top:8px;font-size:10.5px;color:var(--dim2)}
.rxnbtns{display:flex;align-items:center;gap:8px;margin-top:14px}
.rxnclose{background:none;border:none;color:var(--dim2);font-family:inherit;font-size:12px;
  cursor:pointer;padding:6px 2px}
.rxnclose:hover{color:var(--txt)}
.rxncard .gbtn{margin:0 0 0 auto;padding:8px 18px;font-size:12.5px}
.rxnpad{height:132px;border-radius:14px;border:1px solid var(--line);cursor:pointer;
  background:rgba(255,255,255,.045);transition:background .06s linear,border-color .06s linear}
.rxnpad.waiting{background:rgba(255,255,255,.05)}
.rxnpad.go{background:var(--accent);border-color:transparent}
.rxnpad.early{background:rgba(255,107,107,.22);border-color:rgba(255,107,107,.45)}
.tinylink{display:block;margin-top:5px;background:none;border:none;padding:0;
  font-family:inherit;font-size:10.5px;color:var(--accent);cursor:pointer;text-align:left}
.tinylink:hover{text-decoration:underline}

/* ── the stage timeline on an event card ───────────────────────────────── */
.stagelog{display:grid;gap:0;margin:2px 0 2px;border-left:1px solid var(--line);padding-left:11px}
.stagerow{display:flex;gap:10px;align-items:baseline;font-size:12px;padding:3px 0;position:relative}
.stagerow::before{content:'';position:absolute;left:-15px;top:9px;width:7px;height:7px;
  border-radius:50%;background:var(--dim2)}
.stagerow.last::before{background:var(--bad)}
.stagerow.sober::before{background:var(--good)}
.staget{flex:none;width:48px;text-align:right;color:var(--dim2);
  font-variant-numeric:tabular-nums;font-size:11.5px}
.stagel{color:var(--dim)}
.stagerow.last .stagel{color:var(--txt)}
.stagerow.sober .stagel,.stagerow.sober .staget{color:var(--good);opacity:.85}

.onceonly{margin-top:4px;padding:9px 11px;border-radius:9px;font-size:12px;line-height:1.55;
  color:var(--dim);background:rgba(97,208,255,.07);border:1px solid rgba(97,208,255,.22)}
.onceonly b{color:var(--txt);font-weight:600}

/* Keep the glossary marker off the end of a heading, where it reads as a
   question mark rather than as a button. */
.card > h2 .gloss{margin-left:auto;opacity:.55}
.card > h2 .gloss:hover{opacity:1}
.card.fold > h2 .gloss{margin-left:auto;margin-right:2px}

/* ── how well anchored is this number, at this BAC ──────────────────────── */
/* The methods table has always carried the status of every anchor. This puts
   the same fact next to the live number, and it changes as the slider moves:
   lane keeping is measured at 0.05 and inferred at 0.11, because the dosing
   studies stop. */
[data-tier="measured"]{--tier:#5ad6a0}
[data-tier="inferred"]{--tier:#61d0ff}
[data-tier="extrapolated"]{--tier:#ff6b6b}
.bar[data-tier] > span::after,
.metrics [data-tier] > span::after{
  content:'';display:inline-block;width:5px;height:5px;border-radius:50%;
  margin-left:6px;vertical-align:middle;background:var(--tier);opacity:.9}
.tierkey{display:flex;gap:12px;margin-top:9px;padding-top:9px;
  border-top:1px solid rgba(255,255,255,.06)}
.tierkey span{display:inline-flex;align-items:center;gap:5px;
  font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--dim2)}
.tierkey span::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--tier)}

/* ── the phone ──────────────────────────────────────────────────────────── */
/* Bottom right, opposite the panel, out of the event feed's way. It is only
   ever on screen while a message is live. */
/* clears the overlay legend, which owns the bottom 90px on the right */
#phone{position:absolute;right:16px;bottom:112px;width:var(--panelw);z-index:20;
  background:var(--panel);backdrop-filter:blur(14px);border:1px solid var(--line);
  border-radius:var(--r);padding:12px 14px;
  opacity:0;transform:translateY(8px);pointer-events:none;transition:.32s}
#phone.on{opacity:1;transform:none}
.phhead{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.phfrom{font-size:12px;font-weight:600;letter-spacing:.01em}
.phstate{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--dim2);
  white-space:nowrap}
.phstate.looking{color:var(--bad)}
.phstate.waiting{color:var(--good)}
.phcmp{margin:7px 0 0;padding-top:7px;font-size:11.5px;line-height:1.5;color:var(--dim2);
  border-top:1px solid rgba(255,255,255,.06)}
.phcmp:empty{display:none;margin:0;padding:0;border:0}
@media (max-width:820px){
  #phone{right:8px;left:8px;width:auto;bottom:auto;top:56px}
}

/* the one number that says whether the driver is reacting to anything at all */
.meas em.bad{color:var(--bad)}
.meas em.warn{color:var(--warn)}

/* ── off the carriageway ────────────────────────────────────────────────── */
/* Not a report card. A state you are currently in, said where you are looking. */
#offroad{position:absolute;left:50%;top:96px;transform:translate(-50%,-8px);z-index:26;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:10px 18px;border-radius:12px;pointer-events:none;text-align:center;
  background:rgba(38,10,12,.82);backdrop-filter:blur(10px);
  border:1px solid rgba(255,107,107,.42);
  opacity:0;transition:opacity .18s, transform .18s}
#offroad.on{opacity:1;transform:translate(-50%,0)}
.ortitle{font-size:13px;font-weight:600;letter-spacing:.02em;color:#ffb3b3}
.ordet{font-size:11.5px;color:rgba(255,220,220,.82);font-variant-numeric:tabular-nums}
.ornote{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,190,190,.45)}
#offroad{max-width:min(320px,80vw)}