/* ============================================================ human-analyzer — standalone showcase No external fonts, no CDN, no chart library. Pure SVG + CSS + vanilla JS. Design tokens are shadcn-inspired: a slate-950 dark surface, HSL-derived accents, and a per-framework hue so the whole site is colour-coded by domain. ============================================================ */ :root{ /* neutral surface — shadcn slate-950 family */ --bg:#070b16; --bg-2:#0b1120; --panel:rgba(20,28,48,.62); --panel-solid:#121a2e; --stroke:rgba(120,150,210,.16); --stroke-2:rgba(120,150,210,.28); --txt:#e8edf9; --txt-dim:#9aa6c4; --txt-faint:#6b779a; /* per-FRAMEWORK accents — one hue per framework (colour-coded by domain). */ --mat:#d97706; /* amber — MAT (Materials · ingest) */ --psy:#8b5cf6; /* violet — PSY (Psychology · clinical) */ --cre:#ec4899; /* rose — CRE (Content · create) */ --gro:#10b981; /* emerald — GRO (Growth · trajectory) */ --evl:#0ea5e9; /* sky — EVL (Evaluation · score) */ --orc:#6366f1; /* indigo — ORC (Orchestration · the bus) */ --com:#64748b; /* slate — COM (Common · utility) */ /* functional accents for meta / reference guides (var names kept stable so the reused component library maps cleanly). */ --spec:#38bdf8; /* cyan — cheatsheet / spec */ --rel:#34d399; /* emerald — glossary / relations */ --crit:#fb5e7e; /* rose — gates / privacy (danger) */ --tel:#a78bfa; /* violet — architecture / distribution (telemetry) */ --gold:#fbbf24; /* gold — journey / catalog / finder (highlight) */ --ok:#34d399; --warn:#fbbf24; --bad:#fb5e7e; --r:18px; --radius:.6rem; /* shadcn-style radius alias */ --maxw:1120px; --ease:cubic-bezier(.22,.61,.36,1); } *{box-sizing:border-box} html{scroll-behavior:smooth;scrollbar-gutter:stable;background:#070b16;color-scheme:dark}/* reserve scrollbar space so short<->tall pages don't shift horizontally; dark canvas + color-scheme kill the white flash between page navigations */ body{ margin:0;background:var(--bg);color:var(--txt); font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,system-ui,sans-serif; /* overflow-x:clip (not hidden) — clip horizontal overflow WITHOUT making a scroll container, which would make the sticky sidebar + TOC jitter on scroll. */ line-height:1.6;overflow-x:clip;-webkit-font-smoothing:antialiased; } /* bilingual toggle: hide the other language */ body.lang-en .vi{display:none !important} body.lang-vi .en{display:none !important} a{color:var(--spec);text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3,h4{line-height:1.18;margin:0 0 .4em;font-weight:700;letter-spacing:-.01em} code,.mono{font-family:"JetBrains Mono","SF Mono",ui-monospace,Menlo,Consolas,monospace} code{background:rgba(120,150,210,.12);padding:.12em .42em;border-radius:6px;font-size:.86em;color:#cfe3ff;border:1px solid var(--stroke)} section{position:relative;padding:96px 24px;} .wrap{max-width:var(--maxw);margin:0 auto;position:relative;z-index:2} .eyebrow{display:inline-block;font-size:.74rem;letter-spacing:.28em;text-transform:uppercase;font-weight:700;color:var(--txt-faint);margin-bottom:14px} .lead{font-size:1.12rem;color:var(--txt-dim);max-width:62ch} .muted{color:var(--txt-dim)} .faint{color:var(--txt-faint)} /* ---- background mesh ---- */ .bgfx{position:fixed;inset:0;z-index:0;pointer-events:none} #net{position:fixed;inset:0;z-index:0;opacity:.55} .glow{position:fixed;border-radius:50%;filter:blur(120px);opacity:.32;z-index:0;pointer-events:none} .glow.g1{width:560px;height:560px;background:#1d4ed8;top:-160px;left:-120px} .glow.g2{width:520px;height:520px;background:#7c3aed;top:38%;right:-180px} .glow.g3{width:480px;height:480px;background:#0f766e;bottom:-160px;left:30%} /* frosted-glass panels over the 3D hero — translucent --panel surfaces get a blur so the animated background reads through them as glass. Layout unchanged. Blur kept small (3px): a larger radius samples the bright constellation past the card edge and paints a visible halo ring just inside the border (a double-border look). */ .card,.callout,.honest,.stat,.faq details,.cs-more,.wu,.hero-ex{ -webkit-backdrop-filter:blur(3px) saturate(115%); backdrop-filter:blur(3px) saturate(115%)} /* ===================== NAV ===================== */ /* The top bar is .app-header (styled below); the only