.song-settings { display:flex;align-items:center;gap:8px;font-size:10px; }.song-settings label { color:var(--muted); }.song-settings select { margin-left:5px;background:#293423;color:var(--ink);border:1px solid #4e5b42;border-radius:6px;padding:7px; }.song-settings button { padding:7px;border-radius:6px;font-size:10px; }
.song-rules { font-size:10px;color:var(--lime);line-height:1.5;margin:9px 0; }
.activity-status { font-size:10px;color:#d3dcc9;line-height:1.4;margin:0 0 10px; }
.song-controls { margin-top:12px;display:flex;flex-direction:column;gap:7px;min-height:0; }.song-controls button { border-radius:7px;padding:9px;font-size:11px; }.song-controls #open-writer { margin:0!important; }.song-overview { font-size:10px;color:var(--muted);line-height:1.5; }.song-main-verses { min-height:0;max-height:100px;overflow:auto;display:flex;flex-direction:column;gap:5px; }.song-main-verses button { font-size:10px;padding:7px;text-align:left; }
body.studio .creative-panel .verse-heading { margin-top:18px;padding-top:12px; }
body.studio #verse-workspace { width:min(1080px,calc(100vw - 36px));height:calc(100dvh - 36px);padding:22px; }
.writer-song-tools { display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:var(--lime);margin:16px 0; }.writer-song-tools button { padding:9px;border-radius:7px;font-size:11px; }
#writer-list-toggle { display:none; }.song-writer-grid { display:grid;grid-template-columns:300px minmax(0,1fr);gap:20px;flex:1;min-height:0; }.song-verse-list { min-height:0;overflow:auto;padding-right:5px; }.round-verse-group { margin-bottom:20px; }.round-verse-group h3 { display:flex;justify-content:space-between;gap:10px;font-size:13px;margin:0 0 10px; }.round-saved { font-size:10px;color:var(--lime); }.song-verse-card { display:block;width:100%;text-align:left;padding:12px;border-radius:8px;margin:0 0 8px;background:#182015!important; }.song-verse-card.active { border-color:var(--lime); }.song-verse-card b { font-size:13px; }.verse-status { float:right;color:var(--lime);font-size:10px; }.song-verse-card p { white-space:pre-wrap;font-size:12px;line-height:1.5;color:var(--muted);margin:8px 0 0; }
.song-editor { display:flex;flex-direction:column;min-height:0; }.song-editor .writingSample { min-height:0!important;flex:1; }.song-editor #song-save { background:var(--lime);color:#202718;min-height:44px;padding:12px;border:0;border-radius:8px;font-size:13px;font-weight:bold; }
body.studio.flow #verse-workspace { min-height:0!important;margin:0 auto;width:min(1100px,100%);height:auto;padding:18px 24px;display:flex;flex-direction:column;overflow:hidden;flex:1; }
body.studio.flow #verse-workspace .writingSample { background:#151a13;line-height:1.7;font-size:20px;padding:18px;color:var(--ink); }
.song-progress-home { display:flex;flex-direction:column;gap:8px;min-height:0; }.song-progress-home h3 { margin:0;font-size:16px; }.song-progress-home button { padding:10px;border-radius:7px; }.song-home-summary { color:var(--lime);font-size:12px; }
#upload-song { background:#202620;color:var(--ink);border:1px solid #5b6b4c;border-radius:12px;padding:25px;max-width:500px; }#upload-song::backdrop { background:#000b; }#upload-song label { display:block;margin:18px 0; }#upload-song input { display:block;margin-top:8px; }#upload-song button { padding:10px;border-radius:7px;margin-right:8px; }.upload-error { color:#ffc4b2; }
@media(max-height:800px) and (min-width:1200px) { .progress-panel .score-card { padding:10px; }.progress-panel h1 { font-size:22px;margin:10px 0; }body.studio .progress-panel .getPoint { min-height:48px;font-size:9px;padding:6px; }.progress-panel .section-label { margin:12px 0 8px; }.progress-panel .scoring-key { gap:3px;font-size:9px; }.progress-panel .song-rules { font-size:9px;margin:6px 0; }.activity-status { font-size:9px;margin-bottom:8px; } }
@media(max-width:900px) { .header-caption,.flow-location { display:none!important; }.song-settings label { font-size:0; }.song-settings select { font-size:10px; }.song-settings #song-assets { font-size:9px; }.studio-header { gap:9px; }.song-writer-grid { grid-template-columns:230px 1fr;gap:14px; }.song-main-verses { max-height:70px; } }
@media(max-width:600px) {
 .song-settings #song-assets { display:none; }.studio-header .wordmark { font-size:19px!important; }.song-settings select { padding:5px;margin:0;font-size:9px; }.song-settings { gap:4px; }.studio-header #session-toggle { font-size:9px!important;padding:7px!important; }.instructions summary { padding:7px!important;font-size:9px!important; }
 body.studio .piano-panel { height:285px; }.activity-status { margin-bottom:6px;font-size:9px; }.song-main-verses { max-height:60px; }.song-controls { gap:5px;margin-top:8px; }.song-controls button { padding:8px;font-size:10px; }.song-rules { font-size:10px; }
 body.studio #verse-workspace { width:100vw;height:var(--writer-height,100dvh);padding:16px; }.song-writer-grid { display:flex;flex-direction:column;gap:10px; }.song-verse-list { display:none;max-height:35%;flex-shrink:0; }.list-open .song-verse-list { display:block; }.song-editor { flex:1;min-height:0; }.writer-song-tools { flex-wrap:wrap;margin:12px 0;gap:8px;font-size:10px; }.writer-song-tools #song-summary { flex-basis:100%; }#writer-list-toggle { display:block; }.writer-header h2 { font-size:19px!important; }.song-editor .verse-title { font-size:12px; }.song-editor .verse-challenge { font-size:11px; }
 body.studio.flow #verse-workspace { height:calc(var(--writer-height,100dvh) - 138px);flex:none;padding:14px; }.song-verse-card { padding:9px; }.song-verse-card p { font-size:11px; }.song-progress-home { margin-top:0; }
 body.studio #verse-workspace.writer-compact .writer-song-tools { margin:8px 0; }.writer-compact .song-verse-list { display:none!important; }.writer-compact .verse-example { display:none!important; }
 body.studio.flow:has(#verse-workspace:not([hidden])) .studio-header,body.studio.flow:has(#verse-workspace:not([hidden])) .web-toolbar { display:none; }
 body.studio.flow #verse-workspace:not([hidden]) { height:var(--writer-height,100dvh); }
}
.song-main-verses button { white-space:pre-wrap;line-height:1.5; }
.song-settings #song-choice { max-width:150px; }
#restore-legacy { font-size:10px;color:var(--lime); }
@media(max-width:900px) { .song-settings #song-choice { max-width:90px; } }
@media(max-width:600px) { .song-settings #song-choice { max-width:60px; }.song-settings select { max-width:60px; }.studio-header { gap:6px!important; } }
#mobile-song-settings { display:none; }
#song-settings-dialog { padding:24px;background:#202620;color:var(--ink);border:1px solid #596a49;border-radius:12px;max-width:calc(100vw - 32px); }
#song-settings-dialog::backdrop { background:#000c; }
#song-settings-dialog .song-settings { display:flex;flex-direction:column;align-items:stretch;gap:16px; }
#song-settings-dialog .song-settings label { font-size:12px; }
#song-settings-dialog .song-settings select,#song-settings-dialog .song-settings #song-choice { max-width:240px;width:240px;font-size:13px;padding:10px; }
#song-settings-dialog .song-settings #song-assets { display:block;padding:12px;font-size:13px; }
#song-settings-dialog #close-settings { padding:10px;border-radius:7px; }
@media(max-width:600px) { #mobile-song-settings { display:block; } }
.writer-compact #writer-example { display:none; }
body.studio .rules-trigger { display:block;width:100%;background:none;border:0;padding:8px 0;text-align:left;color:var(--muted);font-size:10px;line-height:1.5;margin:0; }
body.studio .rules-trigger:hover { color:var(--ink); }
.answer-mode { display:flex;align-items:center;gap:9px;margin:12px 0 0;color:var(--muted);font-size:11px;cursor:pointer; }
body.studio .answer-mode input { width:30px;height:18px;min-height:0;margin:0;accent-color:var(--lime);cursor:pointer; }
#points-rules { width:min(410px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:24px;background:#202620;color:var(--ink);border:1px solid #586b45;border-radius:14px; }
#points-rules::backdrop { background:#080e09cc; }
#points-rules header { display:flex;justify-content:space-between;align-items:center;gap:18px; }
#points-rules h2 { font-size:21px;margin:0; }#close-points { padding:6px 10px;border-radius:6px;font-size:20px; }
.rules-difficulty { display:inline-block;margin-top:14px;padding:5px 9px;background:#344429;color:var(--lime);border-radius:5px;font-size:11px; }
.points-table { display:grid;grid-template-columns:1fr auto;gap:12px;font-size:13px;margin:20px 0; }.points-table dt { color:#c3cbbd; }.points-table dd { margin:0;font-weight:bold; }
.beat-requirements { border-top:1px solid var(--line);padding-top:16px; }.beat-requirements h3 { font-size:14px;margin:0 0 10px; }.beat-requirements p { color:var(--muted);font-size:12px;line-height:1.6;margin:9px 0; }
@media(max-width:600px) { .answer-mode { margin:0 0 8px; }.rules-trigger { font-size:11px!important; } }
.song-writer-grid { grid-template-columns:150px minmax(0,1fr) 270px;gap:16px; }
.song-verse-card { padding:9px; }.song-verse-card p { font-size:10px;line-height:1.5; }.round-verse-group h3 { flex-wrap:wrap;font-size:11px; }.verse-status { float:none;display:block;margin-top:5px; }
.verse-library { overflow:auto;min-height:0;padding:0 0 0 12px;border-left:1px solid var(--line); }.verse-library h3 { margin:0;font-size:15px; }.library-note { color:var(--muted);font-size:10px;line-height:1.5; }.library-groups h4 { font-size:12px;color:var(--lime);margin:18px 0 10px; }.library-verse { padding:12px;background:#182015;border:1px solid #46513d;border-radius:8px;margin-bottom:10px; }.library-verse b { font-size:10px; }.library-verse>p { white-space:pre-wrap;font-size:12px;line-height:1.6; }.library-verse summary { font-size:11px;color:var(--lime);cursor:pointer; }.library-verse details p,.library-empty { font-size:11px;line-height:1.5;color:var(--muted); }
.device-feedback { font-size:11px;line-height:1.5;color:#cbd4c1;margin:9px 0; }.writer-compact .device-feedback { max-height:36px;overflow:auto;font-size:10px; }
#writer-library-toggle { display:none; }
@media(max-width:900px) and (min-width:601px) { .song-writer-grid { grid-template-columns:120px minmax(0,1fr) 210px;gap:12px; }.library-verse { padding:9px; }.library-verse>p { font-size:11px; } }
@media(max-width:600px) { .verse-library { display:none;max-height:35%;border-left:0;padding:0;flex-shrink:0; }.library-open .verse-library { display:block;order:-1; }.library-open .song-verse-list { display:none; }#writer-library-toggle { display:block; }.library-note { margin:7px 0; }.song-editor .device-feedback { font-size:10px;line-height:1.4; }.writer-compact .verse-library { display:none!important; } }
.library-verse .device-line { background:#d8f7a2;color:#182413;padding:2px 3px;border-radius:3px;box-decoration-break:clone;-webkit-box-decoration-break:clone; }
.library-verse details p { margin-bottom:0; }
.song-verse-card b { font-size:11px;line-height:1.5; }.song-verse-card p { white-space:pre-wrap;font-size:12px;color:var(--ink);line-height:1.6; }.library-verse b { font-size:11px;line-height:1.5; }
/* Writing workspace: preserve authored line breaks, keep the editor central. */
body.studio #verse-workspace { width:min(1680px,calc(100vw - 36px)); }
body.studio.flow #verse-workspace { width:min(1680px,100%); }
.song-writer-grid { grid-template-columns:minmax(240px,var(--verse-list-width,300px)) minmax(320px,1fr) 260px;gap:18px; }
.song-verse-list { overflow:auto; }.song-verse-card p { white-space:pre;overflow-x:auto;overflow-wrap:normal;word-break:normal; }
.song-verse-card { min-width:0; }.song-editor .writingSample { resize:none; }
.device-prompt { background:#192117;border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:10px 0;flex-shrink:0; }
.device-name { color:var(--lime);font-size:14px; }.device-prompt .verse-challenge { font-size:12px;line-height:1.5;margin:6px 0; }
.device-prompt .verse-example { white-space:pre-wrap;font-size:12px;font-style:italic;line-height:1.5;margin:0;color:#cbd4c1; }
.device-actions { display:flex;flex-wrap:wrap;gap:8px;margin-top:10px; }.device-actions button { font-size:11px;padding:8px 10px;border-radius:6px; }
.verse-save-actions { display:flex;gap:8px;flex-shrink:0; }.verse-save-actions #song-save { flex:1; }.verse-save-actions #delete-verse { border-radius:7px;padding:8px 12px;color:#ffcab8; }
.library-verse>button { font-size:11px;padding:7px 10px;margin-top:12px;border-radius:6px; }
.numeric-rule { color:var(--muted);font-size:12px;line-height:1.6; }
.device-explorer,#archive-editor { background:#202620;color:var(--ink);border:1px solid #64764f;border-radius:14px;padding:24px;width:min(1000px,calc(100vw - 32px));height:min(800px,calc(100dvh - 32px));max-width:none;max-height:none; }
.device-explorer[open] { display:flex;flex-direction:column; }.device-explorer::backdrop,#archive-editor::backdrop { background:#080e09dd; }
.device-explorer header { display:flex;justify-content:space-between;gap:16px;align-items:center; }.device-explorer h2 { margin:6px 0 0;font-size:24px; }.explorer-close { padding:6px 12px;border-radius:7px;font-size:24px; }.explorer-session-note { color:var(--muted);font-size:12px;line-height:1.5; }
.device-stats { font-size:13px;color:var(--lime); }.device-progress { width:100%;height:8px;accent-color:var(--lime);margin:12px 0;flex-shrink:0; }
.explorer-controls { display:flex;gap:12px; }.explorer-controls label { display:flex;flex-direction:column;gap:5px;font-size:12px; }.explorer-controls label:first-child { flex:1; }
.device-search,.device-filter { background:#151b13;color:var(--ink);border:1px solid #59674d;border-radius:6px;padding:10px;font-size:14px;min-width:0; }
.device-alphabet { display:flex;flex-wrap:wrap;gap:4px;margin:12px 0; }.device-alphabet button { padding:5px 8px;border-radius:4px;font-size:11px; }.device-alphabet button[aria-pressed=true] { background:var(--lime);color:#202718; }
.explorer-grid { display:grid;grid-template-columns:260px minmax(0,1fr);gap:20px;flex:1;min-height:0; }.device-results,.device-detail { min-height:0;overflow:auto; }.device-result-count { font-size:11px;color:var(--muted);margin:0 0 8px; }
.device-result { display:flex;justify-content:space-between;gap:8px;text-align:left;width:100%;padding:12px 10px;border-radius:7px;margin:0 0 6px; }.device-result b { font-size:12px; }.device-result[aria-pressed=true] { border-color:var(--lime); }.device-state { font-size:10px;white-space:nowrap;color:var(--lime); }
.device-detail { padding:0 12px 12px 18px;border-left:1px solid var(--line); }.device-detail h3 { font-size:23px;margin:0 0 8px; }.device-detail>p,.device-detail li { font-size:14px;line-height:1.6; }.device-detail li { white-space:pre-wrap;margin:12px 0; }.device-use { padding:12px;border-radius:7px;background:var(--lime)!important;color:#202718!important;font-weight:bold;width:100%; }.device-practices { color:var(--muted);font-size:11px!important; }.explorer-saved { border:1px solid var(--line);border-radius:7px;padding:12px;margin-bottom:12px; }.explorer-saved b { font-size:12px; }.explorer-saved p { white-space:pre-wrap;line-height:1.6;font-size:14px; }.explorer-saved button { padding:8px;border-radius:6px;margin-right:8px;font-size:11px; }
#archive-editor textarea { width:100%;height:60%;background:#151b13;color:var(--ink);font-size:18px;padding:16px;border:1px solid var(--line);border-radius:8px; }#archive-editor button { padding:12px;margin-top:12px;border-radius:7px; }
@media(min-width:761px) and (max-width:1100px) { .song-writer-grid { grid-template-columns:minmax(240px,min(var(--verse-list-width),40%)) minmax(0,1fr); }.verse-library { display:none; }#writer-library-toggle { display:block; }.library-open .song-verse-list { display:none; }.library-open .verse-library { display:block;grid-column:1;grid-row:1;padding:0;border-left:0; }.library-open .song-editor { grid-column:2; } }
@media(max-width:760px) { .song-writer-grid { display:flex;flex-direction:column;gap:10px; }.song-verse-list,.verse-library { display:none;max-height:35%;flex-shrink:0; }.list-open .song-verse-list { display:block; }.library-open .verse-library { display:block;order:-1;border-left:0;padding:0; }.library-open .song-verse-list { display:none; }#writer-list-toggle,#writer-library-toggle { display:block; }.song-editor { flex:1;min-height:0; }.song-verse-card p { white-space:pre; }.writer-song-tools { flex-wrap:wrap;margin:10px 0;font-size:10px;gap:7px; }.writer-song-tools #song-summary { flex-basis:100%; }.song-editor .device-feedback { max-height:52px;overflow:auto; } }
@media(max-width:600px) { body.studio #verse-workspace { width:100vw;padding:14px; }.device-prompt { padding:8px;margin:6px 0; }.device-actions { margin-top:7px;gap:6px; }.device-name { font-size:12px; }.device-prompt .verse-example,.device-prompt .verse-challenge { font-size:11px; }.device-actions button { font-size:10px;padding:7px; }.device-explorer { width:100vw;height:100dvh;border-radius:0;padding:16px; }.device-explorer h2 { font-size:20px; }.explorer-session-note { font-size:11px;margin:8px 0; }.device-stats { font-size:11px; }.explorer-grid { grid-template-columns:1fr;overflow:auto;gap:14px; }.device-results { max-height:180px;flex-shrink:0; }.device-detail { overflow:visible;border-left:0;border-top:1px solid var(--line);padding:12px 0; }.device-alphabet { gap:3px; }.device-alphabet button { padding:4px 6px; }.device-filter { max-width:130px;font-size:12px; }.device-search { width:100%; }.device-detail>p,.device-detail li { font-size:13px; }.device-detail h3 { font-size:18px; } }
.writer-compact .device-prompt { margin:4px 0;padding:5px 8px; }.writer-compact .device-prompt .verse-challenge { display:none; }.writer-compact .device-actions { margin:4px 0 0; }.writer-compact .device-feedback { display:none; }.writer-compact .writer-song-tools { display:none; }.writer-compact .writer-header .eyebrow { display:none; }
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:2px solid var(--lime);outline-offset:3px; }
body.studio #verse-workspace .device-prompt .verse-example { margin:5px 0 0;font-size:12px;line-height:1.5; }
body.studio #verse-workspace .device-actions button { font-size:12px;padding:8px 10px;line-height:1.4; }
body.studio #verse-workspace .device-prompt .verse-challenge { margin:6px 0;font-size:12px;line-height:1.5; }
@media(max-width:600px) { body.studio #verse-workspace .device-prompt .verse-example,body.studio #verse-workspace .device-prompt .verse-challenge { font-size:11px; }body.studio #verse-workspace .device-actions button { font-size:10px;padding:7px 8px; }.device-actions { flex-wrap:nowrap; } }
#dialog .flow-examples { display:flex;flex-direction:column;overflow:auto;gap:12px;min-height:0; }#dialog .flow-examples ol { margin:0; }#dialog .flow-examples li { white-space:pre-wrap;line-height:1.6;margin-bottom:12px; }#dialog .flow-examples img { max-height:220px;max-width:100%;object-fit:contain; }
body.studio #verse-workspace .device-prompt .verse-example { padding:0; }
body.studio #verse-workspace .writer-header h2 { margin:7px 0;font-size:24px; }
body.studio.flow:has(#verse-workspace:not([hidden])) .studio-header,body.studio.flow:has(#verse-workspace:not([hidden])) .web-toolbar { display:none; }
.song-controls { flex:1; }.song-controls>button,.song-play-actions { flex-shrink:0; }.song-play-actions { display:grid;grid-template-columns:1fr 1fr;gap:7px; }
body.studio .song-controls #main-device-progress { font-size:10px;padding:8px;line-height:1.4; }
body.studio .song-play-actions button { font-size:11px;padding:8px 5px;line-height:1.4; }
body.studio .song-controls #next-song { font-size:12px;padding:9px;line-height:1.4; }
/* Reserve the existing scrolling verse preview instead of squeezing it away. */
.song-main-verses { flex-shrink:0; }.song-controls { gap:5px;margin-top:8px; }
body.studio .creative-panel .verse-heading { margin-top:12px;padding-top:8px; }
body.studio .creative-panel .verse-heading .eyebrow { display:none; }body.studio .creative-panel .verse-heading h2 { font-size:17px;margin:0; }
body.studio #right .song-controls #open-writer { min-height:36px;padding:8px;font-size:12px;line-height:1.4; }
body.studio .song-controls #main-device-progress { padding:5px; }
body.song-activities-complete .answer-mode,body.song-activities-complete .answer-label,body.song-activities-complete #swagCheck { display:none; }
/* Feedback follows the current draft; its own scroller protects writing space. */
body.studio #verse-workspace .device-feedback { max-height:112px;overflow:auto;flex-shrink:0;font-size:11px;line-height:1.5;padding-right:5px; }
.device-feedback strong { color:var(--lime); }.device-feedback p { margin:5px 0; }.live-evidence { white-space:pre-wrap; }.revision-note,.draft-library-note { color:#d9f4a6; }.draft-library-note { display:block;margin-bottom:7px;font-size:10px; }
.device-feedback .device-line { background:#d8f7a2;color:#182413;padding:2px 3px;border-radius:3px;box-decoration-break:clone;-webkit-box-decoration-break:clone; }
@media(max-width:760px) { body.studio #verse-workspace .device-feedback { max-height:96px;font-size:10px; } }
body.studio #verse-workspace.writer-compact .device-feedback { display:block;max-height:38px;font-size:10px;margin:4px 0; }
#archive-editor .archive-feedback { max-height:120px;overflow:auto; }#archive-editor textarea { height:45%; }
.explorer-saved .device-line { background:#d8f7a2;color:#182413;padding:2px 3px;border-radius:3px;box-decoration-break:clone;-webkit-box-decoration-break:clone; }.explorer-saved details { margin:10px 0; }.explorer-saved summary { color:var(--lime);font-size:12px; }.explorer-saved details p { font-size:12px; }
body.studio .web-toolbar #web-devices { background:var(--lime);color:#202718;border-color:var(--lime);font-weight:bold; }
.example-row { display:flex;align-items:center;gap:9px; }.example-row .verse-example { flex:1;min-width:0; }.example-count { color:var(--muted);font-size:10px;white-space:nowrap; }
body.studio #verse-workspace #next-example { padding:5px 9px;border-radius:6px;font-size:18px;line-height:1.1;flex-shrink:0; }
.writer-compact .example-row { display:none; }
@media(max-width:600px) { body.studio .web-toolbar { flex-wrap:wrap;gap:5px;padding:8px; }.web-toolbar .web-status { flex-basis:100%; }body.studio .web-toolbar #web-devices { font-size:9px;padding:7px; } }
body.studio #studio-welcome { width:min(680px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);overflow:auto;padding:40px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:14px; }
#studio-welcome::backdrop { background:#101610; }
body.studio #studio-welcome h1 { font-size:clamp(36px,5vw,64px);line-height:1.03;margin:17px 0 22px; }
#studio-welcome h1 span { color:var(--lime); }
#studio-welcome p { font-size:14px;line-height:1.7;color:var(--muted);max-width:470px;margin:20px 0; }
body.studio #studio-welcome #welcome-continue { display:block;width:100%;background:var(--lime);color:#202718;padding:14px 18px;border:0;border-radius:8px;font-size:12px;font-weight:bold; }
#studio-welcome small { display:block;margin-top:20px;font-size:11px;color:var(--muted); }
@media(max-width:600px),(max-height:550px) { body.studio #studio-welcome { padding:24px; }body.studio #studio-welcome h1 { font-size:36px; }#studio-welcome p { font-size:12px; } }
.welcome-motion { display:none;position:fixed;inset:var(--welcome-header,80px) 0 var(--welcome-footer,52px);overflow:hidden;background:radial-gradient(ellipse at 65% 35%,#1b261e,#111812 70%);pointer-events:none;z-index:0; }
body.welcome-active .welcome-motion,body.flow:has(#welcome:not([hidden])) .welcome-motion { display:flex;flex-direction:column;justify-content:space-around; }
.motion-track { display:flex;width:max-content;animation:welcome-drift calc(85s + var(--row)*9s) linear infinite;transform:translateX(-50%);font-size:clamp(24px,3vw,48px);font-weight:850;letter-spacing:3px;line-height:1.2; }
.motion-group { display:flex;align-items:center;gap:75px;padding:0 38px;color:#334438;opacity:.66; }.motion-group span { display:inline-block;transform:rotate(-7deg); }.motion-group span:nth-child(even) { transform:rotate(4deg) translateY(9px); }.motion-group .motion-accent { color:var(--lime);opacity:.4; }
@keyframes welcome-drift { from { transform:translateX(-50%); }to { transform:translateX(0); } }
body.welcome-active .studio-grid { visibility:hidden;pointer-events:none; }
body.welcome-active .studio-header,body.welcome-active .web-toolbar,body.flow:has(#welcome:not([hidden])) .studio-header,body.flow:has(#welcome:not([hidden])) .web-toolbar { position:relative;z-index:20;background:#101610; }
body.welcome-active .web-toolbar { position:fixed;bottom:0; }
body.studio #studio-welcome[open] { position:fixed;z-index:5;top:calc(var(--welcome-header) + (100dvh - var(--welcome-header) - var(--welcome-footer))/2);left:50%;transform:translate(-50%,-50%);margin:0;max-height:calc(100dvh - var(--welcome-header) - var(--welcome-footer) - 28px);box-shadow:0 24px 75px #0005; }
body.flow #welcome { z-index:5; }body.flow #welcome .flow-welcome { max-height:100%;overflow:auto;box-shadow:0 24px 75px #0005; }
.music-world-note { display:flex;gap:14px;padding:15px 0;margin:6px 0 18px;border-top:1px solid var(--line); }.music-world-note>span { color:var(--lime);font-size:28px; }.music-world-note strong { font-size:14px;color:var(--ink); }
#studio-welcome .music-world-note p,.flow-welcome .music-world-note p { margin:7px 0 0;font-size:12px;line-height:1.6;max-width:490px; }
@media(prefers-reduced-motion:reduce) { .motion-track { animation:none; } }
@media(max-height:800px) { body.studio #studio-welcome h1,body.studio.flow .flow-welcome h1 { font-size:46px!important;margin:12px 0 16px; }body.studio #studio-welcome,body.studio.flow .flow-welcome { padding:28px; }.music-world-note { padding:12px 0;margin:4px 0 14px; } }
@media(max-width:600px) { body.studio #studio-welcome h1,body.studio.flow .flow-welcome h1 { font-size:34px!important; }body.studio #studio-welcome,body.studio.flow .flow-welcome { padding:22px; }.motion-group { gap:40px; }body.welcome-active .web-toolbar { position:fixed; } }
.motion-track { animation-delay:calc(var(--row)*-13s); }
body.welcome-active { overflow:hidden; }