/* The face on the cover. A demo cut: caps, figures, and only . ! ? — every other
   mark falls through to Clash Display, which is why the stack is ordered. */
@font-face {
    font-family: "Airone";
    src: url("fonts/Airone.woff2") format("woff2");
    font-weight: 400 700;
    font-display: swap;
}
@font-face {
    font-family: "Clash Display";
    src: url("fonts/ClashDisplay-600.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: "Clash Display";
    src: url("fonts/ClashDisplay-700.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: "General Sans";
    src: url("fonts/GeneralSans-400.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "General Sans";
    src: url("fonts/GeneralSans-500.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: "General Sans";
    src: url("fonts/GeneralSans-600.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: "JetBrains Mono";
    src: url("fonts/JetBrainsMono-400.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "JetBrains Mono";
    src: url("fonts/JetBrainsMono-500.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
}

@property --fill {
    syntax: "<number>";
    inherits: false;
    initial-value: 100;
}

:root {
    --paper: #f6f3e8;
    --paper-sunk: #efece0;
    --ink: #16190f;
    --ink-2: #4b5142;
    --ink-3: #6a7063;
    --line: #dfdbcd;
    --line-strong: #c9c4b3;
    --green: #166534;
    --green-sunk: #e3ebdf;
    /* Marks: meters, wedges, the big numbers. Text keeps the darker ink green above. */
    /* Score marks, sampled from the flowers and then darkened only as far as 3:1
       on the ground they sit on. Coral, orange and green: three hues a reader can
       tell apart, and the number beside each says the same thing in words. */
    --mark-green: #16a34a;
    --mark-coral: #dc2626;
    --mark-amber: #ca8a04;
    /* The two 7rem figures are text, so they need 3:1 rather than nothing. The
       green and the amber land a fraction under it, so those two are nudged. */
    --figure-green: #159c47;
    --figure-coral: #dc2626;
    --figure-amber: #c07f04;
    --coral: var(--mark-coral);
    --coral-ink: #991b1b;
    --amber: var(--mark-amber);
    --sky: #6d90b0;
    --night: #12150d;
    --night-ink: #e8e7dc;
    --night-ink-2: #a8ac9c;
    --night-ink-3: #8f9585;
    --night-line: #2b2f24;
    --shadow: rgba(22, 25, 15, 0.8);
    --band: var(--night);
    --term: #14170e;
    --term-line: transparent;
    color-scheme: light;

    --display: "Airone", "Clash Display", "General Sans", system-ui, sans-serif;
    --display-2: "Clash Display", "General Sans", system-ui, sans-serif;
    --sans: "General Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

    --gutter: clamp(20px, 5vw, 64px);
    --measure: 64ch;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);

    color-scheme: light;
    accent-color: var(--green);
}

/* The night version of the same garden. Every token flips; nothing else knows. */
:root[data-theme="dark"] {
    --paper: #12150d;
    --paper-sunk: #191d13;
    --ink: #e8e7dc;
    --ink-2: #b1b5a5;
    --ink-3: #939a89;
    --line: #2b2f24;
    --line-strong: #454b3a;
    --green: #4ade80;
    --green-sunk: #16301f;
    --mark-green: #22c55e;
    --mark-coral: #ef4444;
    --mark-amber: #eab308;
    --figure-green: #22c55e;
    --figure-coral: #ef4444;
    --figure-amber: #eab308;
    --coral-ink: #f87171;
    --sky: #8fbde8;
    --night: #0a0c07;
    --night-ink: #e8e7dc;
    --night-ink-2: #a8ac9c;
    --night-ink-3: #8f9585;
    --night-line: #333829;
    --shadow: rgba(0, 0, 0, 0.9);
    --band: #1e2317;
    --term: #232819;
    --term-line: #343a29;
    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.65;
    font-feature-settings: "ss01";
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: var(--green);
    color: var(--paper);
}

:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 3px;
    border-radius: 2px;
}

::-webkit-scrollbar {
    width: 11px;
}
::-webkit-scrollbar-track {
    background: var(--paper-sunk);
}
::-webkit-scrollbar-thumb {
    background: #cfccbf;
    border: 3px solid var(--paper-sunk);
    border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--ink-3);
}

a {
    color: var(--green);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}
a:hover {
    text-decoration-thickness: 2px;
}

h1,
h2,
h3 {
    font-family: var(--display);
    font-weight: 600;
    letter-spacing: -0.005em;
    text-wrap: balance;
    margin: 0;
}

p {
    margin: 0;
}

code {
    font-family: var(--mono);
    font-size: 0.87em;
}

/* ------------------------------------------------------------------ shell */

.shell {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* Unhurried, not idle: the first version idled at 148px. */
section {
    padding-block: clamp(56px, 8vw, 104px);
}

section + section {
    border-top: 1px solid var(--line);
}

.head {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: clamp(32px, 4.5vw, 54px);
}

.head h2 {
    font-size: clamp(1.7rem, 2.9vw, 2.35rem);
    line-height: 1.14;
    letter-spacing: -0.005em;
}

@media (min-width: 1100px) {
    .head h2 {
        white-space: nowrap;
    }
}

.head p {
    color: var(--ink-2);
    max-width: 56ch;
}

/* -------------------------------------------------------------------- rail */

.rail {
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.4s var(--ease),
        visibility 0.4s;
    position: fixed;
    top: 50%;
    left: clamp(18px, 2.6vw, 40px);
    transform: translateY(-50%);
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 9px;
    align-items: flex-start;
}

.rail.lit {
    opacity: 1;
    visibility: visible;
}

.rail a {
    --p: 0;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--ink-3);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 24px;
    transition: color 0.25s var(--ease);
}

.rail a::before {
    content: "";
    width: 18px;
    height: 1.5px;
    background: currentColor;
    opacity: 0.35;
    transition: opacity 0.25s var(--ease);
}

.rail a:hover {
    color: var(--ink);
}

.rail a[aria-current="true"] {
    color: var(--green);
}

/* All dashes one length; the current one is simply solid. */
.rail a[aria-current="true"]::before {
    opacity: 1;
}

.rail.on-dark a {
    color: var(--night-ink-3);
}
.rail.on-dark a:hover {
    color: var(--night-ink);
}
.rail.on-dark a[aria-current="true"] {
    color: #dfe4d3;
}

.topbar {
    display: none;
    position: sticky;
    top: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}

.topbar .shell {
    display: flex;
    align-items: center;
    padding-block: 9px;
}

.menu {
    position: relative;
}

.menu summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 30px;
    padding: 2px 4px 2px 0;
    font-family: var(--mono);
    font-size: 12.5px;
    letter-spacing: 0.02em;
    color: var(--ink-2);
}

.menu summary::-webkit-details-marker {
    display: none;
}

.menu-caret {
    width: 8px;
    height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.2s var(--ease);
}

.menu[open] .menu-caret {
    transform: rotate(-135deg) translate(-2px, -2px);
}

.menu nav {
    position: absolute;
    top: calc(100% + 9px);
    left: -12px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    min-width: 200px;
    padding: 6px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 24px 50px -30px var(--shadow);
}

.topbar a {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-2);
    text-decoration: none;
    white-space: nowrap;
    padding: 7px 10px;
    border-radius: 8px;
    min-height: 24px;
}

.topbar a:hover {
    background: var(--paper-sunk);
    color: var(--ink);
}

.topbar a[aria-current="true"] {
    color: var(--green);
}

/* ------------------------------------------------------------------- hero */

.hero {
    padding-bottom: clamp(56px, 8vw, 104px);
}

.plate {
    position: relative;
    overflow: hidden;
    background: var(--ink);
    width: 100%;
    height: min(56.34vw, 78vh);
    min-height: 300px;
}

.plate img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The screen the cover was printed through, lifting off the finished sheet. */
.screen {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at center, rgba(11, 14, 8, 0.62) 40%, transparent 41%);
    background-size: 5px 5px;
    mix-blend-mode: multiply;
    pointer-events: none;
    animation: lift 1100ms var(--ease) 120ms forwards;
}

@keyframes lift {
    from {
        opacity: 1;
        background-size: 5px 5px;
        filter: blur(0px);
    }
    to {
        opacity: 0;
        background-size: 26px 26px;
        filter: blur(3px);
    }
}

.hero-body {
    margin-top: clamp(44px, 6vw, 80px);
    display: flex;
    flex-direction: column;
    gap: clamp(30px, 4.5vw, 56px);
}

/* The statement first, alone, at full width. Then the two columns of detail. */
.hero h1 {
    font-size: clamp(2.15rem, 4.8vw, 4.2rem);
    line-height: 1.02;
    letter-spacing: -0.01em;
    max-width: 22ch;
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(28px, 5vw, 80px);
    align-items: start;
    padding-top: clamp(22px, 3vw, 34px);
    border-top: 1px solid var(--line);
}

.hero-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.lede {
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    line-height: 1.5;
    color: var(--ink);
    max-width: 50ch;
}

.lede em {
    font-style: italic;
    color: var(--ink);
}

.lede-2 {
    color: var(--ink-2);
    max-width: 50ch;
}

/* The name spelled out, once, where a first-time reader meets it. */
.lede-2 em {
    font-style: normal;
    color: var(--ink);
}

.hero h1 em {
    font-style: normal;
    color: var(--green);
}

.hero-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    font-family: var(--mono);
    font-size: 13.5px;
    color: var(--ink-3);
    margin-top: 2px;
}

