:root{
  --navy:#1b3a63;
  --navy-dark:#10233c;
  --blue:#3d7fca;
  --blue-soft:#eaf3fc;
  --cyan:#52b9e9;
  --orange:#ff6b35;
  --orange-soft:#fff0e9;
  --red:#df4438;
  --red-soft:#fceded;
  --cream:#eef2f6;
  --white:#fff;
  --ink:#10233c;
  --muted:#637285;
  --green:#25866d;
  --green-soft:#e4f5ef;
  --line:rgba(27,58,99,.16);
  --shadow:0 22px 60px rgba(27,58,99,.12);
  --radius:24px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  min-width:320px;
  margin:0;
  color:var(--ink);
  background:#eef2f6;
  font-family:Calibri,"Segoe UI",system-ui,Arial,sans-serif;
  font-size:17px;
  line-height:1.55;
}
button,a,input,select{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.45}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{
  outline:4px solid rgba(61,127,202,.32);
  outline-offset:3px;
}
h1,h2,h3,p{overflow-wrap:break-word}
h1,h2,h3{font-family:"Trebuchet MS",Calibri,Arial,sans-serif}
main{overflow:hidden}

.topbar{
  position:sticky;
  top:0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:72px;
  padding:10px clamp(18px,4vw,64px);
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(16px);
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--ink);
  text-decoration:none;
}
.brand-mark{
  display:grid;
  width:46px;
  height:46px;
  place-items:center;
  border-radius:14px;
  color:#fff;
  background:var(--navy);
  font-weight:900;
  letter-spacing:.04em;
}
.brand strong,.brand small{display:block}
.brand strong{line-height:1.1}
.brand small{margin-top:3px;color:var(--muted);font-size:12px}
.topbar-tools{display:flex;align-items:center;gap:9px}
.time-badge,.quiet-link{
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--navy);
  background:#fff;
  font-size:13px;
  font-weight:800;
  text-decoration:none;
}
.quiet-link:hover{border-color:var(--blue);background:var(--blue-soft)}
.quiet-button,.back-button,.pause-button{
  min-height:42px;
  padding:8px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--navy);
  background:#fff;
  font-weight:800;
}
.quiet-button:hover,.back-button:hover,.pause-button:hover{border-color:var(--blue);background:var(--blue-soft)}

