/* An illustrated experiment with physical columns for the results. */
.web-experiment-section{padding:20px 0 38px;border-bottom:1px solid var(--rule);margin-bottom:48px}
.web-experiment-intro{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:26px}
.web-experiment-intro h2{font-size:clamp(29px,3.5vw,42px);letter-spacing:-.025em;margin:12px 0}
.web-experiment-intro p:not(.eyebrow){max-width:57ch;font-size:14px}
.web-experiment-intro>a{flex:none;font-size:12px;margin-bottom:5px}
.ab-lab{--ab-a:#688568;--ab-visitor:#798577;--ab-highlight:#ffffff;--ab-order-a:#79a34e;--ab-order-b:#509ad0;min-width:0;color:var(--body)}
:root[data-theme=dark] .ab-lab{--ab-a:#a8bc9d;--ab-visitor:#c0ceb9;--ab-highlight:#fff;--ab-order-a:#d3ed9e;--ab-order-b:#b7e3ff}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .ab-lab{--ab-a:#a8bc9d;--ab-visitor:#c0ceb9;--ab-highlight:#fff;--ab-order-a:#d3ed9e;--ab-order-b:#b7e3ff}}
.ab-illustration{background:var(--paper-2);border-block:1px solid var(--rule)}
.ab-figure-heading{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:21px 27px 0;font:9px/1.5 var(--mono);color:var(--muted)}
.ab-figure-heading>p{letter-spacing:.06em}
.ab-key{display:flex;align-items:center;gap:20px}
.ab-key span{display:flex;align-items:center;gap:7px;white-space:nowrap}
.ab-key i{height:6px;width:6px;border-radius:50%;background:var(--ab-visitor)}
.ab-key span:last-child i{background:linear-gradient(90deg,var(--ab-a) 50%,var(--accent) 50%)}
.ab-stage{position:relative;max-width:1100px;margin:0 auto;height:540px;overflow:hidden;touch-action:pan-y;cursor:grab}
.ab-stage canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y}
.ab-stage.dragging{cursor:grabbing}
.ab-stage:focus-visible{outline-offset:-2px}
.ab-results{display:grid;grid-template-columns:1fr 1fr;max-width:790px;margin:-3px auto 26px;gap:46px;text-align:center}
.ab-results>div>p{font-size:12px;color:var(--body)}
.ab-version{display:inline-block;font:10px var(--mono);color:var(--ab-a);border:1px solid var(--ab-a);padding:3px 5px;margin-right:8px}
.ab-results>div:nth-child(2) .ab-version{color:var(--accent);border-color:var(--accent)}
.ab-results>div>div{display:flex;gap:10px;align-items:baseline;justify-content:center;margin-top:10px}
.ab-results strong{font:43px/1.1 var(--serif);letter-spacing:-.04em;font-variant-numeric:tabular-nums;min-width:2ch;text-align:right}
.ab-results>div>div>span{font-size:11px;color:var(--muted)}
.ab-results b{font:inherit;font-variant-numeric:tabular-nums}
.ab-caption{display:flex;align-items:center;justify-content:space-between;gap:25px;border-top:1px solid var(--rule);padding:19px 27px}
.ab-caption p{font:12px/1.7 var(--sans);color:var(--body)}
.ab-caption>div{display:flex;gap:22px;flex:none}
.ab-caption button{background:none;border:0;border-bottom:1px solid var(--rule-strong);padding:4px 0;color:var(--body);font:10px var(--mono)}
.ab-caption .ab-play{color:var(--accent);border-color:var(--accent);min-width:10ch;text-align:left}
.ab-note{font:10px/1.7 var(--sans);color:var(--muted);margin-top:14px}
.ab-method{margin-top:24px;font-size:12px;max-width:76ch}
.ab-method summary{cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.ab-method p{margin-top:14px}
:root .terminal-render .ab-lab{--ab-a:#92cba9;--ab-visitor:#9baaa1;--accent:#9ab9d0}
.terminal-render .ab-results strong{font:30px var(--mono)}
.terminal-render .ab-stage .ascii-screen{touch-action:pan-y}
@media(min-width:1350px){.web-experiment-section .ab-stage{height:580px}}
@media(max-width:850px){.ab-stage{height:450px}.ab-results{max-width:650px;gap:15px}.ab-caption{align-items:start}.ab-figure-heading{font-size:8px;padding-inline:18px}}
@media(max-width:600px){.ab-stage{height:470px}.ab-results{max-width:none;gap:12px;margin-bottom:23px}.ab-results>div>p{font-size:10px}.ab-results strong{font-size:36px}.ab-results>div>div>span{font-size:9px}.ab-caption{display:block;padding:17px 18px}.ab-caption>div{margin-top:13px}.ab-caption p{min-height:3.4em;font-size:11px}.ab-figure-heading{display:block}.ab-key{margin-top:10px}.ab-results>div>div{gap:6px}}
@media(max-width:480px){.web-experiment-intro{display:block}.web-experiment-intro>a{display:inline-block;margin-top:12px}.web-experiment-section{padding-bottom:28px;margin-bottom:30px}.ab-stage{height:350px}.ab-results>div>div{display:block}.ab-results strong{display:block;text-align:center;margin-bottom:3px}.ab-results>div>p{font-size:9px}.ab-version{margin-right:3px;font-size:9px;padding:2px 4px}.ab-note{font-size:9px}.terminal-render .ab-results strong{font-size:27px}}
@media print{.ab-caption button{display:none}}