:root{
      --ink:#111827;
      --muted:#6b7280;
      --card:#ffffff;
      --border:#e5e7eb;
      --soft:#f9fafb;
    }

    body{
      color: var(--ink);
      background: linear-gradient(180deg, #ffffff 0%, #fafafa 60%, #ffffff 100%);
    }

    .page-wrap{
      padding: 48px 0 64px;
    }

    .hero{
      background: radial-gradient(1200px 400px at 20% 0%, rgba(99,102,241,.14) 0%, rgba(99,102,241,0) 60%),
                  radial-gradient(900px 360px at 90% 20%, rgba(236,72,153,.12) 0%, rgba(236,72,153,0) 55%);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 28px;
    }

    .hero .kicker{
      color: var(--muted);
      letter-spacing: .12em;
      text-transform: uppercase;
      font-size: .78rem;
      font-weight: 600;
    }

    .hero h1{
      font-weight: 800;
      line-height: 1.1;
      margin: 10px 0 8px;
    }

    .hero .sub{
      color: var(--muted);
      font-size: 1.05rem;
      max-width: 70ch;
      margin: 0;
    }

    .meta{
      margin-top: 14px;
      color: var(--muted);
      font-size: .92rem;
      display: flex;
      flex-wrap: wrap;
      gap: 10px 16px;
      align-items: center;
    }

    .meta .dot{
      width: 4px; height: 4px; border-radius: 999px;
      background: #d1d5db;
      display: inline-block;
      margin: 0 6px;
    }

    .article-card{
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 26px;
    }

    .article-card h2{
      font-weight: 800;
      font-size: 1.35rem;
      margin-top: 1.35rem;
      margin-bottom: .5rem;
    }

    .article-card p{
      color: #1f2937;
      line-height: 1.8;
      margin-bottom: 1rem;
    }

    .tip{
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 18px 18px 14px;
      background: var(--soft);
      margin: 14px 0;
    }

    .tip .title{
      font-weight: 800;
      margin: 0 0 6px;
      display: flex;
      gap: 10px;
      align-items: center;
    }

    .badge-soft{
      background: rgba(99,102,241,.10);
      color: #3730a3;
      border: 1px solid rgba(99,102,241,.20);
      font-weight: 700;
    }

    .tip ul{
      margin-bottom: 0;
      padding-left: 1.1rem;
      color: #374151;
      line-height: 1.75;
    }

    .sidebar-card{
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 20px;
      position: sticky;
      top: 18px;
    }

    .sidebar-card h3{
      font-size: 1rem;
      font-weight: 800;
      margin: 0 0 10px;
    }

    .toc a{
      text-decoration: none;
      color: #374151;
      display: block;
      padding: 8px 10px;
      border-radius: 10px;
      border: 1px solid transparent;
    }

    .toc a:hover{
      background: var(--soft);
      border-color: var(--border);
    }

    .callout{
      border-radius: 16px;
      padding: 16px;
      background: #0b1220;
      color: #e5e7eb;
      border: 1px solid rgba(255,255,255,.08);
    }

    .callout small{
      color: #9ca3af;
    }

    .divider{
      height: 1px;
      background: var(--border);
      margin: 18px 0;
    }