/* Component styles for the named launch control and each page's opening scene. */
.music-volume{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;margin:16px 0 6px}
.music-volume>input{grid-column:1/-1;width:100%;min-height:44px;padding:0;accent-color:#d2b1ff;background:transparent;border:0}
.music-volume>output{font-variant-numeric:tabular-nums;color:#ecd6ff}
.music-track-status{min-height:2.5em;overflow-wrap:break-word}
#music-retry-wrap[hidden]{display:none}
.settings-grid .toggle{min-width:56px;min-height:44px}
.welcome-studio.home-hero-refined{grid-template-columns:minmax(0,1fr);min-height:0}
.home-hero-refined .welcome-copy{max-width:720px;min-width:0}
.home-hero-refined .welcome-copy>p{max-width:62ch}
.home-hero-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:560px;align-items:stretch}
.home-hero-actions>.button{min-width:0;width:100%;margin:0}
.home-hero-actions>.hero-quick-selected{grid-column:1/-1;display:flex;flex-direction:column;gap:4px;min-height:76px;isolation:isolate;position:relative;overflow:hidden}
.welcome-copy .button.primary.hero-quick-selected,.welcome-copy .button.primary.hero-quick-selected:hover:not(:disabled){border:2px solid transparent;background:linear-gradient(115deg,#352045,#292b4a) padding-box,linear-gradient(110deg,#f6e7ff,#9be4ff,#e9b0ff,#ffd8f0,#b8ecff,#f6e7ff) border-box;background-size:100% 100%,240% 240%;color:#fff4ff;box-shadow:0 0 0 1px #f7dcff33,0 0 22px #c89bff55,0 4px 0 #24132e;animation:hero-foil-edge 7s ease-in-out infinite}
.hero-quick-selected>span{font-size:16px;font-weight:800;line-height:1.35}
.hero-quick-selected>small{display:block;margin:0;color:#e1d1f0;font-size:13px;font-weight:500;line-height:1.45;overflow-wrap:anywhere;max-width:100%}
.hero-quick-selected:focus-visible{outline:3px solid #bcecff;outline-offset:4px}
.introduction-launch{display:flex;align-items:center;justify-content:center;gap:8px;text-align:left;padding:8px 12px}
.introduction-launch>img{flex:0 0 44px;width:44px;height:44px;object-fit:contain;pointer-events:none}
.introduction-launch>span{min-width:0;overflow-wrap:break-word;line-height:1.4}
@keyframes hero-foil-edge{0%,100%{background-position:0 0,0% 50%}50%{background-position:0 0,100% 50%}}
.identity-heading{--identity-accent:#d6b5fa;--identity-line:#b38ed177}
.identity-workshop{--identity-accent:#f7c689;--identity-line:#c6985e77}
.identity-archive{--identity-accent:#aee5e7;--identity-line:#87bfc977}
.identity-settings{--identity-accent:#e7b8db;--identity-line:#bd90b777}
.identity-intro{display:grid;grid-template-columns:minmax(0,1fr) 104px;align-items:center;gap:16px}
.identity-intro>div{min-width:0}
.identity-intro .eyebrow{color:var(--identity-accent);font-size:10px;letter-spacing:.14em;line-height:1.5}
.identity-intro h1{font-size:clamp(27px,3.5vw,42px);line-height:1.13;margin:10px 0 12px;overflow-wrap:break-word}
.identity-intro p{max-width:58ch;margin:0;font-size:14px;line-height:1.6;color:#e3d5ed}
.identity-art{display:grid;place-items:center;width:104px;aspect-ratio:1;border-radius:24px;border:1px solid var(--identity-line);background:radial-gradient(ellipse at 30% 20%,#d8b0ff22,transparent 70%),#23182e77;transform:rotate(4deg);box-shadow:0 8px 24px #0b071c44}
.identity-art>img{display:block;width:100%;height:100%;object-fit:contain;transform:rotate(-4deg)}
.identity-glyph{font-size:65px;color:var(--identity-accent);line-height:1}
.identity-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:22px}
.identity-workshop .identity-stats,.identity-settings .identity-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.identity-stat{display:flex;gap:10px;align-items:center;min-width:0;padding:13px 12px;border:1px solid var(--identity-line);border-radius:12px;background:linear-gradient(135deg,#422951dd,#20172de8);box-shadow:inset 0 1px #fff1}
.identity-stat-icon{font-size:22px;color:var(--identity-accent);flex:0 0 auto}
.identity-stat>div{min-width:0}
.identity-stat strong{display:block;font-size:clamp(19px,2.5vw,29px);line-height:1.15;color:#fff2ff;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.identity-stat div>span{display:block;font-size:11px;line-height:1.4;color:#d3bfdc;margin-top:6px;overflow-wrap:break-word}
.identity-progress{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 12px;margin-top:16px;color:#d7c3e5;font-size:11px}
.identity-progress>b{color:#f2dcff;font-size:11px;font-variant-numeric:tabular-nums;text-align:right;overflow-wrap:anywhere}
.identity-progress>progress{grid-column:1/-1;width:100%;height:7px;accent-color:#dab4ff;margin:0}
.identity-footnote{padding-top:12px;margin:12px 0 0;border-top:1px solid var(--identity-line);font-size:12px;line-height:1.5;color:#e8d6e9;overflow-wrap:anywhere}
.identity-workshop .identity-stat{background:linear-gradient(125deg,#4b3443df,#25182fe8)}
.identity-archive .identity-stat{background:linear-gradient(125deg,#293b51df,#20182fe8)}
.identity-settings .identity-stat{background:linear-gradient(125deg,#493148df,#24192ee8)}
.support-hero.identity-support{border-color:#c79ae477;box-shadow:inset 0 0 0 1px #eed5ff11,0 10px 30px #0d071b22}
.support-hero.identity-support>div{min-width:0}
.support-hero.identity-support h1{max-width:17ch;line-height:1.12}
.support-hero.identity-support>img{border-radius:24px;background:radial-gradient(ellipse,#d9b1ff22,transparent 70%)}
.tutorial-header.identity-tutorial{border:1px solid #b79ade88;border-radius:18px;padding:20px;background:radial-gradient(ellipse at top right,#75529555,transparent 65%),#251c36}
.identity-tutorial .eyebrow{color:#e5c6ff}
.identity-tutorial h1{font-size:clamp(25px,4vw,38px);line-height:1.2;overflow-wrap:break-word}
.identity-tutorial>progress{accent-color:#c8b2fa;width:100%}
.hidden-tab .hero-quick-selected{animation-play-state:paused!important}
[data-motion=reduced] .hero-quick-selected{animation:none!important}
@media(prefers-reduced-motion:reduce){.welcome-copy .button.primary.hero-quick-selected{animation:none}}
@media(max-width:560px){
 .home-hero-actions{gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
 .home-hero-actions>.hero-quick-selected{min-height:76px;padding:12px}
 .introduction-launch{gap:5px;padding:8px;font-size:12px}
 .introduction-launch>img{flex-basis:34px;width:34px;height:40px}
 .identity-intro{grid-template-columns:minmax(0,1fr) 64px;gap:10px}
 .identity-art{width:64px;border-radius:15px}
 .identity-glyph{font-size:42px}
 .identity-intro h1{font-size:clamp(24px,7vw,32px);margin:8px 0 10px}
 .identity-intro .eyebrow{font-size:9px;letter-spacing:.1em}
 .identity-intro p{font-size:13px}
 .identity-stats{gap:6px;margin-top:16px}
 .identity-stat{display:block;padding:11px 8px}
 .identity-stat-icon{display:block;font-size:18px;line-height:1;margin-bottom:8px}
 .identity-stat strong{font-size:clamp(18px,5.5vw,25px)}
 .identity-stat div>span{font-size:10px;line-height:1.45}
 .identity-progress{grid-template-columns:minmax(0,1fr);gap:5px}
 .identity-progress>b{text-align:left}
 .identity-progress>progress{margin-top:4px}
 .tutorial-header.identity-tutorial{padding:16px}
}
@media(max-width:350px){.home-hero-actions{grid-template-columns:minmax(0,1fr)}.introduction-launch{font-size:13px}.identity-intro{grid-template-columns:minmax(0,1fr) 52px}.identity-art{width:52px}.identity-stat{padding:10px 6px}}