:root{color-scheme:dark;--background:#09090b;--foreground:#fafafa;--primary:#5d8bf0;--primary-foreground:#000000;--accent:#00e5ff;--muted:#27272a;--border:#5e5e64}:root{--tree:var(--background);--strictSchema:var(--background);--payload:var(--muted);--notchedCarousel:var(--background);--scene:var(--background);--symmetric:var(--background);--justify_ruler:var(--foreground);--row:none;--series:75rem;--plugin:clamp(1rem,3vw,2rem);--kinetic-tip:clamp(3.5rem,7vw,5.5rem);--wrap:2rem;--tunnel:0.875rem;--lexicalThread:1rem;--stretch:0.75rem;--federatedLogo:0.25rem;--adaptive-wall:0.25rem;--drafted-tip:0;--holder:0.375rem;--constantMedia:0.25rem;--inferredQueue:0.125rem;--fusedTrim:9999px;--upper:1px;--master:solid;--capped-header:1px;--contextual:var(--border);--ported:var(--foreground);--absoluteRoster:color-mix(in srgb,var(--border) 20%,var(--background));--fluid-sparkline:none;--nativePage:0 2px 6px color-mix(in srgb,var(--foreground) 16%,transparent);--dual:0 8px 24px color-mix(in srgb,var(--foreground) 22%,transparent);--runner:inset 0 1px 1px color-mix(in srgb,var(--foreground) 10%,transparent);--standard-element:600;--passive_heading:0;--temperedRange:none;--rail:transparent;--stacked-silo:var(--primary);--headless:var(--background);--rich-pill:var(--foreground);--wide:transparent;--looped_mesh:var(--primary);--clean-emblem:var(--upper);--plain_banner:none;--flexible-plugin:var(--primary);--dimmed:var(--primary-foreground);--preciseAdapter:none;--staged_outline:color-mix(in srgb,var(--foreground) 7%,var(--background));--composite:var(--foreground);--framed_cursor:var(--border);--condensed:0 0 0 3px var(--primary);--computed_tag:var(--primary);--optical_dashboard:var(--background);--deepNav:var(--border);--optimal_screen:var(--foreground);--variableStub:var(--muted);--broadCollection:var(--primary);--static-socket:var(--background);--indexed-blade:var(--foreground);--logicalBuffer:transparent;--granular_hook:linear-gradient(transparent,var(--foreground));--immutable_canvas:saturate(1.15);--cached:1;--masked_deck:none;--signed_series:none;--tactile:0.4;--passive-thumbnail:0 0 0 3px var(--primary);--crisp:130ms;--timed_ledger:ease-out;--tethered-cursor:700;--computed-scrim:-0.015em;--draftedField:1.02;--striped:1;--glyph:400;--served-gauge:1.6;--embedded-segment:none;--integral_hook:65ch}@media(max-width:640px){:root{--kinetic-tip:calc((clamp(3.5rem,7vw,5.5rem)) * 0.7);--lexicalThread:calc((1rem) * 0.85);--stretch:calc((0.75rem) * 0.85);}}:root{--flexible-plugin:color-mix(in srgb,var(--primary) 14%,transparent);--dimmed:var(--primary)}.shaded-scope .bitwisePad{--flexible-plugin:color-mix(in srgb,var(--primary) 14%,transparent);--dimmed:var(--primary);}:root{--lateral:'JetBrains Mono',ui-monospace,Menlo,monospace;--evented-lightbox:'Inter',Arial,sans-serif}:root{--enriched-gallery:'Azeret Mono',ui-monospace,Menlo,monospace;--segmentedLayer:500;--bundledFlyout:-0.03em}*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{margin:0;background:var(--tree);color:var(--foreground);font:16px/var(--served-gauge,1.6) var(--evented-lightbox,Arial,Helvetica,sans-serif);font-weight:var(--glyph);overflow-wrap:break-word;}
/* Machine strings break mid-word, prose does not. An address, a domain or an
   Android package name arrives as one unbreakable run of characters, and one
   long enough — uk.co.pottsconstruct.mega.constructiv.civiline — reaches past
   the page on its own. Wrapping anywhere rather than only on overflow, as the
   body rule above does, because only the stronger value also lets the box
   measure itself narrower than that run: a flex or grid cell sizes to its
   longest word, so without it the cell grows and takes the layout with it. */
a[href^="mailto:"],a[href^="tel:"],code,.sorted-slab{overflow-wrap:anywhere;}
a{color:inherit;}
button{font:inherit;}
figure{margin:0;}
img,svg{max-width:100%;height:auto;}
input:not([type="checkbox"]):not([type="radio"]),textarea{appearance:none;-webkit-appearance:none;}
h1,h2,h3,h4,h5,h6{font-family:var(--lateral,inherit);font-weight:var(--tethered-cursor);letter-spacing:var(--computed-scrim);}
.raised-plugin{width:min(calc(var(--series) + var(--computed-wire,0rem)),calc(100% - calc(var(--plugin) + var(--spacedTitle,0rem))));margin-inline:auto;}
/* scroll-margin: an in-page call to action scrolls to a block and the bar is
   fixed over the top of the page, so the target would land under it. */
.prime_label{padding:calc(var(--kinetic-tip) + var(--cachedRail,0rem)) 0;scroll-margin-top:var(--richPopover);}
header.prime_label,footer.prime_label{padding:0;}
/* The hero states its own opening: every variant writes the padding it wants
   above and below the headline, and the wrapper used to add a whole band of
   empty page on top of that — between the bar and the first word, on every
   site. Here the wrapper keeps the horizontal shell only. */
.wired{padding-block:0;min-height:calc(100vh - var(--richPopover));min-height:calc(100svh - var(--richPopover));display:flex;flex-direction:column;}
/* The opening screen is the bar plus the hero and nothing else, so the hero is
   given whatever the bar leaves of the viewport. It is a floor, not a height:
   a hero with more in it than fits keeps growing.

   The bar is subtracted rather than the hero measured against the whole
   viewport, because the bar is fixed and its space is held in flow by the
   spacer beside it — so the hero starts below it, and a full-viewport hero
   would push exactly the bar's height past the fold. The height subtracted is
   the bar's real one: the runtime measures it and writes it onto the root
   (site-js.ts), and 5rem is only what a stylesheet without script falls back
   to. svh rather than vh so a phone's collapsing address bar does not make
   the first screen taller than the screen; the vh line above it is what a
   browser without svh reads.

   What sits inside grows into that floor and centres what it holds, which is
   why the variants keep their own padding: on a short viewport the padding is
   the spacing, and on a tall one the extra height is spent evenly above and
   below rather than as a gap under the copy. */
.wired>*{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;}
.grained_nav{padding:calc(var(--kinetic-tip) + var(--alert,0rem)) 0;background:var(--strictSchema);backdrop-filter:var(--row);-webkit-backdrop-filter:var(--row);}
/* A band paints its whole block, the wrapper's padding included. The band
   states its own vertical rhythm, so inside that padding it used to float as a
   filled strip with bare page above and below it — a hole between the fill and
   the wrapper's own rule, drawn out at the edge. Pulled back over the padding,
   the block is either filled to its edges or not filled at all, and the rhythm
   is stated once, by the band itself. */
.prime_label>.grained_nav{margin-block:calc(-1 * (var(--kinetic-tip) + var(--cachedRail,0rem)));}
/* The site signs its name in a face of its own (logo-fonts.ts), drawn from
   the seed and used nowhere else on the page. Weight and tracking come with
   the face, because a display serif and a monospaced grotesque do not read
   as a sign at the same ones; the fallbacks are what the wordmark was set
   in before, so a stylesheet without the vars still renders a lockup. */
.lazy_pattern{font-family:var(--enriched-gallery,inherit);font-weight:var(--segmentedLayer,600);text-decoration:none;font-size:1.25rem;letter-spacing:var(--bundledFlyout,-0.02em);}
.coupled_pipeline{text-transform:var(--embedded-segment);letter-spacing:0.12em;font-weight:700;color:var(--primary);font-size:0.875rem;margin-bottom:1rem;}
.fallback-lever{font-size:1.25rem;opacity:0.8;max-width:var(--integral_hook);line-height:var(--served-gauge);margin-bottom:2rem;}
.precise-signal{font-weight:var(--tethered-cursor);letter-spacing:var(--computed-scrim);}
.ledger{max-width:var(--integral_hook);}
address{font-style:normal;}
em,i,b{font-style:inherit;font-weight:inherit}

.bitwisePad{display:inline-flex;align-items:center;justify-content:center;min-height:var(--wrap);padding-block:0.5rem;padding-inline:var(--tunnel);border:var(--clean-emblem) var(--master) var(--looped_mesh);border-radius:var(--federatedLogo);background:var(--rail);color:var(--stacked-silo);text-decoration:none;font-weight:var(--standard-element);cursor:pointer;text-transform:var(--temperedRange);letter-spacing:var(--passive_heading);box-shadow:var(--plain_banner);transition:background var(--crisp) var(--timed_ledger),color var(--crisp) var(--timed_ledger),border-color var(--crisp) var(--timed_ledger),box-shadow var(--crisp) var(--timed_ledger),opacity var(--crisp) var(--timed_ledger),transform var(--crisp) var(--timed_ledger);}
.bitwisePad:hover{opacity:var(--cached);transform:var(--masked_deck);background:var(--flexible-plugin);color:var(--dimmed);box-shadow:var(--preciseAdapter);}
.bitwisePad:active{transform:var(--signed_series);box-shadow:var(--runner);}
.cyber_canvas{background:var(--headless);color:var(--rich-pill);border-color:var(--contextual);box-shadow:none;}
/* The outlined button already has an edge, so the pointer tints its ground
   rather than drawing anything new. It used to grow a 2px inset line along the
   bottom, which read as a second border under the one already there. */
.cyber_canvas:hover{background:color-mix(in srgb,var(--primary) 10%,var(--headless));color:var(--rich-pill);box-shadow:none;}
.validatedSpace{background:var(--wide);color:var(--rich-pill);box-shadow:none;border-color:transparent;text-decoration:underline;text-underline-offset:0.3em;}
.validatedSpace:hover{background:var(--wide);color:var(--rich-pill);box-shadow:none;}
.bitwiseScaffold{min-height:calc(var(--wrap) - 0.25rem);padding-block:calc(var(--wrap) / 8);padding-inline:calc(var(--tunnel) - 0.125rem);font-size:0.875rem;}

input,textarea{width:100%;backdrop-filter:var(--row);-webkit-backdrop-filter:var(--row);min-height:var(--wrap);padding:0.75rem var(--tunnel);border:var(--upper) var(--master) var(--contextual);border-radius:var(--adaptive-wall);background:var(--staged_outline);color:var(--composite);font:inherit;transition:border-color var(--crisp) var(--timed_ledger),box-shadow var(--crisp) var(--timed_ledger),opacity var(--crisp) var(--timed_ledger);}
textarea{min-height:9rem;resize:vertical;line-height:var(--served-gauge);}
input:hover,textarea:hover{border-color:var(--ported);}
input:not([type="checkbox"]):not([type="radio"]):focus,textarea:focus{border-color:var(--primary);box-shadow:var(--condensed);}
input:user-invalid,textarea:user-invalid{border-color:var(--computed_tag);}
/* A checkbox and a radio are not text fields: the rule above would stretch
   each one across its label's column at a text field's height. They take their
   own size back and borrow just the accent, which is the only part of a native
   selection control a stylesheet can colour. */
/* Drawn here rather than by the browser. A native control ignores the box a
   stylesheet gives it — border, radius and all — so the focus ring squared off
   every radio it touched, and accent-color was the only part of the checked
   state that could be reached at all. Painted ourselves, the box, the mark, the
   hover and the ring are the theme's, and the ring follows the shape. */
input[type="checkbox"],input[type="radio"]{appearance:none;-webkit-appearance:none;display:inline-grid;place-content:center;width:auto;min-height:0;inline-size:1.125rem;block-size:1.125rem;padding:0;border:var(--upper) var(--master) var(--ported);background:var(--staged_outline);cursor:pointer;transition:background var(--crisp) var(--timed_ledger),border-color var(--crisp) var(--timed_ledger);}
input[type="checkbox"]{border-radius:0.25rem;}
input[type="radio"]{border-radius:50%;}
input[type="checkbox"]::before,input[type="radio"]::before{content:"";inline-size:0.625rem;block-size:0.625rem;background:var(--primary-foreground);transform:scale(0);transition:transform var(--crisp) var(--timed_ledger);}
/* The tick is clipped rather than drawn as a glyph: no font to load and no SVG
   to inline for a mark this size. */
input[type="checkbox"]::before{clip-path:polygon(14% 44%,0 60%,40% 100%,100% 18%,84% 0,38% 68%);}
input[type="radio"]::before{inline-size:0.5rem;block-size:0.5rem;border-radius:50%;}
input[type="checkbox"]:hover,input[type="radio"]:hover{border-color:var(--primary);}
input[type="checkbox"]:checked,input[type="radio"]:checked{background:var(--primary);border-color:var(--primary);}
input[type="checkbox"]:checked::before,input[type="radio"]:checked::before{transform:scale(1);}
input[type="checkbox"]:focus-visible,input[type="radio"]:focus-visible{outline:2px solid var(--primary);outline-offset:2px;box-shadow:none;}
/* The browser lays a date field's contents out itself, and the result is a
   line box taller than a text field's — the date control stood a few pixels
   proud of the row it shared. It is given the text field's own box instead,
   written out: one line box, the same 0.75rem of padding above and below, and
   the two edges — a height stated here is a border-box height, so the borders
   have to be added back or the field lands a couple of pixels short. The
   density minimum still applies, so a theme that asks for a taller control
   gets one here too. */
input[type="date"],input[type="time"],input[type="datetime-local"],input[type="month"],input[type="week"]{block-size:calc(var(--served-gauge,1.6) * 1em + 1.5rem + 2 * var(--upper));padding-block:0;}
::placeholder{color:var(--framed_cursor);opacity:1;}

.richSkeleton,details{padding:var(--lexicalThread);background:var(--payload);border:var(--capped-header) var(--master) var(--contextual);border-radius:var(--drafted-tip);box-shadow:var(--fluid-sparkline);backdrop-filter:var(--row);-webkit-backdrop-filter:var(--row);}
.unifiedQueue{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--stretch);}
/* Column counts a block chooses from how many cards it holds (see
   gridColumns() in shared.ts) rather than from how many happen to fit: an
   auto-fitting track count leaves the last row half empty as soon as the card
   count and the viewport disagree. */
.constant_popover{grid-template-columns:repeat(2,minmax(0,1fr));}
.opaque_banner{grid-template-columns:repeat(3,minmax(0,1fr));}
.richSkeleton:hover,details:hover{box-shadow:var(--nativePage);}
summary{cursor:pointer;list-style-position:inside;}
/* The accent, not the navigation's own ink: a disclosure stands on a card,
   and the two themes whose bar sits on the page's ink name the page colour
   there — a marker painted with it vanished into the card it opens. */
summary::marker{color:var(--primary);}

.light-chrome{background:var(--notchedCarousel);border:var(--upper) var(--master) var(--contextual);border-radius:var(--drafted-tip);box-shadow:var(--nativePage);backdrop-filter:var(--row);-webkit-backdrop-filter:var(--row);}
.spinner{background:var(--symmetric);backdrop-filter:var(--row);-webkit-backdrop-filter:var(--row);border:var(--upper) var(--master) var(--contextual);border-radius:var(--drafted-tip);box-shadow:var(--dual);}
.cascaded_nav{border-radius:var(--holder);box-shadow:var(--dual);}

/* Every header rides the top of the viewport. The bar's height varies by
   variant and by viewport, so the space it would have occupied is restored by
   the runtime rather than by a hard-coded spacer — and a page whose script
   never runs still reads, because the bar only overlaps its first block. */
/* The bar spans the window, so its contents do too: a header measured to the
   content shell leaves the brand and the navigation huddled in the middle of a
   full-width bar. The page gutter is kept — at full width rather than the half
   the shell splits between its two sides, so the ends of a bar that now reaches
   both edges of the window still have room to breathe. */
.shaded-scope .raised-plugin{width:auto;max-width:none;margin-inline:0;padding-inline:var(--plugin);}
/* The bar's own edge is the navigation border, but the rule it closes on is
   the seam: that one line runs the width of the viewport under a surface
   that already reads as its own band, so it is drawn in ink washed most of
   the way back into the ground rather than in the border the rest of the
   page uses for control edges. A variant that wants a hard edge under the
   bar — v6, whose rules are its layout — states the colour itself. */
.shaded-scope{position:fixed;top:0;left:0;right:0;z-index:30;background:var(--optical_dashboard);border-color:var(--deepNav);border-bottom-color:var(--absoluteRoster);color:var(--optimal_screen);backdrop-filter:var(--row);-webkit-backdrop-filter:var(--row);}
/* No background here: on a row the panel sits inside the bar, which is already
   painted, and a navigation ground that is anything but fully opaque would
   tint that stretch of the bar twice. The panel earns its own fill only
   below 900px, where it drops out of the bar — header.ts's mobile query sets it
   there. */
.sidebar{border-color:var(--deepNav);color:var(--optimal_screen);}
.stateless-form a{position:relative;padding:0.25rem;text-decoration:none;font-weight:500;border-radius:var(--adaptive-wall);transition:background var(--crisp) var(--timed_ledger),box-shadow var(--crisp) var(--timed_ledger),color var(--crisp) var(--timed_ledger);}
/* v3 alone wears its links as padded pills, so the pointer fills the capsule
   that is already there — the same shape the current page wears, which a theme
   may then part from by naming a fill of its own for the current one. On every
   other bar a backdrop behind the label would sit on top of the variant's own
   effect, so none of them draws one.

   The fill is a tint of the bar's own ink rather than the navigation hover
   token: half the themes name a capsule ground equal to that token — the
   material bar sinks its capsule into --muted and names --muted for the
   hover — and a pill painted in the colour it sits on shows nothing. A
   translucent tint of the ink reads on any ground, dark bars included, where
   that ink is the light one. */
.trim .stateless-form a:hover{background:color-mix(in srgb,var(--optimal_screen) 12%,transparent);}
/* The page the visitor is on fills the same pill, in the navigation's own
   hover colour — the one place that colour is spent now that the pointer
   paints with the bar's ink. The pill's geometry stays with the variant. */
.trim .stateless-form a[aria-current="page"]{background:var(--variableStub);}
/* The page the visitor is on. Since the underline became a hover effect on the
   three bars that draw one, this rule is their whole marker, so it has to
   outrank what a theme's chrome says about the resting label: qualified by the
   bar it measures one class more than the chrome's own link rule, which would
   otherwise take the weight back. A theme whose labels already rest at that
   weight lifts the current one further, and the two bars whose accent equals
   their own ink separate it by a fill instead — colour cannot carry it there.
   v3 is left out of the heavier label — it fills its pill, and bolder text
   inside a filled capsule reads as a second marker on top of the fill — but by
   its own rule in header.ts, not by a :not() here: qualified that way this
   rule outranks every bar that lifts the weight further (v4's 800, the v1
   treatments' 900, a theme's chrome) and all of them go silently dead. */
.shaded-scope .stateless-form a[aria-current="page"]{font-weight:700;color:var(--broadCollection);}
.rightArticle{border:var(--upper) var(--master) var(--deepNav);border-radius:var(--adaptive-wall);background:transparent;color:inherit;transition:background var(--crisp) var(--timed_ledger);}

