:root{
  --bg0:#F7F6F2;--bg1:#EDEBE4;--bg2:#FFFFFF;--bg3:#F2F0EA;
  --t1:#0E1726;--t2:#3A4558;--t3:#566175;
  --acc:#1E4FD1;--acc-hi:#173FA8;--on-acc:#FFFFFF;--acc-soft:rgba(30,79,209,.08);--acc-line:rgba(30,79,209,.40);
  --ok:#12684A;--ok-soft:rgba(18,104,74,.10);--warn:#8A5600;--warn-soft:rgba(138,86,0,.10);--bad:#B3261E;--bad-soft:rgba(179,38,30,.08);
  --ln1:rgba(14,23,38,.10);--ln2:rgba(14,23,38,.18);--ln3:rgba(14,23,38,.50);
  --shadow:0 1px 0 rgba(14,23,38,.04),0 12px 32px -16px rgba(14,23,38,.18);
  --glow:rgba(30,79,209,.06);
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --r1:4px;--r2:6px;--r3:8px;--r4:12px;
  --wrap:1200px;--gut:clamp(16px,4vw,40px);
  --sp-sec:clamp(40px,5.2vw,72px);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg0:#0B1017;--bg1:#121923;--bg2:#19222F;--bg3:#1E2938;
  --t1:#F2F0EA;--t2:#B6BFCC;--t3:#8C97A8;
  --acc:#8CB0FF;--acc-hi:#B3CBFF;--on-acc:#0B1017;--acc-soft:rgba(140,176,255,.10);--acc-line:rgba(140,176,255,.45);
  --ok:#5CD6A0;--ok-soft:rgba(92,214,160,.12);--warn:#F0B84A;--warn-soft:rgba(240,184,74,.12);--bad:#FF8F86;--bad-soft:rgba(255,143,134,.12);
  --ln1:rgba(255,255,255,.08);--ln2:rgba(255,255,255,.14);--ln3:rgba(255,255,255,.40);
  --shadow:0 16px 40px -20px rgba(0,0,0,.7);--glow:rgba(140,176,255,.07);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg0:#0B1017;--bg1:#121923;--bg2:#19222F;--bg3:#1E2938;
    --t1:#F2F0EA;--t2:#B6BFCC;--t3:#8C97A8;
    --acc:#8CB0FF;--acc-hi:#B3CBFF;--on-acc:#0B1017;--acc-soft:rgba(140,176,255,.10);--acc-line:rgba(140,176,255,.45);
    --ok:#5CD6A0;--ok-soft:rgba(92,214,160,.12);--warn:#F0B84A;--warn-soft:rgba(240,184,74,.12);--bad:#FF8F86;--bad-soft:rgba(255,143,134,.12);
    --ln1:rgba(255,255,255,.08);--ln2:rgba(255,255,255,.14);--ln3:rgba(255,255,255,.40);
    --shadow:0 16px 40px -20px rgba(0,0,0,.7);--glow:rgba(140,176,255,.07);
    color-scheme:dark;
  }
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg0);color:var(--t2);font:400 1rem/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{color:var(--t1);font-weight:600;letter-spacing:-.03em;line-height:1.08;text-wrap:balance}
p{text-wrap:pretty}
a{color:var(--acc);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--acc-hi)}
code,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
button,select,input{font:inherit;color:inherit}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{width:100%;max-width:calc(var(--wrap) + 2*var(--gut));margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--acc);color:var(--on-acc);padding:10px 16px;border-radius:var(--r1);font-weight:600;text-decoration:none}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:4px}
::selection{background:var(--acc);color:var(--on-acc)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}


.brand{display:inline-flex;align-items:center;gap:10px;color:var(--t1);text-decoration:none;line-height:0}
.brand:hover{color:var(--t1)}
.brand-mark{width:34px;height:34px}
.brand-wm{width:73px;height:21px;fill:currentColor}
.m-z{fill:var(--t1)}.m-ring{fill:var(--ring-fill,none);stroke:var(--acc);stroke-width:2.6}.m-dot{fill:var(--acc)}


.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:var(--r2);border:1px solid var(--acc);background:var(--acc);color:var(--on-acc);font-weight:600;font-size:1rem;text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s,transform .15s;white-space:nowrap}
.btn:hover{background:var(--acc-hi);border-color:var(--acc-hi);color:var(--on-acc)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--t1);border-color:var(--ln3)}
.btn.ghost:hover{background:var(--acc-soft);border-color:var(--acc);color:var(--t1)}
.btn.sm{min-height:44px;padding:0 14px;font-size:.9375rem;border-radius:var(--r1)}
.btn svg{width:16px;height:16px;flex:none}
.iconbtn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--r2);border:1px solid var(--ln3);background:transparent;color:var(--t1);cursor:pointer}
.iconbtn:hover{background:var(--acc-soft);border-color:var(--acc)}
.iconbtn svg{width:18px;height:18px}
.theme .sun{display:none}
.theme .moon{display:block}
:root[data-theme="dark"] .theme .sun{display:block}
:root[data-theme="dark"] .theme .moon{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme .sun{display:block}:root:not([data-theme="light"]) .theme .moon{display:none}}
.copy{min-height:40px;padding:0 12px;border-radius:var(--r1);border:1px solid var(--ln3);background:transparent;color:var(--t1);font-size:.875rem;font-weight:500;cursor:pointer}
.copy:hover{background:var(--acc-soft);border-color:var(--acc)}
[data-copy]{display:none}
.js [data-copy]{display:inline-block}


.pill{display:inline-flex;align-items:center;gap:7px;min-height:26px;padding:0 10px;border-radius:999px;border:1px solid var(--ln2);background:var(--bg3);color:var(--t2);font-size:.8125rem;font-weight:500;line-height:1;white-space:nowrap}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.pill.ok{color:var(--ok);background:var(--ok-soft);border-color:transparent}
.pill.ok::before{background:var(--ok)}
.pill.warn{color:var(--warn);background:var(--warn-soft);border-color:transparent}
.pill.bad{color:var(--bad);background:var(--bad-soft);border-color:transparent}
.pill.acc{color:var(--acc);background:var(--acc-soft);border-color:transparent}
.pill.prog::before{background:transparent;box-shadow:inset 0 0 0 2px currentColor}
.pill.pend::before{background:transparent;border:2px dotted currentColor}
.pill.plain::before{display:none}

@media (max-width:359px){.brand-wm{display:none}.brand-mark{width:30px;height:30px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}