:root{
  --bg:#000000;
  --bg-soft:#0A0A0A;
  --card:rgba(17,17,17,.9);
  --card-strong:rgba(28,28,28,.94);
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.14);
  --text:#FFFFFF;
  --muted:#A6A6A6;
  --faint:#6E6E6E;
  --violet:#FFFFFF;
  --violet-deep:#C9C9C9;
  --cyan:#9E9E9E;
  --pos:#34D399;
  --neg:#F87171;
  --warn:#E6E6E6;
  --radius:18px;
  --nav-h:64px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,sans-serif;
  font-size:15px;
  line-height:1.5;
  min-height:100vh;
  overflow-x:hidden;
}
svg{display:block}

#topo{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:url("../../images/bg-topo.png");
  background-repeat:no-repeat;             /* one stretched sheet: no visible tiling seams */
  background-position:center;
  background-size:cover;
  opacity:.06;
  mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 45%, #000 55%, transparent 100%);
  mask-image:radial-gradient(ellipse 90% 80% at 50% 45%, #000 55%, transparent 100%);
}
#floaters{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#floaters img{
  position:absolute;opacity:0;filter:saturate(.85);
  animation:floatIn 1.6s ease var(--delay) forwards,
            floatDrift var(--dur) ease-in-out var(--delay) infinite alternate;
}
@keyframes floatIn{to{opacity:var(--op,.1)}}
@keyframes floatDrift{
  from{transform:translate(0,0) rotate(var(--r0))}
  to{transform:translate(var(--dx),var(--dy)) rotate(var(--r1))}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  #floaters img{animation:floatIn 1s ease forwards}
}