:root{
  color-scheme:dark;
  --canvas:#030914;
  --surface:#071321;
  --surface-2:#0a1928;
  --surface-3:#0e2133;
  --control:#040e19;
  --line:rgba(130,188,220,.16);
  --line-soft:rgba(130,188,220,.085);
  --line-strong:rgba(130,205,238,.34);
  --text:#f2f8fc;
  --text-2:#a7bbca;
  --text-3:#607789;
  --focus:#51d7ff;
  --focus-soft:rgba(81,215,255,.12);
  --ok:#4fe0a2;
  --ok-soft:rgba(79,224,162,.12);
  --warn:#edb45b;
  --warn-soft:rgba(237,180,91,.13);
  --danger:#ff6878;
  --danger-soft:rgba(255,104,120,.12);
  --off:#526779;
  --cyber:#51d7ff;
  --cyber-soft:rgba(81,215,255,.1);
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:14px;
  --space:4px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  overflow:hidden;
  background:
    radial-gradient(circle at 50% -20%,rgba(30,114,150,.16),transparent 42%),
    var(--canvas);
  color:var(--text);
  font-family:"Avenir Next","SF Pro Display","PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button,input,select,textarea{font:inherit}
button{color:inherit}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:rgba(81,215,255,.25)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(155,177,203,.2);border-radius:99px}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideIn{from{transform:translateX(18px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes riseIn{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}