:root{color-scheme:light;--background:#f5f1eb;--foreground:#122b22;--primary:#122b22;--primary-foreground:#f8f6f1;--accent:#df3e2f;--muted:#e7e2da;--border:#2d433b}:root{--straightbubble:var(--background);--minimalBundle:var(--background);--hybridMedia:var(--muted);--fusedDrawer:var(--background);--compoundworkbench:var(--muted);--tracedring:var(--background);--live-thumbnail:var(--foreground);--styled-thumbnail:none;--loopedPadding:76rem;--guidedBracket:clamp(1rem,4vw,2rem);--validated-checkpoint:clamp(4rem,9vw,7rem);--prime-system:3rem;--saturatedthread:1.25rem;--tracedPopover:2rem;--ultrasignal:1.25rem;--synced-callout:0.75rem;--canonicaltrigger:0.75rem;--steppedsystem:1.25rem;--cybertint:1.75rem;--narrowLockup:1.25rem;--matched-ticker:9999px;--managedBillboard:9999px;--reduced-series:1px;--replicatedveil:solid;--optimalTree:0;--dynamicmodal:var(--border);--quick-inspector:var(--foreground);--smartloader:color-mix(in srgb,var(--border) 20%,var(--background));--taperedHolder:0 3px 8px color-mix(in srgb,var(--foreground) 10%,transparent);--matte-action:0 8px 20px color-mix(in srgb,var(--foreground) 16%,transparent);--statelessSparkline:0 20px 48px color-mix(in srgb,var(--foreground) 22%,transparent);--coarsewall:inset 0 2px 4px color-mix(in srgb,var(--foreground) 10%,transparent);--rigidPanel:700;--shortRail:0.01em;--interactiveBanner:none;--queuedLoop:var(--primary);--pinnedTerminal:var(--primary-foreground);--pulsedcheckpoint:var(--background);--relationalCode:var(--foreground);--quickRunner:transparent;--filteredLoader:transparent;--vitalPortal:var(--reduced-series);--technicalcheckpoint:0 2px 4px color-mix(in srgb,var(--foreground) 10%,transparent);--lexicalshelf:var(--primary);--codedToken:var(--primary-foreground);--cover-signal:0 10px 22px color-mix(in srgb,var(--foreground) 16%,transparent);--headlessnotice:var(--muted);--stereoTerminal:var(--foreground);--applied-skeleton:var(--border);--ultraTicker:0 0 0 3px var(--primary);--rootinstance:var(--primary);--rear-session:var(--background);--tunedEnvelope:var(--border);--modular-gallery:var(--foreground);--reversed-roster:var(--muted);--leftmesh:var(--primary);--guided-repeater:var(--primary);--liquidRail:var(--primary-foreground);--inertboard:var(--border);--matte-dock:linear-gradient(transparent,var(--foreground));--rapidsystem:none;--inlineloader:1;--centerCrumb:translateY(-2px);--loadedradar:scale(0.98);--clusteredslab:0.48;--rear-rail:0 0 0 3px var(--primary);--tracedSymbol:200ms;--linearpanel:cubic-bezier(0.2,0,0,1);--batchedRack:800;--strict-zone:-0.03em;--targetedsignal:1.06;--minimalPrimitive:1.15;--branchedpreset:400;--paged-blade:1.65;--fine-portal:none;--constantswatch:64ch}@media(max-width:640px){:root{--validated-checkpoint:calc((clamp(4rem,9vw,7rem)) * 0.7);--tracedPopover:calc((2rem) * 0.85);--ultrasignal:calc((1.25rem) * 0.85);}}:root{--ordered-dashboard:#d83c2e;--meshed-bracket:#ffffff;--patched-code:#000000}.flatpivot .offline-marker a[aria-current="page"]::after{width:100%;}.central-notice .offline-marker a[aria-current="page"]::after{left:0;right:0;}.mounted-splash.primeWall .offline-marker a[aria-current="page"]{background:var(--modular-gallery);color:var(--rear-session);}:root{--coverradar:'JetBrains Mono',ui-monospace,Menlo,monospace;--gatedspace:'Inter',Arial,sans-serif}:root{--stretchscope:'Bodoni Moda',Didot,Georgia,serif;--minimalstrip:500;--relativecontainer:0.01em}*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{margin:0;background:var(--straightbubble);color:var(--foreground);font:16px/var(--paged-blade,1.6) var(--gatedspace,Arial,Helvetica,sans-serif);font-weight:var(--branchedpreset);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,.linear-container{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(--coverradar,inherit);font-weight:var(--batchedRack);letter-spacing:var(--strict-zone);}
.federated-plugin{width:min(var(--loopedPadding),calc(100% - var(--guidedBracket)));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. */
.layeredRoster{padding:calc(var(--validated-checkpoint) + var(--structuralsystem,0rem)) 0;scroll-margin-top:var(--named-symbol);}
/* The chrome brings its own vertical spacing, so the wrapper's band on top of
   that showed up as a stray empty strip above the bar and below the footer. */
header.layeredRoster,footer.layeredRoster{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. */
.managed-bundle{padding-block:0;min-height:calc(100vh - var(--named-symbol));min-height:calc(100svh - var(--named-symbol));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. */
.managed-bundle>*{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;}
.segmentedPanel{padding:calc(var(--validated-checkpoint) + var(--sizededitor,0rem)) 0;background:var(--minimalBundle);backdrop-filter:var(--styled-thumbnail);-webkit-backdrop-filter:var(--styled-thumbnail);}
/* 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. */
.layeredRoster>.segmentedPanel{margin-block:calc(-1 * (var(--validated-checkpoint) + var(--structuralsystem,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. */
.root-digest{font-family:var(--stretchscope,inherit);font-weight:var(--minimalstrip,600);text-decoration:none;font-size:1.25rem;letter-spacing:var(--relativecontainer,-0.02em);}
.quantumendpoint{text-transform:var(--fine-portal);letter-spacing:0.12em;font-weight:700;color:var(--foreground);font-size:0.875rem;margin-bottom:1rem;box-shadow:inset 0 -0.125rem 0 var(--accent);}
.inline-scroller{font-size:1.25rem;opacity:0.8;max-width:var(--constantswatch);line-height:var(--paged-blade);margin-bottom:2rem;}
.scaleddeck{font-weight:var(--batchedRack);letter-spacing:var(--strict-zone);}
.offlineKeypad{max-width:var(--constantswatch);}
address{font-style:normal;}
em,i,b{font-style:inherit;font-weight:inherit}

.dynamicHeader{display:inline-flex;align-items:center;justify-content:center;min-height:var(--prime-system);padding-block:0.5rem;padding-inline:var(--saturatedthread);border:var(--vitalPortal) var(--replicatedveil) var(--filteredLoader);border-radius:var(--synced-callout);background:var(--queuedLoop);color:var(--pinnedTerminal);text-decoration:none;font-weight:var(--rigidPanel);cursor:pointer;text-transform:var(--interactiveBanner);letter-spacing:var(--shortRail);box-shadow:var(--technicalcheckpoint);transition:background var(--tracedSymbol) var(--linearpanel),color var(--tracedSymbol) var(--linearpanel),border-color var(--tracedSymbol) var(--linearpanel),box-shadow var(--tracedSymbol) var(--linearpanel),opacity var(--tracedSymbol) var(--linearpanel),transform var(--tracedSymbol) var(--linearpanel);}
.dynamicHeader:hover{opacity:var(--inlineloader);transform:var(--centerCrumb);background:var(--lexicalshelf);color:var(--codedToken);box-shadow:var(--cover-signal);}
.dynamicHeader:active{transform:var(--loadedradar);box-shadow:var(--coarsewall);}
.procedural-flag{background:var(--pulsedcheckpoint);color:var(--relationalCode);border-color:var(--dynamicmodal);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. */
.procedural-flag:hover{background:color-mix(in srgb,var(--primary) 10%,var(--pulsedcheckpoint));color:var(--relationalCode);box-shadow:none;}
.raw-terminal{background:var(--quickRunner);color:var(--relationalCode);box-shadow:none;border-color:transparent;text-decoration:underline;text-underline-offset:0.3em;}
.raw-terminal:hover{background:var(--quickRunner);color:var(--relationalCode);box-shadow:none;}
.capped-cabinet{min-height:calc(var(--prime-system) - 0.25rem);padding-block:calc(var(--prime-system) / 8);padding-inline:calc(var(--saturatedthread) - 0.125rem);font-size:0.875rem;}

input,textarea{width:100%;backdrop-filter:var(--styled-thumbnail);-webkit-backdrop-filter:var(--styled-thumbnail);min-height:var(--prime-system);padding:0.75rem var(--saturatedthread);border:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);border-radius:var(--canonicaltrigger);background:var(--headlessnotice);color:var(--stereoTerminal);font:inherit;transition:border-color var(--tracedSymbol) var(--linearpanel),box-shadow var(--tracedSymbol) var(--linearpanel),opacity var(--tracedSymbol) var(--linearpanel);}
textarea{min-height:9rem;resize:vertical;line-height:var(--paged-blade);}
input:hover,textarea:hover{border-color:var(--quick-inspector);}
input:not([type="checkbox"]):not([type="radio"]):focus,textarea:focus{border-color:var(--primary);box-shadow:var(--ultraTicker);}
input:user-invalid,textarea:user-invalid{border-color:var(--rootinstance);}
/* 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(--reduced-series) var(--replicatedveil) var(--quick-inspector);background:var(--headlessnotice);cursor:pointer;transition:background var(--tracedSymbol) var(--linearpanel),border-color var(--tracedSymbol) var(--linearpanel);}
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(--tracedSymbol) var(--linearpanel);}
/* 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(--paged-blade,1.6) * 1em + 1.5rem + 2 * var(--reduced-series));padding-block:0;}
::placeholder{color:var(--applied-skeleton);opacity:1;}

.protoWave,details{padding:var(--tracedPopover);background:var(--hybridMedia);border:var(--optimalTree) var(--replicatedveil) var(--dynamicmodal);border-radius:var(--steppedsystem);box-shadow:var(--taperedHolder);backdrop-filter:var(--styled-thumbnail);-webkit-backdrop-filter:var(--styled-thumbnail);}
.coarseComposer{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ultrasignal);}
/* 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. */
.matte-shim{grid-template-columns:repeat(2,minmax(0,1fr));}
.spatialrule{grid-template-columns:repeat(3,minmax(0,1fr));}
.protoWave:hover,details:hover{box-shadow:var(--matte-action);}
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);}

.quantumpackage{background:var(--fusedDrawer);border:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);border-radius:var(--steppedsystem);box-shadow:var(--matte-action);backdrop-filter:var(--styled-thumbnail);-webkit-backdrop-filter:var(--styled-thumbnail);}
.soft-callout{background:var(--tracedring);backdrop-filter:var(--styled-thumbnail);-webkit-backdrop-filter:var(--styled-thumbnail);border:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);border-radius:var(--steppedsystem);box-shadow:var(--statelessSparkline);}
.tieredoutline{border-radius:var(--cybertint);box-shadow:var(--statelessSparkline);}

/* 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's ground spans the window; its contents do not. They stand in the
   page's own shell, so the logotype sits over the first paragraph below it and
   the navigation ends where the copy does — a bar whose brand is pinned to the
   window's edge is a band of chrome laid across a page it has no relation to.
   The two themes that name a full-width shell (shellMax 100%) get a
   full-width bar with them, which is the reading they ask for everywhere else.
   No rule is needed for any of this: the shell already does it, and the
   override that used to sit here is what had to go.

   v6 is the exception and states it itself: that bar is a row of framed cells,
   and a cell floating short of the window's edge is a frame that failed to
   close. */
/* 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. */
.mounted-splash{position:fixed;top:0;left:0;right:0;z-index:30;background:var(--rear-session);border-color:var(--tunedEnvelope);border-bottom-color:var(--smartloader);color:var(--modular-gallery);backdrop-filter:var(--styled-thumbnail);-webkit-backdrop-filter:var(--styled-thumbnail);}
/* 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. */
.outerCursor{border-color:var(--tunedEnvelope);color:var(--modular-gallery);}
.offline-marker a{position:relative;padding:0.25rem;text-decoration:none;font-weight:500;border-radius:var(--canonicaltrigger);transition:background var(--tracedSymbol) var(--linearpanel),box-shadow var(--tracedSymbol) var(--linearpanel),color var(--tracedSymbol) var(--linearpanel);}
/* 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. */
.primeWall .offline-marker a:hover{background:color-mix(in srgb,var(--modular-gallery) 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. */
.primeWall .offline-marker a[aria-current="page"]{background:var(--reversed-roster);}
/* 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. */
.mounted-splash .offline-marker a[aria-current="page"]{font-weight:700;color:var(--leftmesh);}
.federated-checkpoint{border:var(--reduced-series) var(--replicatedveil) var(--tunedEnvelope);border-radius:var(--canonicaltrigger);background:transparent;color:inherit;transition:background var(--tracedSymbol) var(--linearpanel);}

/* Filled badges are decorative labels, so they use the stable accent pair on
   every surface. The edge is a tint of the badge's own ink rather than the
   page's border colour, which would introduce an unrelated grey outline. */
.applied-lightbox,.constantdigest{display:inline-flex;align-items:center;gap:0.5rem;padding:0.375rem var(--saturatedthread);border:var(--reduced-series) var(--replicatedveil) color-mix(in srgb,var(--meshed-bracket) 22%,transparent);border-radius:var(--matched-ticker);background:var(--ordered-dashboard);color:var(--meshed-bracket);font-size:0.8125rem;font-weight:var(--rigidPanel);letter-spacing:var(--shortRail);margin:0;text-transform:var(--fine-portal);}
/* The glyph, not the copy: one colour across both read as a solid block, and
   the icon is the half that can sit back. The fill carries either ink (see
   accent-fill.ts), so the pair is legible whichever palette drew it. */
.applied-lightbox .ghostTemplate,.constantdigest .ghostTemplate{color:var(--patched-code);}
.applied-lightbox.boxedtracker{border-radius:var(--managedBillboard);}
figure>img{border:var(--reduced-series) var(--replicatedveil) var(--inertboard);border-radius:var(--narrowLockup);filter:var(--rapidsystem);}
body .signed-modal{background:var(--matte-dock);}

/* 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. */
.dynamicHeader: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;}
.dynamicHeader: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(--rear-rail);}
.offline-marker a:focus-visible,.offline-marker a:hover:focus-visible,.federated-checkpoint:focus-visible,.federated-checkpoint:hover:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:var(--rear-rail);}
.dynamicHeader:disabled,button:disabled,input:disabled,textarea:disabled,[aria-disabled="true"]{opacity:var(--clusteredslab);cursor:not-allowed;}

.ghostTemplate{width:1.25rem;height:1.25rem;flex-shrink:0;}
/* The chip draws its icon in the accent, the pair its two siblings already use
   (the boundary mark and the list check), and keeps the inset surface as a
   narrow inner edge rather than as the glyph's ground.
   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.

   Its ground is the page surface rather than the theme's inset tint: the
   palette guarantees accent contrast against the page and inverse surfaces,
   while an arbitrary tint can pull the pair below 3:1. Painting its own ground
   is also what lets one colour serve it on an inverse band. The hairline keeps
   the chip distinct when its card uses the same ground. */
.central-stub{width:3rem;height:3rem;border-radius:var(--matched-ticker);display:inline-flex;align-items:center;justify-content:center;border:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);color:var(--accent);}
.central-stub .ghostTemplate{width:1.5rem;height:1.5rem;}
.central-stub,.atomic-vault,.cappedKit,.rankedSegment{background:var(--background);}
.central-stub,.atomic-vault,.cappedKit{box-shadow:inset 0 0 0 var(--reduced-series) var(--compoundworkbench);}
.verticalPlate{width:3rem;height:3rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;background:var(--guided-repeater);color:var(--liquidRail);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. */
.unifiedpipeline{color:var(--accent);}

.rendereddashboard .federated-plugin{display:flex;flex-direction:column;align-items:center;}
/* Only the dim: the ink of a subhead on an inverse band is the inverse layer's
   to name, and this variant is one (hero.ts). */
.directGrip .inline-scroller{opacity:0.7;}
.frontscaffold{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start;}
.textualflyout{position:sticky;top:4rem;}
.textualflyout h2{font-size:calc((1rem + (clamp(2.5rem,6vw,4rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));line-height:1.1;margin:0;}
.silentNode .inline-scroller{margin-inline:auto;}
/* The panel this variant wraps is an inverse band (contact.ts),
   so its ink, its buttons and their hover are already written — once, for every
   inverse band — by the layer that ships last. The three rules that used to
   restate them here named a different hover pair than that layer does and lost
   to it on source order at equal specificity: one visual role, two answers, the
   losing one invisible. Only the dim, which is this variant's own, is left. */
.patchedTopbar .inline-scroller{opacity:0.8;}
.preciseVector .inline-scroller,.framed-gauge .inline-scroller{margin-inline:auto;}
.proceduralcheckpoint .root-digest{margin-bottom:2rem;font-size:1.5rem;}

.scalargraph{display:flex;flex-direction:column;gap:0.75rem;max-width:44rem;margin:0 0 clamp(2rem,4vw,3.5rem);}
.arrayedRack{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.

   The marks are the accent, like the underline the same label carries: a short
   stroke beside a label is a decorative mark, not a piece of the type, and it
   is the one ornament class the accent is still spent on. A theme states the
   geometry here and never the colour (enforced, theme-chrome.test.ts). */
.semanticTunnel{display:flex;width:100%;align-items:center;justify-content:center;gap:0.75rem;box-shadow:none;}
.semanticTunnel::before,.semanticTunnel::after{content:"";display:none;flex:0 0 auto;background:var(--accent);}
.scaleddeck{font-size:calc((1rem + (clamp(1.875rem,4vw,3rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));line-height:1.1;margin:0;}
.quantumendpoint{font-size:0.8125rem;margin:0;}
.inline-scroller{font-size:1.125rem;opacity:0.75;line-height:var(--paged-blade);margin:0;}
.namedEntry{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. */
.tunedShell{border-block:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);}
/* The seeded layout family, drawn per block: it varies a site's vertical rhythm
   and nothing else. It used to move the shell measure with it (-12rem to +8rem)
   — and since the draw happens per block, one page then ran every band to a
   different width and the bar above them to a fifth. The measure is the site's,
   named once by the theme (shellMax, 60rem to 100%); what a block may still
   vary is the air around it. */
.scroll-composer{--structuralsystem:0rem;--sizededitor:0rem;}
.patched-topbar{--structuralsystem:-1rem;--sizededitor:-1.5rem;}
.zoomedarticle{--structuralsystem:0.5rem;--sizededitor:0.625rem;}
.scaled-billboard{--structuralsystem:1rem;--sizededitor:0.5rem;}

/* Two columns from the tablet width down. */
@media(max-width:1024px){.frontscaffold{gap:2.5rem;}.coarseComposer{grid-template-columns:repeat(2,1fr);}.spatialrule{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:768px){.coarseComposer{grid-template-columns:1fr;}.matte-shim,.spatialrule{grid-template-columns:1fr;}.floatingsheet,.nested-combo,.frontscaffold{grid-template-columns:1fr;gap:3rem;}.textualflyout{position:static;margin-bottom:2rem;}.core-spacer{grid-template-columns:1fr;}}
/* The phone: one column everywhere, so the layout families' 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){
.scroll-composer,.patched-topbar,.zoomedarticle,.scaled-billboard{--structuralsystem:0rem;--sizededitor:0rem;}
.scaleddeck{font-size:calc((1rem + (clamp(1.75rem,7vw,2.25rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));}
.inline-scroller{font-size:1.0625rem;}
.scalargraph{margin-bottom:clamp(1.5rem,6vw,2rem);gap:0.5rem;}
.textualflyout h2{font-size:calc((1rem + (clamp(2rem,8vw,2.5rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));}
.floatingsheet,.nested-combo,.frontscaffold{gap:2rem;}
.textualflyout{margin-bottom:0;}
.namedEntry{gap:0.625rem;}
.namedEntry .dynamicHeader{flex:1 1 10rem;}
.central-stub{width:2.75rem;height:2.75rem;}
}
.embeddedTooltip{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem;}
.appliedSlider .embeddedTooltip{max-width:44rem;margin-inline:auto;}
.volatileCard{display:flex;align-items:flex-start;gap:0.875rem;font-size:1.0625rem;line-height:var(--paged-blade);}
.delta-chrome{opacity:0.85;}
/* The same pair the icon chip settled on: the disc paints its own page ground
   and draws the cross in the accent, with a hairline so it 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 an accent mark — two colours for one small
   thing, and the grey the louder of them. */
.atomic-vault{flex-shrink:0;width:1.75rem;height:1.75rem;border-radius:50%;color:var(--accent);border:var(--reduced-series) var(--replicatedveil) currentColor;display:inline-flex;align-items:center;justify-content:center;}
.atomic-vault .ghostTemplate{width:1rem;height:1rem;}
.dedicated-table .tetheredCabinet{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. */
.digital-slider .embeddedTooltip{max-width:52rem;}
.proxiedmatrix .deepFigure{margin-inline:auto;max-width:52rem;}
.deepFigure{text-align:left;}
.deepFigure .scalargraph{margin-top:0;}
.targetedAside{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.875rem;}
.baseline-figure{position:relative;padding-left:1.5rem;font-size:1.0625rem;line-height:var(--paged-blade);opacity:0.85;}
.baseline-figure::before{content:"";position:absolute;left:0;top:0.7em;width:0.75rem;height:1px;background:var(--live-thumbnail);opacity:0.5;}
.concurrent-placeholder .scalargraph{max-width:40rem;}
.indexedForm{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.exactunit{padding:1.25rem 0;border-top:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);font-size:1.0625rem;line-height:var(--paged-blade);opacity:0.85;}
.exactunit:last-child{border-bottom:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);}
.vectored-placeholder{background:var(--hybridMedia);}
.taggedstamp{display:grid;gap:var(--ultrasignal);text-align:left;}
@media(max-width:768px){
.taggedstamp{grid-template-columns:1fr;}
}.stitched-segment{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;width:2.25rem;height:2.25rem;}
.stitched-segment .autoCheckpoint{width:1.25rem;height:1.25rem;}
.mono-marker{font-family:var(--stretchscope,inherit);font-size:0.8125rem;font-weight:var(--minimalstrip,600);letter-spacing:0.02em;line-height:1;}
.nominalFrame,.granular-tooltip,.mobile-lookup{background:var(--ordered-dashboard);color:var(--meshed-bracket);}
.rigidMonitor,.quick-bubble,.refined-hook{border:var(--reduced-series) var(--replicatedveil) var(--accent);color:var(--accent);}
.tonalLookup{background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent);}
.granular-tooltip,.quick-bubble,.tonalLookup{border-radius:var(--canonicaltrigger);}
.mobile-lookup,.refined-hook{border-radius:var(--managedBillboard);}
/* A brand link is a line of type with the mark riding beside it rather than
   above. Only the mark is the brand's colour: the tile states its own accent
   pair (above) and the name takes the ink of whatever surface it is standing
   on — the bar's, the page's, an inverse band's — so a logotype set in a third
   hue no longer competes with the copy around it. Nothing is declared here:
   the anchor already inherits, and stating the ink would have to be undone on
   every surface that differs.

   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. */
.root-digest{display:inline-flex;align-items:center;gap:0.625rem;}
.beta-blade{display:inline-block;}.sharpstripe{display:flex;align-items:center;gap:0.75rem;margin:0 0 1rem;font-family:var(--stretchscope,inherit);font-weight:var(--minimalstrip,700);letter-spacing:var(--relativecontainer,normal);font-size:1.0625rem;}
.nestedstub .scalargraph{max-width:none;}
.innerMarquee{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:start;}
.innerMarquee .scalargraph{margin-top:0;}
.sharded-vector{margin:0;display:flex;flex-direction:column;}
.adaptiveSidebar{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(--reduced-series) var(--replicatedveil) var(--dynamicmodal);align-items:start;}
.adaptiveSidebar:last-child{border-bottom:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);}
.adaptiveSidebar dt{font-weight:700;font-size:0.8125rem;text-transform:uppercase;letter-spacing:0.06em;opacity:0.55;}
.adaptiveSidebar dd{margin:0;line-height:var(--paged-blade);opacity:0.9;}
.adaptiveSidebar dd a{text-decoration:underline;text-underline-offset:0.2em;}
.seamlessscope{list-style:none;margin:1.25rem 0 0;padding:0;display:flex;flex-direction:column;gap:0.75rem;}
.seamlessscope li{display:flex;align-items:flex-start;gap:0.625rem;line-height:var(--paged-blade);}
.silentToast{opacity:0.85;}
.seamlessscope .ghostTemplate{width:1.05rem;height:1.05rem;color:var(--accent);margin-top:0.2rem;flex-shrink:0;}
.regionalvault{display:flex;align-items:center;gap:0.5rem;margin:1.5rem 0 0;font-size:0.9375rem;}
.monoAlert{opacity:0.75;}
.regionalvault .ghostTemplate{width:1.05rem;height:1.05rem;color:var(--accent);flex-shrink:0;}
.scaledSchema .verticalPackage{margin-top:1.5rem;}
.threadedworkbench{margin-top:clamp(2rem,4vw,2.5rem);}
.threadedworkbench h3,.tiledshell h3,.coarseparcel .tetheredCabinet h3{margin:0;font-size:1.125rem;}
.verticalPackage{text-align:left;}
.verticalPackage .adaptiveSidebar:first-child{border-top:none;padding-top:0;}
.verticalPackage .adaptiveSidebar:last-child{border-bottom:none;padding-bottom:0;}
.wiredlibrary .adaptiveSidebar{border-top-color:var(--quick-inspector);}
.wiredlibrary .adaptiveSidebar:last-child{border-bottom-color:var(--quick-inspector);}
.decodedPreview .seamlessscope{text-align:left;}
.tiledshell{max-width:44rem;margin-inline:auto;}
.tiledshell h3{margin-top:clamp(2rem,4vw,2.5rem);}
.coarseparcel .tetheredCabinet h3{margin-top:clamp(1.75rem,3vw,2.25rem);}
.provisionedvault{background:var(--hybridMedia);}
.provisionedvault .sharded-vector{max-width:44rem;margin-inline:auto;}
.provisionedvault .regionalvault{justify-content:center;}
@media(max-width:768px){
.innerMarquee{grid-template-columns:1fr;}
.adaptiveSidebar{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){
.innerMarquee{gap:1.5rem;}
.threadedworkbench,.tiledshell h3{margin-top:1.5rem;}
}.silentNode .merged-shard{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0.5rem;}
.merged-shard .inline-scroller{margin-inline:auto;}
.merged-shard h1,.merged-shard h2{margin:0;font-size:calc((1rem + (clamp(2rem,5vw,3.25rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));line-height:1.1;max-width:20ch;}
.merged-shard .stackedFooter{align-items:center;margin:0.25rem 0 0.75rem;}
.patchedTopbar .stickySignal{border-radius:var(--cybertint);padding:var(--tracedPopover);}
.liquid-sheet h1,.liquid-sheet h2{margin:0 0 1rem;font-size:calc((1rem + (clamp(1.75rem,4vw,2.75rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));line-height:1.1;}
.liquid-sheet .stackedFooter{margin:1rem 0 1.5rem;}
.preciseVector .queued-pivot,.framed-gauge .charted-cluster{text-align:center;padding:var(--tracedPopover);}
.queued-pivot{border:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);border-radius:var(--steppedsystem);background:var(--hybridMedia);}
.charted-cluster{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 12%,var(--muted)),var(--background));border:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);border-radius:var(--steppedsystem);box-shadow:var(--taperedHolder);}
.queued-pivot h1,.queued-pivot h2,.charted-cluster h1,.charted-cluster h2{margin:0 0 1rem;font-size:calc((1rem + (clamp(2rem,5vw,3.25rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));line-height:1.1;}
.queued-pivot .inline-scroller,.charted-cluster .inline-scroller{margin-inline:auto;}
.queued-pivot .stackedFooter,.charted-cluster .stackedFooter{align-items:center;margin:1rem 0 1.5rem;}
.adaptiveControl .externaleditor{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(--reduced-series) var(--replicatedveil) var(--quick-inspector);border-bottom:var(--reduced-series) var(--replicatedveil) var(--quick-inspector);}
.desktoppadding h1,.desktoppadding h2{margin:0 0 0.75rem;font-size:calc((1rem + (clamp(1.5rem,3.5vw,2.25rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));line-height:1.1;}
.desktoppadding .stackedFooter{margin:0;}
.stackedFooter{display:flex;flex-direction:column;gap:0.5rem;font-style:normal;}
.central-pad{display:inline-flex;align-items:flex-start;gap:0.5rem;line-height:var(--paged-blade);min-width:0;}
.central-pad .unifiedpipeline{margin-top:0.125rem;}
.stackedFooter a{text-decoration:underline;text-underline-offset:0.2em;}
.standardCrumb .vitalStrip{text-align:center;}
.vitalStrip h1,.vitalStrip h2{margin:0 0 0.5rem;font-size:calc((1rem + (clamp(1.75rem,4vw,2.75rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));}
.vitalStrip .inline-scroller{margin-inline:auto;}
.matched-service{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ultrasignal);margin:2rem 0 2.5rem;text-align:left;}
.rigidpage{display:flex;flex-direction:column;gap:0.4rem;word-break:break-word;}
.rigidpage .unifiedpipeline{margin-bottom:0.25rem;}
.eventedtable{font-weight:700;font-size:0.8125rem;text-transform:uppercase;letter-spacing:0.06em;opacity:0.6;}
.rigidpage a{text-decoration:underline;text-underline-offset:0.2em;}
@media(max-width:768px){
.stickySignal,.patchedTopbar .stickySignal{padding:var(--tracedPopover);}
.queued-pivot,.charted-cluster,.preciseVector .queued-pivot,.framed-gauge .charted-cluster{padding:var(--tracedPopover);}
.externaleditor,.adaptiveControl .externaleditor{flex-direction:column;align-items:flex-start;}
.matched-service{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){
.merged-shard h1,.merged-shard h2,.queued-pivot h1,.queued-pivot h2,.charted-cluster h1,.charted-cluster h2{font-size:calc((1rem + (clamp(1.75rem,7vw,2.25rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));}
}.offlineKeypad h1{font-size:calc((1rem + (clamp(2.25rem,5vw,3.5rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));line-height:1.1;margin:0 0 1.5rem;}
.offlineKeypad h2{font-size:1.5rem;line-height:1.3;margin:2.5rem 0 1rem;}
.offlineKeypad h3{font-size:1.125rem;line-height:1.4;margin:2rem 0 0.75rem;}
.offlineKeypad p{margin:0 0 1.25rem;font-size:1.0625rem;line-height:var(--paged-blade);color:color-mix(in srgb,var(--foreground) 85%,transparent);}
.offlineKeypad p:last-child{margin-bottom:0;}
.offlineKeypad p.quantumendpoint{margin:0;font-size:0.8125rem;color:var(--foreground);}
.offlineKeypad ul{margin:0 0 1.25rem;padding-left:1.25rem;display:flex;flex-direction:column;gap:0.5rem;}
.offlineKeypad li{font-size:1.0625rem;line-height:var(--paged-blade);color:color-mix(in srgb,var(--foreground) 85%,transparent);}
.offlineKeypad a{color:var(--primary);text-decoration:underline;text-underline-offset:0.2em;}
.offlineKeypad strong{font-weight:700;}
.enrichedchrome{padding:calc(var(--validated-checkpoint) * 0.25) 0;}
/* The eyebrow leaves the text column for a rail of its own: a boundary 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. */
.nested-spacer{display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:start;}
.private-stripe{align-self:stretch;border-inline-start:2px var(--replicatedveil) var(--dynamicmodal);padding-inline-start:clamp(0.75rem,1.5vw,1.25rem);}
.private-stripe .quantumendpoint{position:sticky;top:clamp(1.5rem,4vw,2.5rem);margin:0;}
.front-layout{padding:calc(var(--validated-checkpoint) * 0.5) 0;}
.strictendpoint h1,.strictendpoint h2{margin:0;}
.compact-folder{margin-top:0;}
.core-spacer{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(2rem,4vw,3rem);align-items:start;}
.nominalService img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--narrowLockup);}
.crosswidget{padding:calc(var(--validated-checkpoint) * 0.35) 0;}
.synced-splash{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. */
.projected-stripe{background-color:var(--straightbubble);}
.queuedSpace{padding:calc(var(--validated-checkpoint) * 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. */
.parallelPlacard{background:color-mix(in srgb,var(--hybridMedia) 94%,var(--foreground));padding:calc(var(--tracedPopover) * 1.75) calc(var(--tracedPopover) * 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. */
.synced-splash .quantumendpoint,.parallelPlacard .quantumendpoint{margin-bottom:0;}
.synced-splash h1,.synced-splash h2,.parallelPlacard h1,.parallelPlacard h2{margin-top:0.35rem;margin-bottom:1.25rem;}
.fluidBuffer{padding:calc(var(--validated-checkpoint) * 0.5) 0;}
.fluidBuffer h1,.fluidBuffer h2{font-size:calc((1rem + (clamp(3rem,8vw,5rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));margin:0 0 2rem;line-height:1.1;}
.dense-avatar{border:none;border-top:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);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. */
.ultraGauge{max-width:none;}
.ultraGauge p{font-size:calc((1rem + (clamp(1.125rem,1.8vw,1.375rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));margin:0 0 1.5rem;line-height:1.45;max-width:var(--constantswatch);}
.ultraGauge p:not(:first-child){font-size:1.0625rem;line-height:var(--paged-blade);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. */
.ultraGauge p:not(:first-child)::before{content:"";position:absolute;top:0;inset-inline:0;margin-inline:auto;width:2.5rem;height:2px;background:var(--accent);}
.ultraGauge p:last-child{margin-bottom:0;}
.sortedHandle{padding:calc(var(--validated-checkpoint) * 0.4) 0;}
.kineticholder{margin-bottom:2rem;}
.kineticholder h1,.kineticholder h2{margin:0;}
.parsed-envelope{column-count:2;column-gap:clamp(2rem,4vw,2.5rem);max-width:none;}
.bandedTracker::first-letter{font-size:3.75rem;font-weight:800;float:left;line-height:0.85;padding:0.25rem 0.5rem 0 0;}
@media(max-width:1024px){
.parsed-envelope{column-count:1;}
}
@media(max-width:768px){
.nested-spacer{grid-template-columns:1fr;gap:1rem;}
.private-stripe{align-self:start;border-inline-start:0;padding-inline-start:0;}
.private-stripe .quantumendpoint{position:static;}
.ultraGauge p:not(:first-child){margin-inline-start:0;}
.core-spacer{grid-template-columns:1fr;gap:2rem;}
.parallelPlacard{padding:calc(var(--tracedPopover) * 1.25) var(--tracedPopover);}
.parsed-envelope{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){
.offlineKeypad h1{font-size:calc((1rem + (clamp(1.875rem,7vw,2.5rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));}
.fluidBuffer h1,.fluidBuffer h2{font-size:calc((1rem + (clamp(2.25rem,9vw,3rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));margin-bottom:1.25rem;}
.nested-spacer,.core-spacer{gap:1.5rem;}
}.generic-pane .chainedsilo{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.25rem;}
.generic-pane h1,.generic-pane h2{margin:0;font-size:calc((1rem + (clamp(1.75rem,4vw,2.75rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));line-height:1.1;max-width:20ch;}
.chainedsilo .inline-scroller{margin-inline:auto;}
.constantdigest .ghostTemplate{width:0.875rem;height:0.875rem;}
/* 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. */
.precisetag,.clustered-portal{border-radius:0;}
.corepopup .orbitalIndicator{display:grid;grid-template-columns:1fr auto;align-items:center;gap:clamp(1.5rem,3vw,2.5rem);padding:var(--tracedPopover);border-radius:var(--cybertint);background:var(--fusedDrawer);}
.wired-item h1,.wired-item h2{margin:0 0 0.5rem;font-size:calc((1rem + (clamp(1.5rem,3.5vw,2.25rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));line-height:1.15;}
.wired-item .inline-scroller{margin:0;max-width:52ch;}
.steppedCabinet{text-align:center;max-width:640px;margin:0 auto;}
.steppedCabinet h1,.steppedCabinet h2{margin:0 0 1rem;font-size:calc((1rem + (clamp(2rem,5vw,3rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));line-height:1.1;}
.steppedCabinet .inline-scroller{margin-inline:auto;}
.headlessplaceholder{text-align:center;}
.headlessplaceholder h1,.headlessplaceholder h2{margin:0 0 1.5rem;font-size:calc((1rem + (clamp(1.75rem,4vw,2.5rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));line-height:1.1;}
.computedmedia{gap:0.5rem;}
.computedmedia .ghostTemplate{width:1.1rem;height:1.1rem;}
.fixedTab .linearcrumb{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;padding:1.5rem 0;border-top:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);border-bottom:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);}
.linearcrumb h1,.linearcrumb h2{margin:0;font-size:calc((1rem + (clamp(1.25rem,2.5vw,1.5rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));line-height:1.2;}
.root-unit .lateralshelf{position:relative;overflow:hidden;text-align:center;padding:var(--tracedPopover);border-radius:var(--steppedsystem);}
.lateralshelf::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;}
.lateralshelf>*{position:relative;}
.lateralshelf h1,.lateralshelf h2{margin:0 0 1rem;font-size:calc((1rem + (clamp(1.75rem,4vw,2.75rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));line-height:1.1;max-width:22ch;margin-inline:auto;}
.lateralshelf .inline-scroller{margin-inline:auto;}
@media(max-width:768px){
.corepopup .orbitalIndicator{grid-template-columns:1fr;justify-items:start;}
.linearcrumb,.fixedTab .linearcrumb{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){
.steppedCabinet h1,.steppedCabinet h2{font-size:calc((1rem + (clamp(1.75rem,7vw,2.25rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));}
}.timedpadding{border:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);border-radius:var(--steppedsystem);background:var(--hybridMedia);}
.timedpadding 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(--paged-blade);cursor:pointer;list-style:none;}
.timedpadding summary::-webkit-details-marker{display:none;}
.timedpadding summary::after{content:"+";font-size:1.5rem;font-weight:400;line-height:1.1;flex-shrink:0;color:var(--primary);transition:transform var(--tracedSymbol) var(--linearpanel);}
.timedpadding[open] summary::after{transform:rotate(45deg);}
.timedpadding 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(--paged-blade);max-width:70ch;}
.flexiblemarquee{display:flex;flex-direction:column;gap:1rem;}
.stitchedSidebar .flexiblemarquee{max-width:48rem;margin-inline:auto;}
.expressgroup .timedpadding{background:transparent;border:none;border-radius:0;border-top:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);}
.expressgroup .timedpadding:last-child{border-bottom:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);}
.expressgroup .timedpadding summary{padding:1.75rem 0;font-size:1.1875rem;}
.expressgroup .timedpadding 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. */
.outerheading{display:grid;gap:var(--ultrasignal);grid-template-columns:1fr;}
.versatileAside .outerheading{gap:var(--ultrasignal);}
.lexical-pill{max-width:44rem;margin-inline:auto;}
.secondary-spacer .timedpadding{background:transparent;border:none;border-radius:0;border-top:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);}
.secondary-spacer .timedpadding:last-child{border-bottom:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);}
.secondary-spacer .timedpadding summary{padding:1.5rem 0;}
.secondary-spacer .timedpadding p{padding:0 0 1.5rem;}
.delta-plugin .timedpadding{background:transparent;border-color:var(--quick-inspector);}
.rankedOffset .raw-trace{display:grid;grid-template-columns:0.8fr 1.2fr;gap:clamp(2rem,4vw,3rem);align-items:start;}
.targetedLogo{display:flex;flex-direction:column;gap:1rem;}
.targetedLogo .scalargraph{margin-bottom:0;}
.technical-applet{grid-template-columns:1fr;gap:1rem;}
@media(max-width:768px){
.outerheading{grid-template-columns:1fr;}
.rankedOffset .raw-trace{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){
.rankedOffset .raw-trace{gap:1.5rem;}
.timedpadding summary{padding:1rem 1.125rem;font-size:1rem;}
.expressgroup .timedpadding summary,.secondary-spacer .timedpadding summary{padding:1.125rem 0;font-size:1.0625rem;}
}.lowerloop{display:grid;gap:var(--ultrasignal);}
.markedrecord .twingallery{align-items:flex-start;}
.twingallery{display:flex;flex-direction:column;gap:0.875rem;padding:var(--tracedPopover);transition:transform var(--tracedSymbol) var(--linearpanel),box-shadow var(--tracedSymbol) var(--linearpanel),border-color var(--tracedSymbol) var(--linearpanel);}
.twingallery:hover{transform:var(--centerCrumb);border-color:var(--quick-inspector);box-shadow:var(--matte-action);}
.twingallery h3{margin:0;font-size:1.25rem;}
.twingallery p{margin:0;opacity:0.75;line-height:var(--paged-blade);}
.timedModal .plottedSearch{max-width:56rem;}
.remoteBreadcrumb{display:flex;flex-direction:column;}
.raisedscrim{display:flex;align-items:flex-start;gap:1.5rem;padding:2rem 0;}
.raisedscrim + .raisedscrim{border-top:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);}
/* The ordinal repeats the row's position as a display ornament, and states no
   ink: at this weight and size the figure is already the loudest thing in the
   row, and inheriting is what keeps it readable on an inverse band. */
.tethered-snippet{font-size:1.5rem;font-weight:800;line-height:1.35;flex-shrink:0;min-width:2.25rem;font-variant-numeric:tabular-nums;}
.plottedSearch h3{margin:0 0 0.5rem;font-size:1.25rem;}
.plottedSearch p{margin:0;opacity:0.75;line-height:var(--paged-blade);max-width:60ch;}
.convergedCanvas .scalargraph{max-width:34rem;}
.layeredRepeater{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--ultrasignal);grid-auto-rows:minmax(220px,auto);}
.bundledStack{padding:var(--tracedPopover);border-radius:var(--steppedsystem);display:flex;flex-direction:column;gap:0.75rem;}
.distributedScene{background:var(--hybridMedia);border:var(--optimalTree) var(--replicatedveil) var(--dynamicmodal);box-shadow:var(--taperedHolder);}
.bundledStack .central-stub{margin-bottom:auto;}
.bundledStack h3{margin:0;font-size:1.25rem;}
.floatingsheet h3{font-size:calc((1rem + (clamp(1.5rem,2.5vw,1.875rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));}
.bundledStack p{margin:0;opacity:0.75;line-height:var(--paged-blade);}
.nested-combo{grid-column:span 1;}
.standardAside{grid-column:span 4;}
.simplerow .textualflyout{top:6rem;}
.tetheredCabinet{display:flex;flex-direction:column;}
.betakernel{display:flex;flex-direction:column;gap:0.75rem;padding:2rem 0;border-top:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);}
.betakernel:first-child{border-top:none;}
.betakernel h3{font-size:1.375rem;margin:0;}
.betakernel p{margin:0;opacity:0.75;font-size:1.0625rem;line-height:var(--paged-blade);max-width:60ch;}
.pipedTrigger .scalargraph{max-width:40rem;}
.finering{display:flex;flex-direction:column;}
.alphaScreen{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(--reduced-series) var(--replicatedveil) var(--dynamicmodal);align-items:start;}
.nested-stepper{display:flex;align-items:center;gap:1rem;}
.alphaScreen:last-child{border-bottom:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);}
.alphaScreen h3{margin:0;font-size:1.25rem;}
.alphaScreen p{margin:0;opacity:0.75;font-size:1.0625rem;line-height:var(--paged-blade);max-width:60ch;}
.symmetric-avatar .scalargraph{max-width:40rem;}
.single-hint{display:grid;grid-template-columns:1fr 1fr;}
.sorted-placard{display:flex;flex-direction:column;gap:2rem;padding:0 2.5rem;}
.sorted-placard:first-child{border-inline-end:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);}
.rollingConsole{display:flex;gap:1.25rem;align-items:flex-start;}
.rollingConsole h3{margin:0 0 0.5rem;font-size:1.25rem;}
.rollingConsole p{margin:0;opacity:0.75;line-height:var(--paged-blade);}
@media(min-width:1024px){
.floatingsheet{grid-column:span 2;grid-row:span 2;}
}
@media(max-width:1024px){
.layeredRepeater{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. */
.floatingsheet,.standardAside{grid-column:span 1;}
.floatingsheet{grid-row:auto;}
}
@media(max-width:768px){
.layeredRepeater{grid-template-columns:1fr;}
.alphaScreen{grid-template-columns:1fr;gap:1rem;padding:1.5rem 0;}
.raisedscrim{flex-direction:column;gap:1rem;}
.single-hint{grid-template-columns:1fr;gap:1.5rem;}
.sorted-placard{padding:0;}
.sorted-placard: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){
.alphaScreen{padding:1.25rem 0;}
.single-hint{gap:1.25rem;}
}.cachedposter,.scaledgutter,.proceduralcheckpoint,.arrayedCursor,.parallelentry,.styledmask{padding:calc(var(--validated-checkpoint) * 0.7) 0 calc(var(--validated-checkpoint) * 0.35);margin-top:calc(var(--validated-checkpoint) * 0.7);border-top:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);}
.fluidwidget{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(--reduced-series) var(--replicatedveil) var(--dynamicmodal);opacity:0.65;font-size:0.875rem;}
.fluidwidget p{margin:0;}
.fluidwidget a{text-decoration:none;}
.fluidwidget a:hover{text-decoration:underline;}
.lower-bracket{margin:0.75rem 0 0;font-size:0.75rem;opacity:0.55;}
.lower-bracket a{text-decoration:none;}
.cappedLever{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:clamp(2rem,4vw,3rem);}
.mid-screen{display:flex;flex-direction:column;gap:1rem;}
.wireless-section{display:flex;flex-direction:column;gap:0.75rem;}
.wireless-section a{text-decoration:none;opacity:0.85;}
.wireless-section a{transition:opacity var(--tracedSymbol) var(--linearpanel),color var(--tracedSymbol) var(--linearpanel);}
.wireless-section a:hover{opacity:1;color:var(--primary);}
.lexicalAction{font-weight:700;margin:0;font-size:0.8125rem;text-transform:uppercase;letter-spacing:0.06em;opacity:0.55;}
.tintedscroller{margin:0;opacity:0.75;max-width:32ch;line-height:var(--paged-blade);}
.wirelesspadding{display:flex;flex-direction:column;gap:0.65rem;font-style:normal;}
/* The dim is the copy's, not the row's. A contact row carries an accent mark
   beside its line, and an opacity on the row multiplies with that mark: the
   rendered audit measured the pin and the envelope at 0.85 of the accent, which
   is the one thing an accent mark may never be. A class on the copy is what the
   opacity lands on instead: the bare tag around it is not available to a
   selector here, because the uniquifier rewrites it (templates.test.ts). */
.dockedLoop{display:inline-flex;align-items:flex-start;gap:0.5rem;text-decoration:none;line-height:var(--paged-blade);min-width:0;}
.semanticpane{opacity:0.85;}
.dockedLoop .ghostTemplate{margin-top:0.125rem;}
.dockedLoop .ghostTemplate{width:1.05rem;height:1.05rem;}
a.dockedLoop:hover .semanticpane{opacity:1;}
.scaledgutter{background:var(--hybridMedia);border-top:none;padding-top:calc(var(--validated-checkpoint) * 0.85);}
.softRegistry{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(2rem,4vw,3rem);align-items:start;}
.quickSearch{display:flex;flex-direction:column;gap:0.875rem;}
.quickSearch p{margin:0;opacity:0.75;max-width:32ch;}
.vitalRack{display:flex;flex-direction:column;gap:0.75rem;text-align:right;font-weight:500;}
.vitalRack a{text-decoration:none;transition:color var(--tracedSymbol) var(--linearpanel);}
.vitalRack a:hover{color:var(--primary);}
.proceduralcheckpoint{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. */
.proceduralcheckpoint .root-digest{display:inline-flex;margin-bottom:1.5rem;}
.baselineslider{display:flex;justify-content:center;gap:1.75rem;flex-wrap:wrap;font-weight:500;margin-bottom:1.5rem;}
.baselineslider a{text-decoration:none;transition:color var(--tracedSymbol) var(--linearpanel);}
.baselineslider a:hover{color:var(--primary);}
.proceduralcheckpoint .wirelesspadding{align-items:center;margin-bottom:2rem;}
/* The short rule under a centred footer is the same 2.5rem stroke the gallery
   entry and the lead paragraph draw, so it takes the same accent — one answer
   for the whole class of short decorative strokes rather than one per block. */
.fluidslab{width:2.5rem;height:2px;background:var(--accent);margin:0 auto;}
.proceduralcheckpoint .fluidwidget{justify-content:center;border-top:none;margin-top:1.5rem;padding-top:0;}
.arrayedCursor{border-top-color:var(--quick-inspector);}
.arrayedCursor .fluidwidget{border-top-color:var(--quick-inspector);}
.parallelentry{padding-top:var(--validated-checkpoint);}
.queuedHeading{margin-bottom:clamp(2rem,4vw,3rem);}
.queuedHeading .root-digest{font-size:calc((1rem + (clamp(2.5rem,9vw,6rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));letter-spacing:calc(var(--relativecontainer,-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. */
.queuedHeading .stitched-segment{display:none;}
.virtual-runner{display:flex;gap:1.5rem;flex-wrap:wrap;}
.virtual-runner a{text-decoration:none;font-weight:500;transition:color var(--tracedSymbol) var(--linearpanel);}
.virtual-runner a:hover{color:var(--primary);}
.parallelentry .wirelesspadding{margin-top:1.5rem;flex-direction:row;gap:1.5rem;flex-wrap:wrap;}
.forkedmatrix{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.25rem;}
.pulsedEmblem{display:flex;gap:1.5rem;flex-wrap:wrap;}
.pulsedEmblem a{text-decoration:none;font-weight:500;opacity:0.85;transition:opacity var(--tracedSymbol) var(--linearpanel),color var(--tracedSymbol) var(--linearpanel);}
.pulsedEmblem a:hover{opacity:1;color:var(--primary);}
.calibrated-lightbox{margin:0;opacity:0.6;font-size:0.875rem;}
.styledmask .wirelesspadding{margin-top:1.5rem;}
@media(max-width:768px){
.cappedLever,.softRegistry{grid-template-columns:1fr;gap:2rem;}
.vitalRack{text-align:left;}
.fluidwidget{flex-direction:column;align-items:flex-start;}
.forkedmatrix{flex-direction:column;align-items:flex-start;}
}
@media(max-width:1024px){
.cappedLever{grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));}
.softRegistry{grid-template-columns:1fr;}
.vitalRack{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){
.cappedLever,.softRegistry{gap:1.5rem;}
.fluidwidget{margin-top:1.5rem;padding-top:1.25rem;}
.queuedHeading{margin-bottom:1.5rem;}
.queuedHeading .root-digest{font-size:calc((1rem + (clamp(2rem,10vw,2.75rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));}
}.boxedmodule{display:grid;gap:1.25rem;}
.typedPreview{display:flex;flex-direction:column;gap:0.5rem;min-width:0;}
.hashedfolder{font-weight:600;font-size:0.875rem;letter-spacing:0.01em;}
.forkedsegment{display:flex;flex-direction:column;gap:1.5rem;}
.linear-container{margin:0;font-size:0.9375rem;font-weight:600;color:var(--primary);}
.fixedPad{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;}
.applied-carousel{display:flex;flex-direction:column;gap:0.75rem;margin:0 0 clamp(1.75rem,3vw,2.5rem);max-width:44rem;}
.focalwrapper{align-items:center;text-align:center;margin-inline:auto;}
.containshell{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem 1.5rem;}
.containshell .latenttile,.containshell .fixedPad{grid-column:1/-1;}
.quantumpackage{padding:var(--tracedPopover);max-width:44rem;margin:0 auto;}
.portedcluster{display:grid;grid-template-columns:0.85fr 1.15fr;gap:clamp(2rem,4vw,4rem);align-items:start;}
.soft-callout{padding:var(--tracedPopover);}
.temperedanchor{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 action colour and doubles in weight,
   which is
   a visible change in the same place the field already draws. */
.straight-terminal input,.straight-terminal textarea{border:none;border-bottom:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);border-radius:0;padding-left:0;padding-right:0;background:transparent;}
.straight-terminal input:not([type="checkbox"]):not([type="radio"]):focus,.straight-terminal textarea:focus,.straight-terminal input:not([type="checkbox"]):not([type="radio"]):focus-visible,.straight-terminal textarea:focus-visible{outline:none;box-shadow:inset 0 -2px 0 var(--primary);border-bottom-color:var(--primary);}
.straight-terminal textarea{min-height:5rem;}
.tieredoutline{padding:var(--tracedPopover);}
.privateconsole .computedloop{max-width:44rem;margin-inline:auto;}
.opticalGlyph{max-width:36rem;}
.secondary-hub{font-size:0.8125rem;opacity:0.65;margin:1rem 0 0;}
.orderedtray{font-weight:400;opacity:0.6;text-transform:none;}
@media(max-width:768px){
.portedcluster{grid-template-columns:1fr;}
.containshell{grid-template-columns:1fr;}
.fixedPad .dynamicHeader{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){
.portedcluster{gap:1.5rem;}
}.batchedLoop .scalargraph,.doubledsignal .scalargraph,.immutableSpinner .scalargraph,.queuedPane .scalargraph{max-width:none;}
.handheldsegment .fusedMask{align-items:center;}
.snapped-region{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:var(--ultrasignal);}
.publicparticle{display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden;transition:transform var(--tracedSymbol) var(--linearpanel),box-shadow var(--tracedSymbol) var(--linearpanel);}
/* 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. */
.opaqueFolder{padding:clamp(1.25rem,2.5vw,1.75rem);flex:1;}
.saturatedTimeline{margin:0;}
.saturatedTimeline 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). */
.saturatedTimeline img,.tactile-console img,.typed-registry img{border-width:0;border-radius:0;}
.opaqueFolder h3{margin:0 0 0.5rem;font-size:1.25rem;}
.opaqueFolder p{margin:0;opacity:0.75;line-height:var(--paged-blade);}
/* 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. */
.semanticPrimitive{margin:0 0 clamp(2rem,4vw,3rem);}
.semanticPrimitive img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--narrowLockup);display:block;}
.rigidPlate{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. */
.decodedRouter::before,.transientwrap::before{content:"";display:block;width:2.5rem;height:2px;margin-bottom:1rem;background:var(--accent);}
.decodedRouter h3{margin:0 0 0.5rem;font-size:calc((1rem + (clamp(1.25rem,2vw,1.5rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));}
.decodedRouter p{margin:0;opacity:0.75;line-height:var(--paged-blade);max-width:46ch;}
.autopulse{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--ultrasignal);}
/* 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. */
.scopedWell{display:flex;flex-direction:column;background:var(--hybridMedia);color:var(--foreground);border-radius:var(--steppedsystem);overflow:hidden;border:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);}
.immutableSpinner .lowerposter 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. */
.resilientpulse{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;}
.tactile-console{margin:0;}
.tactile-console img{width:100%;height:100%;min-height:18rem;object-fit:cover;display:block;}
.lowerposter{padding:clamp(1.5rem,3vw,2rem);flex:1;}
.lowerposter h3{margin:0 0 0.5rem;font-size:1.375rem;}
.lowerposter p{margin:0;opacity:0.75;line-height:var(--paged-blade);}
.trackedwell{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4rem);align-items:start;}
.runtime-gutter{grid-template-columns:1fr;}
.side-column{display:flex;flex-direction:column;}
.minimalbreadcrumb{margin:0 0 1.5rem;}
.minimalbreadcrumb img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--narrowLockup);display:block;}
.constantconsole h3{margin:0 0 0.5rem;font-size:calc((1rem + (clamp(1.375rem,2.5vw,1.75rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));}
.constantconsole p{margin:0;opacity:0.75;font-size:1.0625rem;line-height:var(--paged-blade);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. */
.streamedEntry{display:grid;gap:clamp(1.75rem,3vw,2.5rem);align-content:start;}
.runtime-gutter .streamedEntry{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));}

.transientwrap h3{margin:0 0 0.5rem;font-size:calc((1rem + (clamp(1.25rem,2vw,1.5rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));}
.transientwrap p{margin:0;opacity:0.75;font-size:1.0625rem;line-height:var(--paged-blade);max-width:52ch;}
.thintoken{display:flex;flex-direction:column;}
.fusedMask{display:flex;gap:clamp(2rem,5vw,4rem);align-items:center;padding:clamp(2.5rem,5vw,4rem) 0;border-top:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);}
.fusedMask:last-child{border-bottom:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);}
.thintoken>.fusedMask:nth-child(even){flex-direction:row-reverse;}
.passivelisting{flex:1;}
.passivelisting h3{margin:0 0 1rem;font-size:calc((1rem + (clamp(1.625rem,3.5vw,2.25rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));}
.passivelisting p{margin:0;opacity:0.75;font-size:1.125rem;line-height:var(--paged-blade);max-width:60ch;}
.minimal-veil{width:45%;flex-shrink:0;margin:0;}
.minimal-veil img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--narrowLockup);display:block;}
.fallbackticker .offline-callout{display:grid;grid-template-columns:repeat(3,1fr);}
.globalring{position:relative;overflow:hidden;aspect-ratio:1;}
.globalring::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;}
.typed-registry{margin:0;height:100%;}
.typed-registry 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. */
.optimal-poster{display:flex;align-items:flex-end;}
.optimal-poster::after{display:none;}
.optimal-poster .condensedrule{position:static;width:100%;}
.condensedrule{position:absolute;inset:auto 0 0;z-index:1;padding:1.5rem;color:var(--background);transition:transform var(--tracedSymbol) var(--linearpanel);}
.globalring:not(.optimal-poster):hover .condensedrule,.globalring:not(.optimal-poster):focus-within .condensedrule{transform:var(--centerCrumb);}
.condensedrule h3{margin:0 0 0.25rem;font-size:1.125rem;}
.condensedrule p{margin:0;font-size:0.875rem;opacity:0.85;line-height:var(--paged-blade);}
@media(max-width:1024px){
.fallbackticker .offline-callout{grid-template-columns:repeat(2,1fr);}
.autopulse{grid-template-columns:1fr;}
}
@media(max-width:768px){
.fallbackticker .offline-callout{grid-template-columns:1fr;}
.rigidPlate{grid-template-columns:1fr;}
.semanticPrimitive img{aspect-ratio:16/9;}
.autopulse{grid-template-columns:1fr;}
.resilientpulse{grid-template-columns:1fr;}
.trackedwell{grid-template-columns:1fr;gap:3rem;}
.fusedMask,.thintoken>.fusedMask:nth-child(even){flex-direction:column;gap:2rem;padding:2rem 0;}
.minimal-veil{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){
.semanticPrimitive{margin-bottom:1.5rem;}
.trackedwell{gap:1.5rem;}
.fusedMask,.thintoken>.fusedMask: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. */
.flatpivot{border-bottom:1px var(--replicatedveil) var(--smartloader);}
/* 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. Both inherit the bar's own ink; weight alone distinguishes the lead
   without splitting one name into two colour identities. */
.replicatedkernel{font-weight:calc(var(--minimalstrip,600) - 100);}
.outerWizard{font-weight:var(--minimalstrip,600);}
.replicated-search .offline-marker a{font-weight:500;}
.lexical-cluster .offline-marker a{text-transform:uppercase;letter-spacing:0.08em;font-weight:600;}
.fallbackChart .offline-marker a{font-family:var(--coverradar);text-transform:uppercase;letter-spacing:0.12em;font-weight:800;}
.fallbackChart .offline-marker a[aria-current="page"]{font-weight:900;}
.fallbackChart .replicatedkernel{text-transform:uppercase;letter-spacing:0.06em;}
.clip-card .offline-marker a{font-style:italic;font-weight:500;}
.clip-card .replicatedkernel{font-style:italic;}
.custom-lightbox .offline-marker a{font-variant-caps:all-small-caps;letter-spacing:0.06em;font-weight:600;}
.custom-lightbox .replicatedkernel{font-variant-caps:all-small-caps;letter-spacing:0.03em;}
.distributedRack .offline-marker a{text-transform:uppercase;letter-spacing:0.18em;font-weight:500;}
.distributedRack .replicatedkernel{letter-spacing:0.06em;}
.liveskeleton .offline-marker a{font-family:var(--coverradar);font-weight:600;}
.liveskeleton .replicatedkernel{font-weight:calc(var(--minimalstrip,600) + 100);}
.straightcollection .offline-marker a{font-weight:800;}
.straightcollection .offline-marker a[aria-current="page"]{font-weight:900;}
.straightcollection .replicatedkernel{text-transform:uppercase;font-weight:calc(var(--minimalstrip,600) + 100);}
.lazyHint .offline-marker a{text-transform:uppercase;letter-spacing:0.04em;font-size:0.8125rem;font-weight:600;}
.lazyHint .replicatedkernel{font-size:1.125rem;}
.textualGauge{display:flex;align-items:center;justify-content:space-between;gap:clamp(1rem,2vw,1.5rem);padding:clamp(0.875rem,2vw,1.125rem) 0;}
.semantic-summary{display:flex;flex-direction:column;align-items:center;gap:0.875rem;padding:clamp(1rem,2vw,1.25rem) 0;}
.outerCursor{display:flex;align-items:center;gap:clamp(1rem,2vw,1.5rem);}
.offline-marker{display:flex;flex-wrap:wrap;gap:clamp(1rem,2vw,1.5rem);}
/* The underline means one thing on the two 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.
   Both bars draw it in the navigation marker token, the one whose contract is
   "a colour legible on this bar's ground": v1 used to name the page's primary
   and v2 currentColor, one visual role answered two ways, and the
   three themes whose bar stands on the page's ink had to repaint each of them
   separately. A theme that wants the line in the labels' own ink instead names
   it once (spectrum-neutral, theme-chrome.ts). */
.flatpivot .offline-marker a::after{content:"";position:absolute;left:0;bottom:-0.35rem;width:0;height:2px;background:var(--leftmesh);transition:width var(--tracedSymbol) var(--linearpanel);}
.flatpivot .offline-marker 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. */
.central-notice .root-digest{max-height:3rem;overflow:hidden;transition:max-height var(--tracedSymbol) var(--linearpanel),opacity var(--tracedSymbol) var(--linearpanel);}
.central-notice[data-floating-checkpoint] .root-digest{max-height:0;opacity:0;}
.central-notice[data-floating-checkpoint] .semantic-summary{gap:0;padding-block:clamp(0.5rem,1.2vw,0.75rem);}
.central-notice .offline-marker a{text-transform:uppercase;font-size:0.8125rem;letter-spacing:0.1em;font-weight:600;}
/* v2 draws its line in the accent rather than in the navigation marker: this
   bar signs itself over its links — the brand mark sits centred above the row
   — and the stroke that opens under a label reads as part of that signature.
   The palette holds the accent at 3:1 on the page and on an inverse band
   alike, which is the graphical floor a short stroke is held to. v1 keeps the
   marker token: it is the bar without a lockup of its own. */
.central-notice .offline-marker a::after{content:"";position:absolute;left:50%;right:50%;bottom:-0.3rem;height:1px;background:var(--accent);transition:left var(--tracedSymbol) var(--linearpanel),right var(--tracedSymbol) var(--linearpanel);}
.central-notice .offline-marker a:hover::after{left:0;right:0;}
.primeWall .offline-marker a{padding:0.35rem 0.9rem;border-radius:var(--managedBillboard);}
/* 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. */
.primeWall .offline-marker a[aria-current="page"]{font-weight:500;color:color-mix(in srgb,var(--leftmesh) 65%,var(--modular-gallery));}
.federated-checkpoint{display:none;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;cursor:pointer;}
.federated-checkpoint .dimmed-socket{display:none;}
.federated-checkpoint[aria-expanded="true"] .rolling-loader{display:none;}
.federated-checkpoint[aria-expanded="true"] .dimmed-socket{display:inline-flex;}
.central-notice .offline-marker{justify-content:center;}
.primeWall{border-bottom:1px var(--replicatedveil) var(--smartloader);}
/* 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. */
.primeWall .textualGauge{padding-block:clamp(0.5rem,1.2vw,0.75rem);}
.primeWall .offline-marker{border:var(--reduced-series) var(--replicatedveil) var(--tunedEnvelope);border-radius:var(--managedBillboard);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{--named-symbol:5rem;}
.grainedwell{height:var(--named-symbol);}
/* The bar's ink is the bar's, not the page's. This variant used to name
   --foreground here and on its labels — the page's ink — so the two themes
   that stand their navigation on that very colour had to repaint the whole bar
   back (theme-chrome.ts). Named as the navigation token it already resolves to
   the right ink under every theme, and a new one gets it for free. */
.scalarbundle{color:var(--modular-gallery);transition:background var(--tracedSymbol) var(--linearpanel),backdrop-filter var(--tracedSymbol) var(--linearpanel),box-shadow var(--tracedSymbol) var(--linearpanel);}
.scalarbundle .textualGauge{min-height:var(--named-symbol);padding-block:0;align-items:stretch;transition:min-height var(--tracedSymbol) var(--linearpanel);}
.scalarbundle .federated-checkpoint{align-self:center;}
.tiered-bubble{display:inline-flex;align-items:center;gap:0.75rem;text-transform:uppercase;transition:opacity var(--tracedSymbol) var(--linearpanel);}
.tiered-bubble:hover{opacity:0.8;}
.singlePane{font-weight:var(--minimalstrip,600);letter-spacing:var(--relativecontainer,-0.01em);}
.synced-sheet{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:2rem;height:2rem;flex-shrink:0;color:var(--accent);}
.synced-sheet svg{width:100%;height:100%;}
.scalarbundle .outerCursor{align-self:stretch;align-items:stretch;}
.scalarbundle .offline-marker{gap:0;align-items:stretch;}
.scalarbundle .offline-marker a{color:var(--modular-gallery);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(--tracedSymbol) var(--linearpanel),font-size var(--tracedSymbol) var(--linearpanel),color var(--tracedSymbol) var(--linearpanel);}
/* The ground a cell lights up with is a wash of the bar's own ink, the way
   v3's pill and v6's cell already do it. It used to be --primary, which on
   the bars that stand on the page's ink is a tint the ground swallows. */
.scalarbundle .offline-marker a::before{content:"";position:absolute;inset:0;background:var(--modular-gallery);opacity:0;transition:opacity var(--tracedSymbol) var(--linearpanel);}
.scalarbundle .offline-marker a:hover::before{opacity:0.1;}
.scalarbundle .offline-marker a:hover,.scalarbundle .offline-marker a[aria-current="page"]{color:var(--leftmesh);}
.scalarbundle .offline-marker a[aria-current="page"]{font-weight:800;}
.scalarbundle .offline-marker a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--leftmesh);transition:bottom var(--tracedSymbol) var(--linearpanel);}
/* 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. */
.scalarbundle[data-floating-checkpoint]{background-color:color-mix(in srgb,var(--rear-session) 82%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px var(--replicatedveil) var(--smartloader);}
.scalarbundle[data-floating-checkpoint] .textualGauge{min-height:3.5rem;}
.scalarbundle[data-floating-checkpoint] .offline-marker a{padding:0 1rem;font-size:0.875rem;}
.scalarbundle[data-floating-checkpoint] .offline-marker a[aria-current="page"]::after{bottom:0.55rem;}
.scalarbundle[data-floating-checkpoint] .offline-marker a:hover::before{opacity:0;}
.contextual-article .textualGauge{gap:clamp(1rem,3vw,2.5rem);padding-block:clamp(0.6rem,1.2vw,0.9rem);}
.mobileaccordion{display:inline-flex;align-items:center;gap:0.75rem;min-width:0;}
.richstamp{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;flex-shrink:0;border:var(--reduced-series) var(--replicatedveil) var(--accent);color:var(--accent);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. */
.frontemblem{display:grid;grid-template-columns:minmax(0,max-content);min-width:0;line-height:1.15;}
.boosted-lightbox{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. */
.flexibleLightbox{color:var(--background);font-family:var(--gatedspace,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%;}
.contextual-article .dynamicHeader,.contextual-article .dynamicHeader:hover{box-shadow:none;border-color:transparent;}
.contextual-article .dynamicHeader:hover{background:transparent;color:var(--background);border-color:var(--background);opacity:1;}
.contextual-article .offline-marker{counter-reset:looped-slate;align-items:center;gap:0;}
.contextual-article .offline-marker 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(--tracedSymbol) var(--linearpanel);}
.contextual-article .offline-marker a::after{content:"";position:absolute;left:0;top:0.25rem;bottom:0.25rem;border-left:var(--reduced-series) var(--replicatedveil) var(--background);opacity:0.32;}
.contextual-article .offline-marker a:first-child::after{display:none;}
.contextual-article .offline-marker a::before{counter-increment:looped-slate;content:counter(looped-slate,decimal-leading-zero);color:color-mix(in srgb,var(--background) 55%,transparent);font-size:0.8125rem;font-weight:700;transition:color var(--tracedSymbol) var(--linearpanel);}
/* 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. */
.contextual-article .offline-marker a:hover::before,.contextual-article .offline-marker a[aria-current="page"]::before{color:color-mix(in srgb,var(--primary) 48%,var(--background));}
/* v6 — the divided bar, and the one bar that is not measured to the page's
   shell: the row takes the whole window and every cell in it stands the full
   height of the bar with a rule between it and the next. That frame is the
   layout, so a brand cell starting short of the left edge or an enquiry cell
   ending short of the right one is a frame that failed to close — the row was
   capped at 90rem and centred, which left exactly that gap on a wide screen.
   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. */
.fallback-label{border-bottom:2px var(--replicatedveil) var(--tunedEnvelope);}
.tiered-padding{display:flex;align-items:stretch;width:100%;}
.innerBackdrop{display:flex;align-items:center;gap:0.75rem;min-width:0;padding:0.9rem clamp(1rem,2vw,1.5rem);}
.innerBackdrop .beta-blade{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase;letter-spacing:0.14em;font-size:0.875rem;line-height:1.15;}
.fallback-label .outerCursor{flex:1;align-items:stretch;gap:0;}
.fallback-label .offline-marker{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. */
.fallback-label .offline-marker a{display:inline-flex;align-items:center;border-radius:0;padding:0 clamp(0.9rem,1.6vw,1.25rem);border:var(--reduced-series) var(--replicatedveil) var(--tunedEnvelope);border-width:0;border-inline-start-width:var(--reduced-series);text-transform:uppercase;letter-spacing:0.2em;font-size:0.7rem;font-weight:500;transition:background var(--tracedSymbol) var(--linearpanel),color var(--tracedSymbol) var(--linearpanel);}
.fallback-label .offline-marker 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. */
.fallback-label .offline-marker a:last-child{border-inline-end-width:var(--reduced-series);}
/* 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. */
.fallback-label .offline-marker a:hover{background:color-mix(in srgb,var(--modular-gallery) 14%,var(--rear-session));}
/* 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. */
.fallback-label .offline-marker a[aria-current="page"]{background:var(--modular-gallery);color:var(--rear-session);}
/* 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. */
.bundled-skeleton{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;--centerCrumb:none;--inlineloader:1;--technicalcheckpoint:none;--cover-signal:none;--lexicalshelf:var(--modular-gallery);--codedToken:var(--rear-session);}

.bundled-skeleton .ghostTemplate{width:0.9rem;height:0.9rem;}
.fallback-label .federated-checkpoint{margin-inline-start:auto;width:3.5rem;height:auto;border:0;border-inline-start:2px var(--replicatedveil) var(--tunedEnvelope);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. */
.innerBackdrop{transition:padding var(--tracedSymbol) var(--linearpanel);}
.innerBackdrop .stitched-segment{transition:width var(--tracedSymbol) var(--linearpanel),height var(--tracedSymbol) var(--linearpanel);}
.fallback-label[data-floating-checkpoint] .innerBackdrop{padding-block:0.45rem;}
.fallback-label[data-floating-checkpoint] .innerBackdrop .stitched-segment{width:1.75rem;height:1.75rem;}
.fallback-label[data-floating-checkpoint] .innerBackdrop .autoCheckpoint{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. */
.functional-vector{padding:0;width:calc(var(--prime-system) - 0.25rem);height:calc(var(--prime-system) - 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. */
.functional-vector:hover{box-shadow:none;}
.functional-vector .ghostTemplate{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. */
.macro-crumb{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. */
.mounted-splash .beta-blade,.mounted-splash .offline-marker a,.mounted-splash .dynamicHeader{white-space:nowrap;}
/* The safety valve, in two parts, for every bar rather than for the one that
   was seen to overflow. A bar's contents are drawn from the plan and from model
   copy — five pages when a plan asks for all three optional ones, a brand name
   nobody capped, a CTA label of up to twenty characters — so the widest bar a
   site can build is not the widest bar anyone rendered.
   Neither part clips: the open navigation panel is a child of the bar it drops
   out of, so an overflow rule on either would cut the panel off on a phone.
   1. A flex item refuses to shrink below its content by default, so one long
      name used to push the row past the shell instead of taking the space that
      was there. Every direct child of a bar may shrink, and the name is the
      part that gives: it is the only run of copy here that reads with its tail
      clipped, since the mark beside it already says whose site this is.
   2. Between the burger's breakpoint and a comfortable desktop the air between
      the parts closes up: the gaps of the row, the panel and the link run, and
      the horizontal padding of the three bars that pay the most width per label
      (v4's cells, v5's ordinal and rule, v6's cells).
      Type is deliberately left alone. A theme states the face, case, tracking
      and often the size of its navigation labels (theme-chrome.ts), and its
      sheet is layered after this one at equal specificity — a size or a tracking
      written here would be dead on the bars a theme restates and would flatten
      the seeded v1 treatments and v5's tracking on the ones it does not. Spacing
      is the part no theme claims, so it is the part that gives. */
.textualGauge>*,.semantic-summary>*,.tiered-padding>*,.outerCursor,.offline-marker{min-width:0;}
.mounted-splash .beta-blade{overflow:hidden;text-overflow:ellipsis;}
/* A button the renderer marked as one page too many for its bar: it is off the
   bar wherever the links stand beside it, and back inside the open panel below
   the burger's breakpoint, where the panel stacks and nothing is competing for
   the width. Written above that breakpoint so the panel's own rules need say
   nothing about it. */
@media(min-width:1101px){.distributedfeed{display:none;}}
@media(min-width:1101px) and (max-width:1400px){
.textualGauge,.outerCursor,.offline-marker{gap:1rem;}
.contextual-article .textualGauge{gap:1.25rem;}
.scalarbundle .offline-marker a{padding:0 1.25rem;}
.contextual-article .offline-marker a{padding:1.15rem 0.75rem;}
.fallback-label .offline-marker a{padding:0 1.1rem;}
}
/* 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){
.textualGauge,.semantic-summary{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. */
.central-notice[data-floating-checkpoint] .root-digest{max-height:none;opacity:1;}
.federated-checkpoint{display:inline-flex;}
.outerCursor{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(--rear-session);border-top:var(--reduced-series) var(--replicatedveil) var(--tunedEnvelope);border-bottom:var(--reduced-series) var(--replicatedveil) var(--tunedEnvelope);}
.outerCursor[data-measured-billboard]{display:flex;}
.offline-marker{flex-direction:column;gap:0.25rem;}
.offline-marker a{padding:0.65rem 0.25rem;}
.primeWall .offline-marker{background:transparent;border:none;padding:0;gap:0.25rem;}
.offline-marker a::after{display:none;}
:root{--named-symbol:4rem;}
.scalarbundle[data-floating-checkpoint] .textualGauge{min-height:3.25rem;}
.scalarbundle .offline-marker{gap:0.25rem;}
.scalarbundle .outerCursor{align-self:auto;align-items:stretch;background:var(--rear-session);}
.scalarbundle .offline-marker a,.scalarbundle[data-floating-checkpoint] .offline-marker a{padding:0.65rem 0.25rem;font-size:0.9375rem;}
.scalarbundle .offline-marker a[aria-current="page"]::after,.scalarbundle[data-floating-checkpoint] .offline-marker a[aria-current="page"]::after{display:block;bottom:0.35rem;}
.contextual-article .outerCursor{background:var(--live-thumbnail);border-color:var(--background);}
.contextual-article .offline-marker{gap:0.25rem;}
.contextual-article .offline-marker 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. */
.tiered-padding{align-items:center;}
.fallback-label .outerCursor{padding:0;gap:0;border-top-width:2px;}
.fallback-label .offline-marker{gap:0;}
.fallback-label .offline-marker a,.fallback-label .offline-marker a:first-child,.fallback-label .offline-marker a:last-child{padding:0.9rem 1.25rem;border-width:0;border-block-end-width:var(--reduced-series);}
.bundled-skeleton{justify-content:center;padding:0.9rem 1.25rem;}
.fallback-label .federated-checkpoint{height:2.75rem;}
.outerCursor .dynamicHeader{width:100%;}
.outerCursor .functional-vector{width:100%;height:auto;min-height:calc(var(--prime-system) - 0.25rem);border-radius:var(--synced-callout);padding:0.5rem var(--saturatedthread);gap:0.5rem;}
.outerCursor .macro-crumb{display:inline;}
}.rendereddashboard{padding:calc(var(--validated-checkpoint) * 1.35) 0 calc(var(--validated-checkpoint) * 0.85);}
.kinetic-toast{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. */
.kinetic-toast h1,.kinetic-toast h2{font-size:calc((1rem + (clamp(2.5rem,7vw,5rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));line-height:1.05;margin:0;max-width:16ch;overflow-wrap:break-word;}
.kinetic-toast .inline-scroller{margin-inline:auto;}
/* A filled badge inherits its light copy and its dark glyph from the shared
   accent fill, so only the size is stated here. The washed treatments below
   replace both where their ground is diluted: the line badge stands on the page
   through a 10% tint, and the fill's dark mark on a dark palette's page would
   be black on near-black. */
.applied-lightbox .ghostTemplate{width:1rem;height:1rem;}
.virtualCheckpoint .ghostTemplate{color:currentColor;}
.boxedtracker{border-radius:var(--managedBillboard);}
.planarToast{border-radius:var(--managedBillboard);}
.visualCarousel{border-radius:var(--matched-ticker);}
.densePopup{border-radius:var(--matched-ticker) var(--matched-ticker) var(--matched-ticker) 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 readable ink instead, while its
   ornamental rule and icon keep the stable accent.
   The ghost badge uses the page surface outright because accent contrast is
   guaranteed there; even a 10% tint pulled its accent glyph below 3:1 in the
   darkest palette pairs. The accent outline does the stating. */
.rankedSegment{border-color:var(--accent);color:var(--foreground);}
.rankedSegment .ghostTemplate{color:var(--accent);}
.virtualCheckpoint{background:color-mix(in srgb,var(--guided-repeater) 10%,transparent);color:var(--foreground);letter-spacing:var(--shortRail);font-size:0.75rem;}
.virtualCheckpoint::before{content:"";width:2rem;height:2px;background:var(--accent);flex:0 0 auto;}
.concurrentAnchor{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;}
.concurrentAnchor li{display:flex;align-items:center;gap:0.5rem;}
.concurrentAnchor .ghostTemplate{width:1.1rem;height:1.1rem;color:var(--accent);}
.stripedFacet{padding:calc(var(--validated-checkpoint) * 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. */
.computedCaption{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. */
.opticalAdapter{display:flex;align-items:center;gap:0.75rem;}
.opticalAdapter::before{content:"";width:2rem;height:2px;background:var(--accent);flex:0 0 auto;}
.unifiedPadding{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. */
.unifiedPadding h1,.unifiedPadding h2{font-size:calc((1rem + (clamp(2rem,4.5vw,3rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));line-height:1.1;margin:0;overflow-wrap:break-word;}
.core-plugin{margin:0;display:flex;}
.core-plugin img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--narrowLockup);display:block;box-shadow:var(--taperedHolder);}
.contextualNav{aspect-ratio:4/3;border-radius:var(--steppedsystem);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 18%,transparent),color-mix(in srgb,var(--accent) 4%,transparent));border:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);}
.bandedOutline{padding:var(--validated-checkpoint) 0 calc(var(--validated-checkpoint) * 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. */
.bandedOutline::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(--accent) 30%,transparent) 0%,transparent 66%),linear-gradient(0deg,color-mix(in srgb,var(--accent) 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. */
.pixelhandle{max-width:64rem;}
.semantic-space{font-size:calc((1rem + (clamp(2.5rem,7vw,4.5rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));line-height:0.95;margin:0 0 clamp(2rem,4vw,3rem);text-transform:uppercase;word-break:break-word;}
/* The display type opens on a heavier capital: the first letter is set a step
   above the weight the theme gives the rest of the line, which is the whole of
   the ornament — a hero here is one block of ink and stays that way. */
.semantic-space::first-letter{font-weight:max(var(--batchedRack),800);}
/* A thin rule divides the display type from the closing row, and the brand
   accent runs along its first half before it fades back into the hairline —
   one of the few places the accent is still spent, because this rule is part
   of the hero's composition rather than an ornament on a repeated element. */
.scrollpaper{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;border-top:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);padding-top:clamp(1.5rem,3vw,2.25rem);position:relative;}
.scrollpaper::before{content:"";position:absolute;inset-inline:0;top:calc(var(--reduced-series) * -1);height:2px;background:linear-gradient(90deg,var(--accent) 0%,color-mix(in srgb,var(--accent) 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. */
.constantTree{padding:calc(var(--validated-checkpoint) * 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. */
.federated-stub{position:absolute;inset:0;margin:0;z-index:0;}
.constantTree .federated-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. */
.federated-stub img{width:100%;height:100%;object-fit:cover;display:block;border:0;border-radius:0;}
.federated-stub::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%);}
.constantTree::before{content:"";position:absolute;top:-15%;right:-10%;width:45vw;height:45vw;border-radius:50%;background:var(--tracedring);filter:blur(90px);z-index:-1;}
.constantTree::after{content:"";position:absolute;bottom:-15%;left:-10%;width:35vw;height:35vw;border-radius:50%;background:var(--tracedring);filter:blur(80px);z-index:-1;}
.ambientthumb{max-width:min(100%,56rem);margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.25rem;padding:var(--tracedPopover);padding-block:calc(var(--tracedPopover) * 2.4);padding-inline:calc(var(--tracedPopover) * 1.5);border:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);border-radius:var(--steppedsystem);background:var(--fusedDrawer);box-shadow:var(--taperedHolder);}
.ambientthumb h1,.ambientthumb h2{font-size:calc((1rem + (clamp(2.25rem,6vw,3.75rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));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. */
.directGrip{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. */
.managedsurface{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;flex:1;}
.draftedContent{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:1.25rem;padding-block:calc(var(--validated-checkpoint) * 1.25);padding-inline-start:min(max(calc(var(--guidedBracket) / 2),calc(100% - var(--loopedPadding) / 2)),8rem);padding-inline-end:clamp(2rem,5vw,4rem);}
.tunedNav{margin:0;display:flex;align-self:stretch;}
.tunedNav 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. */
.draftedContent h1,.draftedContent h2{font-size:calc((1rem + (clamp(2rem,4vw,3.25rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));line-height:1.05;margin:0;max-width:16ch;overflow-wrap:break-word;}
.virtualGraph{border-color:var(--quick-inspector);}
.contextualRack{padding:calc(var(--validated-checkpoint) * 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. */
.contextualRack::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(--accent) 38%,transparent) 0%,transparent 68%),radial-gradient(95% 90% at -5% 105%,color-mix(in srgb,var(--accent) 22%,transparent) 0%,transparent 64%),linear-gradient(155deg,color-mix(in srgb,var(--accent) 13%,transparent) 0%,transparent 55%);}
.rotatedscreen{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);gap:clamp(2.5rem,5vw,4rem);align-items:center;}
.straighttoast{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. */
.straighttoast h1,.straighttoast h2{font-size:calc((1rem + (clamp(2rem,4.5vw,3rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));line-height:1.1;margin:0;overflow-wrap:break-word;}
/* A short accent rule closes the headline. */
.straighttoast h1::after,.straighttoast h2::after{content:"";display:block;width:4rem;height:3px;margin-top:clamp(1rem,2vw,1.5rem);background:var(--accent);}
.derivedSlider{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ultrasignal);padding:var(--tracedPopover);border:var(--optimalTree) var(--replicatedveil) var(--dynamicmodal);border-radius:var(--steppedsystem);box-shadow:var(--taperedHolder);background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 22%,var(--hybridMedia)) 0%,color-mix(in srgb,var(--hybridMedia) 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. */
.derivedSlider .light-toggle{font-size:calc((1rem + (clamp(1.5rem,3vw,2rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));}
@media(max-width:768px){
.computedCaption,.managedsurface,.rotatedscreen{grid-template-columns:1fr;}
.draftedContent{padding-inline:var(--guidedBracket);}
.tunedNav img{height:auto;aspect-ratio:16/9;}
.computedCaption{align-items:center;}
.unifiedPadding h1,.unifiedPadding h2{font-size:calc((1rem + (clamp(2.25rem,7vw,3rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));}
.scrollpaper{flex-direction:column;align-items:flex-start;}
.derivedSlider{grid-template-columns:1fr;}
}
@media(max-width:640px){
.kinetic-toast{gap:1.25rem;}
.kinetic-toast h1,.kinetic-toast h2{font-size:calc((1rem + (clamp(2.25rem,10vw,2.75rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));}
.semantic-space{font-size:calc((1rem + (clamp(2.25rem,10vw,2.75rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));margin-bottom:1.5rem;}
.unifiedPadding h1,.unifiedPadding h2,.draftedContent h1,.draftedContent h2,.straighttoast h1,.straighttoast h2,.ambientthumb h1,.ambientthumb h2{font-size:calc((1rem + (clamp(2rem,9vw,2.5rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));}
.concurrentAnchor{gap:0.75rem 1.25rem;font-size:0.9rem;}
.rendereddashboard{padding:calc(var(--validated-checkpoint) * 0.85) 0 calc(var(--validated-checkpoint) * 0.6);}
.stripedFacet{padding:calc(var(--validated-checkpoint) * 0.85) 0;}
.bandedOutline{padding:calc(var(--validated-checkpoint) * 0.75) 0 calc(var(--validated-checkpoint) * 0.55);}
.constantTree{padding:calc(var(--validated-checkpoint) * 0.85) 0;}
.draftedContent{padding-block:calc(var(--validated-checkpoint) * 0.85);}
.contextualRack{padding:calc(var(--validated-checkpoint) * 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. The ledger indices state no ink of
   their own and read off the card they stand on, like the dock's copy and CTA
   beside them. 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. */
.literalGutter{position:relative;isolation:isolate;overflow:clip;min-height:clamp(32rem,46vw,46rem);display:flex;align-items:flex-end;padding:calc(var(--validated-checkpoint) * 1.6) 0 calc(var(--validated-checkpoint) * 0.7);}
.opaquelisting,.retro-region{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;margin:0;z-index:0;pointer-events:none;}
.retro-region img{width:100%;height:100%;object-fit:cover;display:block;border:0;border-radius:0;}
.headless-padding{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));}
.literalGutter .federated-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. */
.spacedmarker{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(--steppedsystem);background:color-mix(in srgb,var(--fusedDrawer) 90%,transparent);border:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);box-shadow:var(--taperedHolder);backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);}
.beta-roster{display:flex;flex-direction:column;align-items:flex-start;gap:1.5rem;min-width:0;}
.beta-roster h1,.beta-roster h2{font-size:calc((1rem + (clamp(2.25rem,5.5vw,4rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));line-height:1.02;margin:0;max-width:min(16ch,100%);overflow-wrap:break-word;}
.beta-roster .inline-scroller{max-width:38rem;margin:0;}
.beta-roster .namedEntry{margin-top:0.5rem;}
.parallel-gutter{align-self:stretch;padding-left:clamp(1.5rem,3vw,2.5rem);border-left:var(--reduced-series) var(--replicatedveil) var(--quick-inspector);}
.relative-wall{list-style:none;margin:0;padding:0;position:sticky;top:clamp(1rem,3vw,2rem);}
.relative-wall li{display:flex;align-items:baseline;gap:1rem;padding:1.1rem 0;border-top:var(--reduced-series) var(--replicatedveil) var(--quick-inspector);font-size:0.9375rem;line-height:1.4;}
.relative-wall li:first-child{border-top:0;padding-top:0;}
.relative-wall li:last-child{padding-bottom:0;}
/* The running number takes the action colour, like the stat figure it rhymes
   with; the claim beside it stays on the surface's ink. An inverse band
   repaints it (base-css.ts). */
.computed-slider{font-size:0.75rem;font-weight:700;letter-spacing:0.12em;flex:0 0 auto;font-variant-numeric:tabular-nums;color:var(--primary);}
@media(max-width:768px){
.literalGutter{min-height:0;padding:calc(var(--validated-checkpoint) * 1.1) 0 calc(var(--validated-checkpoint) * 0.6);}
.spacedmarker{padding:clamp(1.5rem,6vw,2.25rem);}
.beta-roster{gap:1.25rem;}
.spacedmarker{grid-template-columns:1fr;gap:2rem 0;}
.beta-roster h1,.beta-roster h2{font-size:calc((1rem + (clamp(2rem,8vw,3rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));}
.parallel-gutter{padding:1.5rem 0 0;border-left:0;border-top:var(--reduced-series) var(--replicatedveil) var(--quick-inspector);}
.relative-wall{position:static;}
.relative-wall li:first-child{border-top:0;}
}.straightBackdrop .labeledWrapper{display:grid;gap:var(--ultrasignal);}
.central-element{padding-bottom:1.75rem;border-bottom:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);}
.recessedInstance{display:flex;align-items:center;gap:0.75rem;margin-bottom:0.75rem;}
.recessedInstance .ghostTemplate{color:var(--accent);}
.central-element h3{margin:0;font-size:1.25rem;}
.central-element p{margin:0;opacity:0.75;line-height:var(--paged-blade);}
.compactrule .tethered-dock{display:flex;flex-direction:column;gap:1.25rem;}
.meshed-tile{display:flex;align-items:flex-start;gap:1.5rem;}
.connected-tunnel{font-size:1.5rem;font-weight:800;line-height:1.2;flex-shrink:0;min-width:2.25rem;font-variant-numeric:tabular-nums;}
.styledPoster h3{margin:0 0 0.375rem;font-size:1.25rem;}
.styledPoster p{margin:0;opacity:0.75;line-height:var(--paged-blade);max-width:60ch;}
.latent-panel .zoned-series{display:grid;gap:var(--ultrasignal);}
.proxiedboard{display:flex;flex-direction:column;gap:0.75rem;}
.proxiedboard h3{margin:0;font-size:1.25rem;}
.proxiedboard p{margin:0;opacity:0.75;line-height:var(--paged-blade);}
.visual-scrim .thin-silo{display:flex;flex-direction:column;}
.raw-adapter{display:grid;grid-template-columns:minmax(12rem,0.8fr) 1.6fr;gap:1rem clamp(1.5rem,4vw,3rem);padding:2rem 0;border-top:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);align-items:start;}
.raw-adapter:last-child{border-bottom:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);}
.raw-adapter h3{margin:0;font-size:1.25rem;}
.raw-adapter p{margin:0;opacity:0.75;font-size:1.0625rem;line-height:var(--paged-blade);max-width:60ch;}
.namedswatch .orderedsystem{display:flex;flex-direction:column;}
.looped-section{padding:2.5rem 0;border-top:var(--reduced-series) var(--replicatedveil) var(--quick-inspector);}
.looped-section:last-child{border-bottom:var(--reduced-series) var(--replicatedveil) var(--quick-inspector);}
.looped-section h3{margin:0 0 0.75rem;font-size:calc((1rem + (clamp(1.375rem,2.5vw,1.75rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));}
.looped-section p{margin:0;font-size:1.0625rem;line-height:var(--paged-blade);max-width:60ch;opacity:0.85;}
.plain-capsule .sharedslot{list-style:none;margin:0;padding:0;display:grid;gap:var(--ultrasignal);}
.contextualDigest{display:flex;gap:1rem;align-items:flex-start;}
.cappedKit{flex-shrink:0;width:1.75rem;height:1.75rem;border-radius:50%;color:var(--accent);display:inline-flex;align-items:center;justify-content:center;}
.cappedKit .ghostTemplate{width:1rem;height:1rem;}
.contextualDigest h3{margin:0 0 0.25rem;font-size:1.0625rem;}
.contextualDigest p{margin:0;opacity:0.75;font-size:0.9375rem;line-height:var(--paged-blade);}
@media(max-width:768px){
.straightBackdrop .labeledWrapper{grid-template-columns:1fr;}
.meshed-tile{flex-direction:column;align-items:flex-start;gap:1rem;}
.raw-adapter{grid-template-columns:1fr;gap:1rem;padding:1.5rem 0;}
.looped-section{padding:1.75rem 0;}
.plain-capsule .sharedslot{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){
.raw-adapter{padding:1.25rem 0;}
.looped-section{padding:1.5rem 0;}
}.loopedtag{padding:clamp(3.5rem,7vw,6rem) 0;}
.loopedtag .offlineKeypad{margin-inline:auto;}
.phasedpopup .offlineKeypad{max-width:72ch;}
.sequentiallayout{margin:0 0 0.5rem;font-size:0.8125rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--primary);}
.mirroredLoop{font-size:calc((1rem + (clamp(2.25rem,5vw,3.5rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));line-height:1.1;margin:0 0 1rem;}
.zonedthumbnail{margin:0 0 0.5rem;font-size:0.9375rem;opacity:0.7;}
.zonedthumbnail code{font-size:0.875em;background:var(--hybridMedia);padding:0.1em 0.4em;border-radius:var(--steppedsystem);}
.cover-pill{margin:0 0 1.25rem;padding-left:1.25rem;list-style:disc;}
.cover-pill li{margin:0 0 0.4rem;line-height:var(--paged-blade);}
.loopedtag p.zonedthumbnail{margin-bottom:0.5rem;}
.loopedtag .offlineKeypad .zonedthumbnail+p{margin-top:1.5rem;}
.baseline-placeholder{background:var(--hybridMedia);border:var(--optimalTree) var(--replicatedveil) var(--dynamicmodal);border-radius:var(--steppedsystem);box-shadow:var(--taperedHolder);padding:var(--tracedPopover);}
.immutable-ring .baseline-placeholder{margin:0 0 1.75rem;}
.immutable-ring .baseline-placeholder .zonedthumbnail{margin:0.25rem 0;}
.bundledscroller .backend-stub{text-align:center;max-width:68ch;margin-inline:auto;}
.normalized-gallery{border:none;border-top:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);width:4rem;margin:2rem auto;}
.dimmedLookup .variablepicture{column-count:2;column-gap:clamp(2rem,4vw,2.5rem);margin:0 0 1.5rem;}
.snapped-scaffold .statelessaction{display:grid;grid-template-columns:minmax(14rem,1fr) 2.6fr;gap:clamp(2rem,5vw,4rem);align-items:start;}
.snapped-scaffold .quick-skeleton{position:sticky;top:2rem;}
.snapped-scaffold .quick-skeleton .mirroredLoop{font-size:calc((1rem + (clamp(1.75rem,3vw,2.5rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));}
.derived-preset{background:var(--hybridMedia);border:var(--optimalTree) var(--replicatedveil) var(--dynamicmodal);border-radius:var(--steppedsystem);box-shadow:var(--taperedHolder);padding:var(--tracedPopover);}
.internalvector .derived-preset{margin:0 auto 2.5rem;max-width:78ch;}
.internalvector .derived-preset p{margin-bottom:0.75rem;}
.meshed-region .simpleVault .named-region{border-top:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);padding-top:1.75rem;margin-top:1.75rem;}
.meshed-region .simpleVault .named-region h2{margin-top:0;}
.latent-terminal .linearwall{counter-reset:threadedspinner;}
.latent-terminal .linearwall .wirelessMount{counter-increment:threadedspinner;}
.latent-terminal .linearwall .wirelessMount h2::before{content:counter(threadedspinner,decimal-leading-zero) ". ";}
.lateralTable .asyncstrip{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;border-bottom:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);padding-bottom:1.5rem;margin-bottom:2rem;}
.lateralTable .asyncstrip .mirroredLoop{font-size:calc((1rem + (clamp(3rem,8vw,5rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));margin:0;}
.lateralTable .flex-graph{text-align:right;}
.measuredthread{background:var(--fusedDrawer);border:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);border-radius:var(--cybertint);padding:var(--tracedPopover);}
.decoded-stage .regularsystem .measuredthread{margin:0 0 1.25rem;}
.decoded-stage .regularsystem .measuredthread h2{margin-top:0;}
@media(max-width:768px){
.dimmedLookup .variablepicture{column-count:1;}
.snapped-scaffold .statelessaction{grid-template-columns:1fr;gap:1.5rem;}
.snapped-scaffold .quick-skeleton{position:static;}
.lateralTable .flex-graph{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){
.loopedtag{padding:2.5rem 0;}
.mirroredLoop{font-size:calc((1rem + (clamp(1.875rem,7vw,2.5rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));}
.lateralTable .asyncstrip .mirroredLoop{font-size:calc((1rem + (clamp(2.25rem,9vw,3rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));}
.dimmedLookup .variablepicture{column-count:1;}
}.plotted-scene{position:relative;min-height:clamp(20rem,45vw,26rem);overflow:hidden;border-radius:0;}.snapped-crate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;border-radius:0;}.snapped-crate figcaption{display:none;}.signed-modal{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);}.signed-modal h1,.signed-modal h2{font-size:calc((1rem + (clamp(2rem,5vw,3.5rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));margin:0 0 0.5rem;}.signed-modal p{margin:0;opacity:0.85;max-width:60ch;line-height:var(--paged-blade);}.latentWorkbench{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3rem);align-items:center;}.compound-tree .granular-pipeline{order:2;}.granular-pipeline img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--narrowLockup);box-shadow:var(--taperedHolder);}.compound-stage .scalargraph{margin:0;}.nested-collection{display:flex;flex-direction:column;gap:clamp(1.75rem,3vw,2.5rem);}.replicatedlever{display:flex;flex-direction:column;gap:clamp(1.75rem,3vw,2.5rem);}.reversedbackdrop img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--narrowLockup);display:block;box-shadow:var(--taperedHolder);}.smart-thumb .scalargraph,.reflectiveMesh .scalargraph{margin:0;}.calibrated-tracker{margin-bottom:2.5rem;}.pagedLookup{position:relative;}.thin-scope img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--narrowLockup);display:block;}.mid-ruler{position:absolute;left:clamp(1rem,3vw,1.5rem);bottom:-1.5rem;max-width:26rem;padding:var(--tracedPopover);border-radius:var(--steppedsystem);background:var(--fusedDrawer);border:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);box-shadow:var(--taperedHolder);}.mid-ruler .scalargraph{margin:0;}@media (max-width:768px){.latentWorkbench{grid-template-columns:1fr;}.compound-tree .granular-pipeline{order:0;}.reversedbackdrop img{aspect-ratio:16/9;}.mid-ruler{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){
.signed-modal{min-height:18rem;padding:1.5rem 0;}
.signed-modal h1,.signed-modal h2{font-size:calc((1rem + (clamp(1.75rem,7vw,2.25rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));}
.latentWorkbench,.nested-collection,.replicatedlever{gap:1.5rem;}
}.logicalMount{display:flex;flex-direction:column;gap:0.5rem;}
/* The figure takes the action colour: it is the one number a visitor is meant
   to carry away from the block, and the palette contract holds the primary at
   4.5:1 against the page and the muted ground alike — which is every surface
   token these figures stand on — so it reads as copy and not as an ornament.
   Two grounds are outside that arithmetic and are measured by the rendered
   audit instead: the inverse band, which repaints the figure to its own ink
   (base-css.ts) because the primary lands between 1.7:1 and 3.2:1 there, and
   the v6 hero's stat card, which washes the card surface with 22% accent
   (hero.ts). */
.light-toggle{font-size:calc((1rem + (clamp(2rem,5vw,3.5rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));font-weight:800;line-height:1.05;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;color:var(--primary);}
/* The unit is a word about the number rather than part of it, so it states the
   surface's own ink instead of inheriting the figure's colour, and steps back
   from it by weight and size as well. Sized relative to the figure, so it
   follows whatever the theme's heading ramp made of the figure beside it. */
.tiereditem{font-weight:500;font-size:0.6em;opacity:0.75;color:var(--foreground);}
.steppedslab{opacity:0.7;font-size:0.9375rem;line-height:1.45;}
.loaded-stripe .tertiary-paper{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));}
.tertiary-paper .logicalMount{padding:0 1.75rem;border-inline-start:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);}
.tertiary-paper .logicalMount:first-child{border-inline-start:none;padding-inline-start:0;}
.dimmed-element .lateralSurface{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:var(--ultrasignal);padding:var(--tracedPopover);border-radius:var(--cybertint);background:var(--fusedDrawer);}
.agileWave .shadedPadding{text-align:center;display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:var(--ultrasignal);}
.tunedWrap .namedruler{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--ultrasignal);}
.fixed-summary{display:flex;flex-direction:column;gap:0.75rem;}
.fixed-summary .light-toggle{font-size:calc((1rem + (clamp(1.75rem,4vw,2.5rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));}
.auxiliary-pointer .justify-runner{display:flex;flex-direction:column;}
.justify-runner .logicalMount{display:flex;flex-direction:row;align-items:baseline;justify-content:space-between;gap:1.5rem;padding:1.75rem 0;border-top:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);}
.justify-runner .logicalMount:last-child{border-bottom:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);}
.justify-runner .light-toggle{font-size:calc((1rem + (clamp(2.5rem,7vw,4.5rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));}
.justify-runner .steppedslab{font-size:1.0625rem;opacity:0.8;}
.detachedshard .tetheredindicator{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;}
.reversedNav{display:inline-flex;align-items:baseline;gap:0.5rem;padding:0.75rem 1.5rem;border-radius:var(--managedBillboard);border:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);background:var(--hybridMedia);}
.straightalert{font-weight:800;font-size:1.25rem;font-variant-numeric:tabular-nums;}
.elastic-digest{opacity:0.75;font-size:0.875rem;}
@media(max-width:768px){
.tertiary-paper,.namedruler,.loaded-stripe .tertiary-paper,.tunedWrap .namedruler{grid-template-columns:1fr;}
.tertiary-paper .logicalMount{border-inline-start:none;padding:0;border-top:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);padding-top:1.25rem;}
.tertiary-paper .logicalMount:first-child{border-top:none;padding-top:0;}
.justify-runner .logicalMount{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){
.light-toggle{font-size:calc((1rem + (clamp(1.75rem,8vw,2.5rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));}
.justify-runner .light-toggle{font-size:calc((1rem + (clamp(2rem,9vw,3rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));}
}.partial-particle .semiinstance{display:flex;flex-direction:column;gap:2.5rem;position:relative;margin-top:1rem;}
.partial-particle .semiinstance::before{content:"";position:absolute;left:1.75rem;top:0.5rem;bottom:0.5rem;width:2px;background:var(--dynamicmodal);}
.partial-particle .curatedpreset{display:flex;gap:1.75rem;position:relative;}
.partial-particle .stickyrack{width:3.5rem;height:3.5rem;border-radius:50%;background:var(--fusedDrawer);border:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:800;flex-shrink:0;z-index:1;}
.paired-rail h3{margin:0 0 0.5rem;font-size:1.375rem;}
.paired-rail p{margin:0;opacity:0.75;line-height:var(--paged-blade);max-width:60ch;}
.stagedcode .explicitTint{display:flex;flex-direction:column;}
.stagedcode .latentpopover{display:flex;align-items:flex-start;gap:1.5rem;padding:1.75rem 0;border-top:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);}
.stagedcode .latentpopover:last-child{border-bottom:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);}
/* The ordinal repeats the row's position as a display ornament, and states no
   ink: at this weight and size the figure is already the loudest thing in the
   row, and inheriting is what keeps it readable on an inverse band. */
.stagedcode .stickyrack{font-size:1.5rem;font-weight:800;line-height:1.2;flex-shrink:0;min-width:2.25rem;font-variant-numeric:tabular-nums;}
.loopedRadar h3{margin:0 0 0.375rem;font-size:1.25rem;}
.loopedRadar p{margin:0;opacity:0.75;line-height:var(--paged-blade);max-width:60ch;}
.refinedtoggle .parsedcontent{display:grid;gap:var(--ultrasignal);}
.gatedhandle{text-align:left;}
.refinedtoggle .stickyrack{display:inline-block;padding:0.3rem 0.85rem;border-radius:var(--managedBillboard);background:var(--live-thumbnail);color:var(--background);font-size:0.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;margin-bottom:1.25rem;}
.refinedtoggle .gatedhandle h3{margin:0 0 0.75rem;font-size:1.375rem;}
.refinedtoggle .gatedhandle p{margin:0;opacity:0.75;line-height:var(--paged-blade);}
.scaled-aside .justify-chip{display:flex;align-items:flex-start;gap:1.5rem;flex-wrap:wrap;}
.scaled-aside .graphed-record{flex:1 1 200px;text-align:center;}
.scaled-aside .stickyrack{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;margin:0 auto 1.25rem;border-radius:50%;border:var(--reduced-series) var(--replicatedveil) var(--quick-inspector);font-size:1.125rem;font-weight:800;}
.scaled-aside .graphed-record h3{margin:0 0 0.75rem;font-size:1.25rem;}
.scaled-aside .graphed-record p{margin:0;opacity:0.8;line-height:var(--paged-blade);}
/* The arrow linking one step to the next is a mark, so it takes the accent at
   full strength: dimmed to half it was the accent multiplied by an opacity,
   which on the inverted track this variant draws lands under the 3:1 the
   palette guarantees the mark itself. */
.scaled-aside .protoinspector{flex-shrink:0;display:flex;align-items:center;padding-top:1.5rem;color:var(--accent);}
.scaled-aside .protoinspector .ghostTemplate{width:1.5rem;height:1.5rem;}
.extended-screen .curatedMount{display:flex;flex-direction:column;}
.extended-screen .enrichedBanner{display:flex;gap:3rem;align-items:center;padding:2.5rem 0;border-top:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);}
.extended-screen .enrichedBanner:last-child{border-bottom:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);}
.extended-screen .stickyrack{font-size:calc((1rem + (clamp(3rem,7vw,5.5rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));font-weight:900;line-height:1;flex-shrink:0;width:1.6em;font-variant-numeric:tabular-nums;}
.passiveLockup h3{margin:0 0 0.75rem;font-size:1.75rem;}
.passiveLockup p{margin:0;opacity:0.75;font-size:1.125rem;line-height:var(--paged-blade);max-width:55ch;}
.reflective-stripe .projectedWidget{display:flex;flex-direction:column;gap:1rem;}
.spaced-flag{border:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);border-radius:var(--steppedsystem);background:var(--hybridMedia);padding:0;}
.spaced-flag summary{display:flex;align-items:center;gap:1.25rem;padding:1.5rem;cursor:pointer;list-style:none;}
.spaced-flag summary::-webkit-details-marker{display:none;}
.spaced-flag summary h3{margin:0;font-size:1.125rem;}
.headlessslot{margin-left:auto;flex-shrink:0;opacity:0.55;transition:transform var(--tracedSymbol) var(--linearpanel);}
.spaced-flag[open] .headlessslot{transform:rotate(180deg);}
.spaced-flag .stickyrack{width:2.25rem;height:2.25rem;border-radius:50%;background:var(--fusedDrawer);border:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:800;flex-shrink:0;}
.spaced-flag p{margin:0;padding:0 1.5rem 1.5rem 4.75rem;opacity:0.75;line-height:var(--paged-blade);max-width:65ch;}
@media(max-width:1024px){
.scaled-aside .protoinspector{display:none;}
}
@media(max-width:768px){
.partial-particle .semiinstance::before{display:none;}
.stagedcode .latentpopover{flex-direction:column;gap:0.75rem;}
.scaled-aside .justify-chip{flex-direction:column;}
.extended-screen .enrichedBanner{flex-direction:column;gap:1rem;padding:1.75rem 0;align-items:flex-start;}
.spaced-flag 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){
.extended-screen .stickyrack{font-size:calc((1rem + (clamp(2.25rem,9vw,3.5rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));}
.extended-screen .enrichedBanner{padding:1.25rem 0;}
}.progressiveCombo .nativeTarget{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--ultrasignal);}
.weightedInstance{display:flex;flex-direction:column;gap:1rem;padding:var(--tracedPopover);transition:transform var(--tracedSymbol) var(--linearpanel),box-shadow var(--tracedSymbol) var(--linearpanel),border-color var(--tracedSymbol) var(--linearpanel);}
.weightedInstance:hover{transform:var(--centerCrumb);border-color:var(--quick-inspector);box-shadow:var(--matte-action);}
.weightedInstance .meshed-wire{width:2.25rem;height:2.25rem;color:var(--accent);}
.custom-record{display:flex;gap:0.25rem;}
.literal-stage{width:1rem;height:1rem;color:var(--accent);fill:var(--accent);}
.weightedInstance blockquote,.wireless-divider blockquote{margin:0;font-size:1.0625rem;line-height:var(--paged-blade);}
.wirelessstage{display:flex;align-items:center;gap:0.875rem;margin-top:auto;}
.weightedInstance .wirelessstage,.planarwrap .wirelessstage{padding-top:1rem;border-top:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);}
.wirelessstage h4{margin:0;font-size:1rem;}
.batched-gauge{font-size:0.875rem;opacity:0.7;}
.handheld-monitor .rankedcaption{max-width:44rem;padding-top:2.5rem;border-top:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);margin-bottom:3rem;display:flex;flex-direction:column;gap:1.25rem;}
.layeredSelector{margin:0;font-size:calc((1rem + (clamp(1.5rem,3.5vw,2.125rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));line-height:1.4;font-weight:600;letter-spacing:-0.01em;}
.broadring{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--ultrasignal);}
.planarwrap{padding:var(--tracedPopover);border:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);border-radius:var(--steppedsystem);background:var(--hybridMedia);display:flex;flex-direction:column-reverse;gap:1rem;}
.planarwrap blockquote{margin:0;font-size:0.9375rem;line-height:var(--paged-blade);opacity:0.85;}
.planarwrap .wirelessstage{margin-top:0;}
.guidedRail{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--ultrasignal);}
.wireless-divider{display:flex;flex-direction:column;gap:1.25rem;}
.styledDetails .simple-figure{display:flex;flex-direction:column;}
.phasedloop{display:flex;flex-direction:column;gap:1rem;padding:2rem 0;border-top:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);}
.phasedloop:last-child{border-bottom:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);}
.phasedloop blockquote{margin:0;font-size:1.25rem;line-height:var(--paged-blade);max-width:56ch;text-wrap:pretty;}
.scopedsplash .textual-blade{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:var(--ultrasignal);}
.wiredIcon{padding-top:1.25rem;border-top:var(--reduced-series) var(--replicatedveil) var(--quick-inspector);display:flex;flex-direction:column;gap:1rem;}
.wiredIcon .wirelessstage{margin-top:0;}
.wiredIcon blockquote{margin:0;font-size:1rem;line-height:var(--paged-blade);opacity:0.85;}
.internal-holder .tertiarysegment{max-width:52rem;margin-inline:auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.5rem;}
.tertiarysegment .custom-record{justify-content:center;}
.tertiarysegment blockquote{margin:0;font-size:calc((1rem + (clamp(1.5rem,4vw,2.5rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));line-height:1.35;font-weight:600;letter-spacing:-0.015em;text-wrap:balance;}
.tertiarysegment .wirelessstage{flex-direction:column;text-align:center;margin-top:0;}
@media(min-width:768px){
.phasedloop{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:2rem;}
.phasedloop .wirelessstage{flex-direction:row-reverse;text-align:right;margin-top:0;flex-shrink:0;}
}
@media(max-width:768px){
.guidedRail{grid-template-columns:1fr;}
}.raisedFlyout,.broadregistry,.center-sidebar,.outerService,.rigid-ribbon,.corePadding{--segmented-entry:color-mix(in srgb,var(--foreground) 9%,transparent);--semiParticle:24px;background-repeat:repeat;}
.raisedFlyout{background-image:radial-gradient(circle at 1px 1px,var(--segmented-entry) 1px,transparent 0);background-size:var(--semiParticle) var(--semiParticle);}
.broadregistry{--segmented-entry:color-mix(in srgb,var(--foreground) 5%,transparent);--semiParticle:26px;background-image:radial-gradient(ellipse 1px 3.5px at 50% 50%,var(--segmented-entry) 99%,transparent 100%),radial-gradient(ellipse 3.5px 1px at 50% 50%,var(--segmented-entry) 99%,transparent 100%);background-size:var(--semiParticle) var(--semiParticle);}
.center-sidebar{--segmented-entry:color-mix(in srgb,var(--foreground) 5%,transparent);--semiParticle:32px;background-image:repeating-linear-gradient(0deg,var(--segmented-entry) 0 1px,transparent 1px var(--semiParticle)),repeating-linear-gradient(90deg,var(--segmented-entry) 0 1px,transparent 1px var(--semiParticle));}
.outerService{--segmented-entry:color-mix(in srgb,var(--foreground) 5%,transparent);--semiParticle:12px;background-image:repeating-linear-gradient(0deg,var(--segmented-entry) 0 1px,transparent 1px var(--semiParticle));}
.rigid-ribbon{--segmented-entry:color-mix(in srgb,var(--foreground) 5%,transparent);--semiParticle:14px;background-image:repeating-linear-gradient(45deg,var(--segmented-entry) 0 1px,transparent 1px var(--semiParticle));}
.corePadding{--segmented-entry:color-mix(in srgb,var(--foreground) 5%,transparent);--semiParticle:18px;background-image:repeating-linear-gradient(45deg,var(--segmented-entry) 0 1px,transparent 1px var(--semiParticle)),repeating-linear-gradient(-45deg,var(--segmented-entry) 0 1px,transparent 1px var(--semiParticle));}.richIndicator{max-width:44rem;margin-inline:auto;}
/* A card carries the theme's whole card treatment. Fill alone is not enough:
   several palettes name a muted barely a tenth of a step off their background,
   which is why every theme guarantees an edge or a shadow
   (style-themes.test.ts). Lacking both, this card dissolved into its ground. */
.direct-glyph{padding:var(--tracedPopover);border:var(--optimalTree) var(--replicatedveil) var(--dynamicmodal);border-radius:var(--steppedsystem);background:var(--hybridMedia);box-shadow:var(--taperedHolder);backdrop-filter:var(--styled-thumbnail);-webkit-backdrop-filter:var(--styled-thumbnail);}
.sorted-drawer{text-align:center;}
.sorted-drawer .central-stub{margin-inline:auto;}
/* Head and form are two separate asks, and inside one card they need saying so:
   the head's own bottom margin alone read as a single run of text. Padding, not
   margin: adjacent in-flow siblings collapse theirs to the larger of the two,
   and the head's is already clamp(2rem,4vw,3.5rem), so a margin here would
   never apply. */
.direct-glyph .scalargraph+.core-filter{padding-top:clamp(0.75rem,1.5vw,1.25rem);}
.syncedgroup{display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(2rem,4vw,4rem);align-items:start;}
/* A card holding nothing but a one-field form is shorter than the copy beside
   it, and topped out it hangs above the first line of text with nothing under
   it. Centred, the two columns read as one pair. */
.plottedwave{align-items:center;}
.packedtitle{min-width:0;}
.packedtitle .scalargraph{margin-bottom:1.25rem;}
.condensed-summary{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:clamp(1.5rem,3vw,2.5rem);}
.condensed-summary>.packedtitle{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). */
.mobileTerminal{border-radius:0;}
/* Stacked children carry the rhythm, so their own margins would double it. */
.middle-media{display:flex;flex-direction:column;gap:clamp(1.25rem,2.5vw,2rem);}
.middle-media>*{margin:0;}
/* A chip is a fixed square; stretched to the column width it stops being one. */
.middle-media>.central-stub{align-self:start;}
/* The form cell is sized for a horizontal row, where 22rem is its width. Down a
   column that basis becomes a height and the grow factor stretches it, which
   left a tall empty band under the note. Here it takes only what it needs. */
.middle-media>.core-filter{flex:0 0 auto;}
/* 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. */
.core-filter{flex:1 1 22rem;min-width:0;}
.compressed-holder{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:1rem 0.75rem;}
.compressed-holder .fixedPad{flex-direction:column;align-items:stretch;gap:0;}
.compressed-holder .linear-container{margin-top:0.75rem;}
/* The status is empty until a submit answers, but its gap and margin were not:
   they left a blank strip under the button, and align-items:end aligns the
   bottom of that strip, lifting the button clear of the field beside it.
   Collapsed rather than removed — it is the form's live region (role=status),
   and display:none drops it out of the accessibility tree, where a reader that
   never saw it rendered will not announce the text the runtime puts in it. */
.compressed-holder .linear-container:empty{height:0;margin:0;overflow:hidden;}
/* An input pads 0.75rem per side against the button's 0.5rem, so once the text
   outgrows the shared control height the button ends up the shorter of the two.
   Matching the padding keeps the pair the same height at any density. */
.compressed-holder .dynamicHeader{padding-block:0.75rem;}
.asyncHub{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.5rem);margin-top:clamp(1.75rem,3vw,2.5rem);}
.fullTarget{display:flex;flex-direction:column;gap:0.5rem;padding:var(--tracedPopover);border:var(--optimalTree) var(--replicatedveil) var(--dynamicmodal);border-radius:var(--steppedsystem);box-shadow:var(--taperedHolder);}
.routedRange{display:flex;flex-direction:column;}
.segmentedlibrary{display:flex;flex-wrap:wrap;align-items:baseline;gap:0.75rem 1.5rem;padding:1.25rem 0;border-top:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);}
.segmentedlibrary:last-child{border-bottom:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);}
.systemic-folder{flex:1 1 16rem;min-width:0;}
.segmentedlibrary>.ghostTemplate{width:1.25rem;height:1.25rem;color:var(--accent);align-self:center;}
.semanticScrim{margin:0;font-weight:600;}
.normalizedCallout{display:block;font-size:0.9375rem;word-break:break-word;}
.linkedmarker{margin:0.25rem 0 0;font-size:0.9375rem;opacity:0.75;}
.flexible-dashboard{display:flex;flex-direction:column;gap:1rem;max-width:60ch;}
.flexible-dashboard p{margin:0;}
.online-section{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1rem;}
.federated-provider{display:flex;align-items:center;gap:0.75rem;margin:0;font-family:var(--stretchscope,inherit);font-size:calc((1rem + (clamp(2rem,5vw,3.25rem) - 1rem) * var(--minimalPrimitive)) * var(--targetedsignal));line-height:1.05;letter-spacing:-0.01em;}
.embeddedgraph{margin:0;font-size:0.9375rem;letter-spacing:0.08em;text-transform:uppercase;opacity:0.7;}
.minor-label{display:flex;flex-direction:column;gap:1.25rem;}
.minor-label .condensed-summary{padding-top:1.25rem;border-top:var(--reduced-series) var(--replicatedveil) var(--dynamicmodal);}
@media(max-width:768px){
.syncedgroup{grid-template-columns:1fr;}
.asyncHub{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){
.compressed-holder{grid-template-columns:1fr;}
.compressed-holder .dynamicHeader{width:100%;}
}.gatedtoast{background:var(--live-thumbnail);color:var(--background);border-color:var(--quick-inspector);}
/* Body copy follows the inverse pair, the company lockup with it: a lockup is
   its mark plus a line of type, and only the mark carries the brand colour now,
   so the name is copy like the rest and takes the band's ink. The mark keeps
   the accent — its own rules paint the tile, and an inherited ink never reaches
   past a declaration. The ink is opaque: the quiet roles (footer labels, bottom
   bars, legal notes) dim themselves with their own opacity, and an ink carrying
   alpha of its own multiplies with that dim — an 85% ink under a 0.55 label
   read near 3:1. */
.gatedtoast .inline-scroller{color:var(--background);}
.gatedtoast p{color:var(--background);}
.gatedtoast .quantumendpoint{color:color-mix(in srgb,var(--background) 70%,transparent);}
.gatedtoast .dynamicHeader{background:var(--background);color:var(--foreground);}
.gatedtoast .procedural-flag{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. */
.gatedtoast .dynamicHeader:hover{background:color-mix(in srgb,var(--background) 86%,var(--foreground));color:var(--foreground);}
.gatedtoast .procedural-flag:hover{background:color-mix(in srgb,var(--background) 14%,transparent);color:var(--background);}
/* The stat figure and the hero ledger's running number carry the primary on the
   page ground, where the palette contract clears 4.5:1. On this ground the same
   token measures between 1.7:1 and 3.2:1 across the shipped palettes — the
   measurement the inverse header bar was built on — so both fall back to the
   band's ink and separate by weight and size, which is what they did before the
   colour. The unit beside the figure names the page's ink of its own, so it is
   repainted here too. */
.gatedtoast .light-toggle,.gatedtoast .tiereditem,.gatedtoast .computed-slider{color:var(--background);}
.gatedtoast .central-stub,.gatedtoast .atomic-vault{background:var(--background);}
.gatedtoast .central-stub{border-color:transparent;}
.gatedtoast .verticalPlate{background:var(--background);color:var(--foreground);border-color:transparent;}
/* Recoloured to the page ground, a chip leaves an inverted run holding only its
   own two tones, so the mark is ringed rather than filled: a fill would seat a
   pale glyph on a pale ring wherever the palette is dark and this ground swaps
   the pair. The ring is the accent the chip already draws its glyph in, which
   the palette guarantees on both surfaces. A ring also adds no width, so the
   icon stays centred. */
.gatedtoast .central-stub{box-shadow:0 0 0 0.1875rem var(--accent);}
.gatedtoast summary::after,.gatedtoast summary::marker{color:var(--background);}
/* The panel is the one navigation surface that states an ink of its own
   (the navigation foreground, above), so the band's colour cannot reach it
   by inheritance the way it reaches the bar around it. Every child in there
   names a colour today, which is why nothing renders wrong — and why this was
   invisible until v5's own restatement of it was removed as a duplicate. The
   contract belongs here rather than on one bar: any inverted header has it. */
.gatedtoast .outerCursor{color:var(--background);}
.gatedtoast .offline-marker a:hover,.gatedtoast .offline-marker a[aria-current="page"]{color:var(--background);}
.gatedtoast .federated-checkpoint{border-color:var(--background);}
.gatedtoast .wireless-section a:hover{color:var(--background);}
/* The footer's quietest roles dim at 0.55 on the page ground, where the ink
   pair leaves headroom. On this ground the opaque inverse ink at 0.55 still
   lands under 4.5:1 on the darkest palettes, so the band lifts the dim to the
   strength the palette arithmetic clears everywhere. */
.gatedtoast .lexicalAction,.gatedtoast .lower-bracket{opacity:0.65;}
/* 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. */
.gatedtoast input,.gatedtoast textarea{background:color-mix(in srgb,var(--background) 8%,var(--live-thumbnail));border-color:var(--quick-inspector);color:var(--background);}
.gatedtoast ::placeholder{color:color-mix(in srgb,var(--background) 55%,var(--live-thumbnail));}
.gatedtoast .linear-container{color:var(--background);}
.contextual-article .offline-marker a::before{font-size:0.625rem;font-weight:600;letter-spacing:0.06em;}
.contextual-article .offline-marker a{font-weight:700;letter-spacing:0.06em;}
.richstamp{border-radius:var(--managedBillboard);background:var(--ordered-dashboard);color:var(--meshed-bracket);border-color:transparent;}
.contextual-article .dynamicHeader{border-radius:var(--managedBillboard);}
.mounted-splash{background-image:linear-gradient(180deg,color-mix(in srgb,var(--accent) 10%,transparent),transparent 78%);}
.federated-checkpoint{border-width:0;border-radius:0.75rem;width:3rem;height:3rem;}
.federated-checkpoint .ghostTemplate{width:1.5rem;height:1.5rem;}
.scalarbundle .offline-marker a{font-family:var(--coverradar);text-transform:none;letter-spacing:0.01em;font-weight:600;}
.singlePane{text-transform:none;}
.flatpivot .offline-marker a::after{height:3px;bottom:-0.4rem;border-radius:var(--managedBillboard);}
.central-notice .root-digest{text-transform:none;letter-spacing:-0.03em;}
.central-notice .offline-marker a{text-transform:none;letter-spacing:0.01em;font-size:0.9375rem;font-weight:700;}
.central-notice .offline-marker a::after{height:3px;bottom:-0.35rem;border-radius:var(--managedBillboard);}
.primeWall .offline-marker a[aria-current="page"]{background:var(--primary);color:var(--primary-foreground);}
.fallback-label .offline-marker a{font-family:var(--coverradar);text-transform:none;letter-spacing:0.01em;font-weight:600;}
@media(min-width:901px){.primeWall .offline-marker{border-width:0;background:var(--compoundworkbench);padding:0.5rem 1rem;}
.primeWall .offline-marker a{padding:0.45rem 1.1rem;}}
.flatpivot .offline-marker a[aria-current="page"],.central-notice .offline-marker a[aria-current="page"],.fallback-label .offline-marker a[aria-current="page"]{font-weight:800;}
.publicparticle img{aspect-ratio:16/9;}
.opaqueFolder{padding:1.75rem 1.75rem 2rem;}
.opaqueFolder h3{font-family:var(--coverradar);font-size:1.375rem;font-weight:800;letter-spacing:-0.03em;}
.opaqueFolder p{font-size:1rem;opacity:0.7;}
.semanticTunnel::before,.semanticTunnel::after{display:block;width:0.3125rem;height:0.3125rem;border-radius:50%;}.protoWave,details{transition:all var(--tracedSymbol) var(--linearpanel);}
input,textarea{transition:all var(--tracedSymbol) var(--linearpanel);}
.dynamicHeader:not(.procedural-flag,.raw-terminal){position:relative;isolation:isolate;}
.dynamicHeader:not(.procedural-flag,.raw-terminal)::after{content:"";position:absolute;z-index:-1;border-radius:inherit;transition:all var(--tracedSymbol) var(--linearpanel);inset:0;background:currentColor;opacity:0;}
.dynamicHeader:not(.procedural-flag,.raw-terminal):hover::after{opacity:0.16;}
.dynamicHeader:not(.procedural-flag,.raw-terminal):active::after{opacity:0.26;}
.gatedtoast .dynamicHeader:not(.procedural-flag,.raw-terminal)::after,.patchedTopbar .dynamicHeader:not(.procedural-flag,.raw-terminal)::after{display:none;}
.protoWave:hover,details:hover{box-shadow:var(--matte-action);transform:var(--centerCrumb);}
input:not([type="checkbox"]):not([type="radio"]):focus,textarea:focus,select:focus{box-shadow:inset 0 -2px 0 var(--primary);}
.functional-vector:hover{box-shadow:var(--matte-action);}
.dynamicHeader:focus-visible,.dynamicHeader:not(.procedural-flag,.raw-terminal):hover:focus-visible{box-shadow:var(--rear-rail)!important;}