/* Ipnops — the web surface.
   The same dark system as the Programmer app (ipnops-programmer-web, globals.css):
   ink on pure black, one weight with emphasis by size, mono uppercase for labels and
   numbers, hairlines instead of boxes, 4px corners, no shadows, no gradients. The
   tokens below are that app's: --bg #000, --ink #ededed, --ink-2 #8f8f8f, --rule #222,
   --panel #0b0b0b, the Instrument Sans and Geist Mono pair. One accent, sampled from the imagery: teal.
   --accent is the bright teal of the glow lines (what you asked for or decided); --accent-dim is the teal of the
   line bodies (what left or was checked). Neither is ever a hover tint or a border on something merely present.
   Contrast on black: ink 17.8, --fg-2 10.4, --fg-3 (the app's ink-2) 6.3, --accent 10.2, --accent-dim 6.1 (both AA for text; the focus ring clears 3:1 by a wide margin).
   The app's ink-3 (#6b6b6b, 3.8) is below AA for text and is used here only for the
   dot of a state that carries a label next to it. */

:root {
  --bg: #000;
  --bg-2: #000;         /* one ground: the hero band and the band below no longer meet in a seam */
  --panel: #0b0b0b;
  --panel-2: #141414;
  --fg: #ededed;        /* ink */
  --fg-2: #b8b8b8;      /* body text on black */
  --fg-3: #8f8f8f;      /* labels and numbers (the app's ink-2) */
  --rule: #222;
  --rule-lit: #3a3a3a;
  --control: #6b6b6b;
  --accent: #7ec1ba;      /* the glow of the imagery: asked for, decided, links, focus */
  --accent-dim: #59948d;  /* the body of the imagery's lines: left, checked */
  --accent-glow: rgba(126, 193, 186, .35);
  --danger: #d98c8c;      /* errors only */
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --f-display: clamp(2.5rem, 5.5vw, 4.5rem);
  --f-h2: clamp(1.875rem, 3.6vw, 3rem);
  --f-h4: clamp(1.125rem, 1.5vw, 1.375rem);
  --f-body-lg: clamp(1.125rem, 1.4vw, 1.375rem);
  --f-caption: .875rem;
  --f-number: .8125rem;
  --gutter: 12px;
  --radius: 4px;
  --ease: cubic-bezier(.2, 0, 0, 1);
  --max: 1440px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 1rem/1.55 var(--sans); }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; max-width: 62ch; color: var(--fg-2); }
::selection { background: var(--fg); color: #000; }

/* type roles */
.display { font: 400 var(--f-display)/.98 var(--sans); letter-spacing: -.035em; margin: 0; max-width: 16ch; color: var(--fg); text-wrap: balance; }
.title { font: 400 var(--f-h2)/1.05 var(--sans); letter-spacing: -.025em; margin: 0 0 1rem; max-width: 20ch; color: var(--fg); text-wrap: balance; }
.heading { font: 400 var(--f-h4)/1.25 var(--sans); letter-spacing: -.01em; margin: 0 0 .75rem; color: var(--fg); }
.lead { font: 400 var(--f-body-lg)/1.45 var(--sans); letter-spacing: -.005em; max-width: 34em; margin: 0 0 1.25rem; color: var(--fg); }
.label { font: 400 var(--f-number)/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--fg-2); }
.record { font: 400 var(--f-caption)/1.6 var(--mono); }
.muted { color: var(--fg-3); }
.sha .record { overflow-wrap: anywhere; }

/* grounds: one black. The paper ground is a panel step, not a second theme. */
.on-ink, .on-paper { background: var(--bg); color: var(--fg); }
.on-ink { --bg: var(--bg-2); }

