/* CloudLabBox design system, v2 "Daylight" (research/v2/DESIGN-v2.md, 29 Oct 2026). Replaces v1 "Patch".
   Barry, 28 Oct 2026: too dark, too busy, not fancy enough; show the actual EVE-NG product, not drawings.
   So: light only (the site no longer follows a dark OS theme), one idea per section, the real product as the
   picture, IBM Plex Sans and Plex Mono (v3c, 29 Oct 2026: engineered, not startup-generic), and colour from real patch leads, used where it means something.
   Order: fonts, tokens, base, type, layout, components, states, responsive, preferences. Class names are v1's, so
   every page restyles from here; v1's dark band (.band--ink) is now a light tint. */

/* ---------- Fonts (SIL OFL 1.1; files and licences in /fonts) ---------- */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:100 700;font-stretch:85% 100%;font-display:swap;src:url('/assets/fonts/ibm-plex-sans-var-latin.1e87585660.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:italic;font-weight:100 700;font-stretch:85% 100%;font-display:swap;src:url('/assets/fonts/ibm-plex-sans-var-italic-latin.bb59ece46a.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-400-latin.08949f728d.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-500-latin.01d2854474.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-600-latin.0d1f0b8d07.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-400-italic-latin.0840095faa.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Local fonts sized to Plex (measured in Chrome against Arial and Consolas, 29 Oct 2026), so lines barely move on swap. */
@font-face{font-family:'IBM Plex Sans Fallback';src:local('Arial'),local('ArialMT'),local('Helvetica');font-weight:400;size-adjust:100.12%;ascent-override:102.88%;descent-override:27.97%;line-gap-override:0%}
@font-face{font-family:'IBM Plex Sans Fallback';src:local('Arial Bold'),local('Arial-BoldMT'),local('Helvetica Bold');font-weight:700;size-adjust:98.57%;ascent-override:104.5%;descent-override:28.41%;line-gap-override:0%}
@font-face{font-family:'IBM Plex Mono Fallback';src:local('Consolas');size-adjust:109.09%;ascent-override:93.96%;descent-override:25.21%;line-gap-override:0%}
@font-face{font-family:'IBM Plex Mono Fallback Menlo';src:local('Menlo Regular'),local('Menlo-Regular');size-adjust:99.67%;ascent-override:102.84%;descent-override:27.59%;line-gap-override:0%}

/* ---------- Tokens: light by default; dark follows the system until a visitor picks one with the header switch
   (html[data-theme], set before first paint from localStorage). ---------- */
:root{
 --f-sans:'IBM Plex Sans','IBM Plex Sans Fallback',system-ui,sans-serif;
 --f-display:var(--f-sans);
 --f-mono:'IBM Plex Mono','IBM Plex Mono Fallback','IBM Plex Mono Fallback Menlo',ui-monospace,SFMono-Regular,Menlo,monospace;
 /* Terminals are dark in both themes, as real terminals are. */
 --c-term-bg:#0b1018;--c-term-fg:#d6dee7;--c-term-dim:#8b97a6;--c-term-hi:#5b8cff;--c-term-line:rgba(214,222,231,.12);
 --r-fig:8px;--r-ctl:4px;--r-pop:8px;--r-win:10px;--r-card:10px;
 --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;--s-10:128px;--s-11:176px;
 --ease:cubic-bezier(.2,.7,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.65,0,.35,1);
 --wrap:1240px;--gutter:32px;--header-h:68px}
:root{
 color-scheme:light;
 /* Light (v3, 29 Oct 2026): a cool grey page with white surfaces and strong ink, so it reads crisp, not washed out. */
 --c-canvas:#f2f4f7;--c-canvas-2:#e9edf2;
 --c-surface:#fff;--c-surface-2:#f7f8fa;
 --c-bench:#fbfcfd;--c-sunken:#e4e8ee;
 --c-line:#dfe4eb;--c-line-2:#ccd3dd;--c-line-3:#b2bbc8;
 --c-field:#6b7689;
 --c-ink:#0a1020;--c-ink-2:#2f3a4b;--c-ink-3:#4a5568;
 --c-act:#1f4fe0;--c-act-ink:#fff;--c-act-hover:#1a44c8;--c-act-press:#163aab;
 --c-btn:#0a1020;--c-btn-ink:#fff;--c-btn-hover:#1e2a3f;--c-btn-press:#000;--c-btn-line:#9aa4b4;--c-btn-line-hover:#4a5568;
 --c-quiet:#fff;--c-quiet-hover:#f1f3f6;
 --c-hover:rgba(10,16,32,.05);--c-press:rgba(10,16,32,.09);
 --c-signal:#1f4fe0;--c-signal-stroke:#2f5ff5;--c-signal-wash:rgba(31,79,224,.09);
 --c-focus:#1f4fe0;
 --c-up:#067647;--c-warn:#b54708;--c-down:#d92d20;--c-led:#12b76a;--c-led-glow:rgba(18,183,106,.22);
 --c-cable:#98a2b3;
 --k-blue:#2457f5;--k-aqua:#0ba5a4;--k-violet:#7a5af8;--k-orange:#f26a1b;--k-yellow:#f5b400;--k-green:#12b76a;
 --k-blue-ink:#1f4fe0;--k-aqua-ink:#0e7c7b;--k-violet-ink:#6941c6;--k-orange-ink:#c4320a;--k-yellow-ink:#93590a;--k-green-ink:#067647;
 --k-glow:0;
 --i-plus-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='%230a1020' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
 --t-blue:#e9effd;--t-violet:#efebfe;--t-aqua:#e3f6f4;--t-orange:#fdeee4;
 --c-header:rgba(242,244,247,.94);
 --c-chrome-1:#fbfcfd;--c-chrome-2:#f3f5f8;--c-dot:#d9dee6;--c-addr:#fff;
 --c-socket:#e3e7ed;--c-socket-2:#d5dbe3;
 --c-note-warn:#fff7e6;--c-note-warn-ink:#5d3a07;--c-note-err:#fff1f0;--c-note-err-ink:#7a1a12;
 --c-overlay:rgba(255,255,255,.95);
 --shadow-pop:0 24px 56px -20px rgba(16,24,40,.3),0 2px 6px rgba(16,24,40,.07);
 --shadow-win:0 1px 2px rgba(16,24,40,.06),0 14px 32px -12px rgba(16,24,40,.2),0 48px 96px -40px rgba(16,24,40,.3);
 --shadow-card:0 1px 2px rgba(16,24,40,.05),0 1px 0 rgba(16,24,40,.02);}
:root[data-theme=dark]{
 color-scheme:dark;
 /* Dark (v3): deep navy ink rather than black, the server room with the lights low: LEDs and cables glow. */
 --c-canvas:#0b1220;--c-canvas-2:#0e1626;
 --c-surface:#121b2d;--c-surface-2:#172238;
 --c-bench:#0f1829;--c-sunken:#0a101c;
 --c-line:rgba(148,163,184,.14);--c-line-2:rgba(148,163,184,.22);--c-line-3:rgba(148,163,184,.36);
 --c-field:#66748c;
 --c-ink:#e7edf5;--c-ink-2:#b6c2d2;--c-ink-3:#94a3b8;
 --c-act:#3366ff;--c-act-ink:#fff;--c-act-hover:#2f5bff;--c-act-press:#2a57e0;
 --c-btn:#e7edf5;--c-btn-ink:#0a1020;--c-btn-hover:#ffffff;--c-btn-press:#cfd8e3;--c-btn-line:#4b5a72;--c-btn-line-hover:#94a3b8;
 --c-quiet:#162036;--c-quiet-hover:#1c2842;
 --c-hover:rgba(226,232,240,.06);--c-press:rgba(226,232,240,.1);
 --c-signal:#7aa2ff;--c-signal-stroke:#5b8cff;--c-signal-wash:rgba(91,140,255,.14);
 --c-focus:#7aa2ff;
 --c-up:#34d399;--c-warn:#fbbf24;--c-down:#f87171;--c-led:#34d399;--c-led-glow:rgba(52,211,153,.45);
 --c-cable:#55637a;
 --k-blue:#5b8cff;--k-aqua:#2dd4bf;--k-violet:#a78bfa;--k-orange:#fb923c;--k-yellow:#facc15;--k-green:#34d399;
 --k-blue-ink:#7aa2ff;--k-aqua-ink:#5eead4;--k-violet-ink:#c4b5fd;--k-orange-ink:#fdba74;--k-yellow-ink:#fde047;--k-green-ink:#6ee7b7;
 --k-glow:1;
 --i-plus-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='%23e7edf5' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
 --t-blue:rgba(91,140,255,.1);--t-violet:rgba(167,139,250,.1);--t-aqua:rgba(45,212,191,.09);--t-orange:rgba(251,146,60,.1);
 --c-header:rgba(11,18,32,.9);
 --c-chrome-1:#1b2436;--c-chrome-2:#161f30;--c-dot:#2e3a50;--c-addr:#0e1626;
 --c-socket:#1b2537;--c-socket-2:#0d1422;
 --c-note-warn:rgba(251,191,36,.1);--c-note-warn-ink:#fde68a;--c-note-err:rgba(248,113,113,.1);--c-note-err-ink:#fecaca;
 --c-overlay:rgba(18,27,45,.92);
 --shadow-pop:0 24px 56px -16px rgba(0,0,0,.6),0 0 0 1px rgba(148,163,184,.12);
 --shadow-win:0 1px 0 rgba(255,255,255,.04) inset,0 18px 40px -14px rgba(0,0,0,.6),0 50px 100px -40px rgba(0,0,0,.7);
 --shadow-card:0 1px 0 rgba(255,255,255,.03) inset,0 1px 2px rgba(0,0,0,.3);}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
 color-scheme:dark;
 /* Dark (v3): deep navy ink rather than black, the server room with the lights low: LEDs and cables glow. */
 --c-canvas:#0b1220;--c-canvas-2:#0e1626;
 --c-surface:#121b2d;--c-surface-2:#172238;
 --c-bench:#0f1829;--c-sunken:#0a101c;
 --c-line:rgba(148,163,184,.14);--c-line-2:rgba(148,163,184,.22);--c-line-3:rgba(148,163,184,.36);
 --c-field:#66748c;
 --c-ink:#e7edf5;--c-ink-2:#b6c2d2;--c-ink-3:#94a3b8;
 --c-act:#3366ff;--c-act-ink:#fff;--c-act-hover:#2f5bff;--c-act-press:#2a57e0;
 --c-btn:#e7edf5;--c-btn-ink:#0a1020;--c-btn-hover:#ffffff;--c-btn-press:#cfd8e3;--c-btn-line:#4b5a72;--c-btn-line-hover:#94a3b8;
 --c-quiet:#162036;--c-quiet-hover:#1c2842;
 --c-hover:rgba(226,232,240,.06);--c-press:rgba(226,232,240,.1);
 --c-signal:#7aa2ff;--c-signal-stroke:#5b8cff;--c-signal-wash:rgba(91,140,255,.14);
 --c-focus:#7aa2ff;
 --c-up:#34d399;--c-warn:#fbbf24;--c-down:#f87171;--c-led:#34d399;--c-led-glow:rgba(52,211,153,.45);
 --c-cable:#55637a;
 --k-blue:#5b8cff;--k-aqua:#2dd4bf;--k-violet:#a78bfa;--k-orange:#fb923c;--k-yellow:#facc15;--k-green:#34d399;
 --k-blue-ink:#7aa2ff;--k-aqua-ink:#5eead4;--k-violet-ink:#c4b5fd;--k-orange-ink:#fdba74;--k-yellow-ink:#fde047;--k-green-ink:#6ee7b7;
 --k-glow:1;
 --i-plus-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='%23e7edf5' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
 --t-blue:rgba(91,140,255,.1);--t-violet:rgba(167,139,250,.1);--t-aqua:rgba(45,212,191,.09);--t-orange:rgba(251,146,60,.1);
 --c-header:rgba(11,18,32,.9);
 --c-chrome-1:#1b2436;--c-chrome-2:#161f30;--c-dot:#2e3a50;--c-addr:#0e1626;
 --c-socket:#1b2537;--c-socket-2:#0d1422;
 --c-note-warn:rgba(251,191,36,.1);--c-note-warn-ink:#fde68a;--c-note-err:rgba(248,113,113,.1);--c-note-err-ink:#fecaca;
 --c-overlay:rgba(18,27,45,.92);
 --shadow-pop:0 24px 56px -16px rgba(0,0,0,.6),0 0 0 1px rgba(148,163,184,.12);
 --shadow-win:0 1px 0 rgba(255,255,255,.04) inset,0 18px 40px -14px rgba(0,0,0,.6),0 50px 100px -40px rgba(0,0,0,.7);
 --shadow-card:0 1px 0 rgba(255,255,255,.03) inset,0 1px 2px rgba(0,0,0,.3);}}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px);background:var(--c-canvas)}
