/* Size the visible circle, not Halo's transparent Rive artboard. All homepage
   teammates share one layout box; both landing pages use the same diameter. */
:root{--telephonist-orb-diameter:min(clamp(200px,32svh,300px),calc((100vw - 24px)/1.75))}
@media(max-width:600px){:root{--telephonist-orb-diameter:min(clamp(180px,30svh,250px),calc((100vw - 24px)/1.75))}}
@media(max-height:640px){:root{--telephonist-orb-diameter:150px}}
.voice-home:not(.showing-information){--home-orb:var(--telephonist-orb-diameter)}
.introduce-header{--intro-orb:var(--telephonist-orb-diameter)}
/* Keep Mana's raster fringe outside the smooth circular frame. The frame
   preserves the visible diameter while the original artwork slightly overscans. */
.voice-home .persona-host[data-persona-variant="mana"] .persona-renderer,
.voice-home .persona-host[data-persona-variant="mana"] .persona-still{transform:scale(1.025)}
/* Opal already uses 1.32x framing; apply the same 2.5% overscan to its fringe. */
.voice-home .persona-host[data-persona-variant="opal"] .persona-renderer,
.voice-home .persona-host[data-persona-variant="opal"] .persona-still{transform:scale(1.353)}
/* Halo's idle circle occupies approximately 49% of its artboard. Render the
   whole artboard around the normal hit target, keeping travelling rings free. */
.voice-home .persona-host[data-persona-variant="halo"] .persona-renderer,
.voice-home .persona-host[data-persona-variant="halo"] .persona-still,
.introduce-page .persona-host[data-persona-variant="halo"] .persona-renderer,
.introduce-page .persona-host[data-persona-variant="halo"] .persona-still{position:absolute;left:-53%;top:-53%;width:206%;height:206%;clip-path:none;transform:none}
/* Only transparent artboard corners extend beyond the viewport. The diameter
   cap above reserves horizontal room for the actual animated rings. */
.voice-home main,.introduce-header{overflow-x:clip}
.introduce-header .introduce-voice-control{margin-top:calc(var(--intro-orb) * .35 + 20px);height:calc(var(--intro-orb) * 1.35 + 38px)}
.introduce-page #introduce-orb-hint{margin-top:20px}
.introduce-page .entrance-orb[data-persona-state="listening"]+#introduce-orb-hint,
.introduce-page .entrance-orb[data-persona-state="speaking"]+#introduce-orb-hint,
.introduce-page .entrance-orb[data-persona-state="thinking"]+#introduce-orb-hint{margin-top:calc(var(--intro-orb) * .35 + 20px)}