/* grid */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 clamp(16px, 2.2vw, 32px); }
.cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); column-gap: clamp(24px, 4.5vw, 72px); }
.c3 { grid-column: span 3; } .c4 { grid-column: span 4; } .c5 { grid-column: span 5; } .c6 { grid-column: span 6; }
.c7 { grid-column: span 7; } .c8 { grid-column: span 8; } .c12 { grid-column: span 12; }
.cols > *, .pair > * { min-width: 0; }   /* a pre or table scrolls inside its column, never widens the page */

/* chrome */
.top { position: sticky; top: 0; z-index: 10; background: rgba(0, 0, 0, .88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--rule); }
.top .wrap { display: flex; align-items: center; gap: 24px; height: 56px; }
.wordmark { display: inline-flex; align-items: center; color: var(--fg); }
.wordmark img { display: block; height: 22px; width: auto; }
footer .wordmark { margin-bottom: .5rem; }
footer .wordmark img { height: 26px; }
.top nav { margin-left: auto; display: flex; gap: 22px; align-items: center; }
.top nav a { position: relative; font: 400 var(--f-caption)/1 var(--sans); color: var(--fg-2); padding-bottom: 2px; border-bottom: 1px solid var(--rule-lit); transition: color .3s var(--ease), border-color .3s var(--ease); }
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--fg); border-color: var(--fg); }
.top nav a::before { content: ""; position: absolute; inset: -15px -8px; }
.top nav a.sign { color: var(--bg); background: var(--fg); border: 0; padding: 7px 12px; border-radius: var(--radius); }
.top nav a.sign:hover { background: #fff; }
@media (max-width: 900px) { .top nav a:not(.sign):not(.keep) { display: none; } }
.wordmark, .top nav a { white-space: nowrap; }
/* Phones and tablets: the name and one Menu button; the pages open in a
   full-screen sheet. */
.menu-btn { display: none; margin-left: auto; align-items: center; justify-content: flex-end; gap: 10px; background: none; border: 0; padding: 0 2px; min-height: 44px; min-width: 44px; color: var(--fg); cursor: pointer;
  font: 400 var(--f-number)/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.menu-btn .bars { position: relative; width: 18px; height: 7px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; transition: transform .3s var(--ease), height .3s var(--ease); }
.menu-btn[aria-expanded="true"] .bars { height: 0; border-bottom: 0; transform: none; }
.menu { position: fixed; inset: 56px 0 0 0; z-index: 9; background: var(--bg); border-top: 1px solid var(--rule); padding: 2rem clamp(16px, 2.2vw, 32px) 3rem; overflow-y: auto; display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem; }
.menu[hidden] { display: none; }
.menu-links { display: flex; flex-direction: column; }
.menu-links a { font: 400 clamp(1.75rem, 7vw, 2.5rem)/1.1 var(--sans); letter-spacing: -.02em; color: var(--fg); padding: .9rem 0; border-bottom: 1px solid var(--rule); }
.menu-links a[aria-current="page"] { color: var(--fg-2); }
.menu-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 900px) { .top nav { display: none; } .menu-btn { display: inline-flex; } }
@media (min-width: 901px) { .menu { display: none !important; } }
body.menu-open { overflow: hidden; }

/* sections: a hairline, then the number and label in the mono */
section { padding: clamp(2.5rem, 4.5vw, 4.75rem) 0; }
section.tight { padding-top: clamp(2rem, 4vw, 4rem); }
.rule { border-top: 1px solid var(--rule); padding-top: 1.5rem; }
.sect-label { display: flex; gap: 18px; align-items: baseline; margin-bottom: clamp(1.75rem, 3.5vw, 3rem); }
.sect-label .n { font: 400 var(--f-number)/1 var(--mono); color: var(--fg-3); }
.sect-label .t { font: 400 var(--f-number)/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--fg-2); }

/* the hero */
.hero { padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(2.5rem, 5vw, 4.5rem); }
.hero .lead { margin-top: 2rem; max-width: 30em; color: var(--fg-2); }
.hero .avail { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: 12px 12px; align-items: center; }
.hero .avail .state { margin-right: 16px; }
.state { display: inline-flex; align-items: center; gap: 8px; font: 400 var(--f-number)/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--fg-2); }
.state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--control); }
.state.now::before { background: var(--accent); }
.state.now { color: var(--fg); }

