:root { color-scheme: light; --site-bg:#f8fafc; --site-fg:#0f172a; --site-muted:#475569; --site-border:#dce3ed; --site-primary:#2563eb; }
html[data-theme="dark"] { color-scheme:dark; --site-bg:#090f1d; --site-fg:#f8fafc; --site-muted:#cbd5e1; --site-border:#334155; --site-primary:#93c5fd; }
* { box-sizing:border-box; }
html { scroll-padding-top:8rem; }
body { margin:0; }
button, a { -webkit-tap-highlight-color:transparent; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline:3px solid var(--site-primary); outline-offset:4px; }
.site-skip { position:fixed; top:-10rem; inset-inline-start:1rem; z-index:100; padding:.7rem 1rem; background:var(--site-fg); color:var(--site-bg); border-radius:.5rem; }
.site-skip:focus { top:1rem; }
header button, header a[data-switch] { min-height:40px; min-width:40px; display:inline-flex; align-items:center; justify-content:center; }
a[data-switch][aria-current] { box-shadow:0 0 0 2px var(--site-primary); }
.material-symbols-outlined { user-select:none; }
.site-footer { padding:2rem max(1.5rem,calc((100vw - 1344px)/2)); border-top:1px solid var(--site-border); background:var(--site-bg); color:var(--site-muted); display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:space-between; }
.site-footer nav { display:flex; flex-wrap:wrap; gap:1.2rem; }
.site-footer a { color:inherit; text-decoration:underline; text-underline-offset:4px; }
.site-faq { max-width:1200px; margin:auto; padding:4rem 1.5rem; color:var(--site-fg); }
.site-faq h2 { font-size:clamp(1.8rem,3vw,2.4rem); font-weight:700; margin-bottom:1.5rem; }
.site-faq details { border-bottom:1px solid var(--site-border); padding:1.2rem 0; }
.site-faq summary { cursor:pointer; font-weight:600; font-size:1.05rem; }
.site-faq p { line-height:1.8; color:var(--site-muted); max-width:70ch; margin-top:1rem; }
.site-doc { max-width:880px; margin:0 auto; padding:3rem 1.5rem 5rem; font-family:Inter,Cairo,system-ui,sans-serif; color:var(--site-fg); line-height:1.8; }
.site-doc h1 { font-size:clamp(2rem,5vw,3rem); font-weight:700; line-height:1.25; }
.site-doc h2 { font-size:1.35rem; font-weight:700; margin-top:2rem; }
.site-doc a { color:var(--site-primary); text-decoration:underline; }
.site-doc pre { direction:ltr; text-align:left; overflow:auto; padding:1rem; border:1px solid var(--site-border); border-radius:.6rem; font-size:.9rem; }
.site-note { border-inline-start:4px solid var(--site-primary); padding:1rem; background:var(--site-bg); }
@media(max-width:900px) {
  header { position:relative!important; padding:1rem!important; }
  header > div { flex-wrap:wrap!important; gap:1rem!important; }
  header > div > div:first-child { min-width:0; gap:0!important; }
  header > div > a:first-child, header > div > div:first-child > a { white-space:nowrap; flex-shrink:0; }
  header > div > a:first-child span, header > div > div:first-child > a span { font-size:1rem!important; }
  header nav { display:flex!important; flex-wrap:wrap; order:3; width:100%; gap:1rem!important; font-size:.875rem; }
  h1 { font-size:clamp(2rem,8vw,3.5rem)!important; line-height:1.15!important; }
  main { overflow-x:clip; }
  main code, main pre { overflow-wrap:anywhere; white-space:pre-wrap; }
  .site-footer { flex-direction:column; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto!important; } *,*::before,*::after { animation:none!important; transition:none!important; } }