@charset "UTF-8";
:root{font-family:"Segoe UI",system-ui,sans-serif;font-size:14px;font-synthesis:none;--mono:Consolas,"Cascadia Code",monospace;--page:#D4DCE4;--surface:#FFFDFA;--text:#26384B;--muted:#526274;--border:#A5AAA9;--accent:#1D7185;--accent-hover:#155C6D;--on-accent:#FFFFFF;--soft:#EEEDE7;--soft-strong:#D4E8EB;--editor:#24354C;--editor-bar:#2C4057;--editor-text:#F3F6FA;--editor-muted:#C4D2E0;--code-active:#2C6073;--code-marker:#9CEEFF;--next-marker:#F6CE83;--keyword:#C9B4FF;--string:#B6DEA5;--number:#FFD195;--builtin:#9CDDED;--error-bg:color-mix(in srgb,var(--surface) 92%,#D94736);--error-text:color-mix(in srgb,var(--text) 70%,#D94736);--error-border:color-mix(in srgb,var(--border) 70%,#D94736);color:var(--text);background:var(--page);color-scheme:light}
*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,select,summary{cursor:pointer}button{transition:background .15s,box-shadow .15s}button:disabled{cursor:not-allowed;opacity:.55}button:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--accent);outline-offset:3px}[hidden]{display:none!important}.topbar{min-height:76px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:30px;padding:0 4.3%;background:var(--soft)}.brand{font-size:33px;font-weight:750;letter-spacing:-1.5px;text-decoration:none;color:var(--text);display:flex;align-items:center;gap:8px}.brand-icon{font-size:27px;background:var(--accent);color:var(--on-accent);display:inline-grid;place-items:center;width:34px;height:34px;border-radius:0;letter-spacing:0}.brand-dot{color:var(--accent);margin-left:-8px}.tagline{font-size:12px;font-weight:650;letter-spacing:2px;color:var(--muted)}.mode{margin-left:auto;background:var(--soft);color:var(--accent);border:1px solid var(--border);border-radius:0;padding:9px 15px;font-size:12px;font-weight:600}.dot{display:inline-block;width:6px;height:6px;border-radius:0;background:var(--accent);margin-right:6px;vertical-align:middle}main{max-width:1600px;padding:20px 4.3% 18px;margin:auto}.intro{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:26px}.eyebrow{font-size:12px;font-weight:700;letter-spacing:1.8px;color:var(--muted);margin-bottom:10px}h1{margin:0;font-size:27px;letter-spacing:-1.3px;font-weight:650}h1 span{color:var(--accent)}.intro p{color:var(--muted);font-size:13px;margin:10px 0 0}.example-picker{font-size:12px;color:var(--muted);display:grid;gap:9px;min-width:245px}select{border:1px solid var(--border);border-radius:0;background:var(--surface);padding:10px 32px 10px 12px;color:var(--text);font-size:12px}.workspace{margin-bottom:18px;display:grid;grid-template-columns:1.04fr 1fr;gap:20px;align-items:stretch}.panel{border:1px solid var(--border);border-radius:0;background:var(--surface);overflow:hidden;box-shadow:0 3px 12px color-mix(in srgb,var(--text) 2%,transparent)}.panel-head{height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid var(--border);gap:12px}h2{font-size:13px;font-weight:650;margin:0;display:flex;align-items:center;gap:10px}.section-number{color:var(--muted);font-size:12px;font-weight:500;font-family:var(--mono)}.language{color:var(--muted);font-size:12px}.language::first-letter{color:var(--accent)}.mini-label{font-size:12px;letter-spacing:1.1px;color:var(--muted);font-weight:600}.editor-panel{display:flex;flex-direction:column}.editor-toolbar{height:39px;background:var(--editor-bar);color:var(--editor-muted);display:flex;align-items:center;justify-content:space-between;padding:0 18px;font-size:12px}.editor-toolbar #filename{font-family:var(--mono);color:var(--editor-text)}.editor-toolbar .text-button{color:var(--editor-muted)}.editor-area{background:var(--editor);position:relative;min-height:350px;flex:1;display:flex;overflow:hidden}.gutter{position:absolute;left:0;top:0;padding-top:18px;width:47px;text-align:right;padding-right:13px;font:14px/26px var(--mono);color:var(--editor-muted);pointer-events:none;white-space:pre;z-index:1}.editor-area textarea,.code-view{font:14px/26px var(--mono);tab-size:4;border:0;border-radius:0;outline:none;color:var(--editor-text);background:var(--editor);width:100%;margin:0;min-height:350px;height:100%;padding:18px 18px 18px 53px;resize:none;overflow:auto;white-space:pre}.editor-area textarea{position:absolute;inset:0}.code-view{position:absolute;inset:0;padding-left:0;padding-right:0}.code-line{display:block;min-width:max-content;padding:0 18px 0 53px;min-height:26px;position:relative;border-left:3px solid transparent}.code-line .line-number{position:absolute;left:0;width:40px;padding-right:8px;text-align:right;color:var(--editor-muted);user-select:none}.code-line.current{background:var(--code-active);border-left-color:var(--code-marker)}.code-line.current .line-number{color:var(--editor-text)}.code-line.upcoming{background:color-mix(in srgb,var(--next-marker) 12%,var(--editor));border-left-color:var(--next-marker)}.token-keyword{color:var(--keyword)}.token-string{color:var(--string)}.token-number{color:var(--number)}.token-comment{color:var(--editor-muted);font-style:italic}.token-builtin{color:var(--builtin)}.code-legend{display:flex;gap:18px;align-items:center;background:var(--editor-bar);color:var(--editor-muted);padding:11px 17px;font-size:12px}.code-legend i{width:7px;height:7px;display:inline-block;border-radius:0;margin-right:5px}.legend-current{background:var(--code-marker)}.legend-next{background:var(--next-marker)}#line-count{margin-left:auto}.inputs-box{padding:14px 19px;border-bottom:1px solid var(--border);font-size:12px}.inputs-box summary{font-weight:600;color:var(--text)}.inputs-box summary span{font-size:12px;color:var(--muted);font-weight:400;margin-left:10px}.inputs-box p{font-size:12px;color:var(--muted);line-height:1.6}.input-row{display:flex;gap:8px;align-items:center;margin:8px 0}.input-row label{font-size:12px;color:var(--muted);flex:1;display:flex;align-items:center;gap:8px}.input-row input{color:var(--text);background:var(--surface);width:100%;min-width:0;border:1px solid var(--border);border-radius:0;padding:7px 8px;font-size:12px}.input-row button{background:none;border:0;color:var(--error-text);font-size:18px}.run-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px}#run-note{font-size:12px;color:var(--muted)}.button{border:0;border-radius:0;padding:11px 15px;font-size:12px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:8px}.primary{background:var(--accent);color:var(--on-accent);box-shadow:0 3px 6px color-mix(in srgb,var(--accent) 12%,transparent)}.primary:hover{background:var(--accent-hover)}.text-button{background:none;border:0;color:var(--accent);font-size:12px;padding:5px 0}.state-column{display:grid;grid-template-rows:minmax(210px,auto) minmax(170px,1fr);gap:18px;min-width:0}.panel-body{padding:17px 20px}.variables-panel .panel-body{max-height:250px;overflow:auto}.visual-panel .panel-body{max-height:290px;overflow:auto}.empty-state{text-align:center;padding:28px 14px;color:var(--muted)}.empty-symbol{font-family:var(--mono);font-size:23px;color:var(--muted);display:block;margin-bottom:13px}.empty-state h3{font-size:12px;font-weight:500;color:var(--muted);margin:0 0 9px}.empty-state p{font-size:12px;line-height:1.7;margin:0}.empty-state.compact{padding:20px 8px}.scope-label{font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin:0 0 10px}.scope-label:not(:first-child){margin-top:18px}.variable-table{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}.variable-table th{text-align:left;color:var(--muted);font-weight:400;font-size:12px;padding:0 8px 8px;border-bottom:1px solid var(--border)}.variable-table th:first-child{width:30%}.variable-table th:nth-child(2){width:18%}.variable-table td{padding:8px 8px;border-bottom:1px solid var(--border);vertical-align:top;overflow-wrap:anywhere}.variable-table td:first-child{font-family:var(--mono);color:var(--accent)}.variable-table td:nth-child(2){color:var(--muted);font-size:12px}.variable-table td:last-child{font-family:var(--mono);color:var(--text)}.variable-table tr.changed{background:var(--soft)}.change-dot{display:inline-block;width:5px;height:5px;border-radius:0;background:var(--accent);margin-right:5px;vertical-align:middle}.deleted-note{font-size:12px;color:var(--muted);margin-top:10px}.structure{margin-bottom:18px}.structure:last-child{margin-bottom:0}.structure-title{display:flex;align-items:center;gap:7px;margin-bottom:12px;font:12px var(--mono);color:var(--accent)}.structure-title small{color:var(--muted);font:12px "Segoe UI",sans-serif}.array{display:flex;gap:5px;max-width:100%;overflow:auto;padding:1px 1px 10px}.array-cell{min-width:50px;max-width:140px;flex-shrink:0;text-align:center}.cell-value{border:1px solid var(--border);background:var(--soft);border-radius:0;padding:11px 7px;min-height:38px;font:14px var(--mono);overflow-wrap:anywhere}.cell-index{font:12px var(--mono);color:var(--muted);margin-top:6px}.array-cell.cell-changed .cell-value,.matrix td.cell-changed{background:var(--soft-strong);border-color:var(--border);color:var(--accent)}.array-cell.pointer .cell-index{color:var(--accent);font-weight:700}.matrix-wrap{overflow:auto}.matrix{border-collapse:separate;border-spacing:4px;font:12px var(--mono)}.matrix th{font-size:12px;color:var(--muted);font-weight:400;min-width:25px}.matrix td{min-width:43px;max-width:140px;padding:9px;border:1px solid var(--border);border-radius:0;text-align:center;background:var(--soft);overflow-wrap:anywhere}.structure-note{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.6}.transport{position:sticky;top:8px;z-index:5;margin:0 0 18px;padding:13px 18px;box-shadow:0 4px 16px color-mix(in srgb,var(--text) 5%,transparent)}.transport-top{display:flex;align-items:center;gap:20px}.playback{display:flex;align-items:center;gap:7px;flex-shrink:0}.icon-button{border:2px solid var(--border);background:var(--surface);color:var(--muted);border-radius:0;min-width:44px;height:44px;font-size:15px}.icon-button:hover:not(:disabled){background:var(--soft)}.play-button{background:var(--soft);color:var(--accent);min-width:142px;padding:9px 12px}.step-caption{font-size:12px;color:var(--muted);flex:1;line-height:1.5;overflow-wrap:anywhere}.speed-label{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--muted)}.speed-label select{padding:6px;font-size:12px}.timeline-row{display:flex;align-items:center;gap:15px;margin-top:17px}.timeline-row>span{font:12px var(--mono);color:var(--muted);white-space:nowrap}.timeline-row input{flex:1;min-width:30px;accent-color:var(--accent);height:12px}.timeline-row .trace-state{font:12px "Segoe UI",sans-serif;color:var(--muted)}.bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.function-panel .panel-body{min-height:100px;max-height:270px;overflow:auto}.placeholder{color:var(--muted);font-size:12px;line-height:1.8;margin:8px 0}.function-name{font:14px var(--mono);color:var(--accent);margin:0 0 15px}.parameters{display:flex;flex-wrap:wrap;gap:7px}.parameter{font:12px var(--mono);padding:7px 9px;background:var(--soft);border:1px solid var(--border);border-radius:0;color:var(--muted);overflow-wrap:anywhere;max-width:100%}.function-context{font-size:12px;color:var(--muted);margin:14px 0 0}.return-value{font:12px var(--mono);background:var(--soft);color:var(--accent);padding:10px 12px;border-radius:0;margin-top:12px;overflow-wrap:anywhere}.console-panel pre{font:12px/1.8 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;padding:18px 20px;margin:0;min-height:100px;max-height:230px;overflow:auto;color:var(--text);background:var(--surface)}.console-placeholder{color:var(--muted)}.execution-error{background:var(--error-bg);border-top:1px solid var(--error-border);color:var(--error-text);padding:12px 20px;font-size:12px;line-height:1.6;overflow-wrap:anywhere}.notice{padding:13px 17px;border-radius:0;border:1px solid var(--border);background:var(--soft);color:var(--accent);font-size:12px;line-height:1.6;margin-bottom:18px}.notice.error{border-color:var(--error-border);background:var(--error-bg);color:var(--error-text)}footer{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:22px;font-size:12px;color:var(--muted)}footer .dot{background:var(--accent);width:5px;height:5px}.busy{opacity:.7}.truncation{font-size:12px;color:var(--muted);margin-top:12px}.help-hint{font-size:12px;color:var(--muted);margin-top:8px}
@media(min-width:1500px){.editor-area,.editor-area textarea,.code-view{min-height:350px}}
@media(max-width:1050px){.tagline{display:none}.transport-top{flex-wrap:wrap}.step-caption{order:3;flex-basis:100%}.speed-label{margin-left:auto}.run-bar{flex-wrap:wrap}.intro{align-items:flex-start}h1{font-size:27px}.variable-table th:first-child{width:27%}}
@media(max-width:760px){.topbar{min-height:76px;padding:0 20px}main{padding:20px 16px 16px}.intro{display:block}.example-picker{margin-top:20px}.workspace,.bottom-grid{grid-template-columns:1fr}.state-column{grid-template-rows:auto auto}.editor-area,.editor-area textarea,.code-view{min-height:350px}.empty-state{padding:18px}.intro h1{font-size:27px}.panel-head{padding:0 16px}.transport{padding:15px 12px}.transport-top{gap:12px}.playback{gap:4px}.speed-label{gap:4px}.speed-label select{max-width:75px}.speed-label{font-size:12px}.timeline-row{gap:8px}.timeline-row>span{font-size:12px}footer{align-items:flex-start;line-height:1.6}footer>span:last-child{max-width:45%;text-align:right}.mode{font-size:12px}.run-bar .button{margin-left:auto}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

@media(max-width:760px){.transport{position:static}.topbar{min-height:76px}}

.pointer-slot{min-height:43px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;padding-bottom:4px}
.index-marker{display:flex;flex-direction:column;align-items:center;color:var(--accent);font:12px var(--mono);font-weight:600;white-space:nowrap;position:relative;z-index:1}
.index-arrow{font-size:17px;line-height:19px}
.array:has(.index-marker){align-items:flex-end}
.array-cell.pointer .cell-value{border-color:var(--accent);background:var(--soft-strong);color:var(--text);box-shadow:inset 0 0 0 1px var(--accent)}

.condition-result{display:inline-block;margin-left:18px;padding:0 8px;border-radius:0;font:600 11px/20px var(--mono);vertical-align:middle;white-space:nowrap}
.condition-true{color:var(--accent);background:var(--soft-strong);border:1px solid var(--accent)}
.condition-false{color:var(--next-marker);background:color-mix(in srgb,var(--next-marker) 12%,var(--editor));border:1px solid color-mix(in srgb,var(--next-marker) 60%,var(--editor))}

.mode-switch{margin-left:auto;display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px}
.mode-switch select{color:var(--accent);background:var(--soft);padding:8px 12px}
.advanced-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.advanced-controls>span{font-size:12px;color:var(--muted)}
.secondary-button{border:1px solid var(--border);border-radius:0;background:var(--soft);color:var(--accent);font-size:12px;padding:8px 11px}
.secondary-button:hover:not(:disabled){background:var(--soft-strong)}
.inspection-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;background:var(--soft);border-left:3px solid var(--accent);margin-bottom:16px;font-size:12px;color:var(--text);line-height:1.7}
.inspection-bar .text-button{flex-shrink:0}
.advanced-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:20px;margin-bottom:20px;align-items:start}
.call-stack,.call-tree{max-height:420px;overflow:auto}
.call-help{font-size:12px;color:var(--muted);margin:0 0 12px;line-height:1.6}
.call-node{display:flex;align-items:flex-start;flex-direction:column;gap:6px;text-align:left;width:100%;border:1px solid var(--border);border-radius:0;padding:10px 12px;background:var(--surface);color:var(--text);margin-bottom:8px}
.call-node:hover{background:var(--soft)}
.call-node.selected{border-color:var(--accent);background:var(--soft-strong)}
.call-node-name{font:12px var(--mono);overflow-wrap:anywhere;max-width:100%}
.call-node-detail{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.tree-root{font-size:12px;color:var(--muted);margin-bottom:14px}
.tree-children{list-style:none;padding:0 0 0 14px;margin:0 0 0 3px;border-left:1px solid var(--border)}
.tree-children>li{min-width:160px}
.tree-children .tree-children{margin-bottom:10px}
.code-line.inspected{box-shadow:inset 0 -1px var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--editor))}
.function-locals{margin-top:18px}
@media(max-width:760px){.advanced-grid{grid-template-columns:1fr}.inspection-bar{flex-direction:column;align-items:flex-start}.mode-switch{gap:6px}.mode-switch select{max-width:120px}}

