/* plainaudio — "Frequency" redesign. Plain CSS, no build step. */
@font-face{font-family:"DIN 1451";src:url("/fonts/din1451e.ttf") format("truetype");font-display:swap}
@property --fill{syntax:"<percentage>";inherits:false;initial-value:30%}

:root{
  color-scheme:dark;
  --bg:#08080a;
  --raised:#111114;
  --raised-2:#17171b;
  --line:rgb(255 255 255/.08);
  --line-2:rgb(255 255 255/.14);
  --fg:#e9e7e3;
  --fg-70:rgb(233 231 227/.7);
  --muted:#86868c;
  --d:#09f;
  --e:#f90;
  --x:#fc0;
  --g:var(--d);
  --cur:var(--d);
  --wipe:var(--d);
  --glass:rgb(17 17 20/.62);
  --display:"DIN 1451","DIN Condensed","Barlow Condensed","Arial Narrow",sans-serif;
  --body:"Barlow","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --cut:cubic-bezier(.77,0,.18,1);
  --player-h:76px;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:17px;line-height:1.55;overflow-x:clip;-webkit-font-smoothing:antialiased}
::selection{background:var(--cur);color:#000}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--cur);outline-offset:4px;border-radius:2px}
[hidden]{display:none!important}
.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.wrap{max-width:1360px;margin-inline:auto;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.catno b{font-weight:inherit;color:var(--g)}
.g-d{--g:var(--d)}.g-e{--g:var(--e)}.g-x{--g:var(--x)}
.chip{display:inline-flex;align-items:center;gap:.5em;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg)}
.chip::before{content:"";width:.6em;height:.6em;background:var(--g);box-shadow:0 0 12px var(--g)}

/* ---------- ambient glow / vignette / grain ---------- */
.ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:var(--bg)}
.ambient img{position:absolute;inset:-15%;width:130%;height:130%;max-width:none;object-fit:cover;filter:blur(80px) saturate(1.4);opacity:0;transform:scale(1.05);transition:opacity 1.2s ease}
.ambient img.on{opacity:.5}
.ambient::after{content:"";position:absolute;inset:0;background:
  radial-gradient(120% 90% at 50% 30%,transparent 0,rgb(8 8 10/.35) 45%,rgb(8 8 10/.9) 80%,var(--bg) 100%),
  linear-gradient(to bottom,transparent 55%,rgb(8 8 10/.55))}
.grain{position:fixed;inset:-50%;width:200%;height:200%;z-index:200;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain .9s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}17%{transform:translate(-3%,2%)}33%{transform:translate(2%,-4%)}50%{transform:translate(-4%,-1%)}67%{transform:translate(3%,3%)}83%{transform:translate(-1%,4%)}100%{transform:translate(0,0)}}

/* ---------- header ---------- */
.top{position:sticky;top:env(safe-area-inset-top, 0px);z-index:50;view-transition-name:topbar;background:linear-gradient(to bottom,rgb(8 8 10/.85),rgb(8 8 10/.4));backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:24px;height:60px}
.brand img{height:20px;width:auto}
.top nav{display:flex;gap:22px;margin-left:auto}
.top nav a{text-decoration:none;color:var(--muted);transition:color .2s}
.top nav a:hover{color:var(--fg)}
.now{display:flex;align-items:center;gap:10px;color:var(--muted);padding:6px 12px;border:1px solid var(--line);border-radius:99px;white-space:nowrap}
.now .catno{color:var(--fg)}
.eq{display:inline-flex;gap:2px;align-items:flex-end;height:12px}
.eq i{width:2px;height:30%;background:var(--g);animation:eq .8s ease-in-out infinite alternate paused}
.eq i:nth-child(2){animation-delay:-.3s}.eq i:nth-child(3){animation-delay:-.55s}.eq i:nth-child(4){animation-delay:-.15s}
body.is-playing .eq i{animation-play-state:running}
@keyframes eq{to{height:100%}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6em;height:48px;padding:0 22px;border-radius:99px;border:1px solid var(--line-2);font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;background:rgb(255 255 255/.03);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .25s,border-color .25s,transform .25s var(--ease),box-shadow .25s;white-space:nowrap}
.btn:hover{background:rgb(255 255 255/.08);border-color:rgb(255 255 255/.28);transform:translateY(-1px)}
.btn.primary{background:var(--fg);color:var(--bg);border-color:var(--fg);box-shadow:0 10px 40px -10px rgb(255 255 255/.35)}
.btn.primary:hover{background:#fff;box-shadow:0 14px 50px -10px var(--g)}
.btn svg{width:14px;height:14px;fill:currentColor}

/* ---------- 3D tilt / glare / glow ---------- */
.tilt{position:relative;display:block;transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--ts,1));transition:transform .7s var(--ease);transform-style:preserve-3d;will-change:transform}
.tilt.tilting{transition:transform .12s linear;--ts:1.02}
.tilt img{position:relative;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:4px;box-shadow:0 1px 0 rgb(255 255 255/.12) inset,0 30px 60px -20px rgb(0 0 0/.8)}
.tilt::before{content:"";position:absolute;inset:6% 6% -2%;z-index:-1;border-radius:8px;background:var(--img) center/cover;filter:blur(42px) saturate(1.6);opacity:var(--glow,.0);transform:translateY(6%) translateZ(-60px);transition:opacity .6s ease}
.tilt:hover,.tilt.tilting{--glow:.85}
.glare{position:absolute;inset:0;border-radius:4px;pointer-events:none;
  background:radial-gradient(circle at var(--gx,30%) var(--gy,20%),rgb(255 255 255/.7),rgb(255 255 255/.15) 25%,transparent 55%);
  mix-blend-mode:overlay;opacity:0;transition:opacity .4s}
