: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;
    }

    h3{
      margin:14px 0 6px 0;
      font-size:18px;
      line-height:1.3;
    }

    p{
      margin:10px 0;
    }

    ul,
    ol{
      margin:8px 0 8px 22px;
    }

    li{
      margin:6px 0;
    }

    a{
      color:var(--link);
      text-decoration:none;
    }

    a:hover{
      text-decoration:underline;
    }

    .toc{
      margin:0;
      padding-left:18px;
      columns:1;
    }

    .toc li{
      margin:6px 0;
    }

    .contact{
      white-space:normal;
    }

    .footer{
      border-top:1px solid var(--border);
      color:var(--muted);
      font-size:13px;
      padding-top:18px;
    }

    @media (min-width:860px){
      .toc{
        columns:2;
      }
    }