/* Until its fonts arrive, a browser draws the page in the next font along, Verdana, which sets the
   same text about a seventh 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 the script screen's own text and the sample script, 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. The landing page has its own, measured on its own text. */
@font-face {
  font-family: 'Verdana sized as Atkinson';
  src: local('Verdana');
  font-weight: 100 500;
  size-adjust: 87%;
  ascent-override: 113.1%;
  descent-override: 36.3%;
  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: 82.4%;
  ascent-override: 119.4%;
  descent-override: 38.3%;
  line-gap-override: 0%;
}

/* Tokens. :root holds the dark set; [data-theme="light"], which the page starts in, swaps in the light one. */
: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);
  --rec: #FF5A4F;   /* the dot that shows a recording is being made */
  --shadow: 0 20px 60px 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);
  --rec: #D93025;
  --shadow: 0 20px 60px rgba(18, 20, 23, .16);
  color-scheme: light;
}

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

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

button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible { outline: 2px solid var(--mark); outline-offset: 3px; }

.visually-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

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

.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; }

/* Buttons */
.icon-btn, .ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: transparent;
}
.icon-btn { flex: none; width: 44px; }
.ghost { padding: 0 16px; font-size: 15px; }
.icon-btn:hover, .ghost:hover { background: var(--raised); }

.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: var(--accent);
  color: var(--ink);
}
.primary:hover { filter: brightness(1.07); }
.primary:disabled { opacity: .45; cursor: not-allowed; }

/* Sliders: the native range input, restyled. --f is how full it is (0 to 1), set from app.js. */
.range {
  --f: 0;
  --thumb: 24px;
  --track: 4px;
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 44px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.range:focus-visible { outline: none; }
.range::-webkit-slider-runnable-track {
  height: var(--track);
  border-radius: 2px;
  background: linear-gradient(to right, var(--accent) calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--f)), var(--line) 0);
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--thumb);
  height: var(--thumb);
  margin-top: calc((var(--track) - var(--thumb)) / 2);
  border: 4px solid var(--surface);
  border-radius: 50%;
  background: var(--text);
  box-shadow: 0 0 0 1px var(--line);
}
.range::-moz-range-track { height: var(--track); border-radius: 2px; background: var(--line); }
.range::-moz-range-progress { height: var(--track); border-radius: 2px; background: var(--accent); }
.range::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--thumb);
  height: var(--thumb);
  border: 4px solid var(--surface);
  border-radius: 50%;
  background: var(--text);
  box-shadow: 0 0 0 1px var(--line);
}
.range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--mark); outline-offset: 3px; }
.range:focus-visible::-moz-range-thumb { outline: 2px solid var(--mark); outline-offset: 3px; }

.range-small { --thumb: 14px; --track: 3px; height: 32px; }
.range-small::-webkit-slider-thumb { border: 0; box-shadow: none; }
.range-small::-moz-range-thumb { border: 0; box-shadow: none; }

/* Script screen */
.script-screen { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }

.app-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 14px 32px; }
.wordmark { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; letter-spacing: .01em; }
.app-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
/* A newer version of the app is ready, for a page opened before it was uploaded. It sits beside
   the buttons, or on a narrow screen in a row of its own below them. */
.newer { display: flex; align-items: center; gap: 12px; margin: 0 8px 0 auto; font-size: 15px; }
.newer:not([hidden]) + .app-actions { margin-left: 0; }
@media (max-width: 700px) {
  .newer { order: 1; flex-basis: 100%; justify-content: space-between; margin: 0; }
  .newer:not([hidden]) + .app-actions { margin-left: auto; }
}

.script-main {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 32px 48px;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 12px 32px 32px;
}

.script-side { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 28px; padding-top: 20px; }

.intro { display: flex; flex-direction: column; gap: 12px; }
.intro h1 { margin: 0; font-size: 44px; line-height: 1.05; font-weight: 600; letter-spacing: -.02em; }
/* Measures here are in ems, not ch. A ch is the width of the font's 0, so it would change while a
   stand-in font is up. Each is what its ch came to in Atkinson: a 0 is .648em wide in Next, so
   34ch is 22.03em, and .632em in Mono, so 14ch is 8.85em. */
.intro p { margin: 0; max-width: 22.03em; font-size: 17px; line-height: 1.5; color: var(--muted); }

/* The stage directions a script can hold, as a reminder. */
.directions { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 0; font-size: 14px; }
.directions div { display: flex; gap: 12px; }
.directions dt { flex: none; width: 8.85em; font-family: var(--mono); }
.directions dd { margin: 0; color: var(--muted); }

