:root {
  color-scheme:light;
  --surface:#FFFFFF; --canvas:#F7F8FA; --text:#15171A; --muted:#626873;
  --accent:#344C8A; --accent-hover:#293E75; --selected:#EDF1F8;
  --divider:#D7DBE0; --control-border:#858585; --success:#206843;
  --warning:#825B1E; --error:#B42318;
  font-family:Inter,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;
  color:var(--text); background:var(--canvas);
}
* { box-sizing:border-box; }
body { margin:0; font-size:15px; line-height:1.7; }
button,input,textarea,select { font:inherit; }
a { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
a:hover { color:var(--accent-hover); }
button { cursor:pointer; color:var(--accent); border:1px solid var(--control-border); background:var(--surface); border-radius:6px; padding:10px 16px; font-size:14px; font-weight:600; line-height:1.45; }
button:hover { background:var(--selected); }
button:disabled { opacity:.55; cursor:default; }
button.primary { color:var(--surface); background:var(--accent); border-color:var(--accent); }
button.primary:hover { background:var(--accent-hover); }
button.wide { display:flex; justify-content:space-between; width:100%; margin-top:24px; padding:14px 20px; }
:focus-visible { outline:3px solid var(--accent); outline-offset:4px; box-shadow:0 0 0 2px var(--surface); }
[hidden],.hidden { display:none!important; }
h1,h2,h3,h4 { line-height:1.3; letter-spacing:-.025em; overflow-wrap:anywhere; }
h1 { font-size:40px; font-weight:650; margin:12px 0; }

h2 { font-size:21px; }
h3 { font-size:18px; }
h4 { font-size:15px; }
p { overflow-wrap:anywhere; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px max(32px,calc((100% - 1200px)/2)); border-bottom:1px solid var(--divider); background:var(--surface); }
.brand { display:flex; align-items:center; gap:12px; font-size:21px; font-weight:700; text-decoration:none; color:var(--text); white-space:nowrap; }
.brand b { font-size:14px; font-weight:500; }
.brand-mark { display:grid; place-items:center; width:36px; height:36px; border-radius:8px; background:var(--accent); color:var(--surface); }
.topbar nav { display:flex; gap:8px; flex-wrap:wrap; }
.topbar nav button { border-color:transparent; color:var(--muted); background:var(--surface); font-weight:500; }
.topbar nav button.nav-active { background:var(--selected); color:var(--accent); border-bottom:2px solid var(--accent); font-weight:650; }
.top-note { font-size:12px; color:var(--muted); }
main { max-width:1264px; margin:auto; padding:32px 32px 8px; }
.hero { display:flex; align-items:center; justify-content:space-between; gap:48px; margin:0 0 32px; padding:32px; border:1px solid var(--divider); border-radius:12px; background:var(--surface); }
.eyebrow { color:var(--accent); font-size:12px; letter-spacing:.1em; font-weight:650; margin:0; }
.hero-note { color:var(--muted); font-size:14px; max-width:590px; margin-bottom:0; }
.journey { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:16px; min-width:220px; }
.journey li { display:flex; align-items:center; gap:12px; color:var(--muted); }
.journey li>span { display:grid; place-items:center; width:32px; height:32px; border:1px solid var(--divider); border-radius:50%; font-size:11px; font-weight:650; flex-shrink:0; }
.journey b { font-size:13px; font-weight:600; }
.journey small { display:block; font-size:11px; }
.journey .current { color:var(--accent); }
.journey .current>span { color:var(--surface); background:var(--accent); border-color:var(--accent); }
.workspace { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); align-items:start; gap:24px; }
.workspace:has(#input-panel[hidden]) { grid-template-columns:minmax(0,1fr); }
.card { min-width:0; border:1px solid var(--divider); border-radius:12px; padding:24px; background:var(--surface); }
.section-title { display:flex; align-items:center; gap:12px; }
.section-number { font-size:11px; font-weight:650; color:var(--accent); padding:7px 9px; border-radius:6px; background:var(--selected); }
.section-title h2 { margin:0; font-size:19px; }
.section-title p { font-size:13px; color:var(--muted); margin:6px 0 0; }
.status { min-height:32px; white-space:pre-wrap; padding:0 0 12px; font-size:13px; color:var(--muted); }
.status.error { color:var(--error); }
label { display:block; font-size:13px; font-weight:600; margin:20px 0 8px; }
input,textarea,select { width:100%; min-width:0; padding:10px 12px; font-size:14px; color:var(--text); background:var(--surface); border:1px solid var(--control-border); border-radius:6px; line-height:1.7; }
textarea { resize:vertical; min-height:128px; }
::placeholder { color:var(--muted); opacity:1; }
input[type="checkbox"],input[type="radio"] { width:16px; height:16px; accent-color:var(--accent); }
.label-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:24px; }
.label-row label { margin:0; }
.label-row select { width:auto; font-size:12px; padding:6px 10px; }
#stem { margin-top:12px; min-height:160px; }
.examples { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:12px 0 16px; }
.examples span { font-size:12px; color:var(--muted); }
.examples button { font-size:12px; padding:6px 10px; }
.image-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.image-actions button { font-size:12px; padding:8px 12px; }
.image-actions select { width:auto; max-width:150px; font-size:12px; }
.muted,.input-note,.quiet { font-size:13px; color:var(--muted); line-height:1.8; }
.input-note { margin-bottom:0; }
#preview { max-width:100%; max-height:240px; display:block; margin-top:16px; border-radius:8px; }
.result-head { display:flex; justify-content:space-between; flex-wrap:wrap; align-items:center; gap:16px; margin-bottom:24px; }
.checkbox { display:flex; align-items:center; gap:8px; margin:0; font-size:12px; }
.empty { display:flex; min-height:350px; align-items:center; justify-content:center; flex-direction:column; text-align:center; padding:24px 8px; }
.empty-symbol { font-size:25px; color:var(--accent); background:var(--selected); padding:20px 28px; border-radius:12px; }
.empty h3 { font-size:18px; margin-top:24px; }
.empty p { font-size:13px; color:var(--muted); margin:0; }
.empty-points { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin-top:24px; font-size:12px; color:var(--muted); }
.badge { display:inline-block; font-size:12px; color:var(--success); border:1px solid var(--success); padding:4px 8px; border-radius:6px; margin:4px 0; }
.badge.unknown { color:var(--warning); border-color:var(--warning); }
.original { white-space:pre-wrap; overflow-wrap:anywhere; font-size:14px; }
.answer { background:var(--selected); border:1px solid var(--divider); padding:20px; border-radius:10px; margin:24px 0; }
.answer strong { font-size:13px; }
.math { min-width:0; max-width:100%; padding:8px 0; overflow-x:auto; overflow-y:hidden; font-size:17px; line-height:1.7; }
.math .katex-display { margin:.4em 0; text-align:left; }
.math .katex-display>.katex { text-align:left; }
.inline-math { display:inline-block; max-width:100%; overflow-x:auto; vertical-align:middle; }
.math-unavailable { font-size:inherit; color:inherit; font-style:normal; white-space:normal; overflow-wrap:anywhere; }
.steps { display:block; max-width:100%; width:100%; overflow-x:auto; border-collapse:collapse; margin:16px 0; font-size:13px; }
.steps th,.steps td { text-align:left; vertical-align:top; border-bottom:1px solid var(--divider); padding:12px; line-height:1.8; overflow-wrap:anywhere; }
.steps th { font-size:12px; font-weight:600; color:var(--muted); }
.steps .math { max-width:min(600px,calc(100vw - 96px)); }
.facts-table th:first-child,.facts-table td:first-child { width:4rem; white-space:nowrap; }
.facts-table td:nth-child(2) { min-width:200px; }
.method-table td { min-width:90px; }
.method-table td:first-child { min-width:160px; }
.transition { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.arrow { color:var(--muted); }
.subproblem { margin-top:24px; padding-top:24px; border-top:1px solid var(--divider); min-width:0; }
.subproblem h3 { margin-top:0; }
.subproblem:target { outline:2px solid var(--accent); outline-offset:4px; }
.goal-methods { margin-top:24px; }
.goal-method { padding:16px; border:1px solid var(--divider); border-radius:8px; background:var(--canvas); }
.goal-method summary { font-weight:600; }
.step-links { display:flex; flex-wrap:wrap; gap:8px 16px; padding-left:20px; margin-block:16px; }
.step-links li { padding-right:8px; }
.feedback { padding:16px 20px; border-left:3px solid var(--warning); background:var(--canvas); border-radius:0 8px 8px 0; margin:16px 0; }
.feedback.success { border-color:var(--success); }
.feedback p { font-size:14px; margin:8px 0; }
.feedback small { color:var(--muted); }
.next-step,.learning-cue,.state-card { border:1px solid var(--divider); border-radius:10px; padding:20px; margin:24px 0; background:var(--surface); }
.next-step h3,.learning-cue h3,.state-card h3 { margin-top:0; }
.next-step p,.learning-cue p,.state-card p { font-size:14px; color:var(--muted); }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:16px; }
.workspace-links { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:24px; margin-top:20px; }
.workspace-links h2 { margin:0 0 8px; font-size:18px; }
.workspace-links p { margin:0; }
.workspace-links .actions { gap:12px 20px; }
details { margin:20px 0; min-width:0; }
summary { cursor:pointer; color:var(--accent); font-size:14px; line-height:1.7; }
details>p { font-size:13px; }
.progress-line { height:5px; background:var(--divider); border-radius:5px; margin:12px 0; }
.progress-line span { display:block; height:100%; background:var(--accent); border-radius:5px; }
.history-item { display:block; width:100%; text-align:left; margin:12px 0; padding:16px; white-space:normal; }
.history-item small { display:block; font-size:12px; color:var(--muted); margin-top:8px; }
.toolbox { margin-top:24px; }
.tool-layout { display:grid; grid-template-columns:280px minmax(0,1fr); gap:24px; margin-top:24px; }
.search-row { display:flex; gap:8px; }
.search-row input { min-width:0; }
.search-row button { flex-shrink:0; }
.tool-filters { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
.tool-filters button { font-size:12px; padding:6px 8px; }
.tool-filters .selected,.tool-list button.selected { background:var(--selected); border-color:var(--accent); }
.tool-list { display:flex; flex-direction:column; gap:8px; max-height:480px; overflow:auto; }
.tool-list button { width:100%; text-align:left; font-size:13px; padding:12px; }
.tool-editor { min-width:0; }
.form-group { min-width:0; border:1px solid var(--divider); border-radius:8px; padding:16px; margin:16px 0; }
.form-group legend { font-size:12px; color:var(--muted); padding:0 8px; }
.field { min-width:0; margin:12px 0; }
.field label { margin:8px 0; font-size:13px; }
.array-row { min-width:0; }
.remove-item,.add-item { font-size:12px; padding:6px 10px; }
.value-list { margin:12px 0; }
.value-row { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:12px; border-bottom:1px solid var(--divider); padding:12px 0; }
.value-row dt { font-size:13px; color:var(--muted); }
.value-row dd { font-size:15px; margin:0; overflow-wrap:anywhere; }
.flow-card { border:1px solid var(--divider); border-radius:10px; padding:16px; margin:16px 0; }
.flow-card h3 { font-size:15px; }
#tool-result:not(:empty) { border-top:1px solid var(--divider); padding-top:24px; margin-top:24px; }
.login { max-width:480px; margin:24px 0; }
.login button { margin-top:16px; }
footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; padding:32px 0; font-size:12px; color:var(--muted); }
.skip { position:absolute; top:8px; left:16px; transform:translateY(-160%); z-index:10; background:var(--surface); border:2px solid var(--accent); padding:12px; }
.skip:focus { transform:translateY(0); }
.exploration-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.7fr); gap:32px; margin-top:24px; }
.exploration-layout>div { min-width:0; }
.type-card { background:var(--canvas); border:1px solid var(--divider); border-radius:10px; padding:20px; margin:24px 0; }
.exploration-choice { display:flex; align-items:center; gap:12px; padding:8px 0; font-size:14px; }
.exploration-choice input { flex-shrink:0; }
.condition-excluded { color:var(--warning); }
.branch-tree { list-style:none; padding-left:16px; border-left:1px solid var(--divider); }
.root-tree { padding-left:0; border:0; }
.branch-tree li { margin:16px 0; }
.branch-line { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; }
.decision-overview { border:1px solid var(--divider); border-radius:10px; padding:20px; margin:24px 0; background:var(--canvas); }
.decision-root,.decision-conclusion { padding:12px 16px; background:var(--selected); border-radius:6px; }
.decision-root { font-weight:600; }
.decision-target { margin:16px 0 0 12px; padding:8px 0 8px 16px; border-left:2px solid var(--divider); }
.decision-target>summary { display:flex; flex-wrap:wrap; gap:12px; }
.decision-path { padding:16px; background:var(--surface); border-radius:8px; }
.decision-path h4 { margin:8px 0; }
.decision-conclusion { display:flex; flex-direction:column; gap:8px; }
.decision-conclusion small { color:var(--muted); }
.decision-arrow { font-size:20px; }
.principle-note { padding:16px; border-left:2px solid var(--accent); background:var(--selected); margin-top:16px; }
.type-result { font-weight:600; color:var(--text); }
.case-group,.case-branch { min-width:0; padding:16px; border:1px solid var(--divider); border-radius:8px; margin:16px 0; }
.case-branch { background:var(--canvas); }
@media(max-width:1050px) {
  .topbar { flex-wrap:wrap; padding:20px 24px; gap:16px; }
  .top-note { display:none; }
  main { padding-inline:24px; }
  .hero { gap:24px; padding:24px; }
  h1 { font-size:34px; }
}
@media(max-width:800px) {
  .topbar { padding:16px; }
  .topbar nav { width:100%; gap:4px; }
  .topbar nav button { font-size:13px; padding:8px 10px; }
  main { padding:24px 16px 8px; }
  .hero { display:block; padding:24px; }
  h1 { font-size:30px; }
  .hero h1 span { display:block; }
  .journey { flex-direction:row; flex-wrap:wrap; gap:16px; min-width:0; margin-top:24px; }
  .journey li { flex:1 1 140px; align-items:flex-start; }
  .workspace,.tool-layout,.exploration-layout { grid-template-columns:minmax(0,1fr); }
  .card { padding:20px; }
  .empty { min-height:280px; }
  .steps th,.steps td { padding:10px 8px; }
  .value-row dd { text-align:left; }
  .branch-tree { padding-left:12px; }
}
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }
@media print { .topbar,.hero,.input-card,.status,footer,.checkbox,.actions,.toolbox { display:none; } .workspace { display:block; } .card { border:0; } .steps { display:table; } .steps tr { break-inside:avoid; } }