.science-air-course {
  --air-ink: #29272d;
  --air-green: #0fbc53;
  --air-green-soft: #e5f8eb;
  --air-blue: #2f73d9;
  --air-blue-soft: #e2efff;
  --air-cyan: #2bb7c9;
  --air-cyan-soft: #e0f8fb;
  --air-violet: #9267ea;
  --air-violet-soft: #f2ebff;
  --air-coral: #fd7666;
  --air-coral-soft: #ffe7e2;
  --air-yellow: #f6cc24;
  --air-yellow-soft: #fff5c8;
  --air-orange: #f29c45;
  --air-orange-soft: #fff0dc;
  --air-indigo: #5b5bd6;
  --air-paper: #fffdf7;
}

.science-air-course :where(.kid-step-visual, .kid-lab-visual, .kid-summary-example-visual) .mia-air-proof {
  width: min(100%, 980px);
  margin-inline: auto;
}

.mia-air-proof.is-compact > figcaption { display: none; }
.mia-air-proof.is-compact .mia-experiment__scene { min-height: 290px; }
.mia-air-proof.is-compact .mia-experiment__reading { min-height: 0; }
.mia-air-proof.is-compact .mia-field__verdict { padding-top: 11px; }
.mia-experiment__body:has(.mia-experiment__toggle:checked) .mia-air-seal.is-after,
.mia-experiment__body:has(.mia-experiment__toggle:checked) .mia-air-paper-proof.is-after,
.mia-experiment__body:has(.mia-experiment__toggle:checked) .mia-air-return.is-after { display: flex; }
.mia-experiment__body:has(.mia-experiment__toggle:checked) .mia-air-water-limit.is-after,
.mia-experiment__body:has(.mia-experiment__toggle:checked) .mia-air-streams.is-after { display: block; }
.mia-experiment__body:has(.mia-experiment__toggle:checked) .mia-air-force-chain.is-after { display: grid; }

.mia-air-room-label,
.mia-air-space-note,
.mia-air-cap,
.mia-air-link-label,
.mia-air-mass-rule {
  position: absolute;
  z-index: 12;
  top: 5%;
  display: grid;
  padding: 8px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 6px 0 rgba(41, 39, 45, .08);
  line-height: 1.08;
}

.mia-air-room-label span,
.mia-air-space-note span,
.mia-air-cap span,
.mia-air-link-label span,
.mia-air-mass-rule span {
  color: var(--air-blue);
  font-size: clamp(9px, 1.35vw, 12px);
  font-weight: 950;
  letter-spacing: .08em;
}

.mia-air-room-label b,
.mia-air-space-note b,
.mia-air-cap b,
.mia-air-link-label b,
.mia-air-mass-rule b {
  margin-top: 3px;
  font-family: var(--font-body);
  font-size: clamp(9px, 1.25vw, 12px);
  font-weight: 750;
}

