:root{--bg:#eaf3f3;--paper:#fff;--ink:#18323a;--muted:#536f76;--soft:#e6f2f0;--border:#c9dddc;--brand:#116f70;--brand-on:#fff;--mint:#087a65;--mint-soft:#d6f4e8;--warn:#9b6021;--danger:#b74752;--nav:#fdfefe;--shadow:0 15px 38px rgba(5,41,52,.08);--scale:1;--reader:1;--radius:20px}
:root[data-theme=day]{--bg:#eaf3f3;--paper:#fff;--ink:#18323a;--muted:#536f76;--soft:#e6f2f0;--border:#c9dddc;--brand:#116f70;--brand-on:#fff;--mint:#087a65;--mint-soft:#d6f4e8;--warn:#9b6021;--danger:#b74752;--nav:#fdfefe}
:root[data-theme=night]{--bg:#0e2231;--paper:#172f40;--ink:#ecfaf8;--muted:#adcbce;--soft:#1d3d4c;--border:#345866;--brand:#72dbc4;--brand-on:#092936;--mint:#89e2c4;--mint-soft:#214b46;--warn:#ecc28d;--danger:#f7a1ac;--nav:#132c3d;--shadow:0 15px 38px #0003}
:root[data-theme=oled]{--bg:#000;--paper:#090c0d;--ink:#fff;--muted:#b5c2c3;--soft:#171e1f;--border:#313b3c;--brand:#80e5c9;--brand-on:#031f21;--mint:#84e7c6;--mint-soft:#10312b;--warn:#ebc18a;--danger:#f3a5a8;--nav:#050707;--shadow:none}
:root[data-theme=ocean]{--bg:#e7f6fa;--paper:#fff;--ink:#17384b;--muted:#5d7c8b;--soft:#e0f1f5;--border:#c6e2ea;--brand:#157ba1;--brand-on:#fff;--mint:#138d8b;--mint-soft:#ddf6ed;--nav:#fff}
:root[data-theme=forest]{--bg:#eff4e8;--paper:#fff;--ink:#263a30;--muted:#657a68;--soft:#e7efe3;--border:#d4e0cf;--brand:#397b53;--brand-on:#fff;--mint:#347f5a;--mint-soft:#e0f2dd;--nav:#fff}
:root[data-theme=ember]{--bg:#fff2e7;--paper:#fffcf7;--ink:#482d27;--muted:#8e6d5e;--soft:#fae9d9;--border:#edcfb8;--brand:#aa5b37;--brand-on:#fff;--mint:#947044;--mint-soft:#f8eed7;--nav:#fffcf7}
:root[data-theme=lavender]{--bg:#f2ecfc;--paper:#fff;--ink:#342d4c;--muted:#756b91;--soft:#ece5f9;--border:#ddd2f2;--brand:#7153a9;--brand-on:#fff;--mint:#666da7;--mint-soft:#ebeafa;--nav:#fff}
:root[data-theme=rose]{--bg:#fff0f4;--paper:#fff;--ink:#472a37;--muted:#896879;--soft:#f9e3ec;--border:#efd0dd;--brand:#a34d78;--brand-on:#fff;--mint:#aa637a;--mint-soft:#fce3e9;--nav:#fff}
:root[data-theme=slate]{--bg:#e9eef3;--paper:#fafcff;--ink:#2a3647;--muted:#617184;--soft:#e3eaf2;--border:#ced9e4;--brand:#4d6683;--brand-on:#fff;--mint:#477c83;--mint-soft:#e1eef0;--nav:#fafcff}
*{box-sizing:border-box}html,body{margin:0;height:100%;max-width:100%;overflow:hidden}html{-webkit-text-size-adjust:100%}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.52;font-size:calc(15.5px * var(--scale))}button,input,select,textarea{font:inherit}button,a,select{touch-action:manipulation}button{cursor:pointer}a{color:var(--brand)}:focus-visible{outline:3px solid var(--mint)!important;outline-offset:3px}button:disabled{opacity:.48;cursor:not-allowed}.shell{height:100vh;height:100dvh;display:flex;flex-direction:column;isolation:isolate;overflow:hidden}.topbar{background:var(--nav);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px;padding:calc(env(safe-area-inset-top,0px) + 10px) 14px 10px;flex-shrink:0;user-select:none;-webkit-user-select:none;min-height:66px}.brand{display:flex;align-items:center;gap:9px;text-decoration:none;min-width:0;color:var(--ink)}.brand img{border-radius:12px;flex:none}.brand span{display:flex;flex-direction:column;line-height:1.1}.brand strong{font-size:19px;letter-spacing:-.065em;font-weight:900}.brand small{color:var(--muted);font-size:10px;font-weight:600;letter-spacing:.015em}.top-actions{display:flex;align-items:center;gap:7px}.online-label{font-size:10px;font-weight:750;color:var(--mint);max-width:80px;text-align:right}.icon-button{width:41px;height:41px;flex-shrink:0;border:1px solid var(--border);border-radius:13px;background:var(--soft);color:var(--ink);font-size:23px}#main{min-height:0;flex:1;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;scrollbar-gutter:stable}#screen{margin:auto;max-width:1090px;min-height:100%;padding:22px 18px 52px}.bottom{background:var(--nav);border-top:1px solid var(--border);padding:5px 7px max(8px,env(safe-area-inset-bottom,0px));display:flex;gap:2px;flex-shrink:0;user-select:none;-webkit-user-select:none}.bottom a{min-width:0;flex:1;min-height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;text-decoration:none;color:var(--muted);font-size:10px;font-weight:750;border-radius:12px}.bottom a span{font-size:23px;line-height:1.15}.bottom a[aria-current=page]{background:var(--mint-soft);color:var(--brand)}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(26px,5vw,42px);letter-spacing:-.055em;line-height:1.08}h2{font-size:clamp(19px,3vw,27px);letter-spacing:-.035em}h3{font-size:18px;letter-spacing:-.025em}p{margin-bottom:12px}.muted{color:var(--muted)}.small{font-size:12px}.micro{font-size:11px}.eyebrow{color:var(--mint);font-weight:850;text-transform:uppercase;font-size:11px;letter-spacing:.095em}.panel,.tile{background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.panel{padding:20px}.panel.slim{padding:15px}.hero{background:linear-gradient(135deg,#0c293c,#12535a 62%,#14796d);color:#f3fffc;border-radius:28px;padding:32px 28px 28px;position:relative;overflow:hidden}.hero:after{content:"";position:absolute;right:-40px;top:-85px;width:235px;height:235px;border:1px solid #afffeb44;border-radius:50%;box-shadow:0 0 0 32px #a6ffe910,0 0 0 70px #a6ffe908;pointer-events:none}.hero h1{max-width:690px;font-size:clamp(29px,5.5vw,49px);position:relative;z-index:1;margin:10px 0}.hero p{color:#c5e4e1;max-width:570px;position:relative;z-index:1}.hero .eyebrow{color:#99ebd5}.hero .btn{background:#a5f3dc;color:#102d39}.hero .btn.ghost{background:transparent;color:#f3fffc;border-color:#6fb5b0}.hero-sign{font-size:12px;color:#abddd6;margin-top:18px;position:relative;z-index:1}.btnrow{display:flex;flex-wrap:wrap;gap:9px;margin:15px 0}.btn{appearance:none;border:1px solid var(--brand);border-radius:13px;padding:10px 15px;display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--brand);color:var(--brand-on);font-size:13px;font-weight:800;text-decoration:none;min-height:42px;line-height:1.2}.btn.secondary{background:var(--soft);color:var(--ink);border-color:var(--border)}.btn.plain{background:transparent;color:var(--brand);border-color:var(--border)}.btn.danger{background:var(--danger);color:#fff;border-color:var(--danger)}.btn.smallbtn{min-height:36px;padding:7px 10px;font-size:12px}.btn[aria-pressed=true]{background:var(--mint-soft);color:var(--mint);border-color:var(--mint)}.grid{display:grid;gap:13px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}.stat{padding:16px}.stat strong{font-size:27px;letter-spacing:-.05em;display:block;line-height:1.1}.stat span{font-size:12px;color:var(--muted)}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:24px 0 12px}.section-heading h2{margin:0}.section-heading p{margin:3px 0 0}.tile{padding:18px;text-decoration:none;color:var(--ink);display:block;box-shadow:none;transition:transform .15s,border-color .15s}.tile:hover{transform:translateY(-2px);border-color:var(--mint)}.tile strong{display:block;font-size:16px;line-height:1.25}.tile p{font-size:12px;color:var(--muted);margin:8px 0 0}.tile .meta{font-size:11px;color:var(--mint);font-weight:800;display:flex;justify-content:space-between;gap:9px;margin-bottom:10px;text-transform:uppercase}.tile .tail{font-size:12px;margin-top:15px;color:var(--brand);font-weight:800}.progress{height:9px;background:var(--soft);border-radius:99px;overflow:hidden}.progress span{display:block;height:100%;background:var(--mint);border-radius:99px}.pill{font-size:11px;border-radius:99px;background:var(--soft);border:1px solid var(--border);padding:4px 9px;font-weight:700;color:var(--muted)}.pill.good{background:var(--mint-soft);color:var(--mint);border-color:transparent}.pill.warn{color:var(--warn)}.page-head{display:flex;justify-content:space-between;gap:12px;align-items:end;margin-bottom:21px}.page-head h1{margin:4px 0}.page-head p{color:var(--muted);margin:0;max-width:620px}.path{padding:20px;margin-bottom:13px}.path h2{margin:3px 0}.path>p{color:var(--muted);font-size:13px}.lesson-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-top:15px}.lesson-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:19px;align-items:start}.lesson-article{min-width:0}.lesson-article .panel{padding:24px}.lesson-article .chapter-content{font-size:calc(15px * var(--scale) * var(--reader));max-width:100%;overflow-wrap:anywhere}.lesson-article .chapter-content h3{font-size:1.35em}.lesson-article .chapter-content p{line-height:1.68}.lesson-article .chapter-content img{max-width:100%}.lesson-article .chapter-content .concept-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.lesson-article .chapter-content .concept{padding:12px;border:1px solid var(--border);background:var(--soft);border-radius:12px}.lesson-article .chapter-content .concept-icon{color:var(--mint);display:block;font-size:11px;font-weight:900;margin-bottom:7px}.lesson-article .chapter-content .callout{padding:15px;border-left:4px solid var(--mint);background:var(--mint-soft);border-radius:9px;margin:12px 0}.lesson-article .chapter-content .comparison,.lesson-article .chapter-content .flow-figure{max-width:100%;overflow-x:auto}.lesson-aside{position:sticky;top:17px}.lesson-aside .panel{padding:16px}.lesson-aside h3{margin-bottom:12px}.lesson-actions{display:flex;flex-wrap:wrap;gap:7px}.lesson-note{width:100%;min-height:135px;max-height:300px;resize:vertical;border-radius:12px;background:var(--paper);color:var(--ink);border:1px solid var(--border);padding:11px;margin-top:7px}.lesson-toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}.lab-tabs{display:flex;gap:7px;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin}.lab-tabs button{white-space:nowrap;min-height:40px}.lab-stage{margin-top:14px}.lab-stage .panel{padding:22px}.lab-stage h2{margin:5px 0}.lab-stage .eyebrow{display:block}.lab-description{color:var(--muted)}.lab-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}.control{display:flex;flex-direction:column;gap:5px;margin:12px 0}.control label{font-size:13px;font-weight:750}.control input,.control select,.control textarea,select,input[type=search]{max-width:100%;width:100%;padding:10px;border:1px solid var(--border);border-radius:11px;background:var(--paper);color:var(--ink)}.control input[type=range]{padding:0;accent-color:var(--mint)}.readout{padding:17px;background:var(--soft);border-radius:15px;border:1px solid var(--border)}.readout strong{font-size:27px;letter-spacing:-.04em;display:block}.readout p{font-size:12px;color:var(--muted);margin:0}.mini-bars{display:grid;gap:9px}.mini-bar{display:grid;gap:3px}.mini-bar-head{display:flex;justify-content:space-between;font-size:12px;gap:12px}.mini-bar-track{height:13px;border-radius:10px;overflow:hidden;background:var(--border)}.mini-bar-track span{display:block;height:100%;background:var(--mint)}.warning-box{padding:12px;border:1px solid #d3aa62;border-radius:12px;background:var(--soft);color:var(--ink);font-size:13px}.token-row{display:flex;flex-wrap:wrap;gap:5px}.token{background:var(--mint-soft);border:1px solid var(--border);padding:5px 8px;border-radius:8px;font-family:ui-monospace,monospace;font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere}.choice{display:block;width:100%;border:1px solid var(--border);background:var(--paper);color:var(--ink);border-radius:12px;padding:11px 13px;margin:8px 0;text-align:left;font-size:13px}.choice:hover{border-color:var(--mint)}.choice.selected{border-color:var(--mint);background:var(--mint-soft)}.choice.correct{border-color:var(--mint)}.choice.incorrect{border-color:var(--danger)}.feedback{background:var(--soft);border:1px solid var(--border);border-radius:12px;padding:12px;margin:10px 0;font-size:13px}.feedback.good{border-color:var(--mint)}.feedback.bad{border-color:var(--danger)}.mission{margin:13px 0}.mission .scenario{font-size:15px;line-height:1.6}.question-card{padding:17px;margin-bottom:13px}.question-card h3{font-size:15px;line-height:1.4}.question-card .meta{font-size:11px;color:var(--muted)}.review-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:13px 0}.review-tabs .btn{min-height:36px}.note-status{color:var(--muted);font-size:11px}.glossary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.term{padding:13px}.term strong{display:block}.term p{font-size:12px;color:var(--muted);margin:4px 0}.theme-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.theme-card{border:1px solid var(--border);border-radius:12px;background:var(--paper);color:var(--ink);padding:10px;font-weight:700;display:flex;align-items:center;gap:8px;min-height:45px}.theme-card[aria-pressed=true]{outline:2px solid var(--mint);outline-offset:-2px}.theme-dot{width:21px;height:21px;border-radius:7px;border:1px solid #83939c40;display:inline-block;flex-shrink:0}.studio-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:15px}.studio-output{white-space:pre-wrap;line-height:1.6;font-size:13px}.caption{font-size:11px;color:var(--muted);margin-top:8px}.footer{font-size:11px;color:var(--muted);padding-top:28px;text-align:center}.footer a{color:var(--brand)}#toast{position:fixed;z-index:90;left:50%;bottom:calc(80px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(16px);background:#102f38;color:#fff;border-radius:12px;padding:12px 15px;max-width:min(92vw,430px);font-size:13px;opacity:0;pointer-events:none;transition:.16s;box-shadow:0 12px 30px #0003}#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.dialog-backdrop{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:#071d2bc7;padding:18px}.dialog{width:min(100%,470px);max-height:88vh;overflow:auto;background:var(--paper);color:var(--ink);border-radius:20px;padding:23px;box-shadow:0 25px 70px #0005}.dialog h2{margin-bottom:9px}.dialog p{color:var(--muted)}.noscript{padding:24px}.hide{display:none!important}
@media(min-width:850px){#screen{padding:29px 30px 80px}.topbar{padding-left:27px;padding-right:27px}.hero{padding:42px}.bottom{max-width:680px;align-self:center;border:1px solid var(--border);border-bottom:none;border-radius:18px 18px 0 0;width:100%;padding-left:13px;padding-right:13px}}
@media(max-width:760px){.grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}.lesson-layout,.lab-grid,.studio-grid{grid-template-columns:1fr}.lesson-aside{position:static}.lesson-grid{grid-template-columns:1fr}.page-head{align-items:start;flex-direction:column}.hero{padding:27px 21px}.glossary-grid{grid-template-columns:1fr}}
@media(max-width:380px){#screen{padding:15px 12px 50px}.online-label{display:none}.brand strong{font-size:17px}.brand img{width:36px;height:36px}.panel{padding:14px}.theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero h1{font-size:29px}.lesson-article .panel{padding:14px}.lesson-article .chapter-content .concept-grid{grid-template-columns:1fr}}
/* CC1 R1: genuinely single-column content at phone widths. A document-level
   overflow check alone misses text escaping a child card inside an overflow:hidden shell. */
@media(max-width:760px){
 .grid.two{grid-template-columns:minmax(0,1fr)}
 .theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .theme-card{min-width:0;text-align:left;line-height:1.25}
 .theme-name{min-width:0;overflow-wrap:anywhere}
 .panel,.tile{min-width:0;overflow-wrap:break-word}
 .bottom a{font-size:11px;line-height:1.2}
 #backup-file{width:100%;max-width:100%;min-width:0;font-size:13px}
}
@media(max-width:380px){
 .theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .theme-card{padding:8px 7px;gap:5px}
 .theme-dot{width:18px;height:18px}
}
/* iOS standalone screenshots showed the nav's icon and label below the visible
   frame although the document itself reported no overflow. Keep its tap targets
   well above that region; the extra space is below, not over, the controls. */
@media(max-width:760px) and (display-mode:standalone){
 .bottom{padding-bottom:calc(max(8px,env(safe-area-inset-bottom,0px)) + 36px)}
}
@media(max-width:760px){
 html.ios-standalone .bottom{padding-bottom:calc(max(8px,env(safe-area-inset-bottom,0px)) + 36px)}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media print{html,body{height:auto;overflow:visible}.topbar,.bottom,.top-actions,.btnrow,.lesson-aside,#toast{display:none!important}#main{overflow:visible}#screen{padding:0}.lesson-layout{display:block}.panel{box-shadow:none;border:none}.chapter-content{font-size:12pt}}

/* CC1 R2: iOS status-bar color sampling trial. A REAL painted DOM node, not a
   pseudo-element; 1px high and fixed at the physical viewport edge. It is
   outside the flex shell, so no header/nav/safe-area measurements are changed.
   No black-translucent mode: content stays below the native status bar. */
#ios-status-swatch{display:none;position:fixed;top:0;left:0;right:0;width:100%;height:1px;min-height:1px;background-color:var(--nav);z-index:120;pointer-events:none}
@media(display-mode:standalone){#ios-status-swatch{display:block}}
html.ios-standalone #ios-status-swatch{display:block}