:root { color-scheme: dark; font-family: Inter, system-ui, sans-serif; background:#09070d; color:#eee9f2; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 70% 10%,#3b1238 0,transparent 28%),linear-gradient(145deg,#09070d,#130d19 65%,#07151a); }
main { width:min(960px,calc(100% - 32px)); margin:auto; padding:64px 0 90px; }
.eyebrow { color:#db4d8e; text-transform:uppercase; letter-spacing:.32em; font-size:.72rem; }
h1 { margin:.1em 0 .7em; font-family:Georgia,serif; font-weight:400; font-size:clamp(3.5rem,10vw,7.5rem); line-height:.77; letter-spacing:-.065em; }
.player { display:grid; grid-template-columns:220px 1fr; gap:26px; padding:24px; border:1px solid #513047; background:#100c14cc; box-shadow:0 25px 80px #0009; }
.art { position:relative; grid-row:span 3; aspect-ratio:1; overflow:hidden; background:linear-gradient(145deg,#170b1d,#081b20); border:1px solid #70445e; }
.moon { position:absolute; width:62%; height:62%; border-radius:50%; top:18%; left:19%; background:#e5d3e0; box-shadow:0 0 45px #ed6bb38a; }
.moon::after { content:""; position:absolute; width:100%; height:100%; border-radius:50%; left:24%; top:-9%; background:#0b1118; }
.art span { position:absolute; z-index:2; right:12px; bottom:8px; color:#dd5795; font:700 2.5rem Georgia,serif; }
.meta p { margin:8px 0; color:#9f92a4; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; }
h2 { margin:0; font:400 clamp(1.5rem,4vw,2.6rem) Georgia,serif; }
audio { width:100%; accent-color:#d74689; }
.controls { display:flex; gap:10px; }
button { border:1px solid #694158; color:#eee9f2; background:#18101c; padding:11px 17px; cursor:pointer; }
button:hover,button.active { background:#7e214e; }
.archive { margin-top:52px; }
h3 { font:400 1.45rem Georgia,serif; border-bottom:1px solid #44283d; padding-bottom:12px; }
ol { list-style:none; padding:0; }
li button { width:100%; display:flex; justify-content:space-between; text-align:left; border:0; border-bottom:1px solid #261824; background:transparent; }
li button.playing { color:#f36aa8; }
@media (max-width:640px) { .player { grid-template-columns:1fr; } .art { grid-row:auto; width:min(70vw,240px); } main { padding-top:38px; } }