/* A self-contained first-visit overture. No layout changes to the music library. */
.welcome{position:fixed;inset:0;max-width:none;max-height:none;width:100%;height:100%;height:100dvh;margin:0;padding:0;border:0;overflow:hidden;color:#f0eadc;background:#091e1b;isolation:isolate;opacity:1;transition:opacity .65s ease,filter .65s ease}
.welcome::backdrop{background:#091e1b}
.welcome:before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 46%,#3b68502b,transparent 61%),radial-gradient(ellipse at 12% 90%,#274d451f,transparent 50%);z-index:1}
.welcome:after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 150px 55px #0414117a;z-index:2}
.welcome-field{display:block;position:absolute;inset:0;width:100%;height:100%;opacity:.9;pointer-events:none}
.welcome-top{position:absolute;z-index:4;top:max(23px,env(safe-area-inset-top));left:clamp(20px,4vw,60px);right:clamp(20px,4vw,60px);display:flex;align-items:center;justify-content:space-between;gap:18px}
.welcome-name{font:10px/1.5 Arial,Helvetica,sans-serif;letter-spacing:.23em;text-transform:uppercase;color:#b7c5b5}
.welcome-name:focus{outline:none}
.welcome-controls{display:flex;align-items:center;gap:12px}
.welcome button{border:0;color:inherit;min-height:44px;font:12px/1.2 Arial,Helvetica,sans-serif}
.welcome .welcome-skip,.welcome .welcome-mute{background:none;padding:10px 6px;color:#bacbbe}
.welcome-skip span{font-size:18px;margin-left:9px;color:#cdb988;vertical-align:-1px}
.welcome button:focus-visible{outline:2px solid #e3c690;outline-offset:5px}
.welcome button:hover{color:#fff5df}
.welcome .welcome-mute{font-size:11px;color:#cdb988;min-width:44px;display:grid;place-items:center}
.welcome-mute svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.welcome-center{position:absolute;z-index:3;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:90px 28px 100px;pointer-events:none}
.welcome-lettering{display:block;width:min(620px,76vw);height:auto;overflow:visible;transform:rotate(-7deg);filter:drop-shadow(0 0 12px #acdbc52b);transition:transform 1.6s ease,filter 1.6s ease}
.welcome-lettering path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.welcome-ghost{stroke:#abc4ac;stroke-width:1;opacity:.16}
.welcome-ink{stroke:url(#welcome-ink-color);stroke-width:2.7;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--ink,1));opacity:.98}
.welcome-halo{stroke:#ceedd6;stroke-width:6;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--ink,1));filter:blur(7px);opacity:.25}
.welcome[data-state=playing] .welcome-lettering{transform:rotate(-7deg) scale(1.03);filter:drop-shadow(0 0 18px #c5dec64a)}
.welcome-bottom{position:absolute;z-index:4;bottom:calc(32px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:16px;width:min(240px,60vw);opacity:0;transition:opacity .5s}
.welcome[data-state=playing] .welcome-bottom{opacity:1}
.welcome-timeline{height:1px;background:#adc6ae2b;flex:1;overflow:hidden}
.welcome-timeline span{display:block;width:100%;height:100%;background:#d5bf8d;transform:scaleX(var(--progress,0));transform-origin:left center;box-shadow:0 0 7px #d8c59480}
.welcome-time{font:10px/1 Arial,Helvetica,sans-serif;color:#9eb7a5;font-variant-numeric:tabular-nums;min-width:24px}
.welcome[data-state=leaving]{opacity:0;filter:blur(7px);pointer-events:none}
.welcome[data-state=leaving]::backdrop{background:transparent}
@media(max-width:600px){.welcome-name{font-size:8px;letter-spacing:.15em}.welcome-top{left:22px;right:18px;top:max(15px,env(safe-area-inset-top))}.welcome-controls{gap:8px}.welcome-lettering{width:90vw}.welcome-center{padding:85px 15px 75px}.welcome:after{box-shadow:inset 0 0 90px 20px #04141170}.welcome-bottom{bottom:calc(28px + env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.welcome,.welcome *{transition:none!important;animation:none!important}.welcome-lettering,.welcome[data-state=playing] .welcome-lettering{transform:none;filter:none}.welcome-halo{display:none}.welcome-ink{stroke-dashoffset:0!important}.welcome[data-state=leaving]{filter:none}}