/* ============================================================================
   vidsrc.pk — the whole stylesheet.

   Written as one file with no framework. The previous build was a 220 KB Bootstrap
   bundle plus four CDN stylesheets, two of which never loaded: their URLs had `%40`
   where an `@` belongs, so jsDelivr returned a checksum error and the browser refused
   them. That is why no icon font rendered and the carousel had no styles.

   Nothing here is fetched from another origin. That is the whole reason for the file.
   ========================================================================= */

/* ------------------------------------------------------------------ tokens */
:root {
  /* One accent, and it is the only colour in the page. Everything else is a step on a
     grey ramp, which is what makes an accent read as emphasis rather than decoration. */
  /* the player's gold, so the two sites are one brand. See the note on the light value. */
  --accent: #f9cc0b;
  --accent-dim: #d9b209;
  --accent-soft: color-mix(in oklab, var(--accent) 12%, transparent);

  --bg: #08090b;
  --bg-raised: #0e1013;
  --bg-inset: #14171b;
  --line: #1e2227;
  --line-strong: #333940;

  --fg: #e7e9ec;
  --fg-muted: #9aa1ab;
  /* Raised from #6b7280, which measured 4.12:1 against the page background. It sits
     under the smallest text on the page — the API note, the snippet footer, the field
     labels — which is exactly the text that needs the contrast most. */
  --fg-faint: #858d98;

  --danger: #f87171;
  --ok: #4ade80;

  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;

  /* one measure for every horizontal band, so nothing is aligned to a different grid */
  --pad: clamp(20px, 5vw, 48px);
  --max: 1120px;

  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #ffffff;
  --bg-raised: #f7f8f9;
  --bg-inset: #f1f3f5;
  --line: #e4e7ea;
  --line-strong: #d3d8dd;

  --fg: #14171b;
  --fg-muted: #5b636e;
  --fg-faint: #5f6772;

  /* #0d9488 is 3.74:1 against white — right for a heading, wrong for a 12px
     uppercase label. This is the same hue two steps down. */
  /* #f9cc0b is 1.6:1 on white — right for a large heading, unusable for the 12px eyebrow and
     the links. This is the same hue two steps down, at 5.2:1. The dark theme keeps the true
     brand gold, which is 12.6:1 on #08090b. */
  --accent: #b45309;
  --accent-dim: #92400e;
  --accent-soft: color-mix(in oklab, var(--accent) 10%, transparent);

  color-scheme: light;
}

/* ------------------------------------------------------------------- base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* the sticky header would otherwise cover an anchor target */
  scroll-padding-top: 76px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 600;
}

h1 {
  font-size: clamp(32px, 5.4vw, 56px);
  letter-spacing: -0.035em;
}
h2 {
  font-size: clamp(23px, 3vw, 32px);
}
h3 {
  font-size: 16.5px;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

code,
kbd,
pre {
  font-family: var(--mono);
  font-size: 0.9em;
}

/* visible focus for keyboard users only — a mouse should not leave a ring behind */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection {
  background: var(--accent);
  color: var(--bg);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--accent);
  color: var(--bg);
  border-radius: 0 0 var(--r) 0;
  font-weight: 600;
}
.skip:focus {
  left: 0;
}

/* ------------------------------------------------------------------ layout */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.band {
  padding-block: clamp(56px, 8vw, 96px);
  border-top: 1px solid var(--line);
}

.band__head {
  max-width: 640px;
  margin-bottom: 40px;
}

.band__head p {
  margin-top: 12px;
  color: var(--fg-muted);
}

.eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ------------------------------------------------------------------ header */
.head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.head.is-stuck {
  border-bottom-color: var(--line);
}

.head__in {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 62px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 650;
  letter-spacing: -0.02em;
  font-size: 16px;
  flex: none;
}

.brand__mark {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--accent);
}

.brand__dot {
  color: var(--fg-faint);
  font-weight: 400;
}

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.nav a {
  padding: 7px 11px;
  border-radius: var(--r-sm);
  color: var(--fg-muted);
  font-size: 14px;
  transition: color 0.15s ease, background 0.15s ease;
}

.nav a:hover {
  color: var(--fg);
  background: var(--bg-inset);
}

.head__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
}

/* the theme switch and the small icon buttons share one shape */
.iconbtn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-raised);
  color: var(--fg-muted);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.iconbtn:hover {
  color: var(--fg);
  border-color: var(--line-strong);
}

.iconbtn svg {
  width: 16px;
  height: 16px;
}

.iconbtn[aria-pressed="true"] {
  color: var(--accent);
  border-color: color-mix(in oklab, var(--accent) 45%, var(--line));
  background: var(--accent-soft);
}