/* The edge is a tint of the badge's own ink rather than the page's border
   colour: a badge filled with the accent wore a grey outline that belonged to
   nothing on it, and on a pale badge the same tint still reads as an edge. */
.twinSequence,.orbital_drawer{display:inline-flex;align-items:center;gap:0.5rem;padding:0.375rem var(--tunnel);border:var(--upper) var(--master) color-mix(in srgb,var(--indexed-blade) 22%,transparent);border-radius:var(--inferredQueue);background:var(--static-socket);color:var(--indexed-blade);font-size:0.8125rem;font-weight:var(--standard-element);letter-spacing:var(--passive_heading);margin:0;text-transform:var(--embedded-segment);}
.twinSequence.contextual-registry{border-radius:var(--fusedTrim);}
figure>img{border:var(--upper) var(--master) var(--logicalBuffer);border-radius:var(--constantMedia);filter:var(--immutable_canvas);}
body .isolated-toast{background:var(--granular_hook);}

/* The browser's own focus ring is turned off on :focus as well as on
   :focus-visible, and the two are stated separately on purpose. The ring the
   design draws is a keyboard affordance, so only :focus-visible carries it;
   the outline, though, has to go the moment the element takes focus at all.
   A pointer press focuses first and resolves :focus-visible after, and in that
   gap Chrome painted its default ring — a dark line inside a white one, built
   to be seen on any ground — which on a dark page read as a white flash around
   the control that vanished on the next frame. Only the outline is repeated
   below: a mouse press still leaves no ring of ours behind it. */
.bitwisePad:focus,a:focus,button:focus,summary:focus,input:not([type="checkbox"]):not([type="radio"]):focus,textarea:focus,select:focus{outline:2px solid transparent;outline-offset:2px;}
.bitwisePad:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible,input:not([type="checkbox"]):not([type="radio"]):focus-visible,textarea:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:var(--passive-thumbnail);}
.stateless-form a:focus-visible,.stateless-form a:hover:focus-visible,.rightArticle:focus-visible,.rightArticle:hover:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:var(--passive-thumbnail);}
.bitwisePad:disabled,button:disabled,input:disabled,textarea:disabled,[aria-disabled="true"]{opacity:var(--tactile);cursor:not-allowed;}

.elasticFooter{width:1.25rem;height:1.25rem;flex-shrink:0;}
/* The chip stands on the inset surface and draws its icon in the accent, the
   pair its two siblings already use (the boundary mark and the list check).
   It used to take the badge's ink instead, and a badge's ink is written for a
   badge's ground: where that ink is the page colour the icon disappeared
   inside its own chip.

   The chip has to be a shade off the card it sits in, and on most themes the
   inset surface already is: where the card is the muted tone the chip is the
   page ground and reads lighter, where the card is the page the chip is the
   muted tone and reads deeper. The two themes that name one surface for both
   state their own exception (theme-chrome.ts) rather than every theme paying
   for it in a mix here. The hairline stays: on the themes led by their edges it
   is the chip's shape. */
.extended-plate{width:3rem;height:3rem;border-radius:var(--inferredQueue);display:inline-flex;align-items:center;justify-content:center;border:var(--upper) var(--master) var(--contextual);background:var(--scene);color:var(--primary);}
.extended-plate .elasticFooter{width:1.5rem;height:1.5rem;}
.vertical_element{width:3rem;height:3rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;background:var(--static-socket);color:var(--indexed-blade);flex-shrink:0;}
/* Contact marks are accented wherever they appear — the contact block, the
   form's details column, the footer's contact column — so the tint belongs
   here rather than in whichever block reaches for them, where the inverted
   ground could not see it. */
.shallow-blade{color:var(--primary);}

.linear_details .raised-plugin{display:flex;flex-direction:column;align-items:center;}
.straightBar .fallback-lever{color:var(--background);opacity:0.7;}
.lazy-accordion{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start;}
.opticalSection{position:sticky;top:4rem;}
.opticalSection h2{font-size:calc((1rem + (clamp(2.5rem,6vw,4rem) - 1rem) * var(--striped)) * var(--draftedField));line-height:1.1;margin:0;}
.vectored .fallback-lever{margin-inline:auto;}
.rounded .fallback-lever{opacity:0.8;color:var(--background);}
.rounded .bitwisePad{background:var(--background);color:var(--foreground);}
.rounded .bitwisePad:hover{background:var(--primary);color:var(--primary-foreground);}
.matte-tab .fallback-lever,.volatile_avatar .fallback-lever{margin-inline:auto;}
.compact_rack .lazy_pattern{margin-bottom:2rem;font-size:1.5rem;}

.progressive-capsule{display:flex;flex-direction:column;gap:0.75rem;max-width:44rem;margin:0 0 clamp(2rem,4vw,3.5rem);}
.passive-session{align-items:center;text-align:center;margin-inline:auto;}
/* A centred label may be flanked by a pair of marks, and which marks — a rule,
   a dot, or nothing at all — is a theme's decision (theme-chrome.ts). The row
   is declared here so every theme only has to state the marks; a theme that
   states none leaves the label standing on its own, which is the default. */
.replicated-keypad{display:flex;width:100%;align-items:center;justify-content:center;gap:0.75rem;}
.replicated-keypad::before,.replicated-keypad::after{content:"";display:none;flex:0 0 auto;background:currentColor;}
.precise-signal{font-size:calc((1rem + (clamp(1.875rem,4vw,3rem) - 1rem) * var(--striped)) * var(--draftedField));line-height:1.1;margin:0;}
.coupled_pipeline{font-size:0.8125rem;margin:0;}
.fallback-lever{font-size:1.125rem;opacity:0.75;line-height:var(--served-gauge);margin:0;}
.liveGauge{display:flex;flex-wrap:wrap;gap:0.75rem;align-items:center;}

/* Drawn between neighbours on the seeded share of blocks that sit mid-page
   (site-plan.ts): the theme's own boundary rather than a decision of its own. */
.shim{border-block:var(--upper) var(--master) var(--contextual);}
.breadcrumb{--cachedRail:0rem;--alert:0rem;--computed-wire:-2rem;--spacedTitle:2rem;}
.isolated_provider{--cachedRail:-1rem;--alert:-1.5rem;--computed-wire:-12rem;--spacedTitle:3rem;}
.betaToolbar{--cachedRail:0.5rem;--alert:0.625rem;--computed-wire:3rem;--spacedTitle:1rem;}
.cyberWizard{--cachedRail:1rem;--alert:0.5rem;--computed-wire:8rem;--spacedTitle:0.5rem;}

/* Two columns from the tablet width down. */
@media(max-width:1024px){.lazy-accordion{gap:2.5rem;}.unifiedQueue{grid-template-columns:repeat(2,1fr);}.opaque_banner{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:768px){.unifiedQueue{grid-template-columns:1fr;}.constant_popover,.opaque_banner{grid-template-columns:1fr;}.sequentialCaption,.nativePopover,.lazy-accordion{grid-template-columns:1fr;gap:3rem;}.opticalSection{position:static;margin-bottom:2rem;}.bitwiseSegment{grid-template-columns:1fr;}}
/* The phone: one column everywhere, so the layout families' shell and padding
   adjustments — written to tell a stack from a grid at desktop widths — only
   eat a screen that has nothing to spare, and return to zero. Type steps down
   one size at the secondary levels (the subhead, the block title's floor)
   while body copy holds at 16px; the display sizes already clamp to a floor a
   phone can carry. Stacked gaps close up, and the CTA pair shares a row when
   both fit, otherwise each takes the full width — a thumb target, not a tab.
   Block padding, card padding and gaps scale in the theme sheet
   (style-themes.ts), which is layered after this one. */
@media(max-width:640px){
.breadcrumb,.isolated_provider,.betaToolbar,.cyberWizard{--cachedRail:0rem;--alert:0rem;--computed-wire:0rem;--spacedTitle:0rem;}
.precise-signal{font-size:calc((1rem + (clamp(1.75rem,7vw,2.25rem) - 1rem) * var(--striped)) * var(--draftedField));}
.fallback-lever{font-size:1.0625rem;}
.progressive-capsule{margin-bottom:clamp(1.5rem,6vw,2rem);gap:0.5rem;}
.opticalSection h2{font-size:calc((1rem + (clamp(2rem,8vw,2.5rem) - 1rem) * var(--striped)) * var(--draftedField));}
.sequentialCaption,.nativePopover,.lazy-accordion{gap:2rem;}
.opticalSection{margin-bottom:0;}
.liveGauge{gap:0.625rem;}
.liveGauge .bitwisePad{flex:1 1 10rem;}
.extended-plate{width:2.75rem;height:2.75rem;}
}
.runtime-scroller{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem;}
.sized .runtime-scroller{max-width:44rem;margin-inline:auto;}
.proxied-endpoint{display:flex;align-items:flex-start;gap:0.875rem;font-size:1.0625rem;line-height:var(--served-gauge);opacity:0.85;}
/* The same pair the icon chip settled on: a sunken ground carries the accent,
   with a hairline so the disc reads on the themes whose inset surface is the
   page itself. The glyph was the page's ink at 70% instead, and where a theme
   sinks that ground towards the ink — which is what a sunken surface is — the
   cross came out a shade off the disc it sits in and could not be read at all.
   Ink at less than full strength was the second half of it: there is nothing to
   spend on a mark this small.

   The ring is currentColor, so it is the accent the cross is drawn in. The
   UI border was a grey ruled around a green mark — two colours for one small
   thing, and the grey the louder of them. */
.phased_slider{flex-shrink:0;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--scene);color:var(--primary);border:var(--upper) var(--master) currentColor;display:inline-flex;align-items:center;justify-content:center;}
.phased_slider .elasticFooter{width:1rem;height:1rem;}
.digest .sizedRow{padding-top:0.5rem;}
/* The one variant that stands on an inverted band, so its colours are the
   band's to state (base-css.ts) and what is left here is its measure: the list
   runs the width of the band otherwise, and a line of boundaries reads as a
   paragraph once it passes the measure the rest of the page keeps to. */
.deep_component .runtime-scroller{max-width:52rem;}
.pinnedHandle .matrix{margin-inline:auto;max-width:52rem;}
.matrix{text-align:left;}
.matrix .progressive-capsule{margin-top:0;}
.stateless-tree{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.875rem;}
.matte{position:relative;padding-left:1.5rem;font-size:1.0625rem;line-height:var(--served-gauge);opacity:0.85;}
.matte::before{content:"";position:absolute;left:0;top:0.7em;width:0.75rem;height:1px;background:var(--justify_ruler);opacity:0.5;}
.forked-repeater .progressive-capsule{max-width:40rem;}
.central{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.front-terminal{padding:1.25rem 0;border-top:var(--upper) var(--master) var(--contextual);font-size:1.0625rem;line-height:var(--served-gauge);opacity:0.85;}
.front-terminal:last-child{border-bottom:var(--upper) var(--master) var(--contextual);}
.scroller{background:var(--payload);}
.keyed-surface{display:grid;gap:var(--stretch);text-align:left;}
@media(max-width:768px){
.keyed-surface{grid-template-columns:1fr;}
}.pairedParcel{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;width:2.25rem;height:2.25rem;}
.pairedParcel .inline{width:1.25rem;height:1.25rem;}
.tetheredHook{font-family:var(--enriched-gallery,inherit);font-size:0.8125rem;font-weight:var(--segmentedLayer,600);letter-spacing:0.02em;line-height:1;}
.gated,.patched,.anchored-frame{background:var(--primary);color:var(--primary-foreground);}
.onboard_item,.global-editor,.subtle-inspector{border:var(--upper) var(--master) currentColor;color:inherit;}
.tempered-spinner{background:color-mix(in srgb,currentColor 12%,transparent);color:inherit;}
.patched,.global-editor,.tempered-spinner{border-radius:var(--adaptive-wall);}
.anchored-frame,.subtle-inspector{border-radius:var(--fusedTrim);}
/* A brand link is a line of type; the mark rides beside it rather than above,
   and the pair keeps the link's own colour so the tile follows the surface.

   The name is wrapped rather than left bare: a flex container makes an
   anonymous item of every run of text between elements, so the v1 wordmark —
   whose lead capitals are elements around the rest of each word — came apart
   into "A cme C orp", a gap at every one of them. Wrapped, the name is a single
   item and its own contents stay in ordinary inline flow. */
.lazy_pattern{display:inline-flex;align-items:center;gap:0.625rem;}
.strict-wave{display:inline-block;}.frontMedia{display:flex;align-items:center;gap:0.75rem;margin:0 0 1rem;font-family:var(--enriched-gallery,inherit);font-weight:var(--segmentedLayer,700);letter-spacing:var(--bundledFlyout,normal);font-size:1.0625rem;}
.rolling-tag .progressive-capsule{max-width:none;}
.clipTracker{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:start;}
.clipTracker .progressive-capsule{margin-top:0;}
.left-space{margin:0;display:flex;flex-direction:column;}
.recessedPopup{display:grid;grid-template-columns:minmax(9rem,0.5fr) 1.5fr;gap:0.5rem clamp(1rem,3vw,2rem);padding:0.875rem 0;border-top:var(--upper) var(--master) var(--contextual);align-items:start;}
.recessedPopup:last-child{border-bottom:var(--upper) var(--master) var(--contextual);}
.recessedPopup dt{font-weight:700;font-size:0.8125rem;text-transform:uppercase;letter-spacing:0.06em;opacity:0.55;}
.recessedPopup dd{margin:0;line-height:var(--served-gauge);opacity:0.9;}
.recessedPopup dd a{text-decoration:underline;text-underline-offset:0.2em;}
.backend{list-style:none;margin:1.25rem 0 0;padding:0;display:flex;flex-direction:column;gap:0.75rem;}
.backend li{display:flex;align-items:flex-start;gap:0.625rem;line-height:var(--served-gauge);opacity:0.85;}
.backend .elasticFooter{width:1.05rem;height:1.05rem;color:var(--primary);margin-top:0.2rem;flex-shrink:0;}
.tracked_provider{display:flex;align-items:center;gap:0.5rem;margin:1.5rem 0 0;font-size:0.9375rem;opacity:0.75;}
.tracked_provider .elasticFooter{width:1.05rem;height:1.05rem;color:var(--primary);flex-shrink:0;}
.looped-popup .flyout{margin-top:1.5rem;}
.shallowCollection{margin-top:clamp(2rem,4vw,2.5rem);}
.shallowCollection h3,.verticalRule h3,.tiled_radar .sizedRow h3{margin:0;font-size:1.125rem;}
.flyout{text-align:left;}
.flyout .recessedPopup:first-child{border-top:none;padding-top:0;}
.flyout .recessedPopup:last-child{border-bottom:none;padding-bottom:0;}
.rapid_unit .recessedPopup{border-top-color:var(--ported);}
.rapid_unit .recessedPopup:last-child{border-bottom-color:var(--ported);}
.broad_backdrop .backend{text-align:left;}
.verticalRule{max-width:44rem;margin-inline:auto;}
.verticalRule h3{margin-top:clamp(2rem,4vw,2.5rem);}
.tiled_radar .sizedRow h3{margin-top:clamp(1.75rem,3vw,2.25rem);}
.privateGraph{background:var(--payload);}
.privateGraph .left-space{max-width:44rem;margin-inline:auto;}
.privateGraph .tracked_provider{justify-content:center;}
@media(max-width:768px){
.clipTracker{grid-template-columns:1fr;}
.recessedPopup{grid-template-columns:1fr;gap:0.25rem;}
}
/* The phone: display sizes step down to what a 390px column carries and the
   gaps a two-column layout needed close up; the theme scales block padding. */
@media(max-width:640px){
.clipTracker{gap:1.5rem;}
.shallowCollection,.verticalRule h3{margin-top:1.5rem;}
}.vectored .augmentedPlate{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0.5rem;}
.augmentedPlate .fallback-lever{margin-inline:auto;}
.augmentedPlate h1,.augmentedPlate h2{margin:0;font-size:calc((1rem + (clamp(2rem,5vw,3.25rem) - 1rem) * var(--striped)) * var(--draftedField));line-height:1.1;max-width:20ch;}
.augmentedPlate .contextual-viewport{align-items:center;margin:0.25rem 0 0.75rem;}
.rounded .semantic_form{border-radius:var(--holder);padding:var(--lexicalThread);}
.contextual_provider h1,.contextual_provider h2{margin:0 0 1rem;font-size:calc((1rem + (clamp(1.75rem,4vw,2.75rem) - 1rem) * var(--striped)) * var(--draftedField));line-height:1.1;}
.contextual_provider .contextual-viewport{margin:1rem 0 1.5rem;}
.matte-tab .single,.volatile_avatar .versatile_plugin{text-align:center;padding:var(--lexicalThread);}
.single{border:var(--upper) var(--master) var(--contextual);border-radius:var(--drafted-tip);background:var(--notchedCarousel);}
.versatile_plugin{background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 12%,var(--muted)),var(--background));border:var(--upper) var(--master) var(--contextual);border-radius:var(--drafted-tip);box-shadow:var(--fluid-sparkline);}
.single h1,.single h2,.versatile_plugin h1,.versatile_plugin h2{margin:0 0 1rem;font-size:calc((1rem + (clamp(2rem,5vw,3.25rem) - 1rem) * var(--striped)) * var(--draftedField));line-height:1.1;}
.single .fallback-lever,.versatile_plugin .fallback-lever{margin-inline:auto;}
.single .contextual-viewport,.versatile_plugin .contextual-viewport{align-items:center;margin:1rem 0 1.5rem;}
.spaced_combo .cyber_trigger{display:flex;justify-content:space-between;align-items:center;gap:clamp(1.5rem,3vw,2rem);flex-wrap:wrap;padding:clamp(1.5rem,3vw,2rem) 0;border-top:var(--upper) var(--master) var(--ported);border-bottom:var(--upper) var(--master) var(--ported);}
.charted_slate h1,.charted_slate h2{margin:0 0 0.75rem;font-size:calc((1rem + (clamp(1.5rem,3.5vw,2.25rem) - 1rem) * var(--striped)) * var(--draftedField));line-height:1.1;}
.charted_slate .contextual-viewport{margin:0;}
.contextual-viewport{display:flex;flex-direction:column;gap:0.5rem;font-style:normal;}
.cascaded_screen{display:inline-flex;align-items:flex-start;gap:0.5rem;line-height:var(--served-gauge);min-width:0;}
.cascaded_screen .shallow-blade{margin-top:0.125rem;}
.contextual-viewport a{text-decoration:underline;text-underline-offset:0.2em;}
.fluid_system .swiftFeed{text-align:center;}
.swiftFeed h1,.swiftFeed h2{margin:0 0 0.5rem;font-size:calc((1rem + (clamp(1.75rem,4vw,2.75rem) - 1rem) * var(--striped)) * var(--draftedField));}
.swiftFeed .fallback-lever{margin-inline:auto;}
.locked-splash{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--stretch);margin:2rem 0 2.5rem;text-align:left;}
.groupedVeil{display:flex;flex-direction:column;gap:0.4rem;word-break:break-word;}
.groupedVeil .shallow-blade{margin-bottom:0.25rem;}
.unified_dock{font-weight:700;font-size:0.8125rem;text-transform:uppercase;letter-spacing:0.06em;opacity:0.6;}
.groupedVeil a{text-decoration:underline;text-underline-offset:0.2em;}
@media(max-width:768px){
.semantic_form,.rounded .semantic_form{padding:var(--lexicalThread);}
.single,.versatile_plugin,.matte-tab .single,.volatile_avatar .versatile_plugin{padding:var(--lexicalThread);}
.cyber_trigger,.spaced_combo .cyber_trigger{flex-direction:column;align-items:flex-start;}
.locked-splash{grid-template-columns:1fr;}
}
/* The phone: display sizes step down to what a 390px column carries and the
   gaps a two-column layout needed close up; the theme scales block padding. */
