/* Product surface values are traced to v0.1.42 in voice-demo-source.json. */
.voice-section { background:#fff; padding-block:48px; }
.voice-experience { width:min(1232px,100%); margin-inline:auto; }
.voice-section .section-heading { margin-bottom:22px; }
.voice-section .section-heading>p:not(.eyebrow) { max-width:38em; margin-inline:auto; }
.voice-tour-controls { display:flex; align-items:center; justify-content:center; gap:12px; margin:28px auto 38px; }
.voice-tour-toggle { display:grid; place-items:center; flex:0 0 48px; width:48px; height:48px; border-radius:50%; color:#333438; background:#f2f2f4; }
.voice-tour-toggle svg { grid-area:1/1; }
.voice-tour-toggle .voice-icon-pause { display:none; }
.voice-tour-toggle[data-playing=true] .voice-icon-play { display:none; }
.voice-tour-toggle[data-playing=true] .voice-icon-pause { display:block; }
.voice-tour-toggle:disabled { opacity:.4; cursor:default; }
.voice-selector { display:flex; padding:4px; border-radius:32px; background:#f2f2f4; }
.voice-selector button { position:relative; padding:13px 20px 17px; border-radius:28px; background:transparent; color:#77787d; font-size:var(--type-ui); min-height:48px; white-space:nowrap; transition:color .18s ease; }
.voice-selector button[aria-pressed=true] { color:#1d1d1f; }
.voice-mode-track { position:absolute; inset:auto 20px 9px; height:2px; border-radius:2px; overflow:hidden; background:#d9d9de; opacity:0; }
.voice-selector button[aria-pressed=true] .voice-mode-track { opacity:1; }
.voice-mode-track i { display:block; height:100%; background:#333438; transform:scaleX(var(--voice-progress,0)); transform-origin:left center; }
.voice-demo-layout { display:grid; grid-template-columns:1.2fr .8fr; gap:64px; align-items:center; }
.voice-demo-visual { min-width:0; }
.voice-copy-panels { display:grid; }
.voice-copy-panel { grid-area:1/1; min-width:0; }
.voice-copy-panel[aria-hidden=true] { visibility:hidden; pointer-events:none; }
.voice-demo-copy h3 { font-size:clamp(1.875rem,2.6vw,2.625rem); line-height:1.2; letter-spacing:-.025em; max-width:11em; }
.voice-demo-description { margin-top:24px; font-size:var(--type-body); color:#62656b; max-width:26em; }
.voice-demo-detail { margin-top:22px; font-size:var(--type-ui); color:#6e7075; max-width:28em; }
.voice-demo-copy .text-link { display:inline-flex; margin-top:28px; }
.voice-stage { min-width:0; border:1px solid #e3e4e8; border-radius:20px; background:#f7f8fa; box-shadow:0 16px 45px -32px #26324555; }
.voice-target-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; font-size:var(--type-caption); color:#666a70; border-bottom:1px solid #e3e4e8; }
.voice-key-state { text-align:end; font-variant-numeric:tabular-nums; }
.voice-target { padding:24px 28px 8px; min-height:104px; }
.voice-target-text { color:#33363b; font-size:20px; line-height:1.65; min-height:66px; overflow-wrap:break-word; }
.voice-target-text.is-placeholder { color:#787c83; font-size:17px; }
.voice-target-text mark { background:#dce7f7; color:#303a4b; box-decoration-break:clone; -webkit-box-decoration-break:clone; padding:3px 0; }
.voice-overlay-space { display:flex; align-items:center; justify-content:center; min-height:92px; padding:18px 10px 26px; }
.voice-overlay { position:relative; width:304px; max-width:100%; height:48px; flex-shrink:0; border-radius:14px; background-color:rgba(16,18,22,.7); background-image:radial-gradient(140px 80px at 10% 15%,rgba(62,78,138,.16),transparent 60%),radial-gradient(180px 90px at 90% 85%,rgba(53,88,112,.08),transparent 65%); background-blend-mode:screen; box-shadow:inset 0 0 0 1px rgba(62,78,138,.08),inset 0 1px 0 rgba(255,255,255,.03); overflow:clip; transition:opacity .2s ease; }
.voice-overlay-content { position:absolute; inset:0; display:flex; align-items:center; gap:8px; padding:8px 12px; }
.voice-overlay.is-hidden { opacity:0; pointer-events:none; }
.voice-overlay canvas { display:block; width:56px; height:32px; flex:0 0 56px; }
.voice-overlay-status-slot { display:grid; place-items:center; width:14px; height:14px; flex:0 0 14px; }
.voice-overlay-status { width:6px; height:6px; border-radius:50%; background:rgba(104,170,198,.92); box-shadow:0 0 8px rgba(104,170,198,.28); }
.voice-overlay-text-viewport { min-width:0; flex:1; overflow:clip; padding-inline-end:4px; }
.voice-overlay-text { width:max-content; white-space:nowrap; font-size:12px; line-height:1.35; color:rgba(214,220,232,.9); }
.voice-partial { color:rgba(132,191,220,.94); font-weight:500; text-decoration:underline dotted rgba(132,191,220,.42); text-underline-offset:.16em; }
.is-compact .voice-overlay-status { background:rgba(216,94,94,.84); box-shadow:0 0 6px rgba(216,94,94,.34); }
[data-scene=edit] .voice-overlay { outline:1px solid rgba(255,193,7,.3); outline-offset:-1px; }
[data-phase="2"] .voice-overlay-status { width:14px; height:14px; border:2px solid rgba(208,214,226,.68); border-top-color:transparent; background:none; box-shadow:none; animation:voice-spinner .9s linear infinite; }
[data-paused=true] .voice-overlay-status { animation-play-state:paused; }
.voice-demo-result { border-top:1px solid #e3e4e8; padding:15px 22px; color:#70747b; font-size:var(--type-caption); }
[data-phase="3"] .voice-demo-result { color:#436251; }
.voice-utterance { margin-top:22px; font-size:var(--type-ui); color:#6e7075; line-height:1.6; }
.voice-spoken { color:#464950; display:block; margin-top:5px; min-height:3.2em; }
.voice-source-note { display:flex; gap:18px; flex-wrap:wrap; justify-content:center; margin:36px auto 0; font-size:var(--type-caption); color:#6e7075; }
.voice-source-note a { text-decoration:underline; text-underline-offset:4px; }
@keyframes voice-spinner { to { transform:rotate(360deg); } }
@media(max-width:1100px) {
  .voice-demo-layout { grid-template-columns:1.1fr .9fr; gap:32px; }
  .voice-target { padding-inline:22px; }
  .voice-target-bar { flex-direction:column; align-items:flex-start; gap:7px; }
  .voice-key-state { text-align:start; }
}
@media(max-width:820px) {
  .voice-demo-layout { grid-template-columns:1fr; max-width:640px; margin-inline:auto; gap:30px; }
  .voice-demo-copy h3 { max-width:100%; }
  .voice-demo-description,.voice-demo-detail { max-width:100%; }
  .voice-demo-copy .text-link { margin-top:20px; }
  .voice-target-bar { flex-direction:row; align-items:center; }
}
@media(max-width:520px) {
  .voice-section { padding:44px 20px; }
  .voice-tour-controls { gap:8px; margin-block:24px 30px; }
  .voice-tour-toggle { width:44px; height:44px; flex-basis:44px; }
  .voice-selector { padding:2px; }
  .voice-selector button { padding:12px 10px 17px; min-height:44px; font-size:13px; }
  .voice-mode-track { inset-inline:10px; }
  .voice-demo-description { margin-top:18px; }
  .voice-demo-detail { margin-top:16px; }
  .voice-target-bar { flex-direction:row; align-items:center; padding:16px; }
  .voice-target { padding:22px 16px 8px; min-height:104px; }
  .voice-overlay-space { min-height:80px; padding-block:12px 20px; }
  .voice-target-text { font-size:18px; min-height:89.1px; }
  .voice-demo-result { padding:14px 16px; }
  .voice-source-note { margin-top:28px; justify-content:flex-start; }
}
@media(prefers-reduced-motion:reduce) {
  .voice-overlay,.voice-selector button { transition:none; }
  .voice-overlay-status { animation:none!important; }
}

@media(min-width:821px) and (max-height:850px) {
  .voice-section { padding-block:20px; }
  .voice-target-bar { flex-direction:row; align-items:center; }
  .voice-section .eyebrow { margin-bottom:12px; }
  .voice-section .section-heading h2 { font-size:40px; }
  .voice-section .section-heading>p:not(.eyebrow) { margin-top:12px; font-size:16px; }
  .voice-tour-controls { margin:18px auto 26px; }
  .voice-source-note { margin-top:18px; font-size:12px; gap:8px 16px; }
}