/* ScoreStarling public website. Tokens, base, then components in page order. */
/* Text fonts, self-hosted and preloaded by every page (latin subsets of Geist, Geist Mono and
   Newsreader, SIL Open Font License, see licenses/). "optional" never swaps fonts once the page shows:
   a font that is late for the first paint waits for the next page, where it comes from the cache. */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400 600; font-display: optional; src: url(/assets/fonts/geist-v5.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: '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: 'Newsreader'; font-style: normal; font-weight: 300 600; font-display: optional; src: url(/assets/fonts/newsreader-v26.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: 'Newsreader'; font-style: italic; font-weight: 300 500; font-display: optional; src: url(/assets/fonts/newsreader-italic-v26.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; }
:root {
  --paper: #f7f6f3;
  --paper-deep: #efeeea;
  --sheet: #fbfaf8;
  --white: #ffffff;
  --ink: #1f1f1d;
  --ink-soft: #3a3a37;
  --muted: #63625d;
  --soft: #8a8984;
  --line: #e6e4df;
  --line-strong: #d3d1cb;
  --accent: #b84a32;
  --accent-tint: rgba(184, 74, 50, .1);
  --sage: #4f7457;
  --night: #1a1a19;
  --night-raise: #232322;
  --night-line: rgba(240, 236, 226, .12);
  --on-night: #f0efeb;
  --on-night-muted: #a8a7a1;
  --accent-night: #e5836a;
  --serif: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 1px 2px rgba(36, 40, 34, .05), 0 22px 44px -26px rgba(36, 40, 34, .3), 0 60px 110px -70px rgba(36, 40, 34, .35);
  --gutter: clamp(20px, 4vw, 48px);
  /* 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;
}

/* Chinese editions (/zh-hans, /zh-hant): the self-hosted fonts carry Latin letters only, so Chinese falls back to
   each platform's own faces and no Chinese web font is sent. Simplified names the mainland faces, Traditional
   Taiwan's. Headings keep a Song (Ming) face where a good one is installed and otherwise use the Hei face, never
   Windows' bitmap-hinted SimSun. The rest of the Chinese typography is in its own section near the end. */
:root:lang(zh-Hans) {
  --serif: 'Newsreader', 'Songti SC', 'Source Han Serif SC', 'Noto Serif CJK SC', 'Noto Serif SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --sans: 'Geist', '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', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --sans: 'Geist', '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;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/var(--lh-body) var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
h1, h2, h3, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: #ecd2c3; color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(1240px, 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; }
.skip { position: fixed; z-index: 100; top: 12px; left: 12px; padding: 12px 20px; border-radius: 999px; background: var(--ink); color: var(--paper); text-decoration: none; font-weight: 500; transform: translateY(-200%); transition: transform .2s; }
.skip:focus { transform: none; }
.glyph-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
[hidden] { display: none !important; }

/* Type */
h1, h2 { font-family: var(--serif); font-weight: 400; font-optical-sizing: auto; text-wrap: balance; }
h2 { font-size: clamp(40px, 5.3vw, 74px); line-height: 1.02; letter-spacing: -.032em; }
h3 { font-size: 18px; font-weight: 600; line-height: var(--lh-snug); letter-spacing: -.01em; }
em { font-style: italic; color: var(--accent); }
.eyebrow { font: 500 15px/var(--lh-snug) var(--sans); color: var(--accent); }
.mono { font-family: var(--mono); }
.fine { margin-top: var(--space-5); font-size: 14px; color: var(--muted); }
.link-underline { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: text-decoration-color .2s; }
.link-underline:hover { text-decoration-color: var(--accent); }

/* Icons */
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-solid { fill: currentColor; stroke: none; }
.solid { fill: currentColor; stroke: none; }
.n-icon { width: 12px; height: 18px; flex: none; fill: currentColor; stroke: none; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); height: 48px; padding: 0 24px; border: 1px solid transparent; border-radius: 999px; font: 500 15px/1 var(--sans); letter-spacing: -.005em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .3s var(--ease), background-color .2s, border-color .2s, box-shadow .3s; }
.btn .icon { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.btn:hover .icon:not(.icon-solid) { transform: translateX(3px); }
.btn-ink { background: var(--ink); color: var(--paper); box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 10px 22px -12px rgba(36, 40, 34, .7); }
.btn-ink:hover { background: #31362e; transform: translateY(-1px); }
.btn-ghost { border-color: var(--line-strong); background: rgba(255, 255, 255, .5); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); background: var(--white); }
.btn-ghost .icon-solid { width: 14px; height: 14px; color: var(--accent); }
.btn-paper { background: var(--on-night); color: var(--night); box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .6); }
.btn-paper:hover { background: var(--white); transform: translateY(-1px); }
.btn-lg { height: 54px; padding: 0 24px; font-size: 16px; }
.btn-sm { height: 40px; padding: 0 20px; font-size: 14px; }
.btn-mini { display: inline-flex; align-items: center; gap: var(--space-2); height: 32px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--white); font: 500 13px/1 var(--sans); color: var(--ink); white-space: nowrap; }
.btn-mini .icon { width: 11px; height: 11px; color: var(--accent); }
.btn-mini-ink { border-color: var(--ink); background: var(--ink); color: var(--paper); }
button.btn-mini { cursor: pointer; transition: border-color .2s, background-color .2s, transform .15s; }
button.btn-mini:hover { border-color: var(--ink); }
button.btn-mini-ink:hover { background: #000; }
button.btn-mini:active { transform: translateY(1px); }
button.btn-mini[aria-pressed=true] { border-color: var(--accent); color: var(--accent); }
button.btn-mini:focus-visible, .file-row:focus-visible, .player-play:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; transition: background-color .3s, box-shadow .3s; }
.site-header.is-scrolled { background: rgba(247, 246, 243, .86); box-shadow: 0 1px 0 var(--line); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); }
.header-inner { height: 72px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-6); }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); justify-self: start; font: 600 21px/1 var(--serif); letter-spacing: -.015em; color: var(--ink); text-decoration: none; }
.brand img { width: 30px; height: 30px; }
.site-nav { display: flex; gap: var(--space-7); font-size: 14.5px; }
.site-nav a { position: relative; color: var(--ink-soft); text-decoration: none; white-space: nowrap; transition: color .2s; }
.site-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.site-nav a:hover { color: var(--ink); }
.site-nav a:hover::after, .site-nav a[aria-current]::after { transform: scaleX(1); }
.site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav .nav-signin, .site-nav .nav-cta, .site-nav .nav-more { display: none; }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-5); }
.link-quiet { font-size: 14.5px; color: var(--ink-soft); text-decoration: none; white-space: nowrap; }
.link-quiet:hover { color: var(--ink); }
/* Signed-in header: the app's account.js swaps "Sign in" for this avatar menu (login.css and the workspace mirror it). */
.account { position: relative; display: flex; }
.account-button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.account-avatar { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-tint); box-shadow: inset 0 0 0 1px rgba(184, 74, 50, .28); color: var(--accent); font: 600 14px/1 var(--sans); }
.account-button:hover .account-avatar, .account-button[aria-expanded=true] .account-avatar { box-shadow: inset 0 0 0 1px var(--accent); }
.account-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; width: 260px; max-width: calc(100vw - 32px); padding: 8px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); box-shadow: var(--shadow-card); }
.account-avatar { position: relative; overflow: hidden; }
.account-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.account-avatar.has-image { color: transparent; }
.account-menu:focus { outline: none; }
.account-head { display: flex; align-items: center; gap: var(--space-3); padding: 8px 8px 12px; }
.account-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: var(--lh-snug); }
.account-caption { font-size: 12px; color: var(--soft); }
.account-email { overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.account-section { margin-top: var(--space-1); padding-top: 4px; border-top: 1px solid var(--line); }
.account-item { display: flex; align-items: center; gap: var(--space-3); width: 100%; height: 38px; padding: 0 12px; border: 0; border-radius: 10px; background: none; font: 14.5px var(--sans); color: var(--ink); text-align: left; text-decoration: none; cursor: pointer; }
.account-item:hover, .account-item:focus-visible { background: var(--paper); outline: none; }
.account-item .account-icon { width: 18px; height: 18px; color: var(--muted); }
/* Language menu: a globe and the current language's short name; the list names each language in its own words. */
.lang-menu { position: relative; }
.lang-menu summary { display: inline-flex; align-items: center; gap: var(--space-2); height: 36px; padding: 0 12px 0 8px; border-radius: 999px; color: var(--ink-soft); font: 500 13.5px/1 var(--sans); white-space: nowrap; list-style: none; cursor: pointer; transition: background-color .2s, color .2s; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary:hover, .lang-menu[open] summary { background: var(--paper-deep); color: var(--ink); }
.lang-menu summary .icon { flex: none; width: 17px; height: 17px; }
.lang-list { position: absolute; z-index: 60; top: calc(100% + 8px); right: 0; min-width: 168px; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--sheet); box-shadow: var(--shadow-card); }
.lang-list a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 12px 12px; border-radius: 9px; color: var(--ink-soft); font: 450 15px/var(--lh-heading) var(--sans); text-decoration: none; }
.lang-list a:hover { background: var(--paper-deep); color: var(--ink); }
.lang-list a[aria-current]::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.lang-list a[aria-current] { color: var(--ink); font-weight: 550; }
.footer-languages { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin-left: auto; }
.footer-languages a { color: var(--muted); text-decoration: none; }
.footer-languages a:hover, .footer-languages a[aria-current] { color: var(--ink); }
/* Offered once on an English page to a browser that prefers Chinese. */
.lang-hint { position: fixed; z-index: 90; left: 16px; bottom: 16px; display: flex; align-items: center; gap: var(--space-3) var(--space-4); max-width: min(440px, calc(100% - 32px)); padding: 12px 8px 12px 20px; border-radius: 16px; background: var(--ink); color: var(--paper); box-shadow: 0 18px 40px -18px rgba(36, 40, 34, .55); font: 450 14.5px/var(--lh-ui) var(--sans); }
.lang-hint a { color: inherit; font-weight: 600; white-space: nowrap; text-underline-offset: 3px; }
.lang-hint-close { flex: none; display: grid; place-items: center; width: 34px; height: 34px; margin-left: auto; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; opacity: .75; }
.lang-hint-close:hover { opacity: 1; background: rgba(255, 255, 255, .1); }
.nav-toggle { display: none; width: 40px; height: 40px; border: 1px solid var(--line-strong); border-radius: 50%; background: transparent; cursor: pointer; place-content: center; gap: var(--space-1); }
.nav-toggle i { display: block; width: 16px; height: 1.5px; background: var(--ink); transition: transform .3s var(--ease); }
.site-header.is-open .nav-toggle i:first-of-type { transform: translateY(3.25px) rotate(45deg); }
.site-header.is-open .nav-toggle i:last-of-type { transform: translateY(-3.25px) rotate(-45deg); }

/* Hero */
.hero { padding: clamp(32px, 5.5vw, 76px) 0 clamp(72px, 9vw, 120px); }
.hero-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.pill { display: inline-flex; align-items: center; gap: var(--space-2); padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 999px; font: 500 13.5px/1 var(--sans); color: var(--ink-soft); }
.pill-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--accent); }
.pill-news { padding-right: 8px; text-decoration: none; transition: border-color .2s, background-color .2s; }
.pill-news:hover { border-color: var(--ink); background: var(--white); }
.pill-sep { width: 1px; height: 12px; background: var(--line-strong); }
.pill-news strong { font-weight: 500; color: var(--accent); }
.pill-news .icon { width: 14px; height: 14px; margin-left: -2px; color: var(--accent); transition: transform .3s var(--ease); }
.pill-news:hover .icon { transform: translateX(2px); }
.hero h1 { margin-top: var(--space-6); font-size: clamp(58px, 10vw, 136px); line-height: .9; letter-spacing: -.048em; }
.hero h1 .line { display: block; }
.hero h1 em { padding-right: .06em; }
.lede { max-width: 31em; font-size: clamp(17px, 1.4vw, 19.5px); line-height: var(--lh-body); color: var(--ink-soft); }
.hero .lede { margin-top: var(--space-7); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-7); }

