:root{color-scheme:light;--bg:#fbfcfe;--panel:#f2f5f9;--ink:#161b26;--dim:#5a6478;
--acc:#1f52c8;--acc2:#0a7f5c;--line:#dfe4ee;--warn:#8a5a00;--sel:#e7edfb}
:root[data-theme=dark],
html:not([data-theme]) body.dark-default{color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;
--bg:#0b0e14;--panel:#141924;--ink:#e6eaf2;--dim:#98a2b6;--acc:#7fa6ff;--acc2:#4fd7ac;
--line:#222a3a;--warn:#e0b054;--sel:#1a2540}}
:root[data-theme=dark]{color-scheme:dark;--bg:#0b0e14;--panel:#141924;--ink:#e6eaf2;
--dim:#98a2b6;--acc:#7fa6ff;--acc2:#4fd7ac;--line:#222a3a;--warn:#e0b054;--sel:#1a2540}
*{margin:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:4.6rem}
body{background:var(--bg);color:var(--ink);
font:16px/1.68 "Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
-webkit-font-smoothing:antialiased}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:var(--sel)}
.skip{position:absolute;left:-999px}
.skip:focus{left:1rem;top:.6rem;z-index:99;background:var(--panel);padding:.5rem .9rem;
border:1px solid var(--line);border-radius:5px}

/* top bar */
.top{position:sticky;top:0;z-index:40;height:62px;display:flex;align-items:center;
gap:1.3rem;padding:0 1.2rem;background:color-mix(in srgb,var(--bg) 88%,transparent);
backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .brand{font-weight:700;color:var(--acc);font-size:1.06rem;letter-spacing:-.01em}
.top nav{display:flex;gap:1.2rem;flex:1}
.top nav a{color:var(--dim);font-size:.93rem}
.top nav a:hover,.top nav a[aria-current]{color:var(--ink)}
.tbtn{background:none;border:1px solid var(--line);color:var(--dim);border-radius:5px;
cursor:pointer;font:inherit;font-size:.85rem;padding:.3rem .6rem;line-height:1}
.tbtn:hover{color:var(--ink);border-color:var(--acc)}
#find{width:12rem;background:var(--panel);border:1px solid var(--line);border-radius:5px;
color:var(--ink);font:inherit;font-size:.88rem;padding:.34rem .6rem}
#find:focus{outline:none;border-color:var(--acc)}
.menu{display:none}

/* shell */
.shell{display:grid;grid-template-columns:16.5rem minmax(0,1fr) 14rem;gap:2.4rem;
max-width:82rem;margin:0 auto;padding:0 1.4rem;align-items:start}
aside{position:sticky;top:62px;max-height:calc(100vh - 62px);overflow-y:auto;
padding:1.6rem .4rem 3rem 0;font-size:.9rem}
aside .grp{margin:0 0 1.15rem}
aside .grp>b{display:block;color:var(--ink);font-size:.76rem;text-transform:uppercase;
letter-spacing:.07em;margin-bottom:.35rem;font-weight:650}
aside a{display:block;color:var(--dim);padding:.16rem .6rem;border-left:2px solid transparent;
border-radius:0 5px 5px 0}
aside a:hover{color:var(--ink);background:var(--panel);text-decoration:none}
aside a[aria-current]{color:var(--acc);border-left-color:var(--acc);background:var(--panel);
font-weight:550}
article{min-width:0;padding:1.6rem 0 4rem}
.toc{position:sticky;top:62px;padding:1.9rem 0 3rem;font-size:.86rem;
max-height:calc(100vh - 62px);overflow-y:auto}
.toc b{display:block;color:var(--dim);font-size:.72rem;text-transform:uppercase;
letter-spacing:.07em;margin-bottom:.45rem}
.toc a{display:block;color:var(--dim);padding:.14rem 0;line-height:1.4}
.toc a:hover{color:var(--ink);text-decoration:none}
.toc a.l3{padding-left:.8rem;font-size:.83rem}
.toc a.on{color:var(--acc)}

/* article type */
.crumbs{color:var(--dim);font-size:.83rem;margin-bottom:.9rem}
.crumbs a{color:var(--dim)}
h1{font-size:2.05rem;letter-spacing:-.025em;line-height:1.18;font-weight:650;
margin-bottom:.5rem}
.q{color:var(--dim);font-size:1.03rem;margin-bottom:.4rem}
article h2{border-top:1px solid var(--line);margin-top:2.6rem;padding-top:1.4rem;
font-size:1.42rem;letter-spacing:-.012em;font-weight:650;scroll-margin-top:4.6rem}
article h3{font-size:1.06rem;margin-top:1.7rem;font-weight:650;scroll-margin-top:4.6rem}
.ha{opacity:0;margin-left:.4rem;color:var(--dim);font-weight:400;text-decoration:none}
h2:hover .ha,h3:hover .ha{opacity:1}
article p{margin:.85rem 0}
article ul,article ol{margin:.7rem 0 .7rem 1.25rem}
article li{margin:.3rem 0}
code{font:.88em ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--panel);
border:1px solid var(--line);border-radius:5px;padding:.06em .34em}
pre{background:var(--panel);border:1px solid var(--line);border-radius:5px;
padding:.9rem 1.05rem;margin:1rem 0;overflow-x:auto;
font:13.5px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace}
pre code{background:none;border:none;padding:0;font-size:inherit;white-space:pre}
.tw{overflow-x:auto;margin:1.1rem 0}
table{border-collapse:collapse;width:100%;font-size:.92rem}
th,td{border-bottom:1px solid var(--line);padding:.52rem .75rem;text-align:left;
vertical-align:top}
th{color:var(--dim);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;
font-weight:650;white-space:nowrap}
blockquote{border-left:2px solid var(--acc2);background:var(--panel);border-radius:0 5px 5px 0;
padding:.75rem 1rem;margin:1.2rem 0;color:var(--dim)}
blockquote.warn{border-left-color:var(--warn)}
blockquote p+p{margin-top:.5rem}
hr{border:none;border-top:1px solid var(--line);margin:2rem 0}
.badge{display:inline-block;font:.74rem ui-monospace,monospace;letter-spacing:.02em;
border:1px solid var(--line);border-radius:5px;padding:.1em .5em;vertical-align:middle;
margin-left:.55rem;color:var(--dim)}
.badge.alpha{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
.badge.dev{color:var(--acc2);border-color:color-mix(in srgb,var(--acc2) 45%,transparent)}
.pager{display:flex;gap:1rem;margin-top:3rem;border-top:1px solid var(--line);
padding-top:1.4rem}
.pager a{flex:1;border:1px solid var(--line);border-radius:5px;padding:.7rem .95rem;
font-size:.92rem}
.pager a:hover{border-color:var(--acc);text-decoration:none}
.pager span{display:block;color:var(--dim);font-size:.74rem;text-transform:uppercase;
letter-spacing:.06em;margin-bottom:.15rem}
.pager .nx{text-align:right}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.9rem;
margin:1.2rem 0}
.cards a{border:1px solid var(--line);border-radius:5px;padding:.9rem 1rem;color:var(--ink)}
.cards a:hover{border-color:var(--acc);text-decoration:none}
.cards a b{display:block;margin-bottom:.2rem}
.cards a span{color:var(--dim);font-size:.89rem}

/* search */
#veil{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.45);display:none}
#veil.on{display:block}
#box{max-width:38rem;margin:9vh auto 0;background:var(--bg);border:1px solid var(--line);
border-radius:5px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.35)}
#box input{width:100%;background:var(--panel);border:none;border-bottom:1px solid var(--line);
color:var(--ink);font:inherit;font-size:1rem;padding:.85rem 1rem}
#box input:focus{outline:none}
#hits{max-height:56vh;overflow-y:auto}
#hits a{display:block;padding:.6rem 1rem;border-bottom:1px solid var(--line);color:var(--ink)}
#hits a:hover,#hits a.on{background:var(--panel);text-decoration:none}
#hits b{display:block;font-weight:600;font-size:.95rem}
#hits span{color:var(--dim);font-size:.85rem}
#hits em{color:var(--acc);font-style:normal}
.none{padding:1rem;color:var(--dim);font-size:.9rem}

