:root {
  --color-ink: #000000;
  --color-paper: #ffffff;
  --color-card: #f2f2f2;
  --color-lime: #00ff1a;
  --color-lemon: #ffee00;
  --color-lemon-faint: #fffee0;
  --color-red: #e10600;
  --color-lime-0: rgba(0, 255, 26, 0);
  --color-lemon-0: rgba(255, 238, 0, 0);

  --bg: var(--color-ink);
  --fg: var(--color-ink);
  --on-dark: var(--color-paper);
  --surface-card: var(--color-card);
  --surface-0: var(--color-paper);
  --surface-1: var(--color-card);
  --surface-1-alpha: rgba(0, 0, 0, 0.06);
  --surface-lemon: var(--color-lemon-faint);
  --btn-bg: var(--color-ink);
  --btn-fg: var(--color-paper);
  --btn-disabled-bg: rgba(0, 0, 0, 0.16);
  --btn-disabled-fg: rgba(255, 255, 255, 0.5);
  --menu-item-hover: rgba(0, 0, 0, 0.06);
  --photocard-bg: var(--color-paper);
  --shadow-photocard: 1px 1px 0 rgba(0, 0, 0, 0.04);
  --shadow-photocard-lg: 1.6px 1.6px 0 rgba(0, 0, 0, 0.04);
  --shadow-on-video: 0 1px 12px rgba(0, 0, 0, 0.35);
  --scrim-on-video: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 55%);
  --overlay-muted: #757575;
  --fg-error: var(--color-red);
  --overlay-quiet: #999999;
  --on-dark-muted: rgba(255, 255, 255, 0.72);
  --hairline-on-dark: rgba(255, 255, 255, 0.16);
  --hairline-on-paper: rgba(0, 0, 0, 0.16);

  --tally-fg: #37352f;

  --font-ui: "Onweer Normal Cond", "Arial Narrow", "Helvetica Neue Condensed",
    "Roboto Condensed", "PT Sans Narrow", Arial, "Noto Sans Georgian", "BPG Arial", Sylfaen,
    system-ui, sans-serif;
  --font-display: "Onweer Poster Cond", "Onweer Normal Cond", "Arial Narrow",
    Arial, system-ui, sans-serif;
  --type-hero-size: 44px;
  --type-hero-line-height: 44px;
  --type-title-size: 28px;
  --type-title-line-height: 31.36px;
  --type-body-size: 18px;
  --type-body-line-height: 22px;
  --type-heading-size: 22px;
  --type-heading-line-height: 25.96px;
  --type-heading-letter-spacing: -0.242px;
  --type-body-bold-size: 24px;
  --type-body-bold-line-height: 1.2;
  --type-button-size: 17px;
  --type-button-line-height: 24.14px;
  --type-button-letter-spacing: 1px;
  --type-fine-size: 13px;
  --type-fine-line-height: 1.5;
  --type-doc-title-size: 28px;
  --type-doc-heading-size: 20px;
  --type-doc-body-size: 16px;
  --type-doc-body-line-height: 1.6;

  --space-0: 0;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-36: 36px;
  --space-40: 40px;
  --space-80: 80px;

  --radius-inner: 20px;
  --radius-card: 24px;
  --radius-small: 16px;
  --radius-pill: 999px;
  --radius-corner-shape: superellipse(2);

  --col-max: 480px;
  --canvas-w: 384;
  --canvas-h: 576;

  --photocard-ratio: 2 / 3;
  --photo-ratio: 3 / 4;

  --motion-fast: 160ms;
  --motion-ease: cubic-bezier(0.25, 1, 0.5, 1);

  --motion-enter: 400ms;
  --motion-enter-forward-x: 80px;
  --motion-enter-x: var(--motion-enter-forward-x);
  --motion-ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);

  --motion-confirm: 500ms;

  --motion-celebrate: 1500ms;

  --motion-point-enter: 3200ms;

  --motion-stagger: 180ms;

  --motion-enter-slow: 800ms;
}

@supports (corner-shape: superellipse(2)) {
  :root {
    --radius-inner: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 1ms;
    --motion-enter: 1ms;
    --motion-enter-forward-x: 0px;
    --motion-enter-x: 0px;
    --motion-confirm: 120ms;
    --motion-celebrate: 120ms;
    --motion-stagger: 0ms;
    --motion-enter-slow: 1ms;
  }
}