/* Listening demo */
.demo { --label-w: 132px; --track-pad: 24px; margin-top: clamp(48px, 6vw, 84px); overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: var(--white); box-shadow: var(--shadow-card); scroll-margin-top: 96px; }
.demo-bar { display: flex; align-items: center; gap: var(--space-5); padding: 16px 20px 16px 16px; border-bottom: 1px solid var(--line); background: linear-gradient(#fefefd, #f9f8f6); }
.demo-file { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.file-badge { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 11px; background: var(--ink); color: var(--paper); }
.file-badge .icon { width: 19px; height: 19px; }
.file-text { display: grid; gap: 3px; min-width: 0; }
.file-text strong { overflow: hidden; font: 500 14px/var(--lh-heading) var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.file-text span { font-size: 13px; color: var(--muted); }
.demo-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-left: auto; }
.tag { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font: 500 12px/1 var(--mono); color: var(--ink-soft); white-space: nowrap; }
.tag-ok { border-color: #d3e0cf; background: #edf3ea; color: var(--sage); }
.tag-ok span { font-size: 8px; vertical-align: 1px; }
.demo-position { min-width: 118px; font: 500 12.5px/1 var(--mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--muted); }
.time-lanes { position: relative; border-bottom: 1px solid var(--line); }
.lane { display: grid; grid-template-columns: var(--label-w) minmax(0, 1fr); }
.time-lanes .lane + .lane { border-top: 1px solid var(--line); }
.lane-label { display: flex; align-items: center; gap: var(--space-2); padding: 0 20px; border-right: 1px solid var(--line); font: 500 13px/1 var(--sans); color: var(--muted); }
.lane-label .icon { width: 15px; height: 15px; }
.lane-track { min-width: 0; padding: 12px var(--track-pad); }
.lane-svg { width: 100%; height: 54px; overflow: visible; }
.wave use { fill: none; stroke-width: 2.2; stroke-linecap: round; }
.wave-base { stroke: #cfc9b8; transform-box: fill-box; transform-origin: center; }
.wave-fill { stroke: var(--accent); }
.roll { stroke: var(--ink); stroke-width: 6; stroke-linecap: round; }
.roll .roll-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 5; vector-effect: non-scaling-stroke; }
.roll line { transition: stroke .15s; }
.roll line.is-on { stroke: var(--accent); }
.playhead-rail { position: absolute; top: 0; bottom: 0; left: calc(var(--label-w) + var(--track-pad)); right: var(--track-pad); pointer-events: none; }
.playhead { position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--accent); opacity: 0; transition: opacity .25s; will-change: transform; }
.playhead::before { content: ''; position: absolute; top: 0; left: -4px; width: 10px; height: 10px; border-radius: 0 0 50% 50%; background: var(--accent); }
.demo.is-playing .playhead { opacity: 1; }
.lane-score .lane-label { align-items: flex-start; padding-top: 24px; }
.sheet { position: relative; min-width: 0; margin: var(--space-5) var(--space-6) var(--space-6); padding: 22px clamp(18px, 3vw, 40px) 16px; border: 1px solid var(--line); border-radius: 6px; background: #fffefb; box-shadow: 0 1px 2px rgba(36, 40, 34, .05), 0 14px 28px -22px rgba(36, 40, 34, .3); }
.sheet-head { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: var(--space-2) var(--space-4); }
.sheet-title { grid-column: 1 / -1; grid-row: 1; justify-self: center; font: 450 clamp(22px, 2.2vw, 30px)/1.1 var(--serif); letter-spacing: -.015em; }
.sheet-tempo { display: inline-flex; align-items: center; gap: var(--space-2); font: 600 15px/1 var(--serif); }
.metronome { display: inline-flex; align-items: center; gap: 2px; font-weight: 500; }
.metronome .n-icon { width: 9px; height: 15px; }
.sheet-credit { justify-self: end; font: italic 400 14.5px/1 var(--serif); color: var(--muted); text-align: right; }
.score-stage { position: relative; margin-top: var(--space-2); }
.score-variant { position: relative; z-index: 1; }
.score-variant[data-layout="narrow"] { display: none; }
/* Staff, TAB or Jianpu: home.js sets the stage's data-view from the switch; without it the staff shows. */
.score-stage .score-variant:is([data-view="tab"], [data-view="jianpu"]), .score-stage:is([data-view="tab"], [data-view="jianpu"]) .score-variant[data-view="staff"] { display: none; }
.score-stage[data-view="tab"] .score-variant[data-view="tab"][data-layout="wide"], .score-stage[data-view="jianpu"] .score-variant[data-view="jianpu"][data-layout="wide"] { display: block; }
/* Printed jianpu gives the tempo in its key line (1=C 4/4 ♩=132), as the product prints it, so the head's mark steps aside. */
.sheet:has(.score-stage[data-view="jianpu"]) .sheet-tempo { visibility: hidden; }
/* Jianpu lights the playing number in a box like the cursor's, the number in the accent colour (the copy over it). */
.score-stage[data-view="jianpu"] .score-cursor { display: none; }
.engraved.jianpu .note > * { opacity: 0; transition: opacity .12s; }
.engraved.jianpu .note.is-playing > * { opacity: 1; }
.engraved.jianpu .jianpu-box { fill: var(--accent-tint); stroke: rgba(184, 74, 50, .22); stroke-width: .6; }
.sheet-views { position: absolute; top: 14px; right: 14px; z-index: 2; }
.sheet-views, .tab-show-views { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); }
.sheet-views button, .tab-show-views button { height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: none; font: 500 12.5px/1 var(--sans); color: var(--muted); white-space: nowrap; cursor: pointer; transition: background-color .2s, color .2s, box-shadow .2s; }
.sheet-views button:hover, .tab-show-views button:hover { color: var(--ink); }
.sheet-views [aria-pressed="true"], .tab-show-views [aria-selected="true"] { background: var(--white); color: var(--ink); box-shadow: 0 1px 2px rgba(36, 40, 34, .12), 0 0 0 1px var(--line); }
.score-cursor { position: absolute; top: 0; left: 0; z-index: 0; width: 26px; height: 60px; border-radius: 7px; background: var(--accent-tint); box-shadow: inset 0 0 0 1px rgba(184, 74, 50, .22); opacity: 0; pointer-events: none; transition: transform .16s var(--ease), height .2s, opacity .25s; }
.demo.is-playing .score-cursor { opacity: 1; }
.demo-transport { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); padding: 16px 20px 8px 16px; background: linear-gradient(#f9f8f6, #f6f5f2); }
.play { display: grid; place-items: center; width: 50px; height: 50px; flex: none; border: 0; border-radius: 50%; background: var(--accent); color: #fff; cursor: pointer; box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 10px 20px -10px rgba(184, 74, 50, .8); transition: transform .25s var(--ease), background-color .2s; }
.play:hover:not(:disabled) { background: #a5402a; transform: scale(1.04); }
.play:disabled { opacity: .45; cursor: default; box-shadow: none; }
.play .icon { width: 20px; height: 20px; }
.play .play-on { margin-left: 2px; }
.play .play-off, .play[aria-pressed="true"] .play-on { display: none; }
.play[aria-pressed="true"] .play-off { display: block; }
.demo.is-playing .play { animation: ring 1.8s ease-out infinite; }
.demo-time { min-width: 94px; font: 500 14px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.mix { display: flex; align-items: center; gap: var(--space-3); }
.mix-end { font: 500 13px/1 var(--sans); color: var(--muted); }
.mix input { width: 150px; height: 26px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.mix input:disabled { cursor: default; opacity: .5; }
.mix input::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent calc(50% - 1px), var(--muted) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) center / 100% 9px no-repeat, var(--line-strong); }
.mix input::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -7.5px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--white); box-shadow: 0 1px 4px rgba(36, 40, 34, .25); -webkit-appearance: none; appearance: none; }
.mix input::-moz-range-track { height: 3px; border-radius: 3px; background: var(--line-strong); }
.mix input::-moz-range-thumb { width: 15px; height: 15px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--white); }
.demo-exports { display: inline-flex; align-items: center; gap: var(--space-2); margin-left: auto; font: 500 12px/1 var(--mono); letter-spacing: .04em; color: var(--muted); }
.demo-exports .icon { width: 15px; height: 15px; }
.demo-exports a { color: var(--ink-soft); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s; }
.demo-exports a:hover { color: var(--accent); text-decoration-color: currentColor; }
/* Speaks only while the recording loads or when sound fails; empty, it takes no room. */
.demo-status { min-height: 40px; padding: 4px 20px 16px 96px; background: #f6f5f2; font-size: 14px; color: var(--muted); }
.demo-status:empty { display: none; }

/* Engraved notation (Verovio output; its embedded stylesheet is stripped by engrave.py) */
.engraved, .engraved svg { overflow: visible; }
.engraved { width: 100%; height: auto; color: var(--ink); fill: currentColor; }
.engraved path, .engraved polygon, .engraved polyline, .engraved rect, .engraved ellipse { stroke: currentColor; }
.engraved text { font-family: var(--serif); }
.engraved .harm text { font-weight: 450; }
/* How it works: the same bars on a staff and in jianpu, each on its own small sheet. */
.notation-pair { display: grid; gap: var(--space-3); max-width: 460px; margin-top: var(--space-7); }
.notation-view { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: var(--space-3); }
.notation-name { font: 500 13px/var(--lh-snug) var(--sans); color: var(--muted); }
.notation-sheet { min-width: 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 6px; background: #fffefb; }
.notation-sheet .engraved { display: block; }
.notation-pair figcaption { margin-top: var(--space-1); font-size: 14px; line-height: var(--lh-ui); color: var(--muted); }
.engraved .mNum text { font-style: italic; fill: var(--muted); }
.engraved .note { transition: color .12s, fill .12s; }
.engraved .note.is-playing, .engraved .note.is-selected { color: var(--accent); fill: var(--accent); }
.engraved .note.is-marked { color: var(--accent); fill: var(--accent); }
/* TAB drawn twice to compare string rules (the guitar TAB article and tool page). */
.tab-compare { display: grid; gap: var(--space-4); }
.tab-compare-row { display: grid; gap: var(--space-2); }
.tab-compare-name { font: 500 13.5px/var(--lh-snug) var(--sans); color: var(--muted); }


/* Sections */
.section { padding: clamp(88px, 11vw, 150px) 0; }
.section-head { max-width: 780px; margin-bottom: clamp(48px, 6vw, 76px); }
.section-head h2 { margin-top: var(--space-6); }
.section-lede { max-width: 35em; margin-top: var(--space-6); font-size: 18.5px; line-height: var(--lh-body); color: var(--muted); }
.section-sheet { border-block: 1px solid var(--line); background: var(--sheet); }
.section-paper { background: var(--paper-deep); }
.split { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.section-head-side { position: sticky; top: 120px; margin-bottom: 0; }

/* How it works */
.movements { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); }
.movement { display: flex; flex-direction: column; }
.mini { position: relative; display: flex; flex-direction: column; justify-content: center; gap: var(--space-4); height: 232px; margin-bottom: var(--space-7); padding: 24px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--white); box-shadow: 0 1px 2px rgba(36, 40, 34, .04), 0 20px 40px -34px rgba(36, 40, 34, .4); }
.movement-num { font: italic 400 34px/1 var(--serif); color: var(--accent); }
.movement h3 { margin-top: var(--space-4); font: 450 27px/var(--lh-heading) var(--serif); letter-spacing: -.02em; }
.movement p { max-width: 30em; margin-top: var(--space-3); font-size: 16px; line-height: var(--lh-body); color: var(--muted); }
.drop { flex: 1; display: grid; place-items: center; align-content: center; gap: var(--space-2); padding: 12px; border: 1.5px dashed var(--line-strong); border-radius: 12px; background: var(--sheet); text-align: center; }
.drop .icon { width: 22px; height: 22px; color: var(--accent); }
.drop span { font-size: 15px; font-weight: 500; }
.drop small { font: 500 10.5px/var(--lh-snug) var(--mono); letter-spacing: .04em; color: var(--muted); }
a.drop { color: inherit; text-decoration: none; transition: border-color .2s, background-color .2s; }
a.drop:hover { border-color: var(--accent); background: var(--accent-tint); }
.drop .drop-go { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: 2px; font: 500 12.5px/1 var(--sans); letter-spacing: 0; color: var(--accent); }
.drop .drop-go .icon { width: 13px; height: 13px; }
.mini-file { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; font: 500 12.5px/1 var(--mono); color: var(--ink-soft); white-space: nowrap; }
.mini-file .icon { width: 14px; height: 14px; color: var(--muted); }
.mini-file small { color: var(--muted); }
a.chip { text-decoration: none; transition: border-color .2s; }
a.chip:hover { border-color: var(--ink); }
a.mini { color: inherit; text-decoration: none; transition: border-color .2s; }
a.mini:hover { border-color: var(--line-strong); }
.mini-go { position: absolute; top: 16px; left: 22px; display: inline-flex; align-items: center; gap: var(--space-2); font: 500 12.5px/1 var(--sans); color: var(--accent); }
.mini-go .icon { width: 13px; height: 13px; transition: transform .2s; }
a.mini:hover .mini-go .icon { transform: translateX(2px); }
a.drop:focus-visible, a.chip:focus-visible, a.mini:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mini-row { display: flex; gap: var(--space-2); justify-content: space-between; }
.chip { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font: 500 12.5px/1 var(--mono); color: var(--ink-soft); white-space: nowrap; }
.chip .icon { width: 14px; height: 14px; color: var(--muted); }
.chip small { color: var(--muted); }
.chip-rec i { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.mini-tracks { position: relative; display: grid; gap: var(--space-3); padding: 8px 0; }
.mini-track { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: center; gap: var(--space-3); }
.mini-track b { font: 500 12px/1 var(--sans); color: var(--muted); }
.mini-wave, .mini-roll { width: 100%; height: 40px; overflow: visible; }
.mini-wave { fill: none; stroke: #c8c2b1; stroke-width: 1.6; stroke-linecap: round; }
.mini-roll { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.mini-loop { position: absolute; top: -14px; bottom: 0; left: calc(92px + (100% - 92px) * .5); right: 0; display: flex; align-items: flex-start; justify-content: flex-end; gap: var(--space-2); padding: 0 8px; border-inline: 1.5px solid var(--accent); background: var(--accent-tint); font: 500 10.5px/1 var(--mono); letter-spacing: .04em; white-space: nowrap; color: var(--accent); }
.mini-loop .icon { width: 12px; height: 12px; margin-top: -1px; }
.mini-mix { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); font: 500 12px/1 var(--sans); color: var(--muted); }
.mini-slider { position: relative; height: 3px; border-radius: 3px; background: var(--line-strong); }
.mini-slider i { position: absolute; top: 50%; left: 38%; width: 16px; height: 16px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--white); transform: translate(-50%, -50%); box-shadow: 0 1px 4px rgba(36, 40, 34, .2); }
.movement.is-in .mini-slider i { animation: slide 4.5s var(--ease) infinite alternate; }
.mini-export { gap: var(--space-2); }
.file-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: 8px 12px 8px 8px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper); font: 500 13px/var(--lh-snug) var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.file-row small { font: 500 12px/1 var(--sans); color: var(--muted); }
a.file-row { text-decoration: none; transition: border-color .2s; }
a.file-row:hover { border-color: var(--line-strong); }
a.file-row small { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--accent); }
a.file-row small .icon { width: 14px; height: 14px; }
.ext { display: grid; place-items: center; height: 26px; border-radius: 6px; background: var(--ink); color: var(--paper); font: 600 10px/1 var(--mono); letter-spacing: .05em; }
.file-row:nth-child(1) .ext { background: var(--accent); }
.file-row:nth-child(3) .ext { background: var(--sage); }
.file-row:nth-child(4) .ext { background: #8b7b58; }

/* Workbench */
.editor { overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: var(--white); box-shadow: var(--shadow-card); }
.editor-bar { display: flex; align-items: center; gap: var(--space-5); padding: 12px 16px 12px 24px; border-bottom: 1px solid var(--line); background: linear-gradient(#fefefd, #f9f8f6); }
.editor-doc { display: flex; align-items: baseline; gap: var(--space-3); min-width: 0; }
.editor-doc strong { font: 500 19px/1 var(--serif); letter-spacing: -.01em; }
.editor-doc span { font: 500 13px/1 var(--sans); color: var(--muted); }
.editor-tools { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.tool { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: var(--white); color: var(--ink-soft); cursor: pointer; transition: border-color .2s, color .2s; }
.tool:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); }
.tool:disabled { opacity: .4; cursor: default; }
.tool .icon { width: 16px; height: 16px; }
.editor-version { display: inline-flex; align-items: center; gap: var(--space-2); margin-left: var(--space-3); font: 500 12px/1 var(--mono); color: var(--muted); white-space: nowrap; }
.editor-version i { width: 7px; height: 7px; border-radius: 50%; background: var(--sage); }
.editor-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
.editor-canvas { display: grid; place-items: center; min-width: 0; padding: clamp(28px, 4vw, 56px) clamp(20px, 4vw, 52px); border-right: 1px solid var(--line); background: var(--sheet); }
.editor-stage { position: relative; width: 100%; padding: 32px 32px 24px; border: 1px solid var(--line); border-radius: 6px; background: #fffefb; box-shadow: 0 1px 2px rgba(36, 40, 34, .05), 0 18px 34px -26px rgba(36, 40, 34, .35); }
.editor-stage .engraved { position: relative; z-index: 1; }
.select-box { position: absolute; z-index: 0; top: 0; left: 0; width: 0; height: 0; border-radius: 6px; background: var(--accent-tint); box-shadow: inset 0 0 0 1.5px rgba(184, 74, 50, .55); opacity: 0; transition: opacity .4s; }
.select-box.is-ready { opacity: 1; }
.select-box::after { content: attr(data-label); position: absolute; left: 50%; bottom: calc(100% + 6px); padding: 4px 8px; border-radius: 6px; background: var(--accent); color: #fff; font: 600 10.5px/1 var(--mono); transform: translateX(-50%); }
.inspector { display: grid; align-content: start; gap: var(--space-6); padding: 24px 24px; background: var(--white); }
.insp-label { display: block; margin-bottom: var(--space-3); font: 500 12.5px/1 var(--sans); color: var(--muted); }
.insp-note { font: 400 46px/1 var(--serif); letter-spacing: -.02em; }
.insp-meta { margin-top: var(--space-2); font-size: 14px; line-height: var(--lh-ui); color: var(--muted); }
.stepper { display: grid; grid-template-columns: 1fr 1.3fr 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; }
.stepper > * { display: grid; place-items: center; height: 38px; font: 500 13.5px/1 var(--mono); }
.stepper button { padding: 0; border: 0; background: var(--paper); color: var(--ink-soft); cursor: pointer; transition: background-color .2s, color .2s; }
.stepper button:hover:not(:disabled) { background: var(--sheet); color: var(--ink); }
.stepper button:disabled { color: var(--line-strong); cursor: default; }
.stepper button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.stepper output { border-inline: 1px solid var(--line); }
.stepper .icon { width: 16px; height: 16px; }
.insp-tools { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-3); }
.tool-group { display: flex; gap: var(--space-1); }
.tool[aria-pressed=true] { border-color: var(--ink); background: var(--paper); color: var(--ink); }
.glyph { fill: currentColor; stroke: none; }
.glyph-accidental { width: 6px; height: 19px; }
.glyph-ottava { width: 22px; height: 12px; }
.name-sign { display: inline-block; width: .21em; height: .66em; margin: 0 .05em 0 .03em; vertical-align: -.02em; }
.stepper output { display: flex; align-items: center; justify-content: center; }
.stepper .name-sign { width: .3em; height: .95em; margin: 0 .08em; }
.insp-keys { display: grid; gap: var(--space-2); font-size: 12.5px; line-height: var(--lh-snug); color: var(--muted); }
.insp-keys div { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: var(--space-3); }
.insp-keys dt { display: flex; gap: 3px; }
.insp-keys kbd { display: inline-grid; place-items: center; min-width: 21px; height: 21px; padding: 0 4px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; background: var(--white); font: 500 11.5px/1 var(--sans); color: var(--ink-soft); }
@media (hover: none) { .insp-keys { display: none; } }
.editor-stage:focus { outline: none; }
.editor-stage:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-tint), 0 1px 2px rgba(36, 40, 34, .05); }
.editor-stage .engraved { cursor: pointer; }
.editor-transport { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); padding: 16px 16px 16px 20px; border-top: 1px solid var(--line); background: linear-gradient(#f9f8f6, #f6f5f2); }
.editor-position { min-width: 9em; font: 500 13px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.editor-saved { margin-left: auto; font-size: 13.5px; color: var(--muted); }
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(56px, 7vw, 96px); border-top: 1px solid var(--line); }
.feature { padding: 40px 40px 40px 0; border-bottom: 1px solid var(--line); }
.feature:not(:nth-child(3n + 1)) { padding-left: 40px; border-left: 1px solid var(--line); }
.feature .icon { width: 26px; height: 26px; stroke-width: 1.4; color: var(--accent); }
.feature h3 { font: 450 24px/var(--lh-heading) var(--serif); letter-spacing: -.015em; }
.feature .icon + h3 { margin-top: var(--space-6); }
.feature p { margin-top: var(--space-3); font-size: 15.5px; line-height: var(--lh-body); color: var(--muted); }
.capability-paths { margin-top: 0; }
/* Hero: what goes in, the one score, what comes out */
.flow { position: relative; z-index: 3; }
.flow-row { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); }
.flow-tile { display: grid; justify-items: center; align-content: start; gap: var(--space-2); width: 100%; height: 100%; padding: 16px 4px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); font: 500 13.5px/var(--lh-heading) var(--sans); text-align: center; color: var(--ink-soft); cursor: pointer; box-shadow: 0 1px 2px rgba(36, 40, 34, .04); transition: border-color .45s var(--ease), background-color .45s var(--ease), color .45s, box-shadow .45s var(--ease), transform .45s var(--ease); }
.flow-tile:hover { border-color: var(--line-strong); color: var(--ink); transform: translateY(-2px); box-shadow: 0 10px 22px -16px rgba(36, 40, 34, .35); }
.flow-tile:active { transform: translateY(0); }
.flow-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.flow-tile[aria-pressed=true] { border-color: var(--accent); background: var(--accent-tint); color: var(--ink); transform: translateY(-2px); box-shadow: 0 14px 26px -16px rgba(184, 74, 50, .5); }
.flow-row .icon { width: 24px; height: 24px; color: var(--ink); transition: color .45s; }
.flow-out .icon, .flow-tile[aria-pressed=true] .icon { color: var(--accent); }
.flow-tile.is-arriving .icon { animation: pop .55s var(--ease); }
@keyframes pop { 40% { transform: scale(1.22) rotate(-4deg); } }
/* The route a conversion takes: down from what you have, through ScoreStarling, down into what you need.
   home.js draws the faint stubs and the chosen route, and sends a pulse along it. */
.flow-wire { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; fill: none; pointer-events: none; }
.wire-stubs { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 2 4; }
.wire-route { stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wire-pulse { fill: var(--accent); opacity: 0; filter: drop-shadow(0 0 5px rgba(184, 74, 50, .7)); }
/* "More" holds the forms only some people need; the one chosen takes the tile's place. */
.flow-more { position: relative; }
.flow-more .flow-tile span { display: inline-flex; align-items: center; gap: var(--space-1); }
.flow-more .flow-tile span::after { content: ''; width: 5px; height: 5px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: .55; }
.flow-menu { position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; display: grid; gap: 2px; min-width: 196px; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); box-shadow: 0 18px 40px -18px rgba(36, 40, 34, .45); }
.flow-menu[hidden] { display: none; }
.flow-menu button { display: flex; align-items: center; gap: var(--space-3); padding: 8px 12px; border: 0; border-radius: 9px; background: none; font: 500 14px/var(--lh-heading) var(--sans); text-align: left; color: var(--ink-soft); cursor: pointer; }
.flow-menu .icon { width: 18px; height: 18px; flex: none; color: var(--accent); }
.flow-menu button:hover, .flow-menu button:focus-visible { outline: none; background: var(--paper); color: var(--ink); }
.flow-menu button[aria-checked=true] { color: var(--accent); }
/* Under the picker, always the same two lines: the route with what it costs, then how it goes. The box keeps
   room for both, so the gap above never changes with the pair chosen. */
.flow-say { display: grid; grid-template-columns: minmax(0, max-content) 1fr; align-items: center; align-content: start; gap: var(--space-2) var(--space-3); min-height: calc(var(--lh-ui) * 1em + 1.9em + var(--space-2)); margin-top: var(--space-5); font-size: 14.5px; line-height: var(--lh-ui); color: var(--muted); }
.flow-say strong { grid-area: 1 / 1; font-weight: 600; color: var(--ink); }
.flow-say .flow-cost { grid-area: 1 / 2; justify-self: start; }
.flow-say .flow-how { grid-area: 2 / 1 / 3 / 3; }
.flow-cost { padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font-size: 12.5px; line-height: var(--lh-snug); color: var(--ink-soft); white-space: nowrap; }
.flow-hub { position: relative; z-index: 1; display: flex; justify-content: center; margin: var(--space-6) 0; }
.hub { display: inline-flex; align-items: center; gap: var(--space-2); padding: 2px 12px; background: var(--paper); font-size: 14px; color: var(--muted); white-space: nowrap; transition: color .4s; }
.hub img { width: 22px; height: 22px; transition: transform .4s var(--ease); }
.hub.is-busy { color: var(--ink); }
.hub.is-busy img { transform: scale(1.15) rotate(-6deg); }
/* What people use it for */
.uses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.use { display: flex; flex-direction: column; padding: 24px 24px 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); }
.use .icon { width: 28px; height: 28px; stroke-width: 1.5; color: var(--accent); }
.use h3 { margin-top: var(--space-6); font: 450 24px/var(--lh-heading) var(--serif); letter-spacing: -.015em; }
.use p { margin-top: var(--space-3); font-size: 15.5px; line-height: var(--lh-ui); color: var(--muted); }
.use .use-cost { margin-top: auto; padding-top: 20px; font-size: 14px; font-weight: 500; color: var(--ink); }
/* The guide's WebMCP section, shown rather than told: the two ways an assistant reaches your scores, a drawn
   workspace with a browser agent at work, the three steps to turn it on, and what it can and can't do. */
.badge-beta { display: inline-flex; align-items: center; margin-left: var(--space-2); padding: 4px 8px; border-radius: 999px; background: var(--accent); color: #fff; font: 600 11px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; vertical-align: 2px; }
.ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); scroll-margin-top: 96px; }
.way { display: grid; align-content: start; gap: var(--space-5); padding: 24px 24px 24px; border: 1px solid var(--line); border-radius: 22px; background: var(--white); }
.way-kind { display: inline-flex; align-items: center; gap: var(--space-2); font: 500 14px/1 var(--sans); color: var(--muted); }
.way-kind .icon { width: 18px; height: 18px; color: var(--accent); }
.way-route { display: flex; align-items: center; min-width: 0; }
.way-node { display: inline-flex; align-items: center; gap: var(--space-2); flex: 0 1 auto; min-width: 0; padding: 12px 16px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--paper); font: 500 14.5px/var(--lh-heading) var(--sans); color: var(--ink); }
.way-node > :is(svg, img) { flex: none; }
.way-node .logo, .way-node .icon { width: 18px; height: 18px; }
.way-node .icon { color: var(--accent); }
.way-node img { width: 20px; height: 20px; }
.way-end { border-color: rgba(184, 74, 50, .45); background: var(--accent-tint); }
.way-link { position: relative; display: flex; flex: 1; justify-content: center; min-width: 64px; padding: 0 8px; }
.way-link::before { content: ''; position: absolute; top: 50%; left: 0; right: 4px; border-top: 1.5px dashed var(--line-strong); }
.way-link::after { content: ''; position: absolute; top: calc(50% - 4px); right: 3px; width: 7px; height: 7px; border: solid var(--muted); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); }
.way-link b { position: relative; padding: 4px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font: 500 11.5px/1 var(--mono); color: var(--accent); }
.way-text { font-size: 15px; line-height: var(--lh-ui); color: var(--muted); }
.agent-demo { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(32px, 5vw, 64px); align-items: center; margin-top: clamp(40px, 5vw, 64px); }
.agent-split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.agent-score { display: grid; align-content: center; gap: var(--space-3); padding: 24px 20px 20px; }
.agent-staff { width: 100%; height: auto; overflow: visible; color: var(--ink); fill: currentColor; }
.agent-staff path { fill: none; stroke: currentColor; stroke-width: 1.15; }
.agent-staff .agent-lines { stroke-width: .8; opacity: .7; }
.agent-staff .agent-sel { fill: var(--accent-tint); stroke: rgba(184, 74, 50, .35); stroke-width: 1; }
.agent-staff .agent-new { color: var(--accent); }
.agent-tag { justify-self: end; padding: 4px 12px; border-radius: 999px; background: var(--accent-tint); font: 500 11.5px/var(--lh-heading) var(--sans); color: var(--accent); }
.agent-pane { display: grid; align-content: start; gap: var(--space-3); padding: 16px; border-left: 1px solid var(--line); background: var(--paper); }
.agent-who { display: inline-flex; align-items: center; gap: var(--space-2); font: 500 12px/1 var(--sans); color: var(--muted); }
.agent-who .icon { width: 15px; height: 15px; color: var(--accent); }
.agent-ask { justify-self: end; max-width: 94%; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: var(--ink); color: var(--paper); font-size: 13px; line-height: var(--lh-snug); }
.agent-call { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-2); font-size: 12px; line-height: var(--lh-snug); color: var(--muted); }
.agent-call::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #7fb68a; }
.agent-call code { font: 500 11.5px/var(--lh-snug) var(--mono); color: var(--ink-soft); }
.agent-say { font-size: 13px; line-height: var(--lh-ui); color: var(--ink); }
.agent-steps { display: grid; gap: var(--space-6); }
.agent-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.agent-step-icon { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 13px; background: var(--white); color: var(--accent); }
.agent-step-icon .icon { width: 20px; height: 20px; }
.agent-steps h3 { font: 450 21px/var(--lh-heading) var(--serif); letter-spacing: -.01em; }
.agent-steps p { margin-top: var(--space-2); font-size: 15px; line-height: var(--lh-body); color: var(--muted); }
.agent-steps code { font: 500 .86em/var(--lh-ui) var(--mono); color: var(--ink-soft); overflow-wrap: anywhere; }
.agent-facts { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 28px clamp(32px, 5vw, 64px); margin-top: clamp(48px, 6vw, 72px); padding-top: clamp(32px, 4vw, 44px); border-top: 1px solid var(--line); }
.agent-facts h3 { margin-bottom: var(--space-4); font: 500 14px/var(--lh-heading) var(--sans); color: var(--muted); }
.agent-can { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-6); }
.agent-guard { display: grid; gap: var(--space-3); }
.agent-can li, .agent-guard li { display: flex; align-items: center; gap: var(--space-3); font-size: 15.5px; line-height: var(--lh-snug); color: var(--ink-soft); }
.agent-can .icon, .agent-guard .icon { flex: none; width: 18px; height: 18px; color: var(--accent); }
.agent-guard .icon { color: var(--ink); }
@media (max-width: 1100px) {
  .ways { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .agent-demo, .agent-facts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .agent-split { grid-template-columns: minmax(0, 1fr); }
  .agent-pane { border-left: 0; border-top: 1px solid var(--line); }
  .agent-can { grid-template-columns: minmax(0, 1fr); }
}
/* On a phone the route runs down: the two ends stacked, the link between them. */
@media (max-width: 480px) {
  .way-route { flex-direction: column; align-items: flex-start; }
  .way-link { align-self: stretch; justify-content: flex-start; align-items: center; min-height: 44px; padding: 0 0 0 32px; }
  .way-link::before { top: 2px; bottom: 6px; left: 22px; right: auto; border-top: 0; border-left: 1.5px dashed var(--line-strong); }
  .way-link::after { top: auto; bottom: 4px; left: 18.6px; right: auto; transform: rotate(135deg); }
}

/* Assistants */
.section-night { position: relative; overflow: hidden; background: var(--night); color: var(--on-night); }
.section-night .wrap { position: relative; }
.section-night .eyebrow, .section-night .section-lede { color: var(--on-night-muted); }
.section-night :focus-visible { outline-color: var(--accent-night); }
.agents { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(48px, 6vw, 100px); align-items: center; }
.agents h2 { margin-top: var(--space-6); }
.proof { display: grid; gap: var(--space-6); margin-top: var(--space-8); }
.proof li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: var(--space-4); align-items: center; font-size: 15px; line-height: var(--lh-ui); color: var(--on-night-muted); }
.proof .icon { width: 42px; height: 42px; padding: 12px; border: 1px solid var(--night-line); border-radius: 12px; background: rgba(240, 236, 226, .05); color: var(--accent-night); }
.proof strong { display: block; margin-bottom: 2px; font-size: 16.5px; font-weight: 600; color: var(--on-night); }
.agents-cta { margin-top: var(--space-7); }
.chat { overflow: hidden; border: 1px solid var(--night-line); border-radius: 24px; background: var(--night-raise); box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .7); }
.chat-bar { display: flex; justify-content: space-between; gap: var(--space-3); padding: 16px 20px; border-bottom: 1px solid var(--night-line); font: 500 13px/1 var(--sans); color: var(--on-night-muted); }
.chat-conn { display: inline-flex; align-items: center; gap: var(--space-2); letter-spacing: .02em; text-transform: none; }
.chat-conn i { width: 7px; height: 7px; border-radius: 50%; background: #7fb68a; box-shadow: 0 0 0 3px rgba(127, 182, 138, .18); }
.chat-log { display: grid; gap: var(--space-5); padding: 24px 24px 32px; }
.msg p { font-size: 15.5px; line-height: var(--lh-ui); }
.msg-user { display: grid; gap: var(--space-2); justify-self: end; max-width: 84%; padding: 12px 16px; border: 1px solid var(--night-line); border-radius: 18px 18px 6px 18px; background: #2b302a; color: var(--on-night); }
.attach { display: inline-flex; align-items: center; gap: var(--space-2); justify-self: start; font: 500 12px/1 var(--mono); color: var(--on-night-muted); }
/* In a written prompt the attachment is part of the sentence, not a control. */
.ask-prompt .attach { padding: 0; background: none; font: 400 13px/var(--lh-snug) var(--sans); }
.attach .icon { width: 14px; height: 14px; }
.msg-bot { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: var(--space-3); max-width: 96%; color: var(--on-night); }
.avatar { width: 30px; height: 30px; padding: 4px; border-radius: 50%; background: var(--paper); }
.panel { margin-top: var(--space-3); overflow: hidden; border-radius: 14px; background: #fffefb; color: var(--ink); box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .7); }
.panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--paper); }
.panel-head strong { font: 600 12.5px/1 var(--sans); color: var(--accent); }
.panel-head span { font-size: 13px; color: var(--muted); }
.panel-score { padding: 16px 20px 8px; }
.panel-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 8px 16px 16px; }
/* home.js plays the conversation in when it comes into view: each message appears in turn, and a reply
   shows its avatar and three dots while it is being written, then its words fade in. Messages not yet
   played keep their space (hidden, not removed), so the card has its full height from the start and the
   page around it does not move. */