/* buttons: small, square-shouldered, sentence case */
.btn { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border: 1px solid var(--rule-lit); border-radius: var(--radius); font: 400 var(--f-caption)/1 var(--sans); color: var(--fg); transition: border-color .3s var(--ease), background .3s var(--ease); }
.btn:hover { border-color: var(--fg); }
.btn.primary { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn.primary:hover { background: #fff; border-color: #fff; }
.link { color: var(--fg); border-bottom: 1px solid var(--rule-lit); padding-bottom: 1px; transition: border-color .3s var(--ease); }
.link:hover { border-color: currentColor; }

/* the record of a session: a panel on the ink, the marks in their dark shades */
.session { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.5rem 1.75rem; }
.session .line { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; padding: .4rem 0; font: 400 var(--f-caption)/1.6 var(--mono); color: var(--fg); }
.session .who { color: var(--fg-3); text-transform: uppercase; letter-spacing: .04em; }
.session .line.you .who { color: var(--accent); }
.session .line.step { color: var(--fg-2); }
.session .line.check .who { color: var(--accent-dim); }
.session .line.check { color: var(--fg); }
.session .num { color: var(--fg); }
.session .line.say { margin-top: .6rem; padding-top: 1rem; border-top: 1px solid var(--rule); font: 400 .9375rem/1.55 var(--sans); letter-spacing: -.005em; color: var(--fg); }
.session .line.say .who { font: 400 var(--f-caption)/1.6 var(--mono); padding-top: .1rem; }
html.js .arrive { opacity: 0; transform: translateY(6px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
html.js .arrive.in, html.js .hero .arrive { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js .arrive { opacity: 1; transform: none; transition: none; } }

/* ledger lists: rows and hairlines */
.ledger { border-top: 1px solid var(--rule); }
.row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); padding: 1.35rem 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.row .name { grid-column: span 3; font: 400 var(--f-h4)/1.2 var(--sans); letter-spacing: -.01em; color: var(--fg); }
.row .what { grid-column: span 7; margin: 0; max-width: 60ch; }
.row .st { grid-column: span 2; justify-self: end; }
@media (max-width: 800px) { .row { grid-template-columns: 1fr; gap: .4rem; } .row > * { grid-column: auto; } .row .st { justify-self: start; } }

/* pairs: bordered panels of equal weight, as Ipnops's cards */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
.pair { row-gap: clamp(2.5rem, 4vw, 3.5rem); column-gap: clamp(24px, 4.5vw, 72px); }
.pair > div { border-top: 1px solid var(--rule-lit); padding: 1.25rem 0 0; }
.pair .q { font: 400 var(--f-number)/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--fg-2); margin-bottom: 1.5rem; }
.pair .heading { margin-bottom: 1rem; }
.pair p:not(.heading) { font-size: .9375rem; }
@media (max-width: 800px) { .pair { grid-template-columns: 1fr; } .cols > * { grid-column: span 12; } }

/* the identity document: the machine's own words, quoted */
.doc { font: 400 var(--f-caption)/1.7 var(--mono); background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin: 0; white-space: pre; overflow-x: auto; color: var(--fg); }
.doc .k { color: var(--fg-3); } .doc .m { color: var(--accent); } .doc .s { color: var(--accent-dim); }

/* comparison as a ledger, not a scorecard */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 1rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font: 400 var(--f-number)/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--fg-2); }
td { padding-right: var(--gutter); color: var(--fg); }
td.yes { color: var(--accent-dim); }
td.not { color: var(--fg-3); }
.tablewrap { overflow-x: auto; }

/* closing */
.close { text-align: center; }
.close .display { margin: 0 auto; }
.close .avail { justify-content: center; }
.close .lead { color: var(--fg-2); }

