:root {
      --muted: #333333;
    }

    html, body {
      color: var(--dim);
      -webkit-text-size-adjust: 100%;
    }

    /* scanline overlay — slightly different opacity for this page */
    body::before {
      background: repeating-linear-gradient(
        to bottom,
        transparent 0px, transparent 3px,
        rgba(0,0,0,0.06) 3px, rgba(0,0,0,0.06) 4px
      );
    }

    /* nav override for wider max-width */
    nav {
      max-width: 720px;
    }

    .nav-back {
      font-size: 11px;
      color: var(--muted);
      text-decoration: none;
      letter-spacing: 0.08em;
    }
    .nav-back:hover { color: var(--dim); }

    /* layout override for wider max-width */
    .wrap {
      max-width: 720px;
      padding: 60px 24px 100px;
    }

    /* header */
    .doc-header {
      margin-bottom: 52px;
      padding-bottom: 32px;
      border-bottom: 1px solid var(--line);
    }

    .doc-header h1 {
      font-size: 22px;
      color: var(--green);
      font-weight: normal;
      letter-spacing: 0.03em;
      margin-bottom: 10px;
    }

    .doc-meta {
      font-size: 11px;
      color: var(--muted);
      line-height: 1.8;
    }

    .doc-meta code {
      color: var(--dim);
      background: #0a0a0a;
      padding: 1px 5px;
      border: 1px solid var(--line);
      font-size: 10px;
    }

    /* TOC */
    .toc {
      margin-bottom: 48px;
      padding: 20px 24px;
      border: 1px solid var(--line);
      background: #030303;
    }

    .toc-title {
      font-size: 10px;
      color: var(--muted);
      letter-spacing: 0.15em;
      text-transform: uppercase;
      margin-bottom: 14px;
    }

    .toc ol {
      list-style: decimal;
      padding-left: 20px;
    }

    .toc li {
      font-size: 12px;
      line-height: 1.6;
      margin-bottom: 4px;
    }

    .toc a {
      color: var(--dim);
      text-decoration: none;
    }
    .toc a:hover { color: var(--blue); }

    /* sections */
    .section {
      margin-bottom: 48px;
      padding-bottom: 48px;
      border-bottom: 1px solid var(--line);
    }
    .section:last-child {
      border-bottom: none;
      margin-bottom: 0;
    }

    h2 {
      font-size: 11px;
      color: var(--green);
      font-weight: normal;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      margin-bottom: 20px;
    }

    h2::before {
      content: '// ';
      color: var(--muted);
    }

    h3 {
      font-size: 12px;
      color: #888;
      font-weight: normal;
      letter-spacing: 0.08em;
      margin: 24px 0 10px;
    }

    h3::before {
      content: '→ ';
      color: var(--muted);
    }

    p {
      font-size: 13px;
      line-height: 1.9;
      color: var(--dim);
      margin-bottom: 14px;
    }

    p:last-child { margin-bottom: 0; }

    ul, ol {
      padding-left: 0;
      list-style: none;
      margin: 10px 0 14px;
    }

    ul li, ol li {
      font-size: 13px;
      line-height: 1.8;
      color: var(--dim);
      padding: 4px 0 4px 20px;
      position: relative;
    }

    ul li::before {
      content: '·';
      position: absolute;
      left: 6px;
      color: var(--muted);
    }

    ol { list-style: decimal; padding-left: 18px; }

    a { color: var(--blue); text-decoration: none; }
    a:hover { text-decoration: underline; }

    code {
      color: var(--blue);
      background: #050505;
      border: 1px solid var(--line);
      padding: 0 5px;
      font-size: 12px;
      font-family: inherit;
    }

    strong {
      color: #888;
      font-weight: normal;
    }

    .badge {
      display: inline-block;
      font-size: 10px;
      color: #000;
      background: var(--green);
      padding: 2px 8px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-left: 8px;
      vertical-align: middle;
    }

    .badge.blue { background: var(--blue); }
    .badge.red  { background: var(--red); }

    .table-wrap {
      width: 100%;
      overflow-x: auto;
      margin: 16px 0;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
    }

    th {
      text-align: left;
      color: var(--muted);
      font-weight: normal;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      font-size: 10px;
      padding: 8px 12px;
      border-bottom: 1px solid var(--line);
    }

    td {
      padding: 10px 12px;
      border-bottom: 1px solid var(--line);
      color: var(--dim);
      line-height: 1.6;
      vertical-align: top;
    }

    tr:last-child td { border-bottom: none; }

    .highlight {
      border-left: 2px solid var(--green);
      padding: 12px 16px;
      background: #030303;
      margin: 16px 0;
    }

    .highlight p { margin-bottom: 0; }

    /* footer overrides */
    footer {
      border-top: 1px solid var(--line);
      max-width: 720px;
    }

    .footer-right {
      color: var(--muted);
      opacity: 1;
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }
    .footer-right a { color: var(--muted); text-decoration: none; }
    .footer-right a:hover { color: var(--dim); }

    @media (max-width: 480px) {
      .wrap { padding: 40px 16px 80px; }
      nav { padding: 16px; }
      footer { padding: 24px 16px; flex-direction: column; }
      h2 { font-size: 10px; }
    }