.af-audio{--af-line:#4a4a4a;--af-muted:#b9b9b9;--af-active:#ededdf;color:#eee;margin:32px 0;padding:24px;border:1px solid var(--af-line);background:#111;max-width:100%;box-sizing:border-box}
.af-audio *{box-sizing:border-box}.af-audio h3{font-size:clamp(21px,2.2vw,27px)!important;line-height:1.35!important;margin:0 0 10px!important;letter-spacing:-.02em!important;font-weight:500}.af-audio p{font-size:15px;line-height:1.7}.af-intro{margin:0 0 22px;color:var(--af-muted)}.af-participants{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:24px}.af-participant{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:12px;background:transparent;color:var(--af-muted);border:1px solid var(--af-line);min-height:84px;font:inherit;font-size:15px;cursor:pointer}.af-participant span{display:flex;justify-content:space-between;width:100%;gap:8px}.af-participant span::after{content:'○';font-size:15px}.af-participant[aria-pressed=true]{background:#22241f;color:var(--af-active);border-color:#a5aa99}.af-participant[aria-pressed=true] span::after{content:'●'}.af-participant svg{height:27px;width:100%;overflow:visible;color:#aeb8a4}.af-participant[aria-pressed=false] svg{opacity:.33}.af-transport{border-top:1px solid var(--af-line);padding-top:20px}.af-timeline{display:flex;align-items:center;gap:14px;min-width:0}.af-play{font:inherit;font-size:15px;line-height:1.3;padding:11px 15px;min-height:46px;min-width:82px;background:var(--af-active);border:1px solid var(--af-active);color:#111;cursor:pointer}.af-play:disabled{opacity:.45;cursor:default}.af-track{flex:1;min-width:60px}.af-times{display:flex;justify-content:space-between;color:var(--af-muted);font-size:13px;font-variant-numeric:tabular-nums;margin:3px 0 0}.af-audio input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:26px;border:0;padding:0;margin:0;background:transparent;cursor:pointer;touch-action:pan-y}.af-audio input[type=range]::-webkit-slider-runnable-track{height:3px;background:linear-gradient(to right,#ddd var(--af-progress,0%),#555 var(--af-progress,0%))}.af-audio input[type=range]::-moz-range-track{height:3px;background:#555}.af-audio input[type=range]::-moz-range-progress{height:3px;background:#ddd}.af-audio input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:14px;width:8px;margin-top:-5.5px;background:#eee;border:0;border-radius:0}.af-audio input[type=range]::-moz-range-thumb{height:14px;width:8px;background:#eee;border:0;border-radius:0}.af-bottom{display:flex;gap:18px;align-items:center;justify-content:space-between;margin-top:16px}.af-status{color:var(--af-muted);font-size:13px!important;margin:0;min-height:24px;flex:1}.af-volume{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--af-muted);flex:0 0 225px}.af-volume label{white-space:nowrap}.af-volume input{min-width:50px;max-width:78px}.af-volume-value{font-variant-numeric:tabular-nums;min-width:33px}.af-note{color:var(--af-muted);font-size:13px!important;margin:18px 0 0;line-height:1.7}.af-audio a{color:inherit;text-underline-offset:4px}.af-audio button:hover{border-color:#fff}.af-audio :is(button,input,select,a,summary):focus-visible{outline:2px solid #e3e7ce;outline-offset:4px}.af-download{display:inline-block;min-height:44px;padding:12px 0;font-size:13px}.af-details{font-size:14px;line-height:1.7;color:var(--af-muted);margin-top:20px;border-top:1px solid var(--af-line)}.af-details summary{padding:14px 0;min-height:48px;color:#ddd;cursor:pointer}.af-downloads{display:flex;gap:8px 22px;flex-wrap:wrap;padding:0 0 12px}.af-downloads a{font-size:14px;min-height:44px;display:inline-flex;align-items:center}.af-groups{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:24px}.af-demo-group{border:1px solid var(--af-line);padding:18px;min-width:0;scroll-margin-top:110px}.af-demo-group[data-selected=true]{border-color:#a5aa99}.af-version{display:block;text-transform:uppercase;letter-spacing:.065em;color:#b4b9a8;font-size:12px;margin-bottom:7px}.af-group-title{display:block;font-size:18px;line-height:1.4;margin-bottom:10px}.af-demo-group p{font-size:14px;line-height:1.65;margin:10px 0;color:var(--af-muted)}.af-demo-label{display:block;font-size:13px;color:#ddd;margin-top:18px;margin-bottom:8px}.af-demo-select{display:block;width:100%;min-height:48px;padding:11px 28px 11px 10px;background:#181818;border:1px solid #777;border-radius:0;color:#eee;font:inherit;font-size:14px;line-height:1.4;text-overflow:ellipsis}.af-selected-version{display:block;font-size:12px;letter-spacing:.03em;color:var(--af-muted);margin-bottom:6px}.af-selected-title{font-size:18px!important;line-height:1.45!important;margin:0 0 20px!important;color:#eee}.af-measures{width:100%;border-collapse:collapse;font-size:13px;line-height:1.5;text-align:left;margin:12px 0}.af-measures caption{text-align:left;margin-bottom:10px}.af-measures th,.af-measures td{border-bottom:1px solid #333;padding:10px 12px 10px 0;font-weight:400;vertical-align:top}.af-measures th{color:#eee}.af-audio audio{display:none}.af-audio[data-state=error]{border-color:#b6a383}.af-audio[data-state=error] .af-status{color:#e6d8b7}.af-browser-note{font-size:14px;color:#bbb;line-height:1.7}
@media(max-width:760px){.af-audio{padding:20px}.af-participants{grid-template-columns:repeat(2,minmax(0,1fr))}.af-groups{grid-template-columns:1fr}.af-bottom{flex-direction:column;align-items:flex-start;gap:8px}.af-volume{flex:0 0 auto;width:225px}.af-demo-group{padding:16px}.af-status{flex:auto}.af-note{font-size:13px!important}.af-measures th,.af-measures td{padding-right:7px}}
@media(max-width:400px){.af-audio{padding:16px}.af-participant{font-size:14px;padding:10px}.af-timeline{gap:10px}.af-play{padding-inline:11px;min-width:73px}.af-measures{font-size:12px}}
@media(prefers-reduced-motion:reduce){.af-audio *{scroll-behavior:auto!important}}
.af-audio{container-type:inline-size}.af-demo-group p{overflow-wrap:anywhere}.af-volume{max-width:100%}
@container (max-width:620px){.af-participants{grid-template-columns:repeat(2,minmax(0,1fr))}.af-groups{grid-template-columns:1fr}.af-bottom{flex-direction:column;align-items:flex-start;gap:8px}.af-volume{flex:0 0 auto;width:225px}.af-status{flex:auto}}