/* Appearance only: keep typography, composition and component dimensions intact. */
:root { color-scheme: dark; }
.brand { flex-shrink: 0; }
.brand-text { white-space: nowrap; }
.theme-toggle {
  flex: 0 0 38px; width: 38px; height: 38px; margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-sub); border: 1px solid var(--line-strong); border-radius: 12px;
  background: linear-gradient(155deg,rgba(255,255,255,.08),rgba(158,197,212,.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  transition: color .2s, border-color .2s, background-color .2s;
}
.theme-toggle:hover { color: var(--text); border-color: var(--gold-dim); }
.theme-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.theme-moon { display: none; }
[data-theme="light"] .theme-moon { display: block; }
[data-theme="light"] .theme-sun { display: none; }
.nav-record { margin-left: 0; }
@media (prefers-reduced-motion: no-preference) {
  body, body::before { transition: background-color .28s ease, color .2s ease; }
}
@media (min-width:861px) and (max-width:1100px) {
  .nav-inner { gap: 18px; }
  .nav-links { gap: 22px; }
  .brand-en { display: none; }
}
@media (max-width:860px) {
  .nav-inner { padding-inline: 0; }
  .nav-toggle { margin-left: 0; }
  .nav-account { flex-shrink: 0; }
}
@media (max-width:480px) {
  .nav-inner { gap: 10px; }
  .theme-toggle { width: 34px; height: 34px; flex-basis: 34px; }
  .nav-toggle { width: 32px; flex-shrink: 0; }
}
@media (max-width:380px) { .brand-en { display: none; } }

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f8f9;
  --bg-elev: #edf3f5;
  --surface: #f8fbfc;
  --surface-2: #edf3f6;
  --line: rgba(58,91,109,.18);
  --line-strong: rgba(56,102,125,.30);
  --gold: #32667e;
  --gold-hi: #244f64;
  --gold-dim: #527182;
  --gold-wash: rgba(63,112,136,.07);
  --text: #233b49;
  --text-2: #354e5c;
  --text-sub: #506775;
  --text-dim: #536b79;
  --muted: #506775;
  --sage: #376d59;
  --clay: #86623c;
  --danger: #ae4e48;
  --light-glass: linear-gradient(158deg,rgba(255,255,255,.80),rgba(255,255,255,.48) 46%,rgba(220,234,240,.50));
  --light-inner: linear-gradient(158deg,rgba(255,255,255,.70),rgba(235,242,245,.48));
  --light-shadow: inset 0 1px 0 rgba(255,255,255,.96),0 12px 36px rgba(59,88,107,.075);
}
html[data-theme="light"] body { background: var(--bg); }
html[data-theme="light"] body::before {
  background-color: #f5f8f9;
  background-image:
    radial-gradient(58% 46% at 14% 6%,rgba(154,192,207,.24),transparent 72%),
    radial-gradient(52% 44% at 88% 26%,rgba(167,194,222,.23),transparent 74%),
    radial-gradient(46% 40% at 46% 96%,rgba(171,209,197,.19),transparent 76%),
    radial-gradient(40% 34% at 72% 74%,rgba(188,211,220,.16),transparent 80%);
}
html[data-theme="light"] ::selection { background: #c5dfe9; color: #233b49; }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #b7cbd5; }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #8fadb9; }
html[data-theme="light"] :is(button,input,textarea,select) { accent-color: var(--gold); }
html[data-theme="light"] .site-nav {
  border-color: rgba(79,112,131,.22);
  background: linear-gradient(160deg,rgba(255,255,255,.88),rgba(255,255,255,.64) 46%,rgba(224,237,242,.70));
  box-shadow: inset 0 1px 0 #fff,inset 0 -1px 0 rgba(255,255,255,.66),0 14px 44px rgba(61,91,108,.10);
}
html[data-theme="light"] .site-nav::after { background: linear-gradient(100deg,transparent,rgba(255,255,255,.70),transparent); }
html[data-theme="light"] :is(.nav-user,.nav-record,.theme-toggle,.btn-ghost,.chip,.badge) { color: var(--text-sub); border-color: var(--line-strong); }
html[data-theme="light"] .theme-toggle { background: var(--light-inner); box-shadow: inset 0 1px 0 #fff; }
html[data-theme="light"] :is(.nav-user,.theme-toggle,.btn-ghost):hover { color: var(--text); border-color: var(--gold); }

/* Main glass panels, nested surfaces and floating UI. */
html[data-theme="light"] :is(.panel,.feature-card,.role-mini,.record-item,.rail-card,.role-card,.reflect-item,.fav-card,.bagua-card,.settings-card,.admin-section,.cast-stage,.auth-card,.today-card,.card-preview,.read-hero),
html[data-theme="light"] .new-art.is-hex .hex-panel {
  border-color: var(--line); background: var(--light-glass); box-shadow: var(--light-shadow);
}
html[data-theme="light"] :is(.minicard,.card-select,.u-row,.stat,.fold,.point-card,.cast-line,.action-item,.hex-cell,.step-item,.input,.textarea,.mode-btn,.expert-panel) {
  border-color: var(--line); background: var(--light-inner); box-shadow: inset 0 1px 0 rgba(255,255,255,.90);
}
html[data-theme="light"] :is(.record-item,.fold,.card-preview,.today-card,.hex-cell):hover {
  border-color: var(--line-strong); background: var(--light-glass); box-shadow: inset 0 1px 0 #fff,0 12px 32px rgba(59,88,107,.10);
}
html[data-theme="light"] :is(.nav-drawer,.nav-menu,.modal,.toast) {
  border-color: var(--line-strong);
  background: linear-gradient(158deg,rgba(255,255,255,.94),rgba(239,246,249,.92));
  box-shadow: inset 0 1px 0 #fff,0 20px 60px rgba(51,78,95,.16);
}
html[data-theme="light"] .modal-mask { background: rgba(64,86,100,.24); }
html[data-theme="light"] :is(.nm-head,.sc-hr,.at-tabs,.u-item,.mini-stat,.tag,.badge,.cb-bottom,.mode-btn,.run-head,.chat-message) { border-color: var(--line); }
html[data-theme="light"] :is(.btn,.hex-cta) { box-shadow: inset 0 1px 0 rgba(255,255,255,.85),0 6px 20px rgba(67,98,117,.08); }
html[data-theme="light"] :is(.hex-cta,.btn-ghost,.btn-danger) { background: var(--light-inner); }
html[data-theme="light"] .hex-cta { color: var(--gold-hi); border-color: var(--line-strong); }
html[data-theme="light"] .hex-cta:hover { background: rgba(205,225,235,.65); color: var(--text); border-color: var(--gold); }
html[data-theme="light"] .btn-gold { background: linear-gradient(155deg,#507f93,#39677e); color: #fff; border-color: #426e83; }
html[data-theme="light"] .btn-gold:hover { background: linear-gradient(155deg,#446f84,#305c72); }
html[data-theme="light"] :is(.new-cta,.cb-send) {
  color: #244659; border-color: rgba(255,255,255,.90);
  background: linear-gradient(155deg,#e2f0f6,#bed9e5);
  box-shadow: inset 0 1px 0 #fff,inset 0 -1px 3px rgba(67,103,122,.08),0 10px 28px rgba(91,137,158,.16);
}
html[data-theme="light"] :is(.input,.textarea):focus { background: rgba(255,255,255,.88); border-color: var(--gold); box-shadow: 0 0 0 3px rgba(72,123,147,.10); }
html[data-theme="light"] :is(input,textarea)::placeholder { color: #607581; opacity: 1; }
html[data-theme="light"] select { background-color: var(--surface); color: var(--text-sub); }
html[data-theme="light"] option { background: #f7fafb; color: var(--text); }
html[data-theme="light"] .chip:hover { color: var(--text); background: var(--gold-wash); border-color: var(--gold); }
html[data-theme="light"] :is(.chip[aria-pressed="true"],.chip.is-on,.hex-cell.is-current,.mode-btn.is-on,.mode-btn[aria-pressed="true"]) { background: rgba(98,150,174,.15); border-color: var(--gold); color: var(--gold-hi); }
html[data-theme="light"] .btn-danger { color: var(--danger); border-color: rgba(174,78,72,.35); }
html[data-theme="light"] :is(.input-err,.auth-err,.tag-danger) { color: var(--danger); border-color: rgba(174,78,72,.40); }
html[data-theme="light"] .content-status[data-state="error"] { color: var(--danger); }

/* Text that predates semantic colour tokens. */
html[data-theme="light"] :is(.rail-title,.hr-name,.faq-list summary,.reading-page .reading-prose,.mind-report p,.chat-user,.chat-assistant) { color: var(--text-2); }
html[data-theme="light"] :is(.label,.hero-index,.new-overline,.new-copy p,.small-note,.art-number,.visual-controls,.visual-controls button,.hr-no,.hr-theme,.hr-gist,.feature-copy small,.foot-inner) { color: var(--text-dim); }
html[data-theme="light"] .home-template .title-second { color: #4b6778; }
html[data-theme="light"] .visual-controls button:hover { color: var(--gold-hi); }
html[data-theme="light"] .faq-list details { border-bottom-color: var(--line); }
html[data-theme="light"] .faq-list details:last-child { border-bottom: 0; }
html[data-theme="light"] .bagua-card .bc-lines i.off { background: #cedce3; }
html[data-theme="light"] .tick { background: var(--line); }
html[data-theme="light"] .tick.done, html[data-theme="light"] .tick.now { background: var(--gold); }

/* Casting, reading, reflection and conversation. */
html[data-theme="light"] .composer {
  border-color: rgba(83,123,146,.25); background: linear-gradient(158deg,rgba(255,255,255,.84),rgba(235,245,249,.62));
  box-shadow: inset 0 1px 0 #fff,0 20px 60px rgba(64,101,121,.10);
}
html[data-theme="light"] .composer:focus-within { border-color: var(--gold); box-shadow: inset 0 1px 0 #fff,0 0 0 4px rgba(64,113,138,.055),0 20px 60px rgba(64,101,121,.10); }
html[data-theme="light"] :is(.compose-ai,.derived-q,.stage-banner,.cfg-guide,.code-box) { background: var(--gold-wash); border-color: var(--line-strong); }
html[data-theme="light"] .cast-line.is-current { background: rgba(99,149,172,.12); }
html[data-theme="light"] .mind-page .textarea { background: rgba(255,255,255,.55); }
html[data-theme="light"] .chat-user { background: linear-gradient(155deg,rgba(185,214,229,.48),rgba(207,229,238,.65)); border-color: rgba(73,119,143,.23); }
html[data-theme="light"] .chat-assistant { background: rgba(255,255,255,.60); border-color: var(--line); }
html[data-theme="light"] .follow-runbar { color: var(--text-sub); background: #eaf2f6; border-color: var(--line-strong); }
html[data-theme="light"] .reading-dialogue .follow-input .input { background: rgba(255,255,255,.55); }
html[data-theme="light"] .reading-dialogue .follow-input .input:focus { background: rgba(255,255,255,.90); }
html[data-theme="light"] .mind-version select { background: #f4f8fa; color: var(--text-sub); }
html[data-theme="light"] :is(.mind-report .mind-position,.mind-next p) { color: var(--text); }
html[data-theme="light"] .mind-report .mind-condition { color: var(--text-dim); }
html[data-theme="light"] .new-art.is-hex .hex-panel .hex-dock { border-top-color: var(--line); }
html[data-theme="light"] .hex-panel .hex-readout { background: none; box-shadow: none; }

/* The monochrome intro gets the matching light stage; other canvases use real palettes. */
html[data-theme="light"] :is(#intro,.veil) { background: var(--bg); }
html[data-theme="light"] :is(#scene,#film) { filter: invert(1) hue-rotate(180deg); }
html[data-theme="light"] .intro-skip { color: var(--text-sub); border-color: var(--line-strong); background: rgba(255,255,255,.55); }