/* Teacher Studio 介绍页 · Glass 版 v2
   视觉：半透明材质 + 0.5px 细边 + 柔和阴影，Apple 蓝强调色，系统字体，浅色/深色跟随系统（可手动切换）。
   动效：沿用旧版的编排——备课夹弹页、备课夹口跳页、学科书架、整面黑板擦写——用玻璃语言重做。
   纯 CSS，无外部字体与 CDN；动画只用 transform / opacity。 */

/* ---------- tokens · light ---------- */
:root {
  color-scheme: light;
  --stage: #f5f5f7;
  --bg: rgb(250 250 252 / .8);
  --panel: rgb(255 255 255 / .8);
  --panel-solid: #ffffff;
  --panel-2: rgb(118 118 128 / .08);
  --panel-3: rgb(118 118 128 / .12);
  --hover: rgb(0 0 0 / .045);
  --line: rgb(0 0 0 / .08);
  --line-strong: rgb(0 0 0 / .14);
  --ink: #1d1d1f; --ink-2: #424245; --muted: #6e6e73;
  --accent: #006cdc; --accent-ink: #ffffff; --accent-soft: rgb(0 122 255 / .1); --accent-on-soft: #0062cc; --accent-line: rgb(0 122 255 / .24);
  --btn-bg: #0071e3;
  --ok: #248a3d; --ok-soft: rgb(52 199 89 / .1); --warn: #a15a00; --warn-soft: rgb(255 149 0 / .1); --danger: #c4261d; --danger-soft: rgb(255 59 48 / .09);
  --chip: rgb(118 118 128 / .12);
  --t-single: #4f86c6; --t-fill: #4a9a97; --t-solve: #b8863f;
  --hi: rgb(255 255 255 / .6);
  --shadow: 0 0 0 .5px rgb(0 0 0 / .06), 0 1px 2px rgb(0 0 0 / .04), 0 10px 30px -14px rgb(0 0 0 / .14);
  --shadow-win: 0 0 0 .5px rgb(0 0 0 / .16), 0 36px 80px -32px rgb(0 0 0 / .3), 0 10px 26px -12px rgb(0 0 0 / .14);
  --blur: saturate(1.8) blur(40px);
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter Tight", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter Tight", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", sans-serif;
  --font-num: "SF Mono", ui-monospace, "JetBrains Mono", Consolas, monospace;
  --font-math: "STIX Two Math", "Cambria Math", "Times New Roman", "Songti SC", "SimSun", serif;
  --font-paper: "SimSun", "Songti SC", "Noto Serif SC", "STIX Two Math", "Cambria Math", serif;
  --ease: cubic-bezier(.25, .1, .25, 1);
  --ease-enter: cubic-bezier(.2, .9, .3, 1);
  --viz-bg: rgb(118 118 128 / .09);
  --nav-h: 76px; /* 固定导航占用的高度：所有吸顶/整屏版式共用 */
}

/* ---------- tokens · dark（跟随系统，且未手动选浅色） ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --stage: #1c1c1e;
    --bg: rgb(36 36 38 / .8);
    --panel: rgb(52 52 54 / .66);
    --panel-solid: #2c2c2e;
    --panel-2: rgb(118 118 128 / .18);
    --panel-3: rgb(118 118 128 / .26);
    --hover: rgb(255 255 255 / .06);
    --line: rgb(255 255 255 / .09); --line-strong: rgb(255 255 255 / .18);
    --ink: #f5f5f7; --ink-2: #d1d1d6; --muted: #a1a1a6;
    --accent: #0a84ff; --accent-soft: rgb(10 132 255 / .18); --accent-on-soft: #64b5ff; --accent-line: rgb(10 132 255 / .4);
    --btn-bg: #0a7cf0;
    --ok: #4cc766; --ok-soft: rgb(48 209 88 / .13); --warn: #e0a03a; --warn-soft: rgb(255 159 10 / .13); --danger: #ff6b61; --danger-soft: rgb(255 69 58 / .13);
    --chip: rgb(118 118 128 / .24);
    --t-single: #6fa3dd; --t-fill: #66b5b2; --t-solve: #d6a560;
    --hi: rgb(255 255 255 / .12);
    --shadow: 0 0 0 .5px rgb(255 255 255 / .06), 0 12px 34px -14px rgb(0 0 0 / .55);
    --shadow-win: 0 0 0 .5px rgb(0 0 0 / .6), 0 40px 90px -30px rgb(0 0 0 / .8), 0 0 0 .5px rgb(255 255 255 / .08) inset;
        --viz-bg: rgb(118 118 128 / .16);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --stage: #1c1c1e;
  --bg: rgb(36 36 38 / .8);
  --panel: rgb(52 52 54 / .66);
  --panel-solid: #2c2c2e;
  --panel-2: rgb(118 118 128 / .18);
  --panel-3: rgb(118 118 128 / .26);
  --hover: rgb(255 255 255 / .06);
  --line: rgb(255 255 255 / .09); --line-strong: rgb(255 255 255 / .18);
  --ink: #f5f5f7; --ink-2: #d1d1d6; --muted: #a1a1a6;
  --accent: #0a84ff; --accent-soft: rgb(10 132 255 / .18); --accent-on-soft: #64b5ff; --accent-line: rgb(10 132 255 / .4);
  --btn-bg: #0a7cf0;
  --ok: #4cc766; --ok-soft: rgb(48 209 88 / .13); --warn: #e0a03a; --warn-soft: rgb(255 159 10 / .13); --danger: #ff6b61; --danger-soft: rgb(255 69 58 / .13);
    --chip: rgb(118 118 128 / .24);
  --t-single: #6fa3dd; --t-fill: #66b5b2; --t-solve: #d6a560;
  --hi: rgb(255 255 255 / .12);
  --shadow: 0 0 0 .5px rgb(255 255 255 / .06), 0 12px 34px -14px rgb(0 0 0 / .55);
  --shadow-win: 0 0 0 .5px rgb(0 0 0 / .6), 0 40px 90px -30px rgb(0 0 0 / .8), 0 0 0 .5px rgb(255 255 255 / .08) inset;
    --viz-bg: rgb(118 118 128 / .16);
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; min-height: 100vh; background: var(--stage); background-attachment: fixed; color: var(--ink); font: 400 16px/1.7 var(--font-ui); letter-spacing: .01em; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, canvas, iframe, svg { max-width: 100%; }
button { font: inherit; color: inherit; letter-spacing: inherit; }
a { color: inherit; }
h1, h2, h3, h4, h5, p, figure, ul { margin: 0; padding: 0; }
ul { list-style: none; }
i { font-family: var(--font-math); font-style: italic; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
kbd { font-family: var(--font-num); font-size: 10.5px; padding: 0 5px; border-radius: 4px; border: .5px solid var(--line-strong); color: var(--muted); background: var(--panel); line-height: 1.5; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.ic { width: 1em; height: 1em; flex: none; display: inline-block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 8px 14px; border-radius: 8px; background: var(--panel-solid); box-shadow: var(--shadow); transition: top .2s var(--ease); }
.skip:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* 背景为中性灰底，不再使用彩色光斑 */
main { position: relative; overflow-x: clip; }
.sec { position: relative; padding: 96px 0; }
.sec.tight { padding: 24px 0 72px; }

.wrap { width: min(1120px, calc(100% - 32px)); margin: 0 auto; }
.wrap.narrow { width: min(820px, calc(100% - 32px)); }
.wrap.wide { width: min(1160px, calc(100% - 32px)); }

/* ---------- glass 材质 ---------- */
.glass { background: var(--panel); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: .5px solid var(--line-strong); box-shadow: var(--shadow), inset 0 1px 0 var(--hi); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 10px; border: .5px solid var(--line-strong); background: var(--panel); color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1; cursor: pointer; text-decoration: none; white-space: nowrap; box-shadow: 0 .5px 1px rgb(0 0 0 / .08); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: filter .15s var(--ease), transform .15s var(--ease), box-shadow .2s var(--ease); }
.btn:hover { filter: brightness(.97); }
.btn:active { filter: brightness(.92); transform: scale(.985); }
.btn.primary { background: var(--btn-bg); color: #fff; border-color: transparent; box-shadow: 0 .5px 1px rgb(0 0 0 / .16), inset 0 .5px 0 rgb(255 255 255 / .22); }
.btn.primary:hover { filter: brightness(1.05); }
.btn.sm { height: 30px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.btn.lg { height: 48px; padding: 0 26px; font-size: 16px; border-radius: 12px; }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--accent-on-soft); -webkit-backdrop-filter: none; backdrop-filter: none; }
.icon-btn { width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: 8px; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; font-size: 17px; transition: background-color .15s var(--ease); }
.icon-btn:hover { background: var(--hover); }
#theme-toggle .ic-moon { display: none; }
:root[data-resolved="dark"] #theme-toggle .ic-sun { display: none; }
:root[data-resolved="dark"] #theme-toggle .ic-moon { display: inline-block; }

