:root {
  --bg:#f6f8fb; --panel:#ffffff; --panel-2:#eef2f6; --text:#17202a; --muted:#4b5563;
  --line:#cbd5e1; --brand:#005a67; --brand-2:#003f49; --accent:#8a4f00; --danger:#a61b1b;
  --focus:#0b6fff; --code:#101820; --code-text:#f1f5f9; --shadow:0 8px 28px rgba(15,23,42,.10);
  --sidebar:300px; --content:900px;
}
[data-theme="dark"] {
  --bg:#0d1117; --panel:#161b22; --panel-2:#21262d; --text:#f0f3f6; --muted:#b6bec9;
  --line:#3d444d; --brand:#63d4e2; --brand-2:#a7edf4; --accent:#ffbd66; --danger:#ff8b8b;
  --focus:#80bfff; --code:#080c10; --code-text:#f1f5f9; --shadow:0 8px 28px rgba(0,0,0,.35);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.65 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color:var(--brand); text-underline-offset:3px; }
a:hover { color:var(--brand-2); }
button,input { font:inherit; }
.skip-link { position:fixed; left:8px; top:-60px; z-index:100; background:var(--panel); padding:10px 14px; border-radius:8px; }
.skip-link:focus { top:8px; }
.topbar { position:fixed; inset:0 0 auto 0; height:64px; z-index:30; display:flex; align-items:center; gap:14px; padding:0 20px; background:color-mix(in srgb,var(--panel) 93%,transparent); border-bottom:1px solid var(--line); backdrop-filter:blur(12px); }
.brand { display:flex; align-items:center; gap:10px; min-width:calc(var(--sidebar) - 20px); color:var(--text); text-decoration:none; font-weight:750; letter-spacing:-.02em; }
.brand-mark { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:white; background:linear-gradient(145deg,#073b4c,#005a67); font-weight:900; }
.top-actions { margin-left:auto; display:flex; gap:8px; }
.icon-btn,.search-btn { border:1px solid var(--line); background:var(--panel); color:var(--text); border-radius:10px; min-height:40px; padding:8px 12px; cursor:pointer; }
.search-btn { min-width:210px; color:var(--muted); text-align:left; }
.layout { display:grid; grid-template-columns:var(--sidebar) minmax(0,1fr); padding-top:64px; min-height:100vh; }
.sidebar { position:fixed; top:64px; bottom:0; width:var(--sidebar); overflow:auto; padding:20px 16px 28px; border-right:1px solid var(--line); background:var(--panel); }
.nav-group { margin-bottom:18px; }
.nav-group-title { margin:0 8px 7px; color:var(--muted); font-size:.73rem; font-weight:800; text-transform:uppercase; letter-spacing:.11em; }
.nav-link { display:block; margin:2px 0; padding:7px 9px; border-radius:8px; color:var(--muted); text-decoration:none; font-size:.91rem; line-height:1.28; }
.nav-link:hover { background:var(--panel-2); color:var(--text); }
.nav-link.active { background:var(--panel-2); color:var(--brand-2); font-weight:700; box-shadow:inset 3px 0 var(--brand); }
.sidebar-meta { padding:14px 9px; margin-top:16px; border-top:1px solid var(--line); color:var(--muted); font-size:.8rem; }
.main { grid-column:2; min-width:0; }
.content-wrap { width:min(100% - 48px, var(--content)); margin:0 auto; padding:48px 0 80px; }
.breadcrumbs { color:var(--muted); font-size:.84rem; margin-bottom:18px; }
.breadcrumbs a { color:inherit; }
.eyebrow { color:var(--brand); font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; font-weight:800; }
h1,h2,h3,h4 { line-height:1.2; letter-spacing:-.025em; scroll-margin-top:84px; }
h1 { font-size:clamp(2.1rem,5vw,3.35rem); margin:.25rem 0 1rem; }
h2 { font-size:1.65rem; margin:2.8rem 0 .8rem; padding-top:.25rem; }
h3 { font-size:1.25rem; margin:2rem 0 .55rem; }
p { margin:.7rem 0 1rem; }
.lede { color:var(--muted); font-size:1.15rem; max-width:760px; }
.page-meta { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 30px; }
.badge { border:1px solid var(--line); border-radius:999px; padding:4px 10px; font-size:.78rem; color:var(--muted); background:var(--panel); }
.prose img { max-width:100%; border-radius:12px; }
.prose ul,.prose ol { padding-left:1.45rem; }
.prose li { margin:.28rem 0; }
.prose table { width:100%; border-collapse:collapse; margin:1.2rem 0 1.7rem; display:block; overflow:auto; border:1px solid var(--line); border-radius:10px; background:var(--panel); }
.prose th,.prose td { padding:10px 12px; border-bottom:1px solid var(--line); border-right:1px solid var(--line); text-align:left; vertical-align:top; min-width:145px; }
.prose th { background:var(--panel-2); font-size:.85rem; }
.prose tr:last-child td { border-bottom:0; }
.prose blockquote { margin:1.25rem 0; padding:12px 18px; border-left:4px solid var(--brand); background:var(--panel-2); border-radius:0 8px 8px 0; }
pre { overflow:auto; padding:18px; background:var(--code); color:var(--code-text); border-radius:12px; font-size:.86rem; line-height:1.5; box-shadow:var(--shadow); }
code { font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace; }
:not(pre)>code { background:var(--panel-2); border:1px solid var(--line); padding:.1em .35em; border-radius:5px; font-size:.9em; }
.callout { margin:1.4rem 0; padding:15px 17px; border:1px solid var(--line); border-left:5px solid var(--brand); border-radius:10px; background:var(--panel); box-shadow:var(--shadow); }
.callout.important { border-left-color:var(--accent); }
.callout.warning { border-left-color:var(--danger); }
.toc { margin:24px 0 35px; padding:16px 18px; background:var(--panel); border:1px solid var(--line); border-radius:12px; }
.toc strong { display:block; margin-bottom:7px; }
.toc a { display:block; text-decoration:none; padding:2px 0; color:var(--muted); font-size:.91rem; }
.toc a.toc-h3 { padding-left:14px; font-size:.86rem; }
.page-nav { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:52px; padding-top:24px; border-top:1px solid var(--line); }
.page-nav a { display:block; border:1px solid var(--line); border-radius:10px; background:var(--panel); padding:12px 14px; text-decoration:none; }
.page-nav a:last-child { text-align:right; }
.page-nav small { display:block; color:var(--muted); }
.hero { padding:20px 0 18px; }
.hero-grid { display:grid; grid-template-columns:1.3fr .7fr; gap:26px; align-items:start; }
.hero-panel { background:linear-gradient(145deg,#073b4c,#005a67); color:#ffffff; border:1px solid #063340; border-radius:18px; padding:26px; box-shadow:var(--shadow); }
.hero-panel h2 { margin:0 0 8px; }
.hero-panel p { opacity:1; color:#f4fbfc; }
.hero-panel a { color:white; font-weight:700; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:22px 0; }
.stat { background:var(--panel); border:1px solid var(--line); padding:14px; border-radius:12px; }
.stat strong { display:block; font-size:1.6rem; line-height:1.1; }
.stat span { color:var(--muted); font-size:.8rem; }
.card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:16px 0 30px; }
.card { display:block; padding:17px; background:var(--panel); border:1px solid var(--line); border-top-width:4px; border-top-color:transparent; border-radius:12px; color:var(--text); text-decoration:none; transition:.15s transform,.15s box-shadow; }
.card:hover { transform:translateY(-2px); box-shadow:var(--shadow); color:var(--text); border-color:var(--brand); }
.card small { color:var(--brand); text-transform:uppercase; letter-spacing:.08em; font-weight:800; }
.card h3 { margin:.35rem 0; font-size:1.08rem; }
.card p { color:var(--muted); margin:0; font-size:.9rem; }
.search-dialog { width:min(720px,calc(100% - 24px)); border:1px solid var(--line); border-radius:14px; padding:0; background:var(--panel); color:var(--text); box-shadow:0 20px 80px rgba(0,0,0,.35); }
.search-dialog::backdrop { background:rgba(0,0,0,.45); backdrop-filter:blur(3px); }
.search-head { display:flex; padding:14px; gap:8px; border-bottom:1px solid var(--line); }
.search-head input { flex:1; border:1px solid var(--line); border-radius:9px; padding:10px 12px; background:var(--bg); color:var(--text); }
.search-results { max-height:60vh; overflow:auto; padding:8px; }
.search-result { display:block; padding:12px; border-radius:9px; text-decoration:none; color:var(--text); }
.search-result:hover,.search-result.selected { background:var(--panel-2); }
.search-result strong { display:block; }
.search-result span { color:var(--muted); font-size:.86rem; }
.footer { margin-top:55px; color:var(--muted); font-size:.82rem; }
.mobile-menu { display:none; }
@media (max-width:980px) {
  :root { --sidebar:270px; }
  .hero-grid { grid-template-columns:1fr; }
}
@media (max-width:780px) {
  .brand { min-width:0; flex:1; }
  .search-btn { min-width:0; width:44px; overflow:hidden; white-space:nowrap; color:transparent; position:relative; }
  .search-btn::after { content:"⌕"; color:var(--text); position:absolute; inset:0; display:grid; place-items:center; }
  .mobile-menu { display:inline-block; }
  .layout { display:block; }
  .sidebar { transform:translateX(-105%); transition:.2s transform; z-index:25; box-shadow:var(--shadow); }
  body.nav-open .sidebar { transform:translateX(0); }
  .main { grid-column:auto; }
  .content-wrap { width:min(100% - 30px,var(--content)); padding-top:34px; }
  .card-grid,.page-nav,.stats { grid-template-columns:1fr; }
  h1 { font-size:2.15rem; }
}
@media print {
  .topbar,.sidebar,.toc,.page-nav,.search-dialog { display:none!important; }
  .layout,.main { display:block; padding:0; }
  .content-wrap { width:100%; max-width:none; padding:0; }
  body { background:white; color:black; font-size:11pt; }
  a { color:black; text-decoration:none; }
  pre { white-space:pre-wrap; color:black; background:#f2f2f2; box-shadow:none; }
  .prose table { display:table; }
}


/* Version 0.2 accessibility and architecture components */
:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.skip-link:focus { color:var(--text); border:2px solid var(--focus); }
.hero-grid .callout { background:var(--panel); color:var(--text); border-left-color:var(--accent); }
.hero-grid .callout a { font-weight:700; }
.featured-card { border-top-color:var(--brand); background:var(--panel); }
.stat { border-top:4px solid var(--brand); }
.architecture { display:grid; gap:10px; margin:1.25rem 0 1.75rem; }
.arch-node { padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--panel); color:var(--text); text-align:center; font-weight:700; }
.arch-node small { display:block; color:var(--muted); font-weight:500; margin-top:4px; }
.arch-node.accent { background:#073b4c; color:#fff; border-color:#073b4c; }
.arch-node.accent small { color:#e6f7fa; }
.arch-arrow { text-align:center; color:var(--muted); font-weight:800; }
.arch-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.callout.success { border-left-color:var(--brand); background:var(--panel); }
.card small,.eyebrow { color:var(--brand); }
@media (forced-colors:active) { * { forced-color-adjust:auto; } .brand-mark,.arch-node.accent,.hero-panel { border:2px solid CanvasText; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }
@media (max-width:560px) { .arch-grid { grid-template-columns:1fr; } }