/* Scoped tutorial UI. No changes to generator panels or their form controls. */
.canalai-training-menu,.canalai-training-dialog{--ct-bg:#fff;--ct-field:#f5f7fa;--ct-text:#172238;--ct-muted:#64748b;--ct-line:#d7dde5;--ct-blue:#2563eb;color:var(--ct-text);font:400 14px/1.6 Inter,Arial,sans-serif;box-sizing:border-box;color-scheme:light}
body.social-dark .canalai-training-menu,body.social-dark .canalai-training-dialog,html.social-dark .canalai-training-menu,html.social-dark .canalai-training-dialog{--ct-bg:#0d131c;--ct-field:#151e2b;--ct-text:#f1f5f9;--ct-muted:#a7b5c8;--ct-line:#3a475b;color-scheme:dark}
.canalai-training-menu{position:fixed;z-index:2147483000;margin:0;padding:6px;border:1px solid var(--ct-line);border-radius:12px;background:var(--ct-bg);box-shadow:0 14px 45px #0004;max-height:calc(100dvh - 24px);overflow:auto}
.canalai-training-menu[hidden]{display:none!important}
.canalai-training-menu button{display:block;box-sizing:border-box;width:100%;border:0;border-radius:8px;background:transparent;color:inherit;font:inherit;text-align:left;padding:11px 12px;cursor:pointer}
.canalai-training-menu button:hover,.canalai-training-menu button:focus-visible{background:var(--ct-field)}
.canalai-training-dialog{width:min(1060px,calc(100vw - 40px));max-width:none;height:min(850px,calc(100dvh - 40px));max-height:calc(100dvh - 40px);margin:auto;padding:0;border:1px solid var(--ct-line);border-radius:20px;background:var(--ct-bg);box-shadow:0 24px 100px #0005;overflow:hidden}
.canalai-training-dialog[open]{display:flex;flex-direction:column}
.canalai-training-dialog::backdrop{background:#040910ba;backdrop-filter:blur(4px)}
.canalai-training-dialog button{font:inherit;cursor:pointer}
.canalai-training-dialog button:focus-visible,.canalai-training-menu button:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
.training-header{display:flex;flex:0 0 auto;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px;border-bottom:1px solid var(--ct-line);font-size:11px;letter-spacing:1.2px;color:var(--ct-muted)}
.canalai-training-dialog .training-close{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;padding:0;border:0;border-radius:8px;background:var(--ct-field);color:var(--ct-text)}
.training-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.training-scroll{overflow:auto;overscroll-behavior:contain;min-height:0;flex:1;padding:24px;scrollbar-width:thin;scrollbar-color:var(--ct-muted) transparent}
.training-topics{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
.training-topics button{padding:7px 12px;border:1px solid var(--ct-line);border-radius:9px;background:var(--ct-field);color:var(--ct-text);font-size:12px}
.training-topics button[aria-current=page]{color:#fff;background:#2563eb;border-color:#2563eb}
.canalai-training-dialog h2{font-size:28px;line-height:1.25;margin:0 0 10px;color:var(--ct-text)}
.training-intro{margin:0 0 28px;color:var(--ct-muted);max-width:740px}
.training-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:32px;align-items:start}
.training-figure{margin:0;position:sticky;top:0;min-width:0}
.training-figure figcaption{color:var(--ct-muted);font-size:11px;margin:0 0 10px;text-transform:uppercase;letter-spacing:.6px}
.training-figure>p{font-size:11px;color:var(--ct-muted);margin:10px 0 0}
.training-diagram{padding:14px;border:1px solid var(--ct-line);border-radius:16px;background:var(--ct-field);font-size:11px;line-height:1.45;user-select:none}
.training-diagram i{display:inline-grid;place-items:center;width:18px;height:18px;flex-shrink:0;border:1px solid currentColor;border-radius:50%;font-style:normal;font-size:10px;margin-right:6px}
.training-model,.training-create{background:#2563eb;color:#fff;padding:9px 10px;border-radius:8px;display:flex;align-items:center;font-weight:600}
.training-model>span{margin-left:auto}
.training-label{display:flex;align-items:center;margin:14px 0 7px;color:var(--ct-muted)}
.training-prompt{min-height:90px;border:1px solid var(--ct-line);border-radius:9px;padding:10px;color:var(--ct-muted)}
.training-lyrics{margin-top:10px;min-height:50px}
.training-uploads,.training-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.training-uploads>div{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:58px;padding:6px;border:1px solid var(--ct-line);border-radius:9px;text-align:center;font-size:10px}
.training-uploads>div>span{font-size:18px}
.training-fields>div{padding:8px 6px;border:1px solid var(--ct-line);border-radius:8px;display:flex;justify-content:space-between;align-items:center;gap:4px;font-size:9px}
.training-modes{display:flex;gap:4px;margin:12px 0;border:1px solid var(--ct-line);border-radius:8px;padding:4px}
.training-modes span{flex:1;text-align:center;padding:5px;font-size:10px}.training-modes span:first-child{background:#2563eb25;border-radius:5px}
.training-create{justify-content:center;margin-top:12px}.training-diagram>small{display:block;text-align:center;color:var(--ct-muted);font-size:9px;margin-top:8px}
.training-steps{list-style:none;counter-reset:training-step;margin:0;padding:0}
.training-steps li{counter-increment:training-step;position:relative;padding-left:42px;margin:0 0 24px}
.training-steps li:before{content:counter(training-step);position:absolute;left:0;top:0;display:grid;place-items:center;width:28px;height:28px;background:#2563eb18;color:var(--ct-blue);border:1px solid #2563eb45;border-radius:9px;font-weight:600}
.canalai-training-dialog h3{font-size:15px;line-height:1.5;margin:0 0 6px;color:var(--ct-text)}
.training-article p{margin:0;overflow-wrap:anywhere}
.training-example,.training-tip{padding:18px;border:1px solid var(--ct-line);border-radius:12px;margin-top:16px;background:var(--ct-field)}
.training-example>div{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}.training-example h3{margin:0}
.training-example button{border:1px solid var(--ct-line);background:var(--ct-bg);color:var(--ct-text);border-radius:8px;padding:6px 10px;font-size:12px}
.training-example>small{display:block;margin-top:10px;color:var(--ct-muted);font-size:11px}
@media(max-width:700px){.canalai-training-dialog{width:calc(100vw - 20px);height:calc(100dvh - 20px);max-height:calc(100dvh - 20px);border-radius:16px}.training-header{padding:12px 16px}.training-scroll{padding:16px}.canalai-training-dialog h2{font-size:23px}.training-layout{grid-template-columns:1fr;gap:24px}.training-figure{position:static;max-width:300px;width:100%;margin:0 auto}.training-topics{gap:6px;margin-bottom:18px}.training-topics button{font-size:11px;padding:7px 9px}.training-intro{margin-bottom:20px}.training-steps li{padding-left:36px}.training-example>div{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){#canalaiTrainingTrigger .training-chevron{transition:none}}

/* Text-only help control beside the account menu, outside the sidebar. */
html body.social-page #canalaiTrainingTrigger{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:0;height:34px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:inherit;font:500 13px/1.2 Inter,Arial,sans-serif;white-space:nowrap;cursor:pointer}
html body.social-page #canalaiTrainingTrigger:hover,html body.social-page #canalaiTrainingTrigger[aria-expanded=true]{background:#64748b18}
html body.social-page #canalaiTrainingTrigger:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
@media(max-width:900px){html body.social-page .social-mobile-top #canalaiTrainingTrigger{font-size:11px;padding:0 4px;height:32px}}
/* Vector / HTML tutorial illustrations. These are deliberately non-interactive. */
.training-article{min-width:0}.training-extra{margin:0 0 28px}.training-extra>h3{font-size:18px;margin-bottom:8px}.training-article .td-caption{font-size:12px;line-height:1.6;color:var(--ct-muted);margin:8px 0 12px}.td-viewport{overflow:auto;max-width:100%;border:1px solid var(--ct-line);border-radius:14px;scrollbar-width:thin;scrollbar-color:var(--ct-muted) transparent;overscroll-behavior-x:contain}.td-viewport:focus-visible{outline:2px solid #2563eb;outline-offset:3px}.td-canvas{min-width:610px;color:var(--ct-text);font:400 10px/1.4 Inter,Arial,sans-serif;background:var(--ct-bg)}.td-window{padding:18px}.td-window-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px}.td-window-head b{font-size:20px;display:block}.td-window-head small{display:block;color:var(--ct-muted);margin-top:4px}.td-window-head>span{font-size:22px}.td-eyebrow{color:#3b82f6!important;letter-spacing:1px;font-size:9px;margin-bottom:6px}.td-flex{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.td-control{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:7px 9px;border:1px solid var(--ct-line);border-radius:7px;background:var(--ct-field);white-space:nowrap;font-size:10px;font-weight:500;box-sizing:border-box}.td-blue{background:#2563eb;border-color:#2563eb;color:#fff}.td-right{margin-left:auto}.td-score{padding:12px;background:var(--ct-field);border:1px solid var(--ct-line);border-radius:10px}.td-score>small{display:block;color:var(--ct-muted);margin:6px 0}.td-staff{width:100%;height:auto;display:block;margin:12px 0}.td-staff-lines{stroke:var(--ct-muted);stroke-width:.6;opacity:.45}.td-notes{fill:var(--ct-text);stroke:var(--ct-text);stroke-width:1}.td-notes .td-selected-note{fill:#2563eb;stroke:#2563eb}.td-note-mark{fill:#2563eb25;stroke:#2563eb;stroke-width:1}.td-scroll-line{height:4px;border-radius:3px;background:var(--ct-line);margin-bottom:14px}.td-note-label{display:block}.td-keyboard{position:relative;display:flex;height:124px;margin-top:18px;border:2px solid #8797aa;border-radius:8px;overflow:hidden;background:white}.td-white{flex:1;position:relative;background:linear-gradient(#fff,#edf0f4);border-right:1px solid #8d9aaa;border-radius:0 0 4px 4px;color:#364152}.td-white>span{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-size:9px}.td-white small{display:block;color:#8993a3;font-size:8px}.td-black{position:absolute;top:0;width:26px;height:78px;border-radius:0 0 4px 4px;background:linear-gradient(#222a34,#111820);border:1px solid #0d1118;box-shadow:0 2px 3px #0004}.td-black span{position:absolute;bottom:6px;left:0;right:0;text-align:center;color:#a4adbb;font-size:8px}.td-canvas .td-center{text-align:center;margin:12px 0;color:var(--ct-muted);font-size:10px}.td-six{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:16px}.td-six .td-control{padding:9px 4px;font-size:9px}.td-record-dot{width:8px;height:8px;border-radius:50%;background:#ff405b}.td-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--ct-line);margin-top:18px;padding-top:14px}.td-footer>small{color:var(--ct-muted);font-size:9px}.td-info{padding:12px;border:1px solid #2563eb44;border-radius:10px;background:var(--ct-field);margin-bottom:12px}.td-info small{display:block;color:var(--ct-muted);margin-top:5px}.td-character{display:grid;grid-template-columns:12px 42px minmax(130px,1fr) minmax(100px,1fr) 28px 12px;gap:10px;align-items:center;padding:12px;border:1px solid var(--ct-line);background:var(--ct-field);border-radius:12px;margin:10px 0}.td-check{width:10px;height:10px;border:1px solid var(--ct-muted);border-radius:50%;display:grid;place-items:center;font-size:8px}.td-checked{background:#2563eb;border-color:#2563eb;color:white}.td-avatar{display:grid;place-items:center;width:42px;height:42px;background:#6c4b70;color:#fff;border-radius:50%;font-weight:600}.td-avatar-1{background:#353459}.td-avatar-2{background:#7e6051}.td-name{background:var(--ct-bg);border:1px solid var(--ct-line);border-radius:7px;padding:8px;font-size:12px;font-weight:600}.td-identity small{font-size:8px;color:var(--ct-muted);display:block;margin-top:3px}.td-voice-wave{width:100%;height:30px;display:block;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}.td-audio{text-align:center}.td-audio small{font-size:8px}.td-play{display:grid;place-items:center;border-radius:50%;width:28px;height:28px;background:#2563eb;color:#fff;font-size:23px;line-height:1}.td-disabled{opacity:.4}.td-delete{font-size:18px;color:var(--ct-muted)}.td-character-actions{grid-column:3 / -1;display:flex;align-items:center;flex-wrap:wrap;gap:6px}.td-character-actions .td-control{font-size:8px;padding:7px}.td-character-actions small{font-size:8px;color:var(--ct-muted)}.td-add{padding:10px;text-align:center;border:1px dashed var(--ct-line);border-radius:8px;margin-top:12px;color:var(--ct-muted)}
.td-effects-canvas{min-width:900px}.td-presets{display:flex;gap:5px;margin-bottom:10px}.td-presets .td-control{border-radius:20px;padding:4px 7px;font-size:8px}.td-preset-active{background:var(--ct-line)}.td-effect-columns{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}.td-effect-group{border:1px solid var(--ct-line);border-radius:12px;padding:9px;background:var(--ct-field)}.td-effect-group header{display:flex;align-items:start;justify-content:space-between;gap:4px;margin-bottom:8px;line-height:1.1}.td-effect-group header b{font-size:10px}.td-effect-group header small{font-size:8px;white-space:nowrap;color:var(--ct-muted)}.td-effect-row{display:grid;grid-template-columns:10px 1fr auto;gap:5px;align-items:center;min-height:22px;font-size:9px;line-height:1.2}.td-radio{width:9px;height:9px;border:1px solid var(--ct-muted);border-radius:50%}.td-radio-on{background:var(--ct-muted);box-shadow:inset 0 0 0 2px var(--ct-field)}.td-effect-row small{font-size:8px;color:var(--ct-muted)}.td-intensity{padding:20px 0;width:66%;font-size:10px;color:var(--ct-muted)}.td-intensity b>span{margin-left:12px}.td-slider{height:2px;background:var(--ct-muted);position:relative;margin-top:16px}.td-slider i{position:absolute;left:50%;top:-6px;width:14px;height:14px;background:var(--ct-muted);border-radius:50%}.td-ticks{display:flex;justify-content:space-between;margin-top:6px;font-size:8px}

/* Upload tutorial illustration: HTML and inline SVG, no media requests. */
.training-upload-guide .tu-layout{display:grid;grid-template-columns:minmax(220px,285px) minmax(0,1fr);gap:22px;align-items:start}
.training-upload-guide .tu-panel{margin:0;padding:14px;border:1px solid var(--ct-line);border-radius:14px;background:var(--ct-bg);min-width:0}
.training-upload-guide .tu-launchers{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.training-upload-guide .tu-launchers>span{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;border:1px solid var(--ct-line);border-radius:10px;padding:9px 4px;font-size:10px;text-align:center}
.training-upload-guide .tu-launchers svg{width:28px;height:23px;fill:none;stroke:currentColor;stroke-width:1.4}
.training-upload-guide .tu-attachment{margin-top:12px;padding:10px;border:1px solid var(--ct-line);border-radius:10px}
.training-upload-guide .tu-attachment>div:first-child{display:flex;justify-content:space-between;gap:8px;font-size:11px}
.training-upload-guide .tu-player{display:flex;align-items:center;gap:9px;margin-top:12px;background:#f1f3f4;color:#202124;border-radius:25px;padding:7px 10px;font:11px/1.5 Arial,sans-serif}
.training-upload-guide .tu-track{height:3px;flex:1;background:#777;min-width:15px}
.training-upload-guide .tu-ready{font-size:11px;line-height:1.6;color:var(--ct-muted)}
.training-upload-guide .tu-tabs{display:flex;border:1px solid var(--ct-line);border-radius:10px;padding:4px;gap:4px;font-size:11px}
.training-upload-guide .tu-tabs>span{flex:1;padding:4px;text-align:center}
.training-upload-guide .tu-tabs>span:first-child{background:#2563eb;color:#fff;border-radius:7px}
.training-upload-guide .tu-label{display:block;font-size:11px;color:var(--ct-muted);margin:12px 0 5px}
.training-upload-guide .tu-lyrics{border:1px solid var(--ct-line);border-radius:12px;padding:10px;color:var(--ct-muted);font-size:12px;line-height:1.55}
.training-upload-guide figcaption{font-size:10px;line-height:1.5;color:var(--ct-muted);margin-top:12px}
.training-upload-guide .tu-instructions ol{padding-left:20px;margin:0}
.training-upload-guide .tu-instructions li{margin-bottom:12px;font-size:13px;line-height:1.65}
@media(max-width:1050px){.training-upload-guide .tu-layout{grid-template-columns:1fr}.training-upload-guide .tu-panel{width:100%;max-width:285px;box-sizing:border-box}}

.training-vocal-guide{margin:24px 0}.training-vocal-guide li{margin:10px 0}.training-vocal-preview{padding:18px;border:1px solid var(--ct-line);border-radius:14px;background:var(--ct-bg);color:var(--ct-text)}.training-vocal-preview h3{margin:10px 0 16px}.training-vocal-preview h4{margin:8px 0}.training-vocal-modes{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.training-vocal-chip{display:flex;align-items:center;justify-content:center;padding:8px;border:1px solid var(--ct-line);border-radius:8px;font-size:12px;text-align:center}.training-vocal-chip.selected{background:#2563eb;border-color:#2563eb;color:white}.training-vocal-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.training-vocal-pair section{padding:12px;border:1px solid var(--ct-line);border-radius:10px;min-width:0}.training-vocal-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}.training-vocal-backing{padding:12px;border:1px solid var(--ct-line);border-radius:10px;margin:12px 0}.training-vocal-backing small{display:block;color:var(--ct-muted)}.training-vocal-footer{display:flex;justify-content:space-between;gap:12px}@media(max-width:600px){.training-vocal-pair{grid-template-columns:1fr}.training-vocal-modes{grid-template-columns:1fr 1fr}}

.canalai-training-menu button{display:flex;align-items:center;gap:10px}.training-menu-icon{display:block;width:20px;height:20px;object-fit:contain;flex:0 0 20px}.social-dark .training-menu-icon{filter:brightness(0) invert(1)}
html body :is(.music-vocal-dialog,.suno-details-dialog,.suno-cover-dialog,.suno-rename-dialog) .catalog-close,html body .melody-dialog .melody-close{display:grid!important;place-items:center!important;box-sizing:border-box!important;flex:0 0 32px!important;width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;max-width:32px!important;max-height:32px!important;padding:0!important;border:0!important;border-radius:8px!important;background:#f5f7fa!important;color:#172238!important;box-shadow:none!important}
html body :is(.music-vocal-dialog,.suno-details-dialog,.suno-cover-dialog,.suno-rename-dialog) .catalog-close svg,html body .melody-dialog .melody-close svg{width:18px!important;height:18px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.5!important;stroke-linecap:round!important}
html.social-dark body :is(.music-vocal-dialog,.suno-details-dialog,.suno-cover-dialog,.suno-rename-dialog) .catalog-close,html.social-dark body .melody-dialog .melody-close,html body.social-dark :is(.music-vocal-dialog,.suno-details-dialog,.suno-cover-dialog,.suno-rename-dialog) .catalog-close,html body.social-dark .melody-dialog .melody-close{background:#151e2b!important;color:#f1f5f9!important}

/* Lyrics tutorial: a live HTML/CSS panel fragment, isolated from generator controls. */
.canalai-training-dialog .training-lyrics-preview{padding:14px;border:1px solid var(--ct-line);border-radius:16px;background:var(--ct-bg);color:var(--ct-text);font-size:13px;line-height:1.45;box-sizing:border-box}
.canalai-training-dialog .training-lyrics-tabs{display:flex;gap:4px;padding:4px;border:1px solid var(--ct-line);border-radius:10px;margin:0 0 12px}
.canalai-training-dialog .training-lyrics-tabs>span{flex:1;min-width:0;text-align:center;padding:5px 2px;border-radius:6px;color:var(--ct-muted);font-size:12px}
.canalai-training-dialog .training-lyrics-tabs>span:first-child{background:#2563eb25;color:var(--ct-blue)}
.canalai-training-dialog .training-lyrics-label{color:var(--ct-muted);margin-bottom:6px;font-size:12px}
.canalai-training-dialog .training-lyrics-input{position:relative;min-height:112px;box-sizing:border-box;padding:11px 12px 20px;border:1px solid var(--ct-line);border-radius:11px;background:var(--ct-field);color:var(--ct-muted);overflow-wrap:anywhere}
.canalai-training-dialog .training-lyrics-grip{position:absolute;right:4px;bottom:4px;width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1;opacity:.8}
.canalai-training-dialog .training-lyrics-example>p{white-space:pre-wrap}

/* Song arrangement case study; only the Lyrics tutorial uses these classes. */
.canalai-training-dialog .training-song-case{margin-top:28px;min-width:0}
.canalai-training-dialog .training-song-case h3{font-size:18px;line-height:1.45;margin:0 0 10px}
.canalai-training-dialog .training-song-case h4{font-size:14px;line-height:1.5;margin:0 0 7px;color:var(--ct-text)}
.canalai-training-dialog .training-song-copy>div{align-items:flex-start;flex-wrap:wrap}
.canalai-training-dialog .training-song-copy h4{flex:1 1 180px;margin:0}
.canalai-training-dialog .training-song-copy button{flex:0 0 auto}
.canalai-training-dialog .training-song-copy>p{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit}
.canalai-training-dialog .training-song-analysis{margin-top:30px}
.canalai-training-dialog .training-song-transitions{margin-top:24px}
.canalai-training-dialog .training-song-tag{color:var(--ct-muted);font-size:12px;line-height:1.6;overflow-wrap:anywhere;margin:0 0 8px}
.canalai-training-dialog .training-song-source{font-size:12px;color:var(--ct-muted);margin:18px 0 0;overflow-wrap:anywhere}
.canalai-training-dialog .training-song-source a{color:inherit;text-decoration:underline;text-underline-offset:3px}