body{margin:0;background:var(--c-canvas);color:var(--c-ink);font:400 16.5px/1.62 var(--f-sans);font-stretch:100%;font-synthesis:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,svg,video{display:block;max-width:100%}
img,video{height:auto}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:600;text-wrap:balance}
p,li,dd,figcaption{text-wrap:pretty}
ul,ol{margin:0;padding:0}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
code,kbd,samp,pre{font-family:var(--f-mono);font-variant-ligatures:none;font-size:.9em}
::selection{background:var(--c-signal-wash)}
:focus-visible{outline:2px solid var(--c-focus);outline-offset:2px}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:200;padding:10px 14px;border-radius:var(--r-ctl);background:var(--c-btn);color:var(--c-btn-ink);font-weight:600;text-decoration:none}
.skip:focus{top:12px}
html.is-locked{overflow:hidden}

/* ---------- Type: IBM Plex Sans at semibold for headings with near-normal tracking, regular for reading. Measures are in em, not ch: ch follows
   whichever font is rendering, so ch boxes change width when the web font arrives (layout shift). ---------- */
.t-display{font-family:var(--f-display);font-size:clamp(40px,4.5vw,62px);line-height:1.06;font-weight:600;font-stretch:100%;letter-spacing:-.012em}
.t-title{font-family:var(--f-display);font-size:clamp(34px,3.9vw,52px);line-height:1.08;font-weight:600;font-stretch:100%;letter-spacing:-.014em}
.t-h2{font-family:var(--f-display);font-size:clamp(27px,2.7vw,38px);line-height:1.15;font-weight:600;font-stretch:100%;letter-spacing:-.01em}
.t-h3{font-size:20px;line-height:1.3;font-weight:600;font-stretch:100%;letter-spacing:-.004em}
.t-h4{font-size:15px;line-height:1.35;font-weight:600}
.t-lede{font-size:clamp(17.5px,1.35vw,20px);line-height:1.55;color:var(--c-ink-2);max-width:31em;font-weight:400}
.t-meta{font-size:14px;line-height:1.5;font-weight:400;color:var(--c-ink-3)}
.t-num{font-variant-numeric:tabular-nums}
.t-mono{font-family:var(--f-mono);font-variant-ligatures:none}
.prose{max-width:39em}
.prose p+p{margin-top:var(--s-4)}
code{padding:.1em .38em;border-radius:6px;background:var(--c-sunken);font-size:.84em;white-space:nowrap;color:var(--c-ink)}
.fig-cap code{white-space:normal;overflow-wrap:anywhere}
kbd{display:inline-block;min-width:1.7em;padding:.05em .45em;border:1px solid var(--c-line-3);border-bottom-width:2px;border-radius:6px;background:var(--c-surface);font-size:.82em;line-height:1.5;text-align:center;white-space:nowrap}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:calc(var(--wrap) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.band{padding:var(--s-9) 0}
.band--tight{padding:var(--s-8) 0}
.band--alt{background:var(--c-canvas-2)}
/* v1's dark chapters are light product tints now. */
.band--ink{background:var(--t-aqua)}
.band--blue{background:var(--t-blue)}
.band__head{display:grid;gap:var(--s-4);max-width:36.6em;margin-bottom:var(--s-8)}
.band__head--center{justify-items:center;text-align:center;margin-inline:auto}
.split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s-6);row-gap:var(--s-7);align-items:start}
.span-5{grid-column:span 5}.span-6{grid-column:span 6}.span-7{grid-column:span 7}.span-4{grid-column:span 4}.span-8{grid-column:span 8}.span-12{grid-column:1/-1}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 18px;border:1px solid transparent;border-radius:var(--r-ctl);font:600 15px/1 var(--f-sans);letter-spacing:0;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .14s,border-color .14s,color .14s;-webkit-tap-highlight-color:transparent}
.btn--sm{height:36px;padding:0 14px;font-size:14px}
.btn--lg{height:52px;padding:0 24px;font-size:16px}
.btn--block{display:flex;width:100%}
.btn--primary{background:var(--c-btn);color:var(--c-btn-ink);border-color:var(--c-btn)}
.btn--primary:hover{background:var(--c-btn-hover);border-color:var(--c-btn-hover)}
.btn--primary:active{background:var(--c-btn-press);border-color:var(--c-btn-press)}
.btn--quiet{background:transparent;color:var(--c-ink);border-color:var(--c-btn-line)}
.btn--quiet:hover{background:var(--c-hover);border-color:var(--c-btn-line-hover)}
.btn--quiet:active{background:var(--c-press)}
.btn--ghost{background:transparent;color:var(--c-ink-2)}
.btn--ghost:hover{background:var(--c-hover);color:var(--c-ink)}
.btn--ghost:active{background:var(--c-press)}
.btn:disabled,.btn[aria-disabled=true]{background:var(--c-sunken);border-color:transparent;color:var(--c-ink-3);box-shadow:none;cursor:not-allowed}
.btn[aria-busy=true]{cursor:progress}
.btn[aria-busy=true]::before{content:'';width:14px;height:14px;flex:none;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn svg{flex:none}
/* A port LED on a button: lit when the thing it opens is available now (the demo seat count). */
.port-led{flex:none;width:8px;height:8px;border-radius:50%;background:var(--c-line-3);box-shadow:inset 0 -1px 1px rgba(0,0,0,.18)}
.port-led[data-on]{background:var(--c-led);box-shadow:0 0 0 3px var(--c-led-glow),0 0 calc(var(--k-glow) * 10px) var(--c-led-glow)}
.btn .port-led{display:none}

/* ---------- Links ---------- */
.link{color:var(--c-ink);font-weight:560;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--c-line-3);text-underline-offset:.24em;transition:text-decoration-color .14s}
.link:hover{text-decoration-color:currentColor}
.link--more{display:inline-flex;align-items:center;gap:6px;color:var(--c-signal);font-weight:600;text-decoration:none}
.link--more:hover{text-decoration:underline;text-underline-offset:.24em}
.link--more svg{transition:transform .16s var(--ease)}
.link--more:hover svg{transform:translateX(3px)}

