/* Write It Down design tokens v2 (design system 2026-10-22 with the captain's background option A: near-white
   page, no beige desk, depth from the white sheet's shadow).
   Source of truth for colour, type, space, shape, depth and motion on every shipped page; the Mac app mirrors the
   same names. Values match the design-system tokens.css. The page colour (background A) and its --stage-a/--stage-b aliases
   sit on :root so any page that links this sheet can map the canvas, and every shipped page (landing, download, room,
   the help/legal/answer pages and mac.html) puts .home on <body> or its main surface to take the full role set. The
   header brand plate (--brand-plate) also sits on :root because every page that carries the lockup must resolve one
   value. Faces (D-057): Newsreader is what the writer writes and what the site sets headings in, Zhuque Fangsong is
   the same roles in Chinese, Reenie Beanie is the landing's hand accent alone, and everything the tool says - labels,
   nav, buttons, clock, count, captions, receipts, quiet links - is the system sans. No monospace face carries text.
   Every face is served from this site: fonts.css declares them (fonts/build-fonts.py generates it), fonts-cjk.css
   holds the Chinese slices and is linked by index.html alone. Dark keeps the same names. */
:root{--page:#f7f7f5;--stage-a:var(--page);--stage-b:var(--page);--brand-plate:#ffffff}
.home{
  /* colour roles: ink-tinted neutrals; red is the pen and the stakes only */
  --sheet:#ffffff;
  /* The writing sheet is the Wheat paper (D-069), the one object the writer writes on; the page, the
     cards and the controls keep the white identity. Quiet, history and danger are measured roles:
     every word on the paper clears 7:1 against the paper's own tone, the history ladder sits at
     9:1 then 7:1, and the pen red is deepened until the numeral and the exit hint clear it too. */
  --paper-tone:#e9e2ce;
  --paper-quiet:#464746;
  --paper-history-1:.847;
  --paper-history-2:.769;
  --paper-danger:#63140b;
  /* The warn wash of the sheet: the root landing's `color-mix(in oklab, paper 88%, #C8392F)` and its
     76% cut, resolved. A pale tint meant for a white sheet would only grey this paper (D-069). */
  --paper-wash:#e8cfbb;
  --paper-wash-deep:#e6bca7;
  --ink:#1c1917;
  --mute:#6b655c;
  --chrome:#5c564d;
  --hair:rgba(28,25,23,.10);
  --hair-2:rgba(28,25,23,.16);
  --red:#b02a1e;
  --red-soft:#f6e2dc;--red-deep:#ebc8bd;
  --tag-bg:#f2f2f0;
  --on-ink:#ffffff;
  /* type: serif = written text and display, cjk = the same roles in Chinese, hand = the landing's pen
     accent (D-057), sans = the tool. --cjk is one family name so the guard can read it and so the
     Chinese face is named in exactly one place. */
  --cjk:'Zhuque Fangsong';
  --serif:'Newsreader',var(--cjk),Georgia,'Times New Roman',serif;
  --hand:'Reenie Beanie','Segoe Print',cursive;
  --sans:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',system-ui,sans-serif;
  /* writing size and placement for the web room: 28pt, active line at 35% of the sheet (the Mac's D-025
     anchor, brought to the web by D-043), one fixed pitch for every script (D-026), the warning numeral
     sized like the Mac's min(18vh, 170pt) */
  --t-write:28px;--lh-write:calc(var(--t-write) * 1.6);--write-anchor:35%;--t-numeral:min(18vh,170px);--t-kept:clamp(32px,5vw,48px);--t-kept-compact:34px;
  --t-display:clamp(34px,4.3vw,62px);
  --t-h2:clamp(34px,4.6vw,58px);--t-h3:25px;--t-body:17px;--t-ui:15px;--t-small:13px;
  /* space: 4-pt scale */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px;
  --gut:32px;--measure:720px;--maxw:1120px;--nav-h:64px;--section:clamp(72px,10vw,128px);
  /* shape */
  --r-ctl:8px;--r-sheet:16px;--r-card:22px;--r-stage:28px;--r-pill:999px;
  /* depth: hairline ring + 3 soft layers tinted with ink */
  --lift:0 0 0 1px var(--hair),0 1px 1px rgba(28,25,23,.04),0 2px 4px rgba(28,25,23,.04),0 8px 16px -4px rgba(28,25,23,.06),0 24px 48px -16px rgba(28,25,23,.10);
  --sheet-shadow:0 0 0 1px rgba(28,25,23,.07),0 2px 4px rgba(28,25,23,.05),0 12px 24px -8px rgba(28,25,23,.12),0 36px 72px -24px rgba(28,25,23,.20);
  --press:inset 0 1px 0 rgba(255,255,255,.14),0 1px 1px rgba(0,0,0,.2),0 8px 16px -6px rgba(28,25,23,.35);
  /* motion: feedback fast, entrances slow, expo ease-out */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --d-feedback:.16s;--d-enter:.6s;--d-write:.9s;
}
:root:not([data-theme="light"]){--page:#15140f;--brand-plate:#26231c}
:root:not([data-theme="light"]) .home{
  --sheet:#26231c;
  --paper-tone:#342e24;
  --paper-quiet:#c2bfb7;
  --paper-history-1:.902;
  --paper-history-2:.772;
  --paper-danger:#ffc2b4;
  --paper-wash:#453226;
  --paper-wash-deep:#573428;
  --ink:#ece7d9;
  --mute:#a39d8e;
  --chrome:#a39d8e;
  --hair:rgba(236,231,217,.10);
  --hair-2:rgba(236,231,217,.18);
  --red:#e4604a;
  --red-soft:#3a1c15;--red-deep:#4a2318;
  --tag-bg:#2e2a22;
  --on-ink:#15140f;
  --lift:0 0 0 1px var(--hair),0 1px 1px rgba(0,0,0,.2),0 24px 48px -16px rgba(0,0,0,.5);
  --sheet-shadow:0 0 0 1px var(--hair),0 1px 1px rgba(0,0,0,.25),0 28px 56px -20px rgba(0,0,0,.6);
  --press:0 1px 1px rgba(0,0,0,.3),0 8px 16px -6px rgba(0,0,0,.5);
}
@media (max-width:820px){.home{--gut:20px;--nav-h:56px}}
/* A short viewport gets a smaller warning numeral, so the group still fits beside the writing line on
   a shorter sheet instead of being pushed onto it (D-068, Q-02). */
@media (max-height:700px){.home .paper{--t-numeral:min(15vh,140px)}}
@media (max-width:767px){.home{--t-write:21px}}