.navtoggle {
  display: none;
}

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--bg-raised);
  color: var(--fg);
  font: inherit;
  font-size: 14.5px;
  font-weight: 550;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.06s ease;
}

.btn:hover {
  border-color: var(--fg-faint);
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #04100f;
  font-weight: 650;
}

:root[data-theme="light"] .btn--primary {
  color: #ffffff;
}

.btn--primary:hover {
  background: var(--accent-dim);
  border-color: var(--accent-dim);
}

.btn--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--fg-muted);
}

.btn--ghost:hover {
  color: var(--fg);
  border-color: var(--line-strong);
}

.btn svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* --------------------------------------------------------------------- hero */
.hero {
  padding-block: clamp(64px, 9vw, 112px) clamp(48px, 6vw, 80px);
  position: relative;
  overflow: hidden;
}

/* the only decoration in the page: a single soft wash behind the hero, drawn in CSS
   because the two PNGs that used to do this job are 404 */
.hero::before {
  content: "";
  position: absolute;
  inset: -30% 0 auto 0;
  height: 560px;
  background: radial-gradient(
    60% 100% at 50% 0%,
    var(--accent-soft),
    transparent 70%
  );
  pointer-events: none;
}

.hero__in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.hero h1 {
  margin-top: 18px;
}

.hero h1 em {
  font-style: normal;
  color: var(--accent);
}

.hero__lead {
  margin-top: 18px;
  max-width: 46ch;
  color: var(--fg-muted);
  font-size: 16.5px;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 26px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--fg-faint);
}

.hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hero__meta svg {
  width: 13px;
  height: 13px;
  color: var(--accent);
}

/* ------------------------------------------------------------- demo player */
.demo {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.demo__tabs {
  display: flex;
  gap: 2px;
  padding: 6px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-inset);
}

.demo__tab {
  flex: 1;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--fg-muted);
  font: inherit;
  font-size: 13.5px;
  font-weight: 550;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.demo__tab:hover {
  color: var(--fg);
}

.demo__tab[aria-selected="true"] {
  background: var(--bg-raised);
  color: var(--fg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.demo__screen {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}

.demo__screen iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* the placeholder is a sibling of the frame, not a wrapper, so replacing one does not
   disturb the other */
.demo__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 10px;
  text-align: center;
  padding: 20px;
  color: var(--fg-faint);
}

.demo__placeholder svg {
  width: 34px;
  height: 34px;
  margin-inline: auto;
  color: var(--line-strong);
}

.demo__placeholder p {
  font-size: 13.5px;
  max-width: 34ch;
}

.demo__form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--line);
}

.field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg);
  transition: border-color 0.15s ease;
}

.field:focus-within {
  border-color: var(--accent);
}

.field__label {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-faint);
  flex: none;
}

.field input {
  flex: 1;
  min-width: 0;
  padding: 11px 0;
  border: 0;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-family: var(--mono);
  font-size: 13.5px;
  outline: none;
}

.field input::placeholder {
  color: var(--fg-faint);
}

/* the season and episode pair only exists for a series, so the grid does not reserve
   space for it on a film */
.demo__form[data-mode="tv"] .field--ep {
  display: flex;
}

.field--ep {
  display: none;
}

.demo__form[data-mode="tv"] {
  grid-template-columns: 1fr auto auto auto;
}

@media (max-width: 560px) {
  .demo__form,
  .demo__form[data-mode="tv"] {
    grid-template-columns: 1fr auto;
  }
  .demo__form[data-mode="tv"] .field--ep {
    grid-column: span 1;
  }
}

/* ---------------------------------------------------- the demo's loading state
   The player takes a couple of seconds to answer. Without this the rectangle is black
   and reads as broken rather than as busy. */
.demo__loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 14px;
  text-align: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.55);
  color: #f0f2f4;
  z-index: 2;
}

.demo__loading p {
  font-size: 13.5px;
  color: rgba(240, 242, 244, 0.75);
}

.demo__spinner {
  width: 30px;
  height: 30px;
  margin-inline: auto;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: demo-spin 0.85s linear infinite;
}

@keyframes demo-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .demo__spinner { animation: none; border-top-color: var(--accent); }
}

/* ------------------------------------------------- what is loaded, and the chips
   A row under the screen: inside it, the text would sit on the picture, and the picture
   is the thing the demo is for. */
.demo__meta {
  display: flex;
  align-items: center;
  gap: 10px 14px;
  flex-wrap: wrap;
  padding: 12px 12px 0;
}

