:root {
  --blue: #0b5ba8;
  --blue-dark: #083f79;
  --sky: #dff4ff;
  --ink: #17324d;
  --muted: #60788d;
  --line: #d7e3ec;
  --paper: #ffffff;
  --gold: #ffbf2f;
  --green: #22a864;
  --purple: #8b3fd1;
  --pink: #e93691;
  --shadow: 0 18px 46px rgba(33, 74, 111, .18);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  background: #eef5fa;
  font: 16px/1.45 "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 4px solid rgba(255, 191, 47, .72);
  outline-offset: 2px;
}
.sr-only, .skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus {
  z-index: 100;
  width: auto;
  height: auto;
  clip: auto;
  margin: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  background: #fff;
}

.topbar {
  height: 70px;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto minmax(240px, 1fr);
  align-items: center;
  gap: 18px;
  padding: 8px 18px;
  color: #fff;
  background: linear-gradient(105deg, var(--blue-dark), var(--blue));
  border-bottom: 4px solid #7bcdf7;
  position: relative;
  z-index: 20;
}
.brand { display: flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; min-width: 0; }
.brand-star {
  width: 47px;
  height: 47px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 16px 16px 16px 6px;
  color: #fff;
  background: var(--gold);
  font-size: 1.65rem;
  text-shadow: 0 2px #b56e00;
  box-shadow: inset 0 -4px rgba(0,0,0,.12);
}
.brand strong, .brand small { display: block; white-space: nowrap; }
.brand strong { font-size: 1.12rem; letter-spacing: .01em; }
.brand small { color: #bde8ff; font-weight: 700; font-size: .72rem; }
.mode-tabs { display: flex; gap: 4px; padding: 4px; border: 1px solid rgba(255,255,255,.26); border-radius: 15px; background: rgba(255,255,255,.12); }
.mode-tab { min-height: 42px; padding: 8px 17px; border: 0; border-radius: 11px; color: #d8efff; background: transparent; font-weight: 900; }
.mode-tab.active { color: var(--blue-dark); background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.top-actions { justify-self: end; display: flex; align-items: center; gap: 8px; }
.editor-link { min-height:42px; display:inline-flex; align-items:center; gap:7px; padding:0 13px; border:1px solid rgba(255,255,255,.32); border-radius:13px; color:#fff; background:rgba(255,255,255,.14); text-decoration:none; font-size:.78rem; font-weight:900; white-space:nowrap; }
.editor-link:hover { background:rgba(255,255,255,.25); }
.book-editor-shortcut { min-height:40px; display:inline-flex; align-items:center; gap:7px; padding:0 13px; border:1px solid #d7cee8; border-radius:12px; color:#4e287c; background:#fff; text-decoration:none; font-size:.78rem; font-weight:900; white-space:nowrap; box-shadow:0 2px 8px #35215010; }
.book-editor-shortcut:hover { background:#f7f1ff; border-color:#9b78c9; }
.storybook-shortcut { min-height:40px; display:inline-flex; align-items:center; gap:7px; padding:0 13px; border:1px solid #b9ddd8; border-radius:12px; color:#126a63; background:#f2fbf8; text-decoration:none; font-size:.78rem; font-weight:900; white-space:nowrap; box-shadow:0 2px 8px #164f4710; }
.storybook-shortcut:hover { background:#e2f7f1; border-color:#62b3aa; }
.progress-pill { display: flex; align-items: center; gap: 5px; height: 42px; padding: 0 14px; border-radius: 21px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); font-size: .82rem; }
.progress-divider { width: 1px; height: 17px; margin: 0 5px; background: rgba(255,255,255,.45); }
.round-button { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 13px; border: 1px solid rgba(255,255,255,.32); color: #fff; background: rgba(255,255,255,.14); font-size: 1.18rem; }
.round-button:hover { background: rgba(255,255,255,.25); }

.workspace { height: calc(100vh - 70px); display: grid; grid-template-columns: 78px minmax(0, 1fr) 88px; position: relative; }
.mode-book .topbar { display: none; }
.mode-book .workspace { height: 100vh; }
.mode-activities .tool-rail { display: none; }
.mode-activities .workspace { grid-template-columns: minmax(0, 1fr) 88px; }
.mode-activities .activity-view { grid-column: 1; }
.tool-rail, .side-tools { z-index: 8; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 17px 9px; background: transparent; }
.tool-rail { justify-content: center; }
.tool-button { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid #e0dcea; border-radius: 13px; color: #34485d; background: #fff; box-shadow: 0 7px 18px rgba(55,42,77,.12); font-weight: 900; font-size: 1.3rem; }
.tool-button:hover, .tool-button.active { color: #6e39a4; border-color: #bca0d8; background: #f3eafb; }
.rail-divider { width: 34px; border-top: 1px solid var(--line); margin: 4px 0; }
.panel-button { width: 68px; min-height: 66px; display: grid; place-items: center; gap: 1px; border: 1px solid #e0dcea; border-radius: 15px; color: #34485d; background: #fff; box-shadow: 0 7px 18px rgba(55,42,77,.12); }
.panel-button span { font-size: 1.35rem; line-height: 1; }
.panel-button small { font-size: .62rem; font-weight: 800; }
.panel-button:hover, .panel-button.active { color: #6e39a4; border-color: #bca0d8; background: #f3eafb; }

.book-view { min-width: 0; display: grid; grid-template-rows: 62px minmax(0, 1fr) 60px; background: #f5f1f8; border-left: 1px solid #e6dfed; border-right: 1px solid #e6dfed; }
.book-view[hidden] { display: none; }
.book-toolbar { display: flex; align-items: center; gap: 9px; padding: 7px 16px; border-top: 3px solid #8051aa; border-bottom: 1px solid #ddd5e5; background: #fff; box-shadow: 0 3px 10px rgba(60,39,81,.06); z-index: 6; }
.book-selector { width: min(350px, 30vw); height: 46px; display: grid; grid-template-columns: 34px minmax(0,1fr) 22px; align-items: center; gap: 9px; padding: 5px 10px; text-align: left; border: 2px solid #8051aa; border-radius: 14px; color: #243a50; background: #fff; }
.book-selector:hover { background: #faf6fd; }
.book-selector-icon { font-size: 1.2rem; }
.book-selector strong, .book-selector small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.book-selector strong { font-size: .84rem; }
.book-selector small { color: #71667a; font-size: .66rem; }
.selector-arrow { color: #6b3a94; font-size: 1.15rem; text-align: center; }
.nav-button, .zoom-button, .toolbar-button { height: 40px; min-width: 40px; border: 1px solid #ccdae5; border-radius: 12px; color: var(--blue-dark); background: #fff; font-weight: 900; }
.nav-button { font-size: 1.65rem; line-height: 1; }
.toolbar-button { font-size: 1.25rem; }
.toolbar-button.marked { color: #e83f78; background: #fff1f6; border-color: #f4aac5; }
.page-jump { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 11px; border: 1px solid #c9d7e3; border-radius: 12px; background: #fff; }
.page-jump input { width: 55px; border: 0; outline: 0; text-align: center; color: var(--ink); font-weight: 900; background: transparent; }
.page-jump small { color: var(--muted); white-space: nowrap; }
.toolbar-spacer { flex: 1; }
.toolbar-divider { width: 1px; height: 31px; margin: 0 5px; background: #ddd5e5; }
#zoom-range { width: min(150px, 15vw); accent-color: var(--blue); }
#zoom-output { min-width: 46px; color: var(--muted); font-size: .78rem; font-weight: 800; }
.stage-shell { min-height: 0; position: relative; overflow: auto; display: grid; place-items: center; padding: 10px 16px; touch-action: none; background: linear-gradient(135deg, #f8f5fa, #f1ecf5); }
.page-spread { display: flex; justify-content: center; align-items: stretch; transform-origin: center; transition: transform .18s ease; filter: drop-shadow(0 18px 24px rgba(26, 62, 91, .18)); }
.book-page { position: relative; flex: 0 0 auto; background: #fff; }
.book-page img { display: block; width: auto; height: min(calc(100vh - 150px), 900px); max-width: 42vw; object-fit: contain; user-select: none; pointer-events: none; }
.book-page + .book-page { border-left: 1px solid #ced9e3; }
.book-page:first-child { border-radius: 8px 0 0 8px; overflow: hidden; }
.book-page:last-child { border-radius: 0 8px 8px 0; overflow: hidden; }
.book-page.solo { border-radius: 8px; }
.book-page.html-page { width: min(calc((100vh - 150px) * .8), 42vw); height: min(calc(100vh - 150px), 900px); aspect-ratio: 4 / 5; overflow: hidden; }
.student-page { --page-blue:#1677c8; width: 100%; height: 100%; display: flex; flex-direction: column; gap: 1.15em; position: relative; overflow: hidden; padding: 3.8em 2.35em 2.25em; color: #17324d; background: #fff; font-size: clamp(10px, .88vw, 16px); line-height: 1.25; }
.student-page h1, .student-page h2, .student-page h3, .student-page p { margin: 0; }
.lesson-header { position: absolute; inset: 0 0 auto; height: 3em; display: flex; align-items: center; gap: .7em; padding: 0 1.1em; color: #0e4e91; background: linear-gradient(90deg,#e3f5ff,#f7fcff); border-bottom: .2em solid #b7dcf4; }
.lesson-header.yellow { color:#9b5f00; background:linear-gradient(90deg,#fff3bd,#fffaf0); border-color:#ffd65d; }
.lesson-header.green { color:#167442; background:linear-gradient(90deg,#dff6df,#f7fff5); border-color:#79cb82; }
.lesson-header.purple { color:#6c2ca3; background:linear-gradient(90deg,#f0e1ff,#fcf7ff); border-color:#bd8fe2; }
.lesson-header.red { color:#b02c37; background:linear-gradient(90deg,#ffe0e3,#fff7f8); border-color:#ef8790; }
.lesson-header.teal { color:#087c83; background:linear-gradient(90deg,#dff8f6,#f5fffe); border-color:#73d0cb; }
.lesson-header.pink { color:#a6236c; background:linear-gradient(90deg,#ffe0f2,#fff6fb); border-color:#ea84bc; }
.lesson-badge { width: 2.25em; height: 2.25em; display:grid; place-items:center; flex:0 0 auto; translate:0 .55em; border-radius: .85em .85em .85em .3em; color:#fff; background:#1677c8; font-weight:950; font-size:1.35em; box-shadow:inset 0 -.18em rgba(0,0,0,.12); }
.lesson-header.yellow .lesson-badge{background:#f2ac17}.lesson-header.green .lesson-badge{background:#25a756}.lesson-header.purple .lesson-badge{background:#843dc4}.lesson-header.red .lesson-badge{background:#df3e4b}.lesson-header.teal .lesson-badge{background:#14979b}.lesson-header.pink .lesson-badge{background:#d93b8f}
.lesson-header h2 { font-size: 1.75em; letter-spacing:-.04em; }
.unit-mark { margin-left:auto; color:currentColor; opacity:.6; font-size:.62em; font-weight:900; letter-spacing:.08em; }
.story-ribbon { display:flex;align-items:center;gap:.45em;margin:-.15em 0 .05em;padding:.48em .7em;border-left:.35em solid #f2ac17;border-radius:.6em;background:linear-gradient(90deg,#fff4c8,#fffdf2);color:#5b4a1f;font-size:.72em;font-weight:850;line-height:1.25;box-shadow:0 .12em .35em #8a64101a; }
.story-ribbon span { flex:0 0 auto;padding:.22em .45em;border-radius:.45em;background:#f2ac17;color:#fff;font-size:.78em;font-weight:950;letter-spacing:.06em; }
.story-ribbon i { flex:0 0 auto;font-style:normal;font-size:1.25em; }
.comic-page{display:block;padding:0;background:#fff;font-family:"Trebuchet MS",Arial,sans-serif}.comic-art{position:absolute;inset:0;background-image:linear-gradient(to bottom,transparent 0 86%,#ffffffee 92%),url('./assets/ringing-box-comic-v1.webp');background-repeat:no-repeat;background-size:200% 100%;filter:saturate(.96)}.comic-left .comic-art{background-position:left top}.comic-right .comic-art{background-position:right top}.comic-head{position:absolute;z-index:2;left:1.1em;right:1.1em;top:.65em;display:flex;align-items:center;gap:.6em;padding:.38em .65em;border-radius:.85em;background:#ffffffed;box-shadow:0 .18em .55em #17324d38}.comic-head.continuation{left:auto;width:max-content}.comic-head h2{color:#ef7b16;font-size:1.5em;line-height:1;text-shadow:0 .06em #fff}.comic-unit{padding:.38em .6em;border-radius:.65em;color:#fff;background:#7d3fb2;font-size:.72em;font-weight:950;letter-spacing:.06em}.before-listen{position:absolute;z-index:3;left:1.2em;top:3.55em;display:flex;align-items:center;gap:.5em;padding:.35em .65em;border-radius:.8em;background:#fff}.before-listen strong,.after-listen>strong{color:#fff;background:#f0a512;padding:.2em .5em;border-radius:.55em}.before-listen span{font-size:.72em;font-weight:850}.comic-instruction{position:absolute;z-index:3;left:1.2em;top:6.2em;display:flex;align-items:center;gap:.4em;padding:.35em .55em;border-radius:.8em;background:#fff;font-size:.78em;font-weight:900}.comic-instruction>b{width:1.7em;height:1.7em;display:grid;place-items:center;border-radius:50%;color:#fff;background:#7d3fb2}.comic-page .inline-speaker{width:2em;height:2em;font-size:.78em}.panel-number{position:absolute;z-index:3;width:2em;height:2em;display:grid;place-items:center;border:.13em solid #fff;border-radius:50%;color:#fff;background:#f09a16;box-shadow:0 .16em .35em #0004;font-size:.78em;font-weight:950}.comic-left .p1{left:1.1em;top:8.9em}.comic-left .p2{left:1.1em;top:37%}.comic-left .p3{left:1.1em;top:68%}.comic-left .p4{left:43%;top:68%}.comic-right .p1{left:1.1em;top:8.9em}.comic-right .p2{left:1.1em;top:37%}.comic-right .p3{left:1.1em;top:68%}.comic-right .p4{left:58%;top:68%}.comic-bubble{position:absolute;z-index:3;max-width:47%;padding:.42em .62em;border:.13em solid #364657;border-radius:1em 1em 1em .25em;background:#fff;color:#1a2d3f;box-shadow:0 .16em .4em #0003;font-size:.69em;font-weight:850;line-height:1.15}.comic-left .b1{left:19%;top:15%}.comic-left .b2{left:8%;top:43%}.comic-left .b3{left:5%;top:72%}.comic-left .b4{right:4%;top:73%}.comic-right .b1{left:14%;top:15%}.comic-right .b2{left:8%;top:43%}.comic-right .b3{left:7%;top:69%}.comic-right .b4{right:3%;top:69%}.after-listen{position:absolute;z-index:4;left:1em;right:1em;bottom:2.15em;padding:.45em .65em;border:.13em solid #d7b3eb;border-radius:.8em;background:#fff9ffed;box-shadow:0 -.15em .6em #45216d20}.after-listen p{margin-top:.35em;font-size:.76em;font-weight:850}.after-listen .page-action{position:absolute;right:.7em;bottom:.55em;margin:0;min-height:2.2em;font-size:.72em}.comic-footer{position:absolute;z-index:5;left:1em;right:1em;bottom:.45em;padding-top:.35em;border-top:.1em dotted #8050a5;color:#694e79;text-align:center;font-size:.62em;font-weight:800}
.comic-art { background-image:var(--comic-image); }
.task { position:relative; padding: 1em; border: .13em solid #d8e7f0; border-radius: 1.15em; background:#fff; }
.task h3 { display:flex; align-items:center; gap:.45em; margin-bottom:.75em; font-size:1.05em; }
.task h3 b { width:1.75em; height:1.75em; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--page-blue); }
.inline-speaker { width:2.25em; height:2.25em; display:inline-grid; place-items:center; flex:0 0 auto; border:.16em solid #fff; border-radius:50%; color:#fff; background:#1488bd; box-shadow:0 .18em .5em #0b679455; font-size:1em; vertical-align:middle; animation:speaker-pulse 2.4s infinite; }
.inline-speaker:hover, .inline-speaker.playing { scale:1.16; animation:none; }
.story-speaker { position:absolute; z-index:5; translate:-50% -50%; }
.managed-bubble { min-height:2.25em; }
@keyframes speaker-pulse { 0%,75%,100%{box-shadow:0 .18em .5em #0b679455,0 0 0 0 #41b7ea55}88%{box-shadow:0 .18em .5em #0b679455,0 0 0 .65em transparent} }
.page-action { min-height:2.7em; display:flex; align-items:center; justify-content:center; gap:.35em; margin:.8em auto 0; padding:.45em 1.1em; border:0; border-radius:1em; color:#fff; background:#1677c8; font-weight:900; box-shadow:0 .25em 0 #0a5799; }
.page-action.green { background:#24a860; box-shadow-color:#14743f; }.page-action.purple{background:#843dc4;box-shadow-color:#5d238f}.page-action.red{background:#df3e4b;box-shadow-color:#a82531}.page-action.teal{background:#13989b;box-shadow-color:#087174}.page-action.yellow{color:#744800;background:#ffc942;box-shadow-color:#c88900}
.page-goal { margin-top:auto; padding-top:.7em; text-align:center; color:#527088; border-top:.1em dashed #b9cedc; font-size:.82em; font-weight:800; }
.character-sprite { width:7em; height:9em; display:inline-block; flex:0 0 auto; background-image:url('./assets/characters-v2.png'); background-repeat:no-repeat; background-size:200% 200%; }
.character-sprite.maya{background-position:0 0}.character-sprite.noah{background-position:100% 0}.character-sprite.lina{background-position:0 100%}.character-sprite.sam{background-position:100% 100%}.character-sprite.small{width:5.2em;height:6.6em}
.greeting-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.7em; }
.speech-card { min-height:9.7em; display:grid; grid-template-columns:1fr auto; grid-template-rows:1fr auto; align-items:center; padding:.45em; border-radius:.9em; background:linear-gradient(135deg,#e9f7ff,#fff); }
.speech-card .character-sprite { grid-row:1 / 3; width:6.3em; height:7.9em; }
.speech-card p { align-self:end; padding:.35em .55em; border:.12em solid #78b8df; border-radius:1em 1em 1em .25em; background:#fff; font-weight:950; }
.speech-card .inline-speaker { justify-self:center; }
.partner-task { background:#fff9e8; border-color:#f1d378; }
.partner-row { display:flex; align-items:center; justify-content:center; gap:.55em; }
.talk-bubble { padding:.6em .8em; border:.13em solid #3d89c7; border-radius:1.1em 1.1em 1.1em .25em; background:#fff; font-weight:900; }.talk-bubble.alt{border-color:#8b4bc4;border-radius:1.1em 1.1em .25em 1.1em}
.name-cards { display:grid; grid-template-columns:1fr 1fr; gap:.75em; }
.name-card { overflow:hidden; border:.12em solid #d4e4ed; border-radius:1em; background:linear-gradient(#e9f7ff 58%,#fff 58%); text-align:center; }
.name-card .character-sprite { display:block; width:8em; height:9.2em; margin:0 auto; }
.name-card div { display:flex; align-items:center; justify-content:center; gap:.4em; padding:.55em .35em; }.name-card p{font-size:.9em}
.write-card { display:flex; align-items:center; gap:.7em; margin:.55em 0; padding:.45em .75em; border-radius:.9em; background:#f6f9fb; }.write-card label{flex:1;font-weight:800}.writing-line{display:inline-block;width:5em;border-bottom:.13em solid #61798b}
.command-grid { display:grid; grid-template-columns:1fr 1fr; gap:.75em; }.command-card{display:grid;grid-template-columns:1fr auto;align-items:center;padding:.75em;border-radius:1em;background:#f4f9fc}.command-visual{grid-row:1/3;font-size:3.7em;text-align:center}.command-card p{font-weight:950}.teacher-says{background:#edf9f0;border-color:#a9dbb8}.teacher-says>div{display:flex;align-items:center;justify-content:center;gap:1em}.teacher-says>div p{font-size:1.1em}
.action-strip { display:grid;grid-template-columns:1fr 1fr;gap:.65em}.action-strip>div{display:grid;grid-template-columns:1fr auto;align-items:center;padding:.65em;border-radius:.9em;background:#f7f1fc}.action-strip>div>span{grid-row:1/3;font-size:3em;text-align:center}.action-strip p{font-weight:950}.scene-card{display:flex;align-items:center;justify-content:space-around;padding:.55em;border-radius:1em;background:#edf8ff}.scene-steps{display:grid;gap:.3em}.scene-steps span{padding:.35em .55em;border-radius:.6em;background:#fff;font-weight:850}
.match-page{display:grid;grid-template-columns:1fr .45fr 1.25fr;gap:.6em;align-items:stretch}.picture-list,.word-list{display:grid;gap:.55em}.picture-list span,.word-list span{min-height:2.6em;display:flex;align-items:center;padding:.35em .6em;border-radius:.7em;background:#f4f9fc;font-weight:850}.picture-list span{font-size:1.4em}.match-lines{display:grid;align-items:center}.match-lines i{display:block;border-top:.12em dashed #8ba3b5}.check-friends{display:flex;align-items:center;justify-content:center;gap:.8em}
.choice-rows{display:grid;gap:.55em}.choice-rows>div{display:grid;grid-template-columns:2em 3em 3em 1fr auto;align-items:center;gap:.45em;padding:.55em;border-radius:.8em;background:#f4f9fc}.choice-rows strong{width:1.8em;height:1.8em;display:grid;place-items:center;border-radius:50%;color:#fff;background:#199b58}.choice-rows span{font-size:2.3em}.choice-rows p{font-weight:850}.score-box{background:#fff8df;border-color:#f1d36c}.score-box>div{display:flex;align-items:center;justify-content:center;gap:.55em;font-size:1.2em}
.color-list{display:grid;gap:.55em}.color-list>div{display:grid;grid-template-columns:1fr 4em 4em;align-items:center;gap:.8em;padding:.5em;border-bottom:.1em dashed #c9d7df}.line-picture{height:2.3em;display:grid;place-items:center;border:.1em solid #aebdc7;border-radius:.6em;background:#fff;font-size:2em;filter:grayscale(1)}.line-picture.correct-choice{border-width:.17em;border-color:#8160a5}.color-key>div{display:flex;justify-content:center;gap:.65em}.crayon{width:1.3em;height:4.4em;display:block;border-radius:.3em;background:#1684d5;rotate:35deg}.crayon.yellow{background:#f6c52f}.crayon.green{background:#2eb165}.crayon.pink{background:#ed5da6}
.dialogue-scene{display:grid;grid-template-columns:8em 1fr 8em;align-items:end;gap:.5em;padding:.65em;border-radius:1em;background:linear-gradient(#def2ff,#f5fbff)}.dialogue-scene .character-sprite{width:8em;height:10em}.dialogue-stack{display:grid;gap:1.2em;align-self:center}.your-turn{display:flex;align-items:center;gap:.8em}.empty-bubble{flex:1;padding:.8em;border:.13em solid #91b9d4;border-radius:1em;background:#fff;color:#7890a2}
.review-table{display:grid;border:.12em solid #b9d1df;border-radius:.8em;overflow:hidden}.review-table>div{display:grid;grid-template-columns:1fr 4em 4em;align-items:center;min-height:2.55em;border-bottom:.08em solid #d7e3ea}.review-table>div:last-child{border:0}.review-table span{padding-left:.7em;font-weight:850}.review-table b{text-align:center}.review-table i{width:1.35em;height:1.35em;justify-self:center;border:.12em solid #83a9c1;border-radius:.3em}.review-head{background:#eaf6fd}.promise-line{text-align:center;font-size:1.15em;font-weight:900;color:#865600}
.classroom-page{background:#fffdf7}.classroom-hero{height:58%;position:relative;border:.13em solid #e4cfae;border-radius:1em;background:linear-gradient(#c8efff 0 20%,#fff5df 20% 72%,#d6a66f 72%);overflow:hidden}.box-reveal{position:absolute;z-index:2;left:50%;top:4%;translate:-50%;width:max-content;padding:.45em .75em;border:.15em solid #e6ac2d;border-radius:1em;background:#fff7cf;color:#7c5410;box-shadow:0 .25em .7em #7b4b1630;font-size:.78em}.board{position:absolute;left:8%;top:17%;width:54%;padding:.7em 1em;border:.45em solid #a86a31;background:#28683d;color:#fff;box-shadow:0 .3em .8em #0003}.board p{margin:.35em 0;font-size:1.1em}.classroom-furniture{position:absolute;right:5%;top:20%;display:grid;grid-template-columns:1fr 1fr;gap:.5em;font-size:2.2em}.classroom-kid{position:absolute;left:15%;bottom:-5%;width:9em;height:11.5em}.classroom-kid.second{left:auto;right:12%}.classroom-speech{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.4em}.classroom-speech .talk-bubble.alt{margin-top:.35em}
.cover-page{padding:0;background:#1268ab}.cover-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:48% center}.cover-shade{position:absolute;inset:0;background:linear-gradient(120deg,#073b78e8 0 42%,transparent 72%),linear-gradient(0deg,#062c5aa8,transparent 45%)}.cover-copy{position:relative;z-index:2;width:63%;padding:3.8em 0 0 2.2em;color:#fff}.cover-kicker{font-size:1.4em;font-weight:950;letter-spacing:.05em}.cover-copy h1{margin:.25em 0;font-size:4.1em;line-height:.83;letter-spacing:-.07em;text-shadow:0 .08em #052d5a}.cover-copy h1 em{font-style:normal;color:#ffd54b}.cover-copy p{font-size:1.2em;font-weight:850}.cover-promise{display:flex;gap:.4em;margin-top:1.2em}.cover-promise span{padding:.45em .7em;border-radius:1em;background:#ffffff25;border:.1em solid #ffffff55;font-weight:850}.belongs{position:absolute;z-index:2;left:2.2em;right:2.2em;bottom:1.6em;padding:.8em 1em;border-radius:.8em;background:#ffffffea;color:#24415a;font-weight:800}.belongs span{display:inline-block;width:55%;margin-left:.5em;border-bottom:.12em solid #71889b}
.finish-page{align-items:center;text-align:center;padding-top:1.25em;background:radial-gradient(circle at 50% 18%,#fff,#fff6d1 55%,#fee59a)}.finish-stars{color:#f0ac00;font-size:2.2em}.finish-page>h1{font-size:3em;line-height:.9;color:#0d5fa6;text-shadow:0 .05em #fff}.finish-page>h1 em{font-style:normal;color:#ef7d20}.story-ending{width:82%;color:#6d551b;font-size:.82em;font-weight:850}.finish-group{height:8.6em;display:flex;align-items:end}.finish-group .character-sprite{margin:0 -.5em}.can-do{width:78%;padding:.8em 1.4em;text-align:left;border:.16em solid #e7bd3f;border-radius:1em;background:#fff}.can-do h2{color:#1d7e4f}.can-do p{margin:.3em 0;font-weight:850}.finish-audio{display:flex;align-items:center;gap:.7em;color:#0b5ba8}.finish-page>footer{margin-top:auto;font-size:1.5em;font-weight:950;color:#a16400}
.page-tag { position: absolute; bottom: 8px; right: 9px; min-width: 28px; height: 28px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: rgba(8,63,121,.82); font-size: .72rem; font-weight: 900; }
.page-hotspot { --hotspot:#7040a2; position: absolute; z-index: 3; left: var(--x); top: var(--y); translate: -50% -50%; width: 39px; height: 39px; display: grid; place-items: center; border: 3px solid #fff; border-radius: 50%; color: #fff; background: var(--hotspot); box-shadow: 0 4px 13px rgba(55,29,83,.38); animation: hotspot-pulse 2.2s infinite; }
.page-hotspot.audio { --hotspot:#1585bd; }
.page-hotspot.activity { --hotspot:#7040a2; }
.page-hotspot:hover, .page-hotspot.playing { scale: 1.16; filter: brightness(1.08); animation: none; }
.page-hotspot span { font-size: 1rem; line-height: 1; }
@keyframes hotspot-pulse { 0%, 70%, 100% { box-shadow: 0 4px 13px rgba(55,29,83,.35), 0 0 0 0 color-mix(in srgb, var(--hotspot) 35%, transparent); } 85% { box-shadow: 0 4px 13px rgba(55,29,83,.35), 0 0 0 11px transparent; } }
#drawing-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }
#drawing-canvas.drawing { pointer-events: auto; cursor: crosshair; }
.audio-strip { display: flex; align-items: center; gap: 9px; overflow-x: auto; padding: 7px 18px; border-top: 1px solid #ddd5e5; background: #fff; }
.audio-label { color: var(--muted); font-size: .78rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.audio-chip { min-height: 42px; display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 8px 13px; border: 1px solid #b9dced; border-radius: 13px; color: var(--blue-dark); background: #eef9ff; font-weight: 850; }
.audio-chip:hover { background: #dff4ff; }

.drawer { position: absolute; z-index: 15; top: 0; right: 88px; width: min(390px, calc(100vw - 166px)); height: 100%; display: grid; grid-template-rows: 66px minmax(0, 1fr); background: #fff; border-left: 1px solid #ddd5e5; box-shadow: -20px 0 42px rgba(55,42,77,.18); }
.drawer[hidden] { display: none; }
.drawer header { display: flex; align-items: center; justify-content: space-between; padding: 0 19px; border-bottom: 1px solid var(--line); }
.drawer h2 { margin: 0; font-size: 1.1rem; }
.drawer header button { width: 38px; height: 38px; border: 0; border-radius: 11px; background: #edf4f8; }
.drawer-body { overflow-y: auto; padding: 16px; }
.drawer-section { margin-bottom: 18px; }
.drawer-section h3 { margin: 0 0 9px; color: var(--blue); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.drawer-item { width: 100%; display: flex; align-items: center; gap: 11px; min-height: 54px; margin-bottom: 8px; padding: 9px 12px; text-align: left; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: #fff; }
.drawer-item:hover { border-color: #83c4ea; background: #f1faff; }
.drawer-item strong, .drawer-item small { display: block; }
.drawer-item small { color: var(--muted); }
.page-dot { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; color: #fff; background: var(--blue); font-weight: 900; }
.search-box, .note-box { width: 100%; border: 2px solid #cbdce8; border-radius: 13px; padding: 12px 13px; color: var(--ink); background: #fff; }
.note-box { min-height: 140px; resize: vertical; }
.save-note { width: 100%; margin-top: 9px; min-height: 46px; border: 0; border-radius: 13px; color: #fff; background: var(--blue); font-weight: 900; }
.empty-state { padding: 35px 14px; text-align: center; color: var(--muted); }

.activity-view { grid-column: 2; min-width: 0; display: grid; grid-template-columns: 250px minmax(0, 1fr); background: linear-gradient(135deg, #e9f8ff, #fff7dc); }
.activity-view[hidden] { display: none; }
.activity-list { overflow-y: auto; padding: 18px 13px; border-right: 1px solid #cae0ec; background: rgba(255,255,255,.78); }
.lesson-step { width: 100%; display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 9px; min-height: 61px; margin-bottom: 7px; padding: 8px 9px; border: 1px solid transparent; border-radius: 15px; text-align: left; color: #35566e; background: transparent; }
.lesson-step:hover, .lesson-step.active { color: var(--blue-dark); border-color: #aad5ed; background: #fff; }
.step-number { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 13px; color: #fff; background: var(--blue); font-weight: 900; }
.lesson-step:nth-child(3n+2) .step-number { background: var(--green); }
.lesson-step:nth-child(3n) .step-number { background: var(--purple); }
.step-title { font-size: .84rem; font-weight: 900; }
.step-done { color: var(--green); font-weight: 900; }
.activity-card { overflow-y: auto; padding: clamp(24px, 4vw, 56px); }
.activity-head { max-width: 900px; margin: 0 auto 24px; }
.activity-kicker { display: inline-block; margin-bottom: 8px; color: var(--blue); font-size: .76rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.activity-head h1 { margin: 0; font-size: clamp(2rem, 4vw, 3.8rem); line-height: 1.05; color: var(--blue-dark); }
.activity-head p { margin: 10px 0 0; color: var(--muted); font-size: 1.05rem; }
.activity-board { max-width: 900px; margin: 0 auto; padding: clamp(20px, 3vw, 34px); border: 1px solid rgba(66,132,173,.2); border-radius: 28px; background: rgba(255,255,255,.94); box-shadow: var(--shadow); }
.activity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.choice-card { min-height: 150px; display: grid; place-items: center; align-content: center; gap: 8px; padding: 16px; border: 3px solid #d6e7f0; border-radius: 22px; color: var(--ink); background: #fff; font-weight: 900; }
.choice-card:hover { transform: translateY(-2px); border-color: #77bee7; }
.choice-card .visual { font-size: 3.1rem; line-height: 1; }
.choice-card.correct { border-color: #55c989; background: #eafaf1; }
.choice-card.wrong { border-color: #f18484; background: #fff0f0; }
.choice-card.played { border-color: var(--gold); background: #fff9e3; }
.activity-message { min-height: 30px; margin-top: 16px; text-align: center; color: var(--blue-dark); font-weight: 900; }
.activity-footer { max-width: 900px; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 18px auto 0; }
.activity-nav { min-height: 48px; padding: 9px 18px; border: 0; border-radius: 14px; color: #fff; background: var(--blue); font-weight: 900; }
.activity-nav.secondary { color: var(--blue-dark); border: 1px solid #b8d8ea; background: #fff; }
.match-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
.match-column { display: grid; gap: 10px; }
.match-card { min-height: 55px; padding: 9px 13px; border: 2px solid #d4e4ed; border-radius: 15px; background: #fff; font-weight: 850; }
.match-card.selected { border-color: var(--gold); background: #fff8dd; }
.match-card.matched { border-color: #61c98d; background: #ecfaf2; opacity: .72; }
.review-list { display: grid; gap: 10px; }
.review-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 15px; background: #f4f9fc; }
.review-row button { min-width: 76px; min-height: 40px; border: 1px solid #bed5e3; border-radius: 11px; background: #fff; font-weight: 900; }

.toast { position: fixed; z-index: 50; left: 50%; bottom: 24px; translate: -50% 20px; opacity: 0; pointer-events: none; padding: 11px 17px; border-radius: 13px; color: #fff; background: #102f48; box-shadow: 0 12px 30px rgba(0,0,0,.22); transition: .2s ease; font-weight: 800; }
.toast.show { translate: -50% 0; opacity: 1; }

@media (max-width: 980px) {
  .topbar { grid-template-columns: 1fr auto; }
  .mode-tabs { order: 3; grid-column: 1 / -1; position: absolute; left: 50%; bottom: -50px; translate: -50% 0; z-index: 22; background: var(--blue-dark); }
  .workspace { height: calc(100vh - 70px); grid-template-columns: 58px minmax(0,1fr) 66px; padding-top: 50px; }
  .panel-button { width: 50px; }
  .drawer { top: 50px; right: 66px; height: calc(100% - 50px); }
  .activity-view { grid-column: 2; grid-template-columns: 190px minmax(0,1fr); }
}

@media (max-width: 720px) {
  body { overflow: auto; }
  .topbar { height: 64px; padding: 7px 10px; }
  .brand small { display: none; }
  .editor-link span { display:none; }
  .editor-link { width:43px; padding:0; justify-content:center; }
  .book-editor-shortcut span { display:none; }
  .book-editor-shortcut { width:40px; padding:0; justify-content:center; }
  .storybook-shortcut span { display:none; }
  .storybook-shortcut { width:40px; padding:0; justify-content:center; }
  .progress-pill { display: none; }
  .workspace { min-height: calc(100vh - 64px); height: auto; grid-template-columns: 1fr; padding-top: 48px; }
  .tool-rail { position: fixed; z-index: 24; left: 0; bottom: 0; width: 100%; height: 59px; flex-direction: row; justify-content: center; padding: 5px; border: 0; border-top: 1px solid var(--line); }
  .rail-divider { width: 1px; height: 35px; border: 0; border-left: 1px solid var(--line); }
  .side-tools { position: fixed; z-index: 23; right: 7px; top: 122px; padding: 5px; border: 0; border-radius: 18px; box-shadow: var(--shadow); }
  .panel-button { min-height: 48px; }
  .panel-button small { display: none; }
  .book-view { grid-column: 1; min-height: calc(100vh - 112px); padding-bottom: 59px; }
  .book-page img { height: auto; width: min(46vw, 390px); max-width: none; }
  .book-page.solo img { width: min(82vw, 520px); }
  .book-toolbar { padding: 7px 74px 7px 9px; }
  #zoom-range, #zoom-output, .zoom-button { display: none; }
  .drawer { position: fixed; top: 112px; right: 0; width: min(88vw, 390px); height: calc(100vh - 171px); }
  .activity-view { grid-column: 1; grid-template-columns: 1fr; padding-bottom: 59px; }
  .activity-list { display: flex; gap: 7px; overflow-x: auto; border: 0; border-bottom: 1px solid var(--line); }
  .lesson-step { min-width: 150px; }
  .activity-card { padding: 20px 13px; }
}

.comic-bubble.managed-bubble { font-size: calc(.69em * var(--bubble-font-scale, 1)); }
.comic-page .comic-instruction { top: 7.7em; }
.managed-block{border-width:.13em;border-style:solid}.managed-block h2,.managed-block span,.managed-block p{color:inherit}.shape-speech{border-radius:1em 1em 1em .22em!important}.shape-rounded{border-radius:.85em!important}.shape-cloud{border-radius:2.2em 1.7em 2.1em 1.6em!important;border-style:dotted!important}.shape-caption{border-radius:.2em!important;box-shadow:.25em .25em 0 color-mix(in srgb,currentColor 22%,transparent)!important}.shape-shout{border-radius:.25em 1.2em .25em 1.2em!important;border-style:dashed!important;transform:rotate(-1deg)}
.comic-bubble[class*="shape-"],.managed-block[class*="shape-"]{isolation:isolate;overflow:visible!important;filter:drop-shadow(.22em .22em 0 #17243a24)}.comic-bubble[class*="shape-"]::before,.managed-block[class*="shape-"]::before{content:"";position:absolute;z-index:-1;width:1.15em;height:1.05em;background:var(--box-bg,#fff);filter:drop-shadow(.08em .12em 0 var(--box-border,#364657));clip-path:polygon(0 0,100% 0,35% 100%)}.shape-speech{border-radius:50%!important;padding:.65em .9em!important}.shape-speech::before{left:45%;bottom:-.72em}.shape-cloud{border-radius:52% 48% 45% 55%/48% 52% 48% 52%!important;border-style:solid!important;padding:.6em .9em!important}.shape-cloud::before{left:17%;bottom:-.65em;transform:rotate(18deg)}.shape-oval-right{border-radius:48% 52% 52% 48%/52% 46% 54% 48%!important;padding:.6em .9em!important}.shape-oval-right::before{right:12%;bottom:-.58em;transform:rotate(-36deg)}.shape-oval-low{border-radius:42% 48% 46% 44%/58% 54% 46% 42%!important}.shape-oval-low::before{right:5%;bottom:-.55em;transform:rotate(-48deg)}.shape-rounded{border-radius:1em!important}.shape-rounded::before{left:42%;bottom:-.68em}.shape-caption{border-radius:.28em!important;box-shadow:none!important}.shape-caption::before{left:10%;bottom:-.68em;transform:skewX(-18deg)}.shape-shout{border-radius:.12em!important;border-style:solid!important;transform:none;clip-path:polygon(0 5%,92% 13%,92% 65%,74% 70%,88% 100%,58% 74%,0 82%)!important;padding-bottom:1.1em!important}.shape-shout::before,.shape-angular-right::before,.shape-angular-down::before{display:none}.shape-angular-right{border-radius:0!important;clip-path:polygon(8% 0,72% 0,88% 20%,88% 58%,100% 88%,70% 70%,8% 78%,0 62%,0 12%)!important;padding:.7em 1.2em 1.1em!important}.shape-angular-down{border-radius:0!important;clip-path:polygon(12% 0,85% 6%,100% 42%,84% 75%,62% 75%,48% 100%,40% 75%,5% 68%,0 18%)!important;padding:.7em 1em 1.15em!important}

/* Story bubbles: one polished visual language across book and editor. */
.comic-bubble.managed-bubble{
  display:flex;align-items:center;justify-content:center;min-height:3.05em;
  padding:.72em 1em!important;border-width:.11em!important;border-style:solid!important;
  border-radius:1.05em!important;background:color-mix(in srgb,var(--box-bg,#fff) 96%,transparent)!important;
  box-shadow:0 .14em .28em #10283c20,0 .38em .8em #10283c24!important;
  filter:none!important;font-size:calc(.82em * var(--bubble-font-scale,1));font-weight:900;
  line-height:1.24;text-align:center;letter-spacing:.005em;text-wrap:balance;
  backdrop-filter:blur(.12em);-webkit-backdrop-filter:blur(.12em)
}
.comic-bubble.managed-bubble::before{
  display:block!important;content:"";position:absolute;z-index:-1;width:.92em;height:.78em;
  bottom:-.57em;left:1.2em;right:auto;background:var(--box-bg,#fff);
  border:0!important;filter:drop-shadow(.06em .1em 0 var(--box-border,#364657));
  clip-path:polygon(0 0,100% 0,24% 100%);transform:none!important
}
.comic-bubble.managed-bubble.shape-oval-right::before,.comic-bubble.managed-bubble.shape-oval-low::before{
  left:auto;right:1.2em;clip-path:polygon(0 0,100% 0,76% 100%)
}
.comic-bubble.managed-bubble.shape-cloud{border-radius:1.25em!important}
.comic-bubble.managed-bubble.shape-cloud::before{left:1.55em;right:auto}
.story-speaker .speaker-icon{
  border:.14em solid #fff;box-shadow:0 .18em .5em #10283c35;background:#087fb5
}

/* The seven exact bubble silhouettes supplied for this book. */
.comic-bubble.managed-bubble[class*="shape-ref-"]{
  box-sizing:border-box;min-height:0;padding:.7em 1.05em 1em!important;border:0!important;border-radius:0!important;
  background-color:transparent!important;background-repeat:no-repeat!important;background-position:center!important;
  background-size:100% 100%!important;box-shadow:none!important;filter:none!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important
}
.comic-bubble.managed-bubble[class*="shape-ref-"]::before,.comic-bubble.managed-bubble[class*="shape-ref-"]::after{display:none!important}
.comic-bubble.managed-bubble.shape-ref-blue{background-image:url('./assets/bubbles/ref-blue.png')!important;padding:.55em 1em .9em!important}
.comic-bubble.managed-bubble.shape-ref-mint{background-image:url('./assets/bubbles/ref-mint.png')!important;padding:.9em 1.15em 1.2em!important}
.comic-bubble.managed-bubble.shape-ref-cream{background-image:url('./assets/bubbles/ref-cream.png')!important;padding:.8em 1.15em 1.05em!important}
.comic-bubble.managed-bubble.shape-ref-white{background-image:url('./assets/bubbles/ref-white.png')!important;padding:.75em 1.2em 1em!important}
.comic-bubble.managed-bubble.shape-ref-cloud{background-image:url('./assets/bubbles/ref-cloud.png')!important;padding:1em 1.1em 1.2em!important}
.comic-bubble.managed-bubble.shape-ref-burst{background-image:url('./assets/bubbles/ref-burst.png')!important;padding:1.2em 1.15em!important}
.comic-bubble.managed-bubble.shape-ref-thought{background-image:url('./assets/bubbles/ref-thought.png')!important;padding:.8em 1.1em 1.25em!important}

/* Full chapter cartoons live inside the existing fixed-size book pages. */
.film-finish-page{
  gap:.55em;padding:1em 1.35em 1.15em;background:#fff9e6;
}
.film-finish-page .finish-stars{font-size:1.55em;line-height:1}
.film-finish-page>h1{font-size:2.25em;line-height:1}
.film-finish-page .story-ending{font-size:.76em}
.chapter-film{
  width:94%;padding:.65em;border:.14em solid #f0bd36;border-radius:1.15em;
  background:#fff;box-shadow:0 .45em 1.1em #6b4a1324;text-align:left;
}
.chapter-film-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.7em;margin-bottom:.48em}
.chapter-film-head span{padding:.36em .58em;border-radius:.55em;color:#fff;background:#d85b35;font-size:.58em;font-weight:950;letter-spacing:.08em}
.chapter-film-head strong{overflow:hidden;color:#17324d;font-size:.88em;text-overflow:ellipsis;white-space:nowrap}
.chapter-film-head small{color:#5f6f7d;font-size:.62em;font-weight:850;white-space:nowrap}
.chapter-film video{display:block;width:100%;aspect-ratio:15/8;object-fit:cover;border:0;border-radius:.75em;background:#10283c;box-shadow:inset 0 0 0 .12em #17324d}
.film-finish-page .compact-can-do{display:grid;grid-template-columns:auto 1fr 1fr;align-items:center;gap:.5em;width:94%;padding:.5em .75em}
.film-finish-page .compact-can-do h2{font-size:.82em;white-space:nowrap}
.film-finish-page .compact-can-do p{display:flex;align-items:center;gap:.4em;margin:0;font-size:.68em}
.film-finish-page>footer{font-size:1em}