.phasor-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:clip;container-type:inline-size}.phasor-demo-head{flex-direction:column;gap:2px;padding:14px 20px;display:flex}.phasor-demo-label{letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-muted);font-size:12px;font-weight:600}.phasor-demo-name{font-size:17px;font-weight:600;line-height:1.3}.phasor-demo-plot{border-block:var(--border-width) solid var(--color-border);background:var(--chart-bg);grid-template-columns:auto minmax(0,1fr);gap:8px;display:grid}.phasor-demo-side{justify-content:center;align-self:start;padding:16px 0 16px 16px;display:flex;position:sticky;top:72px}.phasor-demo-plane-svg{user-select:none;width:220px;height:220px;display:block;overflow:visible}.phasor-demo-charts{flex-direction:column;gap:6px;margin:0;padding:12px 20px 8px 0;list-style:none;display:flex}.phasor-demo-chart-head{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 12px;padding-left:36px;font-size:14px;display:flex}.phasor-demo-chart-name{font-weight:600}.phasor-demo-formula,.phasor-demo-angle-line{font-family:var(--font-text);font-variant-numeric:tabular-nums;color:var(--color-text)}.phasor-demo-chart{padding:8px 4px 26px 36px}.phasor-demo-svg{width:100%;height:72px;font-size:var(--text-chart);font-variant-numeric:tabular-nums;display:block;overflow:visible}.phasor-demo-grid line{stroke:var(--chart-grid);stroke-width:1px;vector-effect:non-scaling-stroke}.phasor-demo-axis{stroke:var(--chart-axis);stroke-width:1px}.phasor-demo-ring{fill:none;stroke:var(--chart-axis);stroke-width:1.5px;vector-effect:non-scaling-stroke}.phasor-demo-re,.phasor-demo-im,.phasor-demo-arc,.phasor-demo-arrow,.phasor-demo-proj,.phasor-demo-vector{fill:none;vector-effect:non-scaling-stroke}.phasor-demo-re{stroke:var(--chart-sample);stroke-width:2.25px;stroke-dasharray:6 4}.phasor-demo-im{stroke:var(--chart-signal);stroke-width:2.5px}.phasor-demo-cursor{stroke:var(--chart-result);stroke-width:1.5px}.phasor-demo-dot,.phasor-demo-foot{stroke:var(--chart-bg);stroke-width:2px}.phasor-demo-foot{vector-effect:non-scaling-stroke}.phasor-demo-dot.re,.phasor-demo-foot.re{fill:var(--chart-sample)}.phasor-demo-dot.im,.phasor-demo-foot.im{fill:var(--chart-signal)}.phasor-demo-vector{stroke:var(--chart-result);stroke-width:2.25px}.phasor-demo-tip{fill:var(--chart-result);stroke:var(--chart-bg);stroke-width:2px;vector-effect:non-scaling-stroke}.phasor-demo-arc{stroke:var(--chart-label);stroke-width:1.5px}.phasor-demo-arrow{stroke:var(--chart-result);stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round}.phasor-demo-proj{stroke-width:1.5px}.phasor-demo-proj.re{stroke:var(--chart-sample);stroke-dasharray:4 3}.phasor-demo-proj.im{stroke:var(--chart-signal);stroke-dasharray:1.5 3}.phasor-demo-angle{fill:var(--chart-label);font-family:var(--font-text);font-style:italic}.phasor-demo-ticks{fill:var(--chart-label)}.phasor-demo-body{flex-direction:column;gap:10px;padding:12px 20px;display:flex}.phasor-demo-angle-line{overflow-wrap:anywhere;margin:0;font-size:15px}.phasor-demo-legend{flex-wrap:wrap;align-items:center;gap:6px 18px;margin:0;padding:0;font-size:14px;list-style:none;display:flex}.phasor-demo-legend li{align-items:center;gap:6px;display:flex}.phasor-demo-legend i,.phasor-demo-param-head i,.phasor-demo-formula i{font-family:var(--font-text)}.phasor-demo-key{flex:none;width:18px}.phasor-demo-key.vector{background:var(--chart-result);height:2.25px}.phasor-demo-key.re{background:repeating-linear-gradient(to right, var(--chart-sample) 0 6px, transparent 6px 10px);height:2.25px}.phasor-demo-key.im{background:var(--chart-signal);height:2.5px}.phasor-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}.phasor-demo-icon{color:var(--color-text-muted);flex:none;margin-top:1px;display:flex}.phasor-demo .visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.phasor-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}.phasor-demo-params{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 20px;display:grid}.phasor-demo-param{flex-direction:column;gap:8px;display:flex}.phasor-demo-param-head{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 8px;font-size:14px;display:flex}.phasor-demo-param-head output{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:15px;font-weight:600}.phasor-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}.phasor-demo-range::-webkit-slider-runnable-track{background:var(--track);height:28px}.phasor-demo-range::-moz-range-track{background:var(--track);height:28px}.phasor-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}.phasor-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%}.phasor-demo-range:focus-visible{box-shadow:none;outline:none}.phasor-demo-range:focus-visible::-webkit-slider-thumb{box-shadow:var(--focus-ring)}.phasor-demo-range:focus-visible::-moz-range-thumb{box-shadow:var(--focus-ring)}.phasor-demo-scale{color:var(--color-text-muted);font-variant-numeric:tabular-nums;justify-content:space-between;gap:8px;font-size:12px;display:flex}.phasor-demo-actions{flex-wrap:wrap;align-items:center;gap:10px 16px;display:flex}.phasor-demo-play,.phasor-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}.phasor-demo-play{border-color:var(--color-accent);background:var(--color-accent-soft);min-width:124px;font-weight:600}.phasor-demo-reset{margin-left:auto}.phasor-demo-play-icon{display:flex}.phasor-demo-play-icon.pause,.phasor-demo[data-playing=true] .phasor-demo-play-icon.play{display:none}.phasor-demo[data-playing=true] .phasor-demo-play-icon.pause{display:flex}@media (hover:hover){.phasor-demo-reset:hover{background:var(--color-bg)}.phasor-demo-play:hover{background:var(--color-accent-soft)}}.phasor-demo-controls:disabled .phasor-demo-params,.phasor-demo-controls:disabled .phasor-demo-actions{opacity:.5}.phasor-demo-controls:disabled *{cursor:not-allowed}.phasor-demo-note{color:var(--color-text-muted);margin:0;font-size:13px;line-height:1.45}.phasor-demo[data-state=ready] .phasor-demo-note{display:none}.phasor-demo[data-state=error] .phasor-demo-note{color:var(--color-error)}.phasor-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}.phasor-demo-caption b{color:var(--color-text);font-weight:600}@container (width<=719px){.phasor-demo-plane-svg{width:186px;height:186px}.phasor-demo-params{grid-template-columns:minmax(0,1fr)}}@container (width<=559px){.phasor-demo-head,.phasor-demo-body,.phasor-demo-controls,.phasor-demo-caption{padding-inline:16px}.phasor-demo-plot{grid-template-columns:minmax(0,1fr);gap:0}.phasor-demo-side{padding:14px 0 4px;position:static}.phasor-demo-charts{padding:8px 14px 4px 0}.phasor-demo-chart-head,.phasor-demo-chart{padding-left:30px}.phasor-demo-svg .minor{display:none}.phasor-demo-reset{margin-left:0}}#unit-circle .figure-frame{align-self:center;width:100%;max-width:340px;container-type:inline-size}#unit-circle .figure-frame>svg{font-size:clamp(16px,30px - 4cqw,22px)}