:root {
    --bg: #0b0b0b;
    --card: #111;
    --ink: #ececec;
    --text: #a9a9a9;
    --mute: #666;
    --line: rgba(255, 255, 255, .26);
    --line-soft: rgba(255, 255, 255, .1);
    --top: #1c1c1c;
    --left: #151515;
    --right: #101010;
    --paper: #242424;
    --accent: #ff6500;
    --acc-top: #ff6500;
    --acc-left: #b84900;
    --acc-right: #8a3700;
    --screen: #0d0d0d;
    --on-accent: #0b0b0b;
    --grid-dot: rgba(255, 255, 255, .05);
    --dot-rgb: 255, 255, 255;
    --stroke: .8;
    --arc-a: .32;
    --nav: 60px;
    --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

@media (prefers-color-scheme: light) {
    :root {
    --bg: #f3f1ec;
    --card: #faf9f6;
    --ink: #141414;
    --text: #555;
    --mute: #6a6a6a;
    --line: rgba(0, 0, 0, .82);
    --stroke: 1.1;
    --arc-a: .7;
    --line-soft: rgba(0, 0, 0, .1);
    --top: #ffffff;
    --left: #e3dfd7;
    --right: #c2bcb0;
    --paper: #f3f0ea;
    --screen: #f7f6f2;
    --on-accent: #0b0b0b;
    --acc-left: #e05800;
    --acc-right: #b94700;
    --grid-dot: rgba(0, 0, 0, .07);
    --dot-rgb: 20, 20, 20;
    color-scheme: light;
}
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-padding-top: var(--nav); scroll-behavior: smooth; }
/* Mouse and trackpad snap one section at a time; touch screens scroll freely. */
@media (pointer: fine) {
    html { scroll-snap-type: y mandatory; }
    .hero, .chapter { scroll-snap-align: start; }
    .chapter { scroll-snap-stop: always; min-height: calc(100svh - var(--nav)); }
    .footer { scroll-snap-align: end; }
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration: none; transition: color .2s; }
a:hover { color: var(--accent); }

.nav {
    position: sticky; top: 0; z-index: 10;
    display: flex; justify-content: space-between; align-items: center;
    max-width: 1080px; margin: 0 auto; padding: 18px 24px;
    font-family: var(--mono); font-size: 13px;
    background: color-mix(in srgb, var(--bg) 85%, transparent);
    backdrop-filter: blur(8px);
}
.brand { display: inline-flex; align-items: center; gap: 12px; }
.nav > .brand { font-size: 19px; font-weight: 600; }
.brand .mark { width: 54px; height: auto; color: var(--ink); transition: transform .3s; }
a.brand:hover .mark { transform: translateY(-1px) rotate(-4deg); }
.footer .brand .mark { width: 36px; color: var(--mute); }
.nav-right { display: flex; gap: 18px; align-items: center; }
.btn { border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; }
.btn:hover { border-color: var(--accent); }

.eyebrow {
    font-family: var(--mono); font-size: 12px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--mute); margin-bottom: 14px;
}

.hero {
    max-width: 1080px; margin: 0 auto; padding: 6vh 24px 0;
    min-height: calc(100svh - var(--nav)); display: flex; flex-direction: column;
}
.hero h1 {
    color: var(--ink); font-weight: 500; letter-spacing: -.035em;
    font-size: clamp(42px, 6.6vw, 84px); line-height: 1.02; margin-bottom: 28px;
}
.lead { max-width: 580px; font-size: clamp(17px, 2vw, 20px); }
.links { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 28px; font-family: var(--mono); font-size: 13px; }
.hero-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: center; flex: 1; }
.hero-fig { max-width: 420px; justify-self: end; width: 100%; }
.scroll-hint { margin-top: auto; padding: 24px 0 32px; font-family: var(--mono); font-size: 12px; color: var(--mute); animation: hint 2.4s ease-in-out infinite; }
@keyframes hint { 50% { transform: translateY(6px); opacity: .5; } }

.chapter {
    max-width: 1080px; margin: 0 auto; padding: 96px 24px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
}
.chapter:nth-child(even) .fig { order: 2; }

.fig {
    position: relative; aspect-ratio: 1; width: 100%;
    border: 1px solid var(--line-soft); border-radius: 18px; overflow: hidden;
    background: radial-gradient(circle, var(--grid-dot) 1px, transparent 1.2px) 0 0 / 18px 18px, var(--card);
    cursor: pointer; user-select: none; -webkit-user-select: none;
    transition: border-color .3s;
}
.fig:hover { border-color: var(--line); }
.fig svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fig svg { shape-rendering: geometricPrecision; }
.fig text { font-family: var(--mono); letter-spacing: .04em; }

.lbl {
    position: absolute; z-index: 1; pointer-events: none;
    font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--mute);
}
.tl { top: 14px; left: 16px; } .tr { top: 14px; right: 16px; }
.bl { bottom: 14px; left: 16px; } .br { bottom: 14px; right: 16px; color: var(--text); }
.br[data-status]::before { content: "● "; color: var(--accent); }

