: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: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  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:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; 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, .nav-rail, .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: "Noto Serif SC", "STKaiti", serif; font-size: 24px; line-height: .75; letter-spacing: 4px; text-align: center; }
.world-stage__seal span { font-size: 15px; }
.world-stage__coordinates { position: absolute; z-index: 4; left: 145px; bottom: 28px; color: rgba(238, 234, 224, .4); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 9px; line-height: 1.8; letter-spacing: .1em; }
.world-stage__coordinates span { color: rgba(228, 189, 112, .55); }
.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; }
.app-shell[data-motion="off"] .feature-nav-trigger__directions, .app-shell[data-motion="off"] .feature-nav-trigger__core { animation: none; }

/* The navigation begins as a seal in the upper-left corner and expands into a full-screen compass. */
.feature-nav-trigger { position: fixed; z-index: 8; top: 12px; left: 17px; display: grid; place-items: center; width: 78px; height: 78px; padding: 0; color: var(--ink); background: rgba(247, 244, 237, .94); border: 1px solid rgba(13, 23, 26, .42); border-radius: 50%; box-shadow: 0 10px 30px rgba(0, 5, 7, .22); transition: color var(--fast) ease, background var(--fast) ease, transform var(--fast) var(--ease), box-shadow var(--fast) ease; }
.feature-nav-trigger:hover, .feature-nav-trigger[aria-expanded="true"] { color: var(--ink); background: #fffdf7; transform: translateY(-2px); box-shadow: 0 12px 34px rgba(0, 5, 7, .3); }
.feature-nav-trigger__orbit { position: absolute; inset: 5px; border: 1px solid rgba(13, 23, 26, .24); border-radius: 50%; transition: transform var(--medium) var(--ease), border-color var(--fast) ease; }
.feature-nav-trigger:hover .feature-nav-trigger__orbit, .feature-nav-trigger[aria-expanded="true"] .feature-nav-trigger__orbit { transform: rotate(45deg) scale(.88); border-color: rgba(13, 23, 26, .62); }
.feature-nav-trigger__dial { position: relative; width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid rgba(13, 23, 26, .22); border-radius: 50%; background: rgba(247, 244, 237, .72); }
.feature-nav-trigger__directions { position: absolute; inset: 0; animation: feature-nav-trigger-rotate 36s linear infinite; }
.feature-nav-trigger__direction { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 14px; height: 14px; color: rgba(13, 23, 26, .78); font-family: "Noto Serif SC", serif; font-size: 10px; line-height: 1; transform: translate(-50%, -50%) rotate(var(--trigger-angle)) translateY(-24px); }
.feature-nav-trigger__direction--north { --trigger-angle: 0deg; }
.feature-nav-trigger__direction--northeast { --trigger-angle: 45deg; }
.feature-nav-trigger__direction--east { --trigger-angle: 90deg; }
.feature-nav-trigger__direction--southeast { --trigger-angle: 135deg; }
.feature-nav-trigger__direction--south { --trigger-angle: 180deg; }
.feature-nav-trigger__direction--southwest { --trigger-angle: 225deg; }
.feature-nav-trigger__direction--west { --trigger-angle: 270deg; }
.feature-nav-trigger__direction--northwest { --trigger-angle: 315deg; }
.feature-nav-trigger__core { position: relative; z-index: 1; display: grid; place-items: center; width: 31px; height: 31px; color: #101719; background: #fffdf7; border: 1px solid rgba(13, 23, 26, .46); border-radius: 50%; box-shadow: 0 2px 8px rgba(13, 23, 26, .16); animation: feature-nav-trigger-breathe 9s ease-in-out infinite; }
.feature-nav-trigger__core .gua-mark { position: relative; color: #101719; font-family: "Noto Serif SC", serif; font-size: 28px; line-height: 1; filter: grayscale(1); }
.feature-nav-trigger__label { position: absolute; top: 79px; left: 50%; color: rgba(238, 234, 224, .68); font-size: 8px; letter-spacing: .12em; line-height: 1; opacity: .86; transform: translateX(-50%); white-space: nowrap; transition: color var(--fast) ease, opacity var(--fast) ease; }
.feature-nav-trigger:hover .feature-nav-trigger__label, .feature-nav-trigger[aria-expanded="true"] .feature-nav-trigger__label { color: var(--gold-light); opacity: 1; }
.feature-nav-overlay { position: fixed; inset: 0; z-index: 7; overflow: auto; color: var(--paper); background: var(--ink); transform-origin: 51px 48px; transform: scale(.045); opacity: 0; visibility: hidden; transition: transform 520ms var(--ease), opacity 360ms ease, visibility 0s linear 520ms; }
.feature-nav-overlay[hidden] { display: none; }
.feature-nav-overlay.is-open { transform: scale(1); opacity: 1; visibility: visible; transition-delay: 0s; }
.feature-nav-overlay__inner { position: relative; min-height: 100vh; display: grid; place-items: center; overflow: hidden; padding: 105px 85px 75px; isolation: isolate; }
.feature-nav-overlay__inner::after { content: ""; position: absolute; z-index: -2; inset: 0; background-image: linear-gradient(90deg, rgba(5, 14, 17, .88) 0%, rgba(5, 14, 17, .52) 30%, rgba(5, 14, 17, .48) 70%, rgba(5, 14, 17, .9) 100%), linear-gradient(0deg, rgba(5, 14, 17, .78), rgba(5, 14, 17, .25) 50%, rgba(5, 14, 17, .76)), var(--bagua-base-image); background-position: center; background-size: cover; filter: grayscale(.8) contrast(1.13) brightness(.72); opacity: .72; transform: scale(1.06); }
.feature-nav-overlay__inner::before { content: "八方"; position: absolute; z-index: -1; left: 4vw; bottom: -65px; color: rgba(228, 189, 112, .045); font-family: "Noto Serif SC", serif; font-size: min(28vw, 360px); line-height: 1; pointer-events: none; }
.feature-nav-overlay__topline { position: absolute; z-index: 2; top: 31px; left: 104px; display: grid; gap: 5px; }
.feature-nav-overlay__topline span { color: var(--gold-light); font-family: "Noto Serif SC", serif; font-size: 17px; }
.feature-nav-overlay__topline small { color: rgba(238, 234, 224, .44); font-size: 9px; }
.feature-nav-overlay__close { position: absolute; z-index: 3; top: 25px; right: 28px; display: grid; place-items: center; width: 42px; height: 42px; color: var(--paper); background: transparent; border: 1px solid rgba(238, 234, 224, .2); transition: color var(--fast) ease, background var(--fast) ease, transform var(--fast) var(--ease); }
.feature-nav-overlay__close:hover { color: var(--ink); background: var(--gold-light); transform: rotate(90deg); }
.feature-nav-dial { position: relative; width: min(720px, 72vw, 72vh); aspect-ratio: 1; display: grid; place-items: center; isolation: isolate; }
.feature-nav-dial__ink, .feature-nav-dial__halo { position: absolute; left: 50%; top: 50%; width: 88%; height: 88%; border-radius: 50%; pointer-events: none; }
.feature-nav-dial__ink { z-index: -2; background-image: var(--bagua-core-image); background-position: center; background-size: 100% auto; background-repeat: no-repeat; filter: grayscale(1) contrast(1.18) invert(1); mix-blend-mode: screen; opacity: .7; transform: translate(-50%, -50%) scale(1.08); animation: feature-nav-ink-breathe 10s ease-in-out infinite; }
.feature-nav-dial__halo { z-index: -3; background: radial-gradient(circle, rgba(224, 188, 111, .22) 0%, rgba(169, 75, 64, .1) 35%, transparent 69%); filter: blur(18px); opacity: .62; animation: feature-nav-halo-pulse 7s ease-in-out infinite; }
.feature-nav-dial__ring { position: absolute; left: 50%; top: 50%; aspect-ratio: 1; border: 1px solid rgba(228, 189, 112, .32); border-radius: 50%; transform: translate(-50%, -50%) rotate(22deg); }
.feature-nav-dial__ring--outer { width: 96%; }
.feature-nav-dial__ring--inner { width: 63%; border-color: rgba(238, 234, 224, .18); transform: translate(-50%, -50%) rotate(-34deg); }
.feature-nav-dial__axis { position: absolute; left: 50%; top: 50%; background: rgba(238, 234, 224, .18); }
.feature-nav-dial__axis--horizontal { width: 96%; height: 1px; transform: translate(-50%, -50%); }
.feature-nav-dial__axis--vertical { width: 1px; height: 96%; transform: translate(-50%, -50%); }
.feature-nav-center { position: absolute; z-index: 2; left: 50%; top: 50%; display: grid; place-items: center; align-content: center; width: 154px; height: 154px; color: var(--ink); background: rgba(238, 234, 224, .94); border: 1px solid var(--gold-light); border-radius: 50%; transform: translate(-50%, -50%); text-align: center; box-shadow: 0 0 0 10px rgba(228, 189, 112, .08), 0 18px 44px rgba(0, 0, 0, .28); transition: color var(--fast) ease, background var(--fast) ease, transform var(--fast) var(--ease); }
.feature-nav-center::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(169, 75, 64, .42); border-radius: 50%; }
.feature-nav-center:hover, .feature-nav-center.is-active { color: var(--paper); background: var(--red); transform: translate(-50%, -50%) scale(1.05); }
.feature-nav-center strong, .feature-nav-center span, .feature-nav-center small { position: relative; }
.feature-nav-center strong { color: var(--red); font-family: "Noto Serif SC", serif; font-size: 37px; line-height: 1; }
.feature-nav-center:hover strong, .feature-nav-center.is-active strong { color: var(--gold-light); }
.feature-nav-center span { margin-top: 7px; font-family: "Noto Serif SC", serif; font-size: 13px; }
.feature-nav-center small { margin-top: 4px; color: var(--rock); font-size: 8px; }
.feature-nav-center:hover small, .feature-nav-center.is-active small { color: rgba(238, 234, 224, .65); }
.feature-nav-node { position: absolute; z-index: 2; display: grid; grid-template-columns: 33px minmax(0, 1fr); align-items: center; gap: 8px; width: 148px; min-height: 72px; padding: 10px 12px; color: var(--paper); background: rgba(30, 58, 66, .86); border: 1px solid rgba(238, 234, 224, .22); text-align: left; transition: color var(--fast) ease, background var(--fast) ease, border-color var(--fast) ease, transform var(--fast) var(--ease); }
.feature-nav-node:hover, .feature-nav-node.is-active { color: var(--ink); background: var(--gold-light); border-color: var(--gold-light); box-shadow: 0 12px 28px rgba(0, 0, 0, .22); }
.feature-nav-node__orbit { position: absolute; inset: 4px; border: 1px solid transparent; pointer-events: none; transition: border-color var(--fast) ease; }
.feature-nav-node:hover .feature-nav-node__orbit, .feature-nav-node.is-active .feature-nav-node__orbit { border-color: rgba(13, 23, 26, .22); }
.feature-nav-node__gua { display: grid; place-items: center; width: 31px; height: 31px; color: var(--gold-light); border: 1px solid currentColor; font-family: "Noto Serif SC", serif; font-size: 16px; }
.feature-nav-node:hover .feature-nav-node__gua, .feature-nav-node.is-active .feature-nav-node__gua { color: var(--red); }
.feature-nav-node__label { font-family: "Noto Serif SC", serif; font-size: 14px; font-weight: 500; }
.feature-nav-node small { grid-column: 2; color: rgba(238, 234, 224, .48); font-size: 8px; }
.feature-nav-node:hover small, .feature-nav-node.is-active small { color: rgba(13, 23, 26, .58); }
.feature-nav-node--north { left: 50%; top: -2%; transform: translateX(-50%); }
.feature-nav-node--northeast { right: -1%; top: 16%; }
.feature-nav-node--east { right: -7%; top: 50%; transform: translateY(-50%); }
.feature-nav-node--southeast { right: -1%; bottom: 16%; }
.feature-nav-node--south { left: 50%; bottom: -2%; transform: translateX(-50%); }
.feature-nav-node--southwest { left: -1%; bottom: 16%; }
.feature-nav-node--west { left: -7%; top: 50%; transform: translateY(-50%); }
.feature-nav-node--northwest { left: -1%; top: 16%; }
.feature-nav-node--north:hover, .feature-nav-node--north.is-active, .feature-nav-node--south:hover, .feature-nav-node--south.is-active { transform: translateX(-50%) translateY(-4px); }
.feature-nav-node--east:hover, .feature-nav-node--east.is-active, .feature-nav-node--west:hover, .feature-nav-node--west.is-active { transform: translateY(-50%) translateX(4px); }
.feature-nav-overlay__footer { position: absolute; right: 28px; bottom: 22px; left: 104px; display: flex; justify-content: space-between; align-items: center; color: rgba(238, 234, 224, .4); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 8px; letter-spacing: .1em; }
@keyframes feature-nav-ink-breathe { 0%, 100% { transform: translate(-50%, -50%) scale(1.08) rotate(-1deg); opacity: .62; } 50% { transform: translate(-50%, -50%) scale(1.13) rotate(1deg); opacity: .78; } }
@keyframes feature-nav-halo-pulse { 0%, 100% { transform: translate(-50%, -50%) scale(.96); opacity: .42; } 50% { transform: translate(-50%, -50%) scale(1.04); opacity: .72; } }
@keyframes feature-nav-trigger-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes feature-nav-trigger-breathe { 0%, 100% { transform: scale(.96); box-shadow: 0 2px 8px rgba(13, 23, 26, .14); } 50% { transform: scale(1.04); box-shadow: 0 3px 12px rgba(13, 23, 26, .22); } }

.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; } }

