:root {
  --beige: #d8cdb0;
  --beige-dark: #b3a882;
  --c64-blue: #4a49b8;
  --amber: #ffb84d;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'JetBrains Mono', monospace;
  background:
    radial-gradient(circle at 20% 10%, #2a2618 0%, transparent 40%),
    radial-gradient(circle at 80% 90%, #1a1f2e 0%, transparent 45%),
    linear-gradient(160deg, #14130e 0%, #0b0d13 100%);
  min-height: 100vh;
  color: #e8e2d0;
}
.title-font {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--amber);
  text-shadow: 0 2px 0 #7a5410;
}
.strawberry { filter: drop-shadow(0 0 6px rgba(255,80,120,0.5)); }

/* ---- Boot / bezel ---- */
.bezel {
  background: linear-gradient(160deg, var(--beige) 0%, var(--beige-dark) 100%);
  color: #2a2416;
  box-shadow:
    inset 0 2px 6px rgba(255,255,255,0.4),
    inset 0 -4px 10px rgba(0,0,0,0.25),
    0 12px 40px rgba(0,0,0,0.6);
  border: 2px solid #8a7f5a;
}
.bezel p, .bezel .text-xs { color: #4a4230; }
.bezel-mini {
  background: rgba(30,28,20,0.6);
  border: 1px solid #3a3626;
}

.drop-zone {
  background: rgba(255,255,255,0.35);
  border: 2px dashed #7a6f4a;
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.15s;
  color: #2a2416;
}
.drop-zone .text-amber-200 { color: #6b4e12; }
.drop-zone .text-stone-400 { color: #5a5238; }
.drop-zone .text-stone-500 { color: #6a6248; }
.drop-zone:hover { border-color: #4a3f1a; background: rgba(255,255,255,0.5); }
.drop-zone.drag-over { border-color: #2a8a2a; background: rgba(120,220,120,0.3); transform: scale(1.01); }
.drop-zone.loaded { border-style: solid; border-color: #3a8a3a; background: rgba(140,220,140,0.25); }
.drop-zone.err { border-color: #c33; }
.hidden { display: none; }

.power-btn.active {
  background: linear-gradient(180deg,#5cd65c,#2a9a2a);
  color: #0a2a0a; cursor: pointer;
  box-shadow: 0 0 20px rgba(90,220,90,0.5), inset 0 1px 2px rgba(255,255,255,0.5);
  animation: pulse 1.6s infinite;
}
.power-btn.inactive {
  background: #7a725a; color: #4a4636; cursor: not-allowed;
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 16px rgba(90,220,90,0.4), inset 0 1px 2px rgba(255,255,255,0.5); }
  50% { box-shadow: 0 0 28px rgba(90,220,90,0.75), inset 0 1px 2px rgba(255,255,255,0.5); }
}

/* ---- Toolbar ---- */
.toolbar {
  background: linear-gradient(180deg, var(--beige) 0%, var(--beige-dark) 100%);
  color: #2a2416;
  border-bottom: 3px solid #8a7f5a;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}
.toolbar .title-font { text-shadow: 0 1px 0 rgba(255,255,255,0.4); }
.tbtn {
  background: #6b6349;
  color: #f0ead6;
  border: 1px solid #4a4432;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.15);
}
.tbtn:hover { background: #7d7458; }
.tbtn:disabled { opacity: 0.4; cursor: not-allowed; }
.tbtn.on { background: var(--c64-blue); color: #fff; box-shadow: 0 0 8px rgba(90,90,220,0.5); }

.led {
  width: 12px; height: 12px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.3);
  transition: all 0.15s;
}

/* ---- Monitor ---- */
.monitor-frame {
  background: linear-gradient(145deg, #c9beA0, #9c9070);
  padding: 20px;
  border-radius: 18px;
  box-shadow:
    inset 0 3px 8px rgba(255,255,255,0.35),
    inset 0 -6px 16px rgba(0,0,0,0.3),
    0 16px 40px rgba(0,0,0,0.55);
  border: 2px solid #7a6f4a;
}
.screen-canvas {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  image-rendering: pixelated;
  border-radius: 6px;
  background: #4a49b8;
  box-shadow: 0 0 30px rgba(74,73,184,0.4);
}
.screen-canvas.crt {
  position: relative;
}
.screen-canvas.crt::after {
  content: '';
}
.monitor-frame:has(.crt) {
  position: relative;
}
.screen-canvas.crt {
  filter: saturate(1.1) contrast(1.05);
}
/* scanline overlay via box-shadow trick */
.crt {
  background-image: repeating-linear-gradient(
    0deg, rgba(0,0,0,0.12) 0px, rgba(0,0,0,0.12) 1px, transparent 2px, transparent 4px
  );
}

/* ---- Debug panel ---- */
.debug-panel {
  background: rgba(18,20,28,0.85);
  border: 1px solid #2a3040;
  backdrop-filter: blur(6px);
  max-height: 75vh;
}
.reg {
  background: rgba(40,45,60,0.6);
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid #333a4a;
  color: #7ee0ff;
  font-weight: 700;
}
.flagbit {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  border-radius: 4px;
  background: #2a2f3d; color: #556;
  border: 1px solid #333a4a;
}
.flagbit.set { background: var(--c64-blue); color: #fff; box-shadow: 0 0 6px rgba(90,90,220,0.6); }
.mem-input {
  background: #12141c; border: 1px solid #333a4a; color: #7ee0ff;
  border-radius: 4px; padding: 4px 8px;
}
.mem-dump {
  background: #0c0e14; border: 1px solid #262c3a;
  border-radius: 6px; padding: 8px; max-height: 200px; overflow-y: auto;
}

/* ---- Virtual keyboard ---- */
.vkeyboard {
  background: linear-gradient(180deg,#b3a882,#8a7f5a);
  padding: 12px;
  border-radius: 12px;
  border: 2px solid #6a5f3a;
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.3), 0 8px 20px rgba(0,0,0,0.4);
  max-width: 640px;
  width: 100%;
}
.vkey {
  background: linear-gradient(180deg,#5a5140,#3a3428);
  color: #e8dfc8;
  border: 1px solid #2a2418;
  border-radius: 5px;
  min-width: 30px; height: 34px;
  font-size: 12px; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 0 #1a160e, inset 0 1px 1px rgba(255,255,255,0.15);
  user-select: none;
  transition: transform 0.05s;
}
.vkey:active { transform: translateY(2px); box-shadow: 0 0 0 #1a160e; }
.vkey-wide { min-width: 90px; }

/* ---- Footer ---- */
.footer-bar {
  background: rgba(10,12,18,0.9);
  border-top: 1px solid #2a3040;
  color: #8a92a8;
}
input[type=range] { accent-color: var(--amber); }
</parameter>