@media(max-width:640px){
.augmentedPlate h1,.augmentedPlate h2,.single h1,.single h2,.versatile_plugin h1,.versatile_plugin h2{font-size:calc((1rem + (clamp(1.75rem,7vw,2.25rem) - 1rem) * var(--striped)) * var(--draftedField));}
}.ledger h1{font-size:calc((1rem + (clamp(2.25rem,5vw,3.5rem) - 1rem) * var(--striped)) * var(--draftedField));line-height:1.1;margin:0 0 1.5rem;}
.ledger h2{font-size:1.5rem;line-height:1.3;margin:2.5rem 0 1rem;}
.ledger h3{font-size:1.125rem;line-height:1.4;margin:2rem 0 0.75rem;}
.ledger p{margin:0 0 1.25rem;font-size:1.0625rem;line-height:var(--served-gauge);opacity:0.85;}
.ledger p:last-child{margin-bottom:0;}
.ledger p.coupled_pipeline{margin:0;font-size:0.8125rem;opacity:1;}
.ledger ul{margin:0 0 1.25rem;padding-left:1.25rem;display:flex;flex-direction:column;gap:0.5rem;}
.ledger li{font-size:1.0625rem;line-height:var(--served-gauge);opacity:0.85;}
.ledger a{color:var(--primary);text-decoration:underline;text-underline-offset:0.2em;}
.ledger strong{font-weight:700;}
.cover-trigger{padding:calc(var(--kinetic-tip) * 0.25) 0;}
/* The eyebrow leaves the text column for a rail of its own: an accent line the
   full height of the copy, with the label held at the top of the viewport
   while the prose scrolls past it. v2 puts the heading in the left column and
   v3 centres everything, so neither reads like this one. */
.thread{display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:start;}
.tertiary{align-self:stretch;border-inline-start:2px var(--master) var(--primary);padding-inline-start:clamp(0.75rem,1.5vw,1.25rem);}
.tertiary .coupled_pipeline{position:sticky;top:clamp(1.5rem,4vw,2.5rem);margin:0;}
.indexed{padding:calc(var(--kinetic-tip) * 0.5) 0;}
.raw-adapter h1,.raw-adapter h2{margin:0;}
.scoped_accordion{margin-top:0;}
.bitwiseSegment{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(2rem,4vw,3rem);align-items:start;}
.stacked_inspector img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--constantMedia);}
.nominal{padding:calc(var(--kinetic-tip) * 0.35) 0;}
.bundledBoard{margin-inline:auto;text-align:center;}
/* The card stands on a pattern rather than on the page's flat fill: one of the
   six textures, drawn from the site's seed on a stream of its own so it is
   independent of whatever the page ground drew. The ground is painted opaque
   first — a page that already carries a texture would otherwise show both at
   once, one printed over the other. */
.unifiedComposer{background-color:var(--tree);}
.recessedNav{padding:calc(var(--kinetic-tip) * 0.35 + 3rem) 0;}
/* A tint of the page's ink over the card surface, not the surface itself:
   several themes give card and page the same colour, and there the card
   was a bordered rectangle of the ground it stood on. Six percent is
   enough to read as a panel on a light theme and on a dark one. */
/* The card is sized as a panel, not as a column of prose: the prose wrapper
   caps its width at the theme's reading measure, and on the themes that set a
   narrow one the card came out as a strip down the middle of a wide ground. The
   card states its own ceiling instead, and the copy fills it — a measure held
   inside a card that is already close to it only draws a second, narrower
   column inside the first. */
.tactile-screen{background:color-mix(in srgb,var(--payload) 94%,var(--foreground));padding:calc(var(--lexicalThread) * 1.75) calc(var(--lexicalThread) * 1.5);max-width:min(100%,52rem);width:100%;margin-inline:auto;text-align:center;}
/* The label belongs to the title under it, so it is set close: the prose ramp
   left a whole line of air between them and the two read as separate openings. */
.bundledBoard .coupled_pipeline,.tactile-screen .coupled_pipeline{margin-bottom:0;}
.bundledBoard h1,.bundledBoard h2,.tactile-screen h1,.tactile-screen h2{margin-top:0.35rem;margin-bottom:1.25rem;}
.provisioned{padding:calc(var(--kinetic-tip) * 0.5) 0;}
.provisioned h1,.provisioned h2{font-size:calc((1rem + (clamp(3rem,8vw,5rem) - 1rem) * var(--striped)) * var(--draftedField));margin:0 0 2rem;line-height:1.1;}
.isolated{border:none;border-top:var(--upper) var(--master) var(--contextual);width:3rem;margin:0 0 2rem;}
/* A lead set at display weight, then a step: everything after the opening
   paragraph drops to body size and starts well inside the measure, so the
   block reads as one statement with its own footnotes rather than as another
   even column of prose. */
.roundedPipeline{max-width:none;}
.roundedPipeline p{font-size:calc((1rem + (clamp(1.125rem,1.8vw,1.375rem) - 1rem) * var(--striped)) * var(--draftedField));margin:0 0 1.5rem;line-height:1.45;max-width:var(--integral_hook);}
.roundedPipeline p:not(:first-child){font-size:1.0625rem;line-height:var(--served-gauge);margin-inline-start:clamp(0rem,20vw,18rem);max-width:52ch;position:relative;padding-top:1.5rem;}
/* A short accent tick opens every paragraph after the lead and is centred over
   the measure, the way a printed break mark is. The step alone left the copy
   reading as one unbroken column once the paragraphs ran long, and against the
   left edge the tick read as the start of a list rather than as a break. */
.roundedPipeline p:not(:first-child)::before{content:"";position:absolute;top:0;inset-inline:0;margin-inline:auto;width:2.5rem;height:2px;background:var(--primary);}
.roundedPipeline p:last-child{margin-bottom:0;}
.hybrid{padding:calc(var(--kinetic-tip) * 0.4) 0;}
.localToken{margin-bottom:2rem;}
.localToken h1,.localToken h2{margin:0;}
.mid_radar{column-count:2;column-gap:clamp(2rem,4vw,2.5rem);max-width:none;}
.encrypted-poster::first-letter{font-size:3.75rem;font-weight:800;float:left;line-height:0.85;padding:0.25rem 0.5rem 0 0;color:var(--primary);}
@media(max-width:1024px){
.mid_radar{column-count:1;}
}
@media(max-width:768px){
.thread{grid-template-columns:1fr;gap:1rem;}
.tertiary{align-self:start;border-inline-start:0;padding-inline-start:0;}
.tertiary .coupled_pipeline{position:static;}
.roundedPipeline p:not(:first-child){margin-inline-start:0;}
.bitwiseSegment{grid-template-columns:1fr;gap:2rem;}
.tactile-screen{padding:calc(var(--lexicalThread) * 1.25) var(--lexicalThread);}
.mid_radar{column-count:1;}
}
/* The phone: display sizes step down to what a 390px column carries and the
   gaps a two-column layout needed close up; the theme scales block padding. */
@media(max-width:640px){
.ledger h1{font-size:calc((1rem + (clamp(1.875rem,7vw,2.5rem) - 1rem) * var(--striped)) * var(--draftedField));}
.provisioned h1,.provisioned h2{font-size:calc((1rem + (clamp(2.25rem,9vw,3rem) - 1rem) * var(--striped)) * var(--draftedField));margin-bottom:1.25rem;}
.thread,.bitwiseSegment{gap:1.5rem;}
}.styled-details .canonical-gallery{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.25rem;}
.styled-details h1,.styled-details h2{margin:0;font-size:calc((1rem + (clamp(1.75rem,4vw,2.75rem) - 1rem) * var(--striped)) * var(--draftedField));line-height:1.1;max-width:20ch;}
.canonical-gallery .fallback-lever{margin-inline:auto;}
.orbital_drawer .elasticFooter{width:0.875rem;height:0.875rem;color:currentColor;}
/* Neither band is rounded: both run the full width of the page, and a card
   radius on a band with no edge to round left a notch of page showing at each
   of its four corners. The card inside v4 keeps its radius — that one is a
   card, standing inside the shell. */
.versatile-lockup,.quick{border-radius:0;}
.mobile-wrapper .opaque-carousel{display:grid;grid-template-columns:1fr auto;align-items:center;gap:clamp(1.5rem,3vw,2.5rem);padding:var(--lexicalThread);border-radius:var(--holder);background:var(--notchedCarousel);}
.atomic_session h1,.atomic_session h2{margin:0 0 0.5rem;font-size:calc((1rem + (clamp(1.5rem,3.5vw,2.25rem) - 1rem) * var(--striped)) * var(--draftedField));line-height:1.15;}
.atomic_session .fallback-lever{margin:0;max-width:52ch;}
.managed{text-align:center;max-width:640px;margin:0 auto;}
.managed h1,.managed h2{margin:0 0 1rem;font-size:calc((1rem + (clamp(2rem,5vw,3rem) - 1rem) * var(--striped)) * var(--draftedField));line-height:1.1;}
.managed .fallback-lever{margin-inline:auto;}
.textual_component{text-align:center;}
.textual_component h1,.textual_component h2{margin:0 0 1.5rem;font-size:calc((1rem + (clamp(1.75rem,4vw,2.5rem) - 1rem) * var(--striped)) * var(--draftedField));line-height:1.1;}
.bitwise-lightbox{gap:0.5rem;}
.bitwise-lightbox .elasticFooter{width:1.1rem;height:1.1rem;}
.mixed .wireless_stamp{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;padding:1.5rem 0;border-top:var(--upper) var(--master) var(--contextual);border-bottom:var(--upper) var(--master) var(--contextual);}
.wireless_stamp h1,.wireless_stamp h2{margin:0;font-size:calc((1rem + (clamp(1.25rem,2.5vw,1.5rem) - 1rem) * var(--striped)) * var(--draftedField));line-height:1.2;}
.buffered-section .rounded_dashboard{position:relative;overflow:hidden;text-align:center;padding:var(--lexicalThread);border-radius:var(--drafted-tip);}
.rounded_dashboard::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(45deg,color-mix(in srgb,var(--background) 14%,transparent) 0,color-mix(in srgb,var(--background) 14%,transparent) 2px,transparent 2px,transparent 14px);pointer-events:none;}
.rounded_dashboard>*{position:relative;}
.rounded_dashboard h1,.rounded_dashboard h2{margin:0 0 1rem;font-size:calc((1rem + (clamp(1.75rem,4vw,2.75rem) - 1rem) * var(--striped)) * var(--draftedField));line-height:1.1;max-width:22ch;margin-inline:auto;}
.rounded_dashboard .fallback-lever{margin-inline:auto;}
@media(max-width:768px){
.mobile-wrapper .opaque-carousel{grid-template-columns:1fr;justify-items:start;}
.wireless_stamp,.mixed .wireless_stamp{flex-direction:column;align-items:flex-start;}
}
/* The phone: display sizes step down to what a 390px column carries and the
   gaps a two-column layout needed close up; the theme scales block padding. */
@media(max-width:640px){
.managed h1,.managed h2{font-size:calc((1rem + (clamp(1.75rem,7vw,2.25rem) - 1rem) * var(--striped)) * var(--draftedField));}
}.bitwise-slider{border:var(--upper) var(--master) var(--contextual);border-radius:var(--drafted-tip);background:var(--payload);}
.bitwise-slider summary{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:clamp(1.25rem,2.5vw,1.5rem);font-weight:700;font-size:1.0625rem;line-height:var(--served-gauge);cursor:pointer;list-style:none;}
.bitwise-slider summary::-webkit-details-marker{display:none;}
.bitwise-slider summary::after{content:"+";font-size:1.5rem;font-weight:400;line-height:1.1;flex-shrink:0;color:var(--primary);transition:transform var(--crisp) var(--timed_ledger);}
.bitwise-slider[open] summary::after{transform:rotate(45deg);}
.bitwise-slider p{margin:0;padding:0 clamp(1.25rem,2.5vw,1.5rem) clamp(1.25rem,2.5vw,1.5rem);opacity:0.75;line-height:var(--served-gauge);max-width:70ch;}
.mobile{display:flex;flex-direction:column;gap:1rem;}
.swift .mobile{max-width:48rem;margin-inline:auto;}
.tonal_label .bitwise-slider{background:transparent;border:none;border-radius:0;border-top:var(--upper) var(--master) var(--contextual);}
.tonal_label .bitwise-slider:last-child{border-bottom:var(--upper) var(--master) var(--contextual);}
.tonal_label .bitwise-slider summary{padding:1.75rem 0;font-size:1.1875rem;}
.tonal_label .bitwise-slider p{padding:0 0 1.75rem;font-size:1.0625rem;}
/* The track count comes from the column class the renderer picks off the
   item count (see gridColumns()), not from what fits: an auto-fitting grid
   leaves a lone card in the last row as soon as the count and the viewport
   disagree. v6 stands its list in one column beside the lead and so takes no
   column class. */
.tuned{display:grid;gap:var(--stretch);grid-template-columns:1fr;}
.sorted .tuned{gap:var(--stretch);}
.ordered{max-width:44rem;margin-inline:auto;}
.reactive .bitwise-slider{background:transparent;border:none;border-radius:0;border-top:var(--upper) var(--master) var(--contextual);}
.reactive .bitwise-slider:last-child{border-bottom:var(--upper) var(--master) var(--contextual);}
.reactive .bitwise-slider summary{padding:1.5rem 0;}
.reactive .bitwise-slider p{padding:0 0 1.5rem;}
.explicit-spinner .bitwise-slider{background:transparent;border-color:var(--ported);}
.indexed-divider .zoomedScene{display:grid;grid-template-columns:0.8fr 1.2fr;gap:clamp(2rem,4vw,3rem);align-items:start;}
.turbo-feed{display:flex;flex-direction:column;gap:1rem;}
.turbo-feed .progressive-capsule{margin-bottom:0;}
.visual-hint{grid-template-columns:1fr;gap:1rem;}
@media(max-width:768px){
.tuned{grid-template-columns:1fr;}
.indexed-divider .zoomedScene{grid-template-columns:1fr;gap:2rem;}
}
/* The phone: display sizes step down to what a 390px column carries and the
   gaps a two-column layout needed close up; the theme scales block padding. */
@media(max-width:640px){
.indexed-divider .zoomedScene{gap:1.5rem;}
.bitwise-slider summary{padding:1rem 1.125rem;font-size:1rem;}
.tonal_label .bitwise-slider summary,.reactive .bitwise-slider summary{padding:1.125rem 0;font-size:1.0625rem;}
}.optical-content{display:grid;gap:var(--stretch);}
.labeled_frame .clean_slab{align-items:flex-start;}
.clean_slab{display:flex;flex-direction:column;gap:0.875rem;padding:var(--lexicalThread);transition:transform var(--crisp) var(--timed_ledger),box-shadow var(--crisp) var(--timed_ledger),border-color var(--crisp) var(--timed_ledger);}
.clean_slab:hover{transform:var(--masked_deck);border-color:var(--ported);box-shadow:var(--nativePage);}
.clean_slab h3{margin:0;font-size:1.25rem;}
.clean_slab p{margin:0;opacity:0.75;line-height:var(--served-gauge);}
.split .normalized_marker{max-width:56rem;}
.spatial-tooltip{display:flex;flex-direction:column;}
.fluid{display:flex;align-items:flex-start;gap:1.5rem;padding:2rem 0;}
.fluid + .fluid{border-top:var(--upper) var(--master) var(--contextual);}
/* An ordinal is read, not decorated, so it is dimmed by mixing towards the
   page's ink rather than by spending opacity. Transparency blends towards the
   ground, and on a dark palette the accent at 45% landed at 2.4:1 — below even
   the 3:1 a numeral this size is held to. Both ends of this mix clear 4.5:1
   against the page (palettes.test.ts) and a mix sits between them, so it
   clears it too, on a light palette and a dark one alike. */
.upper_summary{font-size:1.5rem;font-weight:800;color:color-mix(in srgb,var(--primary) 70%,var(--foreground));line-height:1.35;flex-shrink:0;min-width:2.25rem;font-variant-numeric:tabular-nums;}
.normalized_marker h3{margin:0 0 0.5rem;font-size:1.25rem;}
.normalized_marker p{margin:0;opacity:0.75;line-height:var(--served-gauge);max-width:60ch;}
.mapped_surface .progressive-capsule{max-width:34rem;}
.ring{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--stretch);grid-auto-rows:minmax(220px,auto);}
.encoded{padding:var(--lexicalThread);border-radius:var(--drafted-tip);display:flex;flex-direction:column;gap:0.75rem;}
.column{background:var(--payload);border:var(--capped-header) var(--master) var(--contextual);box-shadow:var(--fluid-sparkline);}
.encoded .extended-plate{margin-bottom:auto;}
.encoded h3{margin:0;font-size:1.25rem;}
.sequentialCaption h3{font-size:calc((1rem + (clamp(1.5rem,2.5vw,1.875rem) - 1rem) * var(--striped)) * var(--draftedField));}
.encoded p{margin:0;opacity:0.75;line-height:var(--served-gauge);}
.nativePopover{grid-column:span 1;}
.tight-picture{grid-column:span 4;}
.bitwise .opticalSection{top:6rem;}
.sizedRow{display:flex;flex-direction:column;}
.ultra{display:flex;flex-direction:column;gap:0.75rem;padding:2rem 0;border-top:var(--upper) var(--master) var(--contextual);}
.ultra:first-child{border-top:none;}
.ultra h3{font-size:1.375rem;margin:0;}
.ultra p{margin:0;opacity:0.75;font-size:1.0625rem;line-height:var(--served-gauge);max-width:60ch;}
.iterative-applet .progressive-capsule{max-width:40rem;}
.keyedCallout{display:flex;flex-direction:column;}
.passive-shelf{display:grid;grid-template-columns:minmax(12rem,0.8fr) 1.6fr;gap:1.5rem clamp(1.5rem,4vw,3rem);padding:2rem 0;border-top:var(--upper) var(--master) var(--contextual);align-items:start;}
.legacyHint{display:flex;align-items:center;gap:1rem;}
.passive-shelf:last-child{border-bottom:var(--upper) var(--master) var(--contextual);}
.passive-shelf h3{margin:0;font-size:1.25rem;}
.passive-shelf p{margin:0;opacity:0.75;font-size:1.0625rem;line-height:var(--served-gauge);max-width:60ch;}
.wrapper .progressive-capsule{max-width:40rem;}
.compiledSelector{display:grid;grid-template-columns:1fr 1fr;}
.flexibleAvatar{display:flex;flex-direction:column;gap:2rem;padding:0 2.5rem;}
.flexibleAvatar:first-child{border-inline-end:var(--upper) var(--master) var(--contextual);}
.piped-caption{display:flex;gap:1.25rem;align-items:flex-start;}
.piped-caption h3{margin:0 0 0.5rem;font-size:1.25rem;}
.piped-caption p{margin:0;opacity:0.75;line-height:var(--served-gauge);}
@media(min-width:1024px){
.sequentialCaption{grid-column:span 2;grid-row:span 2;}
}
@media(max-width:1024px){
.ring{grid-template-columns:repeat(2,1fr);}
/* Two columns: the wide cells of the four-column grid would each take a whole
   row and strand the cell beside them, so every cell is one column here. The
   lead cell gives up its second row as well — at exactly 1024px this query and
   the one above it both match, and a cell one column wide but two rows tall
   left the cell beside it with nowhere to go, which is the hole this sizing
   exists to close. */
.sequentialCaption,.tight-picture{grid-column:span 1;}
.sequentialCaption{grid-row:auto;}
}
@media(max-width:768px){
.ring{grid-template-columns:1fr;}
.passive-shelf{grid-template-columns:1fr;gap:1rem;padding:1.5rem 0;}
.fluid{flex-direction:column;gap:1rem;}
.compiledSelector{grid-template-columns:1fr;gap:1.5rem;}
.flexibleAvatar{padding:0;}
.flexibleAvatar:first-child{border-inline-end:none;}
}
/* The phone: display sizes step down to what a 390px column carries and the
   gaps a two-column layout needed close up; the theme scales block padding. */
