/* The landing page. Its tokens are the app's (app/styles.css), copied here and kept in step by
   hand: :root holds the dark set; [data-theme="light"], which the page starts in, swaps in the
   light one. --tint and --shadow are this page's own, and --sans has a stand-in font added. */

/* Until its fonts arrive, a browser draws the page in the next font along, Verdana, which sets the
   same text about a sixth wider than Atkinson Hyperlegible Next and sits it differently on the
   line, so all the text jumps when Atkinson comes in. These faces are Verdana sized and placed as
   Atkinson, measured on this page's own text, so the text keeps its place. Bold Verdana is wider
   still, so it has a size of its own. Where Verdana is not installed they are passed over. */
@font-face {
  font-family: 'Verdana sized as Atkinson';
  src: local('Verdana');
  font-weight: 100 500;
  size-adjust: 86.4%;
  ascent-override: 113.9%;
  descent-override: 36.6%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Verdana sized as Atkinson';
  src: local('Verdana Bold'), local('Verdana-Bold');
  font-weight: 600 900;
  size-adjust: 81.7%;
  ascent-override: 120.4%;
  descent-override: 38.7%;
  line-gap-override: 0%;
}

:root {
  --ground: #0E0F11;
  --surface: #17191C;
  --raised: #22252A;
  --line: #30343A;
  --text: #F4F2EC;
  --muted: #9BA1A9;
  --accent: #FFC233;
  --ink: #1A1300;   /* text on the accent */
  --emph: #FFC233;  /* accent used as text: cues, bold */
  --mark: #FFC233;  /* accent used as a graphic: carets, focus rings */
  --dim: rgba(14, 15, 17, .68);
  --band: rgba(255, 255, 255, .055);
  --tint: rgba(255, 194, 51, .14);
  --rec: #FF5A4F;   /* the dot that shows a recording is being made, as in the app */
  --shadow: 0 30px 80px rgba(0, 0, 0, .55);
  --sans: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', 'Verdana sized as Atkinson', Verdana, system-ui, sans-serif;
  --mono: 'Atkinson Hyperlegible Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  color-scheme: dark;
}

[data-theme="light"] {
  --ground: #F3F4F5;
  --surface: #FFFFFF;
  --raised: #E9EBEE;
  --line: #D3D7DC;
  --text: #121417;
  --muted: #59606A;
  --accent: #F5B300;
  --emph: #7A4E00;
  --mark: #B06F00;
  --dim: rgba(243, 244, 245, .72);
  --band: rgba(18, 20, 23, .055);
  --tint: rgba(245, 179, 0, .16);
  --rec: #D93025;
  --shadow: 0 30px 80px rgba(18, 20, 23, .16);
  color-scheme: light;
}

/* Base */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--emph); }
a:hover { color: var(--text); }
::selection { background: var(--accent); color: var(--ink); }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--mark); outline-offset: 3px; }

.icon {
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-solid, .icon .solid { fill: currentColor; }
.icon-solid { stroke: none; }
[data-theme="dark"] .icon-moon, [data-theme="light"] .icon-sun { display: none; }

.caret { flex: none; fill: var(--mark); }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
.stack { display: flex; flex-direction: column; gap: 40px; }
.section { padding-top: clamp(96px, 12vw, 160px); }

/* A section's label, set as the prompter sets a cue: small capitals with a rule after them. */
.cue-label {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--emph);
}
.cue-label::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* Text measures are in ems, not ch. A ch is the width of the font's 0, so it would shrink while the
   stand-in font is up and the text would wrap differently. Each is what its ch came to in Atkinson
   (a 0 is .648em wide, .656em at 600): 16ch is 10.5em, 44ch 28.5em, 46ch 29.8em, 62ch 40.2em. */
h2 { margin: 0; font-size: clamp(38px, 5.2vw, 64px); line-height: 1.04; font-weight: 600; letter-spacing: -.022em; text-wrap: balance; }
h2.narrow { max-width: 10.5em; }
h3 { margin: 0; font-size: 21px; line-height: 1.25; font-weight: 600; }
.body-lead { margin: 0; max-width: 28.5em; font-size: 19px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }

