/* Learning shell inherits Peiyu's existing brand and math styles. */
:root { --surface:var(--card); --ink:var(--fg); --accent:var(--a); }
.lf-shell {max-width:1240px;margin:0 auto;padding:0 28px 64px}
.lf-top {display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding:20px 0 15px;border-bottom:1px solid var(--line);margin-bottom:24px}
header.top,header.top.lf-unified-top {flex-wrap:wrap}
.lf-brand {display:flex;align-items:center;gap:9px;color:var(--ink);font-weight:750;text-decoration:none;white-space:nowrap}
.lf-brand img {display:block;width:auto;height:48px;flex-shrink:0}
.lf-nav,.top .hci-nav.lf-nav {display:flex;gap:4px;align-items:center;flex-wrap:wrap;margin-left:auto}
.lf-nav a,.top .lf-nav a {display:inline-flex;min-height:42px;padding:8px 13px;align-items:center;text-decoration:none;font-size:15px;color:var(--muted);border:0;border-radius:6px;background:transparent}
.lf-nav a[aria-current],.top .lf-nav a[aria-current] {color:var(--accent);background:var(--ok-soft);font-weight:700}
.lf-nav a:hover {color:var(--ink);text-decoration:underline}
/* Older junior lessons hide Wiki links until the shared navigation is installed. */
.lf-unified-top .lf-nav a[href$="wiki.html"] {display:inline-flex !important}
.lf-nav-more {display:none;position:relative}
.lf-nav-more summary {cursor:pointer;font-size:14px;min-height:42px;padding:8px 6px;color:var(--muted);white-space:nowrap}
.lf-nav-more>div {position:absolute;right:0;top:100%;z-index:30;min-width:130px;padding:6px;border:1px solid var(--line);border-radius:7px;background:var(--card);box-shadow:0 4px 14px #0002}
.lf-nav-more>div a {display:flex;white-space:nowrap}
.lf-nav-more:not([open])>div {display:none}
/* Two quiet, familiar symbols; the inset thumb makes the current theme visible. */
.lf-theme {position:relative;isolation:isolate;display:inline-grid;grid-template-columns:1fr 1fr;align-items:center;flex:0 0 84px;width:84px;height:44px;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--muted);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .18s ease,background-color .18s ease}
.lf-theme::before {content:"";position:absolute;z-index:-1;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/2);border:1px solid var(--line);border-radius:999px;background:var(--card);box-shadow:0 1px 3px color-mix(in srgb,var(--fg) 10%,transparent);transition:transform .22s cubic-bezier(.2,.7,.2,1)}
.lf-theme[aria-checked="true"]::before {transform:translateX(100%)}
.lf-theme-icon {display:grid;place-items:center;transition:color .18s ease}
.lf-theme-icon svg {display:block;width:18px;height:18px}
.lf-theme[aria-checked="false"] .lf-theme-sun {color:var(--b)}
.lf-theme[aria-checked="true"] .lf-theme-moon {color:var(--c)}
@media(hover:hover) {.lf-theme:hover {border-color:var(--accent);background:var(--ok-soft)}}
.lf-theme:focus-visible {outline:3px solid var(--accent);outline-offset:3px}
.lf-theme:active .lf-theme-icon {transform:scale(.94)}
@media(prefers-reduced-motion:reduce) {.lf-theme,.lf-theme::before,.lf-theme-icon {transition:none}}
.lf-search {max-width:700px;margin:0 0 28px;position:relative}
.lf-search form {display:flex;gap:8px;align-items:center}
.lf-search input {width:100%;min-width:0;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:7px;padding:10px 12px;font:inherit}
.lf-search button,.lf-button {border:1px solid var(--accent);border-radius:7px;background:var(--accent);color:var(--card);font:inherit;font-weight:600;cursor:pointer;text-decoration:none;padding:10px 16px;white-space:nowrap;display:inline-flex;align-items:center;min-height:44px}
.lf-button.secondary {background:transparent;color:var(--accent)}
.lf-search-results {border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:12px;margin-top:6px;max-height:420px;overflow:auto}
.lf-search-results a {display:block;padding:10px 8px;text-decoration:none;border-bottom:1px solid var(--line)}
.lf-search-results a:last-child {border:0}
.lf-search-results span {display:block;color:var(--muted);font-size:14px}
.lf-search-results h3 {font-size:14px;color:var(--muted);margin:12px 8px 4px}
.lf-eyebrow {color:var(--muted);font-size:14px;margin:0 0 10px}
.lf-heading {font-size:clamp(27px,3vw,38px);font-weight:750;letter-spacing:-.03em;line-height:1.4;margin:0 0 14px}
.lf-intro {max-width:650px;color:var(--muted);margin:0 0 24px}
.lf-start {display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:38px;margin:36px 0 42px;align-items:start}
.lf-current {padding:28px;border:1px solid var(--line);background:var(--surface);border-radius:12px}
.lf-current h2 {margin:0 0 12px;font-size:24px}
.lf-current p {margin:8px 0 20px}
.lf-current .lf-actions {display:flex;gap:12px;flex-wrap:wrap}
.lf-next {padding-top:5px}
.lf-next h2 {margin:0 0 10px;font-size:19px}
.lf-next ol {margin:0;padding-left:24px;color:var(--muted)}
.lf-next li {margin:12px 0}
.lf-topic-list {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);margin-top:18px}
.lf-topic {padding:24px 24px 24px 0;border-bottom:1px solid var(--line)}
.lf-topic+.lf-topic {padding-left:24px;border-left:1px solid var(--line)}
.lf-topic h3 {font-size:21px;margin:0 0 8px}
.lf-topic p {color:var(--muted);font-size:15px;margin:0 0 14px}
.lf-topic div {display:flex;gap:16px;flex-wrap:wrap}
.lf-resources {display:flex;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:40px;padding-top:18px;font-size:14px}
.lf-tools {margin-top:44px}
.lf-tools h2 {margin:0 0 16px}
.lf-tool-list {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.lf-tool {--tone:var(--a);display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:start;padding:20px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);text-decoration:none;transition:border-color .18s ease,transform .18s ease}
.lf-tool-map {--tone:var(--b)}.lf-tool-lab {--tone:var(--c)}
.lf-tool-icon {display:grid;place-items:center;width:56px;height:56px;border-radius:12px;color:var(--tone);background:color-mix(in srgb,var(--tone) 12%,transparent)}
.lf-tool-icon svg {width:42px;height:42px;overflow:visible}
.lf-tool-body strong {display:block;font-size:18px;margin:2px 0 6px}
.lf-tool-body span {display:block;color:var(--muted);font-size:14px;line-height:1.6}
.lf-tool-go {color:var(--tone);font-size:18px;padding-top:2px;transition:transform .18s ease}
@media(hover:hover) {.lf-tool:hover {border-color:var(--tone)}.lf-tool:hover .lf-tool-go {transform:translateX(3px)}}
@media(prefers-reduced-motion:reduce) {.lf-tool,.lf-tool-go {transition:none}}
/* Tool icons: final frame is the default; .lf-motion + .is-in plays it once. */
.lf-tool-icon svg {fill:none;stroke:var(--tone);stroke-linecap:round;stroke-linejoin:round}
.lf-tool-icon svg {stroke-width:2}
.lf-tool-icon svg * {transform-box:fill-box;transform-origin:center}
.lf-draw {stroke-dasharray:1}
.lf-axis {stroke:var(--muted);stroke-width:1.4;opacity:.45}
.lf-back {stroke:var(--muted);opacity:.45}
.lf-flip rect {fill:var(--surface)}
.lf-node {fill:var(--surface)}
.lf-solid {fill:color-mix(in srgb,var(--tone) 9%,transparent)}
.lf-edge {stroke-width:1.3;opacity:.55}
.lf-cut {fill:color-mix(in srgb,var(--tone) 32%,transparent);stroke-width:1.3}
.lf-knob {fill:var(--tone);stroke:none}
@keyframes lf-draw {from {stroke-dashoffset:1}to {stroke-dashoffset:0}}
@keyframes lf-pop {from {transform:scale(0)}70% {transform:scale(1.25)}to {transform:none}}
@keyframes lf-flip {0%,100% {transform:none}50% {transform:scaleX(0)}}
@keyframes lf-cut {from {transform:translateY(9px)}}
@keyframes lf-knob {from {transform:translateX(-11px)}}
.lf-motion .lf-tool:not(.is-in) .lf-draw {stroke-dashoffset:1}
.lf-motion .lf-tool:not(.is-in) .lf-node {transform:scale(0)}
.lf-motion .lf-tool:not(.is-in) .lf-cut {transform:translateY(9px)}
.lf-motion .lf-tool:not(.is-in) .lf-knob {transform:translateX(-11px)}
.lf-motion .is-in {--ease:cubic-bezier(.2,.7,.2,1)}
.lf-motion .is-in .lf-draw {animation:lf-draw 1.1s var(--ease) var(--d,0s) both}
.lf-motion .is-in .lf-node {animation:lf-pop .5s var(--ease) var(--d,0s) both}
.lf-motion .is-in .lf-flip {animation:lf-flip .7s ease-in-out both}
.lf-motion .is-in .lf-cut {animation:lf-cut 1.4s var(--ease) .1s both}
.lf-motion .is-in .lf-knob {animation:lf-knob 1.4s var(--ease) .1s both}
.lf-clip {aspect-ratio:16/10;max-width:300px;margin:0 0 14px;border-radius:10px;overflow:hidden;background:#f8f4ee;box-shadow:inset 0 0 0 1px var(--line)}
.lf-clip {background-size:cover;background-position:center}
.lf-clip video {display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease}
.lf-clip video.is-playing {opacity:1}
/* Lesson videos are drawn on paper; in dark mode invert lightness but keep the hues. */
:root[data-theme="dark"] .lf-clip {filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.95);box-shadow:inset 0 0 0 1px #d8d3c8}
.lf-courses {display:grid;grid-template-columns:190px minmax(0,1fr);gap:36px}
.lf-book-nav {align-self:start;position:sticky;top:16px;display:grid;gap:8px}
.lf-book-nav a {padding:10px 12px;text-decoration:none;color:var(--muted);border-left:3px solid var(--line)}
.lf-book-nav a[aria-current] {color:var(--accent);border-left-color:var(--accent);font-weight:700}
.lf-chapter {margin:0 0 30px;scroll-margin-top:24px}
.lf-chapter h2 {margin-top:0;border-bottom:1px solid var(--line);padding-bottom:12px}
.lf-lesson-row {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;border-bottom:1px solid var(--line);padding:14px 0;align-items:center}
.lf-lesson-row p {margin:4px 0 0;font-size:14px;color:var(--muted)}
.lf-lesson-row>a {font-weight:650;text-decoration:none}
.lf-lesson-actions {display:flex;gap:14px;font-size:14px;white-space:nowrap}
.lf-footer {font-size:14px;color:var(--muted);border-top:1px solid var(--line);padding-top:24px;margin-top:44px}
.lf-note {color:var(--muted);font-size:14px}
.lf-skip {position:absolute;left:-9999px}.lf-skip:focus {position:fixed;left:10px;top:10px;z-index:500;background:var(--surface);padding:10px}
[data-learning-page] :focus-visible {outline:3px solid var(--hl);outline-offset:3px}
[data-learning-page] .katex-display {max-width:100%;overflow-x:auto;overflow-y:hidden;padding:3px 0}
[data-learning-page] main {min-width:0}
.lf-course-search {margin:0 0 18px;max-width:none}
.lf-course-search>summary {cursor:pointer;color:var(--muted);font-size:14px}
.lf-course-search .lf-search {margin-top:12px}
.lf-global-search {margin:0 0 16px}.lf-global-search>summary {cursor:pointer;color:var(--muted);font-size:14px;min-height:36px;padding:3px 0}.lf-global-search .lf-search {margin:8px 0 18px}
.lf-memory-warning {padding:8px 14px;border-left:3px solid var(--b);font-size:14px}
@media(max-width:760px) {
 .lf-nav,.top .hci-nav.lf-nav {flex-wrap:nowrap;min-width:0;flex:0 0 100%}
 .lf-nav a.hci-link,.top.lf-unified-top .lf-nav a.hci-link {padding:8px 5px;white-space:nowrap;font-size:14px}
 .lf-nav a.lf-nav-secondary,.top .lf-nav a.lf-nav-secondary {display:none}
 .lf-nav-more {display:block}
 .lf-shell {padding:0 16px 40px}.lf-top {gap:8px;padding:14px 0 12px;margin-bottom:18px}.lf-nav,.top .hci-nav.lf-nav {width:100%;margin:0;justify-content:space-between;gap:0}.lf-nav a,.top .lf-nav a {padding:8px 10px;font-size:14px}.lf-theme {margin-left:auto}
 .lf-start {grid-template-columns:1fr;gap:24px;margin:24px 0 32px}.lf-current {padding:20px}.lf-next {padding:0}.lf-next ol {display:block}.lf-topic-list {grid-template-columns:1fr}.lf-topic,.lf-topic+.lf-topic {padding:20px 0;border-left:0}.lf-courses {grid-template-columns:1fr;gap:18px}.lf-book-nav {position:static;display:flex;flex-wrap:wrap;gap:5px}.lf-book-nav a {font-size:14px;padding:8px}.lf-lesson-row {grid-template-columns:1fr;gap:5px}.lf-lesson-actions {padding-bottom:4px}.lf-resources {gap:12px 20px}.lf-tools {margin-top:32px}.lf-tool-list {grid-template-columns:1fr;gap:12px}.lf-tool {padding:16px}.lf-clip {max-width:none}
}
/* Home hero: heading + continue card on the left, lesson-video loop on the right. */
:root {--lf-serif:"Songti SC","STSong","Source Han Serif SC","Noto Serif SC","Noto Serif CJK SC","SimSun",serif}
[data-learning-page] :is(.lf-heading,#learning-app h2,.lf-topic h3,.lf-tool-body strong,.lf-hero-fig strong) {font-family:var(--lf-serif);font-weight:700;letter-spacing:.01em}
.lf-hero {display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:52px;align-items:center;margin:4px 0 36px;padding:20px 0 4px}
.lf-hero .lf-heading {font-size:clamp(32px,3.8vw,48px);line-height:1.32;margin:0 0 18px}
.lf-hero .lf-intro {margin-bottom:28px}
.lf-ink {position:relative;display:inline-block;white-space:nowrap}
.lf-ink svg {position:absolute;left:-3%;bottom:-.2em;width:106%;height:.45em;overflow:visible;fill:none;stroke:var(--b);stroke-width:3.4;stroke-linecap:round;vector-effect:non-scaling-stroke}
.lf-ink path {stroke-dasharray:1;animation:lf-ink 1.1s cubic-bezier(.6,.05,.25,1) .4s both}
@keyframes lf-ink {from {stroke-dashoffset:1}to {stroke-dashoffset:0}}
.lf-hero-fig {margin:0}
.lf-clip.lf-clip-hero {aspect-ratio:4/3;max-width:none;margin:0;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line),0 22px 44px -28px color-mix(in srgb,var(--fg) 40%,transparent)}
.lf-hero-fig figcaption {display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin-top:14px}
.lf-hero-fig figcaption .lf-eyebrow {margin:0}
.lf-hero-fig strong {font-size:19px}
.lf-hero-fig strong i {font-family:Georgia,"Times New Roman",serif}
.lf-hero-fig figcaption a {margin-left:auto;font-size:14px}
.lf-next {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 32px;align-items:center;padding:20px 0;margin:0 0 40px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lf-next h2 {grid-column:1/-1;font-size:17px;margin:0}
.lf-next ol {display:flex;flex-wrap:wrap;gap:12px 28px;list-style:none;margin:0;padding:0;color:var(--muted);font-size:14px}
.lf-next li {display:flex;align-items:center;gap:9px;margin:0}
.lf-next li b {display:grid;place-items:center;flex:0 0 28px;height:28px;border-radius:50%;background:var(--ok-soft);color:var(--a);font-family:var(--lf-serif);font-size:14px}
.lf-next>a {font-size:14px;white-space:nowrap}
@media(prefers-reduced-motion:reduce) {.lf-ink path {animation:none}}
@media(max-width:760px) {
 .lf-hero {grid-template-columns:minmax(0,1fr);gap:28px;padding-top:8px}
 .lf-current .lf-button {white-space:normal;text-align:center}
 .lf-hero .lf-heading {font-size:30px}
 .lf-next {grid-template-columns:1fr;gap:14px;padding:18px 0}.lf-next ol {flex-direction:column;gap:10px}
}

/* 初中学段（junior/）：首页配图是内联 SVG，课程树里未上线的节变灰 */
.lf-hero-svg {aspect-ratio:4/3;border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line),0 22px 44px -28px color-mix(in srgb,var(--fg) 40%,transparent);display:grid;place-items:center;overflow:hidden}
.lf-hero-svg svg {width:100%;height:100%}
/* SVG units shrink on mobile and in the two-column A4 hero. */
.lf-hero-svg text {font-size:24px;text-anchor:middle;fill:var(--muted)}
.lf-jh-axis line,.lf-jh-axis path {stroke:var(--fg);stroke-width:2.5;fill:none}
.lf-jh-axis path {fill:var(--fg)}
.lf-jh-arc {fill:none;stroke-width:3;stroke-dasharray:8 7}
.lf-jh-pos {stroke:var(--a)} .lf-jh-neg {stroke:var(--no)}
.lf-hero-svg text.lf-jh-tag {font-size:24px;font-weight:700}
.lf-hero-svg text.lf-jh-pos {fill:var(--a);stroke:none} .lf-hero-svg text.lf-jh-neg {fill:var(--no);stroke:none}
.lf-jh-dot.lf-jh-pos {fill:var(--a)} .lf-jh-dot.lf-jh-neg {fill:var(--no)}
.lf-jh-zero {fill:var(--surface);stroke:var(--fg);stroke-width:2.5}
.lf-hero-svg text.lf-jh-note {font-size:30px;font-weight:700;fill:var(--fg);font-family:var(--lf-serif)}
.lf-hero-svg text.lf-jh-sub {font-size:24px}
.lf-jh-tree {margin-top:40px}
.lf-home-grade {display:flex;align-items:center;gap:12px;margin:0 0 16px;color:var(--muted);font-size:15px}
.lf-home-grade select {min-height:44px;padding:8px 32px 8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit}
.lf-home-grade select:focus-visible {outline:2px solid var(--accent);outline-offset:3px}
.lf-jh-todo span {color:var(--muted)}
.lf-jh-seen {display:inline-block;margin-left:6px;padding:0 7px;border-radius:999px;background:var(--ok-soft);color:var(--a);font-size:14px;font-weight:600;vertical-align:2px}

/* 小学学段（primary/）：年级选择、低年级家长说明、单元首页入口 */
.lf-grade-nav {display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.lf-grade-btn {min-height:42px;padding:8px 16px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font:inherit;font-size:15px;font-weight:650;cursor:pointer;transition:border-color .15s ease,background-color .15s ease,color .15s ease}
.lf-grade-btn[aria-pressed="true"] {border-color:var(--accent);background:var(--accent);color:var(--card)}
.lf-grade-btn:hover:not([aria-pressed="true"]) {border-color:var(--accent);color:var(--accent)}
.lf-parent-note {display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;padding:12px 16px;margin:0 0 20px;border:1px solid var(--line);border-left:4px solid var(--b);border-radius:10px;background:var(--surface);font-size:14px;line-height:1.55;color:var(--muted)}
.lf-parent-note.is-low {background:color-mix(in srgb,var(--b) 8%,var(--surface))}
.lf-parent-note strong {color:var(--ink);font-weight:700}
.lf-unit-head {display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:4px}
.lf-unit-head h2 {margin:0;border:0;padding:0}
.lf-unit-badge {font-size:14px;font-weight:650;text-decoration:none;color:var(--accent);white-space:nowrap}
.lf-unit-badge.is-todo {color:var(--muted);font-weight:500}
.lf-unit-row {background:color-mix(in srgb,var(--accent) 5%,transparent);padding-left:12px;padding-right:12px;border-radius:8px}
@media(max-width:760px) {
  .lf-grade-nav {gap:6px}
  .lf-grade-btn {padding:7px 12px;font-size:14px;min-height:38px}
  .lf-parent-note {padding:10px 12px;font-size:14px}
}

/* PY-191 初中、小学字体看齐高中：课程树的长说明用常规字重（高中页没有 data-stage，不变） */
[data-stage] .lf-lesson-row>a p {font-weight:400}
/* 小学概念与易错卡页套学习外壳：用外壳的导航和主题开关，标题与高中知识库同款 */
.concept-page[data-learning-page] :is(.cc-nav,#cc-theme) {display:none}
.concept-page .lf-global-search>summary {padding:10px 0}
.concept-page button.lf-theme {min-height:0;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--muted)}
.concept-page[data-learning-page] .cc-grades {gap:8px}
.concept-page[data-learning-page] .cc-grades a {padding:8px 16px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font-size:15px;font-weight:650;text-decoration:none}
.concept-page[data-learning-page] .cc-grades a[aria-current] {border-color:var(--accent);background:var(--accent);color:var(--card)}
.concept-page #learning-app>h1 {font-family:var(--lf-serif);font-size:clamp(27px,3vw,38px);font-weight:700;line-height:1.4;margin:0 0 14px}
.concept-page #learning-app>.cc-intro {color:var(--muted)}

/* PY-390: preserve each stage clip's full figure, including its mathematical labels. */
.lf-clip.lf-stage-clip {aspect-ratio:4/3}
.lf-home-motion {font:inherit;font-size:14px;min-height:44px;padding:6px 12px;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:8px;cursor:pointer}
.lf-home-motion:focus-visible {outline:2px solid var(--a);outline-offset:3px}
.lf-home-motion[hidden] {display:none}
@media (prefers-color-scheme:dark) {
 :root:not([data-theme="light"]) .lf-clip {filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.95);box-shadow:inset 0 0 0 1px #d8d3c8}
}
/* Course video duration (PY-385). */
.lf-vid-tag {display:inline-block;margin-left:6px;padding:0 7px;border:1px solid currentColor;border-radius:999px;color:var(--a);font-size:14px;font-weight:600;vertical-align:2px;white-space:nowrap}