:root{
  --paper:#F4F5F7; --sheet:#FFFFFF; --ink:#17202B; --muted:#4A5563; --rule:#D5DAE1;
  --link:#A63600; --brand:#ff5000; --brand-hover:#e5152c; --on-brand:#1F1B16;
  --tab-C:#2F5D8A; --tab-M:#2E6B4F; --tab-T:#7A5200; --tab-G:#6B3F7A; --tab-A:#1F6B73; --tab-S:#5A4B2E;
  --clip:#E9ECF1; --col:800px; --r:6px;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#11161D; --sheet:#18202A; --ink:#E8ECF1; --muted:#A9B3BF; --rule:#2C3644;
    --link:#FF8A4C; --clip:#1F2833;
    --tab-C:#3E6E9C; --tab-M:#357A5B; --tab-T:#8A5F06; --tab-G:#7A4B8A; --tab-A:#257A83; --tab-S:#6A5A38;
  }
}
*{box-sizing:border-box}
html{overflow-x:clip}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:'Red Hat Text',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.62; -webkit-text-size-adjust:100%}
h1,h2,h3{font-family:'Red Hat Display','Red Hat Text',system-ui,sans-serif; line-height:1.16; margin:0 0 .55em; letter-spacing:-.01em}
h1{font-size:clamp(2rem,1.35rem + 2.3vw,3rem); font-weight:800}
h2{font-size:clamp(1.38rem,1.08rem + 1vw,1.86rem); font-weight:700}
h3{font-size:1.1rem; font-weight:700}
p{margin:0 0 1em}
a{color:var(--link); text-underline-offset:.16em}
a:hover{color:var(--brand-hover)}
:focus-visible{outline:3px solid var(--link); outline-offset:2px}
img{max-width:100%}
code,.xb-code{font-family:'Red Hat Mono',ui-monospace,Consolas,monospace}
.xb-skip{position:absolute; left:-999px; top:0; min-height:44px; min-width:44px}
.xb-skip:focus{left:8px; top:8px; background:var(--sheet); padding:10px 14px; z-index:9}
.xb-wrap{max-width:1180px; margin:0 auto; padding:0 20px}
.xb-col{max-width:var(--col)}


.xb-bar{background:var(--sheet); border-bottom:1px solid var(--rule)}
.xb-barin{display:flex; align-items:center; gap:10px 22px; min-height:66px; flex-wrap:wrap; padding-top:6px; padding-bottom:6px}
.xb-brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); min-height:44px; min-width:0; flex-wrap:wrap}
.xb-brand img{display:block; height:24px; width:auto}
.xb-brand span{font-family:'Red Hat Display',sans-serif; font-weight:700; font-size:1rem; letter-spacing:.01em; min-width:0}
.xb-menu{margin-left:auto; min-width:0}
.xb-menu ul{display:flex; flex-wrap:wrap; gap:0 2px; list-style:none; margin:0; padding:0}
.xb-menu a{display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px;
  padding:0 10px; color:var(--ink); text-decoration:none; font-size:.95rem; border-radius:4px}
.xb-menu a:hover{background:var(--clip)}
.xb-menu a[aria-current=page]{font-weight:700; box-shadow:inset 0 -3px 0 var(--brand)}


.xb-hero{padding:46px 0 8px}
.xb-lede{font-size:1.13rem; color:var(--muted); max-width:62ch; margin:0 0 24px}
.xb-find{display:flex; flex-wrap:wrap; gap:10px; align-items:stretch; max-width:820px; margin:0 0 10px}
.xb-find label{flex:1 0 100%; font-size:.88rem; color:var(--muted)}
.xb-find input{flex:1 1 300px; min-width:0; min-height:58px; padding:0 18px; font:inherit; font-size:1.04rem;
  color:var(--ink); background:var(--sheet); border:2px solid var(--ink); border-radius:var(--r)}
.xb-find input::placeholder{color:var(--muted)}
.xb-find button{min-height:58px; padding:0 30px; font:inherit; font-weight:700; font-size:1.02rem; cursor:pointer;
  color:var(--on-brand); background:var(--brand); border:2px solid var(--brand); border-radius:var(--r)}
