.chaotic-analysis-labels {
  top: clamp(104px, 21%, 176px);
  bottom: auto;
}

.chaotic-signal-flow {
  position: absolute;
  z-index: 2;
  top: 69%;
  right: clamp(18px, 3vw, 40px);
  left: clamp(20px, 4vw, 58px);
  display: grid;
  min-height: 64px;
  pointer-events: none;
  grid-template-columns:
    minmax(0, 1fr) auto
    minmax(0, 1fr) auto
    minmax(0, 1fr) auto
    minmax(0, 1fr);
  align-items: stretch;
  gap: 7px;
}

.chaotic-flow-node {
  display: grid;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid var(--line-strong);
  align-content: center;
  background: color-mix(in oklab, var(--bg-deep) 88%, transparent);
  gap: 4px;
}

.chaotic-flow-node b {
  overflow: hidden;
  color: var(--accent);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.chaotic-flow-node small {
  overflow: hidden;
  color: var(--muted);
  font-size: 7px;
  line-height: 1.3;
  text-overflow: ellipsis;
}

.chaotic-flow-arrow {
  position: relative;
  width: 16px;
  color: var(--accent);
  opacity: 0.72;
}

.chaotic-flow-arrow::before {
  position: absolute;
  top: 50%;
  left: 1px;
  width: 12px;
  border-top: 1px solid currentColor;
  content: "";
}

.chaotic-flow-arrow::after {
  position: absolute;
  top: calc(50% - 3px);
  right: 1px;
  width: 5px;
  height: 5px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  content: "";
  transform: rotate(45deg);
}

.chaotic-turn-ledger code {
  line-height: 1.35;
  overflow-wrap: anywhere;
  white-space: normal;
}

.chaotic-path-graph {
  position: absolute;
  z-index: 4;
  right: clamp(12px, 2vw, 28px);
  bottom: clamp(16px, 3%, 28px);
  left: clamp(12px, 2vw, 28px);
  height: clamp(150px, 29%, 220px);
  overflow: hidden;
  border-top: 1px solid color-mix(in oklab, var(--chaotic-path-signal) 24%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--chaotic-path-output) 12%, transparent);
  background: linear-gradient(
    90deg,
    color-mix(in oklab, var(--bg-deep) 94%, transparent),
    color-mix(in oklab, var(--bg-deep) 78%, transparent),
    color-mix(in oklab, var(--bg-deep) 94%, transparent)
  );
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

.chaotic-path-graph::before {
  position: absolute;
  z-index: 1;
  top: 7px;
  left: 10px;
  color: var(--chaotic-path-signal);
  content: attr(data-path-label);
  font-size: 7px;
  letter-spacing: 0.12em;
  opacity: 0.78;
}

.chaotic-path-graph svg {
  display: block;
  width: 100%;
  height: 100%;
}

.chaotic-path-wire,
.chaotic-path-control-wire,
.chaotic-path-tap,
.chaotic-path-bus,
.chaotic-path-audio-wire {
  fill: none;
  stroke: var(--chaotic-path-signal);
  stroke-width: 1.6;
}

.chaotic-path-control-wire {
  stroke: var(--chaotic-path-control);
  stroke-dasharray: 3 3;
  opacity: 0.72;
}

.chaotic-path-block rect,
.chaotic-path-operator rect,
.chaotic-path-output rect {
  fill: color-mix(in oklab, var(--bg-deep) 92%, transparent);
  stroke-width: 1.4;
}

.chaotic-path-block rect {
  stroke: var(--chaotic-path-signal);
}

.chaotic-path-block.is-control rect {
  stroke: var(--chaotic-path-control);
}

.chaotic-path-operator rect {
  stroke: var(--chaotic-path-operator);
}

.chaotic-path-operator.is-seed rect {
  stroke: var(--chaotic-path-control);
}

.chaotic-path-operator.is-audible rect,
.chaotic-path-output rect {
  fill: color-mix(in oklab, var(--chaotic-path-output) 8%, var(--bg-deep));
  stroke: var(--chaotic-path-output);
  stroke-width: 1.8;
}

.chaotic-path-title,
.chaotic-path-value,
.chaotic-path-bus-label,
.chaotic-path-junction text {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-anchor: middle;
}

.chaotic-path-title {
  fill: var(--ink);
  font-size: 9px;
  font-weight: 600;
}

.chaotic-path-value {
  fill: var(--muted);
  font-size: 8px;
}

.chaotic-path-junction circle {
  fill: var(--bg-deep);
  stroke: var(--chaotic-path-signal);
  stroke-width: 2;
}

.chaotic-path-junction text {
  fill: var(--chaotic-path-signal);
  font-size: 10px;
  font-weight: 700;
}

.chaotic-path-tap {
  stroke: var(--faint);
  stroke-dasharray: 3 4;
  opacity: 0.2;
}

.chaotic-path-tap.is-open {
  stroke: var(--chaotic-path-output);
  stroke-dasharray: none;
  stroke-width: 1.8;
  opacity: 1;
}

.chaotic-path-tap-switch {
  fill: var(--bg-deep);
  stroke: var(--faint);
  opacity: 0.35;
}

.chaotic-path-tap-switch.is-open {
  fill: var(--chaotic-path-output);
  stroke: var(--chaotic-path-output);
  opacity: 1;
}

.chaotic-path-bus,
.chaotic-path-audio-wire {
  stroke: var(--chaotic-path-output);
  stroke-width: 1.25;
  opacity: 0.72;
}

.chaotic-path-bus-label {
  fill: var(--faint);
  font-size: 8px;
  text-anchor: start;
}

.chaotic-path-arrow path {
  fill: var(--chaotic-path-output);
}

/* Chaotic FM keeps the detailed graph at a readable intrinsic scale. Higher
   recursion depths scroll horizontally instead of shrinking their labels. */
.chaotic-fm-page .chaotic-path-graph {
  height: clamp(190px, 31%, 240px);
  overflow-x: auto;
  overflow-y: hidden;
  border-color: color-mix(in oklab, var(--chaotic-path-signal) 38%, transparent);
  scrollbar-color: color-mix(in oklab, var(--chaotic-path-signal) 62%, transparent)
    color-mix(in oklab, var(--bg-deep) 88%, transparent);
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
  pointer-events: auto;
  touch-action: pan-x;
}

.chaotic-fm-page .chaotic-path-graph:focus-visible {
  outline: 1px solid var(--chaotic-path-control);
  outline-offset: 2px;
}

.chaotic-fm-page .chaotic-path-graph::before {
  top: 8px;
  left: 14px;
  max-width: calc(100% - 28px);
  color: color-mix(in oklab, var(--chaotic-path-signal) 84%, var(--ink));
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: 0.1em;
  line-height: 1.25;
  opacity: 1;
}

.chaotic-fm-page .chaotic-path-detail {
  display: block;
  width: max(100%, var(--chaotic-graph-width));
  height: 100%;
}

.chaotic-path-compact {
  display: none;
}

.chaotic-fm-page .chaotic-path-block rect,
.chaotic-fm-page .chaotic-path-operator rect,
.chaotic-fm-page .chaotic-path-output rect {
  fill: color-mix(in oklab, var(--bg-deep) 84%, #101720);
  stroke-width: 1.8;
}

.chaotic-fm-page .chaotic-path-title,
.chaotic-fm-page .chaotic-path-value,
.chaotic-fm-page .chaotic-path-bus-label,
.chaotic-fm-page .chaotic-path-entry-label,
.chaotic-fm-page .chaotic-path-recursion-label,
.chaotic-fm-page .chaotic-path-compact-detail,
.chaotic-fm-page .chaotic-path-compact-heading {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  paint-order: stroke fill;
  stroke: color-mix(in oklab, var(--bg-deep) 92%, transparent);
  stroke-linejoin: round;
  stroke-width: 2px;
  text-anchor: middle;
}

.chaotic-fm-page .chaotic-path-title {
  fill: var(--ink);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.015em;
}

.chaotic-fm-page .chaotic-path-value {
  fill: color-mix(in oklab, var(--ink) 72%, var(--muted));
  font-size: 9.8px;
  font-weight: 520;
}

.chaotic-fm-page .chaotic-path-entry-wire,
.chaotic-fm-page .chaotic-path-recursive-wire,
.chaotic-fm-page .chaotic-path-compact-link {
  fill: none;
  stroke: var(--chaotic-path-signal);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
  filter: drop-shadow(0 0 3px color-mix(in oklab, var(--chaotic-path-signal) 42%, transparent));
  opacity: 1;
}

.chaotic-fm-page .chaotic-path-entry-wire {
  stroke: color-mix(in oklab, var(--chaotic-path-signal) 78%, var(--chaotic-path-control));
  stroke-width: 2.15;
}

.chaotic-fm-page .chaotic-path-control-wire {
  stroke-width: 2;
  stroke-dasharray: 5 3;
  opacity: 0.92;
}

.chaotic-fm-page .chaotic-path-signal-arrow path {
  fill: var(--chaotic-path-signal);
}

.chaotic-fm-page .chaotic-path-entry-label,
.chaotic-fm-page .chaotic-path-recursion-label {
  fill: color-mix(in oklab, var(--chaotic-path-signal) 82%, var(--ink));
  font-size: 9.5px;
  font-weight: 720;
  letter-spacing: 0.055em;
}

.chaotic-fm-page .chaotic-path-entry-label {
  fill: color-mix(in oklab, var(--chaotic-path-control) 72%, var(--ink));
}

.chaotic-fm-page .chaotic-path-input-port {
  fill: var(--bg-deep);
  stroke: var(--chaotic-path-signal);
  stroke-width: 2;
}

.chaotic-fm-page .chaotic-path-tap {
  stroke: color-mix(in oklab, var(--chaotic-path-output) 58%, var(--muted));
  stroke-width: 1.7;
  stroke-dasharray: 5 4;
  opacity: 0.55;
}

.chaotic-fm-page .chaotic-path-tap.is-open {
  stroke-width: 2.2;
  opacity: 1;
}

.chaotic-fm-page .chaotic-path-tap-switch {
  stroke: color-mix(in oklab, var(--chaotic-path-output) 58%, var(--muted));
  stroke-width: 1.5;
  opacity: 0.72;
}

.chaotic-fm-page .chaotic-path-bus,
.chaotic-fm-page .chaotic-path-audio-wire {
  stroke-width: 1.8;
  opacity: 0.9;
}

.chaotic-fm-page .chaotic-path-bus-label {
  fill: var(--muted);
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-anchor: start;
}

.chaotic-fm-page .chaotic-path-compact-heading,
.chaotic-fm-page .chaotic-path-compact-detail {
  fill: color-mix(in oklab, var(--ink) 76%, var(--muted));
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.035em;
  text-anchor: start;
}

@media (max-width: 650px) {
  .chaotic-analysis-labels {
    top: 88px;
  }

  .chaotic-signal-flow {
    top: 68%;
    right: 13px;
    left: 13px;
    min-height: 70px;
    gap: 3px;
  }

  .chaotic-flow-node {
    padding: 6px 5px;
  }

  .chaotic-flow-node small {
    font-size: 6px;
  }

  .chaotic-flow-arrow {
    width: 10px;
  }

  .chaotic-path-graph {
    right: 5px;
    bottom: 8px;
    left: 5px;
    height: 132px;
  }

  .chaotic-path-graph::before {
    top: 4px;
    font-size: 6px;
  }

  .chaotic-fm-page .chaotic-path-graph {
    height: 160px;
    overflow: hidden;
    pointer-events: none;
    touch-action: auto;
  }

  .chaotic-fm-page .chaotic-path-graph::before,
  .chaotic-fm-page .chaotic-path-detail {
    display: none;
  }

  .chaotic-fm-page .chaotic-path-compact {
    display: block;
    width: 100%;
    height: 100%;
  }

  .chaotic-fm-page .chaotic-path-title {
    font-size: 11px;
  }

  .chaotic-fm-page .chaotic-path-value {
    font-size: 9.5px;
  }

  .chaotic-fm-page .chaotic-path-recursion-label {
    font-size: 9px;
  }
}

/* Code-audited algorithm and output references shared by Chaos Synths. */
.chaos-dsp-reference-section .group-body {
  gap: 0;
}

.chaos-dsp-reference-meta {
  display: grid;
  padding: 10px 0 12px;
  grid-template-columns: minmax(92px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.chaos-dsp-reference-meta span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.chaos-dsp-engine {
  padding: 4px 6px;
  border: 1px solid color-mix(in oklab, var(--accent) 52%, var(--line-strong));
  border-radius: 4px;
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
  text-align: center;
}

.chaos-dsp-topology {
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0;
  line-height: 1.35;
}

.chaos-dsp-full-page-link {
  color: var(--accent);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
  text-align: right;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.chaos-dsp-figure {
  margin: 0;
  padding: 14px 0 16px;
  border-top: 1px solid var(--line);
}

.chaos-dsp-figure figcaption {
  display: grid;
  margin: 0 0 13px;
  gap: 4px;
}

.chaos-dsp-figure figcaption b {
  color: var(--ink);
  font-size: 11px;
  font-weight: 720;
  letter-spacing: 0;
}

.chaos-dsp-figure figcaption code {
  color: color-mix(in oklab, var(--accent) 72%, var(--muted));
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8px;
  letter-spacing: 0;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: normal;
}

.chaos-dsp-drawing,
.chaos-dsp-lane,
.chaos-dsp-branch-section {
  min-width: 0;
}

.chaos-dsp-lane-title {
  margin: 0 0 8px;
  color: var(--faint);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: uppercase;
}

.chaos-dsp-sequence {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 17px;
}

.chaos-dsp-step {
  --chaos-dsp-step-color: color-mix(in oklab, var(--accent) 70%, var(--muted));
  position: relative;
  display: grid;
  min-width: 0;
  padding: 7px 8px 7px 10px;
  border: 1px solid color-mix(in oklab, var(--chaos-dsp-step-color) 44%, var(--line));
  border-left: 3px solid var(--chaos-dsp-step-color);
  border-radius: 4px;
  background: color-mix(in oklab, var(--bg-deep) 90%, transparent);
  gap: 3px;
}

.chaos-dsp-step.is-control {
  --chaos-dsp-step-color: #7fb9ff;
}

.chaos-dsp-step.is-oscillator {
  --chaos-dsp-step-color: #7dd8bf;
}

.chaos-dsp-step.is-nonlinear {
  --chaos-dsp-step-color: #ff9f73;
}

.chaos-dsp-step.is-mix {
  --chaos-dsp-step-color: #c4a7ff;
}

.chaos-dsp-step.is-guard {
  --chaos-dsp-step-color: #e5c963;
}

.chaos-dsp-step.is-output {
  --chaos-dsp-step-color: #f2efe8;
}

.chaos-dsp-step:not(:last-child)::after {
  position: absolute;
  bottom: -14px;
  left: calc(50% - 1px);
  width: 1px;
  height: 12px;
  background: color-mix(in oklab, var(--chaos-dsp-step-color) 66%, transparent);
  content: "";
}

.chaos-dsp-step:not(:last-child)::before {
  position: absolute;
  z-index: 1;
  bottom: -16px;
  left: calc(50% - 4px);
  width: 6px;
  height: 6px;
  border-right: 1px solid var(--chaos-dsp-step-color);
  border-bottom: 1px solid var(--chaos-dsp-step-color);
  content: "";
  transform: rotate(45deg);
}

.chaos-dsp-step-title {
  min-width: 0;
  color: color-mix(in oklab, var(--chaos-dsp-step-color) 80%, var(--ink));
  font-size: 9px;
  font-weight: 720;
  letter-spacing: 0;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.chaos-dsp-step-detail {
  min-width: 0;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 7.5px;
  letter-spacing: 0;
  line-height: 1.4;
  overflow-wrap: anywhere;
  white-space: normal;
}

.chaos-dsp-sequence.is-compact {
  gap: 15px;
}

.chaos-dsp-sequence.is-compact .chaos-dsp-step {
  padding-top: 6px;
  padding-bottom: 6px;
}

.chaos-dsp-section-connector {
  position: relative;
  display: block;
  width: 1px;
  height: 20px;
  margin: 0 auto;
  background: color-mix(in oklab, var(--accent) 58%, transparent);
}

.chaos-dsp-section-connector::after {
  position: absolute;
  right: -3px;
  bottom: 1px;
  width: 6px;
  height: 6px;
  border-right: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  content: "";
  transform: rotate(45deg);
}

.chaos-dsp-branches {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 12px;
}

.chaos-dsp-branches .chaos-dsp-lane {
  padding: 8px;
  border: 1px solid color-mix(in oklab, var(--line-strong) 72%, transparent);
  border-radius: 4px;
  background: color-mix(in oklab, var(--bg-deep) 72%, transparent);
}

.chaos-dsp-archive-link {
  display: block;
  padding: 11px 0 1px;
  border-top: 1px solid var(--line);
  color: var(--accent);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

@media (max-width: 390px) {
  .chaos-dsp-reference-meta {
    grid-template-columns: 1fr;
  }

  .chaos-dsp-engine {
    justify-self: start;
  }

  .chaos-dsp-full-page-link {
    justify-self: start;
    text-align: left;
  }

  .chaos-dsp-branches {
    grid-template-columns: 1fr;
  }
}

/* Mirrored performance and synthesis controls beneath the graphic pane. */
.chaotic-viewport-controls {
  position: relative;
  z-index: 5;
  display: block;
  min-width: 0;
  padding: 9px 14px 12px;
  border-top: 1px solid color-mix(in oklab, var(--accent) 42%, var(--line-strong));
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--accent) 7%, transparent), transparent 52%),
    color-mix(in oklab, var(--bg-deep) 96%, transparent);
  box-shadow: 0 -14px 32px rgba(0, 0, 0, 0.28);
  flex: 0 0 auto;
}

.chaotic-viewport-controls.is-flow-overlay {
  position: absolute;
  top: 40%;
  right: 14px;
  left: 14px;
}

.chaotic-viewport-control-groups {
  display: flex;
  min-width: 0;
  align-items: stretch;
  gap: 10px;
}

.chaotic-viewport-control-group {
  --viewport-accent: var(--accent);
  --viewport-accent-soft: var(--accent-soft);
  --viewport-accent-glow: var(--accent-glow);
  min-width: 0;
  margin: 0;
  padding: 0 10px 2px;
  border: 0;
  border-left: 1px solid color-mix(in oklab, var(--viewport-accent) 32%, var(--line));
  flex: var(--viewport-control-weight, 1) 1 0;
}

.chaotic-viewport-control-group:first-child {
  border-left-color: transparent;
}

.chaotic-viewport-control-group legend {
  width: 100%;
  margin: 0 0 7px;
  padding: 0;
  color: color-mix(in oklab, var(--viewport-accent) 82%, var(--ink));
  font-size: 8px;
  font-weight: 760;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.chaotic-viewport-control {
  min-width: 0;
  color: var(--muted);
  font-size: 8px;
  letter-spacing: 0;
}

.chaotic-viewport-slider-bank {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 14px;
}

.chaotic-viewport-slider {
  display: grid;
  gap: 4px;
}

.chaotic-viewport-slider-copy {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.chaotic-viewport-control b,
.chaotic-viewport-control output {
  display: block;
  min-width: 0;
  overflow: hidden;
  letter-spacing: 0;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chaotic-viewport-control b {
  color: color-mix(in oklab, var(--viewport-accent) 72%, var(--ink));
  font-size: 8px;
  font-weight: 690;
}

.chaotic-viewport-control output {
  color: color-mix(in oklab, var(--viewport-accent) 54%, var(--muted));
  font-size: 7px;
}

.chaotic-viewport-slider input[type="range"] {
  width: 100%;
  height: 12px;
  margin: 0;
  padding: 0;
  accent-color: var(--viewport-accent);
  cursor: ew-resize;
}

.chaotic-viewport-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 0;
  background: linear-gradient(
    90deg,
    var(--viewport-accent) 0 var(--viewport-progress),
    color-mix(in oklab, var(--viewport-accent) 18%, var(--line)) var(--viewport-progress) 100%
  );
}

.chaotic-viewport-slider input[type="range"]::-webkit-slider-thumb {
  width: 11px;
  height: 11px;
  margin-top: -4px;
  border: 1px solid color-mix(in oklab, white 38%, var(--viewport-accent));
  border-radius: 50%;
  appearance: none;
  background: var(--viewport-accent);
  box-shadow: 0 0 8px var(--viewport-accent-glow);
}

.chaotic-viewport-slider input[type="range"]::-moz-range-track {
  height: 3px;
  border: 0;
  border-radius: 0;
  background: color-mix(in oklab, var(--viewport-accent) 18%, var(--line));
}

.chaotic-viewport-slider input[type="range"]::-moz-range-progress {
  height: 3px;
  background: var(--viewport-accent);
}

.chaotic-viewport-slider input[type="range"]::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border: 1px solid color-mix(in oklab, white 38%, var(--viewport-accent));
  border-radius: 50%;
  background: var(--viewport-accent);
  box-shadow: 0 0 8px var(--viewport-accent-glow);
}

.chaotic-viewport-knob-bank {
  display: grid;
  min-width: 0;
  align-items: start;
  justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(50px, 62px));
  gap: 7px 8px;
}

.chaotic-viewport-knob {
  display: grid;
  width: 100%;
  min-width: 0;
  justify-items: center;
  gap: 3px;
}

.chaotic-viewport-knob-dial-wrap {
  position: relative;
  display: block;
  width: 42px;
  height: 42px;
}

.chaotic-viewport-knob-dial {
  --viewport-knob-angle: -135deg;
  position: absolute;
  inset: 0;
  border: 1px solid color-mix(in oklab, var(--viewport-accent) 64%, var(--line-strong));
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--panel-high) 0 43%, transparent 44%),
    conic-gradient(
      from -135deg,
      var(--viewport-accent) 0 var(--viewport-arc-progress),
      color-mix(in oklab, var(--viewport-accent) 12%, var(--line)) var(--viewport-arc-progress) 75%,
      transparent 75% 100%
    ),
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.17), transparent 38%),
    var(--bg-deep);
  box-shadow:
    inset 0 -5px 10px rgba(0, 0, 0, 0.42),
    0 0 10px var(--viewport-accent-glow);
}

