:root{
  --bg:#0e1b2a; --panel:#111f33; --elev:#13243a; --text:#f2ead8;
  --muted:#b9c3cf; --brand:#f4c76a; --brand-2:#ffd990;
  --ring: 0 0 0 3px rgba(244,199,106,.35);
  --shadow: 0 14px 40px rgba(0,0,0,.35);
  --radius:14px; --radius-sm:10px; --radius-xs:8px;
  color-scheme: dark;
}
[data-theme="light"]{
  --bg:#fffdf8; --panel:#fff; --elev:#fff; --text:#0f1722; --muted:#5b6472;
  --brand:#e2a73f; --brand-2:#ffd990; --shadow: 0 14px 40px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{margin:0; background:var(--bg); color:var(--text); font:16px/1.55 "Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
a{color:var(--brand)} a:hover{color:var(--brand-2)}
.container{max-width:1100px; margin:0 auto; padding:0 20px}
header.nav{position:sticky; top:0; z-index:40; backdrop-filter:saturate(140%) blur(8px);
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  border-bottom:1px solid color-mix(in oklab, var(--muted) 16%, transparent);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 0}
.brand{display:flex; align-items:center; gap:12px; font-weight:900; letter-spacing:.3px}
.brand img{width:38px; height:38px; object-fit:contain; border-radius:8px; background:#0b1422}
.brand .wordmark{font-variant:small-caps}
.nav-links{display:flex; flex-wrap:wrap; gap:8px}
.nav-links a{padding:8px 12px; border-radius:999px; text-decoration:none; color:var(--text)}
.nav-links a:hover,.nav-links a:focus{background:rgba(255,217,144,.12); outline:none}
.theme-toggle{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  border:1px solid color-mix(in oklab, var(--muted) 24%, transparent); background:var(--panel); color:var(--text); cursor:pointer;}
main{padding:34px 0 56px}
.hero{padding:60px 0 10px}
h1{font-size: clamp(28px, 4vw, 48px); margin:0 0 10px}
h2{font-size: clamp(22px, 3.2vw, 34px); margin:0 0 18px}
.sub{color:var(--muted); margin:6px 0 22px}
.grid{display:grid; gap:16px}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.grid.cols-4{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:780px){.grid.cols-3,.grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}}
.card{background:var(--panel); border:1px solid rgba(244,199,106,.16);
  border-radius: var(--radius); box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column}
.card .cover{height:140px; background:linear-gradient(135deg, #1a2a40, #0f1b2d);
  display:grid; place-items:center; color:var(--brand-2); font-size:40px; font-weight:900; letter-spacing:1px}
.card .body{padding:16px}
.btn{display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:12px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#0c1320; text-decoration:none;
  font-weight:800; border:0; cursor:pointer; box-shadow:var(--shadow)}
.btn.secondary{background:transparent; color:var(--text); border:1px solid rgba(244,199,106,.35)}
.chip{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; font-size:12px; border-radius:999px; background:rgba(244,199,106,.18); color:var(--text)}
.list{display:grid; gap:10px}
.item{padding:10px; border-radius:10px; background:var(--panel); border:1px solid rgba(244,199,106,.18); display:flex; align-items:center; justify-content:space-between; gap:10px}
.item .title{font-weight:700}
.item .meta{color:var(--muted); font-size:12px}
footer{padding:40px 0; color:var(--muted); border-top:1px solid rgba(244,199,106,.16)}
.player{display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; padding:16px; background:var(--panel); border:1px solid rgba(244,199,106,.18); border-radius:var(--radius)}
.player .controls{display:flex; gap:10px; align-items:center}
.player button{border:0; background:rgba(244,199,106,.2); color:var(--text); border-radius:10px; padding:10px 12px; cursor:pointer}
.badge{display:inline-block; padding:4px 8px; border-radius:999px; border:1px solid rgba(244,199,106,.25); font-size:12px; color:var(--muted)}
.merch-grid{display:grid; gap:16px; grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.merch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.merch-grid{grid-template-columns:1fr}}
.merch{padding:16px; background:var(--panel); border:1px solid rgba(244,199,106,.18); border-radius:12px; display:flex; flex-direction:column; gap:8px}
.merch .name{font-weight:800}
.merch .brand{font-size:12px; color:var(--muted)}