/* Final interaction polish shared across the school site. */

/* Under each Tianzige, retry / learned / next stay together as small bubbles. */
.lesson-word-current > .lesson-word-item-actions { justify-content:center; padding:0 14px 14px; }
.lesson-word-strokes .stroke-buttons,
.hanzi-workspace #hanzi-stroke-practice .stroke-buttons { align-items:center; justify-content:center; gap:7px; margin-top:8px; }
.lesson-word-strokes .stroke-buttons .lesson-word-item-actions { align-items:center; justify-content:center; gap:7px; padding:0; }
.lesson-word-strokes .stroke-buttons #stroke-retry,
.lesson-word-strokes .stroke-buttons .lesson-word-item-actions button,
.hanzi-workspace #hanzi-stroke-practice .stroke-buttons #stroke-retry,
.hanzi-workspace #hanzi-stroke-practice .stroke-buttons #hanzi-next { min-height:34px; padding:6px 10px; border-radius:999px; font-size:13px; }
.lesson-word-strokes .stroke-buttons .lesson-word-item-actions button { white-space:nowrap; }

/* Question options remain left-aligned even when pinyin makes them taller. */
.lesson-inline-answers button,
.lesson-inline-text-practice .short-reading-options button,
.lesson-inline-text-practice .answer-options button { justify-content:flex-start; text-align:left; }
.lesson-inline-answers button b,
.lesson-inline-text-practice .short-reading-options button b,
.lesson-inline-text-practice .answer-options button b { flex:0 0 auto; margin-right:8px; }
.lesson-inline-answers button > span,
.lesson-inline-text-practice .short-reading-options button > span,
.lesson-inline-text-practice .answer-options button > span { text-align:left; }

/* Keep the card-size slider and the short final row truly centred. */
.stroke-card-size { width:min(100%,520px); margin-inline:auto; justify-content:center; }
.stroke-card-size input[type=range] { margin-inline:auto; }
#basic-stroke-cards { grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--stroke-card-min)),var(--stroke-card-min))); justify-content:center; }

/* Compact the unchanged annual calendar before the practical map cards. */
body[data-calendar-static="true"] .calendar-section { inline-size:min(100%,960px); margin-bottom:16px; padding:16px 18px; }
body[data-calendar-static="true"] .mini-calendar { grid-template-columns:repeat(9,minmax(80px,1fr)); min-width:720px; }
body[data-calendar-static="true"] .calendar-month { min-height:214px; }
body[data-calendar-static="true"] .calendar-date { height:32px; padding:3px 7px; font-size:12px; }
body[data-calendar-static="true"] .calendar-date strong { font-size:14px; }

/* Compact, text-only location cards keep the home page calm while leaving
   each address as a direct link to its map. */
