/* One stylesheet for every page. System fonts only, nothing loaded from anywhere else.

   The look is the app's (App/Theme.swift): an off-white canvas with a faint 34 px dot grid, ink, one grey, medium
   weights, tight tracking, lowercase. Blue is used only where the product is listening and peach only where it is
   working, both inside the product pictures. Tokens are on :root; dark is the same page inverted, defined twice
   (the system setting, and data-theme="dark").

   Order: tokens, base, top bar, type, buttons, the glass pill, screens, pinned scenes, the window and what goes in it,
   privacy, download, questions, footer, the other pages, small screens, reduced motion. */

:root {
  --canvas: #f5f5f5;
  --ink: #0e0e10;
  --grey: #6e6e73;
  --dot: rgba(0, 0, 0, .1);
  --hair: rgba(0, 0, 0, .09);
  --fill: rgba(0, 0, 0, .05);
  --surface: #ffffff;
  --light: #dcdcde;
  --side: #f3f3f5;
  --side-sel: rgba(0, 0, 0, .065);
  --win-edge: rgba(0, 0, 0, .1);
  --win-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 28px -10px rgba(0, 0, 0, .1), 0 44px 110px -28px rgba(0, 0, 0, .24);
  --card-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 14px 34px -12px rgba(0, 0, 0, .2);
  --glass-a: #3d3d41;
  --glass-b: #1f1f22;
  --glass-rim: rgba(255, 255, 255, .26);
  --glass-back: #0a0a0b;
  --glass-shine: rgba(255, 255, 255, .2);
  --glass-shadow: 0 1px 1px rgba(0, 0, 0, .1), 0 10px 22px -8px rgba(0, 0, 0, .34);
  --listen-a: #2b4472;
  --listen-b: #1a2a4a;
  --listen-rim: rgba(140, 185, 255, .55);
  --listen-back: #0c1730;
  --work-a: #3a3a3e;
  --work-b: #26262a;
  --work-rim: rgba(255, 255, 255, .22);
  --work-back: #0d0d0e;
  --pill-face: #ffffff;
  --listen-face: #b9d3ff;
  --work-face: rgba(255, 255, 255, .75);
  --field-a: 72, 108, 214;
  --field-b: 232, 138, 84;
  --field-gain: .36;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.165, .84, .44, 1);
  --gutter: 16px;
  --bar-h: 64px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #131313;
    --ink: #f2f2f3;
    --grey: #98989d;
    --dot: rgba(255, 255, 255, .08);
    --hair: rgba(255, 255, 255, .1);
    --fill: rgba(255, 255, 255, .07);
    --surface: #1d1d1f;
    --light: #3a3a3d;
    --side: #26262a;
    --side-sel: rgba(255, 255, 255, .08);
    --win-edge: rgba(255, 255, 255, .12);
    --win-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 28px -10px rgba(0, 0, 0, .5), 0 44px 110px -28px rgba(0, 0, 0, .8);
    --card-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 34px -12px rgba(0, 0, 0, .7);
    --glass-a: #3d3d41;
    --glass-b: #1f1f22;
    --glass-rim: rgba(255, 255, 255, .26);
    --glass-back: #0a0a0b;
    --glass-shine: rgba(255, 255, 255, .2);
    --glass-shadow: 0 1px 1px rgba(0, 0, 0, .4), 0 10px 22px -8px rgba(0, 0, 0, .7);
    --listen-a: #2b4472;
    --listen-b: #1a2a4a;
    --listen-rim: rgba(140, 185, 255, .55);
    --listen-back: #0c1730;
    --work-a: #3a3a3e;
    --work-b: #26262a;
    --work-rim: rgba(255, 255, 255, .22);
    --work-back: #0d0d0e;
    --pill-face: #ffffff;
    --listen-face: #b9d3ff;
    --work-face: rgba(255, 255, 255, .75);
    --field-a: 120, 152, 255;
    --field-b: 255, 170, 120;
    --field-gain: .28;
  }
}
:root[data-theme="dark"] {
  --canvas: #131313;
  --ink: #f2f2f3;
  --grey: #98989d;
  --dot: rgba(255, 255, 255, .08);
  --hair: rgba(255, 255, 255, .1);
  --fill: rgba(255, 255, 255, .07);
  --surface: #1d1d1f;
  --light: #3a3a3d;
  --side: #26262a;
  --side-sel: rgba(255, 255, 255, .08);
  --win-edge: rgba(255, 255, 255, .12);
  --win-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 28px -10px rgba(0, 0, 0, .5), 0 44px 110px -28px rgba(0, 0, 0, .8);
  --card-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 34px -12px rgba(0, 0, 0, .7);
  --glass-a: #3d3d41;
  --glass-b: #1f1f22;
  --glass-rim: rgba(255, 255, 255, .26);
  --glass-back: #0a0a0b;
  --glass-shine: rgba(255, 255, 255, .2);
  --glass-shadow: 0 1px 1px rgba(0, 0, 0, .4), 0 10px 22px -8px rgba(0, 0, 0, .7);
  --listen-a: #2b4472;
  --listen-b: #1a2a4a;
  --listen-rim: rgba(140, 185, 255, .55);
  --listen-back: #0c1730;
  --work-a: #3a3a3e;
  --work-b: #26262a;
  --work-rim: rgba(255, 255, 255, .22);
  --work-back: #0d0d0e;
  --pill-face: #ffffff;
  --listen-face: #b9d3ff;
  --work-face: rgba(255, 255, 255, .75);
  --field-a: 120, 152, 255;
  --field-b: 255, 170, 120;
  --field-gain: .28;
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light dark; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
body {
  margin: 0;
  background-color: var(--canvas);
  background-image: radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 1.4px);
  background-size: 34px 34px;
  color: var(--ink);
  font-family: var(--font);
  font-size: 19px;
  line-height: 1.4;
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
svg { display: block; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 40; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--canvas); font-size: 15px; text-decoration: none; }
.skip:focus { top: 12px; }

