:root, [data-theme="light"]{
  --bg:      oklch(98% 0.005 250);
  --surface: oklch(100% 0 0);
  --fg:      oklch(22% 0.02 240);
  --muted:   oklch(50% 0.018 240);
  --border:  oklch(90% 0.008 240);
  --accent:  oklch(58% 0.16 145);

  --bg-soft:    color-mix(in oklch, var(--fg) 3%, var(--bg));
  --surface-2:  color-mix(in oklch, var(--fg) 3%, var(--surface));
  --accent-soft:color-mix(in oklch, var(--accent) 12%, transparent);
  --accent-fg:  color-mix(in oklch, var(--accent) 80%, oklch(22% 0.02 240));
  --accent-hover:color-mix(in oklch, var(--accent) 90%, var(--fg) 10%);
}
[data-theme="dark"]{
  --bg:      oklch(19% 0.02 250);
  --surface: oklch(24% 0.022 250);
  --fg:      oklch(93% 0.01 250);
  --muted:   oklch(69% 0.02 250);
  --border:  oklch(32% 0.028 250);
  --accent:  oklch(74% 0.17 150);

  --bg-soft:    color-mix(in oklch, var(--fg) 4%, var(--bg));
  --surface-2:  color-mix(in oklch, var(--fg) 4%, var(--surface));
  --accent-soft:color-mix(in oklch, var(--accent) 18%, transparent);
  --accent-fg:  color-mix(in oklch, var(--accent) 82%, oklch(93% 0.01 250));
  --accent-hover:color-mix(in oklch, var(--accent) 90%, var(--fg) 10%);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',system-ui,sans-serif;
  font-size:16px;line-height:1.6;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
::selection{background:var(--accent-soft);color:inherit}
[data-theme]{color-scheme:light}
[data-theme="dark"]{color-scheme:dark}

.mono{font-family:'JetBrains Mono','IBM Plex Mono',ui-monospace,Menlo,monospace}
.font-display{font-family:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',system-ui,sans-serif}

.scroll-col::-webkit-scrollbar{width:10px;height:10px}
.scroll-col::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px;border:3px solid var(--bg)}
.scroll-col::-webkit-scrollbar-thumb:hover{background:var(--muted)}
.scroll-col::-webkit-scrollbar-track{background:transparent}

a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;
}

/* prose */
.prose{width:100%;font-size:clamp(16.5px,0.5vw + 14.5px,19px);line-height:1.75}
.prose>*:first-child{margin-top:0}
.prose h1,.prose h2,.prose h3,.prose h4{
  font-family:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',system-ui,sans-serif;
  font-weight:600;letter-spacing:-0.02em;line-height:1.25;
  text-wrap:balance;scroll-margin-top:96px;
}
.prose h1{font-size:clamp(2.4rem,5vw,3.2rem);margin:3.5rem 0 1.2rem}
.prose h2{font-size:clamp(1.7rem,3vw,2.1rem);margin:2.8rem 0 1rem;padding-bottom:.4rem;border-bottom:1px solid var(--border)}
.prose h3{font-size:clamp(1.3rem,2vw,1.5rem);margin:2.2rem 0 .7rem}
.prose h4{font-size:1.1rem;margin:1.8rem 0 .6rem}
.prose p{margin:1.15rem 0;text-wrap:pretty}
.prose a{color:var(--accent-fg);font-weight:500;border-bottom:1px solid transparent}
.prose a:hover{border-bottom-color:var(--accent-fg)}
.prose a[target="_blank"]::after{
  content:"";display:inline-block;width:.72em;height:.72em;margin-left:.3em;
  background:currentColor;opacity:.6;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14L21 3'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14L21 3'/%3E%3C/svg%3E") center/contain no-repeat;
}
.prose strong{font-weight:650}
.prose ul,.prose ol{margin:1.15rem 0;padding-left:1.5rem}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin:.4rem 0}
.prose li>ul,.prose li>ol{margin:.4rem 0}
.prose li>ul{list-style:circle}
.prose hr{border:0;border-top:1px solid var(--border);margin:3rem 0}
.prose table{display:block;width:100%;overflow-x:auto;border-collapse:collapse;margin:1.6rem 0;font-size:.95rem}
.prose th,.prose td{padding:.55rem .9rem;text-align:left;border:1px solid var(--border)}
.prose th{background:var(--bg-soft);font-weight:600;white-space:nowrap}
.prose tr:nth-child(even) td{background:var(--bg-soft)}