.chat.will-play .msg:not(.is-shown):not(.is-typing) { visibility: hidden; opacity: 0; }
.chat.will-play .msg.is-shown, .chat.will-play .msg.is-typing { animation: msg-in .5s var(--ease) both; }
@keyframes msg-in { from { opacity: 0; transform: translateY(10px); } }
.msg-bot { position: relative; }
.msg-bot > div { transition: opacity .45s var(--ease); }
.msg-bot.is-typing > div { opacity: 0; }
/* A reply that has not been shown starts with its words already hidden, so the three dots never reveal them first. */
.chat.will-play .msg-bot:not(.is-shown) > div { opacity: 0; transition: none; }
.msg-bot.is-typing::after { content: ''; position: absolute; top: 12px; left: 46px; width: 6px; height: 6px; border-radius: 50%; animation: typing 1s infinite; }
@keyframes typing {
  0%, 100% { background: var(--on-night); box-shadow: 11px 0 rgba(236, 235, 230, .3), 22px 0 rgba(236, 235, 230, .3); }
  33% { background: rgba(236, 235, 230, .3); box-shadow: 11px 0 var(--on-night), 22px 0 rgba(236, 235, 230, .3); }
  66% { background: rgba(236, 235, 230, .3); box-shadow: 11px 0 rgba(236, 235, 230, .3), 22px 0 var(--on-night); }
}

