.science-lesson-dialog {
  width: min(900px, calc(100vw - 28px));
  max-width: none;
  max-height: min(94svh, 900px);
  padding: 0;
  overflow: auto;
  border: 1px solid #e3e5db;
  border-radius: 26px;
  background: #fffefa;
  color: #253331;
  box-shadow: 0 28px 90px #24372d42;
}
.science-lesson-dialog::backdrop { background: #18231fb5; backdrop-filter: blur(4px); }
.science-lesson-card { min-height: 620px; padding: clamp(20px, 4vw, 34px); }
.science-lesson-header,.science-lesson-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.science-lesson-header .section-kicker { margin: 0 0 5px; color: #96723a; font-size: 14px; }
.science-lesson-count { color: #65766d; font-size: 15px; font-weight: 750; }
.science-lesson-skip { min-height: 42px; padding: 7px 13px; border: 1px solid #e4e5dc; border-radius: 12px; background: #fff; color: #69766f; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.science-lesson-skip:hover { background: #f7f6f0; }
.science-lesson-progress { height: 7px; margin: 16px 0 15px; overflow: hidden; border-radius: 99px; background: #edece4; }
.science-lesson-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#d8ad59,#e8cb80); transition: width .28s ease; }
.science-lesson-page-title { margin: 8px 0 5px; color: #344f43; font-size: clamp(25px,3vw,31px); line-height: 1.35; }
.science-lesson-art { position: relative; display: flex; min-height: 330px; flex-direction: column; justify-content: center; margin: 10px 0 18px; padding: 14px 18px 11px; overflow: hidden; border: 1px solid #e8e6dc; border-radius: 20px; background: radial-gradient(ellipse at 50% 38%,#fffefa 0,#f6f4eb 75%,#f0efe7 100%); }
.science-lesson-art svg { display: block; width: 100%; max-height: 260px; overflow: visible; }
.science-lesson-art .art-caption { fill: #65766d; font-size: 17px; font-weight: 800; }
.science-lesson-art .art-label { fill: #54675c; font-size: 14px; font-weight: 750; }
.science-lesson-art .overlap-label { fill: #42594b; font-size: 15px; font-weight: 850; }
.science-art-caption { margin: 3px auto 0; color: #67746c; font-size: 15px; line-height: 1.5; text-align: center; }
.light-stage { fill: #202b33; }
.science-art-rgb .art-caption { fill: #f5f4ed; }
.science-art-rgb .art-label,.science-art-rgb .overlap-label { fill: #fffefa; }
.rgb-orb { stroke: #fffefa70; stroke-width: 2; mix-blend-mode: screen; }
.rgb-red { fill: #ed625d; fill-opacity: .86; transform-origin: 245px 128px; }
.rgb-green { fill: #55c979; fill-opacity: .83; transform-origin: 375px 128px; }
.rgb-blue { fill: #4185df; fill-opacity: .84; transform-origin: 310px 185px; }
.science-lesson-art.replaying .rgb-orb { animation: rgb-appear .65s ease-out both; }
.science-lesson-art.replaying .rgb-green { animation-delay: .18s; }
.science-lesson-art.replaying .rgb-blue { animation-delay: .36s; }
@keyframes rgb-appear { from { opacity: .15; scale: .7; } to { opacity: 1; scale: 1; } }
.lesson-ray { fill: none; stroke-width: 8; stroke-linecap: round; }
.ray-red { stroke: #e14c4c; }
.ray-green { stroke: #4b9b64; }
.ray-blue { stroke: #347fd0; }
.ray-before { opacity: .92; }
.ray-after { opacity: .12; stroke-dasharray: 16 13; }
.science-lesson-art.replaying .ray-after { animation: ray-flow 1.2s linear 1 both; }
@keyframes ray-flow { to { stroke-dashoffset: -58; } }
.filter-pane { fill: #e3bf32; fill-opacity: .64; stroke: #bd9c2b; stroke-width: 2; }
.filter-blue .filter-pane { fill: #287acc; fill-opacity: .62; stroke: #2269a8; }
.filter-rose .filter-pane { fill: #dc4848; fill-opacity: .58; stroke: #bc383d; }
.filter-amber .ray-after.ray-red,.filter-amber .ray-after.ray-green { opacity: .94; }
.filter-amber .ray-after.ray-blue { opacity: .13; }
.filter-blue .ray-after.ray-blue { opacity: .94; }
.filter-blue .ray-after.ray-red,.filter-blue .ray-after.ray-green { opacity: .13; }
.filter-rose .ray-after.ray-red { opacity: .94; }
.filter-rose .ray-after.ray-green,.filter-rose .ray-after.ray-blue { opacity: .13; }
.ray-label { fill: #58695f; font-size: 14px; font-weight: 800; }
.science-filter-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin: -3px 0 6px; }
.science-filter-choice { display: inline-flex; min-height: 42px; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid #e5e6dd; border-radius: 13px; background: #fff; color: #526359; font: inherit; font-size: 15px; font-weight: 720; cursor: pointer; }
.science-filter-choice i { width: 19px; height: 19px; border: 4px solid color-mix(in srgb,var(--lesson-filter-color) 32%,white); border-radius: 50%; background: var(--lesson-filter-color); }
.science-filter-choice.selected { border-color: #789984; background: #edf4ec; box-shadow: 0 0 0 2px #dce9dc; }
.science-filter-note { margin: 7px 0 0; color: #4f6557; font-size: 17px; line-height: 1.5; text-align: center; }
.demo-paper,.source-paper { fill: #fffefa; stroke: #e6e3d8; stroke-width: 2; }
.yellow-object { fill: #eccb42; }
.blue-filter-pane { fill: #287acc; fill-opacity: .62; stroke: #2169a9; stroke-width: 2; }
.ray-weak { stroke-width: 4; stroke-dasharray: 7 10; opacity: .26; }
.ray-blocked { stroke-width: 4; opacity: .22; }
.ray-dim { stroke-width: 4; opacity: .2; }
.absorb-mark { fill: #7a5d52; font-size: 28px; font-weight: 850; }
.eye-ring { fill: #fffefa; stroke: #809287; stroke-width: 4; }
.dark-result { fill: #0e3863; }
.science-lesson-art.replaying .dark-result { animation: result-dim-blue .85s ease-out .45s both; }
@keyframes result-dim-blue { from { fill: #eacb47; } to { fill: #0e3863; } }
.source-pink-object { fill: #eca6a7; }
.filtered-red-paper { fill: #dc4848; stroke: #c63b40; stroke-width: 2; }
.filtered-red-object { fill: #e04e50; }
.science-lesson-art.replaying .filtered-red-object { animation: blend-object .85s ease-in-out 1 alternate; }
.subtle-outline { fill: none; stroke: #fffefa; stroke-width: 1.5; stroke-dasharray: 4 5; opacity: .48; }
@keyframes blend-object { from { opacity: .55; } to { opacity: .9; } }
.compare-arrow { fill: none; stroke: #799487; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.source-blue-object { fill: #5b91d0; }
.dark-blue-object { fill: #7c2525; }
.science-lesson-art.replaying .dark-blue-object { animation: result-dim-red .85s ease-out .35s both; }
@keyframes result-dim-red { from { fill: #5b91d0; } to { fill: #7c2525; } }
.science-lesson-copy { padding: 2px 5px 18px; }
.science-lesson-copy h3 { margin: 0 0 8px; color: #3f5f4d; font-size: clamp(21px,2.6vw,25px); line-height: 1.45; }
.science-lesson-copy p { display: grid; gap: 3px; margin: 0; color: #45594e; font-size: clamp(18px,2.2vw,21px); line-height: 1.65; }
.science-lesson-footer { min-height: 53px; }
.science-lesson-footer .button { min-height: 48px; padding: 8px 16px; font-size: 16px; }
.science-lesson-replay { display: block; margin: -9px 0 8px auto; padding: 7px 11px; border: 1px solid #e2e7df; border-radius: 11px; background: #f6f8f3; color: #4a7058; font: inherit; font-size: 14px; font-weight: 750; cursor: pointer; }
.science-lesson-replay:hover { background: #eaf2e9; }
.science-lesson-prev:disabled { opacity: .4; }
.science-lesson-dots { display: flex; align-items: center; justify-content: center; gap: 5px; }
.science-lesson-dot { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.science-lesson-dot::after { width: 11px; height: 11px; border: 2px solid #aebbb0; border-radius: 50%; background: #fffefa; content: ''; transition: transform .18s ease,background .18s ease; }
.science-lesson-dot.current::after { transform: scale(1.25); border-color: #547c66; background: #547c66; }
.science-lesson-dot:hover::after { transform: scale(1.2); }
.science-lesson-review-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 11px; padding: 9px 13px; border: 1px solid #e8e6dc; border-radius: 13px; background: #fffefa; color: #647268; font-size: 15px; }
.science-lesson-review-row .helper-link { color: #416d54; font-size: 15px; font-weight: 800; }
.science-lesson-dialog :focus-visible { outline: 3px solid #729987; outline-offset: 3px; }
@media(max-width:650px) {
  .science-lesson-dialog { width: calc(100vw - 18px); max-height: 96svh; border-radius: 19px; }
  .science-lesson-card { min-height: 0; padding: 17px 15px 14px; }
  .science-lesson-header .section-kicker { font-size: 12px; }
  .science-lesson-count { font-size: 13px; }
  .science-lesson-art { min-height: 0; margin: 8px 0 12px; padding: 8px 6px; border-radius: 15px; }
  .science-lesson-art svg { max-height: 205px; }
  .science-lesson-art .art-caption { font-size: 19px; }
  .science-lesson-art .art-label,.science-lesson-art .ray-label { font-size: 15px; }
  .science-art-caption { padding: 0 7px 3px; font-size: 13px; }
  .science-filter-choice { min-height: 39px; padding: 5px 9px; font-size: 13px; }
  .science-filter-note { font-size: 15px; }
  .science-lesson-copy { padding: 0 2px 12px; }
  .science-lesson-copy p { font-size: 17px; line-height: 1.55; }
  .science-lesson-footer { gap: 5px; }
  .science-lesson-footer .button { min-height: 43px; padding: 7px 10px; font-size: 14px; white-space: nowrap; }
  .science-lesson-dots { gap: 0; }
  .science-lesson-dot { width: 27px; height: 34px; }
  .science-lesson-dot::after { width: 9px; height: 9px; }
  .science-lesson-review-row { align-items: flex-start; flex-direction: column; gap: 4px; font-size: 13px; }
}
@media(prefers-reduced-motion:reduce) {
  .science-lesson-dialog *, .science-lesson-dialog *::before,.science-lesson-dialog *::after { animation-duration: .01ms!important; animation-iteration-count: 1!important; scroll-behavior: auto!important; transition-duration: .01ms!important; }
}