@font-face{font-family:"Unbounded";src:url("assets/Unbounded.ttf") format("truetype");font-weight:200 900;font-display:swap}
:root{--bg:#0A0B0F;--bg2:#12131A;--sun:#F7D93D;--flare:#FFF3B0;--ink:#EDEEF2;--mute:#8A90A3;--line:rgba(237,238,242,.12);--disp:"Unbounded",system-ui,sans-serif;--body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace;color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;overflow-x:clip;background:var(--bg) radial-gradient(120% 80% at 70% 0%,var(--bg2) 0,var(--bg) 60%);color:var(--ink);font:16px/1.5 var(--body);-webkit-font-smoothing:antialiased;padding:0 clamp(16px,4vw,48px) 120px;position:relative}
body::after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:screen}
.skip{position:absolute;left:16px;top:-80px;background:var(--sun);color:#000;padding:8px 12px;border-radius:8px;z-index:9}
body.kb .skip:focus{top:12px}
.top{max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:22px 0;font-family:var(--mono);font-size:.82rem;letter-spacing:.06em;text-transform:uppercase}
.top a{color:var(--ink);text-decoration:none;opacity:.85}
.top nav a{margin-left:24px}
.top a:hover{opacity:1;color:var(--sun)}
main{max-width:1100px;margin:0 auto}
.hero{position:relative;display:grid;grid-template-columns:300px 1fr;gap:40px;align-items:end;padding:clamp(24px,6vh,72px) 0 36px;min-height:420px}
.sun-wrap{position:absolute;right:-14%;top:-18%;width:min(580px,64vw);aspect-ratio:1;pointer-events:none;z-index:0}
.sun-wrap canvas{width:100%;height:100%;display:block}
.sun-fallback{display:none;position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle at 40% 35%,var(--flare),var(--sun) 45%,rgba(247,217,61,0) 72%);filter:blur(2px)}
body.no-webgl .sun-fallback,body.reduced .sun-fallback{display:block}
body.no-webgl .sun-wrap canvas,body.reduced .sun-wrap canvas{display:none}
.cover{position:relative;z-index:1;border-radius:14px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px var(--line)}
.cover img{display:block;width:100%;height:auto;aspect-ratio:1}
.hero-text{position:relative;z-index:1;min-width:0}
.eyebrow{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:0 0 10px}
h1{font-family:var(--disp);font-weight:800;font-size:clamp(1.9rem,5.4vw,4.2rem);line-height:1;letter-spacing:-.02em;margin:0 0 16px;text-wrap:balance}
.facts{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 24px;color:var(--mute);font-family:var(--mono);font-size:.86rem}
.facts span:first-child{color:var(--ink)}
.actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;position:relative}
.btn{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);background:rgba(237,238,242,.04);color:var(--ink);font:600 .95rem var(--body);padding:12px 20px;border-radius:999px;cursor:pointer;transition:background .15s,transform .15s}
.btn:hover{background:rgba(237,238,242,.09)}
.btn:active{transform:scale(.98)}
.btn svg{width:18px;height:18px;fill:currentColor}
.btn.primary{background:var(--sun);border-color:var(--sun);color:#0A0B0F}
.btn.primary:hover{background:var(--flare)}
.i-pause{display:none}
.playing .btn.primary .i-play,.playing #pPlay .i-play{display:none}
.playing .btn.primary .i-pause,.playing #pPlay .i-pause{display:block}
.btn:focus-visible,.row-play:focus-visible,.player button:focus-visible,.p-track:focus-visible{outline:2px solid var(--sun);outline-offset:3px}
.toast{font-family:var(--mono);font-size:.8rem;color:var(--sun);opacity:0;transition:opacity .2s}
.toast.on{opacity:1}
.list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.group{padding:28px 0 8px 72px;font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.track{display:grid;grid-template-columns:56px 1fr auto;gap:16px;align-items:center;padding:8px 8px 8px 0;border-bottom:1px solid var(--line);transition:background .15s;border-radius:10px}
.track:hover{background:rgba(237,238,242,.04)}
.track.current{background:rgba(247,217,61,.07)}
.row-play{width:56px;height:56px;border:0;background:none;color:var(--mute);font:500 .95rem var(--mono);cursor:pointer;display:grid;place-items:center;border-radius:50%}
.track:hover .row-play,.track.current .row-play{color:var(--sun)}
.bars{display:none;gap:3px;align-items:flex-end;height:16px}
.bars i{width:3px;height:14px;background:var(--sun);border-radius:2px;animation:eq .7s ease-in-out infinite alternate}
.bars i:nth-child(2){animation-delay:.18s}.bars i:nth-child(3){animation-delay:.36s}
.track.current.playing .num{display:none}.track.current.playing .bars{display:flex}
.t-title{font-weight:500;cursor:pointer;min-width:0}
.t-title small{display:block;color:var(--mute);font-size:.8rem;font-weight:400}
.t-dur{font-family:var(--mono);color:var(--mute);font-size:.88rem;font-variant-numeric:tabular-nums}
.about{display:grid;grid-template-columns:260px 1fr;gap:40px;align-items:start;padding:72px 0 24px}
.portrait img{display:block;width:100%;height:auto;border-radius:14px;filter:saturate(.9)}
h2{font-family:var(--disp);font-weight:700;font-size:1.5rem;margin:0 0 14px;letter-spacing:-.01em}
.about-text p{margin:0 0 12px;max-width:62ch;color:#C9CCD6}
.links a{color:var(--sun);margin-right:16px}
.foot{max-width:1100px;margin:36px auto 0;font-family:var(--mono);font-size:.78rem;color:var(--mute)}
.player{position:fixed;left:0;right:0;bottom:0;background:rgba(10,11,15,.88);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:10px clamp(16px,4vw,48px) calc(10px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:48px minmax(0,1fr) auto minmax(160px,2fr) 100px;gap:14px;align-items:center;z-index:5}
.player[hidden]{display:none}
.p-cover{border-radius:6px;display:block}
.p-meta{min-width:0;display:flex;flex-direction:column}
.p-meta b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-meta span{font-family:var(--mono);font-size:.74rem;color:var(--mute)}
.p-ctl{display:flex;gap:6px}
.player button{width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center}
.player button svg{width:18px;height:18px;fill:currentColor}
#pPlay{background:var(--sun);color:#0A0B0F}
.p-bar{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.76rem;color:var(--mute);font-variant-numeric:tabular-nums}
.p-track{flex:1;height:18px;display:flex;align-items:center;cursor:pointer;position:relative}
.p-track::before{content:"";position:absolute;left:0;right:0;height:3px;background:var(--line);border-radius:2px}
.p-fill{position:absolute;left:0;height:3px;width:0;background:var(--sun);border-radius:2px}
.p-vol{accent-color:var(--sun);width:100px}
@keyframes eq{from{height:4px}to{height:16px}}
@media (max-width:820px){
 .hero{grid-template-columns:1fr;align-items:start;gap:22px;min-height:0;padding-top:12px}
 .sun-wrap{right:-28%;top:10%;width:min(380px,96vw)}
 .cover{width:min(300px,70vw)}
 .about{grid-template-columns:1fr;gap:20px}
 .portrait{width:min(260px,60vw)}
 .track{grid-template-columns:48px 1fr auto;gap:10px}
 .group{padding-left:58px}
 body{padding-bottom:calc(168px + env(safe-area-inset-bottom,0px))}
 .player{grid-template-columns:40px minmax(0,1fr);grid-template-areas:"c m" "b b" "k k";gap:8px 12px;padding-top:12px}
 .p-cover{grid-area:c;width:40px;height:40px}.p-meta{grid-area:m}.p-bar{grid-area:b}.p-vol{display:none}
 .p-ctl{grid-area:k;justify-content:center;gap:28px;align-items:center}
 .player button{width:48px;height:48px}
 #pPlay{width:60px;height:60px}
 #pPlay svg{width:24px;height:24px}
 .actions .btn{flex:1 1 auto;justify-content:center;min-height:50px}
 .track{cursor:pointer}
}
@media (prefers-reduced-motion:reduce){.bars i{animation:none;height:10px}html{scroll-behavior:auto}}