:root {
  color-scheme: dark;
  --bg: #070b12;
  --bg-2: #0d1320;
  --surface: rgba(13, 18, 29, 0.78);
  --surface-strong: rgba(18, 25, 40, 0.9);
  --line: rgba(180, 197, 220, 0.14);
  --line-strong: rgba(180, 197, 220, 0.24);
  --text: #eef3fa;
  --muted: #a6b3c8;
  --accent: #8df3c2;
  --accent-2: #7ab7ff;
  --accent-3: #ffd37a;
  --shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  --scrollbar-width: 12px;
  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(141, 243, 194, 0.18);
}

html {
  background: var(--bg);
  overflow: hidden;
}

body {
  position: relative;
  width: 100%;
  max-height: 100dvh;
  margin: 0;
  overflow: hidden auto;
  color: var(--text);
  font-family: "Avenir Next", "Segoe UI Variable", "Trebuchet MS", "Gill Sans", sans-serif;
  isolation: isolate;
  background: radial-gradient(1000px 560px at 15% 5%, rgba(122, 183, 255, 0.18), transparent 58%), radial-gradient(800px 480px at 90% 0%, rgba(141, 243, 194, 0.13), transparent 52%), linear-gradient(180deg, var(--bg-2), var(--bg));
}

#root {
  padding: clamp(0.8rem, 2vw, 1.3rem);
}

* {
  box-sizing: border-box;
}

::selection {
  background: rgba(141, 243, 194, 0.34);
  color: currentColor;
}
::-moz-selection {
  background: rgba(141, 243, 194, 0.34);
  color: var(--text);
}

* {
  scrollbar-color: var(--scrollbar-thumb) transparent;
  scrollbar-width: thin;
}

.demo-app {
  position: relative;
  min-height: 100dvh;
  padding: 0;
  isolation: isolate;
}

.demo-app::before,
.demo-app::after {
  content: "";
  position: fixed;
  inset: auto;
  pointer-events: none;
  z-index: -1;
}

.demo-app::before {
  width: 26rem;
  height: 26rem;
  left: -9rem;
  top: 22vh;
  background: radial-gradient(circle, rgba(122, 183, 255, 0.18), transparent 68%);
}

.demo-app::after {
  width: 22rem;
  height: 22rem;
  right: -7rem;
  bottom: 6vh;
  background: radial-gradient(circle, rgba(141, 243, 194, 0.14), transparent 68%);
}