/* 八方 navigation */
.nav-rail { position: fixed; left: 0; top: 0; bottom: 0; width: 118px; display: flex; flex-direction: column; align-items: center; padding: 24px 10px 20px; color: rgba(238, 234, 224, .82); background: rgba(8, 18, 21, .72); border-right: 1px solid rgba(238, 234, 224, .15); }
.brand-seal { position: relative; display: grid; place-items: center; width: 52px; height: 62px; color: var(--gold-light); border: 1px solid rgba(228, 189, 112, .68); font-family: "Noto Serif SC", "STKaiti", serif; font-size: 24px; line-height: .72; transition: background var(--fast) ease, transform var(--fast) var(--ease); }
.brand-seal::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(228, 189, 112, .2); }
.brand-seal:hover { background: rgba(228, 189, 112, .11); transform: translateY(-2px); }
.brand-seal small { font-size: 14px; }
.nav-rail__caption { margin: 28px 0 12px; color: rgba(238, 234, 224, .44); font-size: 9px; letter-spacing: .26em; writing-mode: vertical-rl; }
.nav-dial { position: relative; width: 100px; height: 402px; display: grid; place-items: center; }
.nav-dial::before { content: ""; position: absolute; width: 66px; height: 66px; border: 1px solid rgba(228, 189, 112, .28); border-radius: 50%; transition: transform var(--medium) var(--ease), border-color var(--fast) ease; }
.nav-dial::after { content: "☯"; position: absolute; color: rgba(228, 189, 112, .8); font-family: "Noto Serif SC", serif; font-size: 21px; transition: transform var(--medium) var(--ease); }
.nav-dial__toggle { position: absolute; z-index: 3; top: 168px; left: 31px; display: grid; place-items: center; width: 38px; height: 38px; color: var(--gold-light); background: rgba(8, 18, 21, .28); border: 1px solid transparent; }
.nav-dial__toggle:hover { border-color: rgba(228, 189, 112, .5); }
.nav-dial__line { position: absolute; background: rgba(238, 234, 224, .15); }
.nav-dial__line--h { width: 94px; height: 1px; }
.nav-dial__line--v { width: 1px; height: 354px; }
.nav-node { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; color: rgba(238, 234, 224, .54); transition: color var(--fast) ease, transform var(--fast) var(--ease); }
.nav-node:hover, .nav-node.is-active { color: var(--gold-light); transform: scale(1.08); }
.nav-node__orbit { position: absolute; inset: 3px; border: 1px solid transparent; border-radius: 50%; transition: border-color var(--fast) ease, box-shadow var(--fast) ease; }
.nav-node:hover .nav-node__orbit, .nav-node.is-active .nav-node__orbit { border-color: rgba(228, 189, 112, .72); box-shadow: 0 0 0 5px rgba(228, 189, 112, .06); }
.nav-node .gua-mark { font-size: 17px; }
.nav-node__label { position: absolute; top: 53px; white-space: nowrap; color: var(--gold-light); font-size: 10px; letter-spacing: .08em; opacity: 0; transform: translateY(-4px); transition: opacity var(--fast) ease, transform var(--fast) ease; }
.nav-node:hover .nav-node__label, .nav-node.is-active .nav-node__label, .nav-rail.is-dial-open .nav-node__label { opacity: 1; transform: translateY(0); }
.nav-node--center { top: 176px; left: 25px; }
.nav-node--north { top: 13px; left: 25px; }
.nav-node--northeast { top: 88px; right: -4px; }
.nav-node--east { top: 176px; right: -4px; }
.nav-node--southeast { bottom: -2px; right: -4px; }
.nav-node--south { bottom: -2px; left: 25px; }
.nav-node--southwest { bottom: -2px; left: -4px; }
.nav-node--west { top: 176px; left: -4px; }
.nav-node--northwest { top: 88px; left: -4px; }
.nav-rail.is-dial-open .nav-dial::before { transform: scale(1.26); border-color: rgba(228, 189, 112, .55); }
.nav-rail.is-dial-open .nav-dial::after { transform: rotate(180deg); }
.nav-rail__bottom { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: auto; gap: 5px; }
.nav-rail__weather { color: rgba(238, 234, 224, .45); font-size: 9px; line-height: 1.8; letter-spacing: .08em; }
.nav-rail__weather b { color: var(--gold-light); font-weight: 500; }
.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: "Noto Serif SC", "STKaiti", serif; }

/* top bar and pages */
.topbar { height: 82px; display: flex; align-items: center; justify-content: space-between; padding: 0 52px 0 110px; color: rgba(238, 234, 224, .82); border-bottom: 1px solid rgba(238, 234, 224, .14); }
.topbar__chapter { display: flex; align-items: center; gap: 14px; }
.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: "Noto Serif SC", serif; font-size: 15px; }
.topbar__chapter > div { display: grid; gap: 3px; }
.topbar__eyebrow { color: rgba(238, 234, 224, .44); font-size: 10px; letter-spacing: .14em; }
.topbar__title { color: var(--gold-light); font-family: "Noto Serif SC", "STKaiti", serif; font-size: 19px; }
.topbar__right { display: flex; align-items: center; gap: 19px; }
.connection { color: rgba(238, 234, 224, .44); font-size: 10px; }
.connection i, .online-dot { display: inline-block; width: 6px; height: 6px; margin-right: 6px; background: var(--gold-light); border-radius: 50%; box-shadow: 0 0 0 4px rgba(228, 189, 112, .1); }
.topbar__icon { color: rgba(238, 234, 224, .55); 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: 34px; }
.topbar__auth-brand { display: inline-flex; align-items: center; gap: 11px; color: var(--paper); font-family: var(--font-display); font-size: 19px; }
.topbar__auth-brand .topbar__chapter-mark { color: var(--gold-light); }
.topbar__auth-note { color: rgba(238, 234, 224, .46); font-size: 9px; letter-spacing: .12em; }
.topbar__profile { display: flex; align-items: center; gap: 8px; color: rgba(238, 234, 224, .76); font-size: 11px; }
.topbar__profile .icon { width: 13px; height: 13px; color: rgba(238, 234, 224, .4); }
.avatar-dot { display: inline-grid; place-items: center; width: 27px; height: 27px; color: var(--ink); background: var(--gold-light); font-family: "Noto Serif SC", serif; border-radius: 50%; }
.mobile-nav-bar, .mobile-nav-panel { display: none; }
main { min-height: calc(100vh - 82px); }
.page-view { width: min(1440px, 100%); min-height: calc(100vh - 82px); margin: 0 auto; padding: 82px 58px 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: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 8px; letter-spacing: .16em; }
.page-intro { position: relative; max-width: 760px; margin-bottom: 58px; color: var(--paper); }
.page-intro__kicker, .section-kicker { display: inline-block; color: var(--gold-light); font-size: 10px; letter-spacing: .17em; text-transform: uppercase; }
.page-intro__gua { position: absolute; top: -20px; right: 0; color: rgba(238, 234, 224, .14); font-family: "Noto Serif SC", serif; font-size: 96px; line-height: 1; }
.page-intro h1 { width: 100%; max-width: 720px; margin: 18px 0 14px; color: var(--paper); font-family: "Noto Serif SC", "STKaiti", serif; font-size: 72px; 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: rgba(238, 234, 224, .62); font-size: 14px; line-height: 1.9; }
em { color: var(--gold-light); font-family: "Noto Serif SC", "STKaiti", serif; font-style: normal; }
.demo-state { display: inline-block; padding: 4px 7px; color: var(--gold-light); border: 1px solid rgba(228, 189, 112, .48); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 8px; 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: 22px; padding: 0 19px; border: 1px solid transparent; font-size: 11px; 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: rgba(238, 234, 224, .42); }
.button--outline:hover { color: var(--ink); background: var(--paper); }
.button--paper { width: 100%; color: var(--ink); background: var(--paper-light); border-color: var(--paper-light); }
.button--paper:hover { background: white; }
.text-link { display: inline-flex; align-items: center; gap: 10px; color: var(--gold-light); font-size: 10px; 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: 9px; letter-spacing: .16em; }
.section-title h2 { margin: 7px 0 0; color: var(--ink); font-family: "Noto Serif SC", "STKaiti", serif; font-size: 36px; font-weight: 500; line-height: 1.2; overflow-wrap: anywhere; word-break: break-all; }
.paper-panel { background: var(--paper); box-shadow: var(--shadow-paper); }

/* Home: first viewport is the world entry, then the scroll becomes a route. */
.page--home { margin: -82px -58px -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 rgba(238, 234, 224, .16); }
.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: 14px; }
.home-hero h1 { width: 100%; margin: 16px 0 20px; color: var(--paper); font-family: "Noto Serif SC", "STKaiti", serif; font-size: 116px; 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 34px; color: rgba(238, 234, 224, .7); font-size: 14px; 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: 53px; max-width: 220px; color: rgba(238, 234, 224, .7); text-align: right; }
.summit-mark { display: flex; flex-direction: column; align-items: flex-end; }
.summit-mark .world-marker { margin-bottom: 10px; }
.summit-mark span { color: rgba(238, 234, 224, .48); font-size: 9px; letter-spacing: .22em; }
.summit-mark strong { margin-top: 5px; color: var(--gold-light); font-size: 18px; font-weight: 500; }
.summit-mark__caption { display: inline-block; margin-top: 16px; font-size: 10px; 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: rgba(238, 234, 224, .66); font-family: "Noto Serif SC", serif; font-size: 16px; line-height: 1.45; text-align: right; }
.home-hero__image b { color: var(--gold-light); font-size: 10px; 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: "Noto Serif SC", serif; font-size: 30px; }
.home-overview { display: grid; grid-template-columns: 1.1fr .9fr; color: var(--ink); background: var(--paper); }
.home-overview__lead { padding: 78px 88px; background: var(--paper-light); }
.home-overview__lead .section-kicker { color: var(--red); }
.home-overview h2 { margin: 18px 0; font-family: "Noto Serif SC", serif; font-size: 48px; font-weight: 500; line-height: 1.2; }
.home-overview h2 em { color: var(--red); }
.home-overview p { margin: 0 0 28px; color: var(--rock); font-size: 13px; line-height: 1.8; }
.home-overview__stats { position: relative; display: grid; align-content: center; padding: 54px 74px; border-left: 1px solid var(--line-dark); }
.meta-line { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; padding: 12px 0; border-bottom: 1px solid var(--line-dark); }
.meta-line span { color: var(--rock); font-size: 10px; }
.meta-line strong { color: var(--ink); font-size: 16px; font-weight: 500; }
.home-overview__seal { display: flex; align-items: center; gap: 10px; margin-top: 22px; color: var(--red); }
.home-overview__seal .gua-mark { font-size: 34px; }
.home-overview__seal span { color: var(--rock); font-size: 10px; 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: rgba(238, 234, 224, .43); }
.home-route .home-route__intro > p { margin: -12px 0 40px; color: rgba(238, 234, 224, .55); font-size: 13px; }
.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: 18px; padding: 19px 0; color: var(--paper); border-top: 1px solid rgba(238, 234, 224, .14); transition: background var(--fast) ease, padding var(--fast) var(--ease); }
.task-row:last-child { border-bottom: 1px solid rgba(238, 234, 224, .14); }
.task-row:hover { padding-left: 12px; padding-right: 12px; background: rgba(238, 234, 224, .045); }
.task-row--locked { color: rgba(238, 234, 224, .38); }
.task-row__step { position: relative; align-self: stretch; display: flex; align-items: center; color: var(--gold-light); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
.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: "Noto Serif SC", serif; font-size: 18px; }
.task-row__type { color: rgba(238, 234, 224, .42); font-size: 9px; letter-spacing: .14em; }
.task-row h3 { margin: 7px 0 5px; font-size: 15px; font-weight: 500; }
.task-row p { margin: 0; color: rgba(238, 234, 224, .47); font-size: 10px; }
.task-row__state { display: flex; align-items: center; justify-content: flex-end; gap: 8px; color: var(--gold-light); font-size: 9px; letter-spacing: .07em; }
.task-row--done .task-row__state { color: #91bd96; }
.task-row--locked .task-row__state { color: rgba(238, 234, 224, .3); }
.task-row__state .icon { width: 14px; }
.home-bottom { display: grid; grid-template-columns: .72fr 1.28fr; color: var(--ink); background: var(--paper); }
.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: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 8px; letter-spacing: .16em; }
.quote-panel__seal { display: block; margin-top: 23px; color: var(--red); font-family: "Noto Serif SC", serif; font-size: 54px; line-height: .4; }
.quote-panel blockquote { margin: 24px 0 26px; color: var(--ink); font-family: "Noto Serif SC", serif; font-size: 26px; line-height: 1.55; }
.quote-panel__author { display: block; color: var(--rock); font-size: 9px; letter-spacing: .16em; }
.home-next { position: relative; overflow: hidden; padding: 72px 88px; background: var(--paper); }
.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: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 8px; letter-spacing: .12em; writing-mode: vertical-rl; }
.home-next h2 { margin: 16px 0; font-family: "Noto Serif SC", serif; font-size: 46px; font-weight: 500; line-height: 1.1; }
.home-next h2 em { color: var(--red); }
.home-next p { max-width: 390px; margin: 0 0 28px; color: var(--rock); font-size: 13px; 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: 28px; }
.goal-selection, .study-focus, .assistant-dialog, .profile-card, .settings-list { padding: 44px; color: var(--ink); background: rgba(238, 234, 224, .97); 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: 9px; margin-top: 38px; }
.goal-option { display: grid; grid-template-columns: 54px minmax(0, 1fr) 24px; align-items: center; gap: 18px; width: 100%; padding: 17px; 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: "Noto Serif SC", serif; font-size: 19px; }
.goal-option strong, .goal-option small { display: block; }
.goal-option strong { font-size: 13px; font-weight: 500; }
.goal-option small { margin-top: 6px; color: var(--rock); font-size: 10px; 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: 36px; }
.goal-foot > span { color: var(--rock); font-size: 9px; }
.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 rgba(238, 234, 224, .16); box-shadow: var(--shadow-ink); }
.orientation-panel__compass { position: relative; align-self: center; width: min(260px, 100%); aspect-ratio: 1; display: grid; place-items: center; margin-bottom: auto; border: 1px solid rgba(228, 189, 112, .36); border-radius: 50%; }
.orientation-panel__compass::before, .orientation-panel__compass::after { content: ""; position: absolute; inset: 15%; border: 1px solid rgba(238, 234, 224, .21); border-radius: 50%; }
.orientation-panel__compass::after { inset: 0; border-style: dashed; transform: rotate(17deg); }
.orientation-panel__needle { position: absolute; width: 1px; height: 90%; background: linear-gradient(transparent, var(--gold-light), transparent); transform: rotate(38deg); }
.orientation-panel__labels { position: absolute; inset: 11px; display: flex; justify-content: space-between; align-items: center; color: rgba(238, 234, 224, .52); font-family: "Noto Serif SC", serif; font-size: 12px; }
.orientation-panel__labels b:nth-child(1), .orientation-panel__labels b:nth-child(3) { position: absolute; left: 50%; transform: translateX(-50%); }
.orientation-panel__labels b:nth-child(1) { top: 0; } .orientation-panel__labels b:nth-child(3) { bottom: 0; }
.orientation-panel__labels b:nth-child(2) { margin-left: auto; } .orientation-panel__labels b:nth-child(4) { margin-right: auto; }
.orientation-panel__compass .world-marker { transform: scale(.78); }
.orientation-panel h3 { margin: 12px 0; font-family: "Noto Serif SC", serif; font-size: 27px; font-weight: 500; line-height: 1.25; }
.orientation-panel p { margin: 0; color: rgba(238, 234, 224, .56); font-size: 11px; line-height: 1.8; }
.orientation-panel__bagua { width: 100%; margin-bottom: auto; }

