:root{--bg:#fffaf3;--card:#fff;--ink:#2f2a26;--soft:#6b625a;--line:#eadfce;--acc:#d9772b;--acc2:#f6e3cf;--green:#3f8f5a;--safe:#fff1ec;--safe-b:#e8a08a;--blue:#eef5fb}
*{box-sizing:border-box}
html{font-size:19px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Source Han Sans SC","Microsoft YaHei",system-ui,sans-serif;line-height:1.75;overflow-wrap:anywhere}
a{color:#a8521a}
main{max-width:860px;margin:0 auto;padding:0 16px 32px}
h1{font-size:1.6rem;line-height:1.35;margin:.3em 0 .3em}
h2{font-size:1.25rem;line-height:1.4;margin:0 0 .5em}
h3{font-size:1.08rem;margin:0 0 .3em}
h4{font-size:1.02rem;margin:0 0 .2em}
p{margin:.4em 0}
ul,ol{padding-left:1.3em;margin:.3em 0}
li{margin:.25em 0}
.top{position:sticky;top:0;z-index:5;background:rgba(255,250,243,.96);border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;justify-content:space-between;padding:8px 16px}
.brand{font-weight:700;text-decoration:none;color:var(--ink);font-size:1.02rem}
.top nav{display:flex;gap:14px;flex-wrap:wrap}
.top nav a{text-decoration:none;color:var(--soft);font-size:.92rem;padding:4px 0}
.hero{padding:18px 0 6px}
.lead{font-size:1.06rem}
.meta{color:var(--soft);font-size:.92rem}
.week h2{margin:22px 0 10px;color:var(--acc)}
.grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:700px){.grid{grid-template-columns:1fr 1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:0 1px 2px rgba(80,50,20,.05)}
.lcard{display:block;text-decoration:none;color:inherit}
.lcard:hover{border-color:var(--acc)}
.lcard h3{font-size:1.15rem;margin:.35em 0 .15em}
.lc-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pill{display:inline-block;background:var(--acc2);color:#8a4515;border-radius:99px;padding:1px 12px;font-size:.85rem;margin:0}
.done-badge{color:var(--green);font-size:.88rem;font-weight:600}
.concept{color:var(--acc);font-weight:600;margin:.1em 0}
.mats{color:var(--soft);font-size:.92rem;margin:.2em 0 0}
.rules{display:grid;gap:12px;margin-top:26px}
.rule h3{color:var(--acc)}
.safe{background:var(--safe);border-color:var(--safe-b)}
.foot{max-width:860px;margin:0 auto;padding:18px 16px 40px;color:var(--soft);font-size:.85rem;border-top:1px solid var(--line)}
/* lesson */
.lhead{padding:16px 0 4px}
.goal,.time{margin:.3em 0}
.time{color:var(--soft);font-size:.92rem}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 6px}
.btn{font:inherit;font-size:.98rem;border:1.5px solid var(--acc);background:#fff;color:#8a4515;border-radius:12px;padding:10px 16px;cursor:pointer;min-height:48px}
.btn.primary{background:var(--acc);color:#fff}
.btn.small{font-size:.86rem;padding:6px 12px;min-height:40px}
.sec{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin:14px 0}
.sec.safe{background:var(--safe);border-color:var(--safe-b)}
.sub{color:var(--soft);font-size:.86rem;margin:.2em 0 .6em}
.note{font-size:.92rem;background:#fbf6ee;border-radius:10px;padding:8px 12px}
ul.mats{list-style:none;padding:0;color:var(--ink);font-size:1rem}
ul.mats li{border-bottom:1px dashed var(--line);padding:8px 0;margin:0}
.check{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.check input{position:absolute;opacity:0;width:1px;height:1px}
.check .box{flex:0 0 30px;height:30px;border:2px solid var(--acc);border-radius:8px;background:#fff;margin-top:2px;display:flex;align-items:center;justify-content:center}
.check input:checked+.box{background:var(--green);border-color:var(--green)}
.check input:checked+.box::after{content:"✓";color:#fff;font-weight:700;font-size:20px;line-height:1}
.check input:focus-visible+.box{outline:3px solid #f2b37f}
.check input:checked~.mtext b{color:var(--green)}
.qty{color:var(--acc);font-weight:700;margin-left:4px}
.mdetail{display:block;color:var(--soft);font-size:.86rem}
.mnote{display:block;font-size:.86rem;color:#8a4515}
.story .line{display:flex;gap:10px;align-items:flex-start;margin:.55em 0}
.who{flex:0 0 auto;min-width:3.2em;text-align:center;border-radius:8px;padding:0 6px;font-size:.86rem;font-weight:700;background:#f1ece6;color:#5d5249;margin-top:3px}
.who-Ollie{background:#e7f1e3;color:#2f6b3f}.who-Bobo{background:#efe6f6;color:#62408a}.who-Dot{background:#eef1f5;color:#3c4a5c}.who-家长,.who-提示{background:var(--acc2);color:#8a4515}
.say{flex:1}
.fig{margin:4px 0 12px;background:#fffdf8;border:1px solid var(--line);border-radius:12px;padding:8px}
.fig svg{display:block;width:100%;height:auto}
.steps{padding-left:0;list-style:none;counter-reset:s}
.steps li{border-left:4px solid var(--acc2);padding:4px 0 4px 12px;margin:10px 0}
.two{display:grid;gap:12px;background:none;border:none;padding:0}
@media(min-width:700px){.two{grid-template-columns:1fr 1fr}}
.box.simple,.box.chal{border-radius:16px;padding:14px 18px;border:1px solid var(--line)}
.box.simple{background:var(--blue)}.box.chal{background:#f3f8ef}
.tk{border-top:1px dashed var(--line);padding:8px 0}
.tk:first-of-type{border-top:none}
.tk h3{color:var(--acc);font-size:1rem}
.en{font-family:"Nunito","Avenir Next","Segoe UI",system-ui,sans-serif;font-weight:700;color:#2f6b3f}
.huge{font-size:1.7rem;line-height:1.3;margin:.2em 0}
.lbl{display:block;margin:12px 0 4px;font-size:.95rem}
textarea{width:100%;font:inherit;font-size:1rem;border:1.5px solid var(--line);border-radius:12px;padding:10px;background:#fffdf8}
.pager{display:flex;justify-content:space-between;gap:10px;margin:22px 0;font-size:.95rem}
.recs{list-style:none;padding:0;display:grid;gap:10px}
.rec-h{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px}
.rec.is-done .rec-status{color:var(--green);font-weight:600}
.rec-note{margin:.3em 0 0;white-space:pre-wrap}
.prose h2{margin-top:1em;color:var(--acc);font-size:1.1rem}
.prose h2:first-child{margin-top:0}
/* class mode */
.class-mode{position:fixed;inset:0;z-index:50;background:#fffaf3;display:flex;flex-direction:column}
.class-mode[hidden]{display:none}
.cm-top{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line)}
.cm-title{flex:1;font-weight:700;font-size:.92rem;color:var(--soft);min-width:0}
.cm-count{color:var(--acc);font-weight:700;white-space:nowrap}
.cm-slides{flex:1;overflow-y:auto;padding:18px 20px;-webkit-overflow-scrolling:touch}
.slide{display:none;max-width:760px;margin:0 auto}
.slide.on{display:block}
.s-label{display:inline-block;background:var(--acc);color:#fff;border-radius:99px;padding:2px 14px;font-size:1rem;margin-bottom:12px}
.s-body{font-size:1.45rem;line-height:1.65}
.s-body .big{font-size:1.5rem}
.s-body li{margin:.5em 0}
.s-body .hint{margin-top:16px;font-size:1.25rem;background:var(--acc2);border-radius:12px;padding:10px 14px}
.s-body .huge{font-size:2.2rem}
.cm-nav{display:flex;gap:12px;padding:12px 14px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.big-btn{flex:1;font-size:1.15rem;min-height:60px}
.big-btn:disabled{opacity:.35}
body.cm-open{overflow:hidden}
@media(min-width:900px){html{font-size:20px}}
@media print{
  html{font-size:12pt}
  body{background:#fff}
  .top,.foot,.actions,.pager,.btn,.class-mode,.log,.sub.speak-note{display:none!important}
  main{max-width:none;padding:0}
  .sec,.card,.box{box-shadow:none;break-inside:auto;border-color:#ccc}
  h2,h3,h4{break-after:avoid}
  li,.line,.fig{break-inside:avoid}
  .fig svg{max-height:9cm}
  .two{display:block}.two .box{margin-bottom:8px}
  .check .box{flex-basis:18px;height:18px}
  a{color:inherit;text-decoration:none}
  @page{size:A4;margin:14mm 14mm 16mm}
}
@media screen and (max-width:600px){.fig{padding:4px;margin-left:-6px;margin-right:-6px}.fig svg text{font-size:13px}}
@media screen and (min-width:900px){.s-body{font-size:1.9rem}.s-body .big{font-size:2rem}.s-body .hint{font-size:1.5rem}.s-label{font-size:1.2rem}}


/* lesson film */
.film{margin:0 0 18px;background:#fff8ec;border:1px solid var(--line);border-radius:16px;padding:10px}
.film-v{display:block;width:100%;height:auto;aspect-ratio:4/5;max-height:82vh;object-fit:contain;background:#fff1d8;border-radius:12px;margin:0 auto}
.film-cap{margin:8px 4px 2px;font-size:.95rem;color:var(--soft);text-align:center}
@media screen and (min-width:700px){.film{max-width:560px;margin-left:auto;margin-right:auto}}
.lc-thumb{position:relative;margin:4px 0 8px;border-radius:12px;overflow:hidden;aspect-ratio:16/10;width:100%;background:#fff1d8}
.lc-thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.lc-play{position:absolute;left:10px;bottom:10px;background:rgba(224,122,95,.95);color:#fff;font-weight:700;font-size:.9rem;border-radius:99px;padding:5px 12px}
@media print{.film{display:none!important}.lc-thumb{display:none!important}}
.more{margin:0 0 18px;border:1px dashed var(--line);border-radius:14px;padding:10px 14px;background:#fffdf8}
.more>summary{cursor:pointer;font-weight:700;color:var(--acc);min-height:40px;display:flex;align-items:center}
@media print{.more>*{display:block!important}}