* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: #00AAAA #000088;
}

::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

::-webkit-scrollbar-track {
  background: #000088;
  border: 1px solid #00AAAA;
}

::-webkit-scrollbar-thumb {
  background: #00AAAA;
  border: 1px solid #55FFFF;
}

#scanlines {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.08) 2px,
    rgba(0, 0, 0, 0.08) 4px
  );
}

body {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  image-rendering: pixelated;
}

@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.blink-cursor::after {
  content: '█';
  animation: blink 1s step-end infinite;
  color: #AAAAAA;
}

@keyframes blink-slow {
  0%, 69% { opacity: 1; }
  70%, 100% { opacity: 0; }
}

.blink-text {
  animation: blink-slow 1.2s step-end infinite;
}

.dos-border {
  border: 2px solid #00AAAA;
  box-shadow: inset 1px 1px 0 #55FFFF, inset -1px -1px 0 #008888;
}

.dos-border-double {
  border: 3px double #00AAAA;
  box-shadow: inset 0 0 0 1px #008888;
}

.dos-window {
  border: 2px solid #55FFFF;
  box-shadow: 
    inset 1px 1px 0 #AAAAAA,
    inset -1px -1px 0 #005555,
    3px 3px 0 rgba(0,0,0,0.5);
}

.dos-button {
  background: #555555;
  color: #FFFFFF;
  border: 2px outset #AAAAAA;
  padding: 2px 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  cursor: pointer;
  text-transform: uppercase;
}

.dos-button:hover {
  background: #00AAAA;
  color: #000000;
}

.dos-button:active {
  border-style: inset;
  background: #008888;
}

.dos-button.active {
  background: #00AAAA;
  color: #000088;
  border-color: #55FFFF;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.3);
}

.dos-input {
  background: #000000;
  color: #55FFFF;
  border: 2px inset #555555;
  font-family: 'IBM Plex Mono', monospace;
  padding: 3px 6px;
  outline: none;
  font-size: 13px;
}

.dos-input:focus {
  border-color: #00AAAA;
  box-shadow: 0 0 4px rgba(85, 255, 255, 0.3);
}

.dos-select {
  background: #000000;
  color: #55FFFF;
  border: 2px inset #555555;
  font-family: 'IBM Plex Mono', monospace;
  padding: 3px 6px;
  outline: none;
  font-size: 13px;
  cursor: pointer;
}

.dos-tab {
  background: #000088;
  color: #AAAAAA;
  border: 1px solid #005555;
  border-bottom: none;
  padding: 4px 14px;
  cursor: pointer;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
}

.dos-tab.active {
  background: #0000AA;
  color: #55FFFF;
  border-color: #00AAAA;
  position: relative;
  top: 1px;
}

.drop-zone {
  border: 3px dashed #00AAAA;
  transition: all 0.15s;
}

.drop-zone.dragover {
  border-color: #55FFFF;
  background: rgba(0, 170, 170, 0.1);
  box-shadow: inset 0 0 30px rgba(0, 170, 170, 0.1);
}

.code-output {
  background: #000000;
  color: #55FF55;
  border: 2px inset #555555;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  line-height: 1.4;
  tab-size: 4;
  white-space: pre;
  overflow: auto;
}

.palette-swatch {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1px solid #555555;
  image-rendering: pixelated;
}

canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

@keyframes flicker {
  0% { opacity: 0.97; }
  5% { opacity: 0.95; }
  10% { opacity: 0.98; }
  15% { opacity: 0.96; }
  20% { opacity: 0.99; }
  100% { opacity: 0.97; }
}

.crt-flicker {
  animation: flicker 0.15s infinite;
}