:root {
  --footer-h: 44px;
  --bg: #1a2229;
  --stage-bg: #cfd8dc;
  --footer-bg: #12181e;
  --footer-fg: #c5d0da;
  --footer-hover: #ffffff;
  --fallback-fg: #5a6a78;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--footer-fg);
}

#lab-stage {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--footer-h));
  height: calc(100dvh - var(--footer-h));
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, #e8eef2 0%, var(--stage-bg) 55%, #b0bec5 100%);
  overflow: hidden;
}

#lab-canvas {
  position: absolute;
  inset: 0;
  touch-action: none;
}

#lab-canvas canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

#lab-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 2rem;
  text-align: center;
  color: var(--fallback-fg);
  background:
    linear-gradient(180deg, #dfe7ec, #c5d0d6);
}

#lab-fallback[hidden] {
  display: none;
}

.site-footer {
  height: var(--footer-h);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--footer-bg);
  border-top: 1px solid #24303a;
}

.site-footer a {
  color: var(--footer-fg);
  text-decoration: none;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--footer-hover);
  text-decoration: underline;
  outline: none;
}