/* 01 · The same bag captures the room air. */
.mia-experiment__scene--air-capture {
  background: linear-gradient(180deg, #f5f3ea 0 73%, #ead6b7 73% 80%, #c99f70 80% 100%);
}

.mia-air-room-label { top: 6%; left: 6%; color: var(--air-violet); }
.mia-air-room-label span { color: var(--air-violet); }
.mia-air-capture-path {
  position: absolute;
  z-index: 3;
  top: 25%;
  right: 8%;
  left: 8%;
  height: 36%;
  color: var(--air-blue);
}
.mia-air-capture-path::before {
  position: absolute;
  top: 36%;
  right: 5%;
  left: 5%;
  height: 6px;
  border-radius: 99px;
  background: repeating-linear-gradient(90deg, var(--air-blue) 0 18px, transparent 18px 29px);
  content: '';
}
.mia-air-capture-path::after {
  position: absolute;
  top: calc(36% - 7px);
  right: 4%;
  width: 17px;
  height: 17px;
  border-top: 6px solid var(--air-blue);
  border-right: 6px solid var(--air-blue);
  content: '';
  transform: rotate(45deg);
}
.mia-air-capture-path > i {
  position: absolute;
  top: calc(36% - 8px);
  width: 20px;
  height: 20px;
  border: 4px solid var(--air-cyan);
  border-right-color: transparent;
  border-radius: 50%;
}
.mia-air-capture-path i:nth-child(1) { left: 12%; }
.mia-air-capture-path i:nth-child(2) { left: 26%; scale: .72; }
.mia-air-capture-path i:nth-child(3) { right: 20%; scale: .86; }
.mia-air-capture-path > span {
  position: absolute;
  top: -3%;
  right: 5%;
  left: 5%;
  font-size: clamp(9px, 1.25vw, 12px);
  font-weight: 950;
  letter-spacing: .05em;
  text-align: center;
}

.mia-air-bag {
  position: absolute;
  z-index: 7;
  top: 16%;
  right: 17%;
  bottom: 14%;
  left: 17%;
}
.mia-air-bag__body {
  position: absolute;
  bottom: 7%;
  left: 50%;
  width: 34%;
  height: 63%;
  border: 5px solid rgba(47, 115, 217, .7);
  border-top: 0;
  border-radius: 8px 8px 36px 36px;
  background: linear-gradient(100deg, rgba(226, 239, 255, .28), rgba(255, 255, 255, .84) 48%, rgba(43, 183, 201, .2));
  box-shadow: inset 13px 0 17px rgba(255, 255, 255, .76), 0 18px 23px rgba(47, 115, 217, .15);
  transform: translateX(-50%);
  transition: width .62s cubic-bezier(.2, .85, .25, 1), height .62s cubic-bezier(.2, .85, .25, 1), border-radius .62s ease;
}
.mia-air-bag__body::before,
.mia-air-bag__body::after {
  position: absolute;
  top: 7%;
  bottom: 8%;
  width: 20%;
  border: 2px solid rgba(47, 115, 217, .18);
  border-block-color: transparent;
  border-radius: 50%;
  content: '';
}
.mia-air-bag__body::before { left: 9%; }
.mia-air-bag__body::after { right: 9%; }
.mia-air-bag__body > i {
  position: absolute;
  width: 24%;
  height: 7%;
  border-top: 3px solid rgba(47, 115, 217, .28);
  border-radius: 50%;
}
.mia-air-bag__body > i:nth-child(1) { top: 24%; left: 11%; rotate: -18deg; }
.mia-air-bag__body > i:nth-child(2) { top: 49%; right: 10%; rotate: 16deg; }
.mia-air-bag__body > i:nth-child(3) { bottom: 15%; left: 30%; width: 38%; }
.mia-air-bag__body > strong {
  position: absolute;
  top: 45%;
  right: 7%;
  left: 7%;
  color: var(--air-violet);
  font-size: clamp(11px, 2vw, 18px);
  font-weight: 950;
  line-height: 1.05;
  text-align: center;
}
.mia-air-bag__zip {
  position: absolute;
  z-index: 8;
  top: 28%;
  left: 50%;
  width: 29%;
  height: 15px;
  border: 4px solid var(--air-blue);
  border-inline-color: transparent;
  border-radius: 50%;
  transform: translateX(-50%);
  transition: top .62s ease, width .62s ease, border-color .35s ease;
}
.mia-air-bag__zip i {
  position: absolute;
  top: -8px;
  right: 13%;
  width: 15px;
  height: 15px;
  border-radius: 5px;
  background: var(--air-coral);
  box-shadow: 0 4px 0 #d85345;
}
.mia-air-bag__measure {
  position: absolute;
  right: 17%;
  bottom: 0;
  left: 17%;
  display: grid;
  justify-items: center;
}
.mia-air-bag__measure span { width: 33%; height: 4px; border-radius: 99px; background: var(--air-blue); transition: width .62s ease; }
.mia-air-bag__measure b { margin-top: 5px; padding: 3px 8px; border-radius: 7px; background: var(--air-yellow); font-size: clamp(9px, 1.3vw, 12px); }
.mia-air-seal { position: absolute; z-index: 12; top: 7%; right: 6%; display: flex; align-items: center; gap: 7px; color: var(--air-green); font-size: clamp(10px, 1.35vw, 13px); font-weight: 950; }
.mia-air-seal i { display: grid; width: 28px; height: 28px; border-radius: 50%; background: var(--air-green); color: #fff; font-style: normal; place-items: center; }
.mia-experiment__body:has(.mia-experiment__toggle:checked) .mia-air-bag__body { width: 56%; height: 76%; border-radius: 42% 46% 38% 44% / 29% 31% 48% 51%; }
.mia-experiment__body:has(.mia-experiment__toggle:checked) .mia-air-bag__zip { top: 18%; width: 50%; border-color: var(--air-coral); border-inline-color: transparent; }
.mia-experiment__body:has(.mia-experiment__toggle:checked) .mia-air-bag__measure span { width: 55%; background: var(--air-green); }

/* 02 · The water stops because the inverted glass already contains air. */
.mia-experiment__scene--air-space { background: linear-gradient(180deg, #f7f3e8 0 78%, #e7d6b5 78% 84%, #c99f70 84% 100%); }
.mia-air-space-note { top: 5%; left: 5%; }
.mia-air-tank {
  position: absolute;
  z-index: 2;
  top: 11%;
  right: 7%;
  bottom: 8%;
  left: 7%;
  overflow: hidden;
  border: 5px solid rgba(47, 115, 217, .72);
  border-top: 0;
  border-radius: 0 0 30px 30px;
  background: rgba(255, 255, 255, .25);
  box-shadow: inset 12px 0 18px rgba(255, 255, 255, .56), 0 17px 22px rgba(47, 115, 217, .14);
}
.mia-air-tank__water { position: absolute; z-index: 1; top: 43%; right: 0; bottom: 0; left: 0; background: linear-gradient(180deg, #baf1f5, var(--air-cyan) 68%, #2398bd); opacity: .76; }
.mia-air-tank__water::before { position: absolute; top: -8px; right: -2%; left: -2%; height: 18px; border-radius: 50%; background: #c9f5f6; content: ''; }
.mia-air-tank__line { position: absolute; z-index: 6; top: 41.5%; right: 0; left: 0; border-top: 4px solid var(--air-blue); }
.mia-air-tank__line span { position: absolute; top: 7px; left: 3%; padding: 3px 7px; border-radius: 6px; background: rgba(255, 255, 255, .85); color: var(--air-blue); font-size: clamp(8px, 1.15vw, 11px); font-weight: 950; }
.mia-air-inverted-glass {
  position: absolute;
  z-index: 5;
  top: 2%;
  left: 50%;
  width: clamp(150px, 32%, 260px);
  height: 62%;
  border: 5px solid rgba(91, 91, 214, .72);
  border-bottom: 0;
  border-radius: 30px 30px 0 0;
  background: linear-gradient(90deg, rgba(235, 234, 255, .8), rgba(255, 255, 255, .94) 52%, rgba(226, 239, 255, .72));
  box-shadow: inset 15px 0 20px rgba(255, 255, 255, .88), 0 16px 22px rgba(91, 91, 214, .17);
  transform: translateX(-50%);
  transition: top .68s cubic-bezier(.2, .85, .25, 1);
}
.mia-air-glass-highlight { position: absolute; top: 14%; bottom: 12%; left: 9%; width: 12%; border-radius: 99px; background: rgba(255, 255, 255, .85); }
.mia-air-glass-rim { position: absolute; right: -10px; bottom: -9px; left: -10px; height: 20px; border: 5px solid var(--air-indigo); border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 7px 9px rgba(91, 91, 214, .16); }
.mia-air-paper { position: absolute; z-index: 8; top: 8%; right: 15%; left: 15%; display: grid; min-height: 44px; border: 3px solid var(--air-orange); border-radius: 7px; background: linear-gradient(180deg, #fff8dc, var(--air-yellow-soft)); color: var(--air-orange); box-shadow: 0 6px 0 rgba(242, 156, 69, .18); place-items: center; }
.mia-air-paper i { position: absolute; top: -7px; left: 50%; width: 34px; height: 10px; border-radius: 8px; background: var(--air-coral); transform: translateX(-50%); }
.mia-air-paper b { font-size: clamp(9px, 1.35vw, 12px); }
.mia-air-paper small { color: var(--air-green); font-size: clamp(8px, 1.15vw, 10px); font-weight: 950; }
.mia-air-pocket { position: absolute; right: 9%; bottom: 11%; left: 9%; display: grid; height: 47%; border: 3px dashed var(--air-violet); border-radius: 21px; color: var(--air-violet); place-items: center; text-align: center; }
.mia-air-pocket span { font-size: clamp(11px, 1.8vw, 17px); font-weight: 950; line-height: 1.05; }
.mia-air-water-limit { position: absolute; z-index: 9; top: 76%; left: 50%; width: clamp(140px, 38%, 260px); color: var(--air-coral); transform: translateX(-50%); }
.mia-air-water-limit i { display: block; height: 5px; background: repeating-linear-gradient(90deg, var(--air-coral) 0 12px, transparent 12px 20px); }
.mia-air-water-limit span { display: block; width: max-content; max-width: 100%; margin: 6px auto 0; padding: 2px 5px; border-radius: 6px; background: rgba(255, 255, 255, .9); font-size: clamp(8px, 1.1vw, 10px); font-weight: 950; line-height: 1.1; text-align: center; }
.mia-air-paper-proof { position: absolute; z-index: 13; top: 5%; right: 5%; display: flex; max-width: 42%; align-items: center; justify-content: flex-end; gap: 7px; color: var(--air-green); font-size: clamp(9px, 1.3vw, 12px); font-weight: 950; line-height: 1.1; text-align: right; }
.mia-air-paper-proof i { display: grid; width: 27px; height: 27px; border-radius: 50%; background: var(--air-green); color: #fff; font-style: normal; place-items: center; }
.mia-air-paper-proof span { min-width: 0; white-space: normal; }
.mia-experiment__body:has(.mia-experiment__toggle:checked) .mia-air-inverted-glass { top: 13%; }

/* 03 · A sealed syringe compresses the same air. */
.mia-experiment__scene--air-compression { background: linear-gradient(180deg, #f7f3e8 0 76%, #ead6b7 76% 82%, #c99f70 82% 100%); }
.mia-air-cap { top: 6%; right: 6%; grid-template-columns: auto 1fr; align-items: center; gap: 8px; }
.mia-air-cap i { display: grid; grid-row: 1 / 3; width: 28px; height: 28px; border-radius: 50%; background: var(--air-coral); color: #fff; font-size: 18px; font-style: normal; font-weight: 950; place-items: center; }
.mia-air-cap span { color: var(--air-coral); }
.mia-air-syringe { position: absolute; z-index: 5; top: 35%; right: 7%; left: 7%; height: 132px; }
.mia-air-syringe__barrel { position: absolute; top: 0; right: 8%; bottom: 0; left: 24%; border: 5px solid rgba(47, 115, 217, .75); border-radius: 15px; background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(226, 239, 255, .62)); box-shadow: inset 0 12px 16px rgba(255, 255, 255, .7), 0 17px 22px rgba(47, 115, 217, .14); }
.mia-air-syringe__barrel::before,
.mia-air-syringe__barrel::after { position: absolute; top: -13px; bottom: -13px; width: 13px; border-radius: 6px; background: var(--air-blue); content: ''; }
.mia-air-syringe__barrel::before { left: -9px; }
.mia-air-syringe__barrel::after { right: -9px; }
.mia-air-syringe__ticks { position: absolute; z-index: 8; top: 7px; right: 12px; left: 12px; display: flex; justify-content: space-between; color: var(--air-blue); }
.mia-air-syringe__ticks i { font-size: clamp(8px, 1.15vw, 10px); font-style: normal; font-weight: 950; }
.mia-air-syringe__ticks i::after { display: block; width: 3px; height: 12px; margin: 3px auto; background: var(--air-blue); content: ''; }
.mia-air-syringe__air { position: absolute; z-index: 3; top: 36px; right: 8px; bottom: 8px; left: 8%; display: grid; border-radius: 9px; background: linear-gradient(90deg, #dfd4ff, var(--air-violet-soft)); color: var(--air-violet); place-items: center; text-align: center; transition: left .65s cubic-bezier(.2, .85, .25, 1); }
.mia-air-syringe__air::after { position: absolute; inset: 8px; border: 2px dashed rgba(146, 103, 234, .35); border-radius: 7px; content: ''; }
.mia-air-syringe__air strong { z-index: 2; font-size: clamp(11px, 1.7vw, 16px); font-weight: 950; line-height: 1.05; }
.mia-air-syringe__piston { position: absolute; z-index: 6; top: 30px; bottom: 5px; left: 3%; width: 13px; border-radius: 5px; background: var(--air-coral); box-shadow: 4px 0 0 rgba(216, 83, 69, .2); transition: left .65s cubic-bezier(.2, .85, .25, 1); }
.mia-air-syringe__handle { position: absolute; z-index: 7; top: -12px; bottom: -12px; left: 2%; width: 18px; border-radius: 7px; background: linear-gradient(90deg, #e65d50, var(--air-coral)); box-shadow: 0 10px 13px rgba(253, 118, 102, .18); transition: left .65s cubic-bezier(.2, .85, .25, 1); }
.mia-air-syringe__rod { position: absolute; z-index: 6; top: 50%; left: 3%; width: 25%; height: 7px; border-radius: 99px; background: var(--air-coral); transform: translateY(-50%); transition: left .65s cubic-bezier(.2, .85, .25, 1), width .65s ease; }
.mia-air-syringe__tip { position: absolute; top: 50%; right: 0; width: 9%; height: 22px; border-radius: 0 9px 9px 0; background: var(--air-blue); transform: translateY(-50%); }
.mia-air-syringe__tip i { position: absolute; top: -7px; right: -8px; width: 16px; height: 36px; border-radius: 6px; background: var(--air-coral); box-shadow: 0 5px 0 #d85345; }
.mia-air-volume-readout { position: absolute; z-index: 10; top: 6%; left: 6%; display: grid; min-width: 126px; padding: 9px 12px; border-radius: 15px; background: var(--air-yellow-soft); box-shadow: 0 6px 0 rgba(242, 156, 69, .25); }
.mia-air-volume-readout span { color: var(--air-orange); font-size: clamp(8px, 1.15vw, 10px); font-weight: 950; letter-spacing: .08em; }
.mia-air-volume-readout strong { color: var(--air-orange); font-size: clamp(22px, 3.6vw, 34px); line-height: 1; }
.mia-air-return { position: absolute; z-index: 10; right: 8%; bottom: 5%; align-items: center; gap: 8px; padding: 5px 9px; border-radius: 10px; background: rgba(255, 231, 226, .94); color: var(--air-coral); box-shadow: 0 5px 0 rgba(253, 118, 102, .18); }
.mia-air-return i { font-size: 32px; font-style: normal; font-weight: 950; }
.mia-air-return strong { font-size: clamp(9px, 1.3vw, 12px); font-weight: 950; }
.mia-experiment__body:has(.mia-experiment__toggle:checked) .mia-air-syringe__piston { left: 61%; }
.mia-experiment__body:has(.mia-experiment__toggle:checked) .mia-air-syringe__air { left: 65%; }
.mia-experiment__body:has(.mia-experiment__toggle:checked) .mia-air-syringe__handle { left: 55%; }
.mia-experiment__body:has(.mia-experiment__toggle:checked) .mia-air-syringe__rod { left: 56%; width: 10%; }

/* 04 · The sealed air line transmits a push from A to B. */
.mia-experiment__scene--air-push { background: linear-gradient(180deg, #f7f3e8 0 76%, #ead6b7 76% 82%, #c99f70 82% 100%); }
.mia-air-link-label { top: 5%; left: 50%; width: max-content; max-width: 82%; text-align: center; transform: translateX(-50%); }
.mia-air-linked { position: absolute; z-index: 6; top: 26%; right: 4%; left: 4%; display: grid; height: 150px; grid-template-columns: minmax(0, 1fr) minmax(54px, .34fr) minmax(0, 1fr); align-items: center; }
.mia-air-linked__unit { position: relative; height: 120px; }
.mia-air-linked__unit > strong { position: absolute; top: 0; left: 50%; color: var(--air-blue); font-size: clamp(10px, 1.5vw, 14px); font-weight: 950; transform: translateX(-50%); }
.mia-air-linked__unit > small { position: absolute; right: 0; bottom: 0; left: 0; color: var(--air-coral); font-size: clamp(8px, 1.1vw, 10px); font-weight: 950; text-align: center; }
.mia-air-linked__barrel { position: absolute; top: 31%; width: 63%; height: 55px; border: 4px solid rgba(47, 115, 217, .76); border-radius: 11px; background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(226, 239, 255, .62)); box-shadow: 0 11px 14px rgba(47, 115, 217, .13); }
.mia-air-linked__unit.is-a .mia-air-linked__barrel { right: 0; }
.mia-air-linked__unit.is-b .mia-air-linked__barrel { left: 0; }
.mia-air-linked__barrel::after { position: absolute; top: 50%; width: 17%; height: 11px; background: var(--air-violet); content: ''; transform: translateY(-50%); }
.mia-air-linked__unit.is-a .mia-air-linked__barrel::after { right: -17%; border-radius: 0 7px 7px 0; }
.mia-air-linked__unit.is-b .mia-air-linked__barrel::after { left: -17%; border-radius: 7px 0 0 7px; }
.mia-air-linked__barrel > i { position: absolute; inset: 6px; border-radius: 6px; background: var(--air-violet-soft); }
.mia-air-linked__barrel > b { position: absolute; z-index: 2; top: 50%; left: 50%; color: var(--air-violet); font-size: clamp(9px, 1.2vw, 11px); transform: translate(-50%, -50%); }
.mia-air-linked__plunger { position: absolute; top: 25%; width: 40%; height: 70px; transition: left .58s cubic-bezier(.2, .85, .25, 1), right .58s cubic-bezier(.2, .85, .25, 1); }
.mia-air-linked__unit.is-a .mia-air-linked__plunger { left: 0; }
.mia-air-linked__unit.is-b .mia-air-linked__plunger { right: 8%; }
.mia-air-linked__plunger > i { position: absolute; top: 50%; right: 0; left: 0; height: 6px; border-radius: 99px; background: var(--air-coral); transform: translateY(-50%); }
.mia-air-linked__plunger > span { position: absolute; top: 0; width: 13px; height: 100%; border-radius: 6px; background: var(--air-coral); box-shadow: 0 8px 11px rgba(253, 118, 102, .17); }
.mia-air-linked__unit.is-a .mia-air-linked__plunger > span { left: 0; }
.mia-air-linked__unit.is-b .mia-air-linked__plunger > span { right: 0; }
.mia-air-linked__tube { position: relative; height: 58px; border-top: 8px solid var(--air-violet); border-radius: 50%; color: var(--air-violet); text-align: center; }
.mia-air-linked__tube::before,
.mia-air-linked__tube::after { position: absolute; top: -8px; width: 10px; height: 8px; background: var(--air-violet); content: ''; }
.mia-air-linked__tube::before { left: -4px; }
.mia-air-linked__tube::after { right: -4px; }
.mia-air-linked__tube > span { display: block; margin-top: 9px; font-size: clamp(8px, 1.1vw, 10px); font-weight: 950; }
.mia-air-linked__tube > b { display: block; margin-top: 8px; color: var(--air-coral); font-size: clamp(12px, 2vw, 19px); letter-spacing: .09em; }
.mia-air-force-chain { position: absolute; z-index: 9; right: 18%; bottom: 7%; left: 18%; display: grid; grid-template-columns: 35px 1fr 58px 1fr 35px; align-items: center; gap: 6px; }
.mia-air-force-chain span { display: grid; height: 30px; border-radius: 9px; background: var(--air-green); color: #fff; font-size: 11px; font-weight: 950; place-items: center; }
.mia-air-force-chain i { color: var(--air-green); font-size: 21px; font-style: normal; font-weight: 950; text-align: center; }
.mia-experiment__body:has(.mia-experiment__toggle:checked) .mia-air-linked__unit.is-a .mia-air-linked__plunger { left: 20%; }
.mia-experiment__body:has(.mia-experiment__toggle:checked) .mia-air-linked__unit.is-b .mia-air-linked__plunger { right: 0; }

/* 05 · Two readings stay attached to the same labelled bottle. */
.mia-experiment__scene--air-mass { background: linear-gradient(180deg, #f7f3e8 0 76%, #ead6b7 76% 82%, #c99f70 82% 100%); }
.mia-air-mass-rule { top: 5%; left: 50%; width: max-content; max-width: 90%; text-align: center; transform: translateX(-50%); }
.mia-air-mass-rule span { color: var(--air-green); }
.mia-air-mass-compare { position: absolute; z-index: 6; top: 19%; right: 4%; bottom: 12%; left: 4%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(70px, .34fr) minmax(0, 1fr); align-items: end; }
.mia-air-mass-compare article { display: grid; justify-items: center; gap: 5px; transition: opacity .35s ease, translate .45s ease; }
.mia-air-mass-compare article > span { color: var(--air-blue); font-size: clamp(9px, 1.3vw, 12px); font-weight: 950; letter-spacing: .08em; }
.mia-air-mass-compare .is-after-measure { opacity: .38; }
.mia-air-bottle { position: relative; width: clamp(78px, 12vw, 112px); height: clamp(116px, 17vw, 158px); border: 5px solid rgba(47, 115, 217, .75); border-radius: 19px 19px 35px 35px; background: linear-gradient(100deg, rgba(226, 239, 255, .45), rgba(255, 255, 255, .9) 52%, rgba(43, 183, 201, .17)); box-shadow: inset 12px 0 16px rgba(255, 255, 255, .76), 0 16px 20px rgba(47, 115, 217, .14); }
.mia-air-bottle__neck { position: absolute; top: -22px; left: 50%; width: 42%; height: 25px; border: 5px solid var(--air-blue); border-bottom: 0; border-radius: 7px 7px 0 0; background: rgba(255, 255, 255, .9); transform: translateX(-50%); }
.mia-air-bottle__neck::before { position: absolute; top: -8px; right: -6px; left: -6px; height: 9px; border-radius: 5px; background: var(--air-coral); content: ''; }
.mia-air-bottle__shine { position: absolute; top: 16%; bottom: 22%; left: 13%; width: 14%; border-radius: 99px; background: rgba(255, 255, 255, .86); }
.mia-air-bottle > b { position: absolute; top: 45%; right: 9%; left: 9%; padding: 4px 2px; border-radius: 7px; background: var(--air-yellow); font-size: clamp(8px, 1.2vw, 11px); text-align: center; }
.mia-air-bottle > small { position: absolute; right: 4%; bottom: 11%; left: 4%; color: var(--air-blue); font-size: clamp(8px, 1.15vw, 10px); font-weight: 950; text-align: center; }
.is-after-measure .mia-air-bottle { border-color: var(--air-violet); background: linear-gradient(100deg, rgba(242, 235, 255, .52), rgba(255, 255, 255, .92) 52%, rgba(146, 103, 234, .2)); box-shadow: inset 12px 0 16px rgba(255, 255, 255, .78), 0 16px 20px rgba(146, 103, 234, .15); }
.is-after-measure .mia-air-bottle__neck { border-color: var(--air-violet); }
.is-after-measure .mia-air-bottle > small { color: var(--air-violet); }
.mia-air-scale { position: relative; display: grid; width: min(100%, 178px); min-height: 72px; border-radius: 15px 15px 21px 21px; background: linear-gradient(180deg, #ffe665, var(--air-yellow)); box-shadow: inset 0 -10px 0 rgba(189, 139, 17, .14), 0 13px 15px rgba(126, 91, 15, .13); place-items: center; }
.mia-air-scale::before { position: absolute; top: -7px; left: 50%; width: 70%; height: 12px; border-radius: 50%; background: #fff0a0; content: ''; transform: translateX(-50%); }
.mia-air-scale i { width: 58%; height: 6px; margin-top: 8px; border-radius: 99px; background: rgba(41, 39, 45, .16); }
.mia-air-scale strong { font-size: clamp(19px, 3.1vw, 30px); }
.mia-air-pump { align-self: center; display: grid; justify-items: center; color: var(--air-coral); text-align: center; }
.mia-air-pump > i { width: 38px; height: 57px; border: 4px solid var(--air-coral); border-radius: 9px; box-shadow: inset 0 -13px 0 var(--air-coral-soft); }
.mia-air-pump > span { margin-top: 6px; font-size: clamp(8px, 1.15vw, 10px); font-weight: 950; }
.mia-air-pump > b { font-size: clamp(18px, 2.8vw, 27px); white-space: nowrap; }
.mia-air-same-object { position: absolute; z-index: 9; right: 17%; bottom: 4%; left: 17%; display: grid; justify-items: center; }
.mia-air-same-object i { width: 100%; height: 4px; background: repeating-linear-gradient(90deg, var(--air-green) 0 14px, transparent 14px 22px); }
.mia-air-same-object span { margin-top: 5px; padding: 3px 7px; border-radius: 6px; background: var(--air-green-soft); color: var(--air-green); font-size: clamp(8px, 1.15vw, 10px); font-weight: 950; }
.mia-experiment__body:has(.mia-experiment__toggle:checked) .mia-air-mass-compare .is-before-measure { opacity: .56; }
.mia-experiment__body:has(.mia-experiment__toggle:checked) .mia-air-mass-compare .is-after-measure { opacity: 1; translate: 0 -4px; }

/* 06 · A causal chain links fan, moving air and measured cart travel. */
.mia-experiment__scene--air-wind { background: linear-gradient(180deg, #eef9fb 0 72%, #ead6b7 72% 80%, #c99f70 80% 100%); }
.mia-air-wind-order { position: absolute; z-index: 10; top: 5%; right: 5%; left: 5%; display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 7px; color: var(--air-blue); }
.mia-air-wind-order span { padding: 5px 8px; border-radius: 8px; background: rgba(255, 255, 255, .86); font-size: clamp(8px, 1.2vw, 11px); font-weight: 950; text-align: center; }
.mia-air-wind-order i { color: var(--air-coral); font-size: 19px; font-style: normal; font-weight: 950; text-align: center; }
.mia-air-wind-bench { position: absolute; z-index: 5; top: 17%; right: 4%; bottom: 8%; left: 4%; }
.mia-air-wind-bench::before { position: absolute; right: 0; bottom: 8%; left: 0; height: 10px; border-radius: 99px; background: var(--air-orange); box-shadow: 0 10px 0 rgba(118, 75, 38, .15); content: ''; }
.mia-air-fan { position: absolute; z-index: 7; bottom: 10%; left: 3%; width: 24%; height: 79%; }
.mia-air-fan__cage { position: absolute; top: 3%; left: 50%; width: clamp(92px, 15vw, 138px); aspect-ratio: 1; border: 6px double var(--air-blue); border-radius: 50%; background: linear-gradient(135deg, rgba(226, 239, 255, .85), rgba(255, 255, 255, .88)); box-shadow: 0 15px 19px rgba(47, 115, 217, .15); transform: translateX(-50%); }
.mia-air-fan__cage::before,
.mia-air-fan__cage::after { position: absolute; inset: 10%; border: 2px solid rgba(47, 115, 217, .28); border-radius: 50%; content: ''; }
.mia-air-fan__cage::after { inset: 25%; }
.mia-air-fan__cage > i { position: absolute; z-index: 5; top: 50%; left: 50%; width: 22%; height: 22%; border-radius: 50%; background: var(--air-blue); box-shadow: 0 0 0 5px #fff; transform: translate(-50%, -50%); }
.mia-air-fan__cage > b { position: absolute; z-index: 4; top: 45%; left: 50%; width: 36%; height: 20%; border-radius: 85% 20% 70% 30%; background: linear-gradient(90deg, var(--air-coral), #ffad9f); transform-origin: 0 50%; }
.mia-air-fan__cage > b:nth-of-type(1) { rotate: 0deg; }
.mia-air-fan__cage > b:nth-of-type(2) { rotate: 120deg; }
.mia-air-fan__cage > b:nth-of-type(3) { rotate: 240deg; }
.mia-air-fan__stand { position: absolute; right: 30%; bottom: 5%; left: 30%; height: 43%; border-bottom: 9px solid var(--air-blue); }
.mia-air-fan__stand::before { position: absolute; top: 0; left: 50%; width: 8px; height: 87%; border-radius: 99px; background: var(--air-blue); content: ''; transform: translateX(-50%); }
.mia-air-fan > strong { position: absolute; right: 0; bottom: -2%; left: 0; color: var(--air-blue); font-size: clamp(8px, 1.2vw, 11px); text-align: center; }
.mia-air-streams { position: absolute; z-index: 9; top: 27%; right: 35%; left: 27%; height: 42%; }
.mia-air-streams > i { position: absolute; right: 0; left: 0; height: 6px; border-radius: 99px; background: repeating-linear-gradient(90deg, var(--air-cyan) 0 18px, transparent 18px 29px); }
.mia-air-streams > i::after { position: absolute; top: -6px; right: 0; width: 13px; height: 13px; border-top: 5px solid var(--air-cyan); border-right: 5px solid var(--air-cyan); content: ''; transform: rotate(45deg); }
.mia-air-streams i:nth-child(1) { top: 5%; }
.mia-air-streams i:nth-child(2) { top: 40%; left: 9%; }
.mia-air-streams i:nth-child(3) { top: 75%; left: 18%; }
.mia-air-streams > span { position: absolute; right: 0; bottom: -7%; left: 0; color: var(--air-cyan); font-size: clamp(8px, 1.15vw, 10px); font-weight: 950; text-align: center; }
.mia-air-cart { position: absolute; z-index: 8; right: 38%; bottom: 10%; width: 24%; height: 74%; transition: right .68s cubic-bezier(.2, .85, .25, 1); }
.mia-air-cart__sail { position: absolute; top: 3%; left: 50%; width: 74%; height: 66%; transform: translateX(-50%); }
.mia-air-cart__sail > i { position: absolute; top: 0; bottom: -17%; left: 49%; width: 7px; border-radius: 99px; background: var(--air-violet); }
.mia-air-cart__sail > b { position: absolute; top: 3%; right: 48%; width: 51%; height: 77%; border-radius: 52% 7px 44% 8px; background: linear-gradient(135deg, #ffad9f, var(--air-coral)); box-shadow: inset 9px 8px 0 rgba(255, 255, 255, .24), 0 10px 15px rgba(253, 118, 102, .18); }
.mia-air-cart__body { position: absolute; right: 4%; bottom: 7%; left: 4%; height: 27%; border-radius: 10px 10px 17px 17px; background: linear-gradient(180deg, #b39af2, var(--air-violet)); box-shadow: inset 0 -7px 0 rgba(91, 91, 214, .2), 0 10px 13px rgba(91, 91, 214, .17); }
.mia-air-cart__body > i { position: absolute; bottom: -15px; width: 27px; height: 27px; border: 6px solid var(--air-ink); border-radius: 50%; background: var(--air-yellow); }
.mia-air-cart__body > i:first-child { left: 11%; }
.mia-air-cart__body > i:last-child { right: 11%; }
.mia-air-cart > strong { position: absolute; z-index: 10; top: 54%; right: 8%; left: 8%; padding: 2px 4px; border-radius: 7px; background: rgba(255, 255, 255, .86); color: var(--air-violet); font-size: clamp(8px, 1.25vw, 11px); text-align: center; }
.mia-air-ruler { position: absolute; z-index: 6; right: 14%; bottom: 0; left: 50%; display: flex; justify-content: space-between; border-top: 4px solid var(--air-ink); }
.mia-air-ruler i { position: relative; padding-top: 7px; font-size: clamp(8px, 1.1vw, 10px); font-style: normal; font-weight: 950; }
.mia-air-ruler i::before { position: absolute; top: -7px; left: 50%; width: 3px; height: 10px; background: var(--air-ink); content: ''; transform: translateX(-50%); }
.mia-experiment__body:has(.mia-experiment__toggle:checked) .mia-air-fan__cage > b { animation: mia-air-fan-turn .72s linear infinite; }
.mia-experiment__body:has(.mia-experiment__toggle:checked) .mia-air-cart { right: 2%; }

.air-attempt-history { margin-top: 14px; padding: 14px; border-radius: 16px; background: var(--air-orange-soft); }
.air-attempt-history > span { color: var(--air-orange); font-size: 10px; font-weight: 950; letter-spacing: .07em; }
.air-attempt-history ol { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.air-attempt-history li { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: center; }
.air-attempt-history li i { display: grid; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--air-orange); font-size: 9px; font-style: normal; font-weight: 950; place-items: center; }

@keyframes mia-air-fan-turn { to { rotate: 360deg; } }

@media (max-width: 760px) {
  .science-air-course .mia-air-proof .mia-experiment__scene { min-height: 360px; }
  .mia-air-room-label,
  .mia-air-space-note,
  .mia-air-cap,
  .mia-air-link-label,
  .mia-air-mass-rule { padding: 6px 8px; }
  .mia-air-linked { right: 2%; left: 2%; grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr); }
  .mia-air-force-chain { right: 10%; left: 10%; }
  .mia-air-mass-compare { right: 1%; left: 1%; grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr); }
  .mia-air-bottle { width: clamp(66px, 19vw, 88px); height: clamp(105px, 27vw, 133px); }
  .mia-air-scale { min-height: 60px; }
  .mia-air-pump > i { width: 29px; height: 43px; }
  .mia-air-wind-order { right: 2%; left: 2%; gap: 3px; }
  .mia-air-wind-order span { padding-inline: 4px; }
  .mia-air-fan { left: 0; width: 29%; }
  .mia-air-cart { right: 36%; width: 30%; }
  .mia-experiment__body:has(.mia-experiment__toggle:checked) .mia-air-cart { right: -1%; }
  .mia-air-streams { right: 33%; left: 28%; }
  .mia-air-ruler { right: 14%; left: 46%; }
}

@media (max-width: 520px) {
  .science-air-course .mia-air-proof .mia-experiment__scene { min-height: 330px; border-radius: 30px 30px 22px 22px; }
  .mia-air-room-label { left: 4%; }
  .mia-air-bag { right: 8%; left: 8%; }
  .mia-air-bag__body { width: 42%; }
  .mia-experiment__body:has(.mia-experiment__toggle:checked) .mia-air-bag__body { width: 67%; }
  .mia-air-bag__zip { width: 36%; }
  .mia-experiment__body:has(.mia-experiment__toggle:checked) .mia-air-bag__zip { width: 61%; }
  .mia-air-bag__measure { right: 7%; left: 7%; }
  .mia-air-tank { right: 3%; left: 3%; }
  .mia-air-inverted-glass { width: 47%; }
  .mia-air-space-note { left: 3%; max-width: 54%; }
  .mia-air-paper-proof { right: 3%; max-width: 42%; }
  .mia-air-syringe { right: 3%; left: 3%; }
  .mia-air-syringe__barrel { right: 11%; left: 25%; }
  .mia-air-volume-readout { left: 3%; min-width: 94px; }
  .mia-air-cap { right: 3%; max-width: 48%; }
  .mia-air-linked { top: 28%; height: 130px; }
  .mia-air-linked__unit { height: 108px; }
  .mia-air-linked__barrel { height: 47px; }
  .mia-air-linked__plunger { height: 62px; }
  .mia-air-linked__tube { height: 48px; border-top-width: 6px; }
  .mia-air-force-chain { right: 8%; bottom: 6%; left: 8%; grid-template-columns: 28px 1fr 48px 1fr 28px; }
  .mia-air-mass-compare { top: 22%; }
  .mia-air-mass-compare { grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr); }
  .mia-air-bottle { width: 62px; height: 105px; border-width: 4px; }
  .mia-air-scale { min-height: 55px; }
  .mia-air-pump > i { display: none; }
  .mia-air-same-object { right: 8%; left: 8%; }
  .mia-air-fan__cage { width: 82px; border-width: 5px; }
  .mia-air-cart { width: 31%; }
  .mia-air-cart__body > i { width: 22px; height: 22px; border-width: 5px; }
  .mia-air-streams { right: 34%; left: 29%; }
  .mia-air-wind-order i { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .mia-air-proof *,
  .mia-air-proof *::before,
  .mia-air-proof *::after { animation: none !important; transition: none !important; }
}