/* Self-hosted fonts. Source: Google Fonts CSS API (css2), woff2 latin + latin-ext
   subsets only. All three families are SIL Open Font License 1.1; see the
   OFL-*.txt files in this folder and PROVENANCE.txt. No third-party requests. */

@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/inter-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/inter-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonts/inter-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonts/inter-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fonts/inter-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fonts/inter-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('fonts/inter-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('fonts/inter-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Source Serif 4';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('fonts/source-serif-4-400-italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Source Serif 4';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('fonts/source-serif-4-400-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Source Serif 4';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/source-serif-4-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Source Serif 4';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/source-serif-4-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Source Serif 4';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonts/source-serif-4-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Source Serif 4';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonts/source-serif-4-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Source Serif 4';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fonts/source-serif-4-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Source Serif 4';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fonts/source-serif-4-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Source Serif 4';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('fonts/source-serif-4-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Source Serif 4';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('fonts/source-serif-4-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root{
  --paper:#faf9f5; --paper-2:#f3f1e9; --paper-3:#ece9de; --card:#fff;
  --line:#e6e2d6; --line-2:#d7d2c3;
  --ink:#1c1b17; --ink-2:#56544c; --ink-3:#646257;
  --accent:#6a4bd6; --accent-h:#5a3bc4; --soft:#a885fa; --wash:#f1ecfe; --aline:#ddd0fb; --aink:#4a2f9e;
  --ok:#3f9b6e; --ok-wash:#e7f4ec; --ok-line:#bfe3cd;
  --bad:#cf5b4e; --bad-wash:#fbe9e6; --bad-line:#f1c7c0;
  --code-bg:#1d1830; --code-2:#252038; --code-line:#352c50; --code-fg:#e9e6f5;
  --k:#c4b0ff; --cap:#f2b066; --ty:#86d9c9; --st:#bcd99a; --cm:#7d7799; --fn:#fdfdfe; --pu:#b3acce; --er:#f4978e;
  --serif:'Source Serif 4','Source Serif Pro',Georgia,serif; --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --wrap:1140px; --r:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-h);text-decoration:underline;text-underline-offset:3px}
::selection{background:var(--soft);color:#fff}

/* keyboard focus: visible, high-contrast ring on every interactive control */
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
a:focus-visible,.btn:focus-visible,.drop-btn:focus-visible,.nav-toggle:focus-visible,
.drop a:focus-visible,.nav-links a:focus-visible,.card:focus-visible,.nextcard:focus-visible{
  outline:3px solid var(--accent);outline-offset:2px}
.nav .drop-btn:focus-visible,.nav-toggle:focus-visible{outline-offset:3px}

/* skip link: off-screen until focused, then pinned top-left over the nav */
.skip-link{position:absolute;left:8px;top:-60px;z-index:200;background:var(--accent);color:#fff;
  font-family:var(--sans);font-weight:600;font-size:.92rem;padding:.7em 1.1em;border-radius:0 0 10px 10px;
  transition:top .15s}
.skip-link:focus{top:0;color:#fff;text-decoration:none;outline:3px solid var(--ink);outline-offset:2px}
.mark{display:inline-block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px}
.divider{height:1px;background:var(--line);border:0;margin:0}

h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.012em;line-height:1.1;color:var(--ink)}
h1{font-size:clamp(2.6rem,5.5vw,3.9rem);font-weight:500;letter-spacing:-.02em}
h2{font-size:clamp(1.7rem,3vw,2.2rem);margin:0 0 .5em}
h3{font-size:1.25rem;margin:0 0 .4em}
h4{font-family:var(--sans);font-weight:600;font-size:1.05rem;margin:0 0 .4em}
p{margin:0 0 1.1em}
.lead{font-size:1.22rem;color:var(--ink-2);line-height:1.58}
.muted{color:var(--ink-2)}
strong{font-weight:600;color:var(--ink)}
em{font-style:italic}
.eyebrow{font-family:var(--mono);font-size:.73rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:.6em;margin:0 0 1.2rem}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--aline)}
.ic{font-family:var(--mono);font-size:.85em;background:var(--wash);color:var(--aink);
  padding:.1em .42em;border-radius:6px;border:1px solid var(--aline)}

