:root {
  color-scheme: dark;
  --bg: #050a12;
  --bg-soft: #08111f;
  --surface: rgba(13, 24, 40, 0.78);
  --surface-solid: #0c1726;
  --surface-raised: #111f32;
  --line: rgba(144, 188, 224, 0.14);
  --line-strong: rgba(126, 217, 255, 0.3);
  --text: #e8f1f8;
  --text-soft: #9eafbe;
  --muted: #64788a;
  --accent: #64dcff;
  --accent-bright: #abf0ff;
  --accent-deep: #1688bc;
  --term: #6fa8ff;
  --violet: #9585ff;
  --success: #65d8b0;
  --warning: #f2ca73;
  --danger: #ff8095;
  --sidebar: 244px;
  --topbar: 68px;
  --content-max: 1280px;
  --reader-size: 17px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --shadow: 0 22px 60px rgba(0, 0, 0, 0.28);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #edf3f7;
  --bg-soft: #e5edf4;
  --surface: rgba(255, 255, 255, 0.75);
  --surface-solid: #f9fbfd;
  --surface-raised: #ffffff;
  --line: rgba(35, 75, 105, 0.14);
  --line-strong: rgba(23, 133, 181, 0.28);
  --text: #142534;
  --text-soft: #526979;
  --muted: #718593;
  --accent: #008cbc;
  --accent-bright: #00779f;
  --accent-deep: #006b99;
  --term: #316fd0;
  --shadow: 0 20px 50px rgba(57, 80, 97, 0.14);
}

:root[data-font="compact"] { --reader-size: 15px; }
:root[data-font="large"] { --reader-size: 19px; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background:
    radial-gradient(circle at 85% 0%, rgba(30, 121, 166, 0.12), transparent 28rem),
    linear-gradient(135deg, transparent 0 49.8%, rgba(97, 203, 240, 0.025) 50% 50.15%, transparent 50.3%) 0 0 / 38px 38px,
    var(--bg);
  color: var(--text);
  font-family: Inter, "Segoe UI", "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }

button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

::selection { color: #041019; background: var(--accent); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(109, 164, 194, .34); border-radius: 8px; }

.icon { flex: 0 0 auto; }
.app-shell { min-height: 100vh; }

.sidebar {
  position: fixed;
  z-index: 50;
  inset: 0 auto 0 0;
  width: var(--sidebar);
  display: flex;
  flex-direction: column;
  padding: 24px 16px 18px;
  background: color-mix(in srgb, var(--bg-soft) 92%, transparent);
  border-right: 1px solid var(--line);
  backdrop-filter: blur(18px);
}

.sidebar::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 22%;
  width: 1px;
  height: 18%;
  background: linear-gradient(transparent, var(--accent), transparent);
  opacity: .6;
}

.sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 0 7px 28px; }
.brand { display: flex; align-items: center; gap: 11px; min-width: max-content; }
.brand-mark { position: relative; width: 29px; height: 29px; display: grid; place-items: center; transform: rotate(45deg); }
.brand-mark::before, .brand-mark::after, .brand-mark i { content: ""; position: absolute; border: 1px solid var(--accent); }
.brand-mark::before { inset: 2px; }
.brand-mark::after { inset: 7px; border-color: var(--text); }
.brand-mark i:nth-child(1) { left: -3px; right: -3px; top: 50%; border-width: 1px 0 0; }
.brand-mark i:nth-child(2) { top: -3px; bottom: -3px; left: 50%; border-width: 0 0 0 1px; }
.brand-mark i:nth-child(3) { width: 5px; height: 5px; background: var(--accent); border: 0; }
.brand-type { display: grid; line-height: 1; gap: 5px; }
.brand-type b { font-size: 17px; letter-spacing: .4px; }
.brand-type small { color: var(--muted); font: 600 7px/1 monospace; letter-spacing: 2.1px; }
.menu-close { display: none; }

.desktop-nav { flex: 1; overflow-y: auto; padding-right: 3px; }
.nav-label { margin: 18px 12px 8px; color: var(--muted); font: 600 9px/1.2 monospace; letter-spacing: 2.1px; text-transform: uppercase; }
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  margin: 2px 0;
  padding: 0 12px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  transition: color .18s, background .18s, transform .18s;
  width: 100%;
  text-align: left;
  font: inherit;
}
.nav-item span { font-size: 13px; letter-spacing: .3px; }
.nav-item em { margin-left: auto; color: var(--muted); font: normal 8px monospace; letter-spacing: 1px; opacity: .55; }
.nav-item:hover { color: var(--text); background: rgba(100, 220, 255, .06); transform: translateX(2px); }
.nav-item.is-active { color: var(--accent-bright); background: linear-gradient(90deg, rgba(74, 196, 239, .14), rgba(74, 196, 239, .025)); }
.nav-item.is-active::before { content: ""; position: absolute; left: 0; width: 2px; height: 20px; background: var(--accent); box-shadow: 0 0 14px var(--accent); }
.nav-item.is-locked { color: color-mix(in srgb, var(--muted) 72%, transparent); cursor: not-allowed; }
.nav-item.is-locked:hover { color: var(--muted); background: transparent; transform: none; }
.nav-item.is-locked em { color: var(--danger); opacity: .72; }
.sidebar-foot { border-top: 1px solid var(--line); padding-top: 10px; }
.build-stamp { display: flex; align-items: center; gap: 7px; padding: 14px 12px 0; color: var(--muted); font: 8px monospace; letter-spacing: 1px; }
.build-stamp b { color: var(--text-soft); font-weight: 500; }
.build-stamp i, .status-dot::before { width: 5px; height: 5px; margin-left: auto; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px var(--success); }

.main-shell { margin-left: var(--sidebar); min-height: 100vh; }
.topbar {
  position: sticky;
  z-index: 35;
  top: 0;
  height: var(--topbar);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 clamp(24px, 4vw, 56px);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}
.audio-toggle { position: relative; overflow: visible; }
.audio-pulse { position: absolute; right: 3px; bottom: 4px; display: flex; align-items: end; gap: 1px; height: 8px; opacity: 0; }
.audio-pulse i { width: 2px; height: 3px; background: var(--accent); border-radius: 2px; }
.audio-toggle.is-playing { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.audio-toggle.is-playing .audio-pulse { opacity: 1; }
.audio-toggle.is-playing .audio-pulse i { animation: audio-level .72s ease-in-out infinite alternate; }
.audio-toggle.is-playing .audio-pulse i:nth-child(2) { height: 7px; animation-delay: -.38s; }
.audio-toggle.is-playing .audio-pulse i:nth-child(3) { height: 5px; animation-delay: -.16s; }
@keyframes audio-level { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
.mobile-menu, .tablet-brand { display: none; }
.crumbs { display: flex; align-items: center; gap: 9px; color: var(--muted); font: 600 10px monospace; letter-spacing: 1.4px; text-transform: uppercase; }
.crumbs a { color: var(--accent); }
.crumbs b { color: var(--text-soft); font-weight: 600; }
.crumbs em { max-width: 110px; overflow: hidden; text-overflow: ellipsis; font-style: normal; }
.top-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.icon-button { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 5px; color: var(--text-soft); background: rgba(96, 155, 189, .04); cursor: pointer; transition: .18s; }
.icon-button:hover { color: var(--accent); border-color: var(--line-strong); background: rgba(88, 201, 239, .08); }
.mobile-menu, .menu-close { display: none; }
.theme-glyph { font-size: 19px; transform: rotate(-30deg); }
.search-shortcut { height: 38px; display: flex; align-items: center; gap: 9px; min-width: 220px; padding: 0 8px 0 12px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); font-size: 11px; background: rgba(96, 155, 189, .035); }
.search-shortcut span { flex: 1; }
.search-shortcut.is-locked { color: var(--muted); cursor: not-allowed; opacity: .68; }
.search-shortcut.is-locked:hover { border-color: var(--line); background: rgba(96, 155, 189, .035); }
kbd { padding: 4px 6px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); background: var(--bg-soft); font: 9px monospace; }

#main-content { min-height: calc(100vh - var(--topbar)); }
.page { width: min(var(--content-max), calc(100% - clamp(40px, 7vw, 104px))); margin: 0 auto; padding: clamp(38px, 6vw, 78px) 0 90px; }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 40px; }
.page-header h1 { margin: 11px 0 10px; font-size: clamp(32px, 4vw, 52px); line-height: 1; letter-spacing: -2.3px; }
.page-header p { max-width: 660px; margin: 0; color: var(--text-soft); font-size: 14px; line-height: 1.8; }
.page-actions { flex: 0 0 auto; }
.eyebrow { display: flex; align-items: center; gap: 8px; color: var(--accent); font: 600 9px monospace; letter-spacing: 2.1px; }
.eyebrow i { width: 24px; height: 1px; background: var(--accent); }

.button { min-height: 43px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 18px; border: 1px solid var(--line); border-radius: 4px; font-size: 12px; font-weight: 600; letter-spacing: .4px; cursor: pointer; transition: transform .18s var(--ease), border-color .18s, background .18s; }
.button:hover { transform: translateY(-2px); }
.button.primary { color: #041019; border-color: var(--accent); background: var(--accent); box-shadow: 0 8px 28px rgba(75, 196, 235, .17); }
.button.primary:hover { background: var(--accent-bright); }
.button.ghost { color: var(--text-soft); background: rgba(105, 174, 206, .035); }
.button.ghost:hover { color: var(--text); border-color: var(--line-strong); }
.button.small { min-height: 36px; padding: 0 13px; font-size: 11px; }
.back-link { display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; color: var(--text-soft); background: none; font-size: 12px; cursor: pointer; }
.back-link:hover { color: var(--accent); }
.top-back { min-height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid var(--line); border-radius: 4px; color: var(--text-soft); background: rgba(96, 155, 189, .035); font-size: 10px; cursor: pointer; }
.top-back:hover { color: var(--accent); border-color: var(--line-strong); }

.hero {
  position: relative;
  min-height: 480px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  align-items: center;
  overflow: hidden;
  padding: clamp(42px, 6vw, 76px);
  border: 1px solid var(--line);
  background: linear-gradient(117deg, rgba(13, 31, 49, .93), rgba(6, 16, 27, .63));
  clip-path: polygon(0 0, calc(100% - 38px) 0, 100% 38px, 100% 100%, 38px 100%, 0 calc(100% - 38px));
}
:root[data-theme="light"] .hero { background: linear-gradient(117deg, rgba(248, 252, 255, .96), rgba(222, 239, 247, .76)); }
.hero-grid { position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(var(--line-strong) 1px, transparent 1px), linear-gradient(90deg, var(--line-strong) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(90deg, black, transparent 80%); }
.hero::after { content: ""; position: absolute; width: 360px; height: 1px; right: 0; bottom: 78px; transform: rotate(-38deg); transform-origin: right; background: linear-gradient(90deg, transparent, var(--accent)); box-shadow: 0 0 20px rgba(90, 216, 255, .7); }
.hero-copy { position: relative; z-index: 2; max-width: 700px; }
.hero-copy h1 { margin: 25px 0 20px; font-size: clamp(39px, 5vw, 68px); line-height: 1.11; letter-spacing: -3.7px; }
.hero-copy h1 span { color: var(--accent-bright); font-weight: 400; }
.hero-copy > p { max-width: 620px; color: var(--text-soft); font-size: 14px; line-height: 1.9; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.hero-visual { position: relative; min-height: 320px; display: grid; place-items: center; }
.orbital { position: absolute; border: 1px solid var(--line-strong); border-radius: 50%; }
.orbital::before, .orbital::after { content: ""; position: absolute; border-radius: 50%; background: var(--accent); box-shadow: 0 0 13px var(--accent); }
.orbital-a { width: 265px; height: 265px; animation: rotate 28s linear infinite; }
.orbital-a::before { width: 6px; height: 6px; top: 29px; right: 46px; }
.orbital-a::after { width: 3px; height: 3px; bottom: 22px; left: 72px; }
.orbital-b { width: 190px; height: 190px; border-style: dashed; opacity: .58; animation: rotate 22s linear infinite reverse; }
.core-mark { position: relative; width: 118px; height: 118px; display: grid; place-items: center; transform: rotate(45deg); border: 1px solid var(--accent); background: rgba(73, 196, 235, .06); box-shadow: 0 0 52px rgba(85, 205, 242, .12), inset 0 0 30px rgba(85, 205, 242, .06); }
.core-mark span { transform: rotate(-45deg); color: var(--accent-bright); font: 200 64px/1 Georgia, serif; }
.core-mark small { position: absolute; right: -50px; bottom: -28px; transform: rotate(-45deg); color: var(--muted); font: 8px/1.5 monospace; letter-spacing: 1.5px; }
.coordinate { position: absolute; color: var(--muted); font: 7px monospace; letter-spacing: 1.6px; }
.coordinate::before { content: ""; display: inline-block; width: 18px; height: 1px; margin-right: 6px; background: var(--line-strong); vertical-align: middle; }
.c1 { left: 8px; top: 54px; }.c2 { right: -10px; bottom: 54px; }
.hero-index { position: absolute; right: 18px; top: 18px; display: flex; align-items: flex-start; gap: 6px; color: var(--muted); }
.hero-index b { color: var(--text-soft); font: 200 24px/1 monospace; }
.hero-index span { font: 6px/1.35 monospace; letter-spacing: 1px; }

.quick-grid { display: grid; grid-template-columns: 1.45fr repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.quick-card { position: relative; min-height: 155px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; overflow: hidden; padding: 24px; border: 1px solid var(--line); background: var(--surface); transition: transform .2s var(--ease), border-color .2s, background .2s; }
.quick-card:hover { transform: translateY(-4px); border-color: var(--line-strong); background: var(--surface-raised); }
.quick-card > .icon:first-of-type { position: absolute; top: 24px; right: 24px; color: var(--accent); }
.quick-card > .icon:last-child { position: absolute; right: 20px; bottom: 24px; color: var(--muted); }
.quick-card small { color: var(--muted); font: 600 9px monospace; letter-spacing: 1.4px; text-transform: uppercase; }
.quick-card h3 { margin: 0; font-size: 16px; }
.quick-card p { margin: 0; color: var(--text-soft); font-size: 11px; }
.card-code { position: absolute; top: 12px; left: 15px; color: var(--muted); font: 7px monospace; letter-spacing: 1.4px; }
.quick-card.feature { min-height: 196px; display: grid; grid-template-columns: 34% 1fr; align-items: end; gap: 24px; padding: 30px; background: linear-gradient(120deg, rgba(15, 60, 82, .52), var(--surface)); }
.feature-visual { position: relative; align-self: stretch; overflow: hidden; border: 1px solid var(--line); background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(93, 209, 248, .04) 10px 11px), radial-gradient(circle at 40% 40%, rgba(90, 210, 247, .17), transparent 40%); }
.feature-visual i { position: absolute; width: 75px; height: 75px; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(45deg); border: 1px solid var(--accent); }
.feature-visual b { position: absolute; right: 8px; bottom: 5px; color: rgba(130, 223, 255, .22); font: 200 48px/1 monospace; }
.feature h2 { margin: 5px 0; font-size: 22px; }
.progress { height: 2px; overflow: hidden; background: var(--line); }
.progress i { display: block; height: 100%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.feature .progress { margin-top: 16px; }

.section-block { margin-top: 64px; }
.section-title { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.section-title span { color: var(--accent); font: 600 8px monospace; letter-spacing: 2px; }
.section-title h2 { margin: 7px 0 0; font-size: 22px; }
.section-title a { display: flex; gap: 8px; align-items: center; color: var(--text-soft); font-size: 11px; }
.archive-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.archive-mini { position: relative; min-height: 108px; display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 1px solid var(--line); background: var(--surface); transition: .18s; }
.archive-mini:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.archive-mini > span { color: var(--accent); font: 9px monospace; letter-spacing: 1px; }
.archive-mini b { font-size: 13px; }
.archive-mini small { color: var(--muted); font-size: 10px; }
.archive-mini i, .file-title i { position: absolute; right: 12px; top: 12px; color: var(--warning); font: normal 8px monospace; border: 1px solid rgba(242, 202, 115, .25); padding: 3px 5px; }

.filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.filter-row.compact { margin: 0; }
.chip { min-height: 32px; padding: 0 13px; border: 1px solid var(--line); border-radius: 99px; color: var(--text-soft); background: transparent; font-size: 10px; cursor: pointer; }
.chip:hover, .chip.is-active { color: var(--accent-bright); border-color: var(--line-strong); background: rgba(91, 202, 240, .07); }
.chip small { margin-left: 7px; color: var(--muted); font: 8px monospace; }.chip.is-active small { color: var(--accent); }

.chapter-list { display: grid; gap: 10px; }
.chapter-row { position: relative; display: grid; grid-template-columns: 105px minmax(0, 1fr) 110px 28px; align-items: center; gap: 28px; min-height: 190px; padding: 22px 28px 22px 20px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); transition: .2s var(--ease); }
.chapter-row::after { content: ""; position: absolute; right: -100px; bottom: -70px; width: 240px; height: 150px; transform: rotate(-22deg); border-top: 1px solid var(--line); }
.chapter-row:hover { border-color: var(--line-strong); transform: translateX(4px); background: var(--surface-raised); }
.chapter-number { position: relative; width: 94px; height: 125px; display: flex; flex-direction: column; align-items: center; justify-content: center; clip-path: polygon(0 0, 100% 0, 100% 83%, 82% 100%, 0 100%); background: linear-gradient(145deg, rgba(82, 208, 247, .2), rgba(30, 68, 90, .12)); border: 1px solid var(--line-strong); }
.chapter-number::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--line); }
.chapter-number span { color: var(--muted); font: 8px monospace; letter-spacing: 2px; }
.chapter-number b { font: 200 38px monospace; }
.chapter-number.violet { background: linear-gradient(145deg, rgba(149, 133, 255, .2), rgba(64, 49, 104, .12)); border-color: rgba(149,133,255,.4); }
.chapter-number.slate { filter: grayscale(.8); opacity: .62; }
.chapter-meta { display: flex; align-items: center; gap: 8px; }
.chapter-row.is-bookmarked { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: inset 2px 0 0 color-mix(in srgb, var(--accent) 72%, transparent); }
.chapter-bookmark-badge { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 4px 7px; border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line)); color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); font: normal 7px monospace; white-space: nowrap; }
.chapter-bookmark-toggle.is-active { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 12%, transparent); }
.chapter-meta span { color: var(--accent); font: 8px monospace; letter-spacing: 1px; }
.chapter-meta i { width: 2px; height: 2px; border-radius: 50%; background: var(--muted); }
.chapter-meta small { color: var(--muted); font: 8px monospace; letter-spacing: 1.4px; }
.chapter-main h2 { margin: 12px 0 9px; font-size: 23px; }
.chapter-main p { max-width: 620px; margin: 0; color: var(--text-soft); font-size: 12px; line-height: 1.75; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 15px; }
.tag-row span, .tag-row em, .tag-row button, .tag-row a { padding: 4px 7px; border: 1px solid var(--line); border-radius: 2px; color: var(--muted); background: rgba(100,170,200,.025); font: normal 8px monospace; letter-spacing: .5px; }
.chapter-progress strong { display: block; color: var(--text); font: 200 26px monospace; }
.chapter-progress strong small { color: var(--muted); font-size: 11px; }
.chapter-progress .progress { margin: 7px 0; }
.chapter-progress > span { color: var(--muted); font-size: 8px; }
.row-arrow { color: var(--muted); z-index: 1; }
.empty-notice { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 17px 20px; border: 1px dashed var(--line); color: var(--muted); }
.empty-notice b { color: var(--text-soft); font-size: 11px; }
.empty-notice p { margin: 4px 0 0; font-size: 10px; }

.reader-page { width: min(1400px, calc(100% - clamp(40px, 6vw, 90px))); padding-top: 30px; }
.reader-tools { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.reader-tools > div { display: flex; gap: 7px; }
.reader-hero { position: relative; overflow: hidden; padding: clamp(36px, 6vw, 72px); border: 1px solid var(--line); background: radial-gradient(circle at 85% 50%, rgba(83, 201, 240, .12), transparent 25%), var(--surface); }
.reader-hero::after { content: attr(class); position: absolute; right: 5%; top: -32px; color: rgba(122, 215, 247, .04); font: 200 180px/1 monospace; text-transform: uppercase; }
.reader-hero > span { color: var(--accent); font: 9px monospace; letter-spacing: 2px; }
.reader-hero h1 { margin: 12px 0 4px; font-size: clamp(36px, 5vw, 58px); }
.reader-hero > p { margin: 0; color: var(--muted); font: 11px monospace; letter-spacing: 1.7px; }
.causal-chain { display: grid; grid-template-columns: minmax(220px, .75fr) minmax(0, 1.4fr); gap: 34px; margin-top: 12px; padding: 25px 28px; border: 1px solid var(--line); background: linear-gradient(110deg, rgba(64, 173, 216, .075), var(--surface)); }
.causal-chain header > span { color: var(--accent); font: 8px monospace; letter-spacing: 1.7px; }
.causal-chain h2 { margin: 7px 0 8px; font-size: 19px; }
.causal-chain header p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.7; }
.causal-chain ol { counter-reset: cause; display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.causal-chain li { counter-increment: cause; display: grid; grid-template-columns: 27px 1fr; align-items: center; gap: 10px; min-height: 38px; color: var(--text-soft); font-size: 11px; line-height: 1.65; }
.causal-chain li::before { content: counter(cause, decimal-leading-zero); display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid var(--line-strong); color: var(--accent); font: 8px monospace; }
.reader-layout { display: grid; grid-template-columns: 180px minmax(0, 720px) 170px; justify-content: center; gap: clamp(28px, 5vw, 78px); padding-top: 48px; }
.reader-toc, .context-rail { position: sticky; top: 98px; align-self: start; display: grid; gap: 4px; }
.reader-toc > span, .context-rail > span { margin-bottom: 10px; color: var(--muted); font: 8px monospace; letter-spacing: 1.6px; }
.reader-toc button { padding: 9px 10px; border: 0; border-left: 1px solid var(--line); text-align: left; color: var(--muted); background: transparent; font-size: 10px; cursor: pointer; }
.reader-toc button.is-active { color: var(--accent); border-color: var(--accent); background: linear-gradient(90deg, rgba(91, 201, 239, .08), transparent); }
.reading-progress { margin-top: 20px; padding: 12px 10px; border: 1px solid var(--line); }
.reading-progress span { color: var(--muted); font-size: 8px; }
.reading-progress b { float: right; font: 10px monospace; }
.reading-progress .progress { clear: both; margin-top: 8px; }
.prose { min-width: 0; font-size: var(--reader-size); line-height: 2.05; }
.prose section { margin-bottom: 64px; scroll-margin-top: 100px; }
.prose section > small { color: var(--accent); font: 8px monospace; letter-spacing: 2px; }
.prose h2 { margin: 9px 0 24px; font-size: 30px; letter-spacing: -1px; }
.prose p { margin: 0 0 21px; color: color-mix(in srgb, var(--text) 88%, var(--text-soft)); }
.prose blockquote { position: relative; margin: 36px 0; padding: 24px 28px; border: 1px solid var(--line); border-left: 2px solid var(--accent); color: var(--text); background: var(--surface); font-size: .9em; }
.prose blockquote cite { display: block; margin-top: 10px; color: var(--muted); font: normal 9px monospace; }
.term-link { display: inline; padding: 0 2px; border: 0; border-bottom: 1px dashed var(--term); color: var(--term); background: transparent; cursor: pointer; }
.context-rail button, .context-rail a { display: grid; gap: 3px; padding: 11px 12px; text-align: left; border: 1px solid var(--line); color: var(--text); background: var(--surface); cursor: pointer; }
.context-rail small { color: var(--accent); font: 7px monospace; letter-spacing: 1px; }
.context-rail b { font-size: 10px; }
.story-note { display: block; margin: 25px 0; padding: 16px 18px; border: 1px solid var(--line); border-left: 2px solid var(--accent); color: var(--text-soft); background: var(--surface); }
.story-note b { color: var(--accent); font: 9px monospace; letter-spacing: 1px; }
.story-note p { margin: 8px 0 0; }
.section-evidence { margin-top: 28px; padding: 15px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 94%, var(--accent) 6%); }
.section-evidence header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.section-evidence header span { color: var(--accent); font: 8px monospace; letter-spacing: 1.4px; }
.section-evidence header small { color: var(--muted); font: 8px monospace; }
.section-evidence > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.section-evidence button { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; min-width: 0; padding: 10px 11px; border: 1px solid var(--line); text-align: left; color: var(--text); background: var(--surface); cursor: pointer; }
.section-evidence button:hover { border-color: var(--accent); background: color-mix(in srgb, var(--surface) 90%, var(--accent) 10%); }
.section-evidence button small { grid-column: 1; color: var(--muted); font: 7px monospace; }
.section-evidence button b { grid-column: 1; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.section-evidence button .icon { grid-column: 2; grid-row: 1 / span 2; color: var(--accent); }
.chapter-wrapup { padding: clamp(24px, 4vw, 38px); border: 1px solid var(--line-strong); background: radial-gradient(circle at 88% 12%, rgba(78, 190, 235, .1), transparent 34%), var(--surface); }
.chapter-wrapup .story-section-body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.chapter-checkpoint { min-width: 0; padding: 16px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 96%, var(--accent) 4%); }
.chapter-checkpoint span { display: block; margin-bottom: 10px; color: var(--accent); font: 8px monospace; letter-spacing: 1.2px; }
.prose .chapter-checkpoint p { margin: 0; color: var(--text-soft); font-size: .83em; line-height: 1.8; }
.chapter-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 25px; border-top: 1px solid var(--line); }
.chapter-nav a { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--line); font-size: 11px; }
.chapter-nav a:last-child { justify-content: flex-end; text-align: right; }
.chapter-nav small { color: var(--muted); }.chapter-nav b { display: block; margin-top: 2px; }

.reading-paths { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 48px; }.reading-path { position: relative; min-height: 210px; display: flex; flex-direction: column; justify-content: space-between; padding: 24px; border: 1px solid var(--line); text-align: left; color: var(--text); background: var(--surface); cursor: pointer; transition: .2s; }.reading-path:hover { transform: translateY(-3px); border-color: var(--line-strong); }.reading-path.primary-path { background: linear-gradient(135deg, rgba(65, 198, 238, .11), transparent 70%), var(--surface); }.reading-path > span { color: var(--muted); font: 8px monospace; letter-spacing: 1.2px; }.reading-path > div { display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: start; }.reading-path > div > svg { color: var(--accent); }.reading-path section small { color: var(--accent); font-size: 8px; }.reading-path h2 { margin: 5px 0 8px; font-size: 21px; }.reading-path p { margin: 0; color: var(--text-soft); font-size: 11px; line-height: 1.7; }.reading-path > b { display: flex; justify-content: space-between; align-items: center; padding-top: 15px; border-top: 1px solid var(--line); color: var(--muted); font: 9px monospace; }.chapter-order-title { margin-bottom: 16px; }