.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 64px; }
.section-head h2 { flex: 1 1 520px; min-width: 0; }
.section-head .body-lead { flex: 1 1 340px; min-width: 0; }

/* Buttons */
.button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border-radius: 16px;
  background: var(--accent);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.button:hover { color: var(--ink); filter: brightness(1.07); }
.button-small { height: 44px; padding: 0 16px; border-radius: 12px; font-size: 15px; }
.button-large { height: 60px; padding: 0 28px 0 24px; font-size: 18px; }
.button-large .icon { width: 22px; height: 22px; }
/* A button that leads to another site is drawn in outline, so the page's own buttons stay the
   ones in the accent. */
.button-line { height: 52px; padding: 0 20px 0 24px; background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font-size: 17px; }
.button-line:hover { background: var(--raised); color: var(--text); filter: none; }
.button-line .icon { width: 18px; height: 18px; stroke-width: 2; }

.icon-btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
}
.icon-btn:hover { background: var(--raised); }

/* A button that is on or off, or one of a set: the demo's toggles and fonts, the explorer's tabs. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
}
.chip:hover { background: var(--raised); }
.chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--ink); }

.switch-track { position: relative; flex: none; width: 48px; height: 28px; border-radius: 14px; background: var(--raised); }
.switch-track::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform .15s ease;
}
[aria-checked="true"] > .switch-track, .switch-track.is-on { background: var(--accent); }
[aria-checked="true"] > .switch-track::after, .switch-track.is-on::after { background: var(--ink); transform: translateX(20px); }

/* Nav */
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 16px; padding-bottom: 16px; }
.wordmark { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--text); font-size: 18px; font-weight: 600; letter-spacing: .01em; text-decoration: none; }
.wordmark:hover { color: var(--text); }
.nav-end { display: flex; align-items: center; gap: 8px; }
.nav-links { display: flex; gap: 2px; }
.nav-links a { display: inline-flex; align-items: center; height: 44px; padding: 0 12px; border-radius: 12px; color: var(--text); font-size: 15px; text-decoration: none; }
.nav-links a:hover { background: var(--raised); }
/* On a phone the hero's own button is just below. */
@media (max-width: 820px) { .nav-links { display: none; } }
@media (max-width: 520px) { .nav .button { display: none; } }

/* Hero */
.hero { display: flex; flex-direction: column; gap: clamp(32px, 4vw, 48px); padding-top: clamp(48px, 7vw, 96px); }

/* The headline is set as the prompter sets a script: the line already read faded, the line being
   read in the reading line between its carets, which sit at the window's edges as in the app.
   Its text lines up with the page's, but is kept clear of the carets on a narrow screen. */
.headline { margin: 0; font-size: clamp(34px, 8.4vw, 108px); line-height: 1.14; font-weight: 600; letter-spacing: -.025em; }
.headline .line { position: relative; display: block; }
.headline .line-text {
  display: block;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 max(calc(44px - max(0px, (100% - 1200px) / 2)), clamp(16px, 4vw, 40px));
}
.headline .is-read { opacity: .26; }
.headline .is-band { padding: .04em 0 .06em; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--band); }
.headline .is-next { color: var(--emph); }
.caret-start, .caret-end { position: absolute; top: 50%; margin-top: -9px; }
.caret-start { left: 16px; }
.caret-end { right: 16px; }