.story h2 {
    color: var(--ink); font-weight: 500; letter-spacing: -.025em;
    font-size: clamp(28px, 3.4vw, 42px); line-height: 1.12; margin-bottom: 22px;
}
.story p + p { margin-top: 14px; }
.story p:not(.eyebrow) { font-size: 17px; max-width: 460px; }

/* calls to action */
.act { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; margin-top: 34px; }
.cta {
    display: inline-block; background: var(--accent); color: var(--on-accent); border: 0; cursor: pointer;
    font: 600 15px/1 "DM Sans", sans-serif; padding: 15px 26px; border-radius: 99px; transition: transform .15s, filter .15s;
}
.cta:hover { color: var(--on-accent); transform: translateY(-1px); filter: brightness(1.08); }
.ghost { font-family: var(--mono); font-size: 13px; }
.btn-accent { border-color: var(--accent); color: var(--accent); }
.ul { border-bottom: 1px solid var(--line); }

/* code card */
.code-card { cursor: default; display: flex; align-items: center; }
.code-card pre { margin: 0; padding: 48px 24px; width: 100%; overflow-x: auto; font: 13px/1.75 var(--mono); color: var(--text); }
.code-card .c { color: var(--mute); } .code-card .k { color: var(--accent); } .code-card .f { color: var(--ink); }
.code-card .bl { text-transform: none; letter-spacing: .02em; }

/* waitlist */
.wl {
    position: relative; display: flex; flex-direction: column; gap: 8px;
    padding: 52px 28px 28px; border: 1px solid var(--line-soft); border-radius: 18px;
    background: radial-gradient(circle, var(--grid-dot) 1px, transparent 1.2px) 0 0 / 18px 18px, var(--card);
}
.wl label { font-family: var(--mono); font-size: 12px; color: var(--ink); margin-top: 10px; }
.wl label span { color: var(--mute); }
.wl input, .wl select {
    font: 16px "DM Sans", sans-serif; color: var(--ink); background: var(--bg);
    border: 1px solid var(--line-soft); border-radius: 10px; padding: 13px 14px; outline: none; transition: border-color .2s;
}
.wl input:focus, .wl select:focus { border-color: var(--accent); }
.wl input.err { border-color: var(--accent); }
.wl .cta { margin-top: 18px; padding: 16px; }
.wl .cta:disabled { opacity: .6; cursor: wait; }
.wl-note { font-size: 13px; color: var(--mute); margin-top: 4px; }
.wl-note a { border-bottom: 1px solid var(--line); }
.wl.done label, .wl.done input, .wl.done select, .wl.done button { display: none; }
.wl.done .wl-note { font-size: 18px; color: var(--ink); }

/* full-width moments break the side-by-side rhythm */
.chapter.wide { grid-template-columns: 1fr; gap: 40px; max-width: 920px; }
.chapter.wide .story { text-align: center; }
.chapter.wide .story p:not(.eyebrow) { margin-left: auto; margin-right: auto; max-width: 600px; }
.chapter.wide .fig { order: 2; aspect-ratio: auto; }
.chapter.wide .code-card pre { font-size: 15px; padding: 56px 40px; }
.chapter.waitlist { grid-template-columns: 1fr; max-width: 560px; gap: 36px; text-align: center; }
.chapter.waitlist .story p:not(.eyebrow) { margin-left: auto; margin-right: auto; }
.chapter.waitlist .wl { text-align: left; }

.footer {
    max-width: 1080px; margin: 0 auto; padding: 48px 24px;
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
    font-family: var(--mono); font-size: 12px; color: var(--mute);
    border-top: 1px solid var(--line-soft);
}
.footer .links { margin: 0; }

@media (max-width: 820px) {
    .hero-grid, .chapter { grid-template-columns: 1fr; gap: 28px; }
    .chapter:nth-child(even) .fig { order: 0; }
    .chapter { padding-top: 56px; padding-bottom: 56px; }
    .chapter.wide .code-card pre { font-size: 11px; padding: 44px 16px 52px; }
    .fig:has([data-object="stamp"]) { aspect-ratio: 1; }
    .fig:has([data-object="stamp"]) .bl { display: none; }
    .hero-fig { justify-self: stretch; max-width: none; }
    .hide-sm { display: none; }
    .fig.code-card { aspect-ratio: auto; }
    .code-card pre { font-size: 11px; padding: 44px 16px 52px; }
    .code-card .bl { bottom: 14px; }
    .nav-right { gap: 12px; }
    .chapter { min-height: auto; padding-top: 56px; padding-bottom: 56px; }
    .hero { min-height: auto; padding-top: 4vh; }
    .fig { aspect-ratio: 6 / 5; }
    .lbl { font-size: 10px; }
    .bl { bottom: 32px; }
    .nav, .hero, .chapter, .footer { padding-left: 16px; padding-right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .scroll-hint { animation: none; }
}