*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--bg:#070b16;--bg2:#0b1220;--surface:rgba(255,255,255,.045);--surface2:rgba(255,255,255,.075);
--stroke:rgba(255,255,255,.10);--stroke2:rgba(255,255,255,.18);
--txt:#eef2f9;--strong:#ffffff;--body:#cbd5e6;--soft:#dbe4f4;--muted:#9aa7bd;--dim:#90a5c5;
--brand:#3b82f6;--brand2:#22d3ee;--brand3:#a855f7;
--pos:#34d399;--neg:#fb8a9b;--warn:#fbbf24;
--input-bg:rgba(4,8,18,.62);--input-bg-f:rgba(4,8,18,.9);
--hdr-bg:rgba(7,11,22,.72);--sticky:#101828;--pop-bg:rgba(9,14,28,.98);
--grad-a:#ffffff;--grad-b:#9fc4ff;--grad-c:#93bdf5;
--glow1:rgba(59,130,246,.22);--glow2:rgba(168,85,247,.16);--glow3:rgba(34,211,238,.13);
--mesh:rgba(255,255,255,.028);--mesh-o:.35;
--tint:rgba(59,130,246,.14);--tint-b:rgba(59,130,246,.08);--tint-w:rgba(251,191,36,.08);
--r:16px;--r-sm:10px;--r-lg:24px;
--shadow:0 18px 50px -12px rgba(0,0,0,.65);
--ring:0 0 0 3px rgba(59,130,246,.35);
--mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
--sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--max:1240px}
html[data-theme=light]{
--bg:#f5f7fb;--bg2:#ffffff;--surface:rgba(255,255,255,.82);--surface2:rgba(15,23,42,.045);
--stroke:rgba(15,23,42,.11);--stroke2:rgba(15,23,42,.2);
--txt:#0f172a;--strong:#020617;--body:#334155;--soft:#1e293b;--muted:#4a5a72;--dim:#5c677c;
--brand:#2563eb;--brand2:#0e7490;--brand3:#7c3aed;
--pos:#047857;--neg:#dc2626;--warn:#b45309;
--input-bg:#ffffff;--input-bg-f:#ffffff;
--hdr-bg:rgba(255,255,255,.86);--sticky:#e8edf6;--pop-bg:#ffffff;
--grad-a:#0f172a;--grad-b:#2563eb;--grad-c:#1d4ed8;
--glow1:rgba(59,130,246,.16);--glow2:rgba(168,85,247,.11);--glow3:rgba(34,211,238,.12);
--mesh:rgba(15,23,42,.045);--mesh-o:.5;
--tint:rgba(37,99,235,.10);--tint-b:rgba(37,99,235,.07);--tint-w:rgba(180,83,9,.09);
--shadow:0 18px 44px -16px rgba(15,23,42,.28);
--ring:0 0 0 3px rgba(37,99,235,.30)}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--bg)}
body{font-family:var(--sans);background:var(--bg);color:var(--txt);line-height:1.65;
font-size:16px;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:-2;background:
radial-gradient(58rem 34rem at 12% -8%,var(--glow1),transparent 60%),
radial-gradient(46rem 30rem at 92% 4%,var(--glow2),transparent 62%),
radial-gradient(50rem 34rem at 50% 108%,var(--glow3),transparent 60%),
linear-gradient(180deg,var(--bg),var(--bg2) 45%,var(--bg))}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:var(--mesh-o);
background-image:linear-gradient(var(--mesh) 1px,transparent 1px),
linear-gradient(90deg,var(--mesh) 1px,transparent 1px);background-size:64px 64px;
mask-image:radial-gradient(70% 55% at 50% 0%,#000,transparent 78%);
-webkit-mask-image:radial-gradient(70% 55% at 50% 0%,#000,transparent 78%)}
img,svg{display:block;max-width:100%}
a{color:var(--brand2);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:8px}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:20px;min-width:0}
.glass{background:var(--surface);border:1px solid var(--stroke);border-radius:var(--r);
backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%)}
.tnum{font-variant-numeric:tabular-nums lining-nums;font-family:var(--mono)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:#12307d;color:#fff;font-weight:700;padding:12px 20px;border-radius:0 0 10px 0}
.skip:focus{left:0}

/* header */
.hdr{position:sticky;top:0;z-index:50;background:var(--hdr-bg);
backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);
border-bottom:1px solid var(--stroke)}
.hdr-in{display:flex;align-items:center;gap:14px;height:66px}
.logo{display:flex;align-items:center;gap:11px;font-weight:800;font-size:1.13rem;color:var(--txt);letter-spacing:-.02em}
.logo:hover{text-decoration:none}
.logo .mk{width:34px;height:34px;border-radius:10px;flex:0 0 34px;
background:linear-gradient(135deg,var(--brand),var(--brand3) 55%,var(--brand2));
display:grid;place-items:center;box-shadow:0 6px 18px -6px rgba(59,130,246,.8)}
.logo .mk svg{width:19px;height:19px}
.logo b{background:linear-gradient(90deg,var(--grad-a),var(--grad-b));-webkit-background-clip:text;background-clip:text;color:transparent}
.nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.nav a{color:var(--muted);font-size:.9rem;font-weight:600;padding:8px 12px;border-radius:9px;transition:.18s}
.nav a:hover{color:var(--strong);background:var(--surface2);text-decoration:none}
.nav .cta{background:linear-gradient(135deg,var(--brand),var(--brand3));background-color:#4f46e5;color:#fff;box-shadow:0 8px 20px -8px rgba(99,102,241,.9)}
html[data-theme=light] .nav .cta{background:#1d4ed8;background-color:#1d4ed8}
html[data-theme=light] .nav .cta:hover{background:#1e40af;background-color:#1e40af}
.nav .cta:hover{transform:translateY(-1px);color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand3))}
.tgl{margin-left:auto;flex:0 0 auto;width:40px;height:40px;border-radius:11px;cursor:pointer;
display:grid;place-items:center;background:var(--surface2);border:1px solid var(--stroke);
color:var(--muted);transition:.2s;padding:0}
.nav+.tgl,.tgl+.burger{margin-left:0}
.tgl:hover{color:var(--strong);border-color:var(--stroke2);transform:translateY(-1px)}
.tgl svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tgl .moon{display:none}
html[data-theme=light] .tgl .moon{display:block}
html[data-theme=light] .tgl .sun{display:none}
.burger{display:none;background:var(--surface2);border:1px solid var(--stroke);
color:var(--txt);width:40px;height:40px;border-radius:11px;cursor:pointer;font-size:1.1rem;flex:0 0 auto}
@media(max-width:900px){.nav{display:none;position:absolute;top:66px;left:0;right:0;flex-direction:column;
align-items:stretch;padding:12px;gap:2px;background:var(--pop-bg);border-bottom:1px solid var(--stroke);
box-shadow:var(--shadow)}
.nav.open{display:flex}.burger{display:block}.tgl{margin-left:auto}}
/* At 320px the logo + theme toggle + burger overrun the 20px gutters by a
   hair, which trips the overflow gate. Tighten the header furniture there. */
@media(max-width:360px){
  .wrap{padding-inline:14px}
  .hdr-in{gap:8px}
  .logo span:last-child{font-size:1.02rem}
  .tgl,.burger{width:36px;height:36px}
}

/* breadcrumb */
.crumb{font-size:.82rem;color:var(--dim);padding:16px 0 4px;display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.crumb a{color:var(--muted)}.crumb a:hover{color:var(--brand2)}
.crumb span[aria-current]{color:var(--txt);font-weight:600}

/* ---------------------------------------------------------------------------
   TYPE SCALE — single source of truth for the whole platform.
   Tuned on a 1.20 minor-third ratio rather than the 1.33 perfect-fourth used
   previously, which rendered h1 at 48px and the hero figure at 48.8px on a
   1440px viewport. Display sizes are compressed; reading sizes are unchanged
   at 16px, and small UI text is untouched so nothing drops below the ~11px
   legibility floor. Caps are ~22% lower at the top of the scale and taper to
   zero by body copy, which restores hierarchy without shrinking content.
   --------------------------------------------------------------------------- */
:root{
--fs-h1:clamp(1.75rem,2.6vw,2.35rem);
--fs-h2:clamp(1.3rem,1.9vw,1.6rem);
--fs-h3:clamp(1.02rem,1.25vw,1.14rem);
--fs-lede:clamp(1rem,1.1vw,1.06rem);
--fs-hero:clamp(1.9rem,4.6vw,2.6rem);
--fs-card:1.02rem;
--measure:66ch}
h1,h2,h3,h4{line-height:1.22;letter-spacing:-.022em;font-weight:800;overflow-wrap:break-word;color:var(--txt)}
h1{font-size:var(--fs-h1);letter-spacing:-.03em}
h2{font-size:var(--fs-h2);margin:2.2rem 0 .85rem}
h3{font-size:var(--fs-h3);margin:1.6rem 0 .55rem;letter-spacing:-.012em}
p{color:var(--body);margin:0 0 1rem;overflow-wrap:break-word}
.lede{font-size:var(--fs-lede);color:var(--muted);max-width:var(--measure)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:800;
letter-spacing:.16em;text-transform:uppercase;color:var(--brand2);
background:var(--tint-b);border:1px solid var(--stroke2);padding:6px 13px;border-radius:99px}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--stroke2),transparent);margin:2.4rem 0;border:0}
/* Reading measure: prose ran to ~100ch, well past the 60-80ch comfort band.
   Applied to body copy and list text only — never to tables, grids or cards,
   which must keep the full column width. */
