:root{--bg:#050505;--ink:#f2f2f2;--muted:#9e9e9e;--red:#9d1017;--silver:#d6d6d6;--glass:rgba(7,7,8,.68);--line:rgba(255,255,255,.12)}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--bg)}body{margin:0;color:var(--ink);background:#050505;font-family:Inter,Arial,Helvetica,sans-serif;overflow-x:hidden}body::selection{background:var(--red);color:#fff}
#rain{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;opacity:.2}.noise{position:fixed;inset:0;pointer-events:none;z-index:4;opacity:.08;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E")}
.nav{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:22px 34px;background:linear-gradient(to bottom,rgba(0,0,0,.72),transparent);backdrop-filter:blur(3px)}.nav a{color:#fff;text-decoration:none;letter-spacing:.16em;font-size:12px}.brand{font-weight:900}.nav nav{display:flex;gap:24px}.nav nav a{opacity:.65;transition:.3s}.nav nav a:hover{opacity:1;color:#ffccd0}
.visual{position:relative;min-height:100vh;background-color:#080808;background-position:center;background-size:cover;background-attachment:fixed;isolation:isolate}.visual::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.5) 45%,rgba(0,0,0,.78) 100%),linear-gradient(0deg,rgba(0,0,0,.86),transparent 50%,rgba(0,0,0,.36))}.visual-1{background-image:url('https://images.openai.com/static-rsc-4/Ih4WVYiCCWP6Ey851tqHJbeWK4_56ZExTrXBs9OMq4axnqOtkHCaekLamCxCbZz2Ks4cQGGWoHTIFL5ptk3QExsCxqGVpy4hYB1RUGJJfcZBAxPi3cF9ZKxEBD5wq8wkqgnZaAtNP0ooA1OiUR5L4QM_Aq-DvI0XxMvBy_GwqxQ3Ms5Mhgm115-5RjMZKrQq?purpose=fullsize'),linear-gradient(135deg,#050505,#1a0b0d 55%,#050505)}
.visual-2{background-image:url('https://images.openai.com/static-rsc-4/wK-IA_JRC2xB3QmRxHFDomYGl55gKaKuyx1eAMm-CWX7vMkIRDtSbRg-PQCA71uA4LxBkRLN_UASTl4Wrsc_JQMfql_a5xS7KLrr6gBFcqfUTNq3V3T5ROHl2RBAIhuebqCHtsbYmv7-6yMpWKLsKntHqTxL3R8JSmHXITLZ4FZVkweLwdEVYuF6P3Sk66nn?purpose=fullsize'),linear-gradient(135deg,#080808,#111)}
.visual-3{background-image:url('https://images.openai.com/static-rsc-4/G_cYjlLfkI7bE5NlS4-cLGsIUkdLLJq04GZ7ECSw_0mLe7CH5bzlGJfDfRrT0lCnofYi5zXIWdXpxxc6CjcMJhM6ZBLOhh2LRsSAmHFLuEsw98kTvnWyio3NvoiicYKz8pqx2S5ZqNTlAeaT5P2xirxTHe9rqFt5Tj_cNnmfK98PRZjT8dyvZB2ao6ouGs5J?purpose=fullsize'),radial-gradient(circle at 70% 30%,#33231b,#060606 62%)}
.visual-4{background-image:url('https://images.openai.com/static-rsc-4/iPuE4V4fXhvRlEptsOYPnyH9NzpI3Wc2NZhsC7FaNmT8Tru0Ke14SbqBVhFnETF-gk6l_V5XadbRldxSEx2Nl23cxr3KcHlZkZGbB1mN2Dqyc-eaevSgCqukMXwA55Nrl2n79n71t3NwzMme95ZYYm2KkUc-KIx4R2a9YlRfZ2Fh0jlaXQ2KcO0wu2kVggxb?purpose=fullsize'),linear-gradient(120deg,#060606,#25070b 50%,#060606)}
.hero{display:flex;align-items:center;padding:120px 7vw 90px;overflow:hidden}.hero::after{content:"";position:absolute;width:520px;height:520px;border:1px solid rgba(175,15,25,.22);border-radius:50%;right:-160px;top:50%;transform:translateY(-50%);box-shadow:0 0 100px rgba(151,9,19,.12),inset 0 0 100px rgba(151,9,19,.08)}.hero-copy{max-width:850px;position:relative;z-index:2}.eyebrow,.chapter-no{letter-spacing:.32em;font-size:11px;font-weight:800;color:#c9a0a2}.hero h1,.chapter h2,.album h2,.finale h2{margin:.25em 0 .15em;font-size:clamp(66px,11vw,170px);line-height:.78;letter-spacing:-.065em;font-weight:950;text-transform:uppercase}.hero h1 span,.finale h2 span{color:#b31922;text-shadow:0 0 35px rgba(177,25,34,.3)}.hero-copy>p{font-size:clamp(18px,2vw,30px);color:#d2d2d2;margin:26px 0}.hero-tags{display:flex;gap:9px;flex-wrap:wrap;margin:28px 0 40px}.hero-tags span{padding:9px 12px;border:1px solid rgba(255,255,255,.15);background:rgba(0,0,0,.34);font-size:11px;letter-spacing:.12em;text-transform:uppercase}.cta{display:inline-flex;color:#fff;text-decoration:none;font-weight:800;letter-spacing:.18em;font-size:12px;border-bottom:1px solid #a81720;padding:0 0 10px}.hero-quote{position:absolute;right:5vw;bottom:90px;max-width:370px;font-family:Georgia,serif;font-style:italic;font-size:20px;color:#ddd;border-left:2px solid var(--red);padding-left:18px}
.chapter{display:flex;align-items:center;padding:120px 7vw}.chapter-inner{max-width:900px}.chapter-inner.right{margin-left:auto;text-align:right}.chapter h2{font-size:clamp(56px,8.4vw,128px)}.chapter p{max-width:650px;font-size:20px;line-height:1.7;color:#c5c5c5}.chapter-inner.right p{margin-left:auto}.chapter blockquote{font-size:clamp(28px,4vw,58px);font-family:Georgia,serif;font-style:italic;margin:44px 0;color:#fff}
.album{padding:120px 5vw 160px;min-height:auto}.album::before{background:linear-gradient(90deg,rgba(0,0,0,.94),rgba(0,0,0,.76)),linear-gradient(0deg,#050505,transparent,#050505)}.album-shell{max-width:1500px;margin:auto;display:grid;grid-template-columns:minmax(300px,.9fr) minmax(420px,1.1fr);gap:34px}.album-intro{grid-column:1/2;align-self:start;position:sticky;top:120px}.album h2{font-size:clamp(56px,7vw,110px)}.album-intro p{max-width:500px;color:#bbb;line-height:1.7}.player-card{grid-column:2/3;background:rgba(5,5,6,.74);border:1px solid var(--line);box-shadow:0 25px 80px rgba(0,0,0,.42);backdrop-filter:blur(18px);padding:24px;position:sticky;top:90px;z-index:5}.now{display:flex;justify-content:space-between;gap:20px;align-items:center}.now span{font-size:11px;letter-spacing:.2em;color:#b78b8e}.now h3{font-size:clamp(24px,3vw,44px);margin:7px 0 2px}.now p{color:#777;margin:0;font-size:11px;letter-spacing:.2em}.main-play{width:64px;height:64px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:#a8121b;color:#fff;font-size:22px;cursor:pointer;box-shadow:0 0 36px rgba(168,18,27,.3)}#visualizer{width:100%;height:110px;margin:18px 0 4px;display:block}.progress-row{display:grid;grid-template-columns:45px 1fr 45px;align-items:center;gap:10px;font-size:11px;color:#999}.controls{display:flex;align-items:center;gap:8px;margin-top:18px}.controls button,.dock button{border:0;background:transparent;color:#fff;font-size:20px;cursor:pointer;padding:9px}.controls input[type=range]{width:110px}.tracklist{grid-column:2/3;margin-top:12px;background:rgba(0,0,0,.38);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(10px)}.track{display:grid;grid-template-columns:45px 1fr auto auto;gap:14px;align-items:center;padding:15px 18px;border-bottom:1px solid rgba(255,255,255,.07);cursor:pointer;transition:.25s}.track:hover{background:rgba(255,255,255,.04);transform:translateX(4px)}.track.active{background:linear-gradient(90deg,rgba(157,16,23,.2),rgba(255,255,255,.02));box-shadow:inset 3px 0 #b31922}.track-num{color:#777;font-size:11px}.track-title{font-weight:700}.track-time{font-size:11px;color:#888}.eq{display:flex;align-items:end;gap:2px;height:16px;width:18px;opacity:0}.track.active .eq{opacity:1}.eq i{display:block;width:3px;background:#ba1d26;animation:eq .7s infinite alternate}.eq i:nth-child(2){animation-delay:.18s}.eq i:nth-child(3){animation-delay:.32s}@keyframes eq{from{height:3px}to{height:16px}}
.finale{display:grid;place-items:center;text-align:center;padding:120px 6vw}.finale-inner{max-width:1100px}.finale h2{font-size:clamp(62px,10vw,150px)}.finale p{font-size:20px;color:#c6c6c6}.final-line{margin-top:80px;letter-spacing:.35em;font-size:12px;color:#d7b6b8}
.dock{position:fixed;z-index:30;left:50%;bottom:18px;transform:translateX(-50%) translateY(140%);width:min(980px,calc(100% - 28px));display:grid;grid-template-columns:minmax(170px,1fr) 46px minmax(100px,2fr) 50px;align-items:center;gap:12px;padding:11px 14px;background:rgba(6,6,7,.86);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(20px);box-shadow:0 15px 50px rgba(0,0,0,.45);transition:.5s}.dock.show{transform:translateX(-50%) translateY(0)}.dock-track{display:flex;gap:10px;min-width:0}.dock-track span{color:#a66}.dock-track strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dock-progress{height:3px;background:#313131;overflow:hidden}.dock-progress i{display:block;height:100%;width:0;background:#b31922}.dock-time{font-size:11px;color:#aaa;text-align:right}
input[type=range]{accent-color:#b31922}.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s ease}.reveal.visible{opacity:1;transform:none}.delay{transition-delay:.25s}
@media(max-width:900px){.nav{padding:18px}.nav nav{display:none}.visual{background-attachment:scroll}.hero{padding:110px 22px 95px;align-items:end}.hero-quote{display:none}.hero h1{font-size:clamp(62px,18vw,110px)}.chapter{padding:100px 22px}.chapter-inner.right{text-align:left;margin:0}.chapter-inner.right p{margin-left:0}.album{padding:100px 18px 140px}.album-shell{display:block}.album-intro{position:static;margin-bottom:28px}.player-card{position:relative;top:0;margin-bottom:16px;padding:18px}.tracklist{margin-top:0}.track{grid-template-columns:32px 1fr auto;padding:14px 12px}.track .eq{display:none}.dock{grid-template-columns:minmax(120px,1fr) 40px 1fr}.dock-time{display:none}.hero-tags{gap:6px}.hero-tags span{font-size:9px}}
@media(max-width:560px){.hero h1,.chapter h2,.album h2,.finale h2{letter-spacing:-.05em}.controls #volume,.controls #mute{display:none}.track{font-size:13px}.track-time{font-size:10px}.dock-progress{display:none}.dock{grid-template-columns:1fr 44px}.now h3{font-size:25px}.main-play{width:54px;height:54px}.hero-copy>p,.chapter p,.finale p{font-size:16px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}#rain{display:none}}

/* AUDIO-REACTIVE V2 */
:root{--bass:0;--mid:0;--high:0;--react-zoom:1;--react-glow:.1;--react-blur:0px;--fx-hue:355}
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;mix-blend-mode:screen;opacity:.9}
.beat-flash{position:fixed;inset:0;z-index:4;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 48%,hsla(var(--fx-hue),90%,60%,.22),transparent 58%);mix-blend-mode:screen}
.beat-flash.kick{animation:beatFlash .24s ease-out}@keyframes beatFlash{0%{transform:scale(.99);filter:brightness(1.9)}100%{opacity:0;transform:scale(1.035);filter:brightness(1)}}
.track-aura{position:fixed;inset:-10%;z-index:1;pointer-events:none;opacity:calc(.10 + var(--react-glow)*.34);transition:background 1s ease,opacity .3s ease;filter:blur(50px);mix-blend-mode:screen}
.fx-memory{background:radial-gradient(circle at 24% 52%,rgba(155,18,30,.26),transparent 38%)}
.fx-industrial,.fx-danger,.fx-storm{background:radial-gradient(circle at 50% 48%,rgba(210,15,26,.38),transparent 38%),linear-gradient(90deg,transparent,rgba(255,0,20,.08),transparent)}
.fx-military{background:radial-gradient(circle at 35% 60%,rgba(178,62,26,.25),transparent 42%)}
.fx-rise{background:radial-gradient(circle at 50% 82%,rgba(220,54,20,.28),transparent 48%)}
.fx-still,.fx-soft{background:radial-gradient(circle at 50% 50%,rgba(155,66,100,.14),transparent 46%)}
.fx-signal{background:repeating-linear-gradient(0deg,transparent 0 8px,rgba(200,24,48,.025) 9px 10px)}
.fx-diamond{background:radial-gradient(circle at 50% 45%,rgba(255,170,210,.22),transparent 24%),radial-gradient(circle at 50% 55%,rgba(170,10,45,.16),transparent 48%)}
.fx-drive{background:linear-gradient(90deg,transparent 5%,rgba(190,20,10,.13) 48%,transparent 95%)}
.fx-heartbeat,.fx-pulse{background:radial-gradient(circle at 50% 55%,rgba(220,12,36,.34),transparent 42%)}
.fx-warm,.fx-future,.fx-home{background:radial-gradient(circle at 50% 45%,rgba(235,150,86,.20),transparent 46%)}
.effect-label{display:inline-flex;margin-top:9px;padding:6px 9px;border:1px solid rgba(255,255,255,.1);font-size:9px;letter-spacing:.19em;color:#caa;opacity:.8}
body.is-playing .visual{transform:translate(var(--shake-x,0),var(--shake-y,0)) scale(var(--react-zoom));filter:saturate(calc(1 + var(--bass)*.45)) contrast(calc(1 + var(--mid)*.14)) brightness(calc(.92 + var(--bass)*.12)) blur(var(--react-blur));transition:transform .07s linear,filter .1s linear}
body[data-fx="industrial"] .noise,body[data-fx="danger"] .noise,body[data-fx="storm"] .noise{opacity:calc(.11 + var(--high)*.35)}
body[data-fx="signal"].is-playing::after{content:"";position:fixed;inset:0;z-index:7;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.022) 4px);opacity:calc(.12 + var(--high)*.24)}
body[data-fx="diamond"].is-playing .player-card{box-shadow:0 25px 80px rgba(0,0,0,.42),0 0 calc(24px + var(--bass)*55px) hsla(345,80%,58%,calc(.12 + var(--bass)*.22))}
body[data-fx="heartbeat"].is-playing .main-play,body[data-fx="pulse"].is-playing .main-play{transform:scale(calc(1 + var(--bass)*.12));box-shadow:0 0 calc(30px + var(--bass)*55px) rgba(196,15,34,calc(.22 + var(--bass)*.4))}
body[data-fx="drive"].is-playing #fx{filter:blur(calc(var(--bass)*1px))}
body[data-fx="storm"].is-playing .track-aura{opacity:calc(.20 + var(--react-glow)*.6)}
.player-card,.tracklist,.hero-copy,.chapter-inner,.finale-inner{position:relative;z-index:8}
@media(prefers-reduced-motion:reduce){#fx,.beat-flash,.track-aura{display:none!important}body.is-playing .visual{transform:none!important;filter:none!important}}

/* =========================================================
   RESPONSIVE / IOS / MOBILE HARDENING V3
   ========================================================= */
:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --app-vh: 1vh;
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(76px + var(--safe-top));}
body{min-width:320px;padding-left:var(--safe-left);padding-right:var(--safe-right);overscroll-behavior-y:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
button,a,input{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{min-width:44px;min-height:44px}
.visual{
  min-height:100vh;
  min-height:100svh;
  min-height:100dvh;
}
.nav{
  padding-top:calc(18px + var(--safe-top));
  padding-left:max(20px,calc(20px + var(--safe-left)));
  padding-right:max(20px,calc(20px + var(--safe-right)));
}
.dock{bottom:max(14px,calc(10px + var(--safe-bottom)));}
.hero,.chapter,.finale{min-height:100vh;min-height:100svh;min-height:100dvh;}

@supports (-webkit-touch-callout:none){
  .visual{background-attachment:scroll}
  body{overscroll-behavior-y:auto}
}

@media (max-width:900px){
  .nav{height:auto;min-height:64px;padding-bottom:14px;background:linear-gradient(to bottom,rgba(0,0,0,.88),rgba(0,0,0,.22),transparent);backdrop-filter:none;-webkit-backdrop-filter:none}
  .brand{font-size:11px;letter-spacing:.18em}
  .hero{padding:calc(94px + var(--safe-top)) 20px calc(92px + var(--safe-bottom));align-items:center}
  .hero::after{width:78vw;height:78vw;right:-46vw;opacity:.55}
  .hero-copy{max-width:680px;width:100%}
  .hero h1{font-size:clamp(58px,18vw,112px);line-height:.82;overflow-wrap:anywhere}
  .hero-copy>p{margin:18px 0;font-size:clamp(16px,4.3vw,22px)}
  .hero-tags{margin:20px 0 30px}
  .cta{padding-bottom:12px;min-height:44px;align-items:center}

  .chapter{padding:calc(92px + var(--safe-top)) 20px calc(90px + var(--safe-bottom));align-items:center}
  .chapter h2{font-size:clamp(46px,13vw,86px);line-height:.88;overflow-wrap:anywhere}
  .chapter p{font-size:clamp(15px,4vw,18px);line-height:1.6}
  .chapter blockquote{font-size:clamp(26px,8vw,42px);margin:30px 0}

  .album{padding:calc(90px + var(--safe-top)) 14px calc(130px + var(--safe-bottom));}
  .album h2{font-size:clamp(48px,14vw,82px)}
  .album-intro p{font-size:15px;line-height:1.55}
  .player-card{border-radius:18px;padding:16px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
  .now{align-items:flex-start}
  .now>div{min-width:0;flex:1}
  .now h3{font-size:clamp(22px,7vw,34px);line-height:1.05;overflow-wrap:anywhere}
  .main-play{flex:0 0 58px;width:58px;height:58px}
  #visualizer{height:84px;margin:10px 0 2px}
  .progress-row{grid-template-columns:38px minmax(0,1fr) 38px;gap:7px}
  .progress-row input{min-width:0;width:100%}
  .controls{justify-content:center;gap:4px;margin-top:12px}
  .controls button{font-size:19px;padding:6px}
  .controls #volume{width:min(30vw,120px)}

  .tracklist{border-radius:16px;overflow:hidden;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  .track{min-height:58px;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;padding:12px 11px;transform:none!important}
  .track-title{white-space:normal;line-height:1.25;overflow-wrap:anywhere}
  .track-time{align-self:center}

  .finale{padding:calc(100px + var(--safe-top)) 20px calc(110px + var(--safe-bottom))}
  .finale h2{font-size:clamp(54px,16vw,104px);line-height:.86}
  .final-line{margin-top:48px;font-size:10px;letter-spacing:.24em;overflow-wrap:anywhere}

  .dock{
    width:calc(100% - 20px - var(--safe-left) - var(--safe-right));
    max-width:680px;
    grid-template-columns:minmax(0,1fr) 48px;
    gap:8px;
    padding:9px 10px;
    border-radius:16px;
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  }
  .dock-track{min-width:0;align-items:center}
  .dock-track span{flex:0 0 auto}
  .dock-track strong{font-size:12px}
  .dock #dockPlay{width:48px;height:48px;border-radius:50%;background:rgba(157,16,23,.28)}
  .dock-progress,.dock-time{display:none}
}

@media(max-width:560px){
  .hero{padding-left:16px;padding-right:16px}
  .hero h1{font-size:clamp(54px,19vw,92px)}
  .hero-tags span{padding:8px 9px;font-size:8px}
  .chapter{padding-left:16px;padding-right:16px}
  .album{padding-left:10px;padding-right:10px}
  .player-card{padding:14px;border-radius:15px}
  .controls #volume,.controls #mute{display:none}
  .track{font-size:12.5px;min-height:56px}
  .track-time{font-size:9px}
  .effect-label{font-size:8px!important;letter-spacing:.12em!important}
  .dock{width:calc(100% - 12px - var(--safe-left) - var(--safe-right));bottom:max(7px,calc(6px + var(--safe-bottom)))}
}

/* very small iPhones */
@media(max-width:380px){
  .hero h1{font-size:52px}
  .hero-copy>p{font-size:15px}
  .hero-tags{display:none}
  .chapter h2{font-size:42px}
  .now h3{font-size:21px}
  .main-play{width:52px;height:52px;flex-basis:52px}
  .track{grid-template-columns:26px minmax(0,1fr) auto;padding:11px 8px;gap:7px}
}

/* phone landscape: keep content usable despite tiny viewport height */
@media(max-height:520px) and (orientation:landscape){
  .nav{padding-top:calc(8px + var(--safe-top));padding-bottom:8px;min-height:44px}
  .hero,.chapter,.finale{min-height:100dvh;padding-top:calc(58px + var(--safe-top));padding-bottom:calc(52px + var(--safe-bottom));align-items:center}
  .hero h1{font-size:clamp(44px,11vw,74px)}
  .hero-copy>p{font-size:14px;margin:8px 0}
  .hero-tags{margin:10px 0 14px}
  .hero-tags span{padding:6px 8px}
  .chapter h2{font-size:clamp(38px,9vw,64px)}
  .chapter p,.finale p{font-size:14px;line-height:1.45}
  .chapter blockquote{font-size:24px;margin:14px 0}
  .album{padding-top:calc(58px + var(--safe-top))}
  #visualizer{height:58px}
}

/* tablets / iPad */
@media(min-width:768px) and (max-width:1180px){
  .hero{padding-left:6vw;padding-right:6vw}
  .hero-copy{max-width:720px}
  .album-shell{grid-template-columns:minmax(260px,.8fr) minmax(380px,1.2fr);gap:22px}
  .album-intro{top:100px}
  .player-card{top:88px}
}

/* lower GPU cost on touch/mobile while retaining music reaction */
@media(hover:none) and (pointer:coarse){
  .noise{opacity:.045}
  #rain{opacity:.13}
  .player-card,.tracklist,.dock{box-shadow:0 14px 38px rgba(0,0,0,.36)}
  .visual::before{background:linear-gradient(90deg,rgba(0,0,0,.86),rgba(0,0,0,.48) 55%,rgba(0,0,0,.72)),linear-gradient(0deg,rgba(0,0,0,.88),transparent 52%,rgba(0,0,0,.32))}
}

/* =========================================================
   PERFORMANCE EDITION V4
   ========================================================= */
.visual{contain:paint;will-change:auto;background-attachment:scroll}
#rain,#fx,.beat-flash,.track-aura{pointer-events:none}
body.is-playing .visual{transform:none!important;filter:none!important}
.track-aura{filter:none!important;opacity:calc(.05 + var(--react-glow)*.18)!important;inset:0!important}
.noise{opacity:.035!important;background-size:220px 220px}
.player-card,.tracklist,.dock{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background-color:rgba(8,8,9,.9)!important}
body[data-fx="diamond"].is-playing .player-card{box-shadow:0 18px 46px rgba(0,0,0,.38),0 0 26px hsla(345,80%,58%,calc(.05 + var(--bass)*.14))!important}
body[data-fx="heartbeat"].is-playing .main-play,body[data-fx="pulse"].is-playing .main-play{transform:scale(calc(1 + var(--bass)*.055))!important;box-shadow:0 0 24px rgba(196,15,34,calc(.18 + var(--bass)*.24))!important}
body[data-fx="drive"].is-playing #fx{filter:none!important}
.beat-flash{mix-blend-mode:normal!important;background:radial-gradient(circle at 50% 48%,hsla(var(--fx-hue),90%,58%,.11),transparent 60%)!important}
#fx{mix-blend-mode:screen;opacity:.55}
#rain{opacity:.11}
.reveal{transition-duration:.55s}
.track{transition:background-color .15s ease,color .15s ease}
.track:hover{transform:none}
@media(max-width:900px),(hover:none) and (pointer:coarse){
  #rain{opacity:.055!important}
  #fx{opacity:.38!important}
  .noise{display:none!important}
  .track-aura{opacity:calc(.025 + var(--react-glow)*.09)!important}
  .beat-flash{opacity:0!important}
  .player-card,.tracklist,.dock{box-shadow:0 10px 26px rgba(0,0,0,.34)!important}
  .hero::after{box-shadow:none!important}
  .visual{background-position:center center!important}
  body[data-fx="diamond"].is-playing .player-card{box-shadow:0 10px 28px rgba(0,0,0,.38)!important}
  body[data-fx="heartbeat"].is-playing .main-play,body[data-fx="pulse"].is-playing .main-play{transform:none!important;box-shadow:0 0 18px rgba(196,15,34,.22)!important}
}
@media(max-width:560px){#visualizer{height:68px!important}}
.page-hidden #rain,.page-hidden #fx,.page-hidden .beat-flash,.page-hidden .track-aura{display:none!important}