/* TextToDialogue AI Studio 3.0 — page-scoped 2026 interface */

.ttd-ai-page {
  --ai-bg: #070911;
  --ai-panel: #0d1120;
  --ai-panel-2: #11172a;
  --ai-line: rgba(172, 186, 228, .15);
  --ai-line-strong: rgba(172, 186, 228, .25);
  --ai-text: #f6f7ff;
  --ai-muted: #9da8c4;
  --ai-violet: #8b7cff;
  --ai-violet-2: #6e5cff;
  --ai-cyan: #42d9f5;
  --ai-green: #55e6b2;
  --ai-coral: #ff7890;
  background: var(--ai-bg);
  color: var(--ai-text);
}

/* Compact Studio hero and focused FAQ (2026 refresh). */
@media (min-width: 1100px) {
  .ttd-ai-page .ttd-modern-hero {
    grid-template-columns: minmax(0, 1.42fr) minmax(330px, .58fr);
    gap: clamp(24px, 3.5vw, 54px);
    align-items: center;
    margin-bottom: 32px;
  }
  .ttd-ai-page .ttd-modern-hero h1 {
    max-width: none;
    white-space: nowrap;
    font-size: clamp(44px, 5.3vw, 72px);
    line-height: 1;
    letter-spacing: -.058em;
  }
}
.ttd-ai-page .ttd-free-tagline {
  display: inline-flex;
  align-items: center;
  width: auto;
  margin: 15px 0 0;
  padding: 7px 11px;
  border: 1px solid rgba(69, 213, 177, .22);
  border-radius: 999px;
  background: rgba(69, 213, 177, .07);
  color: #69dfbf;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.2;
  white-space: nowrap;
}
.studio-seo-faq {
  padding: 64px 18px 78px;
  border-top: 1px solid rgba(153, 165, 219, .14);
  background: linear-gradient(180deg, #08091d, #090b22);
  color: #f5f7ff;
}
.studio-faq-wrap { width: min(1120px, 100%); margin: 0 auto; }
.studio-faq-wrap > header { max-width: 760px; margin-bottom: 25px; }
.studio-faq-wrap > header > span { color: #52ccdd; font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.studio-faq-wrap h2 { margin: 9px 0 8px; color: #f7f8ff; font-size: clamp(30px, 4.5vw, 52px); line-height: 1.04; letter-spacing: -.048em; }
.studio-faq-wrap header p { margin: 0; color: #929db9; }
.studio-faq-list {
  padding: 7px 25px;
  border: 1px solid rgba(153, 165, 219, .17);
  border-radius: 22px;
  background: linear-gradient(155deg, rgba(19, 24, 49, .98), rgba(13, 17, 38, .98));
  box-shadow: 0 22px 60px rgba(0, 0, 0, .18);
}
.studio-faq-list details { border-top: 1px solid rgba(153, 165, 219, .15); }
.studio-faq-list details:first-child { border-top: 0; }
.studio-faq-list summary { padding: 18px 0; color: #eef1ff; font-weight: 850; cursor: pointer; }
.studio-faq-list p { margin: 0 0 20px; color: #9ba5c2; line-height: 1.7; }
@media (max-width: 1099px) {
  .ttd-ai-page .ttd-modern-hero h1 { white-space: normal; }
}
@media (max-width: 600px) {
  .studio-seo-faq { padding: 48px 12px 58px; }
  .studio-faq-list { padding: 5px 17px; border-radius: 18px; }
}

.ttd-ai-page .topbar {
  position: relative;
  z-index: 50;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(7, 9, 17, .88);
  backdrop-filter: blur(18px);
}

.ttd-ai-page .nav { max-width: var(--max); }
.ttd-ai-page .brand,
.ttd-ai-page .navlinks a,
.ttd-ai-page .nav-dropbtn { color: #dce2f5; }
.ttd-ai-page .navlinks a:hover,
.ttd-ai-page .nav-dropbtn:hover { color: #fff; }
.ttd-ai-page .nav-cta .btn.secondary {
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  color: #fff;
}
.ttd-ai-page .nav-cta .btn.primary {
  border-color: transparent;
  background: linear-gradient(135deg, var(--ai-violet), var(--ai-violet-2));
  color: #fff;
  box-shadow: 0 8px 28px rgba(110,92,255,.25);
}
.ttd-ai-page .menu-btn { color: #fff; }

.ttd-modern-studio {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 72px 28px 86px;
  background:
    radial-gradient(ellipse 60% 34% at 50% -5%, rgba(119, 91, 255, .32), transparent 72%),
    radial-gradient(circle at 2% 30%, rgba(27, 170, 218, .12), transparent 26rem),
    radial-gradient(circle at 98% 76%, rgba(155, 74, 255, .1), transparent 30rem),
    linear-gradient(180deg, #080a13 0%, #070911 100%);
  color: var(--ai-text);
}

.ttd-modern-studio::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .22;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(147,164,216,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(147,164,216,.08) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
}

.ttd-modern-studio .clean-home-inner {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  text-align: left;
}

/* Component styles must never override native/JavaScript visibility state. */
.ttd-modern-studio [hidden] { display: none !important; }

.ttd-modern-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .72fr);
  gap: clamp(32px, 6vw, 90px);
  align-items: end;
  margin-bottom: 48px;
}

.ttd-modern-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: #bcb4ff;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .18em;
}
.ttd-modern-eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ai-green);
  box-shadow: 0 0 0 5px rgba(85,230,178,.1), 0 0 20px rgba(85,230,178,.65);
}

.ttd-modern-hero h1 {
  max-width: 860px;
  margin: 0;
  color: #fff;
  font-size: clamp(54px, 7.2vw, 104px);
  font-weight: 820;
  line-height: .91;
  letter-spacing: -.065em;
}
.ttd-modern-hero h1 span {
  color: transparent;
  background: linear-gradient(100deg, #a698ff 4%, #6ee7f7 52%, #86f5c5 96%);
  background-clip: text;
  -webkit-background-clip: text;
}
.ttd-modern-hero p {
  max-width: 720px;
  margin: 24px 0 0;
  color: var(--ai-muted);
  font-size: 17px;
  line-height: 1.7;
}

.ttd-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 25px;
}
.ttd-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #c3cbe0;
  font-size: 12px;
  font-weight: 700;
}
.ttd-hero-meta i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #68728e;
}
.ttd-hero-meta i.live { background: var(--ai-green); box-shadow: 0 0 11px rgba(85,230,178,.8); }

.ttd-signal-strip {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: 22px;
  align-items: center;
  min-height: 152px;
  padding: 26px;
  border: 1px solid rgba(166, 152, 255, .23);
  background: linear-gradient(145deg, rgba(19,23,43,.88), rgba(10,14,27,.72));
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 26px 70px rgba(0,0,0,.25);
  overflow: hidden;
}
.ttd-signal-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(139,124,255,.09), transparent 70%);
}
.ttd-ai-orb {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.55), transparent 13%),
    linear-gradient(145deg, #9b8cff, #5540e8 54%, #29a6ca);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  box-shadow: 0 0 0 10px rgba(139,124,255,.06), 0 0 42px rgba(139,124,255,.28);
}
.ttd-wave-bars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(3px, .45vw, 7px);
  height: 76px;
  overflow: hidden;
}
.ttd-wave-bars i {
  width: clamp(3px, .35vw, 5px);
  height: 18%;
  border-radius: 4px;
  background: linear-gradient(to top, var(--ai-violet), var(--ai-cyan));
  box-shadow: 0 0 12px rgba(66,217,245,.28);
  animation: ttdWave 1.65s ease-in-out infinite alternate;
}
.ttd-wave-bars i:nth-child(2n) { height: 42%; animation-delay: -.4s; }
.ttd-wave-bars i:nth-child(3n) { height: 72%; animation-delay: -.8s; }
.ttd-wave-bars i:nth-child(5n) { height: 94%; animation-delay: -1.15s; }
@keyframes ttdWave { to { transform: scaleY(.46); opacity: .55; } }
.ttd-signal-copy { min-width: 106px; }
.ttd-signal-copy small { display: block; color: #77829e; font-size: 9px; font-weight: 850; letter-spacing: .16em; }
.ttd-signal-copy strong { display: block; margin-top: 6px; color: #ecf1ff; font-size: 13px; }

.ttd-modern-progress {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 720px;
  margin: 0 auto 22px;
}
.ttd-modern-progress span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #66718d;
  font-size: 11px;
  font-weight: 800;
}
.ttd-modern-progress span:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(50% + 58px);
  width: calc(100% - 116px);
  height: 1px;
  background: rgba(161,174,216,.18);
}
.ttd-modern-progress b {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(154,168,211,.22);
  border-radius: 50%;
  background: #0b0e1a;
  color: #727e9a;
  font-size: 11px;
}
.ttd-modern-progress em { font-style: normal; }
.ttd-modern-progress .active { color: #e9e7ff; }
.ttd-modern-progress .active b {
  border-color: #8c7cff;
  background: #7968f4;
  color: #fff;
  box-shadow: 0 0 24px rgba(121,104,244,.38);
}

.ttd-modern-studio .center-tool-box {
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(20px, 3vw, 42px);
  box-sizing: border-box;
  border: 1px solid var(--ai-line);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(15,20,37,.96), rgba(8,11,22,.96));
  color: var(--ai-text);
  box-shadow: 0 38px 100px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.04);
}
.ttd-modern-studio .center-tool-box::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139,124,255,.8), rgba(66,217,245,.55), transparent);
}

