:root{
  --bg-0:#0a0d14;
  --bg-1:#0f1420;
  --ink-0:#eef1f8;
  --ink-1:#aab2c5;
  --ink-2:#6c7590;
  --line:rgba(255,255,255,.08);
  --glass:rgba(18,22,34,.55);
  --glass-2:rgba(255,255,255,.04);
  --accent:#7dd3c0;
  --accent-2:#8ea9ff;
  --accent-3:#f2b56b;
  --danger:#ef7b7b;
  --radius:18px;
  --shadow-lg:0 30px 80px -30px rgba(0,0,0,.7);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink-0);
  background:var(--bg-0);
  overflow-x:hidden;
}

.wallpaper{
  position:fixed;
  inset:0;
  z-index:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
  filter:brightness(.5) saturate(1.08);
  transform:scale(1.02);
  transition:opacity 1.4s ease;
  will-change:opacity;
}
.wallpaper.loaded{opacity:1;}

.scrim{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(10,13,20,.15), rgba(10,13,20,.55) 60%),
    linear-gradient(180deg, rgba(6,8,13,.55) 0%, rgba(6,8,13,.72) 60%, rgba(6,8,13,.88) 100%);
}

#bg-canvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:2;
  display:block;
  mix-blend-mode:soft-light;
  opacity:.85;
}

.grain{
  position:fixed;
  inset:0;
  z-index:3;
  pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

.wp-credit{
  position:fixed;
  left:20px;
  bottom:16px;
  z-index:4;
  font-size:11px;
  color:rgba(255,255,255,.55);
  text-decoration:none;
  letter-spacing:.01em;
  opacity:0;
  transition:opacity .6s ease, color .2s ease;
  max-width:60vw;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.wp-credit.show{opacity:1;}
.wp-credit:hover{color:rgba(255,255,255,.85);}
.wp-credit::before{content:"⁕ "; opacity:.7;}

a{color:inherit;}
button{font-family:inherit;}

::selection{background:rgba(125,211,192,.3);}

::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:8px;}
::-webkit-scrollbar-track{background:transparent;}