:root{
  --bg:#0a0e1c; --bg-2:#070a15; --surface:#111631; --surface-2:#171d3d; --border:#252c50;
  --ink:#e9ebf6; --muted:#8b93b6; --faint:#5f668c; --accent:#aebde9; --accent-strong:#cdd8f7;
  --accent-glow:rgba(174,189,233,.18); --ok:#74d3ac; --ok-bg:rgba(116,211,172,.12);
  --warn:#e2b56d; --warn-bg:rgba(226,181,109,.12);
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --maxw:1080px; --r:10px; color-scheme:dark;
}
@media (prefers-color-scheme:light){:root{
  --bg:#eceef7; --bg-2:#e3e6f3; --surface:#fff; --surface-2:#f4f6fd; --border:#d7dcef;
  --ink:#141830; --muted:#54608a; --faint:#8b93b6; --accent:#3f4fa0; --accent-strong:#2b3a86;
  --accent-glow:rgba(63,79,160,.14); --ok:#1f9d72; --ok-bg:rgba(31,157,114,.12);
  --warn:#a9761f; --warn-bg:rgba(169,118,31,.12); color-scheme:light;}}
:root[data-theme="dark"]{
  --bg:#0a0e1c; --bg-2:#070a15; --surface:#111631; --surface-2:#171d3d; --border:#252c50;
  --ink:#e9ebf6; --muted:#8b93b6; --faint:#5f668c; --accent:#aebde9; --accent-strong:#cdd8f7;
  --accent-glow:rgba(174,189,233,.18); --ok:#74d3ac; --ok-bg:rgba(116,211,172,.12);
  --warn:#e2b56d; --warn-bg:rgba(226,181,109,.12); color-scheme:dark;}
:root[data-theme="light"]{
  --bg:#eceef7; --bg-2:#e3e6f3; --surface:#fff; --surface-2:#f4f6fd; --border:#d7dcef;
  --ink:#141830; --muted:#54608a; --faint:#8b93b6; --accent:#3f4fa0; --accent-strong:#2b3a86;
  --accent-glow:rgba(63,79,160,.14); --ok:#1f9d72; --ok-bg:rgba(31,157,114,.12);
  --warn:#a9761f; --warn-bg:rgba(169,118,31,.12); color-scheme:light;}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.6;background:
  radial-gradient(1px 1px at 12% 22%,var(--accent-glow),transparent),
  radial-gradient(1px 1px at 78% 14%,var(--accent-glow),transparent),
  radial-gradient(1.5px 1.5px at 44% 68%,var(--accent-glow),transparent),
  radial-gradient(1px 1px at 88% 76%,var(--accent-glow),transparent),
  radial-gradient(1200px 600px at 82% -10%,var(--accent-glow),transparent 60%)}
a{color:var(--accent-strong);text-decoration:none} a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
header.top{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.top .wrap{display:flex;align-items:center;gap:20px;height:60px}
.brand{display:flex;align-items:center;gap:11px}
.brand .mark{width:30px;height:30px;flex:none}
.brand .wm{font-family:var(--mono);font-weight:600;font-size:19px;letter-spacing:-.01em;color:var(--ink)}
.brand .wm sup{color:var(--accent);font-size:.62em;top:-.5em}
.brand .sub{color:var(--faint);font-size:12.5px;margin-left:2px}
.top nav{margin-left:auto;display:flex;align-items:center;gap:22px}
.top nav a{color:var(--muted);font-size:14px} .top nav a:hover{color:var(--ink);text-decoration:none}
.toggle{background:var(--surface-2);border:1px solid var(--border);color:var(--muted);width:34px;height:34px;border-radius:8px;cursor:pointer;font-size:15px;display:grid;place-items:center}
.toggle:hover{color:var(--ink);border-color:var(--accent)}
.hero{position:relative;padding:64px 0 40px;overflow:hidden}
.hero .moon{position:absolute;right:28px;top:28px;width:270px;height:270px;z-index:0;opacity:.85;pointer-events:none;filter:drop-shadow(0 0 60px var(--accent-glow))}
@media(max-width:900px){.hero .moon{width:200px;height:200px;right:8px;top:14px;opacity:.4}}
@media(max-width:600px){.hero .moon{display:none}}
.hero .inner{position:relative;z-index:1;max-width:640px}
.eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0 0 14px}
h1.title{font-size:clamp(30px,5vw,46px);line-height:1.08;letter-spacing:-.02em;margin:0 0 16px;font-weight:640;text-wrap:balance}
h1.title .m{font-family:var(--mono);color:var(--accent-strong);font-weight:600}
.lede{font-size:17.5px;color:var(--muted);margin:0 0 28px;max-width:56ch}
.lede code,.hint code{font-family:var(--mono);color:var(--accent-strong)}
.search{position:relative;max-width:560px}
.search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--faint)}
#q{width:100%;padding:14px 16px 14px 44px;font-size:15.5px;font-family:var(--sans);color:var(--ink);background:var(--surface);border:1px solid var(--border);border-radius:12px}
#q::placeholder{color:var(--faint)}
#q:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 4px var(--accent-glow)}
.hint{margin-top:10px;font-size:13px;color:var(--faint)}
.hint code{background:var(--surface-2);padding:1px 6px;border-radius:5px;color:var(--muted)}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;margin:48px 0 18px}
.sec-head h2{font-size:14px;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0;font-weight:600}
.sec-head .count{font-size:13px;color:var(--faint);font-variant-numeric:tabular-nums}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px 18px 16px;transition:border-color .15s,transform .15s,background .15s;display:flex;flex-direction:column;min-height:132px;color:inherit}
.card:hover{border-color:var(--accent);transform:translateY(-2px);background:var(--surface-2);text-decoration:none}
.card .row1{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.card .name{font-family:var(--mono);font-size:15.5px;color:var(--ink);font-weight:600}
.card .name .ns{color:var(--faint);font-weight:400}
.card .desc{color:var(--muted);font-size:14px;line-height:1.5;flex:1}
.card .meta{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:12.5px;color:var(--faint);font-family:var(--mono)}
.card .meta .dot{width:3px;height:3px;border-radius:50%;background:var(--faint)}
.chip{font-family:var(--mono);font-size:11px;letter-spacing:.03em;padding:3px 8px;border-radius:20px;white-space:nowrap}
.chip.ok{color:var(--ok);background:var(--ok-bg)} .chip.pending{color:var(--warn);background:var(--warn-bg)}
.chip.bundled{color:var(--accent);background:var(--accent-glow)}
.modindex{list-style:none;padding:0;margin:14px 0 0;columns:2;column-gap:32px}
@media(max-width:640px){.modindex{columns:1}}
.modindex li{margin:0 0 7px;break-inside:avoid}
.modindex a{font-family:var(--mono);font-size:14px;color:var(--accent-strong)}
.foxdoc a[href*=".html#"]{border-bottom:1px dotted var(--faint)}
.badge{font-family:var(--mono);font-size:11px;color:var(--accent);border:1px solid var(--border);padding:2px 7px;border-radius:6px}
.card .sym-hit{margin-top:12px;font-family:var(--mono);font-size:12px;color:var(--accent);background:var(--accent-glow);padding:6px 9px;border-radius:7px;display:none}
.card .sym-hit.show{display:block} .card .sym-hit b{color:var(--accent-strong)}
.empty{color:var(--faint);padding:30px 0;font-size:15px}
/* module page */
.crumb{font-family:var(--mono);font-size:13px;color:var(--faint);padding:26px 0 0} .crumb a{color:var(--muted)}
.modlayout{display:grid;grid-template-columns:230px 1fr;gap:40px;padding:22px 0 80px;align-items:start}
@media(max-width:820px){.modlayout{grid-template-columns:1fr}.rail{display:none}}
.rail{position:sticky;top:80px;font-size:13.5px}
.rail .rlabel{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin:0 0 10px}
.rail ul{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:3px}
.rail a{color:var(--muted);font-family:var(--mono);font-size:13px;display:block;padding:2px 0} .rail a:hover{color:var(--accent);text-decoration:none}
.doc-purpose{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--r);padding:15px 18px;margin:0 0 22px;color:var(--muted);font-size:14.5px}
/* restyle raw Fox documentation body */
.foxdoc{font-size:15px}
.foxdoc h1{font-family:var(--mono);font-size:28px;font-weight:640;margin:0 0 8px;letter-spacing:-.01em}
.foxdoc h1 a{color:var(--ink)}
.foxdoc h2,.foxdoc h3{font-family:var(--mono);font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);margin:30px 0 4px;padding-bottom:8px;border-bottom:1px solid var(--border);font-weight:600}
.foxdoc hr{border:0;border-top:1px solid var(--border);margin:22px 0}
.foxdoc p{color:var(--muted)}
.foxdoc table{width:100%;border-collapse:collapse;margin:8px 0 4px;display:block;overflow-x:auto}
.foxdoc td,.foxdoc th{text-align:left;vertical-align:top;padding:9px 12px 9px 0;border-bottom:1px solid var(--border);font-family:var(--mono);font-size:13.5px;color:var(--ink)}
.foxdoc th{color:var(--accent);font-size:11px;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;font-weight:600}
.foxdoc strong{color:var(--accent);font-weight:600}
.foxdoc a{color:var(--accent-strong)}
footer{border-top:1px solid var(--border);padding:26px 0 40px;color:var(--faint);font-size:13px}
footer .wrap{display:flex;gap:16px;flex-wrap:wrap;align-items:center;justify-content:space-between}
footer .mono{font-family:var(--mono)}
.install{font-family:var(--mono);font-size:13px;background:var(--bg-2);border:1px solid var(--border);border-radius:8px;padding:9px 13px;color:var(--muted);overflow-x:auto;white-space:pre}
.install .p{color:var(--accent)}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}