:root {
  color-scheme:dark;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:#090f15;
  color:#dfebee;
  --ink:#dfebee;
  --muted:#a3b7c2;
  --line:#95c2c832;
  --panel:#15232a;
  --field:#0d1a23;
  --accent:#9be3cf;
  --warm:#efd29c;
  --mono:"Cascadia Code",Consolas,monospace
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  min-width:330px;
  background:radial-gradient(ellipse at 0% 2%,#31514e6b,transparent 45%),radial-gradient(ellipse at 90% 35%,#38315346,transparent 50%),#090f15
}
button,input,select {
  font:inherit
}
button,summary,select {
  cursor:pointer
}
button,input,select {
  max-width:100%
}
a {
  color:#aee8db
}
h1,h2,h3,p {
  margin:0
}
p {
  color:var(--muted);
  line-height:1.6
}
button {
  color:#e0efdf;
  border:1px solid #c5d4b652;
  border-radius:12px;
  min-height:38px;
  padding:8px 12px;
  font-size:12px;
  font-weight:650;
  background:linear-gradient(150deg,#51645670,#1b303ad4);
  box-shadow:inset 0 1px 0 #f5ffdc22,inset 0 -2px 5px #06111870,0 3px 8px #0003;
  transition:border-color .4s,box-shadow .4s,color .4s
}
button:hover {
  border-color:#e7e4b69e;
  color:#fff9de;
  box-shadow:inset 0 1px 0 #ffffdc45,0 0 20px #d0d89928
}
button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible,.segments input:focus-visible+span {
  outline:2px solid var(--accent);
  outline-offset:4px
}
[hidden] {
  display:none!important
}
.eyebrow {
  color:#d7c69f;
  font:650 10px/1.5 var(--mono);
  letter-spacing:.13em;
  text-transform:uppercase
}
.referenceLink {
  font-size:12px;
  color:#b1dfd3;
  text-decoration:none;
  white-space:nowrap
}
.referenceLink:hover {
  color:#fff4ce;
  text-shadow:0 0 12px #e7df9680
}
.brandbar {
  display:flex;
  align-items:center;
  gap:38px;
  padding:18px 26px;
  border-bottom:1px solid #c4dbba26;
  background:linear-gradient(130deg,#2842425e,#1e25395c);
  box-shadow:inset 0 -1px 0 #fbffe507
}
.brand {
  display:flex;
  align-items:center;
  gap:16px;
  text-decoration:none;
  color:inherit;
  flex-shrink:0
}
.brandMark {
  width:57px;
  height:57px;
  filter:drop-shadow(0 0 14px #e7d88b4d)
}
h1 {
  font:650 clamp(24px,2.2vw,34px)/1.1 Georgia,"Times New Roman",serif;
  letter-spacing:-.025em;
  color:#f2edda;
  text-shadow:0 0 25px #cdd49721
}
.brand .eyebrow {
  font-size:9px
}
.brandPromise {
  font:500 15px/1.6 Georgia,serif;
  color:#e1e5dc
}
.brandPromise span {
  font:12px/1.5 system-ui,sans-serif;
  color:#97b0bf
}
.brandbar>.referenceLink {
  margin-left:auto
}
.shell {
  display:grid;
  grid-template-columns:minmax(0,1fr) 352px;
  align-items:start;
  gap:20px;
  padding:20px 22px 28px;
  max-width:2100px;
  margin:0 auto
}
.stage {
  min-width:0;
  display:grid;
  grid-template-rows:auto auto auto auto auto;
  gap:14px
}
.sceneJourney {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px
}
.sceneJourney button {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  text-align:left;
  min-height:60px;
  padding:11px 12px;
  border-radius:16px;
  background:linear-gradient(135deg,#314a4877,#192535c2);
  border-color:#9dbfc536
}
.sceneJourney small {
  font:9px/1.3 var(--mono);
  color:#9cabb8
}
.sceneJourney span {
  font:650 13px/1.25 Georgia,serif;
  color:#c9dde0
}
.sceneJourney [aria-pressed=true] {
  border-color:#e9df9891;
  box-shadow:inset 0 1px 0 #f6f3c04f,inset 0 0 18px #cfd58812,0 0 25px #e0d2871c;
  background:linear-gradient(135deg,#655f3a7a,#26463ed4)
}
.sceneJourney [aria-pressed=true] span {
  color:#fff0bf;
  text-shadow:0 0 13px #ead8915e
}
.sceneJourney [aria-pressed=true] small {
  color:#d3caa9
}
.topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:3px 3px 0
}
.topbar h2 {
  font:600 clamp(24px,2.3vw,34px)/1.15 Georgia,serif;
  letter-spacing:-.02em;
  color:#f1edde
}
.topbar p {
  font-size:12px;
  max-width:890px;
  margin-top:5px
}
.topbar .eyebrow {
  font-size:9px
}
.metrics {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px;
  flex-shrink:0;
  font:11px var(--mono)
}
.metrics span {
  padding:7px 10px;
  border:1px solid #bdd2ba45;
  border-radius:30px;
  background:#24373689;
  color:#d2e7d8;
  white-space:nowrap
}
.metrics span:first-child {
  border-color:#e2d9a760;
  color:#f1dfa9;
  box-shadow:0 0 15px #d2d08012
}
.canvasWrap {
  --split:50%;
  position:relative;
  aspect-ratio:1.75;
  min-height:280px;
  overflow:hidden;
  border:1px solid #d7dfa58c;
  border-radius:26px;
  background:#070c11;
  box-shadow:0 0 0 3px #c1d7a709,inset 0 0 0 1px #eaffc520,0 0 35px #b7d99422,0 18px 40px #0007;
  transition:border-color .5s,box-shadow .5s
}
.canvasWrap:hover {
  border-color:#f4efbbc9;
  box-shadow:0 0 0 3px #dfe99f15,0 0 45px #bfd99832,0 18px 40px #0007
}
.canvasWrap canvas {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  object-fit:contain
}
.canvasWrap[data-compare=true] {
  cursor:ew-resize
}
.splitLabel {
  position:absolute;
  top:14px;
  left:14px;
  right:14px;
  display:flex;
  justify-content:space-between;
  pointer-events:none;
  gap:14px
}
.splitLabel span {
  position:relative;
  display:grid;
  gap:3px;
  min-width:135px;
  padding:9px 12px 9px 26px;
  border:1px solid #e4e7af5f;
  border-radius:13px;
  background:linear-gradient(145deg,#2d3b3ace,#13202deb);
  backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 #faffcc25,0 3px 15px #0005
}
.splitLabel b {
  font:650 13px Georgia,serif;
  color:#f2e8c9
}
.splitLabel small {
  font:9px var(--mono);
  color:#bad1d0
}
.splitLabel i {
  position:absolute;
  left:11px;
  top:14px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#f6db98;
  box-shadow:0 0 10px #f7d383
}
.splitLabel span+span i {
  background:#9ae6d5;
  box-shadow:0 0 10px #94e8d5
}
.splitHandle {
  position:absolute;
  top:0;
  bottom:0;
  left:var(--split);
  width:28px;
  min-height:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  transform:translateX(-50%);
  cursor:ew-resize
}
.splitHandle:hover {
  background:transparent;
  box-shadow:none
}
.splitHandle::before {
  content:"";
  position:absolute;
  inset:0 auto 0 50%;
  width:1px;
  background:#f3eaca99;
  box-shadow:0 0 7px #f4e78d7a
}
.splitHandle::after {
  content:"↔";
  position:absolute;
  top:50%;
  left:50%;
  display:grid;
  place-items:center;
  width:26px;
  height:52px;
  border:1px solid #f4e9b6a1;
  border-radius:14px;
  color:#f6ecb9;
  background:linear-gradient(135deg,#4c5642db,#122936ee);
  box-shadow:inset 0 1px 0 #ffffd659,0 0 15px #e4d99854;
  transform:translate(-50%,-50%)
}
.evidenceStrip {
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid #aacbc231;
  border-radius:16px;
  padding:10px 13px;
  background:linear-gradient(120deg,#2a3f3567,#17283782);
  box-shadow:inset 0 1px 0 #ffffff08
}
.evidenceStrip>span {
  font:600 10px/1.4 var(--mono);
  color:#e8dba9;
  max-width:150px;
  flex-shrink:0
}
.evidenceStrip p {
  font-size:11px;
  flex:1
}
.evidenceStrip button {
  min-height:32px;
  padding:6px 9px;
  font-size:10px;
  flex-shrink:0
}
.panel {
  min-width:0;
  display:grid;
  gap:12px;
  padding:17px;
  border:1px solid #b6cabc49;
  border-radius:24px;
  background:repeating-linear-gradient(118deg,#ffffff02 0 1px,transparent 1px 5px),radial-gradient(ellipse at 15% 0,#c9dea117,transparent 65%),linear-gradient(140deg,#293e4194,#192435d6 45%,#13202ace);
  box-shadow:inset 0 1px 0 #eaffc738,inset 1px 0 0 #efffca0f,inset -1px -2px 7px #040b1680,0 10px 35px #0005;
  backdrop-filter:blur(18px)
}
.inspectorTitle {
  position:relative;
  padding:2px 4px 10px
}
.inspectorTitle h2 {
  font:600 25px/1.25 Georgia,serif;
  color:#f1e8ce
}
.inspectorTitle .eyebrow {
  font-size:9px
}
.inspectorLight {
  position:absolute;
  right:6px;
  top:11px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#e5e7a2;
  box-shadow:0 0 0 4px #f3ed9912,0 0 15px #eff59f91
}
.controlGroup {
  min-width:0;
  display:grid;
  gap:8px;
  padding:0 0 13px;
  border-bottom:1px solid #b6c3c225
}
.label,.rowLabel {
  color:#d0dfe3;
  font-size:12px;
  font-weight:550
}
.rowLabel {
  display:flex;
  justify-content:space-between;
  gap:6px;
  align-items:center
}
.rowLabel:not(:first-child) {
  margin-top:4px
}
output {
  color:#bcdfc9;
  font:11px var(--mono);
  font-variant-numeric:tabular-nums
}
.groupHeading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:2px 0 4px
}
.groupHeading h3 {
  font:600 17px Georgia,serif;
  color:#e7e2ca
}
.groupHeading>span {
  font:8px var(--mono);
  letter-spacing:.08em;
  color:#8fbfb9
}
.segments {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:4px;
  padding:4px;
  border:1px solid #a8c4c632;
  border-radius:13px;
  background:#0d192380;
  box-shadow:inset 0 2px 7px #0005
}
.segments label {
  position:relative;
  cursor:pointer
}
.segments input {
  position:absolute;
  opacity:0;
  width:1px;
  height:1px
}
.segments span {
  display:grid;
  place-items:center;
  min-height:33px;
  border:1px solid transparent;
  border-radius:10px;
  padding:3px;
  font-size:11px;
  font-weight:550;
  color:#9fb5c4;
  transition:color .4s,background .4s,box-shadow .4s
}
.segments input:checked+span {
  color:#f2f5d9;
  border-color:#d7e0b04f;
  background:linear-gradient(145deg,#65725b8a,#314b4b97);
  box-shadow:inset 0 1px 0 #f9ffcd38,0 0 15px #c5d88214;
  text-shadow:0 0 13px #e3e9b052
}
select {
  width:100%;
  min-height:40px;
  padding:8px 30px 8px 10px;
  color:#ddece7;
  font-size:12px;
  border:1px solid #b8d0c255;
  border-radius:12px;
  background:linear-gradient(130deg,#38534a7a,#152938db);
  box-shadow:inset 0 1px 0 #efffe02a,inset 0 -2px 5px #0003;
  transition:border-color .4s,box-shadow .4s
}
select:hover {
  border-color:#d6e5ab9c;
  box-shadow:0 0 16px #cbd49321
}
option,optgroup {
  background:#172833;
  color:#e3eddf
}
.controlNote {
  font-size:11px;
  line-height:1.55;
  color:#9db6c2
}
.animateToggle,.toggles label {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:#c7d9da;
  min-height:25px
}
input[type=checkbox] {
  width:15px;
  height:15px;
  accent-color:#b3d7a0
}
.controlPair {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px
}
.rangeField {
  min-width:0;
  display:grid;
  gap:6px
}
.controlPair .rowLabel {
  font-size:10px
}
.materialControls {
  padding:12px;
  border:1px solid #c9d59a49;
  border-radius:16px;
  background:linear-gradient(140deg,#65704c1c,#10273670);
  box-shadow:inset 0 1px 0 #effbb814
}
.materialControls[data-available=false] {
  opacity:.55
}
.materialControls[data-available=false] select,.materialControls[data-available=false] input {
  pointer-events:none
}
input[type=range] {
  --range-fill:50%;
  appearance:none;
  width:100%;
  height:7px;
  min-height:7px;
  margin:6px 0 9px;
  border:1px solid #8aa49d32;
  border-radius:20px;
  background:linear-gradient(90deg,#dbe5a5 0,#88c8b6 var(--range-fill),#10212c var(--range-fill),#10212c 100%);
  box-shadow:inset 0 1px 3px #0008,0 0 8px #a6cc9820;
  cursor:pointer
}
input[type=range]::-webkit-slider-thumb {
  appearance:none;
  width:17px;
  height:17px;
  border:1px solid #f5f0c6;
  border-radius:50%;
  background:radial-gradient(circle at 35% 25%,#fff9d8,#b5d3b0 50%,#416c62);
  box-shadow:0 0 0 3px #b4d3b00f,0 0 11px #c6e29d4b,0 2px 5px #0009
}
input[type=range]::-moz-range-thumb {
  width:15px;
  height:15px;
  border:1px solid #f5f0c6;
  border-radius:50%;
  background:#b5d3b0;
  box-shadow:0 0 11px #c6e29d4b
}
.actions {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px
}
.actions button:first-child {
  background:linear-gradient(145deg,#85825188,#3e6658be);
  border-color:#dfdc9d8a;
  color:#fff3c6;
  box-shadow:inset 0 1px 0 #fff7bd52,0 0 22px #d9dc801b
}
.scopeFooter {
  font-size:11px;
  line-height:1.6;
  color:#91a7b5
}
.scopeFooter a {
  white-space:nowrap
}
.technicalPanel {
  padding:11px;
  border:1px solid #a4bac030;
  border-radius:13px;
  background:#101f2954
}
summary {
  font-size:12px;
  color:#e5dcb8
}
summary:hover {
  color:#fff1c9
}
.technicalPanel>section {
  padding-top:12px;
  border:0
}
.readout,.backendGrid {
  display:grid;
  gap:8px
}
.readout div,.backendGrid div {
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:11px;
  color:#a7bdc8
}
.readout strong,.backendGrid strong {
  font-weight:550;
  text-align:right;
  color:#d6e6e5
}
.technicalPanel .controlNote {
  margin-top:10px
}
.learningDeck {
  display:grid;
  gap:13px
}
.probeCard,.crashCourse,.derivation {
  min-width:0;
  border:1px solid #bad2bd43;
  border-radius:22px;
  background:radial-gradient(ellipse at 8% 0%,#bccb9720,transparent 65%),linear-gradient(145deg,#273d3b80,#1423359c);
  box-shadow:inset 0 1px 0 #f2ffd323,inset 0 -1px 0 #010c2370,0 7px 24px #0004;
  transition:border-color .5s,box-shadow .5s
}
.probeCard:hover,.crashCourse:hover,.derivation:hover {
  border-color:#dce9b574;
  box-shadow:inset 0 1px 0 #f2ffd331,0 0 30px #ccd89712,0 7px 24px #0004
}
.probeCard {
  padding:17px 19px
}
.probe-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px
}
.probe-heading h3 {
  font:600 25px Georgia,serif;
  color:#f2e8ca;
  margin-top:3px
}
.probe-status {
  color:#bfdccf;
  font:9px var(--mono);
  padding:6px 9px;
  border:1px solid #b6d3c236;
  border-radius:30px;
  white-space:nowrap
}
.probe-body {
  display:grid;
  grid-template-columns:minmax(0,1fr) 245px;
  align-items:center;
  gap:14px;
  margin-top:8px
}
.probe-svg {
  width:100%;
  min-width:0;
  overflow:visible
}
.probe-svg text {
  font:10px var(--mono)
}
.probe-svg .hemisphere-grid {
  fill:none;
  stroke:#9abdb647;
  stroke-width:.75
}
.probe-svg .probe-axis {
  fill:none;
  stroke:#cfdfb638;
  stroke-dasharray:3 4
}
.probe-svg .vertex-label {
  font-size:8px
}
.probe-svg .transform-arrow {
  fill:none;
  stroke:#d0dbb6;
  stroke-width:1.2
}
.probe-svg .transform-label {
  fill:#eadbaa;
  font:italic 17px Georgia,serif
}
.probe-svg .diagram-caption {
  fill:#97b3c1;
  font-size:9px
}
.probe-values {
  display:grid;
  grid-template-columns:96px 1fr;
  gap:15px
}
.probe-matrix>span {
  font:9px var(--mono);
  color:#c4cead;
  display:block;
  margin-bottom:7px
}
.probe-matrix [data-matrix] {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px 5px;
  border-left:1px solid #c6d4a775;
  border-right:1px solid #c6d4a775;
  padding:8px 5px;
  font:10px var(--mono);
  color:#d6edcf;
  text-align:right
}
.probe-values dl {
  display:grid;
  gap:7px;
  margin:0
}
.probe-values dl>div {
  display:grid;
  gap:2px
}
.probe-values dt {
  font-size:9px;
  color:#91b1be
}
.probe-values dd {
  margin:0;
  font:11px var(--mono);
  color:#d7eace
}
.probe-caption {
  font-size:11px;
  line-height:1.6;
  padding-top:10px;
  border-top:1px solid #c0d9b61f;
  color:#a0b6c1
}
.crashCourse {
  padding:15px 18px
}
.crashCourse summary {
  list-style:none;
  display:grid;
  grid-template-columns:1fr auto;
  gap:3px
}
.crashCourse summary::-webkit-details-marker {
  display:none
}
.crashCourse summary .eyebrow {
  grid-column:1
}
.crashCourse summary strong {
  grid-column:1;
  font:600 23px Georgia,serif;
  color:#eee6cb
}
.foldMark {
  grid-column:2;
  grid-row:1/3;
  align-self:center;
  color:#b5d4c2;
  font-size:14px
}
.courseSteps {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:18px
}
.courseSteps article {
  position:relative;
  padding:0 13px 0 0;
  border-right:1px solid #adccb524
}
.courseSteps article:last-child {
  border:0;
  padding-right:0
}
.courseNumber {
  font:italic 24px Georgia,serif;
  color:#d8d5a673;
  float:right;
  margin-left:7px
}
.courseSteps h3 {
  font:600 17px/1.3 Georgia,serif;
  color:#e5e7d7;
  margin:0 0 7px
}
.courseSteps p {
  font-size:11px;
  line-height:1.65
}
.miniFormula {
  margin-top:12px;
  color:#bce3d1;
  font:14px/1.5 Georgia,serif;
  text-shadow:0 0 18px #abe9c726
}
.courseFoot {
  display:flex;
  align-items:center;
  gap:20px;
  margin-top:15px;
  padding-top:12px;
  border-top:1px solid #b0c8b228
}
.courseFoot p {
  font-size:10px;
  line-height:1.6;
  flex:1
}
.courseFoot .referenceLink {
  font-size:10px
}
.derivation {
  padding:14px 18px
}
.methodDiagram {
  max-width:380px;
  margin:12px auto
}
.methodDiagram svg {
  display:block;
  width:100%
}
.methodDiagram text {
  font:8px system-ui,sans-serif
}
.methodSteps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  padding:0 0 0 19px;
  margin:15px 0;
  color:#a8bfca
}
.methodSteps li {
  font-size:12px;
  line-height:1.6
}
.methodSteps b {
  color:#dce9e6
}
.formula {
  padding:15px;
  border:1px solid #bad19f2b;
  border-radius:15px;
  background:#0d1e2980
}
.formula math {
  font-size:23px;
  color:#e6ebd9
}
.formulaKeys {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  margin-top:12px;
  color:#a8c4c8;
  font:10px/1.5 var(--mono)
}
.derivation>.controlNote {
  margin:12px 0
}
@media(min-width:1600px) {
  .shell {
    grid-template-columns:minmax(0,1fr) 395px;
    gap:24px;
    padding:23px 28px
  }
  .panel {
    padding:20px;
    gap:15px
  }
  .controlGroup {
    gap:10px
  }
  .topbar p {
    font-size:13px
  }
  .canvasWrap {
    aspect-ratio:1.85
  }
  .probe-body {
    grid-template-columns:minmax(0,1fr) 290px
  }
  .probe-values {
    grid-template-columns:115px 1fr
  }
  .probe-values dl>div {
    grid-template-columns:1fr auto;
    gap:8px
  }
  .probe-matrix [data-matrix] {
    font-size:12px
  }
  .probe-values dt {
    font-size:10px
  }
  .courseSteps p,.probe-caption {
    font-size:12px
  }
}
@media(max-width:1180px) {
  .shell {
    grid-template-columns:minmax(0,1fr) 316px;
    gap:15px;
    padding:16px
  }
  .brandbar {
    gap:22px;
    padding:16px
  }
  .brandbar>.referenceLink {
    display:none
  }
  .sceneJourney button {
    padding:9px
  }
  .sceneJourney span {
    font-size:12px
  }
  .sceneJourney small {
    font-size:8px
  }
  .probe-body {
    grid-template-columns:1fr
  }
  .probe-values {
    grid-template-columns:115px 1fr
  }
  .probe-values dl {
    grid-template-columns:repeat(3,1fr);
    align-content:center
  }
  .probe-matrix [data-matrix] {
    font-size:11px
  }
  .evidenceStrip {
    flex-wrap:wrap
  }
  .evidenceStrip p {
    min-width:200px
  }
  .topbar {
    gap:10px
  }
  .metrics {
    font-size:10px
  }
  .courseSteps {
    gap:12px
  }
  .courseSteps h3 {
    font-size:15px
  }
  .courseFoot {
    display:block
  }
  .courseFoot>a {
    display:inline-block;
    margin-top:7px
  }
}
@media(max-width:850px) {
  .shell {
    display:flex;
    flex-direction:column;
    padding:13px
  }
  .stage,.panel {
    width:100%
  }
  .panel {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:start
  }
  .inspectorTitle,.materialControls,.actions,.scopeFooter {
    grid-column:1/-1
  }
  .materialControls .controlPair {
    grid-template-columns:1fr 1fr
  }
  .brandbar {
    flex-wrap:wrap;
    gap:10px
  }
  .brandPromise {
    font-size:13px
  }
  .brandPromise span {
    font-size:11px
  }
  .brand {
    gap:10px
  }
  .brandMark {
    width:45px;
    height:45px
  }
  .brandbar>.referenceLink {
    display:none
  }
  .canvasWrap {
    min-height:240px;
    aspect-ratio:1.6
  }
  .topbar h2 {
    font-size:25px
  }
  .topbar p {
    font-size:11px
  }
  .probe-body {
    grid-template-columns:minmax(0,1fr) 230px
  }
  .probe-values {
    grid-template-columns:96px 1fr
  }
  .probe-values dl {
    grid-template-columns:1fr
  }
  .probe-heading h3 {
    font-size:23px
  }
  .methodSteps {
    grid-template-columns:1fr;
    gap:8px
  }
}
@media(max-width:600px) {
  .brandPromise {
    display:none
  }
  .sceneJourney {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px
  }
  .sceneJourney button {
    min-height:47px
  }
  .sceneJourney small {
    font-size:9px
  }
  .sceneJourney span {
    font-size:13px
  }
  .metrics {
    display:none
  }
  .topbar .eyebrow {
    font-size:8px
  }
  .canvasWrap {
    border-radius:19px;
    min-height:225px
  }
  .splitLabel {
    top:9px;
    left:9px;
    right:9px
  }
  .splitLabel span {
    min-width:0;
    padding:7px 9px 7px 19px;
    border-radius:10px
  }
  .splitLabel i {
    left:8px;
    top:12px;
    width:4px;
    height:4px
  }
  .splitLabel b {
    font-size:11px
  }
  .splitLabel small {
    font-size:7px
  }
  .evidenceStrip {
    padding:10px;
    gap:8px
  }
  .evidenceStrip>span {
    max-width:none
  }
  .evidenceStrip p {
    flex-basis:100%;
    min-width:0
  }
  .evidenceStrip button {
    font-size:10px
  }
  .probeCard,.crashCourse {
    padding:14px
  }
  .probe-heading {
    align-items:start;
    flex-direction:column;
    gap:7px
  }
  .probe-heading h3 {
    font-size:23px
  }
  .probe-body {
    grid-template-columns:1fr
  }
  .probe-values {
    grid-template-columns:100px 1fr
  }
  .probe-values dl {
    grid-template-columns:1fr 1fr;
    gap:7px 12px
  }
  .probe-caption {
    font-size:11px
  }
  .courseSteps {
    grid-template-columns:1fr;
    gap:15px
  }
  .courseSteps article {
    padding:0 0 13px;
    border-right:0;
    border-bottom:1px solid #b1c5b521
  }
  .courseSteps h3 {
    font-size:18px
  }
  .courseSteps p {
    font-size:12px
  }
  .crashCourse summary strong {
    font-size:21px
  }
  .panel {
    padding:15px;
    gap:13px
  }
  .controlGroup {
    gap:8px
  }
  .groupHeading>span {
    font-size:7px
  }
  .groupHeading h3 {
    font-size:16px
  }
  .technicalPanel {
    grid-column:1/-1
  }
  .controlPair .rowLabel {
    font-size:11px
  }
  .courseFoot p {
    font-size:11px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    transition:none!important;
    animation:none!important
  }
}
/* A complete hero image stays visible on shorter desktop windows; theory follows. */
@media(min-width:851px) and (max-height:800px) {
  .brandbar {
    padding:10px 20px;
    gap:25px
  }
  .brandMark {
    width:44px;
    height:44px
  }
  .brand h1 {
    font-size:27px
  }
  .brandPromise {
    font-size:13px
  }
  .brandPromise span {
    font-size:11px
  }
  .shell {
    padding-top:13px;
    gap:16px
  }
  .stage {
    gap:10px
  }
  .sceneJourney button {
    min-height:49px;
    padding:7px 10px;
    gap:3px
  }
  .sceneJourney small {
    font-size:8px
  }
  .sceneJourney span {
    font-size:12px
  }
  .topbar h2 {
    font-size:27px
  }
  .topbar p {
    font-size:11px;
    line-height:1.45;
    margin-top:4px
  }
  .topbar .eyebrow {
    font-size:8px
  }
  .canvasWrap {
    aspect-ratio:1.95;
    max-height:calc(100svh - 235px);
    min-height:290px
  }
  .metrics {
    font-size:10px
  }
  .metrics span {
    padding:6px 8px
  }
}
/* Keep all nine matrix coefficients separate from the numerical readouts. */
.probe-body {
  grid-template-columns:minmax(0,1fr) 282px
}
.probe-values {
  grid-template-columns:140px minmax(0,1fr);
  gap:14px
}
.probe-matrix {
  min-width:0
}
.probe-matrix [data-matrix] {
  font-size:10px;
  gap:7px 4px
}
.probe-values dl {
  min-width:0
}
.probe-values dd {
  white-space:nowrap
}
@media(min-width:1600px) {
  .probe-body {
    grid-template-columns:minmax(0,1fr) 310px
  }
  .probe-values {
    grid-template-columns:140px minmax(0,1fr)
  }
}
@media(max-width:1180px) {
  .probe-body {
    grid-template-columns:1fr
  }
  .probe-values {
    grid-template-columns:140px minmax(0,1fr)
  }
}
@media(max-width:850px) {
  .probe-body {
    grid-template-columns:minmax(0,1fr) 270px
  }
  .probe-values {
    grid-template-columns:140px minmax(0,1fr)
  }
}
@media(max-width:700px) {
  .probe-body {
    grid-template-columns:1fr
  }
  .probe-values {
    grid-template-columns:140px minmax(0,1fr)
  }
  .probe-values dl {
    grid-template-columns:1fr 1fr
  }
}
@media(max-width:420px) {
  .probe-values {
    grid-template-columns:1fr
  }
  .probe-matrix {
    max-width:170px
  }
  .probe-values dl {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .probe-values dd {
    font-size:10px
  }
}

.backendGuide { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.fancyControl { margin-top:10px; border:1px solid #b9dbbd64; border-radius:15px; background:radial-gradient(ellipse at 0 0,#87d8b723,transparent 80%),linear-gradient(120deg,#34454d55,#29333c55); box-shadow:inset 0 1px 0 #efffd828,0 0 20px #9df2ca0a; transition:border-color .4s,box-shadow .4s,background .4s; }
.fancyControl:has(input:checked) { border-color:#c6dfaa9c; box-shadow:inset 0 1px 0 #efffd840,0 0 24px #a8e8c21c; }
.fancyControl:hover,.fancyControl:focus-within { border-color:#e6eccbcc; box-shadow:inset 0 1px 0 #efffd850,0 0 30px #bceccb30; }
.fancySwitch { display:flex; position:relative; align-items:center; gap:10px; padding:12px 13px 5px; cursor:pointer; font:600 16px/1.3 var(--serif,Georgia,serif); color:#e9e8cf; }
.fancySwitch input { position:absolute; opacity:0; width:1px; height:1px; }
.fancyIcon { font:25px/1 Georgia,serif; color:#aecebd; transition:color .4s,text-shadow .4s,transform .5s; }
.fancySwitch:has(input:checked) .fancyIcon { color:#ecdf9b; text-shadow:0 0 12px #eccf7980; transform:rotate(15deg); }
.fancyTrack { width:31px; height:18px; margin-left:auto; border-radius:20px; border:1px solid #a5b5ba70; background:#0e151d99; box-shadow:inset 0 2px 5px #0006; transition:background .35s; }
.fancyTrack::after { content:""; display:block; width:10px; height:10px; margin:3px; border-radius:50%; background:#8c9ca7; box-shadow:0 1px 3px #0006; transition:transform .35s,background .35s,box-shadow .35s; }
.fancySwitch input:checked~.fancyTrack { background:#84b99d3b; border-color:#c9e6aa91; }
.fancySwitch input:checked~.fancyTrack::after { transform:translateX(12px); background:#e0e6b5; box-shadow:0 0 9px #d9efb178; }
.fancySwitch input:focus-visible~.fancyTrack { outline:2px solid #e8dcaa; outline-offset:4px; }
.fancyControl p { margin:0; padding:0 13px 12px; color:#adc6c2; font:10px/1.6 var(--mono); }
.fancyControl:has(input:disabled) { opacity:.55; }
.backendGuide>span { font:10px/1.45 var(--mono); color:#a4d9c3; cursor:help; border-bottom:1px dotted #a4d9c366; }
.backendGuide>span[data-limited=true] { color:#e5c79c; border-color:#e5c79c66; }
.backendGuide button { min-height:28px; padding:4px 9px; font-size:11px; white-space:nowrap; }
.sceneJourney [aria-disabled=true] { opacity:.52; cursor:help; }
.panel input:disabled { opacity:.35; cursor:help; }
.atmosphereControls { border:1px solid #a2c0df40; border-radius:18px; padding:15px; background:linear-gradient(140deg,#314b5b38,#20253532); }
.atmosphereControls .toggles { display:grid; gap:8px; margin-top:5px; }
.atmosphereControls>summary { list-style:none; cursor:pointer; margin:0; }
.atmosphereControls>summary::-webkit-details-marker { display:none; }
.atmosphereControls[open]>summary { margin-bottom:14px; }
.atmosphereBody { display:grid; gap:12px; }
.backendInfo { position:fixed; z-index:40; top:90px; left:22px; width:min(650px,calc(100vw - 430px)); max-height:calc(100svh - 115px); overflow:hidden; display:flex; flex-direction:column; border:1px solid #b8d7d5a3; border-radius:23px; background:radial-gradient(ellipse at 0 0,#3d625b9c,transparent 80%),linear-gradient(145deg,#182a32f5,#171c2df5); backdrop-filter:blur(18px); box-shadow:inset 0 1px 0 #f4ffe852,0 18px 70px #0009,0 0 45px #9de5d323; }
.backendInfo>header { display:flex; gap:20px; justify-content:space-between; align-items:center; padding:20px 23px 15px; border-bottom:1px solid #a2c8c537; }
.backendInfo h2 { color:#eee5ca; font:600 28px/1.2 Georgia,serif; margin-top:4px; }
.backendInfo>header button { white-space:nowrap; min-height:32px; padding:6px 10px; }
.backendInfoBody { overflow:auto; padding:19px 23px 25px; scrollbar-width:thin; scrollbar-color:#91b5b66b transparent; }
.backendInfoBody p { font-size:13px; line-height:1.7; color:#bfd0d9; margin:0 0 17px; }
.backendInfoBody h3 { font:600 18px/1.3 Georgia,serif; color:#eee2bd; margin:18px 0 7px; }
.backendMatrix { margin:18px 0; }
.backendMatrix table { width:100%; table-layout:fixed; border-collapse:collapse; font-size:11px; color:#d0e3e3; }
.backendMatrix caption { text-align:left; color:#9dccbc; font:10px/1.5 var(--mono); letter-spacing:.07em; margin-bottom:8px; }
.backendMatrix th,.backendMatrix td { padding:10px 7px; border-bottom:1px solid #a4c4bd29; text-align:center; font-weight:500; }
.backendMatrix th:first-child { width:51%; text-align:left; color:#c6d8de; }
.backendMatrix thead { background:#92bdb11a; color:#f1e2b6; }
.backendInfoBody .infoCallout { border-left:2px solid #e1c797; padding:10px 13px; background:#d6c9990b; font-size:12px; }
@media(max-width:900px) { .backendInfo { left:12px; top:65px; width:calc(100vw - 24px); max-height:calc(100svh - 80px); } }

/* Luminous field presentation: the simulation remains unchanged; both sides of
   a comparison receive the same restrained display transform. */
:root {
  background:#04080c;
  --ink:#eff8f5;
  --muted:#adc3c9;
  --accent:#9ef6d9;
  --warm:#ffe2a0
}
body {
  position:relative;
  isolation:isolate;
  overflow-x:hidden;
  background:
    radial-gradient(ellipse at 0 2%,#17484378,transparent 42%),
    radial-gradient(ellipse at 92% 30%,#30275568,transparent 48%),
    linear-gradient(180deg,#071015f0,#03070bea)
}
body>*:not(.ambientEnergy) { position:relative; z-index:1 }
.ambientEnergy {
  position:fixed;
  z-index:0;
  inset:-18vmax;
  overflow:hidden;
  pointer-events:none;
  opacity:.82;
  filter:saturate(1.45)
}
.ambientEnergy::before {
  content:"";
  position:absolute;
  inset:8%;
  background:
    radial-gradient(ellipse 28% 18% at 19% 24%,#a8ffe848 0,#77d5c01f 32%,transparent 72%),
    radial-gradient(ellipse 30% 14% at 76% 67%,#ad92ff35 0,#6e6ee419 42%,transparent 74%),
    conic-gradient(from 214deg at 42% 48%,transparent 0 12%,#ffe49612 16%,#a4f3d41e 19%,transparent 25% 63%,#a586ef16 68%,transparent 73%);
  filter:blur(28px);
  transform:translate3d(-3%,1%,0) rotate(-4deg) scale(1.08);
  animation:fieldSweep 16s ease-in-out infinite alternate
}
.ambientEnergy::after {
  content:"";
  position:absolute;
  inset:7%;
  opacity:.14;
  background:
    repeating-radial-gradient(ellipse at 25% 42%,transparent 0 42px,#b9f7e82b 43px 44px,transparent 45px 78px),
    repeating-linear-gradient(112deg,transparent 0 70px,#ffe7a01e 71px,transparent 72px 142px);
  mask-image:radial-gradient(ellipse at center,#000 8%,transparent 73%);
  animation:fieldLines 24s linear infinite
}
.ambientEnergy i {
  position:absolute;
  width:clamp(190px,22vw,430px);
  aspect-ratio:1;
  border:1px solid #9bf0d327;
  border-right-color:transparent;
  border-bottom-color:#f6d98218;
  border-radius:50%;
  box-shadow:0 0 40px #6ee5c511,inset 0 0 35px #8e8cff0b;
  animation:orbitField 18s ease-in-out infinite alternate
}
.ambientEnergy i:nth-child(1) { left:12%; top:16% }
.ambientEnergy i:nth-child(2) { right:12%; top:28%; width:clamp(260px,31vw,560px);animation-delay:-5s;animation-duration:22s }
.ambientEnergy i:nth-child(3) { left:37%; bottom:5%;width:clamp(150px,18vw,340px);animation-delay:-9s;animation-duration:14s }
.ambientEnergy i:nth-child(4) { right:28%; top:3%;width:clamp(90px,12vw,230px);animation-delay:-12s;animation-duration:19s }
@keyframes fieldSweep { to { transform:translate3d(6%,-4%,0) rotate(8deg) scale(1.18);filter:blur(34px) } }
@keyframes fieldLines { to { transform:translate3d(3%,2%,0) rotate(.8deg) } }
@keyframes orbitField { to { transform:translate3d(44px,-30px,0) rotate(34deg) scale(1.12);opacity:.45 } }

.brandbar {
  border-color:#cde9c354;
  background:linear-gradient(130deg,#173936a3,#11162bb0);
  box-shadow:inset 0 -1px 0 #f8ffd229,0 10px 38px #0007,0 0 28px #86e9ca10;
  backdrop-filter:blur(22px) saturate(1.5)
}
.panel {
  border-color:#d9efc777;
  background:
    repeating-linear-gradient(118deg,#ffffff06 0 1px,transparent 1px 5px),
    radial-gradient(ellipse at 15% 0,#e4f4b828,transparent 60%),
    linear-gradient(140deg,#1c3938b8,#11182acc 48%,#0b151edb);
  box-shadow:inset 0 1px 0 #f5ffd46b,inset 1px 0 0 #efffd22b,inset -1px -2px 9px #0009,0 18px 45px #0009,0 0 34px #8df5cd1b;
  backdrop-filter:blur(24px) saturate(1.55) contrast(1.08)
}
.sceneJourney button,.evidenceStrip,.probeCard,.crashCourse,.methodPanel,.technicalPanel,.controlGroup.atmosphereControls {
  backdrop-filter:blur(18px) saturate(1.4)
}
.sceneJourney button {
  background:linear-gradient(135deg,#183b3aa8,#101828c7);
  border-color:#9eead05c;
  box-shadow:inset 0 1px 0 #eaffdd26,0 8px 20px #0005
}
.sceneJourney [aria-pressed=true] {
  border-color:#fff1a9c2;
  background:linear-gradient(135deg,#6e673a9c,#174b42df);
  box-shadow:inset 0 1px 0 #fffbdc72,inset 0 0 22px #dfe9891d,0 0 30px #ffe7883d,0 12px 28px #0007
}
.canvasWrap {
  border-color:#f3eaa1c9;
  box-shadow:0 0 0 3px #dceaa719,inset 0 0 0 1px #f5ffcf55,0 0 42px #d8e68f3f,0 22px 48px #000b
}
.canvasWrap canvas { filter:contrast(1.08) saturate(1.12) brightness(1.02) }
.evidenceStrip {
  border-color:#aef4dd64;
  background:linear-gradient(120deg,#173d36b3,#11182bc7);
  box-shadow:inset 0 1px 0 #efffd334,0 0 25px #7fdfc514
}
.probeCard,.crashCourse,.methodPanel,.technicalPanel {
  border-color:#acdaca59;
  background-color:#0b151fc4;
  box-shadow:inset 0 1px 0 #f0ffdc24,0 12px 34px #0007
}
.inspectorLight,.splitLabel i,.fancyIcon {
  filter:brightness(1.22) saturate(1.3);
  text-shadow:0 0 16px currentColor
}
@media(prefers-reduced-motion:reduce) {
  .ambientEnergy::before,.ambientEnergy::after,.ambientEnergy i { animation:none!important }
}