:root{color-scheme:light;--ink:#172033;--muted:#5e7186;--blue:#0b63ce;--deep:#12324a;--green:#168047;--orange:#f97316;--red:#dc2626;--line:#d7e5f0;--paper:#fffaf0;--card:#fff;--text:#172033;--radius:8px;font-family:"Microsoft YaHei","PingFang SC","Noto Sans CJK SC",Arial,sans-serif}
*{box-sizing:border-box}body{margin:0;background:linear-gradient(180deg,#eef9ff 0,#fff7db 48%,#f5fff1 100%);color:var(--ink);letter-spacing:0}.app{width:min(1180px,100%);margin:auto;padding:14px 14px 76px}.hero{border:1px solid #cfe3f7;border-radius:var(--radius);background:linear-gradient(135deg,#fff 0,#e7f7ff 42%,#fff0bd 100%);box-shadow:0 16px 42px rgba(20,44,70,.13);padding:clamp(18px,4vw,34px);display:grid;grid-template-columns:1fr minmax(300px,.76fr);gap:16px}.eyebrow{display:inline-flex;background:#fff2bd;border:1px solid #f5c542;border-radius:999px;padding:7px 10px;color:#854d0e;font-weight:900;font-size:13px}h1{font-size:clamp(31px,6vw,58px);line-height:1.04;margin:14px 0 10px;color:#0f3b57}.lead{font-size:clamp(16px,2.2vw,20px);line-height:1.7;color:#344256;margin:0}.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}.stat{background:rgba(255,255,255,.92);border:1px solid #d7e6f4;border-radius:var(--radius);padding:12px}.stat b{display:block;font-size:28px;color:var(--blue)}.stat span{font-weight:800;color:var(--muted);font-size:13px}.posterHero{position:relative;min-height:260px;border:2px solid #bde4ff;border-radius:var(--radius);background:linear-gradient(180deg,#dff6ff,#fff8d6 60%,#def7df);overflow:hidden}.posterHero:before{content:"";position:absolute;left:24px;right:24px;top:28px;height:112px;background:#fff;border:3px solid #0f3b57;border-radius:var(--radius);box-shadow:8px 8px 0 rgba(15,59,87,.12)}.posterHero b{position:absolute;left:44px;right:38px;top:50px;font-size:22px;line-height:1.25;color:#0f3b57}.avatar{position:absolute;bottom:22px;width:76px;height:120px}.avatar.left{left:38px}.avatar.right{right:38px}.avatar:before{content:"";position:absolute;left:18px;top:0;width:40px;height:40px;border-radius:50%;background:#ffd8ad;border:3px solid #111}.avatar:after{content:"";position:absolute;left:6px;top:48px;width:64px;height:70px;border-radius:24px 24px 8px 8px;background:#2563eb;border:3px solid #111}.avatar.right:after{background:#f97316}.speech{position:absolute;left:26%;right:13%;bottom:42px;background:#fff;border:3px solid #111;border-radius:var(--radius);padding:10px;font-weight:900;line-height:1.45}.controls{margin-top:12px;background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:var(--radius);padding:12px;display:grid;grid-template-columns:1fr 160px;gap:10px;position:sticky;top:0;z-index:8;backdrop-filter:blur(12px)}input,select{min-height:44px;border:1px solid #c6d7e7;border-radius:var(--radius);padding:0 12px;background:#fff;color:var(--ink);font:inherit}.tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:12px 0}.tab,button{border:0;border-radius:var(--radius);font:inherit;font-weight:900;cursor:pointer}.tab{min-height:48px;background:#fff;border:1px solid #bdd7f0;color:#0f3b57}.tab.active{background:#0f3b57;color:#fff}.view{display:none}.view.active{display:block}.sectionTitle{display:flex;justify-content:space-between;gap:12px;align-items:end;margin:22px 0 12px}.sectionTitle h2{margin:0;font-size:clamp(25px,4vw,38px);color:#102a43}.sectionTitle p{margin:0;color:var(--muted);font-weight:800}.layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,.78fr);gap:12px;align-items:start}.main,.side,.card{background:#fff;border:1px solid #d7e5f0;border-radius:var(--radius);box-shadow:0 10px 30px rgba(15,23,42,.08)}.main{padding:14px}.side{position:sticky;top:82px;overflow:hidden}.meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}.pill{display:inline-flex;align-items:center;min-height:28px;border-radius:999px;background:#eef6ff;border:1px solid #cce4f6;color:#0f4f6d;padding:0 9px;font-weight:900;font-size:12px}.lessonTitle{font-size:clamp(23px,4vw,34px);line-height:1.18;margin:0 0 8px;color:#0f172a}.lessonSubtitle{font-weight:800;color:#536173;margin:0 0 12px;line-height:1.5}.panel{border:1px solid #dbe7f2;border-radius:var(--radius);padding:12px;background:#fbfdff}.panel h3{margin:0 0 8px;color:#0f3b57}.panel p{white-space:pre-wrap;margin:0;line-height:1.72}.posterHead{padding:14px;background:linear-gradient(90deg,#dff6ff,#fff);border-bottom:1px solid #d7e5f0;display:flex;justify-content:space-between;gap:10px}.sceneArt{position:relative;min-height:276px;background:linear-gradient(180deg,#fff 0 54%,#e6f7de 54%);overflow:hidden}.sceneBoard{position:absolute;left:18px;right:18px;top:20px;min-height:104px;border:2px solid #8bd3f7;border-radius:var(--radius);background:#f8fdff;padding:12px;font-size:18px;font-weight:900;line-height:1.45}.assetBox{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);width:56%;min-height:92px;background:#fff;border:3px solid #111;border-radius:var(--radius);padding:10px;text-align:center;font-weight:800}.sceneGrid,.qSceneGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px;background:#f8fafc}.sceneTile,.qSceneTile{background:#fff;border:1px solid #dbe7f2;border-radius:var(--radius);padding:9px;line-height:1.45}.sceneTile b,.qSceneTile b{display:block;color:var(--blue);margin-bottom:4px}.assetImg{width:100%;display:block;border-top:1px solid #d7e5f0;background:#fff;max-height:360px;object-fit:contain;cursor:zoom-in}.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.primary,.ghost,.small{min-height:40px;padding:0 12px}.primary{background:#0f3b57;color:#fff}.ghost,.small{background:#fff;color:#0f3b57;border:1px solid #bdd7f0}.small{min-height:32px;font-size:13px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.card{padding:14px}.termCard{border-left:7px solid #16a34a}.termCard strong{font-size:19px;color:#0f3b57}.termCard p{margin:8px 0;color:#344256;line-height:1.65}.videoCard{min-height:180px}.questionList{display:grid;gap:10px}.qCard{border-left:7px solid #0ea5e9}.practiceCard{border-left:7px solid #f97316}.bookCard{border-left:7px solid #16a34a}.qCard h3{font-size:17px;line-height:1.45}.qScene{background:linear-gradient(135deg,#e8f7ff,#fff7d6);border:1px solid #bfe0f4;border-radius:var(--radius);padding:10px;margin:8px 0;display:grid;gap:7px}.qScene b{color:#0f3b57}.options{display:grid;gap:8px}.opt{width:100%;text-align:left;background:#fff;border:2px solid #d6e4f0;border-radius:var(--radius);padding:10px;line-height:1.45}.opt.correct{border-color:#16a34a;background:#ecfdf3}.opt.wrong{border-color:#e11d48;background:#fff1f2}.answerBox{display:none;margin-top:10px;border:1px solid #dbe7f2;background:#f8fcff;border-radius:var(--radius);padding:10px;line-height:1.65}.answerBox.show{display:block}.shot{display:none;margin-top:10px}.shot.show{display:block}.shot img{width:100%;border:1px solid #dbe7f2;border-radius:var(--radius);background:#fff;cursor:zoom-in}.empty{background:#fff;border:1px dashed #bfd2e2;border-radius:var(--radius);padding:24px;text-align:center;color:#64748b;font-weight:900}.footer{font-size:12px;color:#64748b;margin-top:18px;line-height:1.6}.chapterGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.chapterCard{display:block;text-decoration:none;color:var(--ink);border-left:7px solid #0ea5e9}.chapterCard h3{margin:8px 0;font-size:21px;color:#102a43}.studyPath{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0 12px}.pathStep{border:1px solid #cfe0ee;background:#f8fcff;border-radius:var(--radius);padding:10px;line-height:1.45}.pathStep b{display:block;color:#0f3b57;margin-bottom:4px}.deepGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0}.conceptCard,.formulaCard{border:1px solid #d7e5f0;border-radius:var(--radius);padding:12px;background:#fff}.conceptCard{border-left:7px solid #0ea5e9}.formulaCard{border-left:7px solid #f97316;background:#fffaf3}.conceptCard h4,.formulaCard h4{margin:0 0 8px;font-size:17px;color:#102a43}.formula{display:block;background:#102a43;color:#fff;border-radius:var(--radius);padding:9px 10px;font-weight:900;margin:8px 0}.paragraphs{display:grid;gap:8px}.paragraphs p{border-left:4px solid #d7e5f0;background:#fff;border-radius:0 var(--radius) var(--radius) 0;padding:8px 10px;line-height:1.65}.paragraphs b{color:#0f3b57}.readPanel{background:#fffdf7}.qExplain{border:1px solid #dbe7f2;background:#fffdf5;border-radius:var(--radius);padding:10px;margin-top:10px;line-height:1.65}.imageHint{display:block;text-align:center;color:#0f4f6d;font-weight:900;padding:9px;background:#f8fcff;border-top:1px solid #d7e5f0}.lightbox{position:fixed;inset:0;background:rgba(5,14,25,.84);z-index:40;display:none;place-items:center;padding:14px}.lightbox.show{display:grid}.lightboxInner{width:min(1100px,96vw);max-height:94vh;background:#fff;border-radius:var(--radius);padding:10px;box-shadow:0 30px 80px rgba(0,0,0,.35)}.lightboxTop{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:8px}.lightboxTitle{font-weight:900;color:#102a43}.lightbox img{width:100%;max-height:82vh;object-fit:contain;background:#fff;border:1px solid #d7e5f0;border-radius:var(--radius)}.segmentStack{display:grid;gap:14px}.segmentCard{border:1px solid #cfe0ee;border-radius:var(--radius);background:#fff;overflow:hidden}.segmentHead{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 12px;background:linear-gradient(90deg,#e7f7ff,#fff7d6);border-bottom:1px solid #d7e5f0}.segmentHead b{color:#0f3b57}.segmentBody{display:grid;gap:10px;padding:12px}.miniGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.miniPanel{border:1px solid #dbe7f2;background:#fbfdff;border-radius:var(--radius);padding:10px}.miniPanel h4{margin:0 0 8px;color:#0f3b57}.miniPanel p{margin:0;line-height:1.68;white-space:pre-wrap}.sentenceList{display:grid;gap:7px}.sentenceRow{border-left:4px solid #f59e0b;background:#fffaf0;border-radius:0 var(--radius) var(--radius) 0;padding:8px 10px;line-height:1.55}.segmentTakeaway{border:1px solid #c8ead5;background:#f0fdf4;border-radius:var(--radius);padding:10px;line-height:1.6}.fullRead{margin-top:12px;border:1px solid #d7e5f0;border-radius:var(--radius);background:#fff}.fullRead summary{padding:12px;font-weight:900;color:#0f3b57;cursor:pointer}.fullReadInner{display:grid;gap:10px;padding:0 12px 12px}
.segmentStack{gap:22px}.segmentBody{gap:14px;padding:14px}.segmentCard{border-color:#bfd2e2;box-shadow:0 12px 28px rgba(15,23,42,.07)}.segmentHead{min-height:50px}.storyRead.handcrafted{border-left-color:#9f1239;background:linear-gradient(180deg,#fff 0,#fff7f2 100%);padding:15px;box-shadow:0 12px 28px rgba(127,29,29,.08)}.storyRead.handcrafted .storyReadHead b{font-size:20px}.storyRead.handcrafted .storyReadHead span{color:#7f1d1d}.storyRead.handcrafted .storyReadHead strong{background:#7f1d1d;color:#fff;border-color:#7f1d1d}.storyRead.handcrafted .storyOpening{font-size:16px;line-height:1.78!important;color:#1f2937!important}.storyRead.handcrafted .storyBeatGrid div{background:#fff;border-color:#ead4c4}.storyRead.handcrafted .storySurvival{background:#fff7ed;border:1px solid #fed7aa;border-radius:var(--radius);padding:9px 10px}.segmentPractice{border-top:1px solid #edf2f7;padding-top:4px}.segmentSource,.segmentMore{border:1px solid #d8e0ea;background:#fbfdff;border-radius:var(--radius);overflow:hidden}.segmentSource summary,.segmentMore summary{min-height:44px;display:flex;align-items:center;padding:0 12px;color:#0f3b57;font-weight:900;cursor:pointer;list-style:none}.segmentSource summary::-webkit-details-marker,.segmentMore summary::-webkit-details-marker{display:none}.segmentSource summary:after,.segmentMore summary:after{content:"展开";margin-left:auto;color:#64748b;font-size:12px}.segmentSource[open] summary:after,.segmentMore[open] summary:after{content:"收起"}.segmentSource .miniGrid{padding:0 10px 10px}.segmentMore>*:not(summary){margin:10px}.segmentMore .small{margin:0 10px 10px}
@media(max-width:980px){.hero,.layout{grid-template-columns:1fr}.side{position:static}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.chapterGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.app{padding:10px 10px 70px}h1{font-size:36px}.hero{padding:14px}.sectionTitle{display:block}.sectionTitle h2{font-size:30px;line-height:1.15}.sectionTitle p{margin-top:6px}.stats,.controls,.grid,.sceneGrid,.qSceneGrid,.chapterGrid,.studyPath,.deepGrid,.miniGrid{grid-template-columns:1fr}.controls{position:static}.tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.posterHero{display:none}.speech{left:18%;right:8%;font-size:14px}.avatar{transform:scale(.78);transform-origin:bottom}.avatar.right{transform:scale(.72)}body[data-page="chapter"] .hero{gap:8px}body[data-page="chapter"] h1{font-size:31px;line-height:1.08;margin:10px 0 6px}body[data-page="chapter"] .lead{font-size:15px;line-height:1.45}body[data-page="chapter"] .stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}body[data-page="chapter"] .stat{padding:8px}body[data-page="chapter"] .stat b{font-size:22px}body[data-page="chapter"] .stat span{font-size:11px}.lightbox{padding:6px}.lightboxInner{width:100%;max-height:96vh}.lightbox img{max-height:84vh}}
@media(max-width:700px){.segmentTermHead{display:block}.segmentTermHead span{display:block;margin-top:4px}.segmentTermGrid{grid-template-columns:1fr}}
.explainSteps{margin:8px 0 0;padding:0;counter-reset:step;display:grid;gap:8px}.explainSteps li{list-style:none;position:relative;border:1px solid #dbe7f2;background:#fff;border-radius:var(--radius);padding:9px 10px 9px 42px;line-height:1.62}.explainSteps li:before{counter-increment:step;content:counter(step);position:absolute;left:10px;top:10px;width:23px;height:23px;border-radius:50%;background:#0b63ce;color:#fff;font-weight:900;display:grid;place-items:center;font-size:13px}.teachBox{border:2px solid #f5c542;background:#fffdf0;border-radius:var(--radius);padding:11px}.teachBox h4{margin:0 0 8px;color:#854d0e}.termLine{display:grid;gap:7px}.termLine div{border-left:5px solid #0ea5e9;background:#f8fcff;border-radius:0 var(--radius) var(--radius) 0;padding:8px 10px;line-height:1.6}.termLine b{color:#102a43}
/* Exam Picker */
.examPicker{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;padding:8px 0}
.examBtn{cursor:pointer;text-align:left;border:none;background:var(--card);border-radius:12px;padding:16px;transition:transform .15s,box-shadow .15s}
.examBtn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.12)}
.examBtn h3{margin:0 0 8px;font-size:1rem;color:var(--text)}
.examBtn .pill{font-size:.8rem}

/* Clear course structure and richer teaching flow */
.courseMap,.sourceBridge{border:1px solid #bdd7f0;background:linear-gradient(135deg,#ffffff,#eef8ff 58%,#fff6d6);border-radius:var(--radius);padding:12px;margin:12px 0;box-shadow:0 8px 22px rgba(15,59,87,.08)}
.courseMapHead{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:10px}
.courseMapHead b,.sourceBridge h3{color:#0f3b57;font-size:20px;margin:0}
.courseMapHead span{font-weight:900;color:#854d0e;background:#fff2bd;border:1px solid #f5c542;border-radius:999px;padding:5px 9px;font-size:12px}
.courseMapGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.courseMapGrid div,.sourceStats span{background:#fff;border:1px solid #d7e5f0;border-radius:var(--radius);padding:10px;line-height:1.55}
.courseMapGrid strong{display:block;color:#0b63ce;margin-bottom:5px}
.courseMapGrid p,.sourceBridge p{margin:0;line-height:1.68;color:#344256}
.sourceBridge{margin-bottom:12px;border-left:8px solid #0b63ce}
.sourceBridge p{margin-top:8px}
.sourceStats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0}
.sourceStats span{font-weight:900;color:#0f3b57;text-align:center}
.sourceBridgeBtn,.sourceLink{display:inline-grid;place-items:center;text-decoration:none}
.sourceTrace{border:2px solid #0b63ce;background:linear-gradient(135deg,#f8fcff,#ffffff 48%,#fff7d6);border-radius:var(--radius);padding:12px;margin:12px 0;box-shadow:0 10px 28px rgba(11,99,206,.1)}
.sourceTraceHead{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:10px}
.sourceTraceHead b{display:block;color:#0f3b57;font-size:21px;margin-bottom:5px}
.sourceTraceHead p{margin:0;color:#344256;line-height:1.65;font-weight:800}
.sourceTraceHead span{white-space:nowrap;background:#0b63ce;color:#fff;border-radius:999px;padding:7px 10px;font-weight:900;font-size:12px}
.traceGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.traceGrid div{background:#fff;border:1px solid #d7e5f0;border-radius:var(--radius);padding:10px;line-height:1.55}
.traceGrid strong{display:block;color:#0b63ce;margin-bottom:5px}
.traceGrid p{margin:0;color:#344256}
.storyPosterTitle{font-weight:900;color:#0f3b57;background:#eef6ff;border-top:1px solid #d7e5f0;border-bottom:1px solid #d7e5f0;padding:9px 12px}
.storyPosterImg{max-height:520px;background:#f8fcff}
.segmentHead{background:linear-gradient(90deg,#dff6ff,#fff2bd)}
.segmentTakeaway{font-size:15px}
.teachBox{box-shadow:0 10px 24px rgba(245,158,11,.12)}
.highlightLegend{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 12px;padding:9px 10px;border:1px solid #d7e5f0;border-radius:var(--radius);background:#f8fcff;color:#344256;font-size:13px;font-weight:800}
.highlightLegendMarks{display:flex;flex-wrap:wrap;gap:8px}
.highlightLegend span{display:inline-flex;align-items:center;gap:5px}
.highlightMode{display:inline-grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid #bdd7f0;border-radius:var(--radius);overflow:hidden;background:#fff}
.highlightModeBtn{min-height:32px;border-radius:0;border-right:1px solid #bdd7f0;background:#fff;color:#0f3b57;padding:0 10px;font-size:12px;white-space:nowrap}
.highlightModeBtn:last-child{border-right:0}
.highlightModeBtn.active{background:#0f3b57;color:#fff}
.keyMark{font:inherit;font-weight:900;color:inherit;border-radius:5px;padding:0 3px;background:transparent;cursor:pointer}
.keyMark-red{color:#9f1239;text-decoration:underline;text-decoration-color:#ef4444;text-decoration-thickness:3px;text-underline-offset:3px}
.keyMark-box{background:#fff4b8;border:1px solid #f4c430;color:#713f12}
.keyMark-blue{background:#e0f2fe;border:1px solid #38bdf8;color:#075985}
.keyMark-focus{background:#f3e8ff;border:1px solid #c084fc;color:#6b21a8}
.termExplain{color:#64748b;font-weight:750}
.cultivationPanel{border:2px solid #7c3aed;background:linear-gradient(135deg,#fbf7ff,#f8fcff 55%,#fff7d6);border-radius:var(--radius);padding:12px;margin:12px 0;box-shadow:0 12px 26px rgba(124,58,237,.12)}
.cultivationHead{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:10px}
.cultivationHead b{display:block;color:#4c1d95;font-size:20px}
.cultivationHead span{display:block;color:#536173;font-weight:800;line-height:1.45}
.cultivationHead strong{background:#4c1d95;color:#fff;border-radius:999px;padding:8px 12px;white-space:nowrap}
.resourceGrid,.attrGrid{display:grid;gap:7px}
.resourceGrid{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:8px}
.attrGrid{grid-template-columns:repeat(6,minmax(0,1fr))}
.resourceGrid span,.attrGrid span{background:#fff;border:1px solid #d7e5f0;border-radius:var(--radius);padding:8px 9px;font-weight:900;color:#344256}
.resourceGrid b{color:#7c2d12}
.unitGuide{border:1px solid #cfe0ee;background:#fff;border-radius:var(--radius);padding:12px;margin:12px 0;box-shadow:0 8px 20px rgba(15,23,42,.06)}
.unitGuideHead{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:10px}
.unitGuideHead b{font-size:20px;color:#0f3b57}
.unitGuideHead span{color:#536173;font-weight:900;line-height:1.5}
.unitGuideGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.unitGuideGrid div{border:1px solid #d7e5f0;background:#f8fcff;border-radius:var(--radius);padding:10px;line-height:1.55}
.unitGuideGrid strong{display:block;color:#172033;margin-bottom:5px}
.unitGuideGrid p{margin:0;color:#344256;white-space:normal}
.practiceDivider{border:1px dashed #9ca3af;background:#f8fafc;border-radius:var(--radius);padding:11px 12px;margin:14px 0 10px;display:flex;justify-content:space-between;gap:12px;align-items:center}
.practiceDivider b{color:#172033;font-size:17px}
.practiceDivider span{color:#536173;font-weight:900;line-height:1.45}
.archivePanel{border:2px solid #172033;background:linear-gradient(135deg,#f8fafc,#ffffff 54%,#fff7d6);border-radius:var(--radius);padding:12px;margin:12px 0;box-shadow:0 12px 26px rgba(15,23,42,.1)}
.archiveHead{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:10px}
.archiveHead b{display:block;color:#172033;font-size:20px}
.archiveHead span{display:block;color:#344256;font-weight:800;line-height:1.55;margin-top:3px}
.archiveHead strong{background:#172033;color:#fff;border-radius:999px;padding:7px 11px;white-space:nowrap}
.archiveGrid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:10px}
.archiveGrid article{background:#fff;border:1px solid #d7e5f0;border-radius:var(--radius);padding:10px;line-height:1.5}
.archiveGrid h4{margin:0 0 8px;color:#0f3b57;font-size:16px}
.archiveGrid p{margin:7px 0;white-space:normal;border-left:4px solid #cbd5e1;padding-left:8px}
.archiveGrid p b{display:block;color:#172033}
.archiveGrid p span{display:block;color:#536173;font-weight:800;margin-top:3px}
.fragmentShelf{display:flex;flex-wrap:wrap;gap:7px}
.fragmentShelf span{display:inline-flex;align-items:center;min-height:28px;border:1px solid #fde68a;background:#fef3c7;color:#78350f;border-radius:999px;padding:0 9px;font-weight:900;font-size:12px}
.outMission{margin-top:14px;border:2px solid #16a34a;border-radius:var(--radius);background:linear-gradient(135deg,#f0fdf4,#ffffff 62%,#eef6ff);overflow:hidden}
.outMissionHead{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:12px;background:#dcfce7;border-bottom:1px solid #bbf7d0}
.outMissionHead b{display:block;color:#14532d;font-size:19px}
.outMissionHead span{display:block;color:#365b48;font-weight:800;margin-top:3px}
.outMissionHead strong{background:#14532d;color:#fff;border-radius:999px;padding:6px 10px;white-space:nowrap}
.missionCompact{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:10px 12px}
.missionCompact span{border:1px solid #d8e0ea;background:#fff;border-radius:var(--radius);padding:8px;color:#334155;font-weight:900;text-align:center}
.missionCompact span.done{border-color:#16a34a;background:#ecfdf3;color:#166534}
.missionCompact b{color:#1d4ed8}
.missionAdvanced{border-top:1px solid #d8e0ea}
.missionAdvanced summary{padding:10px 12px;color:#253044;font-weight:900;cursor:pointer}
.missionGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:12px}
.missionStep{background:#fff;border:1px solid #d7e5f0;border-radius:var(--radius);padding:10px;line-height:1.55}
.missionStep.done{border-color:#16a34a;box-shadow:inset 0 0 0 2px rgba(22,163,74,.12)}
.missionStep b{display:block;color:#0f3b57;font-size:16px;margin-bottom:5px}
.missionStep>span{display:inline-flex;background:#eef6ff;border:1px solid #cce4f6;border-radius:999px;padding:3px 8px;font-size:12px;font-weight:900;color:#0f4f6d;margin-bottom:6px}
.missionStep p{margin:6px 0;white-space:normal}
.missionOptions{display:grid;gap:7px;margin:8px 0}
.missionOpt{min-height:38px;text-align:left;border:1px solid #bdd7f0;background:#fff;color:#0f3b57;border-radius:var(--radius);padding:7px 9px;line-height:1.35}
.missionOpt.correct{border-color:#16a34a;background:#ecfdf3;color:#166534}
.missionOpt.wrong{border-color:#e11d48;background:#fff1f2;color:#9f1239}
.missionStep em{display:block;color:#536173;font-style:normal;font-weight:800;font-size:13px}
.missionExplain{width:100%;min-height:82px;border:1px solid #c6d7e7;border-radius:var(--radius);padding:9px 10px;background:#fff;color:var(--ink);font:inherit;line-height:1.55;resize:vertical;margin:8px 0}
.cultivationToast{position:fixed;z-index:60;max-width:min(360px,88vw);transform:translate(-50%,-100%);background:#102a43;color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:var(--radius);box-shadow:0 18px 42px rgba(0,0,0,.24);padding:9px 11px;font-weight:900;line-height:1.45;pointer-events:none;animation:cultivationFloat 1.8s ease forwards}
.cultivationToast span{display:block;color:#dff6ff;font-weight:800;margin-top:3px}
@keyframes cultivationFloat{0%{opacity:0;transform:translate(-50%,-70%)}16%{opacity:1;transform:translate(-50%,-105%)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-145%)}}
.gameHub,.sectMap{border:2px solid #0f766e;background:linear-gradient(135deg,#ecfeff,#ffffff 58%,#fff7d6);border-radius:var(--radius);padding:12px;margin:12px 0;box-shadow:0 12px 28px rgba(15,118,110,.12)}
.gameHubHead,.sectMapHead{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:10px}
.gameHubHead b,.sectMapHead h2{display:block;color:#115e59;font-size:21px;margin:0 0 4px}
.gameHubHead span,.sectMapHead p{color:#344256;font-weight:800;line-height:1.6;margin:0}
.gameHubHead strong{background:#115e59;color:#fff;border-radius:999px;padding:7px 10px;white-space:nowrap}
.gameHubGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.gameModule{background:#fff;border:1px solid #cfe0ee;border-radius:var(--radius);padding:10px;line-height:1.52;min-height:150px}
.gameModule.done{border-color:#16a34a;box-shadow:inset 0 0 0 2px rgba(22,163,74,.12)}
.gameModule.locked{opacity:.72}
.gameModule.ready{border-color:#0f766e}
.gameModule h4{margin:0 0 7px;color:#0f3b57;font-size:17px}
.gameModule p{margin:0 0 8px;white-space:normal}
.moduleActions{display:flex;flex-wrap:wrap;gap:7px}
.corridorBar{height:10px;background:#e2e8f0;border-radius:999px;overflow:hidden;margin:8px 0}
.corridorBar i{display:block;height:100%;background:linear-gradient(90deg,#16a34a,#0ea5e9)}
.corridorEvent,.artifactEffect,.hpLine{border:1px dashed #b9d6e6;background:#f8fcff;border-radius:var(--radius);padding:7px 8px;font-weight:800;color:#26465f}
.artifactEffect b{display:block;color:#115e59}
.artifactEffect span{display:block;margin-top:3px}
.petActions{display:flex;flex-wrap:wrap;gap:7px;margin:8px 0}
.artifactGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-bottom:8px}
.artifactCard,.cardChoice{border:1px solid #bdd7f0;background:#fff;color:#0f3b57;border-radius:var(--radius);padding:8px;text-align:left;line-height:1.35}
.artifactCard.ready{background:#f0fdf4;border-color:#16a34a}
.artifactCard.active{box-shadow:inset 0 0 0 2px rgba(15,118,110,.25);background:#ecfeff}
.artifactCard b{display:block}
.artifactCard span{font-size:12px;color:#536173}
.cardChoices{display:grid;gap:7px}
.cardChoice.correct{border-color:#16a34a;background:#ecfdf3;color:#166534}
.cardChoice.wrong{border-color:#e11d48;background:#fff1f2;color:#9f1239}
.bossArena{margin-top:9px;border-top:1px solid #cfe0ee;padding-top:9px}
.bossArenaHead{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:8px}
.bossArenaHead b{color:#115e59}
.bossArenaHead span{font-size:12px;font-weight:900;color:#536173}
.bossQuestion{border:1px solid #d7e5ef;border-radius:var(--radius);padding:8px;margin:8px 0;background:#fbfdff}
.bossQuestion.done{border-color:#16a34a;background:#f0fdf4}
.bossQuestion.miss{border-color:#e11d48;background:#fff7f8}
.bossQuestion>b{display:block;color:#0f3b57;margin-bottom:5px}
.bossChoices{display:grid;gap:6px;margin:7px 0}
.bossChoice{border:1px solid #bdd7f0;background:#fff;color:#0f3b57;border-radius:var(--radius);padding:7px 8px;text-align:left;line-height:1.35}
.bossChoice.correct{border-color:#16a34a;background:#ecfdf3;color:#166534}
.bossChoice.wrong{border-color:#e11d48;background:#fff1f2;color:#9f1239}
.mindList{display:grid;gap:7px;margin:8px 0}
.mindRecord{border:1px solid #ffd0da;background:#fff7f8;border-radius:var(--radius);padding:7px 8px;line-height:1.42}
.mindRecord b{display:block;color:#9f1239}
.mindRecord span,.mindRecord em{display:block;color:#4b5563;font-style:normal;font-size:12px;font-weight:800;margin-top:3px}
.emptyMind{border:1px dashed #cfe0ee;background:#f8fcff;border-radius:var(--radius);padding:8px;color:#536173;font-weight:800}
.gameModule em{display:block;margin-top:7px;color:#536173;font-style:normal;font-weight:800;font-size:13px}
.peakGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.peakCard{display:block;text-decoration:none;background:#fff;border:1px solid #cfe0ee;border-left:7px solid #0f766e;border-radius:var(--radius);padding:12px;color:var(--ink);line-height:1.55}
.peakCard b{display:block;color:#115e59;font-size:18px}
.peakCard span{color:#536173;font-weight:800}
.peakProgress{display:block;margin-top:9px;border-top:1px solid #e2edf5;padding-top:8px;color:#0f766e;font-weight:900}
.sectProgress{margin-top:8px;color:#115e59!important}

@media(max-width:700px){
  .courseMapGrid,.sourceStats,.traceGrid{grid-template-columns:1fr}
  .courseMapHead,.sourceTraceHead{display:block}
  .sourceTraceHead span{display:inline-flex;margin-top:8px}
  .courseMapHead span{display:inline-flex;margin-top:8px}
  .storyPosterImg{max-height:none}
  .highlightLegend{display:grid;grid-template-columns:1fr}
  .highlightLegendMarks{display:grid;grid-template-columns:1fr 1fr}
  .highlightMode{width:100%}
  .unitGuideHead,.practiceDivider{display:block}
  .unitGuideHead span,.practiceDivider span{display:block;margin-top:5px}
  .cultivationHead,.outMissionHead{display:block}
  .cultivationHead strong,.outMissionHead strong{display:inline-flex;margin-top:8px}
  .resourceGrid,.attrGrid,.unitGuideGrid,.archiveGrid,.missionGrid,.missionCompact,.gameHubGrid,.peakGrid{grid-template-columns:1fr}
  .archiveHead{display:block}
  .archiveHead strong{display:inline-flex;margin-top:8px}
  .gameHubHead,.sectMapHead{display:block}
  .sectMapHead .ghost{margin-top:8px}
  .artifactGrid{grid-template-columns:1fr}
}

.questionDoBlock{border:2px solid #172033;background:#ffffff;border-radius:var(--radius);padding:12px;margin:12px 0;display:grid;gap:12px;box-shadow:0 12px 26px rgba(15,23,42,.08)}
.questionPrompt{border:1px solid #d8e0ea;background:#f8fafc;border-radius:var(--radius);padding:12px}
.questionPrompt>b,.choiceHead b{display:block;color:#172033;font-size:15px;line-height:1.35;margin-bottom:6px}
.questionPrompt h3{margin:0;font-size:18px;line-height:1.62;color:#172033}
.choiceBlock{display:grid;gap:10px}
.choiceHead{border-left:5px solid #1d4ed8;background:#f8fbff;border-radius:0 var(--radius) var(--radius) 0;padding:10px 12px}
.choiceHead span{display:block;color:#526173;font-weight:900;line-height:1.6}
.qCard .options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.qCard .opt{display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px;align-items:start;min-height:58px;padding:11px 12px;border:2px solid #cbd5e1;background:#fff;text-align:left;line-height:1.55;color:#253044}
.optLetter{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#172033;color:#fff;font-weight:950}
.optText{display:block;min-width:0;font-weight:850;line-height:1.58}
.qCard .opt:hover{border-color:#1d4ed8;background:#f8fbff}
.qCard .opt.correct{border-color:#16a34a;background:#ecfdf3}
.qCard .opt.wrong{border-color:#e11d48;background:#fff1f2}
.qCard .opt.correct .optLetter{background:#16a34a}
.qCard .opt.wrong .optLetter{background:#e11d48}
.noOptionNotice{grid-column:1/-1;border:1px dashed #cbd5e1;background:#f8fafc;border-radius:var(--radius);padding:12px;line-height:1.65}
.noOptionNotice b{display:block;color:#172033;margin-bottom:4px}
.noOptionNotice span{display:block;color:#526173;font-weight:850}
.questionStudy{border:1px solid #cbd5e1;background:#f8fbff;border-radius:var(--radius);padding:12px;margin:12px 0;display:grid;gap:12px}
.answerSnippet{border-left-color:#64748b;background:#fbfdff}
.answerSnippet h3{color:#334155}
.answerSnippet .qExplain{background:#f8fafc}
.questionStudyHead{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;border-bottom:1px solid #d8e0ea;padding-bottom:10px}
.questionStudyHead b{display:block;color:#172033;font-size:19px;line-height:1.25}
.questionStudyHead span{display:block;color:#526173;font-weight:900;line-height:1.62;margin-top:4px}
.questionStudyHead strong{display:inline-flex;align-items:center;min-height:30px;border-radius:999px;background:#1d4ed8;color:#fff;padding:0 10px;font-size:13px;white-space:nowrap}
.questionStudyGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.questionStudyGrid>article{border:1px solid #d8e0ea;background:#fff;border-radius:var(--radius);padding:10px;line-height:1.72}
.questionStudyGrid>article.wide{grid-column:1/-1}
.questionStudyGrid b{display:block;color:#1d4ed8;margin-bottom:6px;font-size:16px;line-height:1.35}
.microLessonList{display:grid;gap:9px}
.microLessonList article{border-left:4px solid #f59e0b;background:#fffaf0;border-radius:0 var(--radius) var(--radius) 0;padding:9px}
.microLessonList article b{color:#92400e}
.answerReview{border:1px solid #bbf7d0;background:#f0fdf4;border-radius:var(--radius);padding:10px;margin:10px 0;display:grid;gap:10px}
.answerReview h4,.optionReview h4{margin:0;color:#14532d;font-size:17px;line-height:1.35}
.optionReview{display:grid;gap:9px}
.optionReview>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.optionReview article{border:1px solid #d8e0ea;background:#fff;border-radius:var(--radius);padding:9px;line-height:1.58}
.optionReview article.correct{border-color:#86efac;background:#f0fdf4}
.optionReview article.wrong{border-color:#fecdd3;background:#fff7f8}
.optionReview b{display:block;margin-bottom:5px;color:#166534}
.optionReview article.wrong b{color:#9f1239}
.optionReview p{margin:0 0 6px!important;white-space:normal!important;color:#334155!important;font-weight:900;line-height:1.55!important}
.optionReview span{display:block;color:#334155;font-weight:850;line-height:1.65}
.cultivationPanel{border-color:#172033;background:linear-gradient(135deg,#fff,#f0fdf4 48%,#fff7d6);box-shadow:0 12px 26px rgba(15,23,42,.12)}
.cultivationHead b{color:#172033}
.cultivationHead strong{background:#172033}
.resourceGrid b{color:#9a3412}
.gameHub,.sectMap{border-color:#172033;background:linear-gradient(135deg,#f8fafc,#fff 50%,#fff7d6);box-shadow:0 12px 28px rgba(15,23,42,.1)}
.gameHubHead b,.sectMapHead h2,.peakCard b{color:#172033}
.gameHubHead strong{background:#172033}
.peakCard{border-left-color:#172033}
.peakProgress,.sectProgress{color:#172033!important}

/* Cohesive reading-first palette */
:root{--ink:#172033;--muted:#64748b;--blue:#1d4ed8;--deep:#253044;--green:#15803d;--orange:#b45309;--red:#b91c1c;--line:#d8e0ea;--soft:#f6f8fb;--paper:#ffffff}
body{background:#f4f7fb;color:var(--ink)}
.app{background:transparent}
.hero,.main,.side,.card,.panel,.unitGuide,.courseMap,.sourceTrace,.sourceBridge,.segmentCard,.fullRead{background:#fff;border-color:var(--line);box-shadow:0 8px 22px rgba(15,23,42,.06)}
.hero{background:#fff}
.eyebrow{background:#f8fafc;border-color:#d8e0ea;color:#334155}
h1,.sectionTitle h2,.lessonTitle,.panel h3,.courseMapHead b,.sourceTraceHead b,.unitGuideHead b{color:#17324a}
.lead,.lessonSubtitle,.sectionTitle p,.courseMapGrid p,.sourceTraceHead p,.traceGrid p,.unitGuideHead span,.unitGuideGrid p{color:#526173}
.stat,.pill,.controls,.unitGuideGrid div,.traceGrid div,.courseMapGrid div,.pathStep,.miniPanel,.sceneTile,.qSceneTile{background:#f8fafc;border-color:#d8e0ea;color:#334155}
.stat b{color:#1d4ed8}
.pill{color:#244761}
.tab{background:#fff;border-color:#cbd5e1;color:#253044}
.tab.active,.primary,.highlightModeBtn.active{background:#253044;color:#fff}
.ghost,.small{background:#fff;border-color:#cbd5e1;color:#253044}
.posterHero{background:#f8fafc;border-color:#d8e0ea}
.posterHero:before,.speech{border-color:#253044;box-shadow:none}
.avatar:before,.avatar:after{border-color:#253044}
.avatar:after{background:#4976c9}
.avatar.right:after{background:#c0843a}
.posterHead,.segmentHead{background:#f8fafc;border-color:#d8e0ea}
.sceneArt{background:#fff}
.sceneBoard{background:#f8fafc;border-color:#cbd5e1}
.assetBox{border-color:#253044}
.deepGrid{margin-top:14px;gap:14px}
.conceptCard,.formulaCard{border-color:#d8e0ea;background:#fff;display:grid;gap:10px;padding:14px}
.conceptCard{border-left-color:#4976c9}
.formulaCard{border-left-color:#b45309;background:#fffaf2}
.conceptCard p,.formulaCard p{margin:0!important;line-height:1.65!important;white-space:normal!important}
.formula{background:#253044}
.readPanel{background:#fff}
.paragraphs p,.sentenceRow{background:#fbfcfe;border-left-color:#cbd5e1}
.segmentTakeaway{background:#f8fafc;border-color:#cbd5e1}
.teachBox{background:#fffaf2;border-color:#e5c27a;box-shadow:none}
.highlightLegend{background:#f8fafc;border-color:#d8e0ea}
.keyMark-red{color:#9f1239;text-decoration-color:#dc2626}
.keyMark-box{background:#fff6cc;border-color:#eab308;color:#713f12}
.keyMark-blue{background:#eaf2ff;border-color:#93b4e8;color:#1e3a8a}
.keyMark-focus{background:#f4f1ff;border-color:#b9a7f0;color:#4c1d95}
.practiceDivider{background:#f8fafc;border-color:#cbd5e1}
.cultivationPanel,.archivePanel,.gameHub,.sectMap,.outMission{background:#fff;border-color:#cbd5e1;box-shadow:0 8px 22px rgba(15,23,42,.06)}
.cultivationHead b,.archiveHead b,.gameHubHead b,.sectMapHead h2,.outMissionHead b{color:#253044}
.cultivationHead strong,.archiveHead strong,.gameHubHead strong,.outMissionHead strong{background:#253044;color:#fff}
.resourceGrid span,.attrGrid span,.archiveGrid article,.gameModule,.missionStep{background:#f8fafc;border-color:#d8e0ea;color:#334155}
.resourceGrid b{color:#b45309}
.fragmentShelf span{background:#fff6cc;border-color:#eab308;color:#713f12}
.outMissionHead{background:#f8fafc;border-color:#d8e0ea}
.outMissionHead span{color:#526173}
.missionOpt,.artifactCard,.cardChoice,.bossChoice,.opt{border-color:#cbd5e1;color:#253044;background:#fff}
.missionOpt.correct,.cardChoice.correct,.bossChoice.correct,.opt.correct,.artifactCard.ready{background:#ecfdf3;border-color:#86cfa0;color:#166534}
.missionOpt.wrong,.cardChoice.wrong,.bossChoice.wrong,.opt.wrong{background:#fff1f2;border-color:#f4a9b7;color:#9f1239}
.corridorBar i{background:linear-gradient(90deg,#64748b,#1d4ed8)}
.corridorEvent,.artifactEffect,.hpLine{background:#fff;border-color:#cbd5e1;color:#334155}
.mindRecord{background:#fff1f2;border-color:#f4a9b7}
.examBtn{background:#fff;border:1px solid var(--line)}

/* Rule-world explanation layer */
.unitRuleGate{border:1px solid #253044;background:linear-gradient(135deg,#f8fafc,#fff 50%,#fff6cc);border-left:7px solid #253044;border-radius:var(--radius);padding:12px;margin:12px 0;display:grid;gap:9px;box-shadow:0 8px 22px rgba(15,23,42,.08)}
.unitRuleGate>div:first-child{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.unitRuleGate b{color:#172033}
.unitRuleGate>div:first-child b{display:block;font-size:20px;line-height:1.25}
.unitRuleGate>div:first-child span{color:#526173;font-weight:900;line-height:1.45}
.unitRuleGate p{margin:0!important;color:#334155!important;line-height:1.68!important;font-weight:800;white-space:normal!important}
.gateHook,.whisperLine{display:block;color:#172033;font-weight:900;font-size:16px;line-height:1.58;margin-bottom:5px}
.unitRuleGate p b{color:#7f1d1d}
.gatePath{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.gatePath span{display:block;border:1px solid #d8e0ea;background:#fff;border-radius:var(--radius);padding:8px;color:#334155;font-weight:800;line-height:1.45}
.gatePath b{display:block;color:#1d4ed8;margin-bottom:4px}
.beginnerLayer{border:1px solid #d8e0ea;background:#fff;border-radius:var(--radius);padding:12px;margin:12px 0;display:grid;gap:10px;box-shadow:0 8px 22px rgba(15,23,42,.06)}
.beginnerLayerHead{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.beginnerLayerHead b{display:block;color:#172033;font-size:20px;line-height:1.25}
.beginnerLayerHead span{color:#526173;font-weight:900;line-height:1.45}
.layerExplainGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.layerExplainGrid article{border:1px solid #d8e0ea;background:#f8fafc;border-radius:var(--radius);padding:12px;line-height:1.55;display:grid;gap:8px}
.layerExplainGrid b{display:block;color:#1d4ed8;font-size:17px;line-height:1.25}
.layerExplainGrid strong{display:block;color:#172033;font-size:15px;line-height:1.45}
.layerExplainGrid p{margin:0!important;color:#334155!important;line-height:1.65!important;white-space:normal!important;font-weight:800}
.layerExplainGrid .layerMistake{border-left:4px solid #b91c1c;background:#fff1f2;border-radius:0 var(--radius) var(--radius) 0;padding:8px;color:#7f1d1d!important}
.layerExplainGrid .layerExampleText{border-left:4px solid #15803d;background:#f0fdf4;border-radius:0 var(--radius) var(--radius) 0;padding:8px;color:#14532d!important}
.layerCurrentWhy{border:1px solid #cbd5e1;background:#fffaf2;border-radius:var(--radius);padding:10px;line-height:1.6}
.layerCurrentWhy b{display:block;color:#9a3412;margin-bottom:5px}
.layerCurrentWhy p{margin:0!important;color:#334155!important;line-height:1.65!important;white-space:normal!important;font-weight:900}
.foundationPanel{border:1px solid #cbd5e1;background:#f8fafc;border-radius:var(--radius);padding:10px;display:grid;gap:9px}
.foundationHead{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.foundationHead b{display:block;color:#172033;font-size:18px;line-height:1.25}
.foundationHead span{color:#526173;font-weight:900;line-height:1.45}
.foundationGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.foundationGrid article{border:1px solid #d8e0ea;background:#fff;border-radius:var(--radius);padding:9px;line-height:1.48}
.foundationGrid b{display:block;color:#9a3412;margin-bottom:4px}
.foundationGrid p{margin:0!important;color:#334155!important;line-height:1.55!important;white-space:normal!important;font-weight:800}
.foundationMatrix{display:grid;gap:7px}
.foundationMatrix div{display:grid;grid-template-columns:112px minmax(0,1fr) minmax(0,1.25fr);gap:7px;align-items:stretch}
.foundationMatrix b,.foundationMatrix span,.foundationMatrix em{border:1px solid #d8e0ea;background:#fff;border-radius:var(--radius);padding:8px;line-height:1.45}
.foundationMatrix b{color:#1d4ed8}
.foundationMatrix span{color:#334155;font-weight:900}
.foundationMatrix em{color:#7f1d1d;font-style:normal;font-weight:900}
.whyPanel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:2px 0}
.whyPanel div{border:1px solid #d8e0ea;background:#f8fafc;border-radius:var(--radius);padding:10px;line-height:1.55}
.whyPanel b{display:block;color:#9a3412;margin-bottom:5px}
.whyPanel p{margin:0!important;color:#334155!important;line-height:1.65!important;white-space:normal!important;font-weight:850}
.foundationNote{margin:0!important;border-left:4px solid #9a3412;background:#fff7ed;border-radius:0 var(--radius) var(--radius) 0;padding:8px 10px;color:#7c2d12!important;line-height:1.6!important;white-space:normal!important;font-weight:900}
.foundationBrief{border:1px solid #d8e0ea;background:#f8fafc;border-radius:var(--radius);padding:9px;margin:9px 0;display:grid;gap:8px}
.foundationBriefHead{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.foundationBriefHead b{color:#172033;font-size:16px;line-height:1.25}
.foundationBriefHead span{color:#526173;font-size:12px;font-weight:900;line-height:1.35;text-align:right}
.foundationBriefGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.foundationBriefGrid span,.foundationBriefGrid article{display:block;border:1px solid #d8e0ea;background:#fff;border-radius:var(--radius);padding:7px;color:#334155;font-weight:800;line-height:1.48;white-space:normal}
.foundationBriefGrid b{display:block;color:#1d4ed8;margin-bottom:3px}
.foundationBriefGrid article .readableText{gap:7px}
.foundationBriefGrid article .readableText p{padding:6px 8px}
.qExplain .foundationBrief{background:#fff;margin:8px 0}
.layerExample{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);gap:7px;align-items:stretch}
.layerExample span{border:1px solid #cbd5e1;background:#fffaf2;border-radius:var(--radius);padding:8px;line-height:1.45;font-weight:900;color:#334155}
.layerExample span b{display:block;color:#9a3412;margin-bottom:3px}
.layerExample i{display:grid;place-items:center;color:#64748b;font-style:normal;font-weight:900}
.layerWarning{margin:0!important;border-left:4px solid #b91c1c;background:#fff1f2;border-radius:0 var(--radius) var(--radius) 0;padding:8px 10px;color:#7f1d1d!important;line-height:1.6!important;white-space:normal!important;font-weight:900}
.ruleLens{border:1px solid #253044;background:linear-gradient(135deg,#172033,#263244);color:#f8fafc;border-radius:var(--radius);padding:11px;display:grid;gap:9px;box-shadow:0 12px 26px rgba(15,23,42,.16)}
.ruleLensHead{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.ruleLensHead b{display:block;color:#fff;font-size:18px;line-height:1.25}
.ruleLensHead span{display:block;color:#dbeafe;font-weight:800;line-height:1.45;margin-top:3px}
.ruleLensHead strong{display:inline-flex;align-items:center;min-height:28px;border-radius:999px;background:#facc15;color:#1f2937;padding:0 9px;font-size:12px;white-space:nowrap}
.rulePremise{margin:0!important;color:#f8fafc!important;line-height:1.7!important;font-weight:800;white-space:normal!important}
.rulePremise b{display:inline;color:#fde68a}
.rulePremise .whisperLine{color:#fff;font-size:17px;margin-bottom:6px}
.lensGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.lensGrid div{border:1px solid rgba(226,232,240,.22);background:rgba(255,255,255,.07);border-radius:var(--radius);padding:8px;line-height:1.48}
.lensGrid b{display:block;color:#f8d47a;margin-bottom:4px}
.lensGrid span{display:block;color:#e5e7eb;font-weight:800}
.storyRead{border:1px solid #cbd5e1;background:#fff;border-left:7px solid #253044;border-radius:var(--radius);padding:11px;display:grid;gap:9px;box-shadow:0 8px 22px rgba(15,23,42,.06)}
.storyReadHead{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.storyReadHead b{display:block;color:#172033;font-size:18px;line-height:1.25}
.storyReadHead span{display:block;color:#526173;font-weight:800;line-height:1.45;margin-top:3px}
.storyReadHead strong{display:inline-flex;align-items:center;min-height:28px;border:1px solid #cbd5e1;background:#f8fafc;color:#253044;border-radius:999px;padding:0 9px;font-size:12px;white-space:nowrap}
.storyOpening,.storySurvival{margin:0!important;color:#334155!important;line-height:1.68!important;font-weight:900;white-space:normal!important}
.storyOpening b,.storySurvival b{color:#7f1d1d}
.storyBeatGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.storyBeatGrid div{border:1px solid #d8e0ea;background:#f8fafc;border-radius:var(--radius);padding:8px;line-height:1.48}
.storyBeatGrid b{display:block;color:#1d4ed8;margin-bottom:4px}
.storyBeatGrid span{display:block;color:#334155;font-weight:800}
.storyBeatGrid div:nth-child(3){border-color:#fecdd3;background:#fff1f2}
.storyBeatGrid div:nth-child(3) b{color:#be123c}
.storyBeatGrid div:nth-child(4){border-color:#bbf7d0;background:#f0fdf4}
.storyBeatGrid div:nth-child(4) b{color:#15803d}
.storyBeatGrid div:nth-child(5){border-color:#bfdbfe;background:#eff6ff}
.storyBeatGrid div:nth-child(5) b{color:#1d4ed8}
.storyBeatGrid div:nth-child(6){border-color:#fde68a;background:#fffbeb}
.storyBeatGrid div:nth-child(6) b{color:#92400e}
.storyBeatGrid div:nth-child(7){border-color:#fecaca;background:#fff1f2}
.storyBeatGrid div:nth-child(7) b{color:#991b1b}
.storyBeatGrid div:nth-child(8){border-color:#ddd6fe;background:#f5f3ff}
.storyBeatGrid div:nth-child(8) b{color:#6d28d9}
.segmentDrill{border:1px solid #d8e0ea;background:#f8fafc;border-radius:var(--radius);padding:10px;display:grid;gap:9px}
.segmentDrill.done{border-color:#16a34a;background:#f0fdf4}
.segmentDrill.miss{border-color:#f4a9b7;background:#fff7f8}
.segmentDrillHead{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.segmentDrillHead b{display:block;color:#172033;font-size:17px;line-height:1.25}
.segmentDrillHead span{display:block;color:#526173;font-weight:800;line-height:1.45;margin-top:3px}
.segmentDrillHead strong{display:inline-flex;align-items:center;min-height:28px;border-radius:999px;background:#253044;color:#fff;padding:0 9px;font-size:12px;white-space:nowrap}
.segmentDrill p{margin:0!important;color:#334155!important;line-height:1.55!important;font-weight:900;white-space:normal!important}
.segmentDrillOptions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.segmentDrillOpt{border:1px solid #cbd5e1;background:#fff;color:#253044;border-radius:var(--radius);padding:8px;text-align:left;line-height:1.42;font-weight:900}
.segmentDrillOpt.correct{border-color:#16a34a;background:#ecfdf3;color:#166534}
.segmentDrillOpt.wrong{border-color:#e11d48;background:#fff1f2;color:#9f1239}
.segmentDrill em{display:block;color:#526173;font-style:normal;font-weight:900;line-height:1.5}

/* Clear first reading flow */
.plainLesson{border:2px solid #1d4ed8;background:#f8fbff;border-radius:var(--radius);padding:14px;margin:14px 0;display:grid;gap:12px;box-shadow:0 10px 28px rgba(29,78,216,.1)}
.plainLessonHead{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;border-bottom:1px solid #d8e0ea;padding-bottom:10px}
.plainLessonHead b{display:block;color:#172033;font-size:22px;line-height:1.22}
.plainLessonHead span{display:block;color:#526173;font-weight:900;line-height:1.45;margin-top:4px}
.plainLessonHead strong{display:inline-flex;align-items:center;min-height:32px;border-radius:999px;background:#1d4ed8;color:#fff;padding:0 10px;font-size:13px;white-space:nowrap}
.zeroPrelude{border:1px solid #f59e0b;background:#fffbeb;border-radius:var(--radius);padding:12px;display:grid;gap:10px}
.zeroPreludeHead{display:grid;gap:4px;border-bottom:1px solid #fed7aa;padding-bottom:9px}
.zeroPreludeHead b{color:#92400e;font-size:19px;line-height:1.3}
.zeroPreludeHead span{color:#713f12;font-weight:900;line-height:1.65}
.zeroPreludeGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.zeroPreludeGrid article{background:#fff;border:1px solid #fed7aa;border-radius:var(--radius);padding:10px;line-height:1.7}
.zeroPreludeGrid b{display:block;color:#9a3412;margin-bottom:5px;font-size:16px}
.zeroPreludeGrid p{margin:0!important;white-space:normal!important;color:#334155!important;font-weight:850;line-height:1.78!important}
.zeroPreludeLines{display:grid;gap:10px}
.zeroPreludeLines p{padding:8px 9px;border-left:4px solid #f59e0b;background:#fffaf0;border-radius:0 var(--radius) var(--radius) 0}
.readableText{display:grid;gap:12px}
.readableText p{margin:0!important;padding:9px 10px;border-left:4px solid #cbd5e1;background:#f8fafc;border-radius:0 var(--radius) var(--radius) 0;white-space:normal!important;color:#334155!important;font-weight:850;line-height:1.82!important}
.labeledReadable{display:grid;gap:7px;border:1px solid #d8e0ea;background:#fbfdff;border-radius:var(--radius);padding:9px}
.labeledReadable>b{display:block;color:#17324a;font-size:15px;line-height:1.35}
.labeledReadable>p{margin:0!important;padding:8px 9px;border-left:4px solid #f59e0b;background:#fffaf0;border-radius:0 var(--radius) var(--radius) 0;color:#334155!important;font-weight:850;line-height:1.72!important}
.labeledReadable .readableText p{background:#fffaf0;border-left-color:#f59e0b}
.plainFlow{display:grid;grid-template-columns:1fr;gap:12px}
.plainFlow article{border:1px solid #d8e0ea;background:#fff;border-radius:var(--radius);padding:13px;line-height:1.72}
.plainFlow b{display:block;color:#1d4ed8;margin-bottom:7px;font-size:17px;line-height:1.35}
.plainFlow p,.plainExample p{margin:0!important;white-space:normal!important;color:#334155!important;font-weight:850;line-height:1.82!important}
.simpleAskList{display:grid;gap:7px}
.simpleAskList p{margin:0 0 2px!important;line-height:1.62!important}
.simpleAskList div{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(74px,.55fr) minmax(86px,.55fr);gap:7px;align-items:stretch}
.simpleAskList span,.simpleAskList i,.simpleAskList b{display:flex!important;align-items:center;margin:0!important;border-radius:var(--radius);padding:7px 8px;line-height:1.45;font-style:normal;font-size:14px}
.simpleAskList span{background:#f8fafc;border:1px solid #d8e0ea;color:#334155;font-weight:850}
.simpleAskList i{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;font-weight:950}
.simpleAskList b{background:#eff6ff;border:1px solid #bfdbfe;color:#1d4ed8;font-weight:950}
.simpleAskList em{display:block;margin-top:2px;color:#334155;font-style:normal;font-weight:900;line-height:1.6}
.plainExample{border-left:5px solid #16a34a;background:#f0fdf4;border-radius:0 var(--radius) var(--radius) 0;padding:11px;line-height:1.66}
.plainExample b,.plainTerms b{display:block;color:#14532d;margin-bottom:5px}
.plainTerms{display:grid;gap:7px;border:1px solid #d8e0ea;background:#fff;border-radius:var(--radius);padding:10px}
.plainTerms span,.plainTerms article{display:block;border-left:4px solid #f59e0b;background:#fffaf0;border-radius:0 var(--radius) var(--radius) 0;padding:7px 9px;color:#334155;font-weight:850;line-height:1.55}
.plainTerms article .readableText p{background:#fff;border-left-color:#fed7aa}
.conceptCard>.readableText,.formulaCard>.readableText{gap:8px}
.conceptCard>.readableText p,.formulaCard>.readableText p{background:#f8fafc;border-left-color:#93c5fd}
.foundationMatrix div>p,.foundationMatrix div>.readableText{border:1px solid #d8e0ea;background:#fff;border-radius:var(--radius);padding:8px;line-height:1.45;color:#334155;font-weight:900;margin:0!important}
.foundationMatrix div>.readableText{display:grid;gap:7px}
.foundationMatrix div>.readableText p{padding:6px 7px;background:#f8fafc}
.lensGrid>div>p,.lensGrid .readableText p{margin:0!important;background:rgba(255,255,255,.12);border-left-color:#f8d47a;color:#f8fafc!important}
.storyBeatGrid>div>p,.storyBeatGrid .readableText p{margin:0!important;background:rgba(255,255,255,.72)}
.layerWhyText>.readableText,.layerMistake>.readableText,.layerExampleText>.readableText{gap:7px}
.layerWhyText>p,.layerWhyText .readableText p,.layerMistake>p,.layerMistake .readableText p,.layerExampleText>p,.layerExampleText .readableText p{padding:7px 8px}
.qScene>.readableText p,.qSceneTile .readableText p,.qExplain>.readableText p,.termCard>.readableText p,.videoCard>.readableText p{background:#fff;border-left-color:#93c5fd}
.clueCard>.readableText p,.gameModule>.readableText p,.petLine .readableText p,.missionStep>.readableText p,.missionResult .readableText p,.bossQuestion>.readableText p,.bossResult .readableText p,.segmentDrill>.readableText p,.segmentResult .readableText p{background:#fff;border-left-color:#93c5fd}
.missionResult,.bossResult,.segmentResult,.petLine{display:grid;gap:7px;color:#536173;font-weight:850;line-height:1.62}
.missionResult>p,.bossResult>p,.segmentResult>p,.petLine>p{margin:0!important;padding:8px 9px;border-left:4px solid #93c5fd;background:#fff;border-radius:0 var(--radius) var(--radius) 0;color:#334155!important;line-height:1.72!important}
.supportDetails,.practiceDetails,.highlightDetails{border:1px solid #d8e0ea;background:#fff;border-radius:var(--radius);margin:12px 0}
.supportDetails>summary,.practiceDetails>summary,.highlightDetails>summary{cursor:pointer;padding:11px 12px;color:#17324a;font-weight:950;line-height:1.35}
.supportDetailsInner{display:grid;gap:10px;padding:0 12px 12px}
.practiceDetails{background:#fbfdff}
.practiceDetails .practiceDivider{margin:0 12px 12px}
.segmentSource,.segmentMore,.segmentPractice{border:1px solid #d8e0ea;background:#fbfdff;border-radius:var(--radius);overflow:hidden}
.segmentSource summary,.segmentMore summary,.segmentPractice summary{cursor:pointer;padding:10px 11px;font-weight:950;color:#17324a}
.segmentSource .miniGrid,.segmentMore>:not(summary),.segmentPractice>:not(summary){margin:10px}

/* Final reading rhythm: give every story card enough air to be read, not skimmed. */
.segmentStack{gap:26px}
.segmentBody{gap:18px;padding:18px}
.segmentCard{box-shadow:0 14px 34px rgba(15,23,42,.08)}
.storyRead{padding:16px;gap:14px}
.storyRead.handcrafted{padding:18px}
.storyOpening,.storySurvival{line-height:1.82!important}
.storyBeatGrid{gap:12px}
.storyBeatGrid div{padding:12px;line-height:1.66}
.storyBeatGrid span{line-height:1.62}
.segmentTakeaway{display:grid;gap:10px}
.segmentTakeaway>div{border-left:4px solid #0ea5e9;background:#fff;border-radius:0 var(--radius) var(--radius) 0;padding:8px 10px}
.segmentTakeaway p,.segmentTakeaway .readableText p{margin:5px 0 0!important;line-height:1.68}
.segmentTakeaway b{display:block;color:#0f3b57;margin-bottom:4px}
.segmentSource summary,.segmentMore summary,.segmentPractice summary{min-height:48px;padding:0 13px;display:flex;align-items:center}
.segmentSource .miniGrid,.segmentMore>:not(summary),.segmentPractice>:not(summary){margin:12px}
.teachBox{padding:14px}
.explainSteps{gap:10px}
.explainSteps li{padding-top:11px;padding-bottom:11px;line-height:1.72}
.sentenceList{gap:10px}
.sentenceRow{padding:11px 12px;line-height:1.72}

/* Persistent clue board */
.keyMark{position:relative}
.keyMark.claimed{background:#fff4bd;border:1px solid #d97706;color:#713f12;box-shadow:inset 0 -2px 0 rgba(217,119,6,.32);padding-right:16px}
.keyMark.claimed:after{content:"✓";position:absolute;right:3px;top:50%;transform:translateY(-52%);font-size:11px;line-height:1;color:#9a3412}
.similarConceptPanel{border:1px solid #cfe0ee;background:#fff;border-radius:var(--radius);padding:12px;margin:12px 0;display:grid;gap:10px}
.similarConceptHead{display:flex;justify-content:space-between;gap:12px;align-items:end;border-bottom:1px solid #e2e8f0;padding-bottom:8px}
.similarConceptHead b{color:#172033;font-size:18px;line-height:1.25}
.similarConceptHead span{color:#526173;font-weight:850;line-height:1.45;text-align:right;max-width:560px}
.similarConceptList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.similarConceptRow{min-width:0;border:1px solid #d8e0ea;border-left:5px solid #0ea5e9;background:#f8fafc;border-radius:0 var(--radius) var(--radius) 0;padding:9px;display:grid;gap:6px}
.similarConceptRow b{display:block;color:#0f3b57;line-height:1.35}
.similarConceptRow>p,.similarConceptRow .readableText p{background:#fff!important;border-left-color:#f59e0b!important;padding:7px 8px!important;line-height:1.75!important}
.similarConceptRow .readableText{gap:6px}
.memoryPanel{border:1px solid #d8e0ea;background:#fffdf7;border-radius:var(--radius);padding:12px;margin:12px 0;display:grid;gap:10px}
.memoryHead{display:flex;justify-content:space-between;gap:12px;align-items:end;border-bottom:1px solid #fde68a;padding-bottom:8px}
.memoryHead b{color:#713f12;font-size:18px;line-height:1.25}
.memoryHead span{color:#526173;font-weight:850;line-height:1.45;text-align:right;max-width:560px}
.memoryGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.memoryCard{min-width:0;border:1px solid #fde68a;border-left:5px solid #f59e0b;background:#fff;border-radius:0 var(--radius) var(--radius) 0;padding:9px;display:grid;gap:6px}
.memoryCard strong{display:block;color:#0f3b57;font-size:22px;line-height:1}
.memoryCard em{display:block;font-style:normal;color:#92400e;font-weight:950;line-height:1.35;background:#fffbeb;border:1px solid #fde68a;border-radius:var(--radius);padding:5px 7px}
.memoryCard .mnemonicLine{margin:0!important;background:#fff8ed!important;border:1px solid #ead7b4!important;border-left:5px solid #b7791f!important;border-radius:0 var(--radius) var(--radius) 0!important;padding:8px 9px!important;color:#344054!important;font-weight:900;line-height:1.7!important}
.memoryCard .mnemonicLine p{margin:0!important;background:transparent!important;border:0!important;padding:0!important;line-height:1.65!important;color:#334155!important}
.memoryCard .mnemonicLine p+p{margin-top:6px!important;padding-top:6px!important;border-top:1px dashed #ead7b4!important}
.memoryCard .mnemonicLine b{display:block;color:#7a4a10;margin-bottom:3px}
.memoryCard>p,.memoryCard .readableText p{margin:0!important;background:#f8fafc!important;border-left-color:#93c5fd!important;padding:7px 8px!important;line-height:1.68!important;color:#334155!important}
.memoryCard>p b{display:block;color:#14532d;margin-bottom:3px}
.memoryCard .readableText{gap:6px}
.clueBoard{margin:14px 0 0;border:1px solid #d8e0ea;background:#f8fafc;border-radius:var(--radius);padding:10px;display:grid;gap:10px}
.clueBoardHead{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center}
.clueBoardHead b{display:block;color:#172033;font-size:18px;line-height:1.25}
.clueBoardHead span{display:block;color:#526173;font-weight:800;line-height:1.45;margin-top:3px}
.clueBoardHead strong{display:inline-flex;align-items:center;justify-content:center;min-width:54px;min-height:34px;border-radius:999px;background:#253044;color:#fff;font-size:14px}
.clueBoardHead i{font-style:normal}
.clueList{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}
.clueCard,.emptyClue{border:1px solid #cbd5e1;background:#fff;border-radius:var(--radius);padding:9px;line-height:1.5}
.clueCard{border-left:5px solid #d97706}
.clueCard.clue-red{border-left-color:#dc2626}
.clueCard.clue-blue{border-left-color:#2563eb}
.clueCard.clue-focus{border-left-color:#7c3aed}
.clueCard div{display:flex;justify-content:space-between;gap:8px;align-items:center}
.clueCard b{color:#172033}
.clueCard span{display:inline-flex;align-items:center;min-height:24px;border:1px solid #d8e0ea;background:#f8fafc;border-radius:999px;padding:0 8px;color:#334155;font-size:12px;font-weight:900;white-space:nowrap}
.clueCard p{margin:7px 0 0!important;white-space:normal!important;color:#334155;font-weight:800}
.clueCard em{display:block;margin-top:6px;color:#64748b;font-style:normal;font-size:12px;font-weight:800}
.emptyClue{border-style:dashed;color:#526173;font-weight:900}
.clueMapHead{display:flex;justify-content:space-between;gap:8px;align-items:center;border-top:1px solid #d8e0ea;padding-top:10px}
.clueMapHead b{color:#172033}
.clueMapHead span{color:#526173;font-weight:800;font-size:13px;line-height:1.45}
.miniRuleMap{display:flex;gap:8px;align-items:stretch}
.mapNode{flex:1;min-width:0;border:1px solid #cbd5e1;background:#fff;border-radius:var(--radius);padding:9px;line-height:1.45}
.mapNode b{display:block;color:#1d4ed8;margin-bottom:4px}
.mapNode span{display:block;color:#334155;font-weight:800}
.mapArrow{display:grid;place-items:center;color:#64748b;font-style:normal;font-weight:900}
.clueDock{display:none}
.clueDrawer{position:fixed;inset:0;z-index:80;display:none;background:rgba(15,23,42,.42)}
.clueDrawer.show{display:block}
.clueDrawerPanel{position:absolute;left:0;right:0;bottom:0;max-height:78vh;overflow:auto;background:#fff;border-radius:8px 8px 0 0;padding:10px;box-shadow:0 -18px 44px rgba(15,23,42,.24)}
.clueDrawerTop{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:8px}
.clueDrawerTop b{color:#172033;font-size:18px}
.clueDrawerBody .clueBoardHead{grid-template-columns:minmax(0,1fr) auto}

@media(max-width:700px){
  .app{padding-bottom:72px}
  .plainLessonHead{display:block}
  .plainLessonHead strong{margin-top:8px}
  .zeroPreludeGrid{grid-template-columns:1fr}
  .plainFlow{grid-template-columns:1fr}
  .simpleAskList div{grid-template-columns:1fr}
  .unitRuleGate>div:first-child{display:block}
  .unitRuleGate>div:first-child span{display:block;margin-top:4px}
  .gatePath{grid-template-columns:1fr}
  .beginnerLayerHead{display:block}
  .beginnerLayerHead span{display:block;margin-top:4px}
  .layerExplainGrid,.layerExample,.foundationGrid{grid-template-columns:1fr}
  .whyPanel{grid-template-columns:1fr}
  .foundationHead{display:block}
  .foundationHead span{display:block;margin-top:4px}
  .foundationMatrix div{grid-template-columns:1fr}
  .foundationBriefHead{display:block}
  .foundationBriefHead span{display:block;margin-top:3px;text-align:left}
  .foundationBriefGrid{grid-template-columns:1fr}
  .similarConceptHead{display:block}
  .similarConceptHead span{display:block;margin-top:4px;text-align:left;max-width:none}
  .similarConceptList{grid-template-columns:1fr}
  .memoryHead{display:block}
  .memoryHead span{display:block;margin-top:4px;text-align:left;max-width:none}
  .memoryGrid{grid-template-columns:1fr}
  .storyReadHead{display:block}
  .storyReadHead strong{margin-top:7px}
  .storyBeatGrid{grid-template-columns:1fr}
  .segmentDrillHead{display:block}
  .segmentDrillHead strong{margin-top:7px}
  .segmentDrillOptions{grid-template-columns:1fr}
  .layerExample i{height:14px;transform:rotate(90deg)}
  .ruleLensHead{display:block}
  .ruleLensHead strong{margin-top:7px}
  .lensGrid{grid-template-columns:1fr}
  .clueBoardHead{grid-template-columns:minmax(0,1fr) auto}
  .clueBoardHead .small{grid-column:1/-1;width:100%}
  .clueList{grid-template-columns:1fr}
  .clueMapHead{display:block}
  .clueMapHead span{display:block;margin-top:4px}
  .miniRuleMap{display:grid;grid-template-columns:1fr;gap:6px}
  .mapArrow{height:14px;transform:rotate(90deg)}
  .clueDock{display:flex;position:static;min-height:48px;margin:12px 0;align-items:center;justify-content:center;gap:8px;background:#253044;color:#fff;border:1px solid rgba(255,255,255,.25);box-shadow:0 8px 20px rgba(15,23,42,.16)}
  .clueDock b{color:#facc15}
  .clueDock span{color:#dbeafe;font-size:12px}
}

/* Calm study palette: reduce rainbow panels and make hierarchy quieter. */
:root{
  --ink:#1f2933;
  --muted:#667085;
  --blue:#2f5f73;
  --deep:#243746;
  --green:#2f7d55;
  --orange:#b86b16;
  --red:#b42318;
  --line:#d9e0e7;
  --paper:#f7f5ef;
  --surface:#ffffff;
  --surface-soft:#f6f8fa;
  --surface-warm:#fff8ed;
  --surface-cool:#eef4f6;
  --accent:#b7791f;
  --accent-soft:#fff4dd;
}
body{
  background:#f3f5f7;
  color:var(--ink);
}
.hero,
.courseMap,
.sourceBridge,
.sourceTrace,
.qScene,
.archivePanel,
.cultivationPanel{
  background:var(--surface);
  border-color:var(--line);
  box-shadow:0 12px 28px rgba(31,41,51,.08);
}
.hero{
  background:linear-gradient(180deg,#ffffff 0,#f6f8fa 100%);
}
.posterHero{
  background:#eef4f6;
  border-color:#c8d6df;
}
.posterHero:before,
.sceneBoard{
  border-color:var(--deep);
}
.posterHead,
.segmentHead{
  background:#eef4f6!important;
  border-bottom-color:var(--line);
}
h1,
.sectionTitle h2,
.lessonTitle,
.panel h3,
.segmentHead b,
.courseMapHead b,
.sourceBridge h3,
.sourceTraceHead b,
.unitGuideHead b,
.archiveHead b,
.storyReadHead b,
.plainLessonHead b,
.beginnerLayerHead b,
.foundationHead b{
  color:var(--deep);
}
.lead,
.lessonSubtitle,
.courseMapGrid p,
.sourceBridge p,
.sourceTraceHead p,
.traceGrid p,
.unitGuideHead span,
.storyReadHead span,
.storyOpening,
.storySurvival,
.plainLessonHead span,
.readableText p{
  color:#344054!important;
}
.tab,
.ghost,
.small,
.highlightModeBtn{
  border-color:#c9d5dd;
  color:var(--blue);
}
.tab.active,
.primary,
.highlightModeBtn.active,
.sourceTraceHead span,
.plainLessonHead strong,
.clueBoardHead strong,
.segmentDrillHead strong{
  background:var(--deep);
  color:#fff;
}
.eyebrow,
.courseMapHead span,
.fragmentShelf span,
.memoryCard em{
  background:var(--accent-soft);
  border-color:#e4c37a;
  color:#7a4a10;
}
.pill,
.highlightLegend,
.sceneGrid,
.qSceneGrid,
.pathStep,
.miniPanel,
.unitGuide,
.beginnerLayer,
.foundationPanel,
.foundationBrief,
.clueBoard,
.supportDetails,
.practiceDetails,
.highlightDetails,
.segmentSource,
.segmentMore,
.segmentPractice{
  background:var(--surface-soft);
  border-color:var(--line);
}
.panel,
.main,
.side,
.card,
.segmentCard,
.conceptCard,
.formulaCard,
.similarConceptPanel,
.memoryPanel,
.plainTerms,
.plainFlow article{
  background:var(--surface);
  border-color:var(--line);
  box-shadow:0 10px 24px rgba(31,41,51,.06);
}
.termCard,
.bookCard,
.outMission,
.plainExample{
  border-left-color:var(--green);
}
.practiceCard,
.formulaCard,
.sentenceRow,
.plainTerms span,
.plainTerms article,
.labeledReadable>p,
.labeledReadable .readableText p{
  border-left-color:var(--accent);
}
.qCard,
.chapterCard,
.conceptCard,
.sourceBridge,
.sourceTrace,
.plainLesson{
  border-left-color:var(--blue);
}
.readPanel,
.formulaCard,
.qExplain,
.memoryPanel{
  background:#fffdf8;
}
.plainLesson,
.zeroPrelude{
  background:var(--surface);
  border-color:var(--line);
  box-shadow:0 10px 24px rgba(31,41,51,.07);
}
.zeroPrelude,
.teachBox,
.layerCurrentWhy{
  background:var(--surface-warm);
  border-color:#ead7b4;
}
.zeroPreludeHead,
.memoryHead{
  border-bottom-color:#ead7b4;
}
.zeroPreludeHead b,
.zeroPreludeGrid b,
.foundationGrid b,
.whyPanel b,
.memoryHead b{
  color:#7a4a10;
}
.storyRead{
  background:var(--surface);
  border-color:var(--line);
  border-left-color:var(--deep);
  box-shadow:0 10px 24px rgba(31,41,51,.07);
}
.storyRead.handcrafted{
  background:var(--surface);
  border-left-color:var(--blue);
  box-shadow:0 10px 24px rgba(31,41,51,.07);
}
.storyRead.handcrafted .storyReadHead span{
  color:var(--muted);
}
.storyRead.handcrafted .storyReadHead strong{
  background:var(--deep);
  border-color:var(--deep);
}
.storyOpening,
.storySurvival{
  background:#f8fafb;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:10px 12px;
}
.storyOpening b,
.storySurvival b{
  color:#7a4a10;
}
.segmentTermBridge{
  border:1px solid var(--line);
  background:#f8fafb;
  border-radius:var(--radius);
  padding:10px;
  display:grid;
  gap:9px;
}
.segmentTermHead{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}
.segmentTermHead b{
  color:var(--deep);
  font-size:16px;
}
.segmentTermHead span{
  color:var(--muted);
  font-weight:800;
  line-height:1.45;
}
.segmentTermGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.segmentTermGrid article{
  border:1px solid var(--line);
  border-left:4px solid var(--accent);
  background:#fff;
  border-radius:0 var(--radius) var(--radius) 0;
  padding:8px 10px;
  min-width:0;
}
.segmentTermGrid strong{
  display:block;
  color:var(--blue);
  margin-bottom:4px;
  overflow-wrap:anywhere;
}
.segmentTermGrid .readableText p{
  margin:0!important;
  background:transparent!important;
  border:0!important;
  padding:0!important;
  line-height:1.55!important;
}
.storyRead.handcrafted .storySurvival{
  background:#f8fafb;
  border-color:var(--line);
}
.storyBeatGrid div,
.storyBeatGrid div:nth-child(3),
.storyBeatGrid div:nth-child(4),
.storyBeatGrid div:nth-child(5),
.storyBeatGrid div:nth-child(6),
.storyBeatGrid div:nth-child(7),
.storyBeatGrid div:nth-child(8){
  background:var(--surface-soft);
  border-color:var(--line);
}
.storyBeatGrid b,
.storyBeatGrid div:nth-child(3) b,
.storyBeatGrid div:nth-child(4) b,
.storyBeatGrid div:nth-child(5) b,
.storyBeatGrid div:nth-child(6) b,
.storyBeatGrid div:nth-child(7) b,
.storyBeatGrid div:nth-child(8) b,
.plainFlow b,
.foundationMatrix b,
.mapNode b,
.courseMapGrid strong,
.traceGrid strong{
  color:var(--blue);
}
.storyBeatGrid>div>p,
.storyBeatGrid .readableText p,
.readableText p,
.foundationMatrix div>.readableText p,
.conceptCard>.readableText p,
.formulaCard>.readableText p{
  background:#ffffff!important;
  border-left-color:#c8d6df!important;
}
.keyMark-box,
.keyMark.claimed{
  background:#fff2cc;
  border-color:#d6a642;
  color:#6f3f08;
}
.keyMark-blue{
  background:#e8f3f5;
  border-color:#8db5c2;
  color:#25586a;
}
.keyMark-focus{
  background:#f0edf7;
  border-color:#b8a7d6;
  color:#58418a;
}
.keyMark-red{
  color:#9f1f17;
  text-decoration-color:#c24136;
}
.cultivationHead b,
.archiveGrid h4,
.plainTerms b,
.plainExample b,
.termLine b,
.similarConceptRow b,
.memoryCard strong,
.clueCard b{
  color:var(--deep);
}
.cultivationHead strong,
.archiveHead strong{
  background:var(--deep);
}
.cultivationPanel{
  border-width:1px;
}
.outMission{
  background:var(--surface);
  border-color:var(--line);
  border-left:6px solid var(--green);
}
.outMissionHead{
  background:#eef7f0;
  border-bottom-color:#cfe3d5;
}
.segmentDrill,
.missionCompact span,
.gatePath span,
.layerExplainGrid article,
.foundationGrid article,
.whyPanel div,
.simpleAskList span,
.mapNode,
.clueCard,
.emptyClue{
  background:var(--surface);
  border-color:var(--line);
}
.segmentDrill.done,
.missionCompact span.done,
.opt.correct,
.segmentDrillOpt.correct{
  background:#edf8f1;
  border-color:#8fc7a5;
  color:#1f6b43;
}
.segmentDrill.miss,
.opt.wrong,
.segmentDrillOpt.wrong,
.layerExplainGrid .layerMistake,
.layerWarning{
  background:#fff1ef;
  border-color:#f0b8b0;
  color:#9f1f17!important;
}
.layerExplainGrid .layerExampleText,
.plainExample{
  background:#edf8f1;
  border-color:#8fc7a5;
  color:#1f6b43!important;
}
.simpleAskList i,
.plainTerms span,
.plainTerms article,
.zeroPreludeLines p,
.sentenceRow{
  background:#fff8ed;
  border-color:#ead7b4;
  color:#344054;
}
.simpleAskList b{
  background:#e8f3f5;
  border-color:#c8d6df;
  color:var(--blue);
}
.ruleLens{
  background:#26323d;
  border-color:#26323d;
  box-shadow:0 12px 28px rgba(31,41,51,.14);
}
.lensGrid div{
  border-color:rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
}
.lensGrid b,
.rulePremise b,
.ruleLensHead strong{
  color:#f4d28a;
}
@media(max-width:700px){
  .questionStudyHead{display:block}
  .questionStudyHead strong{margin-top:8px}
  .questionStudyGrid,.optionReview>div,.qCard .options{grid-template-columns:1fr}
  .questionDoBlock{padding:10px}
  .questionPrompt h3{font-size:17px}
  .clueDock{
    background:var(--deep);
    border-color:var(--deep);
  }
  .clueDock b{color:#f4d28a}
  .clueDock span{color:#d8e7ee}
}

/* Reading clarity pass: fewer colors, stronger contrast, steadier hierarchy. */
:root{
  --ink:#172033;
  --muted:#475467;
  --blue:#285568;
  --deep:#1f3342;
  --green:#276c49;
  --accent:#9a5f14;
  --red:#a8241a;
  --line:#d4dde6;
  --paper:#eef2f5;
  --surface:#ffffff;
  --surface-soft:#f7f9fb;
  --surface-warm:#fff8ea;
  --accent-soft:#fff1cc;
}
body{
  background:#eef2f5!important;
  color:var(--ink)!important;
}
.hero,
.courseMap,
.sourceBridge,
.sourceTrace,
.archivePanel,
.cultivationPanel,
.gameHub,
.sectMap,
.main,
.side,
.card,
.panel,
.segmentCard,
.plainLesson,
.beginnerLayer,
.foundationPanel,
.memoryPanel,
.questionStudy,
.questionDoBlock,
.qScene,
.answerBox,
.qExplain{
  background:var(--surface)!important;
  border-color:var(--line)!important;
  box-shadow:0 8px 20px rgba(23,32,51,.06)!important;
}
.hero,
.posterHero,
.posterHead,
.segmentHead,
.qScene,
.sceneArt,
.sceneGrid,
.qSceneGrid,
.sourceTrace,
.sourceBridge,
.archivePanel,
.gameHub,
.sectMap{
  background:var(--surface)!important;
}
h1,
.sectionTitle h2,
.lessonTitle,
.panel h3,
.segmentHead b,
.courseMapHead b,
.sourceBridge h3,
.sourceTraceHead b,
.unitGuideHead b,
.archiveHead b,
.storyReadHead b,
.plainLessonHead b,
.beginnerLayerHead b,
.foundationHead b,
.questionStudyHead b,
.questionPrompt>b,
.choiceHead b,
.qCard h3,
.termCard strong,
.peakCard h3{
  color:var(--deep)!important;
}
.lead,
.lessonSubtitle,
.sectionTitle p,
.courseMapGrid p,
.sourceBridge p,
.sourceTraceHead p,
.traceGrid p,
.unitGuideHead span,
.storyReadHead span,
.plainLessonHead span,
.beginnerLayerHead span,
.foundationHead span,
.questionStudyHead span,
.questionPrompt h3,
.optionReview span,
.termExplain,
.footer,
.empty{
  color:var(--muted)!important;
}
.readableText p,
.paragraphs p,
.plainFlow p,
.plainExample p,
.zeroPreludeGrid p,
.foundationGrid p,
.layerExplainGrid p,
.layerCurrentWhy p,
.questionStudyGrid>article,
.optionReview article,
.storyOpening,
.storySurvival,
.storyBeatGrid span,
.miniPanel p,
.termCard p,
.qExplain,
.answerBox,
.sentenceRow,
.archiveGrid p,
.missionStep p,
.segmentDrill p,
.sourceTraceHead p{
  color:#243044!important;
  background:#ffffff!important;
  line-height:1.82!important;
}
.stat,
.pill,
.controls,
.pathStep,
.miniPanel,
.sceneTile,
.qSceneTile,
.unitGuide,
.foundationBrief,
.clueBoard,
.supportDetails,
.practiceDetails,
.highlightDetails,
.segmentSource,
.segmentMore,
.segmentPractice,
.plainTerms,
.plainFlow article,
.storyBeatGrid div,
.storyBeatGrid div:nth-child(3),
.storyBeatGrid div:nth-child(4),
.storyBeatGrid div:nth-child(5),
.storyBeatGrid div:nth-child(6),
.storyBeatGrid div:nth-child(7),
.storyBeatGrid div:nth-child(8),
.layerExplainGrid article,
.foundationGrid article,
.foundationMatrix b,
.foundationMatrix span,
.foundationMatrix em,
.foundationBriefGrid span,
.foundationBriefGrid article,
.resourceGrid span,
.attrGrid span,
.archiveGrid article,
.gameModule,
.missionStep,
.segmentDrill,
.missionCompact span,
.gatePath span,
.mapNode,
.clueCard,
.emptyClue,
.bossQuestion,
.questionPrompt{
  background:var(--surface-soft)!important;
  border-color:var(--line)!important;
  color:#243044!important;
}
.tab,
.ghost,
.small,
.highlightModeBtn,
.missionOpt,
.artifactCard,
.cardChoice,
.bossChoice,
.opt,
.segmentDrillOpt{
  background:#ffffff!important;
  border-color:#c8d2dc!important;
  color:var(--deep)!important;
}
.tab.active,
.primary,
.highlightModeBtn.active,
.sourceTraceHead span,
.plainLessonHead strong,
.clueBoardHead strong,
.segmentDrillHead strong,
.questionStudyHead strong,
.archiveHead strong,
.cultivationHead strong,
.gameHubHead strong,
.outMissionHead strong{
  background:var(--deep)!important;
  border-color:var(--deep)!important;
  color:#ffffff!important;
}
.eyebrow,
.courseMapHead span,
.fragmentShelf span,
.memoryCard em,
.plainTerms span,
.plainTerms article,
.zeroPreludeLines p,
.labeledReadable>p,
.labeledReadable .readableText p,
.foundationNote,
.layerCurrentWhy,
.teachBox{
  background:var(--surface-warm)!important;
  border-color:#e5cf9f!important;
  color:#5f3b09!important;
}
.memoryPanel,
.zeroPrelude{
  background:#fffaf0!important;
  border-color:#e5cf9f!important;
}
.memoryHead,
.zeroPreludeHead{
  border-bottom-color:#e5cf9f!important;
}
.memoryHead b,
.zeroPreludeHead b,
.zeroPreludeGrid b,
.memoryCard em,
.plainTerms b,
.storyOpening b,
.storySurvival b{
  color:#6f430b!important;
}
.memoryCard,
.segmentTermGrid article{
  background:#ffffff!important;
  border-color:#e1d4bd!important;
  border-left-color:var(--accent)!important;
}
.memoryCard strong,
.storyBeatGrid b,
.storyBeatGrid div:nth-child(3) b,
.storyBeatGrid div:nth-child(4) b,
.storyBeatGrid div:nth-child(5) b,
.storyBeatGrid div:nth-child(6) b,
.storyBeatGrid div:nth-child(7) b,
.storyBeatGrid div:nth-child(8) b,
.plainFlow b,
.foundationMatrix b,
.mapNode b,
.courseMapGrid strong,
.traceGrid strong,
.gatePath b,
.foundationBriefGrid b,
.layerExplainGrid b,
.segmentTermGrid strong,
.sceneTile b,
.qSceneTile b,
.questionStudyGrid b{
  color:var(--blue)!important;
}
.termCard,
.bookCard,
.outMission,
.plainExample{
  border-left-color:var(--green)!important;
}
.qCard,
.chapterCard,
.conceptCard,
.sourceBridge,
.sourceTrace,
.plainLesson,
.peakCard{
  border-left-color:var(--blue)!important;
}
.practiceCard,
.formulaCard,
.sentenceRow,
.plainTerms span,
.plainTerms article{
  border-left-color:var(--accent)!important;
}
.keyMark{
  color:inherit!important;
  background:transparent!important;
  border:0!important;
  border-radius:3px!important;
  padding:0 2px!important;
  box-shadow:inset 0 -0.42em #fff0bd!important;
  text-decoration:none!important;
}
.keyMark-box,
.keyMark-blue,
.keyMark-focus,
.keyMark.claimed{
  background:#fff3c4!important;
  border:1px solid #d7b766!important;
  color:#50330a!important;
  box-shadow:inset 0 -2px 0 rgba(154,95,20,.22)!important;
}
.keyMark.claimed{
  padding-right:16px!important;
}
.keyMark-red{
  color:var(--red)!important;
  background:transparent!important;
  box-shadow:inset 0 -0.34em #ffe1dc!important;
  text-decoration:underline!important;
  text-decoration-color:#c64539!important;
  text-decoration-thickness:2px!important;
  text-underline-offset:3px!important;
}
.segmentDrill.done,
.missionCompact span.done,
.missionOpt.correct,
.cardChoice.correct,
.bossChoice.correct,
.opt.correct,
.segmentDrillOpt.correct,
.artifactCard.ready{
  background:#edf8f1!important;
  border-color:#8fbfa2!important;
  color:#185b3a!important;
}
.segmentDrill.miss,
.missionOpt.wrong,
.cardChoice.wrong,
.bossChoice.wrong,
.opt.wrong,
.segmentDrillOpt.wrong,
.layerExplainGrid .layerMistake,
.layerWarning{
  background:#fff2ef!important;
  border-color:#e9aaa2!important;
  color:var(--red)!important;
}
.layerExplainGrid .layerExampleText,
.plainExample{
  background:#edf8f1!important;
  border-color:#8fbfa2!important;
  color:#185b3a!important;
}
.ruleLens{
  background:#ffffff!important;
  border-color:var(--line)!important;
  color:#243044!important;
  box-shadow:0 8px 20px rgba(23,32,51,.06)!important;
}
.ruleLensHead b,
.ruleLensHead span,
.lensGrid b,
.rulePremise b,
.ruleLensHead strong,
.clueDock b{
  color:var(--deep)!important;
}
.ruleLensHead strong,
.clueDock{
  background:var(--surface-soft)!important;
  border-color:var(--line)!important;
  color:var(--deep)!important;
}
.lensGrid div,
.lensGrid>div>p,
.lensGrid .readableText p{
  background:var(--surface-soft)!important;
  border-color:var(--line)!important;
  color:#243044!important;
}
button:focus-visible,
.tab:focus-visible,
.ghost:focus-visible,
.small:focus-visible,
input:focus-visible,
select:focus-visible{
  outline:2px solid #7b98a8!important;
  outline-offset:2px!important;
  box-shadow:none!important;
}
.keyMark,
.keyMark-box,
.keyMark-blue,
.keyMark-focus,
.keyMark.claimed{
  background:linear-gradient(to top,#fff0bd 0 42%,transparent 42%)!important;
  border:0!important;
  color:#243044!important;
  box-shadow:none!important;
  padding:0 2px!important;
}
.keyMark.claimed{
  padding-right:15px!important;
}
.keyMark-red{
  background:linear-gradient(to top,#ffe0dc 0 38%,transparent 38%)!important;
  color:var(--red)!important;
  text-decoration:underline!important;
  text-decoration-color:#c64539!important;
  text-decoration-thickness:2px!important;
  text-underline-offset:3px!important;
}