:root { --purple:#b223ff; --black:#030303; --panel:#09090a; --line:rgba(255,255,255,.12); --text:#f5f5f5; --muted:#7b7b80; }
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { min-height:100vh; background:radial-gradient(circle at 15% 10%,rgba(178,35,255,.1),transparent 30rem),var(--black); color:var(--text); font-family:Inter,sans-serif; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
.music-nav { min-height:70px; padding:0 clamp(1.2rem,4vw,4rem); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(3,3,3,.86); backdrop-filter:blur(16px); }
.music-logo { font:700 12px/1 'Space Mono',monospace; letter-spacing:.12em; }
.music-logo:first-letter { color:var(--purple); }
.music-nav div { display:flex; gap:clamp(1rem,2vw,2rem); }
.music-nav div a { font:400 9px/1 'Space Mono',monospace; color:#777; letter-spacing:.14em; text-transform:uppercase; }
.music-nav div a:hover { color:var(--purple); }
.record-page { width:min(1380px,100%); margin:0 auto; padding:clamp(2rem,5vw,5rem); }
.record-hero { min-height:calc(100vh - 170px); display:grid; grid-template-columns:minmax(320px,.85fr) minmax(0,1.15fr); gap:clamp(2.5rem,8vw,8rem); align-items:center; }
.record-art-wrap { position:relative; }
.record-art-wrap::before { content:""; position:absolute; inset:18px -18px -18px 18px; z-index:-1; border:1px solid rgba(178,35,255,.35); background:rgba(178,35,255,.06); }
.record-art-wrap img { display:block; width:100%; aspect-ratio:1; object-fit:cover; border:1px solid var(--line); box-shadow:0 40px 100px rgba(0,0,0,.65); }
.record-index { position:absolute; left:1rem; bottom:1rem; padding:.55rem .7rem; background:rgba(0,0,0,.82); border-left:2px solid var(--purple); font:700 8px/1 'Space Mono',monospace; letter-spacing:.15em; }
.record-kicker,.panel-label { font:400 9px/1 'Space Mono',monospace; letter-spacing:.2em; color:var(--purple); }
.record-copy h1 { margin:1.25rem 0 .65rem; font:700 clamp(3rem,7vw,7.5rem)/.9 'Space Mono',monospace; letter-spacing:-.08em; overflow-wrap:anywhere; }
.record-artist { color:#aaa; font-size:clamp(1rem,1.8vw,1.3rem); }
.record-meta { display:flex; flex-wrap:wrap; gap:.6rem; margin:2rem 0; }
.record-meta span { padding:.6rem .75rem; border:1px solid var(--line); font:400 8px/1 'Space Mono',monospace; letter-spacing:.12em; color:#777; }
.record-player { display:flex; align-items:center; gap:1.2rem; padding:1.2rem; border:1px solid var(--line); background:rgba(9,9,10,.82); }
#recordPlay { width:52px; height:52px; flex:0 0 auto; border:0; border-radius:50%; background:var(--purple); color:white; cursor:pointer; box-shadow:0 0 28px rgba(178,35,255,.25); }
.record-progress-wrap { flex:1; }
.record-time { display:flex; justify-content:space-between; margin-bottom:.65rem; font:400 9px/1 'Space Mono',monospace; color:#666; }
#recordProgress { width:100%; accent-color:var(--purple); cursor:pointer; }
.record-actions { display:flex; gap:.7rem; margin-top:1rem; }
.record-actions a,.record-actions button { min-height:42px; padding:0 1rem; display:inline-flex; align-items:center; border:1px solid var(--line); background:transparent; color:#aaa; font:400 8px/1 'Space Mono',monospace; letter-spacing:.12em; cursor:pointer; }
.record-actions a:hover,.record-actions button:hover { border-color:var(--purple); color:white; }
.record-body { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr); gap:1px; margin-top:5rem; background:var(--line); border:1px solid var(--line); }
.record-panel { padding:clamp(2rem,5vw,4.5rem); background:#060607; }
.record-panel h2 { margin:1rem 0 2rem; font:700 clamp(1.5rem,3vw,2.6rem)/1 'Space Mono',monospace; letter-spacing:-.04em; }
.lyrics-content { color:#b4b4b8; font-size:clamp(1rem,1.4vw,1.15rem); line-height:2; white-space:pre-line; }
.lyrics-content .empty-lyrics { max-width:550px; padding:1.5rem; border-left:2px solid #333; color:#666; font-size:.9rem; line-height:1.8; }
.support-panel > p:not(.panel-label) { color:#777; font-size:.9rem; line-height:1.8; }
.support-amounts { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin:2rem 0 1rem; }
.support-amounts button { min-height:50px; border:1px solid var(--line); background:#030303; color:white; font:700 13px/1 'Space Mono',monospace; cursor:pointer; }
.support-amounts button.selected,.support-amounts button:hover { border-color:var(--purple); background:rgba(178,35,255,.14); }
.support-panel label { display:block; margin:.8rem 0 .5rem; font:400 8px/1 'Space Mono',monospace; color:#666; letter-spacing:.12em; text-transform:uppercase; }
#customSupport { width:100%; min-height:48px; padding:0 .9rem; border:1px solid var(--line); background:#030303; color:white; }
.support-submit { width:100%; min-height:52px; margin-top:.7rem; border:0; background:var(--purple); color:white; font:700 9px/1 'Space Mono',monospace; letter-spacing:.12em; cursor:pointer; }
.support-submit:disabled { opacity:.55; cursor:wait; }
.support-status { min-height:1rem; margin-top:.7rem; color:#ff7a7a!important; font:400 10px/1.4 'Space Mono',monospace!important; }
.record-switcher { display:grid; grid-template-columns:1fr auto 1fr; gap:1rem; margin-top:1px; padding:1.2rem; border:1px solid var(--line); font:400 8px/1 'Space Mono',monospace; color:#777; letter-spacing:.12em; }
.record-switcher a:last-child { text-align:right; }
.record-switcher a:hover { color:var(--purple); }
.record-error { min-height:70vh; display:grid; place-content:center; gap:1.5rem; text-align:center; font:700 18px/1 'Space Mono',monospace; }
.record-error a { color:var(--purple); font-size:10px; }
@media(max-width:800px){.record-hero{grid-template-columns:1fr;min-height:0}.record-art-wrap{width:min(82vw,500px);margin:auto}.record-copy h1{font-size:clamp(2.5rem,12vw,5.5rem)}.record-body{grid-template-columns:1fr}.music-nav div a:nth-child(3){display:none}}
@media(max-width:520px){.record-page{padding:1.25rem}.music-nav{padding-inline:1rem}.music-nav div{gap:.8rem}.record-actions{display:grid}.record-switcher{grid-template-columns:1fr 1fr}.record-switcher a:nth-child(2){display:none}.record-player{padding:.9rem}.record-art-wrap::before{inset:10px -10px -10px 10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}