.demo__title {
  font-size: 13px;
  color: var(--fg-muted);
  margin-right: auto;
  min-width: 0;
}

.demo__chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.chip {
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--fg-muted);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.chip:hover {
  color: var(--fg);
  border-color: var(--line-strong);
  background: var(--bg-inset);
}

.chip:active {
  transform: translateY(1px);
}

.demo__note {
  padding: 0 12px 12px;
  font-size: 12.5px;
  color: var(--fg-faint);
}

.demo__note code {
  color: var(--fg-muted);
}

/* ----------------------------------------------------------------- features */
.grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}

.grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cell {
  padding: 24px;
  background: var(--bg);
}

.cell svg {
  width: 20px;
  height: 20px;
  color: var(--accent);
  margin-bottom: 14px;
}

.cell h3 {
  margin-bottom: 6px;
}

.cell p {
  color: var(--fg-muted);
  font-size: 14.5px;
}

/* --------------------------------------------------------------------- faqs */
.faqs {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}

.faq {
  border-bottom: 1px solid var(--line);
}

.faq:last-child {
  border-bottom: 0;
}

.faq summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  cursor: pointer;
  font-weight: 550;
  list-style: none;
  transition: background 0.15s ease;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary:hover {
  background: var(--bg-raised);
}

.faq summary svg {
  width: 15px;
  height: 15px;
  margin-left: auto;
  flex: none;
  color: var(--fg-faint);
  transition: transform 0.2s ease;
}

.faq[open] summary svg {
  transform: rotate(45deg);
  color: var(--accent);
}

.faq__body {
  padding: 0 20px 20px;
  color: var(--fg-muted);
  max-width: 72ch;
}

/* ------------------------------------------------------------------ snippet
   The hero's second column: the request, and what it answers with. Shown rather than
   described, because "one URL" is the whole product. */
.snippet {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.snippet__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-inset);
}

.snippet__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line-strong);
  flex: none;
}

.snippet__name {
  margin-left: 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.snippet__body {
  margin: 0;
  padding: 18px 16px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.8;
  color: var(--fg-muted);
}

.snippet__body code {
  white-space: pre;
}

/* the only syntax colouring in the page, and it is two tones */
.c-m {
  color: var(--accent);
  font-weight: 600;
}
.c-a {
  color: var(--fg);
  font-weight: 600;
}
.c-s {
  color: var(--accent);
}
.c-c {
  color: var(--fg-faint);
}
.c-ok {
  color: var(--ok);
  font-weight: 600;
}

.snippet__foot {
  padding: 11px 16px;
  border-top: 1px solid var(--line);
  background: var(--bg-inset);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-faint);
}

/* ------------------------------------------------------------------ the api */
.api {
  display: grid;
  gap: 14px;
}

.endpoint {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg-raised);
}

.endpoint__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.method {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 7px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  flex: none;
}

.endpoint__path {
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--fg);
  word-break: break-all;
}

.endpoint__head .iconbtn {
  margin-left: auto;
  width: 30px;
  height: 30px;
}

.endpoint__body {
  padding: 16px;
  display: grid;
  gap: 14px;
}

.params {
  display: grid;
  gap: 8px;
}

.param {
  display: grid;
  grid-template-columns: minmax(96px, auto) minmax(64px, auto) 1fr;
  gap: 12px;
  align-items: baseline;
  font-size: 13.5px;
}

.param__name {
  font-family: var(--mono);
  color: var(--fg);
  font-size: 12.5px;
}

.param__req {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-faint);
}

.param__req--yes {
  color: var(--accent);
}

.param__desc {
  color: var(--fg-muted);
}

.examples {
  display: grid;
  gap: 6px;
}

.example {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg);
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--fg-muted);
  overflow-x: auto;
}

.example code {
  white-space: nowrap;
}

.example .iconbtn {
  margin-left: auto;
  width: 26px;
  height: 26px;
  flex: none;
}

.example .iconbtn svg {
  width: 13px;
  height: 13px;
}

/* ------------------------------------------------------------------- contact */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

.contact__list {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.contact__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-raised);
  transition: border-color 0.15s ease;
}

.contact__item:hover {
  border-color: var(--line-strong);
}

.contact__item svg {
  width: 17px;
  height: 17px;
  color: var(--accent);
  flex: none;
}

.contact__item b {
  display: block;
  font-weight: 550;
  font-size: 14.5px;
}

.contact__item span {
  color: var(--fg-faint);
  font-size: 13px;
}

/* the form is presentational — there is no endpoint behind it, and saying so is better
   than a button that silently does nothing */
