/* The app wears the website's design (autosight-website/source/site.css): near-black pages, one
   cool white for type, the logo's cyan for emphasis, green/amber/red only for what the camera
   says; Archivo for headings and figures, IBM Plex for text and labels (the site's own font files,
   ../assets/fonts). The last section of this file styles the parts in that design. */
:root {
  --ink: #050608;            /* page */
  --ink-2: #0F1217;          /* cards */
  --ink-3: #151922;          /* wells, tracks, inputs */
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.18);
  --paper: #F4F6F8;          /* type */
  --text-2: #C4CAD4;
  --fog: #8D96A5;            /* 6.6:1 on the page, 6:1 on cards */
  --signal: #4FD2FF;         /* the logo's cyan */
  --ok: #3DDC97; --warn: #FFB547; --bad: #FF5A4E; --unk: #8D96A5;
  --font-head: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color-scheme: dark;
  font-family: var(--font-body);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--ink); color: var(--paper); }
body { -webkit-font-smoothing: antialiased; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.screen { min-height: 100%; max-width: 640px; margin: 0 auto; padding: calc(env(safe-area-inset-top, 0px) + 20px) 18px calc(env(safe-area-inset-bottom, 0px) + 28px); display: flex; flex-direction: column; gap: 18px; }
.top { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.top .top-title { font: inherit; margin: 0; letter-spacing: normal; } /* a screen title that looks like the header label */
/* Screen titles get focus when the screen changes (see show() in app.js); they aren't controls. */
h1[tabindex="-1"]:focus { outline: none; }
.tag { margin-left: auto; font: 600 0.7rem ui-monospace, Menlo, monospace; letter-spacing: 0.06em; color: var(--signal); border: 1px solid var(--signal); border-radius: 999px; padding: 3px 9px; }
h1 { font-size: clamp(1.9rem, 7vw, 2.6rem); line-height: 1.05; margin: 8px 0 0; letter-spacing: -0.02em; }
h2 { font-size: 1.1rem; margin: 10px 0 0; }
.lede { color: var(--fog); line-height: 1.55; margin: 0; }
.muted, .fine { color: var(--fog); }
.fine { font-size: 0.82rem; line-height: 1.5; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn { min-height: 50px; padding: 12px 20px; border-radius: 999px; border: 1px solid var(--line); background: var(--ink-2); color: var(--paper); font-weight: 700; cursor: pointer; }
.btn.primary { background: linear-gradient(135deg, #00DBFE, var(--signal) 45%, #2E8BFF); color: var(--ink); border: 0; }
.btn:disabled { opacity: 0.6; cursor: progress; }
.msg { min-height: 1.4em; margin: 0; color: var(--warn); }
.settings { border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; background: var(--ink-2); }
.settings summary { cursor: pointer; font-weight: 700; min-height: 32px; }
.row { display: grid; gap: 6px; margin-top: 12px; font-size: 0.95rem; }
.row.check { display: flex; align-items: center; gap: 10px; }
.row input[type=range] { width: 100%; accent-color: var(--signal); }
.row input[type=checkbox] { flex: none; width: 20px; height: 20px; accent-color: var(--signal); }
.history ol { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.history li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--ink-2); border: 1px solid var(--line); font-size: 0.92rem; }
.history b { font: 600 1rem ui-monospace, Menlo, monospace; }

/* camera stage */
.stage { position: relative; width: 100%; aspect-ratio: 3 / 4; max-height: 56vh; border-radius: 18px; overflow: hidden; background: #000; border: 1px solid var(--line); }
.stage video, .stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.stage #simcanvas { transform: none; }
.cal-panel { display: grid; gap: 10px; }
.step { margin: 0; font: 600 0.75rem ui-monospace, Menlo, monospace; letter-spacing: 0.08em; color: var(--signal); text-transform: uppercase; }
.cal-panel p { margin: 0; color: var(--fog); }
.bar { height: 8px; border-radius: 8px; background: var(--ink-3); overflow: hidden; }
.bar span { display: block; height: 100%; width: 0; background: var(--signal); transition: width 120ms linear; }

/* drive */
#s-drive { max-width: 900px; }
@media (min-width: 820px) and (orientation: landscape) { #s-drive { display: grid; grid-template-columns: 1.1fr 1fr; align-items: start; } }
.drive-stage { aspect-ratio: 3 / 4; }
.drive-stage.no-video { background: var(--ink-2); }
.hud { display: grid; gap: 16px; justify-items: center; }
.status { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; border: 2px solid currentColor; font: 700 1.05rem ui-monospace, Menlo, monospace; letter-spacing: 0.06em; text-transform: uppercase; }
.status .dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.status[data-s="ATTENTIVE"] { color: var(--ok); }
.status[data-s="TRANSITIONING"] { color: var(--warn); }
.status[data-s="DISTRACTED"] { color: var(--bad); }
.status[data-s="DROWSY"] { color: var(--warn); }
.status[data-s="NO_FACE"] { color: var(--unk); }
.ring-wrap { position: relative; width: 160px; height: 160px; }
.ring { width: 100%; height: 100%; }
.ring-bg { fill: none; stroke: var(--ink-3); stroke-width: 9; }
.ring-fg { fill: none; stroke: var(--ok); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 326.7; transition: stroke 150ms; }
.ring-label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring-label b { font: 700 2.4rem ui-monospace, Menlo, monospace; }
.ring-label span { font-size: 0.8rem; color: var(--fog); }
.readout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; width: 100%; margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--ink-2); font-size: 0.85rem; }
.readout div { display: flex; justify-content: space-between; gap: 8px; }
.readout dt { color: var(--fog); }
.readout dd { margin: 0; font-family: ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; }
.drive-meta { display: flex; gap: 18px; color: var(--fog); font: 500 0.9rem ui-monospace, Menlo, monospace; }
.btn.end { width: 100%; max-width: 320px; }
.flash { position: fixed; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--bad) 30%, transparent); opacity: 0; pointer-events: none; transition: opacity 180ms ease-out; z-index: 10; }
.flash.on { opacity: 1; }
.flash span { font: 800 clamp(2.4rem, 12vw, 4.5rem) system-ui, sans-serif; letter-spacing: -0.02em; color: #fff; text-shadow: 0 2px 30px #000; }
.flash.drowsy { background: color-mix(in srgb, var(--warn) 28%, transparent); }

/* summary */
.score { display: grid; justify-items: start; gap: 4px; }
.lab { font: 600 0.75rem ui-monospace, Menlo, monospace; letter-spacing: 0.08em; color: var(--fog); text-transform: uppercase; }
.score b { font: 700 5rem/1 ui-monospace, Menlo, monospace; }
.kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.kv div { padding: 12px 14px; border-radius: 12px; background: var(--ink-2); border: 1px solid var(--line); }
.kv dt { color: var(--fog); font-size: 0.82rem; }
.kv dd { margin: 4px 0 0; font: 700 1.3rem ui-monospace, Menlo, monospace; }
.timeline { position: relative; height: 14px; border-radius: 7px; background: var(--ink-3); }
.timeline i { position: absolute; top: -4px; bottom: -4px; min-width: 3px; border-radius: 3px; background: var(--bad); }
.events { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 0.92rem; color: var(--fog); }
.events li { display: flex; justify-content: space-between; padding-block: 8px; border-bottom: 1px solid var(--line); }
.events b { color: var(--paper); font-family: ui-monospace, Menlo, monospace; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- settings selects, accuracy test ---------- */
.row select { min-height: 44px; border-radius: 10px; border: 1px solid var(--line); background: var(--ink-3); color: var(--paper); padding: 8px 10px; font: inherit; }
.conds { border: 1px solid var(--line); border-radius: 14px; padding: 10px 16px 14px; margin: 0; background: var(--ink-2); }
.conds legend { padding: 0 6px; font-weight: 700; }
.conds div { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.conds label { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.conds input { width: 20px; height: 20px; accent-color: var(--signal); }
.steps-list { margin: 0; padding-left: 1.2em; color: var(--fog); line-height: 1.6; }
.prompt { font-size: clamp(2rem, 9vw, 3rem); }
#s-test .stage { max-height: 42vh; }
.stage canvas.proc { display: none; }
.btn.small { min-height: 44px; padding: 8px 16px; font-size: 0.9rem; justify-self: start; margin-top: 10px; }
.consent { font-size: 0.95rem; }
.fine a { color: var(--fog); }

/* ---------- Moment Replay ---------- */
.ev-r { display: inline-flex; align-items: center; gap: 12px; }
.events .replay-btn { min-height: 36px; margin: 0; padding: 4px 14px; }
.replay { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--ink-2); }
.replay h2 { margin: 0; }
.replay-stage { position: relative; border-radius: 12px; overflow: hidden; border: 2px solid transparent; transition: border-color 120ms; }
.replay-stage.alerting { border-color: var(--bad); }
.replay-stage canvas { display: block; width: 100%; height: auto; }
.replay-time { position: absolute; top: 10px; right: 12px; font: 600 0.9rem ui-monospace, Menlo, monospace; color: var(--fog); }
.replay-track { position: relative; height: 22px; border-radius: 6px; background: var(--ink-3); cursor: pointer; touch-action: none; }
.replay-track .band { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--warn) 35%, transparent); }
.replay-track .alert { position: absolute; top: -3px; bottom: -3px; width: 3px; background: var(--bad); }
.replay-track .head { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--paper); }
.text-in { min-height: 44px; border-radius: 10px; border: 1px solid var(--line); background: var(--ink-3); color: var(--paper); padding: 8px 10px; font: inherit; }
.sync-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sync-row .btn { margin: 0; }

/* install and update */
.install-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--fog); font-size: 0.9rem; line-height: 1.45; }
.install-row[hidden] { display: none; }
.install-row span { flex: 1 1 14em; }
.install-row .btn { margin: 0; }
.pwa-update { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); transform: translateX(-50%); z-index: 50; display: flex; align-items: center; gap: 12px; width: max-content; max-width: calc(100vw - 32px); padding: 10px 12px 10px 16px; border-radius: 14px; background: var(--ink-2); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,0.4); font-size: 0.92rem; }
.pwa-update .btn { margin: 0; }

