:root {
  --plastic-1: #2a2622;
  --plastic-2: #17140f;
  --amber: #ff9d3c;
  --red: #e23b2e;
  --green: #33ff66;
  --panel: #1c1a17;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%;
  background:
    radial-gradient(circle at 20% 0%, #241f18 0%, #0d0b08 60%, #050403 100%);
  color: #cbb89a;
  font-family: 'JetBrains Mono', monospace;
}
#machine {
  max-width: 900px; margin: 0 auto;
  padding: 16px; display: flex; flex-direction: column; gap: 14px;
  min-height: 100%;
}

/* ---------- Faceplate ---------- */
#faceplate {
  background:
    linear-gradient(180deg, #34302a 0%, #221e19 55%, #141210 100%);
  border: 1px solid #000;
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 30px rgba(0,0,0,.6);
  padding: 14px 18px;
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: space-between;
}
.logo {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 900; letter-spacing: 2px; font-size: 22px;
  color: #e9dcc3; display: flex; align-items: baseline; gap: 8px;
}
.logo b { color: var(--red); text-shadow: 0 0 12px rgba(226,59,46,.6); }
.logo .berry { filter: drop-shadow(0 0 6px rgba(226,59,46,.8)); }
.logo .sub {
  font-family: 'JetBrains Mono', monospace; font-weight: 300;
  font-size: 11px; color: #8a7c63; letter-spacing: 3px; text-transform: uppercase;
}
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.btn {
  font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 12px;
  color: #d9c7a5; background: linear-gradient(180deg,#3a352d,#221e18);
  border: 1px solid #000; border-radius: 7px; padding: 8px 12px;
  cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
  transition: transform .06s, filter .15s;
}
.btn:hover { filter: brightness(1.2); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(180deg,#3aa14a,#1f6b2b); color:#eafff0; border-color:#0a3315; }
.btn.upload { background: linear-gradient(180deg,#c46326,#8a3f13); color:#fff2e6; border-color:#3a1704; }
.recent {
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  background:#221e18; color:#cbb89a; border:1px solid #000; border-radius:7px;
  padding:7px 8px; cursor:pointer;
}

/* ---------- Bezel / CRT ---------- */
main { display: flex; flex-direction: column; gap: 10px; align-items: center; }
#bezel {
  position: relative;
  background: linear-gradient(160deg,#231f1a,#0c0a08);
  padding: 22px; border-radius: 20px;
  border: 1px solid #000;
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,.8),
    inset 0 -2px 6px rgba(255,255,255,.04),
    0 20px 50px rgba(0,0,0,.7);
  width: 100%; max-width: 780px;
}
#canvas {
  display: block; width: 100%; height: auto;
  aspect-ratio: 240 / 224;
  image-rendering: pixelated; image-rendering: crisp-edges;
  background: #060814;
  border-radius: 6px;
  box-shadow: 0 0 30px rgba(51,255,102,.08), inset 0 0 60px rgba(0,0,0,.6);
}
.scanlines {
  position: absolute; inset: 22px; border-radius: 6px; pointer-events: none;
  background: repeating-linear-gradient(
    0deg, rgba(0,0,0,.28) 0px, rgba(0,0,0,.28) 1px,
    transparent 1px, transparent 3px);
  mix-blend-mode: multiply;
}
.vignette {
  position: absolute; inset: 22px; border-radius: 6px; pointer-events: none;
  box-shadow: inset 0 0 60px rgba(0,0,0,.55);
}
.led {
  position: absolute; top: 8px; right: 14px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #3a1210; box-shadow: inset 0 0 3px #000;
}
.led.on {
  background: var(--red);
  box-shadow: 0 0 10px 2px rgba(226,59,46,.9), inset 0 0 3px #ff8a80;
}

/* ---------- Status / options ---------- */
#statusbar {
  width: 100%; max-width: 780px;
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  font-size: 11px; color: #9c8a6d;
  background: #14120f; border: 1px solid #000; border-radius: 8px;
  padding: 8px 12px;
}
#statusbar span { white-space: nowrap; }
#regs { color: var(--green); }
#fps { color: var(--amber); }
#options {
  width: 100%; max-width: 780px;
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  font-size: 12px; color: #a89madd;
}
#options label { cursor: pointer; display: flex; gap: 6px; align-items: center; color:#b7a482; }
.hint { color: #6f624c; font-weight: 300; font-style: italic; }

/* ---------- Footer ---------- */
footer {
  margin-top: auto; text-align: center; font-size: 11px;
  color: #6f624c; font-weight: 300; padding: 10px;
}
footer a { color: var(--amber); text-decoration: none; border-bottom: 1px dotted var(--amber); }
footer a:hover { color: #ffbf73; }

@media (max-width: 560px) {
  .logo { font-size: 18px; }
  #faceplate { padding: 12px; }
  .toolbar { width: 100%; justify-content: flex-start; }
  #bezel { padding: 14px; }
  .scanlines, .vignette { inset: 14px; }
}
</parameter>
</invoke>