:root{--beige:#d9d0bc;--beige2:#c4b99f;--ink:#111;--desk:#5a4632;--green:#3f3;}
*{box-sizing:border-box}
body{margin:0;font-family:'IBM Plex Mono',monospace;color:var(--ink);font-size:13px;
background:repeating-linear-gradient(90deg,#5a4632 0 7px,#61503b 7px 9px),#5a4632;min-height:100vh}
.gem-menubar{background:#fff;border-bottom:1px solid #000;display:flex;gap:18px;padding:3px 10px;font-family:'VT323',monospace;font-size:20px}
.gem-menubar .right{margin-left:auto}
.foot{border-top:1px solid #000;font-size:16px;flex-wrap:wrap;justify-content:center}
.foot a{color:#000}
#layout{display:flex;gap:18px;padding:18px;align-items:flex-start;flex-wrap:wrap;justify-content:center}
#machine{flex:1 1 640px;max-width:860px}
.monitor{background:linear-gradient(#e5ddc9,var(--beige));border-radius:22px;padding:22px 22px 8px;box-shadow:0 10px 0 #9e9277,0 20px 40px #0008}
.bezel{background:#2b2a27;border-radius:16px;padding:18px;box-shadow:inset 0 0 20px #000}
.screen-wrap{position:relative;aspect-ratio:320/200;border-radius:14px;overflow:hidden;background:#000;box-shadow:0 0 30px #3f62}
#canvas{width:100%;height:100%;image-rendering:pixelated;display:block;cursor:crosshair;outline:none}
#canvas.nocur{cursor:none}
.scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(#0000 0 2px,#0005 2px 3px),radial-gradient(ellipse at center,#0000 60%,#0007);display:none}
.scanon .scan{display:block}
.monitor-chin{display:flex;justify-content:space-between;align-items:center;padding:8px 6px}
.brand{font-family:'VT323';font-size:22px;letter-spacing:3px;color:#6b604a}
.led{width:12px;height:12px;border-radius:50%;background:#330;display:inline-block;border:1px solid #000}
.led.on{background:var(--green);box-shadow:0 0 10px var(--green)}
.led.small{width:8px;height:8px}.led.fd{background:#f40;box-shadow:0 0 8px #f40}
.console{margin-top:26px;background:linear-gradient(#ddd4c0,var(--beige2));border-radius:10px 10px 18px 18px;padding:14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;box-shadow:0 8px 0 #8d8268,0 18px 30px #0007;transform:perspective(900px) rotateX(8deg)}
.slot{background:#efe8d8;border:1px solid #000;padding:8px;border-radius:4px}
.slot.drag{background:#fff6c0;outline:2px dashed #000}
.slot-title{font-family:'VT323';font-size:20px;border-bottom:1px solid #000;margin-bottom:6px;background:repeating-linear-gradient(#efe8d8 0 2px,#000 2px 3px);display:flex;justify-content:space-between;align-items:center}
.slot-mouth{height:12px;background:#222;border-radius:3px;margin:6px 0}
.floppy-mouth{height:14px;background:#222;border-radius:2px;margin:6px 0;overflow:hidden;position:relative}
.disk{position:absolute;left:20%;width:60%;height:100%;background:#2350a0;transform:translateY(100%);transition:.4s}
.disk.in{transform:translateY(30%)}
.hint{font-size:11px;color:#444;min-height:28px}
.row{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:4px 0}
button{font-family:'VT323';font-size:18px;background:#fff;border:1px solid #000;box-shadow:2px 2px 0 #000;padding:1px 8px;cursor:pointer}
button:active{transform:translate(2px,2px);box-shadow:none}
.rocker{background:#bdb39b}.rocker.on{background:#7c7}
.knob{display:flex;gap:6px;align-items:center;font-family:'VT323';font-size:18px}
#panels{flex:0 1 420px;min-width:300px}
.tabs{display:flex;flex-wrap:wrap}
.tabs button.on{background:#000;color:#fff}
.win{background:#fff;border:1px solid #000;margin-top:6px;padding:0 8px 8px;box-shadow:4px 4px 0 #0006}
.win .title{margin:0 -8px 6px;text-align:center;font-family:'VT323';font-size:20px;border-bottom:1px solid #000;background:repeating-linear-gradient(#fff 0 2px,#000 2px 3px)}
.hidden{display:none}
pre{margin:0;font-size:11px;overflow:auto;max-height:420px}
#log{max-height:300px}
input{font-family:inherit}
table{width:100%;border-collapse:collapse;font-size:12px}
td{border-bottom:1px dotted #999;padding:2px}
tr.f{cursor:pointer}tr.f:hover{background:#000;color:#fff}
.chan{margin:6px 0}.vu{height:10px;border:1px solid #000;background:#fff}.vu i{display:block;height:100%;background:repeating-linear-gradient(90deg,#000 0 3px,#fff 3px 4px)}
.man{font-size:10.5px}
#src{width:100%;height:400px;font-family:'IBM Plex Mono',monospace;font-size:11px;border:1px solid #000;padding:6px;resize:vertical;tab-size:2;background:#fffef6;line-height:1.35;white-space:pre}
#cstat{white-space:pre-wrap;margin-top:4px}
@media(max-width:700px){#layout{padding:8px}.monitor{padding:10px}.bezel{padding:8px}.console{transform:none}}