/* CS/M's site: direction A, Sheet, with C's instrument for each app (Cyrus, 20 Oct 2026: "agree a blend of a and c").
   The sheet: paper and ink as CS/M's identity sheet is set (hairlines, labels in tracked capitals with a number at
   their right, panels, one reversed), turning over by night as the device is set (nothing kept: no switch). The
   instrument: each app's page opens on a panel framed as its device is, its bar with PLAY, a live field beside its
   words (field.js). The square marks what plays, as Cyrusrex's; the circle the company's side, as CSMAKAR's. Colours
   from brand.css; every word in General Sans, the Indian Type Foundry's, served as it comes (docs/fonts/). */
@font-face {
  font-family: 'General Sans';
  src: url('/assets/fonts/GeneralSans-Variable.woff2') format('woff2');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --bg: var(--paper); --fg: var(--ink);
  --muted: color-mix(in srgb, var(--ink) 64%, var(--paper));
  --hair: color-mix(in srgb, var(--ink) 16%, var(--paper));
  --panel: color-mix(in srgb, var(--ink) 3%, var(--paper));
  --rev-bg: var(--ink); --rev-fg: var(--paper);
  --rev-muted: color-mix(in srgb, var(--paper) 66%, var(--ink));
  --rev-hair: color-mix(in srgb, var(--paper) 22%, var(--ink));
  --gut: 16px;
  /* the site's one curve for what moves when pointed at: a quick start, a calm landing */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* the accents (Cyrus, 23 Oct 2026: "also white so black and white. any complimaentary colors we can use?", "still
     minimal modern and clean but some accents maybe?"): CS/M's own pair, the circle's blue and the square's orange, are
     each other's complement on the wheel, so the sheet takes its colour from them alone, never a hue of its own, and
     only in lines and marks, the sheet itself black and white (his "The dark blue card is ugly", the same night). The
     blue for its structure (a section's mark, its number, a link), the orange for what plays and the title's full
     stop. The blue as text is the circle's own on paper (6:1); the orange is never small text (3:1) */
  --blue: var(--circle);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--ink); --fg: var(--paper);
    --muted: color-mix(in srgb, var(--paper) 66%, var(--ink));
    --hair: color-mix(in srgb, var(--paper) 20%, var(--ink));
    --panel: color-mix(in srgb, var(--paper) 5%, var(--ink));
    --rev-bg: var(--paper); --rev-fg: var(--ink);
    --rev-muted: color-mix(in srgb, var(--ink) 64%, var(--paper));
    --rev-hair: color-mix(in srgb, var(--ink) 16%, var(--paper));
    /* by night: the blue lightened to read on ink (7:1) */
    --blue: color-mix(in srgb, var(--circle) 55%, var(--paper));
  }
}
@media (min-width: 768px) { :root { --gut: 32px; } }
@media (min-width: 1440px) { :root { --gut: 48px; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color: var(--fg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font-family: 'General Sans', sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.5; font-kerning: normal; }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: color-mix(in srgb, var(--blue) 55%, transparent); transition: text-decoration-color 0.25s var(--ease); }
a:hover { text-decoration-color: var(--blue); }
::selection { background: color-mix(in srgb, var(--square) 28%, transparent); }
:focus-visible { outline: 2px solid var(--circle); outline-offset: 3px; }
.nw { white-space: nowrap; }
/* the way past the header for a keyboard: above the page until it has the focus */
.skip { position: absolute; left: 16px; top: 0; z-index: 2; padding: 0.6rem 1rem; background: var(--fg); color: var(--bg); text-decoration: none; transform: translateY(-100%); }
.skip:focus { transform: translateY(8px); }
.wrap { width: 100%; max-width: 1680px; margin-inline: auto; padding-inline: var(--gut); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* the label: tracked capitals, a number at its right, as the identity sheet's are */
.label {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.label a { text-decoration: none; }
.label a:hover { text-decoration: underline; }
.rule { border-top: 1px solid var(--hair); padding-top: 0.9rem; position: relative; }
/* a section's mark: a short stroke of the blue at the start of its rule, drawn in as the rule comes into view (site.js;
   without scripts, or with less motion asked for, it is simply there), and its number in the blue */
.rule::before { content: ''; position: absolute; left: 0; top: -1px; width: 2.25rem; height: 2px; background: var(--blue); transform-origin: left; transition: transform 0.9s var(--ease) 0.25s; }
.rule.rv-wait::before { transform: scaleX(0); }
:is(.rule, .hero > .label, .app-top > .label, .doc-top > .label) > span:last-child { color: var(--blue); }

/* the blocks under the fold, rising into place as the page comes to them (site.js) */
.rv-wait { opacity: 0; transform: translateY(18px); }
.rv-in { transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
@media print { .rv-wait { opacity: 1; transform: none; } }

/* words drawn apart for the eye (hero.js), read whole from a copy no one sees */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; user-select: none; }
.chars .w { white-space: nowrap; }
.chars .ch { display: inline-block; transition: color 0.3s var(--ease); }
/* a letter astray, as Polite Disorder's stray hit: in the square's orange while it is off its place */
.chars .ch.astray { color: var(--square); }


/* a draft, until Cyrus approves it (Terms and policies: the brief, rule 4) */
.draft { display: inline-block; margin-bottom: 1rem; padding: 0.3em 0.7em; border: 1px dashed var(--square); color: var(--fg); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
/* a fact that waits on him, in a draft */
.tbd { background: color-mix(in srgb, var(--square) 16%, transparent); outline: 1px dashed var(--square); outline-offset: -1px; padding: 0 0.3em; border-radius: 2px; }

/* the header: the mark with the full name beside it, a fine rule between, a link home, at every width (Cyrus, 23 Oct
   2026, of a mockup: "A"; never the mark, C//M and the name all at once: "Seems redundant to put logo alt logo and name
   all at once in places"), then the sections */
.hd { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem 1.25rem; padding-block: 1.1rem; border-bottom: 1px solid var(--hair); }
.hd-brand { display: flex; align-items: center; gap: 0.75rem; flex: none; color: inherit; text-decoration: none; }
.hd-mark img, img.hd-mark { display: block; height: 32px; width: auto; }
.hd-rule { display: block; width: 1px; height: 22px; background: currentColor; opacity: 0.5; }
.hd-name { font-weight: 500; font-size: 0.95rem; line-height: 1; white-space: nowrap; }

/* C//M drawn where the name is first met, the hero's line and Company's first sentence (Cyrus, 23 Oct 2026: "only when
   the name appears first"): the logo's own letters in the words' colour, a little taller than their capitals (0.718 of
   the type), where its thin, round strokes read as the same size (his "symbol feels a tad small in relation to font
   size", the same day, of 0.72em), the name in words beside it for reading aloud and copying (.vh) */
.cm { white-space: nowrap; }
.cm-letters { display: inline-block; height: 0.8em; width: auto; vertical-align: baseline; }
.cm .vh { user-select: text; }
.hd-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.4rem 1.1rem; font-size: 0.9rem; font-weight: 500; }
.hd-nav a { text-decoration: none; padding-block: 0.2rem; background: linear-gradient(var(--blue), var(--blue)) left bottom / 0 1px no-repeat; transition: background-size 0.35s var(--ease); }
/* pointed at, its line drawn in from the left */
.hd-nav a:hover, .hd-nav a[aria-current="page"] { background-size: 100% 1px; }
@media (max-width: 400px) { .hd-nav { gap: 0.4rem 0.75rem; font-size: 0.85rem; } }
/* five links (Beta among them until the apps are in the App Store) on the narrowest phones: two even rows, not one
   left over */
@media (max-width: 359px) { .hd-nav { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; justify-items: start; gap: 0.4rem 1.1rem; } }
@media (min-width: 768px) { .hd-nav { gap: 0.4rem 2rem; font-size: 0.95rem; } }

/* a numbered section */
.sec { padding-block: clamp(2.5rem, 6vw, 5rem); }
.sec > .label { margin-bottom: clamp(1.5rem, 4vw, 3rem); }

/* the title of a page that opens on the stage (the home page, each app's): CS/M's line or the app's name, as large as
   the page allows, in the middle */
.hero { position: relative; }
/* what moves answers taps one after another, a second tap never taken to zoom in */
:is(.hero, .rule-quote) { touch-action: manipulation; }
/* the matter that falls on the title (hero.js): over the words, never in the way of a press */
.hero-field { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; }
/* the home page's opening (hero.js, data-open): the mark made in the middle of the first screen, on a canvas over the
   page, then gone home to the top left; until then the line waits unseen, then comes up word by word from under its
   own baseline, and the rest of the first screen comes in under it, the line under the title drawn out from its
   middle */
.opening-mark { position: fixed; left: 0; top: 0; z-index: 10; pointer-events: none; }
.hero.opening h1 { visibility: hidden; }
.hero:is(.opening, .opening-line) > :not(h1) { opacity: 0; transform: translateY(0.75rem); }
.hero:is(.opening, .opening-line) > .hero-floor { opacity: 1; transform: scaleX(0); }
.hero.opened > :not(h1) { transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1); }
.hero.opened > .hero-floor { transition-duration: 1.3s; }
.hero.opened > .hero-lead { transition-delay: 0.08s; }
.hero.opened > .hero-acts { transition-delay: 0.16s; }
.hero.opened > .hero-apps { transition-delay: 0.24s; }
/* the title rises into place letter by letter as the page opens; until hero.js has drawn its letters apart it waits
   unseen, a moment at most (if the script is slow, or fails, the title is simply there) */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .hero h1:not(.split) { animation: wait 1.1s steps(1, end) both; }
  /* the home page's first screen waits unseen for its opening (hero.js), three seconds at most */
  .hero.opens:not(.opening, .opening-line, .opened) > * { animation: wait 3s steps(1, end) both; }
  /* and its line comes up word by word from under its own baseline, each word's letters a breath apart */
  .hero h1.reveal .w { display: inline-block; clip-path: inset(-0.25em -0.15em -0.18em -0.15em); }
  .hero h1.reveal .ch { animation: reveal 0.95s cubic-bezier(0.16, 1, 0.3, 1) backwards; animation-delay: calc(var(--wi, 0) * 65ms + var(--li, 0) * 10ms); }
  .hero h1.rise .ch { animation: rise 0.8s var(--ease) backwards; animation-delay: calc(var(--i) * 18ms + 60ms); }
}
@keyframes wait { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(0.32em); } }
@keyframes reveal { from { transform: translateY(1.15em); } }
.hero h1 { font-weight: 500; line-height: 0.94; letter-spacing: -0.042em; text-wrap: balance; }
/* its full stop in the square's orange, as cyrusrex.com's title has its own (the fill wraps it: data-stop) */
.stop { color: var(--square); }
.cell { border-top: 1px solid var(--hair); padding-top: 0.9rem; display: grid; align-content: start; gap: 0.9rem; }
.cell p:not(.label):not(.lead) { max-width: 40ch; }
.lead { font-size: clamp(1.1rem, 1rem + 0.45vw, 1.35rem); line-height: 1.4; max-width: 34ch; }
/* each instrument as cyrusrex.com's devices list has it (Cyrus, 22 Oct 2026: "subtle but interesting animations on
   hovers for devices ... we should build this type of compelling interactivity into the CS/M page"): its glyph in a
   tile, its name, and an arrow; pointed at, the tile's edge brightens, the glyph acts out its instrument and the arrow
   steps on in the square's orange */
