body { background:radial-gradient(ellipse at 80% 0%,#26203944,transparent 40%),var(--bg); }
.header { height:78px; }
.compare-main { margin:12px 4.4% 50px; }
.compare-hero { display:flex; align-items:center; justify-content:space-between; gap:30px; margin:5px 0 22px; }
.compare-hero .eyebrow { color:#b9a8dd; margin-bottom:13px; }
.compare-hero h1 { font-family:Georgia,"Songti SC",serif; font-size:42px; line-height:1.2; letter-spacing:-.5px; margin:0; }
.compare-hero h1 span { display:block; font:18px/1.5 "PingFang SC",sans-serif; color:#bfb1d3; letter-spacing:1px; margin-top:11px; }
.hero-copy { color:#a79db7; font-size:12px; line-height:1.9; margin:16px 0 0; }
.scope-card { padding:20px 0 20px 28px; border-left:1px solid #ffffff20; color:#baafc9; min-width:255px; }
.version-tag { font-size:9px; letter-spacing:1.8px; color:#9588ac; }
.scope-card p { font-size:12px; margin:13px 0 6px; }
.scope-card strong { color:#e8dcff; font-size:30px; font-weight:400; margin-right:7px; }
.scope-card small { display:block; font-size:10px; color:#9487a5; line-height:2; }
.compare-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:13px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:15px 0; }
.view-modes { display:flex; gap:3px; padding:4px; background:#ffffff05; border:1px solid var(--line); border-radius:7px; }
.view-modes button { border:0; background:none; color:#a99dbb; font-size:11px; padding:7px 13px; border-radius:4px; }
.view-modes button[aria-pressed="true"] { color:#e2d3ff; background:#b39adf25; }
.compare-search { display:flex; gap:8px; align-items:center; margin-left:auto; border:1px solid #ffffff20; border-radius:6px; padding:8px 10px; }
.compare-search span { font-size:18px; line-height:1; color:#a296b6; }
.compare-search input { background:none; border:0; outline:none; color:#e1d7ee; width:155px; font-size:11px; }
.compare-search:focus-within { border-color:#bba5ff80; }
.toolbar-select { font-size:10px; color:#a89bb9; display:flex; align-items:center; gap:7px; }
.toolbar-select select { padding:6px; font-size:10px; }
.comparison-key { display:flex; flex-wrap:wrap; gap:20px; font-size:10px; margin:17px 0 8px; }
.kind-shared { --kind:#85d4b5; color:var(--kind); }.kind-scope { --kind:#bfa2fa; color:var(--kind); }.kind-partial { --kind:#e4b878; color:var(--kind); }.kind-path { --kind:#8cb9df; color:var(--kind); }.kind-unmapped { --kind:#8b8598; color:var(--kind); }
.reading-note { color:#8d829e; font-size:10px; margin:0 0 20px; line-height:1.8; }
.compare-workspace { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:20px; align-items:start; }
.tree-pair { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.tree-column { min-width:0; border:1px solid #ffffff18; border-radius:10px; background:#11101ac9; overflow:hidden; }
.tree-column>header { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:19px 18px 8px; }
.source-index { font-size:9px; letter-spacing:1.6px; color:#b9a3da; }
.en-column .source-index { color:#92c6c2; }
.tree-column h2 { margin:4px 0 0; font-size:17px; font-weight:500; }
.node-count { font-size:10px; color:#9285a4; white-space:nowrap; }
.source-description { color:#94889e; font-size:10px; margin:0 18px; min-height:34px; }
.tree-status { font-size:9px; color:#9b8ba9; margin:0; padding:10px 18px; border-bottom:1px solid var(--line); }
.tree-scroll { padding:17px 14px 24px; max-height:670px; min-height:380px; overflow:auto; scrollbar-width:thin; scrollbar-color:#51435e transparent; overscroll-behavior:contain; }
.branch-list { list-style:none; margin:0; padding:0; }
.branch-list .branch-list { padding-left:12px; margin-left:10px; border-left:1px solid #70617e70; }
.branch-list>li { padding-bottom:12px; }
.branch-head { position:relative; }
.branch-list .branch-list>.soft-branch { border-left:1px dashed #70617e; margin-left:-13px; padding-left:12px; background:#11101a; }
.branch-list .branch-list>.soft-branch>.branch-list { background:#11101a; }
.edge-label { display:block; color:#93839f; font-size:9px; padding:6px 0 4px 2px; }
.edge-label::before { content:'↳'; margin-right:6px; color:#786586; }
.node-card { display:block; min-width:175px; width:100%; text-align:left; background:#191521; border:1px solid #ffffff15; border-left:2px solid var(--kind); border-radius:6px; padding:10px 11px; color:#e6dfed; position:relative; }
.node-card:hover { background:#241b30; border-color:#b8a2cf65; }
.node-card strong { display:block; font-size:11px; line-height:1.5; font-weight:500; }
.node-card .secondary-title { display:block; font-size:10px; line-height:1.6; color:#a99bb8; margin-top:3px; }
.node-meta { display:flex; flex-wrap:wrap; gap:4px 8px; font-size:8px; margin-top:7px; color:#94859f; }
.node-meta .relation-tag { color:var(--kind); }
.node-card.is-related { border-color:var(--kind); background:color-mix(in srgb,var(--kind) 8%,#16121e); box-shadow:0 0 0 1px color-mix(in srgb,var(--kind) 18%,transparent); }
.node-card.is-selected { box-shadow:0 0 0 2px #e5d8f0; }
.node-card.context { opacity:.38; }
.node-card.context::after { content:'路径上下文'; position:absolute; top:4px; right:6px; font-size:7px; color:#c7bbd3; }
.node-card.context strong { padding-top:7px; }
.repeat-note { color:#85758e; font-size:9px; margin:5px 0 0; }
.expand-branch { border:1px dashed #8f76a94d; background:none; color:#b8a3cf; font-size:9px; border-radius:4px; margin:7px 0 2px; padding:5px 8px; }
.tree-empty { padding:28px 6px; color:#a596b7; font-size:11px; }
.group-explorer { margin-bottom:20px; }
.section-label { font-size:12px; color:#d0c2de; margin-bottom:12px; }
.section-label>span { color:#8e809e; font-size:10px; margin-left:12px; }
#group-list { display:flex; flex-wrap:wrap; gap:7px; }
.group-chip { padding:7px 10px; border-radius:5px; font-size:10px; background:#181320; border:1px solid #ffffff18; }
.group-chip[aria-pressed="true"] { border-color:var(--kind); background:color-mix(in srgb,var(--kind) 10%,#181320); }
.group-chip small { font-size:9px; opacity:.7; margin-left:7px; }
.comparison-detail { position:sticky; top:20px; background:#191320c9; border:1px solid #bba5ff25; border-radius:10px; padding:22px; max-height:calc(100svh - 40px); overflow:auto; scrollbar-width:thin; scrollbar-color:#51435e transparent; }
.detail-kicker { font-size:9px; letter-spacing:1.3px; color:#a38fb9; margin:0 0 11px; }
.detail-title { font-size:19px; line-height:1.4; margin:0 0 6px; font-weight:500; }
.detail-subtitle { font-size:12px; color:#b09bbf; margin:0 0 14px; }
.review-state { font-size:9px; color:#96849f; margin:6px 0 17px; }
.comparison-detail h3 { font-size:11px; font-weight:500; margin:19px 0 7px; color:#c6b3d8; }
.comparison-detail p { font-size:11px; line-height:1.9; color:#b9a7c9; }
.comparison-detail .shared-copy { color:#a5d5c2; }
.math-example { font:15px/1.7 Georgia,serif; border-left:2px solid #ae93d7; padding:9px 13px; background:#bba5ff09; margin-top:13px; color:#dac9ef; }
.source-node-link { display:block; width:100%; text-align:left; border:0; background:none; padding:6px 0; color:#c8b4dc; font-size:10px; }
.source-node-link:hover { color:white; }
.raw-evidence { border-top:1px solid var(--line); padding-top:12px; margin-top:13px; }
.raw-evidence summary { cursor:pointer; color:#c5b0d6; font-size:10px; }
.raw-evidence h4 { font-size:10px; margin:14px 0 5px; color:#b4a0c5; }
.raw-evidence ul { font-size:10px; color:#ad9bbe; padding-left:16px; line-height:1.8; }
.raw-evidence .original-name { color:#cbb5dd; font-size:11px; margin-bottom:5px; }
.raw-evidence a,.source-notes a { color:#c7b0ec; text-decoration:underline; text-underline-offset:3px; }
.raw-evidence .source-id { color:#8d7c9f; font-size:9px; word-break:break-all; }
.comparison-detail .diagnose-choice { display:block; border:1px solid #b9a1d24d; border-radius:4px; padding:7px 9px; margin-top:7px; font-size:10px; color:#d4c2e9; }
.glossary-section { border-top:1px solid var(--line); padding-top:24px; margin-top:30px; }
#glossary { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.term { padding:12px 14px; border:1px solid var(--line); border-radius:6px; background:#14101d; }
.term summary { cursor:pointer; font-size:11px; color:#d4c6e3; }
.term summary span { display:block; margin:3px 0 0 13px; color:#9b8ca9; font-size:10px; }
.term p { color:#b2a1c0; font-size:10px; line-height:1.8; }
.source-notes { margin-top:27px; color:#8d7c9e; font-size:10px; max-width:1000px; line-height:1.9; }
.source-notes summary { cursor:pointer; }
#loading,#error { padding:35px; font-size:12px; color:#b6a3c9; border:1px solid var(--line); border-radius:8px; }
#error button { background:#bba5ff; color:#181121; padding:7px 12px; border:0; border-radius:4px; }
@media(max-width:1150px) {
  .compare-workspace { grid-template-columns:1fr; }
  .comparison-detail { position:static; max-height:none; }
  .tree-scroll { max-height:590px; }
  .compare-search { margin-left:0; }
  .compare-hero h1 { font-size:36px; }
}
@media(max-width:760px) {
  .header { padding:0 22px; height:82px; }.header nav { gap:12px; }.header .list-link { font-size:10px; }.diagnose-link { font-size:10px; }
  .compare-main { margin:18px 20px 32px; }
  .compare-hero { display:block; margin-bottom:22px; }.compare-hero h1 { font-size:33px; }.compare-hero h1 span { font-size:16px; }
  .compare-hero .eyebrow { font-size:9px; }.hero-copy { font-size:11px; }
  .scope-card { margin-top:17px; padding:12px 15px; border:1px solid var(--line); border-radius:7px; min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:3px 14px; }
  .scope-card p { margin:0; font-size:10px; }.scope-card strong { font-size:20px; }.scope-card small { font-size:9px; }.version-tag { font-size:8px; }
  .compare-toolbar { gap:11px 13px; padding:13px 0; }.view-modes { flex:1; }.view-modes button { flex:1; font-size:10px; padding:7px 5px; }
  .compare-search { width:100%; order:2; }.compare-search input { width:100%; font-size:12px; }.toolbar-select { font-size:9px; }.toolbar-select select { max-width:94px; font-size:9px; }
  .comparison-key { gap:6px 13px; font-size:9px; }.reading-note { font-size:9px; }
  .tree-pair { gap:10px; }.tree-column>header { padding:13px 11px 7px; display:block; }.tree-column h2 { font-size:14px; }.source-index { font-size:8px; }.node-count { font-size:8px; }
  .source-description { margin:0 11px; font-size:9px; min-height:46px; }.tree-status { padding:7px 11px; font-size:8px; min-height:39px; }
  .tree-scroll { padding:10px 8px 18px; max-height:520px; min-height:300px; }
  .node-card { min-width:140px; padding:9px 8px; }.node-card strong { font-size:10px; }.node-card .secondary-title { font-size:9px; }.node-meta { font-size:7px; }
  .branch-list .branch-list { padding-left:8px; margin-left:5px; }.branch-list .branch-list>.soft-branch { margin-left:-9px; padding-left:8px; }
  .section-label>span { display:block; margin:4px 0 0; }.comparison-detail { padding:20px; }
  #glossary { grid-template-columns:1fr 1fr; }.term { padding:11px; }.term summary { font-size:10px; }
}
@media(max-width:390px) { .compare-main { margin-left:12px; margin-right:12px; }.header nav .list-link:nth-child(2) { display:none; }.node-card { min-width:130px; }.tree-pair { gap:7px; } }