:root{--teal:#00B4A3;--navy:#12233F;--text:#425B70;--sky:#EDF6FC;--mint:#EAF8F4;--butter:#FFF7DE;--rose:#FCEFF3;--border:#DDE7EC}*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;color:var(--navy);background:#eef3f5;overflow:hidden}#app{height:100dvh;display:grid;grid-template-rows:72px 1fr 64px;max-width:1600px;margin:auto;background:#fff;box-shadow:0 0 40px #0001}header{display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid var(--border)}.brand{display:flex;align-items:center;gap:13px}.mark{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--teal);color:white;font-weight:800}.brand b{font-size:17px;letter-spacing:.04em}.brand small{display:block;color:#687B8D;margin-top:3px;font-size:11px;letter-spacing:.09em}.chapter{font-size:13px;color:#687B8D}main{padding:26px 34px;overflow:hidden}.sheet{height:100%;display:grid;grid-template-columns:1.05fr .95fr;gap:28px}.hero,.panel{border-radius:24px;padding:34px;overflow:hidden}.hero{background:linear-gradient(145deg,var(--sky),#fff);display:flex;flex-direction:column;justify-content:center}.panel{background:#fff;border:1px solid var(--border);display:flex;flex-direction:column;justify-content:center}.eyebrow{font-size:13px;font-weight:800;letter-spacing:.13em;color:var(--teal);text-transform:uppercase}.num{font-size:64px;font-weight:300;color:var(--teal);line-height:1}.title{font-size:clamp(32px,4vw,64px);font-weight:500;line-height:1.04;margin:10px 0 18px}.lead{font-size:clamp(16px,1.5vw,23px);line-height:1.55;color:var(--text);max-width:780px}.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.chip{padding:9px 13px;border-radius:999px;background:#fff;border:1px solid var(--border);font-size:13px}.dialogue{display:grid;gap:14px;margin-top:20px}.bubble{padding:18px 20px;border-radius:18px;background:var(--mint);font-size:clamp(18px,2vw,30px);line-height:1.3}.bubble.alt{background:var(--butter)}h2{font-size:30px;font-weight:550;margin:0 0 18px}.rule{padding:16px 18px;border-radius:16px;background:var(--sky);margin:8px 0;font-size:18px}.rule b{color:var(--teal)}.examples{display:grid;grid-template-columns:1fr 1fr;gap:12px}.ex{padding:16px;border:1px solid var(--border);border-radius:14px;font-size:17px}.practice{display:grid;gap:10px}.q{padding:13px 15px;border-radius:13px;background:#F7F9FA;font-size:17px}.blank{display:inline-block;min-width:110px;border-bottom:2px solid var(--teal);height:1.1em;vertical-align:bottom}.flags{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.flag{padding:16px;border-radius:15px;background:var(--sky);text-align:center;font-size:18px}.flag strong{display:block;font-size:28px;margin-bottom:5px}.bigword{font-size:clamp(42px,6vw,88px);font-weight:300;letter-spacing:.08em;color:var(--teal);text-align:center}.note{margin-top:16px;color:#687B8D;font-size:14px}footer{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:18px;padding:0 26px;border-top:1px solid var(--border)}button{border:0;background:var(--navy);color:#fff;border-radius:999px;padding:11px 18px;font-size:14px;cursor:pointer}button:disabled{opacity:.25;cursor:default}.progress{height:6px;background:#E8EEF1;border-radius:999px;overflow:hidden}.progress div{height:100%;background:var(--teal);width:0;transition:.25s}#counter{font-size:13px;color:#687B8D;min-width:70px;text-align:center}@media(max-width:800px){#app{grid-template-rows:58px 1fr 58px}header{padding:0 16px}.brand small,.chapter{display:none}main{padding:12px}.sheet{grid-template-columns:1fr;gap:12px;overflow:auto}.hero,.panel{padding:22px;border-radius:18px}.title{font-size:36px}.lead{font-size:17px}.examples,.flags{grid-template-columns:1fr 1fr}footer{padding:0 10px;gap:8px}button span{display:none}}

/* Interactive development checks */
.test-sheet .hero{overflow:auto}.test-panel{overflow:auto}.mcq-list{display:grid;gap:10px}.mcq{border:1px solid #dbe7eb;border-radius:14px;padding:10px 12px;background:#fff}.mcq-q{font-weight:700;margin-bottom:6px;color:#12233f}.mcq-option{display:block;padding:3px 0;cursor:pointer;font-size:.92rem}.mcq-option input{margin-right:6px}.mcq.correct{border-color:#82c9aa;background:#eefaf4}.mcq.wrong{border-color:#e7a3a3;background:#fff3f3}.check-test{margin-top:12px;border:0;border-radius:999px;padding:10px 16px;background:#007f75;color:white;font-weight:700;cursor:pointer}.test-result{margin-top:10px;padding:10px 12px;border-radius:12px;background:#edf6fc;font-weight:700;color:#12233f}@media(max-height:760px){.mcq{padding:7px 10px}.mcq-option{font-size:.82rem;padding:1px 0}.mcq-q{font-size:.88rem}}

/* SC02 — Test viewport correction: every test begins at the visible top edge */
.test-sheet{align-items:stretch;min-height:0}
.test-sheet .hero,.test-sheet .test-panel{min-height:0;justify-content:flex-start;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding-top:24px;padding-bottom:24px}
.test-sheet .hero{justify-content:flex-start}
.test-sheet .title{font-size:clamp(30px,3.2vw,52px);margin:8px 0 12px}
.test-sheet .lead{margin:0 0 10px}
.test-sheet .dialogue{margin-top:12px}
.test-panel h2{position:relative;margin:0 0 12px;flex:0 0 auto}
.test-panel .mcq-list{flex:0 0 auto}
.test-panel .check-test,.test-panel .test-result{flex:0 0 auto}
@media(max-width:800px){.test-sheet .hero,.test-sheet .test-panel{overflow:visible}.test-sheet{overflow:auto}.test-sheet .title{font-size:32px}}


/* 30-Day Learning Journey — SC03 */
.header-meta{display:flex;align-items:center;gap:18px}.day-label{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:999px;background:var(--mint);white-space:nowrap}.day-label b{font-size:12px;letter-spacing:.09em;color:var(--teal)}.day-label span{font-size:12px;color:var(--text);max-width:250px;overflow:hidden;text-overflow:ellipsis}.day-badge{align-self:flex-start;padding:7px 11px;border-radius:999px;background:#fff;border:1px solid var(--border);color:var(--teal);font-size:11px;font-weight:800;letter-spacing:.12em;margin-bottom:10px}.day-start-marker{align-self:stretch;display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;background:var(--navy);color:#fff;margin-bottom:14px}.day-start-marker b{font-size:13px;letter-spacing:.12em}.day-start-marker span{font-size:13px;opacity:.86}.day-start-marker + .day-badge{display:none}
@media(max-width:1000px){.day-label span{display:none}.header-meta{gap:9px}}
@media(max-width:800px){.day-label{padding:6px 9px}.day-start-marker{align-items:flex-start;flex-direction:column;gap:3px}.day-badge{margin-bottom:6px}}

/* SC05 · denser individual teaching pages */
.enriched-panel{justify-content:flex-start;overflow-y:auto;scrollbar-gutter:stable;padding-top:28px;padding-bottom:28px}
.micro-lab{margin-top:14px;padding:12px 14px;border:1px solid var(--border);border-radius:14px;background:linear-gradient(135deg,#fff,#f7fbfb);flex:0 0 auto}
.micro-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#687B8D}.micro-head b{color:var(--teal);font-size:13px}.micro-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.micro-grid>div{padding:9px 10px;border-radius:10px;background:#F7F9FA;font-size:14px;line-height:1.35;color:var(--navy)}
.enriched-panel .practice{gap:8px}.enriched-panel .q{padding:11px 13px;font-size:16px}.enriched-panel .ex{padding:13px;font-size:16px}.enriched-panel .rule{padding:13px 15px;font-size:17px}.enriched-panel h2{margin-bottom:14px}
@media(max-height:820px) and (min-width:801px){.enriched-panel{padding-top:22px;padding-bottom:22px}.micro-lab{margin-top:10px;padding:10px 12px}.micro-grid>div{font-size:13px;padding:7px 9px}.enriched-panel .q{font-size:15px;padding:9px 11px}.enriched-panel .rule{font-size:16px;padding:10px 12px}.enriched-panel .ex{font-size:15px;padding:10px}}
@media(max-width:800px){.micro-grid{grid-template-columns:1fr}.enriched-panel{overflow:visible}}

/* SC06 — direct day navigation */
.nav-pill{background:#fff;color:var(--navy);border:1px solid var(--border);padding:8px 12px;font-size:12px;font-weight:750}.nav-pill:hover,.day-label:hover{border-color:var(--teal);cursor:pointer}.day-label{border:1px solid transparent}.day-drawer{position:fixed;inset:0;z-index:100;display:none}.day-drawer.open{display:block}.drawer-backdrop{position:absolute;inset:0;background:#12233f99;backdrop-filter:blur(3px)}.drawer-card{position:absolute;top:4vh;bottom:4vh;right:3vw;width:min(760px,94vw);background:#fff;border-radius:24px;padding:24px;box-shadow:0 24px 80px #12233f44;overflow:auto}.drawer-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:20px}.drawer-head b{display:block;font-size:24px}.drawer-head small{display:block;color:#687B8D;margin-top:5px}.drawer-head button{font-size:24px;padding:5px 13px;background:#F7F9FA;color:var(--navy)}.day-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.day-jump{display:block;text-align:left;background:#F7F9FA;color:var(--navy);border:1px solid var(--border);border-radius:15px;padding:13px;min-height:82px}.day-jump:hover{border-color:var(--teal);background:var(--mint)}.day-jump.active{background:var(--navy);color:#fff;border-color:var(--navy)}.day-jump b{display:block;color:var(--teal);font-size:12px;letter-spacing:.09em;margin-bottom:5px}.day-jump.active b{color:#7DE0D5}.day-jump span{font-size:13px;line-height:1.3}.drawer-help{margin-top:18px;padding:12px 14px;border-radius:12px;background:var(--sky);font-size:12px;color:#536B80}.footer-day{background:#fff;color:var(--navy);border:1px solid var(--border);padding:10px 13px}footer{grid-template-columns:auto auto 1fr auto auto auto}.day-label b:after{content:' ▾';font-size:9px}
@media(max-width:800px){.nav-pill span,.footer-day span{display:none}.nav-pill{padding:7px 9px}.day-grid{grid-template-columns:repeat(2,1fr)}.drawer-card{top:2vh;bottom:2vh;right:2vw;width:96vw;padding:16px;border-radius:18px}footer{grid-template-columns:auto auto 1fr auto auto auto;gap:5px}.footer-day{padding:10px}.drawer-help{display:none}}

/* Combined Teacher's Copy level navigation */
/* SC03 shared Level Navigator — deliberately self-contained so Level 1 and Level 2 render identically. */
header .header-meta .level-switch{display:flex !important;align-items:center !important;gap:8px !important;flex-wrap:nowrap !important;white-space:nowrap !important}
header .header-meta .level-switch .level-link{display:inline-flex !important;align-items:center !important;justify-content:center !important;min-height:34px !important;padding:8px 13px !important;border:1px solid #DDE7EC !important;border-radius:999px !important;background:#FFFFFF !important;color:#12233F !important;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif !important;font-size:11px !important;font-weight:700 !important;line-height:1 !important;text-decoration:none !important;box-shadow:none !important;white-space:nowrap !important}
header .header-meta .level-switch .level-link:visited{color:#12233F !important;text-decoration:none !important}
header .header-meta .level-switch .level-link:hover,header .header-meta .level-switch .level-link:focus-visible{border-color:#00B4A3 !important;text-decoration:none !important;outline:none !important}
header .header-meta .level-switch .level-link.active,header .header-meta .level-switch .level-link.active:visited{background:#00B4A3 !important;color:#FFFFFF !important;border-color:#00B4A3 !important}
@media(max-width:1100px){header{padding-left:18px;padding-right:18px}.header-meta{gap:8px}.chapter{display:none}.day-label span{max-width:170px}.level-switch .level-link{padding:7px 10px !important;font-size:10px !important}}
@media(max-width:820px){header .header-meta .level-switch{width:auto !important;justify-content:flex-start !important;gap:5px !important}.level-switch .level-link{padding:6px 8px !important;font-size:9px !important}}