.hero-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 48px; }
.hero-copy { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.lead { margin: 0; max-width: 29.8em; font-size: clamp(18px, 1.7vw, 21px); color: var(--muted); text-wrap: pretty; }
.checks { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; font-size: 15px; }
.checks li { display: flex; align-items: center; gap: 8px; }
.checks .icon { width: 18px; height: 18px; stroke: var(--mark); stroke-width: 2; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.link-down { display: inline-flex; align-items: center; gap: 8px; height: 60px; padding: 0 8px; color: var(--text); font-size: 17px; font-weight: 600; text-decoration: none; }
.link-down .icon { width: 18px; height: 18px; stroke-width: 2; }

/* The demo */
.demo { padding-top: clamp(48px, 6vw, 80px); }
.demo .wrap { display: flex; flex-direction: column; gap: 20px; }
.demo-note { margin: 0; text-align: center; font-size: 15px; color: var(--muted); text-wrap: balance; }

/* The miniature prompter. As in the app, the band, the script and the shade over the lines read
   are laid over each other, with the reading line 36% of the way down. --font is the font chosen. */
.mini {
  --font: 'Atkinson Hyperlegible Next';
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow);
  font-size: 16px;
  line-height: 1.4;
}
.mini-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 0 20px; border-bottom: 1px solid var(--line); background: var(--ground); }
.mini-source { min-width: 0; overflow: hidden; font-family: var(--mono); font-size: 14px; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.live { flex: none; display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; color: var(--emph); }
.live::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--mark); }

/* The text is as big as the column lets its widest line be (14.6 ems, in Lexend), up to 40px. */
.mini-stage {
  position: relative;
  height: clamp(260px, 11em, 440px);
  overflow: hidden;
  background: var(--ground);
  font-size: min(40px, max(17px, 4.3cqw), calc((100cqw - 74px) / 14.6));
}
.mini-flip { position: absolute; inset: 0; }
.mini.is-mirrored .mini-flip { transform: scaleX(-1); }
.mini-band {
  position: absolute;
  top: 36%;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 1.4em;
  padding: 0 clamp(8px, 2.4cqw, 16px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--band);
}
.mini-column { position: absolute; top: 36%; left: 50%; width: min(88%, calc(100% - 72px)); transform: translateX(-50%); }
.mini-track { font-family: var(--font), var(--sans); font-weight: 500; will-change: transform; }
.mini-dim { position: absolute; top: 0; left: 0; right: 0; height: 36%; background: var(--dim); pointer-events: none; }

/* Every block is a set number of ems tall: landing.js works the scroll out from them. */
.mini-track .line { height: 1.4em; line-height: 1.4; letter-spacing: .005em; white-space: nowrap; }
.mini-track strong { font-weight: 700; color: var(--emph); }
.mini-track .gap { height: .75em; }
.mini-track .cue, .mini-track .direction { display: flex; align-items: center; gap: .43em; height: 1.4em; color: var(--emph); }
.mini-track .cue::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.mini-track .direction::after { content: ''; flex: 1; border-top: 2px dashed var(--line); }
.mini-track .label, .mini-track .status { flex: none; font-family: var(--mono); font-size: max(10px, .36em); line-height: 1; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.mini-track .status { color: var(--muted); }
.mini-track .comment { flex: none; font-size: max(12px, .54em); line-height: 1.2; white-space: nowrap; }
.mini-track .comment:empty, .mini-track .status:empty { display: none; }
.mini-track .pause::before { content: ''; flex: none; width: max(7px, .23em); height: max(10px, .32em); border: solid currentColor; border-width: 0 max(2px, .072em); }
.mini-track .action::before { content: ''; flex: none; width: max(7px, .25em); height: max(7px, .25em); background: currentColor; transform: rotate(45deg); }

.mini-count {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dim);
  color: var(--mark);
  font-family: var(--mono);
  font-size: 4em;
  font-weight: 500;
  line-height: 1;
}