.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--sans);font-size:.96rem;font-weight:500;
  padding:.72em 1.4em;border-radius:999px;border:1px solid transparent;cursor:pointer;line-height:1;
  transition:transform .12s,background .15s,box-shadow .15s,border-color .15s}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 1px 2px rgba(74,47,158,.25)}
.btn-primary:hover{background:var(--accent-h);color:#fff;box-shadow:0 8px 22px rgba(106,75,214,.3)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{color:var(--ink);background:var(--paper-2);border-color:var(--ink-3)}
.btn-soft{background:var(--wash);color:var(--aink);border-color:var(--aline)}
.btn-soft:hover{background:#e7defc;color:var(--aink)}
.btn svg{width:1.05em;height:1.05em}

/* nav */
.nav{position:sticky;top:0;z-index:60;background:rgba(250,249,245,.85);
  backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line)}
.nav-inner{max-width:1280px;margin:0 auto;padding:0 26px;height:66px;display:flex;align-items:center;gap:10px}
.brand{display:flex;align-items:center;gap:.5em;font-family:var(--serif);font-size:1.34rem;color:var(--ink);font-weight:600}
.brand:hover{text-decoration:none;color:var(--ink)}
.brand .mark{height:30px;width:auto}
.nav-links{display:flex;align-items:center;gap:1px;margin-left:18px}
.nav-links a,.drop-btn{color:var(--ink-2);font-size:.92rem;font-weight:500;font-family:var(--sans);
  padding:.46em .72em;border-radius:8px;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:.35em}
.nav-links a:hover,.drop-btn:hover{color:var(--ink);background:var(--paper-2);text-decoration:none}
.nav-links a.active{color:var(--accent);background:var(--wash)}
.has-drop{position:relative}
.drop-btn .car{width:9px;height:9px;opacity:.6;transition:transform .15s}
.has-drop:hover .drop-btn .car{transform:rotate(180deg)}
.drop-btn[aria-expanded="true"] .car{transform:rotate(180deg)}
.drop{position:absolute;top:calc(100% + 4px);left:0;min-width:216px;background:var(--paper);
  border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 44px -18px rgba(40,32,60,.28);
  padding:8px;display:none;flex-direction:column;gap:1px}
.has-drop:hover .drop,.drop-btn[aria-expanded="true"]+.drop{display:flex}
.drop a{color:var(--ink-2);font-size:.91rem;padding:.55em .7em;border-radius:9px}
.drop a:hover{background:var(--paper-2);color:var(--ink);text-decoration:none}
.nav-cta{display:flex;align-items:center;gap:10px;margin-left:auto}
.nav-ico{color:var(--ink-2);display:inline-flex;padding:.4em;border-radius:8px}
.nav-ico:hover{color:var(--ink);background:var(--paper-2)}
.nav-toggle{display:none;background:none;border:1px solid var(--line-2);border-radius:9px;width:42px;height:42px;cursor:pointer;align-items:center;justify-content:center}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:"";display:block;width:18px;height:2px;background:var(--ink);position:relative}
.nav-toggle span::before{position:absolute;top:-6px}.nav-toggle span::after{position:absolute;top:6px}

/* hero / page hero */
.phero{padding:74px 0 8px;position:relative;overflow:hidden}
.phero-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(640px 360px at 85% 0%,rgba(168,133,250,.16),transparent 70%)}
.phero .wrap{position:relative;max-width:900px}
.phero .lead{max-width:66ch;margin-top:.4em}
.phero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

