:root{--font-display:"Oswald", sans-serif;--font-mono:"JetBrains Mono", "IBM Plex Mono", "Courier New", monospace;--color-bg:#fafafa;--color-surface:#fff;--color-surface-elevated:#f5f5f5;--color-border:#e5e5e5;--color-border-accent:#d4d4d4;--color-text:#171717;--color-text-muted:#737373;--color-text-dim:#a3a3a3;--color-accent:#2563eb;--color-accent-hover:#1d4ed8;--color-accent-dim:#2563eb1f;--color-success:#16a34a;--color-warning:#ca8a04;--color-error:#dc2626;--color-info:#0891b2;--bg-primary:var(--color-bg);--bg-secondary:var(--color-surface);--bg-tertiary:var(--color-surface-elevated);--fg-primary:var(--color-text);--fg-secondary:var(--color-text-muted);--fg-muted:var(--color-text-dim);--border-color:var(--color-border);--accent-error:var(--color-error);--accent-success:var(--color-success);--accent-warn:var(--color-warning);--selection-bg:var(--color-accent-dim);--accent-run:var(--color-accent)}:root[data-theme=dark]{--color-bg:#0a0a0a;--color-surface:#111;--color-surface-elevated:#1a1a1a;--color-border:#2a2a2a;--color-border-accent:#3a3a3a;--color-text:#e0e0e0;--color-text-muted:#a0a0a0;--color-text-dim:#666;--color-accent:#3b82f6;--color-accent-hover:#2563eb;--color-accent-dim:#3b82f626;--color-success:#4ade80;--color-warning:#fbbf24;--color-error:#f87171;--color-info:#22d3ee}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--color-bg:#0a0a0a;--color-surface:#111;--color-surface-elevated:#1a1a1a;--color-border:#2a2a2a;--color-border-accent:#3a3a3a;--color-text:#e0e0e0;--color-text-muted:#a0a0a0;--color-text-dim:#666;--color-accent:#3b82f6;--color-accent-hover:#2563eb;--color-accent-dim:#3b82f626;--color-success:#4ade80;--color-warning:#fbbf24;--color-error:#f87171;--color-info:#22d3ee}}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;overflow:hidden}body{font-family:var(--font-mono);color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:14px;line-height:1.5}::selection{background:var(--color-accent-dim)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:0}::-webkit-scrollbar-thumb:hover{background:var(--color-text-dim)}::-webkit-scrollbar-corner{background:0 0}.grid-bg{background-image:linear-gradient(var(--color-border) 1px, transparent 1px), linear-gradient(90deg, var(--color-border) 1px, transparent 1px);opacity:.2;pointer-events:none;z-index:0;background-position:50%;background-size:50px 50px;position:fixed;inset:0}.scanlines{pointer-events:none;z-index:1;opacity:.02;background:repeating-linear-gradient(0deg,#0000001a,#0000001a 1px,#0000 1px 2px);position:fixed;inset:0}.noise{pointer-events:none;z-index:1;opacity:.015;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");position:fixed;inset:0}.animate-scanline{background:linear-gradient(to right, transparent, var(--color-accent-dim), transparent);pointer-events:none;z-index:50;width:100%;height:1px;animation:8s linear infinite scanline;position:fixed;top:0;left:0}@keyframes scanline{0%{transform:translateY(-100%)}to{transform:translateY(100vh)}}@keyframes pulse-ring{0%{opacity:.5;transform:scale(.8)}to{opacity:0;transform:scale(1.5)}}.about-backdrop{z-index:100;background:#0003;position:fixed;inset:0}.about-panel{background:var(--color-surface);border-left:2px solid var(--color-border);z-index:101;flex-direction:column;width:480px;max-width:100%;height:100%;animation:.15s slide-in;display:flex;position:fixed;top:0;right:0}@keyframes slide-in{0%{transform:translate(100%)}to{transform:translate(0)}}.about-header{border-bottom:2px solid var(--color-border);flex-shrink:0;justify-content:space-between;align-items:center;height:64px;padding:0 20px;display:flex}.about-title{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text);font-size:14px;font-weight:600}.about-close{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;border:2px solid var(--color-border);background:var(--color-surface);color:var(--color-text-muted);cursor:pointer;padding:6px 12px;font-size:11px;transition:all .15s}.about-close:hover{border-color:var(--color-accent);color:var(--color-accent)}.about-content{flex:1;padding:24px;overflow-y:auto}.about-section{margin-bottom:20px}.about-section-title{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted);margin-bottom:12px;font-size:12px;font-weight:600;display:block}.about-text{font-family:var(--font-mono);color:var(--color-text);font-size:13px;line-height:1.7}.about-text a{color:var(--color-accent);text-decoration:none}.about-text a:hover{text-decoration:underline}.about-divider{border:none;border-top:1px solid var(--color-border);margin:20px 0}.cheatsheet-grid{grid-template-columns:1fr;gap:12px;display:grid}.cheatsheet-item{flex-direction:column;gap:4px;display:flex}.cheatsheet-label{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-dim);font-size:10px}.cheatsheet-code{background:var(--color-surface-elevated);border:1px solid var(--color-border);font-family:var(--font-mono);color:var(--color-text);white-space:pre;word-wrap:normal;margin:0;padding:10px 12px;font-size:12px;line-height:1.6;overflow-x:auto}.cheatsheet-code .hl-keyword{color:#c678dd}.cheatsheet-code .hl-number{color:#d19a66}.cheatsheet-code .hl-string{color:#98c379}.cheatsheet-code .hl-comment{color:#5c6370;font-style:italic}.cheatsheet-code .hl-operator{color:#56b6c2}@media (prefers-color-scheme:dark){.cheatsheet-code .hl-keyword{color:#c678dd}.cheatsheet-code .hl-number{color:#d19a66}.cheatsheet-code .hl-string{color:#98c379}.cheatsheet-code .hl-comment{color:#5c6370}.cheatsheet-code .hl-operator{color:#56b6c2}}:root[data-theme=dark] .cheatsheet-code .hl-keyword{color:#c678dd}:root[data-theme=dark] .cheatsheet-code .hl-number{color:#d19a66}:root[data-theme=dark] .cheatsheet-code .hl-string{color:#98c379}:root[data-theme=dark] .cheatsheet-code .hl-comment{color:#5c6370}:root[data-theme=dark] .cheatsheet-code .hl-operator{color:#56b6c2}.about-links{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.about-links li{font-family:var(--font-mono);font-size:13px}.about-links a{color:var(--color-text);text-decoration:none;transition:color .15s}.about-links a:hover{color:var(--color-accent)}@media (width<=768px){.about-panel{width:100%}}.shortcuts-backdrop{z-index:100;background:#0003;position:fixed;inset:0}.shortcuts-modal{background:var(--color-surface);border:2px solid var(--color-border);width:320px;max-width:calc(100% - 32px);box-shadow:4px 4px 0px var(--color-border);z-index:101;animation:.15s modal-in;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes modal-in{0%{opacity:0;transform:translate(-50%,-50%)scale(.96)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}.shortcuts-header{border-bottom:2px solid var(--color-border);justify-content:space-between;align-items:center;height:48px;padding:0 16px;display:flex}.shortcuts-title{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text);font-size:14px;font-weight:600}.shortcuts-close{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;border:2px solid var(--color-border);background:var(--color-surface);color:var(--color-text-muted);cursor:pointer;padding:4px 10px;font-size:11px;transition:all .15s}.shortcuts-close:hover{border-color:var(--color-accent);color:var(--color-accent)}.shortcuts-content{padding:16px}.shortcuts-table{border-collapse:collapse;width:100%;font-family:var(--font-mono);font-size:13px}.shortcuts-table td{border-bottom:1px solid var(--color-border);padding:8px 0}.shortcuts-table tr:last-child td{border-bottom:none}.shortcuts-key{color:var(--color-accent);white-space:nowrap;width:1px;padding-right:16px;font-weight:600}.shortcuts-action{color:var(--color-text);text-align:right}.app{background:var(--color-bg);height:100dvh;color:var(--color-text);z-index:10;flex-direction:column;gap:0;display:flex;position:relative}.toolbar{border-bottom:2px solid var(--color-border);background:var(--color-surface);flex-shrink:0;justify-content:space-between;align-items:center;height:64px;padding:0 24px;display:flex}.toolbar-left{align-items:center;gap:12px;display:flex}.logo-group{align-items:center;gap:10px;display:flex}.logo-mark{background:var(--color-accent);color:#fff;width:44px;height:44px;font-family:var(--font-display);border:2px solid var(--color-accent);box-shadow:4px 4px 0px var(--color-border-accent);letter-spacing:-.02em;justify-content:center;align-items:center;font-size:22px;font-weight:700;transition:all .15s;display:flex}.logo-mark:hover{box-shadow:6px 6px 0px var(--color-accent-hover);transform:translate(-2px,-2px)}.logo-text{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.02em;color:var(--color-accent);font-size:26px;font-weight:700;line-height:1}.logo{font-family:var(--font-display);color:var(--color-accent);font-size:22px;font-weight:800;line-height:1}.logo-sub{font-family:var(--font-mono);color:var(--color-text-dim);text-transform:uppercase;letter-spacing:.2em;font-size:12px;line-height:1}.toolbar-right{align-items:center;gap:8px;display:flex}.btn{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.05em;border:2px solid var(--color-border);background:var(--color-surface);color:var(--color-text);cursor:pointer;box-shadow:3px 3px 0px var(--color-border);align-items:center;gap:6px;padding:8px 16px;font-size:12px;font-weight:600;text-decoration:none;transition:all .15s;display:inline-flex}.btn:hover:not(:disabled){box-shadow:4px 4px 0px var(--color-accent);border-color:var(--color-accent);transform:translate(-1px,-1px)}.btn:active:not(:disabled){box-shadow:0px 0px 0px var(--color-border);transform:translate(1px,1px)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn.link{color:var(--color-text-muted)}.btn.link:hover{color:var(--color-text)}.dropdown-container{position:relative}.dropdown-menu{background:var(--color-surface);border:2px solid var(--color-border);box-shadow:4px 4px 0px var(--color-border);z-index:100;min-width:200px;animation:.1s dropdown-in;position:absolute;top:calc(100% + 8px);right:0}@keyframes dropdown-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.dropdown-item{text-align:left;border:none;border-bottom:2px solid var(--color-border);width:100%;color:var(--color-text);font-family:var(--font-mono);cursor:pointer;letter-spacing:.2px;background:0 0;padding:10px 16px;font-size:12px;transition:background .1s;display:block}.dropdown-item:last-child{border-bottom:none}.dropdown-item:hover{background:var(--color-surface-elevated)}.main{background:var(--color-bg);flex:1;gap:0;display:flex;overflow:hidden}.editor-pane{border-right:2px solid var(--color-border);background:var(--color-surface);flex-direction:column;flex:3;min-width:0;display:flex;overflow:hidden}.editor-pane .cm-editor{flex:1;overflow:hidden}html[data-theme=light] .editor-pane .cm-editor,html[data-theme=light] .cm-content{background:#f5f5f5}html[data-theme=light] .cm-line{background:0 0}.output-pane{background:var(--color-surface);flex-direction:column;flex:2;min-width:0;display:flex;overflow:hidden}.pane-header{background:var(--color-surface-elevated);border-bottom:2px solid var(--color-border);flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;height:36px;padding:0 16px;display:flex}.pane-label{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-dim);font-size:11px}.clear-btn{font-family:var(--font-mono);border:2px solid var(--color-border);color:var(--color-text-dim);cursor:pointer;text-transform:uppercase;letter-spacing:.1em;background:0 0;padding:4px 10px;font-size:10px;transition:all .15s}.clear-btn:hover{border-color:var(--color-text-muted);color:var(--color-text-muted)}.output-content{font-family:var(--font-mono);color:var(--color-text);background:var(--color-surface);border-top:2px solid var(--color-border);white-space:pre-wrap;word-break:break-word;flex:1;margin:0;padding:16px;font-size:13px;line-height:1.7;overflow:auto}.output-content:empty:before{content:"// EXECUTE PROGRAM TO SEE OUTPUT";color:var(--color-text-dim)}.statusbar{border-top:2px solid var(--color-border);background:var(--color-surface);flex-shrink:0;justify-content:space-between;align-items:center;gap:16px;height:48px;padding:0 24px;display:flex}.statusbar-left{align-items:center;gap:16px;display:flex}.statusbar-right{align-items:center;gap:24px;display:flex}.run-btn{display:none}@media (width>=769px){.run-btn-desktop{display:inline-flex}}@media (width<=768px){.run-btn{display:inline-flex}}.run-btn{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.05em;border:2px solid var(--color-accent);background:var(--color-accent);color:#fff;cursor:pointer;box-shadow:4px 4px 0px var(--color-border);justify-content:center;align-items:center;padding:8px 20px;font-size:12px;font-weight:600;line-height:1;transition:all .15s}.run-btn:hover:not(:disabled){box-shadow:6px 6px 0px var(--color-accent);background:var(--color-accent-hover);transform:translate(-2px,-2px)}.run-btn:active:not(:disabled){box-shadow:0px 0px 0px var(--color-border);transform:translate(2px,2px)}.run-btn:disabled{opacity:.4;cursor:not-allowed}.status-text{font-family:var(--font-mono);color:var(--color-text-dim);letter-spacing:.05em;text-transform:uppercase;font-size:12px;transition:color .2s}.status-text.has-errors{color:var(--color-error);font-weight:600}.status-text.is-running{color:var(--color-warning)}.footer-link{font-family:var(--font-mono);color:var(--color-text-dim);letter-spacing:.05em;font-size:11px;text-decoration:none;transition:color .15s}.footer-link:hover{color:var(--color-accent)}.boot-overlay{background:var(--color-bg);z-index:1000;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.boot-content{text-align:center}.boot-dots{justify-content:center;gap:8px;margin-bottom:24px;display:flex}.boot-dots span{background:var(--color-accent);border:2px solid var(--color-accent);width:12px;height:12px;box-shadow:2px 2px 0px var(--color-border);animation:1.4s ease-in-out infinite both boot-bounce}.boot-dots span:first-child{animation-delay:-.32s}.boot-dots span:nth-child(2){animation-delay:-.16s}@keyframes boot-bounce{0%,80%,to{opacity:.3;transform:scale(.5)}40%{opacity:1;transform:scale(1)}}.boot-text{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);font-size:16px;font-weight:600}.toast{background:var(--color-surface);border:2px solid var(--color-border);box-shadow:4px 4px 0px var(--color-border);font-family:var(--font-mono);color:var(--color-text);z-index:1001;pointer-events:none;text-transform:uppercase;letter-spacing:.05em;padding:10px 24px;font-size:12px;animation:.15s toast-in,.15s 1.35s forwards toast-out;position:fixed;bottom:70px;left:50%;transform:translate(-50%)}@keyframes toast-in{0%{opacity:0;transform:translate(-50%)translateY(8px)}to{opacity:1;transform:translate(-50%)translateY(0)}}@keyframes toast-out{0%{opacity:1}to{opacity:0}}.run-btn-desktop{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.05em;border:2px solid var(--color-accent);background:var(--color-accent);color:#fff;cursor:pointer;box-shadow:4px 4px 0px var(--color-border);justify-content:center;align-items:center;padding:8px 20px;font-size:12px;font-weight:600;line-height:1;transition:all .15s;display:inline-flex}.run-btn-desktop:hover:not(:disabled){box-shadow:6px 6px 0px var(--color-accent);background:var(--color-accent-hover);transform:translate(-2px,-2px)}.run-btn-desktop:active:not(:disabled){box-shadow:0px 0px 0px var(--color-border);transform:translate(2px,2px)}.run-btn-desktop:disabled{opacity:.4;cursor:not-allowed}@media (width<=768px){.run-btn-desktop{display:none}.main{flex-direction:column}.editor-pane{border-right:none;border-bottom:2px solid var(--color-border);flex:1;min-height:200px}.output-pane{flex:1;min-height:150px}.toolbar{height:56px;padding:0 12px}.logo-mark{width:32px;height:32px;font-size:14px}.logo-text{font-size:16px}.toolbar-right{gap:4px}.btn{box-shadow:2px 2px 0px var(--color-border);padding:6px 10px;font-size:11px}.btn:hover:not(:disabled){box-shadow:4px 4px 0px var(--color-accent)}.btn.link,.logo-sub{display:none}.statusbar{flex-wrap:wrap;gap:8px;height:auto;min-height:52px;padding:8px 12px}.statusbar-left{flex:1;gap:10px}.statusbar-right{border-bottom:2px solid var(--color-border);order:-1;justify-content:flex-start;gap:12px;width:100%;margin-bottom:2px;padding-bottom:8px}.run-btn{box-shadow:2px 2px 0px var(--color-border);padding:6px 14px;font-size:11px;display:inline-flex}.run-btn:hover:not(:disabled){box-shadow:4px 4px 0px var(--color-accent)}.status-text{font-size:11px}.footer-link{font-size:10px}.output-content{padding:12px;font-size:12px}.terminal-header{padding:8px 12px}.dropdown-menu{min-width:160px;box-shadow:2px 2px 0px var(--color-border);right:-10px}.dropdown-item{padding:8px 12px;font-size:11px}}