:root {
  --paper: #eeeae0;
  --paper-light: #f7f4ed;
  --paper-dark: #d9d3c6;
  --ink: #0d171a;
  --ink-soft: #14252b;
  --ink-blue: #1e3a42;
  --rock: #74807e;
  --rock-light: #aeb5ad;
  --gold: #bd8d43;
  --gold-light: #e4bd70;
  --red: #a94b40;
  --teal: #76a19d;
  --line-dark: rgba(13, 23, 26, .16);
  --line-light: rgba(238, 234, 224, .17);
  --shadow-paper: 0 18px 50px rgba(4, 13, 15, .14);
  --shadow-ink: 0 24px 70px rgba(0, 5, 7, .28);
  --ease: cubic-bezier(.22, .72, .24, 1);
  --fast: 180ms;
  --medium: 420ms;
  --slow: 900ms;
  color: var(--ink);
  background: var(--ink);
  font-family: var(--font-interface);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--ink); scroll-behavior: smooth; }
body { min-width: 320px; min-height: 100vh; margin: 0; overflow-x: clip; background: var(--ink); }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { border: 0; cursor: pointer; }
/* 键盘焦点：基础规则原先只覆盖 button/a/input，select 与 textarea 从未被覆盖；
   另有 9 处类选择器用 outline: 0 把焦点指示直接抹掉（已从源头移除那些抑制）。
   这里补齐元素类型，保证任何可交互元素在键盘聚焦时都有可见焦点环。 */
:is(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible { outline: 2px solid var(--gold-on-ink); outline-offset: 2px; }

/* 跳转链接：键盘用户每页都要穿过顶栏与五个导航项才能到正文。
   常驻视觉隐藏（用 translateY 移出视口，而不是 display:none 或 clip，
   否则部分读屏器会忽略它），键盘聚焦时滑入左上角。 */
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 30; padding: 12px 16px; color: var(--ink); background: var(--gold-light); border: 1px solid var(--gold); font-size: var(--type-small); font-weight: 500; transform: translateY(calc(-100% - 16px)); transition: transform var(--fast) ease; }
.skip-link:focus { transform: translateY(0); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* The world is a persistent stage. Content moves through it like chapters in a scroll. */
.app-shell { position: relative; min-height: 100vh; max-width: 100%; overflow-x: clip; background: var(--ink); isolation: isolate; }
.app-shell::before { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .17; background-image: repeating-linear-gradient(0deg, rgba(238, 234, 224, .045) 0 1px, transparent 1px 5px), repeating-linear-gradient(90deg, rgba(238, 234, 224, .025) 0 1px, transparent 1px 7px); mix-blend-mode: soft-light; }
.app-frame, .mobile-nav-bar, .mobile-nav-panel, .shell-status, .toast-region { position: relative; z-index: 3; }
.app-frame { min-height: 100vh; margin-left: 0; }
.app-frame::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(6, 15, 18, .58), rgba(6, 15, 18, .1) 42%, rgba(6, 15, 18, .32)); }

.world-stage { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #14262c; }
.world-stage__image { position: absolute; inset: -5%; background-image: var(--scene-image); background-position: center; background-size: cover; filter: saturate(.63) contrast(1.1); opacity: .92; transform: translate3d(calc(var(--pointer-x, 0) * -9px), calc(var(--scroll-shift, 0px) * -.42 + var(--pointer-y, 0) * -5px), 0) scale(1.06); transition: transform 1.2s var(--ease), filter 800ms ease; }
.world-stage__wash { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(7, 17, 20, .65) 0%, rgba(7, 17, 20, .14) 32%, rgba(7, 17, 20, .72) 100%), linear-gradient(90deg, rgba(7, 17, 20, .88), transparent 45%, rgba(7, 17, 20, .2)); }
.world-stage__contours { position: absolute; z-index: 2; width: 120%; height: 45%; left: -10%; pointer-events: none; opacity: .21; border: 1px solid rgba(228, 189, 112, .45); border-color: rgba(228, 189, 112, .32) transparent transparent; border-radius: 50%; transform: rotate(-8deg) translate3d(calc(var(--pointer-x, 0) * 8px), calc(var(--scroll-shift, 0px) * -.13), 0); }
.world-stage__contours--far { top: 7%; left: -35%; width: 92%; height: 56%; opacity: .1; transform: rotate(18deg); }
.world-stage__contours--near { bottom: -30%; left: -4%; width: 110%; height: 44%; opacity: .17; transform: rotate(9deg) translate3d(calc(var(--pointer-x, 0) * -10px), calc(var(--scroll-shift, 0px) * -.18), 0); }
.world-stage__meridian { position: absolute; z-index: 2; top: -12%; bottom: -12%; width: 1px; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(228, 189, 112, .34) 38%, rgba(228, 189, 112, .09) 70%, transparent); opacity: .5; transform: rotate(26deg); }
.world-stage__meridian--one { left: 68%; }
.world-stage__meridian--two { left: 75%; opacity: .2; transform: rotate(-18deg); }
.mist-layer { position: absolute; z-index: 3; pointer-events: none; filter: blur(15px); opacity: .28; background: rgba(222, 225, 212, .45); border-radius: 48% 52% 38% 62%; mix-blend-mode: screen; }
.mist-layer--far { width: 84vw; height: 18vh; right: -18vw; top: 22%; transform: rotate(-6deg) translate3d(0, calc(var(--scroll-shift, 0px) * -.18), 0); animation: mist-drift 24s ease-in-out infinite alternate; }
.mist-layer--middle { width: 72vw; height: 13vh; left: 13%; bottom: 20%; opacity: .14; transform: rotate(4deg) translate3d(0, calc(var(--scroll-shift, 0px) * -.11), 0); animation: mist-drift 18s ease-in-out 1s infinite alternate-reverse; }
.mist-layer--near { width: 48vw; height: 11vh; left: 37%; bottom: 4%; opacity: .11; animation: mist-drift 13s ease-in-out 2s infinite alternate; }
.star-orbit { position: absolute; z-index: 2; width: 48vw; height: 48vw; max-width: 720px; max-height: 720px; right: -14vw; top: -22vw; border: 1px solid rgba(228, 189, 112, .2); border-radius: 50%; transform: rotate(-18deg) translate3d(calc(var(--pointer-x, 0) * 4px), calc(var(--scroll-shift, 0px) * -.08), 0); opacity: .64; }
.star-orbit::before, .star-orbit::after { content: ""; position: absolute; inset: 10%; border: 1px solid rgba(228, 189, 112, .13); border-radius: 50%; }
.star-orbit::after { inset: 25%; border-color: rgba(228, 189, 112, .18); }
.star-orbit--two { width: 31vw; height: 31vw; right: -3vw; top: -13vw; transform: rotate(32deg); opacity: .32; }
.world-stage__sun { position: absolute; z-index: 2; top: 16%; right: 25%; width: 7px; height: 7px; background: var(--gold-light); box-shadow: 0 0 0 7px rgba(228, 189, 112, .1), 0 0 25px rgba(228, 189, 112, .44); }
.world-stage__seal { position: absolute; z-index: 4; right: 3.5vw; bottom: 4vh; color: rgba(238, 234, 224, .46); font-family: var(--font-kai); font-size: var(--type-heading); line-height: .75; letter-spacing: 4px; text-align: center; }
.world-stage__seal span { font-size: var(--type-body); }
.world-stage__coordinates { position: absolute; z-index: 4; left: 145px; bottom: 28px; color: var(--ink-3); font-family: var(--font-mono); font-size: var(--type-meta); line-height: 1.8; letter-spacing: .1em; }
.world-stage__coordinates span { color: rgba(228, 189, 112, .88); }
.world-stage--ink .world-stage__image { filter: grayscale(.9) sepia(.08) saturate(.32) contrast(1.12); opacity: .72; }
.world-stage--ink .world-stage__wash { background: linear-gradient(180deg, rgba(7, 17, 20, .58), rgba(7, 17, 20, .2) 34%, rgba(7, 17, 20, .72)), linear-gradient(90deg, rgba(7, 17, 20, .76), transparent 54%, rgba(7, 17, 20, .3)); }
.world-stage--horizon .world-stage__image,
.world-stage--recall .world-stage__image,
.world-stage--archive .world-stage__image,
.world-stage--growth-journey .world-stage__image,
.world-stage--summit-climb .world-stage__image { background-position: 68% center; filter: saturate(.54) contrast(1.06); }
.world-stage--horizon .world-stage__image { opacity: .88; }
.world-stage--recall .world-stage__image,
.world-stage--archive .world-stage__image { opacity: .82; }
.world-stage--growth-journey .world-stage__image,
.world-stage--summit-climb .world-stage__image { opacity: .86; }
.world-stage--guide .world-stage__image { background-position: 76% center; filter: saturate(.48) contrast(1.04); opacity: .9; }
.world-stage--guide .world-stage__wash { background: linear-gradient(180deg, rgba(7, 17, 20, .35), rgba(7, 17, 20, .04) 38%, rgba(7, 17, 20, .62)), linear-gradient(90deg, rgba(7, 17, 20, .65), rgba(7, 17, 20, .12) 52%, rgba(7, 17, 20, .2)); }
.world-stage--guide .world-stage__sun { top: 34%; right: 28%; opacity: .72; }
.world-stage--horizon .world-stage__wash,
.world-stage--recall .world-stage__wash,
.world-stage--archive .world-stage__wash,
.world-stage--growth-journey .world-stage__wash,
.world-stage--summit-climb .world-stage__wash { background: linear-gradient(180deg, rgba(7, 17, 20, .54), rgba(7, 17, 20, .12) 34%, rgba(7, 17, 20, .74)), linear-gradient(90deg, rgba(7, 17, 20, .8), transparent 52%, rgba(7, 17, 20, .24)); }
.app-shell[data-motion="off"] .world-stage__image, .app-shell[data-motion="off"] .mist-layer, .app-shell[data-motion="off"] .star-orbit, .app-shell[data-motion="off"] .world-stage__contours, .app-shell[data-motion="off"] .page, .app-shell[data-motion="off"] .progress-line span { animation: none; transform: none; }

/* The navigation begins as a seal in the upper-left corner and expands into a full-screen compass. */

.ascension-intro { position: fixed; inset: 0; z-index: 20; overflow: hidden; display: grid; place-items: center; color: var(--paper); background: #071115; opacity: 0; visibility: hidden; pointer-events: none; }
.ascension-intro[hidden] { display: none; }
.ascension-intro.is-playing { opacity: 1; visibility: visible; pointer-events: auto; animation: ascension-stage-in 420ms ease-out both; }
.ascension-intro.is-complete { animation: ascension-stage-out 620ms var(--ease) both; }
.ascension-intro__video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; object-fit: cover; object-position: center; background: #f1eee7; }
@keyframes ascension-stage-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ascension-stage-out { 0% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }

.icon-button { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; color: var(--gold-light); background: transparent; border: 1px solid rgba(228, 189, 112, .35); transition: background var(--fast) ease, color var(--fast) ease, border-color var(--fast) ease, transform var(--fast) var(--ease); }
.icon-button:hover { color: var(--ink); background: var(--gold-light); border-color: var(--gold-light); transform: translateY(-1px); }
.icon { width: 16px; height: 16px; display: inline-block; vertical-align: middle; }
.gua-mark { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-kai); }

/* top bar and pages */
/* 左基线：与 .page-view 的「居中限宽 + gutter」用同一个算式，
   所以从 390px 到超宽屏，顶栏品牌与页面标题始终在同一条竖线上。
   原先写死的 110px 是早期左侧边栏的遗留（.app-frame 的 margin-left 早已归零）。 */
.topbar { height: 82px; display: flex; align-items: center; justify-content: space-between; padding: 0 48px 0 calc(max(0px, (100% - var(--shell-max)) / 2) + var(--gutter)); color: var(--ink-1); border-bottom: 1px solid var(--rule-ink); }
.topbar__chapter { display: flex; align-items: center; gap: 12px; }
.topbar__chapter-mark { display: grid; place-items: center; width: 30px; height: 30px; color: var(--gold-light); border: 1px solid rgba(228, 189, 112, .4); font-family: var(--font-kai); font-size: var(--type-body); }
.topbar__chapter > div { display: grid; gap: 4px; }
.topbar__eyebrow { color: var(--ink-3); font-size: var(--type-meta); letter-spacing: .14em; }
.topbar__title { color: var(--gold-light); font-family: var(--font-kai); font-size: var(--type-subhead); }
.topbar__right { display: flex; align-items: center; gap: 20px; }
.connection { color: var(--ink-3); font-size: var(--type-meta); }
.connection i, .online-dot { display: inline-block; width: 6px; height: 6px; margin-right: 4px; background: var(--gold-light); border-radius: 50%; box-shadow: 0 0 0 4px rgba(228, 189, 112, .1); }
.topbar__icon { color: var(--ink-3); transition: color var(--fast) ease; }
.topbar__icon:hover { color: var(--gold-light); }
.topbar__help { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; background: transparent; border: 1px solid transparent; cursor: pointer; }
.topbar__help:hover { border-color: rgba(228, 189, 112, .42); }
.topbar--auth { padding-left: 32px; }
.topbar__auth-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--paper); font-family: var(--font-display); font-size: var(--type-subhead); }
.topbar__auth-brand .topbar__chapter-mark { color: var(--gold-light); }
.topbar__auth-note { color: var(--ink-3); font-size: var(--type-meta); letter-spacing: .12em; }
.topbar__profile { display: flex; align-items: center; gap: 8px; color: var(--ink-1); font-size: var(--type-meta); }
.topbar__profile .icon { width: 13px; height: 13px; color: var(--ink-3); }
.topbar__onboarding-exit { color: var(--ink-3); font-size: var(--type-meta); }
.topbar__onboarding-exit:hover { color: var(--gold-light); }
.avatar-dot { display: inline-grid; place-items: center; width: 27px; height: 27px; color: var(--ink); background: var(--gold-light); font-family: var(--font-kai); border-radius: 50%; }
.mobile-nav-bar, .mobile-nav-panel { display: none; }
main { min-height: calc(100vh - 82px); }
.page-view { width: min(var(--shell-max), 100%); min-height: calc(100vh - 82px); margin: 0 auto; padding: 82px var(--gutter) 120px; padding-right: 272px; }
.page { position: relative; max-width: 100%; min-width: 0; animation: page-in var(--medium) var(--ease) both; }
.page[data-demo-state="true"]::before { content: "DEMO STATE"; position: absolute; top: -45px; right: 0; color: rgba(238, 234, 224, .35); font-family: var(--font-mono); font-size: var(--type-meta); letter-spacing: .16em; }
.page-intro { position: relative; max-width: 760px; margin-bottom: 56px; color: var(--paper); }
.page-intro__kicker, .section-kicker { display: inline-block; color: var(--gold-light); font-size: var(--type-meta); letter-spacing: .17em; text-transform: uppercase; }
.page-intro__gua { position: absolute; top: -20px; right: 0; color: rgba(238, 234, 224, .14); font-family: var(--font-kai); font-size: var(--type-hero-lg); line-height: 1; }
.page-intro h1 { width: 100%; max-width: 720px; margin: 16px 0 12px; color: var(--paper); font-family: var(--font-kai); font-size: var(--type-hero-md); font-weight: 500; line-height: 1.08; letter-spacing: 0; overflow-wrap: anywhere; word-break: break-all; }
.page-intro p { max-width: 600px; margin: 0; color: var(--ink-3); font-size: var(--type-small); line-height: 1.9; }
em { color: var(--gold-light); font-family: var(--font-kai); font-style: normal; }
.demo-state { display: inline-block; padding: 4px 8px; color: var(--gold-light); border: 1px solid rgba(228, 189, 112, .48); font-family: var(--font-mono); font-size: var(--type-meta); letter-spacing: .15em; line-height: 1; }
.page-intro > .demo-state { margin-bottom: 12px; }
.reveal-item { opacity: 0; transform: translateY(22px); transition: opacity var(--medium) var(--ease) var(--reveal-delay, 0ms), transform var(--medium) var(--ease) var(--reveal-delay, 0ms); }
.reveal-item.is-in-view { opacity: 1; transform: none; }
.app-shell[data-route-phase="out"] .page-view { opacity: .12; transform: translateY(10px) scale(.992); transition: opacity 120ms ease, transform 120ms ease; }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; gap: 20px; padding: 0 20px; border: 1px solid transparent; font-size: var(--type-meta); letter-spacing: .08em; transition: transform var(--fast) var(--ease), background var(--fast) ease, color var(--fast) ease, border-color var(--fast) ease; }
.button .icon { width: 16px; height: 16px; }
.button:hover { transform: translateY(-2px); }
.button--primary { color: var(--ink); background: var(--gold-light); border-color: var(--gold-light); }
.button--primary:hover { background: #f0d18d; }
.button--ink { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.button--ink:hover { background: var(--ink-blue); }
.button--outline { color: var(--paper); background: transparent; border-color: var(--ink-3); }
.button--outline:hover { color: var(--invert-fg); background: var(--invert-bg); }
.text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--gold-light); font-size: var(--type-meta); letter-spacing: .08em; transition: gap var(--fast) var(--ease); }
.text-link:hover { gap: 16px; }
.text-link .icon { width: 14px; }
.section-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.section-title > div > span, .section-title > div > .section-kicker { color: var(--rock); font-size: var(--type-meta); letter-spacing: .16em; }
.section-title h2 { margin: 8px 0 0; color: var(--ink); font-family: var(--font-kai); font-size: var(--type-display); font-weight: 500; line-height: 1.2; overflow-wrap: anywhere; word-break: break-all; }
.paper-panel { background: var(--surface-card); box-shadow: var(--shadow-paper); }