@media(max-width:640px){
.passive-shelf{padding:1.25rem 0;}
.compiledSelector{gap:1.25rem;}
}.lightScope,.rack,.compact_rack,.federated_mount,.centerLookup,.linear{padding:calc(var(--kinetic-tip) * 0.7) 0 calc(var(--kinetic-tip) * 0.35);margin-top:calc(var(--kinetic-tip) * 0.7);border-top:var(--upper) var(--master) var(--contextual);}
.standard_mod{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding-top:clamp(1.5rem,3vw,2rem);margin-top:clamp(2rem,4vw,3rem);border-top:var(--upper) var(--master) var(--contextual);opacity:0.65;font-size:0.875rem;}
.standard_mod p{margin:0;}
.standard_mod a{text-decoration:none;}
.standard_mod a:hover{text-decoration:underline;}
.mobile-item{margin:0.75rem 0 0;font-size:0.75rem;opacity:0.55;}
.mobile-item a{text-decoration:none;}
.tertiary_grip{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:clamp(2rem,4vw,3rem);}
.contain_wrapper{display:flex;flex-direction:column;gap:1rem;}
.session{display:flex;flex-direction:column;gap:0.75rem;}
.session a{text-decoration:none;opacity:0.85;}
.session a{transition:opacity var(--crisp) var(--timed_ledger),color var(--crisp) var(--timed_ledger);}
.session a:hover{opacity:1;color:var(--primary);}
.graphed_spacer{font-weight:700;margin:0;font-size:0.8125rem;text-transform:uppercase;letter-spacing:0.06em;opacity:0.55;}
.forkedDashboard{margin:0;opacity:0.75;max-width:32ch;line-height:var(--served-gauge);}
.encoded-cell{display:flex;flex-direction:column;gap:0.65rem;font-style:normal;}
.straight-segment{display:inline-flex;align-items:flex-start;gap:0.5rem;text-decoration:none;opacity:0.85;line-height:var(--served-gauge);min-width:0;}
.straight-segment .elasticFooter{margin-top:0.125rem;}
.straight-segment .elasticFooter{width:1.05rem;height:1.05rem;}
a.straight-segment:hover{opacity:1;}
.rack{background:var(--payload);border-top:none;padding-top:calc(var(--kinetic-tip) * 0.85);}
.legacyOffset{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(2rem,4vw,3rem);align-items:start;}
.fixed-slate{display:flex;flex-direction:column;gap:0.875rem;}
.fixed-slate p{margin:0;opacity:0.75;max-width:32ch;}
.visual-gallery{display:flex;flex-direction:column;gap:0.75rem;text-align:right;font-weight:500;}
.visual-gallery a{text-decoration:none;transition:color var(--crisp) var(--timed_ledger);}
.visual-gallery a:hover{color:var(--primary);}
.compact_rack{text-align:center;}
/* Still inline so the centred column can centre it, but flex, because the
   brand link is a lockup now — the mark and the name (brand-logo.ts). Declared
   inline-block, it took the mark out of the flex context and the two sat
   baseline-aligned, hard against each other. */
.compact_rack .lazy_pattern{display:inline-flex;margin-bottom:1.5rem;}
.utilityToken{display:flex;justify-content:center;gap:1.75rem;flex-wrap:wrap;font-weight:500;margin-bottom:1.5rem;}
.utilityToken a{text-decoration:none;transition:color var(--crisp) var(--timed_ledger);}
.utilityToken a:hover{color:var(--primary);}
.compact_rack .encoded-cell{align-items:center;margin-bottom:2rem;}
.tempered{width:2.5rem;height:2px;background:var(--border);margin:0 auto;}
.compact_rack .standard_mod{justify-content:center;border-top:none;margin-top:1.5rem;padding-top:0;}
.federated_mount{border-top-color:var(--ported);}
.federated_mount .standard_mod{border-top-color:var(--ported);}
.centerLookup{padding-top:var(--kinetic-tip);}
.gated-tip{margin-bottom:clamp(2rem,4vw,3rem);}
.gated-tip .lazy_pattern{font-size:calc((1rem + (clamp(2.5rem,9vw,6rem) - 1rem) * var(--striped)) * var(--draftedField));letter-spacing:calc(var(--bundledFlyout,-0.02em) - 0.01em);}
/* Display sizes close up, so the wordmark is tracked a step tighter than the
   face asks for at reading size rather than at a figure of its own — a face
   set to open up (Bodoni) must not be slammed shut here because the size is
   large.

   The huge wordmark is the sign here: beside a name set at up to 6rem, a
   2.25rem tile reads as a stray sticker, and scaling the tile with the type
   would put a 6rem block where the layout wants a line of letters. */
.gated-tip .pairedParcel{display:none;}
.canonicalRule{display:flex;gap:1.5rem;flex-wrap:wrap;}
.canonicalRule a{text-decoration:none;font-weight:500;transition:color var(--crisp) var(--timed_ledger);}
.canonicalRule a:hover{color:var(--primary);}
.centerLookup .encoded-cell{margin-top:1.5rem;flex-direction:row;gap:1.5rem;flex-wrap:wrap;}
.semi_mod{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.25rem;}
.legacyThumb{display:flex;gap:1.5rem;flex-wrap:wrap;}
.legacyThumb a{text-decoration:none;font-weight:500;opacity:0.85;}
.legacyThumb a:hover{opacity:1;}
.charted{margin:0;opacity:0.6;font-size:0.875rem;}
.linear .encoded-cell{margin-top:1.5rem;}
@media(max-width:768px){
.tertiary_grip,.legacyOffset{grid-template-columns:1fr;gap:2rem;}
.visual-gallery{text-align:left;}
.standard_mod{flex-direction:column;align-items:flex-start;}
.semi_mod{flex-direction:column;align-items:flex-start;}
}
@media(max-width:1024px){
.tertiary_grip{grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));}
.legacyOffset{grid-template-columns:1fr;}
.visual-gallery{text-align:left;}
}
/* The phone: display sizes step down to what a 390px column carries and the
   gaps a two-column layout needed close up; the theme scales block padding. */
@media(max-width:640px){
.tertiary_grip,.legacyOffset{gap:1.5rem;}
.standard_mod{margin-top:1.5rem;padding-top:1.25rem;}
.gated-tip{margin-bottom:1.5rem;}
.gated-tip .lazy_pattern{font-size:calc((1rem + (clamp(2rem,10vw,2.75rem) - 1rem) * var(--striped)) * var(--draftedField));}
}.spacer{display:grid;gap:1.25rem;}
.shaded{display:flex;flex-direction:column;gap:0.5rem;min-width:0;}
.fixed-element{font-weight:600;font-size:0.875rem;letter-spacing:0.01em;}
.sharded-card{display:flex;flex-direction:column;gap:1.5rem;}
.sorted-slab{margin:0;font-size:0.9375rem;font-weight:600;color:var(--primary);}
.deployed-package{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;}
.iterative_queue{display:flex;flex-direction:column;gap:0.75rem;margin:0 0 clamp(1.75rem,3vw,2.5rem);max-width:44rem;}
.weighted_toast{align-items:center;text-align:center;margin-inline:auto;}
.curated{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem 1.5rem;}
.curated .inline_notice,.curated .deployed-package{grid-column:1/-1;}
.light-chrome{padding:var(--lexicalThread);max-width:44rem;margin:0 auto;}
.handheld-veil{display:grid;grid-template-columns:0.85fr 1.15fr;gap:clamp(2rem,4vw,4rem);align-items:start;}
.spinner{padding:var(--lexicalThread);}
.registry{max-width:44rem;}
/* The underlined field: no box, so nothing may draw one back. The shared focus
   affordance is a ring with a 3px spread, and around a field whose only edge is
   a rule under the text it read as a box that had appeared from nowhere — the
   whole idea of the layout undone by the act of clicking into it. The focus is
   the rule itself instead: it takes the accent and doubles in weight, which is
   a visible change in the same place the field already draws. */
.grid input,.grid textarea{border:none;border-bottom:var(--upper) var(--master) var(--contextual);border-radius:0;padding-left:0;padding-right:0;background:transparent;}
.grid input:not([type="checkbox"]):not([type="radio"]):focus,.grid textarea:focus,.grid input:not([type="checkbox"]):not([type="radio"]):focus-visible,.grid textarea:focus-visible{outline:none;box-shadow:inset 0 -2px 0 var(--primary);border-bottom-color:var(--primary);}
.grid textarea{min-height:5rem;}
.cascaded_nav{padding:var(--lexicalThread);}
.external_provider .cross_feed{max-width:44rem;margin-inline:auto;}
.local{max-width:36rem;}
.internal_toolbar{font-size:0.8125rem;opacity:0.65;margin:1rem 0 0;}
.beta-registry{font-weight:400;opacity:0.6;text-transform:none;}
@media(max-width:768px){
.handheld-veil{grid-template-columns:1fr;}
.curated{grid-template-columns:1fr;}
.deployed-package .bitwisePad{width:100%;}
}
/* The phone: display sizes step down to what a 390px column carries and the
   gaps a two-column layout needed close up; the theme scales block padding. */
@media(max-width:640px){
.handheld-veil{gap:1.5rem;}
}.globalScaffold .progressive-capsule,.stacked_library .progressive-capsule,.secure .progressive-capsule,.concurrent-ticker .progressive-capsule{max-width:none;}
.rotated .fixed{align-items:center;}
.unifiedLogo{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:var(--stretch);}
.optical-payload{display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden;transition:transform var(--crisp) var(--timed_ledger),box-shadow var(--crisp) var(--timed_ledger);}
/* The caption takes the rest of the card. Only the first card carries a photo
   — the site's photo budget goes to the split layouts — so its neighbours are
   caption alone, and a caption sized to its text left the ground a theme gives
   it (a tint, a rule) covering a quarter of the card and bare below. */
.arrayed-collection{padding:clamp(1.25rem,2.5vw,1.75rem);flex:1;}
.flexible{margin:0;}
.flexible img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
/* A photo that runs to the edge of a frame draws none of its own: the media
   border would double the card's, and the media radius would round inside a
   corner the card already rounds (v1 and v3 sit in a frame; v6 is the frame). */
.flexible img,.clean-stencil img,.private_slot img{border-width:0;border-radius:0;}
.arrayed-collection h3{margin:0 0 0.5rem;font-size:1.25rem;}
.arrayed-collection p{margin:0;opacity:0.75;line-height:var(--served-gauge);}
/* The lead photo runs the width of the shell. A gallery resolves one photo, so
   anything set beside it — a column of copy, two photoless rows — left the
   other half of the spread empty; under it, the three projects fill the width
   themselves. */
.tightDigest{margin:0 0 clamp(2rem,4vw,3rem);}
.tightDigest img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--constantMedia);display:block;}
.cross{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.5rem);}
/* A short accent mark ahead of the title, not a rule across the column: a
   full-width line over every entry read as a table's row divider and cut the
   spread into strips. */
.adaptivePulse::before,.unified_adapter::before{content:"";display:block;width:2.5rem;height:2px;margin-bottom:1rem;background:var(--primary);}
.adaptivePulse h3{margin:0 0 0.5rem;font-size:calc((1rem + (clamp(1.25rem,2vw,1.5rem) - 1rem) * var(--striped)) * var(--draftedField));}
.adaptivePulse p{margin:0;opacity:0.75;line-height:var(--served-gauge);max-width:46ch;}
.cyber-dropdown{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--stretch);}
/* A light panel standing on the inverted band, so its type has to come back to
   the page's ink: the inverted ground paints everything inside it in the page
   colour, which on this card is the colour of the card itself. */
.signedPill{display:flex;flex-direction:column;background:var(--notchedCarousel);color:var(--foreground);border-radius:var(--drafted-tip);overflow:hidden;border:var(--upper) var(--master) var(--contextual);}
.secure .planar-ticker p{color:var(--foreground);}
/* Only one project has a photo, so it takes the full width of the grid and
   splits inside — photo beside its caption — instead of leaving an orphan card
   in a row of its own. */
.backend_rule{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;}
.clean-stencil{margin:0;}
.clean-stencil img{width:100%;height:100%;min-height:18rem;object-fit:cover;display:block;}
.planar-ticker{padding:clamp(1.5rem,3vw,2rem);flex:1;}
.planar-ticker h3{margin:0 0 0.5rem;font-size:1.375rem;}
.planar-ticker p{margin:0;opacity:0.75;line-height:var(--served-gauge);}
.tetheredLightbox{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4rem);align-items:start;}
.resilient{grid-template-columns:1fr;}
.snapped_zone{display:flex;flex-direction:column;}
.labeledPlaceholder{margin:0 0 1.5rem;}
.labeledPlaceholder img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--constantMedia);display:block;}
.exact_paper h3{margin:0 0 0.5rem;font-size:calc((1rem + (clamp(1.375rem,2.5vw,1.75rem) - 1rem) * var(--striped)) * var(--draftedField));}
.exact_paper p{margin:0;opacity:0.75;font-size:1.0625rem;line-height:var(--served-gauge);max-width:55ch;}
/* Against a column-tall photo the remaining projects stand as a stack of ruled
   entries; with no photo at all the stack opens out across the shell. */
.explicit-action{display:grid;gap:clamp(1.75rem,3vw,2.5rem);align-content:start;}
.resilient .explicit-action{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));}

.unified_adapter h3{margin:0 0 0.5rem;font-size:calc((1rem + (clamp(1.25rem,2vw,1.5rem) - 1rem) * var(--striped)) * var(--draftedField));}
.unified_adapter p{margin:0;opacity:0.75;font-size:1.0625rem;line-height:var(--served-gauge);max-width:52ch;}
.meshed{display:flex;flex-direction:column;}
.fixed{display:flex;gap:clamp(2rem,5vw,4rem);align-items:center;padding:clamp(2.5rem,5vw,4rem) 0;border-top:var(--upper) var(--master) var(--contextual);}
.fixed:last-child{border-bottom:var(--upper) var(--master) var(--contextual);}
.meshed>.fixed:nth-child(even){flex-direction:row-reverse;}
.well{flex:1;}
.well h3{margin:0 0 1rem;font-size:calc((1rem + (clamp(1.625rem,3.5vw,2.25rem) - 1rem) * var(--striped)) * var(--draftedField));}
.well p{margin:0;opacity:0.75;font-size:1.125rem;line-height:var(--served-gauge);max-width:60ch;}
.internal{width:45%;flex-shrink:0;margin:0;}
.internal img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--constantMedia);display:block;}
.marker .hosted-alert{display:grid;grid-template-columns:repeat(3,1fr);}
.root-repeater{position:relative;overflow:hidden;aspect-ratio:1;}
.root-repeater::after{content:"";position:absolute;inset:auto 0 0;height:55%;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--foreground) 80%,transparent));pointer-events:none;}
.private_slot{margin:0;height:100%;}
.private_slot img{width:100%;height:100%;object-fit:cover;display:block;}
/* A tile with no photo is a filled tile, not an empty crop: it takes the
   inverted ground the caption's light type was written for, drops the gradient
   that shades a photo, and sets its caption in normal flow. */
.containGutter{display:flex;align-items:flex-end;}
.containGutter::after{display:none;}
.containGutter .baseline_snippet{position:static;width:100%;}
.baseline_snippet{position:absolute;inset:auto 0 0;z-index:1;padding:1.5rem;color:var(--background);transition:transform var(--crisp) var(--timed_ledger);}
.root-repeater:not(.containGutter):hover .baseline_snippet,.root-repeater:not(.containGutter):focus-within .baseline_snippet{transform:var(--masked_deck);}
.baseline_snippet h3{margin:0 0 0.25rem;font-size:1.125rem;}
.baseline_snippet p{margin:0;font-size:0.875rem;opacity:0.85;line-height:var(--served-gauge);}
@media(max-width:1024px){
.marker .hosted-alert{grid-template-columns:repeat(2,1fr);}
.cyber-dropdown{grid-template-columns:1fr;}
}
@media(max-width:768px){
.marker .hosted-alert{grid-template-columns:1fr;}
.cross{grid-template-columns:1fr;}
.tightDigest img{aspect-ratio:16/9;}
.cyber-dropdown{grid-template-columns:1fr;}
.backend_rule{grid-template-columns:1fr;}
.tetheredLightbox{grid-template-columns:1fr;gap:3rem;}
.fixed,.meshed>.fixed:nth-child(even){flex-direction:column;gap:2rem;padding:2rem 0;}
.internal{width:100%;}
}
/* The phone: display sizes step down to what a 390px column carries and the
   gaps a two-column layout needed close up; the theme scales block padding. */
@media(max-width:640px){
.tightDigest{margin-bottom:1.5rem;}
.tetheredLightbox{gap:1.5rem;}
.fixed,.meshed>.fixed:nth-child(even){gap:1.25rem;padding:1.5rem 0;}
}/* Every bar closes on a hairline, whatever width the theme names for its
   borders: the rule sits under a surface that already reads as its own band,
   and at two or three pixels it draws a second one. The colour is the seam
   token rather than the border the rest of the page draws its edges with —
   that one is picked to clear 3:1 against the ground, and run the full width
   of the viewport it reads as a shelf the bar is standing on. */
.private{border-bottom:1px var(--master) var(--absoluteRoster);}
/* The wordmark's lead capitals stand a step above the letters they open, and
   both figures are read off the face rather than fixed: a face named at 400
   (Space Mono) set against a hard 800 lead was two different logotypes in one
   line. Where the face is light enough that the step lands under 400 the
   letters simply render at the lightest weight the family ships, and the
   accent on the lead carries the distinction on its own. */