.facts span {
    padding-right: 18px;
    margin-right: 18px;
    border-right: 1px solid var(--line);
}

.facts span:last-child {
    border: 0;
    margin: 0;
    padding: 0;
}


/* The plate is the cover, rebuilt from its parts: the garden, drawn through a
   Bayer dither in WebGL; the lettering, one SVG glyph per letter so each can move;
   the two marks. Everything sits in the cover's own 1672 x 941 coordinates and is
   scaled to cover the plate. */
.plate-img {
    position: absolute;
    inset: 0;
}

.dither {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: none;
}

.plate.gl .dither {
    display: block;
}

.plate.gl .plate-img,
.plate.gl .screen {
    display: none;
}

.stage {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1672px;
    height: 941px;
    transform: translate(-50%, -50%) scale(var(--s));
    pointer-events: none;
    color: #fff;
}

.plate-close .stage {
    display: none;
}

.lockup {
    position: absolute;
    left: 524px;
    top: 116px;
    width: 625px;
    height: 727px;
}

.lockup-mark {
    position: absolute;
    left: 50%;
    top: 0;
    width: 214px;
    height: 135px;
    margin-left: -107px;
    transform-origin: 50% 50%;
    transition: transform 0.5s var(--ease);
}

.lockup-mark svg,
.brace svg,
.g svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
    overflow: visible;
}