/* ---------- Header ---------- */
/* No backdrop-filter or transform here: either would make the header the containing block of the fixed phone drawer. */
.site-header{position:sticky;top:0;z-index:50;height:var(--header-h);background:var(--c-header);border-bottom:1px solid transparent;view-transition-name:site-header}
.site-header.is-stuck{border-bottom-color:var(--c-line)}
@supports (animation-timeline:scroll()){
 .site-header{animation:header-line linear both;animation-timeline:scroll(root);animation-range:0 48px}
 @keyframes header-line{from{border-bottom-color:transparent}to{border-bottom-color:var(--c-line)}}
}
.site-header__in{display:flex;align-items:center;gap:var(--s-5);height:100%}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--c-ink);text-decoration:none;font-weight:600;font-size:18px;font-stretch:100%;letter-spacing:-.012em;border-radius:var(--r-ctl)}
.brand svg{width:27px;height:27px}
.nav{display:flex;align-items:center;gap:2px;margin-left:var(--s-4)}
.nav__link,.nav summary{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 13px;border-radius:var(--r-ctl);color:var(--c-ink-2);font-weight:500;font-size:15px;text-decoration:none;cursor:pointer;list-style:none;white-space:nowrap;transition:color .14s,background-color .14s}
.nav summary::-webkit-details-marker{display:none}
.nav__link:hover,.nav summary:hover,.nav details[open]>summary{color:var(--c-ink);background:var(--c-hover)}
.nav__link[aria-current=page]{color:var(--c-ink);background:var(--c-hover)}
.nav summary svg{transition:transform .16s var(--ease)}
.nav details[open]>summary svg{transform:rotate(180deg)}
.nav details{position:relative}
.menu{position:absolute;top:calc(100% + 10px);left:-8px;min-width:340px;padding:var(--s-3);border:1px solid var(--c-line);border-radius:var(--r-pop);background:var(--c-surface);box-shadow:var(--shadow-pop);animation:menu-in .16s var(--ease-out)}
.menu--wide{display:grid;grid-template-columns:repeat(2,minmax(250px,1fr));gap:var(--s-3);min-width:620px}
.menu--right{left:auto;right:-8px}
@keyframes menu-in{from{opacity:0;transform:translateY(-6px)}}
.menu__group{display:grid;align-content:start;gap:2px}
.menu__head{margin:0;padding:6px 12px 4px;font-size:13px;font-weight:600;color:var(--c-ink-3)}
.menu__item{display:grid;gap:2px;padding:10px 12px;border-radius:var(--r-ctl);text-decoration:none;color:var(--c-ink)}
.menu__item:hover{background:var(--c-canvas-2)}
.menu__item strong{font-weight:600;font-size:15px}
.menu__item span{font-size:13.5px;line-height:1.4;color:var(--c-ink-3)}
.menu__item span code{font-size:12px}
/* The Sign in menu ends with the way to an account for someone who has none (9 Nov 2026), under a hairline. */
.signin .menu__item[href="/pricing.html"]{position:relative;margin-top:13px}
.signin .menu__item[href="/pricing.html"]::before{content:'';position:absolute;left:12px;right:12px;top:-7px;height:1px;background:var(--c-line)}
.site-header__end{display:flex;align-items:center;gap:var(--s-2);margin-left:auto}
.drawer-toggle{display:none}