section{padding:60px 0}
.band{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.article{max-width:900px;margin:0 auto;padding:0 26px}
.article-narrow{max-width:820px;margin:0 auto;padding:0 26px}
.section-intro{max-width:72ch;margin-bottom:26px}
.article h2{margin:0 0 .5em}
.article h2.mt{margin-top:2em}
.article h3{margin-top:1.5em}

/* code */
.code{background:var(--code-bg);border:1px solid var(--code-line);border-radius:var(--r);overflow:hidden;
  box-shadow:0 20px 54px -28px rgba(29,24,48,.55);margin:18px 0}
.code-head{display:flex;align-items:center;gap:7px;padding:11px 16px;background:var(--code-2);border-bottom:1px solid var(--code-line)}
.code-head .o{width:11px;height:11px;border-radius:50%;background:#3b3357}
.code-head .t{margin-left:8px;font-family:var(--mono);font-size:.75rem;color:#8a83a8}
.code pre{margin:0;padding:20px;overflow-x:auto;font-family:var(--mono);font-size:.85rem;line-height:1.72;color:var(--code-fg)}
.k{color:var(--k)}.cp{color:var(--cap);font-weight:500}.ty{color:var(--ty)}.st{color:var(--st)}
.cm{color:var(--cm);font-style:italic}.fn{color:var(--fn)}.pu{color:var(--pu)}.nu{color:var(--cap)}.er{color:var(--er)}

/* pull / note / callout */
.pull{border-left:3px solid var(--soft);background:var(--wash);border-radius:0 14px 14px 0;
  padding:20px 26px;margin:26px 0;font-family:var(--serif);font-size:1.24rem;line-height:1.45;color:var(--aink)}
.note{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--soft);
  border-radius:0 14px 14px 0;padding:18px 22px;margin:22px 0;color:var(--ink-2);font-size:.97rem}
.note strong{color:var(--ink)}
.callout{background:var(--wash);border:1px solid var(--aline);border-radius:var(--r);padding:22px 24px;color:var(--aink);margin:20px 0}
.callout p:last-child{margin-bottom:0}

/* lists */
.bullets{list-style:none;padding:0;margin:18px 0;display:grid;gap:14px}
.bullets li{padding-left:30px;position:relative;color:var(--ink-2)}
.bullets li::before{content:"";position:absolute;left:6px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--soft);box-shadow:0 0 0 4px var(--wash)}
.bullets li strong{color:var(--ink)}
.emitters{list-style:none;padding:0;margin:18px 0;display:grid;gap:10px}
.emitters li{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 18px;color:var(--ink-2);font-size:.96rem}
.linklist{list-style:none;padding:0;margin:18px 0;display:grid;gap:2px;max-width:82ch}
.linklist li{padding:14px 0;border-top:1px solid var(--line)}
.linklist li:first-child{border-top:0}
.linklist a{font-weight:600}
.linklist .desc{color:var(--ink-2);font-weight:400}

/* cards / grid */
.grid{display:grid;gap:18px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;
  transition:transform .15s,box-shadow .15s,border-color .15s}
a.card:hover{transform:translateY(-3px);border-color:var(--aline);box-shadow:0 18px 44px -24px rgba(74,47,158,.4);text-decoration:none}
.card h3{font-size:1.18rem}
.card p{color:var(--ink-2);font-size:.96rem;margin:0}

/* comparison rows */
.cmp{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card);margin:8px 0}
.cmp-row{display:grid;grid-template-columns:230px 1fr;gap:28px;padding:20px 24px;border-top:1px solid var(--line);align-items:start}
.cmp-row:first-child{border-top:0}
.cmp-term{font-weight:600;color:var(--ink);font-size:.98rem}
.cmp-term .sub{display:block;font-weight:400;color:var(--ink-3);font-family:var(--mono);font-size:.78rem;margin-top:4px}
.cmp-term .tag{display:inline-block;font-family:var(--mono);font-size:.72rem;color:var(--aink);background:var(--wash);border:1px solid var(--aline);border-radius:6px;padding:.1em .45em;margin-right:.5em}
.cmp-desc{color:var(--ink-2);font-size:.95rem;margin:0}
.cmp-row.is-capa{background:var(--wash);box-shadow:inset 3px 0 0 var(--accent)}
.cmp-row.is-capa .cmp-desc{color:#3b2a73}

/* next cards */
.nextgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:8px 0}
.nextcard{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;transition:transform .15s,box-shadow .15s,border-color .15s}
.nextcard:hover{transform:translateY(-3px);border-color:var(--aline);box-shadow:0 18px 44px -24px rgba(74,47,158,.4);text-decoration:none}
.nextcard h4{display:flex;align-items:center;gap:.4em;color:var(--aink)}
.nextcard h4 .arr{transition:transform .15s}
.nextcard:hover h4 .arr{transform:translateX(3px)}
.nextcard p{margin:6px 0 0;color:var(--ink-2);font-size:.93rem}

