body:not(.sky-off) { position: relative; background: #0B0E13; }
canvas[data-sky] { position: absolute; top: 0; left: 0; width: 100%; z-index: 0; pointer-events: none; display: block; }
body:not(.sky-off) > :is(.rs-launch-bar, .rs-header, main, .shell, footer) { position: relative; z-index: 1; }
body:not(.sky-off) > .rs-header { z-index: 3; background: transparent; border-bottom-color: rgba(255, 255, 255, 0.07); }
body:not(.sky-off) > .rs-launch-bar { z-index: 3; background: rgba(18, 22, 28, 0.55); border-bottom-color: rgba(255, 255, 255, 0.07); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

#main .hero--sky {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--r-s-7);
  min-height: calc(100svh - 7.5rem); padding-block: clamp(2.5rem, 1.5rem + 5vw, 6rem) clamp(7rem, 5rem + 6vw, 10rem);
}
#main .hero--sky .hero-main { margin-block: auto; max-width: 46rem; }
#main .hero--sky .eyebrow { color: #C9D3E6; letter-spacing: 0.16em; }
#main .hero--sky .hero-title {
  font-size: clamp(2.1rem, 1.25rem + 2.9vw, 3.9rem); max-width: 24ch; line-height: 1.04;
  text-shadow: 0 2px 30px rgba(5, 7, 11, 0.9), 0 0 2px rgba(5, 7, 11, 0.6);
}
#main .hero--sky .badge { background: rgba(11, 14, 19, 0.45); border-color: rgba(255, 255, 255, 0.22); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
#main .hero--sky .btn--primary { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 10px 40px -8px rgba(255, 214, 150, 0.55); }
#main .hero--sky .btn--secondary { background: rgba(11, 14, 19, 0.45); border-color: rgba(255, 255, 255, 0.28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
#main .hero--sky .almanac {
  width: fit-content; max-width: 100%; background: rgba(14, 18, 25, 0.5); border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-radius-1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
#main .hero--sky .almanac li { border-right-color: rgba(255, 255, 255, 0.1); }
@media (max-width: 640px) {
  #main .hero--sky { min-height: calc(100svh - 6rem); }
  #main .hero--sky .almanac li { border-bottom-color: rgba(255, 255, 255, 0.1); }
}

/* ---- pass 2: the hero arrives; the header stays; the page below the horizon carries the same light ---- */
body:not(.sky-off) > .rs-header { position: sticky; top: 0; background: rgba(7, 10, 15, 0.5); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
body:not(.sky-off) { --sky-amber: #FFCE8C; --sky-blue: #AFC6FF;
  background-image: linear-gradient(rgba(150, 180, 240, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(150, 180, 240, 0.035) 1px, transparent 1px);
  background-size: 96px 96px; background-position: center top; }

/* a scroll cue at the foot of the hero: a hairline with a point of light running down it */
#main .hero--sky { position: relative; }
#main .hero--sky::after { content: ""; position: absolute; left: 50%; bottom: clamp(5.5rem, 4rem + 4vw, 7.5rem); width: 1px; height: 3rem; background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55)); }
@media (max-width: 900px) { #main .hero--sky::after { display: none; } }

@media (prefers-reduced-motion: no-preference) {
  #main .hero--sky .hero-main > *, #main .hero--sky .almanac { opacity: 0; transform: translateY(18px); animation: sky-rise 900ms cubic-bezier(0.16, 1, 0.3, 1) forwards; }
  #main .hero--sky .eyebrow { animation-delay: 250ms; }
  #main .hero--sky .hero-title { animation-delay: 380ms; animation-duration: 1100ms; }
  #main .hero--sky .badges { animation-delay: 620ms; }
  #main .hero--sky .hero-actions { animation-delay: 760ms; }
  #main .hero--sky .almanac { animation-delay: 1500ms; }
  #main .hero--sky::after { animation: sky-cue 2.6s ease-in-out 3s infinite; transform-origin: top; }
  #main .hero--sky .btn--primary { transition: box-shadow 200ms ease, transform 200ms ease; }
  #main .hero--sky .btn--primary:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6), 0 14px 50px -6px rgba(255, 214, 150, 0.8); }
  body:not(.sky-off) #main :is(.codebox, .faq, .product-card, .trail, .price-pair, .spec--limits, .snippet) { transition: border-color 250ms ease, transform 250ms ease, box-shadow 250ms ease; }
  body:not(.sky-off) #main .product-card:hover { transform: translateY(-3px); }
  body:not(.sky-off) #main .faq > summary::after { transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1); }
  body:not(.sky-off) #main .faq[open] > .faq-a { animation: sky-rise 450ms cubic-bezier(0.16, 1, 0.3, 1) both; }
}
@keyframes sky-rise { to { opacity: 1; transform: none; } }
@keyframes sky-cue { 0% { transform: scaleY(0); opacity: 0; } 35% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* sections: a point of light marks each head; the hairline above it glows where the head sits */
body:not(.sky-off) #main .section { border-top-color: transparent; border-image: linear-gradient(90deg, rgba(255, 206, 140, 0.55), rgba(175, 198, 255, 0.28) 22%, rgba(255, 255, 255, 0.06) 60%, rgba(255, 255, 255, 0)) 1; }
body:not(.sky-off) #main .section-head h2 { display: flex; align-items: center; gap: 0.75rem; }
body:not(.sky-off) #main .section-head h2::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255, 206, 140, 0.22), 0 0 18px 4px rgba(255, 206, 140, 0.65); }

/* panels: glass with a top light, and a glow that follows the pointer (sky.js sets --mx / --my) */
body:not(.sky-off) #main :is(.codebox, .faq, .product-card, .trail, .price-pair, .spec--limits, .snippet) {
  position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); 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));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 24px 60px -30px rgba(0, 0, 0, 0.9);
}
body:not(.sky-off) #main :is(.codebox, .faq, .product-card, .trail, .price-pair, .spec--limits, .snippet):hover { border-color: rgba(175, 198, 255, 0.38); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 24px 70px -28px rgba(70, 110, 220, 0.55); }

