@layer components{.voices{--voice-interval: 7s;--voice-face: clamp(1.5rem, 8vw, 2rem);display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title title" "picker picker" "stage stage" "progress toggle";column-gap:.75rem;align-items:center;max-width:36rem;padding:1.25rem 1.25rem 1rem}.voices-title{grid-area:title}.voices-ui{display:contents}@media(max-width:359px){.voices{padding-inline:1rem}}@media(min-width:640px){.voices{padding:1.5rem 1.5rem 1.125rem}}.voices-stage{grid-area:stage;display:grid;margin-top:.75rem}.voice{grid-area:1 / 1;display:flex;flex-direction:column;justify-content:space-between;opacity:0;visibility:hidden;transform:translateY(.5rem);transition:opacity .4s var(--ease-out),transform .5s var(--ease-out),visibility 0s linear .5s}.voice.is-active{opacity:1;visibility:visible;transform:none;transition:opacity .6s var(--ease-out) .18s,transform .7s var(--ease-out) .18s,visibility 0s}.voices.is-manual .voice{transition:opacity .12s var(--ease-out),transform .16s var(--ease-out),visibility 0s linear .16s}.voices.is-manual .voice.is-active{transition:opacity .24s var(--ease-out) .06s,transform .3s var(--ease-out) .06s,visibility 0s}.voice-quote p:before{content:"\201c"}.voice-quote p:after{content:"\201d"}.voice-quote p{color:var(--color-fg);font-size:1rem;font-weight:500;line-height:1.5;letter-spacing:-.005em}@media(min-width:640px){.voice-quote p{font-size:1.125rem;line-height:1.55}}.voice-by{display:flex;flex-wrap:wrap;align-items:baseline;gap:.125rem .625rem;margin-top:.875rem;font-size:.875rem;line-height:1.4}.voice-name{color:var(--color-fg);font-weight:600}.voice-role{color:var(--color-muted)}.voices-progress{grid-area:progress;display:block;height:1px;margin-top:.875rem;overflow:hidden;background:var(--color-line-2)}.voices-bar{display:block;height:100%;background:linear-gradient(90deg,var(--color-violet),var(--color-cyan));transform:scaleX(0);transform-origin:0 50%}.voices-bar.is-running{animation:voice-progress var(--voice-interval) linear forwards}.voices.is-paused .voices-bar{animation-play-state:paused}.voices.is-stopped .voices-bar{visibility:hidden}.voices-picker{grid-area:picker;display:grid;grid-template-columns:repeat(var(--voice-count, 7),minmax(0,2.75rem));justify-content:space-between;min-width:0;margin-inline:-.25rem}.voice-pick{display:grid;place-items:center;width:100%;height:2.75rem;border-radius:999px}.voice-ring{display:block;width:min(100%,calc(var(--voice-face) + 4px));aspect-ratio:1;padding:2px;border-radius:999px;background:var(--color-line-2);opacity:.55;transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)}.voice-ring img,.voice-initials{display:block;width:100%;height:100%;border:2px solid var(--color-surface);border-radius:999px;background:var(--color-surface-2);object-fit:cover}.voice-initials{display:grid;place-items:center;font-family:var(--font-mono);font-size:.625rem;color:var(--color-fg-2)}.voice-pick[aria-current=true] .voice-ring{opacity:1;background:linear-gradient(135deg,var(--color-violet),var(--color-cyan))}button.voice-pick:hover .voice-ring,button.voice-pick:focus-visible .voice-ring{opacity:1}button.voice-pick:focus-visible{outline-offset:-2px;border-radius:999px}.voices-toggle{grid-area:toggle;position:relative;display:grid;place-items:center;width:2.75rem;height:2.75rem;margin:.625rem -.25rem -.25rem 0;border-radius:var(--radius-sm);color:var(--color-fg-2);transition:color var(--dur-2) var(--ease-out)}.voices-toggle:before{content:"";position:absolute;top:.25rem;right:.25rem;bottom:.25rem;left:.25rem;border:1px solid var(--color-line-2);border-radius:var(--radius-sm);transition:border-color var(--dur-2) var(--ease-out)}.voices-toggle:hover{color:var(--color-fg)}.voices-toggle:hover:before{border-color:var(--color-line-3)}.voices-toggle:focus-visible{outline-offset:-2px}.voices-toggle svg{width:1rem;height:1rem;fill:currentColor}.voices-toggle .i-play,.voices.is-stopped .voices-toggle .i-pause{display:none}.voices.is-stopped .voices-toggle .i-play{display:block}@media(prefers-reduced-motion:reduce){.voice,.voice.is-active,.voices.is-manual .voice,.voices.is-manual .voice.is-active{transform:none;transition:none}.voices-progress,.voices-toggle{display:none}}}@keyframes voice-progress{to{transform:scaleX(1)}}
/*# sourceMappingURL=/cdn/shop/t/75/assets/gpw-voci.css.map */