studio.css

/* Palette, spacing and typography carried over from the original studio. */
:root, .gradio-container {
  --bg: #f6f5f3; --card: #fff; --soft: #efede9; --ink: #141414;
  --muted: #6b6b66; --border: #e2e0dc; --card-border: #e8e6e2;
  --moment-bg: #fbe9c4; --moment-ink: #7d4b00;
  --scope-bg: #d9ebfa; --scope-ink: #0b5687;
  --mood-bg: #ebe1fa; --mood-ink: #56289e;
  --body-background-fill: var(--bg); --body-text-color: var(--ink);
  --block-background-fill: var(--card); --input-background-fill: var(--card);
  --border-color-primary: var(--border); --block-border-color: var(--border);
  --button-primary-background-fill: var(--ink); --button-primary-text-color: var(--bg);
  --button-primary-background-fill-hover: #30302d;
  --button-secondary-background-fill: var(--card); --button-secondary-border-color: var(--border);
  --button-secondary-text-color: var(--ink); --button-secondary-background-fill-hover: var(--soft);
  --input-border-color: var(--border); --input-radius: 12px;
  --block-label-text-color: var(--muted); --block-title-text-color: var(--ink);
  --body-text-color-subdued: var(--muted);
  font-family: ui-sans-serif, -apple-system, "Segoe UI", Inter, Roboto, sans-serif !important;
}
.dark, .dark .gradio-container {
  --bg: #161615; --card: #201f1d; --soft: #2a2826; --ink: #f3f2ef;
  --muted: #a8a7a1; --border: #35332f; --card-border: #35332f;
  --moment-bg: #463312; --moment-ink: #ffd68a;
  --scope-bg: #133852; --scope-ink: #a3d4fa;
  --mood-bg: #37245b; --mood-ink: #d9c4ff;
  --button-primary-background-fill-hover: #deddd8;
}
body { background: var(--bg); }
.gradio-container { max-width: 980px !important; margin: auto; padding: 26px 32px 48px !important; }
#studio { gap: 16px; }
.hero { margin: 20px 0 8px; }
.hero h1 { font-size: clamp(30px, 5vw, 46px); font-weight: 800; letter-spacing: -.025em; line-height: 1.08; margin: 0 0 10px; color: var(--ink); }
.hero p { font-size: 15px; line-height: 1.55; color: var(--muted); max-width: 640px; }
.hero p + p { margin-top: 10px; }
.hero strong { color: var(--ink); font-weight: 600; }
.hero-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.spacer { flex: 1; }
.pill { display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: 999px; background: var(--card); color: var(--ink); font-size: 13px; padding: 5px 14px; text-decoration: none; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: #b7791f; }
.dot.ready { background: #1f9d55; box-shadow: 0 0 0 3px #1f9d5526; }
.account { position: relative; }
.account summary { cursor: pointer; }
.account a { position: absolute; right: 0; z-index: 10; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 8px 16px; color: var(--ink); }
.card { background: var(--card); border: 1px solid var(--card-border); border-radius: 16px; box-shadow: 0 1px 2px #1414140a; padding: 14px !important; gap: 10px !important; }
.card-head { display: flex; align-items: center; gap: 8px; padding: 0 2px; }
.card-head h2 { font-size: 14px; font-weight: 600; color: var(--ink); }
#app-tabs { border: 0; }
#app-tabs > .tab-nav { margin-bottom: 16px; border: 0; }
#app-tabs > .tabitem { padding: 0; border: 0; background: transparent; }
#app-tabs > .tab-nav button { border-radius: 999px; padding: 7px 18px; color: var(--muted); }
#app-tabs > .tab-nav button.selected { background: var(--card); color: var(--ink); border-color: var(--border); }
#script textarea { font-size: 16px; line-height: 1.6; min-height: 120px; border-radius: 12px; }
.hint, .hint p { color: var(--muted); font-size: 12.5px; }
.examples { flex-wrap: wrap !important; gap: 6px !important; }
.examples button { flex: 0 1 auto; border-radius: 999px; padding: 3px 11px; font-size: 12.5px; height: 29px; min-height: 29px; font-weight: 500; }
.palette { gap: 5px !important; align-items: center; flex-wrap: wrap !important; }
.palette .plabel { width: 60px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.palette button { flex: 0 1 auto; min-height: 25px; height: auto; padding: 3px 9px; border: 0; border-radius: 999px; font-size: 12px; font-weight: 500; }
.palette.point button { background: var(--moment-bg); color: var(--moment-ink); }
.palette.scope button { background: var(--scope-bg); color: var(--scope-ink); }
.palette.mood button { background: var(--mood-bg); color: var(--mood-ink); }
#voice-mode .wrap { display: flex; flex-wrap: nowrap; background: var(--soft); border-radius: 999px; padding: 3px; gap: 3px; }
#voice-mode label { flex: 1; justify-content: center; border: 0; border-radius: 999px; background: transparent; padding: 7px 6px; }
#voice-mode input, #voice-presets input { position: absolute; opacity: 0; width: 1px; height: 1px; }
#voice-mode label.selected, #voice-mode label:has(input:checked) { background: var(--card); box-shadow: 0 1px 2px #14141414; }
#voice-presets label { border-radius: 999px; padding: 4px 12px; font-size: 12.5px; }
#voice-presets label.selected, #voice-presets label:has(input:checked) { background: var(--ink); color: var(--bg); }
#perform { border-radius: 999px; padding: 13px 20px; font-size: 16px; min-height: 50px; }
.direct h3 { font-size: 14px; margin-top: 8px; }
.boot { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 16px; }
.boot p { color: var(--muted); font-size: 13px; margin-top: 4px; }
.links { display: flex; gap: 8px; flex-wrap: wrap; }
.links a { border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; font-size: 13px; text-decoration: none; color: var(--ink); }
.links a:hover { border-color: var(--ink); }
.credits, .fine { color: var(--muted); font-size: 12px; line-height: 1.6; }
.credits p { margin-top: 8px; }
code { background: var(--soft); padding: 0 4px; border-radius: 5px; }
@media (max-width: 640px) {
  .gradio-container { padding: 16px 12px 32px !important; }
  .hero { margin-top: 8px; }
  .card { padding: 12px !important; }
  #voice-mode label { font-size: 12px; }
}
.gradio-container #topbar { align-items: center; gap: 8px; }
.gradio-container #theme-toggle { border: 0; border-radius: 50%; width: 32px; height: 32px; min-height: 32px; padding: 0; background: var(--card); color: var(--ink); }
.gradio-container .examples button { background: var(--card); border: 1px solid var(--border); color: var(--ink); }
.gradio-container .card-head h2 { margin: 0; }
.gradio-container .card .hide-container { padding: 0; }
.gradio-container #app-tabs > div[role="tablist"] { margin-bottom: 16px; border: 0; }
.gradio-container #app-tabs > div[role="tablist"] button { border-radius: 999px; padding: 7px 18px; }
.gradio-container #app-tabs > div[role="tablist"] button[aria-selected="true"] { background: var(--card); color: var(--ink); border: 1px solid var(--border); }
.gradio-container .drama-script-mirror { position: absolute; pointer-events: none; white-space: pre-wrap; overflow-wrap: break-word; overflow: hidden; color: var(--ink); background: transparent; box-sizing: border-box; }
.drama-script-mirror .h-point { background: var(--moment-bg); color: var(--moment-ink); border-radius: 4px; }
.drama-script-mirror .h-tag { background: var(--scope-bg); color: var(--scope-ink); border-radius: 4px; }
.drama-script-mirror .h-style { background: var(--mood-bg); color: var(--mood-ink); border-radius: 4px; }
.drama-script-mirror .h-note { background: #e3f1e3; color: #2a662d; border-radius: 4px; }
.dark .drama-script-mirror .h-note { background: #1e3a20; color: #b5e3b7; }
#script textarea.drama-highlighted { color: transparent !important; caret-color: var(--ink); }
#script textarea.drama-highlighted::selection { background: #7878ff47; color: transparent; }
.gradio-container .drama-script-mirror { z-index: 2; }
.gradio-container #app-tabs .tab-nav { margin-bottom: 16px; border-bottom: 0; }
.gradio-container #app-tabs .tab-nav button[role="tab"] { border-radius: 999px; }
.gradio-container #app-tabs .tab-nav button[aria-selected="true"] { background: var(--card); border: 1px solid var(--border); }
/* Gradio scopes media rules to .contain, so responsive padding belongs to the
   inner studio instead of .gradio-container. Remove the native outer padding. */
.gradio-container { padding: 0 !important; }
.gradio-container .main { padding: 0 !important; width: 100%; }
#studio { padding: 26px 32px 48px; }
@media (max-width: 640px) { #studio { padding: 16px 12px 32px; } }
.gradio-container .palette { justify-content: flex-start; }
.gradio-container .palette > .block { flex: 0 0 72px !important; width: 72px; min-width: 72px !important; }
.gradio-container #voice-presets label { border: 1px solid var(--border); }
/* The stage is a custom Gradio HTML component, with the original player styling. */
#studio:not([data-stage-busy="true"]):not([data-stage-playing="true"]) #stop { display: none; }
#stop { border-radius: 999px; min-height: 50px; }
#the-stage:not(.has-take) .stage-direct { display: none; }

/* Keep the resources in the introduction, before the studio. */
.resource-links { gap: 8px; margin: 0 0 6px; }
.resource-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 9px 16px; background: var(--card); font-size: 14px; font-weight: 600; }
.credits { font-size: 13px; }
.credits h2 { margin: 0 0 10px; color: var(--ink); font-size: 16px; font-weight: 650; }
@media (max-width: 640px) {
  .resource-links { gap: 7px; }
  .resource-links a { min-height: 40px; padding: 8px 12px; font-size: 13px; }
}