*{box-sizing:border-box;margin:0;padding:0}
  :root{
    --bg:#050810;
    --card:rgba(255,255,255,.034);
    --line:rgba(120,165,255,.16);
    --txt:#dce7f8;
    --dim:#8ea3c4;
    --cyan:#38bdf8;
    --violet:#c084fc;
    --amber:#fbbf24;
    --rose:#fb7185;
  }
  html,body{height:100%}
  body{
    background:
      radial-gradient(950px 520px at 12% -5%, rgba(56,189,248,.10), transparent 62%),
      radial-gradient(950px 520px at 88% 0%, rgba(192,132,252,.10), transparent 62%),
      var(--bg);
    color:var(--txt);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
    min-height:100vh;
    padding:26px 18px 60px;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:1200px;margin:0 auto}

  /* ---------- 标题 ---------- */
  header h1{
    font-size:clamp(20px,2.7vw,29px);
    font-weight:750;
    letter-spacing:.4px;
    background:linear-gradient(92deg,#7dd3fc,#c4b5fd 52%,#fbbf24);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  header p{margin-top:9px;color:var(--dim);font-size:14px;line-height:1.75}
  header .kbd{
    display:inline-block;padding:1px 7px;border:1px solid var(--line);
    border-radius:6px;font-size:12px;color:#a9bfe0;background:rgba(255,255,255,.03);
  }

  /* ---------- 工具栏 ---------- */
  .toolbar{
    display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;
    margin:20px 0 18px;padding:13px 18px;
    background:var(--card);border:1px solid var(--line);border-radius:14px;
    backdrop-filter:blur(8px);
  }
  .sw{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13.5px;color:#b9cbe6;user-select:none}
  .sw input{appearance:none;width:38px;height:21px;border-radius:20px;background:#1d2940;
    border:1px solid rgba(120,165,255,.25);position:relative;transition:.22s;cursor:pointer}
  .sw input::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;
    background:#7f92b0;transition:.22s}
  .sw input:checked{background:rgba(56,189,248,.25);border-color:rgba(56,189,248,.6)}
  .sw input:checked::after{left:19px;background:#5fd0ff;box-shadow:0 0 10px rgba(95,208,255,.8)}

  .rng{display:flex;align-items:center;gap:10px;font-size:13.5px;color:#b9cbe6}
  .rng input[type=range]{
    appearance:none;width:170px;height:4px;border-radius:4px;
    background:linear-gradient(90deg,#38bdf8,#c084fc);outline:none;cursor:pointer;
  }
  .rng input[type=range]::-webkit-slider-thumb{
    appearance:none;width:16px;height:16px;border-radius:50%;background:#eaf4ff;
    border:2px solid #38bdf8;cursor:pointer;box-shadow:0 0 10px rgba(56,189,248,.7)}
  .rng input[type=range]::-moz-range-thumb{
    width:14px;height:14px;border-radius:50%;background:#eaf4ff;border:2px solid #38bdf8;cursor:pointer}

  button{
    padding:8px 16px;border-radius:10px;cursor:pointer;font-family:inherit;
    background:rgba(120,165,255,.12);border:1px solid rgba(120,165,255,.3);
    color:#cfe2ff;font-size:13.5px;transition:.18s;
  }
  button:hover{background:rgba(120,165,255,.22);border-color:rgba(140,190,255,.55)}
  #btnReset{margin-left:auto}

  /* ---------- 卡片 ---------- */
  .stage{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  @media(max-width:900px){.stage{grid-template-columns:1fr}}

  .card{
    background:var(--card);border:1px solid var(--line);border-radius:18px;
    overflow:hidden;position:relative;transition:.25s;
  }
  .card::before{
    content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;
    background:linear-gradient(160deg,rgba(56,189,248,.085),transparent 46%);
  }
  .card.pyrrole::before{background:linear-gradient(160deg,rgba(192,132,252,.10),transparent 46%)}
  .card:hover{border-color:rgba(140,190,255,.36);box-shadow:0 14px 44px -14px rgba(80,150,255,.4)}

  .head{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 18px 8px;position:relative;z-index:2;
  }
  .head h2{font-size:16.5px;font-weight:660;letter-spacing:.3px}
  .head h2 small{color:var(--dim);font-weight:400;font-size:12.5px;margin-left:6px}

  .badge{font-size:12.5px;font-weight:700;padding:4px 11px;border-radius:20px;letter-spacing:.4px}
  .badge.sp2{color:#8ee7ff;background:rgba(56,189,248,.14);border:1px solid rgba(56,189,248,.45)}
  .card.pyrrole .badge.sp2{color:#dcb6ff;background:rgba(192,132,252,.14);border:1px solid rgba(192,132,252,.45)}

  canvas{display:block;width:100%;height:390px;cursor:grab;touch-action:none}
  @media(max-width:900px){canvas{height:340px}}

  .body{padding:6px 18px 18px;position:relative;z-index:2}

  .stats{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .stat{background:rgba(255,255,255,.03);border:1px solid rgba(140,180,255,.1);
    border-radius:10px;padding:9px 11px}
  .stat b{display:block;font-size:11.5px;color:var(--dim);font-weight:500;letter-spacing:.3px}
  .stat span{display:block;margin-top:4px;font-size:13.5px;font-weight:600;color:#e6f0ff}
  .hot{color:#fb923c !important}
  .cool{color:#7dd3fc !important}
  .cold{color:#c4b5fd !important}

  /* 密度计 */
  .meter{margin-top:14px}
  .meter .row{display:flex;justify-content:space-between;font-size:12.3px;color:var(--dim);margin-bottom:6px}
  .meter .row b{color:#e6f0ff;font-weight:600}
  .mbar{height:9px;border-radius:8px;background:rgba(255,255,255,.07);overflow:hidden;position:relative}
  .mbar i{display:block;height:100%;border-radius:8px;transition:width .18s linear, background .3s;
    background:linear-gradient(90deg,#38bdf8,#fbbf24,#ef4444)}
  .card.pyrrole .mbar i{background:linear-gradient(90deg,#38bdf8,#a78bfa)}

  /* 热力图图例 */
  .legend{margin-top:13px;display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--dim)}
  .legend .grad{flex:1;height:8px;border-radius:6px;
    background:linear-gradient(90deg,#1e3a8a,#06b6d4,#22c55e,#facc15,#ef4444);
    border:1px solid rgba(255,255,255,.09)}

  .note{
    margin-top:13px;font-size:12.8px;line-height:1.78;color:#9fb4d4;
    border-left:2px solid rgba(120,165,255,.32);padding-left:11px;
  }
  .note em{font-style:normal;color:#7dd3fc}
  .card.pyrrole .note em{color:#d8b4fe}

  /* ---------- 结论 ---------- */
  .conclusion{
    margin-top:22px;padding:20px 24px;border-radius:16px;
    background:linear-gradient(120deg,rgba(56,189,248,.09),rgba(192,132,252,.09));
    border:1px solid rgba(140,180,255,.2);
  }
  .conclusion h3{font-size:15.5px;margin-bottom:12px;color:#cfe2ff;letter-spacing:.3px}
  .conclusion p{font-size:13.6px;line-height:1.95;color:#a9bfe0}
  .conclusion strong{color:#fff}
  .conclusion .em-cy{color:#7dd3fc;font-weight:600}
  .conclusion .em-vi{color:#d8b4fe;font-weight:600}

  .cmp{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
  .pill{
    padding:9px 16px;border-radius:11px;font-size:13.5px;font-variant-numeric:tabular-nums;
    background:rgba(0,0,0,.3);border:1px solid rgba(140,180,255,.2);color:#dbe8ff;
  }
  .pill b{color:#7dd3fc}
  .pill.weak b{color:#c4b5fd}