.school-location-grid { display:grid; grid-template-columns:repeat(2,230px); justify-content:center; gap:14px; width:min(100%,490px); margin:0 auto 12px; }
.school-location-card { display:grid; gap:6px; min-width:0; padding:11px 12px; border:1px solid #dce4d9; border-radius:16px; background:#fff; box-shadow:none; text-align:center; }
.school-location-copy { display:flex; align-items:center; justify-content:center; gap:7px; min-width:0; text-align:center; white-space:nowrap; }
.school-location-copy strong { color:#4d6546; font-size:13px; }
.school-location-copy span { color:#7e8b7a; font-size:12px; }
.school-location-address { display:block; padding-top:6px; border-top:1px solid #f0f3ef; color:#758770; font-size:12px; line-height:1.45; text-decoration:none; }
.school-location-address:hover { color:#4d6546; text-decoration:underline; text-underline-offset:2px; }
.school-wechat-card { display:flex; align-items:center; justify-content:center; gap:12px; width:min(100%,430px); margin:0 auto 18px; padding:7px 12px; border:1px solid #e38c92; border-radius:16px; background:#fffbef; color:#758271; text-align:center; }
.school-wechat-copy { display:grid; gap:2px; }
.school-wechat-card strong { color:#b32831; font-size:14px; }
.school-wechat-card small { font-size:12px; }
.school-qr-trigger { display:grid; flex:0 0 auto; place-items:center; width:46px; height:46px; padding:2px; border:1px solid #e38c92; border-radius:10px; background:#fff; cursor:zoom-in; opacity:.56; transition:opacity .16s ease,transform .16s ease; }
.school-qr-trigger:hover,.school-qr-trigger:focus-visible { opacity:.95; transform:scale(1.06); outline:2px solid #d26067; outline-offset:2px; }
.school-qr-trigger img { display:block; width:100%; height:100%; object-fit:contain; border-radius:7px; }
.school-qr-dialog { position:relative; box-sizing:border-box; width:min(344px,calc(100vw - 32px)); margin:auto; padding:20px; border:1px solid #e08f95; border-radius:22px; background:#fffdf8; color:#8a3238; text-align:center; box-shadow:0 18px 60px #17384f55; }
.school-qr-dialog::backdrop { background:#17384f80; }
.school-qr-dialog h2 { margin:0 34px 12px; font-size:20px; }
.school-qr-dialog>img { display:block; width:min(100%,280px); height:auto; margin:0 auto; }
.school-qr-dialog p { margin:12px 0 0; color:#6e7d84; font-size:14px; }
.school-qr-close { position:absolute; top:10px; right:10px; display:grid; width:32px; height:32px; place-items:center; border:0; border-radius:50%; background:#f2e8c6; color:#a42b33; font:26px/1 sans-serif; cursor:pointer; }

/* Notices live below the teacher choices so school news is easy to spot
   without competing with the class entry points. */
.school-notices { width:min(100%,760px); margin:22px auto 24px; }
.school-notices .section-title { margin:0 0 10px; text-align:center; }
.school-notices .section-title h2 { margin:0; font-size:20px; color:#ba323b; }
.school-notices .school-notices-title-row { display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:left; }
.school-notices .school-notices-title-row .camp-language-switch { margin:0; gap:5px; }
.school-notices .school-notices-title-row .camp-language-switch button { min-height:25px; padding:0 9px; border-color:rgba(191,87,94,.28); background:rgba(255,253,248,.26); color:rgba(152,59,65,.7); font-size:11px; font-weight:650; }
.school-notices .school-notices-title-row .camp-language-switch button[aria-pressed="true"] { border-color:rgba(156,73,59,.32); background:rgba(169,71,62,.13); color:#94463c; }
.camp-teaser { display:grid; grid-template-columns:200px minmax(0,1fr); gap:20px; align-items:center; padding:14px; border:1px solid #de9196; border-radius:22px; background:#fffaf3; box-shadow:0 7px 18px #8c5b2722; }
.notice-poster { display:block; overflow:hidden; border:1px solid #de9196; border-radius:14px; background:#fffaf3; color:#77461e; text-align:center; text-decoration:none; transition:transform .18s ease,box-shadow .18s ease; }
.notice-poster:hover,.notice-poster:focus-visible { transform:translateY(-3px); box-shadow:0 11px 24px #8c5b2733; outline:2px solid #d15c64; outline-offset:3px; }
.notice-poster img { display:block; width:100%; height:auto; }
.camp-teaser-copy { min-width:0; }
.camp-eyebrow { margin:0 0 5px; color:#a45a22; font-size:14px; font-weight:700; }
.camp-teaser h3 { margin:0 0 7px; color:#7c2f38; font-size:24px; }
.camp-teaser-copy>p:not(.camp-eyebrow) { margin:0 0 10px; color:#5e5143; font-size:14px; line-height:1.55; }
.camp-teaser dl { display:grid; gap:5px; margin:0 0 12px; }
.camp-teaser dl div { display:grid; grid-template-columns:38px minmax(0,1fr); gap:5px; color:#5d5b55; font-size:13px; line-height:1.4; }
.camp-teaser dt { color:#a3622a; font-weight:700; }
.camp-teaser dd { margin:0; }
.camp-teaser-actions { display:flex; flex-wrap:wrap; gap:9px; }
.camp-register,.camp-details { display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:0 13px; border-radius:17px; font-size:14px; font-weight:700; text-decoration:none; }
.camp-register { background:#a9473e; color:#fff; }
.camp-register:hover,.camp-register:focus-visible { background:#87342e; outline:2px solid #87342e; outline-offset:2px; }
.camp-details { border:1px solid #d6898e; background:#fff; color:#b4333c; }
.camp-details:hover,.camp-details:focus-visible { background:#fceccb; outline:2px solid #d6898e; outline-offset:2px; }

.camp-detail { display:grid; grid-template-columns:minmax(220px,330px) minmax(0,1fr); gap:28px; width:min(100%,900px); margin:18px auto 22px; padding:20px; border:1px solid #de9196; border-radius:26px; background:#fffaf3; }
.camp-detail-poster-wrap { align-self:start; }
.camp-detail-poster-wrap .camp-detail-poster { width:100%; }
.camp-detail-copy h1 { margin:0 0 9px; color:#7c2f38; font-size:clamp(26px,4vw,36px); }
.camp-lead { margin:0 0 16px; color:#5e5143; font-size:16px; line-height:1.75; }
.camp-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0 0 14px; }
.camp-facts div { padding:10px 12px; border-radius:15px; background:#fff; }
.camp-facts dt { margin-bottom:4px; color:#a3622a; font-size:13px; font-weight:700; }
.camp-facts dd { margin:0; color:#565b5a; font-size:14px; line-height:1.5; }
.camp-capacity { margin:0 0 15px; color:#9a3934; font-weight:700; line-height:1.55; }
.camp-register-large { min-height:42px; padding:0 19px; font-size:16px; }
.camp-highlights { width:min(100%,900px); margin:0 auto 28px; padding:20px; border:1px solid #d8e0d3; border-radius:24px; background:#fbfdf8; }
.camp-highlights h2 { margin:0 0 13px; color:#557644; font-size:22px; }
.camp-highlights>div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.camp-highlights article { display:grid; gap:5px; min-height:86px; padding:12px; border-radius:16px; background:#fff; color:#557044; }
.camp-highlights strong { font-size:15px; }
.camp-highlights span { font-size:13px; line-height:1.5; color:#617268; }
.camp-highlights>p { margin:13px 0 0; color:#5b6d63; line-height:1.7; }
.activity-archive { width:min(100%,760px); margin:0 auto 28px; }
.activity-archive .section-title { margin:0 0 10px; text-align:center; }
.activity-archive .section-title h2 { margin:0; color:#557644; font-size:20px; }
.activity-archive-empty { display:grid; gap:5px; justify-items:center; padding:18px; border:1px dashed #b9d0ae; border-radius:20px; background:#fbfdf8; color:#5f7a53; text-align:center; }
.activity-archive-empty strong { font-size:15px; }
.activity-archive-empty span { font-size:13px; }

.textbook-downloads { width:min(100%,760px); margin:20px auto 24px; }
.review-textbook-downloads { margin:18px auto 4px; }
.textbook-downloads .section-title { margin:0 0 10px; text-align:center; }
.textbook-downloads .section-title h2 { margin:0; font-size:20px; color:#4d6546; }
.textbook-download-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.textbook-download-grid a { display:grid; gap:4px; min-width:0; padding:12px 8px; border:1px solid #d3ddd1; border-radius:16px; background:#fff; color:#4d6546; text-align:center; text-decoration:none; transition:transform .16s ease,box-shadow .16s ease; }
.textbook-download-grid a:nth-child(2) { border-color:#c8ddbe; color:#47745b; background:#f9fdf7; }
.textbook-download-grid a:nth-child(3) { border-color:#dfc8ed; color:#6b4d84; background:#fdfaff; }
.textbook-download-grid a:nth-child(4) { border-color:#e9878d; color:#b8343d; background:#fffdf7; }
.textbook-download-grid a:hover,.textbook-download-grid a:focus-visible { transform:translateY(-2px); box-shadow:0 6px 14px #315e7a20; outline:2px solid currentColor; outline-offset:2px; }
.textbook-download-grid strong { font-size:15px; }
.textbook-download-grid small { font-size:12px; color:inherit; opacity:.76; }
@media(max-width:580px) { .textbook-download-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:620px) { .camp-teaser { grid-template-columns:130px minmax(0,1fr); gap:12px; padding:10px; } .camp-teaser h3 { font-size:20px; } .camp-detail { grid-template-columns:1fr; padding:15px; } .camp-detail-poster-wrap { width:min(100%,290px); margin:0 auto; } .camp-facts { grid-template-columns:1fr; } .camp-highlights { padding:15px; } .camp-highlights>div { grid-template-columns:repeat(2,minmax(0,1fr)); } }

@media(max-width:720px) {
  body[data-calendar-static="true"] .calendar-section { padding:14px 12px; }
  body[data-calendar-static="true"] .calendar-month { min-height:204px; }
  .school-location-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; width:min(100%,430px); }
}

body.lesson-workspace-page [data-lesson-workspace="grade1upper-r3"] .lesson-inline-stroke-host .stroke-play-controls .lesson-word-color-details .stroke-color-dots{position:relative!important;inset:auto!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:270px!important;min-width:270px!important;flex-basis:270px!important}

body.lesson-workspace-page [data-lesson-workspace="grade1upper-r3"] .lesson-inline-stroke-host .stroke-play-controls .lesson-word-color-details{position:absolute!important;top:96px!important;right:18px!important;z-index:8!important;width:290px!important;border:0!important;background:transparent!important}body.lesson-workspace-page [data-lesson-workspace="grade1upper-r3"] .lesson-inline-stroke-host .stroke-play-controls .lesson-word-color-details .stroke-color-dots{width:290px!important;min-width:290px!important;flex-basis:290px!important;gap:8px!important}body.lesson-workspace-page [data-lesson-workspace="grade1upper-r3"] .lesson-inline-stroke-host .stroke-play-controls .lesson-word-color-details .stroke-color-dots:before{font-size:13px!important}

body.lesson-workspace-page [data-lesson-workspace="grade1upper-r3"] .lesson-inline-stroke-host .stroke-play-controls .lesson-word-color-details .stroke-color-dots{width:320px!important;min-width:320px!important;flex:0 0 320px!important;position:static!important;transform:none!important}

body.lesson-workspace-page [data-lesson-workspace="grade1upper-r3"] .lesson-inline-stroke-host .stroke-play-controls .lesson-word-color-details{min-height:34px!important;height:34px!important;max-height:none!important;overflow:visible!important;visibility:visible!important}body.lesson-workspace-page [data-lesson-workspace="grade1upper-r3"] .lesson-inline-stroke-host .stroke-play-controls .lesson-word-color-details .stroke-color-dots{height:34px!important;max-height:none!important;overflow:visible!important;visibility:visible!important}

/* r3 stroke controls: keep colour and card-size controls visible in the header. */
body.lesson-workspace-page [data-lesson-workspace="grade1upper-r3"] .lesson-inline-stroke-host .lesson-word-color-details{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:10px!important;height:auto!important;margin:0!important;padding:0 0 0 16px!important;border-left:1px solid #cfddcb!important;background:#fff!important;box-shadow:none!important}body.lesson-workspace-page [data-lesson-workspace="grade1upper-r3"] .lesson-inline-stroke-host .lesson-word-color-details>summary{display:none!important}body.lesson-workspace-page [data-lesson-workspace="grade1upper-r3"] .lesson-inline-stroke-host .lesson-word-color-details .stroke-color-dots{display:flex!important;align-items:center!important;gap:10px!important;width:auto!important;height:auto!important;padding:0!important}body.lesson-workspace-page [data-lesson-workspace="grade1upper-r3"] .lesson-inline-stroke-host .lesson-word-color-details .stroke-color-dots:before{content:'笔画颜色';color:#3b5c32;font:700 15px/1 'Noto Sans SC',sans-serif;white-space:nowrap}body.lesson-workspace-page [data-lesson-workspace="grade1upper-r3"] .lesson-inline-stroke-host .lesson-word-color-details .stroke-color-dots button{display:block!important;width:27px!important;height:27px!important;min-height:27px!important;margin:0!important;padding:0!important;border:2px solid #fff!important;border-radius:50%!important;box-shadow:0 0 0 1px #c2d3bd!important}body.lesson-workspace-page [data-lesson-workspace="grade1upper-r3"] .lesson-inline-stroke-host .lesson-word-color-details .stroke-color-dots button[aria-pressed=true]{box-shadow:0 0 0 3px #3c5c33!important}body.lesson-workspace-page [data-lesson-workspace="grade1upper-r3"] .lesson-inline-stroke-host .lesson-word-color-details .stroke-custom-color{display:none!important}body.lesson-workspace-page [data-lesson-workspace="grade1upper-r3"] .lesson-inline-stroke-host .lesson-inline-stroke-expand{display:none!important}
@media(max-width:650px) { .stroke-card-size { justify-content:center; } }

/* Camp language switcher: the same card structure is used for each language,
   while the button keeps the visitor's choice across the listing and detail page. */
.camp-language-switch { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:0 0 12px; }
.camp-language-switch button { min-height:31px; padding:0 13px; border:1px solid #db9499; border-radius:16px; background:#fffdf8; color:#ae3d45; font:700 13px/1.1 system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif; cursor:pointer; transition:transform .16s ease,background .16s ease,color .16s ease; }
.camp-language-switch button:hover,.camp-language-switch button:focus-visible { transform:translateY(-1px); outline:2px solid #cb6e74; outline-offset:2px; }
.camp-language-switch button[aria-pressed="true"] { border-color:#9c493b; background:#a9473e; color:#fff; }
.camp-language-panel[hidden],.camp-teaser[hidden] { display:none !important; }
.camp-detail-language-wrap { width:min(100%,900px); margin:18px auto 28px; }
.camp-detail-language-wrap>.camp-language-switch { margin-bottom:12px; }
.camp-detail-language-wrap .camp-detail { width:100%; margin:0 0 22px; }
.camp-detail-language-wrap .camp-highlights { width:100%; margin:0; }
.camp-poster-hint { margin:8px 0 0; color:#ae6166; font-size:12px; line-height:1.45; text-align:center; }

/* One small home-page prompt is enough to make a new activity discoverable,
   while the calendar remains the main focus of the home page. */
.home-new-activity-bubble { display:flex; align-items:center; justify-content:center; gap:9px; width:fit-content; max-width:calc(100% - 24px); margin:0 auto 13px; padding:8px 13px; border:1px solid #df9096; border-radius:19px; background:#fff9ef; color:#8f4f28; box-shadow:0 4px 12px #a06a3020; text-decoration:none; }
.home-new-activity-bubble span { padding:3px 7px; border-radius:10px; background:#f4ddba; font-size:12px; font-weight:700; white-space:nowrap; }
.home-new-activity-bubble strong { min-width:0; font-size:14px; white-space:nowrap; }
.home-new-activity-bubble small { color:#be5259; font-size:12px; white-space:nowrap; }
.home-new-activity-bubble:hover,.home-new-activity-bubble:focus-visible { transform:translateY(-1px); outline:2px solid #d15c64; outline-offset:2px; }

/* Keep the full camp overview concise enough to scan without a long vertical
   page: the full-resolution poster remains available from its image link. */
.camp-detail-language-wrap { margin-top:10px; margin-bottom:18px; }
.camp-detail-language-wrap .camp-detail { grid-template-columns:178px minmax(0,1fr); gap:16px; padding:14px; margin-bottom:12px; border-radius:21px; }
.camp-detail-language-wrap .camp-detail-poster-wrap { width:178px; }
.camp-detail-language-wrap .camp-detail-copy h1 { margin-bottom:5px; font-size:clamp(22px,3vw,30px); }
.camp-detail-language-wrap .camp-lead { margin:0 0 9px; font-size:14px; line-height:1.48; }
.camp-detail-language-wrap .camp-facts { gap:6px; margin-bottom:8px; }
.camp-detail-language-wrap .camp-facts div { padding:7px 8px; border-radius:11px; }
.camp-detail-language-wrap .camp-facts dt { margin-bottom:2px; font-size:12px; }
.camp-detail-language-wrap .camp-facts dd { font-size:12px; line-height:1.38; }
.camp-map-link { color:#ab2e37; font-weight:700; text-decoration:underline; text-decoration-color:#d6959a; text-underline-offset:3px; }
.camp-map-link:hover,.camp-map-link:focus-visible { color:#a23f31; outline:2px solid #db9499; outline-offset:2px; }
.camp-detail-language-wrap .camp-capacity { margin:0 0 9px; font-size:13px; line-height:1.42; }
.camp-detail-language-wrap .camp-register-large { min-height:36px; padding:0 15px; font-size:14px; }
.camp-detail-language-wrap .camp-poster-hint { margin-top:7px; font-size:11px; }
.camp-detail-language-wrap .camp-highlights { padding:12px; border-radius:19px; }
.camp-detail-language-wrap .camp-highlights h2 { margin-bottom:8px; font-size:18px; }
.camp-detail-language-wrap .camp-highlights>div { grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
.camp-detail-language-wrap .camp-highlights article { min-height:0; padding:8px; border-radius:12px; }
.camp-detail-language-wrap .camp-highlights strong { font-size:13px; line-height:1.25; }
.camp-detail-language-wrap .camp-highlights span { font-size:11px; line-height:1.35; }
.camp-detail-language-wrap .camp-highlight-summary { margin:8px 0 0; font-size:12px; line-height:1.45; }

/* The former empty archive position now offers a quiet, useful place for
   additional school courses. Their temporary action is a consultation email,
   ready to be swapped for each course's registration URL. */
.more-courses { width:min(100%,760px); margin:0 auto 24px; }
.more-courses .section-title { margin:0 0 10px; text-align:center; }
.more-courses .section-title h2 { margin:0; color:#6b7b67; font-size:20px; }
.more-course-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.interest-course-grid { grid-template-columns:repeat(2,minmax(0,220px)); justify-content:center; }
.more-course-grid a { display:grid; gap:3px; min-width:0; min-height:86px; padding:11px 9px; border:1px solid #dae3d7; border-radius:16px; background:#fdfefc; color:#6b7c66; text-align:center; text-decoration:none; transition:transform .16s ease,box-shadow .16s ease; }
.more-course-grid a:nth-child(2) { border-color:#e4cbd5; background:#fffafb; color:#8d586c; }
.more-course-grid a:nth-child(3) { border-color:#dd9297; background:#fffdf8; color:#b4464e; }
.more-course-grid a:nth-child(4) { border-color:#c8ddc8; background:#fafffa; color:#54725a; }
.more-course-grid a:hover,.more-course-grid a:focus-visible { transform:translateY(-2px); box-shadow:0 6px 14px #50698a20; outline:2px solid currentColor; outline-offset:2px; }
.more-course-grid strong { font-size:15px; }
.more-course-grid strong small { display:block; margin-top:1px; color:inherit; font-size:10px; font-weight:600; letter-spacing:.03em; opacity:.72; }
.more-course-grid small { color:inherit; font-size:12px; line-height:1.35; opacity:.8; }
.more-course-grid span { margin-top:auto; font-size:12px; font-weight:700; }
.course-card-preview { display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; gap:2px 5px; width:100%; min-height:38px; padding:5px 6px; border:1px solid #cad7c7; border-radius:8px; background:linear-gradient(135deg,#f8fcf6,#fff8fb); color:#688061; text-align:left; }
.course-card-preview i { grid-row:1 / span 2; align-self:center; padding:3px 2px; color:#889f82; font:600 10px/1.1 system-ui,-apple-system,sans-serif; writing-mode:vertical-rl; }
.course-card-preview b { overflow:hidden; color:#5d7557; font-size:11px; line-height:1.2; white-space:nowrap; text-overflow:ellipsis; }
.course-card-preview em { color:#839080; font-size:9px; font-style:normal; line-height:1.2; white-space:nowrap; }
.more-courses-note { margin:9px 0 0; color:#828b7f; font-size:12px; text-align:center; }

@media(max-width:700px) {
  .camp-detail-language-wrap .camp-detail { grid-template-columns:132px minmax(0,1fr); gap:11px; padding:11px; }
  .camp-detail-language-wrap .camp-detail-poster-wrap { width:132px; }
  .camp-detail-language-wrap .camp-highlights>div { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .more-course-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:500px) {
  .home-new-activity-bubble { gap:6px; padding:7px 9px; }
  .home-new-activity-bubble strong { overflow:hidden; text-overflow:ellipsis; }
  .home-new-activity-bubble small { display:none; }
  .camp-detail-language-wrap .camp-detail { grid-template-columns:1fr; }
  .camp-detail-language-wrap .camp-detail-poster-wrap { width:min(128px,100%); margin:0 auto; }
}

/* On the courses hub the camp is an important notice, not the main page.
   The complete story remains one click away on the dedicated camp page. */
.school-notices { width:min(100%,690px); margin:14px auto 18px; }
.school-notices .section-title { margin-bottom:6px; }
.camp-language-switch { margin-bottom:7px; }
.camp-language-switch button { min-height:27px; padding:0 10px; font-size:12px; }
.school-notices .camp-teaser { grid-template-columns:116px minmax(0,1fr); gap:12px; padding:9px; border-radius:18px; }
.school-notices .camp-teaser h3 { margin-bottom:4px; font-size:20px; }
.school-notices .camp-teaser-copy>p:not(.camp-eyebrow) { display:none; }
.school-notices .camp-eyebrow { margin-bottom:2px; font-size:12px; }
.school-notices .camp-teaser dl { gap:3px; margin-bottom:7px; }
.school-notices .camp-teaser dl div { grid-template-columns:34px minmax(0,1fr); font-size:12px; }
.school-notices .camp-teaser dl div:nth-child(3) { display:none; }
.school-notices .camp-register,.school-notices .camp-details { min-height:29px; padding:0 10px; font-size:12px; }
.school-notices .camp-teaser-copy { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:10px; align-items:end; }
.school-notices .camp-teaser-copy>.camp-eyebrow,.school-notices .camp-teaser-copy>h3,.school-notices .camp-teaser-copy>dl { grid-column:1 / -1; }
.school-notices .camp-teaser-actions { grid-column:2; justify-self:end; justify-content:flex-end; gap:6px; margin-top:1px; }
.camp-detail-language-wrap .camp-detail-copy { display:flex; flex-direction:column; }
.camp-detail-language-wrap .camp-register-large { align-self:flex-end; margin-top:auto; }
@media(max-width:520px) {
  .school-notices .school-notices-title-row { align-items:flex-start; }
  .school-notices .school-notices-title-row .camp-language-switch { gap:3px; }
  .school-notices .school-notices-title-row .camp-language-switch button { padding:0 7px; font-size:10px; }
  .school-notices .camp-teaser { grid-template-columns:94px minmax(0,1fr); gap:9px; padding:8px; }
  .school-notices .camp-teaser h3 { font-size:18px; }
  .school-notices .camp-teaser-copy { grid-template-columns:1fr; }
  .school-notices .camp-teaser-actions { grid-column:1; }
}

/* The class chooser is intentionally only a short heading, six coloured names,
   and one plain instruction. */
.teacher-directory-note { margin:0 0 7px; color:#4e6149; font-size:18px; font-weight:750; text-align:center; }
.teacher-directory-hint { margin:-17px 0 10px; color:#828b7f; font-size:12px; text-align:center; }
@media(max-width:720px){
  .teacher-directory>.teacher-list { grid-template-columns:repeat(6,minmax(0,1fr)); gap:5px; }
  .teacher-directory>.teacher-list>.teacher-list-item { min-height:42px; padding:4px 2px; }
  .teacher-directory>.teacher-list>.teacher-list-item .teacher-name-bubble { padding:2px; font-size:13px; letter-spacing:-.04em; }
  .teacher-directory-hint { margin-top:-17px; }
}

/* The course-and-activities landing page is deliberately a three-bubble
   overview: class entry, the larger activity centre, and interest courses. */
@media(min-width:821px){
  .activities-overview { display:grid; grid-template-columns:minmax(275px,.86fr) minmax(0,1.48fr); grid-template-areas:"classes activities" "courses activities"; gap:14px; width:min(100%,1080px); margin:0 auto; padding:0 16px 18px; align-items:stretch; }
  .activities-overview>.teacher-directory { grid-area:classes; box-sizing:border-box; width:100%; margin:0; padding:13px 14px 7px; border:1px solid #d8e2d5; border-radius:20px; background:#fdfefc; }
  .activities-overview>.teacher-directory>.teacher-list { width:100%; margin:12px auto 25px; gap:6px; }
  .activities-overview>.teacher-directory>.teacher-list>.teacher-list-item { min-height:43px; padding:4px 3px; }
  .activities-overview>.teacher-directory>.teacher-list>.teacher-list-item .teacher-name-bubble { padding:2px; font-size:14px; }
  .activities-overview>.activities-hub { grid-area:activities; box-sizing:border-box; width:100%; margin:0; padding:13px; }
  .activities-overview>.activities-hub .school-notices { margin-bottom:10px; }
  .activities-overview>.activities-hub .past-activities { padding-top:9px; }
  .activities-overview>.activities-hub .past-activity-list { gap:6px; }
  .activities-overview>.activities-hub .past-activity-list .past-activity-card { padding:5px; }
  .activities-overview>.activities-hub .past-activity-list .past-activity-card strong { font-size:11px; }
  .activities-overview>.activities-hub .past-activity-list .past-activity-card small { font-size:9px; }
  .activities-overview>.more-courses { grid-area:courses; box-sizing:border-box; width:100%; margin:0; padding:12px 14px; border:1px solid #dee5dc; border-radius:20px; background:#fdfefd; }
  .activities-overview>.more-courses .section-title { margin-bottom:8px; }
  .activities-overview>.more-courses .section-title h2 { font-size:18px; }
  .activities-overview>.more-courses .interest-course-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
  .activities-overview>.more-courses .more-course-grid a { min-height:76px; padding:8px 7px; }
  .activities-overview>.more-courses .interest-course-cover { height:42px; }
  .activities-overview>.more-courses .more-course-grid strong { font-size:13px; }
  .activities-overview>.more-courses .more-course-grid small { font-size:10px; }
  .activities-overview>.more-courses .more-course-grid span { font-size:10px; }
}

/* The overview stays vertical: class entry comes first, then activities,
   then interest courses.  It borrows the activity centre's quiet card rhythm
   without turning the page into a two-column dashboard. */
.activities-overview { display:block; width:min(100%,800px); margin:0 auto; padding:0 16px 18px; }
.activities-overview>.teacher-directory { position:relative; box-sizing:border-box; width:100%; margin:0 auto 12px; padding:14px 16px 8px; border:1px solid #ccd9c8; border-radius:22px; background:#fdfefc; box-shadow:0 5px 14px #315e7a12; }
.activities-overview>.teacher-directory>.teacher-list { grid-template-columns:repeat(6,minmax(0,1fr)); width:100%; max-width:none; margin:11px auto 23px; gap:8px; }
.activities-overview>.teacher-directory>.teacher-list>.teacher-list-item { min-height:52px; padding:5px 7px; }
.activities-overview>.teacher-directory>.teacher-list>.teacher-list-item .teacher-name-bubble { padding:3px 5px; font-size:17px; }
.activities-overview>.activities-hub { box-sizing:border-box; width:100%; margin:0 auto 10px; padding:10px 12px; }
.activities-overview>.activities-hub .school-notices { margin-bottom:6px; }
.activities-overview>.activities-hub .past-activities { padding-top:6px; }
.activities-overview>.activities-hub .past-activity-list { gap:6px; }
.activities-overview>.activities-hub .past-activity-list .past-activity-card { padding:5px; }
.activities-overview>.activities-hub .past-activity-list .past-activity-card>img { aspect-ratio:16/9; }
.activities-overview>.activities-hub .past-activity-list .past-activity-card strong { font-size:11px; }
.activities-overview>.activities-hub .past-activity-list .past-activity-card small { font-size:9px; }
.activities-overview>.more-courses { box-sizing:border-box; width:100%; margin:0 auto 12px; padding:9px 12px; border:1px solid #dee5dc; border-radius:20px; background:#fdfefd; }
.activities-overview>.more-courses .section-title { margin-bottom:8px; }
.activities-overview>.more-courses .section-title h2 { font-size:18px; }
.activities-overview>.more-courses .interest-course-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.activities-overview>.more-courses .more-course-grid a { min-height:62px; padding:6px 8px; }
.activities-overview>.more-courses .interest-course-cover { height:34px; }
.activities-overview>.more-courses .more-course-grid strong { font-size:13px; }
.activities-overview>.more-courses .more-course-grid small,.activities-overview>.more-courses .more-course-grid span { font-size:10px; }
.section-localized-title { min-width:0; }
.activities-overview [data-section-copy][hidden] { display:none!important; }
.section-localized-copy>p,.section-localized-copy>h2,.section-localized-copy>h3 { margin-top:0; }
.teacher-directory-title { text-align:center; }
.teacher-directory-note { margin:0; font-size:21px; }
.teacher-directory-hint { margin:-18px 0 2px; font-size:13px; }
.teacher-directory-hint p { margin:0; }
.section-language-switch { display:flex; flex-wrap:wrap; gap:4px; align-items:center; justify-content:flex-end; }
.section-language-switch button { min-height:25px; padding:0 8px; border:1px solid #d29da1; border-radius:999px; background:#fffdf9; color:#75634c; font-size:10px; font-weight:700; line-height:1; cursor:pointer; }
.section-language-switch button[aria-pressed="true"] { border-color:#d49c9f; background:#f3e8d9; color:#aa4950; }
.activities-overview-language { display:flex; justify-content:flex-end; margin:0 3px 6px; }
.activities-overview>.more-courses .section-title,.activities-overview>.activities-hub .school-notices-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; text-align:left; }
.activities-overview>.activities-hub .school-notices .camp-teaser { grid-template-columns:118px minmax(0,1fr); gap:13px; padding:9px; }
.activities-overview>.activities-hub .school-notices .camp-teaser h3 { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; margin:0; font-size:20px; }
.activities-overview>.activities-hub .school-notices .camp-title { color:#6a4b30; font-size:inherit; }
.activities-overview>.activities-hub .school-notices .camp-registration { color:#6a4b30; font-size:17px; font-weight:850; }
.activities-overview>.activities-hub .school-notices .camp-teaser-copy { display:grid; grid-template-columns:minmax(0,1fr) 106px; grid-template-rows:auto 1fr; column-gap:13px; align-items:center; }
.activities-overview>.activities-hub .school-notices .camp-teaser-copy>h3 { grid-column:1; grid-row:1; }
.activities-overview>.activities-hub .school-notices .camp-teaser dl { grid-column:1; grid-row:2; gap:3px; margin:6px 0 0; }
.activities-overview>.activities-hub .school-notices .camp-teaser dl div { grid-template-columns:42px minmax(0,1fr); font-size:13px; }
.activities-overview>.activities-hub .school-notices .camp-teaser dl div:nth-child(3) { display:grid; }
.activities-overview>.activities-hub .school-notices .camp-teaser dl div:first-child { padding:5px 7px; border-radius:8px; background:#fff2df; color:#95552d; font-size:14px; font-weight:800; }
.activities-overview>.activities-hub .school-notices .camp-teaser dl div:first-child dt,.activities-overview>.activities-hub .school-notices .camp-teaser dl div:first-child dd { color:inherit; font-weight:inherit; }
.activities-overview>.activities-hub .school-notices .camp-teaser dl div:first-child dd { font-size:16px; letter-spacing:.01em; }
.activities-overview>.activities-hub .school-notices .camp-teaser-actions { grid-column:2; grid-row:1 / span 2; justify-self:stretch; display:grid; align-content:center; gap:8px; margin:0; }
.activities-overview>.activities-hub .school-notices .camp-register,.activities-overview>.activities-hub .school-notices .camp-details { min-height:36px; padding:0 8px; font-size:13px; text-align:center; }
.activities-overview>.activities-hub .past-activity-list .past-activity-card>img { height:46px!important; aspect-ratio:auto; }
.activities-overview>.more-courses { padding:7px 10px; }
.activities-overview>.more-courses .section-title { margin-bottom:5px; }
.activities-overview>.more-courses .section-title h2 { font-size:16px; }
.activities-overview>.more-courses .more-course-grid a { min-height:52px; padding:5px 7px; }
.activities-overview>.more-courses .interest-course-cover { height:27px; }
@media(max-width:820px){
  .activities-overview>.teacher-directory>.teacher-list { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:520px){
  .activities-overview { padding:0 10px 16px; }
  .activities-overview>.teacher-directory,.activities-overview>.activities-hub,.activities-overview>.more-courses { border-radius:17px; }
  .activities-overview>.activities-hub .school-notices-title-row,.activities-overview>.more-courses .section-title { gap:6px; }
  .section-language-switch { gap:3px; }
  .section-language-switch button { padding:0 6px; font-size:9px; }
}
@media(max-width:620px){
  .activities-overview>.activities-hub .school-notices .camp-teaser { grid-template-columns:105px minmax(0,1fr); gap:9px; }
  .activities-overview>.activities-hub .school-notices .camp-teaser-copy { grid-template-columns:1fr; grid-template-rows:auto auto auto; }
  .activities-overview>.activities-hub .school-notices .camp-teaser-copy>h3,.activities-overview>.activities-hub .school-notices .camp-teaser dl,.activities-overview>.activities-hub .school-notices .camp-teaser-actions { grid-column:1; }
  .activities-overview>.activities-hub .school-notices .camp-teaser-copy>h3 { grid-row:1; }
  .activities-overview>.activities-hub .school-notices .camp-teaser dl { grid-row:2; }
  .activities-overview>.activities-hub .school-notices .camp-teaser-actions { grid-row:3; display:flex; justify-content:flex-start; margin-top:7px; }
  .activities-overview>.activities-hub .school-notices .camp-register,.activities-overview>.activities-hub .school-notices .camp-details { padding:0 11px; }
}

/* Each foundational module shows a real, non-interactive first-screen preview
   so children can recognise where a link will take them before opening it. */
.foundation-preview-cards { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.foundation-preview-cards a { min-width:0; padding:11px; border-radius:20px; }
.foundation-preview-cards strong { display:block; margin-top:8px; font-size:21px; }
.foundation-preview-cards p { margin:5px 0 0; font-size:12px; line-height:1.45; }
.foundation-static-preview { display:block; aspect-ratio:3/2; overflow:hidden; border:1px solid #cbdac7; border-radius:12px; background:#fff; box-shadow:inset 0 0 0 1px #ffffff99; }
.foundation-static-preview img { display:block; width:100%; height:100%; object-fit:cover; object-position:top center; }
.foundation-preview-cards a:nth-child(2) .foundation-static-preview { border-color:#bfd69c; }
.foundation-preview-cards a:nth-child(3) .foundation-static-preview { border-color:#d7c0e6; }
@media(max-width:650px){
  .foundation-preview-cards { grid-template-columns:1fr; gap:12px; }
  .foundation-static-preview { aspect-ratio:3/2; }
}

/* Keep the materials overview to a single desktop view by making the two
   four-card download rows compact while preserving legible cover previews. */
@media(min-width:701px){
  .review-hub { margin-top:8px; margin-bottom:10px; }
  .review-hub .review-book-practice,.review-hub .review-textbook-downloads { margin-bottom:9px; }
  .review-hub .section-title { margin-bottom:6px; }
  .review-hub .textbook-download-grid { gap:7px; }
  .review-hub .textbook-download-grid article { gap:3px; padding:5px; border-radius:12px; }
  .textbook-cover-preview img { aspect-ratio:4/5; }
  .copybook-cover-preview img { aspect-ratio:5/6; }
  .review-hub .textbook-download-grid strong { font-size:12px; }
  .review-hub .textbook-download-grid .pdf-download { padding:4px 6px; font-size:10px; }
}
.interest-course-cover { display:block; width:100%; height:66px; border-radius:10px; object-fit:cover; object-position:center 38%; }

/* Dedicated Chinese-painting page: calm paper-like treatment, with the full
   curriculum, credentials and artwork gallery one step away from the compact card. */
.painting-hero { display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:22px; width:min(100%,860px); margin:14px auto; padding:22px; border:1px solid #d29da0; border-radius:24px; background:#fffdf8; }
.painting-hero h1 { margin:0 0 5px; color:#49382b; font-family:STKaiti,"Kaiti SC","KaiTi",serif; font-size:clamp(32px,5vw,45px); font-weight:500; }
.painting-kicker { margin:0 0 6px; color:#b95e64; font-size:13px; font-weight:700; letter-spacing:.08em; }
.painting-lead { margin:0 0 9px; color:#6d4735; font-family:STKaiti,"Kaiti SC","KaiTi",serif; font-size:20px; }
.painting-hero p:not(.painting-kicker):not(.painting-lead) { margin:0; color:#645c53; font-size:14px; line-height:1.7; }
.painting-hero>img { display:block; width:100%; height:260px; border-radius:16px; object-fit:cover; object-position:center 32%; }
.painting-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:13px; }
.painting-tags span { padding:5px 9px; border-radius:13px; background:#f2eadb; color:#79583e; font-size:12px; }
.painting-learning,.painting-teacher,.painting-gallery,.painting-register { width:min(100%,860px); margin:14px auto; padding:18px; border:1px solid #ded6c5; border-radius:22px; background:#fff; }
.painting-learning h2,.painting-teacher h2,.painting-register h2 { margin:0 0 10px; color:#5b4634; font-size:20px; }
.painting-learning>div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.painting-learning article { display:grid; gap:5px; padding:12px; border-radius:15px; background:#fcf8f1; }
.painting-learning strong { color:#795438; font-size:14px; }
.painting-learning span,.painting-teacher p { color:#655e56; font-size:13px; line-height:1.6; }
.painting-teacher p { margin:0; }
.painting-teacher details { margin-top:10px; color:#635a50; font-size:13px; line-height:1.6; }
.painting-teacher summary { color:#80583a; font-weight:700; cursor:pointer; }
.painting-teacher ul { margin:8px 0 0; padding-left:20px; }
.painting-gallery .section-title { margin:0 0 10px; text-align:center; }
.painting-gallery .section-title h2 { margin:0; color:#5b4634; font-size:20px; }
.painting-gallery>div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.painting-gallery a { display:block; overflow:hidden; border-radius:12px; background:#f0e7d8; }
.painting-gallery img { display:block; width:100%; aspect-ratio:1/1; object-fit:cover; transition:transform .18s ease; }
.painting-gallery a:hover img,.painting-gallery a:focus-visible img { transform:scale(1.04); }
.painting-gallery a:focus-visible { outline:2px solid #956441; outline-offset:3px; }
.painting-register { display:flex; align-items:center; justify-content:center; gap:28px; background:#fffcf5; }
.painting-register>div { max-width:430px; }
.painting-register p { margin:0 0 9px; color:#655e56; font-size:14px; line-height:1.6; }
.painting-register>div>a { color:#80583a; font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.painting-qr { display:grid; gap:6px; width:150px; color:#795438; font-size:11px; font-weight:700; text-align:center; text-decoration:none; }
.painting-qr img { display:block; width:150px; height:150px; padding:5px; border:1px solid #d7989d; border-radius:12px; background:#fff; image-rendering:auto; }
.painting-qr:hover,.painting-qr:focus-visible { outline:2px solid #956441; outline-offset:3px; }
@media(max-width:620px) {
  .painting-hero { grid-template-columns:1fr; padding:16px; }
  .painting-hero>img { width:min(100%,230px); height:210px; margin:0 auto; }
  .painting-learning>div { grid-template-columns:1fr; }
  .painting-gallery>div { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .painting-register { align-items:flex-start; flex-direction:column; gap:14px; }
}

/* The materials hub has two equal, clear functions: enter a lesson above,
   or preview and download a textbook below. */
.review-hub { width:min(100%,760px); margin:14px auto 22px; }
.review-hub .review-book-practice,.review-hub .review-textbook-downloads { margin:0 0 17px; }
.review-hub .section-title { margin:0 0 10px; text-align:center; }
.review-hub .section-title h2 { margin:0; color:#4d6546; font-size:20px; }
.review-hub .review-book-grid { margin:0; }
.review-hub .review-book-bubble { min-height:74px; font-size:16px; }
.review-hub .review-textbook-downloads .section-title h2 { color:#74588d; font-size:17px; }
.review-hub .textbook-download-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.review-hub .textbook-download-grid article { display:grid; gap:5px; min-width:0; padding:8px; border:1px solid #d8c9e5; border-radius:15px; background:#fdfaff; color:#665177; text-align:center; }
.review-hub .textbook-download-grid article:nth-child(2) { border-color:#cbdcbf; background:#fbfef9; color:#4b7358; }
.review-hub .textbook-download-grid article:nth-child(3) { border-color:#d3ddd1; background:#fdfefc; color:#5d7457; }
.review-hub .textbook-download-grid article:nth-child(4) { border-color:#e38c92; background:#fffdf8; color:#b5444b; }
.textbook-cover-preview { display:block; overflow:hidden; border-radius:9px; background:#f0e8dc; }
.textbook-cover-preview img { display:block; width:100%; aspect-ratio:17/24; object-fit:cover; transition:transform .16s ease; }
.textbook-cover-preview:hover img,.textbook-cover-preview:focus-visible img { transform:scale(1.03); }
.textbook-cover-preview:focus-visible { outline:2px solid currentColor; outline-offset:2px; }
.review-hub .textbook-download-grid strong { font-size:13px; }
.review-hub .textbook-download-grid .pdf-download { display:block; padding:5px 7px; border-radius:8px; background:#f0deaf; color:#a42c34; font-size:11px; font-weight:700; line-height:1.25; text-decoration:none; }
.review-hub .textbook-download-grid .pdf-download:hover,.review-hub .textbook-download-grid .pdf-download:focus-visible { background:#e7888e; outline:2px solid currentColor; outline-offset:1px; }
.review-copybook-downloads .section-title { margin-top:4px!important; }
.review-hub .review-copybook-downloads .section-title h2 { color:#a5474e; }
.review-copybook-downloads .textbook-download-grid article { border-color:#e6d6b5; background:#fffcf6; color:#a3494f; }
.review-copybook-downloads .textbook-download-grid article:nth-child(2) { border-color:#e6d6b5; background:#fffcf6; color:#a3494f; }
.review-copybook-downloads .textbook-download-grid article:nth-child(3) { border-color:#e6d6b5; background:#fffcf6; color:#a3494f; }
.review-copybook-downloads .textbook-download-grid article:nth-child(4) { border-color:#e6d6b5; background:#fffcf6; color:#a3494f; }
.copybook-cover-preview { display:block; overflow:hidden; border-radius:9px; background:#fff; }
.copybook-cover-preview img { display:block; width:100%; aspect-ratio:4/5; object-fit:cover; object-position:top; transition:transform .16s ease; }
.copybook-cover-preview:hover img,.copybook-cover-preview:focus-visible img { transform:scale(1.03); }
.copybook-cover-preview:focus-visible { outline:2px solid currentColor; outline-offset:2px; }
@media(max-width:540px) {
  .review-hub .textbook-download-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .review-hub .textbook-download-grid article { padding:9px; }
}

/* Desktop materials overview: keep both four-book rows available before the
   footer while retaining an immediately recognisable cover thumbnail. */
@media(min-width:701px) {
  .review-hub { margin:8px auto 10px; }
  .review-hub .review-book-practice,.review-hub .review-textbook-downloads { margin-bottom:7px; }
  .review-hub .section-title { margin-bottom:4px; }
  .review-hub .section-title h2 { font-size:17px; }
  .review-hub .review-book-bubble { min-height:52px; font-size:14px; }
  .review-hub .textbook-download-grid { gap:6px; }
  .review-hub .textbook-download-grid article { gap:3px; padding:5px; border-radius:11px; }
  .review-hub .textbook-cover-preview img { height:120px; aspect-ratio:auto; object-fit:contain; }
  .review-hub .copybook-cover-preview img { height:94px; aspect-ratio:auto; object-fit:contain; }
  .review-hub .textbook-download-grid strong { font-size:11px; }
  .review-hub .textbook-download-grid .pdf-download { padding:3px 5px; font-size:9px; }
}

/* Current and past activities are one compact activity centre, while the
   separate interest-course promotion follows below. */
.activity-hub-kicker { margin:0 0 3px; color:#a45a22; font-size:12px; font-weight:700; letter-spacing:.08em; }
.activities-hub { width:min(100%,800px); margin:0 auto 18px; padding:16px; border:1px solid #e1d4bd; border-radius:22px; background:#fffdf9; }
.activities-hub .school-notices { width:100%; margin:0 0 15px; }
.activities-hub .past-activities { width:100%; margin:0; padding-top:13px; border-top:1px dashed #d49b9f; }
.activities-hub .past-activities .section-title { margin:0 0 8px; }
.activities-hub .past-activities .section-title h3 { margin:0; color:#7a6642; font-size:17px; }
.school-notices .activity-hub-kicker { color:#a45a22; }
@media(max-width:620px) { .activities-hub { padding:13px; border-radius:18px; } }

/* Past-event archive: keep the course page compact, with fuller stories on demand. */
.past-activities { width:min(100%,690px); margin:12px auto 16px; }
.past-activities .section-title { margin:0 0 6px; text-align:left; }
.past-activities .section-title h2 { margin:0; color:#7a6642; font-size:17px; }
.past-activity-card { display:grid; grid-template-columns:116px minmax(0,1fr); gap:11px; align-items:center; padding:8px; border:1px solid #d39c9f; border-radius:16px; background:#fffdf7; color:#53483e; box-shadow:0 3px 10px #74604412; text-decoration:none; transition:transform .16s ease,box-shadow .16s ease; }
.past-activity-card:hover,.past-activity-card:focus-visible { transform:translateY(-1px); box-shadow:0 7px 16px #74604422; outline:none; }
.past-activity-card>img { display:block; width:116px; height:78px; border-radius:10px; object-fit:cover; }
.past-activity-card>span { display:grid; gap:3px; min-width:0; }
.past-activity-card small { color:#b4767a; font-size:11px; font-weight:700; }
.past-activity-card strong { color:#5d493b; font-size:15px; }
.past-activity-card em { color:#9b6549; font-size:12px; font-style:normal; }
.past-activity-list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.past-activity-list .past-activity-card { grid-template-columns:1fr; gap:6px; min-height:0; padding:6px; border-radius:13px; }
.past-activity-list .past-activity-card>img { width:100%; height:auto; aspect-ratio:4/3; border-radius:8px; object-fit:cover; }
.past-activity-list .past-activity-card>span { gap:2px; padding:0 2px 2px; }
.past-activity-list .past-activity-card strong { font-size:12px; line-height:1.3; }
.past-activity-list .past-activity-card small { font-size:10px; }
.past-camp-hero,.past-camp-story { width:min(100%,860px); margin:16px auto; padding:20px; border:1px solid #e1d4bd; border-radius:18px; background:#fffdf8; box-shadow:0 4px 15px #705b3612; }
.past-camp-hero { display:grid; grid-template-columns:minmax(0,1fr) 230px; gap:20px; align-items:center; }
.past-camp-hero h1 { margin:2px 0 8px; color:#684a35; font-size:28px; }
.past-camp-hero p { color:#62564b; line-height:1.8; }
.past-camp-hero .painting-lead { color:#9a634b; font-size:16px; }
.past-camp-hero>img { display:block; width:100%; height:176px; border-radius:14px; object-fit:cover; }
.past-camp-story h2 { margin:0; color:#715238; font-size:21px; }
.past-camp-story>div:not(.past-camp-gallery-grid) { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:12px; }
.past-camp-story article { display:grid; gap:5px; padding:12px; border-radius:12px; background:#f7f0e4; }
.past-camp-story article strong { color:#72523a; font-size:15px; }
.past-camp-story article span,.past-camp-story>p { color:#665b50; font-size:13px; line-height:1.65; }
.past-camp-story>p { margin:13px 0 0; }
.past-camp-gallery-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin-top:12px; }
.past-camp-gallery-grid a { display:block; overflow:hidden; border-radius:10px; background:#eee6d8; aspect-ratio:1/1; }
.past-camp-gallery-grid img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .16s ease; }
.past-camp-gallery-grid a:hover img,.past-camp-gallery-grid a:focus-visible img { transform:scale(1.05); }
.past-camp-gallery-grid a:focus-visible { outline:2px solid #a36d4a; outline-offset:2px; }
@media(max-width:700px) { .past-camp-hero { grid-template-columns:1fr; } .past-camp-hero>img { height:210px; } .past-camp-story>div:not(.past-camp-gallery-grid) { grid-template-columns:1fr; } .past-camp-gallery-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:500px) { .past-activity-list { grid-template-columns:repeat(2,minmax(0,1fr)); } .past-camp-hero,.past-camp-story { padding:15px; border-radius:15px; } .past-camp-hero h1 { font-size:24px; } .past-camp-gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* The class entry is the primary task on the activities page.  Its stronger
   blue frame creates a clear first stop, while the news and course promotion
   share one intentionally smaller companion panel. */
.activities-overview>.teacher-directory { border:2px solid #a1bc99; background:linear-gradient(180deg,#f4faf2 0,#fdfefc 42%); box-shadow:0 10px 24px #315e7a1c, inset 0 4px 0 #729369; }
.activities-overview>.teacher-directory .teacher-directory-title h1 { color:#45623d; }
.activities-overview>.teacher-directory .teacher-directory-note { color:#587550; font-weight:750; }
.activities-overview>.teacher-directory .teacher-directory-hint { color:#6c8465; }
.activities-overview>.compact-activity-suite { padding:9px 10px 10px; border-color:#eadbc5; background:#fffdf9; }
.compact-activity-suite .activity-courses-row { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(180px,.62fr); gap:9px; align-items:stretch; }
.compact-activity-suite .school-notices { display:block; min-width:0; margin:0!important; }
.compact-activity-suite .school-notices .section-title { margin:0 0 5px; }
.compact-activity-suite .school-notices .section-title h2 { font-size:16px; }
.compact-activity-suite .school-notices .camp-teaser { grid-template-columns:82px minmax(0,1fr); gap:9px; min-height:0; padding:7px; border-radius:16px; }
.compact-activity-suite .school-notices .notice-poster { border-radius:10px; }
.compact-activity-suite .school-notices .camp-teaser h3 { display:block; overflow:hidden; margin-right:0; font-size:14px; line-height:1.25; white-space:nowrap; }
.compact-activity-suite .school-notices .camp-title,.compact-activity-suite .school-notices .camp-registration { display:inline; white-space:nowrap; }
.compact-activity-suite .school-notices .camp-registration { margin-left:5px; font-size:14px; }
.activities-overview>.compact-activity-suite .school-notices .camp-teaser h3 { display:block; overflow:visible; font-size:13px; line-height:1.3; white-space:nowrap; }
.activities-overview>.compact-activity-suite .school-notices .camp-title,.activities-overview>.compact-activity-suite .school-notices .camp-registration { display:inline; white-space:nowrap; }
.activities-overview>.compact-activity-suite .school-notices .camp-registration { margin-left:4px; font-size:13px; }
.compact-activity-suite .school-notices .camp-teaser-copy { grid-template-columns:minmax(0,1fr) 82px; column-gap:8px; }
.compact-activity-suite .school-notices .camp-teaser dl { gap:2px; margin-top:4px; }
.compact-activity-suite .school-notices .camp-teaser dl div { grid-template-columns:34px minmax(0,1fr); font-size:11px; }
.compact-activity-suite .school-notices .camp-teaser dl div:first-child { padding:3px 5px; font-size:12px; }
.compact-activity-suite .school-notices .camp-teaser dl div:first-child dd { font-size:13px; }
.compact-activity-suite .school-notices .camp-teaser-actions { gap:5px; }
.compact-activity-suite .school-notices .camp-register,.compact-activity-suite .school-notices .camp-details { min-height:29px; padding:0 5px; border-radius:14px; font-size:11px; }
.compact-activity-suite .more-courses { display:grid; grid-template-rows:auto minmax(0,1fr); width:100%; margin:0; padding:7px; border:1px solid #dee5dc; border-radius:16px; background:#fdfefd; }
.compact-activity-suite .more-courses .section-title { margin:0 0 5px; text-align:center; }
.compact-activity-suite .more-courses .section-title h2 { font-size:15px; }
.compact-activity-suite .more-courses .more-course-grid { grid-template-columns:1fr; grid-template-rows:repeat(2,minmax(0,1fr)); height:100%; gap:5px; }
.compact-activity-suite .more-courses .more-course-grid a,.compact-activity-suite .more-courses .course-placeholder { display:grid; min-width:0; min-height:0; gap:2px; padding:6px; border:1px solid #dae3d7; border-radius:11px; background:#fdfefc; color:#6b7c66; text-decoration:none; }
.compact-activity-suite .more-courses .more-course-grid a { display:flex; align-items:center; gap:9px; padding:7px; text-align:left; }
.compact-activity-suite .more-courses .course-placeholder { place-content:center; border-style:dashed; background:#fafbf9; color:#879084; text-align:center; }
.compact-activity-suite .more-courses .interest-course-cover { grid-row:span 2; width:54px; height:54px; border-radius:8px; }
.compact-activity-suite .more-courses .more-course-grid strong { flex:1; font-size:11px; line-height:1.2; text-align:center; }
.compact-activity-suite .more-courses .more-course-grid strong>span { display:block; }
.compact-activity-suite .more-courses .more-course-grid strong>span:first-child { color:#4d6546; font-size:14px; font-weight:800; }
.compact-activity-suite .more-courses .more-course-grid strong>span:not(:first-child) { margin-top:2px; color:#7c8779; font-size:10px; font-weight:400; line-height:1.25; }
.compact-activity-suite .more-courses .more-course-grid small { display:block; color:inherit; font-size:10px; line-height:1.3; opacity:.82; }
.compact-activity-suite .more-courses .more-course-grid span { display:none; }
.compact-activity-suite .past-activities { margin-top:8px; padding-top:7px; }
.compact-activity-suite .past-activity-list .past-activity-card>img { height:42px!important; }
@media(max-width:620px) {
  .compact-activity-suite .activity-courses-row { grid-template-columns:1fr; }
  .compact-activity-suite .school-notices .camp-teaser { grid-template-columns:94px minmax(0,1fr); }
  .activities-overview>.compact-activity-suite .school-notices .camp-teaser h3 { overflow:visible; font-size:12px; line-height:1.35; white-space:normal; }
}

/* Small-screen activity card: keep the three key facts compact and scannable.
   The poster stays visible, but no longer takes width away from the location. */
@media(max-width:620px) {
  .activities-overview { padding:0 8px 10px; }
  .activities-overview>.teacher-directory { margin-bottom:8px; padding:10px 9px 5px; }
  .activities-overview>.teacher-directory>.teacher-list { margin:7px auto 16px; gap:5px; }
  .activities-overview>.teacher-directory>.teacher-list>.teacher-list-item { min-height:38px; padding:3px 2px; }
  .activities-overview>.teacher-directory>.teacher-list>.teacher-list-item .teacher-name-bubble { font-size:13px; }
  .teacher-directory-note { font-size:18px; }
  .teacher-directory-hint { margin-top:-13px; font-size:11px; }

  .activities-overview>.compact-activity-suite { margin-bottom:7px; padding:7px 8px 8px; }
  .compact-activity-suite .activity-courses-row { gap:7px; }
  .compact-activity-suite .school-notices .section-title { margin-bottom:3px; }
  .compact-activity-suite .school-notices .section-title h2 { font-size:15px; }
  .compact-activity-suite .school-notices .camp-teaser { grid-template-columns:72px minmax(0,1fr); gap:7px; padding:6px; border-radius:13px; align-items:start; }
  .compact-activity-suite .school-notices .camp-teaser-copy { grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto; min-width:0; }
  .compact-activity-suite .school-notices .camp-teaser-copy>h3,
  .compact-activity-suite .school-notices .camp-teaser dl,
  .compact-activity-suite .school-notices .camp-teaser-actions { grid-column:1; }
  .compact-activity-suite .school-notices .camp-teaser-copy>h3 { grid-row:1; display:block; margin:0; overflow:visible; font-size:11px; line-height:1.2; white-space:normal; }
  .compact-activity-suite .school-notices .camp-title,
  .compact-activity-suite .school-notices .camp-registration { display:block; margin:0; overflow-wrap:anywhere; white-space:normal; }
  .compact-activity-suite .school-notices .camp-registration { margin-top:1px; font-size:11px; }
  .compact-activity-suite .school-notices .camp-teaser dl { grid-row:2; gap:1px; min-width:0; margin:3px 0 0; }
  .compact-activity-suite .school-notices .camp-teaser dl div { grid-template-columns:31px minmax(0,1fr); gap:2px; min-width:0; font-size:9.5px; line-height:1.2; }
  .compact-activity-suite .school-notices .camp-teaser dl div:first-child { padding:2px 3px; font-size:9.5px; }
  .compact-activity-suite .school-notices .camp-teaser dl div:first-child dd { font-size:10.5px; }
  .compact-activity-suite .school-notices .camp-teaser dl dd,
  .compact-activity-suite .school-notices .camp-teaser dl dd a { min-width:0; letter-spacing:-.035em; white-space:nowrap; }
  .compact-activity-suite .school-notices .camp-teaser-actions { grid-row:3; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; width:100%; margin-top:4px; }
  .compact-activity-suite .school-notices .camp-register,
  .compact-activity-suite .school-notices .camp-details { width:100%; min-width:0; min-height:26px; padding:0 3px; border-radius:13px; font-size:10px; white-space:nowrap; }
  .compact-activity-suite .more-courses { padding:6px; }
  .compact-activity-suite .more-courses .more-course-grid { gap:4px; }
  .compact-activity-suite .more-courses .more-course-grid a { min-height:47px; padding:5px; }
  .compact-activity-suite .more-courses .interest-course-cover { width:44px; height:44px; }
  .compact-activity-suite .past-activities { margin-top:6px; padding-top:5px; }
  .compact-activity-suite .past-activity-list { gap:4px; }
  .compact-activity-suite .past-activity-list .past-activity-card { padding:4px; }
  .compact-activity-suite .past-activity-list .past-activity-card>img { height:36px!important; }
}

/* A shared image viewer keeps photo previews on the page and gives every
   enlarged picture a clear close action for touch users. */
.image-lightbox { box-sizing:border-box; width:min(960px,calc(100vw - 24px)); max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); margin:auto; padding:12px; border:0; border-radius:18px; background:#202a1e; box-shadow:0 20px 60px #0008; }
.image-lightbox::backdrop { background:#111b25cc; backdrop-filter:blur(2px); }
.image-lightbox-frame { position:relative; display:grid; place-items:center; min-width:0; }
.image-lightbox img { display:block; width:auto; max-width:100%; max-height:calc(100dvh - 62px); border-radius:10px; object-fit:contain; }
.image-lightbox-close { position:absolute; top:7px; right:7px; display:grid; place-items:center; width:36px; height:36px; border:0; border-radius:50%; background:#ffffffeb; color:#2f3c2c; box-shadow:0 2px 9px #0005; font:700 25px/1 system-ui,sans-serif; cursor:pointer; }
.image-lightbox-close:hover,.image-lightbox-close:focus-visible { background:#fff; outline:3px solid #ef8087; outline-offset:2px; }
@media(max-width:620px) { .image-lightbox { width:calc(100vw - 16px); max-width:calc(100vw - 16px); max-height:calc(100dvh - 16px); padding:8px; border-radius:14px; } .image-lightbox img { max-height:calc(100dvh - 40px); border-radius:8px; } .image-lightbox-close { top:5px; right:5px; width:34px; height:34px; } }

.camp-fact-short { display:none; }
@media(max-width:620px) {
  html,body { max-width:100%; overflow-x:clip; }
  .compact-activity-suite .school-notices .camp-fact-full { display:none; }
  .compact-activity-suite .school-notices .camp-fact-short { display:inline; }
  .activities-overview>.compact-activity-suite .school-notices .camp-teaser-copy { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto; width:100%; max-width:100%; min-width:0; }
  .activities-overview>.compact-activity-suite .school-notices .camp-teaser-copy>h3 { grid-column:1; grid-row:1; display:block; width:100%; max-width:100%; margin:0; overflow:visible; font-size:11px; line-height:1.2; white-space:normal; }
  .activities-overview>.compact-activity-suite .school-notices .camp-title,
  .activities-overview>.compact-activity-suite .school-notices .camp-registration { display:block; margin:0; overflow-wrap:anywhere; white-space:normal; }
  .activities-overview>.compact-activity-suite .school-notices .camp-registration { margin-top:1px; font-size:11px; }
  .activities-overview>.compact-activity-suite .school-notices .camp-teaser dl { grid-column:1; grid-row:2; width:100%; max-width:100%; min-width:0; margin:3px 0 0; }
  .activities-overview>.compact-activity-suite .school-notices .camp-teaser dl div { grid-template-columns:31px minmax(0,1fr); gap:2px; min-width:0; font-size:9.5px; line-height:1.2; }
  .activities-overview>.compact-activity-suite .school-notices .camp-teaser dl div:first-child { padding:2px 3px; font-size:9.5px; }
  .activities-overview>.compact-activity-suite .school-notices .camp-teaser dl div:first-child dd { font-size:10.5px; }
  .activities-overview>.compact-activity-suite .school-notices .camp-teaser dl dd,
  .activities-overview>.compact-activity-suite .school-notices .camp-teaser dl dd a { min-width:0; letter-spacing:-.035em; white-space:nowrap; }
  .activities-overview>.compact-activity-suite .school-notices .camp-teaser-actions { grid-column:1; grid-row:3; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; width:100%; margin-top:4px; }
  .activities-overview>.compact-activity-suite .school-notices .camp-register,
  .activities-overview>.compact-activity-suite .school-notices .camp-details { width:100%; min-width:0; min-height:26px; padding:0 3px; font-size:10px; white-space:nowrap; }
  .image-lightbox img { touch-action:pan-x pan-y pinch-zoom; }
}

/* Keep the three practical home choices in one short row under the calendar. */
body[data-calendar-static="true"] .class-main { width:min(100%,960px); margin:0 auto; padding:9px 14px 6px; }
body[data-calendar-static="true"] .calendar-section { margin-bottom:8px; padding:11px 14px 7px; }
body[data-calendar-static="true"] .calendar-month { min-height:198px; }
body[data-calendar-static="true"] .calendar-date { height:29px; }
body[data-calendar-static="true"] .calendar-key { margin-top:6px; }
body[data-calendar-static="true"] .calendar-footnote { margin:5px 0 0; }
body[data-calendar-static="true"] .school-location-grid { grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; gap:9px; width:min(100%,720px); margin:0 auto 7px; }
body[data-calendar-static="true"] .school-location-card,body[data-calendar-static="true"] .home-new-activity-bubble { min-height:70px; padding:8px 9px; border-radius:14px; }
body[data-calendar-static="true"] .school-location-card { gap:4px; }
body[data-calendar-static="true"] .school-location-copy { gap:5px; }
body[data-calendar-static="true"] .school-location-copy strong { font-size:12px; }
body[data-calendar-static="true"] .school-location-copy span,body[data-calendar-static="true"] .school-location-address { font-size:10px; }
body[data-calendar-static="true"] .school-location-address { padding-top:4px; line-height:1.32; }
body[data-calendar-static="true"] .home-new-activity-bubble { display:grid; align-content:center; justify-items:center; gap:3px; width:auto; max-width:none; margin:0; padding-inline:9px; text-align:center; }
body[data-calendar-static="true"] .home-new-activity-bubble span { padding:2px 6px; font-size:10px; }

/* Keep the current-camp card deliberately secondary to the class directory.
   The shorter poster and quieter location line keep the date and actions easy
   to scan without letting the address dominate the small-screen layout. */
.activities-overview>.compact-activity-suite .school-notices .camp-teaser { grid-template-columns:70px minmax(0,1fr); }
.activities-overview>.compact-activity-suite .school-notices .camp-teaser-copy { grid-template-columns:minmax(0,1fr) 76px; }
.activities-overview>.compact-activity-suite .school-notices .camp-teaser dl div:nth-child(2) { color:#77808a; font-size:10px; }
.activities-overview>.compact-activity-suite .school-notices .camp-teaser dl div:nth-child(2) dt { color:#9b8066; font-weight:600; }
.activities-overview>.compact-activity-suite .school-notices .camp-teaser dl div:nth-child(2) dd { overflow:hidden; text-overflow:ellipsis; }
@media(max-width:620px) {
  .activities-overview>.compact-activity-suite .school-notices .camp-teaser { grid-template-columns:62px minmax(0,1fr); gap:6px; padding:5px; }
  .activities-overview>.compact-activity-suite .school-notices .camp-teaser dl div:nth-child(2) { font-size:8.6px; opacity:.8; }
}
body[data-calendar-static="true"] .home-new-activity-bubble strong { font-size:12px; white-space:normal; }
body[data-calendar-static="true"] .home-new-activity-bubble small { font-size:10px; white-space:normal; }

/* The homepage camp card is a deliberate invitation: a warm coral red makes
   it easy for families and children to spot without competing with the class
   information beside it. */
body[data-calendar-static="true"] .home-new-activity-bubble {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-color:#a82432;
  background:linear-gradient(135deg,#f36b50 0%,#dc4a43 52%,#b72638 100%);
  color:#fff;
  box-shadow:0 7px 16px #a6263b3d;
}
body[data-calendar-static="true"] .home-new-activity-bubble::before {
  position:absolute;
  z-index:-1;
  top:-28px;
  right:-20px;
  width:78px;
  height:78px;
  border:1px solid #ffffff4d;
  border-radius:50%;
  content:"";
}
body[data-calendar-static="true"] .home-new-activity-bubble span {
  background:#fff0c8;
  color:#9b2632;
}
body[data-calendar-static="true"] .home-new-activity-bubble strong,
body[data-calendar-static="true"] .home-new-activity-bubble small { color:#fff; }
body[data-calendar-static="true"] .home-new-activity-bubble:hover,
body[data-calendar-static="true"] .home-new-activity-bubble:focus-visible {
  transform:translateY(-2px);
  outline-color:#9d2430;
  box-shadow:0 10px 20px #87212f52;
}

/* Scheduled class pages keep the exact lesson and its exercise together. */
.scheduled-materials { margin-top:22px; padding-top:19px; border-top:1px solid #e6eae5; }
.scheduled-materials h2 { margin:0 0 10px; color:#285e54; font-size:19px; }
.scheduled-material-list { display:grid; gap:8px; }
.scheduled-material { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border:1px solid #e1e7df; border-radius:10px; background:#fcfdfc; }
.scheduled-material[href] { color:inherit; text-decoration:none; }
.scheduled-material[href]:hover,.scheduled-material[href]:focus-visible { border-color:#9cb495; background:#f8fbf8; outline:2px solid #688560; outline-offset:2px; }
.scheduled-material strong { color:#40553b; font-size:15px; }
.scheduled-material span { display:flex; flex-wrap:wrap; gap:7px; }
.scheduled-material[href] span { padding:5px 9px; border:1px solid #cbdac6; border-radius:8px; background:#f3f8f1; color:#4e6f45; font-size:14px; font-weight:650; }
.scheduled-material a { display:inline-flex; align-items:center; min-height:34px; padding:5px 10px; border:1px solid #b8d6c8; border-radius:8px; background:#eff9f3; color:#27624a; font-size:14px; font-weight:650; text-decoration:none; }
.scheduled-material a:last-child { border-color:#cbdac6; background:#f3f8f1; color:#4e6f45; }
.scheduled-material a:hover,.scheduled-material a:focus-visible { filter:brightness(.97); outline:2px solid #688560; outline-offset:2px; }
@media(max-width:560px) { .scheduled-material { align-items:flex-start; flex-direction:column; } .scheduled-material span { width:100%; } .scheduled-material a { flex:1; justify-content:center; } }
.course-entry-heading { margin:20px 0 16px; text-align:center; }
.course-entry-heading p { margin:0; color:#4f806c; font-size:14px; }
.course-entry-heading h1 { margin:3px 0; color:#3d5437; }
.course-entry-heading small { color:#768073; }
.schedule-course-entry { margin:0 auto; max-width:880px; }
.course-entry-back { margin:22px 0; text-align:center; }
.course-entry-empty { margin-top:32px; padding:22px; border:1px solid #e1e7e0; border-radius:14px; color:#6f796c; text-align:center; }
body[data-calendar-static="true"] .school-wechat-card { width:min(100%,360px); gap:7px; margin-bottom:4px; padding:3px 8px; border-radius:12px; }
body[data-calendar-static="true"] .school-wechat-card strong { font-size:12px; }
body[data-calendar-static="true"] .school-wechat-card small { display:none; }
body[data-calendar-static="true"] .school-qr-trigger { width:34px; height:34px; border-radius:8px; }
@media(max-width:620px) { body[data-calendar-static="true"] .school-location-grid { grid-template-columns:1fr; width:min(100%,420px); } }

/* Put the course-entry bubbles first on the materials page; download rows stay
   recognisable but take a little less vertical space. */
@media(min-width:701px) {
  .review-hub .review-book-practice { margin-bottom:9px; }
  .review-hub .review-book-bubble { min-height:62px; font-size:15px; }
  .review-hub .review-textbook-downloads { margin-bottom:6px; }
  .review-hub .review-textbook-downloads .textbook-cover-preview img { height:112px; }
  .review-hub .review-copybook-downloads .copybook-cover-preview img { height:82px; }
  .review-hub .review-copybook-downloads .textbook-download-grid article { padding:4px; }
}

/* Phone-first home calendar: show all nine months in a calm 3 × 3 grid.
   Nothing needs horizontal swiping, and the compact day cells keep the date
   and its label together. */
@media(max-width:620px) {
  body[data-calendar-static="true"] .calendar-section { padding:10px 8px 7px; }
  body[data-calendar-static="true"] .calendar-scroll { overflow-x:visible; margin-top:8px; }
  body[data-calendar-static="true"] .mini-calendar { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); min-width:0; width:100%; }
  body[data-calendar-static="true"] .calendar-month { min-width:0; min-height:0; }
  body[data-calendar-static="true"] .calendar-month h3 { display:flex; align-items:baseline; justify-content:space-between; gap:2px; min-height:26px; padding:4px 5px; font-size:12px; line-height:1.15; white-space:nowrap; }
  body[data-calendar-static="true"] .calendar-month h3 small { float:none; margin:0; font-size:8px; line-height:1; white-space:nowrap; }
  body[data-calendar-static="true"] .calendar-date { display:flex; align-items:center; gap:2px; height:22px; min-width:0; padding:2px 4px; font-size:9px; line-height:1; white-space:nowrap; }
  body[data-calendar-static="true"] .calendar-date strong { flex:0 0 13px; width:13px; font-size:10px; line-height:1; }
  body[data-calendar-static="true"] .calendar-key { justify-content:center; gap:5px 9px; margin-top:5px; font-size:10px; line-height:1.25; }
  body[data-calendar-static="true"] .calendar-key b { padding:1px 4px; font-size:9px; }
  body[data-calendar-static="true"] .calendar-footnote { font-size:10px; line-height:1.35; }
  body[data-calendar-static="true"] .school-location-address { overflow:visible; padding-top:4px; font-size:10px; letter-spacing:-.035em; white-space:nowrap; }
}
@media(min-width:621px) and (max-width:760px) {
  body[data-calendar-static="true"] .school-location-address { white-space:nowrap; font-size:10px; letter-spacing:-.035em; }
}

/* Exercise screens use an in-flow footer on phones. A fixed footer was sitting
   over the final row of controls, making lower practice buttons hard to tap. */
@media(max-width:700px) {
  body:not([data-calendar-static="true"]) .site-footer { position:static!important; }
  body:not([data-calendar-static="true"]) { padding-bottom:0!important; }
  button, a[href], [role="button"] { touch-action:manipulation; }
  .pinyin-page button, .foundation-page button, .practice-body button, .lesson-practice-layout button { min-height:44px; }
}

/* Class directory: make the school structure legible at a glance.  The first
   decision is the grade; the teacher and the corresponding course sit together
   rather than appearing as an unlabelled row of names. */
.activities-overview>.teacher-directory .teacher-directory-title small {
  display:block;
  margin-top:2px;
  color:#71856c;
  font-size:11px;
  font-weight:500;
}
.class-grade-list { display:grid; gap:7px; margin-top:11px; }
.class-grade-group { display:grid; grid-template-columns:78px minmax(0,1fr); gap:8px; align-items:stretch; }
.class-grade-group>h2 { display:flex; align-items:center; justify-content:center; min-width:0; margin:0; padding:7px 5px; border-radius:11px; background:#e7f0e4; color:#486440; font-size:13px; line-height:1.2; text-align:center; }
.class-grade-teachers { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:6px; min-width:0; }
.class-teacher-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:7px; min-width:0; min-height:40px; padding:5px 8px; border:1px solid #d6e1d3; border-radius:11px; background:#fff; box-shadow:0 2px 7px #315e7a0d; color:#4d6546; text-decoration:none; }
.class-teacher-card:hover,.class-teacher-card:focus-visible { border-color:#8fab88; background:#f9fcf8; transform:translateY(-1px); }
.class-teacher-card strong { color:#45623d; font-size:13px; white-space:nowrap; }
.class-teacher-card span { min-width:0; color:#72806e; font-size:11px; line-height:1.25; }
.class-teacher-card em { color:#7b9673; font-size:10px; font-style:normal; white-space:nowrap; }
.class-teacher-card { border-left:4px solid var(--teacher-accent,#93ae8c); background:linear-gradient(90deg,var(--teacher-tint,#f9fbf9),#fff 42%); }
.class-teacher-card strong { color:var(--teacher-ink,#45623d); }
.class-teacher-card[data-teacher="lin"] { --teacher-accent:#6e8d66; --teacher-tint:#f3f7f2; --teacher-ink:#516d49; }
.class-teacher-card[data-teacher="jiang"] { --teacher-accent:#dc868c; --teacher-tint:#fff8ec; --teacher-ink:#c2434b; }
.class-teacher-card[data-teacher="ma"] { --teacher-accent:#78a881; --teacher-tint:#f2faf1; --teacher-ink:#4e7d57; }
.class-teacher-card[data-teacher="zhang"] { --teacher-accent:#9b83bd; --teacher-tint:#f8f5fd; --teacher-ink:#725695; }
.class-teacher-card[data-teacher="du"] { --teacher-accent:#c9828b; --teacher-tint:#fff5f6; --teacher-ink:#9a5862; }
.class-teacher-card[data-teacher="yang"] { --teacher-accent:#d78085; --teacher-tint:#fffbed; --teacher-ink:#c12e37; }
.class-teacher-card[data-teacher="arui"] { --teacher-accent:#c07c9f; --teacher-tint:#fff5fa; --teacher-ink:#96506f; }
@media(min-width:821px) {
  .activities-overview { display:grid; grid-template-columns:minmax(410px,.96fr) minmax(460px,1.04fr); column-gap:14px; align-items:start; width:min(100%,1160px); }
  .activities-overview-language { grid-column:1 / -1; }
  .activities-overview>.teacher-directory { grid-column:1; grid-row:2; margin:0; padding:14px 14px 12px; }
  .activities-overview>.compact-activity-suite { grid-column:2; grid-row:2; margin:0; }
  .activities-overview>.teacher-directory>.teacher-list { display:none; }
}
@media(max-width:820px) {
  .class-grade-group { grid-template-columns:70px minmax(0,1fr); gap:6px; }
  .class-grade-group>h2 { font-size:12px; }
  .class-grade-teachers { grid-template-columns:1fr; gap:4px; }
  .class-teacher-card { min-height:36px; gap:5px; padding:4px 6px; }
  .class-teacher-card strong { font-size:12px; }
  .class-teacher-card span { font-size:10px; }
  .class-teacher-card em { display:none; }
}

/* The activities deserve their own reading rhythm.  After the class directory,
   stack the current notice, interest courses and past activities vertically so
   none of their content is squeezed into a dashboard column. */
.activities-overview { display:block; width:min(100%,800px); }
.activities-overview>.teacher-directory,
.activities-overview>.compact-activity-suite { margin:0 auto 11px; }
.compact-activity-suite .activity-courses-row { grid-template-columns:1fr; gap:10px; }
.compact-activity-suite .school-notices .camp-teaser { grid-template-columns:92px minmax(0,1fr); }
.compact-activity-suite .school-notices .camp-teaser-copy { grid-template-columns:minmax(0,1fr) 88px; }
.compact-activity-suite .more-courses { padding:8px 9px; }
.compact-activity-suite .past-activities { margin-top:10px; }
body.activities-page { padding-bottom:0!important; }
body.activities-page .site-footer { position:static!important; }
@media(max-width:620px) {
  .compact-activity-suite .school-notices .camp-teaser { grid-template-columns:72px minmax(0,1fr); }
  .compact-activity-suite .school-notices .camp-teaser-copy { grid-template-columns:minmax(0,1fr); }
}

/* Desktop overview: class selection stays on the left; the three activity
   sections form one calm, vertical right-hand rail. */
@media(min-width:821px) {
  .activities-overview { display:grid; grid-template-columns:minmax(420px,1fr) minmax(430px,.94fr); column-gap:14px; align-items:start; width:min(100%,1080px); }
  .activities-overview-language { grid-column:1 / -1; }
  .activities-overview>.teacher-directory { grid-column:1; grid-row:2; width:100%; margin:0; }
  .activities-overview>.more-courses { grid-column:1; grid-row:3; width:100%; margin:10px 0 0; }
  .activities-overview>.compact-activity-suite { grid-column:2; grid-row:2 / span 2; width:100%; margin:0; }
  .compact-activity-suite .activity-courses-row { grid-template-columns:1fr; }
}
.activities-overview>.more-courses .interest-course-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.activities-overview>.more-courses .more-course-grid>a,
.activities-overview>.more-courses .more-course-grid>.course-placeholder { min-height:74px; }
.activities-overview>.more-courses .more-course-grid>a { display:grid; grid-template-columns:46px minmax(0,1fr); grid-template-rows:1fr auto; column-gap:7px; align-items:center; padding:7px; text-align:left; }
.activities-overview>.more-courses .interest-course-cover { grid-row:1 / span 2; width:46px; height:46px; border-radius:8px; }
.activities-overview>.more-courses .more-course-grid strong { align-self:end; font-size:12px; line-height:1.15; text-align:center; }
.activities-overview>.more-courses .more-course-grid strong>span { display:block; }
.activities-overview>.more-courses .more-course-grid strong>span:first-child { color:#4d6546; font-size:14px; font-weight:800; }
.activities-overview>.more-courses .more-course-grid strong>span:not(:first-child) { margin-top:2px; color:#7c8779; font-size:9px; font-weight:400; line-height:1.15; }
.activities-overview>.more-courses .more-course-grid>a>span { display:none; }
.activities-overview>.more-courses .more-course-grid>.course-placeholder { display:grid; place-content:center; gap:2px; padding:7px; border:1px dashed #dae3d7; border-radius:12px; background:#fafbf9; color:#879084; text-align:center; }
.activities-overview>.more-courses .more-course-grid>.course-placeholder strong { font-size:13px; }
.activities-overview>.more-courses .more-course-grid>.course-placeholder small { font-size:10px; }
.compact-activity-suite .past-activity-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.compact-activity-suite .past-activity-list .past-activity-card>img { height:auto!important; aspect-ratio:16/9; }
.compact-activity-suite .past-activity-list .past-activity-card strong { font-size:11px; }
@media(max-width:620px) {
  .activities-overview>.more-courses .interest-course-grid { gap:5px; }
  .activities-overview>.more-courses .more-course-grid>a,
  .activities-overview>.more-courses .more-course-grid>.course-placeholder { min-height:58px; }
  .compact-activity-suite .past-activity-list { gap:5px; }
}

/* Activity details use icon-only pagination, so readers can move through the
   galleries without a second block of explanatory text. */
.activity-pager a { position:fixed; z-index:20; top:50%; display:grid; place-items:center; width:38px; height:38px; border:1px solid #c6d3c3; border-radius:50%; background:#fffffff0; box-shadow:0 4px 14px #234b681c; color:#4c6844; font:700 22px/1 system-ui,sans-serif; text-decoration:none; transform:translateY(-50%); }
.activity-pager-previous { left:18px; }
.activity-pager-next { right:18px; }
.activity-pager a:hover,.activity-pager a:focus-visible { border-color:#7e9a76; background:#f8fcf6; outline:2px solid #7e9a76; outline-offset:2px; }
@media(max-width:820px) {
  .activity-pager a { top:auto; bottom:15px; width:34px; height:34px; font-size:20px; transform:none; }
  .activity-pager-previous { left:12px; }
  .activity-pager-next { right:12px; }
}

/* Homepage calendar: choose the teaching day without adding another page. */
.calendar-day-switch { display:inline-flex; align-items:center; justify-content:flex-end; overflow:hidden; border:1px solid #c8d4c5; border-radius:999px; background:#fff; color:#5d6f58; font-size:13px; box-shadow:0 2px 8px #315e7a12; }
.calendar-section>.section-head>.calendar-day-switch { grid-column:3; justify-self:end; text-align:right; }
.calendar-day-switch button { min-width:48px; margin:0; padding:5px 11px; border:0; border-radius:0; background:transparent; color:#5d6f58; font:inherit; line-height:1.3; cursor:pointer; }
.calendar-day-switch button+button { border-left:1px solid #c8d4c5; }
.calendar-day-switch button[aria-pressed="true"] { background:#557b4a; color:#fff; font-weight:700; box-shadow:none; }
@media(max-width:720px) {
  body[data-calendar-static="true"] .calendar-section>.section-head { display:flex; flex-direction:row; align-items:center; gap:8px; }
  body[data-calendar-static="true"] .calendar-day-switch { width:auto; margin-left:auto; font-size:12px; }
  .calendar-day-switch button { min-width:43px; padding:4px 8px; }
}

/* R3 stroke tools: colour selection belongs on the same teaching row as the
   three study modes, matching the classroom reference layout. */
html body.lesson-workspace-page [data-lesson-workspace="grade1upper-r3"] .lesson-inline-stroke-host .stroke-play-controls{
  display:grid!important;grid-template-columns:minmax(440px,1fr) auto!important;align-items:center!important;gap:18px!important;
  min-height:54px!important;margin:0 0 14px!important;padding:0 10px!important;
}
html body.lesson-workspace-page [data-lesson-workspace="grade1upper-r3"] .lesson-inline-stroke-host .stroke-method-pills{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;
  padding-right:18px!important;border-right:1px solid #cfddcb!important;
}
html body.lesson-workspace-page [data-lesson-workspace="grade1upper-r3"] .lesson-inline-stroke-host .stroke-play-controls>.stroke-color-dots{
  position:static!important;inset:auto!important;display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;flex:0 0 auto!important;
  width:auto!important;min-width:0!important;height:auto!important;gap:7px!important;margin:0!important;padding:0!important;
  overflow:visible!important;background:transparent!important;border:0!important;box-shadow:none!important;
}
html body.lesson-workspace-page [data-lesson-workspace="grade1upper-r3"] .lesson-inline-stroke-host .stroke-play-controls>.stroke-color-dots:before{
  content:'笔画颜色';color:#3b5c32;font:700 13px/1 'Noto Sans SC',sans-serif;white-space:nowrap;
}
html body.lesson-workspace-page [data-lesson-workspace="grade1upper-r3"] .lesson-inline-stroke-host .stroke-play-controls>.stroke-color-dots>button{
  display:block!important;flex:0 0 26px!important;width:26px!important;height:26px!important;min-height:26px!important;margin:0!important;padding:0!important;
  border:2px solid #fff!important;border-radius:50%!important;box-shadow:0 0 0 1px #c2d3bd!important;
}
html body.lesson-workspace-page [data-lesson-workspace="grade1upper-r3"] .lesson-inline-stroke-host .stroke-play-controls>.stroke-color-dots>button[aria-pressed=true]{box-shadow:0 0 0 3px #3c5c33!important}
html body.lesson-workspace-page [data-lesson-workspace="grade1upper-r3"] .lesson-inline-stroke-host .stroke-play-controls>.stroke-color-dots>.stroke-custom-color{
  display:inline-flex!important;align-items:center!important;gap:4px!important;margin:0 0 0 2px!important;padding:2px 6px!important;
  border:1px solid #cbdac6!important;border-radius:999px!important;background:#fff!important;color:#4f6948!important;
  font:700 12px/1 'Noto Sans SC',sans-serif!important;white-space:nowrap!important;cursor:pointer!important;
}
html body.lesson-workspace-page [data-lesson-workspace="grade1upper-r3"] .lesson-inline-stroke-host .stroke-custom-icon{font-size:15px!important}
html body.lesson-workspace-page [data-lesson-workspace="grade1upper-r3"] .lesson-inline-stroke-host .stroke-custom-color input[type=color]{
  -webkit-appearance:none!important;appearance:none!important;width:23px!important;height:23px!important;margin:0!important;padding:0!important;
  border:0!important;border-radius:50%!important;background:transparent!important;cursor:pointer!important;overflow:hidden!important;
}
html body.lesson-workspace-page [data-lesson-workspace="grade1upper-r3"] .lesson-inline-stroke-host .stroke-custom-color input[type=color]::-webkit-color-swatch-wrapper{padding:0!important}
html body.lesson-workspace-page [data-lesson-workspace="grade1upper-r3"] .lesson-inline-stroke-host .stroke-custom-color input[type=color]::-webkit-color-swatch{border:0!important;border-radius:50%!important}
html body.lesson-workspace-page [data-lesson-workspace="grade1upper-r3"] .lesson-inline-stroke-host .stroke-stage{position:relative!important}
html body.lesson-workspace-page [data-lesson-workspace="grade1upper-r3"] .lesson-inline-stroke-host .stroke-demo-layer{
  position:absolute!important;inset:0!important;z-index:5!important;width:100%!important;height:100%!important;pointer-events:none!important;
}
html body.lesson-workspace-page [data-lesson-workspace="grade1upper-r3"] .lesson-inline-stroke-host .stroke-demo-layer svg{width:100%!important;height:100%!important}
@media(max-width:760px){
  html body.lesson-workspace-page [data-lesson-workspace="grade1upper-r3"] .lesson-inline-stroke-host .stroke-play-controls{grid-template-columns:1fr!important;gap:12px!important}
  html body.lesson-workspace-page [data-lesson-workspace="grade1upper-r3"] .lesson-inline-stroke-host .stroke-method-pills{padding-right:0!important;border-right:0!important}
  html body.lesson-workspace-page [data-lesson-workspace="grade1upper-r3"] .lesson-inline-stroke-host .stroke-play-controls>.stroke-color-dots{justify-content:center!important;flex-wrap:wrap!important}
}

/* The shared stroke component is used by every course, review modal and
   foundation exercise.  Keep its native Hanzi Writer layers in the exact same
   square as the Tianzige, then expose the colour chooser in every toolbar. */
.unified-strokes .stroke-target{position:relative!important}
.unified-strokes .stroke-demo-layer{position:absolute!important;inset:0!important;z-index:5!important;width:100%!important;height:100%!important;pointer-events:none!important}
.unified-strokes .stroke-demo-layer svg{width:100%!important;height:100%!important}
.unified-strokes .lesson-inline-stroke-expand{display:none!important}
html body.lesson-workspace-page [data-lesson-workspace] .lesson-inline-stroke-host.unified-strokes .lesson-inline-stroke-expand{display:none!important}
.unified-strokes .stroke-play-controls>.stroke-color-dots{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;gap:8px!important;margin-left:auto!important;padding:0!important}
.unified-strokes .stroke-play-controls>.stroke-color-dots>button{flex:0 0 26px!important;width:26px!important;height:26px!important;min-height:26px!important}
.unified-strokes .stroke-play-controls>.stroke-color-dots>.stroke-custom-color{display:inline-flex!important;flex:0 0 auto!important;align-items:center!important;gap:4px!important;margin:0!important;padding:2px 6px!important;border:1px solid #cbdac6!important;border-radius:999px!important;background:#fff!important;color:#4f6948!important;font:700 12px/1 'Noto Sans SC',sans-serif!important;white-space:nowrap!important}
.unified-strokes .stroke-play-controls>.stroke-color-dots>.stroke-custom-color input[type=color]{-webkit-appearance:none!important;appearance:none!important;position:static!important;width:23px!important;height:23px!important;margin:0!important;padding:0!important;opacity:1!important;border:0!important;border-radius:50%!important;background:transparent!important;cursor:pointer!important;overflow:hidden!important}
.unified-strokes .stroke-play-controls>.stroke-color-dots>.stroke-custom-color input[type=color]::-webkit-color-swatch-wrapper{padding:0!important}
.unified-strokes .stroke-play-controls>.stroke-color-dots>.stroke-custom-color input[type=color]::-webkit-color-swatch{border:0!important;border-radius:50%!important}
html body.lesson-workspace-page [data-lesson-workspace] .lesson-inline-stroke-host.unified-strokes .stroke-play-controls>.stroke-color-dots{position:static!important;display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:center!important;gap:8px!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
html body.lesson-workspace-page [data-lesson-workspace] .lesson-inline-stroke-host.unified-strokes .stroke-play-controls>.stroke-color-dots:before{content:'笔画颜色';margin-right:3px;color:#354e2e;font:700 14px/1.2 'Noto Sans SC','Noto Sans',sans-serif;white-space:nowrap}
html body.lesson-workspace-page [data-lesson-workspace] .lesson-inline-stroke-host.unified-strokes .stroke-play-controls>.stroke-color-dots>.stroke-custom-color{display:inline-flex!important;flex-direction:row!important;align-items:center!important;gap:4px!important;margin:0!important;padding:2px 6px!important;border:1px solid #cbdac6!important;border-radius:999px!important;background:#fff!important;color:#4f6948!important;font:700 12px/1 'Noto Sans SC',sans-serif!important;white-space:nowrap!important}
@media(max-width:760px){html body.lesson-workspace-page [data-lesson-workspace] .lesson-inline-stroke-host.unified-strokes .stroke-play-controls>.stroke-color-dots{justify-content:center!important;flex-wrap:wrap!important}}

/* Writing is deliberately two different exercises.  “看着写” retains the
   light character guide; “盲写” leaves a completely empty Tianzige.  The
   controls live in the same calm right-hand third as the step choices. */
.unified-strokes[data-stroke-mode="write"] .stroke-sequence,
.unified-strokes[data-stroke-mode="choose"] .stroke-sequence,
.unified-strokes[data-stroke-mode="write"] .stroke-step-size,
.unified-strokes[data-stroke-mode="choose"] .stroke-step-size{display:none!important}
.unified-strokes[data-stroke-mode="write"] .stroke-help h3,
.unified-strokes[data-stroke-mode="choose"] .stroke-help h3{display:block!important;margin:0 0 14px!important;font-size:0!important;line-height:1!important}
.unified-strokes[data-stroke-mode="write"] .stroke-help h3:after{content:'书写方式'!important;font:700 20px/1.2 'Noto Serif SC','Noto Sans SC',serif!important}
.unified-strokes[data-stroke-mode="choose"] .stroke-help h3:after{content:'下一笔，你来选'!important;font:700 20px/1.2 'Noto Serif SC','Noto Sans SC',serif!important}
.unified-strokes[data-stroke-mode="write"] .stroke-write-mode{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;width:100%!important;margin:0!important}
.unified-strokes[data-stroke-mode="write"] .stroke-write-mode button{display:grid!important;place-items:center!important;gap:4px!important;min-height:88px!important;margin:0!important;padding:12px 7px!important;border:1px solid #ccdbc7!important;border-radius:12px!important;background:#fff!important;color:#4f6948!important;box-shadow:0 2px 7px #1b5c7c10!important;cursor:pointer!important}
.unified-strokes[data-stroke-mode="write"] .stroke-write-mode button strong{font:800 16px/1.15 'Noto Sans SC',sans-serif!important}
.unified-strokes[data-stroke-mode="write"] .stroke-write-mode button small{font:500 11px/1.3 'Noto Sans SC',sans-serif!important;color:#899885!important;text-align:center!important}
.unified-strokes[data-stroke-mode="write"] .stroke-write-mode button[aria-pressed="true"]{border-color:#3c5c33!important;background:#3c5c33!important;color:#fff!important;box-shadow:0 5px 12px #174d7830!important}
.unified-strokes[data-stroke-mode="write"] .stroke-write-mode button[aria-pressed="true"] small{color:#edf4eb!important}
.unified-strokes[data-stroke-mode="write"] .stroke-write-summary{display:block!important;margin:12px 0 0!important;color:#7d8b79!important;font:500 12px/1.55 'Noto Sans SC',sans-serif!important}
.unified-strokes[data-stroke-mode="write"] .stroke-help>p{display:none!important}
.unified-strokes[data-stroke-mode="choose"] .stroke-help #stroke-options:not(:empty){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;align-content:start!important;gap:10px!important;width:100%!important;margin:0!important}
.unified-strokes[data-stroke-mode="choose"] .stroke-help #stroke-options button{display:grid!important;place-items:center!important;min-height:104px!important;margin:0!important;padding:9px!important;border:1px solid #ccdbc7!important;border-radius:12px!important;background:#fff!important;box-shadow:0 2px 8px #1b5c7c12!important;cursor:pointer!important}
.unified-strokes[data-stroke-mode="choose"] .stroke-help #stroke-options button svg{display:block!important;width:82px!important;height:82px!important;max-width:100%!important}
.unified-strokes[data-stroke-mode="choose"] .stroke-help #stroke-options button span{display:none!important}
.unified-strokes[data-stroke-mode="choose"] .stroke-help #stroke-options button.answer-wrong{border-color:#eb9a92!important;background:#fff6f4!important}
html body.lesson-workspace-page [data-lesson-workspace] .lesson-inline-stroke-host.unified-strokes[data-stroke-mode="write"] .stroke-help,
html body.lesson-workspace-page [data-lesson-workspace] .lesson-inline-stroke-host.unified-strokes[data-stroke-mode="choose"] .stroke-help{justify-content:center!important;padding:26px 20px!important}
html body.lesson-workspace-page [data-lesson-workspace] .lesson-inline-stroke-host.unified-strokes[data-stroke-mode="choose"] .stroke-help #stroke-options:not(:empty){display:grid!important}
@media(max-width:760px){
  .unified-strokes[data-stroke-mode="write"] .stroke-write-mode{grid-template-columns:1fr!important}
  .unified-strokes[data-stroke-mode="write"] .stroke-write-mode button{min-height:70px!important}
  .unified-strokes[data-stroke-mode="choose"] .stroke-help #stroke-options button{min-height:82px!important}
  .unified-strokes[data-stroke-mode="choose"] .stroke-help #stroke-options button svg{width:62px!important;height:62px!important}
}

/* Shared centering for every Hanzi Writer activity, including non-workspace
   lesson pages and the reusable practice surfaces. */
.unified-strokes[data-stroke-mode="write"] .stroke-help{align-items:center!important;text-align:center!important}
.unified-strokes[data-stroke-mode="write"] .stroke-write-preview{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:6px!important;width:auto!important;grid-template-columns:none!important}

/* Keep the course-level stroke activity identical even when it is embedded in
   a timetable lesson instead of the main lesson workspace. */
.lesson-inline-stroke-host.unified-strokes{--stroke-card-size:58px!important;position:relative!important}
.lesson-inline-stroke-host.unified-strokes .stroke-step-size{display:none!important}
.lesson-inline-stroke-host.unified-strokes .stroke-play-controls{display:grid!important;grid-template-columns:minmax(440px,1fr) auto!important;align-items:center!important;gap:18px!important;min-height:54px!important;margin:0 0 14px!important;padding:0 10px!important}
.lesson-inline-stroke-host.unified-strokes .stroke-method-pills{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;padding-right:18px!important;border-right:1px solid #cfddcb!important}
.lesson-inline-stroke-host.unified-strokes .stroke-play-controls>.stroke-color-dots{position:static!important;inset:auto!important;display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;flex:0 0 auto!important;width:auto!important;min-width:0!important;height:auto!important;gap:7px!important;margin:0!important;padding:0!important;overflow:visible!important;background:transparent!important;border:0!important;box-shadow:none!important}
.lesson-inline-stroke-host.unified-strokes .stroke-play-controls>.stroke-color-dots:before{content:'笔画颜色';color:#3b5c32;font:700 13px/1 'Noto Sans SC',sans-serif;white-space:nowrap}
.lesson-inline-stroke-host.unified-strokes .stroke-play-controls>.stroke-color-dots>button{display:block!important;flex:0 0 26px!important;width:26px!important;height:26px!important;min-height:26px!important;margin:0!important;padding:0!important;border:2px solid #fff!important;border-radius:50%!important;box-shadow:0 0 0 1px #c2d3bd!important}
.lesson-inline-stroke-host.unified-strokes .stroke-play-controls>.stroke-color-dots>button[aria-pressed=true]{box-shadow:0 0 0 3px #3c5c33!important}
.lesson-inline-stroke-host.unified-strokes .stroke-layout{display:grid!important;grid-template-columns:minmax(0,2fr) minmax(270px,1fr)!important;gap:0!important;align-items:stretch!important;min-height:395px!important;margin-top:16px!important;border:1px solid #d7e7d3!important;border-radius:18px!important;overflow:hidden!important;background:#fff!important}
.lesson-inline-stroke-host.unified-strokes .stroke-layout>div:first-child{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;padding:20px!important}
.lesson-inline-stroke-host.unified-strokes .stroke-stage,.lesson-inline-stroke-host.unified-strokes .stroke-target,.lesson-inline-stroke-host.unified-strokes .stroke-overlay{width:300px!important;height:300px!important;min-height:0!important}
.lesson-inline-stroke-host.unified-strokes .stroke-target svg,.lesson-inline-stroke-host.unified-strokes .stroke-overlay svg{width:300px!important;height:300px!important}
.lesson-inline-stroke-host.unified-strokes .stroke-help{display:flex!important;flex-direction:column!important;justify-content:flex-start!important;min-width:0!important;margin:0!important;padding:32px 20px!important;border-left:1px solid #d7e7d3!important;background:#fafdf9!important}
.lesson-inline-stroke-host.unified-strokes .stroke-help h3{display:block!important;margin:0 0 16px!important;color:#3b5c32!important;font-size:0!important;line-height:1!important}
.lesson-inline-stroke-host.unified-strokes .stroke-help h3:after{content:'笔顺展示';font:700 20px/1.2 'Noto Serif SC','Noto Sans SC',serif!important}
.lesson-inline-stroke-host.unified-strokes[data-stroke-mode="choose"] .stroke-help h3:after{content:'下一笔'!important}
.lesson-inline-stroke-host.unified-strokes .stroke-help>p{display:none!important}
.lesson-inline-stroke-host.unified-strokes .stroke-sequence{display:flex!important;flex-wrap:wrap!important;align-content:flex-start!important;gap:12px!important;min-height:0!important;max-height:none!important;margin:0!important;padding:0!important;overflow:visible!important}
.lesson-inline-stroke-host.unified-strokes .stroke-sequence>div{display:flex!important;width:58px!important;height:58px!important;min-height:58px!important;padding:0!important;border:0!important;background:transparent!important}
.lesson-inline-stroke-host.unified-strokes .stroke-sequence svg{width:58px!important;height:58px!important;padding:3px!important;border:1px solid #ceddca!important;border-radius:10px!important;background:#fff!important}
.lesson-inline-stroke-host.unified-strokes[data-stroke-mode="write"] .stroke-stage .stroke-write-mode{position:absolute!important;z-index:20!important;top:10px!important;right:10px!important;display:flex!important;align-items:center!important;gap:6px!important;width:auto!important;margin:0!important;padding:4px!important;border:1px solid #d3e0d0!important;border-radius:999px!important;background:#ffffffed!important;box-shadow:0 3px 10px #1b5c7c18!important}
.lesson-inline-stroke-host.unified-strokes[data-stroke-mode="write"] .stroke-stage .stroke-write-mode button{display:grid!important;width:32px!important;height:32px!important;min-height:32px!important;place-items:center!important;margin:0!important;padding:0!important;border:0!important;border-radius:50%!important;background:transparent!important;color:#4f6948!important;box-shadow:none!important;cursor:pointer!important}
.lesson-inline-stroke-host.unified-strokes[data-stroke-mode="write"] .stroke-stage .stroke-write-mode button[aria-pressed="true"]{background:#3c5c33!important;color:#fff!important;box-shadow:0 2px 5px #174d7845!important}
.lesson-inline-stroke-host.unified-strokes[data-stroke-mode="write"] .stroke-help,.lesson-inline-stroke-host.unified-strokes[data-stroke-mode="choose"] .stroke-help{justify-content:center!important;padding:26px 20px!important}
@media(max-width:760px){.lesson-inline-stroke-host.unified-strokes .stroke-play-controls{grid-template-columns:1fr!important;gap:12px!important}.lesson-inline-stroke-host.unified-strokes .stroke-method-pills{padding-right:0!important;border-right:0!important}.lesson-inline-stroke-host.unified-strokes .stroke-play-controls>.stroke-color-dots{justify-content:center!important;flex-wrap:wrap!important}.lesson-inline-stroke-host.unified-strokes .stroke-layout{grid-template-columns:1fr!important;min-height:0!important}.lesson-inline-stroke-host.unified-strokes .stroke-help{margin-top:16px!important;padding:16px 0 0!important;border-top:1px solid #d7e7d3!important;border-left:0!important}.lesson-inline-stroke-host.unified-strokes .stroke-stage,.lesson-inline-stroke-host.unified-strokes .stroke-target,.lesson-inline-stroke-host.unified-strokes .stroke-overlay{width:210px!important;height:210px!important}.lesson-inline-stroke-host.unified-strokes .stroke-target svg,.lesson-inline-stroke-host.unified-strokes .stroke-overlay svg{width:210px!important;height:210px!important}}