@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=DM+Sans:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=Space+Grotesk:wght@400;500;600;700&family=Syne:wght@400;500;600;700&display=swap');

:root {
  color-scheme: dark;
  --bg: #050306;
  --bg-1: #0b0709;
  --bg-2: #130a10;
  --surface: #100b0e;
  --surface-raised: #181014;
  --ink: #fff9fc;
  --ink-dim: rgba(255, 249, 252, 0.72);
  --ink-faint: rgba(255, 249, 252, 0.48);
  --ink-ghost: rgba(255, 249, 252, 0.26);
  --pink: #ff2f92;
  --pink-2: #ff52a7;
  --pink-soft: #ff9acb;
  --pink-deep: #7c174b;
  --lilac: #c7a8ef;
  /* Unified rose / plum / lilac stage lighting for active Player chrome. */
  --rose-hot: #d85a9f;
  --rose: #b96b9e;
  --plum: #4a2344;
  --plum-deep: #261326;
  --lilac-glow: #c4a9df;
  --blush: #efb6d4;
  --rare-rose: #f0c1e1;
  --lilac-soft: rgba(199, 168, 239, .16);
  --pink-line: rgba(255, 47, 146, 0.34);
  --pink-wash: rgba(255, 47, 146, 0.11);
  --pink-glow: rgba(255, 47, 146, 0.20);
  --accent: var(--pink);
  --accent-soft: var(--pink-soft);
  --accent-line: var(--pink-line);
  --accent-wash: var(--pink-wash);
  --glass: rgba(16, 11, 14, 0.62);
  --glass-strong: rgba(15, 10, 13, 0.9);
  --glass-neutral: rgba(12, 12, 12, 0.56);
  --glass-neutral-strong: rgba(12, 12, 12, 0.88);
  --border: rgba(255, 255, 255, 0.12);
  --border-soft: rgba(255, 255, 255, 0.075);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 24px;
  --r-full: 999px;
  --shadow-sm: 0 6px 20px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 16px 44px rgba(0, 0, 0, 0.48);
  --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.58);
  --shadow-glow: 0 0 28px var(--pink-glow);
  --shadow-neutral: 0 18px 54px rgba(0, 0, 0, 0.62);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-1: 0.15s;
  --dur-2: 0.22s;
  --dur-3: 0.31s;
  --font: "Space Grotesk", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Instrument Serif", Iowan Old Style, Baskerville, Georgia, serif;
  --meta-font: "Instrument Serif", Iowan Old Style, Baskerville, Georgia, serif;
  --meta-size: 1.1rem;
  --meta-tracking: .015em;
  --meta-casing: none;
  --meta-y: -1px;
}

#export-clear-dialog { width:min(360px, calc(100vw - 32px)); padding:0; border:1px solid rgba(255,255,255,.2); border-radius:18px; color:var(--ink); background:var(--bg-1, #151216); box-shadow:0 24px 80px rgba(0,0,0,.58); }
#export-clear-dialog::backdrop { background:rgba(0,0,0,.62); backdrop-filter:blur(4px); }
#export-clear-dialog form { padding:20px; }
#export-clear-dialog h2 { margin:0 0 7px; font-size:20px; }
#export-clear-dialog p { margin:0; color:var(--ink-dim); font-size:14px; line-height:1.45; }
#export-clear-dialog menu { display:flex; justify-content:flex-end; gap:8px; margin:18px 0 0; padding:0; }
#export-clear-dialog button { min-height:38px; padding:0 12px; border:1px solid var(--border); border-radius:999px; background:transparent; color:var(--ink); font:inherit; font-size:12px; font-weight:700; }
#export-clear-dialog .clear { border-color:rgba(255,89,130,.58); background:rgba(255,59,115,.14); }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}

.vb-chip {
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--glass);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.07), var(--shadow-sm);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
}

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