:root {
  --paper: #f6f5f1;
  --paper-2: #edebe4;
  --ink: #17170f;
  --muted: #4b4942;
  --line: rgba(23, 23, 15, 0.16);
  --pass: #1a7f4b;
  --pass-soft: rgba(26, 127, 75, 0.12);
  --fail: #c2272d;
  --fail-soft: rgba(194, 39, 45, 0.12);
  --pend: #a35d00;
  --pend-soft: rgba(163, 93, 0, 0.12);
  --skip: #6d6a62;
  --skip-soft: rgba(109, 106, 98, 0.12);
  --pad: clamp(16px, 3vw, 40px);
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --focus: 2px solid var(--ink);
}
* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); color-scheme: light; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); font: 400 17px/1.5 var(--display); }
a { color: inherit; }
::selection { background: var(--ink); color: var(--paper); }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; }
.muted { color: var(--muted); }
.str { color: var(--pass); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--ink); color: var(--paper); padding: 8px 12px; }
:focus-visible { outline: var(--focus); outline-offset: 4px; }
.btn { font: 500 12px var(--mono); letter-spacing: 0.04em; color: var(--ink); background: var(--paper); border: 1px solid var(--ink); border-radius: 999px; padding: 7px 12px; cursor: pointer; }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn-run { background: var(--ink); color: var(--paper); }
.btn-run:hover { background: var(--pass); border-color: var(--pass); }
.btn-quiet { border-color: var(--line); color: var(--muted); }
html.running .btn-run { opacity: .5; pointer-events: none; }

/* ---------------------------------------------------------------- top */
.rail { position: fixed; left: 0; top: 0; right: 0; height: 3px; z-index: 60; background: var(--line); }
.rail-fill { height: 100%; background: var(--pass); transform-origin: left; transform: scaleX(0); transition: transform .35s var(--ease); }
.top { position: sticky; top: 0; z-index: 50; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px var(--pad); background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top-name { text-decoration: none; font-weight: 500; }
.top-nav { display: flex; gap: 18px; align-items: center; }
.top-nav a { text-decoration: none; padding: 6px 0; }
.top-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------------------------------------------------------------- hero */
.hero { padding: clamp(40px, 8vh, 96px) var(--pad) 32px; }
.hero-meta { margin: 0 0 24px; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pass); box-shadow: 0 0 0 3px var(--pass-soft); }
html.running .live-dot { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px var(--pass-soft); } }
.hero-name { margin: 0; font-size: clamp(56px, 13vw, 200px); line-height: .9; letter-spacing: -0.045em; text-transform: uppercase; font-weight: 500; font-variation-settings: "wdth" 80, "opsz" 96; }
.hero-name span { display: inline-block; }
.hero-foot { display: grid; grid-template-columns: minmax(0, 32ch) auto; justify-content: space-between; align-items: end; gap: 24px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--ink); }
.hero-premise { margin: 0; font-size: clamp(20px, 2.1vw, 28px); line-height: 1.25; letter-spacing: -0.015em; }
.tally { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px; color: var(--muted); }
.tally b { font-weight: 500; color: var(--ink); font-size: 14px; }
.tally .t-pass b { color: var(--pass); } .tally .t-fail b { color: var(--fail); } .tally .t-pending b { color: var(--pend); }

