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

* { touch-action: manipulation; }

:root {
  --accent: 236,234,227;
  --accent-dim: 198,197,205;
  --accent-dark: 150,149,157;
  --bg-tint: 21,21,26;
  --screen-bg: 12,12,14;
  --text-primary: 236,234,227;
  --text-secondary: 176,175,184;
  --text-muted: 150,149,157;

  --line: 38,38,44;
  --danger: 210,75,62;

  --font-ui: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius: 10px;
  --radius-lg: 16px;
}

html, body {
  margin: 0; padding: 0; overflow: hidden;
  background: #0C0C0E;
  font-family: var(--font-ui);
  color: #fff;
  touch-action: none;
  -webkit-touch-callout: none;
  user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  height: 100%;
}

.screen {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; z-index: 10;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: env(safe-area-inset-top, 20px) 20px calc(20px + env(safe-area-inset-bottom, 0px));
}

.overlay-panel {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; z-index: 25;
}