:root{--bg: #0e1116;--bg-panel: #151a22;--bg-inset: #0b0e13;--border: #262d3a;--text: #d7dce4;--text-dim: #8a93a5;--accent: #7aa2f7;--accent-2: #bb9af7;--green: #9ece6a;--amber: #e0af68;--red: #f7768e;--cyan: #7dcfff;--node-default: #3b4666;--node-new: #7dcfff;--node-changed: #e0af68;--node-merged: #bb9af7;--node-settled: #2f4d2a;--mono: "SF Mono", "Cascadia Code", "Fira Code", Menlo, Consolas, monospace}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font:14px/1.45 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow:hidden}button{font:inherit;color:var(--text);background:#1e2530;border:1px solid var(--border);border-radius:6px;padding:4px 10px;cursor:pointer}button:hover:not(:disabled){background:#273041;border-color:#37415a}button:disabled{opacity:.45;cursor:default}button.primary{background:#2b3e66;border-color:#3d5486}button.primary:hover:not(:disabled){background:#34497a}select,input[type=number],input[type=text]{font:inherit;color:var(--text);background:var(--bg-inset);border:1px solid var(--border);border-radius:6px;padding:4px 8px}input[type=range]{accent-color:var(--accent)}.app{display:grid;height:100%;grid-template-columns:minmax(300px,380px) 1fr minmax(300px,380px);grid-template-rows:1fr auto;grid-template-areas:"editor graph right" "timeline timeline timeline";gap:8px;padding:8px}.panel{background:var(--bg-panel);border:1px solid var(--border);border-radius:10px;display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden;transition:opacity .25s,box-shadow .25s}.panel-editor{grid-area:editor}.panel-graph{grid-area:graph;position:relative}.panel-right{grid-area:right}.panel-timeline{grid-area:timeline}@media (max-width: 1080px){body{overflow:auto}.app{grid-template-columns:1fr;grid-template-rows:auto minmax(420px,60vh) auto auto;grid-template-areas:"editor" "graph" "right" "timeline";height:auto}}.app[data-spotlight] .panel{opacity:.35}.app[data-spotlight=editor] .panel-editor,.app[data-spotlight=graph] .panel-graph,.app[data-spotlight=inspector] .panel-right,.app[data-spotlight=timeline] .panel-timeline,.app[data-spotlight=console] .panel-editor{opacity:1;box-shadow:0 0 0 2px var(--accent)}.app[data-spotlight] .panel-right{opacity:1}.app[data-spotlight=console] .console{box-shadow:inset 0 0 0 2px var(--accent);border-radius:8px}.panel-head{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--border);flex-wrap:wrap;flex-shrink:0}.panel-head h2{font-size:13px;font-weight:600;margin:0;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em}.spacer{flex:1}.editor-host{flex:1;min-height:140px;overflow:hidden}.editor-host .cm-editor{height:100%;font-size:13px;background:var(--bg-inset)}.editor-host .cm-editor .cm-content{font-family:var(--mono)}.editor-host .cm-editor.cm-focused{outline:none}.cm-mew-hover{background:#7aa2f738;border-radius:2px}.cm-mew-selected{background:#e0af684d;outline:1px solid rgba(224,175,104,.6);border-radius:2px}.editor-controls{display:flex;gap:6px;align-items:center;padding:8px 10px;border-top:1px solid var(--border);flex-wrap:wrap;flex-shrink:0}.editor-controls label{color:var(--text-dim);font-size:12px;display:flex;align-items:center;gap:4px}.fuel-input{width:70px}.console{border-top:1px solid var(--border);padding:8px 10px;font-family:var(--mono);font-size:12px;max-height:200px;overflow-y:auto;flex-shrink:0;background:var(--bg-inset)}.console .soundness-banner{background:#f7768e26;border:1px solid var(--red);color:var(--red);border-radius:6px;padding:6px 8px;margin-bottom:6px;font-weight:600}.console .status-quiescent{color:var(--green)}.console .status-fuel{color:var(--amber)}.console .status-error{color:var(--red);white-space:pre-wrap}.console .status-idle{color:var(--text-dim)}.console .answer{font-size:15px;color:var(--text);margin-top:4px}.console .answer b{color:var(--cyan)}.console .prov-summary,.console .seed-note{color:var(--text-dim);margin-top:3px}.console .confluence-report{margin-top:6px;padding-top:6px;border-top:1px dashed var(--border)}.console .confluence-ok{color:var(--green)}.console .confluence-bad{color:var(--red)}.graph-svg{width:100%;height:100%;display:block;cursor:grab;touch-action:none}.graph-svg.panning{cursor:grabbing}.graph-empty{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-dim);gap:8px;text-align:center;padding:20px}.node circle.body{fill:var(--node-default);stroke:#566089;stroke-width:1.2;transition:fill .3s,stroke .3s;cursor:pointer}.node.settled circle.body{fill:var(--node-settled);stroke:var(--green)}.node.gained circle.body{fill:#574b2c;stroke:var(--node-changed)}.node.merged-now circle.body{fill:#4a3a63;stroke:var(--node-merged)}.node.born circle.body{fill:#1e4356;stroke:var(--node-new)}.node.root circle.ring{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:4 3}.node.hovered circle.body,.node.src-hit circle.body{stroke:var(--cyan);stroke-width:2.5}.node.selected circle.body{stroke:var(--amber);stroke-width:3}.node.pinned circle.pin{fill:var(--text-dim)}.node.ghost{opacity:.35}.node.ghost circle.body{stroke-dasharray:3 3}.graph:not(.degraded) .node.demanded-now circle.pulse{animation:pulse .9s ease-out;stroke:var(--cyan)}.graph:not(.degraded) .node.tightened text{animation:label-flash .8s ease-out}@keyframes label-flash{0%{fill:var(--amber);font-size:12px}to{fill:var(--text);font-size:10px}}.node text{fill:var(--text);font-family:var(--mono);font-size:10px;text-anchor:middle;pointer-events:none;paint-order:stroke;stroke:var(--bg);stroke-width:3px}.node.settled text{fill:var(--green)}.graph:not(.degraded) .node.born{animation:born .6s ease-out}@keyframes born{0%{opacity:0;transform:scale(.2)}60%{transform:scale(1.15)}to{opacity:1;transform:scale(1)}}.graph:not(.degraded) .node.gained circle.pulse,.graph:not(.degraded) .node.merged-now circle.pulse{animation:pulse .9s ease-out;transform-origin:center}circle.pulse{fill:none;stroke:var(--node-changed);stroke-width:2;opacity:0}.node.merged-now circle.pulse{stroke:var(--node-merged)}@keyframes pulse{0%{opacity:.9;r:8}to{opacity:0;r:34}}.edge{fill:none;stroke:#454f6b;stroke-width:1.4;marker-end:url(#arrow)}.edge.ghost{stroke:var(--accent-2);stroke-dasharray:3 4;opacity:.7;marker-end:url(#arrow-ghost)}.edge.structure{stroke:#333c52;stroke-dasharray:2 4;marker-end:none}.firing-arc{fill:none;stroke:var(--amber);stroke-width:1.6;opacity:0;pointer-events:none}.firing-arc.unfold{stroke:var(--cyan)}.firing-arc.congruence{stroke:var(--accent-2)}.graph:not(.degraded) .firing-arc{animation:arc 1.1s ease-out}@keyframes arc{0%{opacity:0}15%{opacity:.85}to{opacity:0}}.graph-toolbar{position:absolute;top:10px;right:10px;display:flex;gap:6px;z-index:2}.legend{position:absolute;left:10px;bottom:10px;background:#0e1116e0;border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-size:11px;color:var(--text-dim);z-index:2;max-width:240px}.legend h3{margin:0 0 4px;font-size:11px;color:var(--text)}.legend-row{display:flex;align-items:center;gap:6px;margin:2px 0}.legend-swatch{width:11px;height:11px;border-radius:50%;border:1.5px solid;flex-shrink:0}.graph-hint{position:absolute;right:10px;bottom:10px;font-size:11px;color:var(--text-dim);background:#0e1116cc;padding:4px 8px;border-radius:6px;z-index:2}.timeline{display:flex;align-items:center;gap:10px;padding:8px 12px;flex-wrap:wrap}.timeline .round-display{font-family:var(--mono);font-size:13px;min-width:90px;color:var(--cyan)}.timeline input[type=range]{flex:1;min-width:160px}.timeline .ribbon{flex-basis:100%;font-family:var(--mono);font-size:12px;color:var(--text-dim);padding:2px 2px 0;min-height:18px;overflow-x:auto;white-space:nowrap}.timeline .ribbon .r-arith{color:var(--amber)}.timeline .ribbon .r-if{color:var(--green)}.timeline .ribbon .r-unfold{color:var(--cyan)}.timeline .ribbon .r-cong{color:var(--accent-2)}.tabs{display:flex;border-bottom:1px solid var(--border);flex-shrink:0}.tabs button{flex:1;border:none;border-radius:0;background:transparent;padding:9px;color:var(--text-dim);border-bottom:2px solid transparent}.tabs button.active{color:var(--text);border-bottom-color:var(--accent)}.right-body{flex:1;overflow-y:auto;padding:10px 12px;min-height:0}.inspector h3{margin:0 0 2px;font-size:15px;font-family:var(--mono);color:var(--cyan);word-break:break-all}.inspector .class-id{color:var(--text-dim);font-size:11px;margin-bottom:10px}.inspector section{margin-bottom:14px}.inspector section h4{margin:0 0 5px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim)}.alt-list,.prov-list,.span-list{list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:12px}.alt-list li{padding:4px 6px;border:1px solid var(--border);border-radius:6px;margin-bottom:4px;word-break:break-all}.alt-list li.best{border-color:var(--green);background:#9ece6a14}.alt-list .cost{float:right;color:var(--text-dim);font-size:11px}.prov-list li{padding:3px 0;border-bottom:1px dashed #1d2430;color:var(--text-dim)}.prov-list .rule{color:var(--amber)}.prov-list .round-tag{color:var(--cyan);margin-right:6px}.span-list li{padding:3px 6px;margin-bottom:3px;background:var(--bg-inset);border-radius:4px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.span-list li:hover{outline:1px solid var(--accent)}.inspector-empty,.tutorial-idle{color:var(--text-dim);padding:12px 4px}.tutorial .lesson-nav{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px}.tutorial .lesson-nav button{padding:2px 8px;font-size:11px}.tutorial .lesson-nav button.current{border-color:var(--accent);color:var(--accent)}.tutorial .lesson-nav button.done{color:var(--green)}.tutorial h3{margin:4px 0 8px;font-size:14px}.tutorial .step-count{color:var(--text-dim);font-size:11px}.tutorial .prose{margin:8px 0 12px;line-height:1.55}.tutorial .checkpoint{border:1px solid var(--border);border-radius:8px;padding:8px 10px;margin:10px 0;font-size:13px}.tutorial .checkpoint.done{border-color:var(--green);background:#9ece6a12}.tutorial .checkpoint .badge{font-weight:600;margin-right:6px}.tutorial .checkpoint.done .badge{color:var(--green)}.tutorial .checkpoint.pending .badge{color:var(--amber)}.tutorial .step-controls{display:flex;gap:6px;margin-top:10px}.tutorial .illustration{margin:10px 0;background:var(--bg-inset);border:1px solid var(--border);border-radius:8px;padding:6px}.tutorial .illustration svg{width:100%;height:auto;display:block}.tutorial .finished{color:var(--green);margin-top:10px}