.drop {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border: 1.5px dashed var(--line);
  border-radius: 16px;
  cursor: pointer;
}
.drop:focus-within, .drop.is-over { outline: 2px solid var(--mark); outline-offset: 2px; }
.drop-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--raised);
}
.drop-icon .icon { width: 22px; height: 22px; }
.drop-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.drop-title { font-size: 17px; font-weight: 600; }
.drop-hint { font-size: 14px; color: var(--muted); }

.stats { display: flex; flex-wrap: wrap; gap: 16px 40px; margin: 0; }
.stats div { display: flex; flex-direction: column; gap: 4px; }
.stats dt { font-size: 14px; color: var(--muted); }
.stats dd { margin: 0; font-family: var(--mono); font-size: 28px; line-height: 1.1; }

.start {
  align-self: flex-start;
  gap: 12px;
  height: 60px;
  padding: 0 28px 0 22px;
  border-radius: 16px;
  font-size: 18px;
  font-weight: 700;
}
.start .icon { width: 22px; height: 22px; }

.editor {
  flex: 999 1 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
}
.editor:focus-within { outline: 2px solid var(--mark); outline-offset: -1px; }
.editor-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 8px 6px 28px;
  border-bottom: 1px solid var(--line);
}
.editor-actions { flex: none; display: flex; gap: 4px; }
/* The script's name, with a menu of the sample scripts: the browser's own, from a select that is
   laid unseen over the name, so that the name stays as wide as its text and no wider. */
.picker {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 44px;
  margin-left: -12px;
  padding: 0 10px 0 12px;
  border-radius: 12px;
  color: var(--muted);
}
.picker:hover { background: var(--raised); }
.picker:has(select:focus-visible) { outline: 2px solid var(--mark); outline-offset: 3px; }
.picker .icon { width: 16px; height: 16px; }
.picker select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  font-size: 16px;
  cursor: pointer;
  appearance: none; /* or Safari keeps it at its own height, short of the name's */
  -webkit-appearance: none;
}
.source {
  min-width: 0;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* In Safari, which clears a site's storage after a week without a visit: the script's changes are
   not yet saved to a file. */
.keep-note { margin: 0; padding: 10px 28px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--emph); }
.link { padding: 0; border: 0; background: none; text-decoration: underline; text-underline-offset: 2px; }
.editor textarea {
  flex: 1;
  width: 100%;
  min-height: 380px;
  padding: 24px 28px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 18px;
  line-height: 1.65;
  resize: none;
}
.editor textarea:focus { outline: none; }
.editor textarea::placeholder { color: var(--muted); }

/* Prompter screen. --size, --leading, --width, --guide and --lines are set from app.js. */
.prompter {
  --size: 64px;
  --leading: 1.4;
  --width: 72%;
  --guide: 36%;
  --lines: 1;
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overflow: clip; /* unlike hidden, cannot be scrolled by focus or find-in-page */
}
.prompter.is-idle { cursor: none; }

.stage { position: absolute; inset: 0; background: var(--ground); color: var(--text); }

/* The script in colours of the reader's own choosing: app.js puts the two of them on the prompter
   as --own-text and --own-ground. Everything the script is drawn with is made from that pair. The
   controls sit outside the stage and keep the theme's colours. */
.own-colours .stage, .own-colours .countdown {
  --ground: var(--own-ground);
  --text: var(--own-text);
  --emph: var(--own-text);
  --mark: var(--own-text);
  --line: color-mix(in srgb, var(--own-text) 20%, transparent);
  --dim: color-mix(in srgb, var(--own-ground) 70%, transparent);
  --band: color-mix(in srgb, var(--own-text) 5.5%, transparent);
}

/* The reading line: --lines lines of text tall, starting at --guide. Made taller it grows downward,
   so its top edge stays where the script is read and the room added shows what comes next. */
.band {
  position: absolute;
  top: var(--guide);
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--size) * var(--leading) * var(--lines));
  padding: 0 18px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--own-band, var(--band)); /* --own-band: a colour chosen for the reading line alone */
}
/* The carets (18px tall) mark the line being read, which is the band's first. */
.band .caret { align-self: flex-start; margin-top: calc((var(--size) * var(--leading) - 18px) / 2); }