.toolbar, .archive-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 30px; }
.segmented { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); }
.segmented button, .segmented a { min-height: 29px; display: inline-flex; align-items: center; justify-content: center; padding: 0 13px; border: 0; border-radius: 3px; color: var(--muted); background: transparent; font-size: 10px; cursor: pointer; }
.segmented button.is-active, .segmented a.is-active { color: var(--accent-bright); background: rgba(95, 204, 241, .11); }
.timeline-mode-note { color: var(--muted); font: 9px monospace; }
.timeline { position: relative; max-width: 960px; margin: 0 auto; padding: 20px 0; }
.timeline::before { content: ""; position: absolute; left: 172px; top: 0; bottom: 0; width: 1px; background: linear-gradient(transparent, var(--line-strong) 8%, var(--line-strong) 92%, transparent); }
.timeline-event { position: relative; display: grid; grid-template-columns: 140px 24px 1fr; gap: 20px; margin-bottom: 26px; }
.time-label { padding-top: 22px; text-align: right; }
.time-label span { display: block; color: var(--text-soft); font-size: 10px; }
.time-label b { color: var(--accent); font: 9px monospace; }
.timeline-node { position: relative; z-index: 1; width: 9px; height: 9px; margin: 25px auto 0; transform: rotate(45deg); border: 1px solid var(--accent); background: var(--bg); box-shadow: 0 0 12px rgba(87, 210, 250, .35); }
.event-card { display: block; padding: 22px 25px; border: 1px solid var(--line); background: var(--surface); transition: .18s; }
.event-card:hover { transform: translateX(4px); border-color: var(--line-strong); }
.event-card > div:first-child { display: flex; align-items: center; gap: 8px; }
.event-card small { color: var(--muted); font: 8px monospace; }
.certainty { padding: 3px 6px; color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 30%, transparent); font: 8px monospace; }
.certainty.推定, .certainty.争议 { color: var(--warning); border-color: rgba(242, 202, 115, .25); }.certainty.封存 { color: var(--muted); border-color: var(--line); }
.event-card h2 { margin: 13px 0 8px; font-size: 19px; }
.event-card p { margin: 0; color: var(--text-soft); font-size: 11px; line-height: 1.7; }
.event-card footer { display: flex; justify-content: space-between; margin-top: 18px; padding-top: 13px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; }
.certainty.confirmed { color: var(--success); border-color: color-mix(in srgb, var(--success) 30%, transparent); }.certainty.edited { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }.certainty.uncertain { color: var(--warning); border-color: rgba(242, 202, 115, .28); }.timeline-phase { position: relative; display: grid; grid-template-columns: 140px 24px 1fr; gap: 20px; align-items: center; margin: 42px 0 18px; }.timeline-phase:first-child { margin-top: 0; }.timeline-phase span { grid-column: 1; color: var(--accent); text-align: right; font: 10px monospace; letter-spacing: 1.2px; }.timeline-phase i { grid-column: 2 / 4; height: 1px; background: linear-gradient(90deg, var(--accent), transparent); }.timeline-event.is-start .event-card { border-color: var(--accent); box-shadow: 0 0 28px rgba(74, 195, 234, .12); }

.timeline-chapter-groups { display: grid; gap: 16px; }.timeline-chapter-group { overflow: hidden; border: 1px solid var(--line); background: var(--surface); }.timeline-chapter-group > header { min-height: 92px; display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 18px; padding: 15px 22px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, rgba(74, 195, 234, .055), transparent); }.timeline-chapter-group > header > span { color: var(--accent); font: 200 31px monospace; }.timeline-chapter-group > header small { color: var(--muted); font: 8px monospace; }.timeline-chapter-group > header h2 { margin: 4px 0 0; font-size: 20px; }.timeline-chapter-group > header em { color: var(--muted); font: normal 8px monospace; }.chapter-event-list a { display: grid; grid-template-columns: 120px 1fr auto 18px; align-items: center; gap: 18px; min-height: 106px; padding: 18px 22px; border-bottom: 1px solid var(--line); }.chapter-event-list a:last-child { border: 0; }.chapter-event-list a:hover { background: rgba(74, 195, 234, .035); }.chapter-event-list time { color: var(--accent); font: 9px monospace; }.chapter-event-list small { color: var(--muted); font: 8px monospace; }.chapter-event-list h3 { margin: 5px 0; font-size: 15px; }.chapter-event-list p { margin: 0; color: var(--text-soft); font-size: 10px; line-height: 1.6; }

.character-timeline { display: grid; grid-template-columns: 235px 1fr; gap: 18px; align-items: start; }.character-timeline-select { display: grid; gap: 5px; position: sticky; top: calc(var(--topbar) + 18px); max-height: calc(100vh - var(--topbar) - 38px); overflow-y: auto; }.character-timeline-select a { display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 11px; min-height: 56px; padding: 8px 10px; border: 1px solid var(--line); background: var(--surface); }.character-timeline-select a > span { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--person) 45%, var(--line)); color: var(--person); font-size: 11px; }.character-timeline-select a b { display: block; font-size: 11px; }.character-timeline-select a small { color: var(--muted); font: 8px monospace; }.character-timeline-select a.is-active { border-color: color-mix(in srgb, var(--person) 55%, var(--line)); background: color-mix(in srgb, var(--person) 8%, var(--surface)); }.character-arc { border: 1px solid var(--line); background: var(--surface); }.character-arc > header { display: grid; grid-template-columns: 125px 1fr; gap: 22px; align-items: center; padding: 24px; border-bottom: 1px solid var(--line); background: linear-gradient(120deg, color-mix(in srgb, var(--person) 10%, transparent), transparent 70%); }.character-arc > header .portrait { min-height: 135px; }.character-arc > header section > small { color: var(--person); font: 8px monospace; }.character-arc > header h2 { margin: 7px 0; font-size: 23px; }.character-arc > header p { margin: 0; color: var(--text-soft); font-size: 11px; line-height: 1.7; }.character-arc-list a { display: grid; grid-template-columns: 36px 100px 1fr 18px; gap: 16px; align-items: center; min-height: 112px; padding: 18px 22px; border-bottom: 1px solid var(--line); }.character-arc-list a:last-child { border: 0; }.character-arc-list a:hover { background: rgba(74, 195, 234, .035); }.character-arc-list > a > span { color: var(--accent); font: 13px monospace; }.character-arc-list time { color: var(--text-soft); font: 9px monospace; }.character-arc-list small { color: var(--muted); font: 8px monospace; }.character-arc-list h3 { margin: 5px 0; font-size: 15px; }.character-arc-list p { margin: 0; color: var(--text-soft); font-size: 10px; line-height: 1.6; }

.inline-search { width: min(380px, 100%); height: 40px; display: flex; align-items: center; gap: 9px; padding: 0 12px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); }
.inline-search input { flex: 1; min-width: 0; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 11px; }
.data-table, .source-list { overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.data-row { width: 100%; display: grid; grid-template-columns: 105px minmax(240px, 1.5fr) .55fr .65fr .8fr 24px; align-items: center; gap: 16px; min-height: 62px; padding: 0 18px; border: 0; border-bottom: 1px solid var(--line); text-align: left; color: var(--text-soft); background: transparent; font-size: 11px; }
button.data-row { cursor: pointer; }
.data-row:last-child { border-bottom: 0; }
.data-row:not(.data-head):hover { color: var(--text); background: rgba(83, 199, 237, .055); }
.data-head { min-height: 38px; color: var(--muted); background: rgba(80, 147, 180, .04); font: 8px monospace; letter-spacing: 1px; }
.mono { color: var(--accent); font-family: "Cascadia Mono", Consolas, monospace; }
.file-title { position: relative; font-weight: 600; color: var(--text); }
.file-title i { position: static; margin-left: 8px; }
.access, .source-status { padding: 4px 7px; border: 1px solid var(--line); color: var(--text-soft); font: normal 8px monospace; }
.access.公开 { color: var(--success); border-color: color-mix(in srgb, var(--success) 25%, transparent); }.access.受限 { color: var(--warning); border-color: rgba(242, 202, 115, .25); }.access.封存 { color: var(--danger); border-color: rgba(255, 128, 149, .25); }
.access.acquired { color: var(--success); border-color: color-mix(in srgb, var(--success) 28%, transparent); }
.collection-summary { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); margin-bottom: 24px; border: 1px solid var(--line); background: var(--surface); }
.collection-summary div { display: grid; justify-items: center; gap: 3px; padding: 15px 8px; border-right: 1px solid var(--line); }
.collection-summary div:last-child { border: 0; }
.collection-summary span, .collection-summary small { color: var(--muted); font: 8px monospace; }
.collection-summary strong { color: var(--accent); font: 200 21px monospace; }
.table-count { margin-top: 12px; color: var(--muted); font: 8px monospace; text-align: right; }

.character-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.character-card { position: relative; min-height: 230px; display: grid; grid-template-columns: 150px 1fr; align-items: stretch; gap: 24px; overflow: hidden; padding: 20px; border: 1px solid var(--line); background: var(--surface); transition: .2s; }
.character-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.character-card[hidden], .term-card[hidden] { display: none; }
.character-card > .icon { position: absolute; right: 22px; top: 22px; color: var(--accent); }
.portrait { position: relative; min-height: 188px; display: grid; place-items: center; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent); background: radial-gradient(circle, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%), repeating-linear-gradient(135deg, transparent 0 9px, color-mix(in srgb, var(--accent) 5%, transparent) 9px 10px); }
.portrait::before { content: ""; position: absolute; width: 80px; height: 80px; transform: rotate(45deg); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.portrait > span { position: relative; z-index: 1; color: var(--accent); font: 200 43px serif; }
.portrait > i { position: absolute; width: 130px; height: 1px; transform: rotate(-45deg); background: linear-gradient(transparent, var(--accent)); }
.portrait small { position: absolute; bottom: 10px; left: 10px; color: var(--muted); font: 7px monospace; letter-spacing: 1px; }
.character-info { align-self: center; min-width: 0; }
.character-info > span, .profile-role { color: var(--accent); font: 8px monospace; letter-spacing: 1.5px; }
.character-info h2 { margin: 8px 0 14px; font-size: 25px; }
.character-info p { min-height: 48px; margin: 0; color: var(--text-soft); font-size: 11px; line-height: 1.75; }
.character-info .tag-row em { color: color-mix(in srgb, var(--accent) 80%, var(--muted)); }
.character-card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.character-card-meta span { padding: 4px 7px; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); color: color-mix(in srgb, var(--accent) 75%, var(--muted)); background: color-mix(in srgb, var(--accent) 4%, transparent); font: 7px monospace; }
.character-view-toolbar { margin-bottom: 18px; }
.character-graph-filters { margin-bottom: 12px; }
.character-graph-filters .chip { text-decoration: none; }
.character-graph-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; align-items: stretch; }
.character-graph-panel { min-width: 0; overflow: hidden; }
.character-graph-panel > header { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 19px; border-bottom: 1px solid var(--line); }
.character-graph-panel > header h2 { margin: 5px 0 0; font-size: 18px; }
.character-graph-controls { display: flex; align-items: center; gap: 4px; }
.character-graph-controls button, .character-graph-controls span { min-width: 34px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--text-soft); background: var(--surface-raised); font: 9px monospace; }
.character-graph-controls button { cursor: pointer; }
.character-graph-controls button:hover { border-color: var(--accent); color: var(--accent); }
.character-graph-controls button:last-child { min-width: 50px; padding-inline: 9px; }
.character-graph-controls span { min-width: 46px; color: var(--accent); background: transparent; }
.character-graph-viewport { height: 630px; overflow: auto; cursor: grab; overscroll-behavior: contain; touch-action: pan-x pan-y; background: radial-gradient(circle at 46% 43%, rgba(76, 206, 240, .075), transparent 26rem), var(--bg-soft); scrollbar-color: color-mix(in srgb, var(--accent) 36%, transparent) var(--bg-soft); }
.character-graph-viewport.is-dragging { cursor: grabbing; user-select: none; }
.character-graph-svg { display: block; max-width: none; color: color-mix(in srgb, var(--accent) 16%, transparent); transform-origin: 0 0; }
.character-graph-grid { opacity: .55; }
.character-graph-edge line { stroke: color-mix(in srgb, var(--text-soft) 38%, transparent); stroke-width: 1.2; vector-effect: non-scaling-stroke; transition: opacity .18s, stroke .18s; }
.character-graph-edge circle { fill: var(--bg-soft); stroke: color-mix(in srgb, var(--text-soft) 58%, transparent); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.character-graph-edge.is-muted { opacity: .25; }
.character-graph-edge.is-focused line { stroke: var(--accent); stroke-width: 2; filter: url(#character-graph-glow); }
.character-graph-edge.is-focused circle { fill: var(--accent); stroke: var(--accent); }
.character-graph-edge-label { opacity: 0; pointer-events: none; transition: opacity .18s; }
.character-graph-edge.is-focused .character-graph-edge-label { opacity: 1; }
.character-graph-edge-label rect { fill: var(--surface-solid); stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.character-graph-edge-label text { fill: var(--accent-bright); font: 8px "Segoe UI", "Microsoft YaHei UI", sans-serif; letter-spacing: .4px; }
.character-graph-node { --node-color: var(--accent); outline: none; }
.character-graph-node .node-shell { fill: color-mix(in srgb, var(--surface-solid) 94%, var(--node-color) 6%); stroke: color-mix(in srgb, var(--node-color) 38%, var(--line)); stroke-width: 1.2; vector-effect: non-scaling-stroke; transition: fill .18s, stroke .18s, opacity .18s; }
.character-graph-node .node-accent { fill: var(--node-color); }
.character-graph-node .node-avatar { fill: color-mix(in srgb, var(--node-color) 12%, var(--surface-solid)); stroke: color-mix(in srgb, var(--node-color) 56%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.character-graph-node .node-initials { fill: var(--node-color); font: 600 12px "Segoe UI", "Microsoft YaHei UI", sans-serif; }
.character-graph-node .node-name { fill: var(--text); font: 600 13px "Segoe UI", "Microsoft YaHei UI", sans-serif; }
.character-graph-node .node-category { fill: var(--muted); font: 7px "Segoe UI", "Microsoft YaHei UI", sans-serif; letter-spacing: .5px; }
.character-graph-node:hover .node-shell, .character-graph-node:focus-visible .node-shell { fill: color-mix(in srgb, var(--surface-solid) 85%, var(--node-color) 15%); stroke: var(--node-color); stroke-width: 2; }
.character-graph-node.is-focus .node-shell { fill: color-mix(in srgb, var(--surface-solid) 78%, var(--node-color) 22%); stroke: var(--node-color); stroke-width: 2.4; filter: url(#character-graph-glow); }
.character-graph-node.is-focus .node-category { fill: var(--node-color); }
.character-graph-node.is-unrelated { opacity: .36; }
.character-graph-node.is-group-muted { opacity: .14; }
.character-graph-panel > footer { min-height: 52px; display: flex; align-items: center; flex-wrap: wrap; gap: 16px; padding: 11px 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 8px; }
.character-graph-panel > footer span { display: inline-flex; align-items: center; gap: 7px; }
.character-graph-panel > footer em { margin-left: auto; font-style: normal; }
.legend-line { width: 24px; height: 1px; background: var(--accent); box-shadow: 0 0 5px color-mix(in srgb, var(--accent) 70%, transparent); }
.legend-node { width: 9px; height: 9px; border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.character-graph-inspector { min-width: 0; display: flex; flex-direction: column; padding: 21px; background: linear-gradient(145deg, color-mix(in srgb, var(--node-color) 8%, transparent), transparent 42%), var(--surface); }
.character-graph-focus { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 13px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.character-graph-focus > span { width: 58px; height: 68px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--node-color) 55%, var(--line)); color: var(--node-color); background: color-mix(in srgb, var(--node-color) 9%, transparent); font: 200 25px monospace; }
.character-graph-focus small { color: var(--node-color); font: 7px monospace; letter-spacing: .9px; }
.character-graph-focus h2 { margin: 5px 0 4px; font-size: 20px; }
.character-graph-focus p { margin: 0; color: var(--text-soft); font-size: 9px; line-height: 1.45; }
.character-graph-inspector dl { display: grid; grid-template-columns: repeat(3, 1fr); margin: 13px 0; border: 1px solid var(--line); }
.character-graph-inspector dl div { padding: 10px 8px; border-right: 1px solid var(--line); }
.character-graph-inspector dl div:last-child { border: 0; }
.character-graph-inspector dt { color: var(--muted); font-size: 7px; }
.character-graph-inspector dd { margin: 5px 0 0; color: var(--node-color); font: 16px monospace; }
.character-graph-summary { display: -webkit-box; margin: 0 0 17px; overflow: hidden; color: var(--text-soft); font-size: 10px; line-height: 1.72; -webkit-line-clamp: 5; -webkit-box-orient: vertical; }
.character-graph-relations { display: grid; gap: 6px; }
.character-graph-relations > span { margin-bottom: 3px; color: var(--muted); font: 7px monospace; letter-spacing: .8px; }
.character-graph-relation-card { position: relative; min-width: 0; display: grid; grid-template-columns: 4px 1fr 15px; align-items: center; gap: 9px; padding: 10px; border: 1px solid var(--line); background: var(--surface-raised); }
.character-graph-relation-card:hover { border-color: color-mix(in srgb, var(--node-color) 48%, var(--line)); }
.character-graph-relation-card > i { align-self: stretch; background: var(--node-color); }
.character-graph-relation-card div { min-width: 0; }
.character-graph-relation-card span, .character-graph-relation-card small { display: block; overflow: hidden; color: var(--muted); font: 7px monospace; text-overflow: ellipsis; white-space: nowrap; }
.character-graph-relation-card b { display: block; overflow: hidden; margin: 4px 0; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.character-graph-relation-card .icon { color: var(--node-color); }
.character-graph-open { width: 100%; justify-content: center; margin-top: auto; padding-top: 11px; padding-bottom: 11px; }
.profile-hero { position: relative; display: grid; grid-template-columns: 260px 1fr; gap: clamp(35px, 6vw, 80px); align-items: center; min-height: 340px; margin-top: 25px; padding: clamp(28px, 5vw, 62px); border: 1px solid var(--line); background: radial-gradient(circle at 18% 50%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 24%), var(--surface); }
.portrait.large { height: 230px; min-height: 0; }
.profile-hero h1 { margin: 10px 0 13px; font-size: 48px; }
.profile-hero p { max-width: 650px; color: var(--text-soft); line-height: 1.8; }
.profile-hero .tag-row button, .profile-hero .tag-row a { color: var(--accent); cursor: pointer; }
.profile-id { position: absolute; top: 20px; right: 24px; color: var(--muted); font: 8px monospace; }
.profile-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 12px; align-items: start; margin-top: 12px; }
.panel { border: 1px solid var(--line); background: var(--surface); }
.profile-layout > .panel { padding: 30px; }
.panel-kicker { color: var(--accent); font: 8px monospace; letter-spacing: 1.8px; }
.panel h2 { margin: 8px 0 16px; font-size: 20px; }
.panel > p { color: var(--text-soft); font-size: 12px; line-height: 1.8; }
.panel dl { margin: 25px 0 0; border-top: 1px solid var(--line); }
.panel dl div { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 10px; }.panel dt { color: var(--muted); }.panel dd { margin: 0; }
.related-row { display: grid; grid-template-columns: 50px 1fr 16px; align-items: center; gap: 10px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 10px; }.related-row span { color: var(--accent); font-family: monospace; }
.profile-summary-panel { align-self: start; }
.profile-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.profile-panel-head h2 { margin-bottom: 12px; font-size: 24px; letter-spacing: -.35px; }
.profile-panel-head em { flex: 0 0 auto; margin-top: 2px; padding: 5px 8px; border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, transparent); font: normal 8px monospace; letter-spacing: .5px; }
.profile-summary-panel > p { margin: 5px 0 0; color: var(--text); font-size: 14px; line-height: 1.9; text-wrap: pretty; }
.profile-summary-panel dl { margin-top: 22px; }
.profile-summary-panel dl div { gap: 24px; padding: 13px 0; font-size: 12px; line-height: 1.55; }
.profile-summary-panel dt { flex: 0 0 auto; font-size: 10px; letter-spacing: .2px; }
.profile-summary-panel dd { max-width: 70%; color: var(--text-soft); text-align: right; overflow-wrap: anywhere; }
.profile-events-panel { position: relative; height: clamp(380px, 52vh, 520px); display: grid; grid-template-rows: auto minmax(0, 1fr); align-self: start; padding-bottom: 17px !important; }
.profile-events-scroll { min-height: 0; margin: 2px -9px 0 0; padding-right: 9px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 58%, var(--line-strong)) color-mix(in srgb, var(--surface-raised) 84%, transparent); }
.profile-events-scroll:focus-visible { outline: 1px solid var(--accent); outline-offset: 5px; }
.profile-events-scroll::-webkit-scrollbar { width: 9px; }
.profile-events-scroll::-webkit-scrollbar-track { background: color-mix(in srgb, var(--surface-raised) 84%, transparent); }
.profile-events-scroll::-webkit-scrollbar-thumb { border: 2px solid var(--surface); background: color-mix(in srgb, var(--accent) 58%, var(--line-strong)); }
.profile-events-panel .related-row { grid-template-columns: 58px minmax(0, 1fr) 18px; gap: 12px; min-height: 52px; padding: 15px 3px; font-size: 12px; line-height: 1.45; }
.profile-events-panel .related-row span { font-size: 9px; letter-spacing: .3px; }
.profile-events-panel .related-row b { font-weight: 520; }
.profile-events-panel .related-row:hover { color: var(--accent); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent); }

.character-identity-panel, .character-journey-panel, .character-unresolved-panel { margin-top: 12px; padding: 28px 30px; }
.character-identity-panel > header p, .character-journey-panel > header p, .character-unresolved-panel > header p { max-width: 820px; margin: -6px 0 0; color: var(--text-soft); font-size: 10px; line-height: 1.75; }
.identity-layer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 22px; }
.identity-layer-grid article { position: relative; min-height: 145px; display: grid; align-content: start; gap: 11px; padding: 17px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface-raised) 90%, var(--accent) 3%); }
.identity-layer-grid article > span { color: var(--accent); font: 8px monospace; letter-spacing: 1px; }
.identity-layer-grid article p { margin: 0; color: var(--text-soft); font-size: 10px; line-height: 1.75; }
.identity-layer-grid article em { align-self: end; justify-self: start; margin-top: 3px; padding: 4px 7px; border: 1px solid var(--line); color: var(--muted); font: normal 7px monospace; }

.character-journey-list { margin-top: 25px; }
.character-journey-node { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 17px; padding: 0 0 23px; }
.character-journey-node:last-child { padding-bottom: 0; }
.journey-marker { position: relative; display: grid; justify-items: center; }
.journey-marker::after { content: ""; position: absolute; top: 19px; bottom: -5px; width: 1px; background: var(--line-strong); }
.character-journey-node:last-child .journey-marker::after { display: none; }
.journey-marker i { position: relative; z-index: 1; width: 11px; height: 11px; margin-top: 4px; transform: rotate(45deg); border: 1px solid var(--accent); background: var(--surface); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 22%, transparent); }
.journey-marker span { position: relative; z-index: 1; margin-top: 12px; color: var(--muted); font: 7px monospace; }
.journey-content { min-width: 0; padding: 18px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface-raised) 92%, var(--accent) 2%); }
.journey-content > header { display: grid; gap: 6px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.journey-content > header a { justify-self: start; color: var(--accent); font: 8px monospace; letter-spacing: .8px; }
.journey-content h3 { margin: 0; font-size: 16px; }
.journey-copy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.journey-copy section { min-width: 0; padding: 13px; border: 1px solid var(--line); background: var(--surface); }
.journey-copy span, .journey-terms > span, .journey-evidence > span { display: block; margin-bottom: 7px; color: var(--muted); font: 7px monospace; letter-spacing: .8px; }
.journey-copy p { margin: 0; color: var(--text-soft); font-size: 10px; line-height: 1.75; }
.journey-terms, .journey-evidence { margin-top: 14px; }
.character-evidence-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.character-evidence-list button { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; gap: 3px 9px; min-width: 0; padding: 9px 10px; border: 1px solid var(--line); color: var(--text); text-align: left; background: var(--surface); cursor: pointer; }
.character-evidence-list button:hover { border-color: var(--accent); background: color-mix(in srgb, var(--surface) 90%, var(--accent) 8%); }
.character-evidence-list small { grid-column: 1; color: var(--accent); font: 7px monospace; }
.character-evidence-list b { grid-column: 1; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.character-evidence-list .icon { grid-column: 2; grid-row: 1 / span 2; color: var(--accent); }

.character-unresolved-panel > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 21px; }
.character-unresolved-panel article { padding: 16px; border: 1px dashed var(--line-strong); background: var(--bg-soft); }
.character-unresolved-panel h3 { margin: 0 0 9px; color: var(--text); font-size: 12px; }
.character-unresolved-panel article p { margin: 0; color: var(--text-soft); font-size: 10px; line-height: 1.75; }

.alphabet { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 28px; padding: 7px; border: 1px solid var(--line); background: var(--surface); }
.alphabet button { width: 38px; height: 31px; border: 0; color: var(--muted); background: transparent; font: 9px monospace; cursor: pointer; }
.alphabet button:first-child { width: 52px; }.alphabet button.is-active { color: var(--accent); background: rgba(87, 203, 241, .09); }
.term-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.term-filter-row { margin-bottom: 28px; }
.term-card { position: relative; min-height: 230px; padding: 24px; border: 1px solid var(--line); text-align: left; color: var(--text); background: var(--surface); cursor: pointer; transition: .2s; }
.term-card::after { content: ""; position: absolute; right: 0; top: 0; border-style: solid; border-width: 0 27px 27px 0; border-color: transparent color-mix(in srgb, var(--term) 22%, transparent) transparent transparent; }
.term-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--term) 42%, transparent); }
.term-card > span { color: var(--term); font: 8px monospace; letter-spacing: 1.3px; }
.term-card h2 { margin: 16px 0 4px; font-size: 21px; }.term-card > small { color: var(--muted); font: 8px monospace; letter-spacing: 1px; }.term-card p { margin: 18px 0 36px; color: var(--text-soft); font-size: 11px; line-height: 1.7; }.term-card footer { position: absolute; left: 24px; right: 24px; bottom: 20px; display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; }

.chapter-map { position: relative; max-width: 950px; margin: 0 auto; padding-left: 86px; }
.map-spine { position: absolute; left: 25px; top: 0; bottom: 0; width: 1px; background: var(--line-strong); }
.map-spine span { position: absolute; top: -22px; left: -19px; color: var(--accent); font: 7px monospace; letter-spacing: 1px; }
.map-spine i { position: absolute; top: 0; left: -4px; width: 9px; height: 9px; transform: rotate(45deg); border: 1px solid var(--accent); background: var(--bg); }
.map-spine em { position: absolute; bottom: 0; left: -9px; color: var(--muted); font: 7px monospace; letter-spacing: 1px; writing-mode: vertical-rl; }
.map-node { position: relative; display: grid; grid-template-columns: 70px 1fr 60px 20px; align-items: center; gap: 22px; min-height: 140px; margin-bottom: 12px; padding: 24px; border: 1px solid var(--line); background: var(--surface); transition: .2s; }
.map-node::before { content: ""; position: absolute; left: -62px; width: 61px; height: 1px; background: var(--line-strong); }
.map-node:hover { border-color: var(--line-strong); transform: translateX(4px); }
.map-node > span { color: var(--accent); font: 200 35px monospace; }.map-node small { color: var(--muted); font: 8px monospace; letter-spacing: 1px; }.map-node h2 { margin: 6px 0; font-size: 20px; }.map-node p { margin: 0; color: var(--text-soft); font-size: 10px; }.map-node strong { font: 200 18px monospace; }.map-node.violet > span { color: var(--violet); }.map-node.slate { opacity: 1; }
.map-fork { position: relative; margin: 26px 0 0 80px; }.map-fork::before { content: ""; position: absolute; left: -116px; top: -48px; width: 93px; height: 75px; border-left: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); transform: skewX(-35deg); }.map-fork a { display: inline-grid; gap: 4px; padding: 14px 20px; border: 1px dashed var(--line-strong); }.map-fork small { color: var(--accent); font: 7px monospace; }.map-fork b { font-size: 11px; }

