@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap";:root{--bg-primary: #080808;--bg-panel: #0d0d0d;--bg-control: #141414;--bg-control-hover: #1f1f1f;--border-color: #272727;--border-active: #00ff66;--text-primary: #00ff66;--text-muted: #4e8c61;--text-dim: #254a31;--accent: #00ff66;--accent-glow: rgba(0, 255, 102, .15);--font-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, monospace}body.theme-green{--bg-primary: #040905;--bg-panel: #07120a;--bg-control: #0c1f11;--bg-control-hover: #132f1b;--border-color: #1a4225;--border-active: #00ff66;--text-primary: #00ff66;--text-muted: #57a873;--text-dim: #225732;--accent: #00ff66;--accent-glow: rgba(0, 255, 102, .2)}body.theme-amber{--bg-primary: #090602;--bg-panel: #120d04;--bg-control: #1f1708;--bg-control-hover: #2f220c;--border-color: #4a3713;--border-active: #ffb000;--text-primary: #ffb000;--text-muted: #b8861d;--text-dim: #5c4109;--accent: #ffb000;--accent-glow: rgba(255, 176, 0, .2)}body.theme-cyan{--bg-primary: #03080a;--bg-panel: #061117;--bg-control: #0b202c;--bg-control-hover: #103245;--border-color: #194b66;--border-active: #00f0ff;--text-primary: #00f0ff;--text-muted: #4ca3ba;--text-dim: #1f505e;--accent: #00f0ff;--accent-glow: rgba(0, 240, 255, .2)}body.theme-monochrome{--bg-primary: #0a0a0a;--bg-panel: #111111;--bg-control: #1a1a1a;--bg-control-hover: #262626;--border-color: #333333;--border-active: #ffffff;--text-primary: #f0f0f0;--text-muted: #888888;--text-dim: #444444;--accent: #ffffff;--accent-glow: rgba(255, 255, 255, .15)}body.theme-blood{--bg-primary: #0a0304;--bg-panel: #140709;--bg-control: #210c0f;--bg-control-hover: #331318;--border-color: #4f1d24;--border-active: #ff3344;--text-primary: #ff3344;--text-muted: #b5454f;--text-dim: #591b22;--accent: #ff3344;--accent-glow: rgba(255, 51, 68, .2)}body.theme-paper{--bg-primary: #f0eee6;--bg-panel: #e6e2d6;--bg-control: #dcd7c6;--bg-control-hover: #cecaa8;--border-color: #b5ae96;--border-active: #111111;--text-primary: #151515;--text-muted: #555246;--text-dim: #948e7b;--accent: #151515;--accent-glow: rgba(0, 0, 0, .1)}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%;margin:0;padding:0;overflow:hidden;background-color:var(--bg-primary);color:var(--text-primary);font-family:var(--font-mono);font-size:12px;line-height:1.4;-webkit-user-select:none;user-select:none;font-variant-ligatures:none;-webkit-font-variant-ligatures:none;font-feature-settings:"liga" 0,"calt" 0,"dlig" 0}.app-container{display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden}.app-header{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;border-bottom:1px solid var(--border-color);background-color:var(--bg-panel);height:46px;flex-shrink:0}.brand-title{font-size:13px;font-weight:700;letter-spacing:.5px;display:flex;align-items:center;gap:8px;white-space:nowrap}.brand-logo{font-size:14px}.brand-badge{font-size:9px;padding:1px 5px;background:var(--accent);color:var(--bg-primary);font-weight:700}.header-actions{display:flex;gap:6px;align-items:center;flex-shrink:0}@media(max-width:600px){.app-header{padding:6px 10px;height:46px}.brand-title{gap:6px}.brand-logo{font-size:12px}.brand-main{display:flex;flex-direction:column;line-height:1.1}.brand-word{font-size:11px;font-weight:800;color:var(--accent);letter-spacing:.5px}.brand-sub{font-size:8.5px;font-weight:600;color:var(--text-muted);letter-spacing:.2px}.brand-badge{font-size:8px;padding:1px 4px}.header-actions{gap:4px}.header-actions .btn{padding:5px 8px;font-size:10.5px}}.main-workspace{display:flex;flex:1 1 0;min-height:0;height:calc(100vh - 44px);max-height:calc(100vh - 44px);overflow:hidden}.viewport-pane{flex:1;display:flex;flex-direction:column;border-right:1px solid var(--border-color);position:relative;overflow:hidden;background-color:var(--bg-primary)}.viewport-canvas-container{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;cursor:crosshair;background:radial-gradient(circle at center,var(--accent-glow) 0%,transparent 70%)}.ascii-pre{font-family:var(--font-mono);white-space:pre;line-height:1;letter-spacing:0px;color:var(--text-primary);text-shadow:0 0 2px var(--accent-glow);transform-origin:center center;transition:transform .05s ease;pointer-events:none;font-variant-ligatures:none;-webkit-font-variant-ligatures:none;font-feature-settings:"liga" 0,"calt" 0,"dlig" 0}.viewport-bottom-bar{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;background-color:var(--bg-panel);border-top:1px solid var(--border-color);font-size:11px;gap:8px;flex-shrink:0;flex-wrap:wrap}.status-group{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.status-tag{color:var(--text-muted);font-size:11px;white-space:nowrap}.status-tag strong{color:var(--text-primary)}.mode-tag{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px}@media(max-width:950px){.mode-tag{max-width:180px}}@media(max-width:768px){.viewport-bottom-bar{padding:6px 10px;gap:8px;row-gap:6px;justify-content:space-between}.status-group{gap:6px}.status-tag{font-size:10.5px}.mode-tag{display:none}.viewport-bottom-bar .btn-sm{padding:6px 10px;font-size:11px;min-height:28px;display:inline-flex;align-items:center;justify-content:center}}@media(max-width:480px){.viewport-bottom-bar{padding:6px 8px;gap:6px}.viewport-bottom-bar .btn-sm{padding:5px 8px;font-size:10.5px;min-height:28px}.status-tag.res-tag{display:none}}.sidebar-pane{width:500px;display:flex;flex-direction:column;background-color:var(--bg-panel);overflow-y:auto!important;overflow-x:hidden;flex-shrink:0;height:100%;max-height:100%;scrollbar-width:thin;scrollbar-color:var(--border-color) transparent;-webkit-overflow-scrolling:touch}.sidebar-pane::-webkit-scrollbar{width:6px}.sidebar-pane::-webkit-scrollbar-track{background:transparent}.sidebar-pane::-webkit-scrollbar-thumb{background-color:var(--border-color);border-radius:3px}.sidebar-pane::-webkit-scrollbar-thumb:hover{background-color:var(--accent)}@media(max-width:1100px){.sidebar-pane{width:440px}}@media(max-width:850px){.sidebar-pane{width:360px}}@media(max-width:768px){.main-workspace{flex-direction:column;height:auto;max-height:none;overflow-y:auto}.viewport-pane{border-right:none;border-bottom:1px solid var(--border-color);height:42vh;min-height:240px;flex-shrink:0}.sidebar-pane{width:100%;height:auto;min-height:58vh;flex:1;overflow-y:visible!important}.tab-nav{position:sticky;top:0;z-index:30}}.tab-nav{position:sticky;top:0;z-index:30;display:flex;border-bottom:1px solid var(--border-color);background-color:var(--bg-primary);flex-shrink:0}.tab-btn{flex:1;padding:9px 6px;background:transparent;border:none;border-right:1px solid var(--border-color);color:var(--text-muted);font-family:var(--font-mono);font-size:10.5px;font-weight:600;text-align:center;cursor:pointer;white-space:nowrap;transition:all .15s ease;display:flex;align-items:center;justify-content:center;gap:3px}.tab-btn:last-child{border-right:none}.tab-btn:hover{background-color:var(--bg-control);color:var(--text-primary)}.tab-btn.active{background-color:var(--bg-panel);color:var(--text-primary);border-bottom:2px solid var(--accent)}.tab-content{padding:14px;display:flex;flex-direction:column;gap:14px;min-height:min-content}.tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--accent)}.control-section{border:1px solid var(--border-color);padding:12px 14px;background-color:var(--bg-primary);border-radius:3px}.section-header{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--accent);margin-bottom:10px;display:flex;align-items:center;justify-content:space-between}.control-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;gap:8px}.control-row:last-child{margin-bottom:0}.control-label{font-size:11px;color:var(--text-muted);flex:1}.control-input-wrapper{display:flex;align-items:center;gap:8px;flex:1.5}.range-slider{flex:1;accent-color:var(--accent);cursor:pointer}.number-input{width:58px;background-color:var(--bg-control);border:1px solid var(--border-color);color:var(--text-primary);font-family:var(--font-mono);font-size:11px;padding:2px 4px;text-align:right;-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}.number-input::-webkit-outer-spin-button,.number-input::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}.number-input:focus{border-color:var(--accent);outline:none}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:6px 12px;background-color:var(--bg-control);border:1px solid var(--border-color);color:var(--text-primary);font-family:var(--font-mono);font-size:11px;font-weight:600;cursor:pointer;transition:all .15s ease}.btn:hover{background-color:var(--bg-control-hover);border-color:var(--accent)}.btn-primary{background-color:var(--accent);color:var(--bg-primary);border-color:var(--accent)}.btn-primary:hover{background-color:var(--text-muted)}.btn-sm{padding:3px 8px;font-size:10px}.btn-group{display:flex;gap:4px}.presets-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.preset-card{border:1px solid var(--border-color);background-color:var(--bg-control);padding:8px;cursor:pointer;text-align:left;transition:all .15s ease}.preset-card:hover{border-color:var(--accent);background-color:var(--bg-control-hover)}.preset-card.active{border-color:var(--accent);background-color:var(--accent-glow)}.preset-card-title{font-weight:700;font-size:11px;color:var(--text-primary);margin-bottom:2px}.preset-card-desc{font-size:9.5px;color:var(--text-muted);line-height:1.2}.code-editor-area{width:100%;min-height:160px;background-color:var(--bg-control);border:1px solid var(--border-color);color:var(--text-primary);font-family:var(--font-mono);font-size:11px;padding:8px;resize:vertical;line-height:1.4;-moz-tab-size:2;tab-size:2}.code-editor-area:focus{border-color:var(--accent);outline:none}.code-error-box{background-color:#ff33441a;border:1px solid #ff3344;color:#f34;padding:6px 8px;font-size:10px;margin-top:6px}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-card{width:90%;max-width:650px;max-height:85vh;background-color:var(--bg-panel);border:1px solid var(--accent);display:flex;flex-direction:column;box-shadow:0 0 30px var(--accent-glow)}.modal-header{padding:10px 14px;border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;font-weight:700}.modal-body{padding:14px;overflow-y:auto;flex:1}.modal-footer{padding:10px 14px;border-top:1px solid var(--border-color);display:flex;justify-content:flex-end;gap:8px}.scanline-overlay{pointer-events:none;position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(#12101000 50%,#00000040 50%);background-size:100% 4px;z-index:10;opacity:.6}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--border-color)}::-webkit-scrollbar-thumb:hover{background:var(--accent)}