:root {
  --page: #f4f5f6;
  --surface: #fff;
  --surface-soft: #edf3f3;
  --ink: #1c2733;
  --muted: #68727d;
  --faint: #929aa2;
  --line: #dfe3e6;
  --line-strong: #d4dadd;
  --accent: #0f7478;
  --accent-strong: #075b61;
  --accent-wash: #e3eeee;
  --shadow: 0 12px 32px rgba(29,43,51,.04);
  color-scheme: light;
}

:root[data-color-mode="dark"] {
  --page: #151a1d;
  --surface: #20272b;
  --surface-soft: #253336;
  --ink: #edf3f3;
  --muted: #aab5ba;
  --faint: #7f8b91;
  --line: #344045;
  --line-strong: #46545a;
  --accent: #68c5c7;
  --accent-strong: #9addde;
  --accent-wash: #253b3e;
  --shadow: none;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root[data-color-mode="system"] {
    --page: #151a1d;
    --surface: #20272b;
    --surface-soft: #253336;
    --ink: #edf3f3;
    --muted: #aab5ba;
    --faint: #7f8b91;
    --line: #344045;
    --line-strong: #46545a;
    --accent: #68c5c7;
    --accent-strong: #9addde;
    --accent-wash: #253b3e;
    --shadow: none;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size: 15px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}
button,input { color: inherit; font: inherit; }
button,a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent-wash); color: var(--accent-strong); }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.skip-link { position:fixed;z-index:100;top:8px;left:8px;transform:translateY(-140%);border-radius:8px;background:var(--accent);color:#fff;padding:8px 12px;transition:transform 160ms ease; }
.skip-link:focus { transform:translateY(0); }

.site-sidebar {
  position: fixed;
  z-index: 40;
  inset: 0 auto 0 0;
  display: flex;
  width: 200px;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: var(--surface);
  padding: 24px 14px 18px;
}
.site-brand { display:block;min-height:44px;border-bottom:1px solid var(--line);padding:0 4px 22px;font-size:13px;font-weight:750;letter-spacing:-.01em; }
.side-navigation { margin-top:24px; }
.navigation-section { margin:0 10px 8px;color:var(--faint);font-size:11px; }
.side-navigation a { display:grid;min-height:42px;grid-template-columns:30px 1fr;align-items:center;border-radius:9px;padding:0 10px;color:var(--muted);transition:background 160ms ease,color 160ms ease; }
.side-navigation a:hover,.side-navigation a:focus-visible { background:var(--surface-soft);color:var(--ink);outline:none; }
.side-navigation a.is-active { background:var(--accent-wash);color:var(--ink); }
.navigation-number { color:var(--accent);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:16px;font-style:italic;font-weight:650; }
.sidebar-footer { margin-top:auto; }
.sidebar-footer p { margin:14px 10px 0;color:var(--faint);font-size:10px;letter-spacing:.08em;line-height:1.7; }
.mode-switch { display:grid;grid-template-columns:repeat(3,1fr);gap:2px;border:1px solid var(--line-strong);border-radius:999px;background:var(--page);padding:4px; }
.mode-switch button { display:grid;min-height:40px;place-items:center;border:0;border-radius:999px;background:transparent;color:var(--muted);font-size:16px; }
.mode-switch button.is-selected { background:var(--accent);color:#fff; }
.mobile-mode-switch,.mobile-navigation { display:none; }

.home-main { min-height:100vh;margin-left:200px;padding:58px 38px 64px; }
.page-intro,.timeline,.system-note,.site-footer,.detail-article { width:min(100%,1040px);margin-inline:auto; }
.page-intro { display:grid;grid-template-columns:minmax(0,1fr) 335px;gap:48px;align-items:end;border-bottom:1px solid var(--line);padding-bottom:24px; }
.eyebrow { margin:0 0 8px;color:var(--accent-strong);font-size:11px;font-weight:750;letter-spacing:.18em;text-transform:uppercase; }
.page-heading h1,.detail-article h1 { margin:0;font-size:clamp(32px,3.4vw,42px);font-weight:800;letter-spacing:-.045em;line-height:1.2; }
.page-description { margin:8px 0 0;color:var(--muted);font-size:14px; }
.timeline-summary { min-width:0; }
.search-box { display:flex;min-height:48px;align-items:center;gap:10px;border:1px solid var(--line-strong);border-radius:11px;background:var(--surface);padding:0 8px 0 15px;box-shadow:var(--shadow); }
.search-box:focus-within { border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash); }
.search-box input { min-width:0;flex:1;border:0;outline:0;background:transparent;font-size:13px; }
.search-box input::placeholder { color:var(--muted); }
.search-box button { width:34px;height:34px;border:0;border-radius:8px;background:transparent;color:var(--muted); }
.search-box button:hover { background:var(--accent-wash);color:var(--accent-strong); }
.timeline-summary dl { display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:13px 2px 0; }
.timeline-summary dl>div { display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:12px; }
.timeline-summary dt { white-space:nowrap; }
.timeline-summary dd { margin:0;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap; }

.timeline-day { border-top:1px solid var(--line);padding:22px 0 10px; }
.timeline-day:first-child { border-top:0; }
.day-heading { display:flex;align-items:baseline;gap:11px;margin-bottom:14px;padding-left:8px; }
.day-heading h2 { margin:0;font-size:16px;font-weight:780;letter-spacing:-.015em; }
.day-heading span { color:var(--muted);font-size:11px; }
.timeline-entry { display:grid;grid-template-columns:52px 18px minmax(0,1fr);align-items:stretch; }
.timeline-entry>time { padding-top:19px;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:11px;font-variant-numeric:tabular-nums;letter-spacing:.04em; }
.timeline-rail { position:relative; }
.timeline-rail::before { position:absolute;top:0;bottom:0;left:8px;width:1px;background:var(--line-strong);content:""; }
.timeline-rail i { position:absolute;z-index:1;top:23px;left:5px;width:7px;height:7px;border:2px solid var(--page);border-radius:50%;background:var(--accent);box-shadow:0 0 0 1px var(--accent); }
.entry-card { position:relative;margin-bottom:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:20px 20px 17px;box-shadow:var(--shadow); }
.entry-actions { position:absolute;top:17px;right:18px;font-size:11px; }
.entry-actions a { color:var(--muted); }
.entry-actions a:hover,.entry-actions a:focus-visible { color:var(--accent-strong); }
.entry-card h3 { max-width:calc(100% - 105px);margin:0;font-size:20px;font-weight:760;letter-spacing:-.025em;line-height:1.45; }
.entry-body { max-width:820px;margin:9px 0 0;color:var(--muted);font-size:15px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere; }
.entry-card ul,.detail-topics { display:flex;flex-wrap:wrap;gap:9px;margin:14px 0 0;padding:0;list-style:none; }
.entry-card li a,.detail-topics a { color:var(--faint);font-size:11px; }
.entry-card li a:hover,.detail-topics a:hover { color:var(--accent-strong); }
.empty-state { margin-top:22px;border:1px dashed var(--line-strong);border-radius:14px;background:var(--surface);padding:56px 24px;text-align:center; }
.empty-state h2 { margin:0;font-size:20px; }
.empty-state p { margin:6px 0 0;color:var(--muted); }
.button-link { display:inline-flex;margin-top:18px;min-height:42px;align-items:center;border:1px solid var(--line-strong);border-radius:9px;background:var(--surface);padding:8px 14px; }
.system-note { margin-top:28px;border-top:1px solid var(--line);padding:28px 0; }
.system-note h2 { margin:0;font-size:22px; }
.system-note>p:last-child { max-width:600px;margin:7px 0 0;color:var(--muted); }
.site-footer { display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;border-top:1px solid var(--line);padding:24px 0 0;color:var(--faint);font-size:11px; }
.site-footer p { margin:0; }
.site-footer span { width:100%; }

.detail-main { display:grid;place-items:start; }
.detail-article { max-width:820px; }
.detail-back { margin:0 0 48px;color:var(--muted);font-size:12px; }
.detail-article header { border-bottom:1px solid var(--line);padding-bottom:30px; }
.detail-body { margin-top:38px;color:var(--ink);font-size:18px;line-height:1.95;white-space:pre-wrap;overflow-wrap:anywhere; }
.detail-meta { display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-top:48px;border-top:1px solid var(--line);padding-top:20px;color:var(--faint);font-size:11px; }

@media (max-width:760px) {
  html { scroll-padding-top:88px; }
  body { font-size:16px; }
  .site-sidebar { display:none; }
  .home-main { margin-left:0;padding:74px 20px 106px; }
  .mobile-mode-switch { position:fixed;z-index:50;top:10px;left:50%;display:block;transform:translateX(-50%); }
  .mode-switch--compact { width:142px;border-color:var(--line);background:color-mix(in srgb,var(--surface) 92%,transparent);box-shadow:0 10px 24px rgba(25,38,46,.14);backdrop-filter:blur(14px); }
  .mode-switch--compact button { min-height:38px; }
  .page-intro { display:block;border-bottom:0;padding-bottom:0; }
  .eyebrow { margin-bottom:8px;font-size:10px; }
  .page-heading h1,.detail-article h1 { font-size:30px; }
  .page-description { display:none; }
  .timeline-summary { margin-top:18px; }
  .search-box { min-height:48px;border-radius:9px;box-shadow:none; }
  .timeline-summary dl { margin-top:12px; }
  .timeline-summary dl>div { font-size:12px; }
  .timeline-day { padding-top:17px; }
  .day-heading { position:sticky;z-index:12;top:0;margin:0 -20px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--page) 91%,transparent);padding:11px 20px 13px;backdrop-filter:blur(12px); }
  .day-heading h2 { font-size:14px; }
  .timeline-entry { display:block;border-bottom:1px solid var(--line);padding:17px 0 20px; }
  .timeline-entry>time { display:inline-flex;align-items:center;gap:7px;padding:0;color:var(--accent-strong);font-size:11px; }
  .timeline-entry>time::before { width:7px;height:7px;border-radius:50%;background:var(--accent);content:""; }
  .timeline-rail { display:none; }
  .entry-card { margin:0;border:0;border-radius:0;background:transparent;padding:0;box-shadow:none; }
  .entry-actions { top:-25px;right:0; }
  .entry-card h3 { max-width:none;margin-top:10px;font-size:17px;line-height:1.5; }
  .entry-body { margin-top:8px;font-size:18px;line-height:1.8; }
  .system-note { margin-top:18px; }
  .site-footer { padding-top:20px; }
  .mobile-navigation { position:fixed;z-index:60;right:0;bottom:0;left:0;display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--line);background:color-mix(in srgb,var(--surface) 94%,transparent);padding:7px max(10px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));backdrop-filter:blur(16px); }
  .mobile-navigation a { display:flex;min-width:0;min-height:50px;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:var(--muted);font-size:10px; }
  .mobile-navigation a.is-active { color:var(--accent-strong); }
  .mobile-navigation .navigation-number { font-size:15px;line-height:1.1; }
  .detail-main { padding-bottom:50px; }
  .detail-back { margin-bottom:32px; }
  .detail-body { margin-top:28px;font-size:18px; }
  .detail-meta { display:block; }
  .detail-meta span { display:block;margin-top:6px;overflow-wrap:anywhere; }
}

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