.prose blockquote{
  margin:1.4rem 0;padding:1rem 1.3rem;border-left:3px solid var(--accent);
  background:var(--bg-soft);border-radius:0 10px 10px 0;color:var(--fg);
}
.prose blockquote p{margin:0}
.prose blockquote p+p{margin-top:.5rem}

/* callouts */
.callout{
  display:flex;gap:.85rem;margin:1.5rem 0;padding:1rem 1.15rem;
  border-radius:10px;border:1px solid var(--border);border-left-width:3px;
}
.callout-icon{flex:none;width:20px;height:20px;margin-top:.15rem}
.callout-body p{margin:0;color:var(--muted);font-size:.95rem}
.callout-body p+p{margin-top:.4rem}
.callout-title{font-weight:600;font-size:.92rem;text-transform:none;color:var(--fg)}
.callout-note{border-left-color:var(--accent)}
.callout-tip,.callout-important{border-left-color:var(--accent)}
.callout-warning,.callout-caution{border-left-color:var(--warn)}
:root{--warn: oklch(65% 0.15 45)}
[data-theme="dark"]{--warn: oklch(75% 0.15 45)}

/* inline code */
.prose code{
  font-family:'JetBrains Mono','IBM Plex Mono',ui-monospace,Menlo,monospace;
  font-size:.85em;background:var(--surface-2);border:1px solid var(--border);
  padding:.14em .42em;border-radius:6px;color:var(--fg);
}
.prose pre code{border:0;padding:0;background:transparent}

