/* Product chrome — Circlets (Pentru-Mamma): you in the centre, rings by device */
html { --chrome: 1; }
.wrap > header {
  --circ-accent: var(--gold, #d4b46a);
  --circ-deep: #8a6d2f;
  --circ-sheen: rgba(255, 248, 220, 0.45);
  --circ-fill: linear-gradient(165deg, #fff6e8 0%, #e8cf98 42%, #c9a85a 100%);
  --circ-on: #1a1610;
  --circ-rings: 1;
  --circ-inset: -22%;
  --chrome-logo: calc(50px * var(--chrome));
  --chrome-brand: calc(20px * var(--chrome));
  --chrome-tag: calc(11px * var(--chrome));
  --chrome-chip: calc(40px * var(--chrome));
  --chrome-chip-fs: calc(11px * var(--chrome));
  /* Account orb must read clearly larger than the language chip (~8–12px) */
  --chrome-meter-orb: calc(52px * var(--chrome));
  --chrome-meter: calc(11px * var(--chrome));
  --chrome-dot: calc(8px * var(--chrome));
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: calc(10px * var(--chrome));
  margin-bottom: calc(12px * var(--chrome));
  min-height: calc(52px * var(--chrome));
  /* rings reach ~22% outside each orb: keep them clear of the phone's top edge */
  padding-top: calc(20px * var(--chrome));
  overflow: visible;
}
html[data-type="small"] { --chrome: 0.88; }
html[data-type="big"] { --chrome: 1; }
html[data-type="huge"] { --chrome: 1.14; }

/* Phone compact — 1 ring, tight */
@media (max-width: 359px) {
  html[data-type="small"] { --chrome: 0.8; }
  html[data-type="big"] { --chrome: 0.88; }
  html[data-type="huge"] { --chrome: 0.98; }
  .wrap > header {
    --circ-rings: 1;
    --circ-inset: -16%;
  }
  .wrap > header .brand small { display: none; }
}

/* Phone — 1 ring + faint orbit */
@media (min-width: 360px) and (max-width: 519px) {
  .wrap > header {
    --circ-rings: 1;
    --circ-inset: -22%;
  }
}

/* Phablet / large phone — 2 rings */
@media (min-width: 520px) and (max-width: 719px) {
  html[data-type="big"] { --chrome: 1.04; }
  .wrap > header {
    --circ-rings: 2;
    --circ-inset: -30%;
  }
}

/* Tablet — 2 rings + orbit spark */
@media (min-width: 720px) and (max-width: 1099px) {
  html[data-type="big"] { --chrome: 1.08; }
  html[data-type="huge"] { --chrome: 1.18; }
  .wrap > header {
    --circ-rings: 2;
    --circ-inset: -34%;
  }
}

/* Desktop — 3 rings + orbit */
@media (min-width: 1100px) {
  html[data-type="big"] { --chrome: 1.1; }
  html[data-type="huge"] { --chrome: 1.22; }
  .wrap > header {
    --circ-rings: 3;
    --circ-inset: -42%;
  }
}

/* Landscape phones — compact circlets, keep 1 ring */
@media (max-height: 480px) and (orientation: landscape) {
  html { --chrome: 0.86; }
  .wrap > header {
    --circ-rings: 1;
    --circ-inset: -14%;
    min-height: 40px;
    margin-bottom: 6px;
  }
  .wrap > header .brand small { display: none; }
}

.wrap > header .brand {
  font-size: var(--chrome-brand);
  line-height: 1.05;
  min-width: 0;
  flex: 1 1 auto;
}
.wrap > header .brand small {
  font-size: var(--chrome-tag);
  line-height: 1.2;
  margin-top: 0.12em;
}
.wrap > header .end {
  margin-left: 0;
  gap: calc(12px * var(--chrome));
  flex: 0 0 auto;
  overflow: visible;
}
.wrap > header .langmenu {
  top: calc(var(--chrome-chip) + 8px);
}
.wrap > header #accountPop {
  top: calc(var(--chrome-meter-orb) + 10px);
}

.chrome-circlet {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 50%;
  flex: 0 0 auto;
  isolation: isolate;
  box-sizing: border-box;
  overflow: visible;
  background: var(--circ-fill);
  color: var(--circ-on);
  box-shadow:
    inset 0 1px 0 var(--circ-sheen),
    inset 0 0 0 1px color-mix(in srgb, var(--circ-accent) 40%, transparent),
    0 4px 12px -4px rgba(0, 0, 0, 0.35);
}
.chrome-circlet::before {
  content: "";
  position: absolute;
  inset: var(--circ-inset);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle,
      transparent 52%,
      color-mix(in srgb, var(--circ-line, var(--circ-accent)) 34%, transparent) 56%,
      transparent 61%);
  filter: blur(0.3px);
  animation: flyleafCerchio 28s linear infinite;
}
.chrome-circlet::after {
  content: "";
  position: absolute;
  inset: calc(var(--circ-inset) - 10%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 7%, var(--bead-shine, color-mix(in srgb, var(--circ-accent) 92%, #fff)) 0 2.2%, transparent 3.2%),
    radial-gradient(circle at 84% 68%, var(--bead-plain, color-mix(in srgb, var(--circ-accent) 70%, #fff)) 0 1.5%, transparent 2.5%),
    radial-gradient(circle at 16% 74%, var(--bead-plain, color-mix(in srgb, var(--circ-deep) 80%, #fff)) 0 1.2%, transparent 2.2%);
  animation: flyleafOrbita 36s linear infinite;
}
@keyframes flyleafCerchio {
  0% { transform: rotate(0deg) scale(1); opacity: 0.42; }
  50% { opacity: 0.82; }
  100% { transform: rotate(360deg) scale(1); opacity: 0.42; }
}
@keyframes flyleafOrbita {
  to { transform: rotate(360deg); }
}
.wrap > header .chrome-circlet--account::before,
.wrap > header .chrome-circlet--account::after { animation-delay: 1.6s; }
.wrap > header .chrome-circlet--mark::after,
.wrap > header .chrome-circlet--lang::after,
.wrap > header .chrome-circlet--account::after,
#hbHelpBtn.chrome-circlet::after {
  animation-duration: 36s;
  opacity: 0.62;
}
.wrap > header .chrome-circlet--account::after { animation-duration: 44s; }

/* 2 rings */
@media (min-width: 520px) {
  .chrome-circlet::before {
    background:
      radial-gradient(circle,
        transparent 48%,
        color-mix(in srgb, var(--circ-line, var(--circ-accent)) 38%, transparent) 52%,
        transparent 56%),
      radial-gradient(circle,
        transparent 64%,
        color-mix(in srgb, var(--circ-line, var(--circ-accent)) 22%, transparent) 68%,
        transparent 73%);
  }
  .chrome-circlet::after { opacity: 0.85; }
}

/* 3 rings + stronger orbit */
@media (min-width: 1100px) {
  .chrome-circlet::before {
    background:
      radial-gradient(circle,
        transparent 42%,
        color-mix(in srgb, var(--circ-line, var(--circ-accent)) 40%, transparent) 46%,
        transparent 50%),
      radial-gradient(circle,
        transparent 58%,
        color-mix(in srgb, var(--circ-line, var(--circ-accent)) 26%, transparent) 62%,
        transparent 66%),
      radial-gradient(circle,
        transparent 74%,
        color-mix(in srgb, var(--circ-line, var(--circ-accent)) 16%, transparent) 78%,
        transparent 82%);
  }
  .chrome-circlet::after {
    opacity: 1;
    inset: calc(var(--circ-inset) - 12%);
    background:
      radial-gradient(circle at 50% 6%, var(--bead-shine, color-mix(in srgb, var(--circ-accent) 92%, #fff)) 0 1.8%, transparent 2.8%),
      radial-gradient(circle at 86% 62%, var(--bead-plain, color-mix(in srgb, var(--circ-accent) 75%, #fff)) 0 1.3%, transparent 2.2%),
      radial-gradient(circle at 18% 78%, var(--bead-plain, color-mix(in srgb, var(--circ-deep) 80%, #fff)) 0 1.1%, transparent 2%),
      radial-gradient(circle at 72% 22%, var(--bead-plain, color-mix(in srgb, var(--circ-accent) 55%, #fff)) 0 0.9%, transparent 1.7%);
    filter: drop-shadow(0 0 3px color-mix(in srgb, var(--circ-accent) 40%, transparent));
  }
}

.chrome-circlet--mark {
  width: var(--chrome-logo);
  height: var(--chrome-logo);
  padding: 0;
}
.chrome-circlet--mark img {
  width: 86%;
  height: 86%;
  border-radius: 50%;
  position: relative;
  z-index: 1;
  display: block;
}

.wrap > header .langchip.chrome-circlet--lang,
.wrap > header button#langChip.langchip,
.wrap > header #langChip.langchip {
  width: var(--chrome-chip);
  height: var(--chrome-chip);
  min-height: var(--chrome-chip);
  max-width: none;
  padding: 0;
  font-size: var(--chrome-chip-fs);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--circ-on);
  background: var(--circ-fill);
  border: 0;
  z-index: 1;
}

.wrap > header .meter.chrome-circlet--account {
  width: var(--chrome-meter-orb);
  height: var(--chrome-meter-orb);
  margin-left: 0;
  font-size: var(--chrome-meter);
  gap: 0;
  color: var(--circ-on);
  cursor: pointer;
}
.wrap > header .meter.chrome-circlet--account .pagemark {
  display: none;
}
.wrap > header .meter.chrome-circlet--account b,
.wrap > header .meter.chrome-circlet--account #meter,
.wrap > header #meter.paid {
  position: relative;
  z-index: 1;
  font-size: var(--chrome-meter);
  min-width: 0;
  color: var(--circ-on);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  max-width: 90%;
}
.wrap > header #accountBtn.chrome-circlet--account {
  z-index: 5;
}
.wrap > header .statusdot {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 8;
  width: var(--chrome-dot);
  height: var(--chrome-dot);
  margin-right: 0;
}
.wrap > header .statusdot::after {
  inset: calc(-8px * var(--chrome));
}

html[data-light="day"] .chrome-circlet {
  --circ-fill: linear-gradient(165deg, #fffdf6 0%, #f0d7a4 48%, #c4964e 100%);
  --circ-on: #1a1610;
}

/* Left: clear sphere, leaf turning slowly in 3D */
.wrap > header .chrome-circlet--mark {
  background: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    0 6px 14px -8px rgba(0, 0, 0, 0.35);
  perspective: 140px;
}
.wrap > header .chrome-circlet--mark::after {
  animation-duration: 48s;
}
.wrap > header .chrome-circlet--mark .chrome-mark-leaf {
  width: 90%;
  height: 90%;
  border-radius: 0;
  object-fit: contain;
  position: relative;
  z-index: 1;
  transform-style: preserve-3d;
  transform-origin: 50% 62%;
  animation: flyleafLeafDrift 32s ease-in-out infinite;
  filter: drop-shadow(1px 2px 1px rgba(8, 14, 8, 0.28));
}
@keyframes flyleafLeafDrift {
  0%, 100% { transform: rotate(0.8deg); }
  50% { transform: rotate(-0.8deg); }
}

/* Right: glass orbs */
.wrap > header button#langChip.chrome-circlet--lang,
.wrap > header .chrome-circlet--lang,
.wrap > header #accountBtn.chrome-circlet--account,
.wrap > header .chrome-circlet--account {
  --circ-on: #f7f2e6;
  background:
    radial-gradient(42% 36% at 32% 26%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 70%),
    linear-gradient(168deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03) 42%, rgba(255, 255, 255, 0.1));
  -webkit-backdrop-filter: blur(6px) saturate(1.35);
  backdrop-filter: blur(6px) saturate(1.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -8px 10px rgba(0, 0, 0, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.55),
    0 8px 16px -10px rgba(0, 0, 0, 0.5);
  color: #f7f2e6;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
}
.wrap > header .chrome-circlet--mark,
.wrap > header .chrome-circlet--lang,
.wrap > header .chrome-circlet--account,
#hbHelpBtn.chrome-circlet {
  overflow: visible;
}
.wrap > header .chrome-circlet--mark,
.wrap > header .chrome-circlet--lang,
.wrap > header .chrome-circlet--account,
#hbHelpBtn.chrome-circlet {
  --circ-line: #d5dee8;
  --bead-shine: #fff;
  --bead-plain: rgba(226, 230, 236, 0.38);
}
.wrap > header .chrome-circlet--mark::after,
.wrap > header .chrome-circlet--lang::after,
.wrap > header .chrome-circlet--account::after,
#hbHelpBtn.chrome-circlet::after {
  filter: none;
}
/* Smooth vector rings. Size is a percent of the ball, so they follow type size. */
.orbit-svg {
  position: absolute;
  left: -34%;
  top: -34%;
  width: 168%;
  height: 168%;
  overflow: visible;
  pointer-events: none;
  z-index: 4;
  shape-rendering: geometricPrecision;
  animation: flyleafOrbita 36s linear infinite;
}
.orbit-svg--mark { animation-duration: 48s; }
.orbit-svg--lang { animation-duration: 36s; }
.orbit-svg--account { animation-duration: 44s; animation-delay: 1.6s; }
.orbit-svg--help { animation-duration: 40s; animation-delay: 8s; }
.orbit-line {
  fill: none;
  stroke: rgba(236, 242, 248, 0.92);
  stroke-width: 1.7%;
}
.orbit-line--out {
  stroke: rgba(236, 242, 248, 0.5);
  stroke-width: 1.25%;
}
.orbit-bead {
  animation: orbitBead 4.8s ease-in-out infinite;
}
@keyframes orbitBead {
  0%, 100% { opacity: 0.78; }
  50% { opacity: 1; }
}
.wrap > header .chrome-circlet--lang::after { animation-duration: 36s; }
.wrap > header .chrome-circlet--account::after { animation-duration: 44s; }
#hbHelpBtn.chrome-circlet {
  width: calc(48px * var(--chrome, 1));
  height: calc(48px * var(--chrome, 1));
  min-height: calc(48px * var(--chrome, 1));
}
#hbHelpBtn.chrome-circlet::after { animation-duration: 40s; }
#hbHelpBtn .hb-q { font-size: calc(26px * var(--chrome, 1)); }
/* Account: keep glass rim / inset / blur, drop only the face specular at 32% 26%. */
.wrap > header #accountBtn.chrome-circlet--account,
.wrap > header .chrome-circlet--account {
  background:
    linear-gradient(168deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03) 42%, rgba(255, 255, 255, 0.1));
}
html[data-light="day"] .wrap > header .chrome-circlet--mark {
  background: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 0 0 1px rgba(90, 70, 30, 0.28);
}
html[data-light="day"] .wrap > header button#langChip.chrome-circlet--lang,
html[data-light="day"] .wrap > header .chrome-circlet--lang,
html[data-light="day"] .wrap > header .chrome-circlet--account {
  --circ-on: #f7f2e6;
  color: #f7f2e6;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
}

/* Tiny language orb: Earth. Big account orb: sun that becomes the moon.
   Clip wrappers must stay circular — chrome-circlet is overflow:visible for orbit rings,
   so the double-wide sun|moon strip and Earth map must never paint outside the glass. */
.sky-earth,
.sky-lum {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  clip-path: circle(50%);
  -webkit-clip-path: circle(50%);
  isolation: isolate;
  contain: paint;
}
.sky-earth {
  inset: 11%;
}
.sky-lum {
  inset: 7%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.28);
  background: radial-gradient(circle at 50% 62%, #0a101c 0%, #04060c 72%, #020308 100%);
}
/* Clip shell for the roll strip (same circle as .sky-lum; belt against transform paint leaks). */
.sky-lum-clip,
.sky-earth-clip {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  clip-path: circle(50%);
  -webkit-clip-path: circle(50%);
  isolation: isolate;
}
/* Double-wide strip: sun | moon — JS translateX rolls across the day. */
.sky-lum-ball {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 200%;
  display: flex;
  flex-direction: row;
  transform: translate3d(-50%, 0, 0);
}
.sky-earth-spin,
.sky-earth-night,
.sky-earth-map,
.sky-earth-lights,
.sky-earth-atm,
.sky-earth-shade,
.sky-sun-face,
.sky-moon-face,
.sky-moon-shade {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.sky-earth-night {
  background:
    radial-gradient(circle at 42% 40%, #163052 0%, #0a1830 48%, #03060d 78%);
}
.sky-earth-map {
  background:
    radial-gradient(10px 7px at 16% 44%, #4aad6e 38%, transparent 72%),
    radial-gradient(12px 8px at 32% 38%, #348a58 40%, transparent 74%),
    radial-gradient(8px 9px at 48% 56%, #3a9660 38%, transparent 72%),
    radial-gradient(11px 7px at 68% 40%, #2f7f52 40%, transparent 74%),
    radial-gradient(7px 6px at 84% 58%, #449a66 38%, transparent 72%),
    radial-gradient(6px 5px at 56% 30%, #2a6e48 36%, transparent 70%),
    radial-gradient(5px 8px at 24% 62%, #2e8050 34%, transparent 70%),
    linear-gradient(180deg, #2a8ec4 0%, #156090 42%, #0a3a68 100%);
  background-size: 220% 100%;
  background-position: 0 0;
  /* Mask + opacity set inline by flyleaf-sky.js (no var() inside gradients). */
  opacity: 1;
}
.sky-earth-lights {
  background:
    radial-gradient(3.2px 3.2px at 16% 48%, #fff6c4 0 38%, rgba(255, 196, 80, 0.9) 52%, transparent 78%),
    radial-gradient(2.4px 2.4px at 22% 42%, #ffe08a 0 42%, transparent 76%),
    radial-gradient(2.2px 2.2px at 30% 44%, #fff6d0 0 42%, transparent 76%),
    radial-gradient(3.6px 3.6px at 36% 38%, #fff1b0 0 34%, rgba(255, 186, 60, 0.95) 50%, transparent 80%),
    radial-gradient(2.6px 2.6px at 48% 56%, #fff4c0 0 40%, transparent 76%),
    radial-gradient(3px 3px at 70% 40%, #ffe7a0 0 38%, rgba(255, 200, 90, 0.85) 54%, transparent 78%),
    radial-gradient(2.2px 2.2px at 76% 46%, #fff6c8 0 42%, transparent 76%),
    radial-gradient(3.4px 3.4px at 86% 58%, #ffd98a 0 36%, rgba(255, 190, 70, 0.9) 52%, transparent 78%),
    radial-gradient(2px 2px at 42% 48%, #ffe9a8 0 40%, transparent 72%),
    radial-gradient(2.8px 2.8px at 58% 36%, #fff0b8 0 36%, rgba(255, 210, 100, 0.8) 50%, transparent 76%);
  background-size: 220% 100%;
  background-position: 0 0;
  mix-blend-mode: screen;
  /* Mask + opacity set inline by flyleaf-sky.js from device clock. */
  opacity: 0.55;
}
.sky-earth-atm {
  background:
    radial-gradient(circle at 50% 50%, transparent 58%, rgba(120, 190, 255, 0.22) 72%, transparent 88%);
  mix-blend-mode: screen;
  opacity: calc(0.35 + var(--sky-day, 0.5) * 0.4);
  pointer-events: none;
}
.sky-earth-shade {
  /* Directional shade painted inline by flyleaf-sky.js — avoid var() in gradients. */
  background: rgba(2, 6, 18, 0.35);
}
.sky-earth::after,
.sky-lum::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
}
.sky-earth::after {
  background: radial-gradient(40% 32% at 30% 22%, rgba(255, 255, 255, 0.42), transparent 70%);
  opacity: calc(0.22 + var(--sky-day, 0.5) * 0.78);
}
/* Soft warm glass sheen — not a white coin / specular blob on the sun/moon face. */
.sky-lum::after {
  background: radial-gradient(36% 28% at 28% 20%, rgba(255, 210, 140, 0.16), transparent 72%);
  mix-blend-mode: soft-light;
  opacity: calc(0.12 + var(--sky-account-day, 0.5) * 0.5);
}
.wrap > header .sky-code {
  position: relative;
  z-index: 2;
}
/* Dual face strip: sun left, moon right. Cells stay rectangular; parent circle clips. No filter. */
.sky-lum-sun,
.sky-lum-moon {
  position: relative;
  flex: 0 0 50%;
  width: 50%;
  height: 100%;
  opacity: 1;
  overflow: hidden;
  border-radius: 0;
}
.sky-sun-aura,
.sky-moon-aura,
.sky-sun-body,
.sky-moon-body {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.sky-sun-aura {
  width: 99%;
  height: 99%;
  background:
    radial-gradient(circle, rgba(255, 200, 90, 0.5) 0%, rgba(255, 140, 40, 0.18) 42%, transparent 72%);
  z-index: 0;
}
.sky-sun-body {
  width: 94%;
  height: 94%;
  z-index: 1;
  background:
    radial-gradient(circle at 38% 32%, #ffe08a 0%, #ffc24a 22%, #f09218 48%, #c85808 72%, #6a2800 100%);
  box-shadow:
    0 0 4px rgba(255, 180, 60, 0.7),
    0 0 8px rgba(255, 140, 30, 0.35),
    inset 0 -2px 4px rgba(80, 20, 0, 0.35),
    inset 0 1px 2px rgba(255, 240, 180, 0.35);
  overflow: hidden;
}
.sky-sun-face {
  background:
    radial-gradient(7px 5px at 18% 48%, #a83800 42%, transparent 70%),
    radial-gradient(9px 6px at 34% 36%, #d07010 40%, transparent 72%),
    radial-gradient(6px 7px at 52% 56%, #8f2800 44%, transparent 70%),
    radial-gradient(8px 5px at 70% 40%, #c45a08 38%, transparent 72%),
    radial-gradient(5px 4px at 84% 62%, #a84000 42%, transparent 70%),
    radial-gradient(4px 4px at 46% 28%, #b85000 36%, transparent 68%);
  background-size: 220% 100%;
  background-position: 0 0;
  opacity: 0.55;
  mix-blend-mode: multiply;
  animation: skyEarthTurn 42s linear infinite;
}
.sky-moon-aura {
  width: 99%;
  height: 99%;
  background:
    radial-gradient(circle, rgba(180, 200, 230, 0.28) 0%, rgba(100, 120, 160, 0.1) 44%, transparent 72%);
  z-index: 0;
}
.sky-moon-body {
  width: 94%;
  height: 94%;
  z-index: 1;
  background:
    radial-gradient(circle at 36% 30%, #d0d8e4 0%, #9aa6b8 28%, #6a7688 58%, #2e3848 88%, #0c1018 100%);
  box-shadow:
    0 0 4px rgba(160, 180, 210, 0.3),
    0 0 8px rgba(80, 100, 140, 0.18),
    inset 0 -2px 5px rgba(0, 0, 0, 0.45),
    inset 0 1px 2px rgba(220, 230, 245, 0.25);
  overflow: hidden;
}
.sky-moon-face {
  background:
    radial-gradient(11px 8px at 24% 40%, #121820 55%, transparent 76%),
    radial-gradient(9px 7px at 44% 58%, #182028 52%, transparent 74%),
    radial-gradient(8px 9px at 62% 32%, #1a2430 50%, transparent 74%),
    radial-gradient(10px 6px at 76% 54%, #0e141c 54%, transparent 76%),
    radial-gradient(6px 6px at 50% 46%, #243040 46%, transparent 72%),
    radial-gradient(5px 4px at 34% 28%, #1c2834 42%, transparent 70%);
  background-size: 220% 100%;
  background-position: 0 0;
  opacity: 0.85;
  animation: skyEarthTurn 56s linear infinite;
}
.sky-moon-shade {
  background: linear-gradient(90deg,
    rgba(4, 8, 16, 0.92) 0%,
    rgba(4, 8, 16, 0.78) 40%,
    rgba(4, 8, 16, 0) 58%,
    transparent 100%);
  mix-blend-mode: multiply;
  z-index: 2;
}
html[data-sky="sleep"] .sky-moon-face {
  animation: skyEarthTurn 56s linear infinite;
}
@keyframes skyEarthTurn {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.sky-earth-spin {
  animation: skyEarthTurn 48s linear infinite;
  transform-origin: 50% 50%;
}
@keyframes skyFaceDrift {
  to { background-position: -220% 0; }
}
@keyframes skyLumSheen {
  0%, 100% { transform: translate(-2%, -1%); }
  50% { transform: translate(3%, 2%); }
}
@keyframes skyAuraPulse {
  0%, 100% { opacity: 0.72; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
}
@keyframes skySleep {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.88; }
}
/* Study lights must not override Earth day/night (clock-driven inline opacity).
   Black/dark only lift face ink so night Earth / moon / rings still read on #000 —
   never pause circlet motion and never opacity:0. */
html[data-light="black"] .sky-earth-night,
html[data-light="dark"] .sky-earth-night {
  background:
    radial-gradient(circle at 42% 40%, #2a5478 0%, #163a58 48%, #0e2840 78%);
}
html[data-light="night"] .sky-earth-night {
  background:
    radial-gradient(circle at 42% 40%, #1c3c5c 0%, #0e2440 48%, #081828 78%);
}
html[data-light="black"] .sky-earth,
html[data-light="dark"] .sky-earth {
  box-shadow: inset 0 0 0 1px rgba(140, 190, 230, 0.28);
}
html[data-light="black"] .sky-earth-lights,
html[data-light="dark"] .sky-earth-lights {
  filter: brightness(1.2);
}
html[data-light="black"] .sky-lum,
html[data-light="dark"] .sky-lum {
  box-shadow: inset 0 0 0 1px rgba(180, 200, 230, 0.32);
}
html[data-light="black"] .sky-moon-body,
html[data-light="dark"] .sky-moon-body {
  background:
    radial-gradient(circle at 36% 30%, #d8e0ec 0%, #a8b4c4 28%, #7a8698 58%, #3a4658 88%, #141820 100%);
}
html[data-light="black"] .wrap > header .chrome-circlet--mark::before,
html[data-light="dark"] .wrap > header .chrome-circlet--mark::before {
  filter: blur(0.3px) brightness(1.25);
}
html[data-light="black"] .wrap > header .chrome-circlet--mark::after,
html[data-light="dark"] .wrap > header .chrome-circlet--mark::after {
  opacity: 0.72;
  filter: none;
}
html[data-light="black"] .wrap > header .chrome-circlet--lang::after,
html[data-light="black"] .wrap > header .chrome-circlet--account::after,
html[data-light="dark"] .wrap > header .chrome-circlet--lang::after,
html[data-light="dark"] .wrap > header .chrome-circlet--account::after {
  opacity: 0.88;
}
html[data-light="black"] .wrap > header .chrome-circlet--lang,
html[data-light="black"] .wrap > header .chrome-circlet--account,
html[data-light="dark"] .wrap > header .chrome-circlet--lang,
html[data-light="dark"] .wrap > header .chrome-circlet--account {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -8px 10px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(200, 230, 255, 0.38),
    0 8px 16px -10px rgba(0, 0, 0, 0.55);
}
html[data-light="black"] #hbHelpBtn.chrome-circlet::after,
html[data-light="dark"] #hbHelpBtn.chrome-circlet::after {
  opacity: 0.88;
}

.wrap > header .sky-stars {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.wrap > header .chrome-circlet--mark,
.wrap > header .brand {
  position: relative;
  z-index: 1;
}
.wrap > header .end {
  z-index: 1;
}
.sky-star {
  position: absolute;
  width: 0;
  height: 0;
}
.sky-star-bit {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  background: none;
  border-radius: 0;
  clip-path: none;
  overflow: visible;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: skyStarLife var(--sd, 36s) linear infinite;
  animation-delay: var(--sp, 0s);
}
.sky-star-bit svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
@keyframes skyStarLife {
  0%, 100% {
    opacity: 0.74;
    transform: translate(-50%, -50%) translate3d(0, 0, 0) scale(0.96);
  }
  27% {
    opacity: 0.9;
    transform: translate(-50%, -50%) translate3d(var(--ax), var(--ay), 0) scale(1.03);
  }
  54% {
    opacity: 1;
    transform: translate(-50%, -50%) translate3d(var(--bx), var(--by), 0) scale(0.98);
  }
  79% {
    opacity: 0.82;
    transform: translate(-50%, -50%) translate3d(var(--cx), var(--cy), 0) scale(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chrome-circlet::before,
  .chrome-circlet::after,
  .wrap > header .chrome-circlet--mark .chrome-mark-leaf,
  .sky-sun-face,
  .sky-moon-face,
  .sky-earth-spin,
  .sky-sun-body,
  .sky-moon-body,
  .sky-lum::after,
  .sky-sun-aura,
  .sky-moon-aura,
  html[data-sky="sleep"] .sky-moon-body,
  .sky-star-bit,
  .orbit-svg,
  .orbit-spin,
  .orbit-bead {
    animation: none;
  }
  .sky-star-bit { opacity: 0.9; transform: translate(-50%, -50%); }
  .chrome-circlet::after { opacity: 0.45; }
  .sky-sun-aura,
  .sky-moon-aura { opacity: 0.75; transform: translate(-50%, -50%); }
  .sky-lum-ball { transition: none; }
}