:root{
  --bg:#ffffff; --fg:#1f2328; --muted:#57606a; --border:#d0d7de;
  --link:#0969da; --code-bg:#f6f8fa; --card:#f6f8fa; --accent:#0969da;
  --topbar:#ffffffee; --drawer:#ffffff; --shadow:0 8px 30px rgba(0,0,0,.12);
  --maxw:46rem;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0d1117; --fg:#e6edf3; --muted:#9198a1; --border:#30363d;
    --link:#4493f8; --code-bg:#161b22; --card:#161b22; --accent:#4493f8;
    --topbar:#0d1117ee; --drawer:#161b22; --shadow:0 8px 30px rgba(0,0,0,.5);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}

/* Top bar */
.topbar{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:.5rem;
  padding:.4rem .6rem; background:var(--topbar); backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--border);
}
.site-title{font-weight:700; font-size:1.05rem; flex:1; color:var(--fg)}
.site-title:hover{text-decoration:none}
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; padding:0; border:0; background:transparent;
  color:var(--fg); cursor:pointer; border-radius:8px; font-size:1.1rem;
}
.icon-btn:hover{background:var(--card)}
.bars,.bars::before,.bars::after{
  display:block; width:20px; height:2px; background:currentColor; border-radius:2px;
  content:""; position:relative;
}
.bars{position:relative}
.bars::before{position:absolute; top:-6px}
.bars::after{position:absolute; top:6px}

/* Drawer */
.scrim{
  position:fixed; inset:0; background:rgba(0,0,0,.4); opacity:0; visibility:hidden;
  transition:opacity .2s; z-index:45;
}
.scrim.open{opacity:1; visibility:visible}
.drawer{
  position:fixed; top:0; left:0; bottom:0; width:min(84vw,320px); z-index:50;
  background:var(--drawer); border-right:1px solid var(--border);
  transform:translateX(-102%); transition:transform .22s ease; overflow-y:auto;
  box-shadow:var(--shadow); padding:.5rem .4rem 2rem;
}
.drawer.open{transform:none}
.drawer-head{font-weight:700; padding:.6rem .6rem .3rem; color:var(--muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.05em}
.nav-top{display:block; padding:.7rem .6rem; min-height:44px; font-weight:600; border-radius:8px}
.nav-top:hover{background:var(--card); text-decoration:none}
.nav-sphere{border-top:1px solid var(--border); margin-top:.25rem}
.nav-sphere>summary{
  list-style:none; cursor:pointer; padding:.7rem .6rem; min-height:44px;
  display:flex; align-items:center; font-weight:600; border-radius:8px;
}
.nav-sphere>summary::-webkit-details-marker{display:none}
.nav-sphere>summary::before{content:"\25B8"; margin-right:.5rem; color:var(--muted); transition:transform .15s}
.nav-sphere[open]>summary::before{transform:rotate(90deg)}
.nav-sphere>summary:hover{background:var(--card)}
.nav-sphere>summary a{color:var(--fg)}
.nav-sphere ul{list-style:none; margin:0 0 .3rem; padding:0 0 0 1.1rem}
.nav-sphere li a{display:block; padding:.55rem .6rem; min-height:44px; color:var(--muted); border-radius:8px; font-size:.95rem}
.nav-sphere li a:hover{background:var(--card); color:var(--fg); text-decoration:none}

/* Content */
.content{max-width:var(--maxw); margin:0 auto; padding:1.2rem 1.1rem 3rem}
.content h1{font-size:1.7rem; line-height:1.25; margin:.2rem 0 1rem}
.content h2{font-size:1.3rem; margin:1.8rem 0 .7rem; padding-bottom:.25rem; border-bottom:1px solid var(--border)}
.content h3{font-size:1.1rem; margin:1.4rem 0 .5rem}
.content p{margin:.7rem 0}
.content ul,.content ol{padding-left:1.4rem; margin:.6rem 0}
.content li{margin:.3rem 0}
.content li>ul,.content li>ol{margin:.3rem 0}
blockquote{
  margin:.9rem 0; padding:.4rem .9rem; border-left:4px solid var(--accent);
  color:var(--muted); background:var(--card); border-radius:0 8px 8px 0;
}
blockquote p{margin:.3rem 0}
hr{border:0; border-top:1px solid var(--border); margin:2rem 0}
img{max-width:100%; height:auto}

/* Code */
code{
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:.9em; background:var(--code-bg); padding:.15em .35em; border-radius:6px;
}
pre{
  background:var(--code-bg); border:1px solid var(--border); border-radius:10px;
  padding:.8rem 1rem; overflow-x:auto; margin:.9rem 0;
  -webkit-overflow-scrolling:touch;
}
pre code{background:none; padding:0; font-size:.85rem; white-space:pre}

/* Tables */
.content table{
  border-collapse:collapse; width:100%; margin:0; font-size:.92rem;
}
.content th,.content td{border:1px solid var(--border); padding:.5rem .6rem; text-align:left; vertical-align:top}
.content th{background:var(--card)}
/* wrap tables for horizontal scroll on mobile */
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:.9rem 0; border-radius:8px}