.lockup-title {
    position: absolute;
    left: 0;
    top: 215px;
    width: 625px;
    height: 279px;
}

/* A transformed stage is its own stacking context, so the blend is set on the
   stage and blends with the picture beneath it. */
.stage-title {
    mix-blend-mode: overlay;
}

.brace {
    position: absolute;
    top: 83px;
    width: 41px;
    height: 112px;
    transition: transform 0.5s var(--ease);
}

.brace-l {
    left: 4px;
}

.brace-r {
    right: 4px;
}

.lines {
    position: absolute;
    left: 69px;
    width: 487px;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.line {
    height: 93px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.g {
    display: block;
    width: calc(var(--w) * 1px);
    height: 68px;
    will-change: transform;
}

.lockup-face {
    position: absolute;
    left: 237px;
    top: 574px;
    width: 151px;
    height: 153px;
    transform-origin: 50% 70%;
    transition: transform 0.5s var(--ease);
}

.lockup-face img {
    display: block;
    width: 100%;
    height: 100%;
}

/* On the night plate the marks are cut out of the picture rather than laid on it. */
:root[data-theme="dark"] .stage-marks,
:root[data-theme="dark"] .stage-title {
    mix-blend-mode: difference;
}

.defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* --------------------------------------------------------------- theme toggle */

.theme {
    position: fixed;
    top: 18px;
    right: clamp(18px, 2.6vw, 40px);
    z-index: 30;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--mono);
    font-size: 12.5px;
    letter-spacing: 0.02em;
    color: var(--ink);
    background: color-mix(in srgb, var(--paper) 78%, transparent);
    backdrop-filter: blur(10px);
    border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
    border-radius: 999px;
    padding: 7px 12px 7px 9px;
    cursor: pointer;
    transition:
        background 0.25s var(--ease),
        color 0.25s var(--ease);
}

.theme:hover {
    background: var(--paper);
}

.theme-disc {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    background: linear-gradient(90deg, currentColor 50%, transparent 50%);
    transition: transform 0.5s var(--ease);
}

:root[data-theme="dark"] .theme-disc {
    transform: rotate(180deg);
}

/* --------------------------------------------------------------- command */

.cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.command {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--mono);
    font-size: 16px;
    background: var(--ink);
    color: var(--paper);
    border: 0;
    padding: 16px 22px;
    border-radius: 10px;
    cursor: copy;
    box-shadow: 0 10px 26px -16px var(--shadow);
    transition:
        transform 0.2s var(--ease),
        box-shadow 0.2s var(--ease);
}