.track-purpose { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 20px; margin-bottom: 12px; padding: 24px; overflow: hidden; background-image: linear-gradient(120deg, rgba(72, 196, 236, .06), transparent 56%, rgba(117, 103, 225, .06)); }
.track-purpose-mark { width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid var(--line-strong); color: var(--accent); background: rgba(72, 196, 236, .06); transform: rotate(-3deg); }
.track-purpose-copy h2 { margin: 5px 0 7px; font-size: 19px; }.track-purpose-copy p { max-width: 720px; margin: 0; color: var(--text-soft); font-size: 11px; line-height: 1.75; }
.track-personal-stats { display: flex; align-items: stretch; }.track-personal-stats span { min-width: 86px; padding: 10px 13px; border-left: 1px solid var(--line); color: var(--muted); font: 8px/1.45 monospace; }.track-personal-stats strong { display: block; color: var(--text); font-size: 18px; }
.track-random { grid-column: 3; justify-self: end; }
.track-toolbar { display: grid; gap: 16px; margin-bottom: 12px; padding: 18px 20px; }
.track-toolbar .inline-search { width: min(520px, 100%); }
.track-filter { display: grid; grid-template-columns: 80px 1fr; align-items: center; gap: 12px; }
.track-filter > span { color: var(--muted); font: 8px monospace; letter-spacing: 1px; }
.track-list { border: 1px solid var(--line); background: var(--surface); }
.track-row { position: relative; min-height: 88px; border-bottom: 1px solid var(--line); transition: background .18s, box-shadow .18s; }
.track-row:last-child { border: 0; }.track-row:hover { background: rgba(83, 199, 237, .035); }.track-row.is-saved { box-shadow: inset 2px 0 var(--accent); }.track-row.is-played::after { content: "PLAYED"; position: absolute; top: 9px; right: 12px; color: rgba(80, 213, 166, .44); font: 6px monospace; letter-spacing: 1px; pointer-events: none; }
.track-row-main { display: grid; grid-template-columns: 48px minmax(210px, 1.15fr) minmax(150px, .8fr) 64px 100px auto; align-items: center; gap: 15px; min-height: 88px; padding: 14px 20px; }
.track-row[hidden], .archive-entry[hidden] { display: none !important; }
.track-no { color: var(--muted); font: 9px monospace; }.track-name h2 { margin: 0; font-size: 15px; }.track-name p { margin: 4px 0 0; color: var(--muted); font-size: 9px; }.track-row-main > div small { display: block; margin-bottom: 4px; color: var(--muted); font: 7px monospace; }.track-row-main > div a { color: var(--term); font-size: 10px; }.track-row-main > div b { font: 10px monospace; }.track-role { padding: 4px 7px; border: 1px solid var(--line); color: var(--text-soft); font: 8px monospace; text-align: center; }
.track-title-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.track-actions { display: flex; justify-content: flex-end; gap: 5px; }.track-action { min-height: 32px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border: 1px solid var(--line); color: var(--muted); background: rgba(255,255,255,.012); font: 8px monospace; cursor: pointer; }.track-action:hover { border-color: var(--line-strong); color: var(--text); }.track-action.is-active { border-color: rgba(72, 196, 236, .38); color: var(--accent); background: rgba(72, 196, 236, .06); }.track-action.is-played { border-color: rgba(80, 213, 166, .34); color: #70d9ad; background: rgba(80, 213, 166, .05); }.track-action-check { display: grid; place-items: center; width: 14px; height: 14px; border: 1px solid currentColor; font-size: 8px; }
.track-detail { border-top: 1px solid rgba(255,255,255,.035); }.track-detail > summary { min-height: 35px; display: flex; align-items: center; justify-content: flex-end; gap: 7px; padding: 7px 20px; color: var(--muted); font: 8px monospace; list-style: none; cursor: pointer; }.track-detail > summary::-webkit-details-marker { display: none; }.track-detail > summary:hover { color: var(--accent); }.track-detail > summary .icon { transition: transform .18s; }.track-detail[open] > summary .icon { transform: rotate(90deg); }
.track-detail-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(230px, .65fr); gap: 1px; padding: 0 20px 18px 68px; }.track-detail-body > section { padding: 16px; border: 1px solid var(--line); background: rgba(3, 9, 17, .24); }.track-detail-body section > span { display: block; margin-bottom: 7px; color: var(--accent); font: 8px monospace; letter-spacing: .08em; }.track-archive-purpose p { margin: 0; color: var(--text-soft); font-size: 10px; line-height: 1.75; }.track-related-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }.track-related-links a { padding: 5px 7px; border: 1px solid var(--line); color: var(--term); font: 8px monospace; }.track-related-links a:hover { border-color: var(--line-strong); color: var(--accent); }
.track-chart-data > div { display: flex; flex-wrap: wrap; gap: 5px; }.track-chart-data > small { display: block; margin-top: 10px; color: var(--muted); font: 7px monospace; }
.track-difficulties > small { display: block; margin-bottom: 6px; color: var(--muted); font: 7px monospace; }
.track-difficulties > div { display: flex; flex-wrap: wrap; gap: 5px; }
.difficulty-chip { min-width: 40px; display: inline-grid; grid-template-columns: auto auto; align-items: center; justify-content: space-between; gap: 5px; padding: 5px 6px; border: 1px solid var(--line); background: rgba(255,255,255,.018); }
.difficulty-chip small { color: var(--muted); font: 7px monospace; }
.difficulty-chip b { color: var(--text); font: 10px monospace !important; }
.difficulty-chip.ez { border-color: rgba(84, 206, 145, .3); }.difficulty-chip.ez small { color: #71d8a4; }
.difficulty-chip.hd { border-color: rgba(82, 160, 235, .32); }.difficulty-chip.hd small { color: #79b9f3; }
.difficulty-chip.in { border-color: rgba(238, 91, 105, .32); }.difficulty-chip.in small { color: #f1808c; }
.difficulty-chip.at { border-color: rgba(165, 115, 238, .38); }.difficulty-chip.at small { color: #c39af6; }
.hidden-badge { padding: 3px 6px; border: 1px solid rgba(130, 118, 255, .4); color: #aca7ff; background: rgba(105, 91, 229, .08); font: normal 7px monospace; letter-spacing: .8px; }
.track-unlock { grid-column: 1 / -1; padding: 13px 15px !important; border-left: 2px solid var(--violet) !important; background: rgba(118, 103, 224, .055) !important; }
.track-unlock b { color: #b9b4ff; font: 8px monospace !important; letter-spacing: .9px; }
.track-unlock p { margin: 5px 0 0; color: var(--text-soft); font-size: 10px; line-height: 1.65; }
.is-hidden-track { background-image: linear-gradient(90deg, rgba(117, 103, 225, .035), transparent 55%); }

.temporary-focus { position: relative; z-index: 1; animation: temporary-focus-pulse 4.2s ease-out both; }
@keyframes temporary-focus-pulse {
  0%, 22% { border-color: var(--accent); background-color: rgba(72, 196, 236, .18); box-shadow: 0 0 0 1px rgba(72, 196, 236, .35), 0 0 26px rgba(72, 196, 236, .18); }
  100% { border-color: var(--line); background-color: transparent; box-shadow: none; }
}

.decode-overview { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; padding: 26px; margin-bottom: 12px; overflow: hidden; }
.decode-overview-mark { width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid var(--line-strong); color: var(--accent-bright); background: linear-gradient(145deg, rgba(76, 188, 226, .14), rgba(76, 188, 226, .02)); transform: rotate(-3deg); }
.decode-overview h2 { margin: 4px 0 7px; font-size: 19px; }.decode-overview p { margin: 0; max-width: 680px; color: var(--text-soft); font-size: 12px; line-height: 1.75; }
.decode-stats { display: grid; grid-template-columns: repeat(3, auto); gap: 10px; }.decode-stats span { min-width: 94px; padding: 13px 12px; border-left: 1px solid var(--line); color: var(--muted); font: 9px/1.4 monospace; }.decode-stats strong { display: block; margin-bottom: 2px; color: var(--text); font-size: 18px; }
.decode-media-policy { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: start; gap: 13px; margin-bottom: 12px; padding: 16px 19px; border-left: 2px solid #d4b766; }.decode-media-policy > div { width: 34px; height: 34px; display: grid; place-items: center; color: #d4b766; border: 1px solid rgba(212,183,102,.28); }.decode-media-policy p { display: grid; gap: 4px; margin: 0; }.decode-media-policy b { color: var(--text); font-size: 10px; }.decode-media-policy span { color: var(--text-soft); font-size: 10px; line-height: 1.65; }
.decode-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; margin-bottom: 12px; }.decode-toolbar .inline-search { width: min(420px, 45%); }.decode-toolbar .track-filter { display: flex; align-items: center; gap: 12px; }.decode-toolbar .track-filter > span { flex: 0 0 auto; color: var(--muted); font: 9px monospace; }
.puzzle-guide-list { display: grid; gap: 10px; }.puzzle-guide { scroll-margin-top: 92px; overflow: hidden; }.puzzle-guide[hidden] { display: none; }.puzzle-guide > summary { position: relative; display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 22px 24px; list-style: none; cursor: pointer; }.puzzle-guide > summary::-webkit-details-marker { display: none; }.puzzle-guide > summary::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--accent); opacity: .3; }.puzzle-guide[open] > summary::before { opacity: 1; box-shadow: 0 0 16px var(--accent); }
.puzzle-code { color: var(--accent); font: 9px/1.5 monospace; letter-spacing: .08em; }.puzzle-title small { color: var(--muted); font: 8px monospace; }.puzzle-title h2 { margin: 5px 0 4px; font-size: 18px; }.puzzle-title p { margin: 0; color: var(--text-soft); font-size: 11px; line-height: 1.6; }.puzzle-track-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }.puzzle-track-tags span { padding: 4px 7px; border: 1px solid var(--line); color: var(--muted); background: rgba(76, 188, 226, .025); font: 8px monospace; }
.puzzle-toggle { display: flex; align-items: center; gap: 8px; color: var(--muted); font: 9px monospace; white-space: nowrap; }.puzzle-toggle .icon { transition: transform .2s ease; }.puzzle-guide[open] .puzzle-toggle .icon { transform: rotate(90deg); }
.puzzle-guide-body { padding: 0 24px 24px 146px; border-top: 1px solid var(--line); }.puzzle-context, .puzzle-conclusion { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 18px; background: var(--line); }.puzzle-context section, .puzzle-conclusion section { padding: 20px; background: var(--panel); }.puzzle-guide-body section > span, .puzzle-steps > span { display: block; margin-bottom: 9px; color: var(--accent); font: 8px monospace; letter-spacing: .08em; }.puzzle-guide-body p { margin: 0; color: var(--text-soft); font-size: 12px; line-height: 1.85; }
.puzzle-steps { margin-top: 18px; }.puzzle-steps-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.puzzle-steps-heading > span { margin-bottom: 0 !important; }.puzzle-steps-heading small { color: var(--muted); font: 8px monospace; }
.guide-progress { display: grid; gap: 7px; margin: 12px 0 9px; }.guide-progress > div { display: flex; align-items: center; gap: 9px; color: var(--muted); font: 8px monospace; }.guide-progress > div b { color: var(--text); }.guide-progress button { margin-left: auto; padding: 2px 0; border: 0; color: var(--muted); background: transparent; font: 8px monospace; cursor: pointer; }.guide-progress button:hover { color: var(--accent); }.guide-progress button:disabled { opacity: .35; cursor: default; }.guide-progress > i { height: 3px; display: block; overflow: hidden; background: rgba(255,255,255,.06); }.guide-progress > i b { height: 100%; display: block; background: linear-gradient(90deg, var(--accent), #72d7ae); transition: width .22s var(--ease); }
.interactive-demo-controls { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 13px 0 11px; padding: 10px 11px; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 5%, transparent), transparent); }
.interactive-demo-controls > div:first-child { min-width: 0; display: grid; gap: 3px; }.interactive-demo-controls > div:first-child > span { color: var(--accent); font: 8px monospace; letter-spacing: .06em; }.interactive-demo-controls small { overflow: hidden; color: var(--muted); font: 8px monospace; text-overflow: ellipsis; white-space: nowrap; }
.interactive-demo-controls > div:last-child { flex: 0 0 auto; display: flex; gap: 5px; }.interactive-demo-controls button { min-height: 28px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 9px; border: 1px solid var(--line); color: var(--text-soft); background: rgba(255,255,255,.018); font: 8px monospace; cursor: pointer; }.interactive-demo-controls button:hover { border-color: var(--line-strong); color: var(--accent); }.interactive-demo-controls .demo-play { min-width: 92px; }.interactive-demo-controls .demo-play.is-playing { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
[data-demo-root]:not([data-demo-index="-1"]) [data-demo-step] { opacity: .42; transition: opacity .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), transform .2s var(--ease); }
[data-demo-root] [data-demo-step].is-demo-visited { opacity: .72; }
[data-demo-root] [data-demo-step].is-demo-active { opacity: 1; border-color: color-mix(in srgb, var(--accent) 72%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 24px color-mix(in srgb, var(--accent) 12%, transparent); }
.puzzle-steps li.is-demo-active { transform: translateX(3px); }
.puzzle-steps ol { display: grid; margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }.puzzle-steps li { border-bottom: 1px solid var(--line); transition: background .16s; }.puzzle-steps li button { width: 100%; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: start; gap: 12px; padding: 13px 8px 13px 0; border: 0; color: inherit; text-align: left; background: transparent; cursor: pointer; }.puzzle-steps li:hover { background: rgba(72,196,236,.035); }.puzzle-steps li i { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--muted); font: normal 9px monospace; transition: .16s; }.puzzle-steps li.is-complete { background: rgba(80,213,166,.035); }.puzzle-steps li.is-complete i { border-color: rgba(80,213,166,.42); color: #70d9ad; background: rgba(80,213,166,.08); }.puzzle-steps li.is-complete p { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(112,217,173,.34); }.puzzle-guide-body footer { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

.evidence-overview { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; padding: 26px; margin-bottom: 12px; overflow: hidden; background-image: linear-gradient(120deg, rgba(72, 196, 236, .035), transparent 52%, rgba(114, 105, 226, .05)); }
.evidence-overview-mark { width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid var(--line-strong); color: var(--accent-bright); background: linear-gradient(145deg, rgba(76, 188, 226, .14), rgba(115, 97, 224, .04)); transform: rotate(3deg); }
.evidence-overview h2 { margin: 4px 0 7px; font-size: 19px; }.evidence-overview p { max-width: 680px; margin: 0; color: var(--text-soft); font-size: 12px; line-height: 1.75; }
.evidence-summary { display: grid; grid-template-columns: repeat(4, auto); gap: 8px; }.evidence-summary span { min-width: 96px; padding: 13px 12px; border-left: 1px solid var(--line); color: var(--muted); font: 9px/1.4 monospace; }.evidence-summary strong { display: block; margin-bottom: 2px; color: var(--text); font-size: 18px; }
.evidence-toolbar { display: grid; grid-template-columns: minmax(260px, 420px) 1fr; align-items: center; gap: 18px; padding: 18px 20px; margin-bottom: 12px; }.evidence-toolbar .filter-row { justify-content: flex-end; }
.evidence-list { display: grid; gap: 10px; }.evidence-record { scroll-margin-top: 92px; padding: 24px; overflow: hidden; }.evidence-record[hidden] { display: none; }
.evidence-record > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }.evidence-record > header span { color: var(--accent); font: 8px monospace; letter-spacing: .08em; }.evidence-record > header h2 { margin: 7px 0 0; font-size: 19px; }
.evidence-grade { flex: 0 0 auto; padding: 6px 9px; border: 1px solid var(--line); color: var(--muted); background: rgba(255, 255, 255, .015); font: normal 8px monospace; }.evidence-grade.grade-a { border-color: rgba(74, 211, 166, .32); color: #73d9b3; background: rgba(74, 211, 166, .06); }.evidence-grade.grade-b { border-color: rgba(246, 194, 91, .3); color: #e7c477; background: rgba(246, 194, 91, .05); }.evidence-grade.grade-safe { border-color: rgba(125, 123, 235, .34); color: #b9b4ff; background: rgba(125, 123, 235, .055); }
.evidence-material-state { display: flex; align-items: center; gap: 8px; width: fit-content; margin-top: 12px; padding: 6px 9px; border: 1px solid var(--line); color: var(--muted); background: rgba(255, 255, 255, .018); font: 8px monospace; }.evidence-material-state i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }.evidence-material-state.is-ready { border-color: rgba(74, 211, 166, .24); color: #73d9b3; background: rgba(74, 211, 166, .045); }.evidence-material-state.is-partial { border-color: rgba(125, 123, 235, .28); color: #b9b4ff; background: rgba(125, 123, 235, .04); }.evidence-material-state.is-pending { border-color: rgba(246, 194, 91, .24); color: #e7c477; background: rgba(246, 194, 91, .035); }
.evidence-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 18px; background: var(--line); }.evidence-columns section { padding: 19px; background: var(--panel); }.evidence-columns b { color: var(--accent); font: 8px monospace; letter-spacing: .08em; }.evidence-columns p { margin: 8px 0 0; color: var(--text-soft); font-size: 11px; line-height: 1.8; }
.evidence-record > footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 18px; }.evidence-record > footer > span { color: var(--muted); font: 8px monospace; }
.evidence-relations { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }.evidence-relations a, .evidence-relations button { padding: 5px 7px; border: 1px solid var(--line); color: var(--text-soft); background: transparent; font: 8px monospace; cursor: pointer; }.evidence-relations a:hover, .evidence-relations button:hover { border-color: var(--line-strong); color: var(--accent); }
.evidence-sequence { margin-top: 18px; }.evidence-sequence-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 10px; }.evidence-sequence-heading > div:first-child { display: grid; gap: 5px; }.evidence-sequence-heading span, .evidence-sequence-heading small { color: var(--muted); font: 8px monospace; }.evidence-sequence-heading b { color: var(--text); font-size: 11px; }.evidence-sequence-tools { display: flex; align-items: center; gap: 6px; }.evidence-sequence-tools small { margin-right: 4px; }.evidence-sequence-tools button { width: 30px; height: 28px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); color: var(--text-soft); background: rgba(255, 255, 255, .018); cursor: pointer; }.evidence-sequence-tools button:hover { border-color: var(--line-strong); color: var(--accent); background: rgba(72, 196, 236, .06); }.evidence-frame-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 30%); gap: 8px; padding: 1px 1px 12px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline proximity; scrollbar-width: auto; scrollbar-color: var(--accent) rgba(255, 255, 255, .06); }.evidence-frame-strip::-webkit-scrollbar { height: 10px; }.evidence-frame-strip::-webkit-scrollbar-track { background: rgba(255, 255, 255, .045); }.evidence-frame-strip::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 99px; background: var(--accent); background-clip: padding-box; }.evidence-frame { min-width: 0; margin: 0; border: 1px solid var(--line); background: rgba(5, 12, 22, .72); scroll-snap-align: start; }.evidence-frame a { display: block; aspect-ratio: 16 / 7.21; overflow: hidden; background: #050910; }.evidence-frame img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .25s ease, filter .25s ease; }.evidence-frame a:hover img { transform: scale(1.02); filter: brightness(1.08); }.evidence-frame figcaption { display: grid; gap: 5px; padding: 11px 12px 12px; }.evidence-frame figcaption strong { color: var(--accent); font: 9px monospace; }.evidence-frame figcaption span { color: var(--text-soft); font-size: 9px; line-height: 1.55; }
.fragment-result { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }.fragment-result section { padding: 16px; border: 1px solid var(--line); background: rgba(72, 196, 236, .025); }.fragment-result span { display: block; color: var(--muted); font: 8px monospace; }.fragment-result strong { display: block; margin-top: 7px; color: var(--accent-bright); font: 14px monospace; letter-spacing: .09em; overflow-wrap: anywhere; }.fragment-result .is-pending { background: rgba(246, 194, 91, .035); }.fragment-result .is-pending strong { color: #e7c477; }
.fragment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 10px; border: 1px solid var(--line); background: var(--line); }.fragment-grid > div { min-width: 0; display: grid; grid-template-columns: 30px minmax(118px, .8fr) 1fr; align-items: center; gap: 10px; padding: 11px 13px; background: var(--panel); }.fragment-grid i { color: var(--muted); font: normal 8px monospace; }.fragment-grid code { color: var(--text); font-size: 10px; overflow-wrap: anywhere; }.fragment-grid span { color: #d4b766; font-size: 9px; }
.evidence-hold { display: flex; align-items: flex-start; gap: 11px; margin-top: 12px; padding: 14px 16px; border-left: 2px solid #d4b766; background: rgba(246, 194, 91, .045); color: #d4b766; }.evidence-hold p { margin: 0; color: var(--text-soft); font-size: 10px; line-height: 1.7; }
.scene-stage { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 18px; padding: 28px 22px; border: 1px solid var(--line); background: radial-gradient(circle at 50% 50%, rgba(75, 196, 235, .09), transparent 32%), linear-gradient(135deg, rgba(63, 86, 123, .08), transparent); overflow: hidden; }.scene-stage::before { content: ""; position: absolute; left: 10%; right: 10%; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); }.scene-stage > span { position: relative; z-index: 1; min-height: 82px; display: grid; place-content: center; gap: 7px; padding: 12px; border: 1px solid var(--line); text-align: center; background: color-mix(in srgb, var(--surface-solid) 88%, transparent); }.scene-stage > span i { color: var(--accent); font: normal 8px monospace; }.scene-stage > span b { color: var(--text-soft); font-size: 10px; line-height: 1.45; }.scene-convergence > span:nth-child(3) { border-color: var(--line-strong); box-shadow: 0 0 20px rgba(72, 196, 236, .08); }.scene-convergence > span:nth-child(even) { transform: translateY(calc((var(--beat) - 2) * 8px)); }.scene-separation > span:nth-child(n+3) { transform: translateY(calc((var(--beat) - 1) * 7px)); }.scene-shutdown > span:nth-child(2) { color: #e7c477; background: rgba(0, 0, 0, .4); }
.scene-demonstration > .interactive-demo-controls { margin-top: 18px; }.scene-demonstration .scene-stage { margin-top: 8px; }
.scene-stage > span.is-demo-active { transform: translateY(-3px) scale(1.015); }
.scene-caption { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; }.scene-caption p, .scene-caption strong { margin: 0; font-size: 10px; line-height: 1.75; }.scene-caption p { color: var(--text-soft); }.scene-caption strong { padding-left: 14px; border-left: 1px solid var(--line); color: var(--muted); font-weight: 400; }

.trivia-overview { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; margin-bottom: 12px; padding: 26px; overflow: hidden; background-image: linear-gradient(120deg, rgba(126, 112, 235, .07), transparent 48%, rgba(72, 196, 236, .045)); }
.trivia-overview-mark { width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid rgba(185, 180, 255, .32); color: #c4c0ff; background: linear-gradient(145deg, rgba(126, 112, 235, .16), rgba(72, 196, 236, .035)); transform: rotate(-3deg); }.trivia-overview h2 { margin: 4px 0 7px; font-size: 19px; }.trivia-overview p { max-width: 690px; margin: 0; color: var(--text-soft); font-size: 12px; line-height: 1.75; }
.trivia-stats { display: grid; grid-template-columns: repeat(3, auto); gap: 8px; }.trivia-stats span { min-width: 90px; padding: 13px 12px; border-left: 1px solid var(--line); color: var(--muted); font: 9px/1.4 monospace; }.trivia-stats strong { display: block; margin-bottom: 2px; color: var(--text); font-size: 18px; }
.trivia-toolbar { display: grid; grid-template-columns: minmax(260px, 380px) minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-bottom: 12px; padding: 16px 18px; }.trivia-toolbar .filter-row { justify-content: flex-end; margin: 0; }.trivia-favorites-filter { min-height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid var(--line); color: var(--text-soft); background: rgba(255,255,255,.018); font-size: 9px; white-space: nowrap; cursor: pointer; }.trivia-favorites-filter:hover, .trivia-favorites-filter.is-active { border-color: color-mix(in srgb, var(--accent) 48%, var(--line)); color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.trivia-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.trivia-card { position: relative; min-width: 0; display: flex; flex-direction: column; padding: 22px; overflow: hidden; scroll-margin-top: 92px; }.trivia-card[hidden] { display: none; }.trivia-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: linear-gradient(180deg, #8f86ff, var(--accent)); opacity: .25; }.trivia-card.is-favorite::before { opacity: 1; box-shadow: 0 0 14px #8f86ff; }.trivia-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.trivia-card > header > span { color: #b9b4ff; font: 8px monospace; letter-spacing: .07em; }.trivia-favorite { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); color: var(--muted); background: transparent; cursor: pointer; }.trivia-favorite:hover, .trivia-favorite.is-active { border-color: rgba(185,180,255,.48); color: #c4c0ff; background: rgba(126,112,235,.08); }
.trivia-card > h2 { margin: 16px 0 9px; font-size: 19px; line-height: 1.35; }.trivia-card > p { margin: 0; color: var(--text-soft); font-size: 11px; line-height: 1.75; }.trivia-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 14px; }.trivia-tags span { padding: 4px 7px; border: 1px solid var(--line); color: var(--muted); background: rgba(255,255,255,.012); font: 8px monospace; }
.trivia-card details { margin-top: 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.trivia-card details > summary { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; color: var(--text-soft); font-size: 9px; cursor: pointer; }.trivia-card details > summary::-webkit-details-marker { display: none; }.trivia-card details > summary .icon { transition: transform .18s var(--ease); }.trivia-card details[open] > summary .icon { transform: rotate(90deg); }.trivia-card details > div { padding: 0 0 15px; }.trivia-card details p { margin: 0; color: var(--text-soft); font-size: 10px; line-height: 1.75; }.trivia-card details aside { display: grid; gap: 5px; margin-top: 10px; padding: 11px 12px; border-left: 2px solid #d4b766; background: rgba(246,194,91,.04); }.trivia-card details aside b { color: #d4b766; font: 8px monospace; }.trivia-card details aside span { color: var(--muted); font-size: 9px; line-height: 1.65; }
.trivia-detail-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 8px; }.trivia-detail-grid section { padding: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.012); }.trivia-detail-grid section > b, .trivia-significance > b, .trivia-related section > b { display: block; margin-bottom: 6px; color: #b9b4ff; font: 8px monospace; letter-spacing: .04em; }.trivia-event-steps { display: grid; gap: 0; margin: 10px 0 0; padding: 0; list-style: none; border: 1px solid var(--line); }.trivia-event-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 11px 12px; border-bottom: 1px solid var(--line); }.trivia-event-steps li:last-child { border-bottom: 0; }.trivia-event-steps li > span { color: var(--accent); font: 8px monospace; }.trivia-event-steps li b { display: block; margin-bottom: 4px; font-size: 9px; }.trivia-significance { margin-top: 10px; padding: 12px; border: 1px solid rgba(72,196,236,.18); background: rgba(72,196,236,.035); }.trivia-significance > b { color: var(--accent); }.trivia-related { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }.trivia-related section { min-width: 0; padding: 11px 12px; border: 1px solid var(--line); }.trivia-character-links, .trivia-evidence-links { display: flex; flex-wrap: wrap; gap: 5px; }.trivia-character-links a { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border: 1px solid var(--line); color: var(--text-soft); font-size: 8px; }.trivia-character-links a i { width: 5px; height: 5px; border-radius: 50%; background: var(--person); box-shadow: 0 0 7px var(--person); }.trivia-character-links a:hover, .trivia-evidence-links a:hover { border-color: var(--line-strong); color: var(--accent); }.trivia-evidence-links { display: grid; }.trivia-evidence-links a { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px; padding: 5px 7px; border: 1px solid var(--line); color: var(--muted); font-size: 8px; }.trivia-evidence-links a b { color: #b9b4ff; font: 7px monospace; }.trivia-evidence-links a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trivia-term-links { display: flex; flex-wrap: wrap; gap: 5px; }.trivia-term-links button { min-width: 0; display: grid; gap: 2px; padding: 5px 7px; border: 1px solid var(--line); text-align: left; color: var(--term); background: transparent; cursor: pointer; }.trivia-term-links button b { font-size: 8px; font-weight: 500; }.trivia-term-links button span { color: var(--muted); font: 7px monospace; }.trivia-term-links button:hover { border-color: var(--line-strong); color: var(--accent); }
.trivia-card > footer { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 9px 12px; margin-top: auto; padding-top: 16px; }.trivia-grade { width: max-content; padding: 5px 7px; border: 1px solid var(--line); font: normal 7px monospace; }.trivia-grade.is-a { border-color: rgba(74,211,166,.3); color: #73d9b3; background: rgba(74,211,166,.045); }.trivia-grade.is-b { border-color: rgba(246,194,91,.3); color: #e7c477; background: rgba(246,194,91,.045); }.trivia-grade.is-internal { border-color: rgba(185,180,255,.3); color: #b9b4ff; background: rgba(126,112,235,.045); }.trivia-card > footer > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }.trivia-card > footer > div a { padding: 4px 6px; border: 1px solid var(--line); color: var(--muted); font: 7px monospace; }.trivia-card > footer > div a:hover { color: var(--accent); border-color: var(--line-strong); }.trivia-open { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 10px 11px; border: 1px solid var(--line); color: var(--text-soft); font-size: 9px; background: rgba(72,196,236,.025); }.trivia-open:hover { border-color: var(--line-strong); color: var(--accent); }
.trivia-empty { align-items: center; gap: 14px; margin-top: 10px; padding: 24px; }.trivia-empty:not([hidden]) { display: flex; }.trivia-empty b { display: block; margin-bottom: 4px; }.trivia-empty p { margin: 0; color: var(--muted); font-size: 10px; }

.daily-trivia { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px; margin-top: 12px; padding: 24px 26px; overflow: hidden; background-image: linear-gradient(115deg, rgba(126,112,235,.1), rgba(72,196,236,.035) 52%, transparent); }
.daily-trivia-mark { width: 62px; height: 62px; display: grid; place-items: center; border: 1px solid rgba(185,180,255,.34); color: #c4c0ff; background: rgba(126,112,235,.07); }
.daily-trivia-mark small { color: var(--muted); font: 7px monospace; }
.daily-trivia-copy h2 { margin: 5px 0 7px; font-size: 20px; }
.daily-trivia-copy p { max-width: 700px; margin: 0; color: var(--text-soft); font-size: 11px; line-height: 1.75; }
.daily-trivia > a { min-width: 180px; display: grid; gap: 9px; padding: 15px 16px; border: 1px solid var(--line); color: var(--text-soft); background: rgba(2,8,15,.18); }
.daily-trivia > a small { color: #b9b4ff; font: 8px monospace; }
.daily-trivia > a span { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 9px; }
.daily-trivia > a:hover { border-color: var(--line-strong); color: var(--accent); }
.trivia-reference-panel { margin-top: 12px; padding: 27px 30px; }
.trivia-reference-panel > header { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.trivia-reference-panel > header h2 { margin: 5px 0 7px; }
.trivia-reference-panel > header p { max-width: 720px; margin: 0; color: var(--text-soft); font-size: 10px; line-height: 1.7; }
.trivia-reference-panel > header > a { display: flex; align-items: center; gap: 7px; color: var(--accent); font-size: 9px; white-space: nowrap; }
.trivia-reference-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 20px; }
.trivia-reference-list > a { position: relative; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; padding: 13px 14px; border: 1px solid var(--line); color: var(--text); background: rgba(255,255,255,.012); }
.trivia-reference-list > a > span { grid-column: 1; color: #b9b4ff; font: 7px monospace; }
.trivia-reference-list > a > b { grid-column: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.trivia-reference-list > a > p { grid-column: 1 / -1; margin: 2px 0 0; color: var(--muted); font-size: 8px; line-height: 1.55; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.trivia-reference-list > a > .icon { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--muted); }
.trivia-reference-list > a:hover { border-color: var(--line-strong); background: rgba(72,196,236,.035); }
.trivia-reference-list > a:hover > .icon { color: var(--accent); }
.term-trivia-section .trivia-reference-list { grid-template-columns: 1fr; margin-top: 10px; }
.term-trivia-section .trivia-reference-list > a { padding: 10px 11px; }

.source-summary { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 12px; border: 1px solid var(--line); background: var(--surface); }.source-summary div { display: grid; justify-items: center; gap: 5px; padding: 25px; border-right: 1px solid var(--line); }.source-summary div:last-child { border: 0; }.source-summary strong { color: var(--accent); font: 200 29px monospace; }.source-summary span { color: var(--muted); font-size: 9px; }.source-list .data-row { grid-template-columns: 130px 1.5fr 1fr .6fr; }.source-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text); }.source-link:hover { color: var(--accent); }.principle { display: grid; grid-template-columns: 70px 1fr; gap: 20px; align-items: center; margin-top: 12px; padding: 26px; }.principle > div { width: 58px; height: 58px; display: grid; place-items: center; transform: rotate(45deg); border: 1px solid var(--line-strong); color: var(--accent); }.principle > div svg { transform: rotate(-45deg); }.principle h2 { margin-bottom: 7px; }.principle p { margin: 0; }

.search-page { max-width: 1000px; }.search-hero { height: 66px; display: flex; align-items: center; gap: 14px; padding: 0 18px; border: 1px solid var(--line-strong); background: var(--surface-raised); box-shadow: 0 14px 40px rgba(0, 0, 0, .12); color: var(--accent); }.search-hero input { flex: 1; min-width: 0; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 16px; }.search-suggestions { display: flex; align-items: center; gap: 6px; margin: 13px 0 36px; color: var(--muted); font-size: 9px; }.search-suggestions button { padding: 4px 8px; border: 1px solid var(--line); color: var(--text-soft); background: transparent; font-size: 9px; cursor: pointer; }.search-count { margin-bottom: 11px; color: var(--muted); font: 9px monospace; }.search-results { display: grid; gap: 7px; }.search-result { width: 100%; display: grid; grid-template-columns: 55px 1fr 24px; align-items: center; gap: 17px; padding: 18px 20px; border: 1px solid var(--line); text-align: left; color: var(--text); background: var(--surface); cursor: pointer; }.search-result:hover { border-color: var(--line-strong); }.search-result > span { color: var(--accent); font: 8px monospace; }.search-result h2 { margin: 0 0 5px; font-size: 14px; }.search-result p { margin: 0; color: var(--text-soft); font-size: 10px; }.search-result mark { color: var(--accent-bright); background: rgba(90, 203, 240, .12); }.search-result > svg { color: var(--muted); }.no-results { padding: 50px; border: 1px dashed var(--line); text-align: center; }.no-results p { color: var(--muted); font-size: 11px; }
.search-page .search-suggestions { margin-bottom: 14px; }
.search-type-filters { justify-content: flex-start; margin: 0 0 22px; padding: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.012); }
.search-type-filters .chip { min-height: 30px; }
.search-result[data-result-type="冷知识"] { border-color: rgba(185,180,255,.2); background-image: linear-gradient(100deg, rgba(126,112,235,.07), transparent 42%); }
.search-result[data-result-type="冷知识"] > span { color: #c4c0ff; }
.search-result[data-result-type="冷知识"] > svg { color: #8f86ff; }

.settings-page { max-width: 950px; }.settings-list { padding: 0 28px; }.setting-row { min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 25px; border-bottom: 1px solid var(--line); }.setting-row:last-child { border: 0; }.setting-row b { font-size: 13px; }.setting-row p { margin: 6px 0 0; color: var(--muted); font-size: 10px; }.switch { position: relative; flex: 0 0 auto; width: 44px; height: 24px; padding: 0; border: 1px solid var(--line); border-radius: 99px; background: var(--bg-soft); cursor: pointer; }.switch i { position: absolute; left: 4px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--muted); transition: .2s; }.switch.is-on { border-color: var(--line-strong); background: rgba(74, 195, 234, .12); }.switch.is-on i { left: 24px; background: var(--accent); box-shadow: 0 0 9px var(--accent); }.setting-state { flex: 0 0 auto; padding: 7px 11px; border: 1px solid var(--line-strong); border-radius: 3px; color: var(--accent); background: rgba(74, 195, 234, .08); font: 9px monospace; letter-spacing: .8px; }.about-card { display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: 20px; margin-top: 12px; padding: 24px 28px; }.large-mark { transform: rotate(45deg) scale(1.15); }.about-card h2 { margin-bottom: 4px; }.about-card p { margin: 0; }
.volume-control { display: grid; grid-template-columns: minmax(130px, 210px) 42px; align-items: center; gap: 12px; color: var(--accent); font: 10px monospace; }
.volume-control input { width: 100%; accent-color: var(--accent); cursor: pointer; }
.volume-control span { text-align: right; }
.alias-hit { display: inline-flex; margin-left: 9px; padding: 3px 6px; border: 1px solid color-mix(in srgb, var(--term) 35%, var(--line)); border-radius: 3px; color: var(--term); background: color-mix(in srgb, var(--term) 8%, transparent); font: 8px/1.2 monospace; vertical-align: middle; }

.bottom-nav { display: none; }
.menu-scrim { display: none; }

.modal-backdrop { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(1, 6, 12, .72); backdrop-filter: blur(8px); opacity: 0; transition: opacity .18s; }.modal-backdrop.is-visible { opacity: 1; }.modal { position: relative; width: min(520px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; padding: 35px; border: 1px solid var(--line-strong); background: var(--surface-solid); box-shadow: var(--shadow); transform: translateY(12px) scale(.985); transition: transform .18s var(--ease); }.is-visible .modal { transform: none; }.modal::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--line); pointer-events: none; }.modal-close { position: absolute; z-index: 1; top: 15px; right: 15px; }.modal-code { color: var(--muted); font: 8px monospace; letter-spacing: 1.5px; }.term-type { display: inline-block; margin: 35px 0 0; padding: 4px 7px; border: 1px solid rgba(111, 168, 255, .35); color: var(--term); font: 8px monospace; }.term-modal h2, .archive-modal h2, .info-modal h2 { margin: 13px 0 3px; font-size: 28px; }.term-modal > small { color: var(--muted); font: 9px monospace; }.term-modal > p, .archive-modal > p { margin: 24px 0; color: var(--text-soft); font-size: 13px; line-height: 1.85; }.modal-section { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }.modal-section > span { color: var(--muted); font: 8px monospace; }.modal-section button { color: var(--term); cursor: pointer; }.modal footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 28px; }.modal footer a { display: flex; align-items: center; gap: 8px; color: var(--accent); font-size: 10px; }.archive-modal { width: min(780px, 100%); }.archive-modal-head { display: flex; align-items: center; justify-content: space-between; margin-top: 35px; }.archive-modal-head b { color: var(--accent); font: 12px monospace; }.archive-modal dl { display: grid; grid-template-columns: repeat(3, 1fr); margin: 22px 0; padding: 15px 0; border-block: 1px solid var(--line); }.archive-modal dl div { padding: 0 10px; border-right: 1px solid var(--line); }.archive-modal dl div:nth-child(3n), .archive-modal dl div:last-child { border-right: 0; }.archive-modal dl div:nth-child(n+4) { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }.archive-modal dt { color: var(--muted); font-size: 8px; }.archive-modal dd { margin: 5px 0 0; font-size: 10px; overflow-wrap: anywhere; }.archive-source-note { display: flex; align-items: center; gap: 12px; margin: 18px 0; padding: 11px 13px; border-left: 2px solid var(--accent); background: rgba(74, 195, 234, .06); }.archive-source-note span { color: var(--muted); font: 8px monospace; }.archive-source-note b { color: var(--text-soft); font-size: 10px; font-weight: 500; }.archive-body { padding: 4px 2px 8px; color: var(--text-soft); font-size: 13px; line-height: 2; letter-spacing: .02em; }.archive-body p { margin: 0 0 1.1em; white-space: normal; }.review-note { padding: 10px 12px; border: 1px dashed var(--line); color: var(--muted) !important; font-size: 10px !important; }.info-modal ul { list-style: none; display: grid; gap: 12px; margin: 25px 0; padding: 0; }.info-modal li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 14px; border: 1px solid var(--line); color: var(--text-soft); font-size: 11px; line-height: 1.6; }.info-modal li b { color: var(--text); }.blue-swatch { width: 20px; height: 2px; margin-top: 8px; background: var(--term); }
.term-explain { margin-top: 12px; padding: 13px 15px; border-left: 2px solid var(--term); background: rgba(92, 137, 255, .055); }
.term-explain b { color: var(--term); font: 8px monospace; letter-spacing: 1px; }
.term-explain p { margin: 6px 0 0; color: var(--text-soft); font-size: 11px; line-height: 1.75; }
.term-explain.verification { border-left-color: var(--warning); background: rgba(244, 190, 91, .055); }
.term-explain.verification b { color: var(--warning); }

#toast-root { position: fixed; z-index: 150; right: 22px; bottom: 22px; display: grid; gap: 7px; pointer-events: none; }.toast { padding: 12px 16px; border: 1px solid var(--line-strong); color: var(--text); background: var(--surface-solid); box-shadow: var(--shadow); font-size: 10px; opacity: 0; transform: translateY(8px); transition: .18s; }.toast.is-visible { opacity: 1; transform: none; }

.reveal { animation: reveal .55s var(--ease) both; animation-delay: var(--delay, 0ms); }.delay-1 { animation-delay: 80ms; }.delay-2 { animation-delay: 140ms; }
@keyframes reveal { from { opacity: 0; transform: translateY(13px); } }
@keyframes rotate { to { transform: rotate(360deg); } }
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }

@media (max-width: 1180px) {
  :root { --sidebar: 76px; }
  .sidebar { padding-inline: 10px; }
  .sidebar-head { justify-content: center; padding-inline: 0; }
  .sidebar .brand-type, .sidebar .nav-label, .sidebar .nav-item span, .sidebar .nav-item em, .build-stamp span, .build-stamp b { display: none; }
  .sidebar .nav-item { justify-content: center; padding: 0; }
  .sidebar .nav-item:hover { transform: none; }
  .build-stamp { justify-content: center; padding-inline: 0; }.build-stamp i { margin: 0; }
  .quick-grid { grid-template-columns: repeat(3, 1fr); }.quick-card.feature { grid-column: 1 / -1; }.reader-layout { grid-template-columns: 155px minmax(0, 700px); }.context-rail { display: none; }
  .character-card { grid-template-columns: 115px 1fr; }.portrait { min-height: 170px; }
  .character-graph-layout { grid-template-columns: 1fr; }
  .character-graph-inspector { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(260px, 1.2fr); gap: 14px 20px; }
  .character-graph-focus { align-self: start; }
  .character-graph-inspector dl { align-self: start; margin: 0; }
  .character-graph-summary { grid-column: 1; }
  .character-graph-relations { grid-column: 2; grid-row: 2 / span 2; }
  .character-graph-open { grid-column: 1; align-self: end; }
}

@media (max-width: 840px) {
  :root { --sidebar: 0px; --topbar: 62px; }
  .sidebar { width: min(310px, 86vw); padding: 22px 17px; transform: translateX(-102%); transition: transform .25s var(--ease); box-shadow: var(--shadow); }
  .menu-open .sidebar { transform: none; }
  .sidebar-head { justify-content: space-between; padding-inline: 7px; }
  .sidebar .brand-type, .sidebar .nav-label, .sidebar .nav-item span, .sidebar .nav-item em, .build-stamp span, .build-stamp b, .menu-close { display: flex; }
  .sidebar .nav-item { justify-content: flex-start; padding: 0 12px; }
  .sidebar .nav-item em { margin-left: auto; }.build-stamp { justify-content: flex-start; padding-inline: 12px; }.build-stamp i { margin-left: auto; }
  .menu-scrim { position: fixed; z-index: 45; inset: 0; display: block; visibility: hidden; background: rgba(2, 6, 12, .65); opacity: 0; transition: .2s; }.menu-open .menu-scrim { visibility: visible; opacity: 1; }
  .mobile-menu { display: grid; }.tablet-brand { display: block; }.tablet-brand .brand-type { display: none; }.tablet-brand .brand-mark { width: 24px; height: 24px; }
  .crumbs { display: none; }.topbar { padding: 0 22px; }.search-shortcut { min-width: auto; width: 38px; justify-content: center; padding: 0; }.search-shortcut span, .search-shortcut kbd { display: none; }
  .page { width: min(100% - 36px, var(--content-max)); padding-top: 42px; }.page-header { align-items: flex-start; }.page-header h1 { font-size: 38px; }
  .hero { grid-template-columns: 1fr; min-height: 600px; padding: 44px; }.hero-copy { align-self: start; }.hero-visual { min-height: 250px; }.hero-copy h1 { font-size: 48px; }.quick-grid { grid-template-columns: 1fr 1fr; }.quick-card.feature { grid-column: 1 / -1; }.quick-card:last-child { grid-column: 1 / -1; min-height: 120px; }
  .archive-strip { grid-template-columns: 1fr; }
  .collection-summary { grid-template-columns: repeat(5, 1fr); }
  .collection-summary div:nth-child(5) { border-right: 0; }
  .collection-summary div:nth-child(-n+5) { border-bottom: 1px solid var(--line); }
  .chapter-row { grid-template-columns: 90px 1fr 24px; gap: 20px; }.chapter-progress { display: none; }
  .reading-paths { grid-template-columns: 1fr; }.reading-path { min-height: 180px; }
  .reader-layout { grid-template-columns: 1fr; }.reader-toc { position: static; grid-template-columns: repeat(3, 1fr); margin-bottom: 5px; }.reader-toc > span, .reader-toc .reading-progress { display: none; }.reader-toc button { border-left: 0; border-bottom: 1px solid var(--line); text-align: center; }
  .character-timeline { grid-template-columns: 1fr; }.character-timeline-select { position: static; grid-template-columns: repeat(3, minmax(150px, 1fr)); overflow-x: auto; max-height: none; padding-bottom: 4px; }.character-timeline-select a { min-width: 150px; }
  .character-grid { grid-template-columns: 1fr; }.term-grid { grid-template-columns: repeat(2, 1fr); }
  .track-purpose { grid-template-columns: 58px minmax(0, 1fr); }.track-personal-stats { grid-column: 1 / -1; }.track-random { grid-column: 2; }
  .track-row-main { grid-template-columns: 42px minmax(180px, 1fr) 58px auto; }.track-chapter { display: none; }.track-role { display: none; }.track-detail-body { padding-left: 62px; }
  .decode-overview { grid-template-columns: auto 1fr; }.decode-stats { grid-column: 1 / -1; width: 100%; }.decode-stats span { flex: 1; }.decode-toolbar { align-items: stretch; flex-direction: column; }.decode-toolbar .inline-search { width: 100%; }.puzzle-guide-body { padding-left: 24px; }
  .evidence-overview { grid-template-columns: auto 1fr; }.evidence-summary { grid-column: 1 / -1; width: 100%; }.evidence-toolbar { grid-template-columns: 1fr; }.evidence-toolbar .filter-row { justify-content: flex-start; }.fragment-grid { grid-template-columns: 1fr; }.scene-stage { overflow-x: auto; }.scene-stage > span { min-width: 125px; }
  .trivia-overview { grid-template-columns: auto 1fr; }.trivia-stats { grid-column: 1 / -1; width: 100%; }.trivia-toolbar { grid-template-columns: 1fr; }.trivia-toolbar .filter-row { justify-content: flex-start; }.trivia-favorites-filter { width: max-content; }.trivia-grid { grid-template-columns: 1fr; }
  .source-list { overflow-x: auto; }.source-list .data-row { min-width: 680px; }
  .data-table { overflow-x: auto; }.data-table .data-row { min-width: 780px; }
  .profile-hero { grid-template-columns: 190px 1fr; }.profile-layout { grid-template-columns: 1fr; }.profile-events-panel { height: auto; max-height: none; }.profile-events-scroll { margin-right: 0; padding-right: 0; overflow: visible; }
}

@media (max-width: 600px) {
  :root { --topbar: 56px; }
  body { padding-bottom: 67px; }
  .topbar { padding: 0 14px; }.top-actions { gap: 5px; }.icon-button { width: 36px; height: 36px; }
  .page { width: calc(100% - 28px); padding: 30px 0 54px; }.page-header { display: block; margin-bottom: 26px; }.page-header h1 { margin-top: 9px; font-size: 32px; letter-spacing: -1.5px; }.page-header p { font-size: 12px; line-height: 1.7; }.page-actions { margin-top: 18px; }
  .bottom-nav { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; height: 67px; display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg-soft) 94%, transparent); backdrop-filter: blur(18px); }
  .bottom-nav .nav-item { min-height: 50px; display: flex; flex-direction: column; justify-content: center; gap: 3px; margin: 0; padding: 0; }.bottom-nav .nav-item span { display: block; font-size: 8px; }.bottom-nav .nav-item em, .bottom-nav .nav-item::before { display: none; }.bottom-nav .nav-item.is-active { background: transparent; }.bottom-nav .nav-item.is-active .icon { filter: drop-shadow(0 0 5px var(--accent)); }
  .hero { min-height: 580px; padding: 30px 24px; clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px)); }.hero-copy h1 { margin-top: 20px; font-size: 38px; letter-spacing: -2px; }.hero-copy > p { font-size: 12px; }.hero-actions .button { flex: 1; }.hero-visual { min-height: 235px; }.orbital-a { width: 220px; height: 220px; }.orbital-b { width: 160px; height: 160px; }.core-mark { width: 95px; height: 95px; }.hero-index { display: none; }.c1 { left: -5px; }.c2 { right: -3px; }
  .quick-grid { grid-template-columns: 1fr; }.quick-card, .quick-card:last-child { grid-column: auto; min-height: 120px; }.quick-card.feature { grid-column: auto; grid-template-columns: 105px 1fr; min-height: 180px; padding: 20px; gap: 15px; }.feature-visual { min-height: 130px; }
  .section-block { margin-top: 45px; }.section-title a { font-size: 9px; }
  .chapter-row { grid-template-columns: 62px 1fr; min-height: 165px; padding: 15px; gap: 15px; }.chapter-number { width: 62px; height: 95px; }.chapter-number b { font-size: 27px; }.chapter-main h2 { margin: 8px 0 5px; font-size: 18px; }.chapter-main p { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }.chapter-main .tag-row { display: none; }.row-arrow { display: none; }
  .reader-page { width: calc(100% - 28px); }.reader-tools .button { display: none; }.reader-hero { padding: 32px 24px; }.reader-hero h1 { font-size: 35px; }.reader-layout { padding-top: 28px; gap: 28px; }.reader-toc { display: flex; overflow-x: auto; }.reader-toc button { min-width: 105px; }.prose { font-size: var(--reader-size); line-height: 1.9; }.prose h2 { font-size: 25px; }.prose blockquote { margin-inline: 0; padding: 19px; }.section-evidence > div, .chapter-wrapup .story-section-body { grid-template-columns: 1fr; }.chapter-wrapup { padding: 20px; }.chapter-nav { grid-template-columns: 1fr; }
  .toolbar, .archive-toolbar { align-items: stretch; flex-direction: column; }.toolbar .segmented { width: 100%; }.toolbar .segmented button, .toolbar .segmented a { flex: 1; }.timeline-mode-note { line-height: 1.5; }.archive-toolbar .inline-search { width: 100%; }.filter-row.compact { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 3px; }.filter-row.compact .chip { flex: 0 0 auto; }
  .collection-summary { grid-template-columns: repeat(3, 1fr); }
  .collection-summary div:nth-child(5) { border-right: 1px solid var(--line); }
  .collection-summary div:nth-child(3n) { border-right: 0; }
  .collection-summary div:nth-child(-n+6) { border-bottom: 1px solid var(--line); }
  .timeline { padding-top: 0; }.timeline::before { left: 4px; }.timeline-phase { grid-template-columns: 18px 1fr; gap: 10px; margin: 32px 0 14px; }.timeline-phase span { grid-column: 2; text-align: left; }.timeline-phase i { grid-column: 2; }.timeline-event { grid-template-columns: 18px 1fr; gap: 10px; margin-bottom: 15px; }.time-label { grid-column: 2; padding-top: 0; text-align: left; }.timeline-node { grid-column: 1; grid-row: 1 / span 2; margin-top: 31px; }.event-card { grid-column: 2; padding: 19px; }.timeline-chapter-group > header { grid-template-columns: 44px 1fr; gap: 12px; padding: 14px; }.timeline-chapter-group > header > em { display: none; }.chapter-event-list a { grid-template-columns: 1fr 18px; gap: 9px; min-height: 0; padding: 17px 14px; }.chapter-event-list time, .chapter-event-list .certainty { grid-column: 1; }.chapter-event-list a > div { grid-column: 1; }.chapter-event-list a > svg { grid-column: 2; grid-row: 1 / span 3; }.character-arc > header { grid-template-columns: 90px 1fr; gap: 15px; padding: 17px; }.character-arc > header .portrait { min-height: 115px; }.character-arc-list a { grid-template-columns: 30px 1fr 18px; gap: 10px; padding: 16px 14px; }.character-arc-list time { grid-column: 2; }.character-arc-list a > div { grid-column: 2; }.character-arc-list a > svg { grid-column: 3; grid-row: 1 / span 3; }
  .character-card { min-height: 185px; grid-template-columns: 95px 1fr; gap: 15px; padding: 14px; }.portrait { min-height: 155px; }.character-info h2 { font-size: 20px; }.character-info p { font-size: 10px; }.character-info .tag-row { display: none; }
  .character-graph-filters { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .character-graph-filters .chip { flex: 0 0 auto; }
  .character-graph-panel > header { align-items: flex-start; flex-direction: column; }
  .character-graph-controls { width: 100%; }
  .character-graph-controls button, .character-graph-controls span { flex: 1; }
  .character-graph-viewport { height: 500px; }
  .character-graph-panel > footer { align-items: flex-start; flex-direction: column; gap: 8px; }
  .character-graph-panel > footer em { margin-left: 0; line-height: 1.5; }
  .character-graph-inspector { display: flex; padding: 18px; }
  .character-graph-inspector dl { margin: 12px 0; }
  .character-graph-summary { margin-bottom: 15px; }
  .profile-hero { grid-template-columns: 1fr; padding: 22px; }.profile-hero .portrait { width: 130px; height: 150px; }.profile-hero h1 { font-size: 37px; }.profile-id { top: 14px; right: 14px; }.profile-layout > .panel { padding: 22px; }.profile-panel-head { gap: 10px; }.profile-panel-head h2 { font-size: 22px; }.profile-panel-head em { font-size: 7px; }.profile-summary-panel > p { font-size: 13px; }.profile-summary-panel dl div { font-size: 11px; }.profile-events-panel .related-row { font-size: 11px; }
  .character-card-meta { display: none; }
  .character-identity-panel, .character-journey-panel, .character-unresolved-panel { padding: 21px 19px; }
  .character-journey-node { grid-template-columns: 25px minmax(0, 1fr); gap: 9px; }
  .journey-content { padding: 15px; }
  .term-grid { grid-template-columns: 1fr; }.term-card { min-height: 205px; }
  .term-filter-row { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }.term-filter-row .chip { flex: 0 0 auto; }
  .chapter-map { padding-left: 35px; }.map-spine { left: 4px; }.map-node { grid-template-columns: 43px 1fr 17px; gap: 12px; min-height: 120px; padding: 17px; }.map-node::before { left: -32px; width: 31px; }.map-node > strong { display: none; }.map-node > span { font-size: 27px; }.map-node h2 { font-size: 17px; }.map-node p { display: none; }.map-fork { margin-left: 20px; }.map-fork::before { left: -52px; width: 38px; }
  .top-back span { display: none; }
  .causal-chain { grid-template-columns: 1fr; gap: 18px; padding: 20px; }
  .track-purpose { grid-template-columns: 1fr; padding: 20px; }.track-purpose-mark { width: 48px; height: 48px; }.track-personal-stats { grid-column: 1; width: 100%; overflow-x: auto; }.track-personal-stats span { flex: 1 0 78px; }.track-random { grid-column: 1; width: 100%; justify-content: center; }
  .track-toolbar { padding: 15px; }.track-filter { grid-template-columns: 1fr; gap: 7px; }
  .track-row-main { grid-template-columns: 34px 1fr; gap: 9px; padding: 14px 12px; }.track-name h2 { font-size: 13px; }.track-chapter, .track-bpm, .track-role { display: none; }.track-actions { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; margin-top: 3px; }.track-detail > summary { justify-content: space-between; padding-inline: 12px; }.track-detail-body { grid-template-columns: 1fr; padding: 0 12px 14px 46px; }.track-unlock { grid-column: 1; }.track-unlock p { font-size: 9px; }
  .decode-overview { grid-template-columns: 1fr; padding: 20px; }.decode-overview-mark { width: 48px; height: 48px; }.decode-stats { grid-column: auto; grid-template-columns: 1fr 1fr 1fr; overflow-x: auto; }.decode-stats span { min-width: 82px; padding-left: 8px; }.decode-toolbar { padding: 15px; }.decode-toolbar .track-filter { align-items: stretch; flex-direction: column; }.puzzle-guide > summary { grid-template-columns: 1fr; gap: 8px; padding: 20px; }.puzzle-code { padding-right: 72px; }.puzzle-toggle { position: absolute; top: 20px; right: 18px; }.puzzle-guide-body { padding: 0 20px 20px; }.puzzle-context, .puzzle-conclusion { grid-template-columns: 1fr; }.puzzle-guide-body footer { align-items: stretch; flex-direction: column; }.puzzle-guide-body footer .button { justify-content: center; }.interactive-demo-controls { align-items: stretch; flex-direction: column; }.interactive-demo-controls > div:last-child { display: grid; grid-template-columns: 36px minmax(92px, 1fr) 36px auto; }.interactive-demo-controls button { padding-inline: 7px; }
  .evidence-overview { grid-template-columns: 1fr; padding: 20px; }.evidence-overview-mark { width: 48px; height: 48px; }.evidence-summary { grid-column: auto; grid-template-columns: repeat(4, 1fr); overflow-x: auto; }.evidence-summary span { min-width: 94px; padding-left: 8px; }.evidence-toolbar { padding: 15px; }.evidence-record { padding: 18px; }.evidence-record > header, .evidence-record > footer { align-items: flex-start; flex-direction: column; }.evidence-grade { white-space: normal; }.evidence-columns, .fragment-result, .scene-caption { grid-template-columns: 1fr; }.fragment-grid > div { grid-template-columns: 28px minmax(105px, .8fr) 1fr; padding-inline: 9px; }.evidence-relations { justify-content: flex-start; }.evidence-sequence-heading { align-items: flex-start; flex-direction: column; gap: 6px; }.evidence-sequence-tools { width: 100%; justify-content: flex-end; }.evidence-sequence-tools small { margin-right: auto; }.evidence-frame-strip { grid-auto-columns: minmax(210px, 84%); }.scene-caption strong { padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .trivia-overview { grid-template-columns: 1fr; padding: 20px; }.trivia-overview-mark { width: 48px; height: 48px; }.trivia-stats { grid-column: auto; grid-template-columns: repeat(3, 1fr); overflow-x: auto; }.trivia-stats span { min-width: 90px; padding-left: 8px; }.trivia-toolbar { padding: 15px; }.trivia-card { padding: 18px; }.trivia-card > footer { grid-template-columns: 1fr; }.trivia-card > footer > div { justify-content: flex-start; }.trivia-open { grid-column: 1; }.trivia-detail-grid, .trivia-related { grid-template-columns: 1fr; }
  .source-summary { grid-template-columns: 1fr; }.source-summary div { border-right: 0; border-bottom: 1px solid var(--line); }.principle { grid-template-columns: 50px 1fr; padding: 20px; }.principle > div { width: 44px; height: 44px; }
  .search-hero { height: 58px; padding-inline: 14px; }.search-hero kbd { display: none; }.search-type-filters { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding: 10px; }.search-type-filters .chip { flex: 0 0 auto; }.search-result { grid-template-columns: 43px 1fr 18px; gap: 10px; padding: 15px; }.search-result p { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .settings-list { padding: 0 18px; }.setting-row { min-height: 108px; align-items: flex-start; flex-direction: column; justify-content: center; gap: 12px; }.setting-row .segmented { width: 100%; }.setting-row .segmented button { flex: 1; }.setting-row .switch { position: absolute; right: 32px; }.volume-control { width: 100%; grid-template-columns: 1fr 42px; }.about-card { grid-template-columns: 50px 1fr; padding: 20px; }.about-card .button { grid-column: 1 / -1; }
  .modal-backdrop { align-items: end; padding: 0; }.modal { width: 100%; max-height: 88vh; padding: 30px 24px calc(28px + env(safe-area-inset-bottom)); border-bottom: 0; transform: translateY(100%); }.is-visible .modal { transform: none; }.archive-modal dl { grid-template-columns: 1fr; }.archive-modal dl div { display: flex; justify-content: space-between; padding: 9px 0; border-right: 0; border-bottom: 1px solid var(--line); }.archive-modal dl div:last-child { border: 0; }.archive-modal dd { margin: 0; }
  #toast-root { left: 14px; right: 14px; bottom: 82px; }.toast { text-align: center; }
}

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

/* V0.7 narrative / analysis separation and expanded public collection index */
.reader-toc { max-height: calc(100vh - 120px); overflow-y: auto; scrollbar-width: thin; }
.analysis-cta { margin: 20px 0 10px !important; padding: clamp(24px, 4vw, 38px); border: 1px solid var(--line-strong); background: radial-gradient(circle at 88% 20%, rgba(78, 190, 235, .12), transparent 30%), var(--surface); }
.analysis-cta > span { color: var(--accent); font: 8px monospace; letter-spacing: 1.7px; }
.analysis-cta h2 { margin: 10px 0 10px; font-size: 23px; letter-spacing: -.45px; }
.analysis-cta p { max-width: 590px; margin: 0 0 22px; color: var(--text-soft); font-size: 12px; line-height: 1.75; }
.analysis-cta .button { width: fit-content; font-size: 10px; line-height: 1; }

.analysis-page { width: min(1040px, calc(100% - clamp(40px, 6vw, 90px))); padding-top: 30px; }
.analysis-mode-badge { padding: 6px 9px; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent); font: 8px monospace; letter-spacing: 1px; }
.analysis-hero { position: relative; overflow: hidden; padding: clamp(34px, 6vw, 62px); border: 1px solid var(--line); background: linear-gradient(125deg, rgba(72, 183, 227, .11), transparent 58%), var(--surface); }
.analysis-hero::after { content: "ANALYSIS"; position: absolute; right: -18px; bottom: -28px; color: rgba(122, 215, 247, .045); font: 200 clamp(65px, 12vw, 128px)/1 monospace; }
.analysis-hero > span { color: var(--accent); font: 9px monospace; letter-spacing: 1.8px; }
.analysis-hero h1 { position: relative; z-index: 1; margin: 12px 0 13px; font-size: clamp(31px, 5vw, 51px); }
.analysis-hero p { position: relative; z-index: 1; max-width: 740px; margin: 0; color: var(--text-soft); font-size: 13px; line-height: 1.85; }
.analysis-grid { display: grid; gap: 10px; margin: 24px 0; }
.analysis-card { display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding: 24px; border: 1px solid var(--line); background: var(--surface); }
.analysis-card > span { color: var(--accent); font: 200 22px monospace; }
.analysis-card h2 { margin: 0 0 8px; font-size: 18px; }
.analysis-card p { margin: 0; color: var(--text-soft); font-size: 12px; line-height: 1.82; }
.analysis-nav { display: flex; justify-content: space-between; gap: 12px; padding-top: 22px; border-top: 1px solid var(--line); }
.analysis-nav .button { max-width: 48%; }

.archive-source-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.archive-source-summary div { padding-block: 19px; }
.archive-source-summary strong { font-size: 27px; }
.archive-entry > span:nth-child(3), .archive-entry > span:nth-child(5) { display: grid; gap: 4px; }
.archive-entry > span:nth-child(3) b, .archive-entry > span:nth-child(5) b { color: var(--text-soft); font-size: 9px; font-weight: 500; }
.archive-entry > span:nth-child(5) small { color: var(--muted); font: 8px monospace; }
.archive-category { color: var(--accent); font: 7px monospace; letter-spacing: .75px; }
.access.reference { color: var(--term); border-color: color-mix(in srgb, var(--term) 32%, transparent); }
.archive-source-note { flex-wrap: wrap; }
.archive-source-note a { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; color: var(--term); font-size: 9px; }

@media (max-width: 840px) {
  .archive-source-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .archive-source-summary div { border-bottom: 1px solid var(--line) !important; }
  .archive-source-summary div:nth-child(2n) { border-right: 0; }
  .archive-source-summary div:nth-last-child(-n+2) { border-bottom: 0 !important; }
  .analysis-nav { align-items: stretch; }
}

@media (max-width: 600px) {
  .analysis-page { width: calc(100% - 28px); }
  .analysis-card { grid-template-columns: 35px 1fr; gap: 12px; padding: 19px 17px; }
  .analysis-card > span { font-size: 16px; }
  .analysis-nav { flex-direction: column-reverse; }
  .analysis-nav .button { width: 100%; max-width: none; }
  .archive-source-summary strong { font-size: 22px; }
  .archive-source-summary span, .archive-source-summary small { text-align: center; font-size: 7px; }
}

/* V0.19.7 branch archive, collection audit and personal archive favorites */
.reading-path.branch-path { grid-column: 1 / -1; min-height: 170px; background: linear-gradient(115deg, rgba(137, 116, 240, .1), transparent 58%), var(--surface); }

.collection-audit { display: grid; grid-template-columns: repeat(3, minmax(130px, 1fr)) minmax(280px, 2fr); align-items: stretch; margin-bottom: 14px; overflow: hidden; }
.collection-audit > div { display: grid; align-content: center; gap: 4px; min-height: 122px; padding: 22px; border-right: 1px solid var(--line); }
.collection-audit span { color: var(--muted); font: 8px monospace; letter-spacing: 1px; }.collection-audit strong { color: var(--accent); font: 200 32px monospace; }.collection-audit small { color: var(--text-soft); font-size: 9px; }
.collection-audit .is-warning strong { color: var(--warning); }.collection-audit .is-complete strong { color: var(--success); }.collection-audit > p { align-self: center; margin: 0; padding: 24px; color: var(--text-soft); font-size: 10px; line-height: 1.75; }
.branch-story-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.branch-story-card { min-height: 260px; display: flex; flex-direction: column; padding: 24px; transition: transform .18s var(--ease), border-color .18s var(--ease); }
.branch-story-card:hover { transform: translateY(-3px); border-color: var(--line-strong); }.branch-story-card:last-child { grid-column: 1 / -1; }
.branch-story-card header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.branch-story-card header > span { color: var(--accent); font: 8px monospace; letter-spacing: 1.5px; }.branch-story-card header em { padding: 4px 7px; border: 1px solid var(--line); color: var(--muted); font: normal 8px monospace; }.branch-story-card header em.is-incomplete { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 30%, transparent); }.branch-story-card header em.is-complete { color: var(--success); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.branch-story-card h2 { margin: 24px 0 10px; font-size: 27px; }.branch-story-card > p { flex: 1; margin: 0; color: var(--text-soft); font-size: 11px; line-height: 1.75; }
.branch-story-progress { margin-top: 22px; }.branch-story-progress > div { display: flex; align-items: baseline; gap: 6px; }.branch-story-progress > div b { color: var(--accent); font: 200 20px monospace; }.branch-story-progress > div span { color: var(--muted); font: 8px monospace; }.branch-story-progress > i { height: 3px; display: block; margin-top: 8px; overflow: hidden; background: rgba(255,255,255,.055); }.branch-story-progress > i b { height: 100%; display: block; background: linear-gradient(90deg, var(--accent), #806fe2); }
.branch-story-card footer { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; }
.branch-story-detail { width: min(1050px, calc(100% - clamp(40px, 6vw, 90px))); padding-top: 30px; }.branch-story-hero { padding: clamp(34px, 6vw, 62px); border: 1px solid var(--line); background: radial-gradient(circle at 86% 18%, rgba(120, 100, 230, .13), transparent 32%), var(--surface); }.branch-story-hero > span { color: var(--accent); font: 8px monospace; letter-spacing: 1.8px; }.branch-story-hero h1 { margin: 12px 0; font-size: clamp(36px, 6vw, 57px); }.branch-story-hero > p { max-width: 720px; margin: 0; color: var(--text-soft); font-size: 12px; line-height: 1.8; }.branch-story-hero > div { display: flex; align-items: baseline; gap: 8px; margin-top: 25px; }.branch-story-hero > div b { color: var(--accent); font: 200 26px monospace; }.branch-story-hero > div span, .branch-story-hero > div em { color: var(--muted); font: normal 8px monospace; }.branch-story-hero > div em { margin-left: auto; color: var(--warning); }
.branch-source-notice { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; margin: 12px 0; padding: 17px 20px; color: var(--accent); }.branch-source-notice p { display: grid; gap: 4px; margin: 0; }.branch-source-notice b { color: var(--text); font-size: 10px; }.branch-source-notice span { color: var(--text-soft); font-size: 10px; line-height: 1.65; }
.branch-record-list { display: grid; gap: 8px; }.branch-record { width: 100%; display: grid; grid-template-columns: 42px minmax(0, 1fr) 18px; align-items: center; gap: 18px; padding: 20px; text-align: left; color: var(--text); cursor: pointer; }.branch-record:hover { border-color: var(--line-strong); background: var(--surface-raised); }.branch-record > span { color: var(--accent); font: 13px monospace; }.branch-record small { color: var(--muted); font: 8px monospace; }.branch-record h2 { margin: 5px 0 7px; font-size: 16px; }.branch-record p { margin: 0; color: var(--text-soft); font-size: 10px; line-height: 1.65; }
.branch-story-card.has-narrative { background: linear-gradient(140deg, rgba(81, 195, 232, .055), transparent 48%), var(--surface); }
.branch-narrative-page { width: min(1400px, calc(100% - clamp(40px, 6vw, 90px))); }
.branch-narrative-hero { background: radial-gradient(circle at 86% 18%, rgba(120, 100, 230, .16), transparent 30%), linear-gradient(125deg, rgba(73, 194, 231, .055), transparent 55%), var(--surface); }
.branch-narrative-hero blockquote { max-width: 850px; margin: 28px 0 0; padding: 20px 22px; border: 0; border-left: 2px solid var(--accent); color: var(--text); background: rgba(255,255,255,.022); font-size: 13px; line-height: 1.85; }
.branch-reader-layout { padding-top: 40px; }
.branch-source-library { margin-top: 52px; overflow: hidden; }
.branch-source-library > summary { display: grid; grid-template-columns: 1fr auto 18px; align-items: center; gap: 12px; padding: 20px 22px; color: var(--text); cursor: pointer; list-style: none; }
.branch-source-library > summary::-webkit-details-marker { display: none; }
.branch-source-library > summary span { font-size: 15px; font-weight: 650; }.branch-source-library > summary b { color: var(--accent); font: 9px monospace; }.branch-source-library > summary svg { color: var(--muted); transition: transform .2s var(--ease); }
.branch-source-library[open] > summary { border-bottom: 1px solid var(--line); }.branch-source-library[open] > summary svg { transform: rotate(90deg); }
.branch-source-library > .branch-record-list { padding: 9px; }

.archive-audit { position: relative; display: grid; grid-template-columns: repeat(3, minmax(130px, .45fr)) minmax(260px, 1.7fr); align-items: center; gap: 0; margin-bottom: 12px; overflow: hidden; }
.archive-audit > div { display: grid; gap: 4px; padding: 20px; border-right: 1px solid var(--line); }.archive-audit span { color: var(--muted); font: 8px monospace; }.archive-audit > div b { color: var(--accent); font: 200 25px monospace; }.archive-audit .is-warning b { color: var(--warning); }.archive-audit .is-complete b { color: var(--success); }.archive-audit > p { margin: 0; padding: 20px; color: var(--text-soft); font-size: 9px; line-height: 1.65; }.archive-audit > i { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.04); }.archive-audit > i b { height: 100%; display: block; background: linear-gradient(90deg, var(--accent), #8974e8); }
.collection-gap-report { margin-bottom: 12px; overflow: hidden; background: linear-gradient(135deg, rgba(76, 197, 238, .045), transparent 46%), var(--surface); }
.collection-gap-report > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 23px 24px 19px; border-bottom: 1px solid var(--line); }
.collection-gap-report > header span { color: var(--accent); font: 8px monospace; letter-spacing: 1.4px; }.collection-gap-report > header h2 { margin: 6px 0 0; font-size: 22px; }.collection-gap-report > header em { color: var(--muted); font: normal 8px monospace; }
.collection-gap-summary { display: grid; grid-template-columns: 150px 150px minmax(260px, 1fr); border-bottom: 1px solid var(--line); }
.collection-gap-summary > article { display: grid; align-content: center; gap: 5px; min-height: 112px; padding: 18px 22px; border-right: 1px solid var(--line); }.collection-gap-summary small { color: var(--muted); font: 8px monospace; }.collection-gap-summary strong { color: var(--warning); font: 200 28px monospace; }.collection-gap-summary article span { color: var(--text-soft); font-size: 8px; }.collection-gap-summary > p { align-self: center; margin: 0; padding: 20px 24px; color: var(--text-soft); font-size: 9px; line-height: 1.7; }.collection-gap-summary > p b { display: block; margin-top: 5px; color: var(--text); font-weight: 500; }
.collection-gap-summary.is-complete strong { color: var(--success); }
.collection-gap-complete { display: flex; align-items: center; gap: 13px; padding: 20px 24px; border-bottom: 1px solid var(--line); color: var(--success); background: rgba(80, 213, 166, .055); }.collection-gap-complete div { display: grid; gap: 4px; }.collection-gap-complete b { color: var(--text); font-size: 11px; }.collection-gap-complete span { color: var(--text-soft); font-size: 9px; line-height: 1.65; }
.collection-gap-columns { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(270px, .7fr); }.collection-gap-columns > section, .collection-gap-columns > aside { padding: 22px 24px; }.collection-gap-columns > aside { border-left: 1px solid var(--line); }.collection-gap-columns h3 { margin: 0 0 13px; color: var(--text); font-size: 11px; }
.collection-key-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }.collection-key-grid article, .legacy-gap-card { padding: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.014); }.collection-key-grid article header { display: flex; justify-content: space-between; gap: 8px; }.collection-key-grid article header span { color: var(--muted); font: 7px monospace; }.collection-key-grid article header b { color: var(--warning); font: 8px monospace; }.collection-key-grid h4, .legacy-gap-card h4 { margin: 9px 0 8px; font-size: 11px; line-height: 1.45; }.collection-key-grid code { color: var(--accent); font: 8px monospace; word-break: break-word; }
.legacy-gap-card + .legacy-gap-card { margin-top: 7px; }.legacy-gap-card > span { color: var(--accent); font: 7px monospace; }.legacy-gap-card dl { display: grid; gap: 5px; margin: 0; }.legacy-gap-card dl div { display: flex; justify-content: space-between; gap: 10px; }.legacy-gap-card dt, .legacy-gap-card dd { margin: 0; font-size: 8px; }.legacy-gap-card dt { color: var(--muted); }.legacy-gap-card dd { color: var(--text-soft); text-align: right; }.legacy-gap-card p { margin: 10px 0 0; padding-top: 9px; border-top: 1px solid var(--line); color: var(--warning); font-size: 8px; line-height: 1.55; }
.collection-gap-report > footer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }.collection-gap-report > footer a { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: center; padding: 14px 24px; color: var(--text); }.collection-gap-report > footer a + a { border-left: 1px solid var(--line); }.collection-gap-report > footer a span { font-size: 9px; }.collection-gap-report > footer a small { grid-column: 1; color: var(--muted); font-size: 8px; }.collection-gap-report > footer a svg { grid-column: 2; grid-row: 1 / span 2; color: var(--accent); }
.archive-filter-panel { display: grid; gap: 15px; margin-bottom: 12px; padding: 18px; }.archive-filter-panel .inline-search { width: 100%; }.archive-select-grid { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)) minmax(150px, .7fr); gap: 9px; }.archive-select-grid label { display: grid; gap: 6px; }.archive-select-grid label > span { color: var(--muted); font: 8px monospace; letter-spacing: .7px; }.archive-select-grid select { min-width: 0; height: 37px; padding: 0 34px 0 11px; border: 1px solid var(--line); border-radius: 3px; color: var(--text); background: var(--surface-raised); font-size: 10px; cursor: pointer; }
.archive-favorites-filter, .archive-favorite { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line); color: var(--text-soft); background: transparent; cursor: pointer; }.archive-favorites-filter { align-self: end; min-height: 37px; padding: 0 12px; }.archive-favorites-filter b { min-width: 19px; padding: 2px 5px; border-radius: 99px; color: var(--muted); background: rgba(255,255,255,.05); font: 8px monospace; }.archive-favorites-filter.is-active, .archive-favorite.is-active { color: var(--accent); border-color: var(--line-strong); background: rgba(86, 198, 236, .07); }
.archive-table .data-row { grid-template-columns: 100px minmax(220px, 1.25fr) minmax(150px, .72fr) minmax(150px, .7fr) minmax(155px, .72fr) 52px; }.archive-entry { position: relative; }.archive-entry.is-favorite { background: linear-gradient(90deg, rgba(82, 198, 236, .055), transparent 46%); }.archive-row-open-hit { position: absolute; z-index: 1; inset: 0 64px 0 0; border: 0; background: transparent; cursor: pointer; }.archive-entry > span { position: relative; z-index: 2; pointer-events: none; }.archive-detail, .archive-level-meta, .archive-origin-meta { display: grid; gap: 4px; }.archive-detail b, .archive-level-meta b, .archive-origin-meta b { overflow: hidden; color: var(--text-soft); font-size: 9px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }.archive-level-meta small, .archive-origin-meta small { overflow: hidden; color: var(--muted); font: 7px monospace; text-overflow: ellipsis; white-space: nowrap; }.archive-favorite { position: relative; z-index: 3; min-height: 32px; padding: 0 10px; }.archive-favorite.is-compact { width: 34px; min-height: 34px; padding: 0; }.archive-favorite.is-compact span { display: none; }.archive-modal footer .archive-favorite { margin-right: auto; }
.archive-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 12px; }.archive-pagination .table-count { margin: 0; }.archive-pagination .button[hidden] { display: none; }.archive-empty { display: grid; justify-items: center; gap: 7px; padding: 44px 20px; color: var(--muted); text-align: center; }.archive-empty b { color: var(--text); font-size: 13px; }.archive-empty p { margin: 0; }

