:root {
      --background: #080c0e;
      --panel: #101719;
      --border: #293537;

      --text-primary: #f1f5f4;
      --text-secondary: #a5b0ae;
      --text-muted: #6f7d7a;

      --teal: #25b7a4;
      --teal-hover: #35c9b5;

      --success: #91c95f;
      --warning: #d5a74d;
      --risk: #d35d5d;

      --content-width: 820px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      background: var(--background);
      color: var(--text-primary);
      font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    }

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

    a:hover {
      color: var(--teal-hover);
    }

    .mono {
      font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;
    }

    .topbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      min-height: 62px;
      padding: 0 34px;
      border-bottom: 1px solid var(--border);
      background: var(--background);
    }

    .topbar-left,
    .topbar-right {
      color: var(--text-muted);
      font-size: 0.76rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .topbar-left span {
      color: var(--teal);
    }

    .page {
      width: min(var(--content-width), calc(100% - 40px));
      margin: 0 auto;
      padding: 72px 0 100px;
    }

    .back-link {
      display: inline-block;
      margin-bottom: 50px;
      color: var(--text-muted);
      font-size: 0.76rem;
      letter-spacing: 0.07em;
      text-transform: uppercase;
    }

    .back-link:hover {
      color: var(--teal);
    }

    .article-header {
      padding-bottom: 44px;
      border-bottom: 1px solid var(--border);
    }

    .article-label {
      margin: 0 0 20px;
      color: var(--teal);
      font-size: 0.76rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    h1 {
      max-width: 760px;
      margin: 0;
      font-size: clamp(2.8rem, 8vw, 5.4rem);
      line-height: 0.98;
      letter-spacing: -0.055em;
    }

    .dek {
      max-width: 720px;
      margin: 28px 0 0;
      color: var(--text-secondary);
      font-size: 1.15rem;
      line-height: 1.75;
    }

    .metadata {
      display: flex;
      flex-wrap: wrap;
      gap: 18px;
      margin-top: 28px;
      color: var(--text-muted);
      font-size: 0.72rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    article {
      padding-top: 48px;
    }

    article p {
      margin: 0 0 26px;
      color: var(--text-secondary);
      font-size: 1.03rem;
      line-height: 1.85;
    }

    article h2 {
      margin: 56px 0 20px;
      font-size: 1.55rem;
      letter-spacing: -0.025em;
    }

    article ul {
      margin: 0 0 30px;
      padding-left: 24px;
      color: var(--text-secondary);
    }

    article li {
      margin-bottom: 12px;
      line-height: 1.7;
    }

    .callout {
      margin: 40px 0;
      padding: 24px;
      border-left: 3px solid var(--teal);
      background: var(--panel);
    }

    .callout p {
      margin: 0;
      color: var(--text-primary);
      font-size: 1.05rem;
      line-height: 1.75;
    }

    .framework {
      margin: 42px 0;
      border: 1px solid var(--border);
      background: var(--panel);
    }

    .framework-row {
      display: grid;
      grid-template-columns: 180px 1fr;
      gap: 24px;
      padding: 20px 22px;
      border-bottom: 1px solid var(--border);
    }

    .framework-row:last-child {
      border-bottom: 0;
    }

    .framework-label {
      color: var(--teal);
      font-size: 0.74rem;
      letter-spacing: 0.07em;
      text-transform: uppercase;
    }

    .framework-text {
      color: var(--text-secondary);
      line-height: 1.65;
    }

    .article-footer {
      margin-top: 64px;
      padding-top: 28px;
      border-top: 1px solid var(--border);
      color: var(--text-muted);
      font-size: 0.76rem;
      line-height: 1.7;
    }

    @media (max-width: 640px) {
      .topbar {
        padding: 0 20px;
      }

      .topbar-right {
        display: none;
      }

      .page {
        padding-top: 48px;
      }

      .framework-row {
        grid-template-columns: 1fr;
        gap: 8px;
      }