:root {
  --font-ui: "Space Grotesk", "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", "Segoe UI", sans-serif;
  --font-write: "Newsreader", "Georgia", serif;

  --bg: #060910;
  --bg-2: #0b121c;
  --glass: rgba(8, 14, 24, 0.82);
  --line: rgba(160, 220, 255, 0.12);
  --line-strong: rgba(160, 220, 255, 0.22);
  --ink-ui: #e8f4ff;
  --ink-dim: rgba(210, 232, 255, 0.62);
  --ink-mute: rgba(210, 232, 255, 0.4);

  --paper: #e8eef6;
  --paper-2: #dce6f2;
  --ink: #0c1520;
  --ink-soft: rgba(12, 21, 32, 0.52);
  --rule: rgba(80, 120, 170, 0.14);

  --cyan: #5eead4;
  --ice: #7dd3fc;
  --violet: #a78bfa;
  --lime: #86efac;
  --mag: #e879f9;
  --frost: #e2e8f0;

  --accent: var(--cyan);
  --focus: #7dd3fc;
  --danger: #fb7185;

  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;
  --shadow-paper: 0 0 0 1px rgba(160, 220, 255, 0.12), 0 18px 40px rgba(0, 0, 0, 0.35);
  --shadow-dock: 0 8px 28px rgba(0, 0, 0, 0.4);

  --rail: 228px;
  --pad: 8px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font-ui);
  color: var(--ink-ui);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

img {
  max-width: 100%;
  display: block;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

::selection {
  background: rgba(94, 234, 212, 0.28);
}