/* 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(--paper); 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: rgba(238, 234, 224, .86); 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: "Noto Serif SC", serif; font-size: 39px; line-height: 1; }
.bagua-field__center b { position: relative; margin-top: 5px; color: var(--ink); font-family: "Noto Serif SC", serif; font-size: 11px; font-weight: 500; }
.bagua-field__center small { position: relative; margin-top: 3px; color: var(--rock); font-size: 8px; }
.bagua-node { position: absolute; z-index: 2; display: grid; grid-template-columns: 31px minmax(0, 1fr); align-items: center; gap: 6px; width: 112px; padding: 7px 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: "Noto Serif SC", serif; font-size: 17px; }
.bagua-node__copy { display: grid; gap: 1px; min-width: 0; }
.bagua-node__copy b { font-size: 9px; font-weight: 500; }
.bagua-node__copy strong { font-family: "Noto Serif SC", serif; font-size: 12px; font-weight: 500; }
.bagua-node__copy small { overflow: hidden; color: var(--rock); font-size: 7px; 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: 3px; color: var(--red); font-family: "Noto Serif SC", serif; font-size: 10px; }
.bagua-field__caption span { color: var(--rock); font-family: inherit; font-size: 8px; }
.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: 26px; }
.bagua-field--compact .bagua-field__center b { font-size: 8px; }
.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: 5px; gap: 4px; }
.bagua-field--compact .bagua-node__symbol { width: 24px; height: 24px; font-size: 13px; }
.bagua-field--compact .bagua-node__copy b { font-size: 7px; }
.bagua-field--compact .bagua-node__copy strong { font-size: 9px; }
.bagua-field--compact .bagua-node--north { top: 4%; }
.bagua-field--compact .bagua-node--south { bottom: 4%; }
.review-top__bagua, .review-top__copy, .knowledge-head__bagua, .knowledge-head__copy { min-width: 0; }
.review-top__bagua .bagua-field__paper { min-height: 360px; }
.review-top__bagua .bagua-field__center { width: 88px; height: 88px; }
.review-top__bagua .bagua-field__center span { font-size: 29px; }
.review-top__bagua .bagua-field__center b { font-size: 9px; }
.review-top__bagua .bagua-field__center small { font-size: 7px; }
.knowledge-head__bagua { width: min(390px, 100%); justify-self: center; }
.knowledge-head__bagua .bagua-field__paper { min-height: 520px; }

/* 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: 11px 0 12px; color: var(--paper); font-family: "Noto Serif SC", serif; font-size: 39px; font-weight: 500; line-height: 1.15; }
.feature-directory__note p { max-width: 440px; margin: 0; color: rgba(238, 234, 224, .62); font-size: 12px; line-height: 1.9; }
.feature-directory .bagua-field__paper { min-height: 650px; background: rgba(238, 234, 224, .92); 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: rgba(238, 234, 224, .9); }
.feature-directory .bagua-field__center span { font-size: 47px; }
.feature-directory .bagua-field__center b { font-size: 13px; }
.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: 13px; }
.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: 42px; }
.plan-head__progress, .plan-head__balance { min-height: 184px; padding: 29px; background: rgba(238, 234, 224, .95); box-shadow: var(--shadow-paper); }
.plan-head__progress > span, .plan-head__balance > div > span { color: var(--rock); font-size: 9px; letter-spacing: .15em; }
.plan-head__progress > strong { display: block; margin: 16px 0 18px; color: var(--ink); font-size: 30px; font-weight: 500; }
.plan-head__progress > strong small { color: var(--rock); font-size: 11px; font-weight: 400; }
.plan-head__progress > div { display: flex; justify-content: space-between; margin-top: 10px; color: var(--rock); font-size: 9px; }
.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: "Noto Serif SC", serif; font-size: 23px; 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: 22px; font-weight: 500; }
.plan-head__balance p { margin: 0; color: rgba(238, 234, 224, .46); font-size: 9px; }
.plan-route { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 36px; }
.plan-route__label { padding-top: 18px; color: var(--paper); }
.plan-route__label span { color: var(--gold-light); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; letter-spacing: .18em; }
.plan-route__label strong { display: block; margin-top: 12px; font-family: "Noto Serif SC", serif; font-size: 22px; font-weight: 500; }
.plan-route__label small { display: block; margin-top: 14px; color: rgba(238, 234, 224, .44); font-size: 9px; line-height: 1.7; }
.plan-route__list { padding: 0 0 20px 10px; }
.plan-route__list .task-row { background: rgba(13, 23, 26, .48); padding-left: 16px; padding-right: 16px; }
.route-future { position: relative; height: 106px; padding: 30px 0 0 58px; color: rgba(238, 234, 224, .39); font-family: "Noto Serif SC", serif; font-size: 16px; }
.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: 10px; color: rgba(238, 234, 224, .25); font-size: 19px; }

.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: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; letter-spacing: .1em; }
.study-focus__title { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 20px; align-items: start; margin: 42px 0 50px; }
.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: "Noto Serif SC", serif; font-size: 27px; }
.study-focus__title h2 { margin: 0; font-family: "Noto Serif SC", serif; font-size: 42px; font-weight: 500; line-height: 1.12; }
.study-focus__title p { grid-column: 2; margin: 12px 0 0; color: var(--rock); font-size: 11px; line-height: 1.8; }
.study-question { padding-top: 28px; border-top: 1px solid var(--line-dark); }
.question-label { color: var(--red); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 9px; letter-spacing: .15em; }
.study-question h3 { max-width: 650px; margin: 20px 0 26px; color: var(--ink); font-size: 26px; font-weight: 500; line-height: 1.5; }
.answer-lines { display: grid; gap: 8px; }
.answer-line { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 14px; width: 100%; padding: 12px 14px; color: var(--ink); text-align: left; background: rgba(217, 211, 198, .58); border: 1px solid transparent; font-size: 11px; transition: background var(--fast) ease, border-color var(--fast) ease, transform var(--fast) var(--ease); }
.answer-line:hover, .answer-line.is-selected { background: var(--paper-light); border-color: var(--gold); transform: translateX(4px); }
.answer-line > span:first-child { display: grid; place-items: center; width: 27px; height: 27px; color: var(--red); border: 1px solid rgba(169, 75, 64, .35); font-family: ui-monospace, monospace; font-size: 10px; }
.study-submit { margin-top: 28px; }
.evidence-submit { margin-top: 48px; padding-top: 30px; 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: 10px; color: var(--ink); font-family: "Noto Serif SC", serif; font-size: 30px; font-weight: 500; }
.evidence-submit > p { max-width: 620px; margin: 0 0 20px; color: var(--rock); font-size: 10px; line-height: 1.8; }
.evidence-submit__level, .evidence-review__status { color: var(--red); font-family: ui-monospace, monospace; font-size: 10px; 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: 10px; min-height: 62px; padding: 10px 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: ui-monospace, monospace; font-size: 9px; }
.evidence-level strong, .evidence-level small { display: block; }
.evidence-level strong { font-size: 11px; font-weight: 500; }
.evidence-level small { margin-top: 4px; color: var(--rock); font-size: 8px; 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: 9px; }
.evidence-submit__field textarea { min-height: 98px; padding: 12px; color: var(--ink); background: rgba(217, 211, 198, .42); border: 1px solid transparent; outline: 0; 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: 18px; margin-top: 24px; padding-top: 19px; 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: ui-monospace, monospace; font-size: 8px; letter-spacing: .1em; }
.study-knowledge-capture__copy strong { color: var(--ink); font-family: "Noto Serif SC", serif; font-size: 14px; font-weight: 500; }
.study-knowledge-capture__copy small { color: var(--rock); font-size: 9px; line-height: 1.6; }
.knowledge-capture-link { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; gap: 7px; min-height: 36px; padding: 9px 12px; color: var(--ink); background: transparent; border: 1px solid rgba(13, 23, 26, .28); font: inherit; font-size: 9px; 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-aside { display: grid; gap: 16px; }
.study-aside__route, .study-aside__tip { padding: 27px; color: var(--paper); background: rgba(13, 23, 26, .78); border: 1px solid rgba(238, 234, 224, .14); }
.mini-mountain { position: relative; height: 220px; margin: 22px 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%, rgba(238, 234, 224, .14) 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 rgba(238, 234, 224, .07); }
.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: rgba(238, 234, 224, .44); font-size: 9px; }
.dot { display: inline-block; width: 6px; height: 6px; margin-right: 5px; 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: 14px; 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: "Noto Serif SC", serif; }
.study-aside__tip p { margin: 0; color: rgba(238, 234, 224, .68); font-size: 11px; 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: 10px; }

/* Review and knowledge */
.review-top { display: grid; grid-template-columns: 220px minmax(0, 1fr) 200px; align-items: center; gap: 42px; padding: 44px; color: var(--ink); background: var(--paper); box-shadow: var(--shadow-paper); }
.review-orbit { position: relative; width: 188px; height: 188px; display: grid; place-items: center; border: 1px solid rgba(169, 75, 64, .35); border-radius: 50%; }
.review-orbit__path { position: absolute; inset: 16px; border: 1px solid var(--red); border-left-color: transparent; border-radius: 50%; transform: rotate(22deg); }
.review-orbit__path--two { inset: 33px; border-color: var(--gold); border-right-color: transparent; transform: rotate(-32deg); }
.review-orbit .world-marker { transform: scale(.72); }
.review-orbit strong { position: absolute; top: 63px; font-family: "Noto Serif SC", serif; font-size: 33px; font-weight: 500; }
.review-orbit small { position: absolute; bottom: 45px; color: var(--rock); font-size: 9px; }
.review-top__copy .section-kicker { color: var(--red); }
.review-top__copy h2 { margin: 14px 0; font-family: "Noto Serif SC", serif; font-size: 50px; font-weight: 500; line-height: 1.12; }
.review-top__copy h2 em { color: var(--red); }
.review-top__copy p { max-width: 460px; margin: 0 0 25px; color: var(--rock); font-size: 12px; line-height: 1.8; }
.review-top__stats { align-self: stretch; display: grid; align-content: center; }
.review-top__stats .meta-line { border-color: var(--line-dark); }
.evidence-review { margin-top: 20px; padding: 30px 34px; color: var(--ink); background: var(--paper-light); border: 1px solid rgba(238, 234, 224, .16); }
.evidence-review .section-title { align-items: flex-end; }
.evidence-review .section-title h2 { margin-top: 10px; color: var(--ink); font-family: "Noto Serif SC", serif; font-size: 30px; font-weight: 500; }
.evidence-review__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.evidence-review__grid > div { display: grid; gap: 7px; min-height: 88px; padding: 15px; background: rgba(217, 211, 198, .45); }
.evidence-review__grid span { color: var(--red); font-size: 9px; }
.evidence-review__grid strong { color: var(--ink); font-size: 11px; font-weight: 500; line-height: 1.7; }
.evidence-review__next { border: 1px solid rgba(169, 75, 64, .38) !important; }
.memory-loop { position: relative; margin-top: 20px; padding: 30px 34px; color: var(--ink); background: rgba(238, 234, 224, .97); 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: 10px; color: var(--ink); font-family: "Noto Serif SC", serif; font-size: 30px; font-weight: 500; }
.memory-loop__status { color: var(--red); font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: .1em; }
.memory-loop__list { display: grid; gap: 0; margin-top: 22px; border-top: 1px solid var(--line-dark); }
.memory-loop__item { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: start; gap: 14px; padding: 18px 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: "Noto Serif SC", serif; font-size: 14px; }
.memory-loop__body > span, .memory-loop__body small { color: var(--rock); font-size: 9px; }
.memory-loop__body h3 { margin: 5px 0 6px; color: var(--ink); font-family: "Noto Serif SC", serif; font-size: 17px; font-weight: 500; }
.memory-loop__body p { max-width: 620px; margin: 0; color: var(--rock); font-size: 11px; line-height: 1.75; }
.memory-loop__body small { display: block; margin-top: 9px; color: var(--red); }
.memory-loop__actions { display: flex; align-items: center; gap: 14px; padding-top: 3px; }
.memory-loop__actions .button { min-height: 34px; padding: 8px 13px; font-size: 10px; }
.memory-loop__actions .text-link { padding: 0; color: var(--rock); border: 0; background: transparent; font-size: 9px; 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: "Noto Serif SC", serif; font-size: 16px; }
.memory-loop__empty p { margin: 8px 0 0; color: var(--rock); font-size: 11px; 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: rgba(238, 234, 224, .42); }
.knowledge-rows { border-top: 1px solid rgba(238, 234, 224, .15); }
.knowledge-row { display: grid; grid-template-columns: 46px minmax(180px, 1fr) minmax(140px, .65fr) 24px; align-items: center; gap: 18px; min-height: 88px; padding: 15px 0; border-bottom: 1px solid rgba(238, 234, 224, .15); }
.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: "Noto Serif SC", serif; font-size: 18px; }
.knowledge-row span:not(.knowledge-row__gua) { color: rgba(238, 234, 224, .4); font-size: 9px; }
.knowledge-row h3 { margin: 6px 0 0; color: var(--paper); font-size: 13px; 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: 11px; font-weight: 500; }
.knowledge-row > a { color: var(--gold-light); }
.knowledge-head { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 70px; margin: -8px 0 96px; }
.knowledge-head__map { position: relative; width: min(360px, 100%); aspect-ratio: 1; justify-self: center; display: grid; place-items: center; border: 1px solid rgba(228, 189, 112, .34); border-radius: 50%; }
.knowledge-head__map::before, .knowledge-head__map::after { content: ""; position: absolute; border: 1px solid rgba(238, 234, 224, .16); border-radius: 50%; transform: rotate(24deg); }
.knowledge-head__map::before { inset: 12%; } .knowledge-head__map::after { inset: 27%; transform: rotate(-42deg); }
.knowledge-head__orbit { position: absolute; width: 82%; height: 42%; border: 1px solid rgba(228, 189, 112, .4); border-radius: 50%; transform: rotate(32deg); }
.knowledge-head__orbit--two { width: 52%; height: 90%; transform: rotate(-29deg); border-color: rgba(238, 234, 224, .18); }
.knowledge-head__center { color: var(--gold-light); font-family: "Noto Serif SC", serif; font-size: 40px; }
.knowledge-node { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; color: var(--gold-light); background: rgba(13, 23, 26, .72); border: 1px solid rgba(228, 189, 112, .48); border-radius: 50%; font-family: "Noto Serif SC", serif; font-size: 16px; font-style: normal; transition: background var(--fast) ease, transform var(--fast) var(--ease); }
.knowledge-node:hover { background: var(--gold); transform: scale(1.08); }
.knowledge-node--1 { top: 5%; left: 42%; } .knowledge-node--2 { top: 23%; right: 8%; } .knowledge-node--3 { bottom: 23%; right: 8%; } .knowledge-node--4 { bottom: 5%; left: 42%; } .knowledge-node--5 { bottom: 23%; left: 8%; } .knowledge-node--6 { top: 23%; left: 8%; }
.knowledge-head__copy h2 { margin: 14px 0; color: var(--paper); font-family: "Noto Serif SC", serif; font-size: 50px; font-weight: 500; line-height: 1.1; }
.knowledge-head__copy h2 em { color: var(--gold-light); }
.knowledge-head__copy p { max-width: 420px; color: rgba(238, 234, 224, .58); font-size: 12px; line-height: 1.9; }
.knowledge-head__legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 24px; color: rgba(238, 234, 224, .48); font-size: 9px; }
.knowledge-grid { color: var(--paper); }
.knowledge-grid .section-title h2 { color: var(--paper); }
.knowledge-grid .section-title > div > span { color: rgba(238, 234, 224, .4); }
.knowledge-grid .section-title > .text-link { margin-left: auto; }
.knowledge-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.knowledge-card { min-height: 226px; padding: 23px; color: var(--ink); background: var(--paper-light); border-top: 3px solid var(--gold); box-shadow: var(--shadow-paper); transition: transform var(--fast) var(--ease), border-color var(--fast) ease; }
.knowledge-card:hover { transform: translateY(-4px); }
.knowledge-card--cinnabar { border-top-color: var(--red); } .knowledge-card--blue { border-top-color: var(--ink-blue); } .knowledge-card--rock { border-top-color: var(--rock); }
.knowledge-card__head { display: flex; justify-content: space-between; align-items: center; }
.knowledge-card__head > span { color: var(--red); font-family: "Noto Serif SC", serif; font-size: 21px; }
.knowledge-card__head small { color: var(--rock); font-size: 9px; }
.knowledge-card h3 { margin: 21px 0 7px; font-size: 15px; font-weight: 500; }
.knowledge-card p { margin: 0 0 23px; color: var(--rock); font-size: 9px; }
.knowledge-card .progress-line { margin-bottom: 9px; }
.knowledge-card > div:last-child { display: flex; align-items: baseline; gap: 8px; }
.knowledge-card > div:last-child strong { font-size: 20px; font-weight: 500; } .knowledge-card > div:last-child span { color: var(--rock); font-size: 9px; }