@media (max-width: 980px) {
  .collection-audit { grid-template-columns: repeat(3, 1fr); }.collection-audit > div:nth-child(3) { border-right: 0; }.collection-audit > p { grid-column: 1 / -1; border-top: 1px solid var(--line); }
  .archive-audit { grid-template-columns: repeat(3, 1fr); }.archive-audit > div:nth-child(3) { border-right: 0; }.archive-audit > p { grid-column: 1 / -1; border-top: 1px solid var(--line); }
  .collection-gap-columns { grid-template-columns: 1fr; }.collection-gap-columns > aside { border-top: 1px solid var(--line); border-left: 0; }.collection-gap-summary { grid-template-columns: 1fr 1fr; }.collection-gap-summary > article:nth-child(2) { border-right: 0; }.collection-gap-summary > p { grid-column: 1 / -1; border-top: 1px solid var(--line); }
  .archive-select-grid { grid-template-columns: 1fr 1fr; }
  .archive-table { overflow-x: auto; }.archive-table .data-row { min-width: 930px; }
}

@media (max-width: 600px) {
  .reading-path.branch-path { grid-column: auto; }
  .collection-audit { grid-template-columns: 1fr 1fr 1fr; }.collection-audit > div { min-height: 96px; padding: 14px 10px; text-align: center; }.collection-audit strong { font-size: 24px; }.collection-audit > p { padding: 18px; }
  .branch-story-grid { grid-template-columns: 1fr; }.branch-story-card, .branch-story-card:last-child { grid-column: auto; min-height: 230px; padding: 20px; }.branch-story-card h2 { font-size: 23px; }.branch-story-detail { width: calc(100% - 28px); }.branch-story-hero { padding: 28px 22px; }.branch-story-hero > div { flex-wrap: wrap; }.branch-story-hero > div em { width: 100%; margin-left: 0; }.branch-narrative-hero blockquote { margin-top: 22px; padding: 16px; font-size: 12px; }.branch-record { grid-template-columns: 30px 1fr 16px; gap: 10px; padding: 16px 13px; }.branch-record p { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }.branch-source-library { margin-top: 34px; }.branch-source-library > summary { padding: 17px; }
  .archive-audit { grid-template-columns: repeat(3, 1fr); }.archive-audit > div { padding: 14px 8px; text-align: center; }.archive-audit > div b { font-size: 21px; }.archive-audit > p { padding: 16px; }
  .collection-gap-report > header { align-items: flex-start; padding: 19px 17px; }.collection-gap-report > header em { padding-top: 4px; white-space: nowrap; }.collection-gap-summary > article { min-height: 94px; padding: 14px 16px; }.collection-gap-summary > p, .collection-gap-columns > section, .collection-gap-columns > aside { padding: 17px; }.collection-key-grid { grid-template-columns: 1fr; }.collection-gap-report > footer { grid-template-columns: 1fr; }.collection-gap-report > footer a { padding: 13px 17px; }.collection-gap-report > footer a + a { border-top: 1px solid var(--line); border-left: 0; }
  .archive-filter-panel { padding: 14px; }.archive-select-grid { grid-template-columns: 1fr; }.archive-favorites-filter { width: 100%; }
  .archive-pagination { align-items: stretch; flex-direction: column; }.archive-pagination .table-count { text-align: left; }.archive-pagination .button { justify-content: center; }
}

