*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-main: #000080;--bg-output: #000000;--bg-editor: #000040;--bg-panel: #000060;--text-normal: #c0c0c0;--text-bright: #ffffff;--text-cyan: #00ffff;--border-raised: 2px outset #4040c0;--border-sunken: 2px inset #000040;--font-mono: "Consolas", "Courier New", "Liberation Mono", monospace;--font-ui: "MS Sans Serif", "Microsoft Sans Serif", "Segoe UI", system-ui, sans-serif}html,body{height:100%;background:var(--bg-main);color:var(--text-normal);font-family:var(--font-ui);font-size:14px;overflow:hidden}#app{display:flex;flex-direction:column;height:100%;padding:8px;gap:8px}#toolbar{display:flex;align-items:center;gap:6px;padding:4px 8px;background:var(--bg-main);border:var(--border-raised);flex-shrink:0}#toolbar button{font-family:var(--font-ui);font-size:13px;padding:3px 12px;background:silver;border:2px outset #e0e0e0;cursor:pointer}#toolbar button:active{border-style:inset}#toolbar button:hover{background:#d0d0d0}#toolbar select{font-family:var(--font-ui);font-size:13px;padding:2px 6px;background:silver;border:2px outset #e0e0e0;color:#000;cursor:pointer}#status{font-family:var(--font-mono);font-size:12px;color:var(--text-cyan);padding:0 8px}#main-area{flex:1;display:flex;flex-direction:row;gap:8px;min-height:0}#editor-col{flex:2;display:flex;flex-direction:column;min-width:0;min-height:0}#output-col{flex:2;display:flex;flex-direction:column;min-width:0;align-self:flex-start}#editor-wrap{flex:1;display:flex;flex-direction:row;border:var(--border-sunken);overflow:hidden;min-height:0}#editor-label,#output-label{background:var(--bg-panel);color:var(--text-bright);padding:2px 8px;font-size:12px;font-weight:700;flex-shrink:0}#output-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0}#output-header #output-label{flex:1}#clearConsoleBtn{font-family:var(--font-ui);font-size:11px;padding:1px 8px;background:silver;border:2px outset #e0e0e0;cursor:pointer;color:#000;flex-shrink:0}#clearConsoleBtn:hover{background:#d0d0d0}#clearConsoleBtn:active{border-style:inset}#editor-gutter{width:44px;min-width:44px;background:#000030;color:#6060a0;padding:8px 4px 8px 0;font-family:var(--font-mono);font-size:14px;line-height:1.4;text-align:right;overflow:hidden;user-select:none;white-space:pre;border-right:1px solid #3030a0}#editor{flex:1;width:100%;background:var(--bg-editor);color:var(--text-bright);border:none;padding:8px;font-family:var(--font-mono);font-size:14px;line-height:1.4;resize:none;outline:none;tab-size:4}#editor::selection{background:#404080}:root{--phosphor: #33ff33;--phosphor-dim: #1a8c1a;--phosphor-glow: rgba(51, 255, 51, .45);--phosphor-faint: rgba(51, 255, 51, .08)}#output-wrap{flex:none;height:370px;display:flex;flex-direction:column;border:var(--border-sunken);overflow:hidden;box-shadow:0 0 0 2px #111,0 0 18px 4px #33ff331f;border-radius:6px}#output{flex:1;background:#050f05;color:var(--phosphor);padding:10px 12px;font-family:var(--font-mono);font-size:14px;line-height:1;overflow-y:auto;overflow-x:hidden;white-space:pre-wrap;word-break:break-word;user-select:text;position:relative;text-shadow:0 0 3px var(--phosphor-glow),0 0 8px rgba(51,255,51,.2);box-shadow:inset 0 0 40px #000000b3,inset 0 0 4px #33ff330d;border-radius:6px;scroll-behavior:smooth}#output:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0px,transparent 2px,rgba(0,0,0,.18) 2px,rgba(0,0,0,.18) 3px);pointer-events:none;z-index:2;border-radius:6px}#output:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,transparent 60%,rgba(0,0,0,.35) 100%);pointer-events:none;z-index:1;border-radius:6px}#output span[style]{text-shadow:inherit}@keyframes blink{0%,49%{opacity:1}50%,to{opacity:0}}.input-line{display:flex;align-items:baseline;flex-wrap:wrap;white-space:normal;font-family:var(--font-mono);font-size:14px;line-height:1;color:var(--phosphor);text-shadow:0 0 3px var(--phosphor-glow),0 0 8px rgba(51,255,51,.2);position:relative;z-index:3}.input-prompt,#typed-text{white-space:pre}.cursor:after{content:"\2588";display:inline;animation:blink .75s step-end infinite;color:var(--phosphor);text-shadow:0 0 6px var(--phosphor-glow)}#stopBtn{background:#c04040!important;border-color:#e06060!important;color:#fff!important}#stopBtn:hover{background:#d05050!important}#stopBtn:active{border-style:inset!important}#runBtn:disabled{opacity:.5;cursor:not-allowed}#newFileBtn{margin-left:30px}#canvas-wrap{display:inline-flex;flex:none;width:fit-content;height:fit-content;padding:12px;margin-top:8px;background:#050505;border:var(--border-sunken);border-radius:6px;align-items:center;justify-content:center;box-shadow:0 0 0 2px #111,0 0 18px 4px #33ff3314}#gfx-canvas{display:block;image-rendering:pixelated}#statusbar{display:flex;align-items:center;padding:2px 8px;background:var(--bg-main);border:var(--border-raised);font-size:12px;color:var(--text-cyan);flex-shrink:0}#guide-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#000000d9;z-index:1000;align-items:center;justify-content:center}#guide-box{background:var(--bg-panel);border:3px double #8080ff;color:var(--text-bright);font-family:var(--font-ui);font-size:13px;padding:24px;max-width:720px;max-height:85%;overflow-y:auto;line-height:1.5}#guide-box h2{color:#ff0;font-size:18px;margin-bottom:4px}#guide-box h3{color:#0ff;font-size:14px;margin:16px 0 4px;border-bottom:1px solid #4040c0;padding-bottom:2px}#guide-box table{width:100%;border-collapse:collapse;margin:4px 0 8px}#guide-box td{padding:2px 8px;vertical-align:top;border-bottom:1px solid #202060}#guide-box td:first-child{white-space:nowrap;width:max-content}#guide-box code{font-family:var(--font-mono);color:#ff0;background:#000040;padding:0 3px}#guide-box ul{margin:4px 0 8px 16px}#guide-box li{margin:2px 0}#guide-box p{margin-bottom:8px;color:silver}@media(max-width:900px){#main-area{flex-direction:column}#output-col{flex:none;height:200px}}