.command:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px -16px var(--shadow);
}

.command .dollar {
    color: color-mix(in srgb, var(--paper) 64%, var(--ink));
}

/* On hover the prompt does what prompts do. */
.command:hover .dollar {
    animation: caret 1.1s steps(1) infinite;
}

@keyframes caret {
    50% {
        opacity: 0.25;
    }
}

/* The moment of copying: the text is selected, then the prompt says it went. */
.command.flash .cmd {
    background: var(--green);
    color: var(--paper);
    border-radius: 2px;
}

.command.done .dollar {
    color: color-mix(in srgb, var(--mark-green) 80%, var(--paper));
    animation: none;
}

.copied-note {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--ink-3);
    min-height: 1.6em;
    margin-top: -6px;
    transition: opacity 0.3s var(--ease);
}

.textlink {
    font-weight: 500;
    color: var(--ink);
    text-decoration-color: var(--line);
}

.textlink:hover {
    text-decoration-color: var(--green);
    color: var(--green);
}

/* --------------------------------------------------------------- symptoms */

.symptoms {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--line);
}

.symptom {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(16px, 4vw, 56px);
    padding-block: clamp(22px, 3vw, 32px);
    border-bottom: 1px solid var(--line);
}

.symptom h3 {
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.symptom p {
    color: var(--ink-2);
}

.symptom code {
    color: var(--coral-ink);
}

/* ------------------------------------------------------------------ claim */

/* The thesis of the page, so it gets a ground of its own: a recessed band between
   two hairlines, narrower than everything around it. */
.claim {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--paper-sunk);
    padding-block: clamp(56px, 8vw, 110px);
}

.claim .shell {
    max-width: 900px;
}

/* The sentence has a hole in it. An agent meets the same hole and fills it with
   something that does not exist; a beat after the line arrives, so does the box. */
.slot {
    display: inline-block;
    position: relative;
    border: 1.5px dashed var(--line-strong);
    border-radius: 10px;
    padding: 0 0.22em;
    margin: 0 0.06em;
    transition: border-color 0.5s var(--ease);
}

.slot i {
    font-family: var(--mono);
    font-style: normal;
    font-size: 0.62em;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--coral-ink);
    opacity: 0;
    transition: opacity 0.5s var(--ease);
}

.slot.filled {
    border-style: solid;
    border-color: color-mix(in srgb, var(--mark-coral) 45%, transparent);
}

.slot.filled i {
    opacity: 1;
}

/* Without JavaScript, and for a reader who asked for no motion, the box is simply
   filled: the point is the invented component, not the timing. */
html:not(.js) .slot i {
    opacity: 1;
}
html:not(.js) .slot {
    border-style: solid;
}

.claim p {
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(1.75rem, 3.9vw, 3.15rem);
    line-height: 1.06;
    letter-spacing: -0.008em;
    text-wrap: balance;
}

.claim em {
    font-style: normal;
    color: var(--green);
}

.claim .claim-sub {
    font-family: var(--sans);
    font-weight: 400;
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--ink-2);
    max-width: 46ch;
    margin-top: clamp(18px, 2.4vw, 28px);
}

/* ------------------------------------------------------------------- loop */

/* One terminal, three commands: the steps scroll past while the transcript stays,
   and the reader watches 9 become 23. */
.loop {
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(32px, 4vw, 56px);
    align-items: start;
}

.loop-steps {
    display: flex;
    flex-direction: column;
    position: relative;
}

.loop-steps::before {
    content: "";
    position: absolute;
    left: calc(1.8rem - 1px);
    top: 20px;
    bottom: 20px;
    width: 1px;
    background: var(--line);
}

.step {
    display: grid;
    grid-template-columns: 3.6rem minmax(0, 1fr);
    gap: clamp(16px, 2.5vw, 30px);
    align-items: start;
    min-height: 62vh;
    padding-block: 10px;
    transition: opacity 0.4s var(--ease);
}

.loop[data-active] .step:not(.is-active) {
    opacity: 0.38;
}