.glare::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,rgb(255 255 255/.16),transparent 38%,transparent 62%,rgb(255 255 255/.05));mix-blend-mode:screen}
.tilt:hover .glare,.tilt.tilting .glare{opacity:1}

/* ---------- HERO (home): Index featured release, Afterglow light, analyser behind ---------- */
.hero{position:relative;isolation:isolate;overflow-x:clip;border-bottom:1px solid var(--line)}
.meta-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;border-bottom:1px solid var(--line)}
.meta-row>*{height:44px;display:flex;align-items:center;padding:0 14px;border-left:1px solid var(--line);font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.meta-row>*:first-child{color:var(--fg);border-left:0;padding-left:0}
.meta-row>*:last-child{padding-right:0}
.meta-row .x{display:none}
@media (min-width:900px){.meta-row{grid-template-columns:repeat(4,minmax(0,1fr)) auto}.meta-row .x{display:flex}}
.hero .mega{font-size:clamp(7rem,24vw,30rem)}
.h-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding-bottom:clamp(28px,4vw,56px);margin-top:calc(clamp(7rem,24vw,30rem) * -.5)}
.h-col{display:flex;flex-direction:column;gap:20px;min-width:0}
.hero-cover{--glow:.7;width:min(100%,560px)}
.h-type{display:flex;flex-direction:column;gap:22px;min-width:0}
.h-k{color:var(--muted);display:flex;gap:12px;align-items:center;margin:0}
.h-k::before{content:"";width:28px;height:1px;background:var(--g)}
.h-art{font-family:var(--display);text-transform:uppercase;font-size:clamp(4.4rem,13vw,13rem);line-height:.8;margin:0;font-weight:400;text-shadow:0 10px 60px rgb(0 0 0/.5)}
.h-art span{display:block}
.h-art .t{color:transparent;-webkit-text-stroke:1.5px var(--fg);transition:color .3s,-webkit-text-stroke-color .3s}
.h-art .t:hover{color:var(--g);-webkit-text-stroke-color:var(--g)}
.h-desc{max-width:52ch;color:var(--fg-70);margin:0;font-weight:300;font-size:1.05rem}
.h-acts{display:flex;flex-wrap:wrap;gap:10px}
.hero .btn.primary{background:var(--g);border-color:var(--g);color:#000;box-shadow:0 10px 40px -12px var(--g)}
.hero .btn.primary:hover{background:var(--fg);border-color:var(--fg)}
.h-tl{border:1px solid var(--line);border-radius:10px;overflow:hidden;max-width:560px;background:rgb(8 8 10/.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.h-tl button{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;padding:9px 14px;text-align:left;font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;transition:background .2s,color .2s}
.h-tl button+button{border-top:1px solid var(--line)}
.h-tl button:hover{background:rgb(255 255 255/.05)}
.h-tl .p{font-family:var(--display);font-size:1.4rem;line-height:1;color:var(--muted);letter-spacing:0}
.h-tl .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.h-tl .is-current{background:color-mix(in srgb,var(--g) 10%,transparent)}
.h-tl .is-current .p,.h-tl .is-current .n{color:var(--g)}
.h-tl .l{color:var(--muted)}
@media (min-width:900px){
  .h-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start;gap:clamp(28px,4vw,64px);margin-top:calc(clamp(7rem,24vw,30rem) * -.62)}
  .hero-cover{width:100%}
  .h-type{padding-top:calc(clamp(7rem,24vw,30rem) * .62 + 8px)}
}

/* ---------- waveforms (PNG masks, genre progress, hover cursor) ---------- */
.wave{--h:-10%;--un:rgb(255 255 255/.32);position:relative;flex:1;min-height:28px;cursor:pointer;
  -webkit-mask:var(--wave) center/100% 100% no-repeat;mask:var(--wave) center/100% 100% no-repeat;
  background:linear-gradient(90deg,transparent calc(var(--h) - 1px),var(--fg) calc(var(--h) - 1px) var(--h),transparent var(--h)),
    linear-gradient(90deg,var(--g) 0 var(--p,0%),var(--un) var(--p,0%) 100%);transition:filter .2s}
.wave:hover{filter:brightness(1.3)}
.wave.flat{-webkit-mask:none;mask:none;min-height:0;height:3px;flex:none;align-self:center;width:100%;border-radius:2px;background:linear-gradient(90deg,var(--g) 0 var(--p,0%),rgb(255 255 255/.14) var(--p,0%) 100%)}
.wave:focus-visible{outline:none;--un:var(--fg)}
.wave.flat:focus-visible{outline:2px solid var(--cur);outline-offset:6px}


/* ---------- sections ---------- */
.sec{padding-block:clamp(72px,12vh,140px)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(32px,5vw,64px)}
.sec-head h2{font-family:var(--display);font-weight:400;font-size:clamp(2.8rem,7vw,6.5rem);line-height:.85;margin:0;text-transform:uppercase}
.sec-head h2 small{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;color:var(--muted);margin-bottom:16px}
.sec-head p{max-width:30rem;color:var(--muted);margin:0}

/* ---------- triptych: pick a frequency ---------- */
.tri-wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.tri{position:relative;text-align:left;padding:28px 28px 32px;min-height:440px;display:flex;flex-direction:column;background:linear-gradient(180deg,rgb(17 17 20/.85),rgb(8 8 10/.85));overflow:hidden;transition:background .4s}
.tri::before{content:"";position:absolute;inset:auto -20% -40% -20%;height:70%;background:radial-gradient(closest-side,color-mix(in srgb,var(--g) 30%,transparent),transparent);opacity:0;transition:opacity .6s}
.tri:hover::before,.tri[aria-pressed="true"]::before{opacity:.55}
.tri-top{display:flex;justify-content:space-between;align-items:flex-start;width:100%}
.tri-count{font-family:var(--display);font-size:clamp(4rem,8vw,7rem);line-height:.8}
.tri-name{font-family:var(--display);font-size:clamp(1.8rem,3vw,2.6rem);line-height:.95;text-transform:uppercase;margin-top:auto;position:relative}
.tri-desc{color:var(--muted);font-size:.95rem;margin-top:10px;position:relative;max-width:22rem}
.tri .chip{position:relative}
.stack{position:relative;height:190px;margin:18px 0 24px;width:100%}
.stack img{position:absolute;left:50%;top:50%;width:150px;aspect-ratio:1;border-radius:3px;box-shadow:0 20px 40px -10px rgb(0 0 0/.8),0 0 0 1px rgb(255 255 255/.08);transition:transform .7s var(--ease)}
.stack img:nth-child(1){transform:translate(-50%,-50%) rotate(-4deg) translateX(-14px)}
.stack img:nth-child(2){transform:translate(-50%,-50%) rotate(3deg) translateX(10px)}
.stack img:nth-child(3){transform:translate(-50%,-50%)}
.tri:hover .stack img:nth-child(1),.tri:focus-visible .stack img:nth-child(1){transform:translate(-50%,-50%) rotate(-14deg) translate(-110px,14px)}
.tri:hover .stack img:nth-child(2),.tri:focus-visible .stack img:nth-child(2){transform:translate(-50%,-50%) rotate(12deg) translate(110px,14px)}
.tri:hover .stack img:nth-child(3),.tri:focus-visible .stack img:nth-child(3){transform:translate(-50%,-50%) translateY(-12px) scale(1.06)}
.tri-cta{position:absolute;right:28px;bottom:32px;color:var(--muted);transition:color .3s,transform .3s var(--ease)}
.tri:hover .tri-cta{color:var(--g);transform:translateX(4px)}

/* ---------- catalogue ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.filters button{height:38px;padding:0 16px;border-radius:99px;border:1px solid var(--line-2);font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:8px;transition:all .25s}
.filters button:hover{color:var(--fg);border-color:rgb(255 255 255/.3)}
.filters button[aria-pressed="true"]{color:var(--bg);background:var(--fg);border-color:var(--fg)}
.filters button .sq{width:8px;height:8px;background:var(--g)}
.yg{display:grid;grid-template-columns:clamp(84px,10vw,170px) minmax(0,1fr);gap:clamp(16px,3vw,48px);padding-block:clamp(28px,4vw,56px);border-top:1px solid var(--line);view-timeline-name:--yg}
.year{margin:0;align-self:start;position:sticky;top:90px;font-family:var(--display);font-weight:400;font-size:clamp(5rem,10.5vw,11rem);line-height:.8;writing-mode:vertical-rl;transform:rotate(180deg);
  color:transparent;-webkit-text-stroke:1.5px rgb(255 255 255/.32);
  background:linear-gradient(to left,var(--fg) var(--fill),transparent var(--fill));-webkit-background-clip:text;background-clip:text;user-select:none}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,36px) clamp(14px,2vw,28px);align-content:start}
.card{position:relative;min-width:0}
.card .tilt{width:100%}
.qp{position:absolute;right:12px;top:12px;z-index:3;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgb(8 8 10/.55);backdrop-filter:blur(10px) saturate(1.4);-webkit-backdrop-filter:blur(10px) saturate(1.4);border:1px solid rgb(255 255 255/.18);opacity:0;transform:translateY(6px) scale(.9);transition:opacity .3s,transform .4s var(--ease),background .2s}
.qp svg{width:14px;height:14px;fill:var(--fg)}
.card:hover .qp,.qp:focus-visible,.card.is-current .qp{opacity:1;transform:none}
.qp:hover{background:var(--g)}
.qp:hover svg{fill:#000}
.card-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:14px}
.card-meta .catno{color:var(--muted)}
.card h3{margin:6px 0 0;font-family:var(--display);font-weight:400;font-size:clamp(1.3rem,1.8vw,1.7rem);line-height:1;text-transform:uppercase;letter-spacing:.01em;overflow-wrap:anywhere}
.card p{margin:3px 0 0;color:var(--muted);font-size:.95rem;line-height:1.3}

/* ---------- artists: signal portraits (Afterglow) ---------- */
.artists-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));gap:clamp(14px,2vw,24px)}
.art{position:relative;text-align:left;display:block;width:100%}
.portrait{position:relative;aspect-ratio:1;overflow:hidden;border-radius:4px;background:#000;box-shadow:0 0 0 1px var(--line)}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated;transition:opacity .6s ease,transform 1.2s var(--ease)}
.portrait .duo-d{filter:url(#duo-d)}.portrait .duo-e{filter:url(#duo-e)}.portrait .duo-x{filter:url(#duo-x)}
.portrait .orig{filter:grayscale(1) contrast(1.08) brightness(.95);opacity:0}
.portrait::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0 2px,rgb(0 0 0/.38) 2px 3px);mix-blend-mode:multiply}
.portrait::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgb(0 0 0/.55),transparent 45%)}
.art:hover .orig,.art:focus-visible .orig{opacity:1}
.art:hover img{transform:scale(1.04)}
.art-name{font-family:var(--display);font-size:1.5rem;line-height:1;text-transform:uppercase;margin-top:12px}
.art-meta{display:flex;justify-content:space-between;gap:8px;color:var(--muted);margin-top:6px}
.art .sig{position:absolute;left:10px;bottom:10px;z-index:2;color:var(--fg);font-size:.6rem;display:flex;gap:6px;align-items:center}
.art .sig::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--g);box-shadow:0 0 8px var(--g)}
.rtag{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;border-radius:99px;border:1px solid var(--line-2);background:rgb(255 255 255/.02);font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;color:var(--fg);text-decoration:none;transition:border-color .25s,background .25s,color .25s}
.rtag .led{width:6px;height:6px;border-radius:50%;background:var(--g);box-shadow:0 0 8px var(--g)}
.rtag:hover{border-color:var(--g);background:color-mix(in srgb,var(--g) 14%,transparent)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:14px 2px 0}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.statement{font-family:var(--display);font-size:clamp(2.2rem,5.4vw,5rem);line-height:.98;text-transform:uppercase;margin:0}
.statement span{color:var(--muted)}
.timeline{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.timeline li{display:grid;grid-template-columns:90px 1fr;gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}
.timeline b{font-family:var(--display);font-weight:400;font-size:2rem;line-height:1}
.timeline p{margin:0;color:var(--fg-70)}
.crew{margin-top:28px;color:var(--muted)}

/* ---------- footer ---------- */
footer{position:relative;overflow:hidden;border-top:1px solid var(--line);padding-top:72px;padding-bottom:calc(var(--player-h) + env(safe-area-inset-bottom, 0px));background:linear-gradient(to bottom,transparent,rgb(0 0 0/.55))}
.foot-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;position:relative;z-index:1}
.foot-grid h4{margin:0 0 10px;color:var(--muted);font-weight:400}
.foot-grid p,.foot-grid a{margin:0;color:var(--fg-70);font-size:.95rem;text-decoration:none;display:block;line-height:1.7}
.foot-grid a:hover{color:var(--fg)}
.foot-keys{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:40px;color:var(--muted);font-size:.62rem}
.foot-keys kbd,.scope-btn kbd{font-family:var(--mono);font-size:.6rem;border:1px solid var(--line-2);border-radius:4px;padding:2px 6px;color:var(--fg);margin-right:4px}
.foot-logo{width:100vw;max-width:none;margin:56px 0 -7vw calc(50% - 50vw);opacity:.05;pointer-events:none;user-select:none}

