:root{--pc:#1F5BFF;--bg:#fff;--bg2:#F3F7FF;--tx:#0B1B3A;--mu:#566887;--ln:#D9E3F6;--ac:var(--pc);--acf:#fff;--glass:rgba(255,255,255,.72);--code:#0A1630;--codetx:#DCE7FF;
--d:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;--b:"Figtree","Avenir Next","Segoe UI",system-ui,sans-serif;--m:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
[data-p=mail]{--pc:#0A8FB0}[data-p=forms]{--pc:#6A4DFF}[data-p=helios]{--pc:#D9480F}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#060D1F;--bg2:#0A1630;--tx:#EAF0FF;--mu:#97A8CB;--ln:#1B2B4F;--ac:color-mix(in srgb,var(--pc) 58%,#fff);--acf:#061031;--glass:rgba(10,22,48,.7);--code:#040A18}}
:root[data-theme="dark"]{--bg:#060D1F;--bg2:#0A1630;--tx:#EAF0FF;--mu:#97A8CB;--ln:#1B2B4F;--ac:color-mix(in srgb,var(--pc) 58%,#fff);--acf:#061031;--glass:rgba(10,22,48,.7);--code:#040A18}
html{scroll-behavior:smooth;scroll-padding-top:calc(150px + env(safe-area-inset-top,0px))}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);font:400 17px/1.65 var(--b);-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:3px solid var(--ac);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ac);color:var(--acf);padding:10px 16px;border-radius:99px;z-index:50}.skip:focus{left:12px}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
nav.top{position:fixed;top:0;left:0;right:0;z-index:20;padding-top:env(safe-area-inset-top,0px);background:var(--glass);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-bottom:1px solid var(--ln)}
nav.top .wrap{display:flex;align-items:center;gap:28px;height:60px}
.logo{font:700 20px var(--d);letter-spacing:-.02em;text-decoration:none;display:flex;gap:10px;align-items:center}
.logo i{width:22px;height:22px;border-radius:7px;background:conic-gradient(from 210deg,#1F5BFF,#8CC1FF,#fff,#1F5BFF);box-shadow:0 0 18px rgba(31,91,255,.55)}
nav.top ul{display:flex;gap:4px;list-style:none;margin:0 0 0 auto;padding:0}
nav.top li a{padding:8px 14px;border-radius:99px;text-decoration:none;font-size:15px;color:var(--mu);font-weight:500}
nav.top li a:hover,nav.top li a[aria-current]{color:var(--tx);background:var(--bg2)}
.tb{border:1px solid var(--ln);background:transparent;color:var(--tx);border-radius:99px;padding:7px 14px;font:500 14px var(--b);cursor:pointer}
.hero{position:relative;min-height:46svh;color:#fff;background:#06143a;display:flex;align-items:flex-end;overflow:hidden}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero:after{content:"";position:absolute;inset:0;background:radial-gradient(70% 90% at 85% 100%,color-mix(in srgb,var(--pc) 55%,transparent),transparent 70%),linear-gradient(180deg,rgba(6,20,58,.1) 30%,rgba(6,20,58,.85));pointer-events:none}
.hero .wrap{position:relative;z-index:2;padding-top:120px;padding-bottom:40px;width:100%}
.crumb{font-size:15px;color:#BFD0F5;margin-bottom:14px}.crumb a{text-decoration:none}.crumb a:hover{text-decoration:underline}
h1{font:700 clamp(36px,6vw,68px)/1 var(--d);letter-spacing:-.035em;margin:0 0 14px;text-wrap:balance}
.lead{font-size:clamp(17px,2vw,20px);max-width:56ch;color:#CFDDFB;margin:0}
.lay{display:grid;grid-template-columns:250px minmax(0,1fr) 210px;gap:52px;padding-top:44px;padding-bottom:96px}
.side,.toc{position:sticky;top:84px;align-self:start;max-height:calc(100svh - 100px);overflow:auto;font-size:15px}
summary{list-style:none;cursor:pointer;font:600 15px var(--d)}summary::-webkit-details-marker{display:none}
.side summary,.toc summary{pointer-events:none;margin-bottom:10px}
.ps{width:100%;margin-bottom:12px;background:var(--bg2);color:var(--tx);border:1px solid var(--ln);border-radius:12px;padding:10px 12px;font:600 15px var(--b)}
.fi{width:100%;margin-bottom:12px;background:var(--bg);color:var(--tx);border:1px solid var(--ln);border-radius:99px;padding:8px 14px;font:400 14px var(--b)}
.side ul,.toc ul{list-style:none;margin:0;padding:0}
.side a,.toc a{display:block;padding:6px 12px;border-left:2px solid var(--ln);color:var(--mu);text-decoration:none;transition:color .2s,border-color .2s}
.side a:hover,.toc a:hover{color:var(--tx)}
.side a[aria-current],.toc a[aria-current]{border-color:var(--ac);color:var(--tx);font-weight:600}
.side li[hidden]{display:none}
.seg{display:inline-flex;padding:4px;border-radius:99px;background:var(--bg2);border:1px solid var(--ln);position:relative;margin-bottom:30px}
.seg button{position:relative;z-index:1;border:0;background:none;color:var(--mu);padding:9px 20px;font:600 15px var(--b);border-radius:99px;cursor:pointer;transition:color .2s}
.seg button[aria-checked=true]{color:var(--acf)}
.seg .pill{position:absolute;top:4px;bottom:4px;left:4px;border-radius:99px;background:var(--ac);transition:transform .35s cubic-bezier(.3,1.3,.5,1),width .35s}
article h2{font:700 clamp(26px,3vw,34px)/1.1 var(--d);letter-spacing:-.025em;margin:56px 0 14px}
article h2:first-of-type{margin-top:0}
article p,article ul{max-width:64ch;margin:0 0 18px}
.note{border:1px solid var(--ln);border-left:3px solid var(--ac);background:var(--bg2);border-radius:14px;padding:14px 18px;margin:0 0 20px;font-size:15px;color:var(--mu);max-width:64ch}
code{font-family:var(--m);font-size:.9em;background:var(--bg2);padding:2px 6px;border-radius:6px}
.cb{border-radius:16px;overflow:hidden;background:var(--code);margin:0 0 22px;border:1px solid var(--ln)}
.cb header{display:flex;justify-content:space-between;align-items:center;padding:8px 8px 8px 18px;font:500 13px var(--m);color:#8FA6D9;border-bottom:1px solid rgba(255,255,255,.08)}
.cb button{border:1px solid rgba(255,255,255,.2);background:none;color:#DCE7FF;border-radius:99px;padding:5px 14px;font:500 13px var(--b);cursor:pointer}
.cb pre{margin:0;padding:18px 20px;overflow-x:auto;font:400 14px/1.7 var(--m);color:var(--codetx)}
.cb code{background:none;padding:0}
.src{margin-top:64px;border:1px solid var(--ln);border-radius:20px;padding:22px 24px;background:var(--bg2)}
.src h3,.rel h3{font:700 20px var(--d);margin:0 0 12px;letter-spacing:-.01em}
.src dl{display:grid;grid-template-columns:130px 1fr;gap:6px 16px;margin:0 0 12px;font-size:15px}
.src dt{color:var(--mu)}.src dd{margin:0}
.chip{display:inline-flex;align-items:center;gap:8px;border-radius:99px;padding:4px 12px;font-size:14px;font-weight:600;border:1px solid var(--ac);color:var(--ac)}
.chip:before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.src details{font-size:15px;color:var(--mu)}
.rel{margin-top:44px}
.rel ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--ln)}
.rel a{display:block;padding:18px 4px;border-bottom:1px solid var(--ln);text-decoration:none;transition:padding .25s}
.rel a:hover{padding-left:14px}
.rel b{display:block;font:600 18px var(--d)}.rel small{color:var(--mu);font-size:15px}
footer{padding:36px 0 56px;color:var(--mu);font-size:15px;border-top:1px solid var(--ln);background:var(--bg2)}
@media(max-width:1100px){.lay{grid-template-columns:230px minmax(0,1fr)}.toc{position:static;grid-column:1/-1;grid-row:1}.toc summary{pointer-events:auto}.toc{max-height:none;border:1px solid var(--ln);border-radius:16px;padding:12px 16px}}
@media(max-width:860px){.lay{grid-template-columns:1fr;gap:20px;padding-top:28px}.side{position:static;max-height:none;border:1px solid var(--ln);border-radius:16px;padding:12px 16px}.side summary{pointer-events:auto}.toc{grid-row:auto}nav.top ul li:not(:last-child){display:none}nav.top .wrap{gap:12px}.src dl{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}