.tag { display:inline-flex; align-items:center; gap:10px; min-height:28px; max-width:100%; padding:3px 12px 3px 11px; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-panel); color:var(--text-muted); box-shadow:var(--shadow-chip); font:12px/1.6 var(--font-mono); letter-spacing:.06em; overflow-wrap:anywhere; }
.tag__dot { position:relative; width:7px; height:7px; border-radius:var(--radius-round); background:var(--accent-grad); color:var(--text); }
.hero { position:relative; overflow-x:clip; text-align:center; }
.hero__copy { padding:40px 24px 30px; display:flex; flex-direction:column; align-items:center; }
.hero__copy .tag { margin:0; }
.hero h1 { margin:22px 0 0; font-size:clamp(2rem,3.4vw,3rem); line-height:1.12; }
.hero h1 > span { display:block; }
.lede { margin:18px 0 0; max-width:760px; font-size:16px; line-height:1.6; color:var(--text-muted); }
.lede strong { color:var(--text); }
.platforms { margin-top:26px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 14px; }
.platforms__label { font:11.5px/1.6 var(--font-mono); letter-spacing:.14em; color:var(--text-muted); }
.platforms ul { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; list-style:none; margin:0; padding:0; }
.platforms a { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:32px; padding:5px 12px 5px 10px; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-panel); color:var(--text-muted); box-shadow:var(--shadow-chip); font-size:13px; }
.platforms svg { width:14px; height:14px; color:var(--text); }
.platforms a:hover { border-color:var(--accent-ring); color:var(--accent-dark); }
.stage { position:relative; height:432px; background:var(--bg-panel-2); color:var(--text); border-top:1px solid var(--border-lav); overflow:hidden; }
.facts { position:relative; z-index:3; min-height:42px; margin:0; padding:8px 24px; list-style:none; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:0; background:var(--veil); color:var(--text-muted); border-bottom:1px solid var(--border-lav); font:12px/1.6 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; }
.facts li { display:inline-flex; align-items:center; gap:9px; }
.facts li + li::before { content:""; width:4px; height:4px; flex-shrink:0; margin:0 20px; border-radius:var(--radius-round); background:var(--accent); color:var(--text); }
.facts b { font-weight:var(--weight-medium); color:var(--text); }
.glyphs { position:absolute; z-index:1; top:42px; bottom:0; width:50%; overflow:hidden; }
.glyphs--l { left:0; mask-image:linear-gradient(90deg,var(--mask-solid) 0,var(--mask-solid) 16%,var(--mask-clear) 78%); }
.glyphs--r { right:0; mask-image:linear-gradient(270deg,var(--mask-solid) 0,var(--mask-solid) 16%,var(--mask-clear) 78%); }
.glyphs pre { position:absolute; top:0; width:max-content; max-width:none; margin:0; padding:0 8px; border:0; background:var(--clear); color:var(--glyph-lo); font:13px/22px var(--font-mono); font-variant-ligatures:none; white-space:pre; }
.glyphs--l pre { left:0; }
.glyphs--r pre { right:0; text-align:right; }
.glyphs .hi { color:var(--glyph-hi); }
.win { position:absolute; z-index:2; top:86px; left:0; right:0; margin:0 auto; width:min(1120px,90vw); height:540px; background:var(--bg-panel); color:var(--text); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-near),var(--shadow-far); overflow:hidden; text-align:left; user-select:none; }
.win__bar,.window-chrome { height:38px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 14px; background:var(--chrome); color:var(--text-muted); border-bottom:1px solid var(--border); }
.lights { display:flex; gap:7px; }
.lights i { width:11px; height:11px; flex-shrink:0; border-radius:var(--radius-round); box-shadow:inset 0 0 0 .5px var(--dot-edge); }
.lights i:nth-child(1) { background:var(--error); color:var(--text); }
.lights i:nth-child(2) { background:var(--warn); color:var(--text); }
.lights i:nth-child(3) { background:var(--success); color:var(--text); }
.win__title { font-size:12.5px; letter-spacing:.02em; }
.win__core { justify-self:end; font:11px/1.6 var(--font-mono); letter-spacing:.08em; }
.win__body { display:grid; grid-template-columns:204px minmax(0,1fr) 404px; height:calc(100% - 38px); }
.side { background:var(--sidebar); color:var(--text-muted); border-right:1px solid var(--border); padding:14px 10px; }
.side__brand { display:flex; align-items:center; gap:9px; padding:2px 10px 14px; font-size:13.5px; font-weight:var(--weight-medium); color:var(--text); }
.side__brand img { width:18px; height:18px; }
.side__list { display:flex; flex-direction:column; gap:2px; }
.side__item { display:flex; align-items:center; gap:10px; height:34px; padding:0 10px; border-radius:var(--radius); font-size:13.5px; }
.side__item svg { width:15px; height:15px; }
.side__item.is-on { background:var(--row-active); color:var(--text); }
.pane-set { padding:16px 26px 0; }
.pane-set__head { display:flex; align-items:baseline; justify-content:space-between; padding-bottom:10px; border-bottom:1px solid var(--border-soft); }
.pane-set__title { font-size:16px; font-weight:var(--weight-medium); }
.pane-set__path { font:11px/1.6 var(--font-mono); letter-spacing:.08em; color:var(--text-muted); }
.set { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:44px; padding:5px 0; border-bottom:1px solid var(--border-soft); }
.set__name { font-size:13.5px; font-weight:var(--weight-medium); line-height:18px; }
.set__hint { font-size:11.5px; line-height:16px; color:var(--text-muted); }
.set__ctl { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.state { display:inline-flex; align-items:center; gap:6px; font:11px/1.6 var(--font-mono); letter-spacing:.06em; color:var(--accent-dark); }
.state::before { content:""; width:6px; height:6px; border-radius:var(--radius-round); background:var(--accent-grad); color:var(--text); }
.toggle { position:relative; width:34px; height:20px; border-radius:var(--radius-pill); background:var(--track-off); color:var(--text); }
.toggle::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:var(--radius-round); background:var(--bg-panel); color:var(--text); box-shadow:var(--shadow-knob); }
.toggle.is-on { background:var(--accent-grad); color:var(--on-dark); }
.toggle.is-on::after { left:16px; }
.seg { display:inline-flex; padding:2px; border-radius:var(--radius); background:var(--row-active); color:var(--text-muted); }
.seg span { display:inline-flex; align-items:center; height:26px; padding:0 14px; border-radius:var(--radius-inset); font-size:12.5px; }
.seg span.is-on { background:var(--bg-panel); color:var(--accent-dark); font-weight:var(--weight-medium); box-shadow:var(--shadow-chip); }
.inputs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:14px; }
.inputs__label { font-size:11.5px; line-height:16px; color:var(--text-muted); margin-bottom:6px; }
.inputs__box { display:flex; align-items:center; justify-content:space-between; height:32px; padding:0 10px; border:1px solid var(--border); border-radius:var(--radius); background:var(--chrome); color:var(--text); font:12.5px/1.6 var(--font-mono); }
.inputs__box small { font-size:10.5px; letter-spacing:.08em; color:var(--text-muted); }
.pane-code { background:var(--code-bg); color:var(--text); border-left:1px solid var(--border); }
.pane-code__head { display:flex; align-items:center; justify-content:space-between; height:36px; padding:0 16px; border-bottom:1px solid var(--border-soft); }
.file { display:flex; align-items:center; gap:8px; font:12px/1.6 var(--font-mono); }
.file svg { width:13px; height:13px; }
.ro { font:10.5px/1.6 var(--font-mono); letter-spacing:.12em; color:var(--text-muted); }
.code { padding:8px 0; font:12.5px/19px var(--font-mono); font-variant-ligatures:none; }
.ln { display:grid; grid-template-columns:38px minmax(0,1fr); border-left:2px solid var(--clear); }
.ln.is-hl { background:var(--accent-tint); color:var(--text); border-left-color:var(--accent); }
.ln__n { text-align:right; padding-right:14px; color:var(--text-muted); }
.ln code { font-family:inherit; white-space:pre; overflow-wrap:normal; }
.yk { color:var(--text); }
.yp { color:var(--text-muted); }
.yv,.yr { color:var(--accent-dark); }
.next { background:var(--bg); color:var(--text); padding-top:96px; padding-bottom:104px; }
.next__in { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px; align-items:end; }
.next h2 { margin:14px 0 0; }
.next p { margin:0; font-size:15.5px; line-height:1.75; color:var(--text-muted); }
.tab-set { min-width:0; }
.tab-rail,[role="tablist"].tab-rail { display:flex; align-items:center; gap:28px; overflow-x:auto; max-width:100%; border-bottom:1px solid var(--border-lav); }
.tab-rail [role="tab"] { position:relative; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:10px 0; border:0; background:var(--clear); color:var(--text-muted); font:12px/1.6 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; }
.tab-rail [role="tab"]::after { content:""; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--accent-grad); color:var(--text); transform:scaleX(0); transition:transform var(--ease); }
.tab-rail [role="tab"][aria-selected="true"] { color:var(--text); }
.tab-rail [role="tab"][aria-selected="true"]::after { transform:scaleX(1); }
.tab-panel { padding-top:28px; }
.feature-window { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--bg-panel); color:var(--text); box-shadow:var(--shadow-near),var(--shadow-far); overflow:hidden; font-family:var(--font-mono); }
.feature-window .window-chrome { grid-column:1/-1; }
.feature-copy { padding:32px; font-size:13px; line-height:1.9; }
.feature-copy h3 { font:var(--weight-regular) 22px/1.4 var(--font-display); margin-top:0; }
.feature-material { min-width:0; padding:24px; border-left:1px solid var(--border); background:var(--code-bg); color:var(--text); }
.feature-material pre { margin:0; padding:0; border:0; }
.toc { position:sticky; top:0; z-index:12; display:flex; flex-wrap:wrap; gap:8px 20px; padding:14px 18px; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-panel); color:var(--text-muted); }
.toc a { display:inline-flex; align-items:center; justify-content:center; min-height:32px; font-size:13px; }
.faq-item { border-bottom:1px solid var(--border); background:var(--bg-panel); color:var(--text); }
.faq-item summary { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:64px; padding:18px 20px; cursor:pointer; list-style:none; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; flex-shrink:0; font:20px/1 var(--font-mono); color:var(--text-muted); }
.faq-item[open] summary::after { content:"−"; }
.faq-item__answer { padding:0 20px 20px; color:var(--text-muted); }
.faq-item__answer p:last-child { margin-bottom:0; }
.term-card { padding:24px 0; border-top:1px solid var(--border); min-width:0; }
.term-card h3 { margin:0 0 8px; }
.term-card__key { font:12px/1.7 var(--font-mono); color:var(--text-muted); }
.term-card p { margin:12px 0 0; color:var(--text-muted); }
.client-card { min-width:0; padding:30px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--bg-panel); color:var(--text); box-shadow:var(--shadow-near); }
.client-card + .client-card { margin-top:20px; }
.client-card__head { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.client-card__icon { width:56px; height:56px; flex-shrink:0; }
.client-card__head h3 { margin:0; }
.client-card__meta { display:flex; flex-wrap:wrap; gap:10px; margin:18px 0; font:12px/1.8 var(--font-mono); color:var(--text-muted); }
.client-card__actions { display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin-top:22px; }
[data-rev]:empty { display:none; }
.badges { display:flex; align-items:center; justify-content:flex-start; flex-wrap:wrap; gap:8px; }
.badge { display:inline-flex; align-items:center; justify-content:center; min-height:26px; max-width:100%; padding:3px 8px; border:1px solid var(--border); border-radius:var(--radius-inset); background:var(--chrome); color:var(--text-muted); font:11px/1.6 var(--font-mono); white-space:normal; overflow-wrap:anywhere; }
.badge--first,.badge--recommended { background:var(--row-active); color:var(--text); border-color:var(--border); }
.badge--first::before,.badge--recommended::before { content:""; flex-shrink:0; width:6px; height:6px; margin-right:7px; border-radius:var(--radius-round); background:var(--accent-grad); color:var(--text); }
.badge--archived { background:var(--chrome); color:var(--text-muted); border-style:dashed; }
.post-card { min-width:0; padding:28px 0; border-top:1px solid var(--border); }
.post-card__meta { display:flex; flex-wrap:wrap; align-items:center; gap:12px; font:12px/1.6 var(--font-mono); color:var(--text-muted); }
.post-card h3 { margin:16px 0 12px; }
.post-card p { color:var(--text-muted); }
.post-card__link { display:inline-flex; align-items:center; min-height:36px; border-bottom:1px solid var(--text); font:12px/1.6 var(--font-mono); }
.callout { margin:24px 0; padding:20px 24px; border:1px solid var(--border); border-left:3px solid var(--text-muted); border-radius:var(--radius); background:var(--chrome); color:var(--text); font-size:14px; }
.callout p:last-child { margin-bottom:0; }
.table-scroll { max-width:100%; overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); }
.data-table { width:100%; border-collapse:collapse; background:var(--bg-panel); color:var(--text); font-size:14px; }
.data-table :where(th,td),.prose table :where(th,td) { min-width:7em; padding:14px 18px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top; overflow-wrap:normal; word-break:normal; }
.data-table th,.prose table th { background:var(--chrome); color:var(--text); font-weight:var(--weight-medium); }
.prose table { display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; min-width:0; border-collapse:collapse; background:var(--bg-panel); color:var(--text); }
.prose table code,.data-table code { overflow-wrap:anywhere; }
.dl-fab { position:fixed; z-index:20; right:24px; bottom:24px; display:inline-flex; align-items:center; justify-content:center; gap:12px; max-width:calc(100vw - 36px); min-height:52px; padding:12px 18px; border:1px solid var(--border); border-radius:var(--radius); background:var(--text); color:var(--on-dark); box-shadow:var(--shadow-near); font:12px/1.6 var(--font-mono); }
.dl-fab svg { width:19px; height:19px; }
.dl-fab:hover { background:var(--accent-dark); color:var(--on-dark); }
.article-download { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:28px; margin-top:48px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--chrome); color:var(--text); }
.article-download h2 { margin:0 0 8px; font-size:24px; }
.article-download p { margin:0; color:var(--text-muted); }
.trust-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; }
.trust-facts strong { display:block; font:var(--weight-regular) clamp(28px,4vw,48px)/1.3 var(--font-display); }
.trust-facts p { margin-top:18px; color:var(--text-muted); font-size:14px; }
.preview-heading { margin:0 0 32px; }
.preview-stack > * + * { margin-top:24px; }
.preview-row { display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.swatches { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.swatch { min-width:0; padding:12px; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-panel); color:var(--text); font:11px/1.6 var(--font-mono); }
.swatch code { display:block; margin-top:10px; }
.swatch__paint { height:48px; border:1px solid var(--border); border-radius:var(--radius-inset); }
.swatch--bg { background:var(--bg); color:var(--text); }
.swatch--panel { background:var(--bg-panel); color:var(--text); }
.swatch--lavender { background:var(--bg-panel-2); color:var(--text); }
.swatch--border { background:var(--border); color:var(--text); }
.swatch--soft { background:var(--border-soft); color:var(--text); }
.swatch--lav { background:var(--border-lav); color:var(--text); }
.swatch--accent { background:var(--accent); color:var(--on-dark); }
.swatch--accent-dark { background:var(--accent-dark); color:var(--on-dark); }
.swatch--text { background:var(--text); color:var(--on-dark); }
.swatch--muted { background:var(--text-muted); color:var(--on-dark); }
.swatch--faint { background:var(--text-faint); color:var(--text); }
.swatch--success { background:var(--success); color:var(--text); }
.swatch--warn { background:var(--warn); color:var(--text); }
.swatch--error { background:var(--error); color:var(--text); }
.swatch--chrome { background:var(--chrome); color:var(--text); }
.swatch--sidebar { background:var(--sidebar); color:var(--text); }
.swatch--active { background:var(--row-active); color:var(--text); }
.swatch--off { background:var(--track-off); color:var(--text); }
.swatch--code { background:var(--code-bg); color:var(--text); }
.swatch--white { background:var(--on-dark); color:var(--text); }
.swatch--tint { background:var(--accent-tint); color:var(--text); }
.swatch--ring { background:var(--accent-ring); color:var(--text); }
.swatch--glyph-lo { background:var(--glyph-lo); color:var(--text); }
.swatch--glyph-hi { background:var(--glyph-hi); color:var(--text); }
.swatch--veil { background:var(--veil); color:var(--text); }
.swatch--edge { background:var(--dot-edge); color:var(--text); }
.swatch--mask-solid { background:var(--mask-solid); color:var(--on-dark); }
.swatch--mask-clear { background:var(--mask-clear); color:var(--text); }
.swatch--scrim { background:var(--scrim); color:var(--text); }
.swatch--clear { background:var(--clear); color:var(--text); }
.swatch--gradient { background:var(--accent-grad); color:var(--on-dark); }
.icon-definitions { position:absolute; width:0; height:0; overflow:hidden; }
@media (max-width:1080px) {
  .win__body { grid-template-columns:190px minmax(0,1fr); }
  .pane-code { display:none; }
}
@media (max-width:768px) {
  .hero__copy { padding:32px 20px 26px; }
  .hero h1 { font-size:clamp(1.5rem,6.4vw,1.875rem); }
  .lede { font-size:15px; }
  .platforms { gap:10px; }
  .platforms__label { flex-basis:100%; }
  .stage { height:460px; }
  .facts { padding:10px 16px; row-gap:6px; font-size:11px; }
  .facts li + li::before { margin:0 12px; }
  .glyphs { top:0; }
  .win { top:120px; width:92vw; }
  .win__core,.side { display:none; }
  .win__body { grid-template-columns:minmax(0,1fr); }
  .pane-set { padding:14px 16px 0; }
  .inputs { grid-template-columns:minmax(0,1fr); }
  .next__in { grid-template-columns:minmax(0,1fr); gap:20px; }
  .feature-window { grid-template-columns:minmax(0,1fr); }
  .feature-material { border-left:0; border-top:1px solid var(--border); }
  .feature-copy,.feature-material { padding:24px; }
  .trust-facts { grid-template-columns:minmax(0,1fr); }
  .swatches { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .client-card { padding:22px; }
}
@media (max-width:380px) {
  .pane-set__path,.set__ctl .state { display:none; }
  .seg span { padding-inline:10px; }
  .set { gap:8px; }
}