/* Theme switch: a small rocker with a knob that carries the sun or the moon, and a link LED that lights in the dark. */
.theme-switch{position:relative;flex:none;width:54px;height:30px;padding:0;border:1px solid var(--c-line-2);border-radius:999px;background:var(--c-sunken);box-shadow:inset 0 1px 2px rgba(0,0,0,.12);cursor:pointer;transition:background-color .2s,border-color .2s}
.theme-switch:hover{border-color:var(--c-line-3)}
.theme-switch__knob{position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:var(--c-surface);box-shadow:0 1px 3px rgba(0,0,0,.25),0 0 0 1px var(--c-line);transition:transform .32s var(--ease-out),background-color .2s}
.theme-switch__knob::before{content:'';position:absolute;inset:5px;background:var(--c-ink-2);-webkit-mask:var(--i-sun) center/contain no-repeat;mask:var(--i-sun) center/contain no-repeat}
.theme-switch[aria-pressed=true] .theme-switch__knob{transform:translateX(24px)}
.theme-switch[aria-pressed=true] .theme-switch__knob::before{-webkit-mask-image:var(--i-moon);mask-image:var(--i-moon);background:var(--c-signal)}
.theme-switch__led{position:absolute;right:9px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--c-line-3);transition:opacity .2s}
.theme-switch[aria-pressed=true] .theme-switch__led{left:10px;right:auto;background:var(--c-led);box-shadow:0 0 8px var(--c-led-glow)}
:root{--i-sun:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3.2' fill='black'/%3E%3Cpath d='M8 1v1.8M8 13.2V15M1 8h1.8M13.2 8H15M3 3l1.3 1.3M11.7 11.7 13 13M3 13l1.3-1.3M11.7 4.3 13 3' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");--i-moon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.6 10.2A6 6 0 0 1 5.8 2.4a6 6 0 1 0 7.8 7.8z' fill='black'/%3E%3C/svg%3E")}
/* The switch's reveal: the new theme grows as a circle from the switch (view transitions, motion allowed). */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.theme-flip::view-transition-new(root){animation:theme-reveal .55s var(--ease-io) both}
@keyframes theme-reveal{from{clip-path:circle(0 at var(--tx,100%) var(--ty,0))}to{clip-path:circle(150vmax at var(--tx,100%) var(--ty,0))}}

/* ---------- Phone drawer ---------- */
.drawer>summary{list-style:none}
.drawer>summary::-webkit-details-marker{display:none}
.drawer__panel{display:none}

/* ---------- Footer ---------- */
.site-footer{padding:var(--s-9) 0 var(--s-6);border-top:1px solid var(--c-line);background:var(--c-canvas-2)}
.site-footer__grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,5fr);gap:var(--s-6) var(--s-5)}
.site-footer__nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-6) var(--s-5)}
.site-footer__brand p{margin-top:var(--s-3);max-width:17.1em;font-size:14px;color:var(--c-ink-3)}
.site-footer h2{margin-bottom:var(--s-3);font-size:14px;font-weight:600;color:var(--c-ink)}
.site-footer ul{list-style:none;display:grid;gap:9px}
.site-footer a{color:var(--c-ink-2);font-size:14.5px;text-decoration:none}
.site-footer a:hover{color:var(--c-ink);text-decoration:underline;text-underline-offset:.22em}
.site-footer__base{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-4);margin-top:var(--s-8);padding-top:var(--s-5);border-top:1px solid var(--c-line-2);font-size:13.5px;color:var(--c-ink-3)}
.cookie-slot .clb-cookie-settings{height:32px;padding:0 12px;border:1px solid var(--c-line-2);border-radius:var(--r-ctl);background:var(--c-surface);color:var(--c-ink-2);font:500 13.5px/1 var(--f-sans);cursor:pointer}
.cookie-slot .clb-cookie-settings:hover{color:var(--c-ink);border-color:var(--c-line-3)}

/* consent.js keeps its markup and wording; these rules only give its panel the system's surfaces. */
#clb-cookies{--ink:var(--c-ink);--surface:var(--c-surface);--surface-strong:var(--c-surface-2);--line:var(--c-line-2);--line-strong:var(--c-line-3);--muted:var(--c-ink-2);--focus:var(--c-focus);--green:var(--c-act);font-family:var(--f-sans)!important}
#clb-cookies .clb-cookie-panel{border-radius:var(--r-pop);box-shadow:var(--shadow-pop)}
#clb-cookies button{border-radius:var(--r-ctl)}
#clb-cookies h2{font-family:var(--f-display);font-stretch:106%;letter-spacing:-.012em}