/* Home: first viewport is the world entry, then the scroll becomes a route. */
.page--home { margin: -82px -56px -120px; margin-right: calc(-1 * 272px); }
.home-hero { position: relative; min-height: min(850px, calc(100vh - 8px)); display: grid; grid-template-columns: minmax(290px, .9fr) minmax(300px, .7fr); align-items: center; padding: 125px 88px 78px; overflow: hidden; border-bottom: 1px solid var(--rule-ink); }
.home-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 17, 20, .75), transparent 72%); pointer-events: none; }
.home-hero__copy, .home-hero__summit, .home-hero__image { position: relative; z-index: 1; }
.home-hero__copy { align-self: center; max-width: 580px; color: var(--paper); }
.home-hero__copy .page-intro__kicker { margin-top: 12px; }
.home-hero h1 { width: 100%; margin: 16px 0 20px; color: var(--paper); font-family: var(--font-kai); font-size: var(--type-hero-lg); font-weight: 500; line-height: .88; letter-spacing: 0; overflow-wrap: anywhere; word-break: break-all; }
.home-hero h1 em { color: var(--gold-light); }
.home-hero__copy p { max-width: 370px; margin: 0 0 32px; color: var(--ink-2); font-size: var(--type-small); line-height: 1.9; }
.home-hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; }
.home-hero__summit { align-self: start; justify-self: end; margin-top: 56px; max-width: 220px; color: var(--ink-2); text-align: right; }
.summit-mark { display: flex; flex-direction: column; align-items: flex-end; }
.summit-mark .world-marker { margin-bottom: 8px; }
.summit-mark span { color: var(--ink-3); font-size: var(--type-meta); letter-spacing: .22em; }
.summit-mark strong { margin-top: 4px; color: var(--gold-light); font-size: var(--type-subhead); font-weight: 500; }
.summit-mark__caption { display: inline-block; margin-top: 16px; font-size: var(--type-meta); line-height: 1.8; }
.home-hero__image { position: absolute; right: 0; bottom: 0; width: min(57%, 790px); height: 84%; background-image: linear-gradient(90deg, rgba(12, 27, 31, .22), transparent 53%), var(--image); background-position: 57% center; background-size: cover; clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%); opacity: .78; mix-blend-mode: screen; }
.home-hero__image::after { content: ""; position: absolute; inset: 0; border-left: 1px solid rgba(228, 189, 112, .24); transform: skewX(-16deg); transform-origin: bottom left; }
.home-hero__image span { position: absolute; right: 8%; bottom: 8%; color: var(--ink-2); font-family: var(--font-kai); font-size: var(--type-body); line-height: 1.45; text-align: right; }
.home-hero__image b { color: var(--gold-light); font-size: var(--type-meta); font-weight: 400; letter-spacing: .15em; }
.world-marker { position: relative; width: 106px; height: 106px; display: grid; place-items: center; }
.world-marker__ring { position: absolute; border: 1px solid rgba(228, 189, 112, .66); border-radius: 50%; }
.world-marker__ring--outer { inset: 0; border-style: dashed; animation: rotate-slow 19s linear infinite; }
.world-marker__ring--inner { inset: 12px; border-color: rgba(238, 234, 224, .28); }
.world-marker__yin { color: var(--gold-light); font-family: var(--font-kai); font-size: var(--type-title); }
.home-overview { display: grid; grid-template-columns: 1.1fr .9fr; color: var(--ink); background: var(--surface-card); }
.home-overview__lead { padding: 78px 88px; background: var(--paper-light); }
.home-overview__lead .section-kicker { color: var(--red); }
.home-overview h2 { margin: 16px 0; font-family: var(--font-kai); font-size: var(--type-display); font-weight: 500; line-height: 1.2; }
.home-overview h2 em { color: var(--red); }
.home-overview p { margin: 0 0 24px; color: var(--rock); font-size: var(--type-small); line-height: 1.8; }
.home-overview__stats { position: relative; display: grid; align-content: center; padding: 56px 74px; border-left: 1px solid var(--line-dark); }
.meta-line { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line-dark); }
.meta-line span { color: var(--rock); font-size: var(--type-meta); }
.meta-line strong { color: var(--ink); font-size: var(--type-body); font-weight: 500; }
.home-overview__seal { display: flex; align-items: center; gap: 8px; margin-top: 20px; color: var(--red); }
.home-overview__seal .gua-mark { font-size: var(--type-display); }
.home-overview__seal span { color: var(--rock); font-size: var(--type-meta); line-height: 1.55; }
.home-route { padding: 78px 88px; color: var(--paper); background: rgba(13, 23, 26, .6); }
.home-route .section-title h2 { color: var(--paper); }
.home-route .section-title > div > span { color: var(--ink-3); }
.home-route .home-route__intro > p { margin: -12px 0 40px; color: var(--ink-3); font-size: var(--type-small); }
.task-list { display: grid; }
.task-row { position: relative; display: grid; grid-template-columns: 54px 48px minmax(0, 1fr) 130px; align-items: center; min-height: 108px; gap: 16px; padding: 20px 0; color: var(--paper); border-top: 1px solid var(--rule-ink); transition: background var(--fast) ease, padding var(--fast) var(--ease); }
.task-row[href] { color: var(--paper); text-decoration: none; }
.task-row:last-child { border-bottom: 1px solid var(--rule-ink); }
.task-row:hover { padding-left: 12px; padding-right: 12px; background: var(--wash-ink-soft); }
.task-row--locked { color: var(--ink-3); }
.task-row__step { position: relative; align-self: stretch; display: flex; align-items: center; color: var(--gold-light); font-family: var(--font-mono); font-size: var(--type-meta); }
.task-row__step span { position: absolute; top: 34px; left: 24px; width: 1px; height: 72px; background: linear-gradient(var(--gold-light), transparent); opacity: .45; }
.task-row:last-child .task-row__step span { display: none; }
.task-row__gua { display: grid; place-items: center; width: 40px; height: 40px; color: var(--gold-light); border: 1px solid rgba(228, 189, 112, .48); font-family: var(--font-kai); font-size: var(--type-subhead); }
.task-row__type { color: var(--ink-3); font-size: var(--type-meta); letter-spacing: .14em; }
.task-row h3 { margin: 8px 0 4px; font-size: var(--type-body); font-weight: 500; }
.task-row p { margin: 0; color: var(--ink-3); font-size: var(--type-meta); }
.task-row__state { display: flex; align-items: center; justify-content: flex-end; gap: 8px; color: var(--gold-light); font-size: var(--type-meta); letter-spacing: .07em; }
.task-row--done .task-row__state { color: #91bd96; }
.task-row--locked .task-row__state { color: var(--ink-3); }
.task-row__state .icon { width: 14px; }
.home-bottom { display: grid; grid-template-columns: .72fr 1.28fr; color: var(--ink); background: var(--surface-card); }
.quote-panel { position: relative; overflow: hidden; padding: 72px 88px; border-right: 1px solid var(--line-dark); background: var(--paper-light); }
.quote-panel::before { content: ""; position: absolute; inset: 25px 28px; border-top: 1px solid rgba(169, 75, 64, .25); border-bottom: 1px solid rgba(13, 23, 26, .12); pointer-events: none; }
.quote-panel::after { content: ""; position: absolute; top: 25px; bottom: 25px; left: 28px; width: 1px; background: var(--red); opacity: .48; pointer-events: none; }
.quote-panel > * { position: relative; z-index: 1; }
.quote-panel__eyebrow { display: block; color: var(--rock); font-family: var(--font-mono); font-size: var(--type-meta); letter-spacing: .16em; }
.quote-panel__seal { display: block; margin-top: 24px; color: var(--red); font-family: var(--font-kai); font-size: var(--type-hero); line-height: .4; }
.quote-panel blockquote { margin: 24px 0 24px; color: var(--ink); font-family: var(--font-kai); font-size: var(--type-title); line-height: 1.55; }
.quote-panel__author { display: block; color: var(--rock); font-size: var(--type-meta); letter-spacing: .16em; }
.home-next { position: relative; overflow: hidden; padding: 72px 88px; background: var(--surface-card); }
.home-next::before { content: ""; position: absolute; width: 320px; height: 320px; right: -90px; top: -100px; border: 1px solid rgba(169, 75, 64, .2); border-radius: 50%; box-shadow: 0 0 0 25px rgba(169, 75, 64, .035), 0 0 0 52px rgba(169, 75, 64, .025); transform: rotate(18deg); pointer-events: none; }
.home-next > * { position: relative; z-index: 1; }
.home-next__stamp { position: absolute; top: 31px; right: 34px; color: rgba(169, 75, 64, .48); font-family: var(--font-mono); font-size: var(--type-meta); letter-spacing: .12em; writing-mode: vertical-rl; }
.home-next h2 { margin: 16px 0; font-family: var(--font-kai); font-size: var(--type-display); font-weight: 500; line-height: 1.1; }
.home-next h2 em { color: var(--red); }
.home-next p { max-width: 390px; margin: 0 0 24px; color: var(--rock); font-size: var(--type-small); line-height: 1.8; }

/* Shared compositions */
.goals-layout, .study-layout, .assistant-layout, .profile-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 24px; }
.goal-selection, .study-focus, .assistant-dialog, .profile-card, .settings-list { padding: 40px; color: var(--ink); background: var(--surface-paper); box-shadow: var(--shadow-paper); }
.goal-selection .section-title h2, .study-focus h2, .assistant-dialog strong, .profile-card h2 { color: var(--ink); }
.goal-selection .section-title > div > span, .study-focus .section-kicker { color: var(--red); }
.goal-options { display: grid; gap: 8px; margin-top: 40px; }
.goal-option { display: grid; grid-template-columns: 54px minmax(0, 1fr) 24px; align-items: center; gap: 16px; width: 100%; padding: 16px; color: var(--ink); text-align: left; background: rgba(217, 211, 198, .6); border: 1px solid transparent; transition: border-color var(--fast) ease, background var(--fast) ease, transform var(--fast) var(--ease); }
.goal-option:hover, .goal-option.is-selected { background: var(--paper-light); border-color: rgba(189, 141, 67, .82); transform: translateX(4px); }
.goal-option__icon { display: grid; place-items: center; width: 44px; height: 44px; color: var(--red); border: 1px solid rgba(169, 75, 64, .36); font-family: var(--font-kai); font-size: var(--type-subhead); }
.goal-option strong, .goal-option small { display: block; }
.goal-option strong { font-size: var(--type-small); font-weight: 500; }
.goal-option small { margin-top: 4px; color: var(--rock); font-size: var(--type-meta); line-height: 1.5; }
.goal-option > i { color: var(--rock-light); font-style: normal; }
.goal-option.is-selected > i { color: var(--red); }
.goal-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-top: 32px; }
.goal-foot > span { color: var(--rock); font-size: var(--type-meta); }
.orientation-panel { min-height: 470px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 32px; color: var(--paper); background: rgba(13, 23, 26, .82); border: 1px solid var(--rule-ink); box-shadow: var(--shadow-ink); }
.orientation-panel h3 { margin: 12px 0; font-family: var(--font-kai); font-size: var(--type-title); font-weight: 500; line-height: 1.25; }
.orientation-panel p { margin: 0; color: var(--ink-3); font-size: var(--type-meta); line-height: 1.8; }
/* The supplied reference becomes a shared compass language, with controls kept in HTML. */
.bagua-field { position: relative; width: 100%; max-width: 100%; min-width: 0; color: var(--ink); }
.bagua-field__paper { position: relative; width: 100%; max-width: 100%; min-height: 480px; overflow: hidden; background: var(--surface-card); border: 1px solid rgba(13, 23, 26, .2); box-shadow: 0 16px 45px rgba(4, 13, 15, .13); isolation: isolate; }
.bagua-field__image, .bagua-field__wash { position: absolute; inset: 0; pointer-events: none; }
.bagua-field__image { z-index: -2; background-image: var(--bagua-image); background-position: center; background-size: cover; filter: grayscale(1) contrast(1.14); opacity: .24; mix-blend-mode: multiply; }
.bagua-field__wash { z-index: -1; opacity: .7; background-image: repeating-linear-gradient(0deg, rgba(13, 23, 26, .025) 0 1px, transparent 1px 5px), repeating-linear-gradient(90deg, rgba(13, 23, 26, .02) 0 1px, transparent 1px 8px); }
.bagua-field__ring { position: absolute; left: 50%; top: 50%; aspect-ratio: 1; border: 1px solid rgba(13, 23, 26, .28); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.bagua-field__ring--outer { width: 86%; }
.bagua-field__ring--middle { width: 64%; border-color: rgba(13, 23, 26, .21); }
.bagua-field__ring--inner { width: 38%; border-color: rgba(169, 75, 64, .46); }
.bagua-field__axis { position: absolute; left: 50%; top: 50%; background: rgba(13, 23, 26, .2); pointer-events: none; }
.bagua-field__axis--horizontal { width: 86%; height: 1px; transform: translate(-50%, -50%); }
.bagua-field__axis--vertical { width: 1px; height: 86%; transform: translate(-50%, -50%); }
.bagua-field__center { position: absolute; left: 50%; top: 50%; width: 124px; height: 124px; display: grid; place-items: center; align-content: center; background: var(--surface-paper-muted); border: 1px solid rgba(13, 23, 26, .34); border-radius: 50%; transform: translate(-50%, -50%); text-align: center; }
.bagua-field__center::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(169, 75, 64, .45); border-radius: 50%; }
.bagua-field__center span { position: relative; color: var(--red); font-family: var(--font-kai); font-size: var(--type-display); line-height: 1; }
.bagua-field__center b { position: relative; margin-top: 4px; color: var(--ink); font-family: var(--font-kai); font-size: var(--type-meta); font-weight: 500; }
.bagua-field__center small { position: relative; margin-top: 4px; color: var(--rock); font-size: var(--type-meta); }
.bagua-node { position: absolute; z-index: 2; display: grid; grid-template-columns: 31px minmax(0, 1fr); align-items: center; gap: 4px; width: 112px; padding: 8px 8px; color: var(--ink); background: rgba(247, 244, 237, .84); border: 1px solid rgba(13, 23, 26, .16); text-align: left; transition: color var(--fast) ease, background var(--fast) ease, border-color var(--fast) ease, transform var(--fast) var(--ease); }
.bagua-node:hover, .bagua-node.is-active { color: var(--red); background: rgba(247, 244, 237, .98); border-color: rgba(169, 75, 64, .62); }
.bagua-node__symbol { display: grid; place-items: center; width: 29px; height: 29px; color: var(--ink); border: 1px solid currentColor; font-family: var(--font-kai); font-size: var(--type-subhead); }
.bagua-node__copy { display: grid; gap: 0px; min-width: 0; }
.bagua-node__copy b { font-size: var(--type-meta); font-weight: 500; }
.bagua-node__copy strong { font-family: var(--font-kai); font-size: var(--type-meta); font-weight: 500; }
.bagua-node__copy small { overflow: hidden; color: var(--rock); font-size: var(--type-meta); line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.bagua-node--north { left: 50%; top: 5%; transform: translateX(-50%); }
.bagua-node--northeast { right: 4%; top: 20%; }
.bagua-node--east { right: 1%; top: 50%; transform: translateY(-50%); }
.bagua-node--southeast { right: 4%; bottom: 18%; }
.bagua-node--south { left: 50%; bottom: 4%; transform: translateX(-50%); }
.bagua-node--southwest { left: 4%; bottom: 18%; }
.bagua-node--west { left: 1%; top: 50%; transform: translateY(-50%); }
.bagua-node--northwest { left: 4%; top: 20%; }
.bagua-node--north:hover, .bagua-node--north.is-active, .bagua-node--south:hover, .bagua-node--south.is-active { transform: translateX(-50%) translateY(-4px); }
.bagua-node--east:hover, .bagua-node--east.is-active, .bagua-node--west:hover, .bagua-node--west.is-active { transform: translateY(-50%) translateX(4px); }
.bagua-field__caption { position: absolute; z-index: 3; left: 18px; bottom: 15px; display: grid; gap: 4px; color: var(--red); font-family: var(--font-kai); font-size: var(--type-meta); }
.bagua-field__caption span { color: var(--rock); font-family: inherit; font-size: var(--type-meta); }
.bagua-field--compact .bagua-field__paper { min-height: 318px; }
.bagua-field--compact .bagua-field__center { width: 76px; height: 76px; }
.bagua-field--compact .bagua-field__center span { font-size: var(--type-title); }
.bagua-field--compact .bagua-field__center b { font-size: var(--type-meta); }
.bagua-field--compact .bagua-field__center small, .bagua-field--compact .bagua-node__copy small, .bagua-field--compact .bagua-field__caption span { display: none; }
.bagua-field--compact .bagua-node { grid-template-columns: 25px minmax(0, 1fr); width: 76px; padding: 4px; gap: 4px; }
.bagua-field--compact .bagua-node__symbol { width: 24px; height: 24px; font-size: var(--type-small); }
.bagua-field--compact .bagua-node__copy b { font-size: var(--type-meta); }
.bagua-field--compact .bagua-node__copy strong { font-size: var(--type-meta); }
.bagua-field--compact .bagua-node--north { top: 4%; }
.bagua-field--compact .bagua-node--south { bottom: 4%; }
/* The directory is the single map of the product: eight clickable directions around one center. */
.feature-directory { display: grid; gap: 24px; max-width: 980px; }
.feature-directory__note { max-width: 520px; color: var(--paper); }
.feature-directory__note h2 { margin: 12px 0 12px; color: var(--paper); font-family: var(--font-kai); font-size: var(--type-display); font-weight: 500; line-height: 1.15; }
.feature-directory__note p { max-width: 440px; margin: 0; color: var(--ink-3); font-size: var(--type-meta); line-height: 1.9; }
.feature-directory .bagua-field__paper { min-height: 650px; background: var(--surface-paper-muted); box-shadow: var(--shadow-ink); }
.feature-directory .bagua-field__image { opacity: .34; filter: grayscale(.12) contrast(1.05); }
.feature-directory .bagua-field__center { width: 148px; height: 148px; background: var(--surface-paper-muted); }
.feature-directory .bagua-field__center span { font-size: var(--type-display); }
.feature-directory .bagua-field__center b { font-size: var(--type-small); }
.feature-directory .bagua-node--directory { color: var(--ink); background: rgba(247, 244, 237, .94); box-shadow: 0 12px 28px rgba(4, 13, 15, .14); }
.feature-directory .bagua-node--directory:hover { color: var(--red); background: var(--paper-light); border-color: rgba(169, 75, 64, .62); box-shadow: 0 16px 32px rgba(4, 13, 15, .2); }
.feature-directory .bagua-node--directory .bagua-node__copy strong { font-size: var(--type-small); }
.feature-directory .bagua-node--directory .bagua-node__copy small { max-width: 96px; line-height: 1.45; }

.plan-head { display: grid; grid-template-columns: 1fr 280px; gap: 16px; margin-bottom: 40px; }
.plan-head__progress, .plan-head__balance { min-height: 184px; padding: 32px; background: var(--surface-paper); box-shadow: var(--shadow-paper); }
.plan-head__progress > span, .plan-head__balance > div > span { color: var(--rock); font-size: var(--type-meta); letter-spacing: .15em; }
.plan-head__progress > strong { display: block; margin: 16px 0 16px; color: var(--ink); font-size: var(--type-title); font-weight: 500; }
.plan-head__progress > strong small { color: var(--rock); font-size: var(--type-meta); font-weight: 400; }
.plan-head__progress > div { display: flex; justify-content: space-between; margin-top: 8px; color: var(--rock); font-size: var(--type-meta); }
.progress-line { height: 4px; overflow: hidden; background: rgba(13, 23, 26, .13); }
.progress-line span { display: block; width: var(--value); height: 100%; background: var(--gold); transform-origin: left; animation: progress-in 800ms var(--ease) both; }
.progress-line--red span { background: var(--red); }
.progress-line--gray span { background: var(--rock); }
.plan-head__balance { display: flex; align-items: center; gap: 16px; background: rgba(30, 58, 66, .94); color: var(--paper); }
.balance-wheel { position: relative; width: 60px; height: 60px; flex: 0 0 auto; overflow: hidden; display: grid; place-items: center; border: 1px solid rgba(228, 189, 112, .62); border-radius: 50%; }
.balance-wheel::before { content: ""; position: absolute; inset: 0; background: conic-gradient(var(--gold-light) 0 48%, var(--ink) 48% 100%); opacity: .9; }
.balance-wheel::after { content: ""; position: absolute; inset: 9px; background: var(--ink-blue); border-radius: 50%; }
.balance-wheel b { position: relative; z-index: 1; color: var(--gold-light); font-family: var(--font-prose); font-size: var(--type-heading); font-weight: 400; }
.balance-wheel--large { width: 84px; height: 84px; }
.plan-head__balance strong { display: block; margin: 8px 0 4px; color: var(--gold-light); font-size: var(--type-heading); font-weight: 500; }
.plan-head__balance p { margin: 0; color: var(--ink-3); font-size: var(--type-meta); }
.plan-route { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 32px; }
.plan-route__label { padding-top: 16px; color: var(--paper); }
.plan-route__label span { color: var(--gold-light); font-family: var(--font-mono); font-size: var(--type-meta); letter-spacing: .18em; }
.plan-route__label strong { display: block; margin-top: 12px; font-family: var(--font-prose); font-size: var(--type-heading); font-weight: 500; }
.plan-route__label small { display: block; margin-top: 12px; color: var(--ink-3); font-size: var(--type-meta); line-height: 1.7; }
.plan-route__label .button { margin-top: 16px; }
.plan-route__list { padding: 0 0 20px 8px; }
.plan-route__list .task-row { background: rgba(13, 23, 26, .48); padding-left: 16px; padding-right: 16px; }
.route-future { position: relative; height: 106px; padding: 32px 0 0 56px; color: var(--ink-3); font-family: var(--font-prose); font-size: var(--type-body); }
.route-future__line { position: absolute; left: 25px; top: 0; bottom: 0; width: 1px; background: linear-gradient(var(--gold-light), transparent); opacity: .42; }
.route-future__cloud::before { content: "☁"; margin-right: 8px; color: rgba(238, 234, 224, .25); font-size: var(--type-subhead); }

.plan-print-header { display: none; }
.plan-tools { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 16px; color: var(--paper); font-size: var(--type-meta); }
.plan-tools .button { flex: 0 0 auto; }
.plan-week-list { display: grid; gap: 12px; }
.plan-day { padding: 20px 24px; border-left: 3px solid var(--gold); border-radius: 4px; background: var(--surface-paper); color: var(--ink); box-shadow: var(--shadow-paper); break-inside: avoid; }
.plan-day__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--rock); font-size: var(--type-meta); }
.plan-day__self-report { color: var(--red); }
.plan-day h2 { margin: 12px 0 8px; color: var(--ink); font-family: var(--font-kai); font-size: var(--type-heading); font-weight: 500; line-height: 1.45; }
.plan-day__meta { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--rock); font-size: var(--type-meta); }
.plan-day__detail { display: grid; grid-template-columns: minmax(92px, 130px) minmax(0, 1fr); gap: 4px 16px; margin-top: 16px; }
.plan-day__detail h3 { margin: 0; color: var(--rock); font-size: var(--type-meta); font-weight: 500; }
.plan-day__detail p { margin: 0; color: var(--ink); font-size: var(--type-small); line-height: 1.75; white-space: pre-wrap; }
.plan-resource, .plan-practice { grid-column: 1 / -1; display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 4px 16px; padding-top: 8px; border-top: 1px solid rgba(13, 23, 26, .12); }
.plan-resource > span, .plan-practice > span { grid-row: span 2; color: var(--rock); font-size: var(--type-meta); }
.plan-resource a, .plan-practice a { width: fit-content; max-width: 100%; color: #285962; font-size: var(--type-meta); overflow-wrap: anywhere; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.plan-resource small, .plan-practice small { color: var(--rock); font-size: var(--type-meta); line-height: 1.6; }
.plan-resource strong, .plan-practice strong { color: var(--ink); font-size: var(--type-meta); font-weight: 500; }
.plan-day__output { grid-column: 1 / -1; display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px; padding-top: 8px; border-top: 1px solid rgba(13, 23, 26, .12); font-size: var(--type-meta); line-height: 1.65; }
.plan-day__output strong { color: var(--rock); font-weight: 500; }
.plan-day__print-check, .plan-day__write-space { display: none; }
.plan-feedback { display: grid; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(13, 23, 26, .14); }
.plan-feedback__fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, .7fr); gap: 12px; }
.plan-feedback label { display: grid; gap: 4px; color: var(--rock); font-size: var(--type-meta); }
.plan-feedback select, .plan-feedback input, .plan-feedback textarea { width: 100%; min-width: 0; padding: 8px 8px; border: 1px solid rgba(13, 23, 26, .2); border-radius: 3px; background: #fffefa; color: var(--ink); font: inherit; }
.plan-feedback textarea { resize: vertical; line-height: 1.6; }
.plan-feedback__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plan-feedback__footer small, .plan-feedback__locked { color: var(--rock); font-size: var(--type-meta); line-height: 1.6; }
.plan-cycle-next { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 24px 0; padding: 20px 0; border-top: 1px solid var(--rule-ink-strong); border-bottom: 1px solid var(--rule-ink-strong); color: var(--paper); }
.plan-cycle-next h2 { margin: 4px 0; font-family: var(--font-kai); font-size: var(--type-heading); font-weight: 500; }
.plan-cycle-next p, .plan-confirm-note { max-width: 620px; margin: 0; color: var(--ink-2); font-size: var(--type-meta); line-height: 1.8; }
.plan-empty { display: grid; justify-items: start; gap: 12px; padding: 32px; background: var(--surface-paper); color: var(--ink); }
.plan-empty h2 { max-width: 680px; margin: 0; font-family: var(--font-kai); font-size: var(--type-heading); font-weight: 500; }
.plan-empty p { max-width: 640px; margin: 0 0 4px; color: var(--rock); font-size: var(--type-small); line-height: 1.8; }
.plan-confirm-note { margin: 0 0 16px; }
.plan-horizon { margin-top: 32px; }

@media (max-width: 700px) {
  .plan-day { padding: 16px 16px; }
  .plan-day__header { align-items: flex-start; }
  .plan-day__detail { grid-template-columns: 1fr; gap: 4px; }
  .plan-day__detail h3:not(:first-child) { margin-top: 8px; }
  .plan-resource, .plan-practice, .plan-day__output { grid-template-columns: 1fr; gap: 4px; }
  .plan-resource > span, .plan-practice > span { grid-row: auto; }
  .plan-feedback__fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .plan-cycle-next { align-items: flex-start; flex-direction: column; }
  .plan-tools { align-items: flex-start; }
}

@media print {
  @page { size: A4; margin: 14mm; }
  html, body { min-width: 0 !important; min-height: 0 !important; background: #fff !important; color: #111 !important; }
  body * { visibility: hidden !important; }
  .page--plan, .page--plan * { visibility: visible !important; }
  .page--plan { position: absolute !important; inset: 0 auto auto 0 !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; background: #fff !important; color: #111 !important; }
  .page--plan > :not(.plan-print-header):not(.plan-week-list) { display: none !important; }
  .plan-print-header { display: block; margin: 0 0 8mm; color: #111; }
  .plan-print-header h2 { margin: 2mm 0; font-size: 21pt; font-weight: 600; }
  .plan-print-header p, .plan-print-header small { color: #444; font-size: 9pt; line-height: 1.5; }
  .plan-week-list { display: block; }
  .plan-day { margin: 0 0 5mm; padding: 4mm; border: 1px solid #aaa; border-left: 2mm solid #6e746b; border-radius: 0; background: #fff !important; color: #111 !important; box-shadow: none !important; break-inside: avoid; page-break-inside: avoid; }
  .plan-day h2 { margin: 2mm 0; color: #111; font-size: 13pt; }
  .plan-day__header, .plan-day__meta, .plan-day__detail h3, .plan-resource > span, .plan-practice > span, .plan-day__output strong { color: #444; }
  .plan-day__detail { margin-top: 3mm; }
  .plan-day__detail p, .plan-day__output, .plan-resource a, .plan-practice a, .plan-resource small, .plan-practice small { color: #111 !important; font-size: 9pt; }
  .plan-resource, .plan-practice, .plan-day__output { border-color: #bbb; }
  .plan-feedback, .plan-feedback__locked, .plan-cycle-next, .plan-horizon, .plan-tools, .plan-confirm-note { display: none !important; }
  .plan-day__print-check { display: flex; justify-content: space-between; margin-top: 4mm; padding-top: 3mm; border-top: 1px solid #bbb; color: #111; font-size: 9pt; }
  .plan-day__write-space { display: grid; gap: 2mm; margin-top: 3mm; color: #333; font-size: 9pt; }
  .plan-day__write-space i { display: block; height: 7mm; border-bottom: 1px solid #bbb; }
  a { color: #111 !important; text-decoration: underline !important; }
}

.study-layout { align-items: start; }
.study-focus { min-height: 620px; }
.study-focus__top { display: flex; align-items: center; gap: 12px; color: var(--red); }
.study-focus__top .demo-state { margin-left: auto; color: var(--rock); border-color: var(--line-dark); }
.study-focus__timer { color: var(--rock); font-family: var(--font-mono); font-size: var(--type-meta); letter-spacing: .1em; }
.study-focus__title { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 20px; align-items: start; margin: 40px 0 48px; }
.study-focus__gua { display: grid; place-items: center; width: 58px; height: 58px; color: var(--red); border: 1px solid rgba(169, 75, 64, .42); font-family: var(--font-kai); font-size: var(--type-title); }
.study-focus__title h2 { margin: 0; font-family: var(--font-kai); font-size: var(--type-display); font-weight: 500; line-height: 1.12; }
.study-focus__title p { grid-column: 2; margin: 12px 0 0; color: var(--rock); font-size: var(--type-meta); line-height: 1.8; }
.study-action { padding: 24px 0 32px; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.study-action__heading > span { color: var(--red); font-family: var(--font-mono); font-size: var(--type-meta); letter-spacing: .12em; }
.study-action__heading h3 { max-width: 650px; margin: 12px 0 8px; color: var(--ink); font-family: var(--font-kai); font-size: var(--type-title); font-weight: 500; line-height: 1.45; }
.study-action__heading p { max-width: 650px; margin: 0; color: var(--rock); font-size: var(--type-meta); line-height: 1.8; }
.study-action__controls { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin-top: 20px; }
.study-action__controls label { display: grid; gap: 4px; color: var(--rock); font-size: var(--type-meta); }
.study-action__controls select { min-height: 37px; padding: 8px 24px 8px 8px; color: var(--ink); background: rgba(217, 211, 198, .48); border: 1px solid rgba(13, 23, 26, .2); font: inherit; font-size: var(--type-body); }
.study-action__controls .text-link { align-self: center; min-height: 37px; margin-left: 0px; padding: 0 0 0 16px; color: var(--rock); background: transparent; border: 0; border-left: 1px solid var(--line-dark); appearance: none; font-size: var(--type-meta); letter-spacing: .04em; transition: color var(--fast) ease; }
.study-action__controls .text-link:hover { color: var(--red); background: transparent; transform: none; }
.evidence-submit { margin-top: 48px; padding-top: 32px; color: var(--ink); border-top: 1px solid var(--line-dark); }
.evidence-submit .section-title { align-items: flex-end; }
.evidence-submit .section-title h2 { margin-top: 8px; color: var(--ink); font-family: var(--font-kai); font-size: var(--type-title); font-weight: 500; }
.evidence-submit > p { max-width: 620px; margin: 0 0 20px; color: var(--rock); font-size: var(--type-meta); line-height: 1.8; }
.evidence-submit__level, .evidence-review__status { color: var(--red); font-family: var(--font-mono); font-size: var(--type-meta); letter-spacing: .1em; }
.evidence-levels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.evidence-level { display: grid; grid-template-columns: 36px minmax(0, 1fr) 18px; align-items: center; gap: 8px; min-height: 62px; padding: 8px 12px; color: var(--ink); text-align: left; background: rgba(217, 211, 198, .52); border: 1px solid transparent; }
.evidence-level:hover, .evidence-level.is-selected { background: var(--paper-light); border-color: var(--gold); }
.evidence-level__number { display: grid; place-items: center; width: 31px; height: 31px; color: var(--red); border: 1px solid rgba(169, 75, 64, .35); font-family: var(--font-mono); font-size: var(--type-meta); }
.evidence-level strong, .evidence-level small { display: block; }
.evidence-level strong { font-size: var(--type-meta); font-weight: 500; }
.evidence-level small { margin-top: 4px; color: var(--rock); font-size: var(--type-meta); line-height: 1.4; }
.evidence-level > .icon { color: var(--red); }
.evidence-submit__field { display: grid; gap: 8px; margin: 20px 0 16px; color: var(--rock); font-size: var(--type-meta); }
.evidence-submit__field textarea { min-height: 98px; padding: 12px; color: var(--ink); background: rgba(217, 211, 198, .42); border: 1px solid transparent; resize: vertical; font: inherit; line-height: 1.7; }
.evidence-submit__field textarea:focus { border-color: var(--gold); background: var(--paper-light); }
.study-knowledge-capture { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; padding-top: 20px; border-top: 1px dashed rgba(13, 23, 26, .2); }
.study-knowledge-capture__copy { display: grid; gap: 4px; min-width: 0; }
.study-knowledge-capture__copy > span { color: var(--red); font-family: var(--font-mono); font-size: var(--type-meta); letter-spacing: .1em; }
.study-knowledge-capture__copy strong { color: var(--ink); font-family: var(--font-prose); font-size: var(--type-small); font-weight: 500; }
.study-knowledge-capture__copy small { color: var(--rock); font-size: var(--type-meta); line-height: 1.6; }
.knowledge-capture-link { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; gap: 8px; min-height: 36px; padding: 8px 12px; color: var(--ink); background: transparent; border: 1px solid rgba(13, 23, 26, .28); font: inherit; font-size: var(--type-meta); transition: color var(--fast) ease, background var(--fast) ease, border-color var(--fast) ease, transform var(--fast) var(--ease); }
.knowledge-capture-link:hover { color: var(--red); background: rgba(247, 244, 237, .72); border-color: rgba(169, 75, 64, .56); transform: translateX(3px); }
.knowledge-capture-link .icon { width: 13px; height: 13px; }
.study-focus--material { min-height: 0; }
.study-focus--material .study-focus__title { margin-bottom: 32px; }
.material-intake { display: grid; gap: 24px; }
.material-intake__form, .material-evidence { display: grid; gap: 16px; }
.material-intake__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(130px, .75fr)); gap: 12px; }
.material-intake label, .material-evidence__field { display: grid; gap: 8px; color: var(--rock); font-size: var(--type-meta); }
.material-intake input, .material-intake select, .material-intake textarea, .material-evidence textarea { width: 100%; padding: 12px 12px; color: var(--ink); background: rgba(217, 211, 198, .42); border: 1px solid rgba(13, 23, 26, .16); font: inherit; font-size: var(--type-body); line-height: 1.65; }
.material-intake input:focus, .material-intake select:focus, .material-intake textarea:focus, .material-evidence textarea:focus { border-color: var(--gold); background: var(--paper-light); }
.material-intake textarea { min-height: 180px; resize: vertical; }
.material-photo { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 12px 12px; background: rgba(217, 211, 198, .28); border: 1px dashed rgba(13, 23, 26, .28); }
.material-photo input { max-width: 240px; padding: 0; border: 0; background: transparent; cursor: pointer; font-size: var(--type-body); }
.material-photo > span { min-width: 0; overflow: hidden; color: var(--ink); font-size: var(--type-meta); line-height: 1.5; overflow-wrap: anywhere; }
.material-photo__notice, .material-photo__uncertain { margin: -8px 0 0; color: var(--rock); font-size: var(--type-meta); line-height: 1.65; }
.material-photo__uncertain { color: var(--red); }
.material-submit-label--confirm { display: none; }
.material-intake__form[data-photo-confirmed="true"] .material-submit-label--default { display: none; }
.material-intake__form[data-photo-confirmed="true"] .material-submit-label--confirm { display: inline; }
.material-intake__footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 4px; color: var(--rock); font-size: var(--type-meta); line-height: 1.6; }
.material-library, .material-diagnosis, .material-citations, .material-evidence { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line-dark); }
.material-library__head, .material-citations__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--rock); font-family: var(--font-mono); font-size: var(--type-meta); letter-spacing: .08em; text-transform: uppercase; }
.material-library__head strong { color: var(--red); font-weight: 500; }
.material-library__list { display: grid; gap: 8px; margin-top: 12px; }
.material-library__list article { display: grid; gap: 4px; padding: 12px 12px; background: rgba(217, 211, 198, .38); border-left: 2px solid var(--gold); }
.material-library__list article span, .material-library__list article small { color: var(--rock); font-size: var(--type-meta); }
.material-library__list article strong { color: var(--ink); font-family: var(--font-prose); font-size: var(--type-small); font-weight: 500; }
.material-diagnosis { display: grid; gap: 8px; }
.material-diagnosis > span, .material-citations__head span { color: var(--red); font-family: var(--font-mono); font-size: var(--type-meta); letter-spacing: .1em; }
.material-diagnosis p { margin: 0; color: var(--ink); font-family: var(--font-prose); font-size: var(--type-subhead); line-height: 1.65; }
.material-diagnosis small { color: var(--rock); font-size: var(--type-meta); line-height: 1.6; }
.material-diagnosis--degraded > span { color: var(--gold); }
.companion-feedback { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: start; gap: 12px; margin: 0 0 24px; padding: 16px 16px; color: var(--paper); background: rgba(13, 23, 26, .94); border: 1px solid rgba(228, 189, 112, .5); border-left: 4px solid var(--gold); box-shadow: 0 10px 22px rgba(13, 23, 26, .12); }
.companion-feedback--degraded { border-left-color: var(--red); }
.companion-feedback__mark { display: grid; place-items: center; width: 38px; height: 38px; color: var(--gold-light); border: 1px solid rgba(228, 189, 112, .58); font-family: var(--font-kai); font-size: var(--type-subhead); }
.companion-feedback__copy { display: grid; gap: 4px; min-width: 0; }
.companion-feedback__copy > span { color: var(--gold-light); font-family: var(--font-mono); font-size: var(--type-meta); letter-spacing: .1em; }
.companion-feedback__copy strong { color: var(--paper); font-family: var(--font-prose); font-size: var(--type-subhead); font-weight: 500; line-height: 1.35; }
.companion-feedback__copy p { margin: 0; color: var(--ink-2); font-size: var(--type-meta); line-height: 1.7; }
.companion-feedback__state { color: var(--ink-3); font-size: var(--type-meta); white-space: nowrap; }
.material-citations { display: grid; gap: 8px; }
.material-citations__head small { color: var(--rock); font-size: var(--type-meta); letter-spacing: 0; text-transform: none; }
.material-citations article { padding: 12px 12px; background: rgba(217, 211, 198, .32); border-left: 2px solid rgba(189, 141, 67, .7); }
.material-citations article > span, .material-citations article small { color: var(--rock); font-size: var(--type-meta); }
.material-citations article p { margin: 8px 0; color: var(--ink); font-size: var(--type-meta); line-height: 1.75; }
.material-guidance { display: grid; gap: 8px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line-dark); }
.material-guidance article { display: grid; gap: 4px; padding: 12px 12px; background: rgba(217, 211, 198, .24); border-left: 2px solid rgba(169, 75, 64, .62); }
.material-guidance article strong { color: var(--ink); font-family: var(--font-prose); font-size: var(--type-small); font-weight: 500; }
.material-guidance article p, .material-guidance article small { margin: 0; color: var(--rock); font-size: var(--type-meta); line-height: 1.65; }
.material-ref { display: inline-flex; margin: 4px 8px 0 0; padding: 4px 8px; color: var(--rock); background: rgba(217, 211, 198, .42); border: 1px solid rgba(13, 23, 26, .14); font-size: var(--type-meta); }
.material-evidence { gap: 12px; }
.material-evidence > p { margin: 0; color: var(--rock); font-size: var(--type-meta); line-height: 1.75; }
.material-evidence__levels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.material-evidence__level { display: flex; align-items: start; gap: 8px; min-height: 55px; padding: 8px 12px; color: var(--ink); background: rgba(217, 211, 198, .42); border: 1px solid transparent; cursor: pointer; }
.material-evidence__level:has(input:checked) { background: var(--paper-light); border-color: var(--gold); }
.material-evidence__level input { margin-top: 4px; accent-color: var(--red); }
.material-evidence__level span { display: grid; gap: 4px; }
.material-evidence__level strong { font-size: var(--type-meta); font-weight: 500; }
.material-evidence__level small { color: var(--rock); font-size: var(--type-meta); line-height: 1.5; }
.material-evidence__field textarea { min-height: 120px; resize: vertical; }
.material-terminal { margin-top: 20px; padding-top: 16px; border-top: 1px dashed rgba(13, 23, 26, .2); }
.material-terminal span { color: var(--red); font-family: var(--font-mono); font-size: var(--type-meta); letter-spacing: .1em; }
.material-terminal p { margin: 8px 0 0; color: var(--rock); font-size: var(--type-meta); line-height: 1.7; }
.study-aside { display: grid; gap: 16px; }
.study-aside__route, .study-aside__tip { padding: 24px; color: var(--paper); background: rgba(13, 23, 26, .78); border: 1px solid var(--rule-ink); }
.mini-mountain { position: relative; height: 220px; margin: 20px 0 12px; overflow: hidden; background: linear-gradient(156deg, transparent 45%, rgba(189, 141, 67, .38) 45.5%, transparent 46.5%), linear-gradient(28deg, transparent 42%, var(--wash-ink) 42.5%, transparent 43.2%); }
.mini-mountain::before, .mini-mountain::after { content: ""; position: absolute; bottom: -20px; width: 0; height: 0; border-left: 150px solid transparent; border-right: 150px solid transparent; border-bottom: 220px solid var(--rule-ink-soft); }
.mini-mountain::before { left: -120px; } .mini-mountain::after { right: -140px; border-bottom-color: rgba(189, 141, 67, .08); }
.mini-mountain__path { position: absolute; left: 20%; bottom: 18%; width: 67%; height: 60%; border-left: 1px solid var(--gold-light); border-top: 1px solid var(--gold-light); border-radius: 70% 0 0 0; transform: rotate(33deg) skewX(-18deg); }
.mini-mountain__dot { position: absolute; width: 9px; height: 9px; background: var(--gold-light); border: 2px solid var(--ink-soft); border-radius: 50%; box-shadow: 0 0 0 5px rgba(228, 189, 112, .11); }
.mini-mountain__dot--one { left: 19%; bottom: 14%; } .mini-mountain__dot--two { left: 54%; bottom: 49%; } .mini-mountain__dot--three { right: 17%; top: 19%; background: var(--rock); }
.study-aside__legend { display: flex; flex-wrap: wrap; gap: 16px; color: var(--ink-3); font-size: var(--type-meta); }
.dot { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: var(--rock); }
.dot--gold { background: var(--gold-light); } .dot--red { background: var(--red); }
.study-aside__tip { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; }
.study-aside__tip-mark { display: grid; place-items: center; width: 38px; height: 38px; color: var(--gold-light); border: 1px solid rgba(228, 189, 112, .48); font-family: var(--font-kai); }
.study-aside__tip p { margin: 0; color: var(--ink-2); font-size: var(--type-meta); line-height: 1.8; }
.study-aside__tip a { grid-column: 2; display: inline-flex; align-items: center; gap: 8px; color: var(--gold-light); font-size: var(--type-meta); }

/* Review and knowledge */
.review-chain { padding: 24px 32px 24px; color: var(--ink); background: rgba(247, 244, 237, .96); border-left: 3px solid var(--red); border-bottom: 1px solid var(--line-dark); }
.review-chain__heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line-dark); }
.review-chain__heading .section-kicker { color: var(--red); }
.review-chain__heading h2 { margin: 8px 0 0; color: var(--ink); font-family: var(--font-kai); font-size: var(--type-title); font-weight: 500; line-height: 1.28; }
.review-chain__heading h2 em { color: var(--red); }
.review-chain__status { flex: none; padding: 0 0 4px; color: var(--red); font-size: var(--type-meta); border-bottom: 1px solid var(--red); }
.review-chain__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.review-chain__step { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-content: start; gap: 12px; min-width: 0; min-height: 122px; padding: 20px 0 16px; border-bottom: 1px solid var(--line-dark); }
.review-chain__number { display: grid; place-items: center; width: 28px; height: 28px; color: var(--rock); font-family: var(--font-mono); font-size: var(--type-meta); border: 1px solid var(--line-dark); border-radius: 50%; }
.review-chain__step.is-complete .review-chain__number { color: var(--paper-light); background: var(--red); border-color: var(--red); }
.review-chain__step > div { display: grid; align-content: start; gap: 4px; min-width: 0; }
.review-chain__label { color: var(--rock); font-size: var(--type-meta); }
.review-chain__step strong { color: var(--ink); font-size: var(--type-meta); font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.review-chain__step p { margin: 0; color: var(--rock); font-size: var(--type-meta); line-height: 1.7; overflow-wrap: anywhere; }
.review-chain__footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; }
.review-chain__footer > span { color: var(--rock); font-size: var(--type-meta); }
.evidence-review { margin-top: 20px; padding: 32px 32px; color: var(--ink); background: var(--paper-light); border: 1px solid var(--rule-ink); }
.evidence-review .section-title { align-items: flex-end; }
.evidence-review .section-title h2 { margin-top: 8px; color: var(--ink); font-family: var(--font-kai); font-size: var(--type-title); font-weight: 500; }
.evidence-review__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.evidence-review__grid > div { display: grid; gap: 8px; min-height: 88px; padding: 16px; background: rgba(217, 211, 198, .45); }
.evidence-review__grid span { color: var(--red); font-size: var(--type-meta); }
.evidence-review__grid strong { color: var(--ink); font-size: var(--type-meta); font-weight: 500; line-height: 1.7; }
.evidence-review__note { display: block; margin-top: 12px; color: var(--rock); font-size: var(--type-meta); line-height: 1.6; }
.evidence-review__next { border: 1px solid rgba(169, 75, 64, .38) !important; }
.memory-loop { position: relative; margin-top: 20px; padding: 32px 32px; color: var(--ink); background: var(--surface-paper); border-left: 3px solid var(--red); box-shadow: var(--shadow-paper); }
.memory-loop .section-title { align-items: flex-end; }
.memory-loop .section-title h2 { margin-top: 8px; color: var(--ink); font-family: var(--font-kai); font-size: var(--type-title); font-weight: 500; }
.memory-loop__status { color: var(--red); font-family: var(--font-mono); font-size: var(--type-meta); letter-spacing: .1em; }
.memory-loop__list { display: grid; gap: 0; margin-top: 20px; border-top: 1px solid var(--line-dark); }
.memory-loop__item { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line-dark); }
.memory-loop__mark { display: grid; place-items: center; width: 34px; height: 34px; color: var(--red); border: 1px solid rgba(169, 75, 64, .4); border-radius: 50%; font-family: var(--font-kai); font-size: var(--type-small); }
.memory-loop__body > span, .memory-loop__body small { color: var(--rock); font-size: var(--type-meta); }
.memory-loop__body h3 { margin: 4px 0 4px; color: var(--ink); font-family: var(--font-kai); font-size: var(--type-subhead); font-weight: 500; }
.memory-loop__body p { max-width: 620px; margin: 0; color: var(--rock); font-size: var(--type-meta); line-height: 1.75; }
.memory-loop__body small { display: block; margin-top: 8px; color: var(--red); }
.memory-loop__actions { display: flex; align-items: center; gap: 12px; padding-top: 4px; }
.memory-loop__actions .button { min-height: 34px; padding: 8px 12px; font-size: var(--type-meta); }
.memory-loop__actions .text-link { padding: 0; color: var(--rock); border: 0; background: transparent; font-size: var(--type-meta); cursor: pointer; }
.memory-loop__actions .text-link:hover { color: var(--red); }
.memory-loop__confirmed { align-self: center; color: var(--red); }
.memory-loop__empty { margin-top: 20px; padding: 24px 0 4px; border-top: 1px solid var(--line-dark); }
.memory-loop__empty span { color: var(--ink); font-family: var(--font-prose); font-size: var(--type-body); }
.memory-loop__empty p { margin: 8px 0 0; color: var(--rock); font-size: var(--type-meta); line-height: 1.7; }
.review-list { margin-top: 74px; color: var(--paper); }
.review-list .section-title h2 { color: var(--paper); }
.review-list .section-title > div > span { color: var(--ink-3); }
.knowledge-rows { border-top: 1px solid var(--rule-ink); }
.knowledge-row { display: grid; grid-template-columns: 46px minmax(180px, 1fr) minmax(140px, .65fr) 24px; align-items: center; gap: 16px; min-height: 88px; padding: 16px 0; border-bottom: 1px solid var(--rule-ink); }
.knowledge-row__gua { display: grid; place-items: center; width: 40px; height: 40px; color: var(--gold-light); border: 1px solid rgba(228, 189, 112, .44); font-family: var(--font-kai); font-size: var(--type-subhead); }
.knowledge-row span:not(.knowledge-row__gua) { color: var(--ink-3); font-size: var(--type-meta); }
.knowledge-row h3 { margin: 4px 0 0; color: var(--paper); font-size: var(--type-small); font-weight: 500; }
.knowledge-row__mastery { display: grid; grid-template-columns: 1fr 40px; align-items: center; gap: 12px; }
.knowledge-row__mastery strong { color: var(--gold-light); font-size: var(--type-meta); font-weight: 500; }
.knowledge-row > a { color: var(--gold-light); }

/* The knowledge chapter is a personal map, not a progress report. */
.knowledge-add-button { margin-top: 20px; min-height: 40px; gap: 8px; padding: 0 12px; font-size: var(--type-meta); }
.knowledge-add-button .icon { width: 14px; height: 14px; }
.knowledge-search { display: flex; align-items: center; gap: 8px; width: min(245px, 100%); padding: 8px 0px; color: var(--ink-3); border-bottom: 1px solid rgba(238, 234, 224, .28); }
.knowledge-search .icon { width: 14px; height: 14px; flex: 0 0 auto; }
.knowledge-search input { min-width: 0; flex: 1; color: var(--paper); background: transparent; border: 0; font-size: var(--type-body); }
.knowledge-search input::placeholder { color: var(--ink-3); }
.knowledge-capture { margin-top: 16px; padding: 20px; color: var(--paper); background: rgba(13, 23, 26, .72); border: 1px solid rgba(228, 189, 112, .34); }
.knowledge-capture__heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.knowledge-capture__heading h3 { margin: 8px 0 0; color: var(--paper); font-family: var(--font-kai); font-size: var(--type-heading); font-weight: 500; }
.knowledge-capture__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin-top: 20px; }
.knowledge-capture__fields label { display: grid; gap: 8px; color: var(--ink-3); font-size: var(--type-meta); }
.knowledge-capture__fields input, .knowledge-capture__fields select, .knowledge-capture__fields textarea { width: 100%; min-width: 0; padding: 12px 12px; color: var(--paper); background: var(--wash-ink-soft); border: 1px solid var(--rule-ink-strong); border-radius: 0; outline: 0; font-size: var(--type-body); }
.knowledge-capture__fields input:focus, .knowledge-capture__fields select:focus, .knowledge-capture__fields textarea:focus { border-color: var(--gold-light); }
.knowledge-capture__fields input::placeholder, .knowledge-capture__fields textarea::placeholder { color: var(--ink-3); }
.knowledge-capture__fields select option { color: var(--ink); background: var(--surface-card); }
.knowledge-capture__fields textarea { resize: vertical; line-height: 1.7; }
.knowledge-capture__note { grid-column: 1 / -1; }
.knowledge-capture__footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 20px; }
.knowledge-capture__footer > span { max-width: 290px; color: var(--ink-3); font-size: var(--type-meta); line-height: 1.6; }
.knowledge-capture__footer .button { flex: 0 0 auto; min-height: 42px; }
/* Assistant, growth, map, profile */
.assistant-layout { align-items: start; }
.page--assistant .assistant-aside { grid-template-columns: 1fr; }
.assistant-dialog { padding: 0; overflow: hidden; }
.assistant-dialog__header { display: flex; align-items: center; gap: 12px; padding: 20px 24px; color: var(--ink); border-bottom: 1px solid var(--line-dark); }
.assistant-dialog__header img { width: 46px; height: 46px; object-fit: cover; border-radius: 50%; filter: saturate(.68); }
.assistant-dialog__seal { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 auto; color: var(--red); border: 1px solid rgba(169, 75, 64, .42); font-family: var(--font-kai); font-size: var(--type-heading); }
.assistant-dialog__header div { display: grid; gap: 4px; }
.assistant-dialog__header div span { color: var(--rock); font-size: var(--type-meta); }
.assistant-dialog__header strong { font-size: var(--type-small); font-weight: 500; }
.assistant-dialog__header .online-dot { margin-left: auto; background: #78a776; }
.assistant-dialog__header .online-dot.is-offline { background: var(--red); box-shadow: 0 0 0 4px rgba(169, 75, 64, .12); }
.assistant-dialog__header .online-dot.is-pending { background: var(--gold-light); }
.assistant-dialog__header small { color: var(--rock); font-size: var(--type-meta); }
.assistant-dialog__body { min-height: 390px; padding: 32px 32px; background: rgba(217, 211, 198, .52); }
.assistant-pending { display: inline-flex; align-items: center; gap: 8px; color: var(--rock); }
.assistant-pending i { width: 8px; height: 8px; border: 1px solid var(--gold); border-top-color: transparent; border-radius: 50%; animation: assistant-spin .8s linear infinite; }
@keyframes assistant-spin { to { transform: rotate(360deg); } }
.companion-thinking { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 8px; align-items: center; max-width: 1180px; margin: 0 auto 16px; padding: 12px 16px; color: var(--ink); background: var(--surface-paper-muted); border-left: 2px solid var(--gold); }
.companion-thinking__spinner { width: 10px; height: 10px; border: 1px solid var(--gold); border-top-color: transparent; border-radius: 50%; animation: assistant-spin .8s linear infinite; }
.companion-thinking strong { display: block; font-size: var(--type-meta); font-weight: 600; }
.companion-thinking div span { display: block; color: var(--rock); font-size: var(--type-meta); line-height: 1.6; }
.assistant-composer input:disabled { opacity: .62; cursor: wait; }
.assistant-composer button:disabled { opacity: .48; cursor: wait; }
.message { display: flex; gap: 12px; align-items: flex-start; }
.message__mark { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; color: var(--red); border: 1px solid rgba(169, 75, 64, .42); font-family: var(--font-kai); }
.message p { margin: 0; padding: 12px 16px; color: var(--ink); background: var(--paper-light); font-family: var(--font-prose); font-size: var(--type-subhead); line-height: 1.5; box-shadow: 0 5px 18px rgba(13, 23, 26, .06); }
.suggestion-list { display: grid; gap: 8px; margin: 32px 0 0 48px; }
.suggestion-list button { padding: 12px 12px; color: var(--rock); text-align: left; background: transparent; border: 1px solid rgba(13, 23, 26, .15); font-size: var(--type-meta); transition: color var(--fast) ease, border-color var(--fast) ease, transform var(--fast) var(--ease); }
.suggestion-list button:hover { color: var(--red); border-color: rgba(169, 75, 64, .46); transform: translateX(4px); }
.assistant-composer { display: flex; gap: 8px; padding: 12px 16px; background: var(--paper-light); border-top: 1px solid var(--line-dark); }
.assistant-composer input { min-width: 0; flex: 1; padding: 0 4px; color: var(--ink); background: transparent; border: 0; font-size: var(--type-body); }
.icon-button--dark { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.icon-button--dark:hover { color: var(--ink); background: var(--gold-light); border-color: var(--gold-light); }
.assistant-aside { display: grid; gap: 16px; }
.assistant-guide-card { position: relative; display: grid; grid-template-rows: minmax(260px, 1fr) auto; min-height: 420px; overflow: hidden; color: var(--paper); background: rgba(13, 23, 26, .78); border: 1px solid rgba(228, 189, 112, .34); box-shadow: var(--shadow-ink); }
.assistant-guide-card::after { content: ""; position: absolute; inset: 14px; border: 1px solid var(--rule-ink); pointer-events: none; }
.assistant-guide-card__art { position: relative; display: grid; place-items: center; min-height: 276px; overflow: hidden; background: var(--paper-light); }
.assistant-guide-card__art::before, .assistant-guide-card__art::after { content: ""; position: absolute; width: 170px; height: 170px; border: 1px solid rgba(228, 189, 112, .18); border-radius: 50%; transform: rotate(24deg); }
.assistant-guide-card__art::after { width: 230px; height: 230px; border-color: var(--rule-ink-soft); transform: rotate(-32deg); }
.assistant-guide-card__art img { position: relative; z-index: 1; width: min(100%, 330px); height: 100%; object-fit: contain; mix-blend-mode: multiply; opacity: .96; filter: saturate(.82) contrast(1.04) drop-shadow(0 12px 18px rgba(13, 23, 26, .18)); transform: translateY(4px); }
.assistant-guide-card__copy { position: relative; z-index: 1; padding: 16px 20px 20px; background: rgba(13, 23, 26, .86); }
.assistant-guide-card__copy strong { display: block; margin: 8px 0 4px; color: var(--paper); font-family: var(--font-prose); font-size: var(--type-heading); font-weight: 500; }
.assistant-guide-card__copy p { max-width: 240px; margin: 0; color: var(--ink-3); font-family: var(--font-prose); font-size: var(--type-meta); line-height: 1.7; }
.assistant-aside__note { padding: 24px; color: var(--paper); background: rgba(30, 58, 66, .88); border: 1px solid var(--rule-ink); }
.assistant-aside__note p { margin: 12px 0 0; color: var(--ink-2); font-family: var(--font-prose); font-size: var(--type-body); line-height: 1.7; }
.growth-hero { display: grid; grid-template-columns: 190px minmax(0, 1fr) 280px; align-items: center; gap: 40px; padding: 40px; color: var(--ink); background: var(--surface-card); box-shadow: var(--shadow-paper); }
.growth-hero__seal { position: relative; width: 172px; height: 172px; display: grid; place-items: center; align-content: center; color: var(--red); border: 1px solid rgba(169, 75, 64, .42); border-radius: 50%; text-align: center; }
.growth-hero__ring { position: absolute; inset: 10px; border: 1px dashed rgba(189, 141, 67, .55); border-radius: 50%; animation: rotate-slow 22s linear infinite reverse; }
.growth-hero__seal span { color: var(--rock); font-size: var(--type-meta); letter-spacing: .18em; }
.growth-hero__seal strong { margin: 4px 0; color: var(--red); font-family: var(--font-kai); font-size: var(--type-hero); font-weight: 500; line-height: .9; }
.growth-hero__seal small { color: var(--rock); font-size: var(--type-meta); }
.growth-hero__copy .section-kicker { color: var(--red); }
.growth-hero__copy h2 { margin: 12px 0; font-family: var(--font-kai); font-size: var(--type-hero); font-weight: 500; line-height: 1.08; }
.growth-hero__copy p { max-width: 460px; margin: 0 0 24px; color: var(--rock); font-size: var(--type-meta); line-height: 1.9; }
.growth-hero__meter { align-self: end; }
.meter-label { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 12px; color: var(--rock); font-size: var(--type-meta); }
.meter-label strong { color: var(--ink); font-size: var(--type-subhead); font-weight: 500; }
.meter-label small { color: var(--rock); font-size: var(--type-meta); font-weight: 400; }
.growth-hero__meter > span { display: block; margin-top: 8px; color: var(--rock); font-size: var(--type-meta); }
.achievements { margin-top: 72px; color: var(--paper); }
.achievements .section-title h2 { color: var(--paper); }
.achievements .section-title > div > span { color: var(--ink-3); }
.achievement-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.achievement { display: grid; grid-template-columns: 48px minmax(0, 1fr) 18px; align-items: start; gap: 16px; min-height: 126px; padding: 20px; border: 1px solid var(--rule-ink); background: rgba(13, 23, 26, .5); }
.achievement.is-unlocked { border-color: rgba(228, 189, 112, .4); background: rgba(30, 58, 66, .67); }
.achievement.is-locked { opacity: .6; }
.achievement__mark { display: grid; place-items: center; width: 45px; height: 45px; color: var(--red); border: 1px solid rgba(169, 75, 64, .4); font-family: var(--font-mono); font-size: var(--type-meta); }
.achievement h3 { margin: 8px 0 4px; font-family: var(--font-kai); font-size: var(--type-subhead); font-weight: 500; }
.achievement p { margin: 0; color: var(--ink-3); font-size: var(--type-meta); line-height: 1.6; }
.achievement > .icon { color: var(--gold-light); }
.summit-tease { position: relative; min-height: 230px; display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 24px; padding: 40px 48px; overflow: hidden; color: var(--paper); background: rgba(30, 58, 66, .76); border: 1px solid rgba(228, 189, 112, .32); }
.summit-tease::before { content: ""; position: absolute; width: 440px; height: 180px; right: -80px; bottom: -105px; border-top: 1px solid rgba(228, 189, 112, .35); border-radius: 50%; transform: rotate(-11deg); }
.summit-tease__cloud { position: absolute; width: 200px; height: 1px; right: 22%; top: 26%; background: var(--wash-ink); transform: rotate(-12deg); }
.summit-tease h2 { margin: 12px 0 8px; font-family: var(--font-kai); font-size: var(--type-display); font-weight: 500; line-height: 1.08; }
.summit-tease__height { position: relative; z-index: 1; color: var(--gold-light); font-family: var(--font-prose); font-size: var(--type-hero); white-space: nowrap; }
.summit-tease__height small { font-size: var(--type-heading); }
.map-stage { position: relative; min-height: 650px; overflow: hidden; color: var(--paper); background-image: linear-gradient(180deg, rgba(13, 23, 26, .16), rgba(13, 23, 26, .66)), var(--map-image); background-position: center; background-size: cover; box-shadow: var(--shadow-ink); }
.map-stage::before, .map-stage::after { content: ""; position: absolute; pointer-events: none; border: 1px solid rgba(228, 189, 112, .32); border-radius: 50%; }
.map-stage::before { width: 75%; height: 55%; left: 14%; top: 22%; transform: rotate(-23deg); }
.map-stage::after { width: 44%; height: 84%; left: 31%; top: 7%; transform: rotate(26deg); opacity: .52; }
.map-stage__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13, 23, 26, .84), transparent 70%); }
.map-stage__title { position: absolute; z-index: 1; left: 43px; top: 40px; }
.map-stage__title span { color: var(--gold-light); font-size: var(--type-meta); letter-spacing: .14em; }
.map-stage__title strong { display: block; margin-top: 12px; font-family: var(--font-kai); font-size: var(--type-hero); font-weight: 500; line-height: 1.04; }
.map-stage__route { position: absolute; inset: 0; z-index: 1; }
.map-stage__path { position: absolute; left: 22%; top: 61%; width: 54%; height: 1px; background: linear-gradient(90deg, var(--gold-light), rgba(228, 189, 112, .1)); transform: rotate(-26deg); transform-origin: left center; }
.map-node { position: absolute; display: grid; grid-template-columns: 24px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 8px; width: 155px; min-height: 74px; padding: 12px 12px; color: var(--ink); text-align: left; background: var(--surface-paper-muted); border: 1px solid transparent; box-shadow: 0 10px 25px rgba(0, 0, 0, .16); transition: transform var(--fast) var(--ease), border-color var(--fast) ease, background var(--fast) ease; }
.map-node:hover { transform: translateY(-4px); border-color: var(--gold); background: var(--paper-light); }
.map-node::before { content: ""; position: absolute; left: -7px; top: 50%; width: 13px; height: 13px; background: var(--gold-light); border: 2px solid var(--ink); border-radius: 50%; transform: translateY(-50%); }
.map-node--locked { color: var(--rock); background: rgba(217, 211, 198, .7); }
.map-node--locked::before { background: var(--rock); }
.map-node--current { border-color: var(--red); }
.map-node--current::before { background: var(--red); }
.map-node > span { grid-row: 1 / 4; color: var(--ink); font-family: var(--font-mono); font-size: var(--type-meta); }
.map-node strong { margin-left: 0; font-family: var(--font-prose); font-size: var(--type-subhead); font-weight: 500; }
.map-node small { margin-top: 4px; color: var(--rock); font-size: var(--type-meta); }
.map-node em { margin-left: 0; color: var(--gold); font-family: var(--font-mono); font-size: var(--type-meta); font-style: normal; }
.map-node--complete { left: 11%; bottom: 19%; } .map-node--current { left: 31%; bottom: 35%; } .map-node--locked:nth-of-type(3) { right: 21%; top: 39%; } .map-node--locked:nth-of-type(4) { right: 6%; top: 21%; }
.map-stage__caption { position: absolute; z-index: 1; left: 43px; bottom: 32px; color: var(--ink-3); font-size: var(--type-meta); line-height: 2; }
.profile-card__top { display: grid; grid-template-columns: 70px minmax(0, 1fr) 36px; align-items: center; gap: 16px; }
.profile-card__seal { display: grid; place-items: center; width: 70px; height: 70px; color: var(--red); border: 1px solid rgba(169, 75, 64, .5); border-radius: 50%; font-family: var(--font-kai); font-size: var(--type-title); }
.profile-card__top h2 { margin: 8px 0 4px; font-family: var(--font-kai); font-size: var(--type-title); font-weight: 500; }
.profile-card__top p { margin: 0; color: var(--rock); font-size: var(--type-meta); }
.profile-card__path { display: flex; align-items: center; gap: 12px; margin: 32px 0; color: var(--rock); font-size: var(--type-meta); }
.profile-card__path i { flex: 1; height: 1px; background: var(--gold); opacity: .55; }
.profile-card__path strong { color: var(--red); font-weight: 500; }
.profile-card__footer { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.profile-card__footer .meta-line { display: grid; gap: 8px; border-bottom: 0; padding: 0; }
.profile-card__footer .meta-line strong { font-size: var(--type-subhead); }
.settings-list { padding: 32px; }
.settings-list .section-title h2 { font-size: var(--type-title); }
.setting-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) 22px; align-items: center; gap: 12px; width: 100%; padding: 16px 0; color: var(--ink); text-align: left; background: transparent; border-bottom: 1px solid var(--line-dark); }
.setting-row > span { color: var(--red); }
.setting-row strong, .setting-row small { display: block; }
.setting-row strong { font-size: var(--type-meta); font-weight: 500; }
.setting-row small { margin-top: 4px; color: var(--rock); font-size: var(--type-meta); line-height: 1.4; }
.setting-row > .icon { color: var(--rock); }
.setting-row--danger strong { color: var(--red); }
.toggle { position: relative; display: inline-block; width: 35px; height: 18px; background: var(--rock-light); border-radius: 9px; }
.toggle b { position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; background: var(--paper-light); border-radius: 50%; transition: transform var(--fast) var(--ease); }
.toggle.is-on { background: var(--gold); } .toggle.is-on b { transform: translateX(17px); }

/* Account settings */
.settings-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr); gap: 20px; }
.settings-account, .settings-service, .settings-panel { padding: 32px; color: var(--ink); background: var(--surface-paper); box-shadow: var(--shadow-paper); }
.settings-account { border-top: 1px solid rgba(169, 75, 64, .46); border-bottom: 3px double rgba(189, 141, 67, .5); }
.settings-account__heading { display: grid; gap: 8px; }
.settings-account__heading h2 { margin: 4px 0 0; font-family: var(--font-kai); font-size: var(--type-title); font-weight: 500; }
.settings-account__heading p { margin: 0; color: var(--rock); font-size: var(--type-meta); overflow-wrap: anywhere; }
.settings-account__status { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin-top: 8px; color: var(--teal); font-size: var(--type-meta); }
.settings-account__status i { width: 7px; height: 7px; background: currentColor; border-radius: 50%; box-shadow: 0 0 0 4px rgba(118, 161, 157, .14); }
.settings-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; margin: 32px 0; padding: 20px 0; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.settings-facts div { display: grid; gap: 4px; min-width: 0; }
.settings-facts dt { color: var(--rock); font-size: var(--type-meta); }
.settings-facts dd { margin: 0; color: var(--ink); font-size: var(--type-meta); overflow-wrap: anywhere; }
.settings-account__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.settings-account__actions .button { min-height: 40px; }
.settings-account__actions .text-link { margin-left: auto; color: var(--red); font-size: var(--type-meta); }
.settings-service { background: rgba(20, 37, 43, .94); color: var(--paper); box-shadow: var(--shadow-ink); }
.settings-service .section-title h2 { color: var(--paper); }
.settings-service .section-title { margin-bottom: 20px; }
.settings-service__pulse { color: var(--gold-light); font-size: var(--type-meta); letter-spacing: .12em; }
.service-status-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 9px; align-items: center; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line-light); }
.service-status-row > span { color: var(--gold-light); }
.service-status-row strong, .service-status-row small { display: block; }
.service-status-row strong { font-size: var(--type-meta); font-weight: 500; }
.service-status-row small { margin-top: 4px; color: var(--ink-3); font-size: var(--type-meta); line-height: 1.5; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rock); }
.status-dot--up { background: var(--teal); box-shadow: 0 0 0 4px rgba(118, 161, 157, .13); }
.status-dot--down { background: var(--red); }
.settings-service__note { margin: 20px 0 0; color: var(--ink-3); font-size: var(--type-meta); line-height: 1.7; }
.settings-panel { grid-column: 1 / -1; }
.settings-panel--feedback { border-left: 1px dashed rgba(189, 141, 67, .5); }
.settings-form { display: grid; gap: 16px; }
.settings-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.settings-form label { display: grid; gap: 8px; color: var(--rock); font-size: var(--type-meta); }
.settings-form label small { display: inline; color: var(--rock); }
.settings-form input, .settings-form select, .settings-form textarea { width: 100%; color: var(--ink); background: var(--paper-dark); border: 1px solid transparent; border-radius: 0; font-size: var(--type-body); }
.settings-form input, .settings-form select { min-height: 44px; padding: 0 12px; }
.settings-form textarea { min-height: 130px; padding: 12px; resize: vertical; line-height: 1.7; }
.settings-form input:focus, .settings-form select:focus, .settings-form textarea:focus { border-color: var(--gold); }
.settings-route-status { min-height: 2.8em; margin: -4px 0 0; color: var(--rock); font-size: var(--type-meta); line-height: 1.6; }
.settings-form__footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 4px; }
.settings-form__footer small { color: var(--rock); font-size: var(--type-meta); line-height: 1.6; }
.settings-form__footer .button { flex: 0 0 auto; }
.settings-panel--preferences .setting-row { padding: 12px 0; }
.setting-row--select { cursor: default; }
.setting-row--select select { width: auto; min-width: 112px; min-height: 32px; padding: 0 8px; color: var(--ink); background: var(--paper-dark); border: 1px solid rgba(13, 23, 26, .12); font-size: var(--type-body); }
.setting-row--select select:focus { border-color: var(--gold); }