.ttd-modern-studio .ttd-wizard-stage { width: 100%; scroll-margin-top: 28px; }
.ttd-modern-studio .ttd-wizard-stage[hidden] { display: none !important; }
.ttd-modern-studio .ttd-stage-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--ai-line);
}
.ttd-modern-studio .ttd-stage-heading span {
  display: block;
  margin-bottom: 8px;
  color: #8c7cff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
}
.ttd-modern-studio .ttd-stage-heading h2 {
  margin: 0;
  color: #f8f9ff;
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.04em;
}
.ttd-modern-studio .ttd-stage-heading p {
  max-width: 690px;
  margin: 9px 0 0;
  color: var(--ai-muted);
  font-size: 13px;
  line-height: 1.55;
}
.ttd-modern-studio .ttd-no-install-badge {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid rgba(85,230,178,.24);
  border-radius: 8px;
  background: rgba(85,230,178,.08);
  color: #7af0c4;
  font-size: 10px;
  font-weight: 850;
}

.ttd-modern-studio .home-mini-tabs {
  position: static;
  display: inline-flex;
  width: auto;
  max-width: 100%;
  margin: 0 0 16px;
  padding: 4px;
  gap: 3px;
  border: 1px solid var(--ai-line);
  border-radius: 11px;
  background: #090d19;
}
.ttd-modern-studio .home-mini-tabs button {
  min-height: 40px;
  padding: 9px 16px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #7f8aa7;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.ttd-modern-studio .home-mini-tabs button:hover { color: #e7e9f7; }
.ttd-modern-studio .home-mini-tabs button.active {
  background: #1b2035;
  color: #fff;
  box-shadow: inset 0 1px rgba(255,255,255,.06);
}

.ttd-modern-studio .center-tool-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 34px;
  margin-bottom: 10px;
  color: #7984a0;
  font-size: 11px;
  font-weight: 750;
}
.ttd-modern-studio .center-tool-top > div { display: flex; gap: 8px; }
.ttd-modern-studio .center-tool-top a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid var(--ai-line);
  border-radius: 7px;
  background: rgba(255,255,255,.025);
  color: #bcb4ff;
  text-decoration: none;
  font-size: 10px;
  font-weight: 800;
}

