/* YS: quiet atmosphere around a dense, readable directory. */
:root {
  --ambient-base: #f3f6fc;
  --ambient-blue: #abc7fa70;
  --ambient-lilac: #d4cafb75;
  --ambient-gold: #f2d49f80;
  --ambient-mist: #ffffffc4;
  --ambient-ink: #6584bf;
  --ambient-noise: .14;
  --ambient-orbit-opacity: .8;
  --panel: #ffffffed;
  --line: #dce4ef;
  --sub: #667287;
  --shadow: 0 3px 16px #38517c07;
}
html[data-theme='dark'] {
  --ambient-base: #111827;
  --ambient-blue: #4569b86b;
  --ambient-lilac: #67609850;
  --ambient-gold: #bda16b38;
  --ambient-mist: #19243d40;
  --ambient-ink: #8da8df;
  --ambient-noise: .09;
  --ambient-orbit-opacity: .45;
  --panel: #202a3bed;
  --text: #e7edf8;
  --sub: #a9b6cc;
  --line: #3a496360;
  --hover: #2a364a;
  --soft: #2c3e5a;
}
body {
  isolation: isolate;
  background: var(--ambient-base);
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 65% 49% at 94% 5%, var(--ambient-gold), transparent 75%),
    radial-gradient(ellipse 76% 69% at 39% -12%, var(--ambient-blue), transparent 77%),
    radial-gradient(ellipse 53% 59% at 78% 49%, var(--ambient-lilac), transparent 80%),
    radial-gradient(ellipse 50% 42% at 22% 97%, var(--ambient-blue), transparent 80%),
    linear-gradient(135deg, var(--ambient-mist), transparent 66%);
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--ambient-noise);
  background-image: url('/ambient-grain.svg');
  background-size: 120px 120px;
}
.main { position: relative; --ambient-gutter: 29px; }
.search-zone {
  position: relative;
  isolation: isolate;
}
.search-zone::before {
  content: '';
  position: absolute;
  inset: -15px calc(-1 * var(--ambient-gutter)) -52px;
  z-index: -1;
  pointer-events: none;
  background: url('/ambient-orbits.svg') center 39% / cover no-repeat;
  opacity: var(--ambient-orbit-opacity);
  color: var(--ambient-ink);
}
.search-zone h1 { color: var(--text); text-shadow: 0 1px 18px #ffffff20; }
.search-form {
  box-shadow: 0 10px 35px #385f9e0c, inset 0 1px 0 #ffffff99;
  border-color: #b6c9e88c;
}
.sidebar, .topbar {
  background: #ffffffb8;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
html[data-theme='dark'] .sidebar,
html[data-theme='dark'] .topbar {
  background: #182132d9;
}
html[data-theme='dark'] .search-form {
  box-shadow: 0 14px 36px #030b1c25, inset 0 1px 0 #ffffff0b;
  border-color: #6b88b350;
}
.resource-card, .eco-card, .personal, .latest-box, .footer {
  box-shadow: 0 2px 9px #244b7d05;
}
html[data-theme='dark'] .resource-card,
html[data-theme='dark'] .eco-card,
html[data-theme='dark'] .personal,
html[data-theme='dark'] .latest-box,
html[data-theme='dark'] .footer { box-shadow: 0 2px 12px #07102314; }
@media (min-width: 1700px) { .main { --ambient-gutter: 40px; } }
@media (max-width: 1250px) { .main { --ambient-gutter: 23px; } }
@media (max-width: 980px) { .main { --ambient-gutter: 18px; } }
@media (max-width: 760px) {
  .main { --ambient-gutter: 17px; }
  .search-zone::before { inset-block: -16px -35px; background-size: auto 370px; }
  .sidebar { background: #f8fafff7; }
  html[data-theme='dark'] .sidebar { background: #182132f7; }
}
@media (max-width: 520px) { .main { --ambient-gutter: 14px; } }
@media (forced-colors: active) {
  body::before, body::after, .search-zone::before { display: none; }
  .sidebar, .topbar { background: Canvas; backdrop-filter: none; }
}