/* ---------- Forms ---------- */
.field{display:grid;gap:7px}
.field>label{font-weight:600;font-size:15px}
.field__help{font-size:13.5px;color:var(--c-ink-3)}
.input,.select{height:48px;width:100%;padding:0 14px;border:1px solid var(--c-field);border-radius:var(--r-ctl);background:var(--c-surface);color:var(--c-ink);font-size:16px;transition:border-color .14s,box-shadow .14s}
.input:hover,.select:hover{border-color:var(--c-ink-3)}
.input:focus-visible,.select:focus-visible{outline:2px solid var(--c-focus);outline-offset:1px;border-color:var(--c-ink-2)}
.input[aria-invalid=true]{border-color:var(--c-down);box-shadow:inset 0 0 0 1px var(--c-down)}
.input:disabled{background:var(--c-sunken);color:var(--c-ink-3);cursor:not-allowed}
.input::placeholder{color:var(--c-ink-3);opacity:1}
.field__error{display:flex;gap:6px;align-items:flex-start;font-size:14px;color:var(--c-down);font-weight:540}
.field__error::before{content:'';flex:none;width:14px;height:14px;margin-top:3px;background:currentColor;-webkit-mask:var(--i-alert) center/contain no-repeat;mask:var(--i-alert) center/contain no-repeat}
.error-summary{padding:var(--s-4) var(--s-5);border:1px solid var(--c-down);border-radius:var(--r-ctl);background:var(--c-note-err)}
:root{--i-alert:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5 15 14H1z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M8 6v4M8 11.6v.4' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")}

/* ---------- Segmented control (radio group drawn as one well) ---------- */
.seg{display:inline-flex;flex-wrap:wrap;gap:2px;margin:0;padding:4px;border:0;border-radius:6px;background:var(--c-sunken);min-width:0}
.seg legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.seg label{position:relative;display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:var(--r-ctl);color:var(--c-ink-2);font-weight:500;font-size:14.5px;cursor:pointer;white-space:nowrap;transition:color .14s,background-color .14s,box-shadow .14s}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label:hover{color:var(--c-ink)}
.seg label:has(input:checked){background:var(--c-surface);color:var(--c-ink);box-shadow:var(--shadow-card),0 0 0 1px var(--c-line)}
.seg label:has(input:focus-visible){outline:2px solid var(--c-focus);outline-offset:1px}

/* ---------- Figures ---------- */
.fig{margin:0}
.fig__frame{position:relative;overflow:hidden;border:1px solid var(--c-line-2);border-radius:var(--r-fig);background:var(--c-surface)}
/* Captions are one plain sentence; v1's "Fig. n" labels stay in the markup for now but aren't shown. */
.fig-cap{display:block;margin-top:var(--s-3);font-size:14px;line-height:1.5;color:var(--c-ink-3)}
.fig-cap b{display:none}
.media{position:relative;display:block;width:100%;aspect-ratio:16/9;background:var(--c-sunken)}
.media>img,.media>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media__play{position:absolute;right:16px;bottom:16px;z-index:2}
.media__play .btn{background:var(--c-overlay);color:var(--c-ink);border-color:var(--c-line-2);box-shadow:var(--shadow-pop)}
.media__play .btn:hover{background:var(--c-surface)}

/* ---------- Product window: a real screen in a light browser frame (the page draws the chrome, the pixels are real) ---------- */
.window{position:relative;margin:0;border-radius:var(--r-win);background:var(--c-surface);box-shadow:var(--shadow-win),0 0 0 1px var(--c-line);overflow:hidden;isolation:isolate}
.window__bar{display:flex;align-items:center;gap:14px;height:42px;padding:0 16px;background:linear-gradient(var(--c-chrome-1),var(--c-chrome-2));border-bottom:1px solid var(--c-line)}
.window__dots{display:flex;gap:7px}
.window__dots i{width:11px;height:11px;border-radius:50%;background:var(--c-dot)}
.window__addr{display:flex;align-items:center;gap:7px;min-width:0;max-width:440px;flex:1;height:28px;margin:0 auto;padding:0 12px;border-radius:8px;background:var(--c-addr);box-shadow:inset 0 0 0 1px var(--c-line-2);font:500 13px/1 var(--f-sans);color:var(--c-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.window__addr svg{width:12px;height:12px;flex:none;color:var(--c-ink-3)}
.window__title{font:600 13.5px/1 var(--f-sans);color:var(--c-ink-2);margin:0 auto}
.window__end{width:47px}
.window__body{position:relative;aspect-ratio:var(--ar,16/10);background:var(--c-sunken)}
.window__body>img,.window__body>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left}

/* ---------- Command line with copy ---------- */
.cmd{display:flex;align-items:center;gap:var(--s-2);min-width:0;padding:7px 7px 7px 14px;border:1px solid var(--c-line-2);border-radius:var(--r-ctl);background:var(--c-surface)}
.cmd code{flex:1;min-width:0;padding:4px 0;background:none;font-size:13.5px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.copy{flex:none;height:32px;padding:0 12px;border:1px solid var(--c-line-2);border-radius:8px;background:var(--c-surface);color:var(--c-ink-2);font:560 13px/1 var(--f-sans);cursor:pointer}
.copy:hover{color:var(--c-ink);border-color:var(--c-line-3)}
.copy[data-state=done]{color:var(--c-up);border-color:currentColor}

/* ---------- Terminal player (real asciicast recordings; light, like the new footage) ---------- */
.term{container-type:inline-size;border-radius:var(--r-fig);background:var(--c-term-bg);color:var(--c-term-fg);border:1px solid var(--c-line-2);box-shadow:var(--shadow-card)}
.term__bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);padding:9px 12px;border-bottom:1px solid var(--c-term-line);background:#111826;border-radius:var(--r-fig) var(--r-fig) 0 0}
.term__title{margin-right:auto;font:500 12.5px/1.2 var(--f-mono);color:var(--c-term-dim)}
.term__btn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:1px solid var(--c-term-line);border-radius:8px;background:transparent;color:var(--c-term-fg);font:560 13px/1 var(--f-sans);cursor:pointer}
.term__btn:hover{border-color:rgba(214,222,231,.35)}
.term__btn:focus-visible{outline:2px solid var(--c-term-hi);outline-offset:1px}
.term__btn[aria-pressed=true]{background:rgba(91,140,255,.16);border-color:rgba(91,140,255,.5)}
.term__screen{margin:0;padding:16px 18px 20px;overflow-x:auto;font:400 calc(min(14px,max(8.5px,100cqi / var(--cols,96) * 1.62)))/1.45 var(--f-mono);font-variant-ligatures:none;white-space:pre;color:var(--c-term-fg);min-height:calc(var(--rows,24) * 1.45em + 36px);tab-size:8;scrollbar-width:thin;scrollbar-color:rgba(214,222,231,.3) transparent}
.term__screen .cur{display:inline-block;width:.6em;height:1.15em;margin-bottom:-.18em;background:var(--c-term-hi);animation:blink 1.1s steps(1) 3}
@keyframes blink{50%{opacity:0}}
.term__chapters{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px;border-top:1px solid var(--c-term-line)}
.term__chapters button{height:28px;padding:0 10px;border:1px solid var(--c-term-line);border-radius:7px;background:transparent;color:var(--c-term-dim);font:520 12.5px/1 var(--f-sans);cursor:pointer}
.term__chapters button:hover{color:var(--c-term-fg)}
.term__chapters button[aria-current=step]{color:var(--c-term-fg);border-color:rgba(91,140,255,.55);background:rgba(91,140,255,.14)}
.term__chapters button:focus-visible{outline:2px solid var(--c-term-hi);outline-offset:1px}
.term__progress{height:2px;background:var(--c-term-line)}
.term__progress i{display:block;height:100%;width:var(--p,0%);background:var(--c-term-hi)}
.transcript{margin-top:var(--s-3)}
.transcript summary{cursor:pointer;font-size:14px;font-weight:560;color:var(--c-ink-2)}
.transcript pre{max-height:360px;overflow:auto;margin:var(--s-3) 0 0;padding:var(--s-4);border:1px solid var(--c-line);border-radius:var(--r-ctl);background:var(--c-surface-2);font-size:12.5px;line-height:1.5}

/* ---------- Notes, live values, tables ---------- */
.note{display:grid;gap:4px;padding:14px 18px;border-radius:var(--r-fig);background:var(--c-canvas-2);font-size:15px;line-height:1.55;color:var(--c-ink-2)}
.band--alt .note{background:var(--c-surface)}
.note strong{color:var(--c-ink);font-weight:600}
.note--warn{background:var(--c-note-warn);color:var(--c-note-warn-ink)}
.note--error{background:var(--c-note-err);color:var(--c-note-err-ink)}
/* Free demo line (site.js, 30 Oct 2026): one line at the top of the page while this browser's demo runs. */
.demobar{border-bottom:1px solid var(--c-line);background:var(--t-blue)}
.demobar__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-2) var(--s-4);padding-top:10px;padding-bottom:10px}
.demobar p{margin:0;font-size:15px;line-height:1.5;color:var(--c-ink)}
.demobar strong{font-weight:600}
.live{display:inline-flex;align-items:center;gap:9px;min-height:24px;font-size:14.5px;color:var(--c-ink-2)}
.live::before{content:'';flex:none;width:8px;height:8px;border-radius:50%;background:var(--c-line-3)}
.live[data-state=open]::before{background:var(--c-led);box-shadow:0 0 0 3px var(--c-led-glow),0 0 calc(var(--k-glow) * 10px) var(--c-led-glow)}
.live[data-state=open] strong{color:var(--c-ink)}
.live strong{font-weight:600;font-variant-numeric:tabular-nums;color:var(--c-ink)}
.table-wrap{overflow-x:auto;border:1px solid var(--c-line-2);border-radius:var(--r-fig);background:var(--c-surface)}
.table{width:100%;border-collapse:collapse;font-size:15px}
.table th,.table td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--c-line);vertical-align:top}
.table thead th{font-size:13.5px;font-weight:600;color:var(--c-ink-3);background:var(--c-surface-2);white-space:nowrap}
.table tr:last-child td,.table tr:last-child th{border-bottom:0}
.table .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- Inner-page parts: page head, breadcrumbs, disclosures, code, real sequences, video facades ---------- */
.page-head{display:grid;gap:var(--s-5);padding:clamp(48px,7vw,104px) 0 var(--s-8);max-width:39em}
.page-head .t-lede{max-width:31.7em}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 var(--s-2);padding:0;list-style:none;font-size:14px;color:var(--c-ink-3)}
.crumbs li+li::before{content:'/';margin-right:6px;color:var(--c-line-3)}
.crumbs a{color:var(--c-ink-3);text-decoration:none}
.crumbs a:hover{color:var(--c-ink);text-decoration:underline;text-underline-offset:.22em}
.disclosure{border-top:1px solid var(--c-line-2)}
.disclosure:last-child{border-bottom:1px solid var(--c-line-2)}
.disclosure>summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);padding:20px 0;cursor:pointer;list-style:none;font-weight:600;font-size:17.5px;letter-spacing:-.01em}
.disclosure>summary::-webkit-details-marker{display:none}
.disclosure>summary::after{content:'';flex:none;width:28px;height:28px;border-radius:50%;background:var(--c-sunken) var(--i-plus-ink) center/11px no-repeat;box-shadow:inset 0 0 0 1px var(--c-line);transition:transform .2s var(--ease),background-color .14s}
.disclosure[open]>summary::after{transform:rotate(45deg)}
.disclosure>summary:hover::after{background-color:var(--c-line)}
.disclosure__body{padding:0 0 var(--s-6);max-width:40.3em;color:var(--c-ink-2)}
.disclosure__body>*+*{margin-top:var(--s-3)}
:root{--i-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");--i-plus-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='%230b1220' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E")}
pre.code{margin:0;padding:var(--s-4) var(--s-5);overflow-x:auto;border:1px solid var(--c-line-2);border-radius:var(--r-ctl);background:var(--c-surface-2);font-size:13.5px;line-height:1.6;white-space:pre;tab-size:4}
pre.code[tabindex]:focus-visible{outline:2px solid var(--c-focus);outline-offset:2px}
.sequence{display:grid;gap:var(--s-5);counter-reset:seq;list-style:none;padding:0}
.sequence>li{position:relative;display:grid;gap:6px;padding-left:48px;counter-increment:seq}
.sequence>li::before{content:counter(seq);position:absolute;left:0;top:-2px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--c-signal-wash);font:640 13.5px/1 var(--f-sans);font-variant-numeric:tabular-nums;color:var(--c-act)}
.yt{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:var(--r-fig);overflow:hidden;background:var(--c-sunken);box-shadow:0 0 0 1px var(--c-line-2)}
.yt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.yt .btn{position:absolute;right:16px;bottom:16px;background:var(--c-overlay);color:var(--c-ink);border-color:var(--c-line-2)}
.yt .btn:hover{background:var(--c-surface)}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Product name set big and expanded, then the section's own heading line (calmer than v1: smaller, never black). */
.chapter{display:grid;gap:var(--s-3);margin:0 0 var(--s-7);container-type:inline-size}
.chapter__name{display:block;font-family:var(--f-display);font-size:min(var(--chapter-size,9.4cqi),88px);line-height:.95;font-weight:600;font-stretch:100%;letter-spacing:-.012em;white-space:nowrap;color:var(--c-ink)}
.chapter__line{display:block;max-width:15.9em;font-family:var(--f-display);font-size:clamp(22px,2.3vw,32px);line-height:1.15;font-weight:560;font-stretch:104%;letter-spacing:-.012em;color:var(--c-ink-3)}
@supports (animation-timeline:view()){
 @media (prefers-reduced-motion:no-preference){
  .chapter__name{animation:chapter-open linear both;animation-timeline:view();animation-range:entry 5% cover 38%}
  @keyframes chapter-open{from{opacity:.3;letter-spacing:-.01em}}
 }
}

