:root {
                --paper: #fbfbf2;
                --ink: #121213;
                --signal: #2b5fff;
                --signal-highlighter: color-mix(
                    in oklab,
                    var(--signal) 30%,
                    white
                );
                --cta-bg: #2b5fff;
                --cta-hover-bg: color-mix(in oklab, #2b5fff 80%, black);
                --accent: #d33a4e;
                --accent-soft: color-mix(in oklab, #d33a4e 22%, var(--paper));
                --accent-ink: #8a1f2d;
                --error: var(--accent);
                --btn-bg: var(--cta-bg);
                --btn-fg: #ffffff;
                --btn-border: var(--cta-bg);
                --btn-hover-bg: var(--cta-hover-bg);
                --btn-hover-border: var(--btn-hover-bg);
                --steel: #55564f;
                --rule: #deded0;
                --rule-strong: #b9baa8;
                --scrollbar-thumb: var(--ink);
                --scrollbar-track: color-mix(
                    in oklab,
                    var(--rule-strong) 36%,
                    var(--paper)
                );
                --signal-shadow: color-mix(
                    in oklab,
                    var(--signal) 60%,
                    transparent
                );
                --signal-shadow-soft: color-mix(
                    in oklab,
                    var(--signal) 50%,
                    transparent
                );
                --surface-faint: color-mix(
                    in oklab,
                    var(--paper) 70%,
                    transparent
                );
                --hash-strip: repeating-linear-gradient(
                    90deg,
                    var(--rule-strong) 0 1px,
                    transparent 1px 6px
                );
                --shadow-dither: radial-gradient(
                    circle at 1px 1px,
                    var(--rule-strong) 0 1px,
                    transparent 1.1px
                );

                --mono:
                    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
                    monospace;
                --sans:
                    "Diatype", "ABC Diatype", "Inter", -apple-system, system-ui,
                    sans-serif;
                --serif: "Newsreader", "Times New Roman", serif;
                --gutter: clamp(20px, 4vw, 56px);
                --col-max: 1280px;
                color-scheme: light;
            }
            :root[data-theme="dark"] {
                --paper: #121213;
                --ink: #f7f7ec;
                --signal: #6b8aff;
                --signal-highlighter: color-mix(
                    in oklab,
                    var(--signal) 60%,
                    white
                );
                --cta-bg: #6b8aff;
                --cta-hover-bg: color-mix(in oklab, #6b8aff 80%, white);
                --accent: #ff6a7d;
                --accent-soft: color-mix(in oklab, #ff6a7d 22%, var(--paper));
                --accent-ink: #ffb8c1;
                --error: var(--accent);
                --btn-bg: var(--cta-bg);
                --btn-fg: #0b0d18;
                --btn-border: var(--cta-bg);
                --btn-hover-bg: var(--cta-hover-bg);
                --btn-hover-border: var(--btn-hover-bg);
                --steel: #a0a294;
                --rule: #282a25;
                --rule-strong: #4d5143;
                color-scheme: dark;
            }
            :root[data-theme="light"] {
                --paper: #fbfbf2;
                --ink: #121213;
                --signal: #2b5fff;
                --signal-highlighter: color-mix(
                    in oklab,
                    var(--signal) 30%,
                    white
                );
                --cta-bg: #2b5fff;
                --cta-hover-bg: color-mix(in oklab, #2b5fff 80%, black);
                --accent: #d33a4e;
                --accent-soft: color-mix(in oklab, #d33a4e 22%, var(--paper));
                --accent-ink: #8a1f2d;
                --error: var(--accent);
                --btn-bg: var(--cta-bg);
                --btn-fg: #ffffff;
                --btn-border: var(--cta-bg);
                --btn-hover-bg: var(--cta-hover-bg);
                --btn-hover-border: var(--btn-hover-bg);
                --steel: #55564f;
                --rule: #deded0;
                --rule-strong: #b9baa8;
                color-scheme: light;
            }
            * {
                box-sizing: border-box;
            }
            html,
            body {
                margin: 0;
                padding: 0;
            }
            body {
                background: var(--paper);
                color: var(--ink);
                font-family: var(--sans);
                font-size: 16px;
                line-height: 1.5;
                -webkit-font-smoothing: antialiased;
                text-rendering: optimizeLegibility;
            }
            @supports (-moz-appearance: none) {
                html {
                    scrollbar-color: var(--scrollbar-thumb)
                        var(--scrollbar-track);
                    scrollbar-width: auto;
                }
            }
            ::-webkit-scrollbar {
                width: 16px;
                height: 16px;
            }
            ::-webkit-scrollbar-track {
                background-color: var(--paper);
                background-image: var(--shadow-dither);
                background-size: 4px 4px;
                border-left: 1px solid var(--rule);
                border-radius: 0;
            }
            ::-webkit-scrollbar-track:horizontal {
                border-top: 1px solid var(--rule);
                border-left: 0;
            }
            ::-webkit-scrollbar-thumb {
                min-height: 48px;
                background: var(--ink);
                border-radius: 0;
            }
            ::-webkit-scrollbar-thumb:hover {
                background: var(--signal);
            }
            ::-webkit-scrollbar-corner {
                background: var(--paper);
            }
            a {
                color: inherit;
                text-decoration: none;
            }
            ::selection {
                background: var(--signal);
                color: var(--btn-fg);
            }

            .mono {
                font-family: var(--mono);
                font-feature-settings: "ss01", "cv11";
            }
            .label {
                font-family: var(--mono);
                font-size: 11px;
                letter-spacing: 0.08em;
                text-transform: none;
                color: var(--steel);
            }
            .rule {
                height: 1px;
                background: var(--rule);
                width: 100%;
            }
            .rule-strong {
                height: 1px;
                background: var(--ink);
                width: 100%;
            }

            /* ---------- top bar ---------- */
            .topbar {
                position: sticky;
                top: 0;
                z-index: 50;
                background: color-mix(in oklab, var(--paper) 92%, transparent);
                backdrop-filter: blur(8px);
                border-bottom: 1px solid var(--rule);
            }
            .topbar-inner {
                max-width: var(--col-max);
                margin: 0 auto;
                padding: 14px var(--gutter);
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 24px;
            }
            .wordmark {
                display: flex;
                align-items: baseline;
                gap: 8px;
            }
            .wordmark .mark {
                width: 14px;
                height: 14px;
                background: var(--signal);
                display: inline-block;
                transform: translateY(2px);
            }
            .wordmark .name {
                font-family: var(--mono);
                font-weight: 600;
                letter-spacing: -0.01em;
                font-size: 18px;
            }
            .wordmark .domain {
                font-family: var(--mono);
                color: var(--steel);
                font-size: 12px;
            }
            .topbar-actions {
                display: flex;
                align-items: center;
                gap: 18px;
            }
            .topbar-cta,
            .theme-toggle {
                font-family: var(--mono);
                font-size: 13px;
            }
            .theme-toggle {
                appearance: none;
                border: 0;
                background: transparent;
                color: var(--steel);
                padding: 0;
                cursor: pointer;
            }
            .theme-toggle:hover {
                color: var(--ink);
            }
            .topbar-cta {
                display: inline-flex;
                align-items: center;
                gap: 10px;
                background: var(--btn-bg);
                color: var(--btn-fg);
                font-family: var(--mono);
                font-weight: 500;
                padding: 14px 18px;
                font-size: 14px;
                letter-spacing: 0.02em;
                border: 1px solid var(--btn-border);
                transition:
                    transform 0.12s ease,
                    background 0.15s ease;
            }
            .topbar-cta:hover {
                background: var(--btn-hover-bg);
                border-color: var(--btn-hover-border);
            }
            .topbar-cta:active {
                transform: translateY(1px);
            }
            .topbar-cta .arrow {
                color: currentColor;
                margin-left: 6px;
                transition: transform 0.15s ease;
            }
            .topbar-cta:hover .arrow {
                transform: translateX(3px);
            }
            a:focus-visible,
            button:focus-visible {
                outline: 2px solid var(--signal);
                outline-offset: 4px;
            }

            /* ---------- generic shell ---------- */
            section {
                border-bottom: 1px solid var(--rule);
            }
            .shell {
                max-width: var(--col-max);
                margin: 0 auto;
                padding: clamp(48px, 7vw, 96px) var(--gutter);
                position: relative;
            }
            .shell-tight {
                padding-top: clamp(32px, 5vw, 56px);
                padding-bottom: clamp(32px, 5vw, 56px);
            }

            /* spec line: the small bracketed metadata strip used at the top of sections */
            .spec {
                display: flex;
                align-items: center;
                gap: 18px;
                flex-wrap: wrap;
                font-family: var(--mono);
                font-size: 11px;
                letter-spacing: 0.08em;
                color: var(--steel);
                text-transform: none;
                padding-bottom: 18px;
            }
            .spec .num {
                color: var(--ink);
            }
            .spec .dot {
                width: 4px;
                height: 4px;
                background: var(--rule-strong);
                display: inline-block;
            }
            .spec .pill {
                border: 1px solid var(--signal);
                background: var(--signal);
                padding: 2px 6px;
                color: var(--btn-fg);
            }

            /* ---------- HERO ---------- */
            .hero {
                position: relative;
                overflow: hidden;
            }
            .hero .shell {
                padding-top: clamp(56px, 8vw, 120px);
                padding-bottom: clamp(56px, 8vw, 120px);
            }
            .hero-grid {
                display: grid;
                grid-template-columns: 1fr;
                gap: clamp(40px, 5vw, 64px);
                isolation: isolate;
            }
            @media (min-width: 1120px) {
                .hero-grid {
                    grid-template-columns: 1.35fr 1fr;
                    align-items: end;
                }
            }
            .h1 {
                font-family: var(--sans);
                max-width: min(15ch, 100%);
                font-weight: 500;
                letter-spacing: -0.025em;
                line-height: 0.98;
                font-size: clamp(44px, 7.6vw, 85px);
                margin: 0 0 28px;
                text-wrap: balance;
            }
            .lede {
                font-size: clamp(17px, 1.4vw, 20px);
                line-height: 1.45;
                color: var(--ink);
                max-width: 36ch;
                margin: 0 0 36px;
            }
            .lede em {
                font-style: normal;
                color: var(--steel);
            }
            .doc-mark {
                background: linear-gradient(
                    to bottom,
                    transparent 54%,
                    var(--accent-soft) 54% 92%,
                    transparent 92%
                );
                padding: 0 0.06em;
                box-decoration-break: clone;
                -webkit-box-decoration-break: clone;
            }
            .cta-row {
                display: flex;
                align-items: center;
                gap: 18px;
                flex-wrap: wrap;
            }
            .btn {
                display: inline-flex;
                align-items: center;
                gap: 10px;
                background: var(--btn-bg);
                color: var(--btn-fg);
                font-family: var(--mono);
                font-weight: 500;
                padding: 14px 18px;
                font-size: 14px;
                letter-spacing: 0.02em;
                border: 1px solid var(--btn-border);
                transition:
                    transform 0.12s ease,
                    background 0.15s ease;
            }
            .btn:hover {
                background: var(--btn-hover-bg);
                border-color: var(--btn-hover-border);
            }
            .btn:active {
                transform: translateY(1px);
            }
            .btn .arrow {
                transition: transform 0.15s ease;
            }
            .btn:hover .arrow {
                transform: translateX(3px);
            }
            .btn-ghost {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                font-family: var(--mono);
                font-size: 13px;
                color: var(--steel);
                border-bottom: 1px solid var(--rule-strong);
                padding-bottom: 2px;
            }
            .btn-ghost:hover {
                color: var(--ink);
                border-bottom-color: var(--ink);
            }

            /* spec card on right */
            .spec-card-wrap,
            .features-wrap {
                width: 100%;
                position: relative;
                isolation: isolate;
            }
            .spec-card-wrap {
                align-self: end;
            }
            .spec-card-wrap::after,
            .features-wrap::after {
                content: "";
                position: absolute;
                z-index: 0;
                left: 12px;
                top: 12px;
                right: -8px;
                bottom: -9px;
                pointer-events: none;
                background-image: var(--shadow-dither);
                background-size: 4px 4px;
            }
            .spec-card {
                border: 1px solid var(--ink);
                background: var(--paper);
                padding: 0;
                width: 100%;
                position: relative;
                z-index: 1;
            }
            .spec-card .row {
                display: grid;
                grid-template-columns: 130px 1fr;
                gap: 0;
                border-bottom: 1px solid var(--rule);
                padding: 14px 16px;
                font-family: var(--mono);
                font-size: 12px;
                align-items: baseline;
            }
            .spec-card .row:last-child {
                border-bottom: 0;
            }
            .spec-card .k {
                color: var(--steel);
                text-transform: none;
                letter-spacing: 0.08em;
                font-size: 11px;
            }
            .spec-card .v {
                color: var(--ink);
            }
            .spec-card .row:nth-of-type(2) .v {
                display: inline-block;
                width: fit-content;
                margin: -2px -6px;
                padding: 2px 6px;
                background: var(--accent-soft);
            }
            .spec-card .v .ok {
                color: var(--signal);
            }
            .spec-card-head {
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-bottom: 1px solid var(--ink);
                padding: 12px 16px;
                font-family: var(--mono);
                font-size: 11px;
                letter-spacing: 0.08em;
                text-transform: none;
            }
            .spec-card-head .pulse {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                color: var(--steel);
            }
            .spec-card-head .pulse::before {
                content: "";
                width: 7px;
                height: 7px;
                border-radius: 50%;
                background: var(--signal);
                box-shadow: 0 0 0 0 var(--signal-shadow);
                animation: pulse 1.8s infinite;
            }
            @keyframes pulse {
                0% {
                    box-shadow: 0 0 0 0 var(--signal-shadow-soft);
                }
                70% {
                    box-shadow: 0 0 0 8px
                        color-mix(in oklab, var(--signal) 0%, transparent);
                }
                100% {
                    box-shadow: 0 0 0 0
                        color-mix(in oklab, var(--signal) 0%, transparent);
                }
            }

            /* ---------- WHAT IT IS ---------- */
            .two-col {
                display: grid;
                grid-template-columns: 1fr;
                gap: clamp(28px, 4vw, 64px);
                align-items: start;
            }
            @media (min-width: 900px) {
                .two-col {
                    grid-template-columns: 220px 1fr;
                }
            }
            .section-eyebrow {
                font-family: var(--mono);
                font-size: 11px;
                letter-spacing: 0.08em;
                text-transform: none;
                color: var(--steel);
                display: flex;
                align-items: baseline;
                gap: 10px;
            }
            .section-eyebrow .num {
                color: var(--ink);
                font-weight: 500;
            }
            .h2 {
                font-family: var(--sans);
                font-weight: 500;
                letter-spacing: -0.02em;
                line-height: 1.05;
                font-size: clamp(28px, 3.6vw, 48px);
                margin: 0 0 24px;
                text-wrap: balance;
            }
            /* ---------- BLUE HIGHLIGHT EMPHASIS ---------- */
            .h1 .mark,
            .h2 .mark,
            .h3 .mark,
            h1 .mark,
            h2 .mark,
            h3 .mark {
                position: relative;
                display: inline-block;
                isolation: isolate;
                font-family: var(--sans);
                font-style: normal;
                font-weight: inherit;
                letter-spacing: inherit;
                color: #121213;
                background: transparent;
                padding: 0 0.08em;
                box-decoration-break: clone;
                -webkit-box-decoration-break: clone;
                -webkit-text-stroke: 0 transparent;
                text-stroke: 0 transparent;
            }
            .h1 .mark:hover,
            .h2 .mark:hover,
            .h3 .mark:hover,
            h1 .mark:hover,
            h2 .mark:hover,
            h3 .mark:hover {
                color: #121213;
                -webkit-text-stroke-color: transparent;
            }
            .h1 .mark::before,
            .h2 .mark::before,
            .h3 .mark::before,
            h1 .mark::before,
            h2 .mark::before,
            h3 .mark::before {
                content: "";
                position: absolute;
                z-index: -1;
                left: -0.22em;
                right: -0.08em;
                top: 0;
                height: 1em;
                width: 120%;
                transform: rotate(-0.8deg);
                background-color: var(--signal-highlighter);
                border-radius: 0.16em 0.24em 0.18em 0.22em;
                clip-path: polygon(
                    0 23%,
                    4% 15%,
                    22% 10%,
                    48% 14%,
                    74% 8%,
                    100% 18%,
                    98% 88%,
                    78% 94%,
                    49% 88%,
                    24% 96%,
                    2% 86%
                );
            }
            .body-lg {
                font-size: clamp(16px, 1.15vw, 19px);
                line-height: 1.55;
                max-width: 60ch;
            }
            .body-lg + .body-lg {
                margin-top: 14px;
            }
            .body-lg em {
                color: var(--steel);
                font-style: normal;
            }

            /* harness logos strip */
            .harness {
                margin-top: 36px;
                display: flex;
                align-items: stretch;
                flex-wrap: wrap;
                border-top: 1px solid var(--rule);
                border-bottom: 1px solid var(--rule);
            }
            .harness .item {
                flex: 1 1 140px;
                padding: 18px 16px;
                border-right: 1px solid var(--rule);
                font-family: var(--mono);
                font-size: 12px;
                color: var(--ink);
                display: flex;
                align-items: center;
                gap: 10px;
                min-height: 64px;
            }
            .harness .item:last-child {
                border-right: 0;
            }
            .harness .dot {
                width: 8px;
                height: 8px;
                background: var(--accent);
                display: inline-block;
                flex: 0 0 auto;
            }
            .harness .item:first-child .dot {
                background: var(--signal);
            }
            .harness .item.muted .dot {
                background: var(--accent);
            }
            .harness .item .meta {
                color: var(--steel);
                font-size: 11px;
                display: block;
                margin-top: 2px;
            }

            /* ---------- DEMO (002 picker + terminal) ---------- */
            .demo {
                margin-top: clamp(40px, 5vw, 56px);
                border: 1px solid var(--ink);
                background: var(--paper);
                position: relative;
                isolation: isolate;
            }
            .demo::after {
                content: "";
                position: absolute;
                z-index: -1;
                left: 12px;
                top: 12px;
                right: -8px;
                bottom: -9px;
                pointer-events: none;
                background-image: var(--shadow-dither);
                background-size: 4px 4px;
            }
            .demo-head {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 12px 16px;
                border-bottom: 1px solid var(--ink);
                font-family: var(--mono);
                font-size: 11px;
                letter-spacing: 0.08em;
                color: var(--steel);
                background: var(--paper);
            }
            .demo-head-l {
                display: inline-flex;
                align-items: baseline;
                gap: 10px;
            }
            .demo-num {
                color: var(--ink);
            }
            .demo-title {
                color: var(--steel);
            }
            .demo-title-em {
                color: var(--btn-fg);
                background: var(--signal);
                padding: 1px 6px;
            }
            .demo-title-rest {
                letter-spacing: 0.08em;
            }
            .demo-head-r {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                color: var(--steel);
            }
            .demo-pulse {
                width: 7px;
                height: 7px;
                border-radius: 50%;
                background: var(--signal);
                animation: pulse 1.8s infinite;
            }

            .demo-pickers {
                display: grid;
                grid-template-columns: 1fr;
                border-bottom: 1px solid var(--ink);
            }
            .demo-picker {
                display: grid;
                grid-template-columns: 110px 1fr;
                gap: 10px;
                align-items: center;
                padding: 14px 16px;
                font-family: var(--mono);
                font-size: 11px;
                letter-spacing: 0.08em;
                color: var(--steel);
                border-bottom: 1px solid var(--rule);
            }
            .demo-picker:last-child {
                border-bottom: 0;
            }
            .demo-picker .pick-label {
                color: var(--ink);
            }
            .demo-picker .pick-row {
                display: flex;
                gap: 6px;
                flex-wrap: wrap;
            }
            .demo-picker .pick {
                flex: 1 1 90px;
                appearance: none;
                font-family: var(--mono);
                font-size: 12px;
                font-weight: 500;
                letter-spacing: 0.04em;
                color: var(--ink);
                background: var(--paper);
                border: 1px solid var(--rule-strong);
                padding: 8px 10px;
                cursor: pointer;
                position: relative;
                box-shadow: 1px 1px 0 0 var(--rule-strong);
                transition:
                    transform 80ms steps(2),
                    box-shadow 80ms steps(2),
                    background 80ms steps(2);
            }
            .demo-picker .pick:hover {
                border-color: var(--ink);
                box-shadow: 1px 1px 0 0 var(--ink);
            }
            .demo-picker .pick:active {
                transform: translate(1px, 1px);
                box-shadow: 0 0 0 0 var(--ink);
            }
            .demo-picker .pick.is-on {
                background: var(--signal);
                color: var(--btn-fg);
                border-color: var(--signal);
                box-shadow: 1px 1px 0 0 var(--ink);
            }
            .demo-picker .pick.is-on::before {
                content: "▶";
                margin-right: 6px;
                font-size: 9px;
                color: var(--btn-fg);
            }

            .demo-frame {
                background: var(--ink);
                color: var(--paper);
                font-family: var(--mono);
                position: relative;
                overflow: hidden;
            }
            .demo-frame-head {
                display: flex;
                align-items: center;
                gap: 14px;
                padding: 10px 14px;
                border-bottom: 1px solid
                    color-mix(in oklab, var(--paper) 14%, transparent);
                font-size: 11px;
                letter-spacing: 0.06em;
                color: color-mix(in oklab, var(--paper) 60%, transparent);
            }
            .demo-dots {
                display: inline-flex;
                gap: 6px;
            }
            .demo-dots i {
                width: 9px;
                height: 9px;
                border-radius: 50%;
                background: color-mix(in oklab, var(--paper) 22%, transparent);
            }
            .demo-dots i:first-child {
                background: var(--signal);
            }
            .demo-path {
                flex: 1;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .demo-path-em {
                color: var(--signal);
            }
            .demo-copy {
                appearance: none;
                background: transparent;
                border: 1px solid
                    color-mix(in oklab, var(--paper) 26%, transparent);
                color: var(--paper);
                font-family: var(--mono);
                font-size: 10px;
                letter-spacing: 0.1em;
                padding: 4px 8px;
                cursor: pointer;
                transition:
                    background 120ms ease,
                    color 120ms ease,
                    border-color 120ms ease;
            }
            .demo-copy:hover {
                background: var(--signal);
                color: var(--btn-fg);
                border-color: var(--signal);
            }
            .demo-copy.is-copied {
                background: var(--signal);
                color: var(--btn-fg);
                border-color: var(--signal);
            }

            .demo-code {
                margin: 0;
                padding: 22px 20px 24px;
                font-family: var(--mono);
                font-size: 12.5px;
                line-height: 1.6;
                color: color-mix(in oklab, var(--paper) 78%, transparent);
                white-space: pre;
                overflow-x: auto;
                tab-size: 4;
                max-height: 620px;
                overflow-y: auto;
                scrollbar-color: color-mix(
                        in oklab,
                        var(--paper) 24%,
                        transparent
                    )
                    transparent;
            }
            .demo-code::-webkit-scrollbar {
                width: 10px;
                height: 10px;
            }
            .demo-code::-webkit-scrollbar-track {
                background: transparent;
                border-left: 1px solid
                    color-mix(in oklab, var(--paper) 10%, transparent);
            }
            .demo-code::-webkit-scrollbar-thumb {
                background: color-mix(in oklab, var(--paper) 24%, transparent);
            }
            .demo-code .tk-h {
                color: var(--signal);
            }
            .demo-code .tk-c {
                color: color-mix(in oklab, var(--paper) 42%, transparent);
            }
            .demo-code .tk-cmd {
                color: var(--paper);
            }
            .demo-code .tk-s {
                color: var(--accent);
            }
            .demo-code .tk-out {
                color: color-mix(in oklab, var(--paper) 68%, transparent);
            }
            .demo-code .tk-key {
                color: var(--signal);
            }
            .demo-code .tk-flag {
                color: var(--accent);
            }

            .demo-frame-foot {
                display: flex;
                align-items: center;
                gap: 12px;
                padding: 10px 14px;
                border-top: 1px solid
                    color-mix(in oklab, var(--paper) 14%, transparent);
                font-size: 11px;
                letter-spacing: 0.06em;
                color: color-mix(in oklab, var(--paper) 60%, transparent);
                flex-wrap: wrap;
            }
            .demo-frame-foot b {
                color: var(--paper);
                font-weight: 500;
            }
            .demo-frame-foot .dot {
                width: 4px;
                height: 4px;
                background: color-mix(in oklab, var(--paper) 24%, transparent);
                display: inline-block;
            }
            @media (max-width: 760px) {
                .demo-picker {
                    grid-template-columns: 1fr;
                    gap: 8px;
                    padding: 12px 14px;
                }
                .demo-picker .pick {
                    flex: 1 1 calc(50% - 6px);
                    font-size: 11.5px;
                    padding: 8px 8px;
                }
                .demo-code {
                    font-size: 11px;
                    padding: 16px 14px 18px;
                }
                .demo-frame-head {
                    padding: 10px 12px;
                    gap: 10px;
                }
                .demo-frame-foot {
                    font-size: 10px;
                }
            }

            /* ---------- WHY ---------- */
            .why {
                background: var(--paper);
            }
            .why-grid {
                display: grid;
                grid-template-columns: 1fr;
                gap: 0;
                border: 1px solid var(--rule);
            }
            @media (min-width: 800px) {
                .why-grid {
                    grid-template-columns: 1fr 1fr 1fr;
                }
            }
            .why-cell {
                padding: clamp(24px, 3vw, 40px);
                border-right: 1px solid var(--rule);
                border-bottom: 1px solid var(--rule);
                background: var(--paper);
            }
            .why-cell:last-child {
                border-right: 0;
            }
            @media (min-width: 800px) {
                .why-cell {
                    border-bottom: 0;
                }
                .why-cell:nth-child(3n) {
                    border-right: 0;
                }
            }
            .why-cell .num {
                font-family: var(--mono);
                font-size: 11px;
                letter-spacing: 0.08em;
                color: var(--steel);
                margin-bottom: 18px;
                display: block;
            }
            .why-cell h3 {
                font-family: var(--sans);
                font-weight: 500;
                font-size: 22px;
                letter-spacing: -0.01em;
                margin: 0 0 10px;
                line-height: 1.15;
            }
            .why-cell p {
                font-size: 14.5px;
                line-height: 1.5;
                color: var(--steel);
                margin: 0;
            }

            /* ---------- WHAT YOU GET — feature grid w/ ascii diagrams ---------- */
            .features {
                display: grid;
                grid-template-columns: minmax(0, 1fr);
                gap: 0;
                border: 1px solid var(--ink);
                background: var(--paper);
                position: relative;
                z-index: 1;
            }
            @media (min-width: 900px) {
                .features {
                    grid-template-columns: repeat(2, minmax(0, 1fr));
                }
            }
            .feature {
                padding: clamp(28px, 3.4vw, 44px);
                border-right: 1px solid var(--rule);
                border-bottom: 1px solid var(--rule);
                display: flex;
                flex-direction: column;
                gap: 18px;
                min-height: 360px;
                min-width: 0;
                overflow: hidden;
                position: relative;
            }
            .feature > * {
                min-width: 0;
            }
            .feature:last-child {
                border-right: 0;
                border-bottom: 0;
            }
            @media (min-width: 900px) {
                .feature {
                    border-bottom: 1px solid var(--rule);
                }
                .feature:nth-child(2n) {
                    border-right: 0;
                }
            }
            .feature .label-row {
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-family: var(--mono);
                font-size: 11px;
                letter-spacing: 0.08em;
                text-transform: none;
                color: var(--steel);
            }
            .feature .label-row .num {
                color: var(--ink);
            }
            .feature h3 {
                font-family: var(--sans);
                font-weight: 500;
                font-size: clamp(22px, 1.9vw, 28px);
                letter-spacing: -0.015em;
                line-height: 1.1;
                margin: 0;
            }
            .feature p {
                font-size: 15px;
                line-height: 1.55;
                color: var(--steel);
                margin: 0;
                max-width: 48ch;
            }
            .feature .vis {
                padding-top: 18px;
                border-top: 1px dashed var(--rule);
            }
            .rlgame {
                border: 1px solid var(--rule-strong);
                background: var(--paper);
                color: var(--steel);
                font-family: var(--mono);
                font-size: 11px;
                letter-spacing: 0.04em;
            }
            .rl-head,
            .rl-foot {
                display: flex;
                justify-content: space-between;
                gap: 12px;
                padding: 6px 10px;
            }
            .rl-head {
                border-bottom: 1px solid var(--rule-strong);
            }
            .rl-foot {
                border-top: 1px solid var(--rule-strong);
            }
            .rlgame .lbl-ink {
                color: var(--ink);
            }
            .rlgame canvas {
                display: block;
                width: 100%;
                height: auto;
                image-rendering: pixelated;
            }
            .illus {
                width: 100%;
                height: auto;
                display: block;
                color: var(--rule-strong);
                overflow: visible;
            }
            .illus text {
                fill: var(--steel);
                font-family: var(--mono);
                font-size: 11px;
                letter-spacing: 0.02em;
            }
            .illus .lbl-ink {
                fill: var(--ink);
            }
            .illus .lbl-sig {
                fill: var(--signal);
            }
            .illus .ln {
                stroke: var(--ink);
                stroke-width: 1;
                fill: none;
            }
            .illus .ln-soft {
                stroke: var(--rule-strong);
                stroke-width: 1;
                fill: none;
            }
            .illus .ln-dash {
                stroke: var(--rule-strong);
                stroke-width: 1;
                stroke-dasharray: 4 4;
                fill: none;
            }
            .illus .fill-ink {
                fill: var(--ink);
            }
            .illus .fill-signal {
                fill: var(--signal);
            }
            .illus .fill-accent {
                fill: var(--accent);
            }
            .illus .stroke-signal {
                stroke: var(--signal);
            }
            .illus .stroke-accent {
                stroke: var(--accent);
            }
            .illus .lbl-accent {
                fill: var(--accent-ink);
            }

            /* ascii block helpers */
            pre.ascii {
                font-family: var(--mono);
                font-size: 11px;
                line-height: 1.35;
                color: var(--steel);
                margin: 0;
                white-space: pre;
                overflow: hidden;
            }
            pre.ascii .hi {
                color: var(--ink);
            }
            pre.ascii .sig {
                color: var(--signal);
            }

            /* tiny inline diagram for "Long-running agents" */
            .timeline {
                font-family: var(--mono);
                font-size: 11px;
                color: var(--steel);
            }
            .timeline-bar {
                display: grid;
                grid-template-columns: 60px 1fr 60px;
                align-items: center;
                gap: 10px;
                margin-top: 6px;
            }
            .timeline-track {
                height: 14px;
                background: repeating-linear-gradient(
                    90deg,
                    var(--rule) 0 1px,
                    transparent 1px 8px
                );
                border: 1px solid var(--rule-strong);
                position: relative;
            }
            .timeline-fill {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                width: 78%;
                background: var(--ink);
            }
            .timeline-fill::after {
                content: "";
                position: absolute;
                right: -1px;
                top: -3px;
                bottom: -3px;
                width: 2px;
                background: var(--signal);
            }

            /* model badges */
            .models {
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
            }
            .model {
                border: 1px solid var(--ink);
                padding: 8px 12px;
                font-family: var(--mono);
                font-size: 12px;
                display: inline-flex;
                align-items: center;
                gap: 8px;
            }
            .model .sw {
                width: 8px;
                height: 8px;
                background: var(--ink);
                display: inline-block;
            }
            .model.alt .sw {
                background: var(--signal);
            }

            /* switch viz */
            .switch {
                display: grid;
                grid-template-columns: 1fr auto 1fr;
                gap: 18px;
                align-items: center;
                font-family: var(--mono);
                font-size: 12px;
            }
            .switch .node {
                border: 1px solid var(--rule-strong);
                padding: 10px 12px;
                text-align: center;
                color: var(--steel);
            }
            .switch .node.active {
                border-color: var(--ink);
                color: var(--ink);
                background: var(--surface-faint);
            }
            .switch .arrow {
                color: var(--ink);
                font-size: 16px;
            }

            /* ---------- THE CONTRACT ---------- */
            .contract-grid {
                display: grid;
                grid-template-columns: 1fr;
                gap: 0;
                border: 1px solid var(--rule);
            }
            @media (min-width: 900px) {
                .contract-grid {
                    grid-template-columns: 1fr 1fr;
                }
            }
            .contract-grid > div {
                padding: clamp(20px, 2.5vw, 32px);
                border-right: 1px solid var(--rule);
                border-bottom: 1px solid var(--rule);
            }
            @media (min-width: 900px) {
                .contract-grid > div:nth-child(2n) {
                    border-right: 0;
                }
                .contract-grid > div:nth-last-child(-n + 2) {
                    border-bottom: 0;
                }
            }
            .contract-row {
                display: flex;
                align-items: baseline;
                gap: 14px;
                font-family: var(--mono);
                font-size: 13px;
            }
            .contract-row .k {
                color: var(--accent-ink);
                font-size: 11px;
                letter-spacing: 0.08em;
                text-transform: none;
                flex: 0 0 130px;
            }
            .contract-row .v {
                color: var(--ink);
            }
            .check {
                color: var(--signal);
                font-family: var(--mono);
                margin-right: 6px;
            }

            /* ---------- WHO IT IS FOR ---------- */
            .who-grid {
                display: grid;
                grid-template-columns: 1fr;
                gap: clamp(28px, 4vw, 56px);
            }
            @media (min-width: 900px) {
                .who-grid {
                    grid-template-columns: 1.2fr 1fr;
                }
            }
            .who h2 .strike {
                color: var(--steel);
            }
            .who-list {
                font-family: var(--mono);
                font-size: 13px;
                border-top: 1px solid var(--rule);
            }
            .who-list .row {
                display: grid;
                grid-template-columns: 32px 1fr auto;
                gap: 16px;
                padding: 16px 0;
                border-bottom: 1px solid var(--rule);
                align-items: baseline;
            }
            .who-list .num {
                color: var(--steel);
            }
            .who-list .v {
                color: var(--ink);
            }
            .who-list .meta {
                color: var(--steel);
                font-size: 11px;
                letter-spacing: 0.08em;
                text-transform: none;
            }

            /* ---------- CTA ---------- */
            .closer .shell {
                padding-top: clamp(56px, 7vw, 96px);
                padding-bottom: clamp(56px, 7vw, 96px);
            }
            .closer h2 {
                font-family: var(--sans);
                font-weight: 500;
                letter-spacing: -0.025em;
                font-size: clamp(36px, 5.4vw, 80px);
                line-height: 0.98;
                max-width: 18ch;
                margin: 0 0 28px;
            }

            /* ---------- FOOTER ---------- */
            footer {
                border-top: 1px solid var(--ink);
                background: var(--paper);
            }
            .foot {
                max-width: var(--col-max);
                margin: 0 auto;
                padding: 28px var(--gutter);
                display: grid;
                grid-template-columns: 1fr;
                gap: 24px;
                font-family: var(--mono);
                font-size: 12px;
                color: var(--steel);
            }
            @media (min-width: 800px) {
                .foot {
                    grid-template-columns: 1.4fr 1fr 1fr 1fr;
                    align-items: start;
                }
            }
            .foot h4 {
                font-size: 11px;
                letter-spacing: 0.08em;
                text-transform: none;
                color: var(--ink);
                margin: 0 0 10px;
                font-weight: 500;
            }
            .foot ul {
                list-style: none;
                padding: 0;
                margin: 0;
                display: flex;
                flex-direction: column;
                gap: 6px;
            }
            .foot a:hover {
                color: var(--ink);
            }
            .foot-bottom {
                border-top: 1px solid var(--rule);
                padding: 14px var(--gutter);
                max-width: var(--col-max);
                margin: 0 auto;
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                gap: 10px;
                font-family: var(--mono);
                font-size: 11px;
                color: var(--steel);
                letter-spacing: 0.04em;
            }
            .foot-bottom .made::before {
                content: "";
                display: inline-block;
                width: 8px;
                height: 8px;
                background: var(--signal);
                margin-right: 8px;
                transform: translateY(1px);
            }

            /* edge marks — small hashed strip mimicking the moodboard's printed-page feel */
            .edge-hash {
                height: 6px;
                width: 100%;
                background-image: var(--hash-strip);
            }

            /* underline for inline emphasis as in the moodboard */
            .ul {
                text-decoration: underline;
                text-underline-offset: 3px;
                text-decoration-thickness: 1px;
                text-decoration-color: var(--rule-strong);
            }
            .ul-ink {
                text-decoration-color: var(--ink);
            }

            @media (max-width: 760px) {
                :root {
                    --gutter: clamp(16px, 5vw, 24px);
                }
                .topbar-inner {
                    padding-top: 12px;
                    padding-bottom: 12px;
                    gap: 12px;
                }
                .wordmark {
                    min-width: 0;
                }
                .wordmark .domain {
                    display: none;
                }
                .topbar-actions {
                    gap: 14px;
                }
                .topbar-cta,
                .theme-toggle {
                    display: inline-flex;
                    align-items: center;
                    min-height: 40px;
                    flex: 0 0 auto;
                }
                .shell {
                    padding-top: 48px;
                    padding-bottom: 56px;
                }
                .hero .shell {
                    padding-top: 44px;
                    padding-bottom: 72px;
                }
                .spec {
                    gap: 10px 12px;
                    line-height: 1.7;
                    padding-bottom: 24px;
                }
                .hero .spec .dot,
                .hero .spec .hero-location,
                .hero .spec .pill {
                    display: none;
                }
                .hero-grid {
                    gap: 36px;
                }
                .hero-grid > * {
                    min-width: 0;
                }
                .h1 {
                    font-size: clamp(44px, 14vw, 62px);
                }
                .lede {
                    max-width: 30ch;
                }
                .btn {
                    min-height: 48px;
                }
                .spec-card-wrap,
                .features-wrap {
                    max-width: 100%;
                }
                .spec-card-wrap::after,
                .features-wrap::after {
                    left: 8px;
                    top: 8px;
                    right: -8px;
                    bottom: -8px;
                }
                .spec-card-head {
                    padding: 12px 14px;
                }
                .spec-card .row {
                    grid-template-columns: 92px minmax(0, 1fr);
                    padding: 12px 14px;
                }
                .spec-card .v {
                    overflow-wrap: anywhere;
                }
                .two-col {
                    gap: 22px;
                }
                .h2 {
                    font-size: clamp(30px, 10vw, 42px);
                }
                .harness .item {
                    flex-basis: 50%;
                    border-bottom: 1px solid var(--rule);
                }
                .harness .item:nth-child(2n) {
                    border-right: 0;
                }
                .why-cell {
                    border-right: 0;
                }
                .features,
                .feature,
                .feature > * {
                    min-width: 0;
                }
                .feature {
                    min-height: auto;
                    padding: 24px 20px;
                    border-right: 0;
                    overflow: hidden;
                }
                .feature .label-row {
                    align-items: flex-start;
                    flex-direction: column;
                    gap: 8px;
                }
                .feature h3[style] {
                    width: auto !important;
                    max-width: 100% !important;
                }
                pre.ascii {
                    max-width: 100%;
                    font-size: 9.5px;
                }
                .timeline-bar {
                    grid-template-columns: 46px 1fr 46px;
                    gap: 8px;
                }
                .switch {
                    grid-template-columns: 1fr;
                    gap: 10px;
                }
                .switch .arrow {
                    justify-self: center;
                    transform: rotate(90deg);
                }
                .models {
                    gap: 8px;
                }
                .model {
                    width: 100%;
                }
                .contract-row {
                    display: grid;
                    grid-template-columns: 92px minmax(0, 1fr);
                    gap: 8px;
                }
                .contract-row .k {
                    flex: none;
                }
                .who-list .row {
                    grid-template-columns: 28px 1fr;
                    gap: 12px;
                }
                .who-list .meta {
                    grid-column: 2;
                    justify-self: start;
                }
                .closer h2 {
                    font-size: clamp(40px, 13vw, 58px);
                }
                .foot {
                    gap: 20px;
                }
                .foot-bottom {
                    flex-direction: column;
                }
            }

            @media (max-width: 420px) {
                .h1 {
                    font-size: clamp(40px, 13vw, 54px);
                }
                .topbar-cta,
                .theme-toggle {
                    font-size: 12px;
                }
                .harness .item {
                    flex-basis: 100%;
                    border-right: 0;
                }
                .spec-card .row,
                .contract-row {
                    grid-template-columns: 1fr;
                }
            }