/* steps */
.steps{margin-top:14px}
.step{display:grid;grid-template-columns:64px 1fr;gap:24px;padding:26px 0;border-top:1px solid var(--line);align-items:start}
.step:first-child{border-top:0}
.step-n{font-family:var(--serif);font-size:2rem;color:var(--soft);font-weight:500;line-height:1}
.step-b h3{margin-bottom:.3em;font-size:1.2rem}
.step-b p{color:var(--ink-2);margin:0}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin:8px 0}
.chip{font-family:var(--mono);font-size:.83rem;font-weight:500;color:var(--aink);background:var(--card);
  border:1px solid var(--aline);border-radius:9px;padding:.34em .7em}

/* ctaband */
.ctaband{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:60px 0;text-align:center}
.ctaband h2{margin-bottom:.3em}
.ctaband .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:18px}

/* tables (generic) */
.tbl{width:100%;border-collapse:collapse;font-size:.95rem;margin:10px 0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.tbl th,.tbl td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line)}
.tbl th{font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);font-weight:500;background:var(--paper-2)}
.tbl tr:last-child td{border-bottom:0}
.tbl td .ic{white-space:nowrap}

/* level pills (regulatory mapping) */
.lv{font-family:var(--mono);font-size:.72rem;font-weight:600;padding:.18em .5em;border-radius:6px;display:inline-block;white-space:nowrap}
.lv-d{color:var(--ok);background:var(--ok-wash);border:1px solid var(--ok-line)}
.lv-i{color:#a9772a;background:#fbf2df;border:1px solid #ecdab0}
.lv-p{color:var(--ink-3);background:var(--paper-2);border:1px solid var(--line)}
.lv-n{color:var(--ink-3);font-family:var(--mono);font-size:.72rem}
.tbl td .cl{display:block;font-family:var(--mono);font-size:.72rem;color:var(--ink-3);margin-bottom:3px}
.tbl.matrixtbl td,.tbl.matrixtbl th{text-align:center}
.tbl.matrixtbl td:first-child,.tbl.matrixtbl th:first-child{text-align:left}

/* docs layout (reference) */
.docs{display:grid;grid-template-columns:230px 1fr;gap:46px;max-width:1180px;margin:0 auto;padding:0 26px;align-items:start}
.toc{position:sticky;top:84px;align-self:start}
.toc h6{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:0 0 12px;font-weight:500}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:t;display:grid;gap:1px}
.toc li{counter-increment:t}
.toc a{display:block;color:var(--ink-2);font-size:.88rem;padding:.34em .6em;border-radius:8px;border-left:2px solid transparent}
.toc a::before{content:counter(t) ". ";color:var(--ink-3);font-family:var(--mono);font-size:.78rem}
.toc a:hover{background:var(--paper-2);color:var(--ink);text-decoration:none;border-left-color:var(--aline)}
.docbody{min-width:0}
.docbody h2{font-size:1.6rem;margin:0 0 .5em;scroll-margin-top:84px;padding-top:8px}
.docbody h2:not(:first-child){margin-top:2.2em;padding-top:24px;border-top:1px solid var(--line)}
.docbody h3{font-size:1.1rem;margin:1.5em 0 .4em;color:var(--ink);scroll-margin-top:84px}
.docbody h2 .nx{font-family:var(--mono);font-size:.9rem;color:var(--accent);margin-right:.5em}
@media(max-width:900px){
  .docs{grid-template-columns:1fr;gap:24px}
  .toc{position:static}
  .toc ol{grid-template-columns:1fr 1fr;gap:2px 16px}
}

/* footer */
.footer{background:var(--paper-2);border-top:1px solid var(--line);padding:60px 0 38px}
.footer-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:36px;max-width:var(--wrap);margin:0 auto;padding:0 26px}
.footer-brand .brand{margin-bottom:13px;justify-content:flex-start}
.footer-brand .brand .mark{height:26px;width:19.2px;flex:0 0 auto}
.footer-brand p{color:var(--ink-2);font-size:.92rem;max-width:32ch}
.footer h5{font-family:var(--mono);font-size:.73rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:0 0 14px;font-weight:500}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.footer ul a{color:var(--ink-2);font-size:.92rem}
.footer ul a:hover{color:var(--accent)}
.footer-base{max-width:var(--wrap);margin:42px auto 0;padding:22px 26px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-family:var(--mono);font-size:.78rem;color:var(--ink-3)}

