@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-ExtraBold.woff2') format('woff2');
  font-weight: 800 900;
  font-display: swap;
}

:root {

  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-sub:     'Montserrat', system-ui, sans-serif;
  --font-body:    'Montserrat', system-ui, -apple-system, sans-serif;

  --fs-2xs:  10px;
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 13px;
  --fs-md:   14px;
  --fs-lg:   16px;
  --fs-xl:   18px;
  --fs-2xl:  22px;
  --fs-3xl:  26px;

  --fd-sm: clamp(26px, 4.5vw, 32px);
  --fd-md: clamp(30px, 6vw,   44px);
  --fd-lg: clamp(34px, 8vw,   60px);
  --fd-xl: clamp(40px, 11vw,  90px);

  --lh-tight: 1.12;
  --lh-snug:  1.35;
  --lh-body:  1.6;

  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  48px;
  --sp-10: 64px;
  --sp-11: 80px;

  --r-sm:   8px;
  --r-md:  12px;
  --r-lg:  18px;
  --r-xl:  24px;
  --r-pill: 999px;

  --surface:   #ffffff;
  --surface-2: #fdf7f0;
  --surface-3: #f8eee4;
  --surface-inset: #fbf3ea;
  --surface-warm:  #fcd8b1;
  --surface-blur: rgba(250,242,234,.92);

  --ink:       #341b0e;
  --ink-soft:  #6b4f3f;
  --ink-faint: #a3907f;
  --border:    #e6d8c8;
  --border-soft: #f0e5d8;

  --on-panel:      #ffffff;
  --on-panel-soft: #c9b5a5;
  --ink-panel:   #341b0e;
  --ink-panel-2: #4a2a18;
  --ink-panel-3: #5f3a24;

  --accent:      var(--main, #fc4619);
  --accent-dark: var(--main-dark, #c9380f);

  --accent-strong: var(--main-strong, #da3d16);
  --accent-text: var(--main-on-light, #bf2803);
  --accent-on-panel: var(--main-on-panel, #ff8f5e);
  --accent-soft: var(--main-soft, #ff8f5e);

  --blue:       var(--accent-text);
  --blue-deep:  var(--accent-dark);
  --coral:      var(--accent-soft);
  --coral-deep: var(--accent);
  --purple:     var(--status-bad);
  --green:      var(--sub-green-text);
  --green-deep: var(--sub-green-text);
  --gold:       var(--sub-gold);
  --gold-deep:  var(--sub-gold-text);
  --sky-top:    var(--sub-sky);
  --sky-bot:    var(--sub-sky-2);
  --locked-bg:  var(--surface-3);
  --locked-ink: var(--ink-faint);
  --dark:       var(--ink);
  --on-accent:   var(--main-text, #ffffff);

  --sub-green: #b0d857;
  --sub-gold:  #ffc000;
  --sub-sky:   #c6eaef;
  --sub-sky-2: #dff2f5;
  --on-sub: #341b0e;
  --sub-green-text: #62801e;
  --sub-gold-text:  #8a6800;

  --status-good:    #42691a;
  --status-good-bg: #eaf7dd;
  --status-warn:    #976017;
  --status-warn-bg: #fdeccb;
  --status-bad:     #b02b25;
  --status-bad-bg:  #fbe4e2;
  --status-idle:    #5c5c5c;
  --status-idle-bg: #f0f0f0;
  --status-info:    #1f6f7d;
  --status-info-bg: #eaf6f8;

  --canvas:            #17100b;
  --canvas-2:          #241710;
  --canvas-3:          #3a2418;
  --canvas-4:          #4d3222;
  --canvas-ink:        #ededed;
  --canvas-ink-soft:   #cfcfcf;
  --canvas-ink-faint:  #8a8a8a;
  --canvas-border:     #4d3222;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 2px 8px rgba(0,0,0,.07);
  --shadow-lg: 0 8px 28px rgba(0,0,0,.12);
  --ring: 0 0 0 3px rgba(var(--main-rgb, 252,70,25), .35);

  --dur-fast: .15s;
  --dur-mid:  .25s;

  --logo-lockup-ratio: 1.56;

  --container: 1140px;
  --sidebar-w: 228px;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --surface:   #1e1b1a;
  --surface-2: #242120;
  --surface-3: #161413;
  --surface-inset: #2a2625;
  --surface-blur: rgba(30,27,26,.92);

  --ink:       #f4f0ee;
  --ink-soft:  #a9a09c;
  --ink-faint: #7d7471;
  --border:    #363030;
  --border-soft: #2c2726;

  --ink-panel:   #121010;
  --ink-panel-2: #1f1c1b;
  --ink-panel-3: #2a2625;

  --accent-text: var(--main-on-panel, #ff8f5e);
  --accent-on-panel: var(--main-on-panel, #ff8f5e);
  --surface-warm: #3a2418;

  --sub-green-text: #c4e37d;
  --sub-gold-text:  #ffd257;

  --status-good:    #a7d15f;
  --status-good-bg: #232d17;
  --status-warn:    #e5ad55;
  --status-warn-bg: #322512;
  --status-bad:     #f0837b;
  --status-bad-bg:  #351b1a;
  --status-idle:    #a5a5a5;
  --status-idle-bg: #262322;
  --status-info:    #7ec5d2;
  --status-info-bg: #17282c;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
  --shadow-md: 0 2px 8px rgba(0,0,0,.5);
  --shadow-lg: 0 8px 28px rgba(0,0,0,.6);

  color-scheme: dark;
}

.font-display {
  font-family: var(--font-display) !important;
  letter-spacing: .5px;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.brand-lockup-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

:where(table) { max-width: 100%; }

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

:where(img, video, canvas, svg, iframe) { max-width: 100%; height: auto; }

:where(.app-layout, .main-content, .card, .metrics-grid) > * { min-width: 0; }

:where(td, th, p, h1, h2, h3, .card-title) { overflow-wrap: break-word; }

:where(.link-blue, .footer-links a, .nav-link) {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

@media (pointer: coarse) {
  :where(button, .btn, input[type="submit"], input[type="button"], select,
         .auth-submit, .nav-item, .tab, .chip) {
    min-height: 44px;
  }
  :where(input[type="text"], input[type="email"], input[type="password"],
         input[type="number"], input[type="search"], textarea) {
    min-height: 44px;
    font-size: max(16px, var(--fs-md));
  }
}

@media (min-width: 1440px) {
  :root { --container: 1280px; }
}

@media (max-height: 520px) and (orientation: landscape) {
  :root { --sp-11: 40px; --sp-10: 32px; --sp-9: 28px; }
}

html { overscroll-behavior-y: contain; }
body { overscroll-behavior-y: contain; }

:where(button, .btn, a.btn, .fb-btn, .nav-item, .nav-link, .tab, .chip,
       .btn-play, [role="button"], input[type="submit"], input[type="button"]) {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

@media (hover: none) {
  :where(button, .btn, a.btn, .fb-btn, .nav-item, .tab, [role="button"]):active {
    transform: scale(.97);
    transition: transform 60ms ease-out;
  }
}

:where(p, h1, h2, h3, li, td, code, .fb-count) {
  user-select: text;
  -webkit-user-select: text;
}

@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: 140ms; }
::view-transition-new(root) { animation-duration: 140ms; }

@media (display-mode: standalone) {
  .nav { border-bottom-color: transparent; }
  body { -webkit-user-select: none; user-select: none; }
  :where(p, h1, h2, h3, li, td, code, input, textarea) {
    -webkit-user-select: text; user-select: text;
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  :where(button, .btn, .nav-item):active { transform: none; }
}

@media (max-width: 480px) {
  :root {
    --fs-2xs:  12px;
    --fs-xs:   12px;
    --fs-sm:   13px;
    --fs-base: 14px;
  }
}

@media (pointer: coarse) {
  :where(.link-blue) { min-height: 44px; }
}

.av-photo { background-size: cover !important; background-position: center !important; color: transparent !important; }
.av-emoji { font-size: 1.5em; line-height: 1; }

.av-bg-0 { background: linear-gradient(135deg,#ffd34e,var(--sub-gold)) !important; }
.av-bg-1 { background: linear-gradient(135deg,#7ed6df,#22a6b3) !important; }
.av-bg-2 { background: linear-gradient(135deg,#ff9ff3,#f368e0) !important; }
.av-bg-3 { background: linear-gradient(135deg,#badc58,#6ab04c) !important; }
.av-bg-4 { background: linear-gradient(135deg,#ffbe76,#f0932b) !important; }
.av-bg-5 { background: linear-gradient(135deg,#74b9ff,#0984e3) !important; }
.av-bg-6 { background: linear-gradient(135deg,#a29bfe,#6c5ce7) !important; }
.av-bg-7 { background: linear-gradient(135deg,#ff7675,#d63031) !important; }
.av-bg-8 { background: linear-gradient(135deg,#55efc4,#00b894) !important; }
.av-bg-9 { background: linear-gradient(135deg,#fab1a0,#e17055) !important; }

.join-pick-av {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sub); font-weight: 800; font-size: var(--fs-2xl);
  color: #fff;
}