/* Core tokens extracted from Tailwind config / index.css */
:root {
  --background: #050505;
  --foreground: #f5f5f5;
  --primary: #e0e0e0;
  --primary-dark: #8d8d8d;
  --accent: #bdbdbd;
  --muted: #0d0d0d;
  --muted-foreground: #9a9a9a;
  --border: #1d1d1f;
  --destructive: #666666;
  --radius: 12px;
  --gradient-primary: linear-gradient(140deg,#000000,#3a3a3c 55%, #525255);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", system-ui, sans-serif;
}

body { margin:0; background: radial-gradient(circle at 20% 20%, #0e0e10, #030303 70%); color:var(--foreground); font-family:inherit; -webkit-font-smoothing:antialiased; }
html { scroll-behavior:smooth; }
.container { width:100%; max-width:1200px; margin:0 auto; padding:0 1.5rem; }
a { text-decoration:none; color:inherit; }
img { display:block; max-width:100%; }
.hidden { display:none !important; }
.text-gradient { background: var(--gradient-primary); -webkit-background-clip: text; background-clip:text; color:transparent; }
.flex-between { display:flex; align-items:center; justify-content:space-between; }

/* Header */
.site-header { position:fixed; top:0; left:0; right:0; z-index:50; transition:all .3s; padding:.5rem 0; }
.site-header.scrolled { backdrop-filter:blur(20px); background:hsla(0, 0%, 8%, 0.7); border-bottom:1px solid var(--border); }
.logo-link { display:flex; align-items:center; gap:.75rem; padding:.25rem .5rem; border-radius:10px; }
.logo-img { width:48px; height:48px; border:2px solid hsla(0, 0%, 100%, 0.08); border-radius:50%; padding:.4rem; background:var(--background); box-shadow:0 4px 12px rgba(0,0,0,.05); }
.logo-img img { width:100%; height:100%; object-fit:contain; }
.nav-desktop { display:none; gap:2rem; }
.nav-desktop a { font-weight:500; color:var(--muted-foreground); position:relative; transition:.3s; }
.nav-desktop a:after { content:""; position:absolute; left:0; bottom:-4px; height:2px; width:100%; background:var(--primary); transform:scaleX(0); transform-origin:left; transition:.3s; }
.nav-desktop a:hover { color:var(--foreground); }
.nav-desktop a:hover:after { transform:scaleX(1); }
.menu-btn { background:none; border:none; font-size:1.5rem; cursor:pointer; color:var(--muted-foreground); }
.mobile-menu { display:flex; flex-direction:column; padding:1rem 1.5rem; gap:.75rem; background:hsla(0, 0%, 8%, 0.8); backdrop-filter:blur(20px); border-top:1px solid var(--border); }
.mobile-menu a { padding:.5rem 0; font-weight:500; color:var(--muted-foreground); }
.mobile-menu a:hover { color:var(--foreground); }
@media (min-width:768px){ .nav-desktop{display:flex;} .menu-btn{display:none;} .mobile-menu{display:none!important;} }

/* Hero */
.hero { position:relative; min-height:60vh; display:flex; align-items:center; overflow:hidden; }
.hero-bg { position:absolute; inset:0; background:var(--background); }
.hero-grid { display:grid; gap:3rem; grid-template-columns:1fr; align-items:center; width:100%; }
@media (min-width:1024px){ .hero-grid{ grid-template-columns:1fr 1fr; } }
.hero-title { font-size:clamp(2.5rem,6vw,4.5rem); font-weight:800; line-height:1.05; margin:0 0 1.5rem; }
.hero-sub { font-size:clamp(1.05rem,1.8vw,1.4rem); line-height:1.5; display:flex; flex-direction:column; gap:.25rem; max-width:38ch; color:var(--muted-foreground); margin:0 0 2.5rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:1rem; }
.btn-hero, .btn-glass, .btn-outline { --pad-x:1.5rem; --pad-y:.9rem; font-weight:600; border-radius:14px; cursor:pointer; font-size:.95rem; letter-spacing:.25px; display:inline-flex; align-items:center; gap:.5rem; transition:.35s cubic-bezier(.25,1,.5,1); position:relative; }
.btn-hero { background: linear-gradient(160deg,#262627,#090909); border:1px solid #2c2c2e; color: var(--foreground); box-shadow: 0 4px 8px -2px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,0.04) inset; padding:var(--pad-y) var(--pad-x); }
.btn-hero:hover { background: linear-gradient(160deg,#303031,#0f0f0f); box-shadow:0 8px 18px -6px rgba(0,0,0,.7); }
.btn-glass { background: linear-gradient(145deg,#141414,#050505); border:1px solid #2a2a2c; color: var(--foreground); }
.btn-glass:hover { background: linear-gradient(145deg,#1e1e1f,#0b0b0c); }
.btn-outline { background: transparent; border:1px solid #000; color: var(--foreground); }
.btn-outline:hover { background: rgba(255,255,255,0.08); }
.small { --pad-x:1rem; --pad-y:.55rem; font-size:.8rem; }
.logo-orb { position:relative; width:clamp(15rem,40vw,24rem); aspect-ratio:1; display:flex; align-items:center; justify-content:center; background:hsla(0, 0%, 100%, 0.05); border:2px solid hsla(0, 0%, 100%, 0.08); border-radius:50%; backdrop-filter:blur(20px); box-shadow:0 10px 40px -10px rgba(0,0,0,.15); }
.logo-orb:before { content:""; position:absolute; inset:-25%; background:radial-gradient(circle at 50% 50%, hsl(0 0% 60% / .15), transparent); filter:blur(30px); }
.logo-orb img { width:80%; height:80%; object-fit:contain; filter:drop-shadow(0 6px 16px rgba(0,0,0,.25)); }
.scroll-indicator { position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); width:24px; height:40px; border:2px solid var(--primary); border-radius:24px; display:flex; justify-content:center; }
.scroll-indicator .wheel { width:4px; height:10px; background: var(--gradient-primary); border-radius:4px; margin-top:6px; animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100%{ transform:translateY(0); opacity:.8;} 50%{ transform:translateY(8px); opacity:.2;} }

/* Stats */
.stats-section { padding:2.5rem 0; background:linear-gradient(145deg,var(--background),hsl(0 0% 10%)); }
.stats-wrapper { text-align:center; max-width:960px; margin:0 auto; }
.stats-numbers { display:inline-flex; align-items:center; gap:4rem; margin-bottom:4rem; }
.stat-block { text-align:center; }
.stat-number { font-size:clamp(3.5rem,10vw,6rem); font-weight:700; }
.stat-label { margin:0; color:var(--muted-foreground); font-weight:500; }
.divider { width:1px; height:5rem; background:var(--border); display:none; }
@media (min-width:768px){ .divider{display:block;} }
.cta-title { font-size:clamp(1.9rem,4vw,3rem); margin:0 0 1rem; line-height:1.15; font-weight:700; }
.cta-sub { font-size:1.1rem; line-height:1.55; color:var(--muted-foreground); max-width:48ch; margin:0 auto 2.25rem; }
.cta-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:1rem; }

/* Overview */
.overview-section { padding:2.5rem 0; background:var(--muted); }
.overview-card { padding:2.5rem 2rem; }
.section-title { font-size:clamp(2.2rem,5vw,3rem); margin:0 0 1.5rem; font-weight:700; text-align:center; line-height:1.15; }
.section-title.small { font-size:1.5rem; text-align:left; }
.rule { width:80px; height:4px; background:var(--gradient-primary); margin:.5rem auto 2rem; border-radius:2px; }
.prose { font-size:1.05rem; line-height:1.55; display:flex; flex-direction:column; gap:1.5rem; color:var(--muted-foreground); }
.prose a.strong { font-weight:600; background:var(--gradient-primary); -webkit-background-clip:text; background-clip:text; color:transparent; text-decoration:none; border-bottom:1px solid hsl(0 0% 60% / .4); }
.prose a.strong:hover { border-color:hsl(0 0% 60%); }
.strong { font-weight:600; }
.note { border:1px solid var(--border); border-radius:14px; padding:1.25rem 1.25rem; background:var(--background); }
.note.destructive { background:rgba(0,0,0,0.12) !important; border:1px solid rgba(0,0,0,0.18) !important; }
.note.destructive strong { color:#111 !important; }
.note.primary { border-color:#2d2d2f; background:#101010; }
.note.primary strong { color:var(--primary); }
.inline-link { display:inline-flex; align-items:center; gap:.35rem; margin-top:.5rem; font-weight:600; color:var(--primary); }
.inline-link:hover { text-decoration:underline; }

/* Episodes */
.episodes-section { padding:2.5rem 0; }
.dataset-switcher { display:flex; justify-content:center; gap:.5rem; margin-bottom:2rem; flex-wrap:wrap; }
.dataset-switcher button { border:1px solid var(--border); background:#0e0e0f; border:1px solid #272729; color:#d7d7d7; padding:.55rem 1rem; border-radius:999px; cursor:pointer; font-weight:500; transition:.3s; }
.dataset-switcher button.active { background: var(--gradient-primary); border-color:#3a3a3c; color:#fff; box-shadow:0 0 0 1px rgba(255,255,255,0.05) inset; }
.dataset-switcher button:hover { background:#181819; }
.episodes-grid { display:grid; gap:2rem; grid-template-columns:1fr; }
@media (min-width:1024px){ .episodes-grid{ grid-template-columns:1fr 1fr; } }
.episode-viewer, .episode-chart { display:flex; flex-direction:column; }
.viewer-media { position:relative; aspect-ratio:16/9; background:linear-gradient(135deg, hsl(0 0% 22%), hsl(0 0% 12%)); border-radius:16px 16px 0 0; overflow:hidden; }
.viewer-media img { width:100%; height:100%; object-fit:cover; }
.frame-desc { position:absolute; left:1rem; right:1rem; bottom:1rem; background:hsla(0, 0%, 0%, 0.7); backdrop-filter:blur(10px); padding:.6rem .85rem; border-radius:10px; font-size:.75rem; font-weight:500; color: var(--foreground); }
.frame-progress { position:absolute; left:0; right:0; bottom:0; height:4px; background:#1a1a1c; }
.frame-progress #frameProgressBar { height:100%; width:0%; background: var(--gradient-primary); transition:width .3s; }
.viewer-controls { padding:1.25rem 1.5rem 1.5rem; display:flex; flex-direction:column; gap:1rem; }
.controls-row { display:flex; gap:.75rem; align-items:center; }
.controls-row input[type=range]{ flex:1; accent-color:#5a5a5c; }
.meta-row { display:flex; justify-content:space-between; font-size:.75rem; color:var(--muted-foreground); }
.episode-chart { padding:1.25rem 1.25rem 1.75rem; }
.chart-title { margin:0 0 1rem; font-size:1rem; font-weight:600; display:flex; align-items:center; gap:.5rem; }
.chart-wrapper { position:relative; aspect-ratio:16/9; background:var(--muted); border-radius:14px; padding:1rem; }
.chart-meta { margin-top:.75rem; font-size:.75rem; display:flex; justify-content:space-between; color:var(--muted-foreground); }
.text-primary { color: var(--primary); }
.text-red { color: #e53e3e; }
.text-red-important { color: #e53e3e; }

/* Chart SVG */
#valueChart line { stroke: hsla(0, 0%, 100%, 0.1); }
#valueChart text { fill: hsla(0, 0%, 100%, 0.6); }
#valueChart polyline { stroke:#c0c0c0; }
#valueChart circle { fill:#9d9d9d; }
#chartMarker circle { fill:#ffffff; }
#chartMarker rect { fill:#3a3a3c; stroke:#4d4d4f; stroke-width:1; }
#chartMarkerValue { fill:#f5f5f5; }

/* Results */
.results-section { padding:2.5rem 0; background:var(--muted); }
.filters { margin:2rem 0 2.5rem; padding:1.5rem; }
.filters h3 { margin:0 0 1rem; font-size:1rem; font-weight:600; display:flex; align-items:center; gap:.5rem; }
.filter-grid { display:grid; gap:1rem; grid-template-columns:1fr; }
@media (min-width:768px){ .filter-grid{ grid-template-columns:repeat(3,1fr); } }
.filter-group label { font-size:.7rem; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:var(--muted-foreground); display:block; margin-bottom:.4rem; }
select { width:100%; padding:.65rem .75rem; border:1px solid var(--border); border-radius:10px; background:var(--background); font:inherit; color:var(--foreground); }
select:focus { outline:2px solid #3a3a3c; outline-offset:2px; }
.table-card { padding:1.25rem 1rem 2rem; }
.table-wrapper { overflow-x:auto; border-radius:12px; }
table { width:100%; border-collapse:collapse; font-size:.85rem; }
thead tr { border-bottom:1px solid var(--border); }
th, td { padding:.85rem .9rem; text-align:left; }
th { font-weight:600; color:var(--muted-foreground); white-space:nowrap; }
th.right, td.right { text-align:right; }
tbody tr { border-bottom:1px solid var(--border); transition:.25s; }
tbody tr:hover { background:hsla(0, 0%, 100%, 0.04); }
.table-foot { padding: 1.5rem 1rem; text-align: center; font-size: .85rem; color: var(--muted-foreground); }
.sortable { cursor:pointer; }
.rank-icon { width:16px; height:16px; }
.badge { display:inline-block; padding:.25rem .55rem; border-radius:999px; font-size:.65rem; font-weight:600; letter-spacing:.5px; text-transform:uppercase; background: linear-gradient(145deg,#1c1c1e,#090909); color:#f0f0f0; border:1px solid #2a2a2c; }
.badge.open { background: linear-gradient(145deg,#2a2a2c,#101011); }
.badge.closed { background: linear-gradient(145deg,#3a3a3c,#1a1a1c); color:#fafafa; }
.size-small { color:hsl(0 0% 70%); font-weight:600; }
.size-medium { color:hsl(0 0% 80%); font-weight:600; }
.size-large { color:hsl(0 0% 90%); font-weight:600; }
.size-unknown { color:var(--muted-foreground); }
.score-em { font-weight:700; font-size:.95rem; background: var(--gradient-primary); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Footer */
.footer-section { background: #0d0d0e; border-top:1px solid var(--border); padding:2.5rem 0 2rem; }
.footer-grid { display:grid; gap:3rem; grid-template-columns:1fr; text-align:center; align-items: baseline; }
@media (min-width:992px){ .footer-grid{ grid-template-columns:1fr 1fr; } .footer-grid>div{text-align:center;} }
.footer-title { font-size:1.6rem; margin:0 0 1.25rem; font-weight:700; }
.contact-links { display:flex; gap:1.5rem; flex-wrap:wrap; justify-content:center; }
.contact-links a { color:#9a9a9c; font-weight:500; }
.contact-links a:hover { color:#fff; }
.patrons-block { display: flex; flex-direction: column; align-items: center; }
.patron-images { display: flex; justify-content: center; gap: 2rem; }
.patron-img { height:64px; opacity:.6; filter: invert(1); }
.copyright { font-size:.75rem; color:var(--muted-foreground); margin-top: 3rem; text-align: center; }

/* Cards & glass */
.card-elevated { background: linear-gradient(145deg,#111112,#070707); border:1px solid #1f1f21; box-shadow:0 10px 30px -12px rgba(0,0,0,.8); position:relative; }
.card-elevated:hover { box-shadow:0 18px 42px -14px rgba(0,0,0,.85); }
.card-glass { background: rgba(20,20,20,0.75); border:1px solid #202022; }

/* Modal */
.modal { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:100; }
.modal-backdrop { position:absolute; inset:0; backdrop-filter:blur(10px); background:hsla(0, 0%, 0%, 0.25); }
.modal-content { position:relative; width:100%; max-width:520px; padding:2.25rem 2rem 2.5rem; max-height:90vh; overflow-y:auto; }
.modal-content.modal-rounded { border-radius:40px !important; }
.modal-close { position:absolute; top:.75rem; right:.9rem; background:none; border:none; font-size:1.5rem; cursor:pointer; color: var(--foreground); }
.modal-form { display:flex; flex-direction:column; gap:1rem; margin-top:1rem; }
.modal-form label { font-size:.75rem; font-weight:600; letter-spacing:.5px; display:flex; flex-direction:column; gap:.35rem; text-transform:uppercase; color:var(--muted-foreground); }
.modal-form input, .modal-form textarea { padding:.75rem .85rem; border:1px solid var(--border); border-radius:18px !important; font:inherit; background-color: var(--muted); color: var(--foreground); }
.modal-bullets { font-size:.95rem; line-height:1.5; margin:0 0 .75rem 1.1rem; padding:0; }
.modal-bullets li { margin:.4rem 0; }
.copy-row { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.copy-row code { font-size:.8rem; }
.field-hint { font-size:.65rem; margin:.25rem 0 .5rem; color:var(--muted-foreground); }
.field-hint.error { color:#b10000; }
.subject-row { display:flex; justify-content:space-between; align-items:center; font-size:.7rem; background:rgba(0,0,0,0.04); padding:.4rem .6rem; border-radius:8px; margin:.5rem 0 1rem; }
.subject-row code { font-size:.75rem; }
.submit-feedback { margin-top:1rem; font-size:.75rem; background:rgba(0,0,0,0.04); padding:.75rem .85rem; border-radius:10px; }
.submit-feedback pre { background:rgba(0,0,0,0.06); padding:.6rem .7rem; border-radius:8px; overflow:auto; font-size:.65rem; }
.submit-feedback.hidden { display:none; }
.hf-example a { font-weight:600; }
.email-preview { white-space:pre-wrap; }
.modal-actions { margin-top:.5rem; display:flex; gap:.75rem; }

/* Animations on view */
.fade-on-view { opacity:0; transform:translateY(40px); transition:1s cubic-bezier(.25,1,.5,1); }
.fade-on-view.visible { opacity:1; transform:translateY(0); }

/* Utilities */
.inline-flex { display:inline-flex; }
.right { text-align:right; }
.logo-text.text-gradient { font-size: 1.5rem; font-weight: 700; font-family: 'JetBrains Mono', monospace; }
#year {color: var(--muted-foreground);}
.copyright { font-size:.75rem; color:var(--muted-foreground); margin-top: 3rem; text-align: center; }
.patron-img {
    height: 64px;
    opacity: .6;
    filter: invert(1);
}

/* === Monochrome Apple‑style Overrides === */
:root {
  --background: #050505;
  --muted: #0d0d0d;
  --foreground: #f5f5f5;
  --muted-foreground: #9a9a9a;
  --border: #1d1d1f;
  --primary: #e0e0e0;
  --primary-dark: #8d8d8d;
  --accent: #bdbdbd;
  --destructive: #666666;
  --gradient-primary: linear-gradient(140deg,#000000,#3a3a3c 55%, #525255);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", system-ui, sans-serif;
}

body { background: radial-gradient(circle at 20% 20%, #0e0e10, #030303 70%); }

.text-gradient { background:var(--gradient-primary); -webkit-background-clip: text; background-clip:text; color:transparent; }

/* Buttons */
.btn-hero, .btn-glass, .btn-outline { font-weight:600; letter-spacing:.3px; }
.btn-hero { background: linear-gradient(150deg,#ffffff 0%, #d7d7d9 28%, #8a8a8d 60%, #000000 100%); border:1px solid #b8b8bc; color:#000; }
.btn-hero:hover { background: linear-gradient(150deg,#ffffff 0%, #cfcfd1 22%, #7a7a7d 58%, #000000 100%); }
.btn-glass { background: linear-gradient(145deg,#141414,#050505); border:1px solid #2a2a2c; color: var(--foreground); }
.btn-glass:hover { background: linear-gradient(145deg,#1e1e1f,#0b0b0c); }
.btn-outline { background: transparent; border:1px solid var(--muted-foreground); color: var(--foreground); }
.btn-outline:hover { background: rgba(255,255,255,0.08); }
.small.btn-hero, .small.btn-glass, .small.btn-outline { font-weight:600; }

/* Dataset switcher */
.dataset-switcher button { background:#0e0e0f; border:1px solid #272729; color:#d7d7d7; }
.dataset-switcher button:hover { background:#181819; }
.dataset-switcher button.active { background: var(--gradient-primary); border-color:#3a3a3c; color:#fff; box-shadow:0 0 0 1px rgba(255,255,255,0.05) inset; }

/* Cards */
.card-elevated { background: linear-gradient(145deg,#111112,#070707); border:1px solid #1f1f21; box-shadow:0 10px 30px -12px rgba(0,0,0,.8); }
.card-elevated:hover { box-shadow:0 18px 42px -14px rgba(0,0,0,.85); }
.card-glass { background: rgba(20,20,20,0.75); border:1px solid #202022; }

/* Table + badges */
.badge { background: linear-gradient(145deg,#ffffff 0%, #cfcfd1 35%, #6a6a6d 70%, #000000 100%); color:#000; border:1px solid #bcbcc0; }
.badge.open { background: linear-gradient(145deg,#ffffff 0%, #dcdcdf 30%, #7a7a7d 65%, #000000 100%); }
.badge.closed { background: linear-gradient(145deg,#ffffff 0%, #d4d4d7 25%, #606063 60%, #000000 100%); }
.score-em { background: var(--gradient-primary); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Progress / bars */
.frame-progress { background:#1a1a1c; }
.frame-progress #frameProgressBar { background: var(--gradient-primary); }

/* Chart */
#valueChart polyline { stroke:#c0c0c0; }
#valueChart circle { fill:#9d9d9d; }
#chartMarker circle { fill:#ffffff; }
#chartMarker rect { fill:#3a3a3c; stroke:#4d4d4f; stroke-width:1; }
#chartMarkerValue { fill:#f5f5f5; }
.text-primary { color: var(--primary); }
.text-red { color: var(--primary); }

/* Links */
.nav-desktop a:hover:after { background: linear-gradient(90deg,#4d4d4f,#1f1f21); }
.inline-link { color: var(--primary); border-bottom:1px solid #2d2d2f; }
.inline-link:hover { color:#fff; border-color:#4d4d4f; }

/* Notes */
.note.destructive { border-color:#2d2d2f; background:#131314; }
.note.primary { border-color:#2d2d2f; background:#101010; }
.note.primary strong, .note.destructive strong { color: var(--primary); }

/* Ranges */
.controls-row input[type=range] { accent-color:#5a5a5c; }

/* Footer */
.footer-section { background: #0d0d0e; }
.contact-links a { color:#9a9a9c; }
.contact-links a:hover { color:#fff; }
.patrons-block { display: flex; flex-direction: column; align-items: center; }
.patron-images { display: flex; justify-content: center; gap: 2rem; margin-top: 1rem; }
.patron-img { height:64px; opacity:.6; filter: invert(1); }
.copyright { font-size:.75rem; color:var(--muted-foreground); margin-top: 3rem; text-align: center; }

/* Scroll indicator */
.scroll-indicator { border-color:#3a3a3c; }
.scroll-indicator .wheel { background: var(--gradient-primary); }

/* Typography tweaks */
.hero-title, .section-title { font-weight:700; letter-spacing:-.5px; }
.section-title.small { letter-spacing:0; }

/* General borders */
*, *:before, *:after { border-color:#1f1f21; }

/* Hover focus states */
button:focus, select:focus, input:focus, textarea:focus { outline:2px solid #3a3a3c; outline-offset:2px; }

/* Remove legacy color values inside components by forcing inherited grayscale */
.badge.open, .badge.closed, .size-small, .size-medium, .size-large, .size-unknown, .text-red { filter:none; }

/* === Light Theme Override (White base with black/gray accents) === */
:root {
  --background:#ffffff;
  --muted:#f5f5f7; /* subtle panel gray */
  --foreground:#111111;
  --muted-foreground:#555555;
  --border:#d0d0d4;
  --primary:#111111;
  --primary-dark:#000000;
  --accent:#2c2c2e;
  --destructive:#bb2d2d;
  --gradient-primary:linear-gradient(135deg,#000000,#5a5a5c 60%, #7d7d80);
}
body { background:radial-gradient(circle at 20% 20%, #ffffff, #f5f5f7 70%) !important; color:var(--foreground) !important; }
.text-gradient { background:var(--gradient-primary) !important; -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Sections */
.overview-section, .results-section, .episodes-section, .stats-section { background:var(--muted) !important; }
.hero-bg { background:var(--background) !important; }
.footer-section { background:var(--muted) !important; border-top:1px solid var(--border); }
.site-header.scrolled { background:rgba(255,255,255,0.72) !important; border-bottom:1px solid var(--border); }
.mobile-menu { background:rgba(255,255,255,0.85) !important; }

/* Cards */
.card-elevated { background:linear-gradient(145deg,#ffffff,#f1f1f3) !important; border:1px solid var(--border) !important; box-shadow:0 4px 20px -6px rgba(0,0,0,0.08) !important; }
.card-elevated:hover { box-shadow:0 10px 30px -10px rgba(0,0,0,0.15) !important; }
.card-glass { background:rgba(255,255,255,0.65) !important; backdrop-filter:blur(18px); border:1px solid var(--border) !important; }
.note { background:#fff !important; border:1px solid var(--border) !important; }
.note.primary { background:#f9f9fa !important; }
.note.destructive { background:#f2f2f4 !important; border-color:#d6d6da !important; }
.note.primary strong, .note.destructive strong { color:#000 !important; }

/* Buttons */
.btn-hero { background:linear-gradient(150deg,#1c1c1e,#333335) !important; color:#fff !important; border:1px solid #262628 !important; box-shadow:0 4px 10px -2px rgba(0,0,0,0.35),0 0 0 1px rgba(255,255,255,0.25) inset !important; }
.btn-hero:hover { background:linear-gradient(150deg,#000000,#2a2a2c) !important; }
.btn-glass { background:linear-gradient(145deg,#f9f9fa,#ececef) !important; color:#111 !important; border:1px solid var(--border) !important; box-shadow:0 2px 6px -2px rgba(0,0,0,0.1) !important; }
.btn-glass:hover { background:linear-gradient(145deg,#ffffff,#e4e4e6) !important; }
.btn-outline { background:transparent !important; color:#111 !important; border:1px solid #000 !important; }
.btn-outline:hover { background:#eff0f2 !important; }

/* Dataset switcher */
.dataset-switcher button { background:#ffffff !important; color:#111 !important; border:1px solid var(--border) !important; }
.dataset-switcher button:hover { background:#f0f0f2 !important; }
.dataset-switcher button.active { background:var(--gradient-primary) !important; color:#fff !important; border-color:#111 !important; box-shadow:0 0 0 1px rgba(0,0,0,0.15) inset; }

/* Episode viewer */
.viewer-media { background:linear-gradient(135deg,#ececec,#dcdcdf) !important; }
.frame-desc { background:rgba(255,255,255,0.78) !important; color:#111 !important; }
.frame-progress { background:#e2e2e4 !important; }
.frame-progress #frameProgressBar { background:var(--gradient-primary) !important; }

/* Table */
.table-wrapper table, thead tr, tbody tr, th, td { border-color:var(--border) !important; }
tbody tr:hover { background:#f4f4f6 !important; }
.badge { background:linear-gradient(145deg,#111,#3a3a3c) !important; color:#fff !important; border:1px solid #2a2a2c !important; }
.badge.open { background:linear-gradient(145deg,#2a2a2c,#4a4a4c) !important; }
.badge.closed { background:linear-gradient(145deg,#3a3a3c,#5a5a5c) !important; }
.size-small, .size-medium, .size-large, .size-unknown { color:#333 !important; }
.score-em { background:var(--gradient-primary) !important; -webkit-background-clip:text; background-clip:text; color:transparent !important; }

/* Chart (light) */
#valueChart line { stroke: #e0e0e2 !important; }
#valueChart text { fill:#555 !important; }
#valueChart polyline { stroke:#111 !important; }
#valueChart circle { fill:#2c2c2e !important; }
#chartMarker circle { fill:#000 !important; }
#chartMarker rect { fill:#2c2c2e !important; stroke:#000 !important; }
#chartMarkerValue { fill:#fff !important; }
.text-primary, .text-red { color:#111 !important; }

/* Inputs */
select, .modal-form input, .modal-form textarea { background:#ffffff !important; color:#111 !important; border:1px solid var(--border) !important; }
.controls-row input[type=range]{ accent-color:#333 !important; }

/* Footer */
.contact-links a { color:#555 !important; }
.contact-links a:hover { color:#000 !important; }
.patron-img { filter:none !important; opacity:.8 !important; }

/* Header tweaks */
.logo-img { background:#ffffff !important; border:2px solid #e2e2e4 !important; }

/* Accessibility focus */
button:focus, select:focus, input:focus, textarea:focus { outline:2px solid #111 !important; outline-offset:2px; }

/* General */
.prose { color:#333 !important; }
.stat-label, .meta-row, .chart-meta, th { color:#555 !important; }

/* Final fix for gradient text rendering (avoid black rectangles) */
.text-gradient { 
  background: linear-gradient(90deg,#000 0%, #4a4a4c 45%, #8e8e90 100%) !important;
  -webkit-background-clip: text !important; background-clip:text !important;
  color: transparent !important; -webkit-text-fill-color: transparent !important;
  display:inline-block; /* isolate painting box */
}

/* Fix malformed @supports: use simple fallback */
/* Remove broken @supports and provide no-clip fallback via prefers-contrast */
@media (forced-colors: active) {
  .text-gradient { background:none !important; color:WindowText !important; -webkit-text-fill-color:WindowText !important; }
}

/* Fix gradient text artifact inside results table (.score-em) */
.score-em { 
  background: var(--gradient-primary) !important;
  -webkit-background-clip: text !important; background-clip:text !important;
  color: transparent !important; -webkit-text-fill-color: transparent !important;
  display:inline-block; position:relative;
}
/* High contrast / forced colors fallback */
@media (forced-colors: active) { .score-em { background:none !important; color:WindowText !important; -webkit-text-fill-color:WindowText !important; } }

/* Global background image */
body::before {
  content: "";
  position: fixed; /* stay put during scroll */
  inset: 0;
  /* use HF Spaces public static folder so the file is served as a plain static file with no cookies */
  /* background: url('public/bg.png') center center / cover no-repeat; */
  z-index: -1; /* behind everything */
  opacity: 0.22; /* subtle so text stays readable */
  pointer-events: none; /* ignore interactions */
}
/* Ensure sections remain transparent enough to show image */
.hero-bg, .overview-section, .results-section, .episodes-section, .stats-section, .footer-section { background-color: transparent !important; background-image: none !important; }
.card-elevated, .card-glass, .note { backdrop-filter: blur(6px); }

/* Rounded frames override */
.viewer-media { border-radius:24px !important; }
.viewer-media img, #episodeFrame { border-radius:24px !important; }
.frame-desc { border-radius:16px !important; }
.chart-wrapper, .episode-chart, .episode-viewer { border-radius:24px !important; }

/* Additional rounding for overview heading card, filters (options), and leaderboard frame */
.overview-card,
#filters,
.table-card,
.table-wrapper,
#resultsTable,
.note,
.rule { border-radius:24px !important; }
.table-wrapper { overflow:hidden; }
#filters select, #filters .filter-group { border-radius:18px !important; }
/* Increase dataset switcher pill rounding just in case */
.dataset-switcher button { border-radius:999px !important; }
/* Slight font size increase only inside the overview card */
.overview-card .section-title { font-size:clamp(2.4rem,5.3vw,3.25rem) !important; }
.overview-card .prose { font-size:1.12rem !important; line-height:1.6 !important; }
/* Further increase overview section typography */
.overview-card .section-title { font-size:clamp(2.8rem,6vw,3.75rem) !important; }
.overview-card .prose { font-size:1.2rem !important; line-height:1.68 !important; }

/* Notes pair */
.note-pair { display:flex; flex-direction:column; gap:1rem; margin:1.25rem 0 1.75rem; }
.note-pair .note { flex:1; }
@media (min-width: 820px) { .note-pair { flex-direction:row; } }

/* Subject row styling for email matching */
.subject-row.email-row { margin-bottom:.35rem !important; }
.subject-row.email-row + .subject-row { margin-top:0 !important; }

/* Metric card */
.metric-card { margin:1rem 0 1.5rem; padding:1.75rem 1.5rem 2rem; border:1px solid var(--border); border-radius:24px; background:rgba(0,0,0,0.35); backdrop-filter:blur(8px); box-shadow:0 4px 18px -6px rgba(0,0,0,0.45); }
body:not(.dark) .metric-card { background:rgba(255,255,255,0.65); }
.metric-title { margin:0 0 1rem; font-size:1.4rem; font-weight:700; letter-spacing:.5px; }
.formula-block { font-family:"JetBrains Mono",monospace; font-size:1rem; padding:.85rem 1rem; background:rgba(0,0,0,0.55); border:1px solid #2a2a2c; border-radius:18px; overflow-x:auto; text-align:center; margin:1rem 0 1.25rem; }
body:not(.dark) .formula-block { background:rgba(255,255,255,0.75); border-color:var(--border); }
.formula-inline { font-size:1.05rem; font-weight:600; text-align:center; margin:.6rem 0 .9rem; }
.metric-card .description { font-size:.95rem; line-height:1.55; color:var(--muted-foreground); margin:.25rem 0 .75rem; }
.metric-card a { border-bottom:1px solid currentColor; }
.metric-card a:hover { opacity:.8; }
/* KaTeX tweaks */
.katex-display { margin: .25rem 0 0.75rem !important; }
.katex-display > .katex { font-size:1.1rem; }
.metric-card .katex { font-weight:500; }
/* Responsive */
@media (min-width:900px){ .metric-card { padding:2rem 2.25rem 2.35rem; } .metric-title{ font-size:1.55rem; } }

/* Overview tiles grid */
.overview-tiles { display:grid; gap:1.5rem; grid-template-columns:1fr; }
.overview-tile { border:1px solid var(--border); border-radius:24px; padding:1.5rem 1.4rem 1.75rem; background:rgba(0,0,0,0.35); backdrop-filter:blur(8px); display:flex; flex-direction:column; gap:.85rem; position:relative; overflow:hidden; }
body:not(.dark) .overview-tile { background:rgba(255,255,255,0.65); }
.overview-tile:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 120% -10%, rgba(255,255,255,0.18), transparent 60%); pointer-events:none; }
.overview-tile h3 { font-size:1.25rem; margin:0; letter-spacing:.4px; }
.overview-tile p { margin:0; font-size:.95em; line-height:1.55; }
.overview-tile code { font-size:.85em; font-weight:600; }
.overview-tile .note-pair.compact { flex-direction:column; gap:.75rem; margin:0; }
.overview-tile .note { padding:1rem 1rem 1.1rem; border-radius:18px !important; }
@media (min-width:760px){ .overview-tiles { grid-template-columns:1fr; } }
@media (min-width:1100px){ .overview-tile h3 { font-size:1.35rem; } .overview-tile { padding:1.75rem 1.6rem 2rem; } }

/* Overview tiles separated style */
.overview-tiles.separated { grid-template-columns:1fr; gap:2.2rem; }
@media (max-width:760px){ .overview-tiles.separated { grid-template-columns:1fr; } }
.overview-tiles.separated .overview-tile { background:linear-gradient(145deg,rgba(255,255,255,0.75),rgba(245,245,247,0.55)) !important; box-shadow:0 6px 28px -10px rgba(0,0,0,0.18); border:1px solid var(--border); }
body.dark .overview-tiles.separated .overview-tile { background:linear-gradient(145deg,rgba(0,0,0,0.55),rgba(0,0,0,0.35)) !important; }
.overview-tiles.separated .overview-tile { position:relative; }
.overview-tiles.separated .overview-tile:after { content:""; position:absolute; inset:0; border:1px solid rgba(255,255,255,0.15); border-radius:inherit; pointer-events:none; mix-blend-mode:overlay; opacity:.4; }

/* === Overview tile typography adjustments (increased sizing) === */
.overview-tiles.separated .overview-tile h3 { font-size:1.55rem; }
.overview-tiles.separated .overview-tile p { font-size:1.08rem; line-height:1.62; }
@media (min-width:900px){
  .overview-tiles.separated .overview-tile h3 { font-size:1.65rem; }
  .overview-tiles.separated .overview-tile p { font-size:1.12rem; }
}