@font-face { font-family:'NdebePlain-Regular'; src: url('../font/NdebeRounded.woff?v=symbols-5') format('woff'); font-display:swap; }
* { box-sizing: border-box; }
body { margin:0; background:#fff; color:#111; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; line-height:1.55; font-size:17px; }
.topbar { background:#000; color:#fff; padding:12px 20px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.topbar .brand a { color:#fff; text-decoration:none; font-weight:bold; font-size:1.15rem; }
.topbar .nd-brand { font-family:'NdebePlain-Regular'; color:#BB3E03; font-size:1.6rem; margin-left:10px; vertical-align:-0.1em; }
.topbar .ext a { color:#fff; opacity:0.85; text-decoration:none; font-size:0.95rem; margin-left:18px; }
.topbar .ext a:hover { opacity:1; text-decoration:underline; }
.pagenav { background:#111; border-bottom:3px solid #BB3E03; padding:0 12px; display:flex; flex-wrap:wrap; gap:2px; position:sticky; top:0; z-index:10; }
.pagenav a { color:#ddd; text-decoration:none; padding:10px 12px; font-size:0.93rem; white-space:nowrap; }
.pagenav a:hover { color:#fff; background:#222; }
.pagenav a.current { color:#fff; background:#BB3E03; font-weight:bold; }
.hero { background:#000; color:#fff; text-align:center; padding:28px 20px 32px; }
.hero h1 { margin:0; font-size:2rem; }
.hero .sub { font-size:0.95rem; opacity:0.75; margin:4px 0 0; letter-spacing:0.02em; text-transform:uppercase; }
.hero .nd-big { font-family:'NdebePlain-Regular'; color:#BB3E03; font-size:3rem; letter-spacing:0.18em; margin:12px 0 4px; line-height:1.1; }
.hero p.lead { margin:8px auto 0; max-width:720px; opacity:0.9; }
main { max-width: 900px; margin: 0 auto; padding: 24px 20px 40px; }
h2 { font-size:1.55rem; margin:1.8em 0 0.6em; padding-bottom:6px; border-bottom:3px solid #BB3E03; scroll-margin-top:60px; }
main > h2:first-child, main > .tocbox + h2 { margin-top:0.6em; }
h3 { font-size:1.25rem; margin:1.8em 0 0.5em; color:#BB3E03; scroll-margin-top:60px; }
h4 { font-size:1.05rem; margin:1.4em 0 0.4em; scroll-margin-top:60px; }
p { margin:0.6em 0; }
a { color:#BB3E03; }
a.xref { text-decoration:none; border-bottom:1px dotted #BB3E03; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:0.9em; background:#f3f3f3; padding:1px 4px; border-radius:3px; white-space:nowrap; }
.nd { font-family:'NdebePlain-Regular'; font-size:1.55em; line-height:1; vertical-align:-0.12em; color:#000; padding:0 0.06em; }
.ndg { margin-left:0.15em; white-space:nowrap; }
.vp { font-family:'NdebePlain-Regular'; font-size:1.55em; font-weight:normal; padding:0 0.05em; }
.scroll { overflow-x:auto; margin:0.8em 0; -webkit-overflow-scrolling: touch; }
table { border-collapse:collapse; min-width:50%; }
th, td { border:1px solid #ddd; padding:6px 10px; text-align:left; vertical-align:middle; }
th { background:#000; color:#fff; font-size:0.9rem; }
td .nd { font-size:1.8em; }
table.codeblock { width:100%; background:#f6f6f6; border:1px solid #e2e2e2; }
table.codeblock td { border:none; padding:2px 10px; }
table.codeblock td.c { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:0.88em; white-space:pre; width:60%; }
table.codeblock td.g { border-left:1px solid #e2e2e2; }
table.codeblock td.g .nd { font-size:1.7em; }
hr { border:none; border-top:1px solid #e2e2e2; margin:2em 0; }
ul, ol { padding-left:1.4em; }
li { margin:0.25em 0; }
s { color:#888; }
.keyfig { border:1px solid #e2e2e2; background:#fafafa; padding:12px 14px; margin:1em 0 1.4em; }
.keyrow { display:flex; flex-wrap:wrap; gap:8px 4px; justify-content:space-between; }
.kcell { text-align:center; min-width:34px; }
.kg { font-family:'NdebePlain-Regular'; font-size:2.6rem; line-height:1.1; }
.kl { font-size:0.8rem; color:#666; }
.keycap { font-size:0.9rem; color:#444; margin-top:8px; }
.tocbox { background:#fafafa; border:1px solid #e2e2e2; padding:12px 18px; margin:0 0 1em; }
.tocbox summary { cursor:pointer; font-weight:bold; }
.tocbox ul { list-style:none; padding-left:0; margin:0.6em 0 0; }
.tocbox ul ul { padding-left:1.2em; }
.tocbox li { margin:0.2em 0; }
.tocbox a { text-decoration:none; }
.tocbox a:hover { text-decoration:underline; }
.cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:12px; margin:1em 0 1.6em; }
.card { border:1px solid #e2e2e2; border-top:4px solid #BB3E03; padding:12px 14px; text-decoration:none; color:#111; background:#fff; }
.card:hover { background:#fafafa; }
.card .cn { font-family:'NdebePlain-Regular'; font-size:2rem; color:#BB3E03; line-height:1; }
.card .ct { font-weight:bold; margin-top:6px; }
.card .cd { font-size:0.88rem; color:#555; margin-top:2px; }
.prevnext { display:flex; justify-content:space-between; gap:12px; margin:2.5em 0 0; padding-top:1.2em; border-top:1px solid #e2e2e2; }
.prevnext a { text-decoration:none; font-weight:bold; }
.footer { background:#000; color:#fff; padding:20px; text-align:center; font-size:0.9rem; }
.footer a { color:#fff; }
@media (max-width: 600px) {
  body { font-size:16px; }
  main { padding:18px 14px 40px; }
  .hero h1 { font-size:1.55rem; }
  .hero .nd-big { font-size:2.3rem; }
  table.codeblock td.c { width:auto; }
  .topbar { padding:10px 14px; }
  .pagenav { padding:0 4px; }
  .pagenav a { padding:9px 9px; font-size:0.88rem; }
}