/* ---------- Footage: real recordings in a light frame. Plays muted when mostly in view (poster first); a visible
   control pauses it; reduced motion or Save-Data shows the poster and Play. ---------- */
.footage{margin:0}
.footage__frame{position:relative;aspect-ratio:16/9;border-radius:var(--r-win);overflow:hidden;background:var(--c-sunken);box-shadow:var(--shadow-win),0 0 0 1px var(--c-line)}
.footage__frame>img,.footage__frame>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.footage__ctl{position:absolute;right:14px;bottom:14px;z-index:2;display:flex;gap:8px}
.footage__ctl .btn{background:var(--c-overlay);color:var(--c-ink);border-color:var(--c-line-2);box-shadow:var(--shadow-pop)}
.footage__ctl .btn:hover{background:var(--c-surface)}
.footage__frame:fullscreen{border-radius:0;background:#000;box-shadow:none}
.footage__frame:fullscreen>img,.footage__frame:fullscreen>video{object-fit:contain}
.footage .fig-cap{margin-top:var(--s-4)}

/* ---------- Plan cards (<!--@planCards-->) and the demo panel: shared since v2 lanes reuse them ---------- */
.plans{display:grid;justify-items:center;gap:var(--s-7)}
.plans__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4);width:100%;list-style:none}
.plan{display:grid;align-content:start;gap:var(--s-2);padding:28px 26px 30px;border:1px solid var(--c-line);border-radius:var(--r-card);background:var(--c-surface);box-shadow:var(--shadow-card)}
.plan__name{font-size:19px;font-weight:600;letter-spacing:-.012em}
.plan__spec{font-size:14.5px;color:var(--c-ink-3)}
.plan__price{margin-top:var(--s-4);font-size:15px;color:var(--c-ink-3)}
.plan__price strong{display:block;font-family:var(--f-display);font-size:clamp(34px,3vw,44px);line-height:1;font-weight:600;font-stretch:100%;letter-spacing:-.012em;color:var(--c-ink);margin-bottom:6px}
.plan__ex{margin-top:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--c-line);font-size:14px;color:var(--c-ink-2)}
.plans:has(input[value=day]:checked) .plan__hour,.plans:has(input[value=hour]:checked) .plan__day{display:none}
.prices__more{margin-top:var(--s-7);text-align:center}

