/* Pattern Waves sits behind the entire SPA, independently of route rendering. */
body .motion-bg.app-pattern-bg,
body:has(.app-shell) .motion-bg.app-pattern-bg {
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:#101113;
}
body .motion-bg.app-pattern-bg::after { display:none; }
body .motion-bg.app-pattern-bg::before {
  content:'';position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:repeating-linear-gradient(233deg,#88dc651c 0 1px,transparent 1px 5px);
  mask-image:radial-gradient(ellipse at 55% 45%,transparent 10%,#000 80%);
  transition:opacity .25s ease;
}
body .motion-bg.app-pattern-bg[data-ready="true"]::before { opacity:0; }
body .motion-bg.app-pattern-bg>.pattern-waves { display:block;position:absolute;inset:0;width:100%;height:100%;animation:none; }
.app-pattern-bg canvas { display:block;width:100%;height:100%;opacity:0;transition:opacity .25s ease;pointer-events:none; }
.app-pattern-bg[data-ready="true"] canvas { opacity:.32; }
:root[data-theme="light"] body .motion-bg.app-pattern-bg { background:#f3f5f6; }
:root[data-theme="light"] .app-pattern-bg[data-ready="true"] canvas { opacity:.25; }
:root[data-theme="light"] body .motion-bg.app-pattern-bg::before { background-image:repeating-linear-gradient(233deg,#447b2f18 0 1px,transparent 1px 5px); }
.app-shell .rail {
  isolation:isolate;
  background:color-mix(in srgb,var(--app-rail) 68%,transparent);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.app-shell .rail>* { position:relative;z-index:1; }
.app-shell .rail::before {
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  background:radial-gradient(180px 210px at var(--rail-light-x,110px) var(--rail-light-y,150px),color-mix(in srgb,var(--app-lime) 11%,transparent),transparent 80%);
  transition:opacity .3s ease;
}
.app-shell .rail::after {
  content:'';position:absolute;z-index:2;right:0;top:calc(var(--rail-light-y,150px) - 110px);width:1px;height:220px;pointer-events:none;opacity:0;
  background:linear-gradient(transparent,color-mix(in srgb,var(--app-lime) 45%,transparent),transparent);
  transition:opacity .3s ease;
}
.app-shell .rail[data-pattern-hover="true"]::before,.app-shell .rail[data-pattern-hover="true"]::after { opacity:1; }
:root[data-theme="light"] .app-shell .rail { background:color-mix(in srgb,var(--app-rail) 82%,transparent); }
@media(max-width:980px) { .app-shell .rail { background:color-mix(in srgb,var(--app-rail) 90%,transparent); } }
@media(prefers-reduced-motion:reduce) { .app-pattern-bg canvas,.app-pattern-bg::before { transition:none!important; } }
@media(prefers-reduced-motion:reduce) { .app-shell .rail::before,.app-shell .rail::after { display:none; } }