:root{color-scheme:dark;--background:#09090b;--foreground:#fafafa;--primary:#5d8bf0;--primary-foreground:#000000;--muted:#27272a;--border:#5e5e64}:root{--wiredadapter:var(--background);--mountedscrim:var(--muted);--raw_snippet:var(--background);--crosssymbol:var(--background);--banner:var(--muted);--buffered_cluster:var(--background);--subtlepanel:var(--foreground);--normalized:none;--meshedcomponent:68rem;--zoomed:clamp(1rem,5vw,3rem);--rapid_envelope:clamp(4rem,8vw,6rem);--tieredadapter:3rem;--private_selector:1.25rem;--tertiary_series:1.5rem;--interactivecluster:1.25rem;--threaded_block:0.25rem;--hook:0.25rem;--runtimetunnel:0.25rem;--radial_outline:0.25rem;--marked_listing:0.25rem;--zone:0.125rem;--kinetic_tab:9999px;--rankedplaceholder:2px;--radar:solid;--broad:1px;--anchored_trace:var(--border);--privateboard:var(--foreground);--sandboxed:color-mix(in srgb,var(--border) 20%,var(--background));--light_service:none;--privatecapsule:none;--connectedmatrix:0 6px 0 var(--foreground);--autoparticle:inset 0 3px 0 var(--foreground);--stitchedprovider:800;--derivednode:0.01em;--scalar_rack:none;--workspace:var(--primary);--linear_zone:var(--primary-foreground);--bridged:var(--background);--leftrange:var(--foreground);--piped_service:transparent;--purepadding:transparent;--filtered:var(--rankedplaceholder);--holder:none;--paired_glyph:var(--primary);--shell:var(--primary-foreground);--charted_screen:inset 0 -4px 0 var(--foreground);--runtime_swatch:color-mix(in srgb,var(--foreground) 7%,var(--background));--concurrentlockup:var(--foreground);--structural_pill:var(--foreground);--nominalmesh:0 0 0 4px var(--primary);--scoped_widget:var(--primary);--macro:var(--background);--footer:var(--foreground);--semantic_shell:var(--foreground);--bezel:var(--muted);--element:var(--primary);--linearsequence:var(--foreground);--neutral:var(--background);--tieredtint:var(--foreground);--leankeypad:linear-gradient(transparent,var(--foreground));--masterstripe:none;--clustered_digest:1;--partialgutter:none;--derivedboard:none;--front_package:0.55;--exact:0 0 0 4px var(--primary);--stateless_scrim:0ms;--coupledcode:linear;--light:800;--shortseries:-0.01em;--mountedrange:1.05;--lateralbackdrop:1.2;--deep_toast:400;--quickconsole:1.75;--indexed_primitive:uppercase;--sidetrim:60ch}:root{--workspace:transparent;--linear_zone:var(--primary);--purepadding:var(--primary);--filtered:calc(var(--rankedplaceholder) + 1px);--bridged:transparent;--paired_glyph:color-mix(in srgb,var(--primary) 14%,transparent);--shell:var(--primary)}.uniform .headless_plate{--paired_glyph:color-mix(in srgb,var(--primary) 14%,transparent);--shell:var(--primary);}:root{--opaque:'Lora',Georgia,serif;--linear_alert:'Merriweather',Georgia,serif}:root{--literalapplet:'Bricolage Grotesque','Helvetica Neue',Arial,sans-serif;--scopedhost:600;--smooth_gauge:-0.02em}*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{margin:0;background:var(--wiredadapter);color:var(--foreground);font:16px/var(--quickconsole,1.6) var(--linear_alert,Arial,Helvetica,sans-serif);font-weight:var(--deep_toast);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,.indexed_thumbnail{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(--opaque,inherit);font-weight:var(--light);letter-spacing:var(--shortseries);}
.lowerwidget{width:min(calc(var(--meshedcomponent) + var(--lower_bezel,0rem)),calc(100% - calc(var(--zoomed) + var(--short_mod,0rem))));margin-inline:auto;}
/* scroll-margin: an in-page call to action scrolls to a block and the bar is
   fixed over the top of the page, so the target would land under it. */
.discrete_checkpoint{padding:calc(var(--rapid_envelope) + var(--batched_flag,0rem)) 0;scroll-margin-top:var(--compactframe);}
header.discrete_checkpoint,footer.discrete_checkpoint{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. */
.dimmedsprite{padding-block:0;min-height:calc(100vh - var(--compactframe));min-height:calc(100svh - var(--compactframe));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. */
.dimmedsprite>*{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;}
.rapidscene{padding:calc(var(--rapid_envelope) + var(--sparkline,0rem)) 0;background:var(--mountedscrim);backdrop-filter:var(--normalized);-webkit-backdrop-filter:var(--normalized);}
/* 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. */
.discrete_checkpoint>.rapidscene{margin-block:calc(-1 * (var(--rapid_envelope) + var(--batched_flag,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. */
.frame{font-family:var(--literalapplet,inherit);font-weight:var(--scopedhost,600);text-decoration:none;font-size:1.25rem;letter-spacing:var(--smooth_gauge,-0.02em);}
.tight{text-transform:var(--indexed_primitive);letter-spacing:0.12em;font-weight:700;color:var(--primary);font-size:0.875rem;margin-bottom:1rem;}
.absolute_popup{font-size:1.25rem;opacity:0.8;max-width:var(--sidetrim);line-height:var(--quickconsole);margin-bottom:2rem;}
.saturatedhandle{font-weight:var(--light);letter-spacing:var(--shortseries);}
.fine_hub{max-width:var(--sidetrim);}
address{font-style:normal;}
em,i,b{font-style:inherit;font-weight:inherit}

.headless_plate{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tieredadapter);padding-block:0.5rem;padding-inline:var(--private_selector);border:var(--filtered) var(--radar) var(--purepadding);border-radius:var(--threaded_block);background:var(--workspace);color:var(--linear_zone);text-decoration:none;font-weight:var(--stitchedprovider);cursor:pointer;text-transform:var(--scalar_rack);letter-spacing:var(--derivednode);box-shadow:var(--holder);transition:background var(--stateless_scrim) var(--coupledcode),color var(--stateless_scrim) var(--coupledcode),border-color var(--stateless_scrim) var(--coupledcode),box-shadow var(--stateless_scrim) var(--coupledcode),opacity var(--stateless_scrim) var(--coupledcode),transform var(--stateless_scrim) var(--coupledcode);}
.headless_plate:hover{opacity:var(--clustered_digest);transform:var(--partialgutter);background:var(--paired_glyph);color:var(--shell);box-shadow:var(--charted_screen);}
.headless_plate:active{transform:var(--derivedboard);box-shadow:var(--autoparticle);}
.transient{background:var(--bridged);color:var(--leftrange);border-color:var(--anchored_trace);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. */
.transient:hover{background:color-mix(in srgb,var(--primary) 10%,var(--bridged));color:var(--leftrange);box-shadow:none;}
.inferred_radar{background:var(--piped_service);color:var(--leftrange);box-shadow:none;border-color:transparent;text-decoration:underline;text-underline-offset:0.3em;}
.inferred_radar:hover{background:var(--piped_service);color:var(--leftrange);box-shadow:none;}
.right_search{min-height:calc(var(--tieredadapter) - 0.25rem);padding-block:calc(var(--tieredadapter) / 8);padding-inline:calc(var(--private_selector) - 0.125rem);font-size:0.875rem;}

input,textarea{width:100%;backdrop-filter:var(--normalized);-webkit-backdrop-filter:var(--normalized);min-height:var(--tieredadapter);padding:0.75rem var(--private_selector);border:var(--rankedplaceholder) var(--radar) var(--anchored_trace);border-radius:var(--hook);background:var(--runtime_swatch);color:var(--concurrentlockup);font:inherit;transition:border-color var(--stateless_scrim) var(--coupledcode),box-shadow var(--stateless_scrim) var(--coupledcode),opacity var(--stateless_scrim) var(--coupledcode);}
textarea{min-height:9rem;resize:vertical;line-height:var(--quickconsole);}
input:hover,textarea:hover{border-color:var(--privateboard);}
input:not([type="checkbox"]):not([type="radio"]):focus,textarea:focus{border-color:var(--primary);box-shadow:var(--nominalmesh);}
input:user-invalid,textarea:user-invalid{border-color:var(--scoped_widget);}
/* 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(--rankedplaceholder) var(--radar) var(--privateboard);background:var(--runtime_swatch);cursor:pointer;transition:background var(--stateless_scrim) var(--coupledcode),border-color var(--stateless_scrim) var(--coupledcode);}
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(--stateless_scrim) var(--coupledcode);}
/* 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(--quickconsole,1.6) * 1em + 1.5rem + 2 * var(--rankedplaceholder));padding-block:0;}
::placeholder{color:var(--structural_pill);opacity:1;}

.outerpivot,details{padding:var(--tertiary_series);background:var(--raw_snippet);border:var(--broad) var(--radar) var(--anchored_trace);border-radius:var(--runtimetunnel);box-shadow:var(--light_service);backdrop-filter:var(--normalized);-webkit-backdrop-filter:var(--normalized);}
.onboard{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--interactivecluster);}
/* 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. */
.paper{grid-template-columns:repeat(2,minmax(0,1fr));}
.refined_parcel{grid-template-columns:repeat(3,minmax(0,1fr));}
.outerpivot:hover,details:hover{box-shadow:var(--privatecapsule);}
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);}

.semanticnotice{background:var(--crosssymbol);border:var(--rankedplaceholder) var(--radar) var(--anchored_trace);border-radius:var(--runtimetunnel);box-shadow:var(--privatecapsule);backdrop-filter:var(--normalized);-webkit-backdrop-filter:var(--normalized);}
.pixel{background:var(--buffered_cluster);backdrop-filter:var(--normalized);-webkit-backdrop-filter:var(--normalized);border:var(--rankedplaceholder) var(--radar) var(--anchored_trace);border-radius:var(--runtimetunnel);box-shadow:var(--connectedmatrix);}
.inlinestepper{border-radius:var(--radial_outline);box-shadow:var(--connectedmatrix);}

/* Every header rides the top of the viewport. The bar's height varies by
   variant and by viewport, so the space it would have occupied is restored by
   the runtime rather than by a hard-coded spacer — and a page whose script
   never runs still reads, because the bar only overlaps its first block. */
/* The bar spans the window, so its contents do too: a header measured to the
   content shell leaves the brand and the navigation huddled in the middle of a
   full-width bar. The page gutter is kept — at full width rather than the half
   the shell splits between its two sides, so the ends of a bar that now reaches
   both edges of the window still have room to breathe. */
.uniform .lowerwidget{width:auto;max-width:none;margin-inline:0;padding-inline:var(--zoomed);}
/* 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. */
.uniform{position:fixed;top:0;left:0;right:0;z-index:30;background:var(--macro);border-color:var(--footer);border-bottom-color:var(--sandboxed);color:var(--semantic_shell);backdrop-filter:var(--normalized);-webkit-backdrop-filter:var(--normalized);}
/* 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. */
.neutralframe{border-color:var(--footer);color:var(--semantic_shell);}
.tunnel a{position:relative;padding:0.25rem;text-decoration:none;font-weight:500;border-radius:var(--hook);transition:background var(--stateless_scrim) var(--coupledcode),box-shadow var(--stateless_scrim) var(--coupledcode),color var(--stateless_scrim) var(--coupledcode);}
/* 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. */
.shim .tunnel a:hover{background:color-mix(in srgb,var(--semantic_shell) 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. */
.shim .tunnel a[aria-current="page"]{background:var(--bezel);}
/* 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. */
.uniform .tunnel a[aria-current="page"]{font-weight:700;color:var(--element);}
.technical_column{border:var(--rankedplaceholder) var(--radar) var(--footer);border-radius:var(--hook);background:transparent;color:inherit;transition:background var(--stateless_scrim) var(--coupledcode);}

/* The edge is a tint of the badge's own ink rather than the page's border
   colour: a badge filled with the accent wore a grey outline that belonged to
   nothing on it, and on a pale badge the same tint still reads as an edge. */
.masterregion,.flatshim{display:inline-flex;align-items:center;gap:0.5rem;padding:0.375rem var(--private_selector);border:var(--rankedplaceholder) var(--radar) color-mix(in srgb,var(--neutral) 22%,transparent);border-radius:var(--zone);background:var(--linearsequence);color:var(--neutral);font-size:0.8125rem;font-weight:var(--stitchedprovider);letter-spacing:var(--derivednode);margin:0;text-transform:var(--indexed_primitive);}
.masterregion.orbital_registry{border-radius:var(--kinetic_tab);}
figure>img{border:var(--rankedplaceholder) var(--radar) var(--tieredtint);border-radius:var(--marked_listing);filter:var(--masterstripe);}
body .shallow_label{background:var(--leankeypad);}

/* 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. */
.headless_plate: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;}
.headless_plate: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(--exact);}
.tunnel a:focus-visible,.tunnel a:hover:focus-visible,.technical_column:focus-visible,.technical_column:hover:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:var(--exact);}
.headless_plate:disabled,button:disabled,input:disabled,textarea:disabled,[aria-disabled="true"]{opacity:var(--front_package);cursor:not-allowed;}

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

   The chip has to be a shade off the card it sits in, and on most themes the
   inset surface already is: where the card is the muted tone the chip is the
   page ground and reads lighter, where the card is the page the chip is the
   muted tone and reads deeper. The two themes that name one surface for both
   state their own exception (theme-chrome.ts) rather than every theme paying
   for it in a mix here. The hairline stays: on the themes led by their edges it
   is the chip's shape. */
.midslab{width:3rem;height:3rem;border-radius:var(--zone);display:inline-flex;align-items:center;justify-content:center;border:var(--rankedplaceholder) var(--radar) var(--anchored_trace);background:var(--banner);color:var(--primary);}
.midslab .cybercolumn{width:1.5rem;height:1.5rem;}
.genericpivot{width:3rem;height:3rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;background:var(--linearsequence);color:var(--neutral);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. */
.clip_notice{color:var(--primary);}

.raised_dashboard .lowerwidget{display:flex;flex-direction:column;align-items:center;}
.queued_deck .absolute_popup{color:var(--background);opacity:0.7;}
.sharedtemplate{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start;}
.variablebracket{position:sticky;top:4rem;}
.variablebracket h2{font-size:calc((1rem + (clamp(2.5rem,6vw,4rem) - 1rem) * var(--lateralbackdrop)) * var(--mountedrange));line-height:1.1;margin:0;}
.crisp_toolbar .absolute_popup{margin-inline:auto;}
.unified_lockup .absolute_popup{opacity:0.8;color:var(--background);}
.unified_lockup .headless_plate{background:var(--background);color:var(--foreground);}
.unified_lockup .headless_plate:hover{background:var(--primary);color:var(--primary-foreground);}
.neutral_sparkline .absolute_popup,.modularoutline .absolute_popup{margin-inline:auto;}
.smoothwidget .frame{margin-bottom:2rem;font-size:1.5rem;}

.fixed{display:flex;flex-direction:column;gap:0.75rem;max-width:44rem;margin:0 0 clamp(2rem,4vw,3.5rem);}
.packedruler{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. */
.article{display:flex;width:100%;align-items:center;justify-content:center;gap:0.75rem;}
.article::before,.article::after{content:"";display:none;flex:0 0 auto;background:currentColor;}
.saturatedhandle{font-size:calc((1rem + (clamp(1.875rem,4vw,3rem) - 1rem) * var(--lateralbackdrop)) * var(--mountedrange));line-height:1.1;margin:0;}
.tight{font-size:0.8125rem;margin:0;}
.absolute_popup{font-size:1.125rem;opacity:0.75;line-height:var(--quickconsole);margin:0;}
.procedural_scope{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. */
.styled{border-block:var(--rankedplaceholder) var(--radar) var(--anchored_trace);}
.rounded{--batched_flag:0rem;--sparkline:0rem;--lower_bezel:-2rem;--short_mod:2rem;}
.roundeddock{--batched_flag:-1rem;--sparkline:-1.5rem;--lower_bezel:-12rem;--short_mod:3rem;}
.folded{--batched_flag:0.5rem;--sparkline:0.625rem;--lower_bezel:3rem;--short_mod:1rem;}
.cyber_gauge{--batched_flag:1rem;--sparkline:0.5rem;--lower_bezel:8rem;--short_mod:0.5rem;}

/* Two columns from the tablet width down. */
@media(max-width:1024px){.sharedtemplate{gap:2.5rem;}.onboard{grid-template-columns:repeat(2,1fr);}.refined_parcel{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:768px){.onboard{grid-template-columns:1fr;}.paper,.refined_parcel{grid-template-columns:1fr;}.boxed,.tracker,.sharedtemplate{grid-template-columns:1fr;gap:3rem;}.variablebracket{position:static;margin-bottom:2rem;}.boxed_combo{grid-template-columns:1fr;}}
.floating_stack{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem;}
.popover .floating_stack{max-width:44rem;margin-inline:auto;}
.iterative_terminal{display:flex;align-items:flex-start;gap:0.875rem;font-size:1.0625rem;line-height:var(--quickconsole);opacity:0.85;}
/* The same pair the icon chip settled on: a sunken ground carries the accent,
   with a hairline so the disc reads on the themes whose inset surface is the
   page itself. The glyph was the page's ink at 70% instead, and where a theme
   sinks that ground towards the ink — which is what a sunken surface is — the
   cross came out a shade off the disc it sits in and could not be read at all.
   Ink at less than full strength was the second half of it: there is nothing to
   spend on a mark this small.

   The ring is currentColor, so it is the accent the cross is drawn in. The
   UI border was a grey ruled around a green mark — two colours for one small
   thing, and the grey the louder of them. */
.aside{flex-shrink:0;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--banner);color:var(--primary);border:var(--rankedplaceholder) var(--radar) currentColor;display:inline-flex;align-items:center;justify-content:center;}
.aside .cybercolumn{width:1rem;height:1rem;}
.secure_lookup .matte{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. */
.raw_token .floating_stack{max-width:52rem;}
.portedmarquee .composite{margin-inline:auto;max-width:52rem;}
.composite{text-align:left;}
.composite .fixed{margin-top:0;}
.curatedroster{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.875rem;}
.tonal_pulse{position:relative;padding-left:1.5rem;font-size:1.0625rem;line-height:var(--quickconsole);opacity:0.85;}
.tonal_pulse::before{content:"";position:absolute;left:0;top:0.7em;width:0.75rem;height:1px;background:var(--subtlepanel);opacity:0.5;}
.veil .fixed{max-width:40rem;}
.rack{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.grid_menu{padding:1.25rem 0;border-top:var(--rankedplaceholder) var(--radar) var(--anchored_trace);font-size:1.0625rem;line-height:var(--quickconsole);opacity:0.85;}
.grid_menu:last-child{border-bottom:var(--rankedplaceholder) var(--radar) var(--anchored_trace);}
.bridgedshard{background:var(--raw_snippet);}
.minorsilo{display:grid;gap:var(--interactivecluster);text-align:left;}
@media(max-width:768px){
.minorsilo{grid-template-columns:1fr;}
}.arrayedposter{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;width:2.25rem;height:2.25rem;}
.arrayedposter .binary{width:1.25rem;height:1.25rem;}
.scroll_buffer{font-family:var(--literalapplet,inherit);font-size:0.8125rem;font-weight:var(--scopedhost,600);letter-spacing:0.02em;line-height:1;}
.integralworkspace,.coded_pane,.auto_loader{background:var(--primary);color:var(--primary-foreground);}
.outer_timeline,.variablecheckpoint,.quantum{border:var(--rankedplaceholder) var(--radar) currentColor;color:inherit;}
.textual{background:color-mix(in srgb,currentColor 12%,transparent);color:inherit;}
.coded_pane,.variablecheckpoint,.textual{border-radius:var(--hook);}
.auto_loader,.quantum{border-radius:var(--kinetic_tab);}
/* A brand link is a line of type; the mark rides beside it rather than above,
   and the pair keeps the link's own colour so the tile follows the surface.

   The name is wrapped rather than left bare: a flex container makes an
   anonymous item of every run of text between elements, so the v1 wordmark —
   whose lead capitals are elements around the rest of each word — came apart
   into "A cme C orp", a gap at every one of them. Wrapped, the name is a single
   item and its own contents stay in ordinary inline flow. */
.frame{display:inline-flex;align-items:center;gap:0.625rem;}
.root{display:inline-block;}.reducedstripe{display:flex;align-items:center;gap:0.75rem;margin:0 0 1rem;font-family:var(--literalapplet,inherit);font-weight:var(--scopedhost,700);letter-spacing:var(--smooth_gauge,normal);font-size:1.0625rem;}
.piped .fixed{max-width:none;}
.sortedrule{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:start;}
.sortedrule .fixed{margin-top:0;}
.filter{margin:0;display:flex;flex-direction:column;}
.branched_board{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(--rankedplaceholder) var(--radar) var(--anchored_trace);align-items:start;}
.branched_board:last-child{border-bottom:var(--rankedplaceholder) var(--radar) var(--anchored_trace);}
.branched_board dt{font-weight:700;font-size:0.8125rem;text-transform:uppercase;letter-spacing:0.06em;opacity:0.55;}
.branched_board dd{margin:0;line-height:var(--quickconsole);opacity:0.9;}
.branched_board dd a{text-decoration:underline;text-underline-offset:0.2em;}
.variable_picture{list-style:none;margin:1.25rem 0 0;padding:0;display:flex;flex-direction:column;gap:0.75rem;}
.variable_picture li{display:flex;align-items:flex-start;gap:0.625rem;line-height:var(--quickconsole);opacity:0.85;}
.variable_picture .cybercolumn{width:1.05rem;height:1.05rem;color:var(--primary);margin-top:0.2rem;flex-shrink:0;}
.condensedpointer{display:flex;align-items:center;gap:0.5rem;margin:1.5rem 0 0;font-size:0.9375rem;opacity:0.75;}
.condensedpointer .cybercolumn{width:1.05rem;height:1.05rem;color:var(--primary);flex-shrink:0;}
.vitalskeleton .offline_item{margin-top:1.5rem;}
.quadstencil{margin-top:clamp(2rem,4vw,2.5rem);}
.quadstencil h3,.tinted_instance h3,.secondary_bracket .matte h3{margin:0;font-size:1.125rem;}
.offline_item{text-align:left;}
.offline_item .branched_board:first-child{border-top:none;padding-top:0;}
.offline_item .branched_board:last-child{border-bottom:none;padding-bottom:0;}
.crate .branched_board{border-top-color:var(--privateboard);}
.crate .branched_board:last-child{border-bottom-color:var(--privateboard);}
.coarse_token .variable_picture{text-align:left;}
.tinted_instance{max-width:44rem;margin-inline:auto;}
.tinted_instance h3{margin-top:clamp(2rem,4vw,2.5rem);}
.secondary_bracket .matte h3{margin-top:clamp(1.75rem,3vw,2.25rem);}
.preciseframe{background:var(--raw_snippet);}
.preciseframe .filter{max-width:44rem;margin-inline:auto;}
.preciseframe .condensedpointer{justify-content:center;}
@media(max-width:768px){
.sortedrule{grid-template-columns:1fr;}
.branched_board{grid-template-columns:1fr;gap:0.25rem;}
}.crisp_toolbar .tactilepad{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0.5rem;}
.tactilepad .absolute_popup{margin-inline:auto;}
.tactilepad h1,.tactilepad h2{margin:0;font-size:calc((1rem + (clamp(2rem,5vw,3.25rem) - 1rem) * var(--lateralbackdrop)) * var(--mountedrange));line-height:1.1;max-width:20ch;}
.tactilepad .sorted_lookup{align-items:center;margin:0.25rem 0 0.75rem;}
.unified_lockup .live_item{border-radius:var(--radial_outline);padding:var(--tertiary_series);}
.tertiaryhub h1,.tertiaryhub h2{margin:0 0 1rem;font-size:calc((1rem + (clamp(1.75rem,4vw,2.75rem) - 1rem) * var(--lateralbackdrop)) * var(--mountedrange));line-height:1.1;}
.tertiaryhub .sorted_lookup{margin:1rem 0 1.5rem;}
.neutral_sparkline .pulsed_queue,.modularoutline .latent_wire{text-align:center;padding:var(--tertiary_series);}
.pulsed_queue{border:var(--rankedplaceholder) var(--radar) var(--anchored_trace);border-radius:var(--runtimetunnel);background:var(--crosssymbol);}
.latent_wire{background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 12%,var(--muted)),var(--background));border:var(--rankedplaceholder) var(--radar) var(--anchored_trace);border-radius:var(--runtimetunnel);box-shadow:var(--light_service);}
.pulsed_queue h1,.pulsed_queue h2,.latent_wire h1,.latent_wire h2{margin:0 0 1rem;font-size:calc((1rem + (clamp(2rem,5vw,3.25rem) - 1rem) * var(--lateralbackdrop)) * var(--mountedrange));line-height:1.1;}
.pulsed_queue .absolute_popup,.latent_wire .absolute_popup{margin-inline:auto;}
.pulsed_queue .sorted_lookup,.latent_wire .sorted_lookup{align-items:center;margin:1rem 0 1.5rem;}
.measured_viewport .macro_title{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(--rankedplaceholder) var(--radar) var(--privateboard);border-bottom:var(--rankedplaceholder) var(--radar) var(--privateboard);}
.split_slider h1,.split_slider h2{margin:0 0 0.75rem;font-size:calc((1rem + (clamp(1.5rem,3.5vw,2.25rem) - 1rem) * var(--lateralbackdrop)) * var(--mountedrange));line-height:1.1;}
.split_slider .sorted_lookup{margin:0;}
.sorted_lookup{display:flex;flex-direction:column;gap:0.5rem;font-style:normal;}
.compact{display:inline-flex;align-items:flex-start;gap:0.5rem;line-height:var(--quickconsole);min-width:0;}
.compact .clip_notice{margin-top:0.125rem;}
.sorted_lookup a{text-decoration:underline;text-underline-offset:0.2em;}
.multi_sprite .iterative_wrap{text-align:center;}
.iterative_wrap h1,.iterative_wrap h2{margin:0 0 0.5rem;font-size:calc((1rem + (clamp(1.75rem,4vw,2.75rem) - 1rem) * var(--lateralbackdrop)) * var(--mountedrange));}
.iterative_wrap .absolute_popup{margin-inline:auto;}
.scopedsplash{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--interactivecluster);margin:2rem 0 2.5rem;text-align:left;}
.detached_notice{display:flex;flex-direction:column;gap:0.4rem;word-break:break-word;}
.detached_notice .clip_notice{margin-bottom:0.25rem;}
.prime{font-weight:700;font-size:0.8125rem;text-transform:uppercase;letter-spacing:0.06em;opacity:0.6;}
.detached_notice a{text-decoration:underline;text-underline-offset:0.2em;}
@media(max-width:768px){
.live_item,.unified_lockup .live_item{padding:var(--tertiary_series);}
.pulsed_queue,.latent_wire,.neutral_sparkline .pulsed_queue,.modularoutline .latent_wire{padding:var(--tertiary_series);}
.macro_title,.measured_viewport .macro_title{flex-direction:column;align-items:flex-start;}
.scopedsplash{grid-template-columns:1fr;}
}.fine_hub h1{font-size:calc((1rem + (clamp(2.25rem,5vw,3.5rem) - 1rem) * var(--lateralbackdrop)) * var(--mountedrange));line-height:1.1;margin:0 0 1.5rem;}
.fine_hub h2{font-size:1.5rem;line-height:1.3;margin:2.5rem 0 1rem;}
.fine_hub h3{font-size:1.125rem;line-height:1.4;margin:2rem 0 0.75rem;}
.fine_hub p{margin:0 0 1.25rem;font-size:1.0625rem;line-height:var(--quickconsole);opacity:0.85;}
.fine_hub p:last-child{margin-bottom:0;}
.fine_hub p.tight{margin:0;font-size:0.8125rem;opacity:1;}
.fine_hub ul{margin:0 0 1.25rem;padding-left:1.25rem;display:flex;flex-direction:column;gap:0.5rem;}
.fine_hub li{font-size:1.0625rem;line-height:var(--quickconsole);opacity:0.85;}
.fine_hub a{color:var(--primary);text-decoration:underline;text-underline-offset:0.2em;}
.fine_hub strong{font-weight:700;}
.batched_template{padding:calc(var(--rapid_envelope) * 0.25) 0;}
/* The eyebrow leaves the text column for a rail of its own: an accent line the
   full height of the copy, with the label held at the top of the viewport
   while the prose scrolls past it. v2 puts the heading in the left column and
   v3 centres everything, so neither reads like this one. */
.evented_provider{display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:start;}
.topnav{align-self:stretch;border-inline-start:2px var(--radar) var(--primary);padding-inline-start:clamp(0.75rem,1.5vw,1.25rem);}
.topnav .tight{position:sticky;top:clamp(1.5rem,4vw,2.5rem);margin:0;}
.master{padding:calc(var(--rapid_envelope) * 0.5) 0;}
.groupedsection h1,.groupedsection h2{margin:0;}
.icon{margin-top:0;}
.boxed_combo{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(2rem,4vw,3rem);align-items:start;}
.focal_bar img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--marked_listing);}
.textualtoken{padding:calc(var(--rapid_envelope) * 0.35) 0;}
.virtualdropdown{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. */
.batched_holder{background-color:var(--wiredadapter);}
.mid_cabinet{padding:calc(var(--rapid_envelope) * 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. */
.instantdetails{background:color-mix(in srgb,var(--raw_snippet) 94%,var(--foreground));padding:calc(var(--tertiary_series) * 1.75) calc(var(--tertiary_series) * 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. */
.virtualdropdown .tight,.instantdetails .tight{margin-bottom:0;}
.virtualdropdown h1,.virtualdropdown h2,.instantdetails h1,.instantdetails h2{margin-top:0.35rem;margin-bottom:1.25rem;}
.derived{padding:calc(var(--rapid_envelope) * 0.5) 0;}
.derived h1,.derived h2{font-size:calc((1rem + (clamp(3rem,8vw,5rem) - 1rem) * var(--lateralbackdrop)) * var(--mountedrange));margin:0 0 2rem;line-height:1.1;}
.structuralthread{border:none;border-top:var(--rankedplaceholder) var(--radar) var(--anchored_trace);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. */
.digest{max-width:none;}
.digest p{font-size:calc((1rem + (clamp(1.125rem,1.8vw,1.375rem) - 1rem) * var(--lateralbackdrop)) * var(--mountedrange));margin:0 0 1.5rem;line-height:1.45;max-width:var(--sidetrim);}
.digest p:not(:first-child){font-size:1.0625rem;line-height:var(--quickconsole);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. */
.digest p:not(:first-child)::before{content:"";position:absolute;top:0;inset-inline:0;margin-inline:auto;width:2.5rem;height:2px;background:var(--primary);}
.digest p:last-child{margin-bottom:0;}
.iterative_applet{padding:calc(var(--rapid_envelope) * 0.4) 0;}
.outline{margin-bottom:2rem;}
.outline h1,.outline h2{margin:0;}
.dualscaffold{column-count:2;column-gap:clamp(2rem,4vw,2.5rem);max-width:none;}
.coupled_figure::first-letter{font-size:3.75rem;font-weight:800;float:left;line-height:0.85;padding:0.25rem 0.5rem 0 0;color:var(--primary);}
@media(max-width:1024px){
.dualscaffold{column-count:1;}
}
@media(max-width:768px){
.evented_provider{grid-template-columns:1fr;gap:1rem;}
.topnav{align-self:start;border-inline-start:0;padding-inline-start:0;}
.topnav .tight{position:static;}
.digest p:not(:first-child){margin-inline-start:0;}
.boxed_combo{grid-template-columns:1fr;gap:2rem;}
.instantdetails{padding:calc(var(--tertiary_series) * 1.25) var(--tertiary_series);}
.dualscaffold{column-count:1;}
}.details .plugin{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.25rem;}
.details h1,.details h2{margin:0;font-size:calc((1rem + (clamp(1.75rem,4vw,2.75rem) - 1rem) * var(--lateralbackdrop)) * var(--mountedrange));line-height:1.1;max-width:20ch;}
.plugin .absolute_popup{margin-inline:auto;}
.flatshim .cybercolumn{width:0.875rem;height:0.875rem;color:currentColor;}
/* Neither band is rounded: both run the full width of the page, and a card
   radius on a band with no edge to round left a notch of page showing at each
   of its four corners. The card inside v4 keeps its radius — that one is a
   card, standing inside the shell. */
.bitwise_indicator,.tertiary{border-radius:0;}
.variable .patched_buffer{display:grid;grid-template-columns:1fr auto;align-items:center;gap:clamp(1.5rem,3vw,2.5rem);padding:var(--tertiary_series);border-radius:var(--radial_outline);background:var(--crosssymbol);}
.globalhook h1,.globalhook h2{margin:0 0 0.5rem;font-size:calc((1rem + (clamp(1.5rem,3.5vw,2.25rem) - 1rem) * var(--lateralbackdrop)) * var(--mountedrange));line-height:1.15;}
.globalhook .absolute_popup{margin:0;max-width:52ch;}
.coarsepointer{text-align:center;max-width:640px;margin:0 auto;}
.coarsepointer h1,.coarsepointer h2{margin:0 0 1rem;font-size:calc((1rem + (clamp(2rem,5vw,3rem) - 1rem) * var(--lateralbackdrop)) * var(--mountedrange));line-height:1.1;}
.coarsepointer .absolute_popup{margin-inline:auto;}
.exactviewport{text-align:center;}
.exactviewport h1,.exactviewport h2{margin:0 0 1.5rem;font-size:calc((1rem + (clamp(1.75rem,4vw,2.5rem) - 1rem) * var(--lateralbackdrop)) * var(--mountedrange));line-height:1.1;}
.detachedlever{gap:0.5rem;}
.detachedlever .cybercolumn{width:1.1rem;height:1.1rem;}
.socket .quickworkbench{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;padding:1.5rem 0;border-top:var(--rankedplaceholder) var(--radar) var(--anchored_trace);border-bottom:var(--rankedplaceholder) var(--radar) var(--anchored_trace);}
.quickworkbench h1,.quickworkbench h2{margin:0;font-size:calc((1rem + (clamp(1.25rem,2.5vw,1.5rem) - 1rem) * var(--lateralbackdrop)) * var(--mountedrange));line-height:1.2;}
.elastic_header .stitched{position:relative;overflow:hidden;text-align:center;padding:var(--tertiary_series);border-radius:var(--runtimetunnel);}
.stitched::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;}
.stitched>*{position:relative;}
.stitched h1,.stitched h2{margin:0 0 1rem;font-size:calc((1rem + (clamp(1.75rem,4vw,2.75rem) - 1rem) * var(--lateralbackdrop)) * var(--mountedrange));line-height:1.1;max-width:22ch;margin-inline:auto;}
.stitched .absolute_popup{margin-inline:auto;}
@media(max-width:768px){
.variable .patched_buffer{grid-template-columns:1fr;justify-items:start;}
.quickworkbench,.socket .quickworkbench{flex-direction:column;align-items:flex-start;}
}.optimal{border:var(--rankedplaceholder) var(--radar) var(--anchored_trace);border-radius:var(--runtimetunnel);background:var(--raw_snippet);}
.optimal 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(--quickconsole);cursor:pointer;list-style:none;}
.optimal summary::-webkit-details-marker{display:none;}
.optimal summary::after{content:"+";font-size:1.5rem;font-weight:400;line-height:1.1;flex-shrink:0;color:var(--primary);transition:transform var(--stateless_scrim) var(--coupledcode);}
.optimal[open] summary::after{transform:rotate(45deg);}
.optimal 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(--quickconsole);max-width:70ch;}
.lookup{display:flex;flex-direction:column;gap:1rem;}
.pooled .lookup{max-width:48rem;margin-inline:auto;}
.scroll .optimal{background:transparent;border:none;border-radius:0;border-top:var(--rankedplaceholder) var(--radar) var(--anchored_trace);}
.scroll .optimal:last-child{border-bottom:var(--rankedplaceholder) var(--radar) var(--anchored_trace);}
.scroll .optimal summary{padding:1.75rem 0;font-size:1.1875rem;}
.scroll .optimal 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. */
.looped_provider{display:grid;gap:var(--interactivecluster);grid-template-columns:1fr;}
.swiftdropdown .looped_provider{gap:var(--interactivecluster);}
.subtle_runner{max-width:44rem;margin-inline:auto;}
.fineticker .optimal{background:transparent;border:none;border-radius:0;border-top:var(--rankedplaceholder) var(--radar) var(--anchored_trace);}
.fineticker .optimal:last-child{border-bottom:var(--rankedplaceholder) var(--radar) var(--anchored_trace);}
.fineticker .optimal summary{padding:1.5rem 0;}
.fineticker .optimal p{padding:0 0 1.5rem;}
.internal_console .optimal{background:transparent;border-color:var(--privateboard);}
.hub .orbitaltoolbar{display:grid;grid-template-columns:0.8fr 1.2fr;gap:clamp(2rem,4vw,3rem);align-items:start;}
.transientpattern{display:flex;flex-direction:column;gap:1rem;}
.transientpattern .fixed{margin-bottom:0;}
.collection{grid-template-columns:1fr;gap:1rem;}
@media(max-width:768px){
.looped_provider{grid-template-columns:1fr;}
.hub .orbitaltoolbar{grid-template-columns:1fr;gap:2rem;}
}.bridged_listing{display:grid;gap:var(--interactivecluster);}
.mounted .inlineadapter{align-items:flex-start;}
.inlineadapter{display:flex;flex-direction:column;gap:0.875rem;padding:var(--tertiary_series);transition:transform var(--stateless_scrim) var(--coupledcode),box-shadow var(--stateless_scrim) var(--coupledcode),border-color var(--stateless_scrim) var(--coupledcode);}
.inlineadapter:hover{transform:var(--partialgutter);border-color:var(--privateboard);box-shadow:var(--privatecapsule);}
.inlineadapter h3{margin:0;font-size:1.25rem;}
.inlineadapter p{margin:0;opacity:0.75;line-height:var(--quickconsole);}
.distributed_payload .technical_combo{max-width:56rem;}
.spacer{display:flex;flex-direction:column;}
.subtletag{display:flex;align-items:flex-start;gap:1.5rem;padding:2rem 0;}
.subtletag + .subtletag{border-top:var(--rankedplaceholder) var(--radar) var(--anchored_trace);}
/* An ordinal is read, not decorated, so it is dimmed by mixing towards the
   page's ink rather than by spending opacity. Transparency blends towards the
   ground, and on a dark palette the accent at 45% landed at 2.4:1 — below even
   the 3:1 a numeral this size is held to. Both ends of this mix clear 4.5:1
   against the page (palettes.test.ts) and a mix sits between them, so it
   clears it too, on a light palette and a dark one alike. */
.series{font-size:1.5rem;font-weight:800;color:color-mix(in srgb,var(--primary) 70%,var(--foreground));line-height:1.35;flex-shrink:0;min-width:2.25rem;font-variant-numeric:tabular-nums;}
.technical_combo h3{margin:0 0 0.5rem;font-size:1.25rem;}
.technical_combo p{margin:0;opacity:0.75;line-height:var(--quickconsole);max-width:60ch;}
.paged_stepper .fixed{max-width:34rem;}
.wiredsprite{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--interactivecluster);grid-auto-rows:minmax(220px,auto);}
.pinned{padding:var(--tertiary_series);border-radius:var(--runtimetunnel);display:flex;flex-direction:column;gap:0.75rem;}
.middle_popover{background:var(--raw_snippet);border:var(--broad) var(--radar) var(--anchored_trace);box-shadow:var(--light_service);}
.pinned .midslab{margin-bottom:auto;}
.pinned h3{margin:0;font-size:1.25rem;}
.boxed h3{font-size:calc((1rem + (clamp(1.5rem,2.5vw,1.875rem) - 1rem) * var(--lateralbackdrop)) * var(--mountedrange));}
.pinned p{margin:0;opacity:0.75;line-height:var(--quickconsole);}
.tracker{grid-column:span 1;}
.forkedinspector{grid-column:span 4;}
.front_crate .variablebracket{top:6rem;}
.matte{display:flex;flex-direction:column;}
.global{display:flex;flex-direction:column;gap:0.75rem;padding:2rem 0;border-top:var(--rankedplaceholder) var(--radar) var(--anchored_trace);}
.global:first-child{border-top:none;}
.global h3{font-size:1.375rem;margin:0;}
.global p{margin:0;opacity:0.75;font-size:1.0625rem;line-height:var(--quickconsole);max-width:60ch;}
.striped .fixed{max-width:40rem;}
.extended{display:flex;flex-direction:column;}
.alpha_pointer{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(--rankedplaceholder) var(--radar) var(--anchored_trace);align-items:start;}
.lean_flag{display:flex;align-items:center;gap:1rem;}
.alpha_pointer:last-child{border-bottom:var(--rankedplaceholder) var(--radar) var(--anchored_trace);}
.alpha_pointer h3{margin:0;font-size:1.25rem;}
.alpha_pointer p{margin:0;opacity:0.75;font-size:1.0625rem;line-height:var(--quickconsole);max-width:60ch;}
.regional_flag .fixed{max-width:40rem;}
.stripedplate{display:grid;grid-template-columns:1fr 1fr;}
.marked_payload{display:flex;flex-direction:column;gap:2rem;padding:0 2.5rem;}
.marked_payload:first-child{border-inline-end:var(--rankedplaceholder) var(--radar) var(--anchored_trace);}
.radial{display:flex;gap:1.25rem;align-items:flex-start;}
.radial h3{margin:0 0 0.5rem;font-size:1.25rem;}
.radial p{margin:0;opacity:0.75;line-height:var(--quickconsole);}
@media(min-width:1024px){
.boxed{grid-column:span 2;grid-row:span 2;}
}
@media(max-width:768px){
.wiredsprite{grid-template-columns:1fr;}
.alpha_pointer{grid-template-columns:1fr;gap:1rem;padding:1.5rem 0;}
.subtletag{flex-direction:column;gap:1rem;}
.stripedplate{grid-template-columns:1fr;gap:1.5rem;}
.marked_payload{padding:0;}
.marked_payload:first-child{border-inline-end:none;}
}
@media(max-width:1024px){
.wiredsprite{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. */
.boxed,.forkedinspector{grid-column:span 1;}
.boxed{grid-row:auto;}
}.sprite,.skeleton,.smoothwidget,.strict_provider,.sealedscrim,.threadedpad{padding:calc(var(--rapid_envelope) * 0.7) 0 calc(var(--rapid_envelope) * 0.35);margin-top:calc(var(--rapid_envelope) * 0.7);border-top:var(--rankedplaceholder) var(--radar) var(--anchored_trace);}
.mixedtag{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(--rankedplaceholder) var(--radar) var(--anchored_trace);opacity:0.65;font-size:0.875rem;}
.mixedtag p{margin:0;}
.mixedtag a{text-decoration:none;}
.mixedtag a:hover{text-decoration:underline;}
.blade{margin:0.75rem 0 0;font-size:0.75rem;opacity:0.55;}
.blade a{text-decoration:none;}
.bridged_tooltip{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:clamp(2rem,4vw,3rem);}
.zoned{display:flex;flex-direction:column;gap:1rem;}
.host{display:flex;flex-direction:column;gap:0.75rem;}
.host a{text-decoration:none;opacity:0.85;}
.host a{transition:opacity var(--stateless_scrim) var(--coupledcode),color var(--stateless_scrim) var(--coupledcode);}
.host a:hover{opacity:1;color:var(--primary);}
.queue{font-weight:700;margin:0;font-size:0.8125rem;text-transform:uppercase;letter-spacing:0.06em;opacity:0.55;}
.optimalpane{margin:0;opacity:0.75;max-width:32ch;line-height:var(--quickconsole);}
.snappedbanner{display:flex;flex-direction:column;gap:0.65rem;font-style:normal;}
.feed{display:inline-flex;align-items:flex-start;gap:0.5rem;text-decoration:none;opacity:0.85;line-height:var(--quickconsole);min-width:0;}
.feed .cybercolumn{margin-top:0.125rem;}
.feed .cybercolumn{width:1.05rem;height:1.05rem;}
a.feed:hover{opacity:1;}
.skeleton{background:var(--raw_snippet);border-top:none;padding-top:calc(var(--rapid_envelope) * 0.85);}
.signedscreen{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(2rem,4vw,3rem);align-items:start;}
.merged_deck{display:flex;flex-direction:column;gap:0.875rem;}
.merged_deck p{margin:0;opacity:0.75;max-width:32ch;}
.range{display:flex;flex-direction:column;gap:0.75rem;text-align:right;font-weight:500;}
.range a{text-decoration:none;transition:color var(--stateless_scrim) var(--coupledcode);}
.range a:hover{color:var(--primary);}
.smoothwidget{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. */
.smoothwidget .frame{display:inline-flex;margin-bottom:1.5rem;}
.mid_rail{display:flex;justify-content:center;gap:1.75rem;flex-wrap:wrap;font-weight:500;margin-bottom:1.5rem;}
.mid_rail a{text-decoration:none;transition:color var(--stateless_scrim) var(--coupledcode);}
.mid_rail a:hover{color:var(--primary);}
.smoothwidget .snappedbanner{align-items:center;margin-bottom:2rem;}
.hybrid{width:2.5rem;height:2px;background:var(--border);margin:0 auto;}
.smoothwidget .mixedtag{justify-content:center;border-top:none;margin-top:1.5rem;padding-top:0;}
.strict_provider{border-top-color:var(--privateboard);}
.strict_provider .mixedtag{border-top-color:var(--privateboard);}
.sealedscrim{padding-top:var(--rapid_envelope);}
.slot{margin-bottom:clamp(2rem,4vw,3rem);}
.slot .frame{font-size:calc((1rem + (clamp(2.5rem,9vw,6rem) - 1rem) * var(--lateralbackdrop)) * var(--mountedrange));letter-spacing:calc(var(--smooth_gauge,-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. */
.slot .arrayedposter{display:none;}
.leftspace{display:flex;gap:1.5rem;flex-wrap:wrap;}
.leftspace a{text-decoration:none;font-weight:500;transition:color var(--stateless_scrim) var(--coupledcode);}
.leftspace a:hover{color:var(--primary);}
.sealedscrim .snappedbanner{margin-top:1.5rem;flex-direction:row;gap:1.5rem;flex-wrap:wrap;}
.uniformdropdown{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.25rem;}
.handheld{display:flex;gap:1.5rem;flex-wrap:wrap;}
.handheld a{text-decoration:none;font-weight:500;opacity:0.85;}
.handheld a:hover{opacity:1;}
.spatial{margin:0;opacity:0.6;font-size:0.875rem;}
.threadedpad .snappedbanner{margin-top:1.5rem;}
@media(max-width:768px){
.bridged_tooltip,.signedscreen{grid-template-columns:1fr;gap:2rem;}
.range{text-align:left;}
.mixedtag{flex-direction:column;align-items:flex-start;}
.uniformdropdown{flex-direction:column;align-items:flex-start;}
}
@media(max-width:1024px){
.bridged_tooltip{grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));}
.signedscreen{grid-template-columns:1fr;}
.range{text-align:left;}
}.form{display:grid;gap:1.25rem;}
.ticker{display:flex;flex-direction:column;gap:0.5rem;min-width:0;}
.bubble{font-weight:600;font-size:0.875rem;letter-spacing:0.01em;}
.graphed_figure{display:flex;flex-direction:column;gap:1.5rem;}
.indexed_thumbnail{margin:0;font-size:0.9375rem;font-weight:600;color:var(--primary);}
.core_registry{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;}
.merged_range{display:flex;flex-direction:column;gap:0.75rem;margin:0 0 clamp(1.75rem,3vw,2.5rem);max-width:44rem;}
.enrichedfield{align-items:center;text-align:center;margin-inline:auto;}
.mixed{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem 1.5rem;}
.mixed .precise,.mixed .core_registry{grid-column:1/-1;}
.semanticnotice{padding:var(--tertiary_series);max-width:44rem;margin:0 auto;}
.bridgedlayer{display:grid;grid-template-columns:0.85fr 1.15fr;gap:clamp(2rem,4vw,4rem);align-items:start;}
.pixel{padding:var(--tertiary_series);}
.orbital_mount{max-width:44rem;}
/* The underlined field: no box, so nothing may draw one back. The shared focus
   affordance is a ring with a 3px spread, and around a field whose only edge is
   a rule under the text it read as a box that had appeared from nowhere — the
   whole idea of the layout undone by the act of clicking into it. The focus is
   the rule itself instead: it takes the accent and doubles in weight, which is
   a visible change in the same place the field already draws. */
.normalizedkeypad input,.normalizedkeypad textarea{border:none;border-bottom:var(--rankedplaceholder) var(--radar) var(--anchored_trace);border-radius:0;padding-left:0;padding-right:0;background:transparent;}
.normalizedkeypad input:not([type="checkbox"]):not([type="radio"]):focus,.normalizedkeypad textarea:focus,.normalizedkeypad input:not([type="checkbox"]):not([type="radio"]):focus-visible,.normalizedkeypad textarea:focus-visible{outline:none;box-shadow:inset 0 -2px 0 var(--primary);border-bottom-color:var(--primary);}
.normalizedkeypad textarea{min-height:5rem;}
.inlinestepper{padding:var(--tertiary_series);}
.boxedmodule .staticsidebar{max-width:44rem;margin-inline:auto;}
.headless_sequence{max-width:36rem;}
.secondary_anchor{font-size:0.8125rem;opacity:0.65;margin:1rem 0 0;}
.title{font-weight:400;opacity:0.6;text-transform:none;}
@media(max-width:768px){
.bridgedlayer{grid-template-columns:1fr;}
.mixed{grid-template-columns:1fr;}
.core_registry .headless_plate{width:100%;}
}.lazy_placard .fixed,.straight_system .fixed,.turbo .fixed,.focal .fixed{max-width:none;}
.proxied .router{align-items:center;}
.curated_pattern{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:var(--interactivecluster);}
.cybermodal{display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden;transition:transform var(--stateless_scrim) var(--coupledcode),box-shadow var(--stateless_scrim) var(--coupledcode);}
/* 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. */
.ultrachrome{padding:clamp(1.25rem,2.5vw,1.75rem);flex:1;}
.inline_chart{margin:0;}
.inline_chart 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). */
.inline_chart img,.regulartunnel img,.package img{border-width:0;border-radius:0;}
.ultrachrome h3{margin:0 0 0.5rem;font-size:1.25rem;}
.ultrachrome p{margin:0;opacity:0.75;line-height:var(--quickconsole);}
/* 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. */
.reflective_combo{margin:0 0 clamp(2rem,4vw,3rem);}
.reflective_combo img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--marked_listing);display:block;}
.measuredbreadcrumb{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. */
.symmetricblock::before,.convergedblade::before{content:"";display:block;width:2.5rem;height:2px;margin-bottom:1rem;background:var(--primary);}
.symmetricblock h3{margin:0 0 0.5rem;font-size:calc((1rem + (clamp(1.25rem,2vw,1.5rem) - 1rem) * var(--lateralbackdrop)) * var(--mountedrange));}
.symmetricblock p{margin:0;opacity:0.75;line-height:var(--quickconsole);max-width:46ch;}
.record{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--interactivecluster);}
/* 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. */
.measuredboard{display:flex;flex-direction:column;background:var(--crosssymbol);color:var(--foreground);border-radius:var(--runtimetunnel);overflow:hidden;border:var(--rankedplaceholder) var(--radar) var(--anchored_trace);}
.turbo .tallterminal 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. */
.isolatedbundle{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;}
.regulartunnel{margin:0;}
.regulartunnel img{width:100%;height:100%;min-height:18rem;object-fit:cover;display:block;}
.tallterminal{padding:clamp(1.5rem,3vw,2rem);flex:1;}
.tallterminal h3{margin:0 0 0.5rem;font-size:1.375rem;}
.tallterminal p{margin:0;opacity:0.75;line-height:var(--quickconsole);}
.inline_ring{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4rem);align-items:start;}
.condensed{grid-template-columns:1fr;}
.vector{display:flex;flex-direction:column;}
.sidebar{margin:0 0 1.5rem;}
.sidebar img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--marked_listing);display:block;}
.contextualviewport h3{margin:0 0 0.5rem;font-size:calc((1rem + (clamp(1.375rem,2.5vw,1.75rem) - 1rem) * var(--lateralbackdrop)) * var(--mountedrange));}
.contextualviewport p{margin:0;opacity:0.75;font-size:1.0625rem;line-height:var(--quickconsole);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. */
.inlinesplash{display:grid;gap:clamp(1.75rem,3vw,2.5rem);align-content:start;}
.condensed .inlinesplash{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));}

.convergedblade h3{margin:0 0 0.5rem;font-size:calc((1rem + (clamp(1.25rem,2vw,1.5rem) - 1rem) * var(--lateralbackdrop)) * var(--mountedrange));}
.convergedblade p{margin:0;opacity:0.75;font-size:1.0625rem;line-height:var(--quickconsole);max-width:52ch;}
.threaded{display:flex;flex-direction:column;}
.router{display:flex;gap:clamp(2rem,5vw,4rem);align-items:center;padding:clamp(2.5rem,5vw,4rem) 0;border-top:var(--rankedplaceholder) var(--radar) var(--anchored_trace);}
.router:last-child{border-bottom:var(--rankedplaceholder) var(--radar) var(--anchored_trace);}
.threaded>.router:nth-child(even){flex-direction:row-reverse;}
.timedentry{flex:1;}
.timedentry h3{margin:0 0 1rem;font-size:calc((1rem + (clamp(1.625rem,3.5vw,2.25rem) - 1rem) * var(--lateralbackdrop)) * var(--mountedrange));}
.timedentry p{margin:0;opacity:0.75;font-size:1.125rem;line-height:var(--quickconsole);max-width:60ch;}
.lowersprite{width:45%;flex-shrink:0;margin:0;}
.lowersprite img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--marked_listing);display:block;}
.integralsystem .runner{display:grid;grid-template-columns:repeat(3,1fr);}
.neutralnav{position:relative;overflow:hidden;aspect-ratio:1;}
.neutralnav::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;}
.package{margin:0;height:100%;}
.package 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. */
.chained{display:flex;align-items:flex-end;}
.chained::after{display:none;}
.chained .sticky_sparkline{position:static;width:100%;}
.sticky_sparkline{position:absolute;inset:auto 0 0;z-index:1;padding:1.5rem;color:var(--background);transition:transform var(--stateless_scrim) var(--coupledcode);}
.neutralnav:not(.chained):hover .sticky_sparkline,.neutralnav:not(.chained):focus-within .sticky_sparkline{transform:var(--partialgutter);}
.sticky_sparkline h3{margin:0 0 0.25rem;font-size:1.125rem;}
.sticky_sparkline p{margin:0;font-size:0.875rem;opacity:0.85;line-height:var(--quickconsole);}
@media(max-width:1024px){
.integralsystem .runner{grid-template-columns:repeat(2,1fr);}
.record{grid-template-columns:1fr;}
}
@media(max-width:768px){
.integralsystem .runner{grid-template-columns:1fr;}
.measuredbreadcrumb{grid-template-columns:1fr;}
.reflective_combo img{aspect-ratio:16/9;}
.record{grid-template-columns:1fr;}
.isolatedbundle{grid-template-columns:1fr;}
.inline_ring{grid-template-columns:1fr;gap:3rem;}
.router,.threaded>.router:nth-child(even){flex-direction:column;gap:2rem;padding:2rem 0;}
.lowersprite{width:100%;}
}/* 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. */
.radial_region{border-bottom:1px var(--radar) var(--sandboxed);}
/* The wordmark's lead capitals stand a step above the letters they open, and
   both figures are read off the face rather than fixed: a face named at 400
   (Space Mono) set against a hard 800 lead was two different logotypes in one
   line. Where the face is light enough that the step lands under 400 the
   letters simply render at the lightest weight the family ships, and the
   accent on the lead carries the distinction on its own. */
