:root{
  --navy-700:#1b3a63;
  --orange:#ff6b35;
  --cream:#f7f1e7;
  --ink:#10233c;
  --muted:#637285;
  --line:rgba(27,58,99,.16);
  --blue:#3d7fca;
  --white:#fff;
  --green:#25866d;
  --green-soft:#e4f5ef;
  --orange-soft:#fff0e9;
  --blue-soft:#eaf3fc;
  --red:#b83c3c;
  --red-soft:#fceded;
  --flow-hot:#e33d32;
  --flow-liquid:#f28a16;
  --flow-mixture:#1769aa;
  --flow-suction:#52b9e9;
  --shadow:0 22px 60px rgba(27,58,99,.12);
  --radius:24px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-width:320px;
  color:var(--ink);
  background:
    radial-gradient(circle at 94% 2%,rgba(61,127,202,.12),transparent 28rem),
    radial-gradient(circle at 4% 32%,rgba(255,107,53,.08),transparent 24rem),
    var(--cream);
  font-family:Calibri,"Segoe UI",Arial,sans-serif;
  font-size:17px;
  line-height:1.65;
}
button,a{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.45}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{
  outline:4px solid rgba(61,127,202,.34);
  outline-offset:3px;
}
.symbol-library{position:absolute;width:0;height:0;overflow:hidden}
.topbar{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:76px;
  padding:12px clamp(18px,4vw,64px);
  border-bottom:1px solid var(--line);
  background:rgba(247,241,231,.94);
  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-700);
  font-weight:900;
  letter-spacing:.04em;
}
.brand strong,.brand small{display:block}
.brand strong{line-height:1.2}
.brand small{margin-top:2px;color:var(--muted);font-size:12px}
.topbar-tools{display:flex;align-items:center;gap:10px}
.time-badge{
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  color:var(--navy-700);
  font-size:13px;
  font-weight:800;
}
.quiet-button,.back-button,.pause-button{
  min-height:44px;
  padding:9px 15px;
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--navy-700);
  background:#fff;
  font-weight:800;
}
.quiet-button:hover,.back-button:hover,.pause-button:hover{border-color:var(--blue);background:var(--blue-soft)}

