:root{--bg-primary:#0a0e14;--bg-secondary:#0d1117;--bg-tertiary:#151b23;--bg-elevated:#1c2433;--accent-cyan:#00d4ff;--accent-cyan-dim:#00d4ff40;--accent-cyan-glow:#00d4ff20;--accent-green:#0f8;--accent-green-dim:#00ff8840;--accent-orange:#ff9500;--accent-orange-dim:#ff950040;--accent-red:#ff4757;--accent-purple:#a855f7;--accent-purple-dim:#a855f740;--text-primary:#e6edf3;--text-secondary:#adbac7;--text-muted:#7d8590;--border-color:#21262d;--border-accent:#00d4ff30;--grid-color:#1a2332;--grid-accent:#00d4ff08;--state-atomic:#00d4ff;--state-compound:#a855f7;--state-final:#0f8;--state-parallel:#ff9500;--state-history:#f472b6;--state-active:#0f8;--shadow-glow:0 0 30px var(--accent-cyan-glow);--shadow-card:0 4px 20px #0006;--transition-fast:.15s ease;--transition-medium:.3s ease;--transition-slow:.5s ease;--bg:var(--bg-primary);--surface:var(--bg-secondary);--surface-hover:var(--bg-tertiary);--accent:var(--accent-cyan);--text:var(--text-primary);--border:var(--border-color);--transition:var(--transition-fast);--radius:6px;--radius-lg:12px;--font-mono:"JetBrains Mono", monospace}*{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{background:var(--bg-primary);color:var(--text-primary);min-height:100vh;font-family:Space Grotesk,sans-serif;overflow-x:hidden}h1,h2,h3,h4{letter-spacing:-.02em;font-family:JetBrains Mono,monospace;font-weight:600}code,pre,.mono{font-family:JetBrains Mono,monospace}:focus-visible{outline:2px solid var(--accent-cyan);outline-offset:2px;border-radius:4px}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}body:before{content:"";background-image:linear-gradient(var(--grid-color) 1px, transparent 1px), linear-gradient(90deg, var(--grid-color) 1px, transparent 1px), linear-gradient(var(--grid-accent) 1px, transparent 1px), linear-gradient(90deg, var(--grid-accent) 1px, transparent 1px);pointer-events:none;z-index:-1;background-size:100px 100px,100px 100px,20px 20px,20px 20px;position:fixed;inset:0}body:after{content:"";pointer-events:none;z-index:1000;background:repeating-linear-gradient(0deg,#0000,#0000 2px,#00d4ff03 2px 4px);animation:8s linear infinite scanline;position:fixed;inset:0}@keyframes scanline{0%{transform:translateY(0)}to{transform:translateY(4px)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}@keyframes ping{0%{opacity:.8;transform:scale(1)}to{opacity:0;transform:scale(1.5)}}@keyframes slideIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}.app{grid-template-rows:auto 1fr;grid-template-columns:380px 1fr;gap:0;min-height:100vh;display:grid}@media (width<=1024px){.app{grid-template-rows:auto auto 1fr;grid-template-columns:1fr}}.header{background:var(--bg-secondary);border-bottom:1px solid var(--border-color);z-index:100;grid-column:1/-1;justify-content:space-between;align-items:center;padding:1rem 1.5rem;display:flex;position:relative}.header:before{content:"";background:linear-gradient(90deg, transparent, var(--accent-cyan), transparent);opacity:.5;height:1px;position:absolute;bottom:0;left:0;right:0}.logo{align-items:center;gap:.75rem;display:flex}.logo-icon{width:36px;height:36px;position:relative}.logo-icon svg{width:100%;height:100%}.logo-text{color:var(--text-primary);text-transform:uppercase;letter-spacing:.1em;font-size:1.25rem;font-weight:700}.logo-text span{color:var(--accent-cyan)}.header-actions{align-items:center;gap:1rem;display:flex}.header-nav{align-items:center;gap:.25rem;margin-left:auto;margin-right:1rem;display:flex}.header-nav-link{color:var(--text-secondary);transition:var(--transition-fast);border-radius:6px;padding:.45rem .75rem;font-size:.9rem;font-weight:500;text-decoration:none}.header-nav-link:hover{color:var(--text-primary);background:var(--bg-tertiary)}.header-nav-link.is-active{color:var(--accent-cyan);background:#00d4ff14}.header-nav-link:focus-visible,.header-link:focus-visible,.btn:focus-visible{outline:2px solid var(--accent-cyan);outline-offset:2px}@media (width<=720px){.header-nav{display:none}}.header-link{color:var(--text-secondary);transition:var(--transition-fast);border-radius:6px;align-items:center;gap:.5rem;padding:.5rem .75rem;font-size:.875rem;text-decoration:none;display:flex}.header-link:hover{color:var(--text-primary);background:var(--bg-tertiary)}.header-link svg{width:18px;height:18px}.sidebar{background:var(--bg-secondary);border-right:1px solid var(--border-color);flex-direction:column;gap:1rem;min-height:0;padding:1rem;display:flex;overflow:hidden auto}.sidebar-section{border-bottom:1px solid var(--border-color);padding:1.25rem}.sidebar-section:last-child{border-bottom:none;flex:1;overflow-y:auto}.panel{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:8px;flex-direction:column;flex-shrink:0;display:flex;overflow:visible;box-shadow:0 2px 8px #0000004d}.panel-header{background:linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-tertiary) 100%);border-bottom:1px solid var(--accent-cyan-dim);border-radius:8px 8px 0 0;flex-shrink:0;justify-content:space-between;align-items:center;padding:.625rem .875rem;display:flex;position:relative}.panel-header:after{content:"";background:linear-gradient(90deg, transparent, var(--accent-cyan), transparent);opacity:.3;height:1px;position:absolute;bottom:0;left:0;right:0}.panel-title{color:var(--accent-cyan);text-transform:uppercase;letter-spacing:.1em;text-shadow:0 0 10px var(--accent-cyan-glow);margin:0;font-size:.65rem;font-weight:600}.panel-title:before{content:"// ";opacity:.6}.panel-content{background:var(--bg-primary);border-radius:0 0 8px 8px;padding:.875rem .875rem 1rem;overflow:visible}.badge{text-transform:uppercase;letter-spacing:.05em;background:var(--bg-tertiary);color:var(--text-muted);border-radius:9999px;align-items:center;gap:.375rem;padding:.25rem .625rem;font-size:.65rem;font-weight:600;display:inline-flex}.badge-active{background:var(--accent-green-dim);color:var(--accent-green)}.badge-dot{background:currentColor;border-radius:50%;width:6px;height:6px;animation:2s infinite pulse}.simulation-controls{margin-bottom:.75rem}.btn-secondary{background:var(--bg-tertiary);border-color:var(--border-color);color:var(--text-primary)}.btn-secondary:hover{border-color:var(--accent-cyan);background:var(--bg-elevated)}.import-actions{grid-template-columns:1fr 1fr;gap:.5rem;display:grid}.import-actions .btn{padding:.5rem .625rem;font-size:.65rem}.json-input{width:100%;min-height:60px;max-height:80px;color:var(--text-primary);background:var(--bg-secondary);border:1px solid var(--border-color);resize:vertical;transition:var(--transition-fast);border-radius:4px;margin-bottom:.5rem;padding:.5rem;font-family:JetBrains Mono,monospace;font-size:.7rem;line-height:1.4}.json-input:focus{border-color:var(--accent-cyan);box-shadow:0 0 0 2px var(--accent-cyan-glow);outline:none;max-height:200px}.json-input::placeholder{color:var(--text-muted)}.upload-icon{width:20px;height:20px;color:var(--text-muted);opacity:.5;flex-shrink:0}.file-upload:hover .upload-icon{color:var(--accent-cyan);opacity:1}.file-upload.dragging{border-color:var(--accent-green);background:var(--accent-green-dim)}.file-upload.dragging .upload-icon{color:var(--accent-green);opacity:1}.section-header{justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex}.section-title{color:var(--accent-cyan);text-transform:uppercase;letter-spacing:.15em;align-items:center;gap:.5rem;font-size:.7rem;font-weight:600;display:flex}.section-title:before{content:"//";opacity:.5}.btn{text-transform:uppercase;letter-spacing:.05em;border:1px solid var(--border-color);background:var(--bg-tertiary);color:var(--text-primary);cursor:pointer;white-space:nowrap;transition:var(--transition-fast);border-radius:4px;justify-content:center;align-items:center;gap:.5rem;padding:.625rem 1rem;font-family:JetBrains Mono,monospace;font-size:.75rem;font-weight:500;display:inline-flex;position:relative;overflow:hidden}.btn:before{content:"";background:linear-gradient(135deg,#0000 40%,#ffffff0d 50%,#0000 60%);transition:transform .5s;position:absolute;inset:0;transform:translate(-100%)}.btn:hover:before{transform:translate(100%)}.btn:hover{border-color:var(--accent-cyan);box-shadow:0 0 20px var(--accent-cyan-glow)}.btn:active{transform:scale(.98)}.btn-primary{background:var(--accent-cyan);color:var(--bg-primary);border-color:var(--accent-cyan)}.btn-primary:hover{box-shadow:0 0 30px var(--accent-cyan-dim);background:#00e5ff}.btn-success{background:var(--accent-green-dim);border-color:var(--accent-green);color:var(--accent-green)}.btn-danger{border-color:var(--accent-red);color:var(--accent-red);background:#ff47571a}.btn-sm{padding:.375rem .75rem;font-size:.7rem}.btn-icon{min-width:32px;padding:.5rem}.btn svg{width:14px;height:14px}.input-group{margin-bottom:1rem}.input-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.5rem;font-size:.7rem;font-weight:500;display:block}.textarea{width:100%;min-height:200px;color:var(--text-primary);background:var(--bg-primary);border:1px solid var(--border-color);resize:vertical;transition:var(--transition-fast);border-radius:6px;padding:1rem;font-family:JetBrains Mono,monospace;font-size:.8rem;line-height:1.6}.textarea:focus{border-color:var(--accent-cyan);box-shadow:0 0 0 3px var(--accent-cyan-glow);outline:none}.textarea::placeholder{color:var(--text-muted)}.file-upload{border:1px dashed var(--border-color);background:var(--bg-secondary);cursor:pointer;transition:var(--transition-fast);border-radius:6px;flex-direction:row;align-items:center;gap:.5rem;margin-bottom:.5rem;padding:.625rem .75rem;display:flex;position:relative}.file-upload:hover{border-color:var(--accent-cyan);background:var(--accent-cyan-glow)}.file-upload.dragover{border-color:var(--accent-green);background:var(--accent-green-dim)}.file-upload input{opacity:0;cursor:pointer;position:absolute;inset:0}.file-upload-icon{width:32px;height:32px;color:var(--text-muted);margin-bottom:.5rem}.file-upload-text{color:var(--text-secondary);font-size:.8rem}.file-upload-text strong{color:var(--accent-cyan)}.sim-status{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:6px;align-items:center;gap:.75rem;margin-bottom:1rem;padding:.75rem 1rem;display:flex}.sim-status-indicator{background:var(--text-muted);border-radius:50%;width:10px;height:10px;position:relative}.sim-status-indicator.active{background:var(--accent-green);animation:2s infinite pulse}.sim-status-indicator.active:after{content:"";border:2px solid var(--accent-green);border-radius:50%;animation:2s infinite ping;position:absolute;inset:-4px}.sim-status-text{color:var(--text-secondary);font-size:.8rem}.sim-status-text strong{color:var(--text-primary);font-family:JetBrains Mono,monospace}.current-state{background:var(--accent-green-dim);border:1px solid var(--accent-green);border-radius:4px;align-items:center;gap:.5rem;margin-bottom:.75rem;padding:.375rem .75rem;display:inline-flex}.current-state-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.1em;font-size:.65rem}.current-state-value{color:var(--accent-green);font-family:JetBrains Mono,monospace;font-size:.9rem;font-weight:600}.events-title{color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.5rem;font-size:.65rem}.events-list{flex-wrap:wrap;gap:.375rem;margin-bottom:.75rem;display:flex}.event-btn{color:var(--accent-cyan);background:var(--bg-primary);border:1px solid var(--accent-cyan-dim);cursor:pointer;transition:var(--transition-fast);border-radius:4px;align-items:center;gap:.25rem;padding:.375rem .625rem;font-family:JetBrains Mono,monospace;font-size:.7rem;font-weight:500;display:inline-flex}.event-btn:before{content:">";opacity:.5}.event-btn:hover{background:var(--accent-cyan-dim);border-color:var(--accent-cyan);box-shadow:0 0 15px var(--accent-cyan-glow)}.event-btn:active{transform:scale(.95)}.no-events{color:var(--text-muted);text-align:center;border:1px dashed var(--border-color);border-radius:6px;padding:1rem;font-size:.8rem;font-style:italic}.history-list{flex-direction:column;gap:.375rem;display:flex}.history-item{background:var(--bg-primary);border:1px solid var(--border-color);transition:var(--transition-fast);border-radius:4px;align-items:center;gap:.5rem;padding:.5rem .625rem;font-size:.7rem;display:flex}.history-item:first-child{border-color:var(--accent-cyan-dim);background:var(--accent-cyan-glow)}.history-index{width:20px;height:20px;color:var(--text-muted);background:var(--bg-tertiary);border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;font-family:JetBrains Mono,monospace;font-size:.6rem;font-weight:600;display:flex}.history-item:first-child .history-index{background:var(--accent-cyan);color:var(--bg-primary)}.history-event{color:var(--accent-orange);font-family:JetBrains Mono,monospace}.history-arrow{color:var(--text-muted)}.history-state{color:var(--text-primary);font-family:JetBrains Mono,monospace}.history-empty{color:var(--text-muted);text-align:center;padding:1rem .75rem;font-size:.75rem}.canvas-area{background:var(--bg-primary);position:relative;overflow:hidden}.canvas-container{width:100%;height:100%;position:relative}.canvas-container canvas{width:100%;height:100%;display:block}.empty-state{text-align:center;pointer-events:none;flex-direction:column;justify-content:center;align-items:center;padding:1.5rem 1rem;display:flex}.canvas-empty{text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:2rem;display:flex;position:absolute;inset:0}.empty-state-icon{width:80px;height:80px;color:var(--text-muted);opacity:.5;margin-bottom:1.5rem}.empty-state-title{color:var(--text-primary);margin-bottom:.5rem;font-size:1.25rem;font-weight:600}.empty-state-text{color:var(--text-secondary);max-width:400px;font-size:.9rem;line-height:1.6}.toolbar{z-index:10;gap:.5rem;display:flex;position:absolute;top:1rem;right:1rem}.legend{background:var(--bg-secondary);border:1px solid var(--border-color);z-index:10;border-radius:6px;gap:1rem;padding:.75rem 1rem;display:flex;position:absolute;bottom:1rem;left:1rem}.legend-item{color:var(--text-secondary);align-items:center;gap:.5rem;font-size:.7rem;display:flex}.legend-dot{border-radius:2px;width:10px;height:10px}.legend-dot.atomic{background:var(--state-atomic)}.legend-dot.compound{background:var(--state-compound)}.legend-dot.final{background:var(--state-final)}.legend-dot.parallel{background:var(--state-parallel)}.legend-dot.history{background:var(--state-history)}.toast-container{z-index:3000;flex-direction:column;gap:.75rem;display:flex;position:fixed;bottom:1.5rem;right:1.5rem}.toast{background:var(--bg-secondary);border:1px solid var(--border-color);box-shadow:var(--shadow-card);border-radius:8px;align-items:center;gap:.75rem;padding:.875rem 1.25rem;animation:.3s slideIn;display:flex}.toast.success{border-color:var(--accent-green)}.toast.error{border-color:var(--accent-red)}.toast-icon{flex-shrink:0;width:20px;height:20px}.toast.success .toast-icon{color:var(--accent-green)}.toast.error .toast-icon{color:var(--accent-red)}.toast-message{color:var(--text-primary);word-break:break-word;flex:1;font-size:.875rem}.toast-dismiss{width:24px;height:24px;color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;padding:0;display:inline-flex}.toast-dismiss:hover{color:var(--text-primary);background:#ffffff0d}.toast-dismiss svg{width:14px;height:14px}.state-tooltip{background:var(--bg-elevated);border:1px solid var(--border-color);box-shadow:var(--shadow-card);z-index:100;pointer-events:none;opacity:0;transition:var(--transition-fast);border-radius:8px;padding:.75rem 1rem;position:absolute;transform:translateY(10px)}.state-tooltip.visible{opacity:1;transform:translateY(0)}.state-tooltip-name{color:var(--text-primary);margin-bottom:.25rem;font-family:JetBrains Mono,monospace;font-size:.9rem;font-weight:600}.state-tooltip-type{color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;font-size:.7rem}.shortcuts-overlay{backdrop-filter:blur(4px);z-index:2000;opacity:0;visibility:hidden;transition:var(--transition-medium);background:#000c;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.shortcuts-overlay.active{opacity:1;visibility:visible}.shortcuts-modal{background:var(--bg-secondary);border:1px solid var(--border-color);width:90%;max-width:500px;transition:var(--transition-medium);border-radius:12px;padding:2rem;transform:scale(.9)}.shortcuts-overlay.active .shortcuts-modal{transform:scale(1)}.shortcuts-header{justify-content:space-between;align-items:center;margin-bottom:1.5rem;display:flex}.shortcuts-title{color:var(--text-primary);font-size:1rem;font-weight:600}.shortcuts-close{background:var(--bg-tertiary);border:1px solid var(--border-color);width:32px;height:32px;color:var(--text-secondary);cursor:pointer;transition:var(--transition-fast);border-radius:6px;justify-content:center;align-items:center;display:flex}.shortcuts-close:hover{color:var(--text-primary);border-color:var(--accent-cyan)}.shortcuts-list{flex-direction:column;gap:.75rem;display:flex}.shortcut-item{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:.5rem 0;display:flex}.shortcut-item:last-child{border-bottom:none}.shortcut-desc{color:var(--text-secondary);font-size:.875rem}.shortcut-key{align-items:center;gap:.25rem;display:inline-flex}.shortcut-key kbd{color:var(--text-primary);background:var(--bg-primary);border:1px solid var(--border-color);border-radius:4px;padding:.25rem .5rem;font-family:JetBrains Mono,monospace;font-size:.75rem}.control-row{gap:.5rem;margin-bottom:1rem;display:flex}.control-row .btn{flex:1}.sample-btn{width:100%;margin-top:.5rem}@media (width<=1024px){.sidebar{border-right:none;border-bottom:1px solid var(--border-color)}.legend{flex-wrap:wrap;justify-content:center;bottom:.5rem;left:.5rem;right:.5rem}}