:root{
  --beige:#d8cfbf;
  --beige-dark:#b5ab97;
  --brown:#5a4632;
  --brown-dark:#3a2c1e;
  --amber:#e8a33d;
  --cyan:#63d4dd;
  --screen-bg:#1b1b3a;
  --font-mono:'JetBrains Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:var(--font-mono);
  background:
    radial-gradient(circle at 20% 10%, #2a2016 0%, transparent 50%),
    radial-gradient(circle at 80% 90%, #241a12 0%, transparent 50%),
    #150f0a;
  color:#e8dfce;
  min-height:100vh;
  padding:16px;
}
#app{max-width:760px;margin:0 auto;}

header{text-align:center;margin-bottom:22px;}
header h1{
  font-family:'Bricolage Grotesque','JetBrains Mono',sans-serif;
  font-weight:800;
  letter-spacing:-1px;
  font-size:clamp(1.6rem,6vw,2.8rem);
  background:linear-gradient(90deg,#e84a4a,#e8a33d,#7ac74f,#63d4dd,#7a6fd4,#c77ad4);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
header .pal{
  -webkit-text-fill-color:#150f0a;
  background:var(--amber);
  padding:0 8px; border-radius:4px;
}
header .sub{color:var(--beige-dark);font-size:.72rem;margin-top:6px;letter-spacing:.5px;}

/* ---------- LOADER ---------- */
#loader{
  background:linear-gradient(180deg,var(--beige),var(--beige-dark));
  border:3px solid var(--brown-dark);
  border-radius:14px;
  padding:18px;
  box-shadow:0 8px 0 var(--brown-dark),0 14px 30px rgba(0,0,0,.5);
  color:var(--brown-dark);
  transition:.3s;
}
#loader.collapsed{
  padding:8px 14px; opacity:.55; filter:grayscale(.4);
}
#loader.collapsed .rom-slots,#loader.collapsed .loader-actions,#loader.collapsed .hint{display:none;}
#loader h2{font-family:'Bricolage Grotesque';font-weight:800;font-size:1rem;letter-spacing:2px;}
.hint{font-size:.72rem;margin:6px 0 14px;color:var(--brown);}

.rom-slots{display:grid;grid-template-columns:1fr;gap:10px;}
@media(min-width:620px){.rom-slots{grid-template-columns:repeat(3,1fr);}}

.rom-slot{
  background:rgba(255,255,255,.35);
  border:2px dashed var(--brown);
  border-radius:10px;
  padding:14px 10px;
  text-align:center;
  cursor:pointer;
  transition:.15s;
}
.rom-slot:hover{background:rgba(255,255,255,.6);transform:translateY(-2px);}
.rom-slot.drag{background:var(--cyan);border-style:solid;}
.rom-slot.loaded{border-color:#2e7d32;background:rgba(120,199,79,.35);border-style:solid;}
.rom-slot.warn{border-color:#c0392b;background:rgba(231,76,60,.25);}
.rom-status{font-size:1.4rem;line-height:1;}
.rom-name{font-size:.68rem;font-weight:700;margin:6px 0 3px;word-break:break-all;}
.rom-addr{font-size:.62rem;color:var(--brown);}

.loader-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px;}
.cart-load{
  font-size:.66rem;color:var(--brown);cursor:pointer;
  border:1px dashed var(--brown);border-radius:6px;padding:6px 8px;
}
button{
  font-family:var(--font-mono);font-weight:700;
  cursor:pointer;border:none;border-radius:8px;
}
#power-btn{
  background:var(--brown-dark);color:var(--amber);
  padding:10px 18px;font-size:.9rem;letter-spacing:1px;
  box-shadow:0 4px 0 #000;
}
#power-btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;}
#power-btn:not(:disabled){animation:glow 1.6s ease-in-out infinite;}
@keyframes glow{50%{box-shadow:0 4px 0 #000,0 0 18px var(--amber);}}
.ghost{background:rgba(0,0,0,.12);color:var(--brown-dark);padding:8px 12px;font-size:.7rem;}
.ghost.active{background:var(--amber);color:var(--brown-dark);}
#boot-msg{margin-top:12px;font-size:.72rem;color:var(--brown-dark);min-height:1em;}

/* ---------- MACHINE ---------- */
.hidden{display:none;}
#machine{margin-top:20px;}
.monitor{
  background:linear-gradient(180deg,var(--beige),var(--beige-dark));
  border:3px solid var(--brown-dark);
  border-radius:18px;
  padding:18px 18px 10px;
  box-shadow:0 10px 0 var(--brown-dark),0 18px 40px rgba(0,0,0,.6);
}
.screen-wrap{
  position:relative;
  background:#000;
  border-radius:10px;
  padding:10px;
  border:6px solid #201a14;
  box-shadow:inset 0 0 30px rgba(0,0,0,.9);
  display:flex;justify-content:center;
  overflow:hidden;
}
#canvas{
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  border-radius:6px;
  display:block;
  filter:saturate(1.1) brightness(1.05);
}
.scanlines{
  position:absolute;inset:10px;border-radius:6px;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);
  mix-blend-mode:multiply;
}
.vignette{
  position:absolute;inset:10px;border-radius:6px;pointer-events:none;
  box-shadow:inset 0 0 60px rgba(0,0,0,.7);
}
.brand{
  text-align:center;color:var(--brown-dark);
  font-family:'Bricolage Grotesque';font-weight:800;
  letter-spacing:3px;font-size:.8rem;margin-top:10px;
}

#controls{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin:16px 0;justify-content:center;
}
#controls button{
  background:var(--brown);color:var(--beige);
  padding:9px 12px;font-size:.72rem;
  box-shadow:0 3px 0 var(--brown-dark);
}
#controls button:active{transform:translateY(2px);box-shadow:0 1px 0 var(--brown-dark);}
#controls .active{background:var(--amber);color:var(--brown-dark);}
#vol{accent-color:var(--amber);width:90px;}

