@font-face {
  font-family: "Oswald";
  src: url("/assets/Oswald-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #070a09;
  --panel: #0a0e0c;
  --ink: #edf2ee;
  --muted: #a5aca7;
  --line: rgba(231, 241, 234, .23);
  --line-soft: rgba(231, 241, 234, .11);
  --mint: #43e4ad;
  --orange: #ff5a2a;
  --violet: #b978ff;
  --shell: 1480px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --display: "Oswald", Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Narrow", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--bg); font-family: var(--mono); line-height: 1.55; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .2; z-index: 10; background: repeating-linear-gradient(90deg, transparent 0, transparent 7px, rgba(255,255,255,.012) 8px); mix-blend-mode: screen; }
a { color: inherit; text-decoration: none; }
button, select { font: inherit; }
button, summary, select { color: inherit; }
button { cursor: pointer; }
.shell { width: min(var(--shell), calc(100% - 80px)); margin-inline: auto; }
.rail-section { position: relative; border-bottom: 1px solid var(--line-soft); }
.rail-section::before, .rail-section::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line-soft); pointer-events: none; }
.rail-section::before { left: max(24px, calc((100% - var(--shell)) / 2)); }
.rail-section::after { right: max(24px, calc((100% - var(--shell)) / 2)); }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 100; padding: 12px 18px; color: var(--bg); background: var(--mint); }
.skip-link:focus { top: 16px; }