.index-name { font-weight: 500; font-size: 1.1rem; }
.tile { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--hair); border-radius: 9px; background: var(--bg); transition: border-color 0.25s var(--ease); }
.go { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); transition: transform 0.3s var(--ease), color 0.3s var(--ease); }

/* the glyphs (scripts/fill.mjs writes them from cyrusrex.com's list): lines in the page's ink, a floor a shade of it, one
   part in the square's orange. Matter / Field's fall runs down piece by piece and the orange fragment strikes the floor
   as the run reaches it; Polite Disorder's hits are struck in turn while the orange one drifts off time and back */
.glyph { width: 28px; height: 28px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.glyph :is(.g-floor, .g-base) { stroke: color-mix(in srgb, currentColor 30%, transparent); }
.g-matter .g-strike { fill: var(--square); stroke: none; transform-box: fill-box; transform-origin: 50% 100%; }
.g-disorder circle { fill: currentColor; stroke: none; }
.g-disorder .g-hit { transform-box: fill-box; transform-origin: 50% 100%; }
.g-disorder .g-stray { stroke: var(--square); transform-origin: 19.7px 22.5px; }
.g-disorder .g-stray circle { fill: var(--square); }
@media (prefers-reduced-motion: no-preference) {
  :is(a:hover, a:focus-visible) .g-shard { animation: g-run 1.2s linear infinite; }
  :is(a:hover, a:focus-visible) .g-shard:nth-of-type(3) { animation-delay: 0.15s; }
  :is(a:hover, a:focus-visible) .g-shard:nth-of-type(4) { animation-delay: 0.3s; }
  :is(a:hover, a:focus-visible) .g-shard:nth-of-type(5) { animation-delay: 0.45s; }
  :is(a:hover, a:focus-visible) .g-strike { animation: g-strike 1.2s ease-out infinite; }
  :is(a:hover, a:focus-visible) .g-hit { animation: g-hit 1.2s ease-out infinite; }
  :is(a:hover, a:focus-visible) .g-hit:nth-of-type(2) { animation-delay: 0.3s; }
  :is(a:hover, a:focus-visible) .g-hit:nth-of-type(3) { animation-delay: 0.6s; }
  :is(a:hover, a:focus-visible) .g-hit:nth-of-type(4) { animation-delay: 0.9s; }
  :is(a:hover, a:focus-visible) .g-stray { animation: g-drift 2.4s ease-in-out infinite; }
}
@keyframes g-run { 0%, 40%, 100% { opacity: 0.25; } 8% { opacity: 1; } }
@keyframes g-strike { 0%, 48%, 78%, 100% { transform: none; } 55% { transform: scale(1.35, 0.72); } 65% { transform: scale(0.92, 1.1); } }
@keyframes g-hit { 0%, 30%, 100% { transform: none; } 8% { transform: scaleY(0.72); } }
@keyframes g-drift { 0%, 100% { transform: none; } 50% { transform: rotate(-10deg); } }

/* a panel (the beta's TestFlight list, the admin's Make a code), and a block reversed, ink by day and paper by night */
.panel { border: 1px solid var(--hair); padding: clamp(1.25rem, 3vw, 2.5rem); display: grid; align-content: start; }
.reverse { --bg: var(--rev-bg); --fg: var(--rev-fg); --muted: var(--rev-muted); --hair: var(--rev-hair); --panel: var(--rev-bg); background: var(--bg); color: var(--fg); border-color: var(--bg); }

/* facts in rows, a label at the left of each (stacked on a phone where a row is long) */
.spec { margin-top: 1.75rem; border-top: 1px solid var(--hair); }
.spec > div { display: grid; grid-template-columns: minmax(6.5rem, 2fr) minmax(0, 5fr); gap: 0.25rem 1rem; padding-block: 0.65rem; border-bottom: 1px solid var(--hair); }
.spec dt { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding-top: 0.2em; }
.spec dd { font-size: 0.98rem; }
.spec a { overflow-wrap: anywhere; }
.spec.wide { margin-top: 0; }
.spec.wide > div { grid-template-columns: minmax(0, 1fr); padding-block: 0.85rem; }
@media (min-width: 600px) { .spec.wide > div { grid-template-columns: minmax(7.5rem, 3fr) minmax(0, 9fr); } }
.spec.wide dd { font-size: 1.05rem; max-width: 60ch; }

/* what to do: play (the square), or read on */
.acts { margin-top: 1.75rem; display: grid; gap: 0.6rem; }
.act { display: inline-flex; align-items: center; gap: 0.7rem; font-weight: 500; font-size: 1.02rem; text-decoration: none; }
.act::before { content: ''; flex: none; width: 0.62em; height: 0.62em; border: 1.5px solid currentColor; }
.act.play::before { background: var(--square); border-color: var(--square); }
a.act:hover { text-decoration: underline; }
/* the squares, pointed at (his "compelling interactivity", 22 Oct 2026): one that plays turns into PLAY's triangle; one
   that reads on fills in and makes a quarter turn, a step, landing as it was */
.act::before { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: clip-path 0.3s var(--ease), transform 0.4s var(--ease), background-color 0.25s var(--ease); }
a.act.play:is(:hover, :focus-visible)::before { clip-path: polygon(0 0, 100% 50%, 100% 50%, 0 100%); transform: scale(1.15); }
a.act:not(.play):is(:hover, :focus-visible)::before { background: currentColor; transform: rotate(90deg); }

/* home: the company, its logo (the mark with C//M, the name said once; the story beside it says the full name) and its
   two sides, CS/M's story, the rule */
.company { display: grid; gap: 2.5rem var(--gut); }
@media (min-width: 900px) { .company { grid-template-columns: 4fr 8fr; } }
.lockup { display: grid; justify-items: start; align-content: start; gap: 1.5rem; }
.lockup img { height: clamp(96px, 9vw, 136px); width: auto; }
.lockup figcaption { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-weight: 500; }
.key { display: inline-flex; align-items: center; gap: 0.55rem; }
.dot { width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--circle); }
.sq { width: 0.7em; height: 0.7em; background: var(--square); }
/* pointed at, CSMAKAR's circle swells and Cyrusrex's square makes a quarter turn */
.dot, .sq { transition: transform 0.4s var(--ease); }
.key:is(:hover, :focus-visible) .dot { transform: scale(1.35); }
.key:is(:hover, :focus-visible) .sq { transform: rotate(90deg); }
/* a site's own mark beside its name (the footer's Elsewhere, the study's ways to each site), inline in the page's ink */
.key-mark { display: inline-flex; flex: none; }
.key-mark svg { display: block; width: auto; height: 1.15em; }
.story { display: grid; gap: 1.1rem; align-content: start; }
.story-text { display: grid; gap: 1.1rem; }
.story-text p { font-size: clamp(1.08rem, 1rem + 0.35vw, 1.3rem); line-height: 1.5; max-width: 58ch; }
.story .spec { margin-top: 0.75rem; max-width: 46rem; }
.rule-quote { margin-top: clamp(3rem, 7vw, 6rem); border-top: 1px solid var(--hair); padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.rule-quote p { position: relative; font-size: clamp(1.7rem, 1rem + 3vw, 4.25rem); font-weight: 500; line-height: 1.04; letter-spacing: -0.03em; max-width: 20ch; text-wrap: balance; }

/* an app's page, under its stage: what it is, what you can do, where it runs */
.about { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .about { grid-template-columns: 4fr 8fr; } .about > * { grid-column: 2; } }
.about-text { display: grid; gap: 1.1rem; }
.about p { font-size: clamp(1.08rem, 1rem + 0.35vw, 1.3rem); line-height: 1.5; max-width: 60ch; }
.about .origin { color: var(--muted); }
/* what you can do in four groups, before the full list (his copy audit: "Organise benefits before the specification") */
.groups { display: grid; gap: 1.25rem var(--gut); margin-bottom: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 900px) { .groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.groups li { border-top: 1px solid var(--hair); padding-top: 0.9rem; font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem); line-height: 1.45; max-width: 52ch; }
.groups b { font-weight: 600; }
.parts { counter-reset: part; display: grid; }
.parts section { counter-increment: part; display: grid; gap: 0.75rem var(--gut); padding-block: 1.4rem; border-top: 1px solid var(--hair); }
@media (min-width: 900px) { .parts section { grid-template-columns: 4fr 8fr; } }
.parts h3 { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding-top: 0.35em; }
.parts h3::before { content: counter(part, decimal-leading-zero) ' / '; color: var(--blue); }
.parts ul { display: grid; }
@media (min-width: 1200px) { .parts ul { display: block; columns: 2; column-gap: var(--gut); } }
.parts li { break-inside: avoid; padding: 0.55rem 0 0.55rem 1.4rem; border-bottom: 1px solid var(--hair); position: relative; line-height: 1.45; }
.parts li::before { content: ''; position: absolute; left: 0; top: 0.95em; width: 0.5em; height: 0.5em; border: 1.5px solid currentColor; }
.parts p { font-size: 1.05rem; line-height: 1.5; max-width: 60ch; }
.outro { margin-top: 2rem; }
.outro p { font-size: clamp(1.3rem, 1rem + 1.4vw, 2.2rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; max-width: 28ch; }

/* an app's page, where GET THE APP leads (#get): what the free browser version has beside what the app adds, each a
   column of ruled rows with a square, the browser's open and the app's filled */
.compare { display: grid; gap: 2rem var(--gut); margin-bottom: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 900px) { .compare { grid-template-columns: 1fr 1fr; } }
.compare-list li { padding: 0.55rem 0 0.55rem 1.4rem; border-bottom: 1px solid var(--hair); position: relative; line-height: 1.45; }
.compare-list li::before { content: ''; position: absolute; left: 0; top: 0.95em; width: 0.5em; height: 0.5em; border: 1.5px solid currentColor; }
.compare .app li::before { background: currentColor; }

/* Support, Privacy, Terms, Contact: a title, then numbered parts in ruled rows */
.doc { padding-block: clamp(2.5rem, 7vw, 6rem) clamp(3rem, 7vw, 5.5rem); }
.doc-top { max-width: 62rem; margin-bottom: clamp(2.2rem, 6vw, 4rem); }
.doc-top h1 { margin-top: 1.25rem; font-size: clamp(2.6rem, 1.4rem + 5.6vw, 6.5rem); font-weight: 500; line-height: 0.92; letter-spacing: -0.042em; }
.doc-top .lead { margin-top: clamp(1.1rem, 3vw, 1.6rem); max-width: 46ch; color: var(--muted); }
.list { border-top: 1px solid var(--fg); position: relative; }
.list::before { content: ''; position: absolute; left: 0; top: -2px; width: 2.25rem; height: 3px; background: var(--blue); }
.list > li { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); grid-template-areas: 'n a' 'n t'; gap: 0.35rem 0.8rem; padding-block: 1rem; border-bottom: 1px solid var(--hair); }
@media (min-width: 860px) { .list > li { grid-template-columns: 4.5rem minmax(10rem, 1fr) minmax(0, 3fr); grid-template-areas: 'n a t'; gap: 1rem; align-items: baseline; } }
.list .n { grid-area: n; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; color: var(--muted); padding-top: 0.3em; transition: color 0.25s var(--ease); }
.list > li:hover .n { color: var(--blue); }
/* a section reached by its address (/terms#plug-ins, as the plug-ins' installer links it): its number in the blue, as
   when pointed at, and a little room above it */
.list > li:target .n { color: var(--blue); }
.list > li[id] { scroll-margin-top: 1.5rem; }
.list .a { grid-area: a; font-size: 1.15rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; }
.list .t { grid-area: t; max-width: 62ch; color: var(--fg); }
.list .t a { overflow-wrap: anywhere; }
/* an account on Contact: its network's logo, then its name, on the row's line */
.with-mark { display: inline-flex; align-items: center; gap: 1rem; vertical-align: middle; }
/* a control called by its name on screen, set off so it reads as a name (Cyrus's copy pass, 23 Oct 2026: "control names
   ... need to be set off so they don't read as sentence fragments"); and a line that must stand out from those round it,
   as Terms' disclaimer must (conspicuous, as Montana asks of one) */
b.ui, .list .t strong { font-weight: 600; }
.list .t p + p { margin-top: 0.6rem; }

/* the 404 */
.lost { padding-block: clamp(4rem, 14vw, 10rem); display: grid; gap: 1.5rem; justify-items: start; }
.lost h1 { font-size: clamp(2.4rem, 1.4rem + 5vw, 6rem); font-weight: 500; line-height: 0.95; letter-spacing: -0.04em; }

/* ---- the launch (Cyrus, 23 Oct 2026: "think as if you were a majjor branding agency doing a product launch for apple or
   tesla for incredible new major announcemnents not a corporate page design. be unique be exciting but also be
   profressional and minimal"): the home page as a launch. Its stages are CS/M's ink by day and by night, the
   instruments shown as they really look (docs/shots.json, scripts/shots/make.mjs), each name as large as the page
   allows, a line of its own words, its numbers from its own listing, and the ways in. Nothing sounds; what moves is
   the opening, the mark made and gone home, the pictures settling into place as they are come to, the numbers counting up */
.stage {
  --bg: var(--ink); --fg: var(--paper);
  --muted: color-mix(in srgb, var(--paper) 62%, var(--ink));
  --hair: color-mix(in srgb, var(--paper) 16%, var(--ink));
  --panel: color-mix(in srgb, var(--paper) 5%, var(--ink));
  --blue: color-mix(in srgb, var(--circle) 55%, var(--paper));
  background: var(--bg); color: var(--fg);
}
.hd-band .hd { border-bottom-color: transparent; }

/* the first screen: CS/M's line in the middle, the line it lands on, and the way to each instrument; a whole screen up
   to 44rem tall, so a tall screen (an iPad upright, a large display) shows Matter / Field coming under it rather than
   an empty band (Cyrus, 23 Oct 2026: "too muhc empty space? reduce a tad bit or do something different here") */
body.is-launch .hero { min-height: min(calc(100svh - 72px), 44rem); display: grid; align-content: center; justify-items: center; text-align: center; padding-block: clamp(3rem, 9vw, 8rem) clamp(3rem, 7vw, 5rem); }
body.is-launch .hero h1 { margin: 0 auto; font-size: clamp(2.9rem, 0.6rem + 9.2vw, 11.5rem); max-width: 9.4em; }
.hero-floor { width: min(100%, 72rem); height: 1px; margin-top: clamp(2rem, 5vw, 4rem); background: var(--hair); }
.hero-lead { margin-top: clamp(1.25rem, 3vw, 2rem); max-width: 44ch; font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.5rem); line-height: 1.4; color: var(--muted); text-wrap: balance; }
.hero-apps { margin-top: clamp(2rem, 4vw, 3rem); display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem clamp(1.5rem, 4vw, 3.5rem); }
.hero-apps a { display: inline-flex; align-items: center; gap: 0.8rem; padding: 0.35rem 0; text-decoration: none; font-weight: 500; font-size: 1.05rem; }
.hero-apps .tile { background: transparent; }
.hero-apps a:is(:hover, :focus-visible) .tile { border-color: var(--fg); }
.hero-apps a:is(:hover, :focus-visible) .go { color: var(--square); transform: translateY(3px); }

