:root {
  color-scheme: light;
  --bg-a: #f3f4f6;
  --bg-b: #f9fafb;
  --bg-c: #eef2ff;
  --paper: #ffffff;
  --paper-elev: #ffffff;
  --ink: #1f2937;
  --muted: #6b7280;
  --accent: #3b82f6;
  --accent-soft: #dbeafe;
  --accent-ink: #1d4ed8;
  --border: #e5e7eb;
  --chip-border: #6665;
  --topbar-bg: rgba(255,255,255,0.9);
  --link: #1d4ed8;
  --code-bg: #111827;
  --code-ink: #f9fafb;
  --fab-bg: #dbeafe;
  --fab-border: #93c5fd;
  --fab-ink: #1d4ed8;
  --anchor-offset: 78px;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg-a: #0b1020;
    --bg-b: #111827;
    --bg-c: #1f2937;
    --paper: #111827;
    --paper-elev: #0f172a;
    --ink: #e5e7eb;
    --muted: #9ca3af;
    --accent: #60a5fa;
    --accent-soft: #1e3a8a66;
    --accent-ink: #93c5fd;
    --border: #94a3b84d;
    --chip-border: #94a3b84d;
    --topbar-bg: rgba(17,24,39,0.82);
    --link: #93c5fd;
    --code-bg: #020617;
    --code-ink: #e5e7eb;
    --fab-bg: #1e3a8a;
    --fab-border: #60a5fa;
    --fab-ink: #dbeafe;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "IBM Plex Sans", Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: linear-gradient(180deg, var(--bg-a) 0%, var(--bg-b) 40%, var(--bg-c) 100%);
  color: var(--ink);
}
.topbar { position: sticky; top: 0; padding: 0.9rem 1.1rem; background: var(--topbar-bg); backdrop-filter: blur(8px); border-bottom:1px solid var(--border); z-index:20; }
.topnav { display:flex; gap:0.55rem; flex-wrap:wrap; }
.nav-chip { text-decoration:none; border:1px solid var(--chip-border); border-radius:999px; padding:0.38rem 0.78rem; font-size:0.88rem; line-height:1; color:inherit; background:transparent; }
.nav-chip.active { border-color:#3b82f6; background:#3b82f622; font-weight:600; }

.blog-hero { padding: clamp(1.1rem, 2.8vw, 2.2rem); max-width: 1300px; margin: 0 auto; }
.blog-hero h1 { margin:0 0 .4rem; font-size: clamp(1.5rem, 3.2vw, 2.4rem); }
.blog-hero p { margin:0; color:var(--muted); max-width: 76ch; }

.layout { max-width: 1300px; margin: 0 auto; padding: 0 1rem 1rem; display:grid; grid-template-columns: 310px 1fr 260px; gap: 1rem; align-items:start; }
.feed-panel, .reader-wrap, .toc-panel { background: var(--paper); border:1px solid var(--border); border-radius:16px; }
.feed-panel { padding: .9rem; position: sticky; top: 74px; max-height: calc(100vh - 86px); overflow:auto; }
#blog-feed { display:grid; gap:.75rem; }
.post-card { border:1px solid var(--border); border-radius:14px; padding:.8rem; background:var(--paper-elev); cursor:pointer; }
.post-card.active { border-color:#93c5fd; box-shadow:0 0 0 2px #dbeafe inset; }
.post-card h3 { margin:0 0 .35rem; font-size:.98rem; line-height:1.35; }
.post-card p { margin:0; color:var(--muted); font-size:.88rem; line-height:1.45; }
.post-meta { margin-top:.45rem; color:var(--muted); font-size:.78rem; }

.reader-wrap { padding: 1rem; min-width:0; }
.reader-toolbar { display:flex; justify-content:space-between; align-items:center; gap:.5rem; margin-bottom:.7rem; }
#toc-toggle { display:none; border:1px solid var(--border); background:var(--paper-elev); color:var(--ink); border-radius:10px; padding:.35rem .55rem; }
#toc-status { color:var(--muted); font-size:.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.toc-fab {
  display:none;
  position: fixed;
  right: 14px;
  bottom: 14px;
  right: calc(14px + constant(safe-area-inset-right));
  bottom: calc(14px + constant(safe-area-inset-bottom));
  right: calc(14px + env(safe-area-inset-right));
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 26;
  border: 1px solid var(--fab-border);
  background: var(--fab-bg);
  color: var(--fab-ink);
  border-radius: 999px;
  padding: .52rem .82rem;
  font-size: .84rem;
  font-weight: 600;
  box-shadow: 0 10px 24px rgba(30, 64, 175, 0.22);
}
.article { border:1px solid var(--border); border-radius:14px; padding: clamp(1rem, 2vw, 1.8rem); }
.article header h2 { margin:0 0 .2rem; font-size: clamp(1.25rem, 2.1vw, 1.85rem); }
.article header p { margin:0 0 .9rem; color:var(--muted); font-size:.9rem; }
#doc-content { line-height:1.72; font-size:1rem; }
#doc-content h1,
#doc-content h2,
#doc-content h3 { scroll-margin-top: var(--anchor-offset); }
#doc-content pre { background:var(--code-bg); color:var(--code-ink); border-radius:12px; padding:.85rem; overflow:auto; }
#doc-content table { border-collapse: collapse; width:100%; display:block; overflow:auto; }
#doc-content th, #doc-content td { border:1px solid var(--border); padding:.48rem .55rem; }
#doc-content a { color:var(--link); }

.toc-panel { padding:.85rem; position: sticky; top: 74px; max-height: calc(100vh - 86px); overflow-y:auto; overflow-x:hidden; min-width:0; }
.toc-title { margin:0 0 .6rem; font-size: .95rem; font-weight: 700; }
#toc-list { display:grid; gap:.28rem; }
.toc-link { text-decoration:none; color:var(--ink); border-radius:8px; padding:.25rem .4rem; font-size:.86rem; display:block; white-space:normal; overflow-wrap:anywhere; word-break:break-word; line-height:1.35; }
.toc-link.level-2 { padding-left:.9rem; }
.toc-link.level-3 { padding-left:1.35rem; font-size:.82rem; }
.toc-link.active { background: var(--accent-soft); color:var(--accent-ink); font-weight:600; }

.toc-backdrop { display:none; }
.loading, .error, .empty { color: var(--muted); }

@media (max-width: 1150px) {
  .layout { grid-template-columns: 280px 1fr; }
  .toc-panel {
    position: fixed;
    right: 0;
    top: 62px;
    bottom: 0;
    width: min(85vw, 330px);
    max-height: none;
    border-radius: 0;
    transform: translateX(102%);
    transition: transform .2s ease;
    z-index: 25;
  }
  .toc-panel.open { transform: translateX(0); }
  .toc-backdrop { display:block; position:fixed; inset:62px 0 0 0; background:rgba(15,23,42,.45); opacity:0; pointer-events:none; transition: opacity .2s ease; z-index:24; }
  .toc-backdrop.open { opacity:1; pointer-events:auto; }
  #toc-toggle { display:inline-flex; }
  .toc-fab { display:inline-flex; align-items:center; gap:.3rem; }
  .toc-panel.open ~ .toc-fab { opacity: 0; pointer-events: none; }
}

@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .feed-panel { position: static; max-height:none; }
}