/* Auth and system states */
.page--auth { position: relative; isolation: isolate; width: 100%; min-height: calc(100vh - 82px); margin: 0; padding: 0 clamp(24px, 5vw, 72px) 48px; overflow-x: clip; background: #16272c; }
.auth-backdrop { position: absolute; z-index: 0; inset: 0; pointer-events: none; background-image: linear-gradient(90deg, rgba(7, 17, 20, .72), rgba(7, 17, 20, .26) 41%, rgba(7, 17, 20, .05) 63%, rgba(247, 244, 237, .1)), linear-gradient(180deg, rgba(7, 17, 20, .16), transparent 35%, rgba(7, 17, 20, .22)), var(--auth-image); background-position: center; background-size: cover; background-repeat: no-repeat; }
.page--auth::before { content: ""; position: absolute; z-index: 1; top: 8%; right: -9%; width: 68%; height: 84%; opacity: .12; pointer-events: none; background-image: radial-gradient(ellipse at 66% 77%, transparent 0 35%, rgba(55, 73, 75, .17) 35.2% 35.6%, transparent 35.9% 44%, rgba(55, 73, 75, .13) 44.2% 44.6%, transparent 44.9% 53%, rgba(55, 73, 75, .1) 53.2% 53.6%, transparent 53.9% 62%, rgba(55, 73, 75, .07) 62.2% 62.6%, transparent 62.9%), linear-gradient(161deg, transparent 0 37%, rgba(55, 73, 75, .12) 37.2% 37.6%, transparent 38.1%), linear-gradient(174deg, transparent 0 52%, rgba(55, 73, 75, .09) 52.2% 52.6%, transparent 53.1%), radial-gradient(ellipse at 76% 82%, rgba(228, 189, 112, .12), transparent 0 30%); -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 78%, transparent); mask-image: linear-gradient(180deg, transparent, #000 18%, #000 78%, transparent); }
.page--auth > * { position: relative; z-index: 2; }
.page--auth > .auth-backdrop { position: absolute; z-index: 0; }
.app-shell--auth .world-stage, .app-shell--auth .shell-status { display: none; }
.app-shell--auth .app-frame::after { display: none; }
.app-shell--auth .topbar { position: relative; z-index: 4; }
.app-shell--auth main { min-height: calc(100vh - 82px); }
.app-shell--auth .page-view { width: 100%; max-width: none; min-height: calc(100vh - 82px); margin: 0; padding: 0; }
.auth-wrap { min-height: calc(100vh - 82px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 460px); align-items: center; gap: clamp(32px, 8vw, 112px); width: min(1120px, 100%); margin: 0 auto; padding: 24px 0 48px; }
.auth-visual { color: var(--paper); }
.auth-visual__seal { display: grid; place-items: center; width: 68px; height: 68px; margin-bottom: 32px; color: var(--gold-light); border: 1px solid rgba(228, 189, 112, .6); font-family: var(--font-kai); font-size: var(--type-title); }
.auth-visual h1 { margin: 16px 0; font-family: var(--font-kai); font-size: var(--type-hero-md); font-weight: 500; line-height: 1.04; }
.auth-visual h1 em { color: var(--gold-light); }
.auth-visual p { max-width: 330px; color: var(--ink-3); font-size: var(--type-meta); line-height: 1.9; }
.auth-visual__value { max-width: 360px; color: var(--ink-1) !important; font-size: var(--type-small) !important; line-height: 1.75 !important; }
.auth-visual__line { width: 150px; height: 1px; margin: 40px 0 16px; background: var(--gold-light); }
.auth-visual > span:last-child { color: var(--ink-3); font-size: var(--type-meta); letter-spacing: .17em; }
.auth-panel { width: 100%; max-width: 460px; justify-self: end; padding: 40px; }
.panel-heading h2 { margin: 12px 0 4px; color: var(--ink); font-family: var(--font-kai); font-size: var(--type-display); font-weight: 500; }
.panel-heading p { margin: 0 0 24px; color: var(--rock); font-size: var(--type-meta); }
.auth-tabs { display: grid; grid-template-columns: repeat(2, 1fr); margin-bottom: 20px; border-bottom: 1px solid var(--line-dark); }
.auth-tabs button { padding: 12px 0; color: var(--rock); border-bottom: 2px solid transparent; font-size: var(--type-meta); }
.auth-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--gold); }
.auth-form { display: grid; gap: 16px; }
.auth-form label { display: grid; gap: 8px; color: var(--rock); font-size: var(--type-meta); }
.auth-form input { min-height: 46px; padding: 0 12px; color: var(--ink); background: var(--paper-dark); border: 1px solid transparent; font-size: var(--type-body); }
.auth-form input:focus { border-color: var(--gold); }
.auth-form .button { margin-top: 8px; }
.form-footnote { margin: 20px 0 0; color: var(--rock); font-size: var(--type-meta); text-align: center; }
.form-footnote a { color: var(--red); }
.auth-error { margin: 0; padding: 8px 12px; color: #7d2c24; background: #f3e3dc; border-left: 3px solid #a94b40; font-size: var(--type-meta); line-height: 1.6; }
.auth-recovery-link { display: block; min-width: 44px; min-height: 44px; padding: 8px 12px; margin: 12px auto 0; color: var(--red); border-bottom: 1px solid transparent; font-size: var(--type-meta); }
.auth-recovery-link:hover:not(:disabled) { border-bottom-color: currentColor; }
.auth-recovery-link:disabled { color: var(--rock); cursor: not-allowed; opacity: .76; }
.auth-legal-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 16px; color: var(--rock); font-size: var(--type-meta); }
.auth-legal-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
.auth-legal-links a:hover { color: var(--red); }
.settings-account__email-status { color: var(--rock); font-size: var(--type-meta); }
.page--not-found { min-height: 70vh; display: grid; place-items: center; padding: 48px 24px 80px; background: var(--surface-card); }
.not-found-panel { width: min(620px, 100%); padding: clamp(28px, 5vw, 58px); color: var(--ink); text-align: center; background: var(--surface-paper); border-top: 3px solid var(--red); box-shadow: var(--shadow-paper); }
.not-found-panel__mark { margin: 20px 0 8px; color: var(--red); font-family: var(--font-mono); font-size: clamp(52px, 10vw, 96px); letter-spacing: .08em; }
.not-found-panel h1 { margin: 0; font-family: var(--font-display); font-size: clamp(28px, 4vw, 46px); font-weight: 500; }
.not-found-panel p { max-width: 420px; margin: 16px auto 0; color: var(--rock); font-size: var(--type-meta); line-height: 1.8; }
.not-found-panel__actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px; margin-top: 24px; }
.page--legal { padding-bottom: 80px; }
.legal-document { width: min(var(--content-max), 100%); margin: 0; padding: clamp(25px, 5vw, 58px); color: var(--ink); background: var(--surface-paper); border-top: 3px solid var(--red); box-shadow: var(--shadow-paper); }
.legal-document__meta { margin-bottom: 24px; color: var(--red); font-family: var(--font-mono); font-size: var(--type-meta); letter-spacing: .06em; }
.legal-document section { padding: 20px 0; border-top: 1px solid var(--line-dark); }
.legal-document section h2 { margin: 0 0 8px; font-family: var(--font-display); font-size: var(--type-heading); font-weight: 500; }
.legal-document section p { max-width: 680px; margin: 0; color: var(--rock); font-size: var(--type-meta); line-height: 1.9; }
.legal-document__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 24px; }
/* The first home visit points at the real interface, then leaves it usable. */
.interface-tour { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
.interface-tour__scrim { position: absolute; inset: 0; background: rgba(4, 11, 13, .58); pointer-events: auto; }
.interface-tour__spotlight { position: fixed; left: var(--tour-x, 0px); top: var(--tour-y, 0px); z-index: 1; width: var(--tour-w, 0px); height: var(--tour-h, 0px); border: 1px solid var(--gold-light); box-shadow: 0 0 0 9999px rgba(4, 11, 13, .58), 0 0 0 7px rgba(228, 189, 112, .18); pointer-events: none; transition: left var(--medium) var(--ease), top var(--medium) var(--ease), width var(--medium) var(--ease), height var(--medium) var(--ease); }
.interface-tour__card { position: fixed; right: clamp(18px, 5vw, 74px); bottom: 28px; z-index: 2; width: min(430px, calc(100vw - 36px)); padding: 24px 24px 20px; color: var(--ink); background: rgba(247, 244, 237, .98); border-top: 3px solid var(--red); box-shadow: 0 24px 70px rgba(0, 5, 7, .34); pointer-events: auto; }
.interface-tour__topline { display: flex; justify-content: space-between; gap: 12px; color: var(--red); font-family: var(--font-mono); font-size: var(--type-meta); letter-spacing: .08em; }
.interface-tour__topline span:last-child { color: var(--rock); text-align: right; }
.interface-tour__card h2 { margin: 16px 0 8px; color: var(--ink); font-family: var(--font-display); font-size: var(--type-title); font-weight: 400; line-height: 1.2; }
.interface-tour__card p { margin: 0; color: var(--rock); font-family: var(--font-prose); font-size: var(--type-meta); line-height: 1.8; }
.interface-tour__path { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding-top: 12px; color: var(--red); border-top: 1px solid var(--line-dark); font-size: var(--type-meta); }
.interface-tour__path i { color: var(--gold); font-style: normal; }
.interface-tour__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.interface-tour__actions > div { display: flex; gap: 8px; }
.interface-tour__actions .button { min-height: 40px; }
.interface-tour__prev { color: var(--ink); border-color: var(--line-dark); }
.interface-tour__prev:hover { color: var(--ink); background: var(--paper-dark); }
.interface-tour__skip { padding: 8px 0; color: var(--rock); background: transparent; border-bottom: 1px solid transparent; font-size: var(--type-meta); }
.interface-tour__skip:hover { color: var(--red); border-bottom-color: var(--red); }
.state-scene { min-height: 70vh; display: grid; place-items: center; align-content: center; text-align: center; color: var(--paper); }
.state-scene__symbol { position: relative; width: 88px; height: 88px; display: grid; place-items: center; margin: 0 auto 32px; color: var(--gold-light); border: 1px solid rgba(228, 189, 112, .6); border-radius: 50%; }
.state-scene__symbol::before { content: ""; position: absolute; inset: -9px; border: 1px dashed rgba(228, 189, 112, .45); border-radius: 50%; animation: rotate-slow 16s linear infinite; }
.state-scene__symbol .icon { width: 27px; height: 27px; }
.state-scene h1 { max-width: 620px; margin: 16px auto; font-family: var(--font-kai); font-size: var(--type-hero); font-weight: 500; line-height: 1.1; }
.state-scene p { max-width: 420px; margin: 0 auto 24px; color: var(--ink-3); font-size: var(--type-meta); line-height: 1.8; }
.state-scene small { display: block; margin-top: 20px; color: var(--ink-3); font-size: var(--type-meta); }
.state-scene small .demo-state { color: var(--ink-3); border-color: var(--ink-3); }
.app-shell--loading .app-frame::after { display: none; }
.app-shell--loading .app-frame,
.app-shell--loading main,
.app-shell--loading .page-view { min-height: 100vh; min-height: 100svh; }
.app-shell--loading main,
.app-shell--loading .page-view { display: grid; place-items: center; }
.app-shell--loading .page-view { width: 100%; max-width: none; margin: 0; padding: 24px; }
.page--state-loading .state-scene { width: 100%; min-height: 0; }
.page--state-loading .state-scene__symbol { width: 58px; height: 58px; margin-bottom: 8px; }
.page--state-loading .state-scene h1 { font-size: var(--type-heading); line-height: 1.4; }
.page--state-loading .state-scene p { margin-bottom: 0; }
.material-evidence__status { margin: 0; padding: 12px 12px; border-left: 2px solid var(--gold-light); color: var(--paper); background: rgba(228, 189, 112, .08); font-size: var(--type-meta); line-height: 1.7; }

/* Persistent state axis */
.status-axis { position: fixed; right: 25px; bottom: 25px; z-index: 4; width: 232px; padding: 16px 16px; color: var(--ink-2); background: linear-gradient(90deg, rgba(8, 18, 21, .82), rgba(8, 18, 21, .6)); border: 1px solid var(--rule-ink-strong); border-left-color: rgba(228, 189, 112, .4); box-shadow: 0 16px 36px rgba(0, 0, 0, .2); backdrop-filter: blur(10px) saturate(.9); }
/* 12px 下限之后，182px 装不下「行者状态 + 可恢复记录 · 尚未建立」(需要 188px)，会折成两行；加宽并禁止折行。 */
.status-axis__topline, .status-axis__legend { display: flex; justify-content: space-between; gap: 8px; color: var(--ink-3); font-size: var(--type-meta); white-space: nowrap; }
.status-axis__demo { color: var(--gold-light); text-align: right; }
.status-axis__height { display: flex; align-items: baseline; gap: 8px; margin: 12px 0 8px; }
.status-axis__height strong { color: var(--gold-light); font-size: var(--type-heading); font-weight: 500; }
.status-axis__height span { color: var(--ink-3); font-size: var(--type-meta); }
.status-axis__track { position: relative; height: 3px; background: var(--wash-ink); }
.status-axis__fill { display: block; width: var(--progress); height: 100%; background: var(--gold-light); }
.status-axis__pin { position: absolute; top: -3px; left: var(--progress); width: 9px; height: 9px; background: var(--gold-light); border: 2px solid var(--ink); border-radius: 50%; transform: translateX(-50%); }
.status-axis__legend { margin-top: 4px; font-size: var(--type-meta); }
.status-axis__balance { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--rule-ink-soft); }
.status-axis__balance .balance-wheel { width: 37px; height: 37px; }
.status-axis__balance .balance-wheel b { font-size: var(--type-body); }
.balance-copy { display: grid; gap: 0px; }
.balance-copy span, .balance-copy em { color: var(--ink-3); font-size: var(--type-meta); font-style: normal; }
.balance-copy strong { color: var(--paper); font-size: var(--type-meta); font-weight: 500; }
.balance-copy strong small { color: var(--rock-light); font-size: var(--type-meta); font-weight: 400; }
.status-axis__lines { display: grid; gap: 8px; margin-top: 12px; }
.status-axis__lines > span { display: grid; grid-template-columns: 20px 39px 1fr 26px; align-items: center; gap: 4px; color: var(--ink-3); font-size: var(--type-meta); }
.status-axis__lines .gua-mark { color: var(--gold-light); font-size: var(--type-meta); }
.status-axis__lines i { position: relative; display: block; height: 2px; background: var(--wash-ink); }
.status-axis__lines i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--value); background: var(--gold-light); }
.status-axis__lines b { color: var(--gold-light); font-size: var(--type-meta); font-weight: 400; text-align: right; }
.status-axis__next { display: block; margin-top: 12px; padding-top: 8px; color: var(--ink-3); border-top: 1px solid var(--rule-ink-soft); font-size: var(--type-meta); }
.toast-region { position: fixed; left: 50%; bottom: 28px; z-index: 8; max-width: min(440px, calc(100vw - 32px)); padding: 8px 16px; color: var(--paper); background: var(--ink); border: 1px solid rgba(228, 189, 112, .6); font-size: var(--type-meta); transform: translate(-50%, 18px); opacity: 0; pointer-events: none; transition: opacity var(--fast) ease, transform var(--fast) var(--ease); }
.toast-region.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* Text materials: each kind of guidance gets its own reading posture. */
.goal-selection { border-top: 3px solid var(--red); background: rgba(247, 244, 237, .98); }
.study-focus { border-left: 3px solid var(--gold); background: var(--surface-paper); }
.assistant-dialog { border-top: 3px solid var(--gold); background: rgba(247, 244, 237, .98); }
.evidence-review { position: relative; border-left: 3px solid var(--gold); }
.evidence-review__grid { gap: 0; border-top: 1px solid var(--line-dark); border-left: 1px solid var(--line-dark); }
.evidence-review__grid > div { position: relative; min-height: 112px; padding: 20px 20px; background: transparent; border-right: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.evidence-review__grid > div::before { position: absolute; top: 17px; right: 17px; color: rgba(169, 75, 64, .34); font-family: var(--font-mono); font-size: var(--type-meta); letter-spacing: .12em; }
.evidence-review__cell--evidence::before { content: "EVIDENCE"; }
.evidence-review__cell--problem::before { content: "FRICTION"; }
.evidence-review__cell--reason::before { content: "TRACE"; }
.evidence-review__next::before { content: "NEXT"; color: rgba(169, 75, 64, .62); }
.evidence-review__next { background: rgba(169, 75, 64, .045) !important; }
.study-aside__tip { position: relative; grid-template-columns: 40px minmax(0, 1fr); background: rgba(30, 58, 66, .9); border: 0; border-top: 1px solid rgba(228, 189, 112, .5); border-bottom: 1px dashed var(--rule-ink-strong); }
.study-aside__tip::before { content: ""; position: absolute; top: 27px; bottom: 27px; left: 46px; border-left: 1px dashed rgba(228, 189, 112, .42); pointer-events: none; }
.study-aside__tip-mark { position: relative; z-index: 1; background: var(--ink-blue); }
.study-aside__tip-copy { position: relative; z-index: 1; }
.study-aside__tip-copy > span { display: block; margin-bottom: 8px; color: var(--gold-light); font-family: var(--font-mono); font-size: var(--type-meta); letter-spacing: .1em; }
.study-aside__tip p { color: var(--paper); font-family: var(--font-prose); font-size: var(--type-body); line-height: 1.55; }
.study-aside__tip a { margin-top: 12px; }
.assistant-dialog__body { background: rgba(217, 211, 198, .3); }
.message { gap: 12px; }
.message__mark { position: relative; z-index: 2; background: var(--paper-light); box-shadow: 0 0 0 5px rgba(169, 75, 64, .06); }
.message__body { position: relative; min-width: 0; max-width: 540px; flex: 1; padding: 16px 20px 12px; background-color: var(--paper-light); background-image: linear-gradient(to bottom, transparent 25px, rgba(13, 23, 26, .055) 26px); background-size: 100% 26px; border: 1px solid rgba(13, 23, 26, .14); box-shadow: 0 10px 22px rgba(13, 23, 26, .08); }
.message__body::before { content: ""; position: absolute; top: 15px; left: -7px; width: 12px; height: 12px; background: var(--paper-light); border-left: 1px solid rgba(13, 23, 26, .14); border-bottom: 1px solid rgba(13, 23, 26, .14); transform: rotate(45deg); }
.message__body::after { content: ""; position: absolute; right: 12px; bottom: -5px; width: 28px; height: 9px; border-bottom: 1px solid rgba(169, 75, 64, .42); transform: rotate(-3deg); }
.message__eyebrow, .message__footer { display: block; color: var(--red); font-family: var(--font-mono); font-size: var(--type-meta); letter-spacing: .1em; }
.message__body p { padding: 0; background: transparent; box-shadow: none; font-size: var(--type-subhead); line-height: 1.55; }
.message__footer { margin-top: 12px; color: var(--rock); letter-spacing: .06em; }
.suggestion-list button { border: 0; border-bottom: 1px solid rgba(13, 23, 26, .18); border-left: 2px solid transparent; }
.suggestion-list button:hover { border-left-color: var(--red); }

@keyframes page-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mist-drift { from { transform: translate3d(-3%, 0, 0) rotate(-4deg); } to { transform: translate3d(5%, -13px, 0) rotate(4deg); } }
@keyframes rotate-slow { to { transform: rotate(360deg); } }
@keyframes progress-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 1180px) {
  .status-axis { right: 18px; bottom: 18px; }
  .page-view { padding-right: 230px; }
  .page--home { margin-left: -40px; margin-right: -230px; }
  .home-hero { padding-left: 56px; padding-right: 56px; }
  .home-overview__lead, .home-route, .quote-panel, .home-next { padding-left: 56px; padding-right: 56px; }
  .growth-hero { grid-template-columns: 180px minmax(0, 1fr); gap: 32px; }
  .growth-hero__meter { grid-column: 2; }
}