/* Specifications */
.spec-list > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--space-6); padding: 20px 0; border-top: 1px solid var(--line); }
.spec-list > div:last-child { border-bottom: 1px solid var(--line); }
.spec-list dt { padding-top: 3px; font: 500 13px/var(--lh-body) var(--sans); color: var(--muted); }
.spec-list dd { font-size: 16.5px; line-height: var(--lh-body); }

/* Quotes and arrow links */
blockquote { margin: var(--space-7) 0 var(--space-7); padding-left: 32px; border-left: 2px solid var(--accent); }
blockquote p { font: italic 400 clamp(42px, 4.6vw, 64px)/1.05 var(--serif); letter-spacing: -.025em; color: var(--accent); }
blockquote footer { margin-top: var(--space-3); font: 500 13.5px/1 var(--sans); color: var(--muted); }
.link-arrow { display: inline-flex; align-items: center; gap: var(--space-2); padding-bottom: 3px; border-bottom: 1px solid var(--line-strong); font-weight: 500; color: var(--ink); text-decoration: none; transition: border-color .2s; }
.link-arrow:hover { border-color: var(--accent); }
.link-arrow .icon { width: 16px; height: 16px; }

/* FAQ */
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding: 24px 0; font: 450 22px/var(--lh-snug) var(--serif); letter-spacing: -.01em; list-style: none; cursor: pointer; transition: color .2s; overflow-wrap: anywhere; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--accent); }
.faq-list summary .icon { width: 22px; height: 22px; color: var(--accent); transition: transform .35s var(--ease); }
.faq-list details[open] summary .icon { transform: rotate(45deg); }
.faq-list details p { max-width: 40em; padding: 0 48px 24px 0; font-size: 16.5px; line-height: var(--lh-body); color: var(--muted); }
.faq-list details code { overflow-wrap: anywhere; }

/* Finale */
.finale { padding: clamp(110px, 13vw, 180px) 0 clamp(88px, 10vw, 140px); border-top: 1px solid var(--line); text-align: center; }
.finale-staff { position: relative; max-width: 860px; height: 73px; margin: 0 auto clamp(48px, 6vw, 72px); background: repeating-linear-gradient(to bottom, var(--line-strong) 0 1px, transparent 1px 18px); }
.final-bar { position: absolute; top: 0; right: 0; width: 11px; height: 73px; border-left: 1.5px solid var(--ink); border-right: 6px solid var(--ink); }
.finale-staff img { position: absolute; right: 13%; top: -85px; width: 96px; height: 96px; }
.finale h2 { max-width: 13ch; margin-inline: auto; font-size: clamp(46px, 6.8vw, 100px); line-height: .98; letter-spacing: -.042em; }
.finale h2 em { display: block; }
.finale-actions { display: flex; justify-content: center; margin-top: var(--space-8); }

/* Footer */
.site-footer { padding: 64px 0 32px; border-top: 1px solid var(--line); background: var(--paper-deep); }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: var(--space-8) var(--space-7); }
.footer-brand p { margin-top: var(--space-4); font-size: 15px; line-height: var(--lh-body); color: var(--muted); }
.footer-social { display: flex; gap: var(--space-1); margin: var(--space-5) 0 0 -10px; }
.footer-social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink-soft); }
.footer-social a:hover { color: var(--accent); background: var(--paper); }
.footer-social svg { width: 20px; height: 20px; fill: currentColor; }
.footer-nav { display: grid; align-content: start; gap: var(--space-3); }
.footer-h { margin-bottom: var(--space-2); font: 500 13px/1 var(--sans); color: var(--muted); }
.footer-nav a { width: fit-content; font-size: 15px; color: var(--ink-soft); text-decoration: none; }
.footer-nav a:hover { color: var(--accent); }
.footer-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-7); margin-top: var(--space-10); padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
/* The end of the page as the end of a piece: a final barline under a fermata, in the text's grey. The
   viewBox centres the staff on the text beside it and ends at the barline, so the staff stops on the
   column's right edge, as it would at a page margin, even when the row wraps; the fermata overhangs, as
   engraved ones do. */
.fine-mark { display: inline-flex; }
.fine-mark svg { width: 28px; height: 32.5px; overflow: visible; fill: currentColor; stroke: currentColor; }
.fine-mark .fine-staff { stroke-width: .8; opacity: .55; }
.fine-mark .fine-bar { stroke-width: 1.1; }
.fine-mark rect, .fine-mark circle { stroke: none; }
.fine-mark .fine-arc { fill: none; stroke-width: 1.5; stroke-linecap: round; }

/* Inner pages: How it works and FAQ */
.page-hero { padding: clamp(40px, 6vw, 96px) 0 clamp(48px, 6vw, 80px); }
.page-title { max-width: 15ch; margin-top: var(--space-6); font-size: clamp(48px, 7.6vw, 112px); line-height: .96; letter-spacing: -.045em; }
.page-hero .section-lede { margin-top: var(--space-6); }
.page-body { padding-bottom: clamp(88px, 11vw, 150px); }
.page-split { padding-top: clamp(40px, 6vw, 96px); }
.section-head h1 { margin-top: var(--space-6); font-size: clamp(44px, 6vw, 84px); line-height: 1; letter-spacing: -.036em; }
.section-more { margin-top: clamp(40px, 5vw, 60px); }

/* Pricing: three plan cards (Plus on the night colors), the pack size switch (CSS :has, no script), the
   "Find your fit" estimate (pricing.js; hidden without JavaScript), then the shared spec list and FAQ. */
.pricing-hero { padding: clamp(40px, 6vw, 96px) 0 clamp(64px, 8vw, 110px); }
.pricing-head { max-width: 860px; margin-inline: auto; text-align: center; }
.pricing-head .section-lede { margin-inline: auto; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); column-gap: var(--space-5); align-items: stretch; max-width: 1120px; margin-inline: auto; }
/* Each card spans the same five rows (name, price, credits, button, list), so prices and buttons line up. */
.plan { position: relative; display: grid; grid-row: span 5; grid-template-rows: subgrid; align-content: start; gap: var(--space-6); padding: 32px 32px 32px; border: 1px solid var(--line); border-radius: 24px; background: var(--white); box-shadow: var(--shadow-card); }
.plan-top { display: grid; align-content: start; gap: var(--space-2); }
.plan-top .pack-switch { margin-top: var(--space-3); }
.plan-name { font: 500 14px/1 var(--sans); }
.plan-tag { font-size: 15.5px; line-height: var(--lh-ui); color: var(--muted); }
.plan-price { display: flex; flex-wrap: wrap; align-content: flex-end; align-items: baseline; gap: var(--space-2) var(--space-3); min-height: 60px; }
/* Plus at the beta price: a small line above it with the list price struck through and the code that gives it. */
.plan-offer { display: flex; flex-basis: 100%; align-items: center; gap: var(--space-3); }
.plan-was { font: 400 20px/1 var(--serif); color: var(--muted); text-decoration-thickness: 1.5px; }
.plan-code { padding: 4px 12px; border-radius: 999px; background: var(--accent); color: #fff; font: 500 12px/var(--lh-heading) var(--sans); white-space: nowrap; }
.plan-amount { font: 400 60px/1 var(--serif); letter-spacing: -.04em; font-variant-numeric: lining-nums; }
.plan-per { font-size: 15px; color: var(--muted); }
.plan-per { white-space: nowrap; }
.plan-yearly { margin: -6px 0 0; font-size: 14.5px; color: var(--muted); }
.plan-yearly .plan-amount { font: inherit; font-weight: 600; letter-spacing: 0; color: var(--ink, inherit); }
.plan-featured .plan-yearly { color: var(--on-night-muted); }
.plan-featured .plan-yearly .plan-amount { color: inherit; }
.plan-credits { display: grid; align-content: center; gap: var(--space-1); padding: 16px 20px; border-radius: 16px; background: var(--paper-deep); }
.plan-credits strong { font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; }
.plan-credits span { font-size: 14.5px; color: var(--muted); }
.plan-cta { width: 100%; }
.plan-list { display: grid; align-content: start; gap: var(--space-3); padding-top: 24px; border-top: 1px solid var(--line); }
.plan-list li { display: flex; gap: var(--space-3); font-size: 15px; line-height: var(--lh-ui); }
.plan-list .icon { width: 18px; height: 18px; margin-top: 1px; color: var(--accent); stroke-width: 2; }
.plan-badge { position: absolute; top: -13px; left: 28px; padding: 8px 12px; border-radius: 999px; background: var(--accent); color: #fff; font: 500 13px/1 var(--sans); }
.plan-featured { border-color: transparent; background: var(--night); color: var(--on-night); box-shadow: 0 30px 70px -34px rgba(23, 26, 22, .65); }
.plan-featured .plan-tag, .plan-featured .plan-per, .plan-featured .plan-was, .plan-featured .plan-credits span { color: var(--on-night-muted); }
.plan-featured .plan-credits { background: var(--night-raise); }
.plan-featured .plan-list { border-color: var(--night-line); }
.plan-featured .plan-list .icon { color: var(--accent-night); }
.btn-light { background: var(--on-night); color: var(--night); }
.btn-light:hover { background: #fff; transform: translateY(-1px); }
.pack-switch { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1); margin: 0; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper-deep); }
.pack-switch label { position: relative; }
.pack-switch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.pack-switch span { display: block; padding: 8px 12px; border-radius: 999px; font-size: 14px; font-weight: 500; text-align: center; color: var(--muted); transition: background-color .2s, color .2s; }
.pack-switch input:checked + span { background: var(--white); color: var(--ink); box-shadow: 0 1px 2px rgba(36, 40, 34, .12); }
.pack-switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.plan-pack [data-pack="1000"], .plan-pack:has(input[value="1000"]:checked) [data-pack="200"] { display: none; }
.plan-pack:has(input[value="1000"]:checked) [data-pack="1000"] { display: flex; }
.plan-pack:has(input[value="1000"]:checked) .plan-credits[data-pack="1000"] { display: grid; }
.plans-note { max-width: 46em; margin: var(--space-7) auto 0; font-size: 14px; line-height: var(--lh-body); text-align: center; color: var(--muted); }
html:not(.js) .fit-section { display: none; }
.fit { max-width: 860px; }
.fit .section-head { margin-inline: auto; margin-bottom: var(--space-8); text-align: center; }
.fit h2, .pricing-split h2 { font-size: clamp(36px, 4.4vw, 60px); }
.fit-section { padding: clamp(64px, 8vw, 110px) 0; }
.fit-card { display: grid; gap: var(--space-6); padding: clamp(26px, 4vw, 40px); border: 1px solid var(--line); border-radius: 24px; background: var(--white); box-shadow: var(--shadow-card); }
.fit-label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-5); font-size: 16px; font-weight: 500; }
.fit-label output { font-family: var(--mono); font-size: 15px; color: var(--accent); }
.fit-card input[type=range] { --fill: 15%; width: 100%; height: 6px; margin: var(--space-1) 0; border-radius: 999px; background: linear-gradient(to right, var(--accent) var(--fill), var(--line) var(--fill)); accent-color: var(--accent); -webkit-appearance: none; appearance: none; cursor: pointer; }
.fit-card input[type=range]::-webkit-slider-thumb { width: 22px; height: 22px; border: 3px solid var(--white); border-radius: 50%; background: var(--accent); box-shadow: 0 1px 4px rgba(36, 40, 34, .3); -webkit-appearance: none; appearance: none; }
.fit-card input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border: 3px solid var(--white); border-radius: 50%; background: var(--accent); box-shadow: 0 1px 4px rgba(36, 40, 34, .3); }
.fit-result { display: grid; gap: var(--space-2); padding: 24px 24px; border-radius: 18px; background: var(--paper-deep); }
.fit-credits { font: 500 14px/var(--lh-snug) var(--sans); color: var(--muted); }
.fit-pick { font: 400 clamp(28px, 3.6vw, 40px)/1.1 var(--serif); letter-spacing: -.025em; }
.fit-why { font-size: 15.5px; color: var(--muted); }
.fit-note { font-size: 14px; color: var(--muted); }
@media (max-width: 960px) {
  .plans { grid-template-columns: minmax(0, 520px); grid-template-rows: none; justify-content: center; gap: var(--space-7); }
  .plan { grid-row: auto; grid-template-rows: none; }
}

/* Not found: one bar of rest on a five-line staff, between two bar lines. */
.not-found { padding: clamp(64px, 10vw, 140px) 0 clamp(88px, 11vw, 150px); text-align: center; }
.not-found-inner { display: grid; justify-items: center; }
.rest-staff { position: relative; width: min(420px, 80%); height: 73px; margin-bottom: clamp(40px, 5vw, 64px); background: repeating-linear-gradient(to bottom, var(--line-strong) 0 1px, transparent 1px 18px); border-inline: 2px solid var(--line-strong); }
.rest { position: absolute; top: 18px; left: 50%; width: 30px; height: 10px; margin-left: -15px; background: var(--ink); }
.not-found h1 { margin-top: var(--space-6); font-size: clamp(48px, 7.6vw, 112px); line-height: .96; letter-spacing: -.045em; }
.not-found .section-lede { margin-inline: auto; }
.not-found-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-8); }