/* The knowledge chapter is a personal map, not a progress report. */
.knowledge-atlas { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .7fr); align-items: start; gap: 20px; }
.knowledge-library { min-width: 0; color: var(--paper); }
.knowledge-library__heading { position: relative; display: flex; justify-content: space-between; gap: 24px; min-height: 190px; padding: 31px; overflow: hidden; color: var(--paper); background: rgba(13, 23, 26, .74); border: 1px solid rgba(238, 234, 224, .15); }
.knowledge-library__heading::after { content: "脉"; position: absolute; right: 28px; bottom: -26px; color: rgba(228, 189, 112, .1); font-family: "Noto Serif SC", serif; font-size: 170px; line-height: 1; pointer-events: none; }
.knowledge-library__heading > div { position: relative; z-index: 1; min-width: 0; }
.knowledge-library__heading h2 { margin: 13px 0 8px; color: var(--paper); font-family: "Noto Serif SC", serif; font-size: 39px; font-weight: 500; line-height: 1.1; }
.knowledge-library__heading p { max-width: 390px; margin: 0; color: rgba(238, 234, 224, .58); font-size: 12px; line-height: 1.8; }
.knowledge-add-button { margin-top: 20px; min-height: 40px; gap: 10px; padding: 0 14px; font-size: 9px; }
.knowledge-add-button .icon { width: 14px; height: 14px; }
.knowledge-library__seal { position: relative; z-index: 1; display: grid; place-items: center; align-content: center; width: 86px; height: 86px; flex: 0 0 auto; margin-top: 1px; color: var(--gold-light); border: 1px solid rgba(228, 189, 112, .54); border-radius: 50%; font-family: "Noto Serif SC", serif; font-size: 30px; line-height: .9; text-align: center; }
.knowledge-library__seal small { display: block; margin-top: 5px; color: rgba(238, 234, 224, .5); font-family: inherit; font-size: 8px; }
.knowledge-library__toolbar { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 16px 2px 12px; }
.knowledge-library__count { color: rgba(238, 234, 224, .52); font-size: 10px; }
.knowledge-library__count strong { color: var(--gold-light); font-family: "Noto Serif SC", serif; font-size: 17px; font-weight: 500; }
.knowledge-search { display: flex; align-items: center; gap: 8px; width: min(245px, 100%); padding: 8px 2px; color: rgba(238, 234, 224, .62); 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; outline: 0; font-size: 10px; }
.knowledge-search input::placeholder { color: rgba(238, 234, 224, .38); }
.knowledge-graph { position: relative; height: 510px; overflow: hidden; background: rgba(13, 23, 26, .72); border: 1px solid rgba(238, 234, 224, .15); isolation: isolate; }
.knowledge-graph::before, .knowledge-graph::after { content: ""; position: absolute; z-index: -1; border: 1px solid rgba(228, 189, 112, .16); border-radius: 50%; pointer-events: none; }
.knowledge-graph::before { width: 62%; height: 60%; left: 19%; top: 20%; transform: rotate(-18deg); }
.knowledge-graph::after { width: 37%; height: 83%; left: 31%; top: 9%; border-color: rgba(238, 234, 224, .1); transform: rotate(31deg); }
.knowledge-graph__stamp { position: absolute; top: 17px; right: 19px; color: rgba(238, 234, 224, .3); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 8px; letter-spacing: .14em; }
.knowledge-graph__edge { position: absolute; z-index: 0; left: 50%; top: 50%; width: 28%; height: 1px; transform-origin: left center; background: rgba(228, 189, 112, .32); }
.knowledge-graph__edge--north { transform: rotate(-90deg); }
.knowledge-graph__edge--northwest { transform: rotate(-145deg); }
.knowledge-graph__edge--northeast { transform: rotate(-35deg); }
.knowledge-graph__edge--west { transform: rotate(180deg); }
.knowledge-graph__edge--east { transform: rotate(0deg); }
.knowledge-graph__edge--southwest { transform: rotate(145deg); }
.knowledge-graph__edge--south { transform: rotate(90deg); }
.knowledge-graph__edge--southeast { transform: rotate(35deg); }
.knowledge-graph__core { position: absolute; z-index: 1; left: 50%; top: 50%; display: grid; place-items: center; align-content: center; width: 144px; height: 144px; color: var(--ink); background: rgba(238, 234, 224, .92); border: 1px solid rgba(228, 189, 112, .82); border-radius: 50%; transform: translate(-50%, -50%); text-align: center; box-shadow: 0 0 0 8px rgba(228, 189, 112, .05); }
.knowledge-graph__core::before { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(169, 75, 64, .34); border-radius: 50%; }
.knowledge-graph__core span, .knowledge-graph__core strong, .knowledge-graph__core b { position: relative; }
.knowledge-graph__core span { color: var(--rock); font-size: 9px; }
.knowledge-graph__core strong { margin: 3px 0; color: var(--red); font-family: "Noto Serif SC", serif; font-size: 31px; font-weight: 500; line-height: 1; }
.knowledge-graph__core strong small { color: var(--rock); font-family: inherit; font-size: 9px; }
.knowledge-graph__core b { color: var(--rock); font-size: 8px; font-weight: 400; }
.knowledge-map-node { position: absolute; z-index: 2; display: grid; gap: 4px; width: 154px; min-height: 72px; padding: 11px 13px; color: var(--paper); background: rgba(30, 58, 66, .9); border: 1px solid rgba(238, 234, 224, .18); text-align: left; transition: color var(--fast) ease, background var(--fast) ease, border-color var(--fast) ease, transform var(--fast) var(--ease); }
.knowledge-map-node:hover, .knowledge-map-node.is-active { color: var(--ink); background: var(--gold-light); border-color: var(--gold-light); box-shadow: 0 8px 20px rgba(0, 0, 0, .18); }
.knowledge-map-node--north { left: 50%; top: 8%; transform: translateX(-50%); }
.knowledge-map-node--northwest { left: 5%; top: 24%; }
.knowledge-map-node--northeast { right: 5%; top: 24%; }
.knowledge-map-node--west { left: 5%; top: 50%; transform: translateY(-50%); }
.knowledge-map-node--east { right: 5%; top: 50%; transform: translateY(-50%); }
.knowledge-map-node--southwest { left: 5%; bottom: 15%; }
.knowledge-map-node--south { left: 50%; bottom: 6%; transform: translateX(-50%); }
.knowledge-map-node--southeast { right: 5%; bottom: 15%; }
.knowledge-map-node--north:hover, .knowledge-map-node--north.is-active, .knowledge-map-node--south:hover, .knowledge-map-node--south.is-active { transform: translateX(-50%) translateY(-3px); }
.knowledge-map-node--west:hover, .knowledge-map-node--west.is-active { transform: translateY(-50%) translateX(3px); }
.knowledge-map-node--east:hover, .knowledge-map-node--east.is-active { transform: translateY(-50%) translateX(-3px); }
.knowledge-map-node span { color: var(--gold-light); font-family: "Noto Serif SC", serif; font-size: 15px; line-height: 1; }
.knowledge-map-node:hover span, .knowledge-map-node.is-active span { color: var(--red); }
.knowledge-map-node strong { font-family: "Noto Serif SC", serif; font-size: 13px; font-weight: 500; line-height: 1.25; }
.knowledge-map-node small { color: rgba(238, 234, 224, .52); font-size: 8px; }
.knowledge-map-node:hover small, .knowledge-map-node.is-active small { color: rgba(13, 23, 26, .6); }
.knowledge-graph__legend { position: absolute; right: 18px; bottom: 15px; display: flex; flex-wrap: wrap; gap: 13px; color: rgba(238, 234, 224, .48); font-size: 8px; }
.knowledge-graph__legend span { display: inline-flex; align-items: center; gap: 5px; }
.knowledge-trail { margin-top: 18px; padding: 19px 21px; color: var(--paper); background: rgba(13, 23, 26, .68); border-top: 1px solid rgba(228, 189, 112, .42); }
.knowledge-trail > div:first-child { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.knowledge-trail > div:first-child small { color: rgba(238, 234, 224, .42); font-size: 9px; }
.knowledge-trail__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 15px; }
.knowledge-trail__item { display: grid; gap: 5px; min-width: 0; padding: 11px 12px; color: var(--paper); background: rgba(238, 234, 224, .05); border: 1px solid rgba(238, 234, 224, .13); text-align: left; transition: background var(--fast) ease, border-color var(--fast) ease, transform var(--fast) var(--ease); }
.knowledge-trail__item:hover { background: rgba(228, 189, 112, .12); border-color: rgba(228, 189, 112, .58); transform: translateY(-2px); }
.knowledge-trail__item span, .knowledge-trail__item small { color: rgba(238, 234, 224, .42); font-size: 8px; }
.knowledge-trail__item strong { overflow-wrap: anywhere; color: var(--gold-light); font-family: "Noto Serif SC", serif; font-size: 11px; font-weight: 500; }
.knowledge-capture { margin-top: 18px; padding: 22px; 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: 15px; }
.knowledge-capture__heading h3 { margin: 9px 0 0; color: var(--paper); font-family: "Noto Serif SC", serif; font-size: 22px; font-weight: 500; }
.knowledge-capture__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 16px; margin-top: 22px; }
.knowledge-capture__fields label { display: grid; gap: 7px; color: rgba(238, 234, 224, .58); font-size: 9px; }
.knowledge-capture__fields input, .knowledge-capture__fields select, .knowledge-capture__fields textarea { width: 100%; min-width: 0; padding: 11px 12px; color: var(--paper); background: rgba(238, 234, 224, .06); border: 1px solid rgba(238, 234, 224, .2); border-radius: 0; outline: 0; font-size: 10px; }
.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: rgba(238, 234, 224, .3); }
.knowledge-capture__fields select option { color: var(--ink); background: var(--paper); }
.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: 18px; margin-top: 20px; }
.knowledge-capture__footer > span { max-width: 290px; color: rgba(238, 234, 224, .4); font-size: 8px; line-height: 1.6; }
.knowledge-capture__footer .button { flex: 0 0 auto; min-height: 42px; }
.knowledge-detail { position: sticky; top: 104px; min-width: 0; padding: 31px; color: var(--ink); background: rgba(238, 234, 224, .97); border-top: 3px solid var(--gold); box-shadow: var(--shadow-paper); }
.knowledge-detail__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--rock); font-size: 9px; }
.knowledge-detail__top b { color: var(--red); font-size: 9px; font-weight: 500; }
.knowledge-detail h2 { margin: 19px 0 7px; color: var(--ink); font-family: "Noto Serif SC", serif; font-size: 32px; font-weight: 500; line-height: 1.1; }
.knowledge-detail__strand { color: var(--red); font-size: 9px; }
.knowledge-detail__summary { margin: 16px 0 23px; color: var(--rock); font-family: "Noto Serif SC", serif; font-size: 13px; line-height: 1.8; }
.knowledge-detail__mastery { padding: 16px 0 18px; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.knowledge-detail__mastery > div { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; color: var(--rock); font-size: 9px; }
.knowledge-detail__mastery strong { color: var(--ink); font-size: 20px; font-weight: 500; }
.knowledge-detail__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 18px 0; }
.knowledge-detail__meta div { display: grid; gap: 5px; min-width: 0; }
.knowledge-detail__meta span { color: var(--rock); font-size: 8px; }
.knowledge-detail__meta strong { overflow-wrap: anywhere; color: var(--ink); font-size: 10px; font-weight: 500; }
.knowledge-detail__section { padding-top: 17px; border-top: 1px solid var(--line-dark); }
.knowledge-detail__section > span, .knowledge-detail__note > span { color: var(--rock); font-size: 9px; }
.knowledge-related { display: grid; gap: 6px; margin-top: 10px; }
.knowledge-related button { padding: 8px 0; color: var(--ink); background: transparent; border-bottom: 1px solid rgba(13, 23, 26, .12); text-align: left; font-family: "Noto Serif SC", serif; font-size: 11px; transition: color var(--fast) ease, padding-left var(--fast) ease; }
.knowledge-related button:hover { padding-left: 5px; color: var(--red); }
.knowledge-detail__note { margin: 19px 0 24px; padding: 15px; background: rgba(217, 211, 198, .52); border-left: 2px solid var(--red); }
.knowledge-detail__note p { margin: 8px 0 0; color: var(--rock); font-family: "Noto Serif SC", serif; font-size: 12px; line-height: 1.8; }
.knowledge-related__empty { display: block; margin-top: 10px; color: var(--rock); font-size: 9px; line-height: 1.6; }

