/* Cloud — the fourth visitor theme (Day · Night · Telemetry · Cloud): a soft, bright app-store look.
 *
 * Pale lavender-grey ground, floating white cards with big rounded corners and wide, soft shadows,
 * a floating rounded header, Apple system type with tight headlines and spaced-out uppercase
 * eyebrows, one clear blue for actions, and colourful icons drawn in their own colour, with no tile fill.
 *
 * Every page keeps its own DOM, words and scripts. Cloud is the Studio colour adapter
 * (data-theme="studio": studio-theme.css + studio-redesign.css) with data-final="cloud" on <html>
 * (studio-redesign.js sets it) and this file on top, like telemetry.css. The adapter recolours every
 * colour the pages declare into the --st-* tone slots, so section 1 is the whole palette; the rest is
 * a design layer that may change geometry. studio-icons.js tags the structure styled here
 * (data-st-band / -card / -tile / -pill / -ico / -surface). Subtrees marked data-st-own
 * (aircode.html, air-router.html) draw Cloud themselves.
 *
 * Every rule is scoped to html[data-final="cloud"] (tests/cloud-theme.test.js). */

/* ── 1. Palette (consumed by the Studio adapter; AA-checked in the test) ───────────────────────── */
html[data-theme="studio"][data-final="cloud"] {
  color-scheme: light;
  --st-paper: #f4f5f9;  --studio-rgb-paper: 244 245 249;    /* the ground */
  --st-soft: #ffffff;   --studio-rgb-soft: 255 255 255;     /* Dark's raised panels become white cards */
  --st-sky: #fafbfd;    --studio-rgb-sky: 250 251 253;
  --st-ink: #090a0d;    --studio-rgb-ink: 9 10 13;
  --st-text: #474a56;   --studio-rgb-text: 71 74 86;
  --st-mid: #555864;    --studio-rgb-mid: 85 88 100;
  --st-muted: #5f6270;  --studio-rgb-muted: 95 98 112;
  --st-line: #e4e6ec;   --studio-rgb-line: 228 230 236;
  --st-line2: #d3d6de;  --studio-rgb-line2: 211 214 222;
  --st-blue: #0060c4;   --studio-rgb-blue: 0 96 196;        /* link blue: AA on the ground and its wash */
  --st-blue2: #0a5fd0;  --studio-rgb-blue2: 10 95 208;      /* where Dark had violet: one action blue, so blue→violet fills read as one blue */
  --st-hover: #0058b0;  --studio-rgb-hover: 0 88 176;
  --st-focus: #0071e3;  --studio-rgb-focus: 0 113 227;
  --st-control: #8a8d99; --studio-rgb-control: 138 141 153;
  --st-green: #006b4f;  --studio-rgb-green: 0 107 79;
  --st-red: #c0102c;    --studio-rgb-red: 192 16 44;
  --st-amber: #954400;  --studio-rgb-amber: 149 68 0;
  --st-onAccent: #ffffff; --studio-rgb-onAccent: 255 255 255;
  --st-band: #fafbfd;
  /* The adapter points the pages' panel tokens at paper; here paper is the ground, so panels are white. */
  --surface: #ffffff; --surface-2: #ffffff; --panel: #ffffff; --glass: #ffffff; --surface-solid: #ffffff;
  --panel-2: #f7f8fb; --raised: #ffffff; --raised2: #f7f8fb; --surface-sunken: #f7f8fb;
  /* Designed-dark panels (terminals, contrast bands) stay dark: Apple's graphite. */
  --invert: #16171c; --invert-2: #1d1e24; --invert-ink: #ffffff; --invert-mid: #e4e6ec; --invert-mute: #b9bcc7; --invert-line: #3a3c46;
}

/* ── 2. Tokens of the layer itself ──────────────────────────────────────────────────────────── */
html[data-theme="studio"][data-final="cloud"] {
  --cl-page: #f4f5f9; --cl-surface: #ffffff; --cl-inset: #f7f8fb;
  --cl-line: rgb(24 27 38 / .08); --cl-line-2: rgb(24 27 38 / .13);
  --cl-blue: #0a84ff; --cl-btn: #0071e3; --cl-btn-hover: #0066d6;
  --cl-green: #00c896; --cl-orange: #ff8a14; --cl-red: #ff375f; --cl-violet: #9556ff; --cl-pink: #ef42a7;
  --cl-ink: #090a0d; --cl-mid: #555864; --cl-muted: #5f6270;
  --cl-shadow: 0 20px 55px rgb(70 72 105 / .07);
  --cl-shadow-hover: 0 27px 62px rgb(70 72 105 / .12);
  --cl-shadow-lg: 0 32px 70px rgb(56 62 82 / .13);
  --cl-shadow-btn: 0 16px 34px rgb(10 132 255 / .22);
  --cl-shadow-btn-hover: 0 21px 42px rgb(10 132 255 / .28);
  --cl-r: 24px; --cl-r-lg: 32px; --cl-r-md: 18px; --cl-r-btn: 16px; --cl-r-sm: 14px;
  --cl-ease: cubic-bezier(.2, .8, .2, 1);
  --cl-sans: ui-rounded, 'SF Pro Rounded', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --cl-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, 'JetBrains Mono', Consolas, monospace;
  /* final-type.css reads these: Cloud sets in the system face, like an Apple app page. */
  --ft-sans: var(--cl-sans); --ft-display: var(--cl-sans); --ft-mono: var(--cl-mono); --mono: var(--cl-mono);
  --st-screen: var(--cl-surface);
}

