:root,[data-theme="dark"]{--vsc-bg:#1e1e1e;--vsc-sidebar:#252526;--vsc-actbar:#333333;--vsc-panel:#1e1e1e;--vsc-titlebar:#3c3c3c;--vsc-input:#3c3c3c;--vsc-border:#3c3c3c;--vsc-border2:#454545;--vsc-hover:#2a2d2e;--vsc-selected:#094771;--vsc-tab-active:#1e1e1e;--vsc-tab-inactive:#2d2d2d;--vsc-tab-border:#007acc;--vsc-status:#007acc;--vsc-status-text:#ffffff;--vsc-accent:#007acc;--vsc-accent2:#0e639c;--vsc-green:#4ec9b0;--vsc-green2:#23d18b;--vsc-red:#f48771;--vsc-yellow:#cca700;--vsc-orange:#d7ba7d;--vsc-purple:#c586c0;--vsc-blue:#9cdcfe;--vsc-blue2:#569cd6;--vsc-cyan:#4ec9b0;--text:#cccccc;--text2:#8c8c8c;--text3:#5a5a5a;--text-bright:#e8e8e8;--scrollbar:#424242;--scrollbar-hover:#686868;--tok-keyword:#569cd6;--tok-type:#4ec9b0;--tok-fn:#dcdcaa;--tok-var:#9cdcfe;--tok-string:#ce9178;--tok-number:#b5cea8;--tok-comment:#6a9955;--tok-operator:#d4d4d4;--tok-macro:#c586c0;--tok-param:#9cdcfe;--exec-line-bg:rgba(255,255,100,0.12);--exec-gutter-bg:rgba(255,255,100,0.25);--btn-bg:#0e639c;--btn-hover:#1177bb;--btn-text:#ffffff;--btn-secondary:#3a3a3a;--btn-sec-hover:#4a4a4a;--badge-var:#1f3a5f;--badge-text:#9cdcfe;--heap-border:#5a4a2f;--heap-bg:#2a2010;--arr-bg:#1f2d1f;--arr-border:#3a5a3a;--arr-text:#4ec9b0;--ptr-color:#c586c0;--changed-bg:rgba(255,200,0,0.08);--changed-text:#cca700;--wt-border:#007acc;--wt-bg:#032f4e;}
[data-theme="light"]{--vsc-bg:#ffffff;--vsc-sidebar:#f3f3f3;--vsc-actbar:#2c2c2c;--vsc-panel:#ffffff;--vsc-titlebar:#dddddd;--vsc-input:#ffffff;--vsc-border:#e0e0e0;--vsc-border2:#cccccc;--vsc-hover:#e8e8e8;--vsc-selected:#cce5ff;--vsc-tab-active:#ffffff;--vsc-tab-inactive:#ececec;--vsc-tab-border:#007acc;--vsc-status:#007acc;--vsc-status-text:#ffffff;--vsc-accent:#0066b8;--vsc-accent2:#005a9e;--vsc-green:#267f99;--vsc-green2:#1a8a1a;--vsc-red:#cd3131;--vsc-yellow:#b5890e;--vsc-orange:#875500;--vsc-purple:#af00db;--text:#1e1e1e;--text2:#6e6e6e;--text3:#a0a0a0;--text-bright:#000000;--scrollbar:#c0c0c0;--scrollbar-hover:#909090;--tok-keyword:#0000ff;--tok-type:#267f99;--tok-fn:#795e26;--tok-var:#001080;--tok-string:#a31515;--tok-number:#098658;--tok-comment:#008000;--tok-operator:#000000;--tok-macro:#af00db;--tok-param:#001080;--exec-line-bg:rgba(255,224,0,0.25);--exec-gutter-bg:rgba(255,200,0,0.4);--btn-bg:#0066b8;--btn-hover:#005a9e;--btn-text:#ffffff;--btn-secondary:#e0e0e0;--btn-sec-hover:#d0d0d0;--badge-var:#dbeafe;--badge-text:#1d4ed8;--heap-border:#c8a060;--heap-bg:#fff8ec;--arr-bg:#f0fff0;--arr-border:#7cba7c;--arr-text:#267f99;--ptr-color:#af00db;--changed-bg:rgba(255,200,0,0.18);--changed-text:#875500;--wt-border:#0066b8;--wt-bg:#dbeafe;}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

html,body{height:100%;overflow:auto;font-family:'Inter',system-ui,sans-serif;background:var(--vsc-bg);color:var(--text);font-size:20px !important;line-height:1.5;-webkit-font-smoothing:antialiased;}

/* ── Title bar ───────────────────────────────────────────────────────────── */
#titlebar{height:48px;background:var(--vsc-titlebar);border-bottom:1px solid var(--vsc-border);display:flex;align-items:center;padding:0 12px;gap:10px;flex-shrink:0;user-select:none;position:relative;z-index:20;overflow-x:auto;scrollbar-width:none;}
#titlebar::-webkit-scrollbar{display:none;}
.tb-logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:var(--text-bright);white-space:nowrap;flex-shrink:0;}
.tb-logo-icon{width:28px;height:28px;background:var(--vsc-accent);border-radius:6px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-family:'Fira Code',monospace;font-weight:700;flex-shrink:0;}
.tb-sep{width:1px;height:20px;background:var(--vsc-border2);flex-shrink:0;}
.sample-group{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.sample-group label{font-size:11.5px;color:var(--text2);font-weight:500;white-space:nowrap;}
.vsc-select{background:var(--vsc-input);border:1px solid var(--vsc-border2);color:var(--text);font-family:'Inter',sans-serif;font-size:12px;padding:4px 8px;border-radius:3px;outline:none;cursor:pointer;max-width:190px;transition:border-color .12s;}
.vsc-select:focus{border-color:var(--vsc-accent);}
.vsc-select option{background:var(--vsc-input);}
.tb-spacer{flex:1;min-width:20px;}
.tb-btn{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:3px;border:1px solid transparent;background:transparent;color:var(--text);font-family:'Inter',sans-serif;font-size:12px;font-weight:500;cursor:pointer;white-space:nowrap;transition:background .1s,color .1s;-webkit-tap-highlight-color:transparent;flex-shrink:0;}
.tb-btn:hover{background:var(--vsc-hover);}
.tb-btn:active{opacity:.8;}
.tb-btn.primary{background:var(--btn-bg);color:var(--btn-text);border-color:transparent;font-weight:600;padding:5px 16px;}
.tb-btn.primary:hover{background:var(--btn-hover);}
.tb-btn.icon-only{padding:5px 8px;font-size:14px;}
.tb-btn:disabled{opacity:.38;cursor:not-allowed;pointer-events:none;}
.tb-btn i{font-size:13px;}

.zoom-group{display:flex;align-items:center;gap:2px;flex-shrink:0;padding:2px;border:1px solid var(--vsc-border2);border-radius:4px;background:var(--vsc-input);}
.zoom-group .tb-btn{padding:4px 7px;min-width:28px;justify-content:center;}
.zoom-group .tb-btn:hover{background:var(--vsc-hover);}
.zoom-level{min-width:42px;text-align:center;color:var(--text2);font-family:'Inter',sans-serif;font-size:10.5px;font-weight:600;user-select:none;}

/* ── Editor ──────────────────────────────────────────────────────────────── */
#cm-host{--code-font-size:13.5px;--code-line-height:22px;}
#cm-host .CodeMirror,
#cm-host .CodeMirror pre{font-size:var(--code-font-size) !important;line-height:var(--code-line-height) !important;}
#cm-host .CodeMirror-linenumber{font-size:var(--code-font-size) !important;line-height:var(--code-line-height) !important;}
#cm-host .CodeMirror-lines{padding-top:4px;padding-bottom:4px;}
#app{display:flex;height:calc(100vh - 48px - 22px);overflow:hidden;}
#editor-panel{display:flex;flex-direction:column;width:52%;min-width:280px;max-width:80%;background:var(--vsc-panel);border-right:1px solid var(--vsc-border);overflow:hidden;flex-shrink:0;position:relative;}
.editor-tabs{height:35px;background:var(--vsc-sidebar);border-bottom:1px solid var(--vsc-border);display:flex;align-items:stretch;overflow-x:auto;flex-shrink:0;}
.editor-tabs::-webkit-scrollbar{display:none;}
.e-tab{display:flex;align-items:center;gap:6px;padding:0 14px;font-size:12px;color:var(--text2);cursor:pointer;border-right:1px solid var(--vsc-border);background:var(--vsc-tab-inactive);white-space:nowrap;transition:background .1s;position:relative;flex-shrink:0;}
.e-tab.active{background:var(--vsc-tab-active);color:var(--text-bright);border-bottom:none;}
.e-tab.active::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--vsc-tab-border);}
.e-tab i{font-size:12px;opacity:.7;}
#cm-host{flex:1;overflow:hidden;position:relative;}
[data-theme="dark"] .CodeMirror{background:#1e1e1e !important;color:#d4d4d4 !important;height:100% !important;font-family:'Fira Code','Cascadia Code','Consolas',monospace !important;font-size:var(--code-font-size,13.5px) !important;line-height:var(--code-line-height,22px) !important;}
[data-theme="light"] .CodeMirror{background:#ffffff !important;color:#000000 !important;height:100% !important;font-family:'Fira Code','Cascadia Code','Consolas',monospace !important;font-size:var(--code-font-size,13.5px) !important;line-height:var(--code-line-height,22px) !important;}
.CodeMirror-scroll{overflow:auto !important;}
[data-theme="dark"] .CodeMirror-gutters{background:#1e1e1e !important;border-right:1px solid #2a2a2a !important;}
[data-theme="light"] .CodeMirror-gutters{background:#f8f8f8 !important;border-right:1px solid #e0e0e0 !important;}
[data-theme="dark"] .CodeMirror-linenumber{color:#858585 !important;padding:0 12px !important;}
[data-theme="light"] .CodeMirror-linenumber{color:#999999 !important;padding:0 12px !important;}
[data-theme="dark"] .CodeMirror-cursor{border-left:2px solid #aeafad !important;}
[data-theme="light"] .CodeMirror-cursor{border-left:2px solid #000000 !important;}
[data-theme="dark"] .CodeMirror-selected{background:rgba(38,79,120,.8) !important;}
[data-theme="light"] .CodeMirror-selected{background:rgba(173,214,255,.7) !important;}
[data-theme="dark"] .CodeMirror-matchingbracket{background:rgba(90,90,90,.5) !important;color:#fff !important;outline:1px solid #888;}
[data-theme="light"] .CodeMirror-matchingbracket{background:rgba(0,100,200,.15) !important;color:inherit !important;outline:1px solid #aaa;}
[data-theme="dark"] .CodeMirror-activeline-background{background:rgba(255,255,255,.04) !important;}
[data-theme="light"] .CodeMirror-activeline-background{background:rgba(0,0,0,.03) !important;}
.cm-keyword{color:var(--tok-keyword) !important;font-weight:400 !important;}
.cm-def{color:var(--tok-fn) !important;}
.cm-variable{color:var(--tok-var) !important;}
.cm-variable-2{color:var(--tok-var) !important;}
.cm-property{color:var(--tok-var) !important;}
.cm-operator{color:var(--tok-operator) !important;}
.cm-string{color:var(--tok-string) !important;}
.cm-string-2{color:var(--tok-string) !important;}
.cm-number{color:var(--tok-number) !important;}
.cm-comment{color:var(--tok-comment) !important;font-style:italic !important;}
.cm-type{color:var(--tok-type) !important;}
.cm-builtin{color:var(--tok-fn) !important;}
.cm-atom{color:var(--tok-keyword) !important;}
.cm-meta{color:var(--tok-macro) !important;}
.cm-qualifier{color:var(--tok-keyword) !important;}
.cm-exec-line{background:var(--exec-line-bg) !important;}
.cm-exec-gutter{background:var(--exec-gutter-bg) !important;}

/* ── Control bar ─────────────────────────────────────────────────────────── */
#ctrl-bar{height:42px;background:var(--vsc-sidebar);border-top:1px solid var(--vsc-border);display:flex;align-items:center;gap:4px;padding:0 10px;flex-shrink:0;}
.ctrl-btn{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:3px;border:1px solid var(--vsc-border2);background:var(--vsc-input);color:var(--text);font-family:'Inter',sans-serif;font-size:11.5px;font-weight:500;cursor:pointer;transition:background .1s;white-space:nowrap;-webkit-tap-highlight-color:transparent;}
.ctrl-btn:hover{background:var(--vsc-hover);}
.ctrl-btn:active{opacity:.8;}
.ctrl-btn.play-btn{background:#16825d;border-color:#16825d;color:#fff;}
.ctrl-btn.play-btn:hover{background:#1aaa77;}
.ctrl-btn:disabled{opacity:.35;cursor:not-allowed;pointer-events:none;}
.ctrl-btn i{font-size:11px;}
.step-badge{font-family:'Fira Code',monospace;font-size:11px;color:var(--text2);background:var(--vsc-bg);border:1px solid var(--vsc-border);border-radius:3px;padding:3px 8px;min-width:95px;text-align:center;white-space:nowrap;}
.speed-wrap{display:flex;align-items:center;gap:5px;margin-left:auto;font-size:11px;color:var(--text2);flex-shrink:0;}
.speed-wrap input[type=range]{width:64px;accent-color:var(--vsc-accent);cursor:pointer;}
#resize-handle{width:4px;background:var(--vsc-border);cursor:col-resize;flex-shrink:0;transition:background .15s;position:relative;z-index:5;}
#resize-handle:hover,#resize-handle.dragging{background:var(--vsc-accent);}

/* ── Visualization panel / grid ──────────────────────────────────────────── */
#viz-panel{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--vsc-panel);overflow-y:auto;overflow-x:auto;padding:14px;-webkit-overflow-scrolling:touch;}
/* FIX: minmax(0,1fr) stops wide content (like long output lines) from stretching the columns */
#viz-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto;gap:12px;align-items:start;}
.viz-card{background:var(--vsc-panel);border:1px solid var(--vsc-border);border-radius:6px;overflow:auto;display:flex;flex-direction:column;min-width:0;max-width:100%; /* FIX */}
.viz-card-hdr{height:34px;background:var(--vsc-sidebar);border-bottom:1px solid var(--vsc-border);display:flex;align-items:center;gap:7px;padding:0 12px;font-size:11.5px;font-weight:600;color:var(--text-bright);flex-shrink:0;}
.viz-card-hdr i{font-size:12px;color:var(--vsc-accent);}
/* FIX: overflow:auto (was scroll) -> scrollbars only appear when content overflows */
.viz-card-body{flex:1;overflow-y:auto;overflow-x:auto;padding:12px;height:380px;max-height:380px;min-width:0;-webkit-overflow-scrolling:touch;}
#card-memory{grid-column:1 / 3;}
#card-output{grid-column:1 / 2;}
#card-callstack{grid-column:2 / 3;}
#card-memmap{grid-column:1 / 3;}

.wt-box{background:var(--wt-bg);border:1px solid var(--wt-border);border-left:3px solid var(--wt-border);border-radius:4px;padding:10px 13px;font-size:12.5px;line-height:1.6;color:var(--text);margin-bottom:12px;}
.wt-box b{color:var(--vsc-accent);}
.wt-box code{font-family:'Fira Code',monospace;font-size:12px;background:rgba(0,0,0,.2);border-radius:3px;padding:1px 5px;color:var(--tok-fn);}
.wt-box.err{background:rgba(244,135,113,.08);border-color:var(--vsc-red);color:var(--vsc-red);font-family:'Fira Code',monospace;font-size:12px;white-space:pre-wrap;}
.wt-box.success{border-color:var(--vsc-green2);}
.frame-card{border:1px solid var(--vsc-border2);border-radius:4px;margin-bottom:10px;overflow:visible;}
.frame-card.frame-active{border-color:var(--vsc-accent);}
.frame-hdr{background:var(--vsc-sidebar);padding:6px 12px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--vsc-border);font-size:11.5px;font-weight:600;}
.frame-fn{font-family:'Fira Code',monospace;color:var(--tok-fn);}
.frame-tag{margin-left:auto;font-size:10px;background:var(--vsc-accent);color:#fff;border-radius:3px;padding:1px 7px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;font-family:'Inter',sans-serif;}
.vtbl-wrap{overflow-x:auto;max-width:100%;}
.vtbl{width:max-content;min-width:100%;border-collapse:collapse;font-size:12px;}
.vtbl th{background:rgba(0,0,0,.15);color:var(--text3);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;padding:5px 12px;text-align:left;border-bottom:1px solid var(--vsc-border);}
.vtbl td{padding:6px 12px;border-bottom:1px solid rgba(100,100,100,.12);vertical-align:middle;font-family:'Fira Code',monospace;font-size:12px;}
.vtbl tr:last-child td{border-bottom:none;}
.vtbl tr.v-changed{background:var(--changed-bg);}
.vn{color:var(--tok-var);}
.vt{color:var(--text3);font-size:10.5px;font-family:'Inter',sans-serif;}
.vv{color:var(--vsc-green2);}
.vv.vc{color:var(--changed-text);font-weight:600;}
.vv.vptr{color:var(--ptr-color);}
.vv.vnull{color:var(--text3);}
.vaddr{color:var(--text3);font-size:10.5px;}
.vbin{color:var(--vsc-purple);font-size:10.5px;letter-spacing:.5px;}
.seg-badge{font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:0 5px;border-radius:3px;margin-left:5px;font-family:'Inter',sans-serif;}
.seg-badge.data{background:rgba(78,201,176,.18);color:var(--vsc-green);}
.seg-badge.bss{background:rgba(215,186,125,.18);color:var(--vsc-orange);}
.seg-badge.heap{background:rgba(197,134,192,.18);color:var(--ptr-color);}
.seg-badge.stack{background:rgba(0,122,204,.18);color:var(--vsc-accent);}
.seg-badge.static{background:rgba(204,167,0,.18);color:var(--vsc-yellow);}

/* ── Array cells: value bars + swap/search highlight states ─────────────── */
.arr-row{display:flex;flex-wrap:nowrap;align-items:flex-end;gap:5px;padding:2px 2px 14px;overflow-x:auto;max-width:100%;}
.arr-cell{position:relative;min-width:36px;padding:4px 5px 12px;background:var(--arr-bg);border:1px solid var(--arr-border);border-radius:4px;text-align:center;color:var(--arr-text);font-size:11.5px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .15s ease;}
.arr-cell .ac-val{order:1;font-weight:600;white-space:nowrap;}
.arr-cell .ac-bar-track{order:2;width:16px;min-height:6px;display:flex;align-items:flex-end;justify-content:center;margin:4px 0 2px;}
.arr-cell .ac-bar-fill{width:100%;background:linear-gradient(180deg,var(--vsc-accent) 0%,var(--vsc-accent2) 100%);border-radius:2px 2px 0 0;transition:height .3s ease,background .2s ease;}
.arr-cell .ac-bin{order:3;display:block;font-size:7px;color:var(--text3);margin-top:1px;font-family:'Fira Code',monospace;}
.arr-cell .ac-idx{order:4;display:block;margin-top:1px;font-size:8px;color:var(--text3);text-align:center;font-family:'Inter',sans-serif;}
.arr-idx{position:absolute;bottom:1px;left:0;right:0;font-size:8px;color:var(--text3);text-align:center;font-family:'Inter',sans-serif;}

.arr-cell.arr-cell-swap{background:rgba(215,90,40,.18);border-color:var(--vsc-orange);box-shadow:0 0 0 2px rgba(215,120,40,.28);transform:translateY(-2px);}
.arr-cell.arr-cell-swap .ac-bar-fill{background:linear-gradient(180deg,var(--vsc-orange) 0%,#b85c00 100%);}
.arr-cell.arr-cell-touch{background:rgba(0,122,204,.14);border-color:var(--vsc-accent);}
.arr-cell.arr-cell-touch .ac-bar-fill{background:linear-gradient(180deg,var(--vsc-accent) 0%,var(--vsc-accent2) 100%);}
.arr-cell.arr-cell-compare{background:rgba(204,167,0,.16);border-color:var(--vsc-yellow);}
.arr-cell.arr-cell-compare .ac-bar-fill{background:linear-gradient(180deg,var(--vsc-yellow) 0%,#a37a00 100%);}
.arr-cell.arr-cell-match{background:rgba(35,209,139,.2);border-color:var(--vsc-green2);box-shadow:0 0 0 2px rgba(35,209,139,.32);transform:translateY(-2px);}
.arr-cell.arr-cell-match .ac-bar-fill{background:linear-gradient(180deg,var(--vsc-green2) 0%,#0f7a4f 100%);}
.arr-cell.arr-cell-match::after{content:'✓ found';position:absolute;top:-15px;left:50%;transform:translateX(-50%);font-size:8px;font-weight:700;color:var(--vsc-green2);white-space:nowrap;font-family:'Inter',sans-serif;}

.sec-hdr{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text3);display:flex;align-items:center;gap:8px;margin:14px 0 8px;}
.sec-hdr::after{content:'';flex:1;height:1px;background:var(--vsc-border);}
.heap-block{background:var(--heap-bg);border:1px solid var(--heap-border);border-left:3px solid var(--vsc-orange);border-radius:4px;padding:8px 12px;margin-bottom:6px;font-family:'Fira Code',monospace;font-size:12px;display:flex;flex-direction:column;gap:8px;overflow-x:auto;max-width:100%;}
.heap-block .hb-head{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.heap-block .hb-body{overflow-x:auto;width:100%;}
.h-addr{color:var(--ptr-color);font-weight:600;}
.h-sz{color:var(--text2);font-size:10.5px;font-family:'Inter',sans-serif;}
.h-data{color:var(--vsc-orange);}

/* ── Output card (FIX: horizontal scrolling) ─────────────────────────────── */
.out-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text3);margin-bottom:7px;}
#output-area{
    display:block;
    width:100%;
    min-width:0;
    max-width:100%;
    min-height:90px;
    max-height:300px;
    background:#0c0c0c;
    border:1px solid var(--vsc-border);
    border-radius:4px;
    padding:12px 14px;
    margin-bottom:10px;
    font-family:'Fira Code',monospace;
    font-size:13px;
    line-height:1.8;
    color:#cccccc;
    /* never wrap or break lines -> long lines scroll sideways */
    white-space:pre;
    word-break:normal;
    overflow-wrap:normal;
    word-wrap:normal;
    tab-size:4;
    overflow-x:auto;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
}
[data-theme="light"] #output-area{background:#1e1e1e;}
#output-area::-webkit-scrollbar{width:8px;height:8px;}
#output-area::-webkit-scrollbar-thumb{background:#555;border-radius:4px;}
#output-area::-webkit-scrollbar-thumb:hover{background:#777;}
#output-area{scrollbar-width:thin;scrollbar-color:#555 transparent;}

.stdin-row{display:flex;gap:7px;}
#stdin-in{flex:1;background:var(--vsc-input);border:1px solid var(--vsc-border2);color:var(--text);font-family:'Fira Code',monospace;font-size:12.5px;padding:6px 10px;border-radius:3px;outline:none;transition:border-color .12s;}
#stdin-in:focus{border-color:var(--vsc-accent);}
#stdin-in::placeholder{color:var(--text3);}

/* ── Call stack / memory map ─────────────────────────────────────────────── */
.cs-item{background:var(--vsc-sidebar);border:1px solid var(--vsc-border);border-radius:4px;padding:8px 12px;margin-bottom:5px;font-family:'Fira Code',monospace;font-size:12px;display:flex;align-items:center;gap:10px;}
.cs-item.cs-top{border-color:var(--vsc-accent);background:rgba(0,122,204,.08);}
.cs-depth{color:var(--text3);font-size:10.5px;min-width:20px;font-family:'Inter',sans-serif;font-weight:600;}
.cs-fn{color:var(--tok-fn);}
.cs-cur{margin-left:auto;font-size:10.5px;color:var(--vsc-accent);font-family:'Inter',sans-serif;}
.mm-grid{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;overflow-y:hidden;padding-bottom:4px;max-width:100%;}
.mm-cell{background:var(--vsc-sidebar);border:1px solid var(--vsc-border);border-radius:4px;padding:6px 6px;text-align:center;font-family:'Fira Code',monospace;font-size:10px;flex-shrink:0;min-width:96px;max-width:140px;}
.mm-cell.mm-stk{background:rgba(0,122,204,.1);border-color:rgba(0,122,204,.3);}
.mm-cell.mm-hp{background:rgba(215,186,125,.1);border-color:rgba(215,186,125,.3);}
.mm-addr{display:block;font-size:8px;color:var(--text3);margin-bottom:2px;}
.mm-nm{color:var(--text);font-size:9.5px;white-space:normal;word-break:break-word;line-height:1.3;display:block;}

/* ── Status bar ──────────────────────────────────────────────────────────── */
#statusbar{height:22px;background:var(--vsc-status);color:var(--vsc-status-text);display:flex;align-items:center;padding:0 12px;gap:14px;font-size:11px;flex-shrink:0;position:relative;z-index:10;}
.sb-seg{display:flex;align-items:center;gap:4px;cursor:default;padding:0 4px;}
.sb-seg:hover{background:rgba(255,255,255,.12);}
.sb-sep{width:1px;height:12px;background:rgba(255,255,255,.25);}
.sb-spacer{flex:1;}
.sb-hint{font-size:10.5px;opacity:.75;white-space:nowrap;}
.sb-seg i{font-size:10px;}
.empty{padding:32px 16px;text-align:center;color:var(--text3);}
.empty i{font-size:28px;margin-bottom:10px;display:block;}
.empty p{font-size:12.5px;}
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-hover);}

/* ── Pointer-arrow overlay (Python-Tutor style) ──────────────────────────── */
.arrow-toggle-wrap{margin-left:auto;display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:500;color:var(--text2);cursor:pointer;user-select:none;}
.arrow-toggle-wrap input{accent-color:var(--vsc-accent);cursor:pointer;width:12px;height:12px;}
.arrow-toggle-wrap i{font-size:10px;color:var(--vsc-accent);}
#mem-cols{position:relative;display:flex;align-items:flex-start;gap:28px;min-height:100%;}
#card-memory-body{height:460px;max-height:460px;min-height:460px;}
#frames-col{flex:0 0 auto;min-width:280px;max-width:480px;position:relative;z-index:2;}
#frames-pane{position:relative;}
#heap-section{flex:0 0 auto;min-width:240px;max-width:420px;position:relative;z-index:2;}
.arrow-svg{position:absolute;top:0;left:0;pointer-events:none;z-index:1;overflow:visible;}

/* ── Draggable heap blocks ───────────────────────────────────────────────── */
#heap-drag-layer{position:static;pointer-events:none;}
#heap-drag-layer .heap-block{position:absolute;top:0;left:0;min-width:280px;max-width:480px;margin-bottom:0;box-shadow:0 2px 8px rgba(0,0,0,.22);pointer-events:auto;transition:box-shadow .12s;will-change:left,top;z-index:4;}
#heap-drag-layer .heap-block:hover{box-shadow:0 3px 12px rgba(0,0,0,.3);}
#heap-drag-layer .heap-block.dragging{z-index:60;box-shadow:0 8px 22px rgba(0,0,0,.4);opacity:.96;cursor:grabbing;transition:none;}
#heap-drag-layer .heap-block .hb-head{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;}
#heap-drag-layer .heap-block .hb-head:active{cursor:grabbing;}
#heap-drag-layer .heap-block .hb-grip{margin-left:auto;color:var(--text3);font-size:10px;opacity:.7;}
.hb-drag-hint{margin-left:6px;font-size:9px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--text3);opacity:.7;white-space:nowrap;order:1;}
@media (max-width:800px){#heap-drag-layer .heap-block{max-width:min(480px,72vw);}.hb-drag-hint{display:none;}}
.ptr-arrow-path{fill:none;stroke:var(--ptr-color);stroke-width:1.6;opacity:.85;}
.ptr-arrow-path.arrow-null{stroke-dasharray:3 3;opacity:.5;}
.ptr-arrow-dot{fill:var(--ptr-color);}
.arrow-anchor{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ptr-color);margin-left:5px;vertical-align:middle;box-shadow:0 0 0 2px rgba(197,134,192,.25);}
.vv.vptr.ptr-src{cursor:default;}

/* ── Graph / Adjacency Matrix column ─────────────────────────────────────── */
#graph-section{flex:0 0 auto;width:320px;min-width:280px;max-width:420px;box-sizing:border-box;position:relative;z-index:2;align-self:stretch;border-left:1px solid var(--vsc-border);padding-left:20px;margin-top:0;padding-top:0;}
#graph-section > div:first-child{height:20px;display:flex;align-items:center;margin-bottom:8px;}
#graph-empty{width:100%;box-sizing:border-box;}
#graph-content{display:flex;flex-direction:column;gap:14px;width:100%;}
#graph-matrix-wrap{width:100%;max-width:100%;overflow-x:auto;}
.graph-svg-box{width:100%;}
.graph-svg-box svg{max-width:100%;height:auto;display:block;}
.adj-matrix-tbl{max-width:100%;border-collapse:collapse;}
circle.graph-node-visited + text.graph-node-label,
circle.graph-node-current + text.graph-node-label{fill:#e2691a !important;}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width:1100px){
    #card-output{grid-column:1 / 3;}
    #card-callstack{grid-column:1 / 3;}
    #mem-cols{flex-wrap:wrap;}
    #frames-col,#heap-section,#graph-section{width:100%;max-width:100%;min-width:0;}
    #graph-section{border-left:none;padding-left:0;border-top:1px solid var(--vsc-border);padding-top:14px;margin-top:8px;}
}
@media (max-width:800px){
    html,body{overflow-y:auto;overflow-x:hidden;height:auto;}
    #app{flex-direction:column;height:auto;min-height:calc(100vh - 48px - 22px);}
    #editor-panel{width:100% !important;max-width:100%;height:56vh;min-height:320px;border-right:none;border-bottom:1px solid var(--vsc-border);flex-shrink:0;}
    #resize-handle{display:none;}
    #viz-panel{flex:1;min-height:60vh;overflow:visible;}
    #viz-grid{grid-template-columns:minmax(0,1fr);}
    #card-memory,#card-output,#card-callstack,#card-memmap{grid-column:1 / 2;}
    .viz-card-body{max-height:320px;}
    #card-memory-body{height:380px;max-height:380px;min-height:380px;}
    #mem-cols{flex-direction:column;gap:18px;}
    #frames-col{max-width:100%;}
    #heap-section{max-width:100%;}
    #graph-section{border-top:1px solid var(--vsc-border);padding-top:14px;border-left:none;padding-left:0;max-width:100%;width:100%;}
}
@media (max-width:520px){
    .col-type{display:none;}
    .tb-btn span{display:none;}
    .sample-group label{display:none;}
    .viz-card-body{max-height:280px;padding:10px;}
    #card-memory-body{height:340px;max-height:340px;min-height:340px;}
    .viz-card-hdr{font-size:11px;padding:0 10px;}
    #viz-panel{padding:10px;}
    #viz-grid{gap:10px;}
}

/* ══ OUTPUT HORIZONTAL SCROLL — force override (beats inline / injected styles) ══ */
#output-area,
#output-area * {
    white-space: pre !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    word-wrap: normal !important;
}
#output-area {
    display: block !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
}
#card-output .viz-card-body {
    overflow-x: auto;
    min-width: 0;
}