/* The soft stippled flow behind the page: drawn once on a canvas by js/home.js, never animated. */
#field {
  position: fixed; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh; z-index: -1; pointer-events: none;
  padding-top: env(safe-area-inset-top, 0px); opacity: 0; transition: opacity 1.4s ease; image-rendering: pixelated;
}
html.field-on #field { opacity: 1; }

/* ---------- top bar: the face and the name, one button ---------- */

.bar {
  position: fixed; z-index: 30; left: 0; right: 0; top: 0; height: calc(var(--bar-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) max(32px, env(safe-area-inset-right, 0px)) 0 max(32px, env(safe-area-inset-left, 0px));
  display: flex; align-items: center; justify-content: space-between; pointer-events: none;
  transition: transform .4s var(--ease);
}
.bar > * { pointer-events: auto; }
.bar.away { transform: translateY(-110%); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-size: 17px; font-weight: 580; letter-spacing: -.03em; }
.face { width: 31px; height: 20px; fill: none; stroke: currentColor; stroke-width: 3.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- type ---------- */

h1, h2 { font-weight: 550; letter-spacing: -.042em; line-height: 1.04; text-wrap: balance; }
h1 { font-size: clamp(2.75rem, 5.3vw, 4.75rem); }
h2 { font-size: clamp(2.375rem, 4.5vw, 4rem); }
.l1, .l2 { display: block; }
.l2 { color: var(--grey); }
.sub { margin-top: 22px; color: var(--grey); font-size: clamp(1.125rem, 1.35vw, 1.25rem); line-height: 1.35; text-wrap: balance; }
.label { color: var(--grey); font-size: 15px; letter-spacing: -.005em; }
.fine { color: var(--grey); font-size: 14px; letter-spacing: 0; }
.verbatim { text-transform: none; }

/* ---------- buttons: one kind, an ink pill ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 28px; border: 0; border-radius: 999px;
  background: var(--ink); color: var(--canvas); font-size: 17px; font-weight: 560; letter-spacing: -.015em; line-height: 1;
  text-decoration: none; text-transform: lowercase; white-space: nowrap; cursor: pointer;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.btn:hover { opacity: .84; }
.btn:active { transform: scale(.98); }
.btn.s { height: 38px; padding: 0 18px; font-size: 15px; }

/* ---------- the glass pill with the face: the only 3D object on the page ----------
   Three stacked layers in real depth (a back, the glass, the face in front), so a small tilt shows its thickness.
   The app's bar since 0.2.0: dark graphite glass with a light rim and a white face, in light and dark alike;
   listening is blue (the one colour), working dims the face: three bodies cross-fade, nothing else changes. */

.pill {
  --w: 132px; --h: 60px;
  position: relative; display: block; width: var(--w); height: var(--h); padding: 0; border: 0; background: none; border-radius: 999px;
  perspective: 520px; -webkit-tap-highlight-color: transparent; flex: none;
}
button.pill { cursor: pointer; touch-action: manipulation; }
.pill-in {
  position: absolute; inset: 0; border-radius: inherit; transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .6s var(--ease);
}
.pill-in > i, .pill-in > svg { position: absolute; inset: 0; border-radius: inherit; }
.g-shadow { box-shadow: var(--glass-shadow); transform: translateZ(-9px); }
.g-back { background: var(--glass-back); transform: translateZ(-8px); transition: background-color .35s var(--ease); }
.g-body {
  background: linear-gradient(180deg, var(--glass-a), var(--glass-b));
  box-shadow: inset 0 0 0 1px var(--glass-rim), inset 0 -7px 12px -6px rgba(0, 0, 0, .3);
  transition: opacity .35s var(--ease);
}
.g-listen { background: linear-gradient(180deg, var(--listen-a), var(--listen-b)); box-shadow: inset 0 0 0 1px var(--listen-rim), inset 0 -7px 12px -6px rgba(0, 0, 0, .3); opacity: 0; }
.g-work { background: linear-gradient(180deg, var(--work-a), var(--work-b)); box-shadow: inset 0 0 0 1px var(--work-rim), inset 0 -7px 12px -6px rgba(0, 0, 0, .3); opacity: 0; }
.g-shine {
  inset: 3px 9% auto 9% !important; height: 42%; border-radius: 999px !important;
  background: linear-gradient(180deg, var(--glass-shine), rgba(255, 255, 255, 0));
  transform: translateZ(1px) translateX(var(--sx, 0px));
  transition: transform .6s var(--ease);
}
.pill-face {
  inset: 0 !important; margin: auto; width: 46%; height: auto; aspect-ratio: 48 / 31; border-radius: 0 !important;
  fill: none; stroke: var(--pill-face); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round;
  transform: translateZ(9px) translate(var(--fx, 0px), var(--fy, 0px));
  transition: transform .6s var(--ease), stroke .35s var(--ease);
}
.pill-face .eyes, .pill-face .m { transform-box: fill-box; transform-origin: center; }
.pill-face .m { transition: transform .22s var(--ease); }
.pill-face .m:nth-child(1) { transform: scaleY(var(--m1, 1)); }
.pill-face .m:nth-child(2) { transform: scaleY(var(--m2, 1)); }
.pill-face .m:nth-child(3) { transform: scaleY(var(--m3, 1)); }
.pill-face .m:nth-child(4) { transform: scaleY(var(--m4, 1)); }
.pill[data-state="listening"] .g-listen, .pill[data-state="working"] .g-work { opacity: 1; }
.pill[data-state="listening"] .g-back { background: var(--listen-back); }
.pill[data-state="working"] .g-back { background: var(--work-back); }
.pill[data-state="listening"] .pill-face { stroke: var(--listen-face); }
.pill[data-state="working"] .pill-face { stroke: var(--work-face); }
.pill.dockpill { --w: 104px; --h: 48px; }
html.anim .pill.alive .eyes { animation: blink 5.8s infinite; }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }

/* ---------- a screen: one idea, centred, with air ---------- */

.screen {
  min-height: 100vh; min-height: 100svh; display: grid; place-items: center; text-align: center;
  padding: max(18vh, 104px) var(--gutter);
}
.col { display: flex; flex-direction: column; align-items: center; width: 100%; min-width: 0; }
.hero .label { margin-top: 30px; }
.hero h1 { margin-top: 16px; }
.hero .btn { margin-top: 36px; }
.hero .fine { margin-top: 16px; }

/* ---------- a pinned scene: the headline arrives with its window, then the window holds while its story plays ----------
   Without scripts or with reduced motion nothing pins: the headline, then the window in its finished state. */

.scene-head { padding: 17vh var(--gutter) 0; text-align: center; }
.pin { display: grid; place-items: center; padding: 7vh var(--gutter) 6vh; }
.stage { width: min(900px, 100%); }
html.anim .track { height: calc(100vh + var(--travel, 70vh)); height: calc(100svh + var(--travel, 70vh)); margin-top: -11vh; }
html.anim .pin { position: sticky; top: 0; height: 100vh; height: 100svh; padding: 0 var(--gutter); }
#where .track { --travel: 110vh; }

/* ---------- the window: one at a time, original, quiet ---------- */

.sprite { position: absolute; width: 0; height: 0; }
.win {
  position: relative; display: grid; grid-template-rows: 58px minmax(0, 1fr); height: 470px; overflow: hidden; text-align: left;
  border-radius: 26px; background: var(--surface); box-shadow: 0 0 0 1px var(--win-edge), var(--win-shadow);
  font-size: 15px; line-height: 1.4; letter-spacing: -.006em; color: var(--ink);
}
html.anim .win { height: clamp(300px, calc(100vh - 36vh - 104px), 520px); height: clamp(300px, calc(100svh - 36svh - 104px), 520px); }
.win-bar { position: relative; display: flex; align-items: center; padding: 0 22px; }
.lights { display: flex; gap: 8px; }
.lights i { width: 12px; height: 12px; border-radius: 50%; background: var(--light); }
.chrome { position: absolute; left: 92px; right: 14px; top: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.chrome[data-for] { opacity: 0; transition: opacity .35s var(--ease); }
.chrome[data-for].on { opacity: 1; }
.win-title { font-size: 15px; font-weight: 600; letter-spacing: -.012em; white-space: nowrap; }
.tools { display: flex; gap: 8px; color: var(--grey); }
.cap { display: flex; align-items: center; gap: 14px; height: 34px; padding: 0 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--hair); }
.cap svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.win-body { position: relative; min-height: 0; }

/* a window with a sidebar: an inset panel down the left, the traffic lights sitting in it, like Finder on macOS 26 */
.win.side { grid-template-columns: 236px minmax(0, 1fr); }
.win.side .win-bar { grid-column: 1 / -1; grid-row: 1; z-index: 1; }
.win.side .chrome { left: 260px; }
.win.side .win-body { grid-column: 2; grid-row: 2; }
.sidebar { grid-column: 1; grid-row: 1 / -1; position: relative; margin: 8px 0 8px 8px; border-radius: 19px; background: var(--side); }
.side-list { position: absolute; left: 10px; right: 10px; top: 62px; display: grid; gap: 2px; font-size: 15px; letter-spacing: -.008em; }
.side-list[data-for] { opacity: 0; transition: opacity .35s var(--ease); }
.side-list[data-for].on { opacity: 1; }
.side-list li { display: grid; align-content: center; min-height: 34px; padding: 0 12px; border-radius: 10px; white-space: nowrap; overflow: hidden; }
.side-list li.sel { background: var(--side-sel); }
.mailbox .side-list li { min-height: 58px; gap: 1px; }
.side-list b { font-weight: 600; }
.side-list span:not(.verbatim) { color: var(--grey); font-size: 14px; }

/* text that types: the whole sentence is laid out from the start (so nothing moves), the part not yet typed is clear */
.t-off { color: transparent; }
.typing > .t-on { background: linear-gradient(currentColor, currentColor) right center / 2px 1.06em no-repeat; }
/* before a word is typed, the cursor waits (and blinks) where the text will go; the untyped text is clear, so fading it fades only the cursor */
.waiting > .t-off { background: linear-gradient(var(--ink), var(--ink)) left center / 2px 1.06em no-repeat; }
html.anim .waiting > .t-off { animation: wait 1.1s steps(1) infinite; }
@keyframes wait { 50% { opacity: 0; } }

/* Inside a window the type is the app's own, a little larger than life so one sentence reads at a glance. */
.big { font-size: 26px; line-height: 1.32; letter-spacing: -.024em; }

/* a plain compose window */
.sheet { padding: 20px 46px; }
.sheet .big { font-size: 32px; letter-spacing: -.03em; }

/* the same frame, four insides */
.pane { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s .35s; }
.pane.on { opacity: 1; visibility: visible; transition: opacity .35s var(--ease), visibility 0s; }
.rows { border-top: 1px solid var(--hair); }
.rows .row { display: flex; gap: 14px; padding: 14px 46px; border-bottom: 1px solid var(--hair); font-size: 17px; }
.rows .k { width: 70px; color: var(--grey); }
.mail .body { padding: 26px 46px; }
.chat { display: flex; flex-direction: column; justify-content: flex-end; gap: 22px; padding: 14px 30px 28px; }
.bubble { align-self: flex-start; max-width: 70%; padding: 12px 22px; border-radius: 26px; background: var(--fill); font-size: 22px; letter-spacing: -.02em; }
.field { min-height: 56px; padding: 12px 24px; border-radius: 28px; box-shadow: inset 0 0 0 1px var(--win-edge); font-size: 22px; letter-spacing: -.02em; }
.code { padding: 14px 0; font-family: var(--mono); font-size: 19px; line-height: 1.85; letter-spacing: 0; color: var(--grey); }
.code .ln { display: grid; grid-template-columns: 66px minmax(0, 1fr); white-space: pre; }
.code .ln i { padding-right: 22px; text-align: right; font-style: normal; opacity: .5; }
.code .ln b { font-weight: 400; color: var(--ink); }
.notes { padding: 18px 46px; }
.note-h { font-size: 34px; font-weight: 620; letter-spacing: -.035em; }
.note-l { margin-top: 12px; }

/* a message, and the reply it drafts */
.read { padding: 18px 46px 30px; }
.draft {
  position: absolute; left: 30px; right: 30px; bottom: 30px; display: flex; align-items: center; gap: 18px; padding: 15px 15px 15px 26px;
  border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px var(--win-edge), var(--card-shadow);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.draft p { flex: 1; min-width: 0; }
.ins { height: 44px; padding: 0 24px; font-size: 17px; transition: background-color .3s var(--ease), color .3s var(--ease); }
html.anim .draft:not(.on) { opacity: 0; transform: translateY(14px); }
html.anim .ins:not(.on) { background: var(--fill); color: var(--grey); }

/* a call: who said what on the left, the notes on the right */
.cols { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
.talk, .meet-notes { padding: 12px 46px 0; display: grid; align-content: start; gap: 22px; }
.meet-notes { padding-left: 36px; border-left: 1px solid var(--hair); margin-bottom: 30px; }
.say, .note { display: grid; gap: 4px; font-size: 22px; line-height: 1.3; letter-spacing: -.02em; }
.say { transition: opacity .4s var(--ease), transform .4s var(--ease); }
.who { color: var(--grey); font-size: 14px; font-weight: 500; letter-spacing: 0; transition: opacity .4s var(--ease); }
html.anim .say:not(.on) { opacity: 0; transform: translateY(8px); }
html.anim .note .who:not(.on) { opacity: 0; }

/* under the window: the dictation bar, and what it heard beside it */
.dock { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 18px; margin-top: 22px; min-height: 48px; }
.dock .pill { grid-column: 2; }
.heard { grid-column: 3; justify-self: start; text-align: left; color: var(--grey); font-size: 16px; line-height: 1.3; }
@media (min-width: 1000px) { .heard { white-space: nowrap; } }
.hint { grid-column: 1 / -1; margin-top: 12px; text-align: center; color: var(--grey); font-size: 13px; letter-spacing: 0; transition: opacity .3s var(--ease); }
html:not(.js) .hint { display: none; }
@media (hover: none) { .hint .kb { display: none; } }   /* no space bar on a touch screen: "hold to try" */

/* ---------- privacy ---------- */

.zero { font-size: clamp(5.25rem, 17vw, 15rem); font-weight: 550; letter-spacing: -.06em; line-height: .9; white-space: nowrap; }
.privacy .sub { margin-top: 34px; }
.privacy .fine { margin-top: 12px; font-size: 15px; }

/* ---------- download ---------- */

.get .col > .btn { margin-top: 38px; }
.oneline { margin-top: 18px; width: min(560px, 100%); color: var(--grey); font-size: 14px; letter-spacing: 0; }
.oneline summary { list-style: none; cursor: pointer; }
.oneline summary::-webkit-details-marker { display: none; }
.oneline summary u { text-underline-offset: 3px; text-decoration-thickness: 1px; }
.oneline summary:hover u { color: var(--ink); }
html[data-download="direct"] [data-when="terminal"] { display: none; }
.cmd { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 8px 8px 8px 18px; border-radius: 16px; background: var(--surface); box-shadow: 0 0 0 1px var(--win-edge); text-align: left; }
.cmd code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font-family: var(--mono); font-size: 13px; color: var(--ink); scrollbar-width: none;
            -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.cmd code::-webkit-scrollbar { display: none; }
.copy .done, .copy.copied .idle { display: none; }
.copy.copied .done { display: inline; }
.steps { margin-top: 14px; line-height: 1.5; }

/* ---------- questions ---------- */

/* the last screen: the five questions centred above the footer line (the two together fill the screen) */
.faq { width: min(680px, 100%); min-height: calc(100vh - 106px); min-height: calc(100svh - 106px); margin: 0 auto; padding: 18vh var(--gutter);
       display: flex; flex-direction: column; justify-content: center; }
.faq details { border-top: 1px solid var(--hair); }
.faq details:last-of-type { border-bottom: 1px solid var(--hair); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 21px 2px; list-style: none; cursor: pointer; font-size: 19px; font-weight: 500; letter-spacing: -.018em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 13px; height: 13px; opacity: .55;
  background: linear-gradient(var(--ink), var(--ink)) center / 100% 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1.5px 100% no-repeat;
  transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 40px 24px 2px; color: var(--grey); font-size: 17px; line-height: 1.5; }
.faq .a a { text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------- footer: one line ---------- */

.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 28px; padding: 36px var(--gutter) calc(48px + env(safe-area-inset-bottom, 0px)); color: var(--grey); font-size: 14px; letter-spacing: 0; }
.foot a { text-decoration: none; }
.foot a:hover, .foot a[aria-current="page"] { color: var(--ink); }

/* ---------- the other pages: the same bar, type and footer around plain reading ---------- */

.doc { width: min(720px, 100%); margin: 0 auto; padding: calc(var(--bar-h) + 9vh) var(--gutter) 10vh; font-size: 17px; line-height: 1.6; }
.doc-head { margin-bottom: 52px; }
.doc-head h1 { font-size: clamp(2.25rem, 4.4vw, 3.25rem); text-transform: lowercase; }
.doc-head p { margin-top: 16px; color: var(--grey); }
.doc h2 { margin: 52px 0 14px; font-size: 26px; letter-spacing: -.03em; line-height: 1.15; font-weight: 580; }
.doc h3 { margin: 30px 0 8px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.doc p, .doc ul, .doc ol { margin: 0 0 16px; }
.doc ul, .doc ol { padding-left: 22px; }
.doc ul { list-style: disc; }
.doc ol { list-style: decimal; }
.doc li { margin-bottom: 8px; }
.doc li::marker { color: var(--grey); }
.doc a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
.doc code, .doc kbd { font-family: var(--mono); font-size: .88em; padding: 2px 6px; border-radius: 6px; background: var(--fill); overflow-wrap: anywhere; }
.doc strong { font-weight: 600; }
.tldr { padding: 6px 28px 12px; border-radius: 22px; background: var(--surface); box-shadow: 0 0 0 1px var(--win-edge); }
.tldr h2 { margin-top: 22px; }
.table-scroll { overflow-x: auto; margin: 0 0 20px; }
.doc table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.doc th, .doc td { padding: 12px 14px 12px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hair); }
.doc th { color: var(--grey); font-size: 13px; font-weight: 500; }
.cl-entry { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 28px; padding: 34px 0; border-top: 1px solid var(--hair); }
.cl-aside { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.cl-version { font-size: 22px; font-weight: 580; letter-spacing: -.03em; }
.cl-date, .cl-tag { color: var(--grey); font-size: 14px; }
.cl-body h2 { margin: 0 0 12px; font-size: 22px; }
.cl-group h3 { margin: 18px 0 8px; color: var(--grey); font-size: 13px; font-weight: 500; text-transform: lowercase; }
.lost { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 18vh var(--gutter); }
.lost .face { width: 62px; height: 40px; margin: 0 auto 26px; stroke-width: 3.2; }
.lost h1 { text-transform: lowercase; }
.lost p { margin-top: 18px; color: var(--grey); }
.lost .btn { margin-top: 32px; }

/* ---------- small screens ---------- */

@media (max-width: 720px) {
  body { font-size: 18px; }
  .bar { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .scene-head { padding-top: 18vh; }
  html.anim .track { margin-top: -9vh; }
  .win { grid-template-rows: 50px minmax(0, 1fr); border-radius: 20px; height: 420px; }
  html.anim .win { height: clamp(280px, calc(100vh - 36vh - 150px), 460px); height: clamp(280px, calc(100svh - 36svh - 150px), 460px); }
  .win-bar { padding: 0 17px; }
  .lights { gap: 7px; }
  .lights i { width: 11px; height: 11px; }
  .chrome, .win.side .chrome { left: 76px; right: 10px; }
  .win.side { grid-template-columns: minmax(0, 1fr); }
  .win.side .win-body { grid-column: 1; }
  .sidebar { display: none; }
  .cap { height: 30px; padding: 0 10px; gap: 11px; }
  .cap svg { width: 15px; height: 15px; }
  .big { font-size: 21px; }
  .sheet { padding: 12px 22px; }
  .sheet .big { font-size: 25px; }
  .rows .row { padding: 12px 22px; font-size: 15px; }
  .rows .k { width: 58px; }
  .mail .body { padding: 18px 22px; }
  .chat { padding: 8px 16px 16px; gap: 16px; }
  .bubble, .field { font-size: 18px; }
  .bubble { padding: 10px 17px; }
  .field { min-height: 48px; padding: 11px 18px; }
  .code { font-size: 13px; padding: 8px 0; }
  .code .ln { grid-template-columns: 38px minmax(0, 1fr); }
  .code .ln i { padding-right: 12px; }
  .notes { padding: 10px 22px; }
  .note-h { font-size: 27px; }
  .read { padding: 8px 22px 20px; }
  .draft { left: 12px; right: 12px; bottom: 12px; padding: 9px 9px 9px 20px; gap: 10px; }
  .draft .big { font-size: 16px; }
  .ins { height: 40px; padding: 0 18px; font-size: 15px; }
  .cols { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .talk, .meet-notes { padding: 6px 22px 0; gap: 12px; }
  .meet-notes { margin: 14px 0 0; padding-top: 14px; border-left: 0; border-top: 1px solid var(--hair); }
  .say, .note { font-size: 17px; gap: 1px; }
  .who { font-size: 12px; }
  .dock { grid-template-columns: minmax(0, 1fr); row-gap: 12px; margin-top: 18px; }
  .dock .pill { grid-column: 1; justify-self: center; }
  .heard { grid-column: 1; justify-self: center; text-align: center; min-height: 2.6em; font-size: 15px; }
  .hint { order: 2; margin-top: 0; }
  .heard { order: 3; }
  .oneline summary span { display: block; margin-bottom: 4px; }
  .faq .a { padding-right: 8px; }
  .cl-entry { grid-template-columns: minmax(0, 1fr); }
  .tldr { padding: 4px 20px 10px; }
}

/* ---------- reduced motion: the same page, still ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
}