/* V0.12 local accounts, feedback pipeline and visual administration */
select { font: inherit; }
select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.account-chip { min-width: 86px; height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 11px; border: 1px solid var(--line); color: var(--text-soft); background: rgba(255,255,255,.018); font-size: 9px; }
.account-chip:hover, .account-chip.is-signed-in { color: var(--accent-bright); border-color: var(--line-strong); }
.loading-panel { min-height: 110px; display: grid; place-items: center; padding: 26px; color: var(--muted); font: 9px monospace; letter-spacing: .8px; }
.auth-shell { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 980px; }
.auth-shell.single { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.auth-intro, .auth-card { padding: clamp(24px, 4vw, 38px); }
.auth-intro { background: linear-gradient(145deg, rgba(72, 188, 229, .11), transparent 55%), var(--surface); }
.auth-intro h2, .auth-card h2 { margin: 8px 0 12px; font-size: 23px; }
.auth-intro p, .auth-intro li { color: var(--text-soft); font-size: 11px; line-height: 1.75; }
.auth-intro ul { margin: 20px 0 0; padding-left: 18px; }
.auth-card { display: flex; flex-direction: column; }
.auth-card[data-auth-form="register"] { position: relative; isolation: isolate; overflow: hidden; }
.auth-card label, .feedback-form label { display: grid; gap: 7px; margin-top: 15px; }
.auth-card label > span, .feedback-form label > span { color: var(--muted); font: 8px monospace; letter-spacing: .8px; }
.auth-card input, .feedback-form input, .feedback-form textarea, .feedback-form select { width: 100%; border: 1px solid var(--line); border-radius: 0; color: var(--text); background: color-mix(in srgb, var(--surface-raised) 82%, transparent); outline: 0; }
.auth-card input, .feedback-form input, .feedback-form select { height: 44px; padding: 0 13px; }
.feedback-form textarea { resize: vertical; padding: 12px 13px; line-height: 1.65; }
.auth-card input:focus, .feedback-form input:focus, .feedback-form textarea:focus, .feedback-form select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(74, 196, 239, .08); }
.auth-card .button, .feedback-form > .button { margin-top: 8px; align-self: flex-start; }
.turnstile-field { display: grid; gap: 8px; margin-top: 16px; }
.turnstile-field > span { color: var(--muted); font: 8px monospace; letter-spacing: .8px; }
.turnstile-field small { color: var(--text-soft); font-size: 9px; line-height: 1.5; }
.turnstile-widget { min-height: 65px; width: 100%; overflow: hidden; }
.turnstile-widget iframe { max-width: 100%; }
.form-error { min-height: 18px; margin: 10px 0 0; color: var(--danger); font-size: 10px; }
.button:disabled { opacity: .48; cursor: wait; }
.auth-submit-busy { overflow: hidden; }
.auth-submit-overlay {
  position: fixed;
  inset: 0;
  z-index: 2400;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(3, 10, 19, .74);
  -webkit-backdrop-filter: blur(12px) saturate(.75);
  backdrop-filter: blur(12px) saturate(.75);
  opacity: 0;
  cursor: wait;
  transition: opacity .18s ease;
  outline: 0;
}
.auth-submit-overlay.is-visible { opacity: 1; }
.auth-submit-dialog {
  width: min(390px, calc(100vw - 40px));
  min-height: 228px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 13px;
  padding: 34px 28px;
  border-color: color-mix(in srgb, var(--accent) 46%, var(--line));
  background:
    linear-gradient(145deg, rgba(74, 196, 239, .13), transparent 52%),
    color-mix(in srgb, var(--surface) 94%, #020914);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .52), 0 0 42px rgba(74, 196, 239, .08);
  text-align: center;
}
.auth-submit-spinner {
  width: 46px;
  height: 46px;
  margin-bottom: 3px;
  border: 2px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-top-color: var(--accent-bright);
  border-right-color: var(--term);
  border-radius: 50%;
  box-shadow: 0 0 24px rgba(74, 196, 239, .14);
  animation: auth-submit-spin .82s linear infinite;
}
.auth-submit-dialog strong { color: var(--text); font-size: 21px; letter-spacing: .5px; }
.auth-submit-dialog small { color: var(--text-soft); font-size: 10px; line-height: 1.65; }
.auth-submit-security { margin-top: 7px; color: var(--muted); font: 7px monospace; letter-spacing: 1px; text-transform: uppercase; }
.auth-button-spinner {
  width: 14px;
  height: 14px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: auth-submit-spin .72s linear infinite;
}
@keyframes auth-submit-spin { to { transform: rotate(360deg); } }
.reduce-motion .auth-submit-spinner, .reduce-motion .auth-button-spinner { animation-duration: 1.6s !important; }
.registration-guard-modal { width: min(540px, 100%); background: radial-gradient(circle at 15% 5%, rgba(255, 188, 80, .13), transparent 38%), var(--surface-solid); }
.registration-guard-symbol { width: 58px; height: 58px; display: grid; place-items: center; margin-top: 32px; border: 1px solid color-mix(in srgb, var(--warning) 52%, var(--line)); color: var(--warning); background: color-mix(in srgb, var(--warning) 9%, transparent); }
.registration-guard-modal h2 { margin: 17px 0 9px; font-size: clamp(23px, 4vw, 31px); }
.registration-guard-modal > p { margin: 0; color: var(--text-soft); font-size: 12px; line-height: 1.85; }
.registration-guard-modal > p b { color: var(--warning); }
.registration-guard-modal > small { display: block; margin-top: 15px; color: var(--muted); font-size: 9px; line-height: 1.65; }
.registration-lock-screen {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: 28px;
  color: var(--text);
  background: linear-gradient(145deg, rgba(255, 188, 80, .1), transparent 52%), color-mix(in srgb, var(--surface-solid) 96%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  text-align: center;
}
.registration-lock-screen[hidden] { display: none; }
.registration-lock-icon { width: 62px; height: 62px; display: grid; place-items: center; margin-bottom: 3px; border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--line)); color: var(--warning); }
.registration-lock-screen strong { font-size: 20px; }
.registration-lock-screen p { margin: 0; color: var(--text-soft); font-size: 11px; line-height: 1.7; }
.registration-lock-screen p b { color: var(--warning); font: 700 19px monospace; letter-spacing: 1px; }
.registration-lock-screen small { color: var(--muted); font: 8px monospace; letter-spacing: .7px; }
.recovery-page { max-width: 1120px; margin-inline: auto; }
.recovery-required { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 25px; align-items: start; padding: clamp(28px, 5vw, 48px); border-color: color-mix(in srgb, var(--warning) 36%, var(--line)); background: radial-gradient(circle at 8% 8%, rgba(247, 188, 89, .12), transparent 34%), var(--surface); }
.recovery-required-icon { width: 74px; height: 74px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--warning) 48%, var(--line)); color: var(--warning); background: color-mix(in srgb, var(--warning) 8%, transparent); }
.recovery-required-copy { max-width: 650px; }
.recovery-required-copy > span { color: var(--warning); font: 8px monospace; letter-spacing: 1.1px; }
.recovery-required-copy h2 { margin: 8px 0 10px; font-size: clamp(24px, 4vw, 34px); }
.recovery-required-copy > p { margin: 0; color: var(--text-soft); font-size: 11px; line-height: 1.8; }
.recovery-required form { display: grid; gap: 14px; margin-top: 28px; }
.recovery-required form label { display: grid; gap: 7px; }
.recovery-required form label > span { color: var(--muted); font: 8px monospace; letter-spacing: .8px; }
.recovery-required form input { width: 100%; height: 46px; padding: 0 13px; border: 1px solid var(--line); border-radius: 0; color: var(--text); background: color-mix(in srgb, var(--surface-raised) 82%, transparent); outline: 0; }
.recovery-required form input:focus { border-color: var(--warning); box-shadow: 0 0 0 2px rgba(247, 188, 89, .09); }
.recovery-required-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.button.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.support-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: 14px; align-items: stretch; }
.support-story, .support-payment { padding: clamp(25px, 4vw, 42px); }
.support-story { position: relative; overflow: hidden; background: linear-gradient(145deg, rgba(74, 196, 239, .1), transparent 50%), var(--surface); }
.support-story::after { content: "SUPPORT"; position: absolute; right: -17px; bottom: -28px; color: rgba(100, 220, 255, .035); font: 800 clamp(64px, 9vw, 126px)/1 sans-serif; letter-spacing: -5px; pointer-events: none; }
.support-story h2, .support-payment h2, .support-closed h2 { margin: 10px 0 12px; font-size: clamp(22px, 3vw, 31px); }
.support-story > p { max-width: 720px; margin: 0; color: var(--text-soft); font-size: 12px; line-height: 1.9; }
.support-purpose { display: grid; gap: 8px; margin: 28px 0; padding: 18px 20px; border-left: 2px solid var(--accent); background: rgba(74, 196, 239, .055); }
.support-purpose span { color: var(--muted); font: 8px monospace; letter-spacing: 1px; }
.support-purpose strong { color: var(--text); font-size: 13px; line-height: 1.65; }
.support-promises { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.support-promises > div { padding: 17px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface-raised) 58%, transparent); }
.support-promises b { color: var(--accent-bright); font-size: 11px; }
.support-promises p { margin: 7px 0 0; color: var(--muted); font-size: 9px; line-height: 1.65; }
.support-payment { display: flex; flex-direction: column; align-items: center; text-align: center; background: linear-gradient(155deg, rgba(149, 133, 255, .1), transparent 48%), var(--surface); }
.support-payment .panel-kicker { align-self: flex-start; }
.support-qr { width: min(310px, 100%); margin: 15px auto 18px; padding: 12px; border: 1px solid var(--line-strong); background: #fff; box-shadow: 0 18px 48px rgba(0, 0, 0, .24); }
.support-qr img { display: block; width: 100%; height: auto; }
.support-payment h2 { margin: 0 0 7px; font-size: 18px; }
.support-payment > p { margin: 0 0 19px; color: var(--muted); font-size: 10px; line-height: 1.65; }
.support-payment .button { margin-top: auto; }
.support-disclosure { display: grid; grid-template-columns: 34px 1fr; gap: 13px; align-items: start; margin-top: 14px; padding: 18px 21px; border-color: color-mix(in srgb, var(--warning) 28%, var(--line)); }
.support-disclosure > span { color: var(--warning); }
.support-disclosure b { font-size: 11px; }
.support-disclosure p { margin: 5px 0 0; color: var(--text-soft); font-size: 9px; line-height: 1.7; }
.support-closed { display: grid; justify-items: center; max-width: 720px; min-height: 320px; align-content: center; margin: 0 auto; padding: 42px; text-align: center; }
.support-closed > div { width: 64px; height: 64px; display: grid; place-items: center; margin-bottom: 18px; border: 1px solid var(--line-strong); color: var(--accent); transform: rotate(-2deg); }
.support-closed p { max-width: 520px; margin: 0 0 20px; color: var(--text-soft); font-size: 11px; line-height: 1.8; }
.auth-notice { max-width: 760px; display: grid; grid-template-columns: 58px 1fr; gap: 22px; align-items: start; padding: 30px; }
.auth-notice > div:first-child { width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid var(--line-strong); color: var(--accent); }
.auth-notice h2 { margin: 0 0 7px; }
.auth-notice p { margin: 0 0 18px; color: var(--text-soft); font-size: 11px; line-height: 1.7; }
.profile-card { display: grid; grid-template-columns: 74px 1fr auto; gap: 22px; align-items: center; padding: 28px; }
.profile-emblem { width: 66px; height: 66px; display: grid; place-items: center; border: 1px solid var(--line-strong); color: var(--accent); background: linear-gradient(145deg, rgba(74,196,239,.13), transparent); transform: rotate(-2deg); }
.profile-emblem.small { width: 38px; height: 38px; }
.profile-copy > span { color: var(--accent); font: 8px monospace; letter-spacing: 1px; }
.profile-copy h2 { margin: 5px 0; font-size: 25px; }
.profile-copy p { margin: 0; color: var(--muted); font-size: 10px; }
.profile-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.desktop-backend-note { grid-column: 2 / -1; margin: -8px 0 0; padding: 10px 12px; border-left: 2px solid var(--accent); color: var(--text-soft); background: rgba(74,196,239,.055); font-size: 10px; }
.account-explain { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.account-explain article { padding: 23px; }
.account-explain span { color: var(--accent); font: 8px monospace; }
.account-explain h3 { margin: 10px 0 7px; font-size: 15px; }
.account-explain p { margin: 0; color: var(--text-soft); font-size: 10px; line-height: 1.7; }
.account-security-grid { display: grid; grid-template-columns: minmax(320px, 1.15fr) minmax(260px, .85fr); gap: 12px; margin-top: 12px; }
.account-security-card { padding: 24px; }
.account-security-card h2 { margin: 7px 0 8px; font-size: 19px; }
.account-security-card > p { margin: 0 0 16px; color: var(--text-soft); font-size: 10px; line-height: 1.7; }
.account-security-card label { display: grid; gap: 6px; margin-top: 11px; }
.account-security-card label span { color: var(--muted); font: 8px monospace; letter-spacing: .7px; }
.account-security-card input { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--line); color: var(--text); background: color-mix(in srgb, var(--surface-raised) 82%, transparent); outline: 0; }
.account-security-card input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(74,196,239,.08); }
.account-security-card .button { margin-top: 12px; }
.account-security-card small { display: block; margin-top: 16px; color: var(--muted); font: 8px monospace; }
.session-device-list { display: grid; gap: 8px; margin: 14px 0 6px; }
.session-device { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface-raised) 75%, transparent); }
.session-device.is-current { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 7%, var(--surface-raised)); }
.session-device-icon { display: grid; place-items: center; width: 32px; height: 32px; color: var(--accent); border: 1px solid var(--line); border-radius: 50%; }
.session-device-copy { min-width: 0; }
.session-device-copy b { display: flex; align-items: center; gap: 7px; font-size: 10px; }
.session-device-copy b span { padding: 2px 6px; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); font: 7px monospace; letter-spacing: .5px; }
.session-device-copy small { overflow: hidden; margin: 4px 0 0; text-overflow: ellipsis; white-space: nowrap; }
.session-device .button { margin: 0; min-width: 68px; }
.session-loading { padding: 14px; color: var(--muted); border: 1px dashed var(--line); font-size: 9px; text-align: center; }
.session-loading.is-error { color: var(--danger); }
.feedback-layout { display: grid; grid-template-columns: minmax(320px, .8fr) minmax(420px, 1.2fr); gap: 14px; align-items: start; }
.feedback-form { position: sticky; top: calc(var(--topbar) + 14px); padding: 28px; }
.feedback-form h2 { margin: 8px 0 5px; font-size: 21px; }
.feedback-history .section-title { margin-bottom: 12px; }
.feedback-list { display: grid; gap: 9px; }
.feedback-item { padding: 21px; }
.feedback-item header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.feedback-item header span:first-child { color: var(--muted); font: 8px monospace; letter-spacing: .5px; }
.feedback-item h3 { margin: 6px 0 0; font-size: 16px; }
.feedback-status { flex: 0 0 auto; padding: 5px 8px; border: 1px solid var(--line); font: 8px monospace; }
.feedback-status.pending { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 35%, transparent); }
.feedback-status.active { color: var(--accent); border-color: var(--line-strong); }
.feedback-status.done { color: var(--success); border-color: color-mix(in srgb, var(--success) 35%, transparent); }
.feedback-status.declined { color: var(--muted); }
.feedback-content { margin: 17px 0; color: var(--text-soft); font-size: 11px; line-height: 1.8; }
.feedback-meta { display: flex; flex-wrap: wrap; gap: 7px 14px; color: var(--muted); font: 8px monospace; }
.feedback-item aside { margin-top: 15px; padding: 13px 15px; border-left: 2px solid var(--term); background: rgba(92,137,255,.055); }
.feedback-item aside b { color: var(--term); font: 8px monospace; }
.feedback-item aside p { margin: 6px 0 0; color: var(--text-soft); font-size: 10px; line-height: 1.7; }
.empty-feedback { padding: 34px; text-align: center; }
.empty-feedback p { color: var(--muted); font-size: 10px; }

