/* ==========================================================
   CAT & CLOCKWORK / FIELD NOTES
   Full visual system rebuild — editorial archive, not a gold UI.
   Paper, ink, quiet botanical green, documentary photography.
   ========================================================== */

:root {
  --wrap: 1280px;
  --pad-sec: clamp(52px, 6.4vw, 92px);
  --radius: 12px;
  --radius-sm: 8px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --font-editorial: "Iowan Old Style", "Baskerville", "Songti SC", "STSong", "Noto Serif CJK SC", serif;
}

html[data-theme="light"] {
  --bg: #f2f0e8;
  --bg-2: #e9e9df;
  --surf: #faf9f3;
  --surf-2: #f4f3eb;
  --line: #d7d9ce;
  --line-soft: #e2e3d9;
  --text: #292e29;
  --text-2: #4c544d;
  --dim: #747b71;
  --dim-2: #959a8d;
  --accent: #687b69;
  --accent-deep: #465b4d;
  --accent-alt: #a16e58;
  --brass: var(--accent);
  --brass-soft: rgba(104, 123, 105, .11);
  --jade: #7b8f81;
  --shadow: 0 28px 70px -42px rgba(38, 44, 36, .25);
  --shadow-sm: 0 12px 32px -22px rgba(38, 44, 36, .2);
  --glass: rgba(247, 246, 238, .91);
  --scrim: rgba(29, 35, 30, .64);
  --grain-op: .018;
  color-scheme: light;
}
html[data-theme="dark"] {
  --bg: #202722;
  --bg-2: #28312b;
  --surf: #2c352e;
  --surf-2: #343e36;
  --line: #465147;
  --line-soft: #39443b;
  --text: #ece9df;
  --text-2: #c4c8bd;
  --dim: #a0a99d;
  --dim-2: #7a867b;
  --accent: #a5b19d;
  --accent-deep: #8d9f8f;
  --accent-alt: #c49a82;
  --brass: var(--accent);
  --brass-soft: rgba(165, 177, 157, .12);
  --jade: #8fa896;
  --shadow: 0 30px 80px -40px rgba(0, 0, 0, .52);
  --shadow-sm: 0 12px 34px -22px rgba(0, 0, 0, .38);
  --glass: rgba(34, 42, 36, .92);
  --scrim: rgba(11, 15, 12, .75);
  --grain-op: .022;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
html.is-locked { overflow: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans), "Microsoft YaHei", sans-serif;
  font-size: 15px;
  line-height: 1.72;
  letter-spacing: 0;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { line-height: 1.2; }
::selection { background: rgba(104, 123, 105, .25); color: var(--text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[hidden] { display: none !important; }
.dim { color: var(--dim); }
code { color: var(--accent-deep); background: var(--brass-soft); border-radius: 4px; padding: .12em .35em; }
.wrap { width: min(100% - 48px, var(--wrap)); margin-inline: auto; }
.grain { opacity: var(--grain-op); mix-blend-mode: multiply; }
#clockback, .gears { display: none !important; }

/* --- Floating navigation: 5 primary destinations + a real index --- */
.nav {
  position: fixed; z-index: 70; top: 15px; left: 50%; transform: translateX(-50%);
  width: min(1450px, calc(100% - 44px)); min-height: 66px;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: clamp(14px, 2vw, 34px); padding: 8px 10px 8px 17px;
  color: #2b312b; background: rgba(245, 244, 236, .91);
  border: 1px solid rgba(255, 255, 249, .62); border-radius: 15px;
  box-shadow: 0 12px 36px rgba(25, 31, 25, .12);
  backdrop-filter: blur(22px) saturate(112%); -webkit-backdrop-filter: blur(22px) saturate(112%);
  transition: background .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.nav::before { display: none; }
.nav.is-stuck { background: rgba(246, 245, 238, .97); border-color: #d8dbd0; box-shadow: 0 14px 34px rgba(28, 35, 28, .13); }
html[data-theme="dark"] .nav { color: #e9e8df; background: rgba(35, 43, 37, .94); border-color: rgba(255,255,255,.07); }
html[data-theme="dark"] .nav.is-stuck { background: rgba(35, 43, 37, .98); border-color: #475248; }
.nav-brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.nav-brand .mark { width: 31px; height: 31px; flex: none; color: var(--accent-deep); }
html[data-theme="dark"] .nav-brand .mark { color: #bdc7b5; }
.nav-brand:hover .mark { animation: folio-mark-turn .8s var(--ease-out); }
@keyframes folio-mark-turn { to { transform: rotate(90deg); } }
.brand-lockup { display: flex; flex-direction: column; justify-content: center; line-height: 1.2; min-width: 0; }
.nav-name { font-size: 15px; font-weight: 750; letter-spacing: .025em; white-space: nowrap; }
.brand-english { margin-top: 4px; color: #7c8276; font: 8px/1.2 var(--font-mono); letter-spacing: .11em; white-space: nowrap; }
.brand-english i { font-style: normal; opacity: .64; }
.nav-links { display: flex; align-items: center; justify-content: center; gap: clamp(2px, .45vw, 7px); min-width: 0; margin: 0; overflow: visible; }
.nav-links > a, .nav-more > summary {
  min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 7px clamp(7px, .75vw, 13px); border: 1px solid transparent; border-radius: 8px;
  color: #656e63; font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap;
  transition: color .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.nav-links > a:hover, .nav-more > summary:hover { color: #303b31; background: rgba(104, 123, 105, .08); }
.nav-links > a.is-active, .nav-links > a[aria-current="true"] { color: #354d3e; background: rgba(104, 123, 105, .13); border-color: rgba(104, 123, 105, .16); }
html[data-theme="dark"] .nav-links > a, html[data-theme="dark"] .nav-more > summary { color: #b3bbae; }
html[data-theme="dark"] .nav-links > a:hover, html[data-theme="dark"] .nav-more > summary:hover { color: #f0efe6; background: rgba(165,177,157,.1); }
html[data-theme="dark"] .nav-links > a.is-active, html[data-theme="dark"] .nav-links > a[aria-current="true"] { color: #e0e7d9; background: rgba(165,177,157,.13); border-color: rgba(165,177,157,.2); }
.nav-more { position: relative; flex: none; }
.nav-more > summary { list-style: none; cursor: pointer; user-select: none; }
.nav-more > summary::-webkit-details-marker { display: none; }
.nav-more > summary span { font-size: 13px; opacity: .7; transition: transform .2s var(--ease); }
.nav-more[open] > summary span { transform: rotate(180deg); }
.nav-more-panel {
  position: absolute; top: calc(100% + 15px); right: -6px; width: 248px; padding: 10px;
  color: var(--text); background: var(--surf); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); animation: menu-arrive .16s var(--ease-out);
}
@keyframes menu-arrive { from { opacity: 0; transform: translateY(-5px); } }
.nav-more-heading { display: flex; justify-content: space-between; gap: 10px; padding: 8px 9px 11px; border-bottom: 1px solid var(--line-soft); color: var(--dim); font-size: 10px; }
.nav-more-heading span:first-child { font-family: var(--font-mono); letter-spacing: .08em; }
.nav-more-panel a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px; border-radius: 7px; font-size: 12.5px; color: var(--text-2); }
.nav-more-panel a:hover, .nav-more-panel a[aria-current="true"] { background: var(--brass-soft); color: var(--accent-deep); }
html[data-theme="dark"] .nav-more-panel a:hover { color: var(--text); }
.nav-more-panel small { color: var(--dim-2); font: 10px var(--font-mono); }
.nav-actions { display: flex; align-items: center; gap: 4px; margin: 0; }
.icon-btn { width: 35px; min-width: 35px; height: 35px; padding: 0; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #687166; transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease); }
.icon-btn:hover { color: var(--accent-deep); background: rgba(104, 123, 105, .11); border-color: rgba(104,123,105,.12); }
html[data-theme="dark"] .icon-btn { color: #b4bcb0; }
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn .kbd { margin-left: 1px; padding: 3px 4px; border-color: rgba(104,123,105,.24); background: transparent; color: #6e776a; font-size: 9px; }
.nav-actions #hudBtn { display: none; }
html.is-booting .nav { opacity: 0; pointer-events: none; }

/* --- Hero: still cinematic, but image first and typography quieter --- */
.hero { position: relative; isolation: isolate; display: block; min-height: max(760px, 100svh); overflow: hidden; color: #f3f1e9; background: #27302a; }
.hero-bg { position: absolute; z-index: -4; inset: -3%; background-color: #303b32; background-position: center 54%; background-size: cover; background-repeat: no-repeat; filter: saturate(.48) brightness(.68) contrast(.98); transform: scale(1.035); animation: none !important; }
@keyframes hero-slow-pan { from { transform: scale(1.035) translate3d(0,0,0); } to { transform: scale(1.09) translate3d(-.7%,-.6%,0); } }
.hero-scrim { position: absolute; z-index: -3; inset: 0; background: linear-gradient(90deg, rgba(25,32,27,.94) 0%, rgba(25,32,27,.83) 39%, rgba(25,32,27,.48) 72%, rgba(25,32,27,.35) 100%), linear-gradient(180deg, rgba(15,20,17,.23) 0%, transparent 45%, rgba(17,23,19,.72) 100%); }
.hero-gl { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; opacity: .2; pointer-events: none; }
.hero-fx { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; opacity: .38; pointer-events: none; }
.hero-gears { display: none; }
.hero::before { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; opacity: .20; background-image: linear-gradient(rgba(239,238,224,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(239,238,224,.09) 1px, transparent 1px); background-size: 80px 80px; mask-image: linear-gradient(90deg, #000, transparent 77%); }
.hero::after { content: ""; position: absolute; z-index: 0; right: 7%; top: 18%; width: min(43vw, 650px); aspect-ratio: 1; border: 1px solid rgba(236,238,223,.13); border-radius: 50%; box-shadow: 0 0 0 30px rgba(236,238,223,.025), 0 0 0 92px rgba(236,238,223,.025); pointer-events: none; }
.hero-stage { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 355px); align-items: center; gap: clamp(32px, 8vw, 130px); min-height: max(760px, 100svh); padding-top: 124px; padding-bottom: 94px; }
.hero-copy { min-width: 0; padding: 36px 0 15px; }
.eyebrow { display: flex; align-items: center; gap: 10px; max-width: max-content; margin: 0 0 26px; color: rgba(242,241,231,.78); font-size: 11px; font-weight: 550; letter-spacing: .08em; }
.eyebrow .dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: #c3caba; box-shadow: 0 0 0 5px rgba(195,202,186,.10); animation: none; }
.hero-title { display: flex; flex-direction: column; align-items: flex-start; margin: 0; color: #f3f0e6; font-family: var(--font-editorial); font-size: clamp(76px, 9.8vw, 142px); font-weight: 700; letter-spacing: .025em; line-height: .91; text-shadow: 0 8px 36px rgba(0,0,0,.13); }
.hero-title-line { display: block; }
.hero-title-line-last { margin-top: .08em; color: #d3d9c9; }
.hero-title-mark { margin-left: .02em; color: #c59e86; }
.hero-wordmark { display: flex; flex-wrap: wrap; gap: 15px; align-items: center; margin: 26px 0 0; color: #c8d0bf; font: 10px/1.5 var(--font-mono); letter-spacing: .19em; }
.hero-wordmark span { padding-left: 14px; border-left: 1px solid rgba(237,238,225,.29); color: rgba(239,239,226,.53); letter-spacing: .11em; }
.hero-lede { max-width: 35em; margin: 22px 0 0; color: rgba(243,242,232,.79); font-size: clamp(15px, 1.25vw, 17px); font-weight: 400; line-height: 1.95; letter-spacing: .015em; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 23px; margin-top: 32px; }
.hero-action { min-height: 47px; display: inline-flex; align-items: center; justify-content: center; gap: 24px; padding: 11px 15px; border: 1px solid rgba(242,240,229,.26); font-size: 12.5px; font-weight: 600; transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); }
.hero-action:hover { transform: translateY(-2px); }
.hero-action-primary { background: #e3e4d8; border-color: #e3e4d8; color: #2d392f; }
.hero-action-primary:hover { background: #f2f0e6; border-color: #f2f0e6; }
.hero-action-secondary { border-color: transparent; padding-left: 2px; padding-right: 2px; color: rgba(244,242,232,.82); }
.hero-action-secondary:hover { color: #fff; }
.action-mark { font-size: 17px; font-weight: 400; line-height: 1; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 0; margin-top: 36px; border-top: 1px solid rgba(239,239,226,.2); padding-top: 17px; }
.hero-chip { display: inline-flex; align-items: baseline; flex-direction: row-reverse; justify-content: flex-end; gap: 8px; padding: 0 20px 0 0; margin-right: 20px; color: rgba(242,241,231,.63); border: 0; border-radius: 0; background: transparent; backdrop-filter: none; font-size: 11px; }
.hero-chip + .hero-chip { border-left: 1px solid rgba(239,239,226,.17); padding-left: 20px; }
.hero-chip b { color: #f3f0e6; font: 500 18px/1.1 var(--font-mono); letter-spacing: -.05em; }
.like-box { display: flex; align-items: center; flex-wrap: wrap; gap: 13px; margin-top: 21px; color: rgba(242,241,231,.56); font-size: 11.5px; }
.like-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 5px 11px; border: 1px solid rgba(244,242,231,.25); border-radius: 99px; color: rgba(244,242,231,.84); background: rgba(29,36,30,.22); font-size: 11.5px; transition: background .2s var(--ease), border-color .2s var(--ease); }
.like-btn:hover, .like-btn[aria-pressed="true"] { background: rgba(224,229,215,.14); border-color: rgba(224,229,215,.5); }
.like-heart { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.like-btn[aria-pressed="true"] .like-heart { fill: #cfaa91; stroke: #cfaa91; }
.like-num b { color: #f3f0e6; font-family: var(--font-mono); font-weight: 600; }
.like-hint { color: #cdb29f; }

.clockwork { position: relative; align-self: center; width: 100%; max-width: 355px; margin: 30px 0 8px; padding: 17px 18px 15px; border: 1px solid rgba(241,242,229,.23); border-radius: 6px; background: linear-gradient(145deg, rgba(43,52,44,.82), rgba(29,37,31,.72)); box-shadow: 0 28px 80px rgba(8,14,10,.22); backdrop-filter: blur(18px); text-align: left; }
.clock-head, .clock-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: rgba(238,240,225,.56); font: 9px/1.4 var(--font-mono); letter-spacing: .13em; }
.clock-live { display: inline-flex; align-items: center; gap: 7px; color: #d3dbca; }
.clock-live i { width: 5px; height: 5px; border-radius: 50%; background: #a8b8a3; box-shadow: 0 0 0 4px rgba(168,184,163,.12); }
.clock-art { position: relative; width: 100%; max-width: 220px; margin: 14px auto 6px; }
.clock-svg { display: block; width: 100%; height: auto; opacity: .83; }
.clock-art-caption { position: absolute; right: -31px; bottom: 26px; color: rgba(240,240,227,.42); font: 8px/1.7 var(--font-mono); letter-spacing: .08em; }
.clock-read { display: block; margin-top: 4px; padding: 13px 0 10px; border-top: 1px solid rgba(240,240,227,.14); }
.clock-time { display: block; color: #f2f0e6; font: 500 clamp(24px,2.5vw,34px)/1.1 var(--font-mono); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.clock-note { margin: 7px 0 15px; color: rgba(238,240,225,.51); font-size: 10px; }
.clock-footer { padding-top: 12px; border-top: 1px solid rgba(240,240,227,.14); color: rgba(238,240,225,.37); font-size: 8px; }
.hero-bottomline { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 20px; padding-top: 18px; margin-top: 1px; border-top: 1px solid rgba(240,240,229,.18); color: rgba(240,240,229,.5); font-size: 10px; letter-spacing: .06em; }
.hero-bottomline span:last-child { font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; }
.hero-frame { position: absolute; z-index: 2; top: 104px; left: max(24px, calc((100% - var(--wrap)) / 2)); right: max(24px, calc((100% - var(--wrap)) / 2)); display: flex; justify-content: space-between; gap: 20px; color: rgba(241,241,228,.42); font: 9px var(--font-mono); letter-spacing: .1em; pointer-events: none; }
.hero-cap { position: absolute; z-index: 3; right: 25px; top: 52%; margin: 0; color: rgba(242,240,228,.72); writing-mode: vertical-rl; font-size: 10px; }
.hero-cap span { color: rgba(242,240,228,.44); font: 9px var(--font-mono); }
.hero-gl-btn { position: absolute; z-index: 4; right: 24px; bottom: 22px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; color: rgba(240,240,228,.59); border: 1px solid rgba(240,240,228,.17); border-radius: 3px; background: rgba(22,28,23,.48); font-size: 10px; }
.hero-gl-btn .gl-dot { width: 5px; height: 5px; border-radius: 50%; background: #aab8a2; }
.hero-gl-btn b { color: rgba(240,240,228,.88); font-weight: 500; }
.enter-btn { position: absolute; z-index: 3; left: 50%; bottom: 22px; display: flex; align-items: center; gap: 13px; transform: translateX(-50%); padding: 9px 12px; border: 1px solid rgba(240,240,228,.18); border-radius: 99px; color: rgba(240,240,228,.63); background: rgba(25,32,27,.24); font-size: 10px; letter-spacing: .04em; white-space: nowrap; }
.enter-btn:hover { color: #fff; border-color: rgba(240,240,228,.5); }
.enter-arrow { font-size: 15px; }

/* --- Shared full-bleed editorial view canvas --- */
main { position: relative; }
main > section[hidden] { display: none !important; }
main > section.page-section { display: block; min-height: 100svh; padding: 0; justify-content: initial; }
.page-section { position: relative; overflow: clip; background: var(--bg); color: var(--text); }
.page-section::before { content: ""; position: absolute; top: 0; left: max(24px, calc((100% - var(--wrap)) / 2)); right: max(24px, calc((100% - var(--wrap)) / 2)); height: 1px; background: var(--line); opacity: .75; }
.page-section::after { content: "C·C"; position: absolute; right: max(24px, calc((100% - var(--wrap)) / 2)); top: 45%; color: color-mix(in srgb, var(--accent) 13%, transparent); font: clamp(38px,6vw,90px)/1 var(--font-editorial); letter-spacing: -.1em; writing-mode: vertical-rl; pointer-events: none; }
.section-inner { position: relative; z-index: 1; min-height: inherit; padding-top: clamp(116px, 13vh, 150px); padding-bottom: clamp(66px, 8vh, 100px); }
.sec-overview, .sec-gallery, .sec-builds, .sec-sponsor { background: var(--bg); }
.sec-mods, .sec-download, .sec-creators, .sec-start, .sec-stamps { background: var(--bg-2); }
.sec-graph, .sec-wiki, .sec-changelog, .sec-submit { background: var(--bg); }
.sec-overview::before, .sec-gallery::before { background: var(--accent); opacity: .26; }
.sec-head { position: relative; display: block; max-width: 900px; margin: 0 0 clamp(32px,4.5vw,58px); padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.sec-head::after { content: "ARCHIVE / INDEX"; position: absolute; top: 2px; right: 0; color: var(--dim-2); font: 9px/1.4 var(--font-mono); letter-spacing: .16em; }
.sec-head .sec-num { display: none !important; }
.sec-head h2 { margin: 0; padding-right: 160px; color: var(--text); font-family: var(--font-editorial); font-size: clamp(38px, 5.2vw, 62px); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; }
.sec-sub { max-width: 58ch; margin: 13px 0 0; color: var(--dim); font-size: 13px; line-height: 1.85; }
.sec-sub b { color: var(--accent-deep); font-weight: 650; }

/* Overview — a clean stats ledger, rather than generic dashboard tiles. */
.stat-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 0; margin: 0 0 25px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat { min-width: 0; min-height: 144px; display: flex; flex-direction: column; justify-content: center; padding: 22px 22px 20px 20px; background: transparent; border: 0; border-radius: 0; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat-num { display: flex; align-items: baseline; gap: 6px; color: var(--text); font: 500 clamp(27px,3vw,40px)/1.1 var(--font-mono); letter-spacing: -.065em; }
.stat-num em { font: normal 11px var(--font-sans); color: var(--accent); letter-spacing: 0; }
.stat-label { margin-top: 12px; color: var(--text-2); font-size: 12px; font-weight: 650; }
.stat-note { margin-top: 3px; color: var(--dim-2); font-size: 10.5px; }
.split { display: grid; grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr); gap: 18px; }
.panel { min-width: 0; padding: 22px 24px; border: 1px solid var(--line); border-radius: 5px; background: var(--surf); box-shadow: none; }
.panel-title { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; margin-bottom: 20px; color: var(--text); font-size: 14px; font-weight: 700; }
.panel-title small { color: var(--dim-2); font-size: 10px; font-weight: 400; letter-spacing: .02em; }
.donut-wrap { display: grid; grid-template-columns: minmax(120px,.75fr) minmax(0,1.25fr); align-items: center; gap: 16px; }
.donut { width: min(100%, 210px); margin-inline: auto; overflow: visible; filter: saturate(.58); }
.dn-center { fill: var(--text) !important; font-family: var(--font-mono); }
.dn-center-sub { fill: var(--dim) !important; font-family: var(--font-sans); }
.donut-legend { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.donut-legend li { display: grid; grid-template-columns: 7px minmax(42px,.7fr) minmax(0,1fr); align-items: center; gap: 8px; font-size: 11px; }
.lg-dot { width: 6px; height: 6px; border-radius: 50%; filter: saturate(.5); }
.lg-name { color: var(--text-2); }
.lg-val { color: var(--dim); text-align: right; font: 10px var(--font-mono); white-space: nowrap; }
.bars { display: flex; flex-direction: column; gap: 11px; }
.bars li { display: grid; grid-template-columns: 26px minmax(90px,.9fr) minmax(50px,1.2fr) 52px; align-items: center; gap: 10px; }
.bar-ico { width: 25px; height: 25px; object-fit: cover; border-radius: 4px; background: var(--bg-2); }
.bar-ico.ph { display: grid; place-items: center; color: var(--dim); font-size: 10px; }
.bar-name { overflow: hidden; color: var(--text-2); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.bar-track { height: 4px; overflow: hidden; background: var(--line-soft); border-radius: 2px; }
.bar-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--accent); transition: width .6s var(--ease-out); }
.bar-val { color: var(--dim); font: 10px var(--font-mono); text-align: right; }

/* Mod archive: readable search bar, intentional breathing room, calm cards. */
.sec-mods .section-inner { padding-top: 126px; }
.toolbar { position: sticky; top: 91px; z-index: 20; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 11px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--surf) 94%, transparent); box-shadow: 0 9px 22px -19px rgba(25,35,25,.35); backdrop-filter: blur(16px); }
.search { display: flex; align-items: center; gap: 10px; flex: 1 1 280px; min-width: min(100%,220px); height: 43px; padding: 0 13px; border: 1px solid var(--line); border-radius: 5px; background: var(--bg); }
.search:focus-within { border-color: color-mix(in srgb, var(--accent) 58%, var(--line)); box-shadow: 0 0 0 3px var(--brass-soft); }
.search svg { width: 16px; height: 16px; color: var(--dim); flex: none; }
.search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 12.5px; }
.search input::placeholder { color: var(--dim-2); }
.toolbar-right { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.seg { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 5px; background: var(--bg); }
.seg button { min-height: 29px; padding: 5px 9px; border-radius: 3px; color: var(--dim); font-size: 11px; }
.seg button.is-on { color: var(--accent-deep); background: var(--brass-soft); }
.seg-actions { border-color: transparent; background: transparent; }
.seg-actions button { border: 1px solid var(--line); background: var(--surf); }
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 4px; background: transparent; color: var(--dim); font-size: 11px; transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease); }
.chip:hover { color: var(--text); border-color: var(--accent); }
.chip[aria-pressed="true"] { color: var(--accent-deep); border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); background: var(--brass-soft); }
.chip .c-count { color: var(--dim-2); font: 10px var(--font-mono); }
.chip .c-dot { width: 6px; height: 6px; border-radius: 50%; filter: saturate(.48); }
.result-line { display: flex; align-items: center; gap: 10px; margin: 19px 2px 12px; color: var(--dim); font-size: 11px; }
.result-line span { color: var(--text-2); font: 11px var(--font-mono); }
.sig-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin: 17px 0; }
.sig { display: flex; flex-direction: column; gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 5px; background: var(--surf); text-align: left; transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); }
.sig:hover { transform: translateY(-2px); border-color: var(--accent); background: var(--surf-2); box-shadow: none; }
.sig-top { display: flex; align-items: center; gap: 9px; }
.sig-ico { width: 35px; height: 35px; flex: none; border-radius: 5px; object-fit: cover; background: var(--bg-2); }
.sig-name { display: block; color: var(--text); font-size: 12px; font-weight: 700; }
.sig-en { display: block; color: var(--dim-2); font: 9px var(--font-mono); }
.sig-note { color: var(--dim); font-size: 10.5px; line-height: 1.65; }
.mod-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(245px,1fr)); gap: 9px; }
.mod-card { position: relative; display: grid; grid-template-columns: 40px minmax(0,1fr); grid-template-rows: auto auto; align-items: center; gap: 5px 11px; min-width: 0; padding: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: var(--surf); text-align: left; contain: content; transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease); }
.mod-card::before { position: absolute; top: 12px; bottom: 12px; left: 0; width: 2px; background: var(--gc, var(--accent)); opacity: .6; filter: saturate(.45); }
.mod-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 48%, var(--line)); background: var(--surf-2); }
.mod-card::after { display: none; }
.mod-ico { grid-row: span 2; width: 40px; height: 40px; border: 1px solid var(--line-soft); border-radius: 5px; object-fit: cover; background: var(--bg-2); box-shadow: none !important; }
.mod-ico.ph { display: grid; place-items: center; color: var(--dim); font: 13px var(--font-mono); }
.mod-body { min-width: 0; }
.mod-name { display: block; overflow: hidden; color: var(--text); font-size: 12px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.mod-meta { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--dim-2); font-size: 9px; }
.mod-meta .m-en { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 9px var(--font-mono); }
.mod-meta .m-size { flex: none; color: var(--dim); font: 9px var(--font-mono); }
.mod-note { grid-column: 2; display: -webkit-box; overflow: hidden; color: var(--dim); font-size: 10.5px; line-height: 1.65; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mod-tag { border-radius: 3px; background: var(--brass-soft); color: var(--accent-deep); font-size: 9px; padding: 2px 5px; }
mark { border-radius: 2px; background: rgba(196,154,130,.26); color: inherit; }
.mod-empty { padding: 55px 0; color: var(--text-2); text-align: center; }
.more-wrap { display: flex; justify-content: center; margin-top: 24px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 37px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 5px; color: var(--text-2); background: var(--surf); font-size: 11px; transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease); }
.btn:hover { color: var(--accent-deep); border-color: var(--accent); transform: none; }
.btn.tiny { min-height: 31px; padding: 5px 9px; font-size: 10.5px; }
.btn.ghost { background: transparent; }
.btn[aria-pressed="true"] { color: var(--accent-deep); border-color: var(--accent); background: var(--brass-soft); }
.kbd { padding: 3px 5px; border: 1px solid var(--line); border-radius: 3px; background: var(--bg-2); color: var(--dim); font: 9px var(--font-mono); }

/* Dependency map: restrained dark instrument panel, letting the network read. */
.graph-shell { position: relative; height: min(70vh, 650px); min-height: 430px; overflow: hidden; border: 1px solid #455148; border-radius: 5px; background: radial-gradient(ellipse at 52% 35%, #344239 0%, #252f28 54%, #202822 100%); box-shadow: var(--shadow-sm); }
#graphCanvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y pinch-zoom; }
#graphCanvas.is-drag { cursor: grabbing; }
.graph-ui { position: absolute; inset: 0; padding: 12px; pointer-events: none; }
.graph-tools { display: flex; flex-wrap: wrap; gap: 5px; pointer-events: auto; }
.graph-tools .btn { background: rgba(34,43,36,.82); border-color: rgba(231,234,222,.18); color: rgba(236,237,226,.8); backdrop-filter: blur(12px); }
.graph-tools .btn:hover, .graph-tools .btn[aria-pressed="true"] { background: rgba(213,222,203,.14); color: #f1f0e5; border-color: rgba(213,222,203,.35); }
.graph-legend { position: absolute; bottom: 13px; left: 13px; display: flex; flex-wrap: wrap; gap: 6px 12px; max-width: 65%; color: rgba(234,237,224,.62); font-size: 10px; }
.graph-legend i { width: 6px; height: 6px; border-radius: 50%; filter: saturate(.55); }
.graph-hint { position: absolute; right: 13px; bottom: 14px; color: rgba(234,237,224,.48); font: 9px var(--font-mono); }
.graph-tip { padding: 8px 10px; border: 1px solid rgba(233,237,224,.2); border-radius: 4px; color: #f2f1e8; background: rgba(35,44,37,.94); font-size: 11px; backdrop-filter: blur(12px); }
.graph-tip .gt-sub { color: #b8c2b3; font: 9px var(--font-mono); }
html[data-theme="light"] .graph-shell { border-color: #c8d1c5; background: radial-gradient(ellipse at 52% 35%, #f8f8f1 0%, #edf0e8 56%, #e2e8df 100%); }
html[data-theme="light"] .graph-tools .btn { background: rgba(250,251,246,.94); border-color: rgba(67,82,67,.22); color: #354338; }
html[data-theme="light"] .graph-tools .btn:hover,
html[data-theme="light"] .graph-tools .btn[aria-pressed="true"] { background: rgba(105,130,105,.13); color: #263e2c; border-color: rgba(71,103,75,.42); }
html[data-theme="light"] .graph-legend { color: rgba(43,57,45,.78); }
html[data-theme="light"] .graph-hint { color: rgba(43,57,45,.66); }
html[data-theme="light"] .graph-tip { border-color: rgba(57,76,59,.22); color: #2a372c; background: rgba(249,250,244,.97); }
html[data-theme="light"] .graph-tip .gt-sub { color: #637366; }
.graph-stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 9px; margin-top: 13px; }
.gs { padding: 13px 15px; border: 1px solid var(--line); border-radius: 4px; background: var(--surf); color: var(--dim); font-size: 11px; }
.gs b { display: block; margin-bottom: 4px; color: var(--text); font: 500 16px var(--font-mono); }

/* Screenshot archive: asymmetric contact sheet with captions always discoverable. */
.gallery-grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 12px; margin-top: 22px; }
.shot { position: relative; display: block; grid-column: span 4; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: var(--surf-2); cursor: zoom-in; text-align: left; transition: transform .28s var(--ease), border-color .28s var(--ease); }
.shot:nth-child(7n + 1), .shot:nth-child(7n + 5) { grid-column: span 7; aspect-ratio: 16 / 9; }
.shot:nth-child(7n + 2), .shot:nth-child(7n + 6) { grid-column: span 5; aspect-ratio: 16 / 9; }
.shot:hover { transform: translateY(-3px); border-color: var(--accent); }
.shot img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.78); opacity: 0; transition: opacity .45s var(--ease), transform .65s var(--ease-out), filter .4s var(--ease); }
.shot img.is-loaded { opacity: 1; }
.shot:hover img { transform: scale(1.035); filter: saturate(.95); }
.shot .s-cap { position: absolute; inset: auto 0 0; display: flex; align-items: end; padding: 38px 15px 13px; opacity: 1; transform: none; color: #f6f3e7; background: linear-gradient(180deg, transparent, rgba(24,31,25,.76)); font-size: 11px; text-align: left; }
.shot .s-cap::before { content: "FIELD NOTE  /  "; margin-right: 5px; color: rgba(242,240,226,.55); font: 8px var(--font-mono); letter-spacing: .1em; flex: none; }

/* World save downloads: three archival entries instead of shiny sales cards. */
.dl-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.dl-card { position: relative; min-height: 200px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 19px; border: 1px solid var(--line); border-radius: 5px; background: var(--surf); transition: transform .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease); }
.dl-card::after { content: "↗"; position: absolute; right: 18px; bottom: 16px; color: var(--accent); font-size: 20px; transition: transform .2s var(--ease); }
.dl-card:hover { transform: translateY(-3px); border-color: var(--accent); background: var(--surf-2); }
.dl-card:hover::after { transform: translate(3px,-3px); }
.dl-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 13px; border-bottom: 1px solid var(--line-soft); }
.dl-badge { color: var(--dim); font: 9px var(--font-mono); letter-spacing: .09em; text-transform: uppercase; }
.dl-go { color: var(--accent-deep); font-size: 10px; }
.dl-title { color: var(--text); font-family: var(--font-editorial); font-size: 23px; line-height: 1.25; }
.dl-note { color: var(--dim); font-size: 11px; }
.dl-note b { color: var(--accent-deep); font: 600 12px var(--font-mono); }

/* Wiki, coordinates and people — paper tabs, archive records, flat geometry. */
.wiki-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.wiki-search { flex: 1; min-width: 0; padding: 13px 15px; border: 1px solid var(--line); border-radius: 4px; color: var(--text); background: var(--surf); outline: 0; font-size: 12px; }
.wiki-search:focus { border-color: var(--accent); }
.wiki-search::placeholder { color: var(--dim-2); }
.wiki-stat { flex: none; min-width: 5em; color: var(--dim); text-align: right; font: 10px var(--font-mono); }
.wiki-body { display: flex; flex-direction: column; gap: 8px; }
.wiki-sec { border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: var(--surf); }
.wiki-sec summary, .wiki-sec-head { display: flex; align-items: center; gap: 12px; padding: 15px 17px; background: transparent; cursor: pointer; }
.wiki-sec-name { color: var(--text); font-size: 13px; font-weight: 700; }
.wiki-sec-count { margin-left: auto; color: var(--dim); font: 10px var(--font-mono); }
.wiki-sec-arrow { color: var(--accent); }
.wiki-items { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 0 12px 12px; }
.wiki-item { min-width: 0; padding: 12px; border: 1px solid var(--line-soft); border-radius: 3px; background: var(--bg); }
.wiki-item-title { color: var(--text); font-size: 12px; font-weight: 700; }
.wiki-item-body { margin-top: 5px; color: var(--dim); font-size: 11px; line-height: 1.8; }
.wiki-line { color: var(--dim); font-size: 11px; line-height: 1.8; }
.wiki-line.is-title { color: var(--text-2); font-size: 12px; }
.wiki-line.is-sub { margin-top: 8px; color: var(--text); font-weight: 700; }
.wiki-empty { padding: 46px 0 52px; text-align: center; font-size: 13px; line-height: 1.9; }
.wiki-line.is-link a { color: var(--accent-deep); overflow-wrap: anywhere; }
.build-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(270px,1fr)); gap: 13px; }
.build-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: var(--surf); transition: border-color .22s var(--ease), transform .22s var(--ease); }
.build-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: none; }
.build-shot-wrap { position: relative; background: var(--bg-2); }
.build-shot { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; filter: saturate(.78); }
.build-shot.is-ph { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; color: var(--dim); border-bottom: 1px dashed var(--line); }
.build-ph-mark { color: var(--accent); font: 30px var(--font-editorial); }
.build-ph-text { font-size: 10px; }
.build-meta { padding: 15px 16px 17px; }
.build-name { color: var(--text); font-family: var(--font-editorial); font-size: 20px; }
.build-coord { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0; padding: 9px 10px; border: 1px solid var(--line-soft); border-radius: 3px; background: var(--bg); }
.coord-text { color: var(--accent-deep); font: 10px var(--font-mono); overflow-wrap: anywhere; }
.coord-copy { flex: none; width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 3px; color: var(--dim); background: var(--surf); }
.coord-copy:hover { color: var(--accent-deep); border-color: var(--accent); }
.build-dim { display: inline-block; margin-bottom: 6px; color: var(--dim-2); font-size: 10px; }
.build-note { margin: 0; color: var(--dim); font-size: 11px; line-height: 1.8; }
.creator-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(170px,1fr)); gap: 12px; }
.creator-card { overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: var(--surf); transition: transform .22s var(--ease), border-color .22s var(--ease); }
.creator-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: none; }
.creator-stage { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: radial-gradient(ellipse at 50% 38%, var(--surf-2), var(--bg-2) 74%); }
.creator-stage::after { content: ""; position: absolute; inset: 11%; border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); border-radius: 50%; pointer-events: none; }
.creator-skin { position: relative; z-index: 1; display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.creator-hint { position: absolute; z-index: 2; left: 0; right: 0; bottom: 8px; color: var(--dim); text-align: center; font: 8px var(--font-mono); letter-spacing: .08em; opacity: 0; pointer-events: none; }
.creator-card:hover .creator-hint { opacity: 1; }
.creator-meta { display: flex; align-items: center; gap: 9px; padding: 11px; border-top: 1px solid var(--line-soft); }
.creator-face { width: 32px; height: 32px; flex: none; object-fit: cover; border: 1px solid var(--line-soft); border-radius: 4px; background: var(--bg-2); }
.creator-face.ph { display: grid; place-items: center; color: var(--dim); }
.creator-id { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.creator-name { overflow: hidden; color: var(--text); font-size: 11.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.creator-tag { color: var(--dim-2); font-size: 9.5px; }
.creator-tag::before { content: "• "; color: var(--accent); }

/* Change log and help/install pages */
.log-groups { display: grid; gap: 28px; }
.log-group { min-width: 0; }
.log-group-title { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; color: var(--text); font-size: 15px; font-weight: 700; }
.log-group-title::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--accent); }
.log { display: flex; flex-direction: column; gap: 9px; }
.log-item details { border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: var(--surf); }
.log-item details[open], .log-item.is-now details { border-color: color-mix(in srgb, var(--accent) 44%, var(--line)); }
.log-item summary { display: grid; grid-template-columns: auto auto minmax(0,1fr) auto; align-items: center; gap: 13px; padding: 15px 17px; cursor: pointer; list-style: none; }
.log-item summary::-webkit-details-marker { display: none; }
.log-item summary:hover { background: var(--surf-2); }
.log-ver { color: var(--accent-deep); font: 12px var(--font-mono); }
.log-tag { padding: 3px 6px; border: 1px solid var(--line); border-radius: 3px; color: var(--dim); font-size: 9px; }
.log-brief { color: var(--text-2); font-size: 11.5px; }
.log-arrow { color: var(--dim-2); }
.log-body { padding: 0 20px 17px; color: var(--dim); }
.log-note { margin: 8px 0; font-size: 11px; }
.log-note b { color: var(--text-2); }
.log-list { padding-left: 20px; list-style: decimal; }
.log-list > li { margin: 6px 0; font-size: 11px; }
.log-list > li::marker { color: var(--accent); }
.log-sub { padding-left: 17px; list-style: disc; }
.log-sub > li { margin: 3px 0; font-size: 10.5px; }
.req-wrap { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(280px,.9fr); gap: 14px; margin-bottom: 22px; }
.req-panel { padding: 20px; }
.req-table { width: 100%; border-collapse: collapse; font-size: 11px; text-align: left; }
.req-table th { color: var(--dim); font-weight: 600; }
.req-table th, .req-table td { padding: 10px 8px; border-bottom: 1px solid var(--line-soft); }
.req-table td { color: var(--text-2); }
.req-tip { margin: 13px 0 0; color: var(--dim); font-size: 10px; line-height: 1.8; }
.hw-form { display: grid; gap: 11px; }
.hw-form label { display: grid; gap: 5px; color: var(--dim); font-size: 11px; }
.hw-form select { width: 100%; min-height: 39px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; color: var(--text); background: var(--bg); font-size: 11px; }
.hw-out { margin-top: 14px; padding: 13px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--text-2); font-size: 11px; }
.faq { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 22px; border-top: 1px solid var(--line); }
.faq-item { padding: 17px 0; border-bottom: 1px solid var(--line); }
.faq-item h4 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 7px; color: var(--text); font-size: 12.5px; }
.faq-item h4::before { content: "Q"; color: var(--accent); font: 10px var(--font-mono); }
.faq-item p { margin: 0; color: var(--dim); font-size: 11px; line-height: 1.85; }
.faq-item code { font-size: 10px; }
.two-col { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.big-card { min-width: 0; padding: 26px; border: 1px solid var(--line); border-radius: 5px; background: var(--surf); }
.big-card-title { margin-bottom: 15px; color: var(--text); font-family: var(--font-editorial); font-size: 24px; }
.num-list { padding-left: 20px; margin-bottom: 18px; list-style: decimal; }
.num-list li { margin-top: 5px; color: var(--text-2); font-size: 12px; }
.num-list li::marker { color: var(--accent); }
.big-card-note { color: var(--dim); font-size: 11px; line-height: 1.85; }
.mail-link { display: inline-block; max-width: 100%; padding-bottom: 4px; border-bottom: 1px solid var(--line); color: var(--accent-deep); font: 12px var(--font-mono); overflow-wrap: anywhere; }
.mail-link:hover { border-color: var(--accent); }
.card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.pill-btn { display: inline-flex; align-items: center; justify-content: center; padding: 9px 14px; border: 1px solid var(--accent); border-radius: 4px; background: var(--accent-deep); color: #f4f2e8; font-size: 11px; transition: background .18s var(--ease), transform .18s var(--ease); }
.pill-btn:hover { transform: translateY(-1px); background: #344c3b; }
.pill-btn.is-ghost { background: transparent; color: var(--text-2); border-color: var(--line); }
.pill-btn.is-ghost:hover { color: var(--accent-deep); border-color: var(--accent); }
.sponsor-card { position: relative; max-width: 850px; margin: 0 auto; padding: clamp(26px,5vw,55px); border: 1px solid var(--line); border-radius: 5px; background: var(--surf); text-align: left; }
.sponsor-card::before { content: "THANK YOU / 感谢每一次支持"; display: block; margin-bottom: 23px; color: var(--dim); font: 9px var(--font-mono); letter-spacing: .12em; }
.sponsor-text { max-width: 38em; margin: 0 0 25px; color: var(--text-2); font-family: var(--font-editorial); font-size: clamp(21px,2.6vw,29px); line-height: 1.6; }
.sponsor-btn { display: inline-flex; align-items: center; gap: 22px; padding: 12px 17px; border: 1px solid var(--accent-deep); border-radius: 4px; background: var(--accent-deep); color: #f5f3e8; font-size: 12px; transition: transform .2s var(--ease), background .2s var(--ease); }
.sponsor-btn:hover { transform: translateY(-2px); background: #344b3b; box-shadow: none; }
.sponsor-arrow { font-size: 16px; }
.sponsor-foot { margin: 12px 0 0; color: var(--dim); font-size: 10px; }
.sponsor-list-wrap { margin-top: 35px; padding-top: 18px; border-top: 1px solid var(--line); }
.sponsor-list-title { color: var(--dim); font-size: 10px; }
.sponsor-list { display: flex; flex-wrap: wrap; gap: 8px; }

/* Stamp wall — visitor marks as a soft community ledger. */
.stamp-wall { padding: 23px; border: 1px solid var(--line); border-radius: 5px; background: var(--surf); }
.stamp-picker { display: flex; flex-wrap: wrap; gap: 9px; }
.stamp-btn { min-width: 74px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 5px; background: var(--bg); transition: border-color .2s var(--ease), transform .2s var(--ease), background .2s var(--ease); }
.stamp-btn:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--accent); box-shadow: none; }
.stamp-btn:disabled { cursor: default; opacity: .45; }
.stamp-btn.is-mine { border-color: var(--accent); background: var(--brass-soft); }
.stamp-emoji { font-size: 25px; line-height: 1; }
.stamp-emoji.sm { font-size: 15px; }
.stamp-label { color: var(--dim); font-size: 10px; }
.stamp-tip { margin: 14px 0 0; color: var(--dim); font-size: 11px; }
.stamp-stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 10px 22px; margin-top: 20px; }
.stamp-row { display: flex; align-items: center; gap: 9px; color: var(--dim); font-size: 11px; }
.stamp-name { flex: none; }
.stamp-row.is-mine .stamp-name { color: var(--accent-deep); }
.stamp-bar { flex: 1; min-width: 30px; height: 4px; overflow: hidden; background: var(--line-soft); border-radius: 2px; }
.stamp-bar i { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width .5s var(--ease-out); }
.stamp-num { min-width: 2.3em; color: var(--text-2); text-align: right; font: 11px var(--font-mono); }
.stamp-recent-wrap { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.stamp-recent-label { color: var(--dim); font-size: 10px; }
.stamp-recent { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.stamp-chip { display: inline-flex; align-items: center; justify-content: center; width: 31px; height: 31px; border: 1px solid var(--line-soft); border-radius: 4px; background: var(--bg); font-size: 15px; opacity: 0; animation: chip-in .4s var(--ease) forwards; }

/* Brand footer and shared overlays. */
.foot { margin-top: 0; padding: 27px 0 30px; border-top: 1px solid var(--line); background: var(--bg); }
.foot-inner { display: flex; align-items: end; justify-content: space-between; gap: 25px; }
.foot-signature { display: flex; flex-direction: column; gap: 8px; }
.foot-title { display: flex; align-items: center; gap: 12px; color: var(--text); font-family: var(--font-editorial); font-size: 23px; font-weight: 700; }
.foot-seal { display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid var(--line); border-radius: 50%; color: var(--accent); font: 11px var(--font-sans); }
.foot-signature p { margin: 0; color: var(--dim-2); font: 8px var(--font-mono); letter-spacing: .12em; }
.foot-links { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; color: var(--dim); font-size: 10px; text-align: right; }
.foot-links a { color: var(--accent-deep); }
.foot-links .dim { color: var(--dim-2); }

.iconwall { position: fixed; inset: 20px; z-index: 96; display: flex; flex-direction: column; padding: 17px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); box-shadow: var(--shadow); }
.iw-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.iw-head h3 { color: var(--text); font-size: 15px; }
.iw-head h3 b { color: var(--accent-deep); font: 15px var(--font-mono); }
.iw-close { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 4px; color: var(--text-2); font-size: 11px; line-height: 1; }
.iw-close svg { display: block; flex: 0 0 auto; width: 15px; height: 15px; }
.iw-body { display: grid; grid-template-columns: repeat(auto-fill,minmax(76px,1fr)); gap: 7px; overflow: auto; padding-top: 14px; }
.iw-cell { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 5px; border: 1px solid var(--line-soft); border-radius: 4px; background: var(--surf); }
.iw-cell img { width: 34px; height: 34px; object-fit: contain; }
.iw-name { width: 100%; overflow: hidden; color: var(--dim); font-size: 9px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.drawer-scrim, .palette, .lightbox { position: fixed; inset: 0; z-index: 100; }
.drawer-scrim { background: var(--scrim); backdrop-filter: blur(6px); }
.drawer { position: fixed; z-index: 101; top: 0; right: 0; bottom: 0; width: min(610px,100%); overflow: auto; border-left: 1px solid var(--line); background: var(--bg); box-shadow: var(--shadow); }
.drawer-close { position: sticky; top: 13px; z-index: 3; float: right; width: 36px; height: 36px; margin: 13px 13px 0 0; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surf); line-height: 0; }
.drawer-close svg { display: block; width: 18px; height: 18px; }
.drawer-body { padding: 26px 28px 55px; }
.dw-name { font-family: var(--font-editorial); font-size: 30px; }
.dw-en { color: var(--dim); font: 10px var(--font-mono); }
.dw-desc, .dw-quote { color: var(--text-2); font-size: 13px; line-height: 1.9; }
.dw-quote { padding-left: 14px; border-left: 2px solid var(--accent); font-family: var(--font-editorial); font-size: 17px; }
.dw-sec { margin-top: 25px; padding-top: 17px; border-top: 1px solid var(--line); }
.dw-sec h4 { margin-bottom: 10px; font-size: 12px; }
.kv { display: grid; grid-template-columns: 82px minmax(0,1fr); gap: 8px 13px; font-size: 11px; }
.kv dt { color: var(--dim); }
.kv dd { margin: 0; color: var(--text-2); overflow-wrap: anywhere; }
.dep-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dep-chip, .badge { padding: 4px 7px; border: 1px solid var(--line); border-radius: 3px; color: var(--text-2); background: var(--surf); font-size: 10px; }
.badge.brass { color: var(--accent-deep); background: var(--brass-soft); border-color: color-mix(in srgb, var(--accent) 25%, var(--line)); }
.dw-links { display: flex; flex-wrap: wrap; gap: 8px; }
.dw-links a { padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; color: var(--text-2); font-size: 11px; }
.dw-file { color: var(--dim-2); font: 10px var(--font-mono); overflow-wrap: anywhere; }
.palette { display: flex; justify-content: center; padding-top: min(13vh,100px); background: var(--scrim); backdrop-filter: blur(7px); }
.palette-box { width: min(660px,calc(100% - 28px)); max-height: 68vh; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surf); box-shadow: var(--shadow); }
.palette-input { display: flex; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid var(--line); }
.palette-input svg { width: 18px; height: 18px; color: var(--dim); }
.palette-input input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 13px; }
.palette-list { overflow-y: auto; padding: 7px; }
.palette-list li { border-radius: 4px; }
.palette-list button { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px; border-radius: 4px; color: var(--text-2); text-align: left; font-size: 12px; }
.palette-list li.is-on button { color: var(--accent-deep); background: var(--brass-soft); }
.palette-list .p-kind { padding: 2px 5px; border: 1px solid var(--line); border-radius: 3px; color: var(--dim); font: 9px var(--font-mono); }
.palette-list .p-sub { margin-left: auto; color: var(--dim-2); font: 9px var(--font-mono); }
.palette-ico { width: 24px; height: 24px; border-radius: 3px; object-fit: cover; }
.palette-empty { padding: 25px; color: var(--dim); text-align: center; font-size: 12px; }
.toast { position: fixed; z-index: 130; left: 50%; bottom: 25px; transform: translateX(-50%); max-width: calc(100% - 30px); padding: 10px 15px; border: 1px solid var(--line); border-radius: 5px; background: var(--glass); color: var(--text); box-shadow: var(--shadow); font-size: 11px; backdrop-filter: blur(14px); }
.help { position: fixed; z-index: 105; inset: 0; display: flex; align-items: center; justify-content: center; padding: 18px; background: var(--scrim); backdrop-filter: blur(5px); }
.help-box { width: min(650px,100%); max-height: 82vh; overflow: auto; padding: 26px; border: 1px solid var(--line); border-radius: 7px; background: var(--surf); box-shadow: var(--shadow); }
.help-box h3 { margin-bottom: 15px; font-family: var(--font-editorial); font-size: 23px; }
.help-box h3:not(:first-child) { margin-top: 25px; }
.help-grid { display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 12px; align-items: center; }
.help-grid p { margin: 0; color: var(--dim); font-size: 11px; }
.help-grid > div { display: flex; gap: 4px; }
.help-box .btn { margin-top: 22px; }
.hud { position: fixed; right: 14px; bottom: 14px; z-index: 119; min-width: 190px; padding: 12px; border: 1px solid var(--line); border-radius: 5px; background: var(--glass); box-shadow: var(--shadow-sm); backdrop-filter: blur(12px); }
.hud div { display: flex; justify-content: space-between; gap: 15px; color: var(--dim); font-size: 10px; }
.hud b { color: var(--accent-deep); font: 11px var(--font-mono); }
.lightbox { display: grid; grid-template-columns: 64px minmax(0,1fr) 64px; align-items: center; background: rgba(22,29,23,.94); backdrop-filter: blur(7px); }
.lb-figure { display: flex; flex-direction: column; align-items: center; gap: 13px; width: 100%; min-width: 0; max-width: 100%; margin: 0; }
.lb-imgwrap { display: grid; place-items: center; width: 100%; height: min(76vh, calc(100dvh - 150px)); min-height: 0; overflow: hidden; border-radius: 3px; background: #172019 center/cover no-repeat; }
.lb-imgwrap img { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; }
.lb-figure figcaption { display: flex; align-items: baseline; gap: 13px; color: rgba(244,242,230,.9); font-size: 12px; }
.lb-figure figcaption .lb-meta { color: rgba(244,242,230,.5); font: 10px var(--font-mono); }
.lb-nav, .lb-close { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid rgba(244,242,230,.2); border-radius: 50%; color: rgba(244,242,230,.8); line-height: 0; }
.lb-nav svg, .lb-close svg { display: block; flex: none; width: 19px; height: 19px; }
.lb-nav:hover, .lb-close:hover { border-color: rgba(244,242,230,.6); color: #fff; background: rgba(255,255,255,.08); }
.lb-close { position: absolute; top: 17px; right: 17px; }
.lb-play { padding: 7px 10px; border: 1px solid rgba(244,242,230,.2); border-radius: 4px; color: rgba(244,242,230,.8); font-size: 10px; }
.lb-progress { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: rgba(255,255,255,.08); }
.lb-progress i { display: block; height: 100%; width: 0; background: #c4cbb8; }

/* Boot screen, polished to match the new identity. */
.boot { background: radial-gradient(ellipse at 50% 43%, #374338 0%, #252f27 45%, #1e2620 100%); color: #f2f0e5; }
.boot-mark { color: #c6cdbb; }
.boot-title { color: #eeeade; font-family: var(--font-editorial); font-weight: 700; letter-spacing: .035em; }
.boot-wordmark { color: rgba(234,236,222,.55); font-family: var(--font-mono); letter-spacing: .22em; }
.boot-line { background: rgba(235,237,224,.17); }
.boot-line i { background: #c2cab7; }
.boot-state { color: rgba(238,239,227,.56); }
.boot-pct { color: #d3dac8; }
.boot-skip-btn { color: rgba(238,239,227,.6); }

/* Reduced motion / accessibility */
.reveal { opacity: 0; transform: translateY(12px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); }
html.is-ready .reveal:not(.is-in) { animation: folio-reveal-fallback .3s .8s forwards; }
@keyframes folio-reveal-fallback { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* --- Tablet and mobile: nav is an orderly two-row system --- */
@media (max-width: 1120px) {
  .nav { grid-template-columns: auto minmax(0,1fr) auto; gap: 10px; width: calc(100% - 28px); padding-left: 12px; }
  .brand-english i { display: none; }
  .nav-links { justify-content: flex-end; gap: 0; }
  .nav-links > a, .nav-more > summary { padding-inline: 7px; font-size: 11px; }
  .nav-actions { gap: 1px; }
  .nav-actions .icon-btn { width: 31px; min-width: 31px; height: 32px; }
  .nav-actions .kbd { display: none; }
  .hero-stage { gap: 36px; grid-template-columns: minmax(0,1fr) minmax(230px,300px); }
  .clock-art-caption { right: -22px; }
}
@media (max-width: 900px) {
  .nav { top: 10px; grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "brand actions" "links links"; gap: 6px 10px; padding: 8px 10px 7px 13px; border-radius: 11px; }
  .nav-brand { grid-area: brand; }
  .nav-actions { grid-area: actions; }
  .nav-links { grid-area: links; justify-content: flex-start; width: 100%; gap: 4px; padding: 2px 0 1px; overflow-x: auto; overflow-y: visible; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links > a, .nav-more > summary { min-height: 31px; flex: none; padding: 6px 10px; border: 1px solid var(--line-soft); border-radius: 4px; background: rgba(255,255,255,.22); font-size: 11px; }
  html[data-theme="dark"] .nav-links > a, html[data-theme="dark"] .nav-more > summary { background: rgba(255,255,255,.025); }
  .nav-more-panel { position: fixed; top: 104px; right: 14px; width: min(300px,calc(100vw - 28px)); max-height: min(70vh,530px); overflow: auto; }
  .hero-stage { min-height: max(760px,100svh); grid-template-columns: minmax(0,1fr) minmax(210px,260px); gap: 22px; padding-top: 145px; padding-bottom: 93px; }
  .hero-title { font-size: clamp(70px,10.5vw,104px); }
  .clockwork { padding: 13px; }
  .clock-art-caption { display: none; }
  .hero-frame { top: 117px; }
  .hero-frame span:last-child { display: none; }
  .section-inner { padding-top: 125px; }
  .stat { padding-inline: 13px; }
  .stat-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
  .stat-num { font-size: clamp(22px,3vw,32px); }
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .wrap { width: calc(100% - 34px); }
  .nav { top: max(7px,env(safe-area-inset-top)); width: calc(100% - 14px); grid-template-columns: minmax(0,1fr) auto; padding: 8px 8px 6px 10px; }
  .nav-brand { gap: 7px; }
  .nav-brand .mark { width: 25px; height: 25px; }
  .nav-name { font-size: 13px; letter-spacing: 0; }
  .brand-english { margin-top: 3px; font-size: 7px; letter-spacing: .08em; }
  .nav-actions { gap: 1px; }
  .nav-actions .icon-btn { width: 29px; min-width: 29px; height: 30px; border-radius: 6px; }
  .nav-actions .icon-btn svg { width: 15px; height: 15px; }
  .nav-actions #helpBtn { display: none; }
  .nav-links { gap: 4px; mask-image: linear-gradient(90deg,#000 0%,#000 93%,transparent 100%); -webkit-mask-image: linear-gradient(90deg,#000 0%,#000 93%,transparent 100%); }
  .nav-links > a, .nav-more > summary { min-height: 29px; padding: 5px 9px; font-size: 10.5px; }
  .nav-more-panel { top: calc(98px + env(safe-area-inset-top)); right: 7px; width: min(290px,calc(100vw - 14px)); }
  .hero { min-height: 100svh; }
  .hero-bg { background-position: 61% center; filter: saturate(.42) brightness(.55) contrast(.96); }
  .hero-scrim { background: linear-gradient(180deg,rgba(25,32,27,.78) 0%,rgba(25,32,27,.65) 29%,rgba(25,32,27,.77) 63%,rgba(25,32,27,.96) 100%), linear-gradient(90deg,rgba(25,32,27,.32),transparent); }
  .hero::after { right: -30%; top: 12%; width: 83vw; box-shadow: 0 0 0 20px rgba(236,238,223,.025), 0 0 0 55px rgba(236,238,223,.025); }
  .hero-frame { top: 111px; left: 18px; right: 18px; font-size: 7px; }
  .hero-stage { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 22px; width: 100%; min-height: 100svh; padding: calc(145px + env(safe-area-inset-top)) 17px calc(73px + env(safe-area-inset-bottom)); }
  .hero-copy { padding: 6px 0 0; }
  .eyebrow { gap: 8px; margin-bottom: 20px; font-size: 10px; line-height: 1.65; letter-spacing: .025em; }
  .hero-title { font-size: clamp(64px,15vw,94px); line-height: .94; }
  .hero-wordmark { flex-wrap: wrap; gap: 7px 10px; margin-top: 19px; font-size: 8px; letter-spacing: .13em; }
  .hero-wordmark span { padding-left: 10px; font-size: 7.5px; }
  .hero-lede { margin-top: 17px; font-size: 12px; line-height: 1.9; }
  .hero-actions { gap: 7px 15px; margin-top: 23px; }
  .hero-action { min-height: 41px; gap: 13px; padding: 9px 11px; font-size: 11px; }
  .hero-action-secondary { padding-inline: 0; }
  .hero-chips { margin-top: 24px; padding-top: 13px; }
  .hero-chip { gap: 5px; margin-right: 10px; padding-right: 10px; font-size: 9px; }
  .hero-chip + .hero-chip { padding-left: 10px; }
  .hero-chip b { font-size: 14px; }
  .like-box { gap: 9px; margin-top: 16px; font-size: 10px; }
  .like-btn { min-height: 30px; padding: 5px 9px; font-size: 10px; }
  .clockwork { display: block !important; width: 100%; max-width: none; margin: 0; padding: 11px 12px 10px; border-radius: 5px; }
  .clock-head { font-size: 8px; }
  .clock-art { width: 95px; height: 95px; margin: 4px auto 0; }
  .clock-read { padding: 10px 0 6px; margin-top: 0; text-align: center; }
  .clock-time { font-size: 22px; }
  .clock-note { margin: 4px 0 10px; text-align: center; font-size: 9px; }
  .clock-footer { padding-top: 8px; font-size: 7px; }
  .hero-bottomline { display: none; }
  .hero-cap { display: none; }
  .hero-gl-btn { right: 10px; bottom: 11px; padding: 5px 7px; font-size: 8px; }
  .enter-btn { left: 15px; bottom: calc(10px + env(safe-area-inset-bottom)); transform: none; padding: 6px 9px; border-color: transparent; background: transparent; font-size: 9px; }
  .enter-btn:hover { transform: none; }
  .section-inner { width: calc(100% - 34px); padding-top: calc(122px + env(safe-area-inset-top)); padding-bottom: 48px; }
  .page-section::before { left: 17px; right: 17px; }
  .page-section::after { right: 5px; top: 33%; font-size: 38px; opacity: .55; }
  .sec-head { display: block; margin-bottom: 27px; padding-bottom: 19px; }
  .sec-head .sec-num { display: none !important; }
  .sec-head h2 { padding-right: 0; font-size: clamp(34px,9vw,47px); }
  .sec-head::after { top: 44px; right: 0; font-size: 7px; }
  .sec-sub { margin-top: 10px; font-size: 11px; line-height: 1.8; }
  .stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .stat { min-height: 108px; padding: 15px 13px; }
  .stat:nth-child(odd) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .stat:last-child { grid-column: 1 / -1; min-height: 90px; }
  .stat-num { font-size: 29px; }
  .stat-label { margin-top: 8px; font-size: 11px; }
  .stat-note { font-size: 9px; }
  .panel { padding: 16px 14px; }
  .panel-title { display: block; margin-bottom: 15px; font-size: 12px; }
  .panel-title small { display: block; margin-top: 5px; }
  .donut-wrap { grid-template-columns: minmax(100px,.7fr) minmax(0,1.3fr); gap: 10px; }
  .donut-legend { gap: 8px; }
  .donut-legend li { grid-template-columns: 6px minmax(35px,.7fr) minmax(0,1fr); gap: 5px; font-size: 9px; }
  .lg-val { font-size: 8px; }
  .bars { gap: 9px; }
  .bars li { grid-template-columns: 22px minmax(70px,.9fr) minmax(28px,1fr) 43px; gap: 6px; }
  .bar-ico { width: 21px; height: 21px; }
  .bar-name, .bar-val { font-size: 9px; }
  .toolbar { top: 109px; gap: 7px; padding: 8px; }
  .search { flex-basis: 100%; height: 39px; }
  .search input { font-size: 11px; }
  .toolbar-right { width: 100%; justify-content: flex-start; }
  .seg button { padding: 5px 7px; font-size: 10px; }
  .seg-actions { flex-wrap: wrap; padding: 0; }
  .seg-actions button { padding-inline: 8px; }
  .chips { gap: 6px; margin-top: 12px; }
  .chip { padding: 6px 8px; font-size: 10px; }
  .sig-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
  .sig { gap: 9px; padding: 9px; }
  .sig-ico { width: 29px; height: 29px; }
  .sig-note { font-size: 9.5px; }
  .mod-grid { grid-template-columns: repeat(1,minmax(0,1fr)); gap: 7px; }
  .mod-card { grid-template-columns: 35px minmax(0,1fr); gap: 4px 9px; padding: 10px; }
  .mod-ico { width: 35px; height: 35px; }
  .mod-name { font-size: 11.5px; }
  .mod-note { font-size: 10px; }
  .graph-shell { height: 57vh; min-height: 390px; }
  .graph-ui { padding: 8px; }
  .graph-tools { gap: 4px; }
  .graph-tools .btn { padding: 5px 6px; font-size: 9px; }
  .graph-legend { max-width: 100%; right: 10px; bottom: 35px; font-size: 8px; }
  .graph-hint { right: 10px; bottom: 10px; font-size: 7px; }
  .graph-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .gs { padding: 10px; font-size: 9px; }
  .gs b { font-size: 12px; }
  .gallery-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
  .shot, .shot:nth-child(n) { grid-column: span 1; aspect-ratio: 4/3; }
  .shot:nth-child(7n + 1) { grid-column: span 2; aspect-ratio: 16/9; }
  .shot .s-cap { padding: 28px 8px 7px; font-size: 9px; }
  .shot .s-cap::before { display: none; }
  .dl-grid { grid-template-columns: 1fr; gap: 8px; }
  .dl-card { min-height: 148px; padding: 14px; }
  .dl-title { font-size: 21px; }
  .wiki-bar { flex-direction: column; align-items: stretch; gap: 8px; }
  .wiki-search { padding: 11px; font-size: 11px; }
  .wiki-stat { text-align: left; }
  .wiki-items { grid-template-columns: 1fr; }
  .wiki-sec summary, .wiki-sec-head { padding: 12px; }
  .build-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .build-meta { padding: 10px; }
  .build-name { font-size: 16px; }
  .build-coord { align-items: flex-start; padding: 7px; }
  .coord-text { font-size: 8px; }
  .build-note { font-size: 10px; }
  .creator-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .creator-meta { gap: 7px; padding: 8px; }
  .creator-face { width: 28px; height: 28px; }
  .creator-name { font-size: 10px; }
  .creator-tag { font-size: 8px; }
  .creator-hint { opacity: 1; font-size: 7px; }
  .log-item summary { grid-template-columns: auto auto minmax(0,1fr) auto; gap: 6px; padding: 11px; }
  .log-ver { font-size: 10px; }
  .log-tag { font-size: 8px; }
  .log-brief { font-size: 9px; }
  .log-body { padding: 0 12px 13px; }
  .req-wrap { grid-template-columns: 1fr; gap: 10px; }
  .req-panel { padding: 14px; }
  .req-table { font-size: 9px; }
  .req-table th, .req-table td { padding: 8px 5px; }
  .hw-form select { font-size: 10px; }
  .faq { grid-template-columns: 1fr; }
  .faq-item { padding: 14px 0; }
  .faq-item h4 { font-size: 11.5px; }
  .faq-item p { font-size: 10.5px; }
  .two-col { grid-template-columns: 1fr; gap: 9px; }
  .big-card { padding: 18px; }
  .big-card-title { font-size: 21px; }
  .sponsor-card { padding: 22px 17px; }
  .sponsor-text { font-size: 20px; }
  .stamp-wall { padding: 14px; }
  .stamp-picker { gap: 7px; }
  .stamp-btn { flex: 1 1 68px; min-width: 0; padding: 10px 5px; }
  .stamp-emoji { font-size: 22px; }
  .stamp-label { font-size: 9px; }
  .stamp-stats { grid-template-columns: 1fr; }
  .foot-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .foot-links { align-items: flex-start; text-align: left; }
  .foot-title { font-size: 21px; }
  .iconwall { inset: 7px; padding: 10px; }
  .iw-body { grid-template-columns: repeat(auto-fill,minmax(58px,1fr)); gap: 5px; }
  .iw-cell img { width: 28px; height: 28px; }
  .lightbox { grid-template-columns: 39px minmax(0,1fr) 39px; }
  .lb-nav { width: 32px; height: 32px; font-size: 20px; }
  .lb-imgwrap img { max-height: 65vh; }
  .lb-close { top: 8px; right: 8px; width: 35px; height: 35px; }
  /* 播放按钮使用图片下方的正常排版，不沿用旧版左上角定位。 */
  .drawer-body { padding: 24px 17px 42px; }
  .dw-name { font-size: 25px; }
  .help-box { padding: 20px 16px; }
  .help-grid { grid-template-columns: 87px minmax(0,1fr); gap: 9px; }
  .palette { padding-top: 10vh; }
  .palette-box { max-height: 76vh; }
  .hero-gl, .hero-fx { opacity: .18; }
}
@media (max-width: 380px) {
  .hero-stage { padding-top: calc(136px + env(safe-area-inset-top)); gap: 17px; }
  .hero-title { font-size: 59px; }
  .hero-actions { gap: 8px 12px; }
  .hero-action { padding-inline: 9px; font-size: 10px; }
  .hero-chip { margin-right: 7px; padding-right: 7px; }
  .hero-chip + .hero-chip { padding-left: 7px; }
  .section-inner { width: calc(100% - 28px); }
  .stat { padding-inline: 10px; }
  .build-grid { grid-template-columns: 1fr; }
  .build-shot { aspect-ratio: 16/8; }
}

/* Specificity guardrails for older component rules in the retained JS foundation. */
html[data-theme="light"] body { background: var(--bg); --grid-line: rgba(70,91,77,.045); --vignette: rgba(30,40,30,.025); }
body::before { background-size: 64px 64px; opacity: .72; }
html[data-theme="light"] .hero-scrim { background: linear-gradient(90deg, rgba(25,32,27,.94) 0%, rgba(25,32,27,.83) 39%, rgba(25,32,27,.48) 72%, rgba(25,32,27,.35) 100%), linear-gradient(180deg, rgba(15,20,17,.23) 0%, transparent 45%, rgba(17,23,19,.72) 100%); }
html[data-theme="light"] .clockwork { border-color: rgba(241,242,229,.23); background: linear-gradient(145deg, rgba(43,52,44,.82), rgba(29,37,31,.72)); }
html[data-theme="light"] .boot { background: radial-gradient(ellipse at 50% 43%, #374338 0%, #252f27 45%, #1e2620 100%); color: #f2f0e5; }
html[data-theme="light"] .boot-mark { color: #c6cdbb; }
html[data-theme="light"] .boot-title { color: #eeeade; }
html[data-theme="light"] .boot-wordmark { color: rgba(234,236,222,.55); }
html[data-theme="light"] .boot-pct { color: #d3dac8; }
html[data-theme="dark"] .boot { background: radial-gradient(ellipse at 50% 43%, #374338 0%, #252f27 45%, #1e2620 100%); color: #f2f0e5; }

/* Secondary index visibly indicates when the current route lives inside it. */
.nav-more.has-current > summary {
  color: var(--accent-deep);
  background: var(--brass-soft);
  border-color: color-mix(in srgb, var(--accent) 19%, transparent);
}
html[data-theme="dark"] .nav-more.has-current > summary { color: var(--text); }

/* Quiet the remaining foundation accents that still used the former bright-gold palette. */
.boot-line { background: rgba(195,202,186,.16); }
.boot-line i { background: #a5b19d; box-shadow: 0 0 10px rgba(165,177,157,.24); }
.hw-out.is-good .hw-verdict b { color: #819781; }
.hw-out.is-warn .hw-verdict b { color: #ad9b73; }
.hw-out.is-bad .hw-verdict b { color: #b78378; }

/* Bugfix: keep the hero image colour and crop stable; no animated pan/fade cycling. */
.hero-bg { animation: none !important; transition: none !important; }
html:not(.is-booting) .hero-bg { animation: none !important; }

/* ==========================================================
   Field Notes 05 — stable ambient-gradient hero + open full nav
   ========================================================== */

/* All thirteen destinations are visible as direct links, never hidden in a menu. */
.nav {
  top: 12px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: min(1450px, calc(100% - 32px));
  min-height: 0;
  height: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "brand actions" "links links";
  align-items: center;
  align-content: center;
  gap: 7px 18px;
  padding: 10px 15px 9px;
  border-radius: 13px;
}
.nav-brand { grid-area: brand; min-width: 0; }
.nav-actions { grid-area: actions; }
.nav-links {
  grid-area: links;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  mask-image: none;
  -webkit-mask-image: none;
}
.nav-links > a {
  flex: 0 0 auto;
  min-height: 29px;
  padding: 5px 9px;
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: 11.5px;
  white-space: nowrap;
}
.nav-links > a.is-active::after { display: none; }
.nav-name { display: inline !important; }
.nav-more, .nav-more-panel { display: none !important; }

/* The hero uses a soft, procedural colour haze — no screenshot is loaded as wallpaper. */
.hero-bg {
  position: absolute;
  z-index: -4;
  inset: -12%;
  overflow: hidden;
  background-color: #252d28;
  background-image:
    radial-gradient(ellipse at 22% 28%, rgba(104, 125, 104, .42) 0%, rgba(104, 125, 104, 0) 45%),
    radial-gradient(ellipse at 80% 26%, rgba(91, 105, 125, .34) 0%, rgba(91, 105, 125, 0) 47%),
    radial-gradient(ellipse at 70% 82%, rgba(139, 117, 101, .22) 0%, rgba(139, 117, 101, 0) 44%),
    linear-gradient(125deg, #202822 0%, #29322d 44%, #282c30 100%);
  background-size: 150% 150%, 155% 155%, 150% 150%, 100% 100%;
  background-position: 0% 20%, 100% 10%, 75% 100%, center;
  background-repeat: no-repeat;
  filter: none;
  transform: scale(1.02);
  animation: cc-haze-drift 58s ease-in-out infinite alternate !important;
  transition: none !important;
  will-change: background-position, transform;
}
.hero-bg::before,
.hero-bg::after {
  content: "";
  position: absolute;
  display: block;
  width: min(62vw, 900px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(105px);
  mix-blend-mode: screen;
  will-change: transform, opacity, filter;
}
.hero-bg::before {
  left: -8%;
  top: 2%;
  background: radial-gradient(circle, rgba(119, 143, 117, .27) 0%, rgba(119, 143, 117, .12) 38%, transparent 70%);
  opacity: .68;
  animation: cc-haze-left 67s ease-in-out infinite alternate;
}
.hero-bg::after {
  right: -5%;
  bottom: -10%;
  background: radial-gradient(circle, rgba(112, 129, 151, .22) 0%, rgba(112, 129, 151, .10) 42%, transparent 72%);
  opacity: .62;
  animation: cc-haze-right 79s ease-in-out infinite alternate;
}
@keyframes cc-haze-drift {
  0% { background-position: 0% 20%, 100% 10%, 75% 100%, center; transform: scale(1.02); }
  50% { background-position: 16% 28%, 84% 23%, 60% 86%, center; transform: scale(1.04); }
  100% { background-position: 28% 14%, 70% 36%, 48% 70%, center; transform: scale(1.03); }
}
@keyframes cc-haze-left {
  0% { transform: translate3d(-2%, 0, 0) scale(.94); filter: blur(105px) hue-rotate(0deg); opacity: .56; }
  50% { transform: translate3d(4%, 3%, 0) scale(1.06); filter: blur(120px) hue-rotate(8deg); opacity: .72; }
  100% { transform: translate3d(9%, -1%, 0) scale(1.02); filter: blur(110px) hue-rotate(15deg); opacity: .63; }
}
@keyframes cc-haze-right {
  0% { transform: translate3d(3%, 1%, 0) scale(1.02); filter: blur(110px) hue-rotate(0deg); opacity: .52; }
  50% { transform: translate3d(-5%, -4%, 0) scale(.95); filter: blur(125px) hue-rotate(-7deg); opacity: .68; }
  100% { transform: translate3d(-8%, 2%, 0) scale(1.08); filter: blur(105px) hue-rotate(-13deg); opacity: .58; }
}
.hero-scrim {
  background:
    linear-gradient(90deg, rgba(20, 26, 22, .70) 0%, rgba(20, 26, 22, .45) 45%, rgba(20, 26, 22, .28) 100%),
    linear-gradient(180deg, rgba(13, 18, 15, .25) 0%, transparent 43%, rgba(15, 20, 17, .60) 100%);
}
html[data-theme="light"] .hero-scrim,
html[data-theme="dark"] .hero-scrim {
  background:
    linear-gradient(90deg, rgba(20, 26, 22, .70) 0%, rgba(20, 26, 22, .45) 45%, rgba(20, 26, 22, .28) 100%),
    linear-gradient(180deg, rgba(13, 18, 15, .25) 0%, transparent 43%, rgba(15, 20, 17, .60) 100%);
}
.hero-gl { display: none !important; }
.hero-gl-btn { display: none !important; }
.hero-cap { display: none !important; }
.hero-fx { opacity: .12 !important; }

/* Keep the first CTA above decorative canvases and give it a stable hit target. */
.hero-stage, .hero-copy, .hero-actions { position: relative; z-index: 3; }
.hero-action-primary { position: relative; z-index: 5; pointer-events: auto; touch-action: manipulation; }
.like-btn { touch-action: manipulation; }

@media (max-width: 1120px) {
  .nav { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand actions" "links links"; gap: 6px 12px; }
  .nav-links { justify-content: flex-start; flex-wrap: wrap; overflow: visible; }
  .nav-links > a { padding-inline: 7px; font-size: 11px; }
}
@media (max-width: 760px) {
  .nav {
    top: max(7px, env(safe-area-inset-top));
    width: calc(100% - 14px);
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand actions" "links links";
    gap: 6px 8px;
    padding: 8px 8px 7px 10px;
    max-height: none;
  }
  .nav-brand { gap: 6px; }
  .nav-brand .mark { width: 24px; height: 24px; }
  .brand-english { font-size: 7px; letter-spacing: .04em; }
  .brand-english i { display: none; }
  .nav-actions { gap: 1px; }
  .nav-actions .icon-btn { width: 28px; min-width: 28px; height: 29px; }
  .nav-actions #helpBtn { display: none; }
  .nav-links {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 3px;
    padding: 0;
    overflow: visible;
    mask-image: none;
    -webkit-mask-image: none;
  }
  .nav-links > a {
    min-height: 27px;
    flex: 0 0 auto;
    padding: 4px 6px;
    border-radius: 5px;
    font-size: 10px;
    line-height: 1.2;
  }
  .hero-stage { padding-top: calc(180px + env(safe-area-inset-top)); }
  .hero-bg { inset: -10%; filter: none; }
  .hero-bg::before, .hero-bg::after { width: 100vw; filter: blur(85px); }
  .hero-scrim,
  html[data-theme="light"] .hero-scrim,
  html[data-theme="dark"] .hero-scrim {
    background:
      linear-gradient(180deg, rgba(20, 26, 22, .55) 0%, rgba(20, 26, 22, .42) 31%, rgba(20, 26, 22, .58) 70%, rgba(20, 26, 22, .82) 100%),
      linear-gradient(90deg, rgba(20, 26, 22, .24), transparent 90%);
  }
  .hero-fx { opacity: .07 !important; }
}
@media (max-width: 380px) {
  .nav { gap: 5px 5px; padding-inline: 6px; }
  .nav-name { display: inline !important; font-size: 12px; }
  .brand-english { display: none; }
  .nav-links > a { font-size: 9.5px; padding-inline: 5px; }
  .hero-stage { padding-top: calc(192px + env(safe-area-inset-top)); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg, .hero-bg::before, .hero-bg::after {
    animation: none !important;
    transition: none !important;
  }
  .hero-bg { background-position: 18% 28%, 84% 23%, 60% 86%, center; }
}


/* ==========================================================
   Field Notes 05 — mobile hero separation and dynamic nav clearance
   ========================================================== */
@media (max-width: 760px) {
  /* The clock inherited absolute positioning from desktop, making it overlap the like panel. */
  .hero-stage > .clockwork {
    position: relative !important;
    inset: auto !important;
    right: auto !important;
    bottom: auto !important;
    align-self: stretch;
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    margin: 0;
    box-sizing: border-box;
    z-index: 3;
  }

  /* The nav wraps onto several rows; measure its real height in router.js. */
  .page-section .section-inner {
    padding-top: max(calc(122px + env(safe-area-inset-top)), calc(var(--cc-nav-clearance, 165px) + 12px));
  }

  .hero-stage {
    padding-top: max(calc(145px + env(safe-area-inset-top)), calc(var(--cc-nav-clearance, 165px) + 22px));
  }
}
@media (max-width: 380px) {
  .hero-stage {
    padding-top: max(calc(192px + env(safe-area-inset-top)), calc(var(--cc-nav-clearance, 165px) + 22px));
  }
}

/* The route view starts at page top, so scroll targets must clear the fixed nav too. */
#main > section.page-section { scroll-margin-top: calc(var(--cc-nav-clearance, 120px) + 8px); }


/* ==========================================================
   Field Notes 06 — overview overflow, graph contrast, gallery fit
   ========================================================== */
.split, .split > .panel { min-width: 0; }
.panel-title { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.panel-title small { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.bars { width: 100%; min-width: 0; }
.bars li { min-width: 0; grid-template-columns: 22px minmax(0, 1fr) minmax(28px, .8fr) 46px; gap: 6px; }
.bars .bar-name { width: auto; min-width: 0; max-width: 100%; flex: initial; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bars .bar-track { width: 100%; min-width: 0; flex: initial; }
.bars .bar-val { width: auto; min-width: 0; max-width: 100%; flex: initial; white-space: nowrap; }
.lightbox .lb-figure { min-width: 0; width: 100%; max-width: 100%; }
.lightbox .lb-imgwrap { width: 100%; }

@media (max-width: 760px) {
  .sec-overview .panel { min-width: 0; max-width: 100%; overflow: hidden; padding: 15px 12px; }
  .sec-overview .panel-title { display: block; line-height: 1.55; overflow-wrap: anywhere; }
  .sec-overview .panel-title small { display: block; margin-top: 4px; font-size: 10.5px; line-height: 1.55; }
  .sec-overview .bars li { grid-template-columns: 21px minmax(0, 1fr) minmax(22px, .72fr) 44px; gap: 5px; }
  .sec-overview .bars .bar-name, .sec-overview .bars .bar-val { font-size: 9px; }
  .lightbox { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, auto); align-content: center; }
  .lightbox .lb-figure { grid-column: 1 / -1; align-self: center; }
  .lightbox .lb-imgwrap { height: min(68svh, calc(100dvh - 178px)); max-height: 68svh; }
  .lightbox .lb-imgwrap img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; }
  .lightbox .lb-figure figcaption { width: 100%; max-width: 100%; flex-wrap: wrap; justify-content: center; line-height: 1.5; }
}
@media (max-width: 380px) {
  .sec-overview .panel { padding-inline: 10px; }
  .sec-overview .bars li { grid-template-columns: 19px minmax(0, 1fr) minmax(18px, .6fr) 42px; gap: 4px; }
  .sec-overview .bars .bar-name, .sec-overview .bars .bar-val { font-size: 8.5px; }
  .lightbox .lb-imgwrap { height: min(64svh, calc(100dvh - 170px)); }
}


/* Field Notes 07 — compact mobile module composition legend */
@media (max-width: 760px) {
  .sec-overview .donut-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
    gap: 12px;
    width: 100%;
    min-width: 0;
  }
  .sec-overview .donut {
    display: block;
    width: min(142px, 48vw);
    height: auto;
    aspect-ratio: 1;
    justify-self: center;
    margin: 0 auto;
  }
  .sec-overview .donut-legend {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    gap: 2px;
  }
  .sec-overview .donut-legend li {
    min-width: 0;
    width: 100%;
    grid-template-columns: 7px minmax(0, 1fr) minmax(0, 42%);
    gap: 7px;
    padding: 7px 2px;
    font-size: 11px;
  }
  .sec-overview .donut-legend .lg-name {
    min-width: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    line-height: 1.45;
  }
  .sec-overview .donut-legend .lg-val {
    min-width: 0;
    max-width: 46%;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: right;
    font-size: 10px;
    line-height: 1.4;
  }
}


/* Field Notes 08 — lightbox controls below the image + robust mobile legend spacing */
.lightbox .lb-figure > .lb-play {
  position: relative;
  inset: auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  margin: 0 auto 4px;
  padding: 8px 15px;
  z-index: 1;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .lightbox .lb-figure { gap: 10px; }
  .lightbox .lb-imgwrap { height: min(68svh, calc(100dvh - 218px)); max-height: 68svh; }
  .lightbox .lb-figure > .lb-play { position: relative; inset: auto; margin: 0 auto 2px; }

  /* The legend is deliberately a single, padded column on phones.
     A two-column legend made both the category and byte count touch the card edge. */
  .sec-overview .donut-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .sec-overview .donut {
    align-self: center;
    flex: 0 0 auto;
    margin-inline: auto;
  }
  .sec-overview .donut-legend {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .sec-overview .donut-legend li {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) minmax(88px, 40%);
    align-items: start;
    gap: 8px;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 9px 10px;
    box-sizing: border-box;
    border: 1px solid var(--line-soft);
    border-radius: 7px;
    line-height: 1.45;
  }
  .sec-overview .donut-legend .lg-dot { margin-top: .35em; }
  .sec-overview .donut-legend .lg-name {
    display: block;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    line-height: 1.45;
  }
  .sec-overview .donut-legend .lg-val {
    display: block;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    text-align: right;
    font-size: 10.5px;
    line-height: 1.45;
  }
}

@media (max-width: 380px) {
  .lightbox .lb-imgwrap { height: min(64svh, calc(100dvh - 218px)); }
  .sec-overview .donut-legend li {
    grid-template-columns: 7px minmax(0, 1fr) minmax(82px, 39%);
    gap: 7px;
    padding: 8px 8px;
  }
  .sec-overview .donut-legend .lg-val { font-size: 10px; }
}


/* Field Notes 09 — definitive mobile fixes (placed last to outrank legacy rules) */
@media (max-width: 760px) {
  /* Use a single flex column on mobile. The old grid had five direct children and
     could allocate the figure/control to a narrow implicit grid column. */
  .lightbox {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: calc(44px + env(safe-area-inset-top, 0px)) 16px calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
    overflow-y: auto;
  }
  .lightbox > .lb-close,
  .lightbox > .lb-progress,
  .lightbox > .lb-prev,
  .lightbox > .lb-next { position: absolute !important; }
  .lightbox > .lb-prev,
  .lightbox > .lb-next {
    top: auto !important;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 5 !important;
  }
  .lightbox > .lb-prev { left: 16px !important; right: auto !important; }
  .lightbox > .lb-next { right: 16px !important; left: auto !important; }
  .lightbox > .lb-figure {
    position: static !important;
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    gap: 12px !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .lightbox .lb-figure > .lb-imgwrap {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: min(61svh, calc(100dvh - 270px)) !important;
    min-height: 190px !important;
    max-height: 61svh !important;
    margin: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  .lightbox .lb-figure > .lb-imgwrap img {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }
  .lightbox .lb-figure > figcaption {
    position: static !important;
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: baseline !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    line-height: 1.5 !important;
  }
  .lightbox .lb-figure > button#lbPlay {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    align-items: center !important;
    justify-content: center !important;
    order: 3 !important;
    width: max-content !important;
    min-width: 104px !important;
    min-height: 40px !important;
    margin: 0 auto !important;
    padding: 9px 18px !important;
    transform: none !important;
    white-space: nowrap !important;
    z-index: 6 !important;
  }

  /* One mobile legend row: the measurement is a single unbroken column and has
     guaranteed right padding. Prevent the count/size string breaking at spaces. */
  .sec-overview .donut-legend {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 2px !important;
    box-sizing: border-box !important;
  }
  .sec-overview .donut-legend > li {
    display: grid !important;
    grid-template-columns: 8px minmax(0, 1fr) max-content !important;
    align-items: center !important;
    column-gap: 9px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 10px 13px !important;
    box-sizing: border-box !important;
    border: 1px solid var(--line-soft) !important;
    border-radius: 8px !important;
    overflow: visible !important;
  }
  .sec-overview .donut-legend > li > .lg-name {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
    line-height: 1.5 !important;
  }
  .sec-overview .donut-legend > li > .lg-val {
    display: block !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    justify-self: end !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: right !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.45 !important;
    font-size: 10px !important;
    letter-spacing: 0 !important;
  }
}
@media (max-width: 380px) {
  .lightbox { padding-inline: 12px !important; }
  .lightbox .lb-figure > .lb-imgwrap { height: min(57svh, calc(100dvh - 270px)) !important; min-height: 170px !important; }
  .lightbox .lb-figure > button#lbPlay { min-height: 38px !important; }
  .sec-overview .donut-legend > li { grid-template-columns: 7px minmax(0, 1fr) max-content !important; column-gap: 7px !important; padding: 9px 10px !important; }
  .sec-overview .donut-legend > li > .lg-val { font-size: 9.5px !important; }
}


/* Field Notes 10 — cross-generation overlay safety layer.
   Keep closed dialogs closed even when legacy display rules remain earlier in the cascade. */
#lightbox[hidden], #drawer[hidden], #drawerScrim[hidden], #palette[hidden], #help[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
@media (max-width: 760px) {
  #lightbox:not([hidden]) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
  }
  #lightbox:not([hidden]) > .lb-figure > #lbPlay {
    position: static !important;
    inset: auto !important;
    display: inline-flex !important;
    align-self: center !important;
    margin: 0 auto !important;
    order: 3 !important;
  }
}