/* Creation studio: readable controls and a spatial, luminous listening world. */
body[data-page=create]{--studio-violet:#ad57ff;--studio-cyan:#62dcff;--studio-border:#b79bdc38}
body[data-page=create]:not(.entrance-active){background:#070910}
body[data-page=create] .environment{background:linear-gradient(90deg,#080a13fa 0%,#080a13e8 42%,#0b0d18a0 68%,#080a1380),url('assets/world.png') 70% 15%/cover no-repeat}
body[data-page=create] .environment:after{background:radial-gradient(ellipse at 77% 32%,#653aaa22,transparent 55%),linear-gradient(0deg,#080a13 0%,transparent 65%)}
body[data-page=create] #main{padding:25px 3vw calc(var(--player-height) + 45px);max-width:none}
body[data-page=create] .create-layout{display:grid;grid-template-columns:minmax(480px,1.08fr) minmax(360px,.92fr);gap:3.5vw;max-width:1600px;margin:auto;align-items:start}
body[data-page=create] .composer-section{min-width:0;padding:0}
.studio-topline{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:14px}
body[data-page=create] .brand-signature{font-size:10px;letter-spacing:.2em;color:#d8c9f0;font-weight:600;display:flex;align-items:center;gap:9px;margin:0}
.studio-status-dot{width:5px;height:5px;flex-shrink:0;background:#cb75ff;box-shadow:0 0 14px #a43fff;border-radius:50%}
.studio-switch-mode{font-size:12px;min-height:36px;padding:5px 0;display:flex;align-items:center;gap:10px;color:#bdb3cd;border-bottom:1px solid #a28ab433}
.studio-switch-mode svg{width:15px;height:15px}
body[data-page=create] .composer-section>h1{font-size:clamp(34px,3.4vw,62px);font-weight:650;line-height:1.05;letter-spacing:-.055em;margin-bottom:12px;text-wrap:balance}
body[data-page=create] .composer-section>h1>span{color:#d9bdff}
body[data-page=create] .create-layout .intro{font-size:14px;line-height:1.6;color:#b9c3d6;margin:0 0 22px;max-width:470px}
body[data-page=create] .composer{position:relative;display:flex;flex-direction:column;gap:0;padding:16px;border:1px solid #bc87ff59;border-radius:21px;background:linear-gradient(140deg,#151c2bea,#0c1020ef 75%);box-shadow:0 30px 100px #0005,inset 0 1px #dce9ff0c;backdrop-filter:blur(28px)}
.studio-prompt-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:10px;letter-spacing:.12em;color:#c3b0d9;padding:3px 3px 12px;text-transform:uppercase}
.studio-prompt-heading>span:last-child{color:#a5afc5;font-size:10px;letter-spacing:.035em}
body[data-page=create] .prompt-wrap{border:1px solid #a498cd49;border-radius:13px;background:linear-gradient(150deg,#0b1525cb,#151326d9);overflow:hidden;transition:border-color .2s,box-shadow .2s}
body[data-page=create] .prompt-wrap:focus-within{border-color:#ba86ffb3;box-shadow:0 0 0 3px #9853e51c}
body[data-page=create] #prompt{min-height:155px;height:auto;max-height:430px;font-size:21px;line-height:1.55;letter-spacing:-.025em;padding:19px 20px 6px;resize:vertical;background:transparent;color:#f0eef7}
body[data-page=create] #prompt::placeholder{color:#9aabc1}
body[data-page=create] .prompt-tools{min-height:40px;padding:5px 17px 12px;gap:14px}
body[data-page=create] .prompt-tools .text-button{font-size:13px;color:#d5a2ff;gap:8px;font-weight:500}
body[data-page=create] .prompt-tools .icon{width:19px;height:19px}
body[data-page=create] #prompt-count{font-size:11px;color:#b7a2cc}
body[data-page=create] .quick-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0 0}
body[data-page=create] .quick-control{min-height:69px;padding:12px 10px;background:linear-gradient(145deg,#1c273a99,#101827bf);border:1px solid #a2bdd329;border-radius:10px;gap:9px;box-shadow:inset 0 1px #d2e6ff04;transition:border-color .2s,background .2s,transform .2s}
body[data-page=create] .quick-control:hover{border-color:#b78dee8c;background:#27203b;transform:translateY(-1px)}
body[data-page=create] .quick-control>.icon:first-child{display:block;width:20px;height:20px;color:#ded8ef;stroke-width:1.4;flex-shrink:0}
body[data-page=create] .quick-control>.icon:last-child{width:11px;height:11px;color:#b6b6cd;flex-shrink:0}
body[data-page=create] .quick-control span{min-width:0}
body[data-page=create] .quick-control small{font-size:11px;font-weight:400;color:#aebed4;margin-bottom:4px;letter-spacing:0}
body[data-page=create] .quick-control strong{font-size:13px;font-weight:550;letter-spacing:-.025em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;color:#f0eef7}
body[data-page=create] .energy{margin:0;padding:19px 4px 13px;gap:20px}
body[data-page=create] .energy>label{font-size:13px;font-weight:550;color:#dedcea}
body[data-page=create] .energy input[type=range]{height:5px;background:linear-gradient(90deg,#792fff,#bf77ff var(--fill,49%),#354055 var(--fill,49%));accent-color:#e5c2ff}
body[data-page=create] .range-endpoints{font-size:11px;color:#b4bfd1;margin-top:9px}
.studio-lyrics-disclosure{border:1px solid #b593da30;border-radius:10px;background:#b192eb08;margin:0 0 13px;min-width:0}
.studio-lyrics-disclosure>summary{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 13px;min-height:43px;cursor:pointer;list-style:none;font-size:13px;color:#e2d8f2}
.studio-lyrics-disclosure>summary::-webkit-details-marker{display:none}
.studio-lyrics-disclosure>summary:after{content:'+';font-size:20px;font-weight:300;color:#c4a5eb}
.studio-lyrics-disclosure[open]>summary:after{content:'−'}
.studio-lyrics-state{margin-left:auto;font-size:11px;color:#b8a8ca}
body[data-page=create] .studio-lyrics-disclosure #lyrics-composer{margin:0;border:0;background:transparent;padding:12px 15px 16px}
body[data-page=create] .lyrics-composer{background:#151329;border-color:#a788d83d;border-radius:12px}
body[data-page=create] .creation-actions{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:15px;align-items:center;padding:9px 0;background:linear-gradient(0deg,#0e1525 75%,#0e152500);border-radius:10px}
body[data-page=create] #create-button{min-height:54px;border-radius:11px;font-size:17px;font-weight:650;letter-spacing:-.025em;color:white;background:linear-gradient(115deg,#953afb,#6c24ef);border:1px solid #cf83ffb0;box-shadow:0 7px 28px #7923e53b,inset 0 1px #fff3;gap:10px;transition:filter .2s,transform .2s}
body[data-page=create] #create-button:hover:not(:disabled){filter:brightness(1.17);transform:translateY(-1px)}
body[data-page=create] #create-button .icon{width:21px;height:21px}
body[data-page=create] .creation-actions>.text-button{font-size:13px;gap:8px;padding:12px 7px;min-height:46px;color:#d7d8e7;white-space:nowrap}
body[data-page=create] .creation-actions>.text-button .icon{width:21px;height:21px}
body[data-page=create] .listen-link{font-size:12px;color:#c8c3dc;margin:6px 0 0;padding:15px 2px 3px;border-top:1px solid #9c90b526;width:100%;justify-content:center;gap:9px}
body[data-page=create] .listen-link .icon{width:16px;height:16px}
body[data-page=create] .form-status{font-size:13px;line-height:1.55;color:#dac6f6;padding:12px 4px 0}
body[data-page=create] .world-section{position:sticky;top:98px;padding:0;min-width:0;min-height:560px;overflow:visible;isolation:isolate}
.studio-art-direction{position:absolute;inset:48px -13% -15px;min-height:0;pointer-events:none;z-index:-1;overflow:hidden}
@media(max-width:700px){body[data-page=create] .world-section{overflow:clip}.studio-art-direction{inset-inline:0}}
.studio-preview{position:absolute;inset:-5% -20% 12%;opacity:.52;mask-image:radial-gradient(ellipse,black 20%,transparent 67%)}
.studio-preview canvas{display:block;width:100%;height:100%}
.studio-art-note{display:none}
.studio-art-caption{position:absolute;left:12%;right:12%;bottom:25px;text-align:center}
.studio-art-caption p{font-size:clamp(25px,2.5vw,39px);line-height:1.1;font-weight:450;letter-spacing:-.045em;color:#e2d2fd}
.studio-art-caption span{display:block;font-size:12px;line-height:1.5;color:#b3b0ce;margin-top:11px}
body[data-page=create] .world-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin:12px 0 22px;min-height:36px}
body[data-page=create] .world-toolbar button{font-size:11px;padding:9px 12px;min-height:36px;border-radius:8px}
body[data-page=create] .world-toolbar .segmented{background:#101626bd;border-color:#aca6d93b;backdrop-filter:blur(18px)}
body[data-page=create] .world-toolbar .segmented button.active{background:linear-gradient(135deg,#8735d8,#4f23b5);border-color:#d793ffa1;box-shadow:0 0 25px #9641e62e;color:#fff}
body[data-page=create] .world-toolbar .filter-button .icon{width:13px;height:13px}
body[data-page=create] .world-stage{height:390px;min-height:0;perspective:1100px;overflow:visible;isolation:isolate}
body[data-page=create] .world-stage .portal{transition:transform .65s cubic-bezier(.22,.68,0,1),left .65s,top .65s,opacity .65s}
body[data-page=create] .portal-0{width:53%;left:2%;height:84%;top:9%;max-width:none;transform:rotateY(9deg) translateZ(35px);z-index:3}
body[data-page=create] .portal-1{width:37%;left:58%;height:63%;top:20%;transform:rotateY(-12deg);opacity:.9;z-index:2}
body[data-page=create] .portal-2{width:28%;left:38%;height:48%;top:42%;transform:rotateY(-18deg) translateZ(-50px);opacity:.6;z-index:1}
body[data-page=create] .portal-inner{border-radius:17px;border:1px solid #d299ff8f;box-shadow:inset 0 0 1px 2px #d89bff44,0 0 35px #833aec35,0 24px 55px #0009;overflow:hidden;background:#101827}
body[data-page=create] .portal-heading{left:19px;right:12px;top:22px;bottom:auto}
body[data-page=create] .portal-heading h3{font-size:clamp(20px,2.15vw,34px);font-weight:620;letter-spacing:-.045em;line-height:1.1}
body[data-page=create] .station-meta{font-size:11px;display:block;margin-top:8px;color:#ddd7f1;line-height:1.4}
body[data-page=create] .portal-1 .portal-heading h3{font-size:20px}
body[data-page=create] .portal-2 .portal-heading h3{font-size:15px}
body[data-page=create] .portal-2 .station-meta{font-size:9px}
body[data-page=create] .portal-play{width:48px;height:48px;bottom:30px;left:50%;right:auto;transform:translateX(-50%);border:1px solid #eee5ffad;background:#0d0e1d73;backdrop-filter:blur(12px);box-shadow:0 0 25px #8c35dd35}
body[data-page=create] .portal-play .icon{width:23px;height:23px}
body[data-page=create] .portal-base{display:block;opacity:.55;bottom:-8%}
body[data-page=create] .world-bottom{font-size:11px;gap:14px;margin:25px 0 0;display:flex;align-items:center;justify-content:space-between;color:#beb4d1}
body[data-page=create] .world-bottom>div{font-size:11px;display:flex;align-items:center;gap:10px}
body[data-page=create] .world-bottom .icon-button{width:35px;height:35px;border:1px solid #c5a3e438;border-radius:50%;background:#1a15253d}
body[data-page=create] .world-bottom .icon{width:16px;height:16px}
body[data-page=create] .world-section.classic .world-stage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;height:300px;perspective:none}
body[data-page=create] .world-section.classic .portal{position:relative;inset:auto;width:100%;height:100%;opacity:1;transform:none}
body[data-page=create] .world-section.classic .portal-heading{left:12px;top:18px;right:10px}
body[data-page=create] .world-section.classic .portal-heading h3{font-size:19px}
body[data-page=create] .world-section.classic .portal-base{display:none}
body[data-page=create] .discovery{max-width:1600px;margin:35px auto 0;padding-top:24px;border-top:1px solid #b39bcd26}
body[data-page=create] .discovery h2{font-size:22px;font-weight:550;letter-spacing:-.035em}
body[data-page=create] .discovery .section-heading>a{font-size:12px;color:#c8b4e9}
body[data-page=create] .discovery .cover{border-radius:12px;aspect-ratio:1.5}
body[data-page=create] .discovery .song-title{font-size:13px;line-height:1.5}
@media(min-width:1600px){body[data-page=create] .create-layout{gap:5vw}.studio-art-direction{inset:30px -15% -50px}body[data-page=create] .world-stage{height:490px}.studio-art-caption{bottom:15px}body[data-page=create] #prompt{min-height:200px}body[data-page=create] .quick-control{min-height:77px}}
@media(max-width:1100px){body[data-page=create] .create-layout{grid-template-columns:minmax(430px,1.2fr) minmax(270px,.8fr);gap:25px}body[data-page=create] #main{padding-inline:24px}body[data-page=create] .quick-control{padding:11px 8px;gap:7px}body[data-page=create] .quick-control>.icon:first-child{width:16px;height:16px}body[data-page=create] .quick-control strong{font-size:12px}body[data-page=create] .world-toolbar button{font-size:10px;padding:8px}body[data-page=create] .portal-heading{left:14px}body[data-page=create] .station-meta{font-size:10px}.studio-art-caption{bottom:35px}}
@media(max-width:950px){body[data-page=create] .create-layout{grid-template-columns:minmax(0,1fr);max-width:760px}body[data-page=create] .composer-section>h1{font-size:43px}body[data-page=create] .world-section{position:relative;top:auto;margin-top:28px;min-height:590px}body[data-page=create] .world-stage{height:400px}.studio-art-caption{bottom:25px}body[data-page=create] .portal-0{width:45%;left:4%}body[data-page=create] .portal-1{left:52%;width:35%}body[data-page=create] .portal-2{left:76%;width:24%}body[data-page=create] .discovery{max-width:760px}}
@media(max-width:600px){body[data-page=create] #main{padding:22px 16px calc(var(--player-height) + 92px)}.studio-topline{gap:10px;margin-bottom:13px}body[data-page=create] .brand-signature{font-size:9px;letter-spacing:.13em}.studio-switch-mode{font-size:11px;gap:7px}body[data-page=create] .composer-section>h1{font-size:38px;max-width:360px;line-height:1.08}body[data-page=create] .create-layout .intro{font-size:14px;margin-bottom:22px}body[data-page=create] .composer{padding:11px;border-radius:17px}.studio-prompt-heading{font-size:9px;padding:3px 3px 12px}.studio-prompt-heading>span:last-child{font-size:9px}body[data-page=create] #prompt{font-size:20px;min-height:180px;padding:17px}body[data-page=create] .quick-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}body[data-page=create] .quick-control{min-height:70px;padding:12px;gap:10px}body[data-page=create] .quick-control>.icon:first-child{width:19px;height:19px}body[data-page=create] .quick-control strong{font-size:14px}body[data-page=create] .energy{padding:22px 4px 16px}.studio-lyrics-disclosure>summary{font-size:13px}.studio-lyrics-state{font-size:11px}body[data-page=create] .creation-actions{gap:8px}body[data-page=create] #create-button{font-size:15px;min-height:53px}body[data-page=create] .creation-actions>.text-button{font-size:12px;padding-inline:4px}body[data-page=create] .creation-actions>.text-button .icon{width:18px;height:18px}body[data-page=create] .world-section{min-height:490px;margin-top:32px}body[data-page=create] .world-stage{height:290px;overflow:hidden}body[data-page=create] .world-toolbar{justify-content:flex-start}body[data-page=create] .portal-0{width:52%;left:3%;height:83%}body[data-page=create] .portal-1{width:35%;left:58%}body[data-page=create] .portal-2{left:42%}body[data-page=create] .portal-heading h3{font-size:21px}body[data-page=create] .portal-1 .portal-heading h3{font-size:15px}body[data-page=create] .station-meta{font-size:9px}.studio-art-direction{inset:48px -8% 0}.studio-art-caption{bottom:18px}.studio-art-caption p{font-size:30px}body[data-page=create] .world-bottom{margin-top:15px}body[data-page=create] .world-bottom>span{max-width:120px;line-height:1.5}body[data-page=create] .discovery h2{font-size:21px}body[data-page=create] .discovery .song-title{font-size:13px}}
@media(prefers-reduced-motion:reduce){body[data-page=create] .quick-control:hover,body[data-page=create] #create-button:hover{transform:none}body[data-page=create] .world-stage .portal{transition:none}}

@media(min-width:1100px){
 body[data-page=create] #main{padding-top:8px}
 .studio-topline{margin-bottom:0}
 body[data-page=create] .composer-section>h1{font-size:clamp(32px,3vw,58px);margin-bottom:6px}
 body[data-page=create] .create-layout .intro{margin-bottom:12px;font-size:13px}
 body[data-page=create] .composer{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(230px,1fr);column-gap:12px;padding:14px}
 .studio-prompt-heading{grid-column:1/-1}
 body[data-page=create] .prompt-wrap{grid-column:1;grid-row:2;display:flex;flex-direction:column;min-height:216px}
 body[data-page=create] #prompt{min-height:164px;flex:1;font-size:20px;padding:15px 15px 5px}
 body[data-page=create] .prompt-tools{padding:5px 12px 10px}
 body[data-page=create] .quick-controls{grid-column:2;grid-row:2;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(66px,1fr));margin:0;gap:8px}
 body[data-page=create] .quick-control{min-height:66px;padding:10px 8px;gap:7px}
 body[data-page=create] .quick-control>.icon:first-child{width:15px;height:15px}
 body[data-page=create] .quick-control>.icon:last-child{display:none}
 body[data-page=create] .quick-control small{font-size:11px}
 body[data-page=create] .quick-control strong{font-size:12px}
 body[data-page=create] .energy{grid-column:1;grid-row:3;min-height:67px;align-self:start;padding:16px 2px 11px;gap:12px}
 .studio-lyrics-disclosure{grid-column:2;grid-row:3;margin:12px 0 10px;align-self:start}
 .studio-lyrics-disclosure>summary{font-size:12px;padding-inline:10px;gap:6px}
 .studio-lyrics-state{font-size:10px}
 .studio-lyrics-disclosure[open]{grid-column:1/-1;grid-row:4;margin:0 0 12px}
 body[data-page=create] .creation-actions{grid-column:1/-1;grid-row:4;padding:4px 0}
 body[data-page=create] .composer:has(.studio-lyrics-disclosure[open]) .creation-actions{grid-row:5}
 body[data-page=create] .listen-link{grid-column:1/-1;grid-row:6}
 body[data-page=create] .form-status{grid-column:1/-1;grid-row:7}
 body[data-page=create] .creation-activity{grid-column:1/-1;grid-row:8}
 body[data-page=create] .world-section{min-height:650px}
 .studio-art-caption{bottom:32px}
}