:root { --ink:#06182f; --ink2:#102f52; --paper:#eef2f6; --white:#fff; --muted:#5a7085; --gold:#d7a44c; --cyan:#42bfd4; --teal:#238b91; --purple:#7460b5; --coral:#d76a55; --line:#cbd6df; }
    * { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:"Microsoft YaHei",Arial,sans-serif; line-height:1.65; } button { font:inherit; } a { color:inherit; }
    .hero { position:relative; min-height:470px; overflow:hidden; padding:28px max(40px,calc((100% - 1450px)/2)) 94px; color:#fff; background:radial-gradient(circle at 81% 12%,#255a79 0,#123b5b 29%,#071c35 68%,#041326 100%); }.hero::before { content:""; position:absolute; inset:0; opacity:.15; background-image:linear-gradient(#9ab4c522 1px,transparent 1px),linear-gradient(90deg,#9ab4c522 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(#000,transparent); }.hero::after { content:""; position:absolute; right:7%; bottom:-138px; width:580px; height:300px; border:1px solid #d7a44c6e; border-radius:50%; box-shadow:-58px -34px 0 -1px #42bfd44e,-126px -68px 0 -2px #ffffff1a; transform:rotate(-10deg); }
    .hero-top { position:relative; z-index:1; display:flex; justify-content:space-between; color:#c4d7e4; font-size:11px; font-weight:800; letter-spacing:.14em; }.paper-link { padding:7px 10px; border:1px solid #87a4b5; color:#e5bb6d; text-decoration:none; }.paper-link:hover { border-color:#e5bb6d; background:#ffffff12; }.hero-copy { position:relative; z-index:1; max-width:900px; padding-top:86px; }.kicker { margin:0 0 12px; color:#e5bb6d; font-size:11px; font-weight:800; letter-spacing:.16em; }.hero h1 { margin:0; font-size:clamp(40px,5.7vw,74px); line-height:1.03; letter-spacing:-.06em; }.hero h1 em { color:#e6b353; font-style:normal; }.hero p { max-width:670px; margin:17px 0 0; color:#d2e0e9; font-size:16px; }.abstract-button { margin-top:22px; padding:10px 15px; border:1px solid #8aa9bf; background:#123252; color:#fff; cursor:pointer; }.abstract-button:hover { border-color:#e6b353; }.abstract-button b { margin-right:8px; color:#e6b353; font-size:17px; }.abstract { display:none; max-width:840px; margin-top:15px; padding:15px 19px; border-left:3px solid var(--gold); background:#0a2037dc; color:#d9e6ee; font-size:15px; }.abstract p { margin:0; color:inherit; }
    .nav { position:relative; z-index:3; display:flex; gap:5px; width:min(1450px,calc(100% - 48px)); margin:-29px auto 0; padding:7px; background:#fff; box-shadow:0 14px 34px #09233d20; }.nav button { flex:1; padding:12px 15px; border:0; background:transparent; color:#8695a2; text-align:left; font-size:13px; letter-spacing:.07em; }.nav .active { color:var(--ink); background:#eaf3f5; font-weight:900; }.nav .pending { color:#a9b3bc; }
    main { width:min(1510px,calc(100% - 48px)); margin:auto; padding:82px 0 62px; }.intro { display:flex; justify-content:space-between; gap:35px; align-items:end; margin-bottom:43px; }.intro h2 { margin:0; font-size:37px; letter-spacing:-.045em; }.intro p { max-width:530px; margin:0; color:var(--muted); font-size:14px; }.eyebrow { margin:0 0 10px; color:#75889a; font-size:10px; font-weight:900; letter-spacing:.14em; }.eyebrow span { display:inline-block; width:26px; height:2px; margin:0 8px 3px 0; background:var(--gold); }
    .flow { display:grid; grid-template-columns:1fr 1.28fr 1fr; gap:24px; align-items:start; }.stage { --accent:var(--teal); --soft:#e7f5f5; min-width:0; padding:19px; border-top:5px solid var(--accent); background:linear-gradient(180deg,var(--soft),#fff 34%); box-shadow:0 9px 26px #1739540c; }.stage.training { --accent:var(--purple); --soft:#efecf8; }.stage.testing { --accent:var(--coral); --soft:#fbece8; }.stage-head { display:flex; gap:12px; min-height:76px; }.stage-no { color:var(--accent); font-size:12px; font-weight:900; letter-spacing:.12em; }.stage-head h3 { margin:0 0 4px; font-size:23px; letter-spacing:-.035em; }.stage-head p { margin:0; color:var(--muted); font-size:12px; line-height:1.45; }
    .stage-stack { display:flex; flex-direction:column; align-items:center; }.node { width:100%; position:relative; padding:15px 16px; border:1px solid #c8d4de; border-left:4px solid var(--accent); background:#fff; color:var(--ink); text-align:left; cursor:pointer; box-shadow:0 4px 10px #14314d0b; transition:.18s; }.node:hover,.node.active { transform:translateY(-2px); border-color:var(--accent); box-shadow:0 9px 19px #1c497019; }.node-type { display:block; margin-bottom:5px; color:var(--accent); font-size:10px; font-weight:900; letter-spacing:.11em; }.node strong { display:block; padding-right:26px; font-size:16px; }.node small { display:block; margin-top:4px; color:#698093; font-size:12px; line-height:1.4; }.node .symbol { position:absolute; right:15px; top:14px; color:var(--accent); font-size:18px; }.arrow { width:2px; height:31px; background:var(--accent); position:relative; }.arrow::after { content:""; position:absolute; left:-4px; bottom:-1px; border-left:5px solid transparent; border-right:5px solid transparent; border-top:7px solid var(--accent); }.algorithm-label { width:100%; margin:15px 0 10px; text-align:center; color:var(--accent); font-size:10px; font-weight:900; letter-spacing:.1em; }.algorithm-row { display:grid; grid-template-columns:1fr 20px 1fr 20px 1fr; align-items:stretch; width:100%; }.algorithm-box { padding:11px; border:1px solid #d7cfea; background:#fff; color:#3b3158; cursor:pointer; text-align:left; }.algorithm-box:hover { border-color:var(--accent); }.algorithm-box span { display:block; color:#8777ab; font-size:9px; font-weight:900; letter-spacing:.08em; }.algorithm-box strong { display:block; margin:5px 0; font-size:13px; line-height:1.35; }.algorithm-box small { display:block; color:#796e8c; font-size:10px; line-height:1.35; }.algorithm-link { display:grid; place-items:center; color:#9c8abf; font-size:14px; }.algorithm-link::before { content:""; position:absolute; width:17px; height:1px; background:#b9a9d3; }.algorithm-link span { position:relative; z-index:1; background:#f1eef8; }.decision { width:138px; height:96px; display:grid; place-items:center; margin:14px auto; padding:17px 24px; border:0; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); background:var(--accent); color:#fff; text-align:center; cursor:pointer; font-size:12px; font-weight:800; line-height:1.3; }.decision:hover { filter:brightness(.9); }.branch-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; width:100%; }.branch { padding:11px; border-top:3px solid var(--accent); background:#fff; }.branch.update { border-color:var(--teal); }.branch span { display:block; color:#8774ab; font-size:9px; font-weight:900; letter-spacing:.08em; }.branch.update span { color:var(--teal); }.branch p { margin:5px 0 9px; color:#718599; font-size:11px; line-height:1.45; }.branch .node { padding:12px; }.branch .node strong { font-size:14px; }.test-grid { display:grid; grid-template-columns:1fr 20px 1fr; align-items:center; width:100%; }.test-card { min-height:108px; padding:13px; border:1px solid #e4c9c2; border-top:3px solid var(--coral); background:#fff; color:var(--ink); text-align:left; cursor:pointer; }.test-card:hover { border-color:var(--coral); }.test-card span { display:block; color:var(--coral); font-size:9px; font-weight:900; letter-spacing:.08em; }.test-card strong { display:block; margin:6px 0; font-size:14px; line-height:1.3; }.test-card small { display:block; color:#728599; font-size:10px; line-height:1.35; }.test-link { display:grid; place-items:center; color:#d39180; font-size:14px; }.test-link::before { content:""; position:absolute; width:17px; height:1px; background:#dda697; }
    .detail { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr); gap:43px; margin-top:58px; padding:25px clamp(24px,4vw,54px) clamp(30px,4vw,50px); background:linear-gradient(125deg,#08213c,#123c59); color:#fff; box-shadow:0 24px 45px #09203826; }.detail-meta { display:flex; justify-content:space-between; grid-column:1/-1; padding-bottom:14px; border-bottom:1px solid #ffffff28; color:#e3b458; font-size:10px; font-weight:900; letter-spacing:.13em; }.detail-title { margin:0 0 13px; font-size:clamp(31px,3.6vw,48px); line-height:1.06; letter-spacing:-.05em; }.detail-lead { margin:0 0 17px; color:#d8e7ef; font-size:17px; line-height:1.7; }.detail-body { color:#b9cbd8; font-size:16px; line-height:1.78; }.detail-body p { margin:10px 0; }.formula { margin:17px 0 0; padding:11px 14px; border-left:3px solid var(--gold); background:#204b65; color:#e8f0f4; font-family:Georgia,"Times New Roman",serif; font-size:14px; }.evidence-title { margin:0 0 9px; color:#95b5c7; font-size:10px; font-weight:900; letter-spacing:.13em; }.evidence-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.evidence { display:block; padding:7px; border:1px solid #51728a; background:#102f49; text-decoration:none; }.evidence:hover { border-color:var(--gold); }.evidence img { display:block; width:100%; height:116px; object-fit:contain; background:#fff; }.evidence span { display:block; padding:6px 2px 0; color:#d6e4ea; font-size:10px; font-weight:700; line-height:1.35; }.download-title { margin:17px 0 8px; color:#95b5c7; font-size:10px; font-weight:900; letter-spacing:.13em; }.downloads { display:flex; flex-wrap:wrap; gap:7px; }.downloads a { padding:6px 8px; border:1px solid #66869a; color:#dce9ee; background:#123752; text-decoration:none; font-size:10px; font-weight:800; }.downloads a:hover { border-color:var(--gold); }.downloads a::before { content:"↓ "; color:var(--gold); }
    /* Model use and training: clinical worksheet rather than dashboard chrome. */
    .module-view { display:none; width:min(1510px,calc(100% - 48px)); margin:auto; padding:78px 0 65px; }.module-view.active { display:block; }.module-intro { display:flex; justify-content:space-between; gap:30px; align-items:end; margin-bottom:34px; }.module-intro h2 { margin:0; font-size:40px; letter-spacing:-.045em; }.module-intro p { max-width:600px; margin:0; color:var(--muted); font-size:16px; }.workbench { display:grid; grid-template-columns:minmax(480px,1fr) minmax(480px,.9fr); gap:28px; align-items:start; }.tool-card { padding:30px; border:1px solid #d4dfe6; border-top:7px solid var(--teal); background:#fff; box-shadow:0 14px 34px #1637510d; }.tool-card h3 { margin:0 0 7px; font-size:27px; letter-spacing:-.03em; }.tool-card > p { margin:0 0 20px; color:var(--muted); font-size:15px; }.disease-tabs { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; margin:18px 0; }.disease-tab { min-height:62px; padding:12px 14px; border:1px solid #cbd8e1; background:#fbfcfd; color:#496276; text-align:left; cursor:pointer; font-size:14px; line-height:1.35; }.disease-tab b { display:block; color:#193c55; font-size:16px; }.disease-tab small { display:block; margin-top:2px; color:#728697; font-size:12px; }.disease-tab.active { border-color:var(--teal); background:#e6f4f4; color:#145d66; box-shadow:inset 4px 0 0 var(--teal); font-weight:800; }.model-toggle { display:flex; gap:9px; margin:16px 0 18px; }.model-toggle button { flex:1; padding:11px; border:1px solid #cbd8e1; background:#fff; color:#50697d; cursor:pointer; font-size:15px; }.model-toggle button.active { border-color:var(--purple); background:#efecf8; color:#4c3a84; font-weight:800; }.import-bar { display:flex; flex-wrap:wrap; gap:9px; margin:15px 0; }.small-btn,.download-example { padding:9px 11px; border:1px solid #bacbd6; background:#fff; color:#315c74; cursor:pointer; text-decoration:none; font-size:13px; font-weight:800; }.small-btn:hover,.download-example:hover { border-color:#136f75; background:#eef8f8; }.file-status { margin:10px 0; color:#587589; font-size:13px; }.row-picker { display:none; gap:8px; margin:8px 0; }.row-picker select { min-width:0; flex:1; padding:9px; border:1px solid #cbd8e1; color:#456176; font-size:14px; }.schema-note { padding:13px 15px; border-left:4px solid var(--teal); background:#eef7f7; color:#365b68; font-size:14px; line-height:1.6; }.feature-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:19px; }.field { padding:12px; border:1px solid #d7e0e6; background:#fbfcfd; }.field label { display:block; margin-bottom:7px; color:#264f68; font-size:14px; font-weight:800; overflow-wrap:anywhere; }.field input[type=number],.field select { width:100%; padding:9px; border:1px solid #b9cbd7; background:#fff; color:#173a53; font-size:15px; }.range-guide { display:block; margin-top:6px; color:#6d8495; font-size:12px; line-height:1.35; }.group-field { grid-column:span 1; }.group-field select { cursor:pointer; }.action-row { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:20px; }.primary-btn { padding:12px 18px; border:0; background:#0b5262; color:#fff; cursor:pointer; font-size:15px; font-weight:800; }.primary-btn:hover { background:#083e4b; }.muted-button { padding:11px 13px; border:1px solid #aebfc9; background:#fff; color:#375e75; cursor:pointer; font-size:14px; }.result-card { min-height:0; padding:31px; border-top:7px solid var(--gold); background:linear-gradient(140deg,#071f36,#123e59); color:#fff; box-shadow:0 14px 30px #09233e22; }.result-card h3 { margin:0; font-size:29px; }.result-caption { margin:7px 0 19px; color:#c4dbe4; font-size:14px; }.result-empty { display:grid; place-items:center; min-height:250px; color:#b8d0dc; text-align:center; font-size:16px; }.prediction-metrics { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.prediction-metric { padding:15px; border:1px solid #62899d; background:#103752; }.prediction-metric span { display:block; color:#b8d4df; font-size:12px; font-weight:800; letter-spacing:.05em; }.prediction-metric strong { display:block; margin-top:6px; color:#fff; font-size:28px; line-height:1.15; }.prediction-metric small { color:#c5dae3; font-size:12px; }.curve-canvas { width:100%; height:auto; aspect-ratio:16/8; display:block; margin-top:21px; border:1px solid #64889c; background:#0c2c47; }.milestone-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px; }.milestone { padding:10px; border-top:2px solid #42bfd4; background:#103752; }.milestone b { display:block; color:#b9d7e1; font-size:12px; }.milestone strong { display:block; margin-top:2px; font-size:19px; }.scenario-panel { margin-top:15px; padding:14px; border-left:3px solid #e7ba63; background:#0e334d; }.scenario-panel h4 { margin:0 0 6px; color:#f0ca7b; font-size:15px; }.scenario-panel p { margin:0 0 9px; color:#c5dbe5; font-size:13px; line-height:1.55; }.scenario-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; }.scenario { padding:8px; border:1px solid #49748b; color:#dceaf0; font-size:12px; }.scenario b { display:block; color:#fff; font-size:15px; }.treatment-canvas { width:100%; height:auto; aspect-ratio:16/7; display:block; margin-top:12px; border:1px solid #49748b; background:#092940; }.training-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; }.training-settings { display:grid; grid-template-columns:1fr 1fr; gap:15px; margin:18px 0; }.training-settings label { display:block; color:#375e75; font-size:13px; font-weight:800; }.training-settings select,.training-settings input { width:100%; margin-top:6px; padding:10px; border:1px solid #b9cbd7; color:#294a61; font-size:15px; }.upload-box { display:grid; place-items:center; min-height:160px; margin:18px 0; padding:20px; border:1px dashed #7f9faf; background:#f7fbfc; color:#5e7b8f; text-align:center; cursor:pointer; font-size:14px; }.upload-box strong { display:block; color:#1d536a; font-size:17px; }.training-result { padding:19px; border-left:4px solid var(--purple); background:#f0edf8; color:#403567; font-size:15px; line-height:1.65; }.manifest { display:none; margin-top:16px; padding:15px; border:1px solid #d3ddea; background:#f8fbfd; color:#466278; font-size:14px; }.module-note { margin-top:28px; padding:16px 19px; border-left:4px solid var(--gold); background:#e8f0f3; color:#405a6b; font-size:14px; }
    .model-choice { margin:15px 0 18px; padding:12px 14px; border-left:4px solid var(--purple); background:#f0edf8; color:#43396c; font-size:14px; line-height:1.55; }.model-choice b { display:block; font-size:17px; }.model-choice small { color:#665d84; font-size:12px; }
    @media(max-width:1100px){ .flow { grid-template-columns:1fr; gap:18px; }.stage { padding:20px; }.stage-stack { display:grid; grid-template-columns:repeat(auto-fit,minmax(245px,1fr)); gap:12px; align-items:start; }.arrow { display:none; }.algorithm-row,.branch-row,.test-grid { grid-template-columns:1fr; gap:9px; }.algorithm-link,.test-link { height:16px; }.algorithm-link::before,.test-link::before { width:1px; height:14px; }.decision { margin:4px auto; }.detail { grid-template-columns:1fr; gap:30px; }.workbench,.training-layout { grid-template-columns:1fr; } }
    @media(max-width:600px){ .hero { min-height:420px; padding:24px 24px 72px; }.hero-top span:last-child { display:none; }.hero-copy { padding-top:64px; }.hero p { font-size:14px; }.nav { width:calc(100% - 28px); overflow:auto; }.nav button { min-width:130px; }.intro { display:block; }.intro p { margin-top:12px; } main { width:calc(100% - 32px); padding-top:58px; }.flow { gap:14px; }.stage-stack { grid-template-columns:1fr; }.detail { margin-top:35px; padding:22px; }.evidence-grid { grid-template-columns:1fr; } }
    /* Prominent validation state for values outside the observed training range. */
    .file-status.input-alert { padding:13px 15px; border-left:5px solid #d92d3b; background:#fff0f1; color:#9d1722; font-size:16px; font-weight:700; line-height:1.55; }
    .field input.input-invalid,.field input:out-of-range { border:2px solid #d92d3b; background:#fff5f5; outline:3px solid #f8c9cf; }
    .field.field-invalid,.field:has(input:out-of-range) { border:2px solid #d92d3b; background:#fff5f5; box-shadow:0 0 0 2px #f8d8dc; }
    .field:has(input:out-of-range) .range-guide::after { content:'  ← 超出允许范围'; color:#b21624; font-weight:900; }
    .primary-btn:disabled { cursor:wait; opacity:.65; }
    .training-progress { margin:14px 0 4px; padding:12px 14px; border-left:4px solid #604fa3; background:#f0edf8; color:#403567; }.training-progress[hidden] { display:none; }.training-progress-head { display:flex; justify-content:space-between; gap:12px; font-size:13px; line-height:1.45; }.training-progress-head span { color:#746999; }.training-progress-track { position:relative; height:8px; margin-top:10px; overflow:hidden; border-radius:99px; background:#d8d1ee; }.training-progress-track i { position:absolute; top:0; bottom:0; width:36%; border-radius:99px; background:linear-gradient(90deg,#604fa3,#a798de,#604fa3); animation:mcmc-progress 1.25s linear infinite; } @keyframes mcmc-progress { from { left:-36%; } to { left:100%; } }