/* Figures for "Bits per second". Every color is an Origin palette token, so the
   figures follow whichever palette the article uses. Rules are scoped under .fig
   with enough specificity to override the article's prose defaults. */
.origin-prose figure.fig{margin:64px 0}
.fig{--fig-grid:color-mix(in srgb,var(--origin-fg) 9%,var(--origin-panel));--fig-axis:color-mix(in srgb,var(--origin-fg) 24%,var(--origin-panel));--fig-ink:var(--origin-fg);--fig-neutral:color-mix(in srgb,var(--origin-fg) 46%,var(--origin-panel));--fig-neutral-soft:color-mix(in srgb,var(--origin-fg) 26%,var(--origin-panel));--fig-faint:color-mix(in srgb,var(--origin-fg) 11%,var(--origin-panel));--fig-accent:var(--origin-accent);--fig-accent-mid:color-mix(in srgb,var(--origin-accent) 52%,var(--origin-panel));--fig-accent-soft:color-mix(in srgb,var(--origin-accent) 26%,var(--origin-panel));--fig-accent-wash:color-mix(in srgb,var(--origin-accent) 10%,var(--origin-panel));--fig-ease:cubic-bezier(.22,1,.36,1);position:relative;font:400 14px/1.5 var(--origin-font,Arial,Helvetica,sans-serif);color:var(--origin-text);overflow-wrap:normal}
.fig p,.fig dl,.fig dt,.fig dd,.fig ol,.fig li{margin:0;padding:0;line-height:inherit}
.fig ol{list-style:none}
.fig svg{display:block;width:100%;height:auto;margin:0;overflow:visible}
.fig img,.fig video{display:block;margin:0;max-width:none}
.fig button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
.fig [hidden]{display:none!important}
.fig.fig-panel{padding:28px 28px 18px;background:var(--origin-panel);border:1px solid var(--origin-border)}

/* Heading, caption and shared controls */
.fig .fig-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 24px;margin-bottom:24px}
.fig .fig-head>div:first-child{flex:1 1 320px;min-width:0}
.fig .fig-kicker{margin-bottom:8px;font-size:13px;color:var(--origin-muted);font-variant-numeric:tabular-nums}
.fig .fig-title{font:400 22px/1.3 var(--origin-heading-font,"Origin IBM Plex Sans",Arial,sans-serif);letter-spacing:-.03em;color:var(--origin-fg);text-wrap:balance}
.fig .fig-sub{margin-top:6px;color:var(--origin-muted);text-wrap:pretty}
.fig .fig-caption{margin-top:18px;font-size:13px;line-height:1.55;color:var(--origin-muted);text-align:left;text-wrap:pretty}
.fig .fig-caption p+p{margin-top:6px}
.fig .fig-plot{position:relative}
.fig .fig-seg{display:inline-flex;flex:none;padding:2px;border:1px solid var(--origin-border);background:var(--origin-bg)}
.fig .fig-seg button{appearance:none;border:0;border-radius:0;background:none;min-height:32px;padding:0 12px;font-size:13px;color:var(--origin-muted);white-space:nowrap;transition:background-color .2s,color .2s}
.fig .fig-seg button:hover{color:var(--origin-fg)}
.fig .fig-seg button[aria-pressed=true]{background:var(--origin-fg);color:var(--origin-bg)}
.fig .fig-seg button:focus-visible,.fig .fig-button:focus-visible{outline:2px solid var(--origin-accent);outline-offset:2px}
.fig .fig-button{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;min-height:34px;padding:0 12px;border:1px solid var(--origin-border);border-radius:0;background:var(--origin-bg);font-size:13px;color:var(--origin-fg);transition:border-color .2s}
.fig .fig-button:hover{border-color:var(--origin-fg)}
.fig .fig-button svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fig .fig-button.is-icon{width:36px;padding:0}
.fig .fig-button.is-icon svg{fill:currentColor;stroke:none}

/* Legends: a short mark of the series color beside text in text tokens */
.fig .fig-legend{display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:14px;font-size:13px;color:var(--origin-text)}
.fig .fig-legend>span{display:inline-flex;align-items:center;gap:8px;min-height:28px}
.fig .key-dot{width:10px;height:10px;border-radius:50%;flex:none}
.fig .key-bar{width:20px;height:8px;border-radius:4px;flex:none}
.fig .key-tick{width:2px;height:13px;flex:none}
.fig .key-dot.tone-accent{background:var(--fig-accent)}
.fig .key-bar.tone-accent-soft{background:var(--fig-accent-soft)}
.fig .key-tick.tone-ink{background:var(--fig-ink)}