/* an app's own page opens the same way, not a whole screen: its icon, its name (matter falling on Matter / Field's,
   Polite Disorder's last word restless), the line it lands on, what it is, the ways in, and its picture under them */
body.is-launch .app-hero { min-height: 0; align-content: start; row-gap: clamp(0.75rem, 1.6vw, 1.25rem); padding-block: clamp(3.5rem, 9vw, 7rem) 0; }
body.is-launch .app-hero h1 { font-size: clamp(3.1rem, 0.6rem + 9.6vw, 11.5rem); font-weight: 600; letter-spacing: -0.048em; }
.app-hero .hero-floor { margin-top: clamp(0.75rem, 2vw, 1.5rem); }

/* an instrument's stage: its icon, its name, what it is, the ways in; the first, straight under the first screen,
   closer to it (his "reduce a tad bit"): 165 to 192px from the ways to each instrument to Matter / Field's icon on
   every screen, where it was 223 to 476 */
.launch { padding-block: clamp(5rem, 12vw, 10rem) clamp(4.5rem, 10vw, 9rem); overflow: hidden; }
main > .stage:first-child + .launch { padding-top: clamp(3.5rem, 8vw, 7rem); }
.launch-head { display: grid; justify-items: center; text-align: center; gap: clamp(0.75rem, 1.6vw, 1.25rem); }
.launch-icon { width: clamp(76px, 8vw, 112px); height: auto; border-radius: 22.5%; margin-bottom: clamp(0.5rem, 1.5vw, 1rem); }
.launch h2 { font-size: clamp(3rem, 0.8rem + 8.4vw, 10rem); font-weight: 600; line-height: 1.02; letter-spacing: -0.048em; text-wrap: balance; }
.launch-sub { max-width: 30ch; font-size: clamp(1.25rem, 0.9rem + 1.5vw, 2.4rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--muted); text-wrap: balance; }
/* what it is in plain words under its name, and what the browser version leaves to the app (his copy audit, 23 Oct
   2026: "Use one expressive line to establish the idea, followed by a literal explanation of the action and result") */
