:root {
  color-scheme: light;
  --ink: #29264f;
  --muted: #77758f;
  --paper: #fffdfa;
  --cream: #fff8e9;
  --purple: #473a91;
  --teal: #198d82;
  --coral: #ef6359;
  --gold: #ffc84a;
  --line: #e8e5f1;
  --shadow: 0 12px 40px rgba(62, 48, 120, .075), 0 2px 7px rgba(62, 48, 120, .045);
}
* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; overflow-x: hidden; color: var(--ink); background: var(--cream);
  background-image: radial-gradient(rgba(119, 99, 178, .1) 1px, transparent 1.5px); background-size: 24px 24px;
  font-family: "Trebuchet MS", "Avenir Next", system-ui, sans-serif; font-size: 15px;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: #382d78; }
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid #222052; outline-offset: 3px; }
[hidden] { display: none !important; }
.ambient { position: fixed; z-index: -1; border-radius: 50%; pointer-events: none; }
.ambient--one { width: 300px; height: 300px; top: 15%; right: -170px; background: rgba(250, 198, 91, .18); }
.ambient--two { width: 210px; height: 210px; left: -120px; bottom: 7%; background: rgba(106, 207, 182, .16); }
.app-shell { width: min(1460px, 100%); margin: 0 auto; padding: 0 36px 38px; }
.topbar { height: 82px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(81, 69, 127, .12); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand-mark { width: 45px; height: 45px; display: block; }.brand-mark svg { width: 100%; height: 100%; display: block; }
.brand-copy { display: grid; gap: 1px; }.brand-copy strong { font-size: 18px; letter-spacing: -.5px; font-weight: 900; }
.brand-copy small { color: var(--muted); font-size: 10px; letter-spacing: 1.05px; text-transform: uppercase; font-weight: 700; }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.top-stat { display: inline-flex; align-items: center; gap: 5px; min-height: 38px; padding: 0 13px; border: 1px solid #f0dc9d; border-radius: 99px; background: #fff8d7; font-size: 15px; font-weight: 900; }
.top-stat__icon { color: #d98e05; font-size: 16px; }.top-stat__label { color: #8a733f; font-size: 10px; letter-spacing: 1px; }
.icon-button { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: #fff; transition: transform .18s, box-shadow .18s; }
.icon-button:hover { transform: rotate(-14deg); box-shadow: 0 4px 12px rgba(60, 49, 114, .12); }
.icon-button svg { width: 19px; height: 19px; fill: none; stroke: var(--purple); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.welcome-row { min-height: 182px; display: flex; align-items: center; position: relative; overflow: hidden; padding: 18px 32px 15px; margin: 18px 0 15px; border-radius: 26px; background: #eeeaff; }
.welcome-copy { position: relative; z-index: 1; }.eyebrow, .section-kicker { color: #7169a4; font-size: 10px; letter-spacing: 1.6px; font-weight: 900; }
.eyebrow { display: flex; align-items: center; gap: 7px; }.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px rgba(239, 99, 89, .13); }
.welcome-copy h1 { margin: 8px 0 7px; font-size: clamp(30px, 4.2vw, 44px); line-height: .99; letter-spacing: -1.8px; }
.welcome-copy h1 span { color: var(--purple); }.welcome-copy p { margin: 0; color: #625d83; font-size: 13px; }
.welcome-art { width: 210px; height: 165px; position: absolute; right: 9%; top: 3px; }
.mascot-clock { width: 119px; height: 119px; position: absolute; top: 20px; right: 36px; border: 7px solid #fff; border-radius: 50%; background: #ffdc79; box-shadow: 0 9px 0 rgba(72, 59, 135, .13), 0 0 0 3px #473a91; }
.mascot-clock::before, .mascot-clock::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 8px; border-radius: 4px; background: #473a91; transform: translate(-50%, -50%) translateY(-47px); }
.mascot-clock::after { transform: translate(-50%, -50%) rotate(90deg) translateY(-47px); }
.mascot-eye { position: absolute; top: 34px; width: 5px; height: 7px; border-radius: 50%; background: #30275d; }.mascot-eye--left { left: 37px; }.mascot-eye--right { right: 37px; }
.mascot-smile { width: 21px; height: 11px; position: absolute; left: 42px; top: 47px; border-bottom: 2px solid #30275d; border-radius: 0 0 24px 24px; }
.mascot-hand { position: absolute; left: 50%; top: 49px; width: 4px; border-radius: 9px; transform-origin: 50% 100%; }.mascot-hand--hour { height: 22px; background: #473a91; transform: translateX(-50%) rotate(-48deg); }
.mascot-hand--minute { top: 27px; height: 32px; background: var(--coral); transform: translateX(-50%) rotate(20deg); }.mascot-center { position: absolute; top: 57px; left: 53px; width: 8px; height: 8px; border: 2px solid #ffdc79; border-radius: 50%; background: #473a91; }
.orbit { position: absolute; border: 1px dashed rgba(71, 58, 145, .28); border-radius: 50%; transform: rotate(-18deg); }.orbit--one { width: 196px; height: 102px; right: -5px; top: 24px; }.orbit--two { width: 145px; height: 126px; right: 25px; top: 9px; transform: rotate(29deg); }
.spark { position: absolute; color: #e3a824; }.spark--one { right: 10px; top: 35px; font-size: 18px; }.spark--two { right: 167px; top: 27px; color: var(--coral); font-size: 23px; }
.journey-chip { position: absolute; right: 17px; bottom: 14px; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 99px; background: #fff; color: #51477f; font-size: 11px; font-weight: 800; box-shadow: 0 2px 8px rgba(71, 58, 145, .08); }
.journey-chip__icon { color: #e4a923; font-size: 15px; }
.learning-cue { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 11px; padding: 11px 15px; margin-bottom: 16px; border: 1px solid #d3ece2; border-radius: 17px; background: #eef9f4; }
.cue-icon { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 12px; background: #d9f0e5; color: #167e70; font-size: 20px; }
.cue-copy { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 9px; color: #4e6b66; font-size: 12px; line-height: 1.5; }.cue-copy strong { color: #266e64; font-size: 12px; white-space: nowrap; }
.text-hour { color: #463998; }.text-minute { color: #d95147; }.cue-toggle { padding: 7px 11px; border: 1px solid #bddfd3; border-radius: 99px; background: #fff; color: #296d64; font-size: 11px; font-weight: 800; }
.cue-toggle:hover { background: #dff3e9; }.clock-guide { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding-top: 9px; border-top: 1px solid #d7ebe2; }
.guide-step { display: flex; align-items: flex-start; gap: 8px; padding: 7px 9px; border-radius: 12px; background: rgba(255,255,255,.74); }.guide-step p { margin: 0; color: #5e6e6b; font-size: 11px; line-height: 1.5; }.guide-step p b { color: var(--ink); }
.guide-number { flex: 0 0 23px; height: 23px; display: grid; place-items: center; border-radius: 8px; color: #fff; font-size: 11px; font-weight: 900; }.guide-number--hour { background: var(--purple); }.guide-number--minute { background: var(--coral); }.guide-number--tick { background: var(--teal); }
.workspace { display: grid; grid-template-columns: 222px minmax(390px, 1fr) 230px; gap: 16px; align-items: start; }.surface { border: 1px solid rgba(92, 79, 146, .1); border-radius: 20px; background: var(--paper); box-shadow: var(--shadow); }
.path-card, .progress-card { padding: 17px 15px; }.card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; }.card-heading h2 { margin: 4px 0 0; font-size: 18px; letter-spacing: -.45px; }.section-kicker { font-size: 9px; letter-spacing: 1.4px; }
.map-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 11px; background: #f0edff; color: var(--purple); font-size: 22px; transform: rotate(24deg); }
.path-list { display: grid; gap: 7px; margin-top: 15px; }.level-button { width: 100%; display: grid; grid-template-columns: 31px 1fr 19px; align-items: center; gap: 8px; padding: 9px 8px; border: 1px solid transparent; border-radius: 13px; background: transparent; text-align: left; transition: transform .16s, background .16s, border-color .16s; }
.level-button:hover:not(:disabled) { transform: translateX(2px); background: #f6f4ff; }.level-button[aria-current="step"] { border-color: #d9d1ff; background: #f1efff; }.level-button:disabled { cursor: not-allowed; opacity: .57; }
.level-orb { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: #f0edff; color: #5b4ca2; font-size: 11px; font-weight: 900; }
.level-button[data-level="1"] .level-orb, .level-button[data-level="4"] .level-orb { background: #fff2cf; color: #946500; }.level-button[data-level="2"] .level-orb, .level-button[data-level="5"] .level-orb { background: #ffe9e6; color: #ad4f49; }
.level-label { min-width: 0; display: grid; gap: 2px; }.level-label b { overflow: hidden; color: var(--ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.level-label small { color: var(--muted); font-size: 9px; }.level-state { color: #9b97ab; font-size: 13px; text-align: right; }.level-state--done { color: #218b73; font-size: 15px; }
.path-footer { display: flex; gap: 7px; align-items: flex-start; margin-top: 13px; padding: 11px 8px 2px; border-top: 1px solid #f0edf4; color: #858197; font-size: 10px; line-height: 1.45; }.tiny-star { color: #dfa91e; font-size: 12px; }
.challenge-card { min-height: 550px; padding: 20px 20px 18px; position: relative; overflow: hidden; }.challenge-card::before { content: ""; position: absolute; top: -46px; right: -41px; width: 115px; height: 115px; border: 15px solid rgba(239, 99, 89, .07); border-radius: 50%; pointer-events: none; }
.challenge-topline { display: flex; justify-content: space-between; align-items: center; gap: 10px; position: relative; }.stop-tag { display: inline-flex; align-items: center; gap: 7px; color: #746e8f; font-size: 10px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }.stop-tag__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px #e7f5ee; }
.question-counter { padding: 6px 10px; border: 1px solid #eeebf4; border-radius: 99px; background: #fff; color: #766f91; font-size: 10px; font-weight: 800; white-space: nowrap; }.question-progress { display: flex; gap: 5px; margin: 13px 0 16px; }.question-progress i { flex: 1; height: 5px; border-radius: 9px; background: #eeecf4; }.question-progress i.is-done { background: #58bba2; }.question-progress i.is-current { background: var(--gold); }
.question-heading { margin: 0 0 4px; font-size: clamp(22px, 2.6vw, 29px); letter-spacing: -.9px; line-height: 1.1; }.question-prompt { max-width: 62ch; margin: 0; color: #77758d; font-size: 13px; line-height: 1.55; }
.challenge-content { display: grid; grid-template-columns: minmax(200px, .92fr) minmax(0, 1fr); align-items: center; gap: 18px; margin-top: 15px; }
.clock-stage { min-height: 296px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 11px 8px 9px; position: relative; overflow: hidden; border-radius: 19px; background: #f1f7ff; }
.clock-stage::before, .clock-stage::after { content: ""; width: 68px; height: 68px; position: absolute; border-radius: 50%; background: #fff; opacity: .55; }.clock-stage::before { left: -26px; top: -22px; }.clock-stage::after { right: -25px; bottom: -30px; width: 97px; height: 97px; }
.clock-stage__label { align-self: flex-start; margin: 0 0 3px 10px; position: relative; z-index: 1; color: #787f99; font-size: 9px; letter-spacing: 1.25px; font-weight: 900; }.clock-art { width: min(100%, 276px); position: relative; z-index: 1; }.clock-art svg { width: 100%; height: auto; display: block; overflow: visible; }
.clock-face { fill: #fff; stroke: #dddaf0; stroke-width: 3; }.clock-rim { fill: none; stroke: #d6e6ef; stroke-width: 2; stroke-dasharray: 2 8; }.clock-tick { stroke: #8890a5; stroke-width: 2; stroke-linecap: round; }.clock-tick--hour { stroke: #4d467f; stroke-width: 3.7; }.clock-number { fill: #373253; font: 800 16px "Trebuchet MS", system-ui, sans-serif; text-anchor: middle; dominant-baseline: middle; }
.clock-hand-hour { stroke: #493d91; stroke-width: 10; stroke-linecap: round; }.clock-hand-minute { stroke: #ef6359; stroke-width: 6; stroke-linecap: round; }.clock-hand-cap { fill: #3f347f; stroke: #fff; stroke-width: 2; }.clock-hand-tail-hour { stroke: #493d91; stroke-width: 4; stroke-linecap: round; }.clock-hand-tail-minute { stroke: #ef6359; stroke-width: 3; stroke-linecap: round; }
.clock-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 11px; margin-top: 2px; position: relative; z-index: 1; }.clock-legend span { display: inline-flex; align-items: center; gap: 5px; color: #5f607a; font-size: 9px; font-weight: 800; }.legend-stroke { width: 16px; height: 4px; border-radius: 3px; }.legend-stroke--hour { background: var(--purple); }.legend-stroke--minute { background: var(--coral); }
.answer-area { min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }.answer-prompt { margin: 0 0 11px; color: #4b4868; font-size: 12px; line-height: 1.5; font-weight: 700; }.choice-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.choice-button { min-height: 49px; padding: 8px; border: 1.5px solid #e9e6f1; border-radius: 13px; background: #fff; color: #3c375c; font-size: 16px; font-weight: 900; box-shadow: 0 2px 0 #eeedf3; transition: transform .14s, border-color .14s, background .14s, box-shadow .14s; }
.choice-button:hover:not(:disabled) { transform: translateY(-2px); border-color: #9389d2; background: #f8f6ff; box-shadow: 0 4px 0 #e5e0fb; }.choice-button:active:not(:disabled) { transform: translateY(0); box-shadow: 0 1px 0 #eeedf3; }.choice-button:disabled { cursor: default; opacity: .78; }
.choice-button.is-wrong { border-color: #eb8b81; background: #fff1ed; color: #9b433c; }.choice-button.is-right { border-color: #6dbca3; background: #eaf8f0; color: #246d59; }.answer-hint { margin-top: 11px; color: #8b879a; font-size: 10px; line-height: 1.4; }
.set-clock-form { display: grid; gap: 9px; }.range-control { display: grid; gap: 5px; }.range-heading { display: flex; justify-content: space-between; align-items: center; color: #6d6a80; font-size: 10px; font-weight: 800; }.range-heading output { min-width: 32px; padding: 3px 6px; border-radius: 7px; background: #f0edff; color: var(--purple); text-align: center; font-weight: 900; }.range-heading--minute output { background: #fff0eb; color: #c54d45; }
input[type="range"] { width: 100%; height: 23px; margin: 0; background: transparent; cursor: pointer; accent-color: var(--purple); }.range-control--minute input { accent-color: var(--coral); }
.set-readout { display: flex; justify-content: space-between; align-items: center; padding: 6px 9px; border-radius: 9px; background: #f7f6fb; color: #737087; font-size: 10px; }.set-readout strong { color: var(--ink); font-size: 17px; letter-spacing: .2px; }
.primary-button, .secondary-button { min-height: 44px; display: inline-flex; justify-content: center; align-items: center; gap: 8px; padding: 10px 15px; border: 0; border-radius: 12px; font-size: 12px; font-weight: 900; transition: transform .14s, box-shadow .14s, background .14s; }
.primary-button { background: var(--purple); color: #fff; box-shadow: 0 4px 0 #30266d; }.primary-button:hover { transform: translateY(-2px); background: #5344a6; box-shadow: 0 6px 0 #30266d; }.primary-button:active { transform: translateY(2px); box-shadow: 0 1px 0 #30266d; }
.secondary-button { border: 1px solid #ded9f0; background: #f5f3ff; color: #50458d; }.secondary-button:hover { background: #eeebff; transform: translateY(-1px); }.primary-button:disabled, .secondary-button:disabled { opacity: .6; cursor: not-allowed; transform: none; }.set-clock-form .primary-button { margin-top: 2px; }
.interval-clocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }.interval-clock { padding: 10px 7px 6px; border-radius: 16px; background: #f1f7ff; text-align: center; }.interval-clock__label { margin-bottom: 1px; color: #777d95; font-size: 8px; font-weight: 900; letter-spacing: 1px; }.interval-clock .clock-art { width: min(100%, 140px); margin: 0 auto; }.interval-clock__time { display: inline-block; margin-top: 1px; padding: 4px 8px; border-radius: 99px; background: #fff; color: #453c7f; font-size: 11px; font-weight: 900; }.story-visual { display: grid; gap: 8px; }.story-note { padding: 9px 11px; border-radius: 12px; background: #fff7dc; color: #7f6740; font-size: 10px; line-height: 1.4; }
.feedback-panel { display: flex; align-items: flex-start; gap: 9px; margin-top: 13px; padding: 10px 11px; border: 1px solid #d5eadd; border-radius: 13px; background: #eef9f1; animation: pop-in .2s ease-out both; }.feedback-panel--try { border-color: #f1ddab; background: #fff7df; }.feedback-mark { flex: 0 0 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: #d8f0df; color: #277550; font-size: 13px; font-weight: 900; }.feedback-panel--try .feedback-mark { background: #ffebbd; color: #946500; }
.feedback-copy { flex: 1; color: #547364; font-size: 10px; line-height: 1.5; }.feedback-copy strong { display: block; margin-bottom: 2px; color: #276f53; font-size: 11px; }.feedback-panel--try .feedback-copy { color: #846f43; }.feedback-panel--try .feedback-copy strong { color: #775814; }
.feedback-action { flex: 0 0 auto; align-self: center; min-height: 36px; padding: 7px 10px; border: 1px solid #ecd89e; border-radius: 10px; background: #fff; color: #775814; font-size: 10px; font-weight: 900; }.feedback-action:hover { background: #fff4d1; }
.after-feedback { display: flex; justify-content: flex-end; margin-top: 11px; }.after-feedback .primary-button { min-height: 39px; }.challenge-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 15px; padding-top: 11px; border-top: 1px solid #f0edf4; color: #8c899c; font-size: 9px; }.challenge-foot__lesson { display: flex; align-items: center; gap: 6px; }.challenge-foot__lesson span { color: #e2a526; font-size: 13px; }
.star-count-card { display: flex; align-items: center; gap: 10px; margin: 15px 0 18px; padding: 12px 10px; border: 1px solid #f2e1ac; border-radius: 15px; background: #fff9e1; }.star-count-art { width: 48px; height: 48px; display: grid; place-items: center; position: relative; border-radius: 15px; background: #ffedaa; color: #d39411; font-size: 27px; transform: rotate(-4deg); }.star-count-art i, .star-count-art b { position: absolute; color: #edaa27; font-size: 11px; font-style: normal; }.star-count-art i { right: 4px; top: 4px; }.star-count-art b { left: 5px; bottom: 4px; }
.star-count-card > div:last-child { display: grid; gap: 1px; }.star-count-card strong { color: #624917; font-size: 23px; line-height: 1; }.star-count-card span { color: #8e7848; font-size: 9px; font-weight: 700; }.mini-progress { margin-bottom: 18px; }.mini-progress__label { display: flex; justify-content: space-between; margin-bottom: 6px; color: #77758b; font-size: 10px; }.mini-progress__label b { color: #4d4776; }
.progress-track { height: 8px; overflow: hidden; border-radius: 99px; background: #eeebf6; }.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #63c1a6, #9bdba8); transition: width .35s; }
.skill-box, .badge-box { padding-top: 13px; border-top: 1px solid #f0edf4; }.skill-box__title, .badge-box__title { display: flex; align-items: center; gap: 7px; color: #5f5c77; font-size: 10px; }.skill-icon, .badge-icon { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 8px; background: #f0edff; color: var(--purple); font-size: 14px; }.badge-icon { background: #fff3ce; color: #c08a10; }
.skill-box p { margin: 8px 0; color: #89869a; font-size: 9px; line-height: 1.45; }.skill-list { display: grid; gap: 7px; }.skill-row { display: grid; gap: 4px; }.skill-row__top { display: flex; justify-content: space-between; color: #76738b; font-size: 9px; }.skill-row__top b { color: #625c84; }.skill-meter { height: 4px; overflow: hidden; border-radius: 9px; background: #f0eef5; }.skill-meter span { height: 100%; display: block; border-radius: inherit; background: #75bfa6; }.practice-warn { color: #a86143 !important; }
.badge-box { margin-top: 14px; }.badge-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }.earned-badge { display: inline-flex; align-items: center; gap: 4px; padding: 5px 7px; border: 1px solid #f0dfb0; border-radius: 99px; background: #fff8df; color: #785c19; font-size: 8px; font-weight: 800; }.earned-badge span { color: #e4a51b; }.empty-badge { color: #9c98a7; font-size: 9px; }
.educator-notes { margin-top: 15px; overflow: hidden; }.educator-notes summary { min-height: 65px; display: flex; align-items: center; gap: 11px; padding: 11px 17px; list-style: none; cursor: pointer; }.educator-notes summary::-webkit-details-marker { display: none; }.adult-icon { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 11px; background: #f1edff; color: #50458d; font-size: 17px; }.educator-notes summary > span:nth-child(2) { display: grid; gap: 2px; }.educator-notes summary b { color: #49446f; font-size: 12px; }.educator-notes summary small { color: #918da0; font-size: 10px; }.summary-chevron { margin-left: auto; color: #77719c; font-size: 20px; transition: transform .2s; }.educator-notes[open] .summary-chevron { transform: rotate(180deg); }
.educator-content { padding: 2px 20px 17px 63px; color: #65627d; font-size: 11px; line-height: 1.6; }.educator-content p { margin: 8px 0; }.educator-content p b { color: #454063; }.source-list { margin: 9px 0; padding-left: 19px; }.source-list li { padding: 2px 0; }.source-list a { color: #4d4389; text-underline-offset: 2px; }.source-list a:hover { color: #a14342; }.source-caveat { color: #89869a; font-size: 10px; font-style: italic; }
.page-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 16px 0 0; color: #9691a1; font-size: 10px; }.page-note span { color: #dba82e; }
.toast { position: fixed; z-index: 10; right: 20px; bottom: 20px; max-width: min(380px, calc(100vw - 40px)); padding: 12px 16px; border-radius: 13px; background: #31285f; color: #fff; font-size: 12px; font-weight: 800; box-shadow: 0 8px 25px rgba(30, 24, 62, .2); animation: pop-in .2s ease-out both; }
.round-summary { min-height: 465px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 14px 10px; text-align: center; }.summary-medal { width: 100px; height: 100px; display: grid; place-items: center; position: relative; margin: 0 0 15px; border: 8px solid #fff4c9; border-radius: 50%; background: #ffdc72; color: #926410; font-size: 43px; box-shadow: 0 0 0 2px #efd478, 0 8px 0 rgba(86, 71, 134, .1); }.summary-medal::before, .summary-medal::after { content: "✦"; position: absolute; color: #e4a628; font-size: 17px; }.summary-medal::before { top: -10px; right: -19px; }.summary-medal::after { bottom: -8px; left: -19px; color: #61b9a0; }.round-summary h2 { max-width: 20ch; margin: 0 0 7px; font-size: 27px; letter-spacing: -.8px; }.round-summary p { max-width: 44ch; margin: 0; color: #77758d; font-size: 13px; line-height: 1.55; }.earned-stars { display: flex; justify-content: center; gap: 8px; margin: 14px 0 19px; color: #eca900; font-size: 28px; }.earned-stars .star-empty { color: #e7e3ed; }.summary-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; }
@keyframes pop-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 1140px) {
  .app-shell { padding-right: 24px; padding-left: 24px; }.workspace { grid-template-columns: 196px minmax(0, 1fr); }
  .progress-card { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 13px 18px; align-items: start; }.progress-card > .card-heading { grid-column: 1 / -1; }
  .star-count-card { margin: 0; }.mini-progress { margin: 0; }.skill-box { padding-top: 0; border-top: 0; }.badge-box { grid-column: 2 / 4; margin: 0; padding-top: 0; border-top: 0; }
}
@media (max-width: 780px) {
  .app-shell { padding: 0 15px 24px; }.topbar { height: 70px; }.brand-mark { width: 40px; height: 40px; }.brand-copy strong { font-size: 16px; }.brand-copy small { font-size: 9px; }
  .welcome-row { min-height: 162px; padding: 17px 18px; border-radius: 21px; }.welcome-copy h1 { font-size: clamp(28px, 6.5vw, 38px); }.welcome-art { right: -8px; top: 4px; transform: scale(.84); transform-origin: right center; opacity: .87; }.welcome-copy p { max-width: 54%; font-size: 11px; }.journey-chip { right: 11px; bottom: 10px; font-size: 9px; }
  .learning-cue { grid-template-columns: 36px 1fr auto; gap: 8px; padding: 10px; }.cue-copy { display: block; font-size: 10px; }.cue-copy strong { display: block; margin-bottom: 2px; }.cue-toggle { padding: 7px 9px; font-size: 10px; }.clock-guide { grid-template-columns: 1fr; }.guide-step { padding: 7px 8px; }
  .workspace { grid-template-columns: 1fr; gap: 12px; }.path-card { padding: 12px 12px 10px; }.path-card .card-heading { align-items: center; }.path-card .card-heading h2 { font-size: 16px; }.path-list { display: flex; gap: 7px; overflow-x: auto; margin: 10px -3px 0; padding: 2px 3px 6px; scroll-snap-type: x mandatory; }.level-button { flex: 0 0 145px; grid-template-columns: 29px 1fr 15px; padding: 7px; background: #faf9fe; scroll-snap-align: start; }.level-orb { width: 28px; height: 28px; }.path-footer { margin-top: 5px; padding-top: 8px; font-size: 9px; }
  .challenge-card { min-height: 0; padding: 16px 14px 14px; }.challenge-content { grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }.clock-stage { min-height: 0; padding: 8px; }.clock-art { width: min(72vw, 280px); }.clock-stage__label { align-self: flex-start; }.interval-clocks { max-width: 380px; margin: 0 auto; }.interval-clock .clock-art { width: min(34vw, 145px); }.question-heading { font-size: 24px; }.question-prompt { font-size: 12px; }.choice-button { min-height: 48px; }
  .progress-card { grid-column: auto; grid-template-columns: 1fr 1fr; padding: 14px; gap: 13px; }.progress-card > .card-heading { grid-column: 1 / -1; }.star-count-card { margin: 0; }.mini-progress { margin: 0; }.skill-box, .badge-box { grid-column: 1 / -1; padding-top: 11px; border-top: 1px solid #f0edf4; }.educator-content { padding: 0 15px 15px; }
}
@media (max-width: 390px) {
  .app-shell { padding-right: 10px; padding-left: 10px; }.welcome-row { padding-left: 13px; }.welcome-art { right: -30px; transform: scale(.72); opacity: .74; }.welcome-copy p { max-width: 65%; }
  .learning-cue { grid-template-columns: 32px minmax(0,1fr); }.cue-toggle { grid-column: 2; justify-self: start; }.cue-copy { grid-column: 2; grid-row: 1; }.cue-icon { grid-row: 1 / span 2; }
  .choice-list { gap: 7px; }.choice-button { padding: 7px 5px; font-size: 14px; }.feedback-panel { flex-wrap: wrap; }.feedback-action { margin-left: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Featured lesson: Finding Time Before and After */
.featured-lesson-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 9px; padding: 8px 12px; border: 0; border-radius: 11px; background: var(--purple); color: #fff; font-size: 11px; font-weight: 900; box-shadow: 0 3px 0 #30266d; transition: transform .15s, background .15s; }
.featured-lesson-cta:hover { transform: translateY(-2px); background: #594aab; }
.level-button--featured { border-color: #cbe8dc; background: #f0faf4; }
.level-button--featured:hover:not(:disabled) { background: #e4f5eb; }
.level-button--featured .level-orb { background: #d8f0e3; color: #26775e; }
.level-state--featured { color: #218b73; font-size: 15px; }
.before-after-stage { min-height: 296px; display: grid; grid-template-columns: minmax(105px, .86fr) minmax(145px, 1.14fr); align-items: center; gap: 8px; padding: 14px 10px; border-radius: 19px; background: #f1f7ff; }
.before-after-clock { min-width: 0; display: grid; justify-items: center; gap: 6px; }
.before-after-clock .clock-art { width: min(100%, 190px); }
.before-after-clock__label, .numberline-kicker { color: #787f99; font-size: 8px; font-weight: 900; letter-spacing: 1.1px; text-align: center; }
.numberline-card { min-width: 0; padding: 12px 9px; border: 1px solid #e0e7f6; border-radius: 15px; background: rgba(255,255,255,.85); }
.numberline-kicker { display: block; margin-bottom: 13px; }
.numberline-track { display: flex; align-items: center; min-width: 0; }
.time-node { flex: 0 0 47px; min-height: 51px; display: grid; place-content: center; gap: 2px; border: 1px solid #e4e0f3; border-radius: 12px; background: #fff; text-align: center; }
.time-node strong { color: #393261; font-size: 14px; }
.time-node small { color: #89859a; font-size: 7px; text-transform: uppercase; letter-spacing: .4px; }
.time-node--unknown { border-style: dashed; border-color: #bfc6dc; background: #f8f8ff; }
.time-node--unknown strong { color: #777b98; font-size: 21px; }
.hop-bridge { flex: 1; min-width: 35px; display: grid; justify-items: center; gap: 3px; color: #51477f; text-align: center; }
.hop-bridge span { font-size: 7px; font-weight: 900; letter-spacing: .5px; white-space: nowrap; }
.hop-bridge strong { color: #198d82; font-size: 9px; }
.hop-bridge b { width: 100%; color: #198d82; font-size: 24px; line-height: .8; }
.numberline-track--before .hop-bridge strong, .numberline-track--before .hop-bridge b { color: #db6258; }
.numberline-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 9px; margin: 12px 0 0; color: #77758f; font-size: 8px; line-height: 1.4; text-align: center; }
.numberline-key b { color: #453a85; }
@media (max-width: 780px) {
  .before-after-stage { min-height: 0; grid-template-columns: minmax(105px, .86fr) minmax(145px, 1.14fr); }
  .welcome-copy p { max-width: min(62%, 490px); font-size: 11px; }
}
@media (max-width: 390px) {
  .before-after-stage { grid-template-columns: 98px minmax(0, 1fr); gap: 5px; padding: 9px 6px; }
  .time-node { flex-basis: 41px; }.time-node strong { font-size: 12px; }
  .featured-lesson-cta { padding: 7px 9px; font-size: 10px; }
}

/* A scaled, accessible number line for the before/after lesson */
.challenge-content--timeline { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
.challenge-content--timeline .answer-area { align-self: auto; }
.before-after-stage { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 11px; padding: 13px; }
.before-after-top { display: grid; grid-template-columns: 116px minmax(0, 1fr); align-items: center; gap: 14px; }
.before-after-clock { min-width: 0; display: grid; justify-items: center; gap: 3px; }
.before-after-clock .clock-art { width: 112px; }
.before-after-instructions { display: grid; justify-items: start; gap: 5px; color: #605c79; font-size: 11px; line-height: 1.45; }
.before-after-instructions strong { color: #41377f; font-size: 14px; }
.numberline-card { min-width: 0; padding: 10px 12px 8px; border: 1px solid #dce5f4; border-radius: 15px; background: rgba(255,255,255,.9); }
.numberline-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: #696783; font-size: 9px; letter-spacing: .7px; }
.numberline-heading b { color: #443a83; letter-spacing: 1px; }
.numberline-heading span { padding: 4px 7px; border-radius: 99px; background: #edf7f2; color: #277665; font-size: 8px; font-weight: 900; }
.numberline-scroll { width: 100%; min-width: 0; }
.time-numberline { width: 100%; height: auto; display: block; overflow: visible; }
.numberline-axis { stroke: #a9aec1; stroke-width: 3; stroke-linecap: round; }
.numberline-tick { stroke: #777c95; stroke-width: 1.7; }
.numberline-dot { fill: #fff; stroke: #858ba1; stroke-width: 2; }
.numberline-point.is-given .numberline-dot { fill: #d7f0e4; stroke: #208671; stroke-width: 2.5; }
.numberline-point.is-hour .numberline-dot { fill: #ffe6a5; stroke: #bd8312; stroke-width: 2.5; }
.numberline-point.is-mystery .numberline-dot { fill: #f5f3ff; stroke: #6b629e; stroke-width: 2.5; stroke-dasharray: 3 2; }
.numberline-point.is-hour .numberline-tick { stroke: #bd8312; stroke-width: 3; }
.numberline-clock-label { fill: #363252; font: 800 11px "Trebuchet MS", system-ui, sans-serif; text-anchor: middle; }
.numberline-point.is-hour .numberline-clock-label { fill: #946500; }
.numberline-offset-label { fill: #625d7b; font: 800 9px "Trebuchet MS", system-ui, sans-serif; text-anchor: middle; }
.numberline-endpoint-label { fill: #6d6983; font: 800 7px "Trebuchet MS", system-ui, sans-serif; letter-spacing: .45px; text-anchor: middle; }
.numberline-direction-label { fill: #625d7b; font: 900 9px "Trebuchet MS", system-ui, sans-serif; letter-spacing: 1px; text-anchor: middle; }
.numberline-move { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.numberline-move--after { stroke: #198d82; }
.numberline-move--before { stroke: #df6559; }
.numberline-move--after + * { color: #198d82; }
.numberline-move--after ~ defs marker path { fill: #198d82; }
.numberline-move--before ~ defs marker path { fill: #df6559; }
.numberline-note { margin: 2px 2px 0; color: #737087; font-size: 9px; line-height: 1.5; }
.numberline-note b { color: #986900; }
@media (max-width: 390px) {
  .before-after-top { grid-template-columns: 88px minmax(0, 1fr); gap: 8px; }
  .before-after-clock .clock-art { width: 88px; }
  .before-after-instructions strong { font-size: 12px; }
  .numberline-card { padding: 8px 6px 7px; }
  .numberline-clock-label { font-size: 9px; }
  .numberline-offset-label { font-size: 8px; }
  .numberline-endpoint-label { font-size: 6px; }
}

.numberline-arrowhead--before { fill: #df6559; }
.numberline-arrowhead--after { fill: #198d82; }