/* Shared ambient scene. The reviewed blog theme does not opt into this layer. */
body.ambient-page {
  position: relative;
  isolation: isolate;
  background: #f7f8ff !important;
  color: #35446e;
}
body.ambient-page::before,
body.ambient-page::after,
body.ambient-page .hero-halo,
body.ambient-page .hero::before,
body.ambient-page .hero::after { display: none !important; }
body.ambient-page > :not(#nq-ambient-scene) { position: relative; z-index: 1; }

#nq-ambient-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
#nq-ambient-scene[hidden] { display: none !important; }
#nq-ambient-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: .86;
}
.ambient-wash, .ambient-orb {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  will-change: transform;
}
.ambient-wash {
  inset: -18%;
  background:
    radial-gradient(ellipse at 8% 4%, rgba(247,125,170,.18), transparent 34%),
    radial-gradient(ellipse at 92% 4%, rgba(122,162,247,.24), transparent 36%),
    linear-gradient(135deg, #fcfcff 0%, #f7f3ff 48%, #eef7ff 100%);
  animation: ambient-sky-drift 28s ease-in-out infinite alternate;
}
.ambient-orb {
  width: min(44vw,40rem);
  height: min(44vw,40rem);
  filter: blur(38px);
  opacity: .32;
  mix-blend-mode: multiply;
}
.ambient-orb.one {
  top: -14rem; left: -10rem;
  background: radial-gradient(circle, rgba(108,154,255,.54), transparent 69%);
  animation: ambient-orb-one 23s ease-in-out infinite alternate;
}
.ambient-orb.two {
  right: -12rem; bottom: -16rem;
  background: radial-gradient(circle, rgba(245,130,191,.46), transparent 68%);
  animation: ambient-orb-two 27s ease-in-out infinite alternate;
}

/* Two intersecting ellipses, like the reference: a dashed violet orbit and a
   wider pink orbit, turning continuously in opposite directions. */
.ambient-orbits {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform: translate3d(calc(var(--ambient-pointer-x,0) * -12px), calc(var(--ambient-pointer-y,0) * -8px), 0);
}
.ambient-ring {
  position: absolute;
  left: 50%;
  top: 54%;
  width: min(112vw,1600px);
  aspect-ratio: 16 / 9;
  box-sizing: border-box;
  border: 1px dashed rgba(161,140,209,.24);
  border-radius: 50%;
  transform: translate(-50%,-50%) rotate(-24deg);
  animation: ambient-orbit-turn 60s linear infinite;
  will-change: transform;
}
.ambient-ring.two {
  width: min(150vw,2160px);
  border: 1px solid rgba(225,133,169,.18);
  animation-duration: 80s;
  animation-direction: reverse;
  animation-delay: -18s;
}
@keyframes ambient-orbit-turn {
  from { transform: translate(-50%,-50%) rotate(-24deg); }
  to { transform: translate(-50%,-50%) rotate(336deg); }
}
@keyframes ambient-sky-drift {
  from { transform: translate3d(-1.5%,-1%,0) scale(1.02); }
  to { transform: translate3d(1.5%,1.3%,0) scale(1.08); }
}
@keyframes ambient-orb-one {
  from { transform: translate3d(0,0,0) scale(.9); }
  to { transform: translate3d(20vw,19vh,0) scale(1.18); }
}
@keyframes ambient-orb-two {
  from { transform: translate3d(0,0,0) scale(1.05); }
  to { transform: translate3d(-18vw,-22vh,0) scale(.82); }
}

.ambient-page .hero, .ambient-page .hero-copy { background: transparent !important; }
.ambient-page .hero h1,
.ambient-page .hero .hero-desc,
.ambient-page .hero .eyebrow,
.ambient-page .section-heading,
.ambient-page .section-heading > span { text-shadow: none !important; }
.ambient-page .hero h1 {
  transform: translate3d(calc(var(--ambient-pointer-x,0) * 10px),calc(var(--ambient-pointer-y,0) * 7px),0);
  transition: transform .25s ease-out;
}
.ambient-page .hero .headline-line { display: block; translate: none !important; }
.ambient-page .hero h1,
.ambient-page .hero h1 .headline-line {
  color: rgba(18,20,27,.92) !important;
  -webkit-text-stroke: 0 !important;
}
.ambient-page .hero h1 .headline-accent {
  background: linear-gradient(100deg,rgba(67,160,237,.88),rgba(128,143,231,.84) 48%,rgba(221,117,179,.82));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ambient-page .hero .hero-desc { color: rgba(73,88,124,.72) !important; }
.ambient-page .hero .eyebrow { color: rgba(87,106,157,.66) !important; }

html[data-theme="dark"] body.ambient-page { background: #080a11 !important; color: #edf1ff; }
html[data-theme="dark"] .ambient-wash {
  background:
    radial-gradient(ellipse at 8% 4%,rgba(79,132,255,.29),transparent 36%),
    radial-gradient(ellipse at 92% 4%,rgba(231,107,188,.25),transparent 34%),
    linear-gradient(180deg,#080a11 0%,#0b0c10 100%);
  animation-duration: 34s;
}
html[data-theme="dark"] .ambient-orb { mix-blend-mode: screen; opacity: .25; }
html[data-theme="dark"] .ambient-orb.one { background: radial-gradient(circle,rgba(79,132,255,.42),transparent 69%); }
html[data-theme="dark"] .ambient-orb.two { background: radial-gradient(circle,rgba(231,107,188,.36),transparent 68%); }
html[data-theme="dark"] .ambient-ring { border-color: rgba(167,151,235,.30); }
html[data-theme="dark"] .ambient-ring.two { border-color: rgba(231,142,190,.23); }
html[data-theme="dark"] .ambient-page .hero h1,
html[data-theme="dark"] .ambient-page .hero h1 .headline-line {
  color: rgba(237,241,255,.88) !important;
  -webkit-text-stroke: 0 !important;
}
html[data-theme="dark"] .ambient-page .hero h1 .headline-line {
  text-shadow: 0 0 18px rgba(141,157,244,.22), 0 0 36px rgba(141,157,244,.08) !important;
}
html[data-theme="dark"] .ambient-page .hero h1 .headline-accent {
  background: linear-gradient(100deg,rgba(101,184,250,.88),rgba(174,145,241,.84) 54%,rgba(242,137,200,.82));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none !important;
  filter: drop-shadow(0 0 12px rgba(143,150,247,.24));
}
html[data-theme="dark"] .ambient-page .hero .hero-desc { color: rgba(190,201,231,.7) !important; }
html[data-theme="dark"] .ambient-page .hero .eyebrow { color: rgba(177,191,230,.62) !important; }

body.ambient-page:has(#motion-pause:checked,#private-motion-pause:checked) #nq-ambient-canvas { opacity: .72; }
body.ambient-page:has(#motion-pause:checked,#private-motion-pause:checked) :is(.ambient-wash,.ambient-orb,.ambient-ring) {
  animation-play-state: paused !important;
}
@media (max-width:650px) {
  .ambient-ring { width: 160vw; }
  .ambient-ring.two { width: 210vw; }
}
@media (prefers-reduced-motion:reduce) {
  .ambient-wash, .ambient-orb, .ambient-ring { animation: none !important; }
  .ambient-page .hero h1, .ambient-orbits { transform: none !important; }
}

/* BongoCat-inspired night headline: clean white first line and a shared soft glow. */
html[data-theme="dark"] .ambient-page .hero h1 .headline-line {
  text-shadow:
    0 0 8px rgba(255,255,255,.28),
    0 0 24px rgba(169,183,255,.22),
    0 0 52px rgba(92,122,255,.14) !important;
}
html[data-theme="dark"] .ambient-page .hero h1 .headline-line:first-child {
  color: rgba(250,251,255,.98) !important;
}
html[data-theme="dark"] .ambient-page .hero h1 .headline-accent {
  filter:
    drop-shadow(0 0 8px rgba(112,181,255,.52))
    drop-shadow(0 0 22px rgba(185,125,248,.34))
    drop-shadow(0 0 42px rgba(230,119,196,.16));
}

html[data-theme="dark"] .ambient-page .hero h1 .headline-line {
  opacity: .88;
}

html[data-theme="dark"] .ambient-page .hero h1 .headline-line:first-child {
  color: rgba(250,251,255,.90) !important;
}
html[data-theme="dark"] .ambient-page .hero h1 .headline-accent {
  background: linear-gradient(100deg,rgba(101,184,250,.78),rgba(174,145,241,.74) 54%,rgba(242,137,200,.72));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Keep the two-line scroll split active above the scene cleanup rules. */
.ambient-page .hero .headline-line {
  translate: calc(var(--hero-scroll,0) * -180px) calc(var(--hero-scroll,0) * 20px) !important;
}
.ambient-page .hero .headline-accent {
  translate: calc(var(--hero-scroll,0) * 180px) calc(var(--hero-scroll,0) * 12px) !important;
}
.ambient-page .hero-actions .button,
.ambient-page .scene-note {
  border-radius: 999px !important;
  min-height: 52px;
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  box-shadow: inset 0 1px rgba(255,255,255,.76), 0 12px 28px rgba(88,105,161,.16);
}
.ambient-page .hero-actions .button.primary {
  background: linear-gradient(105deg,rgba(247,125,170,.86),rgba(227,139,237,.78) 45%,rgba(122,162,247,.86));
  border-color: rgba(255,255,255,.7);
}
.ambient-page .hero-actions .button.subtle,
.ambient-page .scene-note {
  background: rgba(255,255,255,.66);
  border-color: rgba(255,255,255,.82);
}
html[data-theme="dark"] .ambient-page .hero-actions .button.primary {
  background: linear-gradient(105deg,rgba(247,125,170,.78),rgba(198,122,234,.72) 45%,rgba(102,145,247,.78));
}
html[data-theme="dark"] .ambient-page .hero-actions .button.subtle,
html[data-theme="dark"] .ambient-page .scene-note {
  background: rgba(35,43,70,.58);
  border-color: rgba(130,148,207,.56);
  box-shadow: inset 0 1px rgba(255,255,255,.14), 0 14px 32px rgba(0,0,0,.22);
}
.ambient-page .scene-note {
  width: min(30rem,calc(100% - 2rem)) !important;
  max-width: none !important;
  padding: .8rem 1.2rem;
  justify-content: center !important;
}
@media (max-width:650px) {
  .ambient-page .scene-note { width: calc(100% - 1.4rem) !important; }
}
@media (prefers-reduced-motion:reduce) {
  .ambient-page .hero .headline-line,
  .ambient-page .hero .headline-accent { translate: none !important; }
}
.ambient-page:has(#motion-pause:checked) .hero .headline-line,
.ambient-page:has(#motion-pause:checked) .hero .headline-accent {
  translate: none !important;
}

/* Match the ebook pill to the combined hero action width. */
.ambient-page .scene-note { width: min(20rem,calc(100% - 2rem)) !important; }
@media (max-width:650px) { .ambient-page .scene-note { width: calc(100% - 1.4rem) !important; } }

/* BongoCat-style floating glass header: one centered pill with separated left, center and right zones. */
.ambient-page .header {
  position: fixed !important;
  top: 1rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(1440px, calc(100% - clamp(2rem, 5vw, 8rem))) !important;
  min-height: 4.7rem;
  margin: 0 !important;
  padding: .4rem .55rem !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .3rem;
  border: 1px solid rgba(255,255,255,.78) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.62) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.96), 0 18px 48px rgba(74,91,151,.18) !important;
  backdrop-filter: blur(24px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.25) !important;
  transition: width .7s cubic-bezier(.22,1,.36,1), top .55s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, background .35s ease !important;
}
.ambient-page .header > .brand,
.ambient-page .header > .header-nav,
.ambient-page .header > .header-tools {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.ambient-page .header > .brand { justify-self: start; }
.ambient-page .header > .header-nav { justify-self: center; }
.ambient-page .header > .header-tools { justify-self: end; }
@media (hover:hover) and (pointer:fine) {
  .ambient-page .header:hover { box-shadow: inset 0 1px rgba(255,255,255,.98), 0 22px 56px rgba(74,91,151,.24) !important; }
}
html[data-theme="dark"] .ambient-page .header {
  border-color: rgba(132,150,218,.42) !important;
  background: rgba(14,19,35,.72) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.13), 0 18px 48px rgba(0,0,0,.28) !important;
}
html[data-theme="dark"] .ambient-page .header:hover {
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 22px 56px rgba(0,0,0,.36) !important;
}
@media (max-width:800px) {
  .ambient-page .header {
    position: sticky !important;
    top: .5rem !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    min-height: auto;
    border-radius: 1.5rem !important;
    padding: .3rem .4rem !important;
    grid-template-columns: 1fr auto;
    flex-wrap: wrap;
  }
  .ambient-page .header > .header-nav { grid-column: 1 / -1; width: 100%; justify-self: stretch; }
}

/* Scroll-separated header zones return to the compact BongoCat-like interaction. */
.ambient-page .header > .brand,
.ambient-page .header > .header-tools { transition:transform .55s cubic-bezier(.22,1,.36,1) !important; }
.ambient-page .header:not(.is-scrolled) > .brand { transform:translateX(-10px); }
.ambient-page .header:not(.is-scrolled) > .header-tools { transform:translateX(10px); }
.ambient-page .header.is-scrolled { width:min(1120px,calc(100% - 3rem)) !important; top:.85rem !important; }
.ambient-page .header.is-scrolled > .brand,
.ambient-page .header.is-scrolled > .header-tools { transform:none; }
.ambient-page .header .header-action { border-radius:999px !important; min-height:44px; padding:.55rem 1rem; box-shadow:0 10px 24px rgba(122,162,247,.24); }
html[data-theme="dark"] .ambient-page .header .header-action { box-shadow:0 12px 28px rgba(0,0,0,.28); }
@media (max-width:800px) {
  .ambient-page .header:not(.is-scrolled) > .brand,
  .ambient-page .header:not(.is-scrolled) > .header-tools { transform:none; }
}

/* Refined frosted glass chrome: visible page color, soft sheen and layered depth. */
.ambient-page .header {
  isolation: isolate;
  overflow: hidden;
  border-color: rgba(255,255,255,.86) !important;
  background: linear-gradient(112deg,rgba(255,255,255,.66),rgba(255,255,255,.43) 46%,rgba(255,255,255,.58)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -1px 0 rgba(255,255,255,.34),
    0 1px 2px rgba(255,255,255,.55),
    0 18px 46px rgba(80,96,152,.16) !important;
  backdrop-filter: blur(30px) saturate(1.45) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.45) !important;
}
.ambient-page .header::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(105deg,rgba(255,255,255,.22),transparent 34%,rgba(255,255,255,.11) 68%,rgba(255,255,255,.2));
  opacity: .9;
}
.ambient-page .header > * { position: relative; z-index: 1; }
.ambient-page .header .header-action {
  border: 1px solid rgba(255,255,255,.62) !important;
  background: linear-gradient(110deg,rgba(247,125,170,.84),rgba(226,135,237,.79) 46%,rgba(122,162,247,.84)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.58), 0 8px 22px rgba(122,162,247,.22) !important;
}
.ambient-page .header .header-action:hover {
  filter: saturate(1.08) brightness(1.04);
  box-shadow: inset 0 1px rgba(255,255,255,.76), 0 11px 28px rgba(122,162,247,.3) !important;
}
html[data-theme="dark"] .ambient-page .header {
  border-color: rgba(157,177,239,.42) !important;
  background: linear-gradient(112deg,rgba(28,37,63,.78),rgba(12,17,31,.58) 46%,rgba(39,23,54,.72)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(94,119,188,.16),
    0 1px 2px rgba(0,0,0,.24),
    0 20px 50px rgba(0,0,0,.3) !important;
  backdrop-filter: blur(30px) saturate(1.32) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.32) !important;
}
html[data-theme="dark"] .ambient-page .header::before {
  background: linear-gradient(105deg,rgba(154,182,255,.13),transparent 36%,rgba(244,139,211,.1) 70%,rgba(120,154,255,.14));
}
html[data-theme="dark"] .ambient-page .header .header-action {
  border-color: rgba(255,255,255,.24) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 10px 26px rgba(0,0,0,.3) !important;
}
@media (max-width:800px) {
  .ambient-page .header { backdrop-filter: blur(24px) saturate(1.35) !important; -webkit-backdrop-filter: blur(24px) saturate(1.35) !important; }
}

/* Refined flat pill + full-edge scroll spread. */
.ambient-page .header {
  min-height: 4.2rem;
  width: min(1440px, calc(100% - clamp(2rem, 5vw, 8rem))) !important;
  padding: .28rem .5rem !important;
}
.ambient-page .header:not(.is-scrolled) > .brand,
.ambient-page .header:not(.is-scrolled) > .header-tools { transform: none; }
.ambient-page .header.is-scrolled {
  width: min(1660px, calc(100% - 2rem)) !important;
  top: .65rem !important;
}
.ambient-page .header.is-scrolled > .brand { transform: translateX(clamp(-52px,-3.8vw,-14px)); }
.ambient-page .header.is-scrolled > .header-tools { transform: translateX(clamp(14px,3.8vw,52px)); }
@media (max-width:800px) {
  .ambient-page .header.is-scrolled > .brand,
  .ambient-page .header.is-scrolled > .header-tools { transform:none; }
}

/* Keep the expanded edge zones fully visible while the glass sheen stays inset. */
.ambient-page .header { overflow: visible; }

/* Scroll morph: one slim glass bar becomes three separated glass zones. */
.ambient-page .header.is-scrolled {
  width: min(1680px, calc(100% - 2rem)) !important;
  padding: 0 !important;
  gap: clamp(.75rem, 2vw, 2rem);
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.ambient-page .header.is-scrolled::before { opacity: 0; }
.ambient-page .header.is-scrolled > .brand,
.ambient-page .header.is-scrolled > .header-nav,
.ambient-page .header.is-scrolled > .header-tools {
  min-height: 4.05rem;
  border: 1px solid rgba(255,255,255,.8) !important;
  border-radius: 999px !important;
  background: linear-gradient(112deg,rgba(255,255,255,.62),rgba(255,255,255,.4)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.9), 0 14px 36px rgba(80,96,152,.14) !important;
  backdrop-filter: blur(26px) saturate(1.35) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.35) !important;
}
.ambient-page .header.is-scrolled > .brand { padding: .25rem .9rem .25rem .65rem; transform: translateX(0); }
.ambient-page .header.is-scrolled > .header-nav { padding: .25rem 1.25rem; }
.ambient-page .header.is-scrolled > .header-tools { padding: .25rem .65rem .25rem .9rem; transform: translateX(0); }
@media (max-width:800px) {
  .ambient-page .header.is-scrolled { padding: .3rem .4rem !important; gap: .3rem; background: linear-gradient(112deg,rgba(255,255,255,.66),rgba(255,255,255,.43) 46%,rgba(255,255,255,.58)) !important; border-color: rgba(255,255,255,.86) !important; box-shadow: inset 0 1px rgba(255,255,255,.96),0 16px 36px rgba(80,96,152,.14) !important; }
  .ambient-page .header.is-scrolled::before { opacity: .9; }
  .ambient-page .header.is-scrolled > .brand,
  .ambient-page .header.is-scrolled > .header-nav,
  .ambient-page .header.is-scrolled > .header-tools { min-height: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 0 !important; }
}

/* Correct interaction direction: edge-separated at rest, merged pill after scroll. */
.ambient-page .header:not(.is-scrolled) {
  width: min(1680px, calc(100% - 2rem)) !important;
  min-height: 4.05rem;
  padding: 0 !important;
  gap: clamp(.75rem, 2vw, 2rem);
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.ambient-page .header:not(.is-scrolled)::before { opacity: 0; }
.ambient-page .header:not(.is-scrolled) > .brand,
.ambient-page .header:not(.is-scrolled) > .header-nav,
.ambient-page .header:not(.is-scrolled) > .header-tools {
  min-height: 4.05rem;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.ambient-page .header:not(.is-scrolled) > .brand { padding: .25rem .9rem .25rem .2rem; transform: translateX(0); }
.ambient-page .header:not(.is-scrolled) > .header-nav { padding: .25rem 1.25rem; }
.ambient-page .header:not(.is-scrolled) > .header-tools { padding: .25rem .2rem .25rem .9rem; transform: translateX(0); }
.ambient-page .header.is-scrolled {
  width: min(1440px, calc(100% - clamp(2rem, 5vw, 8rem))) !important;
  min-height: 4.2rem;
  padding: .28rem .5rem !important;
  gap: .3rem;
  background: linear-gradient(112deg,rgba(255,255,255,.66),rgba(255,255,255,.43) 46%,rgba(255,255,255,.58)) !important;
  border-color: rgba(255,255,255,.86) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96), inset 0 -1px 0 rgba(255,255,255,.34), 0 1px 2px rgba(255,255,255,.55), 0 18px 46px rgba(80,96,152,.16) !important;
  backdrop-filter: blur(30px) saturate(1.45) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.45) !important;
}
.ambient-page .header.is-scrolled::before { opacity: .9; }
.ambient-page .header.is-scrolled > .brand,
.ambient-page .header.is-scrolled > .header-nav,
.ambient-page .header.is-scrolled > .header-tools { min-height: 0; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 0 !important; transform: none; }
html[data-theme="dark"] .ambient-page .header:not(.is-scrolled) { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
html[data-theme="dark"] .ambient-page .header.is-scrolled { background: linear-gradient(112deg,rgba(28,37,63,.78),rgba(12,17,31,.58) 46%,rgba(39,23,54,.72)) !important; border-color: rgba(157,177,239,.42) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(94,119,188,.16), 0 1px 2px rgba(0,0,0,.24), 0 20px 50px rgba(0,0,0,.3) !important; }
@media (max-width:800px) {
  .ambient-page .header:not(.is-scrolled) { width: 100% !important; min-height: auto; padding: .3rem .4rem !important; gap: .3rem; background: linear-gradient(112deg,rgba(255,255,255,.66),rgba(255,255,255,.43) 46%,rgba(255,255,255,.58)) !important; border-color: rgba(255,255,255,.86) !important; box-shadow: inset 0 1px rgba(255,255,255,.96),0 16px 36px rgba(80,96,152,.14) !important; }
  .ambient-page .header:not(.is-scrolled)::before { opacity: .9; }
  .ambient-page .header:not(.is-scrolled) > .brand,
  .ambient-page .header:not(.is-scrolled) > .header-nav,
  .ambient-page .header:not(.is-scrolled) > .header-tools { min-height: 0; padding: 0 !important; }
}

/* Stronger BongoCat-style morph: edge anchored at rest, springy merge on scroll. */
.ambient-page .header {
  transition:
    width .9s cubic-bezier(.16,1.32,.28,1),
    top .72s cubic-bezier(.16,1.22,.28,1),
    padding .84s cubic-bezier(.16,1.22,.28,1),
    gap .84s cubic-bezier(.16,1.22,.28,1),
    min-height .72s cubic-bezier(.16,1.22,.28,1),
    background .52s ease,
    border-color .52s ease,
    box-shadow .68s cubic-bezier(.16,1,.3,1) !important;
}
.ambient-page .header::before {
  transform: scaleX(.96);
  transform-origin: center;
  transition: opacity .55s ease, transform .88s cubic-bezier(.16,1.28,.28,1) !important;
}
@media (min-width:801px) {
  .ambient-page .header:not(.is-scrolled) {
    width: 100vw !important;
    max-width: none !important;
    padding-inline: clamp(1rem, 2.4vw, 2.8rem) !important;
    gap: 0 !important;
  }
  .ambient-page .header:not(.is-scrolled) > .brand {
    justify-self: start;
    transform: translateX(0) scale(1.03) !important;
  }
  .ambient-page .header:not(.is-scrolled) > .header-nav { justify-self: center; }
  .ambient-page .header:not(.is-scrolled) > .header-tools {
    justify-self: end;
    transform: translateX(0) scale(1.03) !important;
  }
  .ambient-page .header.is-scrolled {
    width: min(1180px, calc(100% - 3rem)) !important;
    padding-inline: .5rem !important;
    gap: .25rem !important;
  }
  .ambient-page .header.is-scrolled::before { transform: scaleX(1); }
  .ambient-page .header.is-scrolled > .brand,
  .ambient-page .header.is-scrolled > .header-tools { transform: scale(.98) !important; }
}

/* Dark mode keeps one continuous glass pill. Older motion rules painted each
   header child separately, which left three unwanted rectangular blocks. */
html[data-theme="dark"] .ambient-page .header > .brand,
html[data-theme="dark"] .ambient-page .header > .header-nav,
html[data-theme="dark"] .ambient-page .header > .header-tools {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Final responsive navbar pass: the mobile merge is centred from one anchor,
   while desktop keeps the edge-separated state at rest.  Child zones never
   paint a second glass surface; the header itself owns the glass. */
@media (max-width: 800px) {
  .ambient-page .header,
  .ambient-page .header:not(.is-scrolled),
  .ambient-page .header.is-scrolled {
    position: sticky !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin-inline: auto !important;
    width: calc(100% - 1rem) !important;
    max-width: none !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    padding: .65rem .8rem !important;
    border-radius: 1.75rem !important;
    overflow: hidden !important;
    background-clip: border-box !important;
    backdrop-filter: blur(24px) saturate(1.35) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.35) !important;
  }
  .ambient-page .header.is-scrolled {
    width: calc(100% - 2rem) !important;
    min-height: 4.15rem !important;
  }
  /* The header paints the complete glass surface. A scaled sheen created a
     smaller second panel and exposed controls beyond its rounded corners. */
  .ambient-page .header::before {
    content: none !important;
    display: none !important;
    transform: none !important;
  }
  .ambient-page .header > .brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
  }
  .ambient-page .header > .header-nav {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
    width: 100% !important;
    justify-self: stretch !important;
  }
  .ambient-page .header > .header-tools {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
  }
  .ambient-page .header > .brand,
  .ambient-page .header > .header-nav,
  .ambient-page .header > .header-tools {
    transform: none !important;
  }
}

/* Dark mode: one continuous surface on the merged pill and no inherited
   rectangular child panes in either responsive state. */
html[data-theme="dark"] .ambient-page .header > .brand,
html[data-theme="dark"] .ambient-page .header > .header-nav,
html[data-theme="dark"] .ambient-page .header > .header-tools,
html.dark .ambient-page .header > .brand,
html.dark .ambient-page .header > .header-nav,
html.dark .ambient-page .header > .header-tools {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
@media (max-width: 800px) {
  html[data-theme="dark"] .ambient-page .header,
  html[data-theme="dark"] .ambient-page .header:not(.is-scrolled),
  html[data-theme="dark"] .ambient-page .header.is-scrolled,
  html.dark .ambient-page .header,
  html.dark .ambient-page .header:not(.is-scrolled),
  html.dark .ambient-page .header.is-scrolled {
    background: linear-gradient(112deg, rgba(28,37,63,.82), rgba(12,17,31,.68) 46%, rgba(39,23,54,.76)) !important;
    border-color: rgba(157,177,239,.42) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.16), 0 18px 42px rgba(0,0,0,.3) !important;
  }
}

/* Use the site's actual DeepSeek favicon instead of a low-detail text badge. */
.ambient-page .bookmark-site-icon {
  display: block;
  width: 1.95rem;
  height: 1.95rem;
  object-fit: contain;
  border-radius: .55rem;
}

/* A transparent background still blurs a visible strip. Match the dark theme
   specificity so the separated desktop header has no remaining glass layer. */
@media (min-width: 801px) {
  html[data-theme="dark"] .ambient-page .header:not(.is-scrolled),
  html.dark .ambient-page .header:not(.is-scrolled) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}