.launch-say { max-width: 46ch; font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.3rem); line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.launch-note { max-width: 50ch; font-size: 0.92rem; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.launch-acts { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem clamp(1.25rem, 3vw, 2.25rem); margin-top: clamp(0.75rem, 2vw, 1.5rem); }
/* the way in: a solid key with the square that plays, and a quieter one with its arrow */
.cta { display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.95em 1.4em; background: var(--fg); color: var(--bg); text-decoration: none; font-weight: 500; font-size: 1rem; transition: background-color 0.25s var(--ease), color 0.25s var(--ease); }
.cta::before { content: ''; flex: none; width: 0.62em; height: 0.62em; background: var(--square); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: clip-path 0.3s var(--ease), transform 0.4s var(--ease); }
.cta:is(:hover, :focus-visible)::before { clip-path: polygon(0 0, 100% 50%, 100% 50%, 0 100%); transform: scale(1.15); }
.cta-quiet { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 500; font-size: 1rem; text-decoration: none; }
.cta-quiet::after { content: '→'; transition: transform 0.3s var(--ease); }
.cta-quiet:is(:hover, :focus-visible)::after { transform: translateX(4px); }
.cta-quiet:hover { text-decoration: underline; }

/* the pictures: the visual mode the width of the screen, fading into the stage at its edges; a window framed as one */
.shot { margin-top: clamp(3rem, 7vw, 6rem); }
.shot img { width: 100%; height: auto; }
.shot.wide { margin-inline: 0; }
/* its black falls away into the stage's ink (lighten: only what is brighter than the stage shows), its edges fading */
.shot.wide img { mix-blend-mode: lighten; -webkit-mask-image: radial-gradient(ellipse 62% 72% at 50% 50%, #000 58%, transparent 100%); mask-image: radial-gradient(ellipse 62% 72% at 50% 50%, #000 58%, transparent 100%); }
.shot.framed img, .shot.window img { max-width: 1200px; margin-inline: auto; border-radius: clamp(8px, 1.2vw, 16px); border: 1px solid var(--hair); background: #000; }
.shot.framed img { box-shadow: 0 30px 80px -40px rgba(11, 11, 12, 0.55); }
@media (prefers-color-scheme: dark) { .shot.framed img { box-shadow: none; } }
/* the pictures settle into place as they are come to (where the browser follows the page's scrolling) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .shot img, .feature-shot img { animation: shot-in linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
  }
}
@keyframes shot-in { from { opacity: 0.25; transform: scale(0.94); } to { opacity: 1; transform: none; } }
/* a picture that leads to its instrument's page (Cyrus, 24 Oct 2026: "you should be able to click into the screen shots
   of the devices to see more of them instead of just the button for each on the main page"): the whole picture a link,
   with a round key at its corner, frosted over the picture, its arrow saying a tap goes on; a pointer coming to the
   picture opens the key to say where, and lifts the picture's light a little */
.shot-link { position: relative; display: block; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.shot.framed .shot-link, .shot.window .shot-link { max-width: 1200px; margin-inline: auto; border-radius: clamp(8px, 1.2vw, 16px); }
.phone .shot-link { border-radius: calc(var(--w) * 0.132); }
.shot-link img { transition: filter 0.4s var(--ease); }
.shot-go {
  --d: clamp(2.25rem, 1.9rem + 0.8vw, 2.75rem);
  position: absolute; right: clamp(0.65rem, 1.8vw, 1.5rem); bottom: clamp(0.65rem, 1.8vw, 1.5rem);
  display: flex; align-items: center; height: var(--d); border-radius: calc(var(--d) / 2);
  background: color-mix(in srgb, var(--ink) 52%, transparent); color: var(--paper);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--paper) 26%, transparent);
  font-size: 0.92rem; font-weight: 500; line-height: 1; white-space: nowrap;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.shot-go-name { max-width: 0; overflow: hidden; transition: max-width 0.5s var(--ease); }
.shot-go-name > span { display: block; padding-left: 1.15em; }
.shot-go svg { flex: none; width: var(--d); height: var(--d); padding: calc(var(--d) * 0.31); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s var(--ease); }
/* the wide picture fades at its edges: its key sits in from them, on the picture; on a phone's screen, smaller, clear of
   its rounded corner */
.shot.wide .shot-go { right: 19%; bottom: 11%; }
.phone .shot-go { --d: clamp(1.5rem, 0.9rem + 1.6vw, 2.35rem); right: 9%; bottom: 4.5%; font-size: 0.85rem; }
@media (hover: hover) {
  .shot-link:hover .shot-go { background: var(--paper); color: var(--ink); }
  .shot-link:hover .shot-go-name { max-width: 20em; }
  .shot-link:hover .shot-go svg { transform: translateX(2px); }
  .shot-link:hover img { filter: brightness(1.07); }
}
.shot-link:focus-visible .shot-go { background: var(--paper); color: var(--ink); }
.shot-link:focus-visible .shot-go-name { max-width: 20em; }

/* the other instrument, at the end of an instrument's page (Cyrus, 24 Oct 2026: "at the end of one device have a button
   that leads to the other device so they can explore the next"): its launch in short, under a label saying it is next,
   its name a step smaller than on its own stage */
.next { padding-top: clamp(4rem, 9vw, 7.5rem); border-top: 1px solid var(--hair); }
.next-label { justify-content: center; }
.next h2 { font-size: clamp(2.6rem, 0.8rem + 6.4vw, 7.5rem); }

/* its line, and its numbers, counted up as they are come to (site.js) */
.launch-body { margin-top: clamp(3.5rem, 8vw, 7rem); display: grid; gap: clamp(3rem, 6vw, 5rem); }
.launch-line { max-width: 18ch; margin-inline: auto; text-align: center; font-size: clamp(2.1rem, 0.9rem + 4.4vw, 5.75rem); font-weight: 500; line-height: 1.02; letter-spacing: -0.04em; text-wrap: balance; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem var(--gut); }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 0.5rem; border-top: 1px solid var(--hair); padding-top: 1rem; }
.stats dd { font-size: clamp(2.6rem, 1.4rem + 4vw, 5.75rem); font-weight: 500; line-height: 1; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stats dt { font-size: 0.98rem; color: var(--muted); }

/* an app's parts, each as the app shows it with that part open (scripts/shots/make.mjs), its name and its one line
   from the app's own help beside it; side by side from a tablet up, the sides taking turns, one above the other on a
   phone (Cyrus, 23 Oct 2026: "On product pages show more pages of the app and features visually to sell the key
   features better") */
.features { display: grid; gap: clamp(4.5rem, 10vw, 9rem); margin-top: clamp(5rem, 12vw, 10rem); }
.feature { display: grid; align-items: center; gap: clamp(1.25rem, 3vw, 3rem); }
@media (min-width: 900px) {
  .feature { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .feature:nth-child(even) { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .feature:nth-child(even) .feature-words { order: 2; }
}
.feature-words { display: grid; align-content: start; gap: clamp(0.75rem, 1.4vw, 1.1rem); }
.feature-name { justify-content: flex-start; align-items: center; gap: 0.75rem; }
.feature-name::before { content: ''; flex: none; width: 1.6rem; height: 2px; background: var(--blue); }
.feature h2 { font-size: clamp(1.75rem, 1rem + 2.4vw, 3.1rem); font-weight: 500; line-height: 1.08; letter-spacing: -0.035em; text-wrap: balance; }
.feature-shot img { width: 100%; height: auto; border-radius: clamp(8px, 1vw, 14px); border: 1px solid var(--hair); background: #000; }

/* where they run: the phones side by side, the plug-ins' formats */
.formats { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: clamp(0.5rem, 1.5vw, 1rem); }
/* each system with what runs on it, the app and its plug-ins (his copy audit: "Show the format mapping") */
.formats-by { display: grid; gap: 0.75rem; justify-items: center; margin-top: clamp(0.5rem, 1.5vw, 1rem); }
.formats-by > div { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.6rem 0.9rem; }
.formats-by dt { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.formats-by .formats { margin-top: 0; }
.formats li { padding: 0.55em 0.95em; border: 1px solid var(--hair); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.14em; }
/* each an iPhone (its picture the screen as the app fills it: scripts/shots/make.mjs), its bezel 3% of its width and
   its screen's corners rounded as an iPhone's are, 55 points of its 393, at every size */
.phones { container-type: inline-size; display: flex; justify-content: center; align-items: flex-start; gap: clamp(1rem, 4vw, 3.5rem); margin-top: clamp(3rem, 7vw, 6rem); }
.phone { --w: min(42cqw, 320px); width: var(--w); padding: calc(var(--w) * 0.03); border: 1px solid var(--hair); border-radius: calc(var(--w) * 0.163); background: #000; }
.phone img { border-radius: calc(var(--w) * 0.132); }
.phone:nth-child(2) { margin-top: clamp(2rem, 7vw, 6rem); }

/* what they cost */
.free { text-align: center; display: grid; justify-items: center; gap: clamp(1.25rem, 3vw, 2.75rem); }
.free h2 { font-size: clamp(4.5rem, 1rem + 14vw, 15rem); line-height: 1.05; letter-spacing: -0.06em; }

/* the foot */
.ft { border-top: 1px solid var(--fg); padding-block: clamp(2rem, 5vw, 3.5rem) 1.5rem; margin-top: clamp(1rem, 3vw, 2rem); position: relative; }
.ft::before { content: ''; position: absolute; left: var(--gut); top: -2px; width: 2.25rem; height: 3px; background: var(--blue); }
.ft-grid { display: grid; gap: 2rem var(--gut); }
@media (min-width: 600px) { .ft-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .ft-grid { grid-template-columns: repeat(4, 1fr); } }
.ft-grid > div { display: grid; align-content: start; gap: 0.6rem; font-size: 0.95rem; }
.ft-list { display: grid; gap: 0.35rem; }
.ft-list a { text-decoration: none; }
.ft-list a:hover { text-decoration: underline; }
/* CS/M's accounts, each by its network's own logo (his "I prefer a x logo and Instagram logo for the links on the page",
   28 Oct 2026; docs/social.json): as drawn, in the page's ink, 32 px (Meta asks at least 29 for Instagram's glyph), with
   room round each of at least half its size; pointed at, it fades, never recoloured, turned or moved */
.social { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 0.5rem; }
.social a { display: inline-flex; transition: opacity 0.25s var(--ease); }
.social a:hover { opacity: 0.6; }
.social-mark { display: inline-flex; flex: none; }
.social-mark svg { display: block; width: 2rem; height: 2rem; }
@media (prefers-reduced-motion: no-preference) { .gs:hover { animation: gs 1.6s var(--ease); } }
@keyframes gs { 0%, 100% { font-weight: 400; } 30% { font-weight: 200; } 70% { font-weight: 700; } }
.ft-end { margin-top: clamp(2rem, 5vw, 3.5rem); border-top: 1px solid var(--hair); padding-top: 0.9rem; }