footer { border-top: 1px solid var(--rule); padding: 2rem 0 3rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: baseline; }
footer a, footer span { font: 400 var(--f-number)/1.6 var(--mono); color: var(--fg-2); letter-spacing: .02em; }
footer a:hover { color: var(--fg); }
footer .right { margin-left: auto; }

a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.skip { position: absolute; left: 16px; top: -64px; z-index: 20; background: var(--fg); color: #000; padding: 12px 16px; border-radius: var(--radius); font: 400 var(--f-caption)/1 var(--sans); }
.skip:focus { top: 12px; }
main:focus { outline: none; }
@media (pointer: coarse) { .btn { height: 44px; } footer a { display: inline-block; padding: 11px 0; } .chip { padding: 13px 16px; } }
footer a { padding: 4px 0; }

/* Live demos: Looper's own views on sample data */
.demos { display: grid; gap: 2rem; margin-top: 3.5rem; }
.demo { margin: 0; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--panel); padding: 1.25rem; min-width: 0; }
.demo figcaption { display: block; margin-bottom: 1rem; }
.demo-canvas { display: block; width: 100%; height: auto; border: 1px solid var(--rule); border-radius: var(--radius); background: #000; touch-action: none; }
.demo-svg { display: block; width: 100%; height: auto; overflow: visible; }
.demo-svg .lab { font: 400 9px var(--mono); fill: var(--fg-3); letter-spacing: .04em; }
.demo-note { font: 400 var(--f-caption)/1.5 var(--sans); color: var(--fg-2); margin-top: .9rem; }
.demo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .9rem; }
.demo-bar button { font: 400 var(--f-number)/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--fg-2); background: transparent; border: 1px solid var(--rule-lit); border-radius: var(--radius); padding: 8px 12px; cursor: pointer; }
.demo-bar button.on, .demo-bar button:hover { color: var(--bg); background: var(--fg); border-color: var(--fg); }
.demo-bar span { font: 400 var(--f-number)/1 var(--mono); color: var(--fg-3); margin-left: auto; text-transform: uppercase; letter-spacing: .04em; }
.demo-dots { display: grid; grid-template-columns: repeat(20, 1fr); gap: 4px; margin-top: .9rem; }
.demo-dots i { display: block; aspect-ratio: 1; border-radius: 50%; }
.demo-blend { display: grid; grid-template-columns: minmax(0, 14rem) 1fr 3rem; gap: .5rem 1rem; align-items: center; margin-top: 1rem; font: 400 var(--f-caption)/1.3 var(--sans); color: var(--fg); }
.demo-blend .bar { height: 4px; background: var(--rule); border-radius: 2px; overflow: hidden; }
.demo-blend .bar i { display: block; height: 100%; background: var(--fg); transition: width .15s var(--ease); }
.demo-blend .n { font: 400 var(--f-number)/1 var(--mono); color: var(--fg-2); text-align: right; }
.demo-props { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.demo-props li { background: var(--panel); padding: 1rem; font: 400 var(--f-caption)/1.5 var(--sans); color: var(--fg-2); display: grid; gap: .5rem; }
.demo-props li.aside { opacity: .45; }
.demo-props .who { font: 400 var(--f-number)/1 var(--mono); letter-spacing: .04em; color: var(--fg); }
@media (min-width: 900px) { .demos:has(> .demo + .demo) { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .demo { padding: .9rem; } .demo-props { grid-template-columns: 1fr; } .demo-dots { gap: 2px; } .demo-blend { grid-template-columns: minmax(0, 8rem) 1fr 2.5rem; } }
.demo-cues { list-style: none; margin: 1.25rem 0 0; padding: 0; border-top: 1px solid var(--rule); }
.demo-cues li { display: grid; grid-template-columns: 3.5rem 1fr auto; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--rule); font: 400 var(--f-caption)/1.3 var(--sans); color: var(--fg); }
.demo-cues .n { font: 400 var(--f-number)/1.3 var(--mono); color: var(--fg-3); text-transform: uppercase; letter-spacing: .04em; }
.demo[data-demo="venue"] .demo-cues li { cursor: pointer; }
.demo-cues li.on { color: var(--fg); background: var(--panel-2); }
.demo[data-demo="venue"] .demo-cues li:not(.on) { color: var(--fg-2); }
.hero .wrap { position: relative; }
.hero .wrap > :not(.hero-visual) { position: relative; z-index: 1; }
.hero-visual { position: absolute; z-index: 0; top: 50%; right: 0; width: min(62%, 860px); transform: translateY(-50%); pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30%); mask-image: linear-gradient(to right, transparent 0, #000 30%); }
.hero-visual .demo-canvas { border: 0; border-radius: 0; background: transparent; }
@media (max-width: 900px) { .hero-visual { position: static; width: 100%; transform: none; margin-top: 2.5rem; -webkit-mask-image: none; mask-image: none; } }
.menu:focus { outline: none; }

/* Stand anywhere: the twin's outputs for each standing place */
.stand { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(16px, 2vw, 28px); }
.stand-plan, .stand-view { cursor: pointer; }
.stand-view { cursor: grab; }
.stand-read { margin-top: 1rem; display: grid; gap: .55rem; }
.stand-read .row2 { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding-bottom: .55rem; border-bottom: 1px solid var(--rule); font: 400 var(--f-caption)/1.45 var(--sans); }
.stand-read .k { font: 400 var(--f-number)/1.45 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--fg-3); }
.stand-live { margin-top: .5rem; min-height: 1.4em; font: 400 var(--f-caption)/1.45 var(--mono); color: var(--fg-2); }
.stand-read .v { color: var(--fg); }
.stand-echo { margin-top: .75rem; }
@media (max-width: 900px) { .stand { grid-template-columns: 1fr; } .stand-read .row2 { grid-template-columns: 7rem 1fr; } }
.stand-see { margin: 1.25rem 0 0; }
.stand-see img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); border-radius: var(--radius); background: #000; }

