.circular-workspace { grid-template-columns: 286px minmax(0, 1fr); }
.circular-stage { padding-bottom: 24px; }
.direction-control { min-width: 0; margin: 0 0 27px; padding: 0; border: 0; }
.direction-control legend { margin-bottom: 11px; font-size: 13px; }
.segmented { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); }
.segmented button { min-width: 0; min-height: 40px; padding: 8px 5px; border: 0; }
.segmented button + button { border-left: 1px solid var(--line); }
.segmented button[aria-pressed="true"] { color: #08211f; background: var(--cyan); }
.circular-status { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 11px 13px; border: 1px solid var(--line); color: #c9d8d5; font-size: 12px; line-height: 1.5; }
.circular-status strong { color: var(--orange); font: 500 12px "DM Mono", monospace; }
.cycle-progress { height: 3px; margin-bottom: 14px; background: #294247; }
.cycle-progress span { display: block; width: 0; height: 100%; background: var(--cyan); }
.circular-canvas { min-width: 0; overflow: hidden; border: 1px solid var(--line-soft); background: var(--panel-deep); }
.circular-scene { display: block; width: 100%; height: auto; }
.orbit { fill: rgba(101,230,209,.025); stroke: var(--cyan); stroke-width: 2.5; }
.swept-arc { fill: none; stroke: var(--yellow); stroke-width: 5; opacity: .8; }
.radius-line { stroke: #66817e; stroke-width: 1.4; stroke-dasharray: 5 5; }
.center-point { fill: var(--cyan); }
.circular-body { fill: var(--orange); stroke: #fff1d8; stroke-width: 2; filter: drop-shadow(0 0 8px rgba(255,173,104,.65)); }
.circular-vector { stroke-width: 2.4; }
.velocity-vector { stroke: var(--orange); }
.acceleration-vector { stroke: var(--blue); }
.force-vector { stroke: var(--red); stroke-dasharray: 5 4; }
.circular-label { font: 500 11px "DM Mono", monospace; paint-order: stroke; stroke: var(--panel-deep); stroke-width: 5px; }
.velocity-label { fill: var(--orange); }
.acceleration-label { fill: var(--blue); }
.force-label-circular { fill: var(--red); }
.radius-label { fill: #a9bfbc; }
.orbit-grid { stroke: #234047; stroke-width: 1; stroke-dasharray: 2 7; }
.component-panel rect { fill: #0f2024; stroke: #294247; }
.panel-title { fill: #91aaa8; font: 10px "DM Mono", monospace; }
.panel-value { fill: #dcebe8; font: 12px "DM Mono", monospace; }
.panel-cyan { fill: var(--cyan); }
.panel-orange { fill: var(--orange); }
.panel-rule { stroke: #294247; stroke-width: 1; }
.circular-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.circular-metrics .metric:nth-child(n+4) { margin-top: 13px; padding-top: 17px; border-top: 1px solid var(--line); }
.circular-metrics .metric:nth-child(4) { padding-left: 0; border-left: 0; }
.circular-metrics .metric-value { font-size: 17px; line-height: 1.35; }
.circular-metrics .compact { font-size: 14px; }
.related-links { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px !important; }

@media (max-width: 900px) { .circular-workspace { grid-template-columns: 260px minmax(0, 1fr); } }
@media (max-width: 820px) { .circular-workspace { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .component-panel { display: none; }
  .circular-status span { display: block; flex-basis: 100%; }
  .circular-metrics { grid-template-columns: 1fr; }
  .circular-metrics .metric, .circular-metrics .metric:nth-child(n) { margin-top: 0; padding: 13px 0; border-right: 0; border-bottom: 1px solid var(--line); border-left: 0; }
  .circular-metrics .metric:last-child { border-bottom: 0; }
  .circular-label { font-size: 14px; stroke-width: 6px; }
  .panel-value { font-size: 14px; }
}