.cta__panel{display:grid;justify-items:center;gap:var(--s-4);padding:clamp(48px,6vw,96px) var(--s-6);border-radius:32px;background:var(--t-blue);text-align:center}
.cta__panel .t-lede{max-width:30.5em}
.cta__actions{margin-top:var(--s-2)}
.cta__help{font-size:15px;color:var(--c-ink-3)}

@media (max-width:1023px){.plans__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){
 .plans__list{grid-template-columns:1fr}
 .plans__seg{display:flex;width:100%}
 .plans__seg label{flex:1;justify-content:center;padding:0 10px;font-size:13.5px}
 .cta__panel{justify-items:start;text-align:left;border-radius:24px}
}
@media (forced-colors:active){.plan,.cta__panel{border:1px solid CanvasText}}

/* ---------- Cross-document view transitions ---------- */
main h1{view-transition-name:page-title}
[data-vt=eve-ng-labs]{view-transition-name:vt-eve-ng-labs}
[data-vt=native-access]{view-transition-name:vt-native-access}
::view-transition-group(page-title){animation-duration:.32s;animation-timing-function:var(--ease-out)}

/* ---------- Icons ---------- */
.i{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Reveal on scroll: sections settle in once (scroll-driven where supported; complete without it) ---------- */
@supports (animation-timeline:view()){
 @media (prefers-reduced-motion:no-preference){
  .rise{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 42%}
  @keyframes rise{from{opacity:0;transform:translateY(28px)}}
 }
}

/* ---------- Page transitions (cross-document; Chromium 126+, Safari 18.2+) ---------- */
@view-transition{navigation:auto}
html:not(.theme-flip)::view-transition-old(root){animation:vt-out .16s var(--ease) both}
html:not(.theme-flip)::view-transition-new(root){animation:vt-in .24s var(--ease-out) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
 .nav__link,.nav summary{padding:0 9px}
 .site-footer__grid{grid-template-columns:1fr}
 .site-footer__nav{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1023px){
 :root{--header-h:62px;--gutter:24px}
 .nav,.site-header__end>.signin,.site-header__end>.btn--primary{display:none}
 .drawer-toggle{display:block;margin-left:auto}
 .drawer>summary{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:1px solid var(--c-line-2);border-radius:var(--r-ctl);background:var(--c-surface);font-weight:600;font-size:15px;cursor:pointer}
 .drawer[open]>.drawer__panel{display:block;position:fixed;inset:var(--header-h) 0 0 0;z-index:60;overflow-y:auto;overscroll-behavior:contain;padding:var(--s-5) var(--gutter) var(--s-8);background:var(--c-canvas);border-top:1px solid var(--c-line);animation:drawer-in .22s var(--ease-out)}
 @keyframes drawer-in{from{opacity:0;transform:translateY(-8px)}}
 .drawer__pinned{display:grid;gap:var(--s-2);margin-bottom:var(--s-6)}
 .drawer__group{padding:var(--s-4) 0;border-top:1px solid var(--c-line)}
 .drawer__group h2{margin-bottom:var(--s-2);font-size:13.5px;font-weight:600;color:var(--c-ink-3)}
 .drawer__group ul{list-style:none;display:grid}
 .drawer__group a{display:grid;gap:2px;padding:10px 0;text-decoration:none;color:var(--c-ink)}
 .drawer__group a strong{font-weight:600;font-size:17px}
 .drawer__group a span{font-size:14px;color:var(--c-ink-3)}
 .split>[class*=span-]{grid-column:1/-1}
 .band{padding:var(--s-9) 0}
 .band--tight{padding:var(--s-8) 0}
}
@media (max-width:760px){
 .site-footer__nav{grid-template-columns:repeat(2,minmax(0,1fr))}
 .window__bar{height:36px;padding:0 12px}
 .window__dots i{width:9px;height:9px}
 .window__addr{height:24px;font-size:12px}
 .window__end{width:36px}
}
@media (max-width:400px){
 .drawer>summary span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .drawer>summary{padding:0 11px}
 .site-header__in{gap:var(--s-3)}
}
@media (max-width:520px){
 :root{--gutter:18px}
 .cmd code{font-size:12.5px}
 .copy{padding:0 9px}
 body{font-size:16px;line-height:1.6}
 .band{padding:var(--s-8) 0}
 .band__head{margin-bottom:var(--s-6)}
 .site-footer{padding-top:var(--s-8)}
 .site-footer__nav{grid-template-columns:1fr 1fr;gap:var(--s-6) var(--s-4)}
 .btn--lg{height:52px;padding:0 20px}
 .window__dots{display:none}
 .window__end{display:none}
}

/* ---------- Preferences ---------- */
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
 *::details-content{animation-duration:.001ms!important;transition-duration:.001ms!important}
 @view-transition{navigation:none}
}
@media (forced-colors:active){
 .btn,.seg label,.cmd,.copy,.term,.fig__frame,.menu,.input,.window,.footage__frame{border:1px solid CanvasText}
 .seg label:has(input:checked){outline:2px solid Highlight}
 .live::before,.port-led{forced-color-adjust:none;background:CanvasText}
 .nav__link[aria-current=page]{text-decoration:underline}
}
@media (forced-colors:active){.field__error::before{forced-color-adjust:none;background:CanvasText}}

/* ==========================================================================================================
   Guided lab pages, /labs/<course>/<lab>/ (site/packs/gen.mjs, 2 Nov 2026), plus the lab links on the course
   pages and the "Guided labs that use …" list on /images/<id>/. Tokens only, so both themes work; the topology is
   inline SVG with text labels; scenario tables and code scroll inside their own frame, never the page.
   ========================================================================================================== */
.pk-lab__link{color:var(--c-ink);text-decoration:none}
.pk-lab__link:hover{color:var(--c-signal);text-decoration:underline;text-underline-offset:.2em}
.lb-head .pk-tag{margin-bottom:var(--s-3)}
.lb-head .t-title{max-width:22em}
.lb-md{display:grid;gap:var(--s-4);max-width:52em;margin-top:var(--s-6);font-size:17px;line-height:1.62;color:var(--c-ink-2)}
.lb-md strong{color:var(--c-ink);font-weight:600}
.lb-md code{overflow-wrap:anywhere}
.lb-md ul,.lb-md ol{display:grid;gap:6px;margin:0;padding-left:1.3em}
.lb-md li>ul,.lb-md li>ol,.lb-md li>p{margin-top:6px}
.lb-md__h{margin-top:var(--s-3);font-size:19px;line-height:1.3;font-weight:600;color:var(--c-ink)}
h4.lb-md__h{font-size:17px}
.lb-quote{display:grid;gap:var(--s-3);margin:0;padding:14px 18px;border-radius:var(--r-fig);background:var(--c-canvas-2);font-size:15.5px}
.lb-table .table{font-size:14.5px}
.lb-table .table th,.lb-table .table td{padding:10px 14px}
.lb-table .table td code{overflow-wrap:normal}
.lb-pre{overflow-x:auto;border-radius:var(--r-fig);background:var(--c-term-bg)}
.lb-pre pre{margin:0;padding:14px 18px;font-size:13.5px;line-height:1.45;color:var(--c-term-fg);white-space:pre}
.lb-pre:focus-visible{outline:2px solid var(--c-focus);outline-offset:2px}
.lb-list{display:grid;gap:8px;margin:0;padding-left:1.25em;font-size:16.5px;line-height:1.55;color:var(--c-ink-2)}
.lb-sub{margin-top:var(--s-3)}
.lb-aside{font-size:15px;line-height:1.55;color:var(--c-ink-3)}
.lb-exam{display:grid;gap:6px;margin:0;padding-left:1.1em;font-size:14.5px;line-height:1.5;color:var(--c-ink-2)}
.lb-topo{margin:0}
.lb-topo__frame{overflow-x:auto;padding:var(--s-4);border:1px solid var(--c-line);border-radius:var(--r-card);background:var(--c-surface);box-shadow:var(--shadow-card)}
.tp{display:block;width:100%;height:auto;min-width:calc(var(--tw) * .8px);max-width:calc(var(--tw) * 1.1px);margin:0 auto;font-family:var(--f-sans)}
.tp line{stroke:var(--c-ink-3);stroke-width:1.6;opacity:.75}
.tp-glyph>*{fill:var(--c-surface);stroke:var(--c-signal);stroke-width:1.8}
.tp-glyph>.tp-mark{fill:none;stroke-linecap:round;stroke-linejoin:round}
.tp-node--net .tp-glyph>*{stroke:var(--c-ink-3)}
.tp text{paint-order:stroke;stroke:var(--c-surface);stroke-width:4px;stroke-linejoin:round}
.tp-name{font-size:14.5px;font-weight:600;fill:var(--c-ink);text-anchor:middle}
.tp-node--net .tp-name{font-weight:500;fill:var(--c-ink-2)}
.tp-if{font:500 12.5px var(--f-mono);fill:var(--c-ink-2);text-anchor:middle;dominant-baseline:central}
.lb-topo__hint{display:none}
.lb-links{margin-top:var(--s-5)}
.lb-devices{margin-top:var(--s-6)}
.lb-off{margin-top:var(--s-4)}
.lb-go{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-5)}
.lb-pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3);margin-top:var(--s-4)}
.lb-pager a{display:grid;align-content:start;gap:4px;padding:16px 20px;border:1px solid var(--c-line);border-radius:var(--r-card);background:var(--c-surface);box-shadow:var(--shadow-card);color:var(--c-ink);text-decoration:none}
.lb-pager a:hover{border-color:var(--c-line-3)}
.lb-pager a:hover .lb-pager__name{color:var(--c-signal)}
.lb-pager__next{grid-column:2;text-align:right}
.lb-pager__dir{font-size:13.5px;color:var(--c-ink-3)}
.lb-pager__name{font-weight:600;line-height:1.35}
.lb-back{margin-top:var(--s-4)}
.lb-related{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:var(--s-3) var(--s-6);margin:var(--s-4) 0 0;padding:0;list-style:none}
.lb-related li{display:grid;align-content:start;gap:2px;min-width:0}
.lb-related span{font-size:13.5px;color:var(--c-ink-3)}
.lb-catlede{max-width:44em;margin-top:var(--s-4)}
.lb-end .lb-sub{margin-top:var(--s-7)}
@media (max-width:760px){.lb-topo__hint{display:inline}.lb-topo__frame{padding:var(--s-3)}}
@media (max-width:620px){.lb-pager{grid-template-columns:1fr}.lb-pager__next{grid-column:1;text-align:left}.lb-md{font-size:16px}}
@media (forced-colors:active){.tp *{stroke:CanvasText}.tp text{fill:CanvasText;stroke:Canvas}.tp-glyph>*{fill:Canvas}.lb-pager a,.lb-topo__frame{border:1px solid CanvasText}}
.pg-lab .sequence code,.lb-plan code{white-space:normal;overflow-wrap:anywhere}
/* Run this lab (4 Nov 2026): the plan the lab needs, the free demo when it fits, and where it opens. One card under the
   lede, words left and buttons right; the buttons stack under the words below 1024 px and fill the width below 520 px. */
