*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#05070d;
  --panel:#090d17;
  --line:rgba(226,232,240,.14);
  --text:#f8fafc;
  --muted:#a8b3c4;
  --soft:#667386;
  --tone:#38bdf8;
  --tone-bg:rgba(56,189,248,.12);
  --tone-border:rgba(56,189,248,.42);
}
body{
  min-height:100vh;
  background:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px),
    #05070d;
  background-size:46px 46px,46px 46px,100% 100%;
  color:var(--text);
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,sans-serif;
}
body.force{--tone:#f59e0b;--tone-bg:rgba(245,158,11,.12);--tone-border:rgba(245,158,11,.42)}
body.field{--tone:#e879f9;--tone-bg:rgba(232,121,249,.12);--tone-border:rgba(232,121,249,.4)}
body.energy{--tone:#34d399;--tone-bg:rgba(52,211,153,.12);--tone-border:rgba(52,211,153,.4)}
body.motion{--tone:#38bdf8;--tone-bg:rgba(56,189,248,.12);--tone-border:rgba(56,189,248,.42)}
body.momentum{--tone:#fb7185;--tone-bg:rgba(251,113,133,.12);--tone-border:rgba(251,113,133,.42)}
a{color:inherit;text-decoration:none}
.math{
  font-family:"Cambria Math","STIX Two Math","Times New Roman","PingFang SC","Microsoft YaHei",serif;
  font-variant-numeric:lining-nums tabular-nums;
  letter-spacing:0;
  white-space:nowrap;
}
.math sub,
.math sup{
  font-size:.68em;
  line-height:0;
}
.fraction{
  display:inline-grid;
  grid-template-rows:auto auto;
  align-items:center;
  justify-items:center;
  vertical-align:middle;
  margin:0 .12em;
  line-height:1.05;
}
.fraction .top{
  border-bottom:1px solid currentColor;
  padding:0 .22em .08em;
}
.fraction .bottom{
  padding:.08em .22em 0;
}
.module-shell{
  width:min(1180px,calc(100% - 40px));
  margin:0 auto;
  padding:34px 0 80px;
}
.back{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:8px;
  color:rgba(248,250,252,.74);
  background:rgba(9,13,23,.62);
}
.module-hero{
  min-height:calc(100vh - 120px);
  display:grid;
  grid-template-columns:minmax(300px,.9fr) minmax(420px,1.1fr);
  align-items:center;
  gap:52px;
}
.label{
  color:var(--tone);
  font-size:15px;
  margin-bottom:18px;
}
h1{
  font-size:72px;
  line-height:1.05;
  margin-bottom:24px;
  text-wrap:balance;
}
.lead{
  max-width:620px;
  color:var(--muted);
  font-size:18px;
  line-height:1.9;
  text-wrap:pretty;
}
.outline{
  margin-top:32px;
  display:grid;
  gap:12px;
}
.outline span{
  display:flex;
  align-items:center;
  gap:12px;
  color:rgba(248,250,252,.78);
}
.outline span::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--tone);
  box-shadow:0 0 18px var(--tone);
  flex:0 0 auto;
}
.module-hero img{
  width:100%;
  border:1px solid rgba(226,232,240,.16);
  border-radius:8px;
  box-shadow:0 34px 120px rgba(0,0,0,.46),0 0 70px var(--tone-bg);
}
.content-placeholder,
.content-block{
  border-top:1px solid var(--line);
  padding-top:42px;
  margin-top:40px;
  max-width:760px;
}
.content-placeholder h2,
.content-block h2{
  font-size:34px;
  margin-bottom:12px;
}
.content-placeholder p,
.content-block p{
  color:var(--muted);
  font-size:17px;
  line-height:1.9;
  margin-bottom:16px;
}
.submodule-picker,
.induction-panel{
  border-top:1px solid var(--line);
  padding-top:42px;
  margin-top:40px;
}
.picker-heading{
  max-width:820px;
  margin-bottom:24px;
}
.picker-heading h2{
  font-size:42px;
  line-height:1.12;
  margin-bottom:14px;
  text-wrap:balance;
}
.picker-heading p{
  color:var(--muted);
  font-size:17px;
  line-height:1.8;
  text-wrap:pretty;
}
.submodule-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.submodule-card{
  min-height:420px;
  border:1px solid rgba(226,232,240,.13);
  border-radius:8px;
  background:rgba(9,13,23,.68);
  padding:24px;
  display:grid;
  grid-template-rows:auto auto auto 1fr auto;
  gap:13px;
  overflow:hidden;
  position:relative;
  transition:transform .25s cubic-bezier(.16,1,.3,1),border-color .25s,background .25s;
}
.submodule-card:hover{
  transform:translateY(-3px);
  border-color:var(--tone-border);
  background:rgba(15,23,42,.78);
}
.submodule-kicker{
  color:var(--tone);
  font-size:14px;
  font-weight:700;
}
.submodule-card strong{
  max-width:520px;
  color:var(--text);
  font-size:31px;
  line-height:1.18;
  text-wrap:balance;
}
.submodule-card p{
  color:var(--muted);
  font-size:16px;
  line-height:1.75;
}
.submodule-card svg{
  width:100%;
  min-height:178px;
  align-self:end;
}
.submodule-action{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  justify-self:start;
  padding:0 15px;
  border:1px solid var(--tone-border);
  border-radius:8px;
  background:var(--tone-bg);
  color:var(--text);
  font-weight:700;
}
.mini-wire,
.mini-field,
.mini-current{
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.mini-wire{
  stroke:rgba(203,213,225,.62);
  stroke-width:6;
}
.mini-current{
  stroke:var(--tone);
  stroke-width:5;
  stroke-dasharray:12 16;
  animation:flow 1.2s linear infinite;
  filter:drop-shadow(0 0 8px var(--tone-bg));
}
.mini-cell,
.mini-resistor,
.mini-magnet{
  fill:none;
  stroke:rgba(248,250,252,.75);
  stroke-width:5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.mini-meter,
.mini-coil{
  fill:rgba(248,250,252,.06);
  stroke:rgba(248,250,252,.42);
  stroke-width:3;
}
.mini-field{
  stroke:rgba(56,189,248,.52);
  stroke-width:3;
}
.induction-grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);
  gap:18px;
  align-items:stretch;
}
.induction-visual,
.concept-list>div{
  border:1px solid rgba(226,232,240,.13);
  border-radius:8px;
  background:rgba(9,13,23,.68);
}
.induction-visual{
  padding:18px;
  overflow:hidden;
}
.induction-visual svg{
  width:100%;
  min-height:360px;
  display:block;
  background:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px),
    rgba(5,7,13,.42);
  background-size:36px 36px;
  border-radius:8px;
}
.induction-field{
  fill:none;
  stroke:rgba(56,189,248,.46);
  stroke-width:4;
  stroke-linecap:round;
}
.induction-coil{
  fill:rgba(232,121,249,.08);
  stroke:var(--tone);
  stroke-width:6;
}
.magnet{
  stroke:rgba(248,250,252,.28);
  stroke-width:2;
}
.magnet-n{fill:rgba(56,189,248,.22)}
.magnet-s{fill:rgba(232,121,249,.2)}
.induction-visual text{
  fill:var(--text);
  font-size:30px;
  font-weight:800;
}
.induction-current{
  fill:none;
  stroke:url(#inductionGlow);
  stroke-width:6;
  stroke-dasharray:18 16;
  animation:flow 1.3s linear infinite;
  filter:drop-shadow(0 0 10px var(--tone-bg));
}
.induction-lab{
  border-top:1px solid var(--line);
  padding-top:42px;
  margin-top:40px;
}
.physics-lab{
  border-top:1px solid var(--line);
  padding-top:42px;
  margin-top:40px;
}
.induction-stage{
  border:1px solid rgba(226,232,240,.13);
  border-radius:8px;
  background:rgba(9,13,23,.68);
  padding:18px;
  overflow:hidden;
}
.induction-svg{
  width:100%;
  min-height:420px;
  display:block;
  background:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px),
    rgba(5,7,13,.42);
  background-size:36px 36px;
  border-radius:8px;
}
.induction-field{
  fill:none;
  stroke:rgba(56,189,248,.42);
  stroke-width:3;
  stroke-linecap:round;
}
.induction-field.thin{
  opacity:.65;
}
.induction-coil rect,
.induction-coil path{
  fill:none;
  stroke:rgba(232,121,249,.76);
  stroke-width:5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.magnet-group text{
  fill:var(--text);
  font-size:24px;
  font-weight:800;
}
.magnet{
  stroke:rgba(248,250,252,.24);
  stroke-width:2;
}
.magnet-n{
  fill:rgba(56,189,248,.24);
}
.magnet-s{
  fill:rgba(232,121,249,.22);
}
.induction-loop,
.induction-arrow{
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:16 18;
  animation:flow 1.25s linear infinite;
}
.induction-loop{
  stroke:var(--tone);
  stroke-width:6;
  filter:drop-shadow(0 0 10px var(--tone-bg));
  opacity:.95;
}
.induction-arrow{
  stroke:rgba(248,250,252,.55);
  stroke-width:4;
  opacity:.65;
}
.induction-label{
  fill:var(--text);
  font-size:17px;
  font-weight:700;
}
.induction-bottom{
  margin-top:18px;
}
.induction-chart{
  width:100%;
  min-height:250px;
  display:block;
}
.induction-controls .segmented{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.segmented.segmented-2{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.concept-list{
  display:grid;
  gap:12px;
}
.concept-list>div{
  padding:20px;
}
.concept-list span{
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  margin-bottom:14px;
  color:var(--text);
  background:var(--tone-bg);
  border:1px solid var(--tone-border);
  font-weight:800;
}
.concept-list strong{
  display:block;
  color:var(--text);
  font-size:20px;
  margin-bottom:8px;
}
.concept-list p{
  color:var(--muted);
  font-size:15px;
  line-height:1.75;
}
.circuit-lab{
  border-top:1px solid var(--line);
  padding-top:42px;
  margin-top:40px;
}
.lab-heading{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(220px,300px);
  gap:24px;
  align-items:end;
  margin-bottom:24px;
}
.lab-heading h2{
  font-size:42px;
  line-height:1.12;
  margin-bottom:14px;
  text-wrap:balance;
}
.lab-heading p{
  max-width:760px;
  color:var(--muted);
  font-size:17px;
  line-height:1.8;
}
.formula-card{
  border:1px solid var(--tone-border);
  border-radius:8px;
  background:linear-gradient(135deg,var(--tone-bg),rgba(9,13,23,.8));
  padding:18px;
  box-shadow:0 22px 80px rgba(0,0,0,.28);
}
.formula-card span,
.formula-card small{
  display:block;
  color:var(--muted);
  font-size:13px;
}
.formula-card strong{
  display:block;
  margin:7px 0;
  color:var(--text);
  font-size:30px;
  font-family:"Cambria Math","STIX Two Math","Times New Roman","PingFang SC","Microsoft YaHei",serif;
  letter-spacing:0;
}
.formula-card .math{
  font-family:"Cambria Math","STIX Two Math","Times New Roman","PingFang SC","Microsoft YaHei",serif;
}
.lab-grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
  gap:18px;
  align-items:stretch;
}
.lab-stage,
.lab-panel,
.chart-card,
.readout-grid>div{
  border:1px solid rgba(226,232,240,.13);
  border-radius:8px;
  background:rgba(9,13,23,.68);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.lab-stage{
  min-height:510px;
  padding:18px;
  overflow:hidden;
}
.stage-topline,
.chart-head{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  color:rgba(248,250,252,.8);
  font-size:14px;
  margin-bottom:14px;
}
.lab-icon-button,
.control-row button,
.segmented button{
  min-height:38px;
  border:1px solid rgba(226,232,240,.14);
  border-radius:8px;
  background:rgba(248,250,252,.055);
  color:var(--text);
  font:inherit;
  cursor:pointer;
  transition:transform .2s cubic-bezier(.16,1,.3,1),border-color .2s,background .2s;
}
.lab-icon-button{
  padding:0 13px;
  color:rgba(248,250,252,.78);
}
.lab-icon-button:hover,
.control-row button:hover,
.segmented button:hover{
  transform:translateY(-1px);
  border-color:var(--tone-border);
  background:var(--tone-bg);
}
.circuit-svg{
  width:100%;
  min-height:430px;
  display:block;
  background:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px),
    rgba(5,7,13,.42);
  background-size:36px 36px;
  border-radius:8px;
}
.model-svg{
  width:100%;
  min-height:430px;
  display:block;
  background:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px),
    rgba(5,7,13,.42);
  background-size:36px 36px;
  border-radius:8px;
}
.track-line,
.support,
.rope,
.track-path,
.height-line{
  fill:none;
  stroke:rgba(203,213,225,.58);
  stroke-width:6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.projectile-ground,
.projectile-platform,
.projectile-guide,
.trajectory,
.particle-path{
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.projectile-ground{
  stroke:rgba(203,213,225,.58);
  stroke-width:5;
}
.projectile-platform{
  fill:rgba(248,250,252,.045);
  stroke:rgba(203,213,225,.58);
  stroke-width:5;
  stroke-linejoin:round;
}
.trajectory,
.particle-path{
  stroke:var(--tone);
  stroke-width:5;
  filter:drop-shadow(0 4px 8px var(--tone-bg));
}
.projectile-guide{
  stroke:rgba(248,250,252,.34);
  stroke-width:2;
  stroke-dasharray:7 9;
}
.projectile-ball,
.particle-dot{
  fill:var(--tone);
  stroke:rgba(248,250,252,.88);
  stroke-width:2;
  filter:drop-shadow(0 3px 8px var(--tone-bg));
}
.conveyor-belt{
  fill:rgba(248,250,252,.08);
  stroke:rgba(248,250,252,.36);
  stroke-width:3;
}
.conveyor-flow{
  fill:none;
  stroke:var(--tone);
  stroke-width:5;
  stroke-linecap:round;
  stroke-dasharray:14 16;
  animation:flow 1.15s linear infinite;
}
.conveyor-block{
  fill:rgba(56,189,248,.14);
  stroke:#38bdf8;
  stroke-width:2;
}
[data-conveyor-block] text{
  fill:var(--text);
  font-size:19px;
  font-weight:800;
}
.magnetic-region{
  fill:rgba(232,121,249,.07);
  stroke:rgba(232,121,249,.36);
  stroke-width:2;
}
.rail-wire{
  fill:none;
  stroke:rgba(203,213,225,.72);
  stroke-width:7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.rail-rod{
  stroke:#f59e0b;
  stroke-width:12;
  stroke-linecap:round;
  filter:drop-shadow(0 0 10px rgba(245,158,11,.26));
}
.field-symbols text{
  fill:rgba(232,121,249,.76);
  font-family:"Cambria Math",serif;
  font-size:27px;
}
.track-line{
  stroke-width:5;
}
.track-ticks line{
  stroke:rgba(203,213,225,.26);
  stroke-width:2;
}
.cart rect,
.mass-block rect{
  fill:rgba(248,250,252,.08);
  stroke:var(--tone-border);
  stroke-width:2;
}
.plank-body,
.slider-block rect{
  fill:rgba(248,250,252,.08);
  stroke:#f59e0b;
  stroke-width:2;
}
.plank-group circle{
  fill:rgba(15,23,42,.94);
  stroke:rgba(248,250,252,.55);
  stroke-width:2;
}
.slider-block rect{
  stroke:#38bdf8;
  filter:drop-shadow(0 0 10px rgba(56,189,248,.12));
}
.slider-block text{
  fill:var(--text);
  font-size:20px;
  font-weight:800;
}
.relative-line{
  stroke:rgba(248,250,252,.62);
  stroke-width:4;
  stroke-linecap:round;
  stroke-dasharray:8 8;
}
.cart-a rect,
.series-a,
.bar.series-a{
  stroke:#38bdf8;
}
.cart-b rect,
.series-b,
.bar.series-b{
  stroke:#fb7185;
}
.cart-main rect{
  stroke:#f59e0b;
}
.cart circle{
  fill:rgba(15,23,42,.94);
  stroke:rgba(248,250,252,.55);
  stroke-width:2;
}
.cart text,
.mass-block text{
  fill:var(--text);
  font-size:19px;
  font-weight:800;
}
.model-label-svg,
.vector-label{
  fill:var(--text);
  font-size:17px;
  font-weight:700;
}
.meeting-line,
.time-cursor,
.collision-wall{
  stroke:var(--tone);
  stroke-width:3;
  stroke-dasharray:8 10;
  opacity:.75;
}
.force-arrow{
  stroke:var(--tone);
  stroke-width:6;
  stroke-linecap:round;
  marker-end:none;
  filter:drop-shadow(0 0 8px var(--tone-bg));
}
.force-arrow.weight,
.force-arrow.friction{
  stroke:rgba(251,113,133,.9);
}
.force-arrow.tension{
  stroke:rgba(56,189,248,.95);
}
.force-arrow.applied{
  stroke:rgba(52,211,153,.95);
}
.pivot,
.ball{
  fill:var(--tone);
  stroke:rgba(248,250,252,.78);
  stroke-width:2;
  filter:drop-shadow(0 0 10px var(--tone-bg));
}
.angle-arc{
  fill:none;
  stroke:var(--tone);
  stroke-width:4;
  stroke-linecap:round;
}
.dual-chart{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.mini-chart{
  width:100%;
  min-height:220px;
  display:block;
}
.projectile-lab,
.conveyor-lab,
.particle-lab{
  border-top:1px solid var(--line);
  padding-top:42px;
  margin-top:40px;
}
.series-a{
  stroke:#38bdf8;
}
.series-b{
  stroke:#fb7185;
}
.series-b-dot{
  stroke:#fb7185;
}
.track-path{
  stroke:var(--tone);
  stroke-width:7;
}
.energy-ground{
  fill:none;
  stroke:rgba(203,213,225,.48);
  stroke-width:5;
  stroke-linecap:round;
}
.work-block{
  fill:rgba(52,211,153,.14);
  stroke:#34d399;
  stroke-width:2;
}
[data-work-block] text{
  fill:var(--text);
  font-size:17px;
  font-weight:800;
}
.height-line{
  stroke:rgba(248,250,252,.32);
  stroke-width:3;
  stroke-dasharray:8 10;
}
.bar-bg{
  fill:rgba(248,250,252,.08);
  stroke:rgba(248,250,252,.18);
}
.bar{
  fill:var(--tone);
  stroke:none;
}
.bar.potential{
  fill:#34d399;
}
.bar.kinetic{
  fill:#38bdf8;
}
.energy-bars text,
[data-momentum-bars] text{
  fill:var(--muted);
  font-size:14px;
}
.wire{
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:7;
}
.wire.base{
  stroke:rgba(203,213,225,.52);
}
.wire.flow{
  stroke:url(#wireGlow);
  stroke-dasharray:16 18;
  opacity:.7;
  filter:drop-shadow(0 0 8px rgba(232,121,249,.32));
  animation:flow 1.25s linear infinite;
}
.circuit-svg.is-open .wire.flow{
  opacity:0;
  animation-play-state:paused;
}
.terminal-points circle{
  fill:var(--tone);
  stroke:rgba(248,250,252,.78);
  stroke-width:2;
  filter:drop-shadow(0 0 8px var(--tone-bg));
}
.battery line,
.inner-resistor path,
.load-resistor path,
.switch line,
.volt-lead{
  fill:none;
  stroke:rgba(248,250,252,.72);
  stroke-width:5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.battery text,
.inner-resistor text,
.load-resistor text,
.switch text,
.mode-label{
  fill:var(--muted);
  font-size:16px;
}
.battery rect,
.inner-resistor rect{
  fill:rgba(15,23,42,.92);
  stroke:rgba(226,232,240,.24);
  stroke-width:2;
}
.load-resistor rect{
  fill:rgba(232,121,249,.09);
  stroke:var(--tone-border);
  stroke-width:2;
}
.meter circle{
  fill:rgba(248,250,252,.08);
  stroke:rgba(248,250,252,.42);
  stroke-width:3;
}
.meter text{
  fill:var(--text);
  font-size:17px;
  font-weight:700;
}
.meter-scale{
  fill:none;
  stroke:rgba(248,250,252,.45);
  stroke-width:4;
}
.needle{
  stroke:var(--tone);
  stroke-width:5;
  stroke-linecap:round;
  transform-origin:58px 58px;
  transform:rotate(-42deg);
  transition:transform .35s cubic-bezier(.16,1,.3,1);
  filter:drop-shadow(0 0 7px var(--tone-bg));
}
.volt-lead{
  stroke:rgba(56,189,248,.48);
  stroke-width:3;
  stroke-dasharray:7 9;
}
.switch circle{
  fill:var(--tone);
  stroke:rgba(248,250,252,.76);
  stroke-width:2;
}
.switch line{
  transform-origin:590px 270px;
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.switch.is-closed line{
  transform:rotate(38.7deg);
}
.current-particles{
  fill:var(--tone);
  opacity:.98;
  filter:drop-shadow(0 0 10px var(--tone));
  transition:opacity .25s;
}
.current-particles circle:nth-child(2){
  fill:#38bdf8;
}
.current-particles circle:nth-child(3){
  fill:#f8fafc;
}
.circuit-svg.is-open .current-particles{
  opacity:0;
}
.lab-panel{
  padding:18px;
  display:grid;
  gap:20px;
  align-content:start;
}
.panel-section{
  display:grid;
  gap:12px;
}
.panel-title{
  color:var(--text);
  font-size:14px;
  font-weight:700;
}
.segmented{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
}
.segmented button{
  padding:0 10px;
  color:rgba(248,250,252,.7);
}
.segmented button.is-active{
  color:var(--text);
  border-color:var(--tone-border);
  background:var(--tone-bg);
}
.controls label{
  display:grid;
  gap:8px;
}
.controls label span{
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:rgba(248,250,252,.78);
  font-size:14px;
}
.controls output{
  color:var(--tone);
  font-weight:700;
}
.controls input[type=range]{
  width:100%;
  accent-color:var(--tone);
}
.control-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.control-row button{
  padding:0 12px;
}
.control-row .primary-action{
  border-color:var(--tone-border);
  background:var(--tone-bg);
  font-weight:700;
}
.hint{
  color:var(--muted);
  font-size:14px;
  line-height:1.7;
}
.lab-bottom{
  margin-top:18px;
  display:grid;
  grid-template-columns:minmax(280px,.85fr) minmax(360px,1.15fr);
  gap:18px;
}
.readout-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.readout-grid>div{
  min-height:86px;
  padding:15px;
}
.readout-grid span{
  display:block;
  color:var(--soft);
  font-size:13px;
  margin-bottom:9px;
}
.readout-grid strong{
  color:var(--text);
  font-size:24px;
}
.chart-card{
  padding:18px;
}
.chart-head small{
  color:var(--soft);
}
.ui-chart{
  width:100%;
  min-height:250px;
  display:block;
}
.grid-line{
  fill:none;
  stroke:rgba(226,232,240,.09);
  stroke-width:1;
}
.axis{
  fill:none;
  stroke:rgba(248,250,252,.46);
  stroke-width:2;
}
.trend{
  fill:none;
  stroke:var(--tone);
  stroke-width:4;
  stroke-linecap:round;
  filter:drop-shadow(0 0 8px var(--tone-bg));
  transition:d .25s,opacity .25s;
}
.trend.series-a{
  stroke:#38bdf8;
}
.trend.series-b{
  stroke:#fb7185;
}
.chart-dot{
  fill:var(--text);
  stroke:var(--tone);
  stroke-width:4;
  transition:cx .25s,cy .25s;
}
.record-dot{
  fill:rgba(232,121,249,.7);
  stroke:rgba(248,250,252,.72);
  stroke-width:2;
}
.ui-chart text{
  fill:var(--muted);
  font-size:14px;
}
.chart-note{
  fill:var(--text);
  font-weight:700;
}
@keyframes flow{
  to{stroke-dashoffset:-36}
}
@media(max-width:900px){
  .module-shell{width:min(100% - 32px,1180px)}
  .module-hero{
    grid-template-columns:1fr;
    min-height:auto;
    padding:70px 0 50px;
  }
  h1{font-size:48px}
  .submodule-grid,
  .induction-grid,
  .lab-heading,
  .lab-grid,
  .lab-bottom{grid-template-columns:1fr}
  .lab-stage{min-height:auto}
  .circuit-svg{min-height:360px}
  .induction-svg{min-height:340px}
  .model-svg{min-height:340px}
  .dual-chart{grid-template-columns:1fr}
}
@media(max-width:560px){
  h1{font-size:36px}
  .lead{font-size:16px}
  .picker-heading h2{font-size:30px}
  .submodule-card{min-height:auto;padding:18px}
  .submodule-card strong{font-size:25px}
  .submodule-card svg{min-height:140px}
  .induction-visual{padding:14px}
  .induction-visual svg{min-height:260px}
  .induction-stage{padding:14px}
  .induction-svg{min-height:260px}
  .model-svg{min-height:270px}
  .lab-heading h2{font-size:30px}
  .formula-card strong{font-size:24px}
  .segmented{grid-template-columns:1fr}
  .control-row,
  .readout-grid{grid-template-columns:1fr}
  .lab-stage,
  .lab-panel,
  .chart-card{padding:14px}
  .circuit-svg{min-height:260px}
  .mini-chart{min-height:190px}
}
@media(prefers-reduced-motion:reduce){
  .wire.flow{animation:none}
  .mini-current,
  .induction-loop,
  .induction-arrow{animation:none}
  .needle,
  .switch line,
  .chart-dot{transition:none}
  .conveyor-flow{animation:none}
}