@media (max-width: 980px) {
  .app-frame { margin-left: 0; }
  .app-frame::after { inset: 0; }
  .world-stage__coordinates { left: 20px; bottom: 16px; }
  .mobile-nav-bar { position: fixed; z-index: 5; top: 0; left: 0; right: 0; height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; color: var(--paper); background: rgba(8, 18, 21, .84); border-bottom: 1px solid var(--rule-ink); }
  .mobile-nav-bar__home { color: var(--gold-light); }
  .mobile-nav-bar__home .gua-mark { font-size: var(--type-heading); }
  .mobile-nav-bar__label { margin-left: auto; margin-right: 16px; color: var(--ink-3); font-size: var(--type-meta); letter-spacing: .14em; }
  .mobile-nav-trigger { display: grid; place-items: center; width: 37px; height: 37px; color: var(--gold-light); background: transparent; border: 1px solid rgba(228, 189, 112, .45); }
  .mobile-nav-panel { position: fixed; z-index: 6; inset: 0; display: block; padding: 20px 20px 24px; color: var(--paper); background: rgba(13, 23, 26, .98); }
  .mobile-nav-panel[hidden] { display: none; }
  .mobile-nav-panel__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 20px; border-bottom: 1px solid var(--rule-ink); color: var(--gold-light); font-family: var(--font-prose); font-size: var(--type-heading); }
  .mobile-nav-panel nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 24px; }
  .topbar { height: 64px; padding: 0 20px 0 84px; }
  .topbar__eyebrow { display: none; }
  .topbar__title { font-size: var(--type-subhead); }
  .topbar__right { gap: 12px; }
  .connection, .topbar__profile > span:last-of-type, .topbar__profile .icon { display: none; }
  main { min-height: calc(100vh - 64px); }
  .page-view { min-height: calc(100vh - 64px); padding: 70px var(--gutter) 90px; }
  .page--home { margin-top: -64px; margin-left: -24px; margin-right: -24px; }
  .status-axis { display: none; }
  .home-hero { min-height: 760px; padding-top: 145px; }
  .home-hero__image { width: 60%; height: 70%; opacity: .55; }
  .goals-layout, .study-layout, .assistant-layout, .profile-layout { grid-template-columns: 1fr; }
  .orientation-panel, .study-aside, .assistant-aside { max-width: none; }
  .orientation-panel { min-height: 380px; }
  .study-aside, .assistant-aside { grid-template-columns: 1fr 1fr; }
  .profile-layout { gap: 16px; }
  .app-shell--auth main { min-height: calc(100vh - 64px); }
  .app-shell--auth .page-view { min-height: calc(100vh - 64px); padding: 0; }
  .page--auth { margin: 0; padding: 0 24px 40px; }
  .auth-wrap { min-height: calc(100vh - 64px); grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: clamp(24px, 5vw, 64px); }
}

