/* Lab-inspired framing. Reading panels keep their opaque document surface. */
.xb{--page:#e2e6e9;--accent:#08724f;--glass:rgba(255,255,255,.42);--rim:rgba(255,255,255,.86);--engraved:rgba(255,255,255,.65);--lab-shadow:0 22px 40px -28px #26343e4d;--lab-gridline:#72818c13;--lab-glow:#087a5521;--lab-dot:#087a5560}
html[data-xb-accent=blue] .xb{--page:#e2e6e9;--accent:#155cc4;--lab-glow:#1463d825;--lab-dot:#1463d860}
html[data-xb-scheme=dark] .xb{--page:#151b1b;--accent:#5ed5a8;--glass:rgba(36,48,44,.48);--rim:rgba(223,245,235,.14);--engraved:rgba(255,255,255,.12);--lab-shadow:0 22px 40px -28px #000c;--lab-gridline:#d3e6df0a;--lab-glow:#5ed5a817;--lab-dot:#5ed5a870}
html[data-xb-accent=blue][data-xb-scheme=dark] .xb{--page:#171e27;--accent:#82b1ff;--glass:rgba(36,46,62,.48);--lab-glow:#82b1ff17;--lab-dot:#82b1ff70}
.xb{isolation:isolate}
.xb::before,.xb::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none}
.xb::before{background:radial-gradient(200px 200px at -2% 23%,var(--lab-glow),transparent 72%),radial-gradient(200px 240px at 102% 60%,var(--lab-glow),transparent 72%),linear-gradient(180deg,var(--page),color-mix(in srgb,var(--page) 90%,#7e8b94))}
.xb::after{background:linear-gradient(90deg,var(--lab-gridline) 1px,transparent 1px),linear-gradient(var(--lab-gridline) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(#0008,#0003)}
.xb .wrap{max-width:1216px;padding-inline:32px}
.xb .site-header{padding-top:12px;background:transparent;border:0;backdrop-filter:none}
.xb .header-inner{width:calc(100% - 64px);max-width:1152px;height:64px;border-radius:22px;border:1px solid var(--rim);background:var(--nav);box-shadow:inset 0 1px 0 var(--engraved);padding:0 16px;gap:24px}
.xb .brand-mark{border-radius:50%;width:40px;height:40px;color:var(--on-accent);background:var(--accent);box-shadow:inset 0 0 0 1px #fff3}
.xb .brand strong{font-size:19px}
.xb .site-motto{font:8px/1.25 Consolas,monospace;letter-spacing:.14em;color:var(--muted);padding-left:22px;border-left:1px solid var(--line)}
.xb .desktop-nav{padding:4px;background:color-mix(in srgb,var(--page) 75%,transparent);border:1px solid var(--line);border-radius:999px;gap:4px}
.xb .desktop-nav a{padding:9px 19px;border-radius:999px;min-height:38px;font-size:12px}
.xb .desktop-nav a[aria-current]{background:var(--surface);color:var(--text);box-shadow:0 7px 12px -9px #26343e70}
.xb .desktop-nav a[aria-current]::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent);margin-right:8px;vertical-align:middle}
.xb .icon-button{border-radius:50%}
.xb .header-actions>[data-panel=appearance-panel]{color:var(--accent);background:var(--soft);box-shadow:0 0 0 3px var(--surface),0 0 0 4px var(--lab-dot);min-width:36px;min-height:36px;margin:4px}
.xb .header-actions{margin-left:auto}
@media(min-width:960px){.xb .header-inner{position:relative}.xb .desktop-nav{position:absolute;left:50%;transform:translateX(-50%);margin-left:0}}
.xb .demo-notice{max-width:1120px;background:none;border:0;margin:6px auto -4px;padding:5px 12px;font-size:11px;color:var(--muted)}
.xb .demo-notice a{text-decoration:underline;text-underline-offset:3px;margin-left:4px}
.xb .lab-home{padding-top:24px}
.xb .lab-hero,.xb .lab-library{border:1px solid var(--rim);background:var(--glass);box-shadow:inset 0 1px 0 var(--engraved),var(--lab-shadow);border-radius:32px;position:relative}
.xb .lab-hero{padding:48px;min-height:460px;display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);align-items:center;gap:12px;overflow:hidden}
.xb .lab-copy{position:relative;padding-left:84px;min-width:0}
.xb .lab-copy::before,.xb .lab-section-head::before{content:"";position:absolute;left:62px;top:0;bottom:0;width:1px;background:var(--line)}
.xb .section-index{position:absolute;left:0;top:0;display:grid;place-items:center;width:44px;height:44px;border-radius:10px;font:17px Consolas,monospace;color:var(--muted);border:1px solid var(--rim);background:color-mix(in srgb,var(--page) 85%,transparent);box-shadow:inset 0 1px 0 var(--engraved)}
.xb .section-index::after{content:"···";position:absolute;bottom:-20px;font-size:15px;letter-spacing:2px}
.xb .lab-copy .overline{font:10px/1.3 Consolas,monospace;letter-spacing:.15em;color:var(--muted)}
.xb .lab-copy .overline i{position:absolute;left:57px;width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--lab-dot)}
.xb .lab-copy h1{font-size:clamp(34px,3.8vw,48px);line-height:1.23;letter-spacing:-.065em;margin-top:18px;font-weight:760}
.xb .lab-lead{font-size:21px;line-height:1.55;color:var(--muted);margin-top:20px;letter-spacing:-.025em}
.xb .lab-description{font-size:13px;line-height:1.9;color:var(--muted);margin-top:15px}
.xb .lab-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:26px}
.xb .lab-actions .button{border-radius:999px;border-color:var(--rim);background:var(--glass);font-size:13px;min-height:46px;box-shadow:inset 0 1px 0 var(--engraved);padding-inline:22px}
.xb .lab-actions .button.primary{background:var(--surface);color:var(--text);padding-left:5px;gap:12px;box-shadow:inset 0 1px 0 var(--engraved),0 9px 18px -11px #26343e66}
.xb .action-orb{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:var(--accent);color:var(--on-accent);box-shadow:inset 0 0 0 2px #fff3,0 0 12px var(--lab-dot)}
.xb .lab-words{display:flex;gap:8px;font:9px/1 Consolas,monospace;letter-spacing:.12em;color:var(--muted);margin-top:24px}
.xb .lab-words span{padding:9px 11px;border:1px solid var(--rim);border-radius:999px;background:var(--glass)}
.xb .lab-orbit{width:100%;position:relative;color:var(--edge);margin-right:-12px}
.xb .lab-orbit>svg{width:100%;height:auto;overflow:visible}
.xb .orbit-legend,.xb .orbit-callout{position:absolute;font:9px/1.5 Consolas,monospace;letter-spacing:.1em;z-index:1;color:var(--muted)}
.xb .orbit-legend{top:7%;left:-9%}
.xb .orbit-callout{top:-2%;right:-3%;padding:16px 17px;border:1px solid var(--rim);background:var(--glass);border-radius:18px;box-shadow:inset 0 1px 0 var(--engraved)}
.xb .orbit-callout::after{content:"";width:20px;height:2px;display:block;background:var(--accent);margin-top:10px}
@keyframes xblog-orbit{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.xb .orbit-outer,.xb .orbit-inner{transform-box:view-box;transform-origin:center}
.xb .orbit-outer{animation:xblog-orbit 60s linear infinite}
.xb .orbit-inner{animation:xblog-orbit 90s linear infinite reverse}
.xb .lab-library{padding:28px;margin-top:32px;border-radius:28px;scroll-margin-top:100px}
.xb .lab-library::after{content:"";position:absolute;top:-3px;right:18%;width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--lab-dot)}
.xb .lab-section-head{position:relative;padding-left:86px;min-height:84px;margin:6px 0 28px}
.xb .lab-section-head .overline{font:10px/1.3 Consolas,monospace;letter-spacing:.16em;color:var(--muted)}
.xb .lab-section-head .overline::before{content:"";position:absolute;left:58px;top:4px;width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 9px var(--lab-dot)}
.xb .lab-section-head h2{font-size:30px;font-weight:750;letter-spacing:-.055em;line-height:1.3;margin-top:7px}
.xb .lab-section-head>div>p:last-child{font-size:13px;color:var(--muted);margin-top:6px}
.xb .lab-categories{gap:8px;margin-bottom:28px}
.xb .lab-categories .chip{min-height:38px;padding-inline:15px;background:var(--glass);border-color:var(--rim);box-shadow:inset 0 1px 0 var(--engraved);font-size:12px;gap:8px}
.xb .lab-categories .chip small{font:10px Consolas,monospace;color:var(--muted)}
.xb .lab-content{container-type:inline-size}
.xb .lab-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
@container(min-width:34rem){.xb .lab-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.xb .lab-grid .featured{grid-column:span 2}}
@container(min-width:56rem){.xb .lab-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.xb .lab-grid:has(.featured:only-child){display:block}
.xb .card-index,.xb .tile-tail{display:none}
.xb .lab-grid :is(.featured,.article-row){position:relative;display:flex;flex-direction:column;background:var(--glass);border:1px solid var(--rim);border-radius:20px;padding:54px 24px 22px;box-shadow:inset 0 1px 0 var(--engraved),0 18px 28px -25px #26343e50;transition:background-color 200ms var(--ease),border-color 200ms var(--ease),transform 200ms var(--ease);min-width:0}
.xb .lab-grid .card-index{display:flex;gap:7px;align-items:center;position:absolute;left:24px;top:18px;color:var(--muted);font:11px Consolas,monospace;letter-spacing:.08em}
.xb .card-index i{width:4px;height:4px;background:var(--accent);border-radius:50%;box-shadow:0 0 8px var(--lab-dot)}
.xb .lab-grid .meta{font-size:11px;gap:5px 9px}
.xb .lab-grid .badge{background:var(--soft);font-size:11px}
.xb .lab-grid .featured{min-height:282px}
.xb .lab-grid .featured h2{font-size:30px;line-height:1.45;margin-top:14px;letter-spacing:-.045em}
.xb .lab-grid .article-row h2{font-size:20px;line-height:1.55;margin-top:14px;margin-bottom:12px}
.xb .lab-grid .excerpt,.xb .lab-grid .article-row>p{font-size:13px;line-height:1.8;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;color:var(--muted);margin-top:0}
.xb .lab-grid .read-line,.xb .lab-grid .tile-tail{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;font-weight:650;color:var(--accent);margin-top:auto;padding-top:22px}
.xb .lab-grid .round-arrow{flex:none;border:1px solid var(--rim);background:var(--surface);box-shadow:0 6px 12px -7px #26343e66;transition:background-color 200ms var(--ease),color 200ms var(--ease)}
.xb .lab-grid .round-arrow svg{transition:transform 200ms var(--ease)}
.xb .lab-grid :is(.featured,.article-row):focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.xb .lab-grid :is(.featured,.article-row):focus-visible .round-arrow{background:var(--accent);color:var(--on-accent)}
.xb .lab-grid :is(.featured,.article-row):focus-visible .round-arrow svg{transform:translateX(2px)}
.xb .site-footer{margin-top:16px;border-top:0}
.xb .bottom-nav{margin:0 12px 12px;border-radius:22px;border:1px solid var(--rim);box-shadow:inset 0 1px 0 var(--engraved),var(--lab-shadow)}
@media(hover:hover) and (pointer:fine){
 .xb .lab-grid :is(.featured,.article-row):hover{transform:translateY(-3px);background:var(--surface);border-color:var(--rim)}
 .xb .lab-grid :is(.featured,.article-row):hover .round-arrow{background:var(--accent);color:var(--on-accent)}
 .xb .lab-grid :is(.featured,.article-row):hover .round-arrow svg{transform:translateX(2px)}
 .xb .lab-actions .button:hover{background:var(--surface);color:var(--accent);transform:translateY(-1px)}
}
@media(max-width:1100px){.xb .site-motto{display:none}.xb .lab-hero{padding:36px}.xb .lab-copy{padding-left:76px}.xb .lab-copy h1{font-size:38px}.xb .lab-lead{font-size:19px}.xb .orbit-legend{display:none}}
@media(max-width:959px){.xb .lab-hero{grid-template-columns:1fr;min-height:0}.xb .lab-orbit{display:none}.xb .lab-copy h1{font-size:44px}.xb .lab-description br{display:none}}
@media(max-width:767px){
 .xb .wrap{padding-inline:16px}
 .xb .header-inner{width:calc(100% - 32px);height:64px;padding-inline:12px;gap:12px;border-radius:20px}
 .xb .brand strong{font-size:17px}
 .xb .brand-mark{width:34px;height:34px}
 .xb .site-header{position:relative}
 .xb .lab-home{padding-top:18px}
 .xb .lab-hero{padding:27px 24px;border-radius:28px}
 .xb .lab-copy{padding-left:0}
 .xb .lab-copy::before,.xb .lab-copy>.section-index{display:none}
 .xb .lab-copy .overline{font-size:9px;letter-spacing:.12em}
 .xb .lab-copy .overline i{position:static;flex:none}
 .xb .lab-copy h1{font-size:36px;line-height:1.3;margin-top:18px}
 .xb .lab-lead{font-size:18px}
 .xb .lab-description{font-size:12px}
 .xb .lab-actions{margin-top:24px;gap:10px}
 .xb .lab-actions .button{font-size:12px;padding-inline:17px}
 .xb .lab-words{font-size:8px;gap:6px}
 .xb .lab-words span{padding:8px 9px}
 .xb .lab-library{padding:16px 12px;border-radius:26px;margin-top:20px}
 .xb .lab-section-head{padding-left:68px;margin:4px 4px 20px;min-height:80px}
 .xb .lab-section-head::before{left:53px}
 .xb .lab-section-head .overline::before{left:50px}
 .xb .lab-section-head h2{font-size:27px}
 .xb .lab-section-head .section-index{width:40px;height:40px}
 .xb .lab-categories{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:3px 2px 9px;margin-bottom:16px}
 .xb .lab-categories .chip{flex:none;font-size:11px;padding-inline:12px}
 .xb .lab-grid{gap:14px}
 .xb .lab-grid :is(.featured,.article-row){padding:49px 20px 20px}
 .xb .lab-grid .featured h2{font-size:26px}
 .xb .demo-notice{font-size:10px;padding-inline:22px;line-height:1.7;margin-bottom:0}
 .xb .reading-column{margin-inline:0}
}
@media(prefers-reduced-transparency:reduce){.xb .header-inner,.xb .lab-hero,.xb .lab-library,.xb .lab-grid :is(.featured,.article-row){background:var(--surface)}}
@media(prefers-reduced-motion:reduce){
 .xb .orbit-outer,.xb .orbit-inner{animation:none}
 .xb .lab-grid :is(.featured,.article-row):hover,.xb .lab-actions .button:hover{transform:none}
 .xb .lab-grid :is(.featured,.article-row):is(:hover,:focus-visible) .round-arrow svg{transform:none}
}

/* Per-article thumbnail edition. */
.xb .lab-grid :is(.featured,.article-row){padding:7px 7px 18px;min-height:0}
.xb .lab-grid .featured{grid-column:auto}
.xb .lab-grid .article-row:has(.row-media){display:flex}
.xb .lab-grid .card-thumb{display:block;position:relative;float:none;width:100%;aspect-ratio:16/9;margin:0 0 14px;border-radius:13px;overflow:hidden;flex:none;clip-path:polygon(0 30px,44px 30px,74px 0,100% 0,100% 100%,0 100%)}
.xb .card-thumb img{width:100%;height:100%;display:block;object-fit:cover;transition:transform 500ms var(--ease)}
.xb .lab-grid .card-index{left:14px;top:15px;z-index:1}
.xb .lab-grid .meta{margin-inline:10px}
.xb .lab-grid :is(.featured,.article-row) h2{font-size:20px;line-height:1.55;margin:10px 10px 12px;letter-spacing:-.035em}
.xb .lab-grid .excerpt,.xb .lab-grid .article-row>p{margin-inline:10px}
.xb .lab-grid .read-line,.xb .lab-grid .tile-tail{margin-inline:10px;padding-top:18px;font-size:11px}
.xb .reading-hero figcaption{font-size:11px;color:var(--muted);margin-top:8px}
@media(hover:hover) and (pointer:fine){.xb .lab-grid :is(.featured,.article-row):hover .card-thumb img{transform:scale(1.04)}}
@media(max-width:767px){.xb .lab-grid :is(.featured,.article-row){padding:7px 7px 18px}.xb .lab-grid .featured h2{font-size:22px}}
@media(prefers-reduced-motion:reduce){.xb .lab-grid :is(.featured,.article-row):hover .card-thumb img{transform:none}}