.mini-dock { display: flex; flex-direction: column; gap: 8px; padding: 8px 20px 16px; border-top: 1px solid var(--line); }
.mini-scrub { display: flex; align-items: center; gap: 12px; }
.mini-time { flex: none; min-width: 48px; font-family: var(--mono); font-size: 14px; color: var(--muted); }
.mini-left { min-width: 88px; text-align: right; }
.mini-progress { position: relative; flex: 1; height: 3px; border-radius: 2px; background: var(--line); }
.mini-progress span { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: 2px; background: var(--accent); }
.mini-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.transport { display: flex; align-items: center; gap: 8px; }
.transport .icon-btn .icon { width: 22px; height: 22px; }
.play { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: var(--accent); color: var(--ink); }
.play:hover { filter: brightness(1.07); }
.play .icon { width: 26px; height: 26px; }
.icon-pause, .is-playing .icon-play { display: none; }
.is-playing .icon-pause { display: block; }
.speed { display: flex; align-items: center; gap: 12px; }
.speed-label { font-size: 15px; color: var(--muted); }
.stepper { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 12px; }
.stepper .icon-btn { border-radius: 11px; }
.stepper .icon { width: 18px; height: 18px; stroke-width: 2; }
.stepper-value { min-width: 84px; font-family: var(--mono); font-size: 15px; text-align: center; }
.switch { display: flex; align-items: center; gap: 12px; min-height: 44px; margin-left: auto; padding: 0 2px; border: 0; background: none; color: var(--text); font-size: 15px; text-align: left; }
.mini-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.fonts { display: flex; flex-wrap: wrap; gap: 8px; }
.chip.font { padding: 0 12px; border-radius: 10px; font-size: 14px; font-weight: 500; }
.talk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.talk-note { font-size: 13px; color: var(--muted); }
.levels { display: flex; align-items: center; gap: 2px; height: 18px; }
.levels span { width: 3px; height: 3px; border-radius: 2px; background: currentColor; }
.talk-status { min-width: 92px; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.talk-status.is-hearing { color: var(--emph); }

/* Scroll while I speak */
.split { display: flex; flex-wrap: wrap; align-items: center; gap: 48px 72px; }
.split-copy { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.split-copy .body-lead { max-width: 29.8em; }
.points { display: flex; flex-direction: column; gap: 20px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 16px; color: var(--muted); }
.points li { display: flex; gap: 16px; }
.points strong { display: block; margin-bottom: 2px; color: var(--text); font-size: 17px; }
.point-icon { flex: none; display: flex; color: var(--muted); }
/* In a list the icon is as tall as its title's line, so the two sit level. */
.points .point-icon { align-items: center; height: 26px; }

.voice-figure { flex: 1.25 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 20px; margin: 0; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--line); border-radius: 24px; background: var(--surface); }
.voice-legend { display: flex; gap: 12px; font-family: var(--mono); font-size: clamp(10px, 2.6vw, 12px); white-space: nowrap; }
.voice-legend span { display: flex; align-items: center; gap: 8px; }
.voice-legend span::before { content: ''; width: 8px; height: 8px; border-radius: 50%; }
.voice-legend .is-heard { flex: 20; color: var(--emph); }
.voice-legend .is-heard::before { background: var(--mark); }
.voice-legend .is-heard:last-child { justify-content: flex-end; }
.voice-legend .is-quiet { flex: 16; color: var(--muted); }
.voice-legend .is-quiet::before { border: 1.5px solid var(--muted); }

/* The level meter: landing.js puts in its bars. */
.meter { display: flex; align-items: center; gap: 3px; height: 72px; }
.meter span { flex: 1; min-width: 2px; height: 4px; border-radius: 2px; background: var(--line); }
.meter .is-talking { background: var(--mark); animation: level 1.1s ease-in-out infinite; }
@keyframes level { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }

/* The chart's labels are set outside it, so they stay a readable size however small it is drawn. */
.chart { position: relative; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; fill: none; }
.chart .axis { stroke: var(--line); }
.chart .is-dashed { stroke-dasharray: 4 5; }
.chart .area { fill: var(--tint); }
.chart .trace { stroke: var(--mark); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.chart .span { stroke: var(--muted); stroke-width: 1.5; }
.chart-label { position: absolute; font-family: var(--mono); font-size: 12px; line-height: 1; color: var(--muted); white-space: nowrap; }
.voice-figure figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; font-size: 15px; color: var(--muted); }
.trace-key { display: flex; align-items: center; gap: 8px; }
.trace-key::before { content: ''; width: 18px; height: 3px; border-radius: 2px; background: var(--mark); }

/* What a script can hold: the same lines written and shown, the kind picked lit in both. */
.explorer { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); }
.explorer-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.explorer-desc { flex: 1 1 360px; min-width: 0; max-width: 40.2em; font-size: 15px; color: var(--muted); }
.explorer-desc p { margin: 0; text-wrap: pretty; }
/* The panes sit on a line-coloured ground with a pixel between them: a rule between them side by
   side, and between them stacked. */
