/* Research playgrounds use the page's shared body and supporting type scale. */
.spatial-lab, .margin-lab { margin-top: 48px; border: 1px solid #d4dfed; border-radius: 12px; background: white; overflow: hidden; }
.lab-heading { display: flex; align-items: start; justify-content: space-between; gap: 30px; padding: 32px; border-bottom: 1px solid #dfe7f2; }
.lab-heading .section-label { font-size: 13px; margin-bottom: 12px; }
.lab-heading h3 { font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.25; letter-spacing: -.5px; max-width: 31ch; }
.lab-heading p { font-size: 16px; line-height: 1.8; color: var(--muted); margin-top: 12px; max-width: 66ch; }
.lab-reset { display: flex; align-items: center; gap: 14px; flex-shrink: 0; white-space: nowrap; background: #f2f5fb; border: 1px solid #d5e0ef; padding: 11px 16px; min-height: 46px; border-radius: 6px; font-size: 14px; color: #385b92; }
.lab-reset:hover { background: #e5edf9; }
.lab-layout { display: grid; grid-template-columns: minmax(0,1fr) 340px; }
.lab-stage { min-width: 0; background: #f9fbff; display: flex; flex-direction: column; justify-content: center; position: relative; }
.stage-topline { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 28px 0; font-size: 13px; color: #4f678a; letter-spacing: .6px; }
.stage-topline > span:first-child { display: flex; align-items: center; gap: 9px; font-weight: 600; }
.stage-topline i { width: 6px; height: 6px; border-radius: 50%; background: #528272; }
.stage-topline > span:last-child { letter-spacing: 0; font-size: 14px; }
#lab-scene { display: block; width: 100%; height: auto; aspect-ratio: 720/430; cursor: grab; touch-action: pan-y; user-select: none; flex: 1; min-height: 290px; }
#lab-scene:active { cursor: grabbing; }
#lab-scene:focus-visible { outline-offset: -5px; }
.lab-cube-label { font: 600 18px var(--sans); fill: #26415e; paint-order: stroke; stroke: #f9fbff; stroke-width: 4px; stroke-linejoin: round; }
.lab-floor-label { font: 15px var(--sans); fill: #45648f; }
.lab-distance-line { stroke: #4475bc; stroke-width: 1.8; stroke-dasharray: 5 5; }
.stage-bottomline { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; color: #506888; padding: 10px 28px 24px; }
.stage-bottomline > span:last-child { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.stage-bottomline i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.anchor-dot { background: #507dd0; }
.target-dot { background: #dc9270; margin-left: 10px; }
.lab-readouts { border-top: 1px solid #d5e1f1; background: #edf3fc; display: grid; grid-template-columns: 1fr 1fr; padding: 26px 28px; gap: 22px; }
.lab-readouts > div > span { font: 600 12px/1.65 var(--sans); letter-spacing: .5px; color: #466793; display: block; margin-bottom: 10px; }
.lab-readouts strong { display: block; color: #244e91; font-size: 36px; font-weight: 500; letter-spacing: -.9px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.lab-readouts strong small { font-size: 16px; font-weight: 400; letter-spacing: 0; }
.lab-readouts .lab-invariant { grid-column: 1/-1; border-top: 1px solid #d0dced; padding-top: 18px; display: grid; grid-template-columns: 1fr 1.4fr; align-items: start; gap: 18px; }
.lab-readouts .lab-invariant > span { margin: 0; }
.lab-invariant p { font-size: 14px; line-height: 1.7; color: #466183; }
.lab-controls { border-left: 1px solid #dee6f1; padding: 28px; display: flex; flex-direction: column; justify-content: center; gap: 26px; }
.control-kicker { font: 650 12px/1.7 var(--sans); letter-spacing: .6px; color: #4d6890; display: block; }
.lab-control { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; font-size: 15px; margin-top: 23px; color: #385778; line-height: 1.6; }
.lab-control output { font: 15px/1.6 var(--sans); color: #254f98; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lab-control input { grid-column: 1/-1; width: 100%; margin: 0; accent-color: #3767b1; cursor: pointer; height: 30px; }
.view-presets { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; margin-top: 14px; }
.view-presets button, .margin-presets button { min-height: 44px; padding: 9px 8px; font-size: 14px; line-height: 1.5; border: 1px solid #d6e0ee; border-radius: 6px; background: white; color: #42628f; }
.view-presets button:hover, .view-presets button[aria-pressed="true"], .margin-presets button:hover { background: #eaf2ff; border-color: #abc4e5; color: #244d90; }
.control-section > p { font-size: 14px; line-height: 1.75; color: var(--muted); margin-top: 15px; }
.control-section + .control-section { border-top: 1px solid #dde6f1; padding-top: 25px; }
.lab-send { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 15px; line-height: 1.6; background: #2856a0; color: white; border-radius: 6px; min-height: 48px; padding: 12px 16px; }
.lab-send:hover { background: #1d4484; }
.lab-caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 25px; border-top: 1px solid #dde6f1; padding: 20px 28px; font-size: 14px; color: var(--muted); background: #fcfdff; line-height: 1.75; }
.lab-caption > span:last-child { color: #356d60; }
.margin-lab { margin-top: 32px; }
.formula-badge { flex-shrink: 0; white-space: nowrap; color: #456389; font: 14px/1.6 var(--sans); background: #f0f4fa; border: 1px solid #dce5f2; padding: 9px 13px; border-radius: 6px; }
.margin-layout { display: grid; grid-template-columns: 1fr 1.15fr; }
.margin-answer { padding: 32px; border-right: 1px solid #e2e8f2; min-width: 0; }
.truth-badge { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; align-items: center; background: #edf3fc; border: 1px solid #d7e3f4; border-radius: 7px; padding: 18px; }
.truth-badge > span { font: 600 13px/1.6 var(--sans); letter-spacing: .5px; color: #496894; }
.truth-badge > strong { font-size: 16px; font-weight: 550; color: #2c548e; }
.margin-answer .lab-control { margin-top: 28px; }
.margin-presets { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 25px; }
.margin-presets button { padding: 10px 14px; }
.margin-help { font-size: 14px; color: var(--muted); line-height: 1.8; margin-top: 22px; }
.margin-output { padding: 32px; min-width: 0; }
.margin-score-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.margin-score-row strong { display: block; font-size: 54px; letter-spacing: -1.5px; line-height: 1.2; font-weight: 450; color: #28539a; margin-top: 12px; font-variant-numeric: tabular-nums; }
.margin-verdict { font-size: 14px; line-height: 1.5; color: #3f6a5c; background: #edf6f0; border: 1px solid #d0e4d8; border-radius: 24px; padding: 8px 14px; text-align: center; }
.margin-verdict[data-level="large"] { color: #8b592d; background: #fcf3e9; border-color: #ecd8c0; }
.margin-meter { height: 18px; display: flex; background: #eaf0f8; border-radius: 5px; overflow: hidden; margin-top: 25px; }
.margin-meter i { display: block; height: 100%; transition: width .18s linear; }
.margin-meter i:first-child, .direction-key { background: #4678c0; }
.margin-meter i:last-child, .distance-key { background: #e1a17b; }
.meter-scale { display: flex; justify-content: space-between; gap: 15px; font-size: 13px; color: var(--muted); margin-top: 10px; }
.margin-components { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 26px; }
.margin-components > div > span { font-size: 14px; line-height: 1.6; color: #3d608c; display: flex; align-items: baseline; gap: 8px; }
.margin-components i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.margin-components strong { display: block; font: 25px/1.3 var(--sans); font-variant-numeric: tabular-nums; color: #2c527e; margin: 12px 0; }
.margin-components small { font: 13px/1.8 var(--sans); color: var(--muted); overflow-wrap: anywhere; display: block; }
.margin-insight { font-size: 15px; color: #435f82; line-height: 1.8; margin-top: 24px; padding: 17px 19px; background: #f5f8fc; border-left: 3px solid #b8cce8; }
.margin-formula { margin-top: 20px; }
.margin-formula summary { padding: 13px 0; background: transparent; font-size: 14px; color: #365985; }
.margin-formula p { font-size: 14px; color: var(--muted); line-height: 1.8; margin: 14px 0; }
.margin-formula p strong { font: 550 15px/1.7 var(--sans); color: #34598c; }
.lab-send:focus-visible, .view-presets button:focus-visible, .margin-presets button:focus-visible { outline-offset: 3px; }
.interactive-entry { display: inline-flex; align-items: center; gap: 11px; margin-top: 24px; font-size: 15px; color: #416aa5; border-bottom: 1px solid #b9cce7; padding-bottom: 6px; }
.interactive-entry:hover { color: #234e95; border-color: #234e95; }
#playground, #margin-playground { scroll-margin-top: 8px; }

@media (max-width: 1050px) {
  .lab-heading { padding: 28px; flex-wrap: wrap; gap: 20px; }
  .lab-layout { grid-template-columns: 1fr; }
  .lab-stage { display: block; }
  #lab-scene { aspect-ratio: 720/400; min-height: 0; }
  .lab-readouts { grid-template-columns: 1fr 1fr 1.25fr; align-items: start; }
  .lab-readouts .lab-invariant { grid-column: auto; border-top: 0; border-left: 1px solid #d0dced; padding: 0 0 0 22px; display: block; }
  .lab-readouts .lab-invariant > span { margin-bottom: 10px; }
  .lab-controls { border-left: 0; border-top: 1px solid #d5e1f1; padding: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 36px; align-items: start; }
  .control-section + .control-section { border-top: 0; border-left: 1px solid #dde6f1; padding: 0 0 0 32px; }
  .lab-send { grid-column: 1/-1; width: min(100%,360px); justify-self: center; }
  .margin-layout { grid-template-columns: 1fr 1fr; }
  .margin-answer, .margin-output { padding: 28px; }
  .margin-score-row { flex-wrap: wrap; gap: 14px; }
  .margin-components { grid-template-columns: 1fr; gap: 20px; }
  .margin-components strong { margin: 8px 0; }
}
@media (max-width: 760px) {
  .spatial-lab { margin-top: 36px; }
  .lab-heading { padding: 24px; }
  .lab-heading .section-label { font-size: 12px; }
  .lab-heading h3 { font-size: 29px; }
  .lab-heading p { font-size: 16px; }
  .lab-reset { min-height: 46px; font-size: 14px; }
  .stage-topline { padding: 22px 22px 0; font-size: 12px; gap: 14px; }
  .stage-topline > span:last-child { font-size: 14px; }
  #lab-scene { aspect-ratio: 720/440; min-height: 0; }
  .lab-cube-label { font-size: 25px; }
  .lab-floor-label { font-size: 23px; }
  .stage-bottomline { padding: 10px 22px 22px; font-size: 13px; gap: 10px; }
  .lab-readouts { padding: 23px; grid-template-columns: 1fr 1fr; gap: 24px; }
  .lab-readouts > div > span { font-size: 12px; }
  .lab-readouts strong { font-size: 34px; }
  .lab-readouts .lab-invariant { grid-column: 1/-1; border-left: 0; border-top: 1px solid #d0dced; padding: 18px 0 0; display: block; }
  .lab-readouts .lab-invariant > span { margin-bottom: 8px; }
  .lab-invariant p { font-size: 14px; }
  .lab-controls { padding: 25px; display: flex; flex-direction: column; gap: 26px; }
  .lab-controls .control-section { width: 100%; }
  .control-section + .control-section { border-left: 0; border-top: 1px solid #dde6f1; padding: 24px 0 0; }
  .control-kicker { font-size: 12px; }
  .lab-control { font-size: 16px; gap: 12px; margin-top: 21px; }
  .lab-control output { font-size: 16px; }
  .view-presets { gap: 8px; }
  .view-presets button, .margin-presets button { font-size: 15px; min-height: 46px; }
  .control-section > p { font-size: 14px; }
  .lab-send { width: 100%; max-width: none; font-size: 16px; }
  .lab-caption { padding: 20px 24px; flex-direction: column; gap: 12px; font-size: 14px; }
  .margin-lab { margin-top: 28px; }
  .margin-layout { grid-template-columns: 1fr; }
  .margin-answer { border-right: 0; border-bottom: 1px solid #e2e8f2; padding: 25px; }
  .margin-output { padding: 25px; }
  .formula-badge { font-size: 14px; }
  .truth-badge { padding: 16px; }
  .margin-score-row { flex-wrap: nowrap; gap: 18px; }
  .margin-score-row strong { font-size: 48px; }
  .margin-components { grid-template-columns: 1fr 1fr; gap: 20px; }
  .margin-help, .margin-formula p { font-size: 14px; }
  .margin-insight { font-size: 15px; }
  .interactive-entry { font-size: 15px; }
  #playground, #margin-playground { scroll-margin-top: 8px; }
}
@media (max-width: 400px) {
  .lab-heading, .lab-controls, .margin-answer, .margin-output { padding: 22px 20px; }
  .lab-heading h3 { font-size: 27px; }
  .stage-topline, .stage-bottomline { padding-inline: 20px; }
  .lab-readouts { padding: 22px 20px; gap: 20px 15px; }
  .lab-readouts strong { font-size: 31px; }
  .lab-readouts > div > span { letter-spacing: 0; }
  .lab-control { grid-template-columns: 1fr; gap: 6px; }
  .lab-control output { font-size: 16px; }
  .view-presets { gap: 6px; }
  .view-presets button { padding-inline: 5px; font-size: 14px; }
  .margin-score-row { flex-wrap: wrap; }
  .margin-components { grid-template-columns: 1fr; gap: 22px; }
  .margin-presets { gap: 8px; }
  .margin-presets button { font-size: 14px; padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) { .margin-meter i { transition: none; } }
@media print {
  .lab-controls, .lab-reset, .lab-send, .margin-presets { display: none; }
  .lab-layout { grid-template-columns: 1fr; }
  .margin-lab, .spatial-lab { break-inside: avoid; box-shadow: none; }
  .lab-control input { display: none; }
}