/* The drawn phone: the app's screens in HTML and CSS, from its redesign
   (design/redesign/*.dc.html). One component, shared by the hearing & speech
   page and the home page's "the app, step by step", so the two cannot drift
   apart. Linked rather than inlined: one file the browser keeps, whichever
   page it arrives from; scripts/stamp-assets.py fingerprints the link.

   Nothing here is a page's layout. Where a phone sits, how wide it is
   (--pm-w) and the shadow it casts (--pm-shadow) are the page's to set. */

/* Geist, the app's face, for the drawn phones alone — cut down to the Latin
   letters they use (22 KB, and 5 KB of Geist Mono for the language codes and
   the clock). Served from here like the site's other fonts; licence in
   fonts/OFL.txt. Other scripts fall back to the system's, as they do in the
   app. The ?v= is each file's fingerprint, from scripts/stamp-assets.py. */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/fonts/geist-latin.woff2?v=15819f6757) format("woff2"); unicode-range: U+0020-007E, U+00A0-017F, U+0218-021B, U+02C6, U+02DA, U+02DC, U+2010-2027, U+2030-203A, U+20AC, U+2122, U+2190-2193, U+2212; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 500 600; font-display: swap; src: url(/fonts/geist-mono-latin.woff2?v=d446907209) format("woff2"); unicode-range: U+0020-005A, U+00B7, U+2192; }

:root {
  --pm-font: "Geist", -apple-system, "SF Pro Text", "Helvetica Neue", Roboto, Arial, sans-serif;
  --pm-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --pm-shadow: rgba(0, 0, 0, 0.5);
}

/* ── the drawn phone ───────────────────────────────────────────────────
   One component, sized by its own width: every length inside is in the
   app's points, --u, so a 390-point screen scales to whatever the phone is
   given — 318 px in the hero, 290 on a phone — and stays the same drawing.
   Copied from design/redesign/*.dc.html: #0B0D11 ground, #13161C panels,
   #242A34 lines, #5EC8A0 accent, Geist. */