.alpha_bundle{color:var(--foreground);font-weight:calc(var(--segmentedLayer,600) - 100);}
.optical_grip{color:var(--primary);font-weight:var(--segmentedLayer,600);}
.skewed .stateless-form a{font-weight:500;}
.grouped-chrome .stateless-form a{text-transform:uppercase;letter-spacing:0.08em;font-weight:600;}
.minor_repeater .stateless-form a{font-family:var(--lateral);text-transform:uppercase;letter-spacing:0.12em;font-weight:800;}
.minor_repeater .stateless-form a[aria-current="page"]{font-weight:900;}
.minor_repeater .alpha_bundle{text-transform:uppercase;letter-spacing:0.06em;}
.provisionedRadar .stateless-form a{font-style:italic;font-weight:500;}
.provisionedRadar .alpha_bundle{font-style:italic;}
.thinRouter .stateless-form a{font-variant-caps:all-small-caps;letter-spacing:0.06em;font-weight:600;}
.thinRouter .alpha_bundle{font-variant-caps:all-small-caps;letter-spacing:0.03em;}
.computed_container .stateless-form a{text-transform:uppercase;letter-spacing:0.18em;font-weight:500;}
.computed_container .alpha_bundle{letter-spacing:0.06em;}
.wizard .stateless-form a{font-family:var(--lateral);font-weight:600;}
.wizard .alpha_bundle{font-weight:calc(var(--segmentedLayer,600) + 100);}
.resilient_pattern .stateless-form a{font-weight:800;}
.resilient_pattern .stateless-form a[aria-current="page"]{font-weight:900;}
.resilient_pattern .alpha_bundle{text-transform:uppercase;font-weight:calc(var(--segmentedLayer,600) + 100);}
.utilityPopup .stateless-form a{text-transform:uppercase;letter-spacing:0.04em;font-size:0.8125rem;font-weight:600;}
.utilityPopup .alpha_bundle{font-size:1.125rem;}
.ranked-bar{display:flex;align-items:center;justify-content:space-between;gap:clamp(1rem,2vw,1.5rem);padding:clamp(0.875rem,2vw,1.125rem) 0;}
.granular_tint{display:flex;flex-direction:column;align-items:center;gap:0.875rem;padding:clamp(1rem,2vw,1.25rem) 0;}
.sidebar{display:flex;align-items:center;gap:clamp(1rem,2vw,1.5rem);}
.stateless-form{display:flex;flex-wrap:wrap;gap:clamp(1rem,2vw,1.5rem);}
/* The underline means one thing on the three bars that draw one: the pointer
   is here. The page the visitor is actually on is marked by the shared layer —
   the navigation accent and a heavier label — because a rule under the label at
   rest reads as a second marker and leaves the bar looking hovered. */
.private .stateless-form a::after{content:"";position:absolute;left:0;bottom:-0.35rem;width:0;height:2px;background:var(--primary);transition:width var(--crisp) var(--timed_ledger);}
.private .stateless-form a:hover::after{width:100%;}
/* v2 stands its brand over the navigation, and only the navigation is meant to
   travel: past the first screen the brand folds away and the bar keeps the
   links alone, so the mark reads as the head of the page rather than as a
   permanent strip over it. The fold is a max-height rather than display:none,
   so it runs on the same interaction tokens every other bar animates with; the
   spacer measures the bar at rest (site-js.ts), so the page below does not jump
   when it closes. */
.chainedCell .lazy_pattern{max-height:3rem;overflow:hidden;transition:max-height var(--crisp) var(--timed_ledger),opacity var(--crisp) var(--timed_ledger);}
.chainedCell[data-phased-primitive] .lazy_pattern{max-height:0;opacity:0;}
.chainedCell[data-phased-primitive] .granular_tint{gap:0;padding-block:clamp(0.5rem,1.2vw,0.75rem);}
.chainedCell .stateless-form a{text-transform:uppercase;font-size:0.8125rem;letter-spacing:0.1em;font-weight:600;}
.chainedCell .stateless-form a::after{content:"";position:absolute;left:50%;right:50%;bottom:-0.3rem;height:1px;background:currentColor;transition:left var(--crisp) var(--timed_ledger),right var(--crisp) var(--timed_ledger);}
.chainedCell .stateless-form a:hover::after{left:0;right:0;}
.trim .stateless-form a{padding:0.35rem 0.9rem;border-radius:var(--fusedTrim);}
/* v3 wears its navigation as pills, so the page the visitor is on is the
   filled pill: inside a bordered capsule the accent alone barely reads, and the
   capsule is the shape already there to fill.

   Its label lifts the accent towards the bar's own ink. The accent is set
   against the page, not against a pill sunk into the bar, and on the dark
   palettes it lands a shade below the labels beside it — the current page read
   as the dimmest one in the row. The mix moves it whichever way the bar is
   lit: lighter on a dark ground, deeper on a light one. */
.trim .stateless-form a[aria-current="page"]{font-weight:500;color:color-mix(in srgb,var(--broadCollection) 65%,var(--optimal_screen));}
.rightArticle{display:none;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;cursor:pointer;}
.rightArticle .lateral-sprite{display:none;}
.rightArticle[aria-expanded="true"] .clean_provider{display:none;}
.rightArticle[aria-expanded="true"] .lateral-sprite{display:inline-flex;}
.chainedCell .stateless-form{justify-content:center;}
.trim{border-bottom:1px var(--master) var(--absoluteRoster);}
/* The pill carries its own padding, so the bar around it sits tighter than the
   shared bar: with both at full size the bar ran a fifth taller than its
   neighbours. */
.trim .ranked-bar{padding-block:clamp(0.5rem,1.2vw,0.75rem);}
.trim .stateless-form{border:var(--upper) var(--master) var(--deepNav);border-radius:var(--fusedTrim);padding:0.375rem 1.25rem;gap:1.25rem;}
/* One height for the bar and the spacer that holds its place, and now for the
   hero's floor as well: the runtime measures the bar and writes the result
   here, so a page pays back exactly the space the bar took. 5rem is what a page
   whose script never ran falls back to. The measurement is taken on the bar at
   rest — the runtime skips it while the bar is compacted (site-js.ts) — because
   this bar builds its own resting height out of this variable, and a value read
   off the compacted bar would pin the resting one at the compacted height. */
:root{--richPopover:5rem;--bar:var(--primary);}
.inferred-gauge{height:var(--richPopover);}
.regional{color:var(--foreground);transition:background var(--crisp) var(--timed_ledger),backdrop-filter var(--crisp) var(--timed_ledger),box-shadow var(--crisp) var(--timed_ledger);}
.regional .ranked-bar{min-height:var(--richPopover);padding-block:0;align-items:stretch;transition:min-height var(--crisp) var(--timed_ledger);}
.regional .rightArticle{align-self:center;}
.hub{display:inline-flex;align-items:center;gap:0.75rem;text-transform:uppercase;transition:opacity var(--crisp) var(--timed_ledger);}
.hub:hover{opacity:0.8;}
.sideStage{font-weight:var(--segmentedLayer,600);letter-spacing:var(--bundledFlyout,-0.01em);}
.binaryChrome{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:2rem;height:2rem;flex-shrink:0;color:var(--primary);}
.binaryChrome svg{width:100%;height:100%;}
.regional .sidebar{align-self:stretch;align-items:stretch;}
.regional .stateless-form{gap:0;align-items:stretch;}
.regional .stateless-form a{color:var(--foreground);display:flex;align-items:center;position:relative;overflow:hidden;padding:0 2rem;border-radius:0;font-size:1rem;font-weight:500;letter-spacing:0.05em;text-transform:uppercase;transition:padding var(--crisp) var(--timed_ledger),font-size var(--crisp) var(--timed_ledger),color var(--crisp) var(--timed_ledger);}
.regional .stateless-form a::before{content:"";position:absolute;inset:0;background:var(--primary);opacity:0;transition:opacity var(--crisp) var(--timed_ledger);}
.regional .stateless-form a:hover::before{opacity:0.1;}
.regional .stateless-form a:hover,.regional .stateless-form a[aria-current="page"]{color:var(--bar);}
.regional .stateless-form a[aria-current="page"]{font-weight:800;}
.regional .stateless-form a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--bar);transition:bottom var(--crisp) var(--timed_ledger);}
/* The scrolled bar states its ground as a colour, not as the background
   shorthand: a theme may wash the bar with a gradient (see theme-chrome.ts),
   and the shorthand would drop that image the moment the page moved. */
.regional[data-phased-primitive]{background-color:color-mix(in srgb,var(--optical_dashboard) 82%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px var(--master) var(--absoluteRoster);}
.regional[data-phased-primitive] .ranked-bar{min-height:3.5rem;}
.regional[data-phased-primitive] .stateless-form a{padding:0 1rem;font-size:0.875rem;}
.regional[data-phased-primitive] .stateless-form a[aria-current="page"]::after{bottom:0.55rem;}
.regional[data-phased-primitive] .stateless-form a:hover::before{opacity:0;}
.resilient_dropdown .ranked-bar{gap:clamp(1rem,3vw,2.5rem);padding-block:clamp(0.6rem,1.2vw,0.9rem);}
.resilient_dropdown .sidebar{color:var(--background);}
.derived_slider{display:inline-flex;align-items:center;gap:0.75rem;min-width:0;color:var(--background);}
/* The mark takes the bar's own ink, not the accent: the bar is the inverted
   ground, and a palette whose accent is its page ink (Linen Ink) painted the
   initials and their frame the bar's own colour — a black square on black. */
.seamlessToolbar{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;flex-shrink:0;border:var(--upper) var(--master) var(--background);color:var(--background);font-size:0.9375rem;font-weight:700;}
/* A grid whose one column is sized by the name alone: the strapline below
   contributes no width (width:0) and then stretches to the column, so it is
   always exactly as wide as the name — room for a trade, never for a sentence. */
.typedCrumb{display:grid;grid-template-columns:minmax(0,max-content);min-width:0;line-height:1.15;}
.procedural-timeline{text-transform:uppercase;}
/* The strapline is capped, not merely truncated: overflow alone ellipsizes
   only once the bar has run out of room, so a niche written as a whole
   sentence set the lockup's own width first and pushed the navigation off the
   end of the bar. The cap is the name's width (see the grid above) rather
   than a count of characters: twenty characters of spaced capitals fell short
   of a two-word trade under a longer name and cut it mid-word. */
.phased-paper{font-family:var(--evented-lightbox,inherit);font-size:0.6875rem;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;opacity:0.65;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:0;min-width:100%;}
.resilient_dropdown .bitwisePad,.resilient_dropdown .bitwisePad:hover{box-shadow:none;border-color:transparent;}
.resilient_dropdown .bitwisePad:hover{background:transparent;color:var(--background);border-color:var(--background);opacity:1;}
.resilient_dropdown .stateless-form{counter-reset:mobileShell;align-items:center;gap:0;}
.resilient_dropdown .stateless-form a{display:inline-flex;align-items:baseline;gap:0.45rem;padding:1.15rem clamp(0.9rem,1.8vw,1.5rem);color:color-mix(in srgb,var(--background) 76%,transparent);text-transform:uppercase;font-size:0.8125rem;letter-spacing:0.08em;font-weight:600;transition:color var(--crisp) var(--timed_ledger);}
.resilient_dropdown .stateless-form a::after{content:"";position:absolute;left:0;top:0.25rem;bottom:0.25rem;border-left:var(--upper) var(--master) var(--background);opacity:0.32;}
.resilient_dropdown .stateless-form a:first-child::after{display:none;}
.resilient_dropdown .stateless-form a::before{counter-increment:mobileShell;content:counter(mobileShell,decimal-leading-zero);color:color-mix(in srgb,var(--background) 55%,transparent);font-size:0.8125rem;font-weight:700;transition:color var(--crisp) var(--timed_ledger);}
/* The accent lifted towards the bar's own ink. This bar is inverted, so the
   accent is set against the page rather than against the ground it lands on
   here, and the marked step read dimmer than the label beside it. */
.resilient_dropdown .stateless-form a:hover::before,.resilient_dropdown .stateless-form a[aria-current="page"]::before{color:color-mix(in srgb,var(--primary) 48%,var(--background));}
/* v6 — the divided bar. The row is the page's own width rather than the shell's
   (capped so it does not stretch on a very wide screen), and every cell in it
   stands the full height of the bar with a rule between it and the next: that
   frame is the whole layout, so the edge under the bar and the rule beside the
   brand are drawn heavier than a hairline while the rules between the pages
   stay at the theme's own width. */
.converged_layout{border-bottom:2px var(--master) var(--deepNav);}
.signed{display:flex;align-items:stretch;width:min(90rem,100%);margin-inline:auto;}
.unifiedRouter{display:flex;align-items:center;gap:0.75rem;min-width:0;padding:0.9rem clamp(1rem,2vw,1.5rem);}
/* The signature's own ink where the palette names one (logotype-ink.ts); the
   bar's colour everywhere else. */
.unifiedRouter .strict-wave{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase;letter-spacing:0.14em;font-size:0.875rem;line-height:1.15;color:var(--plotted-hook,inherit);}
.converged_layout .sidebar{flex:1;align-items:stretch;gap:0;}
.converged_layout .stateless-form{flex:1;flex-wrap:nowrap;align-items:stretch;gap:0;}
/* Every rule in this bar is drawn by the cell that follows it, on its leading
   edge, so no seam is ever drawn twice: the brand cell states none of its own
   and the line after the logotype belongs to the first page, drawn heavier
   because that seam separates the logotype from the navigation rather than one
   page from the next. The enquiry cell needs none — its fill is the seam. */
.converged_layout .stateless-form a{display:inline-flex;align-items:center;border-radius:0;padding:0 clamp(0.9rem,1.6vw,1.25rem);border:var(--upper) var(--master) var(--deepNav);border-width:0;border-inline-start-width:var(--upper);text-transform:uppercase;letter-spacing:0.2em;font-size:0.7rem;font-weight:500;transition:background var(--crisp) var(--timed_ledger),color var(--crisp) var(--timed_ledger);}
.converged_layout .stateless-form a:first-child{border-inline-start-width:2px;}
/* The seam after the last page is the one no cell owns, so the page itself
   closes the row. It cannot sit on the row's own end edge: the row takes the
   free width of the bar, and the rule would land at the far end of that space
   rather than beside the last label.

   Only the width is stated, here and in every rule below: the colour of a rule
   inside the bar belongs to the theme, and the two whose navigation stands on
   the page's ink repaint it because their own border token is the ground they
   are painted on. A shorthand would name that token again and paint the seam
   in the colour of the bar. */
.converged_layout .stateless-form a:last-child{border-inline-end-width:var(--upper);}
/* A tone deeper into the bar's own ground, not the shared hover fill: that
   token is a muted tint of the page, and on a bar whose ground is already that
   tint — half the themes — the cell lit up by nothing at all. Mixing the bar's
   ink into the bar's ground moves whichever way the bar is lit, and the label
   keeps its ink, so the pair stays the one that was measured. */
.converged_layout .stateless-form a:hover{background:color-mix(in srgb,var(--optimal_screen) 14%,var(--optical_dashboard));}
/* The cell fills instead of the label tinting: a label set in the accent inside
   a framed cell reads as a cell that failed to fill, and the pair here is the
   bar's own two colours, which no palette can bring together. */
.converged_layout .stateless-form a[aria-current="page"]{background:var(--optimal_screen);color:var(--optical_dashboard);}
/* The enquiry cell answers the pointer with colour and nothing else. It is a
   cell in a frame rather than a button standing on a page: the shared hover
   lifts a button by a pixel and drops a shadow under it, and on a light bar
   that lift showed as a pale strip below the cell where the bar came through.
   The lift, the fade and both shadows are declared by tokens, so they are
   switched off by naming those tokens here rather than by overruling the rule
   that reads them — and the pair the cell fills with is the bar's own ink and
   ground, the same fill the page's cell already carries. Each theme's state
   layer is left alone: a tint or a wipe is a change of colour, which is all
   this cell is asked to do. */
.dual-aside{display:inline-flex;align-items:center;gap:0.5rem;padding:0 clamp(1.1rem,2.2vw,1.75rem);border-radius:0;text-transform:uppercase;letter-spacing:0.2em;font-size:0.7rem;font-weight:500;white-space:nowrap;--masked_deck:none;--cached:1;--plain_banner:none;--preciseAdapter:none;--flexible-plugin:var(--optimal_screen);--dimmed:var(--optical_dashboard);}

.dual-aside .elasticFooter{width:0.9rem;height:0.9rem;}
.converged_layout .rightArticle{margin-inline-start:auto;width:3.5rem;height:auto;border:0;border-inline-start:2px var(--master) var(--deepNav);border-radius:0;}
/* The bar compacts once the page has moved, the way v4 does: the runtime
   writes the stuck hook onto the header past 100px of scroll and everything
   below it is CSS. Only the brand cell is touched, because only the brand cell
   has a height of its own — every other cell stretches to the row, so the
   logotype's padding and the mark beside it are what the row measures. The
   type is left where it is: the labels are already at 0.7rem with 0.2em of
   tracking, and a bar that also shrinks its own capitals reads as a different
   bar rather than as the same one out of the way. The spacer keeps the resting
   height, so the page underneath does not jump when the bar contracts. */
.unifiedRouter{transition:padding var(--crisp) var(--timed_ledger);}
.unifiedRouter .pairedParcel{transition:width var(--crisp) var(--timed_ledger),height var(--crisp) var(--timed_ledger);}
.converged_layout[data-phased-primitive] .unifiedRouter{padding-block:0.45rem;}
.converged_layout[data-phased-primitive] .unifiedRouter .pairedParcel{width:1.75rem;height:1.75rem;}
.converged_layout[data-phased-primitive] .unifiedRouter .inline{width:1rem;height:1rem;}
/* A disc is as wide as it is tall: the button's minimum height is the
   control height, so the disc takes that as its width too instead of a
   halved horizontal padding that left it taller than wide. */
.packedKeypad{padding:0;width:calc(var(--wrap) - 0.25rem);height:calc(var(--wrap) - 0.25rem);min-height:0;flex:0 0 auto;border-radius:50%;box-shadow:none;}
/* The disc takes no elevation at either state, which is a correction rather
   than a plainer reading. Every theme's button shadow is drawn for a rectangle
   — a bar inset along the bottom edge, a hard slab dropped off a corner — and
   a shadow clips to the border radius, so on a circle those land as a dark
   crescent under the rim or as a second disc shunted behind it. What the disc
   does under the pointer is stated per theme in theme-interactions.ts, in
   shapes a circle actually has: a halo, a rim, an inversion. */
.packedKeypad:hover{box-shadow:none;}
.packedKeypad .elasticFooter{width:1.1rem;height:1.1rem;}
/* The label travels with the disc but is only shown in the narrow panel
   (below), where the panel stretches every button to its width and a disc
   stretched into an oval with one glyph afloat in it read as a mistake. */
.sparkline{display:none;}
/* Nothing in the bar wraps: the name, the links and the call to action are
   each one line, so a bar that has run out of room overflows and is caught by
   the breakpoint below rather than folding into two rows first. */
.shaded-scope .strict-wave,.shaded-scope .stateless-form a,.shaded-scope .bitwisePad{white-space:nowrap;}
/* The burger arrives at 1100px rather than a laptop's 900: the numbered and
   the uppercase navigations (v4, v5) with a call to action beside them need
   that much, and a bar that folded its links onto a second row in between
   read as broken rather than compact. */
@media(max-width:1100px){
.ranked-bar,.granular_tint{flex-direction:row;align-items:center;justify-content:space-between;}
/* On a narrow bar the stack is a row and the brand is the only mark on it, so
   there is nothing to fold: the links live in the panel behind the burger. */
.chainedCell[data-phased-primitive] .lazy_pattern{max-height:none;opacity:1;}
.rightArticle{display:inline-flex;}
.sidebar{display:none;position:absolute;left:0;right:0;top:100%;z-index:20;flex-direction:column;align-items:stretch;gap:0.5rem;padding:1rem;background:var(--optical_dashboard);border-top:var(--upper) var(--master) var(--deepNav);border-bottom:var(--upper) var(--master) var(--deepNav);}
.sidebar[data-inline-plugin]{display:flex;}
.stateless-form{flex-direction:column;gap:0.25rem;}
.stateless-form a{padding:0.65rem 0.25rem;}
.trim .stateless-form{background:transparent;border:none;padding:0;gap:0.25rem;}
.stateless-form a::after{display:none;}
:root{--richPopover:4rem;}
.regional[data-phased-primitive] .ranked-bar{min-height:3.25rem;}
.regional .stateless-form{gap:0.25rem;}
.regional .sidebar{align-self:auto;align-items:stretch;background:var(--optical_dashboard);}
.regional .stateless-form a,.regional[data-phased-primitive] .stateless-form a{padding:0.65rem 0.25rem;font-size:0.9375rem;}
.regional .stateless-form a[aria-current="page"]::after,.regional[data-phased-primitive] .stateless-form a[aria-current="page"]::after{display:block;bottom:0.35rem;}
.resilient_dropdown .sidebar{background:var(--justify_ruler);border-color:var(--background);}
.resilient_dropdown .stateless-form{gap:0.25rem;}
.resilient_dropdown .stateless-form a{padding:0.65rem 0.25rem;}
/* The divided bar folds: the cells become the rows of the dropdown, so the
   rules that separated them turn from vertical to horizontal. */
.signed{align-items:center;}
.converged_layout .sidebar{padding:0;gap:0;border-top-width:2px;}
.converged_layout .stateless-form{gap:0;}
.converged_layout .stateless-form a,.converged_layout .stateless-form a:first-child,.converged_layout .stateless-form a:last-child{padding:0.9rem 1.25rem;border-width:0;border-block-end-width:var(--upper);}
.dual-aside{justify-content:center;padding:0.9rem 1.25rem;}
.converged_layout .rightArticle{height:2.75rem;}
.sidebar .bitwisePad{width:100%;}
.sidebar .packedKeypad{width:100%;height:auto;min-height:calc(var(--wrap) - 0.25rem);border-radius:var(--federatedLogo);padding:0.5rem var(--tunnel);gap:0.5rem;}
.sidebar .sparkline{display:inline;}
}.linear_details{padding:calc(var(--kinetic-tip) * 1.35) 0 calc(var(--kinetic-tip) * 0.85);}
.hostedCapsule{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.5rem;}
/* A word longer than the measure breaks rather than running out of the
   column: display type multiplied by a theme's heading contrast and scale
   leaves room for about seventeen characters here, and trade copy writes
   longer words than that. The same guard runs on every hero headline. */
.hostedCapsule h1,.hostedCapsule h2{font-size:calc((1rem + (clamp(2.5rem,7vw,5rem) - 1rem) * var(--striped)) * var(--draftedField));line-height:1.05;margin:0;max-width:16ch;overflow-wrap:break-word;}
.hostedCapsule .fallback-lever{margin-inline:auto;}
/* The badge's own ink, not the accent: half the themes fill the badge with
   the accent, and an accent glyph on an accent ground shows nothing. */
.twinSequence .elasticFooter{width:1rem;height:1rem;color:currentColor;}
.contextual-registry{border-radius:var(--fusedTrim);}
.liquid-tray{border-radius:var(--fusedTrim);}
.wireless_mesh{border-radius:var(--inferredQueue);}
.sorted-stamp{border-radius:var(--inferredQueue) var(--inferredQueue) var(--inferredQueue) 0;}
/* A diluted ground cannot keep the badge's own ink. The line badge is written
   for the full ground; at 10% it is really sitting on the page, and the ink of
   a badge whose ground is the page's ink — white on high-clarity — came out
   white on a pale wash. It takes the page's ink instead; the inverted ground
   overrides it later, as it does every badge.
   The ghost badge keeps only a trace of that ground: at 35% the wash read as a
   grey slab in every theme whose badge ground is the ink. At 10% the theme is
   still legible in it and the accent outline does the stating. */
.slim{background:color-mix(in srgb,var(--static-socket) 10%,transparent);border-color:var(--primary);color:var(--foreground);}
.slim .elasticFooter{color:var(--primary);}
.universal_canvas{background:color-mix(in srgb,var(--static-socket) 10%,transparent);color:var(--foreground);letter-spacing:var(--passive_heading);font-size:0.75rem;}
.universal_canvas::before{content:"";width:2rem;height:2px;background:var(--primary);flex:0 0 auto;}
.pipedPrimitive{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem;list-style:none;margin:0.5rem 0 0;padding:0;font-size:0.9375rem;}
.pipedPrimitive li{display:flex;align-items:center;gap:0.5rem;}
.pipedPrimitive .elasticFooter{width:1.1rem;height:1.1rem;color:var(--primary);}
.inferred_composer{padding:calc(var(--kinetic-tip) * 1.15) 0;}
/* The visual half is stretched, not centred: the photo takes the copy's full
   height instead of sitting in a 4/3 box that a tall column dwarfs. */
.fallback{display:grid;grid-template-columns:0.95fr 1.05fr;gap:clamp(2.5rem,5vw,4rem);align-items:stretch;}
/* A dash opens the label, the way the line badge opens v6's. */
.tactile_gutter{display:flex;align-items:center;gap:0.75rem;}
.tactile_gutter::before{content:"";width:2rem;height:2px;background:var(--primary);flex:0 0 auto;}
.remote-emblem{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:1.25rem;}
/* Sized for the half-width column it sits in, not for the shell: the display
   ceiling the centred heroes use is multiplied by the theme's heading contrast
   and scale, and high-clarity's pair (1.4 x 1.12) turned it into four lines
   towering over the photo. */
.remote-emblem h1,.remote-emblem h2{font-size:calc((1rem + (clamp(2rem,4.5vw,3rem) - 1rem) * var(--striped)) * var(--draftedField));line-height:1.1;margin:0;overflow-wrap:break-word;}
.pure{margin:0;display:flex;}
.pure img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--constantMedia);display:block;box-shadow:var(--fluid-sparkline);}
.pooled{aspect-ratio:4/3;border-radius:var(--drafted-tip);background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 18%,transparent),color-mix(in srgb,var(--primary) 4%,transparent));border:var(--upper) var(--master) var(--contextual);}
.screen{padding:var(--kinetic-tip) 0 calc(var(--kinetic-tip) * 0.65);position:relative;overflow:hidden;isolation:isolate;}
/* The accent as light behind the display type: a wash coming off the top left
   where the first letter carries the only colour in the layout, and a low rise
   of the same accent under the closing row. Every stop is mixed with
   transparent so the ground under the block still reads through it, and the
   stack is isolated on the negative layer so it stays behind the type. */