.step .n {
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(1.5rem, 2.6vw, 2.2rem);
    line-height: 0.9;
    letter-spacing: -0.012em;
    color: var(--green);
    font-variant-numeric: tabular-nums;
    background: var(--paper);
    position: relative;
    z-index: 1;
    padding: 2px 0 8px;
}

.step h3 {
    font-size: 1.35rem;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
    padding-top: 0.1em;
}

.step p {
    color: var(--ink-2);
    max-width: 40ch;
}

.loop-term {
    position: sticky;
    top: clamp(72px, 14vh, 140px);
}

.loop-term .term {
    display: grid;
    overflow: hidden;
}

.loop-term pre {
    font-size: 12px;
}

.loop-term pre {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(6px);
    transition:
        opacity 0.45s var(--ease),
        transform 0.55s var(--ease);
    pointer-events: none;
}

.loop-term .term[data-active="1"] pre[data-for="1"],
.loop-term .term[data-active="2"] pre[data-for="2"],
.loop-term .term[data-active="3"] pre[data-for="3"] {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

/* Bars that grew between the runs grow again in front of you. */
.bar {
    display: inline-block;
}

.bar.grow > :first-child {
    display: inline-block;
    clip-path: inset(0 100% 0 0);
}

.term[data-active="3"].played .bar.grow > :first-child {
    clip-path: inset(0);
    transition: clip-path 0.9s var(--ease) var(--d, 0ms);
}

.term[data-active="3"].played .delta {
    animation: appear 0.5s var(--ease) 1.1s both;
}

@keyframes appear {
    from {
        opacity: 0;
    }
}

.provenance {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--ink-3);
    margin-top: 12px;
}

/* --------------------------------------------------------------- terminal */

.term {
    min-width: 0;
    background: var(--term);
    border: 1px solid var(--term-line);
    color: #e9e8dd;
    border-radius: 11px;
    padding: 18px 20px;
    overflow-x: auto;
    box-shadow: 0 18px 40px -30px rgba(20, 23, 14, 0.85);
}

.term pre {
    margin: 0;
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.62;
    white-space: pre;
}

.term .c {
    color: #9db08c;
}
.term .g {
    color: #22c55e;
}
.term .r {
    color: #ef4444;
}
.term .y {
    color: #eab308;
}
.term .d {
    color: #8c987f;
}

/* The terminal surface lifts at night, so the red lifts with it. */
:root[data-theme="dark"] .term .r {
    color: #f87171;
}

/* ----------------------------------------------------------------- report */

.band.dark {
    background: var(--band);
    border-top: 0;
    color: var(--night-ink);
    position: relative;
    overflow: hidden;
}

.band.dark .shell {
    position: relative;
}

.band.dark h2 {
    color: #f2f1e7;
}

.band.dark .head p,
.band.dark .notes li {
    color: var(--night-ink-2);
}

.band.dark .notes li {
    border-top-color: var(--night-line);
}

.band.dark .notes b {
    color: #f2f1e7;
}

.band.dark .shot-caption {
    color: var(--night-ink-3);
}

.band.dark + section {
    border-top: 0;
}

.frame {
    position: relative;
    padding: 34px 0 0;
}

.frame-label {
    position: absolute;
    top: 0;
    left: 0;
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.06em;
    color: var(--night-ink-3);
}

.frame::after {
    content: "";
    position: absolute;
    top: 26px;
    right: 0;
    width: 34px;
    height: 1px;
    background: #3a3f30;
}

/* The document rises into view once, then holds. */
.shot {
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    background: var(--paper);
    /* At night the report is dark too, so it needs an edge to stay a document
       lying on the band rather than a hole in it. */
    box-shadow:
        inset 0 0 0 1px var(--night-line),
        0 40px 90px -50px rgba(0, 0, 0, 0.75);
    clip-path: inset(0 0 0 0);
}

/* Not a picture of the report: the report. Same file the tool writes, running in
   the page, scrolling on its own. */
.shot .live {
    display: block;
    width: 100%;
    height: min(680px, 76vh);
    border: 0;
    background: var(--paper);
    color-scheme: light;
}

:root[data-theme="dark"] .shot .live {
    color-scheme: dark;
}

.frame.pending .shot {
    clip-path: inset(0 0 100% 0);
    transform: translateY(24px);
}

