/* Premium themes — Editorial, Aurora Glass, Midnight and Editorial Glass.
 *
 * Each is the Studio colour adapter (data-theme="studio": studio-theme.css + studio-redesign.css)
 * with data-premium="<variant>" on <html>, and this file on top. Studio only recolours; this layer
 * is a real design system — type, header, buttons, surfaces, icons, rhythm and page compositions —
 * so it may change geometry. It never changes copy: every page keeps its own DOM, words and scripts.
 * studio-icons.js tags the structure this file styles (data-st-band / -card / -tile / -pill / -ico).
 *
 *   editorial        warm porcelain, deep-violet serif italics, ink buttons, a faint aurora
 *   glass            bright white, a sky/mint/lavender mesh, floating glass nav, violet gradients
 *   midnight         deep ink, violet/sky/mint aurora light, gradient-hairline surfaces
 *   editorial-glass  Aurora Glass surfaces with Editorial's serif italics and ink buttons
 *
 * Every rule is scoped to html[data-premium] (tests/premium-theme.test.js). */

/* ── 1. Palettes (consumed by the Studio adapter; AA-checked in the test) ─────────────────────── */
html[data-theme="studio"][data-premium="editorial"] {
  --st-paper: #f8f6f1; --studio-rgb-paper: 248 246 241;
  --st-soft: #f2efe8; --studio-rgb-soft: 242 239 232;
  --st-sky: #fbfaf7; --studio-rgb-sky: 251 250 247;
  --st-ink: #17121f; --studio-rgb-ink: 23 18 31;
  --st-text: #29233a; --studio-rgb-text: 41 35 58;
  --st-mid: #3a3347; --studio-rgb-mid: 58 51 71;
  --st-muted: #57506a; --studio-rgb-muted: 87 80 106;
  --st-line: #e4ded3; --studio-rgb-line: 228 222 211;
  --st-line2: #cfc8ba; --studio-rgb-line2: 207 200 186;
  --st-blue: #4b2bc8; --studio-rgb-blue: 75 43 200;
  --st-blue2: #5b36d9; --studio-rgb-blue2: 91 54 217;
  --st-hover: #3b20a8; --studio-rgb-hover: 59 32 168;
  --st-focus: #4b2bc8; --studio-rgb-focus: 75 43 200;
  --st-control: #8c8498; --studio-rgb-control: 140 132 152;
  --st-green: #0f6b47; --studio-rgb-green: 15 107 71;
  --st-red: #a3261b; --studio-rgb-red: 163 38 27;
  --st-amber: #8a4b0c; --studio-rgb-amber: 138 75 12;
  --st-onAccent: #ffffff; --studio-rgb-onAccent: 255 255 255;
}
html[data-theme="studio"][data-premium="glass"] {
  --st-paper: #fcfcfe; --studio-rgb-paper: 252 252 254;
  --st-soft: #f6f5fb; --studio-rgb-soft: 246 245 251;
  --st-sky: #faf9fe; --studio-rgb-sky: 250 249 254;
  --st-ink: #0f0c1d; --studio-rgb-ink: 15 12 29;
  --st-text: #262139; --studio-rgb-text: 38 33 57;
  --st-mid: #36314c; --studio-rgb-mid: 54 49 76;
  --st-muted: #55506e; --studio-rgb-muted: 85 80 110;
  --st-line: #ebe9f2; --studio-rgb-line: 235 233 242;
  --st-line2: #d8d4e4; --studio-rgb-line2: 216 212 228;
  --st-blue: #5236e6; --studio-rgb-blue: 82 54 230;
  --st-blue2: #4f33e3; --studio-rgb-blue2: 79 51 227;
  --st-hover: #4228cc; --studio-rgb-hover: 66 40 204;
  --st-focus: #4f33e3; --studio-rgb-focus: 79 51 227;
  --st-control: #8a85a2; --studio-rgb-control: 138 133 162;
  --st-green: #0f6b47; --studio-rgb-green: 15 107 71;
  --st-red: #a3261b; --studio-rgb-red: 163 38 27;
  --st-amber: #8a4b0c; --studio-rgb-amber: 138 75 12;
  --st-onAccent: #ffffff; --studio-rgb-onAccent: 255 255 255;
}
html[data-theme="studio"][data-premium="midnight"] {
  --st-paper: #07060c; --studio-rgb-paper: 7 6 12;
  --st-soft: #0d0b15; --studio-rgb-soft: 13 11 21;
  --st-sky: #12101b; --studio-rgb-sky: 18 16 27;
  --st-ink: #f4f2fa; --studio-rgb-ink: 244 242 250;
  --st-text: #dcd8e8; --studio-rgb-text: 220 216 232;
  --st-mid: #bcb6ce; --studio-rgb-mid: 188 182 206;
  --st-muted: #a29cb6; --studio-rgb-muted: 162 156 182;
  --st-line: #1e1b29; --studio-rgb-line: 30 27 41;
  --st-line2: #2d2a3b; --studio-rgb-line2: 45 42 59;
  --st-blue: #b49cff; --studio-rgb-blue: 180 156 255;
  --st-blue2: #9dc8ff; --studio-rgb-blue2: 157 200 255;
  --st-hover: #cdbdff; --studio-rgb-hover: 205 189 255;
  --st-focus: #b49cff; --studio-rgb-focus: 180 156 255;
  --st-control: #7a7492; --studio-rgb-control: 122 116 146;
  --st-green: #6ee7b7; --studio-rgb-green: 110 231 183;
  --st-red: #fca5a5; --studio-rgb-red: 252 165 165;
  --st-amber: #fcd34d; --studio-rgb-amber: 252 211 77;
  --st-onAccent: #0b0912; --studio-rgb-onAccent: 11 9 18;
}
html[data-theme="studio"][data-premium="editorial-glass"] {
  --st-paper: #fcfcfe; --studio-rgb-paper: 252 252 254;
  --st-soft: #f6f5fb; --studio-rgb-soft: 246 245 251;
  --st-sky: #faf9fe; --studio-rgb-sky: 250 249 254;
  --st-ink: #14101f; --studio-rgb-ink: 20 16 31;
  --st-text: #28223a; --studio-rgb-text: 40 34 58;
  --st-mid: #38324b; --studio-rgb-mid: 56 50 75;
  --st-muted: #56506c; --studio-rgb-muted: 86 80 108;
  --st-line: #ebe9f2; --studio-rgb-line: 235 233 242;
  --st-line2: #d8d4e4; --studio-rgb-line2: 216 212 228;
  --st-blue: #4b2bc8; --studio-rgb-blue: 75 43 200;
  --st-blue2: #5b36d9; --studio-rgb-blue2: 91 54 217;
  --st-hover: #3b20a8; --studio-rgb-hover: 59 32 168;
  --st-focus: #4b2bc8; --studio-rgb-focus: 75 43 200;
  --st-control: #8a85a2; --studio-rgb-control: 138 133 162;
  --st-green: #0f6b47; --studio-rgb-green: 15 107 71;
  --st-red: #a3261b; --studio-rgb-red: 163 38 27;
  --st-amber: #8a4b0c; --studio-rgb-amber: 138 75 12;
  --st-onAccent: #ffffff; --studio-rgb-onAccent: 255 255 255;
}

