#music-intro{position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:#080909;color:#f5f0df;overflow:auto;--music-tone:#e74b40}
#music-intro::backdrop{background:#080909}#music-intro[open]{animation:music-dark-in .16s both}
.music-layout{min-height:100%;max-width:1050px;margin:auto;display:flex;flex-direction:column;justify-content:center;padding:90px 7%;position:relative;isolation:isolate}
.music-layout::before{content:'';position:absolute;inset:18% 0 15% 0;background:linear-gradient(115deg,color-mix(in srgb,var(--music-tone) 20%,transparent),transparent 70%);z-index:-1;transform:skewY(-4deg)}
.music-skip{position:fixed;top:max(22px,env(safe-area-inset-top));right:6%;z-index:3;font-size:12px;background:#101010}
.music-kicker{font:11px monospace;letter-spacing:3px;color:#e9debf}.music-kicker span{display:block;font-size:9px;letter-spacing:2px;opacity:.6;margin-top:12px}
.music-type{font:900 clamp(32px,6.7vw,78px)/1.04 Arial,sans-serif;letter-spacing:-.045em;margin:25px 0 24px;max-width:850px;text-wrap:balance}
.music-word{display:inline-block;white-space:nowrap}.music-char{display:inline-block;animation:music-letter .13s both;animation-delay:var(--beat)}
.music-translation{font-size:clamp(15px,2.4vw,21px);letter-spacing:.03em;line-height:1.8;animation:music-translation .3s 1.65s both;max-width:650px;margin:0 0 30px}
.music-track{display:flex;flex-direction:column;gap:5px;border-top:1px solid #656458;padding-top:18px;animation:music-translation .3s 2s both}.music-track small{color:#b8b5a8}.music-track strong{font-size:22px}.music-track a{width:fit-content;border-bottom:1px solid #b6b3a5;padding:10px 0;font-size:13px}
.music-sample{margin-top:25px;font-size:9px;color:#8b8b80;animation:music-translation .3s 2s both}
.music-pulse{position:fixed;inset:0;background:var(--music-tone);pointer-events:none;opacity:0;animation:music-pulse .13s var(--music-last,1.5s) both}
@keyframes music-dark-in{from{opacity:0}to{opacity:1}}
@keyframes music-letter{from{opacity:0;transform:translateY(12px) rotate(-5deg)}to{opacity:1;transform:none}}
@keyframes music-translation{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes music-pulse{0%,100%{opacity:0}35%{opacity:.13}}
.music-message-static{border-top:1px solid #56564a;margin-top:24px;padding-top:20px}.music-message-static h3{font-size:24px;line-height:1.15;letter-spacing:-.6px;margin:12px 0}.music-message-static p{margin:10px 0}.music-message-static small{font-size:10px}
@media(max-width:650px){.music-layout{padding:90px 7% 50px}.music-type{font-size:clamp(28px,9.5vw,40px)}.music-track strong{font-size:20px}}
@media(prefers-reduced-motion:reduce){#music-intro,#music-intro *{animation:none!important}.music-pulse{display:none}}
.motion-off #music-intro,.motion-off #music-intro *{animation:none!important}.motion-off .music-pulse{display:none}
/* A single motion system consumes the acquired master color. */
.music-type{animation:music-ink-flash .16s var(--music-last,1.5s) both;color:#f5f0df}
@keyframes music-ink-flash{0%,100%{text-shadow:none}45%{text-shadow:0 0 8px var(--music-tone),0 0 24px var(--music-tone)}}
.music-petals{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.music-petals i{position:absolute;top:16%;left:var(--petal-x);width:6px;height:12px;border-radius:80% 0 80% 0;background:var(--music-tone);opacity:0;animation:music-petal-drift 1.8s var(--petal-delay) ease-out both}
@keyframes music-petal-drift{0%{opacity:0;transform:translate3d(0,-15px,0) rotate(0)}20%{opacity:.5}100%{opacity:0;transform:translate3d(var(--petal-drift),58vh,0) rotate(var(--petal-turn))}}
@media(max-width:650px){.music-petals i:nth-child(n+4){display:none}}
@media(prefers-reduced-motion:reduce){.music-petals{display:none}}
.motion-off .music-petals{display:none}