/* the wave equation, live */
.wave-band { padding: 0 0 3rem; }
.wave-band .demo { border: 0; padding: 0; background: none; margin: 0; }
.wave { position: relative; width: 100%; max-width: calc(76vh * 1.47); margin: 0 auto; aspect-ratio: 3 / 2; background: #000; overflow: hidden; }
.wave .wave-field { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; image-rendering: auto; filter: blur(.4px); }
.wave .wave-over { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; background: transparent; cursor: crosshair; }
.wave-cap { max-width: 62ch; margin: 1rem auto 0; text-align: left; }
@media (min-width: 900px) { .wave-cap { margin-left: max(0px, calc((100% - 76vh * 1.47) / 2)); } }

/* how to use a demo, said first */
.demo-how { font: 400 var(--f-caption)/1.5 var(--sans); color: var(--fg); margin: 0 0 .9rem; max-width: 70ch; }
.demo-how::before { content: "HOW TO USE  "; font: 400 var(--f-number)/1 var(--mono); letter-spacing: .04em; color: var(--fg-3); }
.demo-select { height: 36px; max-width: 100%; margin: 0 0 .9rem; background: var(--panel-2); color: var(--fg); border: 1px solid var(--rule-lit); border-radius: var(--radius); font: 400 var(--f-caption)/1 var(--sans); padding: 0 .6rem; }

/* hidden means hidden, whatever display a class gives */
[hidden] { display: none !important; }

/* Stills: photographs of sound made visible, monochrome on black, full column width,
   with room above and below so the heading that follows starts clear of them. */
.still { margin: clamp(2rem, 4vw, 3.5rem) 0; }
.still + * { margin-top: clamp(2rem, 4vw, 3.5rem) !important; }
.still picture { display: block; }
.still img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border: 0; border-radius: 2px; background: var(--panel); filter: brightness(.86); }
@media (max-width: 640px) { .still img { aspect-ratio: 4 / 3; } }

