:root {
  color-scheme: dark;
  --bg: #07110f;
  --panel: #0d1b18;
  --panel-2: #122520;
  --line: #27443c;
  --text: #e5f0ea;
  --muted: #91a89e;
  --on: #ff7058;
  --off: #46a8ff;
  --trigger: #f1c75b;
  --accent: #69e6b1;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: radial-gradient(circle at 80% 0%, #17342a 0, var(--bg) 42rem);
  color: var(--text);
  font: 15px/1.45 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
main { width: min(1360px, calc(100% - 28px)); margin: 0 auto; padding: 28px 0 44px; }
h1 { margin: 0; font: 600 clamp(24px, 4vw, 42px)/1.05 Georgia, serif; letter-spacing: -0.025em; }
h2 { margin: 0 0 10px; font: 600 20px/1.2 Georgia, serif; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; color: var(--accent); }
a { color: var(--accent); }

/* Masthead ------------------------------------------------------------- */
.masthead { width: min(1180px, calc(100% - 28px)); margin: 0 auto; padding: 40px 0 8px; }
.brand { margin: 0 0 14px; color: var(--accent); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
.lede { max-width: 62ch; margin: 14px 0 0; color: var(--muted); font-size: 16px; }
.notice { max-width: 62ch; margin: 16px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #0b1815cc; color: var(--muted); }
.notice strong { color: var(--text); }

/* The experiment grid --------------------------------------------------- */
/* Two columns, not auto-fit. Four narrow columns made each sensor panel only
   383px wide and left every card over 950px tall, so the grid ran to four
   stacked rows. Two columns give the 4:3 panel room and keep the four trials
   readable as a single set of rows. */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.loading { color: var(--muted); }
.card { border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, #10211d, #0b1714); box-shadow: 0 18px 60px #0005; overflow: hidden; display: flex; flex-direction: column; }
.card-head { display: flex; align-items: start; justify-content: space-between; gap: 14px; padding: 16px 16px 12px; }
.card-head h3 { margin: 0; font: 600 18px/1.2 Georgia, serif; }
.rowtag { flex: none; padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.card-sum { margin: 0; padding: 0 16px 14px; color: var(--muted); font-size: 13px; }
.sensor { position: relative; aspect-ratio: 4 / 3; max-height: 300px; background: #050b09; }
/* The sensor is 4:3, so at a wide column it would tower over the timeline. The
   panel is capped in height and the sensor grid is centred inside it, which
   keeps all four cards the same height without cropping the image. */
canvas { width: 100%; height: 100%; display: block; }
.overlay { position: absolute; inset: 0; pointer-events: none; display: flex; justify-content: space-between; align-items: end; padding: 12px; color: var(--muted); font-size: 11px; }
.timeline { padding: 14px; border-top: 1px solid var(--line); }
.plot { width: 100%; height: 170px; display: block; }
.controls { display: grid; gap: 10px; padding: 12px 14px 14px; }
/* The two sliders share a row. Stacking label, output and range vertically made
   the control block 368px tall, which was most of a card's height. */
.control { display: grid; grid-template-columns: 5.5em 1fr auto; gap: 8px; align-items: center; }
label { color: var(--muted); font-size: 13px; }
output { color: var(--text); font-variant-numeric: tabular-nums; font-size: 13px; }
input[type=range] { accent-color: var(--accent); width: 100%; }
/* Four actions on one row rather than a 2x2 block. */
.buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
button, .file-label { appearance: none; border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; color: var(--text); background: #162923; font: inherit; font-size: 13px; cursor: pointer; text-align: center; }
button:hover, .file-label:hover { border-color: var(--accent); }
button.primary { background: var(--accent); color: #062116; font-weight: 650; }
button:disabled { opacity: .45; cursor: default; border-color: var(--line); }
.file-input { display: none; }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.metric { padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: #0a1512; }
.metric b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; }
.metric span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; }
.legend { display: flex; gap: 12px; color: var(--muted); font-size: 11px; }
.legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.on { background: var(--on); } .off { background: var(--off); } .ref { background: var(--trigger); }
details { border-top: 1px solid var(--line); }
summary { cursor: pointer; padding: 11px 14px; color: var(--muted); font-size: 13px; }
.metadata { padding: 0 14px 14px; }
dl { display: grid; grid-template-columns: minmax(110px, .4fr) 1fr; gap: 5px 12px; margin: 0; font-size: 13px; }
dt { color: var(--muted); } dd { margin: 0; overflow-wrap: anywhere; }
.error { color: var(--on); }
.unavailable { padding: 16px; color: var(--muted); }
.unavailable code { display: block; margin-top: 6px; }

.about { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); max-width: 70ch; }
.about p { margin: 0 0 10px; }

/* The rig section. Height is aspect-driven so the stage never depends on a
   viewport guess, and the canvas is absolutely positioned so it cannot grow the
   stage it is measured against. */
.rig { margin-top: 44px; }
.rig-lede { margin: 0 0 14px; color: var(--muted); max-width: 70ch; }
.rig-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 260px;
  max-height: 62vh;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: var(--bg);
  box-shadow: 0 18px 60px #0005;
}
.rig-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.rig-status {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  transition: opacity 0.25s ease;
}
.rig-stage[data-rig-state="ready"] .rig-status,
.rig-stage[data-rig-state="error"] .rig-status { opacity: 0; pointer-events: none; }
.rig-stage[data-rig-state="error"] { border-color: #7d3b3b; }
.rig-stage[data-rig-state="error"] .rig-status { color: #ffb4a4; opacity: 1; }
.rig-note { margin: 12px 0 0; color: var(--muted); font-size: 13px; }
@media (prefers-reduced-motion: reduce) {
  .rig-status { transition: none; }
}

/* A release page shows one experiment, so the grid narrows to a single column. */
body.release .grid { grid-template-columns: minmax(0, 860px); }
body.release .card { max-width: 860px; }
body.release .plot { height: 210px; }

/* Two columns need about 2 x 420px plus the gap and the page's side margins, so
   the single-column fallback starts below 880px rather than 900px. At 900px
   the grid was dropping to one full-width column while two still fitted. */
@media (max-width: 880px) {
  .grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}