footer{border-top:1px solid var(--line);margin-top:3rem;padding:1.4rem;text-align:center;
color:var(--dim);font-size:.87rem}

@media(max-width:1180px){.shell{grid-template-columns:15rem minmax(0,1fr)}.toc{display:none}}
@media(max-width:860px){
 .shell{grid-template-columns:minmax(0,1fr);padding:0 1.1rem}
 aside{position:static;max-height:none;overflow:visible;border-bottom:1px solid var(--line);
  padding-bottom:1rem;display:none}
 aside.open{display:block}
 .menu{display:inline-block}
 .top nav{display:none}
 #find{width:7rem}
 h1{font-size:1.72rem}
}
main{max-width:60rem;margin:0 auto;padding:1.2rem 1.4rem 4rem}
main h1{font-size:2.05rem;margin:1rem 0 .5rem}
main h2{border-top:1px solid var(--line);margin-top:2.6rem;padding-top:1.4rem;
font-size:1.42rem;letter-spacing:-.012em;font-weight:650}
main p{margin:.85rem 0}
main ul,main ol{margin:.7rem 0 .7rem 1.25rem}
main li{margin:.3rem 0}
.lead,.dim{color:var(--dim)}
.hero{padding:3.6rem 0 2.4rem;text-align:center;border:0}
.hero h1{font-size:3.1rem;letter-spacing:-.035em;line-height:1.08;color:var(--acc);
margin:0 0 1.1rem;font-weight:700}
.tag{font-size:1.22rem;max-width:37rem;margin:0 auto;line-height:1.45}
.sub{color:var(--dim);font-size:1.02rem;max-width:41rem;margin:1.1rem auto 0}
.cta{margin:1.9rem 0 0}
.btn{display:inline-block;border:1px solid var(--line);border-radius:5px;padding:.52rem 1.1rem;
margin:.2rem .25rem;background:var(--panel);color:var(--ink)}
.btn:hover{border-color:var(--acc);text-decoration:none}
.btn.primary{background:var(--acc);color:#fff;border-color:var(--acc)}
:root:not([data-theme=dark]) .btn.primary{color:#fff}
.proofline{margin:2.3rem auto 0;max-width:44rem;font-size:.92rem;color:var(--dim);
background:var(--panel);border:1px solid var(--line);border-left:2px solid var(--acc2);
border-radius:0 5px 5px 0;padding:.75rem 1rem;text-align:left}
.proofline b{color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));gap:.9rem;
margin:1.2rem 0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:5px;
padding:1rem 1.1rem}
.card h3{font-size:1.02rem;margin:0 0 .35rem;font-weight:650}
.card h3 code{color:var(--acc);font-size:.98rem;background:none;border:none;padding:0}
.card p{color:var(--dim);font-size:.92rem;margin:.35rem 0}
a.card{display:block;color:var(--ink)}
a.card:hover{border-color:var(--acc);text-decoration:none}
.note{border-left:2px solid var(--acc2);background:var(--panel);border-radius:0 5px 5px 0;
padding:.75rem 1rem;margin:1.2rem 0;color:var(--dim)}
.note strong{color:var(--ink)}
@media(max-width:700px){.hero{padding:2.2rem 0 1.6rem}.hero h1{font-size:2.3rem}
.tag{font-size:1.05rem}}