:root {
  --ink: #092232;
  --asphalt: #12344a;
  --asphalt-deep: #071923;
  --fog: #f4f7f6;
  --mist: #dbe5e7;
  --line: #aebdc0;
  --amber: #f2b84b;
  --amber-deep: #ad7315;
  --signal: #35a8a2;
  --danger: #e4674b;
  --display: Bahnschrift, "Arial Narrow", "Aptos Display", sans-serif;
  --body: Aptos, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --data: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body { margin: 0; font-family: var(--body); color: var(--ink); background: var(--fog); }
button, a { font: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--amber); outline-offset: 4px; }

.brand-lockup { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.brand-lockup div { display: grid; line-height: 1; }
.brand-lockup strong { font: 700 1.05rem/1 var(--display); letter-spacing: .16em; }
.brand-lockup span { margin-top: 5px; color: #5d747d; font-size: .72rem; letter-spacing: .08em; }
.brand-lockup--compact { gap: 10px; }

/* Entry */
.landing-body { min-height: 100vh; background: var(--mist); }
.landing-shell { min-height: 100vh; padding: clamp(24px, 5vw, 72px); display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; position: relative; }
.landing-shell::after { content: ""; position: absolute; right: -11vw; top: -16vh; width: 48vw; height: 130vh; background: var(--asphalt); transform: rotate(14deg); z-index: -1; }
.landing-hero { align-self: center; max-width: 980px; padding: 9vh 0 6vh; }
.eyebrow, .section-label { font: 700 .7rem/1 var(--data); letter-spacing: .16em; color: var(--amber-deep); }
.landing-hero h1 { margin: 20px 0 22px; font: 650 clamp(3.2rem, 8vw, 7.8rem)/.84 var(--display); letter-spacing: -.055em; text-transform: uppercase; }
.landing-hero h1 em { color: var(--asphalt); font-style: normal; }
.landing-copy { max-width: 590px; margin: 0 0 38px; color: #49636c; font-size: clamp(1rem, 2vw, 1.28rem); line-height: 1.5; }
.entry-grid { display: grid; grid-template-columns: repeat(2, minmax(250px, 390px)); gap: 12px; }
.entry-card { min-height: 105px; padding: 20px; display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 14px; color: var(--ink); background: rgba(244,247,246,.94); border: 1px solid #bdcbce; text-decoration: none; transition: transform .18s ease, border-color .18s ease; }
.entry-card:hover { transform: translateY(-3px); border-color: var(--asphalt); }
.entry-card--capture { background: var(--amber); border-color: var(--amber); }
.entry-index { align-self: start; font: 700 .7rem/1 var(--data); }
.entry-card strong, .entry-card small { display: block; }
.entry-card strong { font: 650 1.35rem/1.1 var(--display); text-transform: uppercase; }
.entry-card small { margin-top: 7px; color: #49636c; }
.entry-card--capture small { color: #684711; }
.landing-footer { display: flex; justify-content: space-between; color: #58717a; font: 600 .68rem/1 var(--data); letter-spacing: .08em; text-transform: uppercase; }

/* Live capture */
.capture-body { background: var(--asphalt-deep); color: white; overflow: hidden; }
.capture-shell { width: 100vw; height: 100svh; min-height: 420px; position: relative; isolation: isolate; background: #06141c; }
#camera, #detectionCanvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#camera { z-index: -3; }
#detectionCanvas { z-index: -1; pointer-events: none; }
.capture-shell::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(to bottom, rgba(2,10,15,.72), transparent 30%, transparent 58%, rgba(2,10,15,.86)); pointer-events: none; }
.road-reticle { position: absolute; inset: 0; pointer-events: none; opacity: .86; }
.horizon { position: absolute; top: 57%; left: 13%; right: 13%; height: 1px; background: rgba(242,184,75,.75); }
.horizon::before, .horizon::after { content: ""; position: absolute; top: -5px; width: 1px; height: 11px; background: var(--amber); }
.horizon::before { left: 0; }.horizon::after { right: 0; }
.lane { position: absolute; bottom: -8%; width: 2px; height: 54%; background: rgba(244,247,246,.55); transform-origin: bottom; }
.lane--left { left: 20%; transform: rotate(20deg); }
.lane--right { right: 20%; transform: rotate(-20deg); }
.aim { position: absolute; top: calc(57% - 23px); left: 50%; transform: translateX(-50%); color: var(--amber); font: 700 .58rem/1 var(--data); letter-spacing: .14em; white-space: nowrap; }
.capture-topbar { position: absolute; top: 0; left: 0; right: 0; padding: max(16px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 12px max(20px, env(safe-area-inset-left)); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.mark-link { width: fit-content; }
.mark-link img { display: block; }
.capture-topbar time { justify-self: end; font: 600 .86rem/1 var(--data); letter-spacing: .08em; }
.connection-pill { min-height: 34px; padding: 0 13px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,.25); background: rgba(4,20,29,.72); backdrop-filter: blur(12px); font: 650 .7rem/1 var(--data); letter-spacing: .06em; text-transform: uppercase; }
.connection-pill > span { width: 7px; height: 7px; border-radius: 50%; background: #8ca0a7; }
.connection-pill[data-state="live"] > span { background: var(--signal); box-shadow: 0 0 0 5px rgba(53,168,162,.18); }
.connection-pill[data-state="error"] > span { background: var(--danger); }
.connection-pill[data-state="connecting"] > span { background: var(--amber); animation: pulse 1s infinite; }
.telemetry-strip { position: absolute; left: max(20px, env(safe-area-inset-left)); right: max(20px, env(safe-area-inset-right)); bottom: max(125px, calc(env(safe-area-inset-bottom) + 112px)); display: grid; grid-template-columns: repeat(4, minmax(95px, 1fr)); background: rgba(7,25,35,.82); border-top: 2px solid var(--amber); backdrop-filter: blur(13px); }
.telemetry-strip > div { padding: 12px 15px 13px; border-right: 1px solid rgba(255,255,255,.13); }
.telemetry-strip > div:last-child { border: 0; }
.telemetry-strip span { display: block; margin-bottom: 7px; color: #aebdc0; font: 650 .55rem/1 var(--data); letter-spacing: .12em; }
.telemetry-strip strong { font: 600 .9rem/1 var(--data); }
.capture-action-panel { position: absolute; left: max(20px, env(safe-area-inset-left)); right: max(20px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: minmax(220px, 1fr) minmax(290px, 390px); gap: 22px; align-items: end; }
.capture-action-panel > p { max-width: 460px; margin: 0; color: #d9e2e3; font-size: .85rem; line-height: 1.4; }
.drive-button { min-height: 80px; padding: 13px 20px; display: grid; grid-template-columns: 45px 1fr; gap: 14px; align-items: center; color: var(--ink); background: var(--amber); border: 0; cursor: pointer; text-align: left; }
.drive-button:hover { background: #ffc85e; }
.drive-button[data-active="true"] { color: white; background: var(--danger); }
.drive-button__icon { width: 38px; height: 38px; border: 2px solid currentColor; border-radius: 50%; position: relative; }
.drive-button__icon::after { content: ""; position: absolute; inset: 10px; background: currentColor; }
.drive-button:not([data-active="true"]) .drive-button__icon::after { border-radius: 50%; }
.drive-button b, .drive-button small { display: block; }
.drive-button b { font: 700 1.1rem/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.drive-button small { margin-top: 6px; opacity: .72; font-size: .7rem; }
.capture-alert { position: absolute; top: 72px; left: 50%; transform: translateX(-50%); max-width: min(520px, calc(100vw - 40px)); padding: 12px 16px; color: white; background: var(--danger); font-size: .82rem; box-shadow: 0 12px 40px rgba(0,0,0,.25); }

/* Session access */
.access-gate { position: fixed; inset: 0; z-index: 20; padding: 20px; display: grid; place-items: center; background: rgba(7,25,35,.58); backdrop-filter: blur(10px); }
.access-gate[hidden] { display: none; }
.access-gate--dark { background: rgba(3,13,19,.82); }
.access-card { width: min(430px, 100%); padding: clamp(25px, 5vw, 42px); color: var(--ink); background: var(--fog); border-top: 4px solid var(--amber); box-shadow: 0 24px 80px rgba(0,0,0,.3); }
.access-card h1 { margin: 15px 0 10px; font: 650 2rem/1 var(--display); text-transform: uppercase; }
.access-card > p { margin: 0 0 24px; color: #58717a; line-height: 1.45; }
.access-card label { display: block; margin-bottom: 8px; font: 700 .65rem/1 var(--data); letter-spacing: .1em; text-transform: uppercase; }
.access-card input { width: 100%; height: 48px; padding: 0 13px; color: var(--ink); background: white; border: 1px solid #9eb0b4; border-radius: 0; font: 600 .9rem/1 var(--data); }
.access-card input:focus { outline: 3px solid rgba(242,184,75,.45); border-color: var(--amber-deep); }
.access-card button { width: 100%; min-height: 50px; margin-top: 14px; color: var(--ink); background: var(--amber); border: 0; cursor: pointer; font: 700 .85rem/1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.access-card button:hover { background: #ffc85e; }
.access-card small { display: block; margin-top: 14px; color: #6b8086; font-size: .7rem; text-align: center; }
.access-card .access-error { margin: 10px 0 0; color: #a93620; font-size: .78rem; }

/* Control room */
.monitor-body { min-height: 100vh; background: #e8eef0; }
.monitor-shell { min-height: 100vh; padding: 22px clamp(18px, 3vw, 46px) 34px; }
.monitor-header { height: 72px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; border-bottom: 1px solid #b8c7ca; }
.monitor-header__route { text-align: center; }
.monitor-header__route span, .feed-toolbar span { display: block; margin-bottom: 5px; color: #688087; font: 650 .58rem/1 var(--data); letter-spacing: .14em; }
.monitor-header__route strong { font: 650 1rem/1 var(--display); text-transform: uppercase; }
.connection-pill--light { justify-self: end; color: var(--ink); background: #f4f7f6; border-color: #b8c7ca; backdrop-filter: none; }
.monitor-workspace { padding-top: 22px; display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 29vw, 430px); gap: 22px; align-items: start; }
.feed-panel, .event-panel { background: var(--fog); border: 1px solid #c1ced0; }
.feed-panel { min-width: 0; display: grid; grid-template-rows: auto auto auto auto; }
.feed-toolbar { min-height: 64px; padding: 15px 18px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #c1ced0; }
.feed-toolbar strong { font: 600 .9rem/1 var(--data); }
.model-badge { padding: 8px 10px; color: #6f7f83; border: 1px solid #bdc9cb; font: 700 .58rem/1 var(--data); letter-spacing: .08em; }
.model-badge[data-ready="true"] { color: #176d68; background: #d9efec; border-color: #8dc9c4; }
.feed-stage { width: 100%; aspect-ratio: 16 / 9; max-height: min(64vh, 720px); position: relative; display: grid; place-items: center; overflow: hidden; background: #102b3b; }
#liveFrame, #monitorDetectionCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; }
#liveFrame[hidden] { display: none; }
#monitorDetectionCanvas { z-index: 1; pointer-events: none; }
.feed-empty { color: white; text-align: center; }
.feed-empty strong { display: block; margin-top: 28px; font: 650 1.4rem/1 var(--display); text-transform: uppercase; }
.feed-empty p { margin: 9px 0 0; color: #aabcc1; font-size: .82rem; }
.empty-road { display: block; width: 110px; height: 92px; margin: auto; position: relative; overflow: hidden; border-bottom: 1px solid rgba(242,184,75,.8); }
.empty-road::before, .empty-road::after { content: ""; position: absolute; bottom: -10px; width: 2px; height: 100px; background: rgba(255,255,255,.5); transform-origin: bottom; }
.empty-road::before { left: 27px; transform: rotate(17deg); }.empty-road::after { right: 27px; transform: rotate(-17deg); }
.feed-coordinates { position: absolute; left: 16px; bottom: 14px; padding: 7px 9px; color: white; background: rgba(5,20,28,.76); font: 600 .66rem/1 var(--data); }
.frame-history { min-width: 0; border-top: 1px solid #c1ced0; background: #e8eef0; }
.frame-history__header { min-height: 58px; padding: 11px 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.frame-history__header strong { display: block; margin-top: 6px; color: #647b82; font: 600 .68rem/1 var(--data); }
.frame-history__actions { display: flex; gap: 8px; }
.history-button { min-height: 34px; padding: 0 12px; color: var(--ink); background: transparent; border: 1px solid #aebdc0; cursor: pointer; font: 700 .62rem/1 var(--data); letter-spacing: .05em; text-transform: uppercase; }
.history-button:hover:not(:disabled) { border-color: var(--ink); }
.history-button:disabled { opacity: .42; cursor: default; }
.history-button--live[data-active="true"] { color: #176d68; background: #d9efec; border-color: #77bcb6; }
.history-button--delete:not(:disabled) { color: #a93620; border-color: #d49a8e; }
.frame-strip { min-height: 100px; padding: 0 14px 14px; display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-color: #83969b transparent; }
.frame-strip__empty { width: 100%; margin: 0; padding: 28px 12px; color: #71868c; border: 1px dashed #afbec1; font-size: .76rem; text-align: center; }
.frame-thumb { flex: 0 0 126px; padding: 0; position: relative; color: white; background: #102b3b; border: 2px solid transparent; cursor: pointer; text-align: left; overflow: hidden; }
.frame-thumb:hover { border-color: #8fa2a7; }
.frame-thumb[data-selected="true"] { border-color: var(--amber); box-shadow: inset 0 -3px 0 var(--amber); }
.frame-thumb img { width: 100%; aspect-ratio: 16 / 9; display: block; object-fit: cover; }
.frame-thumb__detections { position: absolute; top: 5px; right: 5px; min-width: 22px; height: 22px; display: grid; place-items: center; color: var(--ink); background: var(--amber); font: 800 .62rem/1 var(--data); font-style: normal; }
.frame-thumb span { display: flex; justify-content: space-between; gap: 5px; padding: 7px 8px; color: #d7e0e2; font: 600 .58rem/1 var(--data); }
.frame-thumb b { color: var(--amber); font-weight: 700; }
.feed-metrics { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #c1ced0; }
.feed-metrics > div { padding: 15px 17px; border-right: 1px solid #c1ced0; }
.feed-metrics > div:last-child { border: 0; }
.feed-metrics span { display: block; margin-bottom: 8px; color: #71868c; font: 650 .55rem/1 var(--data); letter-spacing: .11em; }
.feed-metrics strong { font: 650 1rem/1 var(--data); }
.event-panel { min-height: 0; max-height: calc(100vh - 128px); display: grid; grid-template-rows: auto 1fr; }
.event-panel > header { min-height: 64px; padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #c1ced0; }
.event-panel header strong { display: block; margin-top: 6px; font: 650 .95rem/1 var(--display); text-transform: uppercase; }
.event-panel output { width: 34px; height: 34px; display: grid; place-items: center; color: var(--ink); background: var(--amber); font: 700 .8rem/1 var(--data); }
.event-list { min-height: 0; max-height: calc(100vh - 184px); margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.event-empty { min-height: 240px; padding: 28px; display: grid; align-content: center; text-align: center; color: #71868c; }
.event-empty strong { color: var(--ink); font: 650 1rem/1 var(--display); text-transform: uppercase; }
.event-empty span { margin-top: 9px; font-size: .78rem; line-height: 1.4; }
.event-item { padding: 16px; display: grid; grid-template-columns: 42px 1fr auto; gap: 11px; align-items: center; border-bottom: 1px solid #d1dcde; animation: enter .28s ease both; }
.event-item__number { width: 38px; height: 38px; display: grid; place-items: center; color: #70490a; background: #f8ddb0; font: 700 .72rem/1 var(--data); }
.event-item strong { display: block; font: 650 .9rem/1 var(--display); text-transform: uppercase; }
.event-item small { display: block; margin-top: 5px; color: #657b82; font: 600 .62rem/1 var(--data); }
.event-item time { color: #657b82; font: 600 .62rem/1 var(--data); }

@keyframes pulse { 50% { opacity: .28; } }
@keyframes enter { from { opacity: 0; transform: translateY(-7px); } }

@media (max-width: 850px) {
  .landing-shell::after { display: none; }
  .entry-grid { grid-template-columns: 1fr; }
  .monitor-header { grid-template-columns: 1fr auto; }
  .monitor-header__route { display: none; }
  .monitor-workspace { grid-template-columns: 1fr; }
  .event-list { max-height: 430px; }
}

@media (orientation: portrait), (max-width: 680px) {
  .capture-topbar { grid-template-columns: auto 1fr auto; gap: 10px; }
  .connection-pill { justify-self: center; }
  .telemetry-strip { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 104px); grid-template-columns: repeat(2, 1fr); }
  .telemetry-strip > div:nth-child(2) { border-right: 0; }
  .telemetry-strip > div:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.13); }
  .capture-action-panel { grid-template-columns: 1fr; gap: 10px; }
  .capture-action-panel > p { display: none; }
  .drive-button { min-height: 76px; }
  .aim { top: calc(49% - 22px); }
  .horizon { top: 49%; }
  .lane { height: 46%; }
  .monitor-shell { padding: 14px; }
  .feed-panel { grid-template-rows: auto auto auto auto; }
  .feed-stage { aspect-ratio: 16 / 9; max-height: none; }
  .frame-history__header { align-items: flex-start; flex-direction: column; }
  .frame-history__actions { width: 100%; }
  .history-button { flex: 1; }
  .frame-thumb { flex-basis: 104px; }
  .feed-metrics { grid-template-columns: repeat(2, 1fr); }
  .feed-metrics > div:nth-child(2) { border-right: 0; }
  .feed-metrics > div:nth-child(-n+2) { border-bottom: 1px solid #c1ced0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}