article p,article li,.art p,.art li,.post p,.post li{max-width:var(--measure)}

/* buttons + form */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:700;
padding:12px 20px;border-radius:12px;border:1px solid var(--stroke2);background:var(--surface2);
color:var(--txt);cursor:pointer;transition:transform .16s,box-shadow .16s,background .16s}
.btn:hover{transform:translateY(-2px);text-decoration:none}
.btn-p{background:linear-gradient(135deg,var(--brand),var(--brand3));background-color:#4f46e5;border-color:transparent;color:#fff;
box-shadow:0 12px 26px -10px rgba(99,102,241,.95)}
.btn-p:hover{box-shadow:0 16px 32px -10px rgba(99,102,241,1);color:#fff}
/* Field rhythm is deliberately tight. Measured before compaction, a single
   field stood 96px tall (25px label + 52px control + 17px permanently
   reserved error line) plus a 14px gap, so an eight-input tool ran 1,059px
   of form before the reader saw a result. The control itself stays
   touch-legal at 48px; the savings come from the chrome around it. */
.field{margin-bottom:10px;min-width:0}
.field label{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
font-size:.78rem;font-weight:700;color:var(--muted);margin-bottom:4px;letter-spacing:.02em;
min-width:0}
.field label .u{font-weight:600;color:var(--dim);font-size:.72rem;flex:0 0 auto}
.ip{position:relative;display:flex;align-items:center}
.ip .pre,.ip .suf{position:absolute;color:var(--dim);font-size:.86rem;font-weight:700;pointer-events:none}
.ip .pre{left:14px}.ip .suf{right:14px}
.ip.has-pre input{padding-left:34px}.ip.has-suf input{padding-right:46px}
input,select{width:100%;font:inherit;font-family:var(--mono);font-size:.98rem;color:var(--txt);
background:var(--input-bg);border:1px solid var(--stroke2);border-radius:12px;padding:10px 14px;transition:.18s}
select{font-family:var(--sans);cursor:pointer}
input:hover,select:hover{border-color:var(--brand)}
input:focus,select:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring);background:var(--input-bg-f)}
input[type=range]{padding:0;height:6px;-webkit-appearance:none;appearance:none;background:linear-gradient(90deg,var(--brand),var(--brand2));border:0;border-radius:99px;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;
background:#fff;border:3px solid var(--brand);box-shadow:0 3px 10px rgba(0,0,0,.4);cursor:grab}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--brand);cursor:grab}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;min-width:0}
@media(max-width:520px){.grid2{grid-template-columns:minmax(0,1fr)}}
.err{color:var(--neg);font-size:.78rem;margin-top:4px;font-weight:600}
.err:empty{display:none}
.pending{color:inherit;border-bottom:1px dotted var(--stroke)}

/* tables + notes */
.tbl-w{overflow-x:auto;border:1px solid var(--stroke);border-radius:var(--r);margin:1.2rem 0}
table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:460px}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--stroke);color:var(--body)}
th{background:var(--surface2);font-size:.74rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
td.n,th.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
td.n i{float:left;font-style:normal;color:var(--dim);padding-right:.6em}
tbody tr:hover{background:var(--surface2)}
.note{border-left:3px solid var(--brand);background:var(--tint-b);
padding:14px 18px;border-radius:0 var(--r-sm) var(--r-sm) 0;margin:1.3rem 0}
.note.warn{border-color:var(--warn);background:var(--tint-w)}
.formula{background:var(--surface2);border:1px solid var(--stroke);border-radius:var(--r-sm);
padding:20px;margin:1.2rem 0;text-align:center;overflow-x:auto}
.math{font-family:"Cambria Math","Latin Modern Math",Georgia,serif;font-size:1.14rem;color:var(--strong);font-style:italic;white-space:nowrap}
.math .fr{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;margin:0 .35em}
.math .fr .nu{border-bottom:1.5px solid currentColor;padding:0 .45em .12em}
.math .fr .de{padding:.12em .45em 0}
.math sup{font-size:.66em;font-style:normal}.math sub{font-size:.66em;font-style:normal}
.math var{font-style:italic}
.legend{font-size:.85rem;color:var(--muted);margin-top:10px;font-style:normal}
ul,ol{margin:0 0 1rem 1.25rem;color:var(--body)}li{margin-bottom:.45rem}
strong{color:var(--txt)}

/* faq */
.faq details{border:1px solid var(--stroke);border-radius:var(--r-sm);margin-bottom:9px;
background:var(--surface);transition:.18s}
.faq details:hover{border-color:var(--stroke2)}
.faq details[open]{background:var(--surface2);border-color:var(--brand)}
.faq summary{cursor:pointer;padding:15px 46px 15px 18px;font-weight:700;font-size:.97rem;
list-style:none;position:relative;color:var(--txt)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);
font-size:1.4rem;font-weight:400;color:var(--brand2);transition:transform .2s}
.faq details[open] summary::after{content:"\2212"}
.faq .a{padding:0 18px 16px;color:var(--muted);font-size:.93rem}
.faq .a p:last-child{margin-bottom:0}