.site-header { min-height: 108px; border-bottom: 1px solid var(--line-soft); background: rgba(7,10,9,.92); position: relative; z-index: 20; }
.header-inner { min-height: 108px; display: grid; grid-template-columns: minmax(280px, 1fr) auto minmax(220px, 1fr); align-items: center; gap: 34px; }
.brand { display: inline-flex; align-items: center; gap: 14px; font-weight: 800; letter-spacing: .035em; font-size: 26px; white-space: nowrap; }
.brand span { color: var(--mint); font-size: 31px; letter-spacing: .2em; }
.desktop-nav { display: flex; align-self: stretch; align-items: center; gap: clamp(22px, 2.6vw, 48px); }
.desktop-nav a { height: 100%; display: flex; align-items: center; position: relative; font-size: 16px; color: #d9dfdb; }
.desktop-nav a:hover, .desktop-nav a:focus-visible { color: var(--mint); }
.desktop-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 17px; height: 2px; background: var(--violet); }
.lab-status { justify-self: end; min-width: 190px; padding: 15px 20px; border: 1px solid var(--line); color: var(--mint); font-size: 14px; }
.lab-status i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 12px; background: var(--mint); box-shadow: 0 0 14px rgba(67,228,173,.6); }
.mobile-menu { display: none; position: relative; justify-self: end; }
.mobile-menu summary { list-style: none; border: 1px solid var(--line); padding: 12px 15px; cursor: pointer; }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu summary span { color: var(--mint); padding-left: 9px; }
.mobile-nav { position: absolute; right: 0; top: calc(100% + 10px); width: min(300px, calc(100vw - 32px)); background: #090d0b; border: 1px solid var(--line); box-shadow: 0 25px 60px rgba(0,0,0,.5); }
.mobile-nav a { display: block; padding: 16px 18px; border-bottom: 1px solid var(--line-soft); }
.mobile-nav a[aria-current="page"] { color: var(--mint); }

.eyebrow, .index { color: var(--mint); font-size: 13px; text-transform: uppercase; letter-spacing: .14em; }
.hero { min-height: 615px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 76px; padding-block: 76px 66px; }
.hero-copy { align-self: center; padding: 28px 32px 20px 44px; }
h1, h2 { margin: 0; line-height: .98; text-wrap: balance; }
h1 { font-family: var(--display); font-size: clamp(58px, 5.15vw, 84px); font-weight: 700; letter-spacing: .006em; }
h2 { font-family: var(--display); font-size: clamp(42px, 4vw, 66px); letter-spacing: .01em; }
.lede { max-width: 720px; color: var(--muted); font-size: clamp(17px, 1.4vw, 22px); line-height: 1.5; }
.hero .lede { max-width: 650px; margin: 28px 0 34px; }
.hero h1 { overflow: clip; }
.hero h1 span { display: block; white-space: nowrap; transform: scaleX(.69); transform-origin: left center; }
.bracket { position: relative; }
.bracket::before, .bracket::after { content: ""; position: absolute; width: 18px; height: 18px; pointer-events: none; }
.bracket::before { top: 0; left: 0; border-top: 2px solid var(--mint); border-left: 2px solid var(--mint); }
.bracket::after { right: 0; bottom: 0; border-right: 2px solid var(--mint); border-bottom: 2px solid var(--mint); }
.bracket-orange::before { border-color: var(--orange); }
.bracket-violet::before { border-color: var(--violet); }
.actions { display: flex; flex-wrap: wrap; gap: 16px; }
.button { min-height: 62px; display: inline-flex; justify-content: center; align-items: center; gap: 24px; padding: 15px 28px; border: 1px solid var(--line); background: transparent; transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease; }
.button:hover, .button:focus-visible { transform: translateY(-2px); border-color: var(--mint); color: var(--mint); }
.button-primary { border-color: var(--mint); color: var(--mint); }
.button-primary:hover, .button-primary:focus-visible { color: var(--bg); background: var(--mint); }
.button-ghost { color: var(--ink); }
.text-link { color: var(--mint); padding-bottom: 5px; border-bottom: 1px dashed rgba(67,228,173,.55); white-space: nowrap; }

.terminal { min-width: 0; border: 1px solid rgba(237,242,238,.55); background: linear-gradient(135deg, rgba(67,228,173,.018), transparent 42%); box-shadow: inset 0 0 60px rgba(0,0,0,.35); }
.terminal-bar, .terminal-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 46px; padding: 10px 18px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.terminal-bar strong { color: var(--orange); font-weight: 500; }
.terminal-body { min-height: 360px; display: flex; flex-direction: column; justify-content: center; padding: 38px 46px; font-size: clamp(17px, 1.5vw, 23px); }
.terminal-body p { margin: 0 0 24px; }
.terminal-body b { display: inline-block; min-width: 104px; font-weight: 500; }
.ok { color: var(--mint); }
.terminal-body p { color: var(--ink); }
.warn { color: var(--orange); }
#quick-output, .generated-output { color: var(--mint); }
.terminal-foot { min-height: 53px; border-top: 1px dashed var(--line); border-bottom: 0; color: var(--mint); }
.terminal-foot span + span { padding-left: 24px; border-left: 1px solid var(--line); }

.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); min-height: 130px; }
.stats-grid > div { display: flex; align-items: center; gap: 30px; padding: 24px 65px; }
.stats-grid > div + div { border-left: 1px dashed var(--line); }
.stats-grid strong { color: var(--mint); font-size: 70px; line-height: 1; font-weight: 500; }
.stats-grid p { color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin: 0; }
.stats-grid small { color: #747b77; text-transform: none; letter-spacing: 0; }

.section { padding-block: 58px; }
.section-heading { display: grid; grid-template-columns: 1fr 1.3fr auto; align-items: end; gap: 52px; margin-bottom: 48px; }
.section-heading p { margin: 12px 0 0; color: var(--muted); }
.section-heading .index { color: var(--mint); }
.compact-heading { grid-template-columns: 1fr auto; }
.timeline { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; border-top: 1px solid var(--line); }
.timeline li { position: relative; min-height: 170px; padding: 34px 26px 20px 10px; }
.timeline li::before { content: ""; position: absolute; width: 12px; height: 12px; top: -7px; left: 8px; background: var(--bg); border: 2px solid var(--mint); }
.timeline span { color: var(--mint); }
.timeline strong { display: block; margin: 10px 0; font-size: 18px; }
.timeline p { color: var(--muted); font-size: 14px; }
.symptom-list { border-top: 1px solid var(--line); }
.symptom-list a { display: grid; grid-template-columns: 100px 300px 1fr auto; gap: 20px; align-items: center; min-height: 76px; border-bottom: 1px dashed var(--line); padding: 12px 16px; }
.symptom-list a:hover { background: rgba(67,228,173,.035); }
.symptom-list span { color: var(--mint); }
.symptom-list strong { font-size: 20px; font-weight: 500; }
.symptom-list p { color: var(--muted); }
.symptom-list i { color: var(--orange); font-style: normal; }
.generator-preview { display: grid; grid-template-columns: .65fr 1.4fr auto; align-items: center; gap: 34px; }
.generator-preview > div:first-child p:last-child { color: var(--muted); max-width: 320px; }
.terminal-small .terminal-body { min-height: 170px; padding: 28px; font-size: 16px; }
.terminal-small .terminal-body p { margin-bottom: 12px; }
.command { color: var(--mint) !important; }

.page-hero { min-height: 430px; }
.page-hero-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 9vw; align-items: end; padding-block: 110px 84px; }
.page-hero .bracket { padding: 30px 38px; }
.page-hero .lede { margin: 0; }
.exhibit-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.exhibit { padding: 46px; min-height: 390px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.exhibit > span, .diagnostic-card > span, .principles-grid article > span { color: var(--mint); font-size: 13px; letter-spacing: .1em; }
.exhibit h2, .diagnostic-card h2, .principles-grid h2 { margin: 24px 0; font-size: clamp(34px, 3vw, 50px); }
.exhibit p, .exhibit li, .diagnostic-card p, .principles-grid p { color: var(--muted); }
.exhibit ul { padding-left: 20px; }
.manifesto { display: grid; grid-template-columns: .7fr 1.3fr .8fr; gap: 6vw; align-items: start; }
.manifesto blockquote { font-family: var(--display); font-size: clamp(34px, 3.3vw, 55px); line-height: 1.05; margin: 0; }
.manifesto > div p { color: var(--muted); margin: 0 0 26px; }
.diagnostic-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.diagnostic-card { min-height: 360px; padding: 38px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); scroll-margin-top: 40px; }
.diagnostic-card strong { display: inline-block; margin-top: 20px; color: var(--orange); font-size: 13px; font-weight: 500; }
.note-panel { display: grid; grid-template-columns: .5fr 1.1fr 1.3fr auto; gap: 46px; align-items: center; padding: 42px; border: 1px solid var(--line); }
.note-panel h2 { font-size: clamp(32px, 3vw, 48px); }
.note-panel > p:not(.index) { color: var(--muted); }

