/* Release link pages (/l/<slug>) — the cover sets the accent color. Text labels only, no platform logos. */
:root{--onyx:#0B0A09;--bone:#F2ECDF;--ash:#A39B8C;--line:rgba(242,236,223,.14);--accent:#D6AE4A;color-scheme:dark}
*{box-sizing:border-box}
html{background:var(--onyx)}
body{margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:max(28px,env(safe-area-inset-top)) 16px max(28px,env(safe-area-inset-bottom));
  background:transparent;color:var(--bone);font:400 16px/1.5 "Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.bg{position:fixed;inset:-12%;width:124%;height:124%;object-fit:cover;filter:blur(60px) saturate(1.4) brightness(.45);z-index:-1;transform:scale(1.1)}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(70% 60% at 50% 30%,transparent,rgba(11,10,9,.82))}
.card{width:min(440px,100%);display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.cover{width:min(320px,74vw);height:auto;aspect-ratio:1;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);margin-bottom:16px}
.cover.blank{background:radial-gradient(circle at 30% 25%,#2a251d,#0b0a09)}
h1{margin:0;font:400 clamp(28px,7vw,40px)/1.08 "Noto Serif Display",Georgia,serif;font-style:italic;letter-spacing:-.01em}
.by{margin:0;color:color-mix(in srgb,var(--bone) 80%,transparent);font-size:17px}
.when{margin:10px 0 0;font:600 11px/1.3 "Archivo",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.count{margin:2px 0 0;font-size:14px;color:var(--ash);min-height:21px}
.svcs{width:100%;display:flex;flex-direction:column;gap:8px;margin-top:18px}
.svc{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:54px;padding:0 10px 0 18px;border-radius:14px;text-decoration:none;color:var(--bone);font-weight:650;font-size:16px;
  background:rgba(20,18,16,.72);border:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:border-color .2s,transform .15s}
.svc:hover,.svc:focus-visible{border-color:var(--accent);transform:translateY(-1px);outline:none}
.svc b{padding:8px 14px;border-radius:99px;background:var(--accent);color:#0B0A09;font-size:13px;font-weight:750}
.notify{width:100%;margin-top:18px;padding:16px;border-radius:16px;background:rgba(20,18,16,.72);border:1px solid var(--line);text-align:left;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.notify label{display:block;font-weight:700;margin-bottom:10px}
.notify .row{display:flex;gap:8px}
.notify input{flex:1;min-width:0;min-height:48px;padding:10px 14px;border-radius:12px;border:1px solid rgba(242,236,223,.22);background:#100F0D;color:var(--bone);font:inherit;font-size:16px}
.notify input:focus{outline:none;border-color:var(--accent)}
.notify button{min-height:48px;padding:0 18px;border-radius:12px;border:0;background:var(--accent);color:#0B0A09;font:750 15px/1 "Archivo",sans-serif;cursor:pointer}
.fine{margin:10px 0 0;font-size:12px;color:var(--ash)}
.hp{position:absolute;left:-9999px;opacity:0}
.flash{margin:14px 0 0;padding:10px 14px;border-radius:12px;background:rgba(127,203,142,.12);border:1px solid rgba(127,203,142,.4);font-size:14px}
.flash.bad{background:rgba(240,122,106,.12);border-color:rgba(240,122,106,.45)}
.pv{display:inline-flex;align-items:center;gap:10px;margin-top:14px;padding:8px 16px 8px 8px;border-radius:99px;border:1px solid var(--line);background:rgba(20,18,16,.72);color:var(--bone);font:650 14px/1 "Archivo",sans-serif;cursor:pointer}
.pv i{width:30px;height:30px;border-radius:50%;background:var(--accent);position:relative}
.pv i::after{content:"";position:absolute;left:11px;top:9px;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent #0B0A09}
.pv.playing i::after{left:10px;top:10px;width:10px;height:10px;border:0;background:linear-gradient(90deg,#0B0A09 35%,transparent 35% 65%,#0B0A09 65%)}
footer a{color:var(--ash);font-size:12px;text-decoration:none;letter-spacing:.06em}
footer a:hover{color:var(--bone)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}