/* === Page-specific styles === */

    /* Hero for this page */
    .code-hero { padding: 8rem 0 4rem; text-align: center; }
    .code-era {
      font-family: ui-monospace, 'SF Mono', monospace;
      font-size: 0.75rem; font-weight: 600; color: #3b82f6;
      letter-spacing: 0.15em; text-transform: uppercase;
      margin-bottom: 1rem; display: block;
    }
    .code-hero h1 {
      font-family: 'Newsreader', Georgia, serif;
      font-size: 3rem; font-weight: 500; letter-spacing: -0.03em;
      line-height: 1.15; color: #fff; margin-bottom: 1.25rem;
    }
    .code-hero p {
      font-size: 1.05rem; color: #666; max-width: 580px; margin: 0 auto;
      line-height: 1.65;
    }

    /* Featured project (Face Rec) */
    .featured-project {
      max-width: 800px; margin: 0 auto 3rem;
    }
    .featured-screenshot {
      border-radius: 8px; overflow: hidden;
      border: 1px solid rgba(255,255,255,0.1);
      box-shadow: 0 8px 40px rgba(0,0,0,0.4);
      margin-bottom: 1.5rem;
      position: relative;
    }
    .featured-screenshot img {
      width: 100%; display: block;
    }
    .featured-screenshot-label {
      position: absolute; bottom: 12px; right: 12px;
      font-family: ui-monospace, monospace;
      font-size: 0.6rem; font-weight: 600;
      background: rgba(0,0,0,0.7); color: #888;
      padding: 3px 10px; border-radius: 4px;
      backdrop-filter: blur(8px);
    }
    .featured-meta {
      display: flex; gap: 1.5rem; flex-wrap: wrap;
      margin-bottom: 1.5rem;
    }
    .featured-chip {
      font-family: ui-monospace, monospace;
      font-size: 0.7rem; font-weight: 600;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.1);
      padding: 4px 12px; border-radius: 6px; color: #aaa;
    }
    .featured-desc {
      font-size: 1rem; color: #999; line-height: 1.7;
      max-width: 700px;
    }
    .featured-desc strong { color: #ccc; }

    /* Timeline */
    .timeline {
      position: relative;
      max-width: 700px; margin: 0 auto;
    }
    .timeline::before {
      content: '';
      position: absolute; left: 0; top: 0; bottom: 0;
      width: 1px; background: rgba(255,255,255,0.08);
    }
    .timeline-item {
      padding-left: 2.5rem; margin-bottom: 3rem;
      position: relative;
    }
    .timeline-item::before {
      content: '';
      position: absolute; left: -4px; top: 6px;
      width: 9px; height: 9px; border-radius: 50%;
      background: #3b82f6;
      box-shadow: 0 0 8px rgba(59,130,246,0.4);
    }
    .timeline-year {
      font-family: ui-monospace, monospace;
      font-size: 0.7rem; font-weight: 600; color: #3b82f6;
      letter-spacing: 0.1em; margin-bottom: 0.5rem;
    }
    .timeline-title {
      font-family: 'Newsreader', Georgia, serif;
      font-size: 1.25rem; font-weight: 500; color: #e8e8e8;
      margin-bottom: 0.4rem; line-height: 1.3;
    }
    .timeline-desc {
      font-size: 0.88rem; color: #777; line-height: 1.6;
    }
    .timeline-tech {
      display: flex; gap: 6px; flex-wrap: wrap; margin-top: 0.6rem;
    }
    .timeline-tech span {
      font-size: 0.6rem; font-weight: 600; text-transform: uppercase;
      letter-spacing: 0.06em;
      padding: 2px 8px; border-radius: 4px;
      background: rgba(255,255,255,0.06); color: #888;
      border: 1px solid rgba(255,255,255,0.08);
    }

    .timeline-screenshot {
      margin-top: 1rem; border-radius: 6px; overflow: hidden;
      border: 1px solid rgba(255,255,255,0.08);
      max-width: 360px;
    }
    .timeline-screenshot img {
      width: 100%; display: block;
      image-rendering: auto;
    }

    /* Articles grid */
    .article-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
      max-width: 700px; margin: 0 auto;
    }
    .article-card {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 10px; padding: 1.25rem;
    }
    .article-card h3 {
      font-family: 'Newsreader', Georgia, serif;
      font-size: 1rem; font-weight: 500; color: #e8e8e8;
      margin-bottom: 0.4rem; line-height: 1.35;
    }
    .article-card p {
      font-size: 0.82rem; color: #777; line-height: 1.55;
    }
    .article-card .writing-tag { margin-bottom: 0.4rem; }

    /* C Programs gallery */
    .programs-grid {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
      max-width: 700px; margin: 0 auto;
    }
    .prog-tile {
      background: #0a0a1a; border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px; overflow: hidden;
      transition: border-color 0.2s;
    }
    .prog-tile:hover { border-color: rgba(59,130,246,0.3); }
    .prog-tile-img {
      width: 100%; aspect-ratio: 4/3; object-fit: cover;
      display: block; border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .prog-tile-name {
      font-family: ui-monospace, monospace;
      font-size: 0.7rem; font-weight: 600; color: #aaa;
      padding: 8px 10px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    /* Closing quote */
    .arc-quote {
      max-width: 600px; margin: 0 auto; text-align: center;
    }
    .arc-quote p {
      font-family: 'Newsreader', Georgia, serif;
      font-size: 1.3rem; font-style: italic; color: #888;
      line-height: 1.6; margin-bottom: 1rem;
    }
    .arc-quote .arc-arrow {
      display: flex; align-items: center; justify-content: center;
      gap: 1rem; flex-wrap: wrap;
      font-family: ui-monospace, monospace;
      font-size: 0.75rem; color: #555;
    }
    .arc-arrow span { white-space: nowrap; }
    .arc-arrow .arc-now { color: #3b82f6; font-weight: 600; }

    /* === Live ParticleFX demo === */
    .pixfx-live {
      margin-top: 1rem;
      max-width: 480px;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.08);
      background: #000;
    }
    .pixfx-canvas-wrap {
      position: relative;
      width: 100%;
      aspect-ratio: 320 / 200;
      background: #000;
    }
    .pixfx-canvas-wrap canvas {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      display: block;
      image-rendering: pixelated;
      image-rendering: crisp-edges;
    }
    .pixfx-bg {
      position: absolute; inset: 0;
      pointer-events: none;
    }
    /* "nitelife" — vague city skyline silhouette for Celebration */
    .pixfx-bg-nitelife {
      background:
        radial-gradient(ellipse at 30% 95%, rgba(255,180,60,0.18) 0%, transparent 45%),
        radial-gradient(ellipse at 75% 95%, rgba(100,180,255,0.12) 0%, transparent 45%),
        linear-gradient(to bottom, #0a0820 0%, #050614 60%, #02020a 100%);
    }
    .pixfx-bg-nitelife::after {
      content: '';
      position: absolute; left:0; right:0; bottom: 0;
      height: 28%;
      background:
        linear-gradient(to top, #000 0%, #000 30%, transparent 100%);
      clip-path: polygon(
        0% 100%, 0% 60%, 5% 60%, 5% 45%, 12% 45%, 12% 55%,
        18% 55%, 18% 30%, 24% 30%, 24% 50%, 32% 50%, 32% 20%,
        38% 20%, 38% 45%, 45% 45%, 45% 35%, 52% 35%, 52% 55%,
        60% 55%, 60% 25%, 68% 25%, 68% 50%, 75% 50%, 75% 40%,
        82% 40%, 82% 60%, 90% 60%, 90% 50%, 100% 50%, 100% 100%
      );
    }
    /* "fountn" — concrete fountain basin */
    .pixfx-bg-fountn {
      background:
        radial-gradient(ellipse at 50% 100%, rgba(60,80,120,0.25) 0%, transparent 60%),
        linear-gradient(to bottom, #06080f 0%, #0a0d18 100%);
    }
    .pixfx-bg-fountn::after {
      content: '';
      position: absolute; left: 22%; right: 22%; bottom: 4%;
      height: 22%;
      background: linear-gradient(to bottom, #2a2e38, #1a1c24 60%, #0e0f14);
      border-radius: 50% 50% 6px 6px / 30% 30% 6px 6px;
      box-shadow:
        inset 0 6px 14px rgba(0,0,0,0.6),
        inset 0 -2px 4px rgba(255,255,255,0.04);
    }
    .pixfx-controls {
      display: flex; gap: 4px; flex-wrap: wrap;
      padding: 8px;
      background: rgba(255,255,255,0.02);
      border-top: 1px solid rgba(255,255,255,0.06);
    }
    .pixfx-btn {
      flex: 1; min-width: 80px;
      font-family: ui-monospace, monospace;
      font-size: 0.65rem; font-weight: 600;
      text-transform: uppercase; letter-spacing: 0.05em;
      padding: 6px 8px; border-radius: 5px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      color: #888;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
    }
    .pixfx-btn:hover {
      color: #ccc;
      background: rgba(255,255,255,0.07);
      border-color: rgba(255,255,255,0.14);
    }
    .pixfx-btn.active {
      color: #3b82f6;
      background: rgba(59,130,246,0.1);
      border-color: rgba(59,130,246,0.35);
    }
    .pixfx-caption {
      font-family: ui-monospace, monospace;
      font-size: 0.65rem; color: #555;
      margin-top: 0.5rem;
      letter-spacing: 0.04em;
    }

    /* === Live Polygon Morph demo === */
    .morph-live {
      margin-top: 1rem;
      max-width: 480px;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.08);
      background: #fafafa;
    }
    .morph-canvas-wrap {
      position: relative;
      width: 100%;
      aspect-ratio: 580 / 280;
      background: #fff;
    }
    .morph-canvas-wrap canvas {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      display: block;
      cursor: crosshair;
      touch-action: none;
    }
    .morph-status {
      position: absolute; top: 8px; left: 10px; right: 10px;
      font-family: ui-monospace, monospace;
      font-size: 0.62rem; color: #555;
      letter-spacing: 0.05em;
      pointer-events: none;
      display: flex; justify-content: space-between; gap: 1rem;
    }
    .morph-status .morph-state {
      font-weight: 600;
    }
    .morph-state.s-poly1 { color: #c0271f; }
    .morph-state.s-poly2 { color: #1f47c0; }
    .morph-state.s-ready { color: #2a7f3a; }
    .morph-state.s-morphing { color: #6a2bb5; }
    .morph-state.s-paused { color: #9a6d00; }

    .morph-controls {
      display: flex; gap: 4px; flex-wrap: wrap;
      padding: 8px;
      background: rgba(255,255,255,0.02);
      border-top: 1px solid rgba(255,255,255,0.06);
      align-items: center;
    }
    .morph-btn {
      font-family: ui-monospace, monospace;
      font-size: 0.65rem; font-weight: 600;
      text-transform: uppercase; letter-spacing: 0.05em;
      padding: 6px 10px; border-radius: 5px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      color: #888;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
    }
    .morph-btn:hover:not(:disabled) {
      color: #ccc;
      background: rgba(255,255,255,0.07);
      border-color: rgba(255,255,255,0.14);
    }
    .morph-btn:disabled {
      opacity: 0.35; cursor: not-allowed;
    }
    .morph-btn.primary {
      color: #3b82f6;
      background: rgba(59,130,246,0.1);
      border-color: rgba(59,130,246,0.35);
    }
    .morph-sliders {
      display: flex; gap: 10px; flex-wrap: wrap;
      padding: 0 8px 8px;
      background: rgba(255,255,255,0.02);
      border-top: 1px solid rgba(255,255,255,0.04);
    }
    .morph-slider {
      display: flex; align-items: center; gap: 6px;
      font-family: ui-monospace, monospace;
      font-size: 0.62rem; color: #888;
      letter-spacing: 0.04em;
      padding-top: 8px;
      flex: 1; min-width: 140px;
    }
    .morph-slider label {
      text-transform: uppercase;
      white-space: nowrap;
    }
    .morph-slider input[type=range] {
      flex: 1; min-width: 60px;
      accent-color: #3b82f6;
    }
    .morph-slider .v {
      color: #aaa; font-weight: 600;
      min-width: 28px; text-align: right;
    }

    /* === Live MD2 model viewer === */
    .md2-live {
      margin-top: 1rem;
      max-width: 480px;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.08);
      background: #000;
    }
    .md2-canvas-wrap {
      position: relative;
      width: 100%;
      aspect-ratio: 480 / 540;
      background:
        radial-gradient(ellipse at 50% 60%, #0e1226 0%, #050709 65%, #000 100%);
    }
    .md2-canvas-wrap canvas {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      display: block;
      cursor: grab;
      touch-action: none;
    }
    .md2-canvas-wrap canvas:active { cursor: grabbing; }
    .md2-overlay {
      position: absolute; top: 8px; left: 10px; right: 10px;
      pointer-events: none;
      font-family: ui-monospace, monospace;
      font-size: 0.62rem;
      letter-spacing: 0.05em;
      display: flex; justify-content: space-between;
      color: #6688aa;
    }
    .md2-overlay .md2-anim-name {
      color: #3b82f6; font-weight: 600;
      text-transform: lowercase;
    }
    .md2-overlay .md2-stats {
      color: #444;
    }
    .md2-loading {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      color: #555; font-family: ui-monospace, monospace; font-size: 0.7rem;
      letter-spacing: 0.1em; text-transform: uppercase;
    }
    .md2-loading.hidden { display: none; }
    .md2-controls {
      display: flex; gap: 4px; flex-wrap: wrap;
      padding: 8px;
      background: rgba(255,255,255,0.02);
      border-top: 1px solid rgba(255,255,255,0.06);
      align-items: center;
    }
    .md2-controls select {
      flex: 1; min-width: 100px;
      font-family: ui-monospace, monospace;
      font-size: 0.68rem; font-weight: 600;
      text-transform: lowercase; letter-spacing: 0.04em;
      padding: 5px 8px; border-radius: 5px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      color: #ccc;
      cursor: pointer;
    }
    .md2-controls select:hover {
      background: rgba(255,255,255,0.07);
      border-color: rgba(255,255,255,0.14);
    }
    .md2-btn {
      font-family: ui-monospace, monospace;
      font-size: 0.65rem; font-weight: 600;
      text-transform: uppercase; letter-spacing: 0.05em;
      padding: 6px 10px; border-radius: 5px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      color: #888;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
    }
    .md2-btn:hover {
      color: #ccc;
      background: rgba(255,255,255,0.07);
      border-color: rgba(255,255,255,0.14);
    }
    .md2-btn.active {
      color: #3b82f6;
      background: rgba(59,130,246,0.1);
      border-color: rgba(59,130,246,0.35);
    }

    /* === Featured: live Face Recognition cinematic replay === */
    .facerec-stage {
      position: relative;
      width: 100%;
      aspect-ratio: 4 / 3;
      background: #0a0a14;
    }
    .facerec-stage canvas {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      display: block;
    }
    .facerec-replay-btn {
      position: absolute;
      bottom: 12px; left: 12px;
      font-family: ui-monospace, monospace;
      font-size: 0.65rem; font-weight: 600;
      text-transform: uppercase; letter-spacing: 0.06em;
      padding: 6px 12px; border-radius: 5px;
      background: rgba(0,0,0,0.7);
      border: 1px solid rgba(255,255,255,0.18);
      color: #ccc;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
      backdrop-filter: blur(8px);
    }
    .facerec-replay-btn:hover {
      color: #fff;
      background: rgba(0,0,0,0.85);
      border-color: rgba(59,130,246,0.5);
    }

    /* Download link */
    .dl-link {
      display: inline-flex; align-items: center; gap: 6px;
      margin-top: 0.6rem;
      font-family: ui-monospace, monospace;
      font-size: 0.7rem; font-weight: 600; color: #3b82f6;
      padding: 4px 12px; border-radius: 6px;
      background: rgba(59,130,246,0.08);
      border: 1px solid rgba(59,130,246,0.15);
      transition: background 0.2s, border-color 0.2s;
      text-decoration: none;
    }
    .dl-link:hover {
      background: rgba(59,130,246,0.15);
      border-color: rgba(59,130,246,0.3);
    }
    .dl-size { color: #555; font-weight: 400; }

    /* Run-in-browser link (sits next to dl-link) */
    .run-link {
      display: inline-flex; align-items: center; gap: 6px;
      margin-top: 0.6rem; margin-left: 0.5rem;
      font-family: ui-monospace, monospace;
      font-size: 0.7rem; font-weight: 600; color: #16a34a;
      padding: 4px 12px; border-radius: 6px;
      background: rgba(22,163,74,0.08);
      border: 1px solid rgba(22,163,74,0.18);
      transition: background 0.2s, border-color 0.2s;
      text-decoration: none;
    }
    .run-link:hover {
      background: rgba(22,163,74,0.16);
      border-color: rgba(22,163,74,0.32);
    }

    /* Responsive */
    @media (max-width: 767px) {
      .code-hero h1 { font-size: 2.25rem; }
      .featured-meta { gap: 0.75rem; }
      .article-grid { grid-template-columns: 1fr; }
      .programs-grid { grid-template-columns: repeat(2, 1fr); }
      .timeline { padding-left: 0; }
    }

.code-face-section { padding-top: 2rem; }
.code-face-title { font-size: 2rem; }
.mt-1 { margin-top: 1rem; }
.mt-2-5 { margin-top: 2.5rem; }
.mt-0-5 { margin-top: 0.5rem; }
.mb-0-5 { margin-bottom: 0.5rem; }
.face-footnote {
  margin-top: 1rem;
  color: #555;
  font-size: 0.88rem;
}
.code-demo-title {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 500;
  color: #e8e8e8;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}
.code-demo-desc {
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}
.inline-code-muted {
  font-family: ui-monospace, monospace;
  font-size: 0.85em;
  color: #aaa;
}
.archive-browse {
  margin-top: 2.5rem;
  font-family: ui-monospace, 'SF Mono', monospace;
  font-size: 0.8125rem;
}
.archive-browse-link {
  color: #3b82f6;
  text-decoration: none;
  border-bottom: 1px solid rgba(59,130,246,0.3);
}
.code-arc-section { padding: 5rem 0; }
.footer-blue-link { color: #3b82f6; }