.math-lab { --lab-amber: #875219; --lab-amber-bg: #f4ead8; --lab-teal: #286b68; }
.math-lab *, .math-lab *::before, .math-lab *::after { box-sizing: border-box; }
.lab-intro { display: grid; grid-template-columns: 1.15fr 1fr; column-gap: 2rem; padding: .8rem 0 1.7rem; }
.lab-intro > .lab-kicker { grid-column: 1 / -1; }
.lab-kicker { margin: 0 0 .6rem; font-size: .69rem; font-weight: 650; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.math-lab .lab-intro h1 { grid-column: 1; grid-row: 2 / span 2; margin: 0; font-size: clamp(2.7rem, 4.5vw, 3.6rem); font-weight: 400; letter-spacing: -.04em; }
.lab-intro h1 em { color: var(--green); font-weight: 400; }
.lab-intro > p:not(.lab-kicker):not(.side-launch) { grid-column: 2; align-self: end; max-width: 55rem; font-size: .96rem; line-height: 1.7; margin: .2rem 0; color: var(--muted); }
.lab-local { grid-column: 2; display: inline-block; margin-top: .4rem; font-size: .75rem; letter-spacing: .025em; color: var(--muted); }
.lab-upgrade { margin: 0 0 1.2rem; font-size: .85rem; line-height: 1.7; }
.lab-upgrade a { display: inline-flex; align-items: center; min-height: 44px; gap: .4rem; font-weight: 650; }
.lab-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); background: var(--surface); border-radius: .25rem; margin-bottom: 2rem; }
.lab-tabs a { display: flex; align-items: center; justify-content: center; gap: .8rem; padding: .9rem .7rem; min-height: 56px; font-size: .96rem; text-decoration: none; border-bottom: 3px solid transparent; }
.lab-tabs a + a { border-left: 1px solid var(--line); }
.lab-tabs a span { font: italic 1.35rem/1 var(--display); color: var(--muted); }
.lab-tabs a[aria-selected=true] { background: var(--sage-surface); border-bottom-color: var(--green); font-weight: 650; }
.lab-tabs a:hover { background: #eff3e9; }
.lab-session { margin: -1rem 0 1.8rem; }
.lab-session-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; }
.lab-session-actions .lab-control-note { margin: 0; }
.lab-session > .lab-caption { margin: .5rem 0 0; }
#lab-share-status[data-error=true] { color: var(--lab-amber); }
.lab-share-fallback { display: block; margin: .7rem 0 0; font-size: .8rem; }
.lab-share-fallback[hidden] { display: none; }
#lab-share-link { display: block; box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; margin-top: .3rem; padding: .5rem; border: 1px solid var(--control-edge); border-radius: .2rem; background: var(--surface); color: var(--ink); font: 400 1rem/1.5 system-ui,sans-serif; }
.lab-panel { scroll-margin-top: 1rem; margin-bottom: 2.5rem; }
.lab-panel[hidden] { display: none; }
.lab-panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.5rem; }
.lab-panel-heading h2 { font: 400 clamp(1.9rem, 3vw, 2.55rem)/1.15 var(--display); margin: 0 0 .6rem; }
.lab-panel-heading p:not(.lab-kicker) { max-width: 65ch; margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.7; }
.math-lab button { font-size: .8rem; padding: .6rem .85rem; margin: 0; }
.lab-panel-heading > button { flex-shrink: 0; background: transparent; border: 1px solid var(--control-edge); color: var(--green); }
.lab-workspace { display: grid; grid-template-columns: minmax(14rem, .85fr) minmax(0, 1.75fr); border: 1px solid var(--line); border-radius: .3rem; background: var(--surface); overflow: clip; }
.math-lab fieldset { min-width: 0; }
.lab-controls { border: 0; margin: 0; padding: 1.3rem; background: #f0f3e9; border-right: 1px solid var(--line); }
.lab-controls > legend { float: left; width: 100%; padding: 0; margin-bottom: .5rem; font-weight: 650; font-size: .9rem; }
.lab-controls > legend + * { clear: both; }
.lab-control-note { font-size: .76rem; line-height: 1.6; color: var(--muted); margin: .4rem 0 1rem; }
.lab-label { display: block; font-size: .8rem; font-weight: 650; margin: .6rem 0 .35rem; }
.math-lab select { width: 100%; min-width: 0; min-height: 44px; padding: .5rem; border: 1px solid var(--control-edge); border-radius: .2rem; background: var(--surface); color: var(--ink); font: inherit; font-size: .82rem; }
.lab-matrix-row { display: flex; align-items: center; gap: 1rem; margin: 1rem 0 1.1rem; }
.lab-matrix-row > p { font-size: .72rem; line-height: 1.7; color: var(--muted); margin: 1.5rem 0 0; }
.lab-matrix { display: grid; grid-template-columns: repeat(2, 3.4rem); gap: .4rem; padding-inline: .5rem; border-inline: 2px solid var(--green); }
.lab-matrix input { width: 100%; min-width: 0; min-height: 44px; padding: .3rem; text-align: center; font: 500 1rem/1.5 system-ui, sans-serif; color: var(--ink); background: var(--surface); border: 1px solid var(--control-edge); border-radius: .15rem; }
.lab-matrix input[aria-invalid=true] { border: 2px solid var(--lab-amber); }
.lab-error { font-size: .8rem; line-height: 1.6; color: var(--lab-amber); }
.lab-error[hidden] { display: none; }
.lab-slider { margin: .9rem 0; min-width: 0; }
.lab-slider label { display: flex; align-items: baseline; justify-content: space-between; gap: .7rem; font-size: .8rem; font-weight: 500; line-height: 1.5; }
.lab-slider output { font: 650 .93rem/1.5 system-ui, sans-serif; font-variant-numeric: tabular-nums; color: var(--green); }
.lab-slider input[type=range] { display: block; width: 100%; max-width: none; height: 32px; min-height: 32px; padding: 0; margin: .15rem 0 0; accent-color: var(--green); cursor: pointer; background: transparent; }
.lab-blocks { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; border: 0; margin: 1rem 0 .8rem; padding: 0; }
.lab-blocks legend, .lab-packets legend { padding: 0; margin-bottom: .55rem; font-size: .8rem; font-weight: 650; }
.lab-blocks label { display: flex; align-items: flex-start; gap: .35rem; border: 1px solid var(--line); background: var(--surface); border-radius: .2rem; padding: .5rem .35rem; margin: 0; min-height: 52px; cursor: pointer; }
.math-lab input[type=checkbox] { width: 18px; height: 18px; min-height: 18px; margin: .1rem 0 0; flex-shrink: 0; accent-color: var(--green); }
.lab-blocks label > span { font-size: .65rem; line-height: 1.5; }
.lab-blocks output { display: block; font-size: .85rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.math-lab .lab-secondary { background: var(--surface); border: 1px solid var(--control-edge); color: var(--green); width: 100%; }
.lab-visual { min-width: 0; padding: 1rem 1.2rem 1.2rem; align-self: center; }
.lab-diagram { width: 100%; margin: .4rem 0 .7rem; }
.lab-diagram svg { display: block; width: 100%; max-width: 100%; height: auto; overflow: visible; }
.lab-diagram svg text { fill: var(--ink); font-family: system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.lab-diagram .diagram-heading { font-size: 11px; font-weight: 600; letter-spacing: .7px; fill: var(--muted); }
.lab-diagram .diagram-number { font: 500 29px var(--display); }
.lab-diagram .diagram-coordinate { font: italic 19px var(--display); }
.packet-wire { fill: none; stroke: var(--green); stroke-width: 2.5; }
.packet-wire.omitted { stroke: var(--lab-amber); stroke-dasharray: 6 6; stroke-width: 1.5; }
.packet-hit { fill: none; stroke: transparent; stroke-width: 24; pointer-events: stroke; cursor: pointer; }
.packet-contribution { cursor: pointer; }
.packet-contribution:hover rect { stroke: var(--green); stroke-width: 2; }
.signal-hit { fill: transparent; cursor: pointer; }
.recovery-drag-handle { fill: transparent; cursor: grab; }
#recovery-diagram { touch-action: pinch-zoom; }
#recovery-diagram[data-dragging=true], #recovery-diagram[data-dragging=true] * { cursor: grabbing; }
.packet-contribution rect { fill: var(--surface); stroke: var(--line); }
.packet-contribution text { font-size: 14px; }
.packet-contribution .compact-block-state { font-size: 12px; fill: var(--muted); }
.packet-contribution.omitted rect { fill: var(--lab-amber-bg); stroke: var(--lab-amber); stroke-dasharray: 3 3; }
.packet-node { fill: #f0f3e9; stroke: var(--green); stroke-width: 1.5; }
.output-node { fill: var(--sage-surface); }
.lab-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; border-block: 1px solid var(--line); padding: 1rem 0; }
.lab-metrics > div { min-width: 0; }
.lab-metrics span { display: block; font-size: .65rem; line-height: 1.6; color: var(--muted); }
.lab-metrics output { display: block; font: 500 clamp(1.15rem, 2.3vw, 1.7rem)/1.5 var(--display); margin-top: .2rem; font-variant-numeric: lining-nums tabular-nums; overflow-wrap: anywhere; }
.lab-metrics .lab-residual output { color: var(--lab-amber); }
.lab-verdict { padding: .8rem 1rem; border-left: 3px solid var(--green); background: var(--sage-surface); font-size: .83rem; line-height: 1.65; margin: 1rem 0 .7rem; }
.lab-verdict[data-loss=true] { background: var(--lab-amber-bg); border-color: var(--lab-amber); }
.lab-caption { font-size: .73rem; line-height: 1.7; color: var(--muted); margin: .6rem 0 0; }
.lab-reason { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.lab-reason summary { font-size: .88rem; cursor: pointer; min-height: 44px; display: list-item; align-content: center; }
.lab-reason > p { max-width: 90ch; margin: .5rem 0; font-size: .87rem; line-height: 1.85; }
.lab-sources { display: flex; align-items: center; flex-wrap: wrap; gap: .1rem 1.5rem; padding: .8rem 0; font-size: .8rem; }
.lab-sources p { width: 100%; color: var(--muted); margin: 0 0 .2rem; line-height: 1.7; }
.lab-sources a { min-height: 44px; display: inline-flex; align-items: center; gap: .5rem; }
.lab-footnote { font-size: .76rem; color: var(--muted); max-width: 90ch; line-height: 1.8; border-top: 1px solid var(--line); padding-top: 1rem; }
.lab-samples { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.1rem; margin-top: .6rem; }
.lab-samples .lab-slider { margin: .25rem 0; }
.lab-samples .lab-slider label { font-size: .7rem; }
.lab-samples .lab-slider output { font-size: .8rem; }
.lab-packets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; padding: 0; margin: .5rem 0 1rem; border: 0; }
.lab-packets label { display: grid; grid-template-columns: auto 1fr auto; gap: .4rem; align-items: start; min-height: 44px; padding: .55rem; margin: 0; background: #f0f3e9; border: 1px solid var(--line); border-radius: .2rem; cursor: pointer; }
.signal-packet-title { font-size: .73rem; }
.signal-packet-values { font-size: .75rem; font-variant-numeric: tabular-nums; }
.lab-packets label[data-omitted=true] { background: var(--lab-amber-bg); border-style: dashed; border-color: var(--lab-amber); }
.lab-metrics-two { grid-template-columns: 1fr 1fr; }
.signal-baseline { stroke: var(--line); stroke-width: 1; }
.lab-diagram .signal-row-label { font-size: 12px; font-weight: 650; }
.signal-bar.series-0 { fill: var(--green); }
.signal-bar.series-1 { fill: var(--lab-teal); }
.signal-bar.series-2 { fill: var(--lab-amber); }
.lab-diagram .signal-value { font-size: 13px; }
.lab-diagram .signal-address { font-size: 11px; fill: var(--muted); }
.lab-data { font-size: .8rem; }
.lab-data summary { cursor: pointer; min-height: 44px; padding-top: .5rem; }
.math-lab .lab-data table { width: 100%; min-width: 0; font-size: .8rem; }
.math-lab .lab-data td, .math-lab .lab-data th { padding: .4rem .65rem; }
.lab-collision { display: grid; grid-template-columns: 1fr 1fr 1fr; border-block: 1px solid var(--line); padding: .8rem 0; gap: .6rem; text-align: center; }
.lab-collision span { display: block; font-size: .72rem; line-height: 1.6; color: var(--muted); }
.lab-collision output { display: block; font: 500 1.65rem/1.7 var(--display); }
.lab-collision > div:first-child output { color: var(--green); }
.lab-collision > div:last-child output { color: var(--lab-amber); }
.lab-shared { border-inline: 1px solid var(--line); }
.recovery-grid { stroke: #e4e8de; stroke-width: 1; }
.recovery-axis { stroke: #8c9b8d; stroke-width: 1; }
.recovery-fibre { stroke: var(--lab-teal); stroke-width: 2; }
.recovery-point { stroke: var(--surface); stroke-width: 2; }
.point-u { fill: var(--green); }
.point-v { fill: var(--lab-amber); }
.point-label-bg { fill: var(--surface); stroke: var(--line); }
.lab-diagram .point-label { font: italic 19px var(--display); }
.lab-diagram .axis-tick { font-size: 11px; fill: var(--muted); }
.haar-samples { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .4rem; margin: .8rem 0 1.2rem; }
.haar-samples label { min-width: 0; margin: 0; }
.haar-samples label > span { display: block; text-align: center; font-size: .65rem; color: var(--muted); }
.haar-samples input { display: block; width: 100%; min-width: 0; min-height: 44px; padding: .3rem .1rem; border: 1px solid var(--control-edge); border-radius: .15rem; background: var(--surface); font: 500 .9rem/1.5 system-ui,sans-serif; text-align: center; color: var(--ink); }
.haar-samples input[aria-invalid=true] { border: 2px solid var(--lab-amber); }
.haar-choices { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; padding: 0; margin: .5rem 0 1.3rem; border: 0; }
.haar-choices legend { font-size: .8rem; font-weight: 650; margin-bottom: .6rem; }
.math-lab .haar-choices button { padding: .5rem .4rem; font-size: .72rem; background: var(--surface); color: var(--green); border: 1px solid var(--control-edge); }
.math-lab .haar-choices button[aria-pressed=true] { background: var(--green); color: var(--surface); }
.haar-selection-note { font-size: .76rem; line-height: 1.7; border-top: 1px solid var(--line); padding-top: .7rem; color: var(--muted); }
.haar-legend { display: flex; gap: .45rem 1rem; flex-wrap: wrap; margin: .4rem 0 .8rem; font-size: .7rem; }
.haar-legend > span { display: inline-flex; align-items: center; gap: .4rem; }
.haar-legend > span::before { content: ''; width: 1.2rem; border-top: 2px solid var(--green); }
.haar-legend > .haar-rebuilt::before { border-color: var(--lab-teal); border-top-style: dashed; }
.haar-legend > .haar-residual::before { border-color: var(--lab-amber); }
.haar-legend > .haar-component::before { border-color: var(--ink); border-top-style: dotted; }
.haar-legend > [hidden] { display: none; }
.haar-trace { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.haar-original-trace { stroke: var(--green); }
.haar-rebuilt-trace { stroke: var(--lab-teal); stroke-dasharray: 7 5; stroke-width: 2.5; }
.haar-residual-trace { stroke: var(--lab-amber); }
.haar-component-trace { stroke: var(--ink); stroke-dasharray: 2 5; stroke-width: 2; }
.haar-dot.haar-original-trace { fill: var(--green); stroke-width: 1; }
.haar-dot.haar-rebuilt-trace { fill: var(--surface); stroke-dasharray: none; stroke-width: 1.5; }
.haar-dot.haar-residual-trace { fill: var(--lab-amber); stroke-width: 1; }
.haar-chart-grid { stroke: var(--line); stroke-dasharray: 3 5; }
.lab-diagram .haar-chart-title { font-size: 12px; font-weight: 600; }
.lab-diagram .haar-axis-label { font-size: 12px; fill: var(--muted); }
.haar-coefficients { padding: 0; margin: 1.3rem 0 .5rem; border: 0; }
.haar-coefficients > legend { font-size: .9rem; font-weight: 650; margin-bottom: .4rem; }
.haar-mean { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem .8rem; background: var(--sage-surface); border: 1px solid var(--line); border-radius: .2rem; font-size: .8rem; }
.haar-mean output { font: 500 1.5rem/1.3 var(--display); }
.haar-level-row > p { font-size: .7rem; color: var(--muted); margin: .7rem 0 .35rem; }
.haar-coefficient-grid { display: grid; gap: .35rem; }
.haar-coefficient-grid[data-count="1"] { grid-template-columns: 1fr; }
.haar-coefficient-grid[data-count="2"] { grid-template-columns: repeat(2,minmax(0,1fr)); }
.haar-coefficient-grid[data-count="4"] { grid-template-columns: repeat(4,minmax(0,1fr)); }
.haar-coefficient-grid[data-count="8"] { grid-template-columns: repeat(8,minmax(0,1fr)); }
.haar-coefficient-grid label { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .25rem .3rem; margin: 0; padding: .45rem .35rem; border: 1px solid var(--line); border-radius: .2rem; background: #f0f3e9; cursor: pointer; min-width: 0; }
.haar-coefficient-name { font-size: .65rem; }
.haar-coefficient-grid output { grid-column: 1 / -1; font: 500 1.35rem/1.3 var(--display); font-variant-numeric: lining-nums tabular-nums; }
.haar-support { grid-column: 1 / -1; font-size: .6rem; color: var(--muted); }
.haar-coefficient-grid label[data-omitted=true] { border-style: dashed; border-color: var(--lab-amber); background: var(--lab-amber-bg); }
.haar-inspector { border: 0; padding: .5rem 0; margin: 0 0 .7rem; }
.haar-inspector legend { font-size: .85rem; font-weight: 650; }
.haar-inspect-detail, .haar-sample-detail { margin: .5rem 0; font-size: .8rem; line-height: 1.7; font-variant-numeric: tabular-nums; }
.haar-inspect-detail[hidden] { display: none; }
.haar-support-band { fill: var(--green); opacity: .09; }
.haar-support-half { fill: var(--lab-teal); opacity: .12; }
.haar-address-guide { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 4; pointer-events: none; }
#haar-diagram svg { cursor: crosshair; }
.haar-energy-caption { font-size: .75rem; line-height: 1.8; }
.haar-energy-equation { font: 400 1.8rem/1.4 var(--display); font-variant-numeric: lining-nums tabular-nums; margin: .4rem 0; }
.haar-visual .lab-data th, .haar-visual .lab-data td { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .lab-workspace { grid-template-columns: minmax(13rem, 1fr) minmax(0, 1.5fr); }
  .lab-controls { padding: 1rem; }
  .lab-visual { padding: .8rem; }
  .lab-matrix-row { gap: .55rem; flex-wrap: wrap; }
  .lab-matrix-row > p { margin: 0; }
  .lab-packets { grid-template-columns: 1fr; }
  .haar-coefficient-grid[data-count="8"] { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media (max-width: 680px) {
  .lab-intro { display: block; padding-top: .5rem; }
  .math-lab .lab-intro h1 { margin-bottom: .7rem; }
  .lab-wide-break { display: none; }
  .lab-intro > p:not(.lab-kicker):not(.side-launch) { font-size: .93rem; }
  .lab-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); margin-bottom: 1.5rem; }
  .lab-tabs a:nth-child(3) { border-left: 0; }
  .lab-tabs a:nth-child(n+3) { border-top: 1px solid var(--line); }
  .lab-tabs a { gap: .4rem; font-size: .8rem; padding: .75rem .25rem; }
  .lab-tabs a span { font-size: 1.05rem; }
  .lab-panel-heading { display: block; }
  .lab-panel-heading > button { margin-top: 1rem; }
  .lab-workspace { grid-template-columns: minmax(0, 1fr); overflow: visible; }
  .lab-controls { border-right: 0; border-bottom: 1px solid var(--line); padding: 1rem; }
  .lab-matrix-row { gap: 1rem; flex-wrap: nowrap; }
  .lab-controls > .lab-slider { margin: .7rem 0; }
  .lab-blocks { grid-template-columns: 1fr 1fr; }
  .lab-blocks label { padding: .6rem; }
  .lab-blocks label > span { font-size: .75rem; }
  .lab-slider input[type=range] { height: 40px; min-height: 40px; }
  .lab-visual { padding: 1rem .7rem; }
  .lab-metrics { gap: .4rem; }
  .lab-metrics span { font-size: .6rem; }
  .lab-metrics output { font-size: 1.25rem; }
  .lab-packets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lab-packets label { grid-template-columns: auto 1fr; gap: .2rem .4rem; }
  .signal-packet-values { grid-column: 2; font-size: .7rem; }
  .lab-samples { gap: 0 1.5rem; }
  .lab-collision output { font-size: 1.3rem; }
  .lab-collision span { font-size: .65rem; }
  .haar-coefficient-grid output { font-size: 1.1rem; }
}
@media (max-width: 380px) {
  .haar-coefficient-grid[data-count="4"], .haar-coefficient-grid[data-count="8"] { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .lab-matrix-row { flex-wrap: wrap; }
  .lab-metrics { grid-template-columns: 1fr; }
  .lab-metrics-two { grid-template-columns: 1fr 1fr; }
}
@media print {
  .lab-panel[hidden] { display: block; }
  .lab-tabs, .lab-session, .lab-panel-heading > button, .lab-controls, .lab-packets { display: none; }
  .lab-workspace { display: block; break-inside: avoid; }
}
@media (forced-colors: active) {
  .packet-wire, .recovery-fibre, .recovery-axis, .signal-baseline { stroke: CanvasText; }
  .packet-node, .packet-contribution rect, .point-label-bg { fill: Canvas; stroke: CanvasText; }
  .signal-bar, .recovery-point { fill: CanvasText; stroke: CanvasText; }
  .haar-trace, .haar-dot { stroke: CanvasText; }
  .haar-address-guide { stroke: CanvasText; }
  .haar-support-band, .haar-support-half { fill: Highlight; }
  .lab-diagram svg text { fill: CanvasText; }
}