.frame.in .shot {
    clip-path: inset(0);
    transform: none;
    transition:
        clip-path 0.8s var(--ease),
        transform 0.8s var(--ease);
}

.shot img {
    display: block;
    width: 100%;
}

.shot-caption {
    font-family: var(--mono);
    font-size: 13px;
    margin-top: 14px;
}

.notes {
    margin: clamp(30px, 4vw, 46px) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(18px, 2.6vw, 32px);
}

.notes li {
    padding-top: 15px;
    border-top: 1px solid var(--line);
    font-size: 15px;
    line-height: 1.55;
}

.notes b {
    font-weight: 600;
}

/* ----------------------------------------------------------------- rubric */

.rubric {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: start;
}

.ring-col {
    position: sticky;
    top: clamp(80px, 16vh, 150px);
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.ring {
    --fill: 100;
    /* Nine wedges, each its own variable so a row can light its own. */
    --w0: var(--mark-green);
    --w1: var(--mark-green);
    --w2: var(--coral);
    --w3: var(--coral);
    --w4: var(--amber);
    --w5: var(--coral);
    --w6: var(--coral);
    --w7: var(--amber);
    --w8: var(--amber);
    --t: var(--line);
    width: clamp(190px, 22vw, 300px);
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    position: relative;
    background: conic-gradient(
        from -90deg,
        var(--w0) 0 11.11%,
        var(--w1) 11.11% 22.22%,
        var(--w2) 22.22% 24.44%,
        var(--t) 24.44% 33.33%,
        var(--w3) 33.33% 35.55%,
        var(--t) 35.55% 44.44%,
        var(--w4) 44.44% 51.11%,
        var(--t) 51.11% 55.55%,
        var(--w5) 55.55% 57.77%,
        var(--t) 57.77% 66.66%,
        var(--w6) 66.66% 68.88%,
        var(--t) 68.88% 77.77%,
        var(--w7) 77.77% 84.44%,
        var(--t) 84.44% 88.88%,
        var(--w8) 88.88% 95.55%,
        var(--t) 95.55% 100%
    );
    transition: --fill 1.2s var(--ease);
}

.ring::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    background: conic-gradient(from -90deg, transparent calc(var(--fill) * 1%), var(--paper) 0);
}

.ring-hole {
    position: relative;
    z-index: 1;
    width: 72%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--paper);
    display: grid;
    place-items: center;
    align-content: center;
}

.ring-hole b {
    font-family: var(--mono);
    font-size: clamp(36px, 4.6vw, 54px);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.ring-hole span {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--ink-3);
    margin-top: 5px;
}

.ring-note {
    color: var(--ink-2);
    font-size: 15px;
    max-width: 34ch;
}

.score-key {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    font-size: 13.5px;
    color: var(--ink-3);
}

.score-key span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.score-key s {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    text-decoration: none;
    display: block;
}

.score-key .k1 {
    background: var(--coral);
}
.score-key .k3 {
    background: var(--amber);
}
.score-key .k5 {
    background: var(--mark-green);
}

.rows {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line);
}

.row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 118px 44px;
    gap: clamp(16px, 2.5vw, 30px);
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
    cursor: default;
    outline-offset: 6px;
}

.row-text {
    display: grid;
    min-width: 0;
}

.row-text b {
    font-weight: 600;
    font-size: 15.5px;
    letter-spacing: -0.01em;
}

/* The question and the evidence share one slot; hover swaps them. */
.row-text .q,
.row-text .ev {
    grid-area: 2 / 1;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--ink-2);
    transition: opacity 0.2s var(--ease);
}

.row-text .ev {
    opacity: 0;
    color: var(--ink);
}

.row:hover .q,
.row:focus-visible .q,
.row.hot .q {
    opacity: 0;
}

.row:hover .ev,
.row:focus-visible .ev,
.row.hot .ev {
    opacity: 1;
}

.row .meter {
    display: flex;
    gap: 3px;
}

.row .meter i {
    height: 6px;
    flex: 1;
    border-radius: 2px;
    background: var(--line);
}

.row[data-score="5"] .meter i.on {
    background: var(--mark-green);
}
.row[data-score="3"] .meter i.on {
    background: var(--amber);
}
.row[data-score="1"] .meter i.on {
    background: var(--mark-coral);
}

.row .v {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--ink-3);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.dim-note {
    margin-top: 26px;
    color: var(--ink-3);
    font-size: 15px;
    max-width: 60ch;
}