/* footer */
.ftr{margin-top:70px;border-top:1px solid var(--stroke);background:var(--surface2);padding-top:52px}
.ftr-top{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:34px;padding-bottom:34px;border-bottom:1px solid var(--stroke)}
@media(max-width:820px){.ftr-top{grid-template-columns:minmax(0,1fr)}}
.ftr-top p{color:var(--muted);font-size:.9rem;max-width:56ch}
.trust{display:flex;flex-wrap:wrap;gap:9px;align-items:flex-start}
.trust a{font-size:.83rem;font-weight:700;color:var(--muted);border:1px solid var(--stroke);
background:var(--surface);padding:8px 14px;border-radius:99px;transition:.18s}
.trust a:hover{color:var(--strong);border-color:var(--brand);background:var(--tint);text-decoration:none}
.ftr h2.dir-t{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
margin:32px 0 18px;font-weight:800}
.dir{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:26px 22px}
@media(max-width:1080px){.dir{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:880px){.dir{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.dir{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:400px){.dir{grid-template-columns:minmax(0,1fr)}}
.dir-c h3{font-size:.79rem;font-weight:800;letter-spacing:.05em;margin:0 0 10px;
padding-bottom:8px;border-bottom:1px solid var(--stroke);text-transform:uppercase;
display:flex;align-items:center;gap:8px}
.dir-c h3::before{content:"";flex:0 0 auto;width:4px;height:14px;border-radius:2px;background:var(--acc)}
.dir-c h3 a{color:var(--txt)}
.dir-c h3 a:focus-visible{outline:none;box-shadow:var(--ring)}.dir-c h3 a:hover{color:var(--brand2)}
.dir-c ul{list-style:none;margin:0;padding:0}
.dir-c li{margin:0 0 5px}
.dir-c a{color:var(--dim);font-size:.795rem;line-height:1.45;display:block;transition:.14s}
.dir-c a:hover{color:var(--brand2);transform:translateX(3px);text-decoration:none}
.dir-c .more{color:var(--muted);font-weight:700;font-size:.76rem}
.ftr-bot{margin-top:38px;border-top:1px solid var(--stroke);padding:20px 0 30px;
display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;
font-size:.8rem;color:var(--dim)}
.credit{font-weight:700;color:var(--muted)}
.credit b{background:linear-gradient(90deg,var(--brand),var(--brand3));-webkit-background-clip:text;background-clip:text;color:transparent}

/* back to top */
.top{position:fixed;right:18px;bottom:18px;z-index:40;width:44px;height:44px;border-radius:50%;
display:grid;place-items:center;cursor:pointer;border:1px solid var(--stroke2);background:var(--pop-bg);
color:var(--txt);box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(10px);transition:.25s}
.top.on{opacity:1;visibility:visible;transform:none}
.top:hover{border-color:var(--brand);color:var(--brand2)}
.top svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

@media print{
body::before,body::after{display:none}
.hdr,.ftr .dir,.top,.tgl,.actions,.skip{display:none!important}
body{background:#fff;color:#000}
.glass,.out{border:1px solid #ccc!important;background:#fff!important}
a{color:#000;text-decoration:underline}
.faq details{page-break-inside:avoid}
.faq .a{display:block!important}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}