:root {
  color-scheme: light;
  --paper: #f5f1ea;
  --ink: #17201d;
  --muted: #757971;
  --line: #d9d8ce;
  --orange: #4e83d4;
  --lime: #d4ef90;
  --serif: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "DM Sans", sans-serif; }
button, input { font: inherit; }
button { color: inherit; }
.app-shell { min-height: 100vh; overflow: hidden; }
.topbar { height: 75px; padding: 0 7.2vw; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(23,32,29,.11); }
.brand { color: var(--ink); display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 800 16px Manrope, sans-serif; letter-spacing: -.7px; }
.brand-mark { width: 22px; height: 22px; display: flex; align-items: center; gap: 2px; justify-content: center; background: var(--orange); border-radius: 7px; transform: rotate(-7deg); }
.brand-mark span { display: block; width: 2px; border-radius: 2px; background: var(--ink); }
.brand-mark span:nth-child(1), .brand-mark span:nth-child(4) { height: 5px; }
.brand-mark span:nth-child(2) { height: 10px; }
.brand-mark span:nth-child(3) { height: 14px; }
.local-note, .eyebrow, .step-number, .file-hint, .required-tag, .voice-kicker, .voice-card-index, .result-topline, .result-number, .result-foot, .page-foot { font-family: "DM Mono", monospace; letter-spacing: .075em; }
.local-note { font-size: 9px; color: #696f69; display: flex; align-items: center; gap: 9px; }
.live-dot { height: 6px; width: 6px; border-radius: 50%; background: #779c56; box-shadow: 0 0 0 3px rgba(119,156,86,.13); }
.workspace { width: min(1100px, 86vw); margin: 0 auto; padding: 57px 0 22px; }
.intro { margin-bottom: 37px; }
.eyebrow { font-size: 9px; color: #667068; display: flex; align-items: center; gap: 9px; }
.eyebrow-line { display: inline-block; width: 20px; height: 1px; background: var(--orange); }
h1 { margin: 17px 0 8px; font: 600 clamp(43px, 5.4vw, 67px)/.98 Manrope, sans-serif; letter-spacing: -4.7px; }
h1 em, .result-placeholder h2 em, .result-ready h2 em { color: #929184; font: italic 500 1em/.96 var(--serif); letter-spacing: -3px; }
.intro p { margin: 15px 0 0; color: #767b73; font-size: 13px; }
.intro .device-note { max-width: 570px; padding-left: 11px; border-left: 2px solid #91a167; color: #626a5d; font-size: 11px; line-height: 1.5; }
.studio-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(335px, .88fr); gap: clamp(34px, 6.4vw, 82px); align-items: stretch; }
.section-heading { display: flex; align-items: center; gap: 11px; min-height: 20px; }
.step-number { font-size: 9px; color: #4f78b4; }
.section-heading h2 { margin: 0; font: 700 13px Manrope, sans-serif; letter-spacing: -.15px; }
.heading-rule { flex: 1; height: 1px; background: var(--line); margin: 0 3px; }
.file-hint { color: #96978e; font-size: 8px; white-space: nowrap; }
.upload-stack { display: grid; gap: 10px; margin: 14px 0 27px; }
.video-input-row { display: flex; align-items: center; gap: 9px; margin: -15px 0 15px; }
.input-video-preview { display: block; width: min(100%, 520px); max-height: 310px; margin: 0 0 18px; background: #29342f; object-fit: contain; }
.upload-card { cursor: pointer; position: relative; display: flex; align-items: center; gap: 14px; min-height: 86px; padding: 15px 17px; border: 1px solid #ddded3; background: rgba(255,255,255,.42); transition: border .2s, background .2s, transform .2s; }
.upload-card:hover, .upload-card.is-dragging { border-color: #a8b190; background: rgba(255,255,255,.72); }
.upload-card.is-dragging { transform: scale(.995); }
.upload-card.has-file { border-color: #b6c392; background: rgba(240,246,223,.72); }
.upload-card.is-busy { pointer-events: none; opacity: .75; }
.file-input { display: none; }
.upload-icon { display: grid; place-items: center; flex: 0 0 39px; height: 39px; border-radius: 50%; }
.upload-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vocals-icon { background: #dce9fa; color: #416fa9; }
.instrumental-icon { background: #e5ebd2; color: #687b43; }
.upload-copy { min-width: 0; flex: 1; }
.upload-title-row { display: flex; align-items: center; gap: 8px; }
.upload-title-row h3 { margin: 0; font: 700 13px Manrope, sans-serif; letter-spacing: -.2px; }
.required-tag { color: #9d9e94; font-size: 7px; }
.upload-prompt { color: #8b8d85; margin: 5px 0 0; font-size: 10px; }
.browse-link { cursor: pointer; border: 0; border-bottom: 1px solid #adb09f; background: none; padding: 0 0 1px; color: #4c564a; font-size: inherit; }
.browse-link:hover { color: #4e83d4; border-color: #4e83d4; }
.upload-arrow { align-self: flex-start; margin-top: 0; color: #a4a59a; font-size: 13px; }
.selected-file { display: block; min-width: 0; margin-top: 5px; }
.selected-file-main { display: flex; align-items: center; gap: 9px; min-width: 0; }
.file-name { max-width: 330px; color: #475342; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-preview { display: block; width: min(100%, 330px); height: 30px; margin-top: 6px; }
.automatic-pitch-control { display: grid; justify-items: start; gap: 4px; margin-top: 7px; }
.automatic-pitch-button { border: 1px solid #bdc9a1; padding: 6px 8px; background: rgba(255,255,255,.58); color: #536447; cursor: pointer; font-size: 9px; transition: background .15s, color .15s, border-color .15s; }
.automatic-pitch-button[aria-pressed="true"] { border-color: #536447; background: #536447; color: #fff; }
.automatic-pitch-button:disabled { opacity: .55; cursor: progress; }
.automatic-pitch-status { color: #858b7e; font-size: 9px; line-height: 1.35; }
.remove-file { border: 0; background: transparent; color: #81877a; font-size: 17px; line-height: 1; padding: 0 3px; cursor: pointer; }
.voice-heading { display: flex; align-items: center; justify-content: space-between; }
.voice-nav { cursor: default; border: 0; padding: 0; background: none; color: #667068; font: 9px "DM Mono", monospace; letter-spacing: .06em; }
.voice-nav span { color: #a2a59b; }
.voice-pickers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 13px; }
.voice-picker-group { display: grid; align-content: start; gap: 8px; min-width: 0; }
.voice-picker { display: grid; gap: 6px; min-width: 0; color: #8b8d85; font: 8px "DM Mono", monospace; letter-spacing: .07em; }
.voice-picker select { width: 100%; border: 1px solid #d4d7ca; border-radius: 0; padding: 10px 27px 10px 11px; color: #313d35; background: rgba(255,255,255,.55); font: 600 11px "DM Sans", sans-serif; }
.voice-add-button { justify-self: start; border: 0; border-bottom: 1px solid #afb69d; padding: 0 0 2px; background: transparent; color: #66724f; cursor: pointer; font-size: 9px; }
.voice-add-button:disabled { opacity: .55; cursor: progress; }
.selected-voice-preview { display: flex; align-items: center; gap: 11px; min-height: 51px; margin-top: 9px; padding: 6px 9px; background: rgba(255,255,255,.45); border: 1px solid rgba(23,32,29,.08); }
.selected-voice-preview img { width: 38px; height: 38px; object-fit: cover; object-position: center 35%; border-radius: 50%; background: #d9dece; }
.voice-avatar-fallback { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; color: #536447; background: #e5ebd2; font: 700 13px Manrope, sans-serif; }
.selected-voice-preview div { display: grid; gap: 4px; }
.selected-voice-preview strong { color: #38443b; font: 700 11px Manrope, sans-serif; }
.convert-model-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; color: #66724f; font-size: 10px; text-decoration-color: #afb69d; text-underline-offset: 3px; }
.convert-model-link span { font-size: 13px; }
.voice-card { margin-top: 13px; padding: 0; display: block; overflow: hidden; width: 100%; height: 115px; position: relative; text-align: left; border: 1px solid rgba(23,32,29,.25); cursor: pointer; background: #34403d; transition: border .2s, transform .2s; }
.voice-card:hover { transform: translateY(-1px); }
.voice-card img { position: absolute; inset: 0 0 0 auto; width: 64%; height: 100%; object-fit: cover; object-position: center 37%; filter: saturate(.82); }
.voice-card-shade { position: absolute; inset: 0; background: linear-gradient(90deg,#26322e 0%,#26322e 36%,rgba(38,50,46,.88) 52%,rgba(38,50,46,.02) 100%); }
.voice-name-block { position: absolute; left: 17px; top: 50%; transform: translateY(-49%); display: grid; gap: 8px; }
.voice-kicker { color: #c1cabb; font-size: 8px; }
.voice-name { color: #fffdf7; font: 600 22px Manrope, sans-serif; letter-spacing: -1px; }
.voice-selected { position: absolute; right: 12px; top: 12px; display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; background: rgba(211,235,150,.95); color: #26322e; }
.voice-selected svg { width: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.voice-card-index { position: absolute; right: 15px; bottom: 11px; color: rgba(255,255,255,.74); font-size: 8px; }
.generation-row { display: flex; align-items: center; gap: 15px; margin-top: 18px; }
.create-button { height: 48px; min-width: 167px; display: inline-flex; align-items: center; justify-content: space-between; gap: 23px; padding: 0 15px 0 19px; border: 0; background: var(--ink); color: #fff; cursor: pointer; transition: background .2s, opacity .2s; }
.create-button:not(:disabled):hover { background: #34433b; }
.create-button:disabled { opacity: .42; cursor: not-allowed; }
.button-label { font: 700 12px Manrope, sans-serif; }
.button-icon { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: var(--lime); color: #27312d; font-size: 13px; }
.runtime-note { display: flex; align-items: center; gap: 7px; max-width: 195px; color: #92948b; font-size: 9px; line-height: 1.45; }
.runtime-note strong { font-weight: 600; color: #666c62; }
.lock-icon { font-size: 13px; color: #819269; }
.progress-area { margin-top: 16px; }
.progress-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 10px; color: #636e61; }
#progress-detail { font: 9px "DM Mono", monospace; color: #898d83; }
.progress-track { height: 3px; margin-top: 9px; background: #ddded3; overflow: hidden; }
#progress-bar { display: block; width: 3%; height: 100%; background: #819653; transition: width .35s ease; }
.error-message { color: #b24f38; font-size: 11px; line-height: 1.5; margin: 12px 0 0; max-width: 430px; }
.result-column { display: flex; flex-direction: column; min-height: 439px; padding: 0 19px; background: #e8ebdf; position: relative; overflow: hidden; }
.result-topline { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; padding-top: 17px; font-size: 8px; color: #73796f; }
.result-live { display: flex; align-items: center; gap: 6px; font-size: 8px; }
.result-live i { width: 5px; height: 5px; border-radius: 50%; background: #90a864; }
.record-art { height: 216px; position: relative; margin: 8px -19px 0; overflow: hidden; background: #d9dece; }
.record-glow { position: absolute; width: 255px; height: 255px; left: 50%; top: 42%; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle,rgba(133,180,246,.77) 0%,rgba(133,180,246,.26) 48%,rgba(133,180,246,0) 71%); }
.record-disc { position: absolute; top: 50%; left: 50%; width: 182px; height: 182px; transform: translate(-50%,-47%) rotate(-11deg); display: grid; place-items: center; border-radius: 50%; background: repeating-radial-gradient(circle at center,#303c36 0 1px,#25312c 2px 4px,#34413a 5px 6px); box-shadow: 5px 15px 32px rgba(29,38,32,.23); }
.record-disc::after { content: ""; position: absolute; inset: 13px; border: 1px solid rgba(220,232,211,.09); border-radius: 50%; }
.record-grooves { position: absolute; inset: 30px; border: 1px solid rgba(227,233,215,.14); border-radius: 50%; box-shadow: 0 0 0 5px rgba(255,255,255,.015),0 0 0 10px rgba(255,255,255,.04),0 0 0 17px rgba(255,255,255,.018); }
.record-center { z-index: 1; width: 65px; height: 65px; display: grid; place-items: center; border: 1px solid rgba(23,32,29,.3); border-radius: 50%; background: var(--orange); text-align: center; color: #29332e; font: 500 8px/1.1 "DM Mono", monospace; letter-spacing: .07em; transform: rotate(11deg); }
.record-spark { position: absolute; color: #4e83d4; font-size: 20px; }
.spark-one { left: 21%; top: 26%; }
.spark-two { right: 22%; bottom: 21%; font-size: 12px; color: #849265; }
.art-caption { position: absolute; z-index: 1; display: flex; justify-content: space-between; bottom: 11px; left: 19px; right: 19px; color: #81877b; font: 8px "DM Mono", monospace; letter-spacing: .07em; }
.result-content { flex: 1; position: relative; }
.result-placeholder, .result-ready { padding: 17px 0 15px; }
.result-number { font-size: 8px; color: #7c8276; }
.result-placeholder h2, .result-ready h2 { margin: 8px 0 6px; font: 600 24px/.99 Manrope, sans-serif; letter-spacing: -1.1px; }
.result-placeholder h2 em, .result-ready h2 em { letter-spacing: -1.1px; }
.result-placeholder p { max-width: 280px; margin: 8px 0 0; color: #7b8177; font-size: 10px; line-height: 1.55; }
.result-ready { padding-bottom: 14px; }
.result-ready h2 { margin-bottom: 11px; }
#result-audio { width: 100%; height: 35px; display: block; margin: 10px 0 8px; }
.publish-cover { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.publish-cover > input { min-width: 120px; width: 0; flex: 1 1 140px; min-height: 34px; border: 1px solid #d4d7ca; padding: 0 9px; background: rgba(255,255,255,.55); font-size: 10px; }
.publish-cover button { border: 0; padding: 9px 10px; color: #fff; background: #536447; cursor: pointer; font-size: 10px; white-space: nowrap; }
.publish-cover button:disabled { opacity: .55; cursor: progress; }
.community { padding: 28px 0 7px; border-top: 1px solid rgba(23,32,29,.1); margin-top: 30px; }
.community-heading { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin-bottom: 16px; }
.community-heading-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 14px; }
#creation-notifications[aria-pressed="true"] { color: #536447; border-color: #536447; }
.community-heading h2 { margin: 8px 0 0; font: 600 28px/.98 Manrope, sans-serif; letter-spacing: -1.3px; }
.text-button { border: 0; border-bottom: 1px solid #b7bcad; background: transparent; padding: 0 0 4px; color: #68715f; cursor: pointer; font-size: 10px; }
.community-controls { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin: 17px 0 13px; }
.community-type-toggle, .community-sort-toggle { display: flex; gap: 4px; }
.community-search { min-width: 190px; flex: 1 1 190px; height: 34px; border: 1px solid #d4d7ca; padding: 0 10px; background: #fffdf8; color: #39453c; font-size: 10px; }
.community-search:focus { outline: 1px solid #7d8b6b; border-color: #7d8b6b; }
.community-type-toggle button, .community-sort-toggle button { border: 1px solid #d4d7ca; padding: 8px 11px; background: transparent; color: #777d70; cursor: pointer; font-size: 10px; }
.community-type-toggle button[aria-selected="true"], .community-sort-toggle button[aria-pressed="true"] { border-color: #536447; background: #536447; color: #fff; }
.community-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.community-columns.is-single { grid-template-columns: minmax(0, 1fr); }
.community-panel { min-width: 0; padding: 15px; border: 1px solid #ddded3; background: rgba(255,255,255,.3); }
.community-panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.community-panel-head h3 { margin: 0; font: 700 13px Manrope, sans-serif; }
.community-panel-head span { color: #96978e; font: 8px "DM Mono", monospace; letter-spacing: .06em; }
.voice-upload-form { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; align-items: center; }
.voice-upload-form > input { min-width: 0; height: 34px; border: 1px solid #d4d7ca; padding: 0 9px; background: #fffdf8; font-size: 10px; }
.voice-upload-form > .voice-name-input, .voice-upload-form > .voice-url-input { grid-column: 1 / -1; }
.file-button { position: relative; display: grid; place-items: center; height: 34px; padding: 0 11px; border: 1px solid #cfd3c4; color: #4d5a48; cursor: pointer; font-size: 10px; white-space: nowrap; }
.file-button input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.upload-file-label { min-width: 0; overflow: hidden; color: #8b8d85; font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }
.voice-upload-form > button { grid-column: 1 / -1; border: 0; height: 30px; padding: 0 11px; background: #536447; color: #fff; cursor: pointer; font-size: 10px; }
.community-note { margin: 8px 0 12px; color: #91938a; font-size: 9px; line-height: 1.4; }
.community-list { display: grid; gap: 9px; }
.community-empty { padding: 17px 9px; text-align: center; color: #96978e; font-size: 10px; }
.load-more { display: block; margin: 11px auto 0; border: 0; border-bottom: 1px solid #b7bcad; padding: 0 0 4px; background: transparent; color: #68715f; cursor: pointer; font-size: 10px; }
.community-item { min-width: 0; padding: 10px; border: 1px solid #e1e2d9; background: rgba(255,255,255,.55); }
.community-item-top { display: flex; justify-content: space-between; gap: 8px; align-items: start; }
.community-voice-image { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; object-fit: cover; background: #e5ebd2; }
.community-item strong { display: block; overflow-wrap: anywhere; color: #39453c; font: 700 11px Manrope, sans-serif; }
.community-item small { display: block; margin-top: 4px; color: #92948b; font-size: 9px; }
.community-author { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 5px; color: #78806f; text-decoration: none; font-size: 9px; }
.community-author:hover { color: #39453c; }
.community-author img { width: 19px; height: 19px; border-radius: 50%; object-fit: cover; }
.community-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.community-actions button { border: 1px solid #ccd1c0; padding: 5px 7px; background: transparent; color: #536447; cursor: pointer; font-size: 9px; }
.community-actions button:disabled { opacity: .55; cursor: progress; }
.community-actions .like-button.is-liked { border-color: #7198ce; color: #416fa9; background: #e4eefb; }
.creation-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; }
.creation-actions .community-actions { margin-top: 0; }
.download-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.playlist-save-control, .playlist-save-row { display: flex; gap: 7px; margin-top: 9px; }
.playlist-save-control select, .playlist-save-row select, .playlist-view-select { min-width: 0; height: 32px; flex: 1; border: 1px solid #d4d7ca; padding: 0 8px; background: #fffdf8; color: #39453c; font: 10px "DM Sans", sans-serif; }
.playlist-save-control button, .playlist-save-row button { flex: 0 0 auto; border: 1px solid #ccd1c0; padding: 0 9px; background: transparent; color: #536447; cursor: pointer; font-size: 9px; }
.playlist-save-control button:disabled, .playlist-save-row button:disabled { opacity: .55; cursor: not-allowed; }
.playlist-create-form { display: flex; gap: 7px; margin: 3px 0 14px; }
.playlist-create-form input { min-width: 0; flex: 1; height: 34px; border: 1px solid #d4d7ca; padding: 0 9px; background: #fffdf8; font-size: 10px; }
.playlist-create-form button { flex: 0 0 auto; border: 0; padding: 0 12px; background: #536447; color: #fff; cursor: pointer; font-size: 10px; }
.playlist-view-label { display: block; margin-bottom: 6px; color: #8b8d85; font: 8px "DM Mono", monospace; letter-spacing: .07em; }
.playlist-view-select { display: block; width: 100%; flex: none; }
.playlist-items { display: grid; gap: 8px; margin-top: 10px; }
.playlist-track { display: grid; gap: 4px; padding: 10px; border: 1px solid #e1e2d9; background: rgba(255,255,255,.55); }
.playlist-track-title { justify-self: start; max-width: 100%; border: 0; padding: 0; background: none; color: #39453c; font: 700 11px Manrope, sans-serif; overflow-wrap: anywhere; text-align: left; cursor: pointer; touch-action: manipulation; }
.playlist-track-title:hover { color: #4e83d4; }
.playlist-track.is-current { border-color: #9eae7b; background: #f1f4e8; }
.playlist-track small { color: #92948b; font-size: 9px; }
.playlist-player { display: grid; gap: 7px; margin-top: 10px; padding: 12px; border: 1px solid #d9ddce; background: #eef0e7; }
.playlist-player-title { display: grid; gap: 3px; min-width: 0; }
.playlist-player-title strong { overflow: hidden; color: #39453c; font: 700 12px Manrope, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.playlist-player-title small { min-height: 11px; color: #858a7d; font-size: 9px; }
.playlist-player audio { display: block; width: 100%; height: 34px; }
.playlist-player-controls { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.playlist-player-controls button { min-height: 30px; border: 1px solid #ccd1c0; padding: 0 9px; background: rgba(255,255,255,.55); color: #536447; cursor: pointer; font-size: 10px; }
.playlist-player-controls button:disabled { opacity: .45; cursor: not-allowed; }
.history-folder { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 10px; padding: 10px; border: 1px solid #e1e2d9; background: rgba(255,255,255,.55); color: #536447; text-align: left; cursor: pointer; }
.history-folder > span:first-child { font-size: 19px; }
.history-folder > span:nth-child(2) { display: grid; flex: 1; gap: 3px; }
.history-folder strong { font: 700 10px Manrope, sans-serif; }
.history-folder small { color: #92948b; font-size: 9px; }
.history-folder > span:last-child { font-size: 18px; }
.history-browser { margin-top: 10px; }
.history-back { border: 0; border-bottom: 1px solid #d4d7ca; padding: 0 0 4px; background: none; color: #68715f; cursor: pointer; font-size: 10px; }
.history-browser h4 { margin: 12px 0 3px; color: #39453c; font: 700 13px Manrope, sans-serif; }
.history-track strong { overflow-wrap: anywhere; }
.remove-playlist-track { justify-self: start; border: 0; border-bottom: 1px solid #d4d7ca; padding: 0 0 3px; background: transparent; color: #68715f; cursor: pointer; font-size: 9px; }
.remove-playlist-track:disabled { opacity: .55; cursor: progress; }
.community-actions .download-button { text-decoration: none; border: 1px solid #ccd1c0; padding: 5px 7px; color: #536447; font-size: 9px; }
.comments-toggle { margin-top: 8px; border: 0; border-bottom: 1px solid #d4d7ca; padding: 0 0 4px; background: transparent; color: #68715f; cursor: pointer; font-size: 9px; }
.comments-panel { display: grid; gap: 8px; margin-top: 9px; padding-top: 9px; border-top: 1px solid #e1e2d9; }
.comment-list { display: grid; gap: 8px; }
.comment-item { display: flex; align-items: start; gap: 6px; color: #5e675b; font-size: 10px; line-height: 1.45; }
.comment-item img { width: 19px; height: 19px; flex: 0 0 19px; border-radius: 50%; object-fit: cover; }
.comment-item a { color: #59664e; font-weight: 600; text-decoration: none; }
.comment-item p { overflow-wrap: anywhere; margin: 0; }
.comment-form { display: flex; gap: 6px; }
.comment-form input { min-width: 0; flex: 1; height: 32px; border: 1px solid #d4d7ca; padding: 0 8px; background: #fffdf8; font-size: 10px; }
.comment-form button { border: 0; padding: 0 9px; background: #536447; color: white; cursor: pointer; font-size: 10px; }
.comment-more { justify-self: start; border: 0; border-bottom: 1px solid #d4d7ca; padding: 0 0 3px; background: transparent; color: #68715f; cursor: pointer; font-size: 9px; }
.community-actions audio { width: 100%; height: 28px; }
.community-media { display: block; width: 100%; max-height: 200px; margin-top: 8px; background: #29342f; object-fit: contain; }
.community-error { margin: 10px 0 0; color: #b24f38; font-size: 10px; }
.download-link { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #bdc3b5; padding: 6px 0; text-decoration: none; color: #3e493f; font-size: 10px; }
.download-link span:last-child { font-size: 15px; }
.download-action-button { display: block; width: 100%; border: 0; border-bottom: 1px solid #bdc3b5; padding: 6px 0; background: transparent; color: #536447; text-align: left; font-size: 10px; cursor: pointer; }
.download-action-button:disabled { opacity: .55; cursor: progress; }
.result-foot { position: absolute; bottom: 0; left: 19px; right: 19px; display: flex; justify-content: space-between; padding-bottom: 15px; color: #8c9185; font-size: 7px; }
.result-foot span:last-child { color: #91a167; font-size: 13px; }
.page-foot { display: flex; justify-content: space-between; border-top: 1px solid rgba(23,32,29,.1); padding-top: 17px; margin-top: 24px; color: #999b91; font-size: 8px; }
.page-foot b { color: var(--orange); font-weight: 400; margin: 0 3px; }
.toast { position: fixed; z-index: 10; bottom: 20px; left: 50%; transform: translate(-50%,10px); opacity: 0; pointer-events: none; padding: 10px 15px; background: #27342e; color: white; font-size: 11px; transition: opacity .2s, transform .2s; }
.toast.is-visible { opacity: 1; transform: translate(-50%,0); }

@media (max-width: 800px) {
  .topbar { padding: 0 6vw; }
  .workspace { width: 88vw; padding-top: 44px; }
  .studio-grid { grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); gap: 30px; }
  .result-column { min-height: 423px; }
}
@media (max-width: 650px) {
  .topbar { height: 63px; }
  .local-note { font-size: 7px; letter-spacing: .03em; }
  .workspace { width: min(490px, 88vw); padding-top: 37px; }
  .intro { margin-bottom: 30px; }
  h1 { letter-spacing: -3px; }
  h1 em { letter-spacing: -2px; }
  .intro p { max-width: 300px; line-height: 1.5; }
  .studio-grid { display: flex; flex-direction: column; gap: 27px; }
  .result-column { min-height: 390px; }
  .record-art { height: 190px; }
  .result-placeholder h2, .result-ready h2 { font-size: 22px; }
  .page-foot { margin-top: 24px; }
  .community-heading { align-items: flex-start; flex-direction: column; }
  .community-heading-actions { justify-content: flex-start; }
  .community-columns { grid-template-columns: 1fr; }
}
@media (max-width: 390px) {
  .topbar { padding: 0 5vw; }
  .workspace { width: 90vw; }
  .file-hint { font-size: 7px; }
  .upload-card { padding: 13px 12px; gap: 10px; }
  .upload-icon { flex-basis: 35px; height: 35px; }
  .generation-row { align-items: flex-start; flex-direction: column; gap: 9px; }
  .voice-pickers { grid-template-columns: 1fr; }
  .publish-cover { align-items: stretch; flex-direction: column; }
  .publish-cover > input { min-height: 35px; width: 100%; flex: initial; }
  .video-input-row { align-items: flex-start; flex-direction: column; }
}