@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      --bg: #0a0a1a;
      --surface: rgba(255, 255, 255, 0.06);
      --card: rgba(255, 255, 255, 0.08);
      --border: rgba(255, 255, 255, 0.1);
      --border-bright: rgba(255, 255, 255, 0.18);
      --indigo: #6366f1;
      --cyan: #06b6d4;
      --purple: #8b5cf6;
      --amber: #f59e0b;
      --green: #10b981;
      --red: #ef4444;
      --pink: #ec4899;
      --text: #f1f5f9;
      --text2: #cbd5e1;
      --text3: #b0bec5;
      --text4: #90a4ae;
      --grad1: linear-gradient(135deg, #6366f1, #06b6d4);
      --grad2: linear-gradient(135deg, #8b5cf6, #ec4899);
      --grad3: linear-gradient(135deg, #06b6d4, #10b981);
      --code-bg: #0d1117;
      --glow-indigo: rgba(99, 102, 241, 0.3);
      --glow-cyan: rgba(6, 182, 212, 0.25);
    }

    body {
      font-family: 'Inter', sans-serif;
      background: var(--bg);
      overflow: hidden;
      height: 100vh;
      width: 100vw;
      -webkit-font-smoothing: antialiased;
      color: var(--text);
    }

    /* ---- ANIMATED BACKGROUND MESH ---- */
    .slide-container {
      position: relative;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
    }

    .slide-container::before {
      content: '';
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background:
        radial-gradient(ellipse 80% 60% at 10% 20%, rgba(99, 102, 241, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse 60% 60% at 90% 80%, rgba(6, 182, 212, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse 50% 50% at 50% 50%, rgba(139, 92, 246, 0.04) 0%, transparent 70%);
    }

    /* ---- FLOATING ORBS ---- */
    .orb {
      position: fixed;
      border-radius: 50%;
      pointer-events: none;
      z-index: 0;
      filter: blur(60px);
      opacity: 0.35;
    }

    .orb-1 {
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(99, 102, 241, 0.4), transparent 70%);
      top: -200px;
      right: -150px;
      animation: floatOrb 18s ease-in-out infinite;
    }

    .orb-2 {
      width: 500px;
      height: 500px;
      background: radial-gradient(circle, rgba(6, 182, 212, 0.35), transparent 70%);
      bottom: -180px;
      left: -150px;
      animation: floatOrb 22s ease-in-out infinite reverse;
    }

    .orb-3 {
      width: 350px;
      height: 350px;
      background: radial-gradient(circle, rgba(139, 92, 246, 0.3), transparent 70%);
      top: 40%;
      left: 40%;
      animation: floatOrb 15s ease-in-out infinite 3s;
    }

    @keyframes floatOrb {

      0%,
      100% {
        transform: translate(0, 0);
      }

      25% {
        transform: translate(30px, -25px);
      }

      50% {
        transform: translate(-20px, 40px);
      }

      75% {
        transform: translate(25px, 20px);
      }
    }

    /* ---- SLIDE BASE ---- */
    .slide {
      position: fixed;
      inset: 0;
      z-index: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      opacity: 0;
      transform: translateY(20px) scale(0.98);
      transition: all 0.0s;
      pointer-events: none;
      padding: clamp(20px, 3vh, 40px) clamp(28px, 3.5vw, 60px);
      overflow: hidden;
    }

    .slide.active {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
      animation: slideIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    .slide.prev {
      opacity: 0;
      transform: translateY(-16px) scale(0.98);
    }

    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translateY(22px) scale(0.975);
      }

      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    /* ---- GLASS CARD BASE ---- */
    .glass {
      background: var(--card);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid var(--border);
      border-radius: 16px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    /* ============================
       SLIDE 1 - HERO
       ============================ */
    .slide-hero {
      background: transparent;
      text-align: center;
    }

    .hero-eyebrow {
      position: relative;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(99, 102, 241, 0.15);
      border: 1px solid rgba(99, 102, 241, 0.35);
      border-radius: 50px;
      padding: 6px 18px;
      font-size: clamp(0.68rem, 1.1vh, 0.85rem);
      font-weight: 700;
      letter-spacing: 4px;
      text-transform: uppercase;
      color: #a5b4fc;
      margin-bottom: clamp(20px, 3vh, 38px);
    }

    .hero-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #6366f1;
      animation: pulse 2s ease-in-out infinite;
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 1;
        transform: scale(1);
      }

      50% {
        opacity: 0.5;
        transform: scale(0.85);
      }
    }

    .slide-hero h1 {
      position: relative;
      z-index: 2;
      font-size: clamp(2.4rem, 6vh, 5rem);
      font-weight: 900;
      line-height: 1.1;
      letter-spacing: -0.04em;
      color: var(--text);
    }

    .grad-text {
      background: var(--grad1);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .grad-text2 {
      background: var(--grad2);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .grad-text3 {
      background: var(--grad3);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .hero-sub {
      position: relative;
      z-index: 2;
      font-size: clamp(1rem, 1.9vh, 1.4rem);
      color: var(--text2);
      margin-top: clamp(14px, 2.2vh, 24px);
      font-weight: 400;
      letter-spacing: -0.01em;
    }

    .hero-divider {
      position: relative;
      z-index: 2;
      width: 80px;
      height: 3px;
      background: var(--grad1);
      border-radius: 3px;
      margin: clamp(18px, 2.8vh, 30px) auto 0;
    }

    /* ============================
       SECTION DIVIDERS
       ============================ */
    .slide-section {
      background: var(--bg);
      text-align: center;
      justify-content: center;
      align-items: center;
      overflow: hidden;
    }

    .section-bg {
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(6, 182, 212, 0.06) 100%);
    }

    .section-num {
      position: relative;
      z-index: 2;
      font-size: clamp(6rem, 14vh, 11rem);
      font-weight: 900;
      font-family: 'JetBrains Mono', monospace;
      background: linear-gradient(135deg, rgba(99, 102, 241, 0.5), rgba(6, 182, 212, 0.3));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      line-height: 1;
      letter-spacing: -0.05em;
      text-shadow: none;
      filter: drop-shadow(0 0 40px rgba(99, 102, 241, 0.2));
    }

    .slide-section h2 {
      position: relative;
      z-index: 2;
      font-size: clamp(1.6rem, 3.5vh, 2.8rem);
      font-weight: 700;
      color: var(--text);
      line-height: 1.3;
      margin-top: 10px;
    }

    .section-line {
      position: relative;
      z-index: 2;
      width: 60px;
      height: 3px;
      background: var(--grad1);
      border-radius: 3px;
      margin: 18px auto 0;
    }

    /* ============================
       CONTENT SLIDES
       ============================ */
    .slide-content {
      align-items: flex-start;
      justify-content: center;
      overflow-y: auto;
      overflow-x: hidden;
      padding-top: clamp(56px, 8vh, 80px);
      padding-bottom: clamp(40px, 5vh, 56px);
    }

    .slide-content>* {
      position: relative;
      z-index: 2;
      width: 100%;
    }

    .slide-title {
      position: fixed;
      top: clamp(18px, 2.8vh, 36px);
      left: clamp(28px, 3.5vw, 60px);
      z-index: 10;
      width: auto;
    }

    .slide-title {
      font-size: clamp(1.5rem, 3.2vh, 2.4rem);
      font-weight: 800;
      color: var(--text);
      letter-spacing: -0.025em;
      margin-bottom: clamp(12px, 1.8vh, 26px);
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .title-bar {
      width: 4px;
      height: clamp(22px, 3.2vh, 32px);
      border-radius: 4px;
      background: var(--grad1);
      flex-shrink: 0;
      box-shadow: 0 0 12px var(--glow-indigo);
    }

    /* ============================
       GLASS CARDS GRID
       ============================ */
    .card-grid {
      display: grid;
      gap: clamp(12px, 1.8vh, 20px);
      width: 100%;
    }

    .cg-2 {
      grid-template-columns: repeat(2, 1fr);
    }

    .cg-4 {
      grid-template-columns: repeat(4, 1fr);
    }

    .g-card {
      background: var(--card);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: clamp(16px, 2.5vh, 28px);
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06);
      transition: border-color 0.3s, box-shadow 0.3s;
    }

    .g-card:hover {
      border-color: var(--border-bright);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    .card-icon {
      font-size: clamp(1.3rem, 2.2vh, 2rem);
      margin-bottom: clamp(8px, 1.2vh, 14px);
      display: block;
    }

    .g-card h4 {
      font-size: clamp(0.95rem, 1.6vh, 1.2rem);
      font-weight: 700;
      color: var(--text);
      margin-bottom: clamp(4px, 0.7vh, 8px);
    }

    .g-card p {
      font-size: clamp(0.85rem, 1.4vh, 1.05rem);
      color: var(--text2);
      line-height: 1.55;
      margin: 0;
    }

    /* ============================
       ERA CARDS (4-up)
       ============================ */
    .era-year {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 2px;
      display: block;
      margin-bottom: 8px;
    }

    .era-badge {
      font-size: 0.62rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      padding: 2px 8px;
      border-radius: 20px;
      margin-bottom: 6px;
      align-self: flex-start;
      display: inline-block;
      margin-bottom: 8px;
    }

    .eb-gray {
      background: rgba(100, 116, 139, 0.2);
      color: #94a3b8;
      border: 1px solid rgba(100, 116, 139, 0.3);
    }

    .eb-blue {
      background: rgba(37, 99, 235, 0.2);
      color: #93c5fd;
      border: 1px solid rgba(37, 99, 235, 0.3);
    }

    .eb-purple {
      background: rgba(124, 58, 237, 0.2);
      color: #c4b5fd;
      border: 1px solid rgba(124, 58, 237, 0.3);
    }

    .eb-indigo {
      background: rgba(99, 102, 241, 0.2);
      color: #a5b4fc;
      border: 1px solid rgba(99, 102, 241, 0.35);
    }

    .g-card h4.era-name {
      font-size: clamp(1rem, 1.7vh, 1.25rem);
      font-weight: 800;
      color: var(--text);
      margin-bottom: 10px;
      line-height: 1.3;
    }

    .era-sub {
      font-size: clamp(0.82rem, 1.3vh, 1rem);
      color: var(--text2);
      line-height: 1.55;
      margin: 0 0 25px 0 !important;
    }

    /* ============================
       TIMELINE
       ============================ */
    .timeline-wrap {
      width: 100%;
      position: relative;
      margin-top: clamp(14px, 2vh, 28px);
    }

    .timeline-line {
      position: absolute;
      top: 28px;
      left: 8%;
      right: 8%;
      height: 2px;
      background: linear-gradient(90deg, rgba(100, 116, 139, 0.4), #6366f1, #06b6d4, #8b5cf6, rgba(139, 92, 246, 0.6));
      z-index: 0;
    }

    .timeline-glow {
      position: absolute;
      top: 24px;
      left: 8%;
      right: 8%;
      height: 10px;
      background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.25), rgba(6, 182, 212, 0.2), rgba(139, 92, 246, 0.25), transparent);
      filter: blur(6px);
      z-index: 0;
    }

    .timeline-nodes {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      width: 100%;
      position: relative;
      z-index: 1;
    }

    .timeline-node {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0 6px;
    }

    .node-ring {
      width: clamp(36px, 5vh, 54px);
      height: clamp(36px, 5vh, 54px);
      border-radius: 50%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: clamp(12px, 1.8vh, 20px);
    }

    .node-ring::before {
      content: '';
      position: absolute;
      inset: -4px;
      border-radius: 50%;
      opacity: 0.5;
      animation: ringPulse 3s ease-in-out infinite;
    }

    @keyframes ringPulse {

      0%,
      100% {
        opacity: 0.35;
        transform: scale(1);
      }

      50% {
        opacity: 0.6;
        transform: scale(1.08);
      }
    }

    .nr-gray {
      background: linear-gradient(135deg, #475569, #64748b);
      box-shadow: 0 0 20px rgba(71, 85, 105, 0.5);
    }

    .nr-gray::before {
      background: radial-gradient(circle, rgba(71, 85, 105, 0.4), transparent 70%);
    }

    .nr-blue {
      background: linear-gradient(135deg, #2563eb, #3b82f6);
      box-shadow: 0 0 20px rgba(37, 99, 235, 0.5);
    }

    .nr-blue::before {
      background: radial-gradient(circle, rgba(37, 99, 235, 0.4), transparent 70%);
    }

    .nr-purple {
      background: linear-gradient(135deg, #7c3aed, #a855f7);
      box-shadow: 0 0 20px rgba(124, 58, 237, 0.5);
    }

    .nr-purple::before {
      background: radial-gradient(circle, rgba(124, 58, 237, 0.4), transparent 70%);
    }

    .nr-indigo {
      background: linear-gradient(135deg, #4338ca, #6366f1);
      box-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
    }

    .nr-indigo::before {
      background: radial-gradient(circle, rgba(99, 102, 241, 0.4), transparent 70%);
    }

    .node-label {
      font-size: clamp(0.62rem, 0.95vh, 0.8rem);
      font-weight: 700;
      color: #fff;
      font-family: 'JetBrains Mono', monospace;
      letter-spacing: -0.5px;
    }

    .node-year {
      font-size: 0.65rem;
      font-weight: 700;
      font-family: 'JetBrains Mono', monospace;
      letter-spacing: 0.5px;
      margin-bottom: 6px;
    }

    .node-card {
      background: var(--card);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: clamp(10px, 1.5vh, 16px) clamp(8px, 1vw, 14px);
      width: 100%;
      text-align: center;
    }

    .node-name {
      font-size: clamp(0.8rem, 1.3vh, 1rem);
      font-weight: 700;
      color: var(--text);
      line-height: 1.3;
      margin-bottom: 8px;
    }

    .node-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      justify-content: center;
    }

    .node-tag {
      font-size: 0.6rem;
      font-weight: 600;
      color: var(--text4);
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 4px;
      padding: 2px 6px;
    }

    /* ============================
       COMPARISON
       ============================ */
    .comparison {
      display: grid;
      grid-template-columns: 1fr 52px 1fr;
      align-items: stretch;
      width: 100%;
      gap: 0;
    }

    .comp-box {
      background: var(--card);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: clamp(16px, 2.5vh, 30px);
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
    }

    .comp-box.before {
      border-top: 2px solid rgba(239, 68, 68, 0.5);
      box-shadow: 0 4px 24px rgba(239, 68, 68, 0.1);
    }

    .comp-box.after {
      border-top: 2px solid rgba(16, 185, 129, 0.5);
      box-shadow: 0 4px 24px rgba(16, 185, 129, 0.1);
    }

    .comp-box h4 {
      font-size: clamp(0.9rem, 1.55vh, 1.2rem);
      font-weight: 700;
      color: var(--text);
      margin-bottom: clamp(10px, 1.5vh, 16px);
      display: flex;
      align-items: center;
      gap: 9px;
    }

    .comp-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .comp-box.before .comp-dot {
      background: var(--red);
      box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
    }

    .comp-box.after .comp-dot {
      background: var(--green);
      box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
    }

    .comp-box p {
      font-size: clamp(0.8rem, 1.3vh, 1.02rem);
      color: var(--text2);
      line-height: 1.65;
    }

    .comp-box strong {
      color: var(--text);
    }

    .comp-arrow {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.6rem;
      color: var(--indigo);
      filter: drop-shadow(0 0 8px var(--glow-indigo));
    }

    /* ============================
       HIGHLIGHT BOX (GLASS)
       ============================ */
    .highlight-box {
      width: 100%;
      margin-top: clamp(10px, 1.6vh, 18px);
      background: rgba(99, 102, 241, 0.1);
      border: 1px solid rgba(99, 102, 241, 0.25);
      border-left: 4px solid #6366f1;
      border-radius: 12px;
      padding: clamp(12px, 1.8vh, 20px) clamp(16px, 1.8vw, 28px);
      box-shadow: 0 4px 16px rgba(99, 102, 241, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }

    .highlight-box p {
      font-size: clamp(0.95rem, 1.55vh, 1.15rem);
      color: var(--text);
      font-weight: 500;
      line-height: 1.6;
      margin: 0;
    }

    .highlight-box p strong {
      color: var(--text);
    }

    .highlight-box.cyan {
      background: rgba(6, 182, 212, 0.1);
      border-color: rgba(6, 182, 212, 0.25);
      border-left-color: #06b6d4;
      box-shadow: 0 4px 16px rgba(6, 182, 212, 0.1);
    }

    .highlight-box.green {
      background: rgba(16, 185, 129, 0.1);
      border-color: rgba(16, 185, 129, 0.25);
      border-left-color: #10b981;
      box-shadow: 0 4px 16px rgba(16, 185, 129, 0.1);
    }

    .highlight-box.amber {
      background: rgba(245, 158, 11, 0.1);
      border-color: rgba(245, 158, 11, 0.25);
      border-left-color: #f59e0b;
      box-shadow: 0 4px 16px rgba(245, 158, 11, 0.1);
    }

    /* ============================
       TWO / THREE COLUMN
       ============================ */
    .two-col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(16px, 2.5vw, 36px);
      width: 100%;
    }

    .three-col {
      display: grid;
      grid-template-columns: 1fr auto 1fr auto 1fr;
      width: 100%;
      align-items: stretch;
      gap: 0;
    }

    .col-arrow {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 10px;
      font-size: 1.4rem;
      color: var(--indigo);
      filter: drop-shadow(0 0 6px var(--glow-indigo));
    }

    /* ============================
       SKILL CARDS (3-stage)
       ============================ */
    .skill-card {
      background: var(--card);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: clamp(14px, 2.2vh, 26px);
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06);
      height: 100%;
    }

    .sk-level {
      font-size: 0.62rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: var(--text4);
      margin-bottom: 3px;
      display: block;
    }

    .sk-era {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.68rem;
      font-weight: 600;
      margin-bottom: 6px;
      display: block;
    }

    .skill-card h3 {
      font-size: clamp(0.95rem, 1.6vh, 1.3rem);
      font-weight: 800;
      color: var(--text);
      margin-bottom: clamp(8px, 1.2vh, 14px);
      line-height: 1.2;
    }

    .skill-card p {
      font-size: clamp(0.85rem, 1.4vh, 1.05rem);
      color: var(--text2);
      line-height: 1.6;
      margin-bottom: 8px;
    }

    .skill-card p strong {
      color: var(--text);
    }

    .skill-card ul {
      list-style: none;
      padding: 0;
    }

    .skill-card ul li {
      font-size: clamp(0.82rem, 1.3vh, 1rem);
      color: var(--text2);
      line-height: 1.6;
      padding: 2px 0 2px 18px;
      position: relative;
    }

    .skill-card ul li::before {
      content: '';
      position: absolute;
      left: 4px;
      top: 11px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--indigo);
      opacity: 0.6;
    }

    /* ============================
       TABLE
       ============================ */
    .table-wrapper {
      width: 100%;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      background: rgba(255, 255, 255, 0.04);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid var(--border);
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    }

    thead th {
      background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(6, 182, 212, 0.2));
      color: var(--text);
      padding: clamp(8px, 1.3vh, 14px) clamp(10px, 1.2vw, 18px);
      text-align: left;
      font-weight: 700;
      font-size: clamp(0.62rem, 0.95vh, 0.82rem);
      letter-spacing: 1px;
      text-transform: uppercase;
      border-bottom: 1px solid rgba(99, 102, 241, 0.3);
    }

    tbody td {
      padding: clamp(6px, 1vh, 12px) clamp(10px, 1.2vw, 18px);
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      color: var(--text2);
      vertical-align: middle;
      font-size: clamp(0.85rem, 1.3vh, 1.02rem);
    }

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

    tbody tr:nth-child(even) td {
      background: rgba(255, 255, 255, 0.025);
    }

    tbody tr:hover td {
      background: rgba(99, 102, 241, 0.08);
    }

    .ctx-name {
      font-weight: 700;
      color: var(--text);
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.92rem;
    }

    .badge {
      display: inline-block;
      padding: 2px 9px;
      border-radius: 20px;
      font-size: 0.65rem;
      font-weight: 700;
      white-space: nowrap;
      font-family: 'JetBrains Mono', monospace;
    }

    .b-always {
      background: rgba(16, 185, 129, 0.2);
      color: #6ee7b7;
      border: 1px solid rgba(16, 185, 129, 0.3);
    }

    .b-demand {
      background: rgba(245, 158, 11, 0.2);
      color: #fcd34d;
      border: 1px solid rgba(245, 158, 11, 0.3);
    }

    .b-var {
      background: rgba(139, 92, 246, 0.2);
      color: #c4b5fd;
      border: 1px solid rgba(139, 92, 246, 0.3);
    }

    .b-avail {
      background: rgba(6, 182, 212, 0.2);
      color: #67e8f9;
      border: 1px solid rgba(6, 182, 212, 0.3);
    }

    .b-res {
      background: rgba(239, 68, 68, 0.2);
      color: #fca5a5;
      border: 1px solid rgba(239, 68, 68, 0.3);
    }

    /* ============================
       CODE BLOCK (terminal style)
       ============================ */
    .code-wrap {
      width: 100%;
      margin-top: 8px;
    }

    .code-top {
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-bottom: none;
      border-radius: 12px 12px 0 0;
      padding: 8px 14px;
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .dot-r {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #ef4444;
    }

    .dot-y {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #f59e0b;
    }

    .dot-g {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #10b981;
    }

    .code-block {
      background: var(--code-bg);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 0 0 12px 12px;
      padding: clamp(10px, 1.6vh, 18px) clamp(14px, 1.5vw, 22px);
      font-family: 'JetBrains Mono', monospace;
      font-size: clamp(0.65rem, 1.05vh, 0.85rem);
      line-height: 1.75;
      color: #e2e8f0;
      overflow: auto;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(99, 102, 241, 0.1);
      white-space: pre;
      tab-size: 2;
    }

    .code-standalone {
      background: var(--code-bg);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 12px;
      padding: clamp(8px, 1.4vh, 14px) clamp(10px, 1.2vw, 18px);
      font-family: 'JetBrains Mono', monospace;
      font-size: clamp(0.62rem, 0.98vh, 0.82rem);
      line-height: 1.75;
      color: #e2e8f0;
      overflow: auto;
      margin-top: 7px;
      white-space: pre;
      tab-size: 2;
    }

    .kw {
      color: #c084fc;
    }

    .fn {
      color: #60a5fa;
    }

    .str {
      color: #86efac;
    }

    .klass {
      color: #fbbf24;
    }

    .cm {
      color: #6b7280;
      font-style: italic;
    }

    .label-bad {
      display: inline-block;
      background: rgba(239, 68, 68, 0.15);
      color: #fca5a5;
      border: 1px solid rgba(239, 68, 68, 0.3);
      font-size: 0.7rem;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 6px;
      margin-top: 6px;
    }

    .label-good {
      display: inline-block;
      background: rgba(16, 185, 129, 0.15);
      color: #6ee7b7;
      border: 1px solid rgba(16, 185, 129, 0.3);
      font-size: 0.7rem;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 6px;
      margin-top: 6px;
    }

    .prompt-box {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 10px;
      padding: clamp(10px, 1.5vh, 16px);
      font-size: clamp(0.78rem, 1.25vh, 0.97rem);
      color: var(--text2);
      line-height: 1.65;
      margin-bottom: 8px;
    }

    .prompt-box strong {
      color: var(--cyan);
    }

    /* ============================
       FLOW STEPS (dev cycle)
       ============================ */
    .flow-steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(8px, 1.3vh, 14px);
      width: 100%;
    }

    .flow-step {
      background: var(--card);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: clamp(12px, 1.8vh, 20px);
      display: flex;
      align-items: flex-start;
      gap: 12px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
      transition: border-color 0.25s;
    }

    .flow-step:hover {
      border-color: rgba(99, 102, 241, 0.35);
    }

    .step-num {
      width: clamp(28px, 3.8vh, 42px);
      height: clamp(28px, 3.8vh, 42px);
      border-radius: 10px;
      background: var(--grad1);
      color: #fff;
      font-weight: 800;
      font-size: clamp(0.7rem, 1.1vh, 0.9rem);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-family: 'JetBrains Mono', monospace;
      box-shadow: 0 4px 12px var(--glow-indigo);
    }

    .step-body h4 {
      font-size: clamp(0.82rem, 1.3vh, 1.02rem);
      font-weight: 700;
      color: var(--text);
      margin-bottom: 3px;
    }

    .step-body p {
      font-size: clamp(0.72rem, 1.08vh, 0.86rem);
      color: var(--text3);
      line-height: 1.5;
      margin: 0;
    }

    /* ============================
       ERA GRID (3-col, app dev)
       ============================ */
    .era-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(12px, 1.8vh, 20px);
      width: 100%;
    }

    .era-card {
      background: var(--card);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: clamp(14px, 2.2vh, 26px);
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
      display: flex;
      flex-direction: column;
    }

    .era-card .era-year {
      margin-bottom: 4px;
    }

    .era-card h4 {
      font-size: clamp(0.9rem, 1.5vh, 1.15rem);
      font-weight: 800;
      color: var(--text);
      margin-bottom: 8px;
      line-height: 1.25;
    }

    .era-card p {
      font-size: clamp(0.85rem, 1.4vh, 1.05rem);
      color: var(--text2);
      line-height: 1.55;
      margin: 0;
      flex: 1;
    }

    .era-card p strong {
      color: var(--text2);
    }

    /* ============================
       LLM DIAGRAM
       ============================ */
    .llm-actors {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(10px, 1.5vh, 16px);
      width: 100%;
    }

    .actor-box {
      background: var(--card);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: clamp(12px, 1.7vh, 18px);
      text-align: center;
    }

    .actor-box h4 {
      font-size: clamp(0.95rem, 1.6vh, 1.15rem);
      font-weight: 700;
      color: var(--text);
      margin-bottom: 4px;
    }

    .actor-box p {
      font-size: clamp(0.85rem, 1.3vh, 1rem);
      color: var(--text2);
      line-height: 1.5;
      margin: 0;
    }

    .actor-msg {
      margin-top: 8px;
      border-radius: 8px;
      padding: 8px 10px;
      font-size: clamp(0.68rem, 1.05vh, 0.82rem);
      line-height: 1.5;
    }

    .msg-system {
      background: rgba(139, 92, 246, 0.15);
      color: #c4b5fd;
      border: 1px solid rgba(139, 92, 246, 0.25);
    }

    .msg-user {
      background: rgba(37, 99, 235, 0.15);
      color: #93c5fd;
      border: 1px solid rgba(37, 99, 235, 0.25);
    }

    .msg-asst {
      background: rgba(16, 185, 129, 0.15);
      color: #6ee7b7;
      border: 1px solid rgba(16, 185, 129, 0.25);
    }

    .llm-core {
      background: linear-gradient(135deg, rgba(99, 102, 241, 0.35), rgba(139, 92, 246, 0.25));
      border: 1px solid rgba(99, 102, 241, 0.3);
      border-radius: 16px;
      padding: clamp(12px, 1.8vh, 22px) clamp(20px, 2.8vw, 40px);
      text-align: center;
      width: 85%;
      margin-top: clamp(10px, 1.5vh, 16px);
      box-shadow: 0 0 30px rgba(99, 102, 241, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    .llm-core h4 {
      font-size: clamp(0.88rem, 1.45vh, 1.12rem);
      font-weight: 800;
      color: var(--text);
      margin-bottom: 5px;
    }

    .llm-core p {
      font-size: clamp(0.75rem, 1.15vh, 0.92rem);
      color: var(--text2);
      margin: 0;
      line-height: 1.5;
    }

    /* ============================
       CONTEXT BLOCKS
       ============================ */
    .ctx-block {
      border-radius: 9px;
      padding: clamp(7px, 1.1vh, 11px) clamp(10px, 1.2vw, 16px);
      font-size: clamp(0.72rem, 1.08vh, 0.88rem);
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border: 1px solid transparent;
    }

    .ctx-block span.tk {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.8em;
      opacity: 0.75;
    }

    .cb-always {
      background: rgba(16, 185, 129, 0.12);
      border-color: rgba(16, 185, 129, 0.25);
      color: #6ee7b7;
    }

    .cb-demand {
      background: rgba(245, 158, 11, 0.12);
      border-color: rgba(245, 158, 11, 0.25);
      color: #fcd34d;
    }

    .cb-var {
      background: rgba(139, 92, 246, 0.12);
      border-color: rgba(139, 92, 246, 0.25);
      color: #c4b5fd;
    }

    .cb-free {
      background: transparent;
      border: 1.5px dashed rgba(255, 255, 255, 0.15);
      color: var(--text4);
    }

    .cb-compact {
      background: rgba(239, 68, 68, 0.1);
      border-color: rgba(239, 68, 68, 0.25);
      color: #fca5a5;
    }

    .ctx-label {
      font-size: 0.6rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--text4);
      margin-bottom: 7px;
      margin-top: 10px;
    }

    .ctx-label:first-child {
      margin-top: 0;
    }

    /* ============================
       PHASE CARDS
       ============================ */
    .phase-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(12px, 1.8vh, 20px);
      width: 100%;
    }

    .phase-card {
      background: var(--card);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: clamp(14px, 2.2vh, 26px);
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06);
      transition: border-color 0.3s, transform 0.3s;
    }

    .phase-card:hover {
      transform: translateY(-2px);
      border-color: var(--border-bright);
    }

    .phase-badge {
      font-size: 0.62rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 2px;
      padding: 3px 10px;
      border-radius: 20px;
      display: inline-block;
      margin-bottom: clamp(8px, 1.2vh, 14px);
    }

    .pb-blue {
      background: rgba(59, 130, 246, 0.2);
      color: #93c5fd;
      border: 1px solid rgba(59, 130, 246, 0.3);
    }

    .pb-indigo {
      background: rgba(99, 102, 241, 0.2);
      color: #a5b4fc;
      border: 1px solid rgba(99, 102, 241, 0.3);
    }

    .pb-cyan {
      background: rgba(6, 182, 212, 0.2);
      color: #67e8f9;
      border: 1px solid rgba(6, 182, 212, 0.3);
    }

    .phase-card h4 {
      font-size: clamp(1rem, 1.7vh, 1.3rem);
      font-weight: 800;
      color: var(--text);
      margin-bottom: 3px;
    }

    .phase-sub {
      font-size: clamp(0.7rem, 1.05vh, 0.85rem);
      color: var(--text4);
      margin-bottom: clamp(8px, 1.3vh, 14px);
      font-weight: 500;
    }

    .phase-steps {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .phase-step {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: clamp(0.75rem, 1.15vh, 0.9rem);
      color: var(--text2);
    }

    .ps-num {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.65rem;
      font-weight: 800;
      color: #fff;
      flex-shrink: 0;
    }

    .psn-blue {
      background: linear-gradient(135deg, #2563eb, #3b82f6);
      box-shadow: 0 0 8px rgba(37, 99, 235, 0.4);
    }

    .psn-indigo {
      background: linear-gradient(135deg, #4338ca, #6366f1);
      box-shadow: 0 0 8px rgba(99, 102, 241, 0.4);
    }

    .psn-cyan {
      background: linear-gradient(135deg, #0891b2, #06b6d4);
      box-shadow: 0 0 8px rgba(6, 182, 212, 0.4);
    }

    /* ============================
       STEP DETAIL
       ============================ */
    .step-detail-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(12px, 1.8vh, 20px);
      width: 100%;
    }

    .step-detail {
      background: var(--card);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: clamp(14px, 2.2vh, 26px);
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    .step-label {
      font-size: 0.62rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: var(--text4);
      margin-bottom: 3px;
    }

    .step-detail h4 {
      font-size: clamp(0.95rem, 1.6vh, 1.22rem);
      font-weight: 800;
      color: var(--text);
      margin-bottom: clamp(8px, 1.3vh, 14px);
    }

    .step-detail p {
      font-size: clamp(0.88rem, 1.45vh, 1.1rem);
      color: var(--text2);
      line-height: 1.65;
      margin-bottom: 8px;
    }

    .step-detail p strong {
      color: var(--text);
    }

    .role-tag {
      display: inline-block;
      font-size: 0.67rem;
      font-weight: 700;
      padding: 2px 9px;
      border-radius: 20px;
      margin-bottom: 8px;
    }

    .rt-human {
      background: rgba(37, 99, 235, 0.2);
      color: #93c5fd;
      border: 1px solid rgba(37, 99, 235, 0.3);
    }

    .rt-ai {
      background: rgba(139, 92, 246, 0.2);
      color: #c4b5fd;
      border: 1px solid rgba(139, 92, 246, 0.3);
    }

    /* ============================
       BRIDGE SLIDE
       ============================ */
    .slide-bridge {
      background: transparent;
      text-align: center;
    }

    .bridge-main {
      position: relative;
      z-index: 2;
      font-size: clamp(2.8rem, 7.5vh, 6.5rem);
      font-weight: 900;
      letter-spacing: -0.04em;
      background: var(--grad1);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      line-height: 1.05;
      filter: drop-shadow(0 0 30px rgba(99, 102, 241, 0.3));
    }

    .bridge-sub {
      position: relative;
      z-index: 2;
      font-size: clamp(1rem, 1.9vh, 1.5rem);
      color: var(--text2);
      margin-top: clamp(10px, 1.7vh, 20px);
      font-weight: 400;
      line-height: 1.5;
    }

    .bridge-sub strong {
      color: var(--cyan);
    }

    .bridge-pills {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 18px;
      margin-top: clamp(20px, 3.2vh, 38px);
    }

    .bridge-pill {
      padding: clamp(8px, 1.2vh, 14px) clamp(18px, 2.2vw, 30px);
      border-radius: 50px;
      font-weight: 700;
      font-size: clamp(0.8rem, 1.3vh, 1rem);
    }

    .bp-left {
      background: rgba(255, 255, 255, 0.07);
      color: var(--text2);
      border: 1px solid rgba(255, 255, 255, 0.14);
    }

    .bp-right {
      background: var(--grad1);
      color: #fff;
      box-shadow: 0 4px 20px var(--glow-indigo);
    }

    .bp-arr {
      color: var(--indigo);
      font-size: 1.6rem;
      filter: drop-shadow(0 0 8px var(--glow-indigo));
    }

    /* ============================
       CLOSING / ACTION CARDS
       ============================ */
    .action-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(12px, 1.8vh, 22px);
      width: 100%;
      max-width: 940px;
    }

    .action-card {
      background: var(--card);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: clamp(16px, 2.4vh, 30px);
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      transition: border-color 0.3s, transform 0.3s;
    }

    .action-card:hover {
      transform: translateY(-3px);
      border-color: var(--border-bright);
    }

    .action-num {
      width: clamp(36px, 4.5vh, 52px);
      height: clamp(36px, 4.5vh, 52px);
      border-radius: 14px;
      background: var(--grad1);
      color: #fff;
      font-weight: 900;
      font-size: clamp(1rem, 1.8vh, 1.4rem);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: clamp(10px, 1.5vh, 18px);
      box-shadow: 0 4px 16px var(--glow-indigo);
    }

    .action-card p {
      font-size: clamp(0.92rem, 1.5vh, 1.15rem);
      color: var(--text);
      line-height: 1.65;
      flex: 1;
    }

    .action-card p strong {
      color: var(--cyan);
    }

    /* ============================
       FOOTNOTE
       ============================ */
    .footnote {
      color: var(--text3);
      font-size: clamp(0.65rem, 0.95vh, 0.8rem);
      color: var(--text4);
      margin-top: clamp(7px, 1.1vh, 12px);
      font-style: italic;
    }

    /* ============================
       NAVIGATION
       ============================ */
    .nav {
      position: fixed;
      bottom: 26px;
      right: 32px;
      display: flex;
      gap: 8px;
      z-index: 100;
    }

    .nav button {
      width: 46px;
      height: 46px;
      border-radius: 13px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      background: rgba(255, 255, 255, 0.07);
      color: rgba(255, 255, 255, 0.45);
      font-size: 1.1rem;
      cursor: pointer;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      transition: all 0.25s;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .nav button:hover {
      background: var(--indigo);
      border-color: var(--indigo);
      color: #fff;
      box-shadow: 0 4px 16px var(--glow-indigo);
    }

    .progress-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      height: 2px;
      background: var(--grad1);
      transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
      z-index: 100;
      box-shadow: 0 0 8px var(--glow-indigo);
    }

    .counter {
      position: fixed;
      bottom: 34px;
      left: 32px;
      font-size: 0.78rem;
      color: rgba(255, 255, 255, 0.2);
      font-weight: 700;
      font-family: 'JetBrains Mono', monospace;
      z-index: 100;
    }

    /* ============================
       RESPONSIVE
       ============================ */
    @media (max-height: 760px) {
      .slide {
        padding: clamp(16px, 2.5vh, 32px) clamp(22px, 3.5vw, 60px);
      }

      .section-num {
        font-size: 7rem;
      }
    }

    @media (max-width: 1200px) {
      .cg-4 {
        grid-template-columns: repeat(2, 1fr);
      }

      .three-col {
        grid-template-columns: 1fr;
        gap: 10px;
      }

      .col-arrow {
        transform: rotate(90deg);
        padding: 2px 0;
      }

      .phase-grid {
        grid-template-columns: 1fr;
        overflow-y: auto;
      }

      .action-grid {
        grid-template-columns: 1fr;
      }

      .timeline-nodes {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 800px) {
      .two-col {
        grid-template-columns: 1fr;
        gap: 12px;
      }

      .cg-2,
      .cg-4 {
        grid-template-columns: 1fr;
      }

      .comparison {
        grid-template-columns: 1fr;
        gap: 10px;
      }

      .comp-arrow {
        transform: rotate(90deg);
      }

      .timeline-line,
      .timeline-glow {
        display: none;
      }

      .step-detail-grid {
        grid-template-columns: 1fr;
      }

      .era-grid {
        grid-template-columns: 1fr;
      }

      .flow-steps {
        grid-template-columns: 1fr 1fr;
      }

      .llm-actors {
        grid-template-columns: 1fr;
      }

      .bridge-main {
        font-size: 3rem;
      }
    }