:root {
  --phos: #4dff88;
  --phos-dim: #2a8850;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(ellipse at top, #12211a 0%, #0a0f0d 55%, #060807 100%),
    repeating-linear-gradient(45deg, rgba(60,40,20,0.04) 0px, rgba(60,40,20,0.04) 2px, transparent 2px, transparent 6px);
  min-height: 100vh;
  color: #d5f5e0;
}

/* CRT monitor frame — beige case bevel */
.crt-frame {
  position: relative;
  background: linear-gradient(160deg, #2a2620, #14120e);
  border: 3px solid #0a0a08;
  box-shadow:
    inset 0 0 40px rgba(0,0,0,0.8),
    0 8px 30px rgba(0,0,0,0.6),
    0 0 0 6px #3a352c,
    0 0 0 8px #1a1712;
}

.crt-frame canvas {
  background: #050805;
  box-shadow: inset 0 0 60px rgba(0,20,5,0.8);
}

/* scanline overlay */
.scanlines {
  pointer-events: none;
  position: absolute;
  inset: 12px 20px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.18) 3px,
    rgba(0,0,0,0.18) 4px
  );
  border-radius: 4px;
  mix-blend-mode: multiply;
  animation: flicker 0.15s infinite;
}

@keyframes flicker {
  0% { opacity: 0.92; }
  50% { opacity: 1; }
  100% { opacity: 0.94; }
}

/* power-on flash */
.power-flash {
  animation: powerOn 0.5s ease-out;
}
@keyframes powerOn {
  0% { filter: brightness(4) blur(2px); }
  30% { filter: brightness(2); }
  100% { filter: brightness(1.05); }
}

/* scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #0a0f0d; }
::-webkit-scrollbar-thumb { background: #2a4a35; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #3a6a4a; }

button { cursor: pointer; transition: all 0.12s; font-family: 'IBM Plex Mono', monospace; }
input, textarea { font-family: 'IBM Plex Mono', monospace; outline: none; }
input:focus, textarea:focus { border-color: var(--phos-dim); }

code {
  background: rgba(0,0,0,0.4);
  padding: 1px 4px;
  border-radius: 3px;
}