.screen::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(80% 70% at 0% -5%,color-mix(in srgb,var(--primary) 30%,transparent) 0%,transparent 66%),linear-gradient(0deg,color-mix(in srgb,var(--primary) 18%,transparent) 0%,transparent 45%);}
/* Narrower than the shell it sits in: display type set to a wide theme's full
   measure runs as one endless line on a large monitor. */
.saturated{max-width:64rem;}
.mainThumb{font-size:calc((1rem + (clamp(2.5rem,7vw,4.5rem) - 1rem) * var(--striped)) * var(--draftedField));line-height:0.95;margin:0 0 clamp(2rem,4vw,3rem);text-transform:uppercase;word-break:break-word;}
/* The display type opens on the accent: the first letter is the only mark of
   colour in a hero that is otherwise one block of ink. */
.mainThumb::first-letter{color:var(--primary);font-weight:max(var(--tethered-cursor),800);}
/* A thin rule divides the display type from the closing row, and the accent
   runs along its first half before it fades back into the hairline. */
.coupled_region{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;border-top:var(--upper) var(--master) var(--contextual);padding-top:clamp(1.5rem,3vw,2.25rem);position:relative;}
.coupled_region::before{content:"";position:absolute;inset-inline:0;top:calc(var(--upper) * -1);height:2px;background:linear-gradient(90deg,var(--primary) 0%,color-mix(in srgb,var(--primary) 35%,transparent) 35%,transparent 72%);}
/* The theme's card padding scaled up rather than replaced: a hero card carries
   one message on an open ground and the tight density of a grid card leaves its
   type sitting on the edges. */
.inferred{padding:calc(var(--kinetic-tip) * 1.35) 0;position:relative;overflow:hidden;isolation:isolate;}
/* The photo is a ground rather than a picture: the veil below darkens it with
   the page's ink and keeps it strongest at the edges. The stack is isolated so
   it does not fall behind the opaque page ground the body paints. The blurred
   shapes below stay on the negative layer and so are covered whenever a photo
   resolves: they are the ground this layout had before the photo existed and
   are what it falls back to without one. */
.compressedSwatch{position:absolute;inset:0;margin:0;z-index:0;}
.inferred .raised-plugin{position:relative;z-index:1;}
/* Edge to edge, like the panel photo of v5: a photo standing as the ground of
   a full-width hero is not a picture on the page, and the shared media frame —
   a hairline and the theme's media radius — cut the page ground back in at all
   four corners, under a veil that is square. */
.compressedSwatch img{width:100%;height:100%;object-fit:cover;display:block;border:0;border-radius:0;}
.compressedSwatch::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--foreground) 78%,transparent) 0%,color-mix(in srgb,var(--foreground) 52%,transparent) 45%,color-mix(in srgb,var(--foreground) 78%,transparent) 100%);}
.inferred::before{content:"";position:absolute;top:-15%;right:-10%;width:45vw;height:45vw;border-radius:50%;background:var(--symmetric);filter:blur(90px);z-index:-1;}
.inferred::after{content:"";position:absolute;bottom:-15%;left:-10%;width:35vw;height:35vw;border-radius:50%;background:var(--symmetric);filter:blur(80px);z-index:-1;}
.boxed_swatch{max-width:min(100%,56rem);margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.25rem;padding:var(--lexicalThread);padding-block:calc(var(--lexicalThread) * 2.4);padding-inline:calc(var(--lexicalThread) * 1.5);border:var(--upper) var(--master) var(--contextual);border-radius:var(--drafted-tip);background:var(--notchedCarousel);box-shadow:var(--fluid-sparkline);}
.boxed_swatch h1,.boxed_swatch h2{font-size:calc((1rem + (clamp(2.25rem,6vw,3.75rem) - 1rem) * var(--striped)) * var(--draftedField));line-height:1.1;margin:0;overflow-wrap:break-word;}
/* Split down the middle rather than inside a shell: the photo owns the whole
   right half edge to edge and the copy keeps the page gutter on its left so it
   still lines up with every block above and below. The gutter is measured off
   the column — a padding percentage resolves against it and the halves are
   even so it is half the block — rather than off the viewport: 100vw counts a
   scrollbar the shell does not. Both shell adjustments are read too. The
   rhythm modifier on the wrapper moves the shell by as much as 12rem.
   The 8rem ceiling is what keeps the copy a column rather than a strip: the
   alignment term grows with the viewport, and a theme whose shell max is a
   percentage rather than a length resolves it against the half — so it asked
   for half the column as a left margin and left the copy a sliver running
   into the photo. Past that ceiling the copy stops tracking the shell and
   keeps its measure instead. */
.straightBar{padding:0;border-radius:0;}
/* The one hero that grows with its block rather than sitting centred in it.
   Every other variant carries padding of its own, so the height the wrapper's
   viewport floor adds is spent above and below the copy. This one is padding:0
   and edge to edge — its photo column stretches and the image is height:100% —
   so left at content height it would leave a band of inverse ground over the
   photo and another under it. */
.leanTree{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;flex:1;}
.onboard-hub{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:1.25rem;padding-block:calc(var(--kinetic-tip) * 1.25);padding-inline-start:min(max(calc((var(--plugin) + var(--spacedTitle,0rem)) / 2),calc(100% - (var(--series) + var(--computed-wire,0rem)) / 2)),8rem);padding-inline-end:clamp(2rem,5vw,4rem);}
.flatTrigger{margin:0;display:flex;align-self:stretch;}
.flatTrigger img{width:100%;height:100%;object-fit:cover;display:block;border:0;border-radius:0;}
/* Sized for the half column it sits in, not for the shell: the centred
   heroes' display ceiling multiplied by a theme's heading contrast and
   scale set a word wider than the copy's measure, and it ran out past the
   end padding onto the photo. The break is the last guard for a single
   long word in a narrow column. */
.onboard-hub h1,.onboard-hub h2{font-size:calc((1rem + (clamp(2rem,4vw,3.25rem) - 1rem) * var(--striped)) * var(--draftedField));line-height:1.05;margin:0;max-width:16ch;overflow-wrap:break-word;}
.trailing{border-color:var(--ported);}
.anchor{padding:calc(var(--kinetic-tip) * 1.15) 0;position:relative;overflow:hidden;isolation:isolate;}
/* The accent as light rather than as a fill: two wide radial washes — one
   behind the stat card and one under the copy — over a diagonal drift. Every
   stop is mixed with transparent so the ground under the block still
   reads through it — the page ground as much as an alternate one or a
   texture. The stack is isolated and sits on the negative layer the way v4's
   blurred shapes do so it stays behind the copy and never falls under the
   page's opaque ground. */
.anchor::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(125% 100% at 88% -10%,color-mix(in srgb,var(--primary) 38%,transparent) 0%,transparent 68%),radial-gradient(95% 90% at -5% 105%,color-mix(in srgb,var(--primary) 22%,transparent) 0%,transparent 64%),linear-gradient(155deg,color-mix(in srgb,var(--primary) 13%,transparent) 0%,transparent 55%);}
.thin_lockup{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);gap:clamp(2.5rem,5vw,4rem);align-items:center;}
.chartedRow{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(1.5rem,2.5vw,2.25rem);}
/* Sized for the column rather than the shell: the display ceiling multiplied
   by a theme's heading contrast and scale reached 93px in a 550px column. */
.chartedRow h1,.chartedRow h2{font-size:calc((1rem + (clamp(2rem,4.5vw,3rem) - 1rem) * var(--striped)) * var(--draftedField));line-height:1.1;margin:0;overflow-wrap:break-word;}
/* A short accent rule closes the headline. */
.chartedRow h1::after,.chartedRow h2::after{content:"";display:block;width:4rem;height:3px;margin-top:clamp(1rem,2vw,1.5rem);background:var(--primary);}
.gatedDetails{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--stretch);padding:var(--lexicalThread);border:var(--capped-header) var(--master) var(--contextual);border-radius:var(--drafted-tip);box-shadow:var(--fluid-sparkline);background:linear-gradient(150deg,color-mix(in srgb,var(--primary) 22%,var(--payload)) 0%,color-mix(in srgb,var(--payload) 94%,var(--foreground)) 68%);}
/* The figure is quoted inside a card cell barely wider than it: the standalone
   stat block's own ceiling overflowed the moment a theme multiplied it. */
.gatedDetails .logicalThumbnail{font-size:calc((1rem + (clamp(1.5rem,3vw,2rem) - 1rem) * var(--striped)) * var(--draftedField));}
@media(max-width:768px){
.fallback,.leanTree,.thin_lockup{grid-template-columns:1fr;}
.onboard-hub{padding-inline:var(--plugin);}
.flatTrigger img{height:auto;aspect-ratio:16/9;}
.fallback{align-items:center;}
.remote-emblem h1,.remote-emblem h2{font-size:calc((1rem + (clamp(2.25rem,7vw,3rem) - 1rem) * var(--striped)) * var(--draftedField));}
.coupled_region{flex-direction:column;align-items:flex-start;}
.gatedDetails{grid-template-columns:1fr;}
}
@media(max-width:640px){
.hostedCapsule{gap:1.25rem;}
.hostedCapsule h1,.hostedCapsule h2{font-size:calc((1rem + (clamp(2.25rem,10vw,2.75rem) - 1rem) * var(--striped)) * var(--draftedField));}
.mainThumb{font-size:calc((1rem + (clamp(2.25rem,10vw,2.75rem) - 1rem) * var(--striped)) * var(--draftedField));margin-bottom:1.5rem;}
.remote-emblem h1,.remote-emblem h2,.onboard-hub h1,.onboard-hub h2,.chartedRow h1,.chartedRow h2,.boxed_swatch h1,.boxed_swatch h2{font-size:calc((1rem + (clamp(2rem,9vw,2.5rem) - 1rem) * var(--striped)) * var(--draftedField));}
.pipedPrimitive{gap:0.75rem 1.25rem;font-size:0.9rem;}
.linear_details{padding:calc(var(--kinetic-tip) * 0.85) 0 calc(var(--kinetic-tip) * 0.6);}
.inferred_composer{padding:calc(var(--kinetic-tip) * 0.85) 0;}
.screen{padding:calc(var(--kinetic-tip) * 0.75) 0 calc(var(--kinetic-tip) * 0.55);}
.inferred{padding:calc(var(--kinetic-tip) * 0.85) 0;}
.onboard-hub{padding-block:calc(var(--kinetic-tip) * 0.85);}
.anchor{padding:calc(var(--kinetic-tip) * 0.85) 0;}
}
/* v7's video ground: the clip, or its poster alone, sits under a veil washed
   off the page ink, and the dock card stands on the page colour — the
   opposite tone, so a light theme gets a light card on a dark veil and a
   dark theme a dark card on a light one. Standing on the page rather than
   on the inverted ground is what lets the accent through: primary on
   background is the one pair every palette guarantees, so the ledger's
   indices and the theme's own CTA treatment read in all of them, where on
   the inverted ground an accent that is the ink (Linen Ink) vanished. The
   card is dense enough for its copy to hold over the footage while the clip
   still comes through as movement and colour rather than detail; without
   backdrop-filter the same ground still reads. The veil deepens towards the
   foot, where the dock sits, and stays thin above it so the footage has a
   frame to move in. The hero clips its footage with overflow:clip rather
   than hidden: hidden makes it a scroll container, and the ledger's sticky
   offset would then be measured against it and never move. */
.served{position:relative;isolation:isolate;overflow:clip;min-height:clamp(32rem,46vw,46rem);display:flex;align-items:flex-end;padding:calc(var(--kinetic-tip) * 1.6) 0 calc(var(--kinetic-tip) * 0.7);}
.layout,.coarse_provider{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;margin:0;z-index:0;pointer-events:none;}
.coarse_provider img{width:100%;height:100%;object-fit:cover;display:block;border:0;border-radius:0;}
.foldedStripe{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,color-mix(in srgb,var(--foreground) 30%,transparent),color-mix(in srgb,var(--foreground) 72%,transparent));}
.served .raised-plugin{position:relative;z-index:2;}
/* The frame's height comes off its width, never the viewport: the storybook
   sizes its preview to the document's own scroll height, and a vh-based
   minimum would grow with every measurement.
   The dock: copy on the left, the ledger on the right, a hairline between.
   Bottom-aligned columns so the actions and the last claim share a baseline. */
