:root{--paper:#fbfbfa;--surface:#fff;--rule:#e2e4e8;--ink:#1a1d23;--soft:#5a6270;
--faint:#8a919e;--accent:#0f5c63;--accent-dim:#eaf3f3}
@media(prefers-color-scheme:dark){:root{--paper:#15181d;--surface:#1c2026;--rule:#2f353f;
--ink:#e8ebef;--soft:#a5adba;--faint:#79818f;--accent:#5fb6bc;--accent-dim:#173235}}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);line-height:1.6;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--accent)}
header.site{border-bottom:1px solid var(--rule);background:var(--surface);
display:flex;align-items:center;gap:16px;padding:0 20px;min-height:56px;
position:sticky;top:0;z-index:20}
footer.site{border-top:1px solid var(--rule);background:var(--surface);margin-top:56px}
.brand{text-decoration:none;color:var(--ink);font-weight:700;letter-spacing:.01em;
font-size:17px;margin-right:auto;white-space:nowrap}
.brand span{color:var(--accent);margin-left:5px;font-weight:500}

.sitenav{display:flex;align-items:center;gap:2px}
.sitenav a{text-decoration:none;color:var(--soft);font-size:14.5px;
padding:7px 11px;border-radius:5px;white-space:nowrap;line-height:1.2}
.sitenav a:hover{color:var(--ink);background:var(--rule-soft)}
.sitenav a[aria-current="page"]{color:var(--accent);background:var(--accent-dim);
font-weight:550}
.sitenav a.nav-search{color:var(--ink);border:1px solid var(--rule);margin-left:6px}
.sitenav a.nav-search:hover{border-color:var(--accent);color:var(--accent);background:none}
.sitenav a:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

.navtoggle{display:none;align-items:center;gap:8px;background:none;cursor:pointer;
border:1px solid var(--rule);border-radius:5px;padding:7px 11px;color:var(--ink);
font:inherit;font-size:14px}
.navtoggle:hover{border-color:var(--accent)}
.navtoggle:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.navtoggle-bars{position:relative;width:15px;height:1.5px;background:currentColor;
display:block;border-radius:2px}
.navtoggle-bars::before,.navtoggle-bars::after{content:"";position:absolute;left:0;
width:15px;height:1.5px;background:currentColor;border-radius:2px}
.navtoggle-bars::before{top:-5px}
.navtoggle-bars::after{top:5px}
[aria-expanded="true"] .navtoggle-bars{background:transparent}
[aria-expanded="true"] .navtoggle-bars::before{top:0;transform:rotate(45deg)}
[aria-expanded="true"] .navtoggle-bars::after{top:0;transform:rotate(-45deg)}

@media(max-width:719px){
  .navtoggle{display:flex}
  .sitenav{display:none;position:absolute;top:100%;left:0;right:0;
  flex-direction:column;align-items:stretch;gap:0;background:var(--surface);
  border-bottom:1px solid var(--rule);padding:6px;
  box-shadow:0 12px 24px -18px rgba(0,0,0,.5)}
  .sitenav.is-open{display:flex}
  .sitenav a{padding:11px 12px;font-size:16px;border-radius:4px}
  .sitenav a.nav-search{border:0;margin:4px 0 0;border-top:1px solid var(--rule);
  border-radius:0;color:var(--accent)}
}
main{max-width:860px;margin:0 auto;padding:28px 24px 64px}
footer.site p{max-width:860px;margin:0 auto;padding:16px 24px;font-size:13px;color:var(--faint)}
h1{font-size:clamp(24px,4vw,34px);line-height:1.15;margin:.2em 0 .4em}
h2{font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:var(--soft);
margin:34px 0 10px}
h2 .count{color:var(--faint);font-weight:400;text-transform:none;letter-spacing:0}
.lede{font-size:18px;color:var(--soft);max-width:66ch}
.count-line{color:var(--soft)}
.crumbs{font-size:13px;color:var(--faint);margin-bottom:8px}
.crumbs a{color:var(--soft)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em;
background:var(--accent-dim);padding:.12em .38em;border-radius:3px;word-break:break-all}
dl.meta{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:18px 0;
font-size:14px;border-top:1px solid var(--rule);padding-top:14px}
dl.meta dt{color:var(--faint);text-transform:uppercase;font-size:11px;letter-spacing:.07em;
padding-top:.35em}
dl.meta dd{margin:0}
ul.tags,ul.grid,ul.paths,ul.rels,ul.plain{list-style:none;padding:0;margin:0}
ul.tags,ul.grid{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
border-radius:4px;overflow:hidden}
@media(min-width:620px){ul.tags,ul.grid{grid-template-columns:1fr 1fr}}
ul.tags li,ul.grid li{background:var(--surface);padding:9px 14px;display:flex;
justify-content:space-between;gap:12px;font-size:15px}
ul.grid .n,ul.tags .n{color:var(--faint);font-size:13px;font-variant-numeric:tabular-nums}
li.more{color:var(--faint);font-style:italic}
ul.paths li,ul.rels li,ul.plain li{padding:5px 0;border-bottom:1px solid var(--rule);
font-size:15px}
.rel{color:var(--faint);font-size:12px;text-transform:uppercase;letter-spacing:.06em;
margin-right:8px}
.syn{color:var(--soft);max-width:70ch}
.provenance{margin-top:40px;padding-top:14px;border-top:1px solid var(--rule);
font-size:13px;color:var(--faint)}
/* ---- prose pages (specification, introduction, getting started) ---- */
.prose{max-width:70ch}
.prose h2{font-size:20px;text-transform:none;letter-spacing:0;color:var(--ink);
margin:38px 0 10px;font-weight:650}
.prose h3{font-size:16px;color:var(--ink);margin:26px 0 6px;font-weight:650}
.prose p,.prose li{color:var(--soft)}
.prose ul,.prose ol{padding-left:1.15em}
.prose li{margin-bottom:6px}
.prose strong{color:var(--ink)}
.prose blockquote{margin:18px 0;padding:12px 18px;border-left:3px solid var(--accent);
background:var(--accent-dim);border-radius:0 4px 4px 0}
.prose blockquote p{margin:0;color:var(--ink)}
pre{background:var(--surface);border:1px solid var(--rule);border-radius:4px;
padding:14px 16px;overflow-x:auto;font-size:13px;line-height:1.55}
pre code{background:none;padding:0}

/* ---- tables ---- */
.tbl{overflow-x:auto;border:1px solid var(--rule);border-radius:4px;background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:14px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.07em;
color:var(--faint);font-weight:600;padding:10px 14px;border-bottom:1px solid var(--rule)}
td{padding:7px 14px;border-bottom:1px solid var(--rule);vertical-align:top}
tr:last-child td{border-bottom:0}
.conf{font-size:11px;text-transform:uppercase;letter-spacing:.06em;padding:2px 7px;
border-radius:2px;white-space:nowrap}
.conf.high{background:#e3efe9;color:#2c6650}
.conf.medium{background:#f7eedc;color:#8a6510}
.conf.low,.conf.none,.conf.retired{background:#f7e7e4;color:#a2382a}
@media(prefers-color-scheme:dark){
.conf.high{background:#1a2e27;color:#74bb9c}
.conf.medium{background:#322818;color:#d9ac55}
.conf.low,.conf.none,.conf.retired{background:#35211e;color:#e08476}}
td .none{color:var(--faint)}

/* ---- branch families ----
   Six hues, one per family, spread around the wheel but held at low saturation
   so 24 tiles read as grouped rather than as a rainbow. Each family sets three
   tokens; tiles and bars consume them, so light and dark stay in step. */
[data-fam="subject"]{--fam-bg:#EBF3F3;--fam-bd:#C3DCDC;--fam-fg:#0E5A62}
[data-fam="parties"]{--fam-bg:#EDF0F8;--fam-bd:#C8D2E8;--fam-fg:#3B4E86}
[data-fam="place"]  {--fam-bg:#EEF3EC;--fam-bd:#CEDCC9;--fam-fg:#456540}
[data-fam="things"] {--fam-bg:#F8F1DF;--fam-bd:#E6D3A6;--fam-fg:#7A590F}
[data-fam="process"]{--fam-bg:#F9EDE9;--fam-bd:#EBCDC4;--fam-fg:#97432F}
[data-fam="interop"]{--fam-bg:#F3EDF5;--fam-bd:#DCCBE0;--fam-fg:#6A4574}
[data-fam="other"]  {--fam-bg:var(--surface);--fam-bd:var(--rule);--fam-fg:var(--faint)}
@media(prefers-color-scheme:dark){
  [data-fam="subject"]{--fam-bg:#10262A;--fam-bd:#1E4348;--fam-fg:#6FBDC3}
  [data-fam="parties"]{--fam-bg:#171C2E;--fam-bd:#2A3554;--fam-fg:#93A6DC}
  [data-fam="place"]  {--fam-bg:#17251A;--fam-bd:#2A4030;--fam-fg:#90BC86}
  [data-fam="things"] {--fam-bg:#2A2110;--fam-bd:#4A3A18;--fam-fg:#D6AC58}
  [data-fam="process"]{--fam-bg:#2B1815;--fam-bd:#4A2A22;--fam-fg:#DE9280}
  [data-fam="interop"]{--fam-bg:#241A28;--fam-bd:#3D2C44;--fam-fg:#C29ACB}
}

.legend{list-style:none;display:flex;flex-wrap:wrap;gap:6px 16px;padding:0;
margin:0 0 12px;font-size:12.5px;color:var(--soft)}
.legend li{display:flex;align-items:center;gap:6px}
.legend .sw{width:10px;height:10px;border-radius:3px;background:var(--fam-fg);
flex:0 0 auto}
.map-foot{margin:12px 0 0;font-size:12.5px;color:var(--faint)}

/* ---- home ---- */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
white-space:nowrap}
.hero{padding:44px 0 34px;border-bottom:1px solid var(--rule);margin-bottom:36px}
.hero h1{font-size:clamp(30px,5.2vw,46px);line-height:1.08;letter-spacing:-.02em;
max-width:15ch;margin:0 0 16px;text-wrap:balance}
.hero-sub{font-size:clamp(16px,1.9vw,18.5px);color:var(--soft);max-width:58ch;
margin:0 0 26px;line-height:1.55}
.hero-search{display:flex;gap:8px;max-width:640px}
.hero-search input{flex:1;min-width:0;padding:13px 15px;font-size:16px;
border:1px solid var(--rule);border-radius:6px;background:var(--surface);color:var(--ink)}
.hero-search input:focus{outline:2px solid var(--accent);outline-offset:1px;
border-color:var(--accent)}
.hero-search button{padding:13px 22px;font-size:15px;font-weight:600;cursor:pointer;
border:0;border-radius:6px;background:var(--accent);color:#fff;white-space:nowrap}
.hero-search button:hover{filter:brightness(1.1)}
.hero-search button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.hero-eg{margin:12px 0 0;font-size:14px;color:var(--faint)}
.hero-eg a{color:var(--soft)}
@media(prefers-color-scheme:dark){.hero-search button{color:#0c1416}}

/* Branch mosaic: each tile grows in proportion to the tags it holds, so the
   shape of the standard is visible at a glance rather than described. */
.map-section{margin-bottom:40px}
.map-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
margin:0 0 14px;padding-bottom:9px;border-bottom:1px solid var(--rule)}
.map-head h2{margin:0;font-size:15px;text-transform:none;letter-spacing:0;
color:var(--ink);font-weight:600}
.map-head h2 span{color:var(--faint);font-weight:400;margin-left:8px;font-size:13.5px}
.map-head a{font-size:13.5px;text-decoration:none;white-space:nowrap}
.map-head a:hover{text-decoration:underline}
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
@media(min-width:600px){.mosaic{grid-template-columns:repeat(6,1fr)}}
@media(min-width:900px){.mosaic{grid-template-columns:repeat(12,1fr)}}
.tile{grid-column:span 2;min-height:84px;padding:12px 14px;
display:flex;flex-direction:column;justify-content:space-between;
background:var(--fam-bg,var(--surface));border:1px solid var(--fam-bd,var(--rule));
border-radius:6px;text-decoration:none;color:var(--ink);
transition:border-color .12s,transform .12s,box-shadow .12s}
@media(min-width:900px){.tile{grid-column:span var(--span,2)}}
.tile:hover{border-color:var(--fam-fg);transform:translateY(-1px);
box-shadow:0 6px 16px -12px rgba(0,0,0,.4)}
.tile:focus-visible{outline:2px solid var(--fam-fg);outline-offset:2px}
.tile-name{font-size:14px;font-weight:550;line-height:1.25;text-wrap:balance}
.tile-n{font-size:12.5px;color:var(--fam-fg,var(--faint));
font-variant-numeric:tabular-nums;margin-top:10px;opacity:.85}
.tile:hover .tile-n{opacity:1}

.cards{display:grid;gap:12px;margin:0}
@media(min-width:700px){.cards{grid-template-columns:1fr 1fr}}
.card{display:block;text-decoration:none;color:inherit;background:var(--surface);
border:1px solid var(--rule);border-radius:6px;padding:18px 20px}
.card:hover{border-color:var(--accent)}
.card h3{margin:0 0 5px;font-size:16.5px;color:var(--accent)}
.card p{margin:0;font-size:14.5px;color:var(--soft)}

/* ---- search ---- */
#q{width:100%;padding:12px 14px;font-size:16px;border:1px solid var(--rule);
border-radius:4px;background:var(--surface);color:var(--ink)}
#q:focus{outline:2px solid var(--accent);outline-offset:1px}
#results{list-style:none;padding:0;margin:18px 0 0}
#results li{padding:9px 0;border-bottom:1px solid var(--rule)}
#results a{font-size:16px;text-decoration:none}
#results .b{display:block;font-size:12px;color:var(--faint);text-transform:uppercase;
letter-spacing:.06em}
#results .syn{font-size:13px;color:var(--soft)}
.hint{color:var(--faint);font-size:14px}
.banner{background:var(--accent-dim);border-radius:4px;padding:12px 16px;
font-size:14.5px;margin-bottom:20px}
a.skip{position:absolute;left:-9999px}
a.skip:focus{left:8px;top:8px;position:fixed;background:var(--surface);
padding:8px 12px;border:1px solid var(--accent);border-radius:4px;z-index:10}

/* ---- branch index: bars encode relative size, not decoration ---- */
ul.branchlist{list-style:none;padding:0;margin:0;border:1px solid var(--rule);
border-radius:6px;overflow:hidden;background:var(--surface)}
ul.branchlist li+li{border-top:1px solid var(--rule)}
ul.branchlist a{display:grid;grid-template-columns:1fr 90px;align-items:center;
gap:6px 16px;padding:11px 16px;text-decoration:none;color:var(--ink);font-size:15px}
@media(min-width:640px){ul.branchlist a{grid-template-columns:15rem 1fr 70px}}
ul.branchlist a:hover{background:var(--rule-soft)}
ul.branchlist a:hover .bn{color:var(--accent)}
.bn{font-weight:500}
.bbar{display:none;height:6px;background:var(--rule-soft);border-radius:3px;
overflow:hidden}
@media(min-width:640px){.bbar{display:block}}
.bbar span{display:block;height:100%;background:var(--fam-fg,var(--accent));
opacity:.75;border-radius:3px}
ul.branchlist .n{text-align:right;font-size:13px;color:var(--faint);
font-variant-numeric:tabular-nums}