:root {
  color-scheme: light;

  --color-ink: #000000;
  --color-paper: #ffffff;
  --color-card: #f2f2f2;
  --color-mint: #e5ffe8;
  --color-lemon: #ffee00;
  --surface-lemon: #fffee0;
  --color-lime: #00ff1a;
  --color-lime-84: rgba(0, 255, 26, 0.84);
  --color-lime-69: rgba(0, 255, 26, 0.69);
  --color-lime-50: rgba(0, 255, 26, 0.5);
  --color-lime-31: rgba(0, 255, 26, 0.31);
  --color-lime-16: rgba(0, 255, 26, 0.16);
  --color-lime-07: rgba(0, 255, 26, 0.07);
  --color-lime-0: rgba(0, 255, 26, 0);
  --guide-glow: radial-gradient(50% 50% ellipse at 50% 50%,
    var(--color-lime) 27.27%, var(--color-lime-84) 45.45%, var(--color-lime-69) 54.55%,
    var(--color-lime-50) 63.64%, var(--color-lime-31) 72.73%, var(--color-lime-16) 81.82%,
    var(--color-lime-07) 90.91%, var(--color-lime-0) 100%);
  --guide-dot-track: rgba(0, 0, 0, 0.16);
  --guide-dot-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  --color-paper-0: rgba(255, 255, 255, 0);
  --color-paper-85: rgba(255, 255, 255, 0.85);
  --color-paper-55: rgba(255, 255, 255, 0.55);
  --color-paper-25: rgba(255, 255, 255, 0.25);
  --color-paper-08: rgba(255, 255, 255, 0.08);
  --color-link: #1777ff;
  --color-avatar-fallback: #d9d9d9;
  --color-overlay-muted-funnel: #757575;
  --color-red-funnel: #e10600;
  --color-avatar-locked: #ebebeb;
  --color-map-locked: #ece4de;

  --ink-02: rgba(0, 0, 0, 0.02);
  --ink-04: rgba(0, 0, 0, 0.04);
  --ink-10: rgba(0, 0, 0, 0.1);
  --ink-16: rgba(0, 0, 0, 0.16);
  --ink-24: rgba(0, 0, 0, 0.24);
  --ink-40: rgba(0, 0, 0, 0.4);
  --ink-60: rgba(0, 0, 0, 0.6);
  --paper-64: rgba(255, 255, 255, 0.64);
  --shadow-input: 0 4px 16px rgba(0, 0, 0, 0.04);

  --color-ink-60: #666666;
  --color-ink-40: #999999;
  --color-ink-24: #c2c2c2;
  --color-ink-24-on-locked: #b3b3b3;
  --color-ink-50-on-paper: #808080;
  --color-ink-12-on-paper: #e0e0e0;
  --color-paper-70-on-ink: #b3b3b3;
  --text-primary: var(--color-ink);
  --text-secondary: var(--color-ink-60);
  --text-secondary-alpha: var(--ink-60);
  --text-tertiary: var(--color-ink-40);
  --text-tertiary-alpha: var(--ink-40);
  --text-quaternary: var(--color-ink-24);
  --text-quaternary-alpha: var(--ink-24);
  --text-secondary-on-ink: var(--color-paper-70-on-ink);
  --guide-dim: rgba(0, 0, 0, 0.5);
  --scrim: rgba(0, 0, 0, 0.4);
  --shadow-menu: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-on-video: 0 1px 12px rgba(0, 0, 0, 0.35);

  --bg: var(--color-paper);
  --fg: var(--text-primary);
  --fg-muted: var(--text-tertiary);
  --fg-muted-alpha: var(--text-tertiary-alpha);
  --fg-chip: var(--text-secondary);
  --fg-on-ink: var(--color-paper);
  --fg-on-ink-muted: var(--text-secondary-on-ink);
  --fg-link: var(--color-link);
  --fg-input-locked: var(--color-ink-12-on-paper);
  --fg-lock: var(--text-quaternary);
  --fg-lock-face: var(--color-ink-24-on-locked);
  --fg-lock-pin: var(--color-ink-50-on-paper);
  --surface-0: var(--color-paper);
  --surface-1: var(--color-card);
  --surface-chip: var(--ink-04);
  --surface-chip-pressed: var(--ink-10);
  --surface-pressed: var(--ink-04);
  --surface-roster: var(--ink-02);
  --surface-input: var(--color-paper);
  --stroke-input: var(--color-ink-12-on-paper);
  --surface-status: var(--color-ink);
  --surface-send: var(--color-ink);
  --surface-send-locked: var(--ink-16);
  --surface-menu: var(--color-paper);
  --surface-map: var(--color-map-locked);
  --surface-skel: var(--ink-10);
  --av-fallback: var(--color-avatar-fallback);
  --av-locked: var(--color-avatar-locked);
  --av-ring-arrived: var(--paper-64);

  --hdr-glow: radial-gradient(400px circle at 50% -73px,
    var(--color-lime) 36px, var(--color-lime-84) 116px, var(--color-lime-69) 156px,
    var(--color-lime-50) 196px, var(--color-lime-31) 236px, var(--color-lime-16) 276px,
    var(--color-lime-07) 316px, var(--color-lime-0) 356px);
  --hdr-veil: radial-gradient(320px 230px at 48% 222px,
    var(--color-paper) 64%, var(--color-paper-0) 100%);
  --hdr-glow-h: 460px;
  --veil-w: 640px;
  --veil-h: 460px;
  --veil-x: 48.35%;
  --veil-fill: radial-gradient(closest-side,
    var(--color-paper) 35%, var(--color-paper-85) 50%, var(--color-paper-55) 65%,
    var(--color-paper-25) 80%, var(--color-paper-08) 90%, var(--color-paper-0) 100%);
  --bg-foot: linear-gradient(to bottom, var(--color-paper), var(--color-card));
  --bg-foot-h: 320px;

  --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-body-size: 16px;
  --type-body-line-height: 1.2;
  --type-sys-size: 14px;
  --type-initials-size: 13px;
  --type-hero-size: 44px;
  --type-hero-line-height: 44px;
  --type-picker-title-size: 18px;
  --type-picker-title-line-height: 22px;
  --type-event-title-size: 44px;
  --type-event-title-line-height: 44px;
  --type-picker-body-size: 18px;
  --type-picker-body-line-height: 22px;
  --type-title-size: 28px;
  --type-title-line-height: 31.36px;
  --type-pay-total-size: 24px;
  --type-pay-total-line-height: 1.2;
  --type-pay-offer-size: 13px;
  --type-slide-size: 36px;
  --type-slide-line-height: 36px;
  --type-slide-caption-size: 28px;
  --type-slide-caption-line-height: 31.36px;
  --type-slide-note-size: 20px;
  --type-slide-note-line-height: 22px;
  --type-opening-size: 56px;
  --type-opening-line-height: 56px;

  --radius-pill: 999px;
  --radius-card: 24px;
  --radius-field: 18px;
  --radius-row: 20px;
  --radius-status: 16px;
  --radius-chip: 14px;
  --radius-menu: 16px;
  --guide-radius: 36px;
  --guide-pick-radius: 10px;
  --radius-picker-inner: 20px;
  --radius-picker-lead: 16px;
  --corner-smooth: superellipse(1.5);
  --radius-card-smooth: calc(var(--radius-card) * 4 / 3);
  --radius-row-smooth: calc(var(--radius-row) * 4 / 3);

  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-6: 6px;
  --space-7: 7px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-36: 36px;
  --space-48: 48px;

  --tap-min: 44px;
  --btn-h: 48px;
  --skel-title-w: 160px;
  --skel-when-w: 112px;
  --skel-name-w: 72px;
  --skel-text-w: 60%;
  --skel-line-h: 14px;
  --skel-text-h: 16px;
  --icon-size: 18px;
  --icon-size-send: 20px;
  --col-max: 480px;
  --hdr-row-h: 48px;
  --hdr-side-reserve: 96px;
  --hero-top-gap: 48px;
  --av-size: 32px;
  --av-ring: 2px;
  --av-gap: 2px;
  --av-overlap: -5px;
  --av-overlap-map: -6px;
  --av-blur: 12px;
  --av-blur-css: 6px;
  --map-h: 128px;
  --map-w: 128px;
  --map-w-wide: 170px;
  --map-w-full: 228px;
  --map-overlap: -24px;
  --map-overlap-wide: -32px;
  --map-cluster-top: 21px;
  --map-cluster-top-wide: 21px;
  --map-venue-y: 70%;
  --roster-lift: 8px;
  --pin-stem-w: 2px;
  --pin-stem-h: 12px;
  --pin-foot: 4px;
  --status-h: 40px;
  --status-overlap: -20px;
  --chip-h: 40px;
  --input-card-h: 48px;
  --input-field-max-h: calc(3 * var(--type-body-size) * var(--type-body-line-height) + 2 * var(--space-8));
  --send-w: 48px;
  --send-h: 36px;
  --chip-emoji: 28px;
  --av-size-hero: 64px;
  --type-sheet-title-size: 20px;
  --type-heading-size: 20px;
  --snack-spinner: 16px;
  --snack-spinner-stroke: 2px;
  --snack-text-lift: 1px;
  --bar-pad-x: 20px;
  --bar-pad-top: 10px;
  --bar-pad-bottom: 32px;
  --bar-gap: 12px;
  --bar-h-rest: 142px;
  --bar-h: var(--bar-h-rest);
  --chat-pad-x: 16px;
  --chat-pad-bottom: 14px;
  --chat-lift: 99px;
  --chat-top-gap: 80px;
  --chat-fade-lead: 8px;
  --chat-fade-tail: 40px;
  --chat-fade-top: 64px;
  --msg-pad-right: clamp(24px, 20vw, 80px);
  --sys-pad-x: clamp(32px, 20vw, 80px);
  --guide-dots-bottom: 32px;
  --guide-dots-w: 60px;
  --guide-dot-size: 8px;
  --guide-dot-active-w: 12px;
  --guide-dot-gap: 4px;
  --guide-pick-read-opacity: 0.6;

  --tilt-map: -2deg;
  --tilt-roster: 1deg;
  --tilt-av-locked: -1deg;
  --tilt-av-map: 3.66deg;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-content-top: 0px;

  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --motion-spring: 600ms;
  --ease-spring-hero: cubic-bezier(0.34, 1.5, 0.64, 1);
  --motion-spring-hero: 860ms;
  --ease-spring-snap: cubic-bezier(0.34, 1.36, 0.64, 1);
  --motion-spring-snap: 440ms;
  --ease-spring-soft: cubic-bezier(0.34, 1.25, 0.64, 1);
  --motion-spring-soft: 770ms;
  --sheet-overshoot-fill: 160px;
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --motion-hero: 900ms;
  --hero-enter-y: -40px;
  --motion-row: 240ms;
  --row-enter-y: 16px;
  --motion-fold: 200ms;
  --motion-snack: 260ms;
  --motion-spin: 900ms;
  --roster-press: 0.96;
  --motion-scrim: 200ms;
  --motion-sheet-close: 180ms;
  --motion-balloon: 2400ms;
  --balloon-rise: -40vh;
  --balloon-size: 48px;
  --motion-fast: 160ms;
  --motion-guide-dots: 320ms;
  --motion-crop: 180ms;
  --motion-sheet: 240ms;
  --motion-ease: cubic-bezier(0.25, 1, 0.5, 1);
  --motion-skel: 1200ms;
  --motion-picker-enter: 400ms;
  --motion-picker-enter-forward-x: 80px;
  --motion-picker-enter-x: var(--motion-picker-enter-forward-x);
  --motion-picker-stagger: 180ms;
  --motion-picker-enter-slow: 800ms;
}

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

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

@font-face {
  font-family: "Onweer Normal Cond";
  src: url("/fonts/OnweerNormalCond-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Onweer Poster Cond";
  src: url("/fonts/OnweerPosterCond-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