.column { position: absolute; top: var(--guide); left: 50%; width: var(--width); transform: translateX(-50%); }
.track { position: relative; will-change: transform; } /* relative: pause markers are measured from its top */
/* --font: the font chosen for the script. Until it has loaded, the app's own stands in for it. */
.text { font-family: var(--font), var(--sans); font-size: var(--size); line-height: var(--leading); font-weight: 500; letter-spacing: .005em; }
.text p { margin: 0 0 .75em; white-space: pre-line; }
.text strong { font-weight: 700; color: var(--emph); }
.text .marker { color: var(--mark); }

/* A cue is as tall as one line of text at the default spacing, so it sits squarely in the band. */
.cue {
  display: flex;
  align-items: center;
  gap: 1.2em;
  padding: 1.45em 0;
  font-family: var(--mono);
  font-size: .36em;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--emph);
}
.cue::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* A stage direction, [pause] or [action]: a cue with a mark in front, its comment, and a dashed rule.
   Like a cue it is one line of text tall, growing only when a long comment wraps. */
.direction { flex-wrap: wrap; gap: .5em 1.2em; min-height: 3.9em; padding: .4em 0; }
.direction span { flex: 0 1 auto; min-width: 0; } /* a part wider than the column wraps inside it */
.direction span:empty { display: none; }
.direction::before { content: ''; flex: none; box-sizing: border-box; margin-right: -.5em; }
.direction::after { height: 0; border-top: 2px dashed var(--line); background: none; }
.pause::before { width: .65em; height: .9em; border: solid currentColor; border-width: 0 .2em; }
.action::before { width: .7em; height: .7em; background: currentColor; transform: rotate(45deg); }

/* The comment is read, not glanced at, so it is set like the script and not like a label. */
.direction .comment {
  font-family: var(--font), var(--sans);
  font-size: 1.5em;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
}

/* Text that has passed the reading line fades. */
.dim { position: absolute; top: 0; left: 0; right: 0; height: var(--guide); background: var(--dim); pointer-events: none; }

.countdown {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dim);
  color: var(--mark);
  font-family: var(--mono);
  font-size: 220px;
  font-weight: 500;
  line-height: 1;
}

/* Top bar and dock fade out while the script is running and nothing has moved. */
.chrome { transition: opacity .35s ease; }
.is-idle .chrome { opacity: 0; pointer-events: none; }

.top-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--ground);
}
.to-script { gap: 6px; padding: 0 16px 0 10px; font-weight: 600; }
.top-actions { display: flex; align-items: center; gap: 4px; }
/* While a recording is being made: a red dot and how long it has run, which together are the button
   that stops it. Pointed at, the dot becomes a square and the time gives way to Stop, which is
   held to the time's width (five of the mono font's .632em characters) so nothing moves. */
.rec { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border: 0; border-radius: 12px; background: transparent; font-family: var(--mono); font-size: 14px; }
.rec:hover { background: var(--raised); }
.rec-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--rec); }
.rec-time, .rec-stop { min-width: 3.16em; text-align: left; }
.rec-stop, .rec:hover .rec-time, .rec:focus-visible .rec-time { display: none; }
.rec:hover .rec-stop, .rec:focus-visible .rec-stop { display: inline; }
.rec:hover .rec-dot, .rec:focus-visible .rec-dot { border-radius: 2px; }

/* The dock sits at the bottom of the space below the top bar. The panel above it gets what is left
   of that space, and scrolls if that is not enough, as on a phone where the dock wraps to several rows. */
.dock-wrap {
  position: absolute;
  top: 76px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 20px 20px;
}
.dock-col { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; width: 100%; max-width: 1180px; max-height: 100%; }

.dock, .panel { border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); }

.dock { flex: none; align-self: stretch; display: flex; flex-direction: column; gap: 4px; padding: 8px 20px 14px; }

.scrub { display: flex; align-items: center; gap: 14px; }
.time { flex: none; min-width: 48px; font-family: var(--mono); font-size: 14px; color: var(--muted); }
.time-left { min-width: 88px; text-align: right; }

.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; }

.transport { display: flex; align-items: center; gap: 6px; }
.transport .icon { width: 22px; height: 22px; }
.play { flex: none; width: 56px; height: 56px; border-radius: 50%; }
.play .icon { width: 26px; height: 26px; }
.icon-pause, .is-playing .icon-play { display: none; }
.is-playing .icon-pause { display: block; }