/* bench view: what AutoSight sees, how sure it is, and why */
.bench { width: 100%; display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--ink-2); }
.bench[hidden] { display: none; }
.bench-head { display: grid; grid-template-columns: 1fr minmax(60px, 120px) auto; align-items: center; gap: 10px; }
.bench-head b { font-size: 1.15rem; }
.bench-conf { height: 8px; border-radius: 4px; background: var(--ink-3); overflow: hidden; }
.bench-conf span { display: block; height: 100%; width: 0; background: var(--signal); transition: width 0.15s; }
.bench-pct { font: 600 0.85rem ui-monospace, Menlo, monospace; color: var(--fog); min-width: 3.5ch; text-align: right; }
.bench-ev { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; min-height: 4.6em; font-size: 0.86rem; color: var(--fog); }
.bench-ev li::before { content: "› "; color: var(--signal); }
.bench-tl { width: 100%; height: 26px; border-radius: 6px; background: var(--ink-3); display: block; }
.bench-legend, .bench-cov { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.75rem; color: var(--fog); }
.bench-legend span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; background: var(--c); vertical-align: -1px; }
.bench-cov b { color: var(--paper); font-family: ui-monospace, Menlo, monospace; }
[data-cat="ROAD"] { --c: var(--ok); } [data-cat="GLANCE"] { --c: var(--signal); } [data-cat="VISUAL"] { --c: var(--warn); }
[data-cat="DEVICE"] { --c: var(--bad); } [data-cat="CLOSED"] { --c: #C46BFF; } [data-cat="DROWSY"] { --c: #C46BFF; }
[data-cat="STOPPED"], [data-cat="UNCERTAIN"] { --c: var(--unk); }
#bn-cat { color: var(--c); }

/* accuracy test: each glance */
.sub-h { margin: 6px 0 0; font-size: 1rem; }
.glance-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.glance-list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 12px; border-radius: 10px; background: var(--ink-2); border: 1px solid var(--line); border-left: 4px solid var(--ok); font-size: 0.9rem; }
.glance-list li.bad { border-left-color: var(--bad); }
.glance-list li b { font-size: 0.85rem; }
.glance-list li.ok b { color: var(--ok); }
.glance-list li.bad b { color: var(--bad); }
.glance-list li small { grid-column: 1 / -1; color: var(--fog); }