.panes { display: flex; flex-wrap: wrap; gap: 1px; background: var(--line); }
.pane { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 16px; padding: 24px clamp(16px, 2.4vw, 28px) 28px; background: var(--surface); }
.pane-out { flex: 1.2 1 420px; background: var(--ground); }
.pane-title { font-family: var(--mono); font-size: 12px; color: var(--muted); }

.source { display: flex; flex-direction: column; gap: 2px; font-family: var(--mono); font-size: 15px; line-height: 1.6; }
.source div { padding: 4px 12px; border-radius: 8px; color: var(--muted); overflow-wrap: anywhere; transition: background .2s ease, color .2s ease; }
.source .is-on { background: var(--tint); color: var(--text); }

.output > * { margin: 0; padding: 0 12px; border-top: 1px solid transparent; border-bottom: 1px solid transparent; opacity: .4; transition: opacity .2s ease, background .2s ease; }
.output > .is-on { border-color: var(--line); background: var(--band); opacity: 1; }
.output p { padding-top: 8px; padding-bottom: 8px; font-size: clamp(20px, 2.1vw, 26px); line-height: 1.35; font-weight: 500; letter-spacing: .005em; }
.output strong { font-weight: 700; color: var(--emph); }
.output .cue, .output .direction { display: flex; align-items: center; color: var(--emph); }
.output .cue { gap: 16px; padding-top: 16px; padding-bottom: 16px; font-family: var(--mono); font-size: 13px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; }
.output .cue::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.output .direction { flex-wrap: wrap; gap: 8px 12px; padding-top: 12px; padding-bottom: 12px; }
.output .direction::after { content: ''; flex: 1; min-width: 40px; border-top: 2px dashed var(--line); }
.output .label { font-family: var(--mono); font-size: 13px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; }
.output .comment { font-size: 19px; line-height: 1.2; }
.output .pause::before { content: ''; flex: none; width: 10px; height: 14px; border: solid currentColor; border-width: 0 3px; }
.output .action::before { content: ''; flex: none; width: 9px; height: 9px; margin: 0 2px; background: currentColor; transform: rotate(45deg); }

.footnote { margin: -16px 0 0; font-size: 15px; color: var(--muted); text-wrap: pretty; }
.footnote code { font-family: var(--mono); color: var(--text); }

/* Settings, a card each */
.cards { display: flex; flex-wrap: wrap; gap: 20px; }
.card { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 20px; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.card-wide { flex: 2 1 560px; }
.card-text { display: flex; flex-direction: column; gap: 8px; }
.card-text p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }

.visual { position: relative; height: 176px; overflow: hidden; border-radius: 14px; background: var(--ground); }
.visual-label { position: absolute; left: 16px; bottom: 12px; font-family: var(--mono); font-size: 12px; color: var(--muted); }

.v-glass { display: flex; gap: 12px; background: none; }
.glass-tile { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 14px; background: var(--ground); font-size: 44px; font-weight: 600; }
.glass-tile::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 60px; margin-top: -30px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--band); }
.glass-tile .is-mirror, .glass-tile .is-flip { position: relative; }
.glass-tile .is-mirror { transform: scaleX(-1); }
.glass-tile .is-flip { transform: scaleY(-1); }