.forkedchrome{color:var(--foreground);font-weight:calc(var(--scopedhost,600) - 100);}
.reartint{color:var(--primary);font-weight:var(--scopedhost,600);}
.mixedsearch .tunnel a{font-weight:500;}
.compound .tunnel a{text-transform:uppercase;letter-spacing:0.08em;font-weight:600;}
.session .tunnel a{font-family:var(--opaque);text-transform:uppercase;letter-spacing:0.12em;font-weight:800;}
.session .tunnel a[aria-current="page"]{font-weight:900;}
.session .forkedchrome{text-transform:uppercase;letter-spacing:0.06em;}
.queued .tunnel a{font-style:italic;font-weight:500;}
.queued .forkedchrome{font-style:italic;}
.sheet .tunnel a{font-variant-caps:all-small-caps;letter-spacing:0.06em;font-weight:600;}
.sheet .forkedchrome{font-variant-caps:all-small-caps;letter-spacing:0.03em;}
.streamed_plugin .tunnel a{text-transform:uppercase;letter-spacing:0.18em;font-weight:500;}
.streamed_plugin .forkedchrome{letter-spacing:0.06em;}
.reactivestepper .tunnel a{font-family:var(--opaque);font-weight:600;}
.reactivestepper .forkedchrome{font-weight:calc(var(--scopedhost,600) + 100);}
.derived_queue .tunnel a{font-weight:800;}
.derived_queue .tunnel a[aria-current="page"]{font-weight:900;}
.derived_queue .forkedchrome{text-transform:uppercase;font-weight:calc(var(--scopedhost,600) + 100);}
.anchor .tunnel a{text-transform:uppercase;letter-spacing:0.04em;font-size:0.8125rem;font-weight:600;}
.anchor .forkedchrome{font-size:1.125rem;}
.latent_bracket{display:flex;align-items:center;justify-content:space-between;gap:clamp(1rem,2vw,1.5rem);padding:clamp(0.875rem,2vw,1.125rem) 0;}
.procedural{display:flex;flex-direction:column;align-items:center;gap:0.875rem;padding:clamp(1rem,2vw,1.25rem) 0;}
.neutralframe{display:flex;align-items:center;gap:clamp(1rem,2vw,1.5rem);}
.tunnel{display:flex;flex-wrap:wrap;gap:clamp(1rem,2vw,1.5rem);}
/* The underline means one thing on the three bars that draw one: the pointer
   is here. The page the visitor is actually on is marked by the shared layer —
   the navigation accent and a heavier label — because a rule under the label at
   rest reads as a second marker and leaves the bar looking hovered. */
