.adsr-demo{margin:var(--space-6) 0;border:var(--border-width) solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);font-family:var(--font-ui);scroll-margin-top:88px;overflow:hidden;container-type:inline-size}.adsr-demo-head{flex-direction:column;gap:2px;padding:14px 20px;display:flex}.adsr-demo-label{letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-muted);font-size:12px;font-weight:600}.adsr-demo-name{font-size:17px;font-weight:600;line-height:1.3}.adsr-demo-chart{border-block:var(--border-width) solid var(--color-border);background:var(--chart-bg);position:relative;overflow-x:auto}.adsr-demo-chart:focus-visible{outline:2px solid var(--color-accent);outline-offset:-2px}.adsr-demo svg{font-size:12px;display:block}.adsr-demo svg path{fill:none}.adsr-demo svg .label{fill:var(--color-text);font-weight:600}.adsr-demo svg .tick{fill:var(--chart-label);font-variant-numeric:tabular-nums}.adsr-demo svg .stage{fill:var(--color-text);font-weight:600}.adsr-demo svg .grid{stroke:var(--chart-grid);stroke-width:1px}.adsr-demo svg .zero{stroke:var(--chart-axis);stroke-width:1px}.adsr-demo svg .bound{stroke:var(--chart-axis);stroke-width:1px;stroke-dasharray:3 4}.adsr-demo svg .event{stroke:var(--chart-series-6);stroke-width:1.5px}.adsr-demo svg .target{stroke:var(--chart-series-3);stroke-width:1px;stroke-dasharray:6 4}.adsr-demo svg .env{stroke:var(--chart-series-2);stroke-width:2.2px;stroke-linejoin:round}.adsr-demo svg .bound-env{stroke:var(--chart-series-2);stroke-width:1.2px;stroke-dasharray:5 4}.adsr-demo svg .out{stroke:var(--chart-series-1);stroke-width:1.2px;stroke-linejoin:round}.adsr-demo svg .playhead{stroke:var(--color-accent);stroke-width:2px}.adsr-demo-legend{flex-wrap:wrap;gap:6px 16px;margin:0;padding:12px 20px 0;font-size:14px;list-style:none;display:flex}.adsr-demo-legend li{align-items:center;gap:6px;display:flex}.adsr-demo-legend i{border-top:2px solid var(--chart-series-1);width:18px;height:0}.adsr-demo-legend .env{border-top:3px solid var(--chart-series-2)}.adsr-demo-legend .bound-env{border-top:1.5px dashed var(--chart-series-2)}.adsr-demo-legend .target{border-top:1.5px dashed var(--chart-series-3)}.adsr-demo-legend .event{border-top:0;border-left:2px solid var(--chart-series-6);width:0;height:14px}.adsr-demo-legend .bound{border-top:0;border-left:1px dashed var(--chart-axis);width:0;height:14px}.adsr-demo-status{border-radius:var(--radius-md);background:var(--color-bg);box-shadow:inset 0 0 0 1px var(--color-border-strong);font-variant-numeric:tabular-nums;gap:6px;margin:12px 20px;padding:10px 12px;font-size:14px;line-height:1.45;display:grid}.adsr-demo-status p{margin:0}.adsr-demo-edges{align-items:flex-start;gap:6px;display:flex}.adsr-demo-edges>svg{color:var(--color-text-muted);flex:none;margin-top:2px}.adsr-demo-status[data-jump=true]{background:var(--color-warning-bg)}.adsr-demo-status[data-jump=true] .adsr-demo-edges{color:var(--color-warning);font-weight:600}.adsr-demo-status[data-jump=true] .adsr-demo-edges>svg{color:var(--color-warning)}.adsr-demo .visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.adsr-demo-controls{border:0;border-top:var(--border-width) solid var(--color-border);flex-direction:column;gap:14px;min-width:0;margin:0;padding:14px 20px 16px;display:flex}.adsr-demo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 20px;display:grid}.adsr-demo-select{justify-content:space-between;align-items:center;gap:8px;font-size:14px;display:flex}.adsr-demo-select select{border:var(--border-width) solid var(--color-border-strong);border-radius:var(--radius-md);background:var(--color-bg);min-width:0;min-height:36px;color:var(--color-text);font:16px var(--font-ui);padding:4px 8px}.adsr-demo-param{flex-direction:column;gap:4px;display:flex}.adsr-demo-param-head{justify-content:space-between;align-items:baseline;gap:8px;font-size:14px;display:flex}.adsr-demo-param-head output{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:15px;font-weight:600}.adsr-demo-range{width:100%;min-height:32px;accent-color:var(--color-accent);touch-action:pan-y;margin:0}.adsr-demo-choice{border:0;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0;padding:0;font-size:14px;display:flex}.adsr-demo-choice legend{float:left;margin-right:6px;padding:0}.adsr-demo-choice label{align-items:center;gap:6px;min-height:32px;display:flex}.adsr-demo-choice input{width:18px;height:18px;accent-color:var(--color-accent);margin:0}.adsr-demo-actions{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 16px;display:flex}.adsr-demo-presets{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.adsr-demo-presets-label{color:var(--color-text-muted);margin-right:2px;font-size:13px}.adsr-demo-preset{border:var(--border-width) solid var(--color-border-strong);border-radius:var(--radius-full);min-height:32px;color:var(--color-text);font:500 14px var(--font-ui);cursor:pointer;background:0 0;padding:0 12px}.adsr-demo-reset{border:var(--border-width) solid var(--color-border-strong);border-radius:var(--radius-md);height:36px;color:var(--color-text);font:500 14px var(--font-ui);cursor:pointer;background:0 0;align-items:center;gap:6px;padding:0 12px;display:inline-flex}.adsr-demo :is(button,select,input):focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.adsr-demo-audio{flex-direction:column;gap:6px;display:flex}.adsr-demo-warning{border-radius:var(--radius-md);background:var(--color-warning-bg);align-items:flex-start;gap:10px;margin:0 0 4px;padding:10px 14px;font-size:14px;line-height:1.45;display:flex}.adsr-demo-warning>svg{color:var(--color-warning);flex:none;margin-top:1px}.adsr-demo-warning b{color:var(--color-warning)}.adsr-demo-player{border:var(--border-width) solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);flex-wrap:wrap;align-items:center;gap:10px;padding:8px 14px 8px 8px;display:flex}.adsr-demo-play{background:var(--color-accent);width:40px;height:40px;color:var(--color-on-accent);cursor:pointer;border:0;border-radius:50%;flex:none;place-items:center;display:grid}.adsr-demo-mute{border-radius:var(--radius-md);width:36px;height:36px;color:var(--color-text-muted);cursor:pointer;background:0 0;border:0;flex:none;place-items:center;display:grid}.adsr-demo-play-icon,.adsr-demo-mute-icon{display:flex}.adsr-demo-play:not([data-playing]) .adsr-demo-play-icon.stop,.adsr-demo-play[data-playing] .adsr-demo-play-icon.start,.adsr-demo-mute:not([data-muted]) .adsr-demo-mute-icon.off,.adsr-demo-mute[data-muted] .adsr-demo-mute-icon.on{display:none}.adsr-demo-volume{flex:140px;align-items:center;gap:6px;max-width:280px;display:flex}.adsr-demo-range.compact{flex:1;min-width:0;min-height:24px}.adsr-demo-volume-text{width:36px;color:var(--color-text-muted);font-variant-numeric:tabular-nums;font-size:13px}.adsr-demo-player-state{color:var(--color-text-muted);margin:0;font-size:12px;line-height:1.45}.adsr-demo-player[data-mode=error]+.adsr-demo-player-state,.adsr-demo-player[data-mode=unavailable]+.adsr-demo-player-state{color:var(--color-error)}.adsr-demo-player :disabled{opacity:.45}@media (hover:hover){.adsr-demo-preset:hover,.adsr-demo-reset:hover,.adsr-demo-mute:not(:disabled):hover{background:var(--color-bg)}}.adsr-demo-controls:disabled>:not(.adsr-demo-note-text){opacity:.5}.adsr-demo-controls:disabled *{cursor:not-allowed}.adsr-demo-note-text{color:var(--color-text-muted);margin:0;font-size:13px;line-height:1.45}.adsr-demo[data-state=ready] .adsr-demo-note-text{display:none}.adsr-demo[data-state=error] .adsr-demo-note-text{color:var(--color-error)}.adsr-demo-caption{border-top:var(--border-width) solid var(--color-border);color:var(--color-text-muted);padding:10px 20px 14px;font-size:14px;line-height:1.45}.adsr-demo-caption b{color:var(--color-text);font-weight:600}@container (width<=559px){.adsr-demo-head,.adsr-demo-controls,.adsr-demo-caption,.adsr-demo-legend{padding-inline:16px}.adsr-demo-status{margin-inline:16px}.adsr-demo-grid{grid-template-columns:minmax(0,1fr)}}.adsr-plot text{fill:currentColor}.adsr-plot .title{font-weight:600}.adsr-plot path{fill:none}.adsr-plot .axis{stroke:var(--chart-axis)}.adsr-plot .grid{stroke:var(--chart-grid)}.adsr-plot .target{stroke:var(--chart-series-3);stroke-dasharray:2 4}.adsr-plot .event{stroke:var(--chart-series-6);stroke-width:1.5px}.adsr-plot .curve{stroke:var(--chart-series-1);stroke-width:2.5px;stroke-linejoin:round}.adsr-plot .dashed{stroke:var(--chart-series-2);stroke-dasharray:6 4}