/*
  设计提醒：认知索引簿 —— Swiss 编辑秩序 × Apple 阅读体验 × 暖纸手作质感。
  视觉必须服务二十章真实课程、搜索、目录、进度、证据标注、练习与音频；
  颜色仅用于章节定位，纸张层次通过书脊压痕、索引签与轻微折角呈现。
*/

:root {
  --paper: #f6f2e9;
  --paper-deep: #ede7da;
  --paper-quiet: #e4ddcf;
  --card-bg: #fcfaf4;
  --ink: #222019;
  --ink-soft: rgba(34, 32, 25, .68);
  --ink-faint: rgba(34, 32, 25, .42);
  --hairline: rgba(34, 32, 25, .17);
  --hairline-soft: rgba(34, 32, 25, .09);
  --spine-red: #c84b35;
  --coral: #d65d49;
  --mustard: #bf7e18;
  --indigo: #4e58ad;
  --mint: #2e7e67;
  --lilac: #7653b1;
  --sky: #2f7899;
  --plum: #99436d;
  --olive: #657c37;
  --teal: #18777a;
  --grass: #3f7747;
  --rose: #af3d52;
  --orchid: #8c408e;
  --cobalt: #35609b;
  --amber: #a66513;
  --brick: #9d432e;
  --jade: #126e5e;
  --violet: #6445a5;
  --bronze: #806131;
  --magenta: #942c60;
  --sepia: #70462b;
  --accent: var(--indigo);
  --serif: "Iowan Old Style", "Source Serif 4", Georgia, "Noto Serif SC", "Source Han Serif SC", "Songti SC", SimSun, serif;
  --sans: "Noto Sans SC", "PingFang SC", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  --mono: "SF Mono", "Cascadia Mono", "Noto Sans Mono CJK SC", ui-monospace, Menlo, Consolas, monospace;
  --wrap: 1380px;
  --pad-inline: clamp(1.1rem, 3.6vw, 3.6rem);
  --measure: 68ch;
  --radius: 18px;
  --shadow-sticker: 2px 2px 0 rgba(34,32,25,.07), 0 20px 45px -31px rgba(34,32,25,.38);
  --shadow-lift: 5px 6px 0 rgba(34,32,25,.08), 0 29px 54px -27px rgba(34,32,25,.4);
  --ease-settle: cubic-bezier(.23,1,.32,1);
  --ease-spring: cubic-bezier(.16,1,.3,1);
  --noise: .04;
}

@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #181611; --paper-deep: #12110e; --paper-quiet: #24201a; --card-bg: #211e18;
    --ink: #f0eadf; --ink-soft: rgba(240,234,223,.69); --ink-faint: rgba(240,234,223,.44);
    --hairline: rgba(240,234,223,.18); --hairline-soft: rgba(240,234,223,.09);
    --spine-red: #e48672; --coral: #ef9a87; --mustard: #d6a64c; --indigo: #9da9e7; --mint: #77bda5;
    --lilac: #b69bdd; --sky: #80b8d3; --plum: #d88faf; --olive: #a9bd73; --teal: #6fbac0;
    --grass: #7eb685; --rose: #df909d; --orchid: #c999cf; --cobalt: #90b7e1; --amber: #d8a461;
    --brick: #d48d76; --jade: #67b7a8; --violet: #af94e3; --bronze: #cba970; --magenta: #e17aa8; --sepia: #d1a882;
    --shadow-sticker: inset 0 1px 0 rgba(255,255,255,.06), 2px 2px 0 rgba(0,0,0,.16), 0 23px 44px -30px rgba(0,0,0,.82);
    --shadow-lift: inset 0 1px 0 rgba(255,255,255,.08), 5px 6px 0 rgba(0,0,0,.17), 0 32px 58px -28px rgba(0,0,0,.85);
    --noise: .018;
  }
}
:root[data-theme="dark"] {
  --paper: #181611; --paper-deep: #12110e; --paper-quiet: #24201a; --card-bg: #211e18;
  --ink: #f0eadf; --ink-soft: rgba(240,234,223,.69); --ink-faint: rgba(240,234,223,.44);
  --hairline: rgba(240,234,223,.18); --hairline-soft: rgba(240,234,223,.09);
  --spine-red: #e48672; --coral: #ef9a87; --mustard: #d6a64c; --indigo: #9da9e7; --mint: #77bda5;
  --lilac: #b69bdd; --sky: #80b8d3; --plum: #d88faf; --olive: #a9bd73; --teal: #6fbac0;
  --grass: #7eb685; --rose: #df909d; --orchid: #c999cf; --cobalt: #90b7e1; --amber: #d8a461;
  --brick: #d48d76; --jade: #67b7a8; --violet: #af94e3; --bronze: #cba970; --magenta: #e17aa8; --sepia: #d1a882;
  --shadow-sticker: inset 0 1px 0 rgba(255,255,255,.06), 2px 2px 0 rgba(0,0,0,.16), 0 23px 44px -30px rgba(0,0,0,.82);
  --shadow-lift: inset 0 1px 0 rgba(255,255,255,.08), 5px 6px 0 rgba(0,0,0,.17), 0 32px 58px -28px rgba(0,0,0,.85);
  --noise: .018;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.76; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0; z-index: 80; pointer-events: none; opacity: var(--noise); 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='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.85'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }
body::after { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 120px; z-index: 40; pointer-events: none; background: linear-gradient(var(--paper), color-mix(in srgb, var(--paper) 72%, transparent), transparent); }
a { color: inherit; }
img { max-width: 100%; }
button, input, summary { font: inherit; }

.meta { font-family: var(--mono); font-size: .66rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint); }
.skip { position: fixed; z-index: 100; top: -100px; left: 12px; background: var(--ink); color: var(--paper); padding: 9px 13px; text-decoration: none; }
.skip:focus { top: 12px; }
kbd { font: 500 10px/1 var(--mono); color: var(--ink-faint); border: 1px solid var(--hairline); padding: 3px 5px; background: transparent; }

