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

:root {
  --bg: #0a0a08;
  --panel: #0d140d;
  --panel-light: #162016;
  --border: #1e3a1e;
  --green: #39ff14;
  --green-dim: #1a7a00;
  --amber: #ffb700;
  --red: #ff4040;
  --text: #c8f5c8;
  --muted: #4a7a4a;

  /* Housing / device shell */
  --screw-slot: #1a1910;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Courier New', Courier, monospace;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  /* perspective intentionally NOT set here -- it creates a stacking context
     that traps position:fixed children (the splash). Set on .device instead. */
  overflow-y: auto;
  background-image:
    radial-gradient(ellipse at 50% 80%, rgba(40,38,30,0.3) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 0%, rgba(57,255,20,0.03) 0%, transparent 50%),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 4px,
      rgba(255,255,255,0.003) 4px,
      rgba(255,255,255,0.003) 5px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 4px,
      rgba(255,255,255,0.003) 4px,
      rgba(255,255,255,0.003) 5px
    );
}