/* blog */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 2.5rem; }
.chip { display: inline-block; font: 400 var(--f-caption)/1 var(--sans); color: var(--fg-2); border: 1px solid var(--rule-lit); border-radius: 999px; padding: 9px 14px; transition: border-color .3s var(--ease), color .3s var(--ease); }
.chip:hover { color: var(--fg); border-color: var(--fg); }
.chip.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.post-lead, .post-card { display: flex; flex-direction: column; gap: .55rem; color: var(--fg); }
.post-lead picture, .post-card picture, .still picture { display: block; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); padding: clamp(10px, 1.6vw, 22px); margin-bottom: .6rem; }
.post-lead picture img, .post-card picture img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border: 0; border-radius: 2px; background: var(--panel); filter: brightness(.86); }
.post-lead { margin-bottom: clamp(3rem, 6vw, 5rem); }
.post-meta { font: 400 var(--f-number, .75rem)/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); }
.post-title { font: 400 var(--f-h4)/1.2 var(--sans); letter-spacing: -.01em; max-width: 26ch; }
.post-title.big { font-size: var(--f-h2); line-height: 1.05; letter-spacing: -.025em; max-width: 22ch; }
.post-sum { color: var(--fg-2); max-width: 40em; }
.post-lead:hover .post-title, .post-card:hover .post-title { text-decoration: underline; text-decoration-color: var(--rule-lit); text-underline-offset: 4px; }
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) var(--gutter, 24px); }
@media (max-width: 960px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .post-grid { grid-template-columns: 1fr; } }
.post-tops { margin-top: 0; }
.prose { max-width: 40em; margin: 0 auto clamp(3rem, 6vw, 5rem); color: var(--fg); font-size: var(--f-body-lg); line-height: 1.55; }
.prose p, .prose ul, .prose ol, .prose blockquote { margin: 0 0 1.15em; color: var(--fg-2); }
.prose h2 { font: 400 var(--f-h2)/1.08 var(--sans); letter-spacing: -.02em; margin: 2.4em 0 .7em; color: var(--fg); font-size: clamp(1.5rem, 2.4vw, 2rem); }
.prose h3 { font: 400 1.0625rem/1.4 var(--sans); margin: 2em 0 .5em; color: var(--fg); }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { margin: .4em 0; }
.prose blockquote { padding-left: 1.1rem; border-left: 2px solid var(--fg); }
.prose strong { font-weight: 400; color: var(--fg); }
.prose a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--rule-lit); text-underline-offset: 3px; }
.prose code { font: 400 .9em var(--mono); }
.post-sources { margin-top: 3em; padding-top: 1.4em; border-top: 1px solid var(--rule); font-size: .9375rem; }
.post-sources .t { font: 400 var(--f-number, .75rem)/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); margin: 0 0 .8em; }
.post-sources ol { color: var(--fg-3); }
.post-sources a { color: var(--fg-2); }

/* diagrams: boxes, arrows and a return path, drawn in the site's tokens */
.flow { margin: 0 0 2rem; }
.flow svg { display: block; width: 100%; height: auto; overflow: visible; }
.flow .fv { display: none; max-width: 420px; margin: 0 auto; }
.flow .fl-box { fill: var(--panel); stroke: var(--rule-lit); stroke-width: 1; }
.flow .fl-hi { stroke: var(--fg); }
.flow .fl-k { font: 400 12px var(--mono); letter-spacing: .04em; fill: var(--fg-3); text-transform: uppercase; }
.flow .fl-t { font: 400 22px var(--sans); letter-spacing: -.01em; fill: var(--fg); }
.flow .fl-s { font: 400 14px var(--sans); fill: var(--fg-2); }
.flow .fl-c { font: 400 14px var(--sans); fill: var(--fg-2); }
.flow .fl-line { fill: none; stroke-width: 1.5; }
.flow .fl-out { stroke: var(--accent); }
.flow .fl-in { stroke: var(--accent-dim); stroke-dasharray: 7 5; }
.flow .mk-out { fill: var(--accent); }
.flow .mk-in { fill: var(--accent-dim); }
.fl-key { display: block; padding-left: 14px; position: relative; margin-bottom: .35rem; }
.fl-key::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; }
.fl-key.out::before { background: var(--accent); }
.fl-key.in::before { background: var(--accent-dim); }
@media (max-width: 760px) { .flow .fh { display: none; } .flow .fv { display: block; } .flow .fv .fl-t { font-size: 20px; } .flow .fv .fl-s { font-size: 13px; } }

