/* ═══════════════════════════════════════════════════════════════════ TRACKGLEAM THEME PACK — user-selectable themes ═══════════════════════════════════════════════════════════════════ INTEGRATION (every page that links style.css): 1. BEFORE the style.css , add this one-liner to avoid FOUC: 2. AFTER the style.css : 3. At the end of (or with the other deferred scripts): RULES: - Default theme ("Obsidian") = zero overrides; this file only ADDS new vars on :root (canvas hooks, --bg-elev, --muted) whose values equal the current hardcoded fallbacks, so the default look is pixel-identical. - Themes scope everything under html[data-theme="..."]. They never hide, remove, or display:none any engine element (#waveCanvas, #specCanvas, #eqCanvas, #workspaceGrid, cards, buttons, meters); layout changes are spacing/borders/radii/grid-template only. - Canvas hooks every theme defines (app.js re-reads them on the 'tg-theme-changed' event): --wave-played --wave-idle --playhead --spec-top --spec-bottom ═══════════════════════════════════════════════════════════════════ */ /* ─── Default theme: new hooks only (values match current look) ─── */ :root { --wave-played: #e8a758; --wave-idle: rgba(232,167,88,0.30); --playhead: #e8a758; --spec-top: #f0c070; --spec-bottom: #e8934a; /* chat.js reads var(--bg-elev,#111116); i18n/voice read var(--muted,#9aa2b1). Neither var existed in style.css — defining them at their fallback values keeps the default theme identical while letting themes override them. */ --bg-elev: #111116; --muted: #9aa2b1; } /* Wire the DOM playhead to the hook so themes recolor it instantly. */ .playhead { background: var(--playhead); } .playhead::after { background: var(--playhead); } /* ════════════════════════════════════════════════════════════════ DAYLIGHT — clean light studio ════════════════════════════════════════════════════════════════ */ html[data-theme="daylight"] { --bg: #f5f3ed; --bg-subtle: #eeece4; --surface: rgba(255,255,255,0.72); --surface-solid: #ffffff; --surface-2: rgba(255,255,255,0.60); --surface-3: rgba(250,248,242,0.65); --surface-raised: rgba(255,255,255,0.88); --glass: rgba(255,255,255,0.55); --glass-border: rgba(22,24,44,0.10); --glass-border-hover: rgba(22,24,44,0.18); --border: rgba(22,24,44,0.12); --border-subtle: rgba(22,24,44,0.07); --border-accent: rgba(184,116,26,0.35); --text: #1c1d26; --text-secondary: rgba(28,29,38,0.70); --text-muted: rgba(28,29,38,0.46); --text-micro: rgba(28,29,38,0.34); --accent: #b8741a; --accent-dim: rgba(184,116,26,0.12); --accent-glow: rgba(184,116,26,0.07); --accent-2: #0f8a68; --accent-2-dim: rgba(15,138,104,0.12); --accent-3: #5b4bc4; --accent-3-dim: rgba(91,75,196,0.12); --green: #0f8a68; --yellow: #8a6d00; --red: #c73434; --bg-elev: #ffffff; --muted: #565d6e; --wave-played: #b8741a; --wave-idle: rgba(184,116,26,0.32); --playhead: #b8741a; --spec-top: #c98a2e; --spec-bottom: #8a5a12; } /* Hardcoded dark backgrounds in style.css → light equivalents */ html[data-theme="daylight"] body::before { background: radial-gradient(ellipse 80% 60% at 20% 10%, rgba(91,75,196,0.06), transparent 50%), radial-gradient(ellipse 60% 50% at 80% 80%, rgba(184,116,26,0.06), transparent 50%); } html[data-theme="daylight"] .header { background: rgba(247,245,239,0.85); } html[data-theme="daylight"] .upload-zone:hover, html[data-theme="daylight"] .upload-zone.dragover { background: rgba(255,255,255,0.92); } html[data-theme="daylight"] .wave-loading { background: rgba(255,255,255,0.6); } html[data-theme="daylight"] .cookie-banner { background: rgba(255,255,255,0.96); box-shadow: 0 16px 48px rgba(24,26,44,0.18); } html[data-theme="daylight"] .modal { background: rgba(24,26,40,0.5); } html[data-theme="daylight"] .toast { background: #ffffff; border-color: rgba(22,24,44,0.16); box-shadow: 0 12px 40px -8px rgba(24,26,44,0.28); } html[data-theme="daylight"] .toast.err { background: #fdf0f2; border-color: rgba(199,52,52,0.4); color: #9f1239; } html[data-theme="daylight"] ::-webkit-scrollbar-thumb { background: rgba(22,24,44,0.22); } html[data-theme="daylight"] ::-webkit-scrollbar-thumb:hover { background: rgba(22,24,44,0.34); } /* white-alpha fills read as nothing on a light page → ink-alpha */ html[data-theme="daylight"] .trust-chip, html[data-theme="daylight"] .hdr-pill, html[data-theme="daylight"] .up-fmt, html[data-theme="daylight"] .stat-box, html[data-theme="daylight"] .genre-btn, html[data-theme="daylight"] .int-btn, html[data-theme="daylight"] .t-btn, html[data-theme="daylight"] .ab-toggle, html[data-theme="daylight"] .ref-icon, html[data-theme="daylight"] .ref-stat, html[data-theme="daylight"] .cookie-btn, html[data-theme="daylight"] select.ctrl-sel, html[data-theme="daylight"] .stream-toggle, html[data-theme="daylight"] .ba-col, html[data-theme="daylight"] .adv-toggle, html[data-theme="daylight"] .ref-section { background: rgba(20,22,44,0.045); } html[data-theme="daylight"] .stat-box:hover, html[data-theme="daylight"] .genre-btn:hover { background: rgba(20,22,44,0.09); } html[data-theme="daylight"] input[type=range] { background: rgba(20,22,44,0.15); } html[data-theme="daylight"] input[type=range]::-webkit-slider-thumb { border-color: #fff; } html[data-theme="daylight"] .stat-bar, html[data-theme="daylight"] .prog-bar { background: rgba(20,22,44,0.10); } html[data-theme="daylight"] .tog { background: rgba(20,22,44,0.14); } html[data-theme="daylight"] .dntog { background: rgba(20,22,44,0.28); } html[data-theme="daylight"] .eq-vis { background: rgba(20,22,44,0.05); } html[data-theme="daylight"] .meter-bar, html[data-theme="daylight"] .mb-gr-track { background: rgba(20,22,44,0.10); } html[data-theme="daylight"] .mr-cell { background: rgba(20,22,44,0.05); border-color: rgba(20,22,44,0.08); } html[data-theme="daylight"] .meter-bridge, html[data-theme="daylight"] .master-report { background: linear-gradient(180deg, rgba(255,255,255,0.65), rgba(240,238,230,0.65)); } html[data-theme="daylight"] .wave-hover { background: rgba(20,22,44,0.25); } html[data-theme="daylight"] .ai-upsell { background: radial-gradient(120% 140% at 100% 0%, rgba(91,75,196,0.10), transparent 55%), linear-gradient(180deg, rgba(91,75,196,0.05), rgba(255,255,255,0.5)); } /* hardcoded light-lavender AI text → readable dark violet */ html[data-theme="daylight"] .ai-upsell-preview, html[data-theme="daylight"] .ai-upsell-preview:hover:not(:disabled), html[data-theme="daylight"] .ai-upsell-preview.loading, html[data-theme="daylight"] .ai-upsell-preview.ready, html[data-theme="daylight"] .wm-legend, html[data-theme="daylight"] .trust-chip.ai, html[data-theme="daylight"] .ai-pack-btn, html[data-theme="daylight"] .ai-move-chip, html[data-theme="daylight"] .ai-delta, html[data-theme="daylight"] .ab-btn.ab-ai:hover, html[data-theme="daylight"] .dl-btn.ai, html[data-theme="daylight"] #renderBar .dl-btn.ai, html[data-theme="daylight"] .ai-upsell-btn.sub { color: #4b3fb0; } html[data-theme="daylight"] .ai-delta b, html[data-theme="daylight"] .ai-done-code b { color: #372c8c; } html[data-theme="daylight"] .ai-upsell-btn.sub .ai-price { color: #372c8c; background: rgba(91,75,196,0.14); } html[data-theme="daylight"] .ai-pack-btn.life { color: #8a5a12; } html[data-theme="daylight"] .mr-verified { color: #0d7a4f; } html[data-theme="daylight"] .mr-verified.warn { color: #946300; } html[data-theme="daylight"] .mb-value.tp-warn { color: #c73434; } /* dark-on-accent text that assumed a light accent → white on the darker daylight accents */ html[data-theme="daylight"] .int-btn.active, html[data-theme="daylight"] .ab-btn.active, html[data-theme="daylight"] .t-btn.play, html[data-theme="daylight"] .cookie-btn.primary { color: #fff; } html[data-theme="daylight"] .ab-btn.ab-ai.active { background: var(--accent-3); color: #fff; } html[data-theme="daylight"] .hero h1 span { background: linear-gradient(135deg, #b8741a, #8a5a12); -webkit-background-clip: text; background-clip: text; } /* chat widget (chat.js hardcodes dark fallbacks; vars now win) */ html[data-theme="daylight"] .tg-b.bot { background: rgba(20,22,44,0.05); } html[data-theme="daylight"] .tg-card { background: rgba(20,22,44,0.03); } html[data-theme="daylight"] .tg-card input, html[data-theme="daylight"] .tg-form textarea { background: rgba(20,22,44,0.05); } html[data-theme="daylight"] .tg-chip { background: rgba(20,22,44,0.05); } html[data-theme="daylight"] .tg-x:hover { background: rgba(20,22,44,0.08); } html[data-theme="daylight"] .tg-b a { color: #8a5a12; } /* language switcher (i18n.js hardcodes #eee text / dark pill) */ html[data-theme="daylight"] #langSwitch { background: rgba(255,255,255,0.9); border-color: rgba(22,24,44,0.16); } html[data-theme="daylight"] #langSwitch select { color: #1c1d26; } html[data-theme="daylight"] #langSwitch select option { background: #fff; color: #1c1d26; } /* ════════════════════════════════════════════════════════════════ TERMINAL — CRT phosphor ════════════════════════════════════════════════════════════════ */ html[data-theme="terminal"] { --bg: #040604; --bg-subtle: #060a06; --surface: rgba(6,12,7,0.92); --surface-solid: #081008; --surface-2: rgba(10,18,11,0.9); --surface-3: rgba(12,22,13,0.9); --surface-raised: rgba(10,18,11,0.96); --glass: rgba(6,12,7,0.9); --glass-border: rgba(51,255,102,0.24); --glass-border-hover: rgba(51,255,102,0.45); --border: rgba(51,255,102,0.24); --border-subtle: rgba(51,255,102,0.13); --border-accent: rgba(255,176,0,0.4); --text: #c8ffd8; --text-secondary: rgba(170,255,196,0.62); --text-muted: rgba(170,255,196,0.36); --text-micro: rgba(170,255,196,0.25); --accent: #33ff66; --accent-dim: rgba(51,255,102,0.10); --accent-glow: rgba(51,255,102,0.06); --accent-2: #ffb000; --accent-2-dim: rgba(255,176,0,0.10); --accent-3: #ffb000; --accent-3-dim: rgba(255,176,0,0.10); --green: #33ff66; --yellow: #ffb000; --red: #ff5544; --r-sm: 0; --r-md: 2px; --r-lg: 2px; --r-xl: 4px; --r-pill: 3px; --font-sans: 'JetBrains Mono', 'SF Mono', monospace; --page-pad: 22px; --bg-elev: #081008; --muted: rgba(170,255,196,0.5); --wave-played: #33ff66; --wave-idle: rgba(51,255,102,0.28); --playhead: #ffb000; --spec-top: #66ff99; --spec-bottom: #1a8f3c; } /* scanline overlay (replaces the ambient radial layer; sits above content, below toasts/lang pill/chat, never intercepts clicks) */ html[data-theme="terminal"] body::before { background: repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 2px, rgba(51,255,102,0.04) 2px 3px); z-index: 9997; animation: thmScan 8s linear infinite; } @keyframes thmScan { to { background-position: 0 3px; } } @media (prefers-reduced-motion: reduce) { html[data-theme="terminal"] body::before { animation: none; } } /* hard 1px borders, no glow, no glass */ html[data-theme="terminal"] .card, html[data-theme="terminal"] .section, html[data-theme="terminal"] .faq-item, html[data-theme="terminal"] .seo-feat, html[data-theme="terminal"] .article-card, html[data-theme="terminal"] .legal-block, html[data-theme="terminal"] .cookie-banner { backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; border: 1px solid rgba(51,255,102,0.28); } html[data-theme="terminal"] .cookie-banner { background: rgba(4,8,4,0.96); } html[data-theme="terminal"] .header { background: rgba(3,6,3,0.92); } /* denser spacing */ html[data-theme="terminal"] .card-body { padding: 14px; } html[data-theme="terminal"] .card-head { padding: 10px 14px; } html[data-theme="terminal"] .hero { padding: 34px 0 24px; } html[data-theme="terminal"] .upload-zone { padding: 38px 24px; } html[data-theme="terminal"] .workspace { gap: 10px; } html[data-theme="terminal"] .ws-left, html[data-theme="terminal"] .ws-right { gap: 10px; } html[data-theme="terminal"] .hero h1 { letter-spacing: 0; font-size: 34px; } html[data-theme="terminal"] .hero h1 span { background: none; -webkit-text-fill-color: #33ff66; text-shadow: 0 0 14px rgba(51,255,102,0.45); } html[data-theme="terminal"] .logo-mark { border-radius: 2px; background: #33ff66; color: #031007; box-shadow: none; } html[data-theme="terminal"] .master-btn { background: #33ff66; animation: none; color: #031007; box-shadow: none; border: 1px solid #33ff66; border-radius: 2px; padding: 16px; } html[data-theme="terminal"] .master-btn:hover { transform: none; background: #5cff85; box-shadow: 0 0 18px rgba(51,255,102,0.35); } html[data-theme="terminal"] .dl-jump { background: #33ff66; color: #031007; box-shadow: none; border-radius: 2px; } html[data-theme="terminal"] .t-btn.play { background: #33ff66; border-color: #33ff66; box-shadow: none; } html[data-theme="terminal"] .t-btn.play:hover { background: #5cff85; box-shadow: none; } html[data-theme="terminal"] .playhead { box-shadow: 0 0 8px rgba(255,176,0,0.5); } html[data-theme="terminal"] .playhead::after { box-shadow: 0 0 6px rgba(255,176,0,0.6); } html[data-theme="terminal"] .wave-played { background: rgba(51,255,102,0.07); } /* pull the hardcoded lavender AI accents onto the amber phosphor */ html[data-theme="terminal"] .ai-upsell-preview, html[data-theme="terminal"] .wm-legend, html[data-theme="terminal"] .trust-chip.ai, html[data-theme="terminal"] .ai-pack-btn, html[data-theme="terminal"] .ai-move-chip, html[data-theme="terminal"] .ai-delta, html[data-theme="terminal"] .dl-btn.ai, html[data-theme="terminal"] #renderBar .dl-btn.ai { color: #ffcf7a; } html[data-theme="terminal"] .ai-upsell { background: linear-gradient(180deg, rgba(255,176,0,0.05), rgba(0,0,0,0.3)); border-color: rgba(255,176,0,0.3); } html[data-theme="terminal"] .ai-upsell-btn { background: #ffb000; color: #1a1000; } /* ════════════════════════════════════════════════════════════════ VAPOR — vaporwave indigo / pink / cyan ════════════════════════════════════════════════════════════════ */ html[data-theme="vapor"] { --bg: #120e2e; --bg-subtle: #171137; --surface: rgba(34,24,74,0.66); --surface-solid: #1e1746; --surface-2: rgba(42,30,88,0.6); --surface-3: rgba(52,38,104,0.55); --surface-raised: rgba(40,29,86,0.85); --glass: rgba(30,22,66,0.55); --glass-border: rgba(255,113,206,0.16); --glass-border-hover: rgba(1,205,254,0.32); --border: rgba(244,237,255,0.10); --border-subtle: rgba(244,237,255,0.06); --border-accent: rgba(255,113,206,0.35); --text: #f4edff; --text-secondary: rgba(244,237,255,0.66); --text-muted: rgba(244,237,255,0.38); --text-micro: rgba(244,237,255,0.26); --accent: #ff71ce; --accent-dim: rgba(255,113,206,0.14); --accent-glow: rgba(255,113,206,0.08); --accent-2: #01cdfe; --accent-2-dim: rgba(1,205,254,0.12); --accent-3: #b967ff; --accent-3-dim: rgba(185,103,255,0.14); --green: #05ffa1; --yellow: #fffb96; --red: #ff6b9d; --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 26px; --bg-elev: #1e1746; --muted: rgba(244,237,255,0.5); --wave-played: #ff71ce; --wave-idle: rgba(1,205,254,0.30); --playhead: #01cdfe; --spec-top: #ff71ce; --spec-bottom: #01cdfe; } html[data-theme="vapor"] body::before { background: radial-gradient(ellipse 80% 60% at 15% 8%, rgba(255,113,206,0.09), transparent 55%), radial-gradient(ellipse 70% 55% at 85% 85%, rgba(1,205,254,0.08), transparent 55%); } /* soft glow shadows */ html[data-theme="vapor"] .card, html[data-theme="vapor"] .section, html[data-theme="vapor"] .seo-feat, html[data-theme="vapor"] .faq-item { box-shadow: 0 0 0 1px rgba(255,113,206,0.05), 0 10px 40px rgba(1,205,254,0.09), 0 0 60px rgba(255,113,206,0.06); } html[data-theme="vapor"] .header { background: rgba(18,14,46,0.82); } /* animated slow gradient headline */ html[data-theme="vapor"] .hero h1, html[data-theme="vapor"] .hero h1 span { background: linear-gradient(90deg, #ff71ce, #b967ff, #01cdfe, #ff71ce); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: thmVaporFlow 12s ease-in-out infinite alternate; } @keyframes thmVaporFlow { from { background-position: 0% 50%; } to { background-position: 100% 50%; } } @media (prefers-reduced-motion: reduce) { html[data-theme="vapor"] .hero h1, html[data-theme="vapor"] .hero h1 span { animation: none; } } html[data-theme="vapor"] .logo-mark { background: linear-gradient(135deg, #ff71ce, #b967ff 55%, #01cdfe); color: #120e2e; box-shadow: 0 2px 14px rgba(255,113,206,0.35); } html[data-theme="vapor"] .master-btn { background: linear-gradient(120deg, #ff71ce, #b967ff, #01cdfe, #b967ff, #ff71ce); background-size: 220% 100%; color: #160f38; box-shadow: 0 4px 28px rgba(255,113,206,0.35), 0 4px 28px rgba(1,205,254,0.2), inset 0 1px 0 rgba(255,255,255,0.3); } html[data-theme="vapor"] .master-btn:hover { box-shadow: 0 14px 48px rgba(255,113,206,0.5), 0 8px 40px rgba(1,205,254,0.3), inset 0 1px 0 rgba(255,255,255,0.35); } html[data-theme="vapor"] .dl-jump { background: linear-gradient(135deg, #ff71ce, #b967ff 55%, #01cdfe); color: #160f38; box-shadow: 0 3px 18px rgba(255,113,206,0.4); } html[data-theme="vapor"] .t-btn.play { background: #ff71ce; border-color: #ff71ce; color: #160f38; box-shadow: 0 2px 16px rgba(255,113,206,0.4); } html[data-theme="vapor"] .t-btn.play:hover { background: #ff8fd8; box-shadow: 0 4px 22px rgba(255,113,206,0.5); } html[data-theme="vapor"] .playhead { box-shadow: 0 0 10px rgba(1,205,254,0.6); } html[data-theme="vapor"] .playhead::after { box-shadow: 0 0 8px rgba(1,205,254,0.7); } html[data-theme="vapor"] .wave-played { background: rgba(255,113,206,0.07); } html[data-theme="vapor"] .upload-zone:hover, html[data-theme="vapor"] .upload-zone.dragover { border-color: rgba(255,113,206,0.45); background: rgba(34,24,74,0.85); } /* ════════════════════════════════════════════════════════════════ STUDIO — hardware rack, graphite + amber LEDs ════════════════════════════════════════════════════════════════ */ html[data-theme="studio"] { --bg: #0e0f12; --bg-subtle: #121317; --surface: #17181d; --surface-solid: #17181d; --surface-2: #1b1c22; --surface-3: #1f2027; --surface-raised: #1d1e24; --glass: #17181d; --glass-border: #2b2d35; --glass-border-hover: #3a3d47; --border: #2b2d35; --border-subtle: #22232a; --border-accent: rgba(255,179,64,0.4); --text: #e8e6df; --text-secondary: rgba(232,230,223,0.62); --text-muted: rgba(232,230,223,0.36); --text-micro: rgba(232,230,223,0.25); --accent: #ffb340; --accent-dim: rgba(255,179,64,0.12); --accent-glow: rgba(255,179,64,0.07); --accent-2: #57e389; --accent-2-dim: rgba(87,227,137,0.10); --green: #57e389; --yellow: #ffb340; --red: #ff5d3a; --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 10px; --r-pill: 6px; --bg-elev: #17181d; --muted: rgba(232,230,223,0.5); --wave-played: #ffb340; --wave-idle: rgba(255,179,64,0.25); --playhead: #ffd08a; --spec-top: #ffd08a; --spec-bottom: #b3672a; } html[data-theme="studio"] body::before { background: linear-gradient(180deg, rgba(255,255,255,0.015), transparent 30%); } /* rack units: solid brushed-dark cards, inset machining */ html[data-theme="studio"] .card, html[data-theme="studio"] .section, html[data-theme="studio"] .seo-feat, html[data-theme="studio"] .faq-item, html[data-theme="studio"] .article-card, html[data-theme="studio"] .legal-block { backdrop-filter: none; -webkit-backdrop-filter: none; background: linear-gradient(180deg, #191a20, #15161b); border: 1px solid #2b2d35; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 0 rgba(0,0,0,0.55), 0 6px 18px rgba(0,0,0,0.35); } /* thin top rack rail with corner screws */ html[data-theme="studio"] .card::before, html[data-theme="studio"] .section::before { content: ""; display: block; height: 10px; background: radial-gradient(circle at 14px 5px, #0b0c0e 2px, rgba(0,0,0,0) 3px), radial-gradient(circle at calc(100% - 14px) 5px, #0b0c0e 2px, rgba(0,0,0,0) 3px), linear-gradient(180deg, #34363e, #1e2025); border-bottom: 1px solid #0c0d10; } html[data-theme="studio"] .header { background: rgba(14,15,18,0.92); border-bottom-color: #2b2d35; } /* uppercase letter-spaced section labels */ html[data-theme="studio"] .card-title { color: #ffb340; letter-spacing: 3px; } html[data-theme="studio"] .sec-title, html[data-theme="studio"] .up-title, html[data-theme="studio"] .seo-h2, html[data-theme="studio"] .modal-title, html[data-theme="studio"] .intensity-label span:first-child { text-transform: uppercase; letter-spacing: 1.5px; } /* stacked full-width rack units */ html[data-theme="studio"] .workspace { grid-template-columns: 1fr; } html[data-theme="studio"] .hero h1 span { background: linear-gradient(135deg, #ffb340, #ffd08a); -webkit-background-clip: text; background-clip: text; } html[data-theme="studio"] .logo-mark { background: linear-gradient(180deg, #34363e, #1e2025); color: #ffb340; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 8px rgba(0,0,0,0.5); text-shadow: 0 0 10px rgba(255,179,64,0.6); } /* hardware push-button master: graphite face, amber LED text */ html[data-theme="studio"] .master-btn { background: linear-gradient(180deg, #2a2c33, #191b20); animation: none; color: #ffb340; border: 1px solid #3a3d45; text-shadow: 0 0 12px rgba(255,179,64,0.65); box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), inset 0 -2px 4px rgba(0,0,0,0.5), 0 4px 14px rgba(0,0,0,0.4); } html[data-theme="studio"] .master-btn:hover { transform: none; background: linear-gradient(180deg, #31333b, #1e2026); box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), inset 0 -2px 4px rgba(0,0,0,0.5), 0 0 24px rgba(255,179,64,0.25); } html[data-theme="studio"] .t-btn.play { box-shadow: 0 0 14px rgba(255,179,64,0.35), inset 0 1px 0 rgba(255,255,255,0.25); } html[data-theme="studio"] .playhead { box-shadow: 0 0 8px rgba(255,208,138,0.55); } html[data-theme="studio"] .playhead::after { box-shadow: 0 0 6px rgba(255,208,138,0.65); } html[data-theme="studio"] .meter-bar, html[data-theme="studio"] .mb-gr-track { background: rgba(0,0,0,0.55); border: 1px solid rgba(0,0,0,0.6); box-shadow: inset 0 1px 2px rgba(0,0,0,0.8); } html[data-theme="studio"] .eq-vis { background: rgba(0,0,0,0.35); box-shadow: inset 0 1px 3px rgba(0,0,0,0.7); } /* ════════════════════════════════════════════════════════════════ MONO — high-contrast black/white editorial, single accent ════════════════════════════════════════════════════════════════ */ html[data-theme="mono"] { --bg: #000000; --bg-subtle: #000000; --surface: #0a0a0a; --surface-solid: #0a0a0a; --surface-2: #101010; --surface-3: #141414; --surface-raised: #101010; --glass: #0a0a0a; --glass-border: rgba(255,255,255,0.85); --glass-border-hover: #ffffff; --border: rgba(255,255,255,0.85); --border-subtle: rgba(255,255,255,0.3); --border-accent: #ffd60a; --text: #ffffff; --text-secondary: rgba(255,255,255,0.72); --text-muted: rgba(255,255,255,0.46); --text-micro: rgba(255,255,255,0.34); --accent: #ffd60a; --accent-dim: rgba(255,214,10,0.15); --accent-glow: rgba(255,214,10,0.08); --accent-2: #ffffff; --accent-2-dim: rgba(255,255,255,0.10); --accent-3: #ffd60a; --accent-3-dim: rgba(255,214,10,0.15); --r-sm: 0; --r-md: 0; --r-lg: 0; --r-xl: 0; --r-pill: 0; --bg-elev: #0a0a0a; --muted: rgba(255,255,255,0.5); --wave-played: #ffd60a; --wave-idle: rgba(255,255,255,0.35); --playhead: #ffffff; --spec-top: #ffd60a; --spec-bottom: #666666; } html[data-theme="mono"] body::before { background: none; } /* thick 2px borders, no gradients, no shadows, no glass */ html[data-theme="mono"] .card, html[data-theme="mono"] .section, html[data-theme="mono"] .faq-item, html[data-theme="mono"] .seo-feat, html[data-theme="mono"] .article-card, html[data-theme="mono"] .legal-block, html[data-theme="mono"] .upload-zone, html[data-theme="mono"] .cookie-banner, html[data-theme="mono"] .modal-content { backdrop-filter: none; -webkit-backdrop-filter: none; background: #0a0a0a; border: 2px solid #fff; box-shadow: none; } html[data-theme="mono"] .upload-zone { border-style: dashed; } html[data-theme="mono"] .upload-zone::before { display: none; } html[data-theme="mono"] .header { background: #000; border-bottom: 2px solid #fff; } html[data-theme="mono"] .hero h1 span { background: none; -webkit-text-fill-color: #ffd60a; } html[data-theme="mono"] .logo-mark { background: #ffd60a; color: #000; box-shadow: none; border-radius: 0; } html[data-theme="mono"] .master-btn { background: #ffd60a; animation: none; color: #000; box-shadow: none; border: 2px solid #ffd60a; border-radius: 0; } html[data-theme="mono"] .master-btn:hover { transform: none; background: #ffe14d; box-shadow: none; } html[data-theme="mono"] .dl-jump { background: #ffd60a; color: #000; box-shadow: none; animation: dlJumpIn 0.35s cubic-bezier(0.22,1,0.36,1); border-radius: 0; } html[data-theme="mono"] .t-btn.play { background: #ffd60a; border-color: #ffd60a; color: #000; box-shadow: none; } html[data-theme="mono"] .t-btn.play:hover { background: #ffe14d; box-shadow: none; } html[data-theme="mono"] .genre-btn.active { background: #ffd60a; border-color: #ffd60a; color: #000; } html[data-theme="mono"] .ab-btn.active { background: #ffd60a; color: #000; } html[data-theme="mono"] .ab-btn.ab-ai.active { background: #ffd60a; color: #000; } html[data-theme="mono"] .int-btn.active { background: #ffd60a; border-color: #ffd60a; color: #000; } html[data-theme="mono"] .cookie-btn.primary { background: #ffd60a; border-color: #ffd60a; color: #000; } html[data-theme="mono"] .playhead { box-shadow: none; } html[data-theme="mono"] .playhead::after { box-shadow: none; } html[data-theme="mono"] .wave-played { background: rgba(255,214,10,0.08); } html[data-theme="mono"] .prog-fill { background: #ffd60a; } html[data-theme="mono"] .dl-btn, html[data-theme="mono"] .dl-btn.mp3, html[data-theme="mono"] #renderBar .dl-btn, html[data-theme="mono"] #renderBar .dl-btn.ai { border: 2px solid #fff; background: none; color: #fff; } html[data-theme="mono"] .dl-btn .dl-fmt { background: rgba(255,255,255,0.15); } html[data-theme="mono"] .meter-bridge, html[data-theme="mono"] .master-report, html[data-theme="mono"] .ai-upsell { background: #0a0a0a; border: 2px solid #fff; } html[data-theme="mono"] .ai-upsell-btn { background: #ffd60a; color: #000; box-shadow: none; } html[data-theme="mono"] .ai-upsell-btn:hover:not(:disabled) { transform: none; box-shadow: none; background: #ffe14d; } html[data-theme="mono"] .ai-upsell-preview, html[data-theme="mono"] .wm-legend, html[data-theme="mono"] .trust-chip.ai, html[data-theme="mono"] .ai-pack-btn, html[data-theme="mono"] .ai-move-chip, html[data-theme="mono"] .ai-delta, html[data-theme="mono"] .dl-btn.ai { color: #ffd60a; } html[data-theme="mono"] .toast { background: #0a0a0a; border: 2px solid #fff; box-shadow: none; } /* Spectrum analyzer hue per theme (drawSpec reads --spec-hue) */ :root{--spec-hue:30} html[data-theme="daylight"]{--spec-hue:30} html[data-theme="terminal"]{--spec-hue:135} html[data-theme="vapor"]{--spec-hue:315} html[data-theme="studio"]{--spec-hue:38} html[data-theme="mono"]{--spec-hue:52} /* Daylight: cookie-banner primary button needs dark-on-light contrast */ html[data-theme="daylight"] .cookie-btn.primary{background:#b8741a;color:#fff;border-color:#b8741a}