/* Yullo — yullo.me
   One grid of twelve columns; every text field starts on column 4, every
   label sits in columns 1–3. Two faces: Helvetica Neue (the app's wordmark
   face, installed on every Mac, never shipped here) and IBM Plex Mono (the
   app's annotation face, self-hosted, unmodified, OFL 1.1).
   Blue marks only what Yullo does to text. */

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #f1efe9;
  --ink: #141414;
  --grey: #66645e;
  --rule: #c9c6bd;
  --blue: #2448d8;
  --sans: "Helvetica Neue", Helvetica, "Nimbus Sans", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  /* Wide screens: the page stays a 1760 px column, centred, instead of stretching. */
  --margin: max(clamp(20px, 4.4vw, 72px), calc((100vw - 1760px) / 2));
  --gutter: clamp(14px, 1.7vw, 28px);
  /* Each language sets --scale so its two-line headline fills columns 1–9. */
  /* …and is capped by the window height, so the whole opening fits the first screen. */
  --display: clamp(40px, min(calc(var(--scale, 12.4) * 1vw), 21vh), 228px);
  --sample: clamp(30px, 3.9vw, 70px);
  --space: clamp(72px, 10vw, 168px);
  color-scheme: light;
}

/* Light by default; Dark only when the visitor chooses it. */
:root[data-theme="dark"] {
  --paper: #121212; --ink: #dad7cf; --grey: #8d8a83; --rule: #34332f; --blue: #8aa2ff;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(16px, 1.05vw + 6px, 19px);
  line-height: 1.4;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
:lang(zh-Hans) body, body:lang(zh-Hans) { font-family: "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", sans-serif; }
:lang(zh-Hant) body, body:lang(zh-Hant) { font-family: "Helvetica Neue", "PingFang TC", "Hiragino Sans CNS", sans-serif; }
body:lang(ja) { font-family: "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif; }
body:lang(ko) { font-family: "Helvetica Neue", "Apple SD Gothic Neo", sans-serif; }

h1, h2, h3, p, ul, ol, dl, dd, figure, pre { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--blue); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.mono {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  font-weight: 400;
}

/* Japanese wraps between phrases; Chinese and Japanese keep closing marks off the line
   start, and even out a short last line instead of leaving a word alone. */
html:lang(ja) { word-break: auto-phrase; line-break: strict; text-wrap: pretty; }
html:lang(zh) { line-break: strict; text-wrap: pretty; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: var(--margin); top: -100px;
  background: var(--ink); color: var(--paper); padding: 8px 12px;
  font-family: var(--mono); font-size: 12px; text-decoration: none;
}
.skip:focus { top: 8px; }

/* The grid ---------------------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  padding-inline: var(--margin);
}
.grid > * { grid-column: 1 / -1; }

/* Masthead: a running head, set like the top line of a printed page. */

.masthead { align-items: baseline; padding-top: 20px; }
.wordmark {
  grid-column: 1 / 4;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.wordmark:hover { color: inherit; }
/* The mark beside the name, as in the app's own windows: cap height, Yullo blue. */
.wm-glyph { width: 0.78em; height: 0.84em; margin-right: 0.24em; vertical-align: -0.08em; fill: var(--blue); }
.langs {
  grid-column: 4 / 7;
  display: flex;
  align-items: baseline;
  gap: 1.1em;
}
.more { position: relative; }
.more summary { list-style: none; cursor: pointer; color: var(--grey); display: inline-flex; align-items: center; gap: 4px; }
.more summary::-webkit-details-marker { display: none; }
.more summary:hover { color: var(--blue); }
.more summary svg { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.more summary .is-here { color: var(--ink); text-decoration: underline; text-underline-offset: 0.3em; }
.more ul {
  position: absolute; z-index: 30; top: calc(100% + 8px); left: -12px; margin: 0; padding: 6px 0; list-style: none;
  background: var(--paper); border: 1px solid var(--ink); min-width: 9em;
}
.more li a { display: block; padding: 4px 12px; }
.langs a { text-decoration: none; color: var(--grey); }
.langs a:hover { color: var(--blue); }
.langs a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: 0.3em; }
.masthead-nav {
  grid-column: 7 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.masthead-nav a { text-decoration: none; }

/* Opening ------------------------------------------------------------------ */

/* The opening is the first screen, exactly: it fills the window below the
   running head, the headline and mark at the top and the two halves anchored
   to the bottom, so the next section never peeks in. Extra height becomes
   space between them; a short window simply lets the opening run longer. */
.opening {
  min-height: calc(100svh - var(--head, 0px));
  align-content: space-between;
  padding-top: clamp(40px, min(13vw, 12vh), 200px);
  padding-bottom: clamp(32px, min(5vw, 7vh), 96px);
  row-gap: clamp(32px, min(6vw, 6vh), 96px);
}
.display {
  grid-column: 1 / 10;
  grid-row: 1;
  font-weight: 500;
  font-size: var(--display);
  line-height: 0.86;
  letter-spacing: -0.045em;
  margin-left: -0.055em; /* optical: set the Y's stroke on the margin */
}
.display:lang(zh), .display:lang(ja), .display:lang(ko) { line-height: 1.04; letter-spacing: 0; margin-left: 0; }
.glyph {
  grid-column: 10 / -1;
  grid-row: 1;
  justify-self: start;
  align-self: end;
  /* From the cap height of "Your" to the baseline of "effort.": two lines
     of 0.86 plus a cap of 0.72, at the mark's own 640:688 proportion. */
  width: calc(var(--display) * 1.47);
  margin-bottom: calc(var(--display) * 0.035);
  fill: var(--blue);
}
/* Chinese lines sit taller: two lines of 1.04 plus a cap of about 0.88. */
.opening:lang(zh) .glyph, .opening:lang(ja) .glyph, .opening:lang(ko) .glyph { width: calc(var(--display) * 1.78); }
/* Under the headline and the mark, one ink rule, then two halves on the
   same four column edges (1, 4, 7 and 10, the last under the mark). Left,
   the promise: "In any app." as the caption, then the four verbs, two by two.
   Right, the facts, two by two in small monospace, the download last, under
   the mark. Both halves hang from the rule and share a bottom edge: the right
   half's rows are pushed to the top and the bottom of the left half's height.
   Large against small, words against facts: a Swiss split under a giant
   headline, with active white space between. */
.bands { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: subgrid; border-top: 1px solid var(--ink); padding-top: 10px; }
.band-lead { grid-column: 1 / 7; grid-row: 1; font-size: 15px; color: var(--grey); }
.verbs {
  grid-column: 1 / 7; grid-row: 2; align-self: start; display: grid; grid-template-columns: subgrid; row-gap: 2px;
  list-style: none; margin: 0; padding: 16px 0 0;
}
/* The promise in four short lines, one per row. */
.verbs li { grid-column: 1 / -1; font-size: clamp(21px, 2.1vw, 34px); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; }
.verbs li + li { margin-top: 0.42em; }
.verbs:lang(zh) li, .verbs:lang(ja) li, .verbs:lang(ko) li { letter-spacing: 0; }
.facts {
  grid-column: 7 / -1; grid-row: 1 / span 2; align-self: stretch;
  display: grid; grid-template-columns: subgrid; align-content: space-between; row-gap: 18px; margin: 0;
}
.facts div { grid-column: span 3; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.facts dt { font: 400 12px/1.4 var(--mono); color: var(--grey); }
.facts dd { margin: 0; font: 400 14px/1.4 var(--mono); }
/* The one action reads as type, not a button: larger than the facts, in the text face. */
/* The version sits on the download's label line, set right like a table entry;
   where the cell is too narrow it moves under the label. */
.get dd { font-family: inherit; font-size: clamp(17px, 1.4vw, 22px); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; }
.get a { text-underline-offset: 0.22em; text-decoration-thickness: 1px; }

/* Sections ---------------------------------------------------------------- */

.tasks, .engines, .install { border-top: 1px solid var(--ink); }

/* Label, title and note share the title's first baseline. */
.section-head {
  padding-top: clamp(20px, 2vw, 28px);
  padding-bottom: clamp(48px, 6vw, 104px);
  align-items: baseline;
  row-gap: 16px;
}
/* Titles start on column 1, the headline's edge; the note shares their baseline. */
.section-title {
  grid-column: 1 / 9;
  font-weight: 500;
  font-size: clamp(34px, 4.6vw, 84px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.section-note {
  grid-column: 9 / -1;
  max-width: 26em;
  color: var(--grey);
  font-size: 15px;
  line-height: 1.45;
}

/* Plates: a name in the margin, the text in the field. ------------------- */

.plate {
  padding-bottom: var(--space);
  row-gap: 32px;
  align-items: start;
}
.plate-head {
  grid-column: 1 / 4;
  border-top: 1px solid var(--ink);
  padding-top: 12px;
}
.plate-number { color: var(--grey); margin-bottom: 40px; }
.plate-head h3 {
  font-weight: 500;
  font-size: clamp(24px, 1.9vw, 32px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.plate-head p:last-child { font-size: 15px; line-height: 1.45; max-width: 19em; }
.plate-head .plate-lead { font-size: 15px; line-height: 1.45; max-width: 34em; color: var(--grey); text-wrap: balance; }

.specimen {
  grid-column: 4 / -1;
  border-top: 1px solid var(--rule);
  padding-top: 12px;
}
.ui {
  display: flex;
  flex-wrap: wrap;
  column-gap: 2.5em;
  row-gap: 4px;
  color: var(--grey);
}
.specimen figcaption {
  margin-top: clamp(28px, 3vw, 48px);
  max-width: 64ch;
  color: var(--grey);
}

/* The app's own controls, as text. */
.ui button, .step-list button, .play, .copy {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.play, .copy { text-decoration: underline; text-underline-offset: 0.3em; }
.play:hover, .copy:hover { color: var(--blue); }

/* Four steps: the list sits in the margin, the app in the field. --------- */

.demo { align-items: start; padding-bottom: var(--space); row-gap: 32px; }
.step-list { grid-column: 1 / 4; border-top: 1px solid var(--ink); }
.step-list li { border-bottom: 1px solid var(--rule); padding-block: 12px 14px; color: var(--grey); transition: color 0.3s; }
.step-list button {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  width: 100%;
  text-align: left;
  font-size: clamp(19px, 1.5vw, 24px);
  font-weight: 500;
  letter-spacing: -0.015em;
}
.step-list button .mono { font-size: 12px; font-weight: 400; min-width: 2em; }
/* Descriptions open with the real height: grid rows 0fr → 1fr. */
.step-list li { display: grid; grid-template-rows: auto 0fr; transition: grid-template-rows 0.3s; }
.step-list li.is-active { grid-template-rows: auto 1fr; }
.step-list p { font-size: 14px; line-height: 1.4; margin: 0; min-height: 0; overflow: hidden; }
.step-list .sl-in { display: block; padding-top: 6px; }
@media (prefers-reduced-motion: reduce) { .step-list li { transition: none; } }
.step-list li.is-active { color: var(--ink); }
.step-list li.is-active button { color: var(--blue); }
/* Refining a translation starts from the window's Refine menu, not ⌃⇧R. */
.step-list[data-path="translation"] [data-step="refine"] .keys { display: none; }
/* The shortcuts are defaults: a quiet note at the foot of the list's column,
   level with the bottom of the demo where there is room, else under the list. */
.step-note { grid-column: 1 / 4; font: 400 11px/1.45 var(--mono); color: var(--grey); max-width: 26em; }
/* The pass's setting, when one applies, on its own line under the shortcuts. */
.step-note .pass-note:not([hidden]) { display: block; margin-top: 4px; }
.step-note .pass-note[hidden] { display: none; }
@media (min-width: 1081px) {
  .demo .step-list, .demo .step-note { grid-row: 1; }
  .demo .step-note { align-self: end; }
}

/* Window controls in their macOS colours: close, minimise, zoom. */
.titlebar i, .term-bar i { box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12); }
.titlebar i:nth-child(1), .term-bar i:nth-child(1) { background: #ff5f57; }
.titlebar i:nth-child(2), .term-bar i:nth-child(2) { background: #febc2e; }
.titlebar i:nth-child(3), .term-bar i:nth-child(3) { background: #28c840; }

/* Shortcuts as the Mac menus show them: modifier glyphs, then the key. */
.keys { margin-left: auto; display: inline-flex; gap: 0.18em; }
kbd {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  font-size: 14px; font-weight: 400; line-height: 1; color: var(--grey);
}
.is-active .keys kbd { color: var(--ink); }

.theme {
  appearance: none; border: 1px solid var(--rule); background: none; border-radius: 50%;
  width: 26px; height: 26px; padding: 0; display: inline-grid; place-items: center;
  color: var(--ink); cursor: pointer; align-self: center;
}
.theme svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; display: none; }
.theme .i-dark path { fill: currentColor; }
.theme[data-mode="light"] .i-light, .theme[data-mode="dark"] .i-dark { display: block; }
.theme:hover { border-color: var(--ink); color: var(--blue); }
.theme:hover { color: var(--blue); }

/* Window style above a demo's top-right corner, as the app's control in
   General: Liquid Glass | Solid. It restyles every demo at once, materials
   only, without touching what is playing. */
.material {
  display: flex; width: max-content; margin: 0 0 10px auto; padding: 2px; border-radius: 8px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  font: 500 12px/1 -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", sans-serif;
}
.material button {
  appearance: none; border: 0; background: none; color: var(--grey); font: inherit; cursor: pointer;
  padding: 5px 11px; border-radius: 6px; transition: background-color 0.15s, color 0.15s;
}
.material button:hover { color: var(--ink); }
.material button[aria-checked="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14); }
:root[data-theme="dark"] .material button[aria-checked="true"] { background: color-mix(in srgb, var(--ink) 18%, transparent); box-shadow: none; }
.material button:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
/* Phones draw the demo edge to edge; the switch keeps the page gutter. */
@media (max-width: 760px) { .material { margin-right: 16px; } }

/* The stage: a rendering of the real app, drawn from its SwiftUI source.
   One design unit --u is 1/960 of the stage width. */

.stage { grid-column: 4 / -1; container-type: inline-size; }
/* A demo is drawn to its width, so in a wide, short window its height is what
   runs out. Cap the width so the whole demo fits below the running head:
   heights are 600, 560 and about 700 units per 960. */
/* Centred in the room beside its list, so a wide window leaves even space on
   both sides rather than an empty band on the right. */
.stage { justify-self: center; margin-inline: auto; width: 100%; max-width: calc((100svh - var(--head, 0px) - 48px) * 960 / 600); }
.stage.stage-lib { max-width: calc((100svh - var(--head, 0px) - 48px) * 960 / 700); }
.stage.stage-welcome { max-width: calc((100svh - var(--head, 0px) - 48px) * 960 / 700); }
.screen {
  --u: calc(100cqw / 960);
  --desk: #e3e0d8;
  --bar: rgba(255, 255, 255, 0.3);
  --win: #ffffff;
  --win-ink: #1f2830;
  --win-grey: #7b7f84;
  --win-line: rgba(0, 0, 0, 0.09);
  --green: #28cd41;
  --pane: #fbfbfa;
  --accent: #2448d8;
  --hud: rgba(0, 0, 0, 0.78);
  --mark: #2448d8;
  --glass: #efefed;
  --field: rgba(0, 0, 0, 0.06);
  --btn: #ffffff;
  /* Yullo's own windows in the app's Window style. Liquid Glass (the
     default): translucent over the desktop, which shows as a soft hue. The
     Settings window (Welcome, the guide, Services) is the window glass, the
     translator and selected-text windows the lighter panel glass, a sheet a
     near-opaque glass with a rim; content sits on white cards. */
  /* Lighter than the app's own tint, for presentation: the glass reads bright
     and clear over the wallpaper, with a sheen along its top edge. */
  --m-window: rgba(246, 247, 250, 0.66);
  --m-panel: rgba(246, 247, 250, 0.58);
  --m-sheet: rgba(248, 249, 251, 0.86);
  --m-sheen: rgba(255, 255, 255, 0.45);
  --m-hi: rgba(255, 255, 255, 0.9);
  --m-edge: rgba(255, 255, 255, 0.55);
  --m-card: rgba(255, 255, 255, 0.9);
  --m-rim: rgba(0, 0, 0, 0.07);
  --m-sheet-rim: rgba(0, 0, 0, 0.08);
  --m-mask: #eef1f7;
  --m-blur: blur(calc(28 * var(--u))) saturate(1.5);
  /* A bright sky, so the glass has light and colour to take its hue from:
     blue at the top left, a peach glow at the bottom right. */
  --wallpaper: radial-gradient(50% 48% at 86% 86%, rgba(255, 190, 150, 0.8), transparent 70%),
    radial-gradient(48% 48% at 10% 10%, rgba(90, 140, 240, 0.7), transparent 70%),
    radial-gradient(42% 42% at 74% 12%, rgba(160, 220, 255, 0.8), transparent 70%),
    linear-gradient(160deg, #a9c6f6 0%, #dbe7fb 50%, #fbe3d2 100%);
  position: relative;
  aspect-ratio: 960 / 600;
  overflow: hidden;
  background: var(--wallpaper);
  color: var(--win-ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "PingFang SC", sans-serif;
  font-size: calc(16 * var(--u));
  line-height: 1.35;
  letter-spacing: 0;
}
/* Dark appearance, as the app draws it: glass panels, label colours, the
   lighter accent rgb(137, 161, 255). */
:root[data-theme="dark"] .screen {
  --desk: #232326; --bar: rgba(0, 0, 0, 0.3); --win: #2a2a2d; --win-ink: #f5f5f7; --win-grey: #98989f;
  --win-line: rgba(255, 255, 255, 0.1); --pane: #222224; --accent: #89a1ff; --green: #32d74b;
  --hud: rgba(58, 58, 62, 0.92); --mark: rgba(255, 255, 255, 0.94);
  --glass: #2c2c2f; --seg-on: rgba(255, 255, 255, 0.24); --field: rgba(255, 255, 255, 0.08); --btn: rgba(255, 255, 255, 0.12);
  --m-window: rgba(30, 30, 33, 0.92); --m-panel: rgba(30, 30, 33, 0.85); --m-sheet: rgba(42, 42, 45, 0.94);
  --m-card: rgba(255, 255, 255, 0.07); --m-rim: rgba(255, 255, 255, 0.1); --m-sheet-rim: rgba(255, 255, 255, 0.1); --m-mask: #202023;
  --m-sheen: rgba(255, 255, 255, 0.05); --m-hi: rgba(255, 255, 255, 0.12); --m-edge: rgba(255, 255, 255, 0.1);
  --wallpaper: radial-gradient(50% 48% at 86% 86%, rgba(214, 120, 90, 0.35), transparent 70%),
    radial-gradient(48% 48% at 10% 10%, rgba(60, 100, 230, 0.55), transparent 70%),
    radial-gradient(42% 42% at 74% 12%, rgba(90, 140, 220, 0.35), transparent 70%),
    linear-gradient(160deg, #1a2850 0%, #161b30 55%, #2a1d27 100%);
}
/* In dark, filled accent controls (default buttons, the active step, a
   selected segment) take a deeper blue so their white labels read; links and
   icons keep the lighter accent. The Model library keeps the system accent. */
:root[data-theme="dark"] .screen { --accent-fill: #3d63e0; }
:root[data-theme="dark"] .stage-lib .screen { --accent-fill: var(--accent); }
/* Solid: the same layout on opaque surfaces; only the material changes. */
:root[data-material="solid"] .screen {
  --m-window: #eff0f3; --m-panel: #eff0f3; --m-sheet: #f7f8fa; --m-card: #fff; --m-rim: rgba(0, 0, 0, 0.08);
  --m-sheet-rim: rgba(0, 0, 0, 0.08); --m-mask: #eff0f3; --m-blur: none;
}
/* Glass catches the light: a sheen down from the top edge, a bright hairline
   on it and a soft, cool shadow. */
:root:not([data-material="solid"]) .screen :is(.welcome-win, .onmac, .svcpage, .ywin, .sel) {
  background-image: linear-gradient(180deg, var(--m-sheen), transparent 38%);
  border-color: var(--m-edge);
  box-shadow: inset 0 1px 0 var(--m-hi), 0 calc(16 * var(--u)) calc(46 * var(--u)) rgba(30, 40, 80, 0.16);
}
:root[data-material="solid"]:not([data-theme="dark"]) .screen :is(.welcome-win, .onmac, .svcpage, .ywin, .sel) { border: 0.5px solid rgba(0, 0, 0, 0.08); }
:root[data-material="solid"][data-theme="dark"] .screen :is(.welcome-win, .onmac, .svcpage, .ywin, .sel) { border-color: transparent; }
:root[data-material="solid"][data-theme="dark"] .screen {
  --m-window: #1c1c1e; --m-panel: #232326; --m-sheet: #2a2a2d; --m-card: rgba(255, 255, 255, 0.07);
  --m-rim: rgba(255, 255, 255, 0.08); --m-sheet-rim: rgba(255, 255, 255, 0.1); --m-mask: #1c1c1e;
}
.screen .welcome-win, .screen .onmac, .screen .svcpage { background: var(--m-window); -webkit-backdrop-filter: var(--m-blur); backdrop-filter: var(--m-blur); }
/* On the glass, bordered controls are borderless grey fills; white is for
   cards. Filled accent buttons keep their colour. */
:root:not([data-theme="dark"]) .screen :is(.welcome-win, .onmac, .svcpage) { --btn: rgba(0, 0, 0, 0.06); }
:root:not([data-theme="dark"]) :is(.welcome-win, .onmac, .svcpage) :is(.btn, .wl-btn, .g-btn, .g-pop):not(.is-default, .is-pressed) { border-color: transparent; }
.screen .ico { width: calc(18 * var(--u)); height: calc(18 * var(--u)); fill: currentColor; flex: none; }
.screen .mark { width: calc(16 * var(--u)); height: calc(17 * var(--u)); fill: var(--mark); }

/* An annotation, not app UI: the keys pressed, shown as the step begins. */
.keystroke {
  position: absolute; z-index: 3; left: 50%; top: calc(250 * var(--u)); transform: translateX(-50%);
  display: flex; gap: calc(6 * var(--u)); opacity: 0; transition: opacity 0.25s;
}
.keystroke kbd {
  border: 1px solid var(--ink); text-align: center; line-height: 1;
  font-size: calc(18 * var(--u)); min-width: calc(40 * var(--u)); padding: calc(9 * var(--u)) calc(8 * var(--u));
  background: var(--ink); color: var(--paper); border-color: var(--ink); border-radius: calc(5 * var(--u));
  font-weight: 500;
}
[data-sub~="keys"] .keystroke { opacity: 1; }
.menubar { position: absolute; inset: 0 0 auto; height: calc(30 * var(--u)); background: var(--bar); display: flex; justify-content: flex-end; align-items: center; padding-inline: calc(24 * var(--u)); }
.mb-mark { width: calc(16 * var(--u)); height: calc(17 * var(--u)); fill: var(--win-ink); }

.win { position: absolute; background: var(--win); border: 1px solid var(--win-line); box-shadow: 0 calc(12 * var(--u)) calc(36 * var(--u)) rgba(0, 0, 0, 0.12); transition: opacity 0.35s, transform 0.35s; }
.doc { left: calc(110 * var(--u)); top: calc(66 * var(--u)); width: calc(740 * var(--u)); height: calc(430 * var(--u)); border-radius: calc(16 * var(--u)); }
.titlebar { height: calc(44 * var(--u)); display: flex; gap: calc(8 * var(--u)); align-items: center; padding-inline: calc(18 * var(--u)); border-bottom: 1px solid var(--win-line); }
.titlebar i { width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: 50%; }
/* The Settings window's traffic lights sit on its one sheet of glass, with no bar below. */
.welcome-win .titlebar { border-bottom: 0; }
.doc-text { padding: calc(34 * var(--u)) calc(48 * var(--u)); font-size: calc(24 * var(--u)); line-height: 1.5; white-space: pre-line; }
.doc-content { border-radius: calc(3 * var(--u)); transition: background-color 0.3s, color 0.6s; }
.doc-caret { display: inline-block; width: calc(2 * var(--u)); height: 1.1em; vertical-align: -0.2em; background: var(--accent); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
/* The selection sweeps across the words, line by line, as a drag does. */
.doc-content { background-image: linear-gradient(color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 22%, transparent)); background-repeat: no-repeat; background-size: 0% 100%; }
[data-sub~="selected"] .doc-content { background-size: 100% 100%; transition: background-size 0.6s ease-out, color 0.6s; }
[data-sub~="selected"] .doc-caret { display: none; }
[data-sub~="fresh"] .doc-content { color: inherit; animation: ev-in .7s ease-out; }

/* Recording indicator: dark surface, 16pt corners, live words above the row. */
.pill {
  position: absolute; left: 50%; bottom: calc(26 * var(--u)); width: calc(420 * var(--u));
  transform: translate(-50%, calc(12 * var(--u))); opacity: 0;
  background: var(--hud); color: #fff; border-radius: calc(18 * var(--u));
  padding: calc(12 * var(--u)) calc(16 * var(--u)); transition: opacity 0.3s, transform 0.3s;
}
/* The live words take only the lines they need, up to two (older lines scroll
   off the top), so the space above them always equals the space below. */
.live { font-size: calc(16 * var(--u)); line-height: calc(23 * var(--u)); max-height: calc(46 * var(--u)); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; margin-bottom: calc(10 * var(--u)); color: rgba(255, 255, 255, 0.92); }
.live:empty { margin-bottom: 0; }
/* As in the app's indicator: meter, status and the Pause and Stop buttons are one
   group, centred in the bar; only the live words above are set from the left. */
.pill-row { display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--u)); font-size: calc(14 * var(--u)); }
.pill-row .ico { width: calc(14 * var(--u)); height: calc(14 * var(--u)); opacity: 0.85; }
.pill-caption { flex: none; }
.meter { display: flex; align-items: center; gap: calc(2.5 * var(--u)); width: calc(34 * var(--u)); height: calc(22 * var(--u)); }
.meter i { width: calc(2.5 * var(--u)); height: calc(3 * var(--u)); border-radius: 2px; background: currentColor; }
[data-sub~="listening"] .meter i { animation: level 0.5s ease-in-out infinite alternate; }
.meter i:nth-child(2n) { animation-delay: -0.2s !important; }
.meter i:nth-child(3n) { animation-delay: -0.35s !important; }
@keyframes level { to { height: calc(20 * var(--u)); } }
[data-sub~="pill"] .pill { opacity: 1; transform: translate(-50%, 0); }

/* Refine in place: the app's chip, the dictation indicator's flat HUD, just
   under the selection's left edge. Points scale by 1.15 on this screen; on
   a narrow screen the chip keeps its words at 11 px or more. */
.rchip {
  --cu: var(--u);
  position: absolute; left: 0; top: 0; opacity: 0; transition: opacity 0.3s; pointer-events: none;
  display: flex; align-items: center; min-height: calc(40 * var(--cu)); padding: calc(11.5 * var(--cu)) calc(16 * var(--cu));
  border-radius: calc(26 * var(--cu)); background: var(--hud); color: #fff; font-size: calc(13.8 * var(--cu)); font-weight: 400; line-height: 1.25;
  box-shadow: inset 0 0 0 calc(0.6 * var(--cu)) rgba(255, 255, 255, 0.08), 0 calc(8 * var(--cu)) calc(24 * var(--cu)) rgba(0, 0, 0, 0.22);
}
/* A message too long for one line wraps, as in the app: a card with 16 pt corners. */
.rchip.wrapped { border-radius: calc(18.4 * var(--cu)); }
.rtext { max-width: calc(345 * var(--cu)); text-wrap: balance; }
.ract { white-space: nowrap; }
[data-sub~="chip"] .rchip { opacity: 1; }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .rchip { background: #000; }
  :root[data-theme="dark"] .rchip { background: rgb(58, 58, 62); }
}
.rglyph { display: grid; place-items: center; width: calc(18.4 * var(--cu)); margin-right: calc(9.2 * var(--cu)); }
.rglyph > * { grid-area: 1 / 1; }
.rdots { display: flex; gap: calc(3.5 * var(--cu)); }
.rdots i { width: calc(3.5 * var(--cu)); height: calc(3.5 * var(--cu)); border-radius: 50%; background: #fff; opacity: 0.3; animation: rdot 1.05s steps(1) infinite; }
.rdots i:nth-child(2) { animation-delay: 0.35s; }
.rdots i:nth-child(3) { animation-delay: 0.7s; }
@keyframes rdot { 0% { opacity: 0.85; } 33.3% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .rdots i { animation: none; } .rdots i:first-child { opacity: 0.85; } }
.rcheck { width: calc(12.6 * var(--cu)); height: calc(12.6 * var(--cu)); fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ract { margin-left: calc(17.3 * var(--cu)); font-weight: 500; font-size: calc(12.65 * var(--cu)); color: rgb(137, 161, 255); }
.rchip[data-state="working"] :is(.rcheck, .ract), .rchip[data-state="done"] .rdots { display: none; }

/* Speak, it's written: Mail's compose window, the recording window's output
   chip and its menu, and the result typed in blue. */
.doc-title, .mail-head, .pill .chip, .pill-row .ok { display: none; }
.titlebar { position: relative; }
.doc-title { position: absolute; left: 0; right: 0; text-align: center; font-size: calc(14 * var(--u)); font-weight: 600; pointer-events: none; }
.mail-head { padding: calc(6 * var(--u)) calc(48 * var(--u)) 0; font-size: calc(15 * var(--u)); }
.mail-head p { padding-block: calc(9 * var(--u)); border-bottom: 1px solid var(--win-line); }
.mail-head span { color: var(--win-grey); }
.stage[data-step="dictate"] :is(.doc-title, .mail-head) { display: block; }
.stage[data-step="dictate"] .doc-text { font-size: calc(19 * var(--u)); padding-top: calc(20 * var(--u)); }
.doc-cap { display: block; margin-top: calc(18 * var(--u)); font-size: calc(14 * var(--u)); color: var(--win-grey); }
.doc-cap:empty { display: none; }
.doc-content .chg { color: inherit; animation: ev-in .7s ease-out; }
/* The recording indicator, as the app draws it: a 360 pt dark card, one
   centred line (level, status, the output menu, Pause and Stop) and the words
   below it in white. */
.stage:is([data-step="dictate"], [data-step="perapp"], [data-step="edit"]) .pill { width: calc(414 * var(--u)); display: flex; flex-direction: column; gap: calc(9 * var(--u)); padding: calc(11.5 * var(--u)) calc(16 * var(--u)) calc(14 * var(--u)); border-radius: calc(18.4 * var(--u)); background: #060606; box-shadow: inset 0 0 0 calc(0.6 * var(--u)) rgba(255, 255, 255, 0.1), 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, 0.3); pointer-events: none; }
.stage:is([data-step="dictate"], [data-step="perapp"], [data-step="edit"]) .pill-row { order: -1; gap: calc(10 * var(--u)); font-size: calc(13.8 * var(--u)); }
.stage:is([data-step="dictate"], [data-step="perapp"], [data-step="edit"]) .live { margin: 0; font-size: calc(15 * var(--u)); line-height: calc(21 * var(--u)); max-height: calc(42 * var(--u)); color: #fff; }
.stage:is([data-step="dictate"], [data-step="perapp"], [data-step="edit"]) .meter { width: calc(32 * var(--u)); height: calc(21 * var(--u)); gap: calc(2.3 * var(--u)); }
.stage:is([data-step="dictate"], [data-step="perapp"], [data-step="edit"]) .meter i { width: calc(2.3 * var(--u)); }
.stage:is([data-step="dictate"], [data-step="perapp"], [data-step="edit"]) .pill-row .ctl { width: calc(13 * var(--u)); height: calc(13 * var(--u)); margin-inline: calc(4 * var(--u)); }
.stage:is([data-step="dictate"], [data-step="perapp"], [data-step="edit"]) .pill .chip { display: inline-flex; }
.pill .chip {
  align-items: center; gap: calc(5 * var(--u)); border: 0; border-radius: calc(5 * var(--u)); background: none;
  color: rgba(255, 255, 255, 0.82); font: inherit; font-weight: 500; padding: calc(1 * var(--u)) calc(4 * var(--u)); white-space: nowrap;
}
.pill .chip .chev { width: calc(10 * var(--u)); height: calc(10 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
[data-sub~="done"] .pill .chip { pointer-events: auto; cursor: pointer; }
[data-sub~="done"] .pill .chip:hover, [data-sub~="recmenu"] .pill .chip { background: rgba(255, 255, 255, 0.14); }
/* The language tag beside the format, as the app draws it when the switch is
   on: white at 12% with 5 pt corners, as wide as its longest label. */
.ltag { display: none; }
.stage:is([data-step="dictate"], [data-step="perapp"], [data-step="edit"]) .ltag { display: inline-grid; place-items: center; padding: calc(2.3 * var(--u)) calc(6.9 * var(--u)); border-radius: calc(5.75 * var(--u)); background: rgba(255, 255, 255, 0.12); font-size: calc(12.65 * var(--u)); font-weight: 500; color: #fff; white-space: nowrap; }
/* It doesn't cycle on the page, so it doesn't invite a click. */
.ltag { cursor: default; pointer-events: none; }
.ltag > span { grid-area: 1 / 1; }
[data-sub~="done"] .ltag { display: none !important; }
[data-sub~="done"] :is(.meter, .pill-row .ctl) { display: none; }
/* Once inserted it is the app's short notice: a check, Inserted, and the menu
   to change what this recording wrote. */
.stage:is([data-step="dictate"], [data-step="perapp"], [data-step="edit"])[data-sub~="done"] .live { display: none; }
.stage:is([data-step="dictate"], [data-step="perapp"], [data-step="edit"])[data-sub~="done"] .pill { width: auto; padding-block: calc(9 * var(--u)); padding-inline: calc(16 * var(--u)) calc(12 * var(--u)); border-radius: calc(26 * var(--u)); }
.stage:is([data-step="dictate"], [data-step="perapp"], [data-step="edit"]) .pill-row .ok { width: calc(15 * var(--u)); height: calc(15 * var(--u)); opacity: 1; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.stage:is([data-step="dictate"], [data-step="perapp"], [data-step="edit"]) .pill-row .ok path { stroke-width: 2.4; }
/* The app writes "Inserted · Email": a middle dot before the menu. */
.stage:is([data-step="dictate"], [data-step="perapp"], [data-step="edit"]) .pill-row .ok { margin: 0; color: #fff; }
/* "Inserted · Email ⌄": one even space each side of the dot, as the app spaces it. */
.stage:is([data-step="dictate"], [data-step="perapp"], [data-step="edit"])[data-sub~="done"] .pill-row { gap: 0; }
.stage:is([data-step="dictate"], [data-step="perapp"], [data-step="edit"])[data-sub~="done"] .pill-row .ok { margin-right: calc(8 * var(--u)); }
.stage:is([data-step="dictate"], [data-step="perapp"], [data-step="edit"])[data-sub~="done"] .pill-caption::after { content: " · "; white-space: pre; }
.stage:is([data-step="dictate"], [data-step="perapp"], [data-step="edit"])[data-sub~="done"] .pill .chip { margin-left: calc(-4 * var(--u)); }
[data-sub~="done"] .pill-row .ok { display: block; }
.rmenu {
  position: absolute; right: calc(12 * var(--u)); bottom: calc(100% + 8 * var(--u)); width: calc(250 * var(--u));
  background: var(--win); color: var(--win-ink); border: 1px solid var(--win-line); border-radius: calc(10 * var(--u));
  box-shadow: 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, 0.16); padding: calc(6 * var(--u)); font-size: calc(14 * var(--u));
  opacity: 0; transition: opacity 0.2s; pointer-events: none;
}
.rmenu .menu-head { color: var(--win-grey); font-size: calc(12 * var(--u)); padding: calc(4 * var(--u)) calc(10 * var(--u)); }
.rmenu button {
  position: relative; display: block; width: 100%; text-align: left; border: 0; background: none; font: inherit; color: inherit;
  padding: calc(4 * var(--u)) calc(10 * var(--u)) calc(4 * var(--u)) calc(26 * var(--u)); border-radius: calc(5 * var(--u)); cursor: pointer;
}
.rmenu .rm-sep { border: 0; border-top: 1px solid var(--win-line); margin: calc(5 * var(--u)) calc(10 * var(--u)); }
.rmenu .rm-more { display: flex; align-items: center; justify-content: space-between; padding: calc(4 * var(--u)) calc(10 * var(--u)) calc(4 * var(--u)) calc(26 * var(--u)); }
.rmenu .rm-more svg { width: calc(10 * var(--u)); height: calc(10 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.4; }
.rmenu button[aria-checked="true"]::before { content: "✓"; position: absolute; left: calc(9 * var(--u)); }
.rmenu button:hover, .rmenu button:focus-visible { background: var(--accent-fill, var(--accent)); color: #fff; outline: none; }
[data-sub~="recmenu"] .rmenu { opacity: 1; pointer-events: auto; }
/* Refine in place: the keys can be pressed again, from the page or the keyboard. */
[data-sub~="hint"] .keystroke { opacity: 0.45; cursor: pointer; }
[data-sub~="hint"] .keystroke:hover { opacity: 0.8; }
.screen:focus { outline: none; }
.screen:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* Selection window: 360 x 440 points, glass with 23pt corners, one pane
   (source, tools, languages, result) and a footer of speaker, Read slowly,
   Refine, Replace and Copy. */
.screen .line { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.grow { flex: 1; }
.win-head { display: flex; align-items: center; gap: calc(9 * var(--u)); padding: calc(16 * var(--u)) calc(20 * var(--u)) calc(10 * var(--u)); font-size: calc(14 * var(--u)); color: var(--win-grey); }
.win-head b { font-family: "Helvetica Neue", sans-serif; font-weight: 500; color: var(--win-ink); }
.win-head .ico { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.sel {
  right: calc(48 * var(--u)); top: calc(54 * var(--u)); width: calc(414 * var(--u));
  border-radius: calc(26 * var(--u)); background: var(--m-panel); -webkit-backdrop-filter: var(--m-blur); backdrop-filter: var(--m-blur); opacity: 0; transform: translateY(calc(10 * var(--u)));
}
.pane { position: relative; margin: 0 calc(11 * var(--u)) calc(11 * var(--u)); padding: calc(14 * var(--u)) calc(18 * var(--u)) calc(10 * var(--u)); border-radius: calc(17 * var(--u)); background: var(--pane-surface); }
/* The text area, as PaneSurface: the input side brighter than the output,
   with the glass still faintly showing through; down the selected-text
   window, across the translator. */
.screen { --pane-in: rgba(255, 255, 255, 0.58); --pane-out: rgba(255, 255, 255, 0.34); }
:root[data-theme="dark"] .screen { --pane-in: rgba(255, 255, 255, 0.025); --pane-out: rgba(0, 0, 0, 0.12); }
.ywin .pane { --pane-surface: linear-gradient(90deg, var(--pane-in) 0%, var(--pane-in) 40%, var(--pane-out) 60%, var(--pane-out) 100%); }
.sel .pane { --pane-surface: linear-gradient(180deg, var(--pane-in) 0%, var(--pane-in) 22%, var(--pane-out) 45%, var(--pane-out) 100%); }
.sel-src { color: var(--win-grey); font-size: calc(15 * var(--u)); line-height: 1.4; }
/* An email layout keeps its greeting line wherever the text appears. */
.sel-src, .ywin-src, .ywin-out { white-space: pre-line; }
.sel-tools { display: flex; gap: calc(12 * var(--u)); color: var(--win-grey); margin: calc(8 * var(--u)) 0 calc(10 * var(--u)); }
.sel-tools .ico, .sel-foot .ico { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.spk-src .stopper { display: none; }
.sel-langs { display: flex; align-items: center; gap: calc(10 * var(--u)); padding-block: calc(8 * var(--u)); border-block: 1px solid var(--win-line); font-size: calc(14 * var(--u)); color: var(--win-grey); }
.sel-langs .ico { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.sel-langs .tgt { margin-left: auto; color: var(--win-ink); font-weight: 600; font-size: calc(15 * var(--u)); }
.sel-out { white-space: pre-line; font-size: calc(22 * var(--u)); line-height: 1.38; min-height: calc(190 * var(--u)); padding-top: calc(12 * var(--u)); transition: opacity 0.25s; }
.sel-foot { display: flex; align-items: center; gap: calc(13 * var(--u)); height: calc(32 * var(--u)); font-size: calc(14 * var(--u)); color: var(--win-grey); }
.sel-foot .replace, .sel-foot .refine { color: var(--accent); font-weight: 500; }
.replace, .refine { border-radius: calc(6 * var(--u)); padding: calc(2 * var(--u)) calc(6 * var(--u)); margin-inline: calc(-6 * var(--u)) 0; transition: background-color 0.15s; }
.last .cancel { display: none; }
[data-sub~="refining"] .last .copyi { display: none; }
[data-sub~="refining"] .last .cancel { display: inline; }
[data-sub~="refining"] .refine { color: var(--win-grey); font-weight: 400; }
[data-sub~="press"] .replace, [data-sub~="menu"] .refine { background: color-mix(in srgb, var(--accent) 16%, transparent); }
[data-sub~="sel"] .sel { opacity: 1; transform: none; }
.streaming::after { content: " \2026"; color: var(--win-grey); }

.spk, .slow { display: flex; }
.spk .stopper { display: none; }
[data-sub~="reading"] .spk { color: var(--accent); }
[data-sub~="reading"] .spk .speaker { display: none; }
[data-sub~="reading"] .spk .stopper { display: block; }
[data-sub~="slow"] .slow { color: var(--accent); }

/* Refine › a style, when the selection window holds a translation. */
.menu {
  position: absolute; z-index: 2; right: calc(74 * var(--u)); bottom: calc(40 * var(--u)); width: calc(190 * var(--u));
  background: var(--win); border: 1px solid var(--win-line); border-radius: calc(10 * var(--u));
  box-shadow: 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, 0.16);
  padding: calc(6 * var(--u)); font-size: calc(14 * var(--u)); opacity: 0; transition: opacity 0.2s; pointer-events: none;
}
.menu p { padding: calc(4 * var(--u)) calc(10 * var(--u)); border-radius: calc(5 * var(--u)); }
.menu .menu-head { color: var(--win-grey); font-size: calc(12 * var(--u)); }
[data-sub~="menu"] .menu { opacity: 1; }
[data-sub~="pick"] .menu .on { background: var(--accent-fill, var(--accent)); color: #fff; }


/* Yullo, ⌃⇧Y: 820 x 430 points, glass with 26pt corners; languages above
   two panes, then each pane's own footer. */
.ywin {
  left: calc(60 * var(--u)); top: calc(76 * var(--u)); width: calc(840 * var(--u));
  border-radius: calc(28 * var(--u)); background: var(--m-panel); -webkit-backdrop-filter: var(--m-blur); backdrop-filter: var(--m-blur); opacity: 0; transform: translateY(calc(10 * var(--u)));
}
[data-sub~="ywin"] .ywin { opacity: 1; transform: none; }
[data-sub~="ywin"] .doc, [data-sub~="desk"] .doc { opacity: 0; }
.ywin-langs { display: grid; grid-template-columns: 1fr auto 1fr; gap: calc(44 * var(--u)); align-items: center; font-weight: 600; font-size: calc(15 * var(--u)); padding-bottom: calc(10 * var(--u)); border-bottom: 1px solid var(--win-line); }
.ywin-langs .ico { width: calc(14 * var(--u)); height: calc(14 * var(--u)); color: var(--win-grey); }
.ywin-langs .swap { transition: color 0.15s; }
.ywin-langs .swap.is-pressed { color: var(--accent); }
.ywin-panes, .ywin-feet { display: grid; grid-template-columns: 1fr 1fr; gap: calc(44 * var(--u)); }
.ywin-panes { padding-block: calc(16 * var(--u)) calc(12 * var(--u)); font-size: calc(23 * var(--u)); line-height: 1.42; min-height: calc(200 * var(--u)); }
.ywin-feet p { display: flex; align-items: center; gap: calc(13 * var(--u)); height: calc(32 * var(--u)); color: var(--win-grey); font-size: calc(14 * var(--u)); }
.ywin-feet .ico { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.ywin-feet .refine { color: var(--accent); font-weight: 500; }
.ywin-src .caret-in { display: inline-block; width: calc(2 * var(--u)); height: 1em; vertical-align: -0.12em; background: var(--accent); }

/* Services › On this Mac: the page the Model library opens from, with
   Browse models… and Import … model…, and the models installed so far. */
/* The Services page as the app draws it, at its width beside the Settings
   sidebar (760 x 620 less the sidebar): its title, the page, and Done. Its
   controls use the system accent: links, the task picker, buttons, progress. */
.stage-lib .screen { --accent: #007aff; }
:root[data-theme="dark"] .stage-lib .screen { --accent: #0a84ff; }
/* Services, as the next version draws it: one card of rows (name, grey
   status, one button), then Cloud voices. Manage models opens the library
   as a sheet over the page; Writing closes it to show the page. */
.svcpage { inset: auto; left: calc(60 * var(--u)); top: calc(20 * var(--u)); width: calc(840 * var(--u)); height: calc(660 * var(--u)); border-radius: calc(16 * var(--u)); background: var(--win); font-size: calc(13 * var(--u)); display: flex; overflow: hidden; }
.sp-card { background: var(--m-card); border-radius: calc(12 * var(--u)); padding: 0 calc(16 * var(--u)); }
.sp-row { display: flex; align-items: center; gap: calc(12 * var(--u)); min-height: calc(50 * var(--u)); padding-block: calc(6 * var(--u)); }
.sp-row + .sp-row { border-top: 1px solid var(--win-line); }
.sp-row p { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--u)); }
.sp-row b { font-weight: 400; font-size: calc(14 * var(--u)); }
.sp-row p span { font-size: calc(12 * var(--u)); color: var(--win-grey); }
.screen .sp-row .btn { font-size: calc(13 * var(--u)); padding: calc(4 * var(--u)) calc(12 * var(--u)); border-radius: calc(7 * var(--u)); background: var(--btn, var(--field)); white-space: nowrap; }
.sp-h { font-weight: 600; font-size: calc(14 * var(--u)); margin: calc(22 * var(--u)) 0 calc(8 * var(--u)); }
.onmac { inset: auto; left: calc(160 * var(--u)); top: calc(70 * var(--u)); width: calc(640 * var(--u)); height: calc(600 * var(--u)); border-radius: calc(16 * var(--u)); background: var(--win); font-size: calc(13 * var(--u)); display: flex; overflow: hidden; transition: opacity 0.35s, transform 0.35s; }
.screen .onmac { background-color: var(--m-sheet, var(--m-window)); }
:root .screen .onmac { box-shadow: 0 calc(24 * var(--u)) calc(70 * var(--u)) rgba(20, 30, 60, 0.28); }
.stage-lib[data-sheet="off"] .onmac { opacity: 0; transform: translateY(calc(16 * var(--u))) scale(0.98); pointer-events: none; }
.page { flex: 1; min-width: 0; padding: calc(26 * var(--u)); display: flex; flex-direction: column; align-items: flex-start; }
.page > * { align-self: stretch; }
/* As in the app, the title and Done stay put and the page between them scrolls. */
.page-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.page-body > * { flex: none; }
/* The page fades out at its scroll edges, as macOS 26 does: at the bottom
   where more follows, and under the title once it has scrolled. */
.stage-lib .page-body { -webkit-mask-image: linear-gradient(#000 calc(100% - 22 * var(--u)), transparent); mask-image: linear-gradient(#000 calc(100% - 22 * var(--u)), transparent); }
.stage-lib .page-body.is-scrolled { -webkit-mask-image: linear-gradient(transparent, #000 calc(22 * var(--u)), #000 calc(100% - 22 * var(--u)), transparent); mask-image: linear-gradient(transparent, #000 calc(22 * var(--u)), #000 calc(100% - 22 * var(--u)), transparent); }
.page-title { font-weight: 600; font-size: calc(26 * var(--u)); line-height: 1.15; margin-bottom: calc(22 * var(--u)); }
.key-access { margin: 0 0 calc(28 * var(--u)); }
.onmac-head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: calc(12 * var(--u)); row-gap: calc(6 * var(--u)); }
/* The two links wrap together, in reading order, when they don't fit beside the heading. */
.onmac-head .lks { display: flex; gap: calc(12 * var(--u)); white-space: nowrap; }
.onmac-head b { font-weight: 600; font-size: calc(14 * var(--u)); margin-right: auto; }
.onmac-head .lk, .key-access .lk { font-size: calc(13 * var(--u)); }
.page-body > .seg { align-self: flex-start; display: grid; grid-template-columns: repeat(3, minmax(calc(91 * var(--u)), 1fr)); margin: calc(12 * var(--u)) 0 0; padding: 0; border-radius: calc(7 * var(--u)); font-size: calc(13 * var(--u)); }
.page-body > .seg span { padding: calc(4 * var(--u)) calc(12 * var(--u)); white-space: nowrap; border-radius: calc(7 * var(--u)); }
.onmac[data-tab="0"] .seg span:nth-child(1), .onmac[data-tab="1"] .seg span:nth-child(2), .onmac[data-tab="2"] .seg span:nth-child(3) { background: var(--accent-fill, var(--accent)); color: #fff; box-shadow: none; }
.page-foot { margin-top: calc(10 * var(--u)); padding-top: calc(14 * var(--u)); border-top: 1px solid var(--win-line); display: flex; justify-content: flex-end; }
/* Done: a regular bordered capsule, large. */
.screen .page-foot .btn { font-size: calc(13 * var(--u)); padding: calc(6 * var(--u)) calc(16 * var(--u)); border-radius: 999px; background: var(--field); border-color: transparent; }
.lk { color: var(--accent); font-size: calc(14 * var(--u)); padding: calc(1 * var(--u)) calc(5 * var(--u)); margin-inline: calc(-5 * var(--u)); border-radius: calc(5 * var(--u)); transition: background-color 0.15s; }
.lk.is-pressed { background: color-mix(in srgb, var(--accent) 16%, transparent); }
/* Installed models sit on the window's card surface, as the app's other cards. */
.inst-h { margin: calc(12 * var(--u)) 0 0; font-size: calc(12 * var(--u)); color: var(--win-grey); }
.installed { margin-top: calc(6 * var(--u)); border-radius: calc(12 * var(--u)); padding: 0 calc(10 * var(--u)); background: var(--m-card); border: 0.5px solid var(--m-rim); }
.inst { display: flex; align-items: center; gap: calc(12 * var(--u)); padding-block: calc(10 * var(--u)); }
.inst + .inst { border-top: 1px solid var(--win-line); }
/* No model for this task yet: the app's quiet line in place of the rows. */
.installed:empty { background: none; border: 0; padding: calc(8 * var(--u)) 0; margin-top: calc(4 * var(--u)); }
.installed:empty::before { content: attr(data-none); font-size: calc(11 * var(--u)); color: var(--win-grey); }
.inst > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
.inst b { font-weight: 500; font-size: calc(13 * var(--u)); color: var(--win-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inst-size, .inst-rate { font-size: calc(12 * var(--u)); color: var(--win-grey); }
.inst-rate .dots { letter-spacing: calc(1 * var(--u)); font-size: calc(11 * var(--u)); vertical-align: calc(0.5 * var(--u)); }
.inst-act { display: flex; align-items: center; gap: calc(10 * var(--u)); font-size: calc(13 * var(--u)); }
.inst-act .btn { font-size: calc(13 * var(--u)); padding: calc(3 * var(--u)) calc(12 * var(--u)); }
.inst-act .btn.is-off { color: var(--win-grey); background: var(--field); border-color: transparent; }
.inst-act .link { color: var(--accent); }
.inst-act .link.is-off { opacity: 0.45; }
.browse { margin-top: calc(12 * var(--u)); border-radius: calc(12 * var(--u)); padding: 0 calc(10 * var(--u)); background: var(--m-card); border: 0.5px solid var(--m-rim); }
.browse-row { display: flex; align-items: center; gap: calc(8 * var(--u)); padding-block: calc(10 * var(--u)); font-size: calc(13 * var(--u)); border-radius: calc(6 * var(--u)); transition: background-color 0.2s; }
.browse-row .disc { transition: transform 0.25s; }
.browse[data-open="true"] .browse-row .disc { transform: rotate(90deg); }
.browse-row.is-pressed { background: color-mix(in srgb, var(--win-ink) 8%, transparent); }
.browse-t { white-space: nowrap; }
.browse-rec { margin-left: auto; min-width: 0; font-size: calc(12 * var(--u)); color: var(--win-grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browse[data-open="true"] .browse-rec { display: none; }
.browse-body { display: none; border-top: 1px solid var(--win-line); }
.browse[data-open="true"] .browse-body { display: block; }
.lib-foot { margin: calc(10 * var(--u)) 0 0; font-size: calc(11 * var(--u)); color: var(--win-grey); }
/* Below On this Mac, as on the app's Services page: two sibling groups,
   Text services (API connection, Command-line tools) and Voice services
   (Cloud voice), 28 pt apart; their sections closed, 13 pt, 8 pt apart. */
.svc { margin-top: calc(28 * var(--u)); }
.svc-head b { display: block; font-weight: 600; font-size: calc(14 * var(--u)); }
.svc-head span { display: block; margin-top: calc(6 * var(--u)); font-size: calc(12 * var(--u)); color: var(--win-grey); }
.svc-sec { margin-top: calc(8 * var(--u)); }
.svc-head + .svc-sec { margin-top: calc(12 * var(--u)); }
.svc-title { display: flex; align-items: center; gap: calc(6 * var(--u)); font-weight: 600; font-size: calc(13 * var(--u)); }
.disc { width: calc(10 * var(--u)); height: calc(10 * var(--u)); fill: none; stroke: var(--win-grey); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.screen .btn.is-pressed { background: var(--accent-fill, var(--accent)); color: #fff; border-color: var(--accent-fill, var(--accent)); }

/* The Model library, inline under On this Mac as on the app's Services page:
   Installed, then a card that opens to Browse models (N) with search and the
   models not yet installed: Download → progress → Use → Selected, and a line
   saying it is now in the list above. Ratings as five circles. */
.stage-lib .screen { aspect-ratio: 960 / 700; }
.screen .btn { display: inline-block; font-size: calc(15 * var(--u)); padding: calc(4 * var(--u)) calc(14 * var(--u)); border-radius: calc(7 * var(--u)); background: var(--btn); border: 1px solid var(--win-line); color: var(--win-ink); transition: background-color 0.15s, color 0.15s; }
.search { display: flex; align-items: center; gap: calc(8 * var(--u)); margin: calc(10 * var(--u)) 0; padding: calc(7 * var(--u)) calc(10 * var(--u)); border-radius: calc(8 * var(--u)); font-size: calc(13 * var(--u)); background: var(--field); color: var(--win-grey); }
.search .ico { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); margin: calc(14 * var(--u)) 0 calc(6 * var(--u)); padding: calc(2 * var(--u)); border-radius: calc(9 * var(--u)); background: var(--field); font-size: calc(14 * var(--u)); text-align: center; }
.seg span { padding: calc(4 * var(--u)); border-radius: calc(7 * var(--u)); transition: background-color 0.2s; }
.seg span.is-pressed { background: color-mix(in srgb, var(--win-ink) 10%, transparent); }
[data-tab="0"] > .seg span:nth-child(1), [data-tab="1"] > .seg span:nth-child(2), [data-tab="2"] > .seg span:nth-child(3) { background: var(--seg-on, #fff); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }
.model {
  display: none; grid-template-columns: 1fr auto; column-gap: calc(20 * var(--u)); row-gap: calc(5 * var(--u));
  padding-block: calc(10 * var(--u)); border-top: 1px solid var(--win-line);
}
.browse[data-tab="0"] .model[data-tab="0"]:not(.is-hidden), .browse[data-tab="1"] .model[data-tab="1"]:not(.is-hidden), .browse[data-tab="2"] .model[data-tab="2"]:not(.is-hidden) { display: grid; }
.m-name { font-size: calc(13 * var(--u)); }
.m-name b { font-weight: 500; }
.rec { color: var(--win-grey); font-size: calc(12 * var(--u)); margin-left: calc(8 * var(--u)); }
.m-rate, .m-meta { color: var(--win-grey); font-size: calc(12 * var(--u)); }
.m-rate .dots { letter-spacing: calc(1 * var(--u)); font-size: calc(10 * var(--u)); vertical-align: calc(1 * var(--u)); }
.m-act { grid-column: 2; grid-row: 1 / 4; align-self: center; display: flex; align-items: center; gap: calc(12 * var(--u)); font-size: calc(13 * var(--u)); }
.m-act .btn { font-size: calc(13 * var(--u)); padding: calc(3 * var(--u)) calc(12 * var(--u)); }
.m-note { grid-column: 1 / -1; display: none; font-size: calc(12 * var(--u)); color: var(--win-grey); }
.model[data-done] .m-note { display: block; }
.m-act .link { color: var(--accent); }
.prog { width: calc(90 * var(--u)); height: calc(5 * var(--u)); border-radius: 9px; background: var(--field); overflow: hidden; }
.prog i { display: block; height: 100%; width: var(--p, 0%); background: var(--accent); }
.m-of { color: var(--win-grey); min-width: calc(120 * var(--u)); font-size: calc(12 * var(--u)); }
.model .prog, .model .m-of, .model .cancel-dl, .model .use, .model .rm { display: none; }
.model[data-state="loading"] .dl, .model[data-state="ready"] .dl, .model[data-state="selected"] .dl { display: none; }
.model[data-state="loading"] .prog, .model[data-state="loading"] .m-of, .model[data-state="loading"] .cancel-dl { display: inline-block; }
.model[data-state="ready"] .use, .model[data-state="ready"] .rm, .model[data-state="selected"] .use, .model[data-state="selected"] .rm { display: inline-block; }
/* A model downloaded in Browse reads as it does in Installed: Selected as a
   disabled grey pill with a faded Remove; a press flashes only while held. */
.model .use { transition: none; }
.model[data-state="selected"] .use { color: var(--win-grey); background: var(--field); border-color: transparent; }
.model[data-state="selected"] .rm { opacity: 0.45; }
.model.is-pressed .btn { background: var(--accent-fill, var(--accent)); color: #fff; border-color: var(--accent-fill, var(--accent)); }

@media (prefers-reduced-motion: reduce) {
  .doc-caret, [data-sub~="listening"] .meter i { animation: none; }
}

/* Engines: a table set as a table. --------------------------------------- */

.lib-demo { align-items: start; row-gap: 32px; }
.task-list { grid-column: 1 / 4; border-top: 1px solid var(--ink); }
.task-list li { border-bottom: 1px solid var(--rule); padding-block: 12px 14px; color: var(--grey); transition: color 0.3s; }
.task-list button { appearance: none; border: 0; background: none; padding: 0; font: inherit; color: inherit; letter-spacing: inherit; cursor: pointer; text-align: left; }
.task-list button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.task-list li.is-active button { color: var(--blue); }
.task-list h3 { font-size: clamp(19px, 1.5vw, 24px); font-weight: 500; letter-spacing: -0.015em; }
.task-list p { font-size: 14px; line-height: 1.45; margin-top: 6px; }
.task-list li.is-active { color: var(--ink); }
.task-list li:not(.is-active) p { display: none; }
.stage-lib { grid-column: 4 / -1; }

/* Ready when you are: four measured moments on the grid, each with what makes
   it short. Figures are ink; blue stays for what Yullo does to text. */
.ready { margin-top: clamp(56px, 7vw, 112px); row-gap: clamp(28px, 3vw, 44px); }
.ready-lead { grid-column: 1 / 8; border-top: 1px solid var(--ink); padding-top: 12px; color: var(--grey); font-size: clamp(16px, 1.2vw, 19px); line-height: 1.28; letter-spacing: -0.01em; max-width: 30em; }
.ready-lead strong { display: block; font-weight: 500; color: var(--ink); font-size: 1.5em; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 4px; }
.ready-figs { display: grid; grid-template-columns: subgrid; row-gap: 32px; margin: 0; }
/* Each moment spans three shared rows, so figures line up when a label wraps. */
.ready-figs > div { grid-column: span 3; grid-row: span 4; display: grid; grid-template-rows: subgrid; row-gap: 0; align-content: start; min-width: 0; max-width: 100%; border-top: 1px solid var(--rule); padding-top: 10px; }
.ready-figs > div > * { min-width: 0; max-width: 100%; }
.ready-figs dt { font: 400 12px/1.4 var(--mono); color: var(--ink); }
.ready-figs dd { margin: 0; font-size: 14px; line-height: 1.35; color: var(--grey); max-width: 18em; }
.ready-figs .fig { margin: 14px 0 10px; color: var(--ink); font-weight: 500; font-size: clamp(42px, 4.6vw, 82px); line-height: 0.9; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* A phrase in place of a number: smaller, sitting on the number's baseline. */
.ready-figs .fig.phrase { display: flex; align-items: flex-end; min-height: 0.9em; white-space: normal; max-width: none; }
.ready-figs .fig.phrase .n { font-size: 0.42em; line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
.ready-figs .unit { font-size: 0.4em; letter-spacing: 0; margin-left: 0.12em; }
/* Yullo against Apple's built-in engine, each line in its own kind of
   figure (a voice becoming words, two sentences back to back, a sentence translated, reading along), drawn by
   script.js and played once on the way into view. Yullo in blue, Apple in a
   quiet grey; with reduced motion each shows its final state. */
.ready-figs { --track: color-mix(in srgb, var(--ink) 16%, transparent); }
/* Captions wrap in balanced lines, so no word or two is left alone. */
.ready-figs > div > dd:last-child { text-wrap: balance; }
.ready-figs > div > dd:last-child:lang(ja) { word-break: auto-phrase; }
/* The four figures share one area, the height of the tallest, each centred
   in it, so every line takes the same space. */
/* Figures start at the top of the shared row, so the Yullo headers of the
   text figures sit on one line. */
.ready-figs .figure { margin: 0 0 12px; max-width: none; min-height: 44px; color: var(--grey); display: flex; flex-direction: column; justify-content: flex-start; }
/* The stopwatch kept about as tall as the other figures. */
.ready-figs .figure[role="button"] { cursor: pointer; }
.ready-figs .figure:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
/* Two sentences back to back: one wave, a hairline where Yullo is ready again. */
.ready-figs .figure > .para-top .who, .ready-figs .figure > .para-top .clk { color: var(--ink); }
.ready-figs .wave.again { margin-top: 6px; --c: var(--blue); }
.ready-figs .wave.again .mark { flex: none; width: 1px; height: 40px; background: var(--ink); }
.ready-figs .vline { display: grid; grid-template-columns: 3.6em minmax(0, 1fr) auto; gap: 8px; align-items: start; min-height: 44px; margin: 0; }
.ready-figs .vline .who, .ready-figs .vline .vt { font: 400 11px/1.4 var(--mono); color: var(--grey); }
.ready-figs .vline.y .who { color: var(--ink); }
.ready-figs .vline .vt { opacity: 0; transition: opacity 0.25s; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ready-figs .vline.done .vt { opacity: 1; color: var(--ink); }
/* The wave and the words share one cell, so the row keeps its height. */
.ready-figs .vbody { display: grid; align-items: start; }
.ready-figs .vbody > * { grid-area: 1 / 1; }
.ready-figs .vsound { display: flex; align-items: center; gap: 6px; }
.ready-figs .wave { display: flex; align-items: center; gap: 3px; height: 40px; overflow: hidden; }
.ready-figs .wave i { flex: none; width: 3px; border-radius: 1px; background: var(--c); height: calc(var(--h) * var(--k, 1)); }
.ready-figs .vline .wait { font: 400 13px/1 var(--mono); color: var(--grey); }
.ready-figs .vtext { visibility: hidden; font-size: 17px; line-height: 1.3; text-wrap: balance; }
.ready-figs .vline.y .vtext { color: var(--blue); }
.ready-figs .vline.done .vsound { visibility: hidden; }
.ready-figs .vline.done .vtext { visibility: visible; animation: ready-in 0.3s ease-out; }
@keyframes ready-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.ready-figs .para + .para { margin-top: 12px; }
.ready-figs .para-top { display: flex; justify-content: space-between; gap: 8px; font: 400 11px/1.4 var(--mono); color: var(--grey); margin-bottom: 3px; }
.ready-figs .para-top .clk { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ready-figs .para.y .para-top .who, .ready-figs .para.on .clk { color: var(--ink); }
.ready-figs .para p { margin: 0; font-size: 13px; line-height: 1.4; color: color-mix(in srgb, var(--ink) 28%, transparent); }
.ready-figs .para .w { transition: color 0.15s; }
.ready-figs .para.y .w.read { color: var(--blue); }
/* A sentence translated: the typed line in ink with its caret, then the
   translation in blue, each after a small language tag. */
.ready-figs .para.tr p { display: flex; gap: 10px; align-items: baseline; color: var(--ink); }
.ready-figs .para.tr p + p { margin-top: 6px; }
.ready-figs .para.tr .lang { flex: none; width: 2.4em; font: 400 11px/1.4 var(--mono); color: var(--grey); }
.ready-figs .para.tr .caret { flex: none; align-self: center; width: 1.5px; height: 1.1em; margin-left: -9px; background: var(--ink); animation: ready-caret 1s steps(1) infinite; }
.ready-figs .para.tr.y .out { color: var(--blue); }
.ready-figs .para.tr.on .out { animation: ready-in 0.3s ease-out; }
@keyframes ready-caret { 50% { opacity: 0; } }
.ready-figs .para .w.cur { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }
@media (prefers-reduced-motion: reduce) {
  .ready-figs .para .w, .ready-figs .vline .vt { transition: none; }
  .ready-figs .vline.done .vtext, .ready-figs .para.tr.on .out, .ready-figs .para.tr .caret { animation: none; }
}
.ready-foot { grid-column: 1 / 9; font: 400 11px/1.4 var(--mono); color: var(--grey); }

/* Made to fit you: three more settings, under See it at work. */
.fit { margin-top: clamp(56px, 7vw, 112px); }
.frags.fit-frags { margin-top: clamp(20px, 2vw, 28px); }
/* Also in Yullo: a few things named, not shown, ending in "and more". */
.frags.fit-frags { padding-bottom: 0; }
.also { margin-top: clamp(28px, 3vw, 44px); padding-bottom: var(--space); }
/* One line across the page where it fits; it wraps only on narrower screens. */
.also p { grid-column: 1 / -1; max-width: 70ch; color: var(--grey); font-size: clamp(16px, 1.2vw, 19px); line-height: 1.35; letter-spacing: -0.01em; }
/* Japanese breaks between phrases and Korean between words, never inside one. */
.also p:lang(ja) { word-break: auto-phrase; }
.also p:lang(ko) { word-break: keep-all; }
@media (max-width: 760px) { .also p { grid-column: 1 / -1; } }
.fit-menu { list-style: none; margin: 0; padding: 4px; border: 1px solid var(--win-line); border-radius: 8px; font-size: 13px; }
.fit-menu li { position: relative; border-radius: 5px; }
.fit-menu li.act, .fit-menu button { padding: 1.5px 8px 1.5px 22px; }
/* The presets can be picked, as in the app's menu. */
.fit-menu button { appearance: none; border: 0; background: none; font: inherit; color: inherit; text-align: left; display: block; width: 100%; border-radius: 5px; cursor: pointer; }
.fit-menu li:not(.on) button:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.fit-menu button:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.fit-menu li.on { background: var(--accent); color: #fff; }
:root[data-theme="dark"] .fit-menu li.on { background: #3d63e0; }
.fit-menu li.on::before { content: "✓"; position: absolute; left: 7px; }
.fit-menu .sep { height: 1px; padding: 0; margin: 3px 6px; background: var(--win-line); }
.fit-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; font-size: 13px; padding-block: 7px; }
.fit-row + .fit-row { border-top: 1px solid var(--win-line); }
/* Neither the word nor its label breaks: when both do not fit, the label
   takes its own line, still at the right. */
.fit-row b { font-weight: 500; white-space: nowrap; }
.fit-row span { color: var(--win-grey); text-align: right; white-space: nowrap; margin-left: auto; }
/* What dictation writes, as in Settings: 34 pt rows on hairlines, the name
   leading, two equal pop-up buttons ending on one trailing edge, the "in"
   column kept even where it is empty, then the remove button. */
.wd-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 1.6em minmax(0, 1fr) 14px; align-items: center; column-gap: 6px; min-height: 34px; font-size: 12.5px; margin: 0; }
.wd-row + .wd-row { border-top: 1px solid var(--win-line); }
.wd-row b { font-weight: 400; display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wd-row .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-app { width: 16px; height: 16px; flex: none; }
.wd-row .pop { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-width: 0; height: 22px; padding: 0 5px 0 8px; border-radius: 5px; background: var(--field, color-mix(in srgb, var(--ink) 7%, transparent)); color: var(--win-ink); font-size: 12px; white-space: nowrap; overflow: hidden; }
.wd-row .pop svg { width: 7px; height: 10px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; opacity: 0.7; }
.wd-row i { font-style: normal; color: var(--win-grey); font-size: 11.5px; text-align: center; white-space: nowrap; }
.wd-rm { width: 14px; height: 14px; fill: none; stroke: var(--win-grey); stroke-width: 1.1; }
/* In a narrow card the name takes its own line above the two buttons, so
   neither is cut to an ellipsis. */
.fit-frags .frag-ui > div { container-type: inline-size; }
@container (max-width: 420px) {
  .wd-row:not(.fit-row) { grid-template-columns: minmax(0, 1fr) 1.4em minmax(0, 1fr) 14px; column-gap: 4px; row-gap: 5px; padding-block: 7px; }
  .wd-row:not(.fit-row) .pop { padding-left: 7px; }
  .wd-row:not(.fit-row) b { grid-column: 1 / -1; }
}
@container (max-width: 320px) {
  .wd-row:not(.fit-row) .pop { font-size: 11px; }
  .wd-row:not(.fit-row) { column-gap: 3px; }
}
/* The menus can be opened, the apps removed and added back. */
.wd, .vocab { position: relative; }
.wd-row button.pop { appearance: none; border: 0; font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.wd-row button.pop:hover, .wd-row button.pop[aria-expanded="true"] { background: color-mix(in srgb, var(--win-ink) 12%, transparent); }
.wd-row button:focus-visible, .vocab button:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.wd-row button.wd-rm { appearance: none; border: 0; background: none; padding: 0; width: 14px; height: 14px; cursor: pointer; display: grid; }
.wd-row button.wd-rm svg { width: 14px; height: 14px; fill: none; stroke: var(--win-grey); stroke-width: 1.1; }
.wd-row button.wd-rm:hover svg { stroke: var(--win-ink); }
.wd-row[hidden] { display: none; }
.wd-add { margin: 0; padding-top: 8px; border-top: 1px solid var(--win-line); display: flex; gap: 6px; flex-wrap: wrap; }
.wd-add[hidden] { display: none; }
.wd-add .btn { appearance: none; border: 0; font: inherit; font-size: 12px; padding: 3px 10px; border-radius: 5px; background: var(--field, color-mix(in srgb, var(--ink) 7%, transparent)); color: var(--win-ink); cursor: pointer; }
.wd-menu { position: absolute; z-index: 4; list-style: none; margin: 0; padding: 4px; background: var(--win); color: var(--win-ink); border: 1px solid var(--win-line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); font-size: 12.5px; max-height: 260px; overflow: auto; }
.wd-menu[hidden] { display: none; }
.wd-menu button { appearance: none; border: 0; background: none; font: inherit; color: inherit; display: block; width: 100%; text-align: left; white-space: nowrap; padding: 2.5px 12px 2.5px 22px; border-radius: 5px; position: relative; cursor: pointer; }
.wd-menu button[aria-checked="true"]::before { content: "✓"; position: absolute; left: 7px; }
.wd-menu button:hover, .wd-menu button:focus-visible { background: var(--accent); color: #fff; outline: none; }
:root[data-theme="dark"] .wd-menu button:hover, :root[data-theme="dark"] .wd-menu button:focus-visible { background: #3d63e0; }
/* Personal vocabulary: the use is a quiet button that switches; a word typed
   below joins the list. */
.vocab-list { list-style: none; margin: 0; padding: 0; }
.vocab-list .wd-row { gap: 10px; }
.vocab .vk { appearance: none; border: 0; background: none; font: inherit; font-size: 12.5px; color: var(--win-grey); margin-left: auto; padding: 2px 4px; border-radius: 4px; cursor: pointer; white-space: nowrap; }
.vocab .vk:hover { color: var(--win-ink); background: color-mix(in srgb, var(--win-ink) 7%, transparent); }
.vocab .wd-rm { appearance: none; border: 0; background: none; padding: 0; width: 14px; height: 14px; cursor: pointer; display: grid; flex: none; }
.vocab .wd-rm svg { width: 14px; height: 14px; fill: none; stroke: var(--win-grey); stroke-width: 1.1; }
.vocab-list b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.vocab-add { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--win-line); }
.vocab-add[hidden] { display: none; }
.vocab-add input { flex: 1; min-width: 0; font: inherit; font-size: 12.5px; color: var(--win-ink); background: var(--field, color-mix(in srgb, var(--ink) 7%, transparent)); border: 0; border-radius: 6px; padding: 5px 9px; }
.vocab-add input::placeholder { color: var(--win-grey); }
.vocab-add input:focus-visible { outline: 2px solid transparent; box-shadow: 0 0 0 2px var(--win, var(--paper)), 0 0 0 4px var(--blue); }
.vocab-add button { appearance: none; border: 0; flex: none; width: 24px; height: 24px; border-radius: 6px; background: var(--field, color-mix(in srgb, var(--ink) 7%, transparent)); color: var(--win-ink); cursor: pointer; display: grid; place-items: center; }
.vocab-add button svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
/* Personal vocabulary keeps its content on the same rows. */
.fit-row.wd-row { display: flex; padding-block: 0; }
.fit-row.wd-row b { font-weight: 400; }
/* The format menu's section heading for your own presets. */
.fit-menu .menu-h { padding: 3px 8px 1px; font-size: 11px; font-weight: 600; color: var(--win-grey); }

/* Three settings, drawn at their real size on the same desk as the stages. */
/* Panels share one row and captions the next, so every edge lines up. */
.frags { margin-top: clamp(56px, 7vw, 112px); padding-bottom: var(--space); grid-template-rows: auto auto; row-gap: 16px; }
.frag { grid-column: span 4; grid-row: span 2; display: grid; grid-template-rows: subgrid; row-gap: 16px; }
.frag-ui {
  --win: #fff; --win-ink: #1f2830; --win-grey: #6e7277; --win-line: rgba(0, 0, 0, 0.1); --field: rgba(0, 0, 0, 0.06); --accent: #2448d8; --desk: #e3e0d8;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", sans-serif; font-size: 13px; line-height: 1.35;
  background: var(--desk); padding: clamp(14px, 1.6vw, 24px); flex: 1;
  display: flex; align-items: stretch;
}
.frag-ui > div { width: 100%; display: flex; flex-direction: column; background: var(--win); color: var(--win-ink); border: 1px solid var(--win-line); border-radius: 10px; padding: 14px 16px; min-height: 128px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06); }
:root[data-theme="dark"] .frag-ui { --win: #2a2a2d; --win-ink: #f5f5f7; --win-grey: #98989f; --win-line: rgba(255, 255, 255, 0.1); --field: rgba(255, 255, 255, 0.08); --seg-on: rgba(255, 255, 255, 0.24); --accent: #89a1ff; --desk: #232326; }
.frag-title { font-weight: 600; font-size: 14px; margin-bottom: 10px; }
.frag-cap { color: var(--win-grey); font-size: 12px; margin-top: 10px; }
.segm button { appearance: none; border: 0; background: none; font: inherit; color: inherit; padding: 3px 6px; border-radius: 6px; cursor: pointer; transition: background-color 0.2s; }
.segm button[aria-checked="true"] { background: var(--seg-on, #fff); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }
.segm button:focus-visible, .popup:focus-visible, .frag .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.segm { display: grid; grid-template-columns: 1fr 1fr; padding: 2px; border-radius: 8px; background: var(--field); text-align: center; }
.frag-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.select { position: relative; }
/* Item text in the menu sits exactly over the button text (24 + 4 + 1 - 10 - 1 = 18px), the
   checkmark hangs in the margin, and the right edges meet, as in a macOS pop-up menu. */
.popup { appearance: none; display: inline-flex; align-items: center; justify-content: space-between; gap: 6px; font: inherit; color: var(--win-ink); background: var(--win); padding: 3px 8px 3px 10px; border-radius: 6px; border: 1px solid var(--win-line); cursor: pointer; white-space: nowrap; }
.popup svg { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 1.6; color: var(--win-grey); }
.popup[aria-expanded="true"] { border-color: var(--accent); }
.options {
  position: absolute; z-index: 5; left: -18px; top: calc(100% + 4px); min-width: 100%; margin: 0; padding: 4px; list-style: none;
  background: var(--win); color: var(--win-ink); border: 1px solid var(--win-line); border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
}
.options li { position: relative; padding: 4px 12px 4px 24px; border-radius: 5px; white-space: nowrap; cursor: pointer; }
.options li[aria-selected="true"]::before { content: "✓"; position: absolute; left: 8px; }
.options li.is-current { background: var(--accent); color: #fff; }
/* The writers grouped as the app's chooser groups them: on this Mac, online. */
.options li.opt-h { padding: 5px 12px 1px 10px; font-size: 11px; font-weight: 600; color: var(--win-grey); cursor: default; }
.options li.opt-h:first-child { padding-top: 2px; }
.options li.opt-sep { height: 1px; padding: 0; margin: 4px 8px; background: var(--win-line); cursor: default; }
.options li.opt-act { cursor: default; }
/* Processing: what runs where for the choice, in the app's real-name style. */
.proc-rows { margin-top: 10px; border-top: 1px solid var(--win-line); }
.proc-rows .wd-row b { font-weight: 400; }
.proc-rows .wd-row span i { font-style: normal; }
.proc-rows[data-mode="local"] [data-for="online"], .proc-rows[data-mode="online"] [data-for="local"] { display: none; }
.proc-rows[data-mode="online"] [data-for="online"] { color: var(--win-ink); }
.proc-rows[data-mode="local"] .options [data-online] { display: none; }
.proc-rows[data-mode="online"] .proc-writer.is-online { color: var(--win-ink); }
/* As the next version's editors draw them: a grey pop-up with up-down
   chevrons, and the key with its Keychain label, Save key and Forget. */
.frag .popup { border: 0; background: var(--field, color-mix(in srgb, var(--ink) 7%, transparent)); border-radius: 5px; padding: 3px 7px 3px 10px; min-width: 9em; }
.frag .popup svg { width: 7px; height: 10px; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.frag .popup[aria-expanded="true"] { outline: 2px solid transparent; box-shadow: 0 0 0 2px var(--accent); }
.key-title { display: flex; align-items: center; }
.kc { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 400; color: var(--win-grey); }
.kc svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1; }
.frag-key .field { border-radius: 5px; }
.key-acts { display: flex; align-items: center; gap: 14px; margin-top: 8px; font-size: 12px; }
.key-acts .btn { font-size: 12px; padding: 2px 10px; }
.key-acts .lk { color: var(--accent); }
.tag { font-size: 10px; font-weight: 400; color: var(--win-grey); border: 1px solid var(--win-line); border-radius: 4px; padding: 1px 5px; margin-left: 4px; vertical-align: 1px; }
.field { flex: 1; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--win-line); color: var(--win-grey); letter-spacing: 1px; overflow: hidden; white-space: nowrap; }
.frag .btn { appearance: none; font: inherit; color: var(--win-ink); background: var(--win); padding: 3px 10px; border-radius: 6px; border: 1px solid var(--win-line); white-space: nowrap; cursor: pointer; }
.frag .btn:active { background: var(--accent); color: #fff; border-color: var(--accent); }
.ok { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; color: var(--win-grey); transition: opacity 0.3s; }
.ok .ico { width: 14px; height: 14px; fill: #2e9e4f; }
.frag-key:not(.is-saved) .ok { opacity: 0; }
.frag-key.is-saved .ok { animation: rise 0.3s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(3px); } }
.frag figcaption { border-top: 1px solid var(--ink); padding-top: 12px; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.28; letter-spacing: -0.01em; max-width: 20em; }
.frag figcaption { color: var(--grey); }
.frag-row > span:first-child { white-space: nowrap; }
/* A long label wraps inside its half on narrow cards, never past the track. */
.segm button { min-width: 0; padding: 4px 12px; text-wrap: balance; line-height: 1.25; }
.frag figcaption strong { display: block; font-weight: 500; color: var(--ink); font-size: 1.5em; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 4px; }

/* Install ----------------------------------------------------------------- */

/* The version under the download (the requirements are in the section note); the how-to after it. */
/* Install: the agent or the one-line Terminal command, in one cell so the
   plate keeps its height when the tab changes. */
.install-ways .specimen { display: grid; }
.install-ways .mode-panel { grid-area: 1 / 1; min-width: 0; }
.install-ways .mode-panel[hidden] { display: block; visibility: hidden; }
.install-ways .oneline { margin: 0 0 10px; }
.oneline .term { min-height: 0; padding: 12px 16px 14px; }
/* The disk image, last and smallest: a plain link, its version, one note. */
.dmg { display: inline-block; margin-bottom: 10px; font-size: clamp(17px, 1.4vw, 22px); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
.dmg span { color: var(--blue); }
.download-meta { margin-bottom: 4px; }
.download-note { color: var(--grey); }
.download-note a { color: var(--ink); }

/* Build from source: two ways, chosen on the left like the task list. */
.modes { margin-top: 18px; border-top: 1px solid var(--rule); }
.modes button {
  appearance: none; border: 0; background: none; font: inherit; cursor: pointer; text-align: left;
  display: block; width: 100%; padding: 10px 0; border-bottom: 1px solid var(--rule);
  font-size: clamp(16px, 1.2vw, 19px); font-weight: 500; letter-spacing: -0.01em; color: var(--grey);
}
.modes button:hover { color: var(--ink); }
.modes button[aria-selected="true"] { color: var(--blue); }
.modes button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.mode-panel[hidden] { display: none; }

/* Requirements as a footnote under both panels. */
.needs { margin-top: 26px; font-size: 10.5px; line-height: 1.6; color: var(--grey); }
.needs::before { content: ""; display: block; width: 40px; border-top: 1px solid var(--grey); margin-bottom: 8px; }
.needs .tok { color: var(--ink); white-space: nowrap; }
.needs .sep { margin: 0 6px; }

/* Terminal, as macOS draws its Basic profile: plain window, monospaced text. */
.terminal { margin-top: 12px; border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; background: var(--term, #fff); color: var(--term-ink, #111); }
:root[data-theme="dark"] .terminal { --term: #1c1c1e; --term-ink: #ececec; }
.term-bar { display: flex; align-items: center; gap: 7px; padding: 9px 12px; border-bottom: 1px solid var(--rule); font-size: 12px; color: var(--grey); }
.term-bar i { width: 11px; height: 11px; border-radius: 50%; }
.term-bar span { flex: 1; text-align: center; }
/* The window title keeps to one line; a long one ends in an ellipsis. */
.term-bar > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.term { padding: 14px 16px 18px; font-size: 13px; line-height: 1.65; min-height: 19.5em; }
/* Syntax colours: prompt user and folder, commands in ink, flags in amber,
   paths and URLs in blue, output in grey, success in green. */
.terminal { --tk-green: #2f7d4f; --tk-amber: #a8590c; --tk-blue: #2448d8; }
:root[data-theme="dark"] .terminal { --tk-green: #74cf93; --tk-amber: #eda461; --tk-blue: #8aa2ff; }
.tk-p { color: var(--grey); user-select: none; }
.tk-u { color: var(--tk-green); }
.tk-d, .tk-path, .tk-url, .tk-chev { color: var(--tk-blue); }
.tk-f { color: var(--tk-amber); }
.term .out.ok { color: var(--tk-green); }
.term.is-playing .ch:not(.on) { visibility: hidden; }
.term .ch.at { box-shadow: 0.55em 0 0 currentColor; }
.term .out { color: var(--grey); }
.term.is-playing .ln:not(.is-shown) { visibility: hidden; }
/* The agent prompt: the same terminal window, with the agent's › prompt. */
.agent { margin-top: 0; }
.agent .term-bar span { text-align: center; }
.agent-body { padding: 14px 16px 16px; font: 13px/1.65 var(--mono); }
.agent-sent { padding: 6px 10px; margin: 0 -10px 12px; border-radius: 6px; background: color-mix(in srgb, var(--rule) 45%, transparent); transition: opacity 0.3s; }
.agent.is-composing .agent-sent { display: none; }
.agent-input { display: flex; align-items: flex-start; gap: 8px; border: 1px solid var(--rule); border-radius: 8px; padding: 9px 10px 9px 12px; min-height: 3.6em; }
.agent-typed { flex: 0 1 auto; }
.agent-caret { width: 0.55em; height: 1.2em; background: currentColor; flex: none; animation: blink 1s steps(1) infinite; margin-right: auto; }
.agent-input kbd { align-self: flex-end; font-size: 12px; padding: 3px 6px; border: 1px solid var(--rule); border-radius: 4px; transition: background-color 0.15s, color 0.15s; }
.agent-input kbd.is-pressed { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.copybtn {
  appearance: none; display: inline-flex; align-items: center; gap: 6px; flex: none;
  font: 12px/1 var(--mono); color: var(--ink); background: var(--paper);
  border: 1px solid var(--ink); border-radius: 7px; padding: 7px 11px; cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.copybtn svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.copybtn:hover { background: var(--ink); color: var(--paper); }
.copybtn .cb-t { display: grid; }
.copybtn .cb-t > span { grid-area: 1 / 1; }
.copybtn .cb-t > span + span, .copybtn.is-done .cb-t > span:first-child, .copybtn .cb-check, .copybtn.is-done .cb-copy { visibility: hidden; }
.copybtn.is-done .cb-t > span + span { visibility: inherit; }
.copybtn .cb-check { display: none; stroke-linecap: round; stroke-linejoin: round; }
.copybtn.is-done .cb-check { display: block; visibility: inherit; }
.copybtn.is-done .cb-copy { display: none; }
.copybtn.small { padding: 4px 8px; border-color: var(--rule); background: transparent; color: var(--grey); }
.copybtn.small:hover { border-color: var(--ink); color: var(--ink); background: transparent; }

code { font-family: var(--mono); font-size: 0.82em; }
code, .nb { white-space: nowrap; }
pre {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  padding-top: 0.15em;
}
pre code { font-size: inherit; }
/* One command per line; a long one wraps at its spaces under a hanging indent. */
pre code > span, .term .ln { display: block; white-space: pre-wrap; overflow-wrap: break-word; padding-left: 2ch; text-indent: -2ch; }

.aside {
  margin-top: 14px;
  max-width: 36em;
  color: var(--grey);
  font-size: 15px;
  line-height: 1.45;
}

/* Colophon ---------------------------------------------------------------- */

.colophon {
  border-top: 1px solid var(--ink);
  padding-top: 12px;
  padding-bottom: 40px;
  row-gap: 40px;
  font-size: 13px;
  line-height: 1.5;
  align-items: start;
}
.colophon-mark { grid-column: 1 / 4; font-weight: 500; font-size: 21px; letter-spacing: -0.02em; line-height: 1; }
/* One trademark sign for the lockup, here only: small, in the fine print's grey, a notice rather than part of the mark. */
.colophon-mark .tm { font-size: 0.4em; font-weight: 400; letter-spacing: 0; vertical-align: top; position: relative; top: -0.1em; margin-left: 0.1em; color: var(--grey); }
/* The license as fine print: small, grey, a short measure. */
.colophon-license { grid-column: 4 / 9; color: var(--grey); font-size: 11px; line-height: 1.55; max-width: 44em; }
.colophon-license a { color: var(--ink); }
.colophon-license p + p { margin-top: 0.5em; }
.colophon-links { grid-column: 10 / -1; }
.colophon-links li { border-bottom: 1px solid var(--rule); padding-block: 4px; }
.colophon-links a { text-decoration: none; display: block; }

.install .plate { padding-bottom: clamp(48px, 6vw, 96px); }
.install .plate:last-child { padding-bottom: var(--space); }

/* The masthead is the page's running head: it stays on top while reading
   on wider screens and underlines the section in view. */
@media (min-width: 761px) {
  .masthead { position: sticky; top: 0; z-index: 20; background: var(--paper); padding-bottom: 14px; box-shadow: 0 1px 0 transparent; transition: box-shadow 0.2s; }
  .masthead.is-stuck { box-shadow: 0 1px 0 var(--rule); }
  /* Reading progress: the running head's hairline fills as the page is read. */
  .masthead::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: var(--ink); transform-origin: left; transform: scaleX(var(--progress, 0));
    opacity: 0; transition: opacity 0.2s;
  }
  .masthead.is-stuck::after { opacity: 1; }
}
.masthead-nav a[aria-current="true"] { text-decoration: underline; text-underline-offset: 0.35em; }

/* Links land just below the running head. */
html { scroll-padding-top: calc(var(--head, 0px) + 8px); }

/* First launch: the guide's stages beside the real Welcome window. */
.guide-list { margin-top: 18px; border-top: 1px solid var(--rule); }
.guide-list li { display: flex; gap: 0.7em; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: clamp(16px, 1.2vw, 19px); font-weight: 500; letter-spacing: -0.01em; }
.guide-list li { padding: 0; }
.guide-list button { appearance: none; border: 0; background: none; font: inherit; color: var(--grey); letter-spacing: inherit; cursor: pointer; text-align: left; display: flex; gap: 0.7em; align-items: baseline; width: 100%; padding: 10px 0; transition: color 0.3s; }
.guide-list button:hover, .guide-list li.is-active button { color: var(--ink); }
.guide-list li.is-active .mono { color: var(--blue); }
.guide-list button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.guide-list .mono { color: var(--grey); font-weight: 400; }
.welcome-plate .specimen { border-top: 0; padding-top: 0; }

/* Welcome window: 700pt page, 36pt gutters, icon and wordmark, the four
   capabilities with blue symbols and key caps, notes, then Not now / Set up. */
/* The frame follows the window's own height, so every language fits with
   equal margins above and below. */
.stage-welcome .screen { aspect-ratio: auto; padding: calc(30 * var(--u)) 0; }
.welcome-win { position: relative; margin: 0 auto; width: calc(760 * var(--u)); border-radius: calc(12 * var(--u)); transition: opacity 0.35s, transform 0.35s, width 0.45s cubic-bezier(0.3, 0, 0.2, 1); }
/* Set up Yullo focuses the window on the guide alone: 640pt wide, no sidebar.
   Done closes it, and the burst plays on where it was. */
[data-scene="guide"] .welcome-win, [data-scene="closed"] .welcome-win { width: calc(640 * var(--u)); }
[data-scene="closed"] .welcome-win { opacity: 0; transform: scale(0.98); }
.wl { padding: calc(14 * var(--u)) calc(36 * var(--u)) calc(24 * var(--u)); font-size: calc(13 * var(--u)); }
.wl-brand { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.wl-icon { width: calc(38 * var(--u)); height: calc(38 * var(--u)); }
.wl-icon.is-dark { display: none; }
.wl-brand b { font-family: "Helvetica Neue", sans-serif; font-weight: 500; font-size: calc(34 * var(--u)); letter-spacing: calc(-1 * var(--u)); line-height: 1; }
.wl-tagline { margin-top: calc(18 * var(--u)); font-size: calc(26 * var(--u)); font-weight: 600; letter-spacing: calc(-0.5 * var(--u)); line-height: 1.15; }
.wl-caps { margin-top: calc(16 * var(--u)); list-style: none; padding: 0; }
.wl-caps li { position: relative; display: grid; grid-template-columns: calc(26 * var(--u)) 1fr auto; column-gap: calc(12 * var(--u)); align-items: start; padding: calc(9 * var(--u)) 0; }
.wl-caps li + li::before { content: ""; position: absolute; top: 0; right: 0; left: calc(38 * var(--u)); border-top: 1px solid var(--win-line); }
.wl-sym { width: calc(20 * var(--u)); height: calc(20 * var(--u)); color: var(--accent); justify-self: center; }
.wl-caps b { display: block; font-size: calc(14 * var(--u)); font-weight: 600; }
.wl-caps span { display: block; margin-top: calc(3 * var(--u)); font-size: calc(12.5 * var(--u)); color: var(--win-grey); line-height: 1.35; }
.screen .wl-caps kbd {
  align-self: center; font-size: calc(12 * var(--u)); font-weight: 500; color: var(--win-ink);
  padding: calc(2 * var(--u)) calc(7 * var(--u)); border-radius: calc(5 * var(--u)); border: 1px solid var(--win-line); background: var(--field); min-width: 0;
}
.wl-notes { margin-top: calc(16 * var(--u)); list-style: none; padding: 0; display: grid; row-gap: calc(8 * var(--u)); }
.wl-notes li { display: grid; grid-template-columns: calc(26 * var(--u)) 1fr; column-gap: calc(12 * var(--u)); align-items: start; font-size: calc(12 * var(--u)); color: var(--win-grey); line-height: 1.4; }
.wl-note { width: calc(15 * var(--u)); height: calc(15 * var(--u)); justify-self: center; margin-top: calc(1 * var(--u)); }
svg.wl-note:not(.line) { fill: currentColor; }
.wl-foot { display: flex; align-items: center; gap: calc(10 * var(--u)); margin-top: calc(20 * var(--u)); padding-top: calc(14 * var(--u)); border-top: 1px solid var(--win-line); font-size: calc(12 * var(--u)); color: var(--win-grey); }
.wl-foot p { flex: 1; display: grid; row-gap: calc(2 * var(--u)); }
.wl-btn { font-size: calc(13 * var(--u)); padding: calc(5 * var(--u)) calc(14 * var(--u)); border-radius: calc(7 * var(--u)); border: 1px solid var(--win-line); background: var(--btn); color: var(--win-ink); white-space: nowrap; }
.wl-btn.is-default { background: var(--accent-fill, var(--accent)); border-color: var(--accent-fill, var(--accent)); color: #fff; }
:root[data-theme="dark"] .wl-icon.is-light { display: none; }
:root[data-theme="dark"] .wl-icon.is-dark { display: block; }

/* Settings window during the guide: 202pt sidebar (Quick setup selected),
   the guide in the detail pane: header, numbered step rail, step, footer.
   Both scenes share one window, which keeps one height. */
.welcome-plate .specimen { position: relative; }
.welcome-win { min-height: calc(640 * var(--u)); display: flex; flex-direction: column; }
[data-scene="welcome"] .st, [data-scene="guide"] .wl, [data-scene="closed"] .wl { display: none; }
.st { flex: 1; display: flex; font-size: calc(13 * var(--u)); }
.guide { flex: 1; display: flex; flex-direction: column; padding: calc(12 * var(--u)) calc(24 * var(--u)) calc(24 * var(--u)); min-width: 0; }
.g-head { display: flex; align-items: center; gap: calc(8 * var(--u)); padding-bottom: calc(10 * var(--u)); border-bottom: 1px solid var(--win-line); }
.g-head .wl-icon { width: calc(26 * var(--u)); height: calc(26 * var(--u)); }
.g-head b { font-family: "Helvetica Neue", sans-serif; font-weight: 500; font-size: calc(25 * var(--u)); letter-spacing: calc(-0.6 * var(--u)); line-height: 1; }
.g-head .mono { margin-left: auto; font-size: calc(10 * var(--u)); color: var(--win-grey); }
/* At this width the rail stands beside the steps: 112pt, 22pt apart. */
.g-main { display: flex; align-items: flex-start; gap: calc(26 * var(--u)); margin-top: calc(18 * var(--u)); }
/* Explore scrolls inside the window, as the app's guide does: a Try's result
   lengthens the sample card, and the rows below run on out of view. */
.st, .guide { min-height: 0; }
[data-g="4"] .g-main { flex: 1; min-height: 0; }
[data-g="4"] .g-body { align-self: stretch; overflow: hidden; }
.g-rail { flex: none; width: calc(112 * var(--u)); display: flex; flex-direction: column; gap: calc(22 * var(--u)); padding-top: calc(3 * var(--u)); font-size: calc(12 * var(--u)); color: var(--win-grey); }
.g-rail span { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); white-space: nowrap; }
.g-rail i { display: grid; place-items: center; width: calc(21 * var(--u)); height: calc(21 * var(--u)); border-radius: 50%; border: 1px solid color-mix(in srgb, var(--win-grey) 35%, transparent); font: normal calc(10 * var(--u))/1 var(--mono); }
[data-g="1"] .g-rail [data-n="1"], [data-g="2"] .g-rail [data-n="2"], [data-g="3"] .g-rail [data-n="3"], [data-g="4"] .g-rail [data-n="4"] { color: var(--accent); font-weight: 600; }
[data-g="1"] .g-rail [data-n="1"] i, [data-g="2"] .g-rail [data-n="2"] i, [data-g="3"] .g-rail [data-n="3"] i, [data-g="4"] .g-rail [data-n="4"] i { background: var(--accent-fill, var(--accent)); border-color: var(--accent-fill, var(--accent)); color: #fff; }
[data-g="2"] .g-rail [data-n="1"] i, [data-g="3"] .g-rail [data-n="1"] i, [data-g="3"] .g-rail [data-n="2"] i, [data-g="4"] .g-rail [data-n]:not([data-n="4"]) i { font-size: 0; }
[data-g="2"] .g-rail [data-n="1"] i::after, [data-g="3"] .g-rail [data-n="1"] i::after, [data-g="3"] .g-rail [data-n="2"] i::after, [data-g="4"] .g-rail [data-n]:not([data-n="4"]) i::after { content: "✓"; font-size: calc(11 * var(--u)); color: var(--win-ink); }
.g-body { flex: 1; min-width: 0; }
.g-step { display: none; }
[data-g="1"] .g-step[data-g="1"], [data-g="2"] .g-step[data-g="2"], [data-g="3"] .g-step[data-g="3"], [data-g="4"] .g-step[data-g="4"] { display: block; }
.g-title { font-size: calc(24 * var(--u)); font-weight: 600; letter-spacing: calc(-0.4 * var(--u)); line-height: 1.15; }
.g-intro { margin: calc(8 * var(--u)) 0 calc(16 * var(--u)); color: var(--win-grey); }
.g-row { display: flex; align-items: center; justify-content: space-between; gap: calc(12 * var(--u)); margin: calc(9 * var(--u)) 0; }
.g-small { font-size: calc(12 * var(--u)); }
.g-grey { color: var(--win-grey); }
.g-link { color: var(--accent); }
.g-medium { font-weight: 500; }
.g-body hr { border: 0; border-top: 1px solid var(--win-line); margin: calc(14 * var(--u)) 0; }
.g-pop { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); padding: calc(3 * var(--u)) calc(8 * var(--u)) calc(3 * var(--u)) calc(10 * var(--u)); border: 1px solid var(--win-line); border-radius: calc(6 * var(--u)); background: var(--btn); }
.pop-chev { width: calc(9 * var(--u)); height: calc(9 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.6; color: var(--win-grey); }
/* Recognition model, as RecognitionModelPicker: setup starts on Apple Speech;
   the menu lists it, then compact models under Not downloaded, then Model
   library…. Picking one only makes it pending (its ratings, Download (size)
   and which recognizer dictation keeps); Download shows progress, and once
   installed it is the selection. Without data-rec the window shows the result. */
.g-pick { position: relative; flex: 0 1 auto; min-width: 0; }
.g-recog > span:first-child { white-space: nowrap; }
.g-recog .g-pop { max-width: 100%; box-sizing: border-box; white-space: nowrap; }
.g-recog .g-pop > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.g-pop .g-down { margin-right: calc(-1 * var(--u)); }
.g-c-apple, .g-c-pending, [data-rec] .g-c-model { display: none; }
:is([data-rec="apple"], [data-rec="menu"], [data-rec="pick"]) .g-c-apple { display: inline; }
:is([data-rec="pending"], [data-rec="loading"]) .g-c-pending { display: inline-flex; align-items: center; gap: calc(5 * var(--u)); }
[data-rec="ready"] .g-c-model { display: inline; }
:root :is([data-rec="menu"], [data-rec="pick"]) .welcome-win .g-recog .g-pop { border-color: var(--accent); }
.g-menu {
  position: absolute; z-index: 3; right: calc(-6 * var(--u)); top: calc(-6 * var(--u)); width: max-content;
  display: flex; flex-direction: column; padding: calc(5 * var(--u));
  background: var(--win); border: 1px solid var(--win-line); border-radius: calc(8 * var(--u));
  box-shadow: 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, 0.18);
  font-size: calc(13 * var(--u)); white-space: nowrap; opacity: 0; transition: opacity 0.15s; pointer-events: none;
}
:is([data-rec="menu"], [data-rec="pick"]) .g-menu { opacity: 1; }
.g-menu .menu-head { padding: calc(3 * var(--u)) calc(10 * var(--u)) calc(2 * var(--u)) calc(22 * var(--u)); color: var(--win-grey); font-size: calc(11 * var(--u)); }
.g-sep { height: 1px; margin: calc(4 * var(--u)) calc(8 * var(--u)); background: var(--win-line); }
.g-opt { display: flex; align-items: center; gap: calc(6 * var(--u)); padding: calc(2.5 * var(--u)) calc(12 * var(--u)) calc(2.5 * var(--u)) 0; border-radius: calc(4 * var(--u)); }
.g-opt i { width: calc(16 * var(--u)); text-align: right; font-style: normal; flex: none; }
.g-down { width: calc(12 * var(--u)); height: calc(12 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.1; flex: none; }
[data-rec="pick"] .g-o-pick { background: var(--accent-fill, var(--accent)); color: #fff; }
/* Under the menu: the ratings, then Not downloaded with Download (size) or
   the progress, then the recognizer dictation keeps meanwhile. */
.g-under { display: flex; flex-direction: column; gap: calc(6 * var(--u)); margin: calc(-3 * var(--u)) 0 calc(9 * var(--u)); }
.g-under > * { display: none; margin: 0; }
.stage-welcome:not([data-rec]) .g-rate, :is([data-rec="pending"], [data-rec="loading"], [data-rec="ready"]) .g-rate { display: block; }
[data-rec="pending"] .g-dlrow { display: flex; }
[data-rec="loading"] .g-dling { display: block; }
:is([data-rec="pending"], [data-rec="loading"]) .g-kept { display: block; }
.g-dlrow { align-items: center; justify-content: space-between; gap: calc(8 * var(--u)); }
.g-dling .prog { display: block; width: 100%; height: calc(4 * var(--u)); }
.g-dling p { display: flex; justify-content: space-between; gap: calc(8 * var(--u)); margin-top: calc(5 * var(--u)); font-variant-numeric: tabular-nums; }
.g-rate .dots { font-size: calc(9 * var(--u)); letter-spacing: calc(1 * var(--u)); }
.g-seg { display: inline-grid; grid-template-columns: auto auto; padding: calc(2 * var(--u)); border-radius: calc(8 * var(--u)); background: var(--field); }
.g-seg span { padding: calc(3 * var(--u)) calc(10 * var(--u)); border-radius: calc(6 * var(--u)); }
.g-seg .on { background: var(--seg-on, #fff); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }
.g-perm { display: grid; grid-template-columns: calc(22 * var(--u)) 1fr; column-gap: calc(11 * var(--u)); align-items: start; }
.g-perm > .ico { width: calc(18 * var(--u)); height: calc(18 * var(--u)); color: var(--win-grey); margin-top: calc(1 * var(--u)); }
.g-perm b { display: block; font-weight: 500; }
.g-perm b + span { display: block; margin-top: calc(5 * var(--u)); font-size: calc(12 * var(--u)); color: var(--win-grey); }
.g-status { display: flex; align-items: center; gap: calc(10 * var(--u)); margin-top: calc(12 * var(--u)); font-size: calc(12 * var(--u)); color: var(--win-grey); }
/* Allowed is a green label, check and word alike, as SwiftUI's .green draws it. */
.g-allowed { display: none; align-items: center; gap: calc(5 * var(--u)); color: var(--green); }
.ok-ic { width: calc(13 * var(--u)); height: calc(13 * var(--u)); fill: currentColor; }
.g-perm.is-allowed .g-pending, .g-perm.is-allowed .g-enable { display: none; }
.g-perm.is-allowed .g-allowed { display: inline-flex; }
.g-micwait { margin-top: calc(18 * var(--u)); }
.g-mic.is-allowed ~ .g-micwait { display: none; }
/* The trial is one card: a dashed placeholder, then the recording's stage
   (Get ready › Speak › Transcribe) with what is happening now, then the
   recognized words with Copy in the corner. */
/* Try it, as GuidedSetupView.trial: the recognizer as one block, the card
   (Try dictation beside its placeholder, only as tall as its content; the
   running stage keeps 78 pt), the shortcut note, then Recording indicator,
   closed. Items sit 14 pt apart. */
.g-recblock { display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
.g-recblock b { font-weight: 600; font-size: calc(13 * var(--u)); }
.g-recblock span { font-size: calc(12 * var(--u)); color: var(--win-grey); }
.g-card { margin: calc(14 * var(--u)) 0; padding: calc(14 * var(--u)); border: 1px dashed var(--win-line); border-radius: calc(10 * var(--u)); }
:is([data-try="starting"], [data-try="listening"], [data-try="writing"]) .g-card { min-height: calc(78 * var(--u)); }
.g-disc { display: flex; align-items: center; gap: calc(6 * var(--u)); }
[data-try] .g-card { border-style: solid; background: color-mix(in srgb, var(--win-ink) 3.5%, transparent); }
.g-place { display: flex; align-items: center; gap: calc(12 * var(--u)); font-size: calc(14 * var(--u)); color: color-mix(in srgb, var(--win-grey) 65%, transparent); }
.g-place .g-btn { display: inline-flex; align-items: center; gap: calc(5 * var(--u)); flex: none; }
.g-place .g-btn .ico { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.g-run, .g-result { display: none; }
[data-try] .g-place { display: none; }
[data-try="starting"] .g-run, [data-try="listening"] .g-run, [data-try="writing"] .g-run { display: block; }
.g-stages { display: flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(11 * var(--u)); color: var(--win-grey); }
.g-stages span { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); white-space: nowrap; }
.g-stages b { width: calc(14 * var(--u)); height: 1px; background: var(--win-line); }
.g-stages i { width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-radius: 50%; border: 1px solid currentColor; box-sizing: border-box; }
/* Done: a filled check; now: a ring with a dot; next: an empty ring. */
[data-try="starting"] .g-stages [data-s="starting"], [data-try="listening"] .g-stages [data-s="listening"], [data-try="writing"] .g-stages [data-s="writing"] { color: var(--win-ink); font-weight: 600; }
[data-try="starting"] .g-stages [data-s="starting"] i, [data-try="listening"] .g-stages [data-s="listening"] i, [data-try="writing"] .g-stages [data-s="writing"] i { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 32%, transparent 36%); }
[data-try="listening"] .g-stages [data-s="starting"] i, [data-try="writing"] .g-stages [data-s="starting"] i, [data-try="writing"] .g-stages [data-s="listening"] i { border-color: var(--accent); background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.8 5.2l1.5 1.5 3-3.2' fill='none' stroke='white' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.g-now { display: flex; align-items: center; gap: calc(8 * var(--u)); margin-top: calc(10 * var(--u)); font-size: calc(12 * var(--u)); color: var(--win-grey); }
.g-now > span[data-s] { display: none; flex: 1; align-items: center; gap: calc(6 * var(--u)); min-width: 0; }
[data-try="starting"] .g-now [data-s="starting"], [data-try="listening"] .g-now [data-s="listening"], [data-try="writing"] .g-now [data-s="writing"] { display: flex; }
.g-dots, .g-bars { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: calc(3 * var(--u)); width: calc(18 * var(--u)); height: calc(14 * var(--u)); }
.g-dots i { width: calc(4 * var(--u)); height: calc(4 * var(--u)); border-radius: 50%; background: currentColor; animation: g-pulse 1.2s ease-in-out infinite; }
.g-dots i:nth-child(2) { animation-delay: 0.24s; }
.g-dots i:nth-child(3) { animation-delay: 0.48s; }
@keyframes g-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.9; } }
.g-bars { gap: calc(2 * var(--u)); }
.g-bars i { width: calc(2 * var(--u)); height: calc(14 * var(--u)); border-radius: 1px; background: var(--accent); transform-origin: center; animation: g-level 0.9s ease-in-out infinite; }
.g-bars i:nth-child(2) { animation-delay: -0.35s; animation-duration: 0.7s; }
.g-bars i:nth-child(3) { animation-delay: -0.6s; animation-duration: 1.1s; }
.g-bars i:nth-child(4) { animation-delay: -0.2s; animation-duration: 0.8s; }
.g-bars i:nth-child(5) { animation-delay: -0.5s; animation-duration: 1s; }
@keyframes g-level { 0%, 100% { transform: scaleY(0.15); } 50% { transform: scaleY(0.9); } }
@media (prefers-reduced-motion: reduce) { .g-dots i, .g-bars i { animation: none; } .g-bars i { transform: scaleY(0.5); } }
.g-now .g-btn { margin-left: auto; }
[data-try="done"] .g-result { display: block; }
.g-result p { font-size: calc(14 * var(--u)); line-height: 1.45; color: var(--win-ink); }
.g-acts { display: flex; justify-content: flex-end; gap: calc(14 * var(--u)); margin-top: calc(6 * var(--u)); }
.g-copy, .g-again { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); font-size: calc(12 * var(--u)); color: var(--accent); }
.g-copy .ico, .g-again .ico { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
:root[data-theme="dark"] .screen { --ctl: #1f1f22; }
.g-t3-done { display: none; }
[data-try="done"] .g-before, [data-try="done"] .g-t3 { display: none; }
[data-try="done"] .g-t3-done { display: inline; }
/* Explore: the sample card, where each Try's result appears, then one row per
   task with its key, a line on what it does and Try (GuidedTour.swift). */
.x-card { margin: calc(12 * var(--u)) 0 calc(2 * var(--u)); padding: calc(14 * var(--u)); border: 0.5px solid var(--m-rim); border-radius: calc(12 * var(--u)); background: var(--m-card); }
.x-cap { font-size: calc(11 * var(--u)); font-weight: 500; color: var(--win-grey); }
.x-text { margin-top: calc(4 * var(--u)); font-size: calc(14 * var(--u)); line-height: 1.35; color: var(--win-ink); }
.x-more, .x-out, .x-status, .x-status > span[data-x] { display: none; }
.x-more hr { margin: calc(7 * var(--u)) 0; }
[data-x] .x-more { display: block; }
:is([data-x="shown"], [data-x="preparing"], [data-x="playing"]) .x-out { display: block; }
:is([data-x="translating"], [data-x="preparing"], [data-x="playing"]) .x-status { display: flex; align-items: center; gap: calc(8 * var(--u)); margin-top: calc(6 * var(--u)); font-size: calc(12 * var(--u)); color: var(--win-grey); }
[data-x="translating"] .x-status [data-x="translating"], [data-x="preparing"] .x-status [data-x="preparing"], [data-x="playing"] .x-status [data-x="playing"] { display: flex; flex: 1; align-items: center; gap: calc(6 * var(--u)); }
.x-row { display: flex; align-items: center; gap: calc(11 * var(--u)); padding: calc(6 * var(--u)) 0; }
.x-row + .x-row { border-top: 1px solid var(--win-line); margin-left: calc(33 * var(--u)); padding-left: 0; }
.x-row + .x-row > .ico { margin-left: calc(-33 * var(--u)); }
.x-row > .ico { flex: none; align-self: flex-start; width: calc(22 * var(--u)); height: calc(16 * var(--u)); margin-top: calc(1 * var(--u)); color: var(--win-grey); }
.x-row > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(3 * var(--u)); }
.x-row p { display: flex; align-items: baseline; gap: calc(8 * var(--u)); }
.x-row b { font-weight: 500; }
.x-row kbd { font: 500 calc(11 * var(--u))/1.3 inherit; padding: 0 calc(6 * var(--u)); border: 1px solid var(--win-line); border-radius: calc(5 * var(--u)); background: var(--field); }
.x-row div > span { font-size: calc(12 * var(--u)); color: var(--win-grey); }
.x-row div > .g-link { color: var(--accent); }
.x-row > .g-btn { flex: none; }

.g-foot { margin-top: auto; padding-top: calc(14 * var(--u)); border-top: 1px solid var(--win-line); display: flex; align-items: center; gap: calc(12 * var(--u)); }
.g-foot [data-g] { display: none; }
[data-g="1"] .g-foot [data-g~="1"], [data-g="2"] .g-foot [data-g~="2"], [data-g="3"] .g-foot [data-g~="3"], [data-g="4"] .g-foot [data-g~="4"] { display: inline-block; }
[data-g="3"]:not([data-try="done"]) .g-foot .g-after3, [data-g="3"][data-try="done"] .g-foot .g-before3 { display: none; }
/* Show Yullo and Skip sit 16 pt apart. */
.g-foot .g-before3 + .g-before3 { margin-left: calc(4 * var(--u)); }
.g-btn { font-size: calc(13 * var(--u)); padding: calc(4 * var(--u)) calc(12 * var(--u)); border-radius: calc(6 * var(--u)); border: 1px solid var(--win-line); background: var(--btn); color: var(--win-ink); white-space: nowrap; transition: filter 0.15s, opacity 0.2s; }
.g-btn.small { font-size: calc(12 * var(--u)); padding: calc(2 * var(--u)) calc(8 * var(--u)); }
.g-btn.is-default { background: var(--accent-fill, var(--accent)); border-color: var(--accent-fill, var(--accent)); color: #fff; }
.g-btn.is-disabled { opacity: 0.45; }
.g-btn.is-pressed, .wl-btn.is-pressed, .g-pop.is-pressed { filter: brightness(0.82); }

/* The next version's guide, on the Settings grid: a rail like the sidebar (the
   current step on the card surface with its number in the accent, done steps
   checked), 22 pt titles, cards of 34 pt rows on hairlines with one trailing
   column, and large capsule buttons in the footer. */
.guide .g-head { border-bottom: 0; padding-bottom: 0; }
.guide .g-main { gap: calc(20 * var(--u)); margin-top: calc(20 * var(--u)); }
.guide .g-rail { width: calc(150 * var(--u)); gap: calc(4 * var(--u)); padding-top: 0; font-size: calc(14 * var(--u)); color: color-mix(in srgb, var(--win-grey) 75%, transparent); }
.guide .g-rail span { gap: calc(9 * var(--u)); padding: calc(7 * var(--u)) calc(10 * var(--u)); border-radius: calc(8 * var(--u)); }
.guide .g-rail i { flex: none; width: calc(18 * var(--u)); height: calc(18 * var(--u)); font-size: calc(10 * var(--u)); }
/* The last card keeps clear of the footer's hairline. */
.guide .g-step { padding-bottom: calc(16 * var(--u)); }
[data-g="1"] .guide .g-rail [data-n="1"], [data-g="2"] .guide .g-rail [data-n="2"], [data-g="3"] .guide .g-rail [data-n="3"], [data-g="4"] .guide .g-rail [data-n="4"] { background: var(--m-card); color: var(--win-ink); font-weight: 600; }
[data-g="1"] .guide .g-rail [data-n="1"] i, [data-g="2"] .guide .g-rail [data-n="2"] i, [data-g="3"] .guide .g-rail [data-n="3"] i, [data-g="4"] .guide .g-rail [data-n="4"] i { background: var(--accent-fill, var(--accent)); border-color: transparent; color: #fff; }
[data-g="2"] .guide .g-rail [data-n="1"], [data-g="3"] .guide .g-rail [data-n="1"], [data-g="3"] .guide .g-rail [data-n="2"], [data-g="4"] .guide .g-rail [data-n="1"], [data-g="4"] .guide .g-rail [data-n="2"], [data-g="4"] .guide .g-rail [data-n="3"] { color: var(--win-ink); }
[data-g="2"] .guide .g-rail [data-n="1"] i, [data-g="3"] .guide .g-rail [data-n="1"] i, [data-g="3"] .guide .g-rail [data-n="2"] i, [data-g="4"] .guide .g-rail [data-n="1"] i, [data-g="4"] .guide .g-rail [data-n="2"] i, [data-g="4"] .guide .g-rail [data-n="3"] i { background: var(--win-grey); border-color: transparent; }
[data-g="2"] .guide .g-rail [data-n="1"] i::after, [data-g="3"] .guide .g-rail [data-n="1"] i::after, [data-g="3"] .guide .g-rail [data-n="2"] i::after, [data-g="4"] .guide .g-rail [data-n="1"] i::after, [data-g="4"] .guide .g-rail [data-n="2"] i::after, [data-g="4"] .guide .g-rail [data-n="3"] i::after { color: #fff; font: 700 calc(11 * var(--u))/1 -apple-system, BlinkMacSystemFont, sans-serif; }
.guide .g-title { font-size: calc(25 * var(--u)); font-weight: 700; letter-spacing: calc(-0.4 * var(--u)); }
.guide .g-intro { margin: calc(6 * var(--u)) 0 calc(14 * var(--u)); font-size: calc(14 * var(--u)); line-height: 1.3; }
.g-sec { margin: calc(20 * var(--u)) 0 calc(8 * var(--u)); font-weight: 600; font-size: calc(14 * var(--u)); }
.g-title + .g-sec { margin-top: calc(14 * var(--u)); }
.g-box { background: var(--m-card); border: 0.5px solid var(--m-rim); border-radius: calc(12 * var(--u)); padding: 0 calc(14 * var(--u)); font-size: calc(14 * var(--u)); }
.g-box > * { margin: 0; min-height: calc(40 * var(--u)); padding-block: calc(6 * var(--u)); box-sizing: border-box; }
.g-box > * + * { border-top: 1px solid var(--win-line); }
.g-box .g-row { margin: 0; }
.g-box .g-row > span:first-child { flex: 1; min-width: 0; }
.g-box .g-pop { width: 52%; flex: none; box-sizing: border-box; justify-content: space-between; border: 0; border-radius: calc(7 * var(--u)); padding: calc(4 * var(--u)) calc(8 * var(--u)) calc(4 * var(--u)) calc(10 * var(--u)); background: var(--field); white-space: nowrap; }
.g-box .g-pick { width: 52%; flex: none; }
.g-box .g-pick .g-pop { width: 100%; }
/* A long model name ends in a clean ellipsis before the chevron. */
.g-box .g-c-pending { min-width: 0; overflow: hidden; }
.g-ell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-box .g-pop > :first-child { overflow: hidden; text-overflow: ellipsis; }
.g-box .pop-chev { width: calc(7 * var(--u)); height: calc(11 * var(--u)); stroke-width: 1.3; }
.g-two { display: flex; flex-direction: column; gap: calc(2 * var(--u)); }
.g-two > span + span { font-size: calc(12 * var(--u)); color: var(--win-grey); }
.g-box .g-btn { font-size: calc(13 * var(--u)); padding: calc(4 * var(--u)) calc(12 * var(--u)); border: 0; border-radius: calc(7 * var(--u)); background: var(--field); }
.g-switch { position: relative; flex: none; width: calc(32 * var(--u)); height: calc(19 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--field); }
.g-switch i { position: absolute; left: calc(2 * var(--u)); top: calc(2 * var(--u)); width: calc(15 * var(--u)); height: calc(15 * var(--u)); border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.g-keys { color: var(--win-grey); white-space: nowrap; }
.g-box .g-disc { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); }
.g-cell .g-row { margin: 0; min-height: calc(28 * var(--u)); }
.g-cell .g-under { margin: calc(4 * var(--u)) 0 calc(2 * var(--u)); }
.g-rate3 { margin-top: calc(4 * var(--u)); }
.g-box .g-perm { display: flex; grid-template-columns: none; }
.g-box .g-perm.is-allowed .g-enable { display: none; }
.guide .g-micwait { margin-top: calc(12 * var(--u)); }
.stage-welcome:has(.g-mic.is-allowed) .g-micwait { display: none; }
.guide .g-card { margin: calc(12 * var(--u)) 0; }
.guide .x-card { margin-bottom: calc(12 * var(--u)); }
/* One grid for all rows, so the keys and the buttons line up down the card. */
.g-box.x-rows { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: calc(14 * var(--u)); }
.g-box .x-row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; margin-left: 0; padding-block: calc(6 * var(--u)); }
.g-box .x-row > .g-btn { justify-self: end; }
.guide .g-foot { padding-top: calc(16 * var(--u)); gap: calc(14 * var(--u)); }
.guide .g-foot .g-btn { font-size: calc(14 * var(--u)); padding: calc(7 * var(--u)) calc(16 * var(--u)); border: 0; border-radius: 999px; background: var(--field); color: var(--win-ink); }
.guide .g-foot .g-link { font-size: calc(14 * var(--u)); }

/* Setup complete: a short burst in the page's own colours, outside the app
   window, like the keystroke marks. */
.burst { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.bit {
  position: absolute; left: var(--x0); top: var(--y0); width: var(--w); height: var(--h); background: var(--c);
  opacity: 0; transform: translate(-50%, -50%);
  animation: bit 1.3s cubic-bezier(0.15, 0.7, 0.3, 1) forwards; animation-delay: var(--d);
}
@keyframes bit {
  0% { opacity: 1; transform: translate(-50%, -50%) rotate(0); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--r)); }
}

/* Medium widths ----------------------------------------------------------- */

@media (max-width: 1080px) {
  .step-list { grid-column: 1 / 5; }
  .stage { grid-column: 5 / -1; }
  .langs { grid-column: 4 / -1; justify-content: flex-end; }
  .masthead-nav { grid-column: 1 / -1; margin-top: 14px; padding-top: 8px; border-top: 1px solid var(--rule); }

  .section-title { grid-column: 1 / -1; }
  .section-note { grid-column: 1 / 9; }
  /* Medium: one setting per row, panel left and caption right. */
  .frags { grid-template-rows: none; row-gap: 32px; }
  .frag { grid-column: 1 / -1; grid-row: auto; grid-template-rows: none; grid-template-columns: subgrid; align-items: start; }
  .frag-ui { grid-column: 1 / 8; }
  .frag figcaption { grid-column: 8 / -1; font-size: 16px; }
  .task-list { grid-column: 1 / 5; }
  .stage-lib { grid-column: 5 / -1; }
  .step-note { grid-column: 1 / 5; margin-top: 16px; }
  /* The demo starts level with the list and spans the note's row too, so the
     note never pushes it down. */
  .demo .step-list { grid-row: 1; }
  .demo .step-note { grid-row: 2; }
  .demo > .stage { grid-row: 1 / span 2; }
  /* Medium: the measured moments two by two. */
  .ready-figs > div { grid-column: span 6; }
  .ready-lead { grid-column: 1 / 10; }
  .ready-foot { grid-column: 1 / -1; }
}

/* Narrow: the margin column folds above the field. ------------------------ */

@media (max-width: 760px) {
  :root { --display: clamp(36px, calc(var(--scale-m, 15.6) * 1vw), 120px); --sample: clamp(28px, 8.4vw, 44px); }
  .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .wordmark { grid-column: 1 / 3; }
  .langs { grid-column: 3 / -1; justify-content: flex-end; gap: 0.9em; }
  .more ul { left: auto; right: -12px; }
  .masthead-nav { grid-column: 1 / -1; margin-top: 14px; padding-top: 8px; border-top: 1px solid var(--rule); }

  .display { grid-column: 1 / -1; }
  .glyph { grid-column: 1 / -1; grid-row: 2; justify-self: end; align-self: start; width: 34vw; margin: 0; }
  /* Phones: the promise two by two, then the facts two by two. */
  .bands { grid-row: 3; }
  .band-lead, .verbs { grid-column: 1 / -1; }
  .facts { grid-column: 1 / -1; grid-row: 3; margin-top: 28px; padding-top: 10px; border-top: 1px solid var(--rule); }
  .verbs li { font-size: clamp(20px, 5.6vw, 26px); }
  .verbs li + li { margin-top: 0.4em; }
  .opening { padding-top: 56px; }

  .section-title, .section-note,
  .plate-head, .specimen, .step-list, .stage, .task-list, .stage-lib, .frag { grid-column: 1 / -1; }
  .step-note { grid-column: 1 / -1; margin-top: 4px; }
  .frag { display: block; }
  .ready-lead, .ready-foot { grid-column: 1 / -1; }
  /* Each figure needs the full width on a phone. */
  .ready-figs > div { grid-column: 1 / -1; }
  .ready-figs dd { font-size: 13px; }
  .frag-ui { margin-bottom: 16px; }
  .section-head { row-gap: 16px; }
  .section-note { max-width: 32em; }

  .plate-number { grid-row: 1 / 3; margin: 0.55em 0 0; }
  .plate-head h3 { margin-bottom: 6px; }
  .specimen { border-top: 0; padding-top: 0; }
  .sample { margin-top: 16px; }
  .ui { margin-top: 8px; }
  .stage, .stage.stage-lib, .stage.stage-welcome { grid-row: 1; margin-inline: calc(-1 * var(--margin)); width: auto; max-width: none; justify-self: stretch; }
  /* Phones: the demo first, then its steps, then the note. */
  .demo > .stage { grid-row: 1; }
  .demo .step-list { grid-row: 2; }
  .demo .step-note { grid-row: 3; }
  .task-list li:not(.is-active) p { display: block; }
  /* Open descriptions on phones: the list sits below the stage and must not jump. */
  .step-list li { grid-template-rows: auto 1fr; transition: none; }
  .stage-lib .screen { aspect-ratio: 960 / 700; }
  .task-list li { color: var(--ink); }
  .step-list p { margin-left: 0; }


  pre { font-size: 11px; }
  .aside { margin-top: 8px; }

  .colophon-mark, .colophon-license, .colophon-links { grid-column: 1 / -1; }
}

@media print {
  .masthead-nav, .skip, .doc-caret, .play, .copy { display: none; }
  :root { --paper: #fff; --ink: #000; }
}
.task-list .names { font-family: var(--mono); font-size: 12px; }

/* Not found: the opening's headline, one line of way back, every language. */
.lost .display { grid-column: 1 / -1; font-size: clamp(48px, calc(var(--scale) * 1vw), 180px); }
.lost-note { grid-column: 1 / 9; grid-row: 2; font-size: clamp(19px, 1.6vw, 26px); }
.lost-langs { grid-column: 1 / -1; grid-row: 3; display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--grey); }
.lost-langs a { color: var(--grey); text-decoration: none; }
.lost-langs a:hover { color: var(--blue); }

/* Next version: highlights first. The engine list stands still and shows every
   line; one trust card sits beside its caption; basics are one-line entries in
   a small index; the guide is a footnote. */
.engines .task-list li { color: var(--ink); }
.engines .task-list li:not(.is-active) p { display: block; }
.frags-one .frag { grid-column: 1 / -1; grid-row: auto; grid-template-rows: none; grid-template-columns: subgrid; align-items: start; }
.frags-one .frag-ui { grid-column: 1 / 7; }
.frags-one .frag figcaption { grid-column: 8 / -1; }
.frag-foot { display: block; margin-top: 10px; font: 400 12px/1.45 var(--mono); color: var(--grey); }
.proc-write, .proc-pick { display: flex; align-items: center; }
.proc-write .select, .proc-pick .select { margin-left: auto; }
.also-index { margin-top: clamp(40px, 5vw, 72px); padding-bottom: var(--space); row-gap: 14px; }
.also-index .also-title { grid-column: 1 / -1; font-size: clamp(22px, 2vw, 32px); letter-spacing: -0.02em; }
.also-index ul { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter); border-top: 1px solid var(--ink); }
.also-index li { padding-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.also-index li b { font-weight: 500; font-size: 17px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.also-index li > span { color: var(--grey); font-size: 15px; line-height: 1.4; }
.also-index .keys { font-weight: 400; color: var(--grey); font-size: 14px; }
.guide-foot { margin-top: 24px; }
.guide-foot span { grid-column: 4 / -1; font: 400 12px/1.45 var(--mono); color: var(--grey); }
@media (max-width: 1080px) {
  .also-index ul { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .guide-foot span { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .frags-one .frag { display: block; }
  .also-index ul { grid-template-columns: 1fr; }
}
/* The Services page stands alone now: the window ends with its last card. */
.svcpage { height: auto; bottom: auto; }
.stage-lib .screen { aspect-ratio: 960 / 620; }
.proc-write .popup, .proc-write .popup span, .proc-pick .popup, .proc-pick .popup span { color: var(--win-ink); }
.frags-one + .also-index { margin-top: 0; }

/* Edit with voice: the selection panel's link starts it; the review window
   shows the instruction, Original over Edited, then Copy and Replace. The HUD
   records the instruction without the format menu or language tag. */
.stage[data-step="edit"] :is(.pill .chip, .ltag) { display: none !important; }
.sel-voice { display: none; margin: calc(6 * var(--u)) 0 0; font-size: calc(13 * var(--u)); color: var(--accent); }
[data-sub~="evlink"] .sel-voice { display: block; }
[data-sub~="evlink"] .sel :is(.sel-langs, .sel-out, .sel-foot, .sel-tools) { display: none; }
.sel-voice span.is-pressed { opacity: 0.6; }
.sel-voice kbd { margin-left: calc(6 * var(--u)); font: inherit; color: var(--win-grey); }
.evwin { position: absolute; right: calc(48 * var(--u)); top: calc(60 * var(--u)); width: calc(560 * var(--u)); padding: 0 calc(23 * var(--u)) calc(20 * var(--u)); border-radius: calc(16 * var(--u)); background: var(--win); color: var(--win-ink); opacity: 0; transform: translateY(calc(10 * var(--u))); transition: opacity 0.3s, transform 0.3s; font-size: calc(16 * var(--u)); box-shadow: 0 calc(16 * var(--u)) calc(46 * var(--u)) rgba(30, 40, 80, 0.18); }
.evwin .titlebar { border: 0; }
[data-sub~="evwin"] .evwin { opacity: 1; transform: none; }
.ev-instr { display: flex; align-items: center; gap: calc(10 * var(--u)); margin: calc(4 * var(--u)) 0 calc(14 * var(--u)); color: var(--win-grey); }
.ev-instr .ev-said { flex: 1; }
.ev-wave, .ev-mic, .ev-copy { width: calc(17 * var(--u)); height: calc(17 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; flex: none; }
.ev-card { border-radius: calc(14 * var(--u)); background: var(--m-card, #fff); padding: calc(14 * var(--u)) calc(18 * var(--u)); line-height: 1.4; }
.ev-orig { display: flex; gap: calc(14 * var(--u)); color: var(--win-grey); padding-bottom: calc(12 * var(--u)); border-bottom: 1px solid var(--win-line); margin: 0; }
.ev-orig span { flex: 1; }
.ev-new { margin: calc(12 * var(--u)) 0 0; }
.ev-foot { display: flex; justify-content: flex-end; gap: calc(12 * var(--u)); margin: calc(16 * var(--u)) 0 0; }
.ev-foot .btn { font-size: calc(15 * var(--u)); padding: calc(5 * var(--u)) calc(18 * var(--u)); border-radius: calc(8 * var(--u)); border: 0; background: var(--field); }
.ev-foot .btn.is-default { background: #2448d8; color: #fff; }
:root[data-theme="dark"] .ev-foot .btn.is-default { background: #3d63e0; }
.ev-foot .btn.is-pressed { filter: brightness(0.82); }
.rchip .ract-cancel { display: none; }
.rchip[data-mode="edit"][data-state="working"] .ract-cancel { display: inline; }
.rchip[data-mode="edit"][data-state="working"] .ract:not(.ract-cancel) { display: none; }
.also-index ul { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
@media (max-width: 760px) { .also-index ul { grid-template-columns: 1fr; } }

/* Per app: a Messages conversation. Their message on the left; the same
   voice writes a quick message in the field, then it is sent. */
.msgwin { position: absolute; left: calc(140 * var(--u)); top: calc(56 * var(--u)); width: calc(680 * var(--u)); height: calc(410 * var(--u)); border-radius: calc(16 * var(--u)); background: var(--win); color: var(--win-ink); display: none; flex-direction: column; overflow: hidden; }
.stage[data-step="perapp"] .msgwin { display: flex; }
.stage[data-step="perapp"] .win.doc { display: none; }
.msgwin .titlebar { position: relative; }
.msg-to { position: absolute; left: 0; right: 0; text-align: center; font-size: calc(14 * var(--u)); font-weight: 600; pointer-events: none; }
.msg-body { flex: 1; display: flex; flex-direction: column; gap: calc(8 * var(--u)); padding: calc(20 * var(--u)) calc(24 * var(--u)); justify-content: flex-end; font-size: calc(17 * var(--u)); }
.bubble { max-width: 70%; padding: calc(8 * var(--u)) calc(14 * var(--u)); border-radius: calc(18 * var(--u)); margin: 0; line-height: 1.35; }
.bubble.in { align-self: flex-start; background: color-mix(in srgb, var(--win-ink) 9%, transparent); }
.bubble.out { align-self: flex-end; background: #2f7cf6; color: #fff; opacity: 0; transform: translateY(calc(6 * var(--u))); transition: opacity 0.3s, transform 0.3s; }
[data-sub~="sent"] .bubble.out { opacity: 1; transform: none; }
.msg-input { margin: 0 calc(20 * var(--u)) calc(18 * var(--u)); min-height: calc(36 * var(--u)); display: flex; align-items: center; padding: calc(6 * var(--u)) calc(14 * var(--u)); border: 1px solid var(--win-line); border-radius: calc(18 * var(--u)); font-size: calc(17 * var(--u)); }
/* Yullo types into another app in that app's own ink. */
.msg-caret { display: inline-block; width: calc(2 * var(--u)); height: 1.1em; background: var(--accent); animation: blink 1.1s steps(1) infinite; }
.stage[data-step="perapp"] :is(.ltag) { display: none !important; }
.stage[data-step="perapp"] .pill .chip { pointer-events: none !important; }
.fm-said { display: flex; gap: 7px; align-items: baseline; margin: 0 0 10px; font-size: 13px; color: var(--win-grey); }
.fm-said svg { flex: none; width: 9px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; transform: translateY(1px); }
.fm-out { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--field, color-mix(in srgb, var(--ink) 7%, transparent)); color: var(--win-ink); font-size: 13px; line-height: 1.45; white-space: pre-line; min-height: calc(2 * 1.45em + 16px); }
.keys kbd.then { margin-left: 0.35em; }
.keys kbd.then::before { content: "→"; margin-right: 0.35em; color: var(--grey); }
/* Services, live: Choose a writing service as a sheet on the page, and a
   draft beside it that the chosen writer refines in place. */
.wsheet { inset: auto; left: calc(48 * var(--u)); top: calc(120 * var(--u)); width: calc(500 * var(--u)); padding: calc(23 * var(--u)); border-radius: calc(16 * var(--u)); background: var(--win); color: var(--win-ink); font-size: calc(13 * var(--u)); box-shadow: 0 calc(24 * var(--u)) calc(70 * var(--u)) rgba(20, 30, 60, 0.28); }
.screen .wsheet { background-color: var(--m-sheet, var(--m-window)); -webkit-backdrop-filter: var(--m-blur); backdrop-filter: var(--m-blur); }
.ws-title { margin: 0 0 calc(16 * var(--u)); font-size: calc(19.5 * var(--u)); font-weight: 600; }
.wsheet .sp-card { padding: calc(2 * var(--u)) calc(14 * var(--u)); }
.wsheet .sp-row .btn { appearance: none; font: inherit; color: inherit; cursor: pointer; }
.wsheet .sp-row .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wsheet .sp-row .btn.is-pressed { background: var(--accent); color: #fff; }
.wsheet .sp-row.is-used .btn { visibility: hidden; }
.wsheet .sp-row.is-used p::after { content: attr(data-inuse); position: absolute; right: calc(14 * var(--u)); color: var(--accent); font-size: calc(15 * var(--u)); }
.wsheet .sp-row { position: relative; }
.ws-foot { display: flex; justify-content: flex-end; margin: calc(18 * var(--u)) 0 0; }
.screen .ws-foot .btn { font-size: calc(13 * var(--u)); padding: calc(4 * var(--u)) calc(14 * var(--u)); border-radius: calc(7 * var(--u)); background: var(--btn, var(--field)); }
.wdoc { position: absolute; left: calc(580 * var(--u)); top: calc(215 * var(--u)); width: calc(332 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--win); color: var(--win-ink); box-shadow: 0 calc(16 * var(--u)) calc(46 * var(--u)) rgba(30, 40, 80, 0.22); }
.wdoc .titlebar { height: calc(30 * var(--u)); padding-inline: calc(12 * var(--u)); gap: calc(7 * var(--u)); }
.wdoc-text { margin: 0; padding: calc(18 * var(--u)) calc(22 * var(--u)) calc(62 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1.45; min-height: calc(3 * 1.45em); }
.wdoc-sel { transition: background-color 0.3s; }
.wdoc.is-selected .wdoc-sel { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.wchip { position: absolute; left: calc(22 * var(--u)); bottom: calc(14 * var(--u)); margin: 0; padding: calc(8 * var(--u)) calc(14 * var(--u)); border-radius: calc(20 * var(--u)); background: var(--hud); color: #fff; font-size: calc(13 * var(--u)); opacity: 0; transition: opacity 0.3s; white-space: nowrap; }
.wdoc.has-chip .wchip { opacity: 1; }
.wchip { --cu: max(var(--u), 0.8px); display: flex; align-items: center; gap: calc(8 * var(--u)); }
.wchip[data-state="working"] .rcheck, .wchip[data-state="done"] .rdots { display: none; }
/* The sheet is the focus: the page behind it steps back. */
/* The two windows sit side by side on the stage's middle line; on a phone
   they stack, at a size that stays readable, and the stage grows to fit. */
.ws-screen { display: flex; align-items: center; justify-content: center; gap: calc(32 * var(--u)); }
.ws-screen :is(.wsheet, .wdoc) { position: relative; inset: auto; left: auto; top: auto; flex: none; }
@media (max-width: 600px) {
  .stage-lib .screen.ws-screen { --u: 0.9px; aspect-ratio: auto; flex-direction: column; align-items: stretch; gap: 16px; padding: 24px 16px; }
  .ws-screen :is(.wsheet, .wdoc) { width: auto; }
}

/* Body text breaks into even lines; headings keep balance. */
p, dd, figcaption, li { text-wrap: pretty; }
:is(p, dd, figcaption):is(:lang(de), :lang(fr), :lang(ru)) { hyphens: auto; }
:lang(ja), :lang(zh) { line-break: strict; }
:lang(ko) { word-break: keep-all; }
/* Dark: the recording pill matches the app's HUD; light keeps near-black. */
:root[data-theme="dark"] .stage:is([data-step="dictate"], [data-step="perapp"], [data-step="edit"]) .pill { background: var(--hud); }
/* Writing keeps label left, picker right; a long name shortens inside the picker. */
.proc-write, .proc-pick { flex-wrap: nowrap; align-items: center; }
.proc-write .select, .proc-pick .select { min-width: 0; }
.proc-write .popup, .proc-pick .popup { max-width: 100%; }
.proc-write .popup > span, .proc-pick .popup > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Phones: the caption rule spans the column, like the card above it. */
@media (max-width: 760px) { .frag figcaption { max-width: none; } }
/* Wide: when the stage is capped by the screen height, it keeps to the column's right edge. */
@media (min-width: 1081px) { .stage { justify-self: end; margin-inline: auto 0; } }
/* The shortcut keeps to the first line of its title; a long title wraps beside it. */
.also-index li b { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; }
.fm-out .fm-p { display: block; }
.fm-out .fm-p + .fm-p { margin-top: 0.5em; }
/* A long URL, path or flag moves to its own line whole; only one longer than the line breaks inside. */
.term .ln .nb { display: inline-block; max-width: 100%; text-indent: 0; white-space: normal; overflow-wrap: anywhere; vertical-align: top; }
.agent-text { overflow-wrap: anywhere; }
/* Four figures need room; below 1360 px they sit two by two. */
@media (max-width: 1360px) { .ready-figs > div { grid-column: span 6; } }

/* Bring your own engine: the stage shows the task picked in the list. */
.ws-screen:not([data-task="0"]) > [data-task="0"] { display: none; }
.ws-screen:not([data-task="1"]) > [data-task="1"] { display: none; }
.ws-screen:not([data-task="2"]) > [data-task="2"] { display: none; }
.ws-screen:not([data-task="3"]) > [data-task="3"] { display: none; }
.wdoc-sel .rd { background: color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 3px; }
.wsheet .sp-row { cursor: pointer; }

/* The story: a read-only mail keeps only Copy; read aloud shows the text alone. */
.stage[data-sub~="ro"] .sel .replace, .stage[data-sub~="ro"] .sel .refine { display: none; }
.stage[data-sub~="solo"] .sel :is(.sel-langs, .sel-out, .refine, .replace) { display: none; }
.step-list .st-time { font-family: var(--mono, ui-monospace, monospace); font-size: 0.6em; color: var(--grey); margin-right: 0.4em; vertical-align: 0.15em; }
.bubble.again { animation: pop-in 0.3s ease-out; }
@keyframes pop-in { from { opacity: 0; transform: translateY(6px); } }
.stage:is([data-step="edit"], [data-step="selection"], [data-step="read"]) :is(.doc-title, .mail-head) { display: block; }
.stage:is([data-step="edit"], [data-step="selection"], [data-step="read"]) .doc-text { font-size: calc(19 * var(--u)); padding-top: calc(20 * var(--u)); }
.mail-head p[hidden] { display: none; }
.mail-head[hidden] { display: none !important; }
.stage[data-web] .doc-caret { display: none; }
.stage:is([data-step="refine"]) .doc-title { display: block; }

/* The desktop: Dock, pointer, and only the parts each moment needs. */
.stage:not(.stage-lib) .material, .stage:not(.stage-lib) ~ .step-note, .step-note { display: none; }
.dock { position: absolute; z-index: 2; left: 50%; bottom: calc(10 * var(--u)); transform: translateX(-50%); display: flex; gap: calc(10 * var(--u)); padding: calc(7 * var(--u)) calc(10 * var(--u)); border-radius: calc(18 * var(--u)); background: rgba(255, 255, 255, 0.38); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.5), 0 calc(6 * var(--u)) calc(20 * var(--u)) rgba(0, 0, 0, 0.12); }
.dock i { display: block; width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
.dock svg { width: 100%; height: 100%; display: block; }
:root[data-theme="dark"] .dock { background: rgba(40, 40, 46, 0.5); }
.cursor { position: absolute; z-index: 9; left: 0; top: 0; width: calc(16 * var(--u)); opacity: 0; transition: transform 0.6s cubic-bezier(.3,.7,.3,1), opacity 0.25s; pointer-events: none; }
.cursor.on { opacity: 1; }
.cursor svg { display: block; width: 100%; transition: transform 0.12s; }
.cursor.click svg { transform: scale(0.85); }
.doc-pre { white-space: pre-line; color: var(--win-ink); }
[data-sub~="part"] .doc-content { background-size: 0 0; }
.doc-content .sp { border-radius: calc(3 * var(--u)); transition: background-color 0.4s; }
[data-sub~="part"] .doc-content .sp { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.doc-content .sp.chg { color: inherit; animation: ev-in .7s ease-out; }
@keyframes ev-in { from { opacity: .25; } }
.step-list .spk-glyph { width: 1em; height: 1em; fill: currentColor; vertical-align: -0.1em; }
.stage:not(.stage-lib) .pill { bottom: calc(84 * var(--u)); z-index: 4; }

/* The Dock, as on macOS 26: a frosted shelf, glossy tiles, a dot under running apps. */
.dock { gap: calc(9 * var(--u)); padding: calc(8 * var(--u)) calc(9 * var(--u)) calc(10 * var(--u)); border-radius: calc(22 * var(--u)); background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.32)); box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.9), inset 0 0 0 0.5px rgba(255,255,255,0.45), 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(30,40,70,0.18); }
:root[data-theme="dark"] .dock { background: linear-gradient(180deg, rgba(70,72,82,0.55), rgba(40,42,50,0.5)); box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.18), inset 0 0 0 0.5px rgba(255,255,255,0.08), 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(0,0,0,0.35); }
.dock i { position: relative; width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: calc(11 * var(--u)); box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.45), 0 calc(2 * var(--u)) calc(5 * var(--u)) rgba(0,0,0,0.16); transition: transform 0.25s cubic-bezier(.3,1.6,.5,1); }
.dock i svg { width: 100%; height: 100%; }
.dock [data-app="doc"] { background: linear-gradient(180deg, #ffc15e, #f08a24); }
.dock [data-app="chat"] { background: linear-gradient(180deg, #63db7d, #2fb455); }
.dock [data-app="mail"] { background: linear-gradient(180deg, #5aa7ff, #2a6fe6); }
.dock [data-app="web"] { background: linear-gradient(180deg, #6f8bb2, #3f5272); }
.dock i::after { content: ""; position: absolute; left: 50%; bottom: calc(-6.5 * var(--u)); width: calc(4 * var(--u)); height: calc(4 * var(--u)); margin-left: calc(-2 * var(--u)); border-radius: 50%; background: rgba(20,20,30,0.55); opacity: 0; transition: opacity 0.3s; }
:root[data-theme="dark"] .dock i::after { background: rgba(255,255,255,0.7); }
.dock i.run::after { opacity: 1; }
.dock i.hop { transform: translateY(calc(-10 * var(--u))); }

/* The moment list: calm rows, one clear current item, keys as small key caps. */
.step-list { border-top: 0; display: flex; flex-direction: column; gap: 2px; align-self: center; }
.step-list li { border-bottom: 0; padding: 0; position: relative; }
.step-list button { font-size: clamp(15px, 1.05vw, 17px); font-weight: 450; letter-spacing: -0.005em; padding: 10px 12px 10px 16px; border-radius: 10px; align-items: center; color: var(--grey); transition: background-color 0.25s, color 0.25s; }
.step-list li:not(.is-active) button:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); color: var(--ink); }
.step-list li.is-active button { color: var(--ink); background: color-mix(in srgb, var(--blue) 8%, transparent); }
.step-list li::before { content: ""; position: absolute; left: 4px; top: 50%; width: 3px; height: 0; border-radius: 2px; background: var(--blue); transform: translateY(-50%); transition: height 0.3s; }
.step-list li.is-active::before { height: 18px; }
.step-list .keys { gap: 3px; }
.step-list .keys kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 5px; font: 500 11px/1 var(--sans, -apple-system, system-ui, sans-serif); color: var(--grey); background: color-mix(in srgb, var(--ink) 5%, transparent); box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--ink) 10%, transparent); }
.step-list li.is-active .keys kbd { color: var(--ink); background: var(--paper, #fff); box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--ink) 14%, transparent), 0 0 0 0.5px color-mix(in srgb, var(--ink) 12%, transparent); }
.step-list .spk-glyph { width: 15px; height: 15px; }
.dock [data-app] { background: none; }
.dock i { box-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(0,0,0,0.18); }

/* Windows carry no invented titles; only the real parts of each app show. */
.stage:not(.stage-lib) .ltag { display: none !important; }

.doc-h { display: block; font-weight: 650; font-size: 1.15em; margin-bottom: calc(6 * var(--u)); color: var(--win-ink); }
.doc-post { white-space: pre-line; color: var(--win-ink); }
.web-site { display: block; font-size: 0.7em; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--win-grey); margin-bottom: calc(8 * var(--u)); }
.web-hero { display: block; height: calc(70 * var(--u)); border-radius: calc(8 * var(--u)); margin-bottom: calc(12 * var(--u)); background: linear-gradient(120deg, #d9c7a7, #a98f6c 45%, #6e7f99); }
.bubble.hist { animation: none; }
.stage[data-web] .doc-text { font-size: calc(16 * var(--u)); line-height: 1.5; }
.stage:is([data-step="dictate"], [data-step="refine"]) .doc-text { font-size: calc(17 * var(--u)); }

/* Each app looks like itself: its own toolbar, canvas and layout. */
.tb { display: none; align-items: center; gap: calc(12 * var(--u)); height: calc(36 * var(--u)); padding: 0 calc(18 * var(--u)); border-bottom: 1px solid var(--win-line); color: var(--win-grey); font-size: calc(12 * var(--u)); }
.tb svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tb b, .tb i, .tb u { font-size: calc(13 * var(--u)); color: var(--win-ink); width: calc(16 * var(--u)); text-align: center; }
.tb-sep { width: 1px; height: calc(16 * var(--u)); background: var(--win-line); }
.tb-sel { padding: calc(2 * var(--u)) calc(8 * var(--u)); border-radius: calc(5 * var(--u)); background: color-mix(in srgb, var(--win-ink) 6%, transparent); color: var(--win-ink); }
.stage[data-app="doc"] .tb-doc, .stage[data-app="mail"] .tb-mail, .stage[data-app="web"] .tb-web { display: flex; }
/* Document: a white page on a grey canvas. */
.stage[data-app="doc"] .win.doc { background: color-mix(in srgb, var(--win) 88%, #8a8f9a); }
.stage[data-app="doc"] .doc-text { background: var(--win); margin: calc(14 * var(--u)) calc(40 * var(--u)) 0; padding: calc(26 * var(--u)) calc(34 * var(--u)); min-height: calc(330 * var(--u)); box-shadow: 0 1px calc(4 * var(--u)) rgba(0,0,0,0.12); }
/* Mail: the send arrow in the toolbar, fields under it. */
.stage[data-app="mail"] .tb-mail svg:first-child { color: var(--accent); }
/* Browser: back, forward, address and reload. */
.tb-web { justify-content: flex-start; }
.tb-url { flex: 1; display: flex; align-items: center; justify-content: center; gap: calc(5 * var(--u)); height: calc(24 * var(--u)); border-radius: calc(7 * var(--u)); background: color-mix(in srgb, var(--win-ink) 6%, transparent); color: var(--win-ink); font-size: calc(12 * var(--u)); }
.tb-url svg { width: calc(11 * var(--u)); height: calc(11 * var(--u)); }
/* Chat: a list of conversations on the left, the thread on the right. */
.chat-side { position: absolute; left: 0; top: calc(44 * var(--u)); bottom: 0; width: calc(170 * var(--u)); border-right: 1px solid var(--win-line); background: color-mix(in srgb, var(--win) 94%, #8a8f9a); padding: calc(10 * var(--u)) calc(8 * var(--u)); display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
.chat-side p { display: flex; align-items: center; gap: calc(8 * var(--u)); margin: 0; padding: calc(7 * var(--u)); border-radius: calc(8 * var(--u)); }
.chat-side p.on { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.chat-side i { width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: 50%; flex: none; background: linear-gradient(135deg, #b9c4d6, #8e9bb3); }
.chat-side p:nth-child(2) i { background: linear-gradient(135deg, #f2c6a8, #d9937a); }
.chat-side p:nth-child(3) i { background: linear-gradient(135deg, #a8d8c2, #6fb497); }
.chat-side p:nth-child(4) i { background: linear-gradient(135deg, #c9bdf0, #9a8be0); }
.chat-side span { flex: 1; height: calc(7 * var(--u)); border-radius: 4px; background: color-mix(in srgb, var(--win-ink) 14%, transparent); }
.msgwin .msg-body, .msgwin .msg-input { margin-left: calc(170 * var(--u)); }
.msgwin .msg-input { margin-left: calc(190 * var(--u)); }
.msgwin .titlebar b.msg-to { padding-left: calc(170 * var(--u)); }
.msgwin .bubble.out.hist { display: block !important; opacity: 1 !important; transform: none !important; visibility: visible !important; }
.web-hero { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20600%20150%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%0A%3Cdefs%3E%0A%3ClinearGradient%20id%3D%22w%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23f3eee6%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23e7dfd3%22/%3E%3C/linearGradient%3E%0A%3CradialGradient%20id%3D%22l%22%20cx%3D%22.5%22%20cy%3D%220%22%20r%3D%22.7%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23fffaf0%22%20stop-opacity%3D%22.9%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fffaf0%22%20stop-opacity%3D%220%22/%3E%3C/radialGradient%3E%0A%3ClinearGradient%20id%3D%22f%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23d9cfc0%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23cbbfae%22/%3E%3C/linearGradient%3E%0A%3C/defs%3E%0A%3Crect%20width%3D%22600%22%20height%3D%22150%22%20fill%3D%22url%28%23w%29%22/%3E%0A%3Crect%20x%3D%220%22%20y%3D%22118%22%20width%3D%22600%22%20height%3D%2232%22%20fill%3D%22url%28%23f%29%22/%3E%0A%3Crect%20x%3D%220%22%20y%3D%22117%22%20width%3D%22600%22%20height%3D%221.5%22%20fill%3D%22%23bfb2a0%22/%3E%0A%3Cellipse%20cx%3D%22300%22%20cy%3D%2210%22%20rx%3D%22190%22%20ry%3D%2290%22%20fill%3D%22url%28%23l%29%22/%3E%0A%3Crect%20x%3D%22246%22%20y%3D%2226%22%20width%3D%22108%22%20height%3D%2272%22%20fill%3D%22%23f9f6f0%22%20stroke%3D%22%239c8a72%22%20stroke-width%3D%223%22/%3E%0A%3Crect%20x%3D%22254%22%20y%3D%2234%22%20width%3D%2292%22%20height%3D%2256%22%20fill%3D%22%23e9e3d6%22/%3E%0A%3Ccircle%20cx%3D%22282%22%20cy%3D%2256%22%20r%3D%2213%22%20fill%3D%22%23c96f53%22/%3E%0A%3Crect%20x%3D%22296%22%20y%3D%2244%22%20width%3D%2238%22%20height%3D%2238%22%20fill%3D%22%233f5f7a%22%20opacity%3D%22.9%22/%3E%0A%3Cpath%20d%3D%22M254%2080%20Q290%2066%20346%2076%20L346%2090%20L254%2090z%22%20fill%3D%22%23b9a46a%22%20opacity%3D%22.85%22/%3E%0A%3Crect%20x%3D%2296%22%20y%3D%2244%22%20width%3D%2254%22%20height%3D%2240%22%20fill%3D%22%23f9f6f0%22%20stroke%3D%22%239c8a72%22%20stroke-width%3D%222.5%22/%3E%0A%3Crect%20x%3D%22102%22%20y%3D%2250%22%20width%3D%2242%22%20height%3D%2228%22%20fill%3D%22%23dcd4c3%22/%3E%3Cpath%20d%3D%22M102%2072%20L118%2058%20L130%2068%20L144%2056%20L144%2078%20L102%2078z%22%20fill%3D%22%237d8f74%22/%3E%0A%3Crect%20x%3D%22450%22%20y%3D%2244%22%20width%3D%2254%22%20height%3D%2240%22%20fill%3D%22%23f9f6f0%22%20stroke%3D%22%239c8a72%22%20stroke-width%3D%222.5%22/%3E%0A%3Crect%20x%3D%22456%22%20y%3D%2250%22%20width%3D%2242%22%20height%3D%2228%22%20fill%3D%22%23e6d9c4%22/%3E%3Ccircle%20cx%3D%22477%22%20cy%3D%2264%22%20r%3D%228%22%20fill%3D%22%23d6a55a%22/%3E%0A%3Crect%20x%3D%22262%22%20y%3D%22108%22%20width%3D%2276%22%20height%3D%226%22%20rx%3D%222%22%20fill%3D%22%238a7660%22/%3E%3Crect%20x%3D%22268%22%20y%3D%22114%22%20width%3D%224%22%20height%3D%228%22%20fill%3D%22%238a7660%22/%3E%3Crect%20x%3D%22328%22%20y%3D%22114%22%20width%3D%224%22%20height%3D%228%22%20fill%3D%22%238a7660%22/%3E%0A%3C/svg%3E") center / cover no-repeat; height: calc(84 * var(--u)); }
.stage:not(.stage-lib) .win.doc { overflow: hidden; }
.web-hero { height: calc(150 * var(--u)); }

/* Made to fit you, lighter: four formats in the menu, two apps, no footnotes. */
.fit-menu > li:not(:nth-child(1)):not(:nth-child(4)):not(:nth-child(7)):not(:nth-child(8)) { display: none; }
.wd-row[data-app="messages"], .wd-add { display: none !important; }
.frags .frag-foot { display: none; }
.sel-out .rw { border-radius: 3px; transition: background-color 0.15s, color 0.15s; }
.sel-out .rw.on { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.sel-out .rw.done { color: color-mix(in srgb, var(--win-ink) 70%, transparent); }
/* The Dock answers the pointer like the real one. */
.dock i:hover { transform: translateY(calc(-6 * var(--u))) scale(1.12); }
@media (prefers-reduced-motion: reduce) {
  .stage:not(.stage-lib) :is(.win, .cursor, .dock i, .pill, .rchip) { transition: none !important; animation: none !important; }
  .cursor { display: none; }
}
.dock i { box-shadow: none; border-radius: 0; filter: drop-shadow(0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(0,0,0,0.22)); }
@media (prefers-reduced-motion: reduce) { .stage:not(.stage-lib) *, .stage:not(.stage-lib) *::before, .stage:not(.stage-lib) *::after { transition: none !important; animation: none !important; } }

/* Edit with voice: the review window, built like the Yullo window. */
.evrev { right: calc(48 * var(--u)); top: calc(90 * var(--u)); width: max-content; min-width: calc(430 * var(--u)); max-width: calc(520 * var(--u)); border-radius: calc(23 * var(--u)); background: var(--m-panel); -webkit-backdrop-filter: var(--m-blur); backdrop-filter: var(--m-blur); opacity: 0; transform: translateY(calc(10 * var(--u))); z-index: 5; }
.evrev .pane { --pane-surface: var(--pane-in); }
.ev-text { white-space: pre-line; font-size: calc(19 * var(--u)); line-height: 1.42; min-height: calc(70 * var(--u)); padding-bottom: calc(10 * var(--u)); }
.ev-foot { display: flex; align-items: center; gap: calc(12 * var(--u)); height: calc(32 * var(--u)); font-size: calc(13 * var(--u)); color: var(--win-ink); }
.ev-foot .ico { width: calc(15 * var(--u)); height: calc(15 * var(--u)); color: var(--win-grey); }
.ev-btn kbd { font: inherit; color: var(--win-grey); margin-left: calc(3 * var(--u)); }
.ev-replace { padding: calc(4 * var(--u)) calc(11 * var(--u)); border-radius: calc(7 * var(--u)); background: var(--accent); color: #fff; font-weight: 500; transition: filter 0.15s; }
.ev-replace kbd { color: rgba(255,255,255,0.75); }
[data-sub~="rev"] .evrev { opacity: 1; transform: none; }
[data-sub~="revpress"] .ev-replace { filter: brightness(0.85); }
.ev-btn { white-space: nowrap; hyphens: none; }
@media (max-width: 760px) { .ev-btn kbd { display: none; } .ev-foot { gap: calc(9 * var(--u)); } }
.sel .copy-ret { display: none; font-size: calc(10 * var(--u)); color: var(--win-grey); margin-left: calc(4 * var(--u)); }
.stage[data-sub~="ro"] .sel .copy-ret { display: inline; }
.sel .last { display: inline-flex; align-items: center; } .stage[data-sub~="ro"] .sel .copy-ret { display: inline-block; line-height: 1; }
/* The tint sits behind the glyphs with no extra advance, so spacing is the same with or without it. */
.ev-text .evc { --tint: color-mix(in srgb, var(--accent) 16%, transparent); background: var(--tint); box-shadow: 0 0 0 calc(2 * var(--u)) var(--tint); border-radius: calc(3 * var(--u)); padding: 0; }
:root[data-theme="dark"] .ev-text .evc { --tint: color-mix(in srgb, var(--accent) 26%, transparent); }
.ev-replace { background: var(--accent-fill, var(--accent)); }
.wsheet .sp-row.is-used p::after { font-size: calc(12.5 * var(--u)); color: var(--win-grey); }
/* Use and Cancel as Yullo's sheet draws them: filled grey capsules. */
.wsheet .btn, .wsheet .ws-foot .btn { border: 0 !important; border-radius: 999px !important; background: color-mix(in srgb, var(--win-ink) 9%, transparent) !important; color: var(--win-ink); padding: calc(4 * var(--u)) calc(13 * var(--u)) !important; }
:root[data-theme="dark"] .wsheet .btn { background: rgba(255,255,255,0.14) !important; }
.wsheet .sp-row { position: relative; } .wsheet .sp-row.is-used p::after { top: 50%; transform: translateY(-50%); }

/* Edit with voice review: the typed change, as the app's field. */
.ev-change, .ev-status { display: none; }
[data-sub~="evchange"] .ev-change { display: flex; }
[data-sub~="evbusy"] .ev-status { display: block; }
.ev-change { align-items: center; gap: calc(6 * var(--u)); height: calc(32 * var(--u)); margin: calc(4 * var(--u)) 0 calc(8 * var(--u)); padding: 0 calc(4 * var(--u)) 0 calc(10 * var(--u)); border-radius: calc(8 * var(--u)); background: color-mix(in srgb, var(--win-ink) 6%, transparent); font-size: calc(13 * var(--u)); }
.ev-field { flex: 1; color: var(--win-ink); white-space: nowrap; overflow: hidden; }
.ev-field:empty::before { content: attr(data-prompt); color: var(--win-grey); }
.ev-change .ico { width: calc(13 * var(--u)); height: calc(13 * var(--u)); color: var(--win-grey); }
.ev-send { width: calc(17 * var(--u)); height: calc(17 * var(--u)); fill: var(--accent-fill, var(--accent)); }
.ev-status { margin: 0 0 calc(6 * var(--u)); font-size: calc(12 * var(--u)); color: var(--win-grey); }
.ev-undo { display: none; }
[data-sub~="evundo"] .ev-undo { display: inline; }

.ev-stop { margin-left: 14px; }
.ev-replace2 { display: none; border: 1px solid var(--line, rgba(0,0,0,.15)); border-radius: 6px; padding: 3px 9px; }
[data-sub~="evchange"] .ev-chg, [data-sub~="evchange"] .ev-replace { display: none; }
[data-sub~="evchange"] .ev-replace2 { display: inline-flex; }
[data-sub~="evbusy"] .ev-foot { opacity: .4; }
.stage :is(.win, .evrev) :is(p, span, div) { hyphens: none; }
.evrev .ev-text { max-width: calc(430 * var(--u) - 2 * var(--pane-pad, 0px)); }
.evrev .ev-text { min-height: 0; padding-bottom: calc(4 * var(--u)); }
.evrev .ev-foot { height: calc(28 * var(--u)); }

/* A LaTeX source: monospace throughout, as in a code editor; no rich-text toolbar. */
.stage[data-tex] .doc-text { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.74em; line-height: 1.6; }
.stage[data-tex] .tb-doc { display: none; }
/* The review asks first: its field alone. */
[data-sub~="evask"] .ev-text, [data-sub~="evask"] .ev-foot, [data-sub~="evask"] .ev-show { display: none; }
[data-sub~="evask"] .ev-change { display: flex; margin-top: 0; }
.ev-show { margin-left: auto; font: 500 max(9px, calc(15 * var(--u))) / 1 -apple-system, "SF Pro Text", "Helvetica Neue", sans-serif; text-decoration: line-through; text-decoration-thickness: 1.5px; color: var(--win-grey); padding: 0 calc(4 * var(--u)); }
[data-sub~="evshow"] .ev-show { color: var(--accent); }
.ev-text .evd { text-decoration: line-through; color: var(--win-grey); margin-right: .25em; }

/* Key caps draw the same glyphs in every language. */
:root .keys kbd, :root .keystroke kbd { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
/* Phones: the paper sample ends at its paragraph, so nothing peeks out beside the review. */
@media (max-width: 760px) { .stage[data-tex] .doc-post { visibility: hidden; } }

/* The review's arrival (see arrive() in script.js). At rest, the result is clean. */
.stage:not([data-sub~="evshow"]) .ev-text:not(.tinted) .evc { background: none !important; box-shadow: none !important; }
.ev-text.tinted .evc { transition: background .3s, box-shadow .3s; }
.ev-text:not(.tinted) .evc { transition: background .35s ease-out, box-shadow .35s ease-out; }
.ev-text.fadeout { opacity: 0; transition: opacity .1s; }
.ev-text.fadein { animation: ev-fade .15s ease-out; }
@keyframes ev-fade { from { opacity: 0; } }
:root .evrev { background: rgba(246, 247, 250, 0.94); }
:root[data-theme="dark"] .evrev { background: rgba(30, 30, 33, 0.96); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .evrev { background: rgba(30, 30, 33, 0.96); } }

/* After the demo, one standard gap before Made to fit you. */
.tasks .demo { padding-bottom: 0; }
.tasks .fit { margin-top: clamp(56px, 7vw, 112px); }