/* ScoreStarling's brand, shared by every page outside an AI host: the website's pages and the app's own (sign-in,
   help, workspace, Starling, account). The faces, colours, type, spacing and corner steps, the page's measure and the
   name as drawn are defined here once; styles.css (the website's components, header and footer) and the app's
   stylesheets use them and never restate them. The ChatGPT/Claude panel keeps its host's look and never loads this
   file. docs/design.md is the contract; tests/workspace/check_brand.py keeps every stylesheet to these tokens. */

/* Faces, self-hosted (SIL Open Font License, licenses/). Inter is two faces of one family with ranges that do not
   overlap: the Latin subset every page preloads, and the whole file for any other character it draws. The printed
   face is Mona Sans Condensed's Latin capitals, renamed (licenses/ScoreStarling-Display.txt); the homepage alone
   holds its headline until the face is ready (home.css), every other title shows the fallback first. */
@font-face { font-family: 'ScoreStarling Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/inter-variable.woff2) format('woff2'); unicode-range: U+0100-0130, U+0132-0148, U+014A-0151, U+0154-01C3, U+01C5-0254, U+0256-027B, U+027E-0284, U+0286-0290, U+0292-02A4, U+02A6-02BA, U+02BD-02C5, U+02C7-02D9, U+02DB, U+02DD-0303, U+0306-0307, U+0309-030A, U+030C, U+030F, U+0313, U+0315, U+031B, U+0323, U+0326-0328, U+032C, U+0337-0338, U+0342-0343, U+0346-036F, U+0374-0376, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03D7, U+03DC-03DD, U+03F0-03F6, U+03F9-03FA, U+03FC-0479, U+0480-049D, U+04A0-04FF, U+052F, U+0E3F, U+1D00, U+1D0D, U+1D1B, U+1D43, U+1D47-1D49, U+1D4D, U+1D4F-1D50, U+1D52, U+1D56-1D58, U+1D5B, U+1D62-1D65, U+1D9C, U+1DA0, U+1DBB, U+1DBF-1DF5, U+1DFC-1E9B, U+1E9D-1F15, U+1F18-1F1D, U+1F20-1F45, U+1F48-1F4D, U+1F50-1F57, U+1F59, U+1F5B, U+1F5D, U+1F5F-1F7D, U+1F80-1FB4, U+1FB6-1FC4, U+1FC6-1FD3, U+1FD6-1FDB, U+1FDD-1FEF, U+1FF2-1FF4, U+1FF6-1FFE, U+2070-2071, U+2074-208E, U+2090-209C, U+20A0-20AB, U+20AD-20AF, U+20B1-20B5, U+20B8-20BA, U+20BC-20C0, U+20DB-20DE, U+20E8, U+20F0, U+2100-2101, U+2103, U+2105-2106, U+2109, U+2113, U+2116-2117, U+211E-2121, U+2126, U+212A-212B, U+212E, U+2132, U+213B, U+214D, U+2150-217F, U+2183-2186, U+2189, U+21A9-21AA, U+21B0-21B1, U+21B3-21B5, U+21BA-21BB, U+21D0, U+21D2, U+21D4, U+21DE-21DF, U+21E4-21E5, U+21EA, U+2202, U+2205-2206, U+220F, U+2211, U+221A, U+221E, U+222B, U+2236, U+2248, U+2260, U+2264-2265, U+2295-2298, U+2303-2305, U+2326-2327, U+232B, U+2380, U+2387, U+238B, U+23CE-23CF, U+2423, U+2460-2468, U+24B6-24CF, U+24EA, U+25A0-25A2, U+25AA, U+25B2-25B3, U+25B6-25B7, U+25BA-25BD, U+25C0-25C1, U+25C4-25C7, U+25CA-25CB, U+25E6, U+25EF, U+2600, U+2605-2606, U+263C, U+2661, U+2665, U+266A-266B, U+26A0, U+2713, U+2717, U+2756, U+2764, U+2780-2788, U+27EF, U+27F5-27FA, U+2913, U+2A38, U+2B06, U+2B12-2B13, U+2B1C, U+2B24, U+2C7C, U+2C7F, U+2DFF, U+2E18, U+A69F, U+A7FF, U+A92E, U+E000, U+E002-E05E, U+E06A-E0BD, U+E0C8-E0CC, U+E0DC-E0E6, U+E0F3-E0F5, U+E106, U+E109-E10A, U+E10C-E10F, U+E111-E113, U+E117-E118, U+E121-E122, U+E124, U+E12A-E15E, U+E163, U+E1C3, U+E1D2-E1DF, U+E1E1-E2DC, U+EE01-EE07, U+EE09-EE0A, U+EE0C-EE12, U+EE14, U+EE17, U+EE1D-EE45, U+EE47-EE84, U+EE87-EED6, U+EED8-EEE1, U+F6C3, U+1F12F-1F149, U+1F16A-1F16B, U+1F850, U+1F852; }
@font-face { font-family: 'ScoreStarling Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/inter-latin-v4.woff2) format('woff2'); unicode-range: U+0000, U+0020-007E, U+00A0-00AC, U+00AE-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+2000-200B, U+2010-2027, U+202F-2055, U+2057, U+205F, U+20AC, U+2122, U+2190-2199, U+21E7, U+2212, U+2318, U+2325, U+25CF, U+FEFF; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400 500; font-display: optional; src: url(/assets/fonts/geist-mono-v6.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'ScoreStarling Display'; font-style: normal; font-weight: 700 900; font-display: swap; src: url(/assets/fonts/scorestarling-display-v1.woff2) format('woff2'); }

:root {
  /* The page's paper. The app's editor names --paper, --ink and --mono for the score itself (ui.css), so the app's
     frame (shell.css) reads --page-paper and --brand-mono, which nothing else restates. */
  --page-paper: #ffffff;
  --paper: var(--page-paper);
  --paper-deep: #f1f1f0;
  --sheet: #f6f6f5;
  --white: #ffffff;
  --ink: #0f0e12;
  --ink-soft: #2a292e;
  --muted: #67666b;
  --soft: #97969a;
  --line: #d8d8d5;
  --line-strong: #bfbfbc;
  --accent: #e8501a;
  --accent-text: #b83b12;
  --accent-tint: rgba(232, 80, 26, .08);
  --sage: #4f7457;
  --night: #0f0e12;
  --night-raise: #1b1a1f;
  --night-line: rgba(240, 236, 226, .12);
  --on-night: #f0f0ef;
  --on-night-muted: #9a999e;
  --accent-night: #ff7a45;
  --serif: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --display: 'ScoreStarling Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sans: 'ScoreStarling Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --brand-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --mono: var(--brand-mono);
  /* The printed face for page and section titles: Latin capitals only (Chinese titles use the sans below). */
  --poster-face: 'ScoreStarling Display', 'Arial Narrow', 'ScoreStarling Inter', sans-serif;
  --poster: var(--poster-face);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --shadow-card: none;
  --gutter: clamp(20px, 4vw, 48px);
  /* One measure for every page's header, sections and footer: 1120px, growing with the window to 1.22 times on
     large screens (the homepage's poster grows with it, so its edges meet the header's). Below. */
  --page-scale: 1;
  --page-max: calc(1120px * var(--page-scale));
  /* Spacing and line-height scale. Margins and gaps use these steps; paddings stay on the same 4px grid
     (tests/workspace/check_spacing.py keeps both). Chinese editions raise the line-heights near the end. */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px; --space-11: 96px;
  --lh-heading: 1.2; --lh-snug: 1.35; --lh-ui: 1.5; --lh-body: 1.6;
  /* Type (owner, 2026-10-11): one family, Inter. Headings take a display step, ledes --lede, and everything else a
     size on the scale 11, 12, 13, 14, 15, 16, 17, 18, 20, 22 and 24px (big figures 28, 32, 36, 48, 56 or 64px), at
     weight 350 (display), 400 (text), 500 (titles, labels, buttons) or 600 (strong). Corners: 6px for small marks and
     the paper of a score, 8px for buttons, fields and rows, 12px for menus, icon tiles and panels inside a card, 16px for
     cards; chips, tags and switches are round. tests/workspace/check_type_scale.py keeps every stylesheet on both. */
  --display-1: clamp(44px, 6.6vw, 94px); --display-2: clamp(36px, 5vw, 72px); --display-3: clamp(28px, 3vw, 40px);
  --display-4: clamp(22px, 2.2vw, 30px); --lede: clamp(17px, 1.4vw, 20px);
  --radius-xs: 6px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px;
}
@media (min-width: 961px) {
  /* Bounded by the width and by the first screen's height, as the homepage's poster is (docs/design.md, Measure). */
  @supports (zoom: calc(100vw / 1120px)) {
    :root { --page-scale: clamp(1, min((100vw - 2 * var(--gutter)) / 1120px, (100svh - 88px) / 780px), 1.22); }
  }
}
/* The measure as a column, and words only a screen reader reads. */
.wrap { width: min(var(--page-max), 100% - var(--gutter) * 2); margin-inline: auto; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

:root:lang(zh-Hans) {
  --serif: 'Newsreader', 'Songti SC', 'Source Han Serif SC', 'Noto Serif CJK SC', 'Noto Serif SC', 'Microsoft YaHei', sans-serif;
  --display: 'ScoreStarling Inter', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Source Han Sans SC', 'Noto Sans CJK SC', 'Noto Sans SC', sans-serif;
  --sans: 'ScoreStarling Inter', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Source Han Sans SC', 'Noto Sans CJK SC', 'Noto Sans SC', ui-sans-serif, system-ui, sans-serif;
}
:root:lang(zh-Hant) {
  --serif: 'Newsreader', 'Songti TC', 'Source Han Serif TC', 'Noto Serif CJK TC', 'Noto Serif TC', 'Microsoft JhengHei', sans-serif;
  --display: 'ScoreStarling Inter', 'PingFang TC', 'Hiragino Sans CNS', 'Microsoft JhengHei', 'Source Han Sans TC', 'Noto Sans CJK TC', 'Noto Sans TC', sans-serif;
  --sans: 'ScoreStarling Inter', 'PingFang TC', 'Hiragino Sans CNS', 'Microsoft JhengHei', 'Source Han Sans TC', 'Noto Sans CJK TC', 'Noto Sans TC', ui-sans-serif, system-ui, sans-serif;
}
:root:lang(zh) { font-synthesis-style: none; --lh-heading: 1.3; --lh-snug: 1.45; --lh-ui: 1.6; --lh-body: 1.75;
  --display-1: clamp(38px, 5.8vw, 84px); --display-2: clamp(32px, 4.2vw, 56px); --display-3: clamp(26px, 2.6vw, 32px);
  --display-4: clamp(22px, 2.1vw, 26px);
  --poster: var(--sans); }

/* Dark theme: theme.js sets data-theme from the visitor's choice before the first paint; without it pages stay light. */
:root[data-theme=dark] {
  color-scheme: dark;
  --page-paper: #121311;
  --paper-deep: #0d0e0c;
  --sheet: #171816;
  --white: #1e1f1c;
  --ink: #ecebe6;
  --ink-soft: #d0cec7;
  --muted: #a3a199;
  --soft: #87857e;
  --line: #2b2c28;
  --line-strong: #3d3e39;
  --accent: #ff7a45;
  --accent-text: #ff7a45;
  --accent-tint: rgba(255, 122, 69, .13);
  --sage: #8db795;
  --night: #0a0b09;
  --night-raise: #191b18;
  --shadow-card: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 0 0 1px rgba(0, 0, 0, .2), 0 30px 60px -36px rgba(0, 0, 0, .85);
}

/* The name as drawn, 7.2751 times as wide as it is tall, beside the bird: the website's header and footer and the
   app's sidebar. Its text stays for translation tools, and shows where forced colours leave no mask to paint. */
.brand { display: inline-flex; align-items: center; gap: var(--space-3); flex: none; min-height: 44px; color: var(--ink); text-decoration: none; }
.brand img { width: 26px; height: 26px; margin-top: -3px; }
.brand span { --mark: 17px; display: block; width: calc(var(--mark) * 7.2751); height: var(--mark); font-size: 0; background: currentColor;
  -webkit-mask: url(/assets/wordmark.svg) center / contain no-repeat; mask: url(/assets/wordmark.svg) center / contain no-repeat; }
@media (forced-colors: active) {
  .brand span { width: auto; height: auto; background: none; -webkit-mask: none; mask: none; font: 600 20px/1 var(--sans); text-transform: uppercase; }
}
/* In Chinese the lockup is the Chinese name over the Latin one (finish.ts writes .brand-names). */
:root:lang(zh) .brand { letter-spacing: -.015em; }
:root:lang(zh) .brand .brand-names, :root:lang(zh) .brand .brand-names > span { width: auto; height: auto; background: none; -webkit-mask: none; mask: none; font: 600 17px/var(--lh-heading) var(--sans); }
:root:lang(zh) .brand-names { display: grid; gap: var(--space-1); line-height: var(--lh-heading); }
:root:lang(zh) .brand-names small { font-size: 12px; font-weight: 400; color: var(--muted); }
/* In a header (the website's, the app's sidebar and its narrow top line), the Chinese name a size up over the
   printed Latin wordmark. */
:root:lang(zh) :is(.site-header .brand, .library .brand, .top-brand) { gap: var(--space-2); }
:root:lang(zh) :is(.site-header .brand, .library .brand, .top-brand) img { width: 30px; height: 30px; margin-top: 0; }
:root:lang(zh) :is(.site-header, .library, .top-brand) .brand-names > span { font-size: 20px; }
:root:lang(zh) :is(.site-header, .library, .top-brand) .brand-names small { display: block; width: 80px; height: 11px; font-size: 0; background: var(--ink);
  -webkit-mask: url(/assets/wordmark.svg) center / contain no-repeat; mask: url(/assets/wordmark.svg) center / contain no-repeat; }
@media (forced-colors: active) {
  :root:lang(zh) :is(.site-header, .library, .top-brand) .brand-names small { width: auto; height: auto; background: none; -webkit-mask: none; mask: none; font-size: 12px; color: var(--ink); }
}
@media (max-width: 600px) {
  :root:lang(zh) :is(.site-header, .library, .top-brand) .brand-names small { display: none; }
}
/* The bird is dark ink on transparency. */
[data-theme=dark] .brand img { filter: invert(1) brightness(.93); }