.bingo-page { padding-block: 50px; }
.bingo-layout { display: grid; grid-template-columns: .62fr 1.25fr .42fr; gap: 32px; min-height: 760px; align-items: start; }
.bingo-intro { padding: 55px 40px 40px 34px; position: sticky; top: 20px; }
.bingo-intro .lede { margin: 36px 0 18px; }
.microcopy { color: #767e79; font-size: 14px; }
.bingo-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.bingo-cell { min-width: 0; min-height: 140px; padding: 12px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.bingo-cell:hover, .bingo-cell:focus-visible { background: rgba(67,228,173,.045); outline: 1px solid var(--mint); outline-offset: -2px; }
.bingo-cell[aria-pressed="true"] { color: var(--mint); border-color: var(--mint); background: rgba(67,228,173,.035); }
.bingo-cell[aria-pressed="true"]::before { content: "✓"; display: block; text-align: right; font-size: 20px; }
.bingo-free { color: var(--violet) !important; border-color: var(--violet) !important; }
.bingo-score { min-height: 290px; padding: 30px 20px; border: 1px solid var(--line); position: sticky; top: 20px; }
.bingo-score > p:first-child { font-size: 20px; margin-top: 0; }
.bingo-score strong { color: var(--mint); font-size: 28px; }
.bingo-score .button { width: 100%; padding-inline: 12px; }
.bingo-score > p:last-child { color: var(--muted); font-size: 13px; margin-top: 24px; }
.bingo-rules { display: grid; grid-template-columns: .5fr 1.5fr auto; gap: 50px; align-items: start; }
.bingo-rules h2 { font-size: 42px; }
.bingo-rules div p { color: var(--muted); }

.changelog-layout { display: grid; grid-template-columns: .55fr 1.45fr; gap: 44px; align-items: stretch; }
.control-panel { border: 1px solid var(--line); padding: 34px; }
.control-panel label { display: block; color: var(--muted); margin-bottom: 10px; }
.control-panel select { width: 100%; min-height: 58px; padding: 10px 14px; margin-bottom: 20px; background: var(--bg); border: 1px solid var(--line); }
.control-panel .button { width: 100%; }
.control-panel p { color: var(--muted); font-size: 13px; margin-top: 26px; }
.changelog-terminal .terminal-body { min-height: 320px; }
.generated-output { font-size: clamp(22px, 2.4vw, 38px); line-height: 1.35; }
.cursor { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .cursor { animation: none; } }
.release-anatomy { display: grid; grid-template-columns: .75fr 1.25fr; gap: 70px; }
.release-anatomy > div p:last-child { color: var(--muted); }
.release-anatomy ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.release-anatomy li { display: grid; grid-template-columns: 65px 190px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px dashed var(--line); }
.release-anatomy li span { color: var(--mint); }
.release-anatomy li p { color: var(--muted); margin: 0; }

.roadmap-board { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.roadmap-stage { min-height: 330px; padding: 40px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.roadmap-stage > span { color: var(--muted); font-size: 13px; }
.roadmap-stage.done > span { color: var(--mint); }
.roadmap-stage.current > span { color: var(--orange); }
.roadmap-stage h2 { margin: 22px 0; font-size: clamp(36px, 3.2vw, 52px); }
.roadmap-stage p, .roadmap-stage li { color: var(--muted); }
.roadmap-stage ul { padding-left: 20px; }
.roadmap-extra { display: contents; }
.roadmap-button { grid-column: 1 / -1; margin: 28px auto 0; }
.roadmap-note { display: grid; grid-template-columns: .5fr 1fr 1.2fr auto; gap: 42px; align-items: start; }
.roadmap-note h2 { font-size: 44px; }
.roadmap-note > p:not(.index) { color: var(--muted); }

.principles-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.principles-grid article { padding: 44px; min-height: 320px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.source-panel { display: grid; grid-template-columns: 1fr auto; gap: 70px; align-items: center; border: 1px solid var(--line); padding: 46px; }
.source-panel h2 { margin: 12px 0 20px; }
.source-panel p { color: var(--muted); max-width: 800px; }

.not-found { min-height: calc(100vh - 108px); display: flex; align-items: center; }
.not-found-grid { display: grid; grid-template-columns: .65fr 1.35fr; align-items: center; gap: 80px; padding-block: 80px; }
.error-code { font-family: var(--display); font-size: clamp(140px, 22vw, 330px); line-height: .7; color: var(--mint); margin: 0; }
.not-found .bracket { padding: 45px; }
.not-found .lede { margin: 30px 0; }

.site-footer { min-height: 210px; border-top: 1px solid var(--line-soft); }
.footer-grid { min-height: 210px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 60px; align-items: center; }
.brand-small { font-size: 18px; }
.brand-small span { font-size: 22px; }
.disclaimer, .footer-note { color: var(--muted); font-size: 13px; }
.footer-grid nav { display: grid; grid-template-columns: repeat(2, max-content); gap: 9px 28px; }
.footer-grid nav a:hover { color: var(--mint); }

:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; }

@media (max-width: 1400px) and (min-width: 1181px) {
  .header-inner { grid-template-columns: 245px auto 170px; gap: 18px; }
  .brand { font-size: 20px; gap: 8px; }
  .brand span { font-size: 25px; }
  .desktop-nav { gap: 18px; }
  .desktop-nav a { font-size: 14px; }
  .lab-status { min-width: 170px; padding-inline: 13px; font-size: 12px; }
}

@media (max-width: 1180px) {
  .header-inner { grid-template-columns: 1fr auto; }
  .desktop-nav, .lab-status { display: none; }
  .mobile-menu { display: block; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero { min-height: auto; }
  .terminal-body { min-height: 300px; }
  .generator-preview { grid-template-columns: .7fr 1.3fr; }
  .generator-preview > .button { grid-column: 2; justify-self: start; }
  .bingo-layout { grid-template-columns: 1fr 2fr; }
  .bingo-intro { position: static; }
  .bingo-score { grid-column: 1 / -1; min-height: 0; position: static; display: grid; grid-template-columns: auto 260px 1fr; gap: 30px; align-items: center; }
  .diagnostic-grid { grid-template-columns: repeat(2, 1fr); }
  .note-panel, .roadmap-note { grid-template-columns: .5fr 1fr 1.2fr; }
  .note-panel .button, .roadmap-note .text-link { grid-column: 2; justify-self: start; }
}

@media (max-width: 760px) {
  .shell { width: min(100% - 32px, var(--shell)); }
  .rail-section::before { left: 8px; }
  .rail-section::after { right: 8px; }
  .site-header, .header-inner { min-height: 84px; }
  .brand { font-size: 17px; gap: 8px; }
  .brand span { font-size: 20px; }
  .mobile-menu summary { padding: 10px 12px; font-size: 14px; }
  .hero-grid { padding-block: 50px 42px; gap: 38px; }
  .hero-copy { padding: 28px 14px 24px 20px; }
  h1 { font-size: clamp(47px, 14vw, 68px); line-height: 1.02; }
  h2 { font-size: clamp(37px, 11vw, 52px); }
  .hero .lede { margin-block: 24px 28px; }
  .hero h1 { font-size: clamp(38px, 12vw, 47px); line-height: 1.04; }
  .hero h1 span { transform: scaleX(.66); }
  .actions { display: grid; }
  .button { width: 100%; min-height: 58px; padding-inline: 16px; }
  .terminal-bar { font-size: 10px; gap: 8px; }
  .terminal-bar span:last-child { display: none; }
  .terminal-body { min-height: 300px; padding: 30px 20px; font-size: 15px; }
  .terminal-body b { min-width: 80px; }
  .terminal-foot { font-size: 9px; padding-inline: 12px; }
  .terminal-foot span + span { padding-left: 9px; }
  .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: 105px; }
  .stats-grid > div { display: block; padding: 20px 8px; text-align: center; }
  .stats-grid strong { font-size: 46px; }
  .stats-grid p { font-size: 10px; }
  .stats-grid small { display: none; }
  .section { padding-block: 44px; }
  .section-heading, .compact-heading { display: block; }
  .section-heading > p { margin: 20px 0; }
  .section-heading .text-link { display: inline-block; margin-top: 22px; }
  .timeline { display: block; border-left: 1px solid var(--line); border-top: 0; margin-left: 8px; }
  .timeline li { min-height: 125px; padding: 0 10px 28px 34px; }
  .timeline li::before { top: 4px; left: -7px; }
  .symptom-list a { grid-template-columns: 56px 1fr auto; gap: 10px; padding: 17px 8px; }
  .symptom-list a p { grid-column: 2 / -1; margin: 0; }
  .generator-preview { display: block; }
  .generator-preview .terminal { margin-block: 30px 18px; }
  .page-hero { min-height: 0; }
  .page-hero-grid { display: block; padding-block: 68px 54px; }
  .page-hero .bracket { padding: 24px 18px; margin-bottom: 38px; }
  .exhibit-grid, .diagnostic-grid, .principles-grid, .roadmap-board { grid-template-columns: 1fr; }
  .exhibit, .diagnostic-card, .principles-grid article, .roadmap-stage { padding: 30px 24px; min-height: 0; }
  .manifesto, .note-panel, .bingo-rules, .release-anatomy, .roadmap-note, .source-panel { display: block; }
  .manifesto blockquote { margin: 28px 0; }
  .note-panel, .source-panel { padding: 28px 22px; }
  .note-panel h2, .source-panel h2 { margin: 18px 0; }
  .note-panel .button, .source-panel .button { margin-top: 22px; }
  .bingo-page { padding-block: 35px; }
  .bingo-layout { display: block; }
  .bingo-intro { padding: 34px 18px 38px; }
  .bingo-grid { margin-top: 28px; }
  .bingo-cell { min-height: 72px; padding: 5px 3px; font-size: 9px; }
  .bingo-cell[aria-pressed="true"]::before { font-size: 12px; }
  .bingo-score { display: block; margin-top: 24px; }
  .bingo-score .button { width: 100%; }
  .bingo-rules > div { margin: 20px 0; }
  .changelog-layout { display: block; }
  .control-panel { padding: 24px 20px; margin-bottom: 24px; }
  .changelog-terminal .terminal-body { min-height: 300px; }
  .release-anatomy > div { margin-bottom: 30px; }
  .release-anatomy li { grid-template-columns: 42px 1fr; }
  .release-anatomy li p { grid-column: 2; }
  .roadmap-button { margin-inline: 20px; width: calc(100% - 40px); }
  .roadmap-note h2 { margin: 18px 0; }
  .roadmap-note .text-link { display: inline-block; margin-top: 20px; }
  .not-found { min-height: calc(100vh - 84px); }
  .not-found-grid { display: block; padding-block: 55px; }
  .error-code { font-size: 140px; }
  .not-found .bracket { padding: 35px 18px; }
  .footer-grid { display: block; padding-block: 42px; }
  .footer-grid nav { margin-block: 32px; }
}