.syncedCollection{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(16rem,0.6fr);align-items:end;gap:0 clamp(2.5rem,5vw,4.5rem);padding:clamp(2.25rem,5vw,3.75rem);border-radius:var(--drafted-tip);background:color-mix(in srgb,var(--notchedCarousel) 90%,transparent);border:var(--upper) var(--master) var(--contextual);box-shadow:var(--fluid-sparkline);backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);}
.tonal{display:flex;flex-direction:column;align-items:flex-start;gap:1.5rem;min-width:0;}
.tonal h1,.tonal h2{font-size:calc((1rem + (clamp(2.25rem,5.5vw,4rem) - 1rem) * var(--striped)) * var(--draftedField));line-height:1.02;margin:0;max-width:min(16ch,100%);overflow-wrap:break-word;}
.tonal .fallback-lever{max-width:38rem;margin:0;}
.tonal .liveGauge{margin-top:0.5rem;}
.joined{align-self:stretch;padding-left:clamp(1.5rem,3vw,2.5rem);border-left:var(--upper) var(--master) var(--ported);}
.pipedMedia{list-style:none;margin:0;padding:0;position:sticky;top:clamp(1rem,3vw,2rem);}
.pipedMedia li{display:flex;align-items:baseline;gap:1rem;padding:1.1rem 0;border-top:var(--upper) var(--master) var(--ported);font-size:0.9375rem;line-height:1.4;}
.pipedMedia li:first-child{border-top:0;padding-top:0;}
.pipedMedia li:last-child{padding-bottom:0;}
.technical_screen{font-size:0.75rem;font-weight:700;letter-spacing:0.12em;color:var(--primary);flex:0 0 auto;font-variant-numeric:tabular-nums;}
@media(max-width:768px){
.served{min-height:0;padding:calc(var(--kinetic-tip) * 1.1) 0 calc(var(--kinetic-tip) * 0.6);}
.syncedCollection{padding:clamp(1.5rem,6vw,2.25rem);}
.tonal{gap:1.25rem;}
.syncedCollection{grid-template-columns:1fr;gap:2rem 0;}
.tonal h1,.tonal h2{font-size:calc((1rem + (clamp(2rem,8vw,3rem) - 1rem) * var(--striped)) * var(--draftedField));}
.joined{padding:1.5rem 0 0;border-left:0;border-top:var(--upper) var(--master) var(--ported);}
.pipedMedia{position:static;}
.pipedMedia li:first-child{border-top:0;}
}.rich_listing .liquid{display:grid;gap:var(--stretch);}
.generic-element{padding-bottom:1.75rem;border-bottom:var(--upper) var(--master) var(--contextual);}
.discrete-skeleton{display:flex;align-items:center;gap:0.75rem;margin-bottom:0.75rem;}
.discrete-skeleton .elasticFooter{color:var(--primary);}
.generic-element h3{margin:0;font-size:1.25rem;}
.generic-element p{margin:0;opacity:0.75;line-height:var(--served-gauge);}
.parallel .progressiveTable{display:flex;flex-direction:column;gap:1.25rem;}
.turbo-crumb{display:flex;align-items:flex-start;gap:1.5rem;}
.precise-collection{font-size:1.5rem;font-weight:800;color:var(--primary);opacity:0.5;line-height:1.2;flex-shrink:0;min-width:2.25rem;font-variant-numeric:tabular-nums;}
.front-notice h3{margin:0 0 0.375rem;font-size:1.25rem;}
.front-notice p{margin:0;opacity:0.75;line-height:var(--served-gauge);max-width:60ch;}
.robustWire .repeater{display:grid;gap:var(--stretch);}
.mobile-toast{display:flex;flex-direction:column;gap:0.75rem;}
.mobile-toast h3{margin:0;font-size:1.25rem;}
.mobile-toast p{margin:0;opacity:0.75;line-height:var(--served-gauge);}
.fixed_tab .cyber{display:flex;flex-direction:column;}
.reflectivePackage{display:grid;grid-template-columns:minmax(12rem,0.8fr) 1.6fr;gap:1rem clamp(1.5rem,4vw,3rem);padding:2rem 0;border-top:var(--upper) var(--master) var(--contextual);align-items:start;}
.reflectivePackage:last-child{border-bottom:var(--upper) var(--master) var(--contextual);}
.reflectivePackage h3{margin:0;font-size:1.25rem;}
.reflectivePackage p{margin:0;opacity:0.75;font-size:1.0625rem;line-height:var(--served-gauge);max-width:60ch;}
.quantum .scaled-stamp{display:flex;flex-direction:column;}
.filtered_wire{padding:2.5rem 0;border-top:var(--upper) var(--master) var(--ported);}
.filtered_wire:last-child{border-bottom:var(--upper) var(--master) var(--ported);}
.filtered_wire h3{margin:0 0 0.75rem;font-size:calc((1rem + (clamp(1.375rem,2.5vw,1.75rem) - 1rem) * var(--striped)) * var(--draftedField));}
.filtered_wire p{margin:0;font-size:1.0625rem;line-height:var(--served-gauge);max-width:60ch;opacity:0.85;}
.remote .subtle-index{list-style:none;margin:0;padding:0;display:grid;gap:var(--stretch);}
.smoothPopover{display:flex;gap:1rem;align-items:flex-start;}
.hashed{flex-shrink:0;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--scene);color:var(--primary);display:inline-flex;align-items:center;justify-content:center;}
.hashed .elasticFooter{width:1rem;height:1rem;}
.smoothPopover h3{margin:0 0 0.25rem;font-size:1.0625rem;}
.smoothPopover p{margin:0;opacity:0.75;font-size:0.9375rem;line-height:var(--served-gauge);}
@media(max-width:768px){
.rich_listing .liquid{grid-template-columns:1fr;}
.turbo-crumb{flex-direction:column;align-items:flex-start;gap:1rem;}
.reflectivePackage{grid-template-columns:1fr;gap:1rem;padding:1.5rem 0;}
.filtered_wire{padding:1.75rem 0;}
.remote .subtle-index{grid-template-columns:1fr;}
}
/* The phone: display sizes step down to what a 390px column carries and the
   gaps a two-column layout needed close up; the theme scales block padding. */
@media(max-width:640px){
.reflectivePackage{padding:1.25rem 0;}
.filtered_wire{padding:1.5rem 0;}
}.tightSparkline{padding:clamp(3.5rem,7vw,6rem) 0;}
.tightSparkline .ledger{margin-inline:auto;}
.cell .ledger{max-width:72ch;}
.drafted-chart{margin:0 0 0.5rem;font-size:0.8125rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--primary);}
.pane{font-size:calc((1rem + (clamp(2.25rem,5vw,3.5rem) - 1rem) * var(--striped)) * var(--draftedField));line-height:1.1;margin:0 0 1rem;}
.immutable_sheet{margin:0 0 0.5rem;font-size:0.9375rem;opacity:0.7;}
.immutable_sheet code{font-size:0.875em;background:var(--payload);padding:0.1em 0.4em;border-radius:var(--drafted-tip);}
.normalized{margin:0 0 1.25rem;padding-left:1.25rem;list-style:disc;}
.normalized li{margin:0 0 0.4rem;line-height:var(--served-gauge);}
.normalized li::marker{color:var(--primary);}
.tightSparkline p.immutable_sheet{margin-bottom:0.5rem;}
.tightSparkline .ledger .immutable_sheet+p{margin-top:1.5rem;}
.pad{background:var(--payload);border:var(--capped-header) var(--master) var(--contextual);border-radius:var(--drafted-tip);box-shadow:var(--fluid-sparkline);padding:var(--lexicalThread);}
.simple-container .pad{margin:0 0 1.75rem;}
.simple-container .pad .immutable_sheet{margin:0.25rem 0;}
.ambient-shelf .tethered{text-align:center;max-width:68ch;margin-inline:auto;}
.roundedLibrary{border:none;border-top:var(--upper) var(--master) var(--contextual);width:4rem;margin:2rem auto;}
.saturated-rack .exactPad{column-count:2;column-gap:clamp(2rem,4vw,2.5rem);margin:0 0 1.5rem;}
.ordered_signal .center-skeleton{display:grid;grid-template-columns:minmax(14rem,1fr) 2.6fr;gap:clamp(2rem,5vw,4rem);align-items:start;}
.ordered_signal .banner{position:sticky;top:2rem;}
.ordered_signal .banner .pane{font-size:calc((1rem + (clamp(1.75rem,3vw,2.5rem) - 1rem) * var(--striped)) * var(--draftedField));}
.pulsedAlert{background:var(--payload);border:var(--capped-header) var(--master) var(--contextual);border-radius:var(--drafted-tip);box-shadow:var(--fluid-sparkline);padding:var(--lexicalThread);}
.inner_viewport .pulsedAlert{margin:0 auto 2.5rem;max-width:78ch;}
.inner_viewport .pulsedAlert p{margin-bottom:0.75rem;}
.zoomed_rack .turbo .item{border-top:var(--upper) var(--master) var(--contextual);padding-top:1.75rem;margin-top:1.75rem;}
.zoomed_rack .turbo .item h2{margin-top:0;}
.quick-divider .tactileSparkline{counter-reset:poster;}
.quick-divider .tactileSparkline .tagged{counter-increment:poster;}
.quick-divider .tactileSparkline .tagged h2::before{content:counter(poster,decimal-leading-zero) ". ";color:var(--primary);}
.mirrored_provider .spatial{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;border-bottom:var(--upper) var(--master) var(--contextual);padding-bottom:1.5rem;margin-bottom:2rem;}
.mirrored_provider .spatial .pane{font-size:calc((1rem + (clamp(3rem,8vw,5rem) - 1rem) * var(--striped)) * var(--draftedField));margin:0;}
.mirrored_provider .contain-poster{text-align:right;}
.agileChart{background:var(--notchedCarousel);border:var(--upper) var(--master) var(--contextual);border-radius:var(--holder);padding:var(--lexicalThread);}
.narrow-thumbnail .stitched_provider .agileChart{margin:0 0 1.25rem;}
.narrow-thumbnail .stitched_provider .agileChart h2{margin-top:0;}
@media(max-width:768px){
.saturated-rack .exactPad{column-count:1;}
.ordered_signal .center-skeleton{grid-template-columns:1fr;gap:1.5rem;}
.ordered_signal .banner{position:static;}
.mirrored_provider .contain-poster{text-align:left;}
}
/* The phone: display sizes step down to what a 390px column carries and the
   gaps a two-column layout needed close up; the theme scales block padding. */
@media(max-width:640px){
.tightSparkline{padding:2.5rem 0;}
.pane{font-size:calc((1rem + (clamp(1.875rem,7vw,2.5rem) - 1rem) * var(--striped)) * var(--draftedField));}
.mirrored_provider .spatial .pane{font-size:calc((1rem + (clamp(2.25rem,9vw,3rem) - 1rem) * var(--striped)) * var(--draftedField));}
.saturated-rack .exactPad{column-count:1;}
}.striped_tag{position:relative;min-height:clamp(20rem,45vw,26rem);overflow:hidden;border-radius:0;}.adaptive_board img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;border-radius:0;}.adaptive_board figcaption{display:none;}.isolated-toast{position:relative;display:flex;align-items:flex-end;min-height:clamp(20rem,45vw,26rem);padding:clamp(2rem,4vw,3rem) 0;background:linear-gradient(180deg,color-mix(in srgb,var(--foreground) 82%,transparent) 0%,color-mix(in srgb,var(--foreground) 88%,transparent) 50%,color-mix(in srgb,var(--foreground) 96%,transparent) 100%);color:var(--background);}.isolated-toast h1,.isolated-toast h2{font-size:calc((1rem + (clamp(2rem,5vw,3.5rem) - 1rem) * var(--striped)) * var(--draftedField));margin:0 0 0.5rem;}.isolated-toast p{margin:0;opacity:0.85;max-width:60ch;line-height:var(--served-gauge);}.normalized_terminal{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3rem);align-items:center;}.latent_envelope .routed_pill{order:2;}.routed_pill img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--constantMedia);box-shadow:var(--fluid-sparkline);}.contextualSlab .progressive-capsule{margin:0;}.live-stepper{display:flex;flex-direction:column;gap:clamp(1.75rem,3vw,2.5rem);}.baseline{display:flex;flex-direction:column;gap:clamp(1.75rem,3vw,2.5rem);}.progressive_rack img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--constantMedia);display:block;box-shadow:var(--fluid-sparkline);}.flexSystem .progressive-capsule,.opaque_keypad .progressive-capsule{margin:0;}.externalRibbon{margin-bottom:2.5rem;}.utilityBundle{position:relative;}.spatialEditor img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--constantMedia);display:block;}.distributed_unit{position:absolute;left:clamp(1rem,3vw,1.5rem);bottom:-1.5rem;max-width:26rem;padding:var(--lexicalThread);border-radius:var(--drafted-tip);background:var(--notchedCarousel);border:var(--upper) var(--master) var(--contextual);box-shadow:var(--fluid-sparkline);}.distributed_unit .progressive-capsule{margin:0;}@media (max-width:768px){.normalized_terminal{grid-template-columns:1fr;}.latent_envelope .routed_pill{order:0;}.progressive_rack img{aspect-ratio:16/9;}.distributed_unit{position:static;margin-top:-2rem;margin-inline:1rem;max-width:none;}}
/* The phone: display sizes step down to what a 390px column carries and the
   gaps a two-column layout needed close up; the theme scales block padding. */
@media(max-width:640px){
.isolated-toast{min-height:18rem;padding:1.5rem 0;}
.isolated-toast h1,.isolated-toast h2{font-size:calc((1rem + (clamp(1.75rem,7vw,2.25rem) - 1rem) * var(--striped)) * var(--draftedField));}
.normalized_terminal,.live-stepper,.baseline{gap:1.5rem;}
}.portedPaper{display:flex;flex-direction:column;gap:0.5rem;}
.logicalThumbnail{font-size:calc((1rem + (clamp(2rem,5vw,3.5rem) - 1rem) * var(--striped)) * var(--draftedField));font-weight:800;color:var(--primary);line-height:1.05;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;}
/* The unit steps back to the page's ink; the figure keeps the accent. */
.synthetic_graph{color:var(--foreground);}
.scaled_template{opacity:0.7;font-size:0.9375rem;line-height:1.45;}
.securePopup .targeted-pulse{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));}
.targeted-pulse .portedPaper{padding:0 1.75rem;border-inline-start:var(--upper) var(--master) var(--contextual);}
.targeted-pulse .portedPaper:first-child{border-inline-start:none;padding-inline-start:0;}
.popover .layered{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:var(--stretch);padding:var(--lexicalThread);border-radius:var(--holder);background:var(--notchedCarousel);}
.staged-queue .dual_plugin{text-align:center;display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:var(--stretch);}
.slab .tiledMarquee{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--stretch);}
.workbench{display:flex;flex-direction:column;gap:0.75rem;}
.workbench .logicalThumbnail{font-size:calc((1rem + (clamp(1.75rem,4vw,2.5rem) - 1rem) * var(--striped)) * var(--draftedField));}
.folded .tall_tag{display:flex;flex-direction:column;}
.tall_tag .portedPaper{display:flex;flex-direction:row;align-items:baseline;justify-content:space-between;gap:1.5rem;padding:1.75rem 0;border-top:var(--upper) var(--master) var(--contextual);}
.tall_tag .portedPaper:last-child{border-bottom:var(--upper) var(--master) var(--contextual);}
.tall_tag .logicalThumbnail{font-size:calc((1rem + (clamp(2.5rem,7vw,4.5rem) - 1rem) * var(--striped)) * var(--draftedField));}
.tall_tag .scaled_template{font-size:1.0625rem;opacity:0.8;}
.public .sequential_plate{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;}
.tracker{display:inline-flex;align-items:baseline;gap:0.5rem;padding:0.75rem 1.5rem;border-radius:var(--fusedTrim);border:var(--upper) var(--master) var(--contextual);background:var(--payload);}
.fluidStrip{font-weight:800;color:var(--primary);font-size:1.25rem;font-variant-numeric:tabular-nums;}
.connected-field{opacity:0.75;font-size:0.875rem;}
@media(max-width:768px){
.targeted-pulse,.tiledMarquee,.securePopup .targeted-pulse,.slab .tiledMarquee{grid-template-columns:1fr;}
.targeted-pulse .portedPaper{border-inline-start:none;padding:0;border-top:var(--upper) var(--master) var(--contextual);padding-top:1.25rem;}
.targeted-pulse .portedPaper:first-child{border-top:none;padding-top:0;}
.tall_tag .portedPaper{flex-direction:column;align-items:flex-start;gap:0.5rem;}
}
/* The phone: display sizes step down to what a 390px column carries and the
   gaps a two-column layout needed close up; the theme scales block padding. */
@media(max-width:640px){
.logicalThumbnail{font-size:calc((1rem + (clamp(1.75rem,8vw,2.5rem) - 1rem) * var(--striped)) * var(--draftedField));}
.tall_tag .logicalThumbnail{font-size:calc((1rem + (clamp(2rem,9vw,3rem) - 1rem) * var(--striped)) * var(--draftedField));}
}.coupled_dashboard .root{display:flex;flex-direction:column;gap:2.5rem;position:relative;margin-top:1rem;}
.coupled_dashboard .root::before{content:"";position:absolute;left:1.75rem;top:0.5rem;bottom:0.5rem;width:2px;background:var(--border);}
.coupled_dashboard .scroll-lockup{display:flex;gap:1.75rem;position:relative;}
.coupled_dashboard .functionalQueue{width:3.5rem;height:3.5rem;border-radius:50%;background:var(--notchedCarousel);border:var(--upper) var(--master) var(--contextual);display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:800;color:var(--primary);flex-shrink:0;z-index:1;}
.grip h3{margin:0 0 0.5rem;font-size:1.375rem;}
.grip p{margin:0;opacity:0.75;line-height:var(--served-gauge);max-width:60ch;}
.staged-space .federatedColumn{display:flex;flex-direction:column;}
.staged-space .twinPadding{display:flex;align-items:flex-start;gap:1.5rem;padding:1.75rem 0;border-top:var(--upper) var(--master) var(--contextual);}
.staged-space .twinPadding:last-child{border-bottom:var(--upper) var(--master) var(--contextual);}
/* An ordinal is read, not decorated, so it is dimmed by mixing towards the
   page's ink rather than by spending opacity. Transparency blends towards the
   ground, and on a dark palette the accent at 45% landed at 2.4:1 — below even
   the 3:1 a numeral this size is held to. Both ends of this mix clear 4.5:1
   against the page (palettes.test.ts) and a mix sits between them, so it
   clears it too, on a light palette and a dark one alike. */