/* ---------- OSK ---------- */
#osk{display:flex;flex-direction:column;gap:5px;align-items:center;margin-bottom:14px;}
.osk-row{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;}
.osk-key{
  background:linear-gradient(180deg,#efe7d6,#c9bfa8);
  color:var(--brown-dark);
  border:1px solid var(--brown);
  border-radius:6px;
  min-width:30px;height:34px;
  font-size:.78rem;font-weight:700;
  box-shadow:0 3px 0 var(--brown);
  transition:.05s;
}
.osk-key:active,.osk-key.active{transform:translateY(2px);box-shadow:0 1px 0 var(--brown);background:var(--amber);}
.wide-space{min-width:120px;}
.wide-ret{min-width:80px;background:linear-gradient(180deg,#e8c98a,#c9a860);}

/* ---------- DEBUG ---------- */
#debug{
  background:#0d0a07;border:2px solid var(--brown);border-radius:10px;
  padding:12px;margin-bottom:14px;font-size:.72rem;
}
.dbg-regs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px;color:var(--cyan);}
.dbg-regs span{background:#1a140d;padding:4px 8px;border-radius:5px;}
.dbg-regs .led{color:#666;}
.dbg-regs .led.on{color:#e84a4a;text-shadow:0 0 8px #e84a4a;}
.dbg-mem-ctl{margin-bottom:6px;display:flex;gap:6px;align-items:center;color:var(--beige-dark);}
.dbg-mem-ctl input{width:60px;background:#1a140d;color:var(--amber);border:1px solid var(--brown);border-radius:4px;padding:3px 5px;font-family:var(--font-mono);}
.dbg-mem-ctl button{background:var(--brown);color:var(--beige);padding:4px 10px;font-size:.7rem;border-radius:5px;}
#mem-dump{color:#7ac74f;font-size:.68rem;line-height:1.5;white-space:pre;overflow-x:auto;}

/* ---------- FOOTER ---------- */
footer{
  text-align:center;margin-top:24px;color:var(--beige-dark);
  font-size:.7rem;
}
footer a{color:var(--amber);text-decoration:none;}
footer a:hover{text-decoration:underline;}
#free-msg{color:var(--cyan);}
</parameter>
</invoke>