*{margin:0;padding:0;box-sizing:border-box;user-select:none;-webkit-user-select:none}
html,body{width:100%;height:100%;overflow:hidden;background:#04020a;touch-action:manipulation}
body{display:flex;align-items:center;justify-content:center}
#screen{
  position:relative;width:80ch;height:40em;
  background:#0a0710;color:#00ff66;
  font-family:'IBM Plex Mono','Courier New',monospace;
  font-size:16px;line-height:1em;letter-spacing:0;
  border:1px solid #1d4a33;
  box-shadow:0 0 80px rgba(0,255,102,.07),0 0 8px rgba(0,255,102,.15);
  transform-origin:center center;overflow:hidden;
}
#topbar{height:1em;display:flex;justify-content:space-between;background:#062a1a;color:#7dffb0;border-bottom:1px solid #1d4a33;white-space:pre;overflow:hidden;padding:0 2px}
#workspace{height:37em;display:flex;overflow:hidden}
#panels{display:flex;width:100%;height:100%}
#modeview{display:none;width:100%;height:100%}
#left{width:40ch;overflow:hidden;border-right:1px solid #1d4a33}
#right{width:40ch;overflow:hidden;padding:2px 0}
.row{height:1em;white-space:pre;overflow:hidden;padding-left:1px;cursor:default}
.row.sel{background:#00ff66;color:#04020a}
.row-up{height:1em;white-space:pre;overflow:hidden;padding-left:1px;color:#4a8a63}
.row-up.sel{background:#00ff66;color:#04020a}
.pzrow{height:1em;white-space:pre;overflow:hidden;padding-left:1px;cursor:pointer}
.pzrow.sel{background:#00ff66;color:#04020a}
.pzrow.src{background:#ffb000;color:#04020a}
.cursor.cb{width:1ch}
.hidden-input{position:absolute;left:-9999px;top:-9999px;opacity:0;width:1px;height:1px;border:0;padding:0;outline:none;caret-color:transparent;font-size:16px;background:transparent;color:transparent}
.row.head{color:#4a8a63}
#statusline{height:1em;white-space:pre;overflow:hidden;color:#4a8a63;background:#04120b;border-top:1px solid #1d4a33;padding-left:1px}
#statusline.err{color:#ff4040}
#statusline.warn{color:#ffb000}
#fbar{height:1em;display:flex;background:#062a1a;border-top:1px solid #1d4a33}
#fbar .key{flex:1;white-space:pre;overflow:hidden;text-align:center;color:#7dffb0;cursor:pointer;padding:0 1px}
#fbar .key.hot{background:#00ff66;color:#04020a}
#fbar .key:hover{background:#0a4a2c;color:#b3ffcf}
.viewer{height:37em;overflow:hidden;padding:2px 4px;white-space:pre;font-size:16px;line-height:1em}
.promptline{color:#ffb000}
.dim{color:#4a8a63}
.err{color:#ff4040}
.amber{color:#ffb000}
.cursor{display:inline-block;width:.6em;height:1em;background:#00ff66;vertical-align:text-bottom;animation:blink 1s step-end infinite}
@keyframes blink{from,to{opacity:1}50%{opacity:0}}
.crt{position:fixed;inset:0;pointer-events:none;z-index:50;
  background:linear-gradient(rgba(18,16,16,0) 50%,rgba(0,0,0,.28) 50%);
  background-size:100% 3px;opacity:.18}
.crt::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%)}
#zoom-btn{position:fixed;top:calc(8px + env(safe-area-inset-top));right:calc(8px + env(safe-area-inset-right));z-index:40;font-family:'IBM Plex Mono','Courier New',monospace;font-size:13px;line-height:1;color:#ffb000;background:rgba(10,7,16,0.88);border:1px solid #ffb000;padding:7px 10px;cursor:pointer;touch-action:manipulation}
#zoom-btn.zoomed{color:#00ff66;border-color:#00ff66}
/* Тач-панель функций: фиксированная, вне масштабируемого экрана */
#fbar-touch{display:none}
@media (pointer:coarse){
  #screen{height:39em}
  #fbar{display:none}
  #fbar-touch{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:45;
    height:calc(52px + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom);
    background:#062a1a;border-top:1px solid #1d4a33;
    font-family:'IBM Plex Mono','Courier New',monospace;
    touch-action:manipulation;
  }
  #fbar-touch .key{
    flex:1;display:flex;align-items:center;justify-content:center;
    font-size:14px;line-height:1;color:#7dffb0;cursor:pointer;overflow:hidden;
  }
  #fbar-touch .key:active{background:#0a4a2c;color:#b3ffcf}
}