:root{--beige:#d8cfb8;--beige2:#c6bc9f;--dark:#5a5240;--ph:#33ff66;--glow:rgba(51,255,102,.55)}
body.amber{--ph:#ffb000;--glow:rgba(255,176,0,.55)}
body.white{--ph:#e8f0ff;--glow:rgba(220,230,255,.5)}
*{box-sizing:border-box}
body{margin:0;font-family:'IBM Plex Mono',monospace;color:#2b2618;min-height:100vh;
background:repeating-linear-gradient(45deg,#3b3a35 0 2px,#34332e 2px 6px);padding:10px}
.box{background:linear-gradient(#e2dac4,var(--beige));border:2px solid;border-color:#f4eedd #8d8468 #8d8468 #f4eedd;border-radius:6px;box-shadow:0 4px 0 #6e6650,0 8px 20px #0008;position:relative}
header{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:14px 22px;margin-bottom:10px}
.screw{position:absolute;width:9px;height:9px;border-radius:50%;background:radial-gradient(#aaa,#555);}
.screw:after{content:'';position:absolute;left:1px;right:1px;top:4px;height:1px;background:#333}
.tl{top:4px;left:4px}.tr{top:4px;right:4px}.bl{bottom:4px;left:4px}.br{bottom:4px;right:4px}
h1{font-family:'Press Start 2P';font-size:15px;margin:0;letter-spacing:1px;color:#3d3624;text-shadow:1px 1px #fff8}
h1 em{color:#b0301e;font-style:normal}
h2{font-family:'Press Start 2P';font-size:10px;margin:0 0 8px;color:var(--dark)}
.baud{font-size:11px;margin-left:auto;cursor:help;border:1px dashed #8d8468;padding:3px 6px}
.leds{display:flex;gap:10px}
.led{display:flex;flex-direction:column;align-items:center;font-size:9px;font-weight:700}
.led i{width:12px;height:8px;border-radius:3px;background:#5a1a12;border:1px solid #3a120c;margin-bottom:2px;transition:background .03s}
.led.on i{background:#ff3b20;box-shadow:0 0 8px #ff4a2a,0 0 2px #fff inset}
main{display:grid;grid-template-columns:260px 1fr 320px;gap:10px}
@media(max-width:1000px){main{grid-template-columns:1fr}#termWrap{order:-1}}
.panel{padding:12px}
.field{width:100%;font-family:'VT323';font-size:20px;padding:4px 6px;background:#f7f3e6;border:2px inset #b8af93;margin-bottom:8px}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:8px}
.btn{font-family:'IBM Plex Mono';font-weight:700;font-size:11px;background:var(--beige);border:2px solid;border-color:#fff #6e6650 #6e6650 #fff;padding:6px;cursor:pointer;color:#2b2618}
.btn:active,.btn.down{border-color:#6e6650 #fff #fff #6e6650;transform:translateY(1px)}
.btn:disabled{opacity:.45}
.big{flex:1;padding:10px;font-family:'Press Start 2P';font-size:9px}
.red{color:#9b1c0e}
.row{display:flex;gap:6px;margin-bottom:8px}
#skip,#acoustic,#spk{width:100%;margin-bottom:8px}
.lbl{display:block;font-size:11px;font-weight:700;margin-bottom:6px}
.lbl input[type=range]{width:100%}
.hint{font-size:10px;color:#5a5240;margin:0}
.crt{background:#050805;border-radius:18px;padding:16px;height:440px;overflow:hidden;position:relative;border:10px solid #2a2820;box-shadow:inset 0 0 60px #000,inset 0 0 12px var(--glow)}
.crt:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,#0000 0 2px,#0006 2px 3px);pointer-events:none;z-index:2}
.crt:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,#0000 55%,#000b);pointer-events:none;z-index:2}
#term{margin:0;height:100%;overflow-y:auto;font-family:'VT323';font-size:20px;line-height:1.05;color:var(--ph);text-shadow:0 0 6px var(--glow),0 0 1px var(--ph);white-space:pre-wrap;word-break:break-all}
.cur{animation:bl 1s steps(1) infinite}
@keyframes bl{50%{opacity:0}}
.txrow{display:flex;gap:6px;align-items:center;margin:8px 0;font-family:'VT323';font-size:20px}
#tx{flex:1;font-family:'VT323';font-size:20px;background:#111;color:var(--ph);border:2px inset #777;padding:4px 8px}
.colors .btn{flex:1}
.scr{background:#0a0f0a;border:3px inset #8d8468;margin-bottom:8px;padding:4px;position:relative}
.scr span{font-size:9px;color:#7fa;position:absolute;top:3px;left:6px;z-index:1}
.scr canvas{width:100%;display:block}
#bits{font-family:'VT323';font-size:16px;color:#7fa;padding:14px 2px 2px;word-break:break-all;min-height:56px}
#bits .st,.scr .st{color:#5cf}#bits .sp,.scr .sp{color:#f75}
.stats{width:100%;font-size:11px;border-collapse:collapse}
.stats td{border-bottom:1px dotted #8d8468;padding:3px}
.stats td:last-child{text-align:right;font-weight:700}
.meter{height:8px;background:#333;border:1px inset #999}
.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3f3,#ff0,#f33)}
.status{display:flex;flex-wrap:wrap;gap:16px;padding:8px 14px;margin-top:10px;font-size:12px}
#status{flex:1}
.foot{text-align:center;padding:10px;font-size:11px}
.foot a{color:var(--beige)}