.radial_region .tunnel a::after{content:"";position:absolute;left:0;bottom:-0.35rem;width:0;height:2px;background:var(--primary);transition:width var(--stateless_scrim) var(--coupledcode);}
.radial_region .tunnel 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. */
.rawrow .frame{max-height:3rem;overflow:hidden;transition:max-height var(--stateless_scrim) var(--coupledcode),opacity var(--stateless_scrim) var(--coupledcode);}
.rawrow[data-dualmask] .frame{max-height:0;opacity:0;}
.rawrow[data-dualmask] .procedural{gap:0;padding-block:clamp(0.5rem,1.2vw,0.75rem);}
.rawrow .tunnel a{text-transform:uppercase;font-size:0.8125rem;letter-spacing:0.1em;font-weight:600;}
.rawrow .tunnel a::after{content:"";position:absolute;left:50%;right:50%;bottom:-0.3rem;height:1px;background:currentColor;transition:left var(--stateless_scrim) var(--coupledcode),right var(--stateless_scrim) var(--coupledcode);}
.rawrow .tunnel a:hover::after{left:0;right:0;}
.shim .tunnel a{padding:0.35rem 0.9rem;border-radius:var(--kinetic_tab);}
/* 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. */
.shim .tunnel a[aria-current="page"]{font-weight:500;color:color-mix(in srgb,var(--element) 65%,var(--semantic_shell));}
.technical_column{display:none;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;cursor:pointer;}
.technical_column .instant_particle{display:none;}
.technical_column[aria-expanded="true"] .flexpanel{display:none;}
.technical_column[aria-expanded="true"] .instant_particle{display:inline-flex;}
.rawrow .tunnel{justify-content:center;}
.shim{border-bottom:1px var(--radar) var(--sandboxed);}
.shim .tunnel{border:var(--rankedplaceholder) var(--radar) var(--footer);border-radius:var(--kinetic_tab);padding:0.5rem 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{--compactframe:5rem;--taggedmenu:var(--primary);}
.lateralcheckpoint{height:var(--compactframe);}
.striped_backdrop{color:var(--foreground);transition:background var(--stateless_scrim) var(--coupledcode),backdrop-filter var(--stateless_scrim) var(--coupledcode),box-shadow var(--stateless_scrim) var(--coupledcode);}
.striped_backdrop .latent_bracket{min-height:var(--compactframe);padding-block:0;align-items:stretch;transition:min-height var(--stateless_scrim) var(--coupledcode);}
.striped_backdrop .technical_column{align-self:center;}
.tonalsummary{display:inline-flex;align-items:center;gap:0.75rem;text-transform:uppercase;transition:opacity var(--stateless_scrim) var(--coupledcode);}
.tonalsummary:hover{opacity:0.8;}
.maskedcrate{font-weight:var(--scopedhost,600);letter-spacing:var(--smooth_gauge,-0.01em);}
.layout{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:2rem;height:2rem;flex-shrink:0;color:var(--primary);}
.layout svg{width:100%;height:100%;}
.striped_backdrop .neutralframe{align-self:stretch;align-items:stretch;}
.striped_backdrop .tunnel{gap:0;align-items:stretch;}
.striped_backdrop .tunnel a{color:var(--foreground);display:flex;align-items:center;position:relative;overflow:hidden;padding:0 2rem;border-radius:0;font-size:1rem;font-weight:500;letter-spacing:0.05em;text-transform:uppercase;transition:padding var(--stateless_scrim) var(--coupledcode),font-size var(--stateless_scrim) var(--coupledcode),color var(--stateless_scrim) var(--coupledcode);}
.striped_backdrop .tunnel a::before{content:"";position:absolute;inset:0;background:var(--primary);opacity:0;transition:opacity var(--stateless_scrim) var(--coupledcode);}
.striped_backdrop .tunnel a:hover::before{opacity:0.1;}
.striped_backdrop .tunnel a:hover,.striped_backdrop .tunnel a[aria-current="page"]{color:var(--taggedmenu);}
.striped_backdrop .tunnel a[aria-current="page"]{font-weight:800;}
.striped_backdrop .tunnel a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--taggedmenu);transition:bottom var(--stateless_scrim) var(--coupledcode);}
/* 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. */
.striped_backdrop[data-dualmask]{background-color:color-mix(in srgb,var(--macro) 82%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px var(--radar) var(--sandboxed);}
.striped_backdrop[data-dualmask] .latent_bracket{min-height:3.5rem;}
.striped_backdrop[data-dualmask] .tunnel a{padding:0 1rem;font-size:0.875rem;}
.striped_backdrop[data-dualmask] .tunnel a[aria-current="page"]::after{bottom:0.55rem;}
.striped_backdrop[data-dualmask] .tunnel a:hover::before{opacity:0;}
.orbital .latent_bracket{gap:clamp(1rem,3vw,2.5rem);padding-block:clamp(0.6rem,1.2vw,0.9rem);}
.orbital .neutralframe{color:var(--background);}
.cleanbreadcrumb{display:inline-flex;align-items:center;gap:0.75rem;min-width:0;color:var(--background);}
.granular_digest{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;flex-shrink:0;border:var(--rankedplaceholder) var(--radar) var(--primary);color:var(--primary);font-size:0.9375rem;font-weight:700;}
.marked{display:flex;flex-direction:column;min-width:0;line-height:1.15;}
.neutralbracket{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. A ceiling in characters keeps the trade a strapline under
   the name, whatever arrives in the field. */
.asyncpill{font-family:var(--linear_alert,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;max-width:min(100%,20ch);}
.orbital .headless_plate,.orbital .headless_plate:hover{box-shadow:none;border-color:transparent;}
.orbital .headless_plate:hover{background:transparent;color:var(--background);border-color:var(--background);opacity:1;}
.orbital .tunnel{counter-reset:spatialsegment;align-items:center;gap:0;}
.orbital .tunnel 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(--stateless_scrim) var(--coupledcode);}
.orbital .tunnel a::after{content:"";position:absolute;left:0;top:0.25rem;bottom:0.25rem;border-left:var(--rankedplaceholder) var(--radar) var(--background);opacity:0.32;}
.orbital .tunnel a:first-child::after{display:none;}
.orbital .tunnel a::before{counter-increment:spatialsegment;content:counter(spatialsegment,decimal-leading-zero);color:color-mix(in srgb,var(--background) 55%,transparent);font-size:0.8125rem;font-weight:700;transition:color var(--stateless_scrim) var(--coupledcode);}
/* 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. */
.orbital .tunnel a:hover::before,.orbital .tunnel a[aria-current="page"]::before{color:color-mix(in srgb,var(--primary) 50%,var(--background));}
/* v6 — the divided bar. The row is the page's own width rather than the shell's
   (capped so it does not stretch on a very wide screen), and every cell in it
   stands the full height of the bar with a rule between it and the next: that
   frame is the whole layout, so the edge under the bar and the rule beside the
   brand are drawn heavier than a hairline while the rules between the pages
   stay at the theme's own width. */
.private{border-bottom:2px var(--radar) var(--footer);}
.code{display:flex;align-items:stretch;width:min(90rem,100%);margin-inline:auto;}
.compiled_trim{display:flex;align-items:center;gap:0.75rem;min-width:0;padding:0.9rem clamp(1rem,2vw,1.5rem);}
/* The signature's own ink where the palette names one (logotype-ink.ts); the
   bar's colour everywhere else. */
.compiled_trim .root{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase;letter-spacing:0.14em;font-size:0.875rem;line-height:1.15;color:var(--indexed_lockup,inherit);}
.private .neutralframe{flex:1;align-items:stretch;gap:0;}
.private .tunnel{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. */
.private .tunnel a{display:inline-flex;align-items:center;border-radius:0;padding:0 clamp(0.9rem,1.6vw,1.25rem);border:var(--rankedplaceholder) var(--radar) var(--footer);border-width:0;border-inline-start-width:var(--rankedplaceholder);text-transform:uppercase;letter-spacing:0.2em;font-size:0.7rem;font-weight:500;transition:background var(--stateless_scrim) var(--coupledcode),color var(--stateless_scrim) var(--coupledcode);}
.private .tunnel 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. */
.private .tunnel a:last-child{border-inline-end-width:var(--rankedplaceholder);}
/* 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. */
.private .tunnel a:hover{background:color-mix(in srgb,var(--semantic_shell) 14%,var(--macro));}
/* 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. */
.private .tunnel a[aria-current="page"]{background:var(--semantic_shell);color:var(--macro);}
/* 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. */
.preset{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;--partialgutter:none;--clustered_digest:1;--holder:none;--charted_screen:none;--paired_glyph:var(--semantic_shell);--shell:var(--macro);}

.preset .cybercolumn{width:0.9rem;height:0.9rem;}
.private .technical_column{margin-inline-start:auto;width:3.5rem;height:auto;border:0;border-inline-start:2px var(--radar) var(--footer);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. */
.compiled_trim{transition:padding var(--stateless_scrim) var(--coupledcode);}
.compiled_trim .arrayedposter{transition:width var(--stateless_scrim) var(--coupledcode),height var(--stateless_scrim) var(--coupledcode);}
.private[data-dualmask] .compiled_trim{padding-block:0.45rem;}
.private[data-dualmask] .compiled_trim .arrayedposter{width:1.75rem;height:1.75rem;}
.private[data-dualmask] .compiled_trim .binary{width:1rem;height:1rem;}
.node{padding:calc(var(--private_selector) / 2);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. */
.node:hover{box-shadow:none;}
.node .cybercolumn{width:1.1rem;height:1.1rem;}
@media(max-width:900px){
.latent_bracket,.procedural{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. */
.rawrow[data-dualmask] .frame{max-height:none;opacity:1;}
.technical_column{display:inline-flex;}
.neutralframe{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(--macro);border-top:var(--rankedplaceholder) var(--radar) var(--footer);border-bottom:var(--rankedplaceholder) var(--radar) var(--footer);}
.neutralframe[data-inline_tip]{display:flex;}
.tunnel{flex-direction:column;gap:0.25rem;}
.tunnel a{padding:0.65rem 0.25rem;}
.shim .tunnel{background:transparent;border:none;padding:0;gap:0.25rem;}
.tunnel a::after{display:none;}
:root{--compactframe:4rem;}
.striped_backdrop[data-dualmask] .latent_bracket{min-height:3.25rem;}
.striped_backdrop .tunnel{gap:0.25rem;}
.striped_backdrop .neutralframe{align-self:auto;align-items:stretch;background:var(--macro);}
.striped_backdrop .tunnel a,.striped_backdrop[data-dualmask] .tunnel a{padding:0.65rem 0.25rem;font-size:0.9375rem;}
.striped_backdrop .tunnel a[aria-current="page"]::after,.striped_backdrop[data-dualmask] .tunnel a[aria-current="page"]::after{display:block;bottom:0.35rem;}
.orbital .neutralframe{background:var(--subtlepanel);border-color:var(--background);}
.orbital .tunnel{gap:0.25rem;}
.orbital .tunnel 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. */
.code{align-items:center;}
.private .neutralframe{padding:0;gap:0;border-top-width:2px;}
.private .tunnel{gap:0;}
.private .tunnel a,.private .tunnel a:first-child,.private .tunnel a:last-child{padding:0.9rem 1.25rem;border-width:0;border-block-end-width:var(--rankedplaceholder);}
.preset{justify-content:center;padding:0.9rem 1.25rem;}
.private .technical_column{height:2.75rem;}
.neutralframe .headless_plate{width:100%;}
}.raised_dashboard{padding:calc(var(--rapid_envelope) * 1.35) 0 calc(var(--rapid_envelope) * 0.85);}
.textual_ruler{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. */
.textual_ruler h1,.textual_ruler h2{font-size:calc((1rem + (clamp(2.5rem,7vw,5rem) - 1rem) * var(--lateralbackdrop)) * var(--mountedrange));line-height:1.05;margin:0;max-width:16ch;overflow-wrap:break-word;}
.textual_ruler .absolute_popup{margin-inline:auto;}
/* The badge's own ink, not the accent: half the themes fill the badge with
   the accent, and an accent glyph on an accent ground shows nothing. */
.masterregion .cybercolumn{width:1rem;height:1rem;color:currentColor;}
.orbital_registry{border-radius:var(--kinetic_tab);}
.kineticprimitive{border-radius:var(--kinetic_tab);}
.opaque_alert{border-radius:var(--zone);}
.mapped{border-radius:var(--zone) var(--zone) var(--zone) 0;}
/* A diluted ground cannot keep the badge's own ink. The line badge is written
   for the full ground; at 10% it is really sitting on the page, and the ink of
   a badge whose ground is the page's ink — white on high-clarity — came out
   white on a pale wash. It takes the page's ink instead; the inverted ground
   overrides it later, as it does every badge.
   The ghost badge keeps only a trace of that ground: at 35% the wash read as a
   grey slab in every theme whose badge ground is the ink. At 10% the theme is
   still legible in it and the accent outline does the stating. */
.atomic{background:color-mix(in srgb,var(--linearsequence) 10%,transparent);border-color:var(--primary);color:var(--foreground);}
.atomic .cybercolumn{color:var(--primary);}
.shaded_wrap{background:color-mix(in srgb,var(--linearsequence) 10%,transparent);color:var(--foreground);letter-spacing:var(--derivednode);font-size:0.75rem;}
.shaded_wrap::before{content:"";width:2rem;height:2px;background:var(--primary);flex:0 0 auto;}
.converged_banner{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;}
.converged_banner li{display:flex;align-items:center;gap:0.5rem;}
.converged_banner .cybercolumn{width:1.1rem;height:1.1rem;color:var(--primary);}
.ambient{padding:calc(var(--rapid_envelope) * 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. */
.spaced{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. */
.typed{display:flex;align-items:center;gap:0.75rem;}
.typed::before{content:"";width:2rem;height:2px;background:var(--primary);flex:0 0 auto;}
.packed_symbol{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. */
.packed_symbol h1,.packed_symbol h2{font-size:calc((1rem + (clamp(2rem,4.5vw,3rem) - 1rem) * var(--lateralbackdrop)) * var(--mountedrange));line-height:1.1;margin:0;overflow-wrap:break-word;}
.decodedcallout{margin:0;display:flex;}
.decodedcallout img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--marked_listing);display:block;box-shadow:var(--light_service);}
.raisedmedia{aspect-ratio:4/3;border-radius:var(--runtimetunnel);background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 18%,transparent),color-mix(in srgb,var(--primary) 4%,transparent));border:var(--rankedplaceholder) var(--radar) var(--anchored_trace);}
.measured{padding:var(--rapid_envelope) 0 calc(var(--rapid_envelope) * 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. */
.measured::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(80% 70% at 0% -5%,color-mix(in srgb,var(--primary) 30%,transparent) 0%,transparent 66%),linear-gradient(0deg,color-mix(in srgb,var(--primary) 18%,transparent) 0%,transparent 45%);}
/* Narrower than the shell it sits in: display type set to a wide theme's full
   measure runs as one endless line on a large monitor. */
.radial_thread{max-width:64rem;}
.header{font-size:calc((1rem + (clamp(2.5rem,7vw,4.5rem) - 1rem) * var(--lateralbackdrop)) * var(--mountedrange));line-height:0.95;margin:0 0 clamp(2rem,4vw,3rem);text-transform:uppercase;word-break:break-word;}
/* The display type opens on the accent: the first letter is the only mark of
   colour in a hero that is otherwise one block of ink. */
.header::first-letter{color:var(--primary);font-weight:max(var(--light),800);}
/* A thin rule divides the display type from the closing row, and the accent
   runs along its first half before it fades back into the hairline. */
.rapiddivider{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;border-top:var(--rankedplaceholder) var(--radar) var(--anchored_trace);padding-top:clamp(1.5rem,3vw,2.25rem);position:relative;}
.rapiddivider::before{content:"";position:absolute;inset-inline:0;top:calc(var(--rankedplaceholder) * -1);height:2px;background:linear-gradient(90deg,var(--primary) 0%,color-mix(in srgb,var(--primary) 35%,transparent) 35%,transparent 72%);}
/* The theme's card padding scaled up rather than replaced: a hero card carries
   one message on an open ground and the tight density of a grid card leaves its
   type sitting on the edges. */
.precise_toggle{padding:calc(var(--rapid_envelope) * 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. */
.inline{position:absolute;inset:0;margin:0;z-index:0;}
.precise_toggle .lowerwidget{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. */
.inline img{width:100%;height:100%;object-fit:cover;display:block;border:0;border-radius:0;}
.inline::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%);}
.precise_toggle::before{content:"";position:absolute;top:-15%;right:-10%;width:45vw;height:45vw;border-radius:50%;background:var(--buffered_cluster);filter:blur(90px);z-index:-1;}
.precise_toggle::after{content:"";position:absolute;bottom:-15%;left:-10%;width:35vw;height:35vw;border-radius:50%;background:var(--buffered_cluster);filter:blur(80px);z-index:-1;}
.federated_toolbar{max-width:min(100%,56rem);margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.25rem;padding:var(--tertiary_series);padding-block:calc(var(--tertiary_series) * 2.4);padding-inline:calc(var(--tertiary_series) * 1.5);border:var(--rankedplaceholder) var(--radar) var(--anchored_trace);border-radius:var(--runtimetunnel);background:var(--crosssymbol);box-shadow:var(--light_service);}
.federated_toolbar h1,.federated_toolbar h2{font-size:calc((1rem + (clamp(2.25rem,6vw,3.75rem) - 1rem) * var(--lateralbackdrop)) * var(--mountedrange));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. */
.queued_deck{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. */
.scopedtoken{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;flex:1;}
.reversed{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:1.25rem;padding-block:calc(var(--rapid_envelope) * 1.25);padding-inline-start:min(max(calc((var(--zoomed) + var(--short_mod,0rem)) / 2),calc(100% - (var(--meshedcomponent) + var(--lower_bezel,0rem)) / 2)),8rem);padding-inline-end:clamp(2rem,5vw,4rem);}
.fluid_bundle{margin:0;display:flex;align-self:stretch;}
.fluid_bundle 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. */
.reversed h1,.reversed h2{font-size:calc((1rem + (clamp(2rem,4vw,3.25rem) - 1rem) * var(--lateralbackdrop)) * var(--mountedrange));line-height:1.05;margin:0;max-width:16ch;overflow-wrap:break-word;}
.iterativeledger{border-color:var(--privateboard);}
.optimal_backdrop{padding:calc(var(--rapid_envelope) * 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. */
.optimal_backdrop::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(125% 100% at 88% -10%,color-mix(in srgb,var(--primary) 38%,transparent) 0%,transparent 68%),radial-gradient(95% 90% at -5% 105%,color-mix(in srgb,var(--primary) 22%,transparent) 0%,transparent 64%),linear-gradient(155deg,color-mix(in srgb,var(--primary) 13%,transparent) 0%,transparent 55%);}
.scrollpanel{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);gap:clamp(2.5rem,5vw,4rem);align-items:center;}
.async{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. */
.async h1,.async h2{font-size:calc((1rem + (clamp(2rem,4.5vw,3rem) - 1rem) * var(--lateralbackdrop)) * var(--mountedrange));line-height:1.1;margin:0;overflow-wrap:break-word;}
/* A short accent rule closes the headline. */
.async h1::after,.async h2::after{content:"";display:block;width:4rem;height:3px;margin-top:clamp(1rem,2vw,1.5rem);background:var(--primary);}
.ruler{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--interactivecluster);padding:var(--tertiary_series);border:var(--broad) var(--radar) var(--anchored_trace);border-radius:var(--runtimetunnel);box-shadow:var(--light_service);background:linear-gradient(150deg,color-mix(in srgb,var(--primary) 22%,var(--raw_snippet)) 0%,color-mix(in srgb,var(--raw_snippet) 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. */
.ruler .fluid{font-size:calc((1rem + (clamp(1.5rem,3vw,2rem) - 1rem) * var(--lateralbackdrop)) * var(--mountedrange));}
@media(max-width:768px){
.spaced,.scopedtoken,.scrollpanel{grid-template-columns:1fr;}
.reversed{padding-inline:var(--zoomed);}
.fluid_bundle img{height:auto;aspect-ratio:16/9;}
.spaced{align-items:center;}
.packed_symbol h1,.packed_symbol h2{font-size:calc((1rem + (clamp(2.25rem,7vw,3rem) - 1rem) * var(--lateralbackdrop)) * var(--mountedrange));}
.rapiddivider{flex-direction:column;align-items:flex-start;}
.ruler{grid-template-columns:1fr;}
}
@media(max-width:640px){
.raised_dashboard{padding:calc(var(--rapid_envelope) * 0.85) 0 calc(var(--rapid_envelope) * 0.6);}
.ambient{padding:calc(var(--rapid_envelope) * 0.85) 0;}
.measured{padding:calc(var(--rapid_envelope) * 0.75) 0 calc(var(--rapid_envelope) * 0.55);}
.precise_toggle{padding:calc(var(--rapid_envelope) * 0.85) 0;}
.reversed{padding-block:calc(var(--rapid_envelope) * 0.85);}
.optimal_backdrop{padding:calc(var(--rapid_envelope) * 0.85) 0;}
}
/* v7's video ground: the clip, or its poster alone, sits under a veil that is
   what makes light ink safe over footage nobody previewed — the same
   page-ink wash v4's photo backdrop darkens under, off the foreground colour
   rather than a made-up "ink" token that no theme actually defines. Its card
   then lets the clip through as movement and colour rather than detail;
   without backdrop-filter the same translucent ground still reads, since the
   veil has already bought the contrast. Ground and border there reuse the
   same inverted-surface and strong-border pair the design system's own
   inverted ground paints with, rather than a raw color-mix off the plain
   foreground and background colours, which the semantic-CSS contract
   reserves for that shared layer alone; the corner radius matches every
   other hero card's. */
.targetedmenu{position:relative;isolation:isolate;overflow:hidden;padding:calc(var(--rapid_envelope) * 1.35) 0;}
.live_flyout,.digital_block{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;margin:0;z-index:0;pointer-events:none;}
.digital_block img{width:100%;height:100%;object-fit:cover;display:block;border:0;border-radius:0;}
.nominalpanel{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,color-mix(in srgb,var(--foreground) 62%,transparent),color-mix(in srgb,var(--foreground) 78%,transparent));}
.targetedmenu .lowerwidget{position:relative;z-index:2;}
.vertical{max-width:44rem;padding:clamp(1.75rem,4vw,3rem);border-radius:var(--runtimetunnel);background:color-mix(in srgb,var(--subtlepanel) 42%,transparent);border:var(--rankedplaceholder) var(--radar) var(--privateboard);backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);display:flex;flex-direction:column;gap:1.25rem;}
.vertical h1,.vertical h2{font-size:calc((1rem + (clamp(2.25rem,5.5vw,4rem) - 1rem) * var(--lateralbackdrop)) * var(--mountedrange));line-height:1.05;margin:0;max-width:18ch;overflow-wrap:break-word;}.tactile .tactiletopbar{display:grid;gap:var(--interactivecluster);}
.onlinestepper{padding-bottom:1.75rem;border-bottom:var(--rankedplaceholder) var(--radar) var(--anchored_trace);}
.packed{display:flex;align-items:center;gap:0.75rem;margin-bottom:0.75rem;}
.packed .cybercolumn{color:var(--primary);}
.onlinestepper h3{margin:0;font-size:1.25rem;}
.onlinestepper p{margin:0;opacity:0.75;line-height:var(--quickconsole);}
.digitalviewport .fixedplaceholder{display:flex;flex-direction:column;gap:1.25rem;}
.richscroller{display:flex;align-items:flex-start;gap:1.5rem;}
.placeholder{font-size:1.5rem;font-weight:800;color:var(--primary);opacity:0.5;line-height:1.2;flex-shrink:0;min-width:2.25rem;font-variant-numeric:tabular-nums;}
.shared h3{margin:0 0 0.375rem;font-size:1.25rem;}
.shared p{margin:0;opacity:0.75;line-height:var(--quickconsole);max-width:60ch;}
.poster .scoped{display:grid;gap:var(--interactivecluster);}
.rich{display:flex;flex-direction:column;gap:0.75rem;}
.rich h3{margin:0;font-size:1.25rem;}
.rich p{margin:0;opacity:0.75;line-height:var(--quickconsole);}
.calibrated .lean{display:flex;flex-direction:column;}
.midbracket{display:grid;grid-template-columns:minmax(12rem,0.8fr) 1.6fr;gap:1rem clamp(1.5rem,4vw,3rem);padding:2rem 0;border-top:var(--rankedplaceholder) var(--radar) var(--anchored_trace);align-items:start;}
.midbracket:last-child{border-bottom:var(--rankedplaceholder) var(--radar) var(--anchored_trace);}
.midbracket h3{margin:0;font-size:1.25rem;}
.midbracket p{margin:0;opacity:0.75;font-size:1.0625rem;line-height:var(--quickconsole);max-width:60ch;}
.batched .protoheading{display:flex;flex-direction:column;}
.elastic_plate{padding:2.5rem 0;border-top:var(--rankedplaceholder) var(--radar) var(--privateboard);}
.elastic_plate:last-child{border-bottom:var(--rankedplaceholder) var(--radar) var(--privateboard);}
.elastic_plate h3{margin:0 0 0.75rem;font-size:calc((1rem + (clamp(1.375rem,2.5vw,1.75rem) - 1rem) * var(--lateralbackdrop)) * var(--mountedrange));}
.elastic_plate p{margin:0;font-size:1.0625rem;line-height:var(--quickconsole);max-width:60ch;opacity:0.85;}
.popup .planar{list-style:none;margin:0;padding:0;display:grid;gap:var(--interactivecluster);}
.legacy_instance{display:flex;gap:1rem;align-items:flex-start;}
.dualstencil{flex-shrink:0;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--banner);color:var(--primary);display:inline-flex;align-items:center;justify-content:center;}
.dualstencil .cybercolumn{width:1rem;height:1rem;}
.legacy_instance h3{margin:0 0 0.25rem;font-size:1.0625rem;}
.legacy_instance p{margin:0;opacity:0.75;font-size:0.9375rem;line-height:var(--quickconsole);}
@media(max-width:768px){
.tactile .tactiletopbar{grid-template-columns:1fr;}
.richscroller{flex-direction:column;align-items:flex-start;gap:1rem;}
.midbracket{grid-template-columns:1fr;gap:1rem;padding:1.5rem 0;}
.elastic_plate{padding:1.75rem 0;}
.popup .planar{grid-template-columns:1fr;}
}.hostedpackage{padding:clamp(3.5rem,7vw,6rem) 0;}
.hostedpackage .fine_hub{margin-inline:auto;}
.chrome .fine_hub{max-width:72ch;}
.filteredshard{margin:0 0 0.5rem;font-size:0.8125rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--primary);}
.steppedheader{font-size:calc((1rem + (clamp(2.25rem,5vw,3.5rem) - 1rem) * var(--lateralbackdrop)) * var(--mountedrange));line-height:1.1;margin:0 0 1rem;}
.measured_card{margin:0 0 0.5rem;font-size:0.9375rem;opacity:0.7;}
.measured_card code{font-size:0.875em;background:var(--raw_snippet);padding:0.1em 0.4em;border-radius:var(--runtimetunnel);}
.trigger{margin:0 0 1.25rem;padding-left:1.25rem;list-style:disc;}
.trigger li{margin:0 0 0.4rem;line-height:var(--quickconsole);}
.trigger li::marker{color:var(--primary);}
.hostedpackage p.measured_card{margin-bottom:0.5rem;}
.hostedpackage .fine_hub .measured_card+p{margin-top:1.5rem;}
.radialscrim{background:var(--raw_snippet);border:var(--broad) var(--radar) var(--anchored_trace);border-radius:var(--runtimetunnel);box-shadow:var(--light_service);padding:var(--tertiary_series);}
.clustered .radialscrim{margin:0 0 1.75rem;}
.clustered .radialscrim .measured_card{margin:0.25rem 0;}
.macrocomponent .focal_carousel{text-align:center;max-width:68ch;margin-inline:auto;}
.groupedstack{border:none;border-top:var(--rankedplaceholder) var(--radar) var(--anchored_trace);width:4rem;margin:2rem auto;}
.mono_scaffold .wide{column-count:2;column-gap:clamp(2rem,4vw,2.5rem);margin:0 0 1.5rem;}
.auxiliary_holder .publicsprite{display:grid;grid-template-columns:minmax(14rem,1fr) 2.6fr;gap:clamp(2rem,5vw,4rem);align-items:start;}
.auxiliary_holder .snappedgraph{position:sticky;top:2rem;}
.auxiliary_holder .snappedgraph .steppedheader{font-size:calc((1rem + (clamp(1.75rem,3vw,2.5rem) - 1rem) * var(--lateralbackdrop)) * var(--mountedrange));}
.toppaper{background:var(--raw_snippet);border:var(--broad) var(--radar) var(--anchored_trace);border-radius:var(--runtimetunnel);box-shadow:var(--light_service);padding:var(--tertiary_series);}
.matchedaccordion .toppaper{margin:0 auto 2.5rem;max-width:78ch;}
.matchedaccordion .toppaper p{margin-bottom:0.75rem;}
.pureentry .loader .variablelibrary{border-top:var(--rankedplaceholder) var(--radar) var(--anchored_trace);padding-top:1.75rem;margin-top:1.75rem;}
.pureentry .loader .variablelibrary h2{margin-top:0;}
.responsive_listing .relationaltab{counter-reset:roster;}
.responsive_listing .relationaltab .secondary_mesh{counter-increment:roster;}
.responsive_listing .relationaltab .secondary_mesh h2::before{content:counter(roster,decimal-leading-zero) ". ";color:var(--primary);}
.clean_tunnel .tethered_snippet{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;border-bottom:var(--rankedplaceholder) var(--radar) var(--anchored_trace);padding-bottom:1.5rem;margin-bottom:2rem;}
.clean_tunnel .tethered_snippet .steppedheader{font-size:calc((1rem + (clamp(3rem,8vw,5rem) - 1rem) * var(--lateralbackdrop)) * var(--mountedrange));margin:0;}
.clean_tunnel .middle_chip{text-align:right;}
.internal_feed{background:var(--crosssymbol);border:var(--rankedplaceholder) var(--radar) var(--anchored_trace);border-radius:var(--radial_outline);padding:var(--tertiary_series);}
.calibrated_layer .central_wrapper .internal_feed{margin:0 0 1.25rem;}
.calibrated_layer .central_wrapper .internal_feed h2{margin-top:0;}
@media(max-width:768px){
.mono_scaffold .wide{column-count:1;}
.auxiliary_holder .publicsprite{grid-template-columns:1fr;gap:1.5rem;}
.auxiliary_holder .snappedgraph{position:static;}
.clean_tunnel .middle_chip{text-align:left;}
}.mastertopbar{position:relative;min-height:clamp(20rem,45vw,26rem);overflow:hidden;border-radius:0;}.joinednav img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;border-radius:0;}.joinednav figcaption{display:none;}.shallow_label{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);}.shallow_label h1,.shallow_label h2{font-size:calc((1rem + (clamp(2rem,5vw,3.5rem) - 1rem) * var(--lateralbackdrop)) * var(--mountedrange));margin:0 0 0.5rem;}.shallow_label p{margin:0;opacity:0.85;max-width:60ch;line-height:var(--quickconsole);}.logo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3rem);align-items:center;}.minormod .flatsearch{order:2;}.flatsearch img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--marked_listing);box-shadow:var(--light_service);}.tactilemask .fixed{margin:0;}.alert{display:flex;flex-direction:column;gap:clamp(1.75rem,3vw,2.5rem);}.federatedradar{display:flex;flex-direction:column;gap:clamp(1.75rem,3vw,2.5rem);}.online_title img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--marked_listing);display:block;box-shadow:var(--light_service);}.tonallever .fixed,.rolling .fixed{margin:0;}.queued_sequence{margin-bottom:2.5rem;}.strict_slot{position:relative;}.integral_tint img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--marked_listing);display:block;}.grained_sequence{position:absolute;left:clamp(1rem,3vw,1.5rem);bottom:-1.5rem;max-width:26rem;padding:var(--tertiary_series);border-radius:var(--runtimetunnel);background:var(--crosssymbol);border:var(--rankedplaceholder) var(--radar) var(--anchored_trace);box-shadow:var(--light_service);}.grained_sequence .fixed{margin:0;}@media (max-width:768px){.logo{grid-template-columns:1fr;}.minormod .flatsearch{order:0;}.online_title img{aspect-ratio:16/9;}.grained_sequence{position:static;margin-top:-2rem;margin-inline:1rem;max-width:none;}}.digital_cluster{display:flex;flex-direction:column;gap:0.5rem;}
.fluid{font-size:calc((1rem + (clamp(2rem,5vw,3.5rem) - 1rem) * var(--lateralbackdrop)) * var(--mountedrange));font-weight:800;color:var(--primary);line-height:1.05;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;}
/* The unit steps back to the page's ink; the figure keeps the accent. */
.swift_pipeline{color:var(--foreground);}
.shaded{opacity:0.7;font-size:0.9375rem;line-height:1.45;}
.masked .entry{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));}
.entry .digital_cluster{padding:0 1.75rem;border-inline-start:var(--rankedplaceholder) var(--radar) var(--anchored_trace);}
.entry .digital_cluster:first-child{border-inline-start:none;padding-inline-start:0;}
.paired_rail .asyncslate{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:var(--interactivecluster);padding:var(--tertiary_series);border-radius:var(--radial_outline);background:var(--crosssymbol);}
.gated_overlay .directinstance{text-align:center;display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:var(--interactivecluster);}
.phased_canvas .labeledsurface{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--interactivecluster);}
.single_slate{display:flex;flex-direction:column;gap:0.75rem;}
.single_slate .fluid{font-size:calc((1rem + (clamp(1.75rem,4vw,2.5rem) - 1rem) * var(--lateralbackdrop)) * var(--mountedrange));}
.inline_sparkline .sequential{display:flex;flex-direction:column;}
.sequential .digital_cluster{display:flex;flex-direction:row;align-items:baseline;justify-content:space-between;gap:1.5rem;padding:1.75rem 0;border-top:var(--rankedplaceholder) var(--radar) var(--anchored_trace);}
.sequential .digital_cluster:last-child{border-bottom:var(--rankedplaceholder) var(--radar) var(--anchored_trace);}
.sequential .fluid{font-size:calc((1rem + (clamp(2.5rem,7vw,4.5rem) - 1rem) * var(--lateralbackdrop)) * var(--mountedrange));}
.sequential .shaded{font-size:1.0625rem;opacity:0.8;}
.marquee .instant_lockup{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;}
.tight_offset{display:inline-flex;align-items:baseline;gap:0.5rem;padding:0.75rem 1.5rem;border-radius:var(--kinetic_tab);border:var(--rankedplaceholder) var(--radar) var(--anchored_trace);background:var(--raw_snippet);}
.validated{font-weight:800;color:var(--primary);font-size:1.25rem;font-variant-numeric:tabular-nums;}
.grained_vector{opacity:0.75;font-size:0.875rem;}
@media(max-width:768px){
.entry,.labeledsurface,.masked .entry,.phased_canvas .labeledsurface{grid-template-columns:1fr;}
.entry .digital_cluster{border-inline-start:none;padding:0;border-top:var(--rankedplaceholder) var(--radar) var(--anchored_trace);padding-top:1.25rem;}
.entry .digital_cluster:first-child{border-top:none;padding-top:0;}
.sequential .digital_cluster{flex-direction:column;align-items:flex-start;gap:0.5rem;}
}.joined_holder .textualcard{display:flex;flex-direction:column;gap:2.5rem;position:relative;margin-top:1rem;}
.joined_holder .textualcard::before{content:"";position:absolute;left:1.75rem;top:0.5rem;bottom:0.5rem;width:2px;background:var(--border);}
.joined_holder .cascadedscreen{display:flex;gap:1.75rem;position:relative;}
.joined_holder .turbocode{width:3.5rem;height:3.5rem;border-radius:50%;background:var(--crosssymbol);border:var(--rankedplaceholder) var(--radar) var(--anchored_trace);display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:800;color:var(--primary);flex-shrink:0;z-index:1;}
.granularblock h3{margin:0 0 0.5rem;font-size:1.375rem;}
.granularblock p{margin:0;opacity:0.75;line-height:var(--quickconsole);max-width:60ch;}
.system .opaqueshard{display:flex;flex-direction:column;}
.system .ultra_slider{display:flex;align-items:flex-start;gap:1.5rem;padding:1.75rem 0;border-top:var(--rankedplaceholder) var(--radar) var(--anchored_trace);}
.system .ultra_slider:last-child{border-bottom:var(--rankedplaceholder) var(--radar) var(--anchored_trace);}
/* An ordinal is read, not decorated, so it is dimmed by mixing towards the
   page's ink rather than by spending opacity. Transparency blends towards the
   ground, and on a dark palette the accent at 45% landed at 2.4:1 — below even
   the 3:1 a numeral this size is held to. Both ends of this mix clear 4.5:1
   against the page (palettes.test.ts) and a mix sits between them, so it
   clears it too, on a light palette and a dark one alike. */
