:root{
  --bg:#fff4fb;
  --bg-deep:#fde4f2;
  --surface:#fffdfd;
  --surface-soft:#fff0f8;
  --panel:#fffefe;
  --text:#2f2434;
  --muted:#6f6076;
  --line:#f0c8df;
  --line-strong:#eaa1cb;
  --accent:#e83f94;
  --accent-soft:#ffe1f1;
  --accent-strong:#b51762;
  --accent-warm:#ff7a59;
  --ok:#27624c;
  --ok-soft:#daf1e5;
  --warn:#9f1f57;
  --warn-soft:#ffe7f2;
  --shadow:0 12px 26px rgba(188, 53, 121, .10);
  --sidebar-width:190px;
  --bdk-visual-viewport-height:100dvh;
  --bdk-keyboard-inset:0px;
}

/* 5. sınıf Fen Bilimleri: Gökyüzündeki Komşularımız ve Biz */
.lesson-space-lab,
.lesson-motion-direction-model,
.lesson-celestial-size-model,
.lesson-volume-model,
.lesson-celestial-check,
.lesson-apparent-size-model{
  display:grid;
  gap:14px;
  width:100%;
  min-width:0;
}

.lesson-space-lab{
  padding:14px;
  border-radius:16px;
  background:linear-gradient(145deg, #0b1730, #15294a);
  color:#f8fbff;
}

.lesson-space-lab__intro{
  display:grid;
  gap:4px;
  text-align:center;
}

.lesson-space-lab__intro span,
.lesson-space-lab__intro p{
  margin:0;
  color:#c9dbf4;
  font-size:13px;
}

.lesson-space-lab__intro strong{
  color:#fff7c2;
  font-size:clamp(22px, 3.2vw, 34px);
}

.lesson-space-lab__layout{
  display:grid;
  grid-template-columns:minmax(420px, 1.55fr) minmax(190px, .65fr);
  gap:12px;
  min-width:0;
}

.lesson-space-lab__system{
  position:relative;
  min-height:340px;
  overflow:hidden;
  border:1px solid rgba(191, 219, 254, .35);
  border-radius:14px;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.9) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 15%, rgba(255,255,255,.8) 0 1px, transparent 2px),
    radial-gradient(circle at 40% 78%, rgba(255,255,255,.75) 0 1px, transparent 2px),
    #071126;
}

.lesson-space-lab__sun{
  position:absolute;
  z-index:3;
  top:50%;
  left:-48px;
  display:grid;
  place-items:center;
  width:132px;
  height:132px;
  transform:translateY(-50%);
  border-radius:50%;
  background:radial-gradient(circle at 65% 35%, #fff7a8 0 8%, #ffca3a 28%, #ff7a18 68%, #e24a16 100%);
  box-shadow:0 0 38px rgba(255, 194, 72, .68);
}

.lesson-space-lab__sun span{
  margin-left:36px;
  color:#562600;
  font-size:13px;
  font-weight:900;
}

.lesson-space-lab__light{
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
}

.lesson-space-lab__light i{
  position:absolute;
  left:74px;
  width:calc(100% - 92px);
  height:2px;
  background:linear-gradient(90deg, rgba(255,225,122,.65), rgba(255,225,122,.04));
}

.lesson-space-lab__light i::after{
  content:"";
  position:absolute;
  top:50%;
  right:0;
  width:0;
  height:0;
  transform:translateY(-50%);
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  border-left:9px solid rgba(255,225,122,.58);
}

.lesson-space-lab__light i:nth-child(1){top:31%}
.lesson-space-lab__light i:nth-child(2){top:50%}
.lesson-space-lab__light i:nth-child(3){top:69%}

.lesson-space-lab__orbit{
  position:absolute;
  z-index:2;
  top:50%;
  left:68%;
  width:min(66%, 280px);
  aspect-ratio:1;
  transform:translate(-50%, -50%);
  border:2px dashed rgba(191, 219, 254, .42);
  border-radius:50%;
}

.lesson-space-lab__earth{
  position:absolute;
  top:50%;
  left:50%;
  display:grid;
  place-items:center;
  width:62px;
  height:62px;
  transform:translate(-50%, -50%);
  border:3px solid #c8f1ff;
  border-radius:50%;
  background:radial-gradient(circle at 65% 36%, #8ee06f 0 16%, #328bd4 18% 58%, #145393 62% 100%);
  box-shadow:0 0 16px rgba(99, 179, 237, .45);
}

.lesson-space-lab__earth span,
.lesson-space-lab__moon span{
  position:absolute;
  top:calc(100% + 5px);
  color:#eaf4ff;
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
}

.lesson-space-lab__moon{
  --moon-x:-39%;
  --moon-y:0%;
  position:absolute;
  z-index:4;
  top:calc(50% + var(--moon-y));
  left:calc(50% + var(--moon-x));
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  transform:translate(-50%, -50%);
  border:2px solid #eff6ff;
  border-radius:50%;
  background:linear-gradient(90deg, #f5f1d4 0 50%, #4b5563 50% 100%);
  box-shadow:0 0 8px rgba(255,255,255,.28);
  transition:top .35s ease, left .35s ease;
}

.lesson-space-lab__earth-view{
  display:grid;
  align-content:center;
  justify-items:center;
  gap:10px;
  min-height:340px;
  padding:18px;
  border:1px solid rgba(191, 219, 254, .35);
  border-radius:14px;
  background:#071126;
  text-align:center;
}

.lesson-space-lab__earth-view > span{
  color:#c9dbf4;
  font-size:13px;
  font-weight:800;
}

.lesson-space-lab__earth-view svg{
  width:min(100%, 174px);
  height:auto;
  filter:drop-shadow(0 0 18px rgba(219,234,254,.2));
}

.lesson-space-lab__earth-view strong{
  min-height:42px;
  color:#fff;
  font-size:14px;
  line-height:1.5;
}

.lesson-space-lab__earth-view small{
  max-width:230px;
  color:#a9c2e4;
  font-size:11px;
  line-height:1.45;
}

.lesson-space-lab__choices{
  display:grid;
  grid-template-columns:repeat(4, minmax(120px, 1fr));
  gap:8px;
}

.lesson-space-lab__choices .secondary-button{
  min-height:48px;
  padding:8px 10px;
  border-color:#6f8eb8;
  background:#f8fbff;
  color:#17375e;
  touch-action:manipulation;
}

.lesson-space-lab__choices .secondary-button.is-active{
  border-color:#ffcf4a;
  background:#fff3b0;
  color:#533300;
  box-shadow:0 0 0 2px rgba(255, 207, 74, .24);
}

.lesson-space-lab__explanation{
  min-height:68px;
  margin:0;
  padding:12px 14px;
  border-left:5px solid #ffcf4a;
  border-radius:10px;
  background:rgba(255,255,255,.1);
  color:#f5f9ff;
  line-height:1.55;
}

.lesson-same-face-model{
  display:grid;
  gap:10px;
  width:min(100%, 900px);
  margin:0 auto;
  color:#fff;
}

.lesson-same-face-model svg{
  display:block;
  width:100%;
  height:auto;
  min-height:360px;
  border-radius:16px;
}

.lesson-same-face-model svg text{
  fill:#f7fbff;
  font-family:inherit;
  font-size:18px;
  font-weight:900;
}

.lesson-same-face-model svg .lesson-same-face-model__orbit-label{
  fill:#c8dbef;
  font-size:15px;
}

.lesson-same-face-model__guides line{
  stroke:#7fa2c9;
  stroke-width:2;
  stroke-dasharray:6 6;
}

.lesson-same-face-model__key text{
  fill:#e7f1fb;
  font-size:14px;
}

.lesson-same-face-model > p{
  margin:0;
  padding:10px 12px;
  border-radius:10px;
  background:#10233f;
  color:#f4f8ff;
  text-align:center;
  line-height:1.5;
}

.lesson-motion-direction-model__intro{
  display:grid;
  gap:5px;
  padding:14px;
  border:1px solid #b7d2ff;
  border-radius:14px;
  background:#f4f8ff;
  text-align:center;
}

.lesson-motion-direction-model__intro span{
  color:#315b92;
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.lesson-motion-direction-model__intro strong{
  color:#17375e;
  font-size:18px;
}

.lesson-motion-direction-model__intro p,
.lesson-motion-direction-model__cards p,
.lesson-motion-direction-model__note{
  margin:0;
  line-height:1.5;
}

.lesson-motion-direction-model__cards{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}

.lesson-motion-direction-model__cards article{
  display:grid;
  align-content:start;
  gap:7px;
  min-width:0;
  padding:10px;
  border:1px solid #9db9dd;
  border-radius:14px;
  background:#f8fbff;
}

.lesson-motion-direction-model__cards article > strong{
  color:#17375e;
  font-size:16px;
  text-align:center;
}

.lesson-motion-direction-model__cards article > p{
  color:#536b84;
  font-size:13px;
  text-align:center;
}

.lesson-motion-direction-model__scene{
  position:relative;
  min-height:190px;
  overflow:hidden;
  border-radius:12px;
  background:
    radial-gradient(circle at 16% 24%, rgba(255,255,255,.9) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 19%, rgba(255,255,255,.8) 0 1px, transparent 2px),
    radial-gradient(circle at 35% 79%, rgba(255,255,255,.72) 0 1px, transparent 2px),
    #091a36;
}

.lesson-motion-direction-model__scene i{
  position:absolute;
  z-index:3;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-style:normal;
  box-shadow:0 0 14px rgba(255,255,255,.2);
}

.lesson-motion-direction-model__scene i b{
  color:#fff;
  font-size:11px;
}

.lesson-motion-direction-model__sun{
  top:50%;
  left:50%;
  width:88px;
  height:88px;
  transform:translate(-50%, -50%);
  background:radial-gradient(circle at 65% 35%, #fff7a8 0 8%, #ffca3a 28%, #ff7a18 68%, #e24a16 100%);
}

.lesson-motion-direction-model__sun.is-small{
  width:58px;
  height:58px;
}

.lesson-motion-direction-model__earth{
  width:48px;
  height:48px;
  border:2px solid #c8f1ff;
  background:radial-gradient(circle at 65% 36%, #8ee06f 0 16%, #328bd4 18% 58%, #145393 62% 100%);
}

.lesson-motion-direction-model__moon{
  width:34px;
  height:34px;
  border:2px solid #f7f4e8;
  background:radial-gradient(circle at 35% 30%, #eee9d5 0 10%, #999993 52%, #5f636c 100%);
}

.lesson-motion-direction-model__scene i em{
  position:absolute;
  top:-24px;
  right:-16px;
  color:#fff7a8;
  font-size:28px;
  font-style:normal;
  font-weight:900;
}

.lesson-motion-direction-model__turn{
  position:absolute;
  z-index:4;
  top:50%;
  left:50%;
  transform:translate(-50%, -53%);
  color:rgba(255,255,255,.84);
  font-size:142px;
  font-weight:900;
  line-height:1;
}

.lesson-motion-direction-model__orbit{
  position:absolute;
  z-index:1;
  top:50%;
  left:50%;
  width:156px;
  height:126px;
  transform:translate(-50%, -50%);
  border:2px dashed #82a9d5;
  border-radius:50%;
}

.lesson-motion-direction-model__orbit-turn{
  position:absolute;
  z-index:2;
  top:12px;
  right:16px;
  color:#fff7a8;
  font-size:46px;
  font-weight:900;
  line-height:1;
}

.lesson-motion-direction-model__scene.is-earth-orbit .lesson-motion-direction-model__earth{
  top:18px;
  left:50%;
  transform:translateX(-50%);
}

.lesson-motion-direction-model__scene.is-moon-orbit .lesson-motion-direction-model__orbit{
  width:126px;
  height:126px;
}

.lesson-motion-direction-model__scene.is-moon-orbit .lesson-motion-direction-model__earth{
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}

.lesson-motion-direction-model__scene.is-moon-orbit .lesson-motion-direction-model__moon{
  top:16px;
  left:50%;
  transform:translateX(-50%);
}

.lesson-motion-direction-model__note{
  padding:11px 13px;
  border-left:5px solid #3979c7;
  border-radius:10px;
  background:#f4f8ff;
}

.lesson-celestial-size-model__objects{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:clamp(18px, 6vw, 58px);
  min-height:280px;
  padding:20px;
  border-radius:16px;
  background:linear-gradient(145deg, #08152b, #173359);
}

.lesson-celestial-size-model__objects > div{
  display:grid;
  place-items:center;
  align-content:center;
  border:3px solid rgba(255,255,255,.72);
  border-radius:50%;
  color:#fff;
  text-align:center;
}

.lesson-celestial-size-model__objects .is-sun{
  width:210px;
  height:210px;
  background:radial-gradient(circle at 65% 35%, #fff2a4, #ffb12f 35%, #ef6427 75%);
  color:#5b2600;
}

.lesson-celestial-size-model__objects .is-earth{
  width:96px;
  height:96px;
  background:radial-gradient(circle at 65% 35%, #7edb71 0 18%, #338cd1 20% 62%, #174f86 66%);
}

.lesson-celestial-size-model__objects .is-moon{
  width:54px;
  height:54px;
  background:radial-gradient(circle at 35% 30%, #eee9d5 0 10%, #999993 52%, #5f636c 100%);
}

.lesson-celestial-size-model__objects span{font-weight:900}
.lesson-celestial-size-model__objects small{font-size:11px;font-weight:800}
.lesson-celestial-size-model > p{margin:0;line-height:1.55}

.lesson-celestial-size-model__analogy{
  display:grid;
  gap:5px;
  padding:14px;
  border:1px solid #b7d2ff;
  border-radius:12px;
  background:#f4f8ff;
  text-align:center;
}

.lesson-celestial-size-model__analogy span,
.lesson-celestial-size-model__analogy small{color:var(--muted)}
.lesson-celestial-size-model__analogy strong{color:#17375e;font-size:17px}

.lesson-volume-model__meaning{
  display:grid;
  grid-template-columns:minmax(220px, .75fr) minmax(260px, 1.25fr);
  align-items:center;
  gap:16px;
  padding:14px;
  border:1px solid #b7d2ff;
  border-radius:16px;
  background:#f4f8ff;
}

.lesson-volume-model__meaning svg{
  display:block;
  width:100%;
  max-height:230px;
}

.lesson-volume-model__meaning svg text{
  fill:#315b92;
  font-family:inherit;
  font-size:16px;
  font-weight:900;
}

.lesson-volume-model__meaning svg text.is-cube-value{
  fill:#71440d;
  font-size:21px;
}

.lesson-volume-model__meaning > div{
  display:grid;
  gap:7px;
}

.lesson-volume-model__meaning span{
  color:#315b92;
  font-size:13px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.lesson-volume-model__meaning strong{
  color:#17375e;
  font-size:clamp(19px, 2.4vw, 28px);
}

.lesson-volume-model__meaning p,
.lesson-volume-model__comparisons p,
.lesson-volume-model__note{
  margin:0;
  line-height:1.55;
}

.lesson-volume-model__comparisons{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.lesson-volume-model__comparisons article{
  display:grid;
  gap:6px;
  padding:14px;
  border:1px solid #d8b6e8;
  border-radius:14px;
  background:linear-gradient(145deg, #fff8fc, #f7efff);
}

.lesson-volume-model__comparisons span{
  color:#6c4b82;
  font-size:13px;
  font-weight:900;
}

.lesson-volume-model__comparisons strong{
  color:#9f1f57;
  font-size:19px;
}

.lesson-volume-model__note{
  padding:11px 13px;
  border-left:5px solid #9f1f57;
  border-radius:10px;
  background:#fff1f8;
}

@media (max-width:900px){
  .lesson-motion-direction-model__cards,
  .lesson-volume-model__comparisons,
  .lesson-volume-model__meaning{
    grid-template-columns:1fr;
  }
}

.lesson-celestial-check > p{
  margin:0;
  font-weight:800;
}

.lesson-celestial-check__choices{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
}

.lesson-celestial-check__choices .secondary-button{
  display:grid;
  grid-template-columns:36px minmax(0, 1fr);
  align-items:start;
  gap:8px;
  min-height:138px;
  padding:12px;
  text-align:left;
  white-space:normal;
  touch-action:manipulation;
}

.lesson-celestial-check__choices b{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:#e8eef9;
  color:#17375e;
}

.lesson-celestial-check__choices span{
  line-height:1.48;
}

.lesson-celestial-check__choices .is-selected{
  border-color:#cf1970;
  box-shadow:0 0 0 2px rgba(207,25,112,.14);
}

.lesson-celestial-check.is-correct .is-selected{
  border-color:#168263;
  background:#eaf9f4;
}

.lesson-celestial-check.is-wrong .is-selected{
  border-color:#bd3c45;
  background:#fff2f3;
}

.lesson-celestial-check__feedback{
  min-height:74px;
  padding:13px 14px;
  border-left:5px solid #3979c7;
  border-radius:10px;
  background:#f4f8ff;
  line-height:1.55;
}

.lesson-celestial-check.is-correct .lesson-celestial-check__feedback{
  border-left-color:#168263;
  background:#eaf9f4;
}

.lesson-celestial-check.is-wrong .lesson-celestial-check__feedback{
  border-left-color:#bd3c45;
  background:#fff2f3;
}

.lesson-apparent-size-model__scene{
  overflow:hidden;
  border-radius:16px;
  border:1px solid #b7d5e8;
  background:#eef9ff;
}

.lesson-apparent-size-model__scene svg{
  display:block;
  width:100%;
  height:auto;
  min-height:270px;
}

.lesson-apparent-size-model__scene text{
  fill:#263b54;
  font-family:inherit;
  font-size:15px;
  font-weight:900;
}

.lesson-apparent-size-model__scene text.is-small,
.lesson-apparent-size-model__axis-label{
  fill:#526c80;
  font-size:12px;
  font-weight:800;
}

.lesson-apparent-size-model__rays path{
  fill:none;
  stroke:#23628d;
  stroke-width:3;
}

.lesson-apparent-size-model__legend{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  padding:10px 12px;
  border:1px solid #c7dce9;
  border-radius:10px;
  background:#f5fbff;
  color:#334e62;
  font-size:13px;
  font-weight:800;
  line-height:1.45;
}

.lesson-apparent-size-model__legend span{
  display:flex;
  align-items:flex-start;
  gap:8px;
}

.lesson-apparent-size-model__legend i{
  display:block;
  width:28px;
  height:0;
  flex:0 0 28px;
  margin-top:8px;
  border-top:3px solid #23628d;
}

.lesson-apparent-size-model__legend i.is-axis{
  border-top:2px dashed #7894a8;
}

.lesson-apparent-size-model > p{margin:0;line-height:1.55}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen) .lesson-space-lab__system,
.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen) .lesson-space-lab__earth-view{
  height:100%;
  min-height:0;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen) .lesson-space-lab{
  grid-template-rows:max-content minmax(0, 1fr) max-content max-content;
  height:100%;
  min-height:0;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen) .lesson-space-lab__layout{
  min-height:0;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen) .lesson-space-lab__choices .secondary-button{
  min-height:48px;
  max-height:54px;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen) .lesson-same-face-model{
  grid-template-rows:minmax(0, 1fr) max-content;
  width:min(100%, 1200px);
  height:100%;
  min-height:0;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen) .lesson-same-face-model svg{
  width:100%;
  height:100%;
  min-height:0;
  max-height:calc(100dvh - 150px);
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen) .lesson-apparent-size-model{
  grid-template-rows:minmax(0, 1fr) max-content max-content;
  width:min(100%, 1600px);
  height:100%;
  min-height:0;
  margin:0 auto;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen) .lesson-apparent-size-model__scene{
  display:grid;
  place-items:center;
  min-height:0;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen) .lesson-apparent-size-model__scene svg{
  width:100%;
  height:100%;
  min-height:0;
  max-height:calc(100dvh - 190px);
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen) .lesson-celestial-size-model{
  grid-template-rows:minmax(0, 1fr) max-content max-content;
  height:100%;
  min-height:0;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen) .lesson-celestial-size-model__objects{
  min-height:0;
}

@media (max-width:760px){
  .lesson-space-lab__layout{
    grid-template-columns:1fr;
  }

  .lesson-space-lab__system,
  .lesson-space-lab__earth-view{
    min-height:300px;
  }

  .lesson-space-lab__choices{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .lesson-celestial-check__choices{
    grid-template-columns:1fr;
  }

  .lesson-celestial-check__choices .secondary-button{
    min-height:0;
  }

  .lesson-celestial-size-model__objects .is-sun{
    width:150px;
    height:150px;
  }

  .lesson-celestial-size-model__objects .is-earth{
    width:76px;
    height:76px;
  }

}

/* Derslerdeki hareketli modelleri tek yerde toplayan animasyon kütüphanesi. */
.animation-library{
  display:grid;
  gap:14px;
}

.animation-library__intro,
.animation-library__group{
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  box-shadow:var(--shadow);
}

.animation-library__intro{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:18px;
  background:linear-gradient(135deg,#fff7fc,#f2f7ff);
}

.animation-library__intro > div{display:grid;gap:7px;}
.animation-library__intro h2,
.animation-library__intro p,
.animation-library__group-head h2{margin:0;}
.animation-library__intro p{max-width:760px;color:var(--muted);line-height:1.55;}
.animation-library__intro > strong{flex:0 0 auto;padding:8px 12px;border-radius:999px;background:#315b92;color:#fff;font-size:13px;}

.animation-library__group{display:grid;gap:10px;padding:12px;}
.animation-library__group-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 2px 4px;}
.animation-library__group-head > div{display:grid;gap:3px;}
.animation-library__group-head span{color:var(--muted);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;}
.animation-library__group-head h2{font-size:21px;color:var(--text);}
.animation-library__stage{margin:0;}

.animation-hub-card{
  width:min(100%, 1220px);
  scroll-margin-top:64px;
}

.animation-card__visual{
  position:relative;
  background:radial-gradient(circle at 25% 35%,#16234c 0%,#080d22 55%,#040713 100%);
}

.animation-card__sun,
.animation-card__moon,
.animation-card__earth{
  position:absolute;
  z-index:2;
  display:block;
  border-radius:50%;
}

.animation-card__sun{
  left:18px;
  width:58px;
  height:58px;
  background:#ffd54a;
  box-shadow:0 0 20px #ff9e2f;
}

.animation-card__earth{
  right:20px;
  width:48px;
  height:48px;
  border:3px solid #79aaff;
  background:radial-gradient(circle at 35% 30%,#80e0bc 0 18%,#3480c8 20% 57%,#153563 60% 100%);
}

.animation-card__moon{
  left:116px;
  width:21px;
  height:21px;
  background:linear-gradient(135deg,#d9d6cb,#696b72);
  box-shadow:inset -5px -3px 6px rgba(0,0,0,.45);
}

.animation-card__shadow{
  position:absolute;
  z-index:1;
  left:130px;
  width:58px;
  height:30px;
  background:linear-gradient(90deg,rgba(9,12,23,.95),rgba(121,42,32,.28));
  clip-path:polygon(0 38%,100% 0,100% 100%,0 62%);
}

.animation-card__grade{
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}

.animation-card__formula-label{
  position:absolute;
  top:9px;
  left:10px;
  z-index:2;
  padding:4px 7px;
  border-radius:999px;
  color:#5b21b6;
  background:rgba(255,255,255,.88);
  font-size:10px;
  font-weight:900;
  letter-spacing:.05em;
}

.animation-card__formula-triangle{
  fill:#f9a8d4;
  stroke:#9d174d;
  stroke-width:2;
  stroke-linejoin:round;
}

.animation-stage-panel{
  width:100%;
  max-width:100%;
}

.animation-stage-body{
  display:grid;
  gap:10px;
  width:100%;
  min-width:0;
}

.animation-stage-body__lesson-link{
  justify-self:start;
}

.lesson-visual-card__canvas--animation-frame{
  min-height:720px;
  padding:0;
  align-items:stretch;
  overflow:hidden;
}

.animation-library__formula-frame{
  display:block;
  width:100%;
  min-height:720px;
  height:min(78vh, 920px);
  border:0;
  background:#fffafd;
}

.lesson-visual-card:fullscreen .animation-library__formula-frame,
.lesson-visual-card:-webkit-full-screen .animation-library__formula-frame,
.lesson-visual-card.is-stage-fullscreen .animation-library__formula-frame{
  height:100%;
  min-height:100%;
}

.animation-lesson-note{
  display:grid;
  gap:16px;
  margin-top:14px;
  padding:18px;
  border:1px solid #cddbef;
  border-radius:18px;
  background:#f8fbff;
  color:#30415f;
}

.animation-lesson-note h3,
.animation-lesson-note h4,
.animation-lesson-note p{margin:0;}

.animation-lesson-note__intro{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:14px;
  align-items:start;
  padding:17px;
  border:1px solid #d6e2f4;
  border-radius:15px;
  background:linear-gradient(135deg,#fff8dc 0%,#eef7ff 60%,#eefbf7 100%);
}

.animation-lesson-note__intro > span,
.animation-lesson-note__label{
  display:inline-flex;
  width:max-content;
  align-items:center;
  min-height:28px;
  padding:4px 10px;
  border-radius:999px;
  background:#315b92;
  color:#fff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.02em;
}

.animation-lesson-note__intro > div{display:grid;gap:6px;}
.animation-lesson-note__intro h3{color:#253858;font-size:23px;line-height:1.2;}
.animation-lesson-note__intro p{max-width:850px;color:#425474;line-height:1.6;}

.animation-lesson-note__steps{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.animation-lesson-note__steps > article{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  gap:10px;
  align-items:start;
  padding:14px;
  border:1px solid #d5e0ef;
  border-radius:14px;
  background:#fff;
}

.animation-lesson-note__steps > article > span,
.animation-lesson-note__watch li > span{
  display:grid;
  width:36px;
  height:36px;
  place-items:center;
  border-radius:50%;
  background:#e6eefb;
  color:#315b92;
  font-weight:950;
}

.animation-lesson-note__steps > article:nth-child(2) > span{background:#e5f8f4;color:#08796a;}
.animation-lesson-note__steps > article:nth-child(3) > span{background:#ffe9f4;color:#a33b70;}
.animation-lesson-note__steps > article > div{display:grid;gap:5px;}
.animation-lesson-note__steps h4{color:#293b5c;font-size:17px;line-height:1.3;}
.animation-lesson-note__steps p{color:#50617d;font-size:14px;line-height:1.55;}

.animation-lesson-note__analogy{
  display:grid;
  grid-template-columns:minmax(170px,240px) minmax(0,1fr);
  gap:18px;
  align-items:center;
  padding:16px;
  border:1px solid #d4caef;
  border-radius:15px;
  background:#f8f4ff;
}

.animation-lesson-note__analogy > div:last-child{display:grid;gap:6px;}
.animation-lesson-note__analogy h4{color:#3f3264;font-size:19px;}
.animation-lesson-note__analogy p{color:#564c72;line-height:1.6;}
.animation-lesson-note__label{background:#65508d;}

.animation-lesson-note__plates{
  position:relative;
  min-height:125px;
  overflow:hidden;
  border-radius:13px;
  background:radial-gradient(circle at 50% 50%,#1f3157 0 5%,#10182e 7% 58%,#080d1d 100%);
  perspective:320px;
}

.animation-lesson-note__plates > span{
  position:absolute;
  top:50%;
  left:50%;
  width:174px;
  height:62px;
  border-radius:50%;
  transform:translate(-50%,-50%) rotateX(68deg);
}

.animation-lesson-note__plates > .is-reference{
  border:3px solid #f2c94c;
  background:rgba(242,201,76,.2);
}

.animation-lesson-note__plates > .is-moon-orbit{
  border:3px solid #32d5c4;
  background:rgba(50,213,196,.16);
  transform:translate(-50%,-50%) rotate(17deg) rotateX(68deg);
}

.animation-lesson-note__plates > i{
  position:absolute;
  top:50%;
  left:50%;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#79aaff;
  box-shadow:0 0 0 5px rgba(121,170,255,.2);
  transform:translate(-50%,-50%);
}

.animation-lesson-note__watch{
  display:grid;
  gap:10px;
  padding:15px;
  border:1px solid #d7e3f4;
  border-radius:15px;
  background:#fff;
}

.animation-lesson-note__watch h4{color:#293b5c;font-size:19px;}
.animation-lesson-note__watch ol{display:grid;gap:9px;margin:0;padding:0;list-style:none;}
.animation-lesson-note__watch li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:10px;align-items:start;}
.animation-lesson-note__watch li > span{width:30px;height:30px;font-size:13px;}
.animation-lesson-note__watch p{color:#4b5d79;line-height:1.55;}

.animation-lesson-note__rule{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:12px;
  align-items:center;
  padding:14px 16px;
  border:1px solid #79c7a9;
  border-radius:14px;
  background:#effbf6;
}

.animation-lesson-note__rule > span{
  display:grid;
  width:44px;
  height:44px;
  place-items:center;
  border-radius:50%;
  background:#c8f0df;
  color:#146b4d;
  font-size:22px;
  font-weight:950;
}

.animation-lesson-note__rule p{color:#285d4c;line-height:1.55;}
.animation-lesson-note__rule strong{color:#174c3b;}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen) .animation-lesson-note{
  display:none;
}

@media (max-width:760px){
  .animation-library__intro,
  .animation-library__group-head{align-items:stretch;flex-direction:column;}
  .animation-library__intro > strong{justify-self:start;align-self:start;}
  .lesson-solar-eclipse-3d__modes{grid-template-columns:1fr;}
  .animation-lesson-note__intro{grid-template-columns:1fr;}
  .animation-lesson-note__steps{grid-template-columns:1fr;}
  .animation-lesson-note__analogy{grid-template-columns:1fr;}
}

@media (max-width:520px){
  .animation-lesson-note{padding:12px;}
  .animation-lesson-note__intro,
  .animation-lesson-note__analogy{padding:13px;}
  .animation-lesson-note__intro h3{font-size:20px;}

  .lesson-space-lab{
    padding:10px;
  }

  .lesson-space-lab__system{
    min-height:270px;
  }

  .lesson-space-lab__sun{
    left:-58px;
  }

  .lesson-space-lab__orbit{
    left:70%;
    width:64%;
  }

  .lesson-celestial-size-model__objects{
    gap:12px;
    min-height:220px;
    padding:12px;
  }

  .lesson-celestial-size-model__objects .is-sun{
    width:120px;
    height:120px;
  }

  .lesson-celestial-size-model__objects .is-earth{
    width:64px;
    height:64px;
  }

  .lesson-celestial-size-model__objects .is-moon{
    width:44px;
    height:44px;
  }

}

/* 5. sınıf Geometrik Nicelikler etkileşimleri */
.lesson-rectangle-lab,
.lesson-perimeter-builder,
.lesson-unit-square-lab,
.lesson-measure-compare,
.lesson-measure-problems{
  display:grid;
  gap:16px;
  width:100%;
  min-width:0;
  padding:16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:linear-gradient(180deg, #fff, #fff8fc);
}

.lesson-rectangle-lab__controls,
.lesson-unit-square-lab__controls{
  display:grid;
  grid-template-columns:repeat(2, minmax(220px, 1fr));
  gap:14px;
}

.lesson-rectangle-lab__controls label,
.lesson-unit-square-lab__controls label{
  display:grid;
  gap:8px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  font-weight:800;
}

.lesson-rectangle-lab input[type="range"],
.lesson-unit-square-lab input[type="range"]{
  width:100%;
  min-height:44px;
  margin:0;
  accent-color:var(--accent);
  touch-action:pan-x;
}

.lesson-rectangle-lab__stage,
.lesson-unit-square-lab__stage{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:300px;
  padding:40px 24px 24px 52px;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  -webkit-overflow-scrolling:touch;
}

.lesson-measure-grid-wrap{
  position:relative;
  width:max-content;
  max-width:100%;
}

.lesson-measure-grid-label{
  position:absolute;
  z-index:2;
  color:var(--accent-strong);
  font-size:16px;
  white-space:nowrap;
}

.lesson-measure-grid-label.is-top{
  left:50%;
  top:-32px;
  transform:translateX(-50%);
}

.lesson-measure-grid-label.is-side{
  left:-42px;
  top:50%;
  transform:translateY(-50%) rotate(-90deg);
}

.lesson-measure-grid{
  --measure-cell-size:clamp(18px, 2.45vw, 30px);
  display:grid;
  grid-template-columns:repeat(var(--measure-columns), var(--measure-cell-size));
  grid-template-rows:repeat(var(--measure-rows), var(--measure-cell-size));
  width:max-content;
  max-width:none;
  border:4px solid var(--accent);
  border-radius:6px;
  background:#fff;
  box-shadow:0 10px 24px rgba(132, 38, 87, .10);
}

.lesson-measure-grid > span{
  border:1px solid #c7d8ff;
  background:#eef4ff;
}

.lesson-measure-grid > span.is-boundary{
  background:#ffe1ef;
  border-color:#efa8ca;
}

.lesson-measure-grid.is-compact{
  --measure-cell-size:10px;
  border-width:3px;
  box-shadow:none;
}

.lesson-measure-grid.is-compact > span{
  border-width:0;
  background:#f2f6ff;
}

.lesson-measure-grid.is-compact > span.is-boundary{
  background:#ffd3e8;
}

.lesson-rectangle-lab__results{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}

.lesson-rectangle-lab__results > div,
.lesson-perimeter-builder__math > div{
  display:grid;
  gap:5px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}

.lesson-rectangle-lab__results span,
.lesson-perimeter-builder__math span{
  color:var(--muted);
  font-size:13px;
  font-weight:800;
}

.lesson-rectangle-lab__results strong,
.lesson-perimeter-builder__math strong{
  color:var(--accent-strong);
  font-size:18px;
}

.lesson-rectangle-lab > p,
.lesson-unit-square-lab > p{
  margin:0;
  padding:12px 14px;
  border-left:4px solid var(--accent);
  border-radius:10px;
  background:#fff0f7;
  line-height:1.55;
}

.lesson-perimeter-builder__head{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  align-items:center;
  gap:14px;
}

.lesson-perimeter-builder__head > div{
  display:grid;
  gap:2px;
  min-width:130px;
  padding:12px;
  border-radius:12px;
  background:#fff0f7;
  text-align:center;
}

.lesson-perimeter-builder__head span{
  color:var(--muted);
  font-size:13px;
  font-weight:800;
}

.lesson-perimeter-builder__head strong{
  color:var(--accent-strong);
  font-size:24px;
}

.lesson-perimeter-builder__head p{
  margin:0;
  line-height:1.55;
}

.lesson-perimeter-builder__choices,
.lesson-measure-compare__tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.lesson-perimeter-builder__choices .secondary-button,
.lesson-measure-compare__tabs .secondary-button{
  min-height:46px;
}

.lesson-perimeter-builder__stage{
  display:grid;
  grid-template-columns:minmax(300px, 1fr) minmax(260px, .72fr);
  align-items:center;
  gap:18px;
  min-height:330px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
}

.lesson-perimeter-builder__drawing{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  min-height:260px;
  overflow:auto;
  padding:12px;
}

.lesson-perimeter-builder__math{
  display:grid;
  gap:10px;
}

.lesson-unit-square-lab__equation{
  display:flex;
  align-items:stretch;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
}

.lesson-unit-square-lab__equation span{
  display:grid;
  place-items:center;
  min-height:62px;
  padding:8px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  text-align:center;
}

.lesson-unit-square-lab__equation b{
  align-self:center;
  color:var(--accent-strong);
  font-size:24px;
}

.lesson-unit-square-lab__equation strong{
  color:var(--accent-strong);
  font-size:20px;
}

.lesson-measure-compare__intro,
.lesson-measure-compare__conclusion{
  padding:12px 14px;
  border-radius:12px;
  background:#fff0f7;
  line-height:1.55;
}

.lesson-measure-compare__conclusion{
  border-left:4px solid var(--accent);
  font-weight:800;
}

.lesson-measure-compare__cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:10px;
}

.lesson-measure-compare__card{
  display:grid;
  grid-template-rows:auto minmax(120px, 1fr) auto;
  gap:10px;
  min-width:0;
  padding:12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}

.lesson-measure-compare__card > strong{
  color:var(--accent-strong);
  text-align:center;
}

.lesson-measure-compare__mini{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  overflow:auto;
  padding:8px;
}

.lesson-measure-compare__card dl{
  display:grid;
  gap:5px;
  margin:0;
}

.lesson-measure-compare__card dl > div{
  display:flex;
  justify-content:space-between;
  gap:8px;
}

.lesson-measure-compare__card dt{
  color:var(--muted);
}

.lesson-measure-compare__card dd{
  margin:0;
  font-weight:900;
}

.lesson-measure-problems__head{
  display:grid;
  grid-template-columns:48px minmax(0, 1fr) 48px;
  align-items:center;
  gap:10px;
}

.lesson-measure-problems__head > div{
  display:grid;
  gap:4px;
  text-align:center;
}

.lesson-measure-problems__head strong{
  color:var(--text);
  font-size:19px;
}

.lesson-measure-problems__head span{
  color:var(--accent-strong);
  font-size:13px;
  font-weight:900;
}

.lesson-measure-problems__story,
.lesson-measure-problems__reason,
.lesson-measure-problems__answer{
  padding:14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}

.lesson-measure-problems__story p,
.lesson-measure-problems__reason p{
  margin:0 0 8px;
  line-height:1.55;
}

.lesson-measure-problems__story strong{
  color:var(--accent-strong);
}

.lesson-measure-problems__reason{
  background:#fff8fc;
}

.lesson-measure-problems__reason span{
  display:block;
  margin-bottom:6px;
  color:var(--accent-strong);
  font-weight:900;
}

.lesson-measure-problems__reason p{
  margin:0;
}

.lesson-measure-problems__steps{
  display:grid;
  gap:8px;
}

.lesson-measure-problems__steps > div{
  display:grid;
  grid-template-columns:38px minmax(0, 1fr);
  align-items:center;
  gap:10px;
  min-height:48px;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}

.lesson-measure-problems__steps span{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  font-weight:900;
}

.lesson-measure-problems__answer{
  border-left:5px solid #16a085;
  background:#edfff9;
  color:#075e51;
  font-size:17px;
  font-weight:900;
}

@media (max-width:900px){
  .lesson-rectangle-lab__controls,
  .lesson-unit-square-lab__controls,
  .lesson-perimeter-builder__stage{
    grid-template-columns:1fr;
  }

  .lesson-perimeter-builder__stage{
    min-height:0;
  }

  .lesson-perimeter-builder__drawing{
    min-height:230px;
  }
}

/* 6. sınıf Fen Bilimleri · Güneş Sistemi ve Tutulmalar */
.lesson-science-lab{
  display:grid;
  gap:18px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(145deg, #fff, #f3f7ff);
}

.lesson-science-lab__intro{
  display:grid;
  gap:7px;
}

.lesson-science-lab__intro > span{
  justify-self:start;
  padding:5px 10px;
  border-radius:999px;
  background:#e9f2ff;
  color:#315b92;
  font-size:12px;
  font-weight:950;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.lesson-science-lab__intro > strong{
  color:var(--text);
  font-size:22px;
  line-height:1.25;
}

.lesson-science-lab__intro > p{
  margin:0;
  color:var(--muted);
  line-height:1.55;
}

.lesson-planet-classifier__criteria,
.lesson-eclipse-lab__choices,
.lesson-planet-order__choices{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.lesson-planet-classifier__criteria .secondary-button{
  min-width:88px;
  border-width:2px;
  border-color:#e5589a;
  background:#fff8fc;
  color:#b30f58;
  font-weight:900;
  transition:background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.lesson-planet-classifier__criteria .secondary-button.is-active,
.lesson-planet-classifier__criteria .secondary-button[aria-pressed="true"]{
  border-color:#9f0d4e;
  background:linear-gradient(180deg, #d92f7d, #b7135b);
  color:#fff;
  box-shadow:0 0 0 3px rgba(217,47,125,.2), 0 7px 15px rgba(145,17,75,.2);
  transform:translateY(-1px);
}

.lesson-planet-classifier__criteria .secondary-button.is-active::before,
.lesson-planet-classifier__criteria .secondary-button[aria-pressed="true"]::before{
  content:"✓";
  margin-right:6px;
  font-weight:1000;
}

.lesson-planet-classifier__criteria .secondary-button:focus-visible{
  outline:3px solid #315b92;
  outline-offset:3px;
}

.lesson-planet-classifier__groups{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}

.lesson-planet-classifier__groups article{
  display:grid;
  gap:12px;
  min-width:0;
  padding:14px;
  border:1px solid #d8e0ee;
  border-radius:14px;
  background:#fff;
}

.lesson-planet-classifier__groups article > span{
  color:#315b92;
  font-weight:950;
}

.lesson-planet-classifier__groups article > div{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
}

.lesson-planet-chip{
  display:flex;
  min-width:0;
  align-items:center;
  gap:8px;
  padding:8px;
  border-radius:10px;
  background:#f6f8fc;
}

.lesson-planet-chip i,
.lesson-planet-order__orbit span i{
  position:relative;
  flex:0 0 auto;
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--planet-tone);
  box-shadow:inset -6px -4px 8px rgba(0,0,0,.2), inset 4px 3px 6px rgba(255,255,255,.28);
}

.lesson-planet-chip.is-saturn i::after{
  position:absolute;
  content:"";
  inset:9px -6px;
  border:2px solid #a58650;
  border-radius:50%;
  transform:rotate(-15deg);
}

.lesson-planet-chip strong{
  min-width:0;
  overflow-wrap:anywhere;
  font-size:14px;
}

.lesson-planet-classifier__note,
.lesson-planet-order__feedback{
  margin:0;
  padding:12px 14px;
  border-left:5px solid #5384ca;
  border-radius:10px;
  background:#edf5ff;
  line-height:1.55;
}

.lesson-planet-order__orbit{
  display:grid;
  grid-template-columns:86px minmax(0, 1fr);
  gap:12px;
  align-items:stretch;
}

.lesson-planet-order__orbit > b{
  display:grid;
  place-items:center;
  min-height:92px;
  border-radius:50%;
  background:radial-gradient(circle, #fff9a9 5%, #ffc947 60%, #f69a22 100%);
  box-shadow:0 0 20px rgba(255,184,50,.45);
  color:#724600;
}

.lesson-planet-order__orbit > div{
  display:grid;
  grid-template-columns:repeat(8, minmax(62px, 1fr));
  gap:7px;
  overflow-x:auto;
  padding:2px 2px 7px;
}

.lesson-planet-order__orbit span{
  display:grid;
  min-height:92px;
  place-items:center;
  align-content:center;
  gap:4px;
  border:1px dashed #b9c4d8;
  border-radius:12px;
  background:#fff;
}

.lesson-planet-order__orbit span.is-next{
  border:2px solid var(--accent);
  background:#fff2f8;
  box-shadow:0 0 0 3px rgba(232,63,148,.1);
}

.lesson-planet-order__orbit span.is-filled{
  border-style:solid;
  border-color:#bcd8cb;
  background:#effaf4;
}

.lesson-planet-order__orbit span b{
  color:var(--muted);
  font-size:11px;
}

.lesson-planet-order__orbit span strong{
  font-size:12px;
  text-align:center;
}

.lesson-planet-order__choices button:disabled{
  opacity:.45;
  cursor:default;
}

.lesson-planet-order__choices button{
  display:grid;
  flex:1 1 104px;
  gap:7px;
  min-width:92px;
  padding:8px;
}

.lesson-planet-order__choices button img{
  width:54px;
  height:54px;
  margin:auto;
  border-radius:50%;
  background:#0b1020;
  object-fit:cover;
}

.lesson-planet-order__orbit span > img{
  width:36px;
  height:36px;
  border-radius:50%;
  background:#0b1020;
  object-fit:cover;
}

.lesson-planet-photo-gallery{
  display:grid;
  gap:16px;
}

.lesson-planet-photo-gallery__intro{
  display:grid;
  gap:6px;
}

.lesson-planet-photo-gallery__intro strong{
  color:#315b92;
  font-size:19px;
}

.lesson-planet-photo-gallery__intro p{
  margin:0;
  color:var(--muted);
  line-height:1.5;
}

.lesson-planet-photo-gallery__grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
}

.lesson-planet-photo-gallery__grid > button{
  position:relative;
  display:grid;
  min-width:0;
  overflow:hidden;
  padding:0;
  border:1px solid #263454;
  border-radius:14px;
  background:#0b1020;
  color:#fff;
  cursor:pointer;
  text-align:left;
}

.lesson-planet-photo-gallery__grid > button:hover,
.lesson-planet-photo-gallery__grid > button:focus-visible{
  border-color:var(--accent);
  outline:3px solid rgba(232,63,148,.18);
  transform:translateY(-2px);
}

.lesson-planet-photo-gallery__grid img{
  width:100%;
  aspect-ratio:4 / 3;
  background:#000;
  object-fit:cover;
}

.lesson-planet-photo-gallery__grid span{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:10px 11px;
}

.lesson-planet-photo-gallery__grid small{
  color:#a9c8ff;
  font-weight:800;
}

.lesson-planet-photo-modal[hidden]{display:none;}

.lesson-planet-photo-modal{
  position:fixed;
  z-index:1200;
  inset:0;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(5,8,18,.86);
  backdrop-filter:blur(7px);
}

.lesson-planet-photo-modal__window{
  display:grid;
  width:min(960px, 94vw);
  max-height:90vh;
  overflow:auto;
  border:1px solid rgba(255,255,255,.22);
  border-radius:18px;
  background:#0b1020;
  box-shadow:0 28px 90px rgba(0,0,0,.55);
  color:#fff;
}

.lesson-planet-photo-modal__window > img{
  width:100%;
  max-height:68vh;
  background:#000;
  object-fit:contain;
}

.lesson-planet-photo-modal__window > div{
  display:grid;
  gap:8px;
  padding:18px 20px 20px;
}

.lesson-planet-photo-modal__window strong{
  color:#fff;
  font-size:25px;
}

.lesson-planet-photo-modal__window p{
  margin:0;
  color:#dbe6ff;
  line-height:1.55;
}

.lesson-planet-photo-modal__window small{
  color:#9fb7e5;
  line-height:1.4;
}

.lesson-planet-photo-modal__close{
  position:fixed;
  z-index:2;
  top:18px;
  right:22px;
  display:grid;
  width:46px;
  height:46px;
  place-items:center;
  border:1px solid rgba(255,255,255,.35);
  border-radius:50%;
  background:#fff;
  color:#15192a;
  cursor:pointer;
  font-size:30px;
  line-height:1;
}

body.has-lesson-planet-modal{
  overflow:hidden;
}

.lesson-planet-size-order{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:flex-end;
  justify-content:center;
  padding:18px;
  border-radius:16px;
  background:linear-gradient(180deg, #10182f, #202c4c);
  color:#fff;
}

.lesson-planet-size-order > div{
  display:grid;
  min-width:74px;
  justify-items:center;
  gap:5px;
}

.lesson-planet-size-order i{
  display:block;
  width:var(--planet-size);
  height:var(--planet-size);
  border-radius:50%;
  background:var(--planet-color);
  box-shadow:inset -10px -7px 14px rgba(0,0,0,.35), inset 5px 4px 8px rgba(255,255,255,.2);
}

.lesson-planet-size-order strong{font-size:13px;}
.lesson-planet-size-order span{color:#cad7f5;font-size:11px;}
.lesson-planet-size-order .is-jupiter{--planet-size:94px;--planet-color:#c79062;}
.lesson-planet-size-order .is-saturn{--planet-size:82px;--planet-color:#d9bd78;}
.lesson-planet-size-order .is-uranus{--planet-size:58px;--planet-color:#76cbd1;}
.lesson-planet-size-order .is-neptune{--planet-size:54px;--planet-color:#486cc8;}
.lesson-planet-size-order .is-earth{--planet-size:38px;--planet-color:#397ed1;}
.lesson-planet-size-order .is-venus{--planet-size:36px;--planet-color:#d7a45d;}
.lesson-planet-size-order .is-mars{--planet-size:27px;--planet-color:#c75f3b;}
.lesson-planet-size-order .is-mercury{--planet-size:22px;--planet-color:#9d948a;}

.lesson-planet-size-order > p{
  flex:1 1 100%;
  margin:4px 0 0;
  color:#dce7ff;
  line-height:1.5;
  text-align:center;
}

.lesson-space-rock-route{
  display:flex;
  gap:10px;
  align-items:stretch;
}

.lesson-space-rock-route article{
  display:grid;
  flex:1 1 0;
  gap:7px;
  min-width:0;
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
}

.lesson-space-rock-route article span,
.lesson-model-checklist span{
  display:grid;
  width:30px;
  height:30px;
  place-items:center;
  border-radius:50%;
  background:#e9f2ff;
  color:#315b92;
  font-weight:950;
}

.lesson-space-rock-route article strong{color:#315b92;}
.lesson-space-rock-route article p{margin:0;color:var(--muted);line-height:1.5;}
.lesson-space-rock-route > i{align-self:center;color:var(--accent);font-size:24px;font-style:normal;font-weight:950;}

.lesson-solar-eclipse-3d{
  display:grid;
  gap:14px;
  padding:16px;
  border:1px solid #c8d7ee;
  border-radius:18px;
  background:linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
}

.lesson-solar-eclipse-3d__intro{
  display:grid;
  gap:5px;
}

.lesson-solar-eclipse-3d__intro > span{
  width:max-content;
  padding:5px 10px;
  border-radius:999px;
  background:#e2edff;
  color:#315b92;
  font-size:11px;
  font-weight:950;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.lesson-solar-eclipse-3d__intro > strong{font-size:22px;color:#17213c;}
.lesson-solar-eclipse-3d__intro > p{margin:0;color:var(--muted);line-height:1.55;}

.lesson-solar-eclipse-3d__stage{
  position:relative;
  min-height:390px;
  overflow:hidden;
  border:1px solid rgba(130,161,211,.55);
  border-radius:18px;
  background:
    radial-gradient(circle at 28% 22%, rgba(78,126,226,.22), transparent 32%),
    linear-gradient(180deg, #071126, #102348);
  box-shadow:0 16px 34px rgba(25,45,82,.16);
}

.lesson-solar-eclipse-3d__stage > canvas[data-solar-eclipse-canvas]{
  display:block;
  width:100%;
  height:390px;
  outline:none;
  cursor:grab;
  touch-action:none;
}

.lesson-solar-eclipse-3d__stage > canvas[data-solar-eclipse-canvas].is-ready:active{cursor:grabbing;}
.lesson-solar-eclipse-3d__stage > canvas[data-solar-eclipse-canvas].is-dragging-moon{cursor:grabbing;}
.lesson-solar-eclipse-3d__touch-hint{
  margin:0;
  color:#53657d;
  font-size:12px;
  font-weight:750;
  text-align:center;
}

.lesson-moon-phase-preview{
  position:absolute;
  z-index:3;
  top:12px;
  left:12px;
  display:grid;
  justify-items:center;
  gap:5px;
  width:220px;
  padding:11px;
  border:1px solid rgba(199,220,255,.34);
  border-radius:12px;
  background:rgba(4,10,29,.82);
  color:#f4f8ff;
  text-align:center;
  pointer-events:none;
  backdrop-filter:blur(7px);
}

.lesson-moon-phase-preview > span{
  font-size:13px;
  font-weight:900;
}

.lesson-moon-phase-preview canvas{
  display:block;
  width:108px;
  height:108px;
}

.lesson-moon-phase-preview > div{
  display:grid;
  gap:1px;
}

.lesson-moon-phase-preview strong{font-size:16px;line-height:1.3;}
.lesson-moon-phase-preview small{color:#fff;font-size:13px;line-height:1.45;font-weight:800;}

.lesson-moon-phase-preview p{
  margin:0;
  color:#fff !important;
  font-size:12px;
  line-height:1.5;
  font-weight:700;
}

.lesson-solar-eclipse-3d__start{
  position:absolute;
  z-index:4;
  inset:50% auto auto 50%;
  display:grid;
  width:min(330px, calc(100% - 34px));
  min-height:130px;
  justify-items:center;
  gap:5px;
  padding:18px;
  border:1px solid rgba(157,187,240,.58);
  border-radius:18px;
  background:rgba(13,25,57,.9);
  color:#fff;
  box-shadow:0 18px 46px rgba(0,0,0,.36);
  transform:translate(-50%,-50%);
  backdrop-filter:blur(10px);
}

.lesson-solar-eclipse-3d__start:hover,
.lesson-solar-eclipse-3d__start:focus-visible{background:#172c62;transform:translate(-50%,-50%) scale(1.02);}
.lesson-solar-eclipse-3d__start > span{display:grid;width:42px;height:42px;place-items:center;border-radius:50%;background:#ffbf45;color:#17213c;font-size:18px;}
.lesson-solar-eclipse-3d__start strong{font-size:18px;}
.lesson-solar-eclipse-3d__start small{color:#d5e3ff;text-align:center;line-height:1.4;}

.lesson-solar-eclipse-3d__loading{
  position:absolute;
  z-index:5;
  inset:16px 16px auto;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:12px;
  background:rgba(4,10,29,.84);
  color:#fff;
  text-align:center;
  font-weight:850;
}

.lesson-solar-eclipse-3d__loading[hidden]{display:none;}

.lesson-solar-eclipse-3d__labels{
  display:none;
}

.lesson-solar-eclipse-3d__plane-key{
  position:absolute;
  z-index:3;
  top:12px;
  right:12px;
  display:grid;
  gap:6px;
  max-width:min(360px, calc(100% - 24px));
  padding:8px 10px;
  border:1px solid rgba(199,220,255,.28);
  border-radius:10px;
  background:rgba(4,10,29,.76);
  color:#f4f8ff;
  font-size:11px;
  font-weight:800;
  line-height:1.3;
  pointer-events:none;
}

.lesson-solar-eclipse-3d__plane-key span{display:flex;align-items:center;gap:7px;}
.lesson-solar-eclipse-3d__plane-key i{display:block;width:28px;flex:0 0 28px;}
.lesson-solar-eclipse-3d__plane-key .is-reference{height:8px;border:1px solid #ffd45c;background:rgba(244,185,45,.38);}
.lesson-solar-eclipse-3d__plane-key .is-moon-orbit{height:8px;border:1px solid #4cf3f0;background:rgba(27,210,220,.34);}
.lesson-solar-eclipse-3d__plane-key .is-moon-path{height:0;border-top:4px solid #a5ffff;box-shadow:0 0 5px rgba(97,255,255,.8);}
.lesson-solar-eclipse-3d__plane-key .is-node{height:0;border-top:3px dashed #ffdc51;}
.lesson-solar-eclipse-3d__plane-key .is-orbit-node{height:0;border-top:3px dashed #ff59b8;}
.lesson-solar-eclipse-3d__plane-key .is-observer{position:relative;height:0;border-top:2px solid #ffd44f;}
.lesson-solar-eclipse-3d__plane-key .is-observer::after{content:"";position:absolute;top:-5px;left:11px;width:8px;height:8px;border:2px solid #fff;border-radius:50%;background:#46dff2;}
.lesson-solar-eclipse-3d__plane-key .is-shadow{height:8px;border:1px solid #7697c8;background:linear-gradient(90deg,#020611,#1e3a5f);}
.lesson-solar-eclipse-3d__plane-key b{font:inherit;color:inherit;}

.lesson-solar-eclipse-3d[data-solar-eclipse-purpose="phases"] :is(
  .lesson-solar-eclipse-3d__modes,
  .lesson-solar-eclipse-3d__plane-key,
  .lesson-solar-eclipse-3d__result,
  .lesson-solar-eclipse-3d__why-monthly
){display:none;}
.lesson-solar-eclipse-3d[data-solar-eclipse-purpose="phases"] button[data-solar-eclipse-view="earth"]{display:none;}
.lesson-solar-eclipse-3d[data-solar-eclipse-purpose="eclipses"] :is(
  .lesson-moon-phase-preview,
  .lesson-solar-eclipse-3d__why-monthly,
  [data-model-key="observer"]
){display:none;}
.lesson-solar-eclipse-3d[data-solar-eclipse-purpose="monthly"] :is(.lesson-moon-phase-preview,.lesson-solar-eclipse-3d__modes,[data-model-key="observer"]){display:none;}
.lesson-solar-eclipse-3d[data-solar-eclipse-purpose="monthly"] button[data-solar-eclipse-view="earth"]{display:none;}
.lesson-solar-eclipse-3d[data-solar-eclipse-purpose="monthly"] .lesson-solar-eclipse-3d__plane-key{
  right:auto;
  left:12px;
}

.lesson-solar-eclipse-3d[data-solar-eclipse-view="earth"] .lesson-solar-eclipse-3d__labels{display:none;}
.lesson-solar-eclipse-3d[data-solar-eclipse-view="earth"] .lesson-solar-eclipse-3d__plane-key{display:none;}
.lesson-solar-eclipse-3d[data-solar-eclipse-view="earth"] .lesson-solar-eclipse-3d__stage::after{content:"Gözlemcinin bakışı";}
.lesson-solar-eclipse-3d[data-solar-eclipse-view="top"] .lesson-solar-eclipse-3d__stage::after{content:"Tepeden bakış · gerçek 5,1° eğim modelde 18° gösteriliyor";}
.lesson-solar-eclipse-3d[data-solar-eclipse-view="earth"] .lesson-solar-eclipse-3d__stage::after,
.lesson-solar-eclipse-3d[data-solar-eclipse-view="top"] .lesson-solar-eclipse-3d__stage::after{
  position:absolute;
  z-index:2;
  right:12px;
  bottom:10px;
  padding:5px 9px;
  border-radius:999px;
  background:rgba(5,12,32,.72);
  color:#fff;
  font-size:11px;
  font-weight:900;
  pointer-events:none;
}

.lesson-solar-eclipse-3d__controls{
  display:grid;
  grid-template-columns:minmax(260px, 1fr) minmax(300px, 1fr);
  gap:12px 16px;
  padding:14px;
  border:1px solid #d4e0f1;
  border-radius:15px;
  background:#fff;
}

.lesson-solar-eclipse-3d__controls > label{
  display:grid;
  grid-row:span 2;
  gap:8px;
}

.lesson-solar-eclipse-3d__controls > label > span{display:flex;justify-content:space-between;gap:12px;color:#27395d;}
.lesson-solar-eclipse-3d__controls output{min-width:42px;color:#315b92;font-weight:950;text-align:right;}
.lesson-solar-eclipse-3d__controls input[type="range"]{width:100%;accent-color:#315b92;cursor:ew-resize;}
.lesson-solar-eclipse-3d__controls small{color:var(--muted);line-height:1.45;}

.lesson-solar-eclipse-3d__buttons,
.lesson-solar-eclipse-3d__modes,
.lesson-solar-eclipse-3d__views{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.lesson-solar-eclipse-3d__modes{grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}
.lesson-solar-eclipse-3d__modes > button{min-height:44px;font-size:14px;}
.lesson-solar-eclipse-3d__views{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}
.lesson-solar-eclipse-3d__buttons > button{flex:1 1 130px;white-space:normal;line-height:1.25;}
.lesson-solar-eclipse-3d__views > button{flex:1 1 160px;}
.lesson-solar-eclipse-3d__modes > button.is-active,
.lesson-solar-eclipse-3d__buttons > button.is-active,
.lesson-solar-eclipse-3d__views > button.is-active{border-color:#315b92;background:#315b92;color:#fff;}

.lesson-solar-eclipse-3d__result{
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  gap:12px;
  align-items:center;
  padding:14px;
  border:1px solid #cbd9ec;
  border-radius:14px;
  background:#fff;
  transition:border-color .2s ease, background .2s ease;
}

.lesson-solar-eclipse-3d__result > span{
  display:grid;
  width:46px;
  height:46px;
  place-items:center;
  border-radius:50%;
  background:#e6eefb;
  color:#315b92;
  font-size:23px;
  font-weight:950;
}

.lesson-solar-eclipse-3d__result strong{display:block;margin-bottom:3px;color:#27395d;font-size:18px;}
.lesson-solar-eclipse-3d__result p{margin:0;color:#425474;line-height:1.5;}
.lesson-solar-eclipse-3d__result.is-partial{border-color:#f1bd69;background:#fff9ed;}
.lesson-solar-eclipse-3d__result.is-partial > span{background:#ffe6b8;color:#9a4b00;}
.lesson-solar-eclipse-3d__result.is-total{border-color:#75c5a5;background:#effbf6;}
.lesson-solar-eclipse-3d__result.is-total > span{background:#c8f0df;color:#146b4d;}

.lesson-solar-eclipse-3d__why-monthly{
  margin:0;
  padding:13px 15px;
  border:1px solid #f0c04f;
  border-radius:10px;
  background:#fff8d9;
  color:#4f421f;
  font-size:14px;
  line-height:1.55;
}

.lesson-solar-eclipse-3d__why-monthly strong{display:block;margin-bottom:3px;color:#342b12;font-size:16px;}

.lesson-solar-eclipse-3d__note{
  margin:0;
  padding:11px 13px;
  border-left:4px solid #638bc3;
  border-radius:8px;
  background:#eaf2ff;
  color:#425474;
  font-size:13px;
  line-height:1.5;
}

.lesson-eclipse-lab__system{
  position:relative;
  display:grid;
  grid-template-columns:150px minmax(70px, 1fr) 76px minmax(70px, 1fr) 105px;
  min-height:210px;
  align-items:center;
  overflow:hidden;
  padding:22px;
  border-radius:16px;
  background:linear-gradient(180deg, #10182f, #1a2542);
  color:#fff;
}

.lesson-eclipse-lab__system > div:not(.lesson-eclipse-lab__rays):not(.lesson-eclipse-lab__shadow){
  position:relative;
  z-index:3;
  display:grid;
  justify-items:center;
  gap:8px;
}

.lesson-eclipse-lab__system .is-sun{grid-column:1;}
.lesson-eclipse-lab__system .is-middle{grid-column:3;}
.lesson-eclipse-lab__system .is-end{grid-column:5;}

.lesson-eclipse-lab__system i{
  display:block;
  border-radius:50%;
}

.lesson-eclipse-lab__system .is-sun i{
  width:116px;
  height:116px;
  background:radial-gradient(circle, #fff9b3 8%, #ffc845 62%, #f38a19 100%);
  box-shadow:0 0 32px rgba(255,190,50,.6);
}

.lesson-eclipse-lab__system .is-middle i,
.lesson-eclipse-lab__system .is-end i{
  background:#4385ce;
  box-shadow:inset -12px -7px 15px rgba(0,0,0,.45);
}

.lesson-eclipse-lab__system.is-solar .is-middle i,
.lesson-eclipse-lab__system.is-lunar .is-end i{
  width:42px;
  height:42px;
  background:#b7b8c1;
}

.lesson-eclipse-lab__system.is-solar .is-end i,
.lesson-eclipse-lab__system.is-lunar .is-middle i{
  width:78px;
  height:78px;
}

.lesson-eclipse-lab__rays{
  position:absolute;
  z-index:1;
  left:110px;
  right:45px;
  height:120px;
  background:linear-gradient(90deg, rgba(255,211,100,.4), rgba(255,211,100,.08));
  clip-path:polygon(0 10%,100% 35%,100% 65%,0 90%);
}

.lesson-eclipse-lab__shadow{
  position:absolute;
  z-index:2;
  left:47%;
  right:5%;
  height:58px;
  background:linear-gradient(90deg, rgba(3,6,15,.82), rgba(3,6,15,.2));
  clip-path:polygon(0 32%,100% 0,100% 100%,0 68%);
}

.lesson-eclipse-lab__explanation{
  display:grid;
  gap:7px;
  padding:14px;
  border:1px solid #ccd9ea;
  border-radius:12px;
  background:#fff;
}

.lesson-eclipse-lab__explanation strong{color:#315b92;font-size:19px;}
.lesson-eclipse-lab__explanation p{margin:0;line-height:1.55;}
.lesson-eclipse-lab__explanation small{color:#9a4b00;font-weight:850;}

.lesson-model-checklist{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

.lesson-model-checklist article{
  display:grid;
  grid-template-columns:38px minmax(0, 1fr);
  gap:4px 10px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
}

.lesson-model-checklist span{grid-row:1 / 3;}
.lesson-model-checklist strong{align-self:center;color:#315b92;}
.lesson-model-checklist p{margin:0;color:var(--muted);line-height:1.5;}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  :is(.lesson-science-lab, .lesson-planet-size-order, .lesson-space-rock-route, .lesson-model-checklist, .lesson-solar-eclipse-3d){
  height:100%;
  min-height:0;
  overflow:auto;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen) .lesson-solar-eclipse-3d{
  grid-template-columns:minmax(0, 1fr) minmax(360px, 430px);
  grid-template-rows:max-content minmax(0, 1fr) max-content max-content;
  width:100%;
  height:100%;
  min-height:0;
  padding:10px;
  overflow:hidden;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen) .lesson-solar-eclipse-3d__intro{
  grid-column:1 / -1;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen) .lesson-solar-eclipse-3d__intro > strong{
  font-size:18px;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen) .lesson-solar-eclipse-3d__stage{
  grid-column:1;
  grid-row:2 / 5;
  width:100%;
  height:100%;
  min-height:0;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen) .lesson-solar-eclipse-3d__stage > canvas[data-solar-eclipse-canvas]{
  height:100%;
  min-height:0;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen) .lesson-moon-phase-preview{
  width:260px;
  padding:13px;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen) .lesson-moon-phase-preview canvas{
  width:145px;
  height:145px;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen) .lesson-solar-eclipse-3d__controls{
  grid-column:2;
  grid-row:2;
  grid-template-columns:1fr;
  align-content:start;
  width:100%;
  min-height:0;
  min-width:0;
  padding:10px;
  overflow-y:auto;
  overflow-x:hidden;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen) .lesson-solar-eclipse-3d__controls > label{
  grid-row:auto;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen) .lesson-solar-eclipse-3d__modes{
  grid-column:auto;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  width:100%;
  min-width:0;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  :is(.lesson-solar-eclipse-3d__modes, .lesson-solar-eclipse-3d__buttons, .lesson-solar-eclipse-3d__views) > button{
  min-width:0;
  font-size:12px;
  white-space:normal;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen) .lesson-solar-eclipse-3d__buttons > button{
  flex:1 1 calc(50% - 8px);
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen) .lesson-solar-eclipse-3d__result{
  grid-column:2;
  grid-row:3;
  padding:10px;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen) .lesson-solar-eclipse-3d__result strong{
  font-size:16px;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen) .lesson-solar-eclipse-3d__note,
.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen) .lesson-solar-eclipse-3d__why-monthly{
  display:none;
}

@media (max-width:900px){
  .lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen) .lesson-solar-eclipse-3d{
    display:block;
    overflow:auto;
  }

  .lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen) .lesson-solar-eclipse-3d__stage{
    height:min(58dvh, 520px);
    min-height:330px;
    margin:10px 0;
  }

  .lesson-space-rock-route{flex-wrap:wrap;}
  .lesson-space-rock-route article{flex:1 1 calc(50% - 28px);}
  .lesson-space-rock-route > i{display:none;}
}

@media (max-width:760px){
  .lesson-planet-classifier__groups,
  .lesson-model-checklist{
    grid-template-columns:1fr;
  }

  .lesson-eclipse-lab__system{
    grid-template-columns:100px minmax(38px,1fr) 58px minmax(38px,1fr) 76px;
    min-height:170px;
    padding:14px;
  }

  .lesson-eclipse-lab__system .is-sun i{width:82px;height:82px;}
  .lesson-eclipse-lab__system.is-solar .is-middle i,
  .lesson-eclipse-lab__system.is-lunar .is-end i{width:34px;height:34px;}
  .lesson-eclipse-lab__system.is-solar .is-end i,
  .lesson-eclipse-lab__system.is-lunar .is-middle i{width:56px;height:56px;}

  .lesson-planet-photo-gallery__grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .lesson-solar-eclipse-3d__controls{grid-template-columns:1fr;}
  .lesson-solar-eclipse-3d__controls > label{grid-row:auto;}
}

@media (max-width:520px){
  .lesson-science-lab{padding:13px;}
  .lesson-science-lab__intro > strong{font-size:19px;}
  .lesson-planet-classifier__criteria > button,
  .lesson-eclipse-lab__choices > button{flex:1 1 calc(50% - 10px);}
  .lesson-planet-classifier__groups article > div{grid-template-columns:1fr;}
  .lesson-planet-order__orbit{grid-template-columns:64px minmax(0, 1fr);}
  .lesson-planet-order__orbit > b{min-height:70px;font-size:13px;}
  .lesson-planet-order__orbit span{min-height:82px;}
  .lesson-space-rock-route article{flex-basis:100%;}
  .lesson-eclipse-lab__system{
    grid-template-columns:70px minmax(22px,1fr) 46px minmax(22px,1fr) 58px;
    min-height:145px;
    padding:10px;
  }
  .lesson-eclipse-lab__system .is-sun i{width:60px;height:60px;}
  .lesson-eclipse-lab__system.is-solar .is-middle i,
  .lesson-eclipse-lab__system.is-lunar .is-end i{width:26px;height:26px;}
  .lesson-eclipse-lab__system.is-solar .is-end i,
  .lesson-eclipse-lab__system.is-lunar .is-middle i{width:44px;height:44px;}
  .lesson-eclipse-lab__system strong{font-size:11px;}
  .lesson-eclipse-lab__rays{left:50px;right:18px;height:75px;}
  .lesson-eclipse-lab__shadow{height:38px;}

  .lesson-planet-order__choices button{
    flex-basis:calc(25% - 10px);
    min-width:68px;
    font-size:12px;
  }

  .lesson-planet-order__choices button img{
    width:46px;
    height:46px;
  }

  .lesson-planet-photo-modal{
    padding:58px 10px 12px;
  }

  .lesson-planet-photo-modal__close{
    top:8px;
    right:10px;
  }

  .lesson-planet-photo-modal__window{
    width:100%;
    max-height:calc(100vh - 72px);
  }

  .lesson-planet-photo-modal__window > div{
    padding:14px;
  }

  .lesson-solar-eclipse-3d{padding:11px;}
  .lesson-solar-eclipse-3d__intro > strong{font-size:19px;}
  .lesson-solar-eclipse-3d__stage{min-height:315px;}
  .lesson-solar-eclipse-3d__stage > canvas[data-solar-eclipse-canvas]{height:315px;}
  .lesson-moon-phase-preview{width:132px;padding:7px;}
  .lesson-moon-phase-preview canvas{width:84px;height:84px;}
  .lesson-moon-phase-preview p{display:none;}
  .lesson-solar-eclipse-3d__controls{padding:11px;}
  .lesson-solar-eclipse-3d__buttons > button{flex-basis:calc(50% - 8px);font-size:12px;}
  .lesson-solar-eclipse-3d__views > button{flex-basis:calc(50% - 8px);font-size:12px;}
  .lesson-solar-eclipse-3d__result{grid-template-columns:38px minmax(0,1fr);padding:11px;}
  .lesson-solar-eclipse-3d__result > span{width:38px;height:38px;font-size:19px;}
  .lesson-solar-eclipse-3d__result strong{font-size:16px;}
  .lesson-solar-eclipse-3d__labels{font-size:10px;}
}

@media (max-width:620px){
  .lesson-rectangle-lab,
  .lesson-perimeter-builder,
  .lesson-unit-square-lab,
  .lesson-measure-compare,
  .lesson-measure-problems{
    padding:10px;
  }

  .lesson-rectangle-lab__results{
    grid-template-columns:1fr;
  }

  .lesson-perimeter-builder__head{
    grid-template-columns:1fr;
  }

  .lesson-rectangle-lab__stage,
  .lesson-unit-square-lab__stage{
    min-height:250px;
    padding:38px 12px 18px 44px;
  }

  .lesson-measure-grid{
    --measure-cell-size:clamp(15px, 5vw, 24px);
  }

  .lesson-measure-grid.is-compact{
    --measure-cell-size:8px;
  }

  .lesson-measure-problems__head{
    grid-template-columns:44px minmax(0, 1fr) 44px;
  }
}

/* 5. Sınıf Matematik - Geometrik Şekiller etkileşimleri */
.lesson-geometry-switcher{
  display:grid;
  gap:14px;
  width:100%;
}

.lesson-geometry-switcher__choices{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.lesson-geometry-switcher__choices .secondary-button{
  min-width:104px;
  min-height:46px;
  padding:10px 14px;
  touch-action:manipulation;
}

.lesson-geometry-switcher__choices .secondary-button.is-active{
  color:#fff;
  background:var(--accent, #c21867);
  border-color:var(--accent, #c21867);
  box-shadow:0 3px 10px rgba(194, 24, 103, .2);
}

.lesson-geometry-switcher__stage{
  min-height:430px;
  border:1px solid var(--border-color, #efb9d1);
  border-radius:14px;
  background:linear-gradient(145deg, #fff 0%, #fff8fb 100%);
  overflow:hidden;
}

.lesson-geometry-switcher__panel{
  display:grid;
  grid-template-columns:minmax(440px, 1.45fr) minmax(250px, .7fr);
  align-items:center;
  gap:18px;
  min-height:430px;
  padding:20px;
}

.lesson-geometry-switcher__panel[hidden]{
  display:none !important;
}

.lesson-geometry-switcher__drawing{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:360px;
  padding:10px;
  border:1px solid rgba(194, 24, 103, .16);
  border-radius:12px;
  background:#fff;
}

.lesson-geometry-switcher__drawing svg{
  display:block;
  width:100%;
  max-width:780px;
  height:auto;
  max-height:420px;
  color:var(--text-color, #241729);
  font-family:inherit;
  font-size:22px;
  font-weight:700;
}

.lesson-geometry-switcher__drawing .geometry-basic-svg{
  max-width:820px;
}

.lesson-geometry-switcher__drawing .geometry-basic-svg text{
  fill:#252033;
  stroke:#fff;
  stroke-width:5px;
  paint-order:stroke fill;
  stroke-linejoin:round;
  font-size:34px;
  font-weight:900;
}

.lesson-geometry-switcher__drawing .geometry-basic-svg .geometry-angle-label{
  fill:#b51762;
  font-size:30px;
}

.lesson-geometry-switcher .geometry-arrowhead{
  fill:#c21867;
  stroke:none;
}

.lesson-geometry-switcher .geometry-angle-area{
  fill:#ffe1f1;
  stroke:none;
}

.lesson-geometry-switcher .geometry-full-turn{
  fill:none;
  stroke:#c21867;
  stroke-width:6;
  vector-effect:non-scaling-stroke;
}

.lesson-geometry-switcher__explanation{
  display:grid;
  gap:10px;
  align-content:center;
}

.lesson-geometry-switcher__explanation strong{
  color:var(--heading-color, #241729);
  font-size:1.15rem;
}

.lesson-geometry-switcher__explanation p{
  margin:0;
  line-height:1.65;
}

.lesson-geometry-switcher__explanation small{
  display:block;
  padding:10px 12px;
  border-left:4px solid var(--accent, #c21867);
  border-radius:8px;
  color:var(--muted-color, #6d5267);
  background:#fff2f8;
  font-size:.92rem;
  line-height:1.5;
}

.lesson-geometry-switcher .geometry-line,
.lesson-geometry-switcher .geometry-circle,
.lesson-geometry-switcher .geometry-polygon,
.lesson-geometry-switcher .geometry-triangle-focus,
.lesson-geometry-switcher .geometry-accent,
.lesson-geometry-switcher .geometry-guide,
.lesson-geometry-switcher .geometry-angle-mark{
  vector-effect:non-scaling-stroke;
}

.lesson-geometry-switcher .geometry-line{
  fill:none;
  stroke:#252033;
  stroke-width:5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.lesson-geometry-switcher .geometry-line--open{
  fill:none;
}

.lesson-geometry-switcher .geometry-line--thick{
  stroke-width:10;
}

.lesson-geometry-switcher .geometry-fill{
  fill:#c21867;
  stroke:#c21867;
}

.lesson-geometry-switcher .geometry-fill-soft{
  fill:#4169e1;
  stroke:#4169e1;
}

.lesson-geometry-switcher .geometry-accent{
  fill:none;
  stroke:#c21867;
  stroke-width:5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.lesson-geometry-switcher path.geometry-fill{
  fill:#c21867;
  stroke:none;
}

.lesson-geometry-switcher .geometry-circle{
  fill:none;
  stroke:#252033;
  stroke-width:5;
}

.lesson-geometry-switcher .geometry-circle--soft{
  stroke:#8a5a76;
  stroke-width:3;
  opacity:.72;
}

.lesson-geometry-switcher .geometry-disk{
  fill:#f7cce0;
  stroke:#252033;
  stroke-width:5;
  vector-effect:non-scaling-stroke;
}

.lesson-geometry-switcher .geometry-polygon{
  fill:#fff1f7;
  stroke:#252033;
  stroke-width:5;
  stroke-linejoin:round;
}

.lesson-geometry-switcher .geometry-triangle-focus{
  fill:rgba(194, 24, 103, .2);
  stroke:#c21867;
  stroke-width:5;
  stroke-linejoin:round;
}

.lesson-geometry-switcher .geometry-guide{
  fill:none;
  stroke:#9a8292;
  stroke-width:2;
  stroke-dasharray:8 7;
}

.lesson-geometry-switcher .geometry-angle-mark{
  fill:none;
  stroke:#e83f94;
  stroke-width:5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.lesson-geometry-switcher .geometry-angle-label{
  fill:#b51762;
  font-size:30px;
  font-weight:900;
  paint-order:stroke;
  stroke:#fff;
  stroke-width:7px;
  stroke-linejoin:round;
}

.lesson-angle-lab{
  display:grid;
  justify-items:center;
  gap:14px;
  width:100%;
}

.lesson-angle-lab__presets{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:9px;
  width:100%;
}

.lesson-angle-lab__presets .secondary-button{
  min-width:78px;
  min-height:48px;
  touch-action:manipulation;
}

.lesson-angle-lab__presets .secondary-button.is-active{
  border-color:#e83f94;
  background:#e83f94;
  color:#fff;
}

.lesson-angle-lab__canvas-wrap{
  width:min(920px, 100%);
  border:1px solid #f0c8df;
  border-radius:12px;
  background:linear-gradient(180deg, #fff 0%, #fff7fb 100%);
  overflow:hidden;
}

.lesson-angle-lab__canvas{
  display:block;
  width:100%;
  height:auto;
  min-height:340px;
  touch-action:none;
  cursor:crosshair;
  user-select:none;
}

.lesson-angle-lab__protractor{
  fill:#fff1f7;
  stroke:#d8a8c2;
  stroke-width:3;
}

.lesson-angle-lab [data-angle-ticks] line{
  stroke:#8a6e80;
  stroke-width:2;
  vector-effect:non-scaling-stroke;
}

.lesson-angle-lab [data-angle-ticks] text{
  fill:#6f6076;
  font-size:15px;
  font-weight:900;
}

.lesson-angle-lab__base,
.lesson-angle-lab__arm{
  stroke:#252033;
  stroke-width:8;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}

.lesson-angle-lab__arc,
.lesson-angle-lab__right-marker{
  fill:none;
  stroke:#e83f94;
  stroke-width:7;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}

.lesson-angle-lab__vertex{
  fill:#252033;
}

.lesson-angle-lab__handle{
  fill:#e83f94;
  stroke:#fff;
  stroke-width:7;
  filter:drop-shadow(0 4px 5px rgba(181, 23, 98, .3));
  cursor:grab;
}

.lesson-angle-lab__handle:active{
  cursor:grabbing;
}

.lesson-angle-lab__svg-label{
  fill:#b51762;
  font-size:28px;
  font-weight:900;
  paint-order:stroke;
  stroke:#fff;
  stroke-width:9px;
  stroke-linejoin:round;
}

.lesson-angle-lab__range-label{
  display:grid;
  justify-items:center;
  gap:8px;
  width:min(700px, 100%);
  color:var(--text);
  font-weight:900;
}

.lesson-angle-lab__range-label input{
  width:100%;
  min-height:44px;
  accent-color:#e83f94;
  cursor:pointer;
  touch-action:pan-x;
}

.lesson-angle-lab__result{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:60px;
  padding:10px 16px;
  border:2px solid #e83f94;
  border-radius:12px;
  background:#fff;
}

.lesson-angle-lab__result strong{
  color:#e83f94;
  font-size:30px;
}

.lesson-angle-lab__result span{
  color:var(--text);
  font-weight:900;
}

.lesson-angle-lab > p{
  margin:0;
  padding:10px 12px;
  border:1px dashed #f0c8df;
  border-radius:10px;
  background:#fff;
  color:var(--muted);
  font-weight:800;
  line-height:1.55;
  text-align:center;
}

.lesson-intersection-lab{
  display:grid;
  justify-items:center;
  gap:16px;
  width:100%;
}

.lesson-intersection-lab__presets{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  width:100%;
}

.lesson-intersection-lab__presets .secondary-button{
  min-width:88px;
  min-height:48px;
  touch-action:manipulation;
}

.lesson-intersection-lab__presets .secondary-button.is-active{
  color:#fff;
  background:#e83f94;
  border-color:#e83f94;
}

.lesson-intersection-lab__canvas-wrap{
  width:min(920px, 100%);
  border:1px solid #f0c8df;
  border-radius:14px;
  background:#fff;
  overflow:hidden;
}

.lesson-intersection-lab__canvas{
  display:block;
  width:100%;
  height:auto;
  min-height:360px;
}

.lesson-intersection-lab__sector{
  stroke-width:4;
  vector-effect:non-scaling-stroke;
}

.lesson-intersection-lab__sector--pink{
  fill:#ffe1f1;
  stroke:#c21867;
}

.lesson-intersection-lab__sector--blue{
  fill:#e6edff;
  stroke:#4169e1;
}

.lesson-intersection-lab__line{
  stroke:#252033;
  stroke-width:7;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}

.lesson-intersection-lab__vertex{
  fill:#252033;
}

.lesson-intersection-lab__point,
.lesson-intersection-lab__angle-label{
  fill:#252033;
  font-family:inherit;
  font-size:28px;
  font-weight:900;
  paint-order:stroke fill;
  stroke:#fff;
  stroke-width:8px;
  stroke-linejoin:round;
}

.lesson-intersection-lab__angle-label{
  font-size:26px;
}

.lesson-intersection-lab__range-label{
  display:grid;
  justify-items:center;
  gap:8px;
  width:min(720px, 100%);
  color:var(--text);
  font-weight:900;
}

.lesson-intersection-lab__range-label input{
  width:100%;
  min-height:48px;
  accent-color:#e83f94;
  cursor:pointer;
  touch-action:pan-x;
}

.lesson-intersection-lab__facts{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
  width:100%;
}

.lesson-intersection-lab__fact{
  display:grid;
  gap:7px;
  align-content:start;
  min-height:112px;
  padding:14px;
  border:2px solid #d8c9d3;
  border-radius:12px;
  background:#fff;
}

.lesson-intersection-lab__fact--pink{
  border-color:#e83f94;
  background:#fff5fa;
}

.lesson-intersection-lab__fact--blue{
  border-color:#4169e1;
  background:#f4f7ff;
}

.lesson-intersection-lab__fact strong{
  color:#252033;
  font-size:1.18rem;
}

.lesson-intersection-lab__fact span{
  color:var(--muted);
  line-height:1.5;
}

.lesson-intersection-lab > p{
  margin:0;
  padding:11px 13px;
  border:1px dashed #f0c8df;
  border-radius:10px;
  background:#fff;
  color:var(--muted);
  font-weight:800;
  line-height:1.55;
  text-align:center;
}

@media (max-width: 820px){
  .lesson-geometry-switcher__panel{
    grid-template-columns:1fr;
  }

  .lesson-geometry-switcher__drawing{
    min-height:320px;
  }
}

/* 6. sınıf 4. Tema: Geometrik Nicelikler */
.lesson-area-unit-lab__stage,
.lesson-shape-area-lab__stage,
.lesson-pi-lab__stage,
.lesson-arc-lab__stage{
  display:grid;
  grid-template-columns:minmax(280px, 1fr) minmax(270px, .8fr);
  align-items:center;
  gap:18px;
  min-width:0;
}

.lesson-area-unit-lab__square{
  display:grid;
  grid-template-columns:repeat(10, minmax(13px, 1fr));
  width:min(100%, 390px);
  aspect-ratio:1;
  margin:auto;
  overflow:hidden;
  border:5px solid var(--accent-strong);
  border-radius:10px;
  background:#fff;
}

.lesson-area-unit-lab__square i{
  border:1px solid #cfbdd0;
  background:#fff4fa;
}

.lesson-area-unit-lab__square i:nth-child(odd){
  background:#eef5ff;
}

.lesson-area-unit-lab__explanation,
.lesson-shape-area-lab__result,
.lesson-pi-lab__result,
.lesson-arc-lab__result{
  display:grid;
  gap:8px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
}

.lesson-area-unit-lab__explanation span,
.lesson-shape-area-lab__result span,
.lesson-pi-lab__result span,
.lesson-arc-lab__result span{
  color:var(--muted);
  font-size:13px;
  font-weight:850;
}

.lesson-area-unit-lab__explanation strong,
.lesson-shape-area-lab__result strong,
.lesson-pi-lab__result strong,
.lesson-arc-lab__result strong{
  color:var(--accent-strong);
  font-size:clamp(18px, 2.2vw, 25px);
}

.lesson-area-unit-lab__explanation p,
.lesson-area-unit-lab__explanation small,
.lesson-shape-area-lab__result p,
.lesson-pi-lab__result p,
.lesson-arc-lab__result p{
  margin:0;
  color:var(--text);
  line-height:1.5;
}

.lesson-area-unit-lab__explanation b,
.lesson-pi-lab__result b{
  padding:10px;
  border-radius:9px;
  background:var(--ok-soft);
  color:var(--ok);
  line-height:1.45;
}

.lesson-area-unit-steps{
  display:grid;
  gap:10px;
}

.lesson-area-unit-steps > div{
  display:grid;
  grid-template-columns:minmax(65px, .35fr) minmax(210px, 1fr) minmax(65px, .35fr);
  align-items:center;
  gap:10px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fff;
  text-align:center;
}

.lesson-area-unit-steps strong{
  color:var(--accent-strong);
  font-size:19px;
}

.lesson-area-unit-steps span{
  color:#315b92;
  font-weight:900;
}

.lesson-area-unit-steps p{
  margin:0;
  padding:12px 14px;
  border-left:5px solid var(--accent);
  border-radius:10px;
  background:#fff0f7;
  line-height:1.55;
}

.lesson-shape-area-lab__choices{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.lesson-shape-area-lab__choices .secondary-button{
  min-height:46px;
}

.lesson-shape-area-lab__choices .secondary-button.is-active{
  border-color:var(--accent);
  background:var(--accent-soft);
  color:var(--accent-strong);
  box-shadow:0 0 0 3px rgba(232, 63, 148, .13);
}

.lesson-shape-area-lab__stage svg,
.lesson-pi-lab__stage svg,
.lesson-arc-lab__stage svg{
  width:100%;
  max-height:390px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
}

.lesson-shape-area-lab__stage polygon{
  fill:#ffe0ef;
  stroke:#a81859;
  stroke-width:6;
  stroke-linejoin:round;
}

.lesson-shape-area-lab__stage .is-height{
  stroke:#3979c7;
  stroke-width:5;
  stroke-dasharray:9 7;
}

.lesson-shape-area-lab__stage .is-right-angle{
  fill:none;
  stroke:#168263;
  stroke-width:4;
}

.lesson-shape-area-lab__stage text{
  fill:#312a38;
  font-size:15px;
  font-weight:900;
}

.lesson-shape-area-lab__stage .is-base-label{
  text-anchor:middle;
}

.lesson-shape-area-lab__stage .is-height-label{
  writing-mode:vertical-rl;
  text-orientation:mixed;
}

.lesson-pi-lab__stage svg circle{
  fill:#fff2f8;
  stroke:#a81859;
  stroke-width:7;
}

.lesson-pi-lab__stage svg line{
  stroke:#3979c7;
  stroke-width:6;
}

.lesson-pi-lab__stage svg circle.is-center{
  fill:#3979c7;
  stroke:#fff;
  stroke-width:3;
}

.lesson-pi-lab__stage svg path{
  fill:none;
  stroke:#168263;
  stroke-width:5;
  stroke-dasharray:10 7;
}

.lesson-pi-lab__stage svg text{
  fill:#312a38;
  font-size:16px;
  font-weight:900;
  text-anchor:middle;
}

.lesson-arc-lab__stage .is-circle{
  fill:#fff;
  stroke:#c6b7c7;
  stroke-width:5;
}

.lesson-arc-lab__stage .is-sector{
  fill:rgba(232, 63, 148, .18);
  stroke:none;
}

.lesson-arc-lab__stage .is-highlight{
  fill:none;
  stroke:#e83f94;
  stroke-width:11;
  stroke-linecap:round;
}

.lesson-arc-lab__stage line{
  stroke:#3979c7;
  stroke-width:5;
}

.lesson-arc-lab__stage .is-center{
  fill:#3979c7;
  stroke:#fff;
  stroke-width:3;
}

.lesson-arc-lab__stage text{
  fill:#312a38;
  font-size:19px;
  font-weight:950;
  text-anchor:middle;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  :is(.lesson-area-unit-lab, .lesson-shape-area-lab, .lesson-pi-lab, .lesson-arc-lab){
  height:100%;
  min-height:0;
  overflow:auto;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  :is(.lesson-area-unit-lab__stage, .lesson-shape-area-lab__stage, .lesson-pi-lab__stage, .lesson-arc-lab__stage){
  min-height:0;
}

@media (max-width: 820px){
  .lesson-area-unit-lab__stage,
  .lesson-shape-area-lab__stage,
  .lesson-pi-lab__stage,
  .lesson-arc-lab__stage{
    grid-template-columns:1fr;
  }

  .lesson-area-unit-lab__square{
    width:min(100%, 330px);
  }
}

@media (max-width: 520px){
  .lesson-area-unit-steps > div{
    grid-template-columns:1fr;
  }

  .lesson-area-unit-steps span{
    font-size:13px;
  }
}

@media (max-width: 560px){
  .lesson-geometry-switcher__choices .secondary-button{
    flex:1 1 calc(50% - 10px);
    min-width:0;
  }

  .lesson-geometry-switcher__stage,
  .lesson-geometry-switcher__panel{
    min-height:0;
  }

  .lesson-geometry-switcher__panel{
    padding:12px;
  }

  .lesson-geometry-switcher__drawing{
    min-height:270px;
  }

  .lesson-angle-lab__canvas{
    min-height:280px;
  }

  .lesson-intersection-lab__canvas{
    min-height:300px;
  }

  .lesson-intersection-lab__facts{
    grid-template-columns:1fr;
  }

  .lesson-angle-lab__presets .secondary-button{
    flex:1 1 calc(33.333% - 9px);
    min-width:0;
  }
}

/* 5. sınıf: İşlemlerle Cebirsel Düşünme etkileşimleri */
.lesson-equality-lab,
.lesson-concept-deck{
  display:grid;
  gap:12px;
  width:100%;
  min-width:0;
}

.lesson-equality-lab__head,
.lesson-concept-deck__head,
.lesson-equality-lab__step{
  display:grid;
  grid-template-columns:44px minmax(0, 1fr) 44px;
  align-items:center;
  gap:10px;
}

.lesson-equality-lab__head > div,
.lesson-concept-deck__head > div{
  display:grid;
  gap:4px;
  text-align:center;
}

.lesson-equality-lab__head strong,
.lesson-concept-deck__head strong{
  font-size:clamp(20px, 3vw, 32px);
  color:#102a43;
}

.lesson-equality-lab__head span,
.lesson-concept-deck__head span,
.lesson-concept-deck__head small{
  color:#6b5a6f;
}

.lesson-equality-lab__stage{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 52px minmax(0, 1fr);
  align-items:stretch;
  gap:10px;
}

.lesson-equality-box{
  display:grid;
  grid-template-rows:auto 1fr;
  gap:8px;
  min-width:0;
  min-height:230px;
  padding:12px;
  border:3px solid #334e68;
  border-top-width:8px;
  border-radius:12px 12px 18px 18px;
  background:#fff;
  box-shadow:inset 0 -8px 0 rgba(51, 78, 104, .06);
}

.lesson-equality-box > strong{
  text-align:center;
  color:#334e68;
}

.lesson-equality-box__content{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  align-content:center;
  gap:8px;
  min-width:0;
}

.lesson-equality-sign{
  display:grid;
  place-items:center;
  min-width:44px;
  color:#cf1970;
  font-size:clamp(36px, 6vw, 64px);
  font-weight:900;
}

.lesson-equality-group,
.lesson-equality-extra{
  display:grid;
  place-items:center;
  gap:6px;
  min-width:82px;
  min-height:88px;
  padding:8px;
  border:2px solid #e3b7ce;
  border-radius:12px;
  background:#fff7fb;
}

.lesson-equality-group.is-unknown strong{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:50%;
  background:#cf1970;
  color:#fff;
  font-size:24px;
}

.lesson-equality-group small,
.lesson-equality-extra small,
.lesson-equality-box__content > small{
  color:#6b5a6f;
  text-align:center;
  font-weight:700;
}

.lesson-marble-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:5px;
  max-width:180px;
}

.lesson-marble-row.is-large{
  max-width:250px;
}

.lesson-marble{
  display:block;
  width:22px;
  height:22px;
  flex:0 0 22px;
  border:2px solid #31243b;
  border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #fff 0 8%, #ef4a9c 12% 58%, #c11868 62% 100%);
  box-shadow:0 2px 3px rgba(49, 36, 59, .18);
}

.lesson-marble.is-blue{
  background:radial-gradient(circle at 32% 28%, #fff 0 8%, #4e8cff 12% 58%, #2455c6 62% 100%);
}

.lesson-equality-lab__step{
  padding:10px;
  border:1px solid #b7e3df;
  border-radius:12px;
  background:#effcf9;
}

.lesson-equality-lab__step > div{
  display:grid;
  gap:4px;
}

.lesson-equality-lab__step p,
.lesson-concept-deck__explanation,
.lesson-order-story p{
  margin:0;
  line-height:1.55;
}

.lesson-concept-deck__visual{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 52px minmax(0, 1fr);
  align-items:stretch;
  gap:10px;
  min-width:0;
}

.lesson-property-side{
  display:grid;
  place-items:center;
  gap:8px;
  min-height:150px;
  padding:14px;
  border:2px solid #f0c4da;
  border-radius:12px;
  background:#fff8fc;
  text-align:center;
}

.lesson-property-side span,
.lesson-pattern-rule span{
  color:#765e70;
  font-size:13px;
}

.lesson-property-side strong{
  font-size:clamp(16px, 2.4vw, 23px);
}

.lesson-concept-deck[data-deck-type="order"] .lesson-concept-deck__visual,
.lesson-concept-deck[data-deck-type="pattern"] .lesson-concept-deck__visual,
.lesson-concept-deck[data-deck-type="algorithm"] .lesson-concept-deck__visual{
  grid-template-columns:1fr;
}

.lesson-order-story{
  display:grid;
  gap:12px;
}

.lesson-order-story > p{
  padding:12px;
  border-left:5px solid #cf1970;
  border-radius:8px;
  background:#fff8fc;
}

.lesson-order-steps{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:8px;
}

.lesson-order-steps > div,
.lesson-algorithm-step{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:64px;
  padding:10px;
  border:1px solid #b7d2ff;
  border-radius:10px;
  background:#f4f8ff;
}

.lesson-order-steps span,
.lesson-algorithm-step > span{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  flex:0 0 34px;
  border-radius:50%;
  background:#2b65d9;
  color:#fff;
  font-weight:900;
}

.lesson-pattern-terms{
  display:grid;
  grid-template-columns:repeat(5, minmax(90px, 1fr));
  gap:8px;
  overflow-x:auto;
  padding-bottom:4px;
}

.lesson-pattern-terms > div{
  display:grid;
  justify-items:center;
  gap:6px;
  min-width:90px;
  padding:10px;
  border:1px solid #e3c6ee;
  border-radius:10px;
  background:#fbf7ff;
}

.lesson-pattern-terms strong{
  color:#6d28a8;
  font-size:24px;
}

.lesson-pattern-blocks{
  display:block;
  width:min(100%, calc(var(--block-count) * 8px));
  height:12px;
  border-radius:999px;
  background:repeating-linear-gradient(90deg, #cf1970 0 6px, #fff 6px 8px);
}

.lesson-pattern-rule{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
}

.lesson-pattern-rule > div{
  display:grid;
  gap:4px;
  padding:12px;
  border:1px solid #b7e3df;
  border-radius:10px;
  background:#effcf9;
}

.lesson-algorithm-flow{
  display:flex;
  align-items:stretch;
  gap:8px;
  min-width:0;
}

.lesson-algorithm-step{
  flex:1 1 0;
  min-width:0;
}

.lesson-algorithm-flow > i{
  display:grid;
  place-items:center;
  flex:0 0 24px;
  color:#cf1970;
  font-size:24px;
  font-style:normal;
  font-weight:900;
}

@media (max-width:760px){
  .lesson-equality-lab__stage,
  .lesson-concept-deck__visual{
    grid-template-columns:1fr;
  }

  .lesson-equality-sign{
    min-height:44px;
  }

  .lesson-equality-box{
    min-height:180px;
  }

  .lesson-pattern-rule{
    grid-template-columns:1fr;
  }

  .lesson-algorithm-flow{
    flex-direction:column;
  }

  .lesson-algorithm-flow > i{
    min-height:24px;
    transform:rotate(90deg);
  }
}

@font-face{
  font-family:"Atkinson Hyperlegible Next";
  src:url("../fonts/AtkinsonHyperlegibleNext-Regular.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Atkinson Hyperlegible Next";
  src:url("../fonts/AtkinsonHyperlegibleNext-Medium.ttf") format("truetype");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Atkinson Hyperlegible Next";
  src:url("../fonts/AtkinsonHyperlegibleNext-Bold.ttf") format("truetype");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Atkinson Hyperlegible Next";
  src:url("../fonts/AtkinsonHyperlegibleNext-ExtraBold.ttf") format("truetype");
  font-weight:800;
  font-style:normal;
  font-display:swap;
}

*{box-sizing:border-box}
html,body{height:100%}
[hidden]{
  display:none !important;
}
body{
  margin:0;
  min-height:100vh;
  font-family:"Atkinson Hyperlegible Next","Segoe UI",Tahoma,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 0% 0%, rgba(232,63,148,.14), transparent 24%),
    radial-gradient(circle at 100% 0%, rgba(255,122,89,.08), transparent 22%),
    linear-gradient(180deg, #fff0f8 0%, var(--bg) 100%);
}

.app-shell{
  min-height:100vh;
  display:grid;
  grid-template-rows:auto 1fr auto;
  background:
    radial-gradient(circle at 0% 0%, rgba(232,63,148,.14), transparent 24%),
    radial-gradient(circle at 100% 0%, rgba(255,122,89,.08), transparent 22%),
    linear-gradient(180deg, #fff0f8 0%, var(--bg) 100%);
}

.app-shell:fullscreen{
  background:
    radial-gradient(circle at 0% 0%, rgba(232,63,148,.14), transparent 24%),
    radial-gradient(circle at 100% 0%, rgba(255,122,89,.08), transparent 22%),
    linear-gradient(180deg, #fff0f8 0%, var(--bg) 100%);
}

.app-shell:-webkit-full-screen{
  background:
    radial-gradient(circle at 0% 0%, rgba(232,63,148,.14), transparent 24%),
    radial-gradient(circle at 100% 0%, rgba(255,122,89,.08), transparent 22%),
    linear-gradient(180deg, #fff0f8 0%, var(--bg) 100%);
}

.app-shell:fullscreen,
.app-shell:-webkit-full-screen,
.app-shell.is-site-fullscreen{
  grid-template-rows:auto minmax(0, 1fr) auto;
  width:100vw;
  height:var(--bdk-visual-viewport-height, 100dvh);
  min-height:var(--bdk-visual-viewport-height, 100dvh);
  max-height:var(--bdk-visual-viewport-height, 100dvh);
  overflow:hidden;
}

.app-shell:fullscreen .workspace,
.app-shell:-webkit-full-screen .workspace,
.app-shell.is-site-fullscreen .workspace{
  min-height:0;
  height:100%;
  align-items:stretch;
  overflow:hidden;
}

.app-shell:fullscreen .view-frame,
.app-shell:-webkit-full-screen .view-frame,
.app-shell.is-site-fullscreen .view-frame{
  height:100%;
  min-height:0;
  overflow:hidden;
}

.app-shell:fullscreen .view-panel,
.app-shell:-webkit-full-screen .view-panel,
.app-shell.is-site-fullscreen .view-panel{
  height:100%;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 12px;
  border-bottom:1px solid rgba(233,161,203,.48);
  background:rgba(255,248,252,.92);
  backdrop-filter:blur(10px);
  position:sticky;
  top:0;
  z-index:20;
}

.brand-block{
  display:flex;
  align-items:flex-start;
  gap:10px;
}

.brand-chip,
.view-pill,
.tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
}

.brand-chip,
.view-pill{
  background:var(--accent-soft);
  color:var(--accent-strong);
}

.brand-title{
  display:block;
  font-size:16px;
  font-weight:800;
  letter-spacing:.01em;
}

.brand-title--solo{
  line-height:1;
}

.brand-text{
  margin:2px 0 0;
  color:var(--muted);
  font-size:12px;
}

.site-footer{
  padding:10px 12px;
  border-top:1px solid rgba(233,161,203,.48);
  background:rgba(255,250,253,.88);
}

.site-footer-note{
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
  text-align:center;
}

.ghost-button,
.action-button,
.icon-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  text-decoration:none;
  gap:8px;
}

.ghost-button:hover,
.action-button:hover,
.icon-button:hover{
  border-color:var(--line-strong);
  background:var(--surface-soft);
}

.icon-button{
  width:44px;
  min-width:44px;
  padding:0;
}

.button-icon{
  width:20px;
  height:20px;
  flex:0 0 auto;
}

.lesson-step-symbol{
  font-size:24px;
  font-weight:900;
  line-height:1;
}

.topbar-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.mobile-menu-toggle{
  display:none;
}

.auth-shortcut{
  max-width:220px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.auth-shortcut__avatar{
  width:24px;
  height:24px;
  border-radius:6px;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}

.panel-tab-button--pixel{
  border-color:#ff8bc7;
  background:#fff0f8;
}

.panel-tab-icon--pixel{
  filter:invert(27%) sepia(94%) saturate(2621%) hue-rotate(303deg) brightness(94%) contrast(94%);
}

.workspace{
  display:grid;
  grid-template-columns:var(--sidebar-width) 1fr;
  gap:6px;
  padding:6px;
  min-height:0;
  align-items:start;
}

.app-shell.is-sidebar-collapsed .workspace{
  --sidebar-width:52px;
  grid-template-columns:52px 1fr;
}

.sidebar,
.view-frame{
  min-height:0;
}

.sidebar{
  grid-column:1;
}

.view-frame{
  grid-column:2;
}

.sidebar{
  position:fixed;
  top:54px;
  left:6px;
  bottom:6px;
  z-index:18;
  display:grid;
  grid-template-rows:1fr auto;
  gap:6px;
  width:var(--sidebar-width);
  height:auto;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,251,253,.96);
  box-shadow:var(--shadow);
  padding:8px;
}

.menu{
  display:flex;
  flex-direction:column;
  gap:4px;
  align-content:start;
  justify-content:start;
  min-height:0;
}

.menu-link{
  display:grid;
  grid-template-columns:20px max-content;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:5px 8px;
  border:1px solid transparent;
  border-radius:8px;
  text-decoration:none;
  color:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,247,252,.96));
}

.menu-icon{
  width:18px;
  height:18px;
  color:var(--accent-strong);
}

.menu-copy{
  display:grid;
  min-width:0;
}

.menu-link:hover{
  border-color:var(--line-strong);
}

.menu-link.is-active{
  border-color:var(--line-strong);
  background:linear-gradient(180deg, #fff6fb, #fffdfd);
  box-shadow:0 8px 18px rgba(232,63,148,.08);
}

.menu-label{
  font-size:13px;
  font-weight:800;
}

.helper-note p{
  margin:0 0 6px;
}

.helper-note p:last-child{
  margin-bottom:0;
}

.sidebar-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  min-height:44px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff4fa;
  color:var(--accent-strong);
  font-weight:800;
  cursor:pointer;
}

.sidebar-toggle-label{
  white-space:nowrap;
  font-size:13px;
}

.sidebar-toggle-icon{
  width:20px;
  height:20px;
}

.app-shell.is-sidebar-collapsed .sidebar{
  padding:3px;
}

.app-shell.is-sidebar-collapsed .menu-link{
  grid-template-columns:1fr;
  justify-items:center;
  min-height:44px;
  padding:8px 4px;
  border-radius:7px;
}

.app-shell.is-sidebar-collapsed .sidebar-toggle{
  justify-content:center;
  min-height:44px;
  padding:0;
  border-radius:7px;
}

.app-shell.is-sidebar-collapsed .sidebar-toggle-icon{
  width:18px;
  height:18px;
}

.app-shell.is-sidebar-collapsed .sidebar-toggle-label{
  display:none;
}

.app-shell.is-sidebar-collapsed .menu-copy{
  display:none;
}

.view-frame{
  display:grid;
  grid-template-rows:auto 1fr;
  gap:4px;
}

.view-toolbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:6px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,251,253,.95);
  box-shadow:var(--shadow);
}

.view-title{
  margin:0;
  font-size:clamp(23px, 3.5vw, 36px);
  line-height:1.02;
}

.page--home{
  align-items:start;
}

.home-welcome-card{
  display:grid;
  grid-template-columns:max-content max-content;
  align-items:end;
  gap:10px;
  width:max-content;
  max-width:100%;
  padding:10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(255,253,253,.96);
  box-shadow:var(--shadow);
}

.home-speech-bubble{
  position:relative;
  width:min(230px, calc(100vw - 220px));
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff7fc;
}

.home-speech-bubble::after{
  content:"";
  position:absolute;
  right:-8px;
  top:52px;
  width:14px;
  height:14px;
  border-top:1px solid var(--line);
  border-right:1px solid var(--line);
  background:#fff7fc;
  transform:rotate(45deg);
}

.home-speech-bubble p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.45;
}

.home-character{
  margin:0;
}

.home-character img{
  display:block;
  width:290px;
  max-width:42vw;
  height:auto;
}

.cartoon-gallery-card{
  display:grid;
  gap:20px;
  width:100%;
}

.cartoon-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:16px;
}

.cartoon-gallery--latest{
  grid-template-columns:minmax(220px, 420px);
}

.cartoon-gallery__item{
  min-width:0;
}

.cartoon-gallery__button{
  display:grid;
  gap:10px;
  width:100%;
  height:100%;
  padding:10px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fffdfd;
  color:var(--text);
  box-shadow:0 7px 20px rgba(68, 44, 91, .08);
  cursor:pointer;
  text-align:left;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(232, 63, 148, .16);
}

.cartoon-gallery__button:hover{
  border-color:rgba(232, 63, 148, .48);
  box-shadow:0 10px 24px rgba(68, 44, 91, .13);
  transform:translateY(-2px);
}

.cartoon-gallery__button:focus-visible{
  outline:3px solid rgba(232, 63, 148, .24);
  outline-offset:2px;
}

.cartoon-gallery__image-frame{
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:4 / 3;
  overflow:hidden;
  border:1px solid rgba(215, 140, 178, .34);
  border-radius:10px;
  background:linear-gradient(145deg, #fff8fb, #f7f8ff);
}

.cartoon-gallery__image-frame img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

.cartoon-gallery-empty{
  margin:0;
  padding:18px;
  border:1px dashed var(--line);
  border-radius:12px;
  background:var(--accent-soft);
  color:var(--muted);
  text-align:center;
}

@media (max-width:640px){
  .home-welcome-card{
    grid-template-columns:1fr;
    width:100%;
  }

  .home-speech-bubble{
    width:auto;
  }

  .home-speech-bubble::after{
    display:none;
  }

  .home-character img{
    width:190px;
    max-width:45vw;
  }

  .cartoon-gallery{
    grid-template-columns:1fr;
  }
}

.view-status{
  min-width:84px;
  text-align:center;
  padding:7px 10px;
  border-radius:999px;
  background:var(--accent-soft);
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}

.view-status.is-loading{
  color:var(--accent-strong);
}

.view-status.is-error{
  background:#ffe8eb;
  color:#9a2942;
}

.view-panel{
  min-height:0;
  overflow:auto;
  padding:8px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel);
  box-shadow:var(--shadow);
}

.page{
  display:grid;
  gap:6px;
}

.hero-card,
.card,
.status-card{
  border:1px solid var(--line);
  border-radius:10px;
  background:linear-gradient(180deg, #fffefe 0%, #fff7fb 100%);
  padding:10px;
}

.hero-card{
  display:grid;
  grid-template-columns:minmax(0,1.32fr) minmax(250px,.68fr);
  gap:8px;
}

.hero-card--tight{
  grid-template-columns:minmax(0,1.26fr) minmax(240px,.74fr);
}

.hero-title{
  margin:8px 0 10px;
  font-size:clamp(28px, 4.5vw, 46px);
  line-height:1;
}

.hero-text,
.card p,
.caption,
.list,
.step-list{
  color:var(--muted);
  line-height:1.58;
}

.metric-grid,
.card-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:6px;
}

.card-grid--two{
  grid-template-columns:repeat(2, minmax(0,1fr));
}

.card-grid--fit{
  display:inline-grid;
  grid-template-columns:repeat(2, minmax(320px, max-content));
  width:fit-content;
  max-width:100%;
  align-items:start;
  justify-content:start;
}

.card-grid--fit > .card{
  height:fit-content;
  max-width:100%;
}

.card-grid--compact{
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 340px), 520px));
  justify-content:start;
}

.metric{
  padding:10px;
  border-radius:10px;
  background:#fff;
  border:1px solid var(--line);
}

.metric strong{
  display:block;
  font-size:26px;
  color:var(--accent-strong);
}

.metric span{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:13px;
}

.stack,
.auth-panel,
.profile-panel,
.summary-panel,
.loading-block,
.error-block{
  display:grid;
  gap:6px;
  align-content:start;
}

.stack{
  justify-items:start;
}

.stack--measure > .card,
.stack--measure > .status-card,
.stack--measure > .hero-card{
  width:min(100%, 980px);
}

.card h2,
.hero-card h2,
.status-card h2{
  margin:0 0 6px;
  font-size:21px;
}

.list,
.step-list{
  margin:0;
  padding-left:18px;
}

.status-card{
  background:linear-gradient(180deg, #fffdfd 0%, #fffafd 100%);
}

.status-head,
.profile-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.profile-head__main{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.profile-avatar{
  width:64px;
  height:64px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}

.teacher-preference{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff8fc;
}

.teacher-preference div{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.tag.is-ok{
  background:var(--ok-soft);
  color:var(--ok);
}

.tag.is-warn{
  background:var(--warn-soft);
  color:var(--warn);
}

.tag.is-soft{
  background:var(--surface-soft);
  color:var(--muted);
}

.mini-note,
.helper-note,
.warning-note{
  padding:8px 10px;
  border-radius:10px;
  font-size:14px;
}

.roadmap-alert{
  border:1px solid #f5a3b9;
  border-radius:10px;
  background:linear-gradient(180deg, #fff1f4 0%, #ffe5eb 100%);
  padding:12px;
  color:#8f1d39;
}

.roadmap-alert h2{
  margin:0 0 6px;
  font-size:21px;
}

.roadmap-alert .list{
  color:#8f1d39;
}

.mini-note{
  background:#fff;
  border:1px dashed var(--line-strong);
  color:var(--muted);
}

.helper-note{
  border:1px dashed var(--line-strong);
  background:#fff7fb;
  color:var(--muted);
}

.divider-label{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  width:max-content;
  background:var(--surface-soft);
  color:var(--accent-strong);
  font-size:12px;
  font-weight:800;
}

.warning-note{
  border:1px solid #fecdd3;
  background:#fff1f5;
  color:#9f1239;
}

.success-note{
  padding:8px 10px;
  border:1px solid #bbf7d0;
  border-radius:10px;
  background:#f0fdf4;
  color:#166534;
  font-size:14px;
}

.loading-block,
.error-block{
  padding:12px;
  border-radius:10px;
  border:1px dashed var(--line);
}

.loading-block{
  background:#fff7fb;
}

.error-block{
  background:#fff1f3;
}

.fullscreen-active .topbar{
  border-bottom-color:rgba(255,255,255,.16);
}

.auth-shell-grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr);
  gap:6px;
  align-items:start;
}

.auth-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.auth-tab-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 13px;
  border-radius:9px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  font-size:13px;
  font-weight:800;
  cursor:pointer;
}

.auth-tab-button.is-active{
  background:#fff0f7;
  color:var(--accent-strong);
  border-color:var(--line-strong);
}

.auth-help{
  display:grid;
  gap:8px;
  margin-top:8px;
}

.auth-help-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.auth-help-tab-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 11px;
  border-radius:8px;
  border:1px solid transparent;
  background:transparent;
  color:var(--muted);
  font-size:13px;
  font-weight:800;
  cursor:pointer;
}

.auth-help-tab-button:hover,
.auth-help-tab-button.is-active{
  border-color:var(--line);
  background:#fff;
  color:var(--accent-strong);
}

.auth-help-pane{
  border-top:1px solid rgba(233,161,203,.42);
  padding-top:8px;
}

.panel-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.panel-tab-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 12px;
  border-radius:9px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  font-size:13px;
  font-weight:800;
  cursor:pointer;
}

.panel-tab-button--icon{
  width:44px;
  min-width:44px;
  padding:0;
}

.panel-tab-icon{
  width:19px;
  height:19px;
  display:block;
  pointer-events:none;
}

.panel-tab-button.is-active{
  background:#fff0f7;
  color:var(--accent-strong);
  border-color:var(--line-strong);
}

.panel-tab-pane{
  display:none;
  gap:6px;
}

.panel-tab-pane.is-active{
  display:grid;
}

.auth-pane{
  display:none;
}

.auth-pane.is-active{
  display:grid;
}

.auth-form{
  display:grid;
  gap:6px;
}

.field-grid{
  display:grid;
  gap:6px;
}

.field-grid.two-col{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.field{
  display:grid;
  gap:5px;
}

.field-spacer{
  visibility:hidden;
}

.field label{
  font-size:13px;
  font-weight:800;
  color:var(--text);
}

.field input{
  width:100%;
  height:44px;
  padding:0 13px;
  border-radius:9px;
  border:1px solid #eed4e4;
  background:#fff;
  color:var(--text);
  font-size:15px;
}

.field select,
.field textarea{
  width:100%;
  min-height:44px;
  padding:9px 12px;
  border-radius:9px;
  border:1px solid #eed4e4;
  background:#fff;
  color:var(--text);
  font-size:15px;
  font-family:inherit;
}

.field textarea{
  min-height:120px;
  resize:vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:#f48ac0;
  box-shadow:0 0 0 4px rgba(232,63,148,.10);
}

.field-align-end{
  align-content:end;
}

.auth-actions,
.legacy-links{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}

.compact-filter-grid{
  margin-bottom:4px;
}

.primary-button,
.secondary-button,
.link-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 12px;
  border-radius:9px;
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
  font-size:14px;
  font-weight:800;
}

.primary-button{
  background:linear-gradient(180deg, #ff8a6c, var(--accent-warm));
  color:#fff;
  box-shadow:0 8px 16px rgba(255,122,89,.18);
}

.secondary-button{
  background:#fff1f8;
  color:var(--accent-strong);
  border-color:var(--line-strong);
}

.danger-button{
  background:#fff1f3;
  color:#9f1239;
  border-color:#f3a0b3;
}

.link-button{
  background:#fff;
  color:var(--accent-strong);
  border-color:var(--line);
}

.form-feedback{
  display:grid;
  gap:4px;
  padding:9px 11px;
  border-radius:9px;
  border:1px solid #f2d6e5;
  background:#fffafc;
  color:var(--muted);
  font-size:14px;
}

.form-feedback[hidden]{
  display:none;
}

.form-feedback.is-error{
  background:#fff1f2;
  border-color:#fecdd3;
  color:#9f1239;
}

.form-feedback.is-ok{
  background:#f0fdf4;
  border-color:#bbf7d0;
  color:#166534;
}

.quick-metrics{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:4px;
}

.quick-metrics--fit{
  display:inline-grid;
  grid-template-columns:repeat(2, minmax(180px, max-content));
  width:fit-content;
  max-width:100%;
  justify-content:start;
}

.quick-metric{
  padding:10px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#fff;
}

.quick-metric strong{
  display:block;
  font-size:25px;
  color:var(--accent-strong);
  overflow-wrap:anywhere;
}

.quick-metric span{
  display:block;
  margin-top:4px;
  font-size:13px;
  color:var(--muted);
}

.school-list{
  display:grid;
  gap:6px;
}

.school-item{
  display:grid;
  gap:4px;
  padding:8px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
}

.school-item-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.school-item-meta{
  color:var(--muted);
  font-size:13px;
  line-height:1.4;
}

.school-inline-form{
  margin-top:2px;
}

.request-list,
.relation-list{
  display:grid;
  gap:6px;
}

.message-table-shell{
  display:inline-block;
  width:max-content;
  max-width:100%;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:auto;
}

.message-table{
  width:max-content;
  min-width:min(720px, 100%);
  border-collapse:collapse;
}

.message-table th,
.message-table td{
  padding:8px 10px;
  border-bottom:1px solid #f4d7e7;
  text-align:left;
  vertical-align:middle;
  white-space:nowrap;
}

.message-table th{
  background:#fff6fb;
  color:var(--accent-strong);
  font-size:12px;
  font-weight:800;
}

.message-table tr:last-child td{
  border-bottom:0;
}

.message-title{
  display:inline-block;
  max-width:280px;
  overflow:hidden;
  text-overflow:ellipsis;
  vertical-align:middle;
}

.message-row-actions{
  display:inline-flex;
  align-items:center;
  gap:5px;
}

.message-row-actions .auth-form{
  display:inline-flex;
}

.message-read-button{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:44px;
  width:44px;
  min-width:44px;
  padding:0;
}

.message-read-button .button-icon{
  width:16px;
  height:16px;
}

button:disabled,
button[disabled]{
  opacity:.42;
  cursor:not-allowed;
  box-shadow:none;
}

.request-item,
.relation-item{
  display:grid;
  gap:4px;
  padding:8px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
}

.request-item-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.request-item-meta,
.relation-meta{
  color:var(--muted);
  font-size:13px;
  line-height:1.4;
}

.request-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

.request-actions .school-inline-form{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.request-delete-form{
  margin-left:auto;
}

.request-school-title{
  margin-top:-2px;
  color:var(--muted);
  font-size:14px;
  font-weight:700;
}

.profile-name{
  margin:0;
  font-size:28px;
  line-height:1.04;
}

.profile-meta{
  color:var(--muted);
  font-size:14px;
}

.inline-icon{
  width:18px;
  height:18px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.table-panel{
  width:fit-content;
  max-width:100%;
  gap:8px;
  justify-items:start;
}

.table-panel > .table-toolbar,
.table-panel > .helper-note,
.table-panel > .table-shell,
.table-panel > .table-pagination,
.table-panel > p.caption{
  width:fit-content;
  max-width:100%;
}

.table-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:end;
  justify-content:space-between;
  gap:8px;
}

.table-toolbar__group{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:end;
}

.table-toolbar .field{
  min-width:160px;
}

.table-toolbar .field--tight{
  min-width:132px;
}

.table-shell{
  display:inline-block;
  width:max-content;
  max-width:100%;
  max-height:min(68vh, 780px);
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:auto;
}

.data-table{
  width:max-content;
  border-collapse:collapse;
  min-width:760px;
}

.data-table th,
.data-table td{
  padding:8px 10px;
  border-bottom:1px solid #f4d7e7;
  text-align:left;
  vertical-align:top;
}

.data-table thead th{
  position:sticky;
  top:0;
  z-index:1;
  background:#fff6fb;
  font-size:12px;
  font-weight:800;
  color:var(--accent-strong);
  letter-spacing:.02em;
}

.table-sort-button{
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:100%;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  font-weight:800;
  text-align:left;
  cursor:pointer;
}

.table-sort-button:focus-visible{
  outline:2px solid rgba(232,63,148,.24);
  outline-offset:2px;
  border-radius:7px;
}

.table-sort-indicator{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:14px;
  min-width:14px;
  color:var(--muted);
}

.table-sort-indicator::before{
  content:"↕";
  line-height:1;
}

.table-sort-button[data-sort-direction="asc"] .table-sort-indicator::before{
  content:"↑";
  color:var(--accent-strong);
}

.table-sort-button[data-sort-direction="desc"] .table-sort-indicator::before{
  content:"↓";
  color:var(--accent-strong);
}

.data-table tbody tr:hover{
  background:#fff8fc;
}

.data-table tbody tr:last-child td{
  border-bottom:0;
}

.data-table .table-col-actions{
  position:sticky;
  left:0;
  z-index:2;
  width:62px;
  min-width:62px;
  text-align:left;
  background:#fffdfd;
}

.data-table thead .table-col-actions{
  z-index:3;
  background:#fff6fb;
}

.data-cell-title{
  font-size:15px;
  font-weight:800;
  color:var(--text);
  white-space:nowrap;
}

.data-cell-meta{
  margin-top:2px;
  color:var(--muted);
  font-size:13px;
  line-height:1.35;
}

.data-cell-stack{
  display:grid;
  gap:3px;
}

.pixel-avatar-box{
  display:flex;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
}

.pixel-avatar-box__preview{
  display:grid;
  place-items:center;
  width:78px;
  height:78px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  flex:0 0 auto;
}

.pixel-avatar-box__image{
  width:64px;
  height:64px;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}

.pixel-avatar-box__placeholder{
  color:var(--muted);
  font-size:13px;
  font-weight:700;
}

.pixel-avatar-box__meta{
  display:grid;
  gap:6px;
  min-width:0;
}

.pixel-avatar-manager{
  display:grid;
  gap:10px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--line);
}

.pixel-avatar-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.pixel-avatar-form{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.pixel-avatar-form select{
  min-width:180px;
  max-width:min(100%, 320px);
}

.pixel-avatar-clear-form{
  display:inline-flex;
}

.pixel-art-table select{
  min-width:170px;
  width:100%;
}

.pixel-inline-form{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:8px;
  align-items:center;
}

.pixel-art-cell{
  display:flex;
  align-items:center;
  gap:10px;
}

.pixel-art-thumb{
  width:40px;
  height:40px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  flex:0 0 auto;
}

.pixel-usage-table .tag{
  width:max-content;
}

.friend-list-user{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.friend-list-avatar,
.social-chat-thread-avatar{
  display:block;
  border:1px solid var(--line);
  background:#fff;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  flex:0 0 auto;
}

.friend-list-avatar{
  width:34px;
  height:34px;
  border-radius:6px;
}

.friend-list-avatar--empty,
.social-chat-thread-avatar--empty{
  border-color:transparent;
  background:transparent;
}

.table-action-row{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:nowrap;
}

.table-action-row .auth-form{
  display:inline-flex;
}

.page--social .data-table .table-col-actions{
  width:128px;
  min-width:128px;
}

.social-chat-panel{
  width:min(100%, 1000px);
  max-height:calc(var(--bdk-visual-viewport-height, 100vh) - 210px);
  min-height:0;
}

.social-chat-shell{
  display:grid;
  grid-template-columns:260px minmax(0, 700px);
  gap:8px;
  width:fit-content;
  max-width:100%;
  height:clamp(360px, calc(var(--bdk-visual-viewport-height, 100vh) - 330px), 680px);
  max-height:calc(var(--bdk-visual-viewport-height, 100vh) - 330px);
  align-items:stretch;
}

.social-chat-sidebar,
.social-chat-main{
  min-height:0;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
}

.social-chat-sidebar{
  display:grid;
  grid-template-rows:auto 1fr;
  width:260px;
  max-width:100%;
}

.social-chat-sidebar-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:40px;
  padding:8px 10px;
  border-bottom:1px solid #f4d7e7;
  font-size:14px;
  font-weight:800;
}

.social-chat-thread-unread-summary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  min-height:24px;
  padding:0 7px;
  border-radius:999px;
  background:var(--accent-soft);
  color:var(--accent-strong);
  font-size:12px;
  font-weight:800;
}

.social-chat-thread-list{
  display:grid;
  align-content:start;
  grid-auto-rows:max-content;
  gap:4px;
  padding:6px;
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:auto;
}

.social-chat-thread{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:0;
  padding:8px 10px;
  border:1px solid transparent;
  border-radius:9px;
  background:#fff8fc;
  color:var(--text);
  text-align:left;
  cursor:pointer;
}

.social-chat-thread-avatar{
  width:30px;
  height:30px;
  border-radius:6px;
}

.social-chat-thread:hover,
.social-chat-thread.is-active{
  border-color:var(--line-strong);
  background:#fff2f8;
}

.social-chat-thread.is-unread{
  animation:socialPulse 1.6s ease-in-out infinite;
}

.social-chat-thread-copy{
  display:grid;
  gap:2px;
  min-width:0;
  flex:1 1 auto;
}

.social-chat-thread-copy strong,
.social-chat-thread-copy span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.social-chat-thread-copy strong{
  font-size:14px;
}

.social-chat-thread-copy span{
  color:var(--muted);
  font-size:12px;
}

.social-chat-thread-unread{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  min-height:24px;
  padding:0 7px;
  border-radius:999px;
  background:var(--accent-soft);
  color:var(--accent-strong);
  font-size:12px;
  font-weight:800;
}

.social-chat-main{
  display:grid;
  grid-template-rows:auto 1fr auto;
  width:min(100%, 700px);
  min-width:0;
}

.social-chat-main-head{
  display:grid;
  gap:4px;
  padding:10px;
  border-bottom:1px solid #f4d7e7;
}

.social-chat-main-head-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}

.social-chat-main-copy{
  display:grid;
  gap:3px;
}

.social-chat-main-copy h3{
  margin:0;
  font-size:18px;
}

.social-chat-main-copy p{
  margin:0;
  color:var(--muted);
  font-size:13px;
}

.social-chat-members{
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}

.social-chat-messages{
  display:grid;
  align-content:start;
  gap:6px;
  min-height:0;
  padding:10px;
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:auto;
}

.social-chat-message{
  display:grid;
  gap:4px;
  width:min(100%, 520px);
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff8fc;
}

.social-chat-message.is-mine{
  justify-self:end;
  background:#fff1f8;
}

.social-chat-message__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:12px;
}

.social-chat-message__body{
  white-space:pre-wrap;
  word-break:break-word;
  line-height:1.45;
}

.social-chat-compose{
  display:grid;
  gap:8px;
  min-height:0;
  padding:10px;
  border-top:1px solid #f4d7e7;
}

.social-chat-compose textarea{
  min-height:88px;
  max-height:180px;
}

.social-chat-compose-actions{
  justify-content:space-between;
}

.social-chat-emoji-picker{
  display:grid;
  gap:8px;
  width:100%;
  min-width:0;
  max-height:176px;
  padding:8px;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff8fc;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

.social-chat-emoji-picker__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.social-chat-emoji-picker__head strong{
  font-size:14px;
}

.social-chat-emoji-picker .emoji-picker__grid{
  grid-template-columns:repeat(auto-fit, minmax(44px, 1fr));
  justify-content:stretch;
}

.social-chat-empty{
  margin:0;
  color:var(--muted);
  font-size:14px;
}

.game-request-panel{
  width:min(100%, 760px);
}

.game-request-friend-source{
  display:none;
}

.game-request-list{
  display:grid;
  gap:8px;
}

.game-request-list-head{
  display:grid;
  grid-template-columns:64px minmax(120px, 1fr) auto 36px;
  align-items:center;
  gap:10px;
  padding:0 8px;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}

.game-request-row{
  display:grid;
  grid-template-columns:64px minmax(120px, 1fr) auto 36px;
  align-items:center;
  gap:10px;
  padding:8px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fffefe;
}

.game-request-row__visual{
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:8px;
  background:#f7fbfd;
}

.game-request-row__visual--territory{
  grid-template-columns:repeat(4, 1fr);
  grid-template-rows:repeat(4, 1fr);
  gap:2px;
  padding:7px;
  background:#17212c;
}

.game-request-row__visual--territory span{
  display:block;
  width:100%;
  height:100%;
  border-radius:3px;
  background:#e8edf2;
}

.game-request-row__visual--territory span:nth-child(2n){
  background:#aeb8c3;
}

.game-request-row__visual--territory span:nth-child(1),
.game-request-row__visual--territory span:nth-child(2){
  background:#d84343;
}

.game-request-row__visual--territory span:nth-child(4),
.game-request-row__visual--territory span:nth-child(8){
  background:#246bca;
}

.game-request-row__visual--territory span:nth-child(13),
.game-request-row__visual--territory span:nth-child(14){
  background:#248f64;
}

.game-request-row__visual--territory span:nth-child(12),
.game-request-row__visual--territory span:nth-child(16){
  background:#c78a1d;
}

.game-request-row__visual--gorillas{
  background:linear-gradient(180deg, #fff4db 0%, #e9f8ef 100%);
}

.game-request-row__visual--gorillas img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

.game-request-row__visual--uc-tas{
  background:linear-gradient(145deg, #f8e8c9 0%, #edf4ff 100%);
}

.game-request-row__visual--uc-tas img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.game-request-row__title{
  min-width:0;
  font-size:15px;
}

.game-request-row__players{
  color:var(--muted);
  font-size:13px;
  white-space:nowrap;
}

.game-request-options{
  display:grid;
  gap:12px;
}

.game-request-option-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(130px, 1fr));
  gap:8px;
}

.game-request-option-block{
  display:grid;
  gap:6px;
}

.game-request-option-label{
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}

.game-request-count-row,
.game-request-counts{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.game-request-count-btn{
  min-width:44px;
  min-height:44px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  color:var(--text);
  font-weight:800;
  cursor:pointer;
}

.game-request-count-btn.is-selected{
  border-color:var(--accent);
  background:#fff0f7;
  color:var(--accent-strong);
}

.game-request-count-btn:disabled{
  opacity:.42;
  cursor:not-allowed;
}

.game-request-friend-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
}

.game-request-friend-grid.has-team-labels::before,
.game-request-friend-grid.has-team-labels::after{
  color:var(--accent-strong);
  font-size:12px;
  font-weight:900;
}

.game-request-friend-grid.has-team-labels::before{
  content:"Takım 1";
}

.game-request-friend-grid.has-team-labels::after{
  content:"Takım 2";
  text-align:right;
}

.game-request-friend-grid .field{
  min-width:0;
}

@media (max-width:640px){
  .game-request-list-head,
  .game-request-row{
    grid-template-columns:64px minmax(0, 1fr) 36px;
  }

  .game-request-list-head span:nth-child(3){
    grid-column:2 / 3;
  }

  .game-request-row__players{
    grid-column:2 / 3;
  }

  .game-request-friend-grid{
    grid-template-columns:1fr;
  }
}

.game-hub-card{
  width:min(100%, 1220px);
  scroll-margin-top:64px;
}

.game-hub-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 240px));
  gap:8px;
  width:100%;
  max-width:100%;
  justify-content:start;
  align-content:start;
}

.game-card{
  display:grid;
  grid-template-rows:auto 1fr;
  gap:6px;
  width:240px;
  min-height:300px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fffefe;
  color:var(--text);
  text-decoration:none;
  cursor:pointer;
  box-shadow:0 5px 14px rgba(71,34,61,.04);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.game-card:hover,
.game-card:focus-visible{
  transform:translateY(-5px);
  border-color:#e5a3c2;
  box-shadow:0 16px 30px rgba(83,31,67,.16);
}

.game-card:focus-visible{
  outline:3px solid rgba(192,38,124,.25);
  outline-offset:3px;
}

.game-card__visual{
  width:100%;
  height:128px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:10px;
  background:linear-gradient(180deg, #ffe8f4 0%, #fff8fc 100%);
}

.game-card__visual img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

.game-card__visual--uc-tas{
  background:linear-gradient(145deg, #f8e8c9 0%, #edf4ff 100%);
}

.game-card__visual--uc-tas img{
  object-fit:cover;
}

.game-card__visual--kristal{
  background:
    linear-gradient(rgba(125,211,252,.09) 1px,transparent 1px) 0 0/20px 20px,
    linear-gradient(90deg,rgba(125,211,252,.09) 1px,transparent 1px) 0 0/20px 20px,
    linear-gradient(145deg,#0b3348,#071827);
}

.game-card__kristal-field{
  position:relative;
  width:178px;
  height:96px;
  overflow:hidden;
  border:1px solid rgba(125,211,252,.2);
  border-radius:16px;
  background:linear-gradient(90deg,rgba(37,99,235,.17),transparent 42%,transparent 58%,rgba(249,115,22,.16));
  box-shadow:0 13px 25px rgba(3,18,31,.27);
}

.game-card__kristal-field::before,
.game-card__kristal-field::after{
  content:"";
  position:absolute;
  top:50%;
  width:52px;
  height:1px;
  border-top:2px dashed rgba(186,230,253,.22);
}

.game-card__kristal-field::before{left:25px;transform:rotate(-22deg)}
.game-card__kristal-field::after{right:25px;transform:rotate(22deg)}

.game-card__kristal-base{
  position:absolute;
  top:35px;
  width:31px;
  height:31px;
  border:4px solid #60a5fa;
  border-radius:10px;
  background:#102f40;
  transform:rotate(45deg);
}

.game-card__kristal-base::after{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:4px;
  background:#7dd3fc;
}

.game-card__kristal-base.is-blue{left:11px}
.game-card__kristal-base.is-orange{right:11px;border-color:#fb923c}
.game-card__kristal-base.is-orange::after{background:#fdba74}

.game-card__kristal-node{
  position:absolute;
  width:12px;
  height:17px;
  border:2px solid #ecfeff;
  background:#22d3ee;
  transform:rotate(45deg);
  box-shadow:0 0 12px rgba(34,211,238,.7);
}

.game-card__kristal-node.node-one{left:75px;top:14px}
.game-card__kristal-node.node-two{left:84px;top:40px}
.game-card__kristal-node.node-three{left:94px;top:68px}

.game-card__kristal-unit{
  position:absolute;
  width:10px;
  height:10px;
  border:2px solid #bfdbfe;
  border-radius:50%;
  background:#2563eb;
  box-shadow:0 0 0 2px rgba(37,99,235,.22);
}

.game-card__kristal-unit.is-orange{border-color:#fed7aa;background:#ea580c;box-shadow:0 0 0 2px rgba(234,88,12,.2)}
.game-card__kristal-unit.unit-one{left:48px;top:31px}
.game-card__kristal-unit.unit-two{left:56px;top:56px}
.game-card__kristal-unit.unit-three{left:69px;top:72px}
.game-card__kristal-unit.unit-four{right:49px;top:30px}
.game-card__kristal-unit.unit-five{right:59px;top:59px}

.game-card__visual--cover img{
  object-fit:cover;
}

.game-card__visual--character{
  align-items:flex-end;
  justify-content:flex-start;
  padding:0 10px;
  background:linear-gradient(180deg, #e8f5ff 0%, #fef7fb 100%);
}

.game-card__sprite{
  width:100%;
  height:100%;
  background-repeat:no-repeat;
  background-size:auto 92%;
  background-position:left bottom;
}

.game-card__sprite--bilim{
  background-image:url("../../games/fen_bilgisi_0001/assets/y.png");
}

.game-card__visual--territory{
  background:linear-gradient(180deg, #eef4f8 0%, #fff8fc 100%);
}

.game-card__territory-board{
  display:grid;
  grid-template-columns:repeat(4, 24px);
  grid-template-rows:repeat(4, 24px);
  gap:3px;
  padding:10px;
  border:1px solid #d8dde5;
  border-radius:8px;
  background:#17212c;
  box-shadow:0 12px 24px rgba(31,38,46,.12);
}

.game-card__territory-board span{
  display:block;
  border-radius:4px;
  background:#e8edf2;
}

.game-card__territory-board span:nth-child(2n){
  background:#aeb8c3;
}

.game-card__territory-board span:nth-child(1),
.game-card__territory-board span:nth-child(2){
  background:#d84343;
}

.game-card__territory-board span:nth-child(4),
.game-card__territory-board span:nth-child(8){
  background:#246bca;
}

.game-card__territory-board span:nth-child(13),
.game-card__territory-board span:nth-child(14){
  background:#248f64;
}

.game-card__territory-board span:nth-child(12),
.game-card__territory-board span:nth-child(16){
  background:#c78a1d;
}

.game-card__visual--dijican{
  position:relative;
  background:
    linear-gradient(rgba(255,255,255,.28) 1px,transparent 1px) 0 0/18px 18px,
    linear-gradient(90deg,rgba(255,255,255,.28) 1px,transparent 1px) 0 0/18px 18px,
    linear-gradient(145deg,#d9ebe4 0%,#f7ead0 100%);
}

.game-card__visual--dijican::after{
  content:"";
  position:absolute;
  left:25px;
  right:25px;
  bottom:11px;
  height:10px;
  border-radius:999px;
  background:rgba(79,58,30,.2);
}

.game-card__dijican-toy{
  position:relative;
  z-index:1;
  width:88px;
  height:106px;
  padding:21px 14px 16px;
  border:4px solid #bd7118;
  border-radius:49% 49% 45% 45% / 40% 40% 56% 56%;
  background:
    radial-gradient(circle at 20% 28%,#fff 0 3px,transparent 4px),
    linear-gradient(135deg,#ffd963,#f5ac27 65%,#d8891e);
  box-shadow:inset 5px 4px 0 rgba(255,255,255,.22),0 8px 12px rgba(89,57,20,.24);
}

.game-card__dijican-toy::before{
  content:"";
  position:absolute;
  top:-17px;
  left:50%;
  width:25px;
  height:25px;
  transform:translateX(-50%);
  border:5px solid #bd7118;
  border-radius:50%;
}

.game-card__dijican-screen{
  position:relative;
  width:60px;
  height:55px;
  border:4px solid #6d5736;
  border-radius:9px;
  background:#b8c68c;
  box-shadow:inset 0 0 0 2px rgba(41,53,44,.18);
}

.game-card__dijican-pet{
  position:absolute;
  left:50%;
  bottom:8px;
  width:26px;
  height:22px;
  transform:translateX(-50%);
  background:#29352c;
  box-shadow:-5px -5px 0 -2px #29352c,5px -5px 0 -2px #29352c,-7px 7px 0 -3px #29352c,7px 7px 0 -3px #29352c;
}

.game-card__dijican-pet::before,
.game-card__dijican-pet::after{
  content:"";
  position:absolute;
  top:7px;
  width:3px;
  height:3px;
  background:#b8c68c;
}

.game-card__dijican-pet::before{left:6px}
.game-card__dijican-pet::after{right:6px}

.game-card__dijican-buttons{
  display:flex;
  justify-content:center;
  gap:6px;
  margin-top:7px;
}

.game-card__dijican-buttons i{
  display:block;
  width:11px;
  height:8px;
  border:2px solid #8d2926;
  border-radius:50%;
  background:#d94a42;
  box-shadow:0 2px 0 #75211f;
}

.game-card__dijican-buttons i:nth-child(2){transform:translateY(3px)}

.game-card__body{
  display:grid;
  gap:6px;
}

.game-card__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}

.game-card__head h2,
.hub-stage-panel__head h2{
  margin:0;
  font-size:18px;
}

.game-card p{
  margin:0;
}

.game-card__actions{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
}

.game-card__friend-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  min-height:18px;
  padding:0 6px;
  border-radius:999px;
  background:#fff1f8;
  color:var(--accent-strong);
  font-size:11px;
  font-weight:800;
}

.app-hub-card{
  width:min(100%, 1220px);
  scroll-margin-top:64px;
}

.app-hub-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 240px));
  gap:8px;
  width:100%;
  justify-content:start;
  align-content:start;
}

.app-card{
  display:grid;
  grid-template-rows:auto 1fr;
  gap:6px;
  width:240px;
  min-height:300px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fffefe;
  color:var(--text);
  text-decoration:none;
  cursor:pointer;
  box-shadow:0 5px 14px rgba(71,34,61,.04);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.app-card:hover,
.app-card:focus-visible{
  transform:translateY(-5px);
  border-color:#e5a3c2;
  box-shadow:0 16px 30px rgba(83,31,67,.16);
}

.app-card:focus-visible{
  outline:3px solid rgba(192,38,124,.25);
  outline-offset:3px;
}

.app-card__visual{
  width:100%;
  height:128px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:10px;
  background:linear-gradient(180deg, #ffe8f4 0%, #fff8fc 100%);
}

.app-card__visual--electric{
  background:linear-gradient(180deg,#ffe7f2 0%,#fff8fc 100%);
}

.app-card__electric-icon{
  width:148px;
  height:74px;
}

.app-card__visual--formula{
  background:linear-gradient(180deg,#f3e8ff 0%,#fff8fc 100%);
}

.app-card__formula-icon{
  width:180px;
  height:108px;
}

.app-card__formula-grid rect,
.app-card__formula-grid path{
  fill:#fce7f3;
  stroke:#c0267c;
  stroke-width:2;
}

.app-card__formula-grid path{
  fill:none;
  stroke-width:1.5;
}

.app-card__formula-cube path{
  fill:#ddd6fe;
  stroke:#6d28d9;
  stroke-width:2;
  stroke-linejoin:round;
}

.app-card__formula-cube path:nth-child(2){
  fill:#c4b5fd;
}

.app-card__formula-cube path:nth-child(3){
  fill:#ede9fe;
}

.app-card__formula-arrow{
  fill:none;
  stroke:#30223d;
  stroke-width:2;
  stroke-linecap:round;
}

.app-card__visual--timer{
  background:linear-gradient(180deg,#ffe0ef 0%,#fff8fc 100%);
}

.app-card__visual--pixel{
  background:linear-gradient(180deg,#ffe7f2 0%,#fff8fc 100%);
}

.app-card__pixel{
  display:grid;
  grid-template-columns:repeat(4, 18px);
  gap:6px;
  padding:10px;
  border-radius:10px;
  background:#fff;
  box-shadow:0 10px 24px rgba(131,24,67,.08);
}

.app-card__pixel span{
  width:18px;
  height:18px;
  border-radius:4px;
  background:#f8bfd8;
}

.app-card__pixel span:nth-child(2),
.app-card__pixel span:nth-child(5),
.app-card__pixel span:nth-child(7),
.app-card__pixel span:nth-child(10),
.app-card__pixel span:nth-child(12),
.app-card__pixel span:nth-child(15){
  background:#c0267c;
}

.app-card__pixel span:nth-child(4),
.app-card__pixel span:nth-child(8),
.app-card__pixel span:nth-child(13){
  background:#30223d;
}

.app-card__clock{
  display:flex;
  align-items:center;
  justify-content:center;
  width:98px;
  height:98px;
  border-radius:999px;
  background:#fffefe;
  border:6px solid #f472b6;
  color:#831843;
  font-size:28px;
  font-weight:800;
  box-shadow:0 12px 24px rgba(131,24,67,.08);
}

.app-card__body{
  display:grid;
  gap:6px;
}

.app-card__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}

.app-card__head h2{
  margin:0;
  font-size:18px;
}

.app-card p{
  margin:0;
}

@media (prefers-reduced-motion:reduce){
  .game-card,
  .app-card{
    transition:none;
  }

  .game-card:hover,
  .game-card:focus-visible,
  .app-card:hover,
  .app-card:focus-visible{
    transform:none;
  }
}

.tool-stage-panel{
  display:grid;
  gap:6px;
  width:min(100%, 980px);
  margin-top:8px;
}

.tool-stage-body{
  width:min(100%, 980px);
  min-height:520px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fffefe;
}

.tool-stage-body--compact{
  width:auto !important;
  min-height:0 !important;
  padding:6px;
  display:inline-grid;
}

.tool-stage-body--frame{
  padding:0;
}

.tool-stage-frame{
  display:block;
  width:100%;
  height:min(70vh, 680px);
  min-height:440px;
  border:0;
  border-radius:10px;
  background:#fffefe;
}

.tool-panel{
  display:grid;
  gap:10px;
  width:min(100%, 720px);
}

.tool-panel--timer{
  width:min(100%, 320px);
  gap:8px;
}

.tool-panel__meta{
  display:grid;
  gap:2px;
}

.tool-panel__meta strong{
  font-size:18px;
}

.tool-panel__meta span{
  color:var(--muted);
  font-size:13px;
}

.tool-panel__actions{
  justify-content:flex-start;
}

.tool-timer__display{
  display:flex;
  align-items:center;
  justify-content:center;
  width:min(100%, 168px);
  min-height:72px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff5fa;
  color:var(--accent-strong);
  font-size:26px;
  font-weight:800;
}

.tool-timer__slider{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 34px;
  align-items:center;
  gap:8px;
}

.tool-timer__range{
  width:100%;
  margin:0;
  accent-color:#c0267c;
}

.tool-timer__minutes{
  font-size:14px;
  font-weight:700;
  color:var(--muted);
}

.tool-timer__presets{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.topbar-timer-shortcut{
  min-width:72px;
  justify-content:center;
  font-weight:800;
  color:var(--accent-strong);
}

.topbar-timer-shortcut.is-finished{
  color:#ffffff;
  background:#ff6b6b;
  border-color:#3b82f6;
  animation:timerAlertBlink 1s ease-in-out infinite;
}

.lesson-grade-grid{
  grid-template-columns:repeat(auto-fit, minmax(220px, 240px));
  justify-content:start;
}

.lesson-card-grid{
  grid-template-columns:repeat(auto-fit, minmax(220px, 240px));
  justify-content:start;
}

.lesson-catalog-groups{
  display:grid;
  gap:18px;
}

.lesson-catalog-group{
  display:grid;
  gap:10px;
}

.lesson-catalog-group__head h3,
.lesson-catalog-group__head p{
  margin:0;
}

.lesson-catalog-group__head p{
  margin-top:3px;
  color:var(--muted);
  font-size:13px;
}

.lesson-grade-card,
.lesson-card{
  display:grid;
  grid-template-rows:auto 1fr;
  align-content:start;
  gap:10px;
  width:240px;
  min-height:150px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  color:inherit;
  text-decoration:none;
}

.lesson-shell{
  display:grid;
  gap:10px;
  width:min(100%, 920px);
}

.lesson-feedback{
  display:grid;
  gap:12px;
  margin-top:8px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fffafd;
}

.lesson-feedback__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.lesson-feedback__head h3,
.lesson-feedback__head p{
  margin:0;
}

.lesson-feedback__head p{
  margin-top:5px;
  color:var(--muted);
}

.lesson-feedback-form{
  display:grid;
  gap:10px;
}

.lesson-feedback-form textarea{
  min-height:120px;
  resize:vertical;
}

.lesson-feedback-form__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}

.lesson-feedback-form__actions > span{
  color:var(--muted);
  font-size:13px;
}

.lesson-feedback-toolbar{
  margin:8px 0 12px;
}

.lesson-feedback-detail{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
  margin:0;
}

.lesson-feedback-detail > div{
  display:grid;
  gap:3px;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fffafd;
}

.lesson-feedback-detail dt{
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}

.lesson-feedback-detail dd{
  margin:0;
  font-weight:800;
}

.lesson-feedback-message,
.lesson-feedback-responses{
  display:grid;
  gap:7px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
}

.lesson-feedback-message p,
.lesson-feedback-responses p{
  margin:0;
}

.lesson-feedback-responses article{
  display:grid;
  gap:4px;
  padding:8px;
  border-radius:8px;
  background:#fff8fc;
}

.lesson-feedback-responses article span{
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}

.lesson-feedback-review-form{
  display:grid;
  gap:10px;
  padding-top:4px;
}

.lesson-feedback-page-link{
  width:max-content;
  max-width:100%;
}

.message-thread-tree{
  border:1px solid var(--line);
  border-radius:10px;
  background:#fffafd;
  overflow:hidden;
}

.message-thread-tree > summary{
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  color:var(--ink);
  font-weight:900;
  cursor:pointer;
  touch-action:manipulation;
}

.message-thread-tree > summary span{
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}

.message-thread-tree[open] > summary{
  border-bottom:1px solid var(--line);
}

.message-thread-tree__list{
  display:grid;
  gap:8px;
  margin:0;
  padding:10px;
  list-style:none;
}

.message-thread-tree__list > li{
  position:relative;
  margin-inline-start:calc(var(--message-thread-depth, 0) * 18px);
}

.message-thread-tree__list > li::before{
  content:"";
  position:absolute;
  inset-inline-start:-10px;
  top:0;
  bottom:0;
  width:3px;
  border-radius:3px;
  background:var(--line);
}

.message-thread-tree__node{
  display:grid;
  gap:5px;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
}

.message-thread-tree__meta{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:6px 12px;
  color:var(--muted);
  font-size:12px;
}

.message-thread-tree__meta strong{
  color:var(--ink);
}

.message-thread-tree__node p{
  margin:0;
}

.message-thread-reply-form{
  margin-top:2px;
  padding-top:10px;
  border-top:1px solid var(--line);
}

@media (max-width:760px){
  .lesson-feedback-detail{
    grid-template-columns:1fr;
  }
}

.lesson-grade-card.is-disabled,
.lesson-card.is-disabled{
  opacity:.72;
}

.lesson-grade-card__head,
.lesson-card__head,
.lesson-shell__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}

.lesson-grade-card__head h2,
.lesson-grade-card__head h3,
.lesson-card__head h3,
.lesson-shell__head h2{
  margin:0;
}

.lesson-grade-card p,
.lesson-card p,
.lesson-shell__head p{
  margin:0;
}

.lesson-grade-card__stats{
  display:grid;
  grid-template-columns:1fr;
  align-content:start;
  grid-auto-rows:minmax(44px, auto);
  gap:6px;
  margin:0;
}

.lesson-grade-card__stats div,
.lesson-examples div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:6px 8px;
  border:1px solid #f2c6dc;
  border-radius:10px;
  background:#fff8fc;
}

.lesson-grade-card__stats dt,
.lesson-examples dt{
  margin:0;
  font-size:12px;
  color:var(--muted);
  font-weight:700;
}

.lesson-grade-card__stats dd,
.lesson-examples dd{
  margin:0;
  font-size:16px;
  font-weight:800;
  text-align:right;
}

.lesson-card__meta,
.lesson-breadcrumbs{
  font-size:13px;
  color:var(--muted);
}

.lesson-breadcrumbs{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:0;
  min-width:0;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scrollbar-width:thin;
  white-space:nowrap;
  -webkit-overflow-scrolling:touch;
}

.lesson-breadcrumbs__item{
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
}

.lesson-breadcrumbs__separator{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  min-height:44px;
  color:var(--muted);
  line-height:1;
}

.lesson-breadcrumbs a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 4px;
  color:#a21d67;
  text-decoration:none;
}

.lesson-shell .lesson-shell__head.lesson-shell__head--topic{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  align-items:stretch;
  gap:4px;
}

.lesson-shell__topic-top{
  display:grid;
  grid-template-columns:max-content minmax(0, 1fr);
  align-items:flex-start;
  gap:16px;
  width:100%;
  min-width:0;
}

.lesson-shell__topic-top h2{
  margin:0;
  max-width:min(100%, 620px);
  justify-self:end;
  text-align:right;
}

.lesson-shell__head--topic .lesson-breadcrumbs{
  width:100%;
  min-height:44px;
  justify-content:flex-start;
}

.lesson-shell__summary{
  margin:0;
}

.lesson-topic{
  display:grid;
  gap:8px;
  width:100%;
}

.lesson-helper-notes-shell{
  display:grid;
  justify-items:stretch;
  gap:8px;
}

.lesson-helper-notes-toggle{
  justify-self:end;
}

.lesson-helper-notes{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap:8px;
  width:100%;
}

.lesson-helper-notes.is-hidden{
  display:none;
}

.lesson-helper-note{
  display:grid;
  grid-template-columns:64px minmax(0, 1fr);
  align-items:center;
  gap:10px;
  padding:10px;
  border:1px solid #f2c6dc;
  border-radius:10px;
  background:#fff;
}

.lesson-helper-note__avatar{
  display:block;
  width:64px;
  height:64px;
  object-fit:contain;
}

.lesson-helper-note p{
  margin:0;
  color:var(--text);
  font-size:14px;
  font-weight:700;
  line-height:1.45;
}

.bdk2-teacher-band{
  position:fixed;
  inset:0;
  z-index:9400;
  pointer-events:none;
}

.bdk2-teacher-widget{
  position:fixed;
  right:2px;
  bottom:2px;
  width:360px;
  height:226px;
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
  touch-action:none;
}

.bdk2-teacher-hit{
  position:absolute;
  right:0;
  bottom:0;
  width:170px;
  height:170px;
  z-index:3;
  pointer-events:auto;
  cursor:grab;
  touch-action:none;
}

.bdk2-teacher-widget.is-dragging .bdk2-teacher-hit{
  cursor:grabbing;
}

.bdk2-teacher-bubble{
  position:absolute;
  right:0;
  bottom:176px;
  max-width:228px;
  min-width:182px;
  padding:10px 12px;
  border:1px solid #ffd0e6;
  border-radius:14px;
  background:#fff;
  box-shadow:0 10px 26px rgba(145, 34, 91, .16);
  color:#5d1239;
  font-size:14px;
  font-weight:800;
  line-height:1.35;
  text-align:left;
}

.bdk2-teacher-bubble::after{
  content:"";
  position:absolute;
  right:74px;
  bottom:-10px;
  border-width:10px 8px 0;
  border-style:solid;
  border-color:#fff transparent transparent;
}

.bdk2-teacher-figure-wrap{
  position:absolute;
  right:0;
  bottom:0;
  width:170px;
  height:170px;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
}

.bdk2-teacher-figure{
  display:block;
  max-width:170px;
  max-height:170px;
  object-fit:contain;
  filter:drop-shadow(0 14px 18px rgba(80, 21, 51, .2));
}

.bdk2-teacher-widget.is-hidden{
  display:none;
}

.bdk2-teacher-restore{
  position:fixed;
  right:10px;
  bottom:10px;
  display:none;
  pointer-events:auto;
}

.bdk2-teacher-widget.is-hidden + .bdk2-teacher-restore{
  display:inline-flex;
}

.lesson-facts{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:8px;
}

.lesson-fact{
  display:grid;
  gap:4px;
  padding:10px;
  border:1px solid #f2c6dc;
  border-radius:10px;
  background:#fff8fc;
}

.lesson-fact strong{
  font-size:12px;
  color:var(--muted);
}

.lesson-fact span{
  font-size:16px;
  font-weight:800;
}

.lesson-topic__section{
  padding:12px;
  border:1px solid #f2c6dc;
  border-radius:10px;
  background:#fff;
}

.lesson-topic__section .section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.lesson-topic__section .section-title{
  min-width:0;
}

.lesson-topic__section .section-title h3{
  margin:0;
}

.lesson-topic__section .section-body{
  padding-top:10px;
}

.lesson-topic__section.is-collapsed .section-body{
  display:none;
}

.lesson-topic__section .toggle-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff8fc;
  color:var(--accent-strong);
  font:inherit;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
}

.lesson-topic__section h3,
.lesson-topic__section p{
  margin:0 0 8px;
}

.lesson-topic-list{
  display:grid;
  gap:6px;
  width:min(100%, 920px);
}

.lesson-topic-row{
  display:grid;
  grid-template-columns:88px minmax(260px, 1fr) max-content max-content;
  align-items:start;
  gap:10px;
  min-height:44px;
  padding:8px 10px;
  border:1px solid #f2c6dc;
  border-radius:10px;
  background:#fff;
  color:inherit;
  text-decoration:none;
}

.lesson-topic-row.is-disabled{
  opacity:.72;
  background:#fffafd;
}

.lesson-topic-row__index{
  font-weight:800;
  color:var(--accent-strong);
}

.lesson-topic-row__title{
  font-weight:700;
}

.lesson-topic-row__title-line{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}

.lesson-topic-row__title-line .tag{
  flex:0 0 auto;
}

.lesson-topic-row__content{
  display:grid;
  gap:6px;
  min-width:0;
}

.lesson-topic-row__summary{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}

.lesson-topic-row__outcomes{
  display:grid;
  gap:4px;
  margin:0;
  padding-left:18px;
  color:var(--text);
  font-size:13px;
  line-height:1.4;
}

.lesson-topic-row__meta{
  color:var(--muted);
  font-size:13px;
  white-space:nowrap;
}

.lesson-topic-row__meta strong{
  color:var(--text);
  font-weight:800;
}

.lesson-examples{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:8px;
  margin:8px 0 0;
}

.lesson-visual-grid,
.lesson-practice-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap:8px;
  margin-top:8px;
}

.lesson-visual-card,
.lesson-practice-card{
  display:grid;
  gap:8px;
  padding:10px;
  border:1px solid #f2c6dc;
  border-radius:10px;
  background:#fff8fc;
}

.lesson-visual-card{
  grid-template-rows:56px minmax(180px, 1fr);
  align-content:start;
}

.lesson-visual-card--wide{
  grid-column:1 / -1;
}

.lesson-concept-map{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap:12px;
  width:100%;
  padding:16px;
  border-radius:18px;
  background:linear-gradient(135deg, #eef8ff 0%, #fff5fb 100%);
}

.lesson-concept-map article{
  display:grid;
  align-content:center;
  gap:8px;
  min-height:112px;
  padding:16px;
  border:2px solid #c8def2;
  border-radius:16px;
  background:#fff;
  box-shadow:0 8px 20px rgba(47, 91, 130, .09);
}

.lesson-concept-map span{
  color:#8f2a63;
  font-size:13px;
  font-weight:900;
  letter-spacing:.02em;
  text-transform:uppercase;
}

.lesson-concept-map strong{
  color:#173550;
  font-size:clamp(16px, 2vw, 21px);
  line-height:1.35;
}

.lesson-visual-card__head{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  height:56px;
  min-height:56px;
}

.lesson-visual-card strong,
.lesson-practice-card strong{
  font-size:14px;
}

.lesson-visual-fullscreen{
  width:44px;
  height:44px;
  flex:0 0 auto;
  margin-left:auto;
}

.lesson-visual-zoom{
  display:none;
  width:44px;
  height:44px;
  flex:0 0 auto;
}

.lesson-answer-wrap{
  display:flex;
  align-items:flex-start;
  gap:8px;
}

.lesson-answer-content{
  flex:1;
  min-width:0;
  margin:0;
  padding:8px;
  border:1px dashed var(--line-strong);
  border-radius:9px;
  background:#fff;
  color:var(--text);
}

.lesson-answer-content.is-hidden{
  display:none;
}

.lesson-answer-toggle{
  flex:0 0 auto;
}

.lesson-fraction-sampler{
  display:grid;
  gap:10px;
  width:100%;
}

.lesson-fraction-sampler__head{
  display:grid;
  grid-template-columns:36px minmax(0, 1fr);
  align-items:center;
  gap:8px;
}

.lesson-fraction-sampler__head div{
  display:grid;
  gap:2px;
  min-width:0;
}

.lesson-fraction-sampler__head strong{
  display:flex;
  align-items:center;
  gap:6px;
  min-height:36px;
  font-size:20px;
  color:var(--text);
  line-height:1.1;
}

.lesson-fraction-sampler__head span{
  color:var(--muted);
  font-size:13px;
  font-weight:800;
}

.lesson-fraction-sampler__body{
  display:grid;
  grid-template-columns:minmax(150px, 1fr) minmax(0, 1fr);
  align-items:center;
  gap:10px;
}

.lesson-fraction-sampler__body p{
  margin:0;
  padding:8px;
  border:1px dashed #f0b7d4;
  border-radius:9px;
  background:#fff;
  color:var(--text);
  font-size:14px;
  font-weight:700;
  line-height:1.45;
}

.lesson-fraction-sampler__visual{
  min-width:0;
}

.lesson-denominator-demo{
  display:grid;
  justify-items:center;
  gap:8px;
  width:100%;
}

.lesson-denominator-demo__controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
}

.lesson-denominator-demo__controls strong{
  min-width:92px;
  text-align:center;
  color:var(--text);
}

.lesson-denominator-demo__visual svg{
  width:112px;
  height:112px;
}

.lesson-denominator-demo p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  font-weight:800;
  line-height:1.35;
  text-align:center;
}

.lesson-large-number-lab,
.lesson-group-rhythm,
.lesson-reading-route,
.lesson-place-value-board,
.lesson-number-compare,
.lesson-problem-route,
.lesson-worked-problem,
.lesson-operation-quiz-grid,
.lesson-check-triangle{
  width:100%;
  min-width:0;
}

.lesson-large-number-lab{
  display:grid;
  gap:12px;
}

.lesson-large-number-lab__choices{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
}

.lesson-large-number-lab__choices .secondary-button.is-active{
  border-color:#c0267c;
  background:#ffe7f3;
  box-shadow:0 0 0 3px rgba(192,38,124,.1);
}

.lesson-large-number-lab__number{
  padding:10px;
  border-radius:12px;
  background:linear-gradient(135deg,#fff0f7,#f4f0ff);
  color:#7c1450;
  font-size:clamp(30px,6vw,52px);
  font-weight:950;
  letter-spacing:.06em;
  line-height:1.1;
  text-align:center;
}

.lesson-large-number-lab__groups{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
  gap:8px;
}

.lesson-large-number-lab__groups div{
  display:grid;
  gap:5px;
  padding:10px;
  border:2px solid #e7c4d8;
  border-radius:12px;
  background:#fff;
  text-align:center;
}

.lesson-large-number-lab__groups div:nth-child(4n+1){border-color:#8b5cf6;background:#f6f2ff}
.lesson-large-number-lab__groups div:nth-child(4n+2){border-color:#2563eb;background:#eef6ff}
.lesson-large-number-lab__groups div:nth-child(4n+3){border-color:#14b8a6;background:#edfffb}
.lesson-large-number-lab__groups div:nth-child(4n+4){border-color:#f97316;background:#fff7ed}

.lesson-large-number-lab__groups span{
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}

.lesson-large-number-lab__groups strong{
  color:var(--text);
  font-size:25px;
  letter-spacing:.08em;
}

.lesson-large-number-lab__result{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.lesson-large-number-lab__result > div{
  display:grid;
  align-content:start;
  gap:5px;
  min-height:92px;
  padding:11px;
  border:1px solid #efbfd7;
  border-radius:11px;
  background:#fff;
}

.lesson-large-number-lab__result p{
  margin:0;
  color:#5f2146;
  font-size:15px;
  font-weight:800;
  line-height:1.45;
}

.lesson-group-rhythm{
  display:grid;
  gap:8px;
}

.lesson-group-rhythm__number,
.lesson-group-rhythm__labels{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
}

.lesson-group-rhythm__number span{
  display:grid;
  place-items:center;
  min-height:68px;
  border-radius:12px;
  color:#fff;
  font-size:clamp(24px,5vw,42px);
  font-weight:950;
  letter-spacing:.06em;
}

.lesson-group-rhythm__number .is-billion{background:#8b5cf6}
.lesson-group-rhythm__number .is-million{background:#2563eb}
.lesson-group-rhythm__number .is-thousand{background:#14b8a6}
.lesson-group-rhythm__number .is-one{background:#f97316}

.lesson-group-rhythm__labels span{
  padding:7px 4px;
  color:var(--text);
  font-size:12px;
  font-weight:900;
  text-align:center;
}

.lesson-group-rhythm > p{
  margin:0;
  padding:9px;
  border-radius:10px;
  background:#fff;
  text-align:center;
}

.lesson-reading-route,
.lesson-problem-route{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
  align-items:stretch;
}

.lesson-reading-route > div,
.lesson-problem-route > div{
  display:grid;
  align-content:start;
  gap:6px;
  min-height:130px;
  padding:10px;
  border:1px solid #efbfd7;
  border-radius:12px;
  background:#fff;
}

.lesson-reading-route > div > span,
.lesson-problem-route > div > span,
.lesson-check-triangle > div > span{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:999px;
  background:#c0267c;
  color:#fff;
  font-weight:950;
}

.lesson-reading-route > div:nth-child(even) > span,
.lesson-problem-route > div:nth-child(even) > span{
  background:#2563eb;
}

.lesson-reading-route p,
.lesson-problem-route p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.4;
}

.lesson-reading-route .is-result{
  border-color:#14b8a6;
  background:#edfffb;
}

.lesson-reading-route .is-result > span{
  background:#0f9f8f;
}

.lesson-place-value-board{
  display:grid;
  gap:10px;
  overflow:auto;
}

.lesson-place-value-board__number{
  color:#7c1450;
  font-size:clamp(28px,5vw,46px);
  font-weight:950;
  letter-spacing:.06em;
  text-align:center;
}

.lesson-place-value-board__row{
  display:grid;
  grid-template-columns:repeat(9,minmax(92px,1fr));
  gap:6px;
  min-width:860px;
}

.lesson-place-value-board__row > div{
  display:grid;
  align-content:start;
  gap:5px;
  min-height:116px;
  padding:9px 6px;
  border:1px solid #e7c4d8;
  border-radius:10px;
  background:#fff;
  text-align:center;
}

.lesson-place-value-board__row strong{
  color:#c0267c;
  font-size:28px;
}

.lesson-place-value-board__row span{
  color:var(--text);
  font-size:11px;
  font-weight:900;
}

.lesson-place-value-board__row em{
  color:#2563eb;
  font-size:11px;
  font-style:normal;
  font-weight:800;
}

.lesson-place-value-board > p{
  margin:0;
  padding:10px;
  border-radius:10px;
  background:#fff;
  line-height:1.5;
}

.lesson-number-compare{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.lesson-number-compare__rule,
.lesson-number-compare__example{
  display:grid;
  align-content:center;
  gap:8px;
  min-height:128px;
  padding:11px;
  border:1px solid #efbfd7;
  border-radius:12px;
  background:#fff;
}

.lesson-number-compare__rule{
  grid-template-columns:38px 1fr;
  align-items:center;
}

.lesson-number-compare__rule span{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:999px;
  background:#c0267c;
  color:#fff;
  font-weight:950;
}

.lesson-number-compare__rule p{
  margin:0;
  line-height:1.45;
}

.lesson-number-compare__example{
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  text-align:center;
}

.lesson-number-compare__example strong{
  font-size:clamp(16px,2.4vw,24px);
}

.lesson-number-compare__example > span{
  color:#c0267c;
  font-size:32px;
  font-weight:950;
}

.lesson-number-compare__example small{
  grid-column:1 / -1;
  color:var(--muted);
  font-weight:800;
}

.lesson-worked-problem{
  display:grid;
  gap:10px;
}

.lesson-worked-problem__question,
.lesson-worked-problem__answer{
  margin:0;
  padding:11px;
  border-radius:11px;
  background:#fff;
  line-height:1.5;
}

.lesson-worked-problem__map{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}

.lesson-worked-problem__map > div{
  display:grid;
  gap:5px;
  min-height:82px;
  padding:10px;
  border:1px solid #efbfd7;
  border-radius:11px;
  background:#fff;
}

.lesson-worked-problem__map span{
  color:var(--muted);
  font-size:13px;
  font-weight:700;
}

.lesson-worked-problem__steps{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.lesson-worked-problem__steps p{
  margin:0;
  padding:12px;
  border:1px solid #bcd8ff;
  border-radius:11px;
  background:#eef6ff;
  font-size:17px;
  text-align:center;
}

.lesson-worked-problem__steps span{
  color:#2563eb;
  font-weight:950;
}

.lesson-worked-problem__answer{
  border:1px solid #9de3d8;
  background:#edfffb;
  color:#0f766e;
}

.lesson-operation-quiz-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.lesson-operation-quiz{
  display:grid;
  align-content:start;
  gap:10px;
  min-height:190px;
  padding:11px;
  border:2px solid #e7c4d8;
  border-radius:12px;
  background:#fff;
  transition:border-color .15s ease,background .15s ease;
}

.lesson-operation-quiz.is-correct{
  border-color:#14b8a6;
  background:#edfffb;
}

.lesson-operation-quiz.is-wrong{
  border-color:#f59e0b;
  background:#fff9e9;
}

.lesson-operation-quiz__choices{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.lesson-operation-quiz__choices button{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  padding:0;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fff8fc;
  color:#7c1450;
  font-size:25px;
  font-weight:950;
  cursor:pointer;
  touch-action:manipulation;
}

.lesson-operation-quiz__choices button.is-selected{
  border-color:#c0267c;
  box-shadow:0 0 0 3px rgba(192,38,124,.12);
}

.lesson-operation-quiz > p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  font-weight:800;
  line-height:1.4;
}

.lesson-operation-quiz.is-correct > p{color:#0f766e}
.lesson-operation-quiz.is-wrong > p{color:#9a6700}

.lesson-check-triangle{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}

.lesson-check-triangle > div{
  display:grid;
  align-content:start;
  justify-items:center;
  gap:8px;
  min-height:142px;
  padding:12px;
  border:1px solid #efbfd7;
  border-radius:12px;
  background:#fff;
  text-align:center;
}

.lesson-check-triangle > div:nth-child(2) > span{background:#2563eb}
.lesson-check-triangle > div:nth-child(3) > span{background:#0f9f8f}

.lesson-check-triangle p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.4;
}

.lesson-fraction-representation-lab,
.lesson-mixed-fraction-lab,
.lesson-equivalent-fraction-lab,
.lesson-unit-fraction-builder,
.lesson-fraction-model-guide,
.lesson-fraction-reference-map,
.lesson-fraction-compare-grid,
.lesson-fraction-life-cards{
  width:100%;
  min-width:0;
}

.lesson-fraction-representation-lab,
.lesson-mixed-fraction-lab,
.lesson-equivalent-fraction-lab{
  display:grid;
  gap:12px;
}

.lesson-fraction-representation-lab__choices,
.lesson-mixed-fraction-lab__choices,
.lesson-equivalent-fraction-lab__choices{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
}

.lesson-fraction-representation-lab__choices .is-active,
.lesson-mixed-fraction-lab__choices .is-active,
.lesson-equivalent-fraction-lab__choices .is-active{
  border-color:#c0267c;
  background:#ffe7f3;
  box-shadow:0 0 0 3px rgba(192,38,124,.1);
}

.lesson-fraction-representation-lab__stage{
  display:grid;
  grid-template-columns:minmax(220px,340px) 1fr;
  gap:14px;
  align-items:center;
}

.lesson-fraction-representation-cake{
  display:grid;
  place-items:center;
  width:min(100%,330px);
  min-height:280px;
  margin:auto;
  padding:12px;
  border:1px solid #efbfd7;
  border-radius:16px;
  background:#fff;
}

.lesson-fraction-representation-cake svg{
  width:min(100%,280px);
  height:auto;
  max-height:280px;
}

.lesson-hundred-grid{
  display:grid;
  grid-template-columns:repeat(10,1fr);
  gap:3px;
  width:min(100%,320px);
  aspect-ratio:1;
  margin:auto;
  padding:8px;
  border:2px solid #7c1450;
  border-radius:14px;
  background:#fff;
}

.lesson-hundred-grid span{
  min-width:0;
  border:1px solid #e8c9da;
  border-radius:3px;
  background:#fff8fc;
}

.lesson-hundred-grid span.is-filled{
  border-color:#c0267c;
  background:linear-gradient(135deg,#f04a9b,#c0267c);
}

.lesson-fraction-representation-lab__explanation{
  display:grid;
  gap:14px;
  min-width:0;
}

.lesson-fraction-bar{
  height:38px;
  overflow:hidden;
  border:2px solid #7c1450;
  border-radius:999px;
  background:#fff;
}

.lesson-fraction-bar span{
  display:block;
  width:0;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#8b5cf6,#c0267c,#f04a9b);
  transition:width .2s ease;
}

.lesson-fraction-representation-lab__values{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}

.lesson-fraction-representation-lab__values > div{
  display:grid;
  gap:5px;
  min-height:82px;
  padding:10px;
  border:1px solid #efbfd7;
  border-radius:11px;
  background:#fff;
  text-align:center;
}

.lesson-fraction-representation-lab__values span{
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}

.lesson-fraction-representation-lab__values strong{
  color:#7c1450;
  font-size:clamp(21px,3vw,30px);
}

.lesson-fraction-representation-lab__explanation > p{
  margin:0;
  padding:10px;
  border-radius:10px;
  background:#fff;
  color:#5f2146;
  font-weight:800;
  text-align:center;
}

.lesson-cake-translation{
  display:grid;
  gap:5px;
  padding:11px;
  border:1px solid #9de3d8;
  border-radius:11px;
  background:#edfffb;
  color:#0f766e;
  line-height:1.45;
}

.lesson-fraction-number-line{
  position:relative;
  height:58px;
  margin:0 16px;
  border-top:5px solid #31263b;
}

.lesson-fraction-number-line::before,
.lesson-fraction-number-line::after{
  content:"";
  position:absolute;
  top:-10px;
  width:3px;
  height:16px;
  background:#31263b;
}

.lesson-fraction-number-line::before{left:0}
.lesson-fraction-number-line::after{right:0}

.lesson-fraction-number-line > span{
  position:absolute;
  top:11px;
  font-size:12px;
  font-weight:900;
}

.lesson-fraction-number-line .is-zero{left:0;transform:translateX(-50%)}
.lesson-fraction-number-line .is-half{left:50%;transform:translateX(-50%)}
.lesson-fraction-number-line .is-one{right:0;transform:translateX(50%)}

.lesson-fraction-number-line i{
  position:absolute;
  top:-16px;
  left:0;
  width:26px;
  height:26px;
  border:4px solid #fff;
  border-radius:999px;
  background:#c0267c;
  box-shadow:0 0 0 2px #7c1450;
  transform:translateX(-50%);
  transition:left .2s ease;
}

.lesson-mixed-fraction-lab__models{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
}

.lesson-mixed-fraction-lab__models > div{
  display:grid;
  gap:5px;
  min-width:132px;
  padding:9px;
  border:1px solid #efbfd7;
  border-radius:12px;
  background:#fff;
  text-align:center;
}

.lesson-mixed-fraction-lab__models .lesson-mini-circle{
  width:140px;
  height:140px;
  margin:auto;
}

.lesson-mixed-fraction-lab__models .lesson-mini-circle svg{
  width:128px;
  height:128px;
}

.lesson-mixed-fraction-lab__models i{
  display:grid;
  grid-template-columns:repeat(var(--piece-count),1fr);
  gap:3px;
  width:100%;
  height:76px;
  overflow:hidden;
  border:2px solid #7c1450;
  border-radius:10px;
  background:#fff8fc;
}

.lesson-mixed-fraction-lab__models i span{
  border-right:1px solid #e7c4d8;
  background:#fff;
}

.lesson-mixed-fraction-lab__models i span.is-filled{
  background:linear-gradient(180deg,#f36da9,#c0267c);
}

.lesson-mixed-fraction-lab__models small{
  color:var(--muted);
  font-weight:900;
}

.lesson-mixed-fraction-lab__result{
  display:grid;
  gap:6px;
  padding:12px;
  border:1px solid #9de3d8;
  border-radius:12px;
  background:#edfffb;
  text-align:center;
}

.lesson-mixed-fraction-lab__result strong{
  color:#0f766e;
  font-size:clamp(22px,4vw,34px);
}

.lesson-mixed-fraction-lab__result p{margin:0;color:#0f766e;font-weight:800}

.lesson-equivalent-fraction-lab > p{
  margin:0;
  text-align:center;
}

.lesson-equivalent-fraction-lab__choices button{
  min-width:52px;
  min-height:48px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fff;
  color:#7c1450;
  font-size:17px;
  font-weight:950;
  cursor:pointer;
  touch-action:manipulation;
}

.lesson-equivalent-fraction-lab__equation{
  color:#7c1450;
  font-size:clamp(26px,5vw,42px);
  font-weight:950;
  text-align:center;
}

.lesson-equivalent-fraction-lab__strips{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.lesson-equivalent-fraction-lab__cakes{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.lesson-equivalent-fraction-lab__cakes > div{
  display:grid;
  justify-items:center;
  gap:8px;
  padding:11px;
  border:1px solid #efbfd7;
  border-radius:12px;
  background:#fff;
  text-align:center;
}

.lesson-equivalent-fraction-lab__cakes > div > span{
  color:var(--muted);
  font-size:12px;
  font-weight:900;
}

.lesson-equivalent-fraction-lab__cakes [data-equivalence-base-cake],
.lesson-equivalent-fraction-lab__cakes [data-equivalence-result-cake]{
  display:grid;
  place-items:center;
  width:170px;
  height:170px;
}

.lesson-equivalent-fraction-lab__cakes svg{
  width:160px;
  height:160px;
}

.lesson-equivalent-fraction-lab__strips > div{
  display:grid;
  gap:6px;
  padding:10px;
  border:1px solid #efbfd7;
  border-radius:12px;
  background:#fff;
}

.lesson-equivalent-fraction-lab__strips > div > span{
  color:var(--muted);
  font-size:12px;
  font-weight:900;
}

.lesson-fraction-strip{
  display:grid;
  grid-template-columns:repeat(var(--piece-count),1fr);
  gap:3px;
  height:58px;
  overflow:hidden;
  border:2px solid #7c1450;
  border-radius:10px;
}

.lesson-fraction-strip span{background:#fff8fc;border-right:1px solid #e7c4d8}
.lesson-fraction-strip span.is-filled{background:#c0267c}

.lesson-unit-fraction-builder{
  display:grid;
  gap:12px;
}

.lesson-unit-fraction-builder__whole{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:4px;
  height:96px;
  overflow:hidden;
  border:2px solid #7c1450;
  border-radius:12px;
  background:#fff;
}

.lesson-unit-fraction-builder__whole span{background:#fff8fc;border-right:1px solid #e7c4d8}
.lesson-unit-fraction-builder__whole span:nth-child(-n+3){background:linear-gradient(180deg,#f36da9,#c0267c)}

.lesson-unit-fraction-builder__steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}

.lesson-unit-fraction-builder__steps > div{
  padding:10px;
  border:1px solid #efbfd7;
  border-radius:11px;
  background:#fff;
  text-align:center;
}

.lesson-unit-fraction-builder__steps strong{color:#7c1450;font-size:22px}
.lesson-unit-fraction-builder__steps p{margin:5px 0 0;color:var(--muted);font-size:12px;font-weight:800}

.lesson-fraction-model-guide,
.lesson-fraction-life-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
}

.lesson-fraction-model-guide article,
.lesson-fraction-life-cards article{
  display:grid;
  align-content:start;
  gap:8px;
  min-height:190px;
  padding:12px;
  border:1px solid #efbfd7;
  border-radius:12px;
  background:#fff;
}

.lesson-fraction-model-guide article > span{
  display:block;
  height:66px;
  border-radius:10px;
}

.lesson-fraction-model-guide .is-area{background:linear-gradient(90deg,#c0267c 0 75%,#fff0f7 75%)}
.lesson-fraction-model-guide .is-line{height:36px;margin-top:30px;border-top:5px solid #31263b;background:linear-gradient(90deg,transparent 0 64%,#c0267c 64% 68%,transparent 68%)}
.lesson-fraction-model-guide .is-grid{background:repeating-linear-gradient(0deg,transparent 0 8px,#e7c4d8 8px 9px),repeating-linear-gradient(90deg,#ffe7f3 0 8px,#e7c4d8 8px 9px)}
.lesson-fraction-model-guide .is-cake{
  width:72px;
  height:72px;
  margin:auto;
  border:3px solid #7c1450;
  border-radius:999px;
  background:conic-gradient(#c0267c 0 75%,#fff0f7 75%);
}
.lesson-fraction-model-guide .is-cake-count{
  width:72px;
  height:72px;
  margin:auto;
  border:3px solid #7c1450;
  border-radius:999px;
  background:repeating-conic-gradient(from 0deg,#c0267c 0 42deg,#fff 42deg 45deg);
}
.lesson-fraction-model-guide .is-cake-language{
  width:72px;
  height:72px;
  margin:auto;
  border:3px solid #7c1450;
  border-radius:999px;
  background:conic-gradient(#14b8a6 0 75%,#edfffb 75%);
}
.lesson-fraction-model-guide p,
.lesson-fraction-life-cards p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}
.lesson-fraction-model-guide small{color:#2563eb;font-weight:800;line-height:1.4}

.lesson-fraction-reference-map{
  position:relative;
  padding:34px 18px 52px;
}

.lesson-fraction-reference-map > p{
  margin:-24px 0 32px;
  padding:9px;
  border-radius:10px;
  background:#fff;
  line-height:1.45;
  text-align:center;
}

.lesson-fraction-reference-map__line{
  position:relative;
  height:8px;
  border-radius:999px;
  background:linear-gradient(90deg,#8b5cf6,#2563eb,#14b8a6);
}

.lesson-fraction-reference-map__line i{
  position:absolute;
  top:50%;
  width:20px;
  height:20px;
  border:4px solid #fff;
  border-radius:999px;
  background:#31263b;
  box-shadow:0 0 0 2px #31263b;
  transform:translate(-50%,-50%);
}

.lesson-fraction-reference-map__line .at-zero{left:0}
.lesson-fraction-reference-map__line .at-half{left:50%}
.lesson-fraction-reference-map__line .at-one{left:100%}

.lesson-fraction-reference-map__labels{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  margin-top:12px;
  font-weight:950;
  text-align:center;
}

.lesson-fraction-reference-map__labels span:first-child{text-align:left}
.lesson-fraction-reference-map__labels span:last-child{text-align:right}
.lesson-fraction-reference-map__labels small{color:var(--muted);font-weight:700}

.lesson-fraction-reference-map__examples{
  position:absolute;
  inset:4px 18px auto;
  height:28px;
}

.lesson-fraction-reference-map__examples span{
  position:absolute;
  left:var(--position);
  padding:4px 7px;
  border-radius:8px;
  background:#fff;
  color:#7c1450;
  font-size:12px;
  font-weight:950;
  transform:translateX(-50%);
}

.lesson-fraction-compare-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}

.lesson-fraction-compare{
  display:grid;
  align-content:start;
  gap:10px;
  min-height:292px;
  padding:12px;
  border:2px solid #e7c4d8;
  border-radius:12px;
  background:#fff;
}

.lesson-fraction-compare__cakes{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.lesson-fraction-compare__cakes > div{
  display:grid;
  justify-items:center;
  gap:4px;
  min-width:0;
}

.lesson-fraction-compare__cakes > div > small{
  color:var(--muted);
  font-weight:800;
}

.lesson-fraction-compare__cakes > div > span{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:4px;
}

.lesson-fraction-compare__cakes .lesson-mini-circle{
  min-width:90px;
  min-height:90px;
  padding:2px;
}

.lesson-fraction-compare__cakes .lesson-mini-circle svg{
  width:84px;
  height:84px;
}

.lesson-fraction-compare.is-correct{border-color:#14b8a6;background:#edfffb}
.lesson-fraction-compare.is-wrong{border-color:#f59e0b;background:#fff9e9}
.lesson-fraction-compare > strong{font-size:17px;text-align:center}

.lesson-fraction-compare__choices{
  display:flex;
  justify-content:center;
  gap:8px;
}

.lesson-fraction-compare__choices button{
  display:grid;
  place-items:center;
  width:52px;
  height:48px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fff8fc;
  color:#7c1450;
  font-size:25px;
  font-weight:950;
  cursor:pointer;
  touch-action:manipulation;
}

.lesson-fraction-compare__choices button.is-selected{
  border-color:#c0267c;
  box-shadow:0 0 0 3px rgba(192,38,124,.12);
}

.lesson-fraction-compare > p{margin:0;color:var(--muted);font-size:13px;font-weight:800;line-height:1.4;text-align:center}
.lesson-fraction-compare.is-correct > p{color:#0f766e}
.lesson-fraction-compare.is-wrong > p{color:#9a6700}

.lesson-fraction-life-cards{grid-template-columns:repeat(4,1fr)}
.lesson-fraction-life-cards article{min-height:150px;text-align:center}
.lesson-fraction-life-cards article > span{color:var(--muted);font-size:12px;font-weight:900}
.lesson-fraction-life-cards article > strong{color:#7c1450;font-size:clamp(22px,3vw,32px)}

.lesson-cake-example-switcher__head{
  display:grid;
  grid-template-columns:44px minmax(0,1fr) 44px;
  align-items:center;
  gap:9px;
}

.lesson-cake-example-switcher__head > div{
  display:grid;
  justify-items:center;
  gap:3px;
  min-width:0;
  text-align:center;
}

.lesson-cake-example-switcher__head strong{
  display:flex;
  align-items:center;
  min-height:36px;
  color:#7c1450;
  font-size:22px;
}

.lesson-cake-example-switcher__head span{
  color:var(--text);
  font-size:14px;
  font-weight:900;
}

.lesson-cake-example-switcher__head small{
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  line-height:1.35;
}

.lesson-cake-example-switcher .lesson-fraction-sampler__visual .lesson-mini-circle{
  min-width:150px;
  min-height:150px;
}

.lesson-cake-example-switcher .lesson-fraction-sampler__visual .lesson-mini-circle svg{
  width:140px;
  height:140px;
}

.lesson-visual-card__canvas{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-width:0;
  min-height:180px;
  padding:6px;
  border:1px solid #f0d3e2;
  border-radius:10px;
  background:#fff;
  overflow:auto;
}

.lesson-visual-card__canvas:has(> .lesson-symbol-row),
.lesson-visual-card__canvas:has(> .lesson-number-chip-row){
  min-height:110px;
}

.lesson-visual-card__canvas svg{
  width:100%;
  max-width:100%;
  max-height:280px;
  height:auto;
  display:block;
}

.lesson-visual-card__canvas .lesson-geometry-switcher__drawing svg{
  max-height:420px;
}

.lesson-visual-card__canvas .lesson-angle-lab__canvas{
  max-height:none;
}

.lesson-visual-card__canvas .lesson-intersection-lab__canvas{
  max-height:none;
}

.lesson-visual-card__canvas .lesson-fraction-representation-cake svg{
  max-height:280px;
}

.lesson-visual-card__canvas .lesson-equivalent-fraction-lab__cakes svg{
  max-height:160px;
}

.lesson-visual-card__canvas .lesson-cake-example-switcher .lesson-mini-circle svg{
  max-height:140px;
}

.lesson-visual-card__canvas .lesson-place-diagram{
  max-height:none;
}

.lesson-visual-card:fullscreen{
  width:100vw;
  height:100vh;
  overflow:auto;
  padding:16px;
  border:0;
  border-radius:0;
  background:#fff8fc;
}

.lesson-visual-card:fullscreen .lesson-visual-card__canvas{
  min-height:calc(100vh - 78px);
  max-height:calc(100vh - 78px);
  align-items:center;
  justify-content:center;
  overflow:auto;
  overscroll-behavior:contain;
}

.lesson-visual-card:fullscreen .lesson-visual-card__canvas:has(.lesson-zero-demo){
  align-items:flex-start;
  justify-content:flex-start;
}

.lesson-visual-card:fullscreen .lesson-place-diagram{
  width:min(1400px, 100%);
  min-width:1000px;
}

.lesson-visual-card:fullscreen .lesson-geometry-switcher__drawing svg{
  max-width:min(1100px, 100%);
  max-height:min(74vh, 760px);
}

.lesson-visual-card:fullscreen .lesson-visual-zoom{
  display:inline-grid;
}

.lesson-visual-card:fullscreen.is-original .lesson-visual-card__canvas > :first-child{
  flex:0 0 auto;
  max-width:none;
}

.lesson-visual-card:fullscreen.is-fit .lesson-visual-card__canvas > :first-child{
  width:100%;
  max-width:100%;
}

.lesson-visual-card:fullscreen.is-fit .lesson-place-diagram{
  width:auto;
  min-width:0;
  max-width:100%;
  max-height:calc(100vh - 110px);
}

.lesson-visual-card.is-fit .lesson-visual-card__canvas .lesson-place-diagram{
  width:auto;
  min-width:0;
  max-width:100%;
}

/* Ders görsellerinde gerçek tam ekran yerleşimi */
.lesson-visual-card:fullscreen,
.lesson-visual-card:-webkit-full-screen,
.lesson-visual-card.is-stage-fullscreen{
  display:grid;
  grid-template-rows:max-content minmax(0, 1fr);
  align-content:stretch;
  gap:8px;
  width:100vw;
  height:100vh;
  height:100dvh;
  padding:12px;
  overflow:hidden;
}

.lesson-visual-card:fullscreen .lesson-visual-card__canvas,
.lesson-visual-card:-webkit-full-screen .lesson-visual-card__canvas,
.lesson-visual-card.is-stage-fullscreen .lesson-visual-card__canvas{
  align-items:stretch;
  justify-content:stretch;
  width:100%;
  height:auto;
  min-height:0;
  max-height:none;
  overflow:auto;
}

.lesson-visual-card:fullscreen.is-fit .lesson-visual-card__canvas > :first-child,
.lesson-visual-card:-webkit-full-screen.is-fit .lesson-visual-card__canvas > :first-child,
.lesson-visual-card.is-stage-fullscreen.is-fit .lesson-visual-card__canvas > :first-child{
  width:100%;
  max-width:100%;
  min-height:100%;
  align-self:stretch;
}

.lesson-visual-card:fullscreen.is-fit .lesson-visual-card__canvas > svg:first-child,
.lesson-visual-card:-webkit-full-screen.is-fit .lesson-visual-card__canvas > svg:first-child,
.lesson-visual-card.is-stage-fullscreen.is-fit .lesson-visual-card__canvas > svg:first-child{
  height:100%;
  max-height:100%;
}

.lesson-visual-card:fullscreen .lesson-geometry-switcher,
.lesson-visual-card:-webkit-full-screen .lesson-geometry-switcher,
.lesson-visual-card.is-stage-fullscreen .lesson-geometry-switcher{
  align-self:stretch;
  grid-template-rows:max-content minmax(0, 1fr);
  width:100%;
  height:100%;
  min-height:0;
}

/* Tam ekranda geometri aracı, tuvalin ortasında küçük bir ada gibi kalmamalı. */
.lesson-visual-card:fullscreen .lesson-visual-card__canvas:has(> .lesson-geometry-switcher),
.lesson-visual-card:-webkit-full-screen .lesson-visual-card__canvas:has(> .lesson-geometry-switcher),
.lesson-visual-card.is-stage-fullscreen .lesson-visual-card__canvas:has(> .lesson-geometry-switcher){
  display:grid;
  grid-template-rows:minmax(0, 1fr);
  place-items:stretch;
  overflow:hidden;
}

.lesson-visual-card:fullscreen .lesson-visual-card__canvas > .lesson-geometry-switcher,
.lesson-visual-card:-webkit-full-screen .lesson-visual-card__canvas > .lesson-geometry-switcher,
.lesson-visual-card.is-stage-fullscreen .lesson-visual-card__canvas > .lesson-geometry-switcher{
  align-self:stretch;
  width:100%;
  height:100%;
  min-height:0;
}

.lesson-visual-card:fullscreen .lesson-geometry-switcher__stage,
.lesson-visual-card:-webkit-full-screen .lesson-geometry-switcher__stage,
.lesson-visual-card.is-stage-fullscreen .lesson-geometry-switcher__stage,
.lesson-visual-card:fullscreen .lesson-geometry-switcher__panel,
.lesson-visual-card:-webkit-full-screen .lesson-geometry-switcher__panel,
.lesson-visual-card.is-stage-fullscreen .lesson-geometry-switcher__panel,
.lesson-visual-card:fullscreen .lesson-geometry-switcher__drawing,
.lesson-visual-card:-webkit-full-screen .lesson-geometry-switcher__drawing,
.lesson-visual-card.is-stage-fullscreen .lesson-geometry-switcher__drawing{
  height:100%;
  min-height:0;
}

.lesson-visual-card:fullscreen .lesson-geometry-switcher__panel,
.lesson-visual-card:-webkit-full-screen .lesson-geometry-switcher__panel,
.lesson-visual-card.is-stage-fullscreen .lesson-geometry-switcher__panel{
  grid-template-columns:minmax(0, 2fr) minmax(260px, .82fr);
  grid-template-rows:minmax(0, 1fr);
  align-items:stretch;
  padding:clamp(8px, 1vw, 18px);
  overflow:hidden;
}

.lesson-visual-card:fullscreen .lesson-geometry-switcher__explanation,
.lesson-visual-card:-webkit-full-screen .lesson-geometry-switcher__explanation,
.lesson-visual-card.is-stage-fullscreen .lesson-geometry-switcher__explanation{
  align-self:center;
  max-height:100%;
  overflow:auto;
}

.lesson-visual-card:fullscreen .lesson-geometry-switcher__drawing svg,
.lesson-visual-card:-webkit-full-screen .lesson-geometry-switcher__drawing svg,
.lesson-visual-card.is-stage-fullscreen .lesson-geometry-switcher__drawing svg{
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
}

@media (max-width: 820px), (orientation: portrait) and (max-width: 1100px){
  .lesson-visual-card:fullscreen .lesson-geometry-switcher__panel,
  .lesson-visual-card:-webkit-full-screen .lesson-geometry-switcher__panel,
  .lesson-visual-card.is-stage-fullscreen .lesson-geometry-switcher__panel{
    grid-template-columns:minmax(0, 1fr);
    grid-template-rows:minmax(0, 1fr) max-content;
  }

  .lesson-visual-card:fullscreen .lesson-geometry-switcher__explanation,
  .lesson-visual-card:-webkit-full-screen .lesson-geometry-switcher__explanation,
  .lesson-visual-card.is-stage-fullscreen .lesson-geometry-switcher__explanation{
    width:100%;
    max-height:min(30dvh, 260px);
  }
}

.lesson-visual-card:fullscreen .lesson-place-demo,
.lesson-visual-card:-webkit-full-screen .lesson-place-demo,
.lesson-visual-card.is-stage-fullscreen .lesson-place-demo{
  grid-template-rows:auto auto auto minmax(0, 1fr);
  height:100%;
  min-height:0;
  min-width:0;
  overflow:hidden;
}

.lesson-visual-card:fullscreen .lesson-place-demo__grid,
.lesson-visual-card:-webkit-full-screen .lesson-place-demo__grid,
.lesson-visual-card.is-stage-fullscreen .lesson-place-demo__grid{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  min-height:0;
  overflow:auto;
}

.lesson-visual-card:fullscreen .lesson-place-demo__grid .lesson-place-diagram,
.lesson-visual-card:-webkit-full-screen .lesson-place-demo__grid .lesson-place-diagram,
.lesson-visual-card.is-stage-fullscreen .lesson-place-demo__grid .lesson-place-diagram{
  width:auto;
  height:100%;
  min-width:0;
  max-width:100%;
  max-height:100%;
}

.lesson-visual-card:fullscreen .lesson-zero-demo,
.lesson-visual-card:-webkit-full-screen .lesson-zero-demo,
.lesson-visual-card.is-stage-fullscreen .lesson-zero-demo{
  grid-template-rows:auto auto auto auto minmax(0, 1fr);
  align-self:stretch;
  height:100%;
  min-height:0;
  min-width:0;
  margin:0;
  overflow:hidden;
}

.lesson-visual-card:fullscreen .lesson-zero-demo__diagram,
.lesson-visual-card:-webkit-full-screen .lesson-zero-demo__diagram,
.lesson-visual-card.is-stage-fullscreen .lesson-zero-demo__diagram{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
  overflow:auto;
}

.lesson-visual-card:fullscreen .lesson-zero-demo__diagram .lesson-place-diagram,
.lesson-visual-card:-webkit-full-screen .lesson-zero-demo__diagram .lesson-place-diagram,
.lesson-visual-card.is-stage-fullscreen .lesson-zero-demo__diagram .lesson-place-diagram{
  width:auto;
  height:100%;
  min-width:0;
  max-width:100%;
  max-height:100%;
}

.lesson-visual-card:fullscreen .lesson-fraction-representation-lab,
.lesson-visual-card:-webkit-full-screen .lesson-fraction-representation-lab,
.lesson-visual-card.is-stage-fullscreen .lesson-fraction-representation-lab,
.lesson-visual-card:fullscreen .lesson-mixed-fraction-lab,
.lesson-visual-card:-webkit-full-screen .lesson-mixed-fraction-lab,
.lesson-visual-card.is-stage-fullscreen .lesson-mixed-fraction-lab,
.lesson-visual-card:fullscreen .lesson-equivalent-fraction-lab,
.lesson-visual-card:-webkit-full-screen .lesson-equivalent-fraction-lab,
.lesson-visual-card.is-stage-fullscreen .lesson-equivalent-fraction-lab,
.lesson-visual-card:fullscreen .lesson-cake-example-switcher,
.lesson-visual-card:-webkit-full-screen .lesson-cake-example-switcher,
.lesson-visual-card.is-stage-fullscreen .lesson-cake-example-switcher{
  align-content:center;
  height:100%;
  min-height:0;
}

.lesson-visual-card:fullscreen .lesson-mixed-fraction-lab__models .lesson-mini-circle,
.lesson-visual-card:-webkit-full-screen .lesson-mixed-fraction-lab__models .lesson-mini-circle,
.lesson-visual-card.is-stage-fullscreen .lesson-mixed-fraction-lab__models .lesson-mini-circle{
  width:clamp(220px, 22vh, 330px);
  height:clamp(220px, 22vh, 330px);
}

.lesson-visual-card:fullscreen .lesson-mixed-fraction-lab__models .lesson-mini-circle svg,
.lesson-visual-card:-webkit-full-screen .lesson-mixed-fraction-lab__models .lesson-mini-circle svg,
.lesson-visual-card.is-stage-fullscreen .lesson-mixed-fraction-lab__models .lesson-mini-circle svg{
  width:clamp(200px, 20vh, 300px);
  height:clamp(200px, 20vh, 300px);
}

.lesson-visual-card:fullscreen .lesson-equivalent-fraction-lab__cakes [data-equivalence-base-cake],
.lesson-visual-card:fullscreen .lesson-equivalent-fraction-lab__cakes [data-equivalence-result-cake],
.lesson-visual-card:-webkit-full-screen .lesson-equivalent-fraction-lab__cakes [data-equivalence-base-cake],
.lesson-visual-card:-webkit-full-screen .lesson-equivalent-fraction-lab__cakes [data-equivalence-result-cake],
.lesson-visual-card.is-stage-fullscreen .lesson-equivalent-fraction-lab__cakes [data-equivalence-base-cake],
.lesson-visual-card.is-stage-fullscreen .lesson-equivalent-fraction-lab__cakes [data-equivalence-result-cake]{
  width:clamp(240px, 26vh, 360px);
  height:clamp(240px, 26vh, 360px);
}

.lesson-visual-card:fullscreen .lesson-equivalent-fraction-lab__cakes svg,
.lesson-visual-card:-webkit-full-screen .lesson-equivalent-fraction-lab__cakes svg,
.lesson-visual-card.is-stage-fullscreen .lesson-equivalent-fraction-lab__cakes svg{
  width:clamp(220px, 24vh, 330px);
  height:clamp(220px, 24vh, 330px);
  max-height:none;
}

.lesson-visual-card:fullscreen .lesson-fraction-representation-cake,
.lesson-visual-card:-webkit-full-screen .lesson-fraction-representation-cake,
.lesson-visual-card.is-stage-fullscreen .lesson-fraction-representation-cake,
.lesson-visual-card:fullscreen .lesson-hundred-grid,
.lesson-visual-card:-webkit-full-screen .lesson-hundred-grid,
.lesson-visual-card.is-stage-fullscreen .lesson-hundred-grid{
  width:clamp(340px, 38vh, 520px);
  min-height:clamp(340px, 38vh, 520px);
}

.lesson-visual-card:fullscreen .lesson-fraction-representation-cake svg,
.lesson-visual-card:-webkit-full-screen .lesson-fraction-representation-cake svg,
.lesson-visual-card.is-stage-fullscreen .lesson-fraction-representation-cake svg{
  width:clamp(310px, 35vh, 480px);
  max-height:none;
}

.lesson-visual-card:fullscreen .lesson-cake-example-switcher .lesson-fraction-sampler__visual .lesson-mini-circle,
.lesson-visual-card:-webkit-full-screen .lesson-cake-example-switcher .lesson-fraction-sampler__visual .lesson-mini-circle,
.lesson-visual-card.is-stage-fullscreen .lesson-cake-example-switcher .lesson-fraction-sampler__visual .lesson-mini-circle{
  min-width:clamp(260px, 34vh, 460px);
  min-height:clamp(260px, 34vh, 460px);
}

.lesson-visual-card:fullscreen .lesson-cake-example-switcher .lesson-fraction-sampler__visual .lesson-mini-circle svg,
.lesson-visual-card:-webkit-full-screen .lesson-cake-example-switcher .lesson-fraction-sampler__visual .lesson-mini-circle svg,
.lesson-visual-card.is-stage-fullscreen .lesson-cake-example-switcher .lesson-fraction-sampler__visual .lesson-mini-circle svg{
  width:clamp(240px, 31vh, 420px);
  height:clamp(240px, 31vh, 420px);
  max-height:none;
}

.lesson-visual-card:fullscreen .lesson-fraction-compare__cakes .lesson-mini-circle,
.lesson-visual-card:-webkit-full-screen .lesson-fraction-compare__cakes .lesson-mini-circle,
.lesson-visual-card.is-stage-fullscreen .lesson-fraction-compare__cakes .lesson-mini-circle{
  min-width:clamp(104px, 9vh, 128px);
  min-height:clamp(104px, 9vh, 128px);
}

.lesson-visual-card:fullscreen .lesson-fraction-compare__cakes .lesson-mini-circle svg,
.lesson-visual-card:-webkit-full-screen .lesson-fraction-compare__cakes .lesson-mini-circle svg,
.lesson-visual-card.is-stage-fullscreen .lesson-fraction-compare__cakes .lesson-mini-circle svg{
  width:clamp(96px, 8.5vh, 120px);
  height:clamp(96px, 8.5vh, 120px);
}

.lesson-visual-card:fullscreen .lesson-fraction-model-guide .is-cake,
.lesson-visual-card:fullscreen .lesson-fraction-model-guide .is-cake-count,
.lesson-visual-card:fullscreen .lesson-fraction-model-guide .is-cake-language,
.lesson-visual-card:-webkit-full-screen .lesson-fraction-model-guide .is-cake,
.lesson-visual-card:-webkit-full-screen .lesson-fraction-model-guide .is-cake-count,
.lesson-visual-card:-webkit-full-screen .lesson-fraction-model-guide .is-cake-language,
.lesson-visual-card.is-stage-fullscreen .lesson-fraction-model-guide .is-cake,
.lesson-visual-card.is-stage-fullscreen .lesson-fraction-model-guide .is-cake-count,
.lesson-visual-card.is-stage-fullscreen .lesson-fraction-model-guide .is-cake-language{
  width:clamp(110px, 13vh, 170px);
  height:clamp(110px, 13vh, 170px);
}

.lesson-visual-card:fullscreen .lesson-equality-lab,
.lesson-visual-card:-webkit-full-screen .lesson-equality-lab,
.lesson-visual-card.is-stage-fullscreen .lesson-equality-lab{
  grid-template-rows:auto minmax(0, 1fr) auto;
  align-content:stretch;
  height:100%;
  min-height:0;
}

.lesson-visual-card:fullscreen .lesson-equality-box > strong,
.lesson-visual-card:-webkit-full-screen .lesson-equality-box > strong,
.lesson-visual-card.is-stage-fullscreen .lesson-equality-box > strong{
  font-size:clamp(22px, 2.2vw, 32px);
}

.lesson-visual-card:fullscreen .lesson-equality-box__content,
.lesson-visual-card:-webkit-full-screen .lesson-equality-box__content,
.lesson-visual-card.is-stage-fullscreen .lesson-equality-box__content{
  gap:16px;
}

.lesson-visual-card:fullscreen .lesson-equality-group,
.lesson-visual-card:fullscreen .lesson-equality-extra,
.lesson-visual-card:-webkit-full-screen .lesson-equality-group,
.lesson-visual-card:-webkit-full-screen .lesson-equality-extra,
.lesson-visual-card.is-stage-fullscreen .lesson-equality-group,
.lesson-visual-card.is-stage-fullscreen .lesson-equality-extra{
  min-width:clamp(130px, 11vw, 190px);
  min-height:clamp(130px, 11vw, 190px);
}

.lesson-visual-card:fullscreen .lesson-equality-group.is-unknown strong,
.lesson-visual-card:-webkit-full-screen .lesson-equality-group.is-unknown strong,
.lesson-visual-card.is-stage-fullscreen .lesson-equality-group.is-unknown strong{
  width:72px;
  height:72px;
  font-size:34px;
}

.lesson-visual-card:fullscreen .lesson-marble-row,
.lesson-visual-card:-webkit-full-screen .lesson-marble-row,
.lesson-visual-card.is-stage-fullscreen .lesson-marble-row{
  max-width:500px;
  gap:12px;
}

.lesson-visual-card:fullscreen .lesson-marble-row.is-large,
.lesson-visual-card:-webkit-full-screen .lesson-marble-row.is-large,
.lesson-visual-card.is-stage-fullscreen .lesson-marble-row.is-large{
  max-width:700px;
}

.lesson-visual-card:fullscreen .lesson-marble,
.lesson-visual-card:-webkit-full-screen .lesson-marble,
.lesson-visual-card.is-stage-fullscreen .lesson-marble{
  width:clamp(34px, 3vh, 48px);
  height:clamp(34px, 3vh, 48px);
  flex:0 0 clamp(34px, 3vh, 48px);
}

.lesson-visual-card:fullscreen .lesson-equality-group small,
.lesson-visual-card:fullscreen .lesson-equality-extra small,
.lesson-visual-card:fullscreen .lesson-equality-box__content > small,
.lesson-visual-card:-webkit-full-screen .lesson-equality-group small,
.lesson-visual-card:-webkit-full-screen .lesson-equality-extra small,
.lesson-visual-card:-webkit-full-screen .lesson-equality-box__content > small,
.lesson-visual-card.is-stage-fullscreen .lesson-equality-group small,
.lesson-visual-card.is-stage-fullscreen .lesson-equality-extra small,
.lesson-visual-card.is-stage-fullscreen .lesson-equality-box__content > small{
  font-size:18px;
}

.lesson-visual-card:fullscreen .lesson-equality-lab__step,
.lesson-visual-card:-webkit-full-screen .lesson-equality-lab__step,
.lesson-visual-card.is-stage-fullscreen .lesson-equality-lab__step{
  font-size:clamp(18px, 1.7vw, 24px);
}

.lesson-visual-card:fullscreen .lesson-geometry-switcher .geometry-angle-label,
.lesson-visual-card:-webkit-full-screen .lesson-geometry-switcher .geometry-angle-label,
.lesson-visual-card.is-stage-fullscreen .lesson-geometry-switcher .geometry-angle-label{
  font-size:34px;
}

.lesson-fraction-text{
  display:inline-grid;
  grid-template-rows:auto 2px auto;
  align-items:center;
  justify-items:center;
  min-width:24px;
  margin:0 2px;
  vertical-align:middle;
  font-weight:900;
  line-height:1;
}

.lesson-fraction-text__pay{
  color:#e83f94;
}

.lesson-fraction-text__bar{
  width:100%;
  min-width:22px;
  height:2px;
  border-radius:999px;
  background:#36273d;
}

.lesson-fraction-text__payda{
  color:#2563eb;
}

.lesson-color-pay{
  color:#e83f94;
  font-weight:900;
}

.lesson-color-payda{
  color:#2563eb;
  font-weight:900;
}

.lesson-fraction-model{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
}

.lesson-convert-arrow{
  color:#36273d;
  font-size:24px;
  font-weight:900;
}

.lesson-mini-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
}

.lesson-mini-circle{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:76px;
  min-height:76px;
  padding:4px;
  border:1px solid #f0d3e2;
  border-radius:10px;
  background:#fff;
}

.lesson-mini-circle svg{
  width:72px;
  height:72px;
}

.lesson-symbol-row{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(96px, 1fr));
  gap:8px;
  width:100%;
}

.lesson-number-chip-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  width:100%;
}

.lesson-number-chip{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:1px solid #f0d3e2;
  border-radius:8px;
  background:#fff8fc;
  color:var(--accent-strong);
  font-size:24px;
  font-weight:900;
}

.lesson-place-table{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap:8px;
  width:100%;
}

.lesson-place-cell{
  display:grid;
  align-content:start;
  justify-items:start;
  gap:5px;
  padding:10px;
  border:1px solid var(--place-color, #f0d3e2);
  border-radius:8px;
  background:#fff;
}

.lesson-place-cell strong{
  color:var(--place-color, var(--muted));
  font-size:12px;
}

.lesson-place-cell span{
  color:var(--text);
  font-size:18px;
  font-weight:900;
  line-height:1;
}

.lesson-place-cell em{
  color:var(--text);
  font-style:normal;
  font-weight:900;
}

.lesson-place-cell small{
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  line-height:1.35;
}

.lesson-place-scale-table{
  display:grid;
  gap:12px;
  width:100%;
}

.lesson-place-scale-table > p,
.lesson-place-scale-table > small{
  margin:0;
  color:var(--muted);
  font-weight:800;
  line-height:1.5;
  text-align:center;
}

.lesson-place-scale-table > p strong{
  color:var(--text);
}

.lesson-place-scale-table__scroll{
  width:100%;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scrollbar-gutter:stable;
}

.lesson-place-scale-table__rows{
  display:grid;
  gap:8px;
  min-width:760px;
  padding:8px;
  border:1px solid #f2c6dc;
  border-radius:10px;
  background:#fff;
}

.lesson-place-scale-table__row{
  position:relative;
  display:grid;
  grid-template-columns:112px repeat(11, minmax(50px, 1fr));
  align-items:start;
  min-height:64px;
}

.lesson-place-scale-table__row::after{
  content:"";
  position:absolute;
  left:137px;
  right:25px;
  top:17px;
  height:3px;
  border-radius:999px;
  background:var(--scale-color);
  opacity:.82;
}

.lesson-place-scale-table__row > strong{
  align-self:start;
  padding:7px 8px;
  border-radius:8px;
  background:color-mix(in srgb, var(--scale-color) 10%, #fff);
  color:var(--scale-color);
  font-size:13px;
  text-align:center;
}

.lesson-place-scale-table__row > span{
  position:relative;
  z-index:1;
  display:grid;
  justify-items:center;
  gap:5px;
  color:var(--scale-color);
  font-weight:900;
}

.lesson-place-scale-table__row > span i{
  display:block;
  width:3px;
  height:22px;
  border-radius:999px;
  background:currentColor;
}

.lesson-place-scale-table__row > span small{
  color:currentColor;
  font-size:11px;
  font-weight:900;
  font-variant-numeric:tabular-nums;
}

.lesson-expanded-number{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
}

.lesson-expanded-number span,
.lesson-expanded-number strong{
  padding:8px 10px;
  border:1px solid color-mix(in srgb, var(--place-color, #e83f94) 45%, #ffffff);
  border-radius:8px;
  background:#fff;
  color:var(--place-color, var(--text));
  font-weight:900;
}

.lesson-expanded-number strong{
  color:var(--text);
}

.lesson-number-line{
  position:relative;
  width:100%;
  min-height:112px;
  padding:48px 8px 10px;
}

.lesson-number-line__bar{
  position:absolute;
  left:8px;
  right:8px;
  top:48px;
  height:5px;
  border-radius:999px;
  background:#2563eb;
}

.lesson-number-line__tick{
  position:absolute;
  top:36px;
  transform:translateX(-50%);
  display:grid;
  justify-items:center;
  gap:8px;
  color:var(--text);
  font-size:12px;
  font-weight:900;
}

.lesson-number-line__tick i{
  display:block;
  width:3px;
  height:22px;
  border-radius:999px;
  background:#36273d;
}

.lesson-number-line__jump{
  position:absolute;
  left:10px;
  right:10px;
  top:72px;
  padding:8px 10px;
  border:1px dashed #f97316;
  border-radius:8px;
  background:#fff7ed;
  color:#9a3412;
  text-align:center;
  font-weight:900;
}

.lesson-live-number-line,
.lesson-place-demo,
.lesson-zero-demo{
  display:grid;
  gap:10px;
  width:100%;
}

.lesson-live-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
}

.lesson-live-status{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  color:var(--text);
  font-weight:900;
}

.lesson-live-status span{
  color:var(--muted);
}

.lesson-live-number-line__rows{
  display:grid;
  gap:4px;
  width:100%;
}

.lesson-live-number-line__row{
  display:grid;
  gap:6px;
}

.lesson-live-number-line__row > strong{
  color:var(--number-line-color, var(--accent-strong));
  font-size:13px;
}

.lesson-live-number-line__row.is-current > strong{
  color:#111827;
}

.lesson-live-number-line__track{
  position:relative;
  min-height:58px;
  border:1px solid #dbeafe;
  border-radius:8px;
  background:linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
  overflow:visible;
}

.lesson-live-number-line__track::before{
  content:"";
  position:absolute;
  left:48px;
  right:48px;
  top:24px;
  height:4px;
  border-radius:999px;
  background:var(--number-line-color, #2563eb);
}

.lesson-live-number-line__bridge{
  height:38px;
  margin:-2px 48px -2px;
  pointer-events:none;
}

.lesson-live-number-line__bridge svg{
  display:block;
  width:100%;
  height:38px;
  overflow:visible;
}

.lesson-live-number-line__bridge path{
  fill:none;
  stroke:var(--bridge-color, #f97316);
  vector-effect:non-scaling-stroke;
}

.lesson-live-number-line__bridge-edge{
  stroke-width:2.4;
}

.lesson-live-number-line__bridge-side{
  stroke-width:.55;
}

.lesson-live-number-line__marker{
  position:absolute;
  top:0;
  transform:translateX(-50%);
  color:#e83f94;
  font-size:18px;
  font-weight:900;
  z-index:2;
}

.lesson-live-number-line__marker[hidden]{
  display:none;
}

.lesson-live-number-line__value{
  position:absolute;
  top:30px;
  transform:translateX(-50%);
  padding:2px 4px;
  border:0;
  background:transparent;
  color:var(--text);
  font-size:11px;
  font-weight:900;
  cursor:default;
}

.lesson-live-number-line__value.is-edge-start{
  transform:translateX(0);
}

.lesson-live-number-line__value.is-edge-end{
  transform:translateX(-100%);
}

.lesson-live-number-line__value::before{
  content:"";
  position:absolute;
  left:50%;
  top:-18px;
  width:2px;
  height:17px;
  border-radius:999px;
  background:currentColor;
  transform:translateX(-50%);
  pointer-events:none;
}

.lesson-live-number-line__value.is-edge-start::before{
  left:0;
  transform:none;
}

.lesson-live-number-line__value.is-edge-end::before{
  left:100%;
  transform:none;
}

.lesson-live-number-line__value:not(button){
  pointer-events:none;
}

button.lesson-live-number-line__value{
  cursor:pointer;
}

button.lesson-live-number-line__value:hover{
  color:#e83f94;
}

.lesson-live-number-line p{
  margin:0;
  padding:8px 10px;
  border:1px dashed #f2c6dc;
  border-radius:8px;
  background:#fff;
  color:var(--muted);
  font-size:13px;
  font-weight:800;
  text-align:center;
}

.lesson-live-number-line__marker{
  display:grid;
  justify-items:center;
  gap:0;
  top:-6px;
}

.lesson-live-number-line__marker span{
  display:block;
  min-width:max-content;
  padding:2px 6px;
  border:1px solid #f2c6dc;
  border-radius:999px;
  background:#fff;
  box-shadow:0 2px 8px rgba(94, 35, 77, .12);
  color:#c2185b;
  font-size:11px;
  line-height:1.2;
}

.lesson-live-number-line__marker i{
  margin-top:-1px;
  color:#e83f94;
  font-size:16px;
  font-style:normal;
  line-height:.8;
}

.lesson-number-line-entry{
  display:grid;
  justify-items:center;
  gap:8px;
  padding:12px;
  border:1px solid #f2c6dc;
  border-radius:10px;
  background:#fff8fc;
}

.lesson-number-line-entry > strong{
  color:#c2185b;
  font-size:17px;
}

.lesson-number-line-entry > span{
  color:var(--muted);
  font-size:13px;
  font-weight:800;
  text-align:center;
}

.lesson-number-line-entry__strip{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:100%;
  min-width:0;
  padding:4px 0;
  overflow-x:auto;
}

.lesson-number-line-entry__digit{
  display:grid;
  place-items:center;
  width:clamp(34px, 8vw, 46px);
  min-width:34px;
  height:46px;
  padding:0;
  border:1px solid #f2c6dc;
  border-radius:10px;
  appearance:none;
  background:#fff;
  color:#7f7189;
  font:900 24px/1 var(--font-main);
  text-align:center;
  font-variant-numeric:tabular-nums;
  cursor:pointer;
  touch-action:manipulation;
}

.lesson-number-line-entry__digit:hover{
  border-color:#e83f94;
  color:#c2185b;
}

.lesson-number-line-entry__digit.is-selected{
  border-color:#e83f94;
  background:#e83f94;
  box-shadow:0 3px 10px rgba(232, 63, 148, .24);
  color:#fff;
}

.lesson-number-line-entry__digit:focus-visible{
  outline:3px solid rgba(232, 63, 148, .25);
  outline-offset:2px;
}

.lesson-number-line-entry__comma{
  flex:0 0 auto;
  color:#c2185b;
  font-size:28px;
  font-weight:900;
  line-height:1;
}

.lesson-number-line-entry__value{
  color:#c2185b;
  font-size:16px;
  font-weight:900;
  text-align:center;
  font-variant-numeric:tabular-nums;
}

.lesson-number-line-entry__controls{
  justify-content:center;
}

.lesson-number-line-entry [data-number-line-digit-move]:disabled,
.lesson-number-line-entry [data-number-line-digit-change]:disabled,
.lesson-number-line-entry [data-number-line-comma-move]:disabled{
  cursor:not-allowed;
  opacity:.45;
}

.lesson-place-demo__number{
  color:var(--text);
  font-size:34px;
  font-weight:900;
  text-align:center;
  font-variant-numeric:tabular-nums;
}

.lesson-place-demo__reading{
  color:var(--muted);
  font-weight:900;
  text-align:center;
}

.lesson-place-demo__grid{
  width:100%;
  min-width:0;
  overflow-x:auto;
}

.lesson-place-diagram{
  display:block;
  width:100%;
  min-width:830px;
  margin-inline:auto;
  height:auto;
}

.lesson-zero-demo__equation{
  display:grid;
  place-items:center;
  min-height:62px;
  border:1px solid #f2c6dc;
  border-radius:8px;
  background:#fff;
  color:#e83f94;
  font-size:34px;
  font-weight:900;
  font-variant-numeric:tabular-nums;
}

.lesson-zero-demo__strip{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  flex-wrap:wrap;
  padding:10px;
  border:1px solid #f2c6dc;
  border-radius:8px;
  background:#fff8fc;
}

.lesson-visual-card:fullscreen .lesson-zero-demo{
  align-self:flex-start;
  min-width:1000px;
  margin-left:0;
  margin-right:auto;
}

.lesson-visual-card:fullscreen .lesson-zero-demo__strip{
  flex-wrap:nowrap;
  justify-content:flex-start;
  overflow-x:auto;
}

.lesson-zero-demo__digit{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border:1px solid #f2c6dc;
  border-radius:10px;
  background:#fff;
  color:#7f7189;
  font-size:24px;
  font-weight:900;
  cursor:pointer;
}

.lesson-zero-demo__ghost{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border:1px solid #f2c6dc;
  border-radius:10px;
  background:#fff;
  color:#9a8ca2;
  font-size:24px;
  font-weight:900;
  opacity:.62;
}

.lesson-zero-demo__dots{
  color:#7f7189;
  font-size:26px;
  font-weight:900;
}

.lesson-zero-demo__digit.is-selected{
  border-color:#e83f94;
  background:#e83f94;
  color:#fff;
}

.lesson-zero-demo__comma{
  color:#7f7189;
  font-size:26px;
  font-weight:900;
}

.lesson-zero-demo__diagram{
  width:100%;
  overflow-x:auto;
}

.lesson-zero-demo p{
  margin:0;
  padding:8px 10px;
  border:1px dashed #f2c6dc;
  border-radius:8px;
  background:#fff;
  color:var(--text);
  font-weight:900;
  text-align:center;
}

.lesson-zero-equalities{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  width:100%;
}

.lesson-zero-equality{
  display:grid;
  align-content:start;
  gap:8px;
  min-height:132px;
  padding:14px;
  border:2px solid var(--zero-card-color);
  border-radius:10px;
  background:color-mix(in srgb, var(--zero-card-color) 7%, #fff);
}

.lesson-zero-equality.is-equal{
  --zero-card-color:#0f9f8f;
}

.lesson-zero-equality.is-different{
  --zero-card-color:#f97316;
}

.lesson-zero-equality strong{
  color:var(--zero-card-color);
  font-size:23px;
  font-variant-numeric:tabular-nums;
}

.lesson-zero-equality span{
  color:var(--text);
  font-weight:800;
  line-height:1.5;
}

@media (max-width:720px){
  .lesson-zero-equalities{
    grid-template-columns:1fr;
  }
}

.lesson-decimal-model{
  display:grid;
  gap:10px;
  width:100%;
}

.lesson-decimal-model__value{
  display:grid;
  justify-items:center;
  gap:3px;
}

.lesson-decimal-model__value strong{
  color:#e83f94;
  font-size:28px;
}

.lesson-decimal-model__value span{
  color:var(--muted);
  font-weight:900;
}

.lesson-decimal-model__visual{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:112px;
}

.lesson-decimal-model p{
  margin:0;
  padding:8px 10px;
  border:1px dashed #f97316;
  border-radius:8px;
  background:#fff7ed;
  color:#9a3412;
  font-weight:900;
  text-align:center;
}

.lesson-decimal-grid{
  display:grid;
  gap:2px;
  padding:6px;
  border:2px solid #7c2d12;
  border-radius:10px;
  background:#fff7ed;
}

.lesson-decimal-grid--10{
  grid-template-columns:repeat(10, 18px);
}

.lesson-decimal-grid--100{
  grid-template-columns:repeat(10, 9px);
}

.lesson-decimal-grid span{
  display:block;
  width:100%;
  aspect-ratio:1;
  border-radius:2px;
  background:#ffedd5;
}

.lesson-decimal-grid span.is-filled{
  background:#f97316;
}

.lesson-pasta{
  position:relative;
  display:grid;
  place-items:center;
  width:88px;
  height:88px;
  border:2px solid #7c2d12;
  border-radius:50%;
  background:#f97316;
  overflow:hidden;
}

.lesson-pasta span,
.lesson-pasta i{
  display:block;
}

.lesson-pasta--whole span{
  color:#fff;
  font-size:13px;
  font-weight:900;
  text-shadow:0 1px 2px rgba(0,0,0,.25);
}

.lesson-pasta--tenths{
  grid-template-columns:repeat(5, 1fr);
  grid-template-rows:repeat(2, 1fr);
  gap:1px;
  padding:6px;
  border-radius:18px;
  background:#7c2d12;
}

.lesson-pasta--tenths span,
.lesson-pasta--tenths i{
  width:100%;
  height:100%;
  border-radius:5px;
}

.lesson-pasta--tenths span{
  background:#f97316;
}

.lesson-pasta--tenths i{
  background:#ffedd5;
}

.lesson-symbol-chip{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:center;
  justify-content:center;
  min-width:0;
  min-height:76px;
  padding:8px 10px;
  border:1px solid #f0d3e2;
  border-radius:10px;
  background:#fff8fc;
  text-align:center;
}

.lesson-symbol-chip__mark{
  font-size:28px;
  font-weight:800;
  color:var(--accent-strong);
  line-height:1;
}

.lesson-symbol-chip__label{
  font-size:13px;
  color:var(--muted);
  font-weight:700;
}

.lesson-shell__head{
  width:100%;
}

@media (max-width:920px){
  .lesson-topic-row{
    grid-template-columns:88px 1fr;
    align-items:start;
  }

  .lesson-topic-row__meta{
    grid-column:2;
    white-space:normal;
  }

  .lesson-fraction-sampler__body{
    grid-template-columns:1fr;
  }

  .lesson-large-number-lab__result,
  .lesson-number-compare,
  .lesson-worked-problem__map,
  .lesson-operation-quiz-grid,
  .lesson-fraction-representation-lab__stage,
  .lesson-fraction-model-guide,
  .lesson-fraction-life-cards{
    grid-template-columns:1fr;
  }

  .lesson-reading-route,
  .lesson-problem-route{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:620px){
  .lesson-reading-route,
  .lesson-problem-route,
  .lesson-worked-problem__steps,
  .lesson-check-triangle,
  .lesson-equivalent-fraction-lab__strips,
  .lesson-equivalent-fraction-lab__cakes,
  .lesson-unit-fraction-builder__steps,
  .lesson-fraction-compare-grid{
    grid-template-columns:1fr;
  }

  .lesson-fraction-representation-lab__values{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .lesson-group-rhythm__number span{
    min-height:54px;
    font-size:20px;
  }

  .lesson-group-rhythm__labels span{
    font-size:10px;
  }
}

@media (max-width:1024px), (pointer:coarse){
  .bdk2-teacher-band,
  .bdk2-teacher-widget,
  .bdk2-teacher-restore{
    display:none !important;
  }
}

.lesson-practice-card p{
  margin:0;
}

.lesson-legacy-topic{
  display:grid;
  gap:18px;
  color:var(--text);
}

.lesson-legacy-topic .wrap{
  width:100%;
  margin:0;
  padding:0;
  display:grid;
  gap:18px;
}

.lesson-legacy-topic .hero,
.lesson-legacy-topic .section,
.lesson-legacy-topic .card,
.lesson-legacy-topic .note-card,
.lesson-legacy-topic .mini-card,
.lesson-legacy-topic .formula-box,
.lesson-legacy-topic .example-box,
.lesson-legacy-topic .note-box,
.lesson-legacy-topic .practice-box,
.lesson-legacy-topic .practice-card,
.lesson-legacy-topic .table-wrap,
.lesson-legacy-topic .summary-strip,
.lesson-legacy-topic .visual-box,
.lesson-legacy-topic .line-card{
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  box-shadow:none;
}

.lesson-legacy-topic .hero,
.lesson-legacy-topic .section,
.lesson-legacy-topic .card{
  padding:18px;
  margin:0;
}

.lesson-legacy-topic .section{
  overflow:hidden;
}

.lesson-legacy-topic .section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding:0;
  cursor:pointer;
}

.lesson-legacy-topic .section-body{
  display:grid;
  gap:16px;
  padding:16px 0 0;
}

.lesson-legacy-topic .section.is-collapsed .section-body{
  display:none;
}

.lesson-legacy-topic .section-title,
.lesson-legacy-topic .note-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.lesson-legacy-topic .section-no{
  color:var(--accent-strong);
  font-weight:900;
  font-size:22px;
  line-height:1.1;
}

.lesson-legacy-topic .eyebrow,
.lesson-legacy-topic .pill,
.lesson-legacy-topic .tag{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  padding:5px 9px;
  border-radius:9px;
  background:#fff0f7;
  color:var(--accent-strong);
  font-size:12px;
  font-weight:800;
}

.lesson-legacy-topic h1,
.lesson-legacy-topic h2,
.lesson-legacy-topic h3,
.lesson-legacy-topic p,
.lesson-legacy-topic ul,
.lesson-legacy-topic ol{
  margin:0;
}

.lesson-legacy-topic h1{
  margin-top:8px;
  font-size:clamp(26px, 4vw, 38px);
  line-height:1.1;
}

.lesson-legacy-topic h2{
  font-size:24px;
}

.lesson-legacy-topic h3{
  font-size:18px;
}

.lesson-legacy-topic .lead,
.lesson-legacy-topic .empty-text,
.lesson-legacy-topic .note-text,
.lesson-legacy-topic .example-tr,
.lesson-legacy-topic .sub,
.lesson-legacy-topic .tag-tr{
  color:var(--muted);
}

.lesson-legacy-topic p{
  line-height:1.65;
}

.lesson-legacy-topic .hero-grid,
.lesson-legacy-topic .grid-2,
.lesson-legacy-topic .grid-3,
.lesson-legacy-topic .note-grid,
.lesson-legacy-topic .group-list{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap:16px;
}

.lesson-legacy-topic .mini-card,
.lesson-legacy-topic .formula-box,
.lesson-legacy-topic .example-box,
.lesson-legacy-topic .note-box,
.lesson-legacy-topic .practice-box,
.lesson-legacy-topic .practice-card,
.lesson-legacy-topic .table-wrap,
.lesson-legacy-topic .summary-strip,
.lesson-legacy-topic .visual-box,
.lesson-legacy-topic .line-card,
.lesson-legacy-topic .note-card{
  padding:14px;
}

.lesson-legacy-topic .example-card,
.lesson-legacy-topic .example-box,
.lesson-legacy-topic .tag-stack,
.lesson-legacy-topic .note-box{
  display:grid;
  gap:10px;
}

.lesson-legacy-topic .example-card{
  padding:14px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
}

.lesson-legacy-topic table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  background:#fff;
}

.lesson-legacy-topic th,
.lesson-legacy-topic td{
  border:1px solid var(--line);
  padding:8px;
  text-align:left;
  vertical-align:top;
}

.lesson-legacy-topic th{
  background:#fff7fb;
}

.lesson-legacy-topic svg{
  display:block;
  width:100%;
  height:auto;
  max-height:min(72vh, 720px);
}

.lesson-legacy-topic .visual-box,
.lesson-legacy-topic .table-wrap{
  overflow:auto;
}

.lesson-legacy-topic .visual-box svg{
  min-width:min(100%, 760px);
}

.lesson-legacy-topic .focus-layout{
  display:grid;
  grid-template-columns:minmax(0, 1.1fr) minmax(260px, .9fr);
  gap:16px;
  align-items:start;
}

.lesson-legacy-topic .focus-panel,
.lesson-legacy-topic .note-grid,
.lesson-legacy-topic .table-like,
.lesson-legacy-topic .timeline-board{
  display:grid;
  gap:12px;
}

.lesson-legacy-topic .summary-row,
.lesson-legacy-topic .practice-grid,
.lesson-legacy-topic .compare-grid,
.lesson-legacy-topic .timeline-strip,
.lesson-legacy-topic .sequence-row{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap:10px;
}

.lesson-legacy-topic .summary-chip,
.lesson-legacy-topic .tip-card,
.lesson-legacy-topic .lesson-message-card,
.lesson-legacy-topic .timeline-card,
.lesson-legacy-topic .compare-card,
.lesson-legacy-topic .table-row,
.lesson-legacy-topic .sequence-pill{
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  padding:12px;
}

.lesson-legacy-topic .tip-card{
  display:flex;
  align-items:flex-start;
  gap:10px;
}

.lesson-legacy-topic .tip-icon,
.lesson-legacy-topic .card-no{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:50%;
  border:1px solid var(--line);
  background:#fff7fb;
  color:var(--accent-strong);
  font-weight:900;
  flex:0 0 auto;
}

.lesson-legacy-topic .focus-card,
.lesson-legacy-topic .timeline-card{
  width:100%;
  text-align:left;
  color:inherit;
  cursor:pointer;
}

.lesson-legacy-topic .timeline-card{
  text-align:center;
}

.lesson-legacy-topic .focus-card .card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.lesson-legacy-topic .focus-card b,
.lesson-legacy-topic .timeline-card b,
.lesson-legacy-topic .summary-chip b{
  display:block;
}

.lesson-legacy-topic .small-note,
.lesson-legacy-topic .focus-card p,
.lesson-legacy-topic .focus-card small,
.lesson-legacy-topic .timeline-card p,
.lesson-legacy-topic .summary-chip span,
.lesson-legacy-topic .table-row span{
  color:var(--muted);
}

.lesson-legacy-topic .focusable{
  cursor:pointer;
  transition:opacity .18s ease, filter .18s ease;
}

.lesson-legacy-topic .focusable .focus-base,
.lesson-legacy-topic .focusable .focus-stroke,
.lesson-legacy-topic .focusable .focus-badge{
  transition:stroke .18s ease, stroke-width .18s ease, transform .18s ease, opacity .18s ease;
  transform-box:fill-box;
  transform-origin:center;
}

.lesson-legacy-topic .focusable.is-dim,
.lesson-legacy-topic .focus-card.is-dim,
.lesson-legacy-topic .timeline-card.is-dim{
  opacity:.28;
  filter:grayscale(1) saturate(.12);
}

.lesson-legacy-topic .focusable.is-active,
.lesson-legacy-topic .focus-card.is-active,
.lesson-legacy-topic .timeline-card.is-active{
  opacity:1;
  filter:drop-shadow(0 10px 18px rgba(216, 27, 96, .18));
}

.lesson-legacy-topic .focusable.is-active .focus-base{
  stroke:var(--accent-strong) !important;
  stroke-width:5 !important;
}

.lesson-legacy-topic .focusable.is-active .focus-badge{
  transform:scale(1.04);
}

.lesson-legacy-topic .soft-dim{
  transition:opacity .18s ease, filter .18s ease;
}

.lesson-legacy-topic svg.has-focus .soft-dim{
  opacity:.25;
  filter:grayscale(1) saturate(.12);
}

.lesson-legacy-topic .marker-dot{
  fill:#fff;
  stroke:#cbd5e1;
  stroke-width:2;
}

.lesson-legacy-topic .marker-text{
  font-size:13px;
  font-weight:800;
  fill:#1f2d3d;
  dominant-baseline:middle;
  text-anchor:middle;
}

.lesson-legacy-topic .callout-box{
  fill:#fff;
  stroke:#cfe0f2;
  stroke-width:2;
}

.lesson-legacy-topic .callout-title{
  font-size:15px;
  font-weight:700;
  fill:#223247;
}

.lesson-legacy-topic .callout-sub{
  font-size:12px;
  fill:#64748b;
}

.lesson-legacy-topic .callout-line{
  stroke:#94a3b8;
  stroke-width:2.5;
  stroke-linecap:round;
  fill:none;
}

.lesson-legacy-topic .table-row{
  grid-template-columns:minmax(120px, 190px) minmax(0, 1fr);
  align-items:start;
}

.lesson-legacy-topic .lesson-message-card{
  display:block;
  container-type:inline-size;
  min-height:86px;
}

.lesson-legacy-topic .lesson-message-card--attention{
  border-color:#f7a8c4;
  background:linear-gradient(180deg, #fff8fb 0%, #fff 100%);
}

.lesson-legacy-topic .lesson-message-card--tip{
  border-color:#b9ddff;
  background:linear-gradient(180deg, #f7fbff 0%, #fff 100%);
}

.lesson-legacy-topic .lesson-message-card--summary,
.lesson-legacy-topic .lesson-message-card--info{
  border-color:#a7e6dd;
  background:linear-gradient(180deg, #f2fffc 0%, #fff 100%);
}

.lesson-legacy-topic .lesson-message-card__head{
  display:grid;
  float:left;
  grid-template-columns:auto auto;
  grid-template-areas:
    "icon label"
    "character character";
  align-items:center;
  justify-content:start;
  justify-items:start;
  gap:6px 8px;
  min-width:0;
  max-width:150px;
  margin:0 14px 6px 0;
}

.lesson-legacy-topic .lesson-message-card__character{
  grid-area:character;
  width:70px;
  height:70px;
  object-fit:contain;
}

.lesson-legacy-topic .lesson-message-card__icon{
  grid-area:icon;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:50%;
  background:#fff0f6;
  border:1px solid #f59abc;
  color:var(--accent-strong);
  font-weight:900;
  font-size:20px;
}

.lesson-legacy-topic .lesson-message-card--tip .lesson-message-card__icon{
  background:#eef7ff;
  border-color:#9fd0ff;
  color:#0b6fb8;
}

.lesson-legacy-topic .lesson-message-card--summary .lesson-message-card__icon,
.lesson-legacy-topic .lesson-message-card--info .lesson-message-card__icon{
  background:#eafffb;
  border-color:#7dd3c7;
  color:#0f766e;
}

.lesson-legacy-topic .lesson-message-card__head strong{
  grid-area:label;
  color:var(--accent-strong);
  font-size:18px;
  letter-spacing:0;
}

.lesson-legacy-topic .lesson-message-card--tip .lesson-message-card__head strong{
  color:#0b6fb8;
}

.lesson-legacy-topic .lesson-message-card--summary .lesson-message-card__head strong,
.lesson-legacy-topic .lesson-message-card--info .lesson-message-card__head strong{
  color:#0f766e;
}

.lesson-legacy-topic .lesson-message-card__body{
  display:block;
  min-width:0;
}

.lesson-legacy-topic .lesson-message-card__body p{
  margin-top:0;
}

@container (max-width: 430px){
  .lesson-legacy-topic .lesson-message-card__head{
    float:none;
    max-width:none;
    margin:0 0 8px;
  }
}

.lesson-legacy-topic .example-en{
  font-size:22px;
  font-weight:900;
  line-height:1.2;
}

.lesson-legacy-topic .formula{
  font-weight:900;
}

.lesson-legacy-topic .tense-keyword,
.lesson-legacy-topic .tense-subject,
.lesson-legacy-topic .tense-suffix{
  display:inline;
  padding:0 2px;
  border-radius:5px;
  font-weight:950;
}

.lesson-legacy-topic .tense-keyword{
  background:#e6f4ff;
  color:#0369a1;
}

.lesson-legacy-topic .tense-subject{
  background:#fff3c4;
  color:#92400e;
}

.lesson-legacy-topic .tense-suffix{
  background:#eaf8e7;
  color:#15803d;
}

.lesson-legacy-topic .toggle-btn,
.lesson-legacy-topic .nav-btn,
.lesson-legacy-topic .action-btn,
.lesson-legacy-topic .gk-answer-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff8fc;
  color:var(--accent-strong);
  font:inherit;
  font-size:13px;
  font-weight:800;
  text-decoration:none;
  cursor:pointer;
}

.lesson-legacy-topic .footer-nav,
.lesson-legacy-topic .tag-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.lesson-legacy-topic .gk-answer-content.is-hidden{
  display:none;
}

.lesson-legacy-topic .practice-card .answer,
.lesson-legacy-topic .practice-box .answer{
  display:none;
  margin-top:8px;
  padding:8px;
  border:1px dashed var(--line-strong);
  border-radius:9px;
  background:#fff8fc;
}

.lesson-legacy-topic .practice-card .answer.is-visible,
.lesson-legacy-topic .practice-box .answer.is-visible{
  display:block;
}

.lesson-legacy-topic .gk-answer-content{
  margin-top:8px;
  padding:8px;
  border:1px dashed var(--line-strong);
  border-radius:9px;
  background:#fff8fc;
}

.lesson-legacy-topic .lesson-video-callout{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  align-items:center;
  gap:12px;
  margin-top:16px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
}

.lesson-legacy-topic .lesson-video-callout__avatar{
  width:104px;
  height:104px;
  object-fit:contain;
}

.lesson-legacy-topic .lesson-video-callout__bubble{
  position:relative;
  display:grid;
  gap:8px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff8fc;
}

.lesson-legacy-topic .lesson-video-callout__bubble::before{
  content:"";
  position:absolute;
  left:-10px;
  top:32px;
  width:18px;
  height:18px;
  border-left:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#fff8fc;
  transform:rotate(45deg);
}

.lesson-legacy-topic .lesson-video-callout__actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
}

.lesson-legacy-topic .lesson-video-callout__button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff8fc;
  box-shadow:0 8px 18px rgba(132, 38, 87, .10);
}

.lesson-legacy-topic .lesson-video-callout__button img{
  width:22px;
  height:22px;
}

.lesson-video-modal{
  display:grid;
  gap:10px;
}

.lesson-video-modal__frame{
  position:relative;
  aspect-ratio:16 / 9;
  min-height:220px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:10px;
  background:#130918;
}

.lesson-video-modal__frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

.lesson-video-modal__fallback{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff8fc;
}

.lesson-video-modal__buttons{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.lesson-video-modal__button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
  color:var(--text);
  font:inherit;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
}

.lesson-video-modal__button.is-active{
  background:#fff0f7;
  color:var(--accent-strong);
  border-color:var(--accent-soft);
}

.lesson-video-modal__fallback p{
  margin:0;
  color:var(--muted);
}

.lesson-video-modal__fallback .button-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
  color:var(--accent-strong);
  font-weight:800;
  text-decoration:none;
}

.site-modal[data-modal-size="video"] .site-modal__dialog{
  width:min(100%, 980px);
}

@media (max-width:720px){
  .lesson-legacy-topic .lesson-video-callout{
    grid-template-columns:1fr;
  }

  .lesson-legacy-topic .lesson-video-callout__bubble::before{
    display:none;
  }

  .lesson-legacy-topic .lesson-video-callout__actions{
    justify-content:flex-start;
  }

  .lesson-legacy-topic .lesson-video-callout__button{
    justify-self:start;
  }

  .lesson-video-modal__fallback{
    align-items:flex-start;
    flex-direction:column;
  }
}

@keyframes timerAlertBlink{
  0%, 100%{
    background:#ff6b6b;
    border-color:#ff6b6b;
    box-shadow:0 0 0 0 rgba(255,107,107,.24);
  }
  50%{
    background:#5b8cff;
    border-color:#5b8cff;
    box-shadow:0 0 0 6px rgba(91,140,255,.12);
  }
}

.tool-stage-panel--compact{
  width:auto;
}

.hub-stage-panel__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.social-chat-emoji-button{
  min-width:36px;
  padding:0 9px;
}

.emoji-picker__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(44px, 44px));
  gap:8px;
  justify-content:start;
}

.emoji-picker__button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff8fc;
  font-size:24px;
  cursor:pointer;
}

.emoji-picker__button:hover{
  border-color:var(--line-strong);
  background:#fff1f8;
}

@keyframes socialPulse{
  0%, 100%{
    box-shadow:0 0 0 0 rgba(232,63,148,.08);
    transform:translateY(0);
  }
  50%{
    box-shadow:0 0 0 6px rgba(232,63,148,.10);
    transform:translateY(-1px);
  }
}

.table-pagination{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.table-pagination__group{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}

.table-pagination__status{
  color:var(--muted);
  font-size:13px;
}

.table-pagination__actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.table-page-size{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:44px;
  color:var(--muted);
  font-size:13px;
  font-weight:800;
}

.table-page-size select{
  min-width:86px;
  height:44px;
  padding:0 10px;
  border-radius:9px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  font:inherit;
}

.table-page-numbers{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}

.table-page-number{
  min-width:44px;
  min-height:44px;
  padding:0 10px;
  border-radius:9px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--accent-strong);
  font-size:13px;
  font-weight:800;
  cursor:pointer;
}

.table-page-number.is-active{
  background:#fff0f7;
  border-color:var(--line-strong);
}

.icon-button.icon-button--tiny{
  width:44px;
  min-width:44px;
  min-height:44px;
  height:44px;
  border-radius:9px;
}

.column-picker{
  display:grid;
  gap:8px;
}

.column-picker__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:8px;
}

.column-picker__item{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff8fc;
}

.column-picker__item input{
  width:16px;
  height:16px;
}

.modal-page{
  display:grid;
  gap:10px;
}

.modal-action-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.modal-action-row__group{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.modal-page__meta{
  display:grid;
  gap:4px;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff9fc;
}

.modal-page__meta strong{
  font-size:15px;
}

.field input[disabled],
.field textarea[disabled],
.field select[disabled]{
  color:var(--muted);
  background:#fff7fb;
  cursor:default;
}

.choice-group{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
  padding:0;
  border:0;
}

.choice-group legend{
  width:100%;
  margin:0 0 2px;
  padding:0;
  font-size:13px;
  font-weight:800;
  color:var(--text);
}

.choice-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff8fc;
  color:var(--text);
  font-size:14px;
  font-weight:700;
}

.choice-chip input{
  width:16px;
  height:16px;
  margin:0;
}

.site-modal{
  position:fixed;
  inset:0;
  z-index:1200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}

.site-modal[hidden]{
  display:none !important;
}

.site-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(73, 26, 52, .20);
  backdrop-filter:blur(3px);
}

.site-modal__dialog{
  position:relative;
  z-index:1;
  width:min(100%, 720px);
  max-height:min(calc(var(--bdk-visual-viewport-height, 100vh) - 36px), 860px);
  overflow:hidden;
  padding:12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fffdfd;
  box-shadow:0 28px 64px rgba(132, 38, 87, .18);
  display:grid;
  grid-template-rows:auto minmax(0, 1fr);
  gap:10px;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

.app-shell:fullscreen .site-modal,
.app-shell:-webkit-full-screen .site-modal,
.app-shell.is-site-fullscreen .site-modal,
:fullscreen .site-modal,
:-webkit-full-screen .site-modal,
.site-modal.is-fullscreen-hosted{
  height:var(--bdk-visual-viewport-height, 100dvh);
  max-height:var(--bdk-visual-viewport-height, 100dvh);
  z-index:2147483647;
}

.view-panel,
.site-modal__dialog,
.social-chat-main,
.social-chat-messages{
  scroll-padding-bottom:calc(var(--bdk-keyboard-inset, 0px) + 20px);
}

textarea,
input,
[contenteditable="true"]{
  scroll-margin-top:20px;
  scroll-margin-bottom:calc(var(--bdk-keyboard-inset, 0px) + 24px);
}

body.has-virtual-keyboard .site-footer{
  display:none;
}

body.has-virtual-keyboard .social-chat-panel{
  max-height:calc(var(--bdk-visual-viewport-height, 100vh) - 118px);
}

body.has-virtual-keyboard .social-chat-shell{
  height:max(260px, calc(var(--bdk-visual-viewport-height, 100vh) - 156px));
  max-height:calc(var(--bdk-visual-viewport-height, 100vh) - 156px);
}

body.has-virtual-keyboard .social-chat-compose{
  padding:6px 8px;
}

body.has-virtual-keyboard .social-chat-compose textarea{
  min-height:64px;
  max-height:96px;
}

.site-modal[data-modal-size="cartoon"] .site-modal__dialog{
  width:min(100%, 1520px);
  height:calc(var(--bdk-visual-viewport-height, 100dvh) - 36px);
  max-height:1080px;
}

.site-modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.site-modal__title{
  margin:0;
  font-size:22px;
  line-height:1.1;
}

.site-modal__body{
  display:grid;
  gap:10px;
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

.site-modal[data-modal-size="cartoon"] .site-modal__body{
  overflow:hidden;
}

.cartoon-modal{
  display:grid;
  grid-template-rows:minmax(0, 1fr) auto;
  gap:10px;
  height:100%;
  min-height:0;
}

.cartoon-modal__media{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  min-height:0;
  overflow:hidden;
}

.cartoon-modal__image{
  display:block;
  width:auto;
  max-width:100%;
  height:auto;
  max-height:100%;
  object-fit:contain;
  border:1px solid rgba(215, 140, 178, .45);
  border-radius:8px;
  background:#fff;
}

.cartoon-modal__controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}

.cartoon-modal__nav{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fffdfd;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(232, 63, 148, .16);
}

.cartoon-modal__nav:disabled{
  opacity:.45;
}

.cartoon-modal__meta{
  min-width:70px;
  text-align:center;
  font-size:13px;
  color:var(--muted);
}

.confirm-box{
  display:grid;
  gap:14px;
}

.confirm-box__message{
  display:grid;
  gap:8px;
  color:var(--text);
}

.confirm-box__message p{
  margin:0;
  font-size:15px;
  line-height:1.55;
}

.confirm-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}

.site-modal__close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  padding:0;
  border-radius:9px;
  border:1px solid var(--line);
  background:#fff4fa;
  color:var(--accent-strong);
  cursor:pointer;
}

.site-modal__close svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

body.has-site-modal{
  overflow:hidden;
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  border:0;
}

@media (max-width:1080px){
  .workspace{
    grid-template-columns:var(--sidebar-width) 1fr;
  }

  .hero-card,
  .metric-grid,
  .card-grid,
  .auth-shell-grid{
    grid-template-columns:1fr;
  }

  .card-grid--fit,
  .quick-metrics--fit{
    width:100%;
  }

  .lesson-grade-grid,
  .lesson-card-grid{
    grid-template-columns:repeat(auto-fit, minmax(220px, 240px));
    justify-content:start;
  }
}

@media (max-width:760px){
  .app-shell{
    grid-template-rows:auto 1fr auto;
  }

  .mobile-menu-toggle{
    display:inline-flex;
  }

  .workspace,
  .app-shell.is-sidebar-collapsed .workspace{
    grid-template-columns:1fr;
  }

  .sidebar,
  .view-frame{
    grid-column:1;
  }

  .sidebar{
    position:fixed;
    inset:0;
    z-index:1100;
    height:100vh;
    width:100vw;
    padding:16px;
    border:0;
    border-radius:0;
    transform:translateX(-100%);
    transition:transform .18s ease;
  }

  .app-shell.is-mobile-menu-open .sidebar{
    transform:translateX(0);
  }

  body.has-mobile-menu{
    overflow:hidden;
  }

  .app-shell.is-sidebar-collapsed .sidebar{
    padding:16px;
  }

  .app-shell.is-sidebar-collapsed .menu-link,
  .menu-link{
    grid-template-columns:24px minmax(0, 1fr);
    justify-items:start;
    min-height:48px;
    padding:10px 12px;
    border-radius:10px;
  }

  .app-shell.is-sidebar-collapsed .menu-copy{
    display:grid;
  }

  .menu-icon{
    width:22px;
    height:22px;
  }

  .sidebar-toggle{
    justify-content:center;
    min-height:44px;
  }
}

@media (max-width:720px){
  .topbar,
  .workspace{
    padding:8px;
  }

  .view-panel{
    padding:8px;
  }

  .view-toolbar,
  .topbar{
    flex-direction:column;
    align-items:stretch;
  }

  .topbar-actions{
    justify-content:stretch;
  }

  .topbar-actions > *{
    flex:1 1 auto;
  }

  .topbar-actions .mobile-menu-toggle,
  .topbar-actions .icon-button{
    flex:0 0 44px;
  }

  .icon-button{
    width:44px;
  }

  .field-grid.two-col,
  .quick-metrics,
  .column-picker__grid{
    grid-template-columns:1fr;
  }

  .table-toolbar{
    align-items:stretch;
  }

  .table-toolbar__group{
    width:100%;
  }

  .table-toolbar .field{
    flex:1 1 100%;
    min-width:0;
  }

  .social-chat-shell{
    grid-template-columns:1fr;
    width:100%;
    height:auto;
    max-height:none;
  }

  .game-hub-grid,
  .app-hub-grid,
  .tool-stage-panel,
  .tool-stage-body,
  .tool-stage-frame{
    width:100%;
  }

  .tool-stage-body{
    min-height:440px;
  }

  .tool-stage-frame{
    min-height:560px;
    height:min(74vh, 840px);
  }

  .social-chat-sidebar,
  .social-chat-main{
    width:100%;
  }

  .social-chat-sidebar{
    max-height:min(32vh, 240px);
  }

  .social-chat-main{
    min-height:460px;
  }

  body.has-virtual-keyboard .social-chat-sidebar{
    display:none;
  }

  body.has-virtual-keyboard .social-chat-shell{
    height:max(260px, calc(var(--bdk-visual-viewport-height, 100vh) - 150px));
    max-height:calc(var(--bdk-visual-viewport-height, 100vh) - 150px);
  }

  body.has-virtual-keyboard .social-chat-main{
    height:100%;
    min-height:0;
  }

  .site-modal{
    padding:10px;
    align-items:flex-end;
  }

  .site-modal__dialog{
    width:100%;
    max-height:min(calc(var(--bdk-visual-viewport-height, 100vh) - 20px), 860px);
  }

  .site-modal[data-modal-size="cartoon"] .site-modal__dialog{
    height:calc(var(--bdk-visual-viewport-height, 100dvh) - 20px);
    max-height:none;
  }

  .modal-action-row{
    align-items:stretch;
  }

  .modal-action-row__group{
    width:100%;
  }

  .modal-action-row__group > *{
    flex:1 1 auto;
  }
}
/* 5. sınıf kesir modelleri ve gerçek yaşam karşılaştırmaları */
.lesson-context-grid,
.lesson-unit-price-lab__cards,
.lesson-model-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.lesson-context-grid article,
.lesson-unit-price-lab,
.lesson-unit-price-lab__cards article,
.lesson-model-comparison article,
.lesson-fraction-number-line-lab,
.lesson-fraction-strips,
.lesson-hundred-chart {
  border: 1px solid var(--border-color, #efb7cf);
  border-radius: 16px;
  background: #fffafd;
  padding: 16px;
}

.lesson-context-grid article span,
.lesson-unit-price-lab__cards span,
.lesson-model-comparison small {
  display: block;
  color: var(--muted-text, #80556a);
  font-size: .9rem;
  margin-bottom: 6px;
}

.lesson-context-grid article strong,
.lesson-unit-price-lab__cards strong {
  display: block;
  font-size: 1.08rem;
}

.lesson-unit-price-lab__question,
.lesson-unit-price-lab__result {
  margin-bottom: 14px;
}

.lesson-unit-price-lab__cards article.is-best {
  border: 2px solid var(--accent, #d51f70);
  background: #fff1f7;
}

.lesson-unit-price-lab__cards em {
  display: inline-block;
  color: var(--accent, #c41461);
  font-style: normal;
  font-weight: 800;
}

.lesson-fraction-number-line__choices,
.lesson-fraction-strips__choices,
.lesson-hundred-chart__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.lesson-fraction-number-line-lab svg {
  display: block;
  width: 100%;
  min-height: 190px;
  overflow: visible;
}

.lesson-fraction-number-line-lab svg line {
  stroke: #332b42;
  stroke-width: 3;
}

.lesson-fraction-number-line-lab svg line.is-major {
  stroke-width: 5;
}

.lesson-fraction-number-line-lab svg text {
  fill: #332b42;
  font-size: 17px;
  font-weight: 800;
  text-anchor: middle;
}

.lesson-fraction-number-line-lab svg marker path,
.lesson-fraction-number-line__point {
  fill: var(--accent, #d51f70);
}

.lesson-fraction-number-line__value {
  fill: var(--accent, #d51f70) !important;
  font-size: 22px !important;
}

.lesson-fraction-strips__stage {
  display: grid;
  gap: 12px;
  padding: 8px 0;
}

.lesson-fraction-strips__stage > div {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.lesson-fraction-strips__stage > div > span {
  display: grid;
  grid-template-columns: repeat(var(--strip-pieces), minmax(0, 1fr));
  min-height: 48px;
  border: 2px solid #332b42;
  border-radius: 8px;
  overflow: hidden;
}

.lesson-fraction-strips__stage i {
  border-right: 1px solid #735f7a;
  background: #fff;
}

.lesson-fraction-strips__stage i:last-child {
  border-right: 0;
}

.lesson-fraction-strips__stage i.is-filled {
  background: #ec3c91;
}

.lesson-hundred-chart__body {
  display: grid;
  grid-template-columns: minmax(230px, 360px) minmax(210px, 1fr);
  gap: 20px;
  align-items: center;
}

.lesson-hundred-chart__grid {
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  border: 2px solid #332b42;
  background: #fff;
}

.lesson-hundred-chart__grid i {
  border-right: 1px solid #ad9aae;
  border-bottom: 1px solid #ad9aae;
}

.lesson-hundred-chart__grid i:nth-child(10n) { border-right: 0; }
.lesson-hundred-chart__grid i:nth-child(n+91) { border-bottom: 0; }
.lesson-hundred-chart__grid i.is-filled { background: #ec3c91; }

.lesson-hundred-chart__values {
  display: grid;
  gap: 10px;
}

.lesson-hundred-chart__values > div {
  border: 1px solid var(--border-color, #efb7cf);
  border-radius: 12px;
  padding: 12px;
}

.lesson-hundred-chart__values span,
.lesson-hundred-chart__values strong { display: block; }
.lesson-hundred-chart__values strong { font-size: 1.35rem; color: var(--accent, #c41461); }

.lesson-model-comparison {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lesson-model-comparison article strong {
  display: block;
  margin-bottom: 7px;
}

@media (max-width: 800px) {
  .lesson-context-grid,
  .lesson-unit-price-lab__cards,
  .lesson-model-comparison,
  .lesson-hundred-chart__body {
    grid-template-columns: 1fr;
  }

  .lesson-hundred-chart__grid {
    width: min(100%, 360px);
    margin: 0 auto;
  }
}
/* Geometri oluşturma tuvali */
.lesson-construction-lab {
  border: 1px solid var(--border-color, #efb7cf);
  border-radius: 16px;
  background: #fffafd;
  padding: 16px;
}

.lesson-construction-lab__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.lesson-construction-lab__canvas {
  display: block;
  width: 100%;
  min-height: 340px;
  max-height: min(60vh, 520px);
  border: 2px solid #332b42;
  border-radius: 14px;
  background: #fff;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.lesson-construction-lab.is-drawing .lesson-construction-lab__canvas {
  cursor: grabbing;
}

.lesson-construction-lab__canvas [data-construction-drawings] line,
.lesson-construction-lab__canvas [data-construction-drawings] .is-right-mark {
  stroke: #332b42;
  stroke-width: 7;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lesson-construction-lab__canvas [data-construction-drawings] .is-square {
  stroke: #2369d8;
}

.lesson-construction-lab__canvas [data-construction-drawings] .is-compass {
  stroke: #d51f70;
  stroke-width: 7;
  fill: rgba(236, 60, 145, .08);
}

.lesson-construction-lab__canvas [data-construction-preview] line,
.lesson-construction-lab__canvas [data-construction-preview] path {
  stroke: #d51f70;
  stroke-width: 7;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 14 9;
  opacity: .78;
}

.lesson-construction-lab__canvas [data-construction-preview] .is-square {
  stroke: #2369d8;
}

.lesson-construction-lab__canvas [data-construction-preview] .is-compass {
  stroke: #d51f70;
  stroke-width: 7;
  fill: rgba(236, 60, 145, .08);
  stroke-dasharray: 14 9;
  opacity: .78;
}

.lesson-construction-lab__canvas .is-point,
.lesson-construction-lab__canvas [data-construction-preview] circle:not(.is-compass) {
  fill: #d51f70;
}

.lesson-construction-lab__status {
  font-weight: 700;
  color: var(--muted-text, #80556a);
  margin: 12px 0 0;
}

@media (max-width: 800px) {
  .lesson-construction-lab__canvas {
    min-height: 280px;
  }
}
/* 5. sınıf İstatistiksel Araştırma Süreci */
.lesson-research-cycle {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr) auto) minmax(120px, 1fr);
  align-items: stretch;
  gap: 8px;
  overflow-x: auto;
  padding: 4px;
}

.lesson-research-cycle > div,
.lesson-research-question-lab,
.lesson-survey-lab,
.lesson-chart-choice article,
.lesson-stats-claim-lab {
  border: 1px solid var(--border-color, #efb7cf);
  border-radius: 16px;
  background: #fffafd;
  padding: 16px;
}

.lesson-research-cycle > div span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #d51f70;
  color: #fff;
  font-weight: 900;
  margin-bottom: 8px;
}

.lesson-research-cycle > i {
  align-self: center;
  color: #d51f70;
  font-size: 1.6rem;
  font-style: normal;
}

.lesson-research-question-lab__checks,
.lesson-stats-claim-lab__choices,
.lesson-survey-lab__category-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0;
}

.lesson-survey-lab__head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
}

.lesson-survey-lab__category-buttons button {
  flex: 1 1 150px;
  min-height: 94px;
  border: 1px solid var(--border-color, #efb7cf);
  border-radius: 14px;
  background: #fff;
  color: #332b42;
  padding: 10px;
  cursor: pointer;
}

.lesson-survey-lab__category-buttons span,
.lesson-survey-lab__category-buttons strong,
.lesson-survey-lab__category-buttons small {
  display: block;
}

.lesson-survey-lab__category-buttons strong {
  color: #d51f70;
  font-size: 1.5rem;
  margin: 4px 0;
}

.lesson-survey-lab__results {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(270px, 1.2fr) minmax(220px, .8fr);
  gap: 16px;
  align-items: stretch;
}

.lesson-survey-lab__results > div {
  border: 1px solid var(--border-color, #efb7cf);
  border-radius: 14px;
  background: #fff;
  padding: 14px;
}

.lesson-survey-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.lesson-survey-table-wrap th,
.lesson-survey-table-wrap td {
  border-bottom: 1px solid #ead7e1;
  padding: 8px 4px;
  text-align: left;
}

.lesson-survey-table-wrap td:last-child,
.lesson-survey-table-wrap th:last-child {
  text-align: right;
  font-weight: 900;
}

.lesson-survey-table-wrap td i,
.lesson-survey-pie-wrap [data-survey-legend] i {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--survey-color);
  margin-right: 7px;
}

.lesson-survey-bars {
  height: 270px;
  display: grid;
  grid-template-columns: repeat(4, minmax(48px, 1fr));
  gap: 12px;
  align-items: end;
  border-left: 2px solid #332b42;
  border-bottom: 2px solid #332b42;
  padding: 25px 10px 0;
  margin-top: 10px;
}

.lesson-survey-bars > div {
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: end;
  gap: 6px;
  text-align: center;
}

.lesson-survey-bars > div > span {
  display: block;
  width: 70%;
  min-height: 8px;
  justify-self: center;
  background: var(--survey-color);
  border-radius: 8px 8px 0 0;
  position: relative;
}

.lesson-survey-bars b {
  position: absolute;
  left: 50%;
  top: -24px;
  transform: translateX(-50%);
}

.lesson-survey-bars small {
  min-height: 34px;
  font-size: .72rem;
  line-height: 1.15;
}

.lesson-survey-pie {
  width: min(220px, 100%);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid #332b42;
  margin: 14px auto;
}

.lesson-survey-pie-wrap [data-survey-legend] {
  display: grid;
  gap: 6px;
}

.lesson-survey-pie-wrap [data-survey-legend] span {
  font-size: .85rem;
}

.lesson-survey-lab__conclusion {
  border-left: 5px solid #d51f70;
  padding: 10px 12px;
  background: #fff0f6;
  border-radius: 8px;
  margin: 16px 0 0;
  font-weight: 700;
}

.lesson-chart-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.lesson-chart-choice article strong,
.lesson-chart-choice article small { display: block; }
.lesson-chart-choice article small { color: var(--muted-text, #80556a); }

@media (max-width: 980px) {
  .lesson-survey-lab__results {
    grid-template-columns: 1fr 1fr;
  }
  .lesson-survey-pie-wrap { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .lesson-survey-lab__head,
  .lesson-survey-lab__results,
  .lesson-chart-choice {
    display: grid;
    grid-template-columns: 1fr;
  }
  .lesson-survey-pie-wrap { grid-column: auto; }
}
/* Bilgi 4: dokunmatik onda birlik sayı doğrusu */
.lesson-tenths-playground {
  width: 100%;
  border: 1px solid var(--border-color, #efb7cf);
  border-radius: 16px;
  background: #fffafd;
  padding: clamp(14px, 2.5vw, 22px);
}

.lesson-tenths-playground__presets {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.lesson-tenths-number-line {
  --tenths-position: calc(30% + 7.2px);
  position: relative;
  padding: 58px 18px 8px;
}

.lesson-tenths-number-line__bubble {
  position: absolute;
  top: 0;
  left: var(--tenths-position);
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  min-width: 64px;
  min-height: 42px;
  padding: 5px 12px;
  border-radius: 13px;
  background: #d51f70;
  color: #fff;
  font-size: 1.28rem;
  font-weight: 950;
  box-shadow: 0 7px 18px rgba(213, 31, 112, .22);
}

.lesson-tenths-number-line__bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 16px;
  height: 16px;
  background: #d51f70;
  transform: translateX(-50%) rotate(45deg);
}

.lesson-tenths-number-line__ticks {
  position: relative;
  display: grid;
  grid-template-columns: repeat(20, minmax(0, 1fr)) 0;
  align-items: start;
  height: 68px;
}

.lesson-tenths-number-line__ticks::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 20px;
  height: 5px;
  border-radius: 999px;
  background: #332b42;
}

.lesson-tenths-number-line__ticks i {
  position: relative;
  height: 42px;
  border-left: 3px solid #332b42;
}

.lesson-tenths-number-line__ticks i:last-child {
  border-right: 0;
}

.lesson-tenths-number-line__ticks i.is-whole {
  height: 52px;
  border-left-width: 6px;
}

.lesson-tenths-number-line__ticks i:last-child.is-whole {
  border-right-width: 0;
}

.lesson-tenths-number-line__ticks span {
  position: absolute;
  top: 48px;
  left: 0;
  transform: translateX(-50%);
  color: #332b42;
  font-size: 1rem;
  font-style: normal;
  font-weight: 950;
}

.lesson-tenths-number-line__ticks i:last-child span {
  left: auto;
  right: 0;
  transform: translateX(50%);
}

.lesson-tenths-number-line input[type="range"] {
  position: absolute;
  z-index: 2;
  top: 61px;
  left: 18px;
  width: calc(100% - 36px);
  height: 42px;
  margin: 0;
  opacity: .01;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
  touch-action: pan-x;
}

.lesson-tenths-number-line input[type="range"]::-webkit-slider-thumb {
  width: 1px;
  height: 42px;
  appearance: none;
  -webkit-appearance: none;
}

.lesson-tenths-number-line input[type="range"]::-moz-range-thumb {
  width: 1px;
  height: 42px;
  border: 0;
  background: transparent;
}

.lesson-tenths-number-line::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 68px;
  left: var(--tenths-position);
  width: 24px;
  height: 24px;
  border: 5px solid #fff;
  border-radius: 50%;
  background: #d51f70;
  box-shadow: 0 0 0 2px #d51f70;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.lesson-tenths-number-line > p {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 6px 0 0;
  color: var(--muted-text, #80556a);
  font-size: .85rem;
  font-weight: 800;
  text-align: center;
}

.lesson-tenths-playground__meaning {
  border-left: 5px solid #d51f70;
  border-radius: 10px;
  background: #fff0f6;
  padding: 12px 14px;
  margin: 18px 0;
}

.lesson-tenths-playground__meaning strong,
.lesson-tenths-playground__meaning p {
  display: block;
  margin: 0;
}

.lesson-tenths-playground__meaning p { margin-top: 6px; }

.lesson-tenths-playground__representations {
  display: grid;
  grid-template-columns: minmax(200px, .8fr) minmax(230px, 1fr) minmax(210px, .9fr);
  gap: 14px;
  align-items: stretch;
}

.lesson-tenths-playground__representations > article {
  border: 1px solid var(--border-color, #efb7cf);
  border-radius: 14px;
  background: #fff;
  padding: 14px;
}

.lesson-tenths-playground__representations > article > span {
  display: block;
  margin-bottom: 10px;
  font-weight: 900;
}

.lesson-tenths-playground__cakes > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.lesson-tenths-playground__cakes > div > div {
  display: grid;
  justify-items: center;
  gap: 4px;
}

.lesson-tenths-playground__cakes .lesson-mini-circle {
  min-width: 128px;
  min-height: 128px;
}

.lesson-tenths-playground__cakes .lesson-mini-circle svg {
  width: 120px;
  height: 120px;
  max-height: none;
}

.lesson-tenths-playground__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.lesson-tenths-playground__cards > div {
  border: 1px solid #ead7e1;
  border-radius: 12px;
  background: #fffafd;
  padding: 11px;
}

.lesson-tenths-playground__cards span,
.lesson-tenths-playground__cards strong {
  display: block;
}

.lesson-tenths-playground__cards span {
  color: var(--muted-text, #80556a);
  font-size: .82rem;
}

.lesson-tenths-playground__cards strong {
  color: #c41461;
  font-size: 1.35rem;
  margin-top: 5px;
}

.lesson-tenths-playground__hundreds > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.lesson-tenths-hundred-board {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  width: min(150px, 100%);
  aspect-ratio: 1;
  border: 2px solid #332b42;
  background: #fff;
}

.lesson-tenths-hundred-board i {
  border-right: 1px solid #cdb9c5;
  border-bottom: 1px solid #cdb9c5;
}

.lesson-tenths-hundred-board i:nth-child(10n) { border-right: 0; }
.lesson-tenths-hundred-board i:nth-child(n+91) { border-bottom: 0; }
.lesson-tenths-hundred-board i.is-filled { background: #ec3c91; }

.lesson-tenths-playground__cakes p,
.lesson-tenths-playground__hundreds p {
  margin: 10px 0 0;
  color: var(--muted-text, #80556a);
  font-size: .86rem;
  text-align: center;
}

.lesson-tenths-transfer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.lesson-tenths-transfer-grid article {
  border: 1px solid var(--border-color, #efb7cf);
  border-radius: 14px;
  background: #fffafd;
  padding: 14px;
}

.lesson-tenths-transfer-grid article strong { display: block; }

@media (max-width: 950px) {
  .lesson-tenths-playground__representations {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lesson-tenths-playground__hundreds { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .lesson-tenths-playground__representations,
  .lesson-tenths-transfer-grid {
    grid-template-columns: 1fr;
  }
  .lesson-tenths-playground__hundreds { grid-column: auto; }
  .lesson-tenths-playground__cards { grid-template-columns: 1fr 1fr; }
  .lesson-tenths-number-line { padding-left: 18px; padding-right: 18px; }
  .lesson-tenths-number-line input[type="range"] { left: 18px; width: calc(100% - 36px); }
  .lesson-tenths-number-line > p { font-size: .72rem; gap: 6px; }
}

/* 5. sınıf 6. Tema: Veriden Olasılığa */
.lesson-probability-event-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 10px;
  width: 100%;
}

.lesson-probability-event-grid article {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 190px;
  padding: 15px;
  border: 2px solid var(--probability-color, #d9b7ca);
  border-radius: 14px;
  background: var(--probability-bg, #fffafd);
}

.lesson-probability-event-grid article:nth-child(1) { --probability-color: #6b7280; --probability-bg: #f7f7f8; }
.lesson-probability-event-grid article:nth-child(2) { --probability-color: #6d67d8; --probability-bg: #f4f3ff; }
.lesson-probability-event-grid article:nth-child(3) { --probability-color: #25a0a6; --probability-bg: #f1fbfb; }
.lesson-probability-event-grid article:nth-child(4) { --probability-color: #e83f94; --probability-bg: #fff2f8; }
.lesson-probability-event-grid article:nth-child(5) { --probability-color: #c41461; --probability-bg: #ffedf5; }

.lesson-probability-event-grid span {
  color: var(--probability-color);
  font-size: .86rem;
  font-weight: 950;
}

.lesson-probability-event-grid strong { color: #292235; font-size: 1.08rem; }
.lesson-probability-event-grid p { margin: 0; color: var(--muted); line-height: 1.5; }

.lesson-probability-spectrum,
.lesson-probability-bag,
.lesson-probability-game {
  display: grid;
  gap: 16px;
  width: 100%;
  padding: clamp(14px, 2vw, 22px);
  border: 1px solid var(--border-color, #efb7cf);
  border-radius: 16px;
  background: #fffafd;
}

.lesson-probability-spectrum { --probability-position: calc(50% + 0px); }

.lesson-probability-spectrum__presets,
.lesson-probability-game__modes,
.lesson-probability-bag__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.lesson-probability-spectrum__line {
  position: relative;
  padding: 68px 16px 10px;
}

.lesson-probability-spectrum__bar {
  position: relative;
  height: 22px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #e4e1e6 0%, #b8b2ee 25%, #8bd6d6 50%, #ef97c2 75%, #e83f94 100%);
  box-shadow: inset 0 0 0 3px #332b42;
}

.lesson-probability-spectrum__bar i {
  position: absolute;
  top: 50%;
  width: 4px;
  height: 34px;
  border-radius: 999px;
  background: #332b42;
  transform: translate(-50%, -50%);
}

.lesson-probability-spectrum__bar i:nth-child(1) { left: 0; }
.lesson-probability-spectrum__bar i:nth-child(2) { left: 25%; }
.lesson-probability-spectrum__bar i:nth-child(3) { left: 50%; }
.lesson-probability-spectrum__bar i:nth-child(4) { left: 75%; }
.lesson-probability-spectrum__bar i:nth-child(5) { left: 100%; }

.lesson-probability-spectrum__line input[type="range"] {
  position: absolute;
  z-index: 3;
  top: 58px;
  left: 16px;
  width: calc(100% - 32px);
  height: 44px;
  margin: 0;
  opacity: .01;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
  touch-action: pan-x;
}

.lesson-probability-spectrum__line input[type="range"]::-webkit-slider-thumb {
  width: 1px;
  height: 44px;
  appearance: none;
  -webkit-appearance: none;
}

.lesson-probability-spectrum__line input[type="range"]::-moz-range-thumb {
  width: 1px;
  height: 44px;
  border: 0;
  background: transparent;
}

.lesson-probability-spectrum__line output {
  position: absolute;
  z-index: 4;
  top: 10px;
  left: var(--probability-position);
  display: grid;
  place-items: center;
  min-width: 58px;
  min-height: 42px;
  padding: 5px 10px;
  border-radius: 12px;
  background: #c41461;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 950;
  transform: translateX(-50%);
  box-shadow: 0 7px 18px rgba(196, 20, 97, .2);
}

.lesson-probability-spectrum__line output::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 14px;
  height: 14px;
  background: #c41461;
  transform: translateX(-50%) rotate(45deg);
}

.lesson-probability-spectrum__line::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 79px;
  left: var(--probability-position);
  width: 27px;
  height: 27px;
  border: 5px solid #fff;
  border-radius: 50%;
  background: #c41461;
  box-shadow: 0 0 0 3px #c41461;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.lesson-probability-spectrum__labels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 13px;
  color: var(--muted);
  font-size: .85rem;
  font-weight: 900;
}

.lesson-probability-spectrum__labels span:nth-child(2) { text-align: center; }
.lesson-probability-spectrum__labels span:last-child { text-align: right; }

.lesson-probability-spectrum__representations {
  display: grid;
  grid-template-columns: repeat(4, minmax(145px, 1fr));
  gap: 10px;
}

.lesson-probability-spectrum__representations article {
  display: grid;
  gap: 5px;
  min-height: 90px;
  align-content: center;
  padding: 12px;
  border: 1px solid #eed0df;
  border-radius: 12px;
  background: #fff;
  text-align: center;
}

.lesson-probability-spectrum__representations span { color: var(--muted); font-size: .82rem; font-weight: 850; }
.lesson-probability-spectrum__representations strong { color: #c41461; font-size: 1.22rem; }
.lesson-probability-spectrum > p { margin: 0; padding: 11px 13px; border-left: 5px solid #e83f94; border-radius: 10px; background: #fff0f6; color: var(--muted); font-weight: 800; }

.lesson-probability-bag__controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(250px, 1fr));
  gap: 12px;
}

.lesson-probability-bag__controls > div {
  display: grid;
  grid-template-columns:minmax(110px, 1fr) 48px 54px 48px;
  align-items: center;
  gap: 8px;
  padding: 11px;
  border: 2px solid var(--ball-color);
  border-radius: 12px;
  background: #fff;
}

.lesson-probability-bag__controls .is-red { --ball-color: #e83f94; }
.lesson-probability-bag__controls .is-blue { --ball-color: #4169e1; }
.lesson-probability-bag__controls output { color: var(--ball-color); font-size: 1.45rem; font-weight: 950; text-align: center; }
.lesson-probability-bag__controls button { min-width: 48px; min-height: 48px; padding: 0; font-size: 1.35rem; }

.lesson-probability-bag__workbench {
  display: grid;
  grid-template-columns: minmax(300px, .85fr) minmax(300px, 1.15fr);
  gap: 14px;
  align-items: stretch;
}

.lesson-probability-bag__drawing,
.lesson-probability-bag__expectation {
  min-height: 300px;
  border: 1px solid #eed0df;
  border-radius: 14px;
  background: #fff;
}

.lesson-probability-bag__drawing { display: grid; place-items: center; padding: 18px; }

.lesson-probability-bag__sack {
  position: relative;
  display: grid;
  place-items: center;
  width: min(330px, 90%);
  min-height: 235px;
  padding: 52px 28px 24px;
  border: 5px solid #9b667f;
  border-radius: 42% 42% 24% 24% / 22% 22% 38% 38%;
  background: #fff4f9;
}

.lesson-probability-bag__sack::before {
  content: "";
  position: absolute;
  top: 25px;
  left: 12%;
  right: 12%;
  height: 8px;
  border-radius: 999px;
  background: #9b667f;
}

.lesson-probability-bag__sack > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 260px; }
.lesson-probability-bag__sack i,
.lesson-probability-bag__results i {
  display: inline-block;
  width: 38px;
  height: 38px;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px currentColor, inset -7px -7px 10px rgba(0, 0, 0, .12);
}

.lesson-probability-bag__sack i.is-red,
.lesson-probability-bag__results i.is-red { color: #d51f70; background: #e83f94; }
.lesson-probability-bag__sack i.is-blue,
.lesson-probability-bag__results i.is-blue { color: #3156c7; background: #4169e1; }

.lesson-probability-bag__expectation { display: grid; align-content: center; gap: 10px; padding: clamp(18px, 3vw, 30px); }
.lesson-probability-bag__expectation > span { color: var(--muted); font-weight: 850; }
.lesson-probability-bag__expectation > strong { color: #292235; font-size: 1.25rem; }
.lesson-probability-bag__expectation p { margin: 0; color: var(--muted); line-height: 1.5; }
.lesson-probability-bag__expectation > div { display: grid; grid-template-columns: 1fr; gap: 8px; }
.lesson-probability-bag__expectation b { padding: 10px; border-radius: 9px; background: #fff2f8; color: #a31354; }
.lesson-probability-bag__rule { margin: 0; padding: 10px 12px; border-left: 5px solid #25a0a6; border-radius: 9px; background: #effafa; color: var(--muted); font-weight: 800; }

.lesson-probability-bag__results {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 12px;
}

.lesson-probability-bag__results > div { min-height: 115px; padding: 13px; border: 1px solid #eed0df; border-radius: 12px; background: #fff; }
.lesson-probability-bag__results span { display: block; margin-bottom: 10px; color: var(--muted); font-weight: 850; }
.lesson-probability-bag__results [data-probability-draw-history] { display: flex; flex-wrap: wrap; gap: 9px; }
.lesson-probability-bag__results i { width: 28px; height: 28px; }
.lesson-probability-bag__results p { margin: 8px 0 0; color: var(--muted); }

.lesson-probability-game__stage {
  display: grid;
  grid-template-columns: minmax(280px, .85fr) minmax(300px, 1.15fr);
  gap: 18px;
  align-items: center;
  min-height: 390px;
  padding: 18px;
  border: 1px solid #eed0df;
  border-radius: 14px;
  background: #fff;
}

.lesson-probability-spinner {
  --pink-chance: 50%;
  position: relative;
  width: min(330px, 78vw);
  aspect-ratio: 1;
  justify-self: center;
  border: 8px solid #332b42;
  border-radius: 50%;
  background: conic-gradient(from -90deg, #e83f94 0 var(--pink-chance), #4169e1 var(--pink-chance) 100%);
  box-shadow: 0 12px 28px rgba(54, 39, 61, .16);
}

.lesson-probability-spinner::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -22px;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 34px solid #332b42;
  transform: translateX(-50%);
}

.lesson-probability-spinner i { position: absolute; inset: 50% auto auto 50%; width: 28px; height: 28px; border: 6px solid #fff; border-radius: 50%; background: #332b42; transform: translate(-50%, -50%); }

.lesson-probability-game__explanation { display: grid; gap: 13px; align-content: center; }
.lesson-probability-game__explanation > strong { font-size: 1.25rem; }
.lesson-probability-game__explanation > p { margin: 0; color: var(--muted); line-height: 1.55; }
.lesson-probability-game__explanation > div { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.lesson-probability-game__explanation span { padding: 12px; border: 2px solid currentColor; border-radius: 10px; background: #fff; font-weight: 900; text-align: center; }
.lesson-probability-game__explanation .is-pink { color: #c41461; }
.lesson-probability-game__explanation .is-blue { color: #3156c7; }
.lesson-probability-game__result { padding: 12px; border-left: 5px solid #e83f94; border-radius: 10px; background: #fff0f6; }
.lesson-probability-game__result p { margin: 6px 0 0; color: var(--muted); }

.lesson-visual-card:fullscreen .lesson-probability-spectrum,
.lesson-visual-card:-webkit-full-screen .lesson-probability-spectrum,
.lesson-visual-card.is-stage-fullscreen .lesson-probability-spectrum,
.lesson-visual-card:fullscreen .lesson-probability-bag,
.lesson-visual-card:-webkit-full-screen .lesson-probability-bag,
.lesson-visual-card.is-stage-fullscreen .lesson-probability-bag,
.lesson-visual-card:fullscreen .lesson-probability-game,
.lesson-visual-card:-webkit-full-screen .lesson-probability-game,
.lesson-visual-card.is-stage-fullscreen .lesson-probability-game {
  height: 100%;
  min-height: 0;
  overflow: auto;
}

.lesson-visual-card:fullscreen .lesson-probability-spectrum,
.lesson-visual-card:-webkit-full-screen .lesson-probability-spectrum,
.lesson-visual-card.is-stage-fullscreen .lesson-probability-spectrum {
  grid-template-rows: max-content minmax(170px, 1fr) max-content max-content;
  align-content: stretch;
}

.lesson-visual-card:fullscreen .lesson-probability-spectrum__line,
.lesson-visual-card:-webkit-full-screen .lesson-probability-spectrum__line,
.lesson-visual-card.is-stage-fullscreen .lesson-probability-spectrum__line {
  align-self: center;
  width: 100%;
}

.lesson-visual-card:fullscreen .lesson-probability-bag,
.lesson-visual-card:-webkit-full-screen .lesson-probability-bag,
.lesson-visual-card.is-stage-fullscreen .lesson-probability-bag {
  grid-template-rows: max-content minmax(0, 1fr) max-content max-content max-content;
  align-content: stretch;
  overflow: hidden;
}

.lesson-visual-card:fullscreen .lesson-probability-bag__workbench,
.lesson-visual-card:-webkit-full-screen .lesson-probability-bag__workbench,
.lesson-visual-card.is-stage-fullscreen .lesson-probability-bag__workbench,
.lesson-visual-card:fullscreen .lesson-probability-bag__drawing,
.lesson-visual-card:-webkit-full-screen .lesson-probability-bag__drawing,
.lesson-visual-card.is-stage-fullscreen .lesson-probability-bag__drawing,
.lesson-visual-card:fullscreen .lesson-probability-bag__expectation,
.lesson-visual-card:-webkit-full-screen .lesson-probability-bag__expectation,
.lesson-visual-card.is-stage-fullscreen .lesson-probability-bag__expectation {
  height: 100%;
  min-height: 0;
}

.lesson-visual-card:fullscreen .lesson-probability-game,
.lesson-visual-card:-webkit-full-screen .lesson-probability-game,
.lesson-visual-card.is-stage-fullscreen .lesson-probability-game {
  grid-template-rows: max-content minmax(0, 1fr) max-content;
  align-content: stretch;
  overflow: hidden;
}

.lesson-visual-card:fullscreen .lesson-probability-game__stage,
.lesson-visual-card:-webkit-full-screen .lesson-probability-game__stage,
.lesson-visual-card.is-stage-fullscreen .lesson-probability-game__stage {
  height: 100%;
  min-height: 0;
}

.lesson-visual-card:fullscreen .lesson-probability-spinner,
.lesson-visual-card:-webkit-full-screen .lesson-probability-spinner,
.lesson-visual-card.is-stage-fullscreen .lesson-probability-spinner {
  width: min(56vh, 540px, 44vw);
}

@media (max-width: 980px) {
  .lesson-probability-event-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lesson-probability-event-grid article:last-child { grid-column: 1 / -1; min-height: 0; }
  .lesson-probability-spectrum__representations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lesson-probability-bag__workbench,
  .lesson-probability-game__stage { grid-template-columns: 1fr; }

  .lesson-visual-card:fullscreen .lesson-probability-bag,
  .lesson-visual-card:-webkit-full-screen .lesson-probability-bag,
  .lesson-visual-card.is-stage-fullscreen .lesson-probability-bag,
  .lesson-visual-card:fullscreen .lesson-probability-game,
  .lesson-visual-card:-webkit-full-screen .lesson-probability-game,
  .lesson-visual-card.is-stage-fullscreen .lesson-probability-game {
    display: block;
    height: 100%;
    overflow: auto;
  }

  .lesson-visual-card:fullscreen .lesson-probability-bag > *,
  .lesson-visual-card:-webkit-full-screen .lesson-probability-bag > *,
  .lesson-visual-card.is-stage-fullscreen .lesson-probability-bag > *,
  .lesson-visual-card:fullscreen .lesson-probability-game > *,
  .lesson-visual-card:-webkit-full-screen .lesson-probability-game > *,
  .lesson-visual-card.is-stage-fullscreen .lesson-probability-game > * {
    margin-bottom: 14px;
  }

  .lesson-visual-card:fullscreen .lesson-probability-bag__drawing,
  .lesson-visual-card:-webkit-full-screen .lesson-probability-bag__drawing,
  .lesson-visual-card.is-stage-fullscreen .lesson-probability-bag__drawing,
  .lesson-visual-card:fullscreen .lesson-probability-bag__expectation,
  .lesson-visual-card:-webkit-full-screen .lesson-probability-bag__expectation,
  .lesson-visual-card.is-stage-fullscreen .lesson-probability-bag__expectation {
    min-height: 300px;
    height: auto;
  }

  .lesson-visual-card:fullscreen .lesson-probability-game__stage,
  .lesson-visual-card:-webkit-full-screen .lesson-probability-game__stage,
  .lesson-visual-card.is-stage-fullscreen .lesson-probability-game__stage {
    min-height: 640px;
    height: auto;
  }
}

@media (max-width: 680px) {
  .lesson-probability-event-grid,
  .lesson-probability-bag__controls,
  .lesson-probability-bag__results { grid-template-columns: 1fr; }
  .lesson-probability-event-grid article:last-child { grid-column: auto; }
  .lesson-probability-event-grid article { min-height: 0; }
  .lesson-probability-bag__controls > div { grid-template-columns: minmax(90px, 1fr) 48px 44px 48px; }
  .lesson-probability-spectrum__presets .secondary-button { flex: 1 1 calc(50% - 10px); }
  .lesson-probability-spectrum__representations { grid-template-columns: 1fr 1fr; }
  .lesson-probability-game__stage { padding: 12px; }
}

/* Tam ekran ders görselleri: içeriğin eski kart yüksekliğinde kalmasını engelle. */
.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen).is-fit
  .lesson-visual-card__canvas > :first-child {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
}

/* Cetvel, pergel ve gönye tuvali; boşluğu değil çizim alanını büyütür. */
.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-visual-card__canvas:has(> .lesson-construction-lab) {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  place-items: stretch;
  overflow: hidden;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-construction-lab {
  display: grid;
  grid-template-rows: max-content max-content minmax(0, 1fr) max-content;
  align-content: stretch;
  gap: clamp(6px, 1vh, 12px);
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: clamp(8px, 1.25vw, 18px);
  overflow: hidden;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-construction-lab__tools,
.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-construction-lab > p,
.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-construction-lab__status {
  margin: 0;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-construction-lab__canvas {
  align-self: stretch;
  justify-self: center;
  width: auto;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: none;
  aspect-ratio: 12 / 7;
}

/* Açı ölçme ve kesişen doğrular araçları da kalan yüksekliği kullanır. */
.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-angle-lab,
.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-intersection-lab {
  align-content: stretch;
  justify-items: stretch;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-angle-lab {
  grid-template-rows: max-content minmax(0, 1fr) max-content max-content max-content;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-intersection-lab {
  grid-template-rows: max-content minmax(0, 1fr) max-content max-content max-content;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-angle-lab__canvas-wrap,
.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-intersection-lab__canvas-wrap {
  align-self: stretch;
  justify-self: center;
  width: auto;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-angle-lab__canvas-wrap {
  aspect-ratio: 12 / 7;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-intersection-lab__canvas-wrap {
  aspect-ratio: 18 / 11;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-angle-lab__canvas,
.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-intersection-lab__canvas {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
}

/* Alan ve çevre etkinliklerinde asıl çalışma sahnesi esneyen satırdır. */
.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  :is(.lesson-rectangle-lab, .lesson-perimeter-builder, .lesson-unit-square-lab,
      .lesson-measure-compare, .lesson-measure-problems) {
  align-content: stretch;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-rectangle-lab {
  grid-template-rows: max-content minmax(0, 1fr) max-content max-content;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-perimeter-builder {
  grid-template-rows: max-content max-content minmax(0, 1fr);
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-unit-square-lab {
  grid-template-rows: max-content minmax(0, 1fr) max-content max-content;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-measure-compare {
  grid-template-rows: max-content max-content minmax(0, 1fr) max-content;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-measure-problems {
  grid-template-rows: max-content max-content max-content minmax(0, 1fr) max-content;
  overflow: auto;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  :is(.lesson-rectangle-lab__stage, .lesson-perimeter-builder__stage,
      .lesson-perimeter-builder__drawing, .lesson-unit-square-lab__stage,
      .lesson-measure-compare__cards, .lesson-measure-compare__mini,
      .lesson-measure-problems__steps) {
  height: 100%;
  min-height: 0;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-measure-grid:not(.is-compact) {
  --measure-cell-size: clamp(28px, min(7vw, 7.5vh), 105px);
}

/* Kesir görsellerinde dikey ortalama büyük boşluk üretiyordu. */
.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  :is(.lesson-fraction-representation-lab, .lesson-mixed-fraction-lab,
      .lesson-equivalent-fraction-lab, .lesson-cake-example-switcher) {
  align-content: stretch;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-fraction-representation-lab {
  grid-template-rows: max-content minmax(0, 1fr);
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-fraction-representation-lab__stage,
.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-fraction-representation-cake,
.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-mixed-fraction-lab__models,
.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-equivalent-fraction-lab__cakes,
.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-cake-example-switcher .lesson-fraction-sampler__body,
.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-cake-example-switcher .lesson-fraction-sampler__visual {
  height: 100%;
  min-height: 0;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-cake-example-switcher .lesson-fraction-sampler__visual {
  display: grid;
  place-items: center;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-cake-example-switcher .lesson-fraction-sampler__visual .lesson-mini-circle {
  min-width: clamp(320px, min(55vh, 42vw), 720px);
  min-height: clamp(320px, min(55vh, 42vw), 720px);
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-cake-example-switcher .lesson-fraction-sampler__visual .lesson-mini-circle svg {
  width: clamp(290px, min(51vh, 39vw), 670px);
  height: clamp(290px, min(51vh, 39vw), 670px);
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  :is(.lesson-fraction-representation-cake, .lesson-hundred-grid) {
  width: clamp(390px, min(54vh, 38vw), 700px);
  min-height: clamp(390px, min(54vh, 38vw), 700px);
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-fraction-representation-cake svg {
  width: clamp(350px, min(50vh, 35vw), 650px);
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-equivalent-fraction-lab__cakes :is([data-equivalence-base-cake], [data-equivalence-result-cake]) {
  width: clamp(280px, min(34vh, 28vw), 470px);
  height: clamp(280px, min(34vh, 28vw), 470px);
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-equivalent-fraction-lab__cakes svg {
  width: clamp(260px, min(32vh, 26vw), 440px);
  height: clamp(260px, min(32vh, 26vw), 440px);
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-mixed-fraction-lab {
  grid-template-rows: max-content minmax(0, 1fr) max-content;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-equivalent-fraction-lab {
  grid-template-rows: max-content max-content max-content minmax(0, 1fr) max-content;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-cake-example-switcher {
  grid-template-rows: max-content minmax(0, 1fr);
}

/* İstatistik görsellerinde tablo ve grafikler kalan alanı birlikte doldurur. */
.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  :is(.lesson-research-cycle, .lesson-research-question-lab, .lesson-survey-lab,
      .lesson-chart-choice, .lesson-stats-claim-lab) {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-research-cycle > div {
  display: grid;
  align-content: center;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-research-question-lab,
.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-stats-claim-lab {
  display: grid;
  grid-template-rows: max-content minmax(0, 1fr) max-content;
  align-content: stretch;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  :is(.lesson-research-question-lab__checks, .lesson-stats-claim-lab__choices) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: stretch;
  margin: 0;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  :is(.lesson-research-question-lab__checks, .lesson-stats-claim-lab__choices) > * {
  height: 100%;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-research-question-lab__checks {
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  grid-template-rows: repeat(2, minmax(110px, 1fr));
  align-self: center;
  justify-self: center;
  width: min(100%, 1500px);
  height: min(68vh, 700px);
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-stats-claim-lab__choices {
  align-self: center;
  justify-self: center;
  width: min(100%, 1700px);
  height: min(55vh, 620px);
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-survey-lab {
  display: grid;
  grid-template-rows: max-content max-content max-content minmax(0, 1fr) max-content;
  align-content: stretch;
  overflow: hidden;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-survey-lab__category-buttons {
  margin: 0;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-survey-lab__results,
.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-survey-lab__results > div,
.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-survey-bars {
  height: 100%;
  min-height: 0;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-survey-pie {
  align-self: center;
  width: min(42vh, 100%, 520px);
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-survey-bar-wrap {
  display: grid;
  grid-template-rows: max-content minmax(0, 1fr);
  min-height: 0;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-survey-bars {
  margin-top: 0;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-survey-pie-wrap {
  display: grid;
  grid-template-rows: max-content minmax(0, 1fr) max-content;
  min-height: 0;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-chart-choice {
  grid-auto-rows: minmax(0, 1fr);
  align-items: stretch;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-chart-choice article {
  display: grid;
  align-content: center;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-probability-event-grid {
  height: 100%;
  min-height: 0;
  align-items: stretch;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-probability-event-grid article {
  align-content: center;
  gap: clamp(12px, 2vh, 26px);
  padding: clamp(18px, 2.2vw, 44px);
  text-align: center;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-probability-event-grid span {
  font-size: clamp(1rem, 1.15vw, 1.45rem);
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-probability-event-grid strong {
  font-size: clamp(1.35rem, 1.65vw, 2.1rem);
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-probability-event-grid p {
  font-size: clamp(1rem, 1.05vw, 1.32rem);
}

/* Geometri galerilerinde yalnız ana çizim büyür; düğme ve kısa açıklama büyümez. */
.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-geometry-switcher__choices {
  align-content: flex-start;
  align-items: flex-start;
  flex: 0 0 auto;
  height: auto;
  min-height: 46px;
  max-height: max-content;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-geometry-switcher__choices .secondary-button {
  flex: 0 0 auto;
  width: auto;
  height: 46px;
  min-height: 46px;
  max-height: 46px;
  padding-block: 8px;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-geometry-switcher__panel {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-geometry-switcher__explanation {
  justify-self: end;
  width: 100%;
  max-width: 340px;
}

@media (max-width: 820px), (orientation: portrait) and (max-width: 1100px) {
  .lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
    .lesson-geometry-switcher__choices {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 3px;
  }

  .lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
    .lesson-geometry-switcher__panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) max-content;
  }

  .lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
    .lesson-geometry-switcher__explanation {
    justify-self: stretch;
    width: 100%;
    max-width: none;
    max-height: min(24dvh, 220px);
  }
}

/* 6. tema: olamaz, olabilir ve kesin kavramlarını görerek deneme */
.lesson-probability-first-check {
  display: grid;
  gap: 14px;
  width: 100%;
  padding: clamp(12px, 2vw, 20px);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fffafd;
}

.lesson-probability-first-check__intro {
  margin: 0;
  padding: 12px 14px;
  border-left: 5px solid var(--accent);
  border-radius: 10px;
  background: #fff0f7;
  line-height: 1.5;
}

.lesson-probability-first-check__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.lesson-probability-first-check__grid > article {
  display: grid;
  grid-template-rows: minmax(170px, 1fr) max-content max-content minmax(70px, max-content);
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 2px solid #ead0de;
  border-radius: 14px;
  background: #fff;
  transition: border-color .18s ease, background .18s ease;
}

.lesson-probability-first-check__grid > article.is-correct {
  border-color: #15946f;
  background: #f1fff9;
}

.lesson-probability-first-check__grid > article.is-wrong {
  border-color: #df7b32;
  background: #fff9f1;
}

.lesson-probability-first-check__scene {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  min-height: 170px;
  padding: 14px;
  border-radius: 12px;
  background: #fff4fa;
}

.lesson-probability-first-check__scene b {
  color: var(--accent-strong);
  text-align: center;
}

.lesson-probability-first-check__scene.is-die > div {
  display: grid;
  grid-template-columns: repeat(3, 52px);
  gap: 8px;
}

.lesson-probability-first-check__scene.is-die span {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 3px solid #332b42;
  border-radius: 10px;
  background: #fff;
  font-size: 1.2rem;
  font-weight: 950;
}

.lesson-probability-first-check__scene.is-bag > div {
  display: grid;
  grid-template-columns: repeat(2, 54px);
  gap: 12px;
  padding: 22px 34px 18px;
  border: 4px solid #8c6077;
  border-top-width: 10px;
  border-radius: 24px 24px 42px 42px;
  background: #fff;
}

.lesson-probability-first-check__scene.is-bag i {
  display: block;
  width: 54px;
  height: 54px;
  border: 4px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px currentColor;
}

.lesson-probability-first-check__scene.is-bag i.is-red {
  color: #c41461;
  background: #e83f94;
}

.lesson-probability-first-check__scene.is-bag i.is-blue {
  color: #3156c7;
  background: #4169e1;
}

.lesson-probability-first-check__grid > article > strong {
  font-size: 1.08rem;
  line-height: 1.4;
  text-align: center;
}

.lesson-probability-first-check__choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.lesson-probability-first-check__choices .secondary-button {
  min-width: 0;
  min-height: 48px;
  padding-inline: 8px;
}

.lesson-probability-first-check__choices .is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(232, 63, 148, .14);
}

.lesson-probability-first-check__grid > article > p {
  margin: 0;
  padding: 10px 12px;
  border-radius: 9px;
  background: #fff0f7;
  color: var(--muted);
  font-weight: 750;
  line-height: 1.45;
}

.lesson-probability-first-check__grid > article.is-correct > p {
  background: #e7fff5;
  color: #0d654d;
}

.lesson-probability-first-check__grid > article.is-wrong > p {
  background: #fff1df;
  color: #854613;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-probability-first-check {
  grid-template-rows: max-content minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-probability-first-check__grid,
.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-probability-first-check__grid > article,
.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-probability-first-check__scene {
  height: 100%;
  min-height: 0;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-probability-first-check__scene.is-die > div {
  grid-template-columns: repeat(3, clamp(76px, 8vw, 170px));
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-probability-first-check__scene.is-die span {
  width: clamp(76px, 8vw, 170px);
  height: clamp(76px, 8vw, 170px);
  font-size: clamp(1.5rem, 2.6vw, 3rem);
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-probability-first-check__scene.is-bag > div {
  grid-template-columns: repeat(2, clamp(80px, 8vw, 170px));
  gap: clamp(16px, 2vw, 34px);
  padding: clamp(28px, 3vw, 58px) clamp(38px, 4vw, 76px);
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-probability-first-check__scene.is-bag i {
  width: clamp(80px, 8vw, 170px);
  height: clamp(80px, 8vw, 170px);
}

@media (max-width: 980px) {
  .lesson-probability-first-check__grid {
    grid-template-columns: 1fr;
  }

  .lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
    .lesson-probability-first-check {
    display: block;
    height: 100%;
    overflow: auto;
  }

  .lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
    .lesson-probability-first-check__intro {
    margin-bottom: 12px;
  }

  .lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
    .lesson-probability-first-check__grid > article {
    height: auto;
    min-height: 520px;
  }
}

@media (max-width: 560px) {
  .lesson-probability-first-check__choices {
    grid-template-columns: 1fr;
  }
}

/* 6. sınıf matematik: öğrencinin deneyebildiği mini laboratuvarlar */
.lesson-math-lab{
  display:grid;
  gap:16px;
  width:100%;
  min-width:0;
  padding:18px;
  border:2px solid var(--line);
  border-radius:18px;
  background:linear-gradient(145deg, #fff, var(--surface-soft));
  box-shadow:0 10px 24px rgba(188, 53, 121, .08);
}

.lesson-math-lab__intro{
  display:grid;
  gap:5px;
}

.lesson-math-lab__intro > span{
  width:max-content;
  padding:5px 10px;
  border-radius:999px;
  background:var(--accent-soft);
  color:var(--accent-strong);
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.lesson-math-lab__intro > strong{
  color:var(--text);
  font-size:clamp(18px, 2.2vw, 24px);
  line-height:1.25;
}

.lesson-math-lab__intro p,
.lesson-math-lab__hint{
  margin:0;
  color:var(--muted);
  line-height:1.6;
}

.lesson-math-lab__controls{
  display:grid;
  gap:12px;
}

.lesson-math-lab__controls--two{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.lesson-math-lab__control{
  display:grid;
  gap:8px;
  min-width:0;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--surface);
  color:var(--text);
  font-weight:800;
}

.lesson-math-lab__control > strong{
  color:var(--accent-strong);
  font-size:20px;
}

.lesson-math-lab__control input[type="range"]{
  width:100%;
  min-height:42px;
  margin:0;
  accent-color:var(--accent);
  touch-action:pan-x;
}

.lesson-math-lab__control input[type="number"],
.lesson-math-lab__control select{
  width:100%;
  min-height:46px;
  padding:8px 10px;
  border:2px solid var(--line);
  border-radius:10px;
  background:#fff;
  color:var(--text);
  font:inherit;
}

.lesson-math-lab__result{
  display:grid;
  gap:5px;
  margin:0;
  padding:14px;
  border:1px solid #b9decf;
  border-radius:13px;
  background:var(--ok-soft);
  color:var(--ok);
  line-height:1.55;
}

.lesson-math-lab__result strong{
  font-size:17px;
}

.lesson-factor-lab__arrays{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

.lesson-factor-lab__array{
  display:grid;
  align-content:start;
  gap:10px;
  min-width:0;
  padding:13px;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:13px;
  background:#fff;
}

.lesson-factor-lab__array > strong,
.lesson-factor-lab__array > span{
  color:var(--text);
  text-align:center;
}

.lesson-factor-lab__dots{
  display:grid;
  grid-template-columns:repeat(var(--factor-columns), 10px);
  gap:4px;
  width:max-content;
  min-width:0;
  margin:auto;
}

.lesson-factor-lab__dots i{
  width:10px;
  height:10px;
  border:1px solid #b51762;
  border-radius:50%;
  background:#ff84bc;
}

.lesson-divisibility-lab__checks{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
}

.lesson-divisibility-lab__check{
  display:grid;
  gap:4px;
  min-width:0;
  padding:12px;
  border:2px solid var(--line);
  border-radius:13px;
  background:#fff;
}

.lesson-divisibility-lab__check > span{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:50%;
  font-weight:900;
}

.lesson-divisibility-lab__check strong{
  color:var(--text);
}

.lesson-divisibility-lab__check small{
  color:var(--muted);
  line-height:1.4;
}

.lesson-divisibility-lab__check.is-yes{
  border-color:#9fd2bc;
  background:#f1fbf6;
}

.lesson-divisibility-lab__check.is-yes > span{
  background:var(--ok-soft);
  color:var(--ok);
}

.lesson-divisibility-lab__check.is-no > span{
  background:var(--warn-soft);
  color:var(--warn);
}

.lesson-fraction-decimal-lab__model{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  min-height:46px;
}

.lesson-fraction-decimal-lab__bar{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(10px, 24px);
  height:38px;
  overflow:hidden;
  border:2px solid var(--accent-strong);
  border-radius:8px;
  background:#fff;
}

.lesson-fraction-decimal-lab__bar i{
  border-left:1px solid var(--line-strong);
  background:#fff;
}

.lesson-fraction-decimal-lab__bar i:first-child{
  border-left:0;
}

.lesson-fraction-decimal-lab__bar i.is-filled{
  background:#ff84bc;
}

.lesson-repeating-digits{
  padding-bottom:1px;
  border-bottom:2px solid currentColor;
}

.lesson-length-lab__results{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:9px;
}

.lesson-length-lab__results article,
.lesson-polygon-lab__facts article{
  display:grid;
  gap:5px;
  min-width:0;
  padding:12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}

.lesson-length-lab__results article.is-source{
  border:2px solid var(--accent);
  background:var(--accent-soft);
}

.lesson-length-lab__results span,
.lesson-polygon-lab__facts span{
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}

.lesson-length-lab__results strong,
.lesson-polygon-lab__facts strong{
  overflow-wrap:anywhere;
  color:var(--text);
  font-size:15px;
}

.lesson-algebra-lab__groups{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:10px;
}

.lesson-algebra-lab__groups article{
  display:grid;
  align-content:start;
  gap:8px;
  min-height:126px;
  padding:10px;
  border:1px solid #b9d7f4;
  border-radius:12px;
  background:#f2f8ff;
  text-align:center;
}

.lesson-algebra-lab__groups article.is-extra{
  border-color:var(--line-strong);
  background:var(--accent-soft);
}

.lesson-algebra-lab__groups article > span{
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}

.lesson-algebra-lab__groups article > div{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:4px;
}

.lesson-algebra-lab__groups i{
  width:13px;
  height:13px;
  border-radius:4px;
  background:#5496df;
}

.lesson-algebra-lab__groups .is-extra i{
  background:var(--accent);
}

/* 6. sınıf Bilgi 1: Cebirde çarpma ve bölme gösterimleri */
.lesson-symbol-lab{
  display:grid;
  gap:14px;
  width:100%;
  padding:18px;
  border:1px solid #b9d7f4;
  border-radius:18px;
  background:linear-gradient(145deg, #f5fbff 0%, #fff9fc 100%);
}

.lesson-symbol-lab__intro{
  display:grid;
  gap:5px;
}

.lesson-symbol-lab__intro > span{
  color:#8f2a63;
  font-size:12px;
  font-weight:950;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.lesson-symbol-lab__intro > strong{
  color:var(--text);
  font-size:clamp(18px, 2.4vw, 25px);
  line-height:1.25;
}

.lesson-symbol-lab__intro > p,
.lesson-symbol-lab__explanation{
  margin:0;
  color:var(--muted);
  font-size:14px;
  font-weight:750;
  line-height:1.55;
}

.lesson-symbol-lab__intro b{
  color:#2563a8;
}

.lesson-symbol-lab__controls{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.lesson-symbol-lab__controls .secondary-button{
  min-height:44px;
  padding:9px 14px;
  border-color:#b8cfe3;
  color:#31536d;
  background:#fff;
  touch-action:manipulation;
}

.lesson-symbol-lab__controls .secondary-button.is-active{
  border-color:#2563a8;
  color:#fff;
  background:#2563a8;
  box-shadow:0 0 0 3px rgba(37,99,168,.14);
}

.lesson-symbol-lab__value{
  display:grid;
  grid-template-columns:max-content minmax(180px, 1fr);
  align-items:center;
  gap:10px 14px;
  min-height:48px;
  color:var(--muted);
  font-size:14px;
  font-weight:850;
}

.lesson-symbol-lab__value strong{
  color:#2563a8;
  font-size:19px;
}

.lesson-symbol-lab__value input{
  grid-column:2;
  width:100%;
  min-height:44px;
  accent-color:#2563a8;
  touch-action:pan-x;
}

.lesson-symbol-lab__stage{
  width:100%;
  min-width:0;
  padding:6px;
  border:1px solid #c8dceb;
  border-radius:15px;
  background:#f4f9fd;
  overflow-x:hidden;
  overflow-y:hidden;
  touch-action:pan-y;
}

.lesson-symbol-lab__stage canvas{
  display:block;
  max-width:100%;
  border-radius:11px;
  background:#f4f9fd;
}

.lesson-symbol-lab__key{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  color:#496276;
  font-size:13px;
  font-weight:850;
}

.lesson-symbol-lab__key span{
  display:inline-flex;
  align-items:center;
  gap:7px;
}

.lesson-symbol-lab__key i{
  width:13px;
  height:13px;
  border-radius:4px;
  background:#16806f;
}

.lesson-symbol-lab__key i.is-variable{background:#2563a8}
.lesson-symbol-lab__key i.is-operation{background:#d66a19}
.lesson-symbol-lab__key i.is-group{background:#16806f}

.lesson-symbol-lab__explanation{
  min-height:52px;
  padding:12px 14px;
  border-left:4px solid #16806f;
  border-radius:0 12px 12px 0;
  color:#214b45;
  background:#e8faf5;
}

.lesson-symbol-guide{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
  width:100%;
}

.lesson-symbol-guide article{
  display:grid;
  align-content:start;
  gap:8px;
  min-height:172px;
  padding:15px;
  border:2px solid #c7ddee;
  border-radius:15px;
  background:#f7fbff;
}

.lesson-symbol-guide article.is-preferred{
  border-color:#6bc8b4;
  background:#ecfbf7;
}

.lesson-symbol-guide article.is-division-focus{
  border-color:#edaa76;
  background:#fff8f1;
}

.lesson-symbol-guide span{
  color:#5c7083;
  font-size:12px;
  font-weight:950;
  letter-spacing:.03em;
  text-transform:uppercase;
}

.lesson-symbol-guide strong{
  color:#173550;
  font-size:clamp(25px, 4vw, 38px);
  line-height:1.2;
}

.lesson-symbol-guide p{
  margin:0;
  color:#496276;
  font-size:14px;
  font-weight:750;
  line-height:1.45;
}

.lesson-symbol-guide--division{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.lesson-symbol-guide--division article{
  min-height:220px;
}

.lesson-symbol-guide--division > article > strong{
  font-size:clamp(30px, 5vw, 44px);
}

.lesson-symbol-expression{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  width:max-content;
  max-width:100%;
  min-height:72px;
  padding:10px 14px;
  border:1px solid #d5e2ec;
  border-radius:14px;
  color:#173550;
  background:#fff;
  box-shadow:0 7px 18px rgba(23,53,80,.08);
  font-size:clamp(32px, 5vw, 48px);
  line-height:1;
}

.lesson-symbol-expression b{
  font-family:Nunito, Arial, sans-serif;
  font-size:1em;
  font-weight:950;
}

.lesson-symbol-expression__equals{
  color:#16806f;
}

.lesson-division-sign{
  display:inline-grid;
  grid-template-rows:7px 5px 7px;
  place-items:center;
  gap:4px;
  min-width:50px;
  min-height:49px;
  padding:5px 8px;
  border:2px solid #e6a06c;
  border-radius:13px;
  background:#fff0e3;
}

.lesson-division-sign::before,
.lesson-division-sign::after{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:#c95710;
}

.lesson-division-sign i{
  display:block;
  width:34px;
  height:5px;
  border-radius:999px;
  background:#c95710;
}

.lesson-symbol-sign-key{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  width:max-content;
  max-width:100%;
  padding:8px 10px;
  border:1px dashed #dda273;
  border-radius:12px;
  color:#6f3b18;
  background:#fff;
}

.lesson-symbol-sign-key > span{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#6f3b18;
  font-size:13px;
  font-weight:950;
  letter-spacing:0;
  text-transform:none;
}

.lesson-symbol-sign-key > strong{
  color:#a1481d;
  font-size:26px;
}

.lesson-division-sign--small{
  grid-template-rows:4px 3px 4px;
  gap:2px;
  min-width:29px;
  min-height:29px;
  padding:3px 4px;
  border-radius:8px;
}

.lesson-division-sign--small::before,
.lesson-division-sign--small::after{
  width:4px;
  height:4px;
}

.lesson-division-sign--small i{
  width:19px;
  height:3px;
}

.lesson-plus-sign{
  display:inline-grid;
  place-items:center;
  min-width:29px;
  min-height:29px;
  border:2px solid #a8bdd0;
  border-radius:8px;
  color:#31536d;
  background:#eef5fa;
  font:950 24px/1 Nunito, Arial, sans-serif;
  letter-spacing:0;
  text-transform:none;
}

.lesson-inline-fraction{
  display:inline-grid;
  justify-self:start;
  min-width:150px;
  text-align:center;
}

.lesson-inline-fraction i{
  padding:4px 18px;
  font-style:normal;
}

.lesson-inline-fraction i:first-child{
  border-bottom:5px solid #d66a19;
  color:#2563a8;
}

.lesson-symbol-compare{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 54px minmax(0, 1fr);
  align-items:stretch;
  gap:12px;
  width:100%;
}

.lesson-symbol-compare article{
  display:grid;
  align-content:start;
  gap:9px;
  min-height:205px;
  padding:17px;
  border:2px solid #78cdbb;
  border-radius:16px;
  background:#edfbf7;
}

.lesson-symbol-compare article.is-warning{
  border-color:#edb38f;
  background:#fff5ed;
}

.lesson-symbol-compare span{
  color:#16806f;
  font-size:12px;
  font-weight:950;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.lesson-symbol-compare .is-warning span{
  color:#a1481d;
}

.lesson-symbol-compare strong{
  color:#173550;
  font-size:clamp(24px, 4vw, 38px);
}

.lesson-symbol-compare p,
.lesson-symbol-compare small{
  margin:0;
  color:#496276;
  font-size:14px;
  font-weight:750;
  line-height:1.45;
}

.lesson-symbol-compare small{
  align-self:end;
  padding-top:8px;
  border-top:1px dashed #a9c6bc;
  color:#173550;
  font-weight:900;
}

.lesson-symbol-compare__mark{
  display:grid;
  place-items:center;
  color:#d66a19;
  font-size:42px;
  font-weight:950;
}

.lesson-symbol-quiz-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  width:100%;
}

.lesson-symbol-quiz{
  display:grid;
  align-content:start;
  gap:11px;
  min-height:250px;
  padding:16px;
  border:2px solid #c7ddee;
  border-radius:16px;
  background:#fff;
  transition:border-color .16s ease, background .16s ease;
}

.lesson-symbol-quiz.is-correct{
  border-color:#35a991;
  background:#edfbf7;
}

.lesson-symbol-quiz.is-wrong{
  border-color:#e8a36f;
  background:#fff7ed;
}

.lesson-symbol-quiz > span{
  color:#8f2a63;
  font-size:12px;
  font-weight:950;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.lesson-symbol-quiz > strong{
  color:#173550;
  font-size:17px;
  line-height:1.4;
}

.lesson-symbol-quiz__choices{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.lesson-symbol-quiz__choices button{
  min-width:76px;
  min-height:48px;
  padding:8px 13px;
  border:2px solid #c7ddee;
  border-radius:12px;
  color:#173550;
  background:#f7fbff;
  font:900 19px/1.2 Nunito, Arial, sans-serif;
  cursor:pointer;
  touch-action:manipulation;
}

.lesson-symbol-quiz__choices button.is-selected{
  border-color:#2563a8;
  background:#e9f3ff;
  box-shadow:0 0 0 3px rgba(37,99,168,.12);
}

.lesson-symbol-quiz > p{
  margin:0;
  color:#5c7083;
  font-size:13px;
  font-weight:800;
  line-height:1.5;
}

.lesson-symbol-quiz.is-correct > p{color:#116b5c}
.lesson-symbol-quiz.is-wrong > p{color:#93451f}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-symbol-lab{
  align-content:start;
  width:min(1260px, 100%);
  min-height:100%;
  margin:auto;
  padding:20px;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-symbol-lab__stage{
  display:grid;
  align-content:center;
  min-height:min(56vh, 650px);
}

.lesson-polygon-lab__stage{
  display:grid;
  grid-template-columns:minmax(260px, .8fr) minmax(280px, 1.2fr);
  gap:16px;
  align-items:center;
}

.lesson-polygon-lab__stage svg{
  width:100%;
  max-height:310px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
}

.lesson-polygon-lab__stage polygon{
  fill:#fff0f8;
  stroke:var(--accent-strong);
  stroke-width:4;
  stroke-linejoin:round;
}

.lesson-polygon-lab__stage line{
  stroke:#638fcb;
  stroke-width:2;
  stroke-dasharray:7 5;
}

.lesson-polygon-lab__stage circle{
  fill:var(--accent-strong);
}

.lesson-polygon-lab__facts{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

@media (max-width: 900px){
  .lesson-divisibility-lab__checks,
  .lesson-length-lab__results{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .lesson-algebra-lab__groups{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .lesson-symbol-guide{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .lesson-polygon-lab__stage{
    grid-template-columns:1fr;
  }
}

@media (max-width: 600px){
  .lesson-math-lab{
    padding:13px;
  }

  .lesson-math-lab__controls--two,
  .lesson-factor-lab__arrays,
  .lesson-divisibility-lab__checks,
  .lesson-length-lab__results,
  .lesson-algebra-lab__groups,
  .lesson-polygon-lab__facts{
    grid-template-columns:1fr;
  }

  .lesson-algebra-lab__groups article{
    min-height:0;
  }

  .lesson-symbol-lab{
    padding:13px;
  }

  .lesson-symbol-lab__value{
    grid-template-columns:1fr;
  }

  .lesson-symbol-lab__value input{
    grid-column:1;
  }

  .lesson-symbol-guide,
  .lesson-symbol-guide--division,
  .lesson-symbol-quiz-grid{
    grid-template-columns:1fr;
  }

  .lesson-symbol-expression{
    justify-content:center;
    width:100%;
  }

  .lesson-symbol-compare{
    grid-template-columns:1fr;
  }

  .lesson-symbol-compare__mark{
    min-height:44px;
    transform:rotate(90deg);
  }
}

/* 6. sınıf 3. Tema: Geometrik Şekiller */
.lesson-factor-lab__array small{
  color:var(--muted);
  font-size:13px;
  line-height:1.4;
  text-align:center;
}

.lesson-factor-lab__array small b{
  color:var(--accent-strong);
}

.lesson-geometry-angle-lab__stage,
.lesson-triangle-angle-lab__stage,
.lesson-quadrilateral-lab__stage{
  display:grid;
  grid-template-columns:minmax(300px, 1.15fr) minmax(270px, .85fr);
  align-items:center;
  gap:16px;
  min-width:0;
}

.lesson-geometry-angle-lab__stage svg,
.lesson-triangle-angle-lab__stage svg,
.lesson-quadrilateral-lab__stage svg{
  width:100%;
  min-width:0;
  max-height:360px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
}

.lesson-geometry-angle-lab__stage .is-parallel{
  stroke:#346fbd;
  stroke-width:8;
  stroke-linecap:round;
}

.lesson-geometry-angle-lab__stage .is-transversal{
  stroke:#d11d6e;
  stroke-width:7;
  stroke-linecap:round;
}

.lesson-geometry-angle-lab__stage .angle-label circle{
  stroke-width:3;
}

.lesson-geometry-angle-lab__stage .angle-label.is-acute circle{
  fill:#e4f5ed;
  stroke:#168263;
}

.lesson-geometry-angle-lab__stage .angle-label.is-obtuse circle{
  fill:#fff0f7;
  stroke:#c21863;
}

.lesson-geometry-angle-lab__stage .angle-label text{
  fill:#2f2938;
  font-size:16px;
  font-weight:950;
  text-anchor:middle;
}

.lesson-geometry-angle-lab__facts{
  display:grid;
  gap:9px;
}

.lesson-geometry-angle-lab__facts article{
  display:grid;
  gap:5px;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fff;
}

.lesson-geometry-angle-lab__facts span{
  color:var(--accent-strong);
  font-size:13px;
  font-weight:900;
}

.lesson-geometry-angle-lab__facts strong{
  color:var(--text);
  font-size:14px;
  line-height:1.4;
}

.lesson-triangle-angle-lab__stage svg polygon{
  fill:#fff0f7;
  stroke:#a81859;
  stroke-width:6;
  stroke-linejoin:round;
}

.lesson-triangle-angle-lab__stage svg circle{
  stroke:#fff;
  stroke-width:3;
}

.lesson-triangle-angle-lab__stage svg .is-a circle{fill:#e83f94}
.lesson-triangle-angle-lab__stage svg .is-b circle{fill:#3979c7}
.lesson-triangle-angle-lab__stage svg .is-c circle{fill:#168263}

.lesson-triangle-angle-lab__stage svg text{
  fill:#fff;
  font-size:14px;
  font-weight:950;
  text-anchor:middle;
}

.lesson-quadrilateral-lab__choices{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.lesson-quadrilateral-lab__choices .secondary-button{
  min-height:46px;
}

.lesson-quadrilateral-lab__choices .secondary-button.is-active{
  border-color:var(--accent);
  background:var(--accent-soft);
  color:var(--accent-strong);
  box-shadow:0 0 0 3px rgba(232, 63, 148, .13);
}

.lesson-quadrilateral-lab__stage svg polygon{
  fill:#fff0f7;
  stroke:#a81859;
  stroke-width:7;
  stroke-linejoin:round;
}

.lesson-quadrilateral-lab__stage svg line{
  stroke:#3979c7;
  stroke-width:4;
  stroke-dasharray:10 7;
}

.lesson-quadrilateral-lab__stage svg circle{
  fill:#168263;
  stroke:#fff;
  stroke-width:3;
}

.lesson-quadrilateral-lab__explanation{
  display:grid;
  gap:10px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
}

.lesson-quadrilateral-lab__explanation > strong{
  color:var(--accent-strong);
  font-size:24px;
}

.lesson-quadrilateral-lab__belongs{
  margin:0;
  padding:9px 11px;
  border-radius:9px;
  background:#eef5ff;
  color:#315b92;
  font-size:13px;
  font-weight:850;
  line-height:1.45;
}

.lesson-quadrilateral-lab__explanation ul{
  display:grid;
  gap:8px;
  margin:0;
  padding-left:20px;
}

.lesson-quadrilateral-lab__explanation li{
  color:var(--text);
  line-height:1.5;
}

.lesson-geometry-family{
  padding:14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fffafd;
}

.lesson-geometry-family div{
  display:grid;
  gap:5px;
  padding:13px;
  border:2px solid #eabbd2;
  border-radius:13px;
  background:#fff;
}

.lesson-geometry-family div > strong{
  color:var(--accent-strong);
  font-size:17px;
}

.lesson-geometry-family div > span{
  color:var(--muted);
  font-size:13px;
  line-height:1.4;
}

.lesson-geometry-family__trapezoid,
.lesson-geometry-family__parallelogram{
  margin-top:8px;
}

.lesson-geometry-family__parallelogram{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.lesson-geometry-family__parallelogram > strong,
.lesson-geometry-family__parallelogram > span{
  grid-column:1 / -1;
}

.lesson-geometry-family__square{
  grid-column:1 / -1;
  border-color:#e83f94 !important;
  background:#fff0f7 !important;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-geometry-angle-lab,
.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-triangle-angle-lab,
.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-quadrilateral-lab{
  height:100%;
  min-height:0;
  grid-template-rows:max-content max-content minmax(0, 1fr);
  overflow:auto;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-geometry-angle-lab__stage,
.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-triangle-angle-lab__stage,
.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-quadrilateral-lab__stage{
  height:100%;
  min-height:0;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-geometry-angle-lab__stage svg,
.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-triangle-angle-lab__stage svg,
.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-quadrilateral-lab__stage svg{
  max-height:none;
  height:100%;
}

@media (max-width: 820px){
  .lesson-geometry-angle-lab__stage,
  .lesson-triangle-angle-lab__stage,
  .lesson-quadrilateral-lab__stage{
    grid-template-columns:1fr;
  }

  .lesson-geometry-family__parallelogram{
    grid-template-columns:1fr;
  }

  .lesson-geometry-family__parallelogram > strong,
  .lesson-geometry-family__parallelogram > span,
  .lesson-geometry-family__square{
    grid-column:auto;
  }

  .lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
    .lesson-geometry-angle-lab,
  .lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
    .lesson-triangle-angle-lab,
  .lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
    .lesson-quadrilateral-lab{
    display:block;
  }

  .lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
    .lesson-geometry-angle-lab__stage,
  .lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
    .lesson-triangle-angle-lab__stage,
  .lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
    .lesson-quadrilateral-lab__stage{
    height:auto;
    margin-top:12px;
  }
}

/* 6. sınıf 5. Tema: İstatistiksel Araştırma Süreci */
.lesson-stats-question-lab__choices{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.lesson-stats-question-lab__choices .secondary-button{
  min-height:70px;
  padding:11px 13px;
  line-height:1.45;
  text-align:left;
}

.lesson-stats-question-lab__choices .secondary-button.is-active,
.lesson-stem-leaf-lab__choices .secondary-button.is-active{
  border-color:var(--accent);
  background:var(--accent-soft);
  color:var(--accent-strong);
  box-shadow:0 0 0 3px rgba(232, 63, 148, .13);
}

.lesson-stats-question-lab__result{
  display:grid;
  gap:6px;
  min-height:84px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  color:var(--muted);
  line-height:1.5;
}

.lesson-stats-question-lab__result strong{
  color:var(--accent-strong);
  font-size:18px;
}

.lesson-stats-question-lab__result p{
  margin:0;
  color:var(--text);
}

.lesson-stem-leaf-lab__choices{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.lesson-stem-leaf-lab__choices .secondary-button{
  min-height:46px;
}

.lesson-stem-leaf-lab__data{
  display:grid;
  gap:8px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}

.lesson-stem-leaf-lab__data > strong{
  color:var(--text);
}

.lesson-stem-leaf-lab__data > div,
.lesson-outlier-lab__numbers{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.lesson-stem-leaf-lab__data span,
.lesson-outlier-lab__numbers span{
  display:grid;
  place-items:center;
  min-width:38px;
  min-height:38px;
  padding:5px 8px;
  border:2px solid #c8d8ed;
  border-radius:10px;
  background:#f3f8ff;
  color:#315b92;
  font-weight:900;
}

.lesson-stem-leaf-lab__stage{
  display:grid;
  grid-template-columns:minmax(270px, .85fr) minmax(320px, 1.15fr);
  gap:16px;
  align-items:stretch;
}

.lesson-stem-leaf-lab__plot{
  display:grid;
  align-content:start;
  gap:10px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
}

.lesson-stem-leaf-lab__plot > strong{
  color:var(--accent-strong);
  font-size:19px;
  text-align:center;
}

.lesson-stem-leaf-lab__plot [data-stem-rows]{
  display:grid;
  gap:5px;
}

.lesson-stem-leaf-lab__plot [data-stem-rows] > div{
  display:grid;
  grid-template-columns:44px 3px minmax(0, 1fr);
  align-items:center;
  gap:10px;
  min-height:42px;
  padding:6px 9px;
  border-radius:8px;
  background:#fff5fa;
}

.lesson-stem-leaf-lab__plot [data-stem-rows] strong{
  color:var(--accent-strong);
  font-size:18px;
  text-align:right;
}

.lesson-stem-leaf-lab__plot [data-stem-rows] i{
  align-self:stretch;
  background:#5c4b61;
  border-radius:99px;
}

.lesson-stem-leaf-lab__plot [data-stem-rows] span{
  color:var(--text);
  font-size:17px;
  font-weight:850;
  line-height:1.6;
}

.lesson-stem-leaf-lab__plot small{
  padding:9px;
  border-radius:8px;
  background:#eef5ff;
  color:#315b92;
  font-weight:800;
  text-align:center;
}

.lesson-stem-leaf-lab__summary,
.lesson-outlier-lab__results{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.lesson-stem-leaf-lab__summary article,
.lesson-outlier-lab__results article{
  display:grid;
  gap:6px;
  padding:13px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}

.lesson-stem-leaf-lab__summary span,
.lesson-outlier-lab__results span{
  color:var(--muted);
  font-size:13px;
  font-weight:850;
}

.lesson-stem-leaf-lab__summary strong,
.lesson-outlier-lab__results strong{
  color:var(--accent-strong);
  font-size:21px;
}

.lesson-outlier-lab__numbers{
  justify-content:center;
  padding:14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}

.lesson-outlier-lab__numbers span.is-changing{
  border-color:var(--accent);
  background:var(--accent-soft);
  color:var(--accent-strong);
  box-shadow:0 0 0 3px rgba(232, 63, 148, .12);
}

.lesson-outlier-lab__conclusion{
  margin:0;
  padding:12px 14px;
  border-left:5px solid var(--accent);
  border-radius:10px;
  background:#fff0f7;
  color:var(--text);
  line-height:1.55;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  :is(.lesson-stats-question-lab, .lesson-stem-leaf-lab, .lesson-outlier-lab){
  height:100%;
  min-height:0;
  overflow:auto;
}

@media (max-width: 760px){
  .lesson-stats-question-lab__choices,
  .lesson-stem-leaf-lab__stage{
    grid-template-columns:1fr;
  }
}

@media (max-width: 520px){
  .lesson-stem-leaf-lab__summary,
  .lesson-outlier-lab__results{
    grid-template-columns:1fr;
  }
}

/* 6. sınıf · deneysel olasılık */
.lesson-exp-prob-lab,
.lesson-relative-frequency-lab,
.lesson-repeat-prob-lab{
  gap:18px;
}

.lesson-exp-prob-lab__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.lesson-exp-prob-lab__stage{
  display:grid;
  grid-template-columns:140px minmax(0, 1fr);
  gap:18px;
  align-items:center;
}

.lesson-exp-prob-lab__coin{
  display:grid;
  width:112px;
  aspect-ratio:1;
  place-items:center;
  margin:auto;
  border:8px solid #e5b841;
  border-radius:50%;
  background:linear-gradient(145deg, #fff5a8, #f2c84b);
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.45), 0 12px 25px rgba(82,62,20,.18);
  color:#6c4a00;
  font-size:42px;
  font-weight:950;
}

.lesson-exp-prob-lab__coin.is-tails{
  border-color:#9b9db3;
  background:linear-gradient(145deg, #f4f5fb, #babdcc);
  color:#3f4156;
}

.lesson-exp-prob-lab__numbers{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.lesson-exp-prob-lab__numbers article,
.lesson-relative-frequency-lab__calculation article{
  display:grid;
  gap:5px;
  min-width:0;
  padding:13px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}

.lesson-exp-prob-lab__numbers span,
.lesson-relative-frequency-lab__calculation span{
  color:var(--muted);
  font-size:13px;
  font-weight:850;
}

.lesson-exp-prob-lab__numbers strong,
.lesson-relative-frequency-lab__calculation strong{
  overflow-wrap:anywhere;
  color:var(--accent-strong);
  font-size:20px;
}

.lesson-exp-prob-lab__bars{
  display:grid;
  gap:10px;
}

.lesson-exp-prob-lab__bars > div{
  display:grid;
  grid-template-columns:54px minmax(0, 1fr) 44px;
  gap:10px;
  align-items:center;
  font-weight:850;
}

.lesson-exp-prob-lab__bars i,
.lesson-repeat-prob-lab__results i{
  position:relative;
  display:block;
  height:18px;
  overflow:hidden;
  border-radius:999px;
  background:#edf0f7;
}

.lesson-exp-prob-lab__bars b,
.lesson-repeat-prob-lab__results b{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, var(--accent), #ff89bd);
}

.lesson-exp-prob-lab__bars .is-tails b{
  background:linear-gradient(90deg, #536bc2, #8fa9f1);
}

.lesson-exp-prob-lab__history{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  min-height:38px;
  align-items:center;
  padding:10px;
  border:1px dashed var(--line);
  border-radius:12px;
  background:#fff;
}

.lesson-exp-prob-lab__history i{
  display:grid;
  width:28px;
  height:28px;
  place-items:center;
  border-radius:50%;
  background:#ffe39a;
  color:#6c4a00;
  font-style:normal;
  font-weight:950;
}

.lesson-exp-prob-lab__history i.is-tails{
  background:#dce4ff;
  color:#384e9d;
}

.lesson-exp-prob-lab__comment,
.lesson-repeat-prob-lab__note{
  margin:0;
  padding:12px 14px;
  border-left:5px solid var(--accent);
  border-radius:10px;
  background:#fff0f7;
  line-height:1.55;
}

.lesson-relative-frequency-lab__whole{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  align-content:flex-start;
  min-height:48px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}

.lesson-relative-frequency-lab__whole i{
  width:15px;
  height:15px;
  border:1px solid #bec5d8;
  border-radius:4px;
  background:#edf0f7;
}

.lesson-relative-frequency-lab__whole i.is-hit{
  border-color:var(--accent);
  background:var(--accent);
  box-shadow:0 0 0 2px rgba(232,63,148,.1);
}

.lesson-relative-frequency-lab__calculation{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}

.lesson-relative-frequency-lab__calculation p{
  grid-column:1 / -1;
  margin:0;
  padding:12px 14px;
  border-radius:10px;
  background:#eefaf5;
  line-height:1.55;
}

.lesson-repeat-prob-lab > .action-button{
  justify-self:start;
}

.lesson-repeat-prob-lab__results{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}

.lesson-repeat-prob-lab__results article{
  display:grid;
  gap:8px;
  min-width:0;
  padding:14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}

.lesson-repeat-prob-lab__results article > span{
  color:var(--muted);
  font-weight:850;
}

.lesson-repeat-prob-lab__results article > strong{
  color:var(--accent-strong);
  overflow-wrap:anywhere;
}

.lesson-repeat-prob-lab__results i{
  overflow:visible;
}

.lesson-repeat-prob-lab__results em{
  position:absolute;
  top:-4px;
  bottom:-4px;
  left:50%;
  border-left:2px solid #2c3047;
  color:transparent;
  font-size:0;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  :is(.lesson-exp-prob-lab, .lesson-relative-frequency-lab, .lesson-repeat-prob-lab){
  height:100%;
  min-height:0;
  overflow:auto;
}

@media (max-width:760px){
  .lesson-exp-prob-lab__stage{
    grid-template-columns:1fr;
  }

  .lesson-repeat-prob-lab__results{
    grid-template-columns:1fr;
  }
}

@media (max-width:520px){
  .lesson-exp-prob-lab__actions > button{
    flex:1 1 calc(50% - 10px);
  }

  .lesson-exp-prob-lab__numbers,
  .lesson-relative-frequency-lab__calculation{
    grid-template-columns:1fr;
  }

  .lesson-relative-frequency-lab__calculation p{
    grid-column:auto;
  }
}

/* Koyu uzay modelindeki açıklamalar, genel ders paragraf renginden etkilenmez. */
.lesson-topic__section .lesson-space-lab__explanation{
  color:#f5f9ff;
}

/* 3B tutulma laboratuvarında tam ekranın odağı sahnedir. */
.lesson-visual-card:has(.lesson-solar-eclipse-3d) .lesson-visual-zoom{
  display:none;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen):has(.lesson-solar-eclipse-3d){
  gap:5px;
  padding:8px;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen):has(.lesson-solar-eclipse-3d)
  .lesson-visual-card__head{
  height:44px;
  min-height:44px;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen):has(.lesson-solar-eclipse-3d)
  .lesson-visual-fullscreen{
  width:40px;
  height:40px;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-visual-card__canvas:has(> .lesson-solar-eclipse-3d){
  display:block;
  min-height:0;
  padding:4px;
  overflow:hidden;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-visual-card__canvas > .lesson-solar-eclipse-3d{
  grid-template-rows:auto minmax(230px, 1fr) auto auto;
  align-content:stretch;
  width:100%;
  height:100%;
  min-height:0;
  gap:7px;
  padding:8px;
  overflow:hidden;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-solar-eclipse-3d__intro{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:32px;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-solar-eclipse-3d__intro > span{
  flex:0 0 auto;
  padding:4px 8px;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-solar-eclipse-3d__intro > strong{
  font-size:17px;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-solar-eclipse-3d__intro > p,
.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-solar-eclipse-3d__note{
  display:none;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-solar-eclipse-3d__stage{
  width:100%;
  height:100%;
  min-height:0;
  border-radius:12px;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-solar-eclipse-3d__stage > canvas[data-solar-eclipse-canvas]{
  width:100%;
  height:100%;
  min-height:0;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-solar-eclipse-3d__controls{
  grid-template-columns:minmax(0, 1fr);
  gap:6px 10px;
  padding:7px;
  border-radius:10px;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-solar-eclipse-3d__controls > label{
  gap:4px;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-solar-eclipse-3d__controls small{
  display:none;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  :is(.lesson-solar-eclipse-3d__modes, .lesson-solar-eclipse-3d__buttons, .lesson-solar-eclipse-3d__views){
  display:grid;
  gap:5px;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-solar-eclipse-3d__modes{
  grid-column:auto;
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-solar-eclipse-3d__buttons{
  grid-template-columns:minmax(0, 1fr);
}


.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-solar-eclipse-3d__views{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  :is(.lesson-solar-eclipse-3d__modes, .lesson-solar-eclipse-3d__buttons, .lesson-solar-eclipse-3d__views) > button{
  min-height:34px;
  padding:5px 8px;
  font-size:12px;
  line-height:1.15;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-solar-eclipse-3d__result{
  grid-template-columns:34px minmax(0, 1fr);
  gap:8px;
  padding:7px 10px;
  border-radius:10px;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-solar-eclipse-3d__result > span{
  width:34px;
  height:34px;
  font-size:18px;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-solar-eclipse-3d__result strong{
  display:inline;
  margin:0 7px 0 0;
  font-size:14px;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
  .lesson-solar-eclipse-3d__result p{
  display:inline;
  font-size:12px;
  line-height:1.3;
}

@media (max-width:760px){
  .lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
    .lesson-visual-card__canvas > .lesson-solar-eclipse-3d{
    grid-template-rows:auto minmax(240px, 1fr) auto auto;
    gap:5px;
    padding:5px;
  }

  .lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
    .lesson-solar-eclipse-3d__intro > span{
    display:none;
  }

  .lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
    .lesson-solar-eclipse-3d__intro > strong{
    font-size:15px;
  }

  .lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
    .lesson-solar-eclipse-3d__controls{
    grid-template-columns:1fr;
    gap:5px;
    padding:5px;
  }

  .lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
    .lesson-solar-eclipse-3d__controls > label{
    grid-row:auto;
  }

  .lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
    .lesson-solar-eclipse-3d__buttons{
    grid-template-columns:minmax(0, 1fr);
  }

  .lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
    :is(.lesson-solar-eclipse-3d__modes, .lesson-solar-eclipse-3d__buttons, .lesson-solar-eclipse-3d__views) > button{
    min-height:31px;
    padding:4px;
    font-size:10px;
  }

  .lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
    .lesson-solar-eclipse-3d__result{
    grid-template-columns:28px minmax(0, 1fr);
    padding:5px 7px;
  }

  .lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen)
    .lesson-solar-eclipse-3d__result > span{
    width:28px;
    height:28px;
    font-size:15px;
  }
}

.lesson-solar-eclipse-3d__monthly-cases{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
}
.lesson-solar-eclipse-3d__monthly-cases > button{
  display:grid;
  min-height:70px;
  justify-items:start;
  gap:2px;
  padding:10px 12px;
  border-width:2px;
  text-align:left;
  white-space:normal;
}
.lesson-solar-eclipse-3d__monthly-cases > button span{
  font-size:11px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.lesson-solar-eclipse-3d__monthly-cases > button strong{
  font-size:15px;
}
.lesson-solar-eclipse-3d__monthly-cases > button small{
  font-size:12px;
  font-weight:800;
}
.lesson-solar-eclipse-3d[data-solar-eclipse-purpose="monthly"] .lesson-solar-eclipse-3d__result{
  border-color:rgba(255,212,79,.52);
}
.lesson-solar-eclipse-3d[data-solar-eclipse-purpose="monthly"] .lesson-solar-eclipse-3d__result.is-total{
  border-color:#75c5a5;
}

.lesson-solar-eclipse-3d__monthly-story{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
  margin:0;
  padding:0;
  list-style:none;
}
.lesson-solar-eclipse-3d__monthly-story li{
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  gap:7px;
  align-items:center;
  min-height:48px;
  padding:7px 8px;
  border:1px solid #d6e0ed;
  border-radius:11px;
  background:#f5f7fb;
  color:#64738c;
}
.lesson-solar-eclipse-3d__monthly-story li > span{
  display:grid;
  width:28px;
  height:28px;
  place-items:center;
  border-radius:50%;
  background:#dfe6f0;
  font-weight:950;
}
.lesson-solar-eclipse-3d__monthly-story li > strong{
  font-size:12px;
  line-height:1.25;
}
.lesson-solar-eclipse-3d__monthly-story li.is-active{
  border-color:#315b92;
  background:#eaf2ff;
  color:#213f68;
  box-shadow:0 0 0 2px rgba(49,91,146,.1);
}
.lesson-solar-eclipse-3d__monthly-story li.is-active > span{
  background:#315b92;
  color:#fff;
}
.lesson-solar-eclipse-3d__monthly-story li.is-done{
  border-color:#8fcdb8;
  background:#effaf6;
  color:#28634f;
}
.lesson-solar-eclipse-3d__monthly-story li.is-done > span{
  background:#2f8a69;
  color:#fff;
}

.animation-card__visual--orbit{
  position:relative;
  overflow:hidden;
  background:radial-gradient(circle at 50% 50%,#18345f 0,#0b1938 55%,#071127 100%);
}
.animation-card__visual--orbit::before,
.animation-card__visual--orbit::after{
  content:"";
  position:absolute;
  inset:18px 24px;
  border:1px solid rgba(156,205,255,.3);
  border-radius:50%;
  transform:rotate(-18deg) scaleY(.45);
}
.animation-card__visual--orbit::after{
  inset:29px 40px;
  border-color:rgba(255,213,91,.65);
}
.animation-card__visual--solar .animation-card__solar-sun{
  position:absolute;
  left:50%;
  top:50%;
  width:32px;
  height:32px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:#ffd45b;
  box-shadow:0 0 20px 8px rgba(255,183,44,.58);
}
.animation-card__visual--solar .animation-card__solar-orbit{
  position:absolute;
  left:50%;
  top:50%;
  width:36%;
  height:36%;
  border:1px solid rgba(173,214,255,.58);
  border-radius:50%;
  transform:translate(-50%,-50%);
}
.animation-card__visual--solar .is-two{width:58%;height:58%;}
.animation-card__visual--solar .is-three{width:80%;height:80%;}

.lesson-space-orbit-animation{
  display:grid;
  gap:10px;
  padding:14px;
  color:#f4f8ff;
  background:#0b1733;
  border:1px solid rgba(155,202,255,.3);
  border-radius:16px;
}
.lesson-space-orbit-animation__intro{
  display:grid;
  gap:5px;
}
.lesson-space-orbit-animation__intro > span{
  justify-self:start;
  padding:5px 9px;
  border-radius:999px;
  background:#234579;
  color:#dff1ff;
  font-size:11px;
  font-weight:850;
}
.lesson-space-orbit-animation__intro strong{
  font-size:19px;
  line-height:1.25;
}
.lesson-space-orbit-animation__intro p,
.lesson-space-orbit-animation__note{
  margin:0;
  color:#c3d5ef;
  line-height:1.5;
}
.lesson-space-orbit-animation__stage{
  position:relative;
  min-height:300px;
  overflow:hidden;
  border:1px solid rgba(155,202,255,.28);
  border-radius:12px;
  background:#071127;
}
.lesson-space-orbit-animation__stage canvas{
  display:block;
  width:100%;
  height:380px;
  min-height:280px;
  touch-action:manipulation;
  cursor:pointer;
}
.lesson-space-orbit-animation__legend{
  position:absolute;
  top:10px;
  right:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:6px 8px;
  border-radius:8px;
  background:rgba(4,10,29,.72);
  color:#f4f8ff;
  font-size:11px;
  font-weight:750;
}
.lesson-space-orbit-animation__legend span{
  display:flex;
  align-items:center;
  gap:5px;
}
.lesson-space-orbit-animation__legend i{
  display:block;
  width:18px;
  height:8px;
  border-radius:50%;
}
.lesson-space-orbit-animation__legend .is-orbit{
  border:1px solid #a8d2ff;
}
.lesson-space-orbit-animation__legend .is-object{
  width:9px;
  height:9px;
  background:#ffd45b;
}
.lesson-space-orbit-animation__controls{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px;
}
.lesson-space-orbit-animation__controls > span{
  color:#c3d5ef;
  font-size:13px;
}
.lesson-space-orbit-animation__planet-area{
  display:grid;
  gap:9px;
}
.lesson-space-orbit-animation__planet-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.lesson-space-orbit-animation__planet-buttons > button{
  flex:1 1 90px;
}
.lesson-space-orbit-animation__planet-detail{
  display:grid;
  grid-template-columns:minmax(100px,140px) minmax(0,1fr);
  gap:12px;
  align-items:center;
  padding:10px;
  border:1px solid rgba(155,202,255,.3);
  border-radius:12px;
  background:#101f42;
}
.lesson-space-orbit-animation__planet-detail img{
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  border-radius:9px;
  background:#071127;
}
.lesson-space-orbit-animation__planet-detail > div{
  display:grid;
  gap:5px;
}
.lesson-space-orbit-animation__planet-detail strong{
  font-size:18px;
}
.lesson-space-orbit-animation__planet-detail p,
.lesson-space-orbit-animation__planet-detail small{
  margin:0;
  color:#d5e3f6;
  line-height:1.45;
}
.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen):has(.lesson-space-orbit-animation)
  .lesson-space-orbit-animation{
  height:100%;
  min-height:0;
}
.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen):has(.lesson-space-orbit-animation)
  .lesson-space-orbit-animation__stage,
.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen):has(.lesson-space-orbit-animation)
  .lesson-space-orbit-animation__stage canvas{
  height:100%;
  min-height:0;
}
@media (max-width:600px){
  .lesson-space-orbit-animation{
    padding:9px;
  }
  .lesson-space-orbit-animation__intro strong{
    font-size:16px;
  }
  .lesson-space-orbit-animation__stage canvas{
    height:300px;
  }
  .lesson-space-orbit-animation__planet-detail{
    grid-template-columns:88px minmax(0,1fr);
  }
}

.lesson-solar-eclipse-3d__monthly-cases > button.is-active{
  border-color:#23785f;
  background:#dff8ee;
  color:#145b47;
  box-shadow:0 0 0 3px rgba(35,120,95,.14);
}
.lesson-solar-eclipse-3d__monthly-cases > button:not(.is-active){
  border-color:#cbd9ec;
  background:#f4f7fb;
  color:#445a7d;
}

@media (max-width:680px){
  .lesson-solar-eclipse-3d[data-solar-eclipse-purpose="monthly"] .lesson-solar-eclipse-3d__plane-key{
    display:none;
  }
  .lesson-solar-eclipse-3d[data-solar-eclipse-purpose="monthly"] .lesson-solar-eclipse-3d__stage::before{
    content:"Sarı: Dünya düzlemi · Turkuaz: Ay düzlemi · Pembe: düğüm";
    position:absolute;
    z-index:3;
    top:8px;
    left:8px;
    right:8px;
    padding:5px 7px;
    border:1px solid rgba(199,220,255,.28);
    border-radius:8px;
    background:rgba(4,10,29,.76);
    color:#f4f8ff;
    font-size:9px;
    font-weight:850;
    line-height:1.25;
    text-align:center;
    pointer-events:none;
  }
  .lesson-solar-eclipse-3d__monthly-story{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .lesson-solar-eclipse-3d__monthly-cases{
    grid-template-columns:1fr;
  }
}

.lesson-space-orbit-animation__facts{
  display:grid;
  gap:8px;
  padding:11px 13px;
  border:1px solid rgba(155,202,255,.3);
  border-radius:12px;
  background:#101f42;
}
.lesson-space-orbit-animation__facts > div{
  display:grid;
  gap:5px;
}
.lesson-space-orbit-animation__facts strong{
  color:#f4f8ff;
  font-size:15px;
}
.lesson-space-orbit-animation__facts ul{
  display:grid;
  gap:4px;
  margin:0;
  padding-left:19px;
  color:#d5e3f6;
  line-height:1.45;
}

.animation-card__visual--scale{
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 25%,rgba(255,255,255,.75) 0 1px,transparent 2px),
    radial-gradient(circle at 72% 68%,rgba(255,255,255,.55) 0 1px,transparent 2px),
    radial-gradient(circle at 45% 78%,rgba(255,255,255,.5) 0 1px,transparent 2px),
    linear-gradient(145deg,#071127,#101d3b);
}
.animation-card__scale-line{
  position:absolute;
  top:50%;
  left:16%;
  right:8%;
  height:1px;
  background:linear-gradient(90deg,rgba(255,213,91,.8),rgba(121,170,255,.35));
}
.animation-card__scale-sun,
.animation-card__scale-planet{
  position:absolute;
  z-index:2;
  top:50%;
  display:block;
  border-radius:50%;
  transform:translate(-50%,-50%);
}
.animation-card__scale-sun{
  left:15%;
  width:17px;
  height:17px;
  background:#ffd45b;
  box-shadow:0 0 13px 5px rgba(255,184,45,.55);
}
.animation-card__scale-planet{
  width:7px;
  height:7px;
  border:2px solid #8ec5ff;
  background:#16284b;
  box-shadow:0 0 0 3px rgba(142,197,255,.12);
}
.animation-card__scale-planet.is-one{left:25%;}
.animation-card__scale-planet.is-two{left:37%;}
.animation-card__scale-planet.is-three{left:58%;}
.animation-card__scale-planet.is-four{left:87%;}

.lesson-scale-solar-system{
  display:grid;
  gap:12px;
  min-width:0;
  padding:14px;
  border:1px solid rgba(155,202,255,.3);
  border-radius:16px;
  background:#0b1733;
  color:#f4f8ff;
}
.lesson-scale-solar-system__intro{
  display:grid;
  gap:5px;
}
.lesson-scale-solar-system__intro > span{
  justify-self:start;
  padding:5px 9px;
  border-radius:999px;
  background:#234579;
  color:#dff1ff;
  font-size:11px;
  font-weight:850;
}
.lesson-scale-solar-system__intro strong{
  font-size:20px;
  line-height:1.25;
}
.lesson-scale-solar-system__intro p,
.lesson-scale-solar-system__note{
  margin:0;
  color:#c3d5ef;
  line-height:1.55;
}
.lesson-scale-solar-system__truth{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:11px;
  align-items:center;
  padding:11px 13px;
  border:1px solid rgba(255,213,91,.42);
  border-radius:12px;
  background:rgba(103,77,22,.28);
}
.lesson-scale-solar-system__truth > span{
  display:grid;
  width:38px;
  height:38px;
  place-items:center;
  border-radius:50%;
  background:#ffd45b;
  color:#29324a;
  font-size:21px;
  font-weight:950;
}
.lesson-scale-solar-system__truth p{margin:0;color:#f5e8b2;line-height:1.5;}
.lesson-scale-solar-system__truth strong{color:#fff4c3;}

.lesson-scale-solar-system__controls{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  align-items:center;
}
.lesson-scale-solar-system__zoom-controls{
  display:flex;
  flex:1 1 440px;
  flex-wrap:wrap;
  gap:7px;
}
.lesson-scale-solar-system__zoom-controls > button{
  flex:1 1 125px;
  min-height:44px;
}
.lesson-scale-solar-system__marker-toggle{
  display:flex;
  min-height:44px;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border:1px solid rgba(155,202,255,.34);
  border-radius:10px;
  background:#101f42;
  color:#e9f3ff;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
}
.lesson-scale-solar-system__marker-toggle input{
  width:18px;
  height:18px;
  margin:0;
  accent-color:#ffd45b;
}
.lesson-scale-solar-system__controls > output{
  flex:1 1 190px;
  color:#c8dbf5;
  font-size:13px;
  font-weight:800;
  text-align:right;
}

.lesson-scale-solar-system__stage{
  position:relative;
  min-height:340px;
  overflow:hidden;
  border:1px solid rgba(155,202,255,.28);
  border-radius:13px;
  background:#050b1d;
}
.lesson-scale-solar-system__stage canvas{
  display:block;
  width:100%;
  height:460px;
  min-height:340px;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
  cursor:grab;
}
.lesson-scale-solar-system__stage canvas.is-dragging{cursor:grabbing;}
.lesson-scale-solar-system__stage-key{
  position:absolute;
  z-index:2;
  top:10px;
  left:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px 12px;
  max-width:calc(100% - 20px);
  padding:6px 8px;
  border-radius:8px;
  background:rgba(4,10,29,.78);
  color:#e6f1ff;
  font-size:11px;
  font-weight:750;
  pointer-events:none;
}
.lesson-scale-solar-system__stage-key span{
  display:flex;
  align-items:center;
  gap:5px;
}
.lesson-scale-solar-system__stage-key i{
  display:block;
  width:12px;
  height:12px;
  border-radius:50%;
}
.lesson-scale-solar-system__stage-key .is-location{
  border:2px dashed #c8dcfa;
}
.lesson-scale-solar-system__stage-key .is-body{
  width:9px;
  height:9px;
  background:#ffd45b;
  box-shadow:0 0 5px rgba(255,213,91,.8);
}
.lesson-scale-solar-system__gesture{
  position:absolute;
  z-index:2;
  right:10px;
  bottom:39px;
  max-width:calc(100% - 20px);
  padding:5px 8px;
  border-radius:7px;
  background:rgba(4,10,29,.75);
  color:#cfdef3;
  font-size:11px;
  font-weight:750;
  pointer-events:none;
}
.lesson-scale-solar-system__stage > p{
  position:absolute;
  z-index:2;
  right:0;
  bottom:0;
  left:0;
  margin:0;
  padding:7px 10px;
  background:rgba(4,10,29,.82);
  color:#d7e7fb;
  font-size:12px;
  line-height:1.4;
  text-align:center;
  pointer-events:none;
}

.lesson-scale-solar-system__object-buttons{
  display:grid;
  grid-template-columns:repeat(9,minmax(72px,1fr));
  gap:6px;
}
.lesson-scale-solar-system__object-buttons > button{
  min-height:44px;
  padding:7px 6px;
  font-size:12px;
  line-height:1.2;
}
.lesson-scale-solar-system__object-buttons > button.is-active{
  border-color:#ffd45b;
  background:#fff4c2;
  color:#4d3b00;
  box-shadow:0 0 0 2px rgba(255,213,91,.18);
}

.lesson-scale-solar-system__detail{
  display:grid;
  grid-template-columns:minmax(145px,.75fr) minmax(420px,2fr) minmax(220px,1.2fr);
  gap:12px;
  align-items:center;
  padding:12px;
  border:1px solid rgba(155,202,255,.3);
  border-radius:12px;
  background:#101f42;
}
.lesson-scale-solar-system__identity{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:9px;
  align-items:center;
}
.lesson-scale-solar-system__identity > i{
  display:block;
  width:38px;
  height:38px;
  border-radius:50%;
  background:#ffd45b;
  box-shadow:0 0 12px rgba(255,213,91,.48);
}
.lesson-scale-solar-system__identity > div{display:grid;gap:2px;}
.lesson-scale-solar-system__identity span{color:#9fb8d9;font-size:11px;font-weight:850;text-transform:uppercase;}
.lesson-scale-solar-system__identity strong{font-size:19px;}
.lesson-scale-solar-system__detail dl{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
  margin:0;
}
.lesson-scale-solar-system__detail dl > div{
  display:grid;
  gap:3px;
  min-width:0;
  padding:8px;
  border-radius:9px;
  background:#172a52;
}
.lesson-scale-solar-system__detail dt{color:#9fb8d9;font-size:10px;font-weight:850;text-transform:uppercase;}
.lesson-scale-solar-system__detail dd{margin:0;color:#f2f7ff;font-size:13px;font-weight:850;line-height:1.3;}
.lesson-scale-solar-system__detail > p{margin:0;color:#d5e3f6;line-height:1.5;}

.lesson-scale-solar-system__numbers{
  border:1px solid rgba(155,202,255,.3);
  border-radius:12px;
  background:#101f42;
}
.lesson-scale-solar-system__numbers summary{
  padding:12px 14px;
  color:#eef5ff;
  font-weight:850;
  cursor:pointer;
}
.lesson-scale-solar-system__numbers .table-wrap{padding:0 12px 10px;}
.lesson-scale-solar-system__numbers table{min-width:720px;color:#eef5ff;}
.lesson-scale-solar-system__numbers th{color:#b9d0ee;}
.lesson-scale-solar-system__numbers th,
.lesson-scale-solar-system__numbers td{border-color:rgba(155,202,255,.2);}
.lesson-scale-solar-system__numbers > p{
  margin:0;
  padding:0 13px 13px;
  color:#c3d5ef;
  line-height:1.5;
}
.lesson-scale-solar-system__note{
  padding:10px 12px;
  border-left:4px solid #638bc3;
  border-radius:8px;
  background:#101f42;
}
.lesson-scale-solar-system__note strong{color:#eef5ff;}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen):has(.lesson-scale-solar-system)
  .lesson-scale-solar-system__stage canvas{
  height:min(58vh,620px);
}

@media (max-width:1050px){
  .lesson-scale-solar-system__object-buttons{grid-template-columns:repeat(5,minmax(80px,1fr));}
  .lesson-scale-solar-system__detail{grid-template-columns:minmax(140px,.7fr) minmax(0,2fr);}
  .lesson-scale-solar-system__detail > p{grid-column:1 / -1;}
}

@media (max-width:720px){
  .lesson-scale-solar-system{padding:10px;}
  .lesson-scale-solar-system__intro strong{font-size:17px;}
  .lesson-scale-solar-system__controls > output{text-align:left;}
  .lesson-scale-solar-system__stage canvas{height:390px;}
  .lesson-scale-solar-system__stage-key{right:8px;left:8px;justify-content:center;}
  .lesson-scale-solar-system__gesture{display:none;}
  .lesson-scale-solar-system__object-buttons{grid-template-columns:repeat(3,minmax(84px,1fr));}
  .lesson-scale-solar-system__detail{grid-template-columns:1fr;}
  .lesson-scale-solar-system__detail dl{grid-template-columns:repeat(2,minmax(0,1fr));}
  .lesson-scale-solar-system__detail > p{grid-column:auto;}
}

@media (max-width:430px){
  .lesson-scale-solar-system__truth{grid-template-columns:1fr;}
  .lesson-scale-solar-system__truth > span{width:32px;height:32px;}
  .lesson-scale-solar-system__zoom-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}
  .lesson-scale-solar-system__zoom-controls > button:nth-child(2){grid-column:1 / -1;grid-row:2;}
  .lesson-scale-solar-system__stage canvas{height:350px;min-height:320px;}
  .lesson-scale-solar-system__stage-key{font-size:9px;}
  .lesson-scale-solar-system__detail dl{grid-template-columns:1fr;}
}

/* 5. sınıf Bilgi 5: Kesirden Ondalığa ve Yüzdeye */
.lesson-fraction-journey{
  display:grid;
  gap:15px;
  width:100%;
  padding:18px;
  border:1px solid #b9d7f4;
  border-radius:19px;
  background:linear-gradient(145deg,#f5fbff 0%,#fff7fb 100%);
}

.lesson-fraction-journey__intro{
  display:grid;
  gap:5px;
}

.lesson-fraction-journey__intro > span{
  color:#8f2a63;
  font-size:12px;
  font-weight:950;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.lesson-fraction-journey__intro > strong{
  color:#173550;
  font-size:clamp(20px,2.6vw,28px);
  line-height:1.25;
}

.lesson-fraction-journey__intro > p{
  margin:0;
  color:#5c7083;
  font-size:14px;
  font-weight:750;
  line-height:1.55;
}

.lesson-fraction-journey__presets{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.lesson-fraction-journey__presets .secondary-button{
  min-width:64px;
  min-height:44px;
  padding:8px 12px;
  border-color:#b8cfe3;
  color:#31536d;
  background:#fff;
  font-size:16px;
  font-weight:950;
  touch-action:manipulation;
}

.lesson-fraction-journey__presets .secondary-button.is-active{
  border-color:#2563a8;
  color:#fff;
  background:#2563a8;
  box-shadow:0 0 0 3px rgba(37,99,168,.14);
}

.lesson-fraction-journey__inputs{
  display:grid;
  grid-template-columns:repeat(2,minmax(150px,1fr)) repeat(2,max-content);
  gap:10px;
  align-items:end;
}

.lesson-fraction-journey__inputs label{
  display:grid;
  grid-template-columns:max-content minmax(70px,1fr);
  gap:4px 10px;
  align-items:center;
  min-height:70px;
  padding:10px 12px;
  border:1px solid #c7ddee;
  border-radius:13px;
  color:#31536d;
  background:#fff;
  font-size:13px;
  font-weight:950;
}

.lesson-fraction-journey__inputs label small{
  grid-column:1 / -1;
  color:#6a7e90;
  font-size:11px;
  font-weight:750;
}

.lesson-fraction-journey__inputs input{
  width:100%;
  min-height:44px;
  padding:8px 10px;
  border:2px solid #b8cfe3;
  border-radius:10px;
  color:#173550;
  background:#f7fbff;
  font:950 19px/1 Nunito,Arial,sans-serif;
}

.lesson-fraction-journey__inputs > button{
  min-height:48px;
  white-space:nowrap;
}

.lesson-fraction-journey__equation{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:112px;
  padding:13px;
  border:2px solid #c7ddee;
  border-radius:16px;
  background:#fff;
}

.lesson-fraction-journey__equation > b{
  color:#c95710;
  font-size:30px;
  font-weight:950;
}

.lesson-fraction-journey__equation > div:not(.lesson-fraction-journey__fraction){
  display:grid;
  gap:4px;
  min-width:145px;
  padding:10px 12px;
  border:1px solid #d7e3ed;
  border-radius:12px;
  text-align:center;
  background:#f8fbfd;
}

.lesson-fraction-journey__equation > div > span{
  color:#667b8e;
  font-size:10px;
  font-weight:950;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.lesson-fraction-journey__equation > div > strong{
  color:#173550;
  font-size:clamp(21px,3vw,30px);
  line-height:1.2;
}

.lesson-fraction-journey__equation > div:nth-of-type(3) > strong{color:#16806f;}
.lesson-fraction-journey__equation > div:nth-of-type(4) > strong{color:#8f2a63;}

.lesson-fraction-journey__fraction{
  display:grid;
  min-width:80px;
  padding:5px 12px;
  color:#2563a8;
  font-size:30px;
  font-weight:950;
  line-height:1;
  text-align:center;
}

.lesson-fraction-journey__fraction i{
  display:block;
  width:100%;
  height:4px;
  margin:5px 0;
  border-radius:999px;
  background:#c95710;
}

.lesson-fraction-journey__stage{
  width:100%;
  min-width:0;
  padding:6px;
  border:1px solid #c8dceb;
  border-radius:16px;
  background:#f4f9fd;
  overflow-x:hidden;
  overflow-y:hidden;
  touch-action:pan-y;
}

.lesson-fraction-journey__stage canvas{
  display:block;
  max-width:100%;
  border-radius:12px;
  background:#f4f9fd;
}

.lesson-fraction-journey__player{
  display:grid;
  grid-template-columns:repeat(4,max-content) minmax(150px,1fr);
  gap:8px;
  align-items:center;
}

.lesson-fraction-journey__player > button{
  min-height:44px;
  touch-action:manipulation;
}

.lesson-fraction-journey__player > button:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.lesson-fraction-journey__progress{
  height:12px;
  overflow:hidden;
  border:1px solid #bfd2e1;
  border-radius:999px;
  background:#e7eef4;
}

.lesson-fraction-journey__progress i{
  display:block;
  width:20%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#2563a8,#16806f,#8f2a63);
  transition:width .25s ease;
}

.lesson-fraction-journey__steps{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}

.lesson-fraction-journey__steps li{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:8px;
  align-content:start;
  min-height:126px;
  padding:11px;
  border:2px solid #d2e0ea;
  border-radius:13px;
  background:#fff;
  opacity:.72;
  transition:border-color .18s ease,background .18s ease,opacity .18s ease,transform .18s ease;
}

.lesson-fraction-journey__steps li > span{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  color:#496276;
  background:#e8f0f6;
  font-size:15px;
  font-weight:950;
}

.lesson-fraction-journey__steps li > div{
  display:grid;
  gap:4px;
}

.lesson-fraction-journey__steps li strong{
  color:#173550;
  font-size:13px;
  line-height:1.3;
}

.lesson-fraction-journey__steps li p{
  margin:0;
  color:#5c7083;
  font-size:11px;
  font-weight:750;
  line-height:1.4;
}

.lesson-fraction-journey__steps li.is-active{
  border-color:#2563a8;
  background:#edf6ff;
  opacity:1;
  transform:translateY(-3px);
  box-shadow:0 6px 15px rgba(37,99,168,.11);
}

.lesson-fraction-journey__steps li.is-active > span{
  color:#fff;
  background:#2563a8;
}

.lesson-fraction-journey__steps li.is-complete{
  border-color:#78cdbb;
  background:#effbf8;
  opacity:1;
}

.lesson-fraction-journey__steps li.is-complete > span{
  color:#fff;
  background:#16806f;
}

.lesson-fraction-journey__division-work{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.lesson-fraction-journey__division-work article{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:9px;
  min-height:82px;
  padding:11px;
  border:1px solid #d2e0ea;
  border-radius:12px;
  background:#fff;
}

.lesson-fraction-journey__division-work article.is-current{
  border-color:#e6a06c;
  background:#fff7ef;
}

.lesson-fraction-journey__division-work article > span{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:10px;
  color:#c95710;
  background:#fff0e3;
  font-weight:950;
}

.lesson-fraction-journey__division-work article > div{
  display:grid;
  gap:3px;
}

.lesson-fraction-journey__division-work strong{
  color:#173550;
  font-size:13px;
}

.lesson-fraction-journey__division-work p{
  margin:0;
  color:#5c7083;
  font-size:12px;
  font-weight:750;
  line-height:1.45;
}

.lesson-fraction-journey__explanation{
  min-height:52px;
  margin:0;
  padding:12px 14px;
  border-left:4px solid #16806f;
  border-radius:0 12px 12px 0;
  color:#214b45;
  background:#e8faf5;
  font-size:14px;
  font-weight:850;
  line-height:1.5;
}

.lesson-fraction-road{
  display:grid;
  grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr) 36px minmax(0,1fr) 36px minmax(0,1fr);
  gap:8px;
  align-items:stretch;
  width:100%;
}

.lesson-fraction-road > article{
  display:grid;
  align-content:start;
  justify-items:center;
  gap:9px;
  min-height:190px;
  padding:15px;
  border:2px solid #c7ddee;
  border-radius:15px;
  text-align:center;
  background:#f7fbff;
}

.lesson-fraction-road > article:nth-of-type(2){border-color:#e6a06c;background:#fff7ef;}
.lesson-fraction-road > article:nth-of-type(3){border-color:#78cdbb;background:#effbf8;}
.lesson-fraction-road > article:nth-of-type(4){border-color:#e4a5c6;background:#fff4f9;}

.lesson-fraction-road > b{
  display:grid;
  place-items:center;
  color:#c95710;
  font-size:31px;
}

.lesson-fraction-road article > span{
  color:#5c7083;
  font-size:11px;
  font-weight:950;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.lesson-fraction-road article > strong{
  color:#173550;
  font-size:clamp(25px,4vw,38px);
}

.lesson-fraction-road article > p{
  margin:0;
  color:#496276;
  font-size:13px;
  font-weight:750;
  line-height:1.45;
}

.lesson-fraction-road__fraction{
  display:grid;
  min-width:84px;
}

.lesson-fraction-road__fraction i{
  padding:3px 12px;
  font-style:normal;
}

.lesson-fraction-road__fraction i:first-child{
  border-bottom:4px solid #c95710;
}

.lesson-division-method{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  width:100%;
}

.lesson-division-method article{
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  gap:11px;
  min-height:130px;
  padding:15px;
  border:2px solid #d1e0ea;
  border-radius:15px;
  background:#fff;
}

.lesson-division-method article > span{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:14px;
  color:#fff;
  background:#c95710;
  font-size:21px;
  font-weight:950;
}

.lesson-division-method article > div{
  display:grid;
  align-content:start;
  gap:6px;
}

.lesson-division-method strong{
  color:#173550;
  font-size:16px;
}

.lesson-division-method p{
  margin:0;
  color:#496276;
  font-size:13px;
  font-weight:750;
  line-height:1.5;
}

.lesson-long-division{
  display:grid;
  gap:15px;
  width:100%;
  padding:18px;
  border:1px solid #f0c59f;
  border-radius:19px;
  background:linear-gradient(145deg,#fffaf5 0%,#f5fbff 100%);
}

.lesson-long-division__intro{
  display:grid;
  gap:5px;
}

.lesson-long-division__intro > span{
  color:#c95710;
  font-size:12px;
  font-weight:950;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.lesson-long-division__intro > strong{
  color:#173550;
  font-size:clamp(20px,2.6vw,28px);
  line-height:1.25;
}

.lesson-long-division__intro > p{
  margin:0;
  color:#5c7083;
  font-size:14px;
  font-weight:750;
  line-height:1.55;
}

.lesson-long-division__inputs{
  display:grid;
  grid-template-columns:repeat(2,minmax(150px,1fr)) repeat(2,max-content);
  gap:10px;
  align-items:end;
}

.lesson-long-division__inputs label{
  display:grid;
  gap:5px;
  padding:10px 12px;
  border:1px solid #c7ddee;
  border-radius:13px;
  color:#31536d;
  background:#fff;
  font-size:13px;
  font-weight:950;
}

.lesson-long-division__inputs input{
  width:100%;
  min-height:44px;
  padding:8px 10px;
  border:2px solid #b8cfe3;
  border-radius:10px;
  color:#173550;
  background:#f7fbff;
  font:950 19px/1 Nunito,Arial,sans-serif;
}

.lesson-long-division__inputs > button{
  min-height:48px;
  white-space:nowrap;
}

.lesson-long-division__workspace{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);
  gap:12px;
  align-items:start;
}

.lesson-long-division__visual,
.lesson-long-division__guide{
  display:grid;
  gap:12px;
  min-width:0;
  padding:15px;
  border:2px solid #c7ddee;
  border-radius:16px;
  background:#fff;
}

.lesson-long-division__status{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.lesson-long-division__status > span{
  padding:6px 9px;
  border-radius:999px;
  color:#93451f;
  background:#fff0e3;
  font-size:11px;
  font-weight:950;
}

.lesson-long-division__status > strong{
  color:#173550;
  font-size:22px;
}

.lesson-long-division__board-wrap{
  width:100%;
  min-width:0;
  min-height:390px;
  overflow-x:auto;
  overflow-y:hidden;
  border:1px solid #d6e1e9;
  border-radius:15px;
  background:
    linear-gradient(rgba(37,99,168,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(37,99,168,.055) 1px,transparent 1px),
    #fffefb;
  background-size:24px 24px;
  overscroll-behavior-x:contain;
}

.lesson-long-division__board{
  display:grid;
  place-items:start center;
  min-width:390px;
  min-height:388px;
  padding:28px 20px 24px;
  color:#173550;
}

.lesson-long-division__layout{
  display:grid;
  grid-template-columns:minmax(240px,max-content) minmax(120px,max-content);
  align-items:start;
  justify-content:center;
  font-family:"Roboto Mono","Courier New",monospace;
  font-variant-numeric:tabular-nums;
}

.lesson-long-division__calculation{
  min-width:240px;
  padding:0 11px 22px 0;
}

.lesson-long-division__dividend{
  width:5.2ch;
  min-height:62px;
  padding-top:2px;
  color:#173550;
  font-size:42px;
  font-weight:800;
  line-height:1.25;
  text-align:right;
}

.lesson-long-division__work{
  display:grid;
  justify-items:start;
  gap:4px;
}

.lesson-long-division__subtract,
.lesson-long-division__partial,
.lesson-long-division__remainder{
  width:5.3ch;
  margin-left:calc(var(--ld-depth) * 1.2ch);
  font-size:34px;
  font-weight:750;
  line-height:1.18;
  text-align:right;
}

.lesson-long-division__subtract{
  display:flex;
  align-items:baseline;
  justify-content:flex-end;
  gap:.08ch;
  padding-bottom:3px;
  border-bottom:3px solid #173550;
  color:#c95710;
}

.lesson-long-division__subtract > span{
  color:#173550;
  font-weight:500;
}

.lesson-long-division__subtract > b{
  font:inherit;
}

.lesson-long-division__partial{
  color:#173550;
}

.lesson-long-division__partial em{
  color:#c95710;
  font-style:normal;
}

.lesson-long-division__remainder{
  color:#16806f;
}

.lesson-long-division__remainder em{
  margin-left:3px;
  color:#c95710;
  font-style:normal;
}

.lesson-long-division__answer{
  display:grid;
  grid-template-rows:62px max-content;
  align-content:start;
  min-width:120px;
  border-left:4px solid #16806f;
}

.lesson-long-division__answer > strong{
  display:flex;
  align-items:flex-start;
  min-height:62px;
  padding:1px 14px 7px;
  border-bottom:4px solid #16806f;
  color:#4b8b2a;
  font-size:42px;
  font-weight:800;
  line-height:1.25;
}

.lesson-long-division__answer > span{
  padding:7px 14px;
  color:#2563a8;
  font-size:clamp(29px,4vw,39px);
  font-weight:800;
  line-height:1.25;
  white-space:nowrap;
}

.lesson-long-division__answer > span em{
  color:#c95710;
  font-style:normal;
}

.lesson-long-division__player{
  display:grid;
  grid-template-columns:repeat(4,max-content);
  gap:8px;
}

.lesson-long-division__player > button{
  min-height:44px;
  touch-action:manipulation;
}

.lesson-long-division__player > button:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.lesson-long-division__narration{
  min-height:84px;
  margin:0;
  padding:13px 14px;
  border-left:5px solid #c95710;
  border-radius:0 12px 12px 0;
  color:#613619;
  background:#fff5eb;
  font-size:14px;
  font-weight:850;
  line-height:1.55;
}

.lesson-long-division__why{
  display:grid;
  gap:9px;
  padding:13px;
  border:2px solid #f0c59f;
  border-radius:14px;
  background:#fffaf5;
}

.lesson-long-division__why[hidden]{
  display:none;
}

.lesson-long-division__why > strong{
  color:#7b3d16;
  font-size:16px;
  line-height:1.35;
}

.lesson-long-division__why > div{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}

.lesson-long-division__why article{
  display:grid;
  align-content:start;
  gap:5px;
  min-height:126px;
  padding:11px;
  border:1px solid #e5d3c2;
  border-radius:11px;
  background:#fff;
}

.lesson-long-division__why article strong{
  color:#173550;
  font-size:12px;
  line-height:1.35;
}

.lesson-long-division__why article p{
  margin:0;
  color:#496276;
  font-size:12px;
  font-weight:750;
  line-height:1.5;
}

.lesson-long-division__result{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.lesson-long-division__result article{
  display:grid;
  gap:4px;
  padding:11px 12px;
  border:1px solid #78cdbb;
  border-radius:12px;
  background:#effbf8;
}

.lesson-long-division__result article:nth-child(2){
  border-color:#e4a5c6;
  background:#fff4f9;
}

.lesson-long-division__result article > span{
  color:#5c7083;
  font-size:10px;
  font-weight:950;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.lesson-long-division__result article > strong{
  color:#16806f;
  font-size:clamp(20px,3vw,27px);
}

.lesson-long-division__result article:nth-child(2) > strong{
  color:#8f2a63;
}

.lesson-long-division__result > p{
  grid-column:1 / -1;
  margin:0;
  color:#5c7083;
  font-size:12px;
  font-weight:750;
  line-height:1.45;
}

.lesson-long-division__guide{
  align-content:start;
}

.lesson-long-division__guide > strong{
  color:#173550;
  font-size:18px;
}

.lesson-long-division__guide ol{
  display:grid;
  gap:7px;
  margin:0;
  padding:0;
  list-style:none;
}

.lesson-long-division__guide li{
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  gap:8px;
  padding:9px;
  border:1px solid #d4e0e9;
  border-radius:11px;
  background:#f9fbfd;
  opacity:.68;
  transition:border-color .18s ease,background .18s ease,opacity .18s ease,transform .18s ease;
}

.lesson-long-division__guide li > span{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:9px;
  color:#496276;
  background:#e8f0f6;
  font-size:13px;
  font-weight:950;
}

.lesson-long-division__guide li > div{
  display:grid;
  gap:3px;
}

.lesson-long-division__guide li strong{
  color:#173550;
  font-size:12px;
  line-height:1.3;
}

.lesson-long-division__guide li p{
  margin:0;
  color:#5c7083;
  font-size:11px;
  font-weight:750;
  line-height:1.4;
}

.lesson-long-division__guide li.is-active{
  border-color:#c95710;
  background:#fff5eb;
  opacity:1;
  transform:translateX(3px);
}

.lesson-long-division__guide li.is-active > span{
  color:#fff;
  background:#c95710;
}

.lesson-long-division__guide li.is-complete{
  border-color:#78cdbb;
  background:#effbf8;
  opacity:1;
}

.lesson-long-division__guide li.is-complete > span{
  color:#fff;
  background:#16806f;
}

.lesson-long-division__examples{
  display:grid;
  gap:10px;
  padding:14px;
  border:1px solid #d2e0ea;
  border-radius:15px;
  background:#fff;
}

.lesson-long-division__examples > div:first-child{
  display:grid;
  gap:3px;
}

.lesson-long-division__examples > div:first-child strong{
  color:#173550;
  font-size:17px;
}

.lesson-long-division__examples > div:first-child span{
  color:#5c7083;
  font-size:12px;
  font-weight:750;
}

.lesson-long-division__example-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.lesson-long-division__example-buttons .secondary-button{
  min-width:72px;
  min-height:41px;
  padding:7px 10px;
  border-color:#c6d8e6;
  color:#31536d;
  background:#f8fbfd;
  font-size:14px;
  font-weight:950;
  touch-action:manipulation;
}

.lesson-long-division__example-buttons .secondary-button.is-active{
  border-color:#c95710;
  color:#fff;
  background:#c95710;
  box-shadow:0 0 0 3px rgba(201,87,16,.13);
}

@keyframes lesson-long-division-step-in{
  from{opacity:.18;transform:translateY(-7px);}
  to{opacity:1;transform:translateY(0);}
}

.lesson-long-division__work .is-new{
  animation:lesson-long-division-step-in .28s ease-out both;
}

@media (prefers-reduced-motion:reduce){
  .lesson-long-division__work .is-new{animation:none;}
}

.lesson-percent-bridge{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(210px,.8fr) minmax(0,1fr);
  gap:12px;
  align-items:stretch;
  width:100%;
}

.lesson-percent-bridge article{
  display:grid;
  align-content:start;
  gap:9px;
  min-height:180px;
  padding:16px;
  border:2px solid #78cdbb;
  border-radius:15px;
  background:#effbf8;
}

.lesson-percent-bridge article.is-result{
  border-color:#e4a5c6;
  background:#fff4f9;
}

.lesson-percent-bridge article span{
  color:#5c7083;
  font-size:11px;
  font-weight:950;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.lesson-percent-bridge article strong{
  color:#16806f;
  font-size:clamp(25px,4vw,38px);
}

.lesson-percent-bridge article.is-result strong{color:#8f2a63;}

.lesson-percent-bridge article p{
  margin:0;
  color:#496276;
  font-size:13px;
  font-weight:750;
  line-height:1.5;
}

.lesson-percent-bridge__operation{
  display:grid;
  place-items:center;
  align-content:center;
  gap:8px;
  min-height:180px;
  padding:14px;
  border:2px solid #e6a06c;
  border-radius:15px;
  background:#fff7ef;
}

.lesson-percent-bridge__operation strong{
  color:#173550;
  font-size:31px;
}

.lesson-percent-bridge__operation b{
  color:#c95710;
  font-size:25px;
}

.lesson-fraction-examples{
  display:grid;
  gap:13px;
  width:100%;
}

.lesson-fraction-examples__filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.lesson-fraction-examples__filters .secondary-button{
  min-height:44px;
  border-color:#bdd1e1;
  color:#31536d;
  background:#fff;
  touch-action:manipulation;
}

.lesson-fraction-examples__filters .secondary-button.is-active{
  border-color:#2563a8;
  color:#fff;
  background:#2563a8;
}

.lesson-fraction-examples__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
}

.lesson-fraction-examples__grid article{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:6px 9px;
  align-items:center;
  min-height:116px;
  padding:12px;
  border:1px solid #cbdce9;
  border-radius:13px;
  background:#fff;
}

.lesson-fraction-examples__grid article[hidden]{display:none;}

.lesson-fraction-examples__grid article > span{
  grid-row:1 / span 2;
  display:grid;
  place-items:center;
  min-width:54px;
  min-height:54px;
  padding:6px;
  border-radius:12px;
  color:#2563a8;
  background:#e9f3ff;
  font-size:18px;
  font-weight:950;
}

.lesson-fraction-examples__grid article > strong{
  color:#173550;
  font-size:13px;
  line-height:1.35;
}

.lesson-fraction-examples__grid article > b{
  color:#8f2a63;
  font-size:18px;
  text-align:right;
}

.lesson-fraction-examples__grid article > button{
  grid-column:2 / -1;
  min-height:36px;
  padding:6px 9px;
  border:1px solid #78cdbb;
  border-radius:9px;
  color:#116b5c;
  background:#effbf8;
  font:900 12px/1.2 Nunito,Arial,sans-serif;
  cursor:pointer;
  touch-action:manipulation;
}

.lesson-fraction-examples__grid article > button:hover{
  border-color:#16806f;
  background:#ddf7f0;
}

.lesson-fraction-examples__count{
  margin:0;
  color:#5c7083;
  font-size:13px;
  font-weight:850;
}

.lesson-fraction-percent-quiz{
  display:grid;
  gap:12px;
  width:100%;
  min-height:280px;
  padding:17px;
  border:2px solid #c7ddee;
  border-radius:16px;
  background:#fff;
  transition:border-color .18s ease,background .18s ease;
}

.lesson-fraction-percent-quiz.is-correct{
  border-color:#35a991;
  background:#effbf8;
}

.lesson-fraction-percent-quiz.is-wrong{
  border-color:#e6a06c;
  background:#fff7ef;
}

.lesson-fraction-percent-quiz__head{
  display:grid;
  gap:4px;
}

.lesson-fraction-percent-quiz__head span{
  color:#8f2a63;
  font-size:11px;
  font-weight:950;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.lesson-fraction-percent-quiz__head strong{
  color:#173550;
  font-size:20px;
}

.lesson-fraction-percent-quiz__question{
  margin:0;
  color:#173550;
  font-size:18px;
  font-weight:900;
  line-height:1.45;
}

.lesson-fraction-percent-quiz__choices{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
}

.lesson-fraction-percent-quiz__choices button{
  min-height:58px;
  padding:9px 11px;
  border:2px solid #c7ddee;
  border-radius:12px;
  color:#173550;
  background:#f7fbff;
  font:900 15px/1.3 Nunito,Arial,sans-serif;
  cursor:pointer;
  touch-action:manipulation;
}

.lesson-fraction-percent-quiz__choices button.is-selected{
  border-color:#2563a8;
  background:#e9f3ff;
  box-shadow:0 0 0 3px rgba(37,99,168,.12);
}

.lesson-fraction-percent-quiz__feedback{
  min-height:48px;
  margin:0;
  padding:11px 13px;
  border-radius:11px;
  color:#5c7083;
  background:#f2f6f9;
  font-size:13px;
  font-weight:800;
  line-height:1.5;
}

.lesson-fraction-percent-quiz.is-correct .lesson-fraction-percent-quiz__feedback{
  color:#116b5c;
  background:#ddf7f0;
}

.lesson-fraction-percent-quiz.is-wrong .lesson-fraction-percent-quiz__feedback{
  color:#93451f;
  background:#fff0e3;
}

.lesson-fraction-percent-quiz > .secondary-button{
  justify-self:start;
  min-height:44px;
}

.lesson-visual-card:is(:fullscreen,:-webkit-full-screen,.is-stage-fullscreen)
  :is(.lesson-fraction-journey,.lesson-long-division){
  align-content:start;
  width:min(1320px,100%);
  min-height:100%;
  margin:auto;
  padding:20px;
}

@media (max-width:1100px){
  .lesson-fraction-journey__inputs{
    grid-template-columns:repeat(2,minmax(150px,1fr));
  }

  .lesson-fraction-journey__inputs > button,
  .lesson-long-division__inputs > button{
    width:100%;
  }

  .lesson-long-division__inputs{
    grid-template-columns:repeat(2,minmax(150px,1fr));
  }

  .lesson-fraction-journey__player{
    grid-template-columns:repeat(4,max-content);
  }

  .lesson-fraction-journey__progress{
    grid-column:1 / -1;
  }

  .lesson-fraction-journey__steps{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .lesson-fraction-examples__grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width:930px){
  .lesson-long-division__workspace{
    grid-template-columns:1fr;
  }

  .lesson-long-division__guide ol{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:780px){
  .lesson-fraction-road{
    grid-template-columns:1fr;
  }

  .lesson-fraction-road > b{
    min-height:36px;
    transform:rotate(90deg);
  }

  .lesson-division-method,
  .lesson-fraction-journey__division-work{
    grid-template-columns:1fr;
  }

  .lesson-percent-bridge{
    grid-template-columns:1fr;
  }

  .lesson-percent-bridge__operation{
    min-height:140px;
  }

  .lesson-fraction-journey__steps{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .lesson-fraction-examples__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .lesson-fraction-percent-quiz__choices{
    grid-template-columns:1fr;
  }

  .lesson-long-division__player{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .lesson-long-division__player > button{
    width:100%;
  }

  .lesson-long-division__why > div{
    grid-template-columns:1fr;
  }

  .lesson-long-division__why article{
    min-height:0;
  }
}

@media (max-width:560px){
  .lesson-fraction-journey,
  .lesson-long-division{
    padding:13px;
  }

  .lesson-fraction-journey__inputs,
  .lesson-long-division__inputs{
    grid-template-columns:1fr;
  }

  .lesson-fraction-journey__equation{
    display:grid;
    grid-template-columns:1fr;
  }

  .lesson-fraction-journey__equation > b{
    line-height:.7;
    text-align:center;
  }

  .lesson-fraction-journey__equation > div:not(.lesson-fraction-journey__fraction){
    width:100%;
  }

  .lesson-fraction-journey__fraction{
    justify-self:center;
  }

  .lesson-fraction-journey__player{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .lesson-fraction-journey__player > button{
    width:100%;
    padding:8px 9px;
    font-size:12px;
  }

  .lesson-fraction-journey__steps,
  .lesson-fraction-examples__grid{
    grid-template-columns:1fr;
  }

  .lesson-fraction-journey__steps li{
    min-height:0;
  }

  .lesson-fraction-examples__filters{
    display:grid;
    grid-template-columns:1fr;
  }

  .lesson-fraction-examples__filters .secondary-button{
    width:100%;
  }

  .lesson-long-division__visual,
  .lesson-long-division__guide{
    padding:11px;
  }

  .lesson-long-division__board-wrap{
    min-height:360px;
  }

  .lesson-long-division__board{
    min-width:214px;
    min-height:358px;
    padding:18px 4px;
  }

  .lesson-long-division__layout{
    grid-template-columns:128px 68px;
  }

  .lesson-long-division__calculation{
    min-width:128px;
    padding-right:4px;
  }

  .lesson-long-division__dividend{
    width:4.8ch;
    min-height:46px;
    font-size:30px;
  }

  .lesson-long-division__subtract,
  .lesson-long-division__partial,
  .lesson-long-division__remainder{
    width:4.8ch;
    margin-left:calc(var(--ld-depth) * .72ch);
    font-size:25px;
  }

  .lesson-long-division__answer{
    grid-template-rows:46px max-content;
    min-width:68px;
    border-left-width:3px;
  }

  .lesson-long-division__answer > strong{
    min-height:46px;
    padding:1px 7px 5px;
    border-bottom-width:3px;
    font-size:30px;
  }

  .lesson-long-division__answer > span{
    padding:6px 7px;
    font-size:22px;
  }

  .lesson-long-division__guide ol,
  .lesson-long-division__result{
    grid-template-columns:1fr;
  }

  .lesson-long-division__result > p{
    grid-column:auto;
  }

  .lesson-long-division__example-buttons{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .lesson-long-division__example-buttons .secondary-button{
    width:100%;
  }
}

/* 7. sınıf sayı hazırlığı */
.lesson-number-warmup{
  --warmup-negative:#2563eb;
  --warmup-zero:#6b7280;
  --warmup-positive:#059669;
  display:grid;
  gap:18px;
  padding:20px;
  border:1px solid #dbe7f5;
  border-radius:20px;
  background:
    radial-gradient(circle at 8% 0%,rgba(37,99,235,.1),transparent 30%),
    radial-gradient(circle at 92% 0%,rgba(5,150,105,.1),transparent 30%),
    #fff;
  box-shadow:0 18px 44px rgba(31,56,91,.1);
}
.lesson-number-warmup button,
.lesson-number-warmup input{
  font:inherit;
}
.lesson-number-warmup button{
  min-height:44px;
  cursor:pointer;
  touch-action:manipulation;
}
.lesson-number-warmup__intro{
  display:grid;
  gap:6px;
  text-align:center;
}
.lesson-number-warmup__intro > span{
  justify-self:center;
  padding:5px 11px;
  border-radius:999px;
  background:#eef5ff;
  color:#1d4ed8;
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.lesson-number-warmup__intro > strong{
  color:#18283f;
  font-size:clamp(20px,2.7vw,30px);
  line-height:1.15;
}
.lesson-number-warmup__intro > p{
  max-width:760px;
  margin:0 auto;
  color:#56677d;
  line-height:1.6;
}

.lesson-signed-explorer__contexts{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.lesson-signed-explorer__contexts > button{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  grid-template-rows:auto auto;
  gap:1px 10px;
  align-items:center;
  padding:10px 12px;
  border:2px solid #dce6f3;
  border-radius:14px;
  background:#fff;
  color:#34445a;
  text-align:left;
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
.lesson-signed-explorer__contexts > button:hover,
.lesson-signed-explorer__contexts > button:focus-visible{
  border-color:#93b4df;
}
.lesson-signed-explorer__contexts > button:focus-visible,
.lesson-signed-explorer__quick-values > button:focus-visible,
.lesson-decimal-warmup__number > button:focus-visible,
.lesson-number-quiz__choices > button:focus-visible,
.lesson-number-quiz__next:focus-visible{
  outline:3px solid rgba(37,99,235,.26);
  outline-offset:2px;
}
.lesson-signed-explorer__contexts > button.is-active{
  border-color:#2563eb;
  background:#eef5ff;
  color:#153f91;
  transform:translateY(-2px);
}
.lesson-signed-explorer__contexts > button > span{
  grid-row:1 / 3;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:12px;
  background:#f2f6fb;
  font-size:24px;
}
.lesson-signed-explorer__contexts > button strong{
  font-size:15px;
}
.lesson-signed-explorer__contexts > button small{
  color:#6b7a8e;
  font-size:12px;
  line-height:1.3;
}

.lesson-signed-explorer__stage{
  display:grid;
  gap:13px;
  padding:17px;
  border:1px solid #dde7f2;
  border-radius:16px;
  background:rgba(255,255,255,.86);
}
.lesson-signed-explorer__story{
  min-height:28px;
  margin:0;
  color:#20334e;
  font-size:17px;
  font-weight:850;
  text-align:center;
}
.lesson-signed-explorer__line{
  position:relative;
  height:100px;
  margin:0 24px;
}
.lesson-signed-explorer__rail{
  position:absolute;
  top:48px;
  right:0;
  left:0;
  height:8px;
  border-radius:999px;
  background:linear-gradient(90deg,#2563eb 0%,#8ab2ee 47%,#6b7280 50%,#80cfb3 53%,#059669 100%);
  box-shadow:0 2px 8px rgba(31,56,91,.18);
}
.lesson-signed-explorer__rail::before,
.lesson-signed-explorer__rail::after{
  position:absolute;
  top:50%;
  width:0;
  height:0;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
  content:"";
  transform:translateY(-50%);
}
.lesson-signed-explorer__rail::before{
  left:-12px;
  border-right:14px solid #2563eb;
}
.lesson-signed-explorer__rail::after{
  right:-12px;
  border-left:14px solid #059669;
}
.lesson-signed-explorer__ticks > span{
  position:absolute;
  top:43px;
  width:1px;
  height:24px;
  transform:translateX(-50%);
}
.lesson-signed-explorer__ticks i{
  display:block;
  width:2px;
  height:17px;
  margin:auto;
  border-radius:2px;
  background:#41536b;
}
.lesson-signed-explorer__ticks span.is-zero i{
  width:4px;
  height:25px;
  margin-top:-4px;
  background:#303846;
}
.lesson-signed-explorer__ticks strong{
  position:absolute;
  top:25px;
  left:50%;
  color:#41536b;
  font-size:12px;
  transform:translateX(-50%);
}
.lesson-signed-explorer__ticks span.is-negative strong{color:var(--warmup-negative);}
.lesson-signed-explorer__ticks span.is-positive strong{color:var(--warmup-positive);}
.lesson-signed-explorer__marker{
  position:absolute;
  top:2px;
  z-index:2;
  display:grid;
  place-items:center;
  width:48px;
  height:38px;
  border-radius:12px;
  background:var(--warmup-zero);
  color:#fff;
  box-shadow:0 8px 18px rgba(31,56,91,.22);
  transform:translateX(-50%);
  transition:left .18s ease,background .18s ease;
}
.lesson-signed-explorer__marker::after{
  position:absolute;
  bottom:-9px;
  left:50%;
  width:0;
  height:0;
  border-right:8px solid transparent;
  border-top:10px solid var(--warmup-zero);
  border-left:8px solid transparent;
  content:"";
  transform:translateX(-50%);
}
.lesson-signed-explorer__marker.is-negative{background:var(--warmup-negative);}
.lesson-signed-explorer__marker.is-negative::after{border-top-color:var(--warmup-negative);}
.lesson-signed-explorer__marker.is-positive{background:var(--warmup-positive);}
.lesson-signed-explorer__marker.is-positive::after{border-top-color:var(--warmup-positive);}
.lesson-signed-explorer__marker span{
  font-size:17px;
  font-weight:950;
}
.lesson-signed-explorer__range{
  width:100%;
  min-height:44px;
  margin:0;
  accent-color:#5d68a8;
  touch-action:pan-x;
}
.lesson-signed-explorer__quick-values{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
}
.lesson-signed-explorer__quick-values > button{
  min-width:54px;
  padding:8px 13px;
  border:1px solid #cdd9e7;
  border-radius:12px;
  background:#fff;
  color:#273a55;
  font-weight:900;
}
.lesson-signed-explorer__quick-values > button:hover{
  border-color:#839dbd;
  background:#f5f8fc;
}
.lesson-signed-explorer__result{
  display:grid;
  gap:4px;
  padding:15px 17px;
  border:2px solid #cfd6df;
  border-radius:15px;
  background:#f7f8fa;
}
.lesson-signed-explorer__result.is-negative{
  border-color:#8cb4f0;
  background:#eff6ff;
  color:#154ca4;
}
.lesson-signed-explorer__result.is-positive{
  border-color:#81d3b5;
  background:#ecfdf5;
  color:#047857;
}
.lesson-signed-explorer__result.is-zero{
  border-color:#c7ccd4;
  background:#f4f5f7;
  color:#414955;
}
.lesson-signed-explorer__result > strong{
  font-size:19px;
}
.lesson-signed-explorer__result > p{
  margin:0;
  color:#4c5b6d;
  line-height:1.55;
}

.lesson-number-warmup--decimal{
  --decimal-tenths:#7c3aed;
  --decimal-hundredths:#2563eb;
  --decimal-thousandths:#059669;
}
.lesson-decimal-warmup__number{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-start;
  gap:6px;
  padding:16px;
  border-radius:18px;
  background:#15243a;
  color:#fff;
}
.lesson-decimal-warmup__number > span{
  padding-top:5px;
  font-size:clamp(38px,7vw,66px);
  font-weight:950;
  letter-spacing:-.04em;
}
.lesson-decimal-warmup__number > button{
  display:grid;
  gap:2px;
  min-width:78px;
  padding:5px 8px 8px;
  border:2px solid transparent;
  border-radius:14px;
  background:rgba(255,255,255,.08);
  color:#fff;
}
.lesson-decimal-warmup__number > button:nth-of-type(1){color:#d8b4fe;}
.lesson-decimal-warmup__number > button:nth-of-type(2){color:#bfdbfe;}
.lesson-decimal-warmup__number > button:nth-of-type(3){color:#a7f3d0;}
.lesson-decimal-warmup__number > button.is-active{
  border-color:currentColor;
  background:rgba(255,255,255,.16);
}
.lesson-decimal-warmup__number strong{
  font-size:clamp(38px,7vw,66px);
  line-height:1;
}
.lesson-decimal-warmup__number small{
  color:inherit;
  font-size:11px;
  font-weight:850;
  white-space:nowrap;
}
.lesson-decimal-warmup__controls{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.lesson-decimal-warmup__controls > label{
  display:grid;
  gap:10px;
  padding:13px;
  border:2px solid #dce5ef;
  border-radius:14px;
  background:#fff;
}
.lesson-decimal-warmup__controls > label:nth-child(1).is-active{border-color:var(--decimal-tenths);background:#faf5ff;}
.lesson-decimal-warmup__controls > label:nth-child(2).is-active{border-color:var(--decimal-hundredths);background:#eff6ff;}
.lesson-decimal-warmup__controls > label:nth-child(3).is-active{border-color:var(--decimal-thousandths);background:#ecfdf5;}
.lesson-decimal-warmup__controls label > span{
  display:flex;
  justify-content:space-between;
  gap:10px;
  color:#34445b;
  font-size:14px;
}
.lesson-decimal-warmup__controls output{
  display:grid;
  place-items:center;
  min-width:30px;
  height:30px;
  border-radius:9px;
  background:#eef2f7;
  color:#172941;
  font-weight:950;
}
.lesson-decimal-warmup__controls input{
  width:100%;
  min-height:44px;
  margin:0;
  touch-action:pan-x;
}
.lesson-decimal-warmup__controls label:nth-child(1) input{accent-color:var(--decimal-tenths);}
.lesson-decimal-warmup__controls label:nth-child(2) input{accent-color:var(--decimal-hundredths);}
.lesson-decimal-warmup__controls label:nth-child(3) input{accent-color:var(--decimal-thousandths);}
.lesson-decimal-warmup__place-note{
  min-height:52px;
  padding:13px 15px;
  border-left:5px solid #7c3aed;
  border-radius:11px;
  background:#f7f3ff;
  color:#39475b;
  line-height:1.55;
}
.lesson-decimal-warmup__place-note strong,
.lesson-decimal-warmup__place-note b{
  color:#5b21b6;
}
.lesson-decimal-warmup__equations{
  display:grid;
  grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);
  gap:10px;
}
.lesson-decimal-warmup__equations > article{
  display:grid;
  gap:5px;
  min-width:0;
  padding:13px 15px;
  border:1px solid #dbe4ef;
  border-radius:13px;
  background:#fff;
}
.lesson-decimal-warmup__equations span{
  color:#65748a;
  font-size:12px;
  font-weight:850;
  text-transform:uppercase;
}
.lesson-decimal-warmup__equations strong{
  overflow-wrap:anywhere;
  color:#192d49;
  font-size:clamp(17px,2vw,22px);
}
.lesson-decimal-warmup__interval{
  display:grid;
  gap:8px;
  padding:14px 18px 15px;
  border-radius:14px;
  background:#f7fafc;
}
.lesson-decimal-warmup__interval-labels{
  display:flex;
  justify-content:space-between;
  color:#33475f;
  font-weight:900;
}
.lesson-decimal-warmup__interval-track{
  position:relative;
  height:14px;
  border-radius:999px;
  background:#dfe7f0;
  box-shadow:inset 0 1px 3px rgba(31,56,91,.14);
}
.lesson-decimal-warmup__interval-track > i{
  position:absolute;
  inset:0 auto 0 0;
  width:15.3%;
  border-radius:999px;
  background:linear-gradient(90deg,#7c3aed,#2563eb,#059669);
  transition:width .18s ease;
}
.lesson-decimal-warmup__interval-track > b{
  position:absolute;
  top:50%;
  left:15.3%;
  width:24px;
  height:24px;
  border:4px solid #fff;
  border-radius:50%;
  background:#0f766e;
  box-shadow:0 3px 9px rgba(31,56,91,.25);
  transform:translate(-50%,-50%);
  transition:left .18s ease;
}
.lesson-decimal-warmup__interval-track > b::after{
  position:absolute;
  bottom:28px;
  left:50%;
  padding:4px 7px;
  border-radius:7px;
  background:#15243a;
  color:#fff;
  content:attr(data-value);
  font-size:11px;
  white-space:nowrap;
  transform:translateX(-50%);
}
.lesson-decimal-warmup__interval > p{
  margin:8px 0 0;
  color:#3c4e65;
  line-height:1.5;
  text-align:center;
}

.lesson-number-warmup--quiz{
  background:
    radial-gradient(circle at 50% 0%,rgba(124,58,237,.11),transparent 34%),
    #fff;
}
.lesson-number-quiz__question{
  display:grid;
  gap:8px;
  padding:18px;
  border-radius:16px;
  background:#172941;
  color:#fff;
  text-align:center;
}
.lesson-number-quiz__question > span{
  color:#bdcde0;
  font-size:12px;
  font-weight:850;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.lesson-number-quiz__question > strong{
  font-size:clamp(18px,2.4vw,25px);
  line-height:1.4;
}
.lesson-number-quiz__choices{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.lesson-number-quiz__choices > button{
  padding:12px 14px;
  border:2px solid #d5e0ec;
  border-radius:14px;
  background:#fff;
  color:#293e5a;
  font-weight:900;
}
.lesson-number-quiz__choices > button:hover{
  border-color:#8ba6c6;
  background:#f5f8fc;
}
.lesson-number-quiz__choices > button.is-correct{
  border-color:#059669;
  background:#ecfdf5;
  color:#047857;
}
.lesson-number-quiz__choices > button.is-wrong{
  border-color:#f59e0b;
  background:#fffbeb;
  color:#9a5b05;
}
.lesson-number-quiz__feedback{
  display:grid;
  gap:4px;
  min-height:78px;
  padding:14px 16px;
  border:2px solid #dbe4ee;
  border-radius:14px;
  background:#f8fafc;
}
.lesson-number-quiz__feedback.is-correct{
  border-color:#86d7b9;
  background:#ecfdf5;
  color:#047857;
}
.lesson-number-quiz__feedback.is-hint{
  border-color:#f3c76d;
  background:#fffbeb;
  color:#8a5207;
}
.lesson-number-quiz__feedback > strong{
  font-size:17px;
}
.lesson-number-quiz__feedback > p{
  margin:0;
  color:#4d5d70;
  line-height:1.5;
}
.lesson-number-quiz__next{
  justify-self:end;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:10px 15px;
  border:0;
  border-radius:12px;
  background:#2563eb;
  color:#fff;
  font-weight:900;
  box-shadow:0 8px 18px rgba(37,99,235,.22);
}
.lesson-number-quiz__next:hover{
  background:#1d4ed8;
}

.lesson-visual-card:is(:fullscreen, :-webkit-full-screen, .is-stage-fullscreen) .lesson-number-warmup{
  max-width:1180px;
  margin:auto;
}

@media (max-width:760px){
  .lesson-number-warmup{padding:14px;}
  .lesson-signed-explorer__contexts,
  .lesson-decimal-warmup__controls{
    grid-template-columns:1fr;
  }
  .lesson-signed-explorer__contexts > button{
    grid-template-columns:42px minmax(0,1fr);
  }
  .lesson-signed-explorer__line{
    margin:0 15px;
  }
  .lesson-decimal-warmup__number > button{
    min-width:62px;
    padding-right:5px;
    padding-left:5px;
  }
  .lesson-decimal-warmup__number small{
    font-size:9px;
  }
  .lesson-decimal-warmup__equations{
    grid-template-columns:1fr;
  }
}

@media (max-width:520px){
  .lesson-number-quiz__choices{
    grid-template-columns:1fr;
  }
  .lesson-number-quiz__next{
    justify-self:stretch;
    justify-content:center;
  }
  .lesson-signed-explorer__quick-values > button{
    flex:1 1 52px;
  }
  .lesson-decimal-warmup__number{
    gap:3px;
    padding:12px 7px;
  }
  .lesson-decimal-warmup__number > button{
    min-width:52px;
  }
}

/* 5. sınıf Fen Bilimleri · Kuvveti Tanıyalım */
.lesson-force-effects,
.lesson-force-dynamometer,
.lesson-force-design,
.lesson-force-gravity,
.lesson-force-friction,
.lesson-force-resistance,
.lesson-force-quiz{
  --force-navy:#153d5b;
  --force-blue:#1687b8;
  --force-cyan:#53c8d6;
  --force-orange:#f28c45;
  --force-yellow:#ffd166;
  --force-green:#3ca870;
  --force-cream:#fffaf0;
  color:#243746;
}

.lesson-force-effects{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.lesson-force-effects article{
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:center;
  padding:16px 14px 18px;
  border:1px solid #d8e8ef;
  border-radius:20px;
  background:linear-gradient(155deg,#fff 0%,#f3fbfd 100%);
  box-shadow:0 8px 20px rgba(21,61,91,.08);
  text-align:center;
}
.lesson-force-effects article:nth-child(2){
  background:linear-gradient(155deg,#fff 0%,#fff8ec 100%);
}
.lesson-force-effects article:nth-child(3){
  background:linear-gradient(155deg,#fff 0%,#f4f1ff 100%);
}
.lesson-force-effects article:nth-child(4){
  background:linear-gradient(155deg,#fff 0%,#f0fbf4 100%);
}
.lesson-force-effects svg{
  width:100%;
  max-width:220px;
  height:auto;
  margin-bottom:4px;
}
.lesson-force-effects svg circle,
.lesson-force-effects svg rect{
  fill:#ffd166;
  stroke:#153d5b;
  stroke-width:4;
}
.lesson-force-effects article:nth-child(4) svg rect{
  fill:#72d6a0;
}
.lesson-force-effects svg path:not(marker path){
  fill:none;
  stroke:#e65f45;
  stroke-width:6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.lesson-force-effects svg marker path{
  fill:#e65f45;
}
.lesson-force-effects svg .is-motion{
  stroke:#53a9c8;
  stroke-width:4;
  stroke-dasharray:7 7;
}
.lesson-force-effects strong{
  color:var(--force-navy);
  font-size:17px;
}
.lesson-force-effects p{
  margin:7px 0 0;
  color:#536775;
  font-size:14px;
  line-height:1.55;
}

.lesson-force-lab__intro{
  display:grid;
  gap:5px;
  margin-bottom:20px;
}
.lesson-force-lab__intro > span,
.lesson-force-design__problem > span{
  width:max-content;
  padding:5px 10px;
  border-radius:999px;
  background:#dff5f8;
  color:#0b6d85;
  font-size:12px;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.lesson-force-lab__intro > strong,
.lesson-force-design__problem > strong{
  color:var(--force-navy);
  font-size:clamp(20px,2.4vw,28px);
  line-height:1.2;
}
.lesson-force-lab__intro p,
.lesson-force-design__problem p{
  max-width:820px;
  margin:0;
  color:#536775;
  line-height:1.65;
}
.lesson-force-dynamometer,
.lesson-force-gravity,
.lesson-force-friction,
.lesson-force-resistance{
  padding:clamp(18px,3vw,30px);
  border:1px solid #d8e8ef;
  border-radius:24px;
  background:linear-gradient(145deg,#fff 0%,#f6fbfd 100%);
  box-shadow:0 14px 34px rgba(21,61,91,.09);
}
.lesson-force-feedback,
.lesson-force-design__feedback{
  margin:0;
  padding:13px 15px;
  border-left:4px solid var(--force-blue);
  border-radius:10px;
  background:#eaf7fb;
  color:#174e66;
  font-weight:800;
  line-height:1.55;
}
.lesson-force-feedback.is-success,
.lesson-force-design__feedback.is-success{
  border-color:#2f9b66;
  background:#e9f8ef;
  color:#236d4c;
}
.lesson-force-feedback.is-warning,
.lesson-force-design__feedback.is-warning{
  border-color:#e76f51;
  background:#fff1ec;
  color:#91442f;
}

.lesson-force-dynamometer__controls{
  display:grid;
  grid-template-columns:minmax(260px,1.2fr) minmax(240px,1fr);
  gap:16px;
  align-items:end;
  margin-bottom:20px;
}
.lesson-force-dynamometer__controls label,
.lesson-force-gravity__control{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px 12px;
  align-items:center;
  padding:15px;
  border:1px solid #cfe4ec;
  border-radius:16px;
  background:#fff;
  color:var(--force-navy);
  font-weight:900;
}
.lesson-force-dynamometer__controls label input,
.lesson-force-gravity__control input{
  grid-column:1 / -1;
  width:100%;
  accent-color:var(--force-blue);
}
.lesson-force-dynamometer__controls output,
.lesson-force-gravity__control output{
  padding:4px 9px;
  border-radius:9px;
  background:var(--force-navy);
  color:#fff;
  font-variant-numeric:tabular-nums;
}
.lesson-force-dynamometer__controls > div{
  display:grid;
  gap:8px;
}
.lesson-force-dynamometer__controls > div > span{
  color:var(--force-navy);
  font-weight:900;
}
.lesson-force-dynamometer__controls [role="group"],
.lesson-force-friction__controls [role="group"]{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.lesson-force-dynamometer button,
.lesson-force-design button,
.lesson-force-friction button,
.lesson-force-resistance button,
.lesson-force-quiz button{
  min-height:44px;
}
.lesson-force-dynamometer button.is-active,
.lesson-force-friction button.is-active{
  border-color:var(--force-blue);
  background:#dff5fb;
  color:#0b617e;
  box-shadow:inset 0 0 0 2px rgba(22,135,184,.12);
}
.lesson-force-dynamometer__layout{
  display:grid;
  grid-template-columns:minmax(310px,.9fr) minmax(280px,1fr);
  gap:24px;
  align-items:center;
}
.lesson-force-dynamometer__svg{
  display:block;
  width:100%;
  max-width:470px;
  height:auto;
  justify-self:center;
}
.lesson-force-dynamometer__body{
  fill:url(#force-device-body);
  stroke:#9cc4d6;
  stroke-width:3;
}
.lesson-force-dynamometer__ring{
  fill:#f1a24e;
  stroke:#ba6a2f;
  stroke-width:4;
}
.lesson-force-dynamometer__ring-hole{
  fill:#fff;
  stroke:#ba6a2f;
  stroke-width:3;
}
.lesson-force-dynamometer__window{
  fill:#fff;
  stroke:#b5d3df;
  stroke-width:3;
}
.lesson-force-dynamometer__brand,
.lesson-force-dynamometer__unit{
  fill:#315b70;
  font-weight:900;
  letter-spacing:.06em;
}
.lesson-force-dynamometer__brand{
  font-size:11px;
}
.lesson-force-dynamometer__unit{
  font-size:15px;
}
.lesson-force-dynamometer__axis,
.lesson-force-dynamometer__scale line{
  stroke:#365d70;
  stroke-width:3;
}
.lesson-force-dynamometer__scale text{
  fill:#294b5e;
  font-size:15px;
  font-weight:900;
}
.lesson-force-dynamometer__spring{
  fill:none;
  stroke:#e36e4b;
  stroke-width:7;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:d .28s ease;
}
.lesson-force-dynamometer__pointer{
  stroke:#e44e4e;
  stroke-width:5;
  stroke-linecap:round;
  transition:y1 .28s ease,y2 .28s ease;
}
.lesson-force-dynamometer__hook{
  fill:none;
  stroke:#526b78;
  stroke-width:8;
  stroke-linecap:round;
}
.lesson-force-dynamometer__load{
  fill:#ffd166;
  stroke:#c98b20;
  stroke-width:4;
}
.lesson-force-dynamometer__load-text{
  fill:#5d4314;
  font-size:18px;
  font-weight:900;
}
.lesson-force-dynamometer [data-force-hook]{
  transition:transform .28s ease;
}
.lesson-force-dynamometer.is-overloaded .lesson-force-dynamometer__spring,
.lesson-force-dynamometer.is-overloaded .lesson-force-dynamometer__pointer{
  stroke:#c83f3f;
}
.lesson-force-dynamometer.is-overloaded .lesson-force-dynamometer__load{
  fill:#ffb0a6;
  stroke:#bd4134;
}
.lesson-force-dynamometer__reading{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.lesson-force-dynamometer__reading article{
  display:grid;
  gap:5px;
  min-width:0;
  padding:16px;
  border:1px solid #d7e7ed;
  border-radius:16px;
  background:#fff;
}
.lesson-force-dynamometer__reading article:last-of-type{
  grid-column:1 / -1;
}
.lesson-force-dynamometer__reading article > span{
  color:#6c7d87;
  font-size:13px;
  font-weight:800;
}
.lesson-force-dynamometer__reading article > strong{
  color:var(--force-navy);
  font-size:20px;
}
.lesson-force-dynamometer__reading article > p{
  margin:0;
  color:#60727e;
  font-size:13px;
  line-height:1.5;
}
.lesson-force-dynamometer__reading > .lesson-force-feedback{
  grid-column:1 / -1;
}
.lesson-force-dynamometer__reading article.is-warning{
  border-color:#ed9b83;
  background:#fff3ef;
}

.lesson-force-design{
  display:grid;
  gap:18px;
  padding:clamp(18px,3vw,28px);
  border:1px solid #f0d69f;
  border-radius:24px;
  background:linear-gradient(135deg,#fffaf0 0%,#fff 65%);
}
.lesson-force-design__problem{
  display:grid;
  gap:6px;
}
.lesson-force-design__problem > span{
  background:#fff0c8;
  color:#8b5a00;
}
.lesson-force-design__choices{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.lesson-force-design fieldset,
.lesson-force-resistance fieldset{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  min-width:0;
  margin:0;
  padding:13px;
  border:1px solid #dfd6c5;
  border-radius:16px;
  background:rgba(255,255,255,.78);
}
.lesson-force-design legend,
.lesson-force-resistance legend{
  padding:0 7px;
  color:var(--force-navy);
  font-weight:900;
}
.lesson-force-design__choices button{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:8px;
  align-items:center;
  padding:11px;
  border:2px solid #e0e5e8;
  border-radius:13px;
  background:#fff;
  color:#36515f;
  font-weight:800;
  text-align:left;
}
.lesson-force-design__choices button[aria-pressed="true"]{
  border-color:var(--force-orange);
  background:#fff5e9;
  color:#844518;
}
.lesson-force-design__choices button i{
  display:block;
  width:36px;
  height:25px;
  border-top:5px dashed #4e7c91;
  border-bottom:5px dashed #4e7c91;
}
.lesson-force-design__choices button i.is-thick{
  border-width:9px;
}
.lesson-force-design__choices button b{
  display:grid;
  width:42px;
  height:42px;
  place-items:center;
  border-radius:50%;
  background:#e8f4f8;
  color:#1a607c;
}
.lesson-force-design > .primary-button{
  justify-self:start;
}

.lesson-force-gravity__control{
  max-width:560px;
  margin:0 auto 22px;
}
.lesson-force-gravity__worlds{
  display:grid;
  grid-template-columns:minmax(210px,1fr) 150px minmax(210px,1fr);
  gap:16px;
  align-items:center;
}
.lesson-force-gravity__worlds > article{
  overflow:hidden;
  border:1px solid #d5e4ec;
  border-radius:22px;
  background:#fff;
  box-shadow:0 10px 24px rgba(21,61,91,.08);
}
.lesson-force-gravity__sky{
  position:relative;
  display:grid;
  min-height:145px;
  place-items:center;
  overflow:hidden;
}
.lesson-force-gravity__sky i{
  position:absolute;
  bottom:-70px;
  width:230px;
  height:150px;
  border-radius:50%;
}
.lesson-force-gravity__sky span{
  position:relative;
  z-index:1;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(4,25,45,.68);
  color:#fff;
  font-size:18px;
  font-weight:900;
}
.lesson-force-gravity__worlds .is-earth .lesson-force-gravity__sky{
  background:radial-gradient(circle at 72% 18%,#fff 0 2px,transparent 3px),linear-gradient(#1674b6,#8fd8ef);
}
.lesson-force-gravity__worlds .is-earth .lesson-force-gravity__sky i{
  background:radial-gradient(circle at 40% 30%,#4fab67 0 22%,transparent 23%),#3b9ed0;
  box-shadow:0 0 0 7px rgba(255,255,255,.16);
}
.lesson-force-gravity__worlds .is-moon .lesson-force-gravity__sky{
  background:radial-gradient(circle at 20% 20%,#fff 0 1px,transparent 2px),radial-gradient(circle at 80% 28%,#fff 0 2px,transparent 3px),linear-gradient(#202d55,#53658b);
}
.lesson-force-gravity__worlds .is-moon .lesson-force-gravity__sky i{
  background:radial-gradient(circle at 38% 32%,#999 0 9%,transparent 10%),radial-gradient(circle at 66% 48%,#aaa 0 7%,transparent 8%),#d8d8d0;
  box-shadow:0 0 0 7px rgba(255,255,255,.12);
}
.lesson-force-gravity__gauge{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:end;
  height:116px;
  padding:16px 20px 0;
}
.lesson-force-gravity__gauge::before{
  content:"";
  grid-column:1;
  grid-row:1;
  align-self:stretch;
  border-radius:10px;
  background:#e3edf1;
}
.lesson-force-gravity__gauge i{
  grid-column:1;
  grid-row:1;
  align-self:end;
  min-height:8px;
  border-radius:10px;
  background:linear-gradient(#55c6d4,#1687b8);
  transition:height .3s ease;
}
.lesson-force-gravity__gauge b{
  color:var(--force-navy);
  font-size:17px;
}
.lesson-force-gravity dl{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin:0;
  padding:16px;
}
.lesson-force-gravity dl div{
  padding:10px;
  border-radius:12px;
  background:#f3f7f9;
  text-align:center;
}
.lesson-force-gravity dt{
  color:#6d7f89;
  font-size:12px;
  font-weight:800;
}
.lesson-force-gravity dd{
  margin:4px 0 0;
  color:var(--force-navy);
  font-weight:900;
}
.lesson-force-gravity__same-object{
  display:grid;
  gap:5px;
  justify-items:center;
  color:#536775;
  text-align:center;
}
.lesson-force-gravity__same-object span{
  display:grid;
  width:82px;
  height:82px;
  place-items:center;
  border:3px dashed #f0a657;
  border-radius:50%;
  background:#fff9e8;
  font-size:42px;
}
.lesson-force-gravity__same-object strong{
  color:var(--force-navy);
}
.lesson-force-gravity__same-object small{
  line-height:1.35;
}
.lesson-force-gravity > .lesson-force-feedback{
  margin-top:18px;
}

.lesson-force-friction__prediction{
  display:grid;
  gap:10px;
  padding:16px;
  border:1px dashed #d1a445;
  border-radius:16px;
  background:#fff9e8;
}
.lesson-force-friction__prediction > strong{
  color:#765116;
}
.lesson-force-friction__prediction [role="group"]{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.lesson-force-friction__prediction button,
.lesson-force-resistance button,
.lesson-force-quiz button{
  padding:9px 14px;
  border:2px solid #d8e1e5;
  border-radius:12px;
  background:#fff;
  color:#315160;
  font-weight:900;
}
.lesson-force-friction__prediction button[aria-pressed="true"]{
  border-color:#d49121;
  background:#fff0bd;
  color:#765116;
}
.lesson-force-friction__prediction p{
  margin:0;
  color:#6d5a34;
  line-height:1.5;
}
.lesson-force-friction__controls{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:space-between;
  align-items:center;
  margin:16px 0;
}
.lesson-force-friction__stage{
  position:relative;
  min-height:280px;
  overflow:hidden;
  border:2px solid #c7dde6;
  border-radius:20px;
  background:linear-gradient(#bde8fa 0 58%,#f3d7a0 59% 100%);
}
.lesson-force-friction__stage::before{
  content:"";
  position:absolute;
  top:22px;
  right:28px;
  width:55px;
  height:55px;
  border-radius:50%;
  background:#ffe08a;
  box-shadow:0 0 0 12px rgba(255,224,138,.22);
}
.lesson-force-friction__push{
  position:absolute;
  top:74px;
  left:4%;
  display:grid;
  justify-items:center;
  color:#b04531;
  font-size:12px;
  font-weight:900;
}
.lesson-force-friction__push i{
  font-size:42px;
  font-style:normal;
}
.lesson-force-friction__block{
  position:absolute;
  z-index:2;
  bottom:88px;
  left:8%;
  display:grid;
  width:92px;
  height:66px;
  place-items:center;
  border:4px solid #774626;
  border-radius:10px;
  background:linear-gradient(145deg,#de9a52,#b76731);
  color:#fff;
  box-shadow:0 7px 0 rgba(77,43,18,.18);
  font-size:11px;
  font-weight:900;
  transition:left .9s cubic-bezier(.2,.75,.3,1);
}
.lesson-force-friction__surface{
  position:absolute;
  right:0;
  bottom:60px;
  left:0;
  height:34px;
  border-top:4px solid rgba(74,55,35,.28);
  background:repeating-linear-gradient(90deg,#c79555 0 34px,#b57e42 35px 38px);
  transition:background .2s ease;
}
.lesson-force-friction[data-surface="ice"] .lesson-force-friction__surface{
  border-color:#83c7df;
  background:linear-gradient(165deg,#f4fdff,#b8ebf6 52%,#e9fbff);
}
.lesson-force-friction[data-surface="carpet"] .lesson-force-friction__surface{
  border-color:#824f70;
  background:repeating-linear-gradient(90deg,#b56291 0 8px,#8f426f 9px 13px);
}
.lesson-force-friction__distance{
  position:absolute;
  right:18px;
  bottom:15px;
  left:18px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 62px;
  gap:10px;
  align-items:center;
}
.lesson-force-friction__distance::before{
  content:"";
  grid-column:1;
  grid-row:1;
  height:12px;
  border-radius:999px;
  background:rgba(255,255,255,.7);
}
.lesson-force-friction__distance i{
  grid-column:1;
  grid-row:1;
  width:60%;
  height:12px;
  border-radius:999px;
  background:var(--force-blue);
  transition:width .9s cubic-bezier(.2,.75,.3,1);
}
.lesson-force-friction__distance span{
  color:#264b5d;
  font-weight:900;
  text-align:right;
}
.lesson-force-friction__results{
  margin-top:16px;
}
.lesson-force-friction__results table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border:1px solid #d7e5ea;
  border-radius:14px;
  background:#fff;
  font-size:14px;
}
.lesson-force-friction__results th,
.lesson-force-friction__results td{
  padding:10px 12px;
  border-bottom:1px solid #e3ecef;
  text-align:left;
}
.lesson-force-friction__results thead th{
  background:#e8f4f8;
  color:#244d60;
  font-weight:900;
}
.lesson-force-friction__results tbody th{
  color:var(--force-navy);
}
.lesson-force-friction__results tbody tr:last-child > *{
  border-bottom:0;
}
.lesson-force-friction__results tbody tr.is-complete{
  background:#edf9f2;
}
.lesson-force-friction__results .lesson-force-feedback{
  margin-top:12px;
}

.lesson-force-resistance__controls{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-bottom:16px;
}
.lesson-force-resistance button{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
}
.lesson-force-resistance button[aria-pressed="true"]{
  border-color:var(--force-blue);
  background:#e3f5fa;
  color:#0c6682;
}
.lesson-force-resistance button i{
  display:block;
  width:36px;
  height:20px;
  background:#f28c45;
}
.lesson-force-resistance button i.is-streamlined{
  border-radius:100% 18% 18% 100%;
  clip-path:polygon(0 50%,30% 5%,100% 24%,100% 76%,30% 95%);
}
.lesson-force-resistance button i.is-broad{
  border-radius:4px;
}
.lesson-force-resistance__stage{
  position:relative;
  display:grid;
  min-height:270px;
  place-items:center;
  overflow:hidden;
  border-radius:20px;
  background:linear-gradient(155deg,#d8f4fb,#8bd3e5);
}
.lesson-force-resistance[data-medium="water"] .lesson-force-resistance__stage{
  background:linear-gradient(155deg,#8edcef,#287da8);
}
.lesson-force-resistance__particles{
  position:absolute;
  inset:0;
}
.lesson-force-resistance__particles i{
  position:absolute;
  left:-12%;
  width:54px;
  height:4px;
  border-radius:99px;
  background:rgba(255,255,255,.72);
  animation:lesson-force-flow 2.8s linear infinite;
}
.lesson-force-resistance__particles i:nth-child(1){top:18%;animation-delay:-.2s}
.lesson-force-resistance__particles i:nth-child(2){top:32%;animation-delay:-1.3s}
.lesson-force-resistance__particles i:nth-child(3){top:47%;animation-delay:-2s}
.lesson-force-resistance__particles i:nth-child(4){top:61%;animation-delay:-.8s}
.lesson-force-resistance__particles i:nth-child(5){top:74%;animation-delay:-1.7s}
.lesson-force-resistance__particles i:nth-child(6){top:86%;animation-delay:-2.4s}
.lesson-force-resistance__object{
  position:relative;
  z-index:1;
  width:150px;
  height:72px;
  border:4px solid #9c4f22;
  border-radius:100% 18% 18% 100%;
  background:linear-gradient(155deg,#ffbd70,#f07b37);
  clip-path:polygon(0 50%,30% 5%,100% 24%,100% 76%,30% 95%);
  box-shadow:0 12px 20px rgba(17,72,96,.2);
  transition:width .25s ease,height .25s ease,border-radius .25s ease,clip-path .25s ease;
}
.lesson-force-resistance[data-shape="broad"] .lesson-force-resistance__object{
  width:108px;
  height:126px;
  border-radius:12px;
  clip-path:none;
}
.lesson-force-resistance__meter{
  position:absolute;
  right:18px;
  bottom:16px;
  left:18px;
  z-index:2;
  display:grid;
  grid-template-columns:auto minmax(80px,1fr) auto;
  gap:10px;
  align-items:center;
  padding:9px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.88);
  color:#315160;
  font-size:13px;
  font-weight:900;
}
.lesson-force-resistance__meter > i{
  height:11px;
  overflow:hidden;
  border-radius:99px;
  background:#dce8eb;
}
.lesson-force-resistance__meter b{
  display:block;
  width:90%;
  height:100%;
  border-radius:99px;
  background:linear-gradient(90deg,#ffd166,#3ca870);
  transition:width .3s ease;
}
.lesson-force-resistance__result{
  display:grid;
  grid-template-columns:130px minmax(0,1fr);
  gap:12px;
  align-items:stretch;
  margin-top:14px;
}
.lesson-force-resistance__result article{
  display:grid;
  place-content:center;
  border-radius:14px;
  background:#fff0cf;
  color:#70511f;
  text-align:center;
}
.lesson-force-resistance__result article span{
  font-size:12px;
  font-weight:800;
}
.lesson-force-resistance__result article strong{
  font-size:20px;
}
.lesson-force-resistance__result p{
  margin:0;
  padding:14px;
  border-left:4px solid var(--force-blue);
  border-radius:12px;
  background:#eaf7fb;
  color:#174e66;
  font-weight:800;
  line-height:1.55;
}
@keyframes lesson-force-flow{
  from{transform:translateX(0)}
  to{transform:translateX(1200px)}
}

.lesson-force-quiz{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.lesson-force-quiz > article{
  display:grid;
  align-content:start;
  gap:12px;
  min-width:0;
  padding:18px;
  border:1px solid #d8e6eb;
  border-radius:18px;
  background:#fff;
  box-shadow:0 8px 20px rgba(21,61,91,.07);
}
.lesson-force-quiz > article:last-child{
  grid-column:1 / -1;
}
.lesson-force-quiz article > span{
  width:max-content;
  padding:4px 9px;
  border-radius:999px;
  background:#e7f5fa;
  color:#176581;
  font-size:12px;
  font-weight:900;
}
.lesson-force-quiz article > strong{
  color:var(--force-navy);
  line-height:1.45;
}
.lesson-force-quiz article [role="group"]{
  display:grid;
  gap:8px;
}
.lesson-force-quiz button{
  width:100%;
  text-align:left;
}
.lesson-force-quiz button[aria-pressed="true"]{
  border-color:#9caeb6;
  background:#edf2f4;
}
.lesson-force-quiz button.is-correct{
  border-color:#3ca870;
  background:#e9f8ef;
  color:#236d4c;
}
.lesson-force-quiz button.is-wrong{
  border-color:#e76f51;
  background:#fff0ec;
  color:#91442f;
}
.lesson-force-quiz article > p{
  margin:0;
  padding:10px 12px;
  border-radius:10px;
  background:#f4f7f8;
  color:#536775;
  line-height:1.5;
}
.lesson-force-quiz article.is-correct > p{
  background:#e9f8ef;
  color:#236d4c;
}
.lesson-force-quiz article.is-wrong > p{
  background:#fff1ec;
  color:#91442f;
}
.lesson-force-dynamometer button:focus-visible,
.lesson-force-design button:focus-visible,
.lesson-force-friction button:focus-visible,
.lesson-force-resistance button:focus-visible,
.lesson-force-quiz button:focus-visible,
.lesson-force-dynamometer input:focus-visible,
.lesson-force-gravity input:focus-visible{
  outline:3px solid #ffb74d;
  outline-offset:3px;
}

@media (max-width:980px){
  .lesson-force-effects{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .lesson-force-dynamometer__layout{
    grid-template-columns:minmax(270px,.8fr) minmax(260px,1fr);
    gap:16px;
  }
  .lesson-force-gravity__worlds{
    grid-template-columns:minmax(190px,1fr) 110px minmax(190px,1fr);
    gap:10px;
  }
  .lesson-force-gravity__same-object span{
    width:68px;
    height:68px;
    font-size:34px;
  }
}

@media (max-width:760px){
  .lesson-force-dynamometer__controls,
  .lesson-force-dynamometer__layout,
  .lesson-force-design__choices,
  .lesson-force-resistance__controls{
    grid-template-columns:1fr;
  }
  .lesson-force-dynamometer__svg{
    max-width:380px;
  }
  .lesson-force-gravity__worlds{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .lesson-force-gravity__same-object{
    grid-column:1 / -1;
    grid-row:1;
    grid-template-columns:auto auto;
    justify-content:center;
    align-items:center;
  }
  .lesson-force-gravity__same-object span{
    grid-row:1 / span 2;
  }
  .lesson-force-gravity__same-object small{
    grid-column:2;
  }
  .lesson-force-quiz{
    grid-template-columns:1fr;
  }
  .lesson-force-quiz > article:last-child{
    grid-column:auto;
  }
}

@media (max-width:560px){
  .lesson-force-effects,
  .lesson-force-gravity__worlds{
    grid-template-columns:1fr;
  }
  .lesson-force-dynamometer,
  .lesson-force-gravity,
  .lesson-force-friction,
  .lesson-force-resistance{
    padding:16px;
    border-radius:18px;
  }
  .lesson-force-dynamometer__reading{
    grid-template-columns:1fr;
  }
  .lesson-force-dynamometer__reading article:last-of-type,
  .lesson-force-dynamometer__reading > .lesson-force-feedback{
    grid-column:auto;
  }
  .lesson-force-design fieldset,
  .lesson-force-resistance fieldset{
    grid-template-columns:1fr;
  }
  .lesson-force-design > .primary-button{
    width:100%;
    justify-content:center;
  }
  .lesson-force-gravity__same-object{
    grid-column:auto;
  }
  .lesson-force-friction__controls{
    align-items:stretch;
  }
  .lesson-force-friction__controls > *,
  .lesson-force-friction__controls [role="group"]{
    width:100%;
  }
  .lesson-force-friction__controls button{
    flex:1 1 90px;
    justify-content:center;
  }
  .lesson-force-friction__stage{
    min-height:245px;
  }
  .lesson-force-friction__block{
    bottom:83px;
    width:76px;
    height:58px;
  }
  .lesson-force-friction__push{
    top:70px;
  }
  .lesson-force-friction__results table,
  .lesson-force-friction__results tbody,
  .lesson-force-friction__results tr,
  .lesson-force-friction__results th,
  .lesson-force-friction__results td{
    display:block;
  }
  .lesson-force-friction__results thead{
    display:none;
  }
  .lesson-force-friction__results tr{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0;
    margin:8px;
    overflow:hidden;
    border:1px solid #dfe8ec;
    border-radius:10px;
  }
  .lesson-force-friction__results tbody th{
    grid-column:1 / -1;
    background:#e8f4f8;
  }
  .lesson-force-friction__results th,
  .lesson-force-friction__results td{
    border-bottom:0;
    text-align:center;
  }
  .lesson-force-resistance__result{
    grid-template-columns:1fr;
  }
  .lesson-force-resistance__result article{
    padding:10px;
  }
  .lesson-force-resistance__meter{
    grid-template-columns:1fr auto;
  }
  .lesson-force-resistance__meter > span{
    grid-column:1 / -1;
  }
}

@media (prefers-reduced-motion:reduce){
  .lesson-force-resistance__particles i{
    animation:none;
  }
  .lesson-force-friction__block,
  .lesson-force-friction__distance i,
  .lesson-force-dynamometer__spring,
  .lesson-force-dynamometer [data-force-hook],
  .lesson-force-gravity__gauge i{
    transition:none;
  }
}

/* 5. sınıf Fen Bilimleri · Canlıların Yapısına Yolculuk */
.lesson-life-microscope,
.lesson-life-cells,
.lesson-life-hierarchy,
.lesson-life-anatomy,
.lesson-life-types,
.lesson-life-support,
.lesson-life-health,
.lesson-life-quiz{
  --life-ink:#203a48;
  --life-green:#3c9b72;
  --life-mint:#78d6b0;
  --life-blue:#2b8db9;
  --life-purple:#7257a8;
  --life-orange:#ef8a4c;
  --life-yellow:#ffd166;
  color:#2d414d;
}
.lesson-life-microscope,
.lesson-life-cells,
.lesson-life-hierarchy,
.lesson-life-anatomy,
.lesson-life-types,
.lesson-life-support,
.lesson-life-health{
  padding:clamp(18px,3vw,30px);
  border:1px solid #d6e7e3;
  border-radius:24px;
  background:linear-gradient(145deg,#fff 0%,#f5fbf8 100%);
  box-shadow:0 14px 34px rgba(32,74,68,.09);
}
.lesson-life-lab__intro{
  display:grid;
  gap:6px;
  margin-bottom:20px;
}
.lesson-life-lab__intro > span{
  width:max-content;
  padding:5px 10px;
  border-radius:999px;
  background:#dff5eb;
  color:#267354;
  font-size:12px;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.lesson-life-lab__intro > strong{
  color:var(--life-ink);
  font-size:clamp(20px,2.4vw,28px);
  line-height:1.2;
}
.lesson-life-lab__intro p{
  max-width:900px;
  margin:0;
  color:#536b76;
  line-height:1.65;
}
.lesson-life-feedback{
  margin:0;
  padding:13px 15px;
  border-left:4px solid var(--life-blue);
  border-radius:10px;
  background:#e9f6fb;
  color:#1e5972;
  font-weight:800;
  line-height:1.55;
}
.lesson-life-feedback.is-success{
  border-color:var(--life-green);
  background:#e8f8ef;
  color:#236b4c;
}
.lesson-life-feedback.is-warning{
  border-color:#e56f52;
  background:#fff0eb;
  color:#8c432f;
}
.lesson-life-microscope button,
.lesson-life-cells button,
.lesson-life-hierarchy button,
.lesson-life-support button,
.lesson-life-health button,
.lesson-life-quiz button{
  min-height:44px;
}
.lesson-life-microscope button:focus-visible,
.lesson-life-cells button:focus-visible,
.lesson-life-hierarchy button:focus-visible,
.lesson-life-support button:focus-visible,
.lesson-life-health button:focus-visible,
.lesson-life-quiz button:focus-visible{
  outline:3px solid #ffb74d;
  outline-offset:3px;
}

.lesson-life-microscope__layout{
  display:grid;
  grid-template-columns:minmax(300px,.9fr) minmax(330px,1.1fr);
  gap:22px;
  align-items:start;
}
.lesson-life-microscope__model,
.lesson-life-microscope__observation{
  min-width:0;
  padding:18px;
  border:1px solid #d8e7ea;
  border-radius:20px;
  background:#fff;
}
.lesson-life-microscope__model > svg{
  display:block;
  width:100%;
  max-width:500px;
  height:auto;
  margin:auto;
}
.lesson-life-microscope__base,
.lesson-life-microscope__arm{
  fill:url(#life-micro-metal);
  stroke:#4f7888;
  stroke-width:5;
}
.lesson-life-microscope__tube > path{
  fill:#d6eaf0;
  stroke:#486d7d;
  stroke-width:5;
}
.lesson-life-microscope__tube .is-dark{
  fill:#355968;
}
.lesson-life-microscope__stage{
  fill:#3e5d6a;
}
.lesson-life-microscope__slide{
  fill:#bceef4;
  stroke:#4397a9;
  stroke-width:2;
}
.lesson-life-microscope__focus{
  fill:#ffd166;
  stroke:#b87920;
  stroke-width:5;
}
.lesson-life-microscope__light{
  fill:rgba(255,216,99,.34);
}
.lesson-life-microscope__lamp{
  fill:#ffdc73;
  stroke:#c78625;
  stroke-width:5;
}
.lesson-life-microscope__labels path{
  fill:none;
  stroke:#7e5a9d;
  stroke-width:3;
  stroke-linecap:round;
}
.lesson-life-microscope__labels text{
  fill:#614579;
  font-size:15px;
  font-weight:900;
}
.lesson-life-microscope__parts{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  justify-content:center;
}
.lesson-life-microscope__parts button,
.lesson-life-microscope__controls button,
.lesson-life-cells__buttons button,
.lesson-life-hierarchy__source button,
.lesson-life-health__verdicts button{
  padding:9px 13px;
  border:2px solid #d8e2e6;
  border-radius:12px;
  background:#fff;
  color:#37525f;
  font-weight:900;
}
.lesson-life-microscope__parts button.is-active,
.lesson-life-microscope__controls button.is-active,
.lesson-life-cells__buttons button.is-active{
  border-color:var(--life-green);
  background:#e6f7ee;
  color:#216c4d;
}
.lesson-life-microscope__model > p{
  min-height:68px;
  margin:12px 0 0;
  padding:12px;
  border-radius:12px;
  background:#f1f4fa;
  color:#4e6070;
  font-weight:700;
  line-height:1.5;
}
.lesson-life-microscope__observation{
  display:grid;
  gap:16px;
}
.lesson-life-microscope__viewer{
  position:relative;
  display:grid;
  width:min(100%,390px);
  aspect-ratio:1;
  place-items:center;
  justify-self:center;
  overflow:hidden;
  border:18px solid #264c5d;
  border-radius:50%;
  background:#eef8f6;
  box-shadow:inset 0 0 35px rgba(24,67,76,.32),0 12px 26px rgba(25,71,78,.14);
}
.lesson-life-microscope__viewer::after{
  content:"";
  position:absolute;
  inset:7%;
  border:1px solid rgba(255,255,255,.72);
  border-radius:50%;
  pointer-events:none;
}
.lesson-life-microscope__viewer > b{
  position:absolute;
  right:50%;
  bottom:18px;
  z-index:2;
  transform:translateX(50%);
  padding:5px 10px;
  border-radius:999px;
  background:rgba(22,57,70,.76);
  color:#fff;
  font-size:12px;
  white-space:nowrap;
}
.lesson-life-microscope [data-life-microscope-cells]{
  display:grid;
  width:80%;
  grid-template-columns:repeat(4,1fr);
  transform:scale(var(--life-view-scale,1));
  transform-origin:center;
  transition:transform .28s ease;
}
.lesson-life-microscope [data-life-microscope-cells] i{
  position:relative;
  display:block;
  aspect-ratio:1.15;
  border:3px solid #8c69a8;
  background:rgba(199,168,220,.28);
}
.lesson-life-microscope [data-life-microscope-cells] i::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:11px;
  height:11px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#744d93;
  box-shadow:0 0 0 4px rgba(116,77,147,.16);
}
.lesson-life-microscope[data-sample="cheek"] [data-life-microscope-cells]{
  gap:5px;
  transform:rotate(-7deg) scale(var(--life-view-scale,1));
}
.lesson-life-microscope[data-sample="cheek"] [data-life-microscope-cells] i{
  border:2px solid #438ea7;
  border-radius:47% 53% 60% 40%;
  background:rgba(108,196,219,.22);
}
.lesson-life-microscope[data-sample="cheek"] [data-life-microscope-cells] i::after{
  background:#276a83;
}
.lesson-life-microscope__controls{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.lesson-life-microscope__controls fieldset{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  min-width:0;
  margin:0;
  padding:12px;
  border:1px solid #d8e5e8;
  border-radius:14px;
}
.lesson-life-microscope__controls legend{
  padding:0 6px;
  color:var(--life-ink);
  font-weight:900;
}
.lesson-life-microscope__record{
  display:grid;
  grid-template-columns:1.4fr .8fr .8fr;
  gap:8px;
  margin:0;
}
.lesson-life-microscope__record div{
  min-width:0;
  padding:11px;
  border-radius:12px;
  background:#f1f7f8;
}
.lesson-life-microscope__record dt{
  color:#69808a;
  font-size:12px;
  font-weight:800;
}
.lesson-life-microscope__record dd{
  margin:4px 0 0;
  color:var(--life-ink);
  font-weight:900;
  line-height:1.35;
}

.lesson-life-cells{
  background:linear-gradient(145deg,#fff 0%,#f8f5fd 100%);
}
.lesson-life-cells__buttons{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:18px;
}
.lesson-life-cells__models{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.lesson-life-cells__models article{
  min-width:0;
  padding:16px;
  border:1px solid #d9e5e6;
  border-radius:20px;
  background:#fff;
  text-align:center;
}
.lesson-life-cells__models article > strong{
  color:var(--life-ink);
  font-size:18px;
}
.lesson-life-cells__models article > small{
  display:block;
  color:#607680;
  line-height:1.5;
}
.lesson-life-cells__models svg{
  display:block;
  width:100%;
  max-width:430px;
  height:auto;
  margin:4px auto;
  overflow:visible;
}
.lesson-life-cell__wall{
  fill:#c7ceca;
  stroke:#78857f;
  stroke-width:7;
}
.lesson-life-cell__membrane{
  fill:#ddd9db;
  stroke:#938b8f;
  stroke-width:6;
}
.lesson-life-cell__cytoplasm{
  fill:#ebe9e2;
  stroke:#aaa69a;
  stroke-width:3;
}
.lesson-life-cell__nucleus{
  fill:#c8c3cc;
  stroke:#7b7480;
  stroke-width:5;
}
.lesson-life-cell__nucleolus{
  fill:#6d6870;
}
.lesson-life-cell__vacuole{
  fill:#dce2e3;
  stroke:#8e9b9e;
  stroke-width:4;
}
.lesson-life-cell__chloroplast ellipse{
  fill:#bfc7c1;
  stroke:#737f76;
  stroke-width:4;
}
.lesson-life-cell__mitochondrion path{
  fill:#cbc6c2;
  stroke:#7e7772;
  stroke-width:4;
}
.lesson-life-cells [data-life-cell-part]{
  transition:filter .18s ease,fill .18s ease,stroke .18s ease,stroke-width .18s ease;
}
.lesson-life-cells [data-life-cell-part].is-selected{
  filter:drop-shadow(0 0 8px rgba(31,112,76,.45));
}
.lesson-life-cell__wall.is-selected{
  fill:#a8cc75;
  stroke:#4f8439;
  stroke-width:9;
}
.lesson-life-cell__membrane.is-selected{
  fill:#f8cbd5;
  stroke:#bd4f6b;
  stroke-width:9;
}
.lesson-life-cell__cytoplasm.is-selected{
  fill:#fff2bc;
  stroke:#cf9a28;
  stroke-width:7;
}
.lesson-life-cell__nucleus.is-selected{
  fill:#a88ac8;
  stroke:#60447f;
  stroke-width:8;
}
.lesson-life-cell__nucleus.is-selected + .lesson-life-cell__nucleolus{
  fill:#5d307c;
}
.lesson-life-cell__vacuole.is-selected{
  fill:#c9eef3;
  stroke:#3e9daf;
  stroke-width:7;
}
.lesson-life-cell__chloroplast.is-selected ellipse{
  fill:#58ad67;
  stroke:#216d36;
  stroke-width:7;
}
.lesson-life-cell__mitochondrion.is-selected path{
  fill:#f0965a;
  stroke:#a94823;
  stroke-width:7;
}
.lesson-life-cells__info{
  display:grid;
  grid-template-columns:minmax(170px,.6fr) minmax(220px,1fr) minmax(220px,1fr);
  gap:12px;
  margin-top:16px;
}
.lesson-life-cells__info > *{
  min-width:0;
  margin:0;
  padding:14px;
  border-radius:14px;
}
.lesson-life-cells__info > div{
  display:grid;
  gap:5px;
  background:#e9f8ef;
}
.lesson-life-cells__info > div span{
  color:#2a7957;
  font-size:12px;
  font-weight:900;
}
.lesson-life-cells__info > div span.is-plant-only{
  color:#79621d;
}
.lesson-life-cells__info > div strong{
  color:var(--life-ink);
  font-size:20px;
}
.lesson-life-cells__info > p{
  background:#f1f6f8;
  color:#455f6c;
  font-weight:700;
  line-height:1.55;
}
.lesson-life-cells__info > p:last-child{
  background:#f3eefb;
  color:#5d4b78;
}
.lesson-life-cells__truth{
  margin-top:14px;
  padding:14px 16px;
  border-left:5px solid var(--life-purple);
  border-radius:12px;
  background:#f4effb;
}
.lesson-life-cells__truth strong{
  color:#5d4380;
}
.lesson-life-cells__truth p{
  margin:5px 0 0;
  color:#60576d;
  line-height:1.55;
}

.lesson-life-hierarchy{
  background:linear-gradient(145deg,#fff 0%,#fffaf0 100%);
}
.lesson-life-hierarchy__source{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  justify-content:center;
  margin-bottom:18px;
}
.lesson-life-hierarchy__source button{
  min-width:110px;
  padding:10px 16px;
  border:2px solid #dbe3e6;
  border-radius:13px;
  background:#fff;
  color:#38515d;
  font-weight:900;
}
.lesson-life-hierarchy__source button.is-correct{
  border-color:var(--life-green);
  background:#e8f7ef;
  color:#226d4d;
}
.lesson-life-hierarchy__source button.is-wrong{
  border-color:#df7054;
  background:#fff0ec;
  color:#8d432f;
}
.lesson-life-hierarchy__slots{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}
.lesson-life-hierarchy__slots li{
  position:relative;
  display:grid;
  min-height:135px;
  align-content:center;
  justify-items:center;
  gap:6px;
  padding:14px 10px;
  border:2px dashed #bdcdd2;
  border-radius:18px;
  background:#fff;
  text-align:center;
}
.lesson-life-hierarchy__slots li:not(:last-child)::after{
  content:"→";
  position:absolute;
  top:50%;
  right:-16px;
  z-index:2;
  display:grid;
  width:22px;
  height:22px;
  place-items:center;
  transform:translateY(-50%);
  border-radius:50%;
  background:var(--life-orange);
  color:#fff;
  font-weight:900;
}
.lesson-life-hierarchy__slots li > span{
  display:grid;
  width:30px;
  height:30px;
  place-items:center;
  border-radius:50%;
  background:#edf2f4;
  color:#607781;
  font-weight:900;
}
.lesson-life-hierarchy__slots li > b{
  color:#98a8ae;
  font-size:21px;
}
.lesson-life-hierarchy__slots li > small{
  color:#6e7f87;
  line-height:1.35;
}
.lesson-life-hierarchy__slots li.is-filled{
  border-style:solid;
  border-color:#6abd91;
  background:#eaf8f0;
}
.lesson-life-hierarchy__slots li.is-filled > span{
  background:#3c9b72;
  color:#fff;
}
.lesson-life-hierarchy__slots li.is-filled > b{
  color:#245f47;
}
.lesson-life-hierarchy__actions{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:12px;
  align-items:stretch;
  margin-top:14px;
}
.lesson-life-hierarchy__example{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  align-items:center;
  justify-content:center;
  margin-top:16px;
  padding:14px;
  border-radius:16px;
  background:#fff;
}
.lesson-life-hierarchy__example span{
  padding:8px 10px;
  border-radius:10px;
  background:#eaf4f8;
  color:#255972;
  font-weight:900;
}
.lesson-life-hierarchy__example i{
  color:var(--life-orange);
  font-size:20px;
  font-style:normal;
  font-weight:900;
}
.lesson-life-hierarchy__note{
  margin:12px 0 0;
  padding:13px 15px;
  border-left:4px solid var(--life-orange);
  border-radius:10px;
  background:#fff2e8;
  color:#754b30;
  line-height:1.55;
}

.lesson-life-anatomy{
  background:linear-gradient(145deg,#fff 0%,#f7fafc 100%);
}
.lesson-life-anatomy__models{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.lesson-life-anatomy__models figure{
  display:grid;
  min-width:0;
  margin:0;
  padding:16px;
  border:1px solid #d8e4e8;
  border-radius:20px;
  background:#fff;
}
.lesson-life-anatomy__label{
  justify-self:center;
  margin-bottom:12px;
  padding:6px 12px;
  border-radius:999px;
  background:#eaf4f8;
  color:#255972;
  font-size:13px;
  font-weight:900;
}
.lesson-life-anatomy__image{
  display:grid;
  min-height:500px;
  place-items:center;
  overflow:hidden;
  padding:16px;
  border:1px solid #e1e8e9;
  border-radius:18px;
  background:
    radial-gradient(circle at 50% 38%,rgba(255,255,255,.96) 0 30%,rgba(231,241,244,.82) 72%,rgba(220,233,236,.9) 100%);
}
.lesson-life-anatomy__image img{
  display:block;
  width:auto;
  max-width:100%;
  height:clamp(430px,48vw,560px);
  max-height:62vh;
  object-fit:contain;
}
.lesson-life-anatomy__image--muscle{
  background:
    radial-gradient(circle at 50% 38%,rgba(255,255,255,.96) 0 30%,rgba(251,236,233,.82) 72%,rgba(245,220,215,.9) 100%);
}
.lesson-life-anatomy__models figcaption{
  padding:15px 4px 2px;
}
.lesson-life-anatomy__models figcaption strong{
  display:block;
  margin-bottom:5px;
  color:var(--life-ink);
  font-size:17px;
}
.lesson-life-anatomy__models figcaption p{
  margin:0;
  color:#586f7a;
  line-height:1.6;
}
.lesson-life-anatomy__note{
  display:block;
  margin-top:16px;
  padding:14px 16px;
  border-left:5px solid var(--life-purple);
  border-radius:12px;
  background:#f3effa;
  color:#5d5570;
  line-height:1.6;
}
.lesson-life-anatomy__note strong{
  color:#594176;
}

.lesson-life-types{
  --life-type-accent:#377f9d;
  --life-type-soft:#eef7fa;
  background:linear-gradient(145deg,#fff 0%,var(--life-type-soft) 100%);
}
.lesson-life-types--joint{
  --life-type-accent:#2f8792;
  --life-type-soft:#edf9f8;
}
.lesson-life-types--cartilage{
  --life-type-accent:#368a68;
  --life-type-soft:#effaf5;
}
.lesson-life-types--muscle{
  --life-type-accent:#b55258;
  --life-type-soft:#fff3f1;
}
.lesson-life-types__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.lesson-life-types__grid--two{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.lesson-life-types__grid figure{
  display:grid;
  grid-template-rows:auto 1fr;
  min-width:0;
  margin:0;
  overflow:hidden;
  border:1px solid #d8e4e7;
  border-radius:18px;
  background:#fff;
  box-shadow:0 8px 22px rgba(38,67,78,.07);
}
.lesson-life-types__image{
  display:grid;
  min-height:275px;
  place-items:center;
  padding:16px;
  border-bottom:1px solid #dce7e9;
  background:
    radial-gradient(circle at 50% 42%,#fff 0 35%,var(--life-type-soft) 100%);
}
.lesson-life-types__image img{
  display:block;
  width:auto;
  max-width:100%;
  height:250px;
  object-fit:contain;
}
.lesson-life-types--cartilage .lesson-life-types__image img{
  width:100%;
  height:260px;
}
.lesson-life-types__grid figcaption{
  display:grid;
  align-content:start;
  gap:5px;
  padding:15px;
}
.lesson-life-types__grid figcaption > span{
  width:max-content;
  max-width:100%;
  padding:5px 9px;
  border-radius:999px;
  background:var(--life-type-soft);
  color:var(--life-type-accent);
  font-size:12px;
  font-weight:900;
}
.lesson-life-types__grid figcaption > strong{
  color:var(--life-ink);
  font-size:17px;
}
.lesson-life-types__grid figcaption > p{
  margin:0;
  color:#586f7a;
  line-height:1.55;
}
.lesson-life-types__reason{
  display:block;
  margin-top:15px;
  padding:14px 16px;
  border-left:5px solid var(--life-type-accent);
  border-radius:12px;
  background:#fff;
  color:#536a75;
  line-height:1.6;
}
.lesson-life-types__reason strong{
  color:var(--life-type-accent);
}

.lesson-life-support__map{
  display:grid;
  grid-template-columns:minmax(300px,.82fr) minmax(320px,1.18fr);
  gap:18px;
  align-items:start;
  padding:18px;
  border-radius:20px;
  background:linear-gradient(145deg,#f0f8fb,#fff);
}
.lesson-life-support__figure{
  position:relative;
  width:min(100%,340px);
  aspect-ratio:390 / 815;
  justify-self:center;
  overflow:hidden;
  border:1px solid #d7e6e8;
  border-radius:24px;
  background:
    radial-gradient(circle at 50% 38%,#fff 0 30%,#edf5f7 72%,#e1ecef 100%);
  box-shadow:inset 0 0 34px rgba(31,83,94,.08),0 12px 28px rgba(35,76,83,.1);
}
.lesson-life-support__figure > img,
.lesson-life-support__figure > svg{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  max-width:none;
  height:100%;
  max-height:none;
  object-fit:contain;
  pointer-events:none;
  transition:opacity .24s ease,filter .24s ease,transform .24s ease;
}
.lesson-life-support__skeleton,
.lesson-life-support__muscles,
.lesson-life-support__joint-overlay,
.lesson-life-support__cartilage-overlay{
  opacity:0;
}
.lesson-life-support[data-active-layer="bone"] .lesson-life-support__skeleton{
  opacity:1;
  filter:drop-shadow(0 7px 8px rgba(111,83,34,.17));
}
.lesson-life-support[data-active-layer="joint"] .lesson-life-support__skeleton,
.lesson-life-support[data-active-layer="cartilage"] .lesson-life-support__skeleton{
  opacity:.18;
  filter:grayscale(1) contrast(.8);
}
.lesson-life-support[data-active-layer="muscle"] .lesson-life-support__muscles{
  opacity:1;
  filter:drop-shadow(0 7px 8px rgba(121,48,42,.16));
}
.lesson-life-support[data-active-layer="joint"] .lesson-life-support__joint-overlay,
.lesson-life-support[data-active-layer="cartilage"] .lesson-life-support__cartilage-overlay{
  opacity:1;
}
.lesson-life-support__joint-overlay circle{
  fill:rgba(72,197,218,.48);
  stroke:#087b9a;
  stroke-width:3;
  vector-effect:non-scaling-stroke;
}
.lesson-life-support__cartilage-overlay ellipse,
.lesson-life-support__cartilage-overlay circle{
  fill:rgba(75,205,166,.55);
  stroke:#167c5f;
  stroke-width:3;
  vector-effect:non-scaling-stroke;
}
.lesson-life-support__cartilage-overlay path{
  fill:none;
  stroke:#35b48c;
  stroke-width:6;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.lesson-life-support__figure-key{
  position:absolute;
  right:12px;
  bottom:12px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.9);
  box-shadow:0 4px 14px rgba(31,64,71,.12);
  color:#315963;
  font-size:12px;
  font-weight:900;
}
.lesson-life-support[data-active-layer="bone"] .lesson-life-support__figure-key::before{content:"Tam iskelet"}
.lesson-life-support[data-active-layer="joint"] .lesson-life-support__figure-key::before{content:"Mavi: eklem noktaları"}
.lesson-life-support[data-active-layer="muscle"] .lesson-life-support__figure-key::before{content:"Tam kas sistemi"}
.lesson-life-support[data-active-layer="cartilage"] .lesson-life-support__figure-key::before{content:"Turkuaz: kıkırdak bölgeleri"}
.lesson-life-support__controls{
  display:grid;
  gap:12px;
}
.lesson-life-support__layers{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
}
.lesson-life-support__layers button{
  display:grid;
  grid-template-columns:14px 1fr;
  gap:3px 9px;
  align-items:center;
  min-width:0;
  padding:12px;
  border:2px solid #dce5e8;
  border-radius:14px;
  background:#fff;
  color:#39515d;
  text-align:left;
}
.lesson-life-support__layers button > i{
  grid-row:1 / span 2;
  width:14px;
  height:38px;
  border-radius:99px;
  background:#d8bd81;
}
.lesson-life-support__layers button:nth-child(2) > i{background:#5db7d1}
.lesson-life-support__layers button:nth-child(3) > i{background:#e98069}
.lesson-life-support__layers button:nth-child(4) > i{background:#65c5a0}
.lesson-life-support__layers button > span{
  color:var(--life-ink);
  font-weight:900;
}
.lesson-life-support__layers button > small{
  color:#697d86;
  line-height:1.35;
}
.lesson-life-support__layers button.is-active{
  border-color:var(--life-blue);
  background:#e9f6fb;
  box-shadow:0 0 0 3px rgba(43,141,185,.12);
}
.lesson-life-support__details article{
  display:grid;
  gap:6px;
  padding:15px;
  border:1px solid #d7e5e8;
  border-radius:16px;
  background:#fff;
}
.lesson-life-support__details article[hidden]{
  display:none;
}
.lesson-life-support__details [data-life-support-detail]{
  display:none;
}
.lesson-life-support[data-active-layer="bone"] [data-life-support-detail="bone"],
.lesson-life-support[data-active-layer="joint"] [data-life-support-detail="joint"],
.lesson-life-support[data-active-layer="muscle"] [data-life-support-detail="muscle"],
.lesson-life-support[data-active-layer="cartilage"] [data-life-support-detail="cartilage"]{
  display:grid;
}
.lesson-life-support__details article > span{
  color:#2f7e91;
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.lesson-life-support__details article > strong{
  color:var(--life-ink);
  line-height:1.35;
}
.lesson-life-support__details article > p{
  margin:0;
  color:#566f79;
  line-height:1.58;
}
.lesson-life-classifier{
  display:grid;
  grid-template-columns:minmax(210px,.9fr) minmax(280px,1.2fr) auto;
  gap:12px;
  align-items:center;
  margin-top:16px;
  padding:18px;
  border:1px solid #e3d6c7;
  border-radius:18px;
  background:#fffaf2;
}
.lesson-life-classifier > div:first-child{
  display:grid;
  gap:5px;
}
.lesson-life-classifier > div:first-child span{
  width:max-content;
  padding:4px 8px;
  border-radius:999px;
  background:#ffe6c8;
  color:#8a531d;
  font-size:12px;
  font-weight:900;
}
.lesson-life-classifier > div:first-child strong{
  color:var(--life-ink);
  line-height:1.4;
}
.lesson-life-classifier [data-life-classifier-options]{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
}
.lesson-life-classifier [data-life-classifier-options] button{
  padding:9px;
  border:2px solid #d8e1e4;
  border-radius:11px;
  background:#fff;
  color:#3b515b;
  font-weight:900;
}
.lesson-life-classifier [data-life-classifier-options] button.is-correct{
  border-color:var(--life-green);
  background:#e7f7ee;
  color:#246b4d;
}
.lesson-life-classifier [data-life-classifier-options] button.is-wrong{
  border-color:#e17357;
  background:#fff0eb;
  color:#8c432f;
}
.lesson-life-classifier > .lesson-life-feedback{
  grid-column:1 / 3;
}
.lesson-life-classifier > .primary-button{
  grid-column:3;
  grid-row:1 / span 2;
}
.lesson-life-classifier > .primary-button:disabled{
  cursor:not-allowed;
  opacity:.48;
}

.lesson-life-health{
  background:linear-gradient(145deg,#fff 0%,#f5f8fd 100%);
}
.lesson-life-health__workflow{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin:0 0 18px;
  padding:0;
  list-style:none;
}
.lesson-life-health__workflow li{
  position:relative;
  display:grid;
  min-height:110px;
  align-content:center;
  justify-items:center;
  gap:4px;
  padding:12px;
  border-radius:16px;
  background:#fff;
  box-shadow:0 7px 18px rgba(51,75,99,.07);
  text-align:center;
}
.lesson-life-health__workflow li:not(:last-child)::after{
  content:"→";
  position:absolute;
  top:50%;
  right:-15px;
  z-index:2;
  display:grid;
  width:20px;
  height:20px;
  place-items:center;
  transform:translateY(-50%);
  border-radius:50%;
  background:var(--life-purple);
  color:#fff;
  font-weight:900;
}
.lesson-life-health__workflow li > span{
  display:grid;
  width:30px;
  height:30px;
  place-items:center;
  border-radius:50%;
  background:#eae4f6;
  color:#644b91;
  font-weight:900;
}
.lesson-life-health__workflow li > strong{
  color:var(--life-ink);
}
.lesson-life-health__workflow li > small{
  color:#6b7e87;
  line-height:1.35;
}
.lesson-life-health__sources,
.lesson-life-health__verdicts{
  display:grid;
  gap:10px;
}
.lesson-life-health__sources > strong,
.lesson-life-health__verdicts > strong{
  color:var(--life-ink);
}
.lesson-life-health__sources [role="group"]{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
}
.lesson-life-health__sources button{
  display:grid;
  min-width:0;
  align-content:start;
  justify-items:center;
  gap:5px;
  padding:14px 10px;
  border:2px solid #dce3e8;
  border-radius:15px;
  background:#fff;
  color:#40545f;
  text-align:center;
}
.lesson-life-health__sources button > span{
  font-size:28px;
}
.lesson-life-health__sources button > b{
  color:var(--life-ink);
}
.lesson-life-health__sources button > small{
  color:#6e7d86;
  line-height:1.35;
}
.lesson-life-health__sources button.is-active{
  border-color:var(--life-purple);
  background:#f2eef9;
}
.lesson-life-health__verdicts{
  margin-top:15px;
  padding:15px;
  border:1px solid #ded8e8;
  border-radius:16px;
  background:#faf8fd;
}
.lesson-life-health__verdicts [role="group"]{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.lesson-life-health__verdicts button.is-correct{
  border-color:var(--life-green);
  background:#e8f7ef;
  color:#246b4d;
}
.lesson-life-health__verdicts button.is-wrong{
  border-color:#e17357;
  background:#fff0eb;
  color:#8c432f;
}
.lesson-life-health__cases{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:16px;
}
.lesson-life-health__cases article{
  display:grid;
  align-content:start;
  justify-items:center;
  gap:5px;
  min-width:0;
  padding:13px;
  border:1px solid #dae5e9;
  border-radius:15px;
  background:#fff;
  text-align:center;
}
.lesson-life-health__cases article > span{
  font-size:28px;
}
.lesson-life-health__cases article > strong{
  color:var(--life-ink);
}
.lesson-life-health__cases article > p{
  margin:0;
  color:#5f737d;
  font-size:13px;
  line-height:1.5;
}
.lesson-life-health__history{
  margin-top:14px;
  padding:14px 16px;
  border-left:5px solid #b8873d;
  border-radius:12px;
  background:#fff5dc;
}
.lesson-life-health__history strong{
  color:#76511d;
}
.lesson-life-health__history p{
  margin:5px 0 0;
  color:#685b45;
  line-height:1.55;
}

.lesson-life-quiz{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.lesson-life-quiz > article{
  display:grid;
  align-content:start;
  gap:12px;
  min-width:0;
  padding:18px;
  border:1px solid #d8e6e3;
  border-radius:18px;
  background:#fff;
  box-shadow:0 8px 20px rgba(32,74,68,.07);
}
.lesson-life-quiz article > span{
  width:max-content;
  padding:4px 9px;
  border-radius:999px;
  background:#e3f5ec;
  color:#277353;
  font-size:12px;
  font-weight:900;
}
.lesson-life-quiz article > strong{
  color:var(--life-ink);
  line-height:1.45;
}
.lesson-life-quiz article [role="group"]{
  display:grid;
  gap:8px;
}
.lesson-life-quiz button{
  width:100%;
  padding:9px 13px;
  border:2px solid #d9e2e5;
  border-radius:12px;
  background:#fff;
  color:#3b535e;
  font-weight:900;
  text-align:left;
}
.lesson-life-quiz button[aria-pressed="true"]{
  background:#f0f3f4;
}
.lesson-life-quiz button.is-correct{
  border-color:var(--life-green);
  background:#e8f7ef;
  color:#236b4c;
}
.lesson-life-quiz button.is-wrong{
  border-color:#e17357;
  background:#fff0eb;
  color:#8c432f;
}
.lesson-life-quiz article > p{
  margin:0;
  padding:10px 12px;
  border-radius:10px;
  background:#f3f6f7;
  color:#566b75;
  line-height:1.5;
}
.lesson-life-quiz article.is-correct > p{
  background:#e8f7ef;
  color:#236b4c;
}
.lesson-life-quiz article.is-wrong > p{
  background:#fff0eb;
  color:#8c432f;
}

@media (max-width:980px){
  .lesson-life-microscope__layout{
    grid-template-columns:minmax(250px,.8fr) minmax(300px,1.2fr);
    gap:14px;
  }
  .lesson-life-microscope__record{
    grid-template-columns:1fr 1fr;
  }
  .lesson-life-microscope__record div:first-child{
    grid-column:1 / -1;
  }
  .lesson-life-cells__info{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .lesson-life-cells__info > div{
    grid-column:1 / -1;
  }
  .lesson-life-hierarchy__slots{
    grid-template-columns:repeat(5,minmax(96px,1fr));
    overflow-x:auto;
    padding-bottom:6px;
  }
  .lesson-life-classifier{
    grid-template-columns:1fr 1.2fr;
  }
  .lesson-life-classifier > .lesson-life-feedback{
    grid-column:1 / -1;
  }
  .lesson-life-classifier > .primary-button{
    grid-column:1 / -1;
    grid-row:auto;
    justify-self:start;
  }
  .lesson-life-support__map{
    grid-template-columns:1fr;
  }
  .lesson-life-support__controls{
    width:100%;
  }
  .lesson-life-health__sources [role="group"],
  .lesson-life-health__cases{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:760px){
  .lesson-life-microscope__layout,
  .lesson-life-cells__models,
  .lesson-life-anatomy__models,
  .lesson-life-types__grid,
  .lesson-life-types__grid--two,
  .lesson-life-support__map{
    grid-template-columns:1fr;
  }
  .lesson-life-anatomy__image{
    min-height:440px;
  }
  .lesson-life-anatomy__image img{
    height:460px;
    max-height:none;
  }
  .lesson-life-microscope__model > svg{
    max-width:390px;
  }
  .lesson-life-microscope__viewer{
    max-width:350px;
  }
  .lesson-life-microscope__controls{
    grid-template-columns:1fr;
  }
  .lesson-life-cells__info{
    grid-template-columns:1fr;
  }
  .lesson-life-cells__info > div{
    grid-column:auto;
  }
  .lesson-life-hierarchy__slots{
    grid-template-columns:1fr;
    overflow:visible;
  }
  .lesson-life-hierarchy__slots li{
    min-height:90px;
  }
  .lesson-life-hierarchy__slots li:not(:last-child)::after{
    top:auto;
    right:50%;
    bottom:-16px;
    transform:translateX(50%) rotate(90deg);
  }
  .lesson-life-support__figure{
    max-width:300px;
  }
  .lesson-life-classifier{
    grid-template-columns:1fr;
  }
  .lesson-life-classifier > .lesson-life-feedback,
  .lesson-life-classifier > .primary-button{
    grid-column:auto;
  }
  .lesson-life-health__workflow{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .lesson-life-health__workflow li:nth-child(2)::after{
    content:"↓";
    top:auto;
    right:50%;
    bottom:-15px;
    transform:translateX(50%);
  }
  .lesson-life-health__workflow li:nth-child(3)::after{
    content:"←";
    right:-15px;
  }
  .lesson-life-quiz{
    grid-template-columns:1fr;
  }
}

@media (max-width:560px){
  .lesson-life-microscope,
  .lesson-life-cells,
  .lesson-life-hierarchy,
  .lesson-life-anatomy,
  .lesson-life-types,
  .lesson-life-support,
  .lesson-life-health{
    padding:16px;
    border-radius:18px;
  }
  .lesson-life-anatomy__models figure{
    padding:11px;
  }
  .lesson-life-anatomy__image{
    min-height:380px;
    padding:10px;
  }
  .lesson-life-anatomy__image img{
    height:400px;
  }
  .lesson-life-types__image{
    min-height:240px;
  }
  .lesson-life-types__image img,
  .lesson-life-types--cartilage .lesson-life-types__image img{
    height:220px;
  }
  .lesson-life-microscope__model,
  .lesson-life-microscope__observation{
    padding:12px;
  }
  .lesson-life-microscope__viewer{
    border-width:12px;
  }
  .lesson-life-microscope__record,
  .lesson-life-support__layers,
  .lesson-life-classifier [data-life-classifier-options],
  .lesson-life-health__workflow,
  .lesson-life-health__sources [role="group"],
  .lesson-life-health__cases{
    grid-template-columns:1fr;
  }
  .lesson-life-microscope__record div:first-child{
    grid-column:auto;
  }
  .lesson-life-hierarchy__actions{
    grid-template-columns:1fr;
  }
  .lesson-life-hierarchy__actions > button{
    width:100%;
    justify-content:center;
  }
  .lesson-life-support__figure{
    max-width:270px;
  }
  .lesson-life-health__workflow li:not(:last-child)::after,
  .lesson-life-health__workflow li:nth-child(2)::after,
  .lesson-life-health__workflow li:nth-child(3)::after{
    content:"↓";
    top:auto;
    right:50%;
    bottom:-15px;
    transform:translateX(50%);
  }
  .lesson-life-health__verdicts [role="group"]{
    display:grid;
    grid-template-columns:1fr;
  }
}

@media (prefers-reduced-motion:reduce){
  .lesson-life-microscope [data-life-microscope-cells],
  .lesson-life-cells [data-life-cell-part],
  .lesson-life-support__figure > img,
  .lesson-life-support__figure > svg{
    transition:none;
  }
}