/* ------------------------------------------------------------- experiment */

.exp {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(28px, 4vw, 52px);
    align-items: start;
}

.exp .term pre {
    font-size: 12.5px;
}

.exp-copy p + p {
    margin-top: 15px;
}

.exp-copy p {
    color: var(--ink-2);
    max-width: 52ch;
}

.rounds {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 5vw, 64px);
    margin-top: clamp(32px, 4vw, 56px);
    padding-top: clamp(28px, 3vw, 40px);
    border-top: 1px solid var(--line);
}

.round b {
    display: flex;
    align-items: baseline;
    font-family: var(--display);
    font-size: clamp(3.4rem, 9vw, 7rem);
    font-weight: 600;
    line-height: 0.86;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.round b i {
    font-style: normal;
    font-size: 0.42em;
    color: var(--ink-3);
    margin: 0 0.14em;
    transform: translateY(-0.18em);
}

.round.bad b {
    color: var(--figure-coral);
}
.round.good b {
    color: var(--figure-green);
}

.round > span {
    display: block;
    margin-top: clamp(12px, 1.4vw, 18px);
    font-size: 14.5px;
    color: var(--ink-3);
}

/* ----------------------------------------------------------------- honest */

.honest {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 40px);
}

.honest > div {
    padding-top: 15px;
    border-top: 1px solid var(--line);
}

.honest h3 {
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.honest p {
    color: var(--ink-2);
    font-size: 15.5px;
}

/* ---------------------------------------------------------------- install */

/* The page opened with the screen lifting off the garden. It closes with the
   screen coming down onto it. */
.install {
    position: relative;
    padding: 0;
    border-top: 0;
    display: grid;
}

.install > .plate-close,
.install > .shell {
    grid-area: 1 / 1;
}

.plate-close {
    height: 100%;
    min-height: min(40vw, 56vh);
}

.screen-land {
    animation: none;
    opacity: 0;
    background-size: 26px 26px;
}

.plate-close.in .screen-land {
    animation: land 1000ms var(--ease) forwards;
}

@keyframes land {
    from {
        opacity: 0;
        background-size: 26px 26px;
        filter: blur(3px);
    }
    to {
        opacity: 0.55;
        background-size: 5px 5px;
        filter: blur(0);
    }
}

.install .shell {
    position: relative;
    z-index: 1;
    inset: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: none;
    padding: clamp(40px, 5.5vw, 80px) clamp(20px, 3vw, 44px);
}

.panel {
    min-width: 0;
    background: var(--paper);
    border-radius: 14px;
    padding: clamp(26px, 3.4vw, 42px);
    width: 100%;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.6);
}

.panel h2 {
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    line-height: 1.04;
}

.panel > p {
    color: var(--ink-2);
    max-width: 46ch;
}

.panel .term {
    box-shadow: none;
}

.panel .cta {
    margin-top: 2px;
}

/* In the closing panel the command is the whole point, so it takes the width and
   the two links sit under it. */
.cta-stacked {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
}

.command.wide {
    width: 100%;
    justify-content: center;
}

.cta-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 20px;
}

.cta-links a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

/* ----------------------------------------------------------------- footer */

footer {
    border-top: 1px solid var(--line);
    padding-block: 30px 44px;
}

footer .shell {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: space-between;
    align-items: center;
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--ink-3);
}

footer .sig {
    display: flex;
    align-items: center;
    gap: 10px;
}

footer .mark {
    width: 22px;
    height: auto;
    color: var(--ink-3);
}

footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

footer nav a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

/* ----------------------------------------------------------------- motion */

[data-reveal] {
    opacity: 0;
    transform: translateY(10px);
}

[data-reveal].in {
    opacity: 1;
    transform: none;
    transition:
        opacity 0.55s var(--ease) var(--delay, 0ms),
        transform 0.65s var(--ease) var(--delay, 0ms);
}