.xb-find button:hover{background:var(--brand-hover); border-color:var(--brand-hover); color:#fff}
.xb-hop{display:flex; flex-wrap:wrap; gap:0 22px; list-style:none; margin:0 0 26px; padding:0}
.xb-hop a{display:inline-flex; align-items:center; min-height:44px; min-width:44px; color:var(--muted); font-size:.94rem}


.xb-wall{padding:30px 0 40px}
.xb-wall .xb-col p{color:var(--muted)}
.xb-tiles{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; list-style:none; margin:18px 0 0; padding:0}
.xb-tiles li{min-width:0; margin:0}
.xb-tile{display:flex; flex-direction:column; height:100%; text-decoration:none; color:var(--ink);
  background:var(--sheet); border:1px solid var(--rule); border-radius:var(--r); overflow:hidden}
.xb-tile:hover{border-color:var(--brand)}
.xb-tile img{display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover}
.xb-tilecap{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 8px; padding:10px 12px; min-height:44px}
.xb-tilecap b{font-weight:600; font-size:.96rem; min-width:0; overflow-wrap:anywhere}
.xb-dest{font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
  border:1px solid var(--rule); border-radius:3px; padding:1px 6px; white-space:nowrap}


.xb-part{padding:38px 0; border-top:1px solid var(--rule)}
.xb-part > .xb-wrap > .xb-col > p:last-child{margin-bottom:0}
.xb-kicker{font-family:'Red Hat Mono',monospace; font-size:.8rem; letter-spacing:.04em; color:var(--muted); margin:0 0 6px}
.xb-split{display:grid; grid-template-columns:minmax(0,55fr) minmax(0,45fr); gap:32px; align-items:stretch; margin:8px 0 0}
.xb-split.xb-flip{grid-template-columns:minmax(0,45fr) minmax(0,55fr)}
.xb-split.xb-flip > figure{order:2}
.xb-split > *{min-width:0}
.xb-split > figure{margin:0; display:flex; flex-direction:column; justify-content:flex-start; padding:0}
.xb-split > figure img{width:auto; max-width:100%; height:auto; align-self:center}
.xb-split > div p:last-child{margin-bottom:0}
figure{margin:24px 0}
figure img{display:block; width:auto; max-width:100%; height:auto; border:1px solid var(--rule); border-radius:var(--r); background:#fff}
figcaption{font-size:.86rem; color:var(--muted); margin-top:8px; padding:0 2px}
.xb-col > figure{max-width:var(--col)}
.xb-col > .xb-pair{width:min(1140px,calc(100vw - 40px)); max-width:none}
.xb-pair{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:stretch; margin:22px 0}
.xb-pair > figure{margin:0; display:flex; flex-direction:column}
.xb-pair > figure img{width:auto; max-width:100%}


.xb-ex{position:relative; background:var(--sheet); border:1px solid var(--rule); border-radius:var(--r);
  margin:30px 0 22px; padding:26px 22px 18px; max-width:var(--col)}
.xb-tab{position:absolute; top:-13px; left:18px; display:inline-flex; align-items:center; gap:8px;
  font-family:'Red Hat Mono',monospace; font-size:.8rem; font-weight:600; letter-spacing:.04em;
  color:#fff; padding:3px 10px; border-radius:4px}
.xb-tab-C{background:var(--tab-C)} .xb-tab-M{background:var(--tab-M)} .xb-tab-T{background:var(--tab-T)}
.xb-tab-G{background:var(--tab-G)} .xb-tab-A{background:var(--tab-A)} .xb-tab-S{background:var(--tab-S)}
.xb-ex h3{margin:0 0 12px; font-size:1.12rem}
.xb-ex dl{display:grid; grid-template-columns:minmax(120px,170px) minmax(0,1fr); gap:0; margin:0}
.xb-ex dt,.xb-ex dd{padding:9px 0; border-top:1px solid var(--rule); margin:0}
.xb-ex dt{font-family:'Red Hat Mono',monospace; font-size:.76rem; letter-spacing:.03em; text-transform:uppercase; color:var(--muted); padding-right:12px; padding-top:12px}
.xb-ex dd{min-width:0}
.xb-ex dd.xb-val{font-weight:600}
.xb-recheck{font-family:'Red Hat Mono',monospace; font-size:.8rem; color:var(--muted)}
.xb-ex a{overflow-wrap:anywhere}
.xb-ex dd a,.xb-part p a,.xb-part li a,.xb-tw td a{display:inline-flex; align-items:center; min-height:44px; min-width:44px; vertical-align:middle}
.xb-part .xb-drawers a.xb-drawer{display:block; min-height:0}


.xb-index{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:4px 0 0; padding:0}
.xb-index a{display:inline-flex; align-items:center; gap:8px; min-height:44px; min-width:44px; padding:0 12px;
  border:1px solid var(--rule); border-radius:4px; background:var(--sheet); color:var(--ink); text-decoration:none; font-size:.92rem}
.xb-index a:hover{border-color:var(--brand)}
.xb-index code{font-size:.8rem; color:var(--muted)}


.xb-drawers{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; list-style:none; margin:18px 0 0; padding:0}
.xb-drawers li{min-width:0; margin:0}
.xb-drawer{display:block; height:100%; padding:18px 18px 16px; background:var(--sheet); border:1px solid var(--rule);
  border-left:6px solid var(--ink); border-radius:var(--r); color:var(--ink); text-decoration:none}
.xb-drawer:hover{border-color:var(--brand)}
.xb-drawer b{display:block; font-family:'Red Hat Display',sans-serif; font-size:1.08rem; margin-bottom:4px}
.xb-drawer span{display:block; color:var(--muted); font-size:.94rem}
.xb-dr-C{border-left-color:var(--tab-C)} .xb-dr-M{border-left-color:var(--tab-M)} .xb-dr-T{border-left-color:var(--tab-T)}
.xb-dr-G{border-left-color:var(--tab-G)} .xb-dr-A{border-left-color:var(--tab-A)} .xb-dr-S{border-left-color:var(--tab-S)}


.xb-tw{overflow-x:auto; margin:18px 0 22px; max-width:var(--col); background:var(--sheet); border:1px solid var(--rule); border-radius:var(--r)}
table{border-collapse:collapse; width:100%; font-size:.94rem}
th,td{text-align:left; vertical-align:top; padding:10px 12px; border-bottom:1px solid var(--rule)}
tr:last-child td{border-bottom:0}
td:first-child{white-space:nowrap}
th{font-family:'Red Hat Mono',monospace; font-size:.75rem; letter-spacing:.03em; text-transform:uppercase; color:var(--muted); font-weight:600}


.xb-col ul,.xb-col ol{padding-left:1.25em; margin:0 0 1em}
.xb-col li{margin:0 0 .4em}
.xb-note{border-left:4px solid var(--brand); background:var(--sheet); padding:14px 18px; margin:18px 0; max-width:var(--col); border-radius:0 var(--r) var(--r) 0}
.xb-note p:last-child{margin:0}
.xb-qa{max-width:var(--col); margin:12px 0 0}
.xb-qa details{border-top:1px solid var(--rule)}
.xb-qa summary{cursor:pointer; min-height:44px; display:flex; align-items:center; padding:10px 0;
  font-family:'Red Hat Display',sans-serif; font-weight:700; font-size:1.04rem}
.xb-qa details p{margin:0 0 14px}
.xb-go{display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; margin:22px 0 0; padding:16px 20px;
  background:var(--sheet); border:1px dashed var(--rule); border-radius:var(--r); max-width:var(--col)}
.xb-go p{margin:0; flex:1 1 300px}
.xb-go a{display:inline-flex; align-items:center; min-height:44px; font-weight:700}
.xb-crumbs{font-size:.88rem; color:var(--muted); margin:0 0 10px}
.xb-crumbs a{display:inline-flex; align-items:center; min-height:44px; min-width:44px; color:var(--muted)}


.xb-tool{background:var(--sheet); border:1px solid var(--rule); border-radius:var(--r); padding:20px; max-width:var(--col)}
.xb-tool fieldset{border:0; padding:0; margin:0 0 16px}
.xb-tool legend{font-weight:700; margin-bottom:6px; font-family:'Red Hat Display',sans-serif}
.xb-opts{display:flex; flex-wrap:wrap; gap:8px}
.xb-opts label{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 12px;
  border:1px solid var(--rule); border-radius:4px; cursor:pointer; background:var(--paper)}
.xb-opts input{width:18px; height:18px; accent-color:#A63600}
.xb-tool button{min-height:48px; padding:0 22px; font:inherit; font-weight:700; cursor:pointer;
  color:var(--on-brand); background:var(--brand); border:2px solid var(--brand); border-radius:var(--r)}
.xb-tool button.xb-plain{background:transparent; color:var(--ink); border-color:var(--rule)}
.xb-out{margin-top:18px}
.xb-out[hidden]{display:none}
.xb-out ol{padding-left:1.3em}
.xb-out li{margin:0 0 12px}
.xb-out textarea{width:100%; min-height:180px; font-family:'Red Hat Mono',monospace; font-size:.84rem;
  border:1px solid var(--rule); border-radius:4px; padding:10px; background:var(--paper); color:var(--ink)}


.xb-end{margin-top:40px; background:#1B2430; color:#C9D1DB; padding:34px 0 40px; font-size:.92rem}
.xb-end a{color:#F2F4F7}
.xb-endgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:22px}
.xb-end h2{font-size:.8rem; font-family:'Red Hat Mono',monospace; letter-spacing:.06em; text-transform:uppercase; color:#F2F4F7; margin:0 0 6px}
.xb-end ul{list-style:none; margin:0; padding:0}
.xb-end li a{display:inline-flex; align-items:center; min-height:44px; min-width:44px}
.xb-small{margin-top:22px; padding-top:16px; border-top:1px solid #344152; max-width:84ch}
.xb-small p{margin:0 0 .7em}

@media (max-width:980px){
  .xb-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .xb-split,.xb-split.xb-flip{grid-template-columns:minmax(0,1fr)}
  .xb-split.xb-flip > figure{order:0}
}
@media (max-width:700px){
  body{font-size:16px}
  .xb-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .xb-pair,.xb-drawers{grid-template-columns:minmax(0,1fr)}
  .xb-ex dl{grid-template-columns:minmax(0,1fr)}
  .xb-ex dt{padding-bottom:0; border-top:1px solid var(--rule)}
  .xb-ex dd{border-top:0; padding-top:2px}
  .xb-brand span{font-size:.92rem}
  .xb-hero{padding-top:30px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important; scroll-behavior:auto!important}}