.hero{
  display:grid;
  grid-template-columns:minmax(320px,.85fr) minmax(500px,1.15fr);
  gap:clamp(24px,4vw,52px);
  align-items:center;
  width:min(1120px,calc(100% - 40px));
  min-height:520px;
  margin:0 auto;
  padding:40px 0 34px;
}
.eyebrow{
  margin:0 0 8px;
  color:var(--orange);
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
  line-height:1.35;
}
h1{
  margin:0;
  color:var(--ink);
  font-size:clamp(38px,4.6vw,58px);
  font-weight:900;
  letter-spacing:-.055em;
  line-height:.98;
}
h1 span{color:var(--blue)}
.hero-lead{
  max-width:630px;
  margin:24px 0;
  color:var(--muted);
  font-size:clamp(18px,2vw,21px);
}
.goal-row{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 26px}
.goal-row span{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 11px 8px 8px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  color:var(--navy);
  font-size:13px;
  font-weight:800;
}
.goal-row b{
  display:grid;
  width:25px;
  height:25px;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:var(--orange);
}
.primary-button,.listen-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:11px 19px;
  border:0;
  border-radius:14px;
  color:#fff;
  background:var(--navy);
  box-shadow:0 9px 24px rgba(27,58,99,.18);
  font-weight:900;
  text-decoration:none;
}
.primary-button:hover,.listen-button:hover{background:#244b7d;transform:translateY(-1px)}
.hero-start{min-height:56px;background:var(--orange);box-shadow:0 12px 28px rgba(255,107,53,.24)}
.hero-start:hover{background:#e85c2b}
.hero-visual{
  margin:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:15px;
  background:#fff;
  box-shadow:var(--shadow);
}
.hero-visual figcaption{
  display:flex;
  align-items:center;
  gap:9px;
  padding:14px 18px;
  color:#fff;
  background:var(--navy);
  font-size:12px;
  font-weight:900;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.status-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#4de1b4;
  box-shadow:0 0 0 5px rgba(77,225,180,.15);
}
.hero-exchange{
  display:grid;
  grid-template-columns:1fr .9fr 1fr;
  align-items:center;
  gap:20px;
  min-height:360px;
  padding:38px;
  background:
    linear-gradient(rgba(61,127,202,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(61,127,202,.05) 1px,transparent 1px),
    linear-gradient(145deg,#fff,var(--blue-soft));
  background-size:28px 28px,28px 28px,auto;
}
.hero-vessel{
  position:relative;
  display:flex;
  min-height:230px;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
  padding:24px 18px 28px;
  border:5px solid rgba(27,58,99,.64);
  border-top:0;
  border-radius:0 0 30px 30px;
  text-align:center;
}
.hero-vessel::before{
  content:"";
  position:absolute;
  inset:38px 6px 6px;
  z-index:0;
  border-radius:3px 3px 20px 20px;
  opacity:.9;
}
.hero-hot::before{background:linear-gradient(#ff9c71,#e43f31)}
.hero-cold::before{background:linear-gradient(#8bdcff,#2581c9)}
.hero-vessel b,.hero-vessel strong{position:relative;z-index:1;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.28)}
.hero-vessel b{font-size:12px;letter-spacing:.08em}
.hero-vessel strong{font-size:31px}
.water-surface{
  position:absolute;
  z-index:1;
  top:33px;
  left:7px;
  right:7px;
  height:12px;
  border-radius:50%;
  background:rgba(255,255,255,.5);
  animation:waterWave 2.4s ease-in-out infinite alternate;
}
.hero-transfer{position:relative;display:grid;min-height:110px;place-items:center}
.hero-transfer::before{
  content:"";
  position:absolute;
  left:5%;
  right:5%;
  top:50%;
  height:8px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--red),var(--orange),var(--blue));
}
.hero-transfer i{
  position:absolute;
  top:calc(50% - 7px);
  left:8%;
  width:22px;
  height:22px;
  border-radius:50%;
  background:#ffca50;
  box-shadow:0 0 18px rgba(255,156,40,.8);
  animation:heatTravel 3s linear infinite;
}
.hero-transfer i:nth-child(2){animation-delay:-.75s}
.hero-transfer i:nth-child(3){animation-delay:-1.5s}
.hero-transfer i:nth-child(4){animation-delay:-2.25s}
.hero-transfer span{
  position:relative;
  z-index:2;
  margin-top:68px;
  padding:5px 9px;
  border-radius:999px;
  color:#fff;
  background:var(--navy);
  font-size:10px;
  font-weight:900;
}
.hero-rule{margin:0;padding:16px 22px;color:var(--muted);background:#fff;font-size:14px}
.hero-rule b{color:var(--orange)}

.spiral-strip{
  display:grid;
  grid-template-columns:1fr auto 1.25fr;
  align-items:center;
  gap:18px;
  padding:24px max(20px,calc((100vw - 1240px)/2));
  border-block:1px solid var(--line);
  color:var(--ink);
  background:#fff;
}
.spiral-strip div{display:grid;gap:2px;padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:var(--cream)}
.spiral-strip div.active{border-color:rgba(61,127,202,.35);background:var(--blue-soft)}
.spiral-strip span{color:var(--orange);font-size:10px;font-weight:900;letter-spacing:.1em}
.spiral-strip b{font-size:17px}
.spiral-strip small{color:var(--muted)}
.spiral-strip>i{color:var(--orange);font-size:26px;font-style:normal}

.course-shell{
  scroll-margin-top:76px;
  width:min(1120px,calc(100% - 32px));
  margin:60px auto;
  padding:18px;
  border:1px solid var(--line);
  border-radius:15px;
  background:#fff;
  box-shadow:0 2px 10px rgba(27,58,99,.10);
}
.course-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:18px;
}
.course-head h2{margin:0;font-size:clamp(28px,3vw,42px);line-height:1}
.course-progress{width:min(330px,38vw);color:var(--muted);font-size:12px;font-weight:900;text-align:right}
.progress-track{height:8px;margin-top:8px;overflow:hidden;border-radius:999px;background:#dce5ef}
.progress-track i{display:block;width:8.33%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--orange),var(--blue));transition:width .35s ease}
.stepper{
  display:grid;
  grid-template-columns:repeat(12,minmax(70px,1fr));
  gap:6px;
  margin-bottom:12px;
  overflow-x:auto;
  padding:2px 2px 8px;
}
.stepper button{
  display:grid;
  min-height:58px;
  place-items:center;
  padding:6px 4px;
  border:1px solid var(--line);
  border-radius:11px;
  color:var(--muted);
  background:#fff;
  font-size:10px;
  font-weight:900;
}
.stepper button span{
  display:grid;
  width:23px;
  height:23px;
  place-items:center;
  border-radius:50%;
  color:var(--navy);
  background:var(--blue-soft);
}
.stepper button.active{border-color:var(--orange);color:var(--navy);background:var(--orange-soft)}
.stepper button.active span{color:#fff;background:var(--orange)}
.stepper button.done span{color:#fff;background:var(--green)}
.lesson-card{
  display:grid;
  grid-template-rows:auto minmax(390px,1fr) auto;
  min-height:min(690px,calc(100vh - 106px));
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:24px;
  background:#fff;
}
.lesson-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:22px;
  padding:18px 22px 14px;
  border-bottom:1px solid var(--line);
}
.lesson-heading h2{margin:0;font-size:clamp(26px,3vw,39px);letter-spacing:-.035em;line-height:1.05}
.lesson-intro{max-width:900px;margin:7px 0 0;color:var(--muted);font-size:15px}
.speech-panel{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.listen-button{min-height:42px;padding:8px 14px}
.voice-control{
  display:flex;
  align-items:center;
  gap:5px;
  color:var(--muted);
  font-size:11px;
  font-weight:900;
}
.voice-control select{
  width:150px;
  min-height:42px;
  padding:7px 26px 7px 9px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--navy);
  background:#fff;
  font:inherit;
  text-overflow:ellipsis;
}
.rate-control{display:flex;align-items:center;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:#fff}
.rate-control button{width:34px;height:40px;border:0;color:var(--navy);background:#fff;font-weight:900}
.rate-control span{min-width:50px;text-align:center;font-size:12px;font-weight:900}
.lesson-zone{display:grid;align-items:stretch;min-height:0;padding:16px 22px}
.lesson-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:11px 18px;
  border-top:1px solid var(--line);
}
.lesson-nav>span{color:var(--muted);font-size:13px;font-weight:900}
.speech-warning{margin:0;padding:8px 20px;color:#8b2c2c;background:var(--red-soft);font-size:13px}

.two-column{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;min-height:0}
.recap-cards{display:grid;align-content:center;gap:12px}
.knowledge-card{padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--blue-soft)}
.knowledge-card.accent{background:var(--orange-soft)}
.knowledge-card span,.mini-kicker{color:var(--blue);font-size:10px;font-weight:900;letter-spacing:.1em}
.knowledge-card.accent span{color:var(--orange)}
.knowledge-card h3{margin:4px 0 6px;font-size:22px}
.knowledge-card p{margin:0;color:var(--muted);font-size:14px}
.mass-reminder{padding:13px 16px;border-left:5px solid var(--green);border-radius:12px;background:var(--green-soft)}
.mass-reminder b,.mass-reminder small{display:block}
.mass-reminder small{margin-top:3px;color:var(--muted)}

.circuit-board{
  position:relative;
  min-height:460px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:18px;
  background:
    linear-gradient(rgba(27,58,99,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(27,58,99,.035) 1px,transparent 1px),
    #fbfcfd;
  background-size:28px 28px;
}
.circuit-lines{position:absolute;inset:0;z-index:1;width:100%;height:100%;overflow:visible}
.circuit-path{
  fill:none;
  stroke-width:16;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.circuit-red{stroke:var(--red)}
.circuit-orange{stroke:#f28a16}
.circuit-blue{stroke:#1769aa}
.circuit-cyan{stroke:var(--cyan)}
.circuit-flow{
  fill:none;
  stroke:#fff;
  stroke-width:4;
  stroke-linecap:round;
  stroke-dasharray:1 22;
  vector-effect:non-scaling-stroke;
  animation:circuitFlow 1.15s linear infinite;
}
@keyframes circuitFlow{to{stroke-dashoffset:-23}}
.circuit-organ{
  position:absolute;
  z-index:3;
  display:grid;
  width:150px;
  min-height:98px;
  place-items:center;
  padding:8px;
  border:1px solid var(--line);
  border-radius:16px;
  color:var(--ink);
  background:#fff;
  box-shadow:0 9px 22px rgba(27,58,99,.12);
  text-align:center;
}
button.circuit-organ{appearance:none}
.circuit-organ img{width:66px;height:48px;object-fit:contain}
.circuit-organ b{font-size:12px}.circuit-organ small{color:var(--muted);font-size:9px;font-weight:700;line-height:1.25}
.organ-top{top:13px;left:50%;transform:translateX(-50%)}
.organ-right{top:50%;right:13px;transform:translateY(-50%)}
.organ-bottom{bottom:13px;left:50%;transform:translateX(-50%)}
.organ-left{top:50%;left:13px;transform:translateY(-50%)}
.interactive .circuit-organ:hover,.interactive .circuit-organ.active{border-color:var(--orange);background:var(--orange-soft);transform:translateY(-50%) scale(1.03)}
.interactive .organ-top:hover,.interactive .organ-top.active{transform:translateX(-50%) scale(1.03)}
.interactive .organ-bottom:hover,.interactive .organ-bottom.active{transform:translateX(-50%) scale(1.03)}
.thermal-tag{position:absolute;z-index:2;display:grid;max-width:150px;padding:6px 9px;border-radius:9px;color:#fff;font-size:9px;line-height:1.25;text-align:center}
.thermal-tag b{font-size:10px}.tag-red{top:16%;right:24%;background:var(--red)}.tag-orange{top:16%;left:23%;background:#e77f0d}.tag-blue{bottom:16%;left:23%;background:#1769aa}.tag-cyan{right:24%;bottom:16%;background:#2898cd}

.definition-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr auto;gap:12px}
.definition-card{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;gap:10px 15px;overflow:hidden;padding:22px;border:1px solid var(--line);border-radius:22px}
.definition-card>p{grid-column:1/-1;margin:0;max-width:80%;color:var(--muted)}
.temperature-card{background:linear-gradient(135deg,#fff,var(--red-soft))}
.heat-card{background:linear-gradient(135deg,#fff,var(--orange-soft))}
.power-definition-card{background:linear-gradient(135deg,#fff,var(--blue-soft))}
.power-definition-card .definition-icon{font-size:24px}
.definition-icon{display:grid;width:58px;height:58px;place-items:center;border-radius:18px;color:#fff;background:var(--navy);font-size:30px;font-weight:900}
.definition-card h3{margin:2px 0;font-size:25px}
.thermometer{position:absolute;right:24px;bottom:20px;width:28px;height:140px;border:4px solid var(--navy);border-radius:18px;background:#fff}
.thermometer::after{content:"";position:absolute;left:50%;bottom:-12px;width:42px;height:42px;transform:translateX(-50%);border:4px solid var(--navy);border-radius:50%;background:var(--red)}
.thermometer i{position:absolute;right:5px;bottom:5px;left:5px;height:85%;border-radius:999px;background:linear-gradient(var(--red),#ffb26b)}
.thermometer b,.thermometer small{position:absolute;right:38px;width:58px;font-size:11px;text-align:right}.thermometer b{top:4px}.thermometer small{bottom:4px}
.energy-packets{position:absolute;right:22px;bottom:24px;width:110px;height:100px}
.energy-packets i{position:absolute;width:25px;height:25px;border-radius:50%;background:#ffbd45;box-shadow:0 0 16px rgba(255,153,35,.55);animation:energyFloat 2.4s ease-in-out infinite}
.energy-packets i:nth-child(1){top:5px;left:5px}.energy-packets i:nth-child(2){top:17px;right:8px;animation-delay:-.4s}.energy-packets i:nth-child(3){top:48px;left:38px;animation-delay:-.8s}.energy-packets i:nth-child(4){bottom:0;left:2px;animation-delay:-1.2s}.energy-packets i:nth-child(5){right:0;bottom:4px;animation-delay:-1.6s}
.professional-rule{grid-column:1/-1;display:flex;align-items:center;gap:18px;padding:13px 18px;border-left:6px solid var(--orange);border-radius:12px;background:var(--orange-soft)}
.professional-rule b{color:var(--orange)}.professional-rule p{flex:1;margin:0}.professional-rule span{padding:6px 10px;border-radius:999px;color:#fff;background:var(--navy);font-size:11px;font-weight:900}

.water-lab{position:relative;display:grid;grid-template-columns:1fr .9fr 1fr;align-items:center;gap:24px;padding:18px 40px 112px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(145deg,#fff,var(--blue-soft))}
.water-side{display:grid;place-items:center;gap:5px}.water-side p,.water-side small{margin:0;color:var(--muted)}.water-side strong{font-size:30px}
.beaker{position:relative;width:170px;height:190px;overflow:hidden;border:7px solid var(--navy);border-top:0;border-radius:0 0 28px 28px;background:#fff}
.beaker>span{position:absolute;inset:35px 5px 5px;border-radius:4px 4px 18px 18px}
.hot-side .beaker>span{background:linear-gradient(#ff9970,#e33d32)}.cold-side .beaker>span{background:linear-gradient(#91ddff,#2f83c7)}
.water-wave{position:absolute;z-index:2;top:28px;left:6px;right:6px;height:15px;border-radius:50%;background:rgba(255,255,255,.5);animation:waterWave 1.8s ease-in-out infinite alternate}
.heat-bridge{display:grid;place-items:center;gap:8px;text-align:center}.heat-bridge>b{font-size:12px}.heat-bridge>span{color:var(--muted);font-size:12px}
.heat-particles{position:relative;width:100%;height:38px;border-radius:999px;background:linear-gradient(90deg,var(--red),var(--orange),var(--blue))}
.heat-particles i{position:absolute;top:8px;left:5%;width:22px;height:22px;border-radius:50%;background:#fff1a4;box-shadow:0 0 14px #ffb53f;animation:heatTravel 3s linear infinite}
.heat-particles i:nth-child(2){animation-delay:-.6s}.heat-particles i:nth-child(3){animation-delay:-1.2s}.heat-particles i:nth-child(4){animation-delay:-1.8s}.heat-particles i:nth-child(5){animation-delay:-2.4s}
.at-equilibrium .heat-particles i{animation-play-state:paused;opacity:.25}
.lab-rule{position:absolute;right:30px;bottom:57px;left:30px;display:flex;align-items:center;justify-content:center;gap:18px;padding:8px 15px;border-radius:12px;background:#fff}.lab-rule b{color:var(--green)}.lab-rule span{color:var(--muted);font-size:12px}
.equilibrium-equation{position:absolute;right:30px;bottom:14px;left:30px;display:flex;align-items:center;justify-content:center;gap:18px;padding:8px 15px;border-left:5px solid var(--navy);border-radius:10px;background:#f1f5f8}
.equilibrium-equation b{color:var(--navy);font-size:17px}.equilibrium-equation span{color:var(--muted);font-size:12px}

.formula-layout{display:grid;grid-template-columns:.82fr 1.18fr;grid-template-rows:1fr auto;gap:15px}
.formula-hero{display:grid;place-items:center;padding:28px;border-radius:22px;color:#fff;background:linear-gradient(145deg,var(--navy),#285a8f);text-align:center}
.formula-hero p{margin:0;color:#8fdcff;font-size:11px;font-weight:900;letter-spacing:.12em}
.formula{display:flex;align-items:center;gap:14px;margin:18px 0}.formula strong{font-size:clamp(38px,5vw,66px)}.formula i{color:var(--orange);font-size:30px;font-style:normal;font-weight:900}.formula-hero small{opacity:.75}
.variable-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.variable-grid article{display:grid;align-content:center;gap:7px;padding:17px;border:1px solid var(--line);border-radius:18px;background:#fff}
.variable-grid article>span{display:grid;width:46px;height:46px;place-items:center;border-radius:14px;color:#fff;background:var(--orange);font-size:23px;font-weight:900}
.variable-grid b{font-size:17px}.variable-grid p{margin:0;color:var(--muted);font-size:13px}.variable-grid small{color:var(--blue);font-size:11px;font-weight:900}
.sensible-line{grid-column:1/-1;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:14px;border-radius:16px;background:var(--orange-soft);text-align:center;font-weight:900}
.sensible-line i{position:relative;width:180px;height:9px;border-radius:999px;background:linear-gradient(90deg,var(--blue),var(--red))}.sensible-line i::after{content:"→";position:absolute;right:-6px;top:-19px;color:var(--red);font-size:27px}.sensible-line i b{position:absolute;top:-27px;left:50%;transform:translateX(-50%);color:var(--orange);font-size:12px;white-space:nowrap}.sensible-line small{grid-column:1/-1;color:var(--muted);font-weight:400}

.calculator-layout{display:grid;grid-template-columns:1.1fr .9fr;grid-template-rows:1fr auto;gap:15px}
.calculator-panel,.power-panel{display:grid;align-content:center;gap:12px;padding:20px;border:1px solid var(--line);border-radius:20px;background:var(--blue-soft)}
.calculator-panel label,.power-panel label{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--navy);font-size:13px;font-weight:900}
.calculator-panel label>span,.power-panel label>span{display:flex;align-items:center;gap:6px}
input[type="number"],select{min-height:42px;border:1px solid var(--line);border-radius:10px;color:var(--ink);background:#fff;font-weight:700}
input[type="number"]{width:110px;padding:7px 9px}select{width:100%;padding:7px 10px}
.calculator-panel>label:first-child{display:grid;gap:6px}
.input-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}.input-pair label{display:grid;gap:6px;justify-items:start}.input-pair label span{width:100%;justify-content:space-between}.input-pair input{width:100%}
.calculation-result{display:grid;align-content:center;place-items:center;padding:24px;border-radius:20px;color:#fff;background:linear-gradient(145deg,var(--navy),#2d659b);text-align:center}
.calculation-result p{margin:0;color:#8bdcff;font-size:11px;font-weight:900;letter-spacing:.12em}.calculation-result strong{font-size:clamp(42px,6vw,72px);line-height:1.1}.calculation-result span{font-weight:900}.calculation-result div{margin-top:16px;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.12);font-size:13px}
.calculation-warning{grid-column:1/-1;display:flex;align-items:center;gap:16px;padding:12px 16px;border-left:6px solid var(--orange);border-radius:12px;background:var(--orange-soft)}.calculation-warning b{color:var(--orange)}.calculation-warning span{color:var(--muted);font-size:13px}

.power-layout{display:grid;grid-template-columns:.85fr 1.15fr;grid-template-rows:1fr auto;gap:15px}
.power-formula{display:grid;align-content:center;justify-items:center;padding:24px;border-radius:20px;color:#fff;background:var(--navy)}
.power-formula>p{margin:0;color:#8bdcff;font-size:11px;font-weight:900;letter-spacing:.12em}
.formula.compact{gap:9px;margin:14px 0}.formula.compact strong{font-size:clamp(30px,4vw,51px)}.formula.compact i{font-size:23px}
.unit-chain{display:flex;align-items:center;gap:6px;font-size:11px}.unit-chain i{color:var(--orange);font-style:normal;font-weight:900}
.power-panel{background:#fff}
.power-result{grid-column:1/-1;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:14px 20px;border-radius:16px;background:var(--green-soft)}
.power-result span{font-weight:900}.power-result strong{color:var(--green);font-size:34px}.power-result small{text-align:right;color:var(--muted)}

.latent-layout{display:grid;grid-template-columns:1.18fr .62fr 1fr;grid-template-rows:1fr auto auto;gap:10px}
.latent-curve{display:grid;align-content:center;margin:0;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:#fff}
.latent-curve img{display:block;width:100%;max-height:285px;object-fit:contain}
.latent-curve figcaption{padding:6px 10px;border-top:1px solid var(--line);color:var(--muted);font-size:9px;line-height:1.3}
.phase-demonstrator{position:relative;display:grid;place-items:center;overflow:hidden;border-radius:22px;background:linear-gradient(145deg,var(--blue-soft),#fff)}
.phase-vessel{position:relative;width:190px;height:210px;overflow:hidden;border:7px solid var(--navy);border-top:0;border-radius:0 0 30px 30px;background:#fff}
.phase-vessel strong{position:absolute;z-index:5;top:15px;left:50%;transform:translateX(-50%);padding:5px 9px;border-radius:999px;color:#fff;background:var(--navy);white-space:nowrap}
.phase-liquid{position:absolute;right:5px;bottom:5px;left:5px;height:75%;border-radius:4px 4px 20px 20px;background:linear-gradient(#61c8f4,#247fbe);transition:height .4s ease,opacity .4s ease}
.phase-bubbles{position:absolute;inset:40px 12px 12px;z-index:2;opacity:0;background:radial-gradient(circle at 25% 80%,#fff 0 5px,transparent 6px),radial-gradient(circle at 65% 65%,#fff 0 8px,transparent 9px),radial-gradient(circle at 45% 35%,#fff 0 6px,transparent 7px);animation:bubblesRise 2s linear infinite}
.phase-vapor{position:absolute;inset:8px;z-index:3;opacity:0;background:radial-gradient(ellipse at 50% 30%,rgba(255,255,255,.9),transparent 55%);animation:vaporPulse 2s ease-in-out infinite}
.phase-vessel[data-phase="boiling"] .phase-liquid{height:52%}.phase-vessel[data-phase="boiling"] .phase-bubbles{opacity:1}.phase-vessel[data-phase="vapor"] .phase-liquid{height:0;opacity:0}.phase-vessel[data-phase="vapor"] .phase-vapor{opacity:1}
.heater{position:absolute;bottom:15px;display:grid;place-items:center;gap:2px;color:var(--orange);font-size:10px;font-weight:900}.heater i{width:120px;height:12px;border-radius:999px;background:var(--orange);box-shadow:0 0 20px rgba(255,107,53,.65);animation:heaterPulse 1.3s ease-in-out infinite}
.phase-explanation{display:grid;align-content:center;gap:14px;padding:22px;border:1px solid var(--line);border-radius:22px;background:#fff}
.phase-track{position:relative;display:grid;grid-template-columns:35fr 40fr 25fr;min-height:84px;overflow:hidden;border-radius:15px;color:#fff;text-align:center;font-size:11px;font-weight:900}
.phase-track span{display:grid;place-items:center;padding:8px}.phase-track small{font-weight:400}.track-sensible{background:var(--blue)}.track-latent{background:var(--orange)}.track-superheat{background:var(--red)}
.phase-track>i{position:absolute;top:0;bottom:0;left:0;width:5px;transform:translateX(-50%);background:#fff;box-shadow:0 0 0 4px var(--navy),0 0 15px rgba(0,0,0,.4)}
input[type="range"]{width:100%;accent-color:var(--orange)}
.phase-status{padding:13px 15px;border-radius:14px;background:var(--blue-soft)}.phase-status p{margin:0 0 3px;font-weight:900}.phase-status span{color:var(--muted);font-size:13px}
.phase-explanation>.pause-button{justify-self:start}
.latent-formula-strip{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.latent-formula-strip>div{display:grid;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fff}
.latent-formula-strip small{color:var(--orange);font-size:9px;font-weight:900;letter-spacing:.08em}
.latent-formula-strip b{color:var(--navy);font-size:16px}
.latent-formula-strip span{color:var(--muted);font-size:10px;line-height:1.3}
.pressure-note{grid-column:1/-1;display:flex;align-items:center;gap:18px;padding:11px 16px;border-left:6px solid var(--orange);border-radius:12px;background:var(--orange-soft)}.pressure-note b{color:var(--orange)}.pressure-note span{color:var(--muted);font-size:13px}

.exchanger-layout{position:relative;display:grid;grid-template-columns:1fr 1.2fr 1fr;grid-template-rows:auto 1fr auto;align-items:center;gap:13px 20px;padding:16px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(145deg,#fff,var(--blue-soft))}
.air-stream{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.4fr 1fr;align-items:center;gap:14px}
.air-label{padding:7px 10px;border-radius:10px;background:#fff;font-size:12px;font-weight:900;text-align:center}.evaporator .air-label.in{color:var(--orange)}.evaporator .air-label.out{color:var(--blue)}.condenser .air-label.in{color:var(--blue)}.condenser .air-label.out{color:var(--red)}
.air-arrows{display:flex;align-items:center;justify-content:space-around;height:22px;border-radius:999px}.evaporator .air-arrows{color:#fff;background:linear-gradient(90deg,var(--orange),var(--blue))}.condenser .air-arrows{color:#fff;background:linear-gradient(90deg,var(--blue),var(--red))}
.air-arrows i{font-style:normal;font-weight:900;animation:airMove 1.4s linear infinite}.air-arrows i:nth-child(2){animation-delay:-.35s}.air-arrows i:nth-child(3){animation-delay:-.7s}.air-arrows i:nth-child(4){animation-delay:-1.05s}
.exchanger{grid-column:2;display:grid;grid-template-columns:90px 1fr;align-items:center;gap:10px;padding:15px;border:2px solid var(--navy);border-radius:18px;background:#fff}.exchanger>b{grid-column:1/-1;text-align:center;font-size:13px;letter-spacing:.08em}
.fan{position:relative;width:80px;height:80px;border:5px solid var(--navy);border-radius:50%;animation:fanSpin 2.4s linear infinite}.fan::after{content:"";position:absolute;inset:31px;border-radius:50%;background:var(--navy)}.fan i{position:absolute;top:34px;left:8px;width:64px;height:12px;border-radius:100%;background:var(--blue);transform-origin:center}.fan i:nth-child(2){transform:rotate(60deg)}.fan i:nth-child(3){transform:rotate(120deg)}
.battery{display:grid;gap:5px}.battery i{height:8px;border-radius:999px;background:repeating-linear-gradient(90deg,var(--navy) 0 4px,#8fb2d0 4px 8px)}
.refrigerant-stream{display:grid;align-content:center;gap:8px}.refrigerant-stream span{padding:8px;border-radius:10px;background:#fff;font-size:11px;font-weight:900;text-align:center}
.refrigerant-line{position:relative;height:16px;overflow:hidden;border-radius:999px}.evaporator .refrigerant-line{background:linear-gradient(90deg,#1769aa,var(--cyan))}.condenser .refrigerant-line{background:linear-gradient(90deg,var(--red),#f28a16)}
.refrigerant-line i{position:absolute;top:4px;left:0;width:8px;height:8px;border-radius:50%;background:#fff;animation:refrigerantMove 3s linear infinite}.refrigerant-line i:nth-child(2){animation-delay:-.75s}.refrigerant-line i:nth-child(3){animation-delay:-1.5s}.refrigerant-line i:nth-child(4){animation-delay:-2.25s}
.heat-direction{display:grid;place-items:center;gap:5px;text-align:center}.heat-direction::before{content:"⇄";color:var(--orange);font-size:54px;line-height:1;animation:heatDirection 1.8s ease-in-out infinite}.heat-direction b{font-size:11px}.heat-direction span{color:var(--muted);font-size:12px}
.phase-zones{grid-column:1/-1;display:flex;min-height:65px;overflow:hidden;border-radius:14px;color:#fff;text-align:center}.phase-zones span{display:grid;flex:1;place-items:center;padding:9px;font-size:11px}.phase-zones b{display:block;font-size:12px}.phase-zones .latent-zone{flex:2;background:var(--orange)}.phase-zones .sensible-zone{background:var(--blue)}.condenser .phase-zones .sensible-zone:last-child{background:var(--green)}
.exchange-technical{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.exchange-technical>div{display:grid;gap:2px;padding:9px 11px;border:1px solid var(--line);border-radius:11px;background:#fff}
.exchange-technical small{color:var(--orange);font-size:8px;font-weight:900;letter-spacing:.08em}
.exchange-technical b{color:var(--navy);font-size:12px}
.exchange-technical span{color:var(--muted);font-size:9px;line-height:1.3}

.balance-layout{display:grid;align-content:center;gap:18px}
.balance-equation{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:14px}
.balance-equation>i{color:var(--orange);font-size:35px;font-style:normal;font-weight:900}
.balance-card{display:grid;gap:5px;padding:18px;border:1px solid var(--line);border-radius:19px;background:#fff;text-align:center}.balance-card span{font-size:11px;font-weight:900;letter-spacing:.08em}.balance-card strong{font-size:33px}.balance-card small{color:var(--muted)}.balance-card.evap{border-top:8px solid var(--blue)}.balance-card.comp{border-top:8px solid var(--orange)}.balance-card.cond{border-top:8px solid var(--red);background:var(--red-soft)}
.balance-bar{display:flex;height:52px;overflow:hidden;border-radius:14px;color:#fff}.balance-bar span{display:grid;place-items:center;transition:width .3s ease}.balance-bar span:first-child{width:80.6%;background:var(--blue)}.balance-bar span:last-child{width:19.4%;background:var(--orange)}
.balance-rule{margin:0;padding:12px;border-radius:12px;background:var(--navy);color:#fff;font-size:19px;font-weight:900;text-align:center}
.balance-vocabulary{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.balance-vocabulary span{padding:10px 13px;border-left:5px solid var(--blue);border-radius:10px;background:var(--blue-soft);color:var(--muted);font-size:11px;line-height:1.35}
.balance-vocabulary span:last-child{border-left-color:var(--orange);background:var(--orange-soft)}
.balance-vocabulary b{display:block;color:var(--navy);font-size:12px}

.synthesis-layout{display:grid;grid-template-columns:1.18fr .82fr;gap:18px}.synthesis-panel{display:grid;align-content:center;gap:10px;padding:24px;border-left:7px solid var(--orange);border-radius:20px;background:var(--orange-soft)}.synthesis-panel>span{justify-self:start;padding:6px 9px;border-radius:999px;color:#fff;background:var(--navy);font-size:10px;font-weight:900;letter-spacing:.07em}.synthesis-panel h3{margin:0;font-size:31px}.synthesis-panel p{margin:0;color:var(--muted)}.synthesis-panel small{margin-top:10px;color:var(--blue);font-weight:900}
.synthesis-state{padding:10px 12px;border-radius:10px;background:#fff;color:var(--navy);font-size:12px;line-height:1.35}

.quiz-shell{display:grid;align-content:center;max-width:980px;width:100%;margin:auto}
.quiz-progress{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;font-weight:900}.quiz-shell>h3{margin:12px 0 16px;font-size:clamp(23px,3vw,34px);line-height:1.15}
.quiz-answers{display:grid;gap:9px}.quiz-answers button{display:flex;align-items:center;gap:13px;min-height:55px;padding:10px 14px;border:1px solid var(--line);border-radius:14px;color:var(--ink);background:#fff;text-align:left;font-weight:800}.quiz-answers button:hover:not(:disabled){border-color:var(--blue);background:var(--blue-soft)}.quiz-answers button span{display:grid;width:31px;height:31px;flex:0 0 auto;place-items:center;border-radius:9px;color:#fff;background:var(--navy)}.quiz-answers button.correct{border-color:var(--green);background:var(--green-soft)}.quiz-answers button.wrong{border-color:var(--red);background:var(--red-soft)}
.quiz-feedback{margin-top:12px;padding:10px 13px;border-radius:11px;font-size:13px}.quiz-feedback.correct{background:var(--green-soft)}.quiz-feedback.wrong{background:var(--red-soft)}.quiz-next{justify-self:end;margin-top:10px}
.quiz-finish{display:grid;place-items:center;gap:10px;padding:34px;border-radius:22px;background:var(--orange-soft);text-align:center}.quiz-finish.success{background:var(--green-soft)}.quiz-finish>span{font-size:11px;font-weight:900;letter-spacing:.1em}.quiz-finish>strong{font-size:64px}.quiz-finish h3{margin:0}

.takeaway{width:min(1240px,calc(100% - 40px));margin:70px auto;padding:40px;border-radius:30px;color:#fff;background:var(--navy);box-shadow:var(--shadow)}
.takeaway h2{max-width:800px;margin:0 0 24px;font-size:clamp(30px,4vw,50px);line-height:1.05}.takeaway-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.takeaway-grid>div{display:grid;gap:6px;padding:17px;border:1px solid rgba(255,255,255,.15);border-radius:16px;background:rgba(255,255,255,.06)}.takeaway-grid span{display:grid;width:30px;height:30px;place-items:center;border-radius:50%;background:var(--orange);font-weight:900}.takeaway-grid small{opacity:.74}.takeaway-actions{display:flex;gap:10px;margin-top:20px}.takeaway .quiet-button{color:var(--navy)}
.page-footer{display:flex;justify-content:space-between;gap:20px;padding:22px max(20px,calc((100vw - 1240px)/2));border-top:1px solid var(--line);color:var(--muted);font-size:12px}

@keyframes heatTravel{from{left:5%}to{left:82%}}
@keyframes waterWave{from{transform:translateY(-3px) scaleX(.98)}to{transform:translateY(3px) scaleX(1.02)}}
@keyframes arrowPulse{0%,100%{opacity:.35;transform:translateX(-4px)}50%{opacity:1;transform:translateX(4px)}}
@keyframes energyFloat{0%,100%{transform:translateY(-4px) scale(.9)}50%{transform:translateY(5px) scale(1.08)}}
@keyframes bubblesRise{from{transform:translateY(18px)}to{transform:translateY(-18px)}}
@keyframes vaporPulse{from{transform:translateY(5px);opacity:.5}to{transform:translateY(-4px);opacity:1}}
@keyframes heaterPulse{from{opacity:.55;transform:scaleX(.9)}to{opacity:1;transform:scaleX(1.06)}}
@keyframes airMove{0%,100%{opacity:.35;transform:translateX(-5px)}50%{opacity:1;transform:translateX(5px)}}
@keyframes fanSpin{to{transform:rotate(360deg)}}
@keyframes refrigerantMove{from{left:-3%}to{left:103%}}
@keyframes heatDirection{0%,100%{transform:scale(.9);opacity:.6}50%{transform:scale(1.1);opacity:1}}

@media (max-width:1050px){
  .hero{grid-template-columns:1fr;padding-top:42px}.hero-visual{max-width:780px}.spiral-strip{grid-template-columns:1fr}.spiral-strip>i{display:none}
  .stepper{grid-template-columns:repeat(12,92px)}
  .two-column,.synthesis-layout{grid-template-columns:1fr}.circuit-board{min-height:430px}
  .formula-layout,.calculator-layout,.power-layout,.latent-layout{grid-template-columns:1fr}.formula-hero{min-height:210px}
  .calculation-warning,.pressure-note,.power-result{grid-column:1}
  .lesson-card{min-height:auto}.lesson-zone{min-height:440px}
}

@media (max-width:760px){
  body{font-size:15px}.topbar{position:relative;align-items:flex-start}.brand small,.time-badge{display:none}.topbar-tools{flex-wrap:wrap;justify-content:flex-end}.quiet-link{font-size:11px}
  .hero{width:min(100% - 24px,680px);min-height:auto;padding:38px 0}.hero-exchange{grid-template-columns:1fr;min-height:auto}.hero-transfer{min-height:90px}.hero-transfer::before{left:20%;right:20%}.hero-vessel{width:230px;min-height:180px;justify-self:center}
  .course-shell{width:calc(100% - 14px);margin:30px auto;padding:8px;border-radius:20px}.course-head{padding:10px}.course-progress{width:42%}.lesson-heading{display:grid;padding:15px}.speech-panel{flex-wrap:wrap}.lesson-zone{padding:12px;min-height:520px}.lesson-card{grid-template-rows:auto auto auto}
  .definition-grid,.variable-grid,.water-lab,.exchanger-layout,.balance-equation,.takeaway-grid{grid-template-columns:1fr}.definition-grid{grid-template-rows:auto}.professional-rule{grid-column:1}.definition-card>p{max-width:70%}
  .water-lab{padding:20px 18px 80px}.heat-particles{width:230px}.lab-rule{display:grid;text-align:center}
  .formula-layout{grid-template-columns:1fr}.variable-grid{grid-template-columns:1fr 1fr}.sensible-line{grid-column:1}
  .power-result{grid-template-columns:1fr;text-align:center}.power-result small{text-align:center}
  .exchanger-layout{grid-template-rows:auto}.air-stream,.phase-zones{grid-column:1}.exchanger{grid-column:1}.heat-direction{padding:8px}.refrigerant-stream{grid-column:1}
  .balance-equation>i{transform:rotate(90deg);text-align:center}.balance-card{width:100%}
  .takeaway{width:calc(100% - 20px);margin:34px auto;padding:24px}.takeaway-grid{grid-template-columns:1fr 1fr}.takeaway-actions{flex-wrap:wrap}
  .page-footer{display:grid;text-align:center}
}

@media (max-width:480px){
  h1{font-size:43px}.hero-vessel{width:190px}.goal-row span{width:100%}
  .variable-grid,.takeaway-grid{grid-template-columns:1fr}.input-pair{grid-template-columns:1fr}
  .formula{gap:7px}.formula strong{font-size:38px}.formula i{font-size:22px}
  .circuit-board{min-height:500px}.circuit-organ{width:112px}.thermal-tag{display:none}
}

@media (max-height:850px) and (min-width:1051px){
  .course-shell{margin:24px auto;padding:14px}.course-head{margin-bottom:8px}.course-head h2{font-size:29px}.stepper{margin-bottom:6px}.stepper button{min-height:48px}.lesson-card{min-height:calc(100vh - 118px)}.lesson-heading{padding:13px 18px 10px}.lesson-heading h2{font-size:30px}.lesson-intro{font-size:13px}.lesson-zone{padding:11px 18px}.lesson-nav{padding:8px 16px}
  .circuit-board{min-height:385px}.beaker{height:160px}.water-lab{padding-top:10px}.phase-vessel{height:180px}.definition-card{padding:17px}.takeaway{margin-top:34px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  button,a{transition:none!important}
  /* JAMAIS .water-surface ici : c'est la demonstration elle-meme. Sur une machine
     aux effets d'animation Windows desactives (MinAnimate=0), ce media est actif
     EN PERMANENCE — piege deja paye sur la frise vivante et la nomenclature. */
}

body.course-running{height:100dvh;overflow:hidden;background:#eef2f6}
.course-running .topbar{
  position:fixed;
  inset:0 0 auto;
  z-index:50;
  min-height:52px;
  padding:5px 14px;
  background:#fff;
}
.course-running .brand-mark{width:38px;height:38px;border-radius:9px}
.course-running .brand small,.course-running .time-badge{display:none}
.course-running .quiet-link,.course-running .quiet-button{min-height:36px;padding:6px 10px;font-size:11px}
.course-running .hero,.course-running .spiral-strip,.course-running .takeaway,.course-running .page-footer{display:none}
.course-running main{overflow:visible}
.course-running .course-shell{
  position:fixed;
  inset:52px 0 0;
  width:auto;
  margin:0;
  padding:7px 9px 9px;
  border:0;
  border-radius:0;
  background:#eef2f6;
  box-shadow:none;
}
.course-running .course-head{display:none}
.course-running .stepper{
  grid-template-columns:repeat(12,minmax(62px,1fr));
  height:48px;
  margin:0 0 6px;
  padding:0;
  overflow:hidden;
}
.course-running .stepper button{min-height:46px;padding:3px;border-radius:7px;font-size:8px}
.course-running .stepper button span{width:20px;height:20px;font-size:9px}
.course-running .lesson-card{
  height:calc(100dvh - 113px);
  min-height:0;
  grid-template-rows:auto minmax(0,1fr) auto;
  border-radius:14px;
}
.course-running .lesson-heading{min-height:76px;padding:9px 13px 7px}
.course-running .lesson-heading h2{font-size:clamp(22px,2.5vw,31px)}
.course-running .lesson-intro{margin-top:4px;font-size:12px;line-height:1.3}
.course-running .lesson-zone{min-height:0;padding:7px 11px;overflow:hidden}
.course-running .lesson-nav{min-height:43px;padding:5px 10px}
.course-running .listen-button,.course-running .pause-button{min-height:34px;padding:5px 9px;font-size:10px}
.course-running .voice-control{font-size:9px}
.course-running .voice-control select{width:132px;min-height:34px;padding:4px 23px 4px 7px;font-size:9px}
.course-running .rate-control button{width:28px;height:32px}.course-running .rate-control span{min-width:42px;font-size:10px}

@media (max-width:1050px){
  .course-running .two-column,.course-running .synthesis-layout{grid-template-columns:1.15fr .85fr}
  .course-running .formula-layout,.course-running .calculator-layout,.course-running .power-layout{grid-template-columns:.9fr 1.1fr}
  .course-running .latent-layout{grid-template-columns:1.18fr .62fr 1fr}
  .course-running .lesson-zone{min-height:0}
  .course-running .circuit-board{min-height:0;height:100%}
}

@media (max-width:760px){
  .course-running .topbar{position:fixed;align-items:center}
  .course-running .course-shell{width:auto;margin:0;padding:5px}
  .course-running .stepper{grid-template-columns:repeat(12,38px);overflow-x:auto}
  .course-running .stepper button b{display:none}
  .course-running .lesson-heading{display:flex;padding:7px 9px}
  .course-running .speech-panel{flex-wrap:nowrap}
  .course-running .voice-control span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .course-running .voice-control select{width:108px}
  .course-running .lesson-zone{min-height:0;padding:5px 7px;overflow:auto}
  .course-running .lesson-card{grid-template-rows:auto minmax(0,1fr) auto}
}