/* Canvas-text families (FONT_LIST) — the draw path only ever renders weight 400.
   * Self-hosted from /shared/assets/fonts/, the one platform-wide font pool — this app has no
   * fonts folder of its own any more, even though these nine faces are the only consumer of
   * each. A shared pool with a single consumer is still simpler than a per-app exception. */
  @font-face { font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap; src: url("/shared/assets/fonts/anton.woff2") format("woff2"); }
  @font-face { font-family: "Archivo Black"; font-style: normal; font-weight: 400; font-display: swap; src: url("/shared/assets/fonts/archivo-black.woff2") format("woff2"); }
  @font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400; font-display: swap; src: url("/shared/assets/fonts/bodoni-moda.woff2") format("woff2"); }
  @font-face { font-family: "DM Serif Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("/shared/assets/fonts/dm-serif-display.woff2") format("woff2"); }
  @font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 400; font-display: swap; src: url("/shared/assets/fonts/bricolage-grotesque.woff2") format("woff2"); }
  @font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("/shared/assets/fonts/playfair-display.woff2") format("woff2"); }
  @font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/shared/assets/fonts/instrument-serif.woff2") format("woff2"); }
  @font-face { font-family: "Unbounded"; font-style: normal; font-weight: 400; font-display: swap; src: url("/shared/assets/fonts/unbounded.woff2") format("woff2"); }
  @font-face { font-family: "Libre Caslon Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("/shared/assets/fonts/libre-caslon-display.woff2") format("woff2"); }

  /* v3.2.0 — 10 more display faces, thin to bold. Same single-weight-400
   * convention as above regardless of the actual cut downloaded (e.g.
   * Passion One below is its Black/900 cut, declared at weight 400 like
   * every other face here, since the draw path only ever asks for 400). */
  @font-face { font-family: "Josefin Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/shared/assets/fonts/josefin-sans.woff2") format("woff2"); }
  @font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("/shared/assets/fonts/cormorant-garamond.woff2") format("woff2"); }
  @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("/shared/assets/fonts/space-grotesk.woff2") format("woff2"); }
  @font-face { font-family: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/shared/assets/fonts/space-mono.woff2") format("woff2"); }
  @font-face { font-family: "Pacifico"; font-style: normal; font-weight: 400; font-display: swap; src: url("/shared/assets/fonts/pacifico.woff2") format("woff2"); }
  @font-face { font-family: "Righteous"; font-style: normal; font-weight: 400; font-display: swap; src: url("/shared/assets/fonts/righteous.woff2") format("woff2"); }
  @font-face { font-family: "Bungee"; font-style: normal; font-weight: 400; font-display: swap; src: url("/shared/assets/fonts/bungee.woff2") format("woff2"); }
  @font-face { font-family: "Alfa Slab One"; font-style: normal; font-weight: 400; font-display: swap; src: url("/shared/assets/fonts/alfa-slab-one.woff2") format("woff2"); }
  @font-face { font-family: "Passion One"; font-style: normal; font-weight: 400; font-display: swap; src: url("/shared/assets/fonts/passion-one.woff2") format("woff2"); }
  @font-face { font-family: "Abril Fatface"; font-style: normal; font-weight: 400; font-display: swap; src: url("/shared/assets/fonts/abril-fatface.woff2") format("woff2"); }

  /* Syne / Montserrat / Roboto Mono are NOT declared here any more — they come from the
   * shared /shared/_ds/v1/tokens/fonts.css, which self-hosts them for the whole platform. The
   * canvas still offers them via FONT_LIST: loadFont() goes through document.fonts.load(),
   * which reads the document's @font-face registry and does not care which stylesheet
   * declared it. */

  html, body { margin: 0; padding: 0; background: var(--surface-page); }
  a { color: var(--link); text-decoration: none; }
  a:hover { color: var(--accent-dark); }
  input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 16px; background: transparent; cursor: ew-resize; }
  input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: var(--border-subtle); }
  input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--text-primary); transition: background var(--dur-fast) var(--ease-out); }
  input[type="range"]:hover::-webkit-slider-thumb { background: var(--accent); }
  input[type="range"]::-moz-range-track { height: 1px; background: var(--border-subtle); }
  input[type="range"]::-moz-range-thumb { width: 10px; height: 10px; border: none; border-radius: 50%; background: var(--text-primary); }
  input[type="color"] { -webkit-appearance: none; appearance: none; padding: 0; border: none; background: transparent; cursor: pointer; }
  input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
  input[type="color"]::-webkit-color-swatch { border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); }
  select { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%2355524d'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; background-size: 9px 6px; }
  select:disabled { opacity: 0.4; cursor: not-allowed; }
  [data-hv="accent-text"]:hover { color: var(--accent) !important; border-color: var(--accent) !important; }
  [data-hv="accent-fill"]:hover { background: var(--accent-dark) !important; border-color: var(--accent-dark) !important; }
  [data-hv="accent-only"]:hover { color: var(--accent) !important; }
  [data-hv="primary-text"]:hover { color: var(--text-primary) !important; }
  [data-btn]:hover { transform: scale(1.02); }
  [data-btn]:active { transform: scale(0.98); }
  #letter-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ghost); }
  #gopro-code-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ghost); }