/* All application styles are loaded inside the component's Shadow DOM. */
.srai-page { margin: 0; background: #0b0e0b; color: #eaf0e7; color-scheme: dark; }
.srai-page noscript { display: block; padding: 2rem; font-family: system-ui, sans-serif; }
:host { --bg:#0b0e0b; --panel:#111611; --panel-raised:#171d16; --line:#293026; --muted:#9ba694; --text:#eef1ea; --green:#c5ff63; --green-dark:#1b2c0b; --red:#ff9e96; display:block; color:var(--text); font:14px/1.5 "Segoe UI",Arial,sans-serif; color-scheme:dark; min-height:100vh; background:var(--bg); }
* { box-sizing:border-box; }
button,input,select,textarea { font:inherit; }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.4; }
button,a { touch-action:manipulation; }
:focus-visible { outline:2px solid var(--green); outline-offset:4px; }
a { color:inherit; }
button { color:inherit; }
svg { display:block; flex-shrink:0; }
[hidden] { display:none!important; }
.app { min-height:100vh; display:grid; grid-template-columns:218px minmax(0,1fr); }
.sidebar { border-right:1px solid var(--line); padding:32px 22px 24px; display:flex; flex-direction:column; gap:36px; background:#0d110d; }
.brand { display:flex; align-items:center; gap:10px; line-height:1.2; font-weight:750; font-size:16px; letter-spacing:-.5px; }
.brand-mark { width:37px; height:40px; color:var(--green); }
.brand small { color:var(--muted); display:block; font:10px/1.6 "Segoe UI",sans-serif; letter-spacing:2.1px; text-transform:uppercase; }
.nav-label,.eyebrow,.control-label { color:var(--muted); font-size:10px; font-weight:650; letter-spacing:1.6px; text-transform:uppercase; }
.nav-label { padding:0 10px; margin-bottom:10px; }
.nav-list { display:grid; gap:7px; }
.nav-button { display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:transparent; border:1px solid transparent; border-radius:8px; padding:12px 10px; color:#a6b19e; font-size:12px; font-weight:600; }
.nav-button:hover { background:#181e16; color:var(--text); }
.nav-button.active { background:#1e2a13; border-color:#354b20; color:var(--green); }
.nav-button svg { width:18px; height:18px; }
.nav-button .soon { margin-left:auto; font-size:9px; letter-spacing:.5px; }
.sidebar-bottom { margin-top:auto; }
.plan-card { border:1px solid #344329; background:linear-gradient(145deg,#1c2714,#11170e); padding:16px 14px; border-radius:10px; }
.plan-card .spark { color:var(--green); margin-bottom:12px; }
.plan-card strong { font-size:12px; }
.plan-card p { font-size:11px; color:var(--muted); line-height:1.65; margin:8px 0 14px; }
.plan-card button { font-size:11px; width:100%; padding:9px; background:#273b16; border:1px solid #46622b; color:var(--green); border-radius:5px; font-weight:650; }
.sidebar-foot { display:flex; align-items:center; gap:7px; font-size:10px; color:#77816f; margin:18px 4px 0; }
.status-dot { width:6px; height:6px; border-radius:100%; background:var(--green); display:inline-block; }
.shell { min-width:0; }
.topbar { height:78px; padding:0 40px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.breadcrumbs { color:#718069; display:flex; align-items:center; gap:13px; font-size:11px; }
.breadcrumbs strong { font-weight:500; color:#d1dac9; }
.top-actions { display:flex; gap:12px; align-items:center; }
.session-pill { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:10px; border:1px solid var(--line); border-radius:20px; padding:6px 10px; }
.icon-button { background:none; border:1px solid var(--line); border-radius:7px; width:32px; height:32px; display:grid; place-items:center; }
.icon-button:hover { border-color:#708559; color:var(--green); }
.icon-button svg { width:15px; height:15px; }
.avatar { background:#25341b; color:var(--green); height:31px; width:31px; border:1px solid #465a32; border-radius:100%; display:grid; place-items:center; font-size:11px; font-weight:750; }
main { max-width:1460px; margin:auto; padding:38px 40px 28px; }
.intro { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:26px; }
.eyebrow { display:flex; align-items:center; gap:9px; color:var(--green); margin-bottom:9px; font-size:9px; letter-spacing:2.2px; }
h1 { margin:0; font-size:clamp(28px,2.8vw,40px); line-height:1.16; letter-spacing:-1.6px; font-weight:600; }
h1 em { font-style:normal; color:var(--green); }
.intro p { color:var(--muted); font-size:12px; margin:12px 0 0; }
.intro-note { font-size:10px; line-height:1.8; color:#7f8c76; text-align:right; padding-bottom:3px; }
.intro-note strong { color:#b4c2a8; font-weight:500; }
.auth-banner { background:#151e11; border:1px solid #3b4f2b; border-radius:9px; padding:15px 18px; margin-bottom:20px; display:flex; gap:18px; justify-content:space-between; align-items:center; }
.auth-banner strong { font-size:12px; }
.auth-banner p { margin:3px 0 0; color:var(--muted); font-size:11px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:9px; border-radius:6px; font-weight:650; font-size:12px; padding:11px 16px; border:1px solid var(--line); background:#1b2218; text-decoration:none; transition:background .15s,border-color .15s; white-space:nowrap; }
.button:hover:not(:disabled) { background:#293523; border-color:#64754f; }
.button.primary { color:#172006; background:var(--green); border-color:var(--green); }
.button.primary:hover:not(:disabled) { background:#d5ff95; border-color:#d5ff95; }
.button.secondary { background:transparent; color:#d5ddce; }
.button.small { font-size:11px; padding:8px 11px; }
.button svg { width:15px; height:15px; }
.message { margin-bottom:18px; padding:12px 14px; font-size:12px; border-radius:7px; border:1px solid #6c3c36; color:#ffd6d0; background:#271915; display:flex; justify-content:space-between; align-items:flex-start; gap:15px; overflow-wrap:anywhere; }
.message.success { background:#192711; border-color:#496133; color:#d4f4ad; }
.message button { border:0; background:transparent; font-size:17px; line-height:1; }
.workbench { display:grid; grid-template-columns:minmax(0,1fr) 288px; align-items:start; gap:20px; }
.workspace,.rack,.result-panel,.history-panel { border:1px solid var(--line); background:var(--panel); border-radius:11px; overflow:hidden; }
.workspace-header { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:18px 21px; border-bottom:1px solid var(--line); }
.workspace-title { display:flex; align-items:center; gap:10px; }
.workspace-title svg { color:var(--green); width:17px; height:17px; }
h2,h3 { margin:0; font-size:13px; font-weight:600; letter-spacing:-.1px; }
.badge { font-size:9px; font-weight:600; color:#90a080; border:1px solid #384430; border-radius:4px; padding:3px 6px; letter-spacing:.6px; }
.operation-tabs { display:grid; grid-template-columns:repeat(3,1fr); padding:7px; gap:5px; margin:17px 20px 0; background:#0a0e09; border:1px solid #242c20; border-radius:7px; }
.operation-tab { background:transparent; border:1px solid transparent; border-radius:4px; padding:10px 7px; display:flex; align-items:center; justify-content:center; gap:7px; font-size:11px; color:#8e9b83; font-weight:600; }
.operation-tab svg { width:14px; height:14px; }
.operation-tab[aria-selected="true"] { color:var(--green); background:#1b2614; border-color:#35482a; }
.workspace-body { padding:20px; }
.dropzone { position:relative; width:100%; min-height:186px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:25px 15px; border:1px dashed #4a5d39; background:radial-gradient(ellipse at center,#182110 0%,#10150e 68%); border-radius:8px; color:var(--text); }
.dropzone:hover,.dropzone.dragging { border-color:var(--green); background:#1b2811; }
.upload-symbol { border:1px solid #435531; box-shadow:0 0 27px #a8eb3810; width:44px; height:44px; border-radius:10px; display:grid; place-items:center; color:var(--green); background:#1e2a15; margin-bottom:13px; }
.upload-symbol svg { width:22px; height:22px; }
.dropzone strong { font-size:13px; font-weight:600; }
.dropzone .choose { color:var(--green); text-decoration:underline; text-underline-offset:3px; }
.dropzone small { font-size:10px; color:#7f8f73; margin-top:7px; }
.upload-status { color:var(--green); font-size:11px; margin:12px 0 0; }
.demo-action { display:flex; justify-content:center; margin-top:11px; }
.demo-button { border:0; background:none; color:#a0b889; font-size:10px; display:flex; align-items:center; gap:6px; padding:5px; }
.demo-button:hover { color:var(--green); }
.demo-button svg { width:12px; height:12px; }
.track-toolbar { display:flex; justify-content:space-between; gap:10px; align-items:center; margin-top:19px; margin-bottom:12px; }
.track-toolbar .control-label { font-size:9px; letter-spacing:1.2px; }
.track-list { display:grid; gap:10px; }
.track { border:1px solid var(--line); border-radius:7px; background:#0d120c; overflow:hidden; }
.track-top { padding:12px; display:flex; align-items:center; gap:10px; }
.track-checkbox { accent-color:var(--green); width:15px; height:15px; flex-shrink:0; margin:0; }
.track-info { min-width:0; flex:1; }
.track-name { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; font-size:11px; }
.track-meta { color:#7e8f72; font-size:9px; margin-top:3px; display:block; }
.track-play { width:30px; height:30px; color:var(--green); }
.waveform { min-height:68px; border-top:1px solid #1e271a; position:relative; background:repeating-linear-gradient(to right,transparent 0,transparent calc(25% - 1px),#27312180 calc(25% - 1px),#27312180 25%); }
.waveform svg { width:100%; height:66px; }
.waveform-line { stroke:#34422b; stroke-width:1; }
.waveform-bar { stroke:var(--green); stroke-linecap:round; stroke-width:1.8; }
.waveform-empty { min-height:113px; margin-top:18px; border:1px solid #212b1b; border-radius:7px; background:repeating-linear-gradient(to right,transparent 0,transparent calc(10% - 1px),#20291b60 calc(10% - 1px),#20291b60 10%),repeating-linear-gradient(to bottom,transparent 0,transparent 27px,#20291b70 27px,#20291b70 28px); display:grid; place-items:center; position:relative; }
.waveform-empty::before { content:""; position:absolute; width:100%; height:1px; background:#455c32; opacity:.5; }
.waveform-empty span { font-size:9px; color:#778a68; background:#111710; padding:5px 11px; z-index:1; letter-spacing:1px; text-transform:uppercase; }
.track-mix { border-top:1px solid #273021; padding:11px 12px; display:grid; grid-template-columns:1fr 1fr; gap:9px 14px; }
.track-mix label { display:flex; align-items:center; gap:8px; font-size:10px; color:#98a68c; }
.track-mix label span { min-width:27px; }
.track-mix input[type="range"] { min-width:0; width:100%; }
.track-mix output { min-width:38px; font-variant-numeric:tabular-nums; text-align:right; color:#cad9be; }
.track-mix select { width:100%; padding:5px 8px; font-size:10px; background:#1b2416; border:1px solid #36452c; border-radius:4px; }
.mute-control { justify-content:flex-end; }
.mute-control input { accent-color:var(--green); }
.mix-note,.provider-note { font-size:10px; color:#9ba891; line-height:1.7; margin:12px 0 0; }
.section-title { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.rack-head { padding:18px 18px 14px; border-bottom:1px solid var(--line); }
.rack-head svg { width:15px; height:15px; color:#91a67f; }
.rack-body { padding:17px 18px; }
.preset-options { display:grid; gap:7px; margin:11px 0 21px; }
.preset-option { display:flex; align-items:center; gap:10px; border:1px solid #303a29; background:#141b10; border-radius:6px; padding:10px 11px; cursor:pointer; }
.preset-option:has(input:checked) { border-color:#6b8d44; background:#1a2911; }
.preset-option input { accent-color:var(--green); width:12px; height:12px; }
.preset-option strong { font-size:11px; font-weight:600; display:block; }
.preset-option small { font-size:9px; color:#8c9b80; display:block; margin-top:1px; }
.preset-icon { margin-left:auto; color:#87b74b; }
.preset-icon svg { width:22px; height:18px; }
.control { margin:0 0 19px; }
.control-top { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; font-size:11px; }
.control-top label { color:#bdc9b3; }
.control-top output { color:var(--green); font-size:10px; font-variant-numeric:tabular-nums; }
input[type="range"] { width:100%; height:4px; accent-color:var(--green); cursor:pointer; }
.range-labels { display:flex; justify-content:space-between; font-size:9px; color:#718166; margin-top:7px; }
.control-help { font-size:9px; color:#829178; margin-top:6px; line-height:1.6; }
.divider { border:0; border-top:1px solid var(--line); margin:20px 0 17px; }
.format-options { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:9px; }
.format-options label { border:1px solid #34402c; padding:8px; border-radius:5px; display:flex; gap:7px; align-items:center; font-size:10px; color:#b9c5ad; cursor:pointer; }
.format-options label:has(input:checked) { border-color:#5d793e; background:#1d2a15; color:var(--green); }
.format-options input { accent-color:var(--green); width:11px; height:11px; margin:0; }
.run-button { width:100%; margin-top:20px; padding:12px 9px; }
.run-note { font-size:9px; color:#7e8d73; text-align:center; margin:9px 0 0; line-height:1.6; }
.generation-panel { margin-top:19px; padding-top:17px; border-top:1px solid var(--line); }
.field { display:grid; gap:7px; margin-bottom:15px; }
.field label { font-size:11px; color:#c1ceb6; }
.field input,.field select,.field textarea { width:100%; border-radius:6px; border:1px solid #3b4832; background:#0c110a; color:var(--text); padding:10px 12px; }
.field textarea { min-height:96px; resize:vertical; font-size:12px; line-height:1.7; }
.field small { color:#87967c; font-size:10px; }
.generation-warning { border-left:2px solid #7c965c; padding:8px 10px; color:#b5c5a6; font-size:11px; background:#192015; margin-bottom:14px; }
.workspace-footer { border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:12px 20px; gap:12px; font-size:9px; color:#77886b; }
.workspace-footer span { display:flex; gap:6px; align-items:center; }
.workspace-footer svg { width:12px; height:12px; color:#95a887; }
.result-panel { margin-top:20px; }
.result-head { padding:17px 20px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }
.result-head h2 { display:flex; align-items:center; gap:9px; }
.result-head h2 svg { color:var(--green); width:15px; height:15px; }
.result-body { padding:18px 20px; }
.result-idle { display:flex; align-items:center; gap:14px; padding:4px 0; }
.idle-icon { width:35px; height:35px; border:1px solid #34422a; display:grid; place-items:center; border-radius:100%; color:#718563; }
.idle-icon svg { width:17px; height:17px; }
.result-idle p { margin:0; font-size:11px; color:#9bac8e; }
.result-idle small { display:block; color:#728367; font-size:10px; margin-top:3px; }
.progress-meta { display:flex; justify-content:space-between; color:#b8c7ac; font-size:11px; gap:10px; }
progress { appearance:none; border:none; display:block; height:5px; width:100%; margin:13px 0 5px; border-radius:5px; overflow:hidden; background:#293721; accent-color:var(--green); }
progress::-webkit-progress-bar { background:#293721; }
progress::-webkit-progress-value { background:var(--green); }
progress::-moz-progress-bar { background:var(--green); }
.progress-note { font-size:10px; color:#7e9270; margin-top:9px; }
.player-row { display:flex; align-items:center; gap:13px; margin:10px 0 15px; }
.play-main { background:var(--green); color:#172208; border:0; width:36px; height:36px; border-radius:100%; display:grid; place-items:center; flex-shrink:0; }
.play-main svg { width:16px; height:16px; }
.ab-switch { display:flex; border:1px solid #415233; padding:3px; border-radius:5px; }
.ab-switch button { background:none; border:0; border-radius:3px; color:#a0b18f; padding:5px 9px; font-size:10px; }
.ab-switch button[aria-pressed="true"] { background:#293d19; color:var(--green); }
.player-time { color:#8d9e7f; font-variant-numeric:tabular-nums; font-size:10px; margin-left:auto; }
.seek { flex:1; min-width:35px; }
.metrics { display:flex; flex-wrap:wrap; gap:17px; margin:14px 0 16px; }
.metric { font-size:10px; color:#899b7a; }
.metric strong { font-size:12px; color:#d7e4cc; font-weight:500; margin-right:4px; }
.result-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.result-bottom p { margin:0; font-size:10px; color:#8b9d7c; }
.history-panel { margin-top:20px; }
.history-head { padding:16px 20px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.history-list { padding:0 20px; }
.history-row { display:flex; gap:12px; align-items:center; padding:13px 0; border-bottom:1px solid #252e20; }
.history-row:last-child { border:0; }
.history-row .history-info { flex:1; min-width:0; }
.history-info strong { display:block; font-size:11px; font-weight:500; }
.history-info small { color:#809270; font-size:9px; }
.history-status { font-size:9px; color:#a6be91; }
.history-empty { padding:19px 0; margin:0; color:#8a9a7e; font-size:11px; }
.main-footer { display:flex; justify-content:space-between; align-items:center; gap:15px; padding-top:25px; color:#59674f; font-size:9px; }
.main-footer span { display:flex; align-items:center; gap:6px; }
.main-footer svg { width:11px; height:11px; }
dialog { background:#121910; color:var(--text); border:1px solid #455a32; border-radius:13px; padding:0; width:min(640px,calc(100vw - 32px)); max-height:calc(100vh - 50px); overflow-y:auto; box-shadow:0 30px 100px #0009; }
dialog::backdrop { background:#030702c9; backdrop-filter:blur(4px); }
.dialog-head { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:22px 24px; border-bottom:1px solid var(--line); }
.dialog-head h2 { font-size:19px; letter-spacing:-.5px; }
.dialog-body { padding:22px 24px; }
.dialog-body>p { color:#a7b59b; font-size:12px; margin:0 0 20px; }
.billing-choice { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:16px 0; }
.price-card { border:1px solid #455a33; border-radius:9px; padding:17px; background:#172311; }
.price-card .period { font-size:10px; color:#abbe9a; text-transform:uppercase; letter-spacing:1px; }
.price-card strong { display:block; margin:14px 0; font-size:24px; font-weight:550; color:var(--green); letter-spacing:-1px; }
.price-card .button { width:100%; font-size:11px; margin-top:10px; }
.included { padding:0; list-style:none; color:#bbcdb0; font-size:11px; margin:0 0 20px; }
.included li { display:flex; gap:8px; align-items:center; margin:9px 0; }
.included svg { color:var(--green); width:14px; height:14px; }
.billing-note { font-size:11px; color:#9cac8e; line-height:1.7; }
.admin-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.admin-services { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.admin-services .badge { color:#acc29a; }
.checkbox-label { display:flex; align-items:center; gap:9px; font-size:12px; margin-bottom:20px; }
.checkbox-label input { accent-color:var(--green); }
.modal-error { color:#ffb1a9; font-size:11px; padding:11px; border:1px solid #6e3b33; border-radius:5px; margin:12px 0; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.spinner { animation:spin 1.3s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@media(min-width:1600px) { main { padding-top:48px; } .intro { margin-bottom:34px; } .workbench { grid-template-columns:minmax(0,1fr) 320px; gap:24px; } .dropzone { min-height:210px; } }
@media(max-width:1180px) { .app { grid-template-columns:176px minmax(0,1fr); } .sidebar { padding:27px 14px 20px; } .brand { font-size:14px; } .brand-mark { width:31px; } .brand small { font-size:8px; letter-spacing:1.8px; } .topbar { padding:0 24px; } main { padding:30px 24px 22px; } .workbench { grid-template-columns:minmax(0,1fr) 260px; gap:15px; } .intro-note { display:none; } .workspace-body { padding:16px; } .operation-tabs { margin:15px 16px 0; } .operation-tab { font-size:10px; } .rack-body { padding:15px; } }
@media(max-width:940px) { .app { grid-template-columns:72px minmax(0,1fr); } .sidebar { padding:27px 11px 20px; align-items:center; } .brand-text,.nav-label,.nav-button span,.plan-card,.sidebar-foot { display:none; } .nav-button { justify-content:center; padding:13px; } .sidebar-bottom { width:100%; } .nav-button svg { width:19px; height:19px; } .brand { margin-bottom:8px; } .brand-mark { width:38px; } .workbench { grid-template-columns:minmax(0,1fr) 252px; } .track-mix { grid-template-columns:1fr; } .mute-control { justify-content:flex-start; } }
@media(max-width:760px) { .app { display:block; } .sidebar { padding:13px 18px; flex-direction:row; justify-content:space-between; border-right:0; border-bottom:1px solid var(--line); gap:15px; } .brand { margin:0; } .brand-text { display:block; } .brand-mark { width:29px; height:30px; } .brand-text { font-size:13px; } .brand small { font-size:7px; } .nav-list { display:flex; gap:5px; } .nav-button { padding:9px; } .sidebar-bottom { display:none; } .topbar { height:52px; padding:0 18px; } .session-pill { font-size:9px; padding:4px 8px; } .top-actions { gap:7px; } .avatar { width:26px; height:26px; font-size:9px; } main { padding:25px 18px; } .intro { margin-bottom:23px; } h1 { font-size:31px; } .intro p { font-size:11px; } .eyebrow { font-size:8px; letter-spacing:1.6px; } .workbench { grid-template-columns:1fr; gap:16px; } .rack-body { display:grid; grid-template-columns:1fr 1fr; column-gap:23px; padding:19px; } .preset-container,.generation-rack,.rack-action,.rack-format { grid-column:1/-1; } .preset-options { grid-template-columns:repeat(3,1fr); margin-bottom:18px; } .preset-option { padding:8px; gap:6px; } .preset-option small { font-size:8px; } .preset-icon { display:none; } .preset-option strong { font-size:10px; } .preset-option input { margin:0; } .rack-divider { display:none; } .control { margin-bottom:15px; } .format-options { max-width:280px; } .run-button { margin-top:17px; } .track-mix { grid-template-columns:1fr 1fr; } .mute-control { justify-content:flex-end; } .auth-banner { align-items:flex-start; flex-direction:column; gap:11px; } .auth-banner .button { width:100%; } .main-footer { flex-direction:column; align-items:flex-start; gap:7px; } .workspace-footer { font-size:8px; padding:11px 16px; } .workspace-header { padding:16px; } .history-list { padding:0 15px; } .history-status { display:none; } }
@media(max-width:440px) { .breadcrumbs { font-size:10px; gap:9px; } .topbar { padding:0 13px; } main { padding:24px 13px; } .session-pill .session-label { max-width:92px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .workspace-body { padding:13px; } .operation-tabs { margin:13px 13px 0; gap:2px; padding:4px; } .operation-tab { padding:10px 4px; font-size:9px; gap:5px; } .operation-tab svg { width:12px; height:12px; } .dropzone { min-height:180px; } .dropzone strong { font-size:12px; } .dropzone small { font-size:9px; } .rack-body { column-gap:15px; padding:15px; } .preset-option { gap:4px; } .track-mix { grid-template-columns:1fr; } .mute-control { justify-content:flex-start; } .result-body { padding:15px; } .player-row { flex-wrap:wrap; } .seek { order:5; flex-basis:100%; } .billing-choice { grid-template-columns:1fr; } .price-card { padding:14px; } .price-card strong { font-size:22px; margin:8px 0; } .dialog-body,.dialog-head { padding:18px; } .admin-grid { grid-template-columns:1fr; } .auth-banner { padding:13px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

/* The studio playground: generous space, soft contours, tactile controls. */
:host { --bg:#090c0a; --panel:#111813; --panel-raised:#18211a; --line:#29382c; --green:#bdff66; --muted:#9daa9e; font-size:15px; }
.studio-playground { display:block; background:radial-gradient(ellipse 55% 25% at 90% 2%,#34532929,transparent 80%),var(--bg); }
.studio-playground .sidebar { flex-direction:row; align-items:center; justify-content:space-between; gap:25px; border:0; background:transparent; padding:27px max(4vw,24px) 12px; max-width:1750px; margin:auto; }
.studio-playground .brand { font-size:18px; letter-spacing:-.5px; }
.studio-playground .brand-text,.studio-playground .brand small { display:block; }
.studio-playground .brand-mark { width:44px; height:44px; }
.studio-playground .brand small { font-size:8px; letter-spacing:2.5px; }
.studio-playground .nav-label,.studio-playground .sidebar-bottom { display:none; }
.studio-playground .nav-list { display:flex; gap:9px; padding:6px; border:1px solid #28372b; border-radius:40px; background:#0e1410; }
.studio-playground .nav-button { border-radius:30px; width:auto; padding:12px 20px; font-size:12px; }
.studio-playground .nav-button span { display:inline; }
.studio-playground .nav-button.active { background:var(--green); color:#203011; border-color:var(--green); box-shadow:0 3px 22px #b7ff5010; }
.studio-playground .topbar { max-width:1750px; margin:auto; height:44px; border:0; padding:0 max(4vw,24px); }
.studio-playground .session-pill { border-color:#35432f; background:#131b13; }
.studio-playground .top-actions .icon-button { border-radius:100%; width:33px; height:33px; }
.studio-playground main { max-width:1750px; padding:35px max(4vw,24px) 35px; }
.studio-playground .intro { margin-bottom:28px; align-items:center; }
.studio-playground .eyebrow { font-size:9px; letter-spacing:1.9px; color:#a5c18c; }
.studio-playground h1 { font-size:clamp(40px,4.5vw,66px); font-weight:560; letter-spacing:-2.9px; line-height:1.08; }
.studio-playground h1 em { color:var(--green); }
.studio-playground .intro p { font-size:13px; margin-top:18px; max-width:580px; line-height:1.75; }
.studio-playground .intro-note { display:flex; align-items:center; flex-direction:column; gap:12px; margin-right:6%; font-size:10px; transform:rotate(5deg); }
.hero-orbit { display:grid; place-items:center; width:136px; height:136px; border-radius:100%; border:1px solid #799b476e; background:radial-gradient(circle,#374a21,#17220f 62%,#23341a 64%,#0a0f07 66%); box-shadow:0 0 50px #b0ff3312; position:relative; }
.hero-orbit::after { content:""; width:170px; height:62px; border-radius:50%; border:1px solid #9ad74788; position:absolute; transform:rotate(-37deg); }
.hero-orbit span { font-size:53px; font-weight:300; color:var(--green); transform:rotate(-5deg); }
.project-bar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0 0 19px; padding:15px 21px; border-radius:25px; border:1px solid #2b3d2c; background:#121b14; }
.project-identity { display:grid; grid-template-columns:24px minmax(120px,280px); column-gap:12px; align-items:center; flex:1; }
.project-identity>svg { width:23px; color:var(--green); grid-row:1/3; }
.project-identity input { font-size:15px; font-weight:550; background:none; border:0; color:var(--text); min-width:0; padding:2px 0; }
.project-identity>span { font-size:10px; color:#859b86; }
.project-actions { display:flex; gap:10px; align-items:center; }
.project-actions select { max-width:190px; border:1px solid #3c513a; background:#0e180f; padding:9px 14px; border-radius:30px; font-size:11px; }
.studio-playground .button { border-radius:30px; padding:12px 21px; font-size:12px; }
.studio-playground .button.small { padding:9px 15px; font-size:11px; }
.studio-playground .button.primary { box-shadow:0 5px 25px #bcff6610; }
.studio-playground .button.primary:hover:not(:disabled) { box-shadow:0 5px 30px #b8ff4525; transform:translateY(-1px); }
.studio-playground .auth-banner { border-radius:23px; padding:18px 23px; background:linear-gradient(105deg,#20331a,#111b13); }
.studio-playground .auth-banner strong { font-size:13px; }
.studio-playground .auth-banner p { font-size:11px; margin-top:6px; }
.studio-playground .workbench { grid-template-columns:minmax(0,1fr) 285px; gap:21px; }
.studio-playground .workspace,.studio-playground .rack,.studio-playground .result-panel,.studio-playground .history-panel { border-radius:28px; background:linear-gradient(140deg,#151e17,#0e1510 70%); border-color:#2b3a2c; }
.studio-playground .workspace-header { padding:22px 24px 13px; border:0; }
.studio-playground h2 { font-size:14px; }
.studio-playground .badge { border-radius:15px; font-size:8px; padding:5px 10px; background:#1b271b; border-color:#354e30; }
.studio-playground .operation-tabs { margin:10px 22px 0; border:1px solid #31422b; border-radius:35px; padding:5px; background:#0c130c; }
.studio-playground .operation-tab { border-radius:30px; padding:13px 8px; font-size:12px; }
.studio-playground .operation-tab[aria-selected="true"] { color:#203112; background:var(--green); border-color:var(--green); }
.studio-playground .workspace-body { padding:20px 22px; }
.studio-playground .dropzone { min-height:175px; border-radius:23px; border-color:#546e3e; background:radial-gradient(ellipse at 50% 100%,#2a422033,#0c150c 85%); }
.studio-playground .dropzone strong { font-size:15px; font-weight:500; }
.studio-playground .upload-symbol { border-radius:100%; width:47px; height:47px; background:#2c401a; border-color:#638340; margin-bottom:11px; }
.studio-playground .has-tracks .dropzone { min-height:79px; padding:13px 20px; align-items:flex-start; padding-left:80px; }
.studio-playground .has-tracks .dropzone .upload-symbol { position:absolute; left:20px; top:18px; width:38px; height:38px; }
.studio-playground .has-tracks .dropzone strong { font-size:12px; }
.studio-playground .has-tracks .dropzone small { position:absolute; right:18px; top:27px; font-size:9px; max-width:145px; text-align:right; }
.studio-playground .has-tracks .demo-action { margin-top:5px; }
.studio-playground .track-toolbar { margin-top:15px; margin-bottom:10px; }
.studio-playground .track-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.studio-playground .track { border-radius:18px; background:#172119; }
.studio-playground .track-top { padding:11px; gap:8px; }
.studio-playground .track>.waveform { display:none; }
.studio-playground .track-mix { grid-template-columns:1fr; padding:10px 12px; background:#101b12; }
.studio-playground .track-mix .mute-control { justify-content:flex-start; }
.studio-playground .track-name { font-size:10px; }
.studio-playground .track-meta { font-size:8px; }
.studio-playground .track .icon-button { border-radius:100%; width:26px; height:26px; flex-shrink:0; background:#202f20; border-color:#3a5237; }
.studio-playground .track .icon-button svg { width:12px; height:12px; }
.studio-playground .workspace-footer { border-color:#263c29; font-size:9px; background:#152419; padding:13px 23px; }
.studio-playground .rack { overflow:visible; background:linear-gradient(170deg,#1b291c,#101911); position:sticky; top:15px; }
.studio-playground .rack-head { border:0; padding:24px 22px 5px; }
.studio-playground .rack-body { padding:16px 21px 22px; }
.studio-playground .field select { border-radius:15px; font-size:11px; padding:10px 12px; background:#111c11; }
.studio-playground .musical-context { margin-bottom:22px; }
.studio-playground .musical-context .field { margin-bottom:13px; }
.studio-playground .field label { color:#c3d1bc; font-size:11px; }
.studio-playground .preset-options { display:flex; gap:5px; margin-bottom:19px; }
.studio-playground .preset-option { position:relative; padding:10px 3px; border-radius:18px; background:#141d12; flex:1; justify-content:center; text-align:center; }
.studio-playground .preset-option input { position:absolute; width:1px; height:1px; opacity:0; }
.studio-playground .preset-option:focus-within { outline:2px solid var(--green); outline-offset:2px; }
.studio-playground .preset-option:has(input:checked) { background:#2a401e; color:var(--green); border-color:#739e4e; }
.studio-playground .preset-option strong { font-size:10px; }
.studio-playground .preset-option small,.studio-playground .preset-icon { display:none; }
.studio-playground input[type=range] { accent-color:var(--green); }
.studio-playground .format-options { grid-template-columns:1fr 1fr; gap:7px; }
.studio-playground .format-options label { border-radius:13px; font-size:10px; padding:9px; }
.studio-playground .format-options .locked-option { color:#859b7a; border-style:dashed; cursor:pointer; }
.studio-playground .format-options .locked-option::after { content:'↗'; font-size:12px; margin-left:auto; }
.studio-playground .run-button { margin-top:20px; padding:15px 12px; font-size:11px; }
.studio-playground .result-head { padding:19px 22px; }
.studio-playground .result-body { padding:19px 22px; }
.studio-playground .play-main { width:44px; height:44px; }
.studio-playground .ab-switch { border-radius:28px; padding:4px; background:#0d160d; }
.studio-playground .ab-switch button { border-radius:20px; padding:8px 12px; font-size:10px; }
.studio-playground .resultWaveform { border-radius:13px; }
.variant-downloads { display:flex; flex-wrap:wrap; gap:7px; }
.studio-playground .history-head { padding:19px 23px; }
.studio-playground .history-row { padding:14px 0; }
.studio-playground .history-info strong { font-size:12px; }
.studio-playground .main-footer { padding-top:30px; font-size:9px; color:#768a76; }
.studio-playground .message { border-radius:18px; }
.studio-playground .waveform-empty { border-radius:20px; }
.precision-editor { margin-top:25px; border-radius:23px; background:#0b120e; border:1px solid #385137; overflow:hidden; }
.editor-top { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:20px 19px 15px; }
.editor-eyebrow { font-size:8px; letter-spacing:2px; color:#8db16e; margin-bottom:4px; }
.editor-top h3 { font-size:19px; letter-spacing:-.6px; font-weight:500; }
.editor-counter { font-size:9px; color:#98ad8c; border:1px solid #31472f; padding:5px 9px; border-radius:20px; }
.editor-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 15px 14px; }
.editor-tools,.editor-zoom { display:flex; gap:5px; align-items:center; }
.editor-icon,.editor-tool { border:1px solid #314a2d; border-radius:20px; background:#172317; color:#bcd4aa; height:31px; padding:0 10px; font-size:10px; }
.editor-icon { min-width:31px; font-size:18px; padding:0 7px; }
.editor-icon:hover:not(:disabled),.editor-tool:hover:not(:disabled) { background:#2d4523; color:var(--green); }
.editor-separator { width:1px; height:17px; background:#30482b; margin:0 3px; }
.editor-zoom output { font-size:10px; font-variant-numeric:tabular-nums; min-width:30px; text-align:center; color:#b8d699; }
.timeline-viewport { max-width:100%; overflow-x:auto; overflow-y:hidden; scrollbar-color:#547739 #101d12; scrollbar-width:thin; border-top:1px solid #2c432d; border-bottom:1px solid #2c432d; }
.timeline-stage { width:max-content; }
.timeline-ruler { display:flex; height:31px; width:max-content; background:#142218; }
.ruler-label { width:132px; flex-shrink:0; position:sticky; left:0; z-index:5; background:#142218; font-size:8px; letter-spacing:1.7px; padding:9px 12px; color:#819d7c; border-right:1px solid #33502e; }
.ruler-body { position:relative; flex-shrink:0; overflow:hidden; cursor:crosshair; }
.timeline-tick { position:absolute; height:31px; border-left:1px solid #455a3d; font-size:8px; color:#a1b791; padding:8px 0 0 5px; white-space:nowrap; }
.timeline-lane { display:flex; width:max-content; border-top:1px solid #2a4129; }
.lane-heading { width:132px; flex-shrink:0; position:sticky; left:0; background:#142017; z-index:4; display:flex; flex-wrap:wrap; align-content:center; align-items:center; gap:4px 7px; padding:11px; border-right:1px solid #33502e; }
.lane-heading>span:nth-child(2) { font-size:10px; max-width:93px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lane-heading small { width:100%; margin-left:13px; color:#6f8b6e; font-size:8px; }
.lane-dot { width:6px; height:6px; border-radius:100%; background:var(--clip-color); }
.timeline-trackbody { height:94px; position:relative; flex-shrink:0; cursor:crosshair; background:repeating-linear-gradient(90deg,transparent 0,transparent 61px,#23412766 61px,#23412766 62px),linear-gradient(#0c170f,#0a130d); }
.lane-color-0 { --clip-color:#c5fa6d; --clip-bg:#416728; }
.lane-color-1 { --clip-color:#70eec0; --clip-bg:#245a49; }
.lane-color-2 { --clip-color:#d9e9ac; --clip-bg:#566135; }
.lane-color-3 { --clip-color:#72dbcb; --clip-bg:#225651; }
.audio-clip { position:absolute; height:70px; top:12px; min-width:4px; border:1px solid color-mix(in srgb,var(--clip-color),transparent 55%); color:var(--clip-color); border-radius:11px; background:color-mix(in srgb,var(--clip-bg),#0b150c 30%); padding:0; text-align:left; cursor:grab; overflow:hidden; user-select:none; }
.audio-clip.is-selected { border:2px solid #d7ffa0; background:color-mix(in srgb,var(--clip-bg),#101c0c 10%); box-shadow:0 0 17px #b8fb4b16; }
.audio-clip.dragging-clip { opacity:.8; cursor:grabbing; z-index:6; }
.audio-clip .clip-label { display:block; font-size:9px; font-weight:650; letter-spacing:.2px; padding:5px 8px 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.audio-clip svg { height:33px; width:100%; opacity:.85; pointer-events:none; }
.audio-clip svg path { stroke:var(--clip-color); stroke-width:1.5; stroke-linecap:round; }
.clip-duration { position:absolute; right:6px; bottom:2px; font-size:7px; opacity:.8; }
.timeline-cursor { position:absolute; top:0; bottom:0; width:1px; background:#f0ffc2; z-index:3; pointer-events:none; }
.ruler-body .timeline-cursor::before { content:''; display:block; width:7px; height:8px; background:#e9ffb3; border-radius:0 0 5px 5px; margin-left:-3px; }
.editor-empty { padding:36px 23px; color:#8da785; font-size:11px; }
.editor-transport { padding:14px 18px; display:flex; align-items:center; gap:12px; border-bottom:1px solid #2b4128; }
.segment-play { width:33px; height:33px; border-radius:100%; border:0; background:var(--green); color:#25370f; flex-shrink:0; font-size:12px; }
.playhead-field { display:flex; align-items:center; gap:7px; font-size:9px; color:#93ae88; }
.playhead-field input { width:78px; border:1px solid #3e5b33; border-radius:12px; background:#142312; color:#daefc9; padding:7px 6px; font-size:10px; font-variant-numeric:tabular-nums; }
.editor-time { color:var(--green); font-size:13px; font-variant-numeric:tabular-nums; letter-spacing:.7px; margin-left:auto; }
.editor-tip { font-size:8px; max-width:125px; color:#6f8d68; line-height:1.5; }
.clip-inspector { padding:17px 18px 0; }
.inspector-title { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:15px; }
.inspector-title strong { font-size:11px; font-weight:550; color:#c4dcb6; }
.inspector-title small { font-size:8px; color:#799871; max-width:180px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.clip-fields { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.clip-field { min-width:0; font-size:9px; display:grid; gap:5px; color:#91b183; }
.clip-field-input { position:relative; display:flex; align-items:center; background:#172718; border:1px solid #375332; border-radius:13px; overflow:hidden; }
.clip-field-input input { min-width:0; width:100%; padding:9px 3px 9px 9px; background:transparent; border:0; color:#d3e8c7; font-size:10px; }
.clip-field-input small { color:#6f8c66; padding:0 7px 0 2px; font-size:8px; }
.clip-field-input input:disabled { color:#667560; }
.clip-label-field { display:grid; gap:6px; color:#92b081; font-size:9px; margin-top:14px; }
.clip-label-field input { width:100%; border:1px solid #3c5933; border-radius:13px; padding:11px; font-size:11px; background:#152713; color:#d4eac5; }
.editor-annotation-note { padding:13px 18px 16px; margin:0; color:#77906d; font-size:9px; line-height:1.7; }
.editor-plan-note { color:#a3bb87; font-size:9px; }
.editor-upgrade { border:1px dashed #54783e; border-radius:16px; background:#1d2e16; padding:8px 13px; font-size:10px; color:var(--green); margin-top:12px; }
dialog { border-radius:30px; background:#131e15; border-color:#44633c; }
.dialog-head { border:0; padding:27px 28px 10px; }
.dialog-head h2 { font-size:29px; letter-spacing:-1.2px; font-weight:550; }
.dialog-head .icon-button { border-radius:100%; width:35px; height:35px; }
.dialog-body { padding:14px 28px 28px; }
#billingDialog { width:min(1130px,calc(100vw - 36px)); }
.billing-intro { max-width:650px; line-height:1.8; }
.billing-period { display:flex; justify-content:center; gap:4px; padding:5px; border:1px solid #456139; background:#0d170e; border-radius:35px; width:max-content; max-width:100%; margin:20px auto 25px; }
.billing-period button { border:0; border-radius:28px; padding:11px 18px; background:transparent; color:#a9bd9d; font-size:11px; }
.billing-period button[aria-pressed=true] { background:var(--green); color:#283a13; }
.billing-period span { font-size:8px; padding:3px 5px; margin-left:5px; border-radius:7px; background:#588225; color:#efffd0; }
.billing-choice { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:0; align-items:stretch; }
.price-card { border-radius:25px; padding:21px 17px 17px; background:#142117; border-color:#354f33; display:flex; flex-direction:column; }
.price-card.featured-plan { border-color:#9acd61; background:linear-gradient(165deg,#2c431b,#162513 75%); box-shadow:0 0 30px #baff4110; }
.plan-topline { min-height:30px; }
.price-card .period { font-size:14px; text-transform:none; letter-spacing:-.2px; color:#dceacd; font-weight:550; }
.plan-choice-badge { display:block; color:#acd174; font-size:8px; margin-top:3px; }
.price-card strong { font-size:28px; font-weight:550; letter-spacing:-1.5px; margin:15px 0 1px; color:#ddf4c4; white-space:nowrap; }
.price-card strong small { font-size:10px; letter-spacing:0; color:#8da87d; font-weight:400; margin-left:2px; }
.plan-billing-detail { font-size:8px; line-height:1.7; color:#8da17f; margin:3px 0 20px; }
.plan-features { padding:0; margin:0 0 20px; list-style:none; flex:1; }
.plan-features li { display:flex; gap:7px; font-size:10px; color:#b9cfa8; line-height:1.65; margin-bottom:10px; }
.plan-features svg { width:12px; height:12px; color:#9ac46d; margin-top:3px; }
.price-card .button { font-size:10px; border-radius:25px; }
.billing-terms { padding:18px 21px; border-radius:20px; background:#0d190f; border:1px solid #324c2e; margin-top:20px; }
.billing-terms .checkbox-label { align-items:flex-start; font-size:11px; line-height:1.7; margin:0; color:#bacda9; }
.billing-terms input { margin-top:4px; }
.billing-terms p { margin:9px 0 0 24px; font-size:10px; color:#90a37d; line-height:1.7; }
#billingStatus { margin-top:16px; }
.tier-navigation { display:flex; gap:7px; flex-wrap:wrap; align-items:center; margin:0 0 19px; }
.tier-navigation>span { font-size:10px; color:#8ba080; margin-right:5px; }
.tier-link { border:1px solid #344d2d; color:#b0c59e; background:#142015; padding:8px 15px; border-radius:25px; font-size:11px; text-decoration:none; }
.tier-link[aria-current=page] { border-color:var(--green); background:#263d19; color:var(--green); }
.next-plan-banner { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:19px 23px; border:1px solid #49683a; background:linear-gradient(115deg,#233b19,#131e12); border-radius:25px; margin-top:22px; }
.next-plan-banner h3 { font-size:17px; margin:0 0 5px; font-weight:500; letter-spacing:-.4px; }
.next-plan-banner p { margin:0; color:#9db88b; font-size:11px; line-height:1.7; }
.upgrade-kicker { display:inline-block; border:1px solid #96c65f; border-radius:20px; background:#294419; color:var(--green); padding:5px 12px; font-size:9px; letter-spacing:2px; margin-bottom:15px; }
.upgrade-price { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.upgrade-price span { border:1px solid #37552d; border-radius:18px; padding:10px 14px; background:#162611; color:#cbe9b3; font-size:12px; }
.upgrade-copy { color:#b4c6a4; font-size:13px; line-height:1.85; }
.tier-access-note { font-size:10px; color:#90ab7f; padding:0 4px; }
@media(min-width:1700px){.studio-playground .workbench{grid-template-columns:minmax(0,1fr) 320px;}.studio-playground .track-list{grid-template-columns:repeat(3,minmax(0,1fr));}.studio-playground .intro{padding:8px 0 15px;}}
@media(max-width:1180px){.studio-playground .sidebar{padding:23px 24px 10px;}.studio-playground main{padding:30px 24px;}.studio-playground .topbar{padding:0 24px;}.studio-playground .intro-note{margin-right:2%;}.studio-playground .workbench{grid-template-columns:minmax(0,1fr) 260px;gap:16px;}.studio-playground .workspace-body{padding:17px;}.studio-playground .track-list{grid-template-columns:1fr;}.studio-playground .track-mix{grid-template-columns:1fr 1fr;}.studio-playground .has-tracks .dropzone small{position:static;max-width:none;margin-top:3px;font-size:8px;}.editor-tip{display:none;}.editor-toolbar{flex-wrap:wrap;}.price-card{padding:19px 13px 13px;}.price-card strong{font-size:24px;}.clip-fields{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:940px){.studio-playground .intro-note{display:none;}.studio-playground .brand{margin:0;}.studio-playground .nav-button{padding:10px 14px;}.studio-playground .sidebar{padding:20px 21px 9px;}.studio-playground .workbench{grid-template-columns:minmax(0,1fr) 238px;}.studio-playground .rack-body{padding:15px;}.studio-playground .rack-head{padding:22px 16px 3px;}.studio-playground .operation-tab{font-size:10px;}.studio-playground .operation-tabs{margin:9px 16px 0;}.studio-playground .workspace-header{padding:19px 18px 10px;}.studio-playground .workspace-body{padding:15px;}.studio-playground .track-mix{grid-template-columns:1fr;}.project-identity{grid-template-columns:22px minmax(80px,210px);}.project-identity input{font-size:12px;}.project-actions select{max-width:125px;}.editor-tools{gap:3px;}.editor-tool{font-size:9px;padding:0 8px;}.editor-zoom{margin-left:auto;}.clip-fields{grid-template-columns:repeat(2,minmax(0,1fr));}.inspector-title{display:block;}.inspector-title small{display:block;margin-top:4px;}.billing-choice{grid-template-columns:repeat(2,minmax(0,1fr));}.price-card strong{font-size:29px;}}
@media(max-width:760px){.studio-playground .sidebar{padding:17px 18px 8px;gap:13px;}.studio-playground .brand{font-size:13px;}.studio-playground .brand-mark{width:32px;height:35px;}.studio-playground .brand small{font-size:7px;letter-spacing:1.7px;}.studio-playground .nav-list{padding:4px;gap:3px;}.studio-playground .nav-button{padding:10px;}.studio-playground .nav-button span{display:none;}.studio-playground .nav-button svg{width:17px;height:17px;}.studio-playground .topbar{padding:0 18px;height:43px;}.studio-playground main{padding:22px 16px 28px;}.studio-playground .intro{margin-bottom:25px;}.studio-playground h1{font-size:44px;letter-spacing:-2px;}.studio-playground .intro p{font-size:12px;margin-top:15px;}.studio-playground .eyebrow{font-size:7px;letter-spacing:1.4px;}.studio-playground .workbench{grid-template-columns:1fr;}.studio-playground .rack{position:static;}.studio-playground .rack-body{grid-template-columns:1fr 1fr;column-gap:18px;padding:17px 20px 23px;}.studio-playground .rack-head{padding:22px 22px 6px;}.studio-playground .musical-context{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:10px;}.studio-playground .preset-options{gap:9px;}.studio-playground .preset-option{padding:13px 5px;}.studio-playground .preset-option strong{font-size:11px;}.studio-playground .format-options{max-width:none;grid-template-columns:repeat(4,1fr);}.studio-playground .format-options label{font-size:9px;justify-content:center;padding:10px 5px;}.studio-playground .format-options input{width:9px;height:9px;}.studio-playground .format-options .locked-option::after{display:none;}.project-bar{padding:14px 17px;border-radius:22px;flex-wrap:wrap;gap:12px;}.project-identity{grid-template-columns:22px minmax(100px,1fr);min-width:100%;}.project-identity input{font-size:14px;}.project-actions{justify-content:space-between;width:100%;}.project-actions select{max-width:190px;flex:1;}.studio-playground .workspace,.studio-playground .rack,.studio-playground .result-panel,.studio-playground .history-panel{border-radius:24px;}.studio-playground .track-mix{grid-template-columns:1fr 1fr;}.studio-playground .track-name{font-size:11px;}.studio-playground .track-meta{font-size:9px;}.editor-top h3{font-size:18px;}.editor-toolbar{gap:8px;}.editor-toolbar .editor-tool{font-size:10px;}.editor-fields{grid-template-columns:repeat(3,minmax(0,1fr));}.clip-fields{grid-template-columns:repeat(3,minmax(0,1fr));}.inspector-title{display:flex;}.editor-tip{display:none;}.editor-time{font-size:12px;}.timeline-viewport{scrollbar-width:thin;}.studio-playground .workspace-footer{font-size:8px;padding:12px 16px;}.studio-playground .track-list{grid-template-columns:1fr;}.billing-choice{gap:11px;}.dialog-head{padding:23px 20px 10px;}.dialog-head h2{font-size:27px;}.dialog-body{padding:12px 20px 24px;}.billing-period button{font-size:10px;padding:10px 12px;}.billing-period span{font-size:7px;}.price-card{border-radius:22px;padding:18px 14px;}.plan-features li{font-size:10px;}.billing-terms{padding:15px;}.tier-navigation{gap:6px;}.tier-navigation>span{width:100%;font-size:9px;margin-bottom:2px;}.tier-link{font-size:10px;padding:8px 13px;}.next-plan-banner{align-items:flex-start;flex-direction:column;padding:19px;}.next-plan-banner h3{font-size:16px;}.next-plan-banner .button{width:100%;}}
@media(max-width:440px){.studio-playground main{padding:21px 12px 25px;}.studio-playground h1{font-size:39px;letter-spacing:-1.8px;}.studio-playground .topbar{padding:0 14px;}.studio-playground .intro p{font-size:11px;}.studio-playground .workspace-header{padding:17px 15px 10px;}.studio-playground .workspace-title{gap:7px;}.studio-playground h2{font-size:12px;}.studio-playground .badge{font-size:7px;padding:5px 7px;}.studio-playground .operation-tabs{margin:8px 12px 0;}.studio-playground .operation-tab{padding:12px 5px;}.studio-playground .workspace-body{padding:14px 12px;}.studio-playground .track-mix{grid-template-columns:1fr;}.studio-playground .has-tracks .dropzone{padding-left:67px;}.studio-playground .has-tracks .dropzone .upload-symbol{left:16px;width:34px;height:34px;}.studio-playground .has-tracks .dropzone strong{font-size:11px;}.studio-playground .has-tracks .dropzone small{font-size:7px;}.editor-toolbar{padding:0 10px 12px;}.editor-tools{gap:4px;}.editor-separator{display:none;}.editor-toolbar .editor-tool{font-size:9px;padding:0 7px;}.editor-icon{height:29px;min-width:29px;}.editor-zoom{margin-top:2px;}.editor-top{padding:17px 14px 13px;}.editor-top h3{font-size:16px;}.editor-counter{font-size:8px;}.editor-transport{padding:12px;gap:8px;flex-wrap:wrap;}.editor-time{font-size:11px;letter-spacing:0;}.playhead-field{gap:5px;font-size:8px;}.playhead-field input{width:72px;}.clip-inspector{padding:16px 13px 0;}.clip-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}.inspector-title{display:block;}.editor-annotation-note{padding:12px 13px;font-size:8px;}.studio-playground .format-options{grid-template-columns:1fr 1fr;}.studio-playground .format-options label{font-size:10px;}.billing-choice{grid-template-columns:1fr;}.price-card{padding:19px;}.plan-topline{min-height:20px;}.price-card strong{font-size:32px;}.plan-features{margin-bottom:6px;}.plan-features li{font-size:11px;margin-bottom:8px;}.price-card .button{margin-top:12px;font-size:11px;}.billing-period{margin:13px auto 21px;}.billing-period button{font-size:9px;padding:10px;}.billing-period span{margin-left:2px;font-size:6px;padding:3px;}.dialog-head h2{font-size:25px;}.dialog-body{padding:10px 18px 23px;}.billing-terms p{font-size:9px;}.billing-terms .checkbox-label{font-size:10px;}.project-bar{padding:13px 15px;}.studio-playground .button.small{font-size:10px;padding:9px 13px;}.tier-link{padding:8px 11px;}}
/* Explicit, keyboard-accessible access to locked tools. */
.field-unlock{border:0;background:transparent;color:var(--green,#c3ff68);padding:5px 0;text-align:left;font:inherit;font-size:10px;cursor:pointer}.field-unlock:hover{text-decoration:underline}.field-unlock:focus-visible{outline:2px solid #c3ff68;outline-offset:3px}.clip-field>label{font-size:10px;color:#a8b7a1}.locked-option{opacity:.6}.tier-navigation>span{font-size:11px;color:#8e9c85;align-self:center}.tier-access-note{margin:0 0 24px}.upgrade-price{line-height:1.8}#upgradeDialog{max-width:530px}#upgradeTitle{font-size:30px;line-height:1.2;margin:0 0 14px}#upgradeDialog .included{margin:20px 0}#upgradeAction{width:100%}.billing-terms input{flex-shrink:0}
.brand-ai{color:var(--green)}.studio-playground .brand-text{white-space:nowrap;letter-spacing:-.6px}.studio-playground .brand-text small{letter-spacing:1px;font-size:8px}
/* Keep the timeline's intrinsic width inside its own scroll viewport. */
.studio-playground .workbench > *,
.studio-playground .workspace-column,
.studio-playground .workspace,
.studio-playground .workspace-body,
.studio-playground #timelineEditor,
.studio-playground .precision-editor,
.studio-playground .rack,
.studio-playground .rack-body > * { min-width:0; max-width:100%; }
.studio-playground .timeline-viewport { width:100%; min-width:0; }
.studio-playground .track-list > *,
.studio-playground .track-mix > *,
.studio-playground .musical-context > * { min-width:0; }
@media(max-width:760px) {
  .studio-playground .workbench { grid-template-columns:minmax(0,1fr); }
  .studio-playground .rack-body,
  .studio-playground .musical-context,
  .studio-playground .track-mix { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .studio-playground .track-list { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:440px) {
  .studio-playground .track-mix { grid-template-columns:minmax(0,1fr); }
}
.project-actions{flex-wrap:wrap}.project-missing{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:-2px 0 22px;padding:19px 23px;border:1px solid #8d7744;border-radius:23px;background:#282319;color:#f2dfb6}.project-missing strong{font-size:13px}.project-missing p{font-size:11px;line-height:1.7;color:#c5b891;margin:7px 0 0;max-width:760px}.project-missing .button{flex-shrink:0}.project-identity input:disabled{opacity:.7}@media(max-width:760px){.project-missing{flex-direction:column;align-items:stretch;padding:17px}.project-actions select{min-width:0}.project-missing .button{width:100%}}
/* A persistent purple light behind the studio; no flashing or pulsing. */
:host{--bg:#0d0a13;background:#0d0a13}.srai-page{background:#0d0a13}
.studio-playground{background-color:#0d0a13;background-image:radial-gradient(ellipse 70% 75% at 5% 18%,#973aff38,transparent 72%),radial-gradient(ellipse 70% 80% at 100% 70%,#713bd93d,transparent 74%),radial-gradient(ellipse 60% 40% at 55% 5%,#7237ac22,transparent 75%);background-attachment:fixed;background-repeat:no-repeat}
.studio-mode-switch{display:flex;gap:6px;padding:5px;border:1px solid #665078;border-radius:32px;width:max-content;max-width:100%;margin:0 0 22px;background:#18111f;box-shadow:0 0 25px #a051ff12}
.studio-mode-switch button{display:flex;gap:11px;align-items:center;border:0;border-radius:25px;background:transparent;padding:12px 20px;color:#bcadc9;font-size:12px}
.studio-mode-switch button span{font-size:9px;opacity:.7}.studio-mode-switch button[aria-pressed=true]{color:#25310f;background:var(--green)}
.is-guided .workspace,.is-guided .rack{display:none}.is-guided .workbench{display:block}.is-guided .result-panel{margin-top:23px}
.guided-studio .button{min-width:0;max-width:100%;white-space:normal;text-align:center}.guided-studio .take-review p,.guided-studio .guide-utility-card p,.guided-studio .guide-utility-card li,.guided-studio .guide-notice{overflow-wrap:anywhere}
.guided-studio{border:1px solid #594369;border-radius:30px;background:linear-gradient(155deg,#191522f7,#101714f7 65%);overflow:hidden;box-shadow:0 12px 60px #08050d33,0 0 55px #9147d719;margin-bottom:3px;min-width:0}
.guide-header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:30px 33px 24px}.guide-eyebrow{font-size:9px;letter-spacing:2px;color:#caacf0}.studio-playground .guide-header h2{font-size:35px;letter-spacing:-1.4px;font-weight:550;margin:8px 0}.guide-header p{margin:0;color:#a9ada4;font-size:12px}.guide-mode-badge{flex-shrink:0;padding:9px 16px;border:1px solid #77549a;background:#34213f;border-radius:25px;font-size:10px;color:#d6b7ef}
.guide-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;border-top:1px solid #433848;border-bottom:1px solid #433848;background:#110f15;padding:17px 27px}
.guide-steps button{display:flex;align-items:center;gap:8px;border:1px solid transparent;background:transparent;border-radius:25px;padding:8px;color:#97958f;font-size:10px;text-align:left;min-width:0}.guide-steps button>span{display:grid;place-items:center;width:25px;height:25px;border:1px solid #5a4964;border-radius:50%;font-size:11px;flex-shrink:0;color:#bda3d0}.guide-steps button[aria-current=step]{background:#283420;color:#d9f0bf;border-color:#526640}.guide-steps button[aria-current=step]>span{background:var(--green);border-color:var(--green);color:#21300d}
.guide-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;align-items:start}.guide-main{padding:29px 30px;min-width:0}.guide-stage{min-width:0}.step-heading{margin-bottom:23px}.step-heading>small{font-size:9px;color:#9bbc7a;letter-spacing:1.7px}.step-heading h3{font-size:26px;font-weight:540;letter-spacing:-1px;margin:8px 0 9px;line-height:1.2}.step-heading p{font-size:12px;line-height:1.8;max-width:610px;color:#a1aea1;margin:0}
.genre-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.genre-card{display:grid;grid-template-columns:minmax(0,1fr) 20px;gap:6px;border:1px solid #3d4940;background:#171f1a;border-radius:22px;padding:20px;text-align:left;transition:border-color .15s,background .15s;min-width:0}.genre-card>span{font-size:15px;color:#dfe6d9;letter-spacing:-.3px}.genre-card>small{grid-column:1;font-size:10px;color:#8fa18b}.genre-card>b{grid-column:2;grid-row:1/3;font-size:19px;align-self:center;font-weight:400;color:#829971}.genre-card:hover{border-color:#788263}.genre-card[aria-pressed=true]{border-color:#9dc961;background:linear-gradient(135deg,#324222,#1d2818);box-shadow:0 0 20px #b3fa4f0a}.genre-card[aria-pressed=true]>span,.genre-card[aria-pressed=true]>b{color:#d6f5ac}
.guide-footnote{font-size:10px;line-height:1.8;color:#8e9b89;margin:16px 0}.guide-stage-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:26px;padding-top:23px;border-top:1px solid #344035}.guide-stage-footer>span{font-size:10px;color:#97a48e}.guide-stage-footer .button{font-size:11px}
.guide-upload-card{display:flex;gap:15px;align-items:center;flex-wrap:wrap;border:1px dashed #73805e;border-radius:23px;padding:22px;margin-bottom:22px;background:#26301d33}.guide-upload-card>div:nth-child(2){flex:1;min-width:130px}.guide-upload-card strong{font-size:14px;font-weight:550}.guide-upload-card p{font-size:10px;line-height:1.7;color:#94a889;margin:5px 0 0}.guide-source-icon{width:45px;height:45px;display:grid;place-items:center;border-radius:16px;color:#cced9f;background:#344526;border:1px solid #566e39;font-size:24px;flex-shrink:0}
.guide-field{display:grid;gap:9px;font-size:11px;color:#c1cbb8;margin:17px 0;min-width:0}.guide-field input:not([type=range]),.guide-field select,.guide-field textarea{width:100%;min-width:0;border:1px solid #43543b;border-radius:14px;background:#111b13;color:#e0ebd4;padding:12px 13px;font-size:12px;line-height:1.5}.guide-field textarea{resize:vertical;min-height:130px}.guide-field small{font-size:9px;color:#8c9e82;line-height:1.6}.guide-field input[type=range]{width:100%;min-width:0}.guide-field input:disabled,.guide-field select:disabled{opacity:.5}.guide-field>span{display:flex;justify-content:space-between;gap:10px}.guide-field output{font-size:10px;color:var(--green);font-variant-numeric:tabular-nums}.guide-field input:focus,.guide-field select:focus,.guide-field textarea:focus{border-color:#9daf75}
.guide-two-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:19px}.guide-three-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.guide-row{display:flex;align-items:center;gap:11px;flex-wrap:wrap}.guide-row h4{margin:0;font-weight:550;font-size:14px}.guide-status{font-size:10px;color:#b59bc9;line-height:1.7}.guide-check{display:flex;align-items:flex-start;gap:10px;font-size:10px;line-height:1.8;color:#a3b19b;margin:14px 0}.guide-check input{flex-shrink:0;accent-color:var(--green);margin:3px 0 0;width:13px;height:13px}.guide-notice{border:1px solid #846947;border-radius:16px;padding:13px 16px;font-size:11px;color:#e8d3ae;background:#30271f;line-height:1.8;margin:0 0 20px}.rhythm-proposal{border:1px solid #6c4b87;border-radius:18px;background:#261a32;padding:18px;margin:17px 0}.rhythm-proposal strong{font-size:15px;font-weight:500;color:#dac4f0}.rhythm-proposal p{font-size:11px;color:#b8a9c8;line-height:1.7}
.recording-desk{border:1px solid #65457c;background:linear-gradient(135deg,#271b32,#171d1c);border-radius:25px;padding:23px;display:flex;gap:17px;align-items:center;flex-wrap:wrap;margin:21px 0}.record-orb{width:58px;height:58px;display:grid;place-items:center;border-radius:50%;border:1px solid #785e8f;background:#413051;box-shadow:0 0 24px #aa67e224;flex-shrink:0}.record-orb span{display:block;width:15px;height:15px;background:#b390cf;border-radius:50%}.record-orb.is-recording{border-color:#fc837d;box-shadow:0 0 23px #ff5b513b;background:#49252d}.record-orb.is-recording span{background:#ff8c80}.recording-readout{display:grid;gap:5px;flex:1;min-width:150px}.recording-readout strong{font-size:13px;font-weight:550}.recording-readout output{font-size:25px;color:#e0c8f4;font-variant-numeric:tabular-nums;line-height:1.2}.recording-readout>span{font-size:9px;color:#a999b1}.record-button{background:#a7ef62;color:#243114;border-color:#b7f37d}.take-review{border:1px solid #6e7b50;border-radius:22px;padding:20px;background:#26301d;margin:17px 0}.take-review strong{font-size:13px;font-weight:550}.take-review p{font-size:11px;line-height:1.7;color:#b3c69e}.take-review audio{width:100%;height:36px;margin:10px 0 17px}.guide-takes h4{font-size:13px;font-weight:500;margin:24px 0 13px}.guide-take{display:flex;align-items:center;gap:12px;padding:15px;border:1px solid #3b4936;background:#182015;border-radius:17px;margin:9px 0;min-width:0}.take-status-dot{width:7px;height:7px;border-radius:50%;background:#59634f;flex-shrink:0}.active-take .take-status-dot{background:var(--green);box-shadow:0 0 11px #bfff6040}.guide-take>div{flex:1;min-width:0;display:grid;gap:5px}.guide-take strong{font-size:11px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.guide-take small{font-size:9px;color:#8eaa7d}.guide-take .button{font-size:9px;padding:8px 11px;flex-shrink:0}.guide-empty{font-size:11px;line-height:1.8;color:#8b9c81;margin:24px 0}
.guide-utility-card{border-top:1px solid #3d493a;padding-top:22px;margin-top:25px;min-width:0}.guide-utility-card h4{font-weight:550;font-size:14px;margin:0 0 8px}.guide-utility-card p{font-size:11px;line-height:1.8;color:#a2b395}.guide-utility-card ul{padding-left:18px;font-size:10px;line-height:1.9;color:#bbceaa}.guide-utility-card .transcript-text{white-space:pre-wrap;background:#141d12;border:1px solid #405436;border-radius:16px;padding:15px;color:#d3dfc8}.voice-effects{padding:6px 21px;border:1px solid #43513b;border-radius:23px;background:#182015}.effect-slider{margin:19px 0 23px}.pitch-correction-card{padding:20px;border-radius:22px;background:#241a2c;border:1px solid #624679;margin-top:19px}.pitch-correction-card .guide-footnote{color:#b9a3c8}.guide-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:19px 0}.guide-summary>div{display:grid;gap:8px;padding:20px;border:1px solid #4a583e;border-radius:20px;background:#1a2417;min-width:0}.guide-summary span{font-size:10px;color:#97ab87}.guide-summary strong{font-size:19px;font-weight:500;color:#d2e6bd;letter-spacing:-.4px}.guide-render{font-size:12px;padding:15px 22px}.guide-text-button{border:0;padding:6px 0;background:transparent;color:#c2a3dd;font-size:11px;line-height:1.7;text-align:left}
.studio-coach{min-width:0;border-left:1px solid #51405c;background:linear-gradient(165deg,#281b35aa,#171520aa);padding:26px 22px;align-self:stretch}.coach-heading{display:flex;align-items:center;gap:11px}.coach-symbol{display:grid;place-items:center;width:35px;height:35px;background:#432856;border:1px solid #8860a5;border-radius:13px;color:#dfbaff;font-size:23px;flex-shrink:0}.coach-heading h3{font-size:12px;margin:0 0 5px;font-weight:550;line-height:1.5}.coach-heading div>span{font-size:9px;color:#bca1d2}.coach-intro{font-size:10px;line-height:1.9;color:#b0a4bd;margin:19px 0}.coach-messages{max-height:340px;min-height:160px;overflow:auto;scrollbar-width:thin;scrollbar-color:#76578c #201829;padding-right:4px}.coach-messages p{font-size:11px;line-height:1.9;padding:13px 14px;margin:8px 0;border-radius:17px;white-space:pre-wrap;overflow-wrap:anywhere}.coach-answer{border:1px solid #5e456d;background:#30213b;color:#decee9}.coach-question{border:1px solid #495d3d;background:#25341e;color:#d5e8bd;margin-left:20px!important}.coach-messages .coach-notice{border:0;padding:6px;font-size:9px;color:#a895b8}.coach-actions{display:flex;flex-wrap:wrap;gap:7px;margin:15px 0}.coach-actions .button{font-size:9px;max-width:100%;text-align:left;white-space:normal}#coachForm textarea{width:100%;min-width:0;resize:vertical;min-height:85px;border:1px solid #77558c;border-radius:17px;background:#160f1e;color:#e5d7ee;padding:13px;font-size:11px;line-height:1.8}#coachForm .guide-row{margin-top:11px;gap:8px}#coachForm .button{font-size:10px;padding:9px 12px}.coach-permissions{margin-top:18px;padding-top:15px;border-top:1px solid #4d3b59}.coach-permissions .guide-check{font-size:9px;line-height:1.8;color:#ae9bbe;margin:13px 0}.coach-permissions>small{display:block;margin-top:12px;font-size:9px;color:#ad96bd;line-height:1.8}.coach-permissions .button{font-size:10px}
@media(max-width:1180px){.guide-layout{grid-template-columns:minmax(0,1fr) 265px}.guide-main{padding:24px}.studio-coach{padding:23px 18px}.genre-card{padding:18px}.guide-steps{padding:13px 20px;gap:4px}.guide-steps button{font-size:9px;gap:6px}.guide-three-columns{grid-template-columns:repeat(2,minmax(0,1fr))}.recording-desk{padding:18px}.guide-header{padding:27px}.studio-playground .guide-header h2{font-size:32px}}
@media(max-width:940px){.guide-layout{grid-template-columns:minmax(0,1fr)}.studio-coach{border-left:0;border-top:1px solid #65477c;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 24px}.coach-heading,.coach-intro{grid-column:1}.coach-messages,.coach-actions{grid-column:1}.studio-coach #coachForm{grid-column:2;grid-row:1/4}.coach-permissions{grid-column:2;grid-row:4/6;margin-top:0}.guide-main{padding:28px}.guide-steps button{font-size:10px}.guide-three-columns{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.studio-mode-switch{width:100%;gap:4px}.studio-mode-switch button{justify-content:center;flex:1;gap:5px;padding:11px 9px;font-size:11px}.studio-mode-switch button span{display:none}.guided-studio{border-radius:25px}.guide-header{padding:23px 21px 19px;align-items:flex-start}.guide-eyebrow{font-size:7px;letter-spacing:1.3px}.studio-playground .guide-header h2{font-size:28px}.guide-header p{font-size:10px;line-height:1.8}.guide-mode-badge{font-size:8px;padding:7px 10px;white-space:nowrap}.guide-steps{padding:12px 13px;gap:4px;grid-template-columns:repeat(5,minmax(0,1fr))}.guide-steps button{flex-direction:column;justify-content:flex-start;text-align:center;padding:8px 3px;gap:6px;font-size:8px;line-height:1.5;border-radius:16px}.guide-steps button>span{width:24px;height:24px;font-size:10px}.guide-main{padding:21px 19px}.step-heading h3{font-size:23px}.step-heading p{font-size:11px}.step-heading>small{font-size:8px}.genre-cards{gap:10px}.genre-card{padding:16px 13px;border-radius:19px}.genre-card>span{font-size:12px}.genre-card>small{font-size:9px;line-height:1.6}.genre-card>b{font-size:17px}.guide-stage-footer{gap:8px}.guide-stage-footer>span{font-size:8px}.guide-stage-footer .button{font-size:10px;padding:9px 12px}.guide-field{font-size:10px}.guide-field input:not([type=range]),.guide-field select,.guide-field textarea{font-size:12px;padding:11px}.guide-three-columns{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}.guide-two-columns{gap:12px}.recording-desk{gap:12px;padding:17px;border-radius:21px}.recording-readout{min-width:140px}.recording-readout strong{font-size:12px}.recording-readout>span{font-size:8px}.recording-desk .button{width:100%;font-size:12px}.record-orb{width:49px;height:49px}.guide-upload-card{padding:18px;gap:12px}.guide-upload-card .button{width:100%}.guide-take{padding:12px;gap:9px;flex-wrap:wrap}.guide-take .button{margin-left:16px}.guide-summary{gap:10px}.guide-summary>div{padding:16px}.guide-summary strong{font-size:16px}.guide-summary span{font-size:9px}.guide-render{width:100%}.studio-coach{display:block;padding:24px 20px}.coach-heading h3{font-size:14px}.coach-intro{font-size:11px}.coach-messages{max-height:290px;min-height:0}.coach-messages p{font-size:12px}.coach-permissions .guide-check{font-size:10px}.coach-permissions{margin-top:20px}.coach-permissions>small{font-size:10px}.coach-messages .coach-notice{font-size:10px}#coachForm textarea{font-size:12px}.guide-utility-card p{font-size:11px}.guide-footnote{font-size:10px}.guide-check{font-size:10px}}
@media(max-width:440px){.guide-header{padding:21px 17px 18px}.guide-mode-badge{display:none}.studio-playground .guide-header h2{font-size:27px}.guide-main{padding:20px 15px}.genre-card{grid-template-columns:minmax(0,1fr) 12px;padding:14px 12px}.genre-card>small{font-size:8px}.genre-card>span{font-size:11px}.guide-steps{padding:10px 8px;gap:3px}.guide-steps button{font-size:7px}.guide-steps button>span{width:22px;height:22px}.guide-summary strong{font-size:14px}.guide-summary>div{padding:13px}.guide-three-columns,.guide-two-columns{gap:0 10px}.guide-upload-card strong{font-size:12px}.guide-upload-card p{font-size:9px}.guide-source-icon{width:38px;height:38px;font-size:21px}.pitch-correction-card,.voice-effects{padding:16px}.guide-row>.button{max-width:100%;font-size:10px}.guide-field{font-size:9px}.guide-take .button{font-size:9px}.recording-readout{min-width:130px}.guide-stage-footer .button{padding:9px 10px}}
@media(prefers-reduced-motion:reduce){.genre-card{transition:none}}