.ttd-modern-studio .home-tab-panel { display: none; }
.ttd-modern-studio .home-tab-panel.active { display: block; }
.ttd-modern-studio textarea {
  width: 100%;
  min-height: 390px;
  padding: 25px;
  resize: vertical;
  box-sizing: border-box;
  border: 1px solid rgba(157,174,220,.18);
  border-radius: 14px;
  outline: none;
  background:
    linear-gradient(90deg, rgba(139,124,255,.06) 1px, transparent 1px),
    #090d19;
  background-size: 42px 100%;
  color: #e8ecf8;
  caret-color: var(--ai-cyan);
  font: 500 14px/1.85 ui-monospace, SFMono-Regular, Consolas, monospace;
  box-shadow: inset 0 1px 14px rgba(0,0,0,.2);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.ttd-modern-studio textarea::placeholder { color: #536079; }
.ttd-modern-studio textarea:focus {
  border-color: rgba(139,124,255,.68);
  box-shadow: 0 0 0 3px rgba(139,124,255,.1), inset 0 1px 14px rgba(0,0,0,.2);
}

.ttd-modern-studio .clean-file-box {
  display: grid;
  place-items: center;
  min-height: 190px;
  margin-bottom: 14px;
  padding: 28px;
  border: 1px dashed rgba(139,124,255,.45);
  border-radius: 14px;
  background: rgba(139,124,255,.04);
  color: var(--ai-muted);
  text-align: center;
}
.ttd-modern-studio .clean-file-box strong { margin-top: 12px; color: #e5e7f5; }
.ttd-modern-studio .clean-file-box span { margin-top: 5px; font-size: 11px; }
.ttd-modern-studio .clean-file-box input { max-width: 100%; color: #aeb8d3; }

.ttd-modern-studio .ttd-voice-workbench {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.ttd-modern-studio .ttd-voice-workbench > .browser-flow-panel:first-child { grid-column: 1 / -1; }
.ttd-modern-studio .ttd-voice-workbench > .browser-flow-panel:nth-child(2) { grid-column: 1 / -1; }
.ttd-modern-studio .browser-flow-panel {
  position: relative;
  margin: 0;
  padding: 22px;
  border: 1px solid var(--ai-line);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(21,27,48,.85), rgba(12,16,30,.88));
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}
.ttd-modern-studio .browser-flow-panel:first-child::before,
.ttd-modern-studio .expression-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22px;
  right: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(66,217,245,.6), transparent);
}
.ttd-modern-studio .expression-panel::before { background: linear-gradient(90deg, transparent, rgba(85,230,178,.6), transparent); }
.ttd-modern-studio .flow-step-label {
  margin-bottom: 15px;
  color: #f1f3ff;
  font-size: 13px;
  font-weight: 850;
}
.ttd-modern-studio .voice-attention-note,
.ttd-modern-studio .server-voice-notice {
  margin: 0 0 15px;
  padding: 11px 13px;
  border: 1px solid rgba(66,217,245,.14);
  border-radius: 8px;
  background: rgba(66,217,245,.055);
  color: #9fb9ca;
  font-size: 10px;
  line-height: 1.5;
}
.ttd-modern-studio .voice-attention-note strong,
.ttd-modern-studio .server-voice-notice strong { color: #d9f8ff; }

.ttd-modern-studio .unified-voice-selectors {
  display: grid;
  grid-template-columns: minmax(180px,.72fr) minmax(260px,1.28fr);
  gap: 12px;
}
.ttd-modern-studio .unified-voice-selectors label,
.ttd-modern-studio .audio-effect-stage > label {
  display: grid;
  gap: 7px;
  color: #8994af;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .04em;
}
.ttd-modern-studio .ttd-language-search-control {
  display: grid;
  gap: 7px;
  min-width: 0;
}
.ttd-modern-studio .ttd-language-search-control > label {
  display: block;
}
.ttd-modern-studio .ttd-search-field {
  position: relative;
}
.ttd-modern-studio .ttd-search-field > span {
  position: absolute;
  z-index: 1;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: #8f7cff;
  font-size: 18px;
  line-height: 1;
  pointer-events: none;
}
.ttd-modern-studio .ttd-search-field input[type="search"] {
  width: 100%;
  min-height: 46px;
  box-sizing: border-box;
  padding: 10px 13px 10px 38px;
  border: 1px solid var(--ai-line-strong);
  border-radius: 9px;
  outline: none;
  background: #090d19;
  color: #e4e8f7;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
}
.ttd-modern-studio .ttd-language-search-control small {
  color: #76819c;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: normal;
}
.ttd-modern-studio select,
.ttd-modern-studio input[type="text"] {
  width: 100%;
  min-height: 46px;
  padding: 10px 38px 10px 13px;
  box-sizing: border-box;
  border: 1px solid var(--ai-line-strong);
  border-radius: 9px;
  outline: none;
  background-color: #090d19;
  color: #e4e8f7;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
}
.ttd-modern-studio select:focus,
.ttd-modern-studio input:focus,
.ttd-modern-studio button:focus-visible,
.ttd-modern-studio a:focus-visible {
  outline: 2px solid rgba(139,124,255,.75);
  outline-offset: 2px;
}
.ttd-modern-studio .voice-catalog-summary,
.ttd-modern-studio .voice-preset-note {
  margin-top: 10px;
  color: #76819c;
  font-size: 10px;
  line-height: 1.55;
}
.ttd-modern-studio .login-required-note { margin: 10px 0; }
.ttd-modern-studio .login-required-note a { color: #a99eff; font-size: 10px; font-weight: 800; }

.ttd-modern-studio .mini-control-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 9px;
  margin-top: 14px;
}
.ttd-modern-studio .mini-control-grid label {
  display: grid;
  gap: 7px;
  padding: 11px;
  border: 1px solid rgba(159,174,217,.1);
  border-radius: 9px;
  background: rgba(255,255,255,.025);
  color: #8792ad;
  font-size: 9px;
  font-weight: 850;
}
.ttd-modern-studio input[type="range"] { width: 100%; accent-color: var(--ai-violet); }
.ttd-modern-studio .mini-control-grid small { color: #b8afff; font-weight: 900; }

.ttd-modern-studio .preview-stage-btn,
.ttd-modern-studio .generate-full-btn,
.ttd-modern-studio .ttd-wizard-next,
.ttd-modern-studio .ttd-wizard-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 11px 18px;
  border-radius: 9px;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .18s ease, filter .18s ease, border-color .18s ease;
}
.ttd-modern-studio .preview-stage-btn,
.ttd-modern-studio .generate-full-btn { width: 100%; margin-top: 14px; border: 0; color: #fff; }
.ttd-modern-studio .tts-preview { background: linear-gradient(135deg, #7968f4, #5d4dd7); }
.ttd-modern-studio .expression-preview { background: linear-gradient(135deg, #159a9e, #126e86); }
.ttd-modern-studio .preview-stage-btn:hover,
.ttd-modern-studio .generate-full-btn:hover,
.ttd-modern-studio .ttd-wizard-next:hover,
.ttd-modern-studio .ttd-wizard-back:hover { transform: translateY(-1px); filter: brightness(1.08); }

.ttd-modern-studio .ai-voice-gate {
  margin-top: 13px;
  padding: 15px;
  border: 1px solid rgba(255,190,105,.24);
  border-radius: 10px;
  background: rgba(255,171,78,.07);
  color: #d9bd9b;
}
.ttd-modern-studio .ai-voice-gate strong { color: #ffe5c5; }
.ttd-modern-studio .ai-voice-gate p { margin: 7px 0 12px; font-size: 11px; line-height: 1.5; }
.ttd-modern-studio .ai-voice-gate .ai-voice-meta { display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
.ttd-modern-studio .ai-voice-gate .ai-voice-meta[hidden] { display:none !important; }
.ttd-modern-studio .ai-voice-gate .ai-voice-meta a { color:#fff; font-weight:800; text-decoration:underline; text-underline-offset:3px; }
.ttd-modern-studio .ai-voice-gate .btn {
  display: inline-flex;
  min-height: 37px;
  align-items: center;
  justify-content: center;
  padding: 7px 11px;
  border: 0;
  border-radius: 7px;
  background: #7968f4;
  color: #fff;
  text-decoration: none;
  font-size: 10px;
  font-weight: 900;
}
.ttd-modern-studio .ai-model-progress { height: 6px; margin-top: 12px; overflow: hidden; background: rgba(255,255,255,.08); }
.ttd-modern-studio .ai-model-progress span { display:block; width:0; height:100%; background:linear-gradient(90deg,var(--ai-violet),var(--ai-green)); }

.ttd-modern-studio .ttd-wizard-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--ai-line);
}
.ttd-modern-studio .ttd-wizard-actions.end { justify-content: flex-end; }
.ttd-modern-studio .ttd-wizard-actions.start { justify-content: flex-start; }
.ttd-modern-studio .ttd-wizard-next {
  gap: 10px;
  border: 0;
  background: linear-gradient(135deg, #8b7cff, #6654e7);
  color: #fff;
  box-shadow: 0 12px 28px rgba(110,92,255,.24);
}
.ttd-modern-studio .ttd-wizard-next span { font-size: 17px; line-height: 1; }
.ttd-modern-studio .ttd-wizard-back {
  border: 1px solid var(--ai-line-strong);
  background: transparent;
  color: #aab3ca;
}

.ttd-modern-studio .server-export-panel {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: clamp(22px,4vw,44px);
  box-sizing: border-box;
  border: 1px solid rgba(139,124,255,.26);
  border-radius: 14px;
  background:
    radial-gradient(circle at 100% 0, rgba(66,217,245,.13), transparent 26rem),
    radial-gradient(circle at 0 100%, rgba(139,124,255,.16), transparent 30rem),
    #0a0e1c;
  box-shadow: inset 0 1px rgba(255,255,255,.04);
}
.ttd-modern-studio .raw-export-panel { margin-top: 16px; }
.ttd-modern-studio .raw-export-panel .generate-full-btn {
  background: linear-gradient(100deg, #6656df, #7968f4 58%, #347bc2);
}
.ttd-modern-studio .dialogue-stage-grid {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
  gap: 16px;
  align-items: start;
}
.ttd-modern-studio .dialogue-stage-grid .expression-panel,
.ttd-modern-studio .dialogue-stage-grid .dialogue-export-panel { box-sizing: border-box; }
.ttd-modern-studio .dialogue-next {
  background: linear-gradient(135deg, #159a9e, #126e86);
  box-shadow: 0 12px 28px rgba(18,110,134,.2);
}
.ttd-modern-studio .server-export-panel .flow-step-label { color: #fff; font-size: 18px; }
.ttd-modern-studio .server-export-panel .generate-full-btn {
  min-height: 58px;
  background: linear-gradient(100deg, #7968f4, #7e66eb 52%, #168faa);
  box-shadow: 0 15px 36px rgba(93,77,215,.23);
}
.ttd-modern-studio .server-generate-status { margin-top: 12px; color: #aab4cd; font-size: 11px; }
.ttd-modern-studio .server-generate-status.error { color: #ff9aac; }
.ttd-modern-studio .server-generate-status.success { color: #78ebbd; }
.ttd-modern-studio .server-progress { overflow:hidden; height:7px; margin-top:12px; background:rgba(255,255,255,.08); }
.ttd-modern-studio .server-progress-bar { height:100%; width:0; background:linear-gradient(90deg,var(--ai-violet),var(--ai-cyan),var(--ai-green)); }
.ttd-modern-studio .generated-audio-result,
.ttd-modern-studio .audio-effect-stage {
  margin-top: 16px;
  padding: 17px;
  border: 1px solid var(--ai-line);
  border-radius: 10px;
  background: rgba(255,255,255,.035);
}
.ttd-modern-studio .generated-audio-result audio { width:100%; filter: saturate(.75); }
.ttd-modern-studio .generated-audio-result small { display:block; margin-top:9px; color:#7f8aa5; font-size:10px; }
.ttd-modern-studio .generated-audio-result .btn {
  display:inline-flex;
  margin-top:10px;
  padding:9px 12px;
  border-radius:7px;
  background:#f3f1ff;
  color:#332772;
  text-decoration:none;
  font-size:10px;
  font-weight:900;
}

.ttd-modern-studio .clean-home-note {
  max-width: 760px;
  margin: 18px auto 0;
  color: #65708b;
  text-align: center;
  font-size: 10px;
  line-height: 1.6;
}

/* Continue the AI visual language through the public voice shelf. */
.ttd-ai-page .featured-public-voices {
  padding: 88px 28px;
  background: linear-gradient(180deg,#070911,#0a0d18);
  color: #fff;
}
.ttd-ai-page .featured-public-voices .featured-wrap { width:min(1180px,100%); margin:auto; }
.ttd-ai-page .featured-public-voices .section-kicker { color:#8f82ff; font-size:10px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; }
.ttd-ai-page .featured-public-voices h2 { margin:10px 0; color:#f7f8ff; font-size:clamp(32px,4vw,56px); letter-spacing:-.045em; }
.ttd-ai-page .featured-public-voices > .featured-wrap > p { color:#8792ad; }
.ttd-ai-page .voice-card-row { gap:16px; }
.ttd-ai-page .public-voice-card {
  border:1px solid rgba(170,184,226,.15);
  border-radius:14px;
  background:linear-gradient(145deg,#12182a,#0c101e);
  box-shadow:0 25px 55px rgba(0,0,0,.22);
  color:#fff;
}
.ttd-ai-page .public-voice-card h3 { color:#fff; }
.ttd-ai-page .public-voice-card p { color:#9aa5bf; }
.ttd-ai-page .create-voice-pill { border-radius:8px; background:#7867ef; color:#fff; }

/* Make the remaining editorial content feel like one product, not an old landing page. */
.ttd-ai-page .home-usecases,
.ttd-ai-page .how-it-works-home,
.ttd-ai-page .seo-content-block,
.ttd-ai-page .home-final-cta { background:#0a0d18; color:#eef1ff; }
.ttd-ai-page .home-usecases .section-head h2,
.ttd-ai-page .how-it-works-home .section-head h2,
.ttd-ai-page .seo-content-block h2,
.ttd-ai-page .home-final-cta h2 { color:#f5f6ff; }
.ttd-ai-page .home-usecases .section-head p,
.ttd-ai-page .how-it-works-home p,
.ttd-ai-page .seo-content-block p,
.ttd-ai-page .home-final-cta p { color:#909bb5; }
.ttd-ai-page .usecase-grid a,
.ttd-ai-page .home-steps-grid article,
.ttd-ai-page .seo-copy-card {
  border-color:rgba(166,181,225,.13);
  background:#101526;
  color:#eef1ff;
  box-shadow:none;
}
.ttd-ai-page .usecase-grid a span,
.ttd-ai-page .home-steps-grid article p { color:#8994ad; }
.ttd-ai-page .site-footer { border-top:1px solid rgba(255,255,255,.08); background:#060810; color:#a5aec3; }
.ttd-ai-page .site-footer h3,
.ttd-ai-page .site-footer .brand { color:#fff; }
.ttd-ai-page .site-footer a { color:#9da7bf; }

@media (max-width: 980px) {
  .ttd-modern-hero { grid-template-columns: 1fr; }
  .ttd-signal-strip { min-height: 112px; }
  .ttd-modern-studio .ttd-voice-workbench { grid-template-columns:1fr; }
  .ttd-modern-studio .ttd-voice-workbench > .browser-flow-panel:first-child { grid-column:auto; }
  .ttd-modern-studio .ttd-voice-workbench > .browser-flow-panel:nth-child(2) { grid-column:auto; }
  .ttd-modern-studio .dialogue-stage-grid { grid-template-columns:1fr; }
}

@media (max-width: 680px) {
  .ttd-modern-studio { padding:44px 12px 58px; }
  .ttd-modern-hero { gap:28px; margin-bottom:34px; }
  .ttd-modern-hero h1 { font-size:clamp(48px,16vw,72px); }
  .ttd-modern-hero p { font-size:14px; }
  .ttd-hero-meta { display:grid; gap:8px; }
  .ttd-signal-strip { grid-template-columns:auto 1fr; min-height:96px; padding:16px; }
  .ttd-ai-orb { width:54px; height:54px; font-size:14px; }
  .ttd-wave-bars { height:54px; }
  .ttd-signal-copy { display:none; }
  .ttd-modern-progress { margin-bottom:16px; }
  .ttd-modern-progress span { display:grid; justify-items:center; gap:6px; text-align:center; }
  .ttd-modern-progress span:not(:last-child)::after { top:15px; left:calc(50% + 25px); width:calc(100% - 50px); }
  .ttd-modern-progress em { font-size:9px; }
  .ttd-modern-studio .center-tool-box { padding:16px; border-radius:15px; }
  .ttd-modern-studio .ttd-stage-heading { display:block; margin-bottom:18px; padding-bottom:17px; }
  .ttd-modern-studio .ttd-no-install-badge { display:inline-flex; margin-top:12px; }
  .ttd-modern-studio .home-mini-tabs { display:grid; grid-template-columns:repeat(3,1fr); width:100%; }
  .ttd-modern-studio .home-mini-tabs button { padding:8px 5px; font-size:9px; }
  .ttd-modern-studio .center-tool-top { align-items:flex-start; }
  .ttd-modern-studio .center-tool-top > div { flex-wrap:wrap; justify-content:flex-end; }
  .ttd-modern-studio textarea { min-height:300px; padding:16px; font-size:12px; background-size:32px 100%; }
  .ttd-modern-studio .browser-flow-panel,
  .ttd-modern-studio .server-export-panel { padding:16px; }
  .ttd-modern-studio .unified-voice-selectors,
  .ttd-modern-studio .mini-control-grid { grid-template-columns:1fr; }
  .ttd-modern-studio .ttd-wizard-actions { align-items:stretch; flex-direction:column-reverse; }
  .ttd-modern-studio .ttd-wizard-actions.end,
  .ttd-modern-studio .ttd-wizard-actions.start { align-items:stretch; }
  .ttd-modern-studio .ttd-wizard-next,
  .ttd-modern-studio .ttd-wizard-back { width:100%; }
  .ttd-ai-page .featured-public-voices { padding:62px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .ttd-wave-bars i { animation:none; }
  .ttd-modern-studio *, .ttd-ai-page .featured-public-voices * { scroll-behavior:auto !important; transition-duration:.01ms !important; }
}

/* Light AI theme — aligned with the rest of TextToDialogue. */
.ttd-ai-page {
  --ai-bg: #f7f8fc;
  --ai-panel: #ffffff;
  --ai-panel-2: #f4f5fb;
  --ai-line: rgba(71, 85, 125, .13);
  --ai-line-strong: rgba(71, 85, 125, .22);
  --ai-text: #111526;
  --ai-muted: #667085;
  background: #f7f8fc;
  color: #111526;
}

.ttd-ai-page .topbar {
  border-bottom-color: rgba(71,85,125,.11);
  background: rgba(255,255,255,.9);
  box-shadow: 0 5px 24px rgba(35,42,76,.05);
}
.ttd-ai-page .brand,
.ttd-ai-page .navlinks a,
.ttd-ai-page .nav-dropbtn { color: #30374c; }
.ttd-ai-page .navlinks a:hover,
.ttd-ai-page .nav-dropbtn:hover { color: #6252de; }
.ttd-ai-page .nav-cta .btn.secondary {
  border-color: #dfe3ed;
  background: #fff;
  color: #30374c;
}
.ttd-ai-page .menu-btn { color: #242b3e; }

.ttd-modern-studio {
  background:
    radial-gradient(ellipse 64% 34% at 50% -7%, rgba(119,91,255,.17), transparent 72%),
    radial-gradient(circle at 1% 34%, rgba(46,190,220,.09), transparent 26rem),
    radial-gradient(circle at 99% 74%, rgba(155,74,255,.07), transparent 30rem),
    linear-gradient(180deg,#fbfbff 0%,#f5f7fc 100%);
  color: #111526;
}
.ttd-modern-studio::before {
  opacity: .52;
  background-image:
    linear-gradient(rgba(72,88,133,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(72,88,133,.055) 1px,transparent 1px);
}
.ttd-modern-hero h1 { color: #111526; }
.ttd-modern-hero p { color: #657087; }
.ttd-modern-eyebrow { color: #6656df; }
.ttd-hero-meta span { color: #59647b; }
.ttd-hero-meta i { background: #9ca5b8; }

.ttd-signal-strip {
  border-color: rgba(110,92,255,.17);
  background: linear-gradient(145deg,rgba(255,255,255,.96),rgba(247,248,255,.9));
  box-shadow: inset 0 1px rgba(255,255,255,.8), 0 24px 55px rgba(46,50,91,.1);
}
.ttd-signal-strip::before { background: linear-gradient(115deg,transparent 30%,rgba(139,124,255,.07),transparent 70%); }
.ttd-signal-copy small { color: #8b94a8; }
.ttd-signal-copy strong { color: #242b40; }

.ttd-modern-progress span { color: #8b94a8; }
.ttd-modern-progress span:not(:last-child)::after { background: #dfe3ed; }
.ttd-modern-progress b { border-color: #dce1ec; background: #fff; color: #7d879d; }
.ttd-modern-progress .active { color: #4e438f; }

.ttd-modern-studio .center-tool-box {
  border-color: rgba(75,88,128,.14);
  background: rgba(255,255,255,.96);
  color: #111526;
  box-shadow: 0 35px 85px rgba(47,52,89,.12), inset 0 1px rgba(255,255,255,.9);
}
.ttd-modern-studio .center-tool-box::before {
  background: linear-gradient(90deg,transparent,rgba(139,124,255,.65),rgba(66,217,245,.45),transparent);
}
.ttd-modern-studio .ttd-stage-heading { border-bottom-color: #e7e9f1; }
.ttd-modern-studio .ttd-stage-heading h2 { color: #14182a; }
.ttd-modern-studio .ttd-stage-heading p { color: #707b91; }

.ttd-modern-studio .home-mini-tabs {
  border-color: #e1e4ed;
  background: #f4f5fa;
}
.ttd-modern-studio .home-mini-tabs button { color: #707b91; }
.ttd-modern-studio .home-mini-tabs button:hover { color: #4f42bc; }
.ttd-modern-studio .home-mini-tabs button.active {
  background: #fff;
  color: #4f42bc;
  box-shadow: 0 5px 15px rgba(44,49,83,.09);
}
.ttd-modern-studio .center-tool-top { color: #7c869a; }
.ttd-modern-studio .center-tool-top a {
  border-color: #e0e4ed;
  background: #f8f8fc;
  color: #5b4ed1;
}

.ttd-modern-studio textarea {
  border-color: #dfe3ec;
  background:
    linear-gradient(90deg,rgba(106,91,226,.04) 1px,transparent 1px),
    #fbfcff;
  color: #222a3d;
  caret-color: #6656df;
  box-shadow: inset 0 1px 10px rgba(45,51,84,.035);
}
.ttd-modern-studio textarea::placeholder { color: #9aa3b5; }
.ttd-modern-studio textarea:focus {
  border-color: rgba(101,86,223,.58);
  box-shadow: 0 0 0 3px rgba(101,86,223,.09), inset 0 1px 10px rgba(45,51,84,.035);
}
.ttd-modern-studio .clean-file-box {
  border-color: rgba(101,86,223,.34);
  background: #faf9ff;
  color: #737d92;
}
.ttd-modern-studio .clean-file-box strong { color: #273046; }
.ttd-modern-studio .clean-file-box input { color: #667085; }

.ttd-modern-studio .browser-flow-panel {
  border-color: #e0e4ed;
  background: linear-gradient(145deg,#fff,#f8f9fd);
  box-shadow: 0 12px 28px rgba(41,47,80,.055), inset 0 1px rgba(255,255,255,.9);
}
.ttd-modern-studio .flow-step-label { color: #1f2639; }
.ttd-modern-studio .voice-attention-note,
.ttd-modern-studio .server-voice-notice {
  border-color: rgba(35,166,196,.16);
  background: #f0fbfd;
  color: #5e7280;
}
.ttd-modern-studio .voice-attention-note strong,
.ttd-modern-studio .server-voice-notice strong { color: #166377; }
.ttd-modern-studio .unified-voice-selectors label,
.ttd-modern-studio .audio-effect-stage > label { color: #69748a; }
.ttd-modern-studio select,
.ttd-modern-studio input[type="text"] {
  border-color: #dfe3ec;
  background-color: #fff;
  color: #283046;
}
.ttd-modern-studio .ttd-search-field input[type="search"] {
  border-color: #dfe3ec;
  background: #fff;
  color: #283046;
}
.ttd-modern-studio .voice-catalog-summary,
.ttd-modern-studio .voice-preset-note { color: #7d879a; }
.ttd-modern-studio .login-required-note a { color: #5f50d6; }
.ttd-modern-studio .mini-control-grid label {
  border-color: #e6e9f1;
  background: #f8f9fc;
  color: #707b90;
}
.ttd-modern-studio .mini-control-grid small { color: #5f50d6; }

.ttd-modern-studio .ai-voice-gate {
  border-color: #f2d6a8;
  background: #fff9ec;
  color: #81643d;
}
.ttd-modern-studio .ai-voice-gate strong { color: #704a1b; }
.ttd-modern-studio .ai-voice-gate .ai-voice-meta a { color:#6845d8; }
.ttd-modern-studio .ai-model-progress { background: #eceef4; }
.ttd-modern-studio .ttd-wizard-actions { border-top-color: #e7e9f1; }
.ttd-modern-studio .ttd-wizard-back {
  border-color: #dce1eb;
  background: #fff;
  color: #59647a;
}

.ttd-modern-studio .server-export-panel {
  border-color: rgba(101,86,223,.19);
  background:
    radial-gradient(circle at 100% 0,rgba(66,217,245,.11),transparent 26rem),
    radial-gradient(circle at 0 100%,rgba(139,124,255,.12),transparent 30rem),
    #f8f8ff;
  box-shadow: inset 0 1px rgba(255,255,255,.9);
}
.ttd-modern-studio .server-export-panel .flow-step-label { color: #161b2e; }
.ttd-modern-studio .server-generate-status { color: #687389; }
.ttd-modern-studio .generated-audio-result,
.ttd-modern-studio .audio-effect-stage {
  border-color: #dfe3ed;
  background: rgba(255,255,255,.78);
}
.ttd-modern-studio .generated-audio-result small { color: #747f94; }

.ttd-modern-studio .clean-home-note { color: #7a8498; }

.ttd-ai-page .featured-public-voices {
  background: #fff;
  color: #111526;
}
.ttd-ai-page .featured-public-voices h2 { color: #15192a; }
.ttd-ai-page .featured-public-voices > .featured-wrap > p { color: #727d92; }
.ttd-ai-page .public-voice-card {
  border-color: #e0e4ed;
  background: linear-gradient(145deg,#fff,#f7f8fc);
  box-shadow: 0 20px 44px rgba(41,47,80,.09);
  color: #172033;
}
.ttd-ai-page .public-voice-card h3 { color: #172033; }
.ttd-ai-page .public-voice-card p { color: #6e798e; }

.ttd-ai-page .home-usecases,
.ttd-ai-page .how-it-works-home,
.ttd-ai-page .seo-content-block,
.ttd-ai-page .home-final-cta { background: #f8fafc; color: #111827; }
.ttd-ai-page .home-usecases .section-head h2,
.ttd-ai-page .how-it-works-home .section-head h2,
.ttd-ai-page .seo-content-block h2,
.ttd-ai-page .home-final-cta h2 { color: #111827; }
.ttd-ai-page .home-usecases .section-head p,
.ttd-ai-page .how-it-works-home p,
.ttd-ai-page .seo-content-block p,
.ttd-ai-page .home-final-cta p { color: #64748b; }
.ttd-ai-page .usecase-grid a,
.ttd-ai-page .home-steps-grid article,
.ttd-ai-page .seo-copy-card {
  border-color: #e2e8f0;
  background: #fff;
  color: #172033;
  box-shadow: 0 10px 28px rgba(30,41,59,.055);
}
.ttd-ai-page .usecase-grid a span,
.ttd-ai-page .home-steps-grid article p { color: #64748b; }
.ttd-ai-page .home-steps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 680px) {
  .ttd-ai-page .home-steps-grid { grid-template-columns: 1fr; }
}
.piper-runtime-log{
  margin-top:14px;
  border:1px solid #cbd5e1;
  border-radius:12px;
  background:#f8fafc;
  color:#0f172a;
  text-align:left;
}
.piper-runtime-log summary{
  padding:10px 12px;
  cursor:pointer;
  font-weight:800;
}
.piper-runtime-log summary button{
  float:right;
  border:1px solid #94a3b8;
  border-radius:8px;
  background:#fff;
  padding:4px 9px;
  cursor:pointer;
}
.piper-runtime-log pre{
  margin:0;
  max-height:240px;
  overflow:auto;
  border-radius:0 0 11px 11px;
  background:#0b1220;
  color:#a7f3d0;
  padding:12px;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font:12px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace;
}

/* Studio accordion — one-page progressive workflow. */
.ttd-modern-studio .center-tool-box {
  display: grid;
  gap: 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.ttd-modern-studio .center-tool-box::before { display: none; }

.ttd-modern-studio .ttd-wizard-stage {
  width: 100%;
  margin: 0;
  overflow: hidden;
  scroll-margin-top: 22px;
  border: 1px solid #e1e5ee;
  border-radius: 20px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 12px 34px rgba(36,44,79,.055);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.ttd-modern-studio .ttd-wizard-stage.active {
  border-color: rgba(104,88,226,.4);
  box-shadow: 0 22px 54px rgba(63,55,132,.12), 0 0 0 3px rgba(104,88,226,.055);
}
.ttd-modern-studio .ttd-wizard-stage.completed { border-color: rgba(31,170,125,.22); }

.ttd-modern-studio .ttd-accordion-trigger {
  display: grid;
  grid-template-columns: 52px minmax(0,1fr) auto 22px;
  gap: 16px;
  align-items: center;
  width: 100%;
  min-height: 102px;
  padding: 20px 24px;
  border: 0;
  background: transparent;
  color: #172033;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ttd-modern-studio .ttd-wizard-stage.active .ttd-accordion-trigger {
  background: linear-gradient(110deg, rgba(106,91,226,.07), rgba(55,193,211,.035) 62%, transparent);
}
.ttd-modern-studio .ttd-accordion-trigger:hover { background-color: #fafaff; }
.ttd-modern-studio .ttd-accordion-trigger:focus-visible {
  position: relative;
  z-index: 2;
  outline: 3px solid rgba(104,88,226,.26);
  outline-offset: -3px;
}
.ttd-modern-studio .ttd-accordion-index {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid #dce1eb;
  border-radius: 15px;
  background: #f7f8fc;
  color: #7b8498;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .05em;
}
.ttd-modern-studio .active .ttd-accordion-index {
  border-color: transparent;
  background: linear-gradient(145deg,#8172ef,#5f50d6);
  color: #fff;
  box-shadow: 0 10px 22px rgba(95,80,214,.24);
}
.ttd-modern-studio .completed .ttd-accordion-index {
  border-color: rgba(31,170,125,.2);
  background: #ecfbf5;
  color: #16865f;
}
.ttd-modern-studio .ttd-accordion-copy { display: grid; min-width: 0; gap: 3px; }
.ttd-modern-studio .ttd-accordion-copy small {
  color: #6b5cdc;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .16em;
}
.ttd-modern-studio .ttd-accordion-copy strong {
  overflow: hidden;
  color: #171c2e;
  font-size: clamp(18px,2vw,24px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ttd-modern-studio .ttd-accordion-copy em {
  overflow: hidden;
  color: #747f94;
  font-size: 11px;
  font-style: normal;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ttd-modern-studio .ttd-accordion-state {
  padding: 7px 10px;
  border: 1px solid #e0e4ec;
  border-radius: 999px;
  background: #f7f8fb;
  color: #7a8498;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.ttd-modern-studio .active .ttd-accordion-state {
  border-color: rgba(104,88,226,.16);
  background: #f0edff;
  color: #5f50d6;
}
.ttd-modern-studio .completed .ttd-accordion-state {
  border-color: rgba(31,170,125,.16);
  background: #ecfbf5;
  color: #16865f;
}
.ttd-modern-studio .ttd-accordion-chevron {
  color: #7d8799;
  font-size: 22px;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform .2s ease, color .2s ease;
}
.ttd-modern-studio .active .ttd-accordion-chevron { color: #6656df; transform: rotate(180deg); }

.ttd-modern-studio .ttd-accordion-content {
  padding: 26px 28px 30px;
  border-top: 1px solid #e8eaf1;
  animation: ttdAccordionIn .22s ease both;
}
.ttd-modern-studio .ttd-accordion-content[hidden] { display: none !important; }
@keyframes ttdAccordionIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 680px) {
  .ttd-ai-page .nav-cta { display: none; }
  .ttd-modern-studio .center-tool-box { gap: 10px; }
  .ttd-modern-studio .ttd-wizard-stage { border-radius: 15px; }
  .ttd-modern-studio .ttd-accordion-trigger {
    grid-template-columns: 42px minmax(0,1fr) 18px;
    gap: 11px;
    min-height: 86px;
    padding: 15px;
  }
  .ttd-modern-studio .ttd-accordion-index { width: 40px; height: 40px; border-radius: 12px; }
  .ttd-modern-studio .ttd-accordion-state { display: none; }
  .ttd-modern-studio .ttd-accordion-copy strong { font-size: 17px; }
  .ttd-modern-studio .ttd-accordion-copy em { font-size: 10px; }
  .ttd-modern-studio .ttd-accordion-content { padding: 18px 14px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .ttd-modern-studio .ttd-accordion-content { animation: none; }
}

/* 2026 night theme + single-column dialogue flow. */
.ttd-ai-page {
  --ai-bg: #08091d;
  --ai-panel: #0f1229;
  --ai-panel-2: #141832;
  --ai-line: rgba(159,170,224,.16);
  --ai-line-strong: rgba(159,170,224,.28);
  --ai-text: #f7f8ff;
  --ai-muted: #a8b0cd;
  --ai-violet: #7c5cff;
  --ai-violet-2: #6547eb;
  --ai-cyan: #25bad2;
  --ai-green: #21d6ad;
  background: #08091d;
  color: var(--ai-text);
}
.ttd-ai-page .topbar {
  border-bottom-color: rgba(159,170,224,.12);
  background: rgba(8,9,29,.92);
  box-shadow: 0 8px 30px rgba(0,0,0,.2);
}
.ttd-ai-page .brand,
.ttd-ai-page .navlinks a,
.ttd-ai-page .nav-dropbtn,
.ttd-ai-page .menu-btn { color: #e8ebff; }
.ttd-ai-page .navlinks a:hover,
.ttd-ai-page .nav-dropbtn:hover { color: #68ddec; }
.ttd-ai-page .nav-cta .btn.secondary {
  border-color: rgba(255,255,255,.2);
  background: #fff;
  color: #12152a;
}
.ttd-ai-page .nav-cta .btn.primary {
  border-color: transparent;
  background: linear-gradient(135deg,#8363ff,#6c4cf1);
  color: #fff;
  box-shadow: 0 12px 30px rgba(105,76,241,.28);
}

.ttd-modern-studio {
  background:
    radial-gradient(circle at 88% 2%,rgba(36,174,208,.15),transparent 29rem),
    radial-gradient(circle at 12% 8%,rgba(108,76,241,.19),transparent 32rem),
    linear-gradient(180deg,#0a0a22 0%,#08091d 100%);
  color: var(--ai-text);
}
.ttd-modern-studio::before {
  opacity: .28;
  background-image:
    linear-gradient(rgba(151,163,220,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(151,163,220,.07) 1px,transparent 1px);
}
.ttd-modern-hero h1 { color: #f8f9ff; }
.ttd-modern-hero h1 span {
  background: linear-gradient(100deg,#6d70ff 4%,#268fd7 50%,#08a9a4 96%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.ttd-modern-eyebrow { color: #7c8dff; }
.ttd-modern-hero p { color: #aeb6d2; }
.ttd-hero-meta span { color: #a9b1cb; }
.ttd-hero-meta i { background: #59627e; }
.ttd-modern-studio .ttd-no-install-badge {
  border-color: rgba(33,214,173,.26);
  background: rgba(33,214,173,.08);
  color: #65ebca;
}

.ttd-signal-strip {
  border-color: rgba(124,92,255,.25);
  background: linear-gradient(145deg,rgba(19,22,49,.96),rgba(11,14,34,.94));
  box-shadow: inset 0 1px rgba(255,255,255,.055),0 28px 65px rgba(0,0,0,.25);
}
.ttd-signal-strip::before { background: linear-gradient(115deg,transparent 30%,rgba(37,186,210,.08),transparent 70%); }
.ttd-signal-copy small { color: #7f89a7; }
.ttd-signal-copy strong { color: #f1f3ff; }

.ttd-modern-studio .ttd-wizard-stage {
  border-color: rgba(153,165,219,.16);
  background: rgba(14,17,39,.94);
  box-shadow: 0 18px 50px rgba(0,0,0,.2);
}
.ttd-modern-studio .ttd-wizard-stage.active {
  border-color: rgba(124,92,255,.48);
  box-shadow: 0 28px 68px rgba(0,0,0,.28),0 0 0 3px rgba(124,92,255,.075);
}
.ttd-modern-studio .ttd-wizard-stage.completed { border-color: rgba(33,214,173,.25); }
.ttd-modern-studio .ttd-accordion-trigger { color: #f7f8ff; }
.ttd-modern-studio .ttd-wizard-stage.active .ttd-accordion-trigger {
  background: linear-gradient(110deg,rgba(105,76,241,.13),rgba(25,171,195,.07) 65%,transparent);
}
.ttd-modern-studio .ttd-accordion-trigger:hover { background-color: rgba(255,255,255,.025); }
.ttd-modern-studio .ttd-accordion-index {
  border-color: rgba(159,170,224,.2);
  background: #151932;
  color: #aab2cf;
}
.ttd-modern-studio .active .ttd-accordion-index {
  border-color: transparent;
  background: linear-gradient(145deg,#8467ff,#5f48de);
  color: #fff;
}
.ttd-modern-studio .completed .ttd-accordion-index {
  border-color: rgba(33,214,173,.22);
  background: rgba(33,214,173,.1);
  color: #5fe8c5;
}
.ttd-modern-studio .ttd-accordion-copy small { color: #8a7cff; }
.ttd-modern-studio .ttd-accordion-copy strong { color: #f8f9ff; }
.ttd-modern-studio .ttd-accordion-copy em { color: #9fa8c5; }
.ttd-modern-studio .ttd-accordion-state {
  border-color: rgba(159,170,224,.18);
  background: #151932;
  color: #a3acc8;
}
.ttd-modern-studio .active .ttd-accordion-state {
  border-color: rgba(124,92,255,.24);
  background: rgba(124,92,255,.12);
  color: #b9afff;
}
.ttd-modern-studio .completed .ttd-accordion-state {
  border-color: rgba(33,214,173,.2);
  background: rgba(33,214,173,.09);
  color: #5fe8c5;
}
.ttd-modern-studio .ttd-accordion-chevron { color: #818ba8; }
.ttd-modern-studio .active .ttd-accordion-chevron { color: #9c8eff; }
.ttd-modern-studio .ttd-accordion-content { border-top-color: rgba(159,170,224,.14); }

.ttd-modern-studio .home-mini-tabs {
  border-color: rgba(159,170,224,.16);
  background: #0b0e22;
}
.ttd-modern-studio .home-mini-tabs button { color: #8f99b7; }
.ttd-modern-studio .home-mini-tabs button:hover { color: #fff; }
.ttd-modern-studio .home-mini-tabs button.active {
  background: #1a1e3a;
  color: #fff;
  box-shadow: inset 0 1px rgba(255,255,255,.06);
}
.ttd-modern-studio .center-tool-top { color: #929bb7; }
.ttd-modern-studio .center-tool-top a {
  border-color: rgba(159,170,224,.17);
  background: #12162f;
  color: #b9afff;
}
.ttd-modern-studio textarea {
  border-color: rgba(159,170,224,.18);
  background: linear-gradient(90deg,rgba(124,92,255,.035) 1px,transparent 1px),#0b0e22;
  color: #eef1ff;
  caret-color: #8e7dff;
  box-shadow: inset 0 1px 12px rgba(0,0,0,.2);
}
.ttd-modern-studio textarea::placeholder { color: #68728f; }
.ttd-modern-studio textarea:focus {
  border-color: rgba(124,92,255,.65);
  box-shadow: 0 0 0 3px rgba(124,92,255,.1),inset 0 1px 12px rgba(0,0,0,.2);
}
.ttd-modern-studio .clean-file-box {
  border-color: rgba(124,92,255,.36);
  background: rgba(124,92,255,.045);
  color: #99a3c0;
}
.ttd-modern-studio .clean-file-box strong { color: #eef0ff; }
.ttd-modern-studio .clean-file-box input { color: #aab3cf; }

.ttd-modern-studio .browser-flow-panel {
  border-color: rgba(159,170,224,.16);
  background: linear-gradient(145deg,#13172f,#0e1228);
  box-shadow: 0 16px 36px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.035);
}
.ttd-modern-studio .flow-step-label,
.ttd-modern-studio .server-export-panel .flow-step-label { color: #f3f5ff; }
.ttd-modern-studio .voice-attention-note,
.ttd-modern-studio .server-voice-notice {
  border-color: rgba(37,186,210,.19);
  background: rgba(37,186,210,.065);
  color: #a5bfd0;
}
.ttd-modern-studio .voice-attention-note strong,
.ttd-modern-studio .server-voice-notice strong { color: #63d8e8; }
.ttd-modern-studio .unified-voice-selectors label,
.ttd-modern-studio .audio-effect-stage > label { color: #a3acc7; }
.ttd-modern-studio select,
.ttd-modern-studio input[type="text"] {
  border-color: rgba(159,170,224,.2);
  background-color: #0a0d20;
  color: #edf0ff;
}
.ttd-modern-studio .ttd-search-field input[type="search"] {
  border-color: rgba(159,170,224,.2);
  background: #0a0d20;
  color: #edf0ff;
}
.ttd-modern-studio select option,
.ttd-modern-studio select optgroup { background: #11152d; color: #edf0ff; }
.ttd-modern-studio .voice-catalog-summary,
.ttd-modern-studio .voice-preset-note { color: #8f99b7; }
.ttd-modern-studio .login-required-note a { color: #b8adff; }
.ttd-modern-studio .mini-control-grid label {
  border-color: rgba(159,170,224,.13);
  background: rgba(255,255,255,.025);
  color: #9da6c2;
}
.ttd-modern-studio .mini-control-grid small { color: #b8adff; }
.ttd-modern-studio .ai-voice-gate {
  border-color: rgba(246,179,86,.25);
  background: rgba(246,179,86,.07);
  color: #d4b991;
}
.ttd-modern-studio .ai-voice-gate strong { color: #ffe1b7; }
.ttd-modern-studio .ai-voice-gate .ai-voice-meta a { color: #b9afff; }

.ttd-modern-studio .preview-stage-btn,
.ttd-modern-studio .generate-full-btn,
.ttd-modern-studio .ttd-wizard-next {
  color: #fff;
  box-shadow: 0 15px 34px rgba(80,60,205,.23);
}
.ttd-modern-studio .tts-preview,
.ttd-modern-studio .ttd-wizard-next {
  background: linear-gradient(135deg,#8363ff,#6648e7);
}
.ttd-modern-studio .expression-preview,
.ttd-modern-studio .dialogue-next {
  background: linear-gradient(135deg,#16a6ad,#087f92);
}
.ttd-modern-studio .ttd-wizard-back {
  border-color: rgba(159,170,224,.2);
  background: #11152d;
  color: #b3bcd5;
}
.ttd-modern-studio .server-export-panel {
  border-color: rgba(124,92,255,.27);
  background:
    radial-gradient(circle at 100% 0,rgba(37,186,210,.11),transparent 26rem),
    radial-gradient(circle at 0 100%,rgba(124,92,255,.14),transparent 30rem),
    #10142c;
  box-shadow: inset 0 1px rgba(255,255,255,.04),0 18px 44px rgba(0,0,0,.16);
}
.ttd-modern-studio .server-export-panel .generate-full-btn {
  background: linear-gradient(100deg,#7f60f5,#6657df 52%,#149aae);
}
.ttd-modern-studio .server-generate-status { color: #a6b0cb; }
.ttd-modern-studio .server-generate-status.error { color: #ff91a5; }
.ttd-modern-studio .server-generate-status.success { color: #60e4be; }
.ttd-modern-studio .server-progress { background: rgba(255,255,255,.08); }
.ttd-modern-studio .generated-audio-result,
.ttd-modern-studio .audio-effect-stage {
  border-color: rgba(159,170,224,.15);
  background: rgba(255,255,255,.035);
}
.ttd-modern-studio .generated-audio-result small { color: #8f99b7; }
.ttd-modern-studio .clean-home-note { color: #818ba8; }

.ttd-modern-studio .dialogue-stage-grid {
  grid-template-columns: minmax(0,1fr);
  max-width: 920px;
  margin: 0 auto;
  gap: 18px;
}
.ttd-modern-studio [data-studio-stage="3"] .ttd-wizard-actions {
  max-width: 920px;
  margin-right: auto;
  margin-left: auto;
}

.ttd-ai-page .featured-public-voices,
.ttd-ai-page .home-usecases,
.ttd-ai-page .how-it-works-home,
.ttd-ai-page .seo-content-block,
.ttd-ai-page .home-final-cta {
  background: #090a1f;
  color: #f4f6ff;
}
.ttd-ai-page .featured-public-voices h2,
.ttd-ai-page .home-usecases .section-head h2,
.ttd-ai-page .how-it-works-home .section-head h2,
.ttd-ai-page .seo-content-block h2,
.ttd-ai-page .home-final-cta h2 { color: #f5f7ff; }
.ttd-ai-page .featured-public-voices > .featured-wrap > p,
.ttd-ai-page .home-usecases .section-head p,
.ttd-ai-page .how-it-works-home p,
.ttd-ai-page .seo-content-block p,
.ttd-ai-page .home-final-cta p { color: #9da6c2; }
.ttd-ai-page .public-voice-card,
.ttd-ai-page .usecase-grid a,
.ttd-ai-page .home-steps-grid article,
.ttd-ai-page .seo-copy-card {
  border-color: rgba(159,170,224,.14);
  background: linear-gradient(145deg,#13172f,#0e1228);
  color: #f1f3ff;
  box-shadow: 0 18px 42px rgba(0,0,0,.18);
}
.ttd-ai-page .public-voice-card h3 { color: #f4f6ff; }
.ttd-ai-page .public-voice-card p,
.ttd-ai-page .usecase-grid a span,
.ttd-ai-page .home-steps-grid article p { color: #929cb9; }
.ttd-ai-page .usecase-grid a b { color: #f0f3ff; }
.ttd-ai-page .home-steps-grid b {
  background: rgba(124,92,255,.13);
  color: #a99dff;
}
.ttd-ai-page .site-footer { border-top-color: rgba(159,170,224,.12); background: #060716; }

@media (max-width: 980px) {
  .ttd-modern-studio .dialogue-stage-grid { max-width: none; }
}

.ttd-modern-studio .dialogue-next-wrap {
  display: grid;
  justify-items: end;
  gap: 10px;
  max-width: min(100%, 620px);
}
.ttd-modern-studio .dialogue-next-note {
  margin: 0;
  max-width: 560px;
  padding: 10px 13px;
  border: 1px solid rgba(255, 190, 92, .28);
  border-radius: 12px;
  background: rgba(255, 178, 67, .08);
  color: #ffd394;
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
}
.ttd-modern-studio .dialogue-next:disabled {
  cursor: not-allowed;
  opacity: .48;
  filter: saturate(.45);
  box-shadow: none;
  transform: none;
}
@media (max-width: 680px) {
  .ttd-modern-studio .dialogue-next-wrap {
    width: 100%;
    max-width: none;
    justify-items: stretch;
  }
  .ttd-modern-studio .dialogue-next-note { max-width: none; }
}

/* Final Studio contrast and glossy action controls. Keep these rules last. */
.ttd-ai-page .studio-seo-faq .studio-faq-wrap > header > span {
  color: #8deeff;
}
.ttd-ai-page .studio-seo-faq .studio-faq-wrap h2 {
  color: #f8f9ff;
  text-shadow: 0 0 28px rgba(108, 118, 255, .16);
}
.ttd-ai-page .studio-seo-faq .studio-faq-wrap header p {
  color: #b6bfd8;
}
.ttd-ai-page .studio-seo-faq .studio-faq-list summary {
  color: #edf1ff;
}
.ttd-ai-page .studio-seo-faq .studio-faq-list details[open] summary {
  color: #ffc1df;
}
.ttd-ai-page .studio-seo-faq .studio-faq-list p {
  color: #b7c0da;
}

.ttd-ai-page .ttd-modern-studio .home-mini-tabs {
  border-color: rgba(255, 115, 181, .32);
  background:
    linear-gradient(180deg, rgba(255, 178, 215, .08), rgba(255, 76, 155, .025)),
    #0b0e22;
  box-shadow:
    inset 0 1px 0 rgba(255, 222, 239, .1),
    0 10px 30px rgba(255, 53, 147, .08);
}
.ttd-ai-page .ttd-modern-studio .home-mini-tabs button {
  color: #edb8d1;
  border: 1px solid transparent;
  text-shadow: 0 0 12px rgba(255, 111, 181, .16);
  transition: color .2s ease, border-color .2s ease, background .2s ease,
    box-shadow .2s ease, transform .2s ease;
}
.ttd-ai-page .ttd-modern-studio .home-mini-tabs button:hover,
.ttd-ai-page .ttd-modern-studio .home-mini-tabs button:focus-visible {
  color: #fff;
  border-color: rgba(255, 140, 194, .4);
  background: rgba(255, 90, 166, .12);
  box-shadow: 0 0 20px rgba(255, 67, 155, .17);
  outline: none;
}
.ttd-ai-page .ttd-modern-studio .home-mini-tabs button.active {
  color: #fff;
  border-color: rgba(255, 162, 207, .68);
  background:
    linear-gradient(180deg, rgba(255, 210, 231, .32) 0%, rgba(246, 88, 163, .24) 48%, rgba(180, 47, 118, .22) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .32),
    inset 0 -1px 0 rgba(103, 16, 63, .32),
    0 0 24px rgba(255, 72, 158, .24);
}

.ttd-ai-page .ttd-modern-studio .center-tool-top a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 15px;
  overflow: hidden;
  border: 1px solid rgba(255, 153, 202, .58);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 214, 234, .25), rgba(235, 77, 152, .2) 52%, rgba(148, 37, 101, .2));
  color: #fff1f8;
  text-shadow: 0 0 12px rgba(255, 145, 198, .35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 0 20px rgba(255, 64, 153, .14);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.ttd-ai-page .ttd-modern-studio .center-tool-top a:hover,
.ttd-ai-page .ttd-modern-studio .center-tool-top a:focus-visible {
  color: #fff;
  border-color: #ff9dca;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38),
    0 0 28px rgba(255, 68, 157, .34);
  transform: translateY(-1px);
  outline: none;
}

@media (max-width: 600px) {
  .ttd-ai-page .ttd-modern-studio .center-tool-top a {
    min-height: 34px;
    padding: 7px 11px;
  }
}

/* Lightweight Studio QC: output compatibility hint */
.ttd-format-hint{display:block;margin-top:7px;color:#7a8798;font-size:10px;line-height:1.35}
.ttd-format-row .ttd-chip:disabled{opacity:.45;cursor:not-allowed}

/* Lightweight voice-control capability feedback */
.ttd-control-hint{font-size:12px;line-height:1.45;color:#667085;margin:-2px 0 10px}
.ttd-range-row input[type="range"]:disabled{opacity:.4;cursor:not-allowed}
.ttd-range-row input[type="range"]:disabled+*{opacity:.55}

/* Lightweight Speed/Pitch controls: always keyboard/mouse focusable */
.ttd-range-row input[type="range"]{cursor:pointer;accent-color:#6d5dfc}
.ttd-range-row input[type="range"]:focus-visible{outline:3px solid rgba(109,93,252,.24);outline-offset:4px;border-radius:999px}
.ttd-range-row input[type="range"]:disabled{opacity:1;cursor:pointer}