.system .turbocode{font-size:1.5rem;font-weight:800;color:color-mix(in srgb,var(--primary) 70%,var(--foreground));line-height:1.2;flex-shrink:0;min-width:2.25rem;font-variant-numeric:tabular-nums;}
.bitwiseslider h3{margin:0 0 0.375rem;font-size:1.25rem;}
.bitwiseslider p{margin:0;opacity:0.75;line-height:var(--quickconsole);max-width:60ch;}
.silent_filter .symmetric{display:grid;gap:var(--interactivecluster);}
.stage{text-align:left;}
.silent_filter .turbocode{display:inline-block;padding:0.3rem 0.85rem;border-radius:var(--kinetic_tab);background:var(--subtlepanel);color:var(--background);font-size:0.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;margin-bottom:1.25rem;}
.silent_filter .stage h3{margin:0 0 0.75rem;font-size:1.375rem;}
.silent_filter .stage p{margin:0;opacity:0.75;line-height:var(--quickconsole);}
.augmentedtrace .encoded{display:flex;align-items:flex-start;gap:1.5rem;flex-wrap:wrap;}
.augmentedtrace .dockedslider{flex:1 1 200px;text-align:center;}
.augmentedtrace .turbocode{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;margin:0 auto 1.25rem;border-radius:50%;border:var(--rankedplaceholder) var(--radar) var(--privateboard);font-size:1.125rem;font-weight:800;}
.augmentedtrace .dockedslider h3{margin:0 0 0.75rem;font-size:1.25rem;}
.augmentedtrace .dockedslider p{margin:0;opacity:0.8;line-height:var(--quickconsole);}
.augmentedtrace .semipad{flex-shrink:0;display:flex;align-items:center;padding-top:1.5rem;opacity:0.5;}
.augmentedtrace .semipad .cybercolumn{width:1.5rem;height:1.5rem;}
.coarse_editor .resilienttray{display:flex;flex-direction:column;}
.coarse_editor .pagedscope{display:flex;gap:3rem;align-items:center;padding:2.5rem 0;border-top:var(--rankedplaceholder) var(--radar) var(--anchored_trace);}
.coarse_editor .pagedscope:last-child{border-bottom:var(--rankedplaceholder) var(--radar) var(--anchored_trace);}
.coarse_editor .turbocode{font-size:calc((1rem + (clamp(3rem,7vw,5.5rem) - 1rem) * var(--lateralbackdrop)) * var(--mountedrange));font-weight:900;line-height:1;color:color-mix(in srgb,var(--primary) 55%,var(--foreground));flex-shrink:0;width:1.6em;font-variant-numeric:tabular-nums;}
.genericcomponent h3{margin:0 0 0.75rem;font-size:1.75rem;}
.genericcomponent p{margin:0;opacity:0.75;font-size:1.125rem;line-height:var(--quickconsole);max-width:55ch;}
.action .federated{display:flex;flex-direction:column;gap:1rem;}
.timed_cursor{border:var(--rankedplaceholder) var(--radar) var(--anchored_trace);border-radius:var(--runtimetunnel);background:var(--raw_snippet);padding:0;}
.timed_cursor summary{display:flex;align-items:center;gap:1.25rem;padding:1.5rem;cursor:pointer;list-style:none;}
.timed_cursor summary::-webkit-details-marker{display:none;}
.timed_cursor summary h3{margin:0;font-size:1.125rem;}
.backend{margin-left:auto;flex-shrink:0;opacity:0.55;transition:transform var(--stateless_scrim) var(--coupledcode);}
.timed_cursor[open] .backend{transform:rotate(180deg);}
.timed_cursor .turbocode{width:2.25rem;height:2.25rem;border-radius:50%;background:var(--crosssymbol);border:var(--rankedplaceholder) var(--radar) var(--anchored_trace);display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:800;color:var(--primary);flex-shrink:0;}
.timed_cursor p{margin:0;padding:0 1.5rem 1.5rem 4.75rem;opacity:0.75;line-height:var(--quickconsole);max-width:65ch;}
@media(max-width:1024px){
.augmentedtrace .semipad{display:none;}
}
@media(max-width:768px){
.joined_holder .textualcard::before{display:none;}
.system .ultra_slider{flex-direction:column;gap:0.75rem;}
.augmentedtrace .encoded{flex-direction:column;}
.coarse_editor .pagedscope{flex-direction:column;gap:1rem;padding:1.75rem 0;align-items:flex-start;}
.timed_cursor p{padding-left:1.5rem;}
}.vertical_gauge .precise_endpoint{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--interactivecluster);}
.optical{display:flex;flex-direction:column;gap:1rem;padding:var(--tertiary_series);transition:transform var(--stateless_scrim) var(--coupledcode),box-shadow var(--stateless_scrim) var(--coupledcode),border-color var(--stateless_scrim) var(--coupledcode);}
.optical:hover{transform:var(--partialgutter);border-color:var(--privateboard);box-shadow:var(--privatecapsule);}
.optical .pinnedprovider{width:2.25rem;height:2.25rem;color:var(--primary);opacity:0.35;}
.concurrentrail{display:flex;gap:0.25rem;}
.literal{width:1rem;height:1rem;color:var(--primary);fill:var(--primary);}
.optical blockquote,.versatilecarousel blockquote{margin:0;font-size:1.0625rem;line-height:var(--quickconsole);}
.multi_buffer{display:flex;align-items:center;gap:0.875rem;margin-top:auto;}
.optical .multi_buffer,.eager .multi_buffer{padding-top:1rem;border-top:var(--rankedplaceholder) var(--radar) var(--anchored_trace);}
.multi_buffer h4{margin:0;font-size:1rem;}
.split_ruler{font-size:0.875rem;opacity:0.7;}
.simple .boxeddock{max-width:44rem;padding-top:2.5rem;border-top:var(--rankedplaceholder) var(--radar) var(--anchored_trace);margin-bottom:3rem;display:flex;flex-direction:column;gap:1.25rem;}
.linear_picture{margin:0;font-size:calc((1rem + (clamp(1.5rem,3.5vw,2.125rem) - 1rem) * var(--lateralbackdrop)) * var(--mountedrange));line-height:1.4;font-weight:600;letter-spacing:-0.01em;}
.stableworkspace{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--interactivecluster);}
.eager{padding:var(--tertiary_series);border:var(--rankedplaceholder) var(--radar) var(--anchored_trace);border-radius:var(--runtimetunnel);background:var(--raw_snippet);display:flex;flex-direction:column-reverse;gap:1rem;}
.eager blockquote{margin:0;font-size:0.9375rem;line-height:var(--quickconsole);opacity:0.85;}
.eager .multi_buffer{margin-top:0;}
.kinetic{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--interactivecluster);}
.versatilecarousel{display:flex;flex-direction:column;gap:1.25rem;}
.hybridpanel .cappedcell{display:flex;flex-direction:column;}
.transientindex{display:flex;flex-direction:column;gap:1rem;padding:2rem 0;border-top:var(--rankedplaceholder) var(--radar) var(--anchored_trace);}
.transientindex:last-child{border-bottom:var(--rankedplaceholder) var(--radar) var(--anchored_trace);}
.transientindex blockquote{margin:0;font-size:1.25rem;line-height:var(--quickconsole);max-width:56ch;text-wrap:pretty;}
.mid_wall .simpleunit{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:var(--interactivecluster);}
.narrowbreadcrumb{padding-top:1.25rem;border-top:var(--rankedplaceholder) var(--radar) var(--privateboard);display:flex;flex-direction:column;gap:1rem;}
.narrowbreadcrumb .multi_buffer{margin-top:0;}
.narrowbreadcrumb blockquote{margin:0;font-size:1rem;line-height:var(--quickconsole);opacity:0.85;}
.stripe .raw_column{max-width:52rem;margin-inline:auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.5rem;}
.raw_column .concurrentrail{justify-content:center;}
.raw_column blockquote{margin:0;font-size:calc((1rem + (clamp(1.5rem,4vw,2.5rem) - 1rem) * var(--lateralbackdrop)) * var(--mountedrange));line-height:1.35;font-weight:600;letter-spacing:-0.015em;text-wrap:balance;}
.raw_column .multi_buffer{flex-direction:column;text-align:center;margin-top:0;}
@media(min-width:768px){
.transientindex{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:2rem;}
.transientindex .multi_buffer{flex-direction:row-reverse;text-align:right;margin-top:0;flex-shrink:0;}
}
@media(max-width:768px){
.kinetic{grid-template-columns:1fr;}
}.rendered_hint,.strictspace,.dashboard,.mounted_layout,.graphed_label,.deployedbreadcrumb{--cover:color-mix(in srgb,var(--foreground) 9%,transparent);--robust_menu:24px;background-repeat:repeat;}
.rendered_hint{background-image:radial-gradient(circle at 1px 1px,var(--cover) 1px,transparent 0);background-size:var(--robust_menu) var(--robust_menu);}
.strictspace{--cover:color-mix(in srgb,var(--foreground) 5%,transparent);--robust_menu:26px;background-image:radial-gradient(ellipse 1px 3.5px at 50% 50%,var(--cover) 99%,transparent 100%),radial-gradient(ellipse 3.5px 1px at 50% 50%,var(--cover) 99%,transparent 100%);background-size:var(--robust_menu) var(--robust_menu);}
.dashboard{--cover:color-mix(in srgb,var(--foreground) 5%,transparent);--robust_menu:32px;background-image:repeating-linear-gradient(0deg,var(--cover) 0 1px,transparent 1px var(--robust_menu)),repeating-linear-gradient(90deg,var(--cover) 0 1px,transparent 1px var(--robust_menu));}
.mounted_layout{--cover:color-mix(in srgb,var(--foreground) 5%,transparent);--robust_menu:12px;background-image:repeating-linear-gradient(0deg,var(--cover) 0 1px,transparent 1px var(--robust_menu));}
.graphed_label{--cover:color-mix(in srgb,var(--foreground) 5%,transparent);--robust_menu:14px;background-image:repeating-linear-gradient(45deg,var(--cover) 0 1px,transparent 1px var(--robust_menu));}
.deployedbreadcrumb{--cover:color-mix(in srgb,var(--foreground) 5%,transparent);--robust_menu:18px;background-image:repeating-linear-gradient(45deg,var(--cover) 0 1px,transparent 1px var(--robust_menu)),repeating-linear-gradient(-45deg,var(--cover) 0 1px,transparent 1px var(--robust_menu));}.mirrored_cursor{background:var(--subtlepanel);color:var(--background);border-color:var(--privateboard);}
.mirrored_cursor .absolute_popup,.mirrored_cursor p{color:var(--background);}
.mirrored_cursor .tight{color:var(--background);opacity:0.7;}
.mirrored_cursor .headless_plate{background:var(--background);color:var(--foreground);}
.mirrored_cursor .transient{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. */
.mirrored_cursor .headless_plate:hover{background:color-mix(in srgb,var(--background) 86%,var(--foreground));color:var(--foreground);}
.mirrored_cursor .transient:hover{background:color-mix(in srgb,var(--background) 14%,transparent);color:var(--background);}
.mirrored_cursor .midslab,.mirrored_cursor .genericpivot,.mirrored_cursor .aside{background:var(--background);color:var(--foreground);border-color:transparent;}
/* The filled brand tile follows them. Left on the accent it barely separates
   from the inverse band — the accent is set against the page, and on this
   ground it measures 1.9-3.1:1 depending on the palette. The outlined and
   tinted tiles need nothing: they paint in currentColor, which the band has
   already flipped. */
.mirrored_cursor .integralworkspace,.mirrored_cursor .coded_pane,.mirrored_cursor .auto_loader{background:var(--background);color:var(--foreground);}
.mirrored_cursor .masterregion,.mirrored_cursor .flatshim{background:var(--background);color:var(--foreground);border-color:var(--background);}
.mirrored_cursor .clip_notice{color:var(--background);}
.mirrored_cursor .fluid,.mirrored_cursor .validated,.mirrored_cursor .swift_pipeline{color:var(--background);}
.mirrored_cursor .literal{color:var(--background);fill:var(--background);}
.mirrored_cursor summary::after,.mirrored_cursor summary::marker{color:var(--background);}
.mirrored_cursor .tunnel a:hover,.mirrored_cursor .tunnel a[aria-current="page"]{color:var(--background);}
.mirrored_cursor .technical_column{border-color:var(--background);}
.mirrored_cursor .host a:hover{color:var(--background);}
/* A field inside an inverted band stands on the band's ground, not on the
   page's. The theme's own control background is the page ground or a muted
   tint of it, and on a dark palette that is a dark slab — under the band's ink
   the typed value and the placeholder both disappeared. The ink is mixed in
   rather than layered as transparency, because a translucent placeholder over
   the wrong ground is exactly what failed here. */
.mirrored_cursor input,.mirrored_cursor textarea{background:color-mix(in srgb,var(--background) 8%,var(--subtlepanel));border-color:var(--privateboard);color:var(--background);}
.mirrored_cursor ::placeholder{color:color-mix(in srgb,var(--background) 55%,var(--subtlepanel));}
.mirrored_cursor .indexed_thumbnail{color:var(--background);}
.orbital .tunnel a::after{display:none;}
.orbital .tunnel a{font-size:0.9375rem;}
.orbital .tunnel a::before{font-size:0.9375rem;font-weight:800;}
.asyncpill{font-size:0.75rem;letter-spacing:0.1em;opacity:0.85;}
@media(min-width:901px){.orbital .tunnel a{padding-inline:clamp(1rem,2.2vw,1.75rem);}}
.technical_column{width:3.25rem;height:3.25rem;}
.technical_column .cybercolumn{width:1.5rem;height:1.5rem;}
.striped_backdrop .tunnel a{font-family:var(--linear_alert);text-transform:none;letter-spacing:0.02em;font-weight:600;}
.maskedcrate{text-transform:none;}
.striped_backdrop{border-bottom:1px var(--radar) var(--sandboxed);}
.radial_region .tunnel a::after{height:3px;bottom:-0.35rem;}
.rawrow .frame{text-transform:none;letter-spacing:-0.01em;}
.rawrow .tunnel a{text-transform:none;letter-spacing:0.02em;font-size:1rem;font-weight:600;}
.rawrow .tunnel a::after{height:3px;bottom:-0.35rem;}
.private .tunnel a{font-family:var(--linear_alert);text-transform:none;letter-spacing:0.02em;font-size:1rem;font-weight:600;}
@media(min-width:901px){.rawrow .procedural{gap:1rem;}
.shim .tunnel{padding:0.5rem 1rem;}
.shim .tunnel a{padding:0.6rem 1.25rem;}}
.cybermodal{border-width:2px;}
.cybermodal img{aspect-ratio:3/2;}
.ultrachrome{padding:1.75rem;}
.ultrachrome h3{font-family:var(--linear_alert);font-size:1.5rem;font-weight:800;}
.ultrachrome p{font-size:1.0625rem;opacity:1;}
.uniform .node{background:transparent;color:var(--semantic_shell);border-color:currentColor;}.outerpivot,details{transition:all var(--stateless_scrim) var(--coupledcode);}
input,textarea{transition:all var(--stateless_scrim) var(--coupledcode);}
.outerpivot:hover,details:hover{box-shadow:0 0 0 3px var(--privateboard);}
input:not([type="checkbox"]):not([type="radio"]):focus,textarea:focus,select:focus{box-shadow:inset 0 -4px 0 var(--foreground);}
.node:hover{background:transparent;box-shadow:inset 0 0 0 3px var(--semantic_shell);}
.headless_plate:focus-visible,.headless_plate:not(.transient,.inferred_radar):hover:focus-visible{box-shadow:var(--exact)!important;}