/* an integration, opened: data path, mechanism, trust path */
.how { border-bottom: 1px solid var(--rule); }
.how:first-of-type { border-top: 1px solid var(--rule); }
.how summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 1.1rem 0; }
.how summary::-webkit-details-marker { display: none; }
.how summary .hn { font: 400 var(--f-h4)/1.25 var(--sans); letter-spacing: -.01em; color: var(--fg); }
.how summary::after { content: "+"; font: 400 var(--f-body-lg)/1 var(--mono); color: var(--fg-3); order: 3; }
.how[open] summary::after { content: "\2212"; }
.how summary:hover .hn { text-decoration: underline; text-decoration-color: var(--rule-lit); text-underline-offset: 4px; }
.how summary:focus-visible { outline: 2px solid var(--accent-dim); outline-offset: 2px; }
.how .hb { padding: 0 0 1.5rem; }
.path { margin: 0; display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: .6rem 1.5rem; }
.path dt { font: 400 var(--f-number)/1.6 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--fg-3); }
.path dd { margin: 0; color: var(--fg-2); max-width: 62ch; }
@media (max-width: 640px) { .path { grid-template-columns: 1fr; gap: .15rem; } .path dd { margin-bottom: .8rem; } }
.row .st:empty { display: none; }
.how summary .state { margin-left: auto; }

/* brand page */
.logo-tile { display: flex; align-items: center; justify-content: center; min-height: 200px; padding: 2rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--bg); }
.logo-tile.light { background: #fff; }
.logo-tile img { display: block; width: min(100%, 420px); height: auto; }
.logo-tile.mark img { width: 96px; }
.clear { position: relative; display: inline-block; padding: 52px; outline: 1px dashed var(--rule-lit); }
.clear img { display: block; width: 280px; max-width: 100%; height: auto; }
.swatch { display: flex; align-items: center; gap: 12px; font: 400 var(--f-caption)/1.4 var(--mono); color: var(--fg-2); }
.swatch i { display: block; width: 28px; height: 28px; border: 1px solid var(--rule-lit); border-radius: var(--radius); }
.flow figcaption { display: none; }
@media (max-width: 760px) { .flow figcaption { display: block; margin-top: 1rem; } }

/* imagery: black pixels pass the page through, so the picture has no edge on any dark ground */
.xray { display: block; margin: 0; }
.xray img { display: block; width: 100%; height: auto; mix-blend-mode: screen; }
.xcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
.xcard { border-top: 1px solid var(--rule-lit); padding-top: 1rem; }
.xcard .heading { margin: .75rem 0 .35rem; }
.xcard p { margin: 0; font-size: .9375rem; }
.xphone { max-width: 360px; border: 1px solid var(--rule); padding: 16px; }
@media (max-width: 800px) { .xcards { grid-template-columns: 1fr; } }
.xband { padding: 0 0 clamp(1.5rem, 3.5vw, 2.75rem); }
@media (min-width: 801px) { .xcards:has(> .xcard:nth-child(3):last-child), .xcards:has(> .xcard:nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.xband .xray { max-width: 1100px; margin: 0 auto; }
.xsec { margin: 0 0 clamp(2rem, 4vw, 3rem); }
.xsec .xray { max-width: 760px; margin: 0 auto; }