.staged-space .functionalQueue{font-size:1.5rem;font-weight:800;color:color-mix(in srgb,var(--primary) 70%,var(--foreground));line-height:1.2;flex-shrink:0;min-width:2.25rem;font-variant-numeric:tabular-nums;}
.private_digest h3{margin:0 0 0.375rem;font-size:1.25rem;}
.private_digest p{margin:0;opacity:0.75;line-height:var(--served-gauge);max-width:60ch;}
.opaque-socket .side-radar{display:grid;gap:var(--stretch);}
.global{text-align:left;}
.opaque-socket .functionalQueue{display:inline-block;padding:0.3rem 0.85rem;border-radius:var(--fusedTrim);background:var(--justify_ruler);color:var(--background);font-size:0.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;margin-bottom:1.25rem;}
.opaque-socket .global h3{margin:0 0 0.75rem;font-size:1.375rem;}
.opaque-socket .global p{margin:0;opacity:0.75;line-height:var(--served-gauge);}
.gauge .vector{display:flex;align-items:flex-start;gap:1.5rem;flex-wrap:wrap;}
.gauge .chained_stencil{flex:1 1 200px;text-align:center;}
.gauge .functionalQueue{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;margin:0 auto 1.25rem;border-radius:50%;border:var(--upper) var(--master) var(--ported);font-size:1.125rem;font-weight:800;}
.gauge .chained_stencil h3{margin:0 0 0.75rem;font-size:1.25rem;}
.gauge .chained_stencil p{margin:0;opacity:0.8;line-height:var(--served-gauge);}
.gauge .raised-monitor{flex-shrink:0;display:flex;align-items:center;padding-top:1.5rem;opacity:0.5;}
.gauge .raised-monitor .elasticFooter{width:1.5rem;height:1.5rem;}
.packed-stepper .detached-collection{display:flex;flex-direction:column;}
.packed-stepper .styled_placard{display:flex;gap:3rem;align-items:center;padding:2.5rem 0;border-top:var(--upper) var(--master) var(--contextual);}
.packed-stepper .styled_placard:last-child{border-bottom:var(--upper) var(--master) var(--contextual);}
.packed-stepper .functionalQueue{font-size:calc((1rem + (clamp(3rem,7vw,5.5rem) - 1rem) * var(--striped)) * var(--draftedField));font-weight:900;line-height:1;color:color-mix(in srgb,var(--primary) 55%,var(--foreground));flex-shrink:0;width:1.6em;font-variant-numeric:tabular-nums;}
.nativePortal h3{margin:0 0 0.75rem;font-size:1.75rem;}
.nativePortal p{margin:0;opacity:0.75;font-size:1.125rem;line-height:var(--served-gauge);max-width:55ch;}
.remote_graph .grid_payload{display:flex;flex-direction:column;gap:1rem;}
.snappedPill{border:var(--upper) var(--master) var(--contextual);border-radius:var(--drafted-tip);background:var(--payload);padding:0;}
.snappedPill summary{display:flex;align-items:center;gap:1.25rem;padding:1.5rem;cursor:pointer;list-style:none;}
.snappedPill summary::-webkit-details-marker{display:none;}
.snappedPill summary h3{margin:0;font-size:1.125rem;}
.container{margin-left:auto;flex-shrink:0;opacity:0.55;transition:transform var(--crisp) var(--timed_ledger);}
.snappedPill[open] .container{transform:rotate(180deg);}
.snappedPill .functionalQueue{width:2.25rem;height:2.25rem;border-radius:50%;background:var(--notchedCarousel);border:var(--upper) var(--master) var(--contextual);display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:800;color:var(--primary);flex-shrink:0;}
.snappedPill p{margin:0;padding:0 1.5rem 1.5rem 4.75rem;opacity:0.75;line-height:var(--served-gauge);max-width:65ch;}
@media(max-width:1024px){
.gauge .raised-monitor{display:none;}
}
@media(max-width:768px){
.coupled_dashboard .root::before{display:none;}
.staged-space .twinPadding{flex-direction:column;gap:0.75rem;}
.gauge .vector{flex-direction:column;}
.packed-stepper .styled_placard{flex-direction:column;gap:1rem;padding:1.75rem 0;align-items:flex-start;}
.snappedPill p{padding-left:1.5rem;}
}
/* The phone: display sizes step down to what a 390px column carries and the
   gaps a two-column layout needed close up; the theme scales block padding. */
@media(max-width:640px){
.packed-stepper .functionalQueue{font-size:calc((1rem + (clamp(2.25rem,9vw,3.5rem) - 1rem) * var(--striped)) * var(--draftedField));}
.packed-stepper .styled_placard{padding:1.25rem 0;}
}.trackedCanvas .soft{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--stretch);}
.systemic-template{display:flex;flex-direction:column;gap:1rem;padding:var(--lexicalThread);transition:transform var(--crisp) var(--timed_ledger),box-shadow var(--crisp) var(--timed_ledger),border-color var(--crisp) var(--timed_ledger);}
.systemic-template:hover{transform:var(--masked_deck);border-color:var(--ported);box-shadow:var(--nativePage);}
.systemic-template .minorChip{width:2.25rem;height:2.25rem;color:var(--primary);opacity:0.35;}
.trailingSprite{display:flex;gap:0.25rem;}
.section{width:1rem;height:1rem;color:var(--primary);fill:var(--primary);}
.systemic-template blockquote,.validatedSymbol blockquote{margin:0;font-size:1.0625rem;line-height:var(--served-gauge);}
.master-spinner{display:flex;align-items:center;gap:0.875rem;margin-top:auto;}
.systemic-template .master-spinner,.minimalHook .master-spinner{padding-top:1rem;border-top:var(--upper) var(--master) var(--contextual);}
.master-spinner h4{margin:0;font-size:1rem;}
.dual-modal{font-size:0.875rem;opacity:0.7;}
.utilitySlate .notched_marker{max-width:44rem;padding-top:2.5rem;border-top:var(--upper) var(--master) var(--contextual);margin-bottom:3rem;display:flex;flex-direction:column;gap:1.25rem;}
.fusedForm{margin:0;font-size:calc((1rem + (clamp(1.5rem,3.5vw,2.125rem) - 1rem) * var(--striped)) * var(--draftedField));line-height:1.4;font-weight:600;letter-spacing:-0.01em;}
.explicitForm{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--stretch);}
.minimalHook{padding:var(--lexicalThread);border:var(--upper) var(--master) var(--contextual);border-radius:var(--drafted-tip);background:var(--payload);display:flex;flex-direction:column-reverse;gap:1rem;}
.minimalHook blockquote{margin:0;font-size:0.9375rem;line-height:var(--served-gauge);opacity:0.85;}
.minimalHook .master-spinner{margin-top:0;}
.headless-billboard{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--stretch);}
.validatedSymbol{display:flex;flex-direction:column;gap:1.25rem;}
.central-pipeline .rigidStamp{display:flex;flex-direction:column;}
.tab{display:flex;flex-direction:column;gap:1rem;padding:2rem 0;border-top:var(--upper) var(--master) var(--contextual);}
.tab:last-child{border-bottom:var(--upper) var(--master) var(--contextual);}
.tab blockquote{margin:0;font-size:1.25rem;line-height:var(--served-gauge);max-width:56ch;text-wrap:pretty;}
.zoned-toggle .stacked_gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:var(--stretch);}
.justify_combo{padding-top:1.25rem;border-top:var(--upper) var(--master) var(--ported);display:flex;flex-direction:column;gap:1rem;}
.justify_combo .master-spinner{margin-top:0;}
.justify_combo blockquote{margin:0;font-size:1rem;line-height:var(--served-gauge);opacity:0.85;}
.branched_panel .coarse_shard{max-width:52rem;margin-inline:auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.5rem;}
.coarse_shard .trailingSprite{justify-content:center;}
.coarse_shard blockquote{margin:0;font-size:calc((1rem + (clamp(1.5rem,4vw,2.5rem) - 1rem) * var(--striped)) * var(--draftedField));line-height:1.35;font-weight:600;letter-spacing:-0.015em;text-wrap:balance;}
.coarse_shard .master-spinner{flex-direction:column;text-align:center;margin-top:0;}
@media(min-width:768px){
.tab{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:2rem;}
.tab .master-spinner{flex-direction:row-reverse;text-align:right;margin-top:0;flex-shrink:0;}
}
@media(max-width:768px){
.headless-billboard{grid-template-columns:1fr;}
}.eager_particle,.structural-spinner,.federated_lockup,.agile_label,.boxed_cell,.tetheredFlag{--encoded_stripe:color-mix(in srgb,var(--foreground) 9%,transparent);--stereo-overlay:24px;background-repeat:repeat;}
.eager_particle{background-image:radial-gradient(circle at 1px 1px,var(--encoded_stripe) 1px,transparent 0);background-size:var(--stereo-overlay) var(--stereo-overlay);}
.structural-spinner{--encoded_stripe:color-mix(in srgb,var(--foreground) 5%,transparent);--stereo-overlay:26px;background-image:radial-gradient(ellipse 1px 3.5px at 50% 50%,var(--encoded_stripe) 99%,transparent 100%),radial-gradient(ellipse 3.5px 1px at 50% 50%,var(--encoded_stripe) 99%,transparent 100%);background-size:var(--stereo-overlay) var(--stereo-overlay);}
.federated_lockup{--encoded_stripe:color-mix(in srgb,var(--foreground) 5%,transparent);--stereo-overlay:32px;background-image:repeating-linear-gradient(0deg,var(--encoded_stripe) 0 1px,transparent 1px var(--stereo-overlay)),repeating-linear-gradient(90deg,var(--encoded_stripe) 0 1px,transparent 1px var(--stereo-overlay));}
.agile_label{--encoded_stripe:color-mix(in srgb,var(--foreground) 5%,transparent);--stereo-overlay:12px;background-image:repeating-linear-gradient(0deg,var(--encoded_stripe) 0 1px,transparent 1px var(--stereo-overlay));}
.boxed_cell{--encoded_stripe:color-mix(in srgb,var(--foreground) 5%,transparent);--stereo-overlay:14px;background-image:repeating-linear-gradient(45deg,var(--encoded_stripe) 0 1px,transparent 1px var(--stereo-overlay));}
.tetheredFlag{--encoded_stripe:color-mix(in srgb,var(--foreground) 5%,transparent);--stereo-overlay:18px;background-image:repeating-linear-gradient(45deg,var(--encoded_stripe) 0 1px,transparent 1px var(--stereo-overlay)),repeating-linear-gradient(-45deg,var(--encoded_stripe) 0 1px,transparent 1px var(--stereo-overlay));}.parsed-dropdown{max-width:44rem;margin-inline:auto;}
.compoundAvatar{padding:var(--lexicalThread);border-radius:var(--drafted-tip);background:var(--notchedCarousel);}
.opaquePulse{text-align:center;}
.opaquePulse .extended-plate{margin-inline:auto;}
.locked_label{display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(2rem,4vw,4rem);align-items:start;}
.simple{min-width:0;}
.simple .progressive-capsule{margin-bottom:1.25rem;}
.rotatedSocket{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:clamp(1.5rem,3vw,2.5rem);}
.rotatedSocket>.simple{flex:1 1 20rem;}
/* A band runs the full width of the page, so it has no corners to round: a
   card radius on it left a notch of page showing at each end (the same rule
   the cta and contact bands follow). */
.sequential_tooltip{border-radius:0;}
.secondary_series{margin:0 0 1rem;}
.secondary_series .elasticFooter{width:1.75rem;height:1.75rem;color:var(--primary);}
/* The one-field form: the field takes the row and the button sits beside it,
   which is the whole point of asking for one thing. Below 640px they stack,
   and the button spans. */
.latent_mod{flex:1 1 22rem;min-width:0;}
.floating_indicator{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:1rem 1.5rem;}
.floating_indicator .deployed-package{flex-direction:column;align-items:stretch;gap:0.5rem;}
.floating_indicator .sorted-slab{margin-top:0.25rem;}
.midSurface{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.5rem);margin-top:clamp(1.75rem,3vw,2.5rem);}
.chart{display:flex;flex-direction:column;gap:0.5rem;padding:var(--lexicalThread);border:var(--upper) var(--master) var(--contextual);border-radius:var(--drafted-tip);}
.feed{display:flex;flex-direction:column;}
.dimmed-editor{display:flex;flex-wrap:wrap;align-items:baseline;gap:0.75rem 1.5rem;padding:1.25rem 0;border-top:var(--upper) var(--master) var(--contextual);}
.dimmed-editor:last-child{border-bottom:var(--upper) var(--master) var(--contextual);}
.cascaded{flex:1 1 16rem;min-width:0;}
.dimmed-editor>.elasticFooter{width:1.25rem;height:1.25rem;color:var(--primary);align-self:center;}
.shared_sheet{margin:0;font-weight:600;}
.regular_registry{display:block;font-size:0.9375rem;word-break:break-word;}
.iterative{margin:0.25rem 0 0;font-size:0.9375rem;opacity:0.75;}
.visualProvider{display:flex;flex-direction:column;gap:1rem;max-width:60ch;}
.visualProvider p{margin:0;}
.skewed_block{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1rem;}
.branched_ring{display:flex;align-items:center;gap:0.75rem;margin:0;font-family:var(--enriched-gallery,inherit);font-size:calc((1rem + (clamp(2rem,5vw,3.25rem) - 1rem) * var(--striped)) * var(--draftedField));line-height:1.05;letter-spacing:-0.01em;}
.cover-alert{margin:0;font-size:0.9375rem;letter-spacing:0.08em;text-transform:uppercase;opacity:0.7;}
.virtualTitle{display:flex;flex-direction:column;gap:1.25rem;}
.virtualTitle .rotatedSocket{padding-top:1.25rem;border-top:var(--upper) var(--master) var(--contextual);}
@media(max-width:768px){
.locked_label{grid-template-columns:1fr;}
.midSurface{grid-template-columns:1fr;}
}
/* The phone: the paired field and button stop being a row, and the button
   takes the width the field had. */
@media(max-width:640px){
.floating_indicator{grid-template-columns:1fr;}
.floating_indicator .bitwisePad{width:100%;}
}.keyed-package{background:var(--justify_ruler);color:var(--background);border-color:var(--ported);}
.keyed-package .fallback-lever,.keyed-package p{color:var(--background);}
.keyed-package .coupled_pipeline{color:var(--background);opacity:0.7;}
.keyed-package .bitwisePad{background:var(--background);color:var(--foreground);}
.keyed-package .cyber_canvas{background:transparent;color:var(--background);border-color:var(--background);}
/* The inverted band repaints the buttons, and it repainted their hover with
   them — the themed hover pair belongs to the page's ground, not to this one,
   so a button on an inverse band sat under the pointer without answering. It
   answers the same way every other hover does here: the same button a shade
   further into the ground it stands on. */
.keyed-package .bitwisePad:hover{background:color-mix(in srgb,var(--background) 86%,var(--foreground));color:var(--foreground);}
.keyed-package .cyber_canvas:hover{background:color-mix(in srgb,var(--background) 14%,transparent);color:var(--background);}
.keyed-package .extended-plate,.keyed-package .vertical_element,.keyed-package .phased_slider{background:var(--background);color:var(--foreground);border-color:transparent;}
/* The filled brand tile follows them. Left on the accent it barely separates
   from the inverse band — the accent is set against the page, and on this
   ground it measures 1.9-3.1:1 depending on the palette. The outlined and
   tinted tiles need nothing: they paint in currentColor, which the band has
   already flipped. */
.keyed-package .gated,.keyed-package .patched,.keyed-package .anchored-frame{background:var(--background);color:var(--foreground);}
.keyed-package .twinSequence,.keyed-package .orbital_drawer{background:var(--background);color:var(--foreground);border-color:var(--background);}
.keyed-package .shallow-blade{color:var(--background);}
.keyed-package .logicalThumbnail,.keyed-package .fluidStrip,.keyed-package .synthetic_graph{color:var(--background);}
.keyed-package .section{color:var(--background);fill:var(--background);}
.keyed-package summary::after,.keyed-package summary::marker{color:var(--background);}
.keyed-package .stateless-form a:hover,.keyed-package .stateless-form a[aria-current="page"]{color:var(--background);}
.keyed-package .rightArticle{border-color:var(--background);}
.keyed-package .session a:hover{color:var(--background);}
/* A field inside an inverted band stands on the band's ground, not on the
   page's. The theme's own control background is the page ground or a muted
   tint of it, and on a dark palette that is a dark slab — under the band's ink
   the typed value and the placeholder both disappeared. The ink is mixed in
   rather than layered as transparency, because a translucent placeholder over
   the wrong ground is exactly what failed here. */
.keyed-package input,.keyed-package textarea{background:color-mix(in srgb,var(--background) 8%,var(--justify_ruler));border-color:var(--ported);color:var(--background);}
.keyed-package ::placeholder{color:color-mix(in srgb,var(--background) 55%,var(--justify_ruler));}
.keyed-package .sorted-slab{color:var(--background);}
.resilient_dropdown .stateless-form a::before{content:none;}
.resilient_dropdown .stateless-form a{text-transform:none;letter-spacing:0.02em;font-size:0.875rem;}
.resilient_dropdown .stateless-form a::after{top:0.6rem;bottom:0.6rem;opacity:0.22;}
.resilient_dropdown .bitwisePad{display:none;}
.shaded-scope{background-image:linear-gradient(180deg,color-mix(in srgb,var(--optimal_screen) 5%,transparent),transparent 70%);}
.rightArticle{border-width:0;width:3rem;height:3rem;}
.rightArticle .elasticFooter{width:1.375rem;height:1.375rem;}
.regional .stateless-form a{font-family:var(--evented-lightbox);text-transform:none;letter-spacing:0.01em;font-weight:500;}
.sideStage{text-transform:none;}
.private .stateless-form a::after{height:1px;bottom:-0.3rem;background:var(--optimal_screen);}
.chainedCell .lazy_pattern{text-transform:none;letter-spacing:0;}
.chainedCell .stateless-form a{text-transform:none;letter-spacing:0.01em;font-size:0.875rem;font-weight:500;}
.chainedCell .stateless-form a::after{height:1px;bottom:-0.25rem;}
.converged_layout .stateless-form a{font-family:var(--evented-lightbox);text-transform:none;letter-spacing:0.01em;font-weight:500;}
@media(min-width:901px){.trim .stateless-form{border-radius:var(--adaptive-wall);padding:0.35rem 0.85rem;}
.trim .stateless-form a{border-radius:var(--adaptive-wall);}}
.optical-payload img{aspect-ratio:4/5;}
.arrayed-collection{padding:1.25rem;}
.arrayed-collection h3{font-family:var(--evented-lightbox);font-size:1.0625rem;font-weight:600;}
.arrayed-collection p{font-size:0.9375rem;opacity:0.68;}.richSkeleton,details{transition:all var(--crisp) var(--timed_ledger);}
input,textarea{transition:all var(--crisp) var(--timed_ledger);}
.bitwisePad:not(.cyber_canvas,.validatedSpace){position:relative;isolation:isolate;}
.bitwisePad:not(.cyber_canvas,.validatedSpace)::after{content:"";position:absolute;z-index:-1;border-radius:inherit;transition:all var(--crisp) var(--timed_ledger);inset:100% 0 0 0;background:var(--flexible-plugin);}
.bitwisePad:not(.cyber_canvas,.validatedSpace):hover::after{inset:calc(-1 * var(--clean-emblem));}
.keyed-package .bitwisePad:not(.cyber_canvas,.validatedSpace)::after,.rounded .bitwisePad:not(.cyber_canvas,.validatedSpace)::after{display:none;}
.bitwisePad:where(:not(.cyber_canvas,.validatedSpace)):hover{background-color:var(--rail);}
.richSkeleton:hover,details:hover{box-shadow:inset 0 -0.5rem 0 var(--primary);}
input:not([type="checkbox"]):not([type="radio"]):focus,textarea:focus,select:focus{box-shadow:var(--condensed),0 0 0 2px var(--primary);}
.packedKeypad::after{display:none;}
.packedKeypad:hover{background:var(--scene);color:var(--primary);}
.bitwisePad:focus-visible,.bitwisePad:not(.cyber_canvas,.validatedSpace):hover:focus-visible{box-shadow:var(--passive-thumbnail)!important;}