/* Dark values apply under [data-theme="dark"], or under [data-theme="system"] while the system is dark.
   No other stylesheet names a colour except the code view's fixed editor palette and the media controls,
   a page width or margin, or a duration: the frame and the motion below are the product's one copy. */

@font-face {
  font-family: "Satoshi";
  src: url("../fonts/satoshi-variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/satoshi-variable-italic.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --ink: #161616; --ink-soft: #454545; --ink-faint: #595959; --ink-ghost: #9a9a9a;
  --run: #2f6bd8; --run-wash: #e8effc;
  --bg: #fafafa; --surface: #ffffff; --line: #e6e6e6; --line-hard: #c6c6c6; --control: #8a8a8a; --paper-2: #f1f1f1;
  --ember: #d2451e; --ember-ink: #a8360f; --ember-wash: #fbece5;
  --ok: #1f7a4d; --danger: #c0392b; --amber: #a65a07;
  --ok-wash: #e9f3ee; --danger-wash: #fbecea; --amber-wash: #fbf1e3;
  --on-ink: #ffffff; --ink-hover: #2e2e2e; --danger-fill: #c0392b; --danger-fill-hover: #a93226;
  --scrim: rgba(22, 22, 22, .38);
  --shadow: 0 24px 60px -24px rgba(22, 22, 22, .32), 0 0 0 1px rgba(22, 22, 22, .05);
  --lift: 0 10px 30px -18px rgba(22, 22, 22, .35);
  /* Solid status marks: a white symbol on a full-strength fill, the same in both themes. */
  --ok-solid: #1e9e5e; --warn-solid: #d9730b; --bad-solid: #d63b2f; --on-solid: #ffffff;
  --frame-bg: #ffffff;
  --player: #0e0e0e; --player-ink: #c9c9c9;
  /* Over the player, which stays dark in both themes: its notes, captions and the replay's
     pointer. */
  --on-player: #ffffff; --player-scrim: rgba(0, 0, 0, .66); --cue-bg: rgba(8, 8, 8, .8);
  --click-wash: rgba(210, 69, 30, .22); --click-halo: rgba(255, 255, 255, .8);
  --r: 8px; --ease: cubic-bezier(.22, .61, .36, 1);
  /* The page frame: every page's column, gutters and spacing. */
  --page-w: 1040px; --narrow-w: 560px; --gutter: 24px;
  --page-top: 36px; --page-bottom: 72px; --narrow-top: 120px; --section-gap: 36px;
  /* The reading column: a work page's procedure, questions and test cases, and a column page's content. */
  --column-w: 760px; --column-top: 28px;
  /* The motion: every transition takes one of these. */
  --dur-fast: 120ms; --dur: 180ms; --dur-slow: 260ms;
  --font: "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --ink: #ececec; --ink-soft: #c4c4c4; --ink-faint: #ababab; --ink-ghost: #6e6e6e;
  --run: #6d9bf0; --run-wash: #17243b;
  --bg: #131313; --surface: #1b1b1b; --line: #303030; --line-hard: #4d4d4d; --control: #707070; --paper-2: #242424;
  --ember: #e5623a; --ember-ink: #f2916c; --ember-wash: #3b1e14;
  --ok: #5fc08e; --danger: #ef6a57; --amber: #e8a557;
  --ok-wash: #152a1f; --danger-wash: #3a1915; --amber-wash: #33240f;
  --on-ink: #131313; --ink-hover: #cfcfcf; --danger-fill: #c0392b; --danger-fill-hover: #d24636;
  --scrim: rgba(0, 0, 0, .6);
  --shadow: 0 24px 60px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .06);
  --lift: 0 10px 30px -18px rgba(0, 0, 0, .9);
  --frame-bg: #202326;
  --player: #050505;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --ink: #ececec; --ink-soft: #c4c4c4; --ink-faint: #ababab; --ink-ghost: #6e6e6e;
    --run: #6d9bf0; --run-wash: #17243b;
    --bg: #131313; --surface: #1b1b1b; --line: #303030; --line-hard: #4d4d4d; --control: #707070; --paper-2: #242424;
    --ember: #e5623a; --ember-ink: #f2916c; --ember-wash: #3b1e14;
    --ok: #5fc08e; --danger: #ef6a57; --amber: #e8a557;
    --ok-wash: #152a1f; --danger-wash: #3a1915; --amber-wash: #33240f;
    --on-ink: #131313; --ink-hover: #cfcfcf; --danger-fill: #c0392b; --danger-fill-hover: #d24636;
    --scrim: rgba(0, 0, 0, .6);
    --shadow: 0 24px 60px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .06);
    --lift: 0 10px 30px -18px rgba(0, 0, 0, .9);
    --frame-bg: #202326;
    --player: #050505;
    color-scheme: dark;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}