/* Focused track shell. Gallery/navigation styling remains in its own layer. */
#track-home,#stage-bar,#perform{display:none}
body[data-page=create]{--rail:0px}
body[data-page=create] #sidebar,body[data-page=create] #sidebar-toggle{display:none}
body[data-page=create] #app-body{margin-left:0;display:grid;height:100dvh;min-height:0;grid-template-columns:minmax(0,1fr);grid-template-rows:64px auto auto minmax(0,1fr) auto}
body[data-page=create] #app-body:has(#agent:not([hidden])){grid-template-columns:minmax(0,1fr) clamp(330px,28vw,420px)}
body[data-page=create] #app-body>header{grid-column:1/-1;grid-row:1;gap:10px;padding:10px 20px;background:#111218}
body[data-page=create] header>strong{display:none}
body[data-page=create] #track-home{display:inline-flex;align-items:center;min-height:44px;color:#b9bdcc;text-decoration:none;font-size:13px;white-space:nowrap}
body[data-page=create] #project-identity{display:flex;flex:1;min-width:0;padding:0;gap:8px}
body[data-page=create] #creation-title{width:100%;max-width:340px;min-width:0;font-size:15px}
body[data-page=create] #save-home{font-size:12px;white-space:nowrap}
body[data-page=create] #perform{display:block}
body[data-page=create] #play{background:#ded6ff;border-color:#ded6ff;color:#231d35;min-width:70px}
body[data-page=create] #creation-context{grid-column:1;grid-row:2;padding:6px 20px;font-size:11px}
body[data-page=create] #workspace-tools{display:block;padding:0 0 8px;border-bottom:1px solid #ffffff12;margin-bottom:10px;background:transparent}
body[data-page=create] #workspace-tools button{font-size:13px;padding:8px;text-align:left}
body[data-page=create] #workspace{grid-column:1;grid-row:4;min-width:0;min-height:0;position:relative;isolation:isolate;display:flex;flex-direction:column}
body[data-page=create] #app-body>footer{grid-column:1;grid-row:5;background:#111218;font-size:12px}
body[data-page=create] #agent{grid-column:2;grid-row:2/6;min-height:0;background:#16171d}
#stage-bar{flex:none;gap:16px;align-items:center;padding:12px 20px;z-index:2;background:#101116e8}
body[data-page=create] #stage-bar{display:flex}
#stage-bar [role=tablist]{display:flex;gap:3px;background:#ffffff08;border-radius:9px;padding:3px}
#stage-bar [role=tab]{border:0;background:transparent;color:#adb1c1;font-size:13px;min-height:36px;border-radius:7px}
#stage-bar [aria-selected=true]{background:#34343f;color:#fff}
#draft-state{font-size:12px;color:#c1b4e5;margin-right:auto}
#stage-bar>button{font-size:12px}
body[data-page=create] #workspace main,body[data-page=create][data-mode=both] #workspace main{position:static;display:flex;flex:1;min-height:0;height:auto;overflow:hidden;padding:20px;gap:16px;align-items:stretch}
body[data-page=create] #workspace #output{position:absolute;inset:0;z-index:-1;border:0;padding:0;overflow:hidden;display:block;pointer-events:auto}
body[data-page=create] #output canvas{width:100%;height:100%;max-height:none;aspect-ratio:auto;border-radius:0;object-fit:fill}
body[data-page=create] #music-editor,body[data-page=create] #visual-editor{position:relative;width:min(720px,70%);flex:none;min-height:0;padding:20px;background:#101116ed;border:1px solid #ffffff12;border-radius:12px;box-shadow:0 12px 36px #0002;overflow:hidden}
body[data-page=create][data-mode=both] #music-editor,body[data-page=create][data-mode=both] #visual-editor{width:calc(50% - 8px)}
body[data-page=create] .code-editor{min-height:0;flex:1}
body[data-page=create] .cm-gutters{background:transparent!important}
body[data-page=create] #music-editor>.editor-label,body[data-page=create] #visual-editor>.editor-label{display:none}
body[data-page=create] #visual-editor #advanced{font-size:12px;max-height:35%;overflow:auto}
body[data-page=create] #menu>div{width:230px;max-height:75dvh;overflow:auto;z-index:20}
body[data-page=create] #menu label{margin:8px 0}
body[data-page=create] #menu select{max-width:100%;margin-bottom:10px}
body[data-page=create][data-perform=true] #app-body{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
body[data-page=create][data-perform=true] #app-body>header,body[data-page=create][data-perform=true] #creation-context,body[data-page=create][data-perform=true] #workspace-tools,body[data-page=create][data-perform=true] #app-body>footer,body[data-page=create][data-perform=true] #agent{display:none!important}
body[data-page=create][data-perform=true] #workspace{grid-column:1;grid-row:1}
body[data-page=create][data-perform=true] #stage-bar{background:#101116b8}
body[data-page=create][data-code-hidden=true] #music-editor,body[data-page=create][data-code-hidden=true] #visual-editor{visibility:hidden;pointer-events:none}
body[data-page=create] button:focus-visible,body[data-page=create] a:focus-visible{outline:2px solid #d4c5ff;outline-offset:3px}
@media(max-width:1000px){
 body[data-page=create] #app-body:has(#agent:not([hidden])){grid-template-columns:minmax(0,1fr)}
 body[data-page=create] #app-body:has(#agent:not([hidden])) #workspace{visibility:hidden}
 body[data-page=create] #agent.chat-panel{grid-column:1;grid-row:2/6;height:auto;min-height:0;border:0;z-index:3}
 body[data-page=create] #music-editor,body[data-page=create] #visual-editor{width:85%}
 body[data-page=create] .code-editor{height:auto;flex:1}
 body[data-page=create] #save-home{display:none}
}
@media(max-width:600px){
 body[data-page=create] #app-body{grid-template-rows:auto auto auto minmax(0,1fr) auto}
 body[data-page=create] #app-body>header{padding:8px 12px;flex-wrap:wrap;gap:6px}
 body[data-page=create] #project-identity{flex-basis:65%}
 body[data-page=create] header>button{min-height:44px}
 body[data-page=create] #workspace main{padding:10px}
 body[data-page=create] #music-editor,body[data-page=create] #visual-editor{width:100%;padding:12px;background:#101116dd}
 body[data-page=create][data-mode=both] #workspace main{flex-direction:column}
 body[data-page=create][data-mode=both] #music-editor,body[data-page=create][data-mode=both] #visual-editor{width:100%;flex:1}
 #stage-bar{padding:8px 10px;gap:8px;flex-wrap:wrap}
 #stage-bar [role=tab]{min-height:44px}
 #draft-state{font-size:11px}
}
@media(prefers-reduced-motion:reduce){#app-body *{scroll-behavior:auto!important;transition:none!important}}

.starter-choices{display:grid;gap:10px;margin:24px 0}
.starter-choices button{display:flex;flex-direction:column;gap:6px;text-align:left;padding:18px;background:#22242e}
.starter-choices strong{font-size:16px}.starter-choices span,.starter-note{font-size:13px;color:#b4b8c9;line-height:1.6}
#starter-feedback{font-size:13px;color:#d0c3f5}

/* Lessons use the same stage and companion proportions as Create. */
body[data-page=learn]:has(.guided-lesson){--rail:0px}
body[data-page=learn]:has(.guided-lesson) #sidebar,body[data-page=learn]:has(.guided-lesson) #app-body>header{display:none}
body[data-page=learn]:has(.guided-lesson) #app-body{margin-left:0}
body[data-page=learn] #page-body:has(.guided-lesson){height:calc(100dvh - 40px);padding:0;min-height:0}
.guided-lesson{grid-template-columns:minmax(0,1fr) clamp(330px,28vw,420px);grid-template-rows:auto minmax(0,1fr);gap:0;height:100%;min-height:0}
.guided-lesson[data-chat=closed]{grid-template-columns:minmax(0,1fr)}
.guided-lesson[data-chat=closed] .lesson-guide{display:none}
.guided-lesson>.lesson-header{grid-column:1/-1;grid-row:1;display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:12px 20px;background:#111218;border-bottom:1px solid #30313a}
#page-body .guided-lesson>.lesson-header>h1{font-size:16px;letter-spacing:0;margin:0;flex:1}
.guided-lesson>.lesson-header>.lesson-breadcrumb{display:none}
.guided-lesson>.lesson-header>.button-link{font-size:12px;border:0;padding:8px 0;color:#b9bdcc}
.guided-lesson .lesson-controls{margin:0;align-items:center}
.guided-lesson .lesson-controls button{font-size:13px;min-height:44px}
.guided-lesson>.lesson-lab{grid-column:1;grid-row:2;position:relative;isolation:isolate;padding:20px;overflow:hidden;display:flex;flex-direction:column;min-height:0;background:#090b12}
.guided-lesson .lesson-code{width:min(720px,80%);flex:1;min-height:150px;padding:14px;background:#101116ed;border:1px solid #ffffff12;box-shadow:0 12px 36px #0002;border-radius:12px}
.guided-lesson .cm-gutters{background:transparent!important}
.guided-lesson .lesson-feedback,.guided-lesson .lesson-caption{align-self:flex-start;background:#101116ed;padding:6px 10px;border-radius:6px;font-size:12px;margin:8px 0 0}
.guided-lesson .lesson-output{position:absolute;inset:0;z-index:-1;width:100%;height:100%;aspect-ratio:auto;border:0;border-radius:0}
.guided-lesson .lesson-output>canvas{object-fit:fill;border-radius:0}
.guided-lesson .lesson-audio-output{height:100px;flex:none;width:min(720px,80%);margin-top:12px;background:#101116bd}
.guided-lesson>.lesson-guide{grid-column:2;grid-row:2;min-height:0;padding:20px;display:flex;flex-direction:column;background:#16171d;overflow:hidden}
.guided-lesson .lesson-progress{margin:0 0 12px;gap:5px;flex:none}
.guided-lesson .lesson-progress a{padding:6px 8px;font-size:11px}
.guided-lesson .lesson-chat{height:auto;flex:1;min-height:0}
.guided-lesson .lesson-step-actions{flex:none;font-size:11px;gap:6px}
.guided-lesson .lesson-step-actions button,.guided-lesson .lesson-step-actions a{padding:8px;font-size:11px}
@media(max-width:1000px){
 .guided-lesson{grid-template-columns:minmax(0,1fr)}
 .guided-lesson>.lesson-guide{grid-column:1;border-left:0}
 .guided-lesson[data-chat=open]>.lesson-lab{visibility:hidden}
 .guided-lesson .lesson-code,.guided-lesson .lesson-audio-output{width:100%}
 .guided-lesson>.lesson-header{gap:8px;padding:10px 12px}
 .guided-lesson .lesson-controls{flex-basis:100%;flex-wrap:wrap}
 .guided-lesson .lesson-controls button{min-height:44px}
 .guided-lesson>.lesson-lab{padding:12px}
 .guided-lesson .lesson-code{min-height:100px}
 .guided-lesson .lesson-audio-output{height:70px}
}
.chat-editor-context{font-size:11px;color:#c5b4e8;margin:6px 0}
.chat-editor-context:empty{display:none}
/* Keep essential controls usable with touch, zoom and the software keyboard. */
body[data-page=create] header>button,#stage-bar>button{min-height:44px}
#stage-bar [role=tab]{min-height:44px}
.chat-send-row button,.chat-heading button{min-height:44px}
body[data-page=create] #app-body>header,.guided-lesson>.lesson-header{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));padding-top:max(10px,env(safe-area-inset-top))}
body[data-page=create] #app-body>footer{padding-bottom:max(8px,env(safe-area-inset-bottom))}
#agent.chat-panel,.guided-lesson>.lesson-guide{padding-bottom:max(20px,env(safe-area-inset-bottom))}
body[data-page=create][data-perform=true] #stage-bar{padding-top:max(12px,env(safe-area-inset-top));padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
@media(max-height:650px){
 #agent.chat-panel,.guided-lesson>.lesson-guide{overflow:auto}
 .chat-messages{flex:none;min-height:100px;max-height:180px}
 .guided-lesson .lesson-chat{flex:none;min-height:0}
}