:root{
      --text:#0f172a;
      --muted:#475569;
      --border:#e2e8f0;
      --bg:#ffffff;
      --panel:#f8fafc;
      --link:#2563eb;
      --max: 920px;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family: Arial, Helvetica, sans-serif;
      color:var(--text);
      background:var(--bg);
      line-height:1.6;
    }
    header{
      border-bottom:1px solid var(--border);
      background:linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    }
    .wrap{
      max-width:var(--max);
      margin:0 auto;
      padding:24px 18px;
    }
    h1{
      margin:0 0 6px 0;
      font-size:32px;
      line-height:1.2;
      letter-spacing:-0.02em;
    }
    .subtitle{
      margin:0;
      color:var(--muted);
      font-size:15px;
    }
    main{padding: 14px 0 40px 0;}
    .card{
      background:var(--panel);
      border:1px solid var(--border);
      border-radius:14px;
      padding:16px 16px;
      margin:18px 0;
    }
    h2{
      margin:22px 0 8px 0;
      font-size:22px;
      line-height:1.3;
    }
    p{margin:10px 0;}
    ul{margin:8px 0 8px 22px;}
    li{margin:6px 0;}
    a{
      color:var(--link);
      text-decoration:none;
    }
    a:hover{text-decoration:underline;}
    .note{
      color:var(--muted);
      font-size:14px;
    }
    .footer{
      border-top:1px solid var(--border);
      color:var(--muted);
      font-size:13px;
      padding-top:18px;
      margin-top:22px;
    }
    .toc{
      margin:0;
      padding-left:18px;
      columns:1;
    }
    .toc li{margin:6px 0;}
    @media (min-width: 860px){
      .toc{columns:2;}
    }