/* Arcade: system fonts, hard pixel edges and no external assets. */
:root{--pixel-shadow:#D0CCC3;--focus:#9B481E;--heading-font:"Lucida Console",Consolas,monospace}
body{line-height:1.6}
.topbar{height:auto;gap:22px;padding-top:12px;padding-bottom:12px;border-bottom:2px solid var(--border);background:var(--editor-bar);flex-wrap:wrap}
.brand{font-family:var(--heading-font);font-size:24px;letter-spacing:2px;gap:12px;line-height:1.2}
.brand-dot{margin-left:-8px}
.brand-icon{width:36px;height:36px;border:2px solid var(--accent);background:var(--editor);box-shadow:3px 3px 0 var(--pixel-shadow)}
.pixel-core{display:block;width:6px;height:6px;background:var(--accent);box-shadow:-8px -8px 0 var(--accent),8px -8px 0 var(--accent),-8px 8px 0 var(--accent),8px 8px 0 var(--accent)}
.tagline{letter-spacing:1px;font-size:12px}
.motion-toggle{margin-left:auto;display:flex;align-items:center;gap:8px;min-height:44px;font-size:12px;color:var(--muted)}
.motion-toggle input{width:19px;height:19px;margin:0;accent-color:var(--accent);flex-shrink:0}
.mode-switch{margin-left:0;min-height:44px;font-size:13px}
.mode-switch select{min-height:44px}
main{padding-top:26px}
.eyebrow{font-family:var(--mono);letter-spacing:1px;color:var(--next-marker);font-size:12px}
h1,.intro h1{font-family:var(--heading-font);font-size:26px;letter-spacing:0;line-height:1.5;text-transform:uppercase;text-shadow:none}
.intro p{font-size:14px;line-height:1.7;margin-top:10px}
.example-picker{font-size:13px;min-width:260px}
select{min-height:44px;border-width:2px;font-size:13px;max-width:100%}
.panel{border-width:2px;box-shadow:4px 4px 0 var(--pixel-shadow)}
.panel-head{min-height:50px;height:auto;padding:13px 16px;background:var(--editor-bar);border-bottom-width:2px;flex-wrap:wrap;gap:7px 12px}
h2{font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.2px}
.section-number{color:var(--next-marker);font-size:12px}
.mini-label{font-family:var(--mono);font-size:12px;letter-spacing:.3px}
.editor-toolbar{height:auto;min-height:44px;font-size:12px;padding:8px 16px;gap:12px}
.editor-help{font-size:12px;line-height:1.7;color:var(--editor-muted);background:var(--editor-bar);padding:8px 16px;margin:0;border-top:1px solid var(--border)}
.code-legend{font-size:12px;flex-wrap:wrap;gap:8px 14px;padding:12px 16px}
.code-legend i{width:8px;height:8px}
.code-line{scroll-margin-top:16px}
.code-line.current{border-left-width:4px}
.code-line.upcoming{border-left-style:dashed}
.inputs-box{font-size:13px;padding:12px 16px}
.inputs-box summary{min-height:28px;line-height:28px}
.inputs-box p,.inputs-box summary span{font-size:12px}
.input-row input{min-height:44px;font-size:14px}
.input-row button{min-width:44px;min-height:44px}
.button,.secondary-button,.palette-button{font-family:var(--mono);min-height:44px;border:2px solid var(--border);font-size:13px;padding:9px 13px;box-shadow:3px 3px 0 var(--pixel-shadow)}
.primary{border-color:var(--accent);font-weight:700}
.play-button{border-color:var(--accent)}
.icon-button{font-family:var(--mono);font-size:17px;box-shadow:3px 3px 0 var(--pixel-shadow)}
.button:active:not(:disabled),.icon-button:active:not(:disabled),.secondary-button:active:not(:disabled){box-shadow:1px 1px 0 var(--pixel-shadow);transform:translate(1px,1px)}
.text-button{min-height:36px;font-size:13px;line-height:1.6}
.run-bar{padding:14px 16px;flex-wrap:wrap}
#run-note{font-size:12px;line-height:1.6}
.transport{top:8px;padding:14px 16px;box-shadow:4px 4px 0 var(--pixel-shadow)}
.transport-top{gap:18px;flex-wrap:wrap}
.playback{gap:9px;flex-wrap:wrap;flex-shrink:1;min-width:0;max-width:100%}
.step-caption{font-size:13px;line-height:1.7;min-width:130px}
.speed-label{font-size:12px;gap:8px}
.speed-label select{font-size:13px;min-height:44px}
.timeline-row{gap:12px;margin-top:16px;flex-wrap:wrap}
.timeline-row input{height:26px}
.timeline-row>span,.timeline-row .trace-state{font-size:12px}
.empty-state{padding:24px 12px}
.empty-state h3,.empty-state p,.placeholder{font-size:13px}
.empty-symbol{color:var(--accent)}
.scope-label{font-size:12px;letter-spacing:.7px}
.variable-table{font-size:13px}
.variable-table th,.variable-table td:nth-child(2){font-size:12px}
.variable-table td{padding:10px 8px}
.variable-table tr.changed{box-shadow:inset 3px 0 var(--accent)}
.variables-panel .panel-body{max-height:310px}
.structure-title{font-size:14px;flex-wrap:wrap}
.structure-title small,.cell-index,.matrix th{font-size:12px}
.array{gap:9px;padding-top:6px;padding-bottom:12px}
.array-cell{min-width:50px}
.cell-value{font-size:16px;border-width:2px;padding:12px 8px;min-height:46px;box-shadow:3px 3px 0 var(--pixel-shadow)}
.array-cell.pointer .cell-value{border-color:var(--accent);background:var(--soft-strong);box-shadow:3px 3px 0 var(--accent)}
.index-marker{font-size:12px}
.matrix td{font-size:14px;border-width:2px;min-width:46px;padding:12px 8px;box-shadow:2px 2px 0 var(--pixel-shadow)}
.structure-note,.deleted-note,.truncation{font-size:12px;line-height:1.7}
.condition-result{font-size:12px;line-height:22px;font-weight:700;border-width:2px}
.condition-false{border-style:dashed}
.parameter{font-size:13px;border-width:1px;line-height:1.7}
.function-name{font-size:16px}
.function-context,.function-locals .scope-label{font-size:12px;line-height:1.7}
.return-value{font-size:14px;border-left:3px solid var(--accent)}
.console-panel pre{font-size:14px;line-height:1.8}
.notice,.execution-error{font-size:13px;line-height:1.7}
.advanced-controls>span,.call-help,.tree-root{font-size:12px}
.call-node{border-width:2px;min-height:60px}
.call-node.selected{border-style:dashed}
.call-node-name{font-size:13px}
.call-node-detail{font-size:12px}
.inspection-bar{font-size:13px}
footer{font-size:12px;line-height:1.8}
.dot{width:7px;height:7px}
:is(button,input,select,textarea,a,summary,[tabindex]):focus-visible{outline:3px solid var(--focus);outline-offset:3px}
summary{scroll-margin-top:180px}
.skip-link{position:absolute;left:16px;top:-100px;z-index:20;padding:12px 16px;background:var(--focus);color:var(--page);font-weight:700}
.skip-link:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.reduce-motion *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.reduce-motion :is(.button,.icon-button,.secondary-button):active{transform:none}
@media(max-width:1100px){.tagline{display:none}.step-caption{order:3;flex-basis:100%}.speed-label{margin-left:auto}.intro{align-items:flex-start}}
@media(max-width:760px){.topbar{padding:12px 16px;gap:10px 14px}.brand{font-size:21px}.brand-icon{width:32px;height:32px}.motion-toggle{margin-left:auto}.mode-switch{width:100%;justify-content:flex-end}.intro h1{font-size:23px}.example-picker{min-width:0}.transport{position:static}.speed-label{font-size:12px;margin-left:0}.speed-label select{max-width:none}.transport-top{gap:14px}.playback{gap:8px}.play-button{min-width:126px}.timeline-row>span,.timeline-row .trace-state{font-size:12px}.timeline-row .trace-state{width:100%}.timeline-row input{flex-basis:140px}.panel-head{padding:12px}.panel-body{padding:14px 12px}.inspection-bar .text-button{flex-shrink:1}footer{align-items:flex-start;flex-wrap:wrap}footer>span:last-child{max-width:100%;text-align:left}}
@media(max-width:380px){main{padding-left:12px;padding-right:12px}.transport{padding:12px 10px}.playback{gap:6px}.play-button{min-width:112px;padding:8px}.icon-button{min-width:40px}.run-bar .button{width:100%}.mini-label{letter-spacing:0}.motion-toggle{font-size:12px}}
@media(pointer:coarse){.text-button,summary{min-height:44px}.icon-button{min-width:44px}.motion-toggle{min-height:44px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.button:active,.icon-button:active,.secondary-button:active{transform:none!important}}
@media(forced-colors:active){.panel,.call-node,.cell-value,.button,.icon-button{border:2px solid CanvasText;box-shadow:none}.code-line.current,.array-cell.pointer .cell-value,.call-node.selected{outline:2px solid Highlight;outline-offset:-2px}.change-dot{background:CanvasText}}
@media(max-width:380px){.playback{gap:6px}.play-button{min-width:44px;width:44px;font-size:0;padding:0}.play-button::before{content:"▶";font-size:16px}.play-button[data-playing="true"]::before{content:"Ⅱ"}.icon-button{min-width:44px}}

/* Papel y tinta: light workspace, dark code and restrained pixel details. */
.topbar{background:var(--editor);color:var(--editor-text);border-bottom:4px solid #DCA879}
.topbar .brand{color:var(--editor-text)}
.topbar .brand-dot{color:#FFBE8A}
.topbar :is(.tagline,.motion-toggle,.mode-switch){color:var(--editor-muted)}
.topbar select{background:var(--editor-bar);color:var(--editor-text);border-color:#A5B8C9;color-scheme:dark}
.topbar .brand-icon{border-color:#FFBE8A;box-shadow:3px 3px 0 #162638}
.pixel-core{background:#FFBE8A;box-shadow:-8px -8px 0 #FFBE8A,8px -8px 0 #71C5CB,-8px 8px 0 #71C5CB,8px 8px 0 #FFBE8A}
.topbar :is(a,input,select):focus-visible{outline-color:#FFD0A7}
.eyebrow{color:#8B4A27}
.panel-head{background:var(--surface)}
.section-number{color:#8B4A27}
.editor-panel>.panel-head{background:var(--editor);color:var(--editor-text);border-bottom-color:#62788F}
.editor-panel>.panel-head :is(.section-number,.language){color:#F5C89D}
.editor-area{color-scheme:dark}
.editor-area :focus-visible{outline-color:#FFCE9D;outline-offset:-3px}
.editor-toolbar .text-button:focus-visible{outline-color:#FFCE9D}
.condition-true{color:#C5F4F0;background:#215B61;border-color:#83DAD4}
.editor-help{border-top-color:#62788F}
.play-button{background:var(--accent);color:var(--on-accent)}
.play-button:hover:not(:disabled){background:var(--accent-hover)}
.cell-value{background:var(--surface);border-color:#627384}
.array-cell.pointer .cell-value{color:#164B59;box-shadow:3px 3px 0 #709DA5}
.console-panel pre{background:#F1EEE8;margin:14px;min-height:70px;border:1px solid #D6D4CE}
.state-column{grid-template-rows:minmax(200px,auto) minmax(210px,1fr)}
.visual-panel .panel-body{min-height:160px}
.skip-link{background:var(--accent);color:#FFFFFF}
@media(max-width:760px){.state-column{grid-template-rows:auto auto}}


/* Control outlines remain visible against the paper surface. */
select,.icon-button,.secondary-button,.input-row input{border-color:#73818B}
.topbar select{border-color:#A5B8C9}

/* Keep the workspace prominent; transport is a quiet utility strip. */
main{padding-top:12px}
.transport{background:var(--page);border:0;border-bottom:1px solid var(--border);box-shadow:none;padding:0 0 8px;margin-bottom:12px;overflow:visible}
.transport-top{gap:14px}
.transport :is(.icon-button,.button,.secondary-button){box-shadow:none}
.transport .icon-button{background:transparent;border:1px solid #73818B}
.transport .play-button{min-width:126px}
.timeline-row{margin-top:4px;gap:12px}
.timeline-row input{height:24px}
.timeline-row .trace-state{display:none}
.step-caption{font-size:12px}
.advanced-controls{margin-top:6px;padding-top:6px}
.editor-panel>.panel-head{gap:10px}
.editor-panel .example-picker{display:flex;align-items:center;gap:8px;min-width:0;margin:0;font:12px "Segoe UI",sans-serif;color:var(--editor-muted)}
.editor-panel .example-picker select{width:220px;min-width:0;min-height:44px;padding:6px 26px 6px 9px;background:var(--editor-bar);color:var(--editor-text);border:1px solid #A5B8C9;color-scheme:dark;font:12px "Segoe UI",sans-serif}
.editor-panel .example-picker select:focus-visible{outline-color:#FFD0A7}
@media(max-width:760px){.transport{position:static}.transport-top{gap:6px 12px}.step-caption{order:3;flex-basis:100%;min-width:0}.timeline-row input{flex-basis:100px}.editor-panel .example-picker{flex:1;justify-content:flex-end}.editor-panel .example-picker select{width:auto;max-width:220px;flex:1}}
@media(max-width:380px){.editor-panel .example-picker{flex-basis:100%;justify-content:flex-start}.editor-panel .example-picker select{max-width:none}}
@media(forced-colors:active){.transport .icon-button{border-color:ButtonText}}
@media(max-width:380px){.transport .play-button{min-width:44px}}

/* A quiet reading companion alongside the recorded state. */
.state-column{grid-template-rows:auto auto minmax(210px,1fr)}
.explanation-panel{border:1px solid #A5AAA9;border-left:3px solid var(--accent);box-shadow:2px 2px 0 var(--pixel-shadow)}
.explanation-panel .panel-head{min-height:38px;padding:8px 14px;border-bottom:0;gap:4px 10px}
.explanation-panel h2{font-size:13px}
.explanation-panel .mini-label{font-size:12px}
.explanation-panel .panel-body{padding:0 14px 12px;max-height:270px;overflow:auto}
#explanation-summary{font-size:14px;line-height:1.7;margin:0;overflow-wrap:anywhere}
#explanation-details{padding-left:19px;margin:10px 0 0;font-size:12px;color:var(--muted);line-height:1.7;overflow-wrap:anywhere}
#explanation-details li+li{margin-top:5px}
#explanation-inspection{border-top:1px solid var(--border);padding-top:8px}
@media(max-width:760px){.state-column{grid-template-rows:auto auto auto}}
/* Recorded collection changes have text labels as well as color. */
.array,.array:has(.index-marker){align-items:flex-start}
.array-cell:has(.cell-change-tag){min-width:100px}
.cell-change-tag{display:block;font:12px/1.5 var(--mono);margin-top:6px;overflow-wrap:anywhere}
.cell-added .cell-value,.matrix td.cell-added{background:#E0F2E6;border-color:#367452}
.cell-modified .cell-value,.matrix td.cell-modified{background:#FFF0CC;border-color:#896521}
.cell-added .cell-change-tag{color:#255F40}
.cell-modified .cell-change-tag{color:#75531B}
.array-cell.pointer.cell-added .cell-value,.array-cell.pointer.cell-modified .cell-value{outline:2px solid var(--accent);outline-offset:2px}
.removed-elements{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;margin:8px 0;color:#853C35;font-size:12px}
.removed-item{display:inline-block;padding:3px 6px;background:#FAE9E5;border:1px dashed #A35C52;font-family:var(--mono);overflow-wrap:anywhere;max-width:100%}
.removed-item small{font:12px "Segoe UI",sans-serif}
.matrix-coordinates{font:12px/1.7 var(--mono);color:var(--accent);margin-bottom:7px;overflow-wrap:anywhere}
.matrix th.matrix-axis-active{font-weight:700;color:var(--accent);background:var(--soft-strong);border:1px dashed var(--accent);padding:4px}
.matrix td.matrix-row-active,.matrix td.matrix-column-active{background:#E8F1F2}
.matrix td.matrix-selected{background:#D4E8EB;outline:2px solid var(--accent);outline-offset:1px;font-weight:700}
.matrix-target{display:block;font:14px/1 var(--mono);margin-top:4px;color:var(--accent)}
.matrix td:has(.cell-change-tag){min-width:105px}
.matrix .matrix-removal-note{font:12px/1.7 "Segoe UI",sans-serif;text-align:left;background:#FAE9E5;color:#853C35;box-shadow:none;border:1px dashed #A35C52}
.visual-panel .panel-body{max-height:380px}
@media(forced-colors:active){.cell-added .cell-value,.cell-modified .cell-value,.removed-item,.matrix th.matrix-axis-active{border-color:CanvasText}.matrix td.matrix-selected{outline-color:Highlight}}

.console-input-form{padding:0 16px 16px}
.for-traversal{border-bottom:1px solid var(--border);padding-bottom:14px;margin-bottom:16px}
.for-traversal .structure-title{flex-wrap:wrap;overflow-wrap:anywhere}
.for-status{font-size:12px;color:var(--text);margin:9px 0 0;overflow-wrap:anywhere}
.for-array{gap:10px;padding-top:8px;padding-bottom:10px}
.for-array .array-cell{flex:0 0 68px;min-width:68px;width:68px}
.for-slot{height:90px;display:flex;align-items:flex-start;justify-content:center;position:relative}
.for-marker.index-marker{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:64px;height:64px;box-sizing:border-box;border:2px solid var(--accent);background:#D4E8EB;color:var(--text);font:12px/1.2 var(--mono);position:relative;white-space:normal;overflow-wrap:anywhere;text-align:center;padding:4px;box-shadow:3px 3px 0 #A9BDC4}
.for-marker strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.for-arrow{position:absolute;top:67px;font-size:18px;color:var(--accent)}
.for-array .cell-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.console-input-form>label{display:block;font:13px/1.7 var(--mono);margin-bottom:8px;overflow-wrap:anywhere}
.console-input-row{display:flex;gap:10px;align-items:center}
#console-input{flex:1;min-width:0;min-height:44px;border:2px solid #73818B;background:var(--surface);color:var(--text);padding:9px;font:16px var(--mono)}
#console-input-help{font-size:12px;color:var(--muted);margin:9px 0 0}
#console-input-error{font-size:13px;color:var(--error-text);overflow-wrap:anywhere}
.prepared-toggle{display:flex;align-items:center;gap:8px;min-height:44px;line-height:1.6}
.prepared-toggle input{width:18px;height:18px;accent-color:var(--accent)}
@media(max-width:380px){.console-input-row{flex-wrap:wrap}.console-input-row input,.console-input-row button{width:100%}}