/* Interactive music experience */
    .music-experience{
      position:fixed;inset:0;z-index:8500;pointer-events:none;font-family:var(--font-body);
      --music-accent:var(--gold);
      --music-accent-bright:var(--gold-bright);
      --music-ink:var(--paper);
      --music-panel:rgba(9,8,7,.72);
      --music-energy:.18;
    }
    .music-experience[data-theme="ember"]{--music-accent:#d7a158;--music-accent-bright:#ffe0ae}
    .music-experience[data-theme="noir"]{--music-accent:#d8d2c5;--music-accent-bright:#fff7ea}
    .music-orb{
      position:fixed;right:34px;bottom:34px;right:clamp(18px,3vw,34px);bottom:clamp(18px,3vw,34px);right:max(clamp(18px,3vw,34px),env(safe-area-inset-right));bottom:max(clamp(18px,3vw,34px),env(safe-area-inset-bottom));width:78px;height:78px;border-radius:50%;
      border:1px solid rgba(232,213,181,.38);cursor:pointer;pointer-events:auto;color:var(--music-ink);
      background:
        radial-gradient(circle at 35% 25%,rgba(255,255,255,.18),transparent 22%),
        radial-gradient(circle at 50% 55%,rgba(196,165,116,.22),transparent 56%),
        rgba(9,8,7,.7);
      box-shadow:0 18px 70px rgba(0,0,0,.55),0 0 34px rgba(196,165,116,.18),inset 0 1px 0 rgba(255,255,255,.12);
      backdrop-filter:blur(18px) saturate(1.25);display:grid;place-items:center;transition:transform .45s var(--ease-out),box-shadow .45s,border-color .35s;
      -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
    }
    .music-orb:hover{transform:translateY(-3px) scale(1.02);border-color:rgba(232,213,181,.7);box-shadow:0 24px 90px rgba(0,0,0,.62),0 0 48px rgba(196,165,116,.28)}
    .music-orb:focus-visible,.music-panel-toggle:focus-visible,.music-control:focus-visible{outline:3px solid var(--music-accent-bright);outline-offset:4px}
    .music-orb::before,.music-orb::after{
      content:'';position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(196,165,116,.18);opacity:.8;
    }
    .music-orb::after{inset:-16px;opacity:.35}
    .music-experience.is-playing .music-orb::before,.music-experience.is-playing .music-orb::after{animation:none}
    @keyframes music-ring{0%,100%{transform:scale(.96);opacity:.24}50%{transform:scale(1.08);opacity:.72}}
    .music-orb-icon{
      width:30px;height:30px;position:relative;display:block;
    }
    .music-orb-icon::before{
      content:'';position:absolute;left:10px;top:5px;border-left:14px solid var(--music-accent-bright);border-top:10px solid transparent;border-bottom:10px solid transparent;
      filter:drop-shadow(0 0 14px rgba(232,213,181,.48));transition:.25s ease;
    }
    .music-experience.is-playing .music-orb-icon::before{
      left:6px;top:5px;width:7px;height:20px;border:0;border-left:7px solid var(--music-accent-bright);border-right:7px solid var(--music-accent-bright);
      background:transparent;
    }
    .music-orb-label{
      position:absolute;right:0;bottom:88px;white-space:nowrap;font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
      color:var(--music-accent-bright);opacity:.96;text-shadow:0 0 18px rgba(196,165,116,.38);
      padding:7px 11px;border-radius:999px;background:rgba(9,8,7,.7);border:1px solid rgba(196,165,116,.24);
    }
    .music-panel{
      position:fixed;right:34px;top:104px;width:360px;right:clamp(18px,3vw,34px);top:clamp(82px,9vw,104px);width:min(360px,calc(100vw - 36px));right:max(clamp(18px,3vw,34px),env(safe-area-inset-right));padding:8px;
      pointer-events:auto;border:1px solid rgba(196,165,116,.22);border-radius:18px;background:linear-gradient(145deg,rgba(18,16,13,.84),rgba(9,8,7,.7));
      box-shadow:0 22px 80px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.05);backdrop-filter:blur(22px) saturate(1.18);
      opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-12px) scale(.96);transition:opacity .3s var(--ease-out),visibility .3s,transform .3s var(--ease-out),width .3s var(--ease-out);
    }
    .music-experience.is-playing .music-panel{opacity:.96;visibility:visible;pointer-events:auto;transform:none}
    .music-panel.is-open{opacity:1;transform:translateY(0) scale(1)}
    .music-experience:not(.is-playing) .music-panel{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-12px) scale(.96)}
    .music-panel-toggle{
      width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:7px 8px;border:0;border-radius:12px;
      color:var(--paper);background:transparent;cursor:pointer;text-align:left;
      -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
    }
    .music-panel-main{display:flex;align-items:center;gap:11px;min-width:0}
    .music-mini-viz{
      width:36px;height:36px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;position:relative;
      border:1px solid rgba(232,213,181,.28);background:radial-gradient(circle,rgba(196,165,116,.26),rgba(9,8,7,.48) 62%);
      box-shadow:0 0 26px rgba(196,165,116,.18),inset 0 1px 0 rgba(255,255,255,.1);
    }
    .music-mini-viz::before,.music-mini-viz::after{
      content:'';position:absolute;inset:5px;border-radius:50%;border:1px solid rgba(232,213,181,.22);
    }
    .music-mini-viz::after{inset:-4px;opacity:.35}
    .music-mini-bars{display:flex;align-items:flex-end;justify-content:center;gap:2px;height:18px;position:relative;z-index:1}
    .music-mini-bars span{
      width:3px;height:8px;border-radius:999px;
      background:linear-gradient(180deg,var(--music-accent-bright),var(--music-accent));box-shadow:0 0 10px rgba(232,213,181,.38);
    }
    .music-panel-toggle:hover{background:rgba(247,242,234,.04)}
    .music-panel-toggle::after{
      content:'+';display:grid;place-items:center;width:24px;height:24px;border-radius:50%;flex:0 0 auto;
      color:var(--music-accent-bright);border:1px solid rgba(196,165,116,.28);background:rgba(196,165,116,.06);
      transition:transform .35s var(--ease-out);
    }
    .music-panel.is-open .music-panel-toggle::after{content:'-';transform:rotate(180deg)}
    .music-panel-body{
      display:block;max-height:0;overflow:hidden;opacity:0;transform:translateY(-8px);
      transition:max-height .45s var(--ease-out),opacity .3s ease,transform .45s var(--ease-out);
    }
    .music-panel.is-open .music-panel-body{max-height:160px;opacity:1;transform:none}
    .music-panel-body-inner{padding:0 8px 7px}
    .music-panel-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:0}
    .music-kicker{font-size:9px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--music-accent);margin-bottom:4px}
    .music-title{font-family:var(--font-display);font-size:16px;color:var(--paper);letter-spacing:.02em}
    .music-time{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
    .music-bar{height:3px;border-radius:999px;background:rgba(247,242,234,.12);overflow:hidden;margin-bottom:9px}
    .music-bar-fill{height:100%;width:0;background:linear-gradient(90deg,var(--music-accent),var(--music-accent-bright));box-shadow:0 0 18px rgba(196,165,116,.5);transform-origin:left}
    .music-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
    .music-control{
      border:1px solid rgba(196,165,116,.2);background:rgba(247,242,234,.045);color:var(--paper-2);border-radius:999px;
      min-height:29px;padding:0 11px;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;
      transition:color .25s,border-color .25s,background .25s,transform .25s;
      -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
    }
    .music-control:hover{color:var(--music-accent-bright);border-color:rgba(196,165,116,.55);background:rgba(196,165,116,.08);transform:translateY(-1px)}
    .music-control.is-primary{background:linear-gradient(160deg,var(--music-accent-bright),var(--music-accent));color:#090807;border-color:rgba(255,255,255,.16)}
    .music-experience.is-lite .music-energy-field{opacity:.28}
    .music-experience.is-lite .music-beams span{opacity:.18;filter:none}
    .music-experience.is-lite .music-story{opacity:.68}
    .music-experience.is-lite .music-lyric{font-size:clamp(24px,4.4vw,52px);text-shadow:0 12px 44px rgba(0,0,0,.78)}
    .music-experience.is-lite .music-section-hit{animation-duration:.45s}
    .music-energy-field,.music-beams,.music-sparks,.music-story-stage,.music-stage-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
    .music-panel{z-index:32}
    .music-orb{z-index:31}
    .music-stage-fx{z-index:0;opacity:0;transition:opacity .8s ease}
    .music-experience.is-playing .music-stage-fx{opacity:1}
    .stage-vignette{
      position:absolute;inset:-12%;background:
        radial-gradient(ellipse 55% 38% at 50% 52%,transparent 0%,rgba(0,0,0,.22) 68%,rgba(0,0,0,.72) 100%),
        linear-gradient(180deg,rgba(0,0,0,.18),transparent 28%,rgba(0,0,0,.46));
    }
    .stage-floor-shadow{
      position:absolute;left:50%;bottom:8%;width:min(760px,88vw);height:140px;border-radius:50%;transform:translateX(-50%);
      background:radial-gradient(ellipse,rgba(0,0,0,.58),rgba(0,0,0,.12) 58%,transparent 72%);
      filter:blur(12px);opacity:.45;animation:stage-floor-pulse 1.2s ease-in-out infinite;
    }
    @keyframes stage-floor-pulse{50%{transform:translateX(-50%) scale(1.08);opacity:.58}}
    .stage-spotlights span{
      position:absolute;top:-28vh;width:28vw;height:128vh;opacity:.2;
      background:linear-gradient(180deg,rgba(255,238,203,.5),rgba(196,165,116,.14) 44%,transparent 76%);
      clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);filter:blur(10px);mix-blend-mode:screen;
      transform-origin:50% 0;animation:stage-spot var(--speed) ease-in-out infinite alternate;
    }
    .stage-spotlights span:nth-child(1){left:3%;--rot:22deg;--move:7vw;--speed:3.4s}
    .stage-spotlights span:nth-child(2){left:37%;--rot:0deg;--move:-4vw;--speed:4.2s}
    .stage-spotlights span:nth-child(3){right:3%;--rot:-22deg;--move:-7vw;--speed:3.8s}
    @keyframes stage-spot{from{transform:rotate(calc(var(--rot) - 8deg)) translateX(0)}to{transform:rotate(calc(var(--rot) + 8deg)) translateX(var(--move))}}
    .stage-smoke span{
      position:absolute;bottom:-16%;width:34vw;height:22vw;min-width:260px;min-height:170px;border-radius:50%;
      background:radial-gradient(ellipse,rgba(247,242,234,.16),rgba(196,165,116,.08) 42%,transparent 72%);
      filter:blur(28px);opacity:0;mix-blend-mode:screen;animation:stage-smoke var(--dur) ease-in-out infinite;
      left:var(--x);animation-delay:var(--delay);
    }
    @keyframes stage-smoke{
      0%{opacity:0;transform:translate3d(0,70px,0) scale(.72)}
      18%{opacity:.3}
      100%{opacity:0;transform:translate3d(var(--drift),-52vh,0) scale(1.85)}
    }
    .stage-fire{
      position:absolute;left:50%;bottom:-20px;width:min(720px,92vw);height:150px;transform:translateX(-50%);
      display:flex;align-items:flex-end;justify-content:center;gap:8px;filter:blur(.2px);opacity:.55;
      transition:transform .2s ease,filter .2s ease;
    }
    .music-experience.music-hit .stage-fire{transform:translateX(-50%) scale(1.08);filter:brightness(1.4) saturate(1.28)}
    .stage-fire span{
      width:34px;height:82px;border-radius:48% 52% 46% 54% / 62% 62% 38% 38%;
      background:radial-gradient(circle at 50% 70%,rgba(255,244,203,.95) 0 12%,rgba(232,181,92,.95) 27%,rgba(193,75,29,.55) 58%,transparent 74%);
      transform-origin:50% 100%;animation:stage-flame var(--dur) ease-in-out infinite;
      animation-delay:var(--delay);
    }
    @keyframes stage-flame{0%,100%{transform:scaleY(.65) skewX(-4deg);opacity:.5}45%{transform:scaleY(1.2) skewX(7deg);opacity:1}70%{transform:scaleY(.86) skewX(-9deg);opacity:.72}}
    .stage-stars span{
      position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;
      background:var(--music-accent-bright);box-shadow:0 0 14px rgba(232,213,181,.75),0 0 28px rgba(196,165,116,.3);
      opacity:0;animation:stage-star var(--dur) linear infinite;animation-delay:var(--delay);
    }
    .stage-stars span:nth-child(4n){height:2px;width:34px;border-radius:999px}
    .stage-stars span:nth-child(5n){background:rgba(255,169,87,.95);box-shadow:0 0 18px rgba(255,123,54,.62)}
    @keyframes stage-star{
      0%{opacity:0;transform:translate3d(0,0,0) rotate(0deg) scale(.5)}
      12%{opacity:.6}
      100%{opacity:0;transform:translate3d(var(--tx),var(--ty),0) rotate(260deg) scale(1.15)}
    }
    .stage-strobe{
      position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,rgba(255,244,218,.28),transparent 34%);
      opacity:0;
    }
    .music-experience.is-playing .stage-strobe{animation:stage-strobe 3.6s steps(1,end) infinite}
    .music-experience.music-hit .stage-strobe{animation:stage-hit-flash .45s ease-out}
    @keyframes stage-strobe{0%,8%,100%{opacity:0}4%{opacity:.12}}
    @keyframes stage-hit-flash{0%{opacity:.55}100%{opacity:0}}
    .stage-crowd{
      position:absolute;left:50%;bottom:-10px;width:min(920px,108vw);height:86px;transform:translateX(-50%);
      display:flex;align-items:flex-end;justify-content:center;gap:8px;opacity:.42;filter:drop-shadow(0 -10px 26px rgba(196,165,116,.14));
    }
    .stage-crowd span{
      width:16px;height:var(--h);border-radius:999px 999px 0 0;background:linear-gradient(180deg,rgba(247,242,234,.24),rgba(0,0,0,.8) 42%);
      transform-origin:50% 100%;animation:stage-crowd 1.1s ease-in-out infinite;animation-delay:var(--delay);
    }
    .stage-crowd span:nth-child(3n){width:10px}.stage-crowd span:nth-child(4n){width:22px}
    .music-experience.music-hit .stage-crowd span{animation-duration:.48s}
    @keyframes stage-crowd{50%{transform:translateY(-10px) scaleY(1.08);filter:brightness(1.55)}}
    .music-energy-field{
      opacity:0;transition:opacity .7s ease;
      background:
        radial-gradient(circle at 18% 22%,rgba(232,213,181,.18),transparent 24%),
        radial-gradient(circle at 78% 18%,rgba(196,165,116,.2),transparent 26%),
        radial-gradient(circle at 50% 76%,rgba(232,213,181,.16),transparent 31%);
    }
    .music-experience.is-playing .music-energy-field{opacity:.5;animation:music-breathe 2.8s ease-in-out infinite}
    @keyframes music-breathe{0%,100%{filter:saturate(1) brightness(1)}50%{filter:saturate(1.5) brightness(1.3)}}
    .music-beams{opacity:0;transition:opacity .7s ease}
    .music-energy-field{z-index:1}
    .music-beams{z-index:2}
    .music-sparks{z-index:14}
    .music-experience.is-playing .music-beams{opacity:1}
    .music-beams span{
      position:absolute;top:-18vh;width:1px;height:138vh;background:linear-gradient(180deg,transparent,rgba(232,213,181,.34),transparent);
      transform:translateX(-50%) rotate(var(--beam-rot));left:var(--beam-left);opacity:.3;
      filter:blur(.2px) drop-shadow(0 0 12px rgba(196,165,116,.32));animation:music-beam-sweep var(--beam-speed) linear infinite;
    }
    @keyframes music-beam-sweep{from{margin-left:-14vw}to{margin-left:14vw}}
    .music-lyric-stage{position:absolute;inset:0;pointer-events:none;overflow:hidden}
    .music-lyric-stage{z-index:12}
    .music-lyric{
      position:absolute;max-width:min(720px,78vw);padding:12px 4px;color:var(--paper);font-family:var(--font-display);font-size:clamp(31px,5vw,78px);
      line-height:1.02;letter-spacing:-.01em;text-wrap:balance;text-shadow:0 0 34px rgba(196,165,116,.28),0 20px 80px rgba(0,0,0,.82);
      opacity:0;transform:translate3d(0,28px,0) scale(.96);transition:opacity .88s var(--ease-out),transform 1.05s var(--ease-out);
    }
    .music-word{
      display:inline-block;opacity:0;transform:translate3d(0,24px,0) rotateX(58deg) scale(.82);
      animation:music-word-pop .72s var(--ease-out) forwards;animation-delay:var(--word-delay);
    }
    .music-word:nth-child(odd){transform:translate3d(0,-18px,0) rotateX(-42deg) scale(.86)}
    @keyframes music-word-pop{
      0%{opacity:0}
      58%{opacity:1;transform:translate3d(0,-7px,0) rotateX(0deg) scale(1.08)}
      100%{opacity:1;transform:translate3d(0,0,0) rotateX(0deg) scale(1)}
    }
    .music-lyric.is-visible{opacity:1;transform:translate3d(0,0,0) scale(1)}
    .music-lyric.is-exiting{opacity:0;transform:translate3d(0,-18px,0) scale(.98);transition-duration:.38s}
    .music-lyric::after{
      content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--music-accent),transparent);
      opacity:.42;transform:scaleX(.25);transition:transform 1.2s var(--ease-out);
    }
    .music-lyric.is-visible::after{transform:scaleX(1)}
    .music-pos-center{left:50%;top:48%;text-align:center;transform:translate3d(-50%,28px,0) scale(.96)}
    .music-pos-center.is-visible{transform:translate3d(-50%,0,0) scale(1)}
    .music-pos-left{left:clamp(24px,8vw,120px);top:43%;text-align:left}
    .music-pos-right{right:clamp(24px,8vw,120px);top:43%;text-align:right}
    .music-pos-top{left:50%;top:18%;text-align:center;transform:translate3d(-50%,-18px,0) scale(.96)}
    .music-pos-top.is-visible{transform:translate3d(-50%,0,0) scale(1)}
    .music-pos-lower{left:50%;bottom:17%;text-align:center;transform:translate3d(-50%,28px,0) scale(.96)}
    .music-pos-lower.is-visible{transform:translate3d(-50%,0,0) scale(1)}
    .music-anim-glow{color:var(--music-accent-bright);text-shadow:0 0 18px rgba(232,213,181,.55),0 0 58px rgba(196,165,116,.32),0 18px 70px rgba(0,0,0,.78)}
    .music-anim-slide{letter-spacing:.015em}
    .music-anim-scale.is-visible{transform:translate3d(0,0,0) scale(1.04)}
    .music-pos-center.music-anim-scale.is-visible,.music-pos-top.music-anim-scale.is-visible,.music-pos-lower.music-anim-scale.is-visible{transform:translate3d(-50%,0,0) scale(1.04)}
    .music-anim-blur{letter-spacing:.04em}
    .music-anim-floating.is-visible{animation:music-float 4.6s ease-in-out infinite}
    @keyframes music-float{0%,100%{margin-top:0}50%{margin-top:-12px}}
    .music-spark{
      position:absolute;left:var(--x);top:var(--y);width:7px;height:7px;border-radius:50%;opacity:0;
      background:radial-gradient(circle,var(--music-accent-bright),var(--music-accent) 55%,transparent 70%);
      box-shadow:0 0 18px rgba(232,213,181,.72);animation:music-spark var(--dur) var(--ease-out) forwards;
    }
    .music-spark:nth-child(3n){width:2px;height:34px;border-radius:999px}
    .music-spark:nth-child(4n){width:22px;height:2px;border-radius:999px}
    @keyframes music-spark{
      0%{opacity:0;transform:translate3d(0,0,0) rotate(0deg) scale(.4)}
      16%{opacity:.95}
      100%{opacity:0;transform:translate3d(var(--tx),var(--ty),0) rotate(var(--rot)) scale(1.15)}
    }
    .music-story-stage{z-index:5}
    .music-story{
      position:absolute;inset:0;opacity:0;transform:scale(.96);
      transition:opacity .55s var(--ease-out),transform .7s var(--ease-out);
    }
    .music-story.is-visible{opacity:.9;transform:scale(1)}
    .music-story.is-exiting{opacity:0;transform:scale(1.04);transition-duration:.32s}
    .music-story.no-story-text .story-chip,.music-story.no-story-text .story-solo-badge{display:none}
    .story-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center}
    .story-chip{
      border:1px solid rgba(232,213,181,.34);border-radius:999px;padding:12px 22px;color:var(--music-accent-bright);
      background:rgba(9,8,7,.34);box-shadow:0 0 36px rgba(196,165,116,.2);font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
    }
    .story-link{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:min(360px,62vw);height:54px;border-radius:999px;border:1px solid rgba(232,213,181,.44);background:rgba(247,242,234,.08);box-shadow:0 0 46px rgba(196,165,116,.22)}
    .story-link::before{content:'tprom.team/start';position:absolute;left:24px;top:50%;transform:translateY(-50%);font-size:12px;letter-spacing:.12em;color:var(--paper-2)}
    .story-cursor{position:absolute;left:58%;top:52%;width:0;height:0;border-left:17px solid var(--paper);border-top:11px solid transparent;border-bottom:11px solid transparent;filter:drop-shadow(0 0 18px rgba(232,213,181,.6));animation:story-click 1.25s ease infinite}
    @keyframes story-click{0%,100%{transform:translate(12px,8px) scale(1)}45%{transform:translate(0,0) scale(.92)}55%{transform:translate(0,0) scale(.72)}}
    .story-door{position:absolute;left:50%;top:49%;width:150px;height:230px;transform:translate(-50%,-50%);border:1px solid rgba(232,213,181,.5);background:linear-gradient(90deg,rgba(196,165,116,.08),rgba(247,242,234,.05));box-shadow:0 0 70px rgba(196,165,116,.22);transform-origin:left center;animation:story-door 1.8s var(--ease-out) infinite}
    .story-door::after{content:'';position:absolute;right:18px;top:50%;width:7px;height:7px;border-radius:50%;background:var(--music-accent-bright);box-shadow:0 0 14px var(--music-accent)}
    @keyframes story-door{0%,100%{transform:translate(-50%,-50%) perspective(500px) rotateY(0deg)}48%{transform:translate(-50%,-50%) perspective(500px) rotateY(-34deg)}}
    .story-orbit{position:absolute;left:50%;top:50%;width:240px;height:240px;border:1px solid rgba(232,213,181,.28);border-radius:50%;transform:translate(-50%,-50%);animation:story-spin 8s linear infinite}
    .story-orbit::before,.story-orbit::after{content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:var(--music-accent-bright);box-shadow:0 0 26px var(--music-accent)}
    .story-orbit::before{left:16px;top:28px}.story-orbit::after{right:24px;bottom:18px}
    @keyframes story-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
    .story-canvas{position:absolute;left:50%;top:50%;width:min(420px,70vw);height:230px;transform:translate(-50%,-50%);border:1px solid rgba(232,213,181,.35);background:linear-gradient(135deg,rgba(247,242,234,.08),rgba(196,165,116,.03));box-shadow:0 0 70px rgba(196,165,116,.16)}
    .story-canvas::before{content:'';position:absolute;left:32px;top:112px;width:0;height:2px;background:var(--music-accent-bright);box-shadow:0 0 20px var(--music-accent);animation:story-draw 1.8s ease infinite}
    @keyframes story-draw{0%{width:0;transform:rotate(-8deg)}60%,100%{width:78%;transform:rotate(-8deg)}}
    .story-grid-dots{position:absolute;inset:18%;background-image:radial-gradient(rgba(232,213,181,.45) 2px,transparent 3px);background-size:34px 34px;animation:story-rise 2.6s ease-in-out infinite}
    @keyframes story-rise{0%,100%{transform:translateY(12px);opacity:.38}50%{transform:translateY(-10px);opacity:.9}}
    .story-wave{position:absolute;left:50%;top:50%;width:min(520px,76vw);height:120px;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;gap:9px}
    .story-wave span{width:5px;height:24px;border-radius:999px;background:var(--music-accent-bright);box-shadow:0 0 18px var(--music-accent);animation:story-wave 1s ease-in-out infinite;animation-delay:calc(var(--i) * 80ms)}
    @keyframes story-wave{0%,100%{height:18px;opacity:.35}50%{height:92px;opacity:1}}
    .story-window{position:absolute;width:120px;height:88px;border:1px solid rgba(232,213,181,.42);background:rgba(247,242,234,.06);box-shadow:0 0 34px rgba(196,165,116,.18);animation:story-window 2.2s ease-in-out infinite}
    .story-window:nth-child(1){left:18%;top:26%}.story-window:nth-child(2){right:20%;top:34%;animation-delay:.2s}.story-window:nth-child(3){left:43%;bottom:20%;animation-delay:.4s}
    .story-window::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(232,213,181,.35)}.story-window::after{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(232,213,181,.35)}
    @keyframes story-window{0%,100%{transform:scale(.94);opacity:.45}50%{transform:scale(1.08);opacity:1}}
    .story-code{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(460px,72vw);padding:24px;border:1px solid rgba(232,213,181,.3);background:rgba(9,8,7,.42);box-shadow:0 0 58px rgba(196,165,116,.18)}
    .story-code span{display:block;height:8px;border-radius:999px;margin:12px 0;background:linear-gradient(90deg,var(--music-accent-bright),transparent);animation:story-code 1.4s ease infinite;animation-delay:calc(var(--i) * 110ms)}
    @keyframes story-code{0%{width:12%;opacity:.3}70%,100%{width:var(--w);opacity:1}}
    .story-border{position:absolute;left:50%;top:50%;width:min(560px,78vw);height:2px;background:linear-gradient(90deg,transparent,var(--music-accent-bright),transparent);transform:translate(-50%,-50%);box-shadow:0 0 28px var(--music-accent)}
    .story-border::before,.story-border::after{content:'';position:absolute;top:-36px;width:76px;height:76px;border-radius:50%;border:1px solid rgba(232,213,181,.38);animation:story-cross 2s ease infinite}
    .story-border::before{left:8%}.story-border::after{right:8%;animation-delay:.35s}
    @keyframes story-cross{50%{transform:translateX(90px) scale(1.08)}}
    .story-steps{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);display:flex;align-items:flex-end;gap:14px}
    .story-steps span{width:70px;background:linear-gradient(180deg,var(--music-accent-bright),rgba(196,165,116,.18));box-shadow:0 0 24px rgba(196,165,116,.3);animation:story-step 1.2s ease-in-out infinite;animation-delay:calc(var(--i) * 120ms)}
    .story-steps span:nth-child(1){height:40px}.story-steps span:nth-child(2){height:76px}.story-steps span:nth-child(3){height:116px}
    @keyframes story-step{50%{transform:translateY(-18px);filter:brightness(1.35)}}
    .story-heart{position:absolute;left:50%;top:50%;width:170px;height:150px;transform:translate(-50%,-50%) rotate(-45deg);background:rgba(196,165,116,.22);box-shadow:0 0 64px rgba(196,165,116,.3);animation:story-heart 1.1s ease-in-out infinite}
    .story-heart::before,.story-heart::after{content:'';position:absolute;width:170px;height:170px;border-radius:50%;background:inherit}.story-heart::before{top:-85px;left:0}.story-heart::after{left:85px;top:0}
    @keyframes story-heart{50%{transform:translate(-50%,-50%) rotate(-45deg) scale(1.12)}}
    .story-world{position:absolute;left:50%;top:50%;width:250px;height:250px;border-radius:50%;transform:translate(-50%,-50%);border:1px solid rgba(232,213,181,.45);box-shadow:inset 0 0 50px rgba(196,165,116,.18),0 0 70px rgba(196,165,116,.16);animation:story-spin 9s linear infinite}
    .story-world::before,.story-world::after{content:'';position:absolute;inset:38px;border-radius:50%;border:1px solid rgba(232,213,181,.22)}.story-world::after{inset:0;border-left-color:transparent;border-right-color:transparent}
    .story-impact{position:absolute;left:50%;top:50%;width:44px;height:44px;border-radius:50%;transform:translate(-50%,-50%);background:var(--music-accent-bright);box-shadow:0 0 28px var(--music-accent);animation:story-impact 1.7s ease-out infinite}
    @keyframes story-impact{0%{box-shadow:0 0 0 0 rgba(232,213,181,.45),0 0 0 0 rgba(196,165,116,.24)}100%{box-shadow:0 0 0 110px rgba(232,213,181,0),0 0 0 220px rgba(196,165,116,0)}}
    .story-solo-badge{
      position:absolute;left:50%;top:24%;transform:translateX(-50%);z-index:2;padding:10px 18px;border-radius:999px;
      border:1px solid rgba(232,213,181,.46);background:rgba(9,8,7,.48);color:var(--music-accent-bright);
      font-size:10px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;box-shadow:0 0 36px rgba(196,165,116,.26);
      animation:story-pop 1s ease-in-out infinite;
    }
    .story-guitar{
      position:absolute;left:50%;top:52%;width:min(560px,82vw);height:240px;transform:translate(-50%,-50%) rotate(-8deg);
      filter:drop-shadow(0 0 46px rgba(232,181,92,.44));animation:story-guitar-jam .9s ease-in-out infinite;
    }
    .story-guitar::before{
      content:'';position:absolute;left:28px;top:62px;width:230px;height:125px;
      clip-path:polygon(0 48%,17% 18%,38% 32%,54% 8%,78% 22%,100% 50%,78% 79%,54% 92%,38% 68%,17% 82%);
      background:
        radial-gradient(circle at 57% 50%,rgba(8,7,6,.96) 0 10%,rgba(232,213,181,.85) 11% 14%,transparent 15%),
        linear-gradient(135deg,rgba(255,236,188,.88),rgba(196,165,116,.34) 45%,rgba(9,8,7,.84));
      border:1px solid rgba(232,213,181,.5);box-shadow:inset 0 0 44px rgba(0,0,0,.58),0 0 58px rgba(196,165,116,.34);
    }
    .story-guitar::after{
      content:'';position:absolute;left:225px;top:109px;width:280px;height:18px;border-radius:4px;
      background:
        repeating-linear-gradient(90deg,transparent 0 22px,rgba(9,8,7,.55) 22px 24px),
        linear-gradient(90deg,rgba(232,213,181,.98),rgba(196,165,116,.28));
      box-shadow:0 0 22px rgba(232,213,181,.5);
    }
    .story-guitar .story-headstock{
      position:absolute;left:492px;top:90px;width:70px;height:56px;
      clip-path:polygon(0 24%,76% 0,100% 20%,78% 50%,100% 80%,75% 100%,0 76%);
      background:linear-gradient(135deg,rgba(232,213,181,.95),rgba(196,165,116,.24));box-shadow:0 0 22px rgba(232,213,181,.35);
    }
    .story-guitar .story-pickup{
      position:absolute;top:103px;width:42px;height:12px;border-radius:3px;background:rgba(9,8,7,.72);border:1px solid rgba(232,213,181,.42);
      box-shadow:0 0 14px rgba(232,213,181,.25);
    }
    .story-guitar .story-pickup.one{left:126px}.story-guitar .story-pickup.two{left:175px}
    .story-string{position:absolute;left:96px;width:430px;height:1px;background:rgba(247,242,234,.9);box-shadow:0 0 14px rgba(232,213,181,.75);animation:story-string 130ms linear infinite}
    .story-string:nth-child(1){top:104px}.story-string:nth-child(2){top:110px;animation-delay:25ms}.story-string:nth-child(3){top:116px;animation-delay:50ms}.story-string:nth-child(4){top:122px;animation-delay:75ms}
    @keyframes story-guitar-jam{50%{transform:translate(-50%,-50%) rotate(-3deg) scale(1.06)}}
    @keyframes story-string{50%{transform:translateY(3px);opacity:.38}}
    .story-beat-rings{position:absolute;left:50%;top:52%;width:60px;height:60px;border-radius:50%;transform:translate(-50%,-50%);background:var(--music-accent-bright);box-shadow:0 0 34px rgba(232,213,181,.8);animation:story-beat-core .62s ease-in-out infinite}
    .story-beat-rings::before,.story-beat-rings::after{content:'';position:absolute;inset:-18px;border-radius:50%;border:2px solid rgba(232,213,181,.38);animation:story-beat-ring 1s ease-out infinite}.story-beat-rings::after{animation-delay:.3s}
    @keyframes story-beat-core{50%{transform:translate(-50%,-50%) scale(.68);filter:brightness(1.6)}}
    @keyframes story-beat-ring{100%{inset:-150px;opacity:0}}
    .story-fireworks span{
      position:absolute;left:50%;top:48%;width:8px;height:8px;border-radius:50%;background:var(--music-accent-bright);
      box-shadow:0 0 18px rgba(232,213,181,.78);animation:story-firework 1.1s ease-out infinite;animation-delay:calc(var(--i) * 55ms);
    }
    @keyframes story-firework{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}12%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1)}}
    .music-finale-wink{
      position:absolute;left:50%;top:44%;z-index:26;transform:translate(-50%,-50%) scale(.7);opacity:0;pointer-events:none;
      width:min(250px,56vw);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);
      font-size:clamp(72px,14vw,150px);color:#090807;background:radial-gradient(circle at 36% 24%,#fff7df,#e8d5b5 45%,#c4a574 74%);
      box-shadow:0 0 80px rgba(232,213,181,.5),0 24px 120px rgba(0,0,0,.55),inset 0 8px 18px rgba(255,255,255,.4);
      animation:finale-wink-in 4.8s var(--ease-out) forwards;
    }
    .music-finale-wink::before{content:';)'}
    .music-finale-wink::after{content:'Thank you';position:absolute;bottom:-34px;left:50%;transform:translateX(-50%);font-family:var(--font-body);font-size:10px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--music-accent-bright);white-space:nowrap;text-shadow:0 0 24px rgba(196,165,116,.55)}
    @keyframes finale-wink-in{0%{opacity:0;transform:translate(-50%,-50%) scale(.35) rotate(-12deg)}18%,78%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-52%) scale(.88)}}
    .music-story[data-scene="ready"] .story-chip,.music-story[data-scene="team"] .story-chip,.music-story[data-scene="space"] .story-chip,.music-story[data-scene="work"] .story-chip{animation:story-pop 1s ease-in-out infinite}
    @keyframes story-pop{50%{transform:scale(1.08);box-shadow:0 0 58px rgba(196,165,116,.34)}}