.pm { position: relative; width: min(100%, var(--pm-w, 320px)); margin: 0 auto; }
.pm-body { position: relative; aspect-ratio: 414 / 868; padding: 2.9%; border-radius: 13.5% / 6.45%; background: linear-gradient(150deg, #454b54 0%, #1d2025 18%, #0d0f12 55%, #22262c 86%, #3b4047 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 0 0 3px #08090b, 0 60px 90px -44px var(--pm-shadow), 0 22px 40px -22px rgba(0, 0, 0, 0.45); }
.pm-screen { --u: calc(100cqw / 390); --fs: 1; position: relative; height: 100%; container-type: inline-size; overflow: hidden; border-radius: 11.3% / 5.23%; background: #0B0D11; color: #F3F5F8; font-family: var(--pm-font); font-weight: 400; line-height: 1.35; letter-spacing: 0; text-transform: none; -webkit-font-smoothing: antialiased; }
.pm-screen.fs-l { --fs: 1.45; }
.pm-screen svg { display: block; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pm-status { position: absolute; z-index: 3; inset: 0 0 auto; height: calc(54 * var(--u)); display: flex; align-items: center; justify-content: space-between; padding: calc(4 * var(--u)) calc(28 * var(--u)) 0 calc(40 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 600; color: #FFFFFF; pointer-events: none; }
.pm-status .pm-sys { width: calc(70 * var(--u)); height: calc(13 * var(--u)); fill: currentColor; stroke: none; }
.pm-island { position: absolute; left: 50%; top: calc(11 * var(--u)); width: calc(124 * var(--u)); height: calc(36 * var(--u)); margin-left: calc(-62 * var(--u)); border-radius: 999px; background: #000000; }
.pm-homebar { position: absolute; z-index: 3; left: 50%; bottom: calc(8 * var(--u)); width: calc(136 * var(--u)); height: calc(5 * var(--u)); margin-left: calc(-68 * var(--u)); border-radius: 999px; background: rgba(255, 255, 255, 0.6); }
.pm-app { position: absolute; inset: 0; display: flex; flex-direction: column; }

/* the conversation (design: Live, Speaking) */
.pm-head { display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--u)); padding: calc(58 * var(--u)) calc(20 * var(--u)) calc(12 * var(--u)); border-bottom: 1px solid #161A21; }
.pm-hl, .pm-hr { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.pm-hr { gap: calc(8 * var(--u)); }
.pm-live { display: flex; align-items: center; gap: calc(8 * var(--u)); height: calc(32 * var(--u)); padding: 0 calc(12 * var(--u)); border-radius: 999px; background: rgba(94, 200, 160, 0.12); border: 1px solid rgba(94, 200, 160, 0.35); color: #5EC8A0; font-size: calc(12 * var(--u)); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.pm-live i { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 999px; background: #5EC8A0; box-shadow: 0 0 0 calc(4 * var(--u)) rgba(94, 200, 160, 0.18); }
.pm-codes, .pm-clock { font-family: var(--pm-mono); font-size: calc(13 * var(--u)); font-weight: 500; color: #A7AFBB; white-space: nowrap; }
.pm-clock { color: #6F7885; }
.pm-ib { width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: 999px; background: #13161C; border: 1px solid #242A34; color: #D5DAE1; display: grid; place-items: center; }
.pm-ib svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); stroke-width: 1.9; }
.pm-feed { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: calc(22 * var(--u)); padding: calc(20 * var(--u)) calc(20 * var(--u)) calc(14 * var(--u)); overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 calc(56 * var(--u))); mask-image: linear-gradient(to bottom, transparent 0, #000 calc(56 * var(--u))); }
.pm-turn { display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.pm-who { display: flex; align-items: center; gap: calc(8 * var(--u) * var(--fs)); font-size: calc(12 * var(--u) * var(--fs)); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.2; color: var(--c, #A7AFBB); }
.pm-turn .pm-who::before { content: ""; flex: none; width: calc(8 * var(--u) * var(--fs)); height: calc(8 * var(--u) * var(--fs)); border-radius: calc(3 * var(--u)); background: var(--c); }
.pm-said { margin: 0; font-size: calc(21 * var(--u) * var(--fs)); line-height: 1.35; font-weight: 500; letter-spacing: -0.01em; color: #F3F5F8; }
.pm-mine { align-self: flex-end; max-width: calc(300 * var(--u)); margin-left: calc(50 * var(--u)); display: flex; flex-direction: column; gap: calc(6 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)); background: #13161C; border: 1px solid #242A34; border-radius: calc(18 * var(--u)) calc(18 * var(--u)) calc(6 * var(--u)) calc(18 * var(--u)); }
.pm-mh { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(4 * var(--u)) calc(12 * var(--u)); }
.pm-sb { display: inline-flex; align-items: center; gap: calc(5 * var(--u)); color: #5EC8A0; font-size: calc(13 * var(--u)); font-weight: 700; white-space: nowrap; }
.pm-sb svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); stroke-width: 2.4; }
.pm-mine .pm-said { font-size: calc(19 * var(--u) * var(--fs)); }
.pm-ys { margin: 0; font-size: calc(14 * var(--u) * var(--fs)); line-height: 1.45; color: #6F7885; }
.pm-foot { display: flex; flex-direction: column; gap: calc(12 * var(--u)); padding: calc(12 * var(--u)) calc(20 * var(--u)) calc(30 * var(--u)); border-top: 1px solid #161A21; background: #0B0D11; }
.pm-pill { align-self: flex-start; display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(10 * var(--u)) calc(16 * var(--u)); border-radius: 999px; background: #13161C; border: 1px solid #242A34; color: #D5DAE1; font-size: calc(18 * var(--u)); font-weight: 600; line-height: 1.2; }
.pm-pill svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); stroke-width: 2.4; }
.pm-bars { display: flex; align-items: flex-end; gap: calc(3 * var(--u)); height: calc(16 * var(--u)); }
.pm-bars i { width: calc(3 * var(--u)); border-radius: calc(1.5 * var(--u)); background: #5EC8A0; transform-origin: bottom; }
.pm-bars i:nth-child(1) { height: 37.5%; } .pm-bars i:nth-child(2) { height: 87.5%; } .pm-bars i:nth-child(3) { height: 56%; }
.pm-bars i:nth-child(4) { height: 100%; } .pm-bars i:nth-child(5) { height: 44%; }
.pm-duo { display: grid; grid-template-columns: 1fr 1fr; gap: calc(10 * var(--u)); }
.pm-pb { height: calc(44 * var(--u)); border-radius: 999px; background: #13161C; border: 1px solid #242A34; color: #D5DAE1; display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 600; white-space: nowrap; }
.pm-pb svg { width: calc(17 * var(--u)); height: calc(17 * var(--u)); stroke-width: 1.9; }
.pm-pb.lit { color: #5EC8A0; border: 1.5px solid #5EC8A0; }
.pm-chips { display: flex; gap: calc(8 * var(--u)); margin: 0 calc(-20 * var(--u)); padding: 0 calc(20 * var(--u)); overflow: hidden; white-space: nowrap; -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }
.pm-chip { flex: none; display: flex; align-items: center; gap: calc(6 * var(--u)); height: calc(36 * var(--u)); padding: 0 calc(14 * var(--u)); border-radius: 999px; background: #13161C; border: 1px solid #242A34; color: #F3F5F8; font-size: calc(13.5 * var(--u)); font-weight: 600; }
.pm-chip svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); stroke-width: 2.4; }
.pm-chip.lit { background: #5EC8A0; border-color: #5EC8A0; color: #0B1712; }
.pm-box { min-height: calc(52 * var(--u)); padding: calc(15 * var(--u)) calc(16 * var(--u)); border-radius: calc(16 * var(--u)); background: #13161C; border: 1px solid #242A34; font-size: calc(16 * var(--u)); line-height: 1.35; color: #6F7885; }
.pm-box.big { min-height: calc(86 * var(--u)); font-size: calc(18 * var(--u)); }
.pm-box .pm-typed { color: #F3F5F8; }
.pm-caret { display: inline-block; width: calc(2 * var(--u)); height: 1.15em; margin-left: calc(2 * var(--u)); vertical-align: -0.2em; background: #5EC8A0; }
.pm-go { display: flex; gap: calc(10 * var(--u)); }
.pm-say { flex: 2 1 0; display: flex; align-items: center; justify-content: center; gap: calc(9 * var(--u)); height: calc(56 * var(--u)); border-radius: 999px; background: #5EC8A0; color: #0B1712; font-size: calc(17 * var(--u)); font-weight: 700; white-space: nowrap; }
.pm-say.dim { background: #3E8C6E; }
.pm-say svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); stroke-width: 2.1; }
.pm-stop { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--u)); height: calc(56 * var(--u)); padding: 0 calc(18 * var(--u)); border-radius: 999px; border: 1.5px solid #343B47; color: #F3F5F8; font-size: calc(16 * var(--u)); font-weight: 600; white-space: nowrap; }
/* The end of the conversation, "Close" since the app's BUILD 180, with an ✕;
   the square is the voice's Stop now, on the green button while it speaks
   (the app's own two icons, 29 September 2026). */
.pm-stop svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); stroke-width: 2.4; }
/* Flipped: the whole app turned for the other side, the phone itself not —
   the island stays where the glass has it, and the margins swap ends. */
.pm-app.flip { transform: rotate(180deg); }
.pm-app.flip .pm-head { padding-top: calc(34 * var(--u)); }
.pm-app.flip .pm-foot { padding-bottom: calc(62 * var(--u)); }

/* Settings (design: Settings; the framed section from the app itself) */
.pm-set { padding: calc(58 * var(--u)) calc(20 * var(--u)) 0; display: flex; flex-direction: column; gap: calc(22 * var(--u)); }
.pm-sethead { display: flex; align-items: center; gap: calc(4 * var(--u)); font-size: calc(26 * var(--u)); font-weight: 700; letter-spacing: -0.02em; }
.pm-sethead svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); margin: 0 calc(8 * var(--u)) 0 calc(-2 * var(--u)); }
.pm-sec { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.pm-kick { margin-left: calc(4 * var(--u)); font-size: calc(12 * var(--u)); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #6F7885; }
.pm-group { background: #13161C; border: 1px solid #242A34; border-radius: calc(18 * var(--u)); overflow: hidden; }
.pm-tr { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(13 * var(--u)) calc(16 * var(--u)); border-bottom: 1px solid #1E232C; }
.pm-tr:last-child { border-bottom: 0; }
.pm-tr.sub { padding-left: calc(32 * var(--u)); }
.pm-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--u)); }
.pm-tt b { font-size: calc(16 * var(--u)); font-weight: 600; line-height: 1.3; }
.pm-tt small { font-size: calc(13 * var(--u)); line-height: 1.4; color: #6F7885; }
.pm-info { width: calc(20 * var(--u)); height: calc(20 * var(--u)); color: #A7AFBB; stroke-width: 1.7; margin: 0 calc(6 * var(--u)); }
.pm-sw { flex: none; width: calc(44 * var(--u)); height: calc(26 * var(--u)); padding: calc(3 * var(--u)); border-radius: 999px; background: #2A303A; display: flex; }
.pm-sw i { width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-radius: 999px; background: #8B94A1; }
.pm-sw.on { background: #5EC8A0; justify-content: flex-end; }
.pm-sw.on i { background: #FFFFFF; }
.pm-aid { display: flex; flex-direction: column; gap: calc(8 * var(--u)); padding: calc(10 * var(--u)); border-radius: calc(28 * var(--u)); background: #2A2216; border: calc(1.5 * var(--u)) solid #5EC8A0; }
.pm-aidk { display: flex; align-items: center; justify-content: space-between; min-height: calc(40 * var(--u)); padding-left: calc(4 * var(--u)); font-size: calc(12 * var(--u)); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #A7AFBB; }
.pm-aidk .pm-info { margin-right: calc(10 * var(--u)); }
.pm-size { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(10 * var(--u)); padding: calc(11 * var(--u)) calc(16 * var(--u)); min-height: calc(56 * var(--u)); }
.pm-size b { font-size: calc(16 * var(--u)); font-weight: 600; }
.pm-seg { display: flex; padding: calc(3 * var(--u)); border-radius: 999px; background: #0B0D11; border: 1px solid #242A34; }
.pm-seg span { display: flex; align-items: center; height: calc(32 * var(--u)); padding: 0 calc(12 * var(--u)); border-radius: 999px; font-size: calc(13 * var(--u)); font-weight: 600; color: #A7AFBB; }
.pm-seg .on { background: #242A34; color: #F3F5F8; }
.pm-warn { margin: 0; padding: calc(2 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u)); font-size: calc(13 * var(--u)); line-height: 1.4; color: #A7AFBB; }

/* "Show big" (the app's ReadThis): the sentence turned, Close not */
.pm-read { position: absolute; inset: 0; display: flex; flex-direction: column; padding-top: calc(54 * var(--u)); }
.pm-bigtext { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: calc(16 * var(--u)) calc(24 * var(--u)); transform: rotate(180deg); font-size: calc(44 * var(--u)); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; text-align: center; color: #F3F5F8; }
.pm-close { display: flex; align-items: center; justify-content: center; height: calc(56 * var(--u)); margin: 0 calc(20 * var(--u)) calc(44 * var(--u)); border-radius: 999px; border: 1.5px solid #343B47; font-size: calc(17 * var(--u)); font-weight: 600; color: #F3F5F8; }

/* ── more of the app's screens, for the home page's sequence ───────────────
   Languages, Main at rest, the forming line, Speaking, the camera and the
   translated menu (design: Languages, Main, Live, Speaking, CamWait, Menu). */
.pm-lang, .pm-rest, .pm-wait, .pm-menu { position: absolute; inset: 0; }
.pm-h1 { margin: 0; font-size: calc(34 * var(--u)); line-height: 1.1; font-weight: 700; letter-spacing: -0.024em; }
.pm-lede { margin: calc(8 * var(--u)) 0 0; font-size: calc(17 * var(--u)); line-height: 1.45; color: #A7AFBB; }

/* Languages: the two already chosen, each in a card of its own */
.pm-lang { display: flex; flex-direction: column; gap: calc(26 * var(--u)); padding: calc(64 * var(--u)) calc(20 * var(--u)) calc(28 * var(--u)); }
.pm-pick { display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.pm-choice { display: flex; align-items: center; gap: calc(14 * var(--u)); padding: calc(16 * var(--u)); border-radius: calc(20 * var(--u)); background: rgba(94, 200, 160, 0.08); border: calc(1.5 * var(--u)) solid #5EC8A0; }
.pm-tile { flex: none; display: grid; place-items: center; width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: calc(12 * var(--u)); background: rgba(94, 200, 160, 0.14); color: #5EC8A0; }
.pm-tile svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); stroke-width: 1.9; }
.pm-ct { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--u)); }
.pm-ct b { font-size: calc(20 * var(--u)); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; }
.pm-ct small { font-size: calc(13 * var(--u)); line-height: 1.35; color: #A7AFBB; }
.pm-tick { width: calc(22 * var(--u)); height: calc(22 * var(--u)); color: #5EC8A0; stroke-width: 2.4; }
.pm-more { display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--u)); height: calc(50 * var(--u)); border-radius: 999px; background: #13161C; border: 1px solid #242A34; font-size: calc(15 * var(--u)); font-weight: 600; }
.pm-more svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); color: #5EC8A0; stroke-width: 1.9; }
.pm-cta { position: relative; margin-top: auto; display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--u)); height: calc(60 * var(--u)); border-radius: 999px; background: #5EC8A0; color: #0B1712; font-size: calc(18 * var(--u)); font-weight: 700; }
.pm-cta svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); stroke-width: 2.2; }

/* Main, at rest: the name, the minutes, what to do, and Start */
.pm-rest { display: flex; flex-direction: column; gap: calc(20 * var(--u)); padding: calc(60 * var(--u)) calc(20 * var(--u)) calc(28 * var(--u)); }
.pm-top { display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--u)); }
.pm-brand { display: flex; align-items: center; gap: calc(10 * var(--u)); font-size: calc(18 * var(--u)); font-weight: 700; letter-spacing: -0.017em; }
.pm-screen .pm-logo { width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: calc(10 * var(--u)); stroke: none; }
.pm-mins { display: flex; align-items: center; gap: calc(7 * var(--u)); height: calc(44 * var(--u)); padding: 0 calc(14 * var(--u)); border-radius: 999px; background: #13161C; border: 1px solid #242A34; color: #A7AFBB; font-size: calc(13 * var(--u)); }
.pm-mins svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); stroke-width: 1.9; }
.pm-mins b { font-family: var(--pm-mono); font-size: calc(15 * var(--u)); font-weight: 600; color: #F3F5F8; }
.pm-main { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: calc(28 * var(--u)); padding: 0 calc(4 * var(--u)); }
.pm-hint { margin: calc(12 * var(--u)) 0 0; font-size: calc(17 * var(--u)); line-height: 1.5; color: #A7AFBB; }
.pm-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: calc(2 * var(--u)); border-top: 1px solid #1C2029; }
.pm-steps li { display: flex; align-items: baseline; gap: calc(14 * var(--u)); padding: calc(13 * var(--u)) 0; border-bottom: 1px solid #1C2029; font-size: calc(15 * var(--u)); line-height: 1.4; color: #D5DAE1; }
.pm-steps .pm-n { flex: none; width: calc(20 * var(--u)); font-family: var(--pm-mono); font-size: calc(12 * var(--u)); color: #5EC8A0; }
.pm-dock { display: flex; flex-direction: column; gap: calc(14 * var(--u)); }
.pm-row { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.pm-cam { flex: none; display: grid; place-items: center; width: calc(64 * var(--u)); height: calc(64 * var(--u)); border-radius: 999px; background: #13161C; border: 1px solid #242A34; color: #D5DAE1; }
.pm-cam svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); stroke-width: 1.8; }
.pm-start { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--u)); height: calc(64 * var(--u)); border-radius: 999px; background: #5EC8A0; color: #0B1712; font-size: calc(19 * var(--u)); font-weight: 700; box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(94, 200, 160, 0.22); }
.pm-start svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); stroke-width: 2.2; }
.pm-fine { margin: 0; font-size: calc(13 * var(--u)); line-height: 1.35; text-align: center; color: #6F7885; }

/* Live: before the first word, the line that arrives, and the original under it */
.pm-empty { margin: 0; padding: 0 calc(4 * var(--u)); font-size: calc(17 * var(--u)); line-height: 1.45; color: #6F7885; }
.pm-forming { margin: 0; font-size: calc(15 * var(--u) * var(--fs)); line-height: 1.45; color: #A7AFBB; }
.pm-orig { margin: 0; font-size: calc(14 * var(--u) * var(--fs)); line-height: 1.45; color: #6F7885; }
.pm-live.off { background: #13161C; border-color: #242A34; color: #A7AFBB; }
.pm-live.off i { background: #6F7885; box-shadow: none; animation: none; }
.pm-pb.pale { color: #6F7885; }

/* While the phone speaks (design: Speaking) */
.pm-talk { display: flex; align-items: center; gap: calc(14 * var(--u)); padding: calc(16 * var(--u)); border-radius: calc(20 * var(--u)); background: #16241E; border: 1px solid rgba(94, 200, 160, 0.4); }
.pm-talk > i { flex: none; display: grid; place-items: center; width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: 999px; background: #5EC8A0; color: #0B1712; }
.pm-talk > i svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); stroke-width: 2.2; }
.pm-talk > span { display: flex; flex-direction: column; gap: calc(2 * var(--u)); min-width: 0; }
.pm-talk b { font-size: calc(17 * var(--u)); font-weight: 700; line-height: 1.3; color: #5EC8A0; }
.pm-talk small { font-size: calc(14 * var(--u)); line-height: 1.4; color: #A7AFBB; }
.pm-talk.float { align-items: flex-start; gap: calc(12 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)); border-radius: calc(18 * var(--u)); }
.pm-talk.float > svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); margin-top: calc(2 * var(--u)); color: #5EC8A0; }
.pm-talk.float b { font-size: calc(16 * var(--u)); }
.pm-talk.float > span { gap: calc(3 * var(--u)); }

/* The camera at work, and the menu it read */
.pm-wait { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(14 * var(--u)); padding: 0 calc(32 * var(--u)); text-align: center; }
.pm-screen .pm-ring { width: calc(96 * var(--u)); height: calc(96 * var(--u)); }
.pm-wait b { margin-top: calc(10 * var(--u)); font-size: calc(24 * var(--u)); font-weight: 700; letter-spacing: -0.017em; }
.pm-wait span { font-size: calc(17 * var(--u)); line-height: 1.45; color: #A7AFBB; }
.pm-wait .pm-cancel { display: flex; align-items: center; height: calc(48 * var(--u)); margin-top: calc(20 * var(--u)); padding: 0 calc(22 * var(--u)); border-radius: 999px; border: 1px solid #242A34; font-size: calc(16 * var(--u)); font-weight: 600; line-height: 1; }
.pm-menu { display: flex; flex-direction: column; gap: calc(16 * var(--u)); padding: calc(62 * var(--u)) calc(20 * var(--u)) calc(28 * var(--u)); }
.pm-mtop { display: flex; align-items: center; justify-content: space-between; gap: calc(12 * var(--u)); }
.pm-mtop small { display: block; font-size: calc(12 * var(--u)); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #6F7885; }
.pm-mtop b { display: block; margin-top: calc(2 * var(--u)); font-size: calc(26 * var(--u)); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.pm-mhint { margin: 0; font-size: calc(14 * var(--u)); line-height: 1.45; color: #A7AFBB; }
.pm-list { margin: 0; padding: 0; list-style: none; border-radius: calc(20 * var(--u)); background: #13161C; border: 1px solid #242A34; overflow: hidden; }
.pm-dish { position: relative; display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(16 * var(--u)); border-bottom: 1px solid #1E232C; }
.pm-dish:last-child { border-bottom: 0; }
.pm-dish .pm-ct { gap: calc(3 * var(--u)); }
.pm-dish .pm-ct b { font-size: calc(17 * var(--u)); font-weight: 600; letter-spacing: 0; }
.pm-dish .pm-ct small { color: #6F7885; }
.pm-price { font-family: var(--pm-mono); font-size: calc(15 * var(--u)); font-weight: 600; white-space: nowrap; }
.pm-ask { font-size: calc(13 * var(--u)); font-weight: 500; color: #A7AFBB; white-space: nowrap; }
.pm-order { position: relative; flex: none; display: grid; place-items: center; width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: 999px; background: rgba(94, 200, 160, 0.12); border: 1px solid rgba(94, 200, 160, 0.35); color: #5EC8A0; }
.pm-order svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.pm-order.on { background: #5EC8A0; border-color: #5EC8A0; color: #0B1712; }
.pm-menu .pm-talk { margin-top: auto; }

/* A little life, and none for anyone who asked for less. */
@media (prefers-reduced-motion: no-preference) {
  .pm-bars i { animation: pm-bar 1.2s ease-in-out infinite; }
  .pm-bars i:nth-child(2n) { animation-delay: -0.6s; }
  .pm-bars i:nth-child(3) { animation-delay: -0.3s; }
  .pm-caret { animation: pm-blink 1s steps(2) infinite; }
  .pm-live i { animation: pm-ping 2s ease-out infinite; }
  .pm-chip.lit { animation: pm-lit 1.8s ease-in-out infinite; }
  @keyframes pm-bar { 0%, 100% { transform: scaleY(0.5); } 50% { transform: scaleY(1); } }
  @keyframes pm-ping { 0% { box-shadow: 0 0 0 0 rgba(94, 200, 160, 0.5); } 100% { box-shadow: 0 0 0 calc(9 * var(--u)) rgba(94, 200, 160, 0); } }
  @keyframes pm-blink { 50% { opacity: 0; } }
  @keyframes pm-lit { 50% { background: #7FD6B4; border-color: #7FD6B4; } }
}