/* code blocks */
.codeblock{
  margin:1.5rem 0;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface);
}
.codeblock-head{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.5rem .85rem;border-bottom:1px solid var(--border);background:var(--bg-soft);
}
.codeblock-lang{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.codeblock-copy{
  font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:.72rem;color:var(--muted);
  display:inline-flex;align-items:center;gap:.4rem;background:transparent;border:0;padding:.3rem .5rem;border-radius:6px;
}
.codeblock-copy:hover{color:var(--fg);background:var(--surface-2)}
.codeblock-copy .ic{width:14px;height:14px}
.codeblock pre{margin:0;padding:1rem 1.1rem;overflow-x:auto;line-height:1.55;font-size:.85rem}
.codeblock code{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;color:var(--fg)}

/* syntax tokens */
.token-kw{color:var(--accent);font-weight:500}
.token-str{color:var(--syntax-str)}
.token-com{color:var(--muted);font-style:italic}
.token-num{color:var(--syntax-num)}
.token-fun{color:var(--syntax-fun);font-weight:500}
.token-bool{color:var(--syntax-num)}
.token-punc{color:var(--muted)}
:root{--syntax-str:oklch(46% 0.12 250);--syntax-num:oklch(52% 0.13 60);--syntax-fun:oklch(48% 0.13 280)}
[data-theme="dark"]{--syntax-str:oklch(78% 0.10 250);--syntax-num:oklch(78% 0.12 75);--syntax-fun:oklch(78% 0.10 285)}

/* pygments token colors (mapped to theme vars) */
.codeblock .k,.codeblock .kd,.codeblock .kn,.codeblock .kr,.codeblock .ow{color:var(--accent);font-weight:500}
.codeblock .s,.codeblock .s1,.codeblock .s2,.codeblock .sb,.codeblock .sc,.codeblock .sd,.codeblock .se,.codeblock .sh,.codeblock .si,.codeblock .sx{color:var(--syntax-str)}
.codeblock .c,.codeblock .c1,.codeblock .cm,.codeblock .cp,.codeblock .cs{color:var(--muted);font-style:italic}
.codeblock .m,.codeblock .mi,.codeblock .mf,.codeblock .mh,.codeblock .mo,.codeblock .il,.codeblock .kc,.codeblock .kt{color:var(--syntax-num)}
.codeblock .nf{color:var(--syntax-fun);font-weight:500}
.codeblock .o,.codeblock .p{color:var(--muted)}
.codeblock .n,.codeblock .nb,.codeblock .na,.codeblock .nc,.codeblock .no,.codeblock .nd,.codeblock .ni,.codeblock .nl,.codeblock .nn,.codeblock .nx,.codeblock .py,.codeblock .bp,.codeblock .vc,.codeblock .vg,.codeblock .vi{color:var(--fg)}
.codeblock .err{color:var(--warn)}

/* mermaid diagrams */
.mermaid-block{margin:1.5rem 0;border:1px solid var(--border);border-radius:12px;background:var(--surface);overflow:hidden}
.mermaid{display:flex;justify-content:center;align-items:center;margin:0;padding:1.25rem;overflow-x:auto;background:transparent;text-align:center;line-height:1.5}
.mermaid svg{max-width:100%;height:auto}
.mermaid-error{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:.8rem;color:var(--warn);white-space:pre-wrap;text-align:left;width:100%}

.prose img{border-radius:10px;border:1px solid var(--border);margin:1.6rem 0;max-width:100%;height:auto}
.prose .figure{font-size:.85rem;color:var(--muted);text-align:center;margin:-1rem 0 2rem}

/* sidebar nav */
.nav-group>button .chev{transition:transform .18s ease}
.nav-group.open>button .chev{transform:rotate(90deg)}
.nav-page-row{display:flex;align-items:center;position:relative}
.nav-page-link{flex:1;min-width:0}
.nav-page-toggle{display:grid;place-items:center;flex:none;width:26px;height:26px;margin-right:2px;color:var(--muted);border-radius:6px}
.nav-page-toggle:hover{background:var(--bg-soft);color:var(--fg)}
.nav-page-toggle .chev{transition:transform .18s ease}
.nav-group.open .nav-page-toggle .chev{transform:rotate(90deg)}
.nav-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .2s ease}
.nav-group.open>.nav-sub{grid-template-rows:1fr}
.nav-sub>div{overflow:hidden;min-height:0}
.nav-link.current{background:var(--accent-soft);color:var(--fg);font-weight:500}
.nav-link.current::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:99px;background:var(--accent)}
.bg-muted{background:var(--bg-soft)}
.hover-soft:hover{background:var(--bg-soft)}
.reveal{animation:reveal .35s ease forwards}
@keyframes reveal{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.kbd{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:.72rem;border:1px solid var(--border);border-bottom-width:2px;border-radius:5px;padding:.05rem .4rem;background:var(--bg-soft);color:var(--muted)}

/* auth */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;width:100%;height:44px;background:var(--accent);color:var(--bg);font-weight:600;font-size:.95rem;border:0;border-radius:10px;transition:background .15s;cursor:pointer}
.btn-primary:hover{background:var(--accent-hover)}
.btn-primary:active{transform:translateY(1px)}
.btn-primary[disabled]{opacity:.6;cursor:not-allowed}
.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;width:100%;height:44px;background:var(--surface);color:var(--fg);font-weight:500;font-size:.9rem;border:1px solid var(--border);border-radius:10px;transition:background .15s,border-color .15s;cursor:pointer}
.btn-secondary:hover{background:var(--bg-soft);border-color:var(--muted)}
.input{width:100%;height:44px;padding:0 .85rem;font-size:.92rem;color:var(--fg);background:var(--bg-soft);border:1px solid var(--border);border-radius:10px;transition:border-color .15s,background .15s}
.input::placeholder{color:var(--muted)}
.input:hover{border-color:var(--muted)}
.input:focus,.input:focus-visible{outline:none;border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px var(--accent-soft)}
.field-label{font-family:'JetBrains Mono','IBM Plex Mono',ui-monospace,Menlo,monospace;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.err{color:var(--warn);font-size:.8rem}
.err::before{content:"!";display:inline-block;width:1em;text-align:center;margin-right:.3em;font-weight:700}
.accent-checkbox{accent-color:var(--accent);width:1rem;height:1rem;cursor:pointer}
.toast{position:fixed;left:50%;bottom:1.25rem;transform:translateX(-50%);z-index:60;display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--border);background:var(--surface);color:var(--fg);font-size:.85rem;padding:.55rem .9rem;border-radius:10px;box-shadow:0 12px 30px -14px rgba(0,0,0,.4)}

/* password strength meter */
.meter{display:grid;grid-template-columns:repeat(4,1fr);gap:.35rem;margin-top:.6rem}
.meter span{height:4px;border-radius:99px;background:var(--border);transition:background .2s}
.meter span.on{background:var(--accent)}
.meter-strong span.on{background:var(--accent)}
.meter-weak span.on{background:var(--warn)}
.strength-label{font-size:.72rem;color:var(--muted);margin-top:.35rem}