/* Approved four-family audio artwork. These palettes stay inside the avatars. */
.audio-avatar-specimen{margin-top:40px;padding-top:32px;border-top:1px solid var(--line);scroll-margin-top:40px}
.audio-avatar-specimen .avatar-specimen-head{display:flex;align-items:start;justify-content:space-between;gap:24px;margin-bottom:16px}
.audio-avatar-specimen .avatar-specimen-head h3{font-size:clamp(24px,3vw,32px);margin:0 0 10px}
.audio-avatar-specimen .avatar-specimen-head p{max-width:56ch;margin:0;font-size:13px;color:var(--muted)}
.audio-avatar-specimen [data-avatar-motion]{flex:none;font:inherit;font-size:12px;min-height:44px;padding:8px 12px;border:1px solid var(--control-border);border-radius:10px;background:transparent;color:var(--ink);cursor:pointer}
.audio-avatar-specimen [data-avatar-motion]:hover{background:var(--surface)}
.audio-avatar-specimen [data-avatar-grid]{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;padding:20px 0 24px}
.audio-avatar-specimen .family-group{min-width:0;text-align:center}
.audio-avatar-specimen .control{display:grid;justify-items:center;min-width:0}
.audio-avatar-specimen .family-copy{margin-top:18px}
.audio-avatar-specimen h4{font-size:16px;margin:0;letter-spacing:-.03em}
.audio-avatar-specimen .direction{margin:8px 0 0;font-size:12px}
.audio-avatar-specimen .description{margin:3px 0 0;color:var(--muted);font-size:11px}
.audio-avatar-specimen audio{display:none}
.audio-avatar-specimen .avatar-button{position:relative;isolation:isolate;display:block;flex:none;width:96px;height:96px;margin:12px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--paper);transition:transform 160ms cubic-bezier(.2,0,0,1)}.audio-avatar-specimen .avatar-button:active{transform:scale(.96)}.audio-avatar-specimen .aura{position:absolute;inset:0;border-radius:50%;overflow:hidden;isolation:isolate;background:var(--aura-base);box-shadow:0 0 0 1px rgba(0,0,0,.06);filter:saturate(var(--sound-colour,1)) contrast(var(--sound-contrast,1));transition:scale 80ms linear,filter 100ms linear}.audio-avatar-specimen .avatar-button[data-playing=true] .aura{scale:var(--sound-scale,1)}.audio-avatar-specimen .aura-layer{position:absolute;inset:-28%;transform-origin:center;animation:audio-avatar-orbit var(--turn,30s) linear infinite;animation-delay:var(--delay,0s)}.audio-avatar-specimen .aura-layer:before{content:'';position:absolute;inset:0;background:var(--paint);filter:var(--ink-texture);animation:audio-avatar-breathe var(--breath,7s) ease-in-out infinite alternate;animation-delay:var(--delay,0s)}.audio-avatar-specimen .aura-layer:nth-child(1){--paint:radial-gradient(ellipse at 32% 30%,var(--tone-one) 0%,var(--tone-one) 27%,transparent 62%);--turn:14s;--delay:-6s}.audio-avatar-specimen .aura-layer:nth-child(2){--paint:radial-gradient(ellipse at 68% 67%,var(--tone-two) 0%,var(--tone-mid) 18%,transparent 56%);--turn:19s;--breath:6s;--delay:-17s;animation-direction:reverse}.audio-avatar-specimen .aura-layer:nth-child(3){--paint:radial-gradient(ellipse at 38% 72%,var(--tone-three) 0%,var(--tone-glow) 19%,transparent 39%);--turn:23s;--breath:5s;--delay:-22s}.audio-avatar-specimen .aura-layer:nth-child(4){--paint:radial-gradient(ellipse at 69% 28%,var(--tone-shade) 0%,var(--tone-shade) 22%,transparent 55%);--turn:17s;--breath:7s;--delay:-13s;animation-direction:reverse}.audio-avatar-specimen .cue{position:absolute;z-index:4;inset:0;display:grid;place-items:center;pointer-events:none}.audio-avatar-specimen .cue svg{grid-area:1/1;position:relative;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.25);filter:blur(4px);transition:opacity 160ms,transform 160ms,filter 160ms}.audio-avatar-specimen .avatar-button:is(:hover,.audio-avatar-specimen :focus-visible)[data-playing=false] .cue .play,.audio-avatar-specimen .avatar-button:is(:hover,.audio-avatar-specimen :focus-visible)[data-playing=true] .cue .pause{opacity:1;transform:scale(1);filter:none}.audio-avatar-specimen .cue:before{content:'';position:absolute;inset:22%;border-radius:50%;background:#1d201a88;opacity:0;transition:opacity 160ms}.audio-avatar-specimen .avatar-button:is(:hover,.audio-avatar-specimen :focus-visible) .cue:before{opacity:1}.audio-avatar-specimen .message{font-size:11px;color:var(--error);max-width:24ch;text-align:center}.audio-avatar-specimen .message:empty{display:none}.audio-avatar-specimen .family-smooth{--aura-base:#a26031;--tone-one:#e3b879;--tone-two:#fff0d0;--tone-mid:#f5d5a080;--tone-three:#cf875e88;--tone-glow:#e3b87922;--tone-shade:#75412d;--ink-texture:url(#audio-avatar-ink-smooth)}.audio-avatar-specimen .family-air{--aura-base:#967b95;--tone-one:#cfb9d5;--tone-two:#f5e8ed;--tone-mid:#dcc6dc88;--tone-three:#d1a7b888;--tone-glow:#e1bbc822;--tone-shade:#846d83;--ink-texture:url(#audio-avatar-ink-air)}.audio-avatar-specimen .family-dense{--aura-base:#0f3540;--tone-one:#3f8b90;--tone-two:#9dbeb8;--tone-mid:#54909566;--tone-three:#2b6c7288;--tone-glow:#54909522;--tone-shade:#071e2c;--ink-texture:url(#audio-avatar-ink-dense)}.audio-avatar-specimen .family-grain{--aura-base:#aac636;--tone-one:#d7fa73;--tone-two:#f6ffb8;--tone-mid:#ddec6988;--tone-three:#779d44aa;--tone-glow:#aac63622;--tone-shade:#425429;--ink-texture:url(#audio-avatar-ink-grain)}.audio-avatar-specimen .flow-ribbon .aura-layer:nth-child(1){--paint:linear-gradient(125deg,#7653b900 20%,var(--tone-one) 42%,var(--tone-two) 56%,#7653b900 80%);--turn:20s}.audio-avatar-specimen .flow-ribbon .aura-layer:nth-child(4){--paint:radial-gradient(ellipse at 38% 76%,var(--tone-shade) 0%,#1d201a00 55%)}.audio-avatar-specimen .flow-wisp .aura-layer:nth-child(1){--paint:linear-gradient(75deg,#7653b900 32%,var(--tone-one) 48%,#7653b900 60%)}.audio-avatar-specimen .flow-wisp .aura-layer:nth-child(2){--paint:linear-gradient(155deg,#fafbf700 25%,var(--tone-two) 48%,#fafbf700 65%)}.audio-avatar-specimen .flow-cut .aura-layer:nth-child(1){--paint:conic-gradient(from 20deg at 50% 50%,#7653b900 0deg,var(--tone-one) 80deg,var(--tone-two) 95deg,#7653b900 118deg,#7653b900 220deg,var(--tone-one) 285deg,#7653b900 330deg)}


@keyframes audio-avatar-orbit{from{rotate:0deg}to{rotate:360deg}}
@keyframes audio-avatar-breathe{from{transform:translate(-7%,4%) scale(.84)}to{transform:translate(7%,-6%) scale(1.17)}}
.audio-avatar-specimen:is(.still,.background,.reduced) .aura-layer,.audio-avatar-specimen:is(.still,.background,.reduced) .aura-layer:before,.audio-avatar-specimen .offscreen .aura-layer,.audio-avatar-specimen .offscreen .aura-layer:before{animation-play-state:paused}
@media(max-width:1000px){.audio-avatar-specimen [data-avatar-grid]{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}}
@media(max-width:600px){.audio-avatar-specimen .avatar-specimen-head{display:block}.audio-avatar-specimen [data-avatar-motion]{margin-top:16px}.audio-avatar-specimen .avatar-button{width:80px;height:80px;margin:8px}.audio-avatar-specimen .family-copy{margin-top:12px}.audio-avatar-specimen h4{font-size:15px}.audio-avatar-specimen .direction{font-size:12px}.audio-avatar-specimen .description{font-size:11px}}
@media(prefers-reduced-motion:reduce){.audio-avatar-specimen *,.audio-avatar-specimen *:before{animation:none!important;transition:none!important}.audio-avatar-specimen .avatar-button:active{transform:none}.audio-avatar-specimen .avatar-button[data-playing=true] .aura{scale:1}}

/* Compact audio placement: context remains in the surrounding card. */
.audio-avatar-specimen.audio-avatar-inline{margin:0;padding:0;border:0}
.audio-avatar-specimen.audio-avatar-inline [data-avatar-grid]{display:block;padding:0}
.audio-avatar-specimen.audio-avatar-inline .control{justify-items:start}
.audio-avatar-specimen.audio-avatar-inline .avatar-button{width:56px;height:56px;margin:4px}
.audio-avatar-specimen.audio-avatar-inline .cue svg{width:16px;height:16px}

/* The artwork is the control: no initials or play/pause overlay. */
.audio-avatar-inline .cue{display:none}
.audio-avatar-inline .avatar-button:focus-visible{outline:2px solid var(--purple);outline-offset:4px}
.audio-avatar-inline .control{justify-items:start}
.audio-avatar-inline .message{text-align:start}
.audio-avatar-inline .aura{animation:audio-avatar-life 7s ease-in-out infinite}
.audio-avatar-inline .aura-layer{animation-duration:80s}
.audio-avatar-inline .aura-layer:before{animation-duration:12s}
.audio-avatar-inline:is(.still,.background,.reduced) .aura,.audio-avatar-inline .offscreen .aura{animation-play-state:paused}
@keyframes audio-avatar-life{0%,100%{transform:scale(.97)}50%{transform:scale(1.025)}}
@media(prefers-reduced-motion:reduce){.audio-avatar-inline .aura{animation:none}}