@font-face{font-family:'Satoshi';src:url('assets/fonts/Satoshi-Variable.woff2') format('woff2');font-weight:300 900;font-style:normal;font-display:swap;}
:root{color-scheme:dark;--ink:#fa3838;--accent:#ff5555}*{box-sizing:border-box}body{margin:0;background:#030303;color:var(--ink);font-family:'Satoshi',Arial,sans-serif;background-image:radial-gradient(ellipse at 50% 12%,rgba(136,0,0,.11),transparent 48%)}main{width:min(100%,460px);min-height:100svh;margin:auto;padding:26px 32px 22px;display:flex;flex-direction:column;align-items:center}.filter-defs{position:absolute;width:0;height:0;overflow:hidden}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}header{width:100%;display:flex;justify-content:center}.logo{width:min(100%,330px);height:210px;position:relative}.logo:before{content:'';position:absolute;inset:15% 0;background:radial-gradient(ellipse,rgba(239,0,0,.13),transparent 70%);filter:blur(18px)}.logo img{position:relative;width:100%;height:100%;object-fit:cover;filter:url(#logo-glow);mix-blend-mode:screen}nav{display:flex;flex-direction:column;align-items:center;margin:17px 0 38px}a{color:inherit;text-decoration:none}nav a{font:400 25px 'Satoshi',Arial,sans-serif;text-transform:uppercase;letter-spacing:1.4px;min-height:46px;display:flex;align-items:center;justify-content:center;min-width:175px;transform:skewX(-3deg);text-shadow:.6px 0 rgba(255,52,52,.35);transition:color .2s,text-shadow .2s}nav a:hover,#release-title:hover{color:#ff7373;text-shadow:0 0 12px rgba(255,0,0,.5)}.player{width:100%;margin-top:auto;text-align:center}#release-heading{font:400 12px 'Satoshi',Arial,sans-serif;text-transform:uppercase;letter-spacing:1.7px;color:#b94a4a;margin:0 0 10px}#release-title{font:400 20px 'Satoshi',Arial,sans-serif;text-transform:uppercase;letter-spacing:.7px}canvas{display:block;width:100%;height:74px;margin:13px 0 0}.controls{display:flex;align-items:center;justify-content:center;gap:10px}button{border:0;background:none;color:var(--ink);min-width:44px;height:44px;padding:11px;cursor:pointer}button svg{display:block;width:22px;height:22px;fill:currentColor}button:hover{color:var(--accent)}button:disabled{opacity:.35;cursor:default}#time{font-size:11px;color:#cc6a6a;font-variant-numeric:tabular-nums;min-width:76px;text-align:left;letter-spacing:.5px}.speaker{width:14px;height:14px;fill:none;stroke:#cc6a6a;stroke-width:1.2;margin-left:4px}input{width:72px;height:24px;accent-color:#f52b2b;cursor:pointer}#status{font-size:12px;line-height:1.5;letter-spacing:.5px;color:#d57878;min-height:18px;margin:6px 0 0}a:focus-visible,button:focus-visible,input:focus-visible{outline:1px solid var(--accent);outline-offset:4px}@media(max-width:360px){main{padding:20px 22px}.logo{height:180px}.controls{gap:5px}input{width:58px}#release-title{font-size:18px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Platform links beneath the release player. */
.player{margin-top:44px;margin-bottom:38px}.platforms{flex-direction:row;justify-content:space-between;width:100%;margin: auto 0 0;padding:18px 0 8px;gap:8px}.platforms a{min-width:0;min-height:44px;width:44px;transform:none;padding:10px;flex:0 1 44px;color:#b92424}.platforms a svg{display:block;width:24px;height:24px;fill:currentColor}.platforms a:hover{color:#d83232;filter:drop-shadow(0 0 5px rgba(255,0,0,.4))}@media(max-width:360px){.platforms{gap:3px}.platforms a{padding:11px}.platforms a svg{width:22px;height:22px}.player{margin-top:36px}}

/* The logo is the audio visualizer. */
.logo{isolation:isolate}.logo:before{background:radial-gradient(ellipse,rgba(239,0,0,var(--aura,.13)),transparent 70%)}.logo img{transform:scale(var(--logo-scale,1));filter:url(#logo-glow) brightness(var(--logo-light,1));will-change:transform;pointer-events:none}.logo canvas{position:absolute;inset:-32px;width:calc(100% + 64px);height:calc(100% + 64px);margin:0;z-index:0;pointer-events:none}.controls{margin-top:25px}#status:empty{display:none}@media(prefers-reduced-motion:reduce){.logo img{will-change:auto}}

main{display:grid;grid-template-rows:1fr auto 1fr;align-items:stretch}.music-block{grid-row:2;width:100%;display:flex;flex-direction:column;align-items:center}.music-block .player{margin-bottom:0}.platforms{grid-row:3;align-self:end;margin:0}@media(max-height:560px){main{min-height:560px}}

.bottom-links{grid-row:3;align-self:end;width:100%}.volume-row{display:flex;align-items:center;width:100%;height:30px;margin-bottom:10px}.volume-row input{display:block;width:100%;margin:0;min-width:0}.bottom-links .platforms{margin:0;padding-top:6px}.controls{justify-content:center;gap:10px}

#release-heading{font-size:11px}#release-title{font-size:18px}@media(max-width:360px){#release-title{font-size:16px}}

/* Retro console emblem */
.logo{width:min(100%,330px);height:210px;position:relative;margin-inline:auto;overflow:hidden;}
.logo::before{display:none;}
.logo canvas{position:absolute;inset:0;width:100%;height:100%;margin:0;filter:none;}
.logo-fallback{display:grid;place-items:center;height:100%;font-family:Arial,sans-serif;font-weight:900;font-size:76px;letter-spacing:-6px;color:#f22020;}
.logo.is-3d .logo-fallback{visibility:hidden;}

.logo img.logo-fallback{width:100%;height:100%;object-fit:cover;transform:none;filter:none;}

/* Instagram anchors the one-time entrance. */
.bottom-links .platforms{position:relative;display:block;height:58px;padding:0;isolation:isolate;}
.platforms a{position:absolute;top:6px;left:var(--position);transform:translateX(var(--anchor));width:44px;height:44px;}
.platforms .social-centre{z-index:2;}
.platforms .social-reveal{z-index:1;animation:social-unfold 1s cubic-bezier(.22,1,.36,1) .45s both;}
@keyframes social-unfold{0%{left:50%;transform:translateX(-50%);opacity:0;}15%{opacity:1;}100%{left:var(--position);transform:translateX(var(--anchor));opacity:1;}}
@media(prefers-reduced-motion:reduce){.platforms .social-reveal{animation:none;}}

/* Opaque front face hides icons passing behind Instagram. */
.platforms .social-centre svg{background:#030303;border-radius:6px;}


/* A tactile volume capsule, with audio texture inside its fill. */
.volume-row{position:relative;height:48px;border-radius:14px;background:#751414;overflow:hidden;margin-bottom:14px;isolation:isolate;}
.volume-fill{position:absolute;inset:0 auto 0 0;width:var(--level,75%);background:#962222;overflow:hidden;border-right:1px solid rgba(255,125,125,.55);pointer-events:none;}
#volume-art{position:absolute;inset:0;width:396px;height:48px;margin:0;display:block;image-rendering:auto;}
.volume-symbol{position:absolute;left:15px;top:14px;width:20px;height:20px;color:#ff9696;fill:currentColor;pointer-events:none;z-index:2;}
.volume-row input{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;opacity:0;z-index:3;cursor:ew-resize;}
.volume-row:focus-within{outline:1px solid #ff7373;outline-offset:3px;}

/* Bring the volume control into the centred music group. */
.music-block .volume-row{width:100%;margin-top:32px;margin-bottom:0;flex-shrink:0;}

.music-block{transform:translateY(clamp(-54px,-6svh,-20px));}
.music-block .volume-row{margin-top:12px;}
@media(max-height:600px){.music-block{transform:translateY(-12px);}}



.music-block .controls{margin-top:8px;}
.music-block{padding-bottom:17px;}


.music-block .volume-row{transform:translateY(-10px);}


/* Barely visible grain across the black backdrop. */
body::before{content:"";position:fixed;inset:0;background-image:url("assets/background-grain.svg");background-repeat:repeat;opacity:.045;pointer-events:none;z-index:0;}
main{position:relative;z-index:1;}

/* Contrast-weighted specks shuffle like television static. */
body::before{opacity:.13;animation:tv-grain .65s steps(1,end) infinite;}
@keyframes tv-grain{0%{background-position:0 0;}17%{background-position:-53px 91px;}34%{background-position:117px -39px;}51%{background-position:-181px -127px;}68%{background-position:79px 163px;}85%{background-position:-23px -211px;}}
@media(prefers-reduced-motion:reduce){body::before{animation:none;}}

body::before{background-size:360px 360px;opacity:.16;}


body::before{background-size:200px 200px;opacity:.30;}


.logo.logo-error .logo-fallback{visibility:visible!important;}

canvas.cursor-grain{position:fixed;inset:0;width:100%;height:100%;margin:0;z-index:0;pointer-events:none}

.volume-row input{touch-action:none;cursor:grab}.volume-row input.is-dragging{cursor:grabbing}

/* Extruded silhouettes tilt independently of the entrance animation. */
.platforms a{perspective:180px;overflow:visible;}
.social-model{position:relative;display:block;width:24px;height:24px;transform-style:preserve-3d;transform:rotateX(0) rotateY(0);transition:transform .45s cubic-bezier(.2,.8,.2,1);pointer-events:none;}
.platforms a .social-model svg{position:absolute;inset:0;backface-visibility:hidden;}
.platforms a .social-side{color:#670909;background:transparent;transform:translateZ(var(--depth));opacity:0;transition:opacity .2s;}
.platforms a .social-face{transform:translateZ(.5px);}
@media(hover:hover) and (pointer:fine){
 .platforms a:hover .social-model{transform:translateY(-3px) rotateX(-14deg) rotateY(32deg) scale(1.15);animation:social-rock 2.8s ease-in-out .45s infinite alternate;}
 .platforms a:hover .social-side{opacity:1;}
}
.platforms a:focus-visible .social-model{transform:translateY(-3px) rotateX(-14deg) rotateY(32deg) scale(1.15);}
.platforms a:focus-visible .social-side{opacity:1;}
@keyframes social-rock{from{transform:translateY(-3px) rotateX(-14deg) rotateY(32deg) scale(1.15)}to{transform:translateY(-3px) rotateX(8deg) rotateY(-28deg) scale(1.15)}}
@media(prefers-reduced-motion:reduce){.platforms a:hover .social-model{animation:none;}.social-model,.platforms a .social-side{transition:none;}}

.save-track{display:block;height:auto;min-height:32px;margin:8px auto 0;padding:6px 8px;font:400 10px 'Satoshi',Arial,sans-serif;text-transform:uppercase;letter-spacing:1.7px;color:#b94a4a;}
.save-track[hidden]{display:none}.save-track:hover{color:#ef5656}
#spotify-dialog{width:min(420px,calc(100vw - 32px));padding:42px 18px 18px;border:1px solid #481818;border-radius:16px;background:#0b0808;color:#b94a4a;}
#spotify-dialog::backdrop{background:rgba(0,0,0,.8);backdrop-filter:blur(5px)}
#spotify-close{position:absolute;right:4px;top:0;font:26px Arial}
#spotify-card iframe{display:block;width:100%;height:152px;border:0;border-radius:12px}
#spotify-open{display:block;text-align:center;margin:16px auto 0;font:400 12px 'Satoshi',Arial,sans-serif;letter-spacing:1.7px;text-transform:uppercase}

/* One outlined unit for playback, volume and Spotify saving. */
.playback-group{width:100%;margin-top:18px;padding:10px 14px 8px;border:1px solid #571c1c;border-radius:20px;background:rgba(18,3,3,.16);}
.music-block .playback-group .controls{margin-top:0;}
.music-block .playback-group .volume-row{margin-top:6px;margin-bottom:0;transform:none;}
.playback-group .save-track{margin:8px auto 0;}

.legal-links{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 18px;margin:12px 0 0;font:400 10px 'Satoshi',Arial,sans-serif;letter-spacing:.3px;color:#bd7777;}
.legal-links a{padding:6px 0;text-decoration:underline;text-underline-offset:3px;}
#spotify-dialog h2{font-size:17px;font-weight:500;margin:0 0 12px;color:#e49292;}
#spotify-card p{font-size:13px;line-height:1.65;margin:0 0 14px;color:#d7b6b6;}
#spotify-card>a{font-size:12px;text-decoration:underline;color:#d7b6b6;}
#spotify-dialog .spotify-choice{display:block;height:auto;min-height:40px;width:100%;font:400 12px 'Satoshi',Arial,sans-serif;letter-spacing:.3px;color:#e49292;margin-top:10px;padding:10px;border:1px solid #783232;border-radius:7px;}
#spotify-dialog .spotify-choice:hover{background:#271010;}
.legal-page{width:min(100%,760px);margin:0 auto;padding:36px 24px 60px;display:block;min-height:100svh;color:#dfc3c3;}
.legal-page h1{font-size:26px;color:#ef6666;margin:24px 0 12px;}.legal-page h2{font-size:18px;color:#df9292;margin:30px 0 12px;}
.legal-page p,.legal-page li{font-size:15px;line-height:1.75;}.legal-page a{color:#ef9292;text-decoration:underline;text-underline-offset:3px;}
.legal-page .updated{font-size:12px;color:#ba9696;}.legal-page table{border-collapse:collapse;width:100%;font-size:13px;line-height:1.6;}.legal-page td,.legal-page th{text-align:left;vertical-align:top;padding:10px 7px;border-bottom:1px solid #412323;overflow-wrap:anywhere;}

.legal-links a{text-transform:uppercase;}

.volume-symbol{width:24px;left:13px}.volume-symbol [data-volume-wave]{transition:opacity .15s ease;}
@media(prefers-reduced-motion:reduce){.volume-symbol [data-volume-wave]{transition:none}}