@media (max-width: 700px) {
  .page--auth { margin: 0; padding: 0 16px 32px; }
  .app-shell--auth .topbar { padding: 0 20px; }
  .topbar__auth-note { display: none; }
  .page--auth .auth-wrap { min-height: auto; gap: 24px; padding-top: 32px; }
  .page--auth .auth-visual { padding: 0 8px; }
  .page--auth .auth-visual h1 { font-size: var(--type-display); }
  .page--auth .auth-panel { padding: 24px 20px; }
  .page--auth .auth-backdrop { background-position: 76% center; }
  .page--auth::before { right: -34%; width: 118%; height: 58%; opacity: .08; }
  .page--auth .auth-wrap::after { display: none; }
  .interface-tour__card { right: 12px; bottom: 12px; width: calc(100vw - 24px); padding: 20px 16px 16px; }
  .interface-tour__card h2 { font-size: var(--type-heading); }
  .interface-tour__card p { font-size: var(--type-meta); }
  .interface-tour__path { flex-wrap: wrap; }
  .interface-tour__actions { align-items: stretch; flex-direction: column; }
  .interface-tour__actions > div { justify-content: flex-end; }
  .world-stage__image { background-position: 63% center; }
  .world-stage__contours, .world-stage__meridian { opacity: .12; }
  .mist-layer--far { width: 130vw; right: -50vw; }
  .mist-layer--middle { width: 120vw; left: -35vw; }
  .star-orbit { width: 100vw; height: 100vw; right: -50vw; top: -26vw; }
  .world-stage__coordinates { display: none; }
  .page-view { padding: 48px var(--gutter) 70px; }
  .page--home { margin: -64px -16px -70px; }
  .page-intro { width: 100%; max-width: 100%; margin-bottom: 40px; }
  .page-intro__gua { top: -14px; right: 0; font-size: var(--type-hero-md); }
  .page-intro h1 { max-width: 100%; font-size: var(--type-display); }
  .page-intro p { max-width: 100%; font-size: var(--type-meta); }
  .home-hero { min-height: 680px; display: block; padding: 136px 24px 40px; }
  .home-hero::before { background: linear-gradient(90deg, rgba(7, 17, 20, .78), rgba(7, 17, 20, .28)); }
  .home-hero h1 { font-size: var(--type-hero-md); }
  .home-hero__copy p { max-width: 255px; font-size: var(--type-meta); }
  .home-hero__summit { position: absolute; right: 25px; top: 100px; margin: 0; transform: scale(.72); transform-origin: top right; }
  .home-hero__image { left: 0; right: auto; bottom: 0; width: 100%; height: 51%; opacity: .42; clip-path: none; background-position: 55% center; }
  .home-hero__image span { right: 25px; bottom: 19px; }
  .home-overview, .home-bottom { grid-template-columns: 1fr; }
  .home-overview__lead, .home-route, .quote-panel, .home-next { padding: 48px 24px; }
  .home-overview__stats { padding: 40px 24px; border-top: 1px solid var(--line-dark); border-left: 0; }
  .home-overview h2 { font-size: var(--type-display); }
  .home-route .section-title { align-items: flex-start; flex-direction: column; }
  .task-row { grid-template-columns: 30px 38px minmax(0, 1fr); gap: 12px; min-height: 102px; }
  .task-row__step { font-size: var(--type-meta); }
  .task-row__step span { left: 14px; top: 35px; height: 68px; }
  .task-row__gua { width: 35px; height: 35px; font-size: var(--type-body); }
  .task-row h3 { font-size: var(--type-meta); line-height: 1.45; }
  .task-row__state { grid-column: 3; justify-content: flex-start; margin-top: -4px; }
  .quote-panel { border-right: 0; border-bottom: 1px solid var(--line-dark); }
  .quote-panel p { font-size: var(--type-heading); }
  .goals-layout, .study-layout, .assistant-layout, .profile-layout { gap: 16px; }
  .goal-selection, .study-focus, .assistant-dialog, .profile-card, .settings-list { padding: 24px 20px; }
  .section-title { align-items: flex-start; flex-direction: column; }
  .section-title h2 { font-size: var(--type-title); }
  .goal-option { grid-template-columns: 43px minmax(0, 1fr) 18px; gap: 12px; padding: 12px; }
  .goal-option__icon { width: 38px; height: 38px; }
  .goal-option strong { font-size: var(--type-meta); }
  .goal-option small { font-size: var(--type-meta); }
  .goal-foot { align-items: flex-start; flex-direction: column; gap: 12px; }
  .orientation-panel { min-height: 330px; padding: 24px; }
  .orientation-panel h3 { font-size: var(--type-heading); }
  .plan-head { grid-template-columns: 1fr; gap: 12px; }
  .plan-head__progress, .plan-head__balance { min-height: auto; padding: 20px 20px; }
  .plan-head__balance { min-height: 100px; }
  .plan-route { grid-template-columns: 1fr; gap: 20px; }
  .plan-route__label { padding-top: 0; }
  .plan-route__list { padding-left: 0; }
  .study-focus__title { grid-template-columns: 45px minmax(0, 1fr); gap: 12px; margin: 32px 0 32px; }
  .study-focus__gua { width: 43px; height: 43px; font-size: var(--type-heading); }
  .study-focus__title h2 { font-size: var(--type-title); }
  .study-focus__title p { grid-column: 2; font-size: var(--type-meta); }
  .study-action__heading h3 { font-size: var(--type-subhead); }
  .study-action__controls { align-items: stretch; flex-direction: column; }
  .study-action__controls .button, .study-action__controls label { width: 100%; }
  .study-action__controls select { width: 100%; }
  .study-action__controls .text-link { align-self: flex-start; min-height: 0; margin: 0px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line-dark); border-left: 0; }
  .material-intake__grid, .material-evidence__levels { grid-template-columns: 1fr; }
  .material-photo { grid-template-columns: 1fr; gap: 8px; }
  .material-photo input { max-width: 100%; }
  .material-intake__footer { align-items: stretch; flex-direction: column; }
  .material-intake__footer .button, .material-evidence > .button { width: 100%; }
  .companion-feedback { grid-template-columns: 38px minmax(0, 1fr); padding: 12px; }
  .companion-feedback__state { grid-column: 2; }
  .evidence-submit { margin-top: 40px; padding-top: 24px; }
  .evidence-submit .section-title h2, .evidence-review .section-title h2, .memory-loop .section-title h2 { font-size: var(--type-heading); }
  .evidence-levels, .evidence-review__grid { grid-template-columns: 1fr; }
  .evidence-level { min-height: 58px; }
  .study-knowledge-capture { align-items: stretch; flex-direction: column; gap: 12px; margin-top: 20px; padding-top: 16px; }
  .knowledge-capture-link { width: 100%; }
  .evidence-review, .memory-loop { padding: 24px 20px; }
  .memory-loop__item { grid-template-columns: 34px minmax(0, 1fr); gap: 8px; }
  .memory-loop__actions, .memory-loop__confirmed { grid-column: 2; padding-top: 4px; }
  .study-aside, .assistant-aside { grid-template-columns: 1fr; }
  .review-chain { padding: 24px 20px 20px; }
  .review-chain__heading { align-items: flex-start; gap: 12px; }
  .review-chain__heading h2 { font-size: var(--type-heading); }
  .review-chain__steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .review-chain__step { min-height: 0; padding: 12px 0; }
  .review-chain__footer { align-items: flex-start; flex-direction: column; gap: 12px; }
  .knowledge-row { grid-template-columns: 35px minmax(0, 1fr) 22px; gap: 8px; }
  .knowledge-row__mastery { grid-column: 2 / 4; }
  .knowledge-row > a { grid-column: 3; grid-row: 1; }
  .knowledge-search { width: 100%; }
  .knowledge-add-button { width: 100%; }
  .knowledge-capture { padding: 20px; }
  .knowledge-capture__heading h3 { font-size: var(--type-subhead); }
  .knowledge-capture__fields { grid-template-columns: 1fr; }
  .knowledge-capture__note { grid-column: auto; }
  .knowledge-capture__footer { align-items: stretch; flex-direction: column; gap: 12px; }
  .knowledge-capture__footer .button { width: 100%; }
  .assistant-dialog__header { flex-wrap: wrap; padding: 16px; }
  .assistant-dialog__header small { width: 100%; margin-left: 56px; }
  .assistant-dialog__body { padding: 24px 16px; }
  .message p { font-size: var(--type-body); }
  .suggestion-list { margin-left: 0; }
  .assistant-guide-card { min-height: 390px; }
  .assistant-guide-card__art { min-height: 245px; }
  .growth-hero { grid-template-columns: 1fr; gap: 32px; padding: 24px 20px; }
  .growth-hero__seal { justify-self: center; width: 163px; height: 163px; }
  .growth-hero__meter { grid-column: auto; }
  .growth-hero__copy h2 { font-size: var(--type-display); }
  .achievement-grid { grid-template-columns: 1fr; }
  .achievement { min-height: 128px; }
  .summit-tease { align-items: flex-start; flex-direction: column; padding: 32px 24px; }
  .summit-tease__height { align-self: flex-end; margin-top: -20px; }
  .map-stage { min-height: 560px; margin: 0 0px; }
  .map-stage__title { left: 23px; top: 27px; }
  .map-stage__title strong { font-size: var(--type-display); }
  .map-stage__caption { left: 23px; bottom: 24px; }
  .map-node { width: 125px; }
  .map-node strong { font-size: var(--type-body); }
  .map-node small, .map-node em { font-size: var(--type-meta); }
  .map-node--complete { left: 4%; bottom: 21%; } .map-node--current { left: 29%; bottom: 40%; } .map-node--locked:nth-of-type(3) { right: 20%; top: 37%; } .map-node--locked:nth-of-type(4) { right: 2%; top: 22%; }
  .profile-card__top { grid-template-columns: 56px minmax(0, 1fr) 30px; gap: 12px; }
  .profile-card__seal { width: 54px; height: 54px; font-size: var(--type-heading); }
  .profile-card__top h2 { font-size: var(--type-title); }
  .profile-card__footer { gap: 8px; }
  .profile-card__footer .meta-line strong { font-size: var(--type-body); }
  .settings-list { padding: 24px 20px; }
  .settings-layout { grid-template-columns: 1fr; gap: 16px; }
  .settings-account, .settings-service, .settings-panel { padding: 24px 20px; }
  .settings-panel { grid-column: auto; }
  .settings-account__heading h2 { font-size: var(--type-title); }
  .settings-facts { gap: 16px; }
  .settings-account__actions { align-items: stretch; }
  .settings-account__actions .text-link { width: 100%; margin-left: 0; }
  .settings-form__grid { grid-template-columns: 1fr; gap: 12px; }
  .settings-form__footer { align-items: stretch; flex-direction: column; }
  .settings-form__footer .button { width: 100%; justify-content: center; }
  .setting-row--select { grid-template-columns: 28px minmax(0, 1fr); }
  .setting-row--select select { grid-column: 2; width: 100%; }
  .auth-wrap { min-height: auto; grid-template-columns: 1fr; gap: 24px; padding: 32px 0 0; }
  .auth-visual__seal { margin-bottom: 24px; }
  .auth-visual h1 { font-size: var(--type-display); }
  .auth-visual__line { margin: 32px 0 12px; }
  .auth-panel { padding: 24px 20px; }
  .state-scene { min-height: 65vh; }
  .state-scene h1 { font-size: var(--type-display); }
  .bagua-field, .bagua-field__paper { min-width: 0; }
  .bagua-field__paper { width: min(316px, calc(100vw - 74px)) !important; min-height: 360px; margin-left: 0; }
  .feature-directory .bagua-field__paper { width: 100% !important; min-height: 560px; }
  .feature-directory__note h2 { font-size: var(--type-title); }
  .bagua-field__center { width: 96px; height: 96px; }
  .bagua-field__center span { font-size: var(--type-title); }
  .bagua-node { grid-template-columns: 22px minmax(0, 1fr); width: 82px; padding: 4px 4px; gap: 4px; }
  .bagua-node__symbol { width: 21px; height: 24px; font-size: var(--type-small); }
  .bagua-node__copy b { font-size: var(--type-meta); }
  .bagua-node__copy strong { font-size: var(--type-meta); }
  .bagua-node__copy small { display: none; }
  .bagua-node--northeast, .bagua-node--southeast { right: 24px; }
  .bagua-node--northwest, .bagua-node--southwest { left: 24px; }
  .bagua-node--east { right: 24px; }
  .bagua-node--west { left: 24px; }
  .bagua-node--northeast, .bagua-node--northwest { top: 19%; }
  .bagua-node--east, .bagua-node--west { top: 50%; }
  .bagua-node--southeast, .bagua-node--southwest { bottom: 17%; }
  .page--review .page-intro, .page--review .page-intro h1 { max-width: min(320px, 100%); }
}

@media (max-width: 700px) {
  .quote-panel::before { inset: 21px 18px; }
  .quote-panel::after { top: 21px; bottom: 21px; left: 18px; }
  .quote-panel blockquote { font-size: var(--type-heading); }
  .home-next__stamp { top: 22px; right: 19px; }
  .evidence-review__grid > div { min-height: 96px; padding: 16px 16px; }
  .evidence-review__grid > div::before { top: 14px; right: 14px; }
  .message__body { padding: 12px 16px 12px; }
  .message__body p { font-size: var(--type-body); }
  .study-aside__tip::before { left: 39px; }
}

@media (max-width: 700px) {
  .page--auth .auth-wrap { gap: 16px; padding-top: 12px; }
  .page--auth .auth-visual { padding: 0 8px; }
  .page--auth .auth-visual__seal { width: 52px; height: 52px; margin-bottom: 12px; font-size: var(--type-heading); }
  .page--auth .auth-visual h1 { margin: 8px 0; font-size: var(--type-display); }
  .page--auth .auth-visual__value { max-width: 320px; font-size: var(--type-meta) !important; line-height: 1.55 !important; }
  .page--auth .auth-visual__line { margin: 16px 0 8px; }
  .page--auth .auth-visual > span:last-child { font-size: var(--type-meta); }
  .page--auth .auth-panel { padding: 20px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 1ms !important; }
  .reveal-item { opacity: 1; transform: none; }
}

/* Module system v2: the world stays shared, while each kind of content gets its own posture.
   字体令牌已集中到 tokens.css（唯一源）——此前它们定义在这里，替换脚本会把
   --font-interface 的定义替换成 var(--font-interface) 造成自引用循环，一并搬走以杜绝复发。 */

body, button, input, textarea, select { font-family: var(--font-interface); }
.page-intro h1,
.home-overview h2,
.home-next h2,
.task-row h3,
.plan-route__label strong,
.study-focus__title h2,
.evidence-submit .section-title h2,
.evidence-review .section-title h2,
.knowledge-row h3,
.assistant-guide-card__copy strong,
.growth-hero__copy h2,
.achievement h3,
.summit-tease h2,
.map-node strong,
.profile-card__top h2,
.panel-heading h2,
.state-scene h1 { font-family: var(--font-display); font-weight: 400; }
.page h1,
.page h2,
.page h3,
.page blockquote { font-family: var(--font-display); font-weight: 400; }

.section-title h2,
.study-focus__title p,
.assistant-guide-card__copy p,
.assistant-aside__note p,
.growth-hero__copy p,
.summit-tease p,
.map-stage__caption { font-family: var(--font-prose); }

.section-title h2 { font-size: var(--type-display); line-height: 1.15; }
.section-title { position: relative; }
.section-title::before { content: ""; position: absolute; top: 4px; bottom: 3px; left: -16px; width: 1px; background: var(--red); opacity: .7; }

/* The home overview is a spread: a red-edged reading sheet beside a dark ledger. */
.home-overview { background: transparent; }
.home-overview__lead { position: relative; overflow: hidden; background: rgba(247, 244, 237, .98); border-top: 1px solid rgba(169, 75, 64, .55); }
.home-overview__lead::before { content: "今天"; position: absolute; top: 39px; right: 28px; color: rgba(169, 75, 64, .4); font-family: var(--font-display); font-size: var(--type-subhead); writing-mode: vertical-rl; }
.home-overview__lead::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: var(--red); opacity: .75; }
.home-overview__stats { color: var(--paper); background: rgba(13, 23, 26, .93); border-left: 1px solid rgba(228, 189, 112, .55); }
.home-overview__stats .meta-line { border-color: var(--ink-3); }
.home-overview__stats .meta-line span { color: var(--ink-3); }
.home-overview__stats .meta-line strong { color: var(--paper); font-family: var(--font-display); font-size: var(--type-heading); }
.home-overview__stats .home-overview__seal span { color: var(--ink-3); }

/* Large work surfaces stop behaving like identical cards. */
.goal-selection,
.study-focus,
.assistant-dialog,
.profile-card,
.settings-list,
.plan-head__progress,
.plan-head__balance,
.evidence-review,
.growth-hero { box-shadow: none; }
.goal-selection { position: relative; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }
.goal-selection::after { content: "定向"; position: absolute; top: 25px; right: 27px; color: rgba(169, 75, 64, .42); font-family: var(--font-display); font-size: var(--type-subhead); writing-mode: vertical-rl; pointer-events: none; }
.study-focus { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); }
.assistant-dialog { border-top-width: 1px; border-bottom: 1px solid rgba(13, 23, 26, .2); }
.profile-card { border-top: 1px solid rgba(169, 75, 64, .46); border-bottom: 3px double rgba(189, 141, 67, .5); }
.settings-list { border-left: 1px dashed rgba(189, 141, 67, .5); border-bottom: 1px solid rgba(13, 23, 26, .18); }
.plan-head__progress { position: relative; background: rgba(247, 244, 237, .96); border-top: 1px solid rgba(169, 75, 64, .52); border-bottom: 1px solid var(--line-dark); }
.plan-head__progress::after { content: "山脚 / 山脊 / 主峰"; position: absolute; right: 29px; top: 28px; color: rgba(169, 75, 64, .38); font-family: var(--font-mono); font-size: var(--type-meta); writing-mode: vertical-rl; }
.plan-head__balance { border-left: 3px solid var(--gold-light); }
.growth-hero { position: relative; background: rgba(247, 244, 237, .97); border-top: 1px solid rgba(189, 141, 67, .62); border-bottom: 1px solid var(--line-dark); }

/* Small modules become lines, tickets, and labels instead of a repeated gray rectangle. */
.goal-option,
.evidence-level { background: transparent; border: 0; border-bottom: 1px solid var(--line-dark); border-left: 2px solid transparent; }
.goal-option:hover,
.goal-option.is-selected,
.evidence-level:hover,
.evidence-level.is-selected { background: rgba(247, 244, 237, .72); border-color: transparent transparent var(--line-dark) var(--red); transform: translateX(5px); }
.goal-option__icon,
.evidence-level__number { border-radius: 50%; font-family: var(--font-display); }
.evidence-level { min-height: 70px; }
.achievement { border: 0; border-top: 1px solid var(--rule-ink-strong); background: transparent; }
.achievement.is-unlocked { border-color: rgba(228, 189, 112, .58); background: rgba(30, 58, 66, .42); }
.setting-row { padding-top: 20px; padding-bottom: 20px; }
.task-row h3 { font-size: var(--type-subhead); }
.map-node { clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%); border-left: 3px solid var(--gold); box-shadow: 0 8px 16px rgba(0, 0, 0, .12); }
.map-node--current { border-left-color: var(--red); }
.map-node--locked { border-left-color: var(--rock); }
.status-axis { border: 0; border-left: 1px solid rgba(228, 189, 112, .65); border-bottom: 1px solid var(--rule-ink); box-shadow: none; }
.meta-line strong,
.plan-head__progress > strong,
.meter-label strong { font-family: var(--font-display); font-weight: 400; }