/* 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: 21px 25px; 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: "Noto Serif SC", serif; font-size: 21px; }
.assistant-dialog__header div { display: grid; gap: 3px; }
.assistant-dialog__header div span { color: var(--rock); font-size: 9px; }
.assistant-dialog__header strong { font-size: 14px; 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: 9px; }
.assistant-dialog__body { min-height: 390px; padding: 31px 29px; background: rgba(217, 211, 198, .52); }
.assistant-pending { display: inline-flex; align-items: center; gap: 9px; 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); } }
.assistant-composer input:disabled { opacity: .62; cursor: wait; }
.assistant-composer button:disabled { opacity: .48; cursor: wait; }
.message { display: flex; gap: 13px; 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: "Noto Serif SC", serif; }
.message p { margin: 0; padding: 12px 15px; color: var(--ink); background: var(--paper-light); font-family: "Noto Serif SC", serif; font-size: 17px; line-height: 1.5; box-shadow: 0 5px 18px rgba(13, 23, 26, .06); }
.suggestion-list { display: grid; gap: 8px; margin: 30px 0 0 47px; }
.suggestion-list button { padding: 12px 14px; color: var(--rock); text-align: left; background: transparent; border: 1px solid rgba(13, 23, 26, .15); font-size: 10px; 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: 9px; padding: 14px 17px; 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; outline: 0; font-size: 11px; }
.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 rgba(238, 234, 224, .14); 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: rgba(238, 234, 224, .1); 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: 18px 20px 21px; background: rgba(13, 23, 26, .86); }
.assistant-guide-card__copy strong { display: block; margin: 8px 0 5px; color: var(--paper); font-family: "Noto Serif SC", serif; font-size: 22px; font-weight: 500; }
.assistant-guide-card__copy p { max-width: 240px; margin: 0; color: rgba(238, 234, 224, .62); font-family: "Noto Serif SC", serif; font-size: 11px; line-height: 1.7; }
.assistant-guide-picker { padding: 18px; color: var(--paper); background: rgba(13, 23, 26, .66); border: 1px solid rgba(238, 234, 224, .15); }
.assistant-guide-picker__heading { display: grid; gap: 6px; }
.assistant-guide-picker__heading small { color: rgba(238, 234, 224, .52); font-size: 9px; line-height: 1.55; }
.guide-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 15px; }
.guide-option { display: grid; grid-template-columns: 39px minmax(0, 1fr); grid-template-rows: minmax(39px, auto) auto; align-items: center; gap: 7px 8px; min-width: 0; min-height: 100px; padding: 8px; color: var(--paper); text-align: left; background: rgba(238, 234, 224, .06); border: 1px solid rgba(238, 234, 224, .14); transition: border-color var(--fast) ease, background var(--fast) ease, transform var(--fast) var(--ease); }
.guide-option:hover, .guide-option.is-selected { background: rgba(228, 189, 112, .12); border-color: rgba(228, 189, 112, .76); transform: translateY(-2px); }
.guide-option__art { display: grid; place-items: center; width: 39px; height: 46px; overflow: hidden; background: var(--paper-light); border: 1px solid rgba(238, 234, 224, .12); }
.guide-option__art img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; opacity: .92; filter: saturate(.82) contrast(1.04); }
.guide-option__text { min-width: 0; align-self: center; }
.guide-option__text strong, .guide-option__text small { display: block; overflow-wrap: anywhere; }
.guide-option__text strong { color: var(--gold-light); font-family: "Noto Serif SC", serif; font-size: 10px; font-weight: 500; line-height: 1.35; }
.guide-option__text small { margin-top: 4px; color: rgba(238, 234, 224, .54); font-size: 8px; line-height: 1.45; }
.guide-option__mark { grid-column: 1 / -1; justify-self: end; color: var(--red); font-family: "Noto Serif SC", serif; font-size: 14px; line-height: 1; }
.assistant-aside__portrait { position: relative; min-height: 420px; overflow: hidden; background-image: linear-gradient(180deg, transparent 35%, rgba(13, 23, 26, .84)), var(--image); background-size: cover; background-position: center; box-shadow: var(--shadow-ink); }
.assistant-aside__portrait::after { content: ""; position: absolute; inset: 16px; border: 1px solid rgba(228, 189, 112, .32); pointer-events: none; }
.assistant-aside__portrait span { position: absolute; z-index: 1; left: 24px; bottom: 23px; color: var(--paper); font-family: "Noto Serif SC", serif; font-size: 22px; line-height: 1.35; }
.assistant-aside__portrait b { color: var(--gold-light); font-size: 13px; font-weight: 400; }
.assistant-aside__note { padding: 24px; color: var(--paper); background: rgba(30, 58, 66, .88); border: 1px solid rgba(238, 234, 224, .15); }
.assistant-aside__note p { margin: 12px 0 0; color: rgba(238, 234, 224, .67); font-family: "Noto Serif SC", serif; font-size: 16px; line-height: 1.7; }
.growth-hero { display: grid; grid-template-columns: 190px minmax(0, 1fr) 280px; align-items: center; gap: 44px; padding: 44px; color: var(--ink); background: var(--paper); 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: 9px; letter-spacing: .18em; }
.growth-hero__seal strong { margin: 5px 0; color: var(--red); font-family: "Noto Serif SC", serif; font-size: 56px; font-weight: 500; line-height: .9; }
.growth-hero__seal small { color: var(--rock); font-size: 9px; }
.growth-hero__copy .section-kicker { color: var(--red); }
.growth-hero__copy h2 { margin: 13px 0; font-family: "Noto Serif SC", serif; font-size: 55px; font-weight: 500; line-height: 1.08; }
.growth-hero__copy p { max-width: 460px; margin: 0 0 26px; color: var(--rock); font-size: 12px; line-height: 1.9; }
.growth-hero__meter { align-self: end; }
.meter-label { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 13px; color: var(--rock); font-size: 9px; }
.meter-label strong { color: var(--ink); font-size: 17px; font-weight: 500; }
.meter-label small { color: var(--rock); font-size: 9px; font-weight: 400; }
.growth-hero__meter > span { display: block; margin-top: 10px; color: var(--rock); font-size: 9px; }
.achievements { margin-top: 72px; color: var(--paper); }
.achievements .section-title h2 { color: var(--paper); }
.achievements .section-title > div > span { color: rgba(238, 234, 224, .42); }
.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: 22px; border: 1px solid rgba(238, 234, 224, .15); 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: ui-monospace, monospace; font-size: 11px; }
.achievement h3 { margin: 8px 0 5px; font-family: "Noto Serif SC", serif; font-size: 19px; font-weight: 500; }
.achievement p { margin: 0; color: rgba(238, 234, 224, .47); font-size: 10px; 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: 30px; margin-top: 28px; padding: 44px 50px; 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: rgba(238, 234, 224, .18); transform: rotate(-12deg); }
.summit-tease h2 { margin: 13px 0 8px; font-family: "Noto Serif SC", serif; font-size: 47px; font-weight: 500; line-height: 1.08; }
.summit-tease__height { position: relative; z-index: 1; color: var(--gold-light); font-family: "Noto Serif SC", serif; font-size: 52px; white-space: nowrap; }
.summit-tease__height small { font-size: 20px; }
.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: 10px; letter-spacing: .14em; }
.map-stage__title strong { display: block; margin-top: 14px; font-family: "Noto Serif SC", serif; font-size: 60px; 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 13px; color: var(--ink); text-align: left; background: rgba(238, 234, 224, .94); 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: ui-monospace, monospace; font-size: 8px; }
.map-node strong { margin-left: 0; font-family: "Noto Serif SC", serif; font-size: 18px; font-weight: 500; }
.map-node small { margin-top: 3px; color: var(--rock); font-size: 9px; }
.map-node em { margin-left: 0; color: var(--gold); font-family: ui-monospace, monospace; font-size: 9px; 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: rgba(238, 234, 224, .58); font-size: 9px; line-height: 2; }
.profile-card__top { display: grid; grid-template-columns: 70px minmax(0, 1fr) 36px; align-items: center; gap: 18px; }
.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: "Noto Serif SC", serif; font-size: 30px; }
.profile-card__top h2 { margin: 8px 0 3px; font-family: "Noto Serif SC", serif; font-size: 32px; font-weight: 500; }
.profile-card__top p { margin: 0; color: var(--rock); font-size: 10px; }
.profile-card__path { display: flex; align-items: center; gap: 13px; margin: 34px 0; color: var(--rock); font-size: 9px; }
.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: 18px; }
.settings-list { padding: 36px; }
.settings-list .section-title h2 { font-size: 29px; }
.setting-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) 22px; align-items: center; gap: 13px; width: 100%; padding: 17px 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: 11px; font-weight: 500; }
.setting-row small { margin-top: 5px; color: var(--rock); font-size: 9px; 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: 22px; }
.settings-account, .settings-service, .settings-panel { padding: 34px; color: var(--ink); background: rgba(238, 234, 224, .97); 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: 5px 0 0; font-family: "Noto Serif SC", serif; font-size: 32px; font-weight: 500; }
.settings-account__heading p { margin: 0; color: var(--rock); font-size: 12px; 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: 10px; }
.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: 18px 24px; margin: 31px 0; padding: 20px 0; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.settings-facts div { display: grid; gap: 6px; min-width: 0; }
.settings-facts dt { color: var(--rock); font-size: 9px; }
.settings-facts dd { margin: 0; color: var(--ink); font-size: 11px; 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: 10px; }
.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: 9px; letter-spacing: .12em; }
.service-status-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 9px; align-items: center; gap: 12px; padding: 17px 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: 11px; font-weight: 500; }
.service-status-row small { margin-top: 5px; color: rgba(238, 234, 224, .55); font-size: 9px; 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: 19px 0 0; color: rgba(238, 234, 224, .48); font-size: 9px; line-height: 1.7; }
.settings-panel { grid-column: 1 / -1; }
.settings-panel--feedback { border-left: 1px dashed rgba(189, 141, 67, .5); }
.settings-panel__stamp { color: var(--red); font-family: ui-monospace, monospace; font-size: 9px; letter-spacing: .12em; }
.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: 9px; }
.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; outline: 0; font-size: 11px; }
.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-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: 9px; line-height: 1.6; }
.settings-form__footer .button { flex: 0 0 auto; }
.settings-panel--preferences .setting-row { padding: 14px 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); outline: 0; font-size: 10px; }
.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 .feature-nav-trigger, .app-shell--auth .feature-nav-overlay, .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: 34px; color: var(--gold-light); border: 1px solid rgba(228, 189, 112, .6); font-family: "Noto Serif SC", serif; font-size: 31px; }
.auth-visual h1 { margin: 17px 0; font-family: "Noto Serif SC", serif; font-size: 68px; font-weight: 500; line-height: 1.04; }
.auth-visual h1 em { color: var(--gold-light); }
.auth-visual p { max-width: 330px; color: rgba(238, 234, 224, .57); font-size: 12px; line-height: 1.9; }
.auth-visual__line { width: 150px; height: 1px; margin: 44px 0 17px; background: var(--gold-light); }
.auth-visual > span:last-child { color: rgba(238, 234, 224, .4); font-size: 9px; letter-spacing: .17em; }
.auth-panel { width: 100%; max-width: 460px; justify-self: end; padding: 39px; }
.panel-heading h2 { margin: 11px 0 6px; color: var(--ink); font-family: "Noto Serif SC", serif; font-size: 35px; font-weight: 500; }
.panel-heading p { margin: 0 0 28px; color: var(--rock); font-size: 11px; }
.auth-tabs { display: grid; grid-template-columns: repeat(2, 1fr); margin-bottom: 22px; border-bottom: 1px solid var(--line-dark); }
.auth-tabs button { padding: 11px 0; color: var(--rock); border-bottom: 2px solid transparent; font-size: 10px; }
.auth-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--gold); }
.auth-form { display: grid; gap: 17px; }
.auth-form label { display: grid; gap: 8px; color: var(--rock); font-size: 9px; }
.auth-form input { min-height: 46px; padding: 0 13px; color: var(--ink); background: var(--paper-dark); border: 1px solid transparent; outline: 0; font-size: 11px; }
.auth-form input:focus { border-color: var(--gold); }
.auth-form .button { margin-top: 7px; }
.auth-divider { position: relative; margin: 24px 0; border-top: 1px solid var(--line-dark); text-align: center; }
.auth-divider span { position: relative; top: -8px; padding: 0 10px; color: var(--rock); background: var(--paper); font-size: 9px; }
.form-footnote { margin: 22px 0 0; color: var(--rock); font-size: 9px; text-align: center; }
.form-footnote a { color: var(--red); }

/* 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: 23px 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: 14px; color: var(--red); font-family: ui-monospace, monospace; font-size: 8px; letter-spacing: .08em; }
.interface-tour__topline span:last-child { color: var(--rock); text-align: right; }
.interface-tour__card h2 { margin: 17px 0 8px; color: var(--ink); font-family: var(--font-display); font-size: 29px; font-weight: 400; line-height: 1.2; }
.interface-tour__card p { margin: 0; color: var(--rock); font-family: var(--font-reading); font-size: 12px; line-height: 1.8; }
.interface-tour__path { display: flex; align-items: center; gap: 7px; margin-top: 18px; padding-top: 13px; color: var(--red); border-top: 1px solid var(--line-dark); font-size: 9px; }
.interface-tour__path i { color: var(--gold); font-style: normal; }
.interface-tour__actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; }
.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: 9px; }
.interface-tour__skip:hover { color: var(--red); border-bottom-color: var(--red); }
.onboarding-loop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: center; gap: 10px; margin: -8px 0 28px; padding: 15px 17px; color: var(--ink); background: rgba(217, 211, 198, .46); border-top: 1px solid rgba(169, 75, 64, .28); border-bottom: 1px solid rgba(13, 23, 26, .11); }
.onboarding-loop span { display: grid; gap: 5px; min-width: 0; font-family: var(--font-display); font-size: 13px; }
.onboarding-loop span b { color: var(--red); font-family: ui-monospace, monospace; font-size: 8px; font-weight: 400; }
.onboarding-loop span small { color: var(--rock); font-family: var(--font-interface); font-size: 8px; }
.onboarding-loop i { color: var(--gold); font-style: normal; }
.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 30px; 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: 15px auto; font-family: "Noto Serif SC", serif; font-size: 56px; font-weight: 500; line-height: 1.1; }
.state-scene p { max-width: 420px; margin: 0 auto 27px; color: rgba(238, 234, 224, .59); font-size: 12px; line-height: 1.8; }
.state-scene small { display: block; margin-top: 22px; color: rgba(238, 234, 224, .35); font-size: 9px; }
.state-scene small .demo-state { color: rgba(238, 234, 224, .42); border-color: rgba(238, 234, 224, .22); }

/* Persistent state axis */
.status-axis { position: fixed; right: 25px; bottom: 25px; z-index: 4; width: 182px; padding: 15px 16px; color: rgba(238, 234, 224, .72); background: rgba(8, 18, 21, .74); border: 1px solid rgba(238, 234, 224, .16); }
.status-axis__topline, .status-axis__legend { display: flex; justify-content: space-between; gap: 8px; color: rgba(238, 234, 224, .4); font-size: 8px; }
.status-axis__demo { color: var(--gold-light); text-align: right; }
.status-axis__height { display: flex; align-items: baseline; gap: 7px; margin: 13px 0 9px; }
.status-axis__height strong { color: var(--gold-light); font-size: 20px; font-weight: 500; }
.status-axis__height span { color: rgba(238, 234, 224, .4); font-size: 8px; }
.status-axis__track { position: relative; height: 3px; background: rgba(238, 234, 224, .14); }
.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: 6px; font-size: 8px; }
.status-axis__balance { display: flex; align-items: center; gap: 10px; margin-top: 17px; padding-top: 14px; border-top: 1px solid rgba(238, 234, 224, .13); }
.status-axis__balance .balance-wheel { width: 37px; height: 37px; }
.status-axis__balance .balance-wheel b { font-size: 15px; }
.balance-copy { display: grid; gap: 2px; }
.balance-copy span, .balance-copy em { color: rgba(238, 234, 224, .42); font-size: 8px; font-style: normal; }
.balance-copy strong { color: var(--paper); font-size: 12px; font-weight: 500; }
.balance-copy strong small { color: var(--rock-light); font-size: 9px; font-weight: 400; }
.status-axis__lines { display: grid; gap: 8px; margin-top: 13px; }
.status-axis__lines > span { display: grid; grid-template-columns: 20px 39px 1fr 26px; align-items: center; gap: 4px; color: rgba(238, 234, 224, .42); font-size: 8px; }
.status-axis__lines .gua-mark { color: var(--gold-light); font-size: 11px; }
.status-axis__lines i { position: relative; display: block; height: 2px; background: rgba(238, 234, 224, .13); }
.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: 8px; font-weight: 400; text-align: right; }
.status-axis__next { display: block; margin-top: 13px; padding-top: 10px; color: rgba(238, 234, 224, .37); border-top: 1px solid rgba(238, 234, 224, .12); font-size: 8px; }
.toast-region { position: fixed; left: 50%; bottom: 28px; z-index: 8; max-width: min(440px, calc(100vw - 32px)); padding: 10px 15px; color: var(--paper); background: var(--ink); border: 1px solid rgba(228, 189, 112, .6); font-size: 10px; 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: rgba(238, 234, 224, .98); }
.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: 19px 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: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 8px; 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; }
.knowledge-detail__note { position: relative; margin: 22px 0 27px; padding: 21px 20px 18px; background: #e4dccd; border: 0; border-top: 1px solid rgba(169, 75, 64, .36); transform: rotate(-.35deg); }
.knowledge-detail__note::before { content: ""; position: absolute; top: -6px; right: 18px; width: 34px; height: 12px; background: rgba(189, 141, 67, .2); border: 1px solid rgba(189, 141, 67, .36); transform: rotate(5deg); }
.knowledge-detail__note::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(13, 23, 26, .08); pointer-events: none; }
.knowledge-detail__note > * { position: relative; z-index: 1; }
.knowledge-detail__note > span { color: var(--red); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 8px; letter-spacing: .13em; }
.knowledge-detail__note p { margin-top: 10px; color: var(--ink-soft); font-size: 13px; line-height: 1.8; }
.study-aside__tip { position: relative; grid-template-columns: 40px minmax(0, 1fr); background: rgba(30, 58, 66, .72); border: 0; border-top: 1px solid rgba(228, 189, 112, .5); border-bottom: 1px dashed rgba(238, 234, 224, .22); }
.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: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 8px; letter-spacing: .1em; }
.study-aside__tip p { color: var(--paper); font-family: "Noto Serif SC", serif; font-size: 16px; line-height: 1.55; }
.study-aside__tip a { margin-top: 11px; }
.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 19px 14px; 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: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 8px; letter-spacing: .1em; }
.message__body p { padding: 0; background: transparent; box-shadow: none; font-size: 17px; line-height: 1.55; }
.message__footer { margin-top: 13px; 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-left: 42px; padding-right: 230px; }
  .page--home { margin-left: -42px; margin-right: -230px; }
  .home-hero { padding-left: 60px; padding-right: 60px; }
  .home-overview__lead, .home-route, .quote-panel, .home-next { padding-left: 60px; padding-right: 60px; }
  .growth-hero { grid-template-columns: 180px minmax(0, 1fr); gap: 32px; }
  .growth-hero__meter { grid-column: 2; }
}