/* call: one code box, three tabs. Without the script every panel shows, one under the other. */
body:not(.sky-off) #main .section--call { padding-block: var(--r-s-7) var(--r-s-4); }
body:not(.sky-off) #main .model-id-code { color: var(--sky-amber); }
body:not(.sky-off) :is(#main, main.content) .codebox { max-width: 56rem; margin-top: var(--r-s-5); }
body:not(.sky-off) :is(#main, main.content) .codebox-bar { display: flex; align-items: stretch; justify-content: space-between; gap: 0.5rem; padding-inline: 0.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.025); }
body:not(.sky-off) :is(#main, main.content) .codebox-tabs { display: flex; min-width: 0; overflow-x: auto; scrollbar-width: none; }
body:not(.sky-off) :is(#main, main.content) .codebox-tab, body:not(.sky-off) :is(#main, main.content) .codebox-copy {
  appearance: none; border: 0; background: none; color: var(--r-c-text-muted); font: inherit; font-family: var(--r-font-mono); font-size: 0.8125rem;
  min-height: 2.75rem; padding: 0 0.85rem; cursor: pointer; white-space: nowrap; position: relative;
}
body:not(.sky-off) :is(#main, main.content) .codebox-tab:hover, body:not(.sky-off) :is(#main, main.content) .codebox-copy:hover { color: #fff; }
body:not(.sky-off) :is(#main, main.content) .codebox.is-tabbed .codebox-tab[aria-selected="true"] { color: #fff; }
body:not(.sky-off) :is(#main, main.content) .codebox.is-tabbed .codebox-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0.85rem; right: 0.85rem; bottom: -1px; height: 2px; background: var(--sky-amber); box-shadow: 0 0 12px 1px rgba(255, 206, 140, 0.7); }
body:not(.sky-off) :is(#main, main.content) .codebox:not(.is-tabbed) .codebox-copy { display: none; }
body:not(.sky-off) :is(#main, main.content) .codebox:not(.is-tabbed) .codebox-panel + .codebox-panel { border-top: 1px solid rgba(255, 255, 255, 0.08); }
body:not(.sky-off) :is(#main, main.content) .codebox-copy { margin-block: 0.4rem; min-height: 0; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 6px; }
body:not(.sky-off) :is(#main, main.content) .codebox-copy.is-done { color: var(--sky-amber); border-color: rgba(255, 206, 140, 0.5); }
body:not(.sky-off) :is(#main, main.content) .codebox :is(.codebox-tab, .codebox-copy):focus-visible { outline: var(--r-focus-ring); outline-offset: -3px; }
body:not(.sky-off) :is(#main, main.content) .codebox-panel[hidden] { display: none; }
body:not(.sky-off) :is(#main, main.content) .codebox .snippet-code { background: transparent; font-size: 0.8125rem; line-height: 1.75; padding: 1.1rem 1.25rem 1.25rem; white-space: pre; overflow-x: auto; overflow-wrap: normal; }
body:not(.sky-off) :is(#main, main.content) .tok-id { color: var(--sky-amber); text-shadow: 0 0 14px rgba(255, 206, 140, 0.55); }
body:not(.sky-off) :is(#main, main.content) .tok-h { color: var(--sky-blue); }

/* questions: an accordion; the first one starts open */
body:not(.sky-off) #main .faq-list { max-width: 56rem; }
body:not(.sky-off) #main details.faq { padding: 0; }
body:not(.sky-off) #main .faq + .faq { margin-top: 0.6rem; }
body:not(.sky-off) #main .faq > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--r-s-5); padding: 1.1rem 1.35rem; cursor: pointer; list-style: none; }
body:not(.sky-off) #main .faq > summary::-webkit-details-marker { display: none; }
body:not(.sky-off) #main .faq > summary::after { content: ""; flex: none; width: 0.6rem; height: 0.6rem; margin-right: 0.2rem; border-right: 1.5px solid var(--sky-amber); border-bottom: 1.5px solid var(--sky-amber); transform: translateY(-25%) rotate(45deg); }
body:not(.sky-off) #main .faq[open] > summary::after { transform: translateY(25%) rotate(-135deg); }
body:not(.sky-off) #main .faq > summary:focus-visible { outline: var(--r-focus-ring); outline-offset: -3px; border-radius: 10px; }
body:not(.sky-off) #main .faq-q { font-family: var(--r-font-display); font-stretch: 112%; font-weight: 500; font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem); line-height: 1.25; }
body:not(.sky-off) #main .faq[open] .faq-q { color: #fff; }
body:not(.sky-off) #main .faq-a { margin: 0; padding: 0 1.35rem 1.3rem; max-width: 62ch; box-sizing: content-box; font-size: var(--r-step-body); line-height: 1.6; color: #C9D3E6; }
body:not(.sky-off) #main .faq-a a { color: #fff; }

/* the strap: the closing statement, set like the hero line, under its own horizon light */
body:not(.sky-off) #main > .strap {
  position: relative; margin-top: var(--r-s-9); padding-top: var(--r-s-8); max-width: none; color: var(--r-c-text);
  font-family: var(--r-font-display); font-stretch: 112%; font-weight: 500; font-size: clamp(2rem, 1.3rem + 2.8vw, 3.75rem); line-height: 1.05; letter-spacing: var(--r-tracking-display); text-wrap: balance;
}
body:not(.sky-off) #main > .strap::before { content: ""; position: absolute; left: 50%; top: 0; width: 100vw; height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(175, 198, 255, 0.45) 25%, rgba(255, 226, 180, 0.95) 50%, rgba(175, 198, 255, 0.45) 75%, transparent); box-shadow: 0 0 26px 2px rgba(255, 206, 140, 0.35); }
body:not(.sky-off) #main > .strap::after { content: ""; position: absolute; z-index: -1; left: 50%; top: 0; width: 100vw; height: 22rem; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(50% 100% at 50% 0%, rgba(70, 110, 220, 0.22), rgba(70, 110, 220, 0.05) 55%, transparent 80%); }
body:not(.sky-off) #main > .strap + .section { border-top: 0; border-image: none; padding-top: var(--r-s-7); }

/* products: two cards */
body:not(.sky-off) #main .product-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--r-s-4); }
@media (min-width: 720px) { body:not(.sky-off) #main .product-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body:not(.sky-off) #main .product-card { display: flex; flex-direction: column; gap: var(--r-s-3); padding: var(--r-s-6); }
body:not(.sky-off) #main .product-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%); }
body:not(.sky-off) #main .product-card:nth-child(2)::before { background: linear-gradient(90deg, var(--sky-blue), rgba(255, 206, 140, 0.45) 45%, transparent 85%); }
body:not(.sky-off) #main .product-card h3 { font-family: var(--r-font-display); font-stretch: 112%; font-weight: 500; font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem); line-height: 1.15; }
body:not(.sky-off) #main .product-desc { color: #C9D3E6; max-width: 44ch; }
body:not(.sky-off) #main .product-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin-top: auto; padding-top: var(--r-s-5); }
body:not(.sky-off) #main .product-card .btn--secondary { background: var(--r-c-accent); border-color: var(--r-c-accent); color: var(--r-c-on-accent); }
body:not(.sky-off) #main .product-card .btn--secondary:hover { background: #fff; color: var(--r-c-on-accent); box-shadow: 0 10px 40px -8px rgba(255, 214, 150, 0.7); }
body:not(.sky-off) #main .product-more { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; color: var(--r-c-text); font-weight: 700; }
body:not(.sky-off) #main .product-more::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) #main .product-more:hover { color: var(--sky-amber); }

/* the /dane page: its own panels and index on the same glass */
body:not(.sky-off) #main .contents a { background: rgba(14, 18, 25, 0.6); }
body:not(.sky-off) #main .contents a:hover { background: rgba(175, 198, 255, 0.1); color: var(--sky-amber); }
body:not(.sky-off) #main .contents-list, body:not(.sky-off) #main .contents li { border-color: rgba(255, 255, 255, 0.1); }
body:not(.sky-off) #main .trail th { border-bottom-color: rgba(255, 206, 140, 0.6); }
body:not(.sky-off) #main :is(.trail td, .spec-row) { border-bottom-color: rgba(255, 255, 255, 0.08); }
body:not(.sky-off) #main .spec-row dt::before { background: var(--sky-amber); box-shadow: 0 0 10px 1px rgba(255, 206, 140, 0.5); }

/* the header: Dane's own section links (Results, Price, Docs) leave the bar; the Dane link leads to the page that lists them */

/* ---- pass 4: the type. A serif for the statements, a quiet sans for reading and controls, a matching mono for labels and code.
   Instrument Serif, Geist and Geist Mono, all SIL OFL (licences beside the files in sky-fonts/). ---- */
@font-face { font-family: "sky-serif"; src: url("sky-fonts/serif-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "sky-serif"; src: url("sky-fonts/serif-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "sky-text"; src: url("sky-fonts/text.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "sky-mono"; src: url("sky-fonts/mono.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
body:not(.sky-off) {
  --sky-serif: "sky-serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --r-font-text: "sky-text", "r-text-fallback", system-ui, Arial, sans-serif;
  --r-font-display: "sky-text", "r-text-fallback", system-ui, Arial, sans-serif;
  --r-font-mono: "sky-mono", "r-mono-fallback", ui-monospace, "Courier New", monospace;
  --font-sans: var(--r-font-text);
  font-family: var(--r-font-text); font-synthesis: none; letter-spacing: -0.005em;
}
/* the statements, in the serif: one weight, no stretch, set a size up because a serif reads smaller */
body:not(.sky-off) #main .hero-title, body:not(.sky-off) #main > .strap, body:not(.sky-off) #main .product-card h3, body:not(.sky-off) #main .faq-q, body:not(.sky-off) #main .trail-row {
  font-family: var(--sky-serif); font-weight: 400; font-stretch: normal; letter-spacing: -0.012em;
}
body:not(.sky-off) #main .hero--sky .hero-title { font-size: clamp(2.5rem, 1.35rem + 3.7vw, 4.75rem); line-height: 1.02; max-width: 22ch; }
body:not(.sky-off) #main .hero--dane.hero--sky .hero-title { font-size: clamp(2.25rem, 1.3rem + 3vw, 4rem); }
body:not(.sky-off) #main > .strap { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.75rem); line-height: 1.02; }
body:not(.sky-off) #main .product-card h3 { font-size: clamp(1.625rem, 1.35rem + 1vw, 2.25rem); }
body:not(.sky-off) #main .faq-q { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); line-height: 1.2; }
/* the labels, in the sans: section heads become small spaced caps, not wide display caps */
body:not(.sky-off) #main .section-head h2 { font-family: var(--r-font-text); font-weight: 500; font-stretch: normal; font-size: 0.875rem; letter-spacing: 0.16em; line-height: 1.4; color: #C9D3E6; }
body:not(.sky-off) #main .eyebrow { font-family: var(--r-font-mono); font-size: 0.8125rem; letter-spacing: 0.14em; }
body:not(.sky-off) #main .almanac, body:not(.sky-off) .rs-launch-bar { font-size: 0.8125rem; }
body:not(.sky-off) #main :is(.btn, .badge), body:not(.sky-off) .rs-btn { font-stretch: normal; letter-spacing: 0; }

/* ---- the header: no underlines. The page you are on is white; the others are quiet until hovered. ---- */
body:not(.sky-off) .rs-header .rs-nav-link, body:not(.sky-off) .rs-header .rs-nav-login > .shared-login-link { color: #B9C4D8; font-stretch: normal; font-weight: 500; letter-spacing: 0; }
body:not(.sky-off) .rs-header .rs-nav-link:hover, body:not(.sky-off) .rs-header .rs-nav-link[aria-current="page"], body:not(.sky-off) .rs-header .rs-nav-login > .shared-login-link:hover { color: #fff; text-decoration: none; }
body:not(.sky-off) .rs-header .rs-pill { font-weight: 600; letter-spacing: 0.1em; text-decoration: none; }
body:not(.sky-off) .rs-header .rs-brand { letter-spacing: 0.14em; }

/* ---- pass 5: the page below the hero is sky too ---- */
/* a field of faint stars and three far lights behind every section; it fades in under the hero's ridgeline */
body:not(.sky-off) > #main::before {
  content: ""; position: absolute; z-index: -1; inset: 92svh 0 0 0; pointer-events: none;
  background-image:
    radial-gradient(60rem 44rem at 88% 9%, rgba(64, 104, 220, 0.16), transparent 70%),
    radial-gradient(52rem 40rem at 4% 38%, rgba(132, 92, 226, 0.12), transparent 70%),
    radial-gradient(56rem 40rem at 92% 68%, rgba(255, 190, 130, 0.07), transparent 70%),
    radial-gradient(1.4px 1.4px at 23px 41px, rgba(255, 255, 255, 0.75), transparent 100%),
    radial-gradient(1px 1px at 187px 126px, rgba(205, 222, 255, 0.6), transparent 100%),
    radial-gradient(1.2px 1.2px at 301px 263px, rgba(255, 240, 214, 0.55), transparent 100%),
    radial-gradient(1px 1px at 96px 322px, rgba(255, 255, 255, 0.4), transparent 100%),
    radial-gradient(1px 1px at 411px 77px, rgba(255, 255, 255, 0.5), transparent 100%),
    radial-gradient(1.6px 1.6px at 520px 388px, rgba(205, 222, 255, 0.7), transparent 100%),
    radial-gradient(1px 1px at 233px 541px, rgba(255, 255, 255, 0.35), transparent 100%),
    radial-gradient(1px 1px at 64px 178px, rgba(255, 255, 255, 0.3), transparent 100%),
    radial-gradient(1.2px 1.2px at 702px 215px, rgba(255, 255, 255, 0.5), transparent 100%),
    radial-gradient(1px 1px at 455px 690px, rgba(255, 214, 170, 0.5), transparent 100%),
    radial-gradient(1px 1px at 838px 512px, rgba(205, 222, 255, 0.4), transparent 100%);
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat;
  background-size: auto, auto, auto, 367px 367px, 367px 367px, 367px 367px, 367px 367px, 613px 613px, 613px 613px, 613px 613px, 613px 613px, 911px 911px, 911px 911px, 911px 911px;
  -webkit-mask-image: linear-gradient(transparent, #000 26rem); mask-image: linear-gradient(transparent, #000 26rem);
}

/* sections arrive: each rises as it comes into view (motion.js adds .is-in) */
@media (prefers-reduced-motion: no-preference) {
  body:not(.sky-off) #main.motion-on > .section { transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1), transform 900ms cubic-bezier(0.16, 1, 0.3, 1); }
  body:not(.sky-off) #main.motion-on > .section:not(.is-in) { transform: translateY(36px); }
  body:not(.sky-off) #main .tile { transition: border-color 250ms ease, transform 250ms ease, box-shadow 250ms ease; }
  body:not(.sky-off) #main .tile:hover { transform: translateY(-3px); }
  body:not(.sky-off) :is(#main, main.content) .codebox.is-tabbed { animation: sky-orbit 9s linear infinite; }
  body:not(.sky-off) #main .tile-ruler::after { animation: sky-sweep 5.5s cubic-bezier(0.5, 0, 0.2, 1) infinite; }
}
@property --sky-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes sky-orbit { to { --sky-a: 360deg; } }
@keyframes sky-sweep { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

/* the code box: a light travels round its edge */
body:not(.sky-off) :is(#main, main.content) .codebox {
  border: 1px solid transparent;
  background: radial-gradient(420px circle at var(--mx, -500px) var(--my, -500px), rgba(175, 198, 255, 0.13), transparent 65%) padding-box,
    linear-gradient(180deg, rgb(22, 28, 40), rgb(12, 16, 23)) padding-box,
    conic-gradient(from var(--sky-a), rgba(255, 255, 255, 0.1) 0deg, rgba(255, 255, 255, 0.1) 250deg, rgba(175, 198, 255, 0.7) 300deg, rgba(255, 214, 160, 1) 330deg, rgba(255, 255, 255, 0.1) 360deg) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 30px 80px -30px rgba(40, 70, 170, 0.55), 0 24px 60px -30px rgba(0, 0, 0, 0.9);
}
body:not(.sky-off) :is(#main, main.content) .codebox-bar::before { content: ""; align-self: center; flex: none; width: 2.6rem; height: 0.6rem; margin: 0 0.4rem 0 0.5rem;
  background: radial-gradient(circle at 0.3rem 50%, rgba(255, 255, 255, 0.28) 0.28rem, transparent 0.3rem), radial-gradient(circle at 1.3rem 50%, rgba(255, 255, 255, 0.18) 0.28rem, transparent 0.3rem), radial-gradient(circle at 2.3rem 50%, rgba(255, 255, 255, 0.12) 0.28rem, transparent 0.3rem); }
body:not(.sky-off) :is(#main, main.content) .codebox-bar { justify-content: flex-start; }
body:not(.sky-off) :is(#main, main.content) .codebox-copy { margin-left: auto; }

/* at a glance: the model's own figures as tiles */
body:not(.sky-off) #main .bento { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.85rem; }
@media (min-width: 720px) {
  body:not(.sky-off) #main .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  body:not(.sky-off) #main .tile--price { grid-column: span 5; grid-row: span 2; }
  body:not(.sky-off) #main .tile--context { grid-column: span 7; }
  body:not(.sky-off) #main .tile--out { grid-column: span 3; }
  body:not(.sky-off) #main .tile--io { grid-column: span 4; }
  body:not(.sky-off) #main .tile--effort { grid-column: span 12; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }
  body:not(.sky-off) #main .tile--effort .tile-note { margin: 0 0 0 auto; }
}
body:not(.sky-off) #main .tile {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; padding: clamp(1.1rem, 0.9rem + 1vw, 1.75rem);
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px;
  background: radial-gradient(420px circle at var(--mx, -500px) var(--my, -500px), rgba(175, 198, 255, 0.14), transparent 65%), linear-gradient(180deg, rgba(24, 30, 42, 0.86), rgba(13, 17, 24, 0.86));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 24px 60px -30px rgba(0, 0, 0, 0.9);
}
body:not(.sky-off) #main .tile:hover { border-color: rgba(175, 198, 255, 0.38); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 24px 70px -28px rgba(70, 110, 220, 0.55); }
/* a few stars in each tile's corner */
body:not(.sky-off) #main .tile::after { content: ""; position: absolute; right: 0; top: 0; width: 9rem; height: 7rem; pointer-events: none; opacity: 0.9;
  background: radial-gradient(1.6px 1.6px at 78% 22%, #fff, transparent 100%), radial-gradient(1px 1px at 52% 40%, rgba(205, 222, 255, 0.8), transparent 100%), radial-gradient(1.2px 1.2px at 88% 58%, rgba(255, 226, 180, 0.9), transparent 100%), radial-gradient(1px 1px at 34% 14%, rgba(255, 255, 255, 0.5), transparent 100%), radial-gradient(7rem 5rem at 85% 10%, rgba(90, 124, 255, 0.16), transparent 70%); }
body:not(.sky-off) #main .tile--price::after { background: radial-gradient(1.8px 1.8px at 80% 20%, #fff, transparent 100%), radial-gradient(1px 1px at 60% 44%, rgba(255, 226, 180, 0.9), transparent 100%), radial-gradient(1.2px 1.2px at 90% 60%, rgba(205, 222, 255, 0.8), transparent 100%), radial-gradient(8rem 6rem at 85% 10%, rgba(255, 196, 130, 0.2), transparent 70%); }
body:not(.sky-off) #main .tile-k, body:not(.sky-off) #main .tile-figs dt, body:not(.sky-off) #main .tile-rows 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) #main .tile-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: auto 0 0.4rem; }
body:not(.sky-off) #main .tile-figs > div { display: flex; flex-direction: column; gap: 0.35rem; }
body:not(.sky-off) #main .tile-figs > div + div { padding-left: 1rem; border-left: 1px solid rgba(255, 255, 255, 0.12); }
body:not(.sky-off) #main .tile-figs dd { margin: 0; font-family: var(--sky-serif); font-size: clamp(3.75rem, 2.4rem + 5vw, 6.5rem); line-height: 0.95; letter-spacing: -0.02em; color: #fff; text-shadow: 0 0 40px rgba(255, 206, 140, 0.35); }
body:not(.sky-off) #main .tile-big { margin-top: auto; font-family: var(--sky-serif); font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.75rem); line-height: 1; letter-spacing: -0.015em; color: #fff; }
body:not(.sky-off) #main .tile-big .unit { font-family: var(--r-font-text); font-size: 0.32em; letter-spacing: 0; color: #9AA8C0; }
body:not(.sky-off) #main .tile--out .tile-big { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); }
body:not(.sky-off) #main .tile-note { color: #B9C4D8; font-size: var(--r-step-small); max-width: 46ch; }
body:not(.sky-off) #main .tile-link { margin-top: auto; padding-top: 0.5rem; }
body:not(.sky-off) #main .tile-link a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; font-weight: 600; color: #fff; }
body:not(.sky-off) #main .tile-link 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) #main .tile-link a:hover { color: var(--sky-amber); }
body:not(.sky-off) #main .tile-ruler { position: relative; height: 1.4rem; margin-top: 0.9rem; border-bottom: 1px solid rgba(175, 198, 255, 0.45);
  background: repeating-linear-gradient(90deg, rgba(175, 198, 255, 0.55) 0 1px, transparent 1px 10%), repeating-linear-gradient(90deg, rgba(175, 198, 255, 0.25) 0 1px, transparent 1px 2%); background-size: 100% 100%, 100% 45%; background-position: 0 100%, 0 100%; background-repeat: no-repeat; }
body:not(.sky-off) #main .tile-ruler::after { content: ""; position: absolute; left: 100%; bottom: -3px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255, 206, 140, 0.25), 0 0 16px 4px rgba(255, 206, 140, 0.8); }
body:not(.sky-off) #main .tile-rows { display: grid; gap: 0; margin: 0; }
body:not(.sky-off) #main .tile-rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-block: 0.55rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
body:not(.sky-off) #main .tile-rows dd { margin: 0; font-family: var(--sky-serif); font-size: 1.5rem; line-height: 1; color: #fff; }
body:not(.sky-off) #main .tile-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
body:not(.sky-off) #main .tile-chips li { padding: 0.35rem 0.9rem; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; font-size: var(--r-step-small); color: #C9D3E6; background: rgba(255, 255, 255, 0.03); }
body:not(.sky-off) #main .tile-chips li:first-child { border-color: rgba(255, 206, 140, 0.6); color: #fff; background: rgba(255, 206, 140, 0.1); box-shadow: 0 0 24px -6px rgba(255, 206, 140, 0.6); }

/* the close: the tagline and the products stand in a second stretch of the same sky (a canvas), down to a ridgeline over the footer */
body:not(.sky-off) #main > .strap { margin-top: var(--r-s-10); padding-top: var(--r-s-9); text-align: center; max-width: none; text-shadow: 0 2px 30px rgba(5, 7, 11, 0.9); }
body:not(.sky-off) #main > .strap::before, body:not(.sky-off) #main > .strap::after { display: none; }
body:not(.sky-off) #main > .strap + .section { display: block; padding-bottom: clamp(9rem, 7rem + 6vw, 13rem); }
body:not(.sky-off) #main > .strap + .section > .section-head { align-items: center; margin-bottom: var(--r-s-6); }
body:not(.sky-off) #main > .strap + .section .product-cards { max-width: 62rem; margin-inline: auto; }
body:not(.sky-off) #main > .strap + .section .product-card { background: radial-gradient(420px circle at var(--mx, -500px) var(--my, -500px), rgba(175, 198, 255, 0.14), transparent 65%), linear-gradient(180deg, rgba(20, 26, 38, 0.72), rgba(11, 15, 22, 0.72)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
body:not(.sky-off) > .rs-footer { border-top-color: transparent; }

/* ---- pass 6 ---- */
/* the questions: the row's height is animated by sky.js; these carry the answer and the chevron along with it */
body:not(.sky-off) #main details.faq.is-closing > summary::after { transform: translateY(-25%) rotate(45deg); }
body:not(.sky-off) #main details.faq.is-closing .faq-q { color: inherit; }
@media (prefers-reduced-motion: no-preference) {
  body:not(.sky-off) #main details.faq > .faq-a { transition: opacity 220ms ease, transform 300ms cubic-bezier(0.16, 1, 0.3, 1); }
  body:not(.sky-off) #main details.faq.is-closing > .faq-a { opacity: 0; transform: translateY(-6px); }
  body:not(.sky-off) #main details.faq > summary { transition: background-color 200ms ease; }
  body:not(.sky-off) #main details.faq > summary:hover { background-color: rgba(255, 255, 255, 0.03); }
  body:not(.sky-off) #main details.faq > summary::after { transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1); }
  body:not(.sky-off) .rs-footer .rs-footer-group a { transition: color 180ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1); }
  body:not(.sky-off) .rs-footer .rs-footer-group a:hover { transform: translateX(4px); }
}
body:not(.sky-off) #main details.faq[open]:not(.is-closing) { border-color: rgba(255, 206, 140, 0.32); }

/* the footer: the mark and the name large, six quiet columns, the name again as a faint horizon of letters */
body:not(.sky-off) > .rs-footer {
  position: relative; z-index: 1; overflow: hidden; margin-top: 0; border-top: 0; font-size: var(--r-step-small);
  background:
    radial-gradient(70rem 26rem at 50% 0%, rgba(64, 104, 220, 0.18), transparent 70%),
    radial-gradient(1.4px 1.4px at 23px 41px, rgba(255, 255, 255, 0.6), transparent 100%),
    radial-gradient(1px 1px at 187px 126px, rgba(205, 222, 255, 0.5), transparent 100%),
    radial-gradient(1.2px 1.2px at 301px 263px, rgba(255, 240, 214, 0.45), transparent 100%),
    radial-gradient(1px 1px at 411px 77px, rgba(255, 255, 255, 0.4), transparent 100%),
    linear-gradient(180deg, #0B0E13, #05070B);
  background-repeat: no-repeat, repeat, repeat, repeat, repeat, no-repeat;
  background-size: auto, 367px 367px, 367px 367px, 613px 613px, 613px 613px, auto;
}
body:not(.sky-off) > .rs-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(175, 198, 255, 0.45) 25%, rgba(255, 226, 180, 0.95) 50%, rgba(175, 198, 255, 0.45) 75%, transparent); box-shadow: 0 0 26px 2px rgba(255, 206, 140, 0.35); }
body:not(.sky-off) .rs-footer .rs-footer-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--r-s-7); padding-block: var(--r-s-9) 0; }
body:not(.sky-off) .rs-footer .rs-footer-lead { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--r-s-5) var(--r-s-7); padding-bottom: var(--r-s-7); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
body:not(.sky-off) .rs-footer .rs-brand { display: inline-flex; align-items: center; gap: 0.9rem; color: #fff; font-family: var(--r-font-text); font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; }
body:not(.sky-off) .rs-footer svg.rs-brand-mark { width: clamp(2.5rem, 2.2rem + 1.2vw, 3.25rem); height: clamp(2.5rem, 2.2rem + 1.2vw, 3.25rem); border: 0; border-radius: 0; box-shadow: none; filter: drop-shadow(0 0 18px rgba(225, 157, 198, 0.45)); }
body:not(.sky-off) .rs-footer .rs-footer-bridge { max-width: 44ch; margin: 0; color: #B9C4D8; font-family: var(--sky-serif); font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); line-height: 1.25; }
@media (min-width: 900px) { body:not(.sky-off) .rs-footer .rs-footer-bridge { text-align: right; } }
body:not(.sky-off) .rs-footer .rs-footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--r-s-6) var(--r-s-5); }
@media (min-width: 640px) { body:not(.sky-off) .rs-footer .rs-footer-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { body:not(.sky-off) .rs-footer .rs-footer-nav { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
body:not(.sky-off) .rs-footer .rs-footer-h { margin-bottom: 0.6rem; font-family: var(--r-font-mono); font-size: 0.75rem; font-weight: 500; font-stretch: normal; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sky-amber); }
body:not(.sky-off) .rs-footer .rs-footer-group a { color: #B9C4D8; }
body:not(.sky-off) .rs-footer .rs-footer-group a:hover { color: #fff; text-decoration: none; }
/* the name, very large and barely there, cut off by the foot of the page */
body:not(.sky-off) .rs-footer .rs-footer-wordmark {
  display: block; margin: var(--r-s-6) 0 -0.16em; text-align: center; white-space: nowrap; pointer-events: none; user-select: none;
  font-family: var(--r-font-text); font-weight: 700; font-size: clamp(3.5rem, 15.5vw, 15rem); line-height: 0.8; letter-spacing: 0.06em; text-indent: 0.06em;
  color: transparent; -webkit-text-stroke: 1px rgba(175, 198, 255, 0.16);
  background: linear-gradient(180deg, rgba(175, 198, 255, 0.14), rgba(175, 198, 255, 0) 85%); -webkit-background-clip: text; background-clip: text;
}

/* the serif is narrow by nature: no negative tracking on it anywhere */
body:not(.sky-off) #main .hero-title, body:not(.sky-off) #main > .strap, body:not(.sky-off) #main .product-card h3, body:not(.sky-off) #main .faq-q, body:not(.sky-off) #main .trail-row, body:not(.sky-off) #main .tile-figs dd, body:not(.sky-off) #main .tile-big { letter-spacing: 0; word-spacing: 0.02em; }

/* ---- the results table: one row a model, a bar for the value; Dane's row carries the warm light ---- */
body:not(.sky-off) #main .standings {
  position: relative; overflow: hidden; max-width: 62rem; padding: clamp(0.5rem, 0.3rem + 1vw, 1.25rem) clamp(1rem, 0.6rem + 1.6vw, 2rem); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px;
  background: radial-gradient(40rem 16rem at 12% 0%, rgba(255, 196, 130, 0.1), transparent 70%), linear-gradient(180deg, rgba(24, 30, 42, 0.86), rgba(13, 17, 24, 0.86));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 24px 60px -30px rgba(0, 0, 0, 0.9);
}
body:not(.sky-off) #main .standings-table { width: 100%; border-collapse: collapse; }
body:not(.sky-off) #main .standings-table thead td { border-bottom: 1px solid rgba(255, 206, 140, 0.4); }   /* the rule under the head runs under the bar column too */
body:not(.sky-off) #main .standings-table thead th { padding: 0.9rem 0.75rem 0.7rem; text-align: left; font-family: var(--r-font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #9AA8C0; border-bottom: 1px solid rgba(255, 206, 140, 0.4); }
body:not(.sky-off) #main .standings-table tbody :is(td, th) { padding: 0.95rem 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.07); vertical-align: middle; }
body:not(.sky-off) #main .standings-table tbody tr:last-child :is(td, th) { border-bottom: 0; }
body:not(.sky-off) #main .standings-table .standings-rank { width: 3.5rem; font-family: var(--r-font-mono); font-size: 0.8125rem; color: #7F8CA6; }
body:not(.sky-off) #main .standings-table .standings-model { text-align: left; font-family: var(--r-font-text); font-weight: 500; font-size: var(--r-step-body); color: #C9D3E6; white-space: nowrap; }
body:not(.sky-off) #main .standings-table .standings-val { width: 6.5rem; text-align: right; }
body:not(.sky-off) #main .standings-table tbody .standings-val { font-family: var(--sky-serif); font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2.125rem); line-height: 1; color: #E6ECF8; font-variant-numeric: tabular-nums; }
body:not(.sky-off) #main .standings-table .standings-bar { width: 52%; padding-inline: 0.75rem; }
body:not(.sky-off) #main .standings-table tbody .standings-bar { position: relative; }
body:not(.sky-off) #main .standings-table tbody .standings-bar::before { content: ""; position: absolute; left: 0.75rem; right: 0.75rem; top: 50%; height: 1px; background: rgba(255, 255, 255, 0.08); }
body:not(.sky-off) #main .standings-table .standings-bar span { position: relative; display: block; width: calc(var(--v) * 1%); height: 0.55rem; border-radius: 999px; background: linear-gradient(90deg, rgba(120, 146, 205, 0.35), rgba(175, 198, 255, 0.85)); }
body:not(.sky-off) #main .standings-table .standings-bar span::after { content: ""; position: absolute; right: -3px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #DCE6FF; box-shadow: 0 0 10px 2px rgba(175, 198, 255, 0.6); }
/* Dane */
/* one wash across the whole row (on the row itself: set on each cell it would start again in every column) */
body:not(.sky-off) #main .standings-table tr.is-dane { background: linear-gradient(90deg, rgba(255, 206, 140, 0.13), rgba(255, 206, 140, 0.03)); }
body:not(.sky-off) #main .standings-table tr.is-dane :is(td, th) { background: none; border-bottom-color: rgba(255, 206, 140, 0.25); }
body:not(.sky-off) #main .standings-table tr.is-dane .standings-rank { color: var(--sky-amber); }
body:not(.sky-off) #main .standings-table tr.is-dane .standings-model { color: #fff; font-weight: 600; font-size: 1.25em; letter-spacing: 0.08em; text-transform: uppercase; }
body:not(.sky-off) #main .standings-table tr.is-dane .standings-val { color: #fff; font-size: clamp(2.25rem, 1.7rem + 2vw, 3.5rem); text-shadow: 0 0 36px rgba(255, 206, 140, 0.55); }
body:not(.sky-off) #main .standings-table tr.is-dane .standings-bar span { height: 0.8rem; background: linear-gradient(90deg, rgba(255, 190, 120, 0.5), #FFD9A6 70%, #fff); box-shadow: 0 0 22px 2px rgba(255, 206, 140, 0.55); }
body:not(.sky-off) #main .standings-table tr.is-dane .standings-bar span::after { right: -5px; width: 11px; height: 11px; margin-top: -5.5px; background: #fff; box-shadow: 0 0 0 4px rgba(255, 206, 140, 0.25), 0 0 20px 6px rgba(255, 206, 140, 0.9); }
@media (max-width: 640px) {
  body:not(.sky-off) #main .standings-table .standings-rank { display: none; }
  body:not(.sky-off) #main .standings-table .standings-bar { width: 34%; padding-inline: 0.25rem; }
  body:not(.sky-off) #main .standings-table .standings-model { white-space: normal; }
  body:not(.sky-off) #main .standings-table .standings-val { width: auto; }
}
/* the bars draw out when the section arrives */
@media (prefers-reduced-motion: no-preference) {
  body:not(.sky-off) #main.motion-on > .section .standings-bar span { transition: width 1300ms cubic-bezier(0.16, 1, 0.3, 1); }
  body:not(.sky-off) #main.motion-on > .section:not(.is-in) .standings-bar span { width: 0; }
  body:not(.sky-off) #main.motion-on > .section tbody tr:nth-child(2) .standings-bar span { transition-delay: 90ms; }
  body:not(.sky-off) #main.motion-on > .section tbody tr:nth-child(3) .standings-bar span { transition-delay: 180ms; }
  body:not(.sky-off) #main.motion-on > .section tbody tr:nth-child(4) .standings-bar span { transition-delay: 270ms; }
  body:not(.sky-off) #main.motion-on > .section tbody tr:nth-child(5) .standings-bar span { transition-delay: 360ms; }
  body:not(.sky-off) #main.motion-on > .section tbody tr:nth-child(6) .standings-bar span { transition-delay: 450ms; }
}

body:not(.sky-off) #main .standings-caption { caption-side: top; padding: 0.9rem 0.75rem 0.2rem; text-align: left; font-family: var(--sky-serif); font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); line-height: 1.1; color: #fff; }


/* narrow screens: the words sit low in the hero and the sky above them is kept open, so Dane's star, its figure and its name
   (sky.js draws them there) are never under the headline or the buttons */
@media (max-width: 899px) {
  #main .hero--sky { padding-top: clamp(13rem, 9rem + 16vw, 19rem); }
  #main .hero--sky .hero-main { margin-block: auto 0; }
}

/* the code box outside the home and model pages (the Dane docs): it is its own panel there too, and the reading page's rules
   for a bare <pre> stay off the panes inside it */
body:not(.sky-off) main.content .codebox { position: relative; overflow: hidden; border-radius: 10px; margin-block: 1.5rem; }
body:not(.sky-off) main.content .codebox pre.snippet-code { margin: 0; border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none !important; color: #E6ECF8; }
body:not(.sky-off) main.content .codebox pre.snippet-code code { border: 0 !important; padding: 0; background: transparent !important; color: inherit !important; font: inherit; white-space: pre; overflow-wrap: normal; }


/* the narrowest phones: the brand, Sign up and Menu stay on one line */
@media (max-width: 400px) {
  body:not(.sky-off) .rs-header .rs-header-inner { flex-wrap: nowrap; gap: 0.5rem; }
  body:not(.sky-off) .rs-header .rs-brand { letter-spacing: 0.06em; }
  body:not(.sky-off) .rs-header .rs-nav-account { gap: 0.5rem; }
  body:not(.sky-off) .rs-header :is(.rs-btn--signup, .rs-nav-phone > summary) { padding-inline: 0.7rem; }
}
@media (max-width: 340px) {
  body:not(.sky-off) .rs-header .rs-header-inner, body:not(.sky-off) .rs-header .rs-nav-account { gap: 0.35rem; }
  body:not(.sky-off) .rs-header .rs-brand { letter-spacing: 0; }
  body:not(.sky-off) .rs-header :is(.rs-btn--signup, .rs-nav-phone > summary) { padding-inline: 0.5rem; }
}