/* Speech to Song: a two-step voice playground. */
:root { --bg:#0a0b10; --panel:#13151e; --line:#30323f; --text:#f3f4f8; --muted:#999dab; --lime:#c4fc50; --violet:#b7a4ff; --cyan:#8bd9f0; --sans:"Outfit","Segoe UI",sans-serif; --mono:ui-monospace,"Cascadia Code",monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-height:100vh; background:radial-gradient(ellipse at 80% 0%,#19203d66,transparent 45%),var(--bg); color:var(--text); font:14px/1.5 var(--sans); -webkit-font-smoothing:antialiased; }
button,input,select { font:inherit; }
button { cursor:pointer; color:inherit; }
button:disabled { opacity:.36; cursor:not-allowed; }
button:hover:not(:disabled),a.download-button:hover { filter:brightness(1.12); }
button:active:not(:disabled) { transform:translateY(1px); }
a { color:inherit; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[role=tabpanel]:focus-visible { outline:2px solid var(--cyan); outline-offset:4px; }
[hidden] { display:none!important; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:absolute; top:-70px; left:15px; padding:10px; z-index:9999; background:var(--lime); color:#111; }
.skip-link:focus { top:10px; }
.app-shell { max-width:1140px; margin:auto; padding:0 24px 14px; }
.intro { display:flex; align-items:center; justify-content:space-between; gap:22px; padding:21px 0 18px; }
.eyebrow { color:#8c93a9; font:8px var(--mono); letter-spacing:.18em; }
.intro h1 { font-size:33px; line-height:1.15; font-weight:750; letter-spacing:-.05em; margin:7px 0 0; }
.intro h1 span { display:inline-block; color:var(--violet); font-size:.49em; font-weight:400; letter-spacing:-.01em; }
.local-badge { display:flex; align-items:center; gap:8px; color:#989eae; font-size:10px; white-space:nowrap; }
.local-badge i { width:5px; height:5px; border-radius:50%; background:var(--lime); box-shadow:0 0 12px #c4fc5055; }
.studio { overflow:hidden; border:1px solid #353847; border-radius:17px; background:var(--panel); box-shadow:0 30px 100px #0004; scroll-margin-top:70px; }
.studio-top { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:11px 20px; background:#191c27; border-bottom:1px solid var(--line); }
.studio-title { display:flex; align-items:center; gap:9px; font-size:10px; font-weight:700; letter-spacing:.1em; color:#cdd0df; }
.studio-title img { border-radius:6px; }
.engine-state { padding:5px 8px; border:1px solid #3b4053; border-radius:20px; color:#b1b8cf; font:7px var(--mono); letter-spacing:.04em; text-align:right; }
.view-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; padding:7px; background:#0e1018; border-bottom:1px solid var(--line); }
.view-tabs button { display:flex; align-items:center; justify-content:center; gap:9px; min-height:38px; border:1px solid transparent; border-radius:8px; background:none; color:#8e95a9; font-size:12px; font-weight:600; }
.view-tabs button>span { display:grid; place-items:center; width:19px; height:19px; border:1px solid #42485b; border-radius:50%; font:9px var(--mono); }
.view-tabs button[aria-selected=true] { color:#19200f; background:var(--lime); border-color:var(--lime); }
.view-tabs button[aria-selected=true]>span { background:#17230e; color:var(--lime); border-color:#17230e; }
.workspace-panel { padding:22px 25px; }
.panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; }
.panel-heading h2 { margin:0; font-size:26px; font-weight:650; line-height:1.15; letter-spacing:-.04em; }
.panel-heading h2 em { font-style:normal; color:var(--lime); }
.panel-heading p { margin:7px 0 0; color:var(--muted); font-size:12px; }
.step-label { margin-top:7px; color:#717b94; font:8px var(--mono); letter-spacing:.1em; white-space:nowrap; }
.record-layout { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:36px; }
.record-main,.record-review,.beat-browser,.creation-column { min-width:0; }
.record-display { height:150px; position:relative; isolation:isolate; display:flex; align-items:center; justify-content:center; flex-direction:column; margin:0 0 14px; border:1px solid #353d53; border-radius:12px; background:radial-gradient(ellipse at center,#202d4266,transparent 70%),#0b0d15; overflow:hidden; }
.record-display:after { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse at center,#0d101b,transparent 80%); }
.record-display canvas { position:absolute; inset:0; width:100%; height:100%; z-index:-1; }
.record-display-label { color:#6d7e9f; font:7px var(--mono); letter-spacing:.2em; margin-bottom:6px; }
#record-time { color:#eef1ff; font:350 53px/1 var(--sans); letter-spacing:-.06em; font-variant-numeric:tabular-nums; }
#record-caption { margin-top:9px; color:#7c89a6; font:8px var(--mono); letter-spacing:.08em; }
.primary-button,.next-button,.secondary-button { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:45px; padding:10px 14px; border:1px solid transparent; border-radius:8px; font-size:13px; font-weight:650; }
.record-button { min-height:50px; color:#252012; background:#ffcc7e; }
.record-button>i { width:9px; height:9px; border-radius:50%; background:#d04b45; box-shadow:0 0 0 5px #d04b4512; }
.record-button.recording { color:#ffc8d2; background:#452333; border-color:#b55b72; }
.record-button.recording>i { background:#ff92ac; border-radius:2px; animation:pulse 1.3s infinite; }
.alternate-inputs { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:7px; color:#616b81; font-size:10px; }
.alternate-inputs button { background:none; border:0; padding:7px 0; color:#a8b5d5; font-size:11px; text-decoration:underline; text-underline-offset:3px; text-decoration-color:#47516b; }
.record-review { padding-left:30px; border-left:1px solid var(--line); }
.quick-guide { display:grid; gap:14px; list-style:none; padding:0; margin:0 0 17px; }
.quick-guide li { display:flex; align-items:flex-start; gap:12px; }
.quick-guide li>span { display:grid; place-items:center; width:29px; height:29px; flex-shrink:0; background:#222838; border:1px solid #39455c; border-radius:8px; color:#a7b8d9; font:9px var(--mono); }
.quick-guide strong { display:block; color:#d9dfed; font-size:12px; font-weight:600; }
.quick-guide p { margin:3px 0 0; color:#8f99b0; font-size:11px; }
.privacy-note { margin:0 0 8px; color:#7a859f; font-size:10px; }
.headphone-tip { display:flex; align-items:center; justify-content:center; gap:6px; margin:10px 0 0; color:#b7c8e2; font-size:11px; line-height:1.4; }
.headphone-tip svg { flex-shrink:0; color:var(--cyan); }
.song-listen .song-headphone-tip { order:-1; grid-column:1/-1; justify-content:flex-start; margin:0; font-size:9px; }
.next-button { justify-content:space-between; min-height:39px; border-color:#46523c; background:#212b1d; color:#c9e4ae; font-size:12px; }
.next-button>span { font-size:18px; line-height:1; }
.original-result { margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.record-review:has(.original-result:not([hidden])) .quick-guide { display:none; }
.audio-label { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:9px; color:#a3adc4; font:8px var(--mono); }
.audio-label>span:last-child { max-width:60%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:10px var(--sans); }
audio { display:block; width:100%; max-width:100%; height:34px; }
.song-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.85fr); gap:25px; }
.sound-controls,.song-controls { min-width:0; padding:0; margin:0; border:0; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:25px; margin-bottom:10px; }
.section-heading h3 { margin:0; color:var(--lime); font:9px var(--mono); white-space:nowrap; }
.section-heading h3>span { color:#c3ccdf; font:600 12px var(--sans); padding-left:7px; }
.section-heading h3>small { margin-left:8px; color:#6f7c98; font:7px var(--mono); }
.section-note { font:6px var(--mono); color:#6e7a95; letter-spacing:.06em; }
#beat-preview-button { padding:4px 7px; min-height:27px; border:1px solid #38445e; border-radius:5px; color:#a9c3ef; background:#1b2434; font-size:9px; }
#beat-preview-button[aria-pressed=true] { color:var(--lime); border-color:#7a9c3b; }
.beat-picker { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.beat-card { position:relative; display:grid; grid-template-columns:29px minmax(0,1fr); align-items:center; gap:5px 8px; min-width:0; min-height:66px; padding:9px; text-align:left; border:1px solid #343849; border-radius:9px; background:linear-gradient(135deg,color-mix(in srgb,var(--beat-color,#97acf7) 9%,#191c27),#141721); }
.beat-card[aria-pressed=true] { border-color:var(--beat-color,var(--lime)); background:linear-gradient(135deg,color-mix(in srgb,var(--beat-color,var(--lime)) 19%,#161c27),#1a2030); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--beat-color,var(--lime)) 25%,transparent); }
.beat-card[aria-pressed=true]:after { content:"✓"; position:absolute; right:5px; top:2px; color:var(--beat-color,var(--lime)); font-size:9px; }
.beat-art { display:grid; place-items:center; grid-row:1/3; width:29px; height:37px; border-radius:6px; color:var(--beat-color,var(--violet)); background:color-mix(in srgb,var(--beat-color,var(--violet)) 12%,#10131d); font-size:23px; line-height:1; }
.beat-copy { display:flex; min-width:0; flex-direction:column; align-self:end; }
.beat-title { color:#e7eaf5; font-size:11px; font-weight:600; line-height:1.2; }
.beat-genre { margin-top:3px; color:#858fa7; font-size:8px; line-height:1.1; }
.beat-bpm { grid-column:2; align-self:start; color:var(--beat-color,#9cabc9); font:7px var(--mono); }
.beat-caption { padding:10px 0 0; }
#selected-beat-name { display:none; }
.song-style-description { color:#8f9bb5; font-size:10px; line-height:1.5; margin:0; }
.creation-column { padding-left:24px; border-left:1px solid var(--line); }
.preset-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.preset { min-width:0; min-height:65px; padding:8px 3px; border:1px solid #383c51; border-radius:8px; background:#1c1e2c; text-align:center; }
.preset.active { border-color:var(--violet); background:#2c2640; }
.preset-glyph { display:block; margin-bottom:5px; color:#c9b6ff; font-size:24px; line-height:1; }
.natural-glyph { color:#aee5d2; }.dream-glyph { color:#efb2e0; }
.preset strong { display:block; font-size:9px; font-weight:550; white-space:nowrap; }
.preset small { display:none; }
.hype-control { padding-top:12px; }
.hype-control>label { display:flex; justify-content:space-between; align-items:center; gap:12px; color:#d4d7e4; font-size:11px; font-weight:500; }
.hype-control small { color:#767e95; font-size:9px; margin-left:5px; font-weight:400; }
.hype-control output { color:var(--violet); font:10px var(--mono); }
.hype-control>p { margin:0; color:#737e98; font-size:9px; }
input[type=range] { display:block; width:100%; height:24px; margin:4px 0 0; padding:0; appearance:none; -webkit-appearance:none; background:linear-gradient(to right,#baa5ff var(--fill,50%),#35374a var(--fill,50%)) center/100% 3px no-repeat; cursor:pointer; }
input[type=range]::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:12px; height:12px; border-radius:50%; border:2px solid #12151f; background:#d1bfff; box-shadow:0 0 0 1px #a393ca; }
input[type=range]::-moz-range-thumb { width:12px; height:12px; border:0; border-radius:50%; background:#d1bfff; }
.fine-tune { border-top:1px solid var(--line); margin:10px 0 0; }
summary { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:8px 0; list-style:none; color:#8e9ab5; font-size:10px; cursor:pointer; }
summary::-webkit-details-marker { display:none; }
summary>span { color:#7e8ca9; font-size:14px; line-height:1; }
details[open]>summary>span { transform:rotate(45deg); }
.advanced-inner { padding:5px 0 12px; }
.key-row,.slider-grid,.song-mix-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 15px; }
.key-row label,.hook-label,.song-style-label { display:flex; flex-direction:column; gap:6px; min-width:0; color:#a7b1c8; font-size:11px; }
select { display:block; width:100%; min-width:0; height:35px; padding:0 9px; color:#d8e0ef; background:#202536; border:1px solid #46516d; border-radius:6px; font-size:11px; }
.slider-control { display:block; min-width:0; margin-top:10px; }
.slider-control>span { display:flex; justify-content:space-between; gap:7px; color:#a3b0c9; font-size:10px; }
.slider-control output { color:#c7b8ed; font:9px var(--mono); }
.hook-label { margin-top:12px; }
.voice-preview-tools { margin:0 0 10px; }
.voice-preview-tools>summary { padding:4px 0 9px; font-size:9px; }
.voice-preview-inner { padding:5px 0 10px; }
.secondary-button { min-height:34px; font-size:11px; background:#252237; border-color:#504069; color:#c8b5ed; }
.play-button { margin-top:9px; background:#192e2b; color:#a5dccc; border-color:#3e655c; }
.stage-hint { margin:6px 0 0; color:#8390ab; font-size:9px; line-height:1.5; }
.make-song-button { min-height:46px; color:#17200b; background:var(--lime); font-size:14px; box-shadow:0 4px 24px #a8d8450d; }
.make-song-button>span:first-child { font-size:23px; line-height:1; }
.make-track { margin-top:3px; }
.make-track>.stage-hint { text-align:center; }
.process-progress { margin-top:10px; }
.process-progress progress { display:block; width:100%; height:5px; border:0; border-radius:4px; accent-color:var(--lime); overflow:hidden; }
.process-progress progress::-webkit-progress-bar { background:#303642; }.process-progress progress::-webkit-progress-value { background:var(--lime); }
.process-progress>div { display:flex; justify-content:space-between; align-items:center; gap:9px; margin-top:5px; color:#a7b69a; font-size:9px; }
.process-progress button { background:none; border:0; padding:4px; color:#c9d9b9; font-size:10px; text-decoration:underline; }
.song-listen { display:flex; flex-direction:column; gap:10px; margin-top:15px; padding:14px; background:#0e111b; border:1px solid #313d53; border-radius:10px; }
.song-empty { display:flex; align-items:center; gap:14px; min-height:66px; }
.track-art { display:grid; place-items:center; flex-shrink:0; width:66px; height:66px; border:1px solid #46466a; border-radius:8px; background:linear-gradient(145deg,#31315c,#172f42); overflow:hidden; }
.track-art i { display:block; width:54px; height:54px; border:8px solid #0b101b; outline:1px solid #6473aa; border-radius:50%; background:radial-gradient(circle,#101626 5%,#c4fc50 8%,#c4fc50 20%,#21263d 22%,#313959 25%,#101625 28%,#1c263e 50%,#101625 53%); }
.mini-title { display:block; margin:0 0 5px; color:#747e99; font:7px var(--mono); letter-spacing:.1em; }
.song-empty p { margin:0; color:#a0acc5; font-size:12px; line-height:1.5; }
#song-result { display:contents; }
.song-result-heading { order:0; }.song-result-heading h3 { color:#eef2ff; font-size:21px; font-weight:600; line-height:1.1; letter-spacing:-.03em; margin:0 0 6px; }.song-result-heading p { color:#7d91b7; font:8px var(--mono); margin:0; }
.song-sections { order:1; display:flex; gap:4px; }
.song-sections>span { display:flex; align-items:center; justify-content:center; min-width:0; padding:6px 2px; border:1px solid #35415b; border-radius:4px; background:#192132; color:#819ac3; font:7px var(--mono); text-transform:uppercase; }
.song-sections>span.active { color:#d5fcb4; background:#293d21; border-color:#749d4d; }
#song-audio { order:2; }#song-audio:not([src]) { display:none; }
.song-result-actions,.voice-result-actions { display:flex; align-items:stretch; gap:7px; }
.song-result-actions { order:3; }.voice-result-actions { margin-top:8px; }
.compare-button,.download-button,.song-result-actions button { display:flex; align-items:center; justify-content:center; flex:1; min-width:0; min-height:34px; padding:7px; color:#b7c9eb; background:transparent; border:1px solid #455778; border-radius:6px; font-size:9px; text-decoration:none; text-align:center; }
.song-result-actions .download-button { background:#25341a; border-color:#56783c; color:#d4f4ba; }
.song-source-note { order:4; color:#7585a3; font-size:8px; line-height:1.5; margin:0; }
.song-status { color:#7a8ba8; font-size:9px; margin:14px 0 0; line-height:1.5; }.song-status.ready { color:#a8d697; }.song-status.error { color:#eeaf9e; }
.tuned-result { margin-top:10px; }.take-detail { display:block; margin-top:7px; color:#8998ad; font:8px var(--mono); }
.analysis-result { margin-top:8px; border-top:1px solid var(--line); }.analysis-result>p { margin:8px 0; color:#b4c8b6; font-size:10px; }.analysis-result.low-pitch>p { color:#e3b292; }.analysis-result dl { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:10px 0 0; font-size:9px; }.analysis-result dt { color:#8490a8; }.analysis-result dd { margin:3px 0 0; color:#c4cde0; }
.status-bar { display:flex; align-items:center; gap:9px; min-height:33px; padding:8px 20px; border-top:1px solid var(--line); background:#10131d; }.status-bar>i { flex-shrink:0; width:4px; height:4px; border-radius:50%; background:#6b7790; }.status-bar>i.ready { background:var(--lime); }.status-bar>i.recording { background:#f798b2; animation:pulse 1.3s infinite; }.status-bar>i.error { background:#efb298; }.status-bar p { margin:0; color:#8f9eb9; font-size:9px; line-height:1.5; }
.app-footer { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:12px 2px 0; color:#59657e; font:7px var(--mono); letter-spacing:.05em; }.app-footer>div { display:flex; gap:18px; }.app-footer a { color:#8d9cb9; font:10px var(--sans); text-decoration:none; }.app-footer a:hover { text-decoration:underline; }
.noscript { padding:25px; color:var(--cyan); text-align:center; }
@keyframes pulse { 50% { opacity:.4; } }
@media(min-width:761px) and (max-height:740px) {
 .intro { padding:14px 0 13px; }.intro h1 { font-size:29px; }.studio-top { padding:8px 20px; }.studio-title img { width:22px; height:22px; }.view-tabs { padding:5px; }.view-tabs button { min-height:33px; }.workspace-panel { padding:17px 23px; }.panel-heading { margin-bottom:14px; }.panel-heading h2 { font-size:23px; }.panel-heading p { margin-top:5px; font-size:11px; }.beat-card { min-height:60px; padding:7px 8px; }.beat-picker { gap:7px; }.beat-art { height:33px; }.section-heading { margin-bottom:8px; }.preset { min-height:59px; }.hype-control { padding-top:9px; }.hype-control>p { display:none; }.fine-tune { margin-top:7px; }summary { padding:7px 0; }.song-listen { padding:11px; margin-top:12px; gap:8px; }.song-status { margin-top:10px; }.song-source-note { display:none; }.app-footer { padding-top:10px; }
}
@media(max-width:900px) and (min-width:761px) { .song-grid { grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:18px; }.creation-column { padding-left:18px; }.beat-picker { grid-template-columns:repeat(2,minmax(0,1fr)); max-height:260px; overflow-y:auto; padding-right:4px; }.beat-card { min-height:65px; }.section-note { display:none; }.local-badge { display:none; } }
@media(min-width:761px) and (max-height:740px) {
 .intro { padding:10px 0 11px; }.intro .eyebrow { display:none; }.intro h1 { margin:0; }.workspace-panel { padding:14px 23px; }.panel-heading { margin-bottom:10px; }.section-heading { min-height:22px; margin-bottom:6px; }.hype-control { padding-top:7px; }input[type=range] { height:20px; }summary { padding:5px 0; }.voice-preview-tools { margin-bottom:6px; }.voice-preview-tools>summary { padding:3px 0; }.song-listen { margin-top:10px; padding:10px; }.song-empty { min-height:49px; }.track-art { width:49px; height:49px; }.track-art i { width:39px; height:39px; border-width:6px; }.song-listen:has(#song-result:not([hidden])) { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:7px; }.song-result-heading .mini-title { display:none; }.song-result-heading h3 { font-size:17px; margin-bottom:4px; }.song-result-heading { grid-column:1; }.song-sections { grid-column:2; align-self:center; }.song-sections>span { font-size:6px; padding:5px 1px; }#song-audio,.song-result-actions { grid-column:1/-1; }#song-audio { height:31px; }.song-result-actions button,.song-result-actions .download-button { min-height:30px; padding:6px; }
}
@media(max-width:760px) {
 .app-shell { padding:0 15px 15px; }.intro { padding:18px 0 15px; }.eyebrow { font-size:7px; }.intro h1 { font-size:29px; }.intro h1 span { display:block; margin-top:5px; font-size:.5em; }.local-badge { display:none; }.studio-top { padding:10px 13px; }.studio-title { font-size:9px; }.studio-title img { width:23px; height:23px; }.engine-state { max-width:130px; font-size:6px; padding:4px 6px; }.view-tabs { gap:4px; padding:6px; }.view-tabs button { min-height:37px; gap:7px; font-size:11px; }.view-tabs button>span { width:17px; height:17px; font-size:8px; }.workspace-panel { padding:20px 17px; }.panel-heading { margin-bottom:16px; }.panel-heading h2 { font-size:25px; }.panel-heading p { font-size:11px; line-height:1.5; }.step-label { display:none; }.record-layout { display:block; }.record-display { height:142px; }.record-review { margin-top:16px; padding-left:0; border:0; }.quick-guide { display:none; }.privacy-note { text-align:center; font-size:9px; }.next-button { margin-top:10px; }.original-result { padding-bottom:10px; }.song-grid { display:block; }.beat-picker { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; max-height:206px; padding-right:3px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#52617e #171d2b; }.beat-card { grid-template-columns:1fr; gap:0; min-height:94px; padding:8px 7px; }.beat-art { grid-row:auto; width:25px; height:28px; margin-bottom:6px; font-size:22px; }.beat-title { font-size:10px; }.beat-genre { font-size:7px; }.beat-bpm { grid-column:1; margin-top:4px; font-size:6px; }.beat-caption { padding-top:7px; }.song-style-description { font-size:9px; }.creation-column { margin-top:14px; padding:14px 0 0; border-left:0; border-top:1px solid var(--line); }.section-heading { margin-bottom:8px; }.section-note { font-size:6px; }.preset { min-height:58px; }.preset-glyph { font-size:22px; }.preset strong { font-size:9px; }.hype-control { padding-top:9px; }.hype-control>p { display:none; }.hype-control input { margin-top:1px; }.fine-tune { margin-top:7px; }summary { padding:7px 0; }.voice-preview-tools { margin-bottom:7px; }.voice-preview-tools>summary { padding:2px 0 7px; }.make-song-button { min-height:45px; font-size:13px; }.song-listen { padding:12px; margin-top:12px; }.song-empty { min-height:45px; }.track-art { width:49px; height:49px; }.track-art i { width:39px; height:39px; border-width:6px; }.song-empty p { font-size:11px; }.song-result-heading h3 { font-size:21px; }.song-status { margin-top:10px; font-size:9px; }.status-bar { padding:8px 14px; }.status-bar p { font-size:8px; }.app-footer { font-size:6px; }.app-footer a { font-size:9px; }
}
@media(max-width:360px) { .app-shell { padding-left:10px; padding-right:10px; }.workspace-panel { padding-left:14px; padding-right:14px; }.intro h1 { font-size:27px; }.preset strong { font-size:8px; }.beat-title { font-size:9px; }.section-note { display:none; } }
@media(min-width:761px) and (max-height:740px) { .workspace-panel.song-panel { padding-bottom:9px; }.song-status { margin-top:6px; }.status-bar { min-height:30px; padding-top:6px; padding-bottom:6px; } }
@media(min-width:761px) and (max-height:600px) {
 .intro { padding:8px 0; }.intro h1 { font-size:26px; }.studio-top { display:none; }.workspace-panel { padding:11px 18px; }.panel-heading { margin-bottom:10px; }.panel-heading h2 { font-size:20px; }.panel-heading p { display:none; }.song-grid { gap:18px; }.creation-column { padding-left:18px; }.beat-picker { grid-template-columns:repeat(3,minmax(0,1fr)); max-height:195px; overflow-y:auto; padding-right:4px; scrollbar-width:thin; scrollbar-color:#52617e #171d2b; }.beat-card { min-height:57px; }.preset { min-height:31px; padding:7px 2px; }.preset-glyph { display:none; }.hype-control { padding-top:7px; }.section-note,.beat-caption,.song-status { display:none; }.song-listen { margin-top:8px; padding:8px; }.song-empty { min-height:43px; }.track-art { width:43px; height:43px; }.track-art i { width:34px; height:34px; }.make-song-button { min-height:38px; }.make-track>.stage-hint { font-size:8px; }.record-display { height:104px; }.record-button { min-height:42px; }.quick-guide { gap:10px; margin-bottom:10px; }.app-footer { padding-top:8px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }*,*:before,*:after { animation:none!important; transition:none!important; } }
@media(min-width:761px) and (max-height:600px) {
 .intro { padding-top:6px; padding-bottom:6px; }.workspace-panel { padding-top:8px; padding-bottom:8px; }.hype-control { display:grid; grid-template-columns:82px minmax(0,1fr); gap:6px; align-items:center; padding-top:8px; }.hype-control small { display:none; }.hype-control input { margin:0; }.fine-tune { margin-top:5px; }summary { padding-top:2px; padding-bottom:2px; }.voice-preview-tools { margin-bottom:3px; }.voice-preview-tools>summary { padding-top:2px; padding-bottom:2px; }.make-song-button { padding:6px 10px; }.make-track>.stage-hint { display:none; }
}
@media(max-width:760px) {
 .app-shell:has(#panel-song:not([hidden])) { padding-bottom:100px; }.song-panel .make-track { position:fixed; z-index:90; left:0; right:0; bottom:0; margin:0; padding:12px 18px calc(10px + env(safe-area-inset-bottom,0px)); border-top:1px solid #434d39; background:#141b12f5; box-shadow:0 -8px 28px #080b1099; }.song-panel:has(#song-result:not([hidden])) .make-track { position:static; padding:0; margin-top:3px; border:0; background:none; box-shadow:none; }.song-panel .beat-picker { max-height:178px; }.song-panel .beat-card { min-height:82px; padding:7px; }.song-panel .beat-art { height:22px; margin-bottom:4px; font-size:20px; }.song-panel .creation-column { margin-top:11px; padding-top:11px; }.section-heading h3>small { font-size:6px; margin-left:6px; }
 .section-heading h3>small { font-size:8px; }.song-panel .make-track:has(#make-song-button:not(:disabled))>.stage-hint { display:none; }
}

/* The guide uses the same numbers as the buttons, with one clear next action. */
.studio-top .studio-nav { display:flex; flex:0 1 auto; align-items:center; gap:4px; padding:0; margin:0 auto; border:0; background:transparent; }
.studio-top .studio-nav button { min-height:28px; padding:5px 12px; border:1px solid transparent; border-radius:6px; background:transparent; color:#8d9bb6; font-size:10px; font-weight:500; }
.studio-top .studio-nav button[aria-selected=true] { background:#263248; border-color:#455777; color:#e2ebff; }
.action-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; list-style:none; padding:10px 22px; margin:0; background:#0e121b; border-bottom:1px solid #2f3b4b; }
.action-steps li { display:flex; align-items:center; justify-content:center; gap:8px; min-width:0; color:#707e99; font-size:11px; line-height:1.1; }
.guide-number { display:grid; flex-shrink:0; place-items:center; width:23px; height:23px; color:#7a8ca9; border:1px solid #3a4861; border-radius:50%; font:10px var(--mono); }
.guide-step-label { font-weight:550; }
.guide-step-label small { display:block; color:#677992; font:8px var(--sans); margin-top:3px; }
.action-steps li.current { color:#e1f7c0; }
.action-steps li.current .guide-number { color:#172409; background:var(--lime); border-color:var(--lime); box-shadow:0 0 15px #c4fc5022; }
.action-steps li.complete { color:#a4c6a0; }
.action-steps li.complete .guide-number { font-size:0; border-color:#53744b; background:#243521; color:#c3e1ad; }
.action-steps li.complete .guide-number:after { content:"✓"; font-size:11px; }
.action-steps li.ready { color:#a0b29a; }
.action-steps li.ready .guide-number { border-color:#526d45; }
.next-action-coach { display:flex; align-items:center; gap:11px; padding:10px 22px; border-bottom:1px solid #3b4733; background:linear-gradient(100deg,#273420,#19241d); }
.coach-arrow { flex-shrink:0; color:var(--lime); font-size:23px; line-height:1; }
.coach-copy { min-width:0; flex:1; }
.coach-copy strong { display:block; color:#e4f6cc; font-size:11px; font-weight:650; line-height:1.2; }
.coach-copy p { margin:4px 0 0; color:#b5c7a5; font-size:10px; line-height:1.4; }
#next-action-button { min-height:33px; flex-shrink:0; padding:7px 12px; border:1px solid #a4cf65; border-radius:6px; background:var(--lime); color:#1d2b10; font-size:11px; font-weight:650; }
.next-action-target { box-shadow:0 0 0 3px #c4fc5044,0 0 24px #b4e94420; animation:next-action-glow 1.8s ease-in-out 2; }
@keyframes next-action-glow { 50% { box-shadow:0 0 0 5px #c4fc5060,0 0 30px #b4e94435; } }
.song-panel .panel-heading h2,.song-panel .panel-heading .step-label { display:none; }
.song-panel .panel-heading { margin-bottom:12px; }
.song-panel .panel-heading p { margin:0; font-size:10px; color:#879bb9; }
.song-playback { display:grid; grid-template-columns:126px minmax(0,1fr); gap:8px; align-items:center; order:2; min-width:0; }
.song-playback:has(#song-audio:not([src])) { display:none; }
.song-play-button { display:flex; align-items:center; justify-content:center; gap:6px; min-width:0; min-height:36px; padding:7px; border:1px solid #8db954; border-radius:6px; background:#b9ed6e; color:#1c300e; font-size:10px; font-weight:650; }
.song-play-button>span:first-child { font-size:17px; line-height:1; }
.song-play-button[aria-pressed=true] { color:#d5edc4; background:#2b4323; }
.song-panel:has(#song-result:not([hidden])) .make-song-button { color:#b6cca6; background:#263326; border-color:#485b40; box-shadow:none; }
.song-playback #song-audio { width:100%; min-width:0; grid-column:auto; order:0; }
.stems-export { order:4; grid-column:1/-1; min-width:0; }
.stems-export>p { margin:0; color:#8394b0; font-size:8px; line-height:1.4; }
.stems-export .process-progress { margin-top:7px; }
.stems-export .stems-export-result { margin-top:4px; color:#b6d7a0; }
.stems-export-result:has(#stems-export-status:empty):has(#download-stems[hidden]) { display:none; }
#download-stems { color:#d3edba; text-underline-offset:2px; }
#export-stems-button { color:#d3c4f1; border-color:#66577e; }
#export-stems-button:hover:not(:disabled) { background:#322940; }
@media(max-width:760px) { .song-result-actions { gap:5px; }.song-result-actions button,.song-result-actions .download-button { font-size:9px; min-height:39px; padding:6px 4px; }.stems-export>p { font-size:8px; } }
@media(min-width:761px) and (max-height:740px) { .action-steps { padding-top:8px; padding-bottom:8px; }.guide-number { width:21px; height:21px; }.next-action-coach { padding-top:8px; padding-bottom:8px; }.song-listen:has(#song-result:not([hidden])) .song-playback { grid-column:1/-1; }.song-panel .panel-heading { margin-bottom:9px; } }
@media(max-width:760px) {
 .studio-top { gap:8px; padding:8px 11px; }.studio-top .engine-state { display:none; }.studio-title { font-size:7px; gap:6px; letter-spacing:.05em; }.studio-title img { width:21px; height:21px; }.studio-top .studio-nav { margin:0 0 0 auto; gap:3px; }.studio-top .studio-nav button { padding:5px 8px; min-height:29px; font-size:9px; }.action-steps { gap:4px; padding:10px 9px; }.action-steps li { flex-direction:column; gap:5px; font-size:9px; text-align:center; }.guide-number { width:20px; height:20px; font-size:9px; }.guide-step-label small { display:inline; font-size:7px; margin-left:3px; }.next-action-coach { gap:8px; padding:10px 12px; flex-wrap:wrap; }.coach-arrow { font-size:20px; }.coach-copy strong { font-size:11px; }.coach-copy p { font-size:10px; }.next-action-coach #next-action-button { margin-left:26px; min-height:34px; font-size:11px; }.song-playback { grid-template-columns:125px minmax(0,1fr); gap:7px; }.song-play-button { min-height:40px; }.song-panel .panel-heading { margin-bottom:13px; }
}
@media(min-width:761px) and (max-height:600px) {
 .studio-top { display:flex; padding:4px 13px; }.studio-top .studio-title,.studio-top .engine-state { display:none; }.studio-top .studio-nav { flex:1; margin:0; }.studio-top .studio-nav button { flex:1; min-height:25px; padding:3px 8px; }.action-steps { padding:6px 18px; }.guide-number { width:18px; height:18px; font-size:8px; }.action-steps li { font-size:10px; }.guide-step-label small { display:inline; margin-left:5px; }.next-action-coach { padding:7px 18px; gap:8px; }.coach-copy strong { display:none; }.coach-copy p { font-size:9px; margin:0; }.coach-arrow { font-size:18px; }#next-action-button { min-height:26px; padding:4px 8px; font-size:9px; }.panel-heading { display:none; }.song-playback { grid-template-columns:113px minmax(0,1fr); gap:6px; }.song-play-button { min-height:31px; padding:5px; font-size:9px; }
}