:root { font-family: system-ui,sans-serif; color:#263b37; background:#faf9f4; line-height:1.6; color-scheme:light; }
* { box-sizing:border-box; } body { margin:0; } main { max-width:1240px; margin:auto; padding:20px 16px; }
a { color:#365a4b; } h1,h2 { font-family:Georgia,serif; font-weight:normal; } h1 { margin-bottom:8px; } h2 { font-size:1.4rem; }
[hidden] { display:none !important; } button,input,select,textarea { font:inherit; font-size:16px; } button { min-height:44px; padding:8px 12px; border:1px solid #b6c4b7; background:#edf1e9; color:inherit; cursor:pointer; border-radius:4px; } button:disabled { cursor:default; opacity:.6; }
[aria-pressed=true] { border-bottom:3px solid #365a4b; font-weight:600; }
article { border-top:1px solid #d5dcd3; padding:12px 0; } audio,textarea { width:100%; } audio { display:block; margin:12px 0; } textarea { padding:8px; resize:vertical; } label { display:block; margin-top:12px; } input:not([type=checkbox]),select { width:100%; min-height:44px; } input[type=checkbox] { width:24px; height:24px; }
.muted,.status { font-size:.9rem; color:#52645c; } .passage { border:1px solid #d5dcd3; padding:8px; margin:12px 0; } .paragraph { display:block; text-align:left; width:100%; background:transparent; border:0; border-left:3px solid transparent; margin:8px 0; line-height:1.6; font-family:Georgia,serif; } .paragraph:disabled { opacity:1; } .speaking { background:#edf1e9; border-left-color:#365a4b; } .parameters { margin:16px 0; } .parameter { margin-bottom:12px; } output { margin-left:8px; } pre { white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; } section,footer { margin-top:28px; } :focus-visible { outline:3px solid #947226; outline-offset:3px; }

#model-buttons { display:flex; flex-wrap:wrap; gap:10px; margin:24px 0; }
#home h1 { font-family:inherit; font-size:1.5rem; }
#panels > section { margin-top:12px; }
.parameters { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:0 20px; }
.parameters > h3,.parameters > p { grid-column:1 / -1; margin:4px 0; }
#preview-status { font-size:.9rem; }


#workspace { position:relative; }
.model-panel { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:40px; align-items:start; }
.sidebar { border-left:1px solid #d5dcd3; padding-left:24px; }
.parameters { display:block; margin-top:0; }
.listening { animation:reveal 180ms ease; }
@keyframes reveal { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion:reduce) { .listening { animation:none; } }

.previous-recordings { margin-bottom:24px; }
.previous-recordings h3 { margin-bottom:8px; }
.recording-buttons { display:flex; flex-direction:column; gap:8px; }
.saved-recording { text-align:left; font-size:13px; overflow-wrap:anywhere; line-height:1.5; }
.saved-recording[aria-pressed=true] { background:#dde7da; }

.status:empty { display:none; }

.parameter-description { margin:4px 0 0; font-size:.8rem; line-height:1.4; color:#52645c; }

.recording-row { display:flex; align-items:start; gap:6px; min-width:0; }
.recording-row .saved-recording { flex:1; min-width:0; }
.delete-recording { flex:none; padding:4px 9px; font-size:16px; }
.sidebar,.listening { min-width:0; }
.render-terminal { width:100%; max-width:100%; max-height:260px; overflow:auto; padding:12px; background:#18211e; color:#e4eee7; border:1px solid #35473e; border-radius:4px; font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
@media(max-width:720px) { .model-panel { grid-template-columns:minmax(0,1fr); gap:20px; } .sidebar { border-left:0; padding-left:0; } }