.lab-section:where(.astro-7GJK6GST){--ink: var(--deep-ink);--ink-soft: var(--deep-soft);--stone: var(--deep-soft);--rule: var(--deep-rule);--rule-strong: color-mix(in srgb, var(--deep-ink) 30%, transparent);--paper-sunk: var(--deep-raised);--accent-ink: var(--accent);--focus: var(--accent);background:var(--deep);color:var(--ink);padding:var(--section-space) var(--gutter)}.lab-section--page:where(.astro-7GJK6GST){padding-top:clamp(3rem,2rem + 4vw,6rem)}.lab-section__inner:where(.astro-7GJK6GST){max-width:var(--page);margin-inline:auto}.lab-section__head:where(.astro-7GJK6GST){margin-bottom:clamp(3rem,2rem + 4vw,6rem)}.lab-section__experiment-head:where(.astro-7GJK6GST) :is(h2,h3):where(.astro-7GJK6GST){font-size:var(--step-3);font-stretch:84%;letter-spacing:-.02em;line-height:1.05}.lab-section__experiment-head:where(.astro-7GJK6GST) p:where(.astro-7GJK6GST){margin-top:.875rem;max-width:52ch;color:var(--ink-soft)}.lab-section__foot:where(.astro-7GJK6GST){display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:1rem 3rem;margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--rule);font-size:var(--step--1);color:var(--ink-soft)}.lab-section__foot:where(.astro-7GJK6GST) p:where(.astro-7GJK6GST){max-width:70ch}.lab-section:where(.astro-7GJK6GST) .lab{display:grid;gap:3rem;margin-top:2.5rem}@media (min-width: 1000px){.lab-section:where(.astro-7GJK6GST) .lab{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(3rem,6vw,6rem);align-items:start}.lab-section:where(.astro-7GJK6GST) .lab__intro{position:sticky;top:6rem}}.lab-section:where(.astro-7GJK6GST) .lab__intro,.lab-section:where(.astro-7GJK6GST) .lab__stage{display:grid;gap:2rem;min-width:0}.lab-section:where(.astro-7GJK6GST) .lab__explain-inner{display:grid;gap:.875rem}.lab-section:where(.astro-7GJK6GST) .lab__explain-title{font-weight:600;line-height:1.1;letter-spacing:-.015em;font-size:var(--step-2);font-stretch:88%}.lab-section:where(.astro-7GJK6GST) .lab__where{font-size:var(--step-1);line-height:1.45}.lab-section:where(.astro-7GJK6GST) .lab__note{color:var(--ink-soft)}.lab-section:where(.astro-7GJK6GST) .lab__result{font-size:var(--step--1);color:var(--ink-soft)}.lab-section:where(.astro-7GJK6GST) .lab__result strong,.lab-section:where(.astro-7GJK6GST) .lab__row-head strong{font-family:var(--font-mono);font-weight:500;color:var(--ink)}.lab-section:where(.astro-7GJK6GST) .lab__diagram{width:100%;max-width:40rem;height:auto;overflow:visible}.lab-section:where(.astro-7GJK6GST) .lab__node rect{fill:var(--deep-raised);stroke:var(--rule-strong);stroke-width:1;transition:fill var(--dur-base) ease,stroke var(--dur-base) ease}.lab-section:where(.astro-7GJK6GST) .lab__node text{fill:var(--ink);font-family:var(--font-sans);font-size:13px;font-weight:600;text-anchor:middle}.lab-section:where(.astro-7GJK6GST) .lab__node[data-renders] rect{fill:var(--accent);stroke:var(--accent)}.lab-section:where(.astro-7GJK6GST) .lab__node[data-renders] text{fill:var(--deep)}.lab-section:where(.astro-7GJK6GST) .lab__hop-line,.lab-section:where(.astro-7GJK6GST) .lab__hop-flow{fill:none;stroke-linecap:round}.lab-section:where(.astro-7GJK6GST) .lab__hop-line{stroke:var(--rule-strong);stroke-width:1.5}.lab-section:where(.astro-7GJK6GST) .lab__hop-flow{stroke:var(--accent);stroke-width:2;stroke-dasharray:.02 .03}.lab-section:where(.astro-7GJK6GST) .lab__hop[data-build] .lab__hop-line{stroke-dasharray:.01 .015}.lab-section:where(.astro-7GJK6GST) .lab__hop-label{fill:var(--ink-soft);font-family:var(--font-mono);font-size:11px;text-anchor:middle}.lab-section:where(.astro-7GJK6GST) .lab__controls{display:grid;gap:1.5rem}@media (min-width: 720px){.lab-section:where(.astro-7GJK6GST) .lab__controls{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.5rem;align-items:end}}.lab-section:where(.astro-7GJK6GST) .lab__field{border:0;margin:0;padding:0;min-width:0;display:grid;gap:.625rem}.lab-section:where(.astro-7GJK6GST) .lab__field legend,.lab-section:where(.astro-7GJK6GST) .lab__field>label{padding:0;margin-bottom:.625rem;font-size:var(--step--1);color:var(--ink-soft);display:flex;justify-content:space-between;gap:1rem}.lab-section:where(.astro-7GJK6GST) .lab__field output{font-family:var(--font-mono);color:var(--ink)}.lab-section:where(.astro-7GJK6GST) .lab__segmented{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--rule-strong);border-radius:var(--radius-s);overflow:hidden}.lab-section:where(.astro-7GJK6GST) .lab__segmented label{position:relative}.lab-section:where(.astro-7GJK6GST) .lab__segmented label+label{border-left:1px solid var(--rule-strong)}.lab-section:where(.astro-7GJK6GST) .lab__segmented input{position:absolute;inset:0;z-index:1;opacity:0;margin:0;cursor:pointer}.lab-section:where(.astro-7GJK6GST) .lab__segmented span{display:grid;place-items:center;min-height:2.75rem;font-size:.875rem;font-weight:500;color:var(--ink-soft);transition:background-color var(--dur-fast) ease,color var(--dur-fast) ease}.lab-section:where(.astro-7GJK6GST) .lab__segmented label:hover span{color:var(--ink);background:var(--deep-raised)}.lab-section:where(.astro-7GJK6GST) .lab__segmented input:checked+span{background:var(--ink);color:var(--deep)}.lab-section:where(.astro-7GJK6GST) .lab__segmented input:focus-visible+span{outline:2px solid var(--focus);outline-offset:-4px}.lab-section:where(.astro-7GJK6GST) input[type=range]{width:100%;accent-color:var(--accent);min-height:2rem}.lab-section:where(.astro-7GJK6GST) .lab__rows{display:grid;gap:1.5rem}.lab-section:where(.astro-7GJK6GST) .lab__track{opacity:.4;transition:opacity var(--dur-base) ease}.lab-section:where(.astro-7GJK6GST) .lab__row[data-active] .lab__track{opacity:1}.lab-section:where(.astro-7GJK6GST) .lab__row:not([data-active]) .lab__row-title{color:var(--ink-soft)}.lab-section:where(.astro-7GJK6GST) .lab__row-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.25rem 1.5rem;margin-bottom:.625rem}.lab-section:where(.astro-7GJK6GST) .lab__row-title{font-size:var(--step-0);font-weight:600;letter-spacing:0}.lab-section:where(.astro-7GJK6GST) .lab__row-head p{font-size:var(--step--1);color:var(--ink-soft)}.lab-section:where(.astro-7GJK6GST) .lab__track{position:relative;height:1.75rem;border-bottom:1px solid var(--rule)}.lab-section:where(.astro-7GJK6GST) .lab__bar{position:absolute;top:.375rem;height:1rem;border-radius:2px;transition:left .4s var(--ease-emph),width .4s var(--ease-emph)}.lab-section:where(.astro-7GJK6GST) .lab__bar--server{background:repeating-linear-gradient(135deg,var(--deep-soft) 0 2px,transparent 2px 6px);opacity:.6}.lab-section:where(.astro-7GJK6GST) .lab__bar--html{background:var(--deep-ink)}.lab-section:where(.astro-7GJK6GST) .lab__bar--js{background:#8da391}.lab-section:where(.astro-7GJK6GST) .lab__bar--execute{background:#5b7160}.lab-section:where(.astro-7GJK6GST) .lab__bar--data{background:#c9a27c}.lab-section:where(.astro-7GJK6GST) .lab__mark{position:absolute;top:-.125rem;bottom:-.375rem;width:2px;margin-left:-1px;transition:left .4s var(--ease-emph)}.lab-section:where(.astro-7GJK6GST) .lab__mark--content{background:var(--accent)}.lab-section:where(.astro-7GJK6GST) .lab__mark--interactive{background:var(--deep-ink)}.lab-section:where(.astro-7GJK6GST) .lab__legend{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;font-size:var(--step--1);color:var(--ink-soft)}.lab-section:where(.astro-7GJK6GST) .lab__legend li{display:inline-flex;align-items:center;gap:.5rem}.lab-section:where(.astro-7GJK6GST) .lab__swatch{position:static;display:inline-block;width:.875rem;height:.625rem;border-radius:2px}.lab-section:where(.astro-7GJK6GST) .lab__swatch--mark{width:2px;height:.875rem}@media (prefers-reduced-motion: no-preference){@keyframes lab-flow{to{stroke-dashoffset:-.05}}@keyframes lab-draw{0%{stroke-dashoffset:1}}.lab-section:where(.astro-7GJK6GST) .lab__hop-line{stroke-dasharray:1;animation:lab-draw .7s var(--ease-emph) both}.lab-section:where(.astro-7GJK6GST) .lab__hop[data-build] .lab__hop-line{stroke-dasharray:.01 .015;animation:none}.lab-section:where(.astro-7GJK6GST) .lab__hop-flow{animation:lab-flow 1.1s linear infinite}.lab-section:where(.astro-7GJK6GST) .lab__hop-label,.lab-section:where(.astro-7GJK6GST) .lab__explain-inner{animation:enter-rise .5s var(--ease-emph) both}}@media (prefers-reduced-motion: reduce){.lab-section:where(.astro-7GJK6GST) .lab__hop-flow{stroke-dasharray:none}.lab-section:where(.astro-7GJK6GST) .lab__bar,.lab-section:where(.astro-7GJK6GST) .lab__mark,.lab-section:where(.astro-7GJK6GST) .lab__track{transition:none}}