/* reset + background + typography primitives */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  position:relative;
  min-height:100vh;
}
::selection{background:var(--acc);color:#fff}

/* technical lab background */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none}
.bg .grid{
  position:absolute;inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 50% 22%,#000 0%,#000 42%,transparent 80%);
  -webkit-mask-image:radial-gradient(circle at 50% 22%,#000 0%,#000 42%,transparent 80%);
  opacity:.5;
}
.bg .glow{
  position:absolute;left:50%;top:16%;transform:translate(-50%,-50%);
  width:1100px;height:1100px;max-width:140vw;border-radius:50%;
  background:radial-gradient(circle, rgba(255,69,58,.10) 0%, rgba(255,69,58,.04) 30%, transparent 62%);
  filter:blur(20px);
}
.bg .scan{
  position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.016) 0px,rgba(255,255,255,.016) 1px,transparent 1px,transparent 4px);
  opacity:.5;
}
.vignette{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 0%,transparent 55%,rgba(0,0,0,.5) 100%)}

.wrap{position:relative;z-index:2;min-height:100vh;display:flex;flex-direction:column}
#app{flex:1 0 auto;width:100%}

a{color:inherit;text-decoration:none}

/* utility text */
.mono{font-family:var(--font-mono)}
.kicker{font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--acc)}
.label{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.display{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;line-height:1.02}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}