:root{
  --phos: #33ff33;
  --glow: rgba(51,255,51,0.6);
  --dim: #0a4a0a;
}
body.amber{
  --phos: #ffb000;
  --glow: rgba(255,176,0,0.6);
  --dim: #4a2f00;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:#000;height:100%;}
body{
  font-family:'VT323',monospace;
  color:var(--phos);
  overflow-x:hidden;
  animation:flicker 6s infinite;
}
@keyframes flicker{
  0%,96%,100%{opacity:1;}
  97%{opacity:.85;}
  98%{opacity:1;}
  98.5%{opacity:.9;}
}
#crt{
  max-width:760px;
  margin:0 auto;
  padding:12px 14px 30px;
  min-height:100vh;
}
#topbar{
  font-size:22px;
  text-shadow:0 0 6px var(--glow);
  border-bottom:2px solid var(--phos);
  padding-bottom:6px;
  margin-bottom:10px;
  line-height:1.1;
}
#topbar .tagline{
  font-size:18px;
  opacity:.8;
}
#topbar .blink{animation:blink 1s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}
#topbar .wc{float:right;font-size:18px;}
canvas{
  display:block;
  width:100%;
  background:#000;
  border:2px solid var(--phos);
  box-shadow:0 0 18px var(--glow) inset, 0 0 12px var(--glow);
  image-rendering:pixelated;
}
#dropzone{
  margin-top:12px;
  border:2px dashed var(--phos);
  background:#050805;
  padding:14px 12px;
  text-align:center;
  cursor:pointer;
  font-size:19px;
  color:var(--phos);
  text-shadow:0 0 5px var(--glow);
  transition:.12s;
  line-height:1.3;
}
#dropzone:hover{background:var(--dim);}
#dropzone.drag-over{
  background:var(--dim);
  box-shadow:0 0 18px var(--glow) inset;
  transform:scale(1.01);
}
#dropzone.loaded{
  border-style:solid;
}
#dropzone .dz-text{display:block;}
#dropzone .dz-file{
  display:block;
  font-size:17px;
  opacity:.85;
  margin-top:4px;
}
#controls{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.readout{
  font-size:26px;
  text-shadow:0 0 6px var(--glow);
  flex-basis:100%;
}
.readout .num{letter-spacing:2px;}
button.dos{
  font-family:'VT323',monospace;
  font-size:22px;
  background:#111;
  color:var(--phos);
  border:2px solid var(--phos);
  padding:4px 16px;
  cursor:pointer;
  text-shadow:0 0 5px var(--glow);
  box-shadow:2px 2px 0 var(--phos);
  transition:.08s;
}
button.dos:hover{background:var(--dim);box-shadow:0 0 14px var(--glow);}
button.dos:active{transform:translate(2px,2px);box-shadow:0 0 0;}
button.dos.big{font-size:26px;padding:6px 26px;}
button.dos:disabled{opacity:.35;cursor:not-allowed;box-shadow:none;}
.toggle,.flag{
  font-size:20px;
  cursor:pointer;
  user-select:none;
  border:2px dashed var(--phos);
  padding:2px 10px;
}
.toggle:hover,.flag:hover{background:var(--dim);}
#terminal{
  margin-top:14px;
  border:2px solid var(--phos);
  background:#000;
  height:180px;
  overflow-y:auto;
  padding:6px 10px;
  font-size:19px;
  line-height:1.15;
  text-shadow:0 0 4px var(--glow);
  white-space:pre-wrap;
}
#terminal::-webkit-scrollbar{width:10px;}
#terminal::-webkit-scrollbar-thumb{background:var(--dim);}
#terminal .cursor{animation:blink 1s steps(1) infinite;}
#footer{
  margin-top:16px;
  font-size:18px;
  opacity:.8;
  border-top:2px solid var(--dim);
  padding-top:8px;
}
#footer a{color:var(--phos);}
/* CRT overlays */
.scanlines{
  pointer-events:none;
  position:fixed;inset:0;z-index:50;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0px,rgba(0,0,0,0) 2px,rgba(0,0,0,0.25) 3px,rgba(0,0,0,0.25) 4px);
}
.vignette{
  pointer-events:none;
  position:fixed;inset:0;z-index:49;
  background:radial-gradient(ellipse at center,rgba(0,0,0,0) 55%,rgba(0,0,0,0.55) 100%);
}
.cert{
  margin-top:12px;
  border:3px double var(--phos);
  padding:10px 14px;
  font-size:20px;
  text-shadow:0 0 5px var(--glow);
  animation:certIn .5s ease;
}
@keyframes certIn{from{opacity:0;transform:scale(.9);}to{opacity:1;transform:scale(1);}}
.cert h3{margin:0 0 6px;font-size:24px;}
@media(max-width:520px){
  #topbar{font-size:18px;}
  .readout{font-size:22px;}
  button.dos{font-size:19px;}
}