:root {
  color-scheme: dark;
  --bg: #0B0E14;
  --panel: #131822;
  --ink: #E4E9F2;
  --ink-soft: #8A96AB;
  --rule: #232D3D;
  --rule-soft: #1B2330;
  --accent: #4D8DFF;
  --good: #3FBF7F;
  --bad: #E0913F;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Segoe UI Variable Text", "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", "SF Mono", ui-monospace, Consolas, monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
::-webkit-scrollbar { width: 12px; height: 12px; background: var(--bg); }
::-webkit-scrollbar-thumb { background: #2A3444; border-radius: 6px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #59647A; }
::-webkit-scrollbar-corner { background: var(--bg); }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 62rem; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem) 5rem; }

header.site {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1.6rem;
  padding: 1.1rem 0; border-bottom: 1px solid var(--rule); margin-bottom: 2.5rem;
}
header.site .brand { font-family: var(--serif); font-size: 1.25rem; }
header.site .brand em { color: var(--accent); font-style: italic; }
header.site nav { margin-left: auto; display: flex; gap: 1.4rem; }
header.site nav a {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-soft);
}
header.site nav a.on, header.site nav a:hover { color: var(--ink); text-decoration: none; }

.eyebrow {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-soft);
}
h1 {
  font-family: var(--serif); font-weight: 400; letter-spacing: -.01em;
  font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.1; text-wrap: balance;
  margin: .5rem 0 1rem;
}
h1 em { font-style: italic; color: var(--accent); }
.standfirst { font-family: var(--serif); font-size: 1.1rem; color: var(--ink-soft); max-width: 62ch; }

section { margin-top: 3.2rem; }
.sec-head {
  display: flex; align-items: baseline; gap: .9rem;
  border-bottom: 1px solid var(--rule); padding-bottom: .45rem; margin-bottom: 1.1rem;
}
.sec-head h2 { font-family: var(--serif); font-weight: 400; font-size: 1.45rem; }
.sec-head .code {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .14em;
  color: var(--accent); text-transform: uppercase;
}
section > p { max-width: 66ch; color: var(--ink-soft); margin-bottom: .9rem; }
section > p strong, li strong { color: var(--ink); }

.plates { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
figure {
  background: var(--panel); border: 1px solid var(--rule); border-radius: 4px;
  overflow: hidden; display: flex; flex-direction: column;
}
figure img, figure video { width: 100%; height: auto; display: block; }
figcaption {
  padding: .7rem .85rem .9rem; font-size: .84rem; color: var(--ink-soft);
  border-top: 1px solid var(--rule-soft); line-height: 1.5;
}
figcaption .tag {
  display: block; font-family: var(--mono); font-size: .64rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--accent);
  margin-bottom: .25rem;
}
figcaption b { color: var(--ink); }
figure.failed figcaption .tag { color: var(--bad); }

table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; vertical-align: top; padding: .55rem .8rem .55rem 0; border-bottom: 1px solid var(--rule-soft); }
thead th {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-soft); font-weight: 500;
  border-bottom: 1px solid var(--rule);
}
td.sec { font-family: var(--mono); font-size: .7rem; color: var(--accent); white-space: nowrap; padding-top: .68rem; }
td.attr { font-weight: 600; width: 12rem; }
.tablewrap { overflow-x: auto; }

.note {
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  padding: .85rem 1rem; border-radius: 0 4px 4px 0; max-width: 66ch;
  font-size: .93rem; margin: 1rem 0;
}
.note.warn { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 7%, transparent); }
.note .lbl {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .13em;
  text-transform: uppercase; display: block; margin-bottom: .2rem; color: var(--accent);
}
.note.warn .lbl { color: var(--bad); }

.viewer-box {
  background: var(--panel); border: 1px solid var(--rule); border-radius: 4px;
  overflow: hidden; position: relative; height: 24rem;
}
.viewer-box canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.viewer-controls {
  position: absolute; top: .7rem; left: .7rem; display: flex; gap: .35rem; flex-wrap: wrap;
}
.viewer-controls button, .btn {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  background: color-mix(in srgb, var(--bg) 80%, transparent); color: var(--ink-soft);
  border: 1px solid var(--rule); border-radius: 3px; padding: .38rem .7rem; cursor: pointer;
}
.viewer-controls button.on, .viewer-controls button:hover, .btn:hover { color: var(--ink); border-color: var(--ink-soft); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { color: #fff; filter: brightness(1.1); }
.btn:disabled { opacity: .45; cursor: default; }

input[type=text], input[type=password] {
  background: var(--panel); border: 1px solid var(--rule); border-radius: 4px;
  color: var(--ink); font-family: var(--sans); font-size: 1rem;
  padding: .7rem .9rem; width: 100%;
}
input:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
label.check { display: flex; gap: .5rem; align-items: center; color: var(--ink-soft); font-size: .9rem; }

.pipe { border-top: 1px solid var(--rule); }
.step { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--rule-soft); }
.step .n { font-family: var(--mono); font-size: .68rem; color: var(--ink-soft); padding-top: .2rem; }
.step .t { font-weight: 600; }
.step .d { color: var(--ink-soft); font-size: .92rem; max-width: 62ch; }

.log {
  font-family: var(--mono); font-size: .78rem; line-height: 1.7;
  background: var(--panel); border: 1px solid var(--rule); border-radius: 4px;
  padding: .9rem 1rem; max-height: 15rem; overflow-y: auto; color: var(--ink-soft);
}
.log .new { color: var(--ink); }
.chips { display: flex; gap: .45rem; flex-wrap: wrap; margin: .2rem 0 1rem; }
.chip {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .11em;
  text-transform: uppercase; padding: .3rem .7rem; border-radius: 999px;
  border: 1px solid var(--rule); color: var(--ink-soft); background: var(--panel);
  display: inline-flex; align-items: center; gap: .4rem;
}
.chip::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--rule); }
.chip.active { color: var(--ink); border-color: var(--accent); }
.chip.active::before { background: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
.chip.done { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, var(--rule)); }
.chip.done::before { background: var(--good); }
.chip.skipped { opacity: .45; text-decoration: line-through; }
@keyframes pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .chip.active::before { animation: none; } }

.badge {
  display: inline-block; font-family: var(--mono); font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase; padding: .12rem .45rem;
  border-radius: 2px; border: 1px solid currentColor; vertical-align: .08em;
}
.badge.pass { color: var(--good); }
.badge.fail { color: var(--bad); }
.badge.run { color: var(--accent); }

footer.site {
  margin-top: 4rem; border-top: 1px solid var(--rule); padding-top: 1rem;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-soft);
  display: flex; flex-wrap: wrap; gap: .3rem 1.5rem;
}