* { box-sizing: border-box; }
      body { background: #000; margin: 0; overflow: hidden; font-family: sans-serif; }

      /* ── Page loader ──────────────────────────────────────────────────────── */
      #loader {
        position: fixed; inset: 0; z-index: 99999;
        background: #000;
        display: flex; align-items: center; justify-content: center;
        transition: opacity 0.80s ease;
      }
      #loader.ld-out { opacity: 0; pointer-events: none; }

      .ld-inner {
        display: flex; flex-direction: column;
        align-items: center; gap: 18px;
      }

      .ld-ring-wrap { position: relative; width: 110px; height: 110px; }

      .ld-ring {
        width: 110px; height: 110px;
        transform: rotate(-90deg);
        overflow: visible;
      }
      .ld-ring-track {
        fill: none;
        stroke: rgba(255,255,255,0.06);
        stroke-width: 3;
      }
      .ld-ring-fill {
        fill: none;
        stroke: rgba(0,255,80,0.75);
        stroke-width: 3;
        stroke-linecap: round;
        stroke-dasharray: 276.46;
        stroke-dashoffset: 276.46;
        transition: stroke-dashoffset 0.32s ease;
        filter: drop-shadow(0 0 6px rgba(0,255,80,0.5));
      }

      .ld-pct-wrap {
        position: absolute; inset: 0;
        display: flex; align-items: center; justify-content: center;
      }
      #ld-pct {
        font-family: monospace; font-size: 26px; font-weight: 700;
        color: rgba(255,255,255,0.85); letter-spacing: -0.03em;
      }

      .ld-text {
        font-family: monospace; font-size: 9px;
        letter-spacing: 0.22em; text-transform: uppercase;
        color: rgba(255,255,255,0.20);
      }

      #bg-video {
        position: fixed;
        top: 50%; left: 50%;
        min-width: 100%; min-height: 100%;
        width: auto; height: auto;
        transform: translate(-50%, -50%);
        z-index: 0;
        object-fit: cover;
        pointer-events: none;
      }

      #bg-overlay {
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        z-index: 1;
        background: rgba(2, 4, 18, 0.72);
        pointer-events: none;
      }

      .particlehead {
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        z-index: 2;
        touch-action: none;   /* let JS handle all touch gestures */
      }

      .particlehead canvas { display: block; }


      /* ── Dropdown ─────────────────────────────────────────────────────── */
      #track-wrap {
        position: fixed;
        bottom: 16px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 200;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
      }

      #track-row {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      #track-menu {
        position: absolute;
        bottom: calc(100% + 10px);
        left: 0; right: 44px;
        background: rgba(7, 10, 26, 0.92);
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 16px;
        -webkit-backdrop-filter: blur(24px);
        backdrop-filter: blur(24px);
        overflow: hidden;
        box-shadow: 0 -12px 48px rgba(0,0,0,0.55);
        opacity: 0;
        transform: translateY(8px) scale(0.96);
        transform-origin: center bottom;
        pointer-events: none;
        transition: opacity 0.22s, transform 0.22s cubic-bezier(0.22,1,0.36,1);
      }

      #track-menu.open {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
      }

      .track-item {
        padding: 12px 20px;
        font-size: 13px;
        color: rgba(255,255,255,0.78);
        font-family: sans-serif;
        cursor: pointer;
        border-bottom: 1px solid rgba(255,255,255,0.05);
        transition: background 0.18s, color 0.18s;
        -webkit-user-select: none;
        user-select: none;
      }
      .track-item:last-child { border-bottom: none; }
      .track-item:hover     { background: rgba(255,255,255,0.07); color: #fff; }
      .track-item.active    { color: rgba(80,200,255,1); background: rgba(80,200,255,0.07); }
      .track-item.disabled  { opacity: 0.32; cursor: default; pointer-events: none; }

      #track-btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 12px 20px;
        background: rgba(255,255,255,0.07);
        border: 1px solid rgba(255,255,255,0.18);
        border-radius: 32px;
        color: rgba(255,255,255,0.88);
        font-size: 13px;
        font-family: sans-serif;
        letter-spacing: 0.05em;
        cursor: pointer;
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
        transition: background .25s, border-color .25s, color .25s, box-shadow .25s;
        outline: none;
        -webkit-user-select: none;
        user-select: none;
        width: 248px;
      }
      #track-btn:hover { background: rgba(255,255,255,0.12); }
      #track-btn.playing {
        border-color: rgba(80,200,255,0.75);
        color: rgba(80,200,255,1);
        box-shadow: 0 0 20px rgba(80,200,255,0.18);
      }

      .track-chevron {
        font-size: 10px;
        opacity: 0.55;
        transition: transform 0.22s;
        flex-shrink: 0;
      }
      #track-btn.open .track-chevron { transform: rotate(180deg); }

      /* ── Tech Stack Panels ────────────────────────────────────────────── */
      #ts-left, #ts-right {
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        gap: 12px;
        z-index: 100;
        pointer-events: none;
      }
      #ts-left  { left: 32px; }
      #ts-right { right: 32px; }

      /* right-side groups enter from the right */
      .ts-group-right {
        transform: perspective(700px) translateX(90px) rotateY(28deg) scale(0.88);
      }
      .ts-group-right.ts-in {
        transform: perspective(700px) translateX(0) rotateY(0deg) scale(1);
      }

      .ts-group {
        position: relative;
        background: rgba(6, 9, 24, 0.72);
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 18px;
        padding: 18px 20px 16px;
        -webkit-backdrop-filter: blur(28px);
        backdrop-filter: blur(28px);
        box-shadow: 0 20px 60px rgba(0,0,0,0.6),
                    inset 0 1px 0 rgba(255,255,255,0.07);
        min-width: 290px;
        overflow: hidden;
        pointer-events: auto;
        opacity: 0;
        transform: perspective(700px) translateX(-90px) rotateY(-28deg) scale(0.88);
        filter: blur(7px);
        transition:
          transform 0.75s cubic-bezier(0.34,1.4,0.64,1),
          opacity   0.65s cubic-bezier(0.22,1,0.36,1),
          filter    0.65s cubic-bezier(0.22,1,0.36,1);
      }

      /* glowing top accent line */
      .ts-group::before {
        content: '';
        position: absolute;
        top: 0; left: 18px; right: 18px;
        height: 1.5px;
        background: var(--ts-accent, rgba(255,255,255,0.3));
        box-shadow: 0 0 12px 3px var(--ts-glow, rgba(255,255,255,0.15));
        border-radius: 1px;
      }

      /* subtle top color wash */
      .ts-group::after {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 56px;
        background: linear-gradient(to bottom, var(--ts-wash, rgba(255,255,255,0.04)), transparent);
        pointer-events: none;
        border-radius: 18px 18px 0 0;
      }

      .ts-group.ts-in {
        opacity: 1;
        transform: perspective(700px) translateX(0) rotateY(0deg) scale(1);
        filter: blur(0px);
      }

      .ts-cat {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 14px;
      }

      .ts-cat-dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--ts-accent, #fff);
        box-shadow: 0 0 10px 3px var(--ts-glow, rgba(255,255,255,0.2));
        flex-shrink: 0;
      }

      .ts-cat-text { display: flex; flex-direction: column; gap: 2px; }

      .ts-cat-name {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(220,235,255,0.90);
        font-family: sans-serif;
        line-height: 1;
      }

      .ts-cat-sub {
        font-size: 9.5px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: rgba(160,185,220,0.45);
        font-family: sans-serif;
        line-height: 1;
      }

      .ts-tiles {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .ts-tile {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 7px;
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 14px;
        padding: 14px 12px 11px;
        min-width: 78px;
        cursor: default;
        -webkit-user-select: none;
        user-select: none;
        transition:
          background 0.28s,
          border-color 0.28s,
          transform 0.28s cubic-bezier(0.34,1.4,0.64,1),
          box-shadow 0.28s;
      }

      .ts-tile:hover {
        background: rgba(255,255,255,0.09);
        border-color: var(--ts-accent, rgba(255,255,255,0.25));
        transform: translateY(-5px) scale(1.06);
        box-shadow: 0 10px 28px var(--ts-glow, rgba(255,255,255,0.12));
      }

      .ts-tile-icon {
        width: 32px;
        height: 32px;
        object-fit: contain;
        display: block;
        filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
      }

      .ts-tile-label {
        font-size: 10.5px;
        color: rgba(210,225,255,0.78);
        font-family: sans-serif;
        white-space: nowrap;
        text-align: center;
        line-height: 1;
        letter-spacing: 0.02em;
      }

      #status {
        font-size: 11px;
        color: rgba(255,120,100,0.80);
        text-align: center;
      }

      /* ── Who Are You section ─────────────────────────────────────────── */
      #who-wrap {
        position: fixed;
        top: 50%;
        left: 32px;
        transform: translateY(-50%);
        z-index: 100;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        pointer-events: none;
        width: min(360px, 36vw);
        text-align: left;
      }

      .who-line {
        opacity: 0;
        transform: translateY(18px);
        filter: blur(6px);
        transition:
          opacity   0.70s ease,
          transform 0.70s cubic-bezier(0.34,1.2,0.64,1),
          filter    0.55s ease;
        will-change: transform, opacity, filter;
      }
      .who-line.who-in {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
      }

      .who-greeting {
        font-size: 11px;
        letter-spacing: 0.30em;
        text-transform: uppercase;
        color: rgba(180,210,255,0.85);
        font-family: sans-serif;
        margin-bottom: 4px;
      }

      .who-name {
        font-size: 34px;
        font-weight: 800;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: #fff;
        font-family: sans-serif;
        line-height: 1;
        text-shadow:
          0 0 22px rgba(255,255,255,0.85),
          0 0 55px rgba(97,218,251,0.50),
          0 0 100px rgba(97,218,251,0.20);
      }

      .who-divider {
        width: 0;
        height: 1px;
        background: linear-gradient(90deg, rgba(97,218,251,0.80), rgba(97,218,251,0.30), transparent);
        margin: 6px 0;
        opacity: 0;
        /* override the shared transition — divider expands width, doesn't translate */
        transform: none !important;
        filter: none !important;
        transition: width 0.95s cubic-bezier(0.22,1,0.36,1),
                    opacity 0.50s ease !important;
      }
      .who-divider.who-in {
        width: 210px;
        opacity: 1;
      }

      .who-role {
        font-size: 11px;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        color: rgba(97,218,251,0.95);
        font-family: sans-serif;
        margin-top: 2px;
      }

      .who-body {
        font-size: 14px;
        color: rgba(215,230,255,0.88);
        font-family: sans-serif;
        line-height: 1.65;
        letter-spacing: 0.01em;
        margin-top: 3px;
        white-space: normal;
      }

      /* ── Mobile: Who section moves below face ──────────────────────────── */
      @media (max-width: 768px) {
        .particlehead {
          transform: translateY(-20px); /* slight upward offset on mobile */
        }

        #who-wrap {
          top: auto;
          bottom: 76px;
          left: 16px;
          right: 16px;
          width: auto;
          transform: none;
          align-items: center;
          text-align: center;
          gap: 4px;
          /* bottom padding reserves room for the absolutely-positioned body lines */
          padding: 12px 18px 46px;
          border-radius: 14px;
          /* fully invisible by default — no blur, no background, nothing */
          background-color: rgba(2, 4, 18, 0);
          border: 1px solid rgba(255,255,255,0);
          -webkit-backdrop-filter: none;
          backdrop-filter: none;
          transition: background-color 0.50s ease, border-color 0.50s ease;
        }
        /* box only materialises when the section is actively playing */
        #who-wrap.who-active {
          background-color: rgba(2, 4, 18, 0.55);
          border-color: rgba(255,255,255,0.08);
          -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
        }

        /*
         * Body lines are pulled OUT of the flex flow so they never affect the
         * panel height. All three stack on top of each other at the bottom of
         * the panel — only the active one is visible.
         */
        .who-body {
          position: absolute;
          bottom: 12px;
          left: 18px;
          right: 18px;
          text-align: center;
          /* reset any height-collapsing from the base rules */
          max-height: none !important;
          overflow: visible !important;
          margin: 0 !important;
        }

        .who-greeting { font-size: 9px; letter-spacing: 0.26em; }
        .who-name     { font-size: 26px; letter-spacing: 0.05em;
                        text-shadow: 0 0 18px rgba(255,255,255,0.7),
                                     0 0 40px rgba(97,218,251,0.4); }
        .who-role     { font-size: 9px; letter-spacing: 0.20em; }
        .who-body     { font-size: 12px; line-height: 1.60; }
        .who-divider.who-in { width: 140px; }

        /* ── Tech Stack — mobile: single card above dropdown ──────────────── */

        /* both containers collapse to a zero-height anchor, same position */
        #ts-left, #ts-right {
          top: auto;
          left: 16px;
          right: 16px;
          bottom: 76px;        /* sits just above the track-wrap button */
          transform: none;
          height: 0;            /* groups absolutely positioned from here */
          overflow: visible;
        }

        /* all cards stack in the same visual slot */
        .ts-group {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          width: auto;
          min-width: 0;
          padding: 13px 14px 11px;
          border-radius: 14px;
          /* simpler enter-from-below animation on mobile */
          transform: translateY(22px) scale(0.96);
          filter: blur(5px);
        }
        .ts-group.ts-in {
          transform: translateY(0) scale(1);
          filter: blur(0);
        }
        /* right-side groups use the same animation as left on mobile */
        .ts-group-right {
          transform: translateY(22px) scale(0.96);
          filter: blur(5px);
        }
        .ts-group-right.ts-in {
          transform: translateY(0) scale(1);
          filter: blur(0);
        }

        /* compact tiles: 3-per-row */
        .ts-cat       { margin-bottom: 9px; }
        .ts-tiles     { gap: 6px; }
        .ts-tile {
          flex: 1 1 calc(33.33% - 4px);
          min-width: 0;
          padding: 9px 6px 8px;
          gap: 5px;
          border-radius: 11px;
        }
        .ts-tile-icon  { width: 24px; height: 24px; }
        .ts-tile-label { font-size: 9px; }
      }

      /* ── Mobile: Projects — boost visibility on orbiting nodes ───────────
         Keep the orbit animation; just give the circle and label enough
         background contrast so particles can't bleed through the text.        */
      @media (max-width: 768px) {
        .proj-node-circle {
          width: 76px; height: 76px;
          background: rgba(2, 5, 20, 0.82);
          box-shadow: 0 0 28px var(--pn-glow),
                      0 0 0 1px rgba(255,255,255,0.06),
                      inset 0 0 18px rgba(0,0,0,0.6);
          -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
        }
        .proj-node-circle svg { width: 36px; height: 36px; }

        /* dark pill behind the label */
        .proj-node-label {
          background: rgba(2, 5, 20, 0.75);
          -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
          padding: 4px 10px 5px;
          border-radius: 20px;
          border: 1px solid rgba(255,255,255,0.06);
        }
        .pnl-name { font-size: 10px; }
      }

      /* ── Mobile: Experience — stacked cards above dropdown ──────────────── */
      @media (max-width: 768px) {
        /* lifecycle card — invisible until section 4 plays */
        #exp-lifecycle {
          position: fixed;
          left: 16px; right: 16px;
          bottom: 76px; top: auto;
          transform: translateY(12px);
          opacity: 0;                          /* hidden by default */
          padding: 12px 14px 10px 20px;
          border-left: none;
          background: rgba(6, 9, 24, 0.80);
          border: 1px solid rgba(255,255,255,0.08);
          border-radius: 14px;
          -webkit-backdrop-filter: blur(24px);
          backdrop-filter: blur(24px);
          box-shadow: 0 16px 48px rgba(0,0,0,0.55);
          transition: opacity 0.45s ease, transform 0.45s ease;
          pointer-events: none;
        }
        #exp-lifecycle.exp-show {
          opacity: 1;
          transform: translateY(0);
          pointer-events: auto;
        }
        #exp-lifecycle.exp-hide {
          opacity: 0;
          transform: translateY(10px);
          pointer-events: none;
        }

        .exp-phase { padding: 7px 0 7px 12px; }
        .exp-phase-num  { font-size: 7px; margin-bottom: 2px; }
        .exp-phase-text { font-size: 12px; white-space: normal; }
        .exp-phase::before { left: -20px; }

        /* company card — invisible until it's cued */
        #exp-company {
          position: fixed;
          left: 16px; right: 16px;
          bottom: 76px; top: auto;
          transform: translateY(22px);
          opacity: 0;                          /* hidden by default */
          min-width: 0; width: auto;
          align-items: flex-start;
          padding: 14px 16px 12px;
          background: rgba(6, 9, 24, 0.80);
          border: 1px solid rgba(255,255,255,0.08);
          border-radius: 14px;
          -webkit-backdrop-filter: blur(24px);
          backdrop-filter: blur(24px);
          box-shadow: 0 16px 48px rgba(0,0,0,0.55);
          transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22,1,0.36,1);
          pointer-events: none;
        }
        #exp-company.exp-in {
          opacity: 1;
          transform: translateY(0);
          pointer-events: auto;
        }

        .exp-company-name {
          font-size: clamp(26px, 8vw, 36px);
          text-align: left;
          margin-bottom: 6px;
          letter-spacing: -0.02em;
        }
        .exp-company-sub { text-align: left; margin-bottom: 10px; }
        .exp-divider      { margin-bottom: 10px; }

        /* domains: left-aligned, thinner spacing */
        .exp-domain {
          justify-content: flex-start;
          flex-direction: row-reverse;  /* dot → text (matches left-align feel) */
          border-right: none;
          border-left: 2px solid var(--ed-accent, rgba(255,255,255,0.3));
          padding: 5px 0 5px 12px;
          margin-bottom: 6px;
        }
        .exp-domain-text { font-size: 10px; }
      }

      /* ── Projects — Constellation Nodes (orbital) ──────────────────────── */
      #proj-wrap {
        position: fixed;
        inset: 0;
        z-index: 100;
        pointer-events: none;
      }

      /* orbit anchor — JS sets transform: translate() to move along ellipse */
      .proj-node {
        position: absolute;
        left: 50%;
        top: 50%;
      }

      /* entry animation wrapper — scale pop + blur fade */
      .proj-node-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        opacity: 0;
        transform: scale(0.2);
        filter: blur(14px);
        transition:
          opacity   0.75s ease,
          transform 0.75s cubic-bezier(0.34,1.5,0.64,1),
          filter    0.60s ease;
      }
      .proj-node.proj-in .proj-node-inner {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
      }

      .proj-node-circle {
        position: relative;
        width: 100px; height: 100px;
        border-radius: 50%;
        background: rgba(0,0,0,0.52);
        border: 2px solid var(--pn-accent, rgba(255,255,255,0.3));
        box-shadow: 0 0 36px var(--pn-glow, rgba(255,255,255,0.1)),
                    inset 0 0 24px rgba(0,0,0,0.5);
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .proj-node-circle svg {
        width: 50px; height: 50px;
        color: var(--pn-accent, #fff);
        overflow: visible;
      }

      .proj-node-ring {
        position: absolute;
        inset: -2px;
        border-radius: 50%;
        border: 1.5px solid var(--pn-accent, rgba(255,255,255,0.25));
        opacity: 0;
        transform: scale(1);
      }
      .proj-node.proj-in .proj-node-ring {
        animation: pn-ring 3.2s 0.7s ease-out infinite;
      }
      .proj-node.proj-in .proj-node-ring.pnr2 {
        animation: pn-ring 3.2s 1.6s ease-out infinite;
      }
      @keyframes pn-ring {
        0%   { transform: scale(1);   opacity: 0.60; }
        100% { transform: scale(2.2); opacity: 0;    }
      }

      .proj-node-label {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.50s 0.45s ease, transform 0.50s 0.45s ease;
      }
      .proj-node.proj-in .proj-node-label {
        opacity: 1;
        transform: translateY(0);
      }
      .pnl-name {
        font-family: sans-serif;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--pn-accent, #fff);
        text-shadow: 0 0 18px var(--pn-glow, transparent);
        white-space: nowrap;
      }
      /* tech detail line — hidden on desktop, shown in mobile card */
      .pnl-sub { display: none; }

      /* ── Experience — lifecycle + company ──────────────────────────────── */
      #exp-wrap {
        position: fixed;
        inset: 0;
        z-index: 100;
        pointer-events: none;
      }

      /* left: lifecycle timeline */
      #exp-lifecycle {
        position: absolute;
        left: 4vw;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        gap: 0;
        padding-left: 22px;
        border-left: 1px solid rgba(255,255,255,0.07);
      }

      .exp-phase {
        position: relative;
        padding: 11px 0 11px 14px;
        opacity: 0;
        transform: translateX(-18px);
        transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22,1,0.36,1);
      }
      .exp-phase.exp-in { opacity: 1; transform: translateX(0); }

      .exp-phase::before {
        content: '';
        position: absolute;
        left: -27px;
        top: 50%; transform: translateY(-50%);
        width: 8px; height: 8px;
        border-radius: 50%;
        background: var(--ep-accent, rgba(255,255,255,0.3));
        box-shadow: 0 0 10px var(--ep-accent, transparent);
        opacity: 0;
        transition: opacity 0.4s 0.25s ease;
      }
      .exp-phase.exp-in::before { opacity: 1; }

      .exp-phase-num {
        font-family: monospace;
        font-size: 8px;
        letter-spacing: 0.20em;
        color: rgba(255,255,255,0.18);
        margin-bottom: 3px;
      }
      .exp-phase-text {
        font-family: sans-serif;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.03em;
        color: rgba(255,255,255,0.80);
        white-space: nowrap;
      }

      /* right: company name + domains */
      #exp-company {
        position: absolute;
        right: 5vw;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        min-width: 280px;
      }

      .exp-company-name {
        font-family: sans-serif;
        font-weight: 900;
        font-size: clamp(38px, 5vw, 68px);
        line-height: 1.02;
        color: #fff;
        letter-spacing: -0.025em;
        text-align: right;
        margin-bottom: 10px;
      }
      .exp-name-line { display: block; overflow: hidden; }
      .exp-name-inner {
        display: block;
        transform: translateY(108%);
        transition: transform 0.80s cubic-bezier(0.22,1,0.36,1);
      }
      .exp-name-inner.exp-in { transform: translateY(0); }

      .exp-company-sub {
        font-family: sans-serif;
        font-size: 10.5px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: rgba(255,255,255,0.32);
        text-align: right;
        margin-bottom: 16px;
        opacity: 0;
        transition: opacity 0.6s 0.60s ease;
      }
      #exp-company.exp-in .exp-company-sub { opacity: 1; }

      .exp-divider {
        height: 1px;
        width: 0%;
        background: rgba(255,255,255,0.15);
        align-self: stretch;
        margin-bottom: 16px;
        transition: width 1.0s 0.35s ease;
      }
      #exp-company.exp-in .exp-divider { width: 100%; }

      .exp-domain {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        padding: 7px 0 7px 18px;
        border-right: 2px solid var(--ed-accent, rgba(255,255,255,0.3));
        margin-bottom: 10px;
        opacity: 0;
        transform: translateX(16px);
        transition: opacity 0.50s ease, transform 0.50s cubic-bezier(0.22,1,0.36,1);
      }
      .exp-domain.exp-in { opacity: 1; transform: translateX(0); }

      .exp-domain-dot {
        width: 6px; height: 6px;
        border-radius: 50%;
        background: var(--ed-accent, #fff);
        box-shadow: 0 0 8px var(--ed-accent, transparent);
        flex-shrink: 0;
      }
      .exp-domain-text {
        font-family: sans-serif;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.10em;
        text-transform: uppercase;
        color: rgba(255,255,255,0.78);
        white-space: nowrap;
      }

      /* ── Let's Connect — left email · right phone ──────────────────────── */
      #con-wrap {
        position: fixed;
        inset: 0;
        z-index: 100;
        pointer-events: none;
      }

      #con-left  { position: absolute; left: 5vw;  top: 50%; transform: translateY(-50%); }
      #con-right { position: absolute; right: 5vw; top: 50%; transform: translateY(-50%); }

      .con-panel {
        min-width: 270px;
        padding: 28px 28px 24px;
        background: rgba(4,6,14,0.74);
        border: 1px solid rgba(255,255,255,0.07);
        border-radius: 16px;
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        box-shadow: 0 10px 48px rgba(0,0,0,0.55),
                    0 0 40px var(--con-glow, transparent);
        pointer-events: auto;
        opacity: 0;
        filter: blur(12px);
        transition: opacity 0.75s ease,
                    transform 0.75s cubic-bezier(0.22,1,0.36,1),
                    filter 0.60s ease;
      }
      #con-left  .con-panel { transform: translateX(-32px); border-left:  2px solid var(--con-accent, rgba(255,255,255,0.2)); }
      #con-right .con-panel { transform: translateX( 32px); border-right: 2px solid var(--con-accent, rgba(255,255,255,0.2)); }
      .con-panel.con-in     { opacity: 1; transform: translateX(0); filter: blur(0); }

      /* pulsing "available" dot */
      .con-avail {
        display: flex; align-items: center; gap: 8px;
        margin-bottom: 20px;
      }
      .con-avail-dot {
        position: relative;
        width: 7px; height: 7px;
        border-radius: 50%;
        background: #22c55e;
        box-shadow: 0 0 8px #22c55e;
      }
      .con-avail-dot::after {
        content: '';
        position: absolute;
        inset: -3px;
        border-radius: 50%;
        background: #22c55e;
        opacity: 0.6;
        animation: con-alive 2.2s ease-out infinite;
      }
      @keyframes con-alive {
        0%   { transform: scale(1);   opacity: 0.6; }
        100% { transform: scale(2.8); opacity: 0;   }
      }
      .con-avail-text {
        font-family: monospace; font-size: 8.5px;
        letter-spacing: 0.16em; text-transform: uppercase;
        color: #22c55e;
      }

      /* type label */
      .con-lbl {
        font-family: sans-serif; font-size: 8.5px;
        font-weight: 700; letter-spacing: 0.22em;
        text-transform: uppercase;
        color: rgba(255,255,255,0.24);
        margin-bottom: 10px;
      }

      /* contact value */
      .con-val {
        font-family: monospace;
        font-size: clamp(15px, 1.6vw, 28px);
        font-weight: 700; line-height: 1.35;
        color: var(--con-accent, #fff);
        margin-bottom: 18px;
        letter-spacing: 0.01em;
        min-height: 2.7em;
        word-break: break-all;
      }
      .con-phone-val {
        font-size: clamp(22px, 2.8vw, 42px);
        letter-spacing: 0.04em;
        line-height: 1.2;
      }
      .con-prefix {
        font-size: 0.55em;
        opacity: 0.55;
        letter-spacing: 0.08em;
      }

      /* phone slot-machine digits */
      .con-digit {
        display: inline-block;
        font-variant-numeric: tabular-nums;
        min-width: 0.62em;
        text-align: center;
      }

      /* email cursor */
      .con-cursor {
        display: inline-block;
        width: 2px; height: 0.85em;
        background: var(--con-accent, #fff);
        vertical-align: text-bottom;
        margin-left: 1px;
        animation: con-cur .65s step-end infinite;
      }
      @keyframes con-cur { 0%,100%{opacity:1} 50%{opacity:0} }

      /* divider */
      .con-div {
        height: 1px; width: 0%;
        background: rgba(255,255,255,0.10);
        margin-bottom: 16px;
        transition: width 1.0s 0.25s ease;
      }
      .con-panel.con-in .con-div { width: 100%; }

      /* action links */
      .con-actions { display: flex; gap: 12px; flex-wrap: wrap; }
      .con-act {
        display: inline-flex; align-items: center; gap: 5px;
        font-family: sans-serif; font-size: 9px;
        font-weight: 700; letter-spacing: 0.16em;
        text-transform: uppercase;
        color: rgba(255,255,255,0.35);
        text-decoration: none;
        padding: 6px 0;
        border-bottom: 1px solid transparent;
        transition: color .25s ease, border-color .25s ease;
        opacity: 0;
        transition: color .25s, border-color .25s, opacity 0.5s 0.55s ease;
      }
      .con-panel.con-in .con-act { opacity: 1; }
      .con-act:hover { color: var(--con-accent, #fff); border-bottom-color: var(--con-accent, #fff); }
      .con-act-arrow { font-size: 11px; }

      /* ── Mobile: Let's Connect — stacked cards above dropdown ──────────── */
      @media (max-width: 768px) {
        /* turn con-wrap into a bottom-anchored flex column */
        #con-wrap {
          position: fixed;
          inset: auto;
          bottom: 96px;
          left: 16px;
          right: 16px;
          top: auto;
          display: flex;
          flex-direction: column;
          gap: 8px;
        }

        /* panels become flex children — no absolute positioning */
        #con-left, #con-right {
          position: static;
          transform: none;
        }

        /* entry animation: slide up from below */
        #con-left  .con-panel,
        #con-right .con-panel {
          transform: translateY(22px);
          /* drop side borders — use a centered top accent line via box-shadow */
          border-left: none;
          border-right: none;
          border-top: none;
          border-bottom: none;
          border: 1px solid rgba(255,255,255,0.08);
          box-shadow: 0 -2px 0 0 var(--con-accent),
                      0 16px 40px rgba(0,0,0,0.5);
        }
        .con-panel.con-in { transform: translateY(0); }

        /* compact, centered layout */
        .con-panel {
          min-width: 0;
          padding: 14px 20px 14px;
          border-radius: 14px;
          text-align: center;
        }

        /* hide non-essential chrome on mobile */
        .con-avail, .con-lbl, .con-div, .con-actions { display: none; }

        .con-val {
          font-size: clamp(13px, 4.2vw, 17px);
          min-height: 0;
          margin-bottom: 0;
          justify-content: center;
          letter-spacing: 0.03em;
        }
        .con-phone-val {
          font-size: clamp(22px, 7vw, 30px);
          letter-spacing: 0.06em;
          justify-content: center;
        }
      }

      /* ── Mute button ─────────────────────────────────────────────────── */
      .ac-btn {
        display: flex; align-items: center; justify-content: center;
        width: 36px; height: 36px;
        border-radius: 50%;
        background: rgba(255,255,255,0.07);
        border: 1px solid rgba(255,255,255,0.14);
        color: rgba(255,255,255,0.75);
        cursor: pointer;
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        transition: background 0.22s, border-color 0.22s, color 0.22s;
        -webkit-user-select: none; user-select: none;
        outline: none;
      }
      .ac-btn svg { width: 15px; height: 15px; }
      .ac-btn:hover { background: rgba(255,255,255,0.14); color: #fff; }
      .ac-btn.ac-active { background: rgba(80,200,255,0.12); border-color: rgba(80,200,255,0.5); color: rgba(80,200,255,1); }

      /* ── Drag hint — mobile only ─────────────────────────────────────────── */
      @keyframes dh-sway {
        0%   { transform: translateX(0); }
        25%  { transform: translateX(-18px); }
        75%  { transform: translateX(18px); }
        100% { transform: translateX(0); }
      }
      @keyframes dh-fade-l {
        0%, 50%, 100% { opacity: 0.2; }
        20%            { opacity: 1; }
      }
      @keyframes dh-fade-r {
        0%, 50%, 100% { opacity: 0.2; }
        70%            { opacity: 1; }
      }

      #drag-hint { display: none; pointer-events: none; }

      @media (max-width: 768px) {
        #drag-hint {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 7px;
          position: fixed;
          bottom: 84px;
          left: 50%;
          transform: translateX(-50%);
          z-index: 150;
          pointer-events: none;
          opacity: 0;
          transition: opacity 0.5s ease;
          color: rgba(255,255,255,0.72);
        }
        #drag-hint.dh-show { opacity: 1; }

        .dh-row {
          display: flex;
          align-items: center;
          gap: 16px;
        }
        .dh-palm {
          width: 40px;
          height: 40px;
          animation: dh-sway 2s ease-in-out infinite;
          filter: invert(1) drop-shadow(0 0 6px rgba(80,200,255,0.5));
        }
        .dh-palm img { width: 100%; height: 100%; display: block; }
        .dh-chev { width: 14px; height: 24px; }
        .dh-chev-l { animation: dh-fade-l 2s ease-in-out infinite; }
        .dh-chev-r { animation: dh-fade-r 2s ease-in-out infinite; }
        .dh-lbl {
          font-size: 10px;
          letter-spacing: 0.12em;
          text-transform: uppercase;
          font-family: sans-serif;
          opacity: 0.65;
        }
      }

      /* ── Large Desktop (1440px+, e.g. 1920×1080) ─────────────────────── */
      @media (min-width: 1440px) {
        #ts-left  { left: 48px; gap: 18px; }
        #ts-right { right: 48px; gap: 18px; }

        .ts-group {
          min-width: 370px;
          padding: 24px 26px 22px;
          border-radius: 22px;
        }

        .ts-group::after {
          height: 72px;
          border-radius: 22px 22px 0 0;
        }

        .ts-cat {
          gap: 13px;
          margin-bottom: 18px;
        }

        .ts-cat-dot {
          width: 11px;
          height: 11px;
        }

        .ts-cat-name {
          font-size: 15px;
        }

        .ts-cat-sub {
          font-size: 11px;
        }

        .ts-tiles {
          gap: 11px;
        }

        .ts-tile {
          min-width: 100px;
          padding: 18px 16px 15px;
          gap: 10px;
          border-radius: 17px;
        }

        .ts-tile-icon {
          width: 44px;
          height: 44px;
        }

        .ts-tile-label {
          font-size: 13px;
        }

        #who-wrap { left: 48px; width: min(440px, 36vw); gap: 7px; }
        .who-name { font-size: 46px; }
        .who-role { font-size: 13px; }
        .who-body { font-size: 17px; }
        .who-divider.who-in { width: 270px; }

        .proj-node-circle { width: 120px; height: 120px; }
        .proj-node-circle svg { width: 60px; height: 60px; }
        .pnl-name { font-size: 13px; letter-spacing: 0.18em; }

        #exp-lifecycle { left: 5vw; }
        #exp-company   { right: 6vw; }
        .exp-phase-text { font-size: 16px; }
        .exp-domain-text { font-size: 13px; }
        .exp-domain { margin-bottom: 13px; }

        /* contact panels */
        .con-panel { min-width: 380px; padding: 36px 36px 30px; border-radius: 20px; }
        .con-lbl { font-size: 11px; letter-spacing: 0.24em; margin-bottom: 12px; }
        .con-avail { margin-bottom: 26px; }
        .con-avail-dot { width: 10px; height: 10px; }
        .con-avail-text { font-size: 11px; }
        .con-val { font-size: 26px; margin-bottom: 22px; }
        .con-phone-val { font-size: 46px; letter-spacing: 0.05em; }
        .con-prefix { font-size: 0.50em; }
        .con-div { margin-bottom: 20px; }
        .con-act { font-size: 11px; padding: 8px 0; }
        .con-act-arrow { font-size: 14px; }
      }