:root,
html[data-theme="cosmic-workshop"] {
  --bg: #080b1a; --card: #12172b; --border: #2b3558; --text: #f5f3ff; --muted: #aab3d1;
  --accent: #ffb84c; --blue: #52d9ff; --glow-a: rgba(255,184,76,.14); --glow-b: rgba(82,217,255,.13);
  --radius: 22px; --shadow: 0 22px 55px rgba(0,0,0,.44); --font: Inter, ui-sans-serif, system-ui, sans-serif;
}
html[data-theme="rice-paper"] {
  --bg:#f2ead8; --card:#fffaf0; --border:#cdbfa6; --text:#28211b; --muted:#6f6358; --accent:#bd3f2b; --blue:#365c6f;
  --glow-a:rgba(189,63,43,.09); --glow-b:rgba(54,92,111,.08); --radius:5px; --shadow:0 14px 35px rgba(64,46,30,.12); --font:Georgia,'Times New Roman',serif;
}
html[data-theme="blueprint-lab"] {
  --bg:#063b77; --card:#0b4a8f; --border:rgba(230,247,255,.48); --text:#f5fbff; --muted:#c8e1f2; --accent:#fff26b; --blue:#9fe8ff;
  --glow-a:rgba(255,242,107,.08); --glow-b:rgba(159,232,255,.11); --radius:0; --shadow:6px 6px 0 rgba(3,28,57,.55); --font:'Courier New',ui-monospace,monospace;
}
html[data-theme="vapor-orchard"] {
  --bg:#fff1eb; --card:rgba(255,255,255,.78); --border:#d7c8ed; --text:#392d4a; --muted:#766a85; --accent:#b64b9a; --blue:#3b9e91;
  --glow-a:rgba(255,143,163,.23); --glow-b:rgba(116,208,187,.22); --radius:28px; --shadow:0 20px 45px rgba(108,79,130,.14); --font:Inter,ui-rounded,system-ui,sans-serif;
}
html[data-theme="kinetic-editorial"] {
  --bg:#f5f0df; --card:#fffdf4; --border:#111; --text:#111; --muted:#454545; --accent:#ed3d24; --blue:#1649d8;
  --glow-a:rgba(237,61,36,.08); --glow-b:rgba(22,73,216,.09); --radius:0; --shadow:8px 8px 0 #1649d8; --font:Arial,Helvetica,sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; min-height:100vh; color:var(--text); font-family:var(--font); line-height:1.5; background:radial-gradient(900px 520px at 88% -8%,var(--glow-a),transparent 60%),radial-gradient(700px 420px at -8% 25%,var(--glow-b),transparent 62%),var(--bg); }
.wrap { width:min(1080px,calc(100% - 48px)); margin-inline:auto; }
.theme-control { position:fixed; z-index:20; top:18px; right:18px; display:flex; align-items:center; gap:9px; padding:8px 10px; border:1px solid var(--border); border-radius:var(--radius); background:color-mix(in srgb,var(--card) 88%,transparent); box-shadow:var(--shadow); backdrop-filter:blur(16px); }
.theme-control label { font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.theme-control select { max-width:175px; padding:7px 28px 7px 9px; color:var(--text); border:1px solid var(--border); border-radius:max(0px,calc(var(--radius)*.55)); background:var(--card); font:600 12px var(--font); }
.music-hero { padding:82px 0 58px; border-bottom:1px solid var(--border); }
.back-link { display:inline-flex; margin-bottom:46px; color:var(--muted); text-decoration:none; font-size:.86rem; }
.back-link:hover { color:var(--accent); }
.eyebrow,.section-label,.tag { color:var(--accent); text-transform:uppercase; letter-spacing:.14em; font-weight:800; font-size:11px; }
.eyebrow { margin:0 0 12px; }
h1 { max-width:760px; margin:0 0 14px; font-size:clamp(2.8rem,7vw,5.2rem); line-height:.96; letter-spacing:-.055em; }
.lede { max-width:700px; margin:0; color:var(--muted); font-size:clamp(1rem,2vw,1.2rem); }
main { padding:72px 0 100px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:32px; margin-bottom:32px; }
.section-label { margin:0 0 8px; }
h2 { margin:0; font-size:clamp(1.8rem,4vw,2.7rem); letter-spacing:-.03em; }
.section-intro { max-width:420px; margin:0; color:var(--muted); }
.video-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; max-width:1080px; margin-inline:auto; }
.video-card { display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--border); border-radius:var(--radius); background:var(--card); box-shadow:var(--shadow); }
.portrait-player { width:min(230px,calc(100% - 40px)); aspect-ratio:9/16; min-height:0; margin:24px auto 0; border-radius:max(0px,calc(var(--radius)*.55)); background:#05070d; overflow:hidden; }
.portrait-player video { display:block; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; background:#05070d; }
.video-copy { display:flex; flex-direction:column; padding:28px 24px; }
.tag { display:inline-block; margin-bottom:13px; }
.video-copy h3 { margin:0 0 12px; font-size:1.4rem; line-height:1.12; }
.video-copy p { margin:0; color:var(--muted); font-size:.92rem; }
.video-meta { margin-top:auto; padding-top:22px; color:var(--muted); font-size:.75rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
footer { padding:30px 0; color:var(--muted); border-top:1px solid var(--border); font-size:.84rem; }
html[data-theme="blueprint-lab"] body { background-image:linear-gradient(rgba(255,255,255,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.075) 1px,transparent 1px); background-size:24px 24px; }
html[data-theme="blueprint-lab"] .video-card,html[data-theme="kinetic-editorial"] .video-card { border-width:3px; }
html[data-theme="vapor-orchard"] .video-card { backdrop-filter:blur(18px); }
html[data-theme="kinetic-editorial"] h1,html[data-theme="kinetic-editorial"] h3 { text-transform:uppercase; }
@media (max-width:1000px) { .video-grid { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:760px; } }
@media (max-width:800px) { .section-heading { align-items:flex-start; flex-direction:column; gap:12px; } .video-grid { grid-template-columns:1fr; max-width:520px; } .video-card { margin-inline:auto; } }
@media (max-width:620px) { .wrap { width:min(100% - 32px,420px); } .theme-control { position:static; justify-content:space-between; margin:12px; } .music-hero { padding-top:44px; } .back-link { margin-bottom:36px; } .portrait-player { width:min(230px,calc(100% - 32px)); margin-top:18px; } .video-copy { padding:22px 20px 24px; } }