@media (max-width: 980px) {
  .nav-rail { display: none; }
  .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 19px; color: var(--paper); background: rgba(8, 18, 21, .84); border-bottom: 1px solid rgba(238, 234, 224, .15); }
  .mobile-nav-bar__home { color: var(--gold-light); }
  .mobile-nav-bar__home .gua-mark { font-size: 20px; }
  .mobile-nav-bar__label { margin-left: auto; margin-right: 16px; color: rgba(238, 234, 224, .5); font-size: 9px; 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: 21px 21px 28px; 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: 21px; border-bottom: 1px solid rgba(238, 234, 224, .15); color: var(--gold-light); font-family: "Noto Serif SC", serif; font-size: 21px; }
  .mobile-nav-panel nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; padding-top: 23px; }
  .mobile-nav-panel .nav-node { position: relative; inset: auto !important; width: auto; height: auto; display: grid; gap: 8px; padding: 19px 8px; color: rgba(238, 234, 224, .62); border: 1px solid rgba(238, 234, 224, .12); }
  .mobile-nav-panel .nav-node__orbit { display: none; }
  .mobile-nav-panel .nav-node__label { position: static; opacity: 1; transform: none; color: inherit; font-size: 10px; }
  .mobile-nav-panel .nav-node.is-active { color: var(--gold-light); border-color: rgba(228, 189, 112, .62); }
  .topbar { height: 64px; padding: 0 19px 0 84px; }
  .topbar__eyebrow { display: none; }
  .topbar__title { font-size: 17px; }
  .topbar__right { gap: 11px; }
  .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 24px 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; }
  .knowledge-atlas { 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; }
  .assistant-aside__portrait { min-height: 340px; }
  .profile-layout { gap: 18px; }
  .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) {
  .feature-nav-trigger { top: 10px; left: 10px; width: 62px; height: 62px; }
  .feature-nav-trigger__dial { width: 48px; height: 48px; }
  .feature-nav-trigger__direction { width: 11px; height: 11px; font-size: 8px; transform: translate(-50%, -50%) rotate(var(--trigger-angle)) translateY(-20px); }
  .feature-nav-trigger__core { width: 26px; height: 26px; }
  .feature-nav-trigger__core .gua-mark { font-size: 23px; }
  .feature-nav-trigger__label { top: 63px; display: block; font-size: 7px; letter-spacing: .08em; }
  .page--auth { margin: 0; padding: 0 18px 32px; }
  .app-shell--auth .topbar { padding: 0 19px; }
  .topbar__auth-note { display: none; }
  .page--auth .auth-wrap { min-height: auto; gap: 28px; padding-top: 32px; }
  .page--auth .auth-visual { padding: 0 7px; }
  .page--auth .auth-visual h1 { font-size: 44px; }
  .page--auth .auth-panel { padding: 26px 19px; }
  .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: 19px 17px 16px; }
  .interface-tour__card h2 { font-size: 24px; }
  .interface-tour__card p { font-size: 11px; }
  .interface-tour__path { flex-wrap: wrap; }
  .interface-tour__actions { align-items: stretch; flex-direction: column; }
  .interface-tour__actions > div { justify-content: flex-end; }
  .feature-nav-overlay { transform-origin: 40px 39px; }
  .feature-nav-overlay__inner { padding: 88px 15px 62px; }
  .feature-nav-overlay__topline { top: 23px; left: 77px; }
  .feature-nav-overlay__topline span { font-size: 14px; }
  .feature-nav-overlay__topline small { display: none; }
  .feature-nav-overlay__close { top: 17px; right: 17px; width: 36px; height: 36px; }
  .feature-nav-dial { width: min(520px, 88vw, 78vh); }
  .feature-nav-center { width: 112px; height: 112px; }
  .feature-nav-center strong { font-size: 28px; }
  .feature-nav-center span { margin-top: 4px; font-size: 11px; }
  .feature-nav-center small { display: none; }
  .feature-nav-node { grid-template-columns: 25px minmax(0, 1fr); width: 101px; min-height: 63px; gap: 6px; padding: 8px; }
  .feature-nav-node__gua { width: 24px; height: 24px; font-size: 13px; }
  .feature-nav-node__label { font-size: 10px; }
  .feature-nav-node small { display: none; }
  .feature-nav-node--east, .feature-nav-node--west { top: 50%; }
  .feature-nav-overlay__footer { right: 17px; bottom: 15px; left: 17px; }
  .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: 45px 18px 70px; }
  .page--home { margin: -64px -18px -70px; }
  .page-intro { width: 100%; max-width: 100%; margin-bottom: 39px; }
  .page-intro__gua { top: -14px; right: 0; font-size: 70px; }
  .page-intro h1 { max-width: 100%; font-size: 40px; }
  .page-intro p { max-width: 100%; font-size: 12px; }
  .home-hero { min-height: 680px; display: block; padding: 136px 25px 42px; }
  .home-hero::before { background: linear-gradient(90deg, rgba(7, 17, 20, .78), rgba(7, 17, 20, .28)); }
  .home-hero h1 { font-size: 78px; }
  .home-hero__copy p { max-width: 255px; font-size: 12px; }
  .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 25px; }
  .home-overview__stats { padding: 38px 25px; border-top: 1px solid var(--line-dark); border-left: 0; }
  .home-overview h2 { font-size: 34px; }
  .home-route .section-title { align-items: flex-start; flex-direction: column; }
  .task-row { grid-template-columns: 30px 38px minmax(0, 1fr); gap: 11px; min-height: 102px; }
  .task-row__step { font-size: 11px; }
  .task-row__step span { left: 14px; top: 35px; height: 68px; }
  .task-row__gua { width: 35px; height: 35px; font-size: 16px; }
  .task-row h3 { font-size: 12px; line-height: 1.45; }
  .task-row__state { grid-column: 3; justify-content: flex-start; margin-top: -6px; }
  .quote-panel { border-right: 0; border-bottom: 1px solid var(--line-dark); }
  .quote-panel p { font-size: 23px; }
  .goals-layout, .study-layout, .assistant-layout, .profile-layout { gap: 16px; }
  .goal-selection, .study-focus, .assistant-dialog, .profile-card, .settings-list { padding: 23px 19px; }
  .section-title { align-items: flex-start; flex-direction: column; }
  .section-title h2 { font-size: 29px; }
  .goal-option { grid-template-columns: 43px minmax(0, 1fr) 18px; gap: 12px; padding: 14px; }
  .goal-option__icon { width: 38px; height: 38px; }
  .goal-option strong { font-size: 11px; }
  .goal-option small { font-size: 9px; }
  .goal-foot { align-items: flex-start; flex-direction: column; gap: 13px; }
  .orientation-panel { min-height: 330px; padding: 24px; }
  .orientation-panel__compass { width: 180px; }
  .orientation-panel h3 { font-size: 24px; }
  .plan-head { grid-template-columns: 1fr; gap: 12px; }
  .plan-head__progress, .plan-head__balance { min-height: auto; padding: 22px 19px; }
  .plan-head__balance { min-height: 100px; }
  .plan-route { grid-template-columns: 1fr; gap: 21px; }
  .plan-route__label { padding-top: 0; }
  .plan-route__list { padding-left: 0; }
  .study-focus__title { grid-template-columns: 45px minmax(0, 1fr); gap: 13px; margin: 29px 0 34px; }
  .study-focus__gua { width: 43px; height: 43px; font-size: 20px; }
  .study-focus__title h2 { font-size: 29px; }
  .study-focus__title p { grid-column: 2; font-size: 10px; }
  .study-question h3 { font-size: 18px; }
  .answer-line { font-size: 10px; }
  .evidence-submit { margin-top: 37px; padding-top: 24px; }
  .evidence-submit .section-title h2, .evidence-review .section-title h2, .memory-loop .section-title h2 { font-size: 24px; }
  .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: 17px; }
  .knowledge-capture-link { width: 100%; }
  .evidence-review, .memory-loop { padding: 24px 19px; }
  .memory-loop__item { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; }
  .memory-loop__actions, .memory-loop__confirmed { grid-column: 2; padding-top: 6px; }
  .study-aside, .assistant-aside { grid-template-columns: 1fr; }
  .review-top { width: 100%; max-width: calc(100vw - 36px); grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 27px 19px; overflow: hidden; }
  .review-top__bagua { width: 100%; max-width: 100%; overflow: hidden; }
  .review-orbit { width: 148px; height: 148px; justify-self: center; }
  .review-top__stats { width: 100%; }
  .review-top__copy h2 { font-size: 34px; }
  .knowledge-head { grid-template-columns: 1fr; gap: 37px; margin-bottom: 54px; }
  .knowledge-head__map { width: min(280px, 90vw); }
  .knowledge-head__copy h2 { font-size: 35px; }
  .knowledge-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .knowledge-card { min-height: 204px; padding: 16px; }
  .knowledge-card h3 { font-size: 12px; }
  .knowledge-card p { font-size: 8px; }
  .knowledge-row { grid-template-columns: 35px minmax(0, 1fr) 22px; gap: 10px; }
  .knowledge-row__mastery { grid-column: 2 / 4; }
  .knowledge-row > a { grid-column: 3; grid-row: 1; }
  .knowledge-library__heading { min-height: 0; padding: 24px 19px; }
  .knowledge-library__heading h2 { font-size: 31px; }
  .knowledge-library__heading p { font-size: 10px; }
  .knowledge-library__seal { width: 64px; height: 64px; font-size: 23px; }
  .knowledge-library__toolbar { align-items: flex-start; flex-direction: column; }
  .knowledge-search { width: 100%; }
  .knowledge-graph { height: 500px; }
  .knowledge-map-node { width: 112px; min-height: 65px; padding: 9px 10px; }
  .knowledge-map-node strong { font-size: 10px; }
  .knowledge-map-node small { font-size: 7px; }
  .knowledge-trail > div:first-child { align-items: flex-start; flex-direction: column; gap: 5px; }
  .knowledge-trail__list { grid-template-columns: 1fr; }
  .knowledge-detail { position: static; padding: 23px 19px; }
  .knowledge-detail h2 { font-size: 28px; }
  .knowledge-add-button { width: 100%; }
  .knowledge-capture { padding: 19px; }
  .knowledge-capture__heading h3 { font-size: 19px; }
  .knowledge-capture__fields { grid-template-columns: 1fr; }
  .knowledge-capture__note { grid-column: auto; }
  .knowledge-capture__footer { align-items: stretch; flex-direction: column; gap: 13px; }
  .knowledge-capture__footer .button { width: 100%; }
  .assistant-dialog__header { flex-wrap: wrap; padding: 18px; }
  .assistant-dialog__header small { width: 100%; margin-left: 58px; }
  .assistant-dialog__body { padding: 23px 18px; }
  .message p { font-size: 15px; }
  .suggestion-list { margin-left: 0; }
  .assistant-guide-card { min-height: 390px; }
  .assistant-guide-card__art { min-height: 245px; }
  .assistant-guide-picker { padding: 16px; }
  .guide-option { min-height: 96px; }
  .growth-hero { grid-template-columns: 1fr; gap: 29px; padding: 27px 19px; }
  .growth-hero__seal { justify-self: center; width: 163px; height: 163px; }
  .growth-hero__meter { grid-column: auto; }
  .growth-hero__copy h2 { font-size: 35px; }
  .achievement-grid { grid-template-columns: 1fr; }
  .achievement { min-height: 128px; }
  .summit-tease { align-items: flex-start; flex-direction: column; padding: 29px 23px; }
  .summit-tease__height { align-self: flex-end; margin-top: -19px; }
  .map-stage { min-height: 560px; margin: 0 -2px; }
  .map-stage__title { left: 23px; top: 27px; }
  .map-stage__title strong { font-size: 40px; }
  .map-stage__caption { left: 23px; bottom: 24px; }
  .map-node { width: 125px; }
  .map-node strong { font-size: 16px; }
  .map-node small, .map-node em { font-size: 8px; }
  .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: 23px; }
  .profile-card__top h2 { font-size: 27px; }
  .profile-card__footer { gap: 9px; }
  .profile-card__footer .meta-line strong { font-size: 15px; }
  .settings-list { padding: 25px 19px; }
  .settings-layout { grid-template-columns: 1fr; gap: 16px; }
  .settings-account, .settings-service, .settings-panel { padding: 25px 19px; }
  .settings-panel { grid-column: auto; }
  .settings-account__heading h2 { font-size: 27px; }
  .settings-facts { gap: 15px; }
  .settings-account__actions { align-items: stretch; }
  .settings-account__actions .text-link { width: 100%; margin-left: 0; }
  .settings-form__grid { grid-template-columns: 1fr; gap: 13px; }
  .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: 28px; padding: 32px 0 0; }
  .auth-visual__seal { margin-bottom: 24px; }
  .auth-visual h1 { font-size: 46px; }
  .auth-visual__line { margin: 29px 0 14px; }
  .auth-panel { padding: 26px 19px; }
  .state-scene { min-height: 65vh; }
  .state-scene h1 { font-size: 38px; }
  .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: 32px; }
  .bagua-field__center { width: 96px; height: 96px; }
  .bagua-field__center span { font-size: 31px; }
  .bagua-node { grid-template-columns: 22px minmax(0, 1fr); width: 82px; padding: 5px 4px; gap: 3px; }
  .bagua-node__symbol { width: 21px; height: 24px; font-size: 13px; }
  .bagua-node__copy b { font-size: 8px; }
  .bagua-node__copy strong { font-size: 10px; }
  .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: 23px; }
  .home-next__stamp { top: 22px; right: 19px; }
  .evidence-review__grid > div { min-height: 96px; padding: 17px 15px; }
  .evidence-review__grid > div::before { top: 14px; right: 14px; }
  .knowledge-detail__note { margin-right: 3px; }
  .message__body { padding: 14px 15px 13px; }
  .message__body p { font-size: 15px; }
  .study-aside__tip::before { left: 39px; }
}

@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. */
:root {
  --font-display: "FZKai-Z03", "KaiTi", "STKaiti", "Noto Serif SC", "Songti SC", serif;
  --font-reading: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --font-interface: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
}

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,
.study-question h3,
.evidence-submit .section-title h2,
.review-top__copy h2,
.evidence-review .section-title h2,
.knowledge-library__heading h2,
.knowledge-detail h2,
.knowledge-card h3,
.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,
.study-question h3,
.review-top__copy p,
.knowledge-detail__summary,
.assistant-guide-card__copy p,
.assistant-aside__note p,
.growth-hero__copy p,
.summit-tease p,
.map-stage__caption { font-family: var(--font-reading); }