/* ── 3. Ground: one pale lavender-grey page; bands are a whisper of white, ruled by a hairline ─ */
html[data-theme="studio"][data-final="cloud"][data-studio-page] { background-color: var(--cl-page) !important; }
html[data-theme="studio"][data-final="cloud"][data-studio-page] body,
html[data-theme="studio"][data-final="cloud"][data-studio-page] main:not(#main-content),
html[data-theme="studio"][data-final="cloud"][data-studio-page] [data-st-band="paper"] {
  background-color: transparent !important; background-image: none !important;
}
html[data-theme="studio"][data-final="cloud"][data-studio-page] body { background-color: var(--cl-page) !important; }
html[data-theme="studio"][data-final="cloud"][data-studio-page] [data-st-band="tone"] {
  background-color: rgb(255 255 255 / .62) !important; background-image: none !important;
  border-top: 1px solid var(--cl-line) !important; border-bottom: 1px solid var(--cl-line) !important;
}

/* ── 4. Type: the system face; tight, confident headlines; two-tone gradient halves ──────────── */
html[data-theme="studio"][data-final="cloud"][data-studio-page] body {
  font-weight: 400; letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
html[data-theme="studio"][data-final="cloud"][data-studio-page] :is(h1, h2):not([data-st-own] *) { font-weight: 650; letter-spacing: -.04em; }
html[data-theme="studio"][data-final="cloud"][data-studio-page] :is(main, section) h1:not([data-st-own] *) { line-height: 1.04; }
html[data-theme="studio"][data-final="cloud"][data-studio-page] h3:not([data-st-own] *) { font-weight: 650; letter-spacing: -.028em; }
html[data-theme="studio"][data-final="cloud"][data-studio-page] :is(h4, h5):not([data-st-own] *) { font-weight: 650; letter-spacing: -.018em; }
html[data-theme="studio"][data-final="cloud"][data-studio-page] :is(.text-4xl, .text-5xl, .text-6xl, .text-7xl):not(:is(h1, h2, h3)):not([data-st-own] *) { font-weight: 650; letter-spacing: -.04em; }
/* Dark's gradient half of a headline: the soft second voice of an Apple headline, in grey. */
html[data-theme="studio"][data-final="cloud"][data-studio-page] :is(h1, h2, h3, h4) :is(.bg-clip-text, .gradient-text, .text-gradient, .grad, .grad-text, [class*="text-transparent"]):not([data-st-own] *),
html[data-theme="studio"][data-final="cloud"][data-studio-page] :is(h1, h2, h3, h4):is(.bg-clip-text, .gradient-text, .text-gradient, .grad, .grad-text, [class*="text-transparent"]):not([data-st-own] *) {
  background-image: none !important; -webkit-text-fill-color: currentColor !important; color: var(--cl-mid) !important;
}
/* Gradient numerals and words outside headlines keep a colour: the action blue. */
html[data-theme="studio"][data-final="cloud"][data-studio-page] :is(p, span, div, strong, b):is(.bg-clip-text, .gradient-text, .text-gradient, .grad, .grad-text, [class*="text-transparent"]):not(:is(h1, h2, h3, h4) *):not([data-st-own] *) {
  background-image: none !important; -webkit-text-fill-color: currentColor !important; color: var(--st-blue) !important;
}
/* Section eyebrows (the label right before a headline): spaced-out grey capitals, no box. */
html[data-theme="studio"][data-final="cloud"][data-studio-page] :is([data-st-pill], .badge):has(+ :is(h1, h2, .st-headline)) {
  background: none !important; box-shadow: none !important; border-color: transparent !important;
  padding-left: 0 !important; padding-right: 0 !important; gap: 8px !important;
  text-transform: uppercase; letter-spacing: .22em !important; font-size: 11.5px !important; font-weight: 700 !important;
  color: var(--cl-muted) !important;
}
/* (The repeated :is() outweighs the label-text rule in section 8, so an eyebrow's inner text is grey too.) */
html[data-theme="studio"][data-final="cloud"][data-studio-page] :is([data-st-pill], .badge):is([data-st-pill], .badge):has(+ :is(h1, h2, .st-headline)) * { color: var(--cl-muted) !important; -webkit-text-fill-color: currentColor !important; }
html[data-theme="studio"][data-final="cloud"][data-studio-page] :is([data-st-pill], .badge):has(+ :is(h1, h2, .st-headline)) > :is(span:empty, i, svg) { display: none !important; }

/* ── 5. Header: a floating white bar with rounded corners, lifted off the page ─────────────── */
html[data-theme="studio"][data-final="cloud"][data-studio-page] :is(nav#header, nav.site) {
  top: 14px !important; left: 16px !important; right: 16px !important; width: auto !important;
  max-width: 1320px; margin-inline: auto;
  background-color: rgb(255 255 255 / .9) !important; background-image: none !important;
  -webkit-backdrop-filter: saturate(1.4) blur(22px); backdrop-filter: saturate(1.4) blur(22px);
  border: 1px solid rgb(255 255 255 / .94) !important; border-radius: 22px;
  box-shadow: 0 18px 54px rgb(62 65 95 / .07), 0 1px 2px rgb(62 65 95 / .04) !important;
}
html[data-theme="studio"][data-final="cloud"][data-studio-page] nav#header.site-glass.scrolled { box-shadow: 0 18px 54px rgb(62 65 95 / .12), 0 1px 2px rgb(62 65 95 / .05) !important; }
html[data-theme="studio"][data-final="cloud"][data-studio-page] nav#header > div:first-child { height: 72px; }
html[data-theme="studio"][data-final="cloud"][data-studio-page] nav.site .bar { height: 72px; }
html[data-theme="studio"][data-final="cloud"][data-studio-page] :is(nav#header, nav.site) :is(a, button):not(.hdr-cta):not(.hdr-login):not(.cta):not([class^="bg-"]):not([class*=" bg-"]):not(.site-grad):not(.dn-opt) { color: #686b77 !important; }
html[data-theme="studio"][data-final="cloud"][data-studio-page] :is(nav#header, nav.site) :is(a, button):not(.hdr-cta):not(.hdr-login):not(.cta):not([class^="bg-"]):not([class*=" bg-"]):not(.site-grad):not(.dn-opt):hover { color: var(--cl-ink) !important; }
html[data-theme="studio"][data-final="cloud"][data-studio-page] :is(nav#header, nav.site) a[aria-current="page"]:not(.hdr-cta):not(.hdr-login) { color: var(--cl-ink) !important; }
html[data-theme="studio"][data-final="cloud"][data-studio-page] nav#header :is(a[data-nav], .site-dropdown-wrap > button)::after { background: var(--cl-blue) !important; }
html[data-theme="studio"][data-final="cloud"][data-studio-page] :is(nav#header .site-dropdown > div, nav#header .site-dropdown > .site-glass, nav.site .dd-menu, nav.site [role="menu"]) {
  background-color: rgb(255 255 255 / .96) !important; background-image: none !important;
  border: 1px solid rgb(255 255 255 / .96) !important; border-radius: var(--cl-r-md) !important;
  box-shadow: 0 24px 60px rgb(56 62 82 / .14), 0 2px 6px rgb(56 62 82 / .05) !important;
}
html[data-theme="studio"][data-final="cloud"][data-studio-page] nav#header .site-dropdown a { border-radius: 12px !important; }
html[data-theme="studio"][data-final="cloud"][data-studio-page] nav#header .site-dropdown a:hover { background-color: var(--cl-page) !important; color: var(--cl-ink) !important; }
html[data-theme="studio"][data-final="cloud"][data-studio-page] :is(nav#header #mobile-menu, #mmenu) {
  background-color: rgb(255 255 255 / .78) !important; border-top: 1px solid var(--cl-line) !important; box-shadow: none !important;
  border-radius: 0 0 22px 22px;
}
html[data-theme="studio"][data-final="cloud"][data-studio-page] :is(nav#header #mobile-menu, #mmenu) a:not(.site-grad):not(.hdr-cta):hover { color: var(--st-blue) !important; }
/* The floating bar is narrower than Dark's full-width one: below 1400px the links sit a little closer. */
@media (max-width: 1399px) {
  html[data-theme="studio"][data-final="cloud"][data-studio-page] nav#header > div > div[class*="xl:flex"][class*="gap-8"] { column-gap: 24px; }
}
@media (max-width: 720px) {
  html[data-theme="studio"][data-final="cloud"][data-studio-page] :is(nav#header, nav.site) { top: 10px !important; left: 12px !important; right: 12px !important; border-radius: 18px; }
  html[data-theme="studio"][data-final="cloud"][data-studio-page] nav#header > div:first-child,
  html[data-theme="studio"][data-final="cloud"][data-studio-page] nav.site .bar { height: 64px; }
  html[data-theme="studio"][data-final="cloud"][data-studio-page] :is(nav#header #mobile-menu, #mmenu) { border-radius: 0 0 18px 18px; }
}

/* ── 6. Buttons: one clear blue, softly rounded, lifted on its own coloured shadow ─────────── */
html[data-theme="studio"][data-final="cloud"][data-studio-page] :is(a, button, input[type="submit"]):is(.bg-btn-gradient, .bg-button-glow, .bg-accent-gradient, .site-grad, .hdr-cta,
  .bg-primary, .bg-primaryHover, .bg-accent, .bg-accent-main, .bg-accent-hover, .bg-accent-blue, .bg-accent-cyan, .bg-accent-purple,
  .bg-brand-cyan, .bg-brand-blue, .bg-brand-violet, .bg-electric-blue, .bg-electric-cyan, .bg-electric-purple,
  .bg-blue-500, .bg-blue-600, .bg-cyan-500, .bg-purple-500, .bg-green-500, .bg-green-400, .bg-white, .btn-primary, .cta, [class*="bg-gradient-to-"], [data-st-act]):not(.bg-clip-text):not([class*="text-transparent"]),
html[data-theme="studio"][data-final="cloud"][data-studio-page] .hub-note .btn {
  background-color: var(--cl-btn) !important; background-image: none !important;
  border-color: var(--cl-btn) !important; color: #ffffff !important;
  border-radius: var(--cl-r-btn) !important; box-shadow: var(--cl-shadow-btn) !important;
  font-weight: 650 !important; letter-spacing: -.01em !important;
  transition: translate .25s var(--cl-ease), box-shadow .25s var(--cl-ease), background-color .25s ease !important;
}
html[data-theme="studio"][data-final="cloud"][data-studio-page] :is(a, button, input[type="submit"]):is(.bg-btn-gradient, .bg-button-glow, .bg-accent-gradient, .site-grad, .hdr-cta,
  .bg-primary, .bg-primaryHover, .bg-accent, .bg-accent-main, .bg-accent-hover, .bg-accent-blue, .bg-accent-cyan, .bg-accent-purple,
  .bg-brand-cyan, .bg-brand-blue, .bg-brand-violet, .bg-electric-blue, .bg-electric-cyan, .bg-electric-purple,
  .bg-blue-500, .bg-blue-600, .bg-cyan-500, .bg-purple-500, .bg-green-500, .bg-green-400, .bg-white, .btn-primary, .cta, [class*="bg-gradient-to-"], [data-st-act]):not(.bg-clip-text):not([class*="text-transparent"]) *,
html[data-theme="studio"][data-final="cloud"][data-studio-page] .hub-note .btn * { color: #ffffff !important; -webkit-text-fill-color: currentColor !important; }
html[data-theme="studio"][data-final="cloud"][data-studio-page] :is(a, button):is(.bg-btn-gradient, .bg-button-glow, .bg-accent-gradient, .site-grad, .hdr-cta, .bg-primary, .bg-primaryHover,
  .bg-accent-main, .bg-accent-blue, .bg-electric-blue, .bg-green-500, .bg-green-400, .bg-white, .btn-primary, .cta, [class*="bg-gradient-to-"], [data-st-act]):not(.bg-clip-text):not([class*="text-transparent"]):hover {
  background-color: var(--cl-btn-hover) !important; border-color: var(--cl-btn-hover) !important;
  translate: 0 -3px; box-shadow: var(--cl-shadow-btn-hover) !important; filter: none !important;
}
/* Pages paint some actions by id (pricing's #ip5ax…), and the adapter's copy of those rules carries the
   id's weight. :is([data-st-act], #st-act) lends the tagged action the same weight; no element has the id. */
html[data-theme="studio"][data-final="cloud"][data-studio-page] [data-st-act]:is([data-st-act], #st-act) {
  background-color: var(--cl-btn) !important; background-image: none !important; border-color: var(--cl-btn) !important; color: #ffffff !important;
}
html[data-theme="studio"][data-final="cloud"][data-studio-page] [data-st-act]:is([data-st-act], #st-act) * { color: #ffffff !important; -webkit-text-fill-color: currentColor !important; }
html[data-theme="studio"][data-final="cloud"][data-studio-page] [data-st-act]:is([data-st-act], #st-act):hover { background-color: var(--cl-btn-hover) !important; border-color: var(--cl-btn-hover) !important; }
html[data-theme="studio"][data-final="cloud"][data-studio-page] nav#header .hdr-cta { border-radius: 14px !important; box-shadow: 0 10px 24px rgb(10 132 255 / .22) !important; }
/* Secondary actions: a white key with a hairline, lifted like a card. */
html[data-theme="studio"][data-final="cloud"][data-studio-page] :is(a, button):is(.glass-panel, .glass-card, .btn-ghost),
html[data-theme="studio"][data-final="cloud"][data-studio-page] :is(a, button)[class*="border"]:is([class~="bg-white/3"], [class~="bg-white/5"], [class~="bg-white/10"], [class~="bg-white/20"], [class~="bg-white/[0.02]"]),
html[data-theme="studio"][data-final="cloud"][data-studio-page] :is(a, button).bg-surface[class*="border"] {
  background-color: var(--cl-surface) !important; background-image: none !important;
  border-color: var(--cl-line) !important; color: var(--cl-ink) !important; border-radius: var(--cl-r-btn) !important;
  box-shadow: 0 10px 30px rgb(70 72 105 / .08) !important; -webkit-backdrop-filter: none; backdrop-filter: none;
  font-weight: 650 !important; letter-spacing: -.01em !important;
  transition: translate .25s var(--cl-ease), box-shadow .25s var(--cl-ease), color .2s ease !important;
}
html[data-theme="studio"][data-final="cloud"][data-studio-page] :is(a, button):is(.glass-panel, .glass-card, .btn-ghost) *,
html[data-theme="studio"][data-final="cloud"][data-studio-page] :is(a, button)[class*="border"]:is([class~="bg-white/3"], [class~="bg-white/5"], [class~="bg-white/10"], [class~="bg-white/20"], [class~="bg-white/[0.02]"]) * { color: inherit !important; }
html[data-theme="studio"][data-final="cloud"][data-studio-page] :is(a, button):is(.glass-panel, .glass-card, .btn-ghost):hover,
html[data-theme="studio"][data-final="cloud"][data-studio-page] :is(a, button)[class*="border"]:is([class~="bg-white/3"], [class~="bg-white/5"], [class~="bg-white/10"], [class~="bg-white/20"], [class~="bg-white/[0.02]"]):hover,
html[data-theme="studio"][data-final="cloud"][data-studio-page] :is(a, button).bg-surface[class*="border"]:hover {
  translate: 0 -3px; box-shadow: 0 18px 40px rgb(70 72 105 / .13) !important; color: var(--cl-ink) !important; border-color: var(--cl-line) !important;
}
/* Selected tabs and toggles: the action blue. */
html[data-theme="studio"][data-final="cloud"][data-studio-page] :is(a, button):is(.pricing-toggle-active, .os-tab.active, .pill-on),
html[data-theme="studio"][data-final="cloud"][data-studio-page] .tabstrip a.on {
  background-color: var(--cl-btn) !important; background-image: none !important; border-color: var(--cl-btn) !important; color: #ffffff !important;
  border-radius: 12px !important; box-shadow: 0 8px 20px rgb(10 132 255 / .22) !important;
}
html[data-theme="studio"][data-final="cloud"][data-studio-page] :is(a, button):is(.pricing-toggle-active, .os-tab.active, .pill-on) *,
html[data-theme="studio"][data-final="cloud"][data-studio-page] .tabstrip a.on * { color: #ffffff !important; }
html[data-theme="studio"][data-final="cloud"][data-studio-page] :is(a, button).os-tab:not(.active) { background-color: var(--cl-surface) !important; border-color: var(--cl-line) !important; color: var(--cl-mid) !important; border-radius: 12px !important; }
/* Solid accent badges ("Most Popular"): a blue capsule. */
html[data-theme="studio"][data-final="cloud"][data-studio-page] :is(.bg-btn-gradient, .bg-accent-blue, .bg-cyan):not(.bg-clip-text):not(a):not(button) {
  background-color: var(--cl-btn) !important; background-image: none !important; color: #ffffff !important; border-color: transparent !important;
  box-shadow: 0 8px 20px rgb(10 132 255 / .22) !important;
}
html[data-theme="studio"][data-final="cloud"][data-studio-page] :is(.bg-btn-gradient, .bg-accent-blue, .bg-cyan):not(.bg-clip-text):not(a):not(button) * { color: #ffffff !important; }

/* ── 7. Surfaces: floating white cards, wide soft shadows, big rounded corners ─────────────── */
html[data-theme="studio"][data-final="cloud"][data-studio-page] [data-st-card][data-st-card][data-st-card],
html[data-theme="studio"][data-final="cloud"][data-studio-page] :is(div, article, li, section, aside, details):is(.glass-panel, .glass-card, .glass, .gcard, .hcard, .mc, .plan, .contact-card, .card-glass, .tblwrap):not(.rounded-full):not([data-st-own] *) {
  background-color: rgb(255 255 255 / .96) !important; background-image: none !important;
  border-color: rgb(24 27 38 / .045) !important; border-radius: var(--cl-r) !important;
  box-shadow: var(--cl-shadow) !important;
  -webkit-backdrop-filter: none; backdrop-filter: none; --gg: transparent !important;
  transition: translate .28s var(--cl-ease), box-shadow .28s var(--cl-ease) !important;
}
/* A card with a colour (from its icon) carries a faint halo of it in the top corner. */
html[data-theme="studio"][data-final="cloud"][data-studio-page] [data-st-card][data-st-card][data-st-card]:not([data-st-card="slate"]) {
  background-image: radial-gradient(260px 220px at calc(100% + 30px) -50px, rgb(var(--cl-c) / .11), rgb(var(--cl-c) / 0) 70%) !important;
}
html[data-theme="studio"][data-final="cloud"][data-studio-page] [data-st-card][data-st-card][data-st-card]:hover,
html[data-theme="studio"][data-final="cloud"][data-studio-page] :is(div, article, li, section, aside, details):is(.glass-panel, .glass-card, .gcard, .hcard, .mc, .plan, .contact-card, .card-glass):not(.rounded-full):not([data-st-own] *):hover {
  translate: 0 -5px; box-shadow: var(--cl-shadow-hover) !important;
}
/* Full-width boxed panels (call-to-action strips, wide notes): the same white card, edge to edge. */
html[data-theme="studio"][data-final="cloud"][data-studio-page] [data-st-panel][data-st-panel] {
  background-color: rgb(255 255 255 / .96) !important; background-image: none !important;
  border-color: rgb(24 27 38 / .045) !important; border-radius: var(--cl-r) !important;
  box-shadow: var(--cl-shadow) !important; -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-theme="studio"][data-final="cloud"][data-studio-page] [data-st-card][data-st-card][data-st-card-border] { border-color: var(--cl-btn) !important; box-shadow: 0 0 0 1px var(--cl-btn), var(--cl-shadow) !important; }
/* Product screens (architecture maps, dashboards, chat mockups): one big frosted card, like an app
   screen floating over the page. */
html[data-theme="studio"][data-final="cloud"][data-studio-page] [data-st-surface="screen"] {
  background-color: rgb(255 255 255 / .94) !important; background-image: none !important;
  border-color: rgb(255 255 255 / .96) !important; border-radius: var(--cl-r-lg) !important;
  box-shadow: var(--cl-shadow-lg) !important;
}
/* Boxes inside a card or screen are soft inset wells, flat and borderless, like the app's panels. */
html[data-theme="studio"][data-final="cloud"][data-studio-page] :is([data-st-card], [data-st-surface="screen"]) :is(div, li, article)[class*="rounded"][class*="bg-white/"]:not([data-st-tile]):not([data-st-pill]):not(.rounded-full) {
  background-color: var(--cl-inset) !important; border-color: transparent !important;
}
/* Dark's hairlines on everything else follow the page's line colour. */
html[data-theme="studio"][data-final="cloud"][data-studio-page] :is(main, section, footer) [class*="border-white"]:not([data-st-own] *) { border-color: var(--cl-line) !important; }

/* ── 8. Icons, tiles and labels: colourful glyphs, no tile fill ────────────────────────────── */
/* The family colours: --cl-a (light end) → --cl-b (base) of a tile glyph's gradient, --cl-c the base as
   rgb channels (halos, tints, shadows), --cl-g the glyph colour when an icon stands on its own. */
html[data-theme="studio"][data-final="cloud"] :is([data-st-ico], [data-st-tile], [data-st-pill], [data-st-card]) { --cl-a: #2ba0ff; --cl-b: #3973ed; --cl-c: 10 132 255; --cl-g: #0a6fe0; }
html[data-theme="studio"][data-final="cloud"] :is([data-st-ico="sky"], [data-st-tile="sky"], [data-st-pill="sky"], [data-st-card="sky"]) { --cl-a: #5ac8fa; --cl-b: #0a84ff; --cl-c: 10 132 255; --cl-g: #0a74e0; }
html[data-theme="studio"][data-final="cloud"] :is([data-st-ico="teal"], [data-st-tile="teal"], [data-st-pill="teal"], [data-st-card="teal"]) { --cl-a: #4fdccb; --cl-b: #00a7a0; --cl-c: 0 167 160; --cl-g: #008c86; }
html[data-theme="studio"][data-final="cloud"] :is([data-st-ico="green"], [data-st-tile="green"], [data-st-pill="green"], [data-st-card="green"]) { --cl-a: #34dfa8; --cl-b: #00b386; --cl-c: 0 200 150; --cl-g: #00936e; }
html[data-theme="studio"][data-final="cloud"] :is([data-st-ico="amber"], [data-st-tile="amber"], [data-st-pill="amber"], [data-st-card="amber"]) { --cl-a: #ffc93d; --cl-b: #ff9f0a; --cl-c: 255 159 10; --cl-g: #d97a00; }
html[data-theme="studio"][data-final="cloud"] :is([data-st-ico="orange"], [data-st-tile="orange"], [data-st-pill="orange"], [data-st-card="orange"]) { --cl-a: #ffb126; --cl-b: #ff8a14; --cl-c: 255 138 20; --cl-g: #e06a00; }
html[data-theme="studio"][data-final="cloud"] :is([data-st-ico="red"], [data-st-tile="red"], [data-st-pill="red"], [data-st-card="red"]) { --cl-a: #ff6a66; --cl-b: #ff375f; --cl-c: 255 55 95; --cl-g: #e5244c; }
html[data-theme="studio"][data-final="cloud"] :is([data-st-ico="pink"], [data-st-tile="pink"], [data-st-pill="pink"], [data-st-card="pink"]) { --cl-a: #ff72bd; --cl-b: #ef42a7; --cl-c: 239 66 167; --cl-g: #d42a8e; }
html[data-theme="studio"][data-final="cloud"] :is([data-st-ico="purple"], [data-st-tile="purple"], [data-st-pill="purple"], [data-st-card="purple"]) { --cl-a: #b38bff; --cl-b: #8a4dff; --cl-c: 149 86 255; --cl-g: #7a3cf0; }
html[data-theme="studio"][data-final="cloud"] :is([data-st-ico="ai"], [data-st-tile="ai"], [data-st-pill="ai"], [data-st-card="ai"]) { --cl-a: #9556ff; --cl-b: #ef42a7; --cl-c: 180 62 196; --cl-g: #9b3ad6; }
html[data-theme="studio"][data-final="cloud"] :is([data-st-ico="indigo"], [data-st-tile="indigo"], [data-st-pill="indigo"], [data-st-card="indigo"]) { --cl-a: #7d86ff; --cl-b: #5856d6; --cl-c: 88 86 214; --cl-g: #4f4dd0; }
html[data-theme="studio"][data-final="cloud"] :is([data-st-ico="slate"], [data-st-tile="slate"], [data-st-pill="slate"], [data-st-card="slate"]) { --cl-a: #a2a7b5; --cl-b: #6e7383; --cl-c: 110 115 131; --cl-g: #5f6270; }
html[data-theme="studio"][data-final="cloud"][data-studio-page] i[data-st-ico]::before {
  background-image: none !important; -webkit-text-fill-color: currentColor !important; color: var(--cl-g) !important;
}
html[data-theme="studio"][data-final="cloud"][data-studio-page] i[data-st-ico] { color: var(--cl-g) !important; }
html[data-theme="studio"][data-final="cloud"][data-studio-page] svg[data-st-ico] :is(path, circle, rect, polygon) { fill: var(--cl-g) !important; }
/* Tiles: no fill. The glyph itself carries the tile's colour — a gradient from the family's light
   end to its base — and grows to fill the tile's space; the tile keeps its size, so layouts hold.
   Brand glyphs (GitHub, Apple, Google…) keep the brand's own shade. */
html[data-theme="studio"][data-final="cloud"][data-studio-page] [data-st-tile][data-st-tile][data-st-tile][data-st-tile] {
  background-color: transparent !important; background-image: none !important;
  border-color: transparent !important; box-shadow: none !important;
}
html[data-theme="studio"][data-final="cloud"][data-studio-page] [data-st-tile] :is(svg[data-st-ico], i[data-st-ico]) { filter: none !important; }
html[data-theme="studio"][data-final="cloud"][data-studio-page] [data-st-tile] [data-st-ico]:not([data-st-ico] [data-st-ico]) { scale: 1.4; }
html[data-theme="studio"][data-final="cloud"][data-studio-page] [data-st-tile] i[data-st-ico]::before {
  background-image: linear-gradient(140deg, var(--cl-a), var(--cl-b)) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: var(--cl-b) !important;
}
html[data-theme="studio"][data-final="cloud"][data-studio-page] [data-st-tile] i[data-st-ico] { color: var(--cl-b) !important; }
html[data-theme="studio"][data-final="cloud"][data-studio-page] [data-st-tile] svg[data-st-ico] :is(path, circle, rect, polygon) { fill: var(--st-ig, var(--cl-b)) !important; }
/* SVG glyphs paint from the shared gradient defs (studio-icons.js): in Cloud they run light → base. */
html[data-theme="studio"][data-final="cloud"] #st-ico-defs .dm { stop-color: var(--cl-a); }
html[data-theme="studio"][data-final="cloud"] #st-ico-defs .dv { stop-color: var(--cl-b); }
html[data-theme="studio"][data-final="cloud"][data-studio-page] [data-st-tile]:is([data-st-tile="github"], [data-st-tile="apple"], [data-st-tile="twitter"], [data-st-tile="linkedin"], [data-st-tile="discord"], [data-st-tile="windows"], [data-st-tile="microsoft"], [data-st-tile="google"], [data-st-tile="slack"], [data-st-tile="aws"], [data-st-tile="facebook"], [data-st-tile="npm"], [data-st-tile="confluence"]) i[data-st-ico]::before { background-image: none !important; -webkit-text-fill-color: currentColor !important; color: var(--st-iv) !important; }
html[data-theme="studio"][data-final="cloud"][data-studio-page] [data-st-tile]:is([data-st-tile="github"], [data-st-tile="apple"], [data-st-tile="twitter"], [data-st-tile="linkedin"], [data-st-tile="discord"], [data-st-tile="windows"], [data-st-tile="microsoft"], [data-st-tile="google"], [data-st-tile="slack"], [data-st-tile="aws"], [data-st-tile="facebook"], [data-st-tile="npm"], [data-st-tile="confluence"]) i[data-st-ico] { color: var(--st-iv) !important; }
html[data-theme="studio"][data-final="cloud"][data-studio-page] [data-st-tile]:is([data-st-tile="github"], [data-st-tile="apple"], [data-st-tile="twitter"], [data-st-tile="linkedin"], [data-st-tile="discord"], [data-st-tile="windows"], [data-st-tile="microsoft"], [data-st-tile="google"], [data-st-tile="slack"], [data-st-tile="aws"], [data-st-tile="facebook"], [data-st-tile="npm"], [data-st-tile="confluence"]) svg[data-st-ico] :is(path, circle, rect, polygon) { fill: var(--st-iv) !important; }
/* Brand glyphs standing on their own keep the brand's deep shade. */
html[data-theme="studio"][data-final="cloud"][data-studio-page] :is(i, svg)[data-st-ico]:is([data-st-ico="github"], [data-st-ico="apple"], [data-st-ico="twitter"], [data-st-ico="linkedin"], [data-st-ico="discord"], [data-st-ico="windows"], [data-st-ico="microsoft"], [data-st-ico="google"], [data-st-ico="slack"], [data-st-ico="aws"], [data-st-ico="facebook"], [data-st-ico="npm"], [data-st-ico="confluence"]):not([data-st-tile] *) { --cl-g: var(--st-iv); }
/* Labels: a soft tinted capsule with deep (AA) text, no outline. */
html[data-theme="studio"][data-final="cloud"][data-studio-page] [data-st-pill] {
  background-color: #ffffff !important; background-image: linear-gradient(rgb(var(--cl-c) / .12), rgb(var(--cl-c) / .12)) !important;
  border-color: transparent !important; color: var(--st-iv) !important; box-shadow: none !important; font-weight: 650;
}
html[data-theme="studio"][data-final="cloud"][data-studio-page] [data-st-pill] :not([data-st-ico], [data-st-ico] *) { color: var(--st-iv) !important; -webkit-text-fill-color: currentColor; }
html[data-theme="studio"][data-final="cloud"][data-studio-page] [data-st-pill] > :is(span, div):empty { background-color: var(--cl-b) !important; background-image: none !important; box-shadow: none !important; }

/* ── 9. Code, forms, tables ─────────────────────────────────────────────────────────────────── */
html[data-theme="studio"][data-final="cloud"][data-studio-page] :is(pre, .code-block):not([data-st-own] *) { border-radius: var(--cl-r-md) !important; }
html[data-theme="studio"][data-final="cloud"][data-studio-page] :not(pre) > code:not([data-st-own] *) { background-color: var(--cl-inset) !important; border-color: var(--cl-line) !important; border-radius: 8px; }
html[data-theme="studio"][data-final="cloud"][data-studio-page] :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([data-st-own] *) {
  background-color: #ffffff !important; color: var(--cl-ink) !important; border-color: rgb(24 27 38 / .14) !important; border-radius: var(--cl-r-sm) !important;
}
html[data-theme="studio"][data-final="cloud"][data-studio-page] :is(input, select, textarea):not([data-st-own] *):focus { border-color: var(--cl-btn) !important; box-shadow: 0 0 0 4px rgb(10 132 255 / .16) !important; }
html[data-theme="studio"][data-final="cloud"][data-studio-page] :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--cl-btn); }
html[data-theme="studio"][data-final="cloud"][data-studio-page] :is(td, th):not([data-st-own] *) { border-color: var(--cl-line) !important; }
html[data-theme="studio"][data-final="cloud"] :is(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid rgb(10 132 255 / .5); outline-offset: 4px; }

/* ── 10. Footer: a clean white base with a hairline ─────────────────────────────────────────── */
html[data-theme="studio"][data-final="cloud"][data-studio-page] footer {
  background-color: #ffffff !important; background-image: none !important; border-top: 1px solid var(--cl-line) !important;
}
html[data-theme="studio"][data-final="cloud"][data-studio-page] footer :is(h3, h4) {
  font-size: 11.5px !important; letter-spacing: .2em !important; text-transform: uppercase; color: var(--cl-muted) !important; font-weight: 700 !important;
}
html[data-theme="studio"][data-final="cloud"][data-studio-page] footer a:not([aria-label]) { color: var(--cl-mid) !important; }
html[data-theme="studio"][data-final="cloud"][data-studio-page] footer a:not([aria-label]):hover { color: var(--cl-ink) !important; }
html[data-theme="studio"][data-final="cloud"][data-studio-page] footer [class*="border-t"] { border-color: var(--cl-line) !important; }

/* ── 11. Shared widgets ─────────────────────────────────────────────────────────────────────── */
html[data-theme="studio"][data-final="cloud"] .alina-root[data-ctx="public"] {
  --a-surface: #ffffff; --a-raised: var(--cl-page); --a-raised2: var(--cl-inset);
  --a-line: rgb(24 27 38 / .08); --a-line2: rgb(24 27 38 / .14); --a-codebg: #16171c;
  --a-shadow: 0 32px 70px rgb(56 62 82 / .18), 0 4px 14px rgb(56 62 82 / .08);
}
html:where([data-theme="studio"][data-final="cloud"]) ::-webkit-scrollbar-track { background-color: var(--cl-page); }
html:where([data-theme="studio"][data-final="cloud"]) ::-webkit-scrollbar-thumb { background-color: #d3d6de; }
html:where([data-theme="studio"][data-final="cloud"]) ::-webkit-scrollbar-thumb:hover { background-color: #a9adb9; }
html[data-theme="studio"][data-final="cloud"] ::selection { background-color: rgb(10 132 255 / .2); color: inherit; }

@media (prefers-reduced-motion: reduce) {
  html[data-theme="studio"][data-final="cloud"][data-studio-page] :is([data-st-card], a, button):hover { translate: none !important; }
}