:root{color-scheme:light;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:16px;line-height:1.5;color:#18202b;background:#eef2f6;--bg: #eef2f6;--surface: #ffffff;--surface-muted: #f6f8fb;--border: #d8e0ea;--border-strong: #bcc9d7;--text-muted: #627083;--accent: #0b6bcb;--accent-strong: #064f9d;--success: #168047;--danger: #b42318;--warning: #a15c00;--code-bg: #111827}*{box-sizing:border-box}body{margin:0;min-width:320px;background:var(--bg)}button{font:inherit}.fatal-error{margin:2rem;color:var(--danger)}.app-shell{min-height:100vh;display:grid;grid-template-rows:auto auto 1fr}.app-header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px 12px;background:var(--surface);border-bottom:1px solid var(--border)}.brand-block h1{margin:0;font-size:1.35rem;letter-spacing:0}.brand-block p{margin:2px 0 0;color:var(--text-muted);font-size:.9rem}.version-block{display:flex;flex-direction:column;align-items:flex-end;gap:2px;color:var(--text-muted);font-size:.78rem}.version-value{font-variant-numeric:tabular-nums}.scenario-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px;padding:12px 24px;background:var(--surface);border-bottom:1px solid var(--border);max-height:250px;overflow:auto}.scenario-filter{display:flex;flex-wrap:wrap;gap:10px;padding:10px 24px;background:var(--surface);border-bottom:1px solid var(--border)}.scenario-filter label{display:inline-flex;align-items:center;gap:6px;color:var(--text-muted);font-size:.82rem}.filter-select{min-height:32px;border:1px solid var(--border-strong);border-radius:6px;background:var(--surface);color:#273244}.filter-chip{min-height:32px;border:1px solid var(--border-strong);border-radius:6px;padding:0 10px;background:var(--surface);color:#273244;cursor:pointer;transition:background-color .12s ease,border-color .12s ease,color .12s ease}.filter-chip.is-active{border-color:var(--accent);background:#edf6ff;color:var(--accent-strong)}.scenario-tab{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:8px;row-gap:2px;min-height:82px;padding:10px 12px;border:1px solid var(--border);border-left:4px solid transparent;border-radius:8px;background:transparent;color:#273244;text-align:left;cursor:pointer;transition:background-color .12s ease,border-color .12s ease}.scenario-tab:hover,.scenario-tab:focus-visible{background:var(--surface-muted);outline:none}.scenario-tab.is-active{border-left-color:var(--accent);background:#edf6ff}.scenario-tab-order{grid-row:span 4;color:var(--text-muted);font-variant-numeric:tabular-nums;font-size:.8rem}.scenario-tab-title,.scenario-tab-level,.scenario-tab-prereq,.scenario-tab-labels{display:block;min-width:0}.scenario-tab-title{font-weight:700;font-size:.92rem}.scenario-tab-level{color:var(--text-muted);font-size:.78rem}.scenario-tab-prereq,.scenario-tab-labels{color:var(--text-muted);font-size:.72rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,440px);gap:16px;padding:16px 24px 24px}.workspace-main,.workspace-side{display:flex;flex-direction:column;gap:16px;min-width:0}.topology-view,.trace-panel,.panel{background:var(--surface);border:1px solid var(--border);border-radius:8px}.topology-view{min-height:0;padding:12px 14px}.trace-panel,.panel{padding:14px}.section-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.topology-title-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px}.topology-transport-controls{display:inline-flex;flex-wrap:wrap;gap:8px}h2,h3{margin:0;letter-spacing:0}h2{font-size:1rem}h3{margin-top:14px;margin-bottom:8px;font-size:.86rem;color:#2c394b}.status-pill,.result-pill,.tech-label{display:inline-flex;align-items:center;min-height:26px;border-radius:999px;padding:0 10px;background:var(--surface-muted);border:1px solid var(--border);color:var(--text-muted);font-size:.78rem;white-space:nowrap}.result-pill.is-success{border-color:#a8d7bc;background:#ebf8f0;color:var(--success)}.topology-svg{display:block;width:100%;max-height:480px;border:1px solid var(--border);border-radius:6px;background:#fbfcfe}.topology-step-controls{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:8px}.topology-link{stroke:#94a3b8;stroke-width:4;transition:stroke .16s ease,stroke-width .16s ease}.topology-link.is-down{stroke:#c9ced6;stroke-dasharray:9 7}.topology-link.is-active{stroke:var(--accent);stroke-width:7}.topology-link-label{fill:var(--text-muted);font-size:14px;text-anchor:middle}.topology-node circle,.topology-node rect{fill:#fff;stroke:#53657a;stroke-width:3;transition:fill .16s ease,stroke .16s ease,stroke-width .16s ease}.topology-node.node-router circle{fill:#edf6ff}.topology-node.node-pc rect{fill:#f7fbf6}.topology-node.is-active circle,.topology-node.is-active rect{stroke:var(--accent);stroke-width:5}.topology-node.is-drop circle,.topology-node.is-drop rect{stroke:var(--danger)}.topology-node-label,.topology-ip-label,.topology-nat-label{text-anchor:middle;fill:#1f2937}.topology-node-label{font-weight:800;font-size:16px}.topology-ip-label{font-size:12px;fill:var(--text-muted)}.topology-nat-label{font-size:11px;fill:var(--warning)}.packet-marker{fill:var(--warning);stroke:#fff;stroke-width:3}.packet-marker.is-on-link{fill:var(--accent)}.button-row{display:flex;flex-wrap:wrap;gap:8px}.button-row.compact{align-items:center}.primary-button,.secondary-button,.command-button{min-height:36px;border-radius:6px;padding:0 12px;border:1px solid var(--border-strong);cursor:pointer;transition:background-color .12s ease,border-color .12s ease,color .12s ease}.primary-button{color:#fff;background:var(--accent);border-color:var(--accent)}.primary-button:hover,.primary-button:focus-visible{background:var(--accent-strong)}.secondary-button,.command-button{background:var(--surface);color:#273244}.secondary-button:hover,.command-button:hover,.secondary-button:focus-visible,.command-button:focus-visible{background:var(--surface-muted)}.step-counter{min-width:64px;text-align:center;font-variant-numeric:tabular-nums;color:var(--text-muted)}.action-list,.command-row,.label-list{display:flex;flex-direction:column;gap:8px}.command-row,.label-list{flex-direction:row;flex-wrap:wrap}.action-choice,.quiz-choice,.trace-step-button{display:flex;width:100%;min-height:48px;padding:10px 12px;border-radius:6px;border:1px solid var(--border);background:var(--surface);text-align:left;cursor:pointer;transition:background-color .12s ease,border-color .12s ease}.action-choice,.trace-step-button{flex-direction:column;gap:2px}.action-choice:hover,.quiz-choice:hover,.trace-step-button:hover,.action-choice:focus-visible,.quiz-choice:focus-visible,.trace-step-button:focus-visible{border-color:var(--accent);outline:none}.action-choice.is-active,.quiz-choice.is-selected,.trace-step.is-active .trace-step-button{border-color:var(--accent);background:#edf6ff}.command-button.is-active{border-color:var(--accent);background:var(--accent);color:#fff}.command-button.is-active:hover,.command-button.is-active:focus-visible{background:var(--accent-strong)}.action-choice-title{font-weight:700;color:#1f2937}.action-choice-description,.trace-step-meta,.trace-step-reason,.trace-step-detail,.quiz-explanation,.classification-detail,.empty-state,.trace-summary{color:var(--text-muted);font-size:.86rem}.cli-output{overflow:auto;max-height:340px;margin:12px 0 0;padding:12px;border-radius:6px;background:var(--code-bg);color:#dbeafe;font-size:.82rem;line-height:1.55;white-space:pre}.goal-list{margin:0;padding-left:1.2rem}.step-explanation{margin-top:12px;padding:10px;border-radius:6px;background:var(--surface-muted)}.step-explanation p,.explanation-detail p{margin:6px 0 0}.explanation-detail{border-top:1px solid var(--border);padding:10px 0}.explanation-detail summary{cursor:pointer;font-weight:700}.quiz-block{display:flex;flex-direction:column;gap:8px;padding-top:8px;border-top:1px solid var(--border)}.troubleshoot-block,.quiz-choice-list{display:flex;flex-direction:column;gap:8px}.troubleshoot-block{padding-top:8px;border-top:1px solid var(--border)}.quiz-question{margin:0;font-weight:700}.quiz-result{margin:0;font-weight:800}.quiz-result.is-correct{color:var(--success)}.quiz-result.is-wrong{color:var(--danger)}.trace-list{display:flex;flex-direction:column;gap:8px;margin:0;padding-left:1.3rem}.trace-step{padding-left:4px}.trace-step-reason{color:#273244}.trace-step-detail{color:var(--text-muted)}@media(max-width:980px){.workspace{grid-template-columns:1fr;padding:12px}.scenario-nav{grid-template-columns:1fr;padding:10px 12px;max-height:320px}.app-header{align-items:flex-start;gap:10px;padding:14px 12px 10px}.brand-block h1{font-size:1.12rem}.brand-block p,.version-block{font-size:.76rem}.scenario-filter{padding:10px 12px}.scenario-tab{min-height:70px}.command-button{max-width:100%;overflow-wrap:anywhere}.topology-view{min-height:auto}.cli-output{white-space:pre-wrap;word-break:break-word}}