/* The first-visit path is a guided sequence, not a separate product surface. */
.page--onboarding { position: relative; width: 100%; max-width: none; min-height: calc(100vh - 202px); margin: 0 auto; padding: 32px clamp(19px, 4vw, 64px) 64px; isolation: isolate; background-color: #e8dfce; background-image: linear-gradient(90deg, rgba(245, 239, 225, .18), rgba(245, 239, 225, .04) 30%, rgba(245, 239, 225, .08) 70%, rgba(245, 239, 225, .18)), var(--onboarding-image); background-position: center; background-size: cover; background-repeat: no-repeat; }
.page--onboarding::after { content: ""; position: absolute; z-index: 0; inset: 0; background: linear-gradient(180deg, rgba(247, 244, 237, .16), rgba(247, 244, 237, .02) 32%, rgba(13, 23, 26, .08)); pointer-events: none; }
.page--onboarding > * { position: relative; z-index: 1; }
.world-stage--onboarding .world-stage__image { background-position: center; filter: saturate(.84) contrast(1.02); opacity: .96; }
.world-stage--onboarding .world-stage__wash { background: linear-gradient(180deg, rgba(247, 244, 237, .12), rgba(247, 244, 237, .03) 48%, rgba(13, 23, 26, .18)); }
.world-stage--onboarding .world-stage__contours,
.world-stage--onboarding .world-stage__meridian,
.world-stage--onboarding .mist-layer,
.world-stage--onboarding .star-orbit,
.world-stage--onboarding .world-stage__sun,
.world-stage--onboarding .world-stage__seal,
.world-stage--onboarding .world-stage__coordinates { display: none; }
.app-shell--onboarding { background: #e8dfce; }
.app-shell--onboarding .app-frame { background-image: linear-gradient(180deg, rgba(247, 244, 237, .16), rgba(247, 244, 237, .03) 48%, rgba(13, 23, 26, .08)), var(--onboarding-image); background-position: center; background-size: cover; background-attachment: fixed; }
.app-shell--onboarding .app-frame::after { display: none; }
.app-shell--onboarding .topbar { color: var(--ink); }
.app-shell--onboarding .topbar__chapter-mark,
.app-shell--onboarding .topbar__eyebrow,
.app-shell--onboarding .topbar__title,
.app-shell--onboarding .topbar__icon,
.app-shell--onboarding .topbar__profile { color: var(--ink); }
.app-shell--onboarding .topbar__chapter-mark { border-color: rgba(13, 23, 26, .35); }
.app-shell--onboarding .topbar__icon,
.app-shell--onboarding .topbar__profile { border-color: rgba(13, 23, 26, .2); }
.app-shell--onboarding .connection { color: rgba(13, 23, 26, .58); }
.app-shell--onboarding .connection i { background: var(--red); }
.app-shell--onboarding .topbar { padding-left: 32px; }
.app-shell--onboarding .topbar__onboarding-exit { color: rgba(13, 23, 26, .62); }
.app-shell--onboarding .topbar__onboarding-exit:hover { color: var(--red); }
.app-shell--onboarding .app-frame { position: relative; z-index: 1; }
.app-shell--onboarding .page-view { padding-top: 40px; }
.onboarding-head__aside { display: grid; justify-items: end; align-content: end; gap: 8px; }
.onboarding-nav-note { color: rgba(13, 23, 26, .55); font-family: var(--font-prose); font-size: var(--type-meta); }
.onboarding-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 32px; color: var(--ink); }
.onboarding-head h1 { margin: 12px 0 0; color: var(--ink); font-size: clamp(38px, 5vw, 64px); line-height: 1.08; text-shadow: 0 2px 18px rgba(247, 244, 237, .62); }
.onboarding-head h1 em { color: var(--red); }
.onboarding-head .page-intro__kicker { color: var(--red); }
.onboarding-head .demo-state { color: var(--red); border-color: rgba(169, 75, 64, .48); }
.onboarding-panel { padding: 40px; color: var(--ink); background: rgba(247, 244, 237, .98); border-top: 2px solid var(--red); }
.onboarding-panel__heading { max-width: 680px; margin-bottom: 32px; }
.onboarding-panel__heading h2 { margin: 12px 0 8px; font-size: var(--type-display); line-height: 1.17; }
.onboarding-panel__heading h2 em { color: var(--red); }
.onboarding-panel__heading p { max-width: 550px; margin: 0; color: var(--rock); font-family: var(--font-prose); font-size: var(--type-meta); line-height: 1.8; }
.onboarding-form { display: grid; gap: 24px; }
.onboarding-form label { display: grid; gap: 8px; color: var(--rock); font-size: var(--type-meta); }
.onboarding-form label small { display: inline; color: rgba(87, 95, 92, .62); font-size: var(--type-meta); }
.onboarding-form input, .onboarding-form select { width: 100%; min-height: 45px; padding: 0 12px; color: var(--ink); background: var(--paper-dark); border: 1px solid transparent; font-size: var(--type-body); }
.onboarding-form input:focus, .onboarding-form select:focus { border-color: var(--gold); }
.onboarding-form__label { color: var(--rock); font-size: var(--type-meta); }
.onboarding-form__footer { display: flex; justify-content: space-between; align-items: end; gap: 20px; padding-top: 4px; }
.onboarding-form__footer label { width: 170px; }

@media (max-width: 700px) {
  .section-title::before { left: -10px; }
  .section-title h2 { font-size: var(--type-title); }
  .home-overview__lead::before,
  .plan-head__progress::after,
  .goal-selection::after,
  .home-overview__stats { border-top: 1px solid rgba(228, 189, 112, .45); border-left: 0; }
  .goal-selection,
  .study-focus,
  .task-row h3 { font-size: var(--type-small); }
  .map-node { clip-path: none; }
}

@media (max-width: 700px) {
  .app-shell--onboarding .topbar { padding-left: 20px; }
  .onboarding-head__aside { justify-items: start; align-content: start; }
  .onboarding-head { align-items: flex-start; flex-direction: column; gap: 12px; margin-bottom: 24px; }
  .onboarding-head h1 { font-size: var(--type-display); }
  .onboarding-panel { padding: 24px 20px; }
  .onboarding-panel__heading h2 { font-size: var(--type-title); }
  .onboarding-form__footer { align-items: stretch; flex-direction: column; }
  .onboarding-form__footer label { width: 100%; }
  .onboarding-form__footer .button { width: 100%; justify-content: center; }
}

/* A knowledge base grows through layers: network for shape, directory for retrieval, inspector for meaning. */
.knowledge-workbench { margin-top: 24px; color: var(--paper); border-top: 1px solid rgba(228, 189, 112, .58); }
.knowledge-empty { display: grid; justify-items: start; gap: 12px; max-width: 680px; margin-top: 24px; padding: 32px; color: var(--ink); background: rgba(247, 244, 237, .96); border-top: 2px solid var(--red); }
.knowledge-empty h2 { margin: 0; font-family: var(--font-display); font-size: var(--type-title); font-weight: 400; }
.knowledge-empty p { max-width: 470px; margin: 0; color: var(--rock); font-family: var(--font-prose); font-size: var(--type-meta); line-height: 1.8; }
.knowledge-workbench__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; padding: 24px 32px 24px; background: rgba(8, 18, 21, .78); border-bottom: 1px solid var(--rule-ink-soft); }
.knowledge-workbench__head h2 { margin: 12px 0 12px; color: var(--paper); font-family: var(--font-display); font-size: var(--type-display); font-weight: 400; line-height: 1.12; }
.knowledge-workbench__head h2 em { color: var(--gold-light); font-style: normal; }
.knowledge-workbench__head p { max-width: 620px; margin: 0; color: var(--ink-3); font-family: var(--font-prose); font-size: var(--type-meta); line-height: 1.8; }
.knowledge-workbench__stats { display: grid; grid-template-columns: repeat(3, minmax(70px, 1fr)); align-self: end; gap: 16px; min-width: 280px; }
.knowledge-workbench__stats .meta-line { display: grid; gap: 8px; padding: 0 0 8px; border-color: var(--ink-3); }
.knowledge-workbench__stats .meta-line span { color: var(--ink-3); font-size: var(--type-meta); }
.knowledge-workbench__stats .meta-line strong { color: var(--gold-light); font-family: var(--font-display); font-size: var(--type-heading); font-weight: 400; }
.knowledge-workbench__toolbar { display: flex; align-items: center; gap: 12px; padding: 12px 12px; background: rgba(13, 23, 26, .88); border-bottom: 1px solid var(--rule-ink-soft); }
.knowledge-view-tabs { display: flex; gap: 4px; }
.knowledge-view-tabs button { min-width: 48px; padding: 8px 12px; color: var(--ink-3); background: transparent; border: 1px solid transparent; font: inherit; font-size: var(--type-meta); }
.knowledge-view-tabs button:hover, .knowledge-view-tabs button[aria-selected="true"] { color: var(--ink); background: var(--gold-light); border-color: var(--gold-light); }
.knowledge-workbench__toolbar .knowledge-search { display: flex; align-items: center; gap: 8px; width: min(310px, 32vw); min-height: 36px; margin-left: auto; padding: 0 8px; color: var(--ink-3); background: var(--wash-ink-soft); border: 1px solid var(--rule-ink); }
.knowledge-workbench__toolbar .knowledge-search .icon { width: 14px; height: 14px; }
.knowledge-workbench__toolbar .knowledge-search input { width: 100%; min-width: 0; padding: 0; color: var(--paper); background: transparent; border: 0; font: inherit; font-size: var(--type-body); }
.knowledge-workbench__toolbar .knowledge-search input::placeholder { color: var(--ink-3); }
.knowledge-workbench__toolbar .knowledge-add-button { min-height: 36px; }
.knowledge-workbench__body { display: grid; grid-template-columns: 188px minmax(0, 1fr) 286px; gap: 0px; background: var(--wash-ink); }
.knowledge-catalog { min-width: 0; padding: 20px 12px; color: var(--paper); background: rgba(8, 18, 21, .9); }
.knowledge-catalog__head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 4px 16px; border-bottom: 1px solid var(--rule-ink); }
.knowledge-catalog__head span { color: var(--ink-3); font-size: var(--type-meta); }
.knowledge-catalog__head strong { color: var(--gold-light); font-family: var(--font-display); font-size: var(--type-heading); font-weight: 400; }
.knowledge-catalog__groups { display: grid; gap: 0px; margin-top: 12px; }
.knowledge-catalog__item { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: start; gap: 8px; padding: 12px 4px 8px; color: var(--ink-3); border-left: 2px solid transparent; }
.knowledge-catalog__item.is-active { color: var(--paper); background: rgba(228, 189, 112, .08); border-left-color: var(--gold-light); }
.knowledge-catalog__index { color: var(--gold-light); font-family: var(--font-mono); font-size: var(--type-meta); }
.knowledge-catalog__item div { display: grid; gap: 4px; min-width: 0; }
.knowledge-catalog__item strong { font-size: var(--type-meta); font-weight: 500; }
.knowledge-catalog__item small { color: var(--ink-3); font-size: var(--type-meta); line-height: 1.5; }
.knowledge-catalog__item b { color: var(--gold-light); font-family: var(--font-mono); font-size: var(--type-meta); font-weight: 400; }
.knowledge-catalog__item em { grid-column: 2 / 4; color: var(--ink-3); font-size: var(--type-meta); font-style: normal; }
.knowledge-catalog__foot { display: grid; gap: 8px; margin: 24px 4px 0; padding-top: 12px; border-top: 1px solid var(--rule-ink-soft); }
.knowledge-catalog__foot span { color: var(--ink-3); font-size: var(--type-meta); }
.knowledge-catalog__foot strong { color: var(--gold-light); font-size: var(--type-meta); font-weight: 400; line-height: 1.7; }
.knowledge-workspace { min-width: 0; padding: 16px; background: rgba(13, 23, 26, .93); }
.knowledge-network__head, .knowledge-directory__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.knowledge-network__head h3, .knowledge-directory__head h3 { margin: 8px 0 0; color: var(--paper); font-family: var(--font-display); font-size: var(--type-heading); font-weight: 400; }
.knowledge-network__mode, .knowledge-directory__head > span { color: var(--ink-3); font-family: var(--font-mono); font-size: var(--type-meta); }
.knowledge-network__viewport { position: relative; height: 500px; overflow: hidden; background: radial-gradient(circle at 50% 50%, rgba(228, 189, 112, .09), transparent 35%), rgba(5, 14, 17, .7); border: 1px solid var(--rule-ink-soft); }
.knowledge-network__viewport::before, .knowledge-network__viewport::after { content: ""; position: absolute; left: 50%; top: 50%; width: 70%; aspect-ratio: 1; border: 1px solid var(--rule-ink-soft); border-radius: 50%; transform: translate(-50%, -50%) rotate(19deg); pointer-events: none; }
.knowledge-network__viewport::after { width: 42%; border-color: rgba(228, 189, 112, .12); transform: translate(-50%, -50%) rotate(-27deg); }
.knowledge-network__plane { position: absolute; inset: 0; transform: scale(var(--knowledge-zoom, 1)); transform-origin: center; transition: transform 240ms var(--ease); }
.knowledge-network__connections, .knowledge-network__dots { position: absolute; inset: 0; width: 100%; height: 100%; }
.knowledge-network__connections { pointer-events: none; }
.knowledge-network__line { fill: none; vector-effect: non-scaling-stroke; }
.knowledge-network__line--core { stroke: rgba(228, 189, 112, .24); stroke-width: .18; }
.knowledge-network__line--relation { stroke: rgba(238, 234, 224, .28); stroke-width: .2; }
.knowledge-network__line--thread { stroke: rgba(228, 189, 112, .16); stroke-width: .12; stroke-dasharray: 1 1.6; }
.knowledge-network__dot { position: absolute; z-index: 1; width: var(--dot-size); height: var(--dot-size); border-radius: 50%; transform: translate(-50%, -50%); opacity: .72; box-shadow: 0 0 0 3px rgba(238, 234, 224, .025); }
.knowledge-network__dot--gold { background: var(--gold-light); }
.knowledge-network__dot--red { background: #d77968; }
.knowledge-network__dot--teal { background: #71b8ad; }
.knowledge-network__dot--gray { background: rgba(238, 234, 224, .64); }
.knowledge-network__dot--interactive { padding: 0; border: 1px solid rgba(238, 234, 224, .48); cursor: pointer; appearance: none; transition: width var(--fast) ease, height var(--fast) ease, box-shadow var(--fast) ease, background var(--fast) ease; }
.knowledge-network__dot--interactive:hover, .knowledge-network__dot--interactive:focus-visible, .knowledge-network__dot--interactive[aria-pressed="true"] { width: 11px; height: 11px; background: var(--invert-bg); outline: 0; box-shadow: 0 0 0 4px rgba(228, 189, 112, .22), 0 0 14px rgba(228, 189, 112, .38); }
.knowledge-network__core { position: absolute; z-index: 3; left: 50%; top: 50%; display: grid; place-items: center; align-content: center; width: 108px; height: 108px; color: var(--ink); background: var(--surface-paper); border: 1px solid var(--gold-light); border-radius: 50%; transform: translate(-50%, -50%); text-align: center; box-shadow: 0 0 0 8px rgba(228, 189, 112, .06), 0 12px 27px rgba(0, 0, 0, .23); }
.knowledge-network__core::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(169, 75, 64, .38); border-radius: 50%; }
.knowledge-network__core span, .knowledge-network__core strong, .knowledge-network__core small { position: relative; }
.knowledge-network__core span { color: var(--rock); font-family: var(--font-mono); font-size: var(--type-meta); letter-spacing: .08em; }
.knowledge-network__core strong { margin: 4px 0 0px; color: var(--red); font-family: var(--font-display); font-size: var(--type-title); font-weight: 400; line-height: 1; }
.knowledge-network__core small { color: var(--rock); font-size: var(--type-meta); }
.knowledge-network__node { position: absolute; z-index: 4; display: grid; grid-template-columns: 23px minmax(0, 1fr); align-items: center; gap: 8px; width: 142px; min-height: 55px; padding: 8px 8px; color: var(--paper); background: rgba(20, 43, 49, .9); border: 1px solid var(--rule-ink-strong); text-align: left; transform: translate(-50%, -50%); transition: color var(--fast) ease, background var(--fast) ease, border-color var(--fast) ease, transform var(--fast) var(--ease); }
.knowledge-network__node:hover, .knowledge-network__node.is-active { color: var(--ink); background: var(--gold-light); border-color: var(--gold-light); transform: translate(-50%, -50%) scale(1.035); }
.knowledge-network__node > span { display: grid; place-items: center; width: 22px; height: 22px; color: var(--gold-light); border: 1px solid currentColor; font-family: var(--font-display); font-size: var(--type-meta); }
.knowledge-network__node:hover > span, .knowledge-network__node.is-active > span { color: var(--red); }
.knowledge-network__node strong { overflow-wrap: anywhere; font-family: var(--font-display); font-size: var(--type-meta); font-weight: 400; line-height: 1.25; }
.knowledge-network__node small { grid-column: 2; color: var(--ink-3); font-size: var(--type-meta); }
.knowledge-network__node:hover small, .knowledge-network__node.is-active small { color: rgba(13, 23, 26, .58); }
.knowledge-network__node--red { border-left: 2px solid #d77968; }
.knowledge-network__node--teal { border-left: 2px solid #71b8ad; }
.knowledge-network__node--gray { border-left: 2px solid rgba(238, 234, 224, .56); }
.knowledge-network__footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 12px; }
.knowledge-network__legend { display: flex; flex-wrap: wrap; gap: 12px; color: var(--ink-3); font-size: var(--type-meta); }
.knowledge-network__legend span { display: inline-flex; align-items: center; }
.knowledge-network__zoom { display: flex; align-items: center; gap: 4px; color: var(--ink-3); font-family: var(--font-mono); font-size: var(--type-meta); }
.knowledge-network__zoom button { min-width: 24px; min-height: 24px; padding: 0 4px; color: var(--paper); background: transparent; border: 1px solid var(--rule-ink-strong); font: inherit; font-size: var(--type-meta); }
.knowledge-network__zoom button:hover { color: var(--ink); background: var(--gold-light); border-color: var(--gold-light); }
.knowledge-directory { min-height: 500px; padding: 4px 4px; }
.knowledge-directory__group { margin-top: 20px; }
.knowledge-directory__group-head { display: flex; justify-content: space-between; padding: 0 8px 8px; color: var(--gold-light); border-bottom: 1px solid var(--rule-ink); font-size: var(--type-meta); }
.knowledge-directory__group-head span { color: var(--ink-3); font-family: var(--font-mono); font-size: var(--type-meta); }
.knowledge-directory__row { display: grid; grid-template-columns: 27px minmax(0, 1fr) 30px 15px; align-items: center; gap: 8px; width: 100%; padding: 12px 8px; color: var(--paper); background: transparent; border: 0; border-bottom: 1px solid var(--rule-ink-soft); text-align: left; }
.knowledge-directory__row:hover, .knowledge-directory__row[aria-pressed="true"] { background: rgba(228, 189, 112, .1); }
.knowledge-directory__row-gua { display: grid; place-items: center; width: 25px; height: 25px; color: var(--gold-light); border: 1px solid currentColor; font-family: var(--font-display); font-size: var(--type-meta); }
.knowledge-directory__row-copy { display: grid; gap: 4px; min-width: 0; }
.knowledge-directory__row-copy strong { overflow-wrap: anywhere; font-family: var(--font-display); font-size: var(--type-meta); font-weight: 400; }
.knowledge-directory__row-copy small { overflow: hidden; color: var(--ink-3); font-size: var(--type-meta); text-overflow: ellipsis; white-space: nowrap; }
.knowledge-directory__row-level { color: var(--gold-light); font-family: var(--font-mono); font-size: var(--type-meta); }
.knowledge-directory__row > .icon { width: 14px; height: 14px; color: var(--ink-3); }
.knowledge-directory__empty { display: grid; place-items: center; gap: 8px; min-height: 360px; color: var(--ink-3); text-align: center; }
.knowledge-directory__empty span { color: var(--gold-light); font-family: var(--font-display); font-size: var(--type-display); }
.knowledge-directory__empty strong { color: var(--paper); font-family: var(--font-display); font-size: var(--type-subhead); font-weight: 400; }
.knowledge-directory__empty small { font-size: var(--type-meta); }
.knowledge-inspector { min-width: 0; padding: 20px 20px; color: var(--ink); background: rgba(247, 244, 237, .96); border-left: 1px solid rgba(228, 189, 112, .5); }
.knowledge-inspector__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--rock); font-family: var(--font-mono); font-size: var(--type-meta); }
.knowledge-inspector__top b { color: var(--red); font-weight: 500; }
.knowledge-inspector h3 { margin: 24px 0 8px; color: var(--ink); font-family: var(--font-display); font-size: var(--type-title); font-weight: 400; line-height: 1.2; }
.knowledge-inspector__strand { color: var(--red); font-size: var(--type-meta); }
.knowledge-inspector > p { margin: 16px 0 20px; color: var(--rock); font-family: var(--font-prose); font-size: var(--type-meta); line-height: 1.85; }
.knowledge-inspector__mastery { padding: 12px 0 16px; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.knowledge-inspector__mastery > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; color: var(--rock); font-size: var(--type-meta); }
.knowledge-inspector__mastery strong { color: var(--red); font-family: var(--font-mono); font-size: var(--type-meta); font-weight: 400; }
.knowledge-inspector__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px 0; }
.knowledge-inspector__meta div { display: grid; gap: 4px; min-width: 0; }
.knowledge-inspector__meta span, .knowledge-inspector__links > span, .knowledge-inspector__note > span { color: var(--rock); font-size: var(--type-meta); }
.knowledge-inspector__meta strong { overflow-wrap: anywhere; color: var(--ink); font-size: var(--type-meta); font-weight: 500; line-height: 1.4; }
.knowledge-inspector__links { padding-top: 12px; border-top: 1px solid var(--line-dark); }
.knowledge-inspector__links > div { display: grid; gap: 4px; margin-top: 8px; }
.knowledge-inspector__links button { padding: 8px 0; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid rgba(13, 23, 26, .12); font-family: var(--font-display); font-size: var(--type-meta); text-align: left; }
.knowledge-inspector__links button:hover { color: var(--red); }
.knowledge-inspector__links small { color: var(--rock); font-size: var(--type-meta); }
.knowledge-inspector__note { margin: 20px 0 20px; padding: 12px; background: rgba(217, 211, 198, .52); border-top: 1px solid rgba(169, 75, 64, .35); }
.knowledge-inspector__note p { margin: 8px 0 0; color: var(--rock); font-family: var(--font-prose); font-size: var(--type-meta); line-height: 1.75; }
.knowledge-workbench > .knowledge-capture { margin: 0px 0 0; }
.knowledge-materials { margin-top: 20px; padding: 24px 32px 32px; color: var(--paper); background: rgba(8, 18, 21, .84); border-top: 1px solid rgba(228, 189, 112, .45); }
.knowledge-materials__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.knowledge-materials__head h2 { margin: 8px 0 8px; color: var(--paper); font-family: var(--font-display); font-size: var(--type-title); font-weight: 400; }
.knowledge-materials__head p { max-width: 630px; margin: 0; color: var(--ink-3); font-size: var(--type-meta); line-height: 1.75; }
.knowledge-materials__count { color: var(--gold-light); font-family: var(--font-mono); font-size: var(--type-meta); white-space: nowrap; }
.knowledge-materials__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
.knowledge-materials__list article { display: grid; gap: 8px; min-width: 0; padding: 16px; background: rgba(20, 43, 49, .72); border-left: 2px solid rgba(228, 189, 112, .64); }
.knowledge-materials__list article > div { display: grid; gap: 4px; }
.knowledge-materials__list article span, .knowledge-materials__list article small { color: var(--ink-3); font-size: var(--type-meta); }
.knowledge-materials__list article h3 { margin: 0; color: var(--paper); font-family: var(--font-display); font-size: var(--type-body); font-weight: 400; overflow-wrap: anywhere; }
.knowledge-materials__list article p { margin: 0; color: var(--ink-2); font-size: var(--type-meta); line-height: 1.7; }
.knowledge-materials__empty { display: grid; gap: 4px; margin-top: 20px; padding: 16px; color: var(--ink-3); background: rgba(20, 43, 49, .56); border-left: 2px solid rgba(228, 189, 112, .64); }
.knowledge-materials__empty strong { color: var(--paper); font-family: var(--font-display); font-size: var(--type-body); font-weight: 400; }
.knowledge-materials__empty span { font-size: var(--type-meta); line-height: 1.7; }
.knowledge-materials__citations { display: grid; gap: 8px; margin-top: 24px; padding-top: 20px; border-top: 1px dashed var(--rule-ink-strong); }
.knowledge-materials__citations > span { color: var(--gold-light); font-family: var(--font-mono); font-size: var(--type-meta); letter-spacing: .12em; }
.knowledge-materials__citations article { padding: 12px 12px; background: rgba(247, 244, 237, .08); border-left: 2px solid var(--red); }
.knowledge-materials__citations article strong { color: var(--paper); font-size: var(--type-meta); font-weight: 500; }
.knowledge-materials__citations article p { margin: 4px 0; color: var(--ink-2); font-size: var(--type-meta); line-height: 1.7; }
.knowledge-materials__citations article small { color: var(--ink-3); font-size: var(--type-meta); }

@media (max-width: 1180px) {
  .knowledge-workbench__body { grid-template-columns: 165px minmax(0, 1fr); }
  .knowledge-inspector { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, .7fr); gap: 16px 24px; border-top: 1px solid rgba(228, 189, 112, .5); border-left: 0; }
  .knowledge-inspector__top, .knowledge-inspector h3, .knowledge-inspector__strand, .knowledge-inspector > p, .knowledge-inspector__mastery, .knowledge-inspector__meta, .knowledge-inspector__links, .knowledge-inspector__note, .knowledge-inspector > .button { grid-column: 1; }
  .knowledge-inspector__top { grid-row: 1; }
  .knowledge-inspector h3 { grid-row: 2; }
  .knowledge-inspector__strand { grid-row: 3; }
  .knowledge-inspector > p { grid-row: 4; }
  .knowledge-inspector__mastery { grid-row: 5; }
  .knowledge-inspector__meta { grid-row: 6; }
  .knowledge-inspector__links { grid-column: 2; grid-row: 1 / 6; }
  .knowledge-inspector__note { grid-column: 2; grid-row: 6; margin-top: 0; }
  .knowledge-inspector > .button { grid-column: 2; grid-row: 7; align-self: start; }
}

@media (max-width: 700px) {
  .knowledge-workbench__head { grid-template-columns: 1fr; gap: 20px; padding: 24px 20px 20px; }
  .knowledge-workbench__head h2 { font-size: var(--type-title); }
  .knowledge-workbench__head p { font-size: var(--type-meta); }
  .knowledge-workbench__stats { min-width: 0; gap: 12px; }
  .knowledge-workbench__stats .meta-line strong { font-size: var(--type-subhead); }
  .knowledge-workbench__toolbar { align-items: stretch; flex-wrap: wrap; padding: 8px; }
  .knowledge-workbench__toolbar .knowledge-search { order: 3; width: 100%; margin-left: 0; }
  .knowledge-workbench__toolbar .knowledge-add-button { margin-left: auto; }
  .knowledge-workbench__body { grid-template-columns: 1fr; }
  .knowledge-catalog { padding: 16px 12px; }
  .knowledge-catalog__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .knowledge-catalog__foot { display: none; }
  .knowledge-workspace { padding: 12px; }
  .knowledge-network__head, .knowledge-directory__head { align-items: flex-start; flex-direction: column; gap: 8px; }
  .knowledge-network__viewport { height: 470px; }
  .knowledge-network__node { width: 112px; min-height: 49px; padding: 8px 8px; }
  .knowledge-network__node strong { font-size: var(--type-meta); }
  .knowledge-network__node small { font-size: var(--type-meta); }
  .knowledge-network__core { width: 90px; height: 90px; }
  .knowledge-network__core strong { font-size: var(--type-heading); }
  .knowledge-network__footer { align-items: flex-start; flex-direction: column; }
  .knowledge-inspector { display: block; padding: 20px 20px; }
  .knowledge-inspector__links { margin-top: 16px; }
  .knowledge-inspector__note { margin-top: 20px; }
  .knowledge-inspector > .button { width: 100%; justify-content: center; }
  .knowledge-materials { padding: 24px 20px 24px; }
  .knowledge-materials__head { align-items: flex-start; flex-direction: column; gap: 12px; }
  .knowledge-materials__list { grid-template-columns: 1fr; }
}

