/* Shared tokens, each planet's palette, type and chrome (header, footer, buttons) for every page. */

@font-face {
  font-family: "Michroma";
  src: url("../fonts/michroma-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin-var.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Space is a deep lapis blue, not black. The dark colours are rgb triplets, so every see-through shade is written
     rgb(var(--space-rgb) / a) and follows the token when it changes. --night-rgb is the night of the page's own
     shadows and veils, a shade under space. Two tones stay where the planets were tuned, so the look lap of 2026-10-09
     left their tone and detail as they were (the close gate's crops, tools/planets3d/gate.cjs): --globe-night-rgb, the
     planets' night side and the dark round their disc, and --planet-shade-rgb, the buy page's reading shades that lie
     over its planet (the space tone before that lap). The darkest tones have a floor, so a cheap panel, or one whose
     black level is set wrong (a TV's limited range, "black level: low"), still shows a blue and not black: space at a
     relative luminance of about 0.011, space-2 0.013, night 0.006 (each look's below too, its hue kept: its linear
     light scaled by one factor). They were 0.005, 0.009 and 0.0024 until 2026-10-07, with red and green under 16 of
     255, which such panels crush to black, then 0.008, 0.010 and 0.004 until the look lap of 2026-10-09 lifted them
     one more notch ("a bit dark"). */
  --space-rgb: 19 25 55; /* #131937, L 0.0111 */
  --space-2-rgb: 20 28 61; /* #141c3d, L 0.0132 */
  --night-rgb: 11 16 38; /* L 0.0058 */
  --globe-night-rgb: 8 12 30; /* L 0.0041 */
  --planet-shade-rgb: 15 20 47; /* L 0.0081 */
  --on-dark-rgb: 244 240 232; /* #f4f0e8 */
  --space: rgb(var(--space-rgb));
  --space-2: rgb(var(--space-2-rgb));
  --space-3: #182044;
  --on-dark: rgb(var(--on-dark-rgb));
  --on-dark-muted: #aeb5ca;
  --line-dark: rgb(var(--on-dark-rgb) / 0.14);

  --light: #ffffff;
  --light-2: #f5f6f8;
  --ink: #12151c;
  --ink-muted: #4a5160;
  --line-light: #e3e6eb;

  /* The one accent, gold: Subscribe, the price and the best true numbers (the net result, the biggest win, the
     strongest month, the winning months; the owner, 2026-10-09), nothing else, so the eye goes to them first and then
     to where you buy. */
  --accent-rgb: 233 185 73; /* #e9b949 */
  --accent: rgb(var(--accent-rgb));
  --accent-hover: #f5cd6c;
  --accent-press: #cf9e34;
  --on-accent: #1a1204;
  --accent-ring: var(--accent-hover);
  --focus: var(--on-dark);

  /* Colour in the sky, never on text or buttons: the nebula's glow (lapis, warm dust), the orbits, the sun, a warmer
     tone on the planet photos, and the stars. The photo's stars are multiplied by --star-wash (two patches over a
     base; the lobby's photo takes a neutral one of its own, lobby.css); the sky script's stars and comet use the
     triplets. The near stars are one neutral warm white, 2 to 4 percent warmer than pure white and never yellow
     (they were cream, amber and blue-white, and read as blue on the lapis: the owner, 2026-10-09); the market
     constellations' last star, "the price now", a touch warmer. */
  --nebula-1: 58 84 196;
  --nebula-2: 168 112 64;
  --orbit-rgb: 240 226 200;
  --sun-glow: 255 208 150;
  --sun-filter: saturate(0.42) brightness(1.48) contrast(0.9);
  --planet-filter: saturate(1.2) sepia(0.12) brightness(1.04); /* each look's own below */
  --star-wash:
    radial-gradient(38% 46% at 22% 28%, #ffb766, transparent),
    radial-gradient(34% 40% at 78% 70%, #8fb0ff, transparent),
    linear-gradient(#fff0dc, #fff0dc);
  --star-rgb: 255 251 246;
  --star-now: 255 232 200;
  --comet-coma: 255 232 190;
  --comet-ion: 168 196 255;
  --comet-dust: 255 210 150;

  /* Display: Michroma, a wide extended grotesk with one weight (400), for names and headings. Its sizes are 0.84 of
     the sizes the site had in Cormorant Garamond, so the capitals keep their height (cap height 0.75em against
     0.63em). Mono: numbers and labels, quant precision. */
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Michroma", "Eurostile", "Microgramma", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --radius: 14px;
  --radius-sm: 10px;
  --container: 1160px;
  --gutter: clamp(16px, 4vw, 32px);
  --header-h: 84px;
}

/* Each planet's own palette, its hues taken from its hero photo: the page's space tone (the lapis nudged a few degrees
   toward the planet, same lightness, over the same floor as the lapis), a soft glow (--tint), a lighter tone for thin
   lines and the step numbers (--tint-hi, 7:1 or more on --space-2: the icon rings, the ticks and the numbers), a nebula
   pair and the wash over the photo's stars. Used by its buy page (body.look-*, strategy.css) and by the lobby's
   departure into it (.lobby-fly--*, lobby.js), which ends on the very tone the buy page opens on. Never on buttons or
   the price, which keep the gold accent. --space and --space-2 are declared again: a value computed on :root does not
   follow a triplet that changes further down. A look without a block keeps the lapis; keep the space tones equal to
   SPACE in templates/strategy.mjs (the browser's toolbar colour). */

/* Jupiter: amber and weight. */
.look-gas,
.lobby-fly--gas {
  --space-rgb: 23 23 56; /* #171738 */
  --space-2-rgb: 26 26 62; /* #1a1a3e */
  --night-rgb: 16 16 33;
  --globe-night-rgb: 12 12 26;
  --planet-shade-rgb: 19 19 47;
  --space: rgb(var(--space-rgb));
  --space-2: rgb(var(--space-2-rgb));
  --tint: 197 133 38; /* #c58526 */
  --tint-hi: 212 165 94; /* #d4a55e, 7.41:1 */
  --nebula-1: 185 123 29; /* #b97b1d */
  --nebula-2: 142 62 42; /* #8e3e2a */
  --star-wash:
    radial-gradient(38% 46% at 22% 28%, #fac575, transparent),
    radial-gradient(34% 40% at 78% 70%, #f5a38e, transparent),
    linear-gradient(#f7edde, #f7edde);
}

/* Saturn: pale gold and calm. */
.look-ringed,
.lobby-fly--ringed {
  --space-rgb: 24 24 54; /* #181836 */
  --space-2-rgb: 24 27 60; /* #181b3c */
  --night-rgb: 16 16 33;
  --globe-night-rgb: 12 12 26;
  --planet-shade-rgb: 19 19 46;
  --space: rgb(var(--space-rgb));
  --space-2: rgb(var(--space-2-rgb));
  --tint: 195 167 121; /* #c3a779 */
  --tint-hi: 189 167 129; /* #bda781, 7.14:1 */
  --nebula-1: 153 118 61; /* #99763d */
  --nebula-2: 72 83 112; /* #485370 */
  --star-wash:
    radial-gradient(38% 46% at 22% 28%, #e5c28b, transparent),
    radial-gradient(34% 40% at 78% 70%, #a2b4e2, transparent),
    linear-gradient(#f2ece4, #f2ece4);
}

/* Mars: warm and rusty. */
.look-rocky,
.lobby-fly--rocky {
  --space-rgb: 24 24 54; /* #181836 */
  --space-2-rgb: 26 25 65; /* #1a1941 */
  --night-rgb: 16 16 33;
  --globe-night-rgb: 12 12 26;
  --planet-shade-rgb: 19 19 46;
  --space: rgb(var(--space-rgb));
  --space-2: rgb(var(--space-2-rgb));
  --tint: 212 111 43; /* #d46f2b */
  --tint-hi: 217 156 117; /* #d99c75, 7.12:1 */
  --nebula-1: 183 92 31; /* #b75c1f */
  --nebula-2: 133 50 62; /* #85323e */
  --star-wash:
    radial-gradient(38% 46% at 22% 28%, #f9ab77, transparent),
    radial-gradient(34% 40% at 78% 70%, #f094a0, transparent),
    linear-gradient(#f7e8de, #f7e8de);
}

/* Neptune: deep and cold (the lapis itself). */
.look-ice,
.lobby-fly--ice {
  --space-rgb: 19 25 55; /* #131937 */
  --space-2-rgb: 20 28 61; /* #141c3d */
  --night-rgb: 13 17 35;
  --globe-night-rgb: 9 12 27;
  --planet-shade-rgb: 15 20 47;
  --space: rgb(var(--space-rgb));
  --space-2: rgb(var(--space-2-rgb));
  --tint: 67 87 219; /* #4357db */
  --tint-hi: 154 165 229; /* #9aa5e5, 7.04:1 */
  --nebula-1: 29 50 185; /* #1d32b9 */
  --nebula-2: 41 105 142; /* #29698e */
  --star-wash:
    radial-gradient(38% 46% at 22% 28%, #7587fa, transparent),
    radial-gradient(34% 40% at 78% 70%, #8ed0f6, transparent),
    linear-gradient(#dee1f7, #dee1f7);
}

/* Earth: blue-green and alive. */
.look-ocean,
.lobby-fly--ocean {
  --space-rgb: 18 27 49; /* #121b31 */
  --space-2-rgb: 18 30 55; /* #121e37 */
  --night-rgb: 12 18 30;
  --globe-night-rgb: 8 13 23;
  --planet-shade-rgb: 14 22 42;
  --space: rgb(var(--space-rgb));
  --space-2: rgb(var(--space-2-rgb));
  --tint: 62 156 204; /* #3e9ccc */
  --tint-hi: 116 178 208; /* #74b2d0, 7.12:1 */
  --nebula-1: 40 130 175; /* #2882af */
  --nebula-2: 46 135 138; /* #2e878a */
  --star-wash:
    radial-gradient(38% 46% at 22% 28%, #7ccbf3, transparent),
    radial-gradient(34% 40% at 78% 70%, #91eff3, transparent),
    linear-gradient(#e0eef5, #e0eef5);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--space);
  color: var(--on-dark);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg,
canvas,
video {
  display: block;
  max-width: 100%;
}

/* Line height 1.25: the same line pitch as 1.05 had at the old sizes, and room for Michroma's tall accents
   (Å reaches 1.16em above the baseline) when a heading wraps. Balanced lines, so a wrapped heading never leaves
   one short word on a line of its own. */
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0;
  text-wrap: balance;
  margin: 0 0 0.5em;
}

h1 {
  font-size: clamp(2.31rem, 5.88vw, 4.2rem);
}

h2 {
  font-size: clamp(1.68rem, 3.696vw, 2.52rem);
}

h3 {
  font-size: 1.26rem;
}

p {
  margin: 0 0 1em;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  /* Cream, not the accent: the accent belongs to Subscribe, the price and the best numbers. */
  background: var(--on-dark);
  color: var(--space);
  font-weight: 600;
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.skip-link:focus {
  top: 12px;
}

/* Sections: dark is the default page background, light is for reading. */
.section {
  padding: clamp(56px, 9vw, 112px) 0;
}

.section--light {
  background: var(--light);
  color: var(--ink);
}

.section--light-2 {
  background: var(--light-2);
  color: var(--ink);
}

.section--dark {
  background: var(--space-2);
  color: var(--on-dark);
}

.eyebrow {
  display: inline-block;
  margin-bottom: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}

.muted {
  color: var(--on-dark-muted);
}

.section--light .muted,
.section--light-2 .muted {
  color: var(--ink-muted);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 52px;
  padding: 0 1.6em;
  border: 0;
  border-radius: 999px;
  font: 600 1.0625rem/1 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

/* The buy button: the one filled, gold thing on a page, with a soft glow of its own colour. */
.btn--primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 10px 30px -8px rgb(var(--accent-rgb) / 0.45);
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.btn--primary:hover {
  background: var(--accent-hover);
  box-shadow: 0 12px 34px -8px rgb(var(--accent-rgb) / 0.6);
}

.btn--primary:active {
  background: var(--accent-press);
  box-shadow: 0 4px 14px -6px rgb(var(--accent-rgb) / 0.5);
  transform: translateY(1px);
}

.btn--primary:focus-visible {
  outline: 3px solid var(--accent-ring);
  outline-offset: 3px;
}

.btn--ghost {
  background: transparent;
  color: inherit;
  box-shadow: inset 0 0 0 1.5px currentColor;
}

.btn[aria-disabled="true"],
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Forced colours drop the fill and the box shadows that draw the edges, so the buttons get a border there. */
@media (forced-colors: active) {
  .btn {
    border: 1px solid ButtonText;
  }
}

/* Preview banner (shown while site.preview is true) */
.preview-banner {
  position: relative;
  z-index: 60;
  margin: 0;
  padding: 8px var(--gutter);
  background: var(--space-2);
  color: var(--on-dark-muted);
  border-bottom: 1px solid var(--line-dark);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: center;
}

/* Header: transparent bar on top of the dark first screen. */
.preview-banner p {
  margin: 0;
}

.site-header {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 50;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}

.site-header__logo img {
  width: auto;
  height: 54px;
  opacity: 0.78;
  transition: opacity 0.15s ease;
}

.site-header__logo:hover img,
.site-header__logo:focus-visible img {
  opacity: 1;
}

/* The links, and the Motion button after them (templates/partials.mjs). */
.site-header__nav {
  display: flex;
  align-items: center;
  gap: clamp(8px, 2.2vw, 24px);
}

.site-header__nav a {
  color: var(--on-dark);
  font-weight: 500;
  text-decoration: none;
  padding: 10px 4px;
}

/* White as before, not the accent's hover gold. */
.site-header__nav a:hover {
  color: var(--light);
}

/* The Motion button: a quiet text button a step under the links (smaller, in the muted cream), its level in the
   links' cream; hover as the links. A click goes on to the next level (motionHead in templates/partials.mjs). The
   level shown is the one html[data-motion] names, so it reads right in the first frame; without JavaScript there is no
   level, nothing for the button to do, and it stays out. 44px tall, as a finger needs. */
.site-header__motion {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin: 0;
  padding: 0 4px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--on-dark-muted);
  font: 500 0.875rem/1 var(--font-body);
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.site-header__motion:hover {
  color: var(--light);
}

.site-header__motion-level {
  color: var(--on-dark);
}

.site-header__motion:hover .site-header__motion-level {
  color: var(--light);
}

.site-header__motion-icon {
  flex: none;
  width: 18px;
  height: 18px;
}

html:not([data-motion]) .site-header__motion,
html:not([data-motion="on"]) .site-header__motion-level[data-level="on"],
html:not([data-motion="calm"]) .site-header__motion-level[data-level="calm"],
html:not([data-motion="off"]) .site-header__motion-level[data-level="off"] {
  display: none;
}

/* Forced colours: an edge, as the buttons get one (above), so it still reads as a button. On paper it has nothing to do. */
@media (forced-colors: active) {
  .site-header__motion {
    padding: 0 8px;
    border: 1px solid ButtonText;
  }
}

@media print {
  .site-header__motion {
    display: none;
  }
}

/* The support button (supportChat in templates/partials.mjs): a glass pill bottom right on every page, above the
   content and under nothing but the chat it opens. Once the chat has loaded the button is hidden and tawk.to's own
   bubble stands there. strategy.css lifts it while the buy bar is up. Never on paper. */
.support-btn {
  position: fixed;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  z-index: 45;
  padding: 10px 18px;
  border: 1px solid rgb(var(--on-dark-rgb) / 0.4);
  border-radius: 999px;
  background: rgb(var(--night-rgb) / 0.78);
  color: rgb(var(--on-dark-rgb));
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.35);
}

.support-btn:hover {
  border-color: var(--accent);
  color: var(--accent-hover);
}

.support-btn:focus-visible {
  outline: 2px solid var(--accent-ring);
  outline-offset: 3px;
}

.support-btn:disabled {
  cursor: progress;
  opacity: 0.8;
}

.support-btn[hidden] {
  display: none;
}

@media print {
  .support-btn {
    display: none;
  }
}

@media (max-width: 600px) {
  :root {
    --header-h: 68px;
  }

  .site-header__logo img {
    height: 42px;
  }

  /* The orbit stands in for the word, which screen readers still read: the level and its icon only. */
  .site-header__motion-word {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* The narrowest phones (320 px): a little closer together, so the logo keeps its room. */
@media (max-width: 359.98px) {
  .site-header__nav {
    gap: 4px;
  }

  .site-header__motion {
    gap: 4px;
    font-size: 0.8125rem;
  }
}

/* Footer */
.site-footer {
  padding: 56px 0 32px;
  background: var(--space);
  color: var(--on-dark-muted);
  font-size: 0.9375rem;
  border-top: 1px solid var(--line-dark);
}

.site-footer__grid {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.site-footer__brand img {
  width: auto;
  height: 34px;
  margin-bottom: 12px;
}

.site-footer h2 {
  margin-bottom: 0.75em;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--on-dark);
}

.site-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer li {
  margin-bottom: 6px;
}

.site-footer a {
  color: var(--on-dark-muted);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--on-dark);
  text-decoration: underline;
}

.site-footer__risk {
  max-width: 72ch;
  margin: 40px 0 0;
  color: var(--on-dark-muted);
  font-size: 0.8125rem;
  line-height: 1.6;
}

.site-footer__bottom {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line-dark);
  font-size: 0.8125rem;
}

/* Smooth scrolling with a mouse (assets/js/smooth.js, Lenis, motion on only): its own rules from the package's
   lenis.css, the ones this site needs. Lenis drives the window's scroll, so the page keeps its height as it is. */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/* Motion off (html[data-motion], which the head script of every page sets before the first paint: the visitor's
   choice with the Motion button, else calm under the system's reduced motion, else on; assets/js/motion.js): every
   animation and transition ends at once. The scripts stop what they move themselves. Without JavaScript there is no
   level, and the system's reduced motion stills the page as it always did. Calm keeps the CSS animations that are
   slow (the sun's breathe) and has each sheet's own rules for what goes (the entrance, the cue, the arrival, the
   longer hover and focus transitions). */
html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after {
  animation-duration: 0.01ms !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion]) *,
  html:not([data-motion]) *::before,
  html:not([data-motion]) *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* Each planet's photo grade (--planet-filter): the planets' warmer tone, then the look's own lift in colour and
   brightness, so its photos follow its 3D globe, which the owner wanted stronger and brighter than the dark grade of
   the files (LOOKS in assets/js/planets3d.js, LOBBY_EXPOSURE in lobby-planets3d.js). The lift is the one that matches
   the globes on the photos' own pixels, between the lobby (where lobby.css adds its depth after it) and the buy page.
   One chain: the lobby's photos (.lobby-planet--*), the departure's copy (.lobby-fly--*), the cards of the lobby's
   list (.lobby-card--*) and the buy page (.look-*) all take it, and the buy page's globe takes the hero photo's whole
   filter (--hero-filter: Saturn's own contrast first) as its colour grade, as does the lobby's fly-over in the frames
   that hand over to that globe. Last in the
   chain comes the planet's own tone (--planet-tone, templates/appearance.mjs: a hue turn, brightness and saturation
   per strategy, set where the planet is: its lobby item, its buy page's <body>, the departure's copy), so the
   strategies that share a look still differ, and photo and globe still match. */
.look-gas,
.lobby-fly--gas,
.lobby-planet--gas,
.lobby-card--gas {
  --planet-filter: saturate(1.2) sepia(0.12) brightness(1.04) brightness(1.23);
  --hero-filter: var(--planet-filter) var(--planet-tone,);
}

.look-ringed,
.lobby-fly--ringed,
.lobby-planet--ringed,
.lobby-card--ringed {
  --planet-filter: saturate(1.2) sepia(0.12) brightness(1.04) brightness(1.13);
  --hero-filter: contrast(1.12) saturate(0.9) brightness(1.08) var(--planet-filter) var(--planet-tone,);
}

.look-rocky,
.lobby-fly--rocky,
.lobby-planet--rocky,
.lobby-card--rocky {
  --planet-filter: saturate(1.2) sepia(0.12) brightness(1.04) brightness(1.23);
  --hero-filter: var(--planet-filter) var(--planet-tone,);
}

.look-ice,
.lobby-fly--ice,
.lobby-planet--ice,
.lobby-card--ice {
  --planet-filter: saturate(1.2) sepia(0.12) brightness(1.04) saturate(1.06) brightness(1.26);
  --hero-filter: var(--planet-filter) var(--planet-tone,);
}

.look-ocean,
.lobby-fly--ocean,
.lobby-planet--ocean,
.lobby-card--ocean {
  --planet-filter: saturate(1.2) sepia(0.12) brightness(1.04) saturate(1.08) brightness(1.21);
  --hero-filter: var(--planet-filter) var(--planet-tone,);
}

/* The lobby's photos only: the lift that makes each one its globe's fallback in the lobby's own light (the planets
   where they orbit, the photos' CSS light, the globes' wrap and grade in lobby-planets3d.js), over the disc where both
   are lit, at 1440 x 900 and 390 x 844 and along the orbits: luma within about a tenth and chroma within about a fifth
   of the globe's (Earth's colour capped, its globe and photo show other faces). The photos keep more of the disc lit than a ball does, so a
   flatter Jupiter photo goes darker here and Saturn, under its ring shade, lighter. lobby.css takes it after
   --planet-filter. */
.lobby-planet--gas { --lobby-lift: saturate(1.64) brightness(0.69); }
.lobby-planet--ringed { --lobby-lift: saturate(1.19) brightness(1.44); }
.lobby-planet--rocky { --lobby-lift: saturate(1.35) brightness(1.26); }
.lobby-planet--ice { --lobby-lift: saturate(1.39) brightness(0.85); }
.lobby-planet--ocean { --lobby-lift: saturate(1.15) brightness(0.7); }