@media (max-width: 980px) {
  .support-layout { grid-template-columns: 1fr; }
  .support-payment .button { margin-top: 0; }
  .feedback-layout { grid-template-columns: 1fr; }
  .feedback-form { position: static; }
  .account-explain { grid-template-columns: 1fr; }
  .account-security-grid { grid-template-columns: 1fr; }
  .session-device { grid-template-columns: 32px minmax(0, 1fr); }
  .session-device .button { grid-column: 1 / -1; width: 100%; }
}

@media (max-width: 720px) {
  .auth-shell, .auth-shell.single { grid-template-columns: 1fr; }
  .recovery-required { grid-template-columns: 1fr; padding: 22px; }
  .recovery-required-icon { width: 58px; height: 58px; }
  .recovery-required-actions { flex-direction: column; }
  .recovery-required-actions .button { width: 100%; justify-content: center; }
  .profile-card { grid-template-columns: 60px 1fr; padding: 21px; }
  .profile-emblem { width: 54px; height: 54px; }
  .profile-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

@media (max-width: 600px) {
  .support-story, .support-payment { padding: 21px; }
  .support-promises { grid-template-columns: 1fr; }
  .support-qr { width: min(290px, 100%); }
  .support-payment .button { width: 100%; justify-content: center; }
  .support-disclosure { grid-template-columns: 26px 1fr; padding: 16px; }
  .account-chip { width: 36px; min-width: 36px; padding: 0; }
  .account-chip span { display: none; }
  .auth-intro, .auth-card, .feedback-form { padding: 20px; }
  .feedback-layout { display: block; }
  .feedback-history { margin-top: 24px; }
  .auth-notice { grid-template-columns: 44px 1fr; gap: 14px; padding: 20px; }
  .auth-notice > div:first-child { width: 42px; height: 42px; }
}

/* V0.14 authenticated runtime, status diagnostics, player and cross references */
.connection-banner { position: sticky; z-index: 35; top: var(--topbar); min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 9px clamp(18px, 3vw, 34px); border-block: 1px solid color-mix(in srgb, var(--danger) 40%, var(--line)); color: var(--text); background: color-mix(in srgb, var(--danger) 10%, var(--surface-solid)); box-shadow: 0 12px 32px rgba(0,0,0,.18); }
.connection-banner[hidden] { display: none; }
.connection-banner > div { display: flex; align-items: center; gap: 11px; }
.connection-banner svg { flex: 0 0 auto; color: var(--danger); }
.connection-banner span { display: grid; gap: 2px; }
.connection-banner b { font-size: 10px; }
.connection-banner small { color: var(--text-soft); font-size: 9px; }
.connection-banner a, .connection-banner button { min-height: 30px; padding: 0 10px; border: 1px solid color-mix(in srgb, var(--danger) 38%, var(--line)); color: var(--text); background: transparent; font-size: 9px; cursor: pointer; }

.music-player { position: fixed; z-index: 39; right: 22px; bottom: 18px; width: min(520px, calc(100vw - var(--sidebar) - 44px)); min-height: 62px; display: grid; grid-template-columns: 40px minmax(145px, .8fr) minmax(150px, 1.2fr) 78px; align-items: center; gap: 12px; padding: 10px 13px; border: 1px solid var(--line-strong); color: var(--text); background: color-mix(in srgb, var(--surface-solid) 92%, transparent); box-shadow: 0 18px 46px rgba(0,0,0,.28); backdrop-filter: blur(18px); }
.music-player-toggle { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--text-soft); background: var(--surface-raised); cursor: pointer; }
.music-player-toggle.is-playing { color: var(--accent); border-color: var(--line-strong); }
.music-player-copy { min-width: 0; display: grid; gap: 3px; }
.music-player-copy span { color: var(--accent); font: 7px monospace; letter-spacing: .8px; }
.music-player-copy b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.music-player input, .playback-control input { width: 100%; accent-color: var(--accent); cursor: pointer; }
.music-player time { color: var(--muted); text-align: right; font: 8px monospace; }
.playback-control { width: min(360px, 48vw); display: grid; grid-template-columns: minmax(150px, 1fr) 86px; align-items: center; gap: 12px; }
.playback-control span { color: var(--muted); text-align: right; font: 8px monospace; }

.status-page { max-width: 1080px; }
.runtime-hero { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 20px; padding: 27px; background: linear-gradient(120deg, rgba(74,196,239,.08), transparent 56%), var(--surface); }
.runtime-pulse { width: 50px; height: 50px; display: grid; place-items: center; border: 1px solid var(--line-strong); }
.runtime-pulse i { width: 11px; height: 11px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 8px color-mix(in srgb, var(--muted) 10%, transparent); }
.runtime-hero.is-online .runtime-pulse i { background: var(--success); box-shadow: 0 0 0 8px color-mix(in srgb, var(--success) 11%, transparent), 0 0 20px color-mix(in srgb, var(--success) 32%, transparent); }
.runtime-hero.is-offline .runtime-pulse i { background: var(--danger); }
.runtime-hero span { color: var(--accent); font: 8px monospace; letter-spacing: 1px; }
.runtime-hero h2 { margin: 5px 0 4px; font-size: 23px; }
.runtime-hero p, .runtime-hero time { margin: 0; color: var(--text-soft); font-size: 10px; }
.runtime-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; margin: 11px 0; }
.runtime-grid article { display: grid; gap: 7px; padding: 22px; }
.runtime-grid span, .runtime-grid small { color: var(--muted); font-size: 8px; }
.runtime-grid strong { color: var(--accent); font: 200 24px monospace; }
.runtime-detail { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; padding: 25px; }
.runtime-detail h2 { margin: 7px 0; font: 16px monospace; overflow-wrap: anywhere; }
.runtime-detail p { margin: 0; color: var(--muted); font-size: 10px; }
.runtime-addresses { display: grid; gap: 5px; }
.runtime-addresses code { padding: 7px 9px; border: 1px solid var(--line); color: var(--text-soft); background: var(--bg-soft); font-size: 9px; }
.diagnostic-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 11px; }
.diagnostic-steps article { display: grid; grid-template-columns: 30px 1fr; gap: 13px; padding: 20px; }
.diagnostic-steps article > b { color: var(--accent); font: 14px monospace; }
.diagnostic-steps h3 { margin: 0 0 6px; font-size: 13px; }
.diagnostic-steps p { margin: 0; color: var(--text-soft); font-size: 10px; line-height: 1.65; }

.access-gate { max-width: 1040px; }
.gate-intro { display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: center; margin-bottom: 12px; padding: 25px; background: linear-gradient(130deg, rgba(74,196,239,.1), transparent 56%), var(--surface); }
.gate-intro > div:first-child { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid var(--line-strong); color: var(--accent); }
.gate-intro span { color: var(--accent); font: 8px monospace; letter-spacing: 1px; }
.gate-intro h2 { margin: 6px 0; font-size: 20px; }
.gate-intro p { margin: 0; color: var(--text-soft); font-size: 11px; line-height: 1.7; }
.gate-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.cross-link-panel { margin-top: 12px; padding: 27px 30px; }
.cross-link-panel > header p { max-width: 720px; margin: 7px 0 0; color: var(--text-soft); font-size: 10px; line-height: 1.7; }
.cross-link-panel > div { display: grid; grid-template-columns: minmax(180px, .55fr) minmax(320px, 1.45fr); gap: 24px; margin-top: 22px; }
.cross-link-panel > .character-cross-link-grid { grid-template-columns: minmax(150px, .45fr) minmax(190px, .6fr) minmax(320px, 1.45fr); }
.cross-link-panel h3, .archive-cross-links b { margin: 0 0 10px; color: var(--muted); font: 8px monospace; letter-spacing: .8px; }
.relation-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.relation-chips button, .relation-chips a { padding: 6px 9px; border: 1px solid color-mix(in srgb, var(--term) 32%, var(--line)); color: var(--term); background: color-mix(in srgb, var(--term) 6%, transparent); font-size: 9px; cursor: pointer; }
.cross-link-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.cross-link-list button { min-width: 0; display: grid; gap: 4px; padding: 10px 11px; border: 1px solid var(--line); color: var(--text); text-align: left; background: var(--surface-raised); cursor: pointer; }
.cross-link-list small { color: var(--accent); font: 7px monospace; }
.cross-link-list b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.cross-link-empty { color: var(--muted); font-size: 10px; }
.archive-cross-links { display: grid; gap: 14px; margin-top: 20px; padding: 18px; border: 1px solid var(--line); background: var(--bg-soft); }
.archive-cross-links > span { color: var(--accent); font: 8px monospace; letter-spacing: 1px; }
.archive-cross-links > div { display: grid; grid-template-columns: 70px 1fr; align-items: start; gap: 10px; }
.archive-cross-links > div > b { margin-top: 6px; }
.alias-hit.body-hit { color: var(--muted); border-color: var(--line); background: transparent; }

