@import url('./science-proof-universe.css');

/* THE GOOD ONES · Sciences CM2 · Lire l'heure
   L'Observatoire des 60 eclats — a tactile midnight-and-enamel course world. */

.science-bench .mission-specimen > button {
  min-height: 48px;
  margin-top: 20px;
  padding: 10px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--violet);
  color: #fff;
  font-weight: 850;
  cursor: pointer;
}

.science-world__actions { display: flex; margin-top: 24px; align-items: stretch; flex-wrap: wrap; gap: 9px; }
.science-world__actions .button { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; }

.clock-course {
  --clock-midnight: #101b31;
  --clock-midnight-2: #192846;
  --clock-ink: #182033;
  --clock-paper: #fffaf0;
  --clock-ivory: #f8eedc;
  --clock-brass: #f2c45e;
  --clock-brass-dark: #b77a19;
  --clock-coral: #ff756c;
  --clock-cyan: #55d9e8;
  --clock-cyan-dark: #087e96;
  --clock-green: #56cc8b;
  --clock-line: rgba(24, 32, 51, .16);
  --clock-shadow: 0 22px 0 rgba(16, 27, 49, .09), 0 38px 80px rgba(16, 27, 49, .16);
  position: relative;
  min-height: 100vh;
  padding: 0 clamp(10px, 2vw, 30px) clamp(80px, 10vw, 150px);
  overflow: clip;
  color: var(--clock-ink);
  background:
    radial-gradient(circle at 7% 19%, rgba(85, 217, 232, .12) 0 9rem, transparent 9.15rem),
    radial-gradient(circle at 94% 73%, rgba(242, 196, 94, .15) 0 14rem, transparent 14.15rem),
    #e9e8e2;
  font-family: var(--font-body);
}

