/* Light theme only. One workbook column on school grid paper, with a sticky nav strip. */
*{box-sizing:border-box}
[hidden]{display:none!important}
:root{color-scheme:light;--paper:#fbfbfe;--sheet:#ffffff;--grid:#e3e6f4;--ink:#23204f;--soft:#5d5a85;--purple:#4c3bb5;--purple-bg:#ecebfb;--red:#c5283d;--red-bg:#fdecee;--green:#17795a;--line:#cfd2e8;
--display:"Baloo 2","Trebuchet MS",sans-serif;--body:"Be Vietnam Pro","Segoe UI",system-ui,sans-serif}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.65 var(--body)}
img{max-width:100%}
.wrap{max-width:780px;margin:0 auto;padding-block:0 64px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
header.top{background-color:var(--paper);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px;border-bottom:2px solid var(--purple)}
header.top .wrap{padding-block:40px 28px}
h1,h2,h3{font-family:var(--display);line-height:1.2;text-wrap:balance;margin:0}
h1{font-size:clamp(2.2rem,7vw,3.3rem);font-weight:700;color:var(--purple)}
.lede{max-width:62ch;margin:10px 0 0;font-size:1.06rem}
h2{font-size:1.65rem;font-weight:700}
h3{font-size:1.28rem;font-weight:600}
h4{font:600 1.16rem/1.25 var(--display);margin:0}
.topic{margin-top:52px;scroll-margin-top:60px}
.topic>h2{color:var(--purple);font-size:1.9rem}
.mixed{margin-top:18px;padding:18px;background:var(--sheet);border:1px solid var(--line);border-radius:8px}
.ptable a{white-space:nowrap}
.vi{color:var(--soft);font-style:italic;font-size:.92rem}
section.block{margin-top:36px}
section.block>h2{margin-bottom:10px}
.tw{overflow-x:auto;margin:12px 0}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
th,td{border:1px solid var(--line);padding:7px 10px;text-align:left;vertical-align:top}
th{background:var(--purple-bg);font-weight:600}
table.mini{width:auto;font-size:.93rem}
td.broken{color:var(--red);font-weight:700}
nav.days{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--paper);border-bottom:1px solid var(--line)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--paper)}
nav.days .in{max-width:780px;margin:0 auto;display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding-block:8px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
nav.days a{flex:none;font:600 .92rem var(--display);color:var(--purple);text-decoration:none;padding:4px 11px;border:1px solid var(--line);border-radius:6px;background:var(--sheet)}
nav.days a:hover{background:var(--purple-bg)}
#progress{flex:none;margin-left:auto;padding-left:10px;font-size:.84rem;color:var(--soft);white-space:nowrap}
.day{margin-top:46px;scroll-margin-top:60px}
.dayhead{border-bottom:2px solid var(--purple);padding-bottom:8px}
.daynum{font:700 .84rem var(--display);letter-spacing:.09em;text-transform:uppercase;color:var(--red)}
.note{margin:12px 0 0;font-size:.94rem;color:var(--soft)}
.note b{color:var(--ink)}
.lesson{margin-top:26px;padding:18px;background:var(--sheet);border:1px solid var(--line);border-radius:8px;scroll-margin-top:60px}
.lhead{display:flex;gap:12px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}
.lhead>div{min-width:0}
.done{display:inline-flex;gap:6px;align-items:center;font-size:.86rem;color:var(--soft);cursor:pointer}
.done input{width:18px;height:18px;accent-color:var(--purple)}
.bonus{color:var(--red);font:600 .78rem var(--display);letter-spacing:.06em;text-transform:uppercase}
.idea{margin:12px 0}
.why{margin:14px 0;padding:14px 16px;background:var(--paper);border:1px solid var(--line);border-radius:6px}
.why p{margin:8px 0 0}
.why .fig+p{margin-top:0}
.label{font:600 .82rem var(--display);letter-spacing:.07em;text-transform:uppercase;color:var(--purple);margin:16px 0 5px}
ol.steps{margin:0;padding-left:1.3em;display:grid;gap:3px}
.fig{overflow-x:auto;margin:12px 0}
.fig svg{display:block;max-width:none}
.f-cell{fill:none;stroke:var(--ink);stroke-width:1.2}
.f-mark{fill:var(--red-bg);stroke:none}
.f-line{stroke:var(--soft);stroke-width:1.4}
.f-dot{fill:var(--sheet);stroke:var(--purple);stroke-width:1.5}
.f-dot-end{fill:var(--purple);stroke:var(--purple)}
.f-num{fill:var(--ink);font:600 12px var(--body)}
.f-num-end{fill:var(--sheet);font:700 12px var(--body)}
.f-bar{fill:var(--purple-bg);stroke:var(--purple);stroke-width:1.3}
.f-bar2{fill:var(--red-bg);stroke:var(--red);stroke-width:1.3}
.f-lab{fill:var(--ink);font:600 13px var(--body)}
ol.tries{margin:0;padding-left:1.5em;display:grid;gap:9px}
details{margin-top:2px}
summary{cursor:pointer;color:var(--purple);font-size:.87rem;font-weight:500;width:max-content;max-width:100%}
.ans{display:block;margin-top:3px;padding:6px 10px;background:var(--purple-bg);border-radius:5px;font-size:.93rem}
.ans b{color:var(--green)}
.book{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);font-size:.93rem}
.book p{margin:2px 0}
.book .k{font-weight:600}
ul.tips{margin:8px 0 0;padding-left:1.2em;display:grid;gap:5px}
a{color:var(--purple)}
nav.days a.current{background:var(--purple);border-color:var(--purple);color:#fff}
nav.days a.history{border-color:var(--purple)}
.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-top:12px}
.field{display:grid;gap:4px;min-width:0}
.field label,.field legend,fieldset legend{font-weight:600;font-size:.92rem}
.hint{font-size:.82rem;color:var(--soft);font-weight:400}
input[type=date],input[type=number],select,textarea{width:100%;padding:8px 10px;font:inherit;color:var(--ink);background:var(--sheet);border:1px solid var(--line);border-radius:6px}
textarea{min-height:64px;resize:vertical}
fieldset{border:0;padding:0;margin:18px 0 0}
.topicgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:12px;margin-top:6px}
.preview{margin:14px 0;padding:9px 12px;background:var(--purple-bg);border-radius:6px;font-weight:600}
.btn{font:600 1rem var(--display);padding:8px 18px;border-radius:6px;border:1px solid var(--purple);background:var(--purple);color:#fff;cursor:pointer}
.btn.secondary{background:var(--sheet);color:var(--purple);display:inline-block;font-size:.95rem}
.btnrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:10px}
.link-button{background:none;border:0;padding:0;color:var(--red);font:inherit;font-size:.88rem;text-decoration:underline;cursor:pointer}
.message{min-height:1.6em;margin:10px 0 0;color:var(--green);font-weight:500}
.message.error{color:var(--red)}
.summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:12px 0}
.stat{padding:12px;background:var(--sheet);border:1px solid var(--line);border-radius:8px}
.stat-value{font:700 1.4rem/1.2 var(--display);color:var(--purple)}
.stat-label{font-size:.85rem;color:var(--soft)}
.wide .wrap,.wide nav.days .in{max-width:980px}
.history td{font-size:.92rem}
.history th{font-size:.88rem}
.nowrap{white-space:nowrap}
.num{white-space:nowrap;font-variant-numeric:tabular-nums}
.award{font-size:.8rem;color:var(--green)}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}
@media print{nav.days,.done{display:none}.lesson{break-inside:avoid}body{background:#fff}}

html[lang="en"] .l-vi,html[lang="vi"] .l-en{display:none!important}
:root{--green-bg:#e6f5ee}
.lang{display:inline-flex;flex:none;border:1px solid var(--purple);border-radius:6px;overflow:hidden}
.lang button{font:600 .86rem var(--display);border:0;background:var(--sheet);color:var(--purple);cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--purple);color:#fff}
.ptable td{vertical-align:top}
.status{display:block;margin-top:5px;font-size:.82rem;color:var(--soft);white-space:nowrap}
td.cell-done{background:var(--green-bg)}
td.cell-done .status{color:var(--green);font-weight:600}
.day{scroll-margin-top:140px}
#overview[hidden],.day[hidden]{display:none}
.f-front{fill:var(--sheet);stroke:var(--ink);stroke-width:1.2}
.f-top{fill:var(--purple-bg);stroke:var(--ink);stroke-width:1.2}
.f-side{fill:var(--line);stroke:var(--ink);stroke-width:1.2}
.f-ink{stroke:var(--ink);stroke-width:1.6}
.f-hole{fill:var(--paper);stroke:var(--purple);stroke-width:1.3}
.f-block{fill:var(--red)}
table.rule td{text-align:center;min-width:42px}
.lang button{padding:4px 9px}
.barlabel{font:600 .92rem var(--display)}
nav.days button.arrow{flex:none;width:34px;height:32px;font:700 1.05rem var(--display);color:var(--purple);background:var(--sheet);border:1px solid var(--line);border-radius:6px;cursor:pointer}
nav.days button.arrow:disabled{opacity:.35;cursor:default}
#day-select{flex:1 1 150px;min-width:0;width:auto;padding:5px 8px;font:500 .9rem var(--body)}
.continue{display:inline-block;margin-top:16px;text-decoration:none}
.tier{margin-top:12px}
.tierhead{font:600 1rem var(--display);color:var(--green)}
.tier-sub{font:400 .84rem var(--body);color:var(--soft);margin-left:6px}
.tier ol.tries{margin-top:8px}
.tierbox{margin-top:10px;border:1px solid var(--line);border-radius:6px;padding:9px 12px;background:var(--paper)}
.tierbox>summary{font:600 .98rem var(--display);width:auto}
.tierbox ol.tries{margin-top:10px}
.check{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:5px}
.check input{width:112px;padding:5px 8px;font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:5px}
.check button,.opt,.printbtn{font:600 .86rem var(--display);padding:5px 11px;border:1px solid var(--purple);border-radius:5px;background:var(--sheet);color:var(--purple);cursor:pointer}
.result{font-size:.9rem;font-weight:600}
.result.good{color:var(--green)}
.result.bad{color:var(--red)}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:6px;margin-top:6px}
.opt{text-align:left;font:500 .92rem var(--body)}
.opt.good{background:var(--green-bg);border-color:var(--green);color:var(--green)}
.opt.bad{background:var(--red-bg);border-color:var(--red);color:var(--red)}
.mc-msg{font-size:.9rem;font-weight:600;min-height:0}
.daynav{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-top:26px;padding-top:14px;border-top:2px solid var(--purple)}
.daynav label{display:inline-flex;gap:7px;align-items:center;font-weight:600;cursor:pointer}
.daynav input{width:20px;height:20px;accent-color:var(--purple)}
.daynav a{font:600 .95rem var(--display)}
.vocab{margin-top:14px;padding:12px 14px;background:var(--sheet);border:1px solid var(--line);border-radius:8px;font-size:.93rem}
.vocab ul{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:4px 16px}
.rest{padding:26px 18px;margin-top:18px;background:var(--green-bg);border-radius:8px;font-size:1.05rem}
.print-key{display:none}
.topicstat{display:block;margin-top:5px;font-size:.82rem;color:var(--soft)}
@media print{
 nav.days,.check,.daynav,.done,details>summary,.printbtn{display:none!important}
 details.tierbox{display:block;border:0;padding:0;background:none}
 details.tierbox>*{display:revert}
 details:not(.tierbox) {display:none}
 .opt{border:0;background:none;color:#000;padding:0}
 .print-key{display:block;break-before:page;font-size:.85rem}
 .print-key p{margin:3px 0}
 .lesson,.mixed{border:0;padding:0}
}