.origin-return-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; margin-bottom: 12px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--line)); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.origin-return-bar > span { display: inline-flex; align-items: center; gap: 7px; color: var(--accent); font: 8px monospace; letter-spacing: .7px; }
.origin-return-bar > b { overflow: hidden; color: var(--text-soft); font-size: 10px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.origin-return-bar > button { min-height: 32px; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid var(--line-strong); color: var(--text); background: var(--surface-raised); font-size: 9px; cursor: pointer; }

.onboarding-modal { width: min(720px, 100%); padding: 40px; overflow: hidden; background: radial-gradient(circle at 92% 10%, rgba(74, 196, 239, .12), transparent 34%), var(--surface-solid); }
.onboarding-progress { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 30px; color: var(--accent); font: 9px monospace; letter-spacing: 1px; }
.onboarding-progress > div { display: flex; gap: 5px; }
.onboarding-progress i { width: 24px; height: 2px; background: var(--line); }
.onboarding-progress i.is-active { background: var(--accent); box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent); }
.onboarding-symbol { width: 62px; height: 62px; display: grid; place-items: center; margin-bottom: 22px; border: 1px solid var(--line-strong); color: var(--accent); background: rgba(74, 195, 234, .055); transform: rotate(45deg); }
.onboarding-symbol svg { transform: rotate(-45deg); }
.onboarding-modal h2 { max-width: 560px; margin: 12px 0 8px; font-size: clamp(27px, 5vw, 42px); letter-spacing: -1.5px; }
.onboarding-modal > p { max-width: 620px; margin: 0; color: var(--text-soft); font-size: 12px; line-height: 1.85; }
.onboarding-modal ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 28px 0 0; padding: 1px; background: var(--line); list-style: none; }
.onboarding-modal li { min-height: 112px; display: grid; align-content: start; gap: 10px; padding: 17px; background: var(--surface); }
.onboarding-modal li b { color: var(--accent); font: 10px monospace; }
.onboarding-modal li span { color: var(--text-soft); font-size: 10px; line-height: 1.65; }
.onboarding-modal footer { align-items: center; justify-content: space-between; }
.onboarding-modal footer > div { display: flex; gap: 7px; }

@media (max-width: 980px) {
  .runtime-grid { grid-template-columns: repeat(2, 1fr); }
  .diagnostic-steps { grid-template-columns: 1fr; }
  .cross-link-panel > div { grid-template-columns: 1fr; }
  .cross-link-panel > .character-cross-link-grid { grid-template-columns: 1fr 1fr; }
  .cross-link-panel > .character-cross-link-grid > section:last-child { grid-column: 1 / -1; }
  .identity-layer-grid { grid-template-columns: 1fr 1fr; }
  .character-unresolved-panel > div { grid-template-columns: 1fr 1fr; }
  .daily-trivia { grid-template-columns: auto 1fr; }
  .daily-trivia > a { grid-column: 1 / -1; }
  .trivia-reference-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .connection-banner { position: fixed; top: var(--topbar); left: 0; right: 0; align-items: stretch; flex-direction: column; gap: 7px; padding: 10px 14px; }
  .connection-banner > div:last-child { justify-content: flex-end; }
  .origin-return-bar { grid-template-columns: 1fr; align-items: stretch; gap: 8px; padding: 13px; }
  .origin-return-bar > b { white-space: normal; }
  .origin-return-bar > button { justify-content: center; }
  .onboarding-modal { max-height: 92vh; padding: 30px 22px calc(24px + env(safe-area-inset-bottom)); }
  .onboarding-progress { margin-bottom: 22px; }
  .onboarding-progress i { width: 15px; }
  .onboarding-symbol { width: 50px; height: 50px; margin-bottom: 19px; }
  .onboarding-modal h2 { font-size: 29px; }
  .onboarding-modal ul { grid-template-columns: 1fr; }
  .onboarding-modal li { min-height: 0; grid-template-columns: 28px 1fr; gap: 9px; padding: 13px; }
  .onboarding-modal footer { align-items: stretch; flex-direction: column-reverse; }
  .onboarding-modal footer > div { width: 100%; }
  .onboarding-modal footer > div .button { flex: 1; justify-content: center; }
  .music-player { display: none; }
  #main-content { padding-bottom: 0; }
  #toast-root { bottom: 82px; }
  .runtime-hero { grid-template-columns: 44px 1fr; gap: 13px; padding: 20px; }
  .runtime-pulse { width: 42px; height: 42px; }
  .runtime-hero time { grid-column: 2; }
  .runtime-grid { grid-template-columns: 1fr 1fr; }
  .runtime-grid article { padding: 17px; }
  .runtime-grid strong { font-size: 18px; }
  .runtime-detail { grid-template-columns: 1fr; padding: 20px; }
  .gate-intro { grid-template-columns: 44px 1fr; gap: 14px; padding: 20px; }
  .gate-intro > div:first-child { width: 42px; height: 42px; }
  .playback-control { width: 100%; grid-template-columns: 1fr 80px; }
  .cross-link-panel { padding: 21px 19px; }
  .daily-trivia { grid-template-columns: 1fr; padding: 20px; }
  .daily-trivia-mark { width: 50px; height: 50px; }
  .daily-trivia > a { grid-column: auto; min-width: 0; }
  .trivia-reference-panel { padding: 21px 19px; }
  .trivia-reference-panel > header { align-items: flex-start; flex-direction: column; }
  .trivia-reference-list { grid-template-columns: 1fr; }
  .cross-link-list { grid-template-columns: 1fr; }
  .identity-layer-grid, .journey-copy, .character-evidence-list, .character-unresolved-panel > div, .cross-link-panel > .character-cross-link-grid { grid-template-columns: 1fr; }
  .cross-link-panel > .character-cross-link-grid > section:last-child { grid-column: auto; }
  .archive-cross-links > div { grid-template-columns: 1fr; gap: 4px; }
}

/* Pixel Tower vertical atlas */
.tower-map-page { --tower-axis-offset: 42px; }
.tower-map-notice { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-bottom: 12px; padding: 18px 21px; }
.tower-map-notice > div { display: flex; align-items: flex-start; gap: 12px; }.tower-map-notice > div > svg { flex: 0 0 auto; margin-top: 1px; color: var(--accent); }
.tower-map-notice b { display: block; margin-bottom: 4px; font-size: 11px; }.tower-map-notice p { max-width: 820px; margin: 0; color: var(--text-soft); font-size: 10px; line-height: 1.7; }
.tower-map-notice em { flex: 0 0 auto; color: var(--accent); font: normal 8px monospace; letter-spacing: .6px; }
.tower-route { display: grid; grid-template-columns: 245px 1fr; align-items: center; gap: 26px; margin-bottom: 12px; padding: 20px 22px; overflow: hidden; }
.tower-route header span { color: var(--accent); font: 8px monospace; letter-spacing: 1px; }.tower-route header h2 { margin: 5px 0 4px; font-size: 18px; }.tower-route header p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.6; }
.tower-route > div { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); min-width: 660px; }
.tower-route > div a { position: relative; min-width: 0; display: grid; gap: 4px; padding: 11px 10px 10px 14px; border-left: 1px solid var(--line); background: linear-gradient(90deg, rgba(74,195,234,.045), transparent); }
.tower-route > div a::before { content: ""; position: absolute; left: -3px; top: 16px; width: 5px; height: 5px; transform: rotate(45deg); background: var(--accent); }.tower-route > div a span { color: var(--accent); font: 7px monospace; }.tower-route > div a b { overflow: hidden; font-size: 9px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }.tower-route > div a svg { display: none; }
.tower-atlas-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); align-items: start; gap: 12px; }
.tower-diagram { position: relative; display: grid; gap: 10px; padding-left: calc(var(--tower-axis-offset) + 26px); }
.tower-axis { position: absolute; z-index: 2; left: var(--tower-axis-offset); top: 0; bottom: 0; width: 1px; background: linear-gradient(var(--accent), var(--line-strong) 18%, var(--line-strong) 82%, #7787f8); }
.tower-axis > span, .tower-axis > b { position: absolute; left: -15px; color: var(--accent); font: 7px monospace; letter-spacing: 1px; }.tower-axis > span { top: 0; }.tower-axis > b { bottom: 0; color: #98a7ff; }
.tower-axis > i { position: absolute; left: -4px; top: 26px; width: 9px; height: 9px; transform: rotate(45deg); border: 1px solid var(--accent); background: var(--bg); box-shadow: 0 0 12px rgba(74,195,234,.35); }
.tower-axis > em { position: sticky; top: 105px; display: block; margin: 62px 0 0 -11px; color: var(--muted); font: normal 7px monospace; letter-spacing: 1.2px; writing-mode: vertical-rl; }
.tower-floor { --floor-color: #8fa7bb; --floor-glow: rgba(143,167,187,.13); position: relative; min-height: 238px; display: grid; grid-template-columns: minmax(220px, .8fr) minmax(330px, 1.2fr); border: 1px solid color-mix(in srgb, var(--floor-color) 38%, var(--line)); background: radial-gradient(circle at 17% 50%, var(--floor-glow), transparent 34%), linear-gradient(135deg, color-mix(in srgb, var(--floor-color) 6%, var(--surface)) 0%, var(--surface) 62%); overflow: hidden; }
.tower-floor::before { content: ""; position: absolute; z-index: 3; left: calc(-1 * (var(--tower-axis-offset) - 17px)); top: 50%; width: calc(var(--tower-axis-offset) - 16px); height: 1px; background: color-mix(in srgb, var(--floor-color) 50%, var(--line-strong)); }
.tower-floor::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 0 54%, rgba(255,255,255,.018) 54% 55%, transparent 55%); }
.tower-floor-vault { --floor-color: #d9e0e7; --floor-glow: rgba(217,224,231,.14); border-radius: 48% 48% 0 0 / 18% 18% 0 0; }
.tower-floor-selenograph { --floor-color: #e9c66d; --floor-glow: rgba(233,198,109,.13); }.tower-floor-ark { --floor-color: #d58ae2; --floor-glow: rgba(213,138,226,.13); }.tower-floor-melodious { --floor-color: #f06c78; --floor-glow: rgba(240,108,120,.13); }
.tower-floor-biosphere { --floor-color: #77d8dc; --floor-glow: rgba(119,216,220,.12); }.tower-floor-mediocris { --floor-color: #8cdde1; --floor-glow: rgba(140,221,225,.12); border-style: dashed; }.tower-floor-haven { --floor-color: #9e79de; --floor-glow: rgba(158,121,222,.13); }
.tower-floor-atlas { --floor-color: #72b9e8; --floor-glow: rgba(114,185,232,.13); }.tower-floor-neon { --floor-color: #b59af2; --floor-glow: rgba(181,154,242,.13); }.tower-floor-hoodoo { --floor-color: #e5a067; --floor-glow: rgba(229,160,103,.13); }.tower-floor-glaciaxia { --floor-color: #91c8ed; --floor-glow: rgba(145,200,237,.14); }
.tower-floor-visual { position: relative; min-height: 220px; display: grid; place-items: center; align-self: stretch; color: var(--floor-color); border-right: 1px solid color-mix(in srgb, var(--floor-color) 24%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--floor-color) 6%, transparent), transparent); overflow: hidden; }
.tower-floor-visual::before { content: ""; position: absolute; inset: 0; opacity: .35; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 26px 26px; mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent); }
.tower-floor-sketch { position: relative; z-index: 1; width: min(94%, 390px); height: auto; opacity: .72; filter: drop-shadow(0 0 10px var(--floor-glow)); }
.tower-floor-visual > span { position: absolute; z-index: 2; left: 18px; top: 17px; color: var(--floor-color); font: 200 26px monospace; opacity: .9; }
.tower-floor-copy { position: relative; z-index: 2; padding: 24px; }.tower-floor-copy > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.tower-floor-copy > header span { color: var(--floor-color); font: 7px monospace; letter-spacing: 1px; }.tower-floor-copy > header h2 { margin: 6px 0 1px; font-size: 27px; }.tower-floor-copy > header small { color: var(--muted); font: 10px monospace; }.tower-floor-copy > header em { flex: 0 0 auto; padding: 5px 7px; border: 1px solid color-mix(in srgb, var(--floor-color) 35%, var(--line)); color: var(--floor-color); font: normal 7px monospace; }
.tower-floor-copy > p { margin: 15px 0 17px; color: var(--text-soft); font-size: 10px; line-height: 1.75; }
.tower-floor-open { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; margin: 0 0 12px; padding: 10px 11px; border: 1px solid color-mix(in srgb, var(--floor-color) 38%, var(--line)); color: var(--text); background: color-mix(in srgb, var(--floor-color) 6%, transparent); transition: .18s var(--ease); }.tower-floor-open:hover { border-color: var(--floor-color); background: color-mix(in srgb, var(--floor-color) 10%, transparent); transform: translateY(-1px); }.tower-floor-open span { color: var(--floor-color); font: 7px monospace; letter-spacing: .8px; }.tower-floor-open b { font-size: 9px; font-weight: 550; }.tower-floor-open svg { color: var(--floor-color); }
.tower-story-links { display: flex; flex-wrap: wrap; gap: 7px; }.tower-story-link { min-width: 160px; flex: 1 1 180px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 10px 11px; border: 1px solid var(--line); background: rgba(255,255,255,.018); transition: .18s var(--ease); }.tower-story-link:hover { border-color: color-mix(in srgb, var(--floor-color) 45%, var(--line)); transform: translateY(-1px); }.tower-story-link span { color: var(--floor-color); font: 7px monospace; }.tower-story-link b { font-size: 9px; font-weight: 550; }.tower-story-link small { color: var(--muted); font: 7px monospace; }.tower-story-link svg { grid-column: 3; grid-row: 1; }
.tower-landmarks { margin-top: 12px; border-top: 1px solid var(--line); }.tower-landmarks > summary { display: flex; align-items: center; gap: 7px; padding: 11px 0 0; color: var(--muted); font-size: 9px; cursor: pointer; list-style: none; }.tower-landmarks > summary::-webkit-details-marker { display: none; }.tower-landmarks > summary b { margin-left: auto; color: var(--floor-color); font: 8px monospace; }.tower-landmarks[open] > summary svg { transform: rotate(90deg); }.tower-landmarks > summary svg { transition: transform .18s var(--ease); }
.tower-landmarks > div { display: grid; gap: 5px; margin-top: 9px; }.tower-landmarks > div > a, .tower-landmarks > div > div { display: grid; grid-template-columns: 120px 1fr 14px; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); }.tower-landmarks span { display: grid; gap: 2px; }.tower-landmarks span b { font-size: 9px; }.tower-landmarks span small { color: var(--floor-color); font: 7px monospace; }.tower-landmarks p { margin: 0; color: var(--muted); font-size: 8px; line-height: 1.55; }
.tower-side-notes { position: sticky; top: calc(var(--topbar) + 12px); display: grid; gap: 12px; }.tower-side-notes > section { padding: 22px; }.tower-side-notes h2 { margin: 5px 0 7px; font-size: 19px; }.tower-side-notes > section > p { margin: 0 0 16px; color: var(--muted); font-size: 9px; line-height: 1.65; }
.tower-transit-panel > a { position: relative; display: block; margin-top: 8px; padding: 15px; border: 1px solid var(--line); background: rgba(255,255,255,.018); }.tower-transit-panel > a > span { color: var(--warning); font: 7px monospace; }.tower-transit-panel > a h3 { margin: 7px 0 1px; font-size: 15px; }.tower-transit-panel > a small { color: var(--muted); font: 8px monospace; }.tower-transit-panel > a p { margin: 10px 0 0; color: var(--text-soft); font-size: 9px; line-height: 1.65; }.tower-transit-panel > a svg { position: absolute; right: 12px; top: 12px; color: var(--warning); }
.tower-source-panel > div { display: grid; gap: 5px; }.tower-source-panel > div > a, .tower-source-panel > div > div { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 10px 0; border-top: 1px solid var(--line); }.tower-source-panel span { grid-column: 1 / -1; color: var(--accent); font: 7px monospace; }.tower-source-panel b { color: var(--text-soft); font-size: 9px; font-weight: 500; }.tower-source-panel svg { color: var(--accent); }
.tower-legend-panel ul { display: grid; gap: 11px; margin: 14px 0 0; padding: 0; list-style: none; }.tower-legend-panel li { display: grid; grid-template-columns: 12px 1fr; gap: 10px; align-items: start; }.tower-legend-panel li i { width: 9px; height: 9px; margin-top: 3px; transform: rotate(45deg); border: 1px solid var(--accent); }.tower-legend-panel li i.is-side { border-color: var(--violet); }.tower-legend-panel li i.is-clue { border-color: var(--warning); }.tower-legend-panel li b { display: block; margin-bottom: 2px; font-size: 9px; }.tower-legend-panel li span { color: var(--muted); font-size: 8px; line-height: 1.55; }

/* Floor archive detail */
.tower-floor-archive-page { --floor-color: #8fa7bb; --floor-glow: rgba(143,167,187,.13); }
.tower-theme-vault { --floor-color: #d9e0e7; --floor-glow: rgba(217,224,231,.14); }.tower-theme-selenograph { --floor-color: #e9c66d; --floor-glow: rgba(233,198,109,.13); }.tower-theme-ark { --floor-color: #d58ae2; --floor-glow: rgba(213,138,226,.13); }.tower-theme-melodious { --floor-color: #f06c78; --floor-glow: rgba(240,108,120,.13); }
.tower-theme-biosphere { --floor-color: #77d8dc; --floor-glow: rgba(119,216,220,.12); }.tower-theme-mediocris { --floor-color: #8cdde1; --floor-glow: rgba(140,221,225,.12); }.tower-theme-haven { --floor-color: #9e79de; --floor-glow: rgba(158,121,222,.13); }.tower-theme-atlas { --floor-color: #72b9e8; --floor-glow: rgba(114,185,232,.13); }.tower-theme-neon { --floor-color: #b59af2; --floor-glow: rgba(181,154,242,.13); }.tower-theme-hoodoo { --floor-color: #e5a067; --floor-glow: rgba(229,160,103,.13); }.tower-theme-glaciaxia { --floor-color: #91c8ed; --floor-glow: rgba(145,200,237,.14); }
.tower-floor-proof { display: inline-flex; align-items: center; min-height: 30px; padding: 0 11px; border: 1px solid color-mix(in srgb, var(--floor-color) 38%, var(--line)); color: var(--floor-color); font: 8px monospace; letter-spacing: .7px; }
.tower-evidence-badge { display: inline-flex; align-items: center; width: max-content; min-height: 17px; padding: 0 6px; border: 1px solid rgba(255,255,255,.12); color: var(--muted); font: 6px/1 monospace; letter-spacing: .35px; vertical-align: middle; white-space: nowrap; }.tower-evidence-badge.is-direct { border-color: color-mix(in srgb, var(--floor-color) 52%, var(--line)); color: var(--floor-color); background: color-mix(in srgb, var(--floor-color) 8%, transparent); }.tower-evidence-badge.is-related { border-color: color-mix(in srgb, var(--warning) 42%, var(--line)); color: var(--warning); background: color-mix(in srgb, var(--warning) 6%, transparent); }.tower-evidence-badge.is-pending { border-style: dashed; color: var(--muted); }
.tower-floor-archive-hero { position: relative; display: grid; grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr); min-height: 350px; margin-bottom: 12px; border: 1px solid color-mix(in srgb, var(--floor-color) 40%, var(--line)); background: radial-gradient(circle at 16% 50%, var(--floor-glow), transparent 38%), linear-gradient(125deg, color-mix(in srgb, var(--floor-color) 7%, var(--surface)), var(--surface) 62%); overflow: hidden; }
.tower-floor-archive-visual { position: relative; min-height: 350px; display: grid; place-items: center; color: var(--floor-color); border-right: 1px solid color-mix(in srgb, var(--floor-color) 30%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--floor-color) 7%, transparent), transparent); }.tower-floor-archive-visual::before { content: ""; position: absolute; inset: 0; opacity: .42; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 30px 30px; }.tower-floor-archive-visual .tower-floor-sketch { width: min(90%, 450px); opacity: .82; }.tower-floor-archive-visual > span { position: absolute; left: 25px; top: 20px; font: 200 42px monospace; }.tower-floor-archive-visual > small { position: absolute; right: 19px; bottom: 17px; padding: 5px 7px; border: 1px solid currentColor; font: 7px monospace; letter-spacing: .7px; }
.tower-floor-archive-hero > div:last-child { align-self: center; padding: 38px 42px; }.tower-floor-archive-hero > div:last-child > small { display: block; margin-top: 7px; color: var(--floor-color); font: 8px monospace; letter-spacing: .8px; }.tower-floor-archive-hero h1 { margin: 9px 0 0; font-size: clamp(38px, 6vw, 68px); line-height: .95; }.tower-floor-archive-hero > div:last-child > b { display: block; margin-top: 8px; color: var(--muted); font: 11px monospace; font-weight: 400; }.tower-floor-archive-hero > div:last-child > p { max-width: 700px; margin: 22px 0; color: var(--text-soft); font-size: 11px; line-height: 1.8; }.tower-floor-archive-hero dl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin: 0; }.tower-floor-archive-hero dl div { padding: 11px; border: 1px solid var(--line); background: rgba(255,255,255,.018); }.tower-floor-archive-hero dt { color: var(--muted); font-size: 8px; }.tower-floor-archive-hero dd { margin: 3px 0 0; color: var(--floor-color); font: 17px monospace; }
.tower-floor-evidence-legend { display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: center; gap: 22px; margin-bottom: 12px; padding: 15px 18px; }.tower-floor-evidence-legend > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }.tower-floor-evidence-legend p { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; align-items: center; margin: 0; padding: 9px 10px; border: 1px solid var(--line); background: rgba(255,255,255,.012); }.tower-floor-evidence-legend p small { grid-column: 1 / -1; color: var(--muted); font-size: 7px; line-height: 1.45; }.tower-floor-evidence-legend p b { font-size: 8px; }
.tower-floor-reading { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; margin-bottom: 12px; padding: 22px; }.tower-floor-reading header h2, .tower-floor-section > header h2 { margin: 5px 0 4px; font-size: 19px; }.tower-floor-reading header p, .tower-floor-section > header p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.6; }.tower-floor-reading > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }.tower-floor-reading > div > a { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 7px 9px; min-height: 68px; padding: 12px 13px; border: 1px solid var(--line); background: rgba(255,255,255,.018); }.tower-floor-reading > div > a:hover { border-color: color-mix(in srgb, var(--floor-color) 48%, var(--line)); }.tower-floor-reading a > div { display: flex; align-items: center; gap: 6px; }.tower-floor-reading a > div > span { color: var(--floor-color); font: 7px monospace; }.tower-floor-reading a h3 { margin: 0; font-size: 11px; }.tower-floor-reading a small { color: var(--muted); font: 7px monospace; }.tower-floor-reading a > p { grid-column: 1 / -1; margin: 1px 26px 0 0; color: var(--muted); font-size: 7px; line-height: 1.5; }.tower-floor-reading a svg { grid-column: 3; grid-row: 1; color: var(--floor-color); }
.tower-floor-landmark-section { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; margin-bottom: 12px; padding: 22px; }.tower-floor-landmark-section header h2 { margin: 5px 0 4px; font-size: 19px; }.tower-floor-landmark-section header p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.6; }.tower-floor-landmark-section > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }.tower-floor-landmark-card { position: relative; display: grid; gap: 6px; padding: 12px 34px 12px 13px; border: 1px solid var(--line); background: rgba(255,255,255,.016); }.tower-floor-landmark-card:hover { border-color: color-mix(in srgb, var(--floor-color) 45%, var(--line)); }.tower-floor-landmark-card > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.tower-floor-landmark-card > div > span { color: var(--floor-color); font: 7px monospace; letter-spacing: .6px; }.tower-floor-landmark-card h3 { display: flex; align-items: baseline; gap: 7px; margin: 0; font-size: 11px; }.tower-floor-landmark-card h3 small { color: var(--muted); font: 7px monospace; }.tower-floor-landmark-card p { margin: 0; color: var(--text-soft); font-size: 8px; line-height: 1.55; }.tower-floor-landmark-card > svg { position: absolute; right: 12px; top: 50%; color: var(--floor-color); transform: translateY(-50%); }
.tower-floor-archive-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }.tower-floor-section { min-width: 0; padding: 22px; }.tower-floor-section > header { margin-bottom: 15px; }.tower-floor-section > div { display: grid; gap: 7px; }
.tower-floor-event { display: grid; gap: 6px; padding: 13px; border: 1px solid var(--line); background: rgba(255,255,255,.016); }.tower-floor-event:hover { border-color: color-mix(in srgb, var(--floor-color) 45%, var(--line)); }.tower-floor-event > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.tower-floor-event > div > span { color: var(--floor-color); font: 7px monospace; }.tower-floor-event h3 { margin: 0; font-size: 10px; }.tower-floor-event p { margin: 0; color: var(--text-soft); font-size: 9px; line-height: 1.6; }.tower-floor-event small { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; color: var(--muted); font: 7px monospace; }
.tower-floor-character-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.tower-floor-character { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 10px; min-width: 0; padding: 11px; border: 1px solid var(--line); background: rgba(255,255,255,.016); }.tower-floor-character:hover { border-color: color-mix(in srgb, var(--person) 60%, var(--line)); }.tower-floor-character > span { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--person) 55%, var(--line)); color: var(--person); font: 11px monospace; }.tower-floor-character small { color: var(--person); font: 7px monospace; }.tower-floor-character h3 { margin: 3px 0 1px; font-size: 10px; }.tower-floor-character p { overflow: hidden; margin: 0; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.tower-floor-term-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.tower-floor-term { min-width: 0; display: block; padding: 13px; border: 1px solid var(--line); color: var(--text); text-align: left; background: rgba(255,255,255,.016); cursor: pointer; }.tower-floor-term:hover { border-color: color-mix(in srgb, var(--floor-color) 45%, var(--line)); }.tower-floor-term > span { color: var(--floor-color); font: 7px monospace; }.tower-floor-term h3 { margin: 5px 0 1px; font-size: 11px; }.tower-floor-term small { color: var(--muted); font: 7px monospace; }.tower-floor-term p { display: -webkit-box; margin: 8px 0 0; overflow: hidden; color: var(--text-soft); font-size: 8px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.tower-floor-records > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }.tower-floor-record { position: relative; min-width: 0; display: grid; gap: 4px; padding: 13px 34px 13px 13px; border: 1px solid var(--line); color: var(--text); text-align: left; background: rgba(255,255,255,.016); cursor: pointer; }.tower-floor-record:hover { border-color: color-mix(in srgb, var(--floor-color) 45%, var(--line)); }.tower-floor-record span { color: var(--floor-color); font: 7px monospace; }.tower-floor-record h3 { overflow: hidden; margin: 0; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.tower-floor-record small { color: var(--muted); font: 7px monospace; }.tower-floor-record svg { position: absolute; right: 12px; top: 50%; color: var(--floor-color); transform: translateY(-50%); }.tower-floor-records footer { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }.tower-floor-records footer a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 11px; border: 1px solid color-mix(in srgb, var(--floor-color) 35%, var(--line)); color: var(--floor-color); font-size: 8px; }
.tower-floor-boundary { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; padding: 16px; border: 1px solid var(--line); color: var(--muted); background: rgba(255,255,255,.012); }.tower-floor-boundary svg { flex: 0 0 auto; color: var(--floor-color); }.tower-floor-boundary h3 { margin: 0 0 6px; color: var(--text); font-size: 10px; }.tower-floor-boundary p { margin: 8px 0 0; font-size: 8px; line-height: 1.65; }.tower-floor-boundary ul { display: grid; gap: 5px; margin: 0; padding-left: 16px; }.tower-floor-boundary li { color: var(--text-soft); font-size: 9px; line-height: 1.55; }
.tower-origin-return { border-color: color-mix(in srgb, var(--floor-color, var(--accent)) 36%, var(--line)); }
.tower-evidence-badge.is-interactive { cursor: pointer; transition: border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease); }.tower-evidence-badge.is-interactive:hover, .tower-evidence-badge.is-interactive:focus-visible { border-color: currentColor; outline: none; transform: translateY(-1px); box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 14%, transparent); }
.tower-map-page .page-actions { display: flex; align-items: center; gap: 7px; }.tower-map-page .page-actions .button b { display: inline-grid; min-width: 18px; height: 18px; place-items: center; margin-left: 3px; border: 1px solid var(--line); color: var(--accent); font: 7px monospace; }
.tower-research-toolbar { display: grid; gap: 13px; margin-bottom: 12px; padding: 18px 20px; }.tower-research-toolbar > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }.tower-research-toolbar > header h2 { margin: 5px 0 3px; font-size: 17px; }.tower-research-toolbar > header p { max-width: 720px; margin: 0; color: var(--muted); font-size: 8px; line-height: 1.6; }.tower-research-toolbar > header .button { flex: 0 0 auto; }.tower-research-toolbar > header .button b { display: inline-grid; min-width: 19px; height: 19px; place-items: center; margin-left: 3px; border: 1px solid color-mix(in srgb, var(--floor-color) 42%, var(--line)); color: var(--floor-color); font: 7px monospace; }.tower-research-filter { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 10px; }.tower-research-filter > span { color: var(--text-soft); font-size: 8px; }.tower-research-toolbar output { padding-top: 11px; border-top: 1px solid var(--line); color: var(--floor-color); font: 8px monospace; }.tower-research-empty { grid-column: 1 / -1; margin: 0; padding: 30px 20px; color: var(--muted); font-size: 9px; text-align: center; }[data-tower-research-item][hidden], [data-tower-research-section][hidden], .tower-research-empty[hidden] { display: none !important; }
.tower-floor-navigation { position: relative; z-index: 5; display: grid; grid-template-columns: minmax(150px, .72fr) minmax(240px, 1.4fr) minmax(150px, .72fr); align-items: stretch; gap: 8px; margin: 0 0 12px; }.tower-floor-navigation.is-bottom { margin: 12px 0 0; }.tower-floor-nav-step, .tower-floor-jump > summary { min-height: 58px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); color: var(--text); background: color-mix(in srgb, var(--floor-color) 4%, var(--surface)); }.tower-floor-nav-step:hover, .tower-floor-jump > summary:hover { border-color: color-mix(in srgb, var(--floor-color) 52%, var(--line)); }.tower-floor-nav-step > svg { flex: 0 0 auto; color: var(--floor-color); }.tower-floor-nav-step > span { min-width: 0; display: grid; gap: 3px; font-size: 9px; }.tower-floor-nav-step small { overflow: hidden; color: var(--muted); font: 7px monospace; text-overflow: ellipsis; white-space: nowrap; }.tower-floor-nav-step:last-child { justify-content: flex-end; text-align: right; }.tower-floor-nav-step.is-disabled { opacity: .42; pointer-events: none; }.tower-floor-jump { position: relative; min-width: 0; }.tower-floor-jump > summary { justify-content: center; flex-direction: column; gap: 2px; height: 100%; text-align: center; cursor: pointer; list-style: none; }.tower-floor-jump > summary::-webkit-details-marker { display: none; }.tower-floor-jump > summary span, .tower-floor-jump > summary small { color: var(--muted); font: 7px monospace; }.tower-floor-jump > summary b { font-size: 10px; }.tower-floor-jump[open] > summary { border-color: var(--floor-color); }.tower-floor-jump > div { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 5px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; max-height: min(440px, 60vh); padding: 7px; overflow-y: auto; border: 1px solid color-mix(in srgb, var(--floor-color) 48%, var(--line)); background: color-mix(in srgb, var(--surface) 95%, #07111b); box-shadow: 0 18px 40px rgba(0,0,0,.32); }.tower-floor-navigation.is-bottom .tower-floor-jump > div { top: auto; bottom: calc(100% + 5px); }.tower-floor-jump > div > a { display: grid; grid-template-columns: 34px 1fr; gap: 2px 8px; min-width: 0; padding: 9px 10px; border: 1px solid transparent; background: rgba(255,255,255,.018); }.tower-floor-jump > div > a:hover, .tower-floor-jump > div > a.is-current { border-color: color-mix(in srgb, var(--floor-color) 45%, var(--line)); background: color-mix(in srgb, var(--floor-color) 7%, transparent); }.tower-floor-jump > div > a > span { grid-row: 1 / 3; align-self: center; color: var(--floor-color); font: 12px monospace; }.tower-floor-jump > div > a b { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.tower-floor-jump > div > a small { overflow: hidden; color: var(--muted); font: 7px monospace; text-overflow: ellipsis; white-space: nowrap; }
.tower-evidence-modal { width: min(900px, calc(100vw - 34px)); max-height: min(860px, calc(100vh - 38px)); overflow-y: auto; }.tower-evidence-modal > header { padding: 3px 0 17px; border-bottom: 1px solid var(--line); }.tower-evidence-modal > header > div { display: flex; align-items: center; gap: 8px; }.tower-evidence-modal > header > div > span:last-child { color: var(--muted); font: 8px monospace; }.tower-evidence-modal > header h2 { margin: 10px 0 3px; font-size: clamp(24px, 4vw, 38px); }.tower-evidence-modal > header > p { margin: 0; color: var(--muted); font: 9px monospace; }.tower-evidence-chain { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0; padding: 0; list-style: none; }.tower-evidence-chain::before { content: ""; position: absolute; left: 16%; right: 16%; top: 18px; height: 1px; background: var(--line-strong); }.tower-evidence-chain li { position: relative; display: grid; grid-template-columns: 37px 1fr; align-items: start; gap: 9px; min-width: 0; padding: 11px; border: 1px solid var(--line); background: rgba(255,255,255,.018); }.tower-evidence-chain li > i { position: relative; z-index: 1; width: 37px; height: 37px; display: grid; place-items: center; border: 1px solid var(--accent); color: var(--accent); background: var(--surface); font: normal 8px monospace; }.tower-evidence-chain li > div { min-width: 0; display: grid; gap: 4px; }.tower-evidence-chain li span { color: var(--muted); font: 7px monospace; }.tower-evidence-chain li b { font-size: 9px; }.tower-evidence-chain li p { margin: 0; color: var(--text-soft); font-size: 8px; line-height: 1.6; }.tower-evidence-references { margin-top: 13px; }.tower-evidence-references > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }.tower-evidence-references > header span { font-size: 10px; font-weight: 650; }.tower-evidence-references > header small { color: var(--muted); font: 7px monospace; }.tower-evidence-archives, .tower-evidence-sources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }.tower-evidence-archives > button, .tower-evidence-sources > a, .tower-evidence-sources > div { position: relative; min-width: 0; display: grid; gap: 4px; padding: 11px 34px 11px 12px; border: 1px solid var(--line); color: var(--text); text-align: left; background: rgba(255,255,255,.016); }.tower-evidence-archives > button:hover, .tower-evidence-sources > a:hover { border-color: var(--accent); }.tower-evidence-archives span, .tower-evidence-sources span { color: var(--accent); font: 7px monospace; }.tower-evidence-archives b, .tower-evidence-sources b { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.tower-evidence-archives p, .tower-evidence-sources small { margin: 0; color: var(--muted); font-size: 7px; line-height: 1.5; }.tower-evidence-archives svg, .tower-evidence-sources svg { position: absolute; right: 11px; top: 50%; color: var(--accent); transform: translateY(-50%); }.tower-evidence-empty { grid-column: 1 / -1; margin: 0; padding: 11px 12px; border: 1px dashed var(--line); color: var(--muted); font-size: 8px; line-height: 1.6; }.tower-evidence-modal > aside { display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; padding: 11px 12px; border: 1px solid var(--line); color: var(--muted); background: rgba(255,255,255,.012); }.tower-evidence-modal > aside svg { flex: 0 0 auto; color: var(--accent); }.tower-evidence-modal > aside p { margin: 0; font-size: 8px; line-height: 1.6; }.tower-evidence-modal > footer { display: flex; justify-content: space-between; gap: 8px; margin-top: 16px; }
.tower-research-queue-modal { width: min(1040px, calc(100vw - 34px)); max-height: min(880px, calc(100vh - 38px)); overflow-y: auto; }.tower-research-queue-modal > header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px; padding: 4px 0 18px; border-bottom: 1px solid var(--line); }.tower-research-queue-modal > header h2 { margin: 7px 0 5px; font-size: clamp(25px, 4vw, 40px); }.tower-research-queue-modal > header p { max-width: 650px; margin: 0; color: var(--text-soft); font-size: 9px; line-height: 1.7; }.tower-research-queue-modal > header dl { display: grid; grid-template-columns: repeat(2, 86px); gap: 6px; margin: 0; }.tower-research-queue-modal > header dl div { display: grid; place-content: center; padding: 11px; border: 1px solid var(--line); text-align: center; }.tower-research-queue-modal > header dt { color: var(--muted); font-size: 7px; }.tower-research-queue-modal > header dd { margin: 3px 0 0; color: var(--accent); font: 20px monospace; }.tower-research-queue-list { display: grid; gap: 8px; margin-top: 14px; }.tower-research-queue-group { border: 1px solid var(--line); background: rgba(255,255,255,.012); }.tower-research-queue-group.is-current { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }.tower-research-queue-group > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }.tower-research-queue-group > header span { color: var(--accent); font: 7px monospace; }.tower-research-queue-group > header h3 { margin: 3px 0 0; font-size: 12px; }.tower-research-queue-group > header a { display: inline-flex; align-items: center; gap: 5px; color: var(--accent); font-size: 8px; }.tower-research-queue-group ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }.tower-research-queue-group li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 12px 14px; }.tower-research-queue-group li + li { border-top: 1px solid var(--line); }.tower-research-queue-group li > span { align-self: start; padding: 4px 5px; border: 1px dashed var(--warning); color: var(--warning); font: 6px monospace; text-align: center; }.tower-research-queue-group li.is-progress > span { border-color: var(--accent); color: var(--accent); }.tower-research-queue-group li.is-clue > span { border-color: #bfa7ff; color: #bfa7ff; }.tower-research-queue-group li.is-complete > span { border-color: var(--success); color: var(--success); }.tower-research-queue-group li p { margin: 0; color: var(--text-soft); font-size: 9px; line-height: 1.65; }.tower-research-task-detail { display: grid; gap: 9px; margin-top: 10px; }.tower-research-task-detail dl { display: grid; gap: 6px; margin: 0; }.tower-research-task-detail dl div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 9px; padding: 8px 10px; border-left: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); background: rgba(255,255,255,.025); }.tower-research-task-detail dt { color: var(--muted); font-size: 7px; }.tower-research-task-detail dd { margin: 0; color: var(--text-soft); font-size: 8px; line-height: 1.6; overflow-wrap: anywhere; }.tower-research-task-detail details { padding: 8px 10px; border: 1px solid var(--line); }.tower-research-task-detail summary { color: var(--accent); font-size: 8px; cursor: pointer; }.tower-research-task-detail details ol { display: grid; gap: 7px; margin-top: 9px; }.tower-research-task-detail details li { display: grid; grid-template-columns: auto 1fr; gap: 5px 10px; padding: 8px; border: 0; background: rgba(0,0,0,.12); }.tower-research-task-detail details li b { color: var(--text); font-size: 8px; }.tower-research-task-detail details li span { justify-self: end; color: var(--muted); font: 6px monospace; }.tower-research-task-detail details li p { grid-column: 1 / -1; }.tower-research-queue-modal > footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }.tower-research-queue-modal > footer p { display: flex; align-items: flex-start; gap: 7px; margin: 0; color: var(--muted); font-size: 8px; line-height: 1.6; }.tower-research-queue-modal > footer svg { flex: 0 0 auto; color: var(--accent); }

@media (max-width: 1120px) {
  .tower-atlas-layout { grid-template-columns: 1fr; }
  .tower-side-notes { position: static; grid-template-columns: repeat(3, 1fr); }
  .tower-route { grid-template-columns: 1fr; }
  .tower-route { overflow-x: auto; }
  .tower-floor-archive-hero { grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr); }
  .tower-floor-archive-grid { grid-template-columns: 1fr; }
  .tower-floor-evidence-legend { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .tower-map-notice { align-items: stretch; flex-direction: column; }.tower-map-notice em { align-self: flex-start; }
  .tower-side-notes { grid-template-columns: 1fr; }
  .tower-diagram { padding-left: 0; }.tower-axis { display: none; }
  .tower-floor { grid-template-columns: 1fr; }.tower-floor::before { display: none; }
  .tower-floor-visual { min-height: 160px; border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--floor-color) 24%, var(--line)); }
  .tower-floor-sketch { width: min(90%, 360px); max-height: 155px; }
  .tower-floor-copy { padding: 20px; }.tower-floor-copy > header h2 { font-size: 24px; }
  .tower-story-link { min-width: 0; flex-basis: 100%; }
  .tower-floor-archive-hero { grid-template-columns: 1fr; }.tower-floor-archive-visual { min-height: 210px; border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--floor-color) 30%, var(--line)); }.tower-floor-archive-visual .tower-floor-sketch { max-height: 195px; }.tower-floor-archive-hero > div:last-child { padding: 27px 24px; }.tower-floor-archive-hero h1 { font-size: 42px; }.tower-floor-reading, .tower-floor-landmark-section { grid-template-columns: 1fr; }.tower-floor-landmark-section > div, .tower-floor-evidence-legend > div { grid-template-columns: 1fr; }.tower-floor-character-grid, .tower-floor-term-grid, .tower-floor-records > div { grid-template-columns: 1fr; }
  .tower-floor-navigation { grid-template-columns: 1fr 1fr; }.tower-floor-jump { grid-column: 1 / -1; grid-row: 1; }.tower-floor-navigation > .tower-floor-nav-step { grid-row: 2; }.tower-floor-jump > div { grid-template-columns: 1fr; }.tower-floor-navigation.is-bottom .tower-floor-jump > div { top: calc(100% + 5px); bottom: auto; }
  .tower-evidence-chain { grid-template-columns: 1fr; }.tower-evidence-chain::before { display: none; }.tower-evidence-archives, .tower-evidence-sources { grid-template-columns: 1fr; }
  .tower-map-page .page-actions { align-items: stretch; flex-direction: column; }.tower-research-toolbar > header { flex-direction: column; }.tower-research-toolbar > header .button { width: 100%; justify-content: center; }.tower-research-filter { grid-template-columns: 1fr; }.tower-research-queue-modal > header { grid-template-columns: 1fr; }.tower-research-queue-modal > header dl { grid-template-columns: repeat(4, minmax(0, 1fr)); }.tower-research-queue-modal > footer { align-items: stretch; flex-direction: column; }.tower-research-queue-modal > footer .button { width: 100%; justify-content: center; }
}