.section-title h2 { font-size: 38px; 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: 18px; 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: rgba(238, 234, 224, .17); }
.home-overview__stats .meta-line span { color: rgba(238, 234, 224, .48); }
.home-overview__stats .meta-line strong { color: var(--paper); font-family: var(--font-display); font-size: 20px; }
.home-overview__stats .home-overview__seal span { color: rgba(238, 234, 224, .48); }

/* Large work surfaces stop behaving like identical cards. */
.goal-selection,
.study-focus,
.assistant-dialog,
.profile-card,
.settings-list,
.plan-head__progress,
.plan-head__balance,
.review-top,
.evidence-review,
.knowledge-detail,
.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: 17px; 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: ui-monospace, monospace; font-size: 8px; writing-mode: vertical-rl; }
.plan-head__balance { border-left: 3px solid var(--gold-light); }
.review-top { position: relative; background: rgba(247, 244, 237, .96); border-left: 3px solid var(--red); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); }
.review-top::after { content: "回环"; position: absolute; top: 28px; right: 31px; color: rgba(169, 75, 64, .4); font-family: var(--font-display); font-size: 19px; writing-mode: vertical-rl; pointer-events: none; }
.knowledge-detail { border-left: 1px solid rgba(169, 75, 64, .45); border-top-width: 1px; }
.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,
.answer-line,
.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,
.answer-line:hover,
.answer-line.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,
.answer-line > span:first-child,
.evidence-level__number { border-radius: 50%; font-family: var(--font-display); }
.answer-line { padding-top: 14px; padding-bottom: 14px; }
.answer-line > span:first-child { width: 29px; height: 29px; }
.evidence-level { min-height: 70px; }
.knowledge-trail__item { padding: 14px 4px; background: transparent; border: 0; border-bottom: 1px solid rgba(238, 234, 224, .2); }
.knowledge-trail__item:hover { background: rgba(228, 189, 112, .08); border-color: rgba(228, 189, 112, .58); transform: translateX(5px); }
.guide-option { background: transparent; border: 0; border-top: 1px solid rgba(238, 234, 224, .18); border-bottom: 1px solid rgba(238, 234, 224, .12); }
.guide-option:hover,
.guide-option.is-selected { background: rgba(228, 189, 112, .1); border-color: rgba(228, 189, 112, .72); transform: translateX(4px); }
.achievement { border: 0; border-top: 1px solid rgba(238, 234, 224, .2); background: transparent; }
.achievement.is-unlocked { border-color: rgba(228, 189, 112, .58); background: rgba(30, 58, 66, .42); }
.setting-row { padding-top: 19px; padding-bottom: 19px; }
.task-row h3 { font-size: 18px; }
.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 rgba(238, 234, 224, .18); box-shadow: none; }
.meta-line strong,
.plan-head__progress > strong,
.review-top__stats .meta-line 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: 34px clamp(19px, 4vw, 64px) 62px; 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 .world-stage { display: none; }
.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: 145px; }
.app-shell--onboarding .feature-nav-trigger { color: var(--ink); background: rgba(247, 244, 237, .88); border-color: rgba(13, 23, 26, .3); }
.app-shell--onboarding .feature-nav-trigger__label { top: 79px; color: rgba(13, 23, 26, .7); font-size: 9px; letter-spacing: .08em; opacity: 1; }
.app-shell--onboarding .app-frame { position: relative; z-index: 1; }
.app-shell--onboarding .page-view { padding-top: 38px; }
.onboarding-head__aside { display: grid; justify-items: end; align-content: end; gap: 10px; }
.onboarding-nav-note { color: rgba(13, 23, 26, .55); font-family: var(--font-reading); font-size: 11px; }
.onboarding-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 34px; color: var(--ink); }
.onboarding-head h1 { margin: 14px 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-progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0 0 18px; padding: 0; list-style: none; border-top: 1px solid rgba(13, 23, 26, .24); border-bottom: 1px solid rgba(13, 23, 26, .18); }
.onboarding-progress li { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 17px; color: rgba(13, 23, 26, .42); border-right: 1px solid rgba(13, 23, 26, .13); }
.onboarding-progress li:last-child { border-right: 0; }
.onboarding-progress li span { color: inherit; font-family: ui-monospace, monospace; font-size: 10px; }
.onboarding-progress li strong { color: inherit; font-family: var(--font-display); font-size: 15px; font-weight: 400; }
.onboarding-progress li.is-current { color: var(--red); background: rgba(247, 244, 237, .46); }
.onboarding-progress li.is-current::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--red); }
.onboarding-progress li.is-complete { color: rgba(13, 23, 26, .68); }
.onboarding-panel { padding: 42px; color: var(--ink); background: rgba(247, 244, 237, .98); border-top: 2px solid var(--red); }
.onboarding-panel__heading { max-width: 680px; margin-bottom: 31px; }
.onboarding-panel__heading h2 { margin: 12px 0 7px; font-size: 39px; 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-reading); font-size: 12px; line-height: 1.8; }
.onboarding-form { display: grid; gap: 27px; }
.onboarding-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 20px; }
.onboarding-form label { display: grid; gap: 8px; color: var(--rock); font-size: 9px; }
.onboarding-form label small { display: inline; color: rgba(87, 95, 92, .62); font-size: 8px; }
.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; outline: 0; font-size: 11px; }
.onboarding-form input:focus, .onboarding-form select:focus { border-color: var(--gold); }
.onboarding-form__section { display: grid; gap: 12px; padding-top: 23px; border-top: 1px solid var(--line-dark); }
.onboarding-form__label { color: var(--rock); font-size: 9px; }
.onboarding-goal-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.onboarding-goal-options .goal-option { min-height: 106px; }
.onboarding-form__footer { display: flex; justify-content: space-between; align-items: end; gap: 20px; padding-top: 4px; }
.onboarding-form__footer label { width: 170px; }
.onboarding-guide-layout { display: grid; grid-template-columns: minmax(250px, .82fr) minmax(0, 1.18fr); gap: 24px; align-items: stretch; }
.onboarding-guide-preview { display: grid; grid-template-rows: minmax(245px, 1fr) auto; min-height: 430px; overflow: hidden; color: var(--paper); background: var(--ink); border-bottom: 3px solid var(--gold); }
.onboarding-guide-preview__art { display: grid; place-items: center; min-height: 245px; background: var(--paper-light); }
.onboarding-guide-preview__art img { 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)); }
.onboarding-guide-preview__copy { padding: 22px 23px 24px; }
.onboarding-guide-preview__copy > span, .onboarding-guide-preview__copy small { color: rgba(238, 234, 224, .5); font-size: 9px; }
.onboarding-guide-preview__copy h3 { margin: 8px 0 7px; color: var(--gold-light); font-size: 25px; }
.onboarding-guide-preview__copy p { margin: 0 0 12px; color: rgba(238, 234, 224, .74); font-family: var(--font-reading); font-size: 13px; line-height: 1.7; }
.onboarding-guide-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; align-content: start; }
.onboarding-guide-option { display: grid; grid-template-columns: 57px minmax(0, 1fr) 18px; align-items: center; gap: 11px; min-width: 0; min-height: 96px; padding: 11px 0; color: var(--ink); text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--line-dark); }
.onboarding-guide-option:hover, .onboarding-guide-option.is-selected { color: var(--red); }
.onboarding-guide-option__art { display: grid; place-items: center; width: 57px; height: 67px; overflow: hidden; background: var(--paper-light); border: 1px solid rgba(13, 23, 26, .12); }
.onboarding-guide-option__art img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; opacity: .94; filter: saturate(.82) contrast(1.04); }
.onboarding-guide-option strong, .onboarding-guide-option small { display: block; overflow-wrap: anywhere; }
.onboarding-guide-option strong { color: var(--ink); font-family: var(--font-display); font-size: 14px; font-weight: 400; }
.onboarding-guide-option.is-selected strong { color: var(--red); }
.onboarding-guide-option small { margin-top: 6px; color: var(--rock); font-size: 8px; line-height: 1.5; }
.onboarding-guide-option i { color: var(--red); }
.onboarding-actions { display: flex; justify-content: space-between; gap: 14px; margin-top: 31px; padding-top: 19px; border-top: 1px solid var(--line-dark); }
.onboarding-feature-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: stretch; }
.onboarding-feature-companion { display: grid; align-content: center; gap: 8px; min-height: 190px; padding: 24px; color: var(--paper); background: var(--ink); border-left: 3px solid var(--gold); }
.onboarding-feature-companion__mark { display: grid; place-items: center; width: 46px; height: 46px; color: var(--gold-light); border: 1px solid rgba(228, 189, 112, .6); font-family: var(--font-display); font-size: 22px; }
.onboarding-feature-companion strong { font-family: var(--font-display); font-size: 18px; font-weight: 400; }
.onboarding-feature-companion small { color: rgba(238, 234, 224, .52); font-size: 8px; line-height: 1.55; }
.onboarding-feature-current { position: relative; min-height: 190px; padding: 27px 30px; background: var(--paper-dark); border-left: 2px solid var(--red); }
.onboarding-feature-current__top { display: flex; justify-content: space-between; gap: 12px; color: var(--red); font-family: ui-monospace, monospace; font-size: 8px; letter-spacing: .09em; }
.onboarding-feature-current h3 { margin: 23px 0 6px; color: var(--ink); font-size: 32px; }
.onboarding-feature-current p { max-width: 530px; margin: 0 0 15px; color: var(--rock); font-family: var(--font-reading); font-size: 14px; line-height: 1.75; }
.onboarding-feature-current > strong { display: block; color: var(--red); font-size: 10px; font-weight: 500; }
.onboarding-feature-current > .button { margin-top: 19px; }
.onboarding-feature-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin-top: 22px; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.onboarding-feature-item { display: grid; gap: 6px; min-height: 76px; padding: 13px 10px; color: var(--rock); font: inherit; text-align: left; background: transparent; border: 0; border-right: 1px solid var(--line-dark); cursor: pointer; }
.onboarding-feature-item:last-child { border-right: 0; }
.onboarding-feature-item span { color: var(--red); font-family: var(--font-display); font-size: 17px; }
.onboarding-feature-item strong { font-size: 10px; font-weight: 500; }
.onboarding-feature-item:hover, .onboarding-feature-item.is-selected { color: var(--ink); background: rgba(169, 75, 64, .08); }

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

@media (max-width: 700px) {
  .app-shell--onboarding .topbar { padding-left: 112px; }
  .app-shell--onboarding .feature-nav-trigger { top: 8px; left: 10px; width: 74px; height: 74px; }
  .app-shell--onboarding .feature-nav-trigger__label { top: 75px; display: block; position: absolute; font-size: 8px; }
  .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: 39px; }
  .onboarding-progress { grid-template-columns: 1fr; }
  .onboarding-progress li { min-height: 45px; border-right: 0; border-bottom: 1px solid rgba(238, 234, 224, .13); }
  .onboarding-progress li:last-child { border-bottom: 0; }
  .onboarding-progress li.is-current::after { top: 0; right: auto; bottom: 0; width: 2px; height: auto; }
  .onboarding-panel { padding: 25px 19px; }
  .onboarding-panel__heading h2 { font-size: 30px; }
  .onboarding-form__grid, .onboarding-goal-options, .onboarding-guide-layout, .onboarding-feature-layout { grid-template-columns: 1fr; }
  .onboarding-form__footer { align-items: stretch; flex-direction: column; }
  .onboarding-form__footer label { width: 100%; }
  .onboarding-form__footer .button, .onboarding-actions .button { width: 100%; justify-content: center; }
  .onboarding-guide-preview { min-height: 390px; }
  .onboarding-guide-options { grid-template-columns: 1fr; }
  .onboarding-guide-option { min-height: 83px; }
  .onboarding-actions { align-items: stretch; flex-direction: column-reverse; }
  .onboarding-feature-current { padding: 23px 19px; }
  .onboarding-feature-current h3 { margin-top: 20px; font-size: 29px; }
  .onboarding-feature-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .onboarding-feature-item:nth-child(3) { border-right: 0; }
  .onboarding-feature-item:nth-child(n + 4) { border-top: 1px solid var(--line-dark); }
}