/* No JavaScript: everything is simply there. */
html:not(.js) [data-reveal] {
    opacity: 1;
    transform: none;
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 1100px) {
    .rail {
        display: none;
    }
    .topbar {
        display: block;
    }
    .hero-grid,
    .exp,
    .rubric {
        grid-template-columns: minmax(0, 1fr);
    }
    .ring-col {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }
    .notes,
    .honest {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Below the sticky layout the loop stacks, each transcript under its step. */
    .loop {
        grid-template-columns: minmax(0, 1fr);
    }
    .step {
        min-height: 0;
        padding-block: 0;
        margin-bottom: 28px;
    }
    .loop[data-active] .step:not(.is-active) {
        opacity: 1;
    }
    .loop-term {
        position: static;
    }
    .loop-term .term {
        display: flex;
        flex-direction: column;
        gap: 26px;
        min-width: 0;
        overflow: hidden;
    }
    .loop-term pre {
        opacity: 1;
        transform: none;
        pointer-events: auto;
        min-width: 0;
        overflow-x: auto;
    }
    .bar.grow > :first-child {
        clip-path: none;
    }
    .install .shell {
        padding-block: clamp(28px, 6vw, 52px);
    }
    .plate-close {
        min-height: 0;
    }
    .panel {
        max-width: 520px;
        padding: clamp(22px, 5vw, 32px);
    }
}

@media (max-width: 900px) {
    /* A transcript that scrolls sideways on a phone is a transcript nobody reads.
       Wrapping is a small lie about a terminal; a hidden half of the line is a
       bigger one. */
    .term pre,
    .loop-term pre,
    .badge-copy .term pre {
        white-space: pre-wrap;
        word-break: break-word;
        overflow-x: hidden;
        font-size: 12px;
    }
    .term {
        overflow-x: hidden;
    }
}

@media (max-width: 620px) {
    body {
        font-size: 16px;
    }
    .symptom,
    .step {
        grid-template-columns: minmax(0, 1fr);
    }
    /* The rail threads the gutter between number and copy. Once the step stacks
       into one column there is no gutter, so the line would run down the middle
       of the paragraphs instead. */
    .loop-steps::before {
        display: none;
    }
    .step {
        row-gap: 6px;
    }
    .step .n {
        background: none;
        padding-bottom: 4px;
    }
    .row {
        grid-template-columns: minmax(0, 1fr) 72px 40px;
        gap: 12px;
    }
    .term {
        padding: 14px;
    }
    .term pre {
        font-size: 12px;
    }
    .rounds,
    .notes,
    .honest {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }
    .command {
        font-size: 15px;
        padding: 14px 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .slot {
        border-style: solid;
    }
    .slot i {
        opacity: 1;
    }
    html {
        scroll-behavior: auto;
    }
    .screen,
    .screen-land,
    .plate-close.in .screen-land {
        animation: none;
        opacity: 0;
    }
    .ring {
        --fill: 100 !important;
        transition: none;
    }
    [data-reveal] {
        opacity: 1;
        transform: none;
    }
    .frame.pending .shot,
    .frame.in .shot {
        clip-path: inset(0);
        transform: none;
        transition: none;
    }
    .bar.grow > :first-child {
        clip-path: none !important;
        transition: none;
    }
    .loop-term pre {
        transition: none;
    }
    .command:hover .dollar {
        animation: none;
    }
    * {
        transition-duration: 0.01ms !important;
    }
}

/* Below the rail breakpoint the toggle sits in the top bar's row and the links
   scroll under it. */
@media (max-width: 1099px) {
    .theme {
        top: 7px;
        right: 14px;
    }
    .topbar .shell {
        padding-right: 110px;
    }
}

/* ------------------------------------------------------------------ badge */

/* The one artifact that leaves the repository. Shown at all four bands, drawn
   here rather than fetched, in the exact colours `adsa badge` prints. */
.badge-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: start;
    padding-top: clamp(4px, 1vw, 12px);
}

.bands {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bands li {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.badge {
    display: inline-flex;
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1;
    border-radius: 4px;
    overflow: hidden;
    flex: none;
}

.badge b,
.badge i {
    padding: 6px 8px;
    font-style: normal;
    font-weight: 400;
    color: #fff;
}

.badge b {
    background: #4c4c4c;
}

.badge i {
    background: var(--badge);
}

.band-note {
    font-size: 14px;
    color: var(--ink-3);
}

.band-note code {
    font-size: 0.92em;
}

.band-legend {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    font-size: 14px;
    color: var(--ink-3);
    max-width: 42ch;
}

.badge-copy {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3vw, 28px);
}

.badge-copy .term pre {
    font-size: 12.5px;
    /* One markdown line is longer than the column at any width worth designing
       for, so it wraps rather than hiding its own tail. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.notes.badge-notes {
    margin: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

@media (max-width: 900px) {
    .badge-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}