/* ---------------------------------------------------------------- suites */
.suite { padding: clamp(36px, 6vh, 72px) var(--pad) 8px; }
.suite-head { margin-bottom: 8px; }
.suite-idx { margin: 0 0 8px; color: var(--muted); }
.suite-name { margin: 0; font-size: clamp(40px, 6.5vw, 96px); line-height: .92; letter-spacing: -0.04em; text-transform: uppercase; font-weight: 500; font-variation-settings: "wdth" 80, "opsz" 96; }
.suite-desc { margin: 12px 0 0; color: var(--muted); }
.suite-intro { margin: 18px 0 0; max-width: 60ch; font-size: 19px; line-height: 1.4; color: var(--ink); }
.tests { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--ink); }
.test { border-bottom: 1px solid var(--line); padding: 18px 0 16px; }
.test-row { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; }
.claim { margin: 0; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.12; letter-spacing: -0.02em; font-weight: 500; font-variation-settings: "wdth" 92; transition: color .3s; }
.claim::before { content: "—"; color: var(--line); margin-right: .4em; }
.test[data-status="queued"] .claim { color: var(--muted); }
.test-meta { margin: 8px 0 0; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.test-meta .tid { color: var(--muted); }
.test-meta .note { color: var(--ink); font-family: var(--display); font-size: 15px; letter-spacing: 0; line-height: 1.35; flex-basis: 100%; }
.test-meta .note:empty { display: none; }
.ev-toggle { font: inherit; color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ev-toggle:hover { color: var(--ink); }
.ev-toggle[aria-expanded="true"]::after { content: " ▴"; } .ev-toggle[aria-expanded="false"]::after { content: " ▾"; }
.evidence { margin-top: 12px; border-left: 2px solid var(--line); padding-left: 14px; }
.evidence pre { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: 12px; line-height: 1.55; color: var(--ink); }
.ev-src { margin-top: 10px; }
.ev-src summary { cursor: pointer; color: var(--muted); }
.ev-code { margin-top: 8px !important; color: var(--muted) !important; max-height: 360px; overflow: auto; }

/* stamps */
.stamp-slot { width: 124px; height: 44px; display: grid; place-items: center; }
.stamp { display: inline-block; font: 700 14px/1 var(--mono); letter-spacing: .14em; padding: 10px 13px 9px; border: 2.5px solid currentColor; border-radius: 5px; box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3px currentColor; color: var(--muted); transform: scale(.4) rotate(-8deg); opacity: 0; transition: transform .28s cubic-bezier(.2, 1.4, .4, 1), opacity .1s; mix-blend-mode: multiply; }
.test[data-status="running"] .stamp { opacity: 1; transform: none; border-color: transparent; color: var(--muted); animation: blink .9s steps(2) infinite; }
@keyframes blink { 50% { opacity: .25; } }
.test[data-status="pass"] .stamp, .test[data-status="fail"] .stamp, .test[data-status="pending"] .stamp, .test[data-status="skip"] .stamp { opacity: 1; transform: rotate(var(--tilt, -4deg)); }
.test[data-status="pass"] .stamp { color: var(--pass); background: var(--pass-soft); }
.test[data-status="fail"] .stamp { color: var(--fail); background: var(--fail-soft); }
.test[data-status="pending"] .stamp { color: var(--pend); background: var(--pend-soft); }
.test[data-status="skip"] .stamp { color: var(--skip); background: var(--skip-soft); }
.test:nth-child(2n) .stamp { --tilt: 3deg; } .test:nth-child(3n) .stamp { --tilt: -2deg; } .test:nth-child(5n) .stamp { --tilt: 5deg; }
.test[data-status="fail"] .claim { color: var(--fail); }
@media (prefers-reduced-motion: reduce) { .stamp { transition: none; } .test[data-status="running"] .stamp { animation: none; } .rail-fill { transition: none; } html { scroll-behavior: auto; } html.running .live-dot { animation: none; } }

/* ---------------------------------------------------------------- contact + verdict + footer */
.contact-extra { padding-top: 24px; }
.contact-box { border: 1px solid var(--ink); border-radius: 16px; padding: 22px 22px 18px; }
.contact-line { margin: 12px 0 0; font-size: clamp(22px, 3vw, 40px); letter-spacing: -0.02em; }
.mail { text-decoration: none; border-bottom: 2px solid var(--ink); }
.contact-actions { margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.verdict { padding: clamp(48px, 10vh, 120px) var(--pad) 40px; }
.verdict-line { margin: 8px 0 0; font-size: clamp(30px, 5vw, 72px); line-height: 1; letter-spacing: -0.035em; font-weight: 500; font-variation-settings: "wdth" 84, "opsz" 96; }
.verdict .muted { margin: 10px 0 0; }
.verdict-actions { margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.report { width: 100%; min-height: 240px; margin-top: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-2); color: var(--ink); padding: 12px; font-size: 12px; line-height: 1.5; }
.verdict-note { margin: 22px 0 0; max-width: 52ch; }
.footer { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 24px var(--pad) 40px; border-top: 1px solid var(--line); color: var(--muted); }
.footer a { color: var(--muted); }

@media (max-width: 720px) {
  .top-nav a:not(:last-of-type):not(:first-of-type) { display: none; }
  .top-nav .nav-long { display: none; }
  .hero-foot { grid-template-columns: 1fr; }
  .test-row { grid-template-columns: 1fr auto; gap: 12px; align-items: start; }
  .stamp-slot { width: 88px; height: 34px; }
  .stamp { font-size: 11px; padding: 7px 8px 6px; }
  .claim::before { display: none; }
}
@media print { .top, .rail, .btn, .ev-toggle, .report { display: none !important; } .evidence { display: block !important; } .stamp { transform: none; opacity: 1; } }