:root{
  --cumulus-sky:#86d7ff;
  --cumulus-sky-strong:#46bdf5;
  --cumulus-cloud:#f7fbff;
  --cumulus-cloud-muted:#cbd8e6;
  --cumulus-night:#081018;
  --cumulus-surface:#101a24;
  --cumulus-surface-2:#162431;
  --cumulus-line:#2a3b49;
}

body{
  background:
    radial-gradient(circle at 82% 8%,rgba(70,189,245,.08),transparent 28rem),
    var(--bg);
}

button{background:var(--cumulus-sky-strong);color:#041018}
button:hover{background:var(--cumulus-sky)}
button.secondary:hover{border-color:var(--cumulus-sky-strong);background:var(--cumulus-surface-2)}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline-color:var(--cumulus-sky)}

.eyebrow,.tabs .maker,#auth-progress-percent,code{color:var(--cumulus-sky)}
.login-progress-bar{background:var(--cumulus-sky-strong)}
.login-progress-track{border-color:var(--cumulus-line)}
.tab.active{box-shadow:inset 3px 0 0 var(--cumulus-sky-strong)}
input:focus,select:focus,textarea:focus{border-color:var(--cumulus-sky)}
input[type="checkbox"]{accent-color:var(--cumulus-sky-strong)}
.advanced-hint{border-left-color:var(--cumulus-sky-strong)}

.auth-panel{
  position:relative;
  overflow:hidden;
  border-color:var(--cumulus-line);
  background:linear-gradient(145deg,rgba(16,26,36,.98),rgba(9,16,24,.98));
}
.auth-panel::after{
  content:"";
  position:absolute;
  right:-45px;
  top:-58px;
  width:190px;
  height:108px;
  border-radius:999px;
  background:rgba(134,215,255,.08);
  box-shadow:-82px 45px 0 6px rgba(247,251,255,.035),-26px 66px 0 14px rgba(70,189,245,.035);
  pointer-events:none;
}

.cumulus-auth-brand{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:20px;
}
.cumulus-cloud-mark{
  position:relative;
  width:58px;
  height:29px;
  border-radius:18px;
  background:var(--cumulus-cloud);
  flex:0 0 auto;
  box-shadow:0 0 28px rgba(134,215,255,.13);
}
.cumulus-cloud-mark::before,.cumulus-cloud-mark::after{
  content:"";
  position:absolute;
  bottom:8px;
  border-radius:50%;
  background:inherit;
}
.cumulus-cloud-mark::before{width:28px;height:28px;left:8px}
.cumulus-cloud-mark::after{width:34px;height:34px;right:7px}
.cumulus-brand-name{
  font-size:30px;
  line-height:1;
  font-weight:900;
  letter-spacing:-.03em;
}
.cumulus-brand-sub{
  margin-top:5px;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.tabs .nerdspace-nav-brand{
  position:relative;
  padding-top:10px;
}
.tabs .nerdspace-nav-brand::before{
  content:"";
  display:block;
  width:42px;
  height:21px;
  margin:0 0 14px 4px;
  border-radius:14px;
  background:var(--cumulus-cloud);
  box-shadow:0 0 24px rgba(134,215,255,.12);
}
.tabs .nerdspace-nav-brand::after{
  content:"";
  position:absolute;
  left:10px;
  top:0;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--cumulus-cloud);
  box-shadow:17px 3px 0 2px var(--cumulus-cloud);
}
.tabs .wordmark{
  font-family:Inter,"Helvetica Neue",Arial,sans-serif;
  font-size:25px;
  font-weight:900;
  letter-spacing:-.04em;
}

@media(max-width:940px){
  .tab.active{box-shadow:inset 0 -3px 0 var(--cumulus-sky-strong)}
}
