@layer components{.snd{--snd-ink:var(--pp-ink,#000);--snd-muted:var(--pp-muted,#6b6878);--snd-accent:var(--pp-accent,#551a89);--snd-hover:var(--pp-card,#f4f3f7);--snd-focus:var(--snd-ink);flex-wrap:wrap;align-items:center;gap:4px 10px;min-width:0;max-width:100%;display:inline-flex}.snd[data-tone=dark]{--snd-ink:var(--home-paper,#edecf1);--snd-muted:var(--home-paper-dim,#a8a4b4);--snd-accent:#c9b8ff;--snd-focus:#fff}.snd[data-tone=deep]{--snd-ink:var(--home-on-deep,#f1ecff);--snd-muted:var(--home-on-deep-dim,#d8cdf7);--snd-accent:#fff;--snd-focus:#fff}.snd-btn{z-index:1;color:var(--snd-ink);cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:9999px;flex-shrink:0;justify-content:center;align-items:center;transition:background-color .2s,color .2s,box-shadow .2s,scale .2s;display:inline-flex;position:relative}.snd-btn:before{content:"";border-radius:9999px;position:absolute}.snd-btn:active{scale:.96}.snd-btn:focus-visible{outline:2px solid var(--snd-focus);outline-offset:2px}.snd[data-variant=round] .snd-btn{width:40px;height:40px}.snd[data-variant=round] .snd-btn:before{inset:-2px}.snd[data-variant=pill] .snd-btn{white-space:nowrap;gap:8px;height:36px;padding:0 12px;font-size:13px;line-height:18px}.snd[data-variant=pill] .snd-btn:before{inset:-4px 0}.snd[data-tone=light] .snd-btn{background:#fff;box-shadow:0 0 1px #0006,0 1px 1px #0000000a,0 2px 4px #0000000a}.snd[data-tone=light][data-variant=pill] .snd-btn{box-shadow:0 0 0 1px #1810281a}.snd[data-tone=light] .snd-btn:hover{background:var(--snd-hover)}.snd[data-tone=dark] .snd-btn{box-shadow:0 0 0 1px #ffffff26}.snd[data-tone=dark] .snd-btn:hover{background:#ffffff14}.snd[data-tone=deep] .snd-btn{background:#ffffff14;box-shadow:0 0 0 1px #ffffff24}.snd[data-tone=deep] .snd-btn:hover{background:#ffffff24}.snd-btn[data-on]{color:var(--snd-accent)}.snd[data-tone=light] .snd-btn[data-on]{box-shadow:0 0 0 1.5px #551a8973,0 1px 1px #0000000a}.snd[data-tone=dark] .snd-btn[data-on],.snd[data-tone=deep] .snd-btn[data-on]{box-shadow:0 0 0 1.5px #ffffff80}.snd-glyph{flex-shrink:0;place-items:center;width:16px;height:16px;display:inline-grid}.snd-glyph>*{grid-area:1/1}.snd-bars{visibility:hidden;align-items:flex-end;gap:2px;height:10px;display:inline-flex}.snd-btn[data-sounding] .snd-bars{visibility:visible}.snd-btn[data-sounding] .snd-glyph>svg{visibility:hidden}.snd-bars i{transform-origin:50% 100%;background:currentColor;border-radius:1px;width:2px;height:10px}.snd-btn[data-sounding] .snd-bars i{animation:.76s ease-in-out infinite alternate snd-bar}.snd-bars i:nth-child(2){animation-delay:-260ms}.snd-bars i:nth-child(3){animation-delay:-520ms}.snd-dock{z-index:40;left:50%;bottom:calc(12px + env(safe-area-inset-bottom,0px));background:#fff;border-radius:22px;flex-wrap:nowrap;width:max-content;max-width:calc(100vw - 24px);padding:4px 14px 4px 4px;position:fixed;translate:-50%;box-shadow:0 0 0 1px #1810280f,0 10px 24px -10px #18102873}.snd-dock[hidden]{display:none}.snd-note{min-width:0;color:var(--snd-muted);text-wrap:pretty;font-size:12px;line-height:16px}}@keyframes snd-bar{0%{transform:scaleY(.3)}to{transform:scaleY(1)}}@media (prefers-reduced-motion:reduce){.snd-btn{transition:none}.snd-btn:active{scale:1}.snd-bars i{animation:none;transform:scaleY(.6)}}html[data-tier=still] .snd-bars i{animation:none;transform:scaleY(.6)}