/* ---------- motion: the preview, screens easing in, the calibration scan, the summary ----------
   Nothing here moves on the drive screen once a drive is under way, and every screen ends exactly
   as it looked before. With reduced motion none of it runs (see the rule above). */

/* the start screen's preview (intro.js): the real engine watching the simulated face */
.intro { margin: 0; display: grid; gap: 8px; }
.intro figcaption { color: var(--fog); font-size: 0.8rem; line-height: 1.45; }
.intro-stage { position: relative; aspect-ratio: 16 / 9; max-height: 32vh; border-radius: 18px; overflow: hidden; background: var(--ink-2); border: 1px solid var(--line); box-shadow: 0 24px 60px -36px rgba(25, 200, 255, 0.55); }
.intro-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.intro-ring { position: absolute; right: 5%; top: 50%; width: 30%; max-width: 132px; aspect-ratio: 1; transform: translateY(-50%); }
.intro-ring svg { width: 100%; height: 100%; }
.intro-ring-fg { fill: none; stroke: var(--ok); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 326.7; transition: stroke 150ms; }
.intro-ring p { position: absolute; inset: 0; margin: 0; display: grid; place-content: center; text-align: center; }
.intro-ring b { font: 700 clamp(1.1rem, 5vw, 1.6rem) ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; }
.intro-ring span { font-size: 0.62rem; color: var(--fog); }
.intro-up { position: absolute; inset: 0; margin: 0; display: grid; grid-template-columns: 62% 1fr; place-items: center; background: color-mix(in srgb, var(--bad) 26%, transparent); font: 800 clamp(1.6rem, 7vw, 2.4rem) system-ui, sans-serif; letter-spacing: -0.02em; color: #fff; text-shadow: 0 2px 20px #000; opacity: 0; transition: opacity 180ms ease-out; pointer-events: none; }
.intro-up.on { opacity: 1; }
.intro-btn { position: absolute; left: 10px; top: 10px; width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 1px solid rgba(242, 245, 249, 0.3); background: rgba(2, 12, 31, 0.6); color: var(--paper); cursor: pointer; }
.intro-btn::before { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 10px; transform: translate(-50%, -50%); box-sizing: border-box; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.intro-btn.is-held::before { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent currentColor; transform: translate(-35%, -50%); }

/* a screen's parts ease in one after another when it appears (show() in app.js adds .enter) */
@keyframes as-enter { from { opacity: 0; transform: translateY(14px); } }
.screen.enter > :not(.flash) { animation: as-enter 520ms cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
.screen.enter > :nth-child(2) { animation-delay: 50ms; }
.screen.enter > :nth-child(3) { animation-delay: 100ms; }
.screen.enter > :nth-child(4) { animation-delay: 150ms; }
.screen.enter > :nth-child(5) { animation-delay: 200ms; }
.screen.enter > :nth-child(n+6) { animation-delay: 250ms; }

/* calibration: a viewfinder, and a scan line passing while AutoSight measures */
#s-cal .stage::before { content: ""; position: absolute; inset: 14px; z-index: 1; pointer-events: none; border-radius: 10px;
  background: linear-gradient(var(--signal), var(--signal)) top left / 22px 2px, linear-gradient(var(--signal), var(--signal)) top left / 2px 22px,
    linear-gradient(var(--signal), var(--signal)) top right / 22px 2px, linear-gradient(var(--signal), var(--signal)) top right / 2px 22px,
    linear-gradient(var(--signal), var(--signal)) bottom left / 22px 2px, linear-gradient(var(--signal), var(--signal)) bottom left / 2px 22px,
    linear-gradient(var(--signal), var(--signal)) bottom right / 22px 2px, linear-gradient(var(--signal), var(--signal)) bottom right / 2px 22px;
  background-repeat: no-repeat; opacity: 0.85; }
#s-cal .stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(25, 200, 255, 0) calc(100% - 48px), rgba(25, 200, 255, 0.16) calc(100% - 2px), var(--signal) calc(100% - 2px)); opacity: 0.8; animation: as-scan 2.4s ease-in-out infinite; }
@keyframes as-scan { 0%, 100% { transform: translateY(-100%); } 50% { transform: translateY(0); } }

/* the drive summary: tiles arrive in turn, the timeline draws across, the moments follow
   (the score counts up in app.js) */
#s-summary.enter .kv div { animation: as-enter 520ms cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
#s-summary.enter .kv div:nth-child(2) { animation-delay: 60ms; }
#s-summary.enter .kv div:nth-child(3) { animation-delay: 120ms; }
#s-summary.enter .kv div:nth-child(4) { animation-delay: 180ms; }
#s-summary.enter .kv div:nth-child(5) { animation-delay: 240ms; }
#s-summary.enter .kv div:nth-child(6) { animation-delay: 300ms; }
@keyframes as-draw { from { clip-path: inset(-6px 100% -6px 0); } to { clip-path: inset(-6px 0 -6px 0); } }
#s-summary.enter .timeline { animation: as-draw 1100ms 250ms cubic-bezier(0.4, 0, 0.2, 1) backwards; }
#s-summary.enter .events li { animation: as-enter 480ms cubic-bezier(0.2, 0.7, 0.2, 1) backwards; animation-delay: 420ms; }
#s-summary.enter .events li:nth-child(2) { animation-delay: 480ms; }
#s-summary.enter .events li:nth-child(3) { animation-delay: 540ms; }
#s-summary.enter .events li:nth-child(n+4) { animation-delay: 600ms; }

/* ======================= the website's design =======================
   Shared by the driver app, the family view and the instructor view (family.css adds the views'
   own parts). */
html { background: var(--ink); }
body { background: radial-gradient(900px 520px at 92% -8%, rgba(79, 210, 255, 0.11), transparent 65%), var(--ink); color: var(--paper); line-height: 1.55; -moz-osx-font-smoothing: grayscale; }
::selection { background: rgba(79, 210, 255, 0.35); color: #fff; }
h1, h2, h3 { font-family: var(--font-head); font-stretch: 108%; color: var(--paper); text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 7.5vw, 3rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; }
h2 { font-size: 1.25rem; font-weight: 650; letter-spacing: -0.015em; }
.sub-h { font-family: var(--font-head); font-weight: 650; }
.lede { color: var(--text-2); }
a { color: var(--signal); text-underline-offset: 3px; }

/* the header: the mark, the screen's name and the tag */
.top { gap: 12px; font-family: var(--font-head); font-weight: 700; font-stretch: 108%; letter-spacing: -0.01em; font-size: 1.05rem; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.tag { font: 500 0.68rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 10px; color: var(--signal); border-color: rgba(79, 210, 255, 0.45); background: rgba(79, 210, 255, 0.06); }
.lab, .step { font: 500 0.7rem/1.3 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.lab { color: var(--fog); }
.step { color: var(--signal); }

/* buttons: white pill for the main action, hairline pills for the rest */
.btn { font: 600 0.98rem/1 var(--font-body); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line-2); color: var(--paper); transition: background-color 160ms, border-color 160ms, color 160ms; }
.btn:hover { border-color: var(--paper); background: rgba(255, 255, 255, 0.07); }
.btn.primary { background: var(--paper); color: var(--ink); border-color: transparent; }
.btn.primary:hover { background: var(--signal); }
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
select, .row select, .text-in, .goal-set input, .import-row input[type=text], .pair-row input, .survey-q textarea, .survey-q input[type=email] { background: var(--ink-3); border-color: var(--line-2); color: var(--paper); }

/* cards: the site's glass, a hairline and a soft top light */
.settings, .history li, .kv div, .readout, .bench, .conds, .glance-list li, .install-row, .replay { background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)), var(--ink-2); border: 1px solid var(--line); }
.settings { border-radius: 18px; padding: 14px 18px; }
.settings summary { font-weight: 600; }
.history li { border-radius: 14px; }
.history b, .events b, .readout dd, .drive-meta, .bench-pct, .replay-time { font-family: var(--font-mono); font-weight: 500; }
.kv div { border-radius: 16px; }
.kv dd { font: 700 1.5rem/1.15 var(--font-head); font-stretch: 112%; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.glance-list li { border-left-width: 4px; }
.replay { border-radius: 20px; }
.replay-stage { border-radius: 14px; }
.stage { border-radius: 20px; border-color: var(--line); }

/* the drive screen: the same calm layout, in the site's type */
.status { font: 600 1rem var(--font-mono); letter-spacing: 0.08em; }
.ring-label b { font: 700 2.6rem var(--font-head); font-stretch: 112%; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.flash span { font-family: var(--font-head); font-stretch: 108%; }

/* the summary */
.score b { font: 700 5.6rem/1 var(--font-head); font-stretch: 112%; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }

/* the preview (intro.js) */
.intro-stage { border-radius: 18px; background: var(--ink-2); box-shadow: 0 24px 60px -36px rgba(79, 210, 255, 0.5); }
.intro-ring b { font-family: var(--font-head); font-stretch: 112%; letter-spacing: -0.03em; }