/* Breadcrumb / prevnext / lists */
.breadcrumb{font-size:.9rem; color:var(--muted); margin:0 0 1rem}
.breadcrumb a{color:var(--muted)}
.breadcrumb span{margin:0 .35rem}
.prevnext{display:flex; gap:.8rem; margin-top:2.4rem; border-top:1px solid var(--border); padding-top:1.2rem}
.prevnext a,.prevnext .empty{flex:1; display:flex; flex-direction:column; padding:.7rem .9rem; border:1px solid var(--border); border-radius:10px; min-height:44px}
.prevnext a:hover{background:var(--card); text-decoration:none}
.prevnext .next{text-align:right}
.prevnext span{font-size:.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.2rem}
.prevnext .empty{border:0}
.sphere-list{list-style:none; padding:0}
.sphere-list li{margin:.4rem 0; padding:.8rem 1rem; border:1px solid var(--border); border-radius:10px}
.sphere-list li a{font-weight:600; font-size:1.05rem}
.sphere-list li p{margin:.3rem 0 0; color:var(--muted); font-size:.9rem}
.sphere-count{color:var(--muted)}

/* Diagram embeds */
.diagram-embed{margin:1rem 0; border:1px solid var(--border); border-radius:10px; padding:.4rem .8rem; background:var(--card)}
.diagram-embed>summary{cursor:pointer; font-weight:600; padding:.4rem 0}
.diagram-svg{overflow-x:auto; text-align:center}
.diagram-svg svg{max-width:100%; height:auto}
.diagram-desc{color:var(--muted); font-size:.92rem}
.vg-item{margin:2rem 0; padding-bottom:1.5rem; border-bottom:1px solid var(--border)}

/* Site artwork */
.hero{display:block; width:100%; height:auto; border-radius:12px; margin:0 0 1.2rem}
.sphere-icon{display:block; width:96px; height:96px; border-radius:20px; margin:0 0 .8rem}

/* Search overlay */
.search-overlay{
  position:fixed; inset:0; z-index:60; background:var(--bg); display:none;
  flex-direction:column; padding:.6rem;
}
.search-overlay.open{display:flex}
.search-box{display:flex; gap:.5rem; align-items:center; padding:.3rem .2rem}
#searchInput{
  flex:1; font-size:1.05rem; padding:.7rem .8rem; border:1px solid var(--border);
  border-radius:10px; background:var(--card); color:var(--fg); min-height:44px;
}
.search-results{list-style:none; margin:.6rem 0 0; padding:0; overflow-y:auto; flex:1}
.search-results li{margin:0}
.search-results a{display:block; padding:.8rem .7rem; border-bottom:1px solid var(--border); border-radius:8px}
.search-results a:hover{background:var(--card); text-decoration:none}
.search-results .r-title{font-weight:600}
.search-results .r-sphere{font-size:.78rem; color:var(--accent); text-transform:uppercase; letter-spacing:.04em}
.search-results .r-excerpt{color:var(--muted); font-size:.88rem; margin-top:.2rem}
.search-empty{color:var(--muted); padding:1rem .7rem}

.site-footer{max-width:var(--maxw); margin:0 auto; padding:2rem 1.1rem 3rem; color:var(--muted); font-size:.88rem; border-top:1px solid var(--border)}

@media (min-width:900px){
  .content h1{font-size:2rem}
}