:root {
  --oil-cyan: #37f3dd;
  --oil-blue: #376cff;
  --oil-violet: #8b3dff;
  --oil-pink: #ff4fa3;
  --oil-gold: #ffc84a;
  --oil-green: #79ff86;
}

html,
body {
  background: #08090b;
}

body {
  position: relative;
  isolation: isolate;
  background-image:
    radial-gradient(ellipse at 14% 12%, rgba(55,243,221,.72), transparent 27%),
    radial-gradient(ellipse at 88% 16%, rgba(139,61,255,.78), transparent 29%),
    radial-gradient(ellipse at 72% 82%, rgba(255,79,163,.64), transparent 32%),
    radial-gradient(ellipse at 18% 76%, rgba(121,255,134,.48), transparent 26%),
    conic-gradient(from 212deg at 52% 48%, #081116, #152d47, #4d185d, #781735, #7c6214, #0a493f, #081116);
  background-size: 145% 145%, 155% 155%, 150% 150%, 145% 145%, 135% 135%;
  background-attachment: fixed;
  animation: oilSlickDrift 18s ease-in-out infinite alternate;
}

body::before {
  z-index: -1;
  opacity: .3;
  background-image:
    repeating-radial-gradient(ellipse at 45% 52%, transparent 0 18px, rgba(255,255,255,.1) 19px, transparent 21px 36px),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.58' numOctaves='4' seed='7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,.2), transparent 18% 68%, rgba(55,243,221,.14));
  mix-blend-mode: soft-light;
}

.catalog-header {
  background: rgba(6,7,10,.72);
  border-bottom-color: rgba(255,255,255,.34);
  backdrop-filter: blur(16px) saturate(1.4);
}

.catalog-meta,
.catalog-hint { color: rgba(255,255,255,.78); }

.catalog-header p span,
.catalog-page-status b {
  color: var(--oil-cyan);
  text-shadow: 0 0 14px rgba(55,243,221,.65);
}

.catalog-controls button,
.catalog-index {
  background: rgba(5,7,10,.82);
  border-color: rgba(255,255,255,.55);
  backdrop-filter: blur(14px) saturate(1.45);
}

.catalog-controls > button:not(:disabled):hover,
.catalog-index button.is-current {
  color: #07080a;
  background: linear-gradient(120deg,var(--oil-cyan),#c6ff82 32%,var(--oil-gold) 58%,var(--oil-pink));
}

.book-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(84vw,1220px);
  height: 72%;
  border-radius: 50%;
  background: radial-gradient(ellipse,rgba(0,0,0,.74),rgba(0,0,0,.22) 56%,transparent 72%);
  filter: blur(24px);
}

@keyframes oilSlickDrift {
  0% { background-position: 0 0,100% 0,100% 100%,0 100%,50% 50%; }
  55% { background-position: 12% 18%,84% 10%,92% 82%,8% 88%,42% 57%; }
  100% { background-position: 22% 4%,76% 24%,82% 94%,18% 70%,58% 44%; }
}

@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
}