body:not(.sky-off) > :is(main, .shell), body:not(.sky-off) main,
body:not(.sky-off) main > :is(section, div, article, header), body:not(.sky-off) .shell > * { background-color: transparent !important; background-image: none !important; }

/* the first heading stands in the sky; headings take the display face */
body:not(.sky-off) main :is(h1, h2) { font-family: var(--sky-serif) !important; font-weight: 400 !important; font-stretch: normal; letter-spacing: 0 !important; word-spacing: 0.02em; }
body:not(.sky-off) main h1 { color: #fff; text-shadow: 0 2px 30px rgba(5, 7, 11, 0.9), 0 0 2px rgba(5, 7, 11, 0.6); }
body:not(.sky-off) main :is(h3, h4, th, button, .btn-primary, .btn-secondary) { font-family: var(--r-font-text); font-stretch: normal; }
body:not(.sky-off) :is(code, pre, kbd, samp), body:not(.sky-off) main [class*="font-mono"] { font-family: var(--r-font-mono) !important; }
body:not(.sky-off) main [class*="font-display"]:not(h1):not(h2) { font-family: var(--r-font-text) !important; }

/* panels: the same glass as the home page; the glow follows the pointer (sky.js sets --mx / --my) */
body:not(.sky-off) :is(.price-card, .compare-module, .examples-module, .doc-card, .role-card, .final-panel, .call-record, .call-figure, .models-controls, .models-empty, .reading-example, .pager-link, .mobile-docs, main .card) {
  border-color: rgba(255, 255, 255, 0.1) !important; border-radius: 10px;
  background: radial-gradient(420px circle at var(--mx, -500px) var(--my, -500px), rgba(175, 198, 255, 0.13), transparent 65%), linear-gradient(180deg, rgba(24, 30, 42, 0.92), rgba(14, 18, 25, 0.92)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 24px 60px -30px rgba(0, 0, 0, 0.9) !important;
}
body:not(.sky-off) :is(.price-card, .doc-card, .role-card, .pager-link):hover { border-color: rgba(175, 198, 255, 0.38) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 24px 70px -28px rgba(70, 110, 220, 0.55) !important; }
/* utility-class cards (a rounded corner and a border): glass, their own shape kept */
body:not(.sky-off) main :is(div, article, section, li, details, aside)[class*="rounded-"][class*="border"] { border-color: rgba(255, 255, 255, 0.1) !important; background-color: rgba(18, 23, 32, 0.78) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
@media (prefers-reduced-motion: no-preference) {
  body:not(.sky-off) :is(.price-card, .doc-card, .role-card, .pager-link) { transition: border-color 250ms ease, box-shadow 250ms ease, transform 250ms ease; }
  body:not(.sky-off) :is(.price-card, .doc-card, .role-card):hover { transform: translateY(-3px); }
}
body:not(.sky-off) .price-card { position: relative; overflow: hidden; }
body:not(.sky-off) .price-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--sky-amber), rgba(175, 198, 255, 0.5) 45%, transparent 85%); }

