:root { color-scheme:dark; }
body { background:#000; }
.gradio-container { background:#000!important; color:#f1f1f1; max-width:1200px!important; margin:auto; padding:0!important; --app-gutter:clamp(18px,3vw,34px); --size-8:var(--app-gutter); font-family:Arial,Helvetica,sans-serif!important; }
#app-header, #speech-player, #voice-picker, #request-status, #app-credits, #voice-options { --block-padding:0px; }
#app-header { margin:0 0 65px; padding:0; border:0; background:transparent; }
.app-header { display:flex; align-items:center; justify-content:space-between; gap:20px; color:#a6a6a6; font:12px/1.5 ui-monospace,monospace; }
.app-header a, .credits a { color:inherit; text-decoration:none; }
.app-header a:hover, .credits a:hover { text-decoration:underline; text-underline-offset:4px; }
#script-input { max-width:760px; margin:0 auto; border:0!important; box-shadow:none!important; background:transparent!important; }
#speech-player { margin:13px calc(-1 * var(--app-gutter)) 0; width:calc(100% + 2 * var(--app-gutter)); max-width:none; padding:0; background:transparent; border:0; }
#voice-picker { margin:8px 0 18px; background:transparent; border:0; padding:0; }
#action-row { justify-content:center; align-items:center; gap:12px; margin:0 auto; max-width:370px; }
#generate-speech { flex:0 1 196px; min-width:196px; max-width:220px; min-height:46px; border:1px solid #f3f3f0; border-radius:8px; background:#f3f3f0; color:#111; box-shadow:none; font:500 15px Arial,sans-serif; }
#generate-speech:disabled { background:#bababa; color:#252525; opacity:1; }
#cancel-speech { flex:0 1 85px; min-width:80px; max-width:100px; min-height:44px; border:1px solid #555; border-radius:8px; background:transparent; color:#ddd; box-shadow:none; }
#request-status { min-height:40px; background:transparent; border:0; padding:8px 0; }
#status-state { text-align:center; color:#bdbdbd; font:12px/1.6 ui-monospace,monospace; margin:0; }
#status-state[role=alert] { color:#f4c5c5; }
#voice-options { max-width:640px; width:100%; margin:4px auto 0; padding:0; background:transparent; border:0; border-radius:0; box-shadow:none; }
#voice-options:not([data-open=true]) #reference-clip, #voice-options:not([data-clip=true]) #reference-clip { display:none; }
#reference-clip { margin:12px 0 4px; --block-border-width:0px; --block-background-fill:#0b0b0b; --block-background-fill-dark:#0b0b0b; }
#app-credits { margin-top:55px; border:0; padding:0; background:transparent; }
.credits { display:flex; justify-content:space-between; align-items:baseline; gap:12px 24px; flex-wrap:wrap; color:#a6a6a6; font:11px/1.7 ui-monospace,monospace; }
.credits p { margin:0; }
.credits details { font:inherit; }
.credits summary { min-height:30px; }
.credits details p { max-width:600px; margin-top:8px; }
#preview-warning { text-align:center; color:#e5c078; font:12px/1.5 ui-monospace,monospace; }
button:focus-visible, select:focus-visible, a:focus-visible, summary:focus-visible { outline:2px solid #eee!important; outline-offset:4px; }
@media(max-width:600px) {
 #app-header { margin-bottom:45px; }
 .app-header { font-size:11px; gap:12px; }
 #speech-player { margin-top:6px; }
 #voice-picker { margin-bottom:20px; }
 #action-row { width:100%; gap:10px; }
 #voice-options { margin-top:8px; }
 #app-credits { margin-top:38px; }
 .credits { justify-content:center; text-align:center; gap:7px; }
 .credits p, .credits details { width:100%; }
}
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; } }
#script-input { --block-padding:0px; width:100%; margin-bottom:12px; }
#reference-clip { background:transparent; border:0; --block-padding:0px; }