@media (max-width: 520px) {
  .tower-map-page .page-actions { width: 100%; }.tower-map-page .page-actions .button { width: 100%; justify-content: center; }
  .tower-route { padding: 18px; }.tower-route > div { min-width: 620px; }
  .tower-floor { min-height: 0; }.tower-floor-visual { min-height: 132px; }.tower-floor-sketch { max-height: 128px; }
  .tower-floor-copy > header { gap: 9px; }.tower-floor-copy > header em { display: none; }.tower-floor-copy > p { font-size: 10px; }
  .tower-landmarks > div > a, .tower-landmarks > div > div { grid-template-columns: 98px 1fr 12px; }
  .tower-floor-archive-hero dl { grid-template-columns: repeat(2, 1fr); }.tower-floor-reading > div { grid-template-columns: 1fr; }.tower-floor-section { padding: 19px; }.tower-floor-archive-visual > span { font-size: 30px; }
  .tower-evidence-modal { width: calc(100vw - 16px); max-height: calc(100vh - 16px); padding: 20px 16px; }.tower-evidence-modal > footer { flex-direction: column-reverse; }.tower-evidence-modal > footer .button { width: 100%; justify-content: center; }
  .tower-research-queue-modal { width: calc(100vw - 16px); max-height: calc(100vh - 16px); padding: 20px 16px; }.tower-research-queue-modal > header dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }.tower-research-queue-group > header { align-items: flex-start; }.tower-research-queue-group li { grid-template-columns: 1fr; }.tower-research-queue-group li > span { width: max-content; }.tower-research-task-detail dl div { grid-template-columns: 1fr; }.tower-research-task-detail details li { grid-template-columns: 1fr; }.tower-research-task-detail details li span { justify-self: start; }
}

/* V0.19.23 personal folder */
.home-continue { margin: 12px 0; padding: 22px; overflow: hidden; background: radial-gradient(circle at 8% 0, color-mix(in srgb, var(--accent) 11%, transparent), transparent 30%), var(--surface); }
.home-continue > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 15px; }
.home-continue > header h2 { margin: 5px 0 4px; font-size: 19px; }
.home-continue > header p { margin: 0; color: var(--text-soft); font-size: 9px; line-height: 1.6; }
.home-continue > header > a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid var(--line); color: var(--text-soft); font-size: 8px; }
.home-continue > header > a:hover { color: var(--accent); border-color: var(--line-strong); }
.home-continue > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.home-continue > div > a { position: relative; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto 17px; align-items: center; gap: 10px; min-height: 91px; padding: 14px; border: 1px solid var(--line); color: var(--text); background: rgba(255,255,255,.012); overflow: hidden; }
.home-continue > div > a::after { content: ""; position: absolute; inset: auto -25px -48px auto; width: 90px; height: 90px; border: 1px solid var(--line); transform: rotate(45deg); }
.home-continue > div > a:hover, .home-continue > div > a.is-latest { border-color: color-mix(in srgb, var(--accent) 44%, var(--line)); background: color-mix(in srgb, var(--accent) 5%, var(--surface-raised)); }
.home-continue > div > a > i { position: relative; z-index: 1; padding: 5px 6px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); color: var(--accent); font: normal 7px monospace; }
.home-continue > div > a section { position: relative; z-index: 1; min-width: 0; }
.home-continue > div > a small { color: var(--accent); font: 7px monospace; }
.home-continue > div > a h3 { margin: 5px 0 4px; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.home-continue > div > a p { margin: 0; overflow: hidden; color: var(--muted); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.home-continue > div > a time { position: relative; z-index: 1; color: var(--muted); font-size: 7px; white-space: nowrap; }
.home-continue > div > a > svg { position: relative; z-index: 1; color: var(--accent); }

/* V0.19.25 personal reading progress */
.chapter-row.is-read { border-color: color-mix(in srgb, var(--success) 34%, var(--line)); }
.chapter-reading-badge { margin-left: auto; padding: 4px 7px; border: 1px solid var(--line); color: var(--muted); font: normal 7px monospace; white-space: nowrap; }
.chapter-reading-badge.is-complete { color: var(--success); border-color: color-mix(in srgb, var(--success) 38%, var(--line)); background: color-mix(in srgb, var(--success) 6%, transparent); }
.chapter-reading-badge + .chapter-bookmark-badge { margin-left: 0; }
.chapter-progress.is-complete strong, .chapter-progress.is-complete > span { color: var(--success); }
.reading-progress.is-personal { background: color-mix(in srgb, var(--accent) 3%, transparent); }
.reading-progress.is-personal > b { color: var(--accent); }
.reading-progress.is-personal.is-complete { border-color: color-mix(in srgb, var(--success) 35%, var(--line)); }
.reading-progress.is-personal.is-complete > span, .reading-progress.is-personal.is-complete > b { color: var(--success); }
.personal-reading-toggle { gap: 6px; }
.personal-reading-toggle.is-complete { color: var(--success); border-color: color-mix(in srgb, var(--success) 38%, var(--line)); background: color-mix(in srgb, var(--success) 6%, transparent); }
.branch-story-card.is-read { border-color: color-mix(in srgb, var(--success) 34%, var(--line)); }
.branch-story-card footer { display: grid; grid-template-columns: minmax(0, 1fr) auto 17px; align-items: center; gap: 9px; }
.branch-story-card footer > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.branch-story-card footer > svg { color: var(--accent); }
.branch-reading-state { color: var(--muted); font: normal 7px monospace; white-space: nowrap; }
.branch-reading-state.is-complete { color: var(--success); }
.branch-source-reader .branch-record-list { margin-top: 14px; }
.home-continue-progress { display: grid; gap: 4px; margin-top: 9px; }
.home-continue-progress > span { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font: 7px monospace; }
.home-continue-progress > span b, .home-continue-progress > span em { color: inherit; font: inherit; }
.home-continue-progress > i { height: 2px; overflow: hidden; background: rgba(255,255,255,.07); }
.home-continue-progress > i > b { height: 100%; display: block; background: linear-gradient(90deg, var(--accent), #806fe2); transition: width .18s var(--ease); }
.home-continue-progress.is-complete > span { color: var(--success); }
.home-continue-progress.is-complete > i > b { background: var(--success); }

.library-page { max-width: 1220px; }
.library-local-note { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 16px; margin-bottom: 12px; padding: 20px 22px; background: linear-gradient(110deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 58%), var(--surface); }
.library-local-note > div { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--line-strong); color: var(--accent); background: var(--surface-raised); }
.library-local-note p { display: grid; gap: 4px; margin: 0; }
.library-local-note p b { font-size: 12px; }
.library-local-note p span { color: var(--text-soft); font-size: 9px; line-height: 1.6; }
.library-local-note > strong { color: var(--accent); font: 26px monospace; }
.library-local-note > strong small { color: var(--muted); font: 8px sans-serif; }
.library-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.library-stats article { position: relative; display: grid; gap: 6px; min-height: 105px; padding: 20px; overflow: hidden; }
.library-stats article::after { content: ""; position: absolute; right: -22px; bottom: -32px; width: 88px; height: 88px; border: 1px solid var(--line); transform: rotate(45deg); }
.library-stats span, .library-stats small { color: var(--muted); font-size: 8px; }
.library-stats strong { color: var(--accent); font: 25px monospace; }
.library-toolbar { display: grid; grid-template-columns: minmax(260px, 1.15fr) minmax(320px, 1.4fr) minmax(220px, .8fr); align-items: end; gap: 15px; margin-bottom: 12px; padding: 18px 20px; }
.library-filter { display: grid; gap: 8px; }
.library-filter > span, .library-chapter-filter > span { color: var(--muted); font-size: 8px; }
.library-chapter-filter { display: grid; gap: 8px; }
.library-chapter-filter select { min-height: 39px; width: 100%; padding: 0 12px; border: 1px solid var(--line); border-radius: 0; color: var(--text); background: var(--surface-raised); font: inherit; font-size: 9px; }
.library-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.library-card { min-width: 0; display: grid; grid-template-rows: 1fr auto; padding: 0; overflow: hidden; }
.library-card[hidden], .library-empty[hidden] { display: none !important; }
.library-card-main { min-width: 0; display: grid; grid-template-columns: 44px minmax(0, 1fr) 18px; align-items: start; gap: 13px; padding: 20px; color: var(--text); }
.library-card-main:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.library-card-main > i { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--accent); background: var(--bg-soft); font-style: normal; }
.library-card-main > div { min-width: 0; }
.library-card-main span { color: var(--accent); font: 7px monospace; letter-spacing: .7px; }
.library-card-main h2 { margin: 6px 0 5px; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.library-card-main p { display: -webkit-box; margin: 0 0 8px; overflow: hidden; color: var(--text-soft); font-size: 9px; line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.library-card-main small { display: block; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.library-card-main > svg { align-self: center; color: var(--muted); }
.library-card footer { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 13px 9px 20px; border-top: 1px solid var(--line); background: rgba(255,255,255,.012); }
.library-card footer span { color: var(--muted); font-size: 7px; }
.library-card footer button, .library-recent > header button { min-height: 27px; padding: 0 9px; border: 1px solid var(--line); color: var(--text-soft); background: transparent; font-size: 8px; cursor: pointer; }
.library-card footer button:hover, .library-recent > header button:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.library-empty { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 150px; padding: 30px; color: var(--muted); }
.library-empty svg { color: var(--accent); }
.library-empty b { display: block; margin-bottom: 5px; color: var(--text); font-size: 12px; }
.library-empty p { margin: 0; font-size: 9px; line-height: 1.6; }
.library-recent { margin-top: 24px; padding: 22px; }
.library-recent > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.library-recent > header h2 { margin: 5px 0 4px; font-size: 18px; }
.library-recent > header p { margin: 0; color: var(--muted); font-size: 9px; }
.library-recent > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.library-recent > div > a { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto 15px; align-items: center; gap: 11px; padding: 13px; border: 1px solid var(--line); color: var(--text); background: rgba(255,255,255,.012); }
.library-recent > div > a:hover { border-color: var(--line-strong); background: color-mix(in srgb, var(--accent) 4%, transparent); }
.library-recent a > i { padding: 4px 6px; border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line)); color: var(--accent); font: normal 7px monospace; }
.library-recent a > div { min-width: 0; display: grid; gap: 4px; }
.library-recent a b, .library-recent a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.library-recent a b { font-size: 10px; }
.library-recent a span, .library-recent time { color: var(--muted); font-size: 7px; }
.library-recent a > svg { color: var(--accent); }
.library-recent-empty { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 13px; min-height: 100px; color: var(--muted); }
.library-recent-empty svg { color: var(--accent); }
.library-recent-empty p { display: grid; gap: 4px; margin: 0; }
.library-recent-empty b { color: var(--text); font-size: 10px; }
.library-recent-empty span { font-size: 8px; }

@media (max-width: 980px) {
  .home-continue > div { grid-template-columns: 1fr; }
  .library-toolbar { grid-template-columns: 1fr 1fr; }
  .library-toolbar .inline-search { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .reader-tools .personal-reading-toggle { display: inline-flex; }
  .library-stats, .library-list { grid-template-columns: 1fr 1fr; }
  .library-toolbar { grid-template-columns: 1fr; }
  .library-toolbar .inline-search { grid-column: auto; }
  .library-recent > div { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .home-continue { padding: 18px; }
  .home-continue > header { align-items: stretch; flex-direction: column; }
  .home-continue > header > a { align-self: flex-start; }
  .home-continue > div > a { grid-template-columns: auto minmax(0, 1fr) 16px; }
  .home-continue > div > a time { display: none; }
  .library-local-note { grid-template-columns: 42px 1fr; padding: 18px; }
  .library-local-note > div { width: 40px; height: 40px; }
  .library-local-note > strong { grid-column: 2; font-size: 20px; }
  .library-stats { grid-template-columns: 1fr 1fr; }
  .library-stats article { min-height: 92px; padding: 16px; }
  .library-list { grid-template-columns: 1fr; }
  .library-card-main { grid-template-columns: 40px minmax(0, 1fr) 16px; padding: 17px; }
  .library-card-main > i { width: 38px; height: 38px; }
  .library-card footer { padding-left: 17px; }
  .library-recent { padding: 18px; }
  .library-recent > header { flex-direction: column; }
  .library-recent > header button { align-self: flex-end; }
  .library-recent > div > a { grid-template-columns: auto minmax(0, 1fr) 14px; }
  .library-recent time { display: none; }
  .chapter-reading-badge { width: max-content; margin-left: 0; }
  .reader-tools { align-items: flex-start; gap: 10px; }
  .reader-tools > div { flex-wrap: wrap; justify-content: flex-end; }
}