:root {
  color: #213b4d;
  background: #f3fbff;
  font-family: "Nunito", "Microsoft YaHei", "PingFang SC", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: radial-gradient(circle at 50% 0%, #ffffff 0%, #f3fbff 60%, #e9f7fd 100%);
}

.lesson-shell {
  width: min(1180px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 52px) clamp(18px, 4vw, 48px);
}

.lesson-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.eyebrow {
  margin: 0 0 8px;
  color: #3f9bc4;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
}

h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(26px, 3.6vw, 42px); letter-spacing: .03em; }

.experiment-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  min-height: 535px;
  overflow: hidden;
  border: 1px solid #d4edf7;
  border-radius: 28px;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 18px 50px rgba(53, 135, 170, .12);
}

.experiment-stage {
  min-width: 0;
  padding: 18px 16px 8px;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
#experiment { display: block; width: 100%; height: auto; max-height: 590px; overflow: visible; }

.cylinder-shadow { fill: #9bd6ec; opacity: .2; transform: translateY(8px); }
.cylinder-glass { fill: url(#glassFill); stroke: #80c5df; stroke-width: 4; }
.cylinder-inner { fill: #f5fcff; stroke: #b4e1ef; stroke-width: 2; }
.cylinder-bottom { fill: none; stroke: #5e9db7; stroke-width: 7; stroke-linecap: round; }
.glass-highlight { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; opacity: .8; }

.syringe-scale .scale-rail { stroke: #b8dce9; stroke-width: 2; }
.syringe-scale .scale-major { stroke: #76a7b8; stroke-width: 3; stroke-linecap: round; }
.syringe-scale text { fill: #76a7b8; font-size: 12px; font-weight: 800; }

.particle { fill: #4eaae1; stroke: #2385c2; stroke-width: 1; }
.particle-glint { fill: #fff; opacity: .55; }

.piston { cursor: grab; outline: none; touch-action: none; }
.piston:focus-visible #piston-head, .piston:focus-visible .piston-handle { stroke: #ffad45; stroke-width: 4; }
.piston.dragging { cursor: grabbing; }
.piston #piston-head { fill: url(#pistonFill); stroke: #3b5d70; stroke-width: 3; }
.piston-handle { fill: #6f92aa; stroke: #3b5d70; stroke-width: 3; }
.piston-stem { stroke: #3b5d70; stroke-width: 10; stroke-linecap: round; }
.piston-grip { stroke: #9bb5c3; stroke-width: 7; stroke-linecap: round; }
#experiment.resisting { animation: syringe-resistance .18s linear infinite; }
.resistance-bubble { visibility: hidden; opacity: 0; pointer-events: none; transform-box: fill-box; transform-origin: 50% 100%; filter: drop-shadow(0 3px 5px rgba(180, 35, 48, .18)); }
.resistance-bubble.is-visible { visibility: visible; opacity: 1; animation: bubble-pop 3s ease-out both; }
.bubble-background { fill: #dc3e4b; }
.bubble-text { fill: #fff; font-size: 20px; font-weight: 800; letter-spacing: .06em; }

@keyframes syringe-resistance {
  0%, 50%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2.5px); }
  75% { transform: translateX(2.5px); }
}

@keyframes bubble-pop {
  0% { opacity: 0; transform: translateY(8px) scale(.8); }
  8% { opacity: 1; transform: translateY(0) scale(1.05); }
  14%, 88% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-4px) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  #experiment.resisting, .resistance-bubble.is-visible { animation: none; }
}

.nozzle-base { fill: #6f92aa; stroke: #3b5d70; stroke-width: 3; }
.nozzle-neck { fill: #d4e8ef; stroke: #6c9caf; stroke-width: 3; }
.nozzle-cap { fill: #e85d5d; stroke: #b83e46; stroke-width: 3; }
.nozzle-cap-rim { fill: #f47a70; stroke: #b83e46; stroke-width: 3; }

.teaching-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 25px 25px;
  background: #f7fcfe;
  border-left: 1px solid #d4edf7;
}
.instruction {
  margin: 0;
  color: #2d7897;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.45;
}
.card-heading { display: flex; align-items: center; gap: 10px; }
.card-heading h2 { margin: 0; font-size: 21px; }
.card-dot { position: relative; flex: 0 0 44px; width: 44px; height: 44px; margin: -16px; border-radius: 50%; touch-action: manipulation; }
.card-dot::after { content: ""; position: absolute; inset: 16px; border-radius: 50%; background: #ffb454; box-shadow: 0 0 0 5px #fff1dc; }
.card-dot:focus-visible { outline: 2px solid #a66d2e; outline-offset: 2px; }
.quantity-block { padding: 15px 16px; border-radius: 16px; font-size: 15px; line-height: 1.45; }
.quantity-block p { margin: 0; }
.quantity-label { margin-bottom: 7px !important; font-size: 13px; font-weight: 800; letter-spacing: .08em; }
.quantity-block strong { font-size: 25px; }
.current-volume { color: #397967; background: #e9f6ee; font-variant-numeric: tabular-nums; }
.particle-count { color: #287a9d; background: #e4f5fb; }
.particle-size { color: #a66d2e; background: #fff2df; }
.initial-volume-control {
  padding: 14px 16px 12px;
  border: 1px solid #d5e9ef;
  border-radius: 16px;
  background: #fff;
}
.volume-control-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.volume-control-heading label { color: #397967; font-size: 14px; font-weight: 900; }
.volume-control-heading output { color: #287a9d; font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; }
#initial-volume { display: block; width: 100%; margin: 13px 0 0; accent-color: #3f9bc4; cursor: pointer; }
.volume-reminder { min-height: 2.8em; margin: 8px 0 0; color: #b05d38; font-size: 12px; line-height: 1.4; }

@media (max-width: 760px) {
  .lesson-header { display: block; }
  .experiment-layout { grid-template-columns: 1fr; min-height: 0; }
  .experiment-stage { padding: 8px 4px 0; }
  .teaching-card { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 20px; border-top: 1px solid #d4edf7; border-left: 0; }
  .instruction, .card-heading, .initial-volume-control, .current-volume { grid-column: 1 / -1; }
}