.lb-run{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s-3) var(--s-7);margin-top:var(--s-6);padding:clamp(20px,2.4vw,28px);border:1px solid var(--c-line);border-radius:var(--r-card);background:var(--c-surface);box-shadow:var(--shadow-card);overflow:hidden}
.lb-run::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--k)}
.lb-run__text{display:grid;gap:6px;min-width:0}
.lb-run__title{font-size:20px;line-height:1.25;font-weight:600}
.lb-run__need{font-size:16px;line-height:1.5;color:var(--c-ink-2)}
.lb-run__need strong{color:var(--c-ink)}
.lb-run__where{font-size:14.5px;line-height:1.5;color:var(--c-ink-3)}
.lb-run__actions{grid-column:2;grid-row:1/span 2;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--s-3)}
.lb-run__meta{grid-column:1/-1;font-size:14px;line-height:1.5;color:var(--c-ink-3)}
.lb-run+.pk-facts{margin-top:var(--s-5)}
.lb-path{overflow-wrap:anywhere}
.lb-path strong{color:var(--c-ink);font-weight:600}
.lb-path code{font-size:.92em;overflow-wrap:anywhere;white-space:normal}
.lb-path__sep{margin:0 .4em;color:var(--c-ink-3)}
@media (max-width:1023px){.lb-run{grid-template-columns:1fr}.lb-run__actions{grid-column:1;grid-row:auto;justify-content:flex-start}}
@media (max-width:520px){.lb-run__actions .btn{flex:1 1 100%}}
@media (forced-colors:active){.lb-run{border:1px solid CanvasText}}