/* code, tables, rules */
body:not(.sky-off) main pre { border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 10px; background: linear-gradient(180deg, rgba(24, 30, 42, 0.92), rgba(14, 18, 25, 0.92)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); }
/* inline code: a dark chip (the pages' own rule is a pale box made for a light page) */
body:not(.sky-off) main :not(pre) > code { border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 5px; background: rgba(255, 255, 255, 0.06) !important; color: #E6ECF8 !important; }
body:not(.sky-off) main th :not(pre) > code, body:not(.sky-off) main th > code { color: #C9D3E6 !important; }
body:not(.sky-off) main th { background-color: rgba(255, 255, 255, 0.04) !important; color: #C9D3E6; border-color: rgba(255, 206, 140, 0.35) !important; }
body:not(.sky-off) main td { border-color: rgba(255, 255, 255, 0.08) !important; }
body:not(.sky-off) main hr { border-color: rgba(255, 255, 255, 0.1); }

/* the one filled button keeps its fill and gains the warm light */
body:not(.sky-off) :is(.btn-primary, main .btn--primary) { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 10px 40px -8px rgba(255, 214, 150, 0.55); }
body:not(.sky-off) :is(.btn-primary, main .btn--primary):hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6), 0 14px 50px -6px rgba(255, 214, 150, 0.8); }

/* the contents list on reading pages: no panel, just the list and its rule */
body:not(.sky-off) :is(.reading-toc, .reading-toc-toggle) { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
/* the opening lines of a page sit over the sky: keep them bright enough to read */
body:not(.sky-off) main h1 ~ p, body:not(.sky-off) main h1 + * p { color: #D5DDEC; }

/* the pricing page's Dane block: one glass card, the name and notes on the left, the two prices large on the right */
body:not(.sky-off) .pricing-dane .pricing-wrap { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem clamp(1.5rem, 0.5rem + 4vw, 4rem); padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px;
  background: radial-gradient(34rem 20rem at 92% 0%, rgba(255, 196, 130, 0.16), transparent 70%), radial-gradient(30rem 20rem at 0% 100%, rgba(90, 124, 255, 0.14), transparent 70%), linear-gradient(180deg, rgba(24, 30, 42, 0.92), rgba(13, 17, 24, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 30px 70px -34px rgba(0, 0, 0, 0.9); }
body:not(.sky-off) .pricing-dane .pricing-wrap::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--sky-amber), rgba(175, 198, 255, 0.5) 45%, transparent 85%); }
body:not(.sky-off) .pricing-dane .pricing-wrap::after { content: ""; position: absolute; right: 0; top: 0; width: 16rem; height: 10rem; pointer-events: none;
  background: radial-gradient(1.8px 1.8px at 78% 24%, #fff, transparent 100%), radial-gradient(1px 1px at 56% 44%, rgba(205, 222, 255, 0.8), transparent 100%), radial-gradient(1.3px 1.3px at 90% 62%, rgba(255, 226, 180, 0.9), transparent 100%), radial-gradient(1px 1px at 36% 16%, rgba(255, 255, 255, 0.5), transparent 100%), radial-gradient(1px 1px at 68% 78%, rgba(255, 255, 255, 0.45), transparent 100%); }
body:not(.sky-off) .pricing-dane .dane-band-eyebrow { display: flex; align-items: center; gap: 0.7rem; margin: 0; font-family: var(--r-font-mono); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: #9AA8C0; }
body:not(.sky-off) .pricing-dane .dane-band-eyebrow .badge { padding: 0.2rem 0.7rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; background: rgba(255, 255, 255, 0.04); letter-spacing: 0.06em; text-transform: none; color: #C9D3E6; }
body:not(.sky-off) .pricing-dane h2 { margin: 0.3rem 0 0.6rem; font-size: clamp(3rem, 2rem + 4vw, 5.5rem) !important; line-height: 0.95; color: #fff; text-shadow: 0 0 40px rgba(255, 206, 140, 0.3); }
body:not(.sky-off) .pricing-dane .price-note { margin: 0; color: #B9C4D8; max-width: 46ch; }
body:not(.sky-off) .pricing-dane .pricing-wrap > p:last-child { margin-top: 0.9rem; }
body:not(.sky-off) .pricing-dane .pricing-wrap > p:last-child a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; color: #fff; font-weight: 600; text-decoration: none; }
body:not(.sky-off) .pricing-dane .pricing-wrap > p:last-child a::after { content: ""; width: 0.42rem; height: 0.42rem; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }
body:not(.sky-off) .pricing-dane .pricing-wrap > p:last-child a:hover { color: var(--sky-amber); }
body:not(.sky-off) .pricing-dane .dane-price { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 1rem 0; align-self: center; }
body:not(.sky-off) .pricing-dane .dane-price > div { display: flex; flex-direction: column-reverse; gap: 0.5rem; padding: 0 0 0 clamp(1rem, 0.5rem + 2vw, 2rem); border: 0; border-left: 1px solid rgba(255, 255, 255, 0.12); }
body:not(.sky-off) .pricing-dane .dane-price > div:first-child { padding-left: 0; border-left: 0; }
body:not(.sky-off) .pricing-dane .dane-price dt { font-family: var(--r-font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #9AA8C0; }
body:not(.sky-off) .pricing-dane .dane-price dd { margin: 0; font-family: var(--sky-serif); font-size: clamp(4rem, 2.4rem + 6.5vw, 8.5rem); line-height: 0.9; color: #fff; text-shadow: 0 0 46px rgba(255, 206, 140, 0.4); }
@media (min-width: 860px) {
  body:not(.sky-off) .pricing-dane .pricing-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  body:not(.sky-off) .pricing-dane .pricing-wrap > * { grid-column: 1; }
  body:not(.sky-off) .pricing-dane .dane-price { grid-column: 2; grid-row: 1 / span 7; margin: 0; }
}

/* Keep the model pricing card separate from the comparison below it. */
body:not(.sky-off) .pricing-dane + .pricing-compare { padding-block-start: clamp(2rem, 4vw, 4rem); }

/* Fit both model prices on one aligned row, including the three-character output rate. */
body:not(.sky-off) .pricing-dane .dane-price { align-items: end; }
body:not(.sky-off) .pricing-dane .dane-price dd { white-space: nowrap; font-size: clamp(2.5rem, 7vw, 6rem); }

body:not(.sky-off) .pricing-dane h2#pricing-dane-title { color: #fff; -webkit-text-fill-color: #fff; }

/* the setup chooser on a docs page ("Choose your inference setup"): a label and two links in a row, not a panel */
body:not(.sky-off) .docs-product { margin: 16px 0 18px; }


/* docs pages: a page's sub-sections are headed two ways in the HTML (an h3, or an h2 marked as a section heading). Both are
   the same level, so both read the same: the sans, bold. Only a page's title and its main heading take the serif. */
body:not(.sky-off) main :is(h2.docs-section-heading, h2.doc-group-title) { font-family: var(--r-font-text) !important; font-weight: 750 !important; letter-spacing: -0.01em !important; word-spacing: 0; }
/* and the title is set a size up: the serif reads smaller than the sans it replaced */
body:not(.sky-off) main.content h1 { font-size: clamp(2.125rem, 1.7rem + 1.6vw, 2.75rem) !important; line-height: 1.1 !important; }