* { box-sizing: border-box; } html, body { margin:0; }
    body { font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif; background:#f4f7fb; color:#172033; line-height:1.72; }
    .app { display:flex; min-height:100vh; } .sidebar { width:280px; padding:22px 16px; background:#fff; border-right:1px solid #d8e0ec; position:sticky; top:0; height:100vh; overflow:auto; }
    .sidebar h2 { margin:0 0 14px; font-size:18px; color:#0f766e; } .sidebar a { display:block; color:#334155; text-decoration:none; padding:8px 10px; border-radius:6px; margin-bottom:4px; font-size:14px; }
    .sidebar a:hover,.sidebar a.active { background:#e8f5f2; color:#0f766e; font-weight:700; } .main { flex:1; padding:36px min(5vw,56px); min-width:0; }
    .article { max-width:980px; margin:0 auto; background:#fff; border:1px solid #d8e0ec; border-radius:8px; padding:30px; box-shadow:0 10px 28px rgba(15,23,42,.06); }
    h1 { margin:0 0 14px; font-size:30px; color:#111827; letter-spacing:0; } h2 { margin-top:26px; color:#0f766e; font-size:22px; }
    .summary { background:#eef8f6; border-left:4px solid #0f766e; padding:14px 16px; border-radius:6px; }
    .diagram { margin:20px 0; padding:12px; border:1px solid #d8e0ec; border-radius:8px; background:#f8fafc; }
    table { width:100%; border-collapse:collapse; margin:16px 0; } th,td { border:1px solid #d8e0ec; padding:10px; text-align:left; vertical-align:top; } th { background:#f1f5f9; }
    .footer-nav { margin-top:28px; } .footer-nav a { display:inline-block; padding:10px 14px; border-radius:6px; background:#0f766e; color:#fff; text-decoration:none; font-weight:700; }
    footer { margin-top:22px; color:#64748b; font-size:13px; } @media (max-width:820px) { .sidebar { position:static; height:auto; } .main { padding:20px 12px; } .article { padding:20px; } h1 { font-size:26px; } }