.chaotic-viewport-knob-dial::after {
  position: absolute;
  top: 6px;
  left: calc(50% - 1px);
  width: 2px;
  height: 13px;
  border-radius: 2px;
  background: color-mix(in oklab, white 34%, var(--viewport-accent));
  box-shadow: 0 0 6px var(--viewport-accent-soft);
  content: "";
  transform: rotate(var(--viewport-knob-angle));
  transform-origin: 1px 15px;
}

.chaotic-viewport-knob-dial-wrap input[type="range"] {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: ew-resize;
  opacity: 0;
}

.chaotic-viewport-knob-dial-wrap:focus-within .chaotic-viewport-knob-dial,
.chaotic-viewport-knob-dial-wrap:hover .chaotic-viewport-knob-dial {
  border-color: var(--viewport-accent);
  box-shadow:
    inset 0 -5px 10px rgba(0, 0, 0, 0.42),
    0 0 16px var(--viewport-accent-soft);
}

.chaotic-viewport-knob > b,
.chaotic-viewport-knob > output {
  width: 100%;
  text-align: center;
}

.chaotic-viewport-knob > b {
  display: -webkit-box;
  min-height: 18px;
  overflow: hidden;
  line-height: 9px;
  overflow-wrap: anywhere;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media (min-width: 961px) {
  .chaotic-fm-page .chaotic-path-graph,
  .chaotic-pm-page .chaotic-path-graph,
  .recursive-fm-page .recursive-fm-signal-graph,
  .recursive-pm-page .chaotic-path-graph,
  .cascading-fm-page .cascading-fm-signal-graph,
  .cascading-pm-page .cascading-pm-signal-graph {
    top: var(--chaotic-flow-top, calc(40% + 128px));
    bottom: auto;
  }
}

@media (max-width: 960px) {
  .chaotic-viewport-controls {
    display: none;
  }
}