.form {
  display: grid;
  gap: 12px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-raised);
}

.form label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: var(--fg-muted);
}

.form input,
.form textarea {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s ease;
}

.form input:focus,
.form textarea:focus {
  border-color: var(--accent);
}

.form textarea {
  resize: vertical;
  min-height: 96px;
}

.form__note {
  font-size: 12.5px;
  color: var(--fg-faint);
  display: flex;
  gap: 7px;
  align-items: flex-start;
}

.form__note svg {
  width: 14px;
  height: 14px;
  flex: none;
  margin-top: 2px;
  color: var(--fg-faint);
}

/* -------------------------------------------------------------------- footer */
.foot {
  border-top: 1px solid var(--line);
  padding-block: 40px;
  color: var(--fg-muted);
  font-size: 14px;
}

.foot__in {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
}

.foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.foot__links a:hover {
  color: var(--fg);
}

/* --------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  .hero__in {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero__lead {
    max-width: none;
  }
  .grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .contact {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .nav {
    display: none;
    position: absolute;
    top: 62px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px var(--pad) 14px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
  }
  .head.is-open .nav {
    display: flex;
  }
  .nav a {
    padding: 11px 12px;
    font-size: 15px;
  }
  .head__actions {
    margin-left: auto;
  }
  .navtoggle {
    display: grid;
  }
  .grid--3,
  .grid--2 {
    grid-template-columns: minmax(0, 1fr);
  }
  .param {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* ------------------------------------------------------------------ utilities */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

[hidden] {
  display: none !important;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 12px);
  z-index: 60;
  padding: 9px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--bg-raised);
  color: var(--fg);
  font-size: 13.5px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ============================================================================
   Long-form pages
   ============================================================================

   Terms, privacy, disclaimer and the error pages. The homepage has no running text — every
   block on it is three sentences — so none of this existed. Sharing the tokens is what makes
   these read as the same site rather than as documents that happen to use its colour.
   ========================================================================= */

.doc {
  padding-block: clamp(40px, 6vw, 72px) clamp(56px, 7vw, 88px);
}

/* a readable measure. 68 characters is where the eye starts losing the line's start on the
   way back, and legal text is the last place to make that harder. */
.doc__head {
  max-width: 68ch;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 32px;
}

.doc__head h1 {
  margin-top: 12px;
  font-size: clamp(28px, 4vw, 40px);
}

.doc__head p {
  margin-top: 14px;
  color: var(--fg-muted);
  font-size: 16px;
}

.doc__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--fg-faint);
}

.doc__body {
  max-width: 68ch;
  color: var(--fg-muted);
  font-size: 15.5px;
}

.doc__body h2 {
  margin: 40px 0 12px;
  font-size: 19px;
  color: var(--fg);
  letter-spacing: -0.015em;
}

.doc__body h2:first-child {
  margin-top: 0;
}

.doc__body h3 {
  margin: 26px 0 8px;
  font-size: 15.5px;
  color: var(--fg);
}

.doc__body p {
  margin-bottom: 14px;
}

.doc__body ul,
.doc__body ol {
  margin: 0 0 16px;
  padding-left: 22px;
}

.doc__body li {
  margin-bottom: 8px;
}

.doc__body li::marker {
  color: var(--fg-faint);
}

.doc__body strong {
  color: var(--fg);
  font-weight: 600;
}

.doc__body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.doc__body a:hover {
  text-decoration-thickness: 2px;
}

.doc__body code {
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg-inset);
  font-size: 0.88em;
  color: var(--fg);
}

/* a note that stands out from the running text without shouting */
.doc__callout {
  margin: 24px 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  background: var(--bg-raised);
  color: var(--fg-muted);
}

.doc__callout p:last-child {
  margin-bottom: 0;
}

.doc__callout strong {
  color: var(--fg);
}

/* the table of what is collected, which is the one place a table earns its keep */
.doc__table {
  width: 100%;
  /* wider than the prose measure: a two-column table inside 68ch leaves a third of the page
     empty for no reason, since the second column is the one doing the work */
  max-width: 78ch;
  margin: 0 0 20px;
  border-collapse: collapse;
  font-size: 14px;
}

.doc__table th:first-child,
.doc__table td:first-child {
  width: 34%;
}

.doc__table th,
.doc__table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.doc__table th {
  color: var(--fg);
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
}

.doc__table td {
  color: var(--fg-muted);
}

.doc__table tr:last-child td {
  border-bottom: 0;
}

/* and the footer's own row of legal links */
.foot__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--fg-faint);
}

.foot__legal a:hover {
  color: var(--fg);
}