@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap";:root{--bg-primary:#0f1219;--bg-secondary:#181c25;--bg-elevated:#212530;--bg-hover:#2b2f3b;--bg-active:#353946;--accent-violet:#9855f6;--accent-violet-dim:#672eb8;--accent-violet-glow:#9855f64d;--accent-cyan:#2bdeee;--accent-cyan-dim:#2999a3;--accent-cyan-glow:#2bdeee33;--accent-amber:#faa938;--accent-amber-dim:#c38022;--accent-pink:#ed5ea6;--accent-green:#26d971;--accent-green-dim:#2d8652;--accent-red:#eb4747;--accent-red-dim:#a32929;--text-primary:#f2f2f2;--text-secondary:#8f96a3;--text-tertiary:#606876;--text-inverse:#0f1219;--border-color:#3d475c66;--border-focus:var(--accent-violet);--font-ui:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-code:"JetBrains Mono", "Fira Code", "Consolas", monospace;--space-xs:4px;--space-sm:8px;--space-md:12px;--space-lg:16px;--space-xl:24px;--space-2xl:32px;--space-3xl:48px;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:20px;--radius-full:100px;--shadow-sm:0 1px 3px #0000004d;--shadow-md:0 4px 12px #0006;--shadow-lg:0 8px 30px #00000080;--shadow-glow-violet:0 0 20px var(--accent-violet-glow);--shadow-glow-cyan:0 0 15px var(--accent-cyan-glow);--transition-fast:.15s ease;--transition-base:.25s ease;--transition-slow:.4s ease;--glass-bg:#1d202bb3;--glass-border:#47536b4d;--glass-blur:blur(16px)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:14px}body{font-family:var(--font-ui);background:var(--bg-primary);color:var(--text-primary);min-height:100vh;overflow-x:hidden}#root{flex-direction:column;min-height:100vh;display:flex}body:before{content:"";pointer-events:none;z-index:0;background:radial-gradient(at 15% 10%,#5814b81f 0%,#0000 50%),radial-gradient(at 85% 20%,#1b8d9814 0%,#0000 50%),radial-gradient(at 50% 90%,#ad721f0f 0%,#0000 50%);position:fixed;inset:0}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{border-radius:var(--radius-full);background:#4c556780}::-webkit-scrollbar-thumb:hover{background:#626d8499}.app-layout{z-index:1;flex-direction:column;min-height:100vh;display:flex;position:relative}.app-main{gap:var(--space-md);padding:var(--space-md);flex:1;grid-template-rows:auto 1fr;grid-template-columns:1fr 1fr;min-height:0;display:grid}.header{padding:var(--space-md) var(--space-xl);background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--glass-border);z-index:100;justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.header-brand{align-items:center;gap:var(--space-md);display:flex}.header-logo{background:linear-gradient(135deg, var(--accent-violet), var(--accent-cyan));border-radius:var(--radius-md);color:#fff;width:36px;height:36px;box-shadow:var(--shadow-glow-violet);justify-content:center;align-items:center;font-size:1.1rem;font-weight:800;display:flex}.header-title{background:linear-gradient(135deg, var(--text-primary) 30%, var(--accent-violet));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.25rem;font-weight:700}.header-subtitle{color:var(--text-secondary);font-size:.75rem;font-weight:400}.header-actions{align-items:center;gap:var(--space-md);display:flex}.engine-badge{align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-md);border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.05em;font-size:.7rem;font-weight:600;display:flex}.engine-badge.wasm{color:var(--accent-green);background:#26d97126;border:1px solid #26d9714d}.engine-badge.typescript{color:#55a6f6;background:#258cf426;border:1px solid #258cf44d}.engine-badge-dot{border-radius:50%;width:6px;height:6px;animation:2s infinite pulse}.engine-badge.wasm .engine-badge-dot{background:var(--accent-green)}.engine-badge.typescript .engine-badge-dot{background:#55a6f6}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.github-link{align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-md);border-radius:var(--radius-md);color:var(--text-secondary);transition:all var(--transition-fast);border:1px solid #0000;font-size:.8rem;text-decoration:none;display:flex}.github-link:hover{color:var(--text-primary);background:var(--bg-hover);border-color:var(--border-color)}.btn{justify-content:center;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-md);font-family:var(--font-ui);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;border:none;font-size:.85rem;font-weight:600;display:inline-flex}.btn-primary{background:linear-gradient(135deg, var(--accent-violet), #ab30e8);color:#fff;box-shadow:var(--shadow-glow-violet)}.btn-primary:hover{box-shadow:0 0 30px var(--accent-violet-glow);transform:translateY(-1px)}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover{background:var(--bg-hover);border-color:var(--accent-violet-dim)}.btn-icon{padding:var(--space-sm);color:var(--text-secondary);border:1px solid var(--border-color);background:0 0}.btn-icon:hover{color:var(--text-primary);background:var(--bg-hover)}.btn-sm{padding:var(--space-xs) var(--space-md);font-size:.78rem}.panel{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);flex-direction:column;display:flex;overflow:hidden}.panel-glass{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border)}.panel-header{padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--border-color);flex-shrink:0;justify-content:space-between;align-items:center;display:flex}.panel-title{color:var(--text-primary);align-items:center;gap:var(--space-sm);font-size:.82rem;font-weight:600;display:flex}.panel-title-icon{font-size:1rem}.panel-body{flex:1;min-height:0;overflow:auto}.panel-body-padded{padding:var(--space-lg)}.phase-nav{align-items:center;gap:var(--space-xs);padding:var(--space-md) var(--space-lg);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);grid-column:1/-1;display:flex;overflow-x:auto}.phase-step{align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-md);color:var(--text-tertiary);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;border:1px solid #0000;flex-shrink:0;font-size:.8rem;font-weight:500;display:flex}.phase-step:hover{color:var(--text-secondary);background:var(--bg-elevated)}.phase-step.active{color:var(--accent-violet);box-shadow:var(--shadow-glow-violet);background:#9855f61a;border-color:#9855f64d}.phase-step.completed{color:var(--accent-green)}.phase-step-number{background:var(--bg-elevated);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:22px;height:22px;font-size:.7rem;font-weight:700;display:flex}.phase-step.active .phase-step-number{background:var(--accent-violet);color:#fff}.phase-step.completed .phase-step-number{background:var(--accent-green);color:#fff}.phase-arrow{color:var(--text-tertiary);flex-shrink:0;font-size:.7rem}.editor-panel{flex-direction:column;min-height:0;display:flex}.editor-toolbar{align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);border-bottom:1px solid var(--border-color);display:flex}.example-select{background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:var(--space-xs) var(--space-md);font-family:var(--font-ui);cursor:pointer;transition:border-color var(--transition-fast);outline:none;font-size:.78rem}.example-select:focus{border-color:var(--accent-violet)}.editor-wrapper{flex:1;min-height:0}.token-grid{gap:var(--space-xs);padding:var(--space-lg);flex-wrap:wrap;display:flex}.token-pill{align-items:center;gap:var(--space-xs);padding:3px var(--space-sm);border-radius:var(--radius-full);font-family:var(--font-code);transition:all var(--transition-fast);cursor:default;opacity:0;border:1px solid #0000;font-size:.72rem;font-weight:500;animation:.3s forwards tokenFadeIn;display:inline-flex}@keyframes tokenFadeIn{to{opacity:1;transform:translateY(0)}0%{opacity:0;transform:translateY(4px)}}.token-pill:hover{box-shadow:var(--shadow-sm);transform:scale(1.05)}.token-pill.keyword{color:var(--accent-violet);background:#8b47eb26;border-color:#8b47eb4d}.token-pill.identifier{color:var(--accent-cyan);background:#30d9e81f;border-color:#30d9e840}.token-pill.literal{color:var(--accent-amber);background:#f49d251f;border-color:#f49d2540}.token-pill.operator{color:var(--accent-pink);background:#e052991f;border-color:#e0529940}.token-pill.punctuation{color:var(--text-secondary);background:#737b8c1f;border-color:#737b8c40}.token-type-label{opacity:.6;text-transform:uppercase;letter-spacing:.04em;font-size:.6rem}.ast-tree{padding:var(--space-lg);font-family:var(--font-code);font-size:.78rem;line-height:1.8}.ast-node{padding-left:var(--space-xl);position:relative}.ast-node:before{content:"";background:var(--border-color);width:1px;position:absolute;top:0;bottom:0;left:8px}.ast-node-label{align-items:center;gap:var(--space-sm);padding:2px var(--space-sm);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);display:inline-flex}.ast-node-label:hover{background:var(--bg-hover)}.ast-node-type{color:var(--accent-cyan);font-weight:600}.ast-node-value{color:var(--accent-amber)}.ast-node-op{color:var(--accent-pink);font-weight:700}.ir-view{gap:var(--space-md);padding:var(--space-lg);flex-direction:column;display:flex}.ir-block{background:var(--bg-elevated);border:1px solid var(--border-color);border-radius:var(--radius-md);overflow:hidden}.ir-block-header{padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--border-color);font-family:var(--font-code);color:var(--accent-violet);background:#7333cc1a;font-size:.78rem;font-weight:600}.ir-instruction{align-items:center;gap:var(--space-sm);padding:var(--space-xs) var(--space-md);font-family:var(--font-code);transition:background var(--transition-fast);border-bottom:1px solid #29303d4d;font-size:.75rem;display:flex}.ir-instruction:last-child{border-bottom:none}.ir-instruction:hover{background:var(--bg-hover)}.ir-instruction.active{border-left:2px solid var(--accent-violet);background:#9855f61f}.ir-opcode{color:var(--accent-pink);min-width:55px;font-weight:600}.ir-operand{color:var(--accent-cyan)}.ir-operand.constant{color:var(--accent-amber)}.ir-operand.label-ref{color:var(--accent-green)}.ir-columns{gap:var(--space-md);grid-template-columns:1fr 1fr;height:100%;display:grid}.ir-column{flex-direction:column;display:flex;overflow:auto}.ir-column-header{padding:var(--space-sm) var(--space-md);text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary);border-bottom:1px solid var(--border-color);flex-shrink:0;font-size:.72rem;font-weight:700}.exec-controls{align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--border-color);flex-shrink:0;display:flex}.exec-step-counter{font-family:var(--font-code);color:var(--text-secondary);margin-left:auto;font-size:.72rem}.register-table{border-collapse:collapse;width:100%;font-family:var(--font-code);font-size:.75rem}.register-table th{text-align:left;padding:var(--space-xs) var(--space-md);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border-color);font-size:.68rem;font-weight:600}.register-table td{padding:var(--space-xs) var(--space-md);border-bottom:1px solid #29303d33}.register-name{color:var(--accent-cyan)}.register-value{color:var(--accent-amber);font-weight:600}.register-value.changed{color:var(--accent-green);animation:.5s valueFlash}@keyframes valueFlash{0%{background:#26d9714d}to{background:0 0}}.memory-grid{gap:var(--space-md);padding:var(--space-md);flex-direction:column;display:flex}.memory-array{gap:var(--space-xs);flex-direction:column;display:flex}.memory-array-name{font-family:var(--font-code);color:var(--accent-cyan);font-size:.72rem;font-weight:600}.memory-cells{gap:2px;display:flex}.memory-cell{background:var(--bg-elevated);border:1px solid var(--border-color);border-radius:var(--radius-sm);width:36px;height:28px;font-family:var(--font-code);color:var(--accent-amber);transition:all var(--transition-fast);justify-content:center;align-items:center;font-size:.7rem;display:flex}.memory-cell.active{border-color:var(--accent-violet);background:#9855f626}.console{border-radius:var(--radius-md);padding:var(--space-md);font-family:var(--font-code);background:#0b0d14;min-height:80px;max-height:200px;font-size:.78rem;line-height:1.7;overflow-y:auto}.console-line{color:var(--text-primary)}.console-line.output{color:var(--accent-green)}.console-line.error{color:var(--accent-red)}.console-line.info{color:var(--text-secondary)}.console-return{color:var(--accent-amber);margin-top:var(--space-sm);padding-top:var(--space-sm);border-top:1px solid var(--border-color);font-weight:600}.empty-state{padding:var(--space-3xl);color:var(--text-tertiary);text-align:center;justify-content:center;align-items:center;gap:var(--space-md);flex-direction:column;display:flex}.empty-state-icon{opacity:.4;font-size:2.5rem}.empty-state-text{font-size:.85rem}.empty-state-hint{color:var(--text-tertiary);font-size:.75rem}.loading-spinner{border:2px solid var(--border-color);border-top:2px solid var(--accent-violet);border-radius:50%;width:20px;height:20px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.cfg-container{padding:var(--space-lg);gap:var(--space-md);flex-direction:column;display:flex}.cfg-node{background:var(--bg-elevated);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:var(--space-md);transition:all var(--transition-fast)}.cfg-node.active{border-color:var(--accent-violet);box-shadow:var(--shadow-glow-violet)}.cfg-node-label{font-family:var(--font-code);color:var(--accent-violet);margin-bottom:var(--space-sm);font-size:.72rem;font-weight:700}.cfg-edge{align-items:center;gap:var(--space-sm);padding:var(--space-xs) 0;color:var(--text-secondary);font-size:.72rem;display:flex}.cfg-edge-arrow{color:var(--accent-green)}@media (width<=900px){.app-main,.ir-columns{grid-template-columns:1fr}.phase-nav{overflow-x:auto}}