@font-face { font-family: "Bricolage Grotesque"; src: url("/fonts/bricolage-grotesque-latin-var.woff2") format("woff2"); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/fonts/instrument-sans-latin-var.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Azeret Mono"; src: url("/fonts/azeret-mono-latin-var.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }

:root {
  --font-text: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-poster: "Bricolage Grotesque", "Arial Narrow", "Helvetica Neue", sans-serif;
  --font-mono: "Azeret Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sky1: #f8cf92; --sky2: #f2a58d; --deep: #133242; --rock: #081820; --line: #2f5263;
  --ink: #15233a; --cream: #f6ecd9; --lantern: #ffd66b; --red: #a9331f; --slate: #5f8290; --soft: #c4d3d6;
  --tick: var(--lantern); --cross: #f2a58d;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--deep); color: var(--cream); font: 17px/1.6 var(--font-text); }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
button, input, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
.wrap { max-width: 1160px; margin-inline: auto; padding-inline: 20px; }

.beta-list { list-style: none; padding: 0; display: grid; gap: 10px; }
.beta-list li { position: relative; padding-left: 1.7em; }
.beta-list li::before { content: "✓"; position: absolute; left: 0; font-weight: 700; color: var(--tick); }
.beta-list.no li::before { content: "–"; color: var(--cross); }
.form-status { min-height: 1.5em; }

h1, h2, h3, .word { font-family: var(--font-poster); font-stretch: 75%; text-wrap: balance; }
:focus-visible { outline: 3px solid var(--lantern); outline-offset: 3px; }
.sky { background: linear-gradient(var(--sky1), var(--sky2)) top / 100% calc(100% - 24px) no-repeat var(--deep); color: var(--ink); overflow: hidden; position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.sky :focus-visible { outline-color: var(--ink); }
.top { display: flex; align-items: center; gap: 12px; padding-block: 22px; }
.word { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; }
.pill { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border: 1.5px solid currentColor; border-radius: 999px; padding: 2px 10px; }
.btn { background: var(--ink); color: var(--cream); font-weight: 700; padding: .8em 1.25em; border: 0; border-radius: 4px; }
.btn.small { padding: .5em 1.1em; font-size: .95rem; border-radius: 999px; }
.btn.light { background: var(--lantern); color: var(--ink); }
.btn:hover { transform: translateY(-1px); }
.hero { padding-block: clamp(20px, 4vw, 56px) 0; position: relative; z-index: 1; }
h1 { font-size: clamp(3.2rem, 8.4vw, 7rem); line-height: .9; font-weight: 800; letter-spacing: -.025em; }
.lede { max-width: 44ch; margin-block: 22px 28px; font-size: 1.15rem; }
.sky > .wrap { width: 100%; }
.scene { display: block; width: 100%; flex: 1 0 clamp(180px, 22vw, 440px); min-height: 0; margin-top: -12px; }
.points { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 22px; font-size: .95rem; font-weight: 600; }
.points li::before { content: "✓"; margin-right: .45em; font-weight: 800; }
.scroll { position: absolute; left: 50%; bottom: 18px; margin-left: -22px; width: 44px; height: 44px; display: grid; place-items: center; border: 1.5px solid #f6ecd980; border-radius: 50%; background: none; color: var(--cream); animation: nudge 2.4s ease-in-out infinite; }
.scroll svg { width: 18px; height: 18px; }
.sky .scroll:focus-visible { outline-color: var(--cream); }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
.origin { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.flag { width: 1.375em; height: 1em; border-radius: 1px; vertical-align: -.12em; margin-left: .35em; }
.sec { padding-block: 72px; }
.sec h2 { font-size: clamp(2.1rem, 5vw, 3.8rem); line-height: .98; font-weight: 800; letter-spacing: -.015em; max-width: 18ch; }
.sec > .wrap > p { max-width: 60ch; margin-top: 18px; color: var(--soft); }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 48px; margin-top: 44px; }
.two h3 { font-size: 1.7rem; line-height: 1.1; font-weight: 700; margin-bottom: 10px; }
.two p { color: var(--soft); margin-bottom: 14px; }
.tech { font-size: .9rem; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 16px; }
.strata { list-style: none; padding: 0; margin-top: 40px; }
.strata li { padding-block: 26px; }
.strata li:nth-child(1) { background: #1a3d50; } .strata li:nth-child(2) { background: #163647; }
.strata li:nth-child(3) { background: #112d3c; } .strata li:nth-child(4) { background: #0d2633; }
.strata .wrap { display: grid; grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1fr); gap: 8px 24px; align-items: baseline; }
.strata i { font-style: normal; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lantern); }
.strata strong { font: 700 1.6rem/1.1 var(--font-poster); font-stretch: 75%; }
.strata span { color: var(--soft); }
.rock { background: var(--rock); }
.foot { color: var(--soft); font-size: .9rem; padding-block: 28px; border-top: 1px solid #1b3442; margin-top: 56px; }

.steps { list-style: none; padding: 0; counter-reset: step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 40px; margin-top: 44px; }
.steps li { counter-increment: step; border-top: 2px solid var(--lantern); padding-top: 14px; }
.steps li::before { content: counter(step); font: 800 2.6rem/1 var(--font-poster); font-stretch: 75%; color: var(--lantern); }
.steps h3 { font-size: 1.6rem; line-height: 1.1; font-weight: 700; margin-block: 8px 6px; }
.steps p { color: var(--soft); }
.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.chips li { border: 1px solid var(--line); border-radius: 999px; padding: 4px 14px; font-size: .92rem; }
.two article h3 + p + h3 { margin-top: 28px; }
.term { margin: 0; background: var(--rock); border: 1px solid var(--line); border-radius: 6px; padding: 20px; font: 400 .84rem/1.9 var(--font-mono); overflow-x: auto; align-self: start; min-width: 0; }
.term b { color: var(--lantern); font-weight: 500; } .term i { color: #a9d08a; font-style: normal; } .term span { color: #8fa5ab; }
.tablewrap { overflow-x: auto; margin-block: 32px 28px; border: 1px solid var(--line); border-radius: 6px; }
.table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: .95rem; }
.table th, .table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tr:last-child > * { border-bottom: 0; }
.table thead th { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.table tbody th { font-weight: 500; color: var(--soft); }
.table td { color: var(--soft); }
.table .ours { color: var(--lantern); font-weight: 700; background: #ffd66b12; }
@media (max-width: 820px) { .steps { grid-template-columns: minmax(0, 1fr); } }

.rows { display: grid; gap: 80px; margin-top: 72px; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; align-items: center; }
.row.flip > :first-child { order: 2; }
.kicker { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lantern); margin-bottom: 10px; }
.row h3 { font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.05; font-weight: 700; margin-bottom: 12px; }
.row > div:first-child > p { color: var(--soft); }
.row > div:first-child > .kicker { color: var(--lantern); }
.row .beta-list { margin-top: 16px; }
.mono { font-family: var(--font-mono); font-size: .85em; overflow-wrap: anywhere; }
.mock { background: var(--cream); color: var(--ink); border-radius: 6px; box-shadow: 8px 8px 0 var(--rock); padding: 22px; display: grid; gap: 14px; min-width: 0; }
.dim { opacity: .65; }
.mock-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-weight: 700; border-bottom: 1.5px solid #d9cdb6; padding-bottom: 12px; }
.state { background: #2f6b4f; color: var(--cream); border-radius: 999px; padding: 1px 12px; font-size: .82rem; }
.running { margin-left: auto; font-size: .88rem; font-weight: 600; }
.comment { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; }
.comment-body { display: grid; gap: 6px; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--red); color: var(--cream); display: grid; place-items: center; font: 800 1.1rem var(--font-poster); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #2f6b4f; margin-right: 7px; }
.tags { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.tags li { border: 1.5px solid var(--ink); border-radius: 999px; padding: 0 10px; font-size: .82rem; font-weight: 600; }
.timeline { position: relative; height: 14px; border-radius: 999px; background: linear-gradient(90deg, #d9cdb6, var(--slate)); margin-block: 6px 0; }
.timeline i { position: absolute; top: -4px; bottom: -4px; left: var(--x); width: 2px; background: var(--ink); opacity: .35; }
.timeline b { position: absolute; left: 82%; top: 50%; width: 20px; height: 20px; border-radius: 50%; background: var(--red); border: 3px solid var(--cream); box-shadow: 0 0 0 2px var(--ink); transform: translate(-50%, -50%); }
.timeline-labels { display: flex; justify-content: space-between; }
@media (max-width: 820px) { .row { grid-template-columns: minmax(0, 1fr); } .row.flip > :first-child { order: 0; } .rows { gap: 56px; } }

.files { list-style: none; padding: 0; display: grid; }
.files li { display: flex; justify-content: space-between; gap: 12px; padding-block: 8px; border-bottom: 1px solid #d9cdb6; }
.files li:last-child { border-bottom: 0; }
.files li span:first-child { min-width: 0; }

a.btn { display: inline-block; text-decoration: none; }
a.scroll { text-decoration: none; }
.top a.word { text-decoration: none; }
.top nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: .95rem; font-weight: 600; }
.top nav a { text-decoration: none; }
.top nav a:hover, .foot a:hover, .more a:hover { text-decoration: underline; }
.more { margin-top: 18px; }
.more a { color: var(--lantern); font-weight: 600; }

.form { display: grid; gap: 18px; margin-top: 32px; max-width: 760px; }
.form .pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form .field { display: grid; gap: 6px; font-weight: 600; }
.form input[type="text"], .form input[type="email"], .form select { width: 100%; padding: .7em .9em; border-radius: 4px; border: 2px solid var(--slate); background: var(--rock); color: var(--cream); }
.form select { appearance: none; padding-right: 2.8em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23f6ecd9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9em center; background-size: 18px; }
.form .check { display: flex; gap: 10px; align-items: baseline; }
.form .check input { accent-color: var(--lantern); }
.form .trap { position: absolute; left: -9999px; }
.form button:disabled { opacity: .6; cursor: default; }
.form-status.ok { color: #a9d08a; font-weight: 600; }
.form-status.error { color: #f2a58d; font-weight: 600; }
.foot { display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: space-between; }

.sub .top { border-bottom: 1px solid var(--line); }
.sub .prose { display: grid; gap: 18px; max-width: 68ch; margin-top: 28px; color: var(--soft); }
.sub .prose strong { color: var(--cream); }
.sub .foot { margin-top: 0; }

@media (max-width: 820px) {
  .two, .form .pair { grid-template-columns: minmax(0, 1fr); }
  .strata .wrap { grid-template-columns: minmax(0, 1fr); }
  .top nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.sub .head p:not(.kicker) { margin-top: 14px; color: var(--soft); }