/* On a narrow screen the stepper drops below, so the slider keeps its length. */
.speed { flex: 3 1 360px; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.slider-field { flex: 1 1 160px; min-width: 0; display: flex; align-items: center; gap: 14px; }
.slider-label { flex: none; font-size: 15px; color: var(--muted); }

.stepper { flex: none; 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: 76px; font-family: var(--mono); font-size: 15px; text-align: center; }

.size { flex: 2 1 240px; gap: 12px; }
.a-small, .a-large { flex: none; font-weight: 600; line-height: 1; }
.a-small { font-size: 14px; }
.a-large { font-size: 28px; }

.display { flex: none; gap: 8px; padding: 0 16px 0 12px; border: 1px solid var(--line); font-weight: 600; }

/* Settings panel */
.panel {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 380px;
  max-width: 100%;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 22px 16px;
}
/* The heading row stays put while the rest scrolls under it. It takes over the panel's padding
   around it, and reaches down to the foot of the close button, so that it covers what goes by.
   (Where it sticks is measured from inside the panel's padding, hence the -18px.) */
.panel-head {
  position: sticky;
  top: -18px;
  z-index: 1;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -18px -22px -5px;
  padding: 18px 22px 11px;
  background: var(--surface);
}
.panel h2 { margin: 0; font-size: 17px; font-weight: 600; }
/* A full-size button, pulled into the panel's corner so the heading row stays one line tall. */
#close-panel { margin: -11px -12px -11px 0; }

.panel-row { display: flex; align-items: center; gap: 14px; }
.panel-row > span, .panel-row > label { flex: none; width: 104px; font-size: 15px; }

/* The fonts the script can be set in, a button each. Where the row has too little room beside its
   label, as on a phone, they drop to a line of their own. */
.font-row { flex: none; flex-wrap: wrap; padding: 6px 0; }
.fonts { flex: 1 1 200px; display: flex; flex-wrap: wrap; gap: 6px; }
.font { min-height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: none; font-size: 14px; }
.font:hover { background: var(--raised); }
.font[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--ink); }

/* A colour well: the native colour input, trimmed to a swatch. */
.colour-row { flex: none; flex-wrap: wrap; row-gap: 0; min-height: 44px; }
.well { flex: none; width: 40px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: none; cursor: pointer; }
.well::-webkit-color-swatch-wrapper { padding: 3px; }
.well::-webkit-color-swatch { border: 0; border-radius: 4px; }
.well::-moz-color-swatch { border: 0; border-radius: 4px; }
/* Ready-made colours beside a well, for a change without the picker. Six of them need 140px; where
   the row has less to spare, as on a phone, they drop to a line of their own. */
.swatches { flex: 1 1 140px; display: flex; gap: 4px; padding: 4px 0; }
.swatch { flex: none; width: 20px; height: 20px; padding: 0; border: 1px solid var(--line); border-radius: 5px; cursor: pointer; }
#reset-colours { flex: none; align-self: flex-end; margin-right: -12px; padding: 0 12px; }

.switches { display: flex; flex-direction: column; margin-top: 6px; border-top: 1px solid var(--line); }
.switch {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 56px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
  font-size: 15px;
  text-align: left;
}
.switch-text { display: flex; flex-direction: column; gap: 1px; }
.switch-hint { font-size: 13px; color: var(--muted); }
.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;
}
.switch[aria-checked="true"] .switch-track { background: var(--accent); }
.switch[aria-checked="true"] .switch-track::after { background: var(--ink); transform: translateX(20px); }

/* A finished recording, offered over whichever screen is showing, and the steps to install the app,
   which share its look. (The backdrop is given its colour outright: older browsers do not let it
   use the page's tokens.) */
.offer {
  width: 420px;
  max-width: calc(100% - 32px);
  padding: 22px 22px 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}
.offer::backdrop { background: rgba(14, 15, 17, .6); }
.offer h2 { margin: 0 0 4px; font-size: 17px; font-weight: 600; }
.offer-name { margin: 0 0 16px; overflow: hidden; font-family: var(--mono); font-size: 14px; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.offer audio { display: block; width: 100%; height: 40px; }
.offer-note { margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.offer-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.offer-actions .primary, .newer .primary { height: 44px; padding: 0 20px; border-radius: 12px; font-size: 15px; font-weight: 700; }
.steps-how { margin: 12px 0 0; line-height: 1.5; }
.steps-own { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.steps-own p { margin: 0 0 12px; }
.steps-own .ghost { border: 1px solid var(--line); color: var(--text); }

.shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}
.shortcuts span { display: inline-flex; align-items: center; gap: 6px; }
.shortcuts kbd {
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
}
/* The arrow keys are drawn: the mono font has no arrows, so a system font would stand in for them. */
.shortcuts kbd .icon { display: inline-block; width: 12px; height: 12px; stroke-width: 2.25; vertical-align: middle; }