@media(max-width:980px){
  .g3{grid-template-columns:1fr}
  .nextgrid,.depth{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
  .footer-brand{grid-column:1/-1}
  .nav-links{display:none;position:absolute;top:66px;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--paper);border-bottom:1px solid var(--line);padding:12px 18px 18px;margin:0;gap:2px}
  .nav-links.open{display:flex}
  .nav-links a,.drop-btn{padding:.7em .6em;width:100%;justify-content:flex-start}
  .has-drop{width:100%}
  .drop{position:static;display:flex;border:0;box-shadow:none;padding:0 0 6px 14px;min-width:0}
  .has-drop .drop-btn .car{display:none}
  .nav-toggle{display:flex}
}
@media(max-width:860px){
  .cmp-row{grid-template-columns:1fr;gap:8px}
  .g2{grid-template-columns:1fr}
  .step{grid-template-columns:1fr;gap:8px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* helpers replacing former inline styles (kept CSP-clean: no inline style attrs) */
.svg-defs{position:absolute}
.mark-26{height:26px}


/* ====================================================
   Adições específicas de páginas (index, why, compare, study)
   ==================================================== */
/* ===== index.html ===== */
.hero{padding:92px 0 28px;position:relative;overflow:hidden}
.hero-glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(680px 420px at 82% 0%,rgba(168,133,250,.20),transparent 68%)}
.hero-grid{display:grid;grid-template-columns:1.05fr 1.1fr;gap:54px;align-items:center;position:relative}
.hero h1{margin:.1em 0 .35em}
.hero h1 .accent{color:var(--aink)}
.hero-sub{font-size:1.2rem;color:var(--ink-2);max-width:56ch;margin:0 0 1.5em;line-height:1.55}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 26px}
.hero-meta{font-family:var(--mono);font-size:.8rem;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:.35em .8em;align-items:center}
.hero-meta .d{color:var(--soft)}
.capstrip{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.capstrip .wrap{display:flex;align-items:center;gap:26px;padding-top:26px;padding-bottom:26px;flex-wrap:wrap}
.cap-label{font-family:var(--mono);font-size:.78rem;color:var(--ink-3);max-width:18ch;line-height:1.4;flex-shrink:0}
.cap-chips{display:flex;flex-wrap:wrap;gap:9px}
.chip svg{width:12px;height:12px;opacity:.7}
.shead{max-width:62ch}
.shead .lead{margin-top:.2em}
.seq{margin-top:14px}
.seq-i{display:grid;grid-template-columns:300px 1fr;gap:40px;padding:38px 0;border-top:1px solid var(--line);align-items:start}
.seq-i:first-child{border-top:0;padding-top:14px}
.seq-n{font-family:var(--serif);font-size:1.05rem;color:var(--accent);letter-spacing:.05em;margin-bottom:14px;
  display:inline-flex;align-items:center;gap:.6em}
.seq-n b{font-size:2.4rem;font-weight:500;line-height:.8;color:var(--soft)}
.seq-head h3{font-size:1.3rem;margin-bottom:.35em}
.seq-head p{color:var(--ink-2);font-size:1rem;margin:0}
.split{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
.split-a{align-items:start}
.repo h3{font-family:var(--mono);font-size:1.02rem;font-weight:600;color:var(--aink);display:flex;align-items:center;gap:.5em;margin-bottom:.5em}
.repo h3 svg{width:17px;height:17px;color:var(--ink-3)}
.repo p{color:var(--ink-2);font-size:.95rem;margin:0}
.badge{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:.71rem;color:var(--ink-3);
  background:var(--paper-2);padding:.26em .62em;border-radius:6px;border:1px solid var(--line)}

/* ===== why.html ===== */
.article-section{padding:40px 0 80px}
.article h2:first-of-type{margin-top:.4em}
.anchor{scroll-margin-top:90px}
.layers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:24px 0 8px}
.layer{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column}
.layer h4{color:var(--aink);font-family:var(--mono);font-size:.82rem;letter-spacing:.06em;text-transform:uppercase}
.layer p{font-size:.95rem;color:var(--ink-2)}
.layer .code{margin:auto 0 0;box-shadow:none}
.layer .code pre{font-size:.76rem;padding:14px 16px}
.emitters code,.emitters .ic{white-space:nowrap}

/* ===== compare.html ===== */
.cmp-row.is-capa .cmp-term{color:var(--aink);display:flex;align-items:center;gap:.5em}
.cmp-row.is-capa .chk{width:18px;height:18px;flex-shrink:0;color:var(--accent)}

/* ===== study.html ===== */
.headline{display:flex;align-items:stretch;gap:0;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card);margin-top:8px}
.hl-cell{flex:1;min-width:200px;padding:30px 28px;border-right:1px solid var(--line)}
.hl-cell:last-child{border-right:0}
.hl-cell.win{background:var(--wash)}
.hl-num{font-family:var(--serif);font-size:3.4rem;font-weight:500;line-height:1}
.hl-cell.win .hl-num{color:var(--accent)}
.hl-cell.lose .hl-num{color:var(--bad)}
.hl-tag{font-family:var(--mono);font-size:.78rem;color:var(--ink-3);margin-top:8px}
.hl-who{font-weight:600;color:var(--ink);margin-top:2px}
.hl-foot{font-family:var(--mono);font-size:.8rem;color:var(--ink-3);text-align:center;margin-top:14px}
.chartcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px 28px;margin-top:6px}
.chart-cap{font-family:var(--mono);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px}
.bars{display:grid;gap:14px}
.bar-row{display:grid;grid-template-columns:230px 1fr;gap:18px;align-items:center}
.bar-label{font-size:.92rem;color:var(--ink-2)}
.bar-label b{color:var(--ink);font-weight:600}
.bar-wrap{display:flex;align-items:center;gap:12px}
.bar-track{flex:1;height:30px;background:var(--paper-2);border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.bar-fill{height:100%;border-radius:7px;transition:width .5s ease}
.bar-fill.b-bad{background:linear-gradient(90deg,#dd7466,#cf5b4e)}
.bar-fill.b-mid{background:linear-gradient(90deg,#e0a86a,#d4904a)}
.bar-fill.b-acc{background:linear-gradient(90deg,#8a6ce6,#6a4bd6)}
.bar-val{font-family:var(--mono);font-weight:600;font-size:.95rem;min-width:74px;text-align:right;color:var(--ink)}
.bar-row.is-win .bar-val{color:var(--ok)}
.bar-zero{display:flex;align-items:center;gap:8px;color:var(--ok);font-weight:600}
.bar-zero .pz{display:inline-flex;align-items:center;gap:6px;background:var(--ok-wash);border:1px solid var(--ok-line);
  color:var(--ok);border-radius:8px;padding:5px 12px;font-family:var(--mono);font-size:.9rem}
.bar-zero svg{width:15px;height:15px}
.matrix{display:grid;grid-template-columns:170px repeat(3,1fr);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:8px;font-size:.9rem}
.matrix>div{padding:14px 16px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.matrix>div:nth-child(-n+4){border-top:0}
.matrix>div:nth-child(4n+1){border-left:0}
.mh{background:var(--paper-2);font-family:var(--mono);font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.rl{font-weight:600;color:var(--ink);background:var(--paper-2);display:flex;align-items:center}
.cell{display:flex;flex-direction:column;gap:5px}
.cell.ok{background:var(--ok-wash)}
.cell.bad{background:var(--bad-wash)}
.cell .q{display:inline-flex;align-items:center;gap:5px;font-size:.82rem}
.cell .q b{font-weight:600}
.cell .q.attr{color:var(--ink-2)}
.cell .q.safe{color:var(--ok);font-weight:600}
.cell .q.fc{color:var(--bad);font-weight:600}
.cell .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.cell .dot.g{background:var(--ok)}
.cell .dot.r{background:var(--bad)}
.cell .dot.n{background:var(--ink-3)}
.statcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;display:flex;gap:22px;align-items:center}
.ring{width:118px;height:118px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;position:relative;
  background:conic-gradient(var(--accent) calc(var(--p)*1%),var(--paper-3) 0)}
.ring::before{content:"";position:absolute;inset:13px;border-radius:50%;background:var(--card)}
.ring .rv{position:relative;font-family:var(--serif);font-weight:600;font-size:1.5rem;color:var(--aink);line-height:1}
.ring .rl2{position:relative;font-family:var(--mono);font-size:.62rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;margin-top:2px}
.statcard .info h4{font-family:var(--mono);font-size:.95rem;color:var(--aink);margin-bottom:6px}
.statcard .info .meta{font-size:.88rem;color:var(--ink-2);line-height:1.5}
.statcard .info .big{font-family:var(--serif);font-size:1.6rem;color:var(--ink);font-weight:600;margin-top:6px;display:block}
.statcard .info .big small{font-family:var(--sans);font-size:.78rem;color:var(--ink-3);font-weight:400}
@media(max-width:860px){
  .matrix .mh:not(:first-child){display:none}
  .headline .hl-cell{border-right:0;border-bottom:1px solid var(--line)}
}


/* ====================================================
   Classes geradas (ex-inline styles, CSP-safe)
   ==================================================== */
/* generated: former inline style="" attributes, one class each */
.u0{margin-top:30px}
.u1{font-family:var(--mono);color:var(--aink)}
.u2{grid-column:1/-1}
.u3{font-size:2.1rem}
.u4{margin-top:4px}
.u5{padding-top:18px}
.u6{width:100%}
.u7{width:25%}
.u8{width:20.8%}
.u9{margin-top:22px}
.u10{width:1%}
.u11{width:75%}
.u12{width:79.2%}
.u13{--p:94.3}
.u14{--p:87.8}
.u15{margin-top:8px}
.u16{font-family:var(--serif);color:var(--soft);margin-right:.4em}
.u17{padding-top:30px}
.u18{scroll-margin-top:84px}
.u19{scroll-margin-top:90px}
.u20{font-family:var(--mono);font-size:.7em}
.u21{scroll-margin-top:80px}
.u22{margin-top:20px}
.u23{font-family:var(--mono);font-size:1rem;color:var(--aink)}
.u24{margin:0}
.u25{margin-top:1.8em}
.u26{display:flex;align-items:center;gap:.5em}
.u27{font-family:var(--mono);font-size:.6rem;color:var(--ok);background:var(--ok-wash);border:1px solid var(--ok-line);border-radius:6px;padding:.2em .5em}
.u28{margin:14px 0 0}
.u29{font-family:var(--mono);font-size:.6rem;color:var(--bad);background:var(--bad-wash);border:1px solid var(--bad-line);border-radius:6px;padding:.2em .5em}
.u30{color:var(--ok)}
.u31{margin:12px 0 0}
.u32{color:var(--ink-3)}
.u33{display:flex;align-items:center;gap:20px}
.u34{width:80px;height:80px;border-radius:14px;background:var(--code-bg);display:grid;place-items:center;flex-shrink:0}
.u35{height:48px}
.u36{width:80px;height:80px;border-radius:14px;background:var(--paper-2);border:1px solid var(--line);display:grid;place-items:center;flex-shrink:0}
.u37{margin-top:14px}
.u38{padding:0;overflow:hidden}
.u39{height:78px;background:#6a4bd6}
.u40{padding:14px 18px}
.u41{font-family:var(--mono);font-size:.85rem;margin:2px 0 0}
.u42{height:78px;background:#a885fa}
.u43{height:78px;background:#faf9f5;border-bottom:1px solid var(--line)}
.u44{height:78px;background:#f3f1e9;border-bottom:1px solid var(--line)}
.u45{height:78px;background:#1c1b17}
.u46{height:78px;background:#1d1830}
.u47{height:78px;background:#3f9b6e}
.u48{height:78px;background:#cf5b4e}
.u49{height:78px;background:#e6e2d6}
.u50{font-family:var(--serif);font-size:2rem;font-weight:500;margin:0}
.u51{margin:14px 0 2px}
.u52{font-family:var(--sans);font-size:2rem;font-weight:600;margin:0}
.u53{font-family:var(--mono);font-size:2rem;margin:0}
.u54{font-family:var(--mono);font-size:.82rem}
.u55{font-size:1.5rem}
.u56{font-size:1.5rem;margin-top:1.8em}