/* index.css — extracted from inline <style> blocks. Generated by scripts/h1-extract.mjs */
body {
        min-height: 100vh;
      }

      .blog-wrap {
        position: relative;
        z-index: 1;
        max-width: 760px;
        margin: 0 auto;
        padding: 80px 24px 60px;
      }

      .blog-header {
        margin-bottom: 48px;
      }

      .blog-header .tag {
        display: inline-block;
        background: var(--green);
        color: #000;
        font-weight: 700;
        font-size: 11px;
        padding: 4px 14px;
        text-transform: uppercase;
        letter-spacing: 3px;
        margin-bottom: 16px;
      }

      .blog-header h1 {
        font-size: 28px;
        color: var(--green);
        margin-bottom: 8px;
      }

      .blog-header p {
        color: var(--text-dim);
        font-size: 13px;
      }

      .post-list {
        display: flex;
        flex-direction: column;
        gap: 24px;
      }

      .post-card {
        border: 1px solid var(--border);
        background: var(--bg-card);
        padding: 28px 24px;
        text-decoration: none;
        display: block;
        transition:
          border-color 0.2s,
          box-shadow 0.2s;
      }

      .post-card:hover {
        border-color: var(--green);
        box-shadow: 0 0 30px var(--green-glow);
      }

      .post-card h2 {
        font-size: 17px;
        color: var(--green);
        margin-bottom: 8px;
        line-height: 1.4;
      }

      .post-card p {
        font-size: 13px;
        color: var(--text-dim);
        line-height: 1.6;
        margin-bottom: 12px;
      }

      .post-meta {
        font-size: 11px;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 1px;
      }

      .back-link {
        margin-top: 48px;
        text-align: center;
      }

      .back-link a {
        color: var(--green);
        text-decoration: none;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 1px;
      }

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

      .skill-banner {
        border: 1px solid var(--green);
        background: rgba(0, 255, 100, 0.04);
        padding: 18px 22px;
        margin-bottom: 40px;
        font-size: 12px;
        line-height: 1.7;
        color: var(--text-dim);
      }
      .skill-banner strong { color: var(--green); }
      .skill-banner code {
        color: var(--green);
        background: rgba(0, 255, 100, 0.08);
        padding: 1px 6px;
      }
      .skill-banner a.dl {
        display: inline-block;
        margin-top: 8px;
        color: #000;
        background: var(--green);
        padding: 6px 14px;
        text-decoration: none;
        font-weight: 700;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 2px;
      }
      .skill-banner a.dl:hover { box-shadow: 0 0 20px var(--green-glow); }

      .post-card { position: relative; }
      .post-card.is-read {
        opacity: 0.55;
        background: rgba(0, 255, 100, 0.015);
      }
      .post-card.is-read h2 { color: var(--text-dim); }
      .post-card:hover.is-read { opacity: 0.9; }
      .read-badge {
        position: absolute;
        top: 12px;
        right: 14px;
        font-size: 10px;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: var(--green);
        border: 1px solid var(--green);
        padding: 2px 7px;
        background: rgba(0, 255, 100, 0.06);
      }
      .mark-unread-btn {
        position: absolute;
        bottom: 10px;
        right: 14px;
        font-size: 10px;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--text-muted);
        background: transparent;
        border: 1px solid var(--border);
        padding: 3px 8px;
        cursor: pointer;
        font-family: inherit;
      }
      .mark-unread-btn:hover {
        color: var(--green);
        border-color: var(--green);
      }