/* RockSalt */
@font-face {
  font-family: 'Rock Salt';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/RockSalt-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Elite 400 */
@font-face {
  font-family: 'Special Elite';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/Elite-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* CourierPrime 400 */
@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/CourierPrime-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* CourierPrime 700 */
@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/CourierPrime-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Caveat 500 */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/Caveat-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Caveat 700 */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/Caveat-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* BigShoulders */
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
  src: url(/static/fonts/BigShoulders.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* MartianMono */
@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 300 700;
  font-stretch: 75% 112%;
  font-display: swap;
  src: url(/static/fonts/MartianMono.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Skyptic. The look of an observatory's plate record: photographic paper with a little grain, ink, hairline rules, square corners,
   a registration mark in every corner, and one rubber stamp for the verdict.
   Big Shoulders Display (the stamp and the headlines), Instrument Sans (the words), Martian Mono (every number, every raw row).
   Vermilion kills, green survives, amber holds. Light by default, dark with the system, red-on-black night vision for the eyepiece. Room 71. */
:root {
  --paper: #ece6d8; --card: #f6f2e8; --sunk: #e2dac8; --line: #cdc3ab; --line2: #a89f89;
  --ink: #0e0d1b; --ink2: #3d3955; --muted: #6f6983;
  --kill: #e4341f; --kill-bg: #f7d9cf; --hold: #bf8300; --hold-bg: #f5e6bd; --pass: #137a4c; --pass-bg: #d4ebdc;
  --none: #a39cb3; --link: #1d3db3; --accent: #e4341f; --inkbg: #0e0d1b; --onink: #f1ecdf; --grain: .5;
  --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "Martian Mono", ui-monospace, Menlo, monospace;
  color-scheme: light;
}
:root.night {
  --paper: #090000; --card: #120202; --sunk: #1a0404; --line: #3a0b0b; --line2: #571212; --ink: #ff5a4c; --ink2: #e0463a; --muted: #a8382f;
  --kill: #ff2a1f; --kill-bg: #2a0606; --hold: #ff7a6e; --hold-bg: #200505; --pass: #ff8a7e; --pass-bg: #1a0404; --none: #6a1c17;
  --link: #ff6a5c; --accent: #ff2a1f; --inkbg: #000; --onink: #ff5a4c; --grain: 0; color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; }
body { background: var(--paper); color: var(--ink); font: 17px/1.58 var(--sans); -webkit-font-smoothing: antialiased; position: relative; }
/* the paper's grain */
body::before { content: ""; position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3  0 0 0 0 .25  0 0 0 0 .2  0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
code { font: .78em var(--mono); background: var(--sunk); padding: 2px 6px; }
button { font: inherit; cursor: pointer; color: inherit; border-radius: 0; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.mono { font: 12.5px var(--mono); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 12px; top: 8px; z-index: 60; background: var(--card); padding: 8px 12px; }
.arr { display: inline-block; width: .9em; height: .9em; vertical-align: -.1em; margin-left: .3em; }

/* ------------------------------------------------ header and the ruler beneath it */
.top { display: flex; align-items: center; gap: 18px; padding: 12px max(28px, calc((100vw - 1160px) / 2 + 28px)) 10px; background: var(--paper); position: sticky; top: 0; z-index: 30; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 900 32px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; }
.mark { width: 40px; height: 40px; color: var(--ink); overflow: visible; }
.mark .pupil { fill: var(--accent); transform-origin: 24px 28px; transition: transform .25s cubic-bezier(.3, 2, .5, 1); }
.brand:hover .pupil { transform: scale(1.35); }
.nav { display: flex; gap: 22px; margin-left: 14px; }
.nav a { color: var(--ink2); text-decoration: none; font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 4px 0; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--ink); border-color: var(--accent); }
.top .sp { margin-left: auto; }
.doors { display: flex; border: 2px solid var(--ink); }
.doors a { padding: 5px 13px; color: var(--ink); text-decoration: none; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.doors a + a { border-left: 2px solid var(--ink); }
.doors a.on { background: var(--ink); color: var(--paper); }
.pill { background: none; border: 2px solid var(--ink); color: var(--ink); padding: 5px 12px; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.pill[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.ruler { height: 12px; position: sticky; top: 61px; z-index: 29; margin: 0 max(28px, calc((100vw - 1160px) / 2 + 28px));
  background: repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 10px) bottom/100% 5px no-repeat, repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 50px) bottom/100% 12px no-repeat; opacity: .55; }

main { max-width: 1160px; margin: 0 auto; padding: 0 28px 80px; }
.eyebrow { font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); margin: 0 0 16px; display: flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 9px; height: 9px; background: var(--accent); flex: none; }
.eyebrow b { font-weight: 600; color: var(--ink); }
.eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--line2); max-width: 220px; }

/* registration marks: a + in each corner of a plate */
.reg { position: relative; }
.reg::before, .reg::after { content: "+"; position: absolute; font: 300 22px/1 var(--mono); color: var(--ink); opacity: .7; }
.reg::before { left: -9px; top: -13px; } .reg::after { right: -9px; bottom: -11px; }

/* ------------------------------------------------ hero */
.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px 56px; padding: 44px 0 44px; align-items: center; }
.hero h1 { font: 900 clamp(54px, 7vw, 98px)/.9 var(--display); letter-spacing: -.005em; text-transform: uppercase; margin: 0 0 26px; }
.hero h1 > span { display: block; white-space: nowrap; }
.hero h1 .l2 { color: var(--accent); position: relative; display: inline-block; }
.hero h1 .l2::after { content: ""; position: absolute; left: -2%; right: -2%; top: 50%; height: .075em; background: var(--ink); transform: rotate(-4deg) scaleX(0); transform-origin: left center; animation: slash .55s .7s cubic-bezier(.7, 0, .2, 1) forwards; }
@keyframes slash { to { transform: rotate(-4deg) scaleX(1); } }
.lede { color: var(--ink2); font-size: clamp(18px, 2vw, 21px); max-width: 560px; margin: 0; line-height: 1.5; }
.lede b { color: var(--ink); font-weight: 600; }

/* the blink plate: two exposures of one field; whatever jumps is the candidate */
.plate { margin: 0; position: relative; }
.plate svg { display: block; width: 100%; height: auto; border: 2px solid var(--ink); background: #0b0a18; }
.plate figcaption { font: 400 12px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); margin-top: 10px; display: flex; gap: 14px; justify-content: space-between; }
.plate .f1, .plate .f2 { animation: blink 2.4s steps(1) infinite; }
.plate .f2 { animation-name: blink2; }
@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes blink2 { 0% { opacity: 0; } 50% { opacity: 1; } }
.plate .lab1 { animation: blink 2.4s steps(1) infinite; } .plate .lab2 { animation: blink2 2.4s steps(1) infinite; }
.plate .twinkle { animation: tw 3.6s ease-in-out infinite; } @keyframes tw { 50% { opacity: .35; } }

/* ------------------------------------------------ cards and the submit plate */
.card { background: var(--card); border: 2px solid var(--ink); padding: 26px; margin: 22px 0; position: relative; }
.card h2 { margin: 0 0 8px; font: 800 38px/.95 var(--display); letter-spacing: .005em; text-transform: uppercase; }
.card h3 { font: 700 18px/1.3 var(--sans); margin: 0 0 6px; }
.submit { box-shadow: 9px 9px 0 var(--ink); margin: 0 9px 40px 0; padding: 22px 24px 20px; }
.submit::before, .submit::after { content: "+"; position: absolute; font: 300 22px/1 var(--mono); color: var(--ink); }
.submit::before { left: -10px; top: -14px; } .submit::after { right: -10px; bottom: -12px; display: none; }
.tabs { display: flex; gap: 0; margin: -4px 0 16px; flex-wrap: wrap; border-bottom: 2px solid var(--ink); }
.tabs button { background: none; border: 0; color: var(--muted); padding: 8px 16px 9px; font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; margin-bottom: -2px; border-bottom: 4px solid transparent; }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.beta { font: 600 12px var(--mono); color: var(--hold); border: 1px solid var(--hold); padding: 1px 5px; margin-left: 6px; vertical-align: 2px; letter-spacing: .06em; }
.lbl { display: block; color: var(--ink2); font-size: 15px; margin-bottom: 9px; }
textarea { width: 100%; min-height: 150px; resize: vertical; color: var(--ink); border: 2px solid var(--line2); border-radius: 0; padding: 8px 14px; font: 12px/22px var(--mono); white-space: pre; overflow-x: auto;
  background: var(--paper) repeating-linear-gradient(transparent 0 21px, color-mix(in srgb, var(--line2) 55%, transparent) 21px 22px) 0 8px; }
textarea::placeholder { color: var(--muted); opacity: .7; }
textarea:focus, input:focus { outline: 3px solid var(--accent); outline-offset: 0; border-color: var(--ink); }
textarea.short { min-height: 110px; white-space: pre-wrap; font: 17px/22px var(--sans); }
input:not([type]), input[type=text] { background: var(--paper); color: var(--ink); border: 2px solid var(--line2); border-radius: 0; padding: 5px 8px; font: 13px var(--mono); }
.row { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; margin-top: 14px; }
.inline { color: var(--ink2); font-size: 14.5px; display: flex; gap: 7px; align-items: center; }
.chk input { accent-color: var(--accent); width: 17px; height: 17px; }
.file { border: 2px dashed var(--line2); padding: 5px 13px; color: var(--ink2); font: 500 12px var(--mono); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; position: relative; overflow: hidden; }
.file:hover { border-color: var(--ink); color: var(--ink); } .file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.actions { margin-top: 18px; }
.primary { background: var(--accent); color: #fff; border: 2px solid var(--ink); font: 900 30px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; padding: 11px 30px 9px; box-shadow: 5px 5px 0 var(--ink); transition: transform .08s, box-shadow .08s; display: inline-flex; align-items: center; gap: 12px; }
.primary svg { width: 22px; height: 22px; }
.primary:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); } .primary:active { transform: translate(4px, 4px); box-shadow: 1px 1px 0 var(--ink); }
.primary:disabled { opacity: .75; cursor: progress; }
.status { color: var(--ink2); font: 12px var(--mono); }
.hint { color: var(--muted); font-size: 13.5px; margin: 16px 0 0; display: flex; gap: 9px; line-height: 1.5; }
.hint svg { flex: none; width: 16px; height: 16px; margin-top: 3px; }
.examples { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.examples .muted { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; margin-right: 4px; }
.examples button { background: none; border: 1.5px solid var(--ink); padding: 4px 11px; font: 500 12px var(--mono); letter-spacing: .02em; color: var(--ink); }
.examples button:hover { background: var(--ink); color: var(--paper); }

/* ------------------------------------------------ the gauntlet: ten gates, a candidate running them */
.gauntlet { display: grid; grid-template-columns: repeat(10, 1fr); position: relative; margin: 8px 0 0; }
.gate { text-align: center; position: relative; padding: 0 2px; }
.gate::before { content: ""; position: absolute; top: 22px; left: -50%; width: 100%; height: 3px; background: var(--ink); z-index: 0; }
.gate:first-child::before { display: none; }
.gate.pending::before { background: var(--line2); }
.gate.after::before { background: repeating-linear-gradient(90deg, var(--line2) 0 5px, transparent 5px 10px); }
.m { display: inline-grid; place-items: center; width: 26px; height: 26px; font: 800 15px/1 var(--display); border: 2px solid var(--pass); color: var(--pass); background: var(--card); flex: none; position: relative; letter-spacing: .02em; }
.m.killed { background: var(--kill); border-color: var(--kill); color: #fff; }
.m.held { background: var(--hold); border-color: var(--hold); color: #fff; }
.m.not_run { border: 2px dashed var(--none); color: var(--muted); }
.m.note { border-color: var(--pass); color: var(--pass); }
.gate .m { width: 46px; height: 46px; font-size: 28px; z-index: 1; border-width: 3px; transition: transform .25s cubic-bezier(.3, 2, .5, 1), background .2s, border-color .2s, color .2s; }
.gate .m.killed::after { content: ""; position: absolute; left: -8px; right: -8px; top: 50%; height: 4px; background: var(--ink); transform: rotate(-35deg); }
.gate .name { display: block; font: 500 12.5px/1.25 var(--sans); font-stretch: 85%; color: var(--ink2); margin-top: 9px; padding: 0 3px; }
.gate.pending .m { background: var(--card); border-color: var(--line2); color: var(--line2); border-style: solid; }
.gate.pop .m { transform: scale(1.22); }
.gate.killed-gate .name { color: var(--kill); font-weight: 700; }
.runner { position: absolute; top: 10px; left: 0; width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--accent); z-index: 2; transition: left .55s cubic-bezier(.5, 0, .2, 1), opacity .3s; pointer-events: none; margin-left: -13px; background: color-mix(in srgb, var(--accent) 18%, transparent); }
.runner::before, .runner::after { content: ""; position: absolute; background: var(--accent); }
.runner::before { left: 50%; top: -9px; bottom: -9px; width: 2px; margin-left: -1px; } .runner::after { top: 50%; left: -9px; right: -9px; height: 2px; margin-top: -1px; }
.runner.gone { opacity: 0; } .runner.won { border-color: var(--pass); background: color-mix(in srgb, var(--pass) 18%, transparent); }
.runner.won::before, .runner.won::after { background: var(--pass); }

/* ------------------------------------------------ the verdict: a stamp, then the sentence */
.result-head { display: flex; gap: 14px; align-items: center; font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); margin: 10px 0 0; }
.result-head::after { content: ""; flex: 1; height: 1px; background: var(--line2); }
.verdict { padding: 30px 30px 24px; margin: 14px 0 22px; border: 2px solid var(--ink); background: var(--card); position: relative; }
.verdict.v-survivor { background: var(--pass-bg); }
.vgrid { display: grid; grid-template-columns: minmax(250px, 410px) 1fr; gap: 20px 44px; align-items: center; }
.stamp { justify-self: center; transform: rotate(-5deg); color: var(--hold); border: 7px solid currentColor; outline: 2px solid currentColor; outline-offset: 4px; padding: 6px 26px 8px; text-align: center; mix-blend-mode: multiply; filter: url(#rough); animation: thud .55s cubic-bezier(.2, 1.6, .4, 1) both; margin: 8px 10px; }
.stamp .big { display: block; font: 900 clamp(60px, 7vw, 92px)/.86 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.stamp .sub { display: block; font: 700 12px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; padding-top: 6px; border-top: 3px solid currentColor; margin-top: 8px; }
.v-killed .stamp { color: var(--kill); } .v-survivor .stamp { color: var(--pass); mix-blend-mode: normal; } .v-unread .stamp, .v-static .stamp { color: var(--muted); }
@keyframes thud { 0% { transform: rotate(-14deg) scale(2.4); opacity: 0; } 60% { opacity: 1; } 100% { transform: rotate(-5deg) scale(1); opacity: 1; } }
.verdict h2 { font: 800 clamp(38px, 5.4vw, 72px)/.92 var(--display); text-transform: uppercase; letter-spacing: 0; margin: 0 0 14px; }
.verdict p { margin: 8px 0; max-width: 720px; font-size: 18px; }
.verdict .next { border-left: 5px solid var(--ink); padding: 8px 0 8px 16px; font-size: 16px; margin-top: 16px; }
.verdict .rate { color: var(--muted); font: 12px/1.6 var(--mono); margin-top: 14px; }
.verdict .gauntlet { margin: 34px 0 6px; }
.viewbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 22px; padding-top: 16px; border-top: 2px solid var(--ink); }
.switch { display: inline-flex; border: 2px solid var(--ink); }
.switch button { border: 0; background: none; padding: 5px 14px; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.switch button + button { border-left: 2px solid var(--ink); }
.switch button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.btn2 { background: none; border: 2px solid var(--ink); padding: 5px 14px; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.btn2:hover { background: var(--ink); color: var(--paper); }
.btn2.solid { background: var(--ink); color: var(--paper); } .btn2.solid:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.viewbar .sp { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.qa { width: 100%; border-collapse: collapse; margin-top: 6px; }
.qa td { padding: 14px 10px; border-top: 1px solid var(--line2); vertical-align: top; }
.qa tr:first-child td { border-top: 0; }
.qa .q { font-weight: 600; width: 44%; } .qa .q .m { margin-right: 12px; vertical-align: -7px; }
.qa .a { font: 700 13px var(--mono); letter-spacing: .04em; text-transform: uppercase; } .qa .a span { display: block; font: 400 15px/1.45 var(--sans); text-transform: none; letter-spacing: 0; color: var(--ink2); margin-top: 4px; word-break: break-word; }
.qa .a.killed { color: var(--kill); } .qa .a.passed { color: var(--pass); } .qa .a.held { color: var(--hold); } .qa .a.not_run, .qa .a.note { color: var(--muted); }
.qa tr.is-killed td { background: var(--kill-bg); } .qa tr.is-killed td:first-child { box-shadow: inset 6px 0 0 var(--kill); }
.checks { list-style: none; padding: 0; margin: 12px 0 0; }
.checks li { display: grid; grid-template-columns: 34px minmax(150px, 1fr) 2.4fr; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line2); align-items: start; }
.cname { font-weight: 700; } .cq { display: block; font-weight: 400; font-size: 13px; color: var(--muted); }
.cline { font-size: 15px; word-break: break-word; } .src { color: var(--muted); font-size: 12.5px; }
details.ev { margin-top: 6px; } details.ev summary { cursor: pointer; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--link); }
details.ev pre { background: var(--paper); border: 1px solid var(--line2); padding: 10px 12px; font: 12px/1.5 var(--mono); overflow-x: auto; margin: 8px 0 0; max-height: 280px; }
pre { background: var(--paper); border: 1px solid var(--line2); padding: 12px; font: 12px/1.55 var(--mono); overflow-x: auto; }
.desk { border: 2px solid var(--ink); box-shadow: 7px 7px 0 var(--ink); margin-right: 7px; } .desk h3 { font: 800 30px/1 var(--display); text-transform: uppercase; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 22px; margin: 12px 0; font-size: 15px; } .kv span:nth-child(odd) { color: var(--muted); font: 500 12px/1.9 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.prov { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font: 400 12px var(--mono); letter-spacing: .04em; color: var(--muted); margin: 10px 0 0; text-transform: uppercase; }
.vt { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 15px; }
.vt th { text-align: left; font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 8px; border-bottom: 2px solid var(--ink); }
.vt td { padding: 11px 8px; border-top: 1px solid var(--line2); vertical-align: top; }
.vt tr.click { cursor: pointer; } .vt tr.click:hover td { background: var(--sunk); }
.vt tr.r-killed td.code { color: var(--kill); } .vt tr.r-survivor td.code { color: var(--pass); } .vt tr.r-held td.code { color: var(--hold); }
.vt td.code { font: 700 12px var(--mono); letter-spacing: .04em; } .marks { display: inline-flex; gap: 3px; flex-wrap: nowrap; } .marks .m { width: 24px; height: 24px; font-size: 14px; border-width: 2px; }
.legend { display: flex; gap: 6px 18px; flex-wrap: wrap; font: 12px var(--mono); color: var(--muted); margin: 8px 0 12px; align-items: center; }
.legend .m { width: 18px; height: 18px; font-size: 12px; margin-right: 5px; }

/* ------------------------------------------------ the sections below, each a numbered plate */
.band { margin: 84px 0 0; }
.band h2 { font: 900 clamp(46px, 7vw, 98px)/.86 var(--display); text-transform: uppercase; letter-spacing: -.005em; margin: 0 0 18px; max-width: 900px; }
.band > p { color: var(--ink2); max-width: 640px; margin: 0 0 28px; font-size: 18px; }
.demo { background: var(--inkbg); color: var(--onink); padding: 40px 34px 34px; margin-top: 84px; position: relative;
  background-image: linear-gradient(color-mix(in srgb, var(--onink) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--onink) 7%, transparent) 1px, transparent 1px); background-size: 32px 32px; }
.demo .eyebrow { color: color-mix(in srgb, var(--onink) 75%, transparent); } .demo .eyebrow b { color: var(--onink); } .demo .eyebrow::after { background: color-mix(in srgb, var(--onink) 35%, transparent); }
.demo h2 { font: 900 clamp(40px, 6vw, 82px)/.88 var(--display); text-transform: uppercase; margin: 0 0 14px; max-width: 880px; }
.demo p { margin: 0 0 34px; max-width: 600px; opacity: .8; font-size: 18px; }
.demo .gate .name { color: color-mix(in srgb, var(--onink) 80%, transparent); }
.demo .gate .m { background: var(--inkbg); }
.demo .gate::before { background: var(--onink); }
.demo .gate.pending::before { background: color-mix(in srgb, var(--onink) 25%, transparent); }
.demo .gate.pending .m { background: var(--inkbg); border-color: color-mix(in srgb, var(--onink) 28%, transparent); color: color-mix(in srgb, var(--onink) 35%, transparent); }
.demo .gate .m.killed::after { background: var(--onink); }
.demo .caption { margin-top: 26px; font: 500 12.5px var(--mono); letter-spacing: .04em; min-height: 22px; }
.rates { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 0; border-top: 2px solid var(--ink); border-left: 2px solid var(--ink); }
.rate-row { background: var(--card); border: 2px solid var(--ink); border-top: 0; border-left: 0; padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 6px; }
.rate-row .big { font: 900 76px/.8 var(--display); letter-spacing: -.01em; }
.rate-row .of { color: var(--muted); font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.rate-row .what { font-weight: 700; line-height: 1.25; order: -1; min-height: 2.5em; }
.rate-row .bar { height: 10px; background: repeating-linear-gradient(90deg, var(--line) 0 3px, transparent 3px 5px); margin-top: 4px; position: relative; }
.rate-row .bar i { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--pass) 0 3px, transparent 3px 5px); }
.rate-row .how { color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.rate-row.weak .bar i { background: repeating-linear-gradient(90deg, var(--hold) 0 3px, transparent 3px 5px); } .rate-row.weak .big { color: var(--hold); }
.rate-row.zero .big { color: var(--kill); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 28px 34px; }
.grid p { margin: 6px 0 0; color: var(--ink2); font-size: 15.5px; } .grid h3 { display: flex; gap: 12px; align-items: center; font: 800 25px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.twodoors { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.door { background: var(--card); border: 2px solid var(--ink); padding: 26px; text-decoration: none; color: var(--ink); display: block; transition: transform .15s, box-shadow .15s; position: relative; }
.door:hover { transform: translate(-4px, -4px); box-shadow: 9px 9px 0 var(--ink); }
.door h3 { font: 900 clamp(36px, 4vw, 54px)/.9 var(--display); text-transform: uppercase; margin: 0 0 10px; } .door p { margin: 0; color: var(--ink2); font-size: 16px; } .door .go { display: block; margin-top: 18px; font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
footer { margin-top: 90px; border-top: 2px solid var(--ink); position: relative; overflow: hidden; }
footer .inner { max-width: 1160px; margin: 0 auto; padding: 34px 28px 0; display: grid; grid-template-columns: 1fr auto; gap: 16px 40px; align-items: end; color: var(--muted); font-size: 14px; }
footer .joke { font: 800 clamp(26px, 3.4vw, 40px)/1 var(--display); text-transform: uppercase; color: var(--ink); max-width: 700px; letter-spacing: .01em; }
footer p { margin: 10px 0 0; max-width: 720px; } footer nav { display: flex; gap: 20px; flex-wrap: wrap; font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
footer nav a { color: var(--ink); }
footer .wordmark { font: 900 clamp(110px, 25vw, 380px)/.74 var(--display); text-transform: uppercase; letter-spacing: .01em; color: transparent; -webkit-text-stroke: 2px var(--ink); white-space: nowrap; text-align: center; margin: 26px 0 -.14em; user-select: none; }
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 50; }
/* the pages that are only words */
.prose { max-width: 760px; padding-top: 52px; } .prose h1 { font: 900 clamp(56px, 9vw, 118px)/.86 var(--display); text-transform: uppercase; margin: 0 0 24px; }
.prose h2 { font: 800 clamp(30px, 4vw, 44px)/.95 var(--display); text-transform: uppercase; margin: 46px 0 10px; display: flex; align-items: center; gap: 14px; } .prose p, .prose li { font-size: 18px; color: var(--ink2); } .prose p b, .prose li b { color: var(--ink); }
.prose.wide { max-width: 1160px; }
.spin { display: inline-block; width: 11px; height: 11px; border: 2px solid var(--line2); border-top-color: var(--accent); border-radius: 50%; animation: sp .7s linear infinite; vertical-align: -1px; margin-right: 8px; }
@keyframes sp { to { transform: rotate(360deg); } }
.pro-only { display: none !important; } body.pro .pro-only { display: flex !important; }
#result, #input { scroll-margin-top: 90px; }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding-top: 30px; gap: 26px; }
  .plate { order: 2; }
}
@media (max-width: 760px) {
  body { font-size: 16.5px; }
  .top { padding: 9px 16px 8px; gap: 10px; flex-wrap: wrap; } .nav { display: none; } .brand { font-size: 28px; } .mark { width: 34px; height: 34px; }
  .ruler { top: 50px; margin: 0 16px; }
  main { padding: 0 16px 60px; }
  .submit { box-shadow: 6px 6px 0 var(--ink); padding: 16px; margin-right: 6px; }
  .primary { font-size: 27px; padding: 10px 22px 8px; }
  .gauntlet { grid-template-columns: repeat(5, 1fr); gap: 18px 0; }
  .gate:nth-child(5n+1)::before { display: none; }
  .gate .m { width: 42px; height: 42px; font-size: 25px; } .gate::before { top: 20px; }
  .runner { display: none; }
  .verdict { padding: 22px 16px 18px; } .vgrid { grid-template-columns: 1fr; gap: 6px; } .stamp { margin: 14px 10px 22px; }
  .qa .q { width: auto; } .qa, .qa tbody, .qa tr, .qa td { display: block; width: 100%; } .qa td { border: 0; padding: 4px 0; } .qa tr { padding: 12px 0; border-top: 1px solid var(--line2); } .qa tr:first-child { border-top: 0; }
  .checks li { grid-template-columns: 34px 1fr; } .checks .cline { grid-column: 1 / -1; }
  .twodoors { grid-template-columns: 1fr; } .band { margin-top: 60px; } .demo { padding: 26px 16px; margin-top: 60px; }
  footer .inner { grid-template-columns: 1fr; padding: 28px 16px 0; }
  .vt th:nth-child(4), .vt td:nth-child(4), .vt th:nth-child(5), .vt td:nth-child(5) { display: none; } .vt td .marks { flex-wrap: wrap; }
  .doors a { padding: 5px 9px; font-size: 12px; } .pill { font-size: 12px; padding: 5px 9px; }
  .rate-row .big { font-size: 64px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .hero h1 .l2::after { transform: rotate(-4deg) scaleX(1); } .plate .f2, .plate .lab2 { opacity: 0; } }
:root.night .stamp { mix-blend-mode: normal; }

.datestamp { position: absolute; right: 22px; top: 18px; font: 600 12px/1.45 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #1d3db3; border: 2px solid currentColor; padding: 4px 9px 3px; transform: rotate(3.5deg); mix-blend-mode: multiply; filter: url(#rough); opacity: .8; text-align: center; z-index: 1; }
.v-survivor .datestamp { color: #137a4c; }
:root.night .datestamp { color: var(--ink2); mix-blend-mode: normal; }
.pill .long { display: inline; }
@media (max-width: 760px) {
  .top { position: static; flex-wrap: wrap; row-gap: 10px; padding-bottom: 12px; } .ruler { position: static; margin-top: 0; }
  .top .brand { order: 1; flex: 1; } .top .pill { order: 2; } .top .sp { display: none; }
  .top .doors { order: 3; width: 100%; } .doors a { flex: 1; text-align: center; padding: 7px 4px; }
  .pill .long { display: none; }
  .eyebrow { display: block; line-height: 1.5; } .eyebrow::before { display: inline-block; margin-right: 8px; vertical-align: 1px; } .eyebrow::after { display: none; }
  .datestamp { right: 12px; top: 10px; font-size: 12px; }
  .result-head { flex-wrap: wrap; gap: 4px 12px; } .result-head::after { display: none; }
}
.verdict h2 { padding-right: 140px; } @media (max-width: 760px) { .verdict h2 { padding-right: 0; } .vgrid { padding-top: 30px; } }
.verdict .beat { font: 900 clamp(30px, 3.6vw, 48px)/1 var(--display); text-transform: uppercase; color: var(--pass); margin: 22px 0 0; letter-spacing: .01em; }

/* the pages that are not the home */
.demo { margin-top: 40px; }
.how-doors { margin-top: 30px; }
.prose .grid { margin-top: 18px; } .prose .grid p { font-size: 15.5px; }
.prose.wide > p, .prose.wide > h1, .prose.wide > h2, .prose.wide > .eyebrow { max-width: 760px; } .prose.wide > h2.keep { max-width: none; }

/* night vision, first step: the navy folder */
:root.dark {
  --paper: #0d0c1a; --card: #15132a; --sunk: #1c1a36; --line: #2b2850; --line2: #433f78; --ink: #f1ecdf; --ink2: #c9c3de; --muted: #8f89b0;
  --kill: #ff5a43; --kill-bg: #3b1a22; --hold: #f0b43a; --hold-bg: #37301a; --pass: #4fd391; --pass-bg: #123227; --none: #58527f;
  --link: #8fa8ff; --accent: #ff5a43; --inkbg: #060512; --onink: #f1ecdf; --grain: .25; color-scheme: dark;
}
:root.dark .stamp { mix-blend-mode: normal; } :root.dark .datestamp { color: #8fa8ff; mix-blend-mode: normal; }
.pill { min-width: 112px; }

.nav { gap: 20px; } .nav a { white-space: nowrap; letter-spacing: .07em; }
main { padding-bottom: 28px; } footer { margin-top: 56px; }
.prose .demo p { color: color-mix(in srgb, var(--onink) 82%, transparent); font-size: 18px; max-width: 600px; }
.prose .demo h2 { display: block; margin: 0 0 14px; max-width: 880px; }
.prose .demo { margin: 34px 0 10px; }
@media (max-width: 1100px) { .nav { gap: 14px; } .nav a { font-size: 12px; } }
.prose .eyebrow { font-size: 12px; color: var(--ink2); }

/* the agent button, and the footer's links above the wordmark */
.agentbtn { display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: var(--paper); text-decoration: none; border: 2px solid var(--ink); padding: 5px 13px 5px 11px; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.agentbtn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.agentbtn .ph { width: 16px; height: 16px; flex: none; }
footer .inner { position: relative; z-index: 3; } footer .wordmark { pointer-events: none; position: relative; z-index: 1; }
@media (max-width: 1180px) { .top .doors a { padding: 5px 9px; } .agentbtn span { display: none; } .agentbtn { padding: 6px 9px; } }
@media (max-width: 760px) { .top .agentbtn { order: 2; } .top .pill { order: 2; } }
.copy { float: right; background: none; border: 2px solid var(--ink); font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; margin: 0 0 0 10px; color: var(--ink); }
.copy:hover { background: var(--ink); color: var(--paper); }
.say { border: 2px solid var(--ink); background: var(--card); padding: 16px 18px; margin: 14px 0; box-shadow: 6px 6px 0 var(--ink); margin-right: 6px; }
.say pre { background: none; border: 0; padding: 0; margin: 8px 0 0; white-space: pre-wrap; font: 12.5px/1.6 var(--mono); }
.say .k { font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.way { display: grid; grid-template-columns: 150px 1fr; gap: 6px 26px; padding: 22px 0; border-top: 2px solid var(--ink); }
.way .st { font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; } .way .st b { display: block; font: 900 38px/.9 var(--display); letter-spacing: 0; margin-bottom: 6px; }
.way .st i { font-style: normal; color: var(--pass); } .way .st i.soon { color: var(--hold); }
.way h3 { font: 800 26px/1 var(--display); text-transform: uppercase; margin: 0 0 8px; } .way p, .way li { font-size: 16.5px; } .way pre { margin: 10px 0; }
@media (max-width: 760px) { .way { grid-template-columns: 1fr; } }
.pill { min-width: 0; } .top { gap: 14px; } .nav { margin-left: 6px; gap: 18px; }
@media (max-width: 1340px) { .nav a:nth-child(3) { display: none; } }
@media (max-width: 1130px) { .nav { display: none; } }
.pill, .agentbtn, .doors, .brand { flex: none; }
.agentbtn { padding-top: 3px; padding-bottom: 3px; } .agentbtn .t { display: flex; flex-direction: column; line-height: 1.15; }
.agentbtn .t small { font: 600 12px/1.2 var(--mono); letter-spacing: .28em; opacity: .75; }
@media (max-width: 1180px) { .agentbtn .t { display: none; } }

.hero h1 .l2 { color: var(--accent); }
.hero h1 .l2::after { top: auto; bottom: -.04em; left: 0; right: auto; width: 100%; height: .09em; background: var(--accent); transform: scaleX(0); transform-origin: left center; animation: bar .6s .7s cubic-bezier(.7, 0, .2, 1) forwards; }
@keyframes bar { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .hero h1 .l2::after { transform: scaleX(1); } }

/* the real cases: a label, then five equal boxes in one row */
.examples { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
.examples .muted { grid-column: 1 / -1; margin: 0 0 -2px; }
.examples button { display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px 12px; min-height: 52px; line-height: 1.3; font-size: 12px; }
@media (max-width: 980px) { .examples { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .examples { grid-template-columns: repeat(2, minmax(0, 1fr)); } .examples button { min-height: 48px; } }
@media (max-width: 560px) { .examples button:last-child { grid-column: 1 / -1; } }

/* the footer's line: the old headline, the slash through its last words */
footer .joke { font: 900 clamp(34px, 4.6vw, 64px)/.9 var(--display); letter-spacing: -.005em; max-width: none; }
footer .joke span { display: block; white-space: nowrap; }
footer .joke .l2 { color: var(--accent); position: relative; display: inline-block; }
footer .joke .l2::after { content: ""; position: absolute; left: -2%; right: -2%; top: 50%; height: .075em; background: var(--ink); transform: rotate(-3deg); }
footer .joke { font-size: clamp(46px, 6.4vw, 92px); }

/* the submit box comes first, the result under it, the headline and the plate after */
main > .eyebrow:first-child { margin-top: 38px; }
.hero { padding: 24px 0 40px; }
@media (max-width: 760px) { main > .eyebrow:first-child { margin-top: 24px; } .hero { padding-top: 10px; } }

/* the submit label: centred over the box, a rule running out to each side */
.eyebrow.center { margin: 0 9px 18px 0; gap: 14px; font-size: 12.5px; }
.eyebrow.center::before { content: ""; flex: 1; width: auto; height: 1px; background: var(--ink); }
.eyebrow.center::after { content: ""; flex: 1; max-width: none; height: 1px; background: var(--ink); }
.eyebrow.center .sq { width: 9px; height: 9px; background: var(--accent); flex: none; }
main > .eyebrow:first-child { margin-top: 56px; }
@media (max-width: 760px) { main > .eyebrow:first-child { margin-top: 34px; } .eyebrow.center { display: flex; font-size: 12px; gap: 10px; } }
/* the sticky ruler hides what scrolls under it, so nothing runs through its ticks */
.ruler { background-color: var(--paper); }


/* ---- the margin chart: two half planispheres in the empty side margins (more in app.js) ---- */
#skybg { position: fixed; left: 0; top: 0; z-index: 0; pointer-events: none; }
main, footer { position: relative; z-index: 1; }
@keyframes tw2 { 50% { opacity: .25; } } #skybg .tw { animation: tw2 4s ease-in-out infinite; }

/* /agents and the API page on a phone: nothing may push the page sideways */
.prose, .prose > *, .way > div { min-width: 0; }
.prose pre, .way pre, .say pre { max-width: 100%; overflow-x: auto; }
.prose code { overflow-wrap: anywhere; }
@media (max-width: 760px) { .way { display: block; } .way .st { margin-bottom: 10px; } .prose { max-width: 100%; } }
.api-t { width: 100%; border-collapse: collapse; margin: 12px 0 6px; font-size: 15.5px; } .api-t th { text-align: left; font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 8px 8px 8px 0; border-bottom: 2px solid var(--ink); }
.api-t td { padding: 10px 10px 10px 0; border-top: 1px solid var(--line2); vertical-align: top; } .api-t td:first-child { white-space: nowrap; font: 600 12.5px var(--mono); }
.api-t .vb { display: inline-block; padding: 2px 7px; font: 700 12px var(--mono); margin-right: 8px; border: 2px solid var(--pass); color: var(--pass); } .api-t .vb.post { border-color: var(--accent); color: var(--accent); }
@media (max-width: 760px) { .api-t, .api-t tbody, .api-t tr, .api-t td { display: block; width: 100%; } .api-t th { display: none; } .api-t td { border: 0; padding: 2px 0; } .api-t tr { border-top: 1px solid var(--line2); padding: 10px 0; } .api-t td:first-child { white-space: normal; word-break: break-all; } }
.nf { padding: 70px 0 20px; }
/* the header fits the column: three links, the doors, the agent button, night vision */
.top { gap: 10px; } .nav { gap: 14px; margin-left: 2px; } .nav a { font-size: 12px; letter-spacing: .05em; }
.doors a { padding: 5px 10px; font-size: 12px; letter-spacing: .04em; } .pill { padding: 5px 10px; font-size: 12px; letter-spacing: .04em; } .agentbtn { padding-left: 9px; padding-right: 11px; gap: 7px; font-size: 12px; }


/* ---- the type: Rock Salt headlines, Special Elite text, Courier Prime numbers; ballpoint (Caveat) for results; the stamps keep their rubber-stamp face ---- */
:root { --stampf: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif; }
.stamp .big, .stamp .sub, .datestamp { font-family: var(--stampf); } .stamp .sub, .datestamp { font-family: "Martian Mono", monospace; }
html[data-font] { --lower: none; }
html[data-font] :is(h1, h2, h3, .eyebrow, .brand, .nav a, .doors a, .pill, .agentbtn, .tabs button, .primary, .examples button, .btn2, .switch button, .door .go, .way .st, footer nav a, .vt th, .legend, .kv span:nth-child(odd), .qa .a, .prov, .cq, details.ev summary, .file, .result-head, .gate .name, .rate-row .of, .beta, .api-t th, .plate figcaption) { text-transform: var(--lower); letter-spacing: 0; }

/* A: graphite pencil on a typed report */

/* B: a field notebook, all handwriting */

/* C: quick ballpoint headlines on a typed form */
html[data-font] .hero h1 .l2::after { height: .05em; }
@media (max-width: 760px) { html[data-font] .hero h1 { font-size: clamp(54px, 15vw, 80px); } }
html[data-font] .hero h1, html[data-font] footer .joke { line-height: .8; }
html[data-font] .hero h1 > span, html[data-font] footer .joke > span { padding-top: .02em; }
html[data-font] .verdict h2, html[data-font] .band h2, html[data-font] .prose h1, html[data-font] .demo h2 { line-height: .86; }
html[data-font] footer .wordmark { color: var(--paper); paint-order: stroke fill; -webkit-text-stroke: 3px var(--ink); stroke-linejoin: round; }


/* the site's type (his pick, 29 Oct 2026): set on <html data-font="d"> */
html[data-font="d"] { --display: "Rock Salt", "Covered By Your Grace", cursive; --sans: "Special Elite", "Courier Prime", monospace; --mono: "Courier Prime", ui-monospace, monospace; --lower: none; }
html[data-font="d"] body { font-size: 16px; line-height: 1.64; }
html[data-font="d"] :is(h1, h2, h3, .brand, .primary, .door h3, .stamp .big_unused) { font-weight: 400; }
html[data-font="d"] .hero h1 { font-size: clamp(38px, 5vw, 74px); line-height: 1.12; text-transform: uppercase; }
html[data-font="d"] .hero h1 .l2::after { height: .045em; }
html[data-font="d"] .verdict h2 { font-size: clamp(28px, 3.6vw, 48px); line-height: 1.12; text-transform: uppercase; }
html[data-font="d"] .band h2, html[data-font="d"] .demo h2 { font-size: clamp(30px, 4vw, 56px); line-height: 1.12; text-transform: uppercase; }
html[data-font="d"] .prose h1 { font-size: clamp(30px, 4.4vw, 56px); line-height: 1.12; text-transform: uppercase; }
html[data-font="d"] .prose h2 { font-size: clamp(22px, 2.8vw, 32px); line-height: 1.2; text-transform: uppercase; } html[data-font="d"] .card h2 { font-size: 26px; line-height: 1.15; text-transform: uppercase; }
html[data-font="d"] .door h3 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15; text-transform: uppercase; } html[data-font="d"] .way h3 { font-size: 21px; line-height: 1.2; text-transform: uppercase; } html[data-font="d"] .way .st b { font-size: 34px; }
html[data-font="d"] .brand { font-size: 22px; letter-spacing: .01em; text-transform: uppercase; } html[data-font="d"] .mark { width: 36px; height: 36px; }
html[data-font="d"] .primary { font-size: 21px; letter-spacing: .02em; padding: 14px 24px 12px; text-transform: uppercase; }
html[data-font="d"] footer .joke { font-size: clamp(30px, 4.2vw, 60px); line-height: 1.15; text-transform: uppercase; } html[data-font="d"] footer .joke .l2::after { height: .045em; }
html[data-font="d"] footer .wordmark { font-size: clamp(90px, 20vw, 300px); line-height: .9; margin-bottom: -.1em; }
html[data-font="d"] .rate-row .big { font-size: 46px; line-height: .9; } html[data-font="d"] .gate .m { font-size: 22px; } html[data-font="d"] .m { font-size: 12px; } html[data-font="d"] .gate .name { font-size: 12px; }
html[data-font="d"] :is(.nav a, .doors a, .pill, .agentbtn, .tabs button, .examples button, .btn2, .switch button, .eyebrow, .file, .result-head, .prov, .vt th, .kv span:nth-child(odd), .legend) { font-family: "Courier Prime", monospace; font-size: 12px; font-weight: 700; }
html[data-font="d"] .eyebrow { font-size: 12px; } html[data-font="d"] .verdict .beat { font-size: clamp(22px, 2.6vw, 34px); line-height: 1.2; text-transform: uppercase; }
html[data-font="d"] textarea { font-family: "Courier Prime", monospace; font-size: 13px; } html[data-font="d"] .lede { font-size: clamp(16px, 1.7vw, 19px); }
html[data-font="d"] .rate-row .what, html[data-font="d"] .qa .q { font-weight: 400; } html[data-font="d"] .qa .a { font-family: "Courier Prime", monospace; font-size: 12px; }
html[data-font="d"] .hero h1, html[data-font="d"] footer .joke { word-spacing: .05em; }
@media (max-width: 760px) { html[data-font="d"] .hero h1 { font-size: clamp(34px, 9.4vw, 52px); } html[data-font="d"] footer .joke { font-size: clamp(30px, 8.6vw, 44px); } html[data-font="d"] .brand { font-size: 18px; } }
html[data-font="d"] footer .joke { font-size: clamp(26px, 3.4vw, 48px); line-height: 1.32; }
html[data-font="d"] footer .wordmark { font-size: clamp(70px, 14vw, 210px); line-height: 1; margin: 34px 0 -.12em; -webkit-text-stroke: 2px var(--ink); }
html[data-font="d"] footer .inner { padding-bottom: 6px; }
html[data-font="d"] footer .joke { line-height: 1.75; font-size: clamp(24px, 3vw, 42px); }
html[data-font="d"] footer .joke > span { padding-top: 0; }
html[data-font="d"] footer .wordmark { margin-top: 90px; }
html[data-font="d"] .hero h1 { line-height: 1.22; }

/* results: ballpoint headlines (Caveat), the rest as the site */
html[data-font="d"] :is(.verdict h2, .verdict .beat, #result .card h2, #result .desk h3, .qa-h) { font-family: "Caveat", "Rock Salt", cursive; font-weight: 700; text-transform: none; letter-spacing: 0; }
html[data-font="d"] .verdict h2 { font-size: clamp(38px, 5vw, 66px); line-height: .98; }
html[data-font="d"] .verdict .beat { font-size: clamp(34px, 4vw, 54px); line-height: 1.05; }
html[data-font="d"] #result .card h2 { font-size: 40px; line-height: 1.05; } html[data-font="d"] #result .desk h3 { font-size: 32px; line-height: 1.1; }



/* the footer wordmark as it was: Big Shoulders, outlined (his word 22:4x: "go back to the previous version") */
html[data-font] footer .wordmark { font: 900 31.4vw/.74 "Big Shoulders Display", "Arial Narrow", Impact, sans-serif; text-transform: uppercase; letter-spacing: .01em; color: transparent; -webkit-text-stroke: 2px var(--ink); paint-order: normal; stroke-linejoin: miter; white-space: nowrap; text-align: center; margin: 26px 0 -.14em; filter: none; text-shadow: none; transform: none; }
@media (max-width: 760px) { html[data-font] footer .wordmark { font-size: 31.4vw; } }
html[data-font] footer .wordmark { margin-top: 56px; }

/* Direction A draft. Only the submit sheet changes; everything else is the site as it is. */
.sheet { --red: var(--accent); background: var(--card); border: 0; box-shadow: 0 1px 2px rgba(40,30,10,.10), 0 14px 34px rgba(70,50,15,.14); padding: 30px 30px 26px 74px; position: relative; }
.submit.sheet::before { content: none; display: none; }
.sheet > * { position: relative; }
.submit.sheet::after { content: "" !important; display: block !important; position: absolute; left: 52px; top: 0; bottom: 0; width: 1px; background: var(--red); opacity: .55; }
/* tabs: three typed words, the active one underlined in red */
.sheet .tabs { border: 0; gap: 26px; margin: 0 0 18px; flex-wrap: nowrap; }
.sheet .tabs button { padding: 10px 0 6px; font: 400 15px var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted); border: 0; border-bottom: 2px solid transparent; white-space: nowrap; min-height: 44px; }
.sheet .tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--red); }
.sheet .beta { border: 0; padding: 0; margin: 0; font: inherit; color: var(--muted); letter-spacing: 0; vertical-align: baseline; }
/* ruled paper */
.sheet .lbl { font: 400 14px/1.5 var(--sans); color: var(--ink2); text-transform: none; letter-spacing: 0; }
.sheet textarea { border: 0; background: repeating-linear-gradient(to bottom, transparent 0 31px, color-mix(in srgb, var(--ink) 18%, transparent) 31px 32px); background-attachment: local; line-height: 32px; font-size: 13px; padding: 0 4px; min-height: 160px; }
.sheet textarea::placeholder { color: var(--muted); opacity: .85; }
.sheet textarea:focus { outline: 0; background-color: color-mix(in srgb, var(--accent) 7%, transparent); box-shadow: inset 0 -2px 0 rgba(228,52,31,.35); }
.sheet textarea.short { font: 400 16px/32px var(--sans); min-height: 128px; }
/* underlined blanks and hand-drawn ticks */
.sheet .row { gap: 4px 22px; align-items: center; }
.sheet .blank { display: inline-flex; align-items: baseline; gap: 8px; color: var(--ink2); font: 400 14px var(--sans); min-height: 44px; padding-top: 12px; border: 0; text-transform: none; letter-spacing: 0; cursor: pointer; position: relative; }
.sheet .blank.file { border-bottom: 1px solid var(--ink); padding: 12px 18px 0 2px; min-height: 0; margin-bottom: 4px; height: 30px; }
.sheet .blank input:not([type=file]) { border: 0; border-bottom: 1px solid var(--ink); background: none; border-radius: 0; font: 700 18px "Caveat", cursive; padding: 0 2px; width: auto; color: var(--ink); outline: 0; }
.sheet .blank input:not([type=file]):focus { border-bottom: 2px solid var(--red); outline: 0; }
.sheet .blank input#station, .sheet .blank input#fstation { width: 4.2ch; } .sheet .blank input[size="6"], .sheet .blank input[size="5"] { width: 7ch; } .sheet .blank input[size="12"] { width: 13ch; }
.sheet .tick { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font: 400 14px var(--sans); color: var(--ink2); cursor: pointer; }
.sheet .tick input { position: absolute; opacity: 0; width: 44px; height: 44px; margin: 0; }
.sheet .tick i { flex: none; width: 24px; height: 24px; border: 1.5px solid var(--ink); border-radius: 3px 5px 3px 6px; background: none; position: relative; margin: 0 8px 0 10px; }
.sheet .tick i::after { content: ""; position: absolute; left: 1px; top: -9px; width: 28px; height: 30px; opacity: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 30'%3E%3Cpath d='M3 16c3 2 5 6 7 11C14 16 20 8 26 2' fill='none' stroke='%23e4341f' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat; }
.sheet .tick input:checked + i::after { opacity: 1; }
.sheet .tick input:focus-visible + i { outline: 2px solid var(--red); outline-offset: 2px; }
/* the button is the verdict's own stamp */
.sheet .actions { margin-top: 18px; gap: 22px; }
.sheet .stampbtn { background: none; color: var(--red); border: 4px solid var(--red); outline: 1.5px solid var(--red); outline-offset: 3px; padding: 6px 22px 8px; text-align: center; transform: rotate(-2deg); cursor: pointer; box-shadow: none; opacity: .92; }
.sheet .stampbtn .big { display: block; font: 900 38px/.9 "Big Shoulders Display", "Arial Narrow", Impact, sans-serif !important; text-transform: uppercase; letter-spacing: .03em; }
.sheet .stampbtn .sub { display: block; font: 700 12px/1.3 "Courier Prime", monospace; letter-spacing: .12em; text-transform: uppercase; border-top: 2px solid var(--red); margin-top: 5px; padding-top: 4px; }
.sheet .stampbtn:hover { opacity: 1; transform: rotate(-2deg) scale(1.03); box-shadow: none; } .sheet .stampbtn:active { transform: rotate(-2deg) scale(.98); box-shadow: none; }
.sheet .stampbtn:disabled { opacity: .5; }
/* examples: one ballpoint margin line */
.submit.sheet .examples { display: block; margin-top: 18px; font: 700 21px/1.5 "Caveat", cursive; color: var(--ink2); }
.submit.sheet .examples .muted { font: 700 21px "Caveat", cursive; text-transform: none; letter-spacing: 0; margin: 0 6px 0 0; color: var(--ink2); }
.submit.sheet .examples button { display: inline !important; font-family: "Caveat", cursive !important; font-size: 21px !important; background: none; border: 0; border-bottom: 1.5px solid var(--ink); padding: 0 1px; min-height: 0; font: 700 21px "Caveat", cursive; text-transform: none; letter-spacing: 0; color: var(--ink); cursor: pointer; margin: 0; }
.submit.sheet .examples button { margin-right: 26px; position: relative; }
.submit.sheet .examples button:not(:last-of-type)::after { content: "·"; position: absolute; right: -16px; bottom: 0; color: var(--muted); }
.submit.sheet .examples button:hover { background: rgba(228,52,31,.12); color: var(--ink); }
.submit.sheet:has(#tab-frames:not(.hidden)) .examples { display: none; }
/* lock line */
.sheet .hint.lock { display: block; font: 400 13px/1.5 var(--sans); }
.sheet .hint.lock a { color: var(--ink2); }
@media (max-width: 560px) {
  .sheet { padding: 22px 16px 22px 40px; } .submit.sheet::after { left: 24px !important; }
  .sheet .tabs { gap: 12px; } .sheet .tabs button { font-size: 12px; }
  .sheet .stampbtn .big { font-size: 32px; } .submit.sheet .examples button { margin-right: 22px; }
}
.sheet .hint { display: block; font: 400 13px/1.5 var(--sans); } .sheet .hint a { color: var(--ink2); }

/* the sheet's title (his words: ballpoint "Enter what you saw." for amateurs; "Submit your candidate" stays for professionals) */
.sheet-title { margin: 0 0 4px; } .sheet-title .pr { display: none; } body.pro .sheet-title .pr { display: flex; } body.pro .sheet-title .am { display: none; }
.sheet-title .am { display: block; font: 700 clamp(34px, 5vw, 46px)/1.05 "Caveat", cursive; color: var(--ink); }
.sheet-sub { margin: 0 0 14px; font: 400 14px/1.5 var(--sans); color: var(--ink2); }
body.pro .sheet-sub { display: none; }
/* alternatives are not numbered; the ledger's numbers do not sit on their captions */
html[data-font] .rate-row .big { line-height: 1.05; margin-bottom: 2px; } html[data-font] .rate-row { gap: 8px; }
/* phone: no dangling marks, the sample wraps */
@media (max-width: 560px) {
  .submit.sheet .examples button:not(:last-of-type)::after { content: none; } .submit.sheet .examples button { margin-right: 18px; }
  .sheet textarea#rows { white-space: pre-wrap; overflow-wrap: anywhere; }
}
.submit.sheet { margin-top: 34px; }
html[data-font] .rate-row .big { line-height: 1.25 !important; margin-bottom: 8px; }
/* the footer, centred: the headline and the credit line in the middle, the links below them */
footer .inner { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 18px; }
footer .joke, footer p { text-align: center; margin-left: auto; margin-right: auto; }
footer nav { justify-content: center; }
/* Load a file / Choose frames: the same face and size as "It looks fuzzy" */
html[data-font] .sheet .blank.file { font: 400 14px/1.5 var(--sans); text-transform: none; letter-spacing: 0; color: var(--ink2); }
.sheet .blank.file .ico { width: 17px; height: 17px; flex: none; align-self: center; margin: -2px 7px 0 0; }
.sheet .blank.file:hover { color: var(--ink); border-bottom-color: var(--accent); }
/* one line, one centre: every control in the row is 44px tall and centred on the same axis */
.sheet .row { align-items: center; }
.sheet .blank, .sheet .tick { height: 44px; min-height: 44px; padding: 0; margin: 0; align-items: center; box-sizing: border-box; }
.sheet .blank.file { height: 44px; margin: 0; padding: 0 16px 0 2px; border: 0; background: linear-gradient(var(--ink), var(--ink)) left 11px bottom 9px / calc(100% - 11px) 1px no-repeat; background-position: 0 calc(100% - 9px); background-size: 100% 1px; }
.sheet .blank input:not([type=file]) { line-height: 1.2; padding: 0 2px 1px; margin-top: 3px; }
.sheet .blank, .sheet .blank.file { line-height: 1.5; }

/* the ledger of measured rates: whole rows, the last box takes what is left of its row (19 boxes) */
.rates { grid-template-columns: repeat(4, minmax(0, 1fr)); } .rates .rate-row:last-child { grid-column: span 2; }
@media (max-width: 1000px) { .rates { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rates .rate-row:last-child { grid-column: span 3; } }
@media (max-width: 700px) { .rates { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rates .rate-row:last-child { grid-column: span 2; } }
@media (max-width: 480px) { .rates { grid-template-columns: 1fr; } .rates .rate-row:last-child { grid-column: auto; } }
html[data-font] .sheet-title .pr, .sheet-title .pr { font-size: 14px; letter-spacing: .06em; } .sheet-title .pr::before { height: 1px; } .sheet-title .pr .sq { width: 11px; height: 11px; }

/* one title for both doors: "Submit your observation" (his word) */
.sheet-title .pr { display: none; } body.pro .sheet-title .pr { display: flex; } body.pro .sheet-title .am { display: none; }

/* the input hint: the plain words for amateurs, the full ones for professionals */
.t-pro { display: none; } body.pro .t-pro { display: inline; } body.pro .t-am { display: none; }
/* the header, a tad bigger: the logo, the wordmark, the page names (his word) */
html[data-font="d"] .brand { font-size: 28px; gap: 12px; } html[data-font="d"] .mark { width: 46px; height: 46px; }
html[data-font] .nav a, html[data-font="d"] .nav a { font-size: 14px; letter-spacing: .05em; } html[data-font] .nav { gap: 20px; }
@media (max-width: 760px) { html[data-font="d"] .brand { font-size: 22px; } html[data-font="d"] .mark { width: 38px; height: 38px; } }
/* a dot between the page names */
.nav a { position: relative; } .nav a + a::before { content: "·"; position: absolute; left: -12px; top: 3px; color: var(--muted); font-size: 16px; line-height: 1; pointer-events: none; }
html[data-font] .nav { gap: 30px; } .nav a + a::before { left: -19px; top: 0; font-size: 22px; font-weight: 700; color: var(--ink2); }
/* the dots, drawn as circles, centred between the words and on the line of the text */
.nav a + a::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ink2); left: -15px; top: 50%; font-size: 0; transform: translate(-50%, -50%); }

/* the glossary link, the station's why, the cancel, the /pro privacy line (audit batch, 30 Oct) */
.sheet .lbl .gloss { display: inline-block; margin-left: 10px; font-size: 13px; color: var(--ink2); }
.sheet .hint.station-why { margin: 2px 0 0; font-size: 13px; }
.sheet .cancel { background: none; border: 0; border-bottom: 1px solid var(--ink); color: var(--ink2); font: 400 14px var(--sans); padding: 0 2px; height: 30px; cursor: pointer; align-self: center; }
.sheet .cancel:hover { color: var(--ink); border-bottom-color: var(--accent); } .cancel.hidden { display: none; }
.sheet .priv-note { align-items: center; height: 44px; font: 400 13px var(--sans); color: var(--muted); }
/* phone: the sample rows one to a line, scrolled inside their box; nothing past the screen's edge after a verdict */
@media (max-width: 560px) { .sheet textarea#rows { white-space: pre; overflow-wrap: normal; overflow-x: auto; } }
.desk, .desk * { min-width: 0; overflow-wrap: anywhere; } .desk a { word-break: break-all; } .desk pre { white-space: pre-wrap; }
@media (max-width: 760px) { #result, #result * { max-width: 100%; } #result pre, #result table { overflow-x: auto; } .desk { margin-right: 0; box-shadow: none; } }
.gloss-l { margin: 0 0 8px; } .gloss-l dt { font: 400 21px/1.25 "Caveat", cursive; font-weight: 700; margin-top: 16px; color: var(--ink); scroll-margin-top: 90px; } .gloss-l dt .full { font: 400 13px var(--sans); color: var(--muted); margin-left: 8px; } .gloss-l dd { margin: 3px 0 0; max-width: 62ch; color: var(--ink2); }

/* professionals know what a station code is (his word, 30 Oct) */
body.pro .station-why { display: none; }
.sharebox { margin: 10px 0 0; font: 400 14px var(--sans); color: var(--ink2); } .sharebox a { color: var(--ink); font-weight: 700; }
.onecard + .onecard { margin-top: 44px; padding-top: 44px; border-top: 1px solid var(--line2); }
.sheet .again { background: none; border: 0; border-bottom: 1px solid var(--ink); color: var(--ink); font: 400 14px var(--sans); padding: 0 2px; cursor: pointer; margin-left: 6px; }
.sheet .again:hover { border-bottom-color: var(--accent); }
/* room 72 R5: nothing in a verdict may push the page sideways (a long address in the Next line, the stamp's second line) */
.verdict, .verdict .vgrid > div, .verdict p, .verdict h2, .verdict .next, .verdict .rate { overflow-wrap: anywhere; min-width: 0; }
.verdict .vgrid > * { min-width: 0; } .stamp { max-width: 100%; box-sizing: border-box; } .stamp .sub { max-width: 100%; overflow-wrap: anywhere; } .stamp .big { max-width: 100%; overflow-wrap: normal; }   /* the big word never breaks (it did, SURVIVO / R, after R5) */
@media (max-width: 760px) { .stamp .sub { font-size: 11px; letter-spacing: .08em; } }

/* the Cancel button stays beside the stamp while a check runs (his word, 30 Oct): it comes first, and the status line takes the rest of the row and wraps its own words */
.sheet .actions { flex-wrap: wrap; align-items: center; }
.sheet .actions .status { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sheet .actions .status .st-now, .sheet .actions .status .st-est { white-space: nowrap; }   /* each part stays on one line (his word: divide the sentence if need be) */
.sheet .actions .status .st-est { color: var(--muted); }
@media (max-width: 760px) { .sheet .actions .status .st-now, .sheet .actions .status .st-est { white-space: normal; } }

/* room 76 / the bridge's 20:13 note: the "every number" view stays inside the card, and on a phone nothing breaks mid-word */
.checks li { grid-template-columns: 34px minmax(150px, 1fr) minmax(0, 2.4fr); }
.checks li > *, .cline, .cline details { min-width: 0; max-width: 100%; }
.cline { overflow-wrap: anywhere; }
details.ev pre { max-width: 100%; box-sizing: border-box; }
.desk pre.file { white-space: pre; overflow-wrap: normal; word-break: normal; overflow-x: auto; }
.desk pre { overflow-wrap: normal; word-break: normal; overflow-x: auto; max-width: 100%; }
@media (max-width: 760px) {
  .qa, .qa tbody, .qa tr, .qa td { display: block; width: 100%; box-sizing: border-box; }
  .qa .q, .qa .a { overflow-wrap: normal; word-break: normal; }
  .qa tr { padding: 10px 0; border-top: 1px solid var(--line2); } .qa tr.is-killed td:first-child { box-shadow: none; }
  .qa .q { width: 100%; padding-bottom: 2px; }
}
@media (max-width: 760px) {   /* the ladder's labels fit their five columns whole: no word is cut ("A satellit / e?") */
  .gate .name { font-size: 10.5px; letter-spacing: 0; padding: 0; overflow-wrap: normal; word-break: normal; hyphens: none; }
  .gate { padding: 0; min-width: 0; }
}
pre code, .prose pre code { overflow-wrap: normal; word-break: normal; white-space: pre; }   /* a curl line scrolls in its box; it is never cut inside its URL */