/* =========================================================
   RELEASE VIEW: Index layout, Afterglow light, Signal Path analyser
   ========================================================= */
.rel{position:relative;overflow-x:clip;padding-bottom:40px}
.rel-stage{position:relative;isolation:isolate}
.hero .scope{top:44px}
.scope{position:absolute;left:0;right:0;top:44px;bottom:0;z-index:-1;pointer-events:none}
.scope canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:.62;
  -webkit-mask-image:repeating-linear-gradient(180deg,#000 0 2px,rgb(0 0 0/.42) 2px 3px),radial-gradient(120% 72% at 50% 44%,#000 30%,transparent 76%);
  -webkit-mask-composite:source-in;
  mask-image:repeating-linear-gradient(180deg,#000 0 2px,rgb(0 0 0/.42) 2px 3px),radial-gradient(120% 72% at 50% 44%,#000 30%,transparent 76%);
  mask-composite:intersect}
.crumb{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;border-bottom:1px solid var(--line)}
.crumb>*{height:44px;display:flex;align-items:center;gap:6px;padding:0 16px;border-left:1px solid var(--line);font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden}
.crumb>*:first-child{border-left:0;padding-left:0}
.crumb>*:last-child{padding-right:0}
.crumb a{text-decoration:none;color:var(--fg);transition:color .2s}
.crumb a:hover{color:var(--g)}
.crumb .here{color:var(--g)}
.scope-btn{display:inline-flex;align-items:center;gap:9px;height:30px;padding:0 6px 0 12px;border:1px solid var(--line-2);border-radius:99px;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-70);background:rgb(8 8 10/.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:border-color .25s,color .25s}
.scope-btn:hover{border-color:var(--g);color:var(--fg)}
.scope-btn kbd{margin:0}
.lamp{width:6px;height:6px;border-radius:50%;flex:none;background:color-mix(in srgb,var(--g) 35%,#000)}
.is-live .lamp{background:var(--g);box-shadow:0 0 8px var(--g),0 0 18px var(--g)}

.r-mega{display:flex;justify-content:flex-end;padding-top:clamp(14px,2.4vw,30px);padding-left:max(16px, env(safe-area-inset-left, 0px))}
.mega{flex:none;margin-right:-.07em;font-family:var(--display);font-weight:400;font-size:clamp(7rem,30vw,30rem);line-height:.8;white-space:nowrap;display:inline-grid;user-select:none;letter-spacing:-.005em}
.mega>span{grid-area:1/1}
.mega .o{color:transparent;-webkit-text-stroke:max(1px,.0035em) var(--g)}
.mega .f{color:var(--g);clip-path:inset(0 0 0 0);opacity:.92}
.r-hero{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:end;padding-bottom:clamp(40px,7vh,72px);margin-top:calc(clamp(7rem,30vw,30rem) * -.36)}
.sleeve{--glow:.75;width:100%;max-width:620px}
.r-type{display:flex;flex-direction:column;gap:20px;min-width:0}
.r-art{font-family:var(--display);font-weight:400;text-transform:uppercase;margin:0;font-size:clamp(3.6rem,9vw,9.5rem);line-height:.82;overflow-wrap:anywhere;text-shadow:0 10px 60px rgb(0 0 0/.55)}
.r-art.m{font-size:clamp(3rem,7vw,7.4rem)}
.r-art.l{font-size:clamp(2.6rem,5.4vw,5.8rem)}
.r-art.xl{font-size:clamp(2.2rem,4.2vw,4.4rem)}
.r-art span{display:block}
.r-art .t{color:var(--g)}
.r-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;border-block:1px solid var(--line);padding:12px 0;margin:0;color:var(--fg)}
.r-meta i{font-style:normal;color:var(--muted)}
.r-acts{display:flex;flex-wrap:wrap;gap:10px}
.rel .btn.primary{background:var(--g);border-color:var(--g);color:#000;box-shadow:0 10px 40px -12px var(--g)}
.rel .btn.primary:hover{background:var(--fg);border-color:var(--fg)}
.cc{display:inline-flex;align-items:center;gap:10px;color:var(--muted)}
.cc b{border:1.5px solid var(--muted);border-radius:50%;width:26px;height:26px;display:grid;place-items:center;font-size:.6rem;color:var(--fg);letter-spacing:0;font-weight:600;flex:none}

.tl-head{display:flex;justify-content:space-between;align-items:baseline;color:var(--muted);padding-bottom:14px}
.tl-head h2{margin:0;font:inherit;color:var(--fg)}
.tlist{border-top:1px solid var(--line)}
.trk{display:grid;grid-template-columns:110px minmax(0,3fr) minmax(0,6fr) auto;grid-template-areas:"p n w a";gap:12px 20px;align-items:center;padding-block:18px;border-bottom:1px solid var(--line);transition:background .3s}
.trk:hover{background:linear-gradient(90deg,transparent,rgb(255 255 255/.03),transparent)}
.trk .p{grid-area:p;font-family:var(--display);font-size:clamp(3.2rem,6vw,5.6rem);line-height:.8;color:transparent;-webkit-text-stroke:1px rgb(255 255 255/.34);transition:color .3s,-webkit-text-stroke-color .3s,text-shadow .4s}
.trk.is-current .p{color:var(--g);-webkit-text-stroke-color:var(--g)}
body.is-playing .trk.is-current .p{text-shadow:0 0 40px color-mix(in srgb,var(--g) 55%,transparent)}
.trk .n{grid-area:n;min-width:0}
.trk .n b{display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(1.7rem,2.6vw,2.4rem);line-height:.95;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trk .n span{display:block;margin-top:6px;color:var(--muted);font-size:.62rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trk .wave{grid-area:w;height:60px}
.trk .wave.flat{height:30px;align-self:center;border-radius:0;
  background:linear-gradient(90deg,transparent calc(var(--h) - 1px),var(--fg) calc(var(--h) - 1px) var(--h),transparent var(--h)),
    linear-gradient(90deg,var(--g) 0 var(--p,0%),rgb(255 255 255/.18) var(--p,0%) 100%) center/100% 3px no-repeat}
.trk .a{grid-area:a;display:flex;gap:8px;align-items:center}
.trk .len{color:var(--muted);font-size:.68rem;margin-right:6px;font-variant-numeric:tabular-nums}
.ib{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;transition:background .25s,border-color .25s}
.ib svg{width:12px;height:12px;fill:var(--fg)}
.ib:hover,.trk.is-current .ib{background:var(--g);border-color:var(--g)}
.ib:hover svg,.trk.is-current .ib svg{fill:#000}
.trk.nc .ib{opacity:.45}
.trk-dl{height:34px;padding:0 12px;border-radius:99px;border:1px solid var(--line);color:var(--muted);font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;transition:color .2s,border-color .2s;white-space:nowrap}
.trk-dl:hover{color:var(--fg);border-color:var(--g)}
.r-note{color:var(--muted);font-size:.62rem;padding-top:14px;margin:0}

.r-info{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);border-block:1px solid var(--line);margin-top:clamp(48px,8vh,96px)}
.r-info>*{padding-block:40px;min-width:0}
.r-info>.ed{border-left:1px solid var(--line);padding-left:clamp(24px,3vw,48px)}
.r-info>.cred{grid-column:1/-1;border-top:1px solid var(--line)}
.pull{font-family:var(--display);text-transform:uppercase;font-size:clamp(2.4rem,5vw,5rem);line-height:.9;margin:0;padding-right:clamp(0px,2vw,32px);color:var(--g);font-weight:400;text-shadow:0 0 80px color-mix(in srgb,var(--g) 30%,transparent)}
.pull::before{content:"\201C";display:block;font-size:.9em;line-height:.6;color:var(--fg)}
.pull cite{display:block;font-family:var(--mono);font-size:.64rem;line-height:1.5;letter-spacing:.14em;color:var(--muted);margin-top:22px;font-style:normal;text-shadow:none}
.ed{max-width:66ch}
.ed h3,.cred h3{font-family:var(--mono);font-weight:400;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 18px}
.ed p{margin:0 0 1.1em;color:var(--fg-70);font-weight:300}
.ed p:first-of-type::first-letter{font-family:var(--display);float:left;font-size:5.4em;line-height:.8;margin:.05em .12em 0 0;color:var(--g)}
.cred{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.cred .por-box{max-width:220px;width:100%}
.cred .nm{display:block;font-family:var(--display);font-weight:400;font-size:clamp(2.4rem,4vw,3.4rem);line-height:.9;text-transform:uppercase;overflow-wrap:anywhere}
.cred .loc{color:var(--muted);margin:8px 0 18px;font-size:.64rem}
.cred .bio{color:var(--fg-70);max-width:62ch;margin:0;font-weight:300}
.cred dl{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;margin:22px 0 0;font-size:.64rem}
.cred dt{color:var(--muted)}
.cred dd{margin:0;color:var(--fg-70)}
.cred .also{color:var(--muted);font-size:.6rem;line-height:28px;margin-right:4px}

.pn{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line);margin-top:clamp(48px,8vh,96px)}
.pn>*{padding-block:26px 20px;min-width:0}
.pn a{text-align:left;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.pn a:last-child{text-align:right;align-items:flex-end;border-left:1px solid var(--line);padding-left:12px}
.pn a:first-child{padding-right:12px}
.pn .lab{color:var(--muted);font-size:.62rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn .cn{font-family:var(--display);font-size:clamp(2.8rem,10.5vw,11rem);line-height:.8;color:transparent;-webkit-text-stroke:1px var(--g);white-space:nowrap;transition:color .35s,text-shadow .35s}
.pn a:hover .cn,.pn a:focus-visible .cn{color:var(--g);text-shadow:0 0 60px color-mix(in srgb,var(--g) 40%,transparent)}

/* ---------- player ---------- */
.player{position:fixed;left:0;right:0;bottom:0;z-index:60;view-transition-name:player;padding-bottom:env(safe-area-inset-bottom, 0px);padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));
  background:var(--glass);backdrop-filter:blur(28px) saturate(1.6);-webkit-backdrop-filter:blur(28px) saturate(1.6);border-top:1px solid var(--line-2);box-shadow:0 -30px 60px -30px rgb(0 0 0/.9)}
.player::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:var(--pp,0%);background:var(--g);box-shadow:0 0 14px 1px var(--g);transition:width .25s linear}
.player::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgb(255 255 255/.06),transparent 40%)}
.pl{max-width:1360px;margin-inline:auto;height:var(--player-h);display:grid;grid-template-columns:auto minmax(0,15rem) auto minmax(0,1fr) auto;gap:20px;align-items:center;position:relative;z-index:1}
.pl-cover{width:50px;height:50px;border-radius:4px;overflow:hidden;box-shadow:0 0 0 1px var(--line-2),0 8px 30px -6px var(--g)}
.pl-cover img{width:100%;height:100%;object-fit:cover}
.pl-meta{min-width:0;line-height:1.2}
.pl-meta .catno{color:var(--muted);font-size:.62rem}
.pl-meta strong{display:block;font-family:var(--display);font-weight:400;font-size:1.25rem;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.pl-meta span.t{display:block;color:var(--muted);font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-ctrl{display:flex;align-items:center;gap:6px}
.pl-ctrl button{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--fg);transition:background .2s}
.pl-ctrl button:hover{background:rgb(255 255 255/.08)}
.pl-ctrl svg{width:14px;height:14px;fill:currentColor}
.pl-ctrl .pp{position:relative;width:50px;height:50px;background:var(--fg);color:var(--bg);box-shadow:0 0 0 6px rgb(255 255 255/.04),0 10px 30px -8px var(--g)}
.pl-ctrl .pp:hover{background:#fff}
.pl-ctrl .pp svg{width:16px;height:16px}
body.is-buffering .pl-ctrl .pp::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid transparent;border-top-color:var(--g);border-right-color:var(--g)}
.pl-scrub{display:flex;align-items:center;gap:14px;min-width:0}
.pl-scrub .wave{height:34px}
.pl-scrub .wave.flat{height:3px}
.pl-time{color:var(--muted);font-size:.66rem;white-space:nowrap;min-width:3.6em}
.pl-time.r{text-align:right}
.pl-side{display:flex;gap:8px;align-items:center}
.pl-side .tag{color:var(--muted);font-size:.6rem;border:1px solid var(--line);border-radius:4px;padding:4px 6px}
.qbtn{height:38px;padding:0 14px;border-radius:99px;border:1px solid var(--line-2);font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase}
.qbtn[aria-expanded="true"]{background:var(--fg);color:var(--bg)}
.queue{position:absolute;right:max(16px, env(safe-area-inset-right, 0px));bottom:calc(100% + 12px);width:min(380px,calc(100vw - 32px));padding:10px;border-radius:16px;background:rgb(17 17 20/.85);backdrop-filter:blur(30px) saturate(1.5);-webkit-backdrop-filter:blur(30px) saturate(1.5);border:1px solid var(--line-2);box-shadow:0 40px 80px -20px #000;transform-origin:bottom right;animation:qin .35s var(--ease)}
@keyframes qin{from{opacity:0;transform:translateY(10px) scale(.97)}}
.queue h5{margin:6px 10px 10px;color:var(--muted);font-weight:400}
.queue button{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;width:100%;padding:8px 10px;border-radius:10px;text-align:left}
.queue button:hover{background:rgb(255 255 255/.06)}
.queue button.is-current{background:rgb(255 255 255/.08)}
.queue img{width:40px;height:40px;border-radius:3px}
.queue strong{display:block;font-family:var(--display);font-weight:400;font-size:1.1rem;line-height:1;text-transform:uppercase}
.queue small{color:var(--muted)}
.queue .pfx{color:var(--g)}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(var(--player-h) + 20px + env(safe-area-inset-bottom, 0px));z-index:80;transform:translate(-50%,20px);opacity:0;pointer-events:none;padding:12px 18px;border-radius:99px;background:rgb(17 17 20/.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--line-2);color:var(--fg);transition:opacity .3s,transform .4s var(--ease);display:flex;gap:10px;align-items:center;max-width:calc(100vw - 32px)}
.toast::before{content:"";width:8px;height:8px;flex:none;background:var(--g);box-shadow:0 0 10px var(--g)}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- page change (Turbo + View Transitions): genre-colour wipe + cover morph ---------- */
::view-transition-image-pair(root){background:var(--wipe)}
::view-transition-old(root){animation:vt-out .72s var(--cut) both;mix-blend-mode:normal}
::view-transition-new(root){animation:vt-in .72s var(--cut) both;mix-blend-mode:normal}
@keyframes vt-out{0%{clip-path:inset(0 0 0 0)}46%,100%{clip-path:inset(0 0 0 100%)}}
@keyframes vt-in{0%,40%{clip-path:inset(0 100% 0 0)}100%{clip-path:inset(0 0 0 0)}}
::view-transition-group(.cover){animation-duration:.72s;animation-timing-function:cubic-bezier(.7,0,.2,1);z-index:5}
::view-transition-image-pair(.cover){isolation:auto}
::view-transition-old(.cover),::view-transition-new(.cover){animation:none;mix-blend-mode:normal;height:100%;object-fit:cover}

/* ---------- scroll-driven + entrance effects (progressive) ---------- */
@media (prefers-reduced-motion:no-preference){
  .mega.anim .f{animation:fillwipe 1.15s .4s var(--cut) both}
  @keyframes fillwipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
  body.is-playing .is-live .lamp{animation:blink 1s steps(2) infinite}
  @keyframes blink{50%{opacity:.2}}
  body.is-buffering .is-live .lamp{animation:breathe 1.2s ease-in-out infinite}
  @keyframes breathe{50%{opacity:.25;box-shadow:none}}
  body.is-buffering .pl-ctrl .pp::after{animation:spin .8s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  @supports (animation-timeline:view()){
    .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
    @keyframes rise{from{opacity:0;transform:translateY(48px)}}
    .year{animation:fill linear both;animation-timeline:--yg;animation-range:cover 15% cover 75%}
    @keyframes fill{from{--fill:0%}to{--fill:100%}}
    .ambient{animation:dim linear both;animation-timeline:scroll(root);animation-range:0 120vh}
    @keyframes dim{to{opacity:.65}}
  }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .grain,.eq i{animation:none!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .trk{grid-template-columns:88px minmax(0,3fr) minmax(0,5fr) auto}
  .trk-dl{display:none}
  .pl{grid-template-columns:auto minmax(0,12rem) auto minmax(0,1fr)}
  .pl-side{display:none}
}
@media (max-width:900px){
  .r-hero{grid-template-columns:1fr;align-items:start}
  .sleeve{width:min(100%,460px)}
  .trk{grid-template-columns:72px minmax(0,1fr) auto;grid-template-areas:"p n a" "w w w"}
  .trk .wave{height:44px}
  .trk-dl{display:inline-block}
  .r-info{grid-template-columns:1fr}
  .r-info>.ed{border-left:0;padding-left:0;border-top:1px solid var(--line)}
  .cred{grid-template-columns:1fr}
  .crumb .path{display:none}
  .crumb{grid-template-columns:auto 1fr auto}
  .crumb .idx{justify-content:flex-end}
}
@media (max-width:860px){
  .top nav{display:none}
  .now{margin-left:auto}
  .tri-wrap{grid-template-columns:1fr}
  .tri{min-height:360px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .yg{grid-template-columns:1fr}
  .year{position:static;writing-mode:horizontal-tb;transform:none;font-size:clamp(4.5rem,22vw,8rem);background:linear-gradient(to right,var(--fg) var(--fill),transparent var(--fill));-webkit-background-clip:text;background-clip:text}
  .about-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  :root{--player-h:84px}
  .pl{grid-template-columns:auto minmax(0,1fr) auto;gap:12px;padding-top:10px;align-content:center}
  .pl-scrub{position:absolute;left:0;right:0;top:4px;gap:8px}
  .pl-scrub .wave{height:3px}
  .pl-scrub .wave:not(.flat){-webkit-mask:none;mask:none;border-radius:2px;min-height:0;background:linear-gradient(90deg,var(--g) 0 var(--p,0%),rgb(255 255 255/.14) var(--p,0%) 100%)}
  .pl-time{display:none}
  .pl-ctrl .prv{display:none}
}
@media (max-width:560px){
  .trk .len{display:none}
  .trk .a{gap:6px}
  .trk-dl{padding:0 10px}
  .trk-dl .w{display:none}
  .scope-btn .t{display:none}
  .meta-row .f2{display:none}
  .meta-row{grid-template-columns:minmax(0,1fr) auto}
  .pn .lab .nm{display:none}
}
@media (max-width:480px){
  body{font-size:16px}
  .h-acts .btn,.r-acts .btn{height:44px;padding:0 16px}
  .tri-count{font-size:4rem}
  .card h3{font-size:1.15rem}
  .qp{opacity:1;transform:none;width:38px;height:38px;right:8px;top:8px}
  .now .lbl{display:none}
  .cred dl{grid-template-columns:1fr;gap:2px}
  .cred dd{margin-bottom:10px}
  .trk{grid-template-columns:56px minmax(0,1fr) auto;gap:10px 12px}
}

/* ---------- server-rendered pages (links instead of buttons, Turbo, artist page) ---------- */
a.btn,a.tilt,.art,.pn a,.crumb a,.top nav a,.brand{text-decoration:none}
.art{color:inherit}
.cred .art,.artist-hero .art{cursor:default}
section[id]{scroll-margin-top:70px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
.turbo-progress-bar{height:2px;background:var(--cur);box-shadow:0 0 12px var(--cur)}
img[data-cover]{view-transition-class:cover}
.h-tl a{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;padding:9px 14px}
.cred .nm a{text-decoration:none}
.cred .nm a:hover{color:var(--g)}
.empty-portrait{display:grid;place-items:center;aspect-ratio:1;border-radius:4px;background:var(--raised);box-shadow:0 0 0 1px var(--line)}
.empty-portrait img{width:50%;height:auto;opacity:.25}

.artist-hero .mega{font-size:clamp(4.5rem,17vw,19rem)}
.artist-hero .r-hero{margin-top:calc(clamp(4.5rem,17vw,19rem) * -.3);align-items:start}
.artist-hero .por-box{width:100%;max-width:460px}
.artist-hero .art-name{display:none}
.a-bio{max-width:66ch}
.a-bio p{margin:0 0 1.1em;color:var(--fg-70);font-weight:300}
.a-bio p:first-of-type::first-letter{font-family:var(--display);float:left;font-size:5.4em;line-height:.8;margin:.05em .12em 0 0;color:var(--g)}
.a-rels{padding-block:clamp(48px,8vh,96px) 40px}
.a-rels .grid{border-top:1px solid var(--line);padding-top:clamp(24px,3vw,40px)}
@media (max-width:900px){.artist-hero .por-box{max-width:360px}}

/* ---------- DJ mixes (home, under the hero) ---------- */
.mixes{position:relative;overflow:hidden;padding-block:clamp(56px,9vh,110px) clamp(72px,12vh,140px);border-block:1px solid var(--line);
  background:radial-gradient(60% 50% at 85% 0%,color-mix(in srgb,var(--g) 22%,transparent),transparent 70%),
    radial-gradient(40% 40% at 0% 100%,color-mix(in srgb,var(--g) 12%,transparent),transparent 70%),
    repeating-linear-gradient(0deg,transparent 0 3px,rgb(255 255 255/.018) 3px 4px),var(--raised)}
.mx-marquee{overflow:hidden;white-space:nowrap;user-select:none;margin-bottom:clamp(24px,4vw,48px);border-block:1px solid color-mix(in srgb,var(--g) 30%,transparent)}
.mx-marquee>div{display:inline-flex;will-change:transform}
.mx-marquee span{font-family:var(--display);text-transform:uppercase;font-size:clamp(5rem,16vw,15rem);line-height:.82;padding:.06em .25em 0;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--g) 70%,transparent)}
.mx-marquee span:nth-child(odd){color:var(--g);-webkit-text-stroke:0;text-shadow:0 0 60px color-mix(in srgb,var(--g) 45%,transparent)}
.mx-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,48px)}
.mx-head h2{font-family:var(--display);font-weight:400;font-size:clamp(2.4rem,5vw,4.4rem);line-height:.88;margin:0;text-transform:uppercase}
.mx-head h2 small{display:block;color:var(--g);margin-bottom:12px}
.mx-head p{max-width:46ch;margin:0;color:var(--fg-70)}
.mx-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.mx{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"no t a" "w w w" "tl tl tl";gap:18px 20px;align-content:start;padding:clamp(18px,2.4vw,30px);
  border:1px solid var(--line-2);border-radius:14px;background:linear-gradient(160deg,rgb(255 255 255/.045),rgb(255 255 255/.01) 60%),rgb(8 8 10/.55);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:border-color .3s,box-shadow .4s,transform .4s var(--ease)}
.mx:hover{border-color:color-mix(in srgb,var(--g) 50%,transparent);transform:translateY(-2px)}
.mx.is-current{border-color:var(--g);box-shadow:0 0 0 1px var(--g),0 30px 80px -30px color-mix(in srgb,var(--g) 70%,transparent)}
.mx-no{grid-area:no;font-family:var(--display);font-size:clamp(3.4rem,6vw,5.4rem);line-height:.8;color:transparent;-webkit-text-stroke:1px rgb(255 255 255/.34);transition:color .3s,-webkit-text-stroke-color .3s,text-shadow .4s}
.mx.is-current .mx-no{color:var(--g);-webkit-text-stroke-color:var(--g)}
body.is-playing .mx.is-current .mx-no{text-shadow:0 0 40px color-mix(in srgb,var(--g) 60%,transparent)}
.mx-t{grid-area:t;min-width:0}
.mx-k{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 10px;color:var(--muted)}
.mx-k .chip{font-size:inherit}
.mx h3{margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(1.9rem,3vw,2.9rem);line-height:.9;overflow-wrap:anywhere}
.mx h3 small{display:block;margin-top:6px;font-size:.55em;color:var(--g)}
.mx-d{margin:12px 0 0;color:var(--fg-70);font-size:.92rem;max-width:52ch}
.mx-a{grid-area:a;display:flex;flex-direction:column;align-items:center;gap:10px}
.mx-play{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--g);box-shadow:0 0 0 6px color-mix(in srgb,var(--g) 18%,transparent),0 14px 40px -10px var(--g);transition:transform .25s var(--ease),box-shadow .25s}
.mx-play:hover{transform:scale(1.06);box-shadow:0 0 0 10px color-mix(in srgb,var(--g) 22%,transparent),0 18px 50px -10px var(--g)}
.mx-play svg{width:18px;height:18px;fill:#000}
.mx .wave{grid-area:w;height:72px}
.mx-tl{grid-area:tl;border-top:1px solid var(--line);padding-top:12px}
.mx-tl summary{cursor:pointer;color:var(--muted);list-style:none}
.mx-tl summary::-webkit-details-marker{display:none}
.mx-tl summary::before{content:"+ ";color:var(--g)}
.mx-tl[open] summary::before{content:"− "}
.mx-tl ol{margin:12px 0 0;padding:0;list-style:none;counter-reset:mx;columns:2;column-gap:24px;font-size:.88rem}
.mx-tl li{counter-increment:mx;break-inside:avoid;padding:4px 0;color:var(--fg-70)}
.mx-tl li::before{content:counter(mx,decimal-leading-zero);font-family:var(--mono);font-size:.62rem;color:var(--muted);margin-right:10px}
.mx-tl li .mono{display:inline-block;min-width:7.2em;font-size:.6rem;color:var(--muted)}
.mx-tl li a{color:var(--g)}
@media (prefers-reduced-motion:no-preference){
  .mx-marquee>div{animation:mxroll 38s linear infinite}
  @keyframes mxroll{to{transform:translateX(-50%)}}
}
@media (max-width:1100px){.mx-list{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){
  .mx{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t a" "w w" "tl tl"}
  .mx-no{display:none}
  .mx-play{width:54px;height:54px}
  .mx-tl ol{columns:1}
}