/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties;
@layer legacy, theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial,
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace;
    --spacing: 0.25rem;
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --color-muted: var(--muted);
  }
}
@layer utilities;
:root {
  --background: #ffffff;
  --foreground: #06062c;
  --card: #ffffff;
  --card-foreground: #06062c;
  --popover: #ffffff;
  --popover-foreground: #06062c;
  --primary: #0284c7;
  --primary-foreground: #ffffff;
  --primary-hover: #249ed4;
  --primary-active: #0065a1;
  --secondary: #f6f6f6;
  --secondary-foreground: #06062c;
  --muted: #f6f6f6;
  --muted-foreground: #808080;
  --accent: #f6f6f6;
  --accent-foreground: #06062c;
  --destructive: #dc2a2a;
  --destructive-foreground: #ffffff;
  --success: #22856f;
  --warning: #ffb700;
  --border: #e5e5e5;
  --input: #c4c4c4;
  --ring: #0284c7;
  --chart-1: oklch(0.872 0.007 219.6);
  --chart-2: oklch(0.56 0.021 213.5);
  --chart-3: oklch(0.45 0.017 213.2);
  --chart-4: oklch(0.378 0.015 216);
  --chart-5: oklch(0.275 0.011 216.9);
  --radius: 5px;
  --radius-card: 8px;
  --radius-table: 16px;
  --radius-pill: 999px;
  --control-micro: 24px;
  --control-compact: 32px;
  --control: 40px;
  --control-lg: 48px;
  --shadow: 0 2px 0 rgba(128, 128, 128, 0.25);
  --shadow-card: 0 1px 2px rgba(6, 6, 44, 0.05), 0 1px 3px rgba(6, 6, 44, 0.04);
  --shadow-raise: 0 4px 12px rgba(6, 6, 44, 0.1), 0 1px 3px rgba(6, 6, 44, 0.06);
  --focus-ring: 0 0 0 3px var(--primary);
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --text-eyebrow: 0.6875rem;
  --text-caption: 0.75rem;
  --text-control: 0.8125rem;
  --text-body: 0.875rem;
  --text-lede: 0.95rem;
  --text-title: 1rem;
  --text-h3: 1.125rem;
  --text-h2: 1.375rem;
  --text-h1: clamp(1.6875rem, 3vw, 2.375rem);
  --leading-body: 1.45;
  --leading-tight: 1.1;
  --tracking-eyebrow: 0.07em;
  --tracking-control: 0.02em;
  --tracking-title: -0.01em;
  --tracking-display: -0.025em;
  --weight-body: 400;
  --weight-medium: 500;
  --weight-strong: 600;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --page-max: 1440px;
  --page-gutter: 24px;
  --nav-height: 64px;
}
.dark {
  --background: oklch(0.148 0.004 228.8);
  --foreground: oklch(0.987 0.002 197.1);
  --card: oklch(0.218 0.008 223.9);
  --card-foreground: oklch(0.987 0.002 197.1);
  --popover: oklch(0.218 0.008 223.9);
  --popover-foreground: oklch(0.987 0.002 197.1);
  --primary: #38bdf8;
  --primary-foreground: #0b1220;
  --primary-hover: #5ecbfa;
  --primary-active: #1ea8ec;
  --secondary: oklch(0.274 0.006 286.033);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.275 0.011 216.9);
  --muted-foreground: oklch(0.723 0.014 214.4);
  --accent: oklch(0.275 0.011 216.9);
  --accent-foreground: oklch(0.987 0.002 197.1);
  --destructive: oklch(0.704 0.191 22.216);
  --destructive-foreground: oklch(0.982 0.018 155.826);
  --success: #2fa98d;
  --warning: #ffb700;
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: #38bdf8;
  --chart-1: oklch(0.872 0.007 219.6);
  --chart-2: oklch(0.56 0.021 213.5);
  --chart-3: oklch(0.45 0.017 213.2);
  --chart-4: oklch(0.378 0.015 216);
  --chart-5: oklch(0.275 0.011 216.9);
  --focus-ring: 0 0 0 3px var(--primary);
}
@layer components {
  .btn, input[type="submit"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp), input[type="button"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp), input[type="reset"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp), button:not(.stamp):not(.btn):not(.back-btn):not(.forward-btn):not(.remove-btn):not(.close-btn):not(.linkify):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.shield-toggle):not(.page-step):not(.page-num) {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
    gap: 0.5rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background-image: none;
    font-family: var(--font-sans);
    font-weight: 500;
    line-height: 1;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
    &:focus-visible {
      outline: none;
      box-shadow: var(--focus-ring);
    }
  }
  .btn:not(.primary):not(.outlined):not(.red):not(.admin):not(.green):not(.linkify):not(.white):not(.secondary):not(.swatch), input[type="button"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp):not(.primary), input[type="reset"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp):not(.primary), button:not(.stamp):not(.btn):not(.back-btn):not(.forward-btn):not(.remove-btn):not(.close-btn):not(.linkify):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.shield-toggle):not(.page-step):not(.page-num):not(.primary) {
    background-color: var(--background);
    color: var(--primary);
    border-color: var(--input);
    &:hover {
      border-color: var(--primary);
      background-color: var(--primary);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in srgb, var(--primary) 6%, white);
      }
    }
  }
  .btn.primary, button.primary, input.primary, input[type="submit"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp):not(.outlined):not(.secondary):not(.white):not(.red):not(.admin):not(.green) {
    background-color: var(--primary);
    color: var(--primary-foreground);
    border-color: transparent;
    &:hover {
      background-color: var(--primary-hover);
    }
    &:active {
      background-color: var(--primary-active);
    }
  }
  .btn:not(.small):not(.micro):not(.large), input[type="submit"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp), input[type="button"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp), input[type="reset"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp), button:not(.stamp):not(.btn):not(.back-btn):not(.forward-btn):not(.remove-btn):not(.close-btn):not(.linkify):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.shield-toggle):not(.page-step):not(.page-num) {
    height: 2.5rem;
    padding: 0 1rem;
    font-size: 0.95rem;
  }
  :is(.btn, input[type="submit"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp), input[type="button"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp), input[type="reset"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp), button:not(.stamp):not(.btn):not(.back-btn):not(.forward-btn):not(.remove-btn):not(.close-btn):not(.linkify):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.shield-toggle):not(.page-step):not(.page-num)).red:not(.outlined), :is(.btn, input[type="submit"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp), input[type="button"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp), input[type="reset"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp), button:not(.stamp):not(.btn):not(.back-btn):not(.forward-btn):not(.remove-btn):not(.close-btn):not(.linkify):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.shield-toggle):not(.page-step):not(.page-num)).admin:not(.outlined) {
    background-color: var(--destructive);
    color: var(--destructive-foreground);
    border-color: transparent;
    &:hover {
      background-color: var(--destructive);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in srgb, var(--destructive) 85%, white);
      }
    }
  }
  :is(.btn, input[type="submit"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp), input[type="button"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp), input[type="reset"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp), button:not(.stamp):not(.btn):not(.back-btn):not(.forward-btn):not(.remove-btn):not(.close-btn):not(.linkify):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.shield-toggle):not(.page-step):not(.page-num)).outlined {
    background-color: transparent;
    color: var(--primary);
    border-color: var(--input);
    &:hover {
      border-color: var(--primary);
      background-color: var(--primary);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in srgb, var(--primary) 6%, white);
      }
    }
    &.gray {
      color: var(--muted-foreground);
      &:hover {
        border-color: var(--muted-foreground);
        background-color: var(--muted);
      }
    }
    &.green {
      color: var(--success);
      &:hover {
        border-color: var(--success);
        background-color: var(--success);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in srgb, var(--success) 6%, white);
        }
      }
    }
    &.red {
      color: var(--destructive);
      &:hover {
        border-color: var(--destructive);
        background-color: var(--destructive);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in srgb, var(--destructive) 6%, white);
        }
      }
    }
  }
  :is(.btn, input[type="submit"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp), input[type="button"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp), input[type="reset"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp), button:not(.stamp):not(.btn):not(.back-btn):not(.forward-btn):not(.remove-btn):not(.close-btn):not(.linkify):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.shield-toggle):not(.page-step):not(.page-num)).white {
    background-color: var(--background);
    color: var(--foreground);
    border-color: var(--input);
    &:hover {
      background-color: var(--muted);
    }
  }
  :is(.btn, input[type="submit"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp), input[type="button"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp), input[type="reset"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp), button:not(.stamp):not(.btn):not(.back-btn):not(.forward-btn):not(.remove-btn):not(.close-btn):not(.linkify):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.shield-toggle):not(.page-step):not(.page-num)).secondary {
    background-color: var(--background);
    color: var(--muted-foreground);
    border-color: var(--border);
    &:hover {
      color: var(--foreground);
      border-color: var(--input);
    }
  }
  :is(.btn, input[type="submit"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp), input[type="button"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp), input[type="reset"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp), button:not(.stamp):not(.btn):not(.back-btn):not(.forward-btn):not(.remove-btn):not(.close-btn):not(.linkify):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.shield-toggle):not(.page-step):not(.page-num)).swatch {
    background-color: var(--primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--primary) 10%, white);
    }
    color: var(--primary);
    border-color: transparent;
    &:hover {
      background-color: var(--primary);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in srgb, var(--primary) 16%, white);
      }
    }
  }
  :is(.btn, input[type="submit"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp), input[type="button"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp), input[type="reset"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp), button:not(.stamp):not(.btn):not(.back-btn):not(.forward-btn):not(.remove-btn):not(.close-btn):not(.linkify):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.shield-toggle):not(.page-step):not(.page-num)).linkify {
    background-color: transparent;
    color: var(--primary);
    text-underline-offset: 4px;
    &:hover {
      @media (hover: hover) {
        background-color: transparent;
      }
    }
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
    &.secondary {
      color: var(--muted-foreground);
      &:hover {
        @media (hover: hover) {
          color: var(--primary);
        }
      }
    }
  }
  :is(.btn, input[type="submit"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp), input[type="button"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp), input[type="reset"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp), button:not(.stamp):not(.btn):not(.back-btn):not(.forward-btn):not(.remove-btn):not(.close-btn):not(.linkify):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.shield-toggle):not(.page-step):not(.page-num)).green:not(.outlined) {
    background-color: var(--success);
    color: #fff;
    border-color: transparent;
    &:hover {
      background-color: var(--success);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in srgb, var(--success) 85%, white);
      }
    }
  }
  :is(.btn, input[type="submit"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp), input[type="button"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp), input[type="reset"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp), button:not(.stamp):not(.btn):not(.back-btn):not(.forward-btn):not(.remove-btn):not(.close-btn):not(.linkify):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.shield-toggle):not(.page-step):not(.page-num)):disabled, :is(.btn, input[type="submit"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp), input[type="button"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp), input[type="reset"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp), button:not(.stamp):not(.btn):not(.back-btn):not(.forward-btn):not(.remove-btn):not(.close-btn):not(.linkify):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.shield-toggle):not(.page-step):not(.page-num)).disabled, :is(.btn, input[type="submit"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp), input[type="button"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp), input[type="reset"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp), button:not(.stamp):not(.btn):not(.back-btn):not(.forward-btn):not(.remove-btn):not(.close-btn):not(.linkify):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.shield-toggle):not(.page-step):not(.page-num)).unavailable {
    background-color: var(--muted);
    color: var(--muted-foreground);
    border-color: var(--border);
    cursor: not-allowed;
    pointer-events: none;
  }
  :is(.btn, input[type="submit"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp), input[type="button"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp), input[type="reset"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp), button:not(.stamp):not(.btn):not(.back-btn):not(.forward-btn):not(.remove-btn):not(.close-btn):not(.linkify):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.shield-toggle):not(.page-step):not(.page-num)).micro {
    height: 1.5rem;
    gap: 0.25rem;
    padding: 0 0.5rem;
    font-size: 0.7rem;
  }
  :is(.btn, input[type="submit"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp), input[type="button"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp), input[type="reset"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp), button:not(.stamp):not(.btn):not(.back-btn):not(.forward-btn):not(.remove-btn):not(.close-btn):not(.linkify):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.shield-toggle):not(.page-step):not(.page-num)).small {
    height: 2rem;
    gap: 0.375rem;
    padding: 0 0.75rem;
    font-size: 0.75rem;
  }
  :is(.btn, input[type="submit"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp), input[type="button"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp), input[type="reset"]:not(.linkify):not(.remove-btn):not(.close-btn):not(.back-btn):not(.forward-btn):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.page-step):not(.page-num):not(.stamp), button:not(.stamp):not(.btn):not(.back-btn):not(.forward-btn):not(.remove-btn):not(.close-btn):not(.linkify):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.shield-toggle):not(.page-step):not(.page-num)).large {
    height: 3rem;
    padding: 0 1.5rem;
    font-size: 1.2rem;
  }
  :is(.btn[class*="icon-"], input[type="submit"][class*="icon-"], input[type="button"][class*="icon-"], input[type="reset"][class*="icon-"], button:not(.stamp):not(.btn):not(.back-btn):not(.forward-btn):not(.remove-btn):not(.close-btn):not(.linkify):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.shield-toggle):not(.page-step):not(.page-num):not(.text-editor *)[class*="icon-"])::before {
    content: "";
    position: static;
    flex: none;
    width: 1.5em;
    height: 1.5em;
    background-color: currentColor;
    background-image: none;
    opacity: 1;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
  }
  :is(.btn[class*="icon-"], input[type="submit"][class*="icon-"], input[type="button"][class*="icon-"], input[type="reset"][class*="icon-"], button:not(.stamp):not(.btn):not(.back-btn):not(.forward-btn):not(.remove-btn):not(.close-btn):not(.linkify):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.shield-toggle):not(.page-step):not(.page-num):not(.text-editor *)[class*="icon-"])::after {
    content: none;
  }
  :is(.btn[class*="icon-"], input[type="submit"][class*="icon-"], input[type="button"][class*="icon-"], input[type="reset"][class*="icon-"], button:not(.stamp):not(.btn):not(.back-btn):not(.forward-btn):not(.remove-btn):not(.close-btn):not(.linkify):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.shield-toggle):not(.page-step):not(.page-num):not(.text-editor *)[class*="icon-"]).icon-play::before {
    width: 1.875em;
    height: 1.875em;
  }
  :is(.btn[class*="icon-"], input[type="submit"][class*="icon-"], input[type="button"][class*="icon-"], input[type="reset"][class*="icon-"], button:not(.stamp):not(.btn):not(.back-btn):not(.forward-btn):not(.remove-btn):not(.close-btn):not(.linkify):not(.favorite-btn):not(.star-btn):not(.tab):not(.r-disclose):not(.shield-toggle):not(.page-step):not(.page-num):not(.text-editor *)[class*="icon-"]).align-left {
    flex-direction: row-reverse;
  }
  .icon-add {
    --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>');
  }
  .icon-edit {
    --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linejoin="round"><path d="M4 20l1-4L17 4l3 3L8 19l-4 1z"/></svg>');
  }
  .icon-check, .icon-check-btn {
    --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>');
  }
  .icon-calendar {
    --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.1" stroke-linecap="round"><rect x="4" y="6" width="16" height="15" rx="2"/><path d="M4 11h16M9 3v5M15 3v5"/></svg>');
  }
  .icon-gear {
    --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.1" stroke-linecap="round"><circle cx="12" cy="12" r="3.2"/><path d="M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3M5 5l2.1 2.1M16.9 16.9L19 19M19 5l-2.1 2.1M7.1 16.9L5 19"/></svg>');
  }
  .icon-play {
    --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M8 5.5l11 6.5-11 6.5z"/></svg>');
  }
  .icon-play-outline, .icon-play-circle {
    --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M10 8.5l6 3.5-6 3.5z" fill="black" stroke="none"/></svg>');
  }
  .icon-pause-circle {
    --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M9.5 8.5v7M14.5 8.5v7"/></svg>');
  }
  .icon-admin {
    --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linejoin="round"><path d="M12 3l8 3v6c0 4.5-8 9-8 9s-8-4.5-8-9V6z"/></svg>');
  }
  .icon-script {
    --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3h9l3 3v15H6z"/><path d="M9 11h6M9 15h6"/></svg>');
  }
  .icon-escape {
    --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 4h6v6M20 4L10 14M9 5H4v15h15v-5"/></svg>');
  }
  .icon-link {
    --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round"><path d="M10 14a4.5 4.5 0 010-6.4l2.6-2.6a4.5 4.5 0 016.4 6.4L17 13.5"/><path d="M14 10a4.5 4.5 0 010 6.4l-2.6 2.6a4.5 4.5 0 01-6.4-6.4L7 10.5"/></svg>');
  }
  .icon-peace {
    --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8.5 3.5L12 12 15.5 3.5"/><path d="M12 12v3.5a5 5 0 01-5 5h0a5 5 0 005 5"/><path d="M12 12v8.5a5 5 0 005-5V13"/></svg>');
  }
  .icon-delete {
    --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.1" stroke-linecap="round"><path d="M4 7h16M9.5 7V4h5v3M6.5 7l1 13h9l1-13"/></svg>');
  }
  .icon-x {
    --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>');
  }
  .icon-cart {
    --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 57 53"><path fill="black" d="M0,5.84031 C0,7.08297 1.04101,8.13961 2.25486,8.13961 L9.94873,8.13961 L13.7319,34.0498 C14.271,37.7099 16.2251,39.9663 19.9409,39.9663 L48.3618,39.9663 C49.5029,39.9663 50.5132,39.0796 50.5132,37.8101 C50.5132,36.5449 49.5029,35.667 48.3618,35.667 L20.4834,35.667 C19.2939,35.667 18.5625,34.8223 18.3779,33.5527 L17.9961,31.0244 L48.5425,31.0244 C52.2695,31.0244 54.2324,28.7568 54.7671,25.0635 L56.6103,12.7856 C56.6592,12.4551 56.7168,12.0469 56.7168,11.7744 C56.7168,10.3828 55.728,9.40576 54.0645,9.40576 L14.8843,9.40576 L14.4663,6.72264 C14.187,4.62304 13.332,3.56103 10.6265,3.56103 L2.25486,3.56103 C1.04101,3.56103 0,4.61327 0,5.84031 Z M17.6792,47.938 C17.6792,50.3091 19.5688,52.1699 21.9311,52.1699 C24.2822,52.1699 26.1587,50.3091 26.1587,47.938 C26.1587,45.5957 24.2822,43.7104 21.9311,43.7104 C19.5688,43.7104 17.6792,45.5957 17.6792,47.938 Z M40.2603,47.938 C40.2603,50.3091 42.1655,52.1699 44.5078,52.1699 C46.8745,52.1699 48.7554,50.3091 48.7554,47.938 C48.7554,45.5957 46.8745,43.7104 44.5078,43.7104 C42.1655,43.7104 40.2603,45.5957 40.2603,47.938 Z"/></svg>');
  }
  .icon-podcast {
    --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.1" stroke-linecap="round"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5.5 11a6.5 6.5 0 0013 0M12 17.5V21"/></svg>');
  }
  .icon-youtube {
    --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><rect x="3" y="6" width="18" height="13" rx="3.5"/><path d="M10.5 9.5l5 3-5 3z" fill="black" stroke="none"/></svg>');
  }
  .icon-waveform {
    --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round"><path d="M5 10v4M9 6v12M13 9v6M17 5v14M21 11v2"/></svg>');
  }
  .icon-sparkles {
    --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8zM19 15l.9 2.6L22.5 18.5l-2.6.9L19 22l-.9-2.6-2.6-.9 2.6-.9z"/></svg>');
  }
  .icon-print {
    --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.1" stroke-linejoin="round"><path d="M7 8V3.5h10V8"/><rect x="4" y="8" width="16" height="8" rx="2"/><rect x="7" y="13" width="10" height="7"/></svg>');
  }
  .icon-show-profile {
    --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round"><circle cx="12" cy="8" r="3.6"/><path d="M5 20.5a7 7 0 0114 0"/></svg>');
  }
  .icon-progress {
    --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.1"><circle cx="12" cy="12" r="8.5"/><path d="M12 3.5a8.5 8.5 0 010 17z" fill="black" stroke="none"/></svg>');
  }
  .player button {
    border-radius: 9999px !important;
    padding: 0 !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
  }
  .player button.large {
    width: 3.5rem !important;
    height: 3.5rem !important;
  }
  .player.audio button {
    background-color: var(--primary) !important;
    border-color: transparent !important;
    color: var(--primary-foreground);
    &:hover {
      background-color: var(--primary-hover) !important;
    }
  }
  .player.audio button::before {
    opacity: 0;
  }
  .player.audio button::after {
    opacity: 1;
  }
  .player.video .btn-holder button {
    background-color: transparent !important;
    border: 0 !important;
    width: 4rem !important;
    height: 4rem !important;
  }
  .player.video.small .btn-holder button {
    width: 2rem !important;
    height: 2rem !important;
  }
  .back-btn, .forward-btn {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
    gap: 0.5rem;
    height: 2.5rem;
    padding: 0 1rem;
    border: 1px solid var(--input);
    border-radius: var(--radius);
    background-color: var(--background);
    background-image: none;
    color: var(--foreground);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1;
    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
    &:hover {
      background-color: var(--muted);
      border-color: var(--muted-foreground);
    }
    &:focus-visible {
      outline: none;
      box-shadow: var(--focus-ring);
    }
    &.large {
      height: 3rem;
      padding: 0 1.5rem;
      font-size: 1.2rem;
    }
  }
  .back-btn::before, .forward-btn::after {
    content: "";
    position: static;
    flex: none;
    width: 1.5em;
    height: 1.5em;
    background-color: currentColor;
    background-image: none;
    opacity: 1;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
  }
  .back-btn {
    --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 5.5L8 12l6.5 6.5"/></svg>');
  }
  .forward-btn {
    --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 5.5L16 12l-6.5 6.5"/></svg>');
  }
  .close-btn {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background-color: transparent;
    background-image: none;
    color: var(--muted-foreground);
    transition: background-color 0.15s, color 0.15s;
    &:hover {
      background-color: var(--muted);
      color: var(--foreground);
    }
    &:focus-visible {
      outline: none;
      box-shadow: var(--focus-ring);
    }
    &::before {
      content: "";
      position: static;
      flex: none;
      width: 1.4em;
      height: 1.4em;
      background-color: currentColor;
      background-image: none;
      opacity: 1;
      -webkit-mask: var(--icon) center / contain no-repeat;
      mask: var(--icon) center / contain no-repeat;
    }
    &::after {
      content: none;
    }
    --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>');
  }
  .close-btn.slim {
    --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round"><path d="m4.5 4.5 7 7m0-7-7 7"/></svg>');
  }
  .social-media a.btn.mask.btn-instagram, .social-media a.btn.mask.btn-twitter, .social-media a.btn.mask.btn-facebook {
    padding-left: 2.75rem;
  }
  .social-media a.btn.mask.btn-tiktok {
    padding-left: 2.5rem;
  }
  input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="tel"], input[type="date"], textarea, select {
    background-color: var(--background);
    color: var(--foreground);
    border: 1px solid var(--input);
    border-radius: var(--radius);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    box-shadow: 0 0 0 0 var(--primary);
    transition: box-shadow 0.15s, border-color 0.15s, background-color 0.15s, color 0.15s;
    &::placeholder {
      color: var(--muted-foreground);
    }
    &:focus {
      outline: none;
      border-color: var(--primary);
      color: var(--primary);
      box-shadow: var(--focus-ring);
      background-color: var(--background);
    }
    &:disabled {
      background-color: var(--muted);
      color: var(--muted-foreground);
      border-color: var(--border);
      cursor: not-allowed;
    }
  }
  input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="tel"], input[type="date"], select {
    height: 2.5rem;
    padding: 0 0.75rem;
    &.small {
      height: 2rem;
      font-size: 0.75rem;
    }
    &.large {
      height: 3rem;
      font-size: 1.2rem;
    }
  }
  textarea {
    padding: 0.5rem 0.75rem;
  }
  input.code {
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
  }
  select {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="grey" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M7 10l5 5 5-5"/></svg>');
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.25em;
  }
  input[type="file"] {
    font: 400 0.75rem var(--font-sans);
    color: var(--muted-foreground);
    &::before {
      content: none;
    }
    &::-webkit-file-upload-button {
      display: inline-flex;
    }
    &::file-selector-button {
      display: inline-flex;
      align-items: center;
      height: 2rem;
      margin-right: 0.75rem;
      padding: 0 0.75rem;
      background: var(--background);
      color: var(--primary);
      border: 1px solid var(--input);
      border-radius: var(--radius);
      font: 500 0.75rem var(--font-sans);
      cursor: pointer;
    }
    &::file-selector-button:hover {
      border-color: var(--primary);
    }
    &:focus-visible {
      outline: none;
      box-shadow: var(--focus-ring);
      border-radius: var(--radius);
    }
  }
}
.tab-bar {
  gap: 1rem;
  border-bottom: 1px solid var(--border);
}
.tab-bar .tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.625rem 0.5rem;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
  color: var(--muted-foreground);
  font-size: var(--text-lede);
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.tab-bar .tab.selected {
  color: var(--primary);
  border-bottom-color: var(--primary);
  background: transparent;
  box-shadow: none;
}
.tab-bar .tab:hover {
  color: var(--foreground);
}
.tab-bar .tab:first-child {
  margin-left: 0;
}
@layer components {
  ul.exclusive-control {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    background-color: var(--muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    gap: 3px;
    margin: 0;
    padding: 3px;
    list-style: none;
    width: fit-content;
  }
  .exclusive-control > a {
    display: flex;
    border: 0;
    text-decoration: none;
  }
  .exclusive-control li {
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    height: 32px;
    padding: 0 0.8125rem;
    border-radius: 4px;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--muted-foreground);
    background-color: transparent;
    border: 0;
    text-align: center;
    transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
  }
  .exclusive-control li.selected {
    background-color: var(--background);
    color: var(--foreground);
    box-shadow: var(--shadow-card);
    pointer-events: none;
  }
  .exclusive-control li:not(.selected):hover {
    color: var(--foreground);
  }
  .stamp {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 0.5rem;
    border-radius: var(--radius);
    background-color: var(--muted);
    color: var(--foreground);
    border: 1px solid var(--border);
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    &.green {
      background-color: var(--success);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in srgb, var(--success) 12%, white);
      }
      color: var(--success);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in srgb, var(--success) 80%, var(--foreground));
      }
      border-color: var(--success);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in srgb, var(--success) 30%, white);
      }
    }
    &.red {
      background-color: var(--destructive);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in srgb, var(--destructive) 10%, white);
      }
      color: var(--destructive);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in srgb, var(--destructive) 85%, var(--foreground));
      }
      border-color: var(--destructive);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in srgb, var(--destructive) 28%, white);
      }
    }
    &.blue {
      background-color: var(--primary);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in srgb, var(--primary) 10%, white);
      }
      color: var(--primary);
      border-color: var(--primary);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in srgb, var(--primary) 28%, white);
      }
    }
    &.pink {
      background-color: color-mix(in srgb, #ff2d87 10%, white);
      color: #ff2d87;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in srgb, #ff2d87 80%, var(--foreground));
      }
      border-color: color-mix(in srgb, #ff2d87 28%, white);
    }
    &.yellow {
      background-color: var(--warning);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in srgb, var(--warning) 14%, white);
      }
      color: var(--warning);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in srgb, var(--warning) 45%, var(--foreground));
      }
      border-color: var(--warning);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in srgb, var(--warning) 35%, white);
      }
    }
    &.small {
      height: 18px;
      padding: 0 0.25rem;
      font-size: 0.62rem;
    }
    &.admin {
      background-color: #ff2d87;
      background-image: none;
      color: #fff;
      border-color: transparent;
    }
  }
  .swatch {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 26px;
    padding: 0 0.75rem;
    border-radius: 9999px;
    background-color: var(--background);
    color: var(--foreground);
    border: 0;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    &.dotted {
      padding-left: 0.5rem;
      &::before {
        content: "";
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background-color: currentColor;
        flex: none;
      }
    }
    &.green {
      background-color: var(--success);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in srgb, var(--success) 12%, white);
      }
      color: var(--success);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in srgb, var(--success) 80%, var(--foreground));
      }
    }
    &.blue {
      background-color: var(--primary);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in srgb, var(--primary) 10%, white);
      }
      color: var(--primary);
    }
    &.red {
      background-color: var(--destructive);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in srgb, var(--destructive) 10%, white);
      }
      color: var(--destructive);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in srgb, var(--destructive) 85%, var(--foreground));
      }
    }
    &.pink {
      background-color: color-mix(in srgb, #ff2d87 10%, white);
      color: #ff2d87;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in srgb, #ff2d87 80%, var(--foreground));
      }
    }
    &.yellow {
      background-color: var(--warning);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in srgb, var(--warning) 14%, white);
      }
      color: var(--warning);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in srgb, var(--warning) 45%, var(--foreground));
      }
    }
    &.gray {
      background-color: var(--muted);
      color: var(--muted-foreground);
    }
    &.small {
      height: 20px;
      font-size: 0.7rem;
    }
  }
  .show-card .swatch-holder {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.5rem;
    height: 1.5rem;
    overflow: hidden;
    .swatch {
      height: 20px;
      border: 0;
      color: rgba(255, 255, 255, 0.9);
      background-color: rgba(255, 255, 255, 0.25);
      text-transform: capitalize;
    }
  }
  .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--muted-foreground);
    &.green {
      background-color: var(--success);
    }
    &.red {
      background-color: var(--destructive);
    }
    &.yellow {
      background-color: var(--warning);
    }
  }
  .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    height: 26px;
    padding: 0 0.75rem;
    border-radius: 9999px;
    background-color: var(--muted);
    background-image: none;
    color: var(--foreground);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    text-transform: none;
    white-space: nowrap;
    &[class*="icon-"]::before {
      content: "";
      flex: none;
      width: 1.1em;
      height: 1.1em;
      background-color: currentColor;
      background-image: none;
      -webkit-mask: var(--icon) center / contain no-repeat;
      mask: var(--icon) center / contain no-repeat;
    }
    &.green {
      background-color: var(--success);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in srgb, var(--success) 12%, white);
      }
      color: var(--success);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in srgb, var(--success) 80%, var(--foreground));
      }
    }
    &.red {
      background-color: var(--destructive);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in srgb, var(--destructive) 10%, white);
      }
      color: var(--destructive);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in srgb, var(--destructive) 85%, var(--foreground));
      }
    }
    &.yellow {
      background-color: var(--warning);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in srgb, var(--warning) 14%, white);
      }
      color: var(--warning);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in srgb, var(--warning) 45%, var(--foreground));
      }
    }
    &.gray {
      background-color: var(--muted);
      color: var(--muted-foreground);
    }
  }
  a.status-badge:hover {
    box-shadow: none;
    filter: brightness(0.97);
  }
  table {
    border-radius: var(--radius-table);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-border-style: solid;
    border-style: solid;
    border-color: var(--border);
    background-color: var(--card);
    width: 100%;
    border-spacing: 0;
    border-collapse: separate;
    thead {
      position: sticky;
      top: 0;
      z-index: 10;
      &.transparent th {
        background-color: transparent;
      }
      &.no-dividers th + th::before {
        display: none;
      }
      th {
        background-color: var(--muted);
        padding-inline: calc(var(--spacing) * 4);
        padding-block: calc(var(--spacing) * 3);
        vertical-align: middle;
        position: relative;
        color: var(--muted-foreground);
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        text-align: left;
        line-height: 1.25;
        border: 0;
        border-bottom: 1px solid var(--border);
        transition: color 0.15s ease, border-color 0.15s ease;
        &:first-child {
          border-top-left-radius: calc(var(--radius-table) - 1px);
        }
        &:last-child {
          border-top-right-radius: calc(var(--radius-table) - 1px);
        }
        & + th::before {
          content: "";
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 1px;
          height: 1.25em;
          background-color: var(--border);
        }
        &[data-sortable] {
          position: relative;
          cursor: pointer;
          padding-right: 1.75rem;
          &::after {
            content: "";
            position: absolute;
            top: 50%;
            right: 0.5rem;
            width: 1rem;
            height: 1rem;
            transform: translateY(-50%);
            opacity: 0;
            transition: opacity 0.15s;
            background-color: var(--muted-foreground);
            -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E") center / contain no-repeat;
          }
          &:not(.asc):not(.desc):not([aria-sort]):hover::after, &:not(.asc):not(.desc):not([aria-sort]):focus-visible::after {
            opacity: 1;
            background-color: var(--foreground);
          }
        }
        &.asc::after, &.dir-asc::after, &[aria-sort="ascending"]::after {
          opacity: 1;
          background-color: var(--primary);
          -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E");
        }
        &.desc::after, &.dir-desc::after, &[aria-sort="descending"]::after {
          opacity: 1;
          background-color: var(--primary);
          -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
        }
        &.active, &[aria-sort] {
          color: var(--primary);
          border-color: var(--primary);
        }
        &.shrink {
          width: 1%;
        }
        &.grow {
          width: 100%;
        }
        &.align-right {
          text-align: right;
        }
        &.thin {
          line-height: 0.5rem;
        }
      }
    }
    tbody {
      td {
        padding-inline: calc(var(--spacing) * 4);
        padding-block: calc(var(--spacing) * 3);
        vertical-align: middle;
        line-height: 1.5;
        border: 0;
        border-bottom: 1px solid var(--border);
        img {
          vertical-align: middle;
        }
        form {
          display: inline;
        }
        &:has(> img.thumb:only-child), &:has(> a:only-child > img.thumb:only-child) {
          width: 1%;
          padding-right: 0.25rem;
        }
        &.shrink {
          width: 1%;
        }
        &.grow {
          width: 100%;
        }
        &.align-right {
          text-align: right;
        }
        &.align-top {
          vertical-align: top;
        }
        &.sticky {
          position: sticky;
          left: 0;
          background-color: var(--card);
        }
        &.overflow-hidden {
          max-width: 15rem;
          overflow-y: hidden;
          white-space: nowrap;
        }
        .label {
          font-size: var(--text-sm);
          line-height: var(--tw-leading, var(--text-sm--line-height));
          --tw-font-weight: var(--font-weight-semibold);
          font-weight: var(--font-weight-semibold);
          line-height: 1.625;
        }
        progress, .progress-segmented-bar {
          display: block;
          margin-top: 0.25rem;
          width: 100%;
          min-width: 12rem;
          --control-progress-size: 0.5rem;
          --control-progress-background-color: var(--muted);
          --control-progress-foreground-color: var(--primary);
        }
        .table-icon-x, .table-icon-check, .table-icon-play, .table-icon-youtube, .table-icon-alert {
          display: inline-block;
          vertical-align: middle;
          width: 1.5rem;
          height: 1.5rem;
          -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
          -webkit-mask-position: center;
          mask-position: center;
          -webkit-mask-size: 1.25rem;
          mask-size: 1.25rem;
        }
        .table-icon-x {
          background-color: var(--destructive);
          -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
        }
        .table-icon-check {
          background-color: var(--success);
          -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
        }
        .table-icon-play {
          background-color: var(--primary);
          -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M6 3v18l15-9z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M6 3v18l15-9z'/%3E%3C/svg%3E");
        }
        .table-icon-youtube {
          background-color: var(--destructive);
          -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17'/%3E%3Cpath d='m10 15 5-3-5-3z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17'/%3E%3Cpath d='m10 15 5-3-5-3z'/%3E%3C/svg%3E");
        }
        .table-icon-alert {
          background-color: var(--muted-foreground);
          -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
        }
      }
      tr:hover td {
        background-color: var(--muted);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--muted) 50%, transparent);
        }
      }
      tr:last-child td {
        border-bottom: 0;
      }
      td.empty-state-cell {
        padding: 0;
        border-bottom: 0;
      }
      tr:hover td.empty-state-cell {
        background-color: var(--background);
      }
      tr:has(+ tr.notes-row:not(.hidden)) td {
        border-bottom: none;
      }
      tr.notes-row td {
        border-top: none;
        padding: 0 1rem;
        .note, p {
          width: 100%;
        }
      }
      &.zebra tr:nth-child(odd), &.zebra-pairs tr:nth-child(4n+1), &.zebra-pairs tr:nth-child(4n+2) {
        background-color: var(--card);
        td.yellow-tint {
          background-color: #facc15;
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, #facc15 30%, var(--card));
          }
        }
        td.pink-tint {
          background-color: #f9a8d4;
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, #f9a8d4 30%, var(--card));
          }
        }
        td.green-tint {
          background-color: #86efac;
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, #86efac 30%, var(--card));
          }
        }
      }
      &.zebra tr:nth-child(even), &.zebra-pairs tr:nth-child(4n+3), &.zebra-pairs tr:nth-child(4n+4) {
        background-color: var(--muted);
        td.yellow-tint {
          background-color: #facc15;
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, #facc15 20%, var(--muted));
          }
        }
        td.pink-tint {
          background-color: #f9a8d4;
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, #f9a8d4 20%, var(--muted));
          }
        }
        td.green-tint {
          background-color: #86efac;
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, #86efac 20%, var(--muted));
          }
        }
      }
    }
    &:not(:has(tfoot)) tbody tr:last-child td:first-child {
      border-bottom-left-radius: calc(var(--radius-table) - 1px);
    }
    &:not(:has(tfoot)) tbody tr:last-child td:last-child {
      border-bottom-right-radius: calc(var(--radius-table) - 1px);
    }
    tfoot {
      tr:last-child td:first-child {
        border-bottom-left-radius: calc(var(--radius-table) - 1px);
      }
      tr:last-child td:last-child {
        border-bottom-right-radius: calc(var(--radius-table) - 1px);
      }
      td {
        background-color: var(--card);
        padding-inline: calc(var(--spacing) * 4);
        padding-block: calc(var(--spacing) * 3);
        vertical-align: middle;
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        text-align: left;
        white-space: nowrap;
        border: 0;
        border-top: 1px solid var(--border);
      }
    }
  }
  @media (max-width: 40rem) {
    table {
      width: auto;
      margin: 0 -1rem;
    }
  }
  input[type="checkbox"]:not(.label-only), input[type="radio"]:not(.label-only) {
    -webkit-appearance: none;
    appearance: none;
    display: inline-grid;
    place-content: center;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin: 0;
    vertical-align: middle;
    cursor: pointer;
    background-color: var(--background);
    border: 1px solid var(--input);
    box-shadow: 0 0 0 0 var(--primary);
    transition: background-color 0.12s ease-out, border-color 0.12s ease-out, box-shadow 0.12s ease-out;
    &:checked {
      background-color: var(--primary);
      border-color: var(--primary);
    }
    &.submitted:checked {
      background-color: var(--success);
      border-color: var(--success);
    }
    &:hover:not(:disabled) {
      border-color: var(--primary);
    }
    &:focus-visible {
      outline: none;
      box-shadow: var(--focus-ring);
    }
    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }
  input[type="checkbox"]:not(.label-only):not(.switch) {
    border-radius: calc(var(--radius) * 0.5);
    &:checked::before {
      content: "";
      width: 0.7rem;
      height: 0.7rem;
      background-color: var(--primary-foreground);
      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
    }
  }
  input[type="radio"]:not(.label-only) {
    border-radius: 9999px;
    &::before {
      content: "";
      width: 0.5rem;
      height: 0.5rem;
      margin: 0;
      border: 0;
      border-radius: 9999px;
      background-color: transparent;
      background-image: none;
    }
    &:checked::before {
      background-color: var(--primary-foreground);
    }
  }
  input[type="checkbox"].switch {
    display: inline-block;
    position: relative;
    width: 2rem;
    height: 1.15rem;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background-color: var(--input);
    transition: background-color 0.15s ease;
    &::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 2px;
      width: 1rem;
      height: 1rem;
      border-radius: 9999px;
      background-color: #fff;
      transform: translateY(-50%);
      transition: left 0.15s ease;
      box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
      -webkit-mask: none;
      mask: none;
    }
    &:checked {
      background-color: var(--primary);
    }
    &:checked::before {
      left: calc(100% - 1rem - 2px);
    }
  }
  input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 1rem;
    margin: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
  }
  input[type="range"]::-webkit-slider-runnable-track {
    height: 0.75rem;
    border-radius: 9999px;
    background: var(--muted);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklab, var(--muted) 88%, var(--foreground));
    }
  }
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1rem;
    height: 1rem;
    margin-top: -2px;
    border-radius: 9999px;
    background: #fff;
    border: 1px solid var(--primary);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.1);
    transition: box-shadow 0.12s ease-out;
  }
  input[type="range"]::-moz-range-track {
    height: 0.75rem;
    border-radius: 9999px;
    background: var(--muted);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklab, var(--muted) 88%, var(--foreground));
    }
  }
  input[type="range"]::-moz-range-progress {
    height: 0.75rem;
    border-radius: 9999px;
    background: var(--primary);
  }
  input[type="range"]::-moz-range-thumb {
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    background: #fff;
    border: 1px solid var(--primary);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.1);
    transition: box-shadow 0.12s ease-out;
  }
  input[type="range"]:hover::-webkit-slider-thumb, input[type="range"]:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 0 0 3px var(--primary);
  }
  input[type="range"]:hover::-moz-range-thumb, input[type="range"]:focus-visible::-moz-range-thumb {
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 0 0 3px var(--primary);
  }
  .scrubber input[type="range"], .player input[type="range"], .scrubber input[type="range"]::-webkit-slider-runnable-track, .player input[type="range"]::-webkit-slider-runnable-track, .scrubber input[type="range"]::-webkit-slider-thumb, .player input[type="range"]::-webkit-slider-thumb, .scrubber input[type="range"]:hover::-webkit-slider-thumb, .player input[type="range"]:hover::-webkit-slider-thumb, .scrubber input[type="range"]:focus-visible::-webkit-slider-thumb, .player input[type="range"]:focus-visible::-webkit-slider-thumb, .scrubber input[type="range"]::-moz-range-track, .player input[type="range"]::-moz-range-track, .scrubber input[type="range"]::-moz-range-thumb, .player input[type="range"]::-moz-range-thumb, .scrubber input[type="range"]:hover::-moz-range-thumb, .player input[type="range"]:hover::-moz-range-thumb, .scrubber input[type="range"]:focus-visible::-moz-range-thumb, .player input[type="range"]:focus-visible::-moz-range-thumb {
    all: revert-layer;
    -webkit-appearance: revert-layer;
  }
  .survey-creation-view .show-selector input[type="radio"], .show-onboarding .show-onboarding-search ul input[type="radio"], header .menu .menu-btn, .survey-creation-view .show-selector input[type="radio"]::before, .show-onboarding .show-onboarding-search ul input[type="radio"]::before, header .menu .menu-btn::before {
    all: revert-layer;
    -webkit-appearance: revert-layer;
  }
  .control-pair {
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    margin-block: 0.5rem;
    line-height: normal;
  }
  .control-pair > :first-child {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
    flex: 0 0 12rem;
    max-width: 12rem;
    text-align: right;
    white-space: normal;
  }
  .control-pair > :first-child ~ * {
    min-width: 0px;
    flex: 1;
  }
  .control-pair input:not([type="color"]):not([type="checkbox"]):not([type="radio"]), .control-pair textarea, .control-pair select {
    width: 100%;
    min-width: 0px;
    max-width: 28rem;
  }
  .control-pair .spread:has(.campaign-thumb) {
    justify-content: flex-start;
    gap: 0.5rem;
  }
  .control-pair .campaign-thumb {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
  }
  .control-pair:has(textarea) {
    align-items: flex-start;
  }
  .control-pair:has(textarea) > :first-child {
    padding-top: 0.5rem;
  }
  @media (max-width: 40rem) {
    .control-pair {
      flex-direction: column;
      align-items: stretch;
      gap: var(--spacing);
    }
    .control-pair > :first-child {
      flex-basis: auto;
      max-width: none;
      text-align: left;
    }
  }
  p.info, p.warning, p.error, p.log {
    display: block;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    border: 1px solid;
    background-image: none;
    font-size: 0.85rem;
    font-weight: 400;
  }
  p.info {
    background-color: var(--primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--primary) 7%, white);
    }
    border-color: var(--primary);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--primary) 25%, white);
    }
    color: var(--foreground);
  }
  p.warning {
    background-color: var(--warning);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--warning) 12%, white);
    }
    border-color: var(--warning);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--warning) 35%, white);
    }
    color: var(--warning);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--warning) 45%, var(--foreground));
    }
  }
  p.error {
    background-color: var(--destructive);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--destructive) 8%, white);
    }
    border-color: var(--destructive);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--destructive) 28%, white);
    }
    color: var(--destructive);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--destructive) 85%, var(--foreground));
    }
  }
  p.log {
    background-color: var(--muted);
    border-color: var(--border);
    color: var(--muted-foreground);
  }
  .box {
    background-color: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
  }
  .box.standard {
    box-shadow: var(--shadow-card);
  }
  .box.outlined {
    border: 1.5px dashed var(--input);
    background-color: transparent;
    box-shadow: none;
  }
  .box.empty-state {
    width: 100%;
    text-align: center;
    background-color: var(--muted);
    border: none;
    box-shadow: none;
    padding: 2rem;
    color: var(--muted-foreground);
    h3 {
      margin: 0 0 0.25rem;
      color: var(--foreground);
      text-transform: none;
      letter-spacing: 0;
      font-size: 1.2rem;
    }
    p {
      margin: 0;
    }
  }
  .empty-state {
    display: grid;
    place-items: center;
    min-height: 176px;
    padding: 28px 20px;
    text-align: center;
    h3 {
      margin: 0;
      color: var(--foreground);
      font-size: 1rem;
      font-weight: 600;
      letter-spacing: -0.01em;
    }
    p {
      max-width: 36ch;
      margin: 6px auto 0;
      color: var(--muted-foreground);
      font-size: 0.8125rem;
      line-height: 1.45;
    }
    .btn {
      margin-top: 16px;
    }
    &.empty-state--box {
      min-height: 196px;
      padding: 8px;
    }
    &.empty-state--progress {
      min-height: 214px;
      padding: 24px 0 28px;
      border-top: 1px dashed var(--border);
      border-bottom: 1px dashed var(--border);
    }
  }
  .box.tip-box {
    background-color: var(--primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--primary) 7%, white);
    }
    border-color: var(--primary);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--primary) 25%, white);
    }
    font-size: 0.85rem;
    box-shadow: none;
  }
  .box.tip-box.red {
    background-color: var(--destructive);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--destructive) 7%, white);
    }
    border-color: var(--destructive);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--destructive) 25%, white);
    }
    color: var(--destructive);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--destructive) 85%, var(--foreground));
    }
  }
  .box:has(> table) {
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }
  .box-header {
    border-bottom: 1px solid var(--border);
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .box .spread h3 {
    margin: 0;
    color: var(--foreground);
    text-transform: none;
    letter-spacing: 0;
    font-size: 1.2rem;
  }
  .right-column .sticky-box:not(.cart) {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    hr {
      width: 100%;
      height: 0;
      margin: 1.25rem 0;
      border: 0;
      border-top: 1px solid var(--border);
    }
  }
  .scroll {
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .scroll::-webkit-scrollbar {
    width: 6px;
  }
  .scroll::-webkit-scrollbar-thumb {
    background-color: var(--input);
    border-radius: 999px;
  }
  .scroll::-webkit-scrollbar-track {
    background-color: transparent;
  }
  .toolbar {
    display: inline-flex;
    gap: 0.5rem;
    padding: 0.5rem;
    background-color: var(--muted);
    border-radius: var(--radius-card);
  }
  progress {
    --control-progress-size: 8px;
    --control-progress-background-color: var(--border);
    --control-progress-foreground-color: var(--primary);
    border: none;
    border-radius: 9999px;
    overflow: hidden;
    &::-moz-progress-bar {
      border-radius: 9999px;
      background: var(--control-progress-foreground-color);
    }
    &.intermediate:indeterminate {
      background: linear-gradient(90deg, var(--border) 25%, var(--primary) 50%, var(--border) 75%);
      @supports (color: color-mix(in lab, red, red)) {
        background: linear-gradient(90deg, var(--border) 25%, color-mix(in srgb, var(--primary) 45%, white) 50%, var(--border) 75%);
      }
      background-size: 200% 100%;
      animation: sg-slide 1.2s linear infinite;
      &::-webkit-progress-bar {
        background: transparent;
      }
    }
  }
  @keyframes sg-slide {
    from {
      background-position: 200% 0;
    }
    to {
      background-position: 0 0;
    }
  }
  .progress-radial {
    --control-progress-radial-color: var(--primary);
    position: relative;
    isolation: isolate;
    background: conic-gradient( var(--control-progress-radial-color) calc(var(--control-progress-radial-value, 0) * 360deg), var(--border) 0 );
    color: var(--foreground);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    &::before {
      content: "";
      position: absolute;
      inset: var(--control-progress-radial-thickness, 1rem);
      z-index: -1;
      background: var(--background);
      border-radius: 50%;
      -webkit-mask: none;
      mask: none;
    }
    &::after {
      content: none;
    }
    > * {
      position: relative;
    }
  }
  .rating-stars {
    display: inline-flex;
    gap: 0.25rem;
    div {
      padding-right: 0;
    }
  }
  .star-btn {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    cursor: pointer;
    background-color: var(--input);
    background-image: none;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4 6.1 20.5l1.2-6.5L2.5 9.4l6.6-.9z"/></svg>') center / contain no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4 6.1 20.5l1.2-6.5L2.5 9.4l6.6-.9z"/></svg>') center / contain no-repeat;
    transition: background-color 0.15s, transform 0.1s;
    &:hover {
      transform: scale(1.12);
    }
    &:hover, &:hover ~ .star-btn {
      background-color: var(--warning);
    }
    &.selected {
      background-color: var(--warning);
    }
  }
  .styleguide {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .styleguide-header {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
    gap: 1.5rem;
    align-items: end;
  }
  .sg-kicker {
    margin: 0 0 0.5rem;
    color: var(--muted-foreground);
    font: 700 0.75rem/1 var(--font-sans);
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }
  .styleguide-title-group h1 {
    margin: 0;
    font-size: 2.8rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.02;
  }
  .sg-note {
    margin: 0.75rem 0 0;
    max-width: 720px;
    color: var(--muted-foreground);
    font-size: 0.875rem;
  }
  .surface-summary {
    display: grid;
    gap: 0.75rem;
    p {
      margin: 0;
      padding-top: 0.75rem;
      border-top: 2px solid var(--input);
      color: var(--muted-foreground);
      font-size: 0.875rem;
    }
    strong {
      color: var(--foreground);
    }
  }
  .styleguide section {
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .styleguide .surface-card, .styleguide .surface-band, .styleguide .surface-plain {
    padding: 1.5rem;
  }
  .styleguide .surface-card {
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-table);
  }
  .styleguide .surface-band {
    background: var(--muted);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--muted) 70%, var(--background));
    }
    border: 1px solid var(--border);
    border-radius: var(--radius-table);
  }
  .styleguide .surface-plain {
    border-top: 1px solid var(--border);
    padding-left: 0;
    padding-right: 0;
  }
  .styleguide .surface-plain.surface-first {
    border-top: none;
    padding-top: 0;
  }
  .styleguide .surface-plain h2 {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0.5rem;
  }
  .styleguide .section-intro {
    margin: 0 0 1rem;
    max-width: 720px;
    color: var(--muted-foreground);
    font-size: 0.875rem;
  }
  .philosophy-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
  .principle {
    padding-top: 0.75rem;
    border-top: 2px solid var(--input);
    p {
      margin: 0.5rem 0 0;
      color: var(--muted-foreground);
      font-size: 0.875rem;
    }
  }
  .pass-stack {
    display: grid;
    gap: 1rem;
  }
  .pass {
    padding: 1.5rem;
    background: var(--muted);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--muted) 82%, var(--background));
    }
    border: 1px solid var(--border);
    border-radius: var(--radius-table);
  }
  .pass-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    h3 {
      margin: 0;
      color: var(--foreground);
      font-size: 1.125rem;
      text-transform: none;
      letter-spacing: 0;
    }
  }
  .pass-copy {
    margin: 0.5rem 0 0;
    max-width: 640px;
    color: var(--muted-foreground);
    font-size: 0.875rem;
  }
  .pass-demo {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
  }
  .canvas-row, .surface-line, .module-footer, .escape-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }
  .canvas-row .tab-bar {
    flex: 1 1 460px;
  }
  .module-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
  }
  .date-anchor {
    display: inline-grid;
    justify-items: center;
    gap: 2px;
    min-width: 74px;
    padding: 10px 12px;
    background: var(--background);
    border: 1px solid var(--input);
    border-radius: var(--radius-card);
    color: var(--muted-foreground);
    font: 600 0.75rem/1.1 var(--font-mono);
    text-transform: uppercase;
    strong {
      color: var(--foreground);
      font-size: 0.95rem;
      line-height: 1;
    }
  }
  .module-card {
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-table);
    &.table {
      overflow: hidden;
    }
  }
  .module-pad {
    padding: 1rem;
  }
  .module-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
  }
  .tinted-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--primary) 7%, var(--background));
    }
    border: 1px solid var(--primary);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--background));
    }
    border-radius: 12px;
  }
  .mini-table {
    width: 100%;
    max-width: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    th, td {
      padding: 0.75rem 1rem;
    }
    th {
      background: var(--background);
    }
  }
  .chart-box {
    min-width: 0;
    padding: 1rem;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 12px;
    strong {
      display: block;
      margin-bottom: 0.25rem;
    }
  }
  .secondary-note {
    color: var(--muted-foreground);
    font-size: 0.8125rem;
  }
  @media (max-width: 860px) {
    .styleguide-header, .philosophy-grid, .module-row {
      grid-template-columns: 1fr;
    }
  }
  .show-header {
    display: flex;
    align-items: center;
    gap: 1.125rem;
    width: 100%;
    margin: 2rem 0 1.5rem;
    background: transparent;
    border: 0;
    padding: 0;
    box-shadow: none;
    img {
      width: 96px;
      height: 96px;
      flex: none;
      border-radius: 10px;
      object-fit: cover;
      background-color: var(--muted);
      outline: 1px solid var(--foreground);
      @supports (color: color-mix(in lab, red, red)) {
        outline: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
      }
      outline-offset: -1px;
    }
    .meta-holder {
      display: flex;
      flex-direction: column;
      gap: 0.375rem;
      flex: 1 1 auto;
      min-width: 0;
    }
    h3 {
      margin: 0;
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted-foreground);
      line-height: 1;
    }
    h1 {
      margin: 0;
      display: flex;
      gap: 0.625rem;
      align-items: center;
      flex-wrap: wrap;
      font-size: clamp(1.5rem, 2.9vw, 1.875rem);
      font-weight: 600;
      letter-spacing: -0.014em;
      line-height: 1.2;
      color: var(--foreground);
      span.overflow-ellipsis {
        min-width: 0;
        white-space: normal;
        text-overflow: clip;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        overflow-wrap: anywhere;
      }
    }
    .btn-holder {
      display: inline-flex;
      gap: 0.5rem;
      flex-wrap: wrap;
      flex: none;
      padding-top: 1px;
      .btn {
        width: auto;
        margin-top: 0;
      }
    }
  }
  .show-header + .show-metaband, .show-metaband {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: -0.75rem 0 1.5rem;
  }
  @media (max-width: 600px) {
    .show-header {
      flex-wrap: wrap;
    }
    .show-header .btn-holder {
      order: 3;
      flex: 1 1 100%;
      padding-top: 0;
    }
  }
  body.standard header {
    background-color: var(--background);
    border-bottom: 1px solid var(--border);
  }
  body.standard header .menu .logo {
    --logo-color: var(--foreground);
  }
  body.standard header .menu .logo .logomark-holder {
    display: block;
    width: 1.85rem;
    height: 2.6rem;
  }
  body.standard header .menu .logo .logo-holder {
    display: none;
  }
  body.standard header .menu .menu-img {
    color: var(--foreground);
  }
  header .menu nav {
    font-family: var(--font-sans);
  }
  header .menu .links-holder a {
    margin: 0;
  }
  @media only screen and (min-width: 50rem) {
    header .menu {
      display: flex;
      align-items: center;
      gap: 0.875rem;
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 16px;
      height: 64px;
      background: transparent;
      border: 0;
      border-radius: 0;
      box-shadow: none;
    }
    body.full-width header .menu {
      max-width: none;
    }
    header .menu .logo {
      flex: 0 0 auto;
    }
    header .menu > nav {
      flex: 1 1 auto;
      display: flex;
      align-items: center;
    }
    header .menu .links-holder {
      display: flex !important;
      align-items: center;
      gap: 0.875rem;
      width: 100%;
    }
    .nav-float {
      display: flex !important;
      align-items: center;
      gap: 2px;
    }
    .hdr-spacer {
      flex: 1 1 auto;
    }
    .links-holder .navitem, .links-holder .helplink {
      display: inline-flex;
      align-items: center;
      height: 38px;
      padding: 0 0.8125rem;
      border: 0;
      border-radius: 9999px;
      background: transparent;
      color: var(--muted-foreground);
      font-size: 0.95rem;
      font-weight: 500;
      text-decoration: none;
      white-space: nowrap;
      cursor: pointer;
      transition: color 0.16s, background 0.16s;
      &:hover {
        color: var(--foreground);
        background: var(--foreground);
        @supports (color: color-mix(in lab, red, red)) {
          background: color-mix(in srgb, var(--foreground) 4%, var(--background));
        }
        border: 0;
      }
      &.current {
        color: var(--primary);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in srgb, var(--primary) 88%, var(--foreground));
        }
        background: var(--primary);
        @supports (color: color-mix(in lab, red, red)) {
          background: color-mix(in srgb, var(--primary) 10%, var(--background));
        }
        font-weight: 600;
      }
    }
    .links-holder a.btn.icon-cart {
      height: 40px !important;
      padding: 0 0.875rem !important;
      border: 1px solid var(--primary) !important;
      border-radius: var(--radius) !important;
      background-color: var(--primary) !important;
      color: #fff !important;
      font-size: 0.875rem !important;
      font-weight: 600 !important;
      &:hover {
        background-color: var(--primary-hover) !important;
        border-color: var(--primary-hover) !important;
      }
    }
    .links-holder .avatar {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 1px solid var(--border);
      background: var(--muted);
      color: var(--foreground);
      font-size: 0.8125rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      text-decoration: none;
      &:hover {
        border-color: var(--muted-foreground);
        background: var(--foreground);
        @supports (color: color-mix(in lab, red, red)) {
          background: color-mix(in srgb, var(--foreground) 4%, var(--background));
        }
      }
    }
  }
  @media only screen and (max-width: 50rem) {
    header .menu .menu-btn:checked ~ .links-holder {
      background-color: var(--background);
    }
    header .menu .menu-btn:checked ~ .links-holder a {
      color: var(--foreground);
    }
    .links-holder .avatar {
      font-weight: 600;
    }
    header .menu .links-holder, header .menu .nav-float {
      flex-direction: column !important;
      align-items: stretch;
      gap: 0.25rem;
    }
  }
  ul.dashboard-episode-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
  }
  ul.dashboard-episode-list > li {
    position: relative;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-areas: "mark  head" "deliv deliv" "alert alert";
    column-gap: 1.125rem;
    align-items: start;
    > .anchor {
      position: absolute;
      top: 0;
      width: 0;
      height: 0;
    }
    margin: 0;
    padding: 1.125rem;
    background-color: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    line-height: normal;
    color: var(--foreground);
    transition: box-shadow 0.14s ease, border-color 0.14s ease;
    &:focus-within:not(.is-overdue) {
      border-color: var(--primary);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in srgb, var(--primary) 38%, var(--border));
      }
    }
    &.is-overdue {
      border-color: var(--destructive);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in srgb, var(--destructive) 45%, var(--border));
      }
    }
  }
  .dashboard-episode-list .read-body {
    display: contents;
  }
  .dashboard-episode-list .badge-holder {
    grid-area: mark;
    align-self: start;
    min-width: 0;
    img, .thumb {
      width: 72px;
      height: 72px;
      border-radius: var(--radius-card);
      object-fit: cover;
      background-color: var(--muted);
      outline: 1px solid var(--foreground);
      @supports (color: color-mix(in lab, red, red)) {
        outline: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
      }
      outline-offset: -1px;
    }
    .calendar-date-badge {
      display: inline-grid;
      justify-items: center;
      gap: 1px;
      width: 72px;
      height: 72px;
      padding: 8px;
      border-radius: var(--radius-card);
      background-color: var(--muted);
      border: 1px solid var(--border);
      color: var(--muted-foreground);
      font-size: 0.6875rem;
      font-weight: 600;
      text-transform: uppercase;
      line-height: 1.15;
      span:nth-child(2) {
        color: var(--foreground);
        font-size: 1.25rem;
        line-height: 1;
      }
    }
  }
  .dashboard-episode-list .read-head {
    grid-area: head;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
  }
  .dashboard-episode-list .read-id {
    flex: 1 1 260px;
    min-width: 0;
  }
  .dashboard-episode-list .meta-holder {
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.625rem;
    line-height: 1.2;
    h4 {
      margin: 0;
      font-size: 1.125rem;
      font-weight: 600;
      letter-spacing: -0.015em;
      color: var(--foreground);
      overflow-wrap: anywhere;
    }
    .pill {
      display: inline-flex;
      align-items: center;
      height: 24px;
      padding: 0 0.625rem;
      border-radius: 9999px;
      background-color: var(--muted);
      border: 1px solid var(--border);
      color: var(--muted-foreground);
      font-size: 0.75rem;
      font-weight: 500;
      white-space: nowrap;
    }
    .read-sub {
      flex-basis: 100%;
      min-width: 0;
      font-size: 0.8125rem;
      font-weight: 400;
      color: var(--muted-foreground);
    }
  }
  .dashboard-episode-list .placement-holder {
    margin-top: 0.625rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.375rem;
    .spec-item {
      display: flex;
      flex-direction: column;
      gap: 1px;
    }
    .k {
      font-size: 0.6875rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--muted-foreground);
    }
    .v {
      font-size: 0.9375rem;
      font-weight: 600;
      color: var(--foreground);
      font-variant-numeric: tabular-nums;
    }
  }
  .dashboard-episode-list .btn-holder {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4375rem;
    justify-content: flex-end;
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
    > div {
      display: contents;
    }
  }
  ul.dashboard-episode-list .read-head .btn-holder .btn {
    height: 2.5rem;
    padding: 0 0.9375rem;
    font-size: 0.875rem;
    gap: 0.4375rem;
  }
  .dashboard-episode-list .read-admin {
    position: absolute;
    top: 1.125rem;
    right: 1.125rem;
    margin: 0;
    z-index: 21;
  }
  .dashboard-episode-list .read-head:has(.read-admin) {
    padding-right: 3rem;
  }
  .dashboard-episode-list .read-admin > summary {
    list-style: none;
    cursor: pointer;
    box-sizing: border-box;
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    min-width: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--input);
    border-radius: var(--radius);
    background-color: var(--background);
    color: var(--muted-foreground);
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  }
  .dashboard-episode-list .read-admin > summary::-webkit-details-marker {
    display: none;
  }
  .dashboard-episode-list .read-admin > summary::before {
    content: "";
    width: 1.25rem;
    height: 1.25rem;
    background-color: currentColor;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linejoin="round"><path d="M12 3l8 3v6c0 4.5-8 9-8 9s-8-4.5-8-9V6z"/></svg>') center / contain no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linejoin="round"><path d="M12 3l8 3v6c0 4.5-8 9-8 9s-8-4.5-8-9V6z"/></svg>') center / contain no-repeat;
  }
  .dashboard-episode-list .read-admin > summary:hover, .dashboard-episode-list .read-admin[open] > summary {
    background-color: var(--muted);
    border-color: var(--muted-foreground);
    color: var(--foreground);
  }
  .dashboard-episode-list .read-admin-pop {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 22;
    min-width: 12.5rem;
    max-width: min(15rem, calc(100vw - 2rem));
    padding: 0.375rem;
    background-color: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-raise);
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .dashboard-episode-list .read-admin-label {
    padding: 0.3125rem 0.625rem 0.25rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--muted-foreground);
  }
  .dashboard-episode-list .read-admin-pop form {
    display: contents;
  }
  .dashboard-episode-list .read-admin-pop .btn {
    justify-content: flex-start;
    width: 100%;
    height: auto;
    padding: 0.5625rem 0.625rem;
    border: 0;
    border-radius: var(--radius);
    background-color: transparent;
    box-shadow: none;
    color: var(--foreground);
    font-size: 0.875rem;
    font-weight: 500;
    gap: 0.5625rem;
  }
  .dashboard-episode-list .read-admin-pop .btn:hover {
    background-color: var(--muted);
  }
  .dashboard-episode-list .read-actions {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4375rem;
    .btn {
      height: 2.5rem;
      padding: 0 0.9375rem;
      font-size: 0.875rem;
      gap: 0.4375rem;
    }
  }
  .dashboard-episode-list .delivery-holder {
    grid-area: deliv;
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    flex-wrap: wrap;
    &:not(:empty) {
      margin-top: 0.875rem;
      padding-top: 0.875rem;
      border-top: 1px solid var(--border);
    }
    .impressions-holder {
      flex: 1 1 240px;
      min-width: 0;
      line-height: 1.2;
    }
    .labels-holder {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 0.5rem;
      span:first-child {
        font-size: 0.875rem;
        color: var(--muted-foreground);
      }
      strong {
        font-size: 1rem;
        font-weight: 700;
        color: var(--foreground);
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.01em;
      }
    }
    .pct {
      font-size: 0.9375rem;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      color: var(--foreground);
    }
    .pct.over {
      color: var(--success);
    }
    .pct.idle {
      color: var(--muted-foreground);
    }
    progress, .progress-segmented-bar {
      --control-progress-size: 0.5rem;
      width: 100%;
      margin-top: 0.5rem;
    }
    .legend {
      display: flex;
      flex-wrap: wrap;
      gap: 0.375rem 0.875rem;
      margin-top: 0.5rem;
      font-size: 0.8125rem;
      color: var(--muted-foreground);
      font-variant-numeric: tabular-nums;
      span {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
      }
      i {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        flex: none;
        background-color: var(--legend-color);
      }
      b {
        color: var(--foreground);
        font-weight: 600;
      }
    }
  }
  .dashboard-episode-list .alert-holder {
    grid-area: alert;
    display: flex;
    flex-direction: column;
    gap: 0.4375rem;
    &:not(:empty) {
      margin-top: 0.75rem;
    }
    p {
      margin: 0;
      display: block;
      max-width: none;
      padding: 0.625rem 0.75rem;
      border: 1px solid transparent;
      border-radius: var(--radius);
      font-size: 0.8125rem;
      line-height: 1.5;
      a {
        color: inherit;
        text-decoration: underline;
        border-bottom: 0;
      }
      strong {
        font-weight: 600;
      }
    }
    p.error {
      color: var(--destructive);
      background-color: var(--destructive);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in srgb, var(--destructive) 8%, white);
      }
      border-color: var(--destructive);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in srgb, var(--destructive) 24%, white);
      }
    }
    p.warning {
      color: var(--warning);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in srgb, var(--warning) 55%, var(--foreground));
      }
      background-color: var(--warning);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in srgb, var(--warning) 14%, white);
      }
      border-color: var(--warning);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in srgb, var(--warning) 36%, white);
      }
    }
    p.log, p.info {
      color: var(--muted-foreground);
      background-color: var(--muted);
      border-color: var(--border);
    }
  }
  .episodes-holder .episode + .episode {
    margin-top: 1.75rem;
  }
  .episodes-holder .episode > .header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0 0.125rem 0.75rem;
    border-bottom: 0;
    h4 {
      margin: 0;
      font-size: 1.125rem;
      font-weight: 600;
      letter-spacing: -0.015em;
      color: var(--foreground);
    }
    > span {
      margin-left: auto;
      font-size: 0.875rem;
      color: var(--muted-foreground);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }
  }
  @media (max-width: 40rem) {
    ul.dashboard-episode-list > li {
      grid-template-columns: 1fr;
      grid-template-areas: "mark" "head" "deliv" "alert";
      row-gap: 0.75rem;
    }
    .dashboard-episode-list .btn-holder {
      margin-left: 0;
      justify-content: flex-start;
    }
  }
  .campaign-progress {
    --cp-groove: var(--foreground);
    @supports (color: color-mix(in lab, red, red)) {
      --cp-groove: color-mix(in srgb, var(--foreground) 8%, var(--muted));
    }
    --cp-rule: var(--foreground);
    @supports (color: color-mix(in lab, red, red)) {
      --cp-rule: color-mix(in srgb, var(--foreground) 11%, var(--muted));
    }
  }
  .campaign-progress .head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    h3 {
      margin: 0;
      font-size: 1rem;
      font-weight: 600;
      letter-spacing: -0.01em;
    }
  }
  .campaign-progress .cp-chip {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 22px;
    padding: 0 0.625rem;
    border-radius: 20px;
    font-size: 0.71875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    .dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
    }
    &.ok {
      background: var(--success);
      @supports (color: color-mix(in lab, red, red)) {
        background: color-mix(in srgb, var(--success) 14%, var(--muted));
      }
      color: var(--success);
    }
    &.ok .dot {
      background: var(--success);
    }
    &.muted {
      background: var(--muted);
      color: var(--muted-foreground);
      border: 1px solid var(--border);
    }
    &.muted .dot {
      background: var(--muted-foreground);
    }
    &.warn {
      background: var(--warning);
      @supports (color: color-mix(in lab, red, red)) {
        background: color-mix(in srgb, var(--warning) 16%, var(--muted));
      }
      color: var(--warning);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in srgb, var(--warning) 55%, var(--foreground));
      }
    }
    &.warn .dot {
      background: var(--warning);
    }
  }
  .campaign-progress .hero {
    padding: 1.25rem 0 0.25rem;
    .lbl {
      font-size: 0.6875rem;
      font-weight: 600;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: var(--muted-foreground);
    }
    .huge {
      margin-top: 0.375rem;
      font-size: 2.875rem;
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1;
      font-variant-numeric: tabular-nums;
    }
    .huge.q {
      color: var(--muted-foreground);
    }
    .hsub {
      margin-top: 0.375rem;
      font-size: 0.84375rem;
      color: var(--muted-foreground);
    }
  }
  .campaign-progress .split {
    margin-top: 0.875rem;
    height: 10px;
    border-radius: 20px;
    background: var(--cp-groove);
    overflow: hidden;
  }
  .campaign-progress .note {
    margin-top: 0.6875rem;
    font-size: 0.78125rem;
    color: var(--muted-foreground);
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    .d {
      flex: none;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--foreground);
      @supports (color: color-mix(in lab, red, red)) {
        background: color-mix(in srgb, var(--foreground) 22%, var(--muted));
      }
    }
  }
  .campaign-progress .progress-segmented-bar {
    --control-progress-size: 10px;
    --control-progress-background-color: #fff;
    border: 0;
    border-radius: 20px;
    margin-top: 0.875rem;
  }
  .campaign-progress .legend {
    margin-top: 0.6875rem;
    display: flex;
    gap: 1.125rem;
    flex-wrap: wrap;
    font-size: 0.78125rem;
    color: var(--muted-foreground);
    font-variant-numeric: tabular-nums;
    .li {
      display: flex;
      align-items: center;
      gap: 0.4375rem;
    }
    .sw {
      flex: none;
      width: 7px;
      height: 7px;
      border-radius: 50%;
    }
    b {
      color: var(--foreground);
      font-weight: 600;
    }
  }
  .campaign-progress .strip {
    margin-top: 1.25rem;
    padding: 1rem 0;
    border-top: 1px solid var(--cp-rule);
    border-bottom: 1px solid var(--cp-rule);
    display: flex;
    .c {
      flex: 1;
      text-align: center;
    }
    .c + .c {
      border-left: 1px solid var(--cp-rule);
    }
    .k {
      font-size: 0.65625rem;
      font-weight: 600;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: var(--muted-foreground);
    }
    .v {
      margin-top: 0.375rem;
      font-size: 0.875rem;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
    }
    .v.q {
      color: var(--muted-foreground);
    }
  }
  .campaign-progress .chart {
    padding-top: 1.125rem;
  }
  .campaign-progress .chart-empty svg {
    width: 100%;
    height: auto;
    display: block;
  }
  .campaign-progress .chart-empty .grid-f {
    stroke: var(--foreground);
    @supports (color: color-mix(in lab, red, red)) {
      stroke: color-mix(in srgb, var(--foreground) 7%, var(--muted));
    }
    stroke-width: 1;
  }
  .campaign-progress .chart-empty .emptymsg {
    fill: var(--muted-foreground);
    font-size: 13px;
    font-weight: 500;
  }
  .campaign-progress .chart-legend {
    display: flex;
    justify-content: center;
    gap: 1.375rem;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--muted-foreground);
    &.dim {
      opacity: 0.45;
    }
    .li {
      display: flex;
      align-items: center;
      gap: 0.4375rem;
    }
    .d {
      width: 9px;
      height: 9px;
      border-radius: 50%;
    }
    .d.total {
      background: var(--foreground);
    }
    .d.daily {
      background: var(--primary);
    }
  }
  .campaign-detail-view .split-view {
    gap: 0;
  }
  .campaign-detail-view .campaign-detail-main {
    min-width: 0;
    padding-right: 2.5rem;
  }
  .campaign-detail-view .right-column {
    border-left: 1px solid var(--foreground);
    @supports (color: color-mix(in lab, red, red)) {
      border-left: 1px solid color-mix(in srgb, var(--foreground) 11%, var(--muted));
    }
    padding-left: 2.5rem;
    padding-top: 2rem;
  }
  .campaign-detail-view .campaign-toolbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
  }
  .shows-list .show > .header {
    align-items: center;
    gap: 0.875rem;
    padding-bottom: 0.8125rem;
  }
  .shows-list .show-group-id {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-width: 0;
    img, .thumb {
      flex: none;
      width: 56px;
      height: 56px;
      border-radius: var(--radius-card);
      object-fit: cover;
    }
  }
  .shows-list .show-group-text {
    min-width: 0;
    h3 {
      margin: 0;
      font-size: 1.375rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      line-height: 1.15;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      a {
        color: var(--foreground);
      }
    }
  }
  .shows-list .show-group-meta {
    margin-top: 0.125rem;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    font-variant-numeric: tabular-nums;
  }
  @media (max-width: 60rem) {
    .campaign-detail-view .split-view {
      grid-template-columns: 1fr;
    }
    .campaign-detail-view .campaign-detail-main {
      padding-right: 0;
    }
    .campaign-detail-view .right-column {
      border-left: 0;
      border-top: 1px solid var(--foreground);
      @supports (color: color-mix(in lab, red, red)) {
        border-top: 1px solid color-mix(in srgb, var(--foreground) 11%, var(--muted));
      }
      padding-left: 0;
      padding-top: 1.5rem;
    }
  }
  .campaign-selector-view {
    margin-top: 1.5rem;
  }
  .campaign-selector-view > h4 {
    margin: 2.75rem 0 1.125rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--muted-foreground);
  }
  .campaign-selector-view .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(22.5rem, 100%), 1fr));
    gap: 1.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .campaign-selector-view li.box {
    padding: 0;
    border-radius: var(--radius-card);
    transition: box-shadow 0.16s ease, border-color 0.16s ease;
    &:hover {
      box-shadow: var(--shadow-raise);
      border-color: var(--foreground);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in srgb, var(--foreground) 12%, var(--border));
      }
    }
    > a {
      display: block;
      padding: 1.375rem 1.375rem 1.25rem;
      color: inherit;
    }
    .wrap {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
      padding: 0;
    }
  }
  .campaign-selector-view .header-holder {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    margin-bottom: 0;
  }
  .campaign-selector-view .brand-logo {
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 11px;
    overflow: hidden;
    background-color: var(--muted);
    border: 1px solid var(--border);
    img, .thumb {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      background-color: var(--muted);
    }
  }
  .campaign-selector-view .title-holder {
    flex: 1;
    min-width: 0;
    h3 {
      margin: 0;
      font-size: 1.03125rem;
      font-weight: 600;
      letter-spacing: -0.01em;
      line-height: 1.3;
      color: var(--foreground);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .campaign-selector-view .card-meta {
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--muted-foreground);
    .reserved {
      color: var(--muted-foreground);
    }
    .sep {
      margin: 0 0.125rem;
      color: var(--foreground);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in srgb, var(--foreground) 24%, var(--muted));
      }
    }
  }
  .campaign-selector-view .progress-radial-holder {
    flex: none;
  }
  .campaign-selector-view .progress-radial {
    --control-progress-radial-thickness: 5px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.75rem;
  }
  .campaign-selector-view .clock {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background-color: var(--muted);
    border: 1px solid var(--border);
    color: var(--muted-foreground);
    svg {
      width: 20px;
      height: 20px;
    }
  }
  .campaign-selector-view .overflow-gradient {
    display: none;
  }
  .campaign-selector-view .card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.875rem;
  }
  .campaign-selector-view .thumbs {
    display: flex;
    gap: 0.4375rem;
    .thumb {
      flex: none;
      width: 44px;
      height: 44px;
      border-radius: 8px;
      overflow: hidden;
      background-color: var(--muted);
      border: 1px solid var(--border);
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        background-color: var(--muted);
      }
    }
  }
  .campaign-selector-view .chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 22px;
    padding: 0 0.5625rem;
    border-radius: 20px;
    font-size: 0.71875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    .dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
    }
    &.delivering {
      background-color: var(--success);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in srgb, var(--success) 12%, var(--background));
      }
      color: var(--success);
    }
    &.delivering .dot {
      background-color: var(--success);
    }
    &.scheduled {
      background-color: var(--muted);
      color: var(--muted-foreground);
      border: 1px solid var(--border);
    }
    &.scheduled .dot {
      background-color: var(--muted-foreground);
    }
    &.finished {
      background-color: var(--foreground);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in srgb, var(--foreground) 8%, var(--background));
      }
      color: var(--foreground);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in srgb, var(--foreground) 68%, var(--muted-foreground));
      }
    }
    &.finished .dot {
      background-color: var(--foreground);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in srgb, var(--foreground) 52%, var(--muted-foreground));
      }
    }
  }
  .campaign-selector-view li.box.new-campaign {
    border: 1.5px dashed var(--foreground);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1.5px dashed color-mix(in srgb, var(--foreground) 20%, var(--border));
    }
    box-shadow: none;
    background-color: transparent;
    height: auto;
    min-height: 10rem;
    transition: box-shadow 0.16s ease, border-color 0.16s ease, color 0.16s ease, background-color 0.16s ease;
    > a {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.75rem;
      height: 100%;
      padding: 1.375rem;
      text-align: center;
      color: var(--muted-foreground);
    }
    .plus {
      display: grid;
      place-items: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 1.5px solid currentColor;
      svg {
        width: 20px;
        height: 20px;
      }
    }
    .t {
      font-size: 0.90625rem;
      font-weight: 600;
      color: inherit;
    }
    .d {
      max-width: 12.5rem;
      font-size: 0.78125rem;
      color: var(--muted-foreground);
    }
    &:hover {
      box-shadow: var(--shadow-raise);
      border-color: var(--primary);
      color: var(--primary);
    }
  }
  .brand-selector ul li.box {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 3rem;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    background-color: var(--color-muted);
    border: 0;
    border-radius: var(--radius);
    box-shadow: none;
    color: #fff;
    transition: box-shadow 0.12s ease;
    strong {
      font-weight: 600;
      color: #fff;
    }
    .overflow-ellipsis {
      min-width: 0;
      padding-right: 0.75rem;
    }
    &:hover {
      box-shadow: 0 0 0 3px var(--color-muted);
    }
    &.selected {
      box-shadow: 0 0 0 3px var(--primary);
    }
    img.thumb.themed {
      flex: none;
      height: 3rem;
      width: calc(3rem + 2px);
      border-radius: 0;
      background-color: var(--color-vibrant);
      border-right: 2px solid #fff;
    }
  }
  .browse-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 2rem;
    align-items: start;
    margin-top: 0.5rem;
  }
  .browse-layout > .right-column {
    position: sticky;
    top: 1.5rem;
    min-width: 0;
  }
  .browse-view {
    display: block;
  }
  @media (max-width: 60rem) {
    .browse-layout {
      grid-template-columns: 1fr;
    }
    .browse-layout > .right-column {
      position: static;
    }
  }
  .browse-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
  }
  .browse-search {
    position: relative;
    flex: 1 1 320px;
    min-width: 0;
    svg {
      position: absolute;
      top: 50%;
      left: 0.875rem;
      width: 18px;
      height: 18px;
      color: var(--foreground);
      transform: translateY(-50%);
      pointer-events: none;
    }
    input {
      width: 100%;
      height: 2.75rem;
      padding: 0 2.25rem 0 2.75rem;
      border: 1px solid var(--input);
      border-radius: var(--radius);
      background-color: var(--background);
      background-image: none;
      color: var(--foreground);
    }
    input::placeholder {
      color: var(--muted-foreground);
    }
    input:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: var(--focus-ring);
    }
    input::-webkit-search-cancel-button {
      -webkit-appearance: none;
      appearance: none;
    }
  }
  .browse-search-clear {
    position: absolute;
    top: 50%;
    right: 0.625rem;
    transform: translateY(-50%);
  }
  .browse-filters-trigger {
    flex: none;
    svg {
      width: 16px;
      height: 16px;
    }
    .tally {
      display: inline-grid;
      place-items: center;
      min-width: 1.25rem;
      height: 1.25rem;
      margin-left: 0.375rem;
      padding: 0 0.375rem;
      border-radius: 9999px;
      background-color: var(--primary);
      color: var(--primary-foreground, #fff);
      font-size: 0.6875rem;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
    }
  }
  .browse-filters-trigger.btn:not(.small):not(.micro):not(.large) {
    height: 2.75rem;
  }
  .browse-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
  }
  .browse-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 2rem;
    padding: 0 0.375rem 0 0.75rem;
    border: 1px solid var(--border);
    border-radius: 9999px;
    background-color: var(--background);
    font-size: 0.8125rem;
    max-width: 22rem;
    .key {
      color: var(--muted-foreground);
    }
    b {
      font-weight: 600;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .browse-chips-clear {
    padding: 0;
    border: 0;
    background-color: transparent;
    color: var(--muted-foreground);
    font-size: 0.75rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }
  .browse-chips-clear:hover {
    color: var(--foreground);
  }
  .browse-scrim {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: none;
    background-color: var(--foreground);
    opacity: 0.18;
  }
  .browse-scrim.open {
    display: block;
  }
  .browse-drawer {
    position: fixed;
    z-index: 61;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    width: min(440px, 100%);
    height: 100dvh;
    border-right: 1px solid var(--border);
    background-color: var(--background);
    transform: translateX(-100%);
    transition: transform 0.22s ease;
  }
  .browse-drawer.open {
    transform: none;
  }
  .browse-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    h2 {
      margin: 0;
      font-size: 1.125rem;
      font-weight: 600;
      letter-spacing: -0.01em;
    }
  }
  .browse-drawer-body {
    flex: 1;
    padding: 0 1.25rem;
  }
  .browse-starred {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border);
    color: var(--muted-foreground);
    font-size: 0.875rem;
    cursor: pointer;
  }
  .browse-drawer-body details {
    border-bottom: 1px solid var(--border);
  }
  .browse-drawer-body details:last-child {
    border-bottom: 0;
  }
  .browse-drawer-body summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 3.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    list-style: none;
    cursor: pointer;
  }
  .browse-drawer-body summary::-webkit-details-marker {
    display: none;
  }
  .browse-group {
    display: grid;
    gap: 1rem;
    padding: 0 0 1rem;
  }
  .browse-field {
    display: grid;
    gap: 0.5rem;
  }
  .browse-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }
  .browse-group-label {
    color: var(--muted-foreground);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .browse-group-label.icon {
    display: inline-block;
    justify-self: start;
    background-size: 0.8125rem;
    padding-right: 1.125rem;
  }
  .browse-daterange {
    grid-auto-flow: column;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    span {
      color: var(--muted-foreground);
      font-size: 0.8125rem;
    }
  }
  .browse-drawer select, .browse-drawer input[type="date"], .browse-drawer input[type="range"] {
    width: 100%;
    min-width: 0;
  }
  .browse-range-labels {
    display: flex;
    justify-content: space-between;
    color: var(--muted-foreground);
    font-size: 0.75rem;
  }
  .browse-see-more {
    justify-self: start;
    margin-top: -0.5rem;
    font-size: 0.8125rem;
  }
  .browse-options {
    display: grid;
    gap: 0.625rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .browse-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--muted-foreground);
    font-size: 0.875rem;
    cursor: pointer;
  }
  .browse-option:has(.check:checked) {
    color: var(--foreground);
  }
  .browse-drawer-foot {
    display: flex;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border);
    .btn {
      flex: 1;
    }
    .tally {
      margin-left: 0.375rem;
      font-variant-numeric: tabular-nums;
    }
  }
  .browse-view .browse-results-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1rem;
  }
  .browse-view .browse-count {
    color: var(--muted-foreground);
    font-size: 0.8125rem;
    font-weight: 600;
  }
  .browse-view .sort-holder {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    color: var(--muted-foreground);
    font-size: 0.8125rem;
    span {
      margin-right: 0.125rem;
    }
    a {
      color: var(--muted-foreground);
      cursor: pointer;
    }
    a:hover {
      color: var(--foreground);
    }
    a.active {
      color: var(--foreground);
      font-weight: 600;
    }
  }
  .browse-view .shows-list {
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background-color: var(--background);
  }
  .browse-view .record {
    position: relative;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto auto;
    grid-template-areas: "mark identity specs action";
    align-items: center;
    column-gap: 1rem;
    margin: 0;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
  }
  .browse-view .record + .record {
    border-top: 1px solid var(--border);
  }
  .browse-view .record:first-child {
    border-top-left-radius: var(--radius-card);
    border-top-right-radius: var(--radius-card);
  }
  .browse-view .record:last-child {
    border-bottom-left-radius: var(--radius-card);
    border-bottom-right-radius: var(--radius-card);
  }
  .browse-view .record:hover {
    background-color: var(--muted);
  }
  .browse-view .record-mark {
    grid-area: mark;
    position: relative;
    img {
      display: block;
      width: 56px;
      height: 56px;
      border-radius: var(--radius);
      object-fit: cover;
      background-color: var(--muted);
    }
    .star-btn {
      position: absolute;
      top: 4px;
      left: 4px;
      z-index: 2;
      width: 1.25rem;
      height: 1.25rem;
    }
  }
  .browse-view .record-identity {
    grid-area: identity;
    min-width: 0;
    .title {
      margin: 0;
      font-size: 1rem;
      font-weight: 600;
      letter-spacing: -0.01em;
      color: var(--foreground);
    }
  }
  .browse-view .record:hover .title {
    color: var(--primary);
  }
  .browse-view .record-meta {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.3125rem;
    .swatch {
      display: inline-flex;
      flex: none;
      align-items: center;
      height: 1.375rem;
      padding: 0 0.5rem;
      border: 1px solid var(--border);
      border-radius: var(--radius-pill);
      background-color: transparent;
      color: var(--muted-foreground);
      font-size: 0.6875rem;
      white-space: nowrap;
      text-transform: capitalize;
    }
    .swatch.clickable {
      position: relative;
      z-index: 2;
      cursor: pointer;
    }
    .swatch.clickable:hover {
      border-color: var(--input);
      color: var(--foreground);
    }
    .swatch.new {
      border-color: var(--success);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in srgb, var(--success) 40%, var(--border));
      }
      background-color: var(--success);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in srgb, var(--success) 12%, var(--background));
      }
      color: var(--success);
    }
    .swatch.light-gray {
      background-color: var(--muted);
      border-color: transparent;
      color: var(--muted-foreground);
    }
    .swatch.podcast, .swatch.youtube, .swatch.spotify {
      padding-left: 0.4375rem;
      gap: 0.25rem;
      &::before {
        content: "";
        flex: none;
        width: 0.85rem;
        height: 0.85rem;
        background-color: currentColor;
        -webkit-mask: var(--platform-icon) center / contain no-repeat;
        mask: var(--platform-icon) center / contain no-repeat;
      }
    }
    .swatch.podcast {
      --platform-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.1" stroke-linecap="round"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5.5 11a6.5 6.5 0 0013 0M12 17.5V21"/></svg>');
    }
    .swatch.youtube {
      --platform-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><rect x="3" y="6" width="18" height="13" rx="3.5"/><path d="M10.5 9.5l5 3-5 3z" fill="black" stroke="none"/></svg>');
    }
    .swatch.spotify {
      --platform-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.42 1.56-.299.421-1.02.599-1.559.3z"/></svg>');
    }
  }
  .browse-view .record-specs {
    grid-area: specs;
    display: flex;
    justify-content: flex-end;
    gap: 1.25rem;
    .spec {
      display: grid;
      gap: 2px;
      min-width: 72px;
      text-align: right;
    }
    .spec .k {
      color: var(--muted-foreground);
      font-size: 0.625rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .spec .v {
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--foreground);
      font-variant-numeric: tabular-nums;
    }
  }
  .browse-view .record-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    border: 0;
    border-radius: inherit;
    text-decoration: none;
  }
  .browse-view .record-actions {
    position: relative;
    z-index: 2;
    grid-area: action;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 1rem;
    border-left: 1px solid var(--border);
  }
  .browse-view .record-detail {
    display: none;
    grid-column: 1 / -1;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    .description {
      margin: 0;
      color: var(--muted-foreground);
      font-size: 0.8125rem;
      line-height: 1.45;
    }
    .record-admin {
      position: relative;
      z-index: 2;
      display: flex;
      justify-content: flex-end;
      gap: 0.5rem;
      margin-top: 0.5rem;
    }
  }
  .browse-view .record:hover .record-detail, .browse-view .record:focus-within .record-detail {
    display: block;
  }
  @media (max-width: 60rem) {
    .browse-view .record {
      grid-template-columns: 56px minmax(0, 1fr) auto;
      grid-template-areas: "mark identity action" "specs specs specs";
      row-gap: 0.75rem;
    }
    .browse-view .record-specs {
      justify-content: flex-start;
      padding-top: 0.75rem;
      border-top: 1px solid var(--border);
    }
    .browse-view .record-specs .spec {
      text-align: left;
    }
    .browse-view .record-actions {
      padding-left: 0;
      border-left: 0;
    }
  }
  @media (max-width: 40rem) {
    .browse-drawer {
      width: 100%;
    }
  }
  @media (min-width: 86rem) {
    .browse-view {
      display: grid;
      grid-template-columns: 17rem minmax(0, 1fr);
      grid-template-areas: "filters toolbar" "filters chips" "filters results" "filters pagination";
      align-items: start;
      column-gap: 1.5rem;
    }
    .browse-view .browse-filters {
      display: contents;
    }
    .browse-view .browse-toolbar {
      grid-area: toolbar;
    }
    .browse-view .browse-chips {
      grid-area: chips;
    }
    .browse-view .shows-list-holder, .browse-view .empty-results {
      grid-area: results;
    }
    .browse-view .pagination {
      grid-area: pagination;
    }
    .browse-view .browse-filters-trigger {
      display: none;
    }
    .browse-view .browse-drawer {
      grid-area: filters;
      position: sticky;
      top: 1.5rem;
      left: auto;
      z-index: auto;
      width: auto;
      height: auto;
      max-height: calc(100dvh - 3rem);
      margin-top: 1.25rem;
      border: 1px solid var(--border);
      border-radius: var(--radius-card);
      transform: none;
      transition: none;
    }
    .browse-view .browse-drawer-head .close-btn, .browse-view .browse-drawer-foot {
      display: none;
    }
    .browse-view .browse-daterange {
      grid-auto-flow: row;
      grid-template-columns: minmax(0, 1fr);
      gap: 0.5rem;
      span {
        text-align: center;
      }
    }
  }
}
@keyframes cart-read-flash {
  from {
    background-color: color-mix(in srgb, var(--primary) 16%, transparent);
  }
  to {
    background-color: transparent;
  }
}
@layer components {
  .sticky-box.cart {
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
  }
  .cart .p-col {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 3rem);
  }
  .cart .p-head {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
  }
  .cart .p-body {
    flex: 1;
    min-height: 0;
    padding: 16px 0 20px;
    display: flex;
    flex-direction: column;
  }
  .cart .p-body > * {
    flex: none;
  }
  .cart .p-body > .r-open {
    flex: 1 1 auto;
  }
  .cart .p-foot {
    padding-top: 14px;
    border-top: 1px solid var(--border);
  }
  .cart .eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted-foreground);
  }
  .cart .campaign-name {
    margin: 4px 0 0;
  }
  .cart .campaign-name a {
    display: inline-block;
    color: var(--foreground);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    text-decoration: none;
  }
  .cart .campaign-name a:hover {
    color: var(--primary);
  }
  .cart .flight {
    margin-top: 3px;
  }
  .cart .tnum {
    font-variant-numeric: tabular-nums;
  }
  .cart .p-head.no-rule {
    border-bottom: 0;
  }
  .cart .hdr-bar {
    padding: 14px 16px;
    border-radius: var(--radius-card);
    background-color: var(--brand-fill);
    color: var(--brand-ink);
  }
  .cart .hdr-bar.unthemed {
    background-color: var(--foreground);
    color: var(--background);
    --brand-ink: #ffffff;
  }
  .cart .hdr-lock {
    display: flex;
    gap: 10px;
    align-items: flex-start;
  }
  .cart .hdr-name {
    flex: 1;
    min-width: 0;
  }
  .cart .brand-tile {
    flex: none;
    display: grid;
    place-items: center;
    overflow: hidden;
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    background-color: var(--background);
    border: 1px solid var(--border);
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
  .cart .hdr-bar .eyebrow, .cart .hdr-bar .flight {
    color: inherit;
    opacity: 0.74;
  }
  .cart .hdr-bar .campaign-name a {
    color: inherit;
  }
  .cart .hdr-bar .campaign-name a:hover {
    color: inherit;
    text-decoration: underline;
  }
  .cart .hdr-bar .shield-toggle {
    color: inherit;
    opacity: 0.8;
  }
  .cart .hdr-bar .shield-toggle:hover, .cart .hdr-bar .shield-toggle[aria-expanded="true"] {
    border-color: transparent;
    background-color: var(--brand-ink);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--brand-ink) 16%, transparent);
    }
    color: inherit;
    opacity: 1;
  }
  .cart .hdr-bar .btn.micro {
    background-color: transparent;
    border-color: var(--brand-ink);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--brand-ink) 45%, transparent);
    }
    color: inherit;
  }
  .cart .hdr-bar .btn.micro:hover {
    background-color: var(--brand-ink);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--brand-ink) 14%, transparent);
    }
  }
  .cart .shield-toggle {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background-color: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
    svg {
      width: 18px;
      height: 18px;
    }
  }
  .cart .shield-toggle:hover, .cart .shield-toggle[aria-expanded="true"] {
    border-color: var(--border);
    background-color: var(--background);
    color: var(--foreground);
  }
  .cart .admin-btn-holder {
    display: flex;
    gap: 6px;
    padding-top: 10px;
    form {
      display: contents;
    }
  }
  .cart .r-show + .r-show {
    margin-top: 22px;
  }
  .cart .r-show-head {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 4px;
  }
  .cart .r-show-link {
    display: flex;
    gap: 10px;
    align-items: center;
    flex: 1;
    min-width: 0;
    color: inherit;
    text-decoration: none;
    border-bottom: 0;
  }
  .cart .r-show-id {
    flex: 1;
    min-width: 0;
  }
  .cart .r-disclose {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background-color: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
    svg {
      width: 16px;
      height: 16px;
      transition: transform 0.15s ease;
    }
  }
  .cart .r-disclose:hover {
    background-color: var(--muted);
    color: var(--foreground);
  }
  .cart .r-disclose.open svg {
    transform: rotate(90deg);
  }
  .cart .thumb {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    object-fit: cover;
    background-color: var(--background);
    border: 1px solid var(--border);
  }
  .cart .show-title {
    display: block;
    color: var(--foreground);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
  }
  .cart .r-show-id .read-meta {
    margin-top: 3px;
  }
  .cart .r-show-link:hover .show-title {
    color: var(--primary);
    text-decoration: none;
  }
  .cart .r-show-link:hover {
    border-bottom: 0;
    text-decoration: none;
  }
  .cart .clip-2 {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cart .read-meta {
    color: var(--muted-foreground);
    font-size: 12px;
    letter-spacing: 0.01em;
  }
  .cart .r-rail {
    margin-left: 21px;
    padding-left: 23px;
    border-left: 1px solid var(--border);
  }
  .cart .r-read {
    position: relative;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 9px 0;
  }
  .cart .r-read::before {
    content: "";
    position: absolute;
    left: -27px;
    top: 15px;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background-color: var(--muted);
    border: 1px solid var(--input);
  }
  .cart .r-read.blocked::before {
    background-color: var(--destructive);
    border-color: var(--destructive);
  }
  .cart .r-read-id {
    flex: 1;
    min-width: 0;
  }
  .cart .read-type {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
  }
  .cart .r-date {
    color: var(--muted-foreground);
    font-size: 12px;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
  }
  .cart .read-cost {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .cart .r-read.flash {
    animation: cart-read-flash 1s ease-out;
  }
  .cart .r-open {
    margin-left: 21px;
    padding-left: 23px;
    border-left: 1px dashed var(--input);
  }
  .cart .linkify {
    padding: 0;
    border: 0;
    border-bottom: 2px solid var(--border);
    background: none;
    color: var(--muted-foreground);
    font-size: 13px;
    cursor: pointer;
  }
  .cart .linkify:hover {
    color: var(--destructive);
    border-bottom-color: var(--destructive);
  }
  .cart .empty-head h3 {
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
  }
  .cart .r-steps {
    counter-reset: s;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .cart .r-steps li {
    position: relative;
    padding: 11px 0;
    counter-increment: s;
  }
  .cart .r-steps li::before {
    content: counter(s);
    position: absolute;
    left: -33px;
    top: 9px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background-color: var(--muted);
    border: 1px solid var(--input);
    color: var(--muted-foreground);
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .cart .r-steps .st {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
  }
  .cart .r-steps .ss {
    margin-top: 2px;
    color: var(--muted-foreground);
    font-size: 12px;
    line-height: 1.4;
  }
  .cart .foot-summary {
    align-items: flex-end;
    margin-bottom: 12px;
  }
  .cart .p-amount {
    margin-top: 5px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .cart .p-foot-meta {
    display: grid;
    gap: 2px;
    text-align: right;
  }
  .cart .btn.block {
    width: 100%;
  }
  .pagination {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: wrap;
    padding: var(--space-5) 0 0;
  }
  .pagination-context {
    color: var(--muted-foreground);
    font-size: var(--text-body);
    font-variant-numeric: tabular-nums;
    b {
      color: var(--foreground);
      font-weight: var(--weight-strong);
    }
  }
  .pagination-controls {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-left: auto;
  }
  .page-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: var(--control-lg);
    min-width: var(--control-lg);
    padding: 0 16px;
    border: 1px solid var(--input);
    border-radius: var(--radius);
    background-color: var(--background);
    color: var(--foreground);
    font: var(--weight-strong) var(--text-body) var(--font-sans);
    letter-spacing: var(--tracking-control);
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
    svg {
      width: 18px;
      height: 18px;
      flex: none;
    }
  }
  .page-step:hover:not(:disabled):not([aria-disabled='true']) {
    background-color: var(--muted);
    border-color: var(--foreground);
  }
  .page-step:active:not(:disabled):not([aria-disabled='true']) {
    background-color: var(--border);
  }
  .page-step:disabled, .page-step[aria-disabled='true'] {
    background-color: var(--muted);
    border-color: var(--border);
    color: var(--muted-foreground);
    cursor: not-allowed;
  }
  .page-step:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
  }
  .page-track {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    width: fit-content;
    height: var(--control-lg);
    margin: 0;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--muted);
    list-style: none;
    li {
      display: flex;
    }
  }
  .page-track .page-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--control);
    min-width: var(--control);
    padding: 0 12px;
    text-decoration: none;
    border: 0;
    border-radius: 3px;
    background-color: transparent;
    color: var(--muted-foreground);
    font: var(--weight-strong) var(--text-body) var(--font-sans);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
  }
  .page-track .page-num:hover:not([aria-current="page"]) {
    background-color: var(--border);
    color: var(--foreground);
  }
  .page-track .page-num[aria-current="page"] {
    background-color: var(--background);
    color: var(--foreground);
    box-shadow: var(--shadow);
    cursor: default;
  }
  .page-track .page-num:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
  }
  .page-track .gap {
    display: grid;
    place-items: center;
    min-width: 28px;
    color: var(--muted-foreground);
    font-size: var(--text-body);
    user-select: none;
  }
  .pagination--compact .page-step {
    height: var(--control-compact);
    min-width: var(--control-compact);
    gap: 6px;
    padding: 0 10px;
    font-size: var(--text-control);
  }
  .pagination--compact .page-step svg {
    width: 14px;
    height: 14px;
  }
  .pagination--compact .page-track {
    height: var(--control-compact);
    gap: 2px;
  }
  .pagination--compact .page-track .page-num {
    height: 24px;
    min-width: 26px;
    padding: 0 7px;
    font-size: var(--text-control);
  }
  .pagination--compact .page-track .gap {
    min-width: 20px;
    font-size: var(--text-control);
  }
  @media (max-width: 45rem) {
    .pagination {
      gap: var(--space-3);
    }
    .page-step {
      height: var(--control-compact);
      min-width: var(--control-compact);
      gap: 6px;
      padding: 0 10px;
      font-size: var(--text-control);
    }
    .page-step svg {
      width: 14px;
      height: 14px;
    }
    .page-track {
      height: var(--control-compact);
      gap: 2px;
    }
    .page-track .page-num {
      height: 24px;
      min-width: 26px;
      padding: 0 7px;
      font-size: var(--text-control);
    }
    .page-track .gap {
      min-width: 20px;
      font-size: var(--text-control);
    }
    .pagination-context {
      font-size: var(--text-caption);
    }
    .pagination-controls {
      margin-left: 0;
      width: 100%;
    }
  }
  .show-purchase-view .schedule-table {
    --cols: minmax(160px, 1.2fr) minmax(84px, 0.5fr) minmax(156px, 1fr)
            minmax(158px, 0.9fr) minmax(240px, 0.8fr);
    --g-header-h: 36px;
  }
  .show-purchase-view .schedule-table .column-header {
    position: sticky;
    top: var(--nav-height);
    z-index: 6;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: var(--space-4);
    align-items: end;
    height: var(--g-header-h);
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-4);
    background-color: var(--muted);
    border-bottom: 1px solid var(--border);
  }
  .show-purchase-view .schedule-table .column-header .col-group {
    display: grid;
    grid-template-columns: var(--cols);
    gap: var(--space-4);
    align-items: end;
    padding: 0 var(--space-4);
    margin: 0 1px;
  }
  .show-purchase-view .schedule-table .column-header .col-date {
    text-align: center;
  }
  .show-purchase-view .schedule-table .column-header span {
    color: var(--muted-foreground);
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-strong);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .show-purchase-view .schedule-table .episode {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: start;
    gap: var(--space-4);
    margin: 0 0 var(--space-5);
  }
  .show-purchase-view .schedule-table .calendar-date-row {
    display: none;
  }
  .show-purchase-view .schedule-table .calendar-date-badge {
    position: sticky;
    top: calc(var(--nav-height) + var(--g-header-h));
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 1px;
    width: 72px;
    height: 72px;
    padding: 0;
    background-color: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
  }
  .show-purchase-view .calendar-date-badge span:nth-child(1), .show-purchase-view .calendar-date-badge span:nth-child(3) {
    color: var(--muted-foreground);
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-strong);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    line-height: 1.2;
  }
  .show-purchase-view .calendar-date-badge span:nth-child(2) {
    color: var(--foreground);
    font-size: var(--text-h2);
    font-weight: var(--weight-strong);
    letter-spacing: var(--tracking-title);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
  }
  .show-purchase-view .placements-holder {
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
  }
  .show-purchase-view .placements-holder table {
    display: block;
    width: 100%;
    margin: 0;
    background-color: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-table);
  }
  .show-purchase-view .placements-holder tbody {
    display: block;
  }
  .show-purchase-view .placements-holder tr {
    display: grid;
    grid-template-columns: var(--cols);
    gap: var(--space-4);
    align-items: center;
    min-height: 52px;
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--border);
  }
  .show-purchase-view .placements-holder tr:last-child {
    border-bottom: 0;
    border-radius: 0 0 var(--radius-table) var(--radius-table);
  }
  .show-purchase-view .placements-holder tr:hover {
    background-color: var(--muted);
  }
  .show-purchase-view .placements-holder td {
    display: grid;
    gap: 2px;
    align-content: center;
    min-width: 0;
    padding: 0;
    border: 0;
  }
  .show-purchase-view .placements-holder td .label {
    color: var(--muted-foreground);
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-strong);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    line-height: 1.2;
  }
  .show-purchase-view .placements-holder td:not(:first-child) .label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .show-purchase-view .placements-holder td > div:not(.label):not(.spread):not(.placement-type) {
    color: var(--foreground);
    font-size: var(--text-body);
    font-weight: var(--weight-medium);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .show-purchase-view .placements-holder td .tabular {
    font-family: var(--font-mono);
    font-size: var(--text-control);
    font-variant-numeric: tabular-nums;
  }
  .show-purchase-view .placements-holder td:first-child {
    grid-auto-flow: column;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: baseline;
    gap: 10px;
  }
  .show-purchase-view .placements-holder td:first-child .label {
    color: var(--foreground);
    font-family: var(--font-mono);
    font-size: var(--text-control);
    font-weight: var(--weight-strong);
    letter-spacing: 0;
    text-transform: none;
    font-variant-numeric: tabular-nums;
  }
  .show-purchase-view .placements-holder td:first-child .placement-type {
    font-size: var(--text-body);
    font-weight: var(--weight-strong);
    letter-spacing: var(--tracking-title);
    min-width: 0;
    justify-self: start;
  }
  .show-purchase-view .placements-holder tr.disabled td > div:not(.label):not(.spread):not(.placement-type), .show-purchase-view .placements-holder tr.disabled td .placement-type {
    color: var(--muted-foreground);
  }
  .show-purchase-view .placements-holder td:last-child {
    width: auto;
    justify-self: stretch;
  }
  .show-purchase-view .placements-holder td:last-child > .spread {
    justify-content: flex-end;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .show-purchase-view .placements-holder .btn-holder {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: var(--space-1);
  }
  .show-purchase-view .placements-holder .zapper-holder {
    display: flex;
    flex: none;
    align-items: center;
    height: var(--control-compact);
  }
  .show-purchase-view .placements-holder .btn-holder .btn {
    width: 112px;
    height: var(--control-compact);
    padding: 0 var(--space-2);
    font-size: var(--text-control);
    font-weight: var(--weight-strong);
  }
  .show-purchase-view .placements-holder .btn-holder .btn::before {
    width: 14px;
    height: 14px;
  }
  .show-purchase-view .schedule-table .empty-episode {
    padding: var(--space-4) var(--space-5);
    background-color: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-table);
    color: var(--muted-foreground);
    font-size: var(--text-body);
  }
  @media (max-width: 86rem) {
    .show-purchase-view.split-view .schedule-table {
      --cols: minmax(96px, 1.2fr) minmax(56px, 0.5fr) minmax(96px, 1fr) minmax(96px, 0.9fr) minmax(208px, 0.8fr);
    }
    .show-purchase-view.split-view .placements-holder td:not(:first-child) .nowrap {
      white-space: normal;
    }
    .show-purchase-view.split-view .schedule-table .column-header {
      grid-template-columns: minmax(0, 1fr);
      gap: 0;
    }
    .show-purchase-view.split-view .schedule-table .column-header .col-date {
      display: none;
    }
    .show-purchase-view.split-view .schedule-table .episode {
      grid-template-columns: minmax(0, 1fr);
      gap: 0;
    }
    .show-purchase-view.split-view .schedule-table .calendar-date-badge {
      display: flex;
      align-items: baseline;
      gap: var(--space-2);
      width: auto;
      height: auto;
      padding: var(--space-2) var(--space-1);
      margin-bottom: var(--space-2);
      background-color: var(--muted);
      border: 0;
      border-bottom: 1px solid var(--border);
      border-radius: 0;
      box-shadow: none;
      z-index: 5;
    }
    .show-purchase-view.split-view .calendar-date-badge span:nth-child(2) {
      font-size: var(--text-h3);
    }
  }
  @media (max-width: 68rem) {
    .show-purchase-view .schedule-table {
      --cols: minmax(96px, 1.2fr) minmax(56px, 0.5fr) minmax(96px, 1fr) minmax(96px, 0.9fr) minmax(208px, 0.8fr);
    }
    .show-purchase-view .placements-holder td:not(:first-child) .nowrap {
      white-space: normal;
    }
    .show-purchase-view .schedule-table .column-header {
      grid-template-columns: minmax(0, 1fr);
      gap: 0;
    }
    .show-purchase-view .schedule-table .column-header .col-date {
      display: none;
    }
    .show-purchase-view .schedule-table .episode {
      grid-template-columns: minmax(0, 1fr);
      gap: 0;
    }
    .show-purchase-view .schedule-table .calendar-date-badge {
      display: flex;
      align-items: baseline;
      gap: var(--space-2);
      width: auto;
      height: auto;
      padding: var(--space-2) var(--space-1);
      margin-bottom: var(--space-2);
      background-color: var(--muted);
      border: 0;
      border-bottom: 1px solid var(--border);
      border-radius: 0;
      box-shadow: none;
      z-index: 5;
    }
    .show-purchase-view .calendar-date-badge span:nth-child(2) {
      font-size: var(--text-h3);
    }
  }
  @media (max-width: 60rem) {
    .show-purchase-view.split-view {
      grid-template-columns: 1fr;
    }
    .show-purchase-view .right-column {
      max-width: none;
    }
    .show-purchase-view .schedule-table .column-header {
      display: none;
    }
    .show-purchase-view .placements-holder td:not(:first-child) .label {
      position: static;
      width: auto;
      height: auto;
      margin: 0;
      overflow: visible;
      clip: auto;
      white-space: normal;
    }
    .show-purchase-view .schedule-table .calendar-date-badge {
      top: var(--nav-height);
    }
    .show-purchase-view .placements-holder td .nowrap {
      white-space: normal;
    }
    .show-purchase-view .placements-holder td > div:not(.label):not(.spread):not(.placement-type) {
      overflow: visible;
      text-overflow: clip;
    }
    .show-purchase-view .placements-holder tr {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-template-areas: "slot slot   action" "cpm  impr   flight";
      align-items: start;
      gap: var(--space-4);
      min-height: 0;
      padding: var(--space-4);
    }
    .show-purchase-view .placements-holder td:nth-child(1) {
      grid-area: slot;
      align-self: center;
    }
    .show-purchase-view .placements-holder td:nth-child(2) {
      grid-area: cpm;
    }
    .show-purchase-view .placements-holder td:nth-child(3) {
      grid-area: impr;
    }
    .show-purchase-view .placements-holder td:nth-child(4) {
      grid-area: flight;
    }
    .show-purchase-view .placements-holder td:nth-child(5) {
      grid-area: action;
      align-self: center;
    }
    .show-purchase-view .placements-holder .zapper-holder {
      height: var(--control-lg);
    }
    .show-purchase-view .placements-holder .btn-holder .btn {
      width: 100%;
      max-width: 172px;
      height: var(--control-lg);
      padding: 0 var(--space-3);
      font-size: var(--text-body);
    }
    .show-purchase-view .placements-holder .btn-holder .btn::before {
      width: 16px;
      height: 16px;
    }
  }
  @media (max-width: 40rem) {
    .show-purchase-view .placements-holder tr {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-areas: "slot   slot" "cpm    impr" "flight flight" "action action";
      gap: var(--space-3);
      padding: var(--space-3);
    }
    .show-purchase-view .placements-holder td:last-child > .spread {
      display: block;
    }
    .show-purchase-view .placements-holder .btn-holder {
      align-items: stretch;
      gap: var(--space-2);
    }
    .show-purchase-view .placements-holder .btn-holder .btn {
      max-width: none;
    }
  }
  .adaptive-item .generated-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 0.5rem;
  }
  .adaptive-item .generated-content .script-holder {
    flex-basis: 100%;
    margin: 0;
  }
  .adaptive-item .generated-content > span {
    display: inline-flex;
  }
  .adaptive-item .generated-content button, .adaptive-item .generated-content .btn {
    margin-right: 0;
  }
  .adaptive-item .generated-content .guideline-review {
    float: none;
    margin: 0 0 0 auto;
  }
  body,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
    font-family: var(--font-sans);
  }
  body {
    background-color: var(--muted);
  }
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-border-style: solid;
      --tw-font-weight: initial;
    }
  }
}