:root {
  color-scheme: light;
  --bg: #f6f8f5;
  --surface: #ffffff;
  --ink: #142b32;
  --subtle: #53656a;
  --muted: #69797c;
  --teal: #0d766b;
  --teal-strong: #075b57;
  --teal-soft: #e8f6f0;
  --orange: #dc9855;
  --border: #dbe5e2;
  --shadow: 0 18px 55px rgba(19, 44, 48, .07);
  --radius: 22px;
  font-family: "Segoe UI", Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
/* Avoid scrolling animations that can leave restored keyboard focus temporarily offscreen. */
html { scroll-behavior: auto; }
body { min-width: 280px; min-height: 100vh; margin: 0; background: var(--bg); color: var(--ink); line-height: 1.5; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
button:disabled { cursor: default; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #d99136; outline-offset: 4px; }
.shell { max-width: 1170px; width: calc(100% - 72px); margin-inline: auto; }
.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
.skip-link { position: absolute; z-index: 100; top: -90px; left: 12px; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 10px; }
.skip-link:focus { top: 12px; }
.site-header { border-bottom: 1px solid var(--border); background: rgba(255,255,255,.91); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 92px; }
.brand { display: inline-flex; align-items: center; gap: 13px; flex-shrink: 0; }
.brand-symbol { display: grid; grid-template-columns: repeat(2, 9px); gap: 4px; align-content: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; background: #123e46; transform: rotate(-4deg); }
.brand-symbol span { width: 9px; height: 9px; border-radius: 3px; background: #93e1c5; }
.brand-symbol span:nth-child(2) { background: #fff; }
.brand-symbol span:nth-child(3) { background: #f3b975; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.25; }
.brand-copy strong { font-size: 1.05rem; letter-spacing: -.035em; }
.brand-copy small { font-size: .58rem; color: #536a65; font-weight: 800; letter-spacing: .095em; margin-top: 5px; }
.site-nav { display: flex; align-items: center; gap: 5px; }
.site-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 9px 15px; border-radius: 12px; font-size: .83rem; font-weight: 700; color: #516566; white-space: nowrap; }
.site-nav a:hover { background: #eef5f2; color: var(--ink); }
.site-nav a[aria-current=page] { color: var(--teal-strong); background: #e4f4ec; }
.main-shell { padding-top: 38px; padding-bottom: 62px; min-height: calc(100vh - 178px); }
.site-footer { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 26px; padding-bottom: 28px; color: #536963; font-size: .77rem; }
.loading { min-height: 40vh; display: grid; place-items: center; color: var(--subtle); font-weight: 650; }
.hero { border-radius: 30px; min-height: 360px; background: #123e46; color: #fff; padding: 55px 62px; overflow: hidden; display: grid; grid-template-columns: 1.1fr .9fr; position: relative; }
.hero::after { content: ""; position: absolute; width: 520px; height: 520px; right: -175px; top: -230px; border: 1px solid rgba(255,255,255,.10); border-radius: 50%; pointer-events: none; }
.hero-content { position: relative; z-index: 2; max-width: 670px; }
.kicker { font-size: .68rem; letter-spacing: .18em; color: #a6e8d4; font-weight: 800; }
.hero-title { font-size: clamp(2.1rem, 3.9vw, 3.6rem); font-weight: 800; letter-spacing: -.065em; line-height: 1.12; margin: 23px 0 0; }
.hero-subtitle { font-size: clamp(1.55rem, 2.6vw, 2.3rem); font-weight: 500; letter-spacing: -.05em; line-height: 1.2; color: #a7e3d0; margin: 4px 0 0; }
.hero-description { font-size: .99rem; color: #d5e9e4; line-height: 1.7; max-width: 510px; margin: 21px 0 26px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; align-items: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 13px; min-height: 48px; border: 1px solid transparent; padding: 11px 20px; font-size: .91rem; line-height: 1.3; font-weight: 750; transition: transform .16s ease, background .16s ease, border-color .16s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: #0e7869; color: #fff; border-color: #0e7869; }
.btn-primary:hover { background: #09675d; }
.btn-quiet { background: #fff; color: #214a4a; border-color: var(--border); }
.btn-quiet:hover { background: #edf6f1; }
.hero .btn-primary { color: #073c3d; background: #a6e6c7; border-color: #a6e6c7; }
.hero .btn-primary:hover { background: #c2f2de; }
.hero .btn-quiet { color: #f1faf8; background: transparent; border-color: rgba(255,255,255,.29); }
.hero .btn-quiet:hover { background: rgba(255,255,255,.10); }
.hero-art { position: relative; min-height: 250px; }
.art-circle { position: absolute; border-radius: 50%; background: #36766f; }
.circle-one { width: 190px; height: 190px; top: -25px; left: 18%; opacity: .32; }
.circle-two { width: 280px; height: 280px; top: 60px; left: 45%; opacity: .2; }
.art-dash { position: absolute; width: 94px; height: 94px; border-radius: 50%; border: 16px solid #d49b59; opacity: .65; }
.dash-one { top: 3px; right: 4px; }
.dash-two { bottom: -50px; left: 2px; width: 55px; height: 55px; border-width: 11px; border-color: #8ee2bb; }
.floating-card { position: absolute; display: flex; flex-direction: column; background: #fff; border-radius: 18px; padding: 22px 24px; box-shadow: 0 21px 50px rgba(0,0,0,.14); color: var(--ink); }
.art-back { width: 225px; left: 16%; top: 22px; min-height: 142px; transform: rotate(-10deg); opacity: .88; }
.art-front { width: 260px; top: 88px; right: 0%; transform: rotate(7deg); min-height: 180px; }
.art-label { font-size: .69rem; color: var(--teal); letter-spacing: .11em; font-weight: 800; }
.art-word { font-size: 1.45rem; font-weight: 800; margin: 16px 0 3px; letter-spacing: -.05em; }
.art-rule { width: 100%; height: 1px; background: var(--border); margin: 10px 0; }
.art-sentence { font-size: .81rem; color: var(--subtle); }
.section { margin-top: 39px; }
.section-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.eyebrow, .small-caps { color: var(--teal); font-size: .67rem; letter-spacing: .13em; font-weight: 800; }
.section-title { margin: 5px 0 0; font-size: 1.65rem; letter-spacing: -.055em; line-height: 1.22; }
.section-note { margin: 0 0 3px; font-size: .84rem; color: var(--muted); }
.topic-picker { border: 1px solid var(--border); background: var(--surface); border-radius: 18px; padding: 17px 19px 19px; }
.topic-eyebrow { margin: 0 0 11px; color: var(--subtle); }
.topic-choices { display: flex; flex-wrap: wrap; gap: 9px; }
.topic-option { display: inline-flex; align-items: center; justify-content: center; gap: 11px; border: 1px solid #d8e5e0; background: #fff; color: #405a5d; min-height: 44px; border-radius: 12px; padding: 9px 15px; font-size: .85rem; font-weight: 750; transition: background .16s; }
.topic-option:hover { background: #edf5f1; }
.topic-option.selected { background: #e0f2ea; border-color: #53a48a; color: #075e55; box-shadow: inset 0 0 0 1px #53a48a; }
.topic-count { background: #edf3f0; border-radius: 7px; min-width: 28px; text-align: center; padding: 2px 6px; color: #426358; font-size: .69rem; font-weight: 800; }
.topic-option.selected .topic-count { background: #bce3d2; color: #125e56; }
.games-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.game-card { background: #fff; border: 1px solid var(--border); border-radius: 21px; display: flex; flex-direction: column; min-height: 244px; padding: 24px 25px 20px; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.game-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #9dc3b5; }
.game-card-top, .game-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.game-number { font-size: .68rem; letter-spacing: .1em; color: var(--teal); font-weight: 800; }
.game-icon { font-family: Georgia, serif; width: 53px; height: 53px; border-radius: 15px; display: grid; place-items: center; background: #eaf6ef; font-size: 2.1rem; font-weight: 600; color: #19796c; }
.game-card-title { font-size: 1.3rem; letter-spacing: -.04em; margin: 20px 0 6px; }
.game-card-description { color: var(--subtle); font-size: .85rem; line-height: 1.65; margin: 0 0 20px; }
.game-card-foot { border-top: 1px solid #eef1ef; margin-top: auto; padding-top: 15px; font-size: .73rem; color: var(--muted); font-weight: 700; }
.game-card-foot .icon-mark { font-size: 1.15rem; color: var(--teal); }
.bottom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; margin-top: 35px; }
.panel { padding: 27px 30px; border: 1px solid var(--border); border-radius: 21px; background: #fff; }
.panel-title { margin: 5px 0 16px; font-size: 1.3rem; letter-spacing: -.04em; }
.mastery-wrap { padding: 6px 0 12px; }
.mastery-head, .mastery-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mastery-label { color: #315b52; font-weight: 800; font-size: .78rem; }
.mastery-foot { font-size: .72rem; color: var(--muted); }
progress { display: block; appearance: none; -webkit-appearance: none; width: 100%; height: 10px; overflow: hidden; border: 0; border-radius: 30px; margin: 11px 0 8px; background: #e4ece8; }
progress::-webkit-progress-bar { background: #e4ece8; border-radius: 30px; }
progress::-webkit-progress-value { border-radius: 30px; background: #198775; }
progress::-moz-progress-bar { border-radius: 30px; background: #198775; }
.mastery-explainer { color: var(--subtle); font-size: .76rem; margin: 0 0 7px; }
.summary-numbers { display: flex; gap: 36px; margin: 11px 0 9px; }
.stat-number { font-size: 1.8rem; letter-spacing: -.05em; margin: 0; }
.stat-label { font-size: .72rem; color: var(--muted); margin: -1px 0 0; }
.text-button { background: transparent; border: 0; color: var(--teal-strong); text-decoration: underline; text-underline-offset: 3px; padding: 8px 0; font-size: .78rem; font-weight: 700; min-height: 44px; }
.text-button:hover { color: var(--ink); }
.exam-panel { background: #f0f7f3; border-color: #d5e7db; }
.exam-quote { font-size: 1.4rem; font-weight: 800; letter-spacing: -.04em; color: #0f675e; margin: 17px 0 9px; }
.exam-description { font-size: .88rem; color: #375850; line-height: 1.62; margin: 0; }
.exam-caveat { font-size: .75rem; color: #647971; line-height: 1.65; margin: 11px 0 0; }
.storage-notice { color: #834515; background: #fff7ea; padding: 12px 17px; border: 1px solid #ecd4b0; border-radius: 12px; font-size: .82rem; }
.activity-page { max-width: 940px; margin-inline: auto; }
.back-link { display: inline-flex; align-items: center; min-height: 43px; font-size: .8rem; font-weight: 700; color: var(--teal-strong); }
.back-link:hover { text-decoration: underline; }
.activity-intro { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 12px 0 25px; }
.activity-title { font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -.07em; margin: 5px 0 7px; line-height: 1.15; }
.activity-description { color: var(--subtle); font-size: .9rem; margin: 0; }
.activity-topic { padding: 8px 13px; flex: 0 0 auto; border-radius: 10px; color: #386c60; background: #e5f4eb; font-size: .76rem; font-weight: 750; }
.activity-top .topic-picker { padding: 12px 16px 14px; }
.activity-top .topic-choices { gap: 7px; }
.activity-top .topic-eyebrow { margin-bottom: 7px; }
.activity-top .topic-option { padding: 7px 12px; }
.round-controls { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin: 27px 0 20px; }
.round-progress { width: min(100%, 620px); }
.round-progress progress { height: 7px; margin-top: 8px; }
.round-head { display: flex; justify-content: space-between; }
.round-caption { color: var(--subtle); font-size: .78rem; font-weight: 750; }
.btn-small { min-height: 43px; white-space: nowrap; font-size: .77rem; padding: 8px 12px; }
.flash-area { max-width: 800px; margin: 20px auto; }
.flashcard { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 20px; border: 1px solid #b6d7c7; border-radius: 22px; background: #e8f5ee; color: #103a37; width: 100%; text-align: left; min-height: 260px; padding: clamp(25px, 4vw, 44px); box-shadow: 0 15px 37px rgba(29, 90, 74, .07); }
.flashcard:hover { background: #e1f1e8; }
.flash-overline { font-size: .68rem; letter-spacing: .14em; font-weight: 850; color: #317f6a; }
.flash-front { font-size: clamp(1.45rem, 3vw, 2.2rem); line-height: 1.4; max-width: 690px; font-weight: 750; letter-spacing: -.035em; }
.flash-reveal-label { font-size: .77rem; font-weight: 750; color: #457b6d; }
.flash-answer { border: 1px solid #d7e3dc; border-top: 0; border-radius: 0 0 20px 20px; padding: 27px 34px 31px; background: #fff; margin: -12px 12px 0; }
.answer-main { font-size: 1.23rem; line-height: 1.55; font-weight: 700; margin: 11px 0 20px; letter-spacing: -.02em; }
.phrase-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 14px 0 19px; }
.detail-label { font-size: .73rem; color: #487268; font-weight: 800; }
.phrase-chip { display: inline-block; background: #ecf6f0; color: #216455; border: 1px solid #d1e9d9; border-radius: 8px; padding: 5px 8px; font-size: .77rem; font-weight: 650; }
.flash-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; margin-top: 14px; }
.flash-detail-item { border-top: 1px solid var(--border); padding-top: 13px; }
.flash-detail-item p { margin: 8px 0 0; color: var(--subtle); font-size: .86rem; line-height: 1.6; }
.grade-wrap { margin-top: 27px; }
.grade-prompt { text-align: center; font-size: .87rem; color: var(--subtle); font-weight: 650; }
.grade-options { display: flex; justify-content: center; gap: 11px; flex-wrap: wrap; }
.btn-grade { min-width: 125px; }
.btn-again { background: #fff2ed; color: #8c4234; border-color: #efcfc8; }
.btn-nearly { background: #fff6e3; color: #79571a; border-color: #efdfba; }
.btn-know { background: #d9f2e6; color: #0f644e; border-color: #abe1c3; }
.btn-grade:hover { filter: brightness(.96); }
.card-undertext { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 17px 0; color: var(--muted); }
.card-undertext p { font-size: .82rem; margin: 0; }
.activity-bottom { display: flex; justify-content: flex-end; }
.quiet-tag { border: 1px solid var(--border); color: var(--subtle); padding: 8px 11px; border-radius: 11px; font-weight: 700; font-size: .77rem; }
.game-instructions { color: var(--subtle); font-size: .86rem; margin: 18px 0 15px; }
.match-columns { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 15px; align-items: start; }
.match-column { display: flex; flex-direction: column; gap: 11px; }
.match-column-label { margin: 3px 3px 5px; color: var(--subtle); letter-spacing: .08em; text-transform: uppercase; font-size: .73rem; }
.match-tile { width: 100%; text-align: left; min-height: 66px; border-radius: 14px; padding: 17px 19px; border: 1px solid #d3e2dc; background: #fff; font-size: .88rem; line-height: 1.48; color: var(--ink); transition: background .15s, border-color .15s; }
.term-tile { font-weight: 800; background: #edf8f2; }
.match-tile:hover { border-color: #459881; background: #eef8f3; }
.match-tile.is-selected { color: #fff; background: #0f7669; border-color: #0f7669; box-shadow: 0 3px 0 rgba(0,0,0,.08); }
.inline-feedback { display: flex; align-items: flex-start; gap: 12px; border-radius: 14px; padding: 16px 19px; margin-top: 20px; border: 1px solid; font-size: .87rem; line-height: 1.55; }
.inline-feedback p { margin: 2px 0 0; }
.inline-feedback .icon-mark { font-size: 1.2rem; font-weight: 900; width: 20px; flex: 0 0 20px; }
.inline-feedback.correct { color: #175e4c; background: #e4f5ed; border-color: #bee3d2; }
.inline-feedback.incorrect { color: #80502a; background: #fff6e9; border-color: #f0d6b6; }
.cloze-panel { border: 1px solid var(--border); background: white; padding: clamp(24px, 4vw, 42px); border-radius: 24px; }
.cloze-title { font-size: 1.42rem; margin: 9px 0 26px; letter-spacing: -.04em; }
.cloze-sentence { background: #f1f7f3; padding: clamp(18px, 3vw, 28px); border-radius: 14px; border-left: 5px solid #288a78; line-height: 1.9; font-size: clamp(1.03rem, 2.1vw, 1.37rem); font-weight: 700; }
.cloze-blank { white-space: normal; display: inline; color: #095c53; padding: 3px 5px; border-bottom: 2px dashed #319384; }
.choose-note { font-size: .8rem; color: var(--muted); font-weight: 700; margin-top: 27px; }
.cloze-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.option-button { text-align: left; min-height: 56px; width: 100%; border: 1px solid #d3e2dc; border-radius: 13px; padding: 13px 18px; font-weight: 750; font-size: .91rem; color: #1d4747; background: #fff; }
.option-button:not(:disabled):hover { border-color: #298e76; background: #eef8f1; }
.option-button:disabled { opacity: 1; color: #5e7671; }
.option-button.is-correct { background: #d9f5e7; border-color: #60ab83; color: #0c6047; }
.option-button.is-incorrect { background: #fff0e8; border-color: #d8a28b; color: #8a4032; }
.feedback-heading { font-size: .95rem; margin: 0; }
.next-row { display: flex; justify-content: flex-end; margin-top: 24px; }
.completed-screen { background: #fff; border-radius: 23px; border: 1px solid var(--border); margin-top: 30px; padding: 45px; text-align: center; box-shadow: var(--shadow); }
.completion-badge { display: inline-flex; align-items: center; gap: 8px; color: #0c6f59; background: #e7f6ec; border-radius: 30px; padding: 8px 14px; font-size: .83rem; font-weight: 800; }
.completion-badge .icon-mark { font-size: 1.3rem; }
.completion-title { letter-spacing: -.05em; font-size: clamp(1.8rem, 3.2vw, 2.5rem); margin: 20px 0 8px; }
.completion-description { color: var(--subtle); margin: 0; }
.completion-score { font-weight: 700; margin-top: 14px; }
.completed-screen .mastery-wrap { max-width: 420px; margin: 20px auto; text-align: left; }
.complete-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 25px; }
.error-panel { border-radius: var(--radius); background: #fff; border: 1px solid var(--border); padding: 32px; }
.error-panel p { color: var(--subtle); }
@media (max-width: 980px) {
  .shell { width: calc(100% - 40px); }
  .hero { padding: 42px 40px; }
  .hero-art { transform: scale(.83); transform-origin: center; }
  .site-nav a { padding-inline: 10px; }
}
@media (max-width: 800px) {
  /* Retired Pass 1's horizontal-scroll navigation; the grouped header owns this layout. */
  .hero { grid-template-columns: 1fr; }
  .hero-art { display: none; }
  .hero-description { max-width: 680px; }
  .games-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bottom-grid { grid-template-columns: 1fr; }
}
@media (max-width: 580px) {
  .shell { width: calc(100% - 28px); }
  .main-shell { padding-top: 19px; padding-bottom: 40px; }
  .brand-symbol { width: 37px; height: 37px; border-radius: 12px; }
  .brand-copy strong { font-size: .96rem; }
  .brand-copy small { letter-spacing: .045em; font-size: .53rem; }
  .hero { min-height: 0; padding: 36px 26px; border-radius: 21px; }
  .hero-title { margin-top: 17px; }
  .hero-description { margin-top: 17px; font-size: .9rem; }
  .hero-actions { align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .section { margin-top: 27px; }
  .section-top { align-items: flex-start; flex-direction: column; gap: 4px; }
  .section-title { font-size: 1.39rem; }
  .topic-picker { padding: 15px 14px; }
  .topic-choices { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }
  .topic-option { font-size: .78rem; padding: 8px 7px; justify-content: space-between; }
  .topic-option:last-child { grid-column: 1 / -1; }
  .games-grid { grid-template-columns: 1fr; }
  .game-card { min-height: 180px; padding: 20px 22px; }
  .game-card-title { margin: 10px 0 5px; }
  .panel { padding: 24px 22px; }
  .activity-intro { align-items: flex-start; flex-direction: column; gap: 12px; }
  .activity-top .topic-picker { padding: 12px; }
  .activity-top .topic-option { min-width: 0; }
  .round-controls { align-items: flex-start; flex-direction: column; gap: 12px; margin: 21px 0; }
  .round-progress { width: 100%; }
  .flashcard { min-height: 230px; padding: 24px; }
  .flash-answer { padding: 22px; margin: -10px 6px 0; }
  .flash-detail { grid-template-columns: 1fr; gap: 14px; }
  .btn-grade { min-width: 0; flex: 1; padding-inline: 10px; }
  .grade-options { gap: 7px; }
  .match-columns { grid-template-columns: 1fr; gap: 25px; }
  .match-column { gap: 8px; }
  .match-tile { min-height: 54px; padding: 13px 15px; }
  .cloze-panel { padding: 22px 17px; }
  .cloze-options { gap: 8px; }
  .option-button { padding: 12px; min-height: 56px; }
  .completed-screen { padding: 33px 19px; }
  .site-footer { font-size: .73rem; }
}
@media (max-width: 350px) {
  .hero { padding: 30px 20px; }
  .topic-choices { grid-template-columns: 1fr; }
  .topic-option:last-child { grid-column: auto; }
  .cloze-options { grid-template-columns: 1fr; }
  .grade-options .btn { flex-basis: 100%; }
  .brand-copy small { font-size: .48rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
@media print {
  body { background: #fff; } .site-nav, .hero-art, .site-footer, .grade-wrap, .activity-bottom { display: none !important; }
  .shell { width: 95%; }
  .hero, .panel, .game-card { box-shadow: none; break-inside: avoid; }
}

/* Pass 2: accessible choice-based classification and scenario games */
.activity-scope {
  border: 1px solid #d2e8df;
  background: #e9f5ef;
  color: #355f52;
  padding: 12px 16px;
  border-radius: 13px;
  font-size: .81rem;
  line-height: 1.55;
  font-weight: 650;
}
.game-settings {
  display: flex;
  gap: 17px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
  padding: 17px 20px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 17px;
}
.game-settings-label {
  color: #385c58;
  font-size: .89rem;
  font-weight: 750;
}
.game-select {
  font: inherit;
  font-size: .88rem;
  font-weight: 650;
  color: var(--ink);
  background: #f5f9f7;
  border: 1px solid #c4d8d0;
  border-radius: 11px;
  padding: 12px 38px 12px 14px;
  min-width: 220px;
  min-height: 46px;
  max-width: 100%;
}
.game-select:hover { border-color: #5c9f8d; }
.classification-panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: clamp(22px, 4vw, 38px);
}
.classification-title {
  margin: 9px 0 24px;
  font-size: clamp(1.35rem, 2.5vw, 1.7rem);
  letter-spacing: -.04em;
  line-height: 1.3;
}
.classification-statement {
  background: #edf6f1;
  border-left: 5px solid #27897a;
  border-radius: 12px;
  padding: clamp(20px, 3vw, 28px);
  color: #153b37;
  font-size: clamp(1.05rem, 2vw, 1.27rem);
  line-height: 1.65;
  font-weight: 670;
  overflow-wrap: anywhere;
}
.classification-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
.classification-choice {
  min-height: 61px;
  padding: 14px 16px;
  text-align: center;
  line-height: 1.42;
  overflow-wrap: anywhere;
}
.classification-choice:not(:disabled):focus-visible { position: relative; z-index: 1; }
.method-options { grid-template-columns: repeat(2, minmax(0,1fr)); }
.method-options .classification-choice:last-child { grid-column: 1 / -1; }
.classification-feedback {
  margin-top: 24px;
  scroll-margin-top: 25px;
}
.classification-feedback .feedback-heading { font-size: 1.02rem; }
.classification-feedback p { font-size: .88rem; line-height: 1.65; margin: 8px 0 0; }
.classification-feedback .feedback-contrast {
  border-top: 1px solid rgba(48,81,70,.15);
  margin-top: 13px;
  padding-top: 13px;
  color: inherit;
}
@media (max-width: 580px) {
  .game-settings { align-items: stretch; flex-direction: column; gap: 8px; padding: 14px; }
  .game-select { width: 100%; min-width: 0; }
  .classification-panel { padding: 21px 16px; }
  .classification-statement { padding: 18px 15px; }
  .classification-options { gap: 9px; }
  .classification-choice { min-height: 62px; font-size: .81rem; padding: 12px 9px; }
  .method-options { grid-template-columns: 1fr; }
  .method-options .classification-choice:last-child { grid-column: auto; }
  .classification-feedback { padding: 14px; }
}
@media (max-width: 350px) {
  .classification-options { grid-template-columns: 1fr; }
}


/* Pass 3: typed retrieval, explicit progressive modes and a quiet timer. */
.recall-settings { align-items: center; }
.recall-settings .settings-hint { flex-basis: 100%; margin: -7px 0 0; color: var(--subtle); font-size: .8rem; line-height: 1.5; }
.setting-group { display: flex; flex-direction: column; gap: 7px; min-width: min(100%,220px); }
.setting-group .game-select { width: 100%; }
.typed-form { margin-top: 19px; }
.typed-label { display: block; margin: 0 0 8px; font-size: .84rem; font-weight: 750; color: #2d5752; }
.typed-input-row { display: flex; align-items: stretch; flex-wrap: wrap; gap: 11px; }
.typed-input {
  flex: 1 1 240px; min-width: 0; max-width: 100%;
  min-height: 52px; border: 1px solid #abcbbd; border-radius: 13px;
  background: #fff; padding: 12px 16px;
  color: var(--ink); font: inherit; font-size: 1rem; font-weight: 650;
  transition: border-color .18s ease;
}
.typed-input:focus { outline: 3px solid #c1e8dc; outline-offset: 1px; border-color: #15846e; }
.typed-input-row .btn { flex: 0 0 auto; min-width: 145px; }
.hint-area { display: flex; align-items: center; flex-wrap: wrap; gap: 11px; margin-top: 15px; }
.hint-area button:disabled { opacity: .65; }
.hint-text { color: #42675e; font-weight: 700; font-size: .81rem; line-height: 1.5; }
.typed-tools { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.typed-near-miss {
  border: 1px solid #f0d3ae;
  color: #7a4b1c; background: #fff6e7; font-weight: 650;
  padding: 13px 16px; border-radius: 12px; font-size: .86rem; line-height: 1.55;
  margin: 12px 0 0;
}
.typed-feedback { scroll-margin-top: 20px; }
.typed-feedback .feedback-heading { font-size: 1.02rem; }
.typed-feedback p { margin: 8px 0 0; font-size: .87rem; line-height: 1.6; }
.alias-note { font-weight: 700; }
.speed-ready {
  border: 1px solid #cde4db;
  background: linear-gradient(135deg,#ffffff 10%,#ecf7f1 100%);
  border-radius: 23px; padding: clamp(25px,5vw,48px); margin-top: 25px;
}
.speed-ready-title { font-size: clamp(1.6rem,3.2vw,2.2rem); letter-spacing: -.04em; margin: 13px 0; }
.speed-ready-copy { max-width: 590px; margin: 0 0 25px; line-height: 1.7; color: var(--subtle); }
.clock-badge { display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
  padding: 8px 16px; border-radius: 12px; border: 1px solid #b6dccc;
  background: #e6f7ee; color: #145c4e; }
.clock-caption { font-weight: 750; font-size: .68rem; letter-spacing: .05em; }
.clock-value { font-variant-numeric: tabular-nums; font-weight: 850; font-size: 1.55rem; line-height: 1.2; }
.timed-score { gap: 16px; flex-wrap: wrap; width: 100%; }
.recall-panel { border-radius: 23px; border: 1px solid var(--border); background: #fff;
  padding: clamp(23px,4.4vw,43px); }
.recall-panel .eyebrow { display: inline-block; margin-bottom: 9px; }
.recall-panel .typed-form { margin-top: 24px; }
.recall-title { font-size: clamp(1.35rem,2.5vw,1.7rem); margin: 0 0 23px; letter-spacing: -.04em; line-height: 1.32; }
.recall-definition { background: #eef6f2; border-left: 5px solid #238876; border-radius: 14px;
  padding: clamp(20px,3vw,28px); color: #163d37; line-height: 1.68;
  font-size: clamp(1.07rem,2vw,1.29rem); font-weight: 700;
  overflow-wrap: anywhere; }
.recall-instruction { font-size: .84rem; line-height: 1.5; color: var(--subtle); margin: 23px 0 2px; }
.recall-panel .feedback-contrast { border-top: 1px solid rgba(35,86,67,.16); padding-top: 12px; margin-top: 13px; }
.completed-screen .btn + .mastery-wrap { margin-top: 24px; }
@media (max-width: 580px) {
  .recall-settings { align-items: stretch; }
  .settings-hint { margin-top: 0 !important; }
  .setting-group { min-width: 0; width: 100%; }
  .typed-input-row { flex-direction: column; align-items: stretch; }
  .typed-input { flex: auto; width: 100%; }
  .typed-input-row .btn { width: 100%; }
  .clock-badge { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
  .clock-value { font-size: 1.35rem; }
  .recall-panel { padding: 22px 16px; }
  .recall-definition { padding: 19px 16px; }
}
@media print {
  .speed-settings, .clock-badge, .typed-form, .hint-area, .typed-tools { display: none !important; }
}


/* Pass 4 — examination skills */
.exam-workspace{background:#fff;border:1px solid var(--border);border-radius:22px;margin-top:20px;padding:clamp(20px,4vw,42px)}
.exam-heading{font-size:clamp(1.4rem,3vw,2rem);line-height:1.32;letter-spacing:-.035em;margin:10px 0 18px}
.exam-help{color:var(--subtle);font-size:.88rem;line-height:1.7}
.exam-scenario{background:#edf7f1;border-left:4px solid #278d7c;border-radius:12px;padding:20px;font-size:1.03rem;line-height:1.75;color:#204a42;font-weight:650}
.exam-step-list{display:grid;gap:10px;padding:0;list-style:none}
.exam-step{display:flex;align-items:center;gap:12px;background:#fbfdfc;border:1px solid #d3e5dc;border-radius:14px;padding:12px}
.exam-step-number{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:#e4f4e9;color:#17694d;font-weight:800}
.exam-step-copy{flex:1;margin:0;line-height:1.6;font-size:.92rem;overflow-wrap:anywhere}
.exam-step-actions{display:flex;gap:7px}
.exam-arrow{min-width:44px;min-height:44px;border:1px solid #b5d8c8;border-radius:10px;background:#edf8f1;color:#206751;font-size:1.25rem;cursor:pointer}
.exam-arrow:disabled{opacity:.32;cursor:default}
.exam-arrow:focus-visible,.exam-choice:focus-within{outline:3px solid #81cdb7;outline-offset:2px}
.exam-buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.exam-model-heading{font-size:1.05rem;color:#1c594b;margin-top:24px}
.exam-model-list{line-height:1.72;display:grid;gap:10px;padding-left:24px}
.exam-warning{border-left:3px solid #c7a264;background:#fff6e5;color:#80502a;padding:12px 16px;border-radius:9px;line-height:1.65}
.exam-fieldset{min-width:0;border:0;padding:0;margin:25px 0}
.exam-fieldset legend{font-weight:800;color:#255649;margin-bottom:10px}
.exam-choice{display:flex;align-items:flex-start;gap:11px;border:1px solid #d5e6dd;border-radius:12px;background:#fbfdfc;margin:8px 0;padding:13px 15px;cursor:pointer;line-height:1.55;font-size:.9rem;overflow-wrap:anywhere}
.exam-choice:has(input:checked){background:#e9f6ef;border-color:#5aac90}
.exam-choice input{accent-color:#187b64;min-width:20px;width:20px;height:20px;margin:2px 0 0}
.exam-choice:has(input:disabled){cursor:default}
#reason-written{box-sizing:border-box;display:block;width:100%;max-width:100%;min-height:110px;resize:vertical;font:inherit;line-height:1.6;padding:13px 15px;border:1px solid #b4d4c6;border-radius:12px}
.exam-checklist{line-height:1.75;padding-left:24px;font-size:.92rem}
.exam-model{line-height:1.75;color:#245449}
.exam-draft{white-space:pre-wrap;overflow-wrap:anywhere;background:#f3f8f5;padding:15px;border-radius:10px;line-height:1.7}
@media(max-width:580px){
 .exam-workspace{padding:20px 15px}.exam-step{flex-wrap:wrap;gap:9px}
 .exam-step-copy{flex-basis:calc(100% - 50px)}.exam-step-actions{margin-left:44px}
 .exam-buttons .btn{width:100%}.exam-choice{padding:12px 10px}
}
@media print{.exam-arrow,.exam-buttons,.exam-fieldset input,#reason-written{display:none!important}}

/* Pass 5 — Exam Lab: exam practice without intrusive gamification. */
.sim-page{max-width:990px}
.sim-landing{border:1px solid #d3e6dd;border-radius:24px;background:linear-gradient(140deg,#fff 52%,#eaf6ef);padding:clamp(22px,4.5vw,43px);margin-top:25px}
.sim-landing-title{font-size:clamp(1.8rem,4vw,2.55rem);letter-spacing:-.045em;margin:10px 0}
.sim-lead{max-width:750px;color:#365d55;font-size:1rem;line-height:1.7}
.sim-honesty{font-size:.86rem;color:#4a6a60;line-height:1.6;max-width:750px}
.sim-paper-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-top:28px}
.sim-choice{background:#fff;border:1px solid #d8e7e0;border-radius:17px;padding:20px 17px;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.sim-choice-count{font-size:.67rem;letter-spacing:.1em;color:#277260;font-weight:800}
.sim-choice-title{font-size:1.15rem;letter-spacing:-.025em;margin:12px 0 6px}
.sim-choice p{font-size:.84rem;line-height:1.65;color:var(--subtle);flex:1;margin:0 0 20px}
.sim-choice .btn{min-height:47px;width:100%;font-size:.82rem;padding:11px 8px}
.sim-landing-bottom{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin-top:18px}
.sim-resume,.sim-target-panel{min-width:0;background:#fff;border:1px solid var(--border);border-radius:20px;padding:25px}
.sim-panel-heading{font-size:1.08rem;letter-spacing:-.025em;margin:6px 0 13px}
.sim-resume p,.sim-target-panel p{font-size:.85rem;color:var(--subtle);line-height:1.65}
.sim-inline-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:15px}
.sim-target-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.sim-target-tag{font-size:.7rem;color:#386459;background:#e9f5ed;border:1px solid #d4e6d9;border-radius:9px;padding:6px 10px}
.sim-question{background:#fff;border:1px solid var(--border);border-radius:22px;padding:clamp(21px,4vw,43px);margin-top:20px}
.sim-question-title{font-size:clamp(1.4rem,2.8vw,2rem);letter-spacing:-.04em;margin:10px 0 22px;line-height:1.35}
.sim-context{color:#193e3a;background:#edf7f1;border-left:4px solid #288a77;border-radius:12px;padding:clamp(16px,2.8vw,22px);font-size:1.02rem;line-height:1.75;font-weight:650}
.sim-task{font-weight:760;color:#24514a;line-height:1.66;margin:18px 0 23px}
.sim-data-line{font-size:.9rem;color:#4b6762;font-weight:750;margin:16px 0}
.sim-number-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:15px 0}
.sim-number-row{border:1px solid #d6e5dd;border-radius:14px;padding:15px 17px;min-width:0;background:#fcfefd}
.sim-field-label{display:block;color:#245346;font-weight:760;font-size:.92rem}
.sim-field-help{font-size:.78rem;color:#657b75;margin:6px 0 12px;line-height:1.5}
.sim-number-input{display:block;width:100%;max-width:100%;border:1px solid #a7ccbc;border-radius:11px;padding:12px 14px;font-size:1rem;font-family:inherit;color:var(--ink);background:#fff;min-height:50px}
.sim-number-input:focus,.sim-draft-input:focus{outline:3px solid #b5dfd1;outline-offset:1px;border-color:#18846d}
.sim-form-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:21px}
.sim-validation:not(:empty){color:#874023;background:#fff3e5;border:1px solid #efd1a4;padding:11px 14px;border-radius:9px;margin:12px 0;font-size:.9rem}
.sim-help{font-size:.85rem;color:var(--subtle);line-height:1.7}
.sim-feedback .inline-feedback{margin-top:24px}
.sim-worked-list{list-style:none;padding:0;display:grid;gap:10px}
.sim-worked-row{display:flex;align-items:flex-start;gap:15px;border:1px solid #e1e9e5;border-radius:12px;padding:14px;line-height:1.6}
.sim-worked-row p{font-size:.87rem;color:#46625a;margin:6px 0}
.sim-worked-title{font-size:.96rem;margin:0}
.sim-worked-status{flex:0 0 94px;font-weight:760;color:#35745e;font-size:.75rem;padding-top:4px}
.sim-written-work{margin-top:23px}
.sim-draft-input{width:100%;max-width:100%;min-height:175px;padding:15px;border:1px solid #a8cabc;border-radius:13px;font:inherit;line-height:1.75;resize:vertical;display:block}
.sim-written-review .inline-feedback{margin-bottom:23px}
.sim-model-steps{line-height:1.75;display:grid;gap:12px;padding-left:24px;color:#284e47;font-size:.9rem}
.sim-model-text{line-height:1.85;color:#2b574b;white-space:pre-wrap}
.sim-model-extra,.sim-related,.sim-conditional{font-size:.87rem;line-height:1.7;border-left:3px solid #8db9a7;background:#f2f8f4;border-radius:8px;padding:12px 15px}
.sim-conditional{background:#fff8ea;border-color:#cda76a}
.sim-draft-compare{border:1px solid #d8e4de;border-radius:12px;padding:16px 18px;margin:18px 0}
.sim-preserved-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.86rem;line-height:1.7}
.sim-checklist{margin:22px 0;border:0;padding:0;min-width:0}
.sim-checklist legend{font-weight:800;color:#1c5c50;font-size:.98rem;margin-bottom:13px}
.sim-check-row{display:flex;align-items:flex-start;gap:12px;padding:12px 15px;border:1px solid #dce8e1;border-radius:11px;background:#fcfdfc;font-size:.86rem;line-height:1.62;margin:8px 0;cursor:pointer}
.sim-check-row:has(input:checked){background:#ebf6ef;border-color:#a3ceba}
.sim-check-row input{accent-color:#187e69;flex:0 0 20px;width:20px;height:20px;margin:2px 0 0}
.sim-flag{margin-top:16px;background:#fff9ed!important;border-color:#e8d7b5!important}
.sim-paper-bottom{margin-top:21px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.sim-report-head{background:#fff;border:1px solid var(--border);border-radius:22px;padding:clamp(22px,4vw,40px);margin-top:20px}
.sim-report-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:25px}
.sim-metric{background:#f1f7f4;border:1px solid #d9e7df;border-radius:14px;padding:18px 12px;display:flex;flex-direction:column;gap:10px}
.sim-metric-value{font-variant-numeric:tabular-nums;font-size:clamp(1.4rem,2.6vw,2rem);font-weight:840;color:#176b59}
.sim-metric-label{font-size:.75rem;line-height:1.55;color:#496e61}
.sim-report-detail{margin-top:25px}
.sim-report-row{background:#fff;border:1px solid var(--border);border-radius:15px;padding:20px;margin:12px 0;overflow-wrap:anywhere}
.sim-report-row-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.sim-report-question{font-size:1rem;margin:0}
.sim-report-row p{font-size:.86rem;line-height:1.6;color:var(--subtle)}
.sim-report-result{font-weight:800!important;color:#236b5a!important}
.sim-report-key{margin:5px 0;font-variant-numeric:tabular-nums}
.sim-revision-link{display:inline-flex;color:#116c60;text-decoration:underline;text-underline-offset:3px;font-weight:750;font-size:.86rem;min-height:40px;align-items:center}
.sim-report-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:25px}
@media(max-width:800px){.sim-paper-choices{grid-template-columns:1fr 1fr}.sim-paper-choices>.sim-choice:last-child{grid-column:1/-1}}
@media(max-width:580px){
 .sim-landing{padding:21px 16px}
 .sim-paper-choices,.sim-landing-bottom,.sim-number-rows,.sim-report-metrics{grid-template-columns:1fr}
 .sim-paper-choices>.sim-choice:last-child{grid-column:auto}
 .sim-choice{padding:17px}.sim-resume,.sim-target-panel{padding:20px 16px}
 .sim-question{padding:20px 15px}.sim-context{padding:16px 14px}
 .sim-form-actions{flex-direction:column}.sim-form-actions .btn{width:100%}
 .sim-worked-row{flex-direction:column;gap:4px}.sim-worked-status{flex:auto}
 .sim-metric{padding:14px}.sim-report-actions{flex-direction:column}.sim-report-actions .btn{width:100%}
}
@media print{
 @page{margin:14mm}
 body{color:#000;background:#fff}
 .site-header,.site-footer,.activity-top,.sim-report-actions,.sim-revision-link,.sim-paper-bottom{display:none!important}
 .sim-report-head,.sim-report-row{box-shadow:none;border-color:#ccc}
 .sim-report-row{break-inside:avoid}
 .main-shell{padding-top:0;padding-bottom:0}
 .sim-page,.shell{max-width:none!important;width:100%!important}
 .sim-report-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
}


/* Pass 6 — gentle formative hints, honest self-review and private export. */
.sim-hints{margin:19px 0;padding:12px 0;min-width:0;outline-offset:4px}
.sim-hint-heading{font-size:.95rem;color:#245d50;margin:5px 0 12px}
.sim-hint-list{background:#f2f8f5;border-left:3px solid #72b69a;border-radius:8px;padding:13px 20px 13px 34px;font-size:.88rem;line-height:1.75;color:#305d51}
.sim-hint-list li+li{margin-top:8px}
.sim-hint-button{min-height:44px;max-width:100%;white-space:normal}
.sim-check-count{font-size:.85rem;font-weight:750;color:#266454;margin:10px 0}
.sim-export-settings{background:#fff;border:1px solid var(--border);border-radius:17px;padding:20px 24px;margin:24px 0 10px}
.sim-export-choice{display:flex;align-items:flex-start;gap:12px;margin-top:15px;padding:12px 14px;border:1px solid #dae7de;border-radius:11px;line-height:1.65;font-size:.86rem;cursor:pointer}
.sim-export-choice:focus-within{outline:3px solid #88cbb6;outline-offset:2px}
.sim-export-choice input{width:20px;height:20px;min-width:20px;accent-color:#197e6a;margin:2px 0 0}
.sim-report-actions .btn{min-height:44px}
@media(max-width:580px){.sim-hint-list{padding:12px 14px 12px 32px}.sim-export-settings{padding:18px 14px}}
@media print{.sim-export-settings,.sim-hints{display:none!important}}


/* Pass 7 — progressive learning journey and optional classroom feedback */
.learning-journey{scroll-margin-top:20px}
.journey-suggestion{display:flex;justify-content:space-between;align-items:center;gap:20px;
  border:1px solid #bbd9c8;border-radius:19px;padding:24px 26px;background:#e9f6ee}
.journey-suggestion-title{margin:7px 0 4px;font-size:1.25rem;letter-spacing:-.03em;color:#12483e}
.journey-suggestion-text{margin:0;color:#3b6358;font-size:.87rem;line-height:1.65;max-width:650px}
.journey-action{flex-shrink:0;min-height:46px;max-width:100%}
.journey-steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin:15px 0 0}
.journey-step{min-width:0}
.journey-step-link{height:100%;min-width:0;display:flex;flex-direction:column;gap:11px;border:1px solid var(--border);
 background:#fff;border-radius:15px;padding:17px 16px;transition:border-color .15s,background .15s}
.journey-step-link:hover{background:#f2faf6;border-color:#8ebfac}
.journey-step-number{width:27px;height:27px;display:grid;place-items:center;border-radius:50%;
 background:#e3f3e9;color:#146351;font-weight:800;font-size:.78rem}
.journey-step-title{font-size:.94rem;line-height:1.35;letter-spacing:-.02em;margin:0;color:#204c43}
.journey-step-detail{font-size:.79rem;line-height:1.6;color:var(--subtle);margin:6px 0}
.journey-step-cta{font-size:.74rem;color:#17695d;font-weight:750;margin-top:auto;overflow-wrap:anywhere}
.completion-next{max-width:600px;margin:25px auto 8px;padding:22px;border:1px solid #d2e6d9;
 background:#f2f9f5;border-radius:16px}
.completion-next-title{font-size:1.07rem;line-height:1.4;color:#1b5b4e;margin:7px 0}
.completion-next-detail{font-size:.87rem;line-height:1.68;color:var(--subtle);margin:7px 0 16px}
.completion-next .btn{max-width:100%;min-height:44px}
.classroom-feedback{border:1px solid #d2e4dc;border-radius:21px;background:#fff;overflow:hidden}
.classroom-feedback summary{min-height:72px;display:flex;justify-content:space-between;align-items:center;
 gap:14px;cursor:pointer;padding:18px 24px;list-style:none}
.classroom-feedback summary::-webkit-details-marker{display:none}
.classroom-feedback summary::after{content:"+";font-weight:700;font-size:1.5rem;color:#1b6b5b}
.classroom-feedback[open] summary::after{content:"−"}
.classroom-feedback summary:hover{background:#f2f9f5}
.classroom-feedback-label{font-weight:750;color:#1b4c42;font-size:1.01rem}
.classroom-feedback-action{margin-left:auto;font-size:.79rem;color:#3e7464}
.classroom-feedback-content{border-top:1px solid var(--border);padding:22px 25px 26px}
.classroom-feedback-content>p{font-size:.87rem;color:var(--subtle);line-height:1.7;max-width:750px}
.classroom-feedback-privacy{color:#755a30!important}
.classroom-feedback-form{max-width:780px;margin-top:22px}
.classroom-feedback-activity{display:flex;flex-direction:column;gap:7px;margin-bottom:25px}
.classroom-feedback-activity label,.classroom-feedback-comment-label{font-weight:750;font-size:.87rem;color:#244c43}
.classroom-feedback-activity select,.classroom-feedback-form textarea{width:100%;max-width:100%;border:1px solid #a7cbbd;border-radius:11px;
 padding:12px 13px;min-height:48px;background:#fff;font:inherit;color:var(--ink)}
.classroom-feedback-form textarea{display:block;resize:vertical;min-height:88px;line-height:1.65;margin:9px 0 0}
.classroom-feedback-question{border:0;padding:0;margin:21px 0;min-width:0}
.classroom-feedback-question legend{font-size:.89rem;font-weight:750;color:#244c43;margin-bottom:11px}
.classroom-feedback-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.classroom-feedback-choice{display:flex;align-items:center;gap:10px;border:1px solid #d3e6dd;
 padding:12px;background:#fbfefd;border-radius:11px;font-size:.82rem;line-height:1.55;cursor:pointer}
.classroom-feedback-choice:has(input:checked){background:#e5f5ed;border-color:#559d83}
.classroom-feedback-choice:focus-within{outline:3px solid #92ceb9;outline-offset:1px}
.classroom-feedback-choice input{width:19px;height:19px;flex:none;margin:0;accent-color:#187963}
.classroom-feedback-actions{display:flex;align-items:center;flex-wrap:wrap;gap:13px;margin-top:19px}
.classroom-feedback-note,.classroom-feedback-result{color:var(--subtle);font-size:.82rem;line-height:1.65}
.classroom-feedback-result:not(:empty){background:#edf8f2;border:1px solid #c5e1d2;border-radius:11px;padding:12px}
.sim-level-picker{border:0;padding:0;margin:26px 0 0;min-width:0}
.sim-level-picker legend{font-size:.93rem;font-weight:800;color:#205c4e;margin-bottom:12px}
.sim-level-choice{display:flex;align-items:flex-start;gap:11px;padding:13px;border:1px solid #d4e4db;background:#fff;
 border-radius:12px;cursor:pointer;min-width:0}
.sim-level-choice:has(input:checked){border-color:#3f997c;background:#e8f6ee}
.sim-level-choice:focus-within{outline:3px solid #89c9b4;outline-offset:2px}
.sim-level-choice input{flex:0 0 19px;width:19px;height:19px;accent-color:#187d69;margin:2px 0 0}
.sim-level-choice span{display:flex;flex-direction:column;gap:4px;min-width:0}
.sim-level-choice strong{font-size:.86rem;color:#20584d}
.sim-level-choice small{font-size:.73rem;color:#57736c;line-height:1.5}
.sim-level-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sim-level-picker legend{grid-column:1/-1}
.sim-report-coaching{margin-top:26px;padding:19px 21px;background:#f1f8f4;border:1px solid #cde3d5;border-radius:14px}
@media(max-width:900px){.journey-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:580px){
 .journey-suggestion{flex-direction:column;align-items:stretch;padding:20px 17px}
 .journey-action{width:100%}
 .journey-steps,.classroom-feedback-options,.sim-level-picker{grid-template-columns:1fr}
 .journey-step-link{gap:7px;padding:14px 15px}
 .journey-step-cta{margin-top:2px}
 .classroom-feedback summary{padding:18px 16px;gap:9px}
 .classroom-feedback-action{display:none}
 .classroom-feedback-content{padding:18px 15px 22px}
 .classroom-feedback-actions .btn{width:100%}
 .completion-next{padding:18px 14px}
}
@media print{
 .learning-journey,.classroom-feedback-section,.completion-next,.sim-level-picker{display:none!important}
}


/* UI Pass 1 — unified header, legible stage surfaces and simpler homepage.
   Keeps the game-specific styles and all existing activity markup intact. */
:root {
  --bg: #eef3ef;
  --border: #ccdcd3;
  --shadow: 0 14px 32px rgba(18, 55, 48, .10);
}
body { background: var(--bg); }
.site-header {
  position: sticky; top: 0; z-index: 80;
  background: rgba(255,255,255,.97); border-bottom: 1px solid #d1dfd7;
  box-shadow: 0 3px 13px rgba(16,47,44,.045);
}
.header-inner {
  min-height: 78px; gap: 20px; position: relative;
  flex-direction: row; align-items: center; padding-block: 10px;
}
.brand { min-width: 0; }
.brand-copy strong { font-size: 1.05rem; }
.site-nav {
  display: flex; width: auto; min-width: 0; max-width: 100%;
  align-items: center; justify-content: flex-end; gap: 8px;
  position: relative; overflow: visible; margin-left: auto;
  scrollbar-width: auto; overscroll-behavior-x: auto;
}
.site-nav > .nav-primary-link, .activities-trigger {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; border-radius: 12px; padding: 9px 16px;
  color: #344f4c; font-size: .86rem; line-height: 1.3;
  font-weight: 750; white-space: nowrap; cursor: pointer;
}
.site-nav > .nav-primary-link:hover, .activities-trigger:hover {
  background: #e7f2eb; color: #104e42;
}
.site-nav > .nav-primary-link[aria-current="page"],
.activities-menu.is-current > .activities-trigger {
  background: #dcefe5; color: #095d4d;
}
.site-nav > .nav-exam-link {
  color: #0c6657; border: 1px solid #b9d7c8; background: #eff8f3;
}
.site-nav > .nav-exam-link[aria-current="page"] {
  color: #fff; background: #166d5d; border-color: #166d5d;
}
.mobile-menu-toggle { display: none; }
.activities-menu { position: static; flex: 0 0 auto; }
.activities-trigger { list-style: none; gap: 12px; }
.activities-trigger::-webkit-details-marker { display: none; }
.activities-trigger::marker { content: ""; }
.nav-chevron {
  display: inline-block; width: 8px; height: 8px; flex: 0 0 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform .16s ease;
}
.activities-menu[open] > .activities-trigger .nav-chevron {
  transform: rotate(225deg) translate(-2px,-1px);
}
.activities-panel {
  position: absolute; z-index: 90; top: calc(100% + 13px); right: 0;
  width: min(730px, calc(100vw - 44px));
  display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px;
  padding: 15px; background: #fff; border: 1px solid #c3d7cc;
  border-radius: 20px; box-shadow: 0 18px 45px rgba(15,52,46,.17);
}
.nav-group { min-width: 0; border: 1px solid #dce9e1; border-radius: 13px; padding: 15px 12px; background: #f4f9f5; }
.nav-group:nth-child(2) { background: #f1f5fb; border-color: #dce6f0; }
.nav-group:nth-child(3) { background: #fff7ef; border-color: #ebdfcf; }
.nav-group-title { font-size: .91rem; color: #224e41; margin: 0; font-weight: 800; line-height: 1.4; }
.nav-group-description { margin: 4px 0 13px; font-size: .74rem; color: #61776c; line-height: 1.55; }
.nav-group > a {
  display: block; min-height: 40px; white-space: normal; padding: 9px 11px;
  border-radius: 9px; color: #294f45; font-size: .82rem; font-weight: 720;
  line-height: 1.35;
}
.nav-group > a:hover, .nav-group > a[aria-current="page"] {
  background: #dcefe4; color: #0b5948;
}
.nav-group > a[aria-current="page"]::before { content: "• "; }
.main-shell { padding-top: 28px; padding-bottom: 56px; }
#progress-title { scroll-margin-top: 105px; }
.hero {
  min-height: 260px; align-items: center;
  grid-template-columns: minmax(0,1.4fr) minmax(220px,.6fr);
  padding: 35px 44px; border-radius: 24px;
}
.hero::after { width: 330px; height: 330px; right: -150px; top: -175px; }
.hero-title { font-size: clamp(2rem,3.5vw,3rem); margin: 10px 0 0; letter-spacing: -.055em; }
.hero-subtitle { font-size: clamp(1.25rem,2.2vw,1.8rem); }
.hero-description { margin: 13px 0 20px; max-width: 620px; font-size: .93rem; line-height: 1.62; }
.hero-art { min-height: 190px; }
.art-back, .dash-two { display: none; }
.art-front {
  width: 224px; min-height: 145px; top: 14px; right: 6%;
  padding: 16px 19px; transform: rotate(5deg); border-radius: 15px;
}
.art-word { margin: 8px 0 2px; font-size: 1.25rem; }
.art-rule { margin: 5px 0; }
.circle-one { width: 160px; height: 160px; top: 0; left: 4%; }
.circle-two { width: 190px; height: 190px; top: 22px; left: 30%; }
.dash-one { right: 7%; top: 0; width: 62px; height: 62px; border-width: 11px; }
.page-home .section { margin-top: 29px; }
.section-topic .section-top { margin-bottom: 13px; }
.section-topic .topic-picker {
  border: 1px solid #c5d9ce; box-shadow: 0 3px 10px rgba(20,55,48,.035);
  padding: 14px 18px 16px;
}
.section-topic .topic-eyebrow { margin-bottom: 9px; }
.learning-journey .section-top { margin-bottom: 14px; }
.learning-journey .journey-suggestion {
  background: #dceee4; border-color: #a5ceb9;
  box-shadow: 0 4px 15px rgba(13,75,60,.06);
}
.learning-journey .journey-steps { gap: 10px; }
.learning-journey .journey-step-link {
  background: #fff; border-color: #bacfc2; box-shadow: 0 3px 11px rgba(21,60,53,.045);
}
.learning-journey .journey-step:nth-child(2) .journey-step-link { border-top: 4px solid #83a3cc; }
.learning-journey .journey-step:nth-child(3) .journey-step-link { border-top: 4px solid #d4a362; }
.learning-journey .journey-step:nth-child(4) .journey-step-link { border-top: 4px solid #a793c3; }
.learning-journey .journey-step:first-child .journey-step-link { border-top: 4px solid #5ba487; }
.learning-journey .journey-step-link:hover { background: #f7fcf9; border-color: #588e78; }
.games-section { scroll-margin-top: 100px; }
.activity-stages { display: grid; gap: 18px; }
.activity-stage {
  padding: 23px 25px 26px; border-radius: 23px;
  background: #e6f1ea; border: 1px solid #c3dcca;
  box-shadow: 0 3px 15px rgba(17,60,49,.045);
}
.activity-stage-apply { background: #eaf1fa; border-color: #c8d9ed; }
.activity-stage-explain { background: #fcf2e5; border-color: #e9d7bd; }
.activity-stage-exam { background: #eeeaf7; border-color: #d5cae7; }
.activity-stage-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 17px; margin-bottom: 16px; }
.activity-stage-label { min-width: 0; }
.stage-number { font-size: .68rem; font-weight: 850; letter-spacing: .14em; color: #386d59; }
.activity-stage-apply .stage-number { color: #506c93; }
.activity-stage-explain .stage-number { color: #936a2b; }
.activity-stage-exam .stage-number { color: #715896; }
.stage-title { margin: 3px 0 5px; font-size: clamp(1.16rem,2vw,1.43rem); letter-spacing: -.04em; line-height: 1.2; }
.stage-description { font-size: .85rem; color: #4c6661; line-height: 1.55; margin: 0; }
.stage-scope {
  font-size: .7rem; line-height: 1.35; text-align: right; color: #3b6253; background: rgba(255,255,255,.71);
  border: 1px solid rgba(99,134,116,.23); border-radius: 22px; padding: 7px 11px;
  white-space: normal; max-width: 250px; font-weight: 720;
}
.activity-stage .games-grid { gap: 13px; }
.activity-stage-recall .games-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.activity-stage-apply .games-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.activity-stage-explain .games-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.activity-stage-exam .games-grid { grid-template-columns: 1fr; }
.activity-stage .game-card {
  min-height: 184px; border-radius: 16px; padding: 17px 18px 14px;
  border: 1px solid #b3c9bf; background: #fff;
  box-shadow: 0 4px 14px rgba(28,63,55,.07);
}
.activity-stage .game-card:hover {
  border-color: #548f79; box-shadow: 0 11px 27px rgba(23,62,50,.16);
  transform: translateY(-2px); background: #fcfffd;
}
.activity-stage .game-card:focus-visible { outline: 3px solid #c27f2d; outline-offset: 3px; }
.activity-stage .game-number { font-size: .64rem; color: #4e7365; }
.activity-stage .game-icon {
  width: 41px; height: 41px; font-size: 1.5rem; flex: 0 0 41px; border-radius: 12px;
  background: #dcefe4; color: #1a6c59;
}
.activity-stage-apply .game-icon { background: #dfe9f9; color: #3d618f; }
.activity-stage-explain .game-icon { background: #f8e9d3; color: #8b5e2c; }
.activity-stage-exam .game-icon { background: #e5d8f3; color: #654994; }
.activity-stage .game-card-title { font-size: 1.1rem; margin: 12px 0 6px; letter-spacing: -.025em; line-height: 1.3; }
.activity-stage .game-card-description { font-size: .8rem; line-height: 1.56; margin: 0 0 13px; color: #50625e; }
.activity-stage .game-card-foot { padding-top: 9px; border-color: #e4ece8; font-size: .71rem; }
.activity-stage-exam .game-card {
  display: grid; grid-template-columns: 80px minmax(0,1fr);
  grid-template-rows: auto auto auto; gap: 1px 18px;
  min-height: 130px; padding: 20px 25px;
  border-color: #b8a9d3; box-shadow: 0 4px 16px rgba(65,46,98,.08);
}
.activity-stage-exam .game-card-top { grid-column: 1; grid-row: 1 / 4; flex-direction: column-reverse; justify-content: center; gap: 8px; }
.activity-stage-exam .game-card-title { grid-column: 2; grid-row: 1; margin: 0 0 3px; font-size: 1.3rem; }
.activity-stage-exam .game-card-description { grid-column: 2; grid-row: 2; margin: 0; }
.activity-stage-exam .game-card-foot {
  grid-column: 2; grid-row: 3; border: 0; padding: 6px 0 0; margin: 0;
  justify-content: flex-start; gap: 14px; color: #5b487b;
}
.page-home .bottom-grid { margin-top: 23px; }
.page-home .panel { border-color: #bfd2c7; box-shadow: 0 3px 14px rgba(24,57,47,.04); }
@media(max-width:1050px){
  .hero { grid-template-columns: minmax(0,1fr) minmax(170px,.5fr); }
  .activity-stage-recall .games-grid, .activity-stage-explain .games-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:820px){
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-art { display: none; }
}
@media(max-width:760px){
  .site-header { position: relative; }
  /* Mobile navigation expands in normal flow so all nested activity links stay clickable. */
  .header-inner { min-height: 69px; gap: 12px; padding-block: 11px; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .mobile-menu-toggle {
    display: inline-flex; align-items: center; gap: 11px; justify-content: center;
    min-height: 44px; min-width: 91px; margin-left: auto; padding: 9px 13px;
    font-size: .83rem; font-weight: 790; color: #145749; background: #eff7f2;
    border: 1px solid #bfd7c9; border-radius: 11px;
  }
  .mobile-menu-bars { display: grid; gap: 4px; width: 17px; }
  .mobile-menu-bars span { display: block; height: 2px; width: 17px; border-radius: 2px; background: #15594c; }
  .site-nav {
    position: static; flex: 1 0 100%; order: 3;
    display: none; flex-direction: column; align-items: stretch; gap: 5px;
    width: 100%; margin: 0; max-width: none; max-height: none;
    overflow: visible; overscroll-behavior: auto;
    padding: 12px; border: 1px solid #c8ded1; border-radius: 15px;
    background: #fff; box-shadow: 0 12px 24px rgba(13,54,43,.10);
  }
  .site-nav.is-open { display: flex; }
  .site-nav > .nav-primary-link, .activities-trigger {
    justify-content: space-between; width: 100%;
    padding: 10px 14px; font-size: .87rem; min-height: 47px;
  }
  .activities-menu { width: 100%; }
  .activities-panel {
    position: static; width: 100%; display: grid; grid-template-columns: 1fr;
    border-radius: 11px; padding: 9px; gap: 8px; margin-top: 7px;
    box-shadow: none; border-color: #d5e5da;
  }
  .nav-group { padding: 12px; }
  .nav-group-description { margin-bottom: 8px; }
  .nav-group > a { min-height: 42px; }
  .main-shell { padding-top: 20px; }
  #progress-title { scroll-margin-top: 28px; }
  .hero { padding: 29px 29px; border-radius: 21px; }
}
@media(max-width:580px){
  .hero { padding: 28px 23px; }
  .hero-title { margin-top: 11px; }
  .hero-description { margin: 13px 0 18px; }
  .activity-stage { padding: 19px 16px 20px; border-radius: 19px; }
  .activity-stage-heading { flex-direction: column; align-items: flex-start; gap: 10px; }
  .stage-scope { text-align: left; }
  .activity-stage .games-grid { grid-template-columns: 1fr; }
  .activity-stage .game-card { min-height: 0; padding: 16px 16px 13px; }
  .activity-stage .game-card-title { margin: 9px 0 4px; }
  .activity-stage-exam .game-card {
    display: flex; flex-direction: column; align-items: stretch; gap: 7px; padding: 17px;
  }
  .activity-stage-exam .game-card-top { flex-direction: row; justify-content: space-between; align-items: center; }
  .activity-stage-exam .game-card-foot { border-top: 1px solid #dfd6eb; padding-top: 10px; }
}
@media(max-width:380px){
  .brand-copy small { display: none; }
  .brand-symbol { flex-shrink: 0; }
  .header-inner { gap: 8px; }
  .mobile-menu-toggle { min-width: 80px; padding-inline: 10px; }
}
@media(prefers-reduced-motion:reduce){
  .activity-stage .game-card { transform: none!important; }
}
@media print{
  .site-header, .activity-stage-heading .stage-scope { display:none!important; }
  .activity-stage { background:#fff; box-shadow:none; break-inside:avoid; }
  .activity-stage .game-card { box-shadow:none; break-inside:avoid; }
}

/* Pass D — Exam Lab depth: compact study cues and optional written reflection. */
.sim-variety-note{max-width:730px;margin:9px 0 0;font-size:.79rem;line-height:1.6;color:#42685e}
.sim-focus-tip{border:1px solid #d2e4d8;border-radius:11px;background:#f5faf6;padding:12px 15px;margin:17px 0}
.sim-focus-tip summary{cursor:pointer;color:#205e4f;font-size:.88rem;font-weight:800;line-height:1.55}
.sim-focus-tip summary:focus-visible{outline:3px solid #88cbb6;outline-offset:4px;border-radius:5px}
.sim-focus-tip .sim-help{margin:10px 0 2px}
.sim-check-row:has(input:disabled){cursor:default;background:#f6f8f7;border-color:#e2e7e4;color:#526660}
.sim-check-row input:disabled{opacity:.62}
.sim-improvement{padding:16px 18px;margin:17px 0;background:#f8faf8;border:1px solid #d9e6dd;border-radius:13px;min-width:0}
.sim-improvement-label{display:block;margin:0 0 10px;color:#205b4e;font-weight:780;font-size:.87rem}
.sim-improvement-input{display:block;box-sizing:border-box;width:100%;max-width:100%;min-height:78px;border:1px solid #a7c8b8;border-radius:10px;background:#fff;color:#19483d;padding:11px 13px;resize:vertical;font:inherit;font-size:.88rem;line-height:1.6}
.sim-improvement-input:focus{outline:3px solid #b5dfd1;outline-offset:1px;border-color:#18846d}
.sim-improvement .sim-help{margin:9px 0 0}
.sim-improvement-report{border-left:3px solid #84b5a1;padding:9px 12px;margin:12px 0;background:#f3f8f4;white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-width:390px){.sim-improvement{padding:13px 12px}.sim-focus-tip{padding:11px 12px}}
@media print{.sim-focus-tip,.sim-variety-note{display:none!important}}