/* ── 2. Design tokens of the layer itself ─────────────────────────────────────────────────── */
html[data-theme="studio"][data-premium] {
  --pm-sans: 'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pm-serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --pm-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --pm-radius: 20px;
  --st-band: var(--pm-band);
  --st-screen: var(--pm-card-bg);
}
html[data-theme="studio"][data-premium="editorial"] {
  color-scheme: light;
  --pm-bg: #f8f6f1;
  --pm-wash:
    radial-gradient(820px 560px at 6% 40px, rgb(207 230 251 / .85), rgb(207 230 251 / 0) 70%),
    radial-gradient(900px 600px at 96% 20px, rgb(227 218 253 / .95), rgb(227 218 253 / 0) 70%),
    radial-gradient(1000px 560px at 46% 720px, rgb(205 239 221 / .55), rgb(205 239 221 / 0) 70%);
  --pm-band: #f2efe8;
  --pm-card-bg: #ffffff;
  --pm-card-line: rgb(23 18 31 / .09);
  --pm-card-shadow: 0 0 0 1px rgb(23 18 31 / .08), 0 1px 2px rgb(23 18 31 / .04), 0 24px 48px -32px rgb(43 24 110 / .28);
  --pm-card-shadow-hover: 0 0 0 1px rgb(75 43 200 / .22), 0 2px 4px rgb(23 18 31 / .05), 0 30px 60px -32px rgb(43 24 110 / .38);
  --pm-btn-bg: #17121f; --pm-btn-bg-hover: #2a2236; --pm-btn-fg: #ffffff;
  --pm-btn-shadow: inset 0 1px 0 rgb(255 255 255 / .14), 0 1px 2px rgb(23 18 31 / .2), 0 10px 24px -12px rgb(23 18 31 / .55);
  --pm-btn2-bg: rgb(255 255 255 / .6); --pm-btn2-fg: #17121f; --pm-btn2-line: rgb(23 18 31 / .16);
  --pm-nav-bg: rgb(248 246 241 / .8); --pm-nav-line: rgb(23 18 31 / .09);
  --pm-tile-bg: #f4f1ff; --pm-tile-line: rgb(75 43 200 / .14); --pm-icon: #4b2bc8;
  --pm-pill-bg: rgb(255 255 255 / .7); --pm-pill-line: rgb(23 18 31 / .12); --pm-pill-fg: #3a3347;
  --pm-footer-bg: #f2efe8;
  --pm-accent: #4b2bc8;
  --pm-grain: .35;
}
html[data-theme="studio"][data-premium="glass"],
html[data-theme="studio"][data-premium="editorial-glass"] {
  color-scheme: light;
  --pm-bg: #fcfcfe;
  --pm-wash:
    radial-gradient(880px 600px at 4% 30px, rgb(190 227 255 / .95), rgb(190 227 255 / 0) 70%),
    radial-gradient(940px 640px at 98% 10px, rgb(220 210 255 / 1), rgb(220 210 255 / 0) 70%),
    radial-gradient(860px 500px at 42% 480px, rgb(198 241 219 / .8), rgb(198 241 219 / 0) 70%),
    radial-gradient(560px 360px at 80% 640px, rgb(255 226 236 / .5), rgb(255 226 236 / 0) 70%);
  --pm-band: #f7f6fc;
  --pm-card-bg: rgb(255 255 255 / .78);
  --pm-card-line: rgb(15 12 29 / .08);
  --pm-card-shadow: inset 0 1px 0 #ffffff, 0 0 0 1px rgb(15 12 29 / .07), 0 24px 50px -36px rgb(40 24 120 / .42);
  --pm-card-shadow-hover: inset 0 1px 0 #ffffff, 0 0 0 1px rgb(82 54 230 / .22), 0 30px 60px -34px rgb(40 24 120 / .5);
  --pm-btn-bg: linear-gradient(180deg, #6e55f7, #4f33e3); --pm-btn-bg-hover: linear-gradient(180deg, #7a63f8, #4228cc); --pm-btn-fg: #ffffff;
  --pm-btn-shadow: inset 0 1px 0 rgb(255 255 255 / .28), inset 0 -1px 0 rgb(0 0 0 / .18), 0 0 0 1px rgb(60 30 200 / .5), 0 10px 26px -10px rgb(79 51 227 / .8);
  --pm-btn2-bg: rgb(255 255 255 / .82); --pm-btn2-fg: #0f0c1d; --pm-btn2-line: rgb(15 12 29 / .12);
  --pm-nav-bg: rgb(255 255 255 / .64); --pm-nav-line: rgb(15 12 29 / .08);
  --pm-tile-bg: linear-gradient(180deg, #ffffff, #f3f0ff); --pm-tile-line: rgb(82 54 230 / .16); --pm-icon: #5236e6;
  --pm-pill-bg: rgb(255 255 255 / .75); --pm-pill-line: rgb(15 12 29 / .1); --pm-pill-fg: #36314c;
  --pm-footer-bg: #f7f6fc;
  --pm-accent: #5236e6;
  --pm-grain: 0;
}
html[data-theme="studio"][data-premium="editorial-glass"] {
  --pm-btn-bg: #14101f; --pm-btn-bg-hover: #2a2236; --pm-btn-fg: #ffffff;
  --pm-btn-shadow: inset 0 1px 0 rgb(255 255 255 / .14), 0 1px 2px rgb(20 16 31 / .2), 0 10px 24px -12px rgb(20 16 31 / .55);
  --pm-icon: #4b2bc8; --pm-accent: #4b2bc8;
}
html[data-theme="studio"][data-premium="midnight"] {
  color-scheme: dark;
  --pm-bg: #07060c;
  --pm-wash:
    radial-gradient(900px 520px at 50% -280px, rgb(91 63 240 / .55), rgb(91 63 240 / 0) 72%),
    radial-gradient(560px 440px at -6% 160px, rgb(44 123 229 / .28), rgb(44 123 229 / 0) 72%),
    radial-gradient(560px 420px at 106% 240px, rgb(31 169 122 / .2), rgb(31 169 122 / 0) 72%);
  --pm-band: #0b0a12;
  --pm-card-bg: linear-gradient(180deg, #120f1e, #0b0912);
  --pm-card-line: rgb(255 255 255 / .1);
  --pm-card-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 0 0 1px rgb(255 255 255 / .08), 0 30px 60px -40px rgb(0 0 0 / .8);
  --pm-card-shadow-hover: inset 0 1px 0 rgb(255 255 255 / .08), 0 0 0 1px rgb(180 156 255 / .35), 0 30px 70px -36px rgb(91 63 240 / .55);
  --pm-btn-bg: #f4f2fa; --pm-btn-bg-hover: #ffffff; --pm-btn-fg: #0b0912;
  --pm-btn-shadow: inset 0 -1px 0 rgb(0 0 0 / .15), 0 0 0 1px rgb(255 255 255 / .2), 0 0 30px -6px rgb(180 156 255 / .55);
  --pm-btn2-bg: rgb(255 255 255 / .04); --pm-btn2-fg: #f4f2fa; --pm-btn2-line: rgb(255 255 255 / .16);
  --pm-nav-bg: rgb(7 6 12 / .62); --pm-nav-line: rgb(255 255 255 / .07);
  --pm-tile-bg: rgb(255 255 255 / .04); --pm-tile-line: rgb(255 255 255 / .12); --pm-icon: #c4b2ff;
  --pm-pill-bg: rgb(255 255 255 / .04); --pm-pill-line: rgb(255 255 255 / .14); --pm-pill-fg: #dcd8e8;
  --pm-footer-bg: #050409;
  --pm-accent: #b49cff;
  --pm-grain: .5;
}

/* ── 3. Page base, light and grain ────────────────────────────────────────────────────────── */
html[data-theme="studio"][data-premium][data-studio-page] {
  background-color: var(--pm-bg) !important;
  background-image: var(--pm-wash) !important;
}
html[data-theme="studio"][data-premium][data-studio-page] body,
html[data-theme="studio"][data-premium][data-studio-page] main:not(#main-content) {
  background-color: transparent !important;
  background-image: none !important;
}
html[data-theme="studio"][data-premium][data-studio-page] [data-st-band="paper"] {
  background-color: transparent !important;
  background-image: none !important;
}
html[data-theme="studio"][data-premium][data-studio-page] [data-st-band="tone"] {
  background-color: var(--pm-band) !important;
  background-image: none !important;
  border-color: var(--pm-card-line) !important;
}
html[data-theme="studio"][data-premium][data-studio-page]::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 2147483000; opacity: var(--pm-grain);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ── 4. Typography ────────────────────────────────────────────────────────────────────────── */
/* Low-specificity on purpose (:where), so headline accents and code can override it. */
html[data-theme="studio"][data-premium][data-studio-page] :where(body, body :not([class*="fa-"]):not(svg):not(svg *)) {
  font-family: var(--pm-sans) !important;
}
html[data-theme="studio"][data-premium][data-studio-page] :where(code, pre, kbd, samp, .font-mono, .font-mono *, pre *, code *) {
  font-family: var(--pm-mono) !important;
}
html[data-theme="studio"][data-premium][data-studio-page] body {
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -.006em;
}
html[data-theme="studio"][data-premium][data-studio-page] :is(main, section) h1 {
  font-size: clamp(2.5rem, 1.45rem + 3.1vw, 4.5rem) !important;
  line-height: .98 !important; letter-spacing: -.045em !important; font-weight: 600 !important;
}
html[data-theme="studio"][data-premium][data-studio-page] :is(main, section) h2 {
  font-size: clamp(2.1rem, 1.35rem + 2.3vw, 3.75rem) !important;
  line-height: 1.02 !important; letter-spacing: -.04em !important; font-weight: 600 !important;
}
html[data-theme="studio"][data-premium][data-studio-page] :is(main, section) :is(h3, h4) {
  letter-spacing: -.022em !important; font-weight: 600 !important;
}
html[data-theme="studio"][data-premium][data-studio-page] :is(main, section) :is(h1, h2) + p,
html[data-theme="studio"][data-premium][data-studio-page] :is(main, section) .lede {
  line-height: 1.62 !important; letter-spacing: -.008em;
}
/* Headline accents (Dark's gradient spans). Editorial and Editorial Glass set them in serif italics. */
html[data-theme="studio"]:is([data-premium="editorial"], [data-premium="editorial-glass"])[data-studio-page] :is(h1, h2) :is(.bg-clip-text, .gradient-text, .grad, [class*="text-transparent"]) {
  font-family: var(--pm-serif) !important; font-style: italic !important; font-weight: 400 !important;
  letter-spacing: -.015em !important; font-size: 1.08em !important; line-height: 1;
  background-image: none !important; -webkit-text-fill-color: currentColor !important; color: var(--pm-accent) !important;
}
html[data-theme="studio"][data-premium="glass"][data-studio-page] :is(h1, h2) :is(.bg-clip-text, .gradient-text, .grad, [class*="text-transparent"]) {
  background-image: linear-gradient(92deg, #3b22c9 0%, #6a47f2 45%, #8c5cf6 75%, #3f7be8 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: #4f33e3 !important; padding-bottom: .06em;
}
html[data-theme="studio"][data-premium="midnight"][data-studio-page] :is(h1, h2) :is(.bg-clip-text, .gradient-text, .grad, [class*="text-transparent"]) {
  font-family: var(--pm-serif) !important; font-style: italic !important; font-weight: 400 !important; letter-spacing: -.015em !important; font-size: 1.08em !important;
  background-image: linear-gradient(90deg, #9dc8ff 0%, #b49cff 48%, #8af0c6 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: #b49cff !important; padding-bottom: .08em;
}
html[data-theme="studio"][data-premium="midnight"][data-studio-page] :is(main, section) :is(h1, h2) {
  background-image: linear-gradient(180deg, #ffffff 35%, #c3bcda 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
html[data-theme="studio"][data-premium="midnight"][data-studio-page] :is(main, section) :is(h1, h2) :not(.bg-clip-text, .gradient-text, .grad, [class*="text-transparent"]) {
  -webkit-text-fill-color: inherit;
}

/* ── 5. Header ────────────────────────────────────────────────────────────────────────────── */
html[data-theme="studio"][data-premium][data-studio-page] :is(nav#header, nav.site) {
  background-color: var(--pm-nav-bg) !important; background-image: none !important;
  -webkit-backdrop-filter: saturate(1.5) blur(16px); backdrop-filter: saturate(1.5) blur(16px);
  border-bottom: 1px solid var(--pm-nav-line) !important; box-shadow: none !important;
}
html[data-theme="studio"][data-premium][data-studio-page] :is(nav#header, nav.site) :is(a, button):not(.hdr-cta):not(.cta):not([class^="bg-"]):not([class*=" bg-"]):not(.site-grad):not(.theme-toggle):not(.dn-opt):not([role="menuitemradio"]) {
  color: var(--st-mid) !important;
}
html[data-theme="studio"][data-premium][data-studio-page] :is(nav#header, nav.site) :is(a, button):not(.hdr-cta):not(.cta):not([class^="bg-"]):not([class*=" bg-"]):not(.site-grad):not(.theme-toggle):not(.dn-opt):not([role="menuitemradio"]):hover {
  color: var(--st-ink) !important;
}
/* Glass themes float the bar as a glass pill. */
html[data-theme="studio"]:is([data-premium="glass"], [data-premium="editorial-glass"])[data-studio-page] nav#header {
  background-color: transparent !important; border-bottom: 0 !important; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 14px 16px 0;
}
html[data-theme="studio"]:is([data-premium="glass"], [data-premium="editorial-glass"])[data-studio-page] nav#header > div:first-child {
  max-width: 1200px; height: 64px; border-radius: 18px;
  background-color: var(--pm-nav-bg);
  -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .7), 0 0 0 1px var(--pm-nav-line), 0 12px 32px -18px rgb(30 20 80 / .35);
}
html[data-theme="studio"]:is([data-premium="glass"], [data-premium="editorial-glass"])[data-studio-page] nav#header #mobile-menu {
  margin: 8px auto 0; max-width: 1200px; border-radius: 16px; border: 0 !important;
  background-color: rgb(255 255 255 / .9) !important; box-shadow: 0 0 0 1px var(--pm-nav-line), 0 20px 40px -24px rgb(30 20 80 / .4);
}
html[data-theme="studio"][data-premium][data-studio-page] .site-dropdown > div {
  background-color: var(--st-paper) !important; border-color: var(--pm-card-line) !important; border-radius: 14px !important;
  box-shadow: 0 0 0 1px var(--pm-card-line), 0 24px 48px -24px rgb(20 14 50 / .35) !important;
}
html[data-theme="studio"][data-premium="midnight"][data-studio-page] .site-dropdown > div { background-color: #100e19 !important; }

/* Logo: the Final Dark wordmark — with dark "Air" lettering on the light themes (that file is
   airllm_logo_light.svg), the original on Midnight. */
html[data-theme="studio"][data-premium]:not([data-premium="midnight"]) img[src$="airllm_logo_dark.svg"],
html[data-theme="studio"][data-premium]:not([data-premium="midnight"]) img[src$="airllm_logo_light.svg"] { content: url('images/airllm_logo_light.svg'); }
html[data-theme="studio"][data-premium="midnight"] img[src$="airllm_logo_dark.svg"],
html[data-theme="studio"][data-premium="midnight"] img[src$="airllm_logo_light.svg"] { content: url('images/airllm_logo_dark.svg'); }

/* ── 6. Buttons ───────────────────────────────────────────────────────────────────────────── */
html[data-theme="studio"][data-premium][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-white, .btn-primary, .cta, [class*="bg-gradient-to-"]):not(.bg-clip-text),
html[data-theme="studio"][data-premium][data-studio-page] .hub-note .btn {
  background: var(--pm-btn-bg) !important;
  border-color: transparent !important; color: var(--pm-btn-fg) !important;
  box-shadow: var(--pm-btn-shadow) !important;
  font-weight: 500 !important; letter-spacing: -.01em !important;
}
html[data-theme="studio"][data-premium][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-white, .btn-primary, .cta, [class*="bg-gradient-to-"]):not(.bg-clip-text) *,
html[data-theme="studio"][data-premium][data-studio-page] .hub-note .btn * { color: var(--pm-btn-fg) !important; }
html[data-theme="studio"][data-premium][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-white, .btn-primary, .cta, [class*="bg-gradient-to-"]):not(.bg-clip-text):hover {
  background: var(--pm-btn-bg-hover) !important; transform: translateY(-1px);
}
html[data-theme="studio"][data-premium][data-studio-page] :is(a, button):is(.glass-panel, .glass-card, .btn-ghost),
html[data-theme="studio"][data-premium][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-premium][data-studio-page] :is(a, button).bg-surface[class*="border"] {
  background: var(--pm-btn2-bg) !important; color: var(--pm-btn2-fg) !important; border-color: transparent !important;
  box-shadow: inset 0 0 0 1px var(--pm-btn2-line), 0 6px 16px -12px rgb(20 14 50 / .35) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-weight: 500 !important;
}
html[data-theme="studio"][data-premium][data-studio-page] :is(a, button):is(.glass-panel, .glass-card, .btn-ghost) * { color: var(--pm-btn2-fg) !important; }
html[data-theme="studio"][data-premium][data-studio-page] :is(a, button):is(.glass-panel, .glass-card, .btn-ghost):hover {
  color: var(--pm-btn2-fg) !important; box-shadow: inset 0 0 0 1px var(--st-control), 0 8px 20px -12px rgb(20 14 50 / .4) !important;
}
html[data-theme="studio"][data-premium][data-studio-page] :is(a, button).hdr-cta { padding: 10px 18px !important; font-size: 14px !important; }

/* ── 7. Surfaces ──────────────────────────────────────────────────────────────────────────── */
html[data-theme="studio"][data-premium][data-studio-page] [data-st-card][data-st-card][data-st-card],
html[data-theme="studio"][data-premium][data-studio-page] :is(div, article, li, section, aside):is(.glass-panel, .glass-card, .gcard, .hcard, .mc, .plan, .contact-card, .card-glass, .doc, .toc):not(.rounded-full) {
  background: var(--pm-card-bg) !important;
  border-color: transparent !important;
  box-shadow: var(--pm-card-shadow) !important;
}
html[data-theme="studio"]:is([data-premium="glass"], [data-premium="editorial-glass"])[data-studio-page] [data-st-card][data-st-card][data-st-card],
html[data-theme="studio"]:is([data-premium="glass"], [data-premium="editorial-glass"])[data-studio-page] :is(div, article, li, section, aside):is(.glass-panel, .glass-card, .gcard, .hcard, .mc, .plan, .contact-card, .card-glass):not(.rounded-full) {
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
}
html[data-theme="studio"][data-premium][data-studio-page] [data-st-card][data-st-card][data-st-card]:hover,
html[data-theme="studio"][data-premium][data-studio-page] :is(div, article, li, section, aside):is(.glass-panel, .glass-card, .gcard, .hcard, .mc, .plan, .contact-card, .card-glass):not(.rounded-full):hover {
  box-shadow: var(--pm-card-shadow-hover) !important;
}
html[data-theme="studio"][data-premium][data-studio-page] [data-st-card][data-st-card-border] { box-shadow: 0 0 0 1.5px var(--pm-accent), var(--pm-card-shadow) !important; }
html[data-theme="studio"][data-premium][data-studio-page] [data-st-surface="screen"] {
  background: var(--pm-band) !important; border-color: transparent !important;
  box-shadow: inset 0 0 0 1px var(--pm-card-line), 0 40px 80px -48px rgb(30 20 80 / .4) !important;
}
html[data-theme="studio"][data-premium="midnight"][data-studio-page] [data-st-surface="screen"] {
  background: linear-gradient(180deg, #0f0d18, #0a0910) !important; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08), 0 40px 80px -48px rgb(91 63 240 / .45) !important;
}
/* Dark's hairline borders on everything else follow the theme's line colour. */
html[data-theme="studio"][data-premium][data-studio-page] :is(main, section, footer) [class*="border-white"] { border-color: var(--pm-card-line) !important; }

/* ── 8. Icons, tiles and labels — one quiet accent instead of a rainbow ───────────────────── */
html[data-theme="studio"][data-premium][data-studio-page] [data-st-ico],
html[data-theme="studio"][data-premium][data-studio-page] [data-st-tile],
html[data-theme="studio"][data-premium][data-studio-page] [data-st-pill]:not([data-st-pill="green"]):not([data-st-pill="red"]):not([data-st-pill="orange"]) {
  --st-ia: var(--pm-icon); --st-im: var(--pm-icon); --st-ib: var(--pm-icon); --st-iv: var(--pm-icon);
}
html[data-theme="studio"][data-premium][data-studio-page] i[data-st-ico]::before {
  background-image: none !important; -webkit-text-fill-color: currentColor !important; color: var(--pm-icon) !important;
}
html[data-theme="studio"][data-premium][data-studio-page] i[data-st-ico] { color: var(--pm-icon) !important; }
html[data-theme="studio"][data-premium][data-studio-page] svg[data-st-ico] :is(path, circle, rect, polygon) { fill: var(--pm-icon) !important; }
html[data-theme="studio"][data-premium][data-studio-page] [data-st-tile][data-st-tile][data-st-tile][data-st-tile] {
  background: var(--pm-tile-bg) !important; border-color: transparent !important;
  box-shadow: inset 0 0 0 1px var(--pm-tile-line), 0 8px 18px -12px rgb(40 24 120 / .35) !important;
}
html[data-theme="studio"][data-premium][data-studio-page] [data-st-tile] :is(svg[data-st-ico], i[data-st-ico]) { filter: none !important; }
html[data-theme="studio"][data-premium][data-studio-page] [data-st-pill] {
  background: var(--pm-pill-bg) !important; border-color: transparent !important;
  box-shadow: inset 0 0 0 1px var(--pm-pill-line) !important; color: var(--pm-pill-fg) !important;
}
html[data-theme="studio"][data-premium][data-studio-page] [data-st-pill] :not([data-st-ico], [data-st-ico] *) { color: var(--pm-pill-fg) !important; }
html[data-theme="studio"][data-premium][data-studio-page] [data-st-pill]:is([data-st-pill="green"], [data-st-pill="red"], [data-st-pill="orange"]) :not([data-st-ico], [data-st-ico] *) { color: var(--st-iv) !important; }
/* Section eyebrows: the label right before a headline. Editorial sets them as a ruled small-caps line. */
html[data-theme="studio"]:is([data-premium="editorial"], [data-premium="editorial-glass"])[data-studio-page] :is([data-st-pill], .badge):has(+ :is(h1, h2, .st-headline)) {
  background: none !important; box-shadow: none !important; padding-left: 0 !important; gap: 12px !important;
  text-transform: uppercase; letter-spacing: .16em; font-size: 11.5px !important; font-weight: 500 !important;
}
html[data-theme="studio"]:is([data-premium="editorial"], [data-premium="editorial-glass"])[data-studio-page] :is([data-st-pill], .badge):has(+ :is(h1, h2, .st-headline)),
html[data-theme="studio"]:is([data-premium="editorial"], [data-premium="editorial-glass"])[data-studio-page] :is([data-st-pill], .badge):has(+ :is(h1, h2, .st-headline)) * { color: var(--pm-accent) !important; }
html[data-theme="studio"]:is([data-premium="editorial"], [data-premium="editorial-glass"])[data-studio-page] :is([data-st-pill], .badge):has(+ :is(h1, h2, .st-headline))::before {
  content: ""; width: 28px; height: 1px; background: currentColor; display: inline-block; flex: none;
}
html[data-theme="studio"]:is([data-premium="editorial"], [data-premium="editorial-glass"])[data-studio-page] :is([data-st-pill], .badge):has(+ :is(h1, h2, .st-headline)) > :is(span:empty, i, svg) { display: none !important; }

/* ── 9. Footer ────────────────────────────────────────────────────────────────────────────── */
html[data-theme="studio"][data-premium][data-studio-page] footer {
  background-color: var(--pm-footer-bg) !important; background-image: none !important;
  border-top: 1px solid var(--pm-card-line) !important;
}
html[data-theme="studio"][data-premium][data-studio-page] footer h4 { font-size: 12px !important; letter-spacing: .14em; text-transform: uppercase; color: var(--st-muted) !important; font-weight: 500 !important; }
html[data-theme="studio"][data-premium][data-studio-page] footer a:not([aria-label]) { color: var(--st-mid) !important; }
html[data-theme="studio"][data-premium][data-studio-page] footer a:not([aria-label]):hover { color: var(--st-ink) !important; }

/* ── 10. Midnight: Studio's light-paper assumptions turned dark ───────────────────────────── */
/* Pages paint their designed-dark panels with --invert (Studio points it at ink, which is light here). */
html[data-theme="studio"][data-premium="midnight"] {
  --invert: #14111f; --invert-2: #1a1626; --invert-ink: #f4f2fa; --invert-mid: #b4aec6; --invert-mute: #8f89a6; --invert-line: #2d2a3b;
}
/* Status colours (red problems, green success, orange warnings) take their light shades on dark. */
html[data-theme="studio"][data-premium="midnight"] :is([data-st-ico="green"], [data-st-pill="green"], [data-st-tile="green"], [data-st-card="green"]) { --st-ia:#a7f3d0; --st-im:#6ee7b7; --st-ib:#34d399; --st-iv:#6ee7b7; --st-ic:110 231 183; --st-icm:52 211 153; --st-icb:16 185 129; }
html[data-theme="studio"][data-premium="midnight"] :is([data-st-ico="red"], [data-st-pill="red"], [data-st-tile="red"], [data-st-card="red"]) { --st-ia:#fecaca; --st-im:#fca5a5; --st-ib:#f87171; --st-iv:#fca5a5; --st-ic:252 165 165; --st-icm:248 113 113; --st-icb:239 68 68; }
html[data-theme="studio"][data-premium="midnight"] :is([data-st-ico="orange"], [data-st-pill="orange"], [data-st-tile="orange"], [data-st-card="orange"]) { --st-ia:#fed7aa; --st-im:#fdba74; --st-ib:#fb923c; --st-iv:#fdba74; --st-ic:253 186 116; --st-icm:251 146 60; --st-icb:234 88 12; }
html[data-theme="studio"][data-premium="midnight"][data-studio-page] [data-st-pill]:is([data-st-pill="green"], [data-st-pill="red"], [data-st-pill="orange"]) {
  background: rgb(var(--st-ic) / .1) !important; box-shadow: inset 0 0 0 1px rgb(var(--st-ic) / .3) !important;
}
html[data-theme="studio"][data-premium="midnight"][data-studio-page] :is(input, select, textarea) { background-color: rgb(255 255 255 / .04) !important; color: var(--st-ink) !important; }
html[data-theme="studio"][data-premium="midnight"][data-studio-page] :is(pre, code) { background-color: #0d0b16 !important; }

/* ── 11. Homepage ─────────────────────────────────────────────────────────────────────────── */
html[data-theme="studio"][data-premium][data-studio-page="index"] #hero h1 { font-size: clamp(2.75rem, 1.5rem + 3.9vw, 5.4rem) !important; }
/* The neural backdrop recedes behind the light themes' aurora; Midnight keeps a faint network. */
html[data-theme="studio"][data-premium]:not([data-premium="midnight"])[data-studio-page="index"] {
  --nb-edge: rgb(var(--studio-rgb-blue) / .06); --nb-edge-hi: rgb(var(--studio-rgb-blue) / .11);
  --nb-route: rgb(var(--studio-rgb-blue) / .4); --nb-glow: rgb(var(--studio-rgb-blue) / .05); --nb-node-op: .3;
}
html[data-theme="studio"][data-premium="midnight"][data-studio-page="index"] {
  --nb-edge: rgb(180 156 255 / .07); --nb-edge-hi: rgb(180 156 255 / .14);
  --nb-route: rgb(157 200 255 / .55); --nb-glow: rgb(142 114 255 / .1); --nb-node-op: .4;
}
/* Metrics: Editorial sets the figures in the serif; Glass lifts each one onto a glass card. */
html[data-theme="studio"][data-premium][data-studio-page="index"] #metrics p.text-xs { letter-spacing: .14em !important; font-weight: 500 !important; color: var(--st-muted) !important; }
html[data-theme="studio"]:is([data-premium="editorial"], [data-premium="editorial-glass"])[data-studio-page="index"] #metrics p.text-6xl {
  font-family: var(--pm-serif) !important; font-weight: 400 !important; font-size: clamp(3.5rem, 2.4rem + 3vw, 5rem) !important; letter-spacing: -.02em !important; line-height: 1 !important;
}
html[data-theme="studio"][data-premium="glass"][data-studio-page="index"] #metrics p.text-6xl {
  font-weight: 600 !important; font-size: clamp(2.75rem, 2rem + 2.2vw, 3.6rem) !important; letter-spacing: -.05em !important;
}
html[data-theme="studio"][data-premium="midnight"][data-studio-page="index"] #metrics p.text-6xl {
  font-weight: 600 !important; font-size: clamp(2.9rem, 2rem + 2.4vw, 3.9rem) !important; letter-spacing: -.05em !important;
  background-image: linear-gradient(180deg, #ffffff, #a79fc2); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
html[data-theme="studio"]:is([data-premium="glass"], [data-premium="editorial-glass"])[data-studio-page="index"] #metrics { background: transparent !important; border-color: transparent !important; }
html[data-theme="studio"]:is([data-premium="glass"], [data-premium="editorial-glass"])[data-studio-page="index"] #metrics .grid { gap: 14px !important; }
html[data-theme="studio"]:is([data-premium="glass"], [data-premium="editorial-glass"])[data-studio-page="index"] #metrics .grid > div {
  border: 0 !important; border-radius: 18px; padding: 28px 26px !important;
  background: linear-gradient(180deg, #ffffff, #faf9fe); box-shadow: inset 0 1px 0 #ffffff, 0 0 0 1px rgb(15 12 29 / .07), 0 16px 36px -28px rgb(40 24 120 / .35);
}

/* Products: the Glass themes set the three products as a bento — AirCode Studio as the tall tile,
   with a drawn browser window (decoration only) above its copy. */
@media (min-width: 768px) {
  html[data-theme="studio"]:is([data-premium="glass"], [data-premium="editorial-glass"])[data-studio-page="index"] #products .grid.md\:grid-cols-3 {
    grid-template-columns: 1.25fr 1fr !important; gap: 16px !important;
  }
  html[data-theme="studio"]:is([data-premium="glass"], [data-premium="editorial-glass"])[data-studio-page="index"] #products .grid.md\:grid-cols-3 > div:first-child {
    grid-row: span 2; min-height: 540px; justify-content: flex-end;
    background:
      radial-gradient(90% 70% at 18% 0%, rgb(219 234 255 / .9), rgb(255 255 255 / 0) 60%),
      radial-gradient(70% 60% at 100% 8%, rgb(234 226 255 / .95), rgb(255 255 255 / 0) 60%),
      #ffffff !important;
  }
  html[data-theme="studio"]:is([data-premium="glass"], [data-premium="editorial-glass"])[data-studio-page="index"] #products .grid.md\:grid-cols-3 > div:first-child > h3 { margin-top: auto !important; }
  html[data-theme="studio"]:is([data-premium="glass"], [data-premium="editorial-glass"])[data-studio-page="index"] #products .grid.md\:grid-cols-3 > div:first-child > a { margin-top: 0 !important; }
  html[data-theme="studio"]:is([data-premium="glass"], [data-premium="editorial-glass"])[data-studio-page="index"] #products .grid.md\:grid-cols-3 > div:first-child::after {
    content: ""; position: absolute; left: 32px; right: -48px; top: 118px; height: 236px; border-radius: 14px; pointer-events: none;
    background:
      radial-gradient(circle at 20px 17px, #e3e0ec 4.5px, transparent 5px),
      radial-gradient(circle at 36px 17px, #e3e0ec 4.5px, transparent 5px),
      radial-gradient(circle at 52px 17px, #e3e0ec 4.5px, transparent 5px),
      linear-gradient(90deg, #cdbeff, #e9e3ff) 22px 56px / 110px 8px no-repeat,
      linear-gradient(#f0eef6, #f0eef6) 22px 76px / 124px 8px no-repeat,
      linear-gradient(#f0eef6, #f0eef6) 22px 96px / 96px 8px no-repeat,
      linear-gradient(#f0eef6, #f0eef6) 22px 116px / 116px 8px no-repeat,
      linear-gradient(#f2f0f7, #f2f0f7) 190px 56px / 52% 10px no-repeat,
      linear-gradient(#f2f0f7, #f2f0f7) 190px 80px / 74% 10px no-repeat,
      linear-gradient(#f2f0f7, #f2f0f7) 190px 104px / 66% 10px no-repeat,
      linear-gradient(#f2f0f7, #f2f0f7) 190px 128px / 58% 10px no-repeat,
      linear-gradient(90deg, rgb(15 12 29 / .07), rgb(15 12 29 / .07)) 168px 34px / 1px 100% no-repeat,
      linear-gradient(rgb(15 12 29 / .07), rgb(15 12 29 / .07)) 0 34px / 100% 1px no-repeat,
      #ffffff;
    box-shadow: 0 0 0 1px rgb(15 12 29 / .08), 0 30px 60px -30px rgb(40 24 120 / .45);
  }
  html[data-theme="studio"]:is([data-premium="glass"], [data-premium="editorial-glass"])[data-studio-page="index"] #products .grid.md\:grid-cols-3 > div:first-child > :not(.absolute) { position: relative; z-index: 1; }
}
/* The hero visual is a fixed composition (~400px at its smallest): scale it to fit a phone column. */
@media (max-width: 440px) {
  html[data-theme="studio"][data-premium][data-studio-page="index"] .airllm-hero-viz { zoom: .84; }
}