/* ============================================================
       FONTS
    ============================================================ */
    @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&family=Share+Tech+Mono&family=Rajdhani:wght@400;500;600;700&display=swap');
 
    /* ============================================================
       DOCUMENT WRAPPER
    ============================================================ */
    #document {
      max-width: 860px;
      margin: 0 auto;
      padding: 2rem 1.5rem 4rem;
      font-family: 'Rajdhani', sans-serif;
      font-size: 1.05rem;
      font-weight: 400;
      line-height: 1.75;
      letter-spacing: 0.01em;
    }
 
    /* ============================================================
       TITLE BLOCK
    ============================================================ */
    #title-block {
      border-bottom: 1px solid #00ffe133;
      padding-bottom: 2rem;
      margin-bottom: 3rem;
    }
 
    #title-block h1 {
      font-family: 'Rajdhani', sans-serif;
      font-size: 3rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #00ffe1;
      margin: 0 0 0.4rem;
      line-height: 1.1;
    }
 
    #title-block .subtitle {
      font-size: 1.1rem;
      font-weight: 500;
      color: #7ecfff;
      margin: 0 0 0.3rem;
      letter-spacing: 0.04em;
    }
 
    #title-block .tagline {
      font-size: 0.9rem;
      font-style: italic;
      color: #556b77;
      margin: 0;
      letter-spacing: 0.06em;
    }
 
    /* ============================================================
       SECTION HEADINGS
    ============================================================ */
    section {
      margin-bottom: 2.5rem;
    }
 
    h2 {
      font-family: 'Rajdhani', sans-serif;
      font-size: 1.45rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #00ffe1;
      border-left: 3px solid #00ffe1;
      padding-left: 0.75rem;
      margin: 2rem 0 1rem;
    }
 
    h3 {
      font-family: 'Rajdhani', sans-serif;
      font-size: 1.1rem;
      font-weight: 600;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: #7ecfff;
      border-left: 2px solid #7ecfff55;
      padding-left: 0.6rem;
      margin: 1.5rem 0 0.75rem;
    }
 
    /* ============================================================
       BODY TEXT
    ============================================================ */
    p {
      margin: 0 0 1rem;
      color: #b0c4ce;
    }
 
    strong {
      color: #e0f4ff;
      font-weight: 600;
    }
 
    abbr {
      border-bottom: 1px dashed #556b77;
      cursor: help;
      text-decoration: none;
    }
 
    /* ============================================================
       INLINE CODE
    ============================================================ */
    code {
      font-family: 'JetBrains Mono', 'Share Tech Mono', monospace;
      font-size: 0.82em;
      color: #00ffe1;
      background: #00ffe10d;
      border: 1px solid #00ffe122;
      border-radius: 3px;
      padding: 0.1em 0.4em;
      letter-spacing: 0.02em;
    }
 
    /* ============================================================
       CODE BLOCKS  (pre > code)
    ============================================================ */
    pre {
      margin: 1rem 0 1.25rem;
      padding: 1rem 1.25rem;
      border-left: 3px solid #00ffe155;
      border-radius: 0 4px 4px 0;
      background: #00ffe108;
      overflow-x: auto;
    }
 
    pre code {
      font-family: 'JetBrains Mono', 'Share Tech Mono', monospace;
      font-size: 0.83rem;
      color: #a8ffd8;
      background: transparent;
      border: none;
      padding: 0;
      letter-spacing: 0.03em;
      line-height: 1.7;
    }
 
    /* ============================================================
       CALLOUT / ASIDE
    ============================================================ */
    aside.callout {
      border: 1px solid #00ffe133;
      border-left: 4px solid #00ffe1;
      border-radius: 0 4px 4px 0;
      padding: 1rem 1.25rem;
      margin: 1.25rem 0;
      position: relative;
    }
 
    aside.callout::before {
      content: '//';
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.75rem;
      color: #00ffe1;
      position: absolute;
      top: 0.6rem;
      right: 0.9rem;
      opacity: 0.5;
    }
 
    aside.callout p {
      color: #c8e8f0;
      margin: 0;
      font-style: italic;
    }
 
    aside.callout-warning {
      border-color: #ffb74d55;
      border-left-color: #ffb74d;
    }
 
    aside.callout-warning::before {
      color: #ffb74d;
    }
 
    aside.callout-warning p {
      color: #ffe0b2;
    }
 
    /* ============================================================
       LISTS
    ============================================================ */
    ul, ol {
      padding-left: 1.5rem;
      margin: 0.5rem 0 1rem;
      color: #b0c4ce;
    }
 
    li {
      margin-bottom: 0.35rem;
      line-height: 1.7;
    }
 
    /* ============================================================
       TABLES
    ============================================================ */
    .table-wrapper {
      overflow-x: auto;
      margin: 1rem 0 1.5rem;
      border: 1px solid #00ffe122;
      border-radius: 4px;
    }
 
    table {
      width: 100%;
      border-collapse: collapse;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.82rem;
      letter-spacing: 0.02em;
    }
 
    caption {
      font-family: 'Rajdhani', sans-serif;
      font-size: 0.8rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #556b77;
      padding: 0.5rem 0.75rem;
      text-align: left;
      border-bottom: 1px solid #00ffe111;
    }
 
    thead tr {
      background: #00ffe10f;
      border-bottom: 1px solid #00ffe133;
    }
 
    thead th {
      padding: 0.6rem 0.9rem;
      text-align: left;
      font-family: 'Rajdhani', sans-serif;
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #00ffe1;
      white-space: nowrap;
    }
 
    tbody tr {
      border-bottom: 1px solid #ffffff08;
      transition: background 0.15s ease;
    }
 
    tbody tr:nth-child(even) {
      background: #ffffff04;
    }
 
    tbody tr:hover {
      background: #00ffe108;
    }
 
    tbody td {
      padding: 0.5rem 0.9rem;
      color: #8faab8;
      vertical-align: middle;
    }
 
    tbody td:first-child {
      color: #c8dde8;
      font-weight: 600;
    }
 
    /* ── Speedup value colours ───────────────────────────────── */
    .speedup-good {
      color: #00e676;
      font-weight: 600;
    }
 
    .speedup-warn {
      color: #ffb74d;
      font-weight: 600;
    }
 
    .speedup-bad {
      color: #ff5252;
      font-weight: 600;
    }
 
    /* ============================================================
       DOCUMENT FOOTER
    ============================================================ */
    #document-footer {
      margin-top: 3rem;
      padding-top: 1.25rem;
      border-top: 1px solid #00ffe122;
    }
 
    #document-footer p {
      font-size: 0.82rem;
      color: #3d5560;
      margin-bottom: 0.4rem;
    }
 
    #document-footer code {
      font-size: 0.78em;
      color: #3d5560;
      background: transparent;
      border-color: #3d556033;
    }
 
    /* ============================================================
       RESPONSIVE
    ============================================================ */
    @media (max-width: 600px) {
      #document { padding: 1rem 1rem 3rem; }
      #title-block h1 { font-size: 2rem; }
      h2 { font-size: 1.15rem; }
      table { font-size: 0.75rem; }
    }