/* Figma 8603:27520, with the transcript rendered as live text on a 393 × 852 canvas. */
@font-face{font-family:HeadphoneNoto;src:url('assets/figma-live/headphone-noto-400.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:HeadphoneNoto;src:url('assets/figma-live/headphone-noto-500.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
#mode-headphone .phone-bezel{z-index:2}
#mode-headphone .phone-screen{left:5%;top:2.2%;width:90%;height:95.6%;border-radius:14%/6.45%;background:#f2f2f7}
#mode-headphone .phone-screen::after{display:none}
.headphone-demo{position:absolute;inset:0;overflow:hidden;direction:ltr;background:#f2f2f7}
.headphone-demo-stage{position:absolute;left:50%;top:50%;width:393px;height:852px;transform:translate(-50%,-50%) scale(var(--headphone-scale,.515));transform-origin:center;overflow:hidden;font-family:HeadphoneNoto,'Noto Sans SC','PingFang SC',sans-serif;text-align:left;letter-spacing:0}
.headphone-demo-stage *{box-sizing:border-box}
.headphone-demo-static{position:absolute;inset:0;display:block;width:393px;height:852px;max-width:none}
.headphone-demo-transcript{position:absolute;left:16px;top:219px;width:361px;min-height:126px;display:flex;flex-direction:column;gap:8px;padding:20px;border-radius:18px;background:#fff;overflow:hidden}
.headphone-demo-transcript p{margin:0;width:321px;max-width:none;padding:0;letter-spacing:0;text-align:left;text-wrap:wrap;word-break:normal;overflow-wrap:normal;font-family:inherit}
.headphone-demo-source{font-size:14px;font-weight:400;line-height:22px;color:rgba(60,60,67,.6)}
.headphone-demo-translation{font-size:20px;font-weight:500;line-height:28px;color:#0088ff}
.headphone-demo-word{white-space:nowrap}
.headphone-demo-character{transition:opacity 90ms linear}
.headphone-demo.is-resetting .headphone-demo-character{transition:none}
.headphone-demo-toggle{position:absolute;left:160.5px;top:696px;width:72px;height:72px;display:grid;place-items:center;border:0;border-radius:50%;padding:0;background:transparent;color:#fff;cursor:pointer}
.headphone-demo-toggle:focus-visible{outline:3px solid #000;outline-offset:5px}
.headphone-demo-toggle[aria-pressed=true]{background:#0088ff}
.headphone-demo-toggle[aria-pressed=true]::before{content:'';width:0;height:0;margin-left:4px;border-top:12px solid transparent;border-bottom:12px solid transparent;border-left:18px solid currentColor}
.headphone-demo-toggle[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.headphone-demo-character{transition:none}}