:root{--ink:#17324d;--paper:#faf8f2;--muted:#65768a;--line:#e3e6e8;--orange:#de773d;--green:#277f63;--pale:#f1e9d9}*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden}body{font-family:"Microsoft YaHei",system-ui,sans-serif;background:var(--paper);color:var(--ink);display:grid;grid-template-rows:74px minmax(0,1fr) 30px}button,input,select{font:inherit}button{cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink);padding:10px 15px;border-radius:12px;touch-action:manipulation}button:hover:not(:disabled){border-color:var(--orange)}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #de773d88;outline-offset:3px}.primary{background:var(--ink);color:#fff;border-color:var(--ink)}.accent{background:var(--orange);color:white;border-color:var(--orange)}.quiet{background:transparent}.hidden{display:none!important}.topbar{display:flex;align-items:center;gap:10px;padding:10px 3vw;border-bottom:1px solid var(--line);background:var(--paper);z-index:4}.brand{margin-right:auto;text-align:left;font-size:21px;font-weight:800;background:transparent;border:0;padding:0}.brand small{display:block;font-size:11px;font-weight:400;color:var(--muted);margin-top:4px}.bank-box,.break-box{display:flex;align-items:center;gap:9px;border-left:1px solid var(--line);padding-left:16px}.top-label{font-size:12px;color:var(--muted)}.bank-box strong,.break-box strong{font-variant-numeric:tabular-nums;font-size:24px;min-width:60px}.bank-box strong{color:var(--orange)}.break-box strong.urgent{color:#c2432f}.topbar button:not(.brand){font-size:12px;padding:9px 11px}.reward span{background:var(--orange);color:white;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;min-width:20px;height:20px;margin-left:5px}main{padding:16px 3vw;min-height:0;overflow:hidden;width:100%;max-width:1700px;margin:auto;height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:12px}.eyebrow{color:var(--orange);font-size:13px;line-height:22px;display:flex;align-items:center;justify-content:space-between;gap:10px}.eyebrow button{padding:5px 10px;font-size:12px}.word-layout{display:grid;grid-template-columns:1.02fr 1fr;gap:28px;min-height:0}.picture{border:1px solid #e8dfd0;background:var(--pale);border-radius:24px;overflow:hidden;min-height:0;min-width:0;display:flex;align-items:center;justify-content:center}.picture img{height:100%;width:100%;object-fit:contain}.picture-empty{color:#8e897b;text-align:center;font-size:22px}.word-copy{display:flex;flex-direction:column;justify-content:center;gap:clamp(9px,2vh,18px);min-width:0;min-height:0}.word{font:800 clamp(34px,min(5.8vw,10vh),84px)/1.1 Arial,sans-serif;margin:0;overflow-wrap:normal}.instruction{font-size:clamp(23px,4vh,34px);font-weight:650;line-height:1.4;margin:0}.caption{font-size:clamp(23px,4vh,31px);line-height:1.45;color:var(--orange);margin:0;font-weight:700}.meaning{font-size:24px;line-height:1.5;margin:0}.small{font-size:12px;color:var(--muted);line-height:1.6}.actions{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}.word-copy .actions{justify-content:flex-start}.key{display:inline-flex;align-items:center;justify-content:center;min-width:20px;min-height:20px;padding:2px 5px;background:#17324d0e;border-radius:5px;font-size:12px;margin-right:5px}.primary .key,.accent .key{background:#fff2}.main-action{padding:14px 22px;font-size:18px}.progress-strip{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted);gap:12px;min-height:22px}.step-pills{display:flex;gap:7px}.step-pills span{padding:5px 10px;border-radius:20px;background:#edf0f1}.step-pills .active{background:var(--ink);color:#fff}.attempt{min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:12px}.attempt-main{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:18px;min-height:0}.attempt-main .word{font-size:clamp(45px,min(7vw,12vh),105px)}.attempt.has-picture .attempt-main{display:grid;grid-template-columns:1fr 1fr;text-align:left;gap:26px}.attempt.has-picture .word{font-size:clamp(32px,min(4.8vw,8vh),65px)}.rating{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;max-width:1100px;width:100%;margin:auto}.rating button{font-size:18px;font-weight:650;padding:14px 10px}.rating small{display:block;font-size:12px;font-weight:400;color:var(--muted);margin-top:5px}.rating .primary small{color:#dce5ed}.response-tools{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:10px}.response-tools button{padding:9px 14px}.status-box{background:#edf1f4;border-radius:14px;padding:13px 17px;font-size:16px;line-height:1.6}.summary{grid-row:2/4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;text-align:center;min-height:0}.summary h1{font-size:clamp(30px,5vh,45px);line-height:1.3;margin:0}.summary p{margin:0;font-size:16px;line-height:1.6}.score-grid{display:flex;gap:22px;justify-content:center}.score-card{padding:22px 35px;background:white;border-radius:20px;font-size:18px}.score-card strong{display:block;font-size:46px;color:var(--green);margin-top:7px}.summary .status-box{max-width:1000px}.home-content{min-height:0;overflow:auto;display:flex;flex-direction:column;gap:22px;padding-bottom:10px}.home-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}.home-heading h1{font-size:clamp(27px,4.5vh,40px);margin:0}.home-heading p{font-size:14px;color:var(--muted);margin:8px 0 0}.today-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.today-card{background:var(--ink);color:white;border-radius:22px;padding:24px;display:flex;align-items:center;justify-content:space-between;text-align:left;gap:12px}.today-card.orange{background:#e78046}.today-card strong{display:block;font-size:25px}.today-card small{display:block;opacity:.85;font-size:13px;margin-top:8px}.today-card b{font-size:36px;font-weight:400}.unit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.unit-card{background:white;border:1px solid var(--line);border-radius:18px;padding:16px}.unit-card h3{font-size:18px;margin:0 0 12px}.unit-card .module-links{display:flex;gap:7px}.module-links button{font-size:12px;flex:1;padding:9px 5px}.module-links button small{display:block;font-size:10px;margin-top:3px;color:var(--muted)}.module-links button.available{border-color:#bfd3c8;background:#f0f7f3}.module-links button:disabled{opacity:1;color:#9da6af;background:#f8f8f8}.grammar-layout{display:grid;grid-template-columns:1fr 1fr;gap:28px;min-height:0}.grammar-scene{background:#f0e9db;border-radius:24px;padding:30px;display:flex;flex-direction:column;justify-content:center;gap:15px;min-height:0}.grammar-scene .scene-text{font-size:clamp(23px,4vh,33px);line-height:1.55;font-weight:600}.english-model{font:700 clamp(26px,4.7vh,39px)/1.35 Arial,sans-serif;margin:0}.contrast{font:600 clamp(22px,3.6vh,30px)/1.35 Arial,sans-serif;color:var(--orange);margin:0}.grammar-copy{display:flex;flex-direction:column;justify-content:center;gap:15px;min-height:0}.choice-list{display:grid;gap:10px}.choice-list button{text-align:left;font:600 24px/1.35 Arial,sans-serif;padding:15px 20px}.lesson-list{display:grid;gap:12px;width:min(900px,100%)}.lesson-list button{text-align:left;padding:18px 23px;font-size:21px;display:flex;justify-content:space-between;gap:15px}.lesson-list small{display:block;font-size:12px;color:var(--muted);margin-top:6px}.reader-holder{grid-row:2/4;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:10px}.reader-holder iframe{height:100%;width:100%;border:1px solid var(--line);border-radius:14px;background:white}.reader-controls{display:flex;gap:10px;align-items:center;justify-content:center}.reader-controls .small{max-width:580px}.drawer{position:fixed;right:0;top:0;width:min(730px,100vw);height:100dvh;overflow:auto;z-index:30;background:white;box-shadow:-20px 0 70px #17324d22;padding:25px}.drawer h2{margin-top:0}.drawer h3{margin-top:25px}.drawer .actions{justify-content:flex-start;margin:15px 0}.drawer label{display:inline-flex;gap:8px;align-items:center;font-size:14px;margin:8px 12px 8px 0}.drawer input[type=number]{width:85px;padding:8px}.drawer table{border-collapse:collapse;width:100%;font-size:12px}.drawer td,.drawer th{text-align:left;border-bottom:1px solid var(--line);padding:9px 5px}.drawer textarea{width:100%;min-height:120px;padding:12px}.modal-backdrop{position:fixed;inset:0;z-index:40;background:#17324d70;display:flex;align-items:center;justify-content:center;padding:20px}.modal{background:var(--paper);width:min(650px,100%);max-height:calc(100dvh - 40px);overflow:auto;padding:30px;border-radius:24px;text-align:center}.modal h2{font-size:29px;margin:5px 0 14px}.modal p{font-size:15px;line-height:1.65}.modal .actions{margin:18px 0}.timer-big{font-size:68px;line-height:1.2;font-weight:700;font-variant-numeric:tabular-nums;margin:20px 0}.dice{width:124px;height:124px;background:white;border:2px solid #d8dfe4;border-radius:23px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:21px;margin:25px auto;box-shadow:0 8px 20px #17324d11}.pip{width:17px;height:17px;background:var(--ink);border-radius:50%;justify-self:center;align-self:center}.dice.rolling{animation:dice-shake .75s ease-out}.dice-result{font-size:32px;font-weight:750;color:var(--orange)}.system-notice{position:fixed;left:3vw;bottom:36px;background:#fff0d5;padding:12px 18px;max-width:94vw;font-size:13px;z-index:45;border-radius:12px}.toast{position:fixed;top:85px;left:50%;transform:translateX(-50%);z-index:25;background:var(--ink);color:white;padding:11px 23px;border-radius:12px;font-size:14px;box-shadow:0 6px 25px #0002}.loading{grid-row:2;display:flex;align-items:center;justify-content:center;font-size:23px}footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:5px 3vw;color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden}footer button{font-size:11px;padding:2px 7px;border:0;background:transparent}.follower .topbar{background:#f3f0e5}.follower main:before{content:"跟随页面 · 请在主课堂窗口操作";position:fixed;top:78px;left:50%;transform:translateX(-50%);z-index:3;background:#fff0d5;border-radius:12px;padding:9px 18px;font-size:13px}.error-card{grid-row:2;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:15px}.error-card h1{margin:0}.error-card p{max-width:750px;line-height:1.7}.tag{font-size:12px;color:var(--muted)}@keyframes dice-shake{0%{transform:rotate(0) translateY(0)}20%{transform:rotate(-16deg) translateY(-12px)}45%{transform:rotate(13deg) translateY(-7px)}70%{transform:rotate(-7deg)}100%{transform:rotate(0)}}@media(max-height:680px) and (min-width:801px){body{grid-template-rows:62px minmax(0,1fr) 26px}.topbar{padding:7px 3vw}.brand small{display:none}.topbar button:not(.brand){padding:7px 9px}.bank-box strong,.break-box strong{font-size:21px}main{padding:10px 3vw;gap:8px}.word-copy,.grammar-copy{gap:9px}.word{font-size:clamp(31px,8vh,57px)}.instruction{font-size:24px}.caption{font-size:25px}.meaning{font-size:21px}.main-action{font-size:16px;padding:10px 17px}.rating button{font-size:16px;padding:10px 7px}.rating small{font-size:11px}.attempt-main{gap:10px}.grammar-scene{padding:24px}.grammar-scene .scene-text{font-size:25px}.english-model{font-size:30px}.contrast{font-size:23px}.home-content{gap:15px}.today-card{padding:18px}.today-card strong{font-size:23px}.unit-card{padding:12px}.unit-card h3{font-size:16px;margin-bottom:9px}.summary{gap:13px}.score-card{padding:15px 28px}.score-card strong{font-size:39px}.status-box{font-size:14px}.summary p{font-size:14px}.modal{padding:22px}.modal h2{font-size:25px}}
@media(max-width:900px){.brand{font-size:17px}.brand small{display:none}.topbar{gap:6px;padding:8px 12px}.bank-box,.break-box{padding-left:8px;gap:5px}.top-label{font-size:10px}.bank-box strong,.break-box strong{font-size:20px;min-width:48px}.topbar button:not(.brand){font-size:11px;padding:8px}.unit-grid{grid-template-columns:repeat(2,1fr)}main{padding:12px}.today-card{padding:18px}.today-card strong{font-size:22px}.word-layout,.grammar-layout{gap:18px}.caption{font-size:25px}.instruction{font-size:26px}.rating button{font-size:15px}.rating small{font-size:10px}.grammar-scene{padding:20px}.choice-list button{font-size:21px}.key{font-size:10px}}
@media(max-width:650px){html,body{overflow:auto}body{min-height:100dvh;height:auto;grid-template-rows:auto minmax(0,1fr) 28px}.topbar{flex-wrap:wrap;position:sticky;top:0}.brand{flex-basis:45%}.topbar>.brand~button{padding:7px;font-size:11px}.bank-box,.break-box{order:2;flex:1}.bank-box{border:0;padding-left:0}.break-box{justify-content:flex-end}.topbar #fullscreen-button{display:none}main{min-height:650px;height:calc(100dvh - 145px);overflow:hidden;gap:8px}.word-layout,.grammar-layout{grid-template-columns:1fr;grid-template-rows:minmax(0,.8fr) minmax(0,1.1fr);gap:10px}.word-copy{gap:9px}.word{font-size:35px}.caption{font-size:24px}.instruction{font-size:23px}.word-copy .small{display:none}.rating{gap:5px}.rating button{font-size:12px;padding:11px 5px}.rating small{display:none}.attempt.has-picture .attempt-main{grid-template-columns:1fr;grid-template-rows:minmax(0,.9fr) minmax(0,1fr);gap:10px}.attempt.has-picture .word{font-size:32px}.attempt.has-picture .meaning{font-size:19px}.response-tools .small{display:none}.today-grid{grid-template-columns:1fr;gap:10px}.today-card{padding:18px}.unit-grid{gap:10px}.unit-card{padding:12px}.unit-card h3{font-size:16px}.module-links{flex-direction:column}.home-heading{align-items:flex-start}.home-heading h1{font-size:27px}.home-heading .actions button{font-size:11px;padding:8px}.grammar-scene{padding:18px}.grammar-scene .scene-text{font-size:22px}.grammar-copy{gap:9px}.english-model{font-size:27px}.contrast{font-size:21px}.choice-list button{font-size:19px;padding:12px}.summary h1{font-size:27px}.summary p{font-size:13px}.score-card{padding:16px;font-size:13px}.score-card strong{font-size:34px}.summary .actions button{font-size:12px}.summary .status-box{font-size:13px}.reader-controls{flex-wrap:wrap}.reader-controls .small{font-size:11px}footer{padding:4px 12px;font-size:10px}#save-state{display:none}.modal{padding:22px}.modal h2{font-size:25px}.lesson-list button{font-size:17px;padding:14px}.progress-strip{font-size:10px}.step-pills span{padding:4px 6px}}
@media(prefers-reduced-motion:reduce){.dice.rolling{animation:none}}@media print{html,body{height:auto;overflow:visible;display:block}.topbar,footer,.modal-backdrop,.toast{display:none}.drawer{position:static;width:100%;height:auto;box-shadow:none}main{display:block;height:auto}}

/* Meaning, phonetic cue and illustrated caption serve separate learning roles. */
.grammar-teaching .grammar-scene{display:flex;flex-direction:column;justify-content:center;gap:16px}.grammar-teaching h2{font-size:clamp(24px,3.8vh,34px);margin:0}.sentence-blocks{display:flex;flex-wrap:wrap;gap:10px}.sentence-blocks>div{background:white;padding:10px 16px;border-radius:12px;display:flex;flex-direction:column;gap:5px}.sentence-blocks strong{font-size:clamp(25px,4vh,34px)}.sentence-blocks span,.model-translation{font-size:20px;color:var(--muted)}.grammar-explanation{font-size:clamp(19px,3vh,25px);line-height:1.6;margin:0}.grammar-rule{font-size:clamp(19px,3vh,25px);line-height:1.5;background:#de773d12;border-left:4px solid var(--orange);padding:12px 16px;border-radius:8px}.grammar-menu .lesson-list{max-width:840px}.grammar-menu .lesson-list small{line-height:1.4}.grammar-teaching .english-model{margin:0}.grammar-teaching .model-translation{margin:0}.grammar-teaching .contrast{margin:0;line-height:1.45}
.mnemonic-figure{margin:0;width:100%;height:100%;display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:0}.mnemonic-figure img{min-height:0;width:100%;height:100%;object-fit:contain}.mnemonic-figure figcaption{font-size:clamp(16px,2.8vh,23px);line-height:1.4;text-align:center;padding:10px 14px;background:#fff9;color:var(--ink)}.word-meaning{font-size:clamp(30px,5.5vh,42px);font-weight:700;margin:0}.word-meaning span{font-size:13px;font-weight:400;color:var(--muted);margin-right:14px}.cue-block{display:flex;align-items:baseline;gap:12px;color:var(--muted)}.cue-block span{font-size:12px}.cue-block strong{font-size:20px;font-weight:400}.word-star{font-size:15px;vertical-align:super;color:var(--muted);margin-left:8px}.listen-prompt{font-size:18px;color:var(--muted);margin:0}

/* Keep global navigation reachable while classroom overlays are open. */
:root{--bar-height:74px}.modal-backdrop{top:var(--bar-height)}.drawer{top:var(--bar-height);height:calc(100dvh - var(--bar-height))}
@media(max-height:680px) and (min-width:801px){:root{--bar-height:62px}}
@media(max-width:650px){:root{--bar-height:116px}}

/* Bound illustrated answers to their grid track; reserve a separate grading row. */
.attempt.has-picture .attempt-main{grid-template-rows:minmax(0,1fr);align-items:stretch;min-height:0;overflow:hidden}.attempt.has-picture .attempt-main>.picture{height:100%;max-height:100%;min-height:0}.attempt.has-picture .mnemonic-figure{min-height:0;overflow:hidden}.attempt>div:last-child{min-width:0}
@media(max-width:650px){.attempt.has-picture .attempt-main{grid-template-rows:minmax(0,.9fr) minmax(0,1fr)}}

/* ---- Grammar handout ---- */
main:has(.ho-head){grid-template-rows:auto auto minmax(0,1fr) auto}
mark{background:none;color:var(--orange);font-weight:800}
.ho-head{display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0}
.ho-head h1{margin:0;font-size:clamp(22px,3.6vh,32px);white-space:nowrap}
.ho-tabs{display:flex;gap:6px}.ho-tabs button{font-size:13px;padding:7px 12px;border-radius:20px;white-space:nowrap}.ho-tabs b{display:inline-flex;width:18px;height:18px;border-radius:50%;background:#17324d12;align-items:center;justify-content:center;font-size:11px;margin-right:5px}.ho-tabs .active{background:var(--ink);color:#fff;border-color:var(--ink)}.ho-tabs .active b{background:#fff3}
.ho-board{min-height:0;display:grid;gap:18px}.ho-board.split{grid-template-columns:1.15fr 1fr}
.ho-pane{min-height:0;display:flex;flex-direction:column;justify-content:safe center;gap:clamp(10px,2vh,18px)}
.ho-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.say{border:0;background:transparent;padding:2px 4px;margin:-2px -4px;border-radius:8px;font:700 clamp(19px,3.1vh,27px)/1.3 Arial,sans-serif;text-align:left;color:var(--ink)}.say:hover:not(:disabled){background:#de773d14}.say.big{font-size:clamp(24px,4vh,34px)}
.zh{display:block;font-size:clamp(14px,2.1vh,17px);color:var(--muted);margin-top:3px}
.ho-label{font-size:13px;color:var(--muted);font-weight:700;margin-right:8px}.ho-note{font-weight:400;color:var(--orange)}
.ho-compare{display:grid;grid-template-columns:1fr 1fr;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.ho-col-head{padding:9px 18px;font-size:14px;color:var(--muted);background:#f4f1ea}.ho-col-head.strong{color:var(--ink);font-weight:800;background:#f6e7da}
.ho-cell{padding:clamp(8px,1.6vh,14px) 18px;border-top:1px solid var(--line)}.ho-compare .ho-cell:nth-child(even){background:#fffaf5}
.ho-rule{font-size:clamp(18px,2.9vh,24px);line-height:1.5;font-weight:650;background:#de773d12;border-left:5px solid var(--orange);padding:12px 18px;border-radius:10px}
.ho-chips{display:flex;flex-direction:column;gap:8px}.ho-chips>div{display:flex;flex-wrap:wrap;align-items:center;gap:6px}.chip{font:600 16px Arial,sans-serif;background:#fff;border:1px solid #f0c9ad;color:var(--ink);padding:4px 11px;border-radius:20px}.ho-chips .muted .chip{border-color:var(--line);color:#8a96a3}
.ho-examples{background:#fff;border-radius:16px;padding:12px 16px;border:1px dashed #d9cdb8;display:flex;flex-direction:column;gap:8px}.ho-example .say{font-size:clamp(17px,2.6vh,22px)}
.ho-wrong{display:flex;gap:10px;flex-wrap:wrap}.ho-wrong span{font:700 clamp(16px,2.4vh,20px) Arial,sans-serif;padding:7px 13px;border-radius:10px}.ho-wrong .bad{background:#fbe9e6;color:#b2412f;text-decoration:line-through;text-decoration-thickness:2px}.ho-wrong .good{background:#e6f3ec;color:var(--green)}
.ho-move{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}.ho-move .ho-cell:first-child{border-top:0}.ho-arrow{padding:6px 18px;font-size:20px;color:var(--orange);font-weight:800;background:#fdf3ea}.ho-arrow span{font-size:14px;font-weight:600}
.ho-verbs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.ho-verbs section{background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}.ho-verbs h3{margin:0;font-size:clamp(17px,2.7vh,22px);display:flex;align-items:center;gap:8px}.ho-verbs h3 b{display:inline-flex;width:26px;height:26px;border-radius:50%;background:var(--orange);color:#fff;font-size:14px;align-items:center;justify-content:center}.ho-hint{margin:0 0 4px;font-size:13px;color:var(--muted)}
.verb{display:grid;grid-template-columns:auto auto auto 1fr;align-items:baseline;gap:8px;border:0;background:transparent;padding:clamp(2px,.45vh,6px) 6px;border-radius:8px;text-align:left;font:700 clamp(18px,3vh,26px) Arial,sans-serif}.verb:hover:not(:disabled){background:#de773d14}.verb .base{color:#7c8794;font-weight:600}.verb .to{color:#b9c0c7}.verb .zh{display:inline;font:400 14px "Microsoft YaHei",sans-serif;margin:0 0 0 4px}
.ho-contrast{margin-top:auto;padding:8px 10px;border-radius:10px;background:#eef3f7;font-size:14px;display:flex;flex-direction:column;gap:2px}.ho-contrast b{font:700 18px Arial,sans-serif}
.ho-verbs.compact{grid-template-columns:1fr;gap:8px}.ho-verbs.compact section{padding:8px 12px;flex-direction:row;flex-wrap:wrap;align-items:center;gap:2px 10px}.ho-verbs.compact h3{width:100%;font-size:16px}.ho-verbs.compact h3 b{width:20px;height:20px;font-size:12px}.ho-verbs.compact .ho-hint{display:none}.ho-verbs.compact .verb{font-size:17px;padding:2px 4px;gap:4px}.ho-verbs.compact .ho-contrast{margin:0;padding:3px 8px}.ho-verbs.compact .ho-contrast b{font-size:15px}
.ho-map{display:grid;grid-template-columns:auto 1fr 1fr 1fr;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}.ho-map>div{padding:clamp(8px,1.6vh,14px) 14px;border-top:1px solid var(--line)}.ho-map>div:nth-child(-n+4){border-top:0}.ho-map small{display:block;font:600 15px Arial,sans-serif;color:var(--muted);margin-top:3px}.ho-who{font-size:15px;color:var(--muted);white-space:nowrap}.ho-who.strong{color:var(--ink);font-weight:800}.ho-map .later{color:#aab3bb;font:600 17px Arial,sans-serif}.ho-col-head.later{font:400 14px "Microsoft YaHei",sans-serif}
.ho-overview{grid-row:2/4;display:flex;flex-direction:column;justify-content:center;gap:clamp(16px,3.5vh,32px);min-height:0}.ho-overview h1{margin:0;font-size:clamp(28px,5vh,42px);text-align:center}
.ho-thread{display:flex;align-items:stretch;justify-content:center;gap:10px}.ho-thread>div{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 18px;display:flex;flex-direction:column;gap:4px;min-width:0}.ho-thread span{font-size:12px;color:var(--muted)}.ho-thread strong{font:700 clamp(17px,2.8vh,23px) Arial,sans-serif}.ho-thread small{font-size:13px;color:var(--muted)}.ho-thread .now{border:2px solid var(--orange);background:#fff8f2}.ho-thread .later{opacity:.55}.ho-thread-arrow{align-self:center;color:#c3c9cf;font-size:22px}
.ho-lessons{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.ho-lessons button{text-align:left;padding:18px;border-radius:18px;display:flex;flex-direction:column;gap:6px;min-height:clamp(120px,22vh,170px)}.ho-lessons .n{font-size:13px;color:var(--orange);font-weight:800}.ho-lessons strong{font-size:clamp(17px,2.8vh,22px)}.ho-lessons small{font-size:13px;color:var(--muted);line-height:1.5}.ho-lessons em{margin-top:auto;font-style:normal;font-size:12px;color:var(--green)}.ho-lessons .next{border:2px solid var(--ink)}
.ho-practice{min-height:0;display:grid;grid-template-columns:1fr 1.15fr;gap:24px}
.ho-ref{min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:safe center;gap:12px;background:#f4efe4;border-radius:22px;padding:18px}.ho-ref.closed{align-items:center}.ho-ref .ho-compare .ho-cell{padding:6px 14px}.ho-ref .say{font-size:clamp(16px,2.6vh,21px)}.ho-ref .zh{font-size:13px}.ho-ref .ho-rule{font-size:clamp(16px,2.5vh,20px);padding:9px 14px}
.ho-closed{font-size:22px;color:#9b9381;text-align:center;line-height:1.6}.ho-closed small{font-size:13px}
.ho-task{min-height:0;display:flex;flex-direction:column;justify-content:safe center;gap:clamp(10px,2vh,18px)}
.ho-prompt{margin:0;font:700 clamp(26px,4.6vh,40px)/1.35 Arial,sans-serif}.ho-zh{margin:0;font-size:clamp(16px,2.6vh,21px);color:var(--muted)}
.blank{display:inline-block;color:var(--orange);border-bottom:3px solid var(--orange);line-height:1.1;padding:0 2px}
.ho-say{display:grid;grid-template-columns:1fr 1fr;gap:10px}.ho-say button{font-size:20px;font-weight:700;padding:16px}
.ho-task .response-tools{justify-content:flex-start;margin-top:0}
.ho-answer{background:#e9f4ee;border-radius:16px;padding:14px 18px;display:flex;flex-direction:column;gap:6px}.ho-answer p{margin:0;font-size:17px}
.ho-task .actions{justify-content:flex-start}
.ho-story{background:#fff;border-radius:16px;padding:14px 18px}.ho-story h3{margin:0 0 6px;font:700 19px Arial,sans-serif}.ho-story h3 small{font:400 13px "Microsoft YaHei",sans-serif;color:var(--muted)}.ho-story p{margin:0;font:400 clamp(17px,2.7vh,22px)/1.65 Arial,sans-serif}.ho-story .blank{color:#9aa4ad;border-color:#cfd5da}.ho-story .blank.now{color:var(--orange);border-color:var(--orange);font-weight:700;background:#fff3ea}.ho-story .done{color:var(--green)}
@media(max-height:680px) and (min-width:801px){.ho-head h1{font-size:22px}.ho-tabs button{padding:5px 10px}.ho-board,.ho-practice{gap:14px}.ho-verbs section{padding:8px 12px}.ho-lessons button{padding:14px}.ho-ref{padding:12px}}
@media(max-width:1100px){.ho-head{flex-wrap:wrap;gap:8px}.ho-head h1{font-size:22px}.ho-tabs button{padding:5px 9px;font-size:12px}}
@media(max-width:650px){.ho-board.split,.ho-practice{grid-template-columns:1fr;overflow:auto}.ho-verbs,.ho-lessons{grid-template-columns:1fr 1fr}.ho-tabs{flex-wrap:wrap}.ho-thread{flex-wrap:wrap}.ho-thread-arrow{display:none}}

main:focus{outline:none}
.ho-ref .ho-map>div{padding:6px 10px}.ho-ref .ho-map small{font-size:13px}.ho-ref .ho-who{font-size:13px}.ho-ref .ho-map .later{font-size:14px}.ho-ref .ho-col-head{padding:5px 10px;font-size:12px}
@media(max-height:680px) and (min-width:801px){main:has(.ho-head){gap:8px}.ho-head h1{font-size:21px}.ho-board{gap:10px}.ho-pane{gap:8px}.ho-verbs{gap:10px}.ho-verbs section{padding:7px 11px;gap:0}.ho-verbs h3{font-size:16px}.ho-verbs h3 b{width:22px;height:22px;font-size:12px}.ho-hint{font-size:12px;margin:0 0 2px}.verb{font-size:18px;padding:3px 5px}.verb .zh{font-size:12px}.ho-contrast{padding:5px 9px;font-size:12px}.ho-contrast b{font-size:15px}.ho-examples{padding:8px 13px;gap:4px}.ho-example .say{font-size:16px}.ho-examples .zh{font-size:12px;margin-top:0}.say{font-size:18px}.zh{font-size:13px}.ho-cell{padding:6px 14px}.ho-col-head{padding:5px 14px;font-size:12px}.ho-rule{font-size:16px;padding:8px 13px}.chip{font-size:14px;padding:2px 9px}.ho-wrong span{font-size:15px;padding:5px 10px}.ho-arrow{padding:3px 14px;font-size:16px}.ho-foot .main-action{padding:9px 16px;font-size:15px}
.ho-task{gap:8px}.ho-prompt{font-size:27px}.ho-zh{font-size:15px}.ho-task .choice-list{gap:7px}.ho-task .choice-list button{font-size:20px;padding:9px 16px}.ho-say button{padding:12px;font-size:18px}.ho-task .response-tools button{padding:6px 12px;font-size:14px}.ho-answer{padding:9px 14px}.ho-answer p{font-size:15px}.say.big{font-size:23px}.ho-ref{gap:8px}.ho-story{padding:10px 14px}.ho-story h3{font-size:16px}.ho-story p{font-size:16px;line-height:1.55}
.ho-overview{gap:14px}.ho-thread>div{padding:9px 14px}.ho-lessons button{min-height:110px}}

/* ---- Home: route + jar + map ---- */
.eyebrow span button{margin-left:8px}
.home2{grid-row:2/4;min-height:0;display:grid;grid-template-columns:1.6fr 1fr;grid-template-rows:minmax(0,1fr) auto;gap:clamp(12px,2.2vh,22px)}
.route{background:#fff;border:1px solid var(--line);border-radius:26px;padding:clamp(16px,3vh,30px) clamp(18px,2.5vw,34px);display:flex;flex-direction:column;justify-content:center;gap:clamp(10px,2vh,18px);min-height:0}
.route h1{margin:0;font-size:clamp(26px,4.6vh,40px)}.route-group{margin:-6px 0 0;color:var(--muted);font-size:14px}
.route-path{list-style:none;margin:0;padding:0;display:flex;align-items:flex-start}
.route-path li{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;align-items:center}
.route-path li:before{content:"";position:absolute;top:clamp(21px,3.4vh,27px);left:-50%;width:100%;height:4px;background:#e6e1d6;z-index:0}.route-path li:first-child:before{display:none}.route-path li.done:before,.route-path li.cur:before{background:var(--green)}
.route-path li>button{background:none;border:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;z-index:1;min-width:0}
.route-path .dot{width:clamp(44px,7vh,56px);height:clamp(44px,7vh,56px);border-radius:50%;background:#fff;border:3px solid #d8d2c4;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;color:#9a9384}
.route-path strong{font-size:clamp(13px,2.1vh,16px);text-align:center;line-height:1.3}.route-path small{font-size:12px;color:var(--muted)}.route-path .stars{color:#e3a21a;font-size:14px}
.route-path .done .dot{background:var(--green);border-color:var(--green);color:#fff}
.route-path .cur .dot{border-color:var(--orange);color:var(--orange);background:#fff4ea;box-shadow:0 0 0 6px #de773d22;animation:pulse 1.8s ease-in-out infinite}
.route-path .extra .dot{border-style:dashed}
.route-path .die{position:absolute;top:clamp(8px,1.6vh,13px);right:-14px;z-index:2;font-size:clamp(17px,2.6vh,21px);background:var(--paper);border-radius:10px;padding:0 3px;white-space:nowrap;filter:grayscale(.6);opacity:.75}.route-path .die.got{filter:none;opacity:1;font-size:13px;font-weight:800;color:var(--orange);background:#fff4ea;padding:3px 6px}
.route-path .finish .dot{border:0;background:none;font-size:28px}
.route .go{align-self:flex-start;font-size:clamp(17px,2.8vh,22px);padding:clamp(11px,2vh,16px) 26px;border-radius:16px}
.route-rule{margin:0;font-size:14px;color:var(--muted)}.route-rule b{color:var(--orange)}.route-done{font-size:22px;font-weight:700;margin:0}
.home-jar{min-height:0;display:flex}
.jar-card{flex:1;background:#fff8ef;border:1px solid #f1dfc6;border-radius:26px;padding:clamp(14px,2.6vh,26px);display:flex;align-items:center;gap:clamp(14px,2vw,26px)}
.jar{position:relative;width:clamp(96px,11vw,140px);height:clamp(120px,24vh,190px);border:4px solid #c9b48f;border-top-width:0;border-radius:18px 18px 34px 34px;background:#fffdf8;overflow:hidden;flex:none}
.jar-lid{position:absolute;top:0;left:-4px;right:-4px;height:12px;background:#c9b48f;border-radius:6px}
.jar-fill{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(#f6b16f,#de773d);transition:height .8s ease}
.jar-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font:800 clamp(32px,6vh,52px)/1 Arial,sans-serif;color:var(--ink);text-shadow:0 2px 0 #fff8}.jar-num small{font:600 14px "Microsoft YaHei",sans-serif;margin-top:4px}
.jar-copy{display:flex;flex-direction:column;gap:10px;min-width:0}.jar-copy h3{margin:0;font-size:20px}.jar-copy p{margin:0;font-size:15px;line-height:1.6}.jar-copy b{color:var(--orange);font-size:20px}.jar-copy button{font-size:16px;font-weight:700}
.home-map{grid-column:1/3;background:#fff;border:1px solid var(--line);border-radius:20px;padding:10px 16px 12px}.home-map h3{margin:0 0 8px;font-size:13px;color:var(--muted)}
.book-map{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.bm-unit{display:flex;flex-direction:column;gap:3px;min-width:0}.bm-unit>b{font-size:13px}.bm-unit>span{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bm-unit>div{display:flex;gap:4px}
.bm-tile{flex:1;font-size:11px;padding:5px 2px;border-radius:8px;background:#f4f4f2;color:#a3aab1;border-color:transparent}.bm-tile.on{background:#e9f4ee;color:var(--green);border-color:#bfdccb;font-weight:700}.bm-tile.seen{background:var(--green);color:#fff}.bm-tile:disabled{opacity:1}
@keyframes pulse{50%{box-shadow:0 0 0 11px #de773d10}}

/* ---- Dice ---- */
.dice-row{display:flex;justify-content:center;gap:22px}.dice-row .lose{opacity:.35;transform:scale(.85)}.dice-row .win .dice{box-shadow:0 0 0 5px var(--orange),0 8px 20px #17324d22}
.dice-row .dice{margin:18px 0}.big-roll{font-size:22px;padding:14px 34px;border-radius:16px}

/* ---- Grammar game ---- */
.g-head h1{font-size:clamp(20px,3.4vh,28px)}
.g-stages{display:flex;align-items:center;gap:4px}.g-stages i{color:#c3c9cf;font-style:normal}.g-stages button{font-size:13px;padding:6px 11px;border-radius:20px;white-space:nowrap}.g-stages b{font-weight:400;margin-left:3px;font-size:12px}.g-stages .active{background:var(--ink);color:#fff;border-color:var(--ink)}.g-stages .done{border-color:#bfdccb;background:#eef7f1;color:var(--green)}
.blocks{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.blk{display:inline-flex;align-items:center;gap:4px;position:relative;font:700 clamp(19px,3.3vh,28px)/1.1 Arial,sans-serif;padding:clamp(7px,1.3vh,11px) clamp(11px,1.2vw,16px);border-radius:12px;border:2px solid;border-bottom-width:5px;background:#fff;color:var(--ink)}
.blk i{font-style:normal;font-size:.55em;opacity:.6}.blk sup{position:absolute;top:2px;right:4px;font:600 10px Arial,sans-serif;opacity:.45}
.k-who{background:#e4eefb;color:#1d4f8c;border-color:#b5cdee}.k-does{background:#fde6d4;color:#b4501a;border-color:#f1b585}.k-like{background:#dff3e7;color:#1f7a4d;border-color:#a7dbbb}.k-ing{background:#efe4fb;color:#6a3d9e;border-color:#cdb4ee}.k-q{background:#fff;color:var(--ink);border-color:#d9dde1}.k-p{background:transparent;border-color:transparent;color:#8b96a1;padding-left:2px;padding-right:2px}
[data-action="formulaCycle"]{cursor:pointer}[data-action="formulaCycle"]:hover{filter:brightness(.96)}
button.blk:hover:not(:disabled){filter:brightness(.97);transform:translateY(-1px)}button.blk:active:not(:disabled){transform:translateY(2px);border-bottom-width:3px}
.blk.slot{min-width:clamp(54px,6vw,80px);height:clamp(42px,6.6vh,56px);border-style:dashed;border-width:2px;background:#fbfaf6;border-color:#d8d2c4}.blk.slot.cur{border-color:var(--orange);background:#fff4ea}
.blk.used{opacity:.15;pointer-events:none}.blk.glow{animation:glow 1s ease-in-out infinite}.blk.shake{animation:shake .4s;border-color:#d4483a!important}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}@keyframes glow{50%{box-shadow:0 0 0 6px #de773d55}}
.g-formula{min-height:0;display:flex;flex-direction:column;justify-content:safe center;gap:clamp(10px,2vh,18px)}
.g-family{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.g-family>div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px 14px;display:flex;flex-direction:column}.g-family>div.now{border:2px solid var(--orange);background:#fff8f2}.g-family span{font-size:11px;color:var(--muted)}.g-family small{font-size:13px;color:var(--muted)}.g-family>b{color:#c3c9cf}.g-family p{flex-basis:100%;margin:0;font-size:clamp(15px,2.4vh,19px);font-weight:650}
.g-tables{display:grid;grid-template-columns:1fr 1fr;gap:16px}.g-tables section{background:#fff;border:1px solid var(--line);border-radius:20px;padding:clamp(10px,2vh,18px);display:flex;flex-direction:column;gap:10px}
.g-row{display:flex;align-items:center;gap:8px}.g-answers{display:flex;flex-direction:column;gap:8px;padding-left:18px;border-left:3px solid #eee8dc}
.g-sound{border:0;background:none;font-size:20px;padding:4px}
.g-legend{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.g-legend .blk{font-size:13px;padding:4px 9px;border-bottom-width:3px}.g-like{font-size:14px;color:var(--muted)}
main:has(.g-play),main:has(.g-boss),main:has(.g-formula){grid-template-rows:auto auto minmax(0,1fr) auto}
.g-play{min-height:0;display:grid;grid-template-columns:1fr 1.25fr;gap:22px}
.g-play>aside{min-height:0;background:#f4efe4;border-radius:22px;padding:clamp(12px,2.2vh,20px);display:flex;flex-direction:column;justify-content:safe center}
.g-scene{display:flex;flex-direction:column;gap:clamp(8px,1.6vh,14px)}.g-intro{margin:0;font-size:clamp(15px,2.4vh,18px);line-height:1.5}
.face{font-size:clamp(34px,6vh,54px);line-height:1}
.g-person{display:flex;align-items:center;gap:10px}.g-person b{font:700 22px Arial,sans-serif}
.g-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.g-card{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;padding:clamp(6px,1.2vh,10px) 12px;border-radius:14px;background:#fff}
.g-card em{grid-row:1/3;font-style:normal;font-size:clamp(26px,4.6vh,38px)}.g-card strong{font:700 clamp(14px,2.3vh,18px) Arial,sans-serif}.g-card small{font-size:12px;color:var(--muted)}.g-card .key{position:absolute;top:4px;right:2px;font-size:10px}
.g-card>b{position:absolute;right:10px;bottom:6px;font-size:24px}.g-card.miss{opacity:.45}.g-card.miss>b{color:#c2432f}.g-card.hit{border:2px solid var(--green);background:#eef8f2;opacity:1}.g-card.hit>b{color:var(--green)}.g-card.chosen{border:2px solid var(--orange)}.g-card:disabled{cursor:default}
.g-think{display:flex;align-items:center;gap:12px}.g-think .bubble{background:#fff;border-radius:22px;padding:10px 16px;display:flex;gap:16px;font-size:clamp(28px,5vh,42px);position:relative}.g-think .bubble span{position:relative}.g-think .bubble b{position:absolute;right:-8px;bottom:-6px;font-size:20px}.ok{color:var(--green)}.no{color:#c2432f}
.g-asks{display:flex;align-items:center;gap:10px;background:#fff;border-radius:16px;padding:8px 12px}
.g-build{min-height:0;display:flex;flex-direction:column;justify-content:safe center;gap:clamp(10px,2vh,18px)}
.g-prompt{margin:0;font-size:clamp(20px,3.6vh,30px);font-weight:700}
.g-bar{display:flex;flex-wrap:wrap;gap:8px;padding:clamp(10px,2vh,16px);background:#fff;border:2px solid var(--line);border-radius:18px;min-height:clamp(64px,10vh,84px);align-items:center}
.g-tray{display:flex;flex-wrap:wrap;gap:10px}
.g-tip{min-height:24px;font-size:clamp(15px,2.4vh,18px);color:#b4501a;font-weight:650}
.g-after{background:#e9f4ee;border-radius:18px;padding:clamp(12px,2vh,18px);display:flex;flex-direction:column;gap:10px}.g-after.bad{background:#fbece9}.g-after p{margin:0}
.g-reply{display:flex;align-items:center;gap:10px;background:#fff;border-radius:14px;padding:6px 12px;align-self:flex-start}.g-reply .face{font-size:32px}
.g-build .actions,.g-boss .actions{justify-content:flex-start}
.g-boss{min-height:0;display:flex;flex-direction:column;justify-content:safe center;gap:clamp(10px,2vh,16px);max-width:900px;width:100%;margin:0 auto}
.g-boss .choice-list button.right{border:2px solid var(--green);background:#eef8f2}.g-boss .choice-list button.wrong{border:2px solid #c2432f;background:#fbece9}.g-boss .choice-list button:disabled{opacity:1}.g-boss .g-after{flex-direction:row;align-items:center;gap:14px;font-size:17px}
.g-score{font-size:13px;color:var(--muted)}
.g-done{grid-row:3/5}.g-done .dim{color:#ddd}
@media(max-height:680px) and (min-width:801px){.route{gap:9px;padding:14px 20px}.route-rule{font-size:12px}.jar-copy h3{font-size:17px}.jar-copy p{font-size:13px}.home-map{padding:7px 12px 9px}.home-map h3{margin-bottom:5px}.bm-tile{padding:3px 2px}
.g-family>div{padding:5px 10px}.g-tables section{gap:7px}.g-legend .blk{font-size:12px}.g-play{gap:14px}.g-card small{display:none}.g-intro{font-size:14px}.g-tip{min-height:20px}.blk sup{display:none}}
@media(max-width:1100px){.g-head{flex-wrap:wrap;gap:6px}.g-stages button{padding:4px 8px;font-size:12px}}
@media(max-width:650px){.home2{grid-template-columns:1fr;grid-template-rows:auto;overflow:auto}.home-map{grid-column:auto}.g-play,.g-tables{grid-template-columns:1fr;overflow:auto}.route-path strong{font-size:11px}}

@media(max-height:680px) and (min-width:801px){.g-boss .choice-list button{padding:8px 16px;font-size:20px}.g-boss .ho-prompt{font-size:26px}}

/* ---- Home cockpit: plan from learning record, jar, mastery map ---- */
main:has(.home3){grid-template-rows:minmax(0,1fr)}
.home3{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) clamp(260px,26vw,360px);grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(10px,1.8vh,18px)}
.h-top{grid-column:1/3;display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.h-top h1{margin:0;font-size:clamp(22px,3.8vh,32px)}.h-top p{margin:4px 0 0;color:var(--muted);font-size:clamp(12px,1.9vh,14px)}
.h-class{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);white-space:nowrap}.h-class button{font-size:13px;padding:7px 12px}
.plan{min-height:0;background:#fff;border:1px solid var(--line);border-radius:24px;padding:clamp(12px,2.2vh,22px) clamp(14px,1.8vw,24px);display:flex;flex-direction:column;gap:clamp(8px,1.6vh,14px)}
.plan-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.plan-head h2{margin:0;font-size:clamp(18px,3vh,24px)}.plan-head h2 small{font-size:12px;font-weight:400;color:var(--green);margin-left:8px}
.plan-time{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}.plan-time button{font-size:12px;padding:5px 10px}
.pt-bar,.pc-bar,.bm-bar{display:block;height:7px;border-radius:7px;background:#eeeae1;overflow:hidden}.pt-bar{width:110px}.pt-bar i,.pc-bar i,.bm-bar i{display:block;height:100%;background:var(--green);border-radius:7px}
.plan-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(150px,15vw,200px),1fr));gap:12px;flex:1;min-height:0;align-content:start;overflow:hidden}
.plan-card{position:relative;min-width:0}
.pc-main{width:100%;height:100%;min-height:clamp(118px,21vh,170px);text-align:left;display:flex;flex-direction:column;gap:6px;padding:14px 14px 12px;border-radius:18px;border:2px solid var(--line);background:#fcfbf8}
.plan-card.cur .pc-main{border-color:var(--orange);background:#fff8f1;box-shadow:0 6px 18px #de773d22}
.plan-card.done .pc-main{background:#f1f8f4;border-color:#cfe6d9}
.pc-kind{align-self:flex-start;font-size:12px;font-weight:700;padding:2px 9px;border-radius:20px}.k-review{background:#efe4fb;color:#6a3d9e}.k-continue{background:#fde6d4;color:#b4501a}.k-new{background:#e4eefb;color:#1d4f8c}.plan-card.done .pc-kind{background:var(--green);color:#fff}
.pc-unit{font-size:12px;color:var(--muted)}.pc-main strong{font-size:clamp(15px,2.5vh,19px);line-height:1.3}
.pc-meta{font-size:12px;color:var(--muted);margin-top:auto}.pc-dice{position:absolute;right:12px;bottom:10px;font-size:14px;font-weight:700;color:var(--orange)}
.pc-stages{display:flex;gap:5px}.pc-stages i{flex:1;height:7px;border-radius:7px;background:#eeeae1}.pc-stages i.on{background:var(--green)}
.pc-x{position:absolute;top:6px;right:6px;width:26px;height:26px;padding:0;border-radius:50%;border:0;background:transparent;color:#b1aa9c;font-size:18px;line-height:1;opacity:0;transition:opacity .15s}.plan-card:hover .pc-x,.pc-x:focus-visible{opacity:1}.pc-x:hover{background:#f3eee4;color:#c2432f}
.pc-n{position:absolute;top:-8px;left:-8px;width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}.plan-card.done .pc-n{background:var(--green)}
.plan-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.plan .go{font-size:clamp(16px,2.6vh,20px);padding:clamp(10px,1.8vh,14px) 22px;border-radius:14px}.plan-rule{margin:0;font-size:13px;color:var(--muted)}.plan-rule b{color:var(--orange)}.plan-done,.plan-empty{margin:0;font-size:18px;font-weight:700}
.home3 .home-jar{min-height:0;display:flex}
.home3 .jar-card{flex-direction:column;justify-content:center;text-align:center;gap:12px;padding:clamp(12px,2vh,20px)}
.home3 .jar{width:clamp(88px,9vw,120px);height:clamp(100px,19vh,160px)}
.home3 .jar-copy{align-items:stretch;gap:8px;width:100%}.home3 .jar-copy h3{display:none}
.jar-copy dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}.jar-copy dl div{background:#fff;border-radius:12px;padding:6px}.jar-copy dt{font-size:11px;color:var(--muted)}.jar-copy dd{margin:2px 0 0;font-weight:800;color:var(--orange);font-size:clamp(14px,2.4vh,18px)}
.home3 .home-map{grid-column:1/3;padding:10px 14px 12px}.home-map h3 small{font-weight:400;margin-left:8px}
.home3 .book-map{grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.bm-unit{background:#fbfaf6;border-radius:12px;padding:6px 7px;display:flex;flex-direction:column;gap:3px;min-width:0}
.bm-head{display:flex;flex-direction:column;min-width:0}.bm-head b{font-size:13px}.bm-head span{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bm-row{display:flex;align-items:center;gap:3px;min-width:0}.bm-row.soon{font-size:11px;color:#b9bfc5;justify-content:space-between;padding:3px 4px}.bm-row.soon small{font-size:10px}
.bm-go{flex:1;min-width:0;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:5px;font-size:11px;padding:4px 5px;border-radius:8px;background:#fff}.bm-go em{font-style:normal;font-size:10px;color:#6a3d9e;font-weight:700}.bm-go em.ok{color:var(--green)}
.bm-row.learning .bm-bar i{background:var(--orange)}
.bm-add{width:20px;height:20px;padding:0;border-radius:6px;font-size:13px;line-height:1;color:var(--muted);flex:none}
@media(max-height:680px) and (min-width:801px){.pc-main{gap:4px;padding:11px 11px 9px}.home3 .jar-card{gap:8px}.plan-rule{font-size:12px}.bm-unit{padding:4px 6px}.bm-go{padding:3px 4px}}
@media(max-width:900px){.home3{grid-template-columns:1fr}.h-top,.home3 .home-map{grid-column:auto}.home3 .book-map{grid-template-columns:repeat(4,minmax(0,1fr))}.h-top{flex-wrap:wrap}}
@media(max-width:650px){.home3{overflow:auto}.home3 .book-map{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* flow-audit fixes */
.g-formula.step0 .f2,.g-formula.step1 .f1,.g-formula.step1 .g-family,.g-formula.step0 .g-like{display:none}.g-formula .g-tables{grid-template-columns:1fr;max-width:860px}.g-formula .g-tables .blk{font-size:clamp(22px,4vh,34px)}
.judge{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px dashed #d8d2c4;border-radius:14px;align-self:flex-start}.judge>span{font-size:12px;color:var(--muted)}.judge button{font-size:16px;font-weight:700;padding:9px 16px}
.g-stages button:disabled{opacity:.45;cursor:default}
.break-pick{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:14px 0 4px}.break-pick button{font-size:18px;font-weight:700;padding:12px 20px;border-radius:14px}
.break-box:has(#break-label:empty) strong{display:none}
@media(max-height:680px) and (min-width:801px){.g-formula .g-tables .blk{font-size:22px;padding:6px 11px}.g-formula{gap:8px}.g-formula .g-tables section{padding:10px 12px;gap:6px}}

/* ---- UI audit pass ---- */
:focus:not(:focus-visible){outline:none}
footer{font-size:13px}
.toast{top:auto;bottom:44px}
body.at-home #undo-button{display:none}
.reward.zero{opacity:.55}.reward.zero span{background:#c9ced3}
.drawer{box-shadow:0 0 0 100vmax #17324d33,-20px 0 70px #17324d22}
.dice.blank{display:flex;align-items:center;justify-content:center;font:800 54px Arial,sans-serif;color:#c9ced3;background:#fbfaf6;border-style:dashed}
.dice-result.dim{visibility:hidden}
.physical{margin:6px 0 10px;font-size:13px;color:var(--muted)}.physical summary{cursor:pointer}.pips-pick{display:flex;justify-content:center;gap:8px;margin-top:8px}.pips-pick button{width:46px;height:46px;font-size:20px;font-weight:700;padding:0}
.modal{min-height:min(420px,calc(100dvh - 40px));display:flex;flex-direction:column;justify-content:center}
.btn-link{display:inline-block;padding:10px 18px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--ink);text-decoration:none;font-weight:700}
.g-after.redo{background:#fff4e8}.g-verdict{font-size:18px;color:#b4501a}.g-verdict.ok{color:var(--green)}
.ho-answer{background:#fff4e8}
.g-think .bubble span{display:flex;flex-direction:column;align-items:center;transition:opacity .2s}.g-think .bubble small{font-size:12px;color:var(--muted)}.g-think .bubble .dim{opacity:.3}.g-think .bubble .focus{transform:scale(1.12)}
.g-frame{margin:0;font:700 clamp(20px,3.4vh,28px) Arial,sans-serif;color:#6a3d9e;background:#f6f0fd;border-radius:12px;padding:8px 14px;align-self:flex-start}
.g-dice-line{font-size:18px;font-weight:700;color:var(--orange)}
.blk.glow{box-shadow:0 0 0 4px #de773d,0 8px 22px #de773d66;transform:translateY(-3px);animation:glow 1s ease-in-out 3}
@keyframes glow{50%{box-shadow:0 0 0 8px #de773d55,0 8px 22px #de773d66}}
@media(prefers-reduced-motion:reduce){.blk.glow,.route-path .cur .dot{animation:none}}
.g-card strong{white-space:nowrap;overflow-wrap:normal;hyphens:none}
.g-boss{justify-content:flex-start;padding-top:clamp(6px,2vh,24px)}
.jar-num{text-shadow:0 0 6px #fff,0 0 2px #fff}
.jar{overflow:visible}.jar-fill{border-radius:0 0 30px 30px}
.home3 .jar-copy button:disabled{background:#f2f0ea;color:#9aa1a8;border-color:#e3dfd5;opacity:1}
.follower-cover{position:fixed;inset:0;z-index:35;background:#f3f0e5cc;backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}.follower-cover>div{background:#fff;border-radius:22px;padding:28px 36px;text-align:center;box-shadow:0 12px 40px #17324d22}.follower-cover h2{margin:0 0 8px}.follower main:before{display:none}

/* home: last-lesson panel beside the map */
.home3 .home-map{grid-column:1/2}.home3 .book-map{grid-template-columns:repeat(8,minmax(0,1fr))}
.home-last{background:#fff;border:1px solid var(--line);border-radius:20px;padding:10px 14px 12px;min-width:0;display:flex;flex-direction:column;gap:5px}.home-last h3{margin:0;font-size:13px;color:var(--muted)}.home-last h3 small{font-weight:400;margin-left:6px}
.hl-done{margin:0;display:flex;flex-wrap:wrap;gap:6px}.hl-done span{font-size:12px;background:#eef7f1;color:var(--green);border-radius:20px;padding:2px 8px}.hl-done .hl-rate{background:#f4f1ea;color:var(--muted)}
.hl-sub{margin:2px 0 0;font-size:13px;font-weight:700;color:#b4501a}.hl-sub.ok{color:var(--green)}.home-last ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:3px}.home-last li{display:flex;align-items:baseline;gap:8px;min-width:0}.home-last li b{font:700 15px Arial,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%}.home-last li small{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hl-more,.hl-empty{margin:0;font-size:12px;color:var(--muted)}
@media(max-height:680px) and (min-width:801px){.home-last{padding:7px 12px 9px;gap:3px}.home-last li b{font-size:13px}.home-last ul li:nth-child(3){display:none}}
@media(max-width:900px){.home3 .home-map,.home-last{grid-column:auto}}
.bm-row span,.bm-row small,.bm-go span{white-space:nowrap}.bm-bar{min-width:0}
@media(max-width:1100px){.home3{grid-template-columns:minmax(0,1fr) 240px}.bm-row.soon small{display:none}.bm-row.soon{justify-content:flex-start}.bm-go{gap:3px;padding:3px 4px;font-size:10px}.bm-add{width:16px;height:16px;font-size:11px}.bm-head span{display:none}.home3 .book-map{gap:5px}.bm-unit{padding:4px 5px}}
@media(max-height:680px) and (min-width:801px){.home3 .jar{width:76px;height:88px}.home3 .jar-num{font-size:30px}.home3 .jar-card{gap:6px;padding:10px}.jar-copy dl div{padding:3px}.jar-copy dd{font-size:14px}.home3 .jar-copy button{padding:7px 10px;font-size:14px}.pc-main{min-height:104px}.h-top h1{font-size:22px}}
.bm-go em{white-space:nowrap}
@media(max-height:680px){.modal{min-height:0;padding:18px 24px}.dice-row .dice{margin:8px 0}.modal .actions{margin:10px 0}}
/* 2026-10-10: a quieter classroom desk, with an obvious next action. */
body{background:#f5f4ee;grid-template-rows:64px minmax(0,1fr) 26px}
.topbar{background:#fffdf8;padding-inline:clamp(18px,3vw,48px)}
.brand{font-size:19px;letter-spacing:-.03em}.brand small{display:none}
main{max-width:1560px;padding:22px clamp(18px,3vw,48px);gap:10px}
.home3{grid-template-columns:minmax(0,1fr) 292px;grid-template-rows:auto minmax(220px,1fr) auto;gap:18px;overflow:auto;padding:2px 2px 8px}
.h-top{align-items:center;padding:0 0 6px}.h-top h1{font-size:clamp(24px,3vw,36px);letter-spacing:-.04em}.h-top p{margin-top:8px}
.h-class{font-size:12px}.h-class button{background:transparent;border-color:#d7dacf}
.plan{border:1px solid #e2e5dc;border-radius:20px;padding:22px;gap:18px;box-shadow:0 4px 20px #17324d04;overflow:auto}
.plan-head h2{font-size:19px}.plan-head h2 small{display:block;margin:5px 0 0;font-size:11px;color:var(--muted)}
.plan-time{font-size:11px}.pt-bar{width:70px}
.plan-list{display:flex!important;flex-direction:column;gap:10px;flex:1;overflow:visible;min-height:min-content}
.plan-card{flex:1;min-height:92px}
.pc-main{display:grid;grid-template-columns:60px minmax(0,1fr) auto;grid-template-rows:auto auto auto;column-gap:16px;row-gap:5px;padding:16px 20px 14px 64px;min-height:100%;border:1px solid #e5e8df;border-radius:14px;background:#fafbf8}
.plan-card.cur .pc-main{background:#fff5e9;border-color:#e4b686;box-shadow:none}
.plan-card.done .pc-main{background:#f2f7f3;border-color:#dce9df}
.pc-kind{grid-column:1;grid-row:1;align-self:center;justify-self:start;font-size:10px;padding:3px 7px;white-space:nowrap}
.pc-unit{grid-column:2;grid-row:1;font-size:11px;align-self:center}
.pc-main strong{grid-column:1/3;grid-row:2;font-size:clamp(16px,1.6vw,21px);font-weight:700;letter-spacing:-.02em}
.pc-meta{grid-column:3;grid-row:2;align-self:center;font-size:11px;margin:0;white-space:nowrap}
.pc-stages,.pc-bar{grid-column:1/4;grid-row:3;max-width:100%;height:3px;margin-top:3px}.pc-stages i{height:3px}
.pc-n{left:16px;top:50%;transform:translateY(-50%);width:30px;height:30px;background:#e9ede6;color:#536658;font-size:13px}
.plan-card.cur .pc-n{background:var(--orange);color:white}.plan-card.done .pc-n{background:#d9e9de;color:var(--green)}
.pc-x{top:5px;right:6px;font-size:16px}.pc-dice{position:static;grid-column:3;grid-row:1;text-align:right;font-size:11px}
.plan-foot{margin-top:auto;gap:10px;align-items:flex-start;flex-direction:column}.plan .go{font-size:15px;width:100%;text-align:left;display:flex;justify-content:space-between;align-items:center;padding:13px 18px;border-radius:12px;background:#215546;border-color:#215546}
.plan-rule{font-size:11px;line-height:1.7}.plan-rule b{font-weight:500}
.home3 .jar-card{border:1px solid #e7dfce;background:#efeada;border-radius:20px;gap:22px;padding:24px 20px}
.home3 .jar{width:112px;height:145px;background:#fffdf6;border-color:#c8b68b}.home3 .jar-num{font-size:45px}.home3 .jar-copy{gap:12px}.home3 .jar-copy h3{display:block;margin:0;font-size:17px;font-weight:700}
.jar-copy dl{gap:8px}.jar-copy dl div{background:#fffdf677;padding:10px 4px;border-radius:10px}.jar-copy dt{font-size:10px}.jar-copy dd{font-size:17px}
.home3 .jar-copy button{font-size:14px;padding:11px;border-radius:10px}
.home3 .home-map{padding:18px 20px;border-radius:20px;border-color:#e2e5dc;background:#fffdf8}
.home-map h3{font-size:15px;margin:0 0 12px}.home-map h3 small{font-size:10px;color:var(--muted)}
.home3 .book-map{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.bm-unit{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;padding:10px;background:#f5f6ef;border-radius:10px}
.bm-head{grid-column:1/4;flex-direction:row;align-items:center;gap:8px;margin-bottom:2px}.bm-head b{font-size:12px}.bm-head span{display:block;font-size:10px}
.bm-row.soon{font-size:10px;padding:3px 0;color:#aab0a8}.bm-row.soon small{display:none}
.bm-go{display:flex;justify-content:center;font-size:11px;padding:5px 6px;background:#fffdf8;border-color:#dfe5d9}.bm-bar{display:none}.bm-go em{font-size:9px}.bm-add{width:18px;height:22px;border-color:#dfe5d9;background:transparent;font-size:11px}
.home-last{border-radius:20px;padding:18px 20px;background:#fffdf8;border-color:#e2e5dc;overflow:auto}.home-last h3{font-size:14px}.hl-empty{font-size:12px;line-height:1.8}
body.at-reader{grid-template-rows:54px minmax(0,1fr) 22px}.at-reader .topbar{padding-block:5px}.at-reader main{max-width:none;padding:6px 12px;display:block}.reader-holder{height:100%;gap:6px}.reader-holder iframe{border-radius:9px}.reader-controls{gap:10px}.reader-controls button{font-size:12px;padding:8px 12px}.reader-controls .small{font-size:10px;max-width:none}
@media(max-height:720px){main{padding-top:12px;padding-bottom:10px}.home3{gap:12px}.h-top h1{font-size:25px}.plan{padding:14px;gap:10px}.plan-card{min-height:75px}.pc-main{padding-top:10px;padding-bottom:10px}.home3 .home-map{padding:12px 14px}.bm-unit{padding:7px}.home3 .jar-card{gap:12px;padding:16px}.home3 .jar{width:88px;height:112px}.home3 .jar-num{font-size:36px}}
@media(max-width:1100px){.home3{grid-template-columns:minmax(0,1fr) 230px}.h-class{flex-direction:column;align-items:flex-end;gap:5px}.pc-meta{grid-column:1/3;grid-row:3}.pc-stages,.pc-bar{display:none}.bm-unit{grid-template-columns:1fr 1fr 1fr}.bm-head span{font-size:9px}.home3 .book-map{gap:6px}}
@media(max-width:760px){.home3{grid-template-columns:1fr;grid-template-rows:auto auto auto auto}.h-top,.home3 .home-map{grid-column:1}.home3 .home-jar{grid-row:3}.home3 .jar-card{flex-direction:row}.home3 .jar{flex-shrink:0}.home3 .book-map{grid-template-columns:repeat(2,minmax(0,1fr))}.h-top{align-items:flex-start}.h-class span{font-size:10px}.plan-head{align-items:flex-start}.plan-time .pt-bar{display:none}.reader-controls .small{display:none}.bank-box{padding-left:8px}.topbar{gap:5px}.brand{font-size:16px}.topbar button:not(.brand){padding:7px}.top-label{display:none}}
/* Keep the primary lesson action visible even with a long lesson plan. */
.home3 .plan{overflow:hidden}
.home3 .plan-list{min-height:0;overflow:auto;padding:1px 1px 2px}
.home3 .plan-card{flex:none;min-height:76px}
.home3 .plan-foot,.home3 .plan-head{flex-shrink:0}
/* Let short screens scroll instead of compressing the jar or covering cards. */
.home3{grid-template-rows:auto auto auto;align-content:start}
.home3 .plan{min-height:340px;overflow:visible}
.home3 .plan-head{order:0}.home3 .plan-foot{order:1;margin-top:0}.home3 .plan-list{order:2;flex:none;max-height:330px;overflow:auto}
.home3 .jar-card{min-height:340px}
.home3 .plan-card{min-height:80px}.home3 .pc-main{min-height:80px}
@media(max-height:800px){.home3 .plan-list{max-height:210px}.home3 .plan{padding:16px;gap:12px}.home3 .jar-card{gap:12px}.home3 .home-map{padding:12px 14px}.home3 .bm-unit{padding:7px}.home3 .plan-foot .plan-rule{font-size:10px}}
@media(max-width:760px){.home3 .jar-card{min-height:0}.home3 .plan{min-height:0}.home3 .plan-list{max-height:none}}

@media(max-width:760px){.home3 .home-jar{min-height:180px}.home3 .jar-card{min-height:180px;flex-shrink:0}.home3 .jar{min-height:112px}}
@media(max-width:760px){
 .home3{display:flex;flex-direction:column;overflow:auto;gap:14px}
 .home3>*{flex-shrink:0}.home3 .plan{min-height:0}.home3 .plan-list{flex:none;overflow:visible;max-height:none}
 .home3 .pc-main{height:auto}.home3 .plan-card{flex:none}.home3 .jar-card{width:100%}
 .at-home .topbar{height:78px;align-content:center}.at-home{grid-template-rows:78px minmax(0,1fr) 26px}
 .h-class{align-items:flex-start}.plan-time{font-size:10px}.home3 .plan-head{gap:8px}
}

.topbar .bank-box{background:transparent;border:0;border-left:1px solid var(--line,#e2e5e7);border-radius:0;display:flex;gap:8px;padding:4px 12px;flex-shrink:0}.bank-amount{display:flex;flex-direction:column;align-items:center;gap:2px}.bank-amount small{font-size:10px;color:#627891;white-space:nowrap}.topbar .bank-box strong{font-size:22px}@media(max-width:760px){.topbar .bank-box{padding:3px 6px}.topbar .bank-box strong{font-size:18px}}
.grammar-study{width:100%;max-width:1120px;margin:0 auto}.grammar-study .practice-head{margin-bottom:22px}.grammar-study .practice-head h1{font-size:32px}.grammar-study-layout{display:grid;grid-template-columns:215px minmax(0,1fr);gap:22px;align-items:start}.grammar-study-layout nav{display:flex;flex-direction:column;gap:8px}.grammar-study-layout nav button{text-align:left;font-size:14px;white-space:normal;padding:13px 16px}.grammar-study-layout nav button[aria-pressed=true]{background:#245b49;color:#fff;border-color:#245b49}.grammar-study-card{min-width:0;padding:26px;background:#fff;border:1px solid #dbe3dc;border-radius:20px}.grammar-study-card h2{font-size:25px;margin:14px 0}.grammar-study-rule{font-size:18px;line-height:1.7}.grammar-study-examples{display:grid;gap:14px;margin:20px 0}.grammar-study-examples>div{padding:14px 18px;background:#f1f6f1;border-radius:12px}.grammar-study-examples b{font-size:20px;overflow-wrap:anywhere}.grammar-study-examples p{margin:6px 0 0;color:#61756b}.grammar-study .eyebrow{font-size:12px;line-height:1.5}.grammar-study .status-box{font-size:14px;line-height:1.6}.grammar-study-card .small{font-size:12px;line-height:1.6}@media(max-width:760px){.grammar-study-layout{grid-template-columns:1fr;gap:14px}.grammar-study-layout nav{display:flex;flex-direction:row;overflow:auto}.grammar-study-layout nav button{min-width:155px;flex-shrink:0;padding:10px}.grammar-study-card{padding:18px}.grammar-study .practice-head{align-items:flex-start;gap:10px}.grammar-study .practice-head h1{font-size:24px}.grammar-study .practice-head button{font-size:12px;padding:10px}.grammar-study-card h2{font-size:22px}.grammar-study-rule{font-size:16px}.grammar-study-examples b{font-size:18px}}
/* 点读机页面：书铺满，不要三层底栏。课堂页脚隐藏，“老师确认”行做成细条。 */
body.at-reader{grid-template-rows:54px minmax(0,1fr)}
body.at-reader footer{display:none}
body.at-reader main{padding:0;height:100%;min-height:0}
body.at-reader .reader-holder{gap:0;height:100%;grid-template-rows:minmax(0,1fr) auto}
body.at-reader .reader-holder iframe{border:0;border-radius:0}
body.at-reader .reader-controls{justify-content:flex-end;gap:8px;padding:5px 14px;background:#f9f9fb;border-top:.5px solid rgb(60 60 67/14%)}
body.at-reader .reader-controls .small{display:none}
body.at-reader .reader-controls button{min-height:30px;padding:4px 12px;border-radius:999px;font-size:12px}