/* ───────────────────── floating chrome + spine ───────────────────── */
.progress { position: fixed; z-index: 61; top: 0; left: 0; height: 3px; width: 0; background: var(--accent); transition: width .1s linear; }
.topbar { position: sticky; top: 0; z-index: 50; height: 70px; display: grid; grid-template-columns: minmax(215px,1fr) auto minmax(215px,1fr); align-items: center; gap: 16px; padding: 0 var(--pad-inline); border-bottom: 1px solid var(--hairline-soft); background: color-mix(in srgb, var(--paper) 84%, transparent); backdrop-filter: blur(18px) saturate(150%); }
.brand { display: inline-flex; align-items: center; gap: 12px; width: fit-content; text-decoration: none; }
.brand-mark-wrap { position: relative; display: grid; place-items: center; width: 30px; height: 32px; }
.brand-mark { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--ink); color: var(--paper); font: 600 15px/1 var(--serif); box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 8px 18px -11px rgba(34,32,25,.72); transition: transform .2s var(--ease-settle), box-shadow .2s ease; }
.brand-mark::before { content: ""; position: absolute; inset: 1px; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; pointer-events: none; }
.brand-mark span { transform: translateY(1px); }
.brand-float-shadow { position: absolute; bottom: -3px; left: 50%; display: block; width: 20px; height: 4px; border-radius: 50%; background: rgba(34,32,25,.24); filter: blur(2px); opacity: .5; transform: translateX(-50%); pointer-events: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-text b { font-size: 14px; letter-spacing: -.015em; font-weight: 700; }
.brand-text small { font-family: var(--mono); font-size: 8px; letter-spacing: .13em; color: var(--ink-faint); }
.topbar-ledger { justify-self: center; color: var(--ink-faint); font-size: .58rem; }
.topbar-actions { justify-self: end; display: flex; align-items: center; gap: 8px; }
.progress-readout { color: var(--accent); font-variant-numeric: tabular-nums; }
.progress-readout[hidden] { display: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .48rem; cursor: pointer; padding: .68rem 1rem; border: 1px solid var(--hairline); border-radius: 999px; color: var(--ink-soft); background: color-mix(in srgb,var(--card-bg) 68%,transparent); font: 600 .67rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; transition: transform .16s var(--ease-settle), background .2s ease, color .2s ease, border-color .2s ease; }
.btn.primary { position: relative; overflow: hidden; background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn.primary::after { content: ""; position: absolute; top: 50%; right: 10px; width: 4px; height: 4px; border-radius: 50%; background: var(--spine-red); transform: translateY(-50%); }
.btn:active { transform: scale(.97); }
.only-sm { display: none; }

/* ────────────────────────────── global layout ───────────────────────── */
.shell { display: grid; grid-template-columns: 258px minmax(0,1fr); gap: clamp(35px, 5.2vw, 100px); max-width: var(--wrap); min-height: calc(100vh - 70px); margin: 0 auto; padding: 0 var(--pad-inline) clamp(70px, 8vw, 128px); }
.sidebar { position: sticky; top: 92px; align-self: start; max-height: calc(100vh - 110px); overflow-y: auto; padding: 36px 26px 25px 0; border-right: 1px solid var(--hairline); scrollbar-width: thin; }
.sidebar::before { content: ""; position: absolute; top: 36px; right: -3px; width: 5px; height: 5px; border-radius: 50%; background: var(--spine-red); }
.sidebar-label { margin: 0 0 12px; }
.sidebar-note { max-width: 176px; margin: 0; color: var(--ink-faint); font-size: 12px; line-height: 1.7; }
.nav { display: flex; flex-direction: column; margin: 0 0 32px; }
.nav-item { position: relative; display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 9px; padding: 9px 0 10px; border-bottom: 1px solid var(--hairline-soft); text-decoration: none; transition: padding-left .2s var(--ease-settle), background .2s ease; }
.nav-num { padding-top: 2px; font: .61rem/1.4 var(--mono); letter-spacing: .08em; color: var(--ink-faint); transition: color .2s ease; }
.nav-text { display: flex; flex-direction: column; min-width: 0; }
.nav-title { font-size: 13px; font-weight: 600; line-height: 1.43; letter-spacing: -.018em; }
.nav-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: .51rem/1.55 var(--mono); letter-spacing: .08em; color: var(--ink-faint); text-transform: uppercase; }
.nav-item.is-active { padding-left: 10px; }
.nav-item.is-active::before { content: ""; position: absolute; top: 50%; left: 0; width: 3px; height: 24px; background: var(--accent); transform: translateY(-50%); }
.nav-item.is-active .nav-num { color: var(--accent); }

/* ───────────────────────────── home archive ───────────────────────────── */
.hero { position: relative; min-height: 550px; margin: 0; padding: clamp(58px,8vw,110px) 0 62px clamp(20px,3vw,60px); border-bottom: 1px solid var(--hairline); }
.hero::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: repeating-linear-gradient(to bottom,var(--hairline) 0 4px,transparent 4px 11px); }
.hero::after { content: ""; position: absolute; top: 0; right: clamp(16px,5vw,80px); bottom: 0; width: 1px; background: var(--hairline-soft); }
.hero-copy { position: relative; z-index: 1; max-width: 790px; }
.hero-ledger { position: absolute; top: 45px; left: clamp(20px,3vw,60px); right: clamp(19px,5vw,80px); z-index: 1; display: flex; justify-content: space-between; color: var(--ink-faint); font: .59rem/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.hero-ledger span:first-child { color: var(--spine-red); }
.eyebrow { margin: 0 0 19px; }
.hero h1 { max-width: 760px; margin: 0 0 22px; font-family: var(--serif); font-size: clamp(39px,5.25vw,74px); line-height: 1.05; letter-spacing: -.047em; font-weight: 600; }
.hero h1 em { color: var(--accent); font-style: italic; white-space: nowrap; }
.lede { max-width: 59ch; margin: 0 0 29px; color: var(--ink-soft); font-size: clamp(15px,1.45vw,18px); line-height: 1.83; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-index-seal { position: absolute; z-index: 2; right: clamp(32px,6vw,110px); bottom: 52px; display: grid; grid-template-columns: auto auto; gap: 9px; align-items: center; padding: 10px 12px; border: 1px solid var(--hairline-soft); border-radius: 14px; background: color-mix(in srgb,var(--card-bg) 86%,transparent); box-shadow: var(--shadow-sticker); }
.hero-index-seal::before { content: ""; position: absolute; inset: 5px; border: 1px solid var(--hairline-soft); border-radius: 9px; pointer-events: none; }
.hero-index-seal span { position: relative; color: var(--spine-red); font: 500 31px/.8 var(--serif); }
.hero-index-seal small { position: relative; color: var(--ink-faint); font: .51rem/1.55 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.continue { display: grid; grid-template-columns: auto minmax(0,1fr) 64px auto; gap: 14px; align-items: center; max-width: 610px; margin: 28px 0 0; padding: 14px 17px; border: 1px solid var(--hairline-soft); border-left: 3px solid var(--accent); border-radius: var(--radius); background: color-mix(in srgb,var(--card-bg) 94%,transparent); box-shadow: var(--shadow-sticker); text-decoration: none; transition: transform .18s var(--ease-settle), box-shadow .18s ease; }
.continue-label { color: var(--accent); font: .61rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.continue-body { min-width: 0; display: flex; flex-direction: column; }
.continue-title { color: var(--ink); font-size: 13px; font-weight: 700; }
.continue-sec { overflow: hidden; color: var(--ink-faint); font-size: 11px; line-height: 1.55; text-overflow: ellipsis; white-space: nowrap; }
.continue-meter { height: 2px; background: var(--hairline); overflow: hidden; }
.continue-meter > span { display: block; height: 100%; background: var(--accent); }
.continue-pct { color: var(--ink-faint); font: .61rem/1 var(--mono); font-variant-numeric: tabular-nums; }
.stats { display: flex; flex-wrap: wrap; gap: 20px clamp(26px,5vw,62px); margin: 47px 0 0; padding-top: 22px; border-top: 1px solid var(--hairline); }
.stats div { margin: 0; min-width: 68px; }
.stats dt { margin-bottom: 5px; }
.stats dd { margin: 0; font: 500 clamp(24px,2.3vw,33px)/1 var(--serif); letter-spacing: -.04em; }
.stats dd::after { content: ""; display: block; width: 4px; height: 4px; margin-top: 9px; border-radius: 50%; background: var(--accent); }
.curriculum-index { position: relative; padding: clamp(58px,7vw,100px) 0 0; }
.curriculum-index::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: repeating-linear-gradient(to bottom,var(--hairline-soft) 0 3px,transparent 3px 10px); }
.curriculum-index-head { display: grid; grid-template-columns: minmax(170px,.7fr) minmax(260px,1.3fr); gap: 30px; align-items: start; padding-left: clamp(20px,3vw,60px); margin-bottom: 35px; }
.curriculum-index-head p { margin: 0; }
.curriculum-index-head p:last-child { max-width: 480px; color: var(--ink-soft); font-size: 13px; line-height: 1.8; }
.cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.card { position: relative; display: flex; flex-direction: column; min-height: 295px; padding: clamp(23px,3vw,35px); overflow: hidden; border: 1px solid var(--hairline-soft); border-radius: var(--radius); background: var(--card-bg); color: var(--ink); box-shadow: 0 1px 0 rgba(255,255,255,.62) inset; text-decoration: none; transition: transform .2s var(--ease-settle), box-shadow .2s ease, background .2s ease; }
.card::before { content: ""; position: absolute; top: 14px; right: 14px; width: 9px; height: 9px; border: 1px solid var(--hairline); border-radius: 50%; opacity: .9; }
.card::after { content: ""; position: absolute; right: 15px; bottom: 14px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.card-num { display: block; margin-bottom: 22px; color: var(--accent); }
.card h3 { max-width: 15ch; margin: 0 0 8px; font-family: var(--serif); font-size: clamp(23px,2vw,30px); line-height: 1.22; letter-spacing: -.045em; font-weight: 600; }
.card-en { max-width: 39ch; margin: 0 0 18px; color: var(--ink-faint); font: .58rem/1.7 var(--mono); letter-spacing: .055em; text-transform: uppercase; }
.card-blurb { max-width: 45ch; margin: 0 0 18px; color: var(--ink-soft); font-size: 13.2px; line-height: 1.78; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding: 0; list-style: none; }
.tags li { padding: 3px 7px; border: 1px solid var(--hairline-soft); color: var(--ink-faint); font-size: 10.5px; line-height: 1.25; }
.card-meta { margin-top: auto; }
.card-read, .card-audio { color: var(--accent); }
.card-read[hidden] { display: none; }
.tape { position: absolute; top: -7px; left: clamp(25px,12%,70px); z-index: 1; width: 62px; height: 14px; border-radius: 5px; background: var(--accent); opacity: .72; transform: rotate(-2deg); }
.thread { position: relative; max-width: 900px; margin: clamp(68px,9vw,115px) 0 0 clamp(20px,3vw,60px); padding: clamp(28px,4vw,48px); border: 1px solid var(--hairline-soft); border-left: 3px solid var(--spine-red); border-radius: calc(var(--radius) + 2px); background: var(--paper-deep); box-shadow: 0 1px 0 rgba(255,255,255,.42) inset; }
.thread::after { content: ""; position: absolute; top: 17px; right: 18px; width: 8px; height: 8px; border-radius: 50%; background: var(--spine-red); opacity: .75; }
.thread h2 { margin: 0 0 19px; font: 600 clamp(25px,2.8vw,37px)/1.2 var(--serif); letter-spacing: -.035em; }
.thread-list { max-width: 64ch; margin: 0; padding-left: 1.3rem; color: var(--ink-soft); }
.thread-list li { margin-bottom: 12px; padding-left: .3rem; }
.thread-list li::marker { color: var(--spine-red); font: .7rem var(--mono); }
.thread-list b { color: var(--ink); }

/* ─────────────────────── chapter reading system ─────────────────────── */
.chapter { position: relative; --toc-col: 225px; --col-gap: clamp(35px,5vw,74px); }
.chapter::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: repeating-linear-gradient(to bottom,var(--hairline-soft) 0 3px,transparent 3px 10px); }
.chapter-head { position: relative; max-width: min(calc(100% - var(--toc-col) - var(--col-gap)), var(--measure)); margin-left: clamp(20px,3vw,60px); padding: clamp(56px,7vw,94px) 0 37px; border-bottom: 1px solid var(--hairline); }
.chapter-head::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: var(--hairline-soft); }
.chapter-head .eyebrow { color: var(--accent); }
.chapter-head h1 { max-width: 16ch; margin: 0 0 15px; font: 600 clamp(35px,4.5vw,62px)/1.07 var(--serif); letter-spacing: -.05em; }
.chapter-en { max-width: 76ch; margin: 0 0 17px; color: var(--ink-faint); font: .62rem/1.8 var(--mono); letter-spacing: .075em; text-transform: uppercase; }
.chapter-blurb { max-width: 57ch; margin: 0 0 22px; color: var(--ink-soft); font-size: 16px; line-height: 1.82; }
.chapter-meta { margin: 0; }
.chapter-meta b { color: var(--accent); }
.listen { position: relative; max-width: min(720px, calc(100% - var(--toc-col) - var(--col-gap))); margin: clamp(30px,4vw,48px) 0 0 clamp(20px,3vw,60px); padding: clamp(25px,3.5vw,37px); border: 1px solid var(--hairline-soft); border-top: 3px solid var(--accent); border-radius: var(--radius); background: var(--card-bg); box-shadow: var(--shadow-sticker); overflow: hidden; }
.listen::after, .pause-apply::after, .concept-check::after { content: ""; position: absolute; top: 15px; right: 16px; width: 8px; height: 8px; border: 1px solid var(--hairline); border-radius: 50%; }
.listen .tape { left: auto; right: 58px; transform: rotate(2deg); }
.listen-label { margin: 0 0 6px; color: var(--accent); }
.listen-beta { margin-left: 5px; padding: 1px 4px; border: 1px solid currentColor; font-size: .58rem; }
.listen-note { margin: 0 0 16px; color: var(--ink-soft); font-size: 13px; line-height: 1.7; }
.listen-resume { margin: 0 0 12px; color: var(--ink-faint); font-size: 12px; font-variant-numeric: tabular-nums; }
.listen-audio { width: 100%; }
.listen-audio:not([controls]) { display: none; }
.chapter-body { display: grid; grid-template-columns: minmax(0,1fr) var(--toc-col); gap: var(--col-gap); margin-left: clamp(20px,3vw,60px); }
.toc { position: sticky; top: 91px; align-self: start; max-height: calc(100vh - 115px); overflow-y: auto; padding: 44px 0 10px; }
.toc-label { margin: 0 0 12px; }
.toc nav { display: flex; flex-direction: column; border-left: 1px solid var(--hairline); }
.toc-item { margin-left: -1px; padding: 6px 0 6px 13px; border-left: 2px solid transparent; color: var(--ink-faint); font-size: 12.2px; line-height: 1.55; text-decoration: none; transition: color .16s ease, border-color .16s ease; }
.toc-item.d3 { padding-left: 25px; font-size: 11.6px; }
.toc-item.is-current { color: var(--accent); border-left-color: var(--accent); }
.prose { max-width: var(--measure); padding-top: 8px; color: var(--ink-soft); font-size: 16.5px; }
.prose > *:first-child { margin-top: 34px; }
.prose h2 { position: relative; margin: 65px 0 19px; padding: 27px 0 0; border-top: 1px solid var(--hairline); color: var(--ink); font: 600 29px/1.3 var(--serif); letter-spacing: -.025em; }
.prose h2::before { content: ""; position: absolute; top: -3px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.prose > h2:first-child { margin-top: 36px; padding-top: 4px; border-top: 0; }
.prose h3 { margin: 40px 0 12px; color: var(--ink); font: 600 21px/1.36 var(--serif); }
.prose h4 { margin: 27px 0 10px; color: var(--ink); font-size: 15.5px; line-height: 1.5; }
.h-anchor { position: relative; }
.h-anchor > a { position: absolute; left: -1.3em; bottom: 0; color: var(--accent); font: .59em/2.8 var(--mono); opacity: 0; text-decoration: none; transition: opacity .18s ease; }
.h-anchor > a:focus-visible { opacity: .7; }
.prose p { margin: 0 0 21px; }
.prose strong { color: var(--ink); font-weight: 700; }
.prose em { font-family: var(--serif); }
.prose a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose ul, .prose ol { margin: 0 0 23px; padding-left: 1.55rem; }
.prose li { margin-bottom: 9px; padding-left: .22rem; }
.prose li::marker { color: var(--accent); }
.prose ol > li::marker { font: .78rem var(--mono); }
.prose li > p { margin-bottom: 9px; }
.prose hr { margin: 49px 0; border: 0; border-top: 1px solid var(--hairline); }
.prose blockquote { margin: 30px 0; padding: 4px 0 4px 22px; border-left: 2px solid var(--accent); color: var(--ink-soft); font: 18px/1.68 var(--serif); }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose code { padding: 2px 5px; background: var(--paper-deep); color: var(--ink); font: .82em/1.65 var(--mono); }
.prose pre.code, .diagram pre { margin: 0 0 25px; padding: 18px 20px; overflow-x: auto; border: 1px solid var(--hairline-soft); border-left: 3px solid var(--accent); border-radius: 14px; background: var(--paper-deep); }
.prose pre code, .diagram pre code { padding: 0; background: none; color: var(--ink-soft); font-size: 12.5px; }
.diagram { margin: 28px 0; }
.diagram figcaption { margin-bottom: 10px; color: var(--ink-faint); font: .64rem var(--mono); }

/* ─────────────────────── learning annotations/tools ───────────────────── */
.evidence { display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; margin: .65rem 0 .3rem; padding: .65rem .85rem; border: 1px solid var(--hairline-soft); border-left: 3px solid var(--accent); border-radius: 12px; background: var(--paper-deep); color: var(--ink-soft); font-size: 13px; line-height: 1.65; }
.evidence-head { display: flex; align-items: center; gap: .5rem; }
.evidence-dots { display: inline-flex; gap: 3px; }
.evidence-dots i { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--hairline); }
.evidence-dots i.on { background: var(--accent); }
.evidence-tier { color: var(--ink-faint); font-size: .6rem; }
.evidence-note { max-width: 62ch; }
.pause-apply, .concept-check { position: relative; max-width: min(720px,100%); margin: clamp(32px,4vw,46px) 0; padding: clamp(24px,3.4vw,35px); border: 1px solid var(--hairline-soft); border-left: 3px solid var(--accent); border-radius: var(--radius); background: var(--card-bg); box-shadow: var(--shadow-sticker); }
.pause-apply .tape, .concept-check .tape { transform: rotate(-2deg); }
.pause-apply summary, .concept-check summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.pause-apply summary::-webkit-details-marker, .concept-check summary::-webkit-details-marker { display: none; }
.pause-apply summary::after, .concept-check summary::after { content: "＋"; margin-left: auto; color: var(--accent); font-size: 20px; line-height: 1; transition: transform .2s var(--ease-settle); }
.pause-apply[open] summary::after, .concept-check[open] summary::after { transform: rotate(45deg); }
.pa-label, .cc-label { color: var(--accent); }
.pa-body, .cc-body { margin-top: 14px; }
.pa-intro, .cc-question { margin: 0 0 13px; color: var(--ink); font-size: 14.5px; line-height: 1.7; }
.pa-prompts { margin: 0; padding-left: 1.2rem; color: var(--ink-soft); font-size: 14px; }
.pa-prompts li { margin-bottom: 5px; }
.cc-options { display: flex; flex-direction: column; gap: 7px; }
.cc-option { padding: 10px 13px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--paper); }
.cc-option summary { cursor: pointer; list-style: none; color: var(--ink); font-size: 13.5px; font-weight: 700; }
.cc-option summary::-webkit-details-marker { display: none; }
.cc-option summary::before { content: "○ "; color: var(--ink-faint); font-family: var(--mono); }
.cc-option[open] summary::before { content: "● "; }
.cc-option.is-correct[open] summary, .cc-option.is-correct[open] summary::before { color: var(--accent); }
.cc-option p { margin: 8px 0 0; padding-top: 8px; border-top: 1px dashed var(--hairline); color: var(--ink-soft); font-size: 13px; line-height: 1.7; }
.player { display: flex; align-items: center; gap: clamp(12px,2.4vw,18px); }
.player-play { display: grid; flex: none; width: 43px; height: 43px; place-items: center; cursor: pointer; border: 0; border-radius: 50%; background: var(--accent); color: var(--paper); box-shadow: var(--shadow-sticker); transition: transform .16s var(--ease-settle), box-shadow .18s ease; }
.player-ico { display: block; transform: translateX(1px); }
.is-playing .player-ico { transform: none; }
.player-mid { flex: 1; min-width: 0; }
.player-row { display: flex; justify-content: space-between; margin-top: 5px; font-size: .66rem; }
.player-time, .player-dur { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.player-seek { width: 100%; height: 3px; appearance: none; cursor: pointer; background: linear-gradient(var(--accent),var(--accent)) 0/var(--filled,0%) 100% no-repeat,var(--hairline); }
.player-seek::-webkit-slider-thumb { width: 13px; height: 13px; appearance: none; border: 2px solid var(--card-bg); border-radius: 50%; background: var(--accent); cursor: grab; }
.player-seek::-moz-range-thumb { width: 11px; height: 11px; border: 2px solid var(--card-bg); border-radius: 50%; background: var(--accent); cursor: grab; }
.player-side { display: flex; flex: none; align-items: center; gap: 6px; }
.player-skip, .player-rate { min-width: 42px; padding: 5px 8px; cursor: pointer; border: 1px solid var(--hairline); background: transparent; color: var(--ink-soft); font: .62rem/1 var(--mono); }
.is-broken .player-seek, .is-broken .player-play { pointer-events: none; opacity: .4; }
.flow { margin: 30px 0; }
.flow-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.flow-row { display: flex; flex-direction: column; }
.flow-row + .flow-row::before { content: ""; align-self: center; width: 1px; height: 21px; background: var(--hairline); }
.flow-row + .flow-row::after { content: "▾"; align-self: center; margin: -6px 0 6px; color: var(--ink-faint); font-size: 11px; }
.flow-card { position: relative; padding: 15px 18px 15px 39px; border: 1px solid var(--hairline-soft); border-radius: 14px; background: var(--card-bg); box-shadow: var(--shadow-sticker); }
.flow-card::before { content: ""; position: absolute; top: 21px; left: 18px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.flow-card.is-decision { padding-left: 18px; border: 1px dashed var(--hairline); border-radius: 14px; background: var(--paper-deep); box-shadow: none; text-align: center; }
.flow-card.is-decision::before { display: none; }
.flow .flow-title { margin: 0; color: var(--ink); font-size: 14px; font-weight: 700; }
.flow .flow-detail { margin: 6px 0 0; color: var(--ink-soft); font-size: 13px; line-height: 1.65; }
.flow-branches { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 13px; }
.flow-branch { display: flex; flex-direction: column; gap: 7px; }
.flow-cond { color: var(--ink-faint); font: .65rem/1.5 var(--mono); }
.flow-branch .flow-card { height: 100%; padding-left: 18px; }
.flow-branch .flow-card::before { display: none; }
.table-scroll { margin: 0 0 27px; overflow-x: auto; border: 1px solid var(--hairline-soft); border-radius: 14px; background: var(--card-bg); box-shadow: var(--shadow-sticker); }
.prose table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.prose th, .prose td { padding: 12px 15px; border-bottom: 1px solid var(--hairline-soft); text-align: left; vertical-align: top; }
.prose th { color: var(--ink-faint); font: .6rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; font-weight: 500; white-space: nowrap; }
.prose tbody tr:last-child td { border-bottom: 0; }
.math-block { margin: 29px 0; padding: 25px 18px; overflow-x: auto; border: 1px solid var(--hairline-soft); border-top: 3px solid var(--accent); border-radius: 14px; background: var(--card-bg); box-shadow: var(--shadow-sticker); text-align: center; color: var(--ink); font: 17px/1.6 var(--serif); white-space: nowrap; }
.m-frac { display: inline-flex; flex-direction: column; margin: 0 .28em; vertical-align: middle; text-align: center; }
.m-num { padding: 0 .35em .12em; border-bottom: 1px solid currentColor; }
.m-den { padding: .12em .35em 0; }
.m-brace { display: inline-flex; flex-direction: column; align-items: center; margin: 0 .3em; }
.m-brace > .m-body { padding-bottom: 5px; border-bottom: 2px solid var(--hairline); }
.m-label { padding-top: 7px; color: var(--ink-faint); font: .62rem/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.m-text { font-family: var(--sans); }

/* ─────────────────────────── navigation / overlays ─────────────────────────── */
.pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; max-width: var(--measure); margin: 75px 0 0 clamp(20px,3vw,60px); padding-top: 30px; border-top: 1px solid var(--hairline); }
.pager-link { position: relative; display: flex; flex: 1 1 210px; flex-direction: column; gap: 7px; max-width: 49%; padding: 16px 19px; border: 1px solid var(--hairline-soft); border-left: 3px solid var(--accent); border-radius: var(--radius); background: var(--card-bg); box-shadow: var(--shadow-sticker); text-decoration: none; transition: transform .18s var(--ease-settle), box-shadow .18s ease; }
.pager-link span { color: var(--ink-faint); font: .61rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.pager-link b { font: 600 19px/1.25 var(--serif); letter-spacing: -.025em; }
.pager-link.next { margin-left: auto; text-align: right; border-left: 1px solid var(--hairline-soft); border-right: 3px solid var(--accent); }
.footer { margin-top: 0; padding: 26px var(--pad-inline); background: var(--ink); color: var(--paper); text-align: center; }
.footer span { color: rgba(255,255,255,.66); font: .61rem/1.5 var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.search-modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; background: color-mix(in srgb,var(--ink) 38%,transparent); backdrop-filter: blur(8px); }
.search-modal[hidden] { display: none; }
.search-panel { display: flex; flex-direction: column; width: min(710px,100%); max-height: 74vh; overflow: hidden; border: 1px solid color-mix(in srgb,var(--ink) 15%,transparent); border-top: 3px solid var(--spine-red); border-radius: 24px; background: color-mix(in srgb,var(--card-bg) 92%,transparent); box-shadow: var(--shadow-lift); }
#search-input { width: 100%; padding: 19px 22px; border: 0; border-bottom: 1px solid var(--hairline-soft); outline: 0; background: none; color: var(--ink); font: 16px var(--sans); }
#search-input::placeholder { color: var(--ink-faint); }
.search-results { padding: 8px; overflow-y: auto; }
.search-hit { display: block; padding: 13px 15px; color: inherit; text-decoration: none; transition: background .16s ease; }
.search-hit.is-active { background: var(--paper-deep); }
.search-hit .hit-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.search-hit .hit-ch { color: var(--ink-faint); font: .61rem/1 var(--mono); letter-spacing: .11em; text-transform: uppercase; }
.search-hit.is-active .hit-ch { color: var(--accent); }
.search-hit .hit-h { color: var(--ink); font-size: 14px; font-weight: 700; }
.search-hit .hit-snip { display: -webkit-box; margin-top: 4px; overflow: hidden; color: var(--ink-faint); font-size: 12.5px; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.search-hit mark { background: none; color: var(--accent); font-weight: 700; }
.search-empty { padding: 30px 18px; color: var(--ink-faint); text-align: center; font-size: 14px; }
.search-foot { display: flex; gap: 7px; align-items: center; padding: 10px 15px; border-top: 1px solid var(--hairline-soft); color: var(--ink-faint); font: .59rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.restore-toast { position: fixed; z-index: 70; left: 50%; bottom: 22px; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 28px); padding: 10px 13px 10px 17px; border: 1px solid var(--hairline-soft); border-left: 3px solid var(--accent); border-radius: 999px; background: var(--card-bg); box-shadow: var(--shadow-lift); opacity: 0; transform: translate(-50%,14px); transition: opacity .22s var(--ease-settle), transform .22s var(--ease-settle); }
.restore-toast.is-in { opacity: 1; transform: translate(-50%,0); }
.restore-text { min-width: 0; overflow: hidden; color: var(--ink-soft); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.restore-text b { color: var(--ink-faint); font-weight: 400; }
.restore-toast button { padding: 4px 2px; border: 0; background: none; color: var(--accent); cursor: pointer; font: .61rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.restore-toast .restore-close { padding: 0 6px; color: var(--ink-faint); font: 16px/1 var(--sans); }

.reveal { opacity: 0; transform: translateY(12px); transition: opacity .58s var(--ease-settle), transform .58s var(--ease-settle); }
.reveal.is-in { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .brand:hover .brand-mark { transform: translateY(-2px) scale(1.025); box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 13px 24px -13px rgba(34,32,25,.76); }
  .btn:hover { border-color: var(--ink-faint); color: var(--ink); transform: translateY(-2px); }
  .btn.primary:hover { border-color: var(--accent); background: var(--accent); color: var(--paper); }
  .nav-item:hover { padding-left: 10px; background: color-mix(in srgb,var(--paper-deep) 55%,transparent); }
  .nav-item:hover .nav-num { color: var(--accent); }
  .continue:hover, .pager-link:hover { transform: translateY(-3px) rotate(-.3deg); box-shadow: var(--shadow-lift); }
  .card:hover { z-index: 2; background: var(--paper); transform: translateY(-5px) rotate(-.25deg); box-shadow: var(--shadow-lift); }
  .toc-item:hover { color: var(--ink); }
  .h-anchor:hover > a { opacity: .65; }
  .player-play:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
  .player-skip:hover, .player-rate:hover { border-color: var(--accent); color: var(--accent); }
  .search-hit:hover { background: var(--paper-deep); }
}
@media (hover: none) { .btn:active, .player-play:active, .player-skip:active, .player-rate:active { opacity: .64; } .card:active, .continue:active, .pager-link:active { box-shadow: var(--shadow-lift); } }
:where(a,button,input,summary,[tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn,.card,.pager-link,.nav-item,.toc-item,.flow-card,.continue,.player-play,.player-skip,.player-rate,.reveal,.restore-toast { transition: none; }
  .card:hover,.pager-link:hover,.btn:hover,.continue:hover,.player-play:hover { transform: none; }
  .reveal { opacity: 1; transform: none; }
  .restore-toast { opacity: 1; transform: translate(-50%,0); }
}
@media (prefers-reduced-transparency: reduce) { .topbar { background: var(--paper); backdrop-filter: none; } }
@media (max-width: 1080px) {
  .chapter { --toc-col: 0px; --col-gap: 0px; }
  .chapter-head, .listen { max-width: min(100% - clamp(20px,3vw,60px), var(--measure)); }
  .chapter-body { grid-template-columns: minmax(0,1fr); }
  .toc { display: none; }
}
@media (max-width: 860px) {
  .topbar { grid-template-columns: 1fr auto; height: 62px; }
  .topbar-ledger, .hide-sm, .brand-text small { display: none; }
  .only-sm { display: inline-flex; }
  .shell { grid-template-columns: minmax(0,1fr); gap: 0; padding-top: 0; }
  .sidebar { position: fixed; z-index: 45; top: 62px; right: 0; left: 0; max-height: 73vh; padding: 21px var(--pad-inline) 26px; border: 0; background: var(--card-bg); box-shadow: var(--shadow-lift); }
  .sidebar::before { display: none; }
  .sidebar:not(.is-open) { display: none; }
  .sidebar-note { max-width: 400px; }
  .hero { min-height: 0; padding-top: 82px; }
  .hero-ledger { top: 29px; }
  .hero-index-seal { right: 22px; bottom: 31px; }
  .cards { grid-template-columns: 1fr; }
  .card { min-height: 255px; }
  .prose { font-size: 16px; }
  .pager-link { max-width: none; }
  .continue { grid-template-columns: auto 1fr auto; }
  .continue-body { grid-column: 1/-1; }
  .continue-meter { grid-column: 1/-1; }
  .player { flex-wrap: wrap; row-gap: 12px; }
  .player-mid { flex: 1 1 calc(100% - 62px); }
  .player-side { flex: 1 1 100%; justify-content: space-between; }
  .player-skip, .player-rate { flex: 1; padding: 8px 6px; text-align: center; }
}
@media (max-width: 560px) {
  .topbar { padding: 0 17px; }
  .brand-text b { font-size: 13px; }
  .topbar-actions { gap: 5px; }
  .btn { padding: .63rem .7rem; }
  .shell { padding-right: 17px; padding-left: 17px; }
  .hero { padding-left: 18px; }
  .hero-ledger { left: 18px; right: 17px; font-size: .49rem; }
  .hero-ledger span:nth-child(3) { display: none; }
  .hero h1 { font-size: clamp(37px,11vw,52px); }
  .hero h1 em { white-space: normal; }
  .hero-index-seal { position: relative; right: auto; bottom: auto; width: fit-content; margin: 30px 0 0 auto; }
  .stats { gap: 20px 25px; }
  .curriculum-index-head { display: block; padding-left: 18px; margin-bottom: 25px; }
  .curriculum-index-head p:last-child { margin-top: 15px; font-size: 12.5px; }
  .card { padding: 25px 22px; }
  .thread { margin-left: 18px; }
  .chapter-head, .listen, .chapter-body, .pager { margin-left: 18px; }
  .chapter-head { max-width: calc(100% - 18px); padding-top: 67px; }
  .listen { max-width: calc(100% - 18px); }
  .chapter-head h1 { font-size: clamp(34px,10.5vw,49px); }
  .chapter-blurb { font-size: 15px; }
  .prose h2 { margin-top: 53px; font-size: 26px; }
  .prose h3 { font-size: 20px; }
  .pager { margin-right: 0; }
  .pager-link { flex-basis: 100%; }
  .pager-link.next { text-align: left; border-right: 1px solid var(--hairline-soft); border-left: 3px solid var(--accent); }
}

/* ───────────────────────── reference replication: paper craft index ─────────────────────────
   Reference: PaperCraftAestheticRedesign.zip. This layer intentionally replaces the earlier
   "index ledger" treatment only where necessary, while the real search, audio, progress,
   evidence and chapter reading components retain their existing semantics. */
:root {
  --paper: #faf7f1;
  --paper-deep: #f3eee5;
  --paper-quiet: #ece5da;
  --card-bg: #fffdf8;
  --ink: #221d16;
  --ink-soft: rgba(34,29,22,.64);
  --ink-faint: rgba(34,29,22,.38);
  --hairline: rgba(34,29,22,.14);
  --hairline-soft: rgba(34,29,22,.07);
  --radius: 16px;
  --shadow-sticker: 0 1px 0 rgba(34,29,22,.05), 0 24px 48px -24px rgba(34,29,22,.28);
  --shadow-lift: 0 1px 0 rgba(34,29,22,.05), 0 30px 56px -26px rgba(34,29,22,.34);
  --ease-settle: cubic-bezier(.22,1,.36,1);
  --ease-spring: cubic-bezier(.34,1.7,.5,1);
  --serif: "Fraunces", "Iowan Old Style", "Source Serif 4", Georgia, "Noto Serif SC", "Songti SC", serif;
  --sans: "Noto Sans SC", "PingFang SC", ui-sans-serif, -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --wrap: 1240px;
  --pad-inline: clamp(1.1rem,3.4vw,2.4rem);
  --noise: .045;
}

body { background: var(--paper); line-height: 1.75; }
body::before { 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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); }
body::after { display: none; }
.meta { font-size: .78rem; letter-spacing: .18em; }
.topbar { height: auto; min-height: 56px; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); padding: 12px var(--pad-inline); background: rgba(250,247,241,.86); backdrop-filter: blur(12px); }
.brand { gap: 11px; }
.brand-mark-wrap { width: 32px; height: 32px; }
.brand-mark { width: 32px; height: 32px; border-radius: 10px; background: #221d16; color: #faf7f1; font: 600 15px/1 var(--serif); box-shadow: var(--shadow-sticker); transform: rotate(-2deg); }
.brand-mark::before { display: none; }
.brand-mark span { transform: none; }
.brand-float-shadow { display: none; }
.brand-text { line-height: 1.3; }
.brand-text b { font-size: 15px; font-weight: 600; letter-spacing: .01em; }
.brand-text small { font-size: 10px; letter-spacing: .16em; }
.topbar-ledger { font-size: .58rem; }
.topbar-actions { gap: 6px; }
.btn { padding: .7em 1.25em; border-radius: 999px; background: transparent; font-size: .78rem; letter-spacing: .12em; transition: transform .35s var(--ease-spring), color .25s ease, border-color .25s ease, background .25s ease; }
.btn.primary { background: var(--ink); border-color: var(--ink); box-shadow: var(--shadow-sticker); }
.btn.primary::after { display: none; }
.btn kbd { border: 0; padding: 0; }
.shell { grid-template-columns: 236px minmax(0,1fr); gap: clamp(20px,4vw,56px); max-width: var(--wrap); padding: 28px var(--pad-inline) 72px; }
.sidebar { top: 82px; max-height: calc(100vh - 110px); padding: 0 0 20px; border-right: 0; }
.sidebar::before { display: none; }
.sidebar-label { margin: 0 0 16px; }
.sidebar-note { max-width: 210px; font-size: 12px; }
.nav-stage { margin: 0 0 22px; }
.nav-stage-label { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: rgba(34,29,22,.5); font-size: .68rem; letter-spacing: .1em; }
.nav-stage-label i { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--stage-accent); }
.nav { margin: 0; }
.nav-item { grid-template-columns: 30px minmax(0,1fr); gap: 12px; padding: 9px 0; border-bottom-color: var(--hairline-soft); transition: padding-left .4s var(--ease-settle); }
.nav-num { padding-top: 0; font-size: .72rem; letter-spacing: .12em; }
.nav-title { font-size: 13.5px; font-weight: 500; line-height: 1.5; letter-spacing: 0; }
.nav-sub { display: none; }
.nav-item.is-active { padding-left: .7rem; }
.nav-item.is-active::before { display: none; }

/* Home follows the supplied reference exactly: open hero, stage explanation paper cards, then cards. */
.hero { min-height: 0; max-width: 780px; padding: clamp(28px,6vw,56px) 0 8px; border: 0; }
.hero::before, .hero::after, .hero-ledger, .hero-index-seal { display: none; }
.hero-copy { max-width: 780px; }
.eyebrow { margin: 0 0 18px; }
.hero h1 { max-width: none; margin: 0 0 20px; font-size: clamp(34px,5.6vw,58px); line-height: 1.16; letter-spacing: -.015em; }
.hero h1 em { color: #8347ae; }
.lede { max-width: 60ch; margin-bottom: 30px; font-size: clamp(16px,1.7vw,18.5px); line-height: 1.75; }
.hero-actions { gap: 12px; }
.continue { max-width: 610px; margin: 30px 0 0; border: 0; border-radius: var(--radius); box-shadow: var(--shadow-sticker); }
.stats { gap: clamp(24px,5vw,48px); margin: 44px 0 0; padding: 24px 0 0; border-top-color: var(--hairline); }
.stats dd { font: 600 28px/1 var(--serif); letter-spacing: 0; }
.stats dd::after { display: none; }
.curriculum-index { padding: clamp(48px,8vw,76px) 0 0; }
.curriculum-index::before, .curriculum-index-head { display: none; }
.stage-section { margin: 0 0 clamp(36px,6vw,56px); }
.stage-intro { position: relative; max-width: 880px; margin: .85rem 0 22px; padding: clamp(1.3rem,2.2vw,1.7rem) clamp(1.4rem,2.4vw,1.9rem); border-radius: var(--radius); background: var(--card-bg); box-shadow: var(--shadow-sticker); }
.stage-intro .tape, .card .tape, .thread .tape { width: 5.6rem; height: 1.55rem; border-radius: 2px; background: var(--stage-accent, var(--accent)); box-shadow: 0 2px 6px rgba(34,29,22,.12); opacity: .82; transform: rotate(-3.5deg); }
.card .tape { background: var(--accent); }
.thread .tape { background: var(--accent); }
.stage-range { margin: 0 0 10px; color: var(--stage-accent); font-size: .72rem; letter-spacing: .16em; }
.stage-intro h2 { margin: 0 0 6px; font: 600 23px/1.3 var(--serif); letter-spacing: 0; }
.stage-en { margin: 0 0 10px; font-size: 11px; letter-spacing: .06em; }
.stage-desc { max-width: 70ch; margin: 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.7; }
.cards { grid-template-columns: repeat(auto-fill,minmax(288px,1fr)); gap: clamp(18px,2.4vw,26px); }
.card { min-height: 0; margin-top: .85rem; padding: clamp(1.5rem,2.4vw,1.9rem); border: 0; border-radius: var(--radius); background: var(--card-bg); box-shadow: var(--shadow-sticker); transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease-settle); }
.card::before, .card::after { display: none; }
.card-num { margin-bottom: 14px; color: var(--ink-faint); font-size: .78rem; letter-spacing: .18em; }
.card h3 { max-width: none; margin-bottom: 8px; font-size: 23px; line-height: 1.35; letter-spacing: 0; }
.card-en { margin-bottom: 14px; font-size: 11px; line-height: 1.7; letter-spacing: .06em; text-transform: none; }
.card-blurb { margin-bottom: 18px; font-size: 14.5px; line-height: 1.7; }
.tags { gap: 7px; margin-bottom: 18px; }
.tags li { padding: 3px 10px; border: 0; border-radius: 999px; background: var(--paper-deep); color: var(--ink-soft); font-size: 12px; }
.card-meta { font-size: .78rem; letter-spacing: .18em; }
.thread { max-width: 880px; margin: clamp(52px,8vw,88px) 0 0; padding: clamp(1.8rem,4vw,2.6rem); border: 0; border-radius: var(--radius); background: var(--card-bg); box-shadow: var(--shadow-sticker); }
.thread::after { display: none; }
.thread h2 { margin-bottom: 18px; font-size: 24px; letter-spacing: 0; }
.thread-list { color: var(--ink-soft); }
.thread-list li { margin-bottom: 11px; }
.thread-list li::marker { color: var(--accent); }
.footer { padding: 26px var(--pad-inline); background: var(--paper-deep); color: var(--ink-faint); }
.footer span { color: var(--ink-faint); font-size: .72rem; letter-spacing: .14em; }

/* Preserve the real chapter experience but align its paper surfaces with the reference kit. */
.chapter::before { display: none; }
.chapter-head { margin-left: 0; padding: clamp(44px,6vw,70px) 0 35px; }
.listen, .pause-apply, .concept-check, .pager-link, .evidence, .table-scroll, .math-block, .flow-card { box-shadow: var(--shadow-sticker); }
.listen, .pause-apply, .concept-check { border: 0; border-radius: var(--radius); }
.listen { margin-left: 0; }
.chapter-body { margin-left: 0; }
.pager { margin-left: 0; }

@media (hover: hover) and (pointer: fine) {
  .brand:hover .brand-mark { transform: translateY(-3px) rotate(-3deg); box-shadow: var(--shadow-lift); }
  .btn:hover { border-color: rgba(34,29,22,.38); color: var(--ink); transform: translateY(-3px) rotate(-1deg); }
  .btn.primary:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
  .nav-item:hover { padding-left: .7rem; background: transparent; }
  .card:hover { background: var(--card-bg); transform: translateY(-4px) rotate(-.6deg); box-shadow: var(--shadow-lift); }
}

@media (max-width: 860px) {
  .topbar { min-height: 56px; }
  .shell { grid-template-columns: minmax(0,1fr); padding-top: 28px; }
  .sidebar { top: 56px; padding: 21px var(--pad-inline) 26px; background: var(--card-bg); }
  .stage-section { margin-bottom: 44px; }
}

@media (max-width: 560px) {
  .hero { padding-top: 28px; padding-left: 0; }
  .hero h1 { font-size: clamp(34px,10vw,48px); }
  .cards { grid-template-columns: 1fr; }
  .stage-intro { padding: 1.3rem 1.25rem; }
  .thread { margin-left: 0; }
  .chapter-head, .listen, .chapter-body, .pager { margin-left: 0; }
}

/* ─────────────────────── paper craft × Apple fusion pass ───────────────────────
   Paper craft owns the curriculum map, tape and stage accents. Apple owns surface
   hierarchy, continuous rounding, translucent tool layers and immediate response. */
.topbar {
  border-bottom-color: transparent;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  box-shadow: 0 1px 0 rgba(255,255,255,.36) inset;
}
.topbar::after {
  content: "";
  position: absolute;
  inset: 100% 0 auto;
  height: 22px;
  pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--paper) 58%, transparent), transparent);
}
.brand-mark {
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 1px 0 rgba(34,29,22,.13), 0 16px 30px -20px rgba(34,29,22,.56);
}
.btn {
  border-color: color-mix(in srgb, var(--ink) 13%, transparent);
  box-shadow: 0 1px 0 rgba(255,255,255,.46) inset;
}
.btn.primary {
  box-shadow: 0 1px 0 rgba(255,255,255,.10) inset, 0 12px 22px -15px rgba(34,29,22,.64);
}
.btn:active,
.player-play:active,
.player-skip:active,
.player-rate:active {
  transform: scale(.97);
  transition-duration: 100ms;
}
.sidebar {
  border-radius: 18px;
  scrollbar-color: color-mix(in srgb, var(--ink) 18%, transparent) transparent;
}
.nav-stage + .nav-stage { padding-top: 2px; }
.nav-item { border-radius: 9px; }
.nav-item.is-active { background: color-mix(in srgb, var(--stage-accent, var(--accent)) 7%, transparent); }
.nav-item.is-active .nav-title { font-weight: 650; }
.stage-intro,
.card,
.thread {
  border: 1px solid rgba(255,255,255,.50);
  box-shadow: 0 1px 0 rgba(255,255,255,.72) inset, var(--shadow-sticker);
}
.stage-intro { border-radius: 20px; }
.card {
  border-radius: 20px;
  will-change: transform;
}
.thread { border-radius: 22px; }
.stage-intro .tape,
.card .tape,
.thread .tape {
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 3px 9px -4px rgba(34,29,22,.26);
}
.continue {
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--card-bg) 86%, transparent);
  backdrop-filter: blur(10px) saturate(125%);
  box-shadow: 0 1px 0 rgba(255,255,255,.56) inset, var(--shadow-sticker);
}
.listen,
.pause-apply,
.concept-check,
.evidence,
.table-scroll,
.math-block,
.flow-card,
.pager-link {
  border-color: color-mix(in srgb, var(--ink) 8%, transparent);
  box-shadow: 0 1px 0 rgba(255,255,255,.56) inset, var(--shadow-sticker);
}
.listen,
.pause-apply,
.concept-check,
.pager-link { border-radius: 20px; }
.evidence,
.table-scroll,
.math-block,
.flow-card { border-radius: 16px; }
.listen { background: color-mix(in srgb, var(--card-bg) 94%, transparent); }
.pause-apply,
.concept-check { background: color-mix(in srgb, var(--card-bg) 91%, transparent); }
.evidence { border-left-color: var(--accent); background: color-mix(in srgb, var(--paper-deep) 76%, var(--card-bg)); }
.player-play { box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, var(--shadow-sticker); }
.player-skip,
.player-rate {
  border-radius: 10px;
  border-color: color-mix(in srgb, var(--ink) 10%, transparent);
  background: color-mix(in srgb, var(--paper) 60%, transparent);
  transition: transform .18s var(--ease-settle), border-color .2s ease, color .2s ease, background .2s ease;
}
.search-modal { background: color-mix(in srgb, var(--ink) 30%, transparent); backdrop-filter: blur(14px) saturate(120%); }
.search-panel {
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-top: 1px solid rgba(255,255,255,.62);
  border-radius: 24px;
  background: color-mix(in srgb, var(--card-bg) 84%, transparent);
  backdrop-filter: blur(24px) saturate(135%);
  box-shadow: 0 1px 0 rgba(255,255,255,.64) inset, 0 30px 70px -36px rgba(34,29,22,.66);
}
.search-hit { border-radius: 12px; }
.search-hit.is-active { background: color-mix(in srgb, var(--accent) 9%, var(--paper-deep)); }
.restore-toast {
  border-color: color-mix(in srgb, var(--ink) 10%, transparent);
  background: color-mix(in srgb, var(--card-bg) 88%, transparent);
  backdrop-filter: blur(18px) saturate(135%);
}
@media (hover: hover) and (pointer: fine) {
  .stage-intro:hover { box-shadow: 0 1px 0 rgba(255,255,255,.72) inset, 0 27px 58px -35px rgba(34,29,22,.32); }
  .card:hover { transform: translateY(-4px) rotate(-.4deg) scale(1.003); }
  .continue:hover,
  .pager-link:hover { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .card:hover,
  .stage-intro:hover,
  .continue:hover,
  .pager-link:hover,
  .brand:hover .brand-mark,
  .btn:hover { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .topbar,
  .continue,
  .search-panel,
  .restore-toast { background: var(--card-bg); backdrop-filter: none; }
}

/* The reference override comes after the original dark theme block, so restore
   deliberately softened dark-paper tokens here instead of inheriting light paper. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1c1916;
    --paper-deep: #25201c;
    --paper-quiet: #2f2923;
    --card-bg: #28231f;
    --ink: #f3eee5;
    --ink-soft: rgba(243,238,229,.70);
    --ink-faint: rgba(243,238,229,.43);
    --hairline: rgba(243,238,229,.15);
    --hairline-soft: rgba(243,238,229,.08);
    --shadow-sticker: 0 1px 0 rgba(255,255,255,.06) inset, 0 24px 48px -24px rgba(0,0,0,.70);
    --shadow-lift: 0 1px 0 rgba(255,255,255,.08) inset, 0 30px 56px -26px rgba(0,0,0,.78);
    --noise: .018;
  }
}
:root[data-theme="dark"] {
  --paper: #1c1916;
  --paper-deep: #25201c;
  --paper-quiet: #2f2923;
  --card-bg: #28231f;
  --ink: #f3eee5;
  --ink-soft: rgba(243,238,229,.70);
  --ink-faint: rgba(243,238,229,.43);
  --hairline: rgba(243,238,229,.15);
  --hairline-soft: rgba(243,238,229,.08);
  --shadow-sticker: 0 1px 0 rgba(255,255,255,.06) inset, 0 24px 48px -24px rgba(0,0,0,.70);
  --shadow-lift: 0 1px 0 rgba(255,255,255,.08) inset, 0 30px 56px -26px rgba(0,0,0,.78);
  --noise: .018;
}
@media (max-width: 860px) {
  .sidebar {
    border-radius: 0 0 24px 24px;
    border-bottom: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
    background: color-mix(in srgb, var(--card-bg) 86%, transparent);
    backdrop-filter: blur(24px) saturate(135%);
  }
}

/* Each card tape deliberately occupies its own grid safety band.  The previous
   per-card margin mixed with the Stage intro margin, which made the band look
   like an accidental collision at narrow widths. */
.stage-intro { margin-bottom: 12px; }
.stage-cards { padding-top: 10px; }
.stage-cards .card {
  margin-top: 0;
  overflow: visible;
}
.stage-cards .card .tape { top: -12px; }

/* Tape gets a distinct handmade material pass; cards remain clean reading paper. */
.stage-intro .tape::after,
.stage-cards .card .tape::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image:
    linear-gradient(112deg, rgba(255,255,255,.34), transparent 34%, rgba(34,29,22,.10) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='86' height='22' viewBox='0 0 86 22'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.16 1.6' numOctaves='2' seed='11'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .46 0'/%3E%3C/filter%3E%3Crect width='86' height='22' filter='url(%23f)' opacity='.72'/%3E%3C/svg%3E");
  background-size: 100% 100%, 86px 22px;
  background-repeat: no-repeat, repeat;
  mix-blend-mode: soft-light;
  opacity: .54;
}
.stage-intro .tape::before,
.stage-cards .card .tape::before {
  content: "";
  position: absolute;
  inset: 1px 2px auto;
  height: 1px;
  border-radius: inherit;
  background: rgba(255,255,255,.32);
  pointer-events: none;
}

/* Two transform layers avoid segmented motion: the wrapper drifts like the token's
   centre of mass, while the mark itself swings through a continuous pendulum arc. */
@keyframes brand-c-drift {
  from { transform: translate3d(-.7px,0,0); }
  to { transform: translate3d(.9px,-3.5px,0); }
}
@keyframes brand-c-swing {
  from { transform: rotate(-4.3deg); }
  to { transform: rotate(3.9deg); }
}
@keyframes brand-c-shadow {
  from { transform: translateX(-50%) scale(1); opacity: .40; }
  to { transform: translateX(calc(-50% - .7px)) scale(.64); opacity: .14; }
}
@keyframes brand-c-glint {
  from { transform: translateX(-45%) rotate(13deg); opacity: .07; }
  to { transform: translateX(42%) rotate(13deg); opacity: .30; }
}
.brand-mark {
  overflow: hidden;
}
.brand-mark::after {
  content: "";
  position: absolute;
  inset: -18% -66%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 42%, rgba(255,255,255,.54) 50%, transparent 58%);
  mix-blend-mode: screen;
  opacity: .06;
  transform: translateX(-46%) rotate(13deg);
}
.brand-mark span { position: relative; z-index: 1; }

/* Treat search, theme and menu as one action cluster pinned to the right edge. */
.topbar-actions {
  justify-self: stretch;
  width: 100%;
  min-width: max-content;
  margin-left: auto;
  justify-content: flex-end;
}
@media (max-width: 860px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: minmax(0, 1fr);
  }
  .brand {
    grid-column: 1;
    min-width: 0;
  }
  .topbar-actions {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    width: auto;
    min-width: 0;
    margin-left: 0;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .brand-mark-wrap { animation: brand-c-drift 5.8s cubic-bezier(.45,0,.55,1) infinite alternate; }
  .brand-mark { animation: brand-c-swing 2.9s cubic-bezier(.45,0,.55,1) infinite alternate; }
  .brand-mark::after { animation: brand-c-glint 2.9s cubic-bezier(.45,0,.55,1) infinite alternate; }
  .brand-float-shadow { display: block; animation: brand-c-shadow 5.8s cubic-bezier(.45,0,.55,1) infinite alternate; }
}
@media (hover: hover) and (pointer: fine) {
  .brand:hover .brand-mark-wrap { animation: none; transform: translate3d(.5px,-4px,0); }
  .brand:hover .brand-mark { animation: none; transform: rotate(-3deg); }
  .brand:hover .brand-mark::after { animation: none; transform: translateX(24%) rotate(13deg); opacity: .24; }
  .brand:hover .brand-float-shadow { animation: none; transform: translateX(-50%) scale(.64); opacity: .18; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-mark-wrap, .brand-mark, .brand-mark::after, .brand-float-shadow { animation: none !important; }
}