.phase-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}.phase-demo-head{flex-direction:column;gap:2px;padding:14px 20px;display:flex}.phase-demo-label{letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-muted);font-size:12px;font-weight:600}.phase-demo-name{font-size:17px;font-weight:600;line-height:1.3}.phase-demo-plot{border-block:var(--border-width) solid var(--color-border);background:var(--chart-bg);grid-template-columns:auto minmax(0,1fr);display:grid}.phase-demo-circle{padding:14px 0 30px 14px}.phase-demo-circle-svg{width:256px;height:256px;display:block;overflow:visible}.phase-demo-chart{padding:14px 14px 30px 44px}.phase-demo-svg{width:100%;height:256px;font-size:var(--text-chart);font-variant-numeric:tabular-nums;display:block;overflow:visible}.phase-demo-grid line{stroke:var(--chart-grid);stroke-width:1px;vector-effect:non-scaling-stroke}.phase-demo-axis{stroke:var(--chart-axis);stroke-width:1px}.phase-demo-ring{fill:none;stroke:var(--chart-axis);stroke-width:1.5px;vector-effect:non-scaling-stroke}.phase-demo-reference,.phase-demo-shifted,.phase-demo-arc,.phase-demo-projection{fill:none;vector-effect:non-scaling-stroke}.phase-demo-reference{stroke:var(--chart-signal);stroke-width:2px}.phase-demo-shifted{stroke:var(--chart-result);stroke-width:2.25px;stroke-dasharray:6 4}.phase-demo-arc{stroke:var(--chart-label);stroke-width:1.5px}.phase-demo-projection{stroke:var(--chart-result);stroke-width:1px;stroke-dasharray:1.5 3}.phase-demo-dot{stroke-width:2px;vector-effect:non-scaling-stroke}.phase-demo-dot.reference{fill:var(--chart-signal);stroke:var(--chart-signal)}.phase-demo-dot.shifted{fill:var(--chart-bg);stroke:var(--chart-result)}.phase-demo-span line{stroke:var(--chart-label);stroke-width:1.5px}.phase-demo-span .guide{stroke-width:1px;stroke-dasharray:3 3}.phase-demo-span text,.phase-demo-angle{fill:var(--chart-label);font-family:var(--font-text);font-style:italic}.phase-demo-ticks{fill:var(--chart-label)}.phase-demo-body{flex-direction:column;gap:10px;padding:12px 20px;display:flex}.phase-demo-legend{flex-wrap:wrap;align-items:center;gap:6px 18px;margin:0;padding:0;font-size:14px;list-style:none;display:flex}.phase-demo-legend li{align-items:center;gap:6px;display:flex}.phase-demo-key{flex:none;width:18px}.phase-demo-key.reference{background:var(--chart-signal);height:2px}.phase-demo-key.shifted{border-top:2px dashed var(--chart-result)}.phase-demo-key.span{border-inline:1.5px solid var(--chart-label);background:linear-gradient(var(--chart-label), var(--chart-label)) center / 100% 1.5px no-repeat;height:8px}.phase-demo-status{border-radius:var(--radius-md);background:var(--color-bg);box-shadow:inset 0 0 0 1px var(--color-border-strong);align-items:flex-start;gap:8px;margin:0;padding:8px 12px;font-size:14px;line-height:1.45;display:flex}.phase-demo-icon{color:var(--color-text-muted);flex:none;margin-top:1px;display:flex}.phase-demo .visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.phase-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}.phase-demo-param{flex-direction:column;gap:8px;display:flex}.phase-demo-param-head{justify-content:space-between;align-items:baseline;gap:8px;font-size:14px;display:flex}.phase-demo-param-head i{font-family:var(--font-text)}.phase-demo-param-head output{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:15px;font-weight:600}.phase-demo-range{--half-thumb:10px;--track:linear-gradient(to right, var(--color-accent) calc(var(--half-thumb) + (100% - 2 * var(--half-thumb)) * var(--fill) / 100), var(--color-border) 0) center / 100% 4px no-repeat;appearance:none;cursor:pointer;touch-action:pan-y;background:0 0;width:100%;height:28px;margin:0}.phase-demo-range::-webkit-slider-runnable-track{background:var(--track);height:28px}.phase-demo-range::-moz-range-track{background:var(--track);height:28px}.phase-demo-range::-webkit-slider-thumb{border:2px solid var(--color-accent);background:var(--color-surface-raised);width:20px;height:20px;box-shadow:var(--shadow-sm);appearance:none;border-radius:50%;margin-top:4px}.phase-demo-range::-moz-range-thumb{box-sizing:border-box;border:2px solid var(--color-accent);background:var(--color-surface-raised);width:20px;height:20px;box-shadow:var(--shadow-sm);border-radius:50%}.phase-demo-range:focus-visible{box-shadow:none;outline:none}.phase-demo-range:focus-visible::-webkit-slider-thumb{box-shadow:var(--focus-ring)}.phase-demo-range:focus-visible::-moz-range-thumb{box-shadow:var(--focus-ring)}.phase-demo-scale{color:var(--color-text-muted);font-variant-numeric:tabular-nums;justify-content:space-between;gap:8px;font-size:12px;display:flex}.phase-demo-actions{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 16px;display:flex}.phase-demo-presets{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.phase-demo-presets-label{color:var(--color-text-muted);margin-right:2px;font-size:13px}.phase-demo-preset{border:var(--border-width) solid var(--color-border-strong);border-radius:var(--radius-full);height:32px;color:var(--color-text);font:500 14px var(--font-ui);font-variant-numeric:tabular-nums;cursor:pointer;background:0 0;padding:0 12px}.phase-demo-preset[aria-pressed=true]{border-color:var(--color-accent);background:var(--color-accent-soft);font-weight:600}.phase-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}@media (hover:hover){.phase-demo-preset:hover,.phase-demo-reset:hover{background:var(--color-bg)}.phase-demo-preset[aria-pressed=true]:hover{background:var(--color-accent-soft)}}.phase-demo-controls:disabled .phase-demo-param,.phase-demo-controls:disabled .phase-demo-actions{opacity:.5}.phase-demo-controls:disabled *{cursor:not-allowed}.phase-demo-note{color:var(--color-text-muted);margin:0;font-size:13px;line-height:1.45}.phase-demo[data-state=ready] .phase-demo-note{display:none}.phase-demo[data-state=error] .phase-demo-note{color:var(--color-error)}.phase-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}.phase-demo-caption b{color:var(--color-text);font-weight:600}@container (width<=719px){.phase-demo-circle-svg{width:192px;height:192px}.phase-demo-svg{height:192px}}@container (width<=559px){.phase-demo-head,.phase-demo-body,.phase-demo-controls,.phase-demo-caption{padding-inline:16px}.phase-demo-plot{grid-template-columns:minmax(0,1fr)}.phase-demo-circle{justify-content:center;padding:14px 0 0;display:flex}.phase-demo-chart{padding:14px 10px 30px 34px}.phase-demo-svg .minor,.phase-demo-projection{display:none}}.tone-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}.tone-demo-head{flex-direction:column;gap:2px;padding:14px 20px;display:flex}.tone-demo-label{letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-muted);font-size:12px;font-weight:600}.tone-demo-name{font-size:17px;font-weight:600;line-height:1.3}.tone-demo-values{border-block:var(--border-width) solid var(--color-border);background:var(--chart-bg);grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:18px 20px;display:grid}.tone-demo-values dt{color:var(--color-text-muted);font-size:13px}.tone-demo-values dt i{font-family:var(--font-text)}.tone-demo-values dd{font-variant-numeric:tabular-nums;white-space:nowrap;margin:2px 0 0;font-size:24px;font-weight:600;line-height:1.25}.tone-demo-body{padding:12px 20px}.tone-demo-status{border-radius:var(--radius-md);background:var(--color-bg);box-shadow:inset 0 0 0 1px var(--color-border-strong);align-items:flex-start;gap:8px;margin:0;padding:8px 12px;font-size:14px;line-height:1.45;display:flex}.tone-demo-icon{color:var(--color-text-muted);flex:none;margin-top:1px;display:flex}.tone-demo .visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.tone-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}.tone-demo-param{flex-direction:column;gap:8px;display:flex}.tone-demo-param-head{justify-content:space-between;align-items:baseline;gap:8px;font-size:14px;display:flex}.tone-demo-param-head i{font-family:var(--font-text)}.tone-demo-param-head output{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:15px;font-weight:600}.tone-demo-range{--half-thumb:10px;--track:linear-gradient(to right, var(--color-accent) calc(var(--half-thumb) + (100% - 2 * var(--half-thumb)) * var(--fill) / 100), var(--color-border) 0) center / 100% 4px no-repeat;appearance:none;cursor:pointer;touch-action:pan-y;background:0 0;width:100%;height:28px;margin:0}.tone-demo-range::-webkit-slider-runnable-track{background:var(--track);height:28px}.tone-demo-range::-moz-range-track{background:var(--track);height:28px}.tone-demo-range::-webkit-slider-thumb{border:2px solid var(--color-accent);background:var(--color-surface-raised);width:20px;height:20px;box-shadow:var(--shadow-sm);appearance:none;border-radius:50%;margin-top:4px}.tone-demo-range::-moz-range-thumb{box-sizing:border-box;border:2px solid var(--color-accent);background:var(--color-surface-raised);width:20px;height:20px;box-shadow:var(--shadow-sm);border-radius:50%}.tone-demo-range:focus-visible{box-shadow:none;outline:none}.tone-demo-range:focus-visible::-webkit-slider-thumb{box-shadow:var(--focus-ring)}.tone-demo-range:focus-visible::-moz-range-thumb{box-shadow:var(--focus-ring)}.tone-demo-scale{height:18px;color:var(--color-text-muted);font-variant-numeric:tabular-nums;font-size:12px;position:relative}.tone-demo-scale span{left:calc(10px + (100% - 20px) * var(--at) / 100);white-space:nowrap;position:absolute;transform:translate(-50%)}.tone-demo-scale span:first-child{left:0;transform:none}.tone-demo-scale span:last-child{left:auto;right:0;transform:none}.tone-demo-actions{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 16px;display:flex}.tone-demo-presets{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.tone-demo-presets-label{color:var(--color-text-muted);margin-right:2px;font-size:13px}.tone-demo-preset{border:var(--border-width) solid var(--color-border-strong);border-radius:var(--radius-full);height:32px;color:var(--color-text);font:500 14px var(--font-ui);font-variant-numeric:tabular-nums;cursor:pointer;background:0 0;padding:0 12px}.tone-demo-preset[aria-pressed=true]{border-color:var(--color-accent);background:var(--color-accent-soft);font-weight:600}.tone-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}.tone-demo-audio{flex-direction:column;gap:6px;display:flex}.tone-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}.tone-demo-warning>svg{color:var(--color-warning);flex:none;margin-top:1px}.tone-demo-warning b{color:var(--color-warning)}.tone-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}.tone-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}.tone-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}.tone-demo-play-icon,.tone-demo-mute-icon{display:flex}.tone-demo-play:not([data-playing]) .tone-demo-play-icon.stop,.tone-demo-play[data-playing] .tone-demo-play-icon.start,.tone-demo-mute:not([data-muted]) .tone-demo-mute-icon.off,.tone-demo-mute[data-muted] .tone-demo-mute-icon.on{display:none}.tone-demo-volume{flex:140px;align-items:center;gap:6px;max-width:280px;display:flex}.tone-demo-volume-text{width:36px;color:var(--color-text-muted);font-variant-numeric:tabular-nums;font-size:13px}.tone-demo-range.compact{--half-thumb:7px;flex:1;min-width:0;height:24px}.tone-demo-range.compact::-webkit-slider-runnable-track{height:24px}.tone-demo-range.compact::-moz-range-track{height:24px}.tone-demo-range.compact::-webkit-slider-thumb{background:var(--color-accent);border:0;width:14px;height:14px;margin-top:5px}.tone-demo-range.compact::-moz-range-thumb{background:var(--color-accent);border:0;width:14px;height:14px}.tone-demo-player-state{color:var(--color-text-muted);margin:0;font-size:12px;line-height:1.45}.tone-demo-player[data-mode=error]+.tone-demo-player-state,.tone-demo-player[data-mode=unavailable]+.tone-demo-player-state{color:var(--color-error)}.tone-demo-player :disabled{opacity:.45}@media (hover:hover){.tone-demo-preset:hover,.tone-demo-reset:hover,.tone-demo-mute:not(:disabled):hover{background:var(--color-bg)}.tone-demo-preset[aria-pressed=true]:hover{background:var(--color-accent-soft)}}.tone-demo-controls:disabled .tone-demo-param,.tone-demo-controls:disabled .tone-demo-actions,.tone-demo-controls:disabled .tone-demo-player{opacity:.5}.tone-demo-controls:disabled *{cursor:not-allowed}.tone-demo-note{color:var(--color-text-muted);margin:0;font-size:13px;line-height:1.45}.tone-demo[data-state=ready] .tone-demo-note{display:none}.tone-demo[data-state=error] .tone-demo-note{color:var(--color-error)}.tone-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}.tone-demo-caption b{color:var(--color-text);font-weight:600}@container (width<=559px){.tone-demo-head,.tone-demo-values,.tone-demo-body,.tone-demo-controls,.tone-demo-caption{padding-inline:16px}.tone-demo-values{grid-template-columns:minmax(0,1fr);gap:6px;padding-block:12px}.tone-demo-values div{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.tone-demo-values dd{font-size:18px}}