/* A knowledge base grows through layers: network for shape, directory for retrieval, inspector for meaning. */
.knowledge-workbench { margin-top: 25px; color: var(--paper); border-top: 1px solid rgba(228, 189, 112, .58); }
.knowledge-workbench__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; padding: 28px 30px 25px; background: rgba(8, 18, 21, .78); border-bottom: 1px solid rgba(238, 234, 224, .12); }
.knowledge-workbench__head h2 { margin: 12px 0 11px; color: var(--paper); font-family: var(--font-display); font-size: 36px; 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: rgba(238, 234, 224, .54); font-family: var(--font-reading); font-size: 12px; line-height: 1.8; }
.knowledge-workbench__stats { display: grid; grid-template-columns: repeat(3, minmax(70px, 1fr)); align-self: end; gap: 18px; min-width: 280px; }
.knowledge-workbench__stats .meta-line { display: grid; gap: 7px; padding: 0 0 10px; border-color: rgba(238, 234, 224, .16); }
.knowledge-workbench__stats .meta-line span { color: rgba(238, 234, 224, .45); font-size: 8px; }
.knowledge-workbench__stats .meta-line strong { color: var(--gold-light); font-family: var(--font-display); font-size: 21px; font-weight: 400; }
.knowledge-workbench__toolbar { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: rgba(13, 23, 26, .88); border-bottom: 1px solid rgba(238, 234, 224, .12); }
.knowledge-view-tabs { display: flex; gap: 3px; }
.knowledge-view-tabs button { min-width: 48px; padding: 9px 12px; color: rgba(238, 234, 224, .48); background: transparent; border: 1px solid transparent; font: inherit; font-size: 9px; }
.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 10px; color: rgba(238, 234, 224, .5); background: rgba(238, 234, 224, .06); border: 1px solid rgba(238, 234, 224, .18); }
.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; outline: 0; font: inherit; font-size: 10px; }
.knowledge-workbench__toolbar .knowledge-search input::placeholder { color: rgba(238, 234, 224, .34); }
.knowledge-workbench__toolbar .knowledge-add-button { min-height: 36px; }
.knowledge-workbench__body { display: grid; grid-template-columns: 188px minmax(0, 1fr) 286px; gap: 1px; background: rgba(238, 234, 224, .12); }
.knowledge-catalog { min-width: 0; padding: 19px 14px; color: var(--paper); background: rgba(8, 18, 21, .9); }
.knowledge-catalog__head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 6px 15px; border-bottom: 1px solid rgba(238, 234, 224, .14); }
.knowledge-catalog__head span { color: rgba(238, 234, 224, .5); font-size: 9px; }
.knowledge-catalog__head strong { color: var(--gold-light); font-family: var(--font-display); font-size: 22px; font-weight: 400; }
.knowledge-catalog__groups { display: grid; gap: 2px; margin-top: 11px; }
.knowledge-catalog__item { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: start; gap: 7px; padding: 12px 6px 10px; color: rgba(238, 234, 224, .5); 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: ui-monospace, monospace; font-size: 8px; }
.knowledge-catalog__item div { display: grid; gap: 4px; min-width: 0; }
.knowledge-catalog__item strong { font-size: 10px; font-weight: 500; }
.knowledge-catalog__item small { color: rgba(238, 234, 224, .36); font-size: 8px; line-height: 1.5; }
.knowledge-catalog__item b { color: var(--gold-light); font-family: ui-monospace, monospace; font-size: 10px; font-weight: 400; }
.knowledge-catalog__item em { grid-column: 2 / 4; color: rgba(238, 234, 224, .28); font-size: 7px; font-style: normal; }
.knowledge-catalog__foot { display: grid; gap: 7px; margin: 27px 6px 0; padding-top: 13px; border-top: 1px solid rgba(238, 234, 224, .12); }
.knowledge-catalog__foot span { color: rgba(238, 234, 224, .38); font-size: 8px; }
.knowledge-catalog__foot strong { color: var(--gold-light); font-size: 9px; font-weight: 400; line-height: 1.7; }
.knowledge-workspace { min-width: 0; padding: 16px; background: rgba(13, 23, 26, .82); }
.knowledge-network__head, .knowledge-directory__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.knowledge-network__head h3, .knowledge-directory__head h3 { margin: 8px 0 0; color: var(--paper); font-family: var(--font-display); font-size: 20px; font-weight: 400; }
.knowledge-network__mode, .knowledge-directory__head > span { color: rgba(238, 234, 224, .35); font-family: ui-monospace, monospace; font-size: 8px; }
.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 rgba(238, 234, 224, .13); }
.knowledge-network__viewport::before, .knowledge-network__viewport::after { content: ""; position: absolute; left: 50%; top: 50%; width: 70%; aspect-ratio: 1; border: 1px solid rgba(238, 234, 224, .08); 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(--paper); 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: rgba(238, 234, 224, .95); 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: ui-monospace, monospace; font-size: 7px; letter-spacing: .08em; }
.knowledge-network__core strong { margin: 4px 0 2px; color: var(--red); font-family: var(--font-display); font-size: 29px; font-weight: 400; line-height: 1; }
.knowledge-network__core small { color: var(--rock); font-size: 8px; }
.knowledge-network__node { position: absolute; z-index: 4; display: grid; grid-template-columns: 23px minmax(0, 1fr); align-items: center; gap: 7px; width: 142px; min-height: 55px; padding: 8px 10px; color: var(--paper); background: rgba(20, 43, 49, .9); border: 1px solid rgba(238, 234, 224, .21); 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: 12px; }
.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: 11px; font-weight: 400; line-height: 1.25; }
.knowledge-network__node small { grid-column: 2; color: rgba(238, 234, 224, .48); font-size: 7px; }
.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: rgba(238, 234, 224, .42); font-size: 8px; }
.knowledge-network__legend span { display: inline-flex; align-items: center; }
.knowledge-network__zoom { display: flex; align-items: center; gap: 6px; color: rgba(238, 234, 224, .46); font-family: ui-monospace, monospace; font-size: 8px; }
.knowledge-network__zoom button { min-width: 24px; min-height: 24px; padding: 0 5px; color: var(--paper); background: transparent; border: 1px solid rgba(238, 234, 224, .2); font: inherit; font-size: 10px; }
.knowledge-network__zoom button:hover { color: var(--ink); background: var(--gold-light); border-color: var(--gold-light); }
.knowledge-directory { min-height: 500px; padding: 3px 4px; }
.knowledge-directory__group { margin-top: 19px; }
.knowledge-directory__group-head { display: flex; justify-content: space-between; padding: 0 8px 8px; color: var(--gold-light); border-bottom: 1px solid rgba(238, 234, 224, .16); font-size: 9px; }
.knowledge-directory__group-head span { color: rgba(238, 234, 224, .4); font-family: ui-monospace, monospace; font-size: 8px; }
.knowledge-directory__row { display: grid; grid-template-columns: 27px minmax(0, 1fr) 30px 15px; align-items: center; gap: 10px; width: 100%; padding: 12px 8px; color: var(--paper); background: transparent; border: 0; border-bottom: 1px solid rgba(238, 234, 224, .1); 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: 12px; }
.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: 12px; font-weight: 400; }
.knowledge-directory__row-copy small { overflow: hidden; color: rgba(238, 234, 224, .42); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-directory__row-level { color: var(--gold-light); font-family: ui-monospace, monospace; font-size: 8px; }
.knowledge-directory__row > .icon { width: 14px; height: 14px; color: rgba(238, 234, 224, .38); }
.knowledge-directory__empty { display: grid; place-items: center; gap: 8px; min-height: 360px; color: rgba(238, 234, 224, .48); text-align: center; }
.knowledge-directory__empty span { color: var(--gold-light); font-family: var(--font-display); font-size: 38px; }
.knowledge-directory__empty strong { color: var(--paper); font-family: var(--font-display); font-size: 17px; font-weight: 400; }
.knowledge-directory__empty small { font-size: 9px; }
.knowledge-inspector { min-width: 0; padding: 22px 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: ui-monospace, monospace; font-size: 8px; }
.knowledge-inspector__top b { color: var(--red); font-weight: 500; }
.knowledge-inspector h3 { margin: 27px 0 8px; color: var(--ink); font-family: var(--font-display); font-size: 25px; font-weight: 400; line-height: 1.2; }
.knowledge-inspector__strand { color: var(--red); font-size: 9px; }
.knowledge-inspector > p { margin: 16px 0 20px; color: var(--rock); font-family: var(--font-reading); font-size: 12px; line-height: 1.85; }
.knowledge-inspector__mastery { padding: 13px 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: 10px; color: var(--rock); font-size: 8px; }
.knowledge-inspector__mastery strong { color: var(--red); font-family: ui-monospace, monospace; font-size: 10px; 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: 5px; min-width: 0; }
.knowledge-inspector__meta span, .knowledge-inspector__links > span, .knowledge-inspector__note > span { color: var(--rock); font-size: 8px; }
.knowledge-inspector__meta strong { overflow-wrap: anywhere; color: var(--ink); font-size: 9px; font-weight: 500; line-height: 1.4; }
.knowledge-inspector__links { padding-top: 14px; border-top: 1px solid var(--line-dark); }
.knowledge-inspector__links > div { display: grid; gap: 5px; margin-top: 8px; }
.knowledge-inspector__links button { padding: 7px 0; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid rgba(13, 23, 26, .12); font-family: var(--font-display); font-size: 10px; text-align: left; }
.knowledge-inspector__links button:hover { color: var(--red); }
.knowledge-inspector__links small { color: var(--rock); font-size: 8px; }
.knowledge-inspector__note { margin: 19px 0 22px; padding: 14px; 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-reading); font-size: 11px; line-height: 1.75; }
.knowledge-workbench > .knowledge-capture { margin: 1px 0 0; }

@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: 18px 28px; 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: 22px; padding: 24px 19px 22px; }
  .knowledge-workbench__head h2 { font-size: 31px; }
  .knowledge-workbench__head p { font-size: 10px; }
  .knowledge-workbench__stats { min-width: 0; gap: 12px; }
  .knowledge-workbench__stats .meta-line strong { font-size: 18px; }
  .knowledge-workbench__toolbar { align-items: stretch; flex-wrap: wrap; padding: 10px; }
  .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 13px; }
  .knowledge-catalog__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .knowledge-catalog__foot { display: none; }
  .knowledge-workspace { padding: 13px; }
  .knowledge-network__head, .knowledge-directory__head { align-items: flex-start; flex-direction: column; gap: 7px; }
  .knowledge-network__viewport { height: 470px; }
  .knowledge-network__node { width: 112px; min-height: 49px; padding: 7px 8px; }
  .knowledge-network__node strong { font-size: 9px; }
  .knowledge-network__node small { font-size: 6px; }
  .knowledge-network__core { width: 90px; height: 90px; }
  .knowledge-network__core strong { font-size: 24px; }
  .knowledge-network__footer { align-items: flex-start; flex-direction: column; }
  .knowledge-inspector { display: block; padding: 21px 19px; }
  .knowledge-inspector__links { margin-top: 17px; }
  .knowledge-inspector__note { margin-top: 19px; }
  .knowledge-inspector > .button { width: 100%; justify-content: center; }
}

/* 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: 1px; margin-top: 28px; background: rgba(18, 32, 34, .22); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.route-intake { padding: 30px; background: rgba(247, 244, 237, .95); }
.route-intake .section-title { align-items: flex-start; }
.route-intake .section-title h2 { margin-top: 8px; }
.route-intake__stamp { color: var(--red); font-family: ui-monospace, monospace; font-size: 8px; letter-spacing: .08em; }
.route-form { display: grid; gap: 15px; margin-top: 27px; }
.route-form label { display: grid; gap: 7px; color: var(--ink); font-size: 10px; }
.route-form label small { color: var(--rock); font-size: 8px; }
.route-form input, .route-form select, .route-form textarea { width: 100%; min-width: 0; padding: 10px 11px; color: var(--ink); background: rgba(255, 255, 255, .44); border: 1px solid var(--line-dark); border-radius: 0; font: inherit; font-size: 11px; 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__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.route-form__grid label:first-child { grid-column: span 2; }
.route-form .button { justify-self: start; margin-top: 4px; }
.route-empty, .route-draft { min-width: 0; padding: 30px; 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 10px; color: var(--paper); font-family: var(--font-display); font-size: 31px; font-weight: 400; }
.route-empty p { max-width: 440px; margin: 0; color: rgba(238, 234, 224, .5); font-family: var(--font-reading); font-size: 12px; line-height: 1.85; }
.route-draft { display: grid; gap: 0; }
.route-draft__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; padding-bottom: 25px; border-bottom: 1px solid rgba(238, 234, 224, .14); }
.route-draft__header h2 { margin: 9px 0 8px; color: var(--paper); font-family: var(--font-display); font-size: 31px; font-weight: 400; line-height: 1.16; }
.route-draft__header p { max-width: 600px; margin: 0; color: rgba(238, 234, 224, .56); font-family: var(--font-reading); font-size: 12px; line-height: 1.8; }
.route-feasibility { flex: 0 0 auto; padding: 7px 9px; border: 1px solid currentColor; font-family: ui-monospace, monospace; font-size: 9px; }
.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: 1px; margin-top: 19px; background: rgba(238, 234, 224, .14); }
.route-capacity > div { display: grid; gap: 7px; min-width: 0; padding: 13px 12px; background: rgba(6, 15, 18, .72); }
.route-capacity span { color: rgba(238, 234, 224, .42); font-size: 8px; }
.route-capacity strong { color: var(--gold-light); font-family: var(--font-display); font-size: 18px; font-weight: 400; line-height: 1.2; }
.route-capacity__note { margin: 11px 0 0; color: rgba(238, 234, 224, .48); font-family: var(--font-reading); font-size: 10px; line-height: 1.7; }
.route-plan-preview { display: grid; gap: 15px; margin-top: 23px; padding: 17px; background: rgba(238, 234, 224, .055); border-left: 2px solid var(--gold-light); }
.route-plan-preview__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.route-plan-preview__heading h3 { margin: 7px 0 0; color: var(--paper); font-family: var(--font-display); font-size: 21px; font-weight: 400; }
.route-plan-preview__heading > strong { color: var(--gold-light); font-size: 10px; white-space: nowrap; }
.route-plan-preview__years, .route-plan-preview__months { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; background: rgba(238, 234, 224, .13); }
.route-plan-preview__years article, .route-plan-preview__months article { display: grid; gap: 5px; min-width: 0; padding: 11px; background: rgba(5, 14, 17, .56); }
.route-plan-preview__years span, .route-plan-preview__months span { color: var(--gold-light); font-family: ui-monospace, monospace; font-size: 9px; }
.route-plan-preview__years strong, .route-plan-preview__months strong { color: var(--paper); font-size: 11px; font-weight: 500; line-height: 1.4; }
.route-plan-preview__years p, .route-plan-preview__years small, .route-plan-preview__months small { margin: 0; color: rgba(238, 234, 224, .55); font-size: 9px; line-height: 1.55; }
.route-plan-preview__today { display: grid; gap: 1px; background: rgba(238, 234, 224, .12); }
.route-plan-preview__today > span { padding-bottom: 7px; color: var(--gold-light); }
.route-plan-preview__today > div { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; padding: 9px 0; border-top: 1px solid rgba(238, 234, 224, .1); }
.route-plan-preview__today strong { color: var(--paper); font-size: 10px; font-weight: 500; }
.route-plan-preview__today div span { color: rgba(238, 234, 224, .52); font-size: 9px; text-align: right; }
.plan-horizon { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; margin: 26px 0 4px; background: var(--line-dark); }
.plan-horizon > .section-kicker { grid-column: 1 / -1; padding: 12px 0 2px; background: var(--ink); }
.plan-horizon article { display: grid; gap: 5px; padding: 15px; background: rgba(238, 234, 224, .95); color: var(--ink); }
.plan-horizon article strong { color: var(--red); font-family: var(--font-display); font-size: 22px; font-weight: 400; }
.plan-horizon article span { font-size: 11px; font-weight: 600; }
.plan-horizon article small { color: var(--rock); font-family: var(--font-reading); font-size: 10px; line-height: 1.6; }
.route-draft__body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(230px, .8fr); gap: 25px; margin-top: 27px; }
.route-milestones { display: grid; align-content: start; gap: 1px; }
.route-milestones > .section-kicker { margin-bottom: 10px; }
.route-milestone { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 15px 0; border-top: 1px solid rgba(238, 234, 224, .12); }
.route-milestone > span { color: var(--gold-light); font-family: ui-monospace, monospace; font-size: 9px; }
.route-milestone small { color: rgba(238, 234, 224, .43); font-family: ui-monospace, monospace; font-size: 8px; }
.route-milestone h3 { margin: 7px 0 8px; color: var(--paper); font-family: var(--font-display); font-size: 18px; font-weight: 400; }
.route-milestone ul, .route-verification ul { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.route-milestone li, .route-verification li { position: relative; padding-left: 11px; color: rgba(238, 234, 224, .57); font-family: var(--font-reading); font-size: 10px; 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: 13px; padding: 17px; background: rgba(238, 234, 224, .06); border-top: 1px solid rgba(228, 189, 112, .48); }
.route-verification h3 { margin: 0; color: var(--paper); font-family: var(--font-display); font-size: 19px; font-weight: 400; line-height: 1.3; }
.route-sources { display: grid; gap: 1px; margin-top: 3px; background: rgba(238, 234, 224, .12); }
.route-sources a { display: grid; gap: 4px; padding: 10px; 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: 10px; font-weight: 500; line-height: 1.4; }
.route-sources small { opacity: .6; font-size: 8px; line-height: 1.4; }
.route-evidence { display: grid; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(238, 234, 224, .18); }
.route-evidence article { display: grid; gap: 4px; padding: 9px 0; border-bottom: 1px solid rgba(238, 234, 224, .1); }
.route-evidence article strong { font-size: 11px; line-height: 1.4; }
.route-evidence article p, .route-evidence > p { margin: 0; color: rgba(238, 234, 224, .72); font-size: 10px; line-height: 1.6; }
.route-evidence article small { color: rgba(238, 234, 224, .48); font-size: 8px; }
.route-confirmed, .route-blocked { display: inline-flex; align-items: center; gap: 7px; color: var(--gold-light); font-size: 10px; line-height: 1.6; }
.route-blocked { color: #e38b7b; }

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

@media (max-width: 700px) {
  .route-intake, .route-empty, .route-draft { padding: 23px 19px; }
  .route-form__grid, .route-draft__body { grid-template-columns: 1fr; }
  .route-form__grid label:first-child { grid-column: auto; }
  .route-form .button { width: 100%; justify-content: center; }
  .route-draft__header { display: grid; gap: 15px; }
  .route-feasibility { justify-self: start; }
  .route-capacity { grid-template-columns: 1fr 1fr; }
  .route-plan-preview__heading, .route-plan-preview__today > div { display: grid; gap: 6px; }
  .route-plan-preview__today div span { text-align: left; }
}