:root {
  --max: 720px;
}

    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
      color: var(--text);
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
    }
    a { color: var(--blue); text-decoration: none; }
    a:hover { text-decoration: underline; }

    .top-bar {
      border-bottom: 1px solid var(--line);
      padding: 18px 0;
    }
    .top-bar-inner {
      width: min(var(--max), calc(100% - 40px));
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-weight: 700;
      color: var(--text);
      text-decoration: none;
    }
    .brand:hover { text-decoration: none; }
    .brand img {
      width: 42px;
      height: 42px;
    }

    article {
      width: min(var(--max), calc(100% - 40px));
      margin: 0 auto;
      padding: 48px 0 80px;
    }

    .breadcrumb {
      font-size: 0.88rem;
      color: var(--muted-2);
      margin-bottom: 24px;
    }
    .breadcrumb a { color: var(--muted); }

    h1 {
      font-size: clamp(1.8rem, 4vw, 2.6rem);
      line-height: 1.1;
      letter-spacing: -0.03em;
      margin: 0 0 12px;
    }
    .subtitle {
      color: var(--muted);
      font-size: 1.08rem;
      margin: 0 0 12px;
    }
    .verified {
      display: inline-block;
      padding: 5px 12px;
      background: var(--blue-soft);
      border: 1px solid rgba(66,143,210,0.18);
      border-radius: 999px;
      color: var(--muted);
      font-size: 0.82rem;
      margin: 0 0 32px;
    }

    h2 {
      font-size: 1.4rem;
      letter-spacing: -0.02em;
      margin: 36px 0 12px;
    }
    h3 {
      font-size: 1.1rem;
      margin: 28px 0 8px;
    }

    p, li { color: var(--muted); font-size: 1rem; }
    p { margin: 0 0 16px; }
    ul, ol { padding-left: 20px; margin: 0 0 16px; }
    li { margin: 6px 0; }
    strong { color: var(--text); }

    .callout {
      padding: 20px 24px;
      background: var(--blue-soft);
      border: 1px solid rgba(66,143,210,0.18);
      border-radius: 16px;
      margin: 28px 0;
    }
    .callout p { margin: 0; }
    .callout strong { color: var(--text); }

    .cta-box {
      padding: 28px;
      background: var(--bg-card);
      border: 1px solid var(--line);
      border-radius: 20px;
      margin: 40px 0 0;
      text-align: center;
    }
    .cta-box h3 { margin: 0 0 8px; color: var(--text); }
    .cta-box p { margin: 0 0 16px; }
    .cta-btn {
      display: inline-flex;
      align-items: center;
      padding: 12px 24px;
      background: var(--action-gradient);
      box-shadow: var(--action-chrome);
      color: white;
      border-radius: 14px;
      font-weight: 650;
      text-decoration: none;
    }
    .cta-btn:hover { text-decoration: none; opacity: 0.9; }

    .related { margin: 40px 0 0; }
    .related h3 { font-size: 1.1rem; margin: 0 0 10px; }
    .related ul { list-style: none; padding: 0; margin: 0; }
    .related li { margin: 6px 0; }
    .related a { color: var(--blue); font-size: 0.95rem; }
    .related a:hover { text-decoration: underline; }

    @media (max-width: 620px) {
      article { padding: 32px 0 60px; }
    }

    .theme-toggle {
      background: none;
      border: 1px solid var(--line);
      border-radius: 10px;
      color: var(--muted);
      cursor: pointer;
      width: 36px;
      height: 36px;
      display: inline-grid;
      place-items: center;
      transition: border-color 160ms ease, color 160ms ease;
      padding: 0;
    }
    .theme-toggle:hover { border-color: var(--blue); color: var(--text); }
    .icon-moon, .logo-light { display: none; }
    .logo-dark { display: block; }

    html[data-theme="dark"] .icon-sun, html[data-theme="dark"] .logo-dark { display: block; }
    html[data-theme="dark"] .icon-moon, html[data-theme="dark"] .logo-light { display: none; }
    html[data-theme="light"] .icon-sun, html[data-theme="light"] .logo-dark { display: none; }
    html[data-theme="light"] .icon-moon, html[data-theme="light"] .logo-light { display: block; }