/* Blog: the index, articles and their prose (pages generated by publish.py) */
.site-nav a[aria-current="true"] { color: var(--ink); }
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.post-card { position: relative; display: flex; flex-direction: column; gap: var(--space-4); padding: 24px 24px 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--white); transition: border-color .2s, transform .3s var(--ease), box-shadow .3s; }
.post-card:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.post-card:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
.post-card-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-4); font: 500 13px/var(--lh-snug) var(--sans); color: var(--muted); }
.post-card-meta span { color: var(--accent); }
.post-card-title { font: 400 26px/var(--lh-heading) var(--serif); letter-spacing: -.015em; text-wrap: balance; }
.post-card-title a { color: var(--ink); text-decoration: none; }
.post-card-title a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.post-card-title a:focus-visible { outline: none; }
.post-card-text { flex: 1; font-size: 15.5px; line-height: var(--lh-body); color: var(--muted); }
.post-card-more { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 14px; font-weight: 500; color: var(--ink); }
.post-card-more .icon { width: 16px; height: 16px; color: var(--accent); transition: transform .3s var(--ease); }
.post-card:hover .post-card-more .icon { transform: translateX(3px); }
.feed-link { margin-top: var(--space-8); font-size: 15px; color: var(--muted); }
.post-filter { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-7); }
.post-filter button { display: inline-flex; align-items: center; gap: var(--space-2); height: 38px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; font: 500 14px/1 var(--sans); color: var(--ink-soft); cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.post-filter button:hover { border-color: var(--ink); color: var(--ink); }
.post-filter button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.post-filter small { font: 500 11.5px/1 var(--mono); color: var(--soft); }
.post-filter button[aria-pressed="true"] small { color: inherit; opacity: .65; }
.post-head { padding: clamp(36px, 5vw, 76px) 0 clamp(30px, 4vw, 52px); border-bottom: 1px solid var(--line); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font: 500 13.5px/1 var(--sans); color: var(--muted); }
.crumbs a { color: var(--accent); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.post-title { max-width: 21ch; margin-top: var(--space-6); font-size: clamp(40px, 5.4vw, 74px); line-height: 1.02; letter-spacing: -.038em; }
.post-dek { max-width: 40em; margin-top: var(--space-6); font-size: clamp(18px, 1.6vw, 20.5px); line-height: var(--lh-ui); color: var(--muted); }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-7); font-size: 14.5px; color: var(--muted); }
.post-meta a { font-weight: 500; color: var(--ink); text-decoration: none; }
.post-meta a:hover { color: var(--accent); }
.post-layout { display: grid; grid-template-columns: minmax(0, 720px) minmax(0, 250px); justify-content: space-between; gap: clamp(40px, 6vw, 96px); align-items: start; padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(80px, 10vw, 140px); }
.toc { grid-column: 2; grid-row: 1; position: sticky; top: 104px; padding-left: 20px; border-left: 1px solid var(--line); }
.toc-title { font: 500 13px/1 var(--sans); color: var(--muted); }
.toc ol { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.toc a { display: block; font-size: 14px; line-height: var(--lh-snug); color: var(--ink-soft); text-decoration: none; }
.toc a:hover { color: var(--accent); }
.toc a { position: relative; transition: color .2s; }
.toc a[aria-current] { color: var(--ink); }
.toc a[aria-current]::before { content: ''; position: absolute; top: 1px; bottom: 1px; left: -21px; width: 2px; border-radius: 2px; background: var(--accent); }
.prose { grid-column: 1; grid-row: 1; min-width: 0; font-size: 18px; line-height: var(--lh-body); color: var(--ink-soft); }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { margin-top: 2.1em; font-size: clamp(29px, 3vw, 38px); line-height: 1.12; letter-spacing: -.022em; color: var(--ink); scroll-margin-top: 96px; }
.prose h3 { margin-top: 1.8em; font-size: 20px; line-height: var(--lh-snug); color: var(--ink); }
.prose h2 + *, .prose h3 + * { margin-top: .7em; }
/* Addresses, media types and file names are long words: they wrap instead of widening the page. */
.post-title, .prose { overflow-wrap: break-word; }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color .2s; }
.prose a:hover { text-decoration-color: var(--accent); }
.prose strong { font-weight: 600; color: var(--ink); }
.prose em { color: inherit; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li, .prose li > ul, .prose li > ol { margin-top: .45em; }
.prose li::marker { color: var(--soft); }
.prose code { padding: .12em .38em; border-radius: 6px; background: var(--paper-deep); font: .86em var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.prose pre { overflow-x: auto; padding: 20px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--sheet); font: 14px/var(--lh-body) var(--mono); }
.prose pre code { padding: 0; background: none; font-size: inherit; overflow-wrap: normal; }
.pre-copy { position: relative; }
.pre-copy .copy { position: absolute; top: 8px; right: 8px; background: var(--sheet); }
.copy-inline-text { height: 24px; margin-left: var(--space-2); padding: 0 8px; vertical-align: baseline; font-size: 12px; }
.pre-copy pre { padding-right: 64px; }
.prose blockquote { margin: 1.6em 0 0; padding: 4px 0 4px 24px; }
.prose blockquote p { font: italic 400 clamp(21px, 2vw, 24px)/1.45 var(--serif); letter-spacing: -.005em; color: var(--ink); }
.prose figure { margin-top: 2em; }
.prose figcaption { margin-top: var(--space-3); font-size: 14px; line-height: var(--lh-ui); color: var(--muted); }
.prose hr { margin: 2.4em 0; border: 0; border-top: 1px solid var(--line); }
.prose .answer { padding: 24px 24px; border: 1px solid var(--line-strong); border-radius: 18px; background: var(--white); }
.prose .answer > * + * { margin-top: .8em; }
.prose .answer h2 { margin: 0; font: 500 13.5px/var(--lh-heading) var(--sans); color: var(--accent); }
.prose .note { padding: 20px 24px; border-left: 2px solid var(--sage); border-radius: 0 12px 12px 0; background: var(--sheet); font-size: 16.5px; }
.prose .table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.prose table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 15.5px; line-height: var(--lh-ui); }
/* Tables of up to three columns fit a phone; wider ones scroll inside .table-scroll. */
.prose table:not(:has(tr > :nth-child(4))) { min-width: 0; }
.prose caption { padding: 16px 20px 8px; caption-side: top; text-align: left; font: 500 13px/var(--lh-ui) var(--sans); color: var(--muted); }
.prose th, .prose td { padding: 12px 20px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose thead th { border-top: 0; font-weight: 600; color: var(--ink); }
.prose tbody th { font-weight: 500; color: var(--ink); }
.prose .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.prose .sources { font-size: 15.5px; line-height: var(--lh-body); }
.prose .sources li { overflow-wrap: anywhere; }
/* Bar charts in posts: one series in the accent on a hairline track, labels and values in ink. The table
   after each chart carries the same numbers for screen readers. */
.prose .bars-figure { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-7) var(--space-9); padding: 24px 24px 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.prose .bars-figure figcaption { grid-column: 1 / -1; margin-top: 0; }
.bars-figure .bars:only-of-type { grid-column: 1 / -1; }
.bars-title { margin-bottom: var(--space-4); font: 600 14.5px/var(--lh-snug) var(--sans); color: var(--ink); }
.bars-title span { display: block; font-weight: 400; color: var(--muted); }
.bar-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 46px; align-items: center; gap: var(--space-3); font: 400 14px/var(--lh-snug) var(--sans); color: var(--ink-soft); }
.bars-wide .bar-row { grid-template-columns: 96px minmax(0, 1fr) 46px; }
.bar-row + .bar-row { margin-top: var(--space-3); }
.bar-row b { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.bar { display: block; width: 100%; height: 10px; fill: var(--accent); }
.bar .bar-track { fill: var(--line); }
/* Step flows in posts: numbered cards in a row, a column on phones. */
.prose .flow-steps { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: var(--space-6); padding: 0; list-style: none; counter-reset: step; }
.prose .flow-steps li { position: relative; display: grid; align-content: start; gap: var(--space-2); margin: 0; padding: 16px 16px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); font: 400 14.5px/var(--lh-ui) var(--sans); color: var(--ink-soft); counter-increment: step; }
.flow-steps li::before { content: counter(step); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-tint); font: 600 12.5px/1 var(--sans); color: var(--accent); }
.flow-steps li:not(:last-child)::after { content: ''; position: absolute; top: 50%; right: -16px; width: 9px; height: 9px; border-top: 1.5px solid var(--line-strong); border-right: 1.5px solid var(--line-strong); transform: translateY(-50%) rotate(45deg); }
.flow-steps b { font-weight: 600; color: var(--ink); }
/* Timelines in posts: dates on the left, a dotted rail, one short entry each. */
.prose .timeline { padding: 0; list-style: none; }
.prose .timeline li { position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: var(--space-7); margin: 0; padding-bottom: 20px; }
.timeline li::before { content: ''; position: absolute; top: 9px; left: 102px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.timeline li:not(:last-child)::after { content: ''; position: absolute; top: 24px; bottom: 2px; left: 106px; width: 1px; background: var(--line-strong); }
.timeline time { font: 500 13.5px/var(--lh-body) var(--sans); font-variant-numeric: tabular-nums; color: var(--muted); }
.timeline p { font-size: 16.5px; line-height: var(--lh-body); }
/* Small diagrams in posts: 320 units wide, shown near 1:1 so their labels stay readable on a phone. */
.prose .diagram svg { display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto; }
.prose .diagram figcaption { text-align: center; }
.diagram .d-frame { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.diagram .d-box { fill: var(--white); stroke: var(--line-strong); }
.diagram .d-shade { fill: var(--paper-deep); stroke: none; }
.diagram .d-line { fill: none; stroke: var(--line-strong); }
.diagram .d-dash { stroke-dasharray: 4 3; }
/* After the shapes, so any of them can take the accent. */
.diagram .d-accent { stroke: var(--accent); }
.diagram .d-box.d-accent { fill: var(--accent-tint); }
.diagram .d-text { font: 500 13px var(--sans); fill: var(--ink); }
.diagram .d-small { font: 400 11.5px var(--sans); fill: var(--muted); }
.diagram .d-mark { fill: var(--accent); }
.post-faq .faq-list { margin-top: 1em; }
.post-faq .faq-list summary { padding: 20px 0; font-size: 20px; }
.post-faq .faq-list details p { padding-right: 0; font-size: 16.5px; }
.related { padding: clamp(64px, 8vw, 110px) 0; border-top: 1px solid var(--line); background: var(--paper-deep); }
.related-title { margin-bottom: var(--space-8); font-size: clamp(34px, 4vw, 52px); line-height: 1.05; letter-spacing: -.03em; }

/* Connection guide (connect.html) */
.connect-hero { padding: clamp(36px, 5vw, 72px) 0 clamp(80px, 10vw, 136px); text-align: center; }
.lockup { display: flex; align-items: center; justify-content: center; gap: var(--space-4); }
.lockup-link { position: relative; width: 84px; height: 2px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 5px, transparent 5px 10px); }
.lockup-link i { position: absolute; top: 50%; left: calc(50% - 4.5px); width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 0 4px rgba(79, 116, 87, .16); animation: travel 2.8s var(--ease) infinite; }
.tile { --size: 72px; display: grid; place-items: center; width: var(--size); height: var(--size); flex: none; border-radius: calc(var(--size) * .28); box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 2px 4px -1px rgba(36, 40, 34, .22), 0 18px 30px -18px rgba(36, 40, 34, .55); }
.tile svg { width: 56%; height: 56%; }
.tile img { width: 76%; height: 76%; }
.tile-starling, .tile-codex, .tile-vscode { border: 1px solid var(--line); background: var(--white); }
.tile-codex svg { width: 80%; height: 80%; }
.tile-claude { background: #d97757; color: #fff; }
.tile-openai, .tile-cursor { background: #0d0d0d; color: #fff; }
.tile-mcp { background: var(--ink); color: var(--paper); }
.connect-title { margin-top: clamp(28px, 3.6vw, 44px); font-size: clamp(40px, 6.4vw, 92px); line-height: 1.04; letter-spacing: -.04em; }
.connect-title .line { display: block; }
.connect-title em { padding-right: .04em; color: var(--ink); }
.client-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: clamp(36px, 4.4vw, 56px); }
.client-tabs a { display: inline-flex; align-items: center; gap: var(--space-2); height: 42px; padding: 0 16px 0 16px; border: 1px solid transparent; border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--ink-soft); text-decoration: none; white-space: nowrap; transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s; }
.client-tabs a:hover { background: rgba(255, 255, 255, .75); color: var(--ink); }
.client-tabs a[aria-current="true"] { border-color: var(--line); background: var(--white); color: var(--ink); box-shadow: 0 1px 2px rgba(36, 40, 34, .06), 0 12px 24px -18px rgba(36, 40, 34, .45); }
.logo { width: 20px; height: 20px; flex: none; color: var(--ink); }
.logo-claude { color: #d97757; }
.route-lead { max-width: 760px; margin: var(--space-6) auto 0; }
.route-lede { max-width: 34em; margin-inline: auto; text-wrap: balance; font-size: clamp(17px, 1.4vw, 19.5px); line-height: var(--lh-body); color: var(--ink-soft); }
.route-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-7); }
.btn .logo { width: 20px; height: 20px; color: currentColor; }
.btn-claude { background: #d97757; color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 12px 24px -12px rgba(217, 119, 87, .9); }
.btn-claude:hover { background: #c96442; transform: translateY(-1px); }
.btn-openai, .btn-cursor { background: #0d0d0d; color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 12px 24px -12px rgba(0, 0, 0, .7); }
.btn-openai:hover, .btn-cursor:hover { background: #2a2a2a; transform: translateY(-1px); }
.btn-vscode { background: #0065a9; color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 12px 24px -12px rgba(0, 101, 169, .85); }
.btn-vscode:hover { background: #007acc; transform: translateY(-1px); }
.copy-cta.is-copied { background: var(--sage); }
.route-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2) var(--space-5); margin-top: var(--space-6); font-size: 14px; color: var(--muted); }
.route-meta code { font: 500 14px/var(--lh-snug) var(--mono); color: var(--ink-soft); }
.route-meta .copy { margin-left: -8px; }
.command { max-width: 900px; margin: var(--space-7) auto 0; text-align: left; }
.copy { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 34px; flex: none; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--white); font: 500 13px/1 var(--sans); color: var(--ink); white-space: nowrap; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.copy .icon { width: 15px; height: 15px; }
.copy:hover { border-color: var(--ink); }
.copy.is-copied { border-color: #d3e0cf; background: #edf3ea; color: var(--sage); }
.copy-quiet { height: 30px; padding: 0 12px; border-color: var(--line); background: transparent; font-size: 12.5px; }
.copy-inline { width: 26px; height: 26px; margin-left: var(--space-1); padding: 0; vertical-align: middle; }
.copy-inline .icon { width: 13px; height: 13px; }
.copy-toast { position: fixed; left: 50%; bottom: 24px; z-index: 60; width: max-content; max-width: calc(100vw - 32px); padding: 12px 20px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 14.5px; line-height: var(--lh-snug); box-shadow: 0 18px 40px -18px rgba(36, 40, 34, .65); transform: translateX(-50%); transition: opacity .25s, transform .35s var(--ease); }
.copy-toast:empty { opacity: 0; transform: translate(-50%, 12px); pointer-events: none; }
.code { overflow: hidden; border-radius: 16px; background: var(--night); color: var(--on-night); box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 20px 40px -28px rgba(0, 0, 0, .7); }
.code-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 48px; padding: 8px 8px 8px 20px; border-bottom: 1px solid var(--night-line); font: 500 12.5px/1 var(--mono); color: var(--on-night-muted); }
.code pre { margin: 0; padding: 20px 20px 20px; font: 400 14px/var(--lh-body) var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.code .prompt { color: var(--on-night-muted); user-select: none; }
.code .copy { height: 32px; border-color: var(--night-line); background: rgba(240, 236, 226, .06); color: var(--on-night); }
.code .copy:hover { border-color: rgba(240, 236, 226, .4); }
.code .copy.is-copied { border-color: rgba(127, 182, 138, .4); background: rgba(127, 182, 138, .14); color: #9fd0a8; }
.code :focus-visible { outline-color: var(--accent-night); }
.code ::selection { background: rgba(229, 131, 106, .35); color: var(--on-night); }
.steps-card { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: center; margin-top: clamp(64px, 8vw, 104px); padding: clamp(28px, 4.4vw, 60px); border: 1px solid var(--line); border-radius: 28px; background: var(--white); box-shadow: var(--shadow-card); text-align: left; scroll-margin-top: 96px; }
.method { font: 500 13px/1 var(--sans); color: var(--accent); }
.steps-card h2 { margin-top: var(--space-4); font-size: clamp(30px, 3.2vw, 44px); line-height: 1.08; letter-spacing: -.028em; }
.big-steps { margin-top: var(--space-7); counter-reset: step; }
.big-steps li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--space-2); padding: 20px 0; border-top: 1px solid var(--line); font-size: 16px; line-height: var(--lh-body); color: var(--muted); counter-increment: step; }
.big-steps li::before { content: counter(step, upper-roman); font: italic 400 26px/1.1 var(--serif); color: var(--accent); }
.big-steps strong { font-weight: 600; color: var(--ink); }
.big-steps em { padding: 1px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--sheet); font-style: normal; font-weight: 500; color: var(--ink); white-space: nowrap; }
.steps-card :not(pre) > code, .more-clients :not(pre) > code { padding: 2px 8px; border-radius: 6px; background: var(--paper-deep); font: 500 .86em/var(--lh-snug) var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.steps-next { margin-bottom: var(--space-5); padding: 16px 20px; border-radius: 14px; background: var(--sheet); font-size: 15px; line-height: var(--lh-body); color: var(--ink-soft); }
.steps-next strong { font-weight: 600; color: var(--ink); }
.steps-note { padding-top: 20px; border-top: 1px solid var(--line); font-size: 14.5px; line-height: var(--lh-body); color: var(--muted); }
p.sources { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-5); margin-top: var(--space-6); padding-top: 20px; border-top: 1px solid var(--line); font: 500 12px/var(--lh-ui) var(--mono); letter-spacing: .02em; color: var(--muted); }
.steps-note + p.sources { margin-top: var(--space-5); }
p.sources a { color: var(--ink-soft); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
p.sources a:hover { text-decoration-color: var(--accent); }
.mock, .terminal { margin: 0; }
.mock-window { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--sheet); box-shadow: 0 1px 2px rgba(36, 40, 34, .05), 0 24px 44px -30px rgba(36, 40, 34, .45); }
.mock-bar { display: flex; align-items: center; gap: var(--space-2); padding: 12px 16px; border-bottom: 1px solid var(--line); background: linear-gradient(#fefefd, #f9f8f6); font-size: 13.5px; font-weight: 500; color: var(--ink-soft); }
.mock-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.mock-bar span { margin-left: var(--space-2); }
.mock-fields { display: grid; gap: var(--space-4); padding: 24px 24px 24px; }
.mock-fields dt { margin-bottom: var(--space-2); font: 500 12.5px/var(--lh-snug) var(--sans); color: var(--muted); }
.mock-fields dd { padding: 12px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--white); font-size: 15px; font-weight: 500; line-height: var(--lh-snug); color: var(--ink); overflow-wrap: anywhere; }
.mock-fields dd.choice { display: inline-flex; align-items: center; gap: var(--space-2); border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink) inset; }
.mock-fields dd.choice::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.mock figcaption, .terminal figcaption { margin-top: var(--space-4); font: italic 400 15.5px/var(--lh-ui) var(--serif); color: var(--muted); text-align: center; }
.steps-card-other { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); align-items: start; }
/* Step-by-step walkthroughs: each step beside a drawn picture of the screen it happens on. */
.walk-card { margin-top: clamp(64px, 8vw, 104px); padding: clamp(28px, 4.4vw, 60px); border: 1px solid var(--line); border-radius: 28px; background: var(--white); box-shadow: var(--shadow-card); text-align: left; scroll-margin-top: 96px; animation: appear .7s var(--ease) .18s both; }
.walk-card h2 { margin-top: var(--space-4); font-size: clamp(30px, 3.2vw, 44px); line-height: 1.08; letter-spacing: -.028em; }
.walk-head { display: grid; gap: 0 clamp(32px, 5vw, 72px); padding-bottom: 8px; }
.walk-needs { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-top: var(--space-5); font-size: 15px; color: var(--ink-soft); }
.walk-needs li { display: inline-flex; align-items: center; gap: var(--space-2); }
.walk-needs .icon { width: 17px; height: 17px; stroke: var(--accent); }
.walk-compare { width: 100%; max-width: 640px; margin-top: var(--space-6); border-collapse: collapse; font-size: 14.5px; line-height: var(--lh-ui); }
.walk-compare th, .walk-compare td { padding: 12px 16px 12px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.walk-compare thead th { border-top: 0; font: 450 19px/var(--lh-heading) var(--serif); color: var(--ink); }
.walk-compare tbody th { font-weight: 500; color: var(--muted); }
.walk-compare td { color: var(--ink-soft); }
.walk-title { display: flex; align-items: baseline; gap: var(--space-3); margin-top: var(--space-9); font: 450 clamp(24px, 2.4vw, 30px)/1.15 var(--serif); letter-spacing: -.015em; scroll-margin-top: 96px; }
.walk-title span { padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; font: 500 12px/var(--lh-body) var(--sans); color: var(--accent); }
.walk { margin-top: var(--space-5); counter-reset: walk; }
.walk-step { display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(0, .92fr); gap: 8px clamp(24px, 3.6vw, 48px); align-items: start; padding: 24px 0; border-top: 1px solid var(--line); counter-increment: walk; }
.walk-step::before { content: counter(walk); align-self: start; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); font: 600 15px/1 var(--sans); color: var(--white); }
.walk-text { padding-top: 8px; }
.walk-text h3 { font-size: 18px; font-weight: 600; line-height: var(--lh-snug); letter-spacing: -.01em; }
.walk-text p { margin-top: var(--space-2); font-size: 15.5px; line-height: var(--lh-body); color: var(--muted); }
.walk-text em, .walk-card .steps-note em { padding: 1px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--sheet); font-style: normal; font-weight: 500; color: var(--ink); }
.walk-text .code { margin-top: var(--space-4); }
.walk-text :not(pre) > code, .walk-card .steps-note code { padding: 2px 8px; border-radius: 6px; background: var(--paper-deep); font: 500 .86em/var(--lh-snug) var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.walk-text p.walk-alt { font-size: 14.5px; }
.walk-card .steps-next { margin-top: var(--space-2); }
.shot { margin: 0; }
.shot-win { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--sheet); box-shadow: 0 1px 2px rgba(36, 40, 34, .05), 0 20px 36px -28px rgba(36, 40, 34, .45); font-size: 13.5px; line-height: var(--lh-snug); color: var(--ink-soft); user-select: none; }
.shot-bar { display: flex; align-items: center; gap: var(--space-2); padding: 12px 12px; border-bottom: 1px solid var(--line); background: linear-gradient(#fefefd, #f9f8f6); font: 500 12px/var(--lh-heading) var(--mono); color: var(--muted); }
.shot-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.shot-bar span { margin-left: var(--space-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shot-body { display: grid; gap: var(--space-3); padding: 16px; }
.shot-body.shot-tight { padding-top: 0; }
.shot-center { justify-items: center; text-align: center; }
.shot-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.shot-row strong, .shot-center strong { font-size: 15px; color: var(--ink); }
.shot-text { color: var(--muted); }
.shot-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--white); font-weight: 500; color: var(--ink); white-space: nowrap; }
.shot-btn.shot-icon { padding: 0; font-size: 17px; }
.shot-btn.shot-primary { border-color: var(--ink); background: var(--ink); color: var(--white); }
.shot-menu { display: grid; justify-self: end; min-width: 70%; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.shot-menu span { padding: 8px 12px; border-radius: 8px; }
.shot-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }
.shot-center .shot-actions { justify-content: center; }
.shot-check, .shot-radio { display: flex; align-items: center; gap: var(--space-2); padding: 8px 12px; border-radius: 9px; color: var(--ink); }
.shot-check i { width: 15px; height: 15px; border-radius: 4px; background: var(--ink); box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 5px var(--white); }
.shot-radio i { width: 15px; height: 15px; border: 1.5px solid var(--line-strong); border-radius: 50%; }
.shot-radio.on i { border: 4.5px solid var(--ink); }
.shot-form { display: grid; gap: var(--space-3); padding: 16px; }
.shot-form dt { margin-bottom: var(--space-1); font-size: 11.5px; font-weight: 500; color: var(--muted); }
.shot-form dd { padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--white); font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.shot-form dd.has-copy { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.shot-form .val { min-width: 0; user-select: all; }
.shot-form .copy { height: 28px; padding: 0 12px; font-size: 12px; }
.shot-form dd.choice { display: inline-flex; align-items: center; gap: var(--space-2); border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink) inset; }
.shot-form dd.choice::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.shot-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--white); }
.shot-item span:not(.shot-btn) { display: grid; color: var(--muted); font-size: 12.5px; }
.shot-item strong { font-size: 13.5px; color: var(--ink); }
.shot-tabs { display: flex; gap: var(--space-4); border-bottom: 1px solid var(--line); }
.shot-tabs span { padding: 0 0 8px; color: var(--muted); }
.shot-tabs .on { box-shadow: inset 0 -2px 0 var(--ink); color: var(--ink); font-weight: 500; }
.shot-pop { display: grid; justify-self: start; min-width: 62%; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.shot-pop span { padding: 8px 12px; border-radius: 8px; }
.shot-toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); color: var(--ink); }
.shot-toggle i { flex: none; width: 28px; height: 16px; border-radius: 999px; background: radial-gradient(circle at 20px 8px, var(--white) 5px, transparent 5.5px), var(--ink); }
.shot-compose { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: 12px 12px; border: 1px solid var(--line-strong); border-radius: 18px; background: var(--white); color: var(--ink); }
.shot-chip { padding: 3px 8px; border-radius: 7px; background: var(--paper-deep); font: 500 12px/var(--lh-snug) var(--mono); }
.shot .hl { position: relative; box-shadow: 0 0 0 2px var(--accent); }
.shot .hl::after { content: ''; position: absolute; inset: -6px; border-radius: inherit; box-shadow: 0 0 0 2px var(--accent); opacity: 0; animation: ping 2.4s var(--ease) infinite; pointer-events: none; }
.shot-menu .hl, .shot-pop .hl, .shot-check.hl, .shot-radio.hl { background: var(--sheet); }
.shot figcaption { margin-top: var(--space-3); font: italic 400 14.5px/var(--lh-ui) var(--serif); color: var(--muted); text-align: center; }
@keyframes ping { 0% { opacity: .7; transform: scale(.96); } 70%, 100% { opacity: 0; transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .shot .hl::after { animation: none; } .walk-card { animation: none; } }
/* WorkBuddy route (mcp.html#workbuddy). Its drawings follow Tencent's screenshots of WorkBuddy's Chinese app:
   the MCP list marks each server with its first letter, and the mcp.json editor shows the entry being added. */
.shot-avatar { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #4c7df0; font: 600 12px/1 var(--sans); color: #fff; }
.shot-code { margin: 0; padding: 12px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--white); font: 500 11.5px/var(--lh-body) var(--mono); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
/* Chinese text may break between any two characters, which split a label's chip across two lines on a phone
   (自定义连接 | 器). WorkBuddy's labels and the route's chips in the Chinese editions stay whole; none is long. */
#workbuddy .walk-text [lang="zh-Hans"], #workbuddy .walk-text em:lang(zh) { white-space: nowrap; }
/* End of the WorkBuddy route. */
.more-clients { margin-top: var(--space-6); }
.more-clients > li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--space-5); padding: 24px 0; border-top: 1px solid var(--line); }
.more-clients h3 { margin-top: var(--space-2); font: 450 24px/var(--lh-heading) var(--serif); letter-spacing: -.015em; }
.more-clients .code { margin-top: var(--space-4); }
.more-clients p { margin-top: var(--space-4); font-size: 15px; line-height: var(--lh-body); color: var(--muted); }
.mini-tile { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 13px; background: var(--white); box-shadow: 0 8px 18px -14px rgba(36, 40, 34, .5); }
.mini-tile .logo { width: 26px; height: 26px; }
.requirements { position: sticky; top: 104px; padding: 32px 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--sheet); }
.requirements h3 { margin-top: var(--space-4); font: 450 24px/var(--lh-heading) var(--serif); letter-spacing: -.015em; }
.compat { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
.compat li { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: var(--space-3); font-size: 15px; line-height: var(--lh-ui); color: var(--muted); }
.compat .icon { width: 32px; height: 32px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); }
.compat .yes .icon { color: var(--sage); }
.compat .no .icon { color: var(--accent); }
.compat strong { font-weight: 600; color: var(--ink); }
/* Example prompts: each card aligns its parts with its row through subgrid, so prompts and results line up. */
.asks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.ask { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: var(--space-5); padding: 24px 24px 24px; border: 1px solid var(--night-line); border-radius: 22px; background: var(--night-raise); }
@supports not (grid-template-rows: subgrid) {
  .ask { display: flex; flex-direction: column; grid-row: auto; }
  .ask-result { flex: 1; }
}
.ask-head { display: grid; align-content: start; gap: var(--space-3); }
.ask-kind { display: inline-flex; align-items: center; gap: var(--space-2); font: 500 13px/1 var(--sans); color: var(--on-night-muted); }
.ask-kind .icon { width: 18px; height: 18px; color: var(--accent-night); }
.ask-use { font-size: 15.5px; font-weight: 500; line-height: var(--lh-ui); color: var(--on-night); }
.ask-prompt { position: relative; display: grid; align-content: start; gap: var(--space-3); padding-right: 40px; }
.ask-prompt .copy-icon { position: absolute; top: 0; right: 0; }
.ask-prompt q { font: italic 400 21px/var(--lh-snug) var(--serif); letter-spacing: -.01em; color: var(--on-night); }
.ask-prompt .attach { justify-self: start; }
.ask-actions { display: flex; flex-wrap: wrap; align-items: center; align-self: start; gap: var(--space-2); }
.btn-mini-claude { gap: var(--space-2); border-color: transparent; background: #d97757; color: #fff; text-decoration: none; transition: background-color .2s; }
.btn-mini-claude:hover { background: #c96442; }
.btn-mini-claude .logo { width: 14px; height: 14px; color: #fff; }
.btn-mini-openai { gap: var(--space-2); border-color: transparent; background: #fff; color: #0d0d0d; text-decoration: none; transition: background-color .2s; }
.btn-mini-openai:hover { background: #e6e6e6; }
.btn-mini-openai .logo { width: 14px; height: 14px; color: #0d0d0d; }
.ask .copy { height: 32px; border-color: var(--night-line); background: transparent; color: var(--on-night); }
.ask .copy:hover { border-color: rgba(240, 236, 226, .4); }
.ask .copy.is-copied { border-color: rgba(127, 182, 138, .4); background: rgba(127, 182, 138, .14); color: #9fd0a8; }
.copy-icon { width: 32px; padding: 0; }
.ask-result { display: grid; grid-template-rows: auto 1fr; gap: var(--space-3); margin: var(--space-1) 0 0; }
.ask-label { display: flex; align-items: center; gap: var(--space-3); font: 500 12px/1 var(--sans); color: var(--on-night-muted); }
.ask-label::after { content: ''; flex: 1; height: 1px; background: var(--night-line); }
.ask .panel { display: flex; flex-direction: column; margin-top: 0; }
.ask .panel > :nth-child(2) { flex: 1; display: grid; align-content: center; }
/* The note beside a button stays on its row and wraps there, never dropping below on its own. */
.panel-meta { flex: 1 1 0; min-width: 8em; align-self: center; padding-left: 4px; font-size: 12.5px; color: var(--muted); }
.panel-note { padding: 4px 16px 16px; font-size: 13px; line-height: var(--lh-ui); color: var(--muted); }
/* The TAB card spans the row: the request beside a taller result, the staff and TAB and the text the chat gets. */
.ask-wide { display: grid; grid-column: 1 / -1; grid-row: auto; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows: auto auto 1fr; column-gap: clamp(28px, 4vw, 56px); }
.ask-wide > .ask-result { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
.btn-mini-ghost { gap: var(--space-2); border-color: var(--night-line); background: transparent; color: var(--on-night); text-decoration: none; transition: border-color .2s; }
.btn-mini-ghost:hover { border-color: rgba(240, 236, 226, .4); }
.btn-mini-ghost .icon { width: 13px; height: 13px; color: var(--accent-night); }
.panel-player { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: 24px 16px 16px; }
.player-play { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: var(--ink); color: var(--paper); cursor: pointer; transition: background-color .2s, transform .15s; }
.player-play:hover { background: #000; }
.player-play:active { transform: scale(.96); }
.player-play[aria-pressed=true] { background: var(--accent); }
.player-play[aria-pressed=true] .icon { margin-left: 0; }
.player-play .icon { width: 14px; height: 14px; margin-left: 2px; }
.player-roll { display: block; height: 54px; padding: 4px 0; border-block: 1px solid var(--line); background: linear-gradient(90deg, transparent calc(25% - 1px), var(--line) 0 25%, transparent 0 calc(50% - 1px), var(--line) 0 50%, transparent 0 calc(75% - 1px), var(--line) 0 75%, transparent 0); }
.roll-mini { width: 100%; height: 100%; overflow: visible; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; }
.roll-mini line.is-on { stroke: var(--ink); }
.player-time { font: 500 12px/1 var(--mono); color: var(--muted); }
.panel-files { display: grid; gap: var(--space-2); padding: 16px 16px 12px; }
.panel-allowance { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-4); padding: 20px 20px 12px; }
.allowance-count { font: 400 66px/.9 var(--serif); letter-spacing: -.04em; color: var(--ink); }
.allowance-text { display: grid; gap: var(--space-1); font-size: 13px; line-height: var(--lh-ui); color: var(--muted); }
.allowance-text strong { font-size: 16px; font-weight: 600; color: var(--ink); }
.section-night .link-underline { color: var(--on-night); text-decoration-color: rgba(240, 236, 226, .35); }
.section-night .link-underline:hover { text-decoration-color: var(--accent-night); }

/* Motion */
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(184, 74, 50, .35); } 100% { box-shadow: 0 0 0 16px rgba(184, 74, 50, 0); } }
@keyframes ink { from { opacity: 0; transform: translateY(-160px); } }
@keyframes swell { from { transform: scaleY(.04); opacity: 0; } }
@keyframes slide { 0% { left: 18%; } 100% { left: 82%; } }
@keyframes failsafe { to { opacity: 1; transform: none; } }
@keyframes appear { from { opacity: 0; transform: translateY(10px); } }
@keyframes travel { 0% { left: 0; opacity: 0; } 20%, 80% { opacity: 1; } 100% { left: calc(100% - 9px); opacity: 0; } }
/* The headline names the chosen client; until it is set the placeholder word stays invisible so it never shows and then changes. */
.js #hero-client:not(.is-set) { opacity: 0; animation: failsafe 0s 2.5s forwards; }
/* The first screen is simply there: nothing fades or rises in while the page loads. */
.route-switched .route-lead { animation: appear .55s var(--ease) .1s both; }
.route-switched .steps-card { animation: appear .7s var(--ease) .18s both; }
.wave-base { animation: swell 1.4s var(--ease) .7s both; }
.demo.is-inking .engraved .note { animation: ink .7s var(--ease) both; animation-delay: calc(.85s + var(--i, 0) * 45ms); }
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js:not(.js-ready) .reveal { animation: failsafe 0s 2.5s forwards; }

/* Layout breakpoints */
@media (max-width: 1100px) {
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature { padding-right: 24px; }
  .feature:not(:nth-child(3n + 1)) { padding-left: 24px; }
  .uses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editor-body { grid-template-columns: minmax(0, 1fr) 260px; }
  .site-nav { gap: var(--space-6); }
  .asks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
  .post-layout { grid-template-columns: minmax(0, 1fr); }
  .toc a[aria-current]::before { display: none; }
  .toc { grid-column: 1; grid-row: auto; position: static; padding: 20px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--sheet); }
  .prose { grid-row: auto; }
  .header-inner { grid-template-columns: 1fr auto; }
  /* The menu is a page of its own under the header, as on most product sites: it covers the page, which
     stops scrolling (site.js), lists the pages in large type and keeps the account actions within thumb
     reach at the foot. Absolute rather than fixed, so the header's backdrop filter can't move it. */
  .menu-open, .menu-open body { overflow: hidden; }
  .site-header.is-open { background: var(--paper); box-shadow: none; }
  .site-header.is-open .header-actions .btn-sm { visibility: hidden; opacity: 0; }
  .site-nav { position: absolute; top: 100%; left: 0; right: 0; height: calc(100vh - 72px); height: calc(100dvh - 72px); display: flex; flex-direction: column; gap: 0; padding: 16px var(--gutter) 32px; overflow-y: auto; overscroll-behavior: contain; background: var(--paper); visibility: hidden; opacity: 0; transition: opacity .2s var(--ease), visibility 0s linear .2s; }
  .site-header.is-open .site-nav { visibility: visible; opacity: 1; transition: opacity .25s var(--ease); }
  .site-nav a { padding: 8px 0; font: 450 36px/var(--lh-heading) var(--serif); letter-spacing: -.02em; color: var(--ink); opacity: 0; transform: translateY(12px); transition: opacity .2s var(--ease), transform .2s var(--ease), color .2s; }
  .site-header.is-open .site-nav a { opacity: 1; transform: none; transition-duration: .45s; }
  .site-header.is-open .site-nav a:nth-child(2) { transition-delay: .03s; }
  .site-header.is-open .site-nav a:nth-child(3) { transition-delay: .06s; }
  .site-header.is-open .site-nav a:nth-child(4) { transition-delay: .09s; }
  .site-header.is-open .site-nav a:nth-child(n + 5) { transition-delay: .14s; }
  .site-nav a[aria-current] { color: var(--accent); }
  .site-nav a::after { display: none; }
  /* Help, privacy and terms take the free space above the account actions at the foot. */
  .site-nav .nav-more { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-6); margin-top: auto; padding-top: 32px; }
  .site-nav .nav-more a { padding: 8px 0; font: 400 15px/var(--lh-snug) var(--sans); letter-spacing: 0; color: var(--muted); }
  .site-nav .nav-more a:hover { color: var(--ink); }
  .site-nav a.nav-signin, .site-nav a.nav-cta { display: flex; align-items: center; justify-content: center; flex: none; height: 50px; margin-top: var(--space-4); padding: 0 24px; border-radius: 999px; font: 500 16px/1 var(--sans); letter-spacing: 0; }
  .site-nav a.nav-signin { border: 1px solid var(--line-strong); color: var(--ink); }
  .site-nav a.nav-signin:not([hidden]) + a.nav-cta { margin-top: var(--space-3); }
  .site-nav a.nav-cta { border: 0; color: var(--paper); }
  .header-signin { display: none; }
  .nav-toggle { display: grid; }
  .hero-head, .agents, .split { grid-template-columns: minmax(0, 1fr); }
  .section-head-side { position: static; margin-bottom: var(--space-2); }
  .demo { --label-w: 0px; }
  .demo-bar { flex-wrap: wrap; row-gap: var(--space-3); }
  .demo-file { flex: 1 1 100%; }
  .demo-tags { margin-left: 0; }
  .demo-position { min-width: 0; margin-left: auto; }
  .demo-exports { order: 5; width: 100%; margin-left: 0; padding: 0 0 4px 4px; }
  .lane { grid-template-columns: minmax(0, 1fr); }
  .lane-label { padding: 12px 20px 0; border-right: 0; }
  .lane-score .lane-label { padding-top: 16px; }
  .movements { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
  .movement { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-8); align-content: start; }
  .movement .mini { grid-row: span 4; margin-bottom: 0; }
  .editor-body { grid-template-columns: minmax(0, 1fr); }
  .editor-canvas { border-right: 0; border-bottom: 1px solid var(--line); }
  .inspector { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps-card, .steps-card-other { grid-template-columns: minmax(0, 1fr); }
  .walk-step { grid-template-columns: 52px minmax(0, 1fr); }
  .walk-step .shot { grid-column: 2; max-width: 440px; }
  .requirements { position: static; }
}
@media (max-width: 760px) {
  .post-grid { grid-template-columns: minmax(0, 1fr); }
  .prose { font-size: 17px; }
  .prose th, .prose td { padding: 12px 16px; }
  .prose .flow-steps { grid-auto-flow: row; gap: var(--space-4); }
  .flow-steps li:not(:last-child)::after { top: auto; right: auto; bottom: -12px; left: 27px; transform: rotate(135deg); }
  .prose .timeline li { grid-template-columns: 74px minmax(0, 1fr); column-gap: var(--space-6); }
  .timeline li::before { left: 81px; }
  .timeline li:not(:last-child)::after { left: 85px; }
  .demo-tags .tag:nth-child(n + 3) { display: none; }
  .demo-status { padding-left: 20px; }
  .mix input { width: 120px; }
  .features { grid-template-columns: minmax(0, 1fr); }
  .feature, .feature:not(:nth-child(3n + 1)) { padding: 32px 0; border-left: 0; }
  .uses { grid-template-columns: minmax(0, 1fr); }
  .flow-row { gap: var(--space-1); }
  .flow-tile { padding: 12px 0 12px; font-size: 12px; letter-spacing: -.01em; }
  .flow-row .icon { width: 20px; height: 20px; }
  .movement { display: flex; }
  .movement .mini { margin-bottom: var(--space-6); }
  .spec-list > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .ask-wide { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .ask-wide > .ask-result { grid-column: 1; grid-row: auto; }
}
@media (max-width: 600px) {
  .score-variant[data-layout="wide"] { display: none; }
  .score-variant[data-layout="narrow"] { display: block; }
  .score-stage[data-view="tab"] .score-variant[data-view="tab"][data-layout="wide"], .score-stage[data-view="jianpu"] .score-variant[data-view="jianpu"][data-layout="wide"] { display: none; }
  .score-stage[data-view="tab"] .score-variant[data-view="tab"][data-layout="narrow"], .score-stage[data-view="jianpu"] .score-variant[data-view="jianpu"][data-layout="narrow"] { display: block; }
  .sheet-views { position: static; display: flex; width: max-content; margin: 0 auto var(--space-4); }
  .demo { --track-pad: 16px; border-radius: 20px; }
  .sheet { margin: var(--space-3) var(--space-3) var(--space-4); padding: 20px 16px 12px; }
  .sheet-head { grid-template-columns: 1fr; justify-items: center; gap: var(--space-1); }
  .sheet-credit { grid-row: 2; justify-self: center; text-align: center; }
  .sheet-tempo { grid-row: 3; justify-self: start; margin-top: var(--space-3); font-size: 14px; }
  .sheet:has(.score-stage[data-view="jianpu"]) .sheet-tempo { display: none; }
  .demo-transport { gap: var(--space-3) var(--space-4); padding: 16px 16px 8px; }
  .demo-time { min-width: 0; font-size: 13px; }
  .mix { order: 4; width: 100%; }
  .mix input { flex: 1; width: auto; }
  .demo-status { padding: 8px 16px 16px; }
  .hero-actions .btn { flex: 1 1 100%; }
  .editor-bar { gap: var(--space-3); padding-left: 16px; }
  .editor-version, .editor-saved { display: none; }
  .editor-canvas { padding: 24px 12px; }
  .editor-stage { padding: 20px 8px 12px; }
  .panel-actions .btn-mini { height: 30px; padding: 0 12px; }
  .panel-head { padding: 12px; }
  .panel-actions { padding: 8px 12px 12px; }
  .panel-note { padding: 4px 12px 12px; }
  /* A row of chips or small buttons stays one row on a phone: tighter chips, and the topics scroll sideways. */
  .post-filter { flex-wrap: nowrap; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow-x: auto; scrollbar-width: none; }
  .post-filter::-webkit-scrollbar { display: none; }
  .post-filter button { flex: none; padding: 0 12px; }
  /* Both "try in" buttons share one row on a phone. */
  .ask-actions :is(.btn-mini-openai, .btn-mini-claude) { padding: 0 8px; }
  .inspector { grid-template-columns: minmax(0, 1fr); }
  .chat-log { padding: 20px 16px 16px; }
  .msg-user { max-width: 92%; }
  .finale-staff img { right: 8%; width: 80px; height: 80px; top: -71px; }
  .faq-list summary { font-size: 20px; }
  .faq-list details p { padding-right: 0; }
  .client-tabs { gap: var(--space-1); }
  .client-tabs a { height: 38px; gap: var(--space-2); padding: 0 12px 0 12px; font-size: 14px; }
  .client-tabs .logo { width: 17px; height: 17px; }
  .route-actions .btn { flex: 1 1 100%; }
  .steps-card { padding: 24px 20px; border-radius: 22px; }
  .big-steps li { grid-template-columns: 40px minmax(0, 1fr); }
  .walk-card { padding: 24px 20px; border-radius: 22px; }
  .walk-step { grid-template-columns: 40px minmax(0, 1fr); }
  .walk-step::before { width: 30px; height: 30px; font-size: 13.5px; }
  .walk-step .shot { grid-column: 1 / -1; }
  .more-clients > li { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .code pre { padding: 16px; font-size: 13px; }
  .asks { grid-template-columns: minmax(0, 1fr); }
  .ask { padding: 24px 20px 20px; }
  .ask-prompt q { font-size: 20px; }
  .tile { --size: 58px; }
  .lockup { gap: var(--space-3); }
  .lockup-link { width: 56px; }
}
@media (max-width: 480px) {
  .header-actions .btn-sm { display: none; }
  /* Signed in, the header holds the language, the avatar and the menu: tighten so none of them wraps. */
  .header-inner { gap: var(--space-3); }
  .header-actions { gap: var(--space-2); }
  .lang-menu summary { padding: 0 8px; }
}
@media (max-width: 380px) {
  .brand { font-size: 19px; }
  .flow-row { gap: var(--space-1); }
  .flow-tile { font-size: 11px; }
}
@media (max-width: 340px) {
  .flow-tile { font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* The account menu's System/Light/Dark row, drawn by the app's account.js. */
.theme-switch { display: inline-flex; flex: none; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--sheet); }
.theme-option { display: grid; place-items: center; width: 32px; height: 26px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--soft); cursor: pointer; transition: background-color .15s, color .15s; }
.theme-option:hover { color: var(--ink); }
.theme-option[aria-checked=true] { background: var(--white); color: var(--ink); box-shadow: 0 1px 2px rgba(36, 40, 34, .14), 0 0 0 1px var(--line); }
.theme-option .account-icon { width: 15px; height: 15px; }
.account-theme { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 8px 4px 2px 12px; }
.account-theme-label { font-size: 14.5px; }
.account-theme .theme-switch { border: 0; background: var(--paper); }
/* Language, under the theme: a row naming the choice that opens the languages in the menu's place, with Back
   above them and a check on the chosen one. */
.account-theme + .account-language { margin-top: 0; border-top: 0; }
.account-value { margin-left: auto; font-size: 13px; color: var(--muted); white-space: nowrap; }
.account-item .account-value + .account-icon { width: 15px; height: 15px; margin-left: -4px; }
.account-back { font-weight: 600; }
.account-languages .account-back { margin-bottom: var(--space-1); border-radius: 10px 10px 0 0; box-shadow: 0 1px 0 var(--line); }
.account-languages [role=menuitemradio] .account-icon { visibility: hidden; color: var(--accent); }
.account-languages [role=menuitemradio][aria-checked=true] .account-icon { visibility: visible; }
/* theme.js marks a remembered sign-in, so "Sign in" waits for account.js instead of flashing. */
:root[data-signed-in] [data-signin] { visibility: hidden; }
.theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: none !important; }

/* Tool and comparison pages (publish.py from landing/): the hero with the starter that tools.js runs, then the
   page's prose, examples, comparison tables and related pages. */
.tool-hero { padding: clamp(36px, 5vw, 80px) 0 clamp(44px, 6vw, 84px); border-bottom: 1px solid var(--line); }
.tool-hero-grid { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
.tool-hero-input .tool-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); }
.tool-title { margin-top: var(--space-5); max-width: 16ch; font-size: clamp(44px, 6.2vw, 92px); line-height: .98; letter-spacing: -.042em; }
.tool-title em { display: block; }
.tool-hero .section-lede { margin-top: var(--space-6); }
.tool-updated { margin-top: var(--space-6); font-size: 14px; color: var(--muted); }
.tool-start { min-width: 0; }
.tool-drop { display: grid; justify-items: center; gap: var(--space-5); padding: clamp(26px, 3.4vw, 44px) clamp(18px, 3vw, 40px); border: 1.5px dashed var(--line-strong); border-radius: 26px; background: var(--white); text-align: center; box-shadow: var(--shadow-card); transition: border-color .2s, background-color .2s; }
.tool-drop.is-dragging { border-color: var(--accent); background: var(--accent-tint); }
.tool-drop-title { font: 400 clamp(24px, 2.4vw, 30px)/1.15 var(--serif); letter-spacing: -.015em; }
.tool-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.tool-actions .btn .icon { transform: none; }
.tool-actions [data-record][aria-pressed=true] { border-color: var(--accent); color: var(--accent); }
.tool-hint { max-width: 32em; font-size: 14px; line-height: var(--lh-ui); color: var(--muted); }
.tool-link { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: 8px 8px 8px 16px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--paper); }
.tool-link:focus-within { border-color: var(--ink); }
.tool-link .icon { color: var(--muted); }
.tool-link input { flex: 1; min-width: 0; height: 42px; border: 0; background: none; font: 400 16px var(--sans); color: var(--ink); outline: none; }
.tool-link .btn { height: 42px; padding: 0 20px; }
.tool-or { display: flex; align-items: center; gap: var(--space-3); width: 100%; font-size: 13px; color: var(--muted); }
.tool-or::before, .tool-or::after { content: ''; flex: 1; border-top: 1px solid var(--line); }
.tool-status { min-height: 1.5em; margin-top: var(--space-4); font-size: 15px; color: var(--ink-soft); text-align: center; }
.tool-sample { margin-top: var(--space-2); font-size: 15px; color: var(--muted); text-align: center; }
.link-button { padding: 0; border: 0; background: none; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; cursor: pointer; }
.link-button:hover { text-decoration-color: var(--accent); }
.tool-start.is-busy .tool-drop { opacity: .7; }
.tool-layout { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(80px, 10vw, 130px); }
.tool-prose { max-width: 760px; }
.tool-prose > :first-child { margin-top: 0; }
.prose .io-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.prose .io-grid > div { padding: 24px 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.prose .io-grid h3 { margin: 0 0 .5em; font-size: 17px; }
.prose .io-grid ul { font-size: 16px; }
.prose .example { display: grid; gap: var(--space-4); padding: 24px 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.prose .example > * + * { margin-top: 0; }
.prose .example p { font-size: 16px; }
.prose .example audio { width: 100%; height: 40px; }
.prose .example-label { font: 500 13.5px/var(--lh-snug) var(--sans); color: var(--muted); }
.prose .example-files { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.prose .example-files a { text-decoration: none; }
.prose .example-files .icon { transform: none; }
/* The three downloads share one row on a phone. */
@media (max-width: 600px) {
  .prose .example-files { gap: var(--space-2); }
  .prose .example-files .btn-sm { gap: var(--space-2); padding: 0 12px; }
}
.prose .example img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
/* The guitar TAB pages' example: one score shown the ways the workspace shows it, chosen with tabs (tools.js). */
.prose .tab-show { overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--white); box-shadow: var(--shadow-card); }
.tab-show-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); padding: 16px 16px 16px 24px; border-bottom: 1px solid var(--line); background: linear-gradient(#fefefd, #f9f8f6); }
.prose .tab-show-title { display: grid; gap: var(--space-1); font-size: 13.5px; line-height: var(--lh-snug); color: var(--muted); }
.tab-show-title strong { font: 450 22px/1.1 var(--serif); letter-spacing: -.012em; color: var(--ink); }
.tab-show-views { flex-wrap: wrap; }
.tab-show audio { display: block; width: calc(100% - 36px); height: 40px; margin: var(--space-4) var(--space-5) 0; }
.tab-show-sheet { margin: var(--space-4) var(--space-5) 0; padding: 18px clamp(10px, 3vw, 28px) 12px; border: 1px solid var(--line); border-radius: 6px; background: #fffefb; }
.tab-show-sheet .engraved { display: block; }
.tab-show-text { margin: var(--space-4) var(--space-5) 0; }
.prose .tab-show-text pre { padding: 16px 64px 16px 20px; font-size: 13.5px; line-height: var(--lh-ui); }
.prose .tab-show figcaption { margin: var(--space-4) var(--space-6) 0; }
.prose .tab-show .example-files { margin: var(--space-4) var(--space-6) var(--space-6); }
/* Tunings as small cards: the name, then the open strings from low to high. */
.prose .tunings { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2); padding: 0; list-style: none; }
.prose .tunings li { display: grid; align-content: start; gap: var(--space-1); margin: 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.prose .tunings b { font: 500 14.5px/var(--lh-snug) var(--sans); color: var(--ink); }
.prose .tunings span { font: 500 13px/var(--lh-ui) var(--mono); color: var(--muted); }
.prose .cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.prose .cta-row a { text-decoration: none; }
/* The footer's five columns of links sit under its brand until there is room beside it. */
@media (min-width: 761px) and (max-width: 1100px) {
  .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  .tool-hero-input .tool-hero-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .prose .io-grid { grid-template-columns: minmax(0, 1fr); }
  .tab-show-head { padding: 16px 16px 16px 16px; }
  .tab-show-views { width: 100%; border-radius: 16px; }
  .tab-show-views button { flex: 1 1 auto; }
  .tab-show audio { width: calc(100% - 24px); margin: var(--space-3) var(--space-3) 0; }
  .tab-show-sheet, .tab-show-text { margin: var(--space-3) var(--space-3) 0; }
  .prose .tab-show figcaption { margin: var(--space-3) var(--space-4) 0; }
  .prose .tab-show .example-files { margin: var(--space-3) var(--space-4) var(--space-4); }
  .tool-link { flex-wrap: wrap; padding: 12px; border-radius: 18px; }
  .tool-link .icon { margin-left: var(--space-2); }
  .tool-link input { flex: 1 1 0; padding-right: 8px; }
  .tool-link .btn { width: 100%; }
  .tool-actions, .tool-actions .btn { width: 100%; }
}

/* Chinese editions. A Han character fills its em square, is about twice as wide as a Latin letter and has no
   italic, so the Latin display settings would crowd and slant it: Chinese pages set headings about a quarter
   smaller with room between lines and no negative tracking, stand italic text upright (accent color still marks
   em), give running text the taller line Chinese reading wants, keep a lone character off a paragraph's last line,
   measure headings in em instead of ch, and keep labels at 12px or more. Fonts are chosen near the top. */
:root:lang(zh) { font-synthesis-style: none; --lh-heading: 1.3; --lh-snug: 1.45; --lh-ui: 1.6; --lh-body: 1.75; }
:root:lang(zh) * { letter-spacing: 0; }
:root:lang(zh) .brand { letter-spacing: -.015em; }
:root:lang(zh) body { line-height: var(--lh-body); }
:root:lang(zh) :is(p, li, dd, figcaption, blockquote) { text-wrap: pretty; }
:root:lang(zh) :is(em, i, cite, q, blockquote p, figcaption, .sheet-credit, .ask-prompt q) { font-style: normal; }
:root:lang(zh) :is(h1, h2) { line-height: 1.22; }
:root:lang(zh) h2 { font-size: clamp(32px, 4.2vw, 56px); }
:root:lang(zh) h3 { line-height: 1.45; }
:root:lang(zh) .hero h1 { font-size: clamp(44px, 7.4vw, 100px); line-height: 1.12; }
:root:lang(zh) :is(.page-title, .not-found h1) { max-width: 10em; font-size: clamp(38px, 5.8vw, 84px); line-height: 1.16; }
:root:lang(zh) .section-head h1 { font-size: clamp(34px, 4.6vw, 64px); }
:root:lang(zh) .finale h2 { max-width: 9em; font-size: clamp(36px, 5.2vw, 76px); line-height: 1.18; }
:root:lang(zh) .post-title { max-width: 15em; font-size: clamp(32px, 4.2vw, 56px); line-height: 1.24; }
:root:lang(zh) .tool-title { max-width: 11em; font-size: clamp(34px, 4.8vw, 70px); line-height: 1.18; }
:root:lang(zh) .connect-title { font-size: clamp(32px, 4.9vw, 70px); line-height: 1.2; }
:root:lang(zh) .related-title { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.25; }
:root:lang(zh) :is(.steps-card h2, .walk-card h2) { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.3; }
:root:lang(zh) .prose h2 { font-size: clamp(25px, 2.5vw, 31px); line-height: 1.35; }
:root:lang(zh) .prose h3 { line-height: 1.45; }
:root:lang(zh) .prose { line-height: 1.85; }
:root:lang(zh) blockquote p { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.3; }
:root:lang(zh) .prose blockquote p { font-size: clamp(19px, 1.8vw, 21px); line-height: 1.7; }
:root:lang(zh) :is(.movement h3, .feature h3, .use h3, .more-clients h3, .requirements h3) { font-size: 22px; line-height: 1.4; }
:root:lang(zh) .agent-steps h3 { font-size: 19px; line-height: 1.4; }
:root:lang(zh) :is(.walk-title, .tool-drop-title) { font-size: clamp(22px, 2.1vw, 26px); line-height: 1.35; }
:root:lang(zh) :is(.post-card-title, .faq-list summary) { line-height: 1.45; }
:root:lang(zh) .post-card-title { font-size: 23px; }
:root:lang(zh) .faq-list summary { font-size: 20px; }
:root:lang(zh) .faq-list details p { max-width: 36em; }
:root:lang(zh) .fit-pick { font-size: clamp(25px, 3vw, 34px); line-height: 1.3; }
:root:lang(zh) :is(.drop small, .mini-loop, .post-filter small, .shot-form dt), :root:lang(zh) .select-box::after { font-size: 12px; }
/* A short label wraps at its space ("PDF / 或照片"), not between two characters of one word. */
:root:lang(zh) :is(.flow-tile, .btn-mini, .client-tabs a) { word-break: keep-all; overflow-wrap: anywhere; }
/* Prices in US dollars say so: Taiwan and Hong Kong also write their own dollars with $. */
:root:lang(zh) .plan-amount::before { content: 'US'; margin-right: .06em; font-size: .4em; letter-spacing: .02em; vertical-align: .9em; color: var(--muted); }
@media (max-width: 960px) {
  :root:lang(zh) .site-nav a:not(.nav-more a, .nav-signin, .nav-cta) { font-size: 30px; line-height: 1.3; }
}
@media (max-width: 380px) {
  :root:lang(zh) .flow-tile { font-size: 12px; }
}

/* Dark theme. theme.js sets data-theme from the visitor's choice on the hosted site; without it (the
   static preview, no JavaScript) the site stays light. Tokens first, then the few fixed light colors. */
:root[data-theme=dark] {
  color-scheme: dark;
  --paper: #121311;
  --paper-deep: #0d0e0c;
  --sheet: #171816;
  --white: #1e1f1c;
  --ink: #ecebe6;
  --ink-soft: #d0cec7;
  --muted: #a3a199;
  --soft: #87857e;
  --line: #2b2c28;
  --line-strong: #3d3e39;
  --accent: #ec8a6f;
  --accent-tint: rgba(236, 138, 111, .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);
}
[data-theme=dark] body::before { filter: invert(1); opacity: .28; }
[data-theme=dark] ::selection { background: rgba(236, 138, 111, .32); }
/* The mark is dark ink on transparency. */
[data-theme=dark] .brand img, [data-theme=dark] .finale-staff img, [data-theme=dark] .tile-starling img { filter: invert(1) brightness(.93); }
[data-theme=dark] .avatar { background: #ecebe6; }
[data-theme=dark] .site-header.is-scrolled { background: rgba(18, 19, 17, .86); }
[data-theme=dark] .site-header.is-open { background: var(--paper); }
[data-theme=dark] .pill, [data-theme=dark] .btn-ghost { background: rgba(255, 255, 255, .03); }
[data-theme=dark] .plan-featured { border-color: var(--line-strong); background: var(--night-raise); }
[data-theme=dark] .plan-featured .plan-credits { background: rgba(255, 255, 255, .04); }
[data-theme=dark] .btn-light { background: var(--ink); color: var(--paper); }
[data-theme=dark] .client-tabs a:hover { background: rgba(255, 255, 255, .05); }
[data-theme=dark] .btn-ink { box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .8); }
[data-theme=dark] .btn-ink:hover, [data-theme=dark] .btn-paper:hover { background: #fff; }
[data-theme=dark] .demo-bar, [data-theme=dark] .editor-bar, [data-theme=dark] .mock-bar, [data-theme=dark] .shot-bar, [data-theme=dark] .tab-show-head { background: linear-gradient(#232420, #1f201d); }
[data-theme=dark] .demo-transport { background: linear-gradient(#1e1f1c, #1a1b18); }
[data-theme=dark] .demo-status { background: #1a1b18; }
[data-theme=dark] .tag-ok, [data-theme=dark] .copy.is-copied { border-color: rgba(141, 183, 149, .32); background: rgba(141, 183, 149, .1); color: var(--sage); }
[data-theme=dark] .wave-base, [data-theme=dark] .mini-wave { stroke: #4a4b45; }
/* Engraved scores keep their own sheet, raised a step above the card, like the workspace's dark pages. */
[data-theme=dark] .sheet, [data-theme=dark] .editor-stage, [data-theme=dark] .notation-sheet, [data-theme=dark] .tab-show-sheet { background: #252622; box-shadow: 0 14px 28px -22px rgba(0, 0, 0, .8); }
[data-theme=dark] .panel { background: #1f201d; }
[data-theme=dark] .editor-transport { background: linear-gradient(#232420, #1f201d); }
[data-theme=dark] .play { color: #1a1b18; box-shadow: 0 10px 20px -10px rgba(236, 138, 111, .5); }
[data-theme=dark] .play:hover:not(:disabled) { background: #f3a48d; }
[data-theme=dark] .select-box::after { color: #1a1b18; }
[data-theme=dark] .file-row:nth-child(4) .ext { background: #b9a57c; }
[data-theme=dark] .prose .example img { filter: invert(.88) hue-rotate(180deg); }
[data-theme=dark] .section-night { border-block: 1px solid var(--line); }
[data-theme=dark] .tile-openai, [data-theme=dark] .tile-cursor { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
[data-theme=dark] .btn-openai, [data-theme=dark] .btn-cursor { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
[data-theme=dark] .theme-option[aria-checked=true] { box-shadow: 0 0 0 1px var(--line-strong); }