.clock-course *, .clock-course *::before, .clock-course *::after { box-sizing: border-box; }
.clock-course h1, .clock-course h2, .clock-course h3, .clock-course strong { font-family: var(--font-display); }
.clock-course button, .clock-course input, .clock-course textarea { font: inherit; }
.clock-course button { min-height: 44px; }
.clock-course button:focus-visible,
.clock-course a:focus-visible,
.clock-course input:focus-visible,
.clock-course textarea:focus-visible {
  outline: 4px solid var(--clock-cyan);
  outline-offset: 4px;
}
.clock-course [tabindex="-1"]:focus { outline: none; }
.clock-course h1 i, .clock-course h2 i { color: var(--clock-coral); }
.clock-live { position: fixed; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Five routed rooms */
.clock-module-bar {
  position: relative;
  z-index: 50;
  display: grid;
  grid-template-columns: minmax(210px, .82fr) minmax(540px, 1.65fr) auto;
  width: min(100%, 1540px);
  min-height: 100px;
  margin: 0 auto 18px;
  padding: 13px 15px 13px 24px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 0 0 35px 47px;
  align-items: center;
  gap: 18px;
  background: rgba(16, 27, 49, .97);
  color: #fff;
  box-shadow: 0 13px 32px rgba(16, 27, 49, .2);
}
.clock-module-bar::before {
  position: absolute;
  top: 0;
  right: 10%;
  left: 10%;
  height: 3px;
  border-radius: 0 0 50% 50%;
  background: linear-gradient(90deg, transparent, var(--clock-cyan), var(--clock-brass), transparent);
  content: "";
}
.clock-module-bar__identity { display: grid; min-width: 0; gap: 3px; }
.clock-module-bar__identity > span,
.clock-module-bar__identity > small {
  color: var(--clock-cyan);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .11em;
  line-height: 1.25;
}
.clock-module-bar__identity > strong { overflow: hidden; font-size: 17px; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.clock-module-bar__identity > small { color: rgba(255, 255, 255, .58); letter-spacing: .04em; }
.clock-module-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.clock-module-nav button {
  display: grid;
  grid-template-columns: 37px minmax(0, 1fr);
  min-height: 59px;
  padding: 7px 10px 7px 7px;
  border: 0;
  border-radius: 18px 25px 16px 22px;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .72);
  cursor: pointer;
  transition: transform .24s var(--ease-spring), background .24s ease, color .24s ease;
}
.clock-module-nav button:hover { background: rgba(255, 255, 255, .16); color: #fff; transform: translateY(-2px); }
.clock-module-nav button.is-active,
.clock-module-nav button[aria-current="page"] { background: var(--clock-brass); color: var(--clock-ink); box-shadow: 0 6px 0 rgba(0, 0, 0, .2); }
.clock-module-nav i {
  display: grid;
  width: 37px;
  height: 37px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  place-items: center;
}
.clock-module-nav span { overflow: hidden; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.clock-module-bar__signal { display: flex; align-items: center; gap: 8px; color: var(--clock-brass); font-size: 9px; font-weight: 950; letter-spacing: .1em; white-space: nowrap; }
.clock-module-bar__signal i { width: 10px; height: 10px; border-radius: 50%; background: var(--clock-cyan); box-shadow: 0 0 0 5px rgba(85, 217, 232, .13), 0 0 18px var(--clock-cyan); animation: clock-signal 1.8s ease-in-out infinite; }

.clock-kicker,
.clock-proof > figcaption > span,
.clock-lesson-chapter > header > span,
.clock-lesson-traces > span,
.clock-lesson-alternate > span,
.clock-mission-task > span {
  color: var(--clock-cyan-dark);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .13em;
  line-height: 1.25;
  text-transform: uppercase;
}
.clock-primary,
.clock-reader__toc button,
.clock-lesson-handoff button,
.clock-lab-complete__actions button {
  display: inline-flex;
  min-height: 58px;
  padding: 10px 21px;
  border: 0;
  border-radius: 21px 31px 19px 28px;
  align-items: center;
  justify-content: center;
  background: var(--clock-brass);
  color: var(--clock-ink);
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 0 rgba(16, 27, 49, .18);
  transition: transform .24s var(--ease-spring), box-shadow .24s ease;
}
.clock-primary:hover,
.clock-reader__toc button:hover,
.clock-lesson-handoff button:hover,
.clock-lab-complete__actions button:hover { transform: translateY(-3px) rotate(-.35deg); box-shadow: 0 11px 0 rgba(16, 27, 49, .17); }
.clock-primary[disabled], .clock-course button[disabled] { opacity: .46; cursor: not-allowed; transform: none; }

/* The one precise analog instrument shared by every room */
.clock-face {
  position: relative;
  width: min(100%, 520px);
  margin: 0;
  aspect-ratio: 1;
  filter: drop-shadow(0 17px 18px rgba(6, 17, 34, .25));
}
.clock-face__enamel {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: clamp(8px, 1.7vw, 18px) solid var(--clock-midnight);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 9%, rgba(242, 196, 94, .14) 9.2% 9.8%, transparent 10% 57%, rgba(16, 27, 49, .07) 57.4% 58%, transparent 58.4%),
    radial-gradient(circle at 34% 27%, #fff 0, var(--clock-paper) 48%, #eadcc6 100%);
  box-shadow: inset 0 0 0 3px var(--clock-brass), inset 0 0 35px rgba(16, 27, 49, .16), 0 0 0 3px rgba(255, 255, 255, .45);
}
.clock-face__enamel::before {
  position: absolute;
  inset: 7%;
  border: 1px solid rgba(16, 27, 49, .12);
  border-radius: 50%;
  content: "";
}
.clock-face__ticks, .clock-face__numbers { position: absolute; inset: 0; }
.clock-face__ticks > i {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: max(2px, .52%);
  height: 5.4%;
  border-radius: 999px;
  background: rgba(16, 27, 49, .48);
  transform: translate(-50%, -50%) rotate(calc(var(--clock-tick) * 6deg)) translateY(-755%);
  transform-origin: 50% 50%;
}
.clock-face__ticks > i.is-hour-tick {
  width: max(3px, 1.05%);
  height: 8.2%;
  background: var(--clock-midnight);
  transform: translate(-50%, -50%) rotate(calc(var(--clock-tick) * 6deg)) translateY(-495%);
}
.clock-face__numbers > b {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: grid;
  width: 9.2%;
  aspect-ratio: 1;
  border-radius: 50%;
  color: var(--clock-midnight);
  font: 900 clamp(12px, 3.4vw, 28px)/1 var(--font-display);
  place-items: center;
  transform: translate(-50%, -50%) rotate(calc(var(--clock-number) * 30deg)) translateY(-385%) rotate(calc(var(--clock-number) * -30deg));
  transform-origin: 50% 50%;
}
.clock-hand {
  position: absolute;
  z-index: 7;
  bottom: 50%;
  left: 50%;
  display: block;
  border-radius: 999px 999px 38% 38%;
  transform-origin: 50% 100%;
  will-change: transform;
}
.clock-hand--hour {
  width: 5.4%;
  height: 27%;
  background: linear-gradient(90deg, var(--clock-brass-dark), var(--clock-brass) 48%, #ffe09b 52%, var(--clock-brass-dark));
  box-shadow: 0 3px 7px rgba(16, 27, 49, .28);
  transform: translateX(-50%) rotate(var(--clock-hour-angle));
}
.clock-hand--minute {
  width: 3.5%;
  height: 38%;
  background: linear-gradient(90deg, #c84748, var(--clock-coral) 50%, #ffaaa2);
  box-shadow: 0 3px 7px rgba(16, 27, 49, .25);
  transform: translateX(-50%) rotate(var(--clock-minute-angle));
}
.clock-hand--second {
  z-index: 9;
  width: 1.15%;
  height: 41%;
  background: var(--clock-cyan-dark);
  transform: translateX(-50%) rotate(var(--clock-second-angle));
}
.clock-hand--second::after { position: absolute; top: 100%; left: 50%; width: 4px; height: 18%; border-radius: 99px; background: inherit; content: ""; transform: translateX(-50%); }
.clock-face__pin {
  position: absolute;
  z-index: 12;
  top: 50%;
  left: 50%;
  width: 8.5%;
  aspect-ratio: 1;
  border: 3px solid var(--clock-midnight);
  border-radius: 50%;
  background: var(--clock-brass);
  box-shadow: inset 0 0 0 3px var(--clock-paper), 0 3px 8px rgba(16, 27, 49, .35);
  transform: translate(-50%, -50%);
}
.clock-face > figcaption { position: absolute; right: 8%; bottom: 3%; left: 8%; z-index: 15; padding: 8px 12px; border-radius: 999px; background: var(--clock-midnight); color: #fff; font-size: 11px; font-weight: 900; text-align: center; }
.clock-face--compact { width: min(100%, 310px); }
.clock-face--compact .clock-face__numbers > b { font-size: clamp(11px, 2vw, 18px); }

/* 24-hour cyan evidence line */
.clock-dayline { display: grid; width: 100%; margin: 0; gap: 8px; }
.clock-dayline figcaption { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.clock-dayline figcaption span { color: var(--clock-cyan-dark); font-size: 9px; font-weight: 950; letter-spacing: .12em; }
.clock-dayline figcaption strong { font-size: 18px; }
.clock-dayline__track { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); height: 29px; overflow: visible; border: 4px solid var(--clock-midnight); border-radius: 999px; background: var(--clock-midnight); box-shadow: inset 0 0 0 2px rgba(255,255,255,.16); }
.clock-dayline__track > i { height: 100%; }
.clock-dayline__track .is-night { border-radius: 999px 0 0 999px; background: #273756; }
.clock-dayline__track .is-morning { background: var(--clock-cyan); }
.clock-dayline__track .is-day { background: var(--clock-brass); }
.clock-dayline__track .is-evening { border-radius: 0 999px 999px 0; background: var(--clock-coral); }
.clock-dayline__track > b { position: absolute; z-index: 2; top: 50%; left: var(--clock-day-progress); width: 22px; height: 38px; border: 4px solid var(--clock-paper); border-radius: 50%; background: var(--clock-midnight); box-shadow: 0 4px 9px rgba(16,27,49,.3); transform: translate(-50%, -50%); transition: left .22s ease; }
.clock-dayline__labels { display: flex; justify-content: space-between; color: var(--clock-midnight); font-size: 10px; font-weight: 900; }

/* LESSON · cinematic observatory, then ivory reader */
.clock-lesson-page { background: var(--clock-midnight); color: #fff; }
.clock-lesson-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(520px, 1.15fr);
  width: min(100%, 1540px);
  min-height: 690px;
  margin: 0 auto 30px;
  padding: clamp(46px, 6vw, 92px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 69px 113px 61px 102px;
  align-items: center;
  gap: clamp(30px, 5vw, 80px);
  background:
    radial-gradient(circle at 78% 40%, rgba(85,217,232,.2), transparent 23%),
    linear-gradient(145deg, var(--clock-midnight-2), #0c1529 72%);
  box-shadow: 0 22px 0 rgba(0,0,0,.2);
}
.clock-lesson-hero::before { position: absolute; top: -22%; right: -10%; width: 58%; aspect-ratio: 1; border: 1px solid rgba(85,217,232,.2); border-radius: 50%; box-shadow: inset 0 0 0 28px rgba(85,217,232,.025), inset 0 0 0 82px rgba(242,196,94,.02); content: ""; }
.clock-lesson-hero__copy { position: relative; z-index: 3; }
.clock-lesson-hero h1 { margin: 20px 0 26px; font: 950 clamp(61px, 7.4vw, 118px)/.82 var(--font-display); letter-spacing: -.075em; }
.clock-lesson-hero h1 i { color: var(--clock-brass); }
.clock-lesson-hero__copy > p { max-width: 620px; color: rgba(255,255,255,.78); font-size: clamp(18px,1.6vw,23px); font-weight: 680; line-height: 1.48; }
.clock-lesson-objectives { display: grid; margin: 29px 0; padding: 0; gap: 8px; list-style: none; }
.clock-lesson-objectives li { display: grid; grid-template-columns: 24px 1fr; max-width: 620px; align-items: start; gap: 10px; font-weight: 760; line-height: 1.4; }
.clock-lesson-objectives li::before { display: grid; width: 22px; height: 22px; border-radius: 50%; background: var(--clock-cyan); color: var(--clock-midnight); content: "✦"; font-size: 10px; place-items: center; }
.clock-lesson-hero__scene { position: relative; min-height: 590px; }
.clock-face--hero { position: absolute; top: 3%; right: 2%; width: min(78%, 510px); animation: clock-dial-arrive .8s var(--ease-spring) both; }
.clock-lesson-teacher { position: absolute; z-index: 16; right: -8%; bottom: -14%; width: min(60%, 440px); height: 75%; object-fit: contain; object-position: right bottom; filter: drop-shadow(0 16px 17px rgba(0,0,0,.3)); }
.clock-hero-orbit { position: absolute; inset: 0; }
.clock-hero-orbit > i { position: absolute; border: 1px solid rgba(85,217,232,.26); border-radius: 50%; animation: clock-orbit 18s linear infinite; }
.clock-hero-orbit > i:nth-child(1) { inset: 2% 0 8% 4%; }
.clock-hero-orbit > i:nth-child(2) { inset: 12% 8% 19% 14%; border-color: rgba(242,196,94,.22); animation-duration: 25s; animation-direction: reverse; }
.clock-hero-orbit > i:nth-child(3) { top: 13%; right: 5%; width: 15px; height: 15px; border: 0; background: var(--clock-cyan); box-shadow: 0 0 28px var(--clock-cyan); }
.clock-hero-readout { position: absolute; z-index: 18; bottom: 2%; left: 4%; display: grid; min-width: 205px; padding: 17px 20px; border: 2px solid rgba(85,217,232,.45); border-radius: 22px 32px 20px 29px; gap: 3px; background: rgba(11,21,40,.94); box-shadow: 0 10px 22px rgba(0,0,0,.25); }
.clock-hero-readout span { color: var(--clock-cyan); font-size: 9px; font-weight: 950; letter-spacing: .12em; }
.clock-hero-readout strong { color: var(--clock-brass); font: 950 48px/.9 var(--font-display); font-variant-numeric: tabular-nums; }
.clock-hero-readout small { color: rgba(255,255,255,.62); font-size: 8px; font-weight: 850; letter-spacing: .08em; }

.clock-reader { display: grid; grid-template-columns: 250px minmax(0, 1fr); width: min(100%, 1440px); margin: 0 auto; align-items: start; gap: 20px; color: var(--clock-ink); }
.clock-reader__toc { position: sticky; top: 18px; display: grid; max-height: calc(100vh - 36px); padding: 23px 15px; overflow-y: auto; border: 1px solid rgba(255,255,255,.14); border-radius: 30px 43px 27px 39px; gap: 7px; background: var(--clock-midnight-2); color: #fff; }
.clock-reader__toc > span { margin: 3px 8px 10px; color: var(--clock-cyan); font-size: 9px; font-weight: 950; letter-spacing: .12em; }
.clock-reader__toc a { display: grid; grid-template-columns: 35px 1fr; min-height: 48px; padding: 7px 9px 7px 7px; border-radius: 16px 22px 15px 20px; align-items: center; gap: 8px; color: rgba(255,255,255,.75); font-size: 11px; font-weight: 800; line-height: 1.2; text-decoration: none; }
.clock-reader__toc a:hover { background: rgba(255,255,255,.09); color: #fff; }
.clock-reader__toc a i { display: grid; width: 34px; height: 34px; border: 1px solid currentColor; border-radius: 50%; font-size: 9px; font-style: normal; place-items: center; }
.clock-reader__toc button { min-height: 55px; margin-top: 9px; font-size: 12px; }
.clock-reader__book { display: grid; overflow: hidden; border-radius: 54px 79px 48px 71px; gap: 0; background: var(--clock-paper); box-shadow: var(--clock-shadow); }
.clock-lesson-chapter { position: relative; display: grid; padding: clamp(40px, 6vw, 82px); border-bottom: 3px solid rgba(16,27,49,.09); gap: 29px; background: var(--clock-paper); scroll-margin-top: 24px; }
.clock-lesson-chapter:nth-child(2n) { background: var(--clock-ivory); }
.clock-lesson-chapter > header { max-width: 900px; }
.clock-lesson-chapter > header h2,
.clock-lesson-handoff h2 { margin: 13px 0 0; font: 950 clamp(47px, 6vw, 86px)/.88 var(--font-display); letter-spacing: -.06em; text-wrap: balance; }
.clock-lesson-chapter > header p { max-width: 720px; margin: 18px 0 0; font-size: 18px; font-weight: 700; line-height: 1.48; }
.clock-lesson-chapter__copy { display: grid; max-width: 870px; gap: 13px; }
.clock-lesson-chapter__copy p { margin: 0; font-size: clamp(17px,1.5vw,21px); font-weight: 650; line-height: 1.56; }

.clock-word-chamber { grid-template-columns: minmax(0, 1fr) 330px; }
.clock-word-chamber > header { grid-column: 1 / -1; }
.clock-word-chamber__grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.clock-word-chamber__grid article { display: grid; grid-template-columns: 44px 1fr; min-height: 185px; padding: 20px; border: 2px solid var(--clock-midnight); border-radius: 27px 40px 24px 36px; align-content: start; gap: 6px 12px; background: #fff; box-shadow: 0 7px 0 rgba(16,27,49,.11); }
.clock-word-chamber__grid article:nth-child(3n+2) { background: #e3f8f7; }
.clock-word-chamber__grid article:nth-child(3n) { background: #ffe4dc; }
.clock-word-chamber__grid article > i { grid-row: 1 / 4; display: grid; width: 42px; height: 42px; border-radius: 50%; background: var(--clock-midnight); color: var(--clock-brass); font-size: 10px; font-style: normal; font-weight: 950; place-items: center; }
.clock-word-chamber__grid article > span { font: 950 24px/1 var(--font-display); }
.clock-word-chamber__grid article p { margin: 4px 0 0; font-weight: 720; line-height: 1.4; }
.clock-word-chamber__grid article small { color: var(--clock-cyan-dark); font-weight: 800; line-height: 1.35; }
.clock-word-chamber__locator { display: grid; padding: 22px; border-radius: 35px 50px 31px 45px; align-content: start; gap: 17px; background: var(--clock-midnight); color: #fff; }
.clock-word-chamber__locator dl { display: grid; margin: 0; gap: 8px; }
.clock-word-chamber__locator dl > div, .clock-hand-key > div { display: grid; grid-template-columns: 45px 1fr; min-height: 52px; align-items: center; gap: 10px; }
.clock-word-chamber__locator dt, .clock-hand-key dt { width: 40px; height: 9px; border-radius: 99px; background: var(--clock-brass); }
.clock-word-chamber__locator dt.is-minute, .clock-hand-key dt.is-minute { height: 6px; background: var(--clock-coral); }
.clock-word-chamber__locator dt.is-tick { width: 5px; height: 29px; justify-self: center; background: var(--clock-cyan); }
.clock-word-chamber__locator dd { margin: 0; font-size: 12px; font-weight: 800; }

.clock-proof { display: grid; margin: 5px 0; padding: clamp(25px, 4vw, 48px); border-radius: 41px 61px 37px 55px; gap: 25px; background: #fff; box-shadow: 0 10px 0 rgba(16,27,49,.09); }
.clock-proof > figcaption { display: grid; gap: 8px; }
.clock-proof > figcaption > strong { font: 920 clamp(27px,3.2vw,47px)/1 var(--font-display); }
.clock-sixty-scene { display: grid; grid-template-columns: 340px minmax(0, 1fr); align-items: center; gap: 34px; }
.clock-sixty-legend > strong { display: block; color: var(--clock-coral); font: 950 clamp(45px,5vw,73px)/.9 var(--font-display); letter-spacing: -.06em; }
.clock-sixty-legend p { font-size: 17px; font-weight: 720; line-height: 1.45; }
.clock-sixty-legend ol { display: grid; grid-template-columns: repeat(5,1fr); margin: 22px 0 0; padding: 0; gap: 6px; list-style: none; }
.clock-sixty-legend li { display: grid; min-height: 78px; padding: 9px; border-radius: 18px 24px 16px 22px; place-items: center; background: var(--clock-ivory); text-align: center; }
.clock-sixty-legend li i { color: var(--clock-cyan-dark); font: 950 24px/1 var(--font-display); font-style: normal; }
.clock-sixty-legend li span { font-size: 9px; font-weight: 850; }
.clock-proof__rule { margin: 0; padding: 19px 23px; border-left: 8px solid var(--clock-coral); border-radius: 5px 24px 21px 5px; background: var(--clock-brass); font-size: 18px; font-weight: 760; line-height: 1.4; }
.clock-hand-comparison { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; }
.clock-hand-comparison article { display: grid; padding: 18px; border-radius: 29px 43px 26px 39px; place-items: center; gap: 12px; background: var(--clock-ivory); }
.clock-hand-comparison article p { margin: 0; font-weight: 720; line-height: 1.4; }
.clock-hand-comparison > em { width: 100px; color: var(--clock-cyan-dark); font-size: 10px; font-style: normal; font-weight: 950; letter-spacing: .08em; text-align: center; }
.clock-hand-key { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 0; padding: 18px; border-radius: 26px 38px 23px 34px; gap: 10px; background: var(--clock-midnight); color: #fff; }
.clock-hand-key dd { display: grid; margin: 0; gap: 3px; }
.clock-hand-key dd span { color: rgba(255,255,255,.65); font-size: 11px; font-weight: 750; }
.clock-two-times { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.clock-two-times article { display: grid; grid-template-columns: minmax(170px, .65fr) 1fr; padding: 18px; border-radius: 31px 45px 28px 41px; align-items: center; gap: 6px 18px; background: var(--clock-midnight); color: #fff; }
.clock-two-times article .clock-face { grid-row: 1 / 3; }
.clock-two-times article > strong { color: var(--clock-brass); font: 950 clamp(36px,4vw,58px)/1 var(--font-display); }
.clock-two-times article > span { color: var(--clock-cyan); font-weight: 850; }
.clock-two-times > p { grid-column: 1 / -1; margin: 0; padding: 16px 20px; border-radius: 21px 31px 19px 28px; background: #dff7f5; font-weight: 740; line-height: 1.45; }
.clock-worked-model { display: grid; grid-template-columns: minmax(310px,.8fr) 1.2fr; align-items: center; gap: 34px; }
.clock-worked-model ol { display: grid; margin: 0; padding: 0; gap: 10px; list-style: none; }
.clock-worked-model li { display: grid; grid-template-columns: 48px 1fr; min-height: 94px; padding: 15px; border-radius: 24px 35px 22px 31px; align-items: center; gap: 12px; background: var(--clock-ivory); }
.clock-worked-model li > i { display: grid; width: 46px; height: 46px; border-radius: 50%; background: var(--clock-cyan); font-style: normal; font-weight: 950; place-items: center; }
.clock-worked-model li p { margin: 0; font-weight: 720; line-height: 1.45; }
.clock-duration-ribbon { display: grid; grid-template-columns: 150px 1fr 150px; align-items: stretch; }
.clock-duration-ribbon article { display: grid; min-height: 135px; padding: 18px; border-radius: 30px 0 0 40px; align-content: center; background: var(--clock-midnight); color: #fff; text-align: center; }
.clock-duration-ribbon article:last-child { border-radius: 0 40px 30px 0; }
.clock-duration-ribbon article span { color: var(--clock-cyan); font-size: 9px; font-weight: 950; letter-spacing: .1em; }
.clock-duration-ribbon article strong { color: var(--clock-brass); font-size: 33px; }
.clock-duration-ribbon > div { display: flex; min-width: 0; padding: 20px 12px; align-items: center; justify-content: center; background: #dff7f5; }
.clock-duration-ribbon > div i { height: 9px; flex: var(--clock-duration) 1 1; border-radius: 99px; background: var(--clock-cyan-dark); }
.clock-duration-ribbon > div b { padding: 8px; font-size: 11px; white-space: nowrap; }
.clock-proof--duration > p { margin: 0; font-size: 17px; font-weight: 720; line-height: 1.45; }
.clock-lesson-traces, .clock-lesson-alternate { padding: 23px 27px; border-radius: 28px 42px 25px 38px; background: var(--clock-midnight); color: #fff; }
.clock-lesson-traces > span, .clock-lesson-alternate > span { color: var(--clock-cyan); }
.clock-lesson-traces ul { display: grid; margin: 17px 0 0; padding-left: 19px; gap: 9px; }
.clock-lesson-traces li { font-weight: 730; line-height: 1.42; }
.clock-lesson-alternate { background: #dff7f5; color: var(--clock-ink); }
.clock-lesson-alternate p { margin: 10px 0 0; font-weight: 720; line-height: 1.5; }
.clock-lesson-handoff { display: grid; min-height: 470px; padding: clamp(45px,6vw,83px); align-content: center; justify-items: start; background: var(--clock-midnight); color: #fff; }
.clock-lesson-handoff > span { color: var(--clock-cyan); font-size: 10px; font-weight: 950; letter-spacing: .13em; }
.clock-lesson-handoff h2 i { color: var(--clock-brass); }
.clock-lesson-handoff p { max-width: 720px; font-size: 19px; font-weight: 680; line-height: 1.48; }

/* LAB · one synchronized instrument and an honest retry loop */
.clock-lab-page { background: #dfe8e8; }
.clock-lab-launch, .clock-lab-complete {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,.88fr) minmax(500px,1.12fr);
  width: min(100%, 1540px);
  min-height: 690px;
  margin: 0 auto;
  padding: clamp(45px,6vw,88px);
  overflow: hidden;
  border-radius: 67px 109px 59px 98px;
  align-items: center;
  gap: 50px;
  background: var(--clock-midnight);
  color: #fff;
  box-shadow: var(--clock-shadow);
}
.clock-lab-launch > div:first-child, .clock-lab-complete > div:first-child { position: relative; z-index: 4; }
.clock-lab-launch h1, .clock-lab-complete h1, .clock-lab-workspace__heading h1 { margin: 18px 0 24px; font: 950 clamp(59px,7.2vw,110px)/.83 var(--font-display); letter-spacing: -.07em; }
.clock-lab-launch > div > p, .clock-lab-complete > div > p { max-width: 620px; color: rgba(255,255,255,.76); font-size: 19px; font-weight: 690; line-height: 1.48; }
.clock-lab-launch__goals { display: grid; margin: 26px 0; padding: 0; gap: 8px; list-style: none; }
.clock-lab-launch__goals li { display: grid; grid-template-columns: 23px 1fr; gap: 9px; font-weight: 760; }
.clock-lab-launch__goals li::before { display: grid; width: 22px; height: 22px; border-radius: 50%; background: var(--clock-cyan); color: var(--clock-midnight); content: "✓"; font-size: 10px; place-items: center; }
.clock-lab-launch__scene, .clock-lab-complete > aside { position: relative; min-height: 550px; }
.clock-face--launch, .clock-face--complete { position: absolute; top: 0; right: 0; width: min(80%,510px); }
.clock-lab-teacher { position: absolute; z-index: 14; right: -9%; bottom: -15%; width: min(58%,430px); height: 74%; object-fit: contain; object-position: right bottom; filter: drop-shadow(0 18px 16px rgba(0,0,0,.3)); }
.clock-lab-launch__readout { position: absolute; z-index: 17; bottom: 3%; left: 1%; display: grid; padding: 18px 21px; border: 2px solid var(--clock-cyan); border-radius: 23px 34px 21px 31px; gap: 4px; background: #091426; }
.clock-lab-launch__readout span { color: var(--clock-cyan); font-size: 9px; font-weight: 950; letter-spacing: .12em; }
.clock-lab-launch__readout strong { color: var(--clock-brass); font-size: 28px; }
.clock-lab-launch__readout small { color: rgba(255,255,255,.64); font-size: 8px; font-weight: 800; }
.clock-lab-complete dl { display: grid; grid-template-columns: repeat(3,1fr); margin: 29px 0; gap: 8px; }
.clock-lab-complete dl > div { display: grid; min-height: 110px; padding: 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 20px 28px 18px 25px; align-content: center; background: rgba(255,255,255,.07); }
.clock-lab-complete dt { color: var(--clock-brass); font: 950 42px/.9 var(--font-display); }
.clock-lab-complete dd { margin: 7px 0 0; color: rgba(255,255,255,.68); font-size: 11px; font-weight: 750; }
.clock-lab-complete__actions { display: flex; flex-wrap: wrap; gap: 9px; }
.clock-lab-complete__actions button:last-child { background: #fff; }

.clock-lab-shell { width: min(100%,1540px); margin: 0 auto; }
.clock-lab-progress { display: grid; grid-template-columns: auto 1fr auto; margin: 22px auto 13px; padding: 13px 18px; border-radius: 20px 29px 18px 26px; align-items: center; gap: 14px; background: var(--clock-midnight); color: #fff; }
.clock-lab-progress > span, .clock-lab-progress > strong { color: var(--clock-cyan); font-size: 10px; font-weight: 950; letter-spacing: .1em; }
.clock-lab-progress > div { height: 11px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.13); }
.clock-lab-progress > div i { display: block; width: var(--clock-progress); height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--clock-cyan),var(--clock-brass)); transition: width .4s var(--ease-spring); }
.clock-lab-workspace { padding: clamp(24px,4vw,52px); border-radius: 53px 77px 47px 69px; background: var(--clock-paper); box-shadow: var(--clock-shadow); }
.clock-lab-workspace__heading { display: grid; grid-template-columns: 1fr auto; margin-bottom: 25px; padding: 8px 7px 25px; border-bottom: 4px solid var(--clock-midnight); align-items: end; gap: 20px; }
.clock-lab-workspace__heading h1 { margin: 10px 0 12px; font-size: clamp(45px,5.7vw,80px); }
.clock-lab-workspace__heading p { max-width: 750px; margin: 0; font-size: 17px; font-weight: 690; line-height: 1.44; }
.clock-lab-workspace__heading > strong { color: var(--clock-coral); font: 950 clamp(69px,8vw,120px)/.75 var(--font-display); }
.clock-lab-workspace__grid { display: grid; grid-template-columns: minmax(430px,.94fr) minmax(0,1.06fr); align-items: start; gap: 18px; }
.clock-console { position: sticky; top: 18px; display: grid; padding: clamp(21px,3vw,34px); border-radius: 41px 59px 37px 53px; gap: 20px; background: var(--clock-midnight); color: #fff; box-shadow: 0 13px 0 rgba(16,27,49,.16); }
.clock-console > header { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.clock-console > header > div { display: grid; gap: 3px; }
.clock-console > header span { color: var(--clock-cyan); font-size: 9px; font-weight: 950; letter-spacing: .11em; }
.clock-console > header strong { color: var(--clock-brass); font: 950 clamp(48px,5.7vw,76px)/.84 var(--font-display); font-variant-numeric: tabular-nums; }
.clock-console > header small { color: rgba(255,255,255,.58); font-size: 9px; font-weight: 850; }
.clock-console__status { padding: 8px 10px; border: 1px solid rgba(85,217,232,.4); border-radius: 999px; color: var(--clock-cyan); font-size: 8px; font-style: normal; font-weight: 950; letter-spacing: .07em; white-space: nowrap; }
.clock-console__instrument { position: relative; display: grid; place-items: center; }
.clock-face--console { width: min(100%,440px); }
.clock-console__legend { display: flex; margin-top: 12px; flex-wrap: wrap; justify-content: center; gap: 6px; }
.clock-console__legend span { padding: 7px 10px; border-radius: 999px; background: rgba(255,255,255,.09); color: var(--clock-brass); font-size: 8px; font-weight: 950; letter-spacing: .08em; }
.clock-console__legend .is-minute { color: var(--clock-coral); }
.clock-console__legend .is-second { color: var(--clock-cyan); }
.clock-console__controls { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.clock-console__controls label { display: grid; grid-template-columns: 1fr auto; min-height: 96px; padding: 14px; border: 1px solid rgba(255,255,255,.11); border-radius: 21px 30px 19px 27px; gap: 10px; background: rgba(255,255,255,.07); }
.clock-console__controls label > span { color: rgba(255,255,255,.7); font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.clock-console__controls output { color: var(--clock-brass); font: 950 25px/1 var(--font-display); }
.clock-console__controls input { grid-column: 1 / -1; width: 100%; min-height: 44px; margin: -8px 0; accent-color: var(--clock-coral); cursor: ew-resize; }
.clock-console__controls input:disabled { cursor: not-allowed; opacity: .52; }
.clock-console__hint { margin: 0; color: rgba(255,255,255,.67); font-size: 10px; font-weight: 740; line-height: 1.4; }
.clock-console__restore { min-height: 48px; border: 1px solid var(--clock-cyan); border-radius: 18px 25px 16px 23px; background: transparent; color: var(--clock-cyan); font-weight: 850; cursor: pointer; }
.clock-console .clock-dayline { padding: 16px; border-radius: 23px 33px 21px 30px; background: rgba(255,255,255,.07); }
.clock-console .clock-dayline figcaption strong, .clock-console .clock-dayline__labels { color: #fff; }

.clock-lab-workspace__task { display: grid; gap: 13px; }
.clock-mission-task, .clock-vocabulary-gate { display: grid; padding: clamp(23px,3vw,36px); border: 3px solid var(--clock-midnight); border-radius: 38px 55px 34px 50px; gap: 21px; background: #fff; }
.clock-mission-task h2, .clock-vocabulary-gate h2 { margin: 10px 0 0; font: 930 clamp(30px,3.5vw,50px)/1 var(--font-display); letter-spacing: -.045em; }
.clock-mission-task > span { color: var(--clock-cyan-dark); }
.clock-target-time { display: grid; min-height: 170px; padding: 23px; border-radius: 29px 43px 26px 39px; align-content: center; background: var(--clock-brass); }
.clock-target-time small { color: var(--clock-midnight); font-size: 9px; font-weight: 950; letter-spacing: .1em; }
.clock-target-time strong { margin-top: 4px; font: 950 clamp(54px,6vw,83px)/.9 var(--font-display); font-variant-numeric: tabular-nums; }
.clock-target-time p { margin: 9px 0 0; font-weight: 760; line-height: 1.4; }
.clock-construct-checks { display: grid; margin: 0; padding: 0; counter-reset: clock-steps; gap: 8px; list-style: none; }
.clock-construct-checks li { display: grid; grid-template-columns: 38px 1fr; min-height: 58px; padding: 10px; border-radius: 18px 26px 16px 23px; align-items: center; gap: 10px; background: var(--clock-ivory); font-weight: 730; line-height: 1.35; }
.clock-construct-checks li::before { display: grid; width: 36px; height: 36px; border-radius: 50%; background: var(--clock-midnight); color: var(--clock-cyan); content: counter(clock-steps); counter-increment: clock-steps; font-size: 10px; font-weight: 950; place-items: center; }
.clock-mission-context { margin: 0; padding: 16px 19px; border-left: 7px solid var(--clock-cyan); background: #dff7f5; font-weight: 730; line-height: 1.44; }
.clock-mission-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.clock-mission-options button { display: grid; grid-template-columns: 45px 1fr; min-height: 76px; padding: 12px; border: 2px solid var(--clock-midnight); border-radius: 22px 32px 20px 29px; align-items: center; gap: 12px; background: var(--clock-ivory); color: var(--clock-ink); cursor: pointer; text-align: left; box-shadow: 0 5px 0 rgba(16,27,49,.12); }
.clock-mission-options button:hover:not([disabled]) { transform: translateY(-2px); }
.clock-mission-options button i { display: grid; width: 43px; height: 43px; border-radius: 50%; background: var(--clock-midnight); color: var(--clock-brass); font-style: normal; font-weight: 950; place-items: center; }
.clock-mission-options button span { font-weight: 850; }
.clock-mission-options button.is-wrong { border-color: var(--clock-coral); background: #ffe4df; }
.clock-mission-options button.is-correct { border-color: var(--clock-green); background: #dbf5e5; }
.clock-mission-options button.is-correct i { background: var(--clock-green); color: var(--clock-midnight); }

.clock-vocabulary-gate > header p { margin: 12px 0 0; font-weight: 720; line-height: 1.45; }
.clock-vocabulary-gate__grid { display: grid; gap: 9px; }
.clock-vocabulary-gate__grid > article { overflow: hidden; border: 2px solid var(--clock-midnight); border-radius: 24px 35px 21px 31px; background: var(--clock-ivory); }
.clock-vocabulary-gate__grid > article.is-open { background: #fff; }
.clock-vocabulary-gate__grid > article.is-complete { border-color: var(--clock-green); background: #e1f5e8; }
.clock-vocabulary-gate__grid > article > button { display: grid; grid-template-columns: 43px 1fr 34px; width: 100%; min-height: 69px; padding: 11px; border: 0; align-items: center; gap: 10px; background: transparent; color: var(--clock-ink); cursor: pointer; text-align: left; }
.clock-vocabulary-gate__grid > article > button > i { display: grid; width: 41px; height: 41px; border-radius: 50%; background: var(--clock-midnight); color: var(--clock-cyan); font-size: 10px; font-style: normal; font-weight: 950; place-items: center; }
.clock-vocabulary-gate__grid > article > button > span { display: grid; gap: 3px; }
.clock-vocabulary-gate__grid > article > button strong { font-size: 19px; }
.clock-vocabulary-gate__grid > article > button small { color: var(--clock-cyan-dark); font-size: 10px; font-weight: 760; }
.clock-vocabulary-gate__grid > article > button > b { display: grid; width: 32px; height: 32px; border-radius: 50%; background: var(--clock-brass); place-items: center; }
.clock-vocabulary-gate__grid > article > div { display: grid; padding: 3px 18px 18px; gap: 11px; }
.clock-vocabulary-gate__grid > article > div > p { margin: 0; font-weight: 730; line-height: 1.4; }
.clock-vocabulary-gate fieldset { display: grid; margin: 0; padding: 14px; border: 1px solid var(--clock-line); border-radius: 18px 26px 16px 23px; gap: 7px; }
.clock-vocabulary-gate legend { padding: 0 7px; font-size: 11px; font-weight: 850; }
.clock-vocabulary-gate fieldset button { min-height: 48px; padding: 8px 13px; border: 1px solid var(--clock-midnight); border-radius: 15px 21px 14px 19px; background: #fff; color: var(--clock-ink); font-weight: 780; cursor: pointer; text-align: left; }
.clock-vocabulary-gate fieldset button.is-wrong { border-color: var(--clock-coral); background: #ffe3df; }
.clock-vocabulary-gate fieldset button.is-correct { border-color: var(--clock-green); background: #dcf4e5; }
.clock-vocabulary-gate__complete { padding: 18px 20px; border-radius: 24px 35px 21px 31px; background: var(--clock-green); }
.clock-vocabulary-gate__complete strong { font-size: 22px; }
.clock-vocabulary-gate__complete p { margin: 6px 0 12px; font-weight: 720; }
.clock-vocabulary-gate__complete button { padding: 10px 15px; border: 0; border-radius: 16px 23px 14px 20px; background: var(--clock-midnight); color: #fff; font-weight: 850; cursor: pointer; }

.clock-feedback { display: grid; padding: 18px 20px; border-radius: 23px 34px 20px 31px; gap: 7px; background: #ffe5df; box-shadow: inset 7px 0 0 var(--clock-coral); }
.clock-feedback.is-correct { background: #dff5e6; box-shadow: inset 7px 0 0 var(--clock-green); }
.clock-feedback > strong, .clock-feedback span { color: #9d2f31; font-size: 9px; font-weight: 950; letter-spacing: .09em; }
.clock-feedback.is-correct > strong, .clock-feedback.is-correct span { color: #126b42; }
.clock-feedback p, .clock-feedback small { margin: 0; font-weight: 730; line-height: 1.43; }
.clock-mission-feedback { grid-template-columns: 1fr auto; align-items: center; }
.clock-mission-feedback > strong { max-width: 250px; color: var(--clock-ink); font-size: 12px; line-height: 1.35; }
.clock-mission-feedback button { min-height: 50px; padding: 8px 14px; border: 0; border-radius: 17px 24px 15px 22px; background: var(--clock-green); color: var(--clock-ink); font-weight: 880; cursor: pointer; }
.clock-evidence-fields { display: grid; gap: 10px; }
.clock-evidence-fields label { display: grid; gap: 7px; }
.clock-evidence-fields label > span { display: flex; align-items: center; gap: 9px; font-weight: 850; }
.clock-evidence-fields label > span i { display: grid; width: 34px; height: 34px; border-radius: 50%; background: var(--clock-midnight); color: var(--clock-cyan); font-size: 9px; font-style: normal; place-items: center; }
.clock-evidence-fields input, .clock-evidence-fields textarea { width: 100%; min-height: 54px; padding: 14px 16px; border: 2px solid var(--clock-midnight); border-radius: 17px 25px 15px 22px; background: var(--clock-paper); color: var(--clock-ink); }
.clock-evidence-fields textarea { min-height: 120px; resize: vertical; }
.clock-evidence-checks { display: grid; margin: 0; padding: 17px; border: 2px solid var(--clock-midnight); border-radius: 22px 32px 20px 29px; gap: 8px; background: #dff7f5; }
.clock-evidence-checks legend { padding: 0 8px; color: var(--clock-cyan-dark); font-size: 9px; font-weight: 950; letter-spacing: .09em; }
.clock-evidence-checks label { display: grid; grid-template-columns: 44px 1fr; min-height: 48px; align-items: center; gap: 8px; font-weight: 730; }
.clock-evidence-checks input { width: 24px; height: 24px; justify-self: center; accent-color: var(--clock-green); }
.clock-evidence-ledger { padding: 22px; border-radius: 30px 44px 27px 40px; background: var(--clock-midnight); color: #fff; }
.clock-evidence-ledger > header { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.clock-evidence-ledger > header span { color: var(--clock-cyan); font-size: 9px; font-weight: 950; letter-spacing: .1em; }
.clock-evidence-ledger > header strong { color: var(--clock-brass); font-size: 23px; }
.clock-evidence-ledger > p { margin: 15px 0 0; color: rgba(255,255,255,.64); font-size: 12px; font-weight: 720; line-height: 1.42; }
.clock-evidence-ledger ol { display: grid; margin: 15px 0 0; padding: 0; gap: 7px; list-style: none; }
.clock-evidence-ledger li { display: grid; grid-template-columns: 38px 1fr; min-height: 60px; padding: 8px; border-radius: 17px 24px 15px 22px; align-items: center; gap: 9px; background: rgba(255,255,255,.09); }
.clock-evidence-ledger li > i { display: grid; width: 36px; height: 36px; border-radius: 50%; background: var(--clock-green); color: var(--clock-midnight); font-size: 9px; font-style: normal; font-weight: 950; place-items: center; }
.clock-evidence-ledger li > span { display: grid; gap: 3px; }
.clock-evidence-ledger li strong { font-size: 13px; }
.clock-evidence-ledger li small { color: rgba(255,255,255,.6); font-size: 9px; font-weight: 720; }
.clock-lab-empty { width: min(100%,1200px); min-height: 440px; margin: 0 auto; padding: 50px; border-radius: 55px 77px 49px 70px; background: var(--clock-paper); }

@keyframes clock-signal { 0%,100% { opacity:.55; transform:scale(.78); } 50% { opacity:1; transform:scale(1); } }
@keyframes clock-orbit { to { transform:rotate(360deg); } }
@keyframes clock-dial-arrive { from { opacity:0; transform:scale(.8) rotate(-9deg); } to { opacity:1; transform:none; } }

@media (max-width: 1100px) {
  .clock-module-bar { grid-template-columns: 1fr auto; }
  .clock-module-nav { grid-column: 1 / -1; grid-row: 2; }
  .clock-module-bar__signal { grid-column: 2; grid-row: 1; }
  .clock-lesson-hero, .clock-lab-launch, .clock-lab-complete { grid-template-columns: 1fr; }
  .clock-lesson-hero__scene, .clock-lab-launch__scene, .clock-lab-complete > aside { width: min(100%,700px); min-height: 570px; justify-self: center; }
  .clock-reader { grid-template-columns: 1fr; }
  .clock-reader__toc { position: relative; top: auto; display: flex; max-height: none; padding: 10px; overflow-x: auto; }
  .clock-reader__toc > span { display: none; }
  .clock-reader__toc a { min-width: 180px; }
  .clock-reader__toc button { min-width: 190px; margin: 0; }
  .clock-word-chamber { grid-template-columns: 1fr; }
  .clock-word-chamber__locator { grid-template-columns: 280px 1fr; align-items: center; }
  .clock-lab-workspace__grid { grid-template-columns: 1fr; }
  .clock-console { position: relative; top: auto; }
}

@media (max-width: 760px) {
  .clock-course { padding-inline: 7px; }
  .clock-module-bar { width: 100%; padding: 12px 9px; border-radius: 0 0 25px 34px; }
  .clock-module-bar__identity { padding-left: 6px; }
  .clock-module-bar__identity > strong { font-size: 15px; }
  .clock-module-bar__signal { font-size: 8px; }
  .clock-module-nav { grid-template-columns: repeat(5, 145px); margin-inline: -3px; padding: 3px 3px 9px; overflow-x: auto; }
  .clock-module-nav button { min-height: 56px; }
  .clock-lesson-hero, .clock-lab-launch, .clock-lab-complete { width: 100%; min-height: 0; padding: 42px 20px 50px; border-radius: 43px 61px 39px 55px; }
  .clock-lesson-hero h1, .clock-lab-launch h1, .clock-lab-complete h1 { font-size: clamp(55px,16vw,79px); }
  .clock-lesson-hero__scene, .clock-lab-launch__scene, .clock-lab-complete > aside { min-height: 430px; }
  .clock-face--hero, .clock-face--launch, .clock-face--complete { width: 88%; }
  .clock-lesson-teacher, .clock-lab-teacher { right: -13%; width: 60%; }
  .clock-hero-readout, .clock-lab-launch__readout { bottom: 1%; left: 0; min-width: 175px; }
  .clock-reader { width: 100%; }
  .clock-reader__book { border-radius: 38px 53px 34px 48px; }
  .clock-lesson-chapter { padding: 39px 18px 48px; }
  .clock-lesson-chapter > header h2, .clock-lesson-handoff h2 { font-size: clamp(43px,13vw,65px); }
  .clock-word-chamber__grid { grid-template-columns: 1fr; }
  .clock-word-chamber__locator { grid-template-columns: 1fr; }
  .clock-proof { padding: 24px 14px 30px; border-radius: 29px 42px 26px 38px; }
  .clock-sixty-scene, .clock-worked-model { grid-template-columns: 1fr; }
  .clock-sixty-scene .clock-face, .clock-worked-model .clock-face { justify-self: center; }
  .clock-sixty-legend ol { grid-template-columns: repeat(5,1fr); }
  .clock-sixty-legend li { padding: 5px; }
  .clock-hand-comparison { grid-template-columns: 1fr; }
  .clock-hand-comparison > em { width: auto; }
  .clock-hand-key, .clock-two-times { grid-template-columns: 1fr; }
  .clock-two-times article { grid-template-columns: minmax(135px,.65fr) 1fr; }
  .clock-duration-ribbon { grid-template-columns: 1fr; }
  .clock-duration-ribbon article, .clock-duration-ribbon article:last-child { min-height: 95px; border-radius: 25px 35px 22px 31px; }
  .clock-duration-ribbon > div { min-height: 80px; }
  .clock-lesson-handoff { min-height: 410px; padding: 40px 20px; }
  .clock-lab-complete dl { grid-template-columns: 1fr; }
  .clock-lab-workspace { padding: 25px 12px 35px; border-radius: 38px 53px 34px 48px; }
  .clock-lab-workspace__heading { grid-template-columns: 1fr; }
  .clock-lab-workspace__heading > strong { grid-row: 1; font-size: 60px; }
  .clock-console { padding: 20px 12px; border-radius: 30px 43px 27px 39px; }
  .clock-console > header { align-items: flex-start; flex-direction: column; }
  .clock-console__controls { grid-template-columns: 1fr; }
  .clock-mission-task, .clock-vocabulary-gate { padding: 24px 14px 30px; border-radius: 28px 41px 25px 37px; }
  .clock-mission-options { grid-template-columns: 1fr; }
  .clock-mission-feedback { grid-template-columns: 1fr; }
  .clock-mission-feedback button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .clock-course *, .clock-course *::before, .clock-course *::after { scroll-behavior: auto !important; }
  .clock-module-bar__signal i, .clock-hero-orbit > i, .clock-face--hero { animation: none !important; }
  .clock-hand, .clock-dayline__track > b, .clock-lab-progress > div i, .clock-course button { transition: none !important; }
}

/* Further teaching scenes: the hour already passed, and fractions of a turn. */
.clock-proof--sixty { border-top: 9px solid var(--clock-cyan); }
.clock-proof--hands { border-top: 9px solid var(--clock-coral); }
.clock-proof--day { border-top: 9px solid var(--clock-brass); }
.clock-proof--worked { border-top: 9px solid var(--clock-midnight); }
.clock-proof--passed { border-top: 9px solid var(--clock-cyan-dark); }
.clock-proof--fractions { border-top: 9px solid var(--clock-brass); }
.clock-mission-task--construct { background: #fffdf7; }
.clock-mission-task--choice { background: #fff; }
.clock-mission-task--dial { background: #fdfaf2; }
.clock-mission-task--explain { background: #f5fbfa; }
.clock-passed-scene { display: grid; grid-template-columns: minmax(300px, .8fr) 1.2fr; align-items: center; gap: 34px; }
.clock-passed-scene > div { display: grid; gap: 11px; }
.clock-passed-scene > div > span { padding: 12px 15px; border-radius: 17px 24px 15px 22px; background: #dff7f5; color: var(--clock-cyan-dark); font-size: 10px; font-weight: 950; letter-spacing: .08em; }
.clock-passed-scene > div > span:last-of-type { background: #ffe3dd; color: #9d3434; }
.clock-passed-scene > div > i { width: 100%; height: 11px; border-radius: 99px; background: linear-gradient(90deg, var(--clock-cyan-dark), var(--clock-brass), var(--clock-coral)); }
.clock-passed-scene > div > strong { color: var(--clock-coral); font: 950 clamp(51px, 6vw, 86px)/.88 var(--font-display); letter-spacing: -.06em; }
.clock-passed-scene > div > p { margin: 0; font-size: 17px; font-weight: 720; line-height: 1.47; }
.clock-fraction-states { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.clock-fraction-states article { display: grid; min-width: 0; padding: 17px; border: 2px solid var(--clock-midnight); border-radius: 28px 42px 25px 38px; justify-items: center; gap: 7px; background: var(--clock-ivory); }
.clock-fraction-states article:nth-child(2) { background: #dff7f5; }
.clock-fraction-states article:nth-child(3) { background: #ffe4df; }
.clock-fraction-states article > strong { font-size: 25px; }
.clock-fraction-states article > span { color: var(--clock-cyan-dark); font-size: 11px; font-weight: 850; }
.clock-fraction-proof { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.clock-fraction-proof > span { display: flex; min-height: 88px; padding: 15px; border-radius: 24px 35px 21px 31px; align-items: center; justify-content: center; gap: 10px; background: var(--clock-midnight); color: #fff; font: 900 clamp(22px, 3vw, 38px)/1 var(--font-display); }
.clock-fraction-proof b { color: var(--clock-brass); font-size: 1.4em; }

/* Lab dial construction — sixty real positioned marks, not decorative dots. */
.clock-dial-builder { display: grid; grid-template-columns: minmax(270px, .85fr) minmax(230px, 1.15fr); padding: 20px; border-radius: 31px 46px 28px 42px; align-items: center; gap: 22px; background: var(--clock-midnight); color: #fff; }
.clock-dial-builder figure { display: grid; margin: 0; justify-items: center; gap: 12px; }
.clock-dial-builder__face {
  position: relative;
  width: min(100%, 350px);
  aspect-ratio: 1;
  overflow: hidden;
  border: 10px solid #080f1f;
  border-radius: 50%;
  background: radial-gradient(circle, var(--clock-paper) 0 9%, transparent 9.5% 52%, rgba(16,27,49,.08) 52.5% 53%, transparent 53.5%), var(--clock-paper);
  box-shadow: inset 0 0 0 3px var(--clock-brass), inset 0 0 29px rgba(16,27,49,.2), 0 11px 0 rgba(0,0,0,.2);
}
.clock-dial-builder__face > em { position: absolute; z-index: 1; top: 50%; left: 50%; color: rgba(16,27,49,.08); font: 950 clamp(63px,10vw,120px)/1 var(--font-display); font-style: normal; transform: translate(-50%,-50%); }
.clock-dial-builder__ticks, .clock-dial-builder__numbers { position: absolute; inset: 0; }
.clock-dial-builder__ticks > i { position: absolute; z-index: 3; top: 50%; left: 50%; width: 2px; height: 5.2%; border-radius: 99px; background: var(--clock-cyan-dark); opacity: .08; transform: translate(-50%,-50%) rotate(calc(var(--tick) * 6deg)) translateY(-760%); transform-origin: 50% 50%; transition: opacity .18s ease, background .18s ease; }
.clock-dial-builder__ticks > i.is-fifth { width: 4px; height: 8%; background: var(--clock-midnight); transform: translate(-50%,-50%) rotate(calc(var(--tick) * 6deg)) translateY(-500%); }
.clock-dial-builder__ticks > i.is-active { opacity: 1; }
.clock-dial-builder__numbers > b { position: absolute; z-index: 4; top: 50%; left: 50%; display: grid; width: 9.5%; aspect-ratio: 1; border-radius: 50%; color: var(--clock-midnight); font: 950 clamp(11px,2vw,20px)/1 var(--font-display); opacity: .08; place-items: center; transform: translate(-50%,-50%) rotate(calc(var(--clock-number) * 30deg)) translateY(-370%) rotate(calc(var(--clock-number) * -30deg)); transition: opacity .18s ease, background .18s ease; }
.clock-dial-builder__numbers > b.is-active { background: rgba(242,196,94,.25); opacity: 1; }
.clock-dial-builder figcaption { color: rgba(255,255,255,.68); font-size: 10px; font-weight: 820; }
.clock-dial-builder figcaption strong { color: var(--clock-brass); font-size: 17px; }
.clock-dial-builder__controls { display: grid; gap: 10px; }
.clock-dial-builder__controls label { display: grid; grid-template-columns: 1fr auto; min-height: 102px; padding: 15px; border: 1px solid rgba(255,255,255,.13); border-radius: 21px 31px 19px 28px; gap: 10px; background: rgba(255,255,255,.07); }
.clock-dial-builder__controls label > span { color: var(--clock-cyan); font-size: 9px; font-weight: 950; letter-spacing: .08em; }
.clock-dial-builder__controls output { color: var(--clock-brass); font: 950 28px/1 var(--font-display); }
.clock-dial-builder__controls input { grid-column: 1 / -1; width: 100%; min-height: 44px; margin-block: -8px; accent-color: var(--clock-coral); cursor: ew-resize; }
.clock-dial-builder__controls > p { margin: 4px 0 0; padding: 14px 16px; border-radius: 18px 26px 16px 23px; background: var(--clock-cyan); color: var(--clock-midnight); font-weight: 780; line-height: 1.4; }

/* FLASHCARDS · prediction chamber */
.clock-cards-page { background: var(--clock-midnight); color: #fff; }
.clock-cards-stage { width: min(100%, 1350px); margin: 0 auto; padding: clamp(31px,5vw,73px); }
.clock-cards-stage > header { display: grid; grid-template-columns: 1fr auto; max-width: 1160px; margin: 0 auto 31px; align-items: end; gap: 30px; }
.clock-cards-stage > header h1 { margin: 16px 0 19px; font: 950 clamp(59px,7vw,105px)/.83 var(--font-display); letter-spacing: -.07em; }
.clock-cards-stage > header h1 i { color: var(--clock-brass); }
.clock-cards-stage > header p { max-width: 760px; margin: 0; color: rgba(255,255,255,.73); font-size: 18px; font-weight: 680; line-height: 1.46; }
.clock-card-counter { display: grid; min-width: 155px; padding: 18px; border: 1px solid rgba(255,255,255,.14); border-radius: 28px 41px 25px 37px; background: rgba(255,255,255,.07); color: var(--clock-brass); font: 950 51px/.8 var(--font-display); }
.clock-card-counter small { color: rgba(255,255,255,.55); font-size: 16px; }
.clock-card-counter em { margin-top: 13px; color: var(--clock-cyan); font: 850 10px/1.2 var(--font-body); font-style: normal; letter-spacing: .06em; }
.clock-card-orbit { position: relative; display: grid; width: min(100%,1060px); min-height: 535px; margin: 0 auto; place-items: center; perspective: 1700px; }
.clock-flashcard { position: relative; z-index: 3; width: min(100%,890px); min-height: 500px; padding: 0; border: 0; border-radius: 57px 85px 51px 77px; background: transparent; color: var(--clock-ink); cursor: pointer; perspective: 1700px; filter: drop-shadow(0 17px 0 rgba(0,0,0,.24)); }
.clock-flashcard__inner { position: relative; display: block; width: 100%; min-height: 500px; transform-style: preserve-3d; transition: transform .72s var(--ease-spring); }
.clock-flashcard.is-flipped .clock-flashcard__inner { transform: rotateY(180deg); }
.clock-flashcard__face { position: absolute; inset: 0; display: flex; padding: clamp(31px,5vw,75px); border: 3px solid var(--clock-paper); border-radius: 57px 85px 51px 77px; align-items: center; justify-content: center; flex-direction: column; text-align: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.clock-flashcard__face--front { background: var(--clock-brass); }
.clock-flashcard.is-midnight .clock-flashcard__face--front { background: var(--clock-midnight-2); color: #fff; }
.clock-flashcard.is-cyan .clock-flashcard__face--front { background: var(--clock-cyan); }
.clock-flashcard.is-coral .clock-flashcard__face--front { background: var(--clock-coral); }
.clock-flashcard.is-ivory .clock-flashcard__face--front { background: var(--clock-ivory); }
.clock-flashcard__face--back { background: var(--clock-paper); color: var(--clock-ink); transform: rotateY(180deg); }
.clock-flashcard__face > small { color: var(--clock-cyan-dark); font-size: 10px; font-weight: 950; letter-spacing: .14em; }
.clock-flashcard.is-midnight .clock-flashcard__face--front > small { color: var(--clock-cyan); }
.clock-flashcard__face > strong { max-width: 780px; margin: 25px 0; font: 950 clamp(44px,5.6vw,82px)/.91 var(--font-display); letter-spacing: -.055em; text-wrap: balance; }
.clock-flashcard__face > p { max-width: 660px; margin: 0 0 23px; font-size: 17px; font-weight: 720; line-height: 1.46; }
.clock-flashcard.is-midnight .clock-flashcard__face--front > p { color: rgba(255,255,255,.7); }
.clock-flashcard__face > i { padding: 10px 14px; border-radius: 999px; background: var(--clock-midnight); color: #fff; font-size: 9px; font-style: normal; font-weight: 950; letter-spacing: .09em; }
.clock-flashcard__face--back > i { background: var(--clock-coral); color: var(--clock-midnight); }
.clock-card-orbit__dial { position: absolute; z-index: 1; right: -3%; bottom: -7%; width: 240px; aspect-ratio: 1; border: 1px solid rgba(85,217,232,.28); border-radius: 50%; animation: clock-orbit 24s linear infinite; }
.clock-card-orbit__dial::before, .clock-card-orbit__dial::after { position: absolute; inset: 17%; border: 1px solid rgba(242,196,94,.3); border-radius: 50%; content: ""; }
.clock-card-orbit__dial::after { inset: 34%; background: rgba(85,217,232,.08); }
.clock-card-orbit__dial > i { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--clock-cyan); box-shadow: 0 0 17px var(--clock-cyan); }
.clock-card-orbit__dial > i:nth-child(1) { top: -6px; left: 50%; }
.clock-card-orbit__dial > i:nth-child(2) { top: 50%; right: -6px; background: var(--clock-coral); }
.clock-card-orbit__dial > i:nth-child(3) { bottom: -6px; left: 50%; background: var(--clock-brass); }
.clock-card-orbit__dial > strong { position: absolute; top: 50%; left: 50%; color: var(--clock-brass); font: 950 47px/1 var(--font-display); transform: translate(-50%,-50%); }
.clock-card-controls { display: flex; max-width: 1080px; margin: 27px auto 0; align-items: stretch; justify-content: center; flex-wrap: wrap; gap: 8px; }
.clock-card-controls button, .clock-cards-to-summary { min-height: 55px; padding: 10px 17px; border: 1px solid rgba(255,255,255,.18); border-radius: 20px 29px 18px 26px; background: rgba(255,255,255,.09); color: #fff; font-weight: 850; cursor: pointer; }
.clock-card-controls button:nth-child(2) { background: var(--clock-brass); color: var(--clock-midnight); }
.clock-card-controls button.is-review { background: var(--clock-coral); color: var(--clock-midnight); }
.clock-card-controls button.is-known { background: var(--clock-green); color: var(--clock-midnight); }
.clock-card-controls button[aria-pressed="true"] { box-shadow: inset 0 0 0 4px var(--clock-paper); }
.clock-keyboard-hint { margin: 16px auto 0; color: rgba(255,255,255,.53); font-size: 10px; font-weight: 720; text-align: center; }
.clock-cards-to-summary { display: block; margin: 18px auto 0; border: 0; background: var(--clock-cyan); color: var(--clock-midnight); box-shadow: 0 7px 0 rgba(0,0,0,.22); }

/* SUMMARY · a single memory instrument */
.clock-summary-page { background: var(--clock-brass); }
.clock-summary-hero { display: grid; grid-template-columns: 1fr 280px; width: min(100%,1440px); min-height: 420px; margin: 0 auto 22px; padding: clamp(40px,6vw,82px); border-radius: 62px 101px 55px 91px; align-items: center; gap: 30px; background: var(--clock-midnight); color: #fff; box-shadow: 0 16px 0 rgba(16,27,49,.15); }
.clock-summary-hero h1 { margin: 15px 0 22px; font: 950 clamp(61px,7.2vw,106px)/.83 var(--font-display); letter-spacing: -.07em; }
.clock-summary-hero h1 i { color: var(--clock-brass); }
.clock-summary-hero p { max-width: 760px; margin: 0; color: rgba(255,255,255,.74); font-size: 19px; font-weight: 690; line-height: 1.47; }
.clock-summary-hero__seal { position: relative; display: grid; width: 260px; aspect-ratio: 1; border: 2px solid var(--clock-cyan); border-radius: 50%; place-items: center; align-content: center; background: var(--clock-midnight-2); box-shadow: inset 0 0 0 20px rgba(85,217,232,.04), 0 0 42px rgba(85,217,232,.15); }
.clock-summary-hero__seal::before { position: absolute; inset: 13%; border: 2px dotted var(--clock-brass); border-radius: 50%; content: ""; }
.clock-summary-hero__seal strong { z-index: 1; color: var(--clock-brass); font: 950 94px/.75 var(--font-display); }
.clock-summary-hero__seal span { z-index: 1; color: var(--clock-cyan); font-size: 20px; font-weight: 950; letter-spacing: .08em; }
.clock-summary-hero__seal small { z-index: 1; margin-top: 9px; color: rgba(255,255,255,.58); font-size: 8px; font-weight: 850; }
.clock-summary-sheet { width: min(100%,1440px); margin: 0 auto; padding: clamp(34px,5vw,70px); border-radius: 85px 55px 78px 62px; background: var(--clock-paper); box-shadow: var(--clock-shadow); }
.clock-summary-sheet > header { display: grid; margin-bottom: 28px; padding-bottom: 24px; border-bottom: 5px solid var(--clock-midnight); gap: 9px; }
.clock-summary-sheet > header > span { color: var(--clock-cyan-dark); font-size: 10px; font-weight: 950; letter-spacing: .12em; }
.clock-summary-sheet > header > strong { font: 950 clamp(33px,4.5vw,64px)/.95 var(--font-display); letter-spacing: -.045em; }
.clock-summary-model { display: grid; grid-template-columns: minmax(320px,.9fr) 1.1fr; align-items: stretch; gap: 14px; }
.clock-summary-model > article { padding: 24px; border-radius: 37px 54px 33px 49px; background: var(--clock-midnight); color: #fff; }
.clock-summary-model__clock { display: grid; place-items: center; gap: 19px; }
.clock-summary-hand-legend { display: grid; grid-template-columns: repeat(3,1fr); width: 100%; gap: 5px; }
.clock-summary-hand-legend > span { display: grid; min-height: 70px; padding: 9px; border-radius: 16px 23px 14px 21px; align-content: center; background: rgba(255,255,255,.08); color: rgba(255,255,255,.65); font-size: 9px; font-weight: 750; }
.clock-summary-hand-legend b { display: block; margin-bottom: 4px; color: var(--clock-brass); }
.clock-summary-hand-legend .is-minute b { color: var(--clock-coral); }
.clock-summary-hand-legend .is-second b { color: var(--clock-cyan); }
.clock-summary-model__sequence > span, .clock-summary-worked > header span, .clock-summary-grid article > span { color: var(--clock-cyan); font-size: 9px; font-weight: 950; letter-spacing: .11em; }
.clock-summary-model__sequence ol { display: grid; margin: 22px 0 0; padding: 0; gap: 8px; list-style: none; }
.clock-summary-model__sequence li { display: grid; grid-template-columns: 46px 1fr; min-height: 75px; padding: 10px; border-radius: 20px 29px 18px 26px; align-items: center; gap: 10px; background: rgba(255,255,255,.08); }
.clock-summary-model__sequence li > i { display: grid; width: 44px; height: 44px; border-radius: 50%; background: var(--clock-cyan); color: var(--clock-midnight); font-size: 11px; font-style: normal; font-weight: 950; place-items: center; }
.clock-summary-model__sequence li > div { display: grid; gap: 3px; }
.clock-summary-model__sequence li strong { font-size: 17px; }
.clock-summary-model__sequence li p { margin: 0; color: rgba(255,255,255,.67); font-size: 11px; font-weight: 720; line-height: 1.35; }
.clock-summary-worked { display: grid; grid-template-columns: minmax(210px,.62fr) 1fr auto; margin-top: 14px; padding: 27px; border: 3px solid var(--clock-midnight); border-radius: 37px 55px 33px 50px; align-items: center; gap: 20px; background: var(--clock-brass); }
.clock-summary-worked > header span { color: var(--clock-cyan-dark); }
.clock-summary-worked > header h2 { margin: 9px 0 0; font: 920 clamp(25px,3vw,42px)/1 var(--font-display); }
.clock-summary-worked > ol { display: grid; margin: 0; padding: 0; gap: 7px; list-style: none; }
.clock-summary-worked > ol li { display: grid; grid-template-columns: 34px 1fr; min-height: 48px; align-items: center; gap: 8px; font-weight: 750; line-height: 1.35; }
.clock-summary-worked > ol i { display: grid; width: 32px; height: 32px; border-radius: 50%; background: var(--clock-midnight); color: var(--clock-cyan); font-size: 9px; font-style: normal; place-items: center; }
.clock-summary-worked > strong { padding: 16px; border-radius: 20px 29px 18px 26px; background: var(--clock-coral); font-size: 27px; text-align: center; }
.clock-summary-worked .clock-dayline { grid-column: 1 / -1; }
.clock-summary-grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 14px; gap: 12px; }
.clock-summary-grid > article { padding: 25px; border-radius: 33px 49px 30px 44px; background: #dff7f5; }
.clock-summary-grid > article:nth-child(2) { background: var(--clock-ivory); }
.clock-summary-grid > article:nth-child(3) { grid-column: 1 / -1; background: #ffe2dc; }
.clock-summary-grid article > span { color: var(--clock-cyan-dark); }
.clock-summary-vocabulary dl { display: grid; margin: 18px 0 0; }
.clock-summary-vocabulary dl > div { display: grid; grid-template-columns: minmax(110px,.4fr) 1fr; padding: 11px 0; border-top: 2px solid rgba(16,27,49,.11); gap: 13px; }
.clock-summary-vocabulary dt { font-weight: 950; }
.clock-summary-vocabulary dd { margin: 0; font-weight: 690; line-height: 1.38; }
.clock-summary-rules ul { display: grid; margin: 18px 0 0; padding-left: 20px; gap: 10px; }
.clock-summary-rules li { font-weight: 730; line-height: 1.42; }
.clock-summary-traps p { margin: 15px 0 0; font-size: 18px; font-weight: 750; line-height: 1.45; }
.clock-summary-sheet > footer { display: flex; padding-top: 26px; justify-content: center; flex-wrap: wrap; gap: 8px; }
.clock-summary-sheet > footer button { min-height: 52px; padding: 9px 15px; border: 0; border-radius: 19px 28px 17px 25px; background: var(--clock-midnight); color: #fff; font-weight: 850; cursor: pointer; }
.clock-summary-sheet > footer button:nth-child(2) { background: var(--clock-cyan); color: var(--clock-midnight); }
.clock-summary-sheet > footer button:last-child { background: var(--clock-coral); color: var(--clock-midnight); }

/* GUIDE · publishable adult document, coloured chapter bands and white body. */
.clock-guide-page { overflow: visible; background: var(--clock-ivory); }
.clock-guide-cover { display: grid; grid-template-columns: minmax(0,1fr) 250px; width: min(100%,1440px); min-height: 510px; margin: 0 auto 24px; padding: clamp(43px,6vw,84px); border-radius: 64px 103px 57px 93px; align-items: center; gap: 40px; background: var(--clock-midnight); color: #fff; box-shadow: var(--clock-shadow); }
.clock-guide-cover h1 { margin: 17px 0 22px; font: 950 clamp(59px,7.1vw,104px)/.83 var(--font-display); letter-spacing: -.07em; }
.clock-guide-cover h1 i { color: var(--clock-brass); }
.clock-guide-cover > div > p { max-width: 770px; margin: 0; color: rgba(255,255,255,.74); font-size: 19px; font-weight: 690; line-height: 1.47; }
.clock-guide-cover dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 28px 0 0; gap: 8px; }
.clock-guide-cover dl > div { display: grid; min-height: 80px; padding: 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 18px 26px 16px 23px; align-content: center; background: rgba(255,255,255,.07); }
.clock-guide-cover dt { color: var(--clock-cyan); font-size: 8px; font-weight: 950; letter-spacing: .09em; }
.clock-guide-cover dd { margin: 5px 0 0; font-weight: 850; }
.clock-guide-pdf, .clock-guide-pdf[disabled] { display: grid; grid-template-columns: 56px 1fr; min-height: 130px; padding: 17px; border: 2px solid var(--clock-brass); border-radius: 29px 42px 26px 38px; align-items: center; gap: 6px 12px; background: rgba(242,196,94,.08); color: #fff; cursor: default; opacity: 1; text-align: left; }
.clock-guide-pdf > i { grid-row: 1 / 3; display: grid; width: 55px; height: 55px; border-radius: 50%; background: var(--clock-brass); color: var(--clock-midnight); font-size: 11px; font-style: normal; font-weight: 950; place-items: center; }
.clock-guide-pdf > strong { align-self: end; color: var(--clock-brass); font-size: 16px; }
.clock-guide-pdf > small { align-self: start; color: rgba(255,255,255,.6); font-size: 9px; font-weight: 730; line-height: 1.3; }
.clock-guide-layout { display: grid; grid-template-columns: 235px minmax(0,1fr); width: min(100%,1380px); margin: 0 auto; align-items: start; gap: 17px; }
.clock-guide-toc { position: sticky; top: 18px; display: grid; max-height: calc(100vh - 36px); padding: 20px 13px; overflow-y: auto; border-radius: 29px 42px 26px 38px; gap: 6px; background: var(--clock-midnight); color: #fff; }
.clock-guide-toc > span { margin: 3px 8px 10px; color: var(--clock-cyan); font-size: 9px; font-weight: 950; letter-spacing: .12em; }
.clock-guide-toc a { display: grid; grid-template-columns: 35px 1fr; min-height: 48px; padding: 7px 9px 7px 7px; border-radius: 16px 23px 14px 21px; align-items: center; gap: 8px; color: rgba(255,255,255,.72); font-size: 11px; font-weight: 800; text-decoration: none; }
.clock-guide-toc a:hover { background: rgba(255,255,255,.1); color: #fff; }
.clock-guide-toc a > i { display: grid; width: 34px; height: 34px; border: 1px solid currentColor; border-radius: 50%; font-size: 9px; font-style: normal; place-items: center; }
.clock-guide-book { display: grid; overflow: hidden; border-radius: 49px 72px 44px 65px; gap: 0; background: #fff; box-shadow: var(--clock-shadow); }
.clock-guide-section { --clock-guide-band: var(--clock-brass); display: grid; padding: clamp(35px,5vw,66px); border-bottom: 3px solid rgba(16,27,49,.1); gap: 25px; background: #fff; scroll-margin-top: 20px; }
.clock-guide-section:nth-child(2) { --clock-guide-band: var(--clock-cyan); }
.clock-guide-section:nth-child(3) { --clock-guide-band: var(--clock-coral); }
.clock-guide-section:nth-child(4) { --clock-guide-band: #a8e4c0; }
.clock-guide-section:nth-child(5) { --clock-guide-band: #d2c0f0; }
.clock-guide-section:nth-child(6) { --clock-guide-band: var(--clock-brass); }
.clock-guide-section:nth-child(7) { --clock-guide-band: #dff7f5; }
.clock-guide-section > header { margin: calc(-1 * clamp(35px,5vw,66px)) calc(-1 * clamp(35px,5vw,66px)) 7px; padding: clamp(29px,4vw,51px) clamp(35px,5vw,66px); border-radius: 49px 72px 42px 31px; background: var(--clock-guide-band); color: var(--clock-midnight); }
.clock-guide-section > header > span { color: var(--clock-cyan-dark); font-size: 10px; font-weight: 950; letter-spacing: .12em; }
.clock-guide-section > header > h2 { margin: 11px 0 0; font: 950 clamp(39px,5vw,70px)/.91 var(--font-display); letter-spacing: -.055em; }
.clock-guide-section > h3 { margin: 12px 0 0; font: 920 clamp(25px,3vw,39px)/1.05 var(--font-display); }
.clock-guide-section > p, .clock-guide-lead { max-width: 920px; margin: 0; font-size: 17px; font-weight: 690; line-height: 1.52; }
.clock-guide-boundary { padding: 22px 25px; border-left: 8px solid var(--clock-coral); border-radius: 5px 31px 27px 5px; background: #ffe5df; }
.clock-guide-boundary > strong, .clock-guide-columns article > span, .clock-guide-time__script > span, .clock-guide-time__points > span, .clock-guide-memory article > span { color: var(--clock-cyan-dark); font-size: 9px; font-weight: 950; letter-spacing: .1em; }
.clock-guide-boundary p { margin: 8px 0 0; font-weight: 730; line-height: 1.46; }
.clock-guide-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.clock-guide-columns > article { padding: 23px; border-radius: 29px 43px 26px 39px; background: var(--clock-ivory); }
.clock-guide-columns > article:nth-child(2) { background: #dff7f5; }
.clock-guide-columns ul { display: grid; margin: 16px 0 0; padding-left: 19px; gap: 8px; }
.clock-guide-columns li { font-weight: 710; line-height: 1.42; }
.clock-guide-keyphrases { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.clock-guide-keyphrases blockquote { margin: 0; padding: 19px 21px; border: 2px solid var(--clock-midnight); border-radius: 23px 34px 20px 31px; background: #fff; font: 850 16px/1.42 var(--font-body); }
.clock-guide-time { display: grid; margin: 8px 0; padding: 25px; border: 2px solid var(--clock-midnight); border-radius: 35px 51px 31px 46px; gap: 21px; background: var(--clock-paper); }
.clock-guide-time > header { display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 12px; }
.clock-guide-time > header > i { display: grid; width: 52px; height: 52px; border-radius: 50%; background: var(--clock-midnight); color: var(--clock-cyan); font-size: 11px; font-style: normal; font-weight: 950; place-items: center; }
.clock-guide-time > header > div { display: grid; gap: 5px; }
.clock-guide-time > header span { color: var(--clock-cyan-dark); font-size: 9px; font-weight: 950; letter-spacing: .1em; }
.clock-guide-time > header h3 { margin: 0; font: 920 clamp(25px,3vw,39px)/1 var(--font-display); }
.clock-guide-time__script, .clock-guide-time__points, .clock-guide-time > aside { padding: 20px 23px; border-radius: 25px 37px 22px 33px; background: #dff7f5; }
.clock-guide-time__script p, .clock-guide-time > aside p { margin: 8px 0 0; font-weight: 720; line-height: 1.48; }
.clock-guide-time__points { background: var(--clock-ivory); }
.clock-guide-time__points ul { display: grid; margin: 14px 0 0; padding-left: 19px; gap: 7px; }
.clock-guide-time__phrases { display: flex; padding: 17px 20px; border-radius: 23px 34px 20px 31px; align-items: center; flex-wrap: wrap; gap: 7px; background: #fff; }
.clock-guide-time__phrases > span { width: 100%; color: var(--clock-cyan-dark); font-size: 9px; font-weight: 950; letter-spacing: .1em; }
.clock-guide-time__phrases mark { padding: 8px 11px; border-radius: 999px; background: var(--clock-brass); color: var(--clock-midnight); font-size: 11px; font-weight: 850; }
.clock-guide-time > aside { background: #ffe4df; }
.clock-guide-time .clock-proof { box-shadow: none; }
.clock-guide-alternates { display: grid; margin: 0; padding: 0; gap: 8px; list-style: none; }
.clock-guide-alternates li { display: grid; grid-template-columns: 42px 1fr; min-height: 69px; padding: 11px; border-radius: 21px 31px 19px 28px; align-items: center; gap: 10px; background: var(--clock-ivory); }
.clock-guide-alternates li i { display: grid; width: 40px; height: 40px; border-radius: 50%; background: var(--clock-cyan); font-style: normal; font-weight: 950; place-items: center; }
.clock-guide-alternates p { margin: 0; font-weight: 720; line-height: 1.42; }
.clock-guide-repairs { display: grid; gap: 9px; }
.clock-guide-repairs article { display: grid; grid-template-columns: 50px 1fr; padding: 18px; border-left: 8px solid var(--clock-coral); border-radius: 5px 27px 24px 5px; align-items: start; gap: 12px; background: #ffe5df; }
.clock-guide-repairs article > i { display: grid; width: 47px; height: 47px; border-radius: 50%; background: var(--clock-midnight); color: var(--clock-brass); font-size: 10px; font-style: normal; font-weight: 950; place-items: center; }
.clock-guide-repairs article p { margin: 7px 0 0; font-weight: 710; line-height: 1.45; }
.clock-guide-coaching, .clock-guide-review { padding: 22px 25px; border-radius: 26px 39px 23px 35px; background: var(--clock-midnight); color: #fff; }
.clock-guide-coaching strong, .clock-guide-review strong { color: var(--clock-cyan); font-size: 10px; letter-spacing: .1em; }
.clock-guide-coaching p, .clock-guide-review p { margin: 8px 0 0; font-weight: 710; line-height: 1.48; }
.clock-guide-review { background: var(--clock-brass); color: var(--clock-midnight); }
.clock-guide-review strong { color: var(--clock-cyan-dark); }
.clock-guide-question { display: grid; grid-template-columns: 54px 1fr; padding: 24px 0; border-top: 3px solid rgba(16,27,49,.11); gap: 15px; }
.clock-guide-question > i { display: grid; width: 52px; height: 52px; border-radius: 50%; background: var(--clock-midnight); color: var(--clock-cyan); font-size: 10px; font-style: normal; font-weight: 950; place-items: center; }
.clock-guide-question h3 { margin: 6px 0 16px; font: 900 clamp(22px,2.5vw,34px)/1.07 var(--font-display); }
.clock-guide-question ol { display: grid; margin: 0; padding: 0; gap: 7px; list-style: none; }
.clock-guide-question li { display: grid; grid-template-columns: 34px 1fr; padding: 13px; border-radius: 18px 26px 16px 23px; gap: 9px; background: var(--clock-ivory); }
.clock-guide-question li.is-correct { background: #dff5e6; }
.clock-guide-question li > span { display: grid; width: 32px; height: 32px; border-radius: 50%; background: var(--clock-coral); place-items: center; }
.clock-guide-question li.is-correct > span { background: var(--clock-green); }
.clock-guide-question li p { margin: 4px 0 0; font-size: 12px; line-height: 1.4; }
.clock-guide-question aside { margin-top: 10px; padding: 16px 19px; border-radius: 20px 29px 18px 26px; background: #dff7f5; }
.clock-guide-question aside > strong { color: var(--clock-cyan-dark); font-size: 9px; letter-spacing: .09em; }
.clock-guide-question aside p { margin: 6px 0 0; font-weight: 710; line-height: 1.4; }
.clock-guide-truefalse { display: grid; gap: 9px; }
.clock-guide-truefalse article { display: grid; grid-template-columns: 45px 70px 1fr; padding: 20px; border-radius: 28px 41px 25px 37px; align-items: start; gap: 12px; background: var(--clock-ivory); }
.clock-guide-truefalse article > i { display: grid; width: 43px; height: 43px; border-radius: 50%; background: var(--clock-midnight); color: var(--clock-cyan); font-size: 9px; font-style: normal; place-items: center; }
.clock-guide-truefalse article > span { padding: 9px 8px; border-radius: 999px; background: var(--clock-green); font-size: 9px; font-weight: 950; text-align: center; }
.clock-guide-truefalse article > span.is-false { background: var(--clock-coral); }
.clock-guide-truefalse h3 { margin: 7px 0 10px; font-size: 20px; }
.clock-guide-truefalse article > p, .clock-guide-truefalse article > aside { grid-column: 3; margin: 0; font-size: 13px; line-height: 1.44; }
.clock-guide-truefalse article > aside { padding: 13px; border-radius: 18px 26px 16px 23px; background: #dff7f5; }
.clock-guide-truefalse article > aside p { margin: 5px 0 0; }
.clock-guide-memory { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.clock-guide-memory article { padding: 23px; border-radius: 28px 42px 25px 38px; background: var(--clock-ivory); }
.clock-guide-memory article:nth-child(2) { background: #ffe4df; }
.clock-guide-memory article:nth-child(3) { grid-column: 1 / -1; background: var(--clock-brass); }
.clock-guide-memory ul, .clock-guide-memory ol { display: grid; margin: 15px 0 0; padding-left: 19px; gap: 7px; }
.clock-guide-memory p, .clock-guide-memory li { font-weight: 710; line-height: 1.44; }
.clock-guide-memory article > strong { display: inline-block; margin-top: 14px; padding: 10px 14px; border-radius: 16px 23px 14px 21px; background: var(--clock-midnight); color: #fff; }
.clock-guide-words { display: grid; margin: 0; }
.clock-guide-words > div { display: grid; grid-template-columns: minmax(130px,.36fr) 1fr; padding: 13px 0; border-top: 2px solid rgba(16,27,49,.11); gap: 15px; }
.clock-guide-words dt { font-weight: 950; }
.clock-guide-words dd { margin: 0; font-weight: 690; line-height: 1.42; }
.clock-guide-card-inventory { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.clock-guide-card-inventory article { display: grid; grid-template-columns: 40px 1fr; padding: 16px; border-radius: 22px 33px 20px 30px; align-content: start; gap: 6px 10px; background: var(--clock-ivory); }
.clock-guide-card-inventory article > i { grid-row: 1 / 4; display: grid; width: 38px; height: 38px; border-radius: 50%; background: var(--clock-cyan); font-size: 9px; font-style: normal; font-weight: 950; place-items: center; }
.clock-guide-card-inventory h3, .clock-guide-card-inventory p { margin: 0; }
.clock-guide-card-inventory h3 { font-size: 16px; }
.clock-guide-card-inventory p { font-size: 12px; font-weight: 690; line-height: 1.4; }
.clock-guide-card-inventory small { color: var(--clock-cyan-dark); font-weight: 760; }
.clock-guide-assessment { display: grid; }
.clock-guide-assessment > header { display: flex; padding: 21px 23px; border-radius: 25px 37px 22px 33px; align-items: center; justify-content: space-between; background: var(--clock-midnight); color: #fff; }
.clock-guide-assessment > header span { color: var(--clock-cyan); font-size: 10px; font-weight: 950; letter-spacing: .1em; }
.clock-guide-assessment > header strong { color: var(--clock-brass); font-size: 24px; }
.clock-guide-assessment > article { display: grid; grid-template-columns: 50px 1fr auto; padding: 22px 0; border-bottom: 3px solid rgba(16,27,49,.11); gap: 14px; }
.clock-guide-assessment > article > i { display: grid; width: 47px; height: 47px; border-radius: 50%; background: var(--clock-coral); font-size: 10px; font-style: normal; font-weight: 950; place-items: center; }
.clock-guide-assessment h3 { margin: 5px 0 13px; font: 900 clamp(20px,2.3vw,31px)/1.08 var(--font-display); }
.clock-guide-assessment article aside { padding: 15px 18px; border-radius: 20px 30px 18px 27px; background: #dff7f5; }
.clock-guide-assessment article aside > strong { color: var(--clock-cyan-dark); font-size: 9px; letter-spacing: .09em; }
.clock-guide-assessment article aside p { margin: 6px 0 0; font-weight: 710; line-height: 1.42; }
.clock-guide-assessment article small { display: block; margin-top: 10px; }
.clock-guide-assessment > article > strong { color: var(--clock-coral); font-size: 29px; }
.clock-guide-footer { display: flex; width: min(100%,1380px); margin: 17px auto 0; padding: 18px 23px; border-radius: 21px 31px 19px 28px; justify-content: space-between; gap: 20px; background: var(--clock-midnight); color: rgba(255,255,255,.68); font-size: 9px; font-weight: 850; letter-spacing: .08em; }

@media (max-width:1100px) {
  .clock-guide-cover, .clock-guide-layout { grid-template-columns: 1fr; }
  .clock-guide-pdf { width: min(100%,420px); }
  .clock-guide-toc { position: relative; top: auto; display: flex; max-height: none; padding: 10px; overflow-x: auto; }
  .clock-guide-toc > span { display: none; }
  .clock-guide-toc a { min-width: 145px; }
  .clock-summary-model { grid-template-columns: 1fr; }
}

@media (max-width:760px) {
  .science-world__actions { align-items: stretch; flex-direction: column; }
  .science-world__actions .button { width: 100%; }
  .clock-passed-scene, .clock-dial-builder { grid-template-columns: 1fr; }
  .clock-fraction-states { grid-template-columns: 1fr; }
  .clock-fraction-proof { grid-template-columns: 1fr; }
  .clock-cards-stage { padding: 28px 8px 45px; }
  .clock-cards-stage > header { grid-template-columns: 1fr; }
  .clock-cards-stage > header h1 { font-size: clamp(54px,16vw,76px); }
  .clock-card-counter { width: 100%; min-width: 0; }
  .clock-card-orbit { min-height: 465px; }
  .clock-flashcard, .clock-flashcard__inner { min-height: 430px; }
  .clock-flashcard__face { padding: 29px 17px; border-radius: 39px 56px 35px 51px; }
  .clock-flashcard__face > strong { font-size: clamp(39px,12vw,60px); }
  .clock-card-orbit__dial { width: 160px; }
  .clock-card-controls button { flex: 1 1 42%; }
  .clock-summary-hero { grid-template-columns: 1fr; width: 100%; padding: 40px 20px 49px; border-radius: 42px 59px 38px 54px; }
  .clock-summary-hero h1 { font-size: clamp(54px,16vw,78px); }
  .clock-summary-hero__seal { width: 220px; }
  .clock-summary-sheet { width: 100%; padding: 36px 15px 45px; border-radius: 47px 35px 43px 39px; }
  .clock-summary-model > article { padding: 17px; }
  .clock-summary-worked { grid-template-columns: 1fr; padding: 20px 15px; }
  .clock-summary-worked .clock-dayline { grid-column: 1; }
  .clock-summary-grid { grid-template-columns: 1fr; }
  .clock-summary-grid > article:nth-child(3) { grid-column: 1; }
  .clock-summary-hand-legend { grid-template-columns: 1fr; }
  .clock-guide-cover { grid-template-columns: 1fr; width: 100%; min-height: 0; padding: 40px 20px 50px; border-radius: 43px 61px 39px 55px; }
  .clock-guide-cover h1 { font-size: clamp(53px,15vw,75px); }
  .clock-guide-cover dl { grid-template-columns: 1fr; }
  .clock-guide-layout { width: 100%; }
  .clock-guide-book { border-radius: 38px 53px 34px 48px; }
  .clock-guide-section { padding: 37px 16px 46px; }
  .clock-guide-section > header { margin: -37px -16px 5px; padding: 31px 16px; border-radius: 38px 53px 34px 27px; }
  .clock-guide-section > header > h2 { font-size: clamp(37px,12vw,57px); }
  .clock-guide-columns, .clock-guide-keyphrases, .clock-guide-memory, .clock-guide-card-inventory { grid-template-columns: 1fr; }
  .clock-guide-memory article:nth-child(3) { grid-column: 1; }
  .clock-guide-time { padding: 20px 12px; }
  .clock-guide-question { grid-template-columns: 44px 1fr; }
  .clock-guide-question > i { width: 42px; height: 42px; }
  .clock-guide-truefalse article { grid-template-columns: 42px 1fr; }
  .clock-guide-truefalse article > h3, .clock-guide-truefalse article > p, .clock-guide-truefalse article > aside { grid-column: 1 / -1; }
  .clock-guide-assessment > article { grid-template-columns: 47px 1fr; }
  .clock-guide-assessment > article > strong { grid-column: 2; }
  .clock-guide-footer { align-items: flex-start; flex-direction: column; }
}

@media print {
  @page { size: A4 portrait; margin: 13mm 11mm 15mm; }
  body:has(.clock-guide-page) { background: #fff !important; }
  body:has(.clock-guide-page) .immersive-nav,
  body:has(.clock-guide-page) .clock-module-bar,
  body:has(.clock-guide-page) .clock-guide-toc,
  body:has(.clock-guide-page) .clock-guide-pdf,
  body:has(.clock-guide-page) .clock-live { display: none !important; }
  .clock-guide-page { min-height: 0; padding: 0 !important; overflow: visible; background: #fff !important; color: #111 !important; }
  .clock-guide-cover { grid-template-columns: 1fr; width: 100%; min-height: 260mm; margin: 0; padding: 18mm 14mm; border-radius: 18mm 25mm 16mm 22mm; background: var(--clock-midnight) !important; color: #fff !important; box-shadow: none; break-after: page; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .clock-guide-cover h1 { font-size: 47pt; }
  .clock-guide-cover dl { margin-top: 12mm; }
  .clock-guide-layout { display: block; width: 100%; margin: 0; }
  .clock-guide-book { display: block; overflow: visible; border-radius: 0; box-shadow: none; }
  .clock-guide-section { display: block; margin: 0 0 8mm; padding: 11mm 9mm; border: .6pt solid rgba(16,27,49,.18); border-radius: 10mm 15mm 9mm 13mm; background: #fff !important; box-shadow: none; break-before: page; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .clock-guide-section > header { margin: -11mm -9mm 8mm; padding: 8mm 9mm; border-radius: 10mm 15mm 9mm 7mm; break-after: avoid; background: var(--clock-guide-band) !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .clock-guide-section > header > h2 { font-size: 30pt; }
  .clock-guide-section p, .clock-guide-section li, .clock-guide-section dd { font-size: 9.7pt !important; line-height: 1.42 !important; }
  .clock-guide-section article, .clock-guide-section aside, .clock-guide-section figure, .clock-guide-section blockquote, .clock-guide-section li { break-inside: avoid; }
  .clock-guide-time { margin: 5mm 0; padding: 6mm; box-shadow: none; }
  .clock-guide-time .clock-proof { padding: 6mm; }
  .clock-guide-time .clock-face { width: 65mm; }
  .clock-guide-footer { display: flex; width: 100%; margin: 4mm 0 0; padding: 4mm; border-radius: 0; background: #fff; color: #111; border-top: .6pt solid #111; }
}

@media (prefers-reduced-motion:reduce) {
  .clock-dial-builder__ticks > i, .clock-dial-builder__numbers > b, .clock-flashcard__inner { transition: none !important; }
  .clock-card-orbit__dial { animation: none !important; }
}

/* SCIENCE LESSON · the shared Division reader template, reskinned only. */
.science-division-lesson.clock-course {
  --science-signature: #0f9f51;
  --science-energy: #b0ee0b;
  --science-soft: #ddf7d2;
  --violet: var(--science-signature);
  --emerald: var(--science-signature);
  --coral: var(--science-signature);
  --acid: var(--science-energy);
  --sun: var(--science-energy);
  --pink: var(--science-soft);
  --clock-midnight: var(--ink);
  --clock-midnight-2: var(--ink);
  --clock-ink: var(--ink);
  --clock-paper: #fffefa;
  --clock-ivory: var(--science-soft);
  --clock-brass: var(--science-energy);
  --clock-brass-dark: var(--science-signature);
  --clock-coral: var(--science-signature);
  --clock-cyan: var(--science-energy);
  --clock-cyan-dark: var(--science-signature);
  --clock-green: var(--science-signature);
  min-height: 100svh;
  padding: 0 0 90px;
  overflow: visible;
  background: var(--oat);
  color: var(--ink);
}

.science-division-lesson .division-module-bar::after { background: var(--science-signature); }
.science-division-lesson .division-module-bar span,
.science-division-lesson .division-reader-goals > strong,
.science-division-lesson .division-reader-chapter,
.science-division-lesson .division-reader-rail > nav > span,
.science-division-lesson .division-reader-rail > section > span { color: var(--science-signature); }
.science-division-lesson .division-module-nav button { background: var(--science-soft); }
.science-division-lesson .division-module-nav button.is-current,
.science-division-lesson .division-module-bar time,
.science-division-lesson .division-reader-cover,
.science-division-lesson .division-reader-finale,
.science-division-lesson .division-reader-rail__table { background: var(--science-energy); }
.science-division-lesson .division-module-nav i,
.science-division-lesson .division-reader-goals > span > b,
.science-division-lesson .division-reader-finale button,
.science-division-lesson .division-reader-rail__rhythm { background: var(--science-signature); color: var(--ink); }
.science-division-lesson .division-reader-cover::after,
.science-division-lesson .division-reader-voice,
.science-division-lesson .division-reader-rail > nav,
.science-division-lesson .science-reader-rail__teacher { background: var(--science-soft); }
.science-division-lesson .division-reader-cover h1 i,
.science-division-lesson .division-reader-section h2 em,
.science-division-lesson .division-reader-finale h2 i,
.science-division-lesson .division-reader-voice span,
.science-division-lesson .division-reader-rail nav a:hover { color: var(--science-signature); }
.science-division-lesson .division-reader-rail__rhythm > span { color: var(--science-energy) !important; }
.science-division-lesson .division-reader-rail__rhythm li { color: #fff; }
.science-division-lesson .division-reader-rail__rhythm i { background: var(--science-energy); color: var(--ink); }
.science-division-lesson .division-reader-finale button { color: #fff; }

.science-reader-cover__visual { isolation: isolate; }
.science-reader-hero-clock {
  position: absolute;
  z-index: 4;
  top: 4%;
  left: -3%;
  width: min(66%, 370px);
  transform: rotate(-5deg);
  filter: drop-shadow(0 12px 0 rgba(38, 38, 43, .1));
}
.science-reader-hero-clock .clock-face { width: 100%; }
.science-division-lesson .science-reader-teacher { right: -8%; bottom: -12%; width: 78%; height: 104%; }
.science-division-lesson .division-reader-cover__blob { bottom: -2%; left: -2%; }

.science-reader-vocabulary .clock-word-chamber__grid { margin: 36px 0 18px; }
.science-reader-vocabulary .clock-word-chamber__grid article:nth-child(3n+2),
.science-reader-vocabulary .clock-word-chamber__grid article:nth-child(3n) { background: var(--science-soft); }
.science-reader-vocabulary .clock-word-chamber__grid article > i { background: var(--science-signature); color: var(--science-energy); }
.science-reader-vocabulary .clock-word-chamber__grid article small { color: var(--ink); }
.science-reader-vocabulary .clock-word-chamber__locator {
  grid-template-columns: minmax(220px, 310px) 1fr;
  margin-top: 18px;
  align-items: center;
  background: var(--ink);
}
.science-reader-vocabulary .clock-word-chamber__locator .clock-face { justify-self: center; }

.science-reader-visual { margin: 38px 0; }
.science-reader-visual .clock-proof { background: color-mix(in srgb, var(--science-soft) 45%, white); }
.science-reader-visual .clock-proof--sixty,
.science-reader-visual .clock-proof--day,
.science-reader-visual .clock-proof--fractions { border-top-color: var(--science-energy); }
.science-reader-visual .clock-proof--hands,
.science-reader-visual .clock-proof--worked,
.science-reader-visual .clock-proof--passed { border-top-color: var(--science-signature); }
.science-reader-visual .clock-two-times > p,
.science-reader-visual .clock-duration-ribbon > div { background: var(--science-soft); }

.science-reader-checkpoint {
  display: grid;
  grid-template-columns: 150px 1fr;
  margin: 30px 0;
  padding: 25px 29px;
  border: 3px solid var(--science-signature);
  border-radius: 30px 47px 27px 43px;
  align-items: center;
  gap: 18px;
  background: #fff;
  box-shadow: 0 9px 0 rgba(38, 38, 43, .09);
}
.science-reader-checkpoint > span {
  color: var(--science-signature);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .13em;
  line-height: 1.35;
}
.science-division-lesson .science-reader-checkpoint > p { margin: 0; font-size: 18px; font-weight: 780; line-height: 1.45; }

.science-reader-remember {
  margin: 30px 0;
  padding: 25px 29px;
  border-radius: 31px 47px 28px 43px;
  background: var(--science-energy);
  box-shadow: 0 9px 0 rgba(38, 38, 43, .09);
}
.science-reader-remember > span {
  display: block;
  margin-bottom: 12px;
  color: var(--science-signature);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .13em;
}
.science-reader-remember ul { display: grid; margin: 0; padding-left: 20px; gap: 9px; }
.science-reader-remember li { font-size: 17px; font-weight: 760; line-height: 1.45; }
.science-reader-finale h2 i { white-space: normal; }
.science-reader-finale .division-reader-finale__visual > strong { color: var(--science-signature); }
.science-reader-finale .division-reader-finale__visual > span { max-width: 230px; text-align: center; }
.science-reader-rail__teacher img { right: -13%; bottom: -12%; width: 80%; height: 79%; }

@media (max-width: 1100px) {
  .science-reader-hero-clock { left: 4%; width: min(52%, 370px); }
  .science-division-lesson .science-reader-teacher { right: -2%; width: 62%; }
}

@media (max-width: 720px) {
  .science-division-lesson.clock-course { padding-inline: 0; }
  .science-reader-hero-clock { top: 7%; left: 0; width: min(62%, 300px); }
  .science-division-lesson .science-reader-teacher { right: -16%; width: 84%; }
  .science-reader-vocabulary .clock-word-chamber__locator { grid-template-columns: 1fr; }
  .science-reader-vocabulary .clock-word-chamber__grid article { min-height: 0; }
  .science-reader-visual { margin-inline: -5px; }
  .science-reader-checkpoint { grid-template-columns: 1fr; padding: 22px 20px; }
  .science-reader-finale h2 { font-size: clamp(38px, 11.8vw, 58px); line-height: .92; }
}