@font-face {
  font-family: 'FK Grotesk Neue';
  src: url('/ai/assets/fonts/fk-grotesk-neue-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* The homepage's white canvas, small navigation and unequal media columns. */
.voice-studio {
  --ink: #000;
  --muted: #717171;
  --line: #dedede;
  --studio-gap: 24px;
  --studio-margin: 16px;
  font-family: 'FK Grotesk Neue', 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 16px;
  font-weight: 400;
  background: #fff;
  color: #000;
}

.studio-header,
.studio-intro,
.voice-studio .experience,
.studio-footer {
  width: calc(100% - var(--studio-margin) * 2);
  margin-inline: auto;
}

.studio-header {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--studio-gap);
  align-items: start;
  padding-top: 16px;
  font-size: 12px;
  line-height: 1.45;
}

.studio-brand {
  grid-column: 1;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  min-height: 28px;
  letter-spacing: .025em;
  white-space: nowrap;
}
.studio-brand svg { width: 17px; height: 17px; }
.studio-nav { grid-column: 2 / 4; display: grid; justify-items: start; }
.studio-nav a { position: relative; min-height: 26px; display: flex; align-items: center; color: #717171; }
.studio-nav a[aria-current] { color: #000; }
.studio-nav a[aria-current]::before { content: ''; position: absolute; left: -12px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.studio-nav a:hover,.studio-back:hover { color: #000; }
.studio-contact { grid-column: 6; display: inline-flex; align-items: center; gap: 10px; justify-self: end; min-height: 28px; padding: 0; font-size: 12px; white-space: nowrap; }
.studio-contact .icon { width: 14px; height: 14px; }

.studio-intro { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--studio-gap); align-items: end; padding-block: 72px 40px; }
.studio-intro h1 { grid-column: 3 / -1; font-size: 36px; line-height: 1.15; letter-spacing: -.045em; }
.studio-back { display: inline-flex; align-items: center; gap: 5px; width: fit-content; min-height: 36px; color: #717171; font-size: 12px; }
.studio-back .icon { width: 13px; height: 13px; }

.voice-studio .experience { margin-block: 0; max-width: none; }
.voice-studio .experience-shell { padding: 0; border: 0; border-radius: 0; background: transparent; }
.voice-studio .orb-demo { --orb-size: clamp(300px, 30vw, 440px); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--studio-gap); overflow: visible; border: 0; border-radius: 0; background: transparent; }
.voice-studio #voice-samples-panel { grid-column: 1 / -1; min-width: 0; }
.voice-studio .voice-carousel { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: auto auto auto; gap: 0 var(--studio-gap); padding: 0; }
.voice-studio .orb-stage { grid-column: 3 / -1; grid-row: 1; height: calc(var(--orb-size) + 96px); --orb-step: calc(var(--orb-size) * .93); --orb-y: 0px; padding: 0; border-radius: 0; background: transparent; }
.voice-studio .main-orb { box-shadow: none; }
.voice-studio .orb-play { width: 66px; height: 66px; border: 0; box-shadow: none; background: #fff; }
.voice-studio .orb-play .icon { width: 20px; height: 20px; }
.voice-studio .orb-play .voice-pause-icon { width: 13px; height: 17px; border-width: 4px; }
.voice-studio .orb-play:focus-visible { outline: 2px solid #000; outline-offset: 6px; }

.voice-studio .voice-caption { grid-column: 3 / -1; grid-row: 2; display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; gap: 6px; align-self: start; justify-self: center; align-items: center; width: min(100%,calc(var(--orb-size) + 96px)); margin: 0; padding: 0; text-align: center; }
.voice-studio .voice-identity { grid-column: 2; grid-row: 1; }
.voice-studio #voice-prev-preview { grid-column: 1; grid-row: 1; }
.voice-studio #voice-next-preview { grid-column: 3; grid-row: 1; }
.voice-studio .voice-name-link { max-width: 100%; font-size: clamp(24px, 2.3vw, 34px); line-height: 1.25; letter-spacing: -.035em; gap: 9px; }
.voice-studio #voice-name { min-width: 0; overflow-wrap: anywhere; }
.voice-studio .voice-name-link .icon { width: 17px; height: 17px; }
.voice-studio .voice-identity > p { margin-top: 2px; min-height: 0; font-size: 13px; color: #717171; line-height: 1.5; }
.voice-studio .voice-arrow { width: 44px; height: 44px; border-radius: 2px; color: #000; opacity: 1; }
.voice-studio .voice-arrow .icon { width: 18px; height: 18px; }
.voice-studio .voice-arrow:hover { background: #f5f5f5; }
.voice-studio #sample-feedback { grid-column: 3 / -1; grid-row: 3; align-self: start; margin: 12px 0 0; min-height: 0; font-size: 12px; text-align: center; color: #717171; }
.voice-studio #sample-feedback:empty { display: none; }
.voice-studio #sample-feedback.error { color: var(--error); }

.voice-studio #voice-generate-panel { grid-column: 3 / -1; min-width: 0; border: 0; }
.voice-studio .voice-form { width: 100%; max-width: none; margin: 0; padding: 28px 0 0; }
.voice-studio .label-row { margin-bottom: 10px; font-size: 13px; }
.voice-studio #voice-count { color: #717171; font-size: 12px; }
.voice-studio #voice-count.over-limit { color: var(--error); }
.voice-studio #voice-input { width: 100%; min-height: 90px; max-height: 220px; margin: 0; padding: 12px 0; border: 0; border-bottom: 1px solid #b9b9b9; border-radius: 0; background: #fff; color: #000; font-size: 18px; line-height: 1.6; resize: vertical; box-shadow: none; }
.voice-studio #voice-input::placeholder { color: #929292; }
.voice-studio #voice-input:focus-visible { outline: none; border-bottom-color: #000; box-shadow: 0 1px 0 #000; }
.voice-studio #voice-input[aria-invalid=true] { border-bottom-color: var(--error); }
.voice-studio .voice-form-actions { margin-top: 16px; justify-content: flex-start; gap: 12px; }
.voice-studio .voice-form-actions .motion-toggle { order: 1; border-radius: 2px; color: #717171; }
.voice-studio .voice-form-actions .motion-toggle:hover { background: #f5f5f5; }
.voice-studio .voice-form-actions .button { min-width: 144px; min-height: 46px; border-radius: 2px; gap: 20px; font-size: 13px; }
.voice-studio #voice-submit:disabled { color: #808080; background: #eee; }
.voice-studio #voice-feedback,.voice-studio .voice-spoken-text { font-size: 13px; margin-top: 14px; overflow-wrap: anywhere; }
.voice-studio .voice-spoken-text { color: #717171; }
.studio-footer { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--studio-gap); padding-block: 72px 104px; font-size: 12px; color: #717171; }
.studio-footer a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; width: fit-content; }
.studio-footer .icon { width: 14px; height: 14px; }

/* Keep the requested glowing orb and frosted conversation; align their controls. */
.voice-studio .voice-call-dialog { border-color: #e4e4e4; border-radius: 10px; background: #fff; color: #000; box-shadow: 0 12px 40px rgb(0 0 0 / .08); }
.voice-studio .voice-call-actions .button { border-radius: 3px; }
.voice-studio .voice-text-button { border-color: #dedede; color: #000; background: #fff; }
.voice-studio .voice-text-button:hover,.voice-studio .voice-call-close:hover { background: #f5f5f5; }
.voice-studio .voice-call-close { color: #717171; }
.voice-studio .voice-call-hint { border-radius: 4px; border-color: #e9e9e9; background: #fff; color: #555; box-shadow: 0 3px 16px rgb(0 0 0 / .035); }
.voice-studio .voice-notice { border-radius: 3px; border-color: #dedede; color: #000; background: #fff; }
.voice-studio .companion-form { border-color: #c9c9c9; border-radius: 10px; }
.voice-studio .companion-form:focus-within { border-color: #929292; }
.voice-studio .companion-dialog::backdrop { background: rgb(255 255 255 / .45); }
.voice-studio .companion-writing select { color: #626262; }
.voice-studio .companion-message[data-role=assistant] { background: rgb(236 236 236 / .85); color: #171717; }
.voice-studio .contact-dialog { border-radius: 10px; }
.voice-studio .contact-dialog .button { border-radius: 3px; }

@media (min-width: 1600px) {
  .voice-studio { --studio-gap: 32px; }
  .voice-studio .orb-demo { --orb-size: 470px; }
}

@media (max-width: 800px) {
  .voice-studio { --studio-margin: 14px; --studio-gap: 14px; }
  .studio-header { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 14px; padding-top: 12px; font-size: 11px; }
  .studio-brand { min-height: 28px; }
  .studio-nav { grid-column: 2; grid-row: 1; }
  .studio-nav a { min-height: 24px; }
  .studio-contact { grid-column: 1; grid-row: 1; justify-self: start; align-self: end; min-height: 28px; font-size: 11px; gap: 6px; }
  .studio-contact .icon { width: 12px; height: 12px; }
  .studio-intro { grid-template-columns: repeat(2,minmax(0,1fr)); padding-block: 22px 20px; }
  .studio-intro h1 { grid-column: 2; font-size: 28px; }
  .voice-studio .orb-demo { --orb-size: clamp(190px,61vw,360px); display: block; }
  .voice-studio .voice-carousel { display: flex; flex-direction: column; }
  .voice-studio .orb-stage { order: 0; flex: none; width: 100%; height: calc(var(--orb-size) + 28px); --orb-step: calc(var(--orb-size) * .88); }
  .voice-studio .orb-play { width: 54px; height: 54px; }
  .voice-studio .orb-play .icon { width: 17px; height: 17px; }
  .voice-studio .voice-caption { order: 1; align-self: center; padding: 12px 0 4px; gap: 2px; }
  .voice-studio .voice-name-link { font-size: 22px; min-height: 28px; }
  .voice-studio .voice-name-link .icon { width: 15px; height: 15px; }
  .voice-studio .voice-identity > p { margin-top: 1px; font-size: 12px; }
  .voice-studio #sample-feedback { order: 2; margin: 12px 0 0; width: 100%; }
  .voice-studio .voice-form { padding: 20px 0 0; }
  .voice-studio .label-row { margin-bottom: 3px; font-size: 12px; }
  .voice-studio #voice-input { min-height: 72px; padding-block: 9px; font-size: 16px; }
  .voice-studio .voice-form-actions { margin-top: 12px; justify-content: space-between; }
  .voice-studio .voice-form-actions .motion-toggle { order: 0; }
  .voice-studio .voice-form-actions .button { min-height: 44px; min-width: 132px; }
  .studio-footer { grid-template-columns: repeat(2,minmax(0,1fr)); padding-block: 36px 110px; }
}

@media (max-width: 360px) {
  .studio-intro { padding-block: 16px 14px; }
  .studio-intro h1 { font-size: 25px; }
  .voice-studio .orb-stage { height: calc(var(--orb-size) + 16px); }
  .voice-studio .voice-caption { padding-top: 10px; }
  .voice-studio .voice-form { padding-top: 16px; }
  .voice-studio #voice-input { height: 64px; min-height: 64px; padding-block: 5px; }
  .voice-studio .voice-form-actions { margin-top: 8px; }
  .studio-footer { padding-top: 108px; }
}