html,body,#root{height:100%;width:100%}body{font-family:SF Mono,Fira Code,Monaco,Consolas,monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button{font-family:inherit}:root{--bg-primary: #0d1117;--bg-secondary: #161b22;--bg-tertiary: #21262d;--text-primary: #e6edf3;--text-secondary: #8b949e;--text-muted: #6e7681;--border-color: #30363d;--accent-blue: #58a6ff;--accent-green: #3fb950;--accent-orange: #d29922;--accent-red: #f85149;--accent-purple: #a371f7;--accent-cyan: #39c5cf;--code-segment: #58a6ff;--data-segment: #d29922;--heap-segment: #a371f7;--stack-segment: #3fb950}*{box-sizing:border-box;margin:0;padding:0}body{font-family:SF Mono,Fira Code,Monaco,Consolas,monospace;background:var(--bg-primary);color:var(--text-primary);line-height:1.5}.app{min-height:100vh;display:flex;flex-direction:column}.app-header{padding:1rem 2rem;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);text-align:center}.app-header h1{font-size:1.5rem;font-weight:600;color:var(--text-primary);margin-bottom:.25rem}.app-header .subtitle{font-size:.875rem;color:var(--text-secondary)}.controls-panel{background:var(--bg-secondary);padding:1rem 2rem;border-bottom:1px solid var(--border-color);display:flex;flex-direction:column;gap:.75rem}.phase-selector{display:flex;align-items:center;justify-content:center;gap:.5rem}.phase-btn{padding:.5rem 1rem;border:1px solid var(--border-color);background:var(--bg-tertiary);color:var(--text-secondary);border-radius:6px;cursor:pointer;font-size:.875rem;transition:all .2s}.phase-btn:hover:not(:disabled){background:var(--bg-secondary);border-color:var(--accent-blue)}.phase-btn.active{background:var(--accent-blue);color:#fff;border-color:var(--accent-blue)}.phase-btn:disabled{opacity:.5;cursor:not-allowed}.phase-arrow{color:var(--text-muted)}.progress-section{display:flex;flex-direction:column;align-items:center;gap:.5rem}.progress-bar{width:100%;max-width:600px;height:6px;background:var(--bg-tertiary);border-radius:3px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent-blue),var(--accent-green));transition:width .3s ease}.progress-text{font-size:.75rem;color:var(--text-secondary)}.playback-controls{display:flex;justify-content:center;gap:.5rem}.control-btn{padding:.5rem 1rem;border:1px solid var(--border-color);background:var(--bg-tertiary);color:var(--text-primary);border-radius:6px;cursor:pointer;font-size:.875rem;transition:all .2s;display:flex;align-items:center;gap:.25rem}.control-btn:hover:not(:disabled){background:var(--bg-secondary);border-color:var(--accent-blue)}.control-btn:disabled{opacity:.5;cursor:not-allowed}.control-btn.play{background:var(--accent-green);border-color:var(--accent-green);color:#fff}.control-btn.play:hover:not(:disabled){background:#2ea043}.control-btn.pause{background:var(--accent-orange);border-color:var(--accent-orange);color:#fff}.speed-control{display:flex;align-items:center;justify-content:center;gap:.5rem}.speed-label{font-size:.75rem;color:var(--text-secondary)}.speed-buttons{display:flex;gap:.25rem}.speed-btn{padding:.25rem .5rem;border:1px solid var(--border-color);background:var(--bg-tertiary);color:var(--text-secondary);border-radius:4px;cursor:pointer;font-size:.75rem;transition:all .2s}.speed-btn:hover{border-color:var(--accent-blue)}.speed-btn.active{background:var(--accent-blue);border-color:var(--accent-blue);color:#fff}.shortcuts-hint{font-size:.7rem;color:var(--text-muted);text-align:center}.app-main{flex:1;display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--border-color);min-height:0}.panel{background:var(--bg-primary);display:flex;flex-direction:column;overflow:hidden}.panel-header{padding:.75rem 1rem;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);font-size:.875rem;font-weight:600;color:var(--text-primary)}.panel-actions{padding:1rem;border-top:1px solid var(--border-color);display:flex;justify-content:center}.action-btn{padding:.75rem 1.5rem;border:none;border-radius:6px;cursor:pointer;font-size:.875rem;font-weight:600;transition:all .2s}.action-btn.primary{background:var(--accent-blue);color:#fff}.action-btn.primary:hover{background:#4c8ed9}.code-editor{flex:1;display:flex;flex-direction:column;overflow:hidden}.code-textarea{flex:1;padding:1rem;background:var(--bg-primary);border:none;color:var(--text-primary);font-family:inherit;font-size:.875rem;line-height:1.6;resize:none;outline:none}.code-lines{flex:1;overflow-y:auto;padding:.5rem 0}.code-line{display:flex;padding:0 1rem;line-height:1.6;font-size:.875rem}.code-line.highlighted{background:#58a6ff26;border-left:3px solid var(--accent-blue)}.line-number{width:3rem;text-align:right;padding-right:1rem;color:var(--text-muted);-webkit-user-select:none;user-select:none}.line-content{flex:1;white-space:pre}.token-keyword{color:#ff7b72}.token-type{color:#79c0ff}.token-string{color:#a5d6ff}.token-number{color:#79c0ff}.token-comment{color:var(--text-muted);font-style:italic}.token-func{color:#d2a8ff}.token-builtin{color:#ffa657}.token-operator{color:var(--accent-cyan)}.token-ident{color:var(--text-primary)}.phase-intro{padding:2rem;display:flex;flex-direction:column;gap:1.5rem}.phase-intro h2{font-size:1.25rem;color:var(--text-primary);text-align:center}.intro-steps{display:flex;flex-direction:column;gap:1rem}.intro-step{display:flex;gap:1rem;padding:1rem;background:var(--bg-secondary);border-radius:8px;border:1px solid var(--border-color)}.intro-step .step-num{width:2rem;height:2rem;background:var(--accent-blue);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;flex-shrink:0}.intro-step .step-content h3{font-size:.9rem;color:var(--text-primary);margin-bottom:.25rem}.intro-step .step-content p{font-size:.8rem;color:var(--text-secondary)}.intro-tip{text-align:center;font-size:.875rem;color:var(--text-secondary);padding:1rem;background:var(--bg-secondary);border-radius:6px}.compilation-phase{padding:1rem;display:flex;flex-direction:column;gap:1rem;overflow-y:auto}.pipeline-stages{display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem;padding:1rem;background:var(--bg-secondary);border-radius:8px}.pipeline-stage{display:flex;align-items:center;gap:.25rem;padding:.5rem;border-radius:6px;font-size:.7rem;transition:all .2s}.pipeline-stage.completed{color:var(--accent-green)}.pipeline-stage.active{background:var(--accent-blue);color:#fff}.pipeline-stage.pending{color:var(--text-muted)}.stage-icon{font-size:1rem}.stage-name{text-transform:capitalize}.stage-arrow{color:var(--text-muted);margin:0 .25rem}.phase-details{background:var(--bg-secondary);border-radius:8px;padding:1rem}.phase-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid var(--border-color)}.phase-icon{font-size:1.5rem}.phase-title{font-size:1rem;font-weight:600;color:var(--text-primary)}.phase-content{display:flex;flex-direction:column;gap:1rem}.phase-steps h4,.phase-output h4{font-size:.875rem;color:var(--text-secondary);margin-bottom:.5rem}.phase-steps ul{list-style:none;padding-left:0}.phase-steps li{font-size:.8rem;color:var(--text-primary);padding:.25rem 0 .25rem 1rem;position:relative}.phase-steps li:before{content:">";position:absolute;left:0;color:var(--accent-green)}.output-code{background:var(--bg-primary);padding:.75rem;border-radius:6px;font-size:.75rem;color:var(--text-secondary);overflow-x:auto;white-space:pre-wrap;max-height:150px;overflow-y:auto}.go-compilation-info{display:flex;gap:1rem;padding:.75rem;background:var(--bg-tertiary);border-radius:6px;font-size:.75rem}.info-item{display:flex;gap:.5rem}.info-label{color:var(--text-muted)}.info-value{color:var(--accent-cyan)}.execution-phase{padding:1rem;display:flex;flex-direction:column;gap:1rem;overflow-y:auto}.current-execution{background:var(--bg-secondary);border-radius:8px;padding:1rem}.exec-action{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-left:4px solid;background:var(--bg-tertiary);border-radius:0 6px 6px 0;margin-bottom:1rem}.action-icon{font-size:1.25rem}.action-type{font-weight:600;font-size:.875rem}.exec-description{margin-bottom:1rem}.desc-main{font-size:.9rem;color:var(--text-primary);margin-bottom:.25rem}.desc-line{font-size:.75rem;color:var(--text-muted)}.exec-explanation{padding:1rem;background:var(--bg-primary);border-radius:6px}.exec-explanation h4{font-size:.8rem;color:var(--text-secondary);margin-bottom:.5rem}.exec-explanation p{font-size:.85rem;color:var(--text-primary);line-height:1.5}.execution-timeline{background:var(--bg-secondary);border-radius:8px;padding:1rem}.timeline-header{font-size:.8rem;color:var(--text-secondary);margin-bottom:.75rem}.timeline-steps{display:flex;flex-direction:column;gap:.5rem}.timeline-step{display:flex;align-items:center;gap:.5rem;padding:.5rem;border-radius:4px;font-size:.75rem}.timeline-step.current{background:var(--accent-blue);color:#fff}.timeline-step.past{color:var(--text-muted)}.timeline-step.future{color:var(--text-muted);opacity:.5}.step-num{color:var(--text-muted);font-size:.7rem}.call-stack-viz{background:var(--bg-secondary);border-radius:8px;padding:1rem}.callstack-header{font-size:.8rem;color:var(--text-secondary);margin-bottom:.75rem}.callstack-frames{display:flex;flex-direction:column;gap:.25rem}.callstack-frame{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:var(--bg-tertiary);border-radius:4px;font-size:.8rem;border-left:3px solid var(--border-color)}.callstack-frame.active{background:#3fb9501a;border-left-color:var(--accent-green)}.callstack-empty{color:var(--text-muted);font-size:.8rem;padding:.5rem}.memory-visualization{flex:1;display:flex;flex-direction:column;overflow:hidden}.memory-empty{flex:1;display:flex;align-items:center;justify-content:center}.empty-message{color:var(--text-muted);font-size:.875rem}.memory-diagram{flex:1;display:flex;gap:.5rem;padding:1rem;overflow-y:auto}.address-column{display:flex;flex-direction:column;justify-content:space-between;font-size:.65rem;color:var(--text-muted);padding:.5rem 0;min-width:80px}.address-label.high,.address-label.low{font-size:.6rem;color:var(--text-secondary)}.address-spacer{flex:1}.segments-column{flex:1;display:flex;flex-direction:column;gap:.5rem}.memory-segment{border:1px solid var(--border-color);border-radius:6px;overflow:hidden;transition:all .2s}.memory-segment.highlighted{border-color:var(--accent-blue);box-shadow:0 0 10px #58a6ff33}.stack-segment{border-color:var(--stack-segment);flex:2;min-height:100px}.heap-segment{border-color:var(--heap-segment);min-height:60px}.data-segment{border-color:var(--data-segment);min-height:60px}.code-segment{border-color:var(--code-segment);min-height:80px}.segment-empty{padding:1rem;text-align:center;color:var(--text-muted);font-size:.75rem}.segment-arrow{text-align:center;font-size:.65rem;color:var(--text-muted);padding:.25rem}.free-space{flex:1;display:flex;align-items:center;justify-content:center;border:1px dashed var(--border-color);border-radius:6px;color:var(--text-muted);font-size:.7rem;min-height:40px}.labels-column{display:flex;flex-direction:column;justify-content:space-between;font-size:.65rem;min-width:80px;padding:.5rem 0}.segment-label{padding:.25rem .5rem;border-radius:4px;text-align:center}.segment-label.stack{background:#3fb95033;color:var(--stack-segment)}.segment-label.heap{background:#a371f733;color:var(--heap-segment)}.segment-label.data{background:#d2992233;color:var(--data-segment)}.segment-label.code{background:#58a6ff33;color:var(--code-segment)}.segment-label-spacer{flex:1}.stack-frame{border-bottom:1px solid var(--border-color);padding:.75rem}.stack-frame:last-child{border-bottom:none}.stack-frame.frame-highlighted{background:#3fb9501a}.frame-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;padding-bottom:.5rem;border-bottom:1px dashed var(--border-color)}.frame-name{font-weight:600;color:var(--accent-green);font-size:.8rem}.frame-bp{font-size:.65rem;color:var(--text-muted)}.frame-section{margin:.5rem 0}.section-title{font-size:.65rem;color:var(--text-secondary);margin-bottom:.25rem}.frame-var{display:grid;grid-template-columns:auto 1fr auto auto;gap:.5rem;font-size:.7rem;padding:.25rem 0}.var-offset{color:var(--text-muted);font-size:.6rem}.var-address{color:var(--accent-purple);font-size:.65rem;font-family:JetBrains Mono,Fira Code,monospace;cursor:help}.var-name{color:var(--accent-cyan)}.var-type{color:var(--text-muted)}.var-value{color:var(--accent-orange);font-weight:500}.frame-footer{margin-top:.5rem;padding-top:.5rem;border-top:1px dashed var(--border-color)}.ret-addr{font-size:.6rem;color:var(--text-muted)}.heap-block{padding:.5rem;font-size:.7rem;border-bottom:1px solid var(--border-color);border-left:3px solid var(--heap-segment);transition:all .3s ease}.heap-block:last-child{border-bottom:none}.heap-block-header{display:flex;gap:.5rem;align-items:center;margin-bottom:.25rem}.heap-block-body{display:flex;gap:.5rem;align-items:center}.heap-addr{color:var(--text-muted);font-family:JetBrains Mono,Fira Code,monospace;font-size:.65rem}.heap-type{color:var(--accent-purple);font-weight:500}.heap-value{color:var(--text-primary)}.heap-size{color:var(--text-muted);font-size:.65rem}.heap-state-active{border-left-color:var(--heap-segment)}.heap-state-marked{border-left-color:var(--accent-green);background:#3fb95014}.heap-state-unmarked{border-left-color:var(--accent-red);background:#f8514914}.heap-state-freed{border-left-color:var(--accent-red);background:#f851491f;opacity:.6}.heap-state-freed .heap-value,.heap-state-freed .heap-type{text-decoration:line-through}.heap-gc-badge{font-size:.55rem;font-weight:700;text-transform:uppercase;padding:.1rem .4rem;border-radius:3px;letter-spacing:.5px;margin-left:auto}.badge-marked{background:#3fb95033;color:var(--accent-green)}.badge-unmarked{background:#f8514933;color:var(--accent-red);animation:blink-badge .8s ease-in-out infinite}.badge-freed{background:#f8514926;color:var(--accent-red)}@keyframes blink-badge{0%,to{opacity:1}50%{opacity:.5}}.heap-ref{display:flex;align-items:center;gap:.3rem;font-size:.6rem;margin-top:.2rem;color:var(--text-muted)}.heap-ref-arrow{color:var(--accent-cyan);font-size:.8rem}.heap-ref-name{color:var(--accent-cyan);font-weight:500}.heap-ref-from{color:var(--text-muted);font-style:italic}.gc-indicator{display:flex;align-items:center;gap:.4rem;padding:.4rem .6rem;font-size:.7rem;font-weight:600;border-bottom:1px solid var(--border-color)}.gc-icon{font-size:.9rem}.gc-label{flex:1}.gc-cycle{font-size:.6rem;color:var(--text-muted);font-weight:400}.gc-phase-mark-roots{background:#58a6ff26;color:var(--accent-blue);border-bottom-color:var(--accent-blue)}.gc-phase-sweep{background:#f8514926;color:var(--accent-red);border-bottom-color:var(--accent-red)}.gc-phase-done{background:#3fb95026;color:var(--accent-green);border-bottom-color:var(--accent-green)}.heap-segment.gc-active{border-color:var(--accent-blue);box-shadow:0 0 12px #a371f74d}.heap-cleared{color:var(--accent-green)!important;font-style:italic}.data-section{padding:.5rem}.data-entry{display:flex;gap:.5rem;font-size:.7rem;padding:.25rem 0}.data-addr{color:var(--text-muted)}.data-name{color:var(--accent-orange)}.data-value{color:var(--text-primary)}.data-value.const{color:var(--accent-cyan)}.code-instructions{padding:.5rem}.instruction{display:flex;gap:.5rem;font-size:.65rem;padding:.2rem .5rem;border-radius:2px}.instruction.current-pc{background:#58a6ff33}.instruction.more{color:var(--text-muted);font-style:italic}.inst-addr{color:var(--text-muted);min-width:80px}.inst-code{color:var(--accent-blue)}.registers-panel{display:flex;justify-content:center;gap:1.5rem;padding:.75rem;background:var(--bg-secondary);border-top:1px solid var(--border-color)}.register{display:flex;gap:.5rem;align-items:center}.reg-name{font-size:.7rem;color:var(--text-secondary);font-weight:600}.reg-value{font-size:.75rem;color:var(--accent-cyan);font-family:monospace}.app-footer{padding:1rem 2rem;background:var(--bg-secondary);border-top:1px solid var(--border-color)}.memory-legend{display:flex;justify-content:center;gap:2rem;flex-wrap:wrap}.legend-item{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--text-secondary)}.legend-color{width:12px;height:12px;border-radius:2px}.legend-color.code{background:var(--code-segment)}.legend-color.data{background:var(--data-segment)}.legend-color.heap{background:var(--heap-segment)}.legend-color.stack{background:var(--stack-segment)}.copyright{text-align:center;font-size:.75rem;color:var(--text-muted);margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border-color)}.panel-header.error{background:#f8514933;color:var(--accent-red)}.pipeline-stage.error{background:var(--accent-red);color:#fff}.phase-details.has-error{border:1px solid var(--accent-red)}.phase-header.error{color:var(--accent-red);border-bottom-color:var(--accent-red)}.phase-header.error .phase-title{color:var(--accent-red)}.error-summary{padding:1rem;background:#f851491a;border-radius:6px;border-left:4px solid var(--accent-red)}.error-summary h4{color:var(--accent-red);margin-bottom:.5rem}.error-count{color:var(--text-secondary);font-size:.875rem}.error-list{display:flex;flex-direction:column;gap:.75rem}.error-item{padding:1rem;background:var(--bg-primary);border-radius:6px;border-left:3px solid var(--accent-red)}.error-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.error-type{font-size:.7rem;text-transform:uppercase;padding:.2rem .5rem;background:#f8514933;color:var(--accent-red);border-radius:4px;font-weight:600}.error-location{font-size:.75rem;color:var(--text-muted)}.error-message{font-size:.9rem;color:var(--text-primary);margin-bottom:.5rem;font-weight:500}.error-code{padding:.5rem;background:var(--bg-tertiary);border-radius:4px;margin-bottom:.5rem;overflow-x:auto}.error-code code{font-size:.8rem;color:var(--accent-orange)}.error-suggestion{font-size:.8rem;color:var(--text-secondary)}.suggestion-label{color:var(--accent-green);font-weight:600}.error-help{padding:1rem;background:var(--bg-tertiary);border-radius:6px}.error-help h4{color:var(--text-secondary);margin-bottom:.5rem;font-size:.875rem}.error-help p{color:var(--text-primary);font-size:.85rem}.info-value.error{color:var(--accent-red)}.info-value.success{color:var(--accent-green)}.code-line.error{background:#f8514926;border-left:3px solid var(--accent-red)}.line-number.error{color:var(--accent-red);font-weight:700}.app-header{display:flex;justify-content:center;align-items:center;position:relative}.header-content{text-align:center}.compiler-status{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:20px;font-size:.8rem;font-weight:500;position:absolute;right:2rem;top:50%;transform:translateY(-50%)}.compiler-status.connected{background:#3fb95026;border:1px solid var(--accent-green);color:var(--accent-green)}.compiler-status.disconnected{background:#f8514926;border:1px solid var(--accent-red);color:var(--accent-red)}.status-dot{width:8px;height:8px;border-radius:50%;animation:pulse 2s infinite}.compiler-status.connected .status-dot{background:var(--accent-green)}.compiler-status.disconnected .status-dot{background:var(--accent-red)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.action-btn:disabled{opacity:.6;cursor:not-allowed}.console-output{margin-top:1rem;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:8px;overflow:hidden}.console-header{display:flex;justify-content:space-between;align-items:center;background:var(--bg-tertiary);padding:.5rem 1rem;font-size:.875rem;border-bottom:1px solid var(--border-color)}.console-badge{background:var(--accent-green);color:var(--bg-primary);padding:.125rem .5rem;border-radius:10px;font-size:.7rem;font-weight:600}.console-badge.live{background:var(--accent-cyan);animation:glow 1.5s ease-in-out infinite}.console-header.real-output{background:linear-gradient(90deg,var(--bg-tertiary),rgba(57,197,207,.2))}@keyframes glow{0%,to{box-shadow:0 0 5px var(--accent-cyan)}50%{box-shadow:0 0 15px var(--accent-cyan)}}.console-content{padding:.75rem;font-family:JetBrains Mono,Fira Code,monospace;font-size:.8rem;max-height:150px;overflow-y:auto;background:#000}.console-empty{color:var(--text-muted);display:flex;align-items:center;gap:.5rem}.console-waiting{font-style:italic}.console-line{display:flex;align-items:flex-start;gap:.5rem;padding:.25rem 0;color:var(--text-primary)}.console-prompt{color:var(--accent-green);font-weight:700;-webkit-user-select:none;user-select:none}.console-text{color:#fff}@media(max-width:1200px){.app-main{grid-template-columns:1fr 1fr}.memory-panel{grid-column:span 2}}@media(max-width:768px){.app-main{grid-template-columns:1fr}.memory-panel{grid-column:span 1}.phase-selector,.playback-controls{flex-wrap:wrap}.app-header{flex-direction:column;gap:.5rem}.compiler-status{position:static;transform:none}}