main{overflow:hidden}
.hero{
  display:grid;
  grid-template-columns:minmax(320px,.82fr) minmax(520px,1.18fr);
  gap:clamp(32px,5vw,78px);
  align-items:center;
  width:min(1420px,calc(100% - 40px));
  min-height:660px;
  margin:0 auto;
  padding:64px 0 48px;
}
.hero-copy{position:relative;z-index:2}
.eyebrow{
  margin:0 0 10px;
  color:var(--orange);
  font-size:13px;
  font-weight:900;
  letter-spacing:.12em;
  line-height:1.4;
}
h1,h2,h3,p{overflow-wrap:break-word}
h1{
  max-width:760px;
  margin:0;
  color:var(--ink);
  font-size:clamp(46px,6vw,84px);
  font-weight:900;
  letter-spacing:-.055em;
  line-height:.98;
}
h1 span{color:var(--blue)}
.hero-lead{
  max-width:650px;
  margin:26px 0;
  color:var(--muted);
  font-size:clamp(18px,2vw,22px);
  line-height:1.55;
}
.goal-row{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 28px}
.goal-row span{
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 12px 9px 9px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  color:var(--navy-700);
  font-size:14px;
  font-weight:800;
}
.goal-row b{
  display:grid;
  width:26px;
  height:26px;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:var(--orange);
}
.primary-button,.listen-button{
  min-height:50px;
  padding:12px 20px;
  border:0;
  border-radius:14px;
  color:#fff;
  background:var(--navy-700);
  box-shadow:0 9px 24px rgba(27,58,99,.2);
  font-weight:900;
}
.primary-button:hover,.listen-button:hover{background:#244b7d;transform:translateY(-1px)}
.hero-start{min-height:58px;padding-inline:24px;background:var(--orange);box-shadow:0 12px 28px rgba(255,107,53,.24)}
.hero-start:hover{background:#e85c2b}
.hero-visual{
  position:relative;
  margin:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:32px;
  background:#fff;
  box-shadow:var(--shadow);
}
.hero-visual::before{
  content:"CROIX DU FRIGORISTE";
  position:absolute;
  z-index:2;
  top:18px;
  left:18px;
  padding:7px 10px;
  border-radius:999px;
  color:#fff;
  background:var(--navy-700);
  font-size:11px;
  font-weight:900;
  letter-spacing:.1em;
}
.hero-schematic{min-height:490px}
.hero-cross{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-template-rows:1fr 1fr 1fr;
  gap:12px;
  min-height:430px;
  padding:58px 28px 28px;
  background:
    linear-gradient(rgba(61,127,202,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(61,127,202,.045) 1px,transparent 1px),
    linear-gradient(145deg,#fff,var(--blue-soft));
  background-size:28px 28px,28px 28px,auto;
}
.hero-organ{
  display:grid;
  min-width:145px;
  place-items:center;
  align-self:center;
  justify-self:center;
  padding:12px 15px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:0 9px 22px rgba(27,58,99,.1);
  text-align:center;
}
.hero-organ svg{width:76px;height:76px;overflow:visible}
.hero-organ b,.hero-organ small{display:block}
.hero-organ b{font-size:13px}
.hero-organ small{color:var(--muted);font-size:10px;font-weight:900;letter-spacing:.08em}
.hero-organ-top{grid-column:2;grid-row:1}
.hero-organ-left{grid-column:1;grid-row:2}
.hero-organ-right{grid-column:3;grid-row:2}
.hero-organ-bottom{grid-column:2;grid-row:3}
.hero-cross-center{
  grid-column:2;
  grid-row:2;
  display:grid;
  place-items:center;
  align-self:center;
  justify-self:center;
  width:105px;
  height:105px;
  border-radius:50%;
  color:#fff;
  background:var(--navy-700);
  text-align:center;
}
.hero-cross-center span,.hero-cross-center b{display:block;line-height:1.15}
.hero-cross-center span{font-size:11px;font-weight:900;letter-spacing:.08em}
.hero-cross-center b{font-size:17px}
.hero-visual figcaption{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 18px;
  color:var(--navy-700);
  background:#fff;
  font-size:14px;
  font-weight:800;
}
.status-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 5px rgba(37,134,109,.14);
}

.memory-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  width:min(1180px,calc(100% - 40px));
  margin:0 auto 86px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:20px;
  background:#fff;
  box-shadow:0 14px 40px rgba(27,58,99,.08);
}
.memory-strip div{
  display:grid;
  grid-template-columns:42px 1fr;
  padding:18px;
  border-right:1px solid var(--line);
}
.memory-strip div:last-child{border-right:0}
.memory-strip span{
  grid-row:1/3;
  display:grid;
  width:34px;
  height:34px;
  place-items:center;
  align-self:center;
  border-radius:10px;
  color:#fff;
  background:var(--blue);
  font-weight:900;
}
.memory-strip b{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.memory-strip strong{font-size:16px}

.course-shell{
  width:min(1240px,calc(100% - 40px));
  margin:0 auto 96px;
  scroll-margin-top:94px;
}
.course-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:30px;
  margin-bottom:20px;
}
.course-head h2{margin:0;font-size:clamp(28px,4vw,46px);letter-spacing:-.035em}
.course-progress{width:min(330px,42vw);color:var(--muted);font-size:13px;font-weight:800}
.progress-track{height:10px;margin-top:8px;overflow:hidden;border-radius:999px;background:rgba(27,58,99,.1)}
.progress-track i{display:block;width:8.33%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--orange),#ff9f5f);transition:width .35s ease}
.stepper{
  display:flex;
  gap:8px;
  margin-bottom:12px;
  padding:6px 2px 10px;
  overflow-x:auto;
  scrollbar-width:thin;
}
.stepper button{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
  min-height:48px;
  padding:8px 12px 8px 8px;
  border:1px solid var(--line);
  border-radius:14px;
  color:var(--muted);
  background:rgba(255,255,255,.72);
  font-size:13px;
  font-weight:800;
}
.stepper b{
  display:grid;
  width:30px;
  height:30px;
  place-items:center;
  border-radius:9px;
  color:var(--navy-700);
  background:var(--blue-soft);
}
.stepper button.active{border-color:var(--blue);color:var(--navy-700);background:#fff;box-shadow:0 7px 20px rgba(27,58,99,.08)}
.stepper button.active b{color:#fff;background:var(--blue)}
.stepper button.done b{color:#fff;background:var(--green)}

.lesson-card{
  min-height:0;
  padding:clamp(20px,3vw,34px);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(255,255,255,.96);
  box-shadow:var(--shadow);
}
.lesson-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:30px;
  margin-bottom:19px;
}
.lesson-heading h2{margin:0;font-size:clamp(29px,3.3vw,45px);letter-spacing:-.015em;line-height:1.08}
.lesson-intro{max-width:820px;margin:9px 0 0;color:var(--muted);font-size:16px}
.speech-panel{flex:0 0 auto;display:grid;justify-items:end;gap:9px}
.speech-buttons{display:flex;gap:7px}
.listen-button,.pause-button{min-height:45px;padding:9px 14px;border-radius:12px;font-size:14px}
.listen-button{background:var(--blue);box-shadow:none}
.rate-control{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;font-weight:900}
.rate-control button{
  display:grid;
  width:30px;
  height:30px;
  place-items:center;
  border:1px solid var(--line);
  border-radius:9px;
  color:var(--navy-700);
  background:#fff;
  font-size:18px;
}
.rate-control span{min-width:46px;text-align:center}
.lesson-zone{min-height:0}
.lesson-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-top:19px;
  padding-top:15px;
  border-top:1px solid var(--line);
}
.lesson-nav>span{color:var(--muted);font-size:13px;font-weight:900}
.speech-warning{margin:16px 0 0;padding:12px;border-radius:12px;color:var(--red);background:var(--red-soft);font-size:14px}

.mission-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.reveal-card{
  min-height:390px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:18px;
  color:var(--ink);
  background:linear-gradient(145deg,#fff,var(--blue-soft));
  text-align:center;
}
.reveal-card:hover{border-color:var(--blue)}
.reveal-card .symbol-wrap{margin:0 auto 15px}
.reveal-card .organ-name,.reveal-card .organ-action,.reveal-card .definition-label,.reveal-card .organ-transition{display:block}
.reveal-card .organ-name{font-size:19px;font-weight:900}
.reveal-card .definition-label{
  width:max-content;
  max-width:100%;
  margin:9px auto 8px;
  padding:4px 8px;
  border-radius:999px;
  color:#a5421f;
  background:var(--orange-soft);
  font-size:10px;
  font-weight:900;
  letter-spacing:.06em;
}
.reveal-card .organ-action{margin-top:6px;color:var(--ink);font-size:13.5px;font-weight:700;line-height:1.48}
.reveal-card .organ-transition{
  margin-top:13px;
  padding:8px;
  border-radius:10px;
  color:var(--navy-700);
  background:#fff;
  font-size:12px;
  font-weight:900;
}
.reveal-card:not(.revealed) .organ-name,
.reveal-card:not(.revealed) .organ-action,
.reveal-card:not(.revealed) .definition-label,
.reveal-card:not(.revealed) .organ-transition{visibility:hidden}
.reveal-card:not(.revealed)::after{
  content:"Cliquer pour identifier";
  display:block;
  margin-top:-120px;
  color:var(--blue);
  font-size:13px;
  font-weight:900;
}
.mission-feedback,.exercise-feedback,.quiz-feedback,.diagnostic-feedback{
  margin:16px 0 0;
  padding:14px 16px;
  border-radius:14px;
  color:var(--navy-700);
  background:var(--blue-soft);
  font-weight:800;
}
.mission-feedback.success,.exercise-feedback.success,.quiz-feedback.success,.diagnostic-feedback.success{color:#176451;background:var(--green-soft)}
.mission-feedback.error,.exercise-feedback.error,.quiz-feedback.error,.diagnostic-feedback.error{color:var(--red);background:var(--red-soft)}

.symbol-wrap{
  display:grid;
  width:116px;
  height:116px;
  place-items:center;
  border:1px solid var(--line);
  border-radius:22px;
  background:#fff;
  box-shadow:0 9px 20px rgba(27,58,99,.08);
}
.symbol-wrap svg{width:82px;height:82px;overflow:visible}
.symbol-wrap.small{width:80px;height:80px;border-radius:16px}
.symbol-wrap.small svg{width:58px;height:58px}
.symbol-wrap.wide svg{width:95px}

.circuit-layout{
  display:grid;
  grid-template-columns:minmax(470px,1.08fr) minmax(290px,.92fr);
  gap:24px;
  align-items:stretch;
}
.circuit-map{
  --pipe-x:17%;
  --pipe-y:15%;
  position:relative;
  display:grid;
  grid-template-columns:1fr 1.25fr 1fr;
  grid-template-rows:1fr 1.18fr 1fr;
  min-height:520px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:22px;
  background:
    linear-gradient(rgba(61,127,202,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(61,127,202,.04) 1px,transparent 1px),
    #fbfcfd;
  background-size:28px 28px;
}
.pipe-loop{
  position:absolute;
  inset:var(--pipe-y) var(--pipe-x);
  border:7px solid #9bb1c4;
  border-radius:40px;
  box-shadow:inset 0 0 0 2px #fff,0 0 0 2px #fff;
}
.flow-track{
  position:absolute;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-around;
  pointer-events:none;
  color:var(--flow-color);
  font-size:23px;
  font-weight:900;
  filter:drop-shadow(0 3px 3px rgba(16,35,60,.18));
}
.flow-track::before{
  content:"";
  position:absolute;
  z-index:-1;
  border-radius:999px;
  background:var(--flow-color);
  opacity:.82;
  box-shadow:0 0 0 2px rgba(255,255,255,.7),0 3px 8px rgba(16,35,60,.18);
}
.flow-track span{
  display:grid;
  width:29px;
  height:29px;
  place-items:center;
  border:2px solid currentColor;
  border-radius:50%;
  background:#fff;
  animation-duration:1.9s;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}
.flow-track span:nth-child(2){animation-delay:-.95s}
.flow-h{height:34px}
.flow-v{width:34px;flex-direction:column}
.flow-h::before{left:0;right:0;top:14px;height:7px}
.flow-v::before{top:0;bottom:0;left:14px;width:7px}
.flow-west span{animation-name:flow-to-left}
.flow-east span{animation-name:flow-to-right}
.flow-north span{animation-name:flow-to-top}
.flow-south span{animation-name:flow-to-bottom}
.segment-top-left{top:calc(var(--pipe-y) - 14px);left:var(--pipe-x);right:50%}
.segment-top-right{top:calc(var(--pipe-y) - 14px);left:50%;right:var(--pipe-x)}
.segment-right-upper{top:var(--pipe-y);right:calc(var(--pipe-x) - 14px);bottom:50%}
.segment-right-lower{top:50%;right:calc(var(--pipe-x) - 14px);bottom:var(--pipe-y)}
.segment-bottom-left{left:var(--pipe-x);right:50%;bottom:calc(var(--pipe-y) - 14px)}
.segment-bottom-right{left:50%;right:var(--pipe-x);bottom:calc(var(--pipe-y) - 14px)}
.segment-left-upper{top:var(--pipe-y);bottom:50%;left:calc(var(--pipe-x) - 14px)}
.segment-left-lower{top:50%;bottom:var(--pipe-y);left:calc(var(--pipe-x) - 14px)}
.flow-hot{--flow-color:var(--flow-hot)}
.flow-liquid{--flow-color:var(--flow-liquid)}
.flow-mixture{--flow-color:var(--flow-mixture)}
.flow-suction{--flow-color:var(--flow-suction)}
@keyframes flow-to-left{0%{transform:translateX(28px);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateX(-28px);opacity:0}}
@keyframes flow-to-right{0%{transform:translateX(-28px);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateX(28px);opacity:0}}
@keyframes flow-to-top{0%{transform:translateY(28px);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateY(-28px);opacity:0}}
@keyframes flow-to-bottom{0%{transform:translateY(-28px);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateY(28px);opacity:0}}
.circuit-organ{
  position:relative;
  z-index:2;
  display:grid;
  place-items:center;
  align-self:center;
  justify-self:center;
  min-width:132px;
  padding:9px;
  border:2px solid transparent;
  border-radius:18px;
  background:#fff;
  box-shadow:0 8px 18px rgba(27,58,99,.11);
  text-align:center;
  transition:.2s;
}
.circuit-organ strong{display:block;margin-top:2px;font-size:13px}
.circuit-organ svg{width:68px;height:68px;overflow:visible}
.circuit-organ.top{grid-column:2;grid-row:1}
.circuit-organ.right{grid-column:3;grid-row:2}
.circuit-organ.bottom{grid-column:2;grid-row:3}
.circuit-organ.left{grid-column:1;grid-row:2}
.circuit-organ.active{border-color:var(--orange);box-shadow:0 0 0 5px rgba(255,107,53,.13),0 8px 18px rgba(27,58,99,.11)}
.state-tag{
  position:absolute;
  z-index:3;
  max-width:135px;
  padding:7px 9px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  line-height:1.35;
}
.state-ne{top:18%;right:3%}.state-nw{top:18%;left:3%}.state-sw{bottom:18%;left:3%}.state-se{right:3%;bottom:18%}
.state-tag b{display:block;color:var(--navy-700)}
.state-hot{border-left:5px solid var(--flow-hot)}
.state-liquid{border-left:5px solid var(--flow-liquid)}
.state-mixture{border-left:5px solid var(--flow-mixture)}
.state-suction{border-left:5px solid var(--flow-suction)}
.flow-legend{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
}
.flow-legend span{
  display:grid;
  grid-template-columns:25px 1fr;
  align-items:center;
  min-height:47px;
  padding:6px 8px;
  border:1px solid var(--line);
  border-left:5px solid var(--legend-color);
  border-radius:10px;
  background:#fff;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  line-height:1.25;
}
.flow-legend i{
  grid-row:1/3;
  display:grid;
  width:23px;
  height:23px;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:var(--legend-color);
  font-size:12px;
  font-weight:900;
  font-style:normal;
}
.flow-legend b{display:block;color:var(--ink)}
.legend-hot{--legend-color:var(--flow-hot)}
.legend-liquid{--legend-color:var(--flow-liquid)}
.legend-mixture{--legend-color:var(--flow-mixture)}
.legend-suction{--legend-color:var(--flow-suction)}
.mass-rule{
  display:grid;
  grid-template-columns:44px 1fr;
  gap:12px;
  padding:13px;
  border:1px solid rgba(27,58,99,.18);
  border-radius:14px;
  background:#fff;
}
.mass-rule-icon{
  display:grid;
  width:42px;
  height:42px;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:var(--navy-700);
  font-family:"Trebuchet MS",Calibri,sans-serif;
  font-size:24px;
  font-style:italic;
  font-weight:900;
}
.mass-rule b{display:block;color:var(--navy-700)}
.mass-rule p{margin:3px 0 5px!important;color:var(--ink)!important;font-size:13px;line-height:1.4}
.mass-rule small{display:block;color:var(--muted);font-size:11px;line-height:1.4}
.cross-panel{
  display:grid;
  align-content:center;
  gap:13px;
  padding:24px;
  border:1px solid var(--line);
  border-radius:22px;
  background:var(--cream);
}
.cross-panel h3,.content-card h3,.diagnostic-card h3{margin:0;font-size:25px;line-height:1.2}
.cross-panel p{margin:0;color:var(--muted)}
.compact-cross-panel{align-content:start}
.temperature-memory{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.temperature-memory span{
  display:grid;
  grid-template-columns:31px 1fr;
  align-items:center;
  min-height:72px;
  padding:9px 10px;
  border:1px solid var(--line);
  border-left:6px solid var(--temperature-color);
  border-radius:10px 14px 14px 10px;
  color:var(--muted);
  background:#fff;
  font-size:10px;
  line-height:1.35;
}
.temperature-memory i{
  grid-row:1/3;
  display:grid;
  width:25px;
  height:25px;
  place-items:center;
  border-radius:8px;
  color:#fff;
  background:var(--temperature-color);
  font-style:normal;
  font-weight:900;
}
.temperature-memory b{color:var(--navy-700);font-size:11px}
.temp-very-hot{--temperature-color:var(--flow-hot)}
.temp-warm{--temperature-color:var(--flow-liquid)}
.temp-very-cold{--temperature-color:var(--flow-mixture)}
.temp-cold{--temperature-color:var(--flow-suction)}
.memory-cross{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-template-rows:1fr 1fr 1fr;
  gap:6px;
  min-height:225px;
}
.memory-cross span{
  display:grid;
  place-items:center;
  padding:8px;
  border-radius:12px;
  color:var(--navy-700);
  background:#fff;
  font-size:12px;
  font-weight:900;
  text-align:center;
}
.memory-cross .mc-top{grid-column:2;grid-row:1}
.memory-cross .mc-left{grid-column:1;grid-row:2}
.memory-cross .mc-center{grid-column:2;grid-row:2;color:#fff;background:var(--navy-700)}
.memory-cross .mc-right{grid-column:3;grid-row:2}
.memory-cross .mc-bottom{grid-column:2;grid-row:3}
.support-symbols{display:flex;flex-wrap:wrap;gap:8px}
.support-symbol{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 8px;
  border-radius:10px;
  background:#fff;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
}
.support-symbol svg{width:34px;height:34px;overflow:visible}

.organ-layout{display:grid;grid-template-columns:300px 1fr;gap:24px}
.organ-focus{
  display:grid;
  align-content:center;
  justify-items:center;
  padding:28px 20px;
  border:1px solid var(--line);
  border-radius:22px;
  background:linear-gradient(150deg,var(--blue-soft),#fff);
  text-align:center;
}
.organ-focus .symbol-wrap{width:170px;height:170px}
.organ-focus .symbol-wrap svg{width:125px;height:125px}
.organ-focus h3{margin:20px 0 5px;font-size:27px}
.organ-focus p{margin:0;color:var(--muted)}
.role-badge{display:inline-flex;margin-bottom:13px;padding:6px 10px;border-radius:999px;color:#fff;background:var(--orange);font-size:12px;font-weight:900;letter-spacing:.05em}
.organ-content{display:grid;gap:15px}
.professional-definition{
  display:grid;
  gap:7px;
  padding:17px 18px;
  border:1px solid rgba(255,107,53,.35);
  border-left:7px solid var(--orange);
  border-radius:9px 17px 17px 9px;
  background:linear-gradient(135deg,var(--orange-soft),#fff);
}
.professional-definition>span{
  color:#a5421f;
  font-size:10px;
  font-weight:900;
  letter-spacing:.1em;
}
.professional-definition>div{display:flex;align-items:center;justify-content:space-between;gap:12px}
.professional-definition>div b{color:var(--ink);font-size:20px}
.professional-definition>div strong{
  flex:0 0 auto;
  padding:5px 9px;
  border-radius:999px;
  color:#fff;
  background:var(--navy-700);
  font-size:11px;
}
.professional-definition p{margin:0;color:var(--ink);font-size:15px;font-weight:700;line-height:1.5}
.principle{
  display:grid;
  grid-template-columns:50px 1fr;
  gap:13px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
}
.principle-number{
  display:grid;
  width:44px;
  height:44px;
  place-items:center;
  border-radius:13px;
  color:#fff;
  background:var(--blue);
  font-weight:900;
}
.principle h3{margin:0 0 5px;font-size:20px}
.principle p{margin:0;color:var(--muted)}
.trap-card{
  padding:17px 18px;
  border-left:6px solid var(--orange);
  border-radius:8px 16px 16px 8px;
  background:var(--orange-soft);
}
.trap-card b{display:block;color:#a5421f}
.trap-card p{margin:4px 0 0;color:#75452f}
.method-note{
  padding:16px 18px;
  border:1px solid rgba(61,127,202,.28);
  border-radius:16px;
  background:var(--blue-soft);
}
.method-note b{display:block;color:var(--navy-700)}
.method-note p{margin:4px 0 0;color:var(--muted)}
.detail-tabs{display:flex;flex-wrap:wrap;gap:8px}
.detail-tabs button{
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:11px;
  color:var(--navy-700);
  background:#fff;
  font-weight:800;
}
.detail-tabs button.active{border-color:var(--blue);color:#fff;background:var(--blue)}
.detail-panel{min-height:140px;padding:18px;border:1px solid var(--line);border-radius:17px;background:#f9fbfd}
.detail-panel h3{margin:0 0 7px;font-size:20px}
.detail-panel p{margin:0;color:var(--muted)}
.tech-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tech-card{
  padding:12px 8px;
  border:1px solid var(--line);
  border-radius:15px;
  background:#fff;
  text-align:center;
}
.tech-card svg{width:58px;height:58px;overflow:visible}
.tech-card b,.tech-card small{display:block}
.tech-card small{margin-top:4px;color:var(--muted);line-height:1.35}
.architecture-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.architecture-grid div{padding:13px;border:1px solid var(--line);border-radius:14px;background:#fff}
.architecture-grid b{display:block;color:var(--navy-700)}
.architecture-grid small{color:var(--muted)}
.oil-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.oil-grid span{padding:10px;border-radius:12px;color:var(--navy-700);background:var(--blue-soft);font-size:13px;font-weight:800;text-align:center}

.compressor-flow-card{
  display:grid;
  grid-template-columns:150px 1fr 160px;
  align-items:center;
  gap:14px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#f8fbfe;
}
.compressor-flow-state{
  display:grid;
  min-height:64px;
  align-content:center;
  padding:10px;
  border-radius:13px;
  color:var(--muted);
  background:#fff;
  font-size:11px;
  text-align:center;
}
.compressor-flow-state b{color:var(--navy-700);font-size:10px;letter-spacing:.06em}
.flow-state-bp{border-left:5px solid var(--flow-suction)}
.flow-state-hp{border-right:5px solid var(--flow-hot)}
.compressor-flow-track{
  position:relative;
  height:82px;
  overflow:hidden;
  border-radius:999px;
  background:linear-gradient(90deg,var(--flow-suction),var(--blue) 43%,var(--orange) 63%,var(--flow-hot));
  box-shadow:inset 0 0 0 5px rgba(255,255,255,.75);
}
.compressor-flow-track>span{
  position:absolute;
  z-index:3;
  top:50%;
  left:50%;
  display:grid;
  width:68px;
  height:68px;
  place-items:center;
  transform:translate(-50%,-50%);
  border:4px solid #fff;
  border-radius:50%;
  background:#fff;
  box-shadow:0 4px 16px rgba(27,58,99,.24);
}
.compressor-flow-track svg{width:52px;height:52px;overflow:visible}
.compressor-flow-track>i{
  position:absolute;
  z-index:2;
  top:50%;
  left:-16px;
  width:13px;
  height:13px;
  transform:translateY(-50%);
  border:3px solid #fff;
  border-radius:50%;
  background:rgba(255,255,255,.45);
  animation:compressorFlow 3.2s linear infinite;
}
.compressor-flow-track>i:nth-child(2){animation-delay:-.64s}
.compressor-flow-track>i:nth-child(3){animation-delay:-1.28s}
.compressor-flow-track>i:nth-child(4){animation-delay:-1.92s}
.compressor-flow-track>i:nth-child(5){animation-delay:-2.56s}
.movement-principles{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.movement-principles div{padding:11px 13px;border:1px solid var(--line);border-radius:13px;background:#fff}
.movement-principles b,.movement-principles span{display:block}
.movement-principles b{color:var(--navy-700);font-size:12px}
.movement-principles span{margin-top:3px;color:var(--muted);font-size:11px;line-height:1.4}
.compact-method-note{padding-block:11px}

.compressor-technology-slide{display:grid;gap:12px}
.technology-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.technology-picker button{
  display:grid;
  grid-template-columns:72px 1fr;
  align-items:center;
  min-height:88px;
  padding:9px 15px;
  border:1px solid var(--line);
  border-radius:16px;
  color:var(--muted);
  background:#fff;
  text-align:left;
}
.technology-picker button:hover{border-color:var(--blue)}
.technology-picker button.active{border-color:var(--blue);color:var(--navy-700);background:var(--blue-soft);box-shadow:0 7px 20px rgba(27,58,99,.08)}
.technology-picker svg{grid-row:1/3;width:60px;height:60px;overflow:visible}
.technology-picker b{font-size:17px}
.technology-picker small{font-size:10px;font-weight:800}
.compressor-tech-panel{overflow:hidden;border:1px solid var(--line);border-radius:20px;background:#f9fbfd}
.technology-explanation{display:grid;grid-template-columns:1fr minmax(340px,.9fr);gap:18px;align-items:center;padding:18px}
.technology-kicker{color:var(--orange);font-size:9px;font-weight:900;letter-spacing:.09em}
.technology-explanation h3{margin:4px 0 2px;color:var(--navy-700);font-size:25px}
.technology-explanation p{margin:0;color:var(--muted);font-size:13px}
.technology-explanation ol{display:grid;gap:5px;margin:12px 0 0;padding-left:22px}
.technology-explanation li{color:var(--ink);font-size:12px;line-height:1.35}
.technology-rule{margin:0;padding:11px 14px;border-radius:13px;color:var(--navy-700);background:var(--green-soft);font-size:12px}
.mechanism{
  position:relative;
  min-height:286px;
  overflow:hidden;
  border:1px solid rgba(27,58,99,.18);
  border-radius:17px;
  background:
    linear-gradient(rgba(27,58,99,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(27,58,99,.035) 1px,transparent 1px),
    #fff;
  background-size:22px 22px;
}
.mechanism-port{
  position:absolute;
  z-index:6;
  top:13px;
  padding:5px 8px;
  border-radius:999px;
  color:#fff;
  font-size:9px;
  font-weight:900;
}
.mechanism-port i{font-style:normal}
.mech-bp{left:12px;background:var(--flow-suction)}
.mech-hp{right:12px;background:var(--flow-hot)}
.mechanism-caption{position:absolute;right:12px;bottom:10px;left:12px;color:var(--muted);font-size:10px;font-weight:800;text-align:center}
.piston-cylinder{
  position:absolute;
  top:55px;
  left:50%;
  width:142px;
  height:186px;
  transform:translateX(-50%);
  border:7px solid var(--navy-700);
  border-top-width:13px;
  border-radius:9px 9px 18px 18px;
  background:linear-gradient(#eef4f9,#fff);
}
.piston-head{
  position:absolute;
  z-index:2;
  top:26px;
  left:8px;
  width:112px;
  height:31px;
  border:3px solid var(--navy-700);
  border-radius:6px;
  background:#b9c9d8;
  animation:pistonHead 3.2s ease-in-out infinite;
}
.piston-rod{
  position:absolute;
  top:55px;
  left:61px;
  width:8px;
  height:105px;
  border-radius:999px;
  background:var(--navy-700);
  animation:pistonRod 3.2s ease-in-out infinite;
}
.piston-valve{position:absolute;top:-10px;width:32px;height:7px;border-radius:999px;background:var(--orange)}
.valve-in{left:14px;animation:valveIn 3.2s linear infinite}
.valve-out{right:14px;animation:valveOut 3.2s linear infinite}
.cycle-label{position:absolute;bottom:18px;padding:6px 10px;border-radius:999px;color:#fff;font-size:10px;font-weight:900}
.cycle-aspire{left:18px;background:var(--flow-suction);animation:labelAspire 3.2s linear infinite}
.cycle-refoule{right:18px;background:var(--flow-hot);animation:labelRefoule 3.2s linear infinite}
.scroll-shell{
  position:absolute;
  top:51%;
  left:50%;
  width:205px;
  height:205px;
  transform:translate(-50%,-50%);
  border:5px solid var(--navy-700);
  border-radius:50%;
  background:#f1f6fa;
}
.scroll-fixed,.scroll-orbit{position:absolute;inset:0}
.scroll-fixed i,.scroll-orbit i{position:absolute;top:50%;left:50%;border:6px solid var(--navy-700);border-right-color:transparent;border-radius:50%;transform:translate(-50%,-50%)}
.scroll-fixed i:nth-child(1),.scroll-orbit i:nth-child(1){width:142px;height:142px}
.scroll-fixed i:nth-child(2),.scroll-orbit i:nth-child(2){width:96px;height:96px}
.scroll-fixed i:nth-child(3),.scroll-orbit i:nth-child(3){width:50px;height:50px}
.scroll-orbit{animation:scrollOrbit 3.3s linear infinite}
.scroll-orbit i{border-color:var(--orange);border-left-color:transparent}
.scroll-pocket{position:absolute;width:15px;height:15px;border:3px solid #fff;border-radius:50%;background:var(--blue);animation:scrollPocket 3.3s ease-in infinite}
.pocket-one{--pocket-x:65px;--pocket-y:69px;top:26px;left:30px}
.pocket-two{--pocket-x:-76px;--pocket-y:10px;top:85px;right:19px;animation-delay:-1.1s}
.pocket-three{--pocket-x:43px;--pocket-y:-67px;bottom:28px;left:52px;animation-delay:-2.2s}
.scroll-outlet{position:absolute;top:50%;left:50%;width:21px;height:21px;transform:translate(-50%,-50%);border:4px solid #fff;border-radius:50%;background:var(--flow-hot);box-shadow:0 0 0 4px rgba(217,76,53,.2)}
.screw-shell{position:absolute;top:54px;right:24px;bottom:47px;left:24px;overflow:hidden;border:4px solid var(--navy-700);border-radius:45px;background:#edf3f8}
.screw-rotor{position:absolute;right:22px;left:22px;height:57px;border:3px solid var(--navy-700);border-radius:999px;background:repeating-linear-gradient(65deg,#9eb1c3 0,#9eb1c3 13px,#d8e2ea 13px,#d8e2ea 27px);background-size:56px 56px}
.rotor-top{top:35px;animation:screwTop 1.2s linear infinite}
.rotor-bottom{bottom:35px;transform:scaleY(-1);animation:screwBottom 1.2s linear infinite}
.screw-pocket{position:absolute;z-index:4;top:50%;left:8%;width:26px;height:26px;transform:translateY(-50%);border:3px solid #fff;border-radius:50%;background:var(--blue);animation:screwPocket 4s linear infinite}
.screw-pocket-two{animation-delay:-1.33s}.screw-pocket-three{animation-delay:-2.66s}

@keyframes compressorFlow{from{left:-16px}to{left:calc(100% + 16px)}}
@keyframes pistonHead{0%,100%{transform:translateY(0)}50%{transform:translateY(94px)}}
@keyframes pistonRod{0%,100%{transform:translateY(0)}50%{transform:translateY(94px)}}
@keyframes valveIn{0%,48%{opacity:1;transform:translateY(5px)}55%,100%{opacity:.25;transform:none}}
@keyframes valveOut{0%,50%{opacity:.25;transform:none}58%,96%{opacity:1;transform:translateY(-5px)}100%{opacity:.25}}
@keyframes labelAspire{0%,48%{opacity:1}55%,100%{opacity:.18}}
@keyframes labelRefoule{0%,50%{opacity:.18}58%,96%{opacity:1}100%{opacity:.18}}
@keyframes scrollOrbit{0%{transform:translate(5px,0)}25%{transform:translate(0,5px)}50%{transform:translate(-5px,0)}75%{transform:translate(0,-5px)}100%{transform:translate(5px,0)}}
@keyframes scrollPocket{0%{transform:translate(0,0) scale(1);opacity:1}85%{transform:translate(var(--pocket-x),var(--pocket-y)) scale(.3);opacity:1}100%{transform:translate(var(--pocket-x),var(--pocket-y)) scale(.15);opacity:0}}
@keyframes screwTop{to{background-position:56px 0}}
@keyframes screwBottom{to{background-position:-56px 0}}
@keyframes screwPocket{0%{left:8%;width:28px;height:28px;background:var(--flow-suction)}85%{left:84%;width:12px;height:12px;background:var(--flow-hot);opacity:1}100%{left:92%;width:9px;height:9px;background:var(--flow-hot);opacity:0}}

.energy-formula{
  display:grid;
  grid-template-columns:1fr 38px 1fr 38px 1.2fr;
  align-items:center;
  gap:8px;
}
.energy-formula span,.energy-formula strong{
  display:grid;
  min-height:88px;
  place-items:center;
  padding:12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  text-align:center;
  line-height:1.3;
}
.energy-formula i{text-align:center;color:var(--orange);font-style:normal;font-size:26px;font-weight:900}
.energy-formula strong{color:#fff;background:var(--blue);border-color:var(--blue)}
.compact-energy-formula span,.compact-energy-formula strong{min-height:68px;font-size:12px}
.air-exchange{
  position:relative;
  display:grid;
  grid-template-columns:150px 1fr 150px;
  align-items:center;
  gap:12px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:19px;
  background:linear-gradient(145deg,#f8fbfe,#fff);
}
.air-state{
  display:grid;
  min-height:74px;
  align-content:center;
  padding:10px;
  border:1px solid var(--line);
  border-radius:13px;
  background:#fff;
  text-align:center;
}
.air-state span{color:var(--muted);font-size:9px;font-weight:900;letter-spacing:.07em}
.air-state b{margin-top:4px;color:var(--navy-700);font-size:12px}
.air-channel{
  display:grid;
  grid-template-columns:1fr 82px 1fr;
  align-items:center;
  min-height:138px;
  overflow:hidden;
  border-radius:18px;
  background:#edf4f9;
  box-shadow:inset 0 0 0 2px rgba(27,58,99,.08);
}
.air-exchanger{
  position:relative;
  z-index:4;
  display:grid;
  width:82px;
  height:118px;
  place-items:center;
  border:3px solid var(--navy-700);
  border-radius:12px;
  background:#fff;
  box-shadow:0 6px 16px rgba(27,58,99,.15);
}
.air-exchanger svg{width:72px;height:72px;overflow:visible}
.air-exchanger span{margin-top:-20px;color:var(--navy-700);font-size:8px;font-weight:900}
.air-flow{position:relative;height:100%}
.air-flow::before{
  content:"";
  position:absolute;
  top:50%;
  right:0;
  left:0;
  height:12px;
  transform:translateY(-50%);
  border-radius:999px;
  background:currentColor;
  opacity:.18;
}
.incoming-air{color:var(--air-in)}
.outgoing-air{color:var(--air-out)}
.air-condenser{--air-in:#57a6df;--air-out:#e45c31}
.air-evaporator{--air-in:#ee8b38;--air-out:#54aee0}
.air-arrow{
  position:absolute;
  z-index:2;
  top:50%;
  left:-20px;
  transform:translateY(-54%);
  color:currentColor;
  font-size:22px;
  font-style:normal;
  font-weight:900;
  animation:airAcross 3.15s linear infinite;
  filter:drop-shadow(0 2px 2px rgba(27,58,99,.16));
}
.air-arrow-2{animation-delay:-.45s}.air-arrow-3{animation-delay:-.9s}.air-arrow-4{animation-delay:-1.35s}
.air-arrow-5{animation-delay:-1.8s}.air-arrow-6{animation-delay:-2.25s}.air-arrow-7{animation-delay:-2.7s}
.air-transfer-rule{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin:0;
  padding:10px;
  border-radius:12px;
  color:var(--navy-700);
  background:var(--blue-soft);
  font-size:12px;
}
.air-transfer-rule span{color:var(--orange);font-size:24px}
.temperature-conclusion{display:flex;align-items:center;gap:14px;padding:13px 16px;border-radius:14px;color:#155f75;background:#def5fb}
.temperature-conclusion b{flex:0 0 auto}.temperature-conclusion span{font-size:12px}
.phase-slide{display:grid;gap:10px}
.phase-slide-reminder{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.phase-slide-reminder span{padding:10px 13px;border:1px solid var(--line);border-radius:13px;color:var(--muted);background:#fff;font-size:11px}
.phase-slide-reminder b{display:block;color:var(--navy-700);font-size:12px}
.regulation-slide{display:grid;grid-template-columns:.72fr 1.28fr;gap:16px;align-items:stretch}
.regulation-slide .equalization-note{grid-template-columns:115px 1fr;align-content:center}
.regulation-slide .equalization-symbol svg{width:68px;height:68px}
.compact-regulation-animation{align-self:stretch}
.compact-regulation-animation img{height:100%;min-height:390px;object-fit:contain}

@keyframes airAcross{from{left:-20px}to{left:calc(100% + 10px)}}
.kelvin-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 17px;border-radius:15px;background:var(--green-soft)}
.kelvin-card span{color:#176451;font-weight:800}.kelvin-card b{max-width:230px;color:#176451;font-size:16px;text-align:right}

.phase-lab{
  overflow:hidden;
  border:1px solid rgba(27,58,99,.2);
  border-radius:21px;
  background:linear-gradient(145deg,#f8fbff,#fff);
  box-shadow:0 14px 34px rgba(27,58,99,.08);
}
.phase-lab-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:17px 19px;
  color:#fff;
  background:var(--navy-700);
}
.phase-lab-heading h3{margin:3px 0 0;color:#fff;font-size:21px}
.phase-eyebrow{color:#bcd8f4;font-size:10px;font-weight:900;letter-spacing:.09em}
.phase-direction{
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  font-size:11px;
  font-weight:900;
  text-align:center;
}
.phase-direction i{color:#ffd08a;font-size:18px;font-style:normal}
.phase-lab-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:0}
.coil-card{padding:16px 18px 18px;border-right:1px solid var(--line)}
.thermal-card{display:grid;align-content:start;gap:12px;padding:16px 18px 18px}
.heat-transfer{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:41px;
  margin-bottom:7px;
  border-radius:12px;
  font-size:11px;
  text-align:center;
}
.heat-transfer span{font-size:21px;letter-spacing:4px;line-height:1}
.heat-transfer b{max-width:220px}
.heat-in{color:#135e94;background:#dff2ff}
.heat-out{color:#a23c1d;background:#fff0e9}
.phase-coil{
  position:relative;
  min-height:298px;
  margin:0 auto 7px;
  border:1px solid rgba(27,58,99,.12);
  border-radius:16px;
  background:
    radial-gradient(circle at 20% 20%,rgba(61,127,202,.08),transparent 33%),
    repeating-linear-gradient(0deg,rgba(27,58,99,.035) 0,rgba(27,58,99,.035) 1px,transparent 1px,transparent 22px),
    #fff;
}
.coil-run{
  --fluid:#3d7fca;
  position:absolute;
  z-index:2;
  left:6%;
  width:88%;
  height:16px;
  overflow:visible;
  border:2px solid rgba(25,49,76,.22);
  border-radius:999px;
  background:var(--fluid);
  box-shadow:inset 0 2px 4px rgba(255,255,255,.34),0 2px 4px rgba(27,58,99,.15);
}
.coil-run-1{top:46px}.coil-run-2{top:91px}.coil-run-3{top:136px}.coil-run-4{top:181px}.coil-run-5{top:226px}
.phase-evaporator .coil-run-1,.phase-evaporator .coil-turn-1{--fluid:#2269c7}
.phase-evaporator .coil-run-2,.phase-evaporator .coil-turn-2{--fluid:#307bd4}
.phase-evaporator .coil-run-3,.phase-evaporator .coil-turn-3{--fluid:#4797df}
.phase-evaporator .coil-run-4,.phase-evaporator .coil-turn-4{--fluid:#68bce7}
.phase-evaporator .coil-run-5{--fluid:#8bd8ef}
.phase-condenser .coil-run-1,.phase-condenser .coil-turn-1{--fluid:#d94c35}
.phase-condenser .coil-run-2,.phase-condenser .coil-turn-2{--fluid:#e45c31}
.phase-condenser .coil-run-3,.phase-condenser .coil-turn-3{--fluid:#ef7331}
.phase-condenser .coil-run-4,.phase-condenser .coil-turn-4{--fluid:#f28a35}
.phase-condenser .coil-run-5{--fluid:#f5a03b}
.coil-turn{
  position:absolute;
  z-index:1;
  width:38px;
  height:46px;
  border:8px solid var(--fluid);
}
.turn-right{right:2.2%;border-left:0;border-radius:0 25px 25px 0}
.turn-left{left:2.2%;border-right:0;border-radius:25px 0 0 25px}
.coil-turn-1{top:54px}.coil-turn-2{top:99px}.coil-turn-3{top:144px}.coil-turn-4{top:189px}
.run-arrow{
  position:absolute;
  z-index:3;
  top:50%;
  right:7px;
  transform:translateY(-56%);
  color:#fff;
  font-size:13px;
  font-weight:900;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.coil-run.reverse .run-arrow{right:auto;left:7px}
.phase-particle{
  position:absolute;
  z-index:2;
  top:50%;
  left:4%;
  width:7px;
  height:7px;
  transform:translateY(-50%);
  border-radius:50%;
  animation:phaseFlow 3.8s linear infinite;
}
.coil-run.reverse .phase-particle{animation-name:phaseFlowReverse}
.phase-particle.particle-2{animation-delay:-1.25s}
.phase-particle.particle-3{animation-delay:-2.5s}
.phase-particle.droplet{border:1px solid rgba(255,255,255,.9);background:#d5f4ff}
.phase-particle.bubble{width:9px;height:9px;border:2px solid #fff;background:rgba(255,255,255,.14)}
.phase-particle.vapor{width:6px;height:6px;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.2)}
.mass-marker{
  position:absolute;
  z-index:5;
  top:50%;
  left:6%;
  display:none;
  width:25px;
  height:25px;
  transform:translate(-50%,-50%);
  border:3px solid #10233c;
  border-radius:50%;
  background:rgba(255,255,255,.5);
  box-shadow:0 0 0 5px rgba(255,255,255,.7);
  animation:massPulse 1.15s ease-in-out infinite;
}
.coil-run.active{outline:4px solid rgba(255,191,87,.33);outline-offset:3px}
.coil-run.active .mass-marker{display:block}
.coil-port{
  position:absolute;
  z-index:6;
  display:block;
  color:var(--muted);
  font-size:8px;
  font-style:normal;
  font-weight:900;
  letter-spacing:.04em;
  line-height:1.25;
}
.coil-port b{color:var(--navy-700);font-size:9px}
.port-in{top:9px;left:6%}
.port-out{right:6%;bottom:8px;text-align:right}
.phase-slider-label{display:flex;justify-content:space-between;gap:12px;color:var(--navy-700);font-size:11px}
.phase-slider-label span{color:var(--muted);white-space:nowrap}
.phase-slider-label i{color:var(--orange);font-style:normal}
.phase-slider{width:100%;margin:8px 0 0;accent-color:var(--orange);cursor:pointer}
.thermal-chart{
  position:relative;
  min-height:278px;
  overflow:hidden;
  border-left:3px solid var(--navy-700);
  border-bottom:3px solid var(--navy-700);
  border-radius:7px 13px 4px 4px;
  background:
    linear-gradient(rgba(27,58,99,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(27,58,99,.07) 1px,transparent 1px),
    #fff;
  background-size:28px 28px;
}
.axis-label{
  position:absolute;
  z-index:5;
  color:var(--navy-700);
  font-size:8px;
  font-weight:900;
  letter-spacing:.05em;
}
.axis-temperature{top:8px;left:7px}
.axis-progress{right:8px;bottom:6px}
.chart-zone{
  position:absolute;
  z-index:1;
  top:30px;
  bottom:30px;
  display:grid;
  align-content:start;
  justify-items:center;
  padding-top:12px;
  border-right:1px dashed rgba(27,58,99,.24);
  color:var(--navy-700);
  text-align:center;
}
.chart-zone b{font-size:9px;letter-spacing:.06em}
.chart-zone small{font-size:8px}
.evap-chart .zone-latent{left:8%;width:62%;background:rgba(61,127,202,.1)}
.evap-chart .zone-superheat{left:70%;width:23%;background:rgba(37,134,109,.1)}
.cond-chart .zone-desuperheat{left:8%;width:18%;background:rgba(217,76,53,.1)}
.cond-chart .zone-condense{left:26%;width:46%;background:rgba(255,107,53,.11)}
.cond-chart .zone-subcool{left:72%;width:21%;background:rgba(37,134,109,.1)}
.curve-line{
  position:absolute;
  z-index:3;
  height:5px;
  border-radius:999px;
  background:var(--navy-700);
  transform-origin:left center;
  box-shadow:0 0 0 2px rgba(255,255,255,.72);
}
.evap-latent{left:8%;bottom:50%;width:62%}
.evap-superheat{left:70%;bottom:50%;width:30%;transform:rotate(-42deg)}
.cond-desuperheat{left:8%;bottom:79%;width:25%;transform:rotate(42deg)}
.cond-latent{left:26%;bottom:50%;width:46%}
.cond-subcool{left:72%;bottom:50%;width:27%;transform:rotate(40deg)}
.last-phase-marker{
  position:absolute;
  z-index:4;
  top:29%;
  bottom:21%;
  width:0;
  border-left:2px dashed var(--orange);
  color:#9b401f;
  font-size:8px;
  font-weight:900;
  text-indent:5px;
  white-space:nowrap;
}
.evap-chart .last-phase-marker{left:70%}
.cond-chart .last-phase-marker{left:72%}
.chart-marker{
  position:absolute;
  z-index:6;
  left:8%;
  bottom:50%;
  width:16px;
  height:16px;
  transform:translate(-50%,50%);
  border:3px solid #fff;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 3px rgba(255,107,53,.28),0 2px 5px rgba(27,58,99,.3);
  transition:left .12s linear,bottom .12s linear;
}
.phase-reading{
  min-height:145px;
  padding:14px 15px;
  border-left:5px solid var(--orange);
  border-radius:8px 14px 14px 8px;
  background:var(--orange-soft);
}
.phase-reading-state{
  display:inline-block;
  padding:4px 8px;
  border-radius:999px;
  color:#fff;
  background:var(--navy-700);
  font-size:9px;
  font-weight:900;
}
.phase-reading h4{margin:9px 0 4px;color:#9b401f;font-size:17px}
.phase-reading p{margin:0;color:#6e4938;font-size:12px;line-height:1.45}
.phase-rule{margin:0;padding:14px 18px;color:var(--navy-700);background:#edf6ff;font-size:12px;line-height:1.45}

.phase-coil{min-height:278px}
.coil-svg{position:absolute;inset:14px 8px 8px;width:calc(100% - 16px);height:calc(100% - 22px);overflow:visible}
.coil-svg path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.coil-shadow{stroke:#667b8e;stroke-width:23;opacity:.32}
.coil-route{stroke-width:18}
.coil-moving-flow{
  stroke:#fff;
  stroke-width:4;
  stroke-dasharray:.7 3.2;
  opacity:.9;
  animation:continuousCoilFlow .75s linear infinite;
}
.svg-phase-particle{opacity:.95;filter:drop-shadow(0 1px 2px rgba(16,35,60,.35))}
.mass-marker-svg{
  fill:rgba(255,255,255,.5);
  stroke:var(--navy-700);
  stroke-width:4;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 5px rgba(255,255,255,.95));
}
.phase-auto-control{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px}
.phase-play-toggle{
  min-height:30px;
  padding:5px 10px;
  border:1px solid var(--line);
  border-radius:9px;
  color:var(--navy-700);
  background:#fff;
  font-size:10px;
  font-weight:900;
}
.phase-slider{height:5px;margin-top:5px}
.thermal-curve-svg{position:absolute;z-index:3;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.thermal-curve-svg polyline{
  fill:none;
  stroke:var(--navy-700);
  stroke-width:4.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 2px #fff);
}
.chart-marker-svg{
  fill:var(--orange);
  stroke:#fff;
  stroke-width:2.2;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 3px rgba(255,107,53,.55));
}
.last-phase-marker{
  top:auto;
  bottom:31px;
  width:auto;
  padding:3px 6px;
  transform:translateX(-50%);
  border:0;
  border-radius:7px;
  color:#9b401f;
  background:#fff6ef;
  text-indent:0;
  box-shadow:0 2px 7px rgba(27,58,99,.12);
}
.last-phase-marker::before{
  content:"";
  position:absolute;
  bottom:100%;
  left:50%;
  height:151px;
  border-left:2px dashed var(--orange);
}
.last-phase-marker b{position:relative;z-index:2;font-size:8px}
.phase-reading{min-height:126px}

@keyframes phaseFlow{from{left:4%}to{left:92%}}
@keyframes phaseFlowReverse{from{left:92%}to{left:4%}}
@keyframes massPulse{50%{box-shadow:0 0 0 9px rgba(255,255,255,.22)}}
@keyframes continuousCoilFlow{to{stroke-dashoffset:-3.9}}

@media print{
  .phase-particle,.mass-marker,.coil-moving-flow,.air-arrow,.compressor-flow-track>i,
  .piston-head,.piston-rod,.piston-valve,.cycle-label,.scroll-orbit,.scroll-pocket,
  .screw-rotor,.screw-pocket{animation:none}
  .chart-marker{transition:none}
}

.device-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.device-card{padding:15px;border:1px solid var(--line);border-radius:16px;background:#fff;text-align:center}
.device-card svg{width:76px;height:76px;overflow:visible}
.device-card b,.device-card small{display:block}
.device-card small{margin-top:4px;color:var(--muted);line-height:1.4}
.equalization-note{
  display:grid;
  grid-template-columns:150px 1fr;
  align-items:center;
  gap:18px;
  padding:18px;
  border:1px solid rgba(61,127,202,.28);
  border-left:7px solid var(--blue);
  border-radius:10px 18px 18px 10px;
  background:linear-gradient(135deg,var(--blue-soft),#fff);
}
.equalization-symbol{
  display:grid;
  justify-items:center;
  gap:4px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:15px;
  background:#fff;
  text-align:center;
}
.equalization-symbol svg{width:86px;height:86px;overflow:visible}
.equalization-symbol span{color:var(--navy-700);font-size:10px;font-weight:900;letter-spacing:.06em}
.equalization-note h3{margin:0 0 6px;color:var(--navy-700);font-size:20px}
.equalization-note p{margin:0;color:var(--muted);line-height:1.5}
.force-balance{
  display:grid;
  grid-template-columns:1fr 30px 1fr;
  align-items:center;
  gap:7px;
  margin-top:12px;
}
.force-balance span{min-height:62px;padding:9px;border-radius:12px;color:var(--muted);background:#fff;font-size:11px;text-align:center}
.force-balance b{display:block;margin-bottom:2px;color:var(--navy-700);font-size:12px;text-transform:uppercase}
.force-balance i{color:var(--orange);font-size:24px;font-style:normal;font-weight:900;text-align:center}
.regulation-animation{
  overflow:hidden;
  margin:0;
  border:1px solid var(--line);
  border-radius:19px;
  background:#fff;
  box-shadow:0 12px 30px rgba(27,58,99,.08);
}
.regulation-animation img{display:block;width:100%;height:auto;background:#fff}
.regulation-animation figcaption{padding:14px 17px;color:var(--navy-700);background:#eef7f1;font-size:12px;line-height:1.5}
.liquid-line{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  align-items:center;
  gap:10px;
  padding:17px;
  border:1px solid var(--line);
  border-radius:17px;
  background:#f9fbfd;
}
.line-device{text-align:center}
.line-device svg{width:85px;height:60px;overflow:visible}
.line-device b,.line-device small{display:block}
.line-device small{color:var(--muted)}
.line-arrow{color:var(--orange);font-weight:900}
.sensor-pair{display:flex;align-items:center;justify-content:center;gap:10px}
.sensor-pair svg{width:76px;height:54px;overflow:visible}

.evap-checks{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.evap-checks div{padding:14px;border:1px solid var(--line);border-radius:14px;background:#fff}
.evap-checks b{display:block;color:var(--navy-700)}
.evap-checks small{color:var(--muted)}
.pipe-rule{display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;background:var(--blue-soft)}
.pipe-rule span{font-size:34px;color:var(--blue)}
.pipe-rule p{margin:0;color:var(--navy-700)}

.follow-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:24px}
.follow-panel{padding:22px;border:1px solid var(--line);border-radius:22px;background:var(--cream)}
.follow-panel h3{margin:0 0 7px;font-size:25px}
.follow-panel>p{margin:0 0 16px;color:var(--muted)}
.follow-panel .flow-legend{margin-bottom:11px}
.follow-panel .mass-rule{margin-bottom:15px}
.order-buttons{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.order-button{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:70px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:14px;
  color:var(--ink);
  background:#fff;
  text-align:left;
  font-weight:900;
}
.order-button svg{width:50px;height:50px;overflow:visible}
.order-button.correct{border-color:var(--green);background:var(--green-soft)}
.order-button.wrong{border-color:var(--red);background:var(--red-soft)}
.fluid-history{display:grid;gap:7px;margin-top:14px}
.fluid-step{display:grid;grid-template-columns:30px 1fr;gap:8px;padding:9px;border-radius:11px;background:#fff;color:var(--muted);font-size:13px}
.fluid-step b{display:grid;width:27px;height:27px;place-items:center;border-radius:8px;color:#fff;background:var(--green)}
.fluid-step strong{display:block;color:var(--navy-700)}
.fluid-step-compresseur{border-left:5px solid var(--flow-hot)}
.fluid-step-condenseur{border-left:5px solid var(--flow-liquid)}
.fluid-step-detendeur{border-left:5px solid var(--flow-mixture)}
.fluid-step-evaporateur{border-left:5px solid var(--flow-suction)}
.circuit-map[data-flow-step="compresseur"] .flow-hot span,
.circuit-map[data-flow-step="condenseur"] .flow-liquid span,
.circuit-map[data-flow-step="detendeur"] .flow-mixture span,
.circuit-map[data-flow-step="evaporateur"] .flow-suction span{
  background:var(--flow-color);
  color:#fff;
  box-shadow:0 0 0 7px color-mix(in srgb,var(--flow-color) 20%,transparent);
}

.diagnostic-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:22px}
.symptom-card{display:grid;align-content:center;justify-items:center;min-height:340px;padding:28px;border:1px solid #f0b9b9;border-radius:22px;background:linear-gradient(145deg,var(--red-soft),#fff);text-align:center}
.alarm-icon{display:grid;width:82px;height:82px;place-items:center;margin-bottom:18px;border-radius:50%;color:#fff;background:var(--red);box-shadow:0 0 0 11px rgba(184,60,60,.1);font-size:35px;font-weight:900}
.symptom-card h3{margin:0;font-size:28px}
.symptom-card p{margin:10px 0 0;color:#714545}
.diagnostic-card{display:grid;align-content:center;padding:24px;border:1px solid var(--line);border-radius:22px;background:#fff}
.diagnostic-options{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:16px}
.diagnostic-option{
  min-height:58px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:13px;
  color:var(--navy-700);
  background:#fff;
  font-weight:900;
  text-align:left;
}
.diagnostic-option:hover{border-color:var(--blue);background:var(--blue-soft)}
.diagnostic-option.good{border-color:var(--green);background:var(--green-soft)}
.diagnostic-option.bad{border-color:var(--red);background:var(--red-soft)}
.diagnostic-path{margin:10px 0 0;color:var(--muted);font-size:14px}

.quiz-shell{display:grid;grid-template-columns:220px 1fr;gap:24px}
.quiz-meter{display:grid;align-content:center;justify-items:center;padding:22px;border:1px solid var(--line);border-radius:22px;background:var(--cream);text-align:center}
.score-ring{
  --score:0deg;
  display:grid;
  width:142px;
  height:142px;
  place-items:center;
  border-radius:50%;
  background:conic-gradient(var(--green) var(--score),rgba(27,58,99,.1) 0);
}
.score-ring::before{content:"";grid-area:1/1;width:112px;height:112px;border-radius:50%;background:#fff}
.score-ring b{position:relative;grid-area:1/1;font-size:28px}
.quiz-meter p{margin:12px 0 0;color:var(--muted)}
.quiz-card{min-height:380px;padding:24px;border:1px solid var(--line);border-radius:22px;background:#fff}
.quiz-kicker{margin:0 0 7px;color:var(--orange);font-size:12px;font-weight:900;letter-spacing:.08em}
.quiz-card h3{margin:0 0 18px;font-size:25px;line-height:1.35}
.quiz-options{display:grid;gap:9px}
.quiz-option{
  min-height:56px;
  padding:12px 15px;
  border:1px solid var(--line);
  border-radius:13px;
  color:var(--ink);
  background:#fff;
  font-weight:800;
  text-align:left;
}
.quiz-option:hover{border-color:var(--blue);background:var(--blue-soft)}
.quiz-option.good{border-color:var(--green);background:var(--green-soft)}
.quiz-option.bad{border-color:var(--red);background:var(--red-soft)}
.quiz-option:disabled{opacity:1}
.quiz-next,.quiz-restart{margin-top:12px}
.result-panel{display:grid;min-height:350px;align-content:center;justify-items:center;text-align:center}
.result-mark{display:grid;width:96px;height:96px;place-items:center;border-radius:50%;color:#fff;background:var(--green);font-size:42px;font-weight:900}
.result-panel.retry .result-mark{background:var(--orange)}
.result-panel h3{margin:18px 0 8px;font-size:30px}
.result-panel p{max-width:520px;margin:0;color:var(--muted)}

.tech-library{
  width:min(1240px,calc(100% - 40px));
  margin:0 auto 96px;
  scroll-margin-top:94px;
}
.library-heading{
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:28px;
  align-items:end;
  margin-bottom:22px;
}
.library-heading h2{margin:0;font-size:clamp(34px,5vw,58px);letter-spacing:-.015em;line-height:1.05}
.library-heading p:not(.eyebrow){max-width:780px;margin:15px 0 0;color:var(--muted);font-size:18px}
.library-rule{
  display:grid;
  gap:7px;
  padding:17px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
}
.library-rule b{color:var(--orange);font-size:11px;letter-spacing:.09em}
.library-rule span{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--navy-700);
  font-size:13px;
  font-weight:800;
}
.library-rule span::before{
  content:"✓";
  display:grid;
  width:21px;
  height:21px;
  place-items:center;
  border-radius:7px;
  color:#fff;
  background:var(--green);
  font-size:11px;
}
.dossier-list{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:9px;
  margin-bottom:14px;
}
.dossier-tab{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:66px;
  padding:9px 11px;
  border:1px solid var(--line);
  border-radius:15px;
  color:var(--navy-700);
  background:rgba(255,255,255,.82);
  font-size:12px;
  font-weight:900;
  text-align:left;
}
.dossier-tab:hover{border-color:var(--blue);background:#fff}
.dossier-tab.active{border-color:var(--blue);background:var(--blue-soft);box-shadow:0 0 0 3px rgba(61,127,202,.1)}
.dossier-tab svg{flex:0 0 auto;width:42px;height:42px;overflow:visible}
.dossier-view{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:26px;
  background:#fff;
  box-shadow:var(--shadow);
}
.dossier-cover{
  display:grid;
  grid-template-columns:minmax(0,1.32fr) minmax(280px,.68fr);
  min-height:410px;
  border-bottom:1px solid var(--line);
}
.real-view{
  position:relative;
  display:grid;
  min-width:0;
  place-items:center;
  overflow:hidden;
  background:linear-gradient(145deg,#fff,#f4efe7);
}
.real-view::before,.schematic-view::before{
  position:absolute;
  z-index:2;
  top:17px;
  left:17px;
  padding:6px 9px;
  border-radius:999px;
  color:#fff;
  background:var(--navy-700);
  font-size:10px;
  font-weight:900;
  letter-spacing:.09em;
}
.real-view::before{content:"VUE RÉALISTE · ORGANE ISOLÉ"}
.real-view img{
  display:block;
  width:100%;
  height:410px;
  object-fit:contain;
  padding:45px 18px 12px;
}
.schematic-view{
  position:relative;
  display:grid;
  align-content:center;
  justify-items:center;
  gap:18px;
  padding:58px 25px 25px;
  border-left:1px solid var(--line);
  background:
    linear-gradient(rgba(61,127,202,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(61,127,202,.045) 1px,transparent 1px),
    var(--blue-soft);
  background-size:24px 24px;
}
.schematic-view::before{content:"SYMBOLE NORMALISÉ";background:var(--blue)}
.schematic-symbols{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px}
.schematic-symbol-card{
  display:grid;
  min-width:104px;
  min-height:122px;
  place-items:center;
  padding:10px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  text-align:center;
}
.schematic-symbol-card svg{width:72px;height:72px;overflow:visible}
.schematic-symbol-card b{display:block;font-size:11px}
.schematic-view h3{margin:0;font-size:27px;text-align:center;line-height:1.1}
.schematic-view p{margin:0;color:var(--muted);font-size:13px;text-align:center}
.dossier-body{padding:clamp(22px,4vw,42px)}
.dossier-body>.professional-definition{margin:0 0 22px}
.dossier-title-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  margin-bottom:24px;
}
.dossier-number{
  display:inline-block;
  margin-bottom:8px;
  color:var(--orange);
  font-size:12px;
  font-weight:900;
  letter-spacing:.1em;
}
.dossier-title-row h3{margin:0;font-size:clamp(30px,4vw,48px);letter-spacing:-.015em;line-height:1.05}
.dossier-title-row p{max-width:720px;margin:10px 0 0;color:var(--muted);font-size:17px}
.dossier-listen{
  min-height:45px;
  padding:9px 14px;
  border:0;
  border-radius:12px;
  color:#fff;
  background:var(--blue);
  font-size:13px;
  font-weight:900;
}
.dossier-speech{flex:0 0 auto;display:flex;gap:7px}
.dossier-sheet-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.dossier-sheet{
  min-height:235px;
  padding:19px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
}
.dossier-sheet:nth-child(4n+1){background:linear-gradient(145deg,#fff,var(--blue-soft))}
.dossier-sheet:nth-child(4n+2){background:linear-gradient(145deg,#fff,var(--green-soft))}
.dossier-sheet:nth-child(4n+3){background:linear-gradient(145deg,#fff,var(--orange-soft))}
.sheet-label{
  display:inline-block;
  margin-bottom:10px;
  padding:5px 8px;
  border-radius:8px;
  color:#fff;
  background:var(--navy-700);
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
}
.dossier-sheet h4{margin:0 0 10px;font-size:21px;line-height:1.2}
.dossier-sheet ul{margin:0;padding-left:20px;color:var(--muted)}
.dossier-sheet li{margin:6px 0}
.dossier-sheet strong{color:var(--navy-700)}
.oral-card{
  grid-column:1/-1;
  min-height:0;
  padding:20px;
  border:0;
  color:var(--ink);
  background:var(--cream)!important;
}
.oral-card blockquote{
  margin:0;
  padding-left:16px;
  border-left:5px solid var(--orange);
  color:var(--navy-700);
  font-size:18px;
  font-weight:800;
}
.dossier-source-note{
  margin:17px 0 0;
  color:var(--muted);
  font-size:12px;
}

.takeaway{
  width:min(1100px,calc(100% - 40px));
  margin:0 auto 90px;
  padding:40px;
  border:1px solid var(--line);
  border-radius:28px;
  background:#fff;
  box-shadow:var(--shadow);
  text-align:center;
}
.takeaway h2{margin:0 0 28px;font-size:clamp(30px,5vw,54px);letter-spacing:-.015em}
.takeaway-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:28px}
.takeaway-grid div{padding:20px 12px;border:1px solid var(--line);border-radius:17px;background:var(--cream)}
.takeaway-number{display:grid;width:35px;height:35px;place-items:center;margin:0 auto 12px;border-radius:11px;color:#fff;background:var(--blue);font-weight:900}
.takeaway-grid b,.takeaway-grid small{display:block}
.takeaway-grid small{color:var(--muted)}
.page-footer{display:flex;justify-content:space-between;gap:20px;padding:24px clamp(20px,4vw,64px);border-top:1px solid var(--line);color:var(--muted);background:#fff;font-size:13px}

@media (max-width:1050px){
  .hero{grid-template-columns:1fr;min-height:0;padding-top:48px}
  .hero-copy{max-width:780px}
  .hero-visual{max-width:900px}
  .memory-strip{grid-template-columns:1fr 1fr}
  .memory-strip div:nth-child(2){border-right:0}.memory-strip div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .mission-grid{grid-template-columns:1fr 1fr}
  .circuit-layout,.follow-layout{grid-template-columns:1fr}
  .organ-layout{grid-template-columns:250px 1fr}
  .quiz-shell{grid-template-columns:180px 1fr}
  .dossier-list{grid-template-columns:repeat(2,1fr)}
  .dossier-cover{grid-template-columns:1fr .75fr}
  .library-heading{grid-template-columns:1fr 300px}
}
@media (max-width:760px){
  body{font-size:16px}
  .topbar{position:relative;padding-inline:16px}.time-badge{display:none}.topbar-tools .quiet-button{font-size:0}.topbar-tools .quiet-button::after{content:"↻";font-size:21px}
  .hero,.course-shell,.memory-strip,.takeaway{width:min(100% - 24px,1240px)}
  .hero{gap:28px;padding-top:34px}.hero-copy{padding-inline:4px}.hero-visual{border-radius:20px}.hero-visual figcaption{font-size:12px}
  .hero-cross{min-height:400px;padding:55px 15px 22px}.hero-organ{min-width:120px;padding:9px}.hero-organ svg{width:64px;height:64px}
  .goal-row{display:grid;grid-template-columns:1fr}.goal-row span{border-radius:13px}
  .memory-strip{grid-template-columns:1fr;margin-bottom:60px}.memory-strip div{border-right:0;border-bottom:1px solid var(--line)!important}.memory-strip div:last-child{border-bottom:0!important}
  .course-head{display:block}.course-progress{width:100%;margin-top:15px}
  .lesson-card{min-height:0;padding:20px;border-radius:19px}.lesson-heading{display:block}.speech-panel{justify-items:start;margin-top:18px}.lesson-zone{min-height:0}
  .mission-grid,.tech-grid,.architecture-grid,.oil-grid,.device-grid,.evap-checks,.diagnostic-options,.order-buttons,.takeaway-grid{grid-template-columns:1fr 1fr}
  .reveal-card{min-height:430px}
  .circuit-map{--pipe-x:15%;--pipe-y:16%;min-height:440px}.circuit-organ{min-width:103px}.circuit-organ svg{width:56px;height:56px}.state-tag{display:none}
  .organ-layout,.diagnostic-layout,.quiz-shell{grid-template-columns:1fr}.organ-focus{min-height:320px}
  .compressor-flow-card,.air-exchange,.technology-explanation,.regulation-slide{grid-template-columns:1fr}
  .compressor-flow-track{min-height:82px}.technology-explanation{padding:14px}.mechanism{min-height:270px}
  .air-channel{min-height:125px}.air-transfer-rule{grid-column:auto}
  .phase-lab-grid{grid-template-columns:1fr}.coil-card{border-right:0;border-bottom:1px solid var(--line)}
  .phase-lab-heading{align-items:flex-start;flex-direction:column}.phase-direction{width:100%;justify-content:center}
  .energy-formula{grid-template-columns:1fr}.energy-formula i{transform:rotate(90deg)}
  .equalization-note{grid-template-columns:1fr}.equalization-symbol{grid-template-columns:auto 1fr;align-items:center;justify-content:center}.equalization-symbol span{text-align:left}
  .liquid-line{grid-template-columns:1fr}.line-arrow{transform:rotate(90deg);text-align:center}
  .quiz-meter{grid-template-columns:auto 1fr;justify-items:start;text-align:left}.score-ring{width:100px;height:100px}.score-ring::before{width:76px;height:76px}.score-ring b{font-size:20px}
  .tech-library{width:min(100% - 24px,1240px)}.library-heading{grid-template-columns:1fr}.library-rule{max-width:none}
  .dossier-cover{grid-template-columns:1fr}.real-view img{height:330px}.schematic-view{min-height:280px;border-top:1px solid var(--line);border-left:0}
  .dossier-title-row{display:block}.dossier-listen{margin-top:16px}.dossier-sheet-grid{grid-template-columns:1fr}.oral-card{grid-column:auto}
  .lesson-nav{gap:8px}.lesson-nav .primary-button,.lesson-nav .back-button{padding-inline:12px;font-size:14px}
  .takeaway{padding:26px 18px}.page-footer{display:grid}
}
@media (max-width:500px){
  .brand small{display:none}.brand strong{font-size:14px}.brand-mark{width:40px;height:40px}
  h1{font-size:43px}
  .hero-schematic{min-height:425px}.hero-cross{min-height:365px;gap:6px;padding:52px 8px 16px}.hero-organ{min-width:88px;padding:7px 4px}.hero-organ svg{width:52px;height:52px}.hero-organ b{font-size:10px}.hero-organ small{font-size:8px}.hero-cross-center{width:78px;height:78px}.hero-cross-center b{font-size:13px}.hero-cross-center span{font-size:8px}
  .dossier-list{grid-template-columns:1fr}.dossier-tab{min-height:58px}.real-view img{height:280px;padding-top:50px}.schematic-symbol-card{min-width:92px}.dossier-body{padding:19px}.dossier-sheet{min-height:0}
  .mission-grid,.tech-grid,.architecture-grid,.oil-grid,.device-grid,.evap-checks,.diagnostic-options,.order-buttons,.takeaway-grid{grid-template-columns:1fr}
  .technology-picker,.movement-principles,.temperature-memory,.phase-slide-reminder{grid-template-columns:1fr}
  .technology-picker button{grid-template-columns:62px 1fr}.technology-picker svg{width:52px;height:52px}
  .flow-legend{grid-template-columns:1fr}
  .circuit-map{min-height:390px}.circuit-organ{min-width:84px;padding:6px}.circuit-organ strong{font-size:10px}.circuit-organ svg{width:48px;height:48px}.pipe-loop{border-width:5px}
  .cross-panel{padding:17px}.memory-cross{min-height:195px}
  .organ-focus{min-height:280px}.organ-focus .symbol-wrap{width:145px;height:145px}.organ-focus .symbol-wrap svg{width:108px;height:108px}
  .coil-card,.thermal-card{padding-inline:11px}.phase-coil{min-height:286px}.thermal-chart{min-height:255px}
  .kelvin-card{align-items:flex-start;flex-direction:column}.kelvin-card b{max-width:none;text-align:left}
  .force-balance{grid-template-columns:1fr}.force-balance i{transform:rotate(90deg)}
  .principle{grid-template-columns:1fr}.principle-number{width:38px;height:38px}
  .professional-definition>div{display:grid}.professional-definition>div strong{width:max-content}
  .lesson-nav>span{display:none}
}

@media (max-height:850px) and (min-width:761px){
  .course-head{display:none}
  .lesson-card{padding:20px 25px}
  .lesson-heading{margin-bottom:13px}
  .lesson-heading h2{font-size:34px}
  .lesson-intro{font-size:14px}
  .lesson-nav{margin-top:13px;padding-top:11px}
  .phase-lab-heading{padding-block:11px}
  .phase-coil,.thermal-chart{min-height:235px}
  .phase-reading{min-height:102px;padding:10px 13px}
  .phase-rule{padding-block:9px}
  .last-phase-marker::before{height:117px}
  .mechanism{min-height:245px}
  .technology-picker button{min-height:76px}
  .technology-explanation{padding-block:12px}
}