:root{--navy:#1d2b53;--navy2:#2c3e72;--sand:#f7f0e1;--paper:#fffdf8;--terra:#c8553d;--gold:#e0a32e;--teal:#2a9d8f;--ink:#1f2430;--mute:#5b6273;--line:#e5dcc7;--ok:#2e9d5b;--bad:#d1453b;--r:16px}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Rubik',system-ui,Arial,sans-serif;background:var(--sand);color:var(--ink);line-height:1.55;-webkit-text-size-adjust:100%}
button{font-family:inherit;cursor:pointer}
a{color:var(--navy2)}
.skip{position:absolute;right:-999px}.skip:focus{right:8px;top:8px;background:#fff;padding:8px;z-index:99}
/* top bar */
.topbar{position:sticky;top:0;z-index:20;background:var(--navy);color:#fff;display:flex;align-items:center;gap:8px;padding:8px 12px;flex-wrap:wrap}
.topbar .brand{font-family:'Secular One','Rubik',sans-serif;font-size:20px;color:#fff;text-decoration:none;white-space:nowrap}
.topbar .sp{flex:1}
.tb{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:12px;padding:8px 12px;font-size:15px;font-weight:500;white-space:nowrap}
.tb:hover{background:rgba(255,255,255,.22)}
.tb.on{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.tb.print{background:var(--terra);border-color:var(--terra);font-weight:700}
.tb.key{background:#fff;color:var(--navy);font-weight:700}
main{max-width:1280px;margin:0 auto;padding:16px}
/* home */
.hero{background:linear-gradient(135deg,var(--navy),#3b4f8f 60%,var(--terra));color:#fff;border-radius:24px;padding:28px 24px;position:relative;overflow:hidden}
.hero h1{font-family:'Secular One','Rubik',sans-serif;font-size:clamp(28px,5vw,52px);margin:0 0 6px;line-height:1.15}
.hero p{font-size:clamp(16px,2vw,21px);margin:4px 0;opacity:.95;max-width:820px}
.hero .globe{position:absolute;left:18px;top:10px;font-size:90px;opacity:.25}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.chip{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:6px 14px;color:#fff;text-decoration:none;font-weight:500}
.chip:hover{background:rgba(255,255,255,.3)}
h2.sec{font-family:'Secular One','Rubik',sans-serif;color:var(--navy);font-size:26px;margin:26px 4px 10px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:6px;box-shadow:0 2px 0 var(--line);transition:transform .12s}
.card:hover{transform:translateY(-3px)}
.card .num{font-size:14px;color:var(--terra);font-weight:700}
.card .em{font-size:38px;line-height:1}
.card h3{margin:0;font-size:20px;color:var(--navy);line-height:1.3}
.card p{margin:0;color:var(--mute);font-size:15px}
.tag{display:inline-block;font-size:12.5px;border-radius:999px;padding:2px 10px;font-weight:600;align-self:flex-start}
.tag.req{background:#e3f1ee;color:#1d6f65}.tag.opt{background:#fbefd9;color:#8a5a00}
.card.soon{opacity:.55;pointer-events:none}
.card .row{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.mini{font-size:13.5px;border-radius:10px;padding:5px 10px;border:1px solid var(--line);background:#fff;color:var(--navy);text-decoration:none;font-weight:500}
.mini.p{background:var(--terra);color:#fff;border-color:var(--terra)}
.tools .card{flex-direction:row;align-items:center;gap:12px}
.tools .card .em{font-size:34px}
footer{text-align:center;color:var(--mute);font-size:14px;padding:26px 10px 40px}
/* lesson view */
.lesson-wrap{display:flex;flex-direction:column;align-items:center;gap:10px}
.stage{position:relative;width:100%;background:var(--paper);border-radius:18px;box-shadow:0 6px 24px rgba(29,43,83,.15);overflow:hidden;border:1px solid var(--line)}
.stage.wide{aspect-ratio:16/9}
.slide{position:absolute;inset:0;padding:3.2% 4.2%;display:flex;flex-direction:column;overflow:hidden;font-size:calc(var(--fs,1)*var(--base,22px))}
.stage:not(.wide) .slide{position:relative;inset:auto;padding:20px 16px 22px;font-size:17px;overflow:visible}
.slide h2{font-family:'Secular One','Rubik',sans-serif;color:var(--navy);font-size:1.75em;margin:0 0 .45em;line-height:1.2}
.slide .kicker{color:var(--terra);font-weight:700;font-size:.72em;letter-spacing:.02em;margin-bottom:.2em}
.slide ul.b{margin:0;padding:0 1.1em 0 0;display:flex;flex-direction:column;gap:.42em}
.slide ul.b li{padding-right:.2em}
.slide ul.b li::marker{color:var(--terra)}
.slide b{color:var(--navy2)}
.s-title{justify-content:center;align-items:center;text-align:center;background:radial-gradient(circle at 70% 30%,#fff6e0,transparent 60%),linear-gradient(160deg,#fffdf8,#f3e6c9)}
.s-title .big{font-size:4em;line-height:1}
.s-title h1{font-family:'Secular One','Rubik',sans-serif;color:var(--navy);font-size:2.3em;margin:.2em 0 .15em;line-height:1.15}
.s-title .sub{font-size:1.05em;color:var(--mute);max-width:85%}
.s-title .curr{margin-top:.8em;font-size:.7em}
.concepts{display:grid;grid-template-columns:repeat(auto-fit,minmax(12em,1fr));gap:.6em}
.concept{background:#eef3fb;border-right:.3em solid var(--navy2);border-radius:.6em;padding:.55em .7em}
.concept .t{font-weight:800;color:var(--navy);font-size:1.02em}
.concept .d{font-size:.86em;color:#333}
.tl{display:grid;grid-template-columns:repeat(auto-fit,minmax(7.2em,1fr));gap:1.3em .45em;align-items:stretch;position:relative;padding-top:1.4em}
.tl::before{content:'';position:absolute;top:.62em;right:0;left:0;height:.22em;background:var(--gold);border-radius:3px}
.tl .ev{flex:1;position:relative;background:#fff8e8;border:1px solid #f0dcae;border-radius:.6em;padding:.5em .55em;font-size:.82em}
.tl .ev::before{content:'';position:absolute;top:-1.05em;right:50%;width:.8em;height:.8em;background:var(--terra);border-radius:50%;transform:translateX(50%);border:.15em solid #fff}
.tl .ev .y{font-weight:800;color:var(--terra);font-size:1.1em;display:block;text-align:right;white-space:nowrap}
.stage:not(.wide) .tl{display:flex;flex-direction:column;padding:0 1.4em 0 0;gap:.5em}
.stage:not(.wide) .tl::before{top:0;bottom:0;right:.45em;left:auto;width:.22em;height:auto}
.stage:not(.wide) .tl .ev::before{top:.7em;right:-1.25em;transform:none}
.src{display:flex;gap:1em;align-items:flex-start}
.src .q{flex:1.3;background:#fbf4e4;border-radius:.7em;padding:.8em 1em;position:relative;font-size:.95em}
.src .q blockquote{margin:0;font-family:'Frank Ruhl Libre','David',serif;font-size:1.12em;line-height:1.5}
.src .q blockquote::before{content:'❝';color:var(--terra);font-size:1.6em;line-height:0;vertical-align:-.35em;margin-left:.15em}
.src .att{margin-top:.5em;font-size:.72em;color:var(--mute)}
.src .intro{font-size:.78em;color:var(--mute);margin-bottom:.4em}
.src .qs{flex:1;font-size:.85em}
.src .qs h4,.qbox h4{margin:0 0 .3em;color:var(--terra);font-size:1em}
.src .qs ol{margin:0;padding-right:1.2em;display:flex;flex-direction:column;gap:.35em}
.stage:not(.wide) .src{flex-direction:column}
.imgs{display:flex;gap:1em;flex:1;min-height:0;align-items:stretch}
.imgs figure{margin:0;flex:1.6;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f3efe6;border-radius:.6em;padding:.4em}
.imgs img{max-width:100%;max-height:100%;min-height:0;object-fit:contain;cursor:zoom-in;border-radius:.3em;flex:1}
.imgs figcaption{font-size:.55em;color:var(--mute);margin-top:.25em;text-align:center}
.imgs .side{flex:1;font-size:.85em;display:flex;flex-direction:column;gap:.6em}
.imgs .cap{font-size:.95em}
.qbox{background:#eef6f4;border-radius:.6em;padding:.6em .8em;font-size:.92em}
.stage:not(.wide) .imgs{flex-direction:column}
.stage:not(.wide) .imgs img{max-height:60vh}
.noimg{padding:1em;text-align:center;color:var(--mute);font-size:.8em}
.dyk{display:grid;grid-template-columns:repeat(auto-fit,minmax(14em,1fr));gap:.7em;flex:1;align-content:center}
.dyk .it{background:linear-gradient(160deg,#fff4cf,#ffe9a8);border-radius:.8em;padding:.8em 1em;font-size:.95em;box-shadow:0 .15em 0 #e8cf85}
.dyk .it::before{content:'💡 ';font-size:1.2em}
.persp{display:grid;grid-template-columns:repeat(auto-fit,minmax(11em,1fr));gap:.7em;flex:1;align-content:start}
.persp .p{background:#fff;border:1px solid var(--line);border-top:.35em solid var(--teal);border-radius:.7em;padding:.6em .8em;font-size:.85em}
.persp .p:nth-child(2){border-top-color:var(--terra)}.persp .p:nth-child(3){border-top-color:var(--gold)}
.persp .who{font-weight:800;color:var(--navy);font-size:1.05em;margin-bottom:.2em}
.persp .ic{font-size:1.5em;margin-left:.2em}
.disc{flex:1;display:flex;flex-direction:column;justify-content:center;gap:.6em}
.disc .bigq{font-size:1.45em;font-weight:700;color:var(--navy);background:#eef3fb;border-radius:.7em;padding:.6em .9em;line-height:1.35}
.disc ul{margin:0;padding-right:1.2em;font-size:.9em}
.timer{display:flex;gap:.4em;align-items:center;font-size:.75em}
.timer button{border:1px solid var(--line);background:#fff;border-radius:.6em;padding:.25em .7em;font-size:1em}
.timer .clock{font-weight:800;color:var(--terra);min-width:3.2em;font-size:1.2em}
.sum{background:linear-gradient(160deg,#fffdf8,#eef6f4)}
/* quiz */
.quiz{flex:1;display:flex;flex-direction:column;gap:.5em;min-height:0}
.quiz .qn{font-size:.7em;color:var(--terra);font-weight:700}
.quiz .qq{font-size:1.2em;font-weight:700;color:var(--navy)}
.quiz .opts{display:grid;grid-template-columns:1fr 1fr;gap:.5em}
.stage:not(.wide) .quiz .opts{grid-template-columns:1fr}
.quiz .opt{font-size:.92em;text-align:right;background:#fff;border:2px solid var(--line);border-radius:.7em;padding:.5em .8em;color:var(--ink)}
.quiz .opt:hover:not([disabled]){border-color:var(--navy2)}
.quiz .opt.ok{background:#e3f6ea;border-color:var(--ok)}
.quiz .opt.bad{background:#fde8e6;border-color:var(--bad)}
.quiz .fb{font-size:.85em;border-radius:.6em;padding:.45em .7em}
.quiz .fb.ok{background:#e3f6ea}.quiz .fb.bad{background:#fde8e6}
.quiz .nav{display:flex;gap:.5em;align-items:center;margin-top:auto}
.quiz .nav button,.btn{font-size:.85em;background:var(--navy);color:#fff;border:0;border-radius:.6em;padding:.45em 1em;font-weight:600}
.quiz .score{font-size:1.6em;font-weight:800;color:var(--navy);text-align:center}
.quiz .bar{height:.35em;background:#eee;border-radius:9px;overflow:hidden}.quiz .bar i{display:block;height:100%;background:var(--gold)}
/* nav */
.ctrl{display:flex;align-items:center;gap:10px;width:100%;justify-content:center}
.navb{font-size:22px;width:56px;height:48px;border-radius:14px;border:1px solid var(--line);background:#fff;color:var(--navy);font-weight:800}
.navb:disabled{opacity:.35}
.counter{font-weight:700;color:var(--navy);min-width:110px;text-align:center;font-size:17px}
.dots{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}
.dots button{width:11px;height:11px;border-radius:50%;border:0;background:#d6cdb6;padding:0}
.dots button.on{background:var(--terra);transform:scale(1.25)}
.notes{width:100%;background:#fff7d6;border:1px dashed #d9b84c;border-radius:14px;padding:12px 16px;font-size:16px;display:none}
.notes.show{display:block}
.notes h4{margin:0 0 4px;color:#8a5a00}
.lhead{width:100%;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lhead h2{margin:0;font-family:'Secular One','Rubik',sans-serif;color:var(--navy);font-size:22px;flex:1;min-width:200px}
.lbtn{border:0;border-radius:12px;padding:10px 14px;font-size:15.5px;font-weight:700;background:#fff;color:var(--navy);border:1px solid var(--line)}
.lbtn.p{background:var(--terra);color:#fff;border-color:var(--terra);font-size:17px}
.lbtn.on{background:var(--gold);border-color:var(--gold)}
/* fullscreen */
.lesson-wrap:fullscreen{background:#10172e;justify-content:center;padding:1vh 1vw}
.lesson-wrap:fullscreen .lhead{display:none}
.lesson-wrap:fullscreen .ctrl .counter{color:#fff}
.lesson-wrap:fullscreen .notes{position:fixed;bottom:70px;right:2vw;left:2vw;width:auto;z-index:5;opacity:.96}
/* lightbox */
.lb{position:fixed;inset:0;background:rgba(10,14,30,.92);z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;cursor:zoom-out}
.lb img{max-width:96vw;max-height:84vh;object-fit:contain;background:#fff}
.lb .c{color:#fff;font-size:14px;margin-top:8px;text-align:center;max-width:900px}
/* pages */
.page{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:20px}
.page h1{font-family:'Secular One','Rubik',sans-serif;color:var(--navy);margin:0 0 10px}
.search{width:100%;font-size:18px;padding:10px 14px;border-radius:12px;border:1px solid var(--line);margin:8px 0 14px;font-family:inherit}
.gl{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.gl .g{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.gl .g b{color:var(--navy);font-size:17px}.gl .g small{color:var(--terra);font-weight:600}
.fq{max-width:900px;margin:0 auto}
.fq .stage{aspect-ratio:auto}
.fq .slide{position:relative;inset:auto;font-size:19px;padding:22px}
.dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.dl a{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;text-decoration:none;color:var(--navy);font-weight:600}
.dl a .em{font-size:28px}
table.t{border-collapse:collapse;width:100%;font-size:15px}
table.t td,table.t th{border:1px solid var(--line);padding:6px 8px;text-align:right;vertical-align:top}
table.t th{background:#f1ead8}
.cartoon{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:14px}
.cartoon img{width:100%;border-radius:8px;cursor:zoom-in}
@media(max-width:760px){.cartoon{grid-template-columns:1fr}.topbar .brand{font-size:17px}.tb{padding:7px 9px;font-size:14px}main{padding:10px}.hero{padding:22px 16px}.lbtn{padding:9px 11px;font-size:14.5px}.lbtn.p{font-size:15.5px}}
/* print view */
#pv{position:fixed;inset:0;z-index:80;background:#7d8597;overflow:auto;display:none}
#pv.show{display:block}
#pv .pvbar{position:sticky;top:0;background:var(--navy);color:#fff;display:flex;gap:8px;padding:10px;align-items:center;justify-content:center;flex-wrap:wrap;z-index:2}
#pv .pvbar b{font-size:16px}
.a4{background:#fff;width:210mm;max-width:100%;min-height:297mm;margin:14px auto;padding:14mm 15mm;color:#000;font-size:12pt;line-height:1.5;box-shadow:0 4px 20px rgba(0,0,0,.3)}
.a4 h1{font-size:19pt;margin:0 0 2mm;color:#000;font-family:'Rubik',Arial,sans-serif}
.a4 h2{font-size:13.5pt;margin:5mm 0 2mm;border-bottom:1.5px solid #000;padding-bottom:1mm;break-after:avoid}
.a4 .hdr{display:flex;justify-content:space-between;gap:6mm;font-size:11pt;border:1px solid #000;border-radius:3mm;padding:2.5mm 4mm;margin-bottom:4mm}
.a4 .passage{border:1px solid #999;border-radius:2mm;padding:3mm 4mm;background:#fafafa}
.a4 .passage p{margin:0 0 2mm}
.a4 .srcx{border-right:3px solid #000;padding:1mm 4mm;margin:3mm 0;font-style:italic}
.a4 .srcx small{display:block;font-style:normal;color:#333}
.a4 .qi{margin:2.5mm 0;break-inside:avoid}
.a4 .lines{margin-top:1mm}
.a4 .lines i{display:block;border-bottom:1px solid #888;height:8mm}
.a4 .ans{background:#eef6ee;border-right:3px solid #2e7d32;padding:1.5mm 3mm;margin-top:1mm;font-size:11pt}
.a4 .lvl{font-size:10pt;font-weight:400;color:#444}
.a4 .foot{margin-top:6mm;font-size:9pt;color:#444;text-align:center;border-top:1px solid #ccc;padding-top:2mm}
.a4 table{border-collapse:collapse;width:100%;font-size:11pt;margin-top:2mm}
.a4 td,.a4 th{border:1px solid #000;padding:2mm;height:9mm;text-align:right}
.a4 .tlrow{display:flex;gap:2mm;flex-wrap:wrap}
.a4 .tlrow span{border:1px solid #000;border-radius:2mm;padding:1.5mm 3mm;font-size:11pt}
.a4 .box{display:inline-block;width:9mm;height:7mm;border:1px solid #000;vertical-align:middle;margin-left:2mm}
.a4 img.map{display:block;max-width:100%;max-height:120mm;margin:2mm auto;border:1px solid #ccc}
.a4 .key-badge{display:inline-block;background:#000;color:#fff;border-radius:2mm;padding:.5mm 3mm;font-size:10pt;margin-right:3mm}
@media print{
  @page{size:A4;margin:12mm}
  body{background:#fff}
  body>*:not(#pv){display:none!important}
  #pv{position:static;display:block!important;background:#fff;overflow:visible}
  #pv .pvbar{display:none}
  .a4{box-shadow:none;margin:0;padding:0;width:auto;min-height:0}
  .a4+.a4{break-before:page}
  .ans{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

@media(max-width:760px){#fs{display:none}.lhead h2{font-size:18px;flex-basis:100%}.lhead{gap:6px}}
@media(max-width:520px){.topbar{flex-wrap:nowrap;gap:4px;padding:8px}.topbar .brand{font-size:15px}.topbar .tb{font-size:12.5px;padding:6px 6px;border-radius:10px}}

@media(max-width:430px){.topbar .bt{display:none}}