.wp-lab .ga-switch { flex-wrap: wrap; }
.wp-lab .ga-switch button { min-width: 0; }
.wp-toolbar { gap: 12px; }
.wp-toolbar .ga-source { flex: 0 0 auto; }
.wp-stage { grid-template-columns: minmax(0, 1.45fr) minmax(290px, 0.9fr); }
.wp-canvas-wrap { position: relative; }
.wp-canvas-wrap svg { height: 435px; }
.wp-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 8px 14px;
  border-top: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  font-size: 0.72rem;
}
.wp-legend span { display: inline-flex; align-items: center; gap: 6px; }
.wp-key { display: inline-block; width: 16px; height: 4px; border-radius: 2px; background: var(--line); }
.wp-key--current { background: #d18418; }
.wp-key--route { background: #2e7c50; }
.wp-key--settled { background: var(--accent); }
.wp-edge { fill: none; stroke: color-mix(in srgb, var(--muted) 65%, var(--line)); stroke-width: 2.5; transition: stroke 150ms, stroke-width 150ms; }
.wp-edge.is-route { stroke: #2e7c50; stroke-width: 4; }
.wp-edge.is-current { stroke: #d18418; stroke-width: 5; }
.wp-edge.is-cycle { stroke: #b34545; stroke-width: 5; }
.wp-arrow { fill: color-mix(in srgb, var(--muted) 65%, var(--line)); }
.wp-arrow--route { fill: #2e7c50; }
.wp-arrow--current { fill: #d18418; }
.wp-arrow--cycle { fill: #b34545; }
.wp-weight-bg { fill: var(--panel); stroke: var(--line); }
.wp-weight { fill: var(--text); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; font-weight: 700; text-anchor: middle; }
.wp-node circle { fill: var(--panel); stroke: var(--line); stroke-width: 2.5; transition: fill 150ms, stroke 150ms; }
.wp-node.is-settled circle { fill: var(--accent-soft); stroke: var(--accent); }
.wp-node.is-source circle { stroke: #2e7c50; stroke-width: 4; }
.wp-node.is-target circle { stroke: #9370b1; stroke-width: 4; }
.wp-node.is-current circle { fill: color-mix(in srgb, #d18418 18%, var(--panel)); stroke: #d18418; stroke-width: 5; }
.wp-node.is-intermediate circle { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 5; }
.wp-node.is-affected circle { fill: color-mix(in srgb, #b34545 20%, var(--panel)); stroke: #b34545; }
.wp-node-name { fill: var(--text); font: 700 20px Georgia, 'Times New Roman', serif; text-anchor: middle; dominant-baseline: central; }
.wp-node-value { fill: var(--muted); font: 700 12px ui-monospace, SFMono-Regular, Consolas, monospace; text-anchor: middle; }
.wp-inspector { max-height: 470px; }
body.page-math .wp-inspector section { min-width: 0; margin: 0; scroll-margin-top: 0; }
.wp-inspector .wp-matrix-panel { grid-column: 1 / -1; }
.wp-matrix-scroll { overflow-x: auto; }
.wp-matrix { width: 100%; min-width: 285px !important; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.wp-matrix th, .wp-matrix td { position: static !important; padding: 7px 8px !important; border: 1px solid var(--line); text-align: center; font-size: 0.8rem; }
.wp-matrix th { background: var(--panel-alt) !important; }
.wp-matrix td.is-current { background: color-mix(in srgb, #d18418 18%, var(--panel)); font-weight: 750; }
.wp-matrix td.is-changed { background: color-mix(in srgb, #2e7c50 22%, var(--panel)); font-weight: 750; }
.wp-matrix td.is-selected { outline: 2px solid var(--accent); outline-offset: -2px; }
.wp-matrix td.is-negative { color: #b34545; font-weight: 750; }
.wp-values { overflow-x: auto; }
.wp-values-table { width: 100%; min-width: 245px !important; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.wp-values-table th, .wp-values-table td { position: static !important; padding: 5px 7px !important; border-bottom: 1px solid var(--line); text-align: left; font-size: 0.78rem; }
.wp-values-table th { background: transparent !important; }
.wp-values-table tr.is-current { background: color-mix(in srgb, #d18418 12%, transparent); }
.wp-values-table tr.is-affected { color: #b34545; }
.wp-route-panel p { overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.85rem; }
.wp-lab .ga-boxes span { font-size: 0.68rem; }
.wp-lab .ga-metrics dd { overflow-wrap: anywhere; font-size: 0.92rem; }
@media (max-width: 900px) { .wp-stage { grid-template-columns: 1fr; } .wp-inspector { max-height: none; } }
@media (max-width: 650px) { .wp-toolbar .ga-switch { width: 100%; } .wp-toolbar .ga-switch button { flex: 1; } .wp-toolbar .ga-source { flex: 1 1 95px; } }
@media (prefers-reduced-motion: reduce) { .wp-edge, .wp-node circle { transition: none; } }
