:root { color-scheme:dark; --bg:#0b0b13; --text:#efedf5; --muted:#a3a0b4; --line:#ffffff16; --purple:#bba5ff; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html,body { margin:0; min-height:100%; }
body { background:var(--bg); color:var(--text); font:14px/1.65 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; }
button,input,select { font:inherit; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button,a { touch-action:manipulation; }
button { cursor:pointer; color:inherit; }
a { color:inherit; text-decoration:none; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible,summary:focus-visible { outline:2px solid var(--purple); outline-offset:5px; }
button:disabled { cursor:default; opacity:.45; }
.header { height:104px; padding:0 4.4%; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:5; }
.brand { display:flex; gap:12px; align-items:center; font-size:25px; letter-spacing:5px; font-weight:650; }
.brand svg { width:35px; height:35px; }
.brand-caption { display:block; color:var(--muted); font-size:9px; letter-spacing:3px; font-weight:400; margin-top:-3px; }
.header nav { display:flex; align-items:center; gap:30px; font-size:12px; }
.list-link { color:var(--muted); }
.list-link:hover { color:white; }
.diagnose-link { padding:10px 18px; border:1px solid #ffffff30; border-radius:7px; }
.diagnose-link span { margin-left:15px; font-size:17px; }
.diagnose-link:hover { background:#ffffff0c; border-color:#ffffff60; }
#explorer { position:relative; min-height:700px; height:calc(100svh - 151px); isolation:isolate; }
.graph-stage { position:absolute; top:0; left:31%; right:0; bottom:0; background:radial-gradient(ellipse at 53% 46%,#25203938,transparent 66%); }
#graph { width:100%; height:100%; display:block; cursor:grab; touch-action:none; }
#graph:active { cursor:grabbing; }
.graph-caption { position:absolute; left:50%; top:72px; transform:translateX(-50%); color:#aaa4bd; font-size:10px; letter-spacing:3px; white-space:nowrap; pointer-events:none; }
.live-dot { display:inline-block; width:5px; height:5px; border-radius:50%; background:#bba5ff; box-shadow:0 0 10px #a58bff; margin-right:8px; vertical-align:2px; }
.grade-axis { position:absolute; top:18%; bottom:15%; right:5%; display:flex; flex-direction:column; justify-content:space-between; color:#77728b; font-size:10px; letter-spacing:2px; pointer-events:none; }
.grade-axis span::before { content:""; display:inline-block; width:9px; height:1px; background:#ffffff22; margin:0 10px 3px 0; }
.intro { position:absolute; left:4.4%; top:13%; width:47%; pointer-events:none; transition:opacity .25s; }
.eyebrow { font-size:10px; letter-spacing:3px; color:#b6afc8; margin:0 0 22px; }
h1 { font-family:"Songti SC","Noto Serif CJK SC","SimSun",serif; font-weight:500; font-size:clamp(38px,4.1vw,66px); line-height:1.4; letter-spacing:1px; margin:0 0 23px; }
h1 span { color:#cbb9ff; }
.intro-description { color:#aaa5b8; font-size:12px; line-height:2.1; margin:0; }
.stats { display:flex; gap:30px; align-items:center; margin:27px 0 22px; }
.stats>div { display:flex; align-items:baseline; gap:11px; }
.stats strong { font-size:30px; line-height:1; font-weight:400; font-variant-numeric:tabular-nums; letter-spacing:-1px; }
.stats div span { color:#9792a7; font-size:10px; }
.stats-divider { height:25px; width:1px; background:#ffffff20; }
.explore-example { pointer-events:auto; border:1px solid #bba5ff3c; background:#bba5ff0b; border-radius:6px; padding:11px 15px; font-size:11px; color:#d3c5f5; }
.explore-example:hover { background:#bba5ff20; border-color:#bba5ff90; }
.explore-example span { margin-left:26px; font-size:16px; }
.intro-note { color:#777185; font-size:10px; letter-spacing:.5px; margin-top:12px; }
.search-panel { position:absolute; top:10px; right:4.4%; width:300px; z-index:6; }
.search-box { display:flex; align-items:center; gap:8px; height:42px; padding:0 12px; border:1px solid var(--line); border-radius:7px; background:#13121cdd; backdrop-filter:blur(16px); }
.search-box:focus-within { border-color:#bba5ff80; }
.search-box svg { width:17px; height:17px; flex-shrink:0; color:#a9a1bb; }
.search-box input { border:0; outline:none; color:var(--text); width:100%; min-width:0; background:transparent; font-size:11px; }
.search-box input::placeholder { color:#8e879d; }
.search-box input:focus-visible { outline:none; }
kbd { border:1px solid #ffffff26; color:#817b91; border-radius:3px; font:10px/17px inherit; width:18px; text-align:center; }
.search-results { background:#17151ff5; backdrop-filter:blur(20px); border:1px solid #ffffff24; border-radius:7px; margin-top:7px; max-height:360px; overflow:auto; padding:7px; box-shadow:0 15px 45px #0005; }
.search-summary { color:#a8a0b8; font-size:10px; padding:7px 9px; margin:0; }
.search-result { background:none; width:100%; border:0; text-align:left; padding:10px; border-radius:4px; display:block; }
.search-result:hover,.search-result:focus-visible { background:#ffffff0c; }
.search-result strong { font-size:12px; display:block; font-weight:500; }
.search-result small { display:block; color:#948ca6; font-size:10px; margin-top:3px; }
.legend { position:absolute; left:4.4%; bottom:35px; width:300px; padding:18px 20px 12px; border:1px solid #ffffff18; border-radius:10px; background:#11101add; backdrop-filter:blur(16px); }
.legend-heading { display:flex; align-items:center; justify-content:space-between; color:#9c94ae; font-size:10px; letter-spacing:1px; margin-bottom:11px; }
.legend-heading button { color:#b7abc9; font-size:10px; background:none; border:0; padding:0; letter-spacing:0; }
.domains { display:grid; grid-template-columns:1fr 1fr; gap:5px 15px; }
.domain-button { display:flex; gap:8px; align-items:center; border:0; background:none; padding:4px 0; font-size:11px; text-align:left; }
.domain-button::before { content:""; width:7px; height:7px; flex-shrink:0; border-radius:50%; background:var(--domain-color); box-shadow:0 0 8px color-mix(in srgb,var(--domain-color) 25%,transparent); }
.domain-button[aria-pressed="false"] { opacity:.38; }
.domain-button small { color:#8b849a; margin-left:auto; font-size:10px; font-variant-numeric:tabular-nums; }
.filter-row { display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); margin-top:12px; padding-top:10px; color:#aaa2b9; font-size:10px; }
.grade-filter { display:flex; align-items:center; gap:6px; }
select { border:0; border-radius:3px; background:#211e2d; color:#d6cfe3; font-size:10px; padding:3px 2px; }
.external-filter { display:flex; align-items:center; gap:5px; }
input[type="checkbox"] { accent-color:#bba5ff; width:12px; height:12px; margin:0; }
#visible-count { margin:10px 0 0; font-size:9px; color:#938bA3; }
.graph-controls { display:flex; align-items:center; position:absolute; right:4.4%; bottom:35px; padding:5px; border:1px solid #ffffff20; border-radius:7px; background:#13111ee8; backdrop-filter:blur(12px); }
.graph-controls>span { height:15px; width:1px; background:var(--line); margin:0 3px; }
.icon-button { display:grid; place-items:center; background:none; border:0; border-radius:4px; width:32px; height:32px; font-size:19px; color:#c0b8d1; line-height:1; }
.icon-button:hover { background:#ffffff10; color:white; }
#rotate { font-size:13px; }
.graph-help { position:absolute; bottom:0; right:4.4%; margin:0; font-size:10px; color:#8b829d; letter-spacing:.3px; }
.graph-help span { margin:0 9px; }
.footer { display:flex; justify-content:space-between; align-items:center; min-height:47px; margin:0 4.4%; color:#80798f; font-size:9px; border-top:1px solid #ffffff0c; }
.footer i { display:inline-block; height:3px; width:3px; border-radius:50%; background:#80798f; margin:0 9px 2px; }
.tooltip { position:absolute; z-index:4; background:#1b1727ef; backdrop-filter:blur(16px); border:1px solid #ffffff26; padding:12px 15px; border-radius:7px; max-width:250px; pointer-events:none; box-shadow:0 10px 40px #0005; }
.tooltip small { display:block; color:#aca1bc; font-size:9px; margin-bottom:4px; }
.tooltip strong { font-size:12px; font-weight:500; }
.detail-panel { position:absolute; z-index:4; top:72px; right:4.4%; width:330px; max-height:calc(100% - 164px); overflow:auto; overscroll-behavior:contain; border:1px solid #ffffff24; border-radius:12px; background:#15121feF; backdrop-filter:blur(24px); box-shadow:0 20px 60px #0004; padding:26px; scrollbar-width:thin; scrollbar-color:#494052 transparent; }
.close-detail { position:absolute; top:10px; right:10px; width:26px; height:26px; font-size:20px; }
.detail-meta { font-size:10px; color:var(--node-color); margin:0 23px 9px 0; letter-spacing:.4px; }
.detail-panel h2 { font-size:20px; font-weight:550; line-height:1.5; margin:0 0 12px; }
.detail-description { font-size:11px; color:#bcb3ca; line-height:1.9; margin:0 0 18px; }
.detail-stats { display:flex; align-items:baseline; gap:8px; padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.detail-stats strong { font-size:31px; font-weight:400; line-height:1; }
.detail-stats span { color:#aaa0ba; font-size:10px; }
.detail-hint { font-size:10px; color:#9b8faf; margin:10px 0; }
.start-diagnosis { display:flex; justify-content:space-between; background:#c2acf5; color:#171023; font-size:12px; font-weight:550; border-radius:5px; padding:10px 12px; margin:18px 0; }
.start-diagnosis:hover { background:#d1bfff; }
.detail-section { border-top:1px solid var(--line); margin-top:18px; padding-top:14px; }
.detail-section h3 { color:#a99ab9; font-size:10px; font-weight:500; letter-spacing:1px; margin:0 0 8px; display:flex; justify-content:space-between; }
.edge-link { display:block; text-align:left; border:0; border-radius:5px; background:transparent; width:100%; padding:8px 0; }
.edge-link:hover { background:#ffffff08; }
.edge-name { display:flex; gap:7px; align-items:baseline; font-size:11px; }
.edge-name::before { content:""; display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--node-color); flex-shrink:0; }
.edge-name small { font-size:9px; color:#a99bb7; white-space:nowrap; margin-left:auto; }
.edge-reason { font-size:10px; color:#9789a8; line-height:1.7; margin:4px 0 0 12px; }
.detail-empty { color:#9b8fa9; font-size:11px; margin:10px 0; }
.detail-section summary { font-size:11px; cursor:pointer; color:#cfc2df; }
.detail-section ul { padding-left:16px; font-size:11px; color:#b4a8c4; }
.detail-section p { font-size:11px; color:#b4a8c4; }
.detail-browse { display:block; margin-top:17px; color:#bca4df; font-size:10px; }
.has-selection .intro { opacity:0; visibility:hidden; }
.has-selection .graph-stage { left:7%; right:27%; }
.has-selection .grade-axis { right:0; }
.graph-message { position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); color:#bfb2d1; padding:18px; background:#17121ee8; border:1px solid var(--line); border-radius:7px; font-size:12px; pointer-events:none; }
.load-error { position:absolute; z-index:10; top:30%; left:50%; transform:translateX(-50%); width:min(420px,90%); padding:26px; background:#221c2f; border:1px solid #ffffff30; border-radius:10px; }
.load-error h2 { font-size:17px; }
.load-error p { color:#bdb1cd; font-size:12px; }
.load-error button { background:#c2acf5; border:0; color:#191321; border-radius:4px; padding:8px 13px; margin-right:20px; }
.load-error a { font-size:12px; }
@media (min-width:1500px) { .intro { top:17%; } .legend { bottom:55px; } .graph-stage { right:3%; } }
@media (max-width:1100px) and (min-width:761px) {
  .intro { top:16%; width:50%; } h1 { font-size:41px; } .intro-description { max-width:320px; } .desktop-break { display:none; }
  .stats { gap:20px; } .stats>div { gap:7px; } .legend { width:280px; } .search-panel { width:270px; }
  .detail-panel { width:300px; padding:22px; } .has-selection .graph-stage { left:0; right:32%; }
}
@media (max-height:850px) and (min-width:761px) {
  .header { height:80px; }
  #explorer { height:calc(100svh - 125px); min-height:560px; }
  .intro { top:5%; }
  .eyebrow { margin-bottom:16px; }
  h1 { font-size:40px; line-height:1.35; margin-bottom:16px; }
  .intro-description { font-size:11px; line-height:2; }
  .stats { margin:20px 0 18px; }
  .explore-example { padding:9px 13px; }
  .intro-note { display:none; }
  .legend { bottom:25px; }
  .graph-caption { top:62px; }
}
@media (max-width:760px) {
  .header { height:82px; padding:0 24px; } .brand { font-size:21px; gap:9px; } .brand svg { width:30px; height:30px; } .brand-caption { font-size:8px; letter-spacing:2px; }
  .header nav { gap:17px; font-size:11px; } .diagnose-link { padding:7px 11px; } .diagnose-link span { margin-left:8px; }
  #explorer { min-height:1120px; height:auto; padding-top:64px; }
  .search-panel { top:6px; left:24px; right:24px; width:auto; } .search-box { height:42px; } .search-box input { font-size:12px; }
  .intro { position:relative; left:auto; top:auto; width:auto; margin:28px 28px 0; } .eyebrow { font-size:9px; margin-bottom:17px; letter-spacing:2px; }
  h1 { font-size:clamp(33px,7.8vw,48px); line-height:1.38; margin-bottom:18px; } .intro-description { font-size:11px; max-width:390px; } .desktop-break { display:none; }
  .stats { margin:22px 0 19px; gap:25px; } .stats strong { font-size:28px; } .stats>div { gap:9px; } .intro-note { font-size:9px; }
  .graph-stage { top:470px; bottom:auto; height:410px; left:0; right:0; background:radial-gradient(ellipse at center,#25203950,transparent 68%); }
  .graph-caption { top:5px; font-size:8px; } .grade-axis { right:20px; top:19%; bottom:17%; font-size:8px; }
  .legend { left:24px; right:24px; bottom:58px; width:auto; padding:15px 18px 10px; }
  .domains { grid-template-columns:1fr 1fr; column-gap:30px; } .domain-button { font-size:11px; }
  .graph-controls { right:24px; bottom:244px; } .graph-help { bottom:27px; left:24px; right:24px; text-align:center; font-size:9px; }
  .footer { margin:0 24px; justify-content:center; min-height:50px; text-align:center; font-size:8px; } .footer>span:last-child { display:none; }
  .has-selection .intro { display:none; }
  .has-selection #explorer { display:flex; flex-direction:column; min-height:0; padding:64px 0 25px; }
  .has-selection .graph-stage { position:relative; top:auto; left:auto; right:auto; height:400px; flex-shrink:0; }
  .has-selection .grade-axis { right:24px; }
  .has-selection .detail-panel { position:relative; top:auto; right:auto; width:auto; max-height:none; margin:8px 24px 0; padding:24px; overflow:visible; order:2; }
  .has-selection .legend { position:relative; bottom:auto; left:auto; right:auto; margin:18px 24px 0; order:3; }
  .has-selection .graph-controls { top:421px; bottom:auto; }
  .has-selection .graph-help { position:relative; bottom:auto; left:auto; right:auto; margin:15px 24px 0; order:4; }
  .has-selection .graph-message { top:260px; }
  .detail-panel h2 { font-size:22px; } .detail-description,.edge-name,.detail-section summary,.detail-section ul,.detail-section p { font-size:12px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; } }