/* Route drafting keeps user-declared capacity and verification evidence together. */
.route-layout { display: grid; grid-template-columns: minmax(285px, .72fr) minmax(0, 1.28fr); gap: 0px; margin-top: 24px; background: rgba(18, 32, 34, .22); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.route-form { display: grid; gap: 16px; margin-top: 24px; }
.route-form label { display: grid; gap: 8px; color: var(--ink); font-size: var(--type-meta); }
.route-form label small { color: var(--rock); font-size: var(--type-meta); }
.route-form input, .route-form select, .route-form textarea { width: 100%; min-width: 0; padding: 8px 12px; color: var(--ink); background: rgba(255, 255, 255, .44); border: 1px solid var(--line-dark); border-radius: 0; font: inherit; font-size: var(--type-body); line-height: 1.5; outline: 0; }
.route-form textarea { min-height: 80px; resize: vertical; }
.route-form input:focus, .route-form select:focus, .route-form textarea:focus { border-color: var(--red); box-shadow: 0 0 0 2px rgba(169, 75, 64, .12); }
.route-form .button { justify-self: start; margin-top: 4px; }
.route-empty, .route-draft { min-width: 0; padding: 32px; background: rgba(13, 23, 26, .92); color: var(--paper); }
.route-empty { display: grid; align-content: center; min-height: 520px; }
.route-empty h2 { margin: 12px 0 8px; color: var(--paper); font-family: var(--font-display); font-size: var(--type-title); font-weight: 400; }
.route-empty p { max-width: 440px; margin: 0; color: var(--ink-3); font-family: var(--font-prose); font-size: var(--type-meta); line-height: 1.85; }
.route-empty--clarification { align-content: start; }
.route-empty--clarification ul { display: grid; gap: 8px; max-width: 520px; margin: 20px 0 0; padding: 16px 16px 16px 32px; color: var(--ink-1); background: rgba(228, 189, 112, .08); border-left: 2px solid var(--gold-light); font-family: var(--font-prose); font-size: var(--type-meta); line-height: 1.7; }
.route-empty--clarification small { margin-top: 16px; color: var(--ink-3); font-size: var(--type-meta); }
.route-error { margin-bottom: 20px; padding: 12px 12px; color: #f0b1a4; background: rgba(169, 75, 64, .14); border: 1px solid rgba(227, 139, 123, .45); font-size: var(--type-meta); line-height: 1.6; }
.route-draft { display: grid; gap: 0; }
.route-draft__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid var(--rule-ink); }
.route-draft__header h2 { margin: 8px 0 8px; color: var(--paper); font-family: var(--font-display); font-size: var(--type-title); font-weight: 400; line-height: 1.16; }
.route-draft__header p { max-width: 600px; margin: 0; color: var(--ink-3); font-family: var(--font-prose); font-size: var(--type-meta); line-height: 1.8; }
.route-feasibility { flex: 0 0 auto; padding: 8px 8px; border: 1px solid currentColor; font-family: var(--font-mono); font-size: var(--type-meta); }
.route-feasibility--feasible { color: #a8d1a8; }
.route-feasibility--tight { color: var(--gold-light); }
.route-feasibility--needs_adjustment { color: #e38b7b; }
.route-capacity { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0px; margin-top: 20px; background: var(--wash-ink); }
.route-capacity > div { display: grid; gap: 8px; min-width: 0; padding: 12px 12px; background: rgba(6, 15, 18, .72); }
.route-capacity span { color: var(--ink-3); font-size: var(--type-meta); }
.route-capacity strong { color: var(--gold-light); font-family: var(--font-display); font-size: var(--type-subhead); font-weight: 400; line-height: 1.2; }
.route-capacity__note { margin: 12px 0 0; color: var(--ink-3); font-family: var(--font-prose); font-size: var(--type-meta); line-height: 1.7; }
.route-assessment-summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .76fr); gap: 12px 20px; margin-top: 20px; padding: 16px; color: var(--paper); background: rgba(228, 189, 112, .07); border-left: 2px solid var(--gold-light); border-top: 1px solid rgba(228, 189, 112, .28); }
.route-assessment-summary h3 { margin: 8px 0; color: var(--gold-light); font-family: var(--font-display); font-size: var(--type-heading); font-weight: 400; }
.route-assessment-summary p { max-width: 480px; margin: 0; color: var(--ink-3); font-family: var(--font-prose); font-size: var(--type-meta); line-height: 1.7; }
.route-assessment-summary dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0px; margin: 0; background: var(--wash-ink); }
.route-assessment-summary dl > div { display: grid; gap: 4px; min-width: 0; padding: 8px; background: rgba(5, 14, 17, .46); }
.route-assessment-summary dt { color: var(--ink-3); font-size: var(--type-meta); }
.route-assessment-summary dd { margin: 0; color: var(--paper); font-size: var(--type-meta); line-height: 1.45; overflow-wrap: anywhere; }
.route-assessment-summary blockquote { grid-column: 1 / -1; margin: 0; padding: 8px 12px; color: var(--ink-2); border-left: 1px solid rgba(228, 189, 112, .52); background: rgba(5, 14, 17, .34); font-family: var(--font-kai); font-size: var(--type-meta); line-height: 1.7; }
.route-next-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .72fr); gap: 0px; margin-top: 24px; background: var(--wash-ink); border-left: 2px solid var(--gold-light); }
.route-next-step > div { display: grid; gap: 8px; min-width: 0; padding: 16px; background: rgba(5, 14, 17, .56); }
.route-next-step .section-kicker, .route-next-step > div > span { color: var(--gold-light); font-family: var(--font-mono); font-size: var(--type-meta); }
.route-next-step h3 { margin: 0; color: var(--paper); font-family: var(--font-display); font-size: var(--type-heading); font-weight: 400; overflow-wrap: anywhere; }
.route-next-step p, .route-next-step small { margin: 0; color: var(--ink-3); font-size: var(--type-meta); line-height: 1.6; overflow-wrap: anywhere; }
.route-next-step strong { color: var(--paper); font-size: var(--type-meta); font-weight: 500; line-height: 1.45; overflow-wrap: anywhere; }
.plan-horizon { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0px; margin: 24px 0 4px; background: var(--line-dark); }
.plan-horizon > .section-kicker { grid-column: 1 / -1; padding: 12px 0 0px; background: var(--ink); }
.plan-horizon article { display: grid; gap: 4px; padding: 16px; background: var(--surface-paper); color: var(--ink); }
.plan-horizon article strong { color: var(--red); font-family: var(--font-display); font-size: var(--type-heading); font-weight: 400; }
.plan-horizon article span { font-size: var(--type-meta); font-weight: 600; }
.plan-horizon article small { color: var(--rock); font-family: var(--font-prose); font-size: var(--type-meta); line-height: 1.6; }
.route-draft__body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(230px, .8fr); gap: 24px; margin-top: 24px; }
.route-milestones { display: grid; align-content: start; gap: 0px; }
.route-milestones > .section-kicker { margin-bottom: 8px; }
.route-milestone { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-top: 1px solid var(--rule-ink-soft); }
.route-milestone > span { color: var(--gold-light); font-family: var(--font-mono); font-size: var(--type-meta); }
.route-milestone small { color: var(--ink-3); font-family: var(--font-mono); font-size: var(--type-meta); }
.route-milestone h3 { margin: 8px 0 8px; color: var(--paper); font-family: var(--font-display); font-size: var(--type-subhead); font-weight: 400; }
.route-milestone ul, .route-verification ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.route-milestone li, .route-verification li { position: relative; padding-left: 12px; color: var(--ink-3); font-family: var(--font-prose); font-size: var(--type-meta); line-height: 1.65; }
.route-milestone li::before, .route-verification li::before { content: ""; position: absolute; top: .62em; left: 0; width: 4px; height: 4px; background: var(--gold-light); }
.route-verification { display: grid; align-content: start; gap: 12px; padding: 16px; background: var(--wash-ink-soft); border-top: 1px solid rgba(228, 189, 112, .48); }
.route-verification h3 { margin: 0; color: var(--paper); font-family: var(--font-display); font-size: var(--type-subhead); font-weight: 400; line-height: 1.3; }
.route-sources { display: grid; gap: 0px; margin-top: 4px; background: var(--wash-ink); }
.route-sources a { display: grid; gap: 4px; padding: 8px; color: var(--paper); background: rgba(5, 14, 17, .65); text-decoration: none; }
.route-sources a:hover { color: var(--ink); background: var(--gold-light); }
.route-sources strong { font-size: var(--type-meta); font-weight: 500; line-height: 1.4; }
.route-sources small { opacity: .6; font-size: var(--type-meta); line-height: 1.4; }
.route-evidence { display: grid; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--rule-ink); }
.route-evidence article { display: grid; gap: 4px; padding: 8px 0; border-bottom: 1px solid var(--rule-ink-soft); }
.route-evidence article strong { font-size: var(--type-meta); line-height: 1.4; }
.route-evidence article p, .route-evidence > p { margin: 0; color: var(--ink-2); font-size: var(--type-meta); line-height: 1.6; }
.route-evidence article small { color: var(--ink-3); font-size: var(--type-meta); }
.route-confirmed, .route-blocked { display: inline-flex; align-items: center; gap: 8px; color: var(--gold-light); font-size: var(--type-meta); line-height: 1.6; }
.route-blocked { color: #e38b7b; }
.home-route__empty { display: grid; gap: 8px; max-width: 520px; padding: 24px 0 4px; border-top: 1px solid var(--rule-ink); }
.home-route__empty strong { color: var(--paper); font-family: var(--font-display); font-size: var(--type-heading); font-weight: 400; }
.home-route__empty span { color: var(--ink-3); font-size: var(--type-meta); line-height: 1.7; }
.home-route__empty .button { justify-self: start; margin-top: 8px; }

@media (max-width: 1040px) {
  .route-layout { grid-template-columns: 1fr; }
  .route-empty { min-height: 250px; }
}

@media (max-width: 700px) {
  .route-empty, .route-draft { padding: 24px 20px; }
  .route-draft__body { grid-template-columns: 1fr; }
  .route-assessment-summary { grid-template-columns: 1fr; }
  .route-assessment-summary dl { grid-template-columns: 1fr; }
  .route-form .button { width: 100%; justify-content: center; }
  .route-draft__header { display: grid; gap: 16px; }
  .route-feasibility { justify-self: start; }
  .route-capacity { grid-template-columns: 1fr 1fr; }
  .route-next-step { grid-template-columns: 1fr; }
}

.persistence-notice { display: grid; gap: 4px; margin: 0 auto 16px; max-width: 1180px; padding: 12px 16px; color: #f6dfb1; background: rgba(142, 72, 53, .3); border: 1px solid rgba(228, 189, 112, .4); }
.persistence-notice strong { font-size: var(--type-meta); font-weight: 600; }
.persistence-notice span { color: rgba(247, 244, 237, .72); font-size: var(--type-meta); line-height: 1.6; }

/* Admin analytics */
.page--admin { padding-bottom: 80px; }
.topbar__admin-link { color: var(--gold-light); font-size: var(--type-meta); letter-spacing: .06em; text-decoration: none; white-space: nowrap; }
.topbar__admin-link:hover { color: var(--paper); }
.admin-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 20px; padding: 16px 0; border-top: 1px solid var(--rule-ink); border-bottom: 1px solid var(--rule-ink); }
.admin-toolbar p { margin: 4px 0 0; color: var(--ink-3); font-size: var(--type-meta); }
.admin-toolbar__form { display: flex; align-items: center; gap: 8px; }
.admin-toolbar__form label { color: var(--ink-3); font-size: var(--type-meta); }
.admin-toolbar__form input { min-height: 36px; padding: 0 8px; color: var(--paper); background: var(--wash-ink-soft); border: 1px solid rgba(238, 234, 224, .28); }
.admin-toolbar__form input:focus { outline: 1px solid var(--gold-light); outline-offset: 2px; }
.admin-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0px; margin-bottom: 32px; background: var(--wash-ink); }
.admin-kpi { display: grid; gap: 8px; min-width: 0; min-height: 118px; padding: 16px; background: rgba(5, 14, 17, .7); }
.admin-kpi span { color: var(--ink-3); font-size: var(--type-meta); }
.admin-kpi strong { color: var(--gold-light); font-family: var(--font-display); font-size: var(--type-title); font-weight: 400; line-height: 1; overflow-wrap: anywhere; }
.admin-kpi small { color: var(--ink-3); font-family: var(--font-mono); font-size: var(--type-meta); letter-spacing: .08em; }
.admin-detail { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--rule-ink); }
.admin-detail .section-title { margin-bottom: 16px; }
.admin-detail .section-title h2 { color: var(--paper); }
.admin-detail__date { color: var(--ink-3); font-family: var(--font-mono); font-size: var(--type-meta); }
.admin-table-wrap { overflow-x: auto; border-top: 1px solid var(--rule-ink); border-bottom: 1px solid var(--rule-ink); }
.admin-table { width: 100%; min-width: 720px; border-collapse: collapse; color: var(--paper); font-size: var(--type-meta); }
.admin-table th, .admin-table td { padding: 12px 8px; text-align: right; border-bottom: 1px solid var(--rule-ink-soft); white-space: nowrap; }
.admin-table thead th { color: var(--gold-light); font-size: var(--type-meta); font-weight: 500; letter-spacing: .06em; }
.admin-table th:first-child, .admin-table td:first-child { text-align: left; }
.admin-table tbody th { color: var(--ink-2); font-family: var(--font-mono); font-size: var(--type-meta); font-weight: 400; }
.admin-table tbody tr:last-child th, .admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-definition { max-width: 760px; margin-top: 32px; padding: 16px 16px; border-left: 2px solid var(--red); background: var(--wash-ink-soft); }
.admin-definition p { margin: 8px 0 0; color: var(--ink-3); font-family: var(--font-prose); font-size: var(--type-meta); line-height: 1.75; }
.admin-state { display: grid; justify-items: start; gap: 8px; max-width: 600px; padding: 32px 0 48px; }
.admin-state__icon { display: inline-grid; place-items: center; width: 42px; height: 42px; color: var(--gold-light); border: 1px solid rgba(228, 189, 112, .42); }
.admin-state h2 { margin: 4px 0 0; color: var(--paper); font-size: var(--type-title); }
.admin-state p { max-width: 520px; margin: 0; color: var(--ink-3); font-size: var(--type-meta); line-height: 1.75; }
.admin-state--locked .admin-state__icon { color: #e38b7b; border-color: rgba(227, 139, 123, .52); }
.admin-state--error .admin-state__icon { color: #e38b7b; border-color: rgba(227, 139, 123, .52); }
.admin-empty { padding: 24px 0; color: var(--ink-3); font-size: var(--type-meta); }

@media (max-width: 860px) {
  .admin-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .admin-toolbar { align-items: stretch; flex-direction: column; }
  .admin-toolbar__form { justify-content: space-between; }
  .admin-toolbar__form input { flex: 1; }
  .admin-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-kpi { min-height: 104px; padding: 12px; }
  .admin-kpi strong { font-size: var(--type-heading); }
  .admin-detail .section-title { align-items: flex-start; flex-direction: column; gap: 8px; }
}

/* Primary loop navigation: a readable ink band over light scenes. */
.primary-nav { position: fixed; z-index: 4; top: 50%; right: 25px; display: grid; gap: 4px; width: 232px; padding: 8px; background: linear-gradient(90deg, rgba(8, 18, 21, .82), rgba(8, 18, 21, .6)); border: 1px solid var(--rule-ink-strong); border-left-color: rgba(228, 189, 112, .4); box-shadow: 0 16px 36px rgba(0, 0, 0, .2); backdrop-filter: blur(10px) saturate(.9); transform: translateY(-50%); }
.primary-nav__link { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 12px; color: rgba(247, 244, 237, .86); border-left: 2px solid rgba(238, 234, 224, .34); font-size: var(--type-meta); font-weight: 500; text-decoration: none; text-shadow: 0 1px 3px rgba(0, 0, 0, .58); transition: color var(--fast), background var(--fast), border-color var(--fast), box-shadow var(--fast); }
.primary-nav__link .icon { flex: 0 0 auto; width: 17px; height: 17px; color: rgba(247, 244, 237, .82); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
.primary-nav__link:hover, .primary-nav__link:focus-visible { color: var(--paper); background: var(--wash-ink); border-color: var(--gold-light); box-shadow: inset 0 0 0 1px rgba(228, 189, 112, .12); }
.primary-nav__link.is-active { color: #f6d79a; background: linear-gradient(90deg, rgba(189, 141, 67, .36), rgba(189, 141, 67, .14)); border-color: var(--gold-light); box-shadow: inset 0 0 0 1px rgba(228, 189, 112, .18), 0 7px 18px rgba(0, 0, 0, .14); font-weight: 600; text-shadow: 0 1px 3px rgba(0, 0, 0, .72); }
.primary-nav__link.is-active .icon { color: var(--gold-light); }
.mobile-primary-nav { display: none; }
.auth-service-notice { margin: 0 0 12px; padding: 8px 12px; color: #f6dfb1; background: rgba(142, 72, 53, .32); border-left: 2px solid var(--gold-light); font-size: var(--type-meta); line-height: 1.6; }

/* Minimal first-use setup */
.onboarding-form--minimal { display: grid; gap: 24px; max-width: 660px; }
.onboarding-choice, .onboarding-time { display: grid; gap: 8px; }
.onboarding-choice .goal-option { min-height: 86px; cursor: default; }
.onboarding-time > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.onboarding-time strong { color: var(--gold-light); font-family: var(--font-display); font-size: var(--type-title); font-weight: 400; }
.onboarding-time input[type="range"], .route-hours input[type="range"] { width: 100%; accent-color: var(--gold-light); }
.onboarding-time__scale, .route-hours > span { display: flex; justify-content: space-between; color: var(--ink-3); font-size: var(--type-meta); }
.route-quick { display: grid; grid-template-columns: minmax(0, .9fr) minmax(320px, .7fr); align-items: center; gap: 40px; max-width: 980px; min-height: 440px; margin: 0 auto; }
.route-quick h2 { margin: 8px 0 12px; color: var(--paper); font-size: clamp(34px, 4vw, 54px); font-weight: 400; line-height: 1.08; }
.route-quick p { max-width: 430px; margin: 0; color: var(--ink-3); font-size: var(--type-meta); line-height: 1.8; }
.route-form--minimal { display: grid; gap: 20px; padding: 24px; background: rgba(11, 25, 29, .68); border: 1px solid var(--rule-ink); }
.route-form--minimal label { display: grid; gap: 8px; color: var(--ink-2); font-size: var(--type-meta); }
.route-form--minimal input[type="date"] { min-height: 44px; }
.route-form--minimal .route-goal-link { justify-self: start; color: var(--ink-3); font-size: var(--type-meta); letter-spacing: .04em; }
.route-adjustment-panel { display: grid; gap: 16px; margin-top: 16px; padding: 24px 32px; color: var(--ink); background: var(--surface-paper); border-left: 2px solid var(--red); box-shadow: var(--shadow-paper); }
.route-adjustment-panel__heading { display: grid; gap: 8px; }
.route-adjustment-panel__heading h3 { margin: 0; font-family: var(--font-display); font-size: var(--type-heading); font-weight: 400; }
.route-adjustment-panel__heading p { margin: 0; color: var(--rock); font-family: var(--font-prose); font-size: var(--type-meta); line-height: 1.7; }
.route-form--adjustment { grid-template-columns: minmax(0, 1fr) minmax(190px, .7fr); align-items: end; margin-top: 0; }
.route-form--adjustment .button, .route-form--adjustment .text-link { align-self: end; }
.route-form--adjustment .text-link { justify-self: start; color: var(--red); }
.route-adjustment__error { margin: 0; padding: 8px 12px; color: #9f3f35; background: rgba(169, 75, 64, .08); border: 1px solid rgba(169, 75, 64, .3); font-size: var(--type-meta); line-height: 1.6; }
.route-generation-quota { margin: 0; color: var(--ink-2); font-size: var(--type-meta); line-height: 1.6; }
.route-adjustment-panel .route-generation-quota { color: rgba(11, 25, 29, .72); }
.route-generation-status { min-height: 2.8em; margin: -4px 0 0; color: var(--ink-2); font-size: var(--type-meta); line-height: 1.55; }
.route-hours > strong { color: var(--gold-light); font-family: var(--font-display); font-size: var(--type-heading); font-weight: 400; }

@media (min-width: 701px) {
  /* 右栏是 fixed，width 232 + right 25 = 占掉右侧 257px。
     这里原先写 200px，于是每个桌面宽度下内容都被压掉 57px ——
     实测 .knowledge-inspector 右边缘 1225、.primary-nav 左边缘 1168，
     重叠 57px，"当前节点"卡片的右侧被导航面板盖住。
     用 calc 把 232 + 25 显式写出来，再留 24px 呼吸；改右栏宽度时这里会自动跟上。 */
  .page-view { padding-right: calc(232px + 25px + 24px); }
}

@media (max-width: 700px) {
  .primary-nav { display: none; }
  .mobile-primary-nav { position: fixed; z-index: 8; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(5, 1fr); min-height: 64px; padding: 4px 8px calc(5px + env(safe-area-inset-bottom)); background: rgba(8, 18, 21, .94); border-top: 1px solid var(--rule-ink); backdrop-filter: blur(12px); }
  .mobile-primary-nav .primary-nav__link { display: grid; place-items: center; gap: 0px; min-height: 52px; padding: 0 4px; border-left: 0; border-top: 2px solid transparent; font-size: var(--type-meta); }
  .mobile-primary-nav .primary-nav__link .icon { width: 17px; height: 17px; }
  .mobile-primary-nav .primary-nav__link.is-active { background: transparent; border-top-color: var(--gold-light); }
  .page-view { padding-bottom: 104px; }
  .onboarding-form--minimal { gap: 20px; }
  .onboarding-time > div:first-child { align-items: flex-start; flex-direction: column; gap: 4px; }
  .route-quick { grid-template-columns: 1fr; min-height: 0; gap: 24px; }
  .route-form--adjustment { grid-template-columns: 1fr; }
  .route-form--adjustment .text-link { justify-self: start; }
  .route-form--minimal { padding: 20px; }
}

/* CET learning workspace */
.page--onboarding .onboarding-choice { display: none; }
.onboarding-goals { max-width: 980px; margin: 0 auto 16px; color: var(--paper); }
.onboarding-goals__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.onboarding-goal { min-width: 0; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: start; gap: 8px 8px; padding: 12px; color: var(--paper); text-align: left; background: rgba(13, 23, 26, .72); border: 1px solid var(--rule-ink-strong); }
.onboarding-goal > span { grid-row: span 2; display: grid; place-items: center; width: 30px; aspect-ratio: 1; color: var(--gold-light); border: 1px solid rgba(189, 141, 67, .55); }
.onboarding-goal strong { font-size: var(--type-meta); font-weight: 500; }
.onboarding-goal small { color: var(--ink-3); font-size: var(--type-meta); line-height: 1.5; overflow-wrap: anywhere; }
.onboarding-goal.is-selected { border-color: var(--gold-light); background: rgba(189, 141, 67, .14); }
.primary-nav--cet .primary-nav__link { min-height: 54px; }
.page--cet, .page--cet-study { min-width: 0; }
.cet-level { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin: -16px 0 20px; color: var(--paper); }
.cet-level__switch { display: inline-flex; max-width: 100%; border: 1px solid rgba(238, 234, 224, .28); }
.cet-level__switch button { min-height: 40px; padding: 8px 16px; color: var(--ink-2); background: transparent; border: 0; }
.cet-level__switch button + button { border-left: 1px solid var(--rule-ink-strong); }
.cet-level__switch button.is-selected { color: var(--ink); background: var(--gold-light); }
.cet-facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--rule-ink-strong); border-bottom: 1px solid var(--rule-ink-strong); }
.cet-facts > div { display: grid; align-content: center; gap: 8px; min-width: 0; min-height: 83px; padding: 12px; border-right: 1px solid var(--rule-ink); }
.cet-facts > div:last-child { border-right: 0; }
.cet-facts span, .cet-today__copy > .section-kicker { color: var(--gold-light); font-size: var(--type-meta); }
.cet-facts strong { color: var(--paper); font-size: var(--type-small); font-weight: 500; overflow-wrap: anywhere; }
.cet-today { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 20px 0; padding: 24px 24px; color: var(--ink); background: var(--surface-card); border-left: 3px solid var(--red); }
.cet-today__copy { min-width: 0; }
.cet-today h2 { margin: 4px 0; font-family: var(--font-display); font-size: var(--type-title); font-weight: 500; overflow-wrap: anywhere; }
.cet-today p { max-width: 650px; margin: 0; color: var(--rock); font-size: var(--type-meta); line-height: 1.7; }
.cet-today .button { flex: 0 0 auto; }
.cet-sections { display: grid; grid-template-columns: minmax(210px, .75fr) minmax(0, 1.25fr); gap: 32px; padding: 16px 0 20px; border-bottom: 1px solid var(--rule-ink-strong); }
.cet-sections__heading h2 { margin: 12px 0 0; color: var(--paper); font-family: var(--font-display); font-size: var(--type-title); font-weight: 400; line-height: 1.3; }
.cet-sections__heading h2 em { color: var(--gold-light); font-style: normal; }
.cet-sections__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.cet-sections__list > div { display: grid; gap: 4px; min-width: 0; padding: 12px 0; border-bottom: 1px solid var(--rule-ink-soft); }
.cet-sections__list span { color: var(--red-light); font-size: var(--type-meta); }
.cet-sections__list strong { color: var(--paper); font-size: var(--type-meta); font-weight: 400; line-height: 1.55; overflow-wrap: anywhere; }
.cet-boundary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 20px; margin-top: 20px; }
.cet-boundary p, .cet-boundary small { grid-column: 1 / -1; margin: 0; color: var(--ink-3); font-size: var(--type-meta); line-height: 1.7; }
.cet-boundary a { display: inline-flex; align-items: center; gap: 4px; color: var(--gold-light); font-size: var(--type-meta); }
.cet-boundary small { color: var(--ink-3); }
.cet-session { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; padding: 20px 24px; color: var(--paper); background: rgba(13, 23, 26, .82); border-left: 2px solid var(--gold-light); }
.cet-session > div { min-width: 0; }
.cet-session h2 { margin: 4px 0; font-family: var(--font-display); font-size: var(--type-heading); font-weight: 400; overflow-wrap: anywhere; }
.cet-session p { margin: 0; color: var(--ink-2); font-size: var(--type-meta); line-height: 1.65; }
.cet-session .button { flex: 0 0 auto; }
.cet-session .button--ink { color: var(--ink); background: var(--gold-light); border-color: var(--gold-light); }
.cet-session .button--ink:hover { color: var(--invert-fg); background: var(--invert-bg); border-color: var(--invert-bg); }
.cet-practice { padding: 24px; color: var(--ink); background: var(--surface-card); }
.cet-practice__heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(13, 23, 26, .2); }
.cet-practice__heading h2 { margin: 4px 0 0; font-family: var(--font-display); font-size: var(--type-title); font-weight: 500; }
.cet-practice__heading > span { color: var(--rock); font-size: var(--type-meta); }
.cet-exercises { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.cet-exercise { display: grid; align-content: start; gap: 12px; min-width: 0; padding: 20px 0; border-bottom: 1px solid rgba(13, 23, 26, .16); }
.cet-exercise > summary { cursor: pointer; }
.cet-exercise > summary::marker { color: var(--red); }
.cet-exercise__body { display: grid; align-content: start; gap: 12px; min-width: 0; }
.cet-exercise__index { color: var(--red); font-size: var(--type-meta); }
.cet-exercise h3 { margin: 4px 0 8px; font-size: var(--type-subhead); font-weight: 600; }
.cet-exercise p { margin: 0; color: #394448; font-size: var(--type-meta); line-height: 1.75; overflow-wrap: anywhere; }
.cet-exercise .button { justify-self: start; }
.cet-practice .button--outline { color: var(--ink); background: transparent; border-color: rgba(13, 23, 26, .35); }
.cet-practice .button--outline:hover { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.cet-transcript summary { width: fit-content; color: #485357; font-size: var(--type-meta); cursor: pointer; }
.cet-transcript p { margin-top: 8px; padding-left: 12px; border-left: 2px solid var(--gold); }
.cet-choices { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.cet-choices legend { margin-bottom: 8px; color: var(--ink); font-size: var(--type-meta); font-weight: 600; }
.cet-choices label { display: flex; align-items: flex-start; gap: 8px; padding: 8px 8px; color: #293538; background: rgba(13, 23, 26, .04); border: 1px solid rgba(13, 23, 26, .12); font-size: var(--type-meta); line-height: 1.55; cursor: pointer; }
.cet-choices label:has(input:checked) { background: rgba(189, 141, 67, .15); border-color: rgba(169, 75, 64, .55); }
.cet-choices input { flex: 0 0 auto; margin: 0px 0 0; accent-color: var(--red); }
.cet-writing { display: grid; gap: 8px; color: #394448; font-size: var(--type-meta); }
.cet-writing textarea { width: 100%; min-width: 0; padding: 12px; color: var(--ink); background: var(--paper-light); border: 1px solid rgba(13, 23, 26, .24); resize: vertical; font: inherit; font-size: var(--type-body); line-height: 1.65; }
.cet-writing textarea:focus { outline: 2px solid rgba(169, 75, 64, .48); outline-offset: 1px; }
.cet-evidence { margin-top: 20px; }
.cet-evidence .button { margin-top: 16px; }
.mobile-primary-nav--cet { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .cet-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cet-facts > div:nth-child(3) { border-right: 0; }
  .cet-facts > div:nth-child(n + 4) { border-top: 1px solid var(--rule-ink); }
}

@media (max-width: 700px) {
  .onboarding-goals__choices { grid-template-columns: 1fr; }
  .onboarding-goal { grid-template-columns: 32px minmax(0, 1fr); }
  .cet-level { align-items: flex-start; flex-direction: column; }
  .cet-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cet-facts > div { min-height: 72px; border-top: 1px solid var(--rule-ink); }
  .cet-facts > div:nth-child(2n) { border-right: 0; }
  .cet-facts > div:nth-child(3) { border-right: 1px solid var(--rule-ink); }
  .cet-facts > div:nth-child(1), .cet-facts > div:nth-child(2) { border-top: 0; }
  .cet-today, .cet-session { align-items: flex-start; flex-direction: column; padding: 20px; }
  .cet-today .button, .cet-session .button { max-width: 100%; }
  .cet-sections { grid-template-columns: 1fr; gap: 8px; }
  .cet-sections__list { grid-template-columns: 1fr; }
  .cet-boundary { grid-template-columns: 1fr; }
  .cet-boundary p, .cet-boundary small { grid-column: 1; }
  .cet-practice { padding: 16px; }
  .cet-practice__heading { align-items: flex-start; flex-direction: column; }
  .cet-exercises { grid-template-columns: 1fr; }
}

.boot-state { display: grid; align-content: center; justify-items: center; gap: 16px; min-height: 100vh; min-height: 100dvh; padding: 24px; color: var(--paper); background: var(--ink); font-size: var(--type-small); text-align: center; }
.boot-state__mark { display: grid; place-items: center; width: 48px; height: 48px; color: var(--gold-light); border: 1px solid rgba(228, 189, 112, .56); font-family: var(--font-display); font-size: var(--type-heading); }
.boot-state__track { display: block; width: min(160px, 48vw); height: 2px; overflow: hidden; background: var(--wash-ink); }
.boot-state__track::after { display: block; width: 36%; height: 100%; background: var(--gold-light); content: ""; animation: boot-progress 1.2s ease-in-out infinite alternate; }
@keyframes boot-progress { from { transform: translateX(0); } to { transform: translateX(178%); } }
.onboarding-goal.is-selected { color: var(--ink); border-color: var(--gold-light); background: var(--gold-light); }
.onboarding-goal.is-selected > span { color: var(--ink); border-color: rgba(13, 23, 26, .42); }
.onboarding-goal.is-selected small { color: #34413f; }
.study-focus__title p, .study-action__heading p, .study-action__controls label, .study-action__controls .text-link, .evidence-standard a { color: #40504c; }
.study-action__controls .button--outline { color: var(--invert-fg); background: var(--invert-bg); border-color: rgba(13, 23, 26, .34); }
.study-action__controls .button--outline:hover { color: var(--paper); background: var(--ink); border-color: var(--ink); }
@media (pointer: coarse) {
  button[data-action] { min-width: 44px; min-height: 44px; }
  .study-focus a[data-route] { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
  .study-aside__tip a { min-height: 44px; }
  .knowledge-inspector__links button { min-width: 44px; min-height: 44px; }
  .study-action__controls .text-link { min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .boot-state__track::after { animation: none; }
}

/* ── 纸面作用域：容器内的文字必须换到浅底梯度 ─────────────────────
   实测方法：CDP 沿 DOM 逐层合成真实背景色后再算对比度（静态读 CSS 看不到
   变量与继承，会漏）。修前纸面上这些值全部不达标：
     --rock       #74807e  3.15:1   ← 全站引用 110 处
     --teal       #76a19d  2.20:1
     --red        #a94b40  4.29:1
     --gold-light #e4bd70  1.37:1（仅当文字用时）
     暖白 --paper 当文字用  1.08:1（「切换账号」按钮，几乎看不见）
   它们的原值都是为深墨底定的；而且在极深与极浅两种底上，不存在同一支颜色能
   同时通过 4.5:1。做法是利用自定义属性沿 DOM 级联的特性，只在纸面容器上
   重新绑定一次，容器内全部引用随之更新，不必逐条改规则。

   两个必须避开的坑（都是实测踩出来的）：
   1) --gold-light 同时被当背景色用（.button--primary 等 28 处），remap 它会
      把按钮底色一起改掉，所以它不在这里重绑定，只单独修作为文字用的两处；
   2) 纸面容器里可能嵌着深色子面板（.study-aside__tip 等），级联会漏进去，
      所以要在这类子面板上把深底梯度再声明回来。 */
.settings-account, .settings-panel, .settings-list,
.legal-document, .goal-selection, .study-focus, .assistant-dialog, .profile-card,
.bagua-field__center, .feature-directory .bagua-field__paper, .feature-directory .bagua-field__center,
.plan-head__progress, .plan-head__balance, .plan-day, .plan-empty, .memory-loop,
.companion-thinking, .map-node, .not-found-panel,
.knowledge-network__core, .knowledge-inspector,
.plan-horizon article, .route-adjustment-panel {
  --rock: var(--paper-3);   /* 3.15:1 -> 6.36:1 */
  --rock-light: var(--paper-2);
  --teal: #2f625e;          /* 2.20:1 -> 5.77:1 */
  --red: #9c4034;           /* 4.29:1 -> 5.47:1 */
}

/* 纸面容器内的深色子面板：把深底梯度声明回来，避免上面的级联漏进来 */
.study-focus .study-aside__tip,
.study-focus .study-aside__route,
.study-focus .knowledge-capture {
  --rock: #74807e;
  --rock-light: #aeb5ad;
  --teal: #76a19d;
  --red: #a94b40;
}

/* --gold-light 作为文字落在纸面上只有 1.37:1，单独修这两处 */
:is(.settings-account, .settings-panel, .settings-list, .legal-document,
    .study-focus, .assistant-dialog, .profile-card, .plan-day, .plan-empty,
    .memory-loop, .map-node, .not-found-panel, .knowledge-inspector,
    .route-adjustment-panel, .goal-selection) :is(.section-kicker, .text-link) {
  color: var(--gold-on-paper); /* 5.22:1 */
}

/* 深色中间调面板：--rock #74807e 在这类底（rgb 20,36,42 左右）上只有 3.9:1，
   换成为深底定的 --ink-3（5.73:1）。注意 .settings-service 是深底而非纸面，
   不要把它放进上面的纸面作用域。 */
.settings-service,
.knowledge-capture,
.route-empty,
.route-draft,
.knowledge-catalog,
.knowledge-materials { --rock: var(--ink-3); }

/* 描边按钮：深底上是暖白描边字，落进纸面容器就与底色同明度。
   --paper 本身不能改（它就是纸面底色），所以单列一条。 */
:is(.settings-account, .settings-panel, .settings-list,
    .legal-document, .goal-selection, .study-focus, .assistant-dialog, .profile-card,
    .bagua-field__center, .plan-day, .plan-empty, .memory-loop, .map-node,
    .not-found-panel, .knowledge-network__core, .knowledge-inspector,
    .route-adjustment-panel) .button--outline {
  color: var(--paper-1);
  border-color: var(--paper-4);
}

/* 纸面上的焦点环：深底用的浅金在纸面上只有 1.37:1，键盘用户看不出焦点在哪 */
:is(.settings-account, .settings-panel, .settings-list,
    .legal-document, .goal-selection, .study-focus, .assistant-dialog, .profile-card,
    .bagua-field__center, .plan-day, .plan-empty, .memory-loop, .map-node,
    .not-found-panel, .knowledge-network__core, .knowledge-inspector,
    .route-adjustment-panel) :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: var(--gold-on-paper);
}

/* ── 右栏两个面板改纸面 ─────────────────────────────────────────
   原先：水墨底 + 纸面主卡 + 两个深色玻璃面板 + 纹理 = 4 种表面语言。
   现在：水墨底 + 纸面 = 2 种。

   为什么不是把整站翻转成纸面当底：那样确实可读性更高，但会失去水墨这个身份，
   而且有 58 处写死的深色背景会一并压坏（设置页的「服务状态」面板就是活例子，
   文字会变成深字压深底、完全读不出来）。「纸面压在墨底上」本来就是这套设计
   已有的做法 —— 主卡就是纸面 —— 所以这里只需要把右栏纳入同一套语言。

   实测收益：行者状态面板与背景的对比度从 1.03:1 提升到约 13:1
   （纸面在墨底上天然高对比，不再依赖半透明填充去"勉强分离"）。

   代价：面板内部必须自带纸面文字阶 —— 因为 --ink-2 这类令牌在墨底主题下
   是"深底上的浅字"，直接放进纸面会不可读。所以这个块显式给定面板内的文字色。 */
.primary-nav, .status-axis {
  background: linear-gradient(180deg, rgba(244, 240, 232, .97), rgba(238, 234, 224, .94));
  border: 1px solid rgba(27, 37, 40, .18);
  border-left: 2px solid rgba(125, 90, 28, .55);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .34);
  backdrop-filter: none;
  color: var(--paper-1);
}
.primary-nav__link { color: rgba(27, 37, 40, .82); border-left-color: transparent; }
.primary-nav__link .icon { color: rgba(27, 37, 40, .6); filter: none; }
.primary-nav__link[aria-current="page"], .primary-nav__link.is-active {
  color: var(--paper-1);
  background: rgba(125, 90, 28, .12);
  border-left-color: rgba(125, 90, 28, .7);
}
/* 面板内文字阶：整体切到纸面用的深色系，金色也换成纸面上的金（5.22:1） */
.status-axis, .status-axis span, .status-axis b, .status-axis strong,
.status-axis i, .status-axis div, .status-axis p, .status-axis small { color: var(--paper-2); }
.status-axis__topline, .status-axis__legend { color: var(--paper-3); }
.status-axis__height strong, .status-axis__lines b, .status-axis__demo,
.status-axis__lines .gua-mark, .status-axis__next span { color: var(--gold-on-paper); }
.status-axis__track, .status-axis__lines i { background: rgba(27, 37, 40, .14); }
.status-axis__fill, .status-axis__lines i::after { background: var(--gold-on-paper); }
.status-axis__pin { background: var(--gold-on-paper); box-shadow: 0 0 0 2px rgba(125, 90, 28, .2); }
.status-axis__balance, .status-axis__next { border-top-color: rgba(27, 37, 40, .16); }
.status-axis .balance-wheel, .status-axis .balance-wheel b { color: var(--gold-on-paper); }

/* ── 首页 hero：去掉 screen 双重曝光 ───────────────────────────
   .home-hero__image 原先是「第二张插画 + mix-blend-mode: screen + opacity .78」，
   叠在 .world-stage 的全幅水墨之上。screen 是提亮混合，等于给画面加了一层奶白，
   画面因此发浑 —— 这也是首页比其它页都"脏"的原因。
   去掉双重曝光后插画本身的结构（右侧那座塔）才真正看得清。 */
.home-hero__image {
  mix-blend-mode: normal;
  opacity: 1;
  background-image: var(--image);
}
.home-hero::before {
  background: linear-gradient(90deg, rgba(7, 17, 20, .82), rgba(7, 17, 20, .18) 58%, transparent 78%);
}

/* ── 排版微调 ───────────────────────────────────────────────────
   三个都是可测的问题，不是感觉：

   1) 正文用 --type-meta（12px）。这一档的本意是"时间/状态"的绝对下限，
      却被拿去排段落。12px 中文持续阅读偏小，且与 14px 的副标题几乎无差别，
      层级因此塌掉。
   2) 行长越界。实测 17 个正文段落里 14 个不在 30–40 字区间，
      最宽的一句是复盘页的空状态文案：92 字/行（1102px）。超过 40 字时
      眼睛回行找不到下一行开头，这是可测的阅读代价。
   3) <small> 没有基线规则。CSS 里一个 10px 都没有，但设置页表单里
      3 个 <small> 渲染成 10px —— 因为没有任何规则覆盖它们，
      于是吃到了浏览器默认的 font-size: smaller（12 × 0.833 = 10px）。

   行长用 em 而不是 px：em 随字号缩放，所以同一套规则在 12/14/16px 下
   都是同样的字数/行，不会因为某处字号变了就失衡。 */

/* 1. <small> 基线 —— 兜住所有没有专门规则的 <small>。
      已有的类作用域规则（.goal-option small 等）优先级更高，不受影响；
      打印样式里的 9pt 也因为是更具体的选择器而保留。 */
.app-shell small {
  font-size: var(--type-meta);
  line-height: 1.6;
}

/* 2. 正文从 meta(12px) 提到 small(14px)，同时把行长收到 36 字 */
.study-focus__title p,
.study-action__heading p,
.memory-loop__empty p {
  max-width: 36em;
  font-size: var(--type-small);
  line-height: var(--lh-body);
}

/* 3. 页首副标题：600px 固定宽改成 36 字；行高 1.9 对 14px 太松，收到 1.75 */
.page-intro p {
  max-width: 36em;
  line-height: 1.75;
}

/* 4. 表单里的助手文案：保持 meta 档（它确实是状态说明），只收行长与行高 */
.material-photo__notice,
.material-photo__uncertain {
  max-width: 32em;
  line-height: 1.6;
}

/* 5. 两处漏网的宽正文。
      它们的 12px 来自某个分组选择器（形如 a p, b p, c p { ... }），
      与其继续追查是哪一条命中，不如按元素显式给定 —— 追加在文件末尾，
      层叠上必然生效，也便于以后一眼看到这里有例外。
      实测：隐私条款 57 字/行、知识库说明 52 字/行，都超出 30–40 区间。 */
/* 注意：必须写成 .legal-document section p。既有的 .legal-document section p
   优先级是 (0,1,2)，只写 .legal-document p (0,1,1) 会被它压过 —— 这就是
   上一版改了却看不出效果的原因。同优先级 + 位置更靠后 才生效。 */
.legal-document p,
.legal-document section p,
.legal-document li {
  max-width: 36em;
  font-size: var(--type-small);
  line-height: var(--lh-body);
}
.knowledge-workbench__head p {
  max-width: 36em;
  font-size: var(--type-small);
  line-height: 1.7;
}

/* ── 空状态：行者状态面板不再摆读数 ─────────────────────────────
   新用户在首屏看到的是「0m / 阴阳平衡 0 / 0 / 专注线 0% / 回息线 0% /
   下一处营地 · 待建立」—— 十个零铺成一面墙。零不是信息，是打击。
   没有进度时改为说明"这里将来会记录什么"，并给一个下一步入口。 */
.status-axis--empty {
  display: grid;
  gap: 12px;
}
.status-axis--empty .status-axis__empty-copy {
  max-width: 26em;
  margin: 0;
  color: var(--paper-2);
  font-size: var(--type-meta);
  line-height: 1.7;
}
.status-axis--empty .status-axis__empty-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--gold-on-paper);
  font-size: var(--type-meta);
}
.status-axis--empty .status-axis__empty-link .icon,
.status-axis--empty .status-axis__empty-link svg {
  width: 14px;
  height: 14px;
}

/* ── 工作页的页首标题收一档 ───────────────────────────────────
   实测 .page-intro h1 是 72px，而它下面紧跟的正文是 14px —— 5.1 倍的字号落差，
   于是用户先看到口号，再看到要做的事。工作页的标题是"页面标签"，不是 hero，
   收到 --type-hero(56px) 更合比例，也让卡片更早进入首屏。

   只覆盖 .page-intro，不动 --type-hero-md 令牌本身 —— 登录页和首页 hero
   也用这个令牌，那两处的 72px 是对的。 */
.page-intro h1 {
  font-size: var(--type-hero);
  margin: 12px 0 10px;
}
.page-intro {
  margin-bottom: 36px;
}

/* ── 引导页：纸色底上的颜色必须换到纸面梯度 ─────────────────────
   /onboarding 是全站唯一把世界底冲淡成米色的页面，所以它的组件实际落在
   纸色底上，但仍然引用深底调色板。实测 10 个元素不达标，其中 4 个低到
   几乎不可见：

     滑杆刻度「10 分钟」      1.05:1   暖白 .58 压在纸上，等于看不见
     「入山引导 · 15 秒」     1.61:1   深底金当文字
     「25 分钟」当前值        1.61:1   同上
     滑杆数值 output          1.61:1   同上
     表单标签 / 说明文字      3.09 / 3.71:1
     导航注记                 3.73:1
     右上状态                 4.08:1
     页首红题                 4.21:1

   成因与此前"纸面作用域"完全相同：极深与极浅两种底上不存在同一支颜色，
   必须按底换梯度。这里按引导页作用域整体换，而不是逐条打补丁。

   注意 --gold-light 不在这里重绑定 —— 它同时被当按钮底色用（28 处），
   remap 会把底色一起改掉，所以只单独修"作文字"的这几处。 */
.page--onboarding {
  --rock: var(--paper-3);
  --rock-light: var(--paper-2);
  --teal: #2f625e;
  --red: #9c4034;
}

/* 金色作文字：纸底上用纸面金 5.22:1 */
.page--onboarding :is(.section-kicker, .onboarding-time strong, .onboarding-time output) {
  color: var(--gold-on-paper);
}

/* 滑杆两端的刻度：原为暖白 .58，纸面上只有 1.05:1 */
.page--onboarding .onboarding-time__scale span {
  color: var(--paper-3);
}

/* 右上角连接状态与页首导航注记：alpha 太浅（4.08 / 3.73:1） */
.page--onboarding .connection {
  color: var(--paper-2);
}
.page--onboarding .onboarding-nav-note {
  color: var(--paper-3);
}

/* 目标卡片的说明（深色底）：暖白 .58 在中深灰上只有 3.53:1，提到 .78 */
.page--onboarding .onboarding-goal small,
.page--onboarding .goal-option small {
  color: rgba(238, 234, 224, .78);
}

/* 引导页修正的两处收尾（上面那一版自己带出来的问题） */

/* 1) 选中的目标卡片是金色底，文字必须是深色。
      上一版把 .onboarding-goal small 统一提到暖白 .78，在未选中的深色卡上是对的，
      但选中的卡是 rgb(228,189,112) 金色底 —— 暖白压金只有 1.36:1。 */
.page--onboarding .onboarding-goal.is-selected small,
.page--onboarding .onboarding-goal.is-selected strong,
.page--onboarding .goal-option.is-selected small,
.page--onboarding .goal-option.is-selected strong {
  color: rgba(13, 23, 26, .78);
}

/* 2) .connection 在顶栏里，不在 .page--onboarding 之内，上一版的作用域没覆盖到。
      它落在 app-shell 的纸色底上，实测 4.08:1。 */
.app-shell--onboarding .connection {
  color: var(--paper-2);
}

/* ── 纸面作用域补漏：三处没被覆盖到的纸面容器 ───────────────────
   这是"两种底上不存在同一支颜色"的第三批实例。
   判定依据是实测的合成背景（alpha 为实色，不是渐变，所以这些是真实不达标）：

     .memory-loop em        1.37:1   深底金 #e4bd70 当文字压在浅纸上
     .review-chain 内部     3.44:1   --rock #74807e 在 rgb(238,235,229) 上
     .evidence-review__note 3.73:1   同上

   .memory-loop 本身已在作用域清单里，但 em 用的是 --gold-light（未重绑，
   因为它同时是按钮底色），所以金色文字要单独修。
   .review-chain 与 .evidence-review 则是整个容器都漏在清单外。 */
.review-chain,
.evidence-review {
  --rock: var(--paper-3);
  --rock-light: var(--paper-2);
  --teal: #2f625e;
  --red: #9c4034;
}

:is(.memory-loop, .review-chain, .evidence-review) :is(em, .section-kicker) {
  color: var(--gold-on-paper);
}

/* ── /cet 的三处 ────────────────────────────────────────────────
   1) .cet-sections__list span 引用了一个从未定义的令牌 --red-light。
      声明失效后色值回落到继承的 #0d171a，正好压在墨底上 —— 实测 1:1，
      也就是那行「01 / 听力理解」完全不可见。全站扫描过：10 个未定义令牌里
      9 个是有意由 JS 内联设置的（--image / --progress 等），只有这个是实打实的错。
   2) .cet-today 是浅色卡（--surface-card），但没进纸面作用域清单，
      所以 --rock 还是深底值：说明文字 3.41:1。
   3) .cet-today__copy > .section-kicker 与深底的 .cet-facts span 写在同一条规则里，
      金色被一起带进了浅卡：1.48:1。 */
.cet-today,
.cet-practice {
  --rock: var(--paper-3);
  --rock-light: var(--paper-2);
  --teal: #2f625e;
  --red: #9c4034;
}

.cet-today__copy > .section-kicker {
  color: var(--gold-on-paper);
}

/* 深墨底上的朱红：--red #a94b40 在墨底上只有约 3.4:1，12px 不够用 */
.cet-sections__list span {
  color: var(--red-on-ink);
}

/* ── 中文排版的基础能力 ─────────────────────────────────────────
   此前本站一条都没有：line-break / text-autospace / text-spacing-trim
   在这个文件里搜索均为 0 处。对一个中文产品，这是专业读者能看出来的缺口。

   依据 W3C《中文排版需求》(CLReq) 与 CSS Text Level 4。这里其实是三件
   不同的事，不能用一个属性混过去：

     避头尾   line-break: strict     不让 ，。）」】 落到行首
     混排间距 text-autospace         汉字与拉丁字母/数字之间自动留白
     标点挤压 text-spacing-trim      相邻标点的空隙按语言习惯修整

   三者都只影响排版渲染，不向 DOM 插入字符 —— 复制文本、搜索、字数统计
   都与改动前完全一致。这一点很重要：手插空格或用负 margin 假装挤压，
   会把可复制文本和换行计算一起弄坏。

   本站混排极多（CET-4 / 8,848m / 25 分钟 / JPEG、PNG / AI 引路），
   所以 text-autospace 的实际收益很明显。 */

:lang(zh), :lang(zh-CN), :lang(zh-Hans) {
  line-break: strict;
  word-break: normal;
}

/* 中西文混排间距。
   注意：@supports 里写的是 ideograph-alpha，而不是 normal —— 因为本机
   Edge/Chromium 155 的实测结果是只接受 normal / no-autospace，
   ideograph-alpha 与 ideograph-numeric 都返回不支持（CSS.supports 逐值验证过）。
   写 normal 会让条件永远成立、声明却什么也不做，看起来像生效了。
   这样写则在支持该值的引擎上才启用，其余保持现状。 */
@supports (text-autospace: ideograph-alpha) {
  :lang(zh), :lang(zh-CN), :lang(zh-Hans) {
    text-autospace: ideograph-alpha ideograph-numeric;
  }
}

/* 标点挤压只作用在成段文本上。不放到代码、标识符和按钮上 ——
   那些地方的标点是内容的一部分，不该被挤。
   值用 space-first 而不是 trim-auto：实测本机引擎两者分别返回可用/不可用。 */
@supports (text-spacing-trim: space-first) {
  :is(p, li, blockquote, dd, figcaption) {
    text-spacing-trim: space-first;
  }
}

/* ── 最后一处对比度 0.1 的缺口 ─────────────────────────────────
   /route 上 12px 的 small 用 --rock (#74807e) 压在墨底 (#0c181c) 上，
   实测 4.4:1，门槛 4.5:1 —— 只差 0.1。

   选择器必须是 .route-form label small：那个 small 位于周计划时长滑杆的
   label 里，而 .route-form 并不在 .page--route 的子树下，所以先写的
   .page--route small 一条都没命中（用 CSS.getMatchedStylesForNode 问出来的）。

   修法没有动 --rock 本身：那个值被引用 110 次，纸面作用域里还要靠它，
   为一个 12px 的次要标签改全局调色板不划算。这里只把这一处抬到
   --rock-light，局部解决。 */
.route-form label small {
  color: var(--rock-light);
}