/* Tooltip and data table */
.fig .fig-tip{position:absolute;z-index:4;left:0;top:0;display:grid;gap:2px;min-width:140px;max-width:250px;padding:10px 12px;background:var(--origin-bg);border:1px solid var(--origin-border);box-shadow:0 10px 30px color-mix(in srgb,var(--origin-fg) 10%,transparent);font-size:13px;line-height:1.4;color:var(--origin-muted);pointer-events:none;opacity:0;transition:opacity .15s}
.fig .fig-tip.is-on{opacity:1}
.fig .fig-tip b{font-size:16px;font-weight:600;color:var(--origin-fg);font-variant-numeric:tabular-nums}
.fig .fig-tip .fig-tip-label{color:var(--origin-fg)}
.fig .fig-data{margin-top:14px;border-top:1px solid var(--origin-border)}
.fig .fig-data summary{display:inline-flex;align-items:center;gap:9px;min-height:42px;font-size:13px;color:var(--origin-muted);cursor:pointer;list-style:none}
.fig .fig-data summary::-webkit-details-marker{display:none}
.fig .fig-data summary::before{content:"";width:5px;height:5px;border-right:1.5px solid;border-bottom:1.5px solid;transform:rotate(-45deg);transition:transform .2s}
.fig .fig-data[open] summary::before{transform:rotate(45deg) translate(-2px,-1px)}
.fig .fig-data summary:hover{color:var(--origin-fg)}
.fig .fig-table-wrap{overflow-x:auto;margin-bottom:8px}
.fig .fig-table{display:table;width:100%;max-width:none;border-collapse:collapse;font-size:13px;line-height:1.45;font-variant-numeric:tabular-nums}
.fig .fig-table th,.fig .fig-table td{padding:8px 16px 8px 0;border-bottom:1px solid var(--fig-grid);text-align:left;vertical-align:top;font-weight:400}
.fig .fig-table thead th{color:var(--origin-muted)}
.fig .fig-table tbody th{color:var(--origin-fg)}
.fig .fig-table .num{text-align:right;padding-right:0;padding-left:16px}

/* SVG marks */
.fig svg text{font:400 12px/1 var(--origin-font,Arial,Helvetica,sans-serif);fill:var(--origin-muted)}
/* SVG selection needs a fill override as well as the page's selected text color. */
.fig svg text::selection,.fig svg tspan::selection{fill:var(--origin-bg);color:var(--origin-bg);background-color:var(--origin-accent);stroke:none}
.fig svg .t-ink{fill:var(--origin-fg)}
.fig svg .t-strong{fill:var(--origin-fg);font-weight:600}
.fig svg .t-lg{font-size:13px}
.fig svg .t-sm{font-size:11px}
.fig svg .t-num{font-variant-numeric:tabular-nums}
.fig svg .t-faint{fill:color-mix(in srgb,var(--origin-muted) 70%,var(--origin-panel))}
.fig svg .grid{stroke:var(--fig-grid);stroke-width:1;shape-rendering:crispEdges}
.fig svg .axis{stroke:var(--fig-axis);stroke-width:1;shape-rendering:crispEdges}
.fig svg .hit{fill:transparent}
.fig svg [tabindex]:focus{outline:none}
.fig svg [tabindex]:focus-visible .focus-ring{stroke:var(--origin-accent);stroke-width:2}
.fig svg:focus-visible{outline:2px solid var(--origin-accent);outline-offset:4px}

/* CRO outreach Sankey */
[data-fig=sankey] .fig-plot{min-height:330px}
.fig .sk-node,.fig .sk-flow{transition:opacity .2s,fill-opacity .2s}
.fig .sk-flow{fill-opacity:.3}
.fig .tone-ink{fill:var(--fig-ink)}
.fig .tone-accent{fill:var(--fig-accent)}
.fig .tone-accent-mid{fill:var(--fig-accent-mid)}
.fig .tone-neutral{fill:var(--fig-neutral)}
.fig .tone-neutral-soft{fill:var(--fig-neutral-soft)}
.fig .sk-item{cursor:default;transition:opacity .2s}
.fig .has-focus .sk-flow.is-focus{fill-opacity:.5}
.fig .has-focus .sk-flow:not(.is-focus),.fig .has-focus .sk-item:not(.is-focus){opacity:.32}
.fig .sk-item:focus-visible .sk-node{outline:none;stroke:var(--origin-accent);stroke-width:2}