.music-section-hit{animation:music-section-hit 1.05s ease}
@keyframes music-section-hit{
  0%{box-shadow:0 0 0 rgba(196,165,116,0);filter:none}
  38%{box-shadow:0 0 88px rgba(196,165,116,.2);filter:saturate(1.22) brightness(1.08)}
  100%{box-shadow:0 0 0 rgba(196,165,116,0);filter:none}
}
.music-experience.lyrics-hidden .music-lyric-stage{display:none}

/* ── MOBILE: aggressive simplifications ── */
@media(max-width:768px){
  .music-panel{right:12px;top:clamp(72px,8vw,82px);width:min(340px,calc(100vw - 24px))}
}

@media(max-width:640px){
  /* 1. Keep the music film visible on mobile, but make the effects cheap. */
  .music-experience.is-playing .music-stage-fx{opacity:.48;transition:none}
  .music-stage-fx{transition:none}
  .music-experience.is-playing .music-energy-field{opacity:.22;animation:none}
  .music-experience.is-playing .music-beams{opacity:.42}
  .music-beams span{opacity:.16;filter:none}
  .music-sparks{opacity:.5}
  .music-story-stage{opacity:.62}
  .music-lyric-stage{z-index:12}
  .stage-strobe{display:none!important}
  .stage-floor-shadow{opacity:.22;filter:none;animation:none}
  .stage-vignette{opacity:.55}
  .stage-smoke span{filter:blur(18px)}
  .stage-stars span{box-shadow:0 0 10px rgba(232,213,181,.5)}
  .stage-crowd{opacity:.2;filter:none}

  /* 2. Simpler spotlights (no mix-blend-mode flicker) */
  .stage-spotlights span{opacity:.12;filter:blur(12px);width:40vw;mix-blend-mode:normal}
  .stage-spotlights span:nth-child(2){display:none}
  .stage-fire{height:60px;opacity:.35;gap:4px;bottom:-8px}
  .stage-fire span{width:16px;height:38px}

  /* 3. Orb – clean, no decorative pseudo-elements */
  .music-orb{width:58px;height:58px;right:12px;bottom:12px;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom))}
  .music-orb-label{display:none}
  .music-orb::before,.music-orb::after{display:none}
  .music-orb-icon{width:24px;height:24px}
  .music-orb-icon::before{left:8px;top:4px;border-left-width:11px;border-top-width:8px;border-bottom-width:8px}
  .music-experience.is-playing .music-orb-icon::before{left:5px;top:4px;width:5px;height:16px;border-left-width:5px;border-right-width:5px}

  /* 4. Panel – full-width, no backdrop-filter flicker */
  .music-panel{left:8px;right:auto;top:62px;width:calc(100vw - 16px);max-width:calc(100vw - 16px);padding:5px;border-radius:12px;overflow:hidden}
  .music-panel{backdrop-filter:none;background:rgba(18,16,13,.92)}
  .music-panel.is-open .music-panel-body{max-height:140px}
  .music-panel-body-inner{padding:0 5px 5px}
  .music-kicker{display:none}
  .music-mini-viz{width:28px;height:28px}
  .music-mini-viz::before,.music-mini-viz::after{display:none}
  .music-title{font-size:12px}
  .music-time{font-size:9px}
  .music-controls{direction:ltr;justify-content:flex-start;gap:4px}
  .music-control{direction:rtl;min-height:30px;padding:0 8px;font-size:8px}

  /* 5. Lyrics – simpler, no perspective transforms */
  .music-lyric{max-width:90vw;font-size:clamp(20px,9vw,30px);padding:6px 4px}
  .music-word{transform:none;animation:music-word-pop-mobile .6s var(--ease-out) forwards;animation-delay:var(--word-delay)}
  .music-word:nth-child(odd){transform:none}
  .music-pos-left,.music-pos-right{left:5vw;right:5vw;top:34%;text-align:center}
  .music-pos-top{top:14%}
  .music-pos-lower{bottom:28%}
  @keyframes music-word-pop-mobile{0%{opacity:0;transform:translateY(8px)}60%{opacity:1;transform:translateY(-3px)}100%{opacity:1;transform:none}}

  /* 6. Minimize section-hit animation cost */
  .music-section-hit{animation-duration:.5s}

  /* 7. Finale wink – smaller */
  .music-finale-wink{width:140px;font-size:clamp(40px,10vw,60px)}
  .music-finale-wink::after{font-size:7px;bottom:-22px}
}

@media(pointer:coarse) and (min-width:700px){
  .music-orb{width:96px;height:96px;right:48px;bottom:48px}
  .music-orb-label{bottom:110px;font-size:12px}
  .music-panel{right:48px;top:118px;width:min(420px,calc(100vw - 96px))}
  .music-control{min-height:38px;padding:0 16px;font-size:11px}
}

/* 8. Ultra-small screens */
@media(max-width:380px){
  .music-lyric{font-size:clamp(17px,7vw,24px);max-width:92vw}
  .music-panel{left:4px;right:auto;top:52px;width:calc(100vw - 8px);max-width:calc(100vw - 8px);padding:4px}
  .music-panel.is-open .music-panel-body{max-height:120px}
  .music-mini-viz{width:24px;height:24px}
  .music-orb{width:46px;height:46px;right:8px;bottom:8px}
  .stage-fire{height:44px}
  .stage-fire span{width:12px;height:28px}
  .stage-spotlights span{width:50vw;opacity:.08}
}

@media(prefers-reduced-motion:reduce){
  .music-energy-field,.music-beams,.music-sparks,.music-stage-fx{display:none}
  .music-word{opacity:1;transform:none;animation:none}
  .music-section-hit{animation:none}
}