/* ---------- nav ---------- */
.nav-wrap { position: sticky; top: 12px; z-index: 50; padding: 0 16px; margin-top: 12px; pointer-events: none; }
.nav { pointer-events: auto; max-width: 1120px; margin: 0 auto; height: 52px; padding: 0 10px 0 16px; border-radius: 14px; display: flex; align-items: center; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 15px; letter-spacing: 0; color: var(--ink); }
.brand-mark { width: 26px; height: 26px; display: grid; place-items: center; flex: none; }
/* 正式品牌标志保留主应用的透明本体与配色，不再叠加旧圆角底。 */
.brand-image { display: block; width: 100%; height: 100%; object-fit: contain; flex: none; }
.nav-links { flex: 1; display: flex; justify-content: center; gap: 2px; }
.nav-links a { padding: 6px 12px; border-radius: 8px; font-size: 14px; color: var(--ink-2); text-decoration: none; white-space: nowrap; transition: background-color .15s var(--ease), color .15s; }
.nav-links a:hover { background: var(--hover); color: var(--ink); }
.nav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* ---------- 文字 ---------- */
.pill { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--ink-2); background: var(--panel); border: .5px solid var(--line-strong); box-shadow: inset 0 1px 0 var(--hi); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.lead { margin: 26px 0 0; max-width: 560px; font-size: clamp(17px, 2vw, 20px); line-height: 1.75; color: var(--ink-2); }
.nw { white-space: nowrap; }
.cta { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }
.cta.center { justify-content: center; }
.fine { margin-top: 16px; font-size: 13.5px; line-height: 1.7; color: var(--muted); }
.kicker { font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--muted); margin-bottom: 12px; }
.sec-h { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.sec-h.left { text-align: left; margin: 0; max-width: none; }
.sec-h h2, .band h2, .contact h2 { font: 650 clamp(30px, 4.6vw, 48px)/1.2 var(--font-display); letter-spacing: -.015em; }
.sec-p { margin-top: 16px; color: var(--ink-2); font-size: 17px; line-height: 1.8; }
.note { margin: 20px auto 0; max-width: 720px; text-align: center; font-size: 13.5px; color: var(--muted); }

/* ---------- reveal（仅在有脚本且未要求减少动态时隐藏；演示 iframe 的祖先不使用） ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease-enter), transform .7s var(--ease-enter); }
  .js .reveal.in { opacity: 1; transform: none; }
  .hero-copy > .reveal:nth-child(2) { transition-delay: .08s; }
  .hero-copy > .reveal:nth-child(3) { transition-delay: .16s; }
  .hero-copy > .reveal:nth-child(4) { transition-delay: .24s; }
  .hero-copy > .reveal:nth-child(5) { transition-delay: .32s; }
}

/* ======================= 首屏：标题 + 备课夹 ======================= */
.hero { padding: 64px 0 56px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 36px; align-items: center; }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.hero h1 { margin-top: 24px; font: 700 clamp(46px, 6.4vw, 84px)/1.1 var(--font-display); letter-spacing: -.02em; display: flex; flex-direction: column; align-items: flex-start; }
.hero h1 .accent { color: inherit; }

/* 备课夹：三张纸页同时弹出，固定前后顺序；悬停整个资料夹、键盘聚焦纸页或手机轻点都会展开 */
.hero-folder { position: relative; height: 480px; perspective: 1200px; }
.folder-back { position: absolute; left: 18px; right: 8px; top: 116px; bottom: 19px; border-radius: 12px; transform: rotate(3deg); background: color-mix(in srgb, var(--ink) 5%, var(--panel)); border: .5px solid var(--line-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--shadow), inset 0 1px 0 var(--hi); }
.folder-back > span { position: absolute; top: -26px; left: -.5px; padding: 6px 14px 5px; border-radius: 9px 9px 0 0; border: .5px solid var(--line-strong); border-bottom: 0; background: color-mix(in srgb, var(--ink) 7%, var(--panel-solid)); font: 600 10px/1.5 var(--font-num); letter-spacing: .14em; color: var(--ink-2); }
.hero-page { position: absolute; width: 61%; height: 324px; left: 19%; top: 47px; padding: 22px 24px; border-radius: 6px; background: #fdfdfc; color: #2a2b2c; border: .5px solid rgb(0 0 0 / .1); box-shadow: 0 6px 16px rgb(0 0 0 / .1); font-family: var(--font-paper); transition: transform .65s cubic-bezier(.2, .82, .24, 1.12), box-shadow .4s var(--ease); transform-origin: 50% 80%; }
.hero-page:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; border-radius: 6px; }
.hero-page-back { z-index: 1; background: #f4f4f5; transform: translate(55px, -30px) rotate(10deg); }
.hero-page-middle { z-index: 2; background: #f8f8f8; transform: translate(-5px, -22px) rotate(-8deg); }
.hero-page-front { z-index: 3; transform: translate(-25px, 15px) rotate(-3deg); }
.hero-folder.is-fanned .hero-page-back { transform: translate3d(96px, -88px, -35px) rotate(9deg); box-shadow: 0 18px 30px rgb(0 0 0 / .16); }
.hero-folder.is-fanned .hero-page-middle { transform: translate3d(-28px, -113px, 5px) rotate(-9deg); box-shadow: 0 22px 34px rgb(0 0 0 / .18); }
.hero-folder.is-fanned .hero-page-front { transform: translate3d(-100px, -20px, 38px) rotate(-6deg); box-shadow: 0 26px 40px rgb(0 0 0 / .22); }
.paper-chapter { font: 500 11.5px/1.6 var(--font-ui); color: #6e7378; letter-spacing: .015em; }
.hero-page-back .paper-chapter { display: block; text-align: right; }
.paper-title { margin-top: 20px; font: 500 22px/1.7 var(--font-paper); letter-spacing: -.01em; }
.paper-solution { margin-top: 26px; font: 17px/1.9 var(--font-math); color: #373b39; }
.paper-student { margin-top: 14px; font: 12px/1.6 var(--font-ui); color: #7a7f84; }
.paper-poem { margin-top: 14px; font: 15px/1.9 var(--font-paper); letter-spacing: .05em; color: #26292a; }
.paper-poem span { display: block; }
.paper-poem u, .exam-poem u { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.exam-rule { margin-top: 12px; border-top: .5px solid rgb(0 0 0 / .14); }
.exam-rule + .exam-subject { margin-top: 10px; }
.exam-poem { margin-top: 2px; font: 15px/1.75 var(--font-paper); color: #26292a; }
.paper-q { margin-top: 12px; font: 12.5px/1.7 var(--font-paper); color: #3a3d3f; }
.paper-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: .5px solid rgb(0 0 0 / .12); }
.paper-head .ic { width: 18px; height: 18px; color: #6e7378; }
.exam-subject { margin-top: 12px; font: 12px/1.5 var(--font-ui); color: #6e7378; }
.exam-question { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; color: #26292a; font: 18px/1.9 var(--font-paper); }
.exam-expression { display: flex; align-items: center; gap: 9px; white-space: nowrap; font: 17px/1.6 var(--font-math); }
.hero-page i { font-family: var(--font-math); }
.paper-note { position: absolute; bottom: 20px; right: 22px; font: italic 500 12.5px/1.4 var(--font-ui); color: #6e7378; }
.folder-front { position: absolute; z-index: 5; left: 18px; right: 8px; bottom: 15px; height: 94px; padding: 0; border-radius: 8px 8px 14px 14px; transform: rotate(3deg); box-shadow: 0 20px 36px -14px rgb(0 0 0 / .25), var(--shadow), inset 0 1px 0 var(--hi); }
.folder-toggle { display: flex; align-items: center; justify-content: space-between; gap: 25px; width: 100%; height: 100%; padding: 0 28px; color: var(--ink); background: none; border: 0; font: 600 14px var(--font-ui); text-align: left; cursor: pointer; border-radius: inherit; }
.folder-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -6px; }

/* ======================= 应用窗口示意（玻璃 App 窗口） ======================= */
.win-cap { margin-top: 14px; text-align: center; font-size: 13px; color: var(--muted); display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; }
.win-cap.in { margin: 0; padding: 10px 14px 12px; border-top: .5px solid var(--line); }
.tag-demo { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 6px; background: var(--panel-2); color: var(--ink-2); font-size: 11.5px; font-weight: 500; }

.win { position: relative; display: grid; grid-template-columns: 188px minmax(0, 1fr); height: 600px; border-radius: 14px; overflow: hidden; background: var(--bg); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--shadow-win), inset 0 1px 0 rgb(255 255 255 / .35); border: .5px solid var(--hi); font-size: 12.5px; line-height: 1.5; color: var(--ink); user-select: none; letter-spacing: .01em; }
.win .ic { font-size: 15px; }
.w-sb { background: rgb(236 236 238 / .55); border-right: .5px solid var(--line); padding: 14px 10px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
:root[data-resolved="dark"] .w-sb { background: rgb(28 28 30 / .45); }
.w-traffic { display: flex; gap: 8px; padding: 0 6px 12px; }
.w-traffic i { width: 11px; height: 11px; border-radius: 50%; background: #ec6a5e; box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .15); }
.w-traffic i:nth-child(2) { background: #f4bf4f; }
.w-traffic i:nth-child(3) { background: #61c554; }
.w-brand { display: flex; align-items: center; gap: 9px; padding: 4px 6px 12px; }
.w-logo { width: 28px; height: 28px; display: grid; place-items: center; flex: none; }
.w-nav { display: flex; align-items: center; gap: 9px; height: 30px; padding: 0 8px; border-radius: 7px; font-size: 13px; }
.w-nav .ic { color: var(--muted); }
.w-nav.on .ic { color: var(--accent); }
.w-nav em { margin-left: auto; font-style: normal; font-size: 11.5px; color: var(--muted); }
.w-nav.on { background: var(--panel-3); }
.w-me { margin-top: auto; display: flex; align-items: center; gap: 9px; padding: 8px 6px 0; border-top: .5px solid var(--line); }
.w-avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(180deg, #a1a1a6, #6e6e73); flex: none; }

/* 玻璃窗口的图标栏版本：工作台跳页里使用，窗口更紧凑 */
.win.cw { box-shadow: 0 0 0 .5px var(--line-strong), 0 8px 16px -8px rgb(0 0 0 / .3), 0 0 28px -14px rgb(0 0 0 / .22), inset 0 1px 0 rgb(255 255 255 / .35); grid-template-columns: 56px minmax(0, 1fr); height: 100%; background: color-mix(in srgb, var(--panel-solid) 92%, transparent); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); border-radius: 16px; }
.cw .w-sb { padding: 12px 8px; align-items: center; }
.cw .w-label, .cw .w-nav span, .cw .w-me-t { display: none; }
.cw .w-traffic { padding: 0 0 10px; gap: 5px; }
.cw .w-traffic i { width: 9px; height: 9px; }
.cw .w-brand { padding: 2px 0 8px; }
.cw .w-nav { position: relative; width: 38px; height: 34px; justify-content: center; padding: 0; }
.cw .w-nav .ic { font-size: 17px; }
.cw .w-nav em { position: absolute; top: 1px; right: 0; margin: 0; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px; display: grid; place-items: center; font: 600 9px/1 var(--font-num); background: var(--accent); color: #fff; }
.cw .w-me { margin-top: auto; padding: 8px 0 0; border-top: 0; }

.w-main { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; }
.w-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: .5px solid var(--line); min-width: 0; }
.w-bar h2 { font: 600 14px/1 var(--font-ui); letter-spacing: 0; }
.w-ic { color: var(--muted); font-size: 16px !important; margin-right: 4px; }
.w-sub { color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-gap { flex: 1; }
.w-search { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 9px; border-radius: 7px; background: var(--panel-2); color: var(--muted); font-size: 12px; white-space: nowrap; min-width: 0; }
.w-search kbd { margin-left: 14px; }
.w-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 7px; font-size: 12px; font-weight: 500; background: var(--panel); border: .5px solid var(--line-strong); box-shadow: 0 .5px 1px rgb(0 0 0 / .08); white-space: nowrap; }
.w-btn.icon { padding: 0; width: 28px; justify-content: center; border-color: transparent; background: transparent; box-shadow: none; color: var(--ink-2); }
.w-btn.on { background: var(--chip); border-color: transparent; color: var(--ink); box-shadow: none; }
.w-btn.primary { background: var(--btn-bg); color: #fff; border-color: transparent; box-shadow: 0 .5px 1px rgb(0 0 0 / .16), inset 0 .5px 0 rgb(255 255 255 / .22); }
.w-btn.full { width: calc(100% - 20px); margin: auto 10px 10px; justify-content: center; }

.w-body { display: grid; grid-template-columns: 244px minmax(0, 1fr) 304px; gap: 10px; padding: 12px; min-height: 0; }
.w-body > * { min-width: 0; min-height: 0; }
.w-list, .w-detail, .w-ai, .w-src, .w-res, .w-spec, .w-pv, .w-basket { background: var(--panel); border: .5px solid var(--line); border-radius: 12px; box-shadow: 0 0 0 .5px rgb(0 0 0 / .03), 0 1px 2px rgb(0 0 0 / .04); overflow: hidden; display: flex; flex-direction: column; }
.w-tabs { display: inline-flex; align-self: flex-start; margin: 10px 10px 0; padding: 2px; border-radius: 8px; background: var(--panel-2); }
.w-tabs span { padding: 2px 10px; border-radius: 6px; font-size: 12px; color: var(--ink-2); }
.w-tabs span.on { background: var(--panel-solid); color: var(--ink); box-shadow: 0 1px 3px rgb(0 0 0 / .12); font-weight: 500; }
.w-tabs.line { background: none; padding: 0; margin: 10px 14px 0; border-bottom: .5px solid var(--line); align-self: stretch; border-radius: 0; }
.w-tabs.line span { padding: 6px 0; margin-right: 18px; border-radius: 0; color: var(--ink); font-weight: 500; border-bottom: 2px solid var(--accent); margin-bottom: -.5px; background: none; box-shadow: none; }
.w-count { display: flex; align-items: baseline; gap: 8px; padding: 10px 12px 6px; }
.w-count b { font-size: 13px; font-weight: 600; }
.w-count span { color: var(--muted); font-size: 11.5px; }
.w-list ul { flex: 1; overflow: hidden; padding: 0 6px; }
.w-list li { padding: 8px 8px 9px; border-radius: 8px; margin-bottom: 2px; }
.w-list li.sel { background: var(--panel-3); }
.w-list li p { font-size: 12.5px; line-height: 1.55; margin-top: 3px; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.w-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.w-meta.big { padding: 12px 14px 0; font-size: 12px; }
.ty { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--c, var(--ink-2)); white-space: nowrap; }
.ty::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c, var(--muted)); }
.ty.fill { --c: var(--t-fill); } .ty.single { --c: var(--t-single); } .ty.solve { --c: var(--t-solve); }
.meter { display: inline-flex; gap: 2px; align-items: center; }
.meter i { width: 4px; height: 9px; border-radius: 2px; background: var(--panel-3); }
.meter i.on { background: var(--muted); }
.lvl { color: var(--ink-2); }
.w-act { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px; color: var(--ink-2); }
.w-chips { display: flex; gap: 6px; padding: 8px 14px 0; }
.w-chips.tight { padding: 4px 0 0; }
.w-chips span { font-size: 11px; padding: 1px 8px; border-radius: 6px; background: var(--chip); color: var(--ink-2); }
.w-stem { padding: 16px 14px 10px; font-size: 15px; line-height: 2.1; font-family: var(--font-math); }
.w-stem i, .w-detail p i { font-family: var(--font-math); }
.w-sec { padding: 10px 14px 0; }
.w-k { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.w-k em { font-style: normal; font-weight: 500; color: var(--ink-2); display: inline-flex; align-items: center; gap: 4px; }
.w-sec p { font-size: 13px; line-height: 1.9; font-family: var(--font-math); }
.w-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px; }

/* 每个页面底部的 AI 输入条：窄药丸，星花图标 + 提示文字 + 圆形发送钮 */
.w-aibar { display: flex; align-items: center; gap: 8px; width: min(calc(100% - 24px), 560px); height: 32px; margin: 0 auto 10px; padding: 0 4px 0 12px; border-radius: 999px; border: .5px solid var(--line-strong); background: var(--panel-solid); color: var(--muted); font-size: 12px; box-shadow: 0 1px 3px rgb(0 0 0 / .06); }
.w-aibar > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-aibar em { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--btn-bg); color: #fff; font-style: normal; }
.w-aibar em .ic { font-size: 13px; }

/* 分式（HTML/CSS 绘制） */
.frac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; line-height: 1.3; margin: 0 .15em; font-family: var(--font-math); }
.frac > span:first-child { border-bottom: 1px solid currentColor; padding: 0 .25em .08em; }
.frac > span:last-child { padding: .08em .25em 0; }
.frac.s { font-size: .86em; }

/* 停靠 AI 助手面板 */
.w-ai { background: color-mix(in srgb, var(--panel) 70%, transparent); }
.w-ai-h, .ag-h { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: .5px solid var(--line); font-size: 12px; color: var(--ink-2); white-space: nowrap; min-width: 0; }
.w-ai-h b, .ag-h b { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.w-ai-h span:not(.w-gap), .ag-ctx { color: var(--muted); overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; }
.w-ai-h .ic:first-child, .ag-h .ic:first-child { color: var(--ink-2); }
.w-ai-b, .ag-b { flex: 1; min-height: 0; padding: 12px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.bub { font-size: 12.5px; line-height: 1.7; max-width: 100%; }
/* 用户气泡是半透明中性玻璃：灰底 + 细边 + 内高光 */
.bub.user { align-self: flex-end; max-width: 92%; padding: 8px 13px; border-radius: 18px 18px 6px 18px; background: var(--panel-3); border: .5px solid var(--line); color: var(--ink); backdrop-filter: saturate(1.5) blur(24px); -webkit-backdrop-filter: saturate(1.5) blur(24px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), 0 1px 3px rgb(0 0 0 / .05); }
.bub.user i { font-family: var(--font-math); }
.bub.ai { display: grid; gap: 8px; color: var(--ink); }
.bub.ai p { font-size: 12.5px; line-height: 1.75; }
.act { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.act .ic { color: var(--ok); font-size: 13px; }
.w-sug { display: flex; flex-wrap: wrap; gap: 6px; }
.w-sug span { font-size: 11.5px; padding: 3px 10px; border-radius: 999px; background: var(--panel-2); color: var(--ink-2); border: .5px solid var(--line); }
.w-ai-in, .ag-in { margin: 0 10px 10px; padding: 9px 10px 8px; border-radius: 12px; border: .5px solid var(--line-strong); background: var(--panel-solid); font-size: 12px; color: var(--muted); display: grid; gap: 8px; box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--accent) 16%, transparent); }
.w-ai-in > div, .ag-in > div { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.w-ai-in em, .ag-in em { margin-left: auto; font-style: normal; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 7px; background: var(--chip); color: var(--ink-2); font-weight: 500; }

.conf { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 10px; font-size: 11px; font-weight: 600; background: var(--panel-2); color: var(--ink-2); white-space: nowrap; }
.conf.mid { background: var(--warn-soft); color: var(--warn); }
.conf.ok { background: var(--ok-soft); color: var(--ok); }

/* ---- 01 收题：审核页 ---- */
.b-collect { grid-template-columns: 196px minmax(0, 1fr) 246px; }
.w-drop { margin: 0 10px 8px; padding: 10px 8px; border: 1px dashed var(--line-strong); border-radius: 10px; background: var(--panel-2); display: grid; justify-items: center; gap: 1px; text-align: center; }
.w-drop .ic { font-size: 18px; color: var(--muted); }
.w-drop b { font-size: 12px; font-weight: 600; color: var(--ink); }
.w-drop small { font-size: 10.5px; color: var(--muted); }
.w-queue li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 8px; }
.w-queue .qi { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--panel-2); color: var(--ink-2); }
.w-queue b { display: block; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-queue small { display: block; font-size: 10.5px; color: var(--muted); }
.prog { height: 3px; margin-top: 6px; border-radius: 2px; background: var(--panel-3); overflow: hidden; }
.prog i { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(.62); border-radius: 2px; }
.w-ph { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 8px; }
.w-ph b { font-size: 13px; font-weight: 600; }
.w-ph span:not(.conf) { color: var(--muted); font-size: 11.5px; }
.w-photo { flex: 1; min-height: 0; margin: 0 10px 10px; border-radius: 10px; background: var(--viz-bg); display: grid; place-items: center; overflow: hidden; }
.photo-sheet { position: relative; width: min(88%, 330px); aspect-ratio: 1 / .78; background: #fbfaf6; color: #26292a; border-radius: 6px; padding: 16px 16px 12px; transform: rotate(-2deg); box-shadow: 0 1px 2px rgb(0 0 0 / .15), 0 12px 26px -10px rgb(0 0 0 / .35); font-family: var(--font-paper); overflow: hidden; }
.ph-no { font: 500 10.5px/1.4 var(--font-ui); color: #8a8f94; }
.ph-q { margin-top: 12px; font-size: 14px; line-height: 2.1; }
.ph-rule { display: block; height: 1px; margin-top: 14px; background: rgb(110 120 130 / .35); }
.ph-rule.short { width: 55%; }
.det { position: absolute; border: 1.5px dashed var(--muted); border-radius: 5px; background: rgb(118 118 128 / .07); }
.det em { position: absolute; left: 6px; top: -9px; padding: 3px 6px; border-radius: 4px; background: var(--muted); color: #fff; font: 600 9.5px/1 var(--font-ui); font-style: normal; letter-spacing: .04em; }
.det-q { inset: 26px 10px 62px 10px; }
.det-a { left: 10px; right: 10px; bottom: 22px; height: 24px; border-color: var(--muted); background: rgb(118 118 128 / .07); }
.det-a em { background: var(--muted); }
.scan-line { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 42%, rgb(118 118 128 / .22) 50%, transparent 58%); transform: translateY(-100%); }
.w-field { padding: 4px 12px 6px; }
.w-field p { font-size: 12.5px; line-height: 2; font-family: var(--font-math); }
.w-field.row { display: flex; align-items: baseline; gap: 12px; }
.w-field.row b { font-size: 16px; }
.w-field .w-k { margin-bottom: 2px; }
.w-input { padding: 5px 9px; border-radius: 7px; border: .5px solid var(--line-strong); background: var(--panel-solid); font-size: 12px; }

/* ---- 02 找题：题库 · 知识体系 ---- */
.b-find { grid-template-columns: 208px minmax(0, 1fr) 190px; }
.w-tree { padding: 6px 6px 0 !important; }
.w-tree li { display: flex; align-items: center; gap: 5px; height: 25px; margin: 0; padding: 0 8px 0 var(--ind, 8px); border-radius: 6px; font-size: 12px; white-space: nowrap; overflow: hidden; color: var(--ink-2); }
.w-tree li.g { --ind: 6px; font-weight: 600; color: var(--ink); }
.w-tree li.c { --ind: 16px; }
.w-tree li.l { --ind: 32px; }
.w-tree li.on { background: var(--accent); color: #fff; }
.w-tree em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--muted); }
.w-tree li.on em { color: rgb(255 255 255 / .85); }
.tw { width: 10px; font-size: 9px; color: var(--muted); flex: none; text-align: center; }
.dotm { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); opacity: .6; flex: none; margin: 0 2px; }
.w-tree li.on .dotm { background: #fff; opacity: 1; }
.w-fchips { display: flex; gap: 6px; padding: 0 12px 8px; }
.w-fchips span { font-size: 11.5px; padding: 1px 9px; border-radius: 999px; background: var(--panel-2); border: .5px solid var(--line); color: var(--ink-2); }
.w-fchips span.on { background: var(--chip); border-color: transparent; color: var(--ink); font-weight: 600; }
.in-basket { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; color: var(--ok); font-size: 10.5px; font-weight: 600; }
.in-basket .ic { font-size: 12px; }
.bk { display: flex; gap: 8px; align-items: flex-start; margin: 0 8px 6px; padding: 7px 9px; border-radius: 8px; border: .5px solid var(--line); background: var(--panel-2); }
.bk .num { color: var(--muted); font-size: 11px; line-height: 1.7; }
.bk b { display: block; font-size: 12px; font-weight: 600; }
.bk small { font-size: 10.5px; color: var(--muted); }

/* ---- 03 出卷：组卷 ---- */
.b-paper { grid-template-columns: 268px minmax(0, 1fr); }
.b-explain { grid-template-columns: minmax(0, 1fr) 300px; }
.mix-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 2px; margin-top: 4px; }
.mix-bar i { display: block; height: 100%; }
.mix-bar i:nth-child(1) { flex: 4; background: var(--t-fill); }
.mix-bar i:nth-child(2) { flex: 4; background: #7e9ccb; }
.mix-bar i:nth-child(3) { flex: 2; background: var(--t-solve); }
.mix-lg { display: flex; justify-content: space-between; margin-top: 5px; font-size: 10.5px; color: var(--muted); }
.src-chip { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; padding: 2px 9px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); font-size: 11px; font-weight: 600; }
.src-chip .ic { font-size: 12px; }
.spec-t { margin: 10px 12px 0; border: .5px solid var(--line); border-radius: 9px; overflow: hidden; font-size: 12px; background: var(--panel-solid); }
.spec-t .th, .spec-t .tr { display: grid; grid-template-columns: 1.3fr 1fr .6fr .7fr; padding: 0 10px; height: 30px; align-items: center; }
.spec-t .th { font-size: 10.5px; font-weight: 600; color: var(--muted); border-bottom: .5px solid var(--line); background: var(--panel-2); }
.spec-t .tr + .tr { border-top: .5px solid var(--line); }
.spec-t .th span:nth-child(n+3), .spec-t .tr span:nth-child(n+3) { text-align: right; }
.spec-t .tf { display: flex; justify-content: space-between; padding: 7px 10px; background: var(--panel-2); font-size: 11.5px; color: var(--ink-2); border-top: .5px solid var(--line); }
.w-pv { background: var(--panel-2); }
.pv-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--panel); border-bottom: .5px solid var(--line); }
.pv-bar b { font-size: 12.5px; font-weight: 600; }
.fmt2 { display: flex; gap: 5px; }
.fmt2 em { font: 600 10px/1 var(--font-ui); font-style: normal; padding: 4px 7px; border-radius: 5px; background: #185abd; color: #fff; }
.fmt2 em + em { background: #cf242b; }
.pv-paper { flex: 1; min-height: 0; width: min(100%, 380px); margin: 14px auto 0; padding: 18px 24px 0; background: #fff; color: #222; border-radius: 4px 4px 0 0; box-shadow: 0 1px 2px rgb(0 0 0 / .15), 0 14px 30px -10px rgb(0 0 0 / .3); font-family: var(--font-paper); overflow: hidden; }
.pv-id { font: 500 10px/1.4 var(--font-ui); color: #888; text-align: center; }
.pv-paper h4 { font-size: 16px; text-align: center; margin-top: 4px; }
.pv-stu { margin: 6px 0 10px; text-align: center; font: 10px/1.5 var(--font-ui); color: #777; }
.pv-paper h5 { font-size: 12px; margin-top: 8px; }
.pv-paper p { font-size: 12px; line-height: 2; color: #333; }
.ans-lines i { display: block; height: 1px; margin-top: 16px; background: rgb(110 120 130 / .3); }
/* 组卷窗口：场景优先的新流程（场景、班级、范围、题型结构、卷面上的空位） */
.w-fchips.flow { flex-wrap: wrap; row-gap: 5px; padding: 4px 0 0; }
.w-field.row .w-k { margin: 0; flex: none; min-width: 3.6em; }
.w-field.row .w-chips.tight { flex-wrap: wrap; row-gap: 4px; }
.spec-t.cnt .th, .spec-t.cnt .tr { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.spec-t.cnt .th span:nth-child(n+2), .spec-t.cnt .tr span:nth-child(n+2) { text-align: right; }
.spec-t .warn { color: var(--warn); font-weight: 600; }
.w-note { padding: 7px 12px 0; font-size: 11px; line-height: 1.6; color: var(--muted); }
.pv-bar .w-tabs { margin: 0 0 0 auto; align-self: center; }
.pv-bar .w-tabs span { padding: 1px 9px; font-size: 11px; }
.pv-bar .w-tabs + .fmt2 { margin-left: 10px; }
.pv-gap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; margin: 3px 0 6px; padding: 6px 9px; border-radius: 6px; border: 1px dashed color-mix(in srgb, var(--warn) 55%, transparent); background: var(--warn-soft); color: var(--warn); font: 500 11px/1.4 var(--font-ui); }
.pv-gap .g-acts { display: inline-flex; gap: 5px; }
.pv-gap em { font-style: normal; padding: 3px 7px; border-radius: 5px; border: .5px solid var(--line-strong); background: #fff; color: var(--ink-2); }
.pv-gap em:first-child { background: var(--btn-bg); border-color: transparent; color: #fff; }
/* 白纸内的 UI 元素固定使用浅色令牌：深色外观下纸面仍是白色，琥珀与绿色不能沿用深色值 */
.pv-paper, .mn-paper { --ink: #1d1d1f; --ink-2: #424245; --muted: #6e6e73; --line: rgb(0 0 0 / .08); --line-strong: rgb(0 0 0 / .14); --panel-solid: #fff; --panel-2: rgb(118 118 128 / .08); --panel-3: rgb(118 118 128 / .14); --accent: #006cdc; --accent-soft: rgb(0 122 255 / .1); --accent-line: rgb(0 122 255 / .28); --accent-on-soft: #0062cc; --btn-bg: #0071e3; --warn: #a15a00; --warn-soft: rgb(255 149 0 / .11); --ok: #248a3d; --ok-soft: rgb(52 199 89 / .13); }

/* ======================= 工作台：备课夹口跳页 ======================= */
.binder-section { --tab-h: 34px; --chrome: 196px; --card-h: clamp(330px, calc(100svh - var(--nav-h) - var(--chrome)), 540px); position: relative; height: 260svh; min-height: 2200px; }
.binder-sticky { position: sticky; top: var(--nav-h); padding: 18px 0 18px; }
.binder-layout { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 36px; align-items: center; }
.binder-story { min-width: 0; }
.binder-story h2 { text-wrap: balance; font: 650 clamp(28px, 3vw, 38px)/1.2 var(--font-display); letter-spacing: -.015em; }
.story-live { margin-top: 26px; }
.story-live h3 { font: 600 20px/1.4 var(--font-display); letter-spacing: 0; }
.story-live p { margin-top: 8px; font-size: 14.5px; line-height: 1.85; color: var(--ink-2); min-height: 80px; }
.index-leaves { position: relative; height: 176px; margin-top: 24px; }
.index-leaf { position: absolute; width: 108px; height: 136px; padding: 14px 13px; text-align: left; top: calc(var(--leaf) * 3px); left: calc(var(--leaf) * 48px); transform: rotate(calc((var(--leaf) - 1.5) * 8deg)); transform-origin: bottom center; border-radius: 12px; border: .5px solid var(--line-strong); background: color-mix(in srgb, var(--panel-solid) 84%, transparent); color: var(--ink-2); cursor: pointer; box-shadow: var(--shadow), inset 0 1px 0 var(--hi); transition: transform .45s cubic-bezier(.2, .8, .2, 1), background-color .25s, color .25s, box-shadow .25s; }
.index-leaf > span { display: block; font: 600 11px var(--font-num); opacity: .6; }
.index-leaf strong { display: block; font: 650 20px/1.2 var(--font-display); margin-top: 20px; color: var(--ink); white-space: nowrap; }
.index-leaf small { display: block; font-size: 10.5px; margin-top: 10px; white-space: nowrap; color: var(--muted); }
.index-leaf[aria-current] { z-index: 8; background: var(--panel-solid); border-color: var(--line-strong); color: var(--ink); transform: translateY(-15px) rotate(calc((var(--leaf) - 1.5) * 4deg)); box-shadow: 0 16px 26px -12px rgb(0 0 0 / .35), inset 0 1px 0 var(--hi); }
.index-leaf[aria-current] > span { color: var(--accent); opacity: 1; }
.index-leaf:hover { z-index: 9; transform: translateY(-27px) rotate(0deg); }

.binder-stage { --pocket-top: calc(var(--tab-h) + var(--card-h) + 14px); position: relative; min-width: 0; height: calc(var(--pocket-top) + 40px); touch-action: pan-y; cursor: grab; outline-offset: 8px; border-radius: 16px; }
.binder-stage.is-dragging { cursor: grabbing; }
.binder-stage.is-dragging * { user-select: none; }
/* 外圈留出阴影的空间，只在夹口处裁切：用 overflow 而不是 clip-path，避免玻璃窗口的模糊取不到背景 */
.binder-papers { position: absolute; left: -48px; right: -48px; top: -48px; height: calc(var(--pocket-top) + 52px); overflow: hidden; pointer-events: none; }
.workspace-card { position: absolute; top: calc(48px + var(--tab-h)); left: 62px; right: 62px; height: var(--card-h); transform-origin: 50% 80%; pointer-events: none; container-type: inline-size; container-name: card; }
.workspace-card.is-active { pointer-events: auto; }
.workspace-card.is-hidden { visibility: hidden; }
.workspace-card:is([data-paper-state="launching"], [data-paper-state="falling"]) { will-change: transform; }
.card-label { display: none; }
/* 章节标签在窗口边缘内缩，第一张书签由窗口的直线顶边承托。 */
.chapter-tabs { position: absolute; z-index: 120; left: 30px; right: 14px; top: 0; height: var(--tab-h); display: flex; gap: 6px; pointer-events: none; }
.leaf-tab { pointer-events: auto; flex: 0 1 96px; padding: 0 8px; border-radius: 10px 10px 0 0; border: .5px solid var(--line-strong); border-bottom: 0; background: var(--panel); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: var(--ink-2); font: 500 12px/1 var(--font-ui); cursor: pointer; transition: translate .25s var(--ease), background-color .25s, color .25s; box-shadow: inset 0 1px 0 var(--hi); }
.leaf-tab:is(:hover, :focus-visible) { translate: 0 -5px; }
.leaf-tab[aria-current] { background: var(--panel-solid); color: var(--ink); font-weight: 600; border-color: var(--line-strong); }
.binder-pocket { position: absolute; z-index: 100; left: 4px; right: 4px; top: var(--pocket-top); height: 40px; pointer-events: none; }
.binder-pocket::before { content: ""; position: absolute; left: 6px; right: 6px; top: 0; height: 14px; border-radius: 50% / 7px; background: linear-gradient(180deg, rgb(0 0 0 / .6), rgb(0 0 0 / .38) 60%, transparent); box-shadow: inset 0 3px 6px rgb(0 0 0 / .45); }
.binder-pocket::after { content: ""; position: absolute; inset: 8px 0 0; border-radius: 8px 8px 16px 16px; background: var(--panel); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: .5px solid var(--line-strong); box-shadow: inset 0 1px 0 var(--hi), 0 20px 34px -14px rgb(0 0 0 / .32), 0 4px 10px rgb(0 0 0 / .06); }
.pocket-shadow { position: absolute; z-index: -1; left: 4%; right: 4%; top: 22px; height: 26px; background: rgb(0 0 0 / .16); border-radius: 50%; filter: blur(12px); }

.binder-footer { display: flex; align-items: center; gap: 26px; margin-top: 4px; color: var(--muted); font-size: 12px; }
.binder-footer > span:first-child { min-width: 95px; color: var(--ink-2); }
.binder-footer > span:first-child > span { margin-left: 6px; }
.binder-footer > span:last-child { min-width: 86px; text-align: right; }
.binder-progress { height: 2px; flex: 1; background: var(--line-strong); border-radius: 2px; overflow: hidden; }
.binder-progress i { display: block; height: 100%; width: 100%; background: var(--accent); transform: scaleX(var(--binder-progress, .01)); transform-origin: left; }
.binder-cap { margin-top: 10px; }

/* 窗口里的小动效：只在当前页运行，只动 transform */
.workspace-card.is-active .prog i { animation: prog 2.6s var(--ease) infinite; }
.workspace-card.is-active .scan-line { animation: scan 3.2s ease-in-out infinite; }
@keyframes prog { 0% { transform: scaleX(.15); } 70%, 100% { transform: scaleX(.92); } }
@keyframes scan { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } }

/* 容器较窄时按优先级收起面板（卡片宽度，而不是视口宽度） */
@container card (max-width: 720px) {
  .b-collect { grid-template-columns: minmax(0, 1fr) 232px; }
  .b-collect .w-list { display: none; }
  .b-find { grid-template-columns: 200px minmax(0, 1fr); }
  .b-find .w-basket { display: none; }
  .b-paper { grid-template-columns: 240px minmax(0, 1fr); }
  .pv-bar .fmt2 { display: none; }
  .w-search { display: none; }
}
@container card (max-width: 560px) {
  .win.cw { grid-template-columns: minmax(0, 1fr); }
  .cw .w-sb { display: none; }
  .w-bar .w-btn:not(.on):not(.primary), .w-bar .w-ic, .w-bar .w-sub { display: none; }
  .w-bar .w-btn.primary { display: none; }
  .w-body { grid-template-columns: minmax(0, 1fr) !important; }
  .b-collect .w-src { display: none; }
  .b-find .w-q { display: none; }
  .b-paper .w-spec { display: none; }
  .b-explain .w-detail { display: none; }
}

/* 极矮视口：依次展示全部窗口；无脚本时同样如此 */
:is(.binder-section.is-static, html:not(.js) .binder-section) { height: auto; min-height: 0; padding: 40px 0 56px; }
:is(.binder-section.is-static, html:not(.js) .binder-section) .binder-sticky { position: relative; top: auto; }
:is(.binder-section.is-static, html:not(.js) .binder-section) .binder-layout { display: block; }
:is(.binder-section.is-static, html:not(.js) .binder-section) .story-live,
:is(.binder-section.is-static, html:not(.js) .binder-section) .index-leaves,
:is(.binder-section.is-static, html:not(.js) .binder-section) .binder-footer,
:is(.binder-section.is-static, html:not(.js) .binder-section) .chapter-tabs,
:is(.binder-section.is-static, html:not(.js) .binder-section) .binder-pocket { display: none; }
:is(.binder-section.is-static, html:not(.js) .binder-section) .binder-story { margin-bottom: 24px; }
:is(.binder-section.is-static, html:not(.js) .binder-section) .binder-stage { height: auto; margin-top: 8px; cursor: default; }
:is(.binder-section.is-static, html:not(.js) .binder-section) .binder-papers { position: static; display: grid; gap: 40px; height: auto; overflow: visible; pointer-events: auto; }
:is(.binder-section.is-static, html:not(.js) .binder-section) .workspace-card { position: relative; inset: auto; height: var(--card-h); transform: none !important; visibility: visible !important; pointer-events: auto; }
:is(.binder-section.is-static, html:not(.js) .binder-section) .card-label { display: block; margin: 0 0 8px 4px; font-size: 13px; font-weight: 600; color: var(--muted); }

/* ======================= 课堂演示：学科书架 ======================= */
.library-layout { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 44px; align-items: start; }
.library-side { min-width: 0; }
.lib-h2 { font: 650 clamp(30px, 3.6vw, 42px)/1.25 var(--font-display); letter-spacing: -.015em; }
.lib-h2 span { color: inherit; }
.library-side .sec-p { font-size: 15px; margin-top: 14px; line-height: 1.85; }
.subject-shelf { position: relative; height: 150px; margin-top: 30px; padding: 0 14px 14px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; }
.subject-book { position: relative; display: flex; align-items: center; flex: none; width: 262px; max-width: 100%; height: 58px; padding: 0 26px 0 22px; border-radius: 6px 9px 9px 6px; border: .5px solid rgb(255 255 255 / .3); color: #fff; cursor: pointer; text-align: left; box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), inset 0 -4px 8px rgb(0 0 0 / .22), 0 10px 18px -8px rgb(0 0 0 / .4); transition: filter .25s var(--ease), box-shadow .25s var(--ease); }
.math-book { background: linear-gradient(180deg, #7d7d82, #55555a); }
.physics-book { width: 242px; height: 62px; margin-left: 12px; background: linear-gradient(180deg, #6f7b8e, #475163); }
.subject-book::before { content: ""; position: absolute; inset: 6px 10px 6px 10px; border: .5px solid rgb(255 255 255 / .34); border-radius: 3px; pointer-events: none; }
.subject-book::after { content: ""; position: absolute; top: 6px; bottom: 6px; right: -4px; width: 6px; border-radius: 0 3px 3px 0; background: repeating-linear-gradient(0deg, #f4f2ea 0 1px, #c6c3b7 1px 2px); }
.subject-book:hover { filter: brightness(1.08); }
.subject-book:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; border-radius: 6px 9px 9px 6px; }
.spine-line { position: absolute; right: 18px; top: 0; width: 8px; height: 16px; background: #e6e2d3; opacity: .3; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); transition: opacity .25s; }
.subject-book.is-open .spine-line { opacity: 1; }
.subject-book.is-open { box-shadow: inset 0 1px 0 rgb(255 255 255 / .6), inset 0 -4px 8px rgb(0 0 0 / .22), 0 0 0 2px var(--panel-solid), 0 0 0 3.5px var(--accent), 0 10px 18px -8px rgb(0 0 0 / .4); }
.book-subject { font: 650 22px/1.15 var(--font-display); letter-spacing: 6px; text-shadow: 0 1px 1px rgb(0 0 0 / .2); }
.spine-symbol { margin-left: auto; margin-right: 10px; font: italic 20px var(--font-math); opacity: .8; }
.book-edition { position: absolute; bottom: 9px; left: 24px; font: 600 5.5px/1 var(--font-num); letter-spacing: .2em; opacity: .65; }
.shelf-plank { position: absolute; left: -6px; right: -6px; bottom: 0; height: 14px; border-radius: 5px; background: linear-gradient(180deg, color-mix(in srgb, var(--panel-solid) 88%, transparent), var(--panel)); border: .5px solid var(--line-strong); box-shadow: inset 0 1px 0 var(--hi), 0 14px 22px -10px rgb(0 0 0 / .28); }

.open-subject-book { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); min-height: 190px; margin-top: 26px; border-radius: 16px; perspective: 900px; }
.open-subject-book::before { content: ""; position: absolute; left: 96px; top: 12px; bottom: 12px; width: 1px; background: var(--line-strong); }
.open-book-leaf { position: relative; display: flex; align-items: center; flex-direction: column; padding: 20px 8px 16px; }
.book-page-label { font: 600 10px/1.3 var(--font-ui); letter-spacing: .14em; color: var(--muted); }
.open-book-leaf h3 { font: 650 26px/1.4 var(--font-display); writing-mode: vertical-rl; letter-spacing: 8px; margin-top: 12px; }
.book-page-formula { position: absolute; bottom: 20px; font: italic 13px var(--font-math); color: var(--muted); transform: rotate(-8deg); }
.open-book-contents { padding: 10px 18px 10px 16px; transform-origin: left center; }
.book-chapters > button { position: relative; display: block; width: 100%; padding: 11px 4px 10px; text-align: left; background: none; border: 0; border-bottom: .5px solid var(--line); color: var(--ink-2); cursor: pointer; transition: color .2s; }
.book-chapters > button:last-child { border-bottom: 0; }
.book-chapters > button > span { display: block; font: 600 15px/1.5 var(--font-display); color: var(--ink); }
.book-chapters > button > small { display: block; font-size: 12px; line-height: 1.6; color: var(--muted); }
.book-chapters > button:hover > span { color: var(--ink); }
.book-chapters > button[aria-pressed="true"] > span { color: var(--ink); }
.book-chapters > button[aria-pressed="true"]::before { content: ""; position: absolute; top: 19px; left: -9px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.book-chapters > button:focus-visible { outline-offset: -2px; }
.book-ribbon { position: absolute; right: 20px; top: -5px; width: 10px; height: 24px; background: #8e8e93; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 79%, 0 100%); }
.is-turning .open-book-contents { animation: book-turn .6s cubic-bezier(.2, .7, .2, 1); }
@keyframes book-turn { from { transform: rotateY(-68deg); opacity: .2; } 45% { opacity: 1; } to { transform: rotateY(0); opacity: 1; } }

/* 演示框不用毛玻璃、不做位移/透明度动画：沙箱 iframe 是跨进程渲染的，祖先元素有 backdrop-filter / filter / transform / opacity 过渡 / will-change 时，Chromium 可能整块画不出来 */
.library-demo { min-width: 0; }
.stage { border-radius: 16px; overflow: hidden; background: var(--panel-solid, #fbfbfd); border: .5px solid var(--line-strong); box-shadow: var(--shadow-win); }
.stage-bar { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px; border-bottom: .5px solid var(--line); background: var(--panel-solid); }
.stage-bar .w-traffic { padding: 0; }
.stage-title { font-size: 13px; font-weight: 600; flex: 1; text-align: center; }
.stage-chip { font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--chip); color: var(--ink-2); min-width: 52px; text-align: center; }
.stage-body { position: relative; height: clamp(540px, 80vh, 760px); background: var(--panel-2); }
.stage-body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; visibility: hidden; }
.stage-body iframe.ready { visibility: visible; }
.stage-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-size: 14px; }
.stage-ph.gone { display: none; }
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--accent); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.stage-cap { padding: 12px 18px 14px; border-top: .5px solid var(--line); font-size: 14px; color: var(--ink-2); line-height: 1.7; background: var(--panel-solid); }

/* ======================= AI 助手 ======================= */
.ai-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.points { margin-top: 28px; display: grid; gap: 18px; }
.points li { display: flex; gap: 14px; align-items: flex-start; }
.pt { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--chip); color: var(--ink-2); font-size: 17px; flex: none; }
.points b { font-size: 16px; font-weight: 600; }
.points p { font-size: 14.5px; line-height: 1.75; color: var(--ink-2); margin-top: 2px; }
.ai-grid .fine { margin-top: 24px; }
.agent { border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-win), inset 0 1px 0 var(--hi); }
.ag-h { padding: 12px 14px; }
.ag-b { padding: 16px 16px 8px; gap: 12px; overflow: visible; }
.ag-b .bub, .ag-b .bub p { font-size: 13.5px; }
.ag-b .bub.user { line-height: 1.8; }
.qchip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; margin: 0 2px; border-radius: 6px; background: rgb(255 255 255 / .94); color: #1d1d1f; font-size: 12px; font-weight: 500; vertical-align: baseline; line-height: 1; border: .5px solid rgb(0 0 0 / .08); }
.approve .qchip, .ap-h + p .qchip { background: var(--panel-2); color: var(--ink); border-color: var(--line); }
.qchip .d { width: 6px; height: 6px; border-radius: 50%; background: var(--t-single); }
.act.done .ic { color: var(--ok); }
.dcard { background: var(--panel-solid); border: .5px solid var(--line); border-radius: 12px; padding: 10px; display: grid; gap: 10px; box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
.dcard-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dcard-h b { font-size: 13.5px; font-weight: 600; }
.viz-box { height: 168px; border-radius: 8px; background: var(--viz-bg); overflow: hidden; }
.viz-box canvas { width: 100%; height: 100%; display: block; }
.dcard-f { display: flex; gap: 8px; }
.btn-s { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 7px; border: .5px solid var(--line-strong); background: var(--panel); font-size: 12px; font-weight: 500; }
.approve { border-radius: 12px; padding: 12px 14px; background: var(--panel-2); border: .5px solid var(--line); display: grid; gap: 10px; transition: background-color .3s var(--ease), border-color .3s var(--ease); }
.ap-h { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.ap-h .ic { color: var(--ink-2); font-size: 16px; }
.ap-s { margin-left: auto; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 10px; background: var(--warn-soft); color: var(--warn); }
.approve > p { font-size: 13.5px; line-height: 1.9; color: var(--ink); }
.ap-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.approve[data-state="saved"] { background: var(--ok-soft); border-color: transparent; }
.approve[data-state="saved"] .ap-s { background: var(--ok-soft); color: var(--ok); }
.approve[data-state="saved"] .ap-h .ic { color: var(--ok); }
.approve[data-state="discarded"] { background: var(--panel-2); border-color: var(--line); }
.approve[data-state="discarded"] .ap-s { background: var(--panel-3); color: var(--ink-2); }
.ag-in { margin: 4px 14px 12px; }
/* 底部输入条：单行，和产品里每个页面底部的 AI 输入条一致 */
.ag-in.bar { display: flex; align-items: center; gap: 10px; padding: 7px 7px 7px 12px; }
.ag-in.bar > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-in.bar em { margin-left: 0; padding: 4px 9px; }

/* ======================= 黑板：与玻璃相反的粉笔世界 ======================= */
.chalk-story { --chalk: #f1f1ee; --chalk-muted: #c4c4c2; --chalk-yellow: #e4dcc2; --chalk-blue: #c3ccd6; --chalk-font: "KaiTi", "STKaiti", "Kaiti SC", "KaiTi_GB2312", "Songti SC", serif; position: relative; color: var(--chalk); }
.chalk-sticky { position: relative; padding: 24px 0 40px; }
.chalk-frame { display: flex; flex-direction: column; gap: 10px; min-height: 0; height: 100%; }
.chalk-rail { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 44px; padding: 0 8px 0 18px; border-radius: 14px; font-size: 13px; letter-spacing: .04em; color: var(--ink-2); }
.rail-div { margin-inline: 10px; color: var(--muted); }
.chalk-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 14px; border-radius: 9px; background: var(--chip); color: var(--ink); font-size: 12.5px; font-weight: 600; letter-spacing: .04em; }
.chalk-board { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; border: 4px solid #414244; border-radius: 4px; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse at 18% 20%, rgb(255 255 255 / .035), transparent 55%), linear-gradient(165deg, rgb(255 255 255 / .012), transparent 40%, rgb(0 0 0 / .05)), #262628; box-shadow: 0 0 0 1px #202123, inset 0 2px 5px rgb(0 0 0 / .3), inset 0 -2px rgb(0 0 0 / .4), 0 40px 90px -34px rgb(0 0 0 / .5), 0 14px 30px -14px rgb(0 0 0 / .3); }
.chalk-board::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; opacity: .065; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.74' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.chalk-canvas { position: relative; flex: 1; min-height: 0; }
.chalk-canvas::before { content: ""; position: absolute; inset: 4% 3%; pointer-events: none; background: radial-gradient(ellipse at 20% 44%, rgb(240 240 236 / .025), transparent 45%), radial-gradient(ellipse at 90% 70%, rgb(240 240 236 / .016), transparent 30%); }
.chalk-scene { position: relative; padding: 52px 56px 70px; }
.chalk-story h2 { color: var(--chalk); font: 400 clamp(36px, 4.1vw, 53px)/1.38 var(--chalk-font); letter-spacing: .03em; margin-top: 20px; }
.chalk-story h3 { color: var(--chalk); font: 400 27px/1.6 var(--chalk-font); margin-top: 16px; }
.chalk-kicker { font: 13px/1.6 var(--chalk-font); color: #b4b4b2; letter-spacing: .05em; }
.chalk-body { margin-top: 25px; color: var(--chalk-muted); font: 17px/1.9 var(--chalk-font); }
.chalk-small { font-size: 15px; }
.chalk-note { color: var(--chalk-yellow); font: 21px/1.7 var(--chalk-font); margin-top: 32px; transform: rotate(-3deg); }
.geometry-scene { display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 78px; }
.chalk-geometry { text-align: center; }
.chalk-cube { display: block; width: 100%; max-width: 460px; margin: 0 auto; overflow: visible; color: #e6e6e2; filter: url(#chalk-grain); }
.cube-plane { opacity: .7; }
.cube-hidden { stroke: rgb(190 190 186 / .4); }
.cube-blue { stroke: var(--chalk-blue); stroke-width: 3.4; }
.cube-yellow { stroke: var(--chalk-yellow); stroke-width: 3.4; }
.cube-translation { stroke: rgb(200 200 196 / .6); stroke-width: 1.4; }
.cube-angle { stroke: var(--chalk-yellow); stroke-width: 2; }
.cube-labels { fill: #dcdcd8; font: 19px Georgia, serif; }
.cube-angle-label { fill: var(--chalk-yellow); font: 22px Georgia, serif; }
.geometry-relation { color: var(--chalk-blue); font: 23px/1.7 var(--chalk-font); margin-top: 16px; letter-spacing: .025em; }
.geometry-answer { position: relative; display: inline-block; padding-bottom: 7px; color: var(--chalk-yellow); font: 21px/1.7 var(--chalk-font); margin-top: 13px; }
.geometry-answer::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; border-top: 1.5px solid rgb(228 220 194 / .6); border-radius: 50%; transform: rotate(-1.2deg); }
.chalk-title-rule { width: 270px; height: 18px; margin-top: 9px; display: block; fill: none; stroke: var(--chalk-yellow); stroke-width: 1.8; stroke-linecap: round; }
.chalk-copy > .chalk-body { margin-top: 22px; }
.routine-scene > h2 { margin-top: 20px; }
.chalk-color-blue { color: var(--chalk-blue); }
.chalk-color-yellow { color: var(--chalk-yellow); }
.chalk-route { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 50px; margin-top: 50px; }
.chalk-route > div { position: relative; }
.chalk-route > div:not(:last-child)::after { content: "↝"; position: absolute; right: -32px; top: 38px; color: #b8b8b4; font: 32px/1 var(--chalk-font); transform: rotate(-8deg); }
.chalk-route .chalk-note { color: var(--chalk-blue); font-size: 19px; margin: 0; }
.chalk-route .chalk-body { font-size: 16px; margin-top: 18px; }
.chalk-route-mark { color: var(--chalk-yellow); font: 17px/1.7 var(--chalk-font); margin-top: 25px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px; text-decoration-color: rgb(228 220 194 / .36); }
.teacher-scene { display: grid; grid-template-columns: 1fr 1fr; gap: 115px; align-items: center; }
.chalk-teacher-notes { padding-top: 35px; }
.chalk-teacher-notes > p { font: 26px/1.6 var(--chalk-font); margin-top: 24px; }
.chalk-teacher-notes > p > span:not(.chalk-letter):not(.chalk-accessible) { color: var(--chalk-blue); margin-right: 12px; }
.chalk-signature { width: 90%; height: 52px; margin-top: 12px; overflow: visible; fill: none; stroke: rgb(228 220 194 / .65); stroke-width: 1.6; stroke-linecap: round; }
.chalk-teacher-notes > p.chalk-last-note { color: var(--chalk-yellow); font-size: 19px; margin-top: 8px; transform: rotate(-3deg); }
/* 深色凹槽与前沿构成实体粉笔托槽，粉笔落在上方承托面。 */
.board-ledge { position: relative; z-index: 5; flex: none; height: 26px; background: linear-gradient(180deg, #18191b 0 5px, #56585b 5px 8px, #414346 8px 19px, #2c2e30 19px); border-top: 1px solid rgb(255 255 255 / .18); box-shadow: inset 0 2px 3px rgb(0 0 0 / .6), inset 0 -1px rgb(255 255 255 / .12), 0 -2px 4px rgb(0 0 0 / .25); }
.chalk-stick { position: absolute; right: 15%; bottom: 17px; width: 36px; height: 6px; background: #e6e6e1; border-radius: 1px; box-shadow: 0 2px 2px rgb(0 0 0 / .4); transform: rotate(-3deg); }
.chalk-stick.yellow { right: calc(15% + 49px); width: 30px; background: #d9d2b8; transform: rotate(2deg); }
.chalk-eraser, .chalk-tip { display: none; }
.chalk-accessible { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.chalk-letter { display: inline; }
.chalk-dust-layer { display: none; }
.js .chalk-pending .chalk-scene { visibility: hidden; }

/* 动画模式：整面黑板钉在视口，滚动控制三幕“先擦后写”；不拦截滚轮 */
.chalk-story.is-animated { height: calc(240svh + min(920px, 100svh - var(--nav-h))); }
.is-animated .chalk-sticky { position: sticky; top: var(--nav-h); height: min(920px, calc(100svh - var(--nav-h))); padding: 0 0 12px; }
.is-animated .chalk-scene { position: absolute; inset: 0; padding: 36px 48px 55px; opacity: 0; pointer-events: none; mask-repeat: no-repeat; mask-size: 100% 12.6%; -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% 12.6%; }
.is-animated .chalk-scene.is-current { opacity: 1; }
.is-animated .chalk-letter { display: inline-block; -webkit-mask-image: linear-gradient(135deg, #000 calc(var(--stroke, 0) * 125% - 25%), transparent calc(var(--stroke, 0) * 125%)); mask-image: linear-gradient(135deg, #000 calc(var(--stroke, 0) * 125% - 25%), transparent calc(var(--stroke, 0) * 125%)); text-shadow: .5px .3px 0 rgb(240 241 229 / .2), -.4px .4px 0 rgb(240 241 229 / .13); }
.is-animated .chalk-draw { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--draw, 0)); }
.is-animated .chalk-piece { clip-path: inset(0 calc((1 - var(--draw, 0)) * 100%) 0 0); }
.is-animated .geometry-answer::after { opacity: var(--piece-progress, 0); }
.is-animated .chalk-dust-layer { display: block; position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 3; }
.chalk-dust-layer > canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .58; mix-blend-mode: screen; }
.chalk-dust-layer > i { position: absolute; width: var(--dust-size); height: var(--dust-size); border-radius: 50%; background: #e8e8e2; animation: chalk-dust-fall var(--dust-life) cubic-bezier(.2, .4, .45, 1) both; }
@keyframes chalk-dust-fall { 0% { opacity: 0; transform: translate(0, 0); } 14% { opacity: .36; } 60% { opacity: .15; } 100% { opacity: 0; transform: translate(var(--dust-x), var(--dust-y)) scale(.45); } }
.is-animated .chalk-eraser { display: block; position: absolute; width: 69px; height: 27px; margin: -13px 0 0 -34px; border-radius: 2px; background: #ab9473; box-shadow: 0 4px 0 #d0cabc; pointer-events: none; z-index: 4; opacity: 0; transform: rotate(-5deg); }
.chalk-eraser > i { position: absolute; inset: 5px 9px; background: #86775c; border-radius: 1px; }
.chalk-eraser::after { content: ""; position: absolute; inset: -16px -29px; background: radial-gradient(ellipse, rgb(236 236 230 / .13), transparent 70%); }
.is-animated .chalk-tip { display: block; position: absolute; width: 5px; height: 19px; margin: -6px 0 0 5px; border-radius: 1px; background: #f1f1ee; pointer-events: none; opacity: 0; transform: rotate(-28deg); box-shadow: 0 0 13px rgb(236 236 230 / .17); }

/* ======================= FAQ / 下载 / 联系 ======================= */
.faq { border-radius: 18px; overflow: hidden; }
.faq details + details { border-top: .5px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; font-size: 16.5px; font-weight: 500; transition: background-color .15s var(--ease); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: var(--hover); }
.faq summary .ic { color: var(--muted); font-size: 18px; transition: transform .3s var(--ease); }
.faq details[open] summary .ic { transform: rotate(180deg); }
.faq summary:focus-visible { outline-offset: -2px; border-radius: 0; }
.ans { padding: 0 22px 20px; color: var(--ink-2); font-size: 15.5px; line-height: 1.85; max-width: 62ch; }
@media (prefers-reduced-motion: no-preference) { .faq details[open] .ans { animation: fade .35s var(--ease-enter); } }
@keyframes fade { from { opacity: 0; transform: translateY(-6px); } }

/* 下载独占一整屏（导航下方）：公式 SVG 铺满背景（用遮罩着色，跟随外观，上下边缘柔和淡出），玻璃大卡片承载内容；整屏不设独立底色，与页面背景无硬边 */
.dl-screen { position: relative; isolation: isolate; min-height: calc(100svh - var(--nav-h)); display: grid; place-items: center; padding: 72px 16px; text-align: center; scroll-margin-top: -8px; }
.dl-screen::before { content: ""; position: absolute; left: 0; right: 0; top: -80px; bottom: -80px; z-index: -1; pointer-events: none; background: var(--muted); opacity: .2;
  -webkit-mask: url("../assets/science-formulas.svg") center / cover no-repeat, linear-gradient(180deg, transparent 0, #000 160px, #000 calc(100% - 160px), transparent 100%); -webkit-mask-composite: source-in;
  mask: url("../assets/science-formulas.svg") center / cover no-repeat, linear-gradient(180deg, transparent 0, #000 160px, #000 calc(100% - 160px), transparent 100%); mask-composite: intersect; }
:root[data-resolved="dark"] .dl-screen::before { background: #98989d; opacity: .26; }
.dl-in { position: relative; max-width: 640px; width: 100%; padding: 56px 36px 48px; border-radius: 28px; display: flex; flex-direction: column; align-items: center; box-shadow: var(--shadow-win), inset 0 1px 0 var(--hi); }
.dl-mark { width: 64px; height: 64px; display: grid; place-items: center; margin-bottom: 22px; }
.dl-kicker { font-size: 13px; font-weight: 600; letter-spacing: .18em; color: var(--muted); }
.dl-screen h2 { margin-top: 18px; font: 700 clamp(44px, 5.6vw, 72px)/1.15 var(--font-display); letter-spacing: -.01em; color: var(--ink); }
.dl-screen h2 span { color: inherit; }
.dl-sub { margin-top: 18px; font-size: 16px; color: var(--ink-2); }
.dl-screen .cta { margin-top: 30px; }
.dl-screen .fine { margin-top: 16px; }

.contact { border-radius: 22px; padding: 40px 44px; display: flex; gap: 32px; align-items: center; justify-content: space-between; }
.ct-t { flex: 1; min-width: 0; }
.contact h2 { font-size: clamp(26px, 3.6vw, 36px); }
.ct-t > p:not(.kicker) { margin-top: 12px; color: var(--ink-2); }
.ct-list { margin: 20px 0; display: grid; gap: 8px; }
.ct-list li { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: 15px; }
.ct-list .ic { color: var(--muted); font-size: 18px; }
.ct-qr { text-align: center; font-size: 13px; color: var(--muted); flex: none; }
.ct-qr-code { display: block; position: relative; width: 200px; aspect-ratio: 1; overflow: hidden; border-radius: 14px; border: .5px solid var(--line-strong); background: #262626; margin-bottom: 12px; }
/* 原图为 1080 × 1920，在页面中显示 (150, 610) 起的 780 × 780 完整码区及留白，不改动码点。 */
.ct-qr-code img { position: absolute; display: block; width: 138.461539%; max-width: none; height: auto; left: -19.230769%; top: -78.205128%; }
.ct-qr figcaption { color: var(--ink-2); }
.ct-qr figcaption span { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }

.foot { padding: 28px 0 44px; color: var(--muted); font-size: 14px; }
.foot-in { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; border-top: .5px solid var(--line); padding-top: 24px; }
.foot-in p { flex: 1; min-width: 200px; }

.dlg { border-radius: 16px; padding: 24px 26px 22px; width: min(420px, calc(100% - 32px)); color: var(--ink); box-shadow: 0 0 0 .5px var(--line-strong), 0 30px 80px -20px rgb(0 0 0 / .4); background: var(--panel-solid); }
.dlg::backdrop { background: rgb(0 0 0 / .25); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.dlg h3 { font: 600 18px/1.4 var(--font-display); }
.dlg p { margin: 8px 0 20px; color: var(--ink-2); font-size: 15px; line-height: 1.8; }
.dlg form { display: flex; justify-content: flex-end; }
@media (prefers-reduced-motion: no-preference) { .dlg[open] { animation: pop .28s var(--ease-enter); } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.97); } }

.toast { position: fixed; left: 50%; bottom: 28px; z-index: 90; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; padding: 10px 18px; border-radius: 12px; font-size: 14px; transition: opacity .25s var(--ease), transform .25s var(--ease-enter); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

#faq { padding-bottom: 72px; }
#demo { padding-bottom: 72px; }
#ai { padding-top: 40px; }
#contact { padding-top: 56px; }

/* ======================= 看它怎么用：四类场景、十四个界面示意小动画 =======================
   窗口上累加 s1…s4 状态类，用 CSS 过渡呈现画面（glass.js 的 initMinis 按时间表加类、打字、数字递增）。
   HTML 写的是最终画面：无脚本、减少动态效果时直接看到它；脚本只在进入视口时复位并播放。
   只动 opacity / transform；窗口高度固定，播放过程不改变布局。
   分类标签（.how-tablist）切换四个面板（.how-panel）：有脚本时只显示选中的一组，无脚本时四组叠放、各带小标题。 */
#how { padding-top: 56px; padding-bottom: 28px; }
#how .sec-h { margin-bottom: 28px; }
.how-tabs { display: none; justify-content: center; margin-bottom: 36px; }
.js .how-tabs { display: flex; }
.how-tablist { display: flex; max-width: 100%; gap: 2px; padding: 4px; border-radius: 999px; background: var(--panel); border: .5px solid var(--line-strong); box-shadow: var(--shadow), inset 0 1px 0 var(--hi); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.how-tablist::-webkit-scrollbar { display: none; }
.how-tab { flex: none; height: 34px; padding: 0 16px; border-radius: 999px; border: .5px solid transparent; background: transparent; color: var(--ink-2); font: 500 14px/1 var(--font-ui); white-space: nowrap; cursor: pointer; transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.how-tab:hover { background: var(--hover); color: var(--ink); }
.how-tab[aria-selected="true"] { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-on-soft); }
.how-tab:focus-visible { outline-offset: 1px; border-radius: 999px; }
.how-panels { overflow-anchor: none; }
.how-panel + .how-panel { margin-top: 48px; }
.how-panel:focus-visible { outline-offset: 12px; border-radius: 14px; }
.how-group-h { margin-bottom: 16px; font: 600 15px/1.4 var(--font-display); color: var(--muted); }
.js .how-group-h { display: none; }
.js .how-panel + .how-panel { margin-top: 0; }
.js .how-panel:not(.is-active) { display: none; }
.mini-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 20px; }
.mn { min-width: 0; container-type: inline-size; }
.mn h3 { margin-top: 16px; font: 600 17px/1.4 var(--font-display); letter-spacing: 0; }
.mn > p { margin-top: 4px; font-size: 14.5px; line-height: 1.75; color: var(--ink-2); text-wrap: balance; }

.mn-win { position: relative; height: 200px; display: grid; grid-template-rows: 32px minmax(0, 1fr); overflow: hidden; border-radius: 12px; background: var(--panel-solid); border: .5px solid var(--line-strong); box-shadow: var(--shadow); color: var(--ink); font-size: 12px; line-height: 1.5; user-select: none; contain: paint; }
.mn-win .ic { font-size: 14px; }
.mn-bar { display: flex; align-items: center; gap: 10px; padding: 0 10px; border-bottom: .5px solid var(--line); background: var(--panel-2); }
.mn-bar .w-traffic { padding: 0; gap: 6px; }
.mn-bar .w-traffic i { width: 9px; height: 9px; }
.mn-bar b { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mn-bar .tag-demo { flex: none; height: 18px; padding: 0 7px; font-size: 10.5px; background: var(--panel-3); }
.mn-body { position: relative; min-height: 0; padding: 10px 12px; transition: opacity .28s var(--ease); }
.mn-win.is-out .mn-body { opacity: 0; }
.mn-win.no-t, .mn-win.no-t *, .mn-win.no-t *::before, .mn-win.no-t *::after { transition: none !important; animation: none !important; }
.mn-paper { padding: 6px 10px; border-radius: 6px; border: .5px solid rgb(0 0 0 / .1); background: #fff; color: #222; box-shadow: 0 6px 16px -8px rgb(0 0 0 / .3); font: 11.5px/1.5 var(--font-paper); }
.mn-paper .conf, .mn-paper .m3-bar { font-family: var(--font-ui); }
.mn-paper b { font: 500 10px/1.9 var(--font-num); color: var(--muted); }

/* 1 一句话出卷：底部输入条打字 → 发送 → 草稿滑入 */
.m1-paper { position: absolute; left: 12px; right: 12px; top: 10px; height: 108px; padding: 8px 12px; opacity: 0; transform: translateY(22px); transition: opacity .35s var(--ease), transform .5s var(--ease-enter); }
.s3 .m1-paper { opacity: 1; transform: none; }
.m1-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.m1-head > b { font: 600 12px/1.5 var(--font-ui); color: #222; }
.m1-head .conf { height: 18px; font-size: 10.5px; opacity: 0; transition: opacity .3s var(--ease); }
.s4 .m1-head .conf { opacity: 1; }
.m1-q { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.m1-q > b { width: 12px; font-size: 9.5px; line-height: 1; }
.ln { display: block; height: 5px; width: var(--w); border-radius: 3px; background: rgb(110 120 130 / .28); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease-enter) calc(var(--i) * 90ms + 200ms); }
.s3 .ln { transform: none; }
.m1-bar { position: absolute; left: 12px; right: 12px; bottom: 10px; height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 5px 0 11px; border-radius: 11px; border: .5px solid var(--line-strong); background: var(--panel-solid); color: var(--muted); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.m1-in { position: relative; flex: 1; min-width: 0; height: 20px; display: flex; align-items: center; overflow: hidden; white-space: nowrap; color: var(--ink); font-size: 12px; }
.m1-ph { position: absolute; left: 0; color: var(--muted); transition: opacity .2s var(--ease); }
.s1 .m1-ph { opacity: 0; }
.s3 .m1-ph { opacity: 1; }
.caret { flex: none; width: 1px; height: 14px; margin-left: 1px; background: var(--accent); opacity: 0; }
.s1 .caret { opacity: 1; animation: mn-blink 1s steps(2, start) infinite; }
.s3 .caret { opacity: 0; animation: none; }
.m1-send { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--btn-bg); color: #fff; }
.m1-send .ic { font-size: 13px; }
.s2 .m1-send { animation: mn-pulse .5s var(--ease); }
@keyframes mn-blink { 50% { opacity: 0; } }
@keyframes mn-pulse { 40% { transform: scale(1.25); box-shadow: 0 0 0 5px color-mix(in srgb, var(--btn-bg) 26%, transparent); } }

/* 2 按场景出卷：选中场景 → 载入教师保存的结构并逐项计数 → 汇总 */
.m2-k { font-size: 11px; font-weight: 600; color: var(--muted); }
.m2-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.m2-chips span { height: 24px; display: inline-flex; align-items: center; padding: 0 11px; border-radius: 999px; border: .5px solid var(--line); background: var(--panel-2); color: var(--ink-2); font-size: 12px; white-space: nowrap; transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease); }
.s1 .m2-chips .pk { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-on-soft); font-weight: 600; animation: mn-pop .35s var(--ease-enter); }
@keyframes mn-pop { 40% { transform: scale(1.08); } }
.m2-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.m2-tiles > div { padding: 6px 4px 5px; text-align: center; border-radius: 8px; border: .5px solid var(--line); background: var(--panel-2); opacity: .45; transition: opacity .3s var(--ease); }
.s2 .m2-tiles > div { opacity: 1; }
.m2-tiles span { display: block; font-size: 11px; color: var(--muted); }
.m2-tiles b { display: block; font-size: 20px; line-height: 1.3; font-weight: 600; }
.m2-sum { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 6px; border-top: .5px solid var(--line); opacity: 0; transform: translateY(4px); transition: opacity .3s var(--ease), transform .35s var(--ease-enter); }
.s3 .m2-sum { opacity: 1; transform: none; }
.m2-sum b { font-size: 13px; font-weight: 600; }
.m2-sum span { color: var(--muted); font-size: 11.5px; }

/* 3 卷面上直接换：悬停出现小工具条 → 按「更难」→ 题目换成更难的 */
.m3-paper { display: grid; align-content: start; padding: 6px 8px; }
.m3-q { display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: 6px; padding: 5px 6px; border-radius: 6px; }
.m3-q > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m3-hot { transition: background-color .25s var(--ease); }
.s1 .m3-hot { background: var(--accent-soft); }
.s4 .m3-hot { background: transparent; }
.m3-bar { position: relative; grid-column: 1 / -1; height: 22px; }
.m3-badge { position: absolute; left: 0; top: 2px; display: inline-flex; align-items: center; height: 18px; padding: 0 8px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-on-soft); font: 600 10.5px/1 var(--font-ui); opacity: 0; transform: translateY(3px); transition: opacity .3s var(--ease), transform .35s var(--ease-enter); }
.s4 .m3-badge { opacity: 1; transform: none; }
.m3-tools { position: absolute; right: 0; top: 0; display: flex; gap: 2px; padding: 2px; border-radius: 8px; border: .5px solid var(--line-strong); background: var(--panel-solid); box-shadow: 0 4px 12px -4px rgb(0 0 0 / .25); font: 500 11px/1 var(--font-ui); opacity: 0; transform: translateY(4px); transition: opacity .25s var(--ease), transform .3s var(--ease-enter); }
.s1 .m3-tools { opacity: 1; transform: none; }
.s4 .m3-tools { opacity: 0; transform: translateY(-3px); }
.m3-tools > span { position: relative; padding: 5px 7px; border-radius: 6px; color: var(--ink-2); white-space: nowrap; transition: background-color .15s var(--ease), color .15s var(--ease), transform .15s var(--ease); }
.s3 .m3-tools .go { background: var(--btn-bg); color: #fff; transform: scale(.94); }
.cur { position: absolute; right: -5px; bottom: -9px; width: 13px; height: 13px; fill: #1d1d1f; stroke: #fff; stroke-width: 1.2; stroke-linejoin: round; opacity: 0; transform: translate(16px, 20px); transition: opacity .25s var(--ease), transform .4s var(--ease-enter); }
.s2 .cur { opacity: 1; transform: none; }
.m3-txt { display: grid; }
.m3-q > .m3-txt { white-space: normal; overflow: visible; }
.m3-txt > span { grid-area: 1 / 1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; transition: opacity .3s var(--ease), transform .35s var(--ease-enter); }
.m3-txt .new { opacity: 0; transform: translateY(6px); }
.s4 .m3-txt .old { opacity: 0; transform: translateY(-6px); }
.s4 .m3-txt .new { opacity: 1; transform: none; }

/* 4 缺题就地补：琥珀色空位 → 按「AI 出一道」→ 出题中 → 待核对 + 自查 */
.m4-paper { display: grid; align-content: start; padding: 4px 8px 8px; }
.m4-q { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 6px; padding: 3px 4px; }
.m4-q > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m4-slot { display: grid; margin-top: 2px; padding: 7px 9px; border-radius: 8px; border: 1px dashed color-mix(in srgb, var(--warn) 55%, transparent); background: var(--warn-soft); transition: background-color .35s var(--ease), border-color .35s var(--ease); }
.m4-slot > * { grid-area: 1 / 1; min-width: 0; transition: opacity .3s var(--ease); }
.m4-gap > p { display: flex; align-items: center; gap: 6px; }
.m4-lab { font: 600 11.5px/1.5 var(--font-ui); color: var(--warn); }
.m4-acts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; font: 500 10.5px/1 var(--font-ui); }
.m4-acts > span { padding: 6px 6px; border-radius: 6px; border: .5px solid var(--line-strong); background: #fff; color: var(--ink-2); white-space: nowrap; transition: background-color .15s var(--ease), color .15s var(--ease), transform .15s var(--ease); }
.s1 .m4-acts .go { background: var(--btn-bg); border-color: transparent; color: #fff; transform: scale(.95); }
.m4-busy { display: flex; align-items: center; justify-content: center; gap: 8px; font: 12px/1.5 var(--font-ui); color: var(--ink-2); opacity: 0; }
.m4-new { align-content: center; display: grid; gap: 4px; opacity: 0; }
.m4-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.m4-tags .conf { height: 19px; gap: 4px; font-size: 10.5px; }
.m4-tags .conf .ic { font-size: 12px; }
.m4-tags .conf.ok { opacity: 0; transition: opacity .3s var(--ease); }
.s4 .m4-tags .conf.ok { opacity: 1; }
.m4-new > p { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 6px; }
.m4-new > p > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.s2 .m4-gap { opacity: 0; }
.s2 .m4-busy { opacity: 1; }
.s3 .m4-busy { opacity: 0; }
.s3 .m4-new { opacity: 1; }
.s3 .m4-slot { border-style: solid; border-color: var(--line); background: #fff; }
.mn-win:not(.s2) .spin { animation: none; }

/* 5 避开做过的题：选班级 → 可用题数递减 */
.m2-chips + .m5-stat { margin-top: 14px; }
.m5-stat { display: flex; align-items: baseline; gap: 6px; }
.m5-stat b { min-width: 2ch; font-size: 28px; line-height: 1.1; font-weight: 600; }
.m5-stat span { color: var(--ink-2); font-size: 12.5px; }
.m5-stat em { margin-left: auto; font-style: normal; font-size: 11.5px; color: var(--muted); opacity: 0; transition: opacity .35s var(--ease); }
.s2 .m5-stat em { opacity: 1; }
.m5-grid { display: grid; grid-template-columns: repeat(19, minmax(0, 1fr)); gap: 3px; margin-top: 12px; }
.m5-grid span { aspect-ratio: 3 / 4; border-radius: 3px; background: var(--accent); opacity: .75; transition: background-color .25s var(--ease), opacity .25s var(--ease); }
.m5-grid span.gone { background: var(--panel-3); opacity: 1; }

/* 6 讲评巩固：原题被选中 → 连线 → 两张变式卡扇出 */
.m6-src { position: relative; z-index: 2; padding: 6px 10px 7px; border-radius: 8px; border: .5px solid var(--line-strong); background: var(--panel-2); transition: background-color .3s var(--ease), border-color .3s var(--ease); }
.s1 .m6-src { background: var(--accent-soft); border-color: var(--accent-line); }
.m6-src p { margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m6-link { position: relative; height: 14px; opacity: 0; transition: opacity .35s var(--ease); }
.m6-link::before { content: ""; position: absolute; left: 25%; right: 25%; top: 6px; bottom: 0; border: 1px solid color-mix(in srgb, var(--muted) 55%, transparent); border-bottom: 0; border-radius: 6px 6px 0 0; }
.m6-link::after { content: ""; position: absolute; left: 50%; top: 0; height: 7px; border-left: 1px solid color-mix(in srgb, var(--muted) 55%, transparent); }
.s2 .m6-link { opacity: 1; }
.m6-vars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.m6-v { padding: 6px 9px 7px; border-radius: 8px; border: .5px solid var(--line); background: var(--panel-2); opacity: 0; transition: opacity .3s var(--ease), transform .5s var(--ease-enter); }
.m6-v.a { transform: translate(26%, -66px) scale(.9); }
.m6-v.b { transform: translate(-26%, -66px) scale(.9); transition-delay: .14s; }
.s3 .m6-v { opacity: 1; transform: none; }
.m6-v p { margin-top: 4px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

/* ======================= 新增场景卡：n1…n6（文科材料题、结构模板、先找演示、难度、教程）与 h7…h9（搜索、原卷对照、个人资料） =======================
   沿用上面的 .mn 体系：容器、窗口、状态类 s1…s4 与脚本（glass.js 的 initMinis，SCRIPTS 里 reading / struct / reuse / level / tour / search / marks / notes）完全一致。
   HTML 写最终画面，只动 opacity / transform。 */
.ncur { position: absolute; right: -5px; bottom: -9px; z-index: 3; width: 13px; height: 13px; fill: #1d1d1f; stroke: #fff; stroke-width: 1.2; stroke-linejoin: round; opacity: 0; transform: translate(16px, 20px); transition: opacity .25s var(--ease), transform .4s var(--ease-enter); pointer-events: none; }

/* 1 文科材料题：材料 → 小问逐个列出 → 打开「参考答案 · 评分参考」，答案框出现在第（1）问下面 */
.n1-paper { position: absolute; left: 12px; right: 12px; top: 10px; bottom: 10px; padding: 7px 10px 0; display: grid; align-content: start; gap: 6px; overflow: hidden; }
.n1-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 18px; }
.n1-head .conf { flex: none; height: 18px; font-size: 10.5px; }
.n1-tg { display: inline-flex; align-items: center; gap: 5px; min-width: 0; font: 500 10.5px/1 var(--font-ui); color: var(--ink-2); white-space: nowrap; opacity: 0; transition: opacity .3s var(--ease); }
.s2 .n1-tg { opacity: 1; }
.n1-sw { position: relative; flex: none; width: 20px; height: 12px; border-radius: 6px; background: var(--panel-3); transition: background-color .25s var(--ease); }
.n1-sw > span { position: absolute; left: 2px; top: 2px; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 .5px 1.5px rgb(0 0 0 / .3); transition: transform .25s var(--ease-enter); }
.s3 .n1-sw { background: var(--btn-bg); }
.s3 .n1-sw > span { transform: translateX(8px); }
.n1-mat { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 6px; align-items: start; opacity: 0; transition: opacity .3s var(--ease); }
.s1 .n1-mat { opacity: 1; }
.n1-k { font: 600 10px/1 var(--font-ui); color: var(--muted); }
.n1-lines { display: grid; gap: 6px; }
.n1-row { display: flex; gap: 4px; }
.s1 .n1-mat .ln { transform: none; }
.n1-ul { position: relative; }
.n1-ul::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3.5px; border-bottom: 1px solid var(--accent); }
.n1-q { height: 15px; font-size: 11px; line-height: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(8px); transition: opacity .3s var(--ease), transform .4s var(--ease-enter); }
.s2 .n1-q { opacity: 1; transform: none; }
.n1-q + .n1-ref + .n1-q { transition-delay: .14s; }
.n1-ref { display: grid; gap: 3px; padding: 4px 8px; border-radius: 5px; border: .5px solid var(--line); background: var(--panel-2); opacity: 0; transform: translateY(-4px); transition: opacity .3s var(--ease), transform .35s var(--ease-enter); }
.s3 .n1-ref { opacity: 1; transform: none; }
.n1-ref p { display: flex; align-items: center; gap: 6px; height: 11px; }
.n1-ref b { flex: none; line-height: 1; }
.n1-ref .ln { flex: 1 1 auto; width: auto; max-width: var(--w); }
.n1-ref em { flex: none; margin-left: auto; font: normal 10px/1 var(--font-ui); color: var(--muted); }

/* 2 结构存成模板：按「载入」→ 单选 / 复合逐项计数 → 汇总 */
.n2 { display: grid; align-content: start; gap: 4px; }
.n2-row { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 5px 0 10px; border-radius: 8px; border: .5px solid var(--line); background: var(--panel-2); color: var(--muted); font-size: 11.5px; }
.n2-row > span:first-child { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n2-my { border-color: var(--accent-line); background: var(--accent-soft); color: var(--ink); font-weight: 500; }
.n2-load { position: relative; flex: none; height: 18px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 6px; background: var(--btn-bg); color: #fff; font: 600 10.5px/1 var(--font-ui); transition: transform .15s var(--ease), filter .15s var(--ease); }
.s1 .n2-load { transform: scale(.94); filter: brightness(.92); }
.s2 .n2-load { transform: none; filter: none; }
.s1 .n2-load .ncur { opacity: 1; transform: none; }
.n2-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 6px; }
.n2-tiles > div { display: flex; align-items: baseline; justify-content: space-between; padding: 4px 11px; }
.n2-tiles span { display: inline; }
.n2-tiles b { display: inline; font-size: 16px; line-height: 1.4; }
.n2 .m2-sum b.num { display: inline-block; min-width: 2ch; font-family: inherit; }

/* 4 先找现成的演示：底部输入条打字 → 发送 → 结果卡滑上来 → 按「打开」 */
.n4-ctx { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; line-height: 18px; }
.n4-ctx .conf { height: 18px; font-size: 10.5px; }
.n4-card { position: absolute; left: 12px; right: 12px; bottom: 52px; padding: 8px 10px 9px; border-radius: 10px; border: .5px solid var(--line-strong); background: var(--panel-solid); box-shadow: 0 6px 16px -8px rgb(0 0 0 / .3); opacity: 0; transform: translateY(18px); transition: opacity .3s var(--ease), transform .5s var(--ease-enter); }
.s2 .n4-card { opacity: 1; transform: none; }
.n4-k { display: flex; align-items: center; gap: 5px; font-size: 10.5px; line-height: 16px; color: var(--muted); }
.n4-k .ic { font-size: 12px; color: var(--accent); }
.n4-t { margin-top: 1px; font-size: 12.5px; line-height: 18px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n4-btns { display: flex; gap: 5px; margin-top: 7px; font: 500 10.5px/1 var(--font-ui); }
.n4-btns > span { position: relative; flex: none; height: 22px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 6px; border: .5px solid var(--line-strong); background: var(--panel-2); color: var(--ink-2); white-space: nowrap; transition: transform .15s var(--ease), filter .15s var(--ease); }
.n4-btns > .go { background: var(--btn-bg); border-color: transparent; color: #fff; }
.s3 .n4-btns > .go { transform: scale(.94); filter: brightness(.92); }
.s3 .n4-btns .ncur { opacity: 1; transform: none; }
.s2 .n4-bar .m1-ph { opacity: 1; }
.s2 .n4-bar .caret { opacity: 0; animation: none; }

/* 5 难度由你来定：AI 给建议 → 刻度上的标记从 0.55 移到 0.60 → 已保存 */
.n5 { display: grid; align-content: start; gap: 6px; }
.n5-cur { display: flex; align-items: baseline; gap: 8px; height: 18px; color: var(--ink-2); font-size: 12px; line-height: 18px; }
.n5-cur b { font: 600 13px/1 var(--font-num); color: var(--ink); }
.n5-cls { height: 24px; display: flex; align-items: center; padding: 0 9px; border-radius: 7px; border: .5px solid var(--line-strong); background: var(--panel-solid); color: var(--ink); font-size: 11.5px; white-space: nowrap; overflow: hidden; }
.n5-cls span { color: var(--muted); }
.n5-ai { display: flex; align-items: center; gap: 8px; height: 22px; opacity: 0; transform: translateY(4px); transition: opacity .3s var(--ease), transform .35s var(--ease-enter); }
.s1 .n5-ai { opacity: 1; transform: none; }
.n5-ai .conf { flex: none; height: 20px; gap: 4px; font-size: 10.5px; background: var(--accent-soft); color: var(--accent-on-soft); }
.n5-ai .conf .ic { font-size: 12px; }
.n5-ai em { min-width: 0; font: normal 10.5px/1.4 var(--font-ui); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n5-fin { margin-top: 2px; opacity: 0; transition: opacity .3s var(--ease); }
.s2 .n5-fin { opacity: 1; }
.n5-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 20px; }
.n5-top b { font-size: 12px; font-weight: 600; opacity: 0; transition: opacity .3s var(--ease) .5s; }
.s2 .n5-top b { opacity: 1; }
.n5-top .conf { height: 19px; gap: 4px; font-size: 10.5px; opacity: 0; transition: opacity .3s var(--ease); }
.n5-top .conf .ic { font-size: 12px; }
.s3 .n5-top .conf { opacity: 1; }
.n5-trk { position: relative; height: 12px; margin-top: 4px; }
.n5-bar { position: absolute; left: 0; right: 0; top: 4px; height: 4px; border-radius: 2px; background: var(--panel-3); overflow: hidden; }
.n5-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 55%; background: var(--accent); transform-origin: left; transition: transform .5s var(--ease-enter) .15s; }
.s2 .n5-fill { transform: scaleX(1.0909); }
.n5-ring { position: absolute; left: 65%; top: 1px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; border: 1.5px solid var(--accent); background: var(--panel-solid); }
.n5-mk { position: absolute; inset: 0; transition: transform .5s var(--ease-enter) .15s; }
.s2 .n5-mk { transform: translateX(5%); }
.n5-dot { position: absolute; left: 55%; top: 1px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--panel-solid), 0 1px 3px rgb(0 0 0 / .3); }
.n5-sc { display: flex; justify-content: space-between; font: 9.5px/1.3 var(--font-num); color: var(--muted); }

/* 6 第一次用有教程：画面变暗 + 聚光框依次落在「题库」「审核」「组卷」，说明卡换步数与标题 */
.n6 { overflow: hidden; }
.n6-side { position: absolute; left: 12px; top: 10px; width: 96px; display: grid; gap: 2px; align-content: start; }
.n6-it { display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; color: var(--ink-2); white-space: nowrap; }
.n6-it .ic { font-size: 13px; color: var(--muted); }
.n6-it.on { background: var(--accent-soft); color: var(--accent-on-soft); font-weight: 600; }
.n6-it.on .ic { color: var(--accent-on-soft); }
.n6-page { position: absolute; left: 118px; right: 12px; top: 10px; bottom: 10px; display: grid; grid-template-rows: 20px minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.n6-page > span { border-radius: 6px; border: .5px solid var(--line); background: var(--panel-2); }
.n6-ring { position: absolute; left: 10px; top: 8px; z-index: 1; width: 100px; height: 26px; border-radius: 8px; border: 1.5px solid var(--accent); box-shadow: 0 0 0 600px rgb(0 0 0 / .42); opacity: 0; transition: opacity .3s var(--ease), transform .45s var(--ease-enter); pointer-events: none; }
.s1 .n6-ring { opacity: 1; }
.s2 .n6-ring { transform: translateY(24px); }
.s3 .n6-ring { transform: translateY(48px); }
.n6-tip { position: absolute; left: 124px; right: 14px; top: 30px; z-index: 2; height: 84px; padding: 8px 10px; border-radius: 10px; border: .5px solid var(--line-strong); background: var(--panel-solid); box-shadow: 0 10px 24px -10px rgb(0 0 0 / .45); opacity: 0; transform: translateY(6px); transition: opacity .3s var(--ease), transform .4s var(--ease-enter); }
.s1 .n6-tip { opacity: 1; transform: none; }
.n6-th { display: flex; align-items: center; justify-content: space-between; height: 16px; }
.n6-th b { font-size: 11px; font-weight: 600; color: var(--accent-on-soft); }
.n6-n { display: grid; justify-items: end; width: 48px; font: 500 10.5px/1.5 var(--font-num); color: var(--muted); }
.n6-tt { display: grid; margin-top: 5px; font-size: 12px; line-height: 1.5; font-weight: 600; color: var(--ink); }
.n6-n em, .n6-tt span { grid-area: 1 / 1; font-style: normal; opacity: 0; transition: opacity .25s var(--ease); }
.n6-tt span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.n6-pg { position: absolute; left: 10px; right: 10px; bottom: 9px; height: 3px; border-radius: 2px; background: var(--panel-3); overflow: hidden; }
.n6-pg > i { display: block; height: 100%; border-radius: 2px; background: var(--accent); transform-origin: left; transform: scaleX(0); transition: transform .45s var(--ease-enter); }
.s1 .n6-pg > i { transform: scaleX(.069); }
.s2 .n6-pg > i { transform: scaleX(.241); }
.s3 .n6-pg > i { transform: scaleX(.517); }
.s1 .n6-n em:nth-child(1), .s1 .n6-tt span:nth-child(1) { opacity: 1; }
.s2 .n6-n em:nth-child(1), .s2 .n6-tt span:nth-child(1) { opacity: 0; }
.s2 .n6-n em:nth-child(2), .s2 .n6-tt span:nth-child(2) { opacity: 1; }
.s3 .n6-n em:nth-child(2), .s3 .n6-tt span:nth-child(2) { opacity: 0; }
.s3 .n6-n em:nth-child(3), .s3 .n6-tt span:nth-child(3) { opacity: 1; }

/* 7 材料和设问分开找：搜索框打字 → 范围选项移到「设问与考点」→ 两条结果（命中的设问高亮，同材料的另一问变淡） */
.h7 { display: grid; align-content: start; gap: 12px; }
.h7-top { display: flex; align-items: center; gap: 8px; }
.h7-field { flex: 1 1 0; min-width: 0; height: 28px; display: flex; align-items: center; gap: 6px; padding: 0 9px; border-radius: 8px; border: .5px solid var(--line-strong); background: var(--panel-solid); color: var(--muted); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.h7-field .ic { font-size: 13px; }
.h7-in { position: relative; flex: 1; min-width: 0; height: 20px; display: flex; align-items: center; overflow: hidden; white-space: nowrap; color: var(--ink); font-size: 12px; }
.h7-ph { position: absolute; left: 0; color: var(--muted); transition: opacity .2s var(--ease); }
.s1 .h7-ph { opacity: 0; }
.h7-seg { position: relative; flex: none; display: grid; grid-template-columns: repeat(3, 62px); padding: 2px; border-radius: 8px; background: var(--panel-2); font: 500 10.5px/20px var(--font-ui); }
.h7-thumb { position: absolute; left: 2px; top: 2px; bottom: 2px; width: 62px; border-radius: 6px; background: var(--accent-soft); box-shadow: 0 0 0 .5px var(--accent-line); transition: transform .35s var(--ease-enter); }
.s2 .h7-thumb { transform: translateX(200%); }
.h7-seg .o0, .h7-seg .o1, .h7-seg .o2 { position: relative; text-align: center; white-space: nowrap; color: var(--muted); transition: color .25s var(--ease); }
.h7-seg .o0 { color: var(--accent-on-soft); }
.s2 .h7-seg .o0 { color: var(--muted); }
.s2 .h7-seg .o2 { color: var(--accent-on-soft); }
.s2 .h7-seg .ncur { opacity: 1; transform: none; }
.h7-res { display: grid; gap: 6px; }
.h7-r { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 5px 10px; border-radius: 8px; border: .5px solid var(--line); background: var(--panel-2); opacity: 0; transform: translateY(6px); transition: opacity .3s var(--ease), transform .4s var(--ease-enter); }
.h7-r > div { flex: 1; min-width: 0; }
.h7-r p { font-size: 11.5px; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.h7-r em { font-style: normal; font-weight: 600; color: var(--accent-on-soft); }
.h7-r small { display: block; font: 10px/1.4 var(--font-ui); color: var(--muted); }
.h7-r .conf { flex: none; height: 18px; font-size: 10.5px; background: var(--accent-soft); color: var(--accent-on-soft); }
.h7-r.a { border-color: var(--accent-line); }
.h7-r.b { background: transparent; }
.h7-r.b p { color: var(--muted); }
.s3 .h7-r { opacity: 1; transform: none; }
.s3 .h7-r.b { transition-delay: .14s; }

/* 8 原卷画线、加点保留：原卷（纸面）→ 识别结果文字 → 下划线画出 → 加点 + 「画线、加点已保留」 */
.h8 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.h8-col { min-width: 0; display: grid; grid-template-rows: 16px minmax(0, 1fr); gap: 4px; }
.h8-k { font: 600 10.5px/16px var(--font-ui); color: var(--muted); }
.h8-src { opacity: 0; transform: translateY(8px); transition: opacity .35s var(--ease), transform .45s var(--ease-enter); }
.s1 .h8-src { opacity: 1; transform: none; }
.h8-box { position: relative; min-height: 0; display: grid; align-content: center; padding: 0 10px 12px; border-radius: 8px; }
.h8-t { font: 15px/1.95 var(--font-paper); letter-spacing: .06em; }
.h8-ul, .h8-dot { position: relative; display: inline-block; line-height: 1.4; }
.h8-ul::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; border-bottom: 1.2px solid currentColor; }
.h8-dot::after { content: ""; position: absolute; left: 50%; bottom: -2.5px; width: 3.5px; height: 3.5px; margin-left: -1.75px; border-radius: 50%; background: currentColor; }
.h8-src small { position: absolute; left: 10px; bottom: 5px; font: 10px/1.2 var(--font-ui); color: #7a7f84; }
.h8-out { border: .5px solid var(--line); background: var(--panel-2); }
.h8-out .h8-t { opacity: 0; transform: translateY(4px); transition: opacity .3s var(--ease), transform .35s var(--ease-enter); }
.s2 .h8-out .h8-t { opacity: 1; transform: none; }
.h8-out .h8-ul::after { transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-enter); }
.s3 .h8-out .h8-ul::after { transform: none; }
.h8-out .h8-dot::after { transform: scale(0); transition: transform .3s var(--ease-enter); }
.s4 .h8-out .h8-dot::after { transform: none; }
.h8-out .conf { position: absolute; left: 10px; bottom: 6px; height: 18px; gap: 4px; font-size: 10.5px; opacity: 0; transform: translateY(3px); transition: opacity .3s var(--ease) .1s, transform .35s var(--ease-enter) .1s; }
.h8-out .conf .ic { font-size: 12px; }
.s4 .h8-out .conf { opacity: 1; transform: none; }

/* 9 笔记、演示、课时包放一起：选中笔记 → 右侧显示内容与关联题目 → 按「交给 AI 参考」→ 底部输入条出现引用 */
.h9 { display: grid; grid-template-rows: 22px minmax(0, 1fr) 26px; gap: 6px; }
.h9-seg { justify-self: start; display: inline-grid; grid-template-columns: repeat(3, auto); gap: 2px; padding: 2px; border-radius: 8px; background: var(--panel-2); font: 500 10.5px/18px var(--font-ui); }
.h9-seg > span { padding: 0 11px; border-radius: 6px; color: var(--muted); white-space: nowrap; }
.h9-seg > .on { background: var(--accent-soft); color: var(--accent-on-soft); box-shadow: 0 0 0 .5px var(--accent-line); }
.h9-main { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 8px; min-height: 0; }
.h9-list { display: grid; align-content: start; gap: 2px; min-width: 0; }
.h9-list li { height: 26px; display: flex; align-items: center; padding: 0 8px; border-radius: 6px; font-size: 10.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background-color .25s var(--ease), color .25s var(--ease); }
.s1 .h9-list .h9-n0 { background: var(--accent-soft); color: var(--accent-on-soft); }
.h9-detail { min-width: 0; min-height: 0; display: grid; align-content: space-between; gap: 5px; padding: 7px 9px; border-radius: 8px; border: .5px solid var(--line); background: var(--panel-2); opacity: 0; transform: translateY(5px); transition: opacity .3s var(--ease), transform .4s var(--ease-enter); }
.s2 .h9-detail { opacity: 1; transform: none; }
.h9-lines { display: grid; gap: 4px; }
.s2 .h9-lines .ln { transform: none; }
.h9-chip { justify-self: start; height: 18px; font-size: 10.5px; }
.h9-btn { position: relative; justify-self: start; height: 20px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 6px; background: var(--btn-bg); color: #fff; font: 600 10.5px/1 var(--font-ui); transition: transform .15s var(--ease), filter .15s var(--ease); }
.s3 .h9-btn { transform: scale(.94); filter: brightness(.92); }
.s3 .h9-btn .ncur { opacity: 1; transform: none; }
.h9-bar { display: flex; align-items: center; gap: 8px; padding: 0 3px 0 9px; border-radius: 9px; border: .5px solid var(--line-strong); background: var(--panel-solid); color: var(--muted); transition: box-shadow .3s var(--ease); }
.s3 .h9-bar { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.h9-in { flex: 1; min-width: 0; height: 20px; display: grid; align-items: center; overflow: hidden; }
.h9-in > * { grid-area: 1 / 1; min-width: 0; }
.h9-ph { white-space: nowrap; font-size: 11.5px; color: var(--muted); transition: opacity .2s var(--ease); }
.s3 .h9-ph { opacity: 0; }
.h9-ref { justify-self: start; height: 18px; font-size: 10.5px; background: var(--accent-soft); color: var(--accent-on-soft); opacity: 0; transform: translateY(3px); transition: opacity .3s var(--ease), transform .35s var(--ease-enter); }
.s3 .h9-ref { opacity: 1; transform: none; }
.h9-send { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--btn-bg); color: #fff; }
.h9-send .ic { font-size: 11px; }

@container (max-width: 300px) { .m4-acts > span:last-child { display: none; } .n4-btns > span:last-child { display: none; } .n1-tg { font-size: 10px; } .n2-load { padding: 0 8px; } }
@media (max-width: 1040px) { .mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1041px) { .mini-grid.n-2 { grid-template-columns: repeat(2, minmax(0, calc((100% - 40px) / 3))); justify-content: center; } }
@media (max-width: 719px) {
  #how { padding-top: 40px; padding-bottom: 16px; }
  #how .sec-h { margin-bottom: 24px; }
  .how-tabs { margin-bottom: 28px; }
  .how-tab { height: 32px; padding: 0 12px; font-size: 13.5px; }
  .mini-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; max-width: 460px; margin-inline: auto; }
}

/* ======================= 响应式 ======================= */
@media (max-width: 1100px) {
  .nav-links a { padding: 6px 9px; }
  .binder-layout { grid-template-columns: 206px minmax(0, 1fr); gap: 24px; }
  .index-leaf { width: 96px; left: calc(var(--leaf) * 32px); padding-inline: 11px; }
  .story-live h3 { font-size: 18px; }
  .library-layout { grid-template-columns: 280px minmax(0, 1fr); gap: 28px; }
  .subject-book { width: 232px; }
  .physics-book { width: 214px; }
  .open-subject-book { grid-template-columns: 78px minmax(0, 1fr); }
  .open-subject-book::before { left: 78px; }
  .open-book-leaf h3 { font-size: 22px; }
  .chalk-scene { padding-inline: 32px; }
  .is-animated .chalk-scene { padding-inline: 32px; }
  .geometry-scene { gap: 40px; }
  .chalk-route { gap: 28px; }
  .chalk-story h3 { font-size: 23px; }
  .chalk-route .chalk-body { font-size: 15px; }
  .teacher-scene { gap: 60px; }
}
@media (max-width: 960px) {
  .nav-links { display: none; }
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-copy { align-items: center; text-align: center; }
  .hero h1 { align-items: center; }
  .lead { margin-inline: auto; }
  .cta { justify-content: center; }
  .hero-folder { width: min(100%, 520px); margin: 40px auto 0; }
  .binder-layout { grid-template-columns: 170px minmax(0, 1fr); gap: 16px; }
  .binder-story h2 br { display: none; }
  .story-live p { font-size: 13px; line-height: 1.75; min-height: 70px; }
  .index-leaves { height: 160px; margin-top: 16px; }
  .index-leaf { width: 82px; height: 122px; left: calc(var(--leaf) * 26px); padding: 12px 10px; }
  .index-leaf strong { font-size: 19px; margin-top: 16px; }
  .index-leaf small { font-size: 9.5px; }
  .library-layout { grid-template-columns: 1fr; gap: 28px; }
  .library-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; align-items: start; }
  .library-side > .reveal { grid-column: 1 / -1; }
  .open-subject-book { margin-top: 30px; }
  .ai-grid { grid-template-columns: 1fr; gap: 40px; }
  .ai-grid .sec-h.left { text-align: center; }
  .points { max-width: 520px; margin-inline: auto; text-align: left; }
  .agent { max-width: 620px; margin: 0 auto; width: 100%; }
  .contact { padding: 32px 28px; }
}
@media (max-width: 700px) {
  html { scroll-padding-top: 76px; }
  .sec { padding: 64px 0; }
  .hero { padding: 40px 0 32px; }
  .hero h1 { font-size: clamp(42px, 13vw, 56px); margin-top: 20px; }
  .br-d { display: none; }
  .nav { padding: 0 8px 0 12px; gap: 8px; }
  .sec-h { margin-bottom: 32px; }
  .sec-p { font-size: 16px; }
  .hero-folder { height: 395px; margin-top: 36px; }
  .hero-page { height: 282px; width: 66%; left: 18%; top: 31px; padding: 18px 18px; }
  .hero-page-back { transform: translate(32px, -22px) rotate(12deg); }
  .hero-page-middle { transform: translate(-9px, -13px) rotate(-10deg); }
  .hero-page-front { transform: translate(-12px, 13px) rotate(-3deg); }
  .hero-folder.is-fanned .hero-page-back { transform: translate3d(56px, -64px, -30px) rotate(10deg); }
  .hero-folder.is-fanned .hero-page-middle { transform: translate3d(-18px, -84px, 5px) rotate(-9deg); }
  .hero-folder.is-fanned .hero-page-front { transform: translate3d(-52px, -14px, 30px) rotate(-6deg); }
  .folder-back { top: 95px; left: 4px; right: 1px; }
  .folder-front { height: 80px; bottom: 17px; left: 4px; right: 1px; }
  .folder-toggle { padding: 0 22px; }
  .paper-title { font-size: 19px; margin-top: 14px; }
  .paper-poem { font-size: 14px; margin-top: 10px; }
  .paper-q { font-size: 12px; margin-top: 8px; }
  .paper-student { margin-top: 10px; }
  .paper-solution { font-size: 14px; margin-top: 16px; }
  .exam-question { font-size: 15px; margin-top: 8px; gap: 6px; }
  .exam-expression { font-size: 14px; gap: 5px; }
  .exam-subject { margin-top: 12px; }
  .exam-rule { margin-top: 8px; }
  .exam-poem { font-size: 12.5px; line-height: 1.6; }
  .hero-page-front .paper-note { display: none; }
  .paper-note { font-size: 11px; bottom: 14px; right: 16px; }

  .binder-section { --chrome: 336px; --card-h: clamp(300px, calc(100svh - var(--nav-h) - var(--chrome)), 440px); height: 280svh; min-height: 1850px; }
  .binder-sticky { padding: 14px 0 12px; }
  .binder-layout { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .binder-story h2 { font-size: 26px; }
  .binder-story .kicker { margin-bottom: 6px; font-size: 11px; }
  .story-live { margin-top: 10px; }
  .story-live h3 { font-size: 18px; }
  .story-live p { font-size: 12.5px; line-height: 1.7; min-height: 42px; margin-top: 4px; }
  .index-leaves { display: none; }
  .binder-stage { margin-top: 12px; }
  .leaf-tab { flex: 1 1 0; padding: 0 2px; font-size: 11px; }
  .chapter-tabs { left: 18px; right: 6px; gap: 4px; }
  .binder-papers { left: -20px; right: -20px; }
  .workspace-card { left: 26px; right: 26px; }
  .binder-pocket { left: 0; right: 0; }
  .binder-footer { gap: 14px; font-size: 11px; }
  .binder-footer > span:first-child { min-width: 70px; }
  .binder-footer > span:last-child { min-width: 64px; }
  .binder-cap { display: none; }

  .library-side { display: block; }
  .subject-shelf { margin-top: 24px; max-width: 320px; }
  .stage-body { height: clamp(520px, 78vh, 640px); }
  .stage-title { text-align: left; padding-left: 6px; }
  .contact { flex-direction: column; align-items: flex-start; padding: 28px 22px; }
  .faq summary { padding: 16px 18px; font-size: 16px; }
  .ans { padding: 0 18px 18px; }
  .dl-screen { padding: 48px 16px; }
  .dl-in { padding: 40px 22px 36px; border-radius: 24px; }
  .ag-b .bub, .ag-b .bub p { font-size: 13px; }
  .cta .btn.lg { flex: 1 1 100%; max-width: 360px; }
  .cta.center .btn.lg { flex: 0 1 auto; }

  /* 黑板：窄屏分幕，布局放不下时由脚本回退为顺序展示 */
  .chalk-rail { height: 38px; font-size: 11px; padding-left: 14px; letter-spacing: .02em; }
  .chalk-chip { height: 24px; padding: 0 10px; font-size: 11px; }
  .chalk-board { border-width: 3px; border-radius: 4px; }
  .chalk-scene { padding: 28px 22px 50px; }
  .is-animated .chalk-scene { padding: 25px 22px 30px; }
  .chalk-story h2 { font-size: 35px; line-height: 1.35; margin-top: 12px; }
  .chalk-kicker { font-size: 11px; }
  .geometry-scene { display: block; }
  .chalk-body { font-size: 15px; line-height: 1.8; margin-top: 14px; }
  .chalk-note { font-size: 19px; margin-top: 18px; }
  .chalk-small { display: none; }
  .chalk-cube { max-width: 320px; height: 232px; margin-top: 20px; }
  .geometry-relation { font-size: 19px; margin-top: 0; }
  .geometry-answer { font-size: 18px; margin-top: 5px; }
  .chalk-route { display: block; margin-top: 27px; }
  .chalk-route > div + div { margin-top: 25px; }
  .chalk-story h3 { font-size: 23px; margin-top: 4px; }
  .chalk-route .chalk-note { font-size: 16px; }
  .chalk-route .chalk-body { font-size: 14px; margin-top: 8px; }
  .chalk-route-mark { font-size: 14px; margin-top: 7px; }
  .routine-scene > h2 { font-size: 29px; margin-top: 14px; letter-spacing: 0; }
  .chalk-route > div:not(:last-child)::after { display: none; }
  .teacher-scene { display: block; }
  .chalk-teacher-notes { padding-top: 22px; }
  .chalk-teacher-notes > p { font-size: 24px; margin-top: 20px; }
  .chalk-teacher-notes > p.chalk-last-note { font-size: 19px; }
  .is-animated .chalk-eraser { width: 46px; height: 22px; margin-left: -23px; }
}
@media (max-width: 400px) {
  .hero-folder { height: 371px; }
  .exam-poem { font-size: 12px; }
  .chalk-story h2 { font-size: 31px; }
  .routine-scene > h2 { font-size: 25px; }
  .chalk-cube { height: 200px; margin-top: 12px; }
  .chalk-story h3 { font-size: 21px; }
  .chalk-route > div + div { margin-top: 12px; }
  .chalk-route .chalk-body { font-size: 13.5px; line-height: 1.7; }
  .is-animated .chalk-scene { padding: 20px 17px 24px; }
  .chalk-body { font-size: 14px; }
  .geometry-relation { font-size: 18px; }
  .geometry-answer { font-size: 16px; }
}
/* 短视口：先收紧窗口与黑板内容；极矮时由脚本改为顺序展示 */
@media (max-height: 820px) and (min-width: 701px) {
  .binder-sticky { padding-block: 12px; }
  .story-live { margin-top: 18px; }
  .index-leaves { margin-top: 14px; }
}
@media (max-height: 680px) and (min-width: 701px) {
  .binder-section { --chrome: 150px; }
  .binder-story h2 br { display: none; }
  .binder-story h2 { font-size: 26px; }
  .binder-footer, .binder-cap { display: none; }
  .index-leaves { display: none; }
  .story-live p { min-height: 0; }
}
@media (max-height: 780px) and (min-width: 701px) {
  .pv-stu { display: none; }
  .is-animated .chalk-scene { padding-block: 22px 35px; }
  .chalk-story h2 { font-size: 40px; }
  .chalk-cube { max-width: 360px; }
  .chalk-route { margin-top: 32px; }
  .chalk-note { margin-top: 23px; }
  .chalk-body { font-size: 16px; }
  .chalk-small { display: none; }
}
@media (max-height: 580px) { .chalk-story { --chalk-static: 1; } }

/* ======================= 首页下载区补充 / 联系方式 / 页脚链接 ======================= */
.dl-meta { margin-top: 14px; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.faq-more { margin-top: 16px; text-align: right; font-size: 14.5px; }
.faq-more a { color: var(--accent); text-decoration: none; }
.faq-more a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot-links a { color: var(--muted); text-decoration: none; font-size: 13.5px; }
.foot-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* 联系方式列表（由 common.js 按配置生成）：邮箱 / 微信 / QQ 群 / 其他 / 联系页面，可复制的项带复制按钮 */
.ct-list li { flex-wrap: wrap; row-gap: 6px; }
.ct-k { min-width: 3.6em; color: var(--muted); font-size: 13.5px; }
.ct-v { min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
.ct-v a { color: var(--accent); text-decoration: none; }
.ct-v a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ct-v.num { font-size: 16px; letter-spacing: .02em; }
.contact .ct-t > p.ct-empty { margin-top: 20px; color: var(--muted); font-size: 15px; }
.contact .ct-list { margin-bottom: 0; }
@media (max-width: 760px) {
  .contact { flex-direction: column; align-items: stretch; gap: 28px; }
  .ct-qr { align-self: center; }
}
.dl-page .contact .ct-t > .fine { margin-top: 18px; }
.dl-screen .fine { text-wrap: balance; }
.btn.copy { gap: 6px; }
.btn.copy .ic { font-size: 14px; }
.btn.copy.is-done { color: var(--ok); }

/* ======================= 下载与安装页（download.html） ======================= */
.dl-page .sec { padding: 52px 0; }
.dl-page .dl-top { padding: 52px 0 20px; }
.dl-page .sec-h { margin: 0 0 22px; max-width: none; }
.dl-page .sec-h h2 { font-size: clamp(26px, 3.4vw, 34px); }
.dl-page .contact { padding: 30px 34px; }
.dl-page .ct-list { margin-top: 0; }
.dl-page #contact { padding-bottom: 72px; }
.page-h h1 { margin-top: 4px; font: 700 clamp(38px, 5.4vw, 60px)/1.15 var(--font-display); letter-spacing: -.02em; }
.page-h .lead { margin-top: 16px; max-width: 680px; }
.note.left { text-align: left; margin: 14px 0 0; max-width: none; }
code { font-family: var(--font-num); font-size: .88em; padding: 1px 6px; border-radius: 6px; background: var(--chip); color: var(--ink); overflow-wrap: anywhere; }

/* 版本卡 */
.ver-card { margin-top: 32px; padding: 30px 32px 26px; border-radius: 24px; box-shadow: var(--shadow-win), inset 0 1px 0 var(--hi); }
.ver-head { display: flex; align-items: center; gap: 16px; }
.dl-mark.ver-mark { width: 52px; height: 52px; border-radius: 14px; font-size: 26px; margin-bottom: 0; flex: none; }
.ver-head h2 { font: 650 clamp(20px, 2.6vw, 26px)/1.3 var(--font-display); letter-spacing: -.01em; }
.ver-sub { margin-top: 2px; font-size: 14px; color: var(--muted); }
.ver-meta { margin: 22px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ver-meta > div { min-width: 0; padding: 10px 14px; border-radius: 12px; background: var(--panel-2); }
.ver-meta > .wide { grid-column: 1 / -1; }
.ver-meta dt { font-size: 12px; color: var(--muted); line-height: 1.6; }
.ver-meta dd { margin: 0; font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
.ver-meta dd.mono { font: 500 13px/1.7 var(--font-num); }
.ver-actions { margin-top: 22px; display: grid; gap: 14px; justify-items: start; }
.mirrors { width: 100%; display: grid; gap: 10px; }
.mirror { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; border-radius: 12px; background: var(--panel-2); }
.m-code { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 14px; }
.m-code b { padding: 2px 9px; border-radius: 6px; background: var(--panel-solid); border: .5px solid var(--line); color: var(--ink); font-size: 14px; font-weight: 600; letter-spacing: .06em; }
.m-note { flex-basis: 100%; font-size: 13px; color: var(--muted); }
.ver-soon { margin-top: 22px; padding: 18px 20px 20px; border-radius: 14px; background: var(--panel-2); border: .5px solid var(--line); }
.ver-soon h3 { display: flex; align-items: center; gap: 8px; font: 600 17px/1.4 var(--font-display); }
.ver-soon h3 .ic { color: var(--muted); font-size: 18px; }
.ver-soon p { margin-top: 6px; color: var(--ink-2); font-size: 15px; line-height: 1.8; }
.soon-cta { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.soon-cta .btn.primary { white-space: normal; height: auto; min-height: 36px; padding-block: 9px; line-height: 1.4; text-align: left; text-wrap: balance; }
.soon-cta .btn.copy { height: 36px; }
.verify { margin-top: 18px; padding-top: 14px; border-top: .5px solid var(--line); }
.verify summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; width: fit-content; font-size: 14.5px; font-weight: 500; color: var(--ink-2); }
.verify summary::-webkit-details-marker { display: none; }
.verify summary .ic { color: var(--muted); transition: transform .3s var(--ease); }
.verify[open] summary .ic { transform: rotate(180deg); }
.verify-body { margin-top: 12px; display: grid; gap: 8px; }
.verify-body .fine { margin-top: 0; }
.hash { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hash code { flex: 1 1 280px; min-width: 0; padding: 10px 12px; border-radius: 10px; background: var(--panel-2); font-size: 12.5px; line-height: 1.7; word-break: break-all; }
.ver-card > .fine { margin-top: 14px; }
.toc { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.toc a { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; font-size: 13.5px; text-decoration: none; color: var(--ink-2); background: var(--panel); border: .5px solid var(--line-strong); transition: background-color .15s var(--ease), color .15s; }
.toc a:hover { background: var(--hover); color: var(--ink); }

/* 系统要求 / 数据说明：左右两栏的定义列表，窄屏改为上下堆叠 */
.req { margin: 0; border-radius: 18px; overflow: hidden; }
.req-row { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 4px 24px; padding: 16px 22px; }
.req-row + .req-row { border-top: .5px solid var(--line); }
.req dt { font-size: 15px; font-weight: 600; }
.req dd { margin: 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.8; }

/* 编号步骤 */
.steps { counter-reset: step; margin: 0; padding: 4px 0; border-radius: 18px; overflow: hidden; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 16px; padding: 14px 22px; }
.steps li + li { border-top: .5px solid var(--line); }
.steps li::before { content: counter(step); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--chip); color: var(--ink); font: 600 14px/1 var(--font-num); margin-top: 2px; }
.steps b { font-size: 16.5px; font-weight: 600; }
.steps p { margin-top: 2px; color: var(--ink-2); font-size: 15.5px; line-height: 1.8; }

/* AI 费用 */
.cost { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cost-tile { padding: 20px 24px; border-radius: 18px; }
.cost-tile b { display: block; font: 650 clamp(26px, 3.4vw, 34px)/1.25 var(--font-display); letter-spacing: -.01em; }
.cost-tile span { color: var(--muted); font-size: 14.5px; }
.dl-page .points { margin-top: 26px; }

/* 更新记录 */
.rel-list { display: grid; gap: 12px; }
.rel { padding: 20px 24px; border-radius: 18px; }
.rel-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.rel-h b { font: 650 20px/1.4 var(--font-display); }
.rel-h time { color: var(--muted); font-size: 14px; }
.rel ul { margin-top: 10px; display: grid; gap: 6px; }
.rel li { position: relative; padding-left: 18px; color: var(--ink-2); font-size: 15.5px; line-height: 1.8; }
.rel li::before { content: ""; position: absolute; left: 4px; top: .85em; width: 5px; height: 5px; border-radius: 50%; background: var(--muted); }

@media (max-width: 700px) {
  .dl-page .sec { padding: 40px 0; }
  .dl-page .dl-top { padding: 32px 0 12px; }
  .dl-page .contact { padding: 24px 20px; }
  .ver-card { padding: 22px 18px 20px; border-radius: 20px; }
  .ver-head { gap: 12px; }
  .ver-actions .btn.lg { width: 100%; }
  .ver-actions { justify-items: stretch; }
  .mirror { padding: 12px; }
  .ver-soon { padding: 16px 16px 18px; }
  .soon-cta .btn { flex: 1 1 100%; justify-content: center; text-align: center; }
  .req-row { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 14px 18px; }
  .req dt { font-size: 13px; font-weight: 500; color: var(--muted); }
  .steps li { grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 14px 18px; }
  .steps li::before { width: 28px; height: 28px; font-size: 13px; }
  .cost { gap: 10px; }
  .cost-tile { padding: 16px 16px; }
  .rel { padding: 18px 18px; }
  .faq-more { text-align: left; }
}

/* ---------- 无障碍：减少动态效果 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .spin { animation: none; }
  .chalk-story { --chalk-static: 1; }
  .workspace-card .prog i, .workspace-card .scan-line { animation: none !important; }
  .chalk-dust-layer { display: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .glass, .win, .nav, .pill, .btn, .leaf-tab, .folder-back, .binder-pocket::after { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .glass { background: var(--panel-solid); }
  .win.cw { background: var(--panel-solid); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--panel-solid); }
  .win { background: var(--panel-solid); }
}