/* CRO latency and price */
[data-fig=cro] .fig-plot{min-height:540px}
.fig .lat-part+.lat-part{margin-top:26px;padding-top:22px;border-top:1px solid var(--fig-grid)}
.fig .lat-title{color:var(--origin-fg)}
.fig .lat-sub{margin-bottom:10px;font-size:13px;color:var(--origin-muted)}
.fig .lat-row{transition:opacity .2s}
.fig .has-focus .lat-row:not(.is-focus){opacity:.35}
.fig .lat-range{fill:var(--fig-accent-soft)}
.fig .lat-median{fill:var(--fig-accent);stroke:var(--origin-panel);stroke-width:2}
.fig .lat-mean{stroke:var(--fig-ink);stroke-width:2}


/* Photos, video loops and the before/after slider */
.fig.fig-photo{margin:56px 0}
.fig .fig-image{display:block;width:100%;height:auto;background:var(--origin-panel)}
.fig.fig-meme{max-width:500px}
.fig .fig-photo-foot{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px 24px;margin-top:14px}
.fig .fig-photo-foot .fig-caption,.fig.fig-photo>.fig-caption{flex:1 1 300px;margin:14px 0 0}
.fig .fig-photo-foot .fig-caption{margin:0}
.fig .compare{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--origin-panel);cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none;--pos:50%}
.fig .compare-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none;background:var(--origin-panel)}
.fig .compare-img.is-after{clip-path:inset(0 0 0 var(--pos))}
.fig .compare-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:var(--origin-bg);box-shadow:0 0 0 .5px rgb(0 0 0 / .18);pointer-events:none}
.fig .compare-grip{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:var(--origin-bg);color:var(--origin-fg);box-shadow:0 6px 20px rgb(0 0 0 / .2);transition:transform .2s var(--fig-ease)}
.fig .compare.is-dragging .compare-grip{transform:scale(.9)}
.fig .compare-grip svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fig .compare:has(.compare-range:focus-visible) .compare-grip{outline:2px solid var(--origin-accent);outline-offset:3px}
.fig .compare-tag{position:absolute;top:14px;padding:6px 10px;background:rgb(var(--origin-bg-rgb) / .9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:12px;line-height:1.2;color:var(--origin-fg);pointer-events:none;transition:opacity .2s}
.fig .compare-tag.is-before{left:14px}
.fig .compare-tag.is-after{right:14px}
.fig .compare-range{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;opacity:0}
.fig .clip-frame{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--origin-panel)}
.fig .clip-video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.fig .clip-toggle{position:absolute;right:14px;bottom:14px;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:rgb(var(--origin-bg-rgb) / .9);color:var(--origin-fg);cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.fig .clip-toggle svg{width:16px;height:16px;fill:currentColor}
.fig .clip-toggle:focus-visible{outline:2px solid var(--origin-accent);outline-offset:3px}
.fig .fig-zoom{appearance:none;display:block;width:100%;padding:0;border:0;border-radius:0;background:var(--origin-panel);cursor:zoom-in;overflow:hidden}
.fig .fig-zoom img{width:100%;height:auto;transition:transform .6s var(--fig-ease)}
.fig .fig-zoom:hover img{transform:scale(1.015)}
.fig .fig-zoom:focus-visible{outline:2px solid var(--origin-accent);outline-offset:4px}
.fig-lightbox{max-width:min(94vw,1200px);max-height:94svh;padding:0;border:0;background:transparent;overflow:visible}
.fig-lightbox::backdrop{background:rgb(var(--origin-bg-rgb) / .94);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.fig-lightbox img{display:block;max-width:min(94vw,1200px);max-height:94svh;width:auto;height:auto;margin:0;cursor:zoom-out}
.fig-lightbox button{position:fixed;top:16px;right:16px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--origin-border);border-radius:50%;background:var(--origin-bg);color:var(--origin-fg);font:400 22px/1 Arial,sans-serif;cursor:pointer}

/* Airflow and zoning model. Zone and room colors match COLORS in floorplan.js. */
.fig{--fp-pos:var(--origin-accent);--fp-neu:#8a93a8;--fp-neg:#d9452b}
.fig .fp-stage{position:relative;aspect-ratio:16/10;margin:0 -28px;overflow:hidden;background:radial-gradient(ellipse 70% 60% at 50% 46%,var(--origin-bg),var(--origin-panel));touch-action:pan-y;cursor:grab}
.fig .fp-stage:active{cursor:grabbing}
.fig .fp-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .7s}
.fig .fp-stage canvas{position:absolute;inset:0;display:block;opacity:0;transition:opacity .7s}
.fig .fp-stage.is-ready canvas{opacity:1}
.fig .fp-stage.is-ready .fp-poster{opacity:0}
.fig .fp-labels{position:absolute;inset:0;pointer-events:none;transition:opacity .7s}
.fig .fp-stage:not(.is-ready) .fp-labels{opacity:0}
.fig .fp-badge{padding:5px 9px;font:600 11px/1 var(--origin-font,Arial,sans-serif);letter-spacing:.08em;color:#fff;white-space:nowrap}
.fig .fp-tools{position:absolute;right:14px;bottom:14px;z-index:2;display:flex;gap:6px}
.fig .fp-fallback{position:absolute;left:16px;bottom:16px;margin:0;padding:8px 12px;background:var(--origin-bg);font-size:13px;color:var(--origin-text)}
.fig .fp-legend{gap:2px 22px;margin-top:16px}
.fig .fp-legend small{font-size:12px;color:var(--origin-muted);white-space:nowrap}
.fig .fp-legend small::before{content:"· "}
.fig .fp-key{width:14px;height:10px;flex:none}
.fig .fp-zone-pos{background:var(--fp-pos)}
.fig .fp-zone-neu{background:var(--fp-neu)}
.fig .fp-zone-neg{background:var(--fp-neg)}
.fig .fp-line-air,.fig .fp-line-exh{width:22px;height:0;border-top:3px dotted var(--origin-fg)}
.fig .fp-line-exh{border-top-color:var(--fp-neg)}
.fig .fp-reg-dose{background:color-mix(in srgb,var(--origin-accent) 62%,var(--origin-bg))}
.fig .fp-reg-syn{background:color-mix(in srgb,#eb6834 62%,var(--origin-bg))}
.fig .fp-reg-cult{background:color-mix(in srgb,#1baf7a 62%,var(--origin-bg))}
.fig .fp-reg-store{background:color-mix(in srgb,#eda100 62%,var(--origin-bg))}
.fig .fp-reg-util{background:color-mix(in srgb,#e87ba4 62%,var(--origin-bg))}
.fig .fp-wet,.fig .fp-wet-bench{background:var(--origin-accent)}
.fig .fp-wet-bench{height:4px}
[data-fig=floorplan] .fig-sub{min-height:4.5em}
.origin-prose .fig-steps{margin:0 0 1.6em;padding-left:20px;border-left:1px solid var(--origin-border)}
.origin-prose .fig-steps p{margin-bottom:.35em}
.fig .gal-track{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.fig .gal-track::-webkit-scrollbar{display:none}
/* One shared height; each photo keeps its own aspect ratio (from its width/height attributes), so nothing is cropped. */
.fig .gal-track img{flex:none;height:clamp(220px,46vw,300px);width:auto;max-width:88%;object-fit:contain;scroll-snap-align:start;background:var(--origin-panel)}
.fig .gal-nav{display:flex;gap:6px;margin-left:auto}
.fig .fig-button.is-icon svg{fill:none;stroke:currentColor;stroke-width:1.6}
.fig .fig-button:disabled{opacity:.35;cursor:default}
.fig .sc-identity{stroke:var(--fig-neutral);stroke-width:1.5}
.fig .sc-mark{fill:var(--fig-accent);fill-opacity:.85;stroke:var(--origin-panel);stroke-width:1.5}
.fig .sc-dot:hover .sc-mark{fill-opacity:1;r:6}
.fig svg .sc-r2{font-size:18px;font-weight:600}
.fig .fp-hint{margin-top:8px;font-size:12px;color:var(--origin-muted)}

@media(max-width:700px){
 .origin-prose figure.fig{margin:48px 0}
 .fig.fig-panel{padding:20px 16px 12px}
 .fig .fig-head{margin-bottom:18px}
 .fig .fig-title{font-size:19px}
 .fig .compare-tag{top:10px;padding:5px 8px}
 .fig .compare-tag.is-before{left:10px}.fig .compare-tag.is-after{right:10px}
 .fig .fp-stage{aspect-ratio:1/1;margin:0 -16px}
 [data-fig=floorplan] .fig-sub{min-height:6em}
 .fig .fp-tools{right:10px;bottom:10px}
 .fig .fig-seg button,.fig .fig-button{min-height:44px}
 .fig .fig-legend button{min-height:44px}
 .fig .fig-table th,.fig .fig-table td{padding-right:12px}.fig .fig-table .num{padding-left:12px}
}
@media(prefers-reduced-motion:reduce){.fig *{animation:none!important;transition:none!important}}

/* This post opens at body size, not with the larger lead paragraph. */
.origin-prose>p:first-of-type{font-size:inherit;line-height:1.8;letter-spacing:normal;margin-bottom:1.5em}
.origin-prose u{text-decoration-thickness:1px;text-underline-offset:4px}