.uplot, .uplot *, .uplot *::before, .uplot *::after {box-sizing: border-box;}.uplot {font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";line-height: 1.5;width: min-content;}.u-title {text-align: center;font-size: 18px;font-weight: bold;}.u-wrap {position: relative;user-select: none;}.u-over, .u-under {position: absolute;}.u-under {overflow: hidden;}.uplot canvas {display: block;position: relative;width: 100%;height: 100%;}.u-axis {position: absolute;}.u-legend {font-size: 14px;margin: auto;text-align: center;}.u-inline {display: block;}.u-inline * {display: inline-block;}.u-inline tr {margin-right: 16px;}.u-legend th {font-weight: 600;}.u-legend th > * {vertical-align: middle;display: inline-block;}.u-legend .u-marker {width: 1em;height: 1em;margin-right: 4px;background-clip: padding-box !important;}.u-inline.u-live th::after {content: ":";vertical-align: middle;}.u-inline:not(.u-live) .u-value {display: none;}.u-series > * {padding: 4px;}.u-series th {cursor: pointer;}.u-legend .u-off > * {opacity: 0.3;}.u-select {background: rgba(0,0,0,0.07);position: absolute;pointer-events: none;}.u-cursor-x, .u-cursor-y {position: absolute;left: 0;top: 0;pointer-events: none;will-change: transform;}.u-hz .u-cursor-x, .u-vt .u-cursor-y {height: 100%;border-right: 1px dashed #607D8B;}.u-hz .u-cursor-y, .u-vt .u-cursor-x {width: 100%;border-bottom: 1px dashed #607D8B;}.u-cursor-pt {position: absolute;top: 0;left: 0;border-radius: 50%;border: 0 solid;pointer-events: none;will-change: transform;background-clip: padding-box !important;}.u-axis.u-off, .u-select.u-off, .u-cursor-x.u-off, .u-cursor-y.u-off, .u-cursor-pt.u-off {display: none;}
:root {
color-scheme: light;
--page: #f6f4ef;
--surface: #ffffff;
--ink: #1c2228;
--ink-2: #5b6670;
--muted: #8a949d;
--grid: #e1e5ea;
--axis: #cdd4da;
--border: #cdd4da;
--wash: #e8eef2;
--accent: #2c6bd4;
--blue: #2c6bd4;
--amber: #d68400;
--green: #16924c;
--purple: #7a4cc8;
--teal: #0e93a0;
--band: rgba(22, 146, 76, 0.12);
--fill-amber: rgba(214, 132, 0, 0.14);
--lv-ok: #16924c;
--lv-dry: #d06a12;
--lv-wet: #2c6bd4;
--lv-hot: #d13a3a;
--lv-open: #7a4cc8;
--lv-light: #d68400;
--lv-line: #cdd4da;
}
@media (prefers-color-scheme: dark) {
:root:where(:not([data-theme="light"])) {
color-scheme: dark;
--page: #14171b;
--surface: #1f2429;
--ink: #e6e9ec;
--ink-2: #a2acb5;
--muted: #75808a;
--grid: #2a3138;
--axis: #3a434c;
--border: #3a434c;
--wash: #2a3138;
--accent: #6ea2ff;
--blue: #6ea2ff;
--amber: #f2a93b;
--green: #4cc883;
--purple: #ab8cf2;
--teal: #3ccad6;
--band: rgba(76, 200, 131, 0.16);
--fill-amber: rgba(242, 169, 59, 0.16);
--lv-ok: #4cc883;
--lv-dry: #f08a3c;
--lv-wet: #6ea2ff;
--lv-hot: #f06464;
--lv-open: #ab8cf2;
--lv-light: #f2a93b;
--lv-line: #3a434c;
}
}
:root[data-theme="dark"] {
color-scheme: dark;
--page: #14171b;
--surface: #1f2429;
--ink: #e6e9ec;
--ink-2: #a2acb5;
--muted: #75808a;
--grid: #2a3138;
--axis: #3a434c;
--border: #3a434c;
--wash: #2a3138;
--accent: #6ea2ff;
--blue: #6ea2ff;
--amber: #f2a93b;
--green: #4cc883;
--purple: #ab8cf2;
--teal: #3ccad6;
--band: rgba(76, 200, 131, 0.16);
--fill-amber: rgba(242, 169, 59, 0.16);
--lv-ok: #4cc883;
--lv-dry: #f08a3c;
--lv-wet: #6ea2ff;
--lv-hot: #f06464;
--lv-open: #ab8cf2;
--lv-light: #f2a93b;
--lv-line: #3a434c;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--page);
color: var(--ink);
font: 16px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: var(--accent); text-underline-offset: 2px; }
.layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
max-width: 1240px;
margin: 0 auto;
padding: 0 16px;
}
@media (min-width: 1180px) {
.layout { grid-template-columns: 210px minmax(0, 1fr); gap: 48px; }
}
.toc { display: none; }
@media (min-width: 1180px) {
.toc {
display: block;
position: sticky;
top: 0;
align-self: start;
max-height: 100vh;
overflow-y: auto;
padding: 56px 0 24px;
font-size: 14px;
}
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc a {
display: block;
padding: 4px 10px;
border-left: 2px solid var(--grid);
color: var(--ink-2);
text-decoration: none;
}
.toc a:hover { color: var(--ink); }
.toc a.active { color: var(--ink); border-left-color: var(--accent); font-weight: 600; }
.toc .toc-title { font-weight: 600; color: var(--ink); margin: 0 0 10px 12px; }
}
main { min-width: 0; padding: 40px 0 96px; }
.prose { max-width: 940px; }
.prose h1 { font-size: 34px; line-height: 1.15; margin: 0 0 6px; letter-spacing: -0.01em; }
.prose h1 + p.subtitle { font-size: 18px; color: var(--ink-2); margin: 0 0 18px; }
.prose h2 {
font-size: 23px;
line-height: 1.25;
margin: 56px 0 16px;
padding-top: 24px;
border-top: 1px solid var(--grid);
scroll-margin-top: 16px;
}
.prose h3 { font-size: 18px; margin: 32px 0 8px; scroll-margin-top: 16px; }
.prose h4 { font-size: 16px; margin: 20px 0 6px; color: var(--ink-2); }
.prose p, .prose ul, .prose ol { margin: 0 0 14px; }
.prose li { margin: 3px 0; }
.prose li > p { margin: 0; }
.prose code { font-size: 0.88em; background: var(--wash); padding: 1px 5px; border-radius: 4px; }
.prose hr { border: 0; border-top: 1px solid var(--grid); margin: 32px 0; }
.prose blockquote {
margin: 0 0 16px;
padding: 10px 16px;
border-left: 3px solid var(--accent);
background: var(--surface);
border-radius: 0 8px 8px 0;
color: var(--ink-2);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose sub { font-size: 12px; color: var(--muted); }
.prose > img {
display: block;
width: 100%;
max-width: 620px;
height: auto;
border-radius: 12px;
margin: 0 0 8px;
cursor: zoom-in;
}
.hero { margin: 0 0 40px; --hero-h: min(66vh, 620px); }
.hero-frame {
position: relative;
width: min(100%, calc(var(--hero-h) * var(--ar, 4 / 3)));
aspect-ratio: var(--ar, 4 / 3);
margin: 0 auto;
border-radius: 12px;
overflow: hidden;
background: var(--wash);
}
.hero-photo {
display: block;
width: 100% !important;
height: auto;
max-height: var(--hero-h);
object-fit: contain;
border-radius: 12px;
cursor: zoom-in;
background: var(--wash);
}
.hero-frame .hero-photo { height: 100%; max-height: none; border-radius: 0; }
.hero-map { margin: 16px 0 0; }
.hero-lapse {
position: absolute;
left: 10px;
bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
padding: 3px 12px 3px 3px;
border-radius: 999px;
background: rgba(10, 12, 14, 0.62);
color: #fff;
font-size: 13px;
line-height: 1;
font-variant-numeric: tabular-nums;
white-space: nowrap;
pointer-events: none;
}
.hero-lapse button {
pointer-events: auto;
display: grid;
place-items: center;
width: 30px;
height: 30px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.16);
color: #fff;
cursor: pointer;
}
.hero-lapse button:hover { background: rgba(255, 255, 255, 0.3); }
.hero-lapse button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hero-lapse svg { width: 14px; height: 14px; fill: currentColor; }
@media (pointer: coarse) { .hero-lapse button { width: 36px; height: 36px; } }
.map-scroll {
display: block;
overflow-x: auto;
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
}
.map-scroll > img, .map-scroll > svg { display: block; width: 100% !important; height: auto; }
.map-scroll svg .dm-bg, .map-lb svg .dm-bg { display: none; }
.map-scroll.is-zoom { position: relative; container-type: inline-size; cursor: zoom-in; border-radius: 12px; transition: box-shadow 0.2s ease; }
.map-fs-btn {
position: absolute;
top: 1.2cqw;
right: 1.2cqw;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px 3px 8px;
font: inherit;
font-size: 13px;
font-weight: 600;
line-height: 18px;
color: var(--ink-2);
background: color-mix(in srgb, var(--surface) 90%, transparent);
border: 1px solid var(--border);
border-radius: 999px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
cursor: zoom-in;
white-space: nowrap;
transition: color 0.2s ease, border-color 0.2s ease;
}
.map-fs-btn svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.map-fs-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.map-fs-touch { display: none; }
@media (pointer: coarse) {
.map-fs-pointer { display: none; }
.map-fs-touch { display: inline; }
}
@container (max-width: 599px) {
.map-fs-btn { gap: 4px; padding: 2px 7px 2px 5px; font-size: 11px; line-height: 16px; }
.map-fs-btn svg { width: 12px; height: 12px; }
.map-fs-btn .map-fs-pointer { display: inline; }
.map-fs-btn .map-fs-touch { display: none; }
}
@container (max-width: 339px) {
.map-fs-btn { padding: 4px; }
.map-fs-btn .map-fs-pointer { display: none; }
}
@media (hover: hover) {
.map-scroll.is-zoom:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent), 0 6px 22px rgba(0, 0, 0, 0.10); }
.map-scroll.is-zoom:hover .map-fs-btn { color: var(--accent); border-color: var(--accent); }
}
.map-lb {
position: fixed;
inset: 0;
z-index: 60;
display: flex;
flex-direction: column;
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
background: var(--page);
}
.map-lb[hidden] { display: none; }
.map-lb-top {
position: absolute;
z-index: 1;
top: max(6px, env(safe-area-inset-top));
right: max(6px, env(safe-area-inset-right));
display: flex;
gap: 6px;
}
.map-lb-btn[hidden] { display: none; }
.map-lb-fs { font-size: 16px !important; }
.map-lb-btn {
width: 32px;
height: 32px;
flex: none;
font-size: 20px;
line-height: 1;
color: var(--ink);
background: color-mix(in srgb, var(--surface) 80%, transparent);
border: 1px solid var(--border);
border-radius: 50%;
cursor: pointer;
}
.map-lb-stage {
flex: 1;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
container-type: size;
cursor: zoom-out;
}
.map-lb-stage svg {
display: block;
flex: none;
width: min(100cqw, 100cqh * var(--map-ar, 1)) !important;
height: auto !important;
aspect-ratio: var(--map-ar, 1);
cursor: default;
}
.map-lb-hint {
display: none;
position: absolute;
left: 0;
right: 0;
bottom: max(10px, env(safe-area-inset-bottom));
margin: 0 !important;
text-align: center;
font-size: 13px;
color: var(--muted);
pointer-events: none;
}
@media (orientation: portrait) and (max-width: 700px) { .map-lb-hint { display: block; } }
html.map-lb-on, html.map-lb-on body { overflow: hidden; }
.map-share { color: var(--ink-2); text-decoration: none; }
.map-share:hover { color: var(--accent); border-color: var(--accent); }
@media (min-width: 1180px) { .layout:has(.map-page) { grid-template-columns: minmax(0, 1fr); } }
.layout:has(.map-page) .toc { display: none; }
.prose:has(.map-page) { max-width: 1100px; margin: 0 auto; }
.layout:has(.map-page) main { padding: max(12px, env(safe-area-inset-top)) max(0px, env(safe-area-inset-right)) 48px max(0px, env(safe-area-inset-left)); }
.map-back { margin: 0 0 12px !important; font-size: 14px; }
.map-back a { color: var(--ink-2); }
.map-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 12px;
margin: 0 0 8px;
}
.map-title { font-size: 15px; font-weight: 600; margin-right: auto; }
.map-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.map-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 10px;
font-size: 13px;
line-height: 20px;
color: var(--ink-2);
background: var(--surface);
border: 1px solid var(--border);
border-radius: 999px;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.map-pill[hidden] { display: none; }
.map-fresh i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.map-fresh.is-live i { background: var(--lv-ok); animation: lv-breathe 2.4s ease-in-out infinite; }
.map-fresh.is-live { color: var(--ink); }
.map-fresh.is-stale, .map-fresh.is-off { color: var(--muted); }
.map-fresh.is-off i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }
.map-period.is-day { color: var(--ink); }
.map-open { color: #fff; background: var(--lv-open); border-color: var(--lv-open); font-weight: 600; }
.map-sum { flex-basis: 100%; margin: 0 !important; font-size: 14px; color: var(--ink-2); }
.map-sum:empty { display: none; }
@media (min-width: 701px) {
.map-sum { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.map-note { margin: 8px 0 0 !important; font-size: 13px; color: var(--muted); }
.map-turn { display: none; }
@media (pointer: coarse) { .map-key { display: none; } }
@media (max-width: 700px) { .map-turn { display: inline; } }
.lv-badge > rect { fill: var(--surface); stroke: var(--lv-line); stroke-width: 1; }
.lv-badge text { font-size: 12.5px; font-weight: 600; fill: var(--ink); font-variant-numeric: tabular-nums; }
.lv-badge .lv-mu { fill: var(--ink-2); font-weight: 500; }
.lv-badge.lv-warm > rect { stroke: var(--lv-light); stroke-width: 1.5; }
.lv-badge.lv-cool > rect { stroke: var(--lv-wet); stroke-width: 1.5; }
.lv-badge.lv-heat > rect { stroke: var(--lv-hot); stroke-width: 1.5; }
.lv-badge.lv-warn > rect { stroke: var(--lv-dry); stroke-width: 1.5; }
.lv-badge.lv-open-pill > rect { fill: var(--lv-open); stroke: none; }
.lv-badge.lv-open-pill text, .lv-badge.lv-open-pill .lv-mu { fill: #fff; }
.lv-tent { font-size: 12.5px; font-weight: 600; fill: var(--ink-2); font-variant-numeric: tabular-nums; }
.lv-c-ok { fill: var(--lv-ok); }
.lv-c-dry { fill: var(--lv-dry); }
.lv-c-wet { fill: var(--lv-wet); }
.lv-c-hot { fill: var(--lv-hot); }
.lv-c-open { fill: var(--lv-open); }
.lv-glow { opacity: 0; transition: opacity 1.5s ease; pointer-events: none; }
.lv-glow-0 { stop-color: var(--lv-light); stop-opacity: 0.42; }
.lv-glow-1 { stop-color: var(--lv-light); stop-opacity: 0.1; }
.lv-glow-2 { stop-color: var(--lv-light); stop-opacity: 0; }
.lv-ring { fill: none; stroke-width: 3; opacity: 0; transition: opacity 1s ease; }
.lv-lamp { stroke: var(--lv-light); }
.lv-run-dehum { stroke: var(--lv-wet); }
.lv-run-heat { stroke: var(--lv-hot); }
.lv-run.is-on { opacity: 0.75; animation: lv-breathe 2.8s ease-in-out infinite; }
.lv-tent-open { fill: none; stroke: var(--lv-open); stroke-width: 3; stroke-dasharray: 10 7; opacity: 0; }
.lv-tent-open.is-on { opacity: 1; animation: lv-march 1.2s linear infinite; }
.lv-halo { fill: none; stroke: var(--lv-ok); stroke-width: 3; opacity: 0; pointer-events: none; }
.lv-halo.is-hit { stroke-width: 2; }
.lv-ping { fill: none; stroke: var(--lv-ok); stroke-width: 2; transform-box: fill-box; transform-origin: center; pointer-events: none; }
.lv-spin { transform-box: fill-box; transform-origin: center; }
.lv-pulse path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.lv-pulse-glow { stroke-width: 9; opacity: 0.28; }
.lv-pulse-core { stroke-width: 3.5; }
.lv-feed { fill: none; stroke: var(--lv-light); stroke-width: 4; stroke-linecap: round; opacity: 0; }
.lv-panel-bg { fill: var(--surface); stroke: var(--lv-line); stroke-width: 1.5; }
.lv-panel text { font-variant-numeric: tabular-nums; }
.lv-kick { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; fill: var(--ink-2); }
.lv-state { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; }
.lv-val .lv-big { font-size: 24px; font-weight: 700; fill: var(--ink); }
.lv-val .lv-unit { font-size: 12.5px; fill: var(--ink-2); }
.lv-tgt { font-size: 12.5px; fill: var(--ink-2); }
.lv-track { fill: var(--grid); }
.lv-band { fill: var(--lv-ok); opacity: 0.35; }
.lv-tick { fill: var(--ink); }
.lv-dot { stroke: var(--surface); stroke-width: 2; transition: cx 0.8s ease; }
.lv-act { font-size: 12.5px; font-weight: 600; }
.lv-panel.is-ok .lv-panel-bg { stroke: var(--lv-ok); }
.lv-panel.is-dry .lv-panel-bg { stroke: var(--lv-dry); }
.lv-panel.is-wet .lv-panel-bg { stroke: var(--lv-wet); }
.lv-panel.is-hot .lv-panel-bg { stroke: var(--lv-hot); }
.lv-panel.is-open .lv-panel-bg { stroke: var(--lv-open); stroke-width: 2.5; }
.lv-panel.is-ok .lv-state, .lv-panel.is-ok .lv-act { fill: var(--lv-ok); }
.lv-panel.is-dry .lv-state, .lv-panel.is-dry .lv-act, .lv-panel.is-dry .lv-dot { fill: var(--lv-dry); }
.lv-panel.is-wet .lv-state, .lv-panel.is-wet .lv-act, .lv-panel.is-wet .lv-dot { fill: var(--lv-wet); }
.lv-panel.is-hot .lv-state, .lv-panel.is-hot .lv-act, .lv-panel.is-hot .lv-dot { fill: var(--lv-hot); }
.lv-panel.is-open .lv-state, .lv-panel.is-open .lv-act, .lv-panel.is-open .lv-dot { fill: var(--lv-open); }
.lv-panel.is-ok .lv-dot { fill: var(--lv-ok); }
.lv-panel.is-none .lv-act, .lv-panel.is-none .lv-dot { fill: var(--muted); }
.lv-spark-line { fill: none; stroke: var(--ink-2); stroke-opacity: 0.6; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.lv-spark-ref { fill: none; stroke: var(--muted); stroke-width: 1; }
.lv-spark-hit { fill: transparent; stroke: none; pointer-events: all; }
.lv-spark-end { fill: var(--ink); stroke: var(--surface); stroke-width: 1.5; }
.lv-badge.lv-warm .lv-spark-end { fill: var(--lv-light); }
.lv-badge.lv-cool .lv-spark-end { fill: var(--lv-wet); }
.lv-badge.lv-heat .lv-spark-end { fill: var(--lv-hot); }
.lv-panel .lv-spark-end { stroke-width: 1.5; transition: none; }
.lv-stale .lv-panel-bg, .lv-stale .lv-badge > rect { stroke: var(--lv-line); }
.lv-stale .lv-panel .lv-state, .lv-stale .lv-panel .lv-act, .lv-stale .lv-panel .lv-dot, .lv-stale .lv-tent tspan { fill: var(--muted); }
.lv-stale .lv-top { opacity: 0.7; }
.lv-stale .lv-ring, .lv-stale .lv-glow { opacity: 0 !important; animation: none; }
@keyframes lv-breathe { 50% { opacity: 0.35; } }
@keyframes lv-march { to { stroke-dashoffset: -34; } }
@media (prefers-reduced-motion: reduce) {
.map-fresh.is-live i, .lv-run.is-on, .lv-tent-open.is-on { animation: none; }
.lv-glow, .lv-ring, .lv-dot { transition: none; }
}
.status {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin: 0 0 28px !important;
}
.status .chip {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 999px;
padding: 3px 12px;
font-size: 14px;
color: var(--ink-2);
}
.status .chip:first-child { color: var(--ink); font-weight: 600; }
.status .built { flex-basis: 100%; font-size: 12px; color: var(--muted); }
.table-wrap {
overflow-x: auto;
margin: 0 0 18px;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--surface);
}
.prose table { border-collapse: collapse; width: 100%; font-size: 14px; }
.prose th, .prose td { padding: 7px 12px; border-bottom: 1px solid var(--grid); vertical-align: top; }
.prose th { text-align: left; font-weight: 600; color: var(--ink-2); white-space: nowrap; background: var(--wash); }
.prose tr:last-child td { border-bottom: 0; }
.prose td { font-variant-numeric: tabular-nums; }
.table-wrap.wide table { font-size: 13px; }
.table-wrap.wide td, .table-wrap.wide th { white-space: nowrap; padding: 6px 10px; }
.table-wrap.wide tbody tr:hover td { background: var(--wash); }
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 8px;
margin: 0 0 14px !important;
}
.gallery-label { font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 14px 0 6px !important; }
.gallery br { display: none; }
.gallery img {
width: 100% !important;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 8px;
cursor: zoom-in;
background: var(--wash);
display: block;
}
.gallery + p > em:only-child, .caption { display: block; font-size: 14px; color: var(--ink-2); margin-bottom: 18px; }
.lightbox {
position: fixed;
inset: 0;
z-index: 10;
background: rgba(10, 10, 10, 0.92);
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
touch-action: pinch-zoom;
}
.lightbox.zoomed { touch-action: auto; }
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-width: 100%; text-align: center; }
.lightbox img {
max-width: 100%;
max-height: 84vh;
border-radius: 6px;
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}
.lightbox figcaption { color: #e6e9ec; font-size: 14px; margin-top: 10px; }
.lb-hint { display: block; margin-top: 4px; font-size: 12px; color: #9aa3ad; }
.lb-hint:empty { display: none; }
.lightbox a { color: #6ea2ff; }
.lb-close {
position: absolute;
top: 10px;
right: 14px;
background: none;
border: 0;
color: #fff;
font-size: 34px;
cursor: pointer;
}
.charts { margin: 8px 0 24px; }
.chart-controls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }
.chart-controls button {
font: inherit;
font-size: 14px;
padding: 4px 12px;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--ink-2);
cursor: pointer;
}
.chart-controls button[aria-pressed="true"] { background: var(--ink); color: var(--page); border-color: var(--ink); }
.chart-controls .hint { font-size: 13px; color: var(--muted); margin-left: 6px; }
.chart {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 12px 12px 4px;
margin-bottom: 10px;
}
.chart h4 { margin: 0 0 2px 4px !important; font-size: 14px; color: var(--ink); }
.chart .note { margin: 0 0 4px 4px; font-size: 12px; color: var(--muted); }
.chart .u-legend { font-size: 12.5px; color: var(--ink-2); text-align: left; padding: 2px 0 6px 2px; }
.chart .u-legend .u-marker { width: 14px; height: 4px; border-radius: 2px; }
.chart .u-legend th { font-weight: 500; color: var(--ink-2); background: none; padding: 0 4px; border: 0; }
.chart .u-legend td { border: 0; padding: 0 4px; }
.chart .u-legend .u-series:first-child th { color: var(--muted); }
.chart .u-select { background: var(--band); }
.events-list {
list-style: none;
padding: 0;
margin: 6px 0 0;
font-size: 13px;
color: var(--ink-2);
columns: 2 280px;
column-gap: 24px;
}
.events-list li { break-inside: avoid; margin: 2px 0; }
.events-list .n {
display: inline-block;
min-width: 18px;
height: 18px;
line-height: 18px;
text-align: center;
border-radius: 9px;
background: var(--wash);
color: var(--ink);
font-size: 11px;
font-weight: 600;
margin-right: 6px;
}
@media print {
.toc, .chart-controls { display: none; }
.layout { display: block; }
}