.v-speed { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 0 24px; }
.stepper-key { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
.fake-range { display: flex; align-items: center; gap: 12px; align-self: stretch; font-size: 15px; color: var(--muted); }
.fake-track { position: relative; flex: 1; height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--accent) 38%, var(--line) 38%); }
.fake-track::after { content: ''; position: absolute; top: 50%; left: 38%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border: 4px solid var(--ground); border-radius: 50%; background: var(--text); box-shadow: 0 0 0 1px var(--line); }

.v-line { display: flex; flex-direction: column; justify-content: center; font-size: 22px; font-weight: 500; line-height: 40px; white-space: nowrap; }
.v-line > span { padding: 0 34px; }
.v-line .is-read { opacity: .3; }
.v-line .is-band { display: flex; align-items: center; gap: 12px; padding: 0 8px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--band); }
.v-line .is-band span { flex: 1; overflow: hidden; }

.v-fonts { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 0 20px; }
.v-fonts > span { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; height: 32px; }
.v-fonts > span > span { font-size: 20px; font-weight: 500; white-space: nowrap; }
.v-fonts small { font-size: 12px; color: var(--muted); white-space: nowrap; }

.v-colours { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 0 20px; }
.pairs { display: flex; gap: 12px; }
.pairs span { flex: 1; display: flex; align-items: center; justify-content: center; height: 80px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); font-size: 30px; font-weight: 600; }
.swatches { display: flex; justify-content: center; gap: 8px; }
.swatches span { width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 6px; }

.v-files { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; padding: 0 20px; font-family: var(--mono); font-size: 14px; }
.v-files span { display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.v-files span:nth-child(2) { margin-left: 28px; }
.v-files span:nth-child(3) { margin-left: 56px; }
.v-files .icon { width: 18px; height: 18px; stroke: var(--muted); }
.v-files .is-picked { border-color: var(--mark); }
.v-files .is-picked .icon { stroke: var(--mark); }

.v-count { display: flex; align-items: baseline; justify-content: center; gap: 24px; padding-top: 24px; font-family: var(--mono); font-weight: 500; line-height: 1; color: var(--mark); }
.v-count span:nth-child(1) { font-size: 112px; }
.v-count span:nth-child(2) { font-size: 64px; opacity: .45; }
.v-count span:nth-child(3) { font-size: 40px; opacity: .22; }

.v-remember { display: flex; flex-direction: column; justify-content: center; padding: 0 20px; font-size: 15px; }
.v-remember > span { display: flex; align-items: center; justify-content: space-between; height: 44px; }
.v-remember > span + span { border-top: 1px solid var(--line); }
.v-remember .value { font-family: var(--mono); color: var(--muted); }

.v-offline { display: flex; align-items: center; justify-content: center; color: var(--mark); }
.v-offline .icon { width: 88px; height: 88px; stroke-width: 1.25; }

/* Recording: the red dot and time from the app's top bar, a take with its Save, and the file it saves. */
.v-record { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 0 24px; font-family: var(--mono); font-size: 14px; }
.rec-live { display: flex; align-items: center; gap: 8px; }
.rec-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--rec); }
.take-pill { display: flex; align-items: center; gap: 14px; height: 52px; padding: 0 8px 0 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.take-pill .icon { width: 18px; height: 18px; }
/* The waveform is drawn at its own size and cut off where the take is narrower, not squeezed. */
.take-wave { flex: 1; min-width: 0; overflow: hidden; }
.take-wave svg { display: block; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.take-save { flex: none; padding: 7px 14px; border: 1px solid var(--line); border-radius: 8px; font-family: var(--sans); font-size: 14px; font-weight: 600; }
.take-file { overflow: hidden; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }

/* Keyboard and clicker */
.keys-layout { display: flex; flex-wrap: wrap; gap: 20px; }
.clicker { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.clicker-keys { display: flex; gap: 12px; }
/* The clicker's buttons are dark in either theme, as the device is. */
.clicker-keys span { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 16px; background: #0B0C0E; box-shadow: 0 0 0 1px var(--line); color: var(--accent); }
.clicker-keys .icon { width: 26px; height: 26px; stroke-width: 2; }
.keys { flex: 3 1 560px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 12px; margin: 0; }
.keys div { display: flex; align-items: center; gap: 16px; min-height: 76px; padding: 12px 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.keys dt { flex: none; display: flex; gap: 8px; min-width: 80px; }
.keys dd { margin: 0; font-size: 16px; color: var(--muted); }
kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-bottom-width: 3px;
  border-radius: 8px;
  background: var(--ground);
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
}
kbd .icon { width: 14px; height: 14px; stroke-width: 2.25; }

/* On a Mac, with Fanlight */
.mac-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 8px; }
.mac-note { font-size: 15px; color: var(--muted); }

/* The laptop: its bezel is dark in either theme, as a Mac's is. The text in the floating window is
   sized to the screen, so the picture scales as one. */
.mac-art { flex: 1.15 1 440px; min-width: 0; margin: 0; }
.mac-screen { position: relative; margin: 0 4.5%; padding: 16px 12px 12px; border-radius: 20px 20px 6px 6px; background: #0B0C0E; box-shadow: 0 0 0 1px var(--line); }
.mac-camera { position: absolute; top: 6px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #2A2E34; }
.mac-display { container-type: inline-size; position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; background: var(--raised); }
.mac-base { height: 12px; border-radius: 0 0 14px 14px; background: linear-gradient(var(--line), var(--raised)); }

.mac-call { position: absolute; top: 34%; left: 8%; right: 8%; bottom: 7%; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.mac-call-bar { display: flex; gap: 4px; padding: 8px; border-bottom: 1px solid var(--line); }
.mac-call-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.mac-call-tiles { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; }
.mac-call-tiles i { border-radius: 5px; background: var(--raised); }
.mac-call-tiles .is-speaking { box-shadow: inset 0 0 0 2px var(--mark); }

.mac-float {
  position: absolute;
  top: 5%;
  left: 50%;
  width: 62%;
  display: flex;
  flex-direction: column;
  padding: .5em 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--ground);
  box-shadow: var(--shadow);
  font-size: 3.4cqw;
  font-weight: 600;
  line-height: 2;
  white-space: nowrap;
  transform: translateX(-50%);
}
.mac-float > span { padding: 0 1.4em; }
.mac-float .is-read { opacity: .3; }
.mac-float .is-band { display: flex; align-items: center; gap: .5em; padding: 0 .45em; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--band); }
.mac-float .is-band span { flex: 1; }
.mac-float .caret { width: .55em; height: .7em; }

/* Private by design */
.trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 40px 48px; }
.trust > div { display: flex; flex-direction: column; gap: 12px; }
.trust .point-icon .icon { width: 22px; height: 22px; }
.trust h3 { font-size: 24px; line-height: 1.2; }
.trust p { margin: 0; color: var(--muted); text-wrap: pretty; }

/* The last call, in a reading line of its own */
.finale { display: flex; flex-direction: column; align-items: center; gap: 40px; padding: clamp(112px, 14vw, 180px) 0 clamp(96px, 12vw, 150px); }
.finale-band {
  position: relative;
  align-self: stretch;
  padding: .06em 44px .08em;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--band);
  font-size: clamp(24px, 7vw, 88px);
  line-height: 1.14;
  letter-spacing: -.025em;
  text-align: center;
}
.finale p { margin: 0; padding: 0 16px; font-size: 19px; color: var(--muted); text-align: center; text-wrap: balance; }
/* Tight tracking suits only the big sizes. On a phone the headline and the last call are under
   40px, so they keep the font's own spacing. */
@media (max-width: 580px) { .headline, .finale-band { letter-spacing: 0; } }

.footer { border-top: 1px solid var(--line); }
.footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; padding-top: 28px; padding-bottom: 28px; font-size: 15px; color: var(--muted); }
.wordmark-small { min-height: 0; font-size: 15px; }
.footer a { display: inline-flex; align-items: center; min-height: 44px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .meter .is-talking { animation: none; }
}