.newton-workspace { grid-template-columns: 286px minmax(0, 1fr); }
.newton-stage { padding-bottom: 24px; }
.newton-status { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 16px; padding: 11px 13px; border: 1px solid var(--line); color: #c9d8d5; font-size: 12px; line-height: 1.5; }
.newton-status strong { color: var(--orange); font: 500 12px "DM Mono", monospace; }
.newton-views { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.newton-view { min-width: 0; border: 1px solid var(--line-soft); background: var(--panel-deep); }
.scene-view { grid-column: 1 / -1; }
.newton-view-head { display: flex; justify-content: space-between; gap: 12px; padding: 11px 13px 8px; border-bottom: 1px solid rgba(41,66,71,.7); }
.newton-view-head h3 { margin: 0; font-size: 13px; }
.newton-view-head span { color: var(--muted); font: 10px "DM Mono", monospace; }
.newton-svg, .graph-svg { display: block; width: 100%; height: auto; }
.newton-track { stroke: #587471; stroke-width: 2; }
.newton-tick { stroke: #416168; stroke-width: 1; }
.newton-block { fill: #173238; stroke: var(--orange); stroke-width: 2; filter: drop-shadow(0 5px 8px rgba(0,0,0,.35)); }
.block-label { fill: #eaf5f2; font: 500 13px "DM Mono", monospace; }
.force-arrow { stroke-width: 2.3; }
.force-one { stroke: var(--orange); }
.force-two { stroke: var(--cyan); }
.friction-arrow { stroke: var(--red); }
.net-arrow { stroke: var(--blue); stroke-dasharray: 5 4; }
.newton-label { font: 500 11px "DM Mono", monospace; paint-order: stroke; stroke: var(--panel-deep); stroke-width: 5px; }
.force-one-text { fill: var(--orange); }
.force-two-text { fill: var(--cyan); }
.friction-text { fill: var(--red); }
.net-text { fill: var(--blue); }
.graph-grid-local { stroke: #234047; stroke-width: 1; stroke-dasharray: 2 6; }
.graph-zero { stroke: #66817e; stroke-width: 1.25; }
.newton-a-path { fill: none; stroke: var(--blue); stroke-width: 2.5; }
.newton-v-path { fill: none; stroke: var(--cyan); stroke-width: 2.5; }
.newton-a-point { fill: var(--blue); stroke: #dce9ff; stroke-width: 1.2; }
.newton-v-point { fill: var(--cyan); stroke: #d8fff6; stroke-width: 1.2; }
.newton-event { fill: var(--panel-deep); stroke: var(--yellow); stroke-width: 2; }
.newton-event-label { fill: var(--yellow); font: 10px "DM Mono", monospace; paint-order: stroke; stroke: var(--panel-deep); stroke-width: 4px; }
.newton-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.newton-metrics .metric:nth-child(n+4) { margin-top: 13px; padding-top: 17px; border-top: 1px solid var(--line); }
.newton-metrics .metric:nth-child(4) { padding-left: 0; border-left: 0; }
.newton-metrics .metric-value { font-size: 17px; line-height: 1.35; }
.newton-metrics .compact { font-size: 14px; }
.related-links { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px !important; }
button:disabled { opacity: .45; cursor: not-allowed; transform: none; }

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