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

    :root {
      --bg:        #050a18;
      --surface:   #0c1226;
      --card:      #101828;
      --border:    #1e2d4a;
      --accent1:   #3b82f6;
      --accent2:   #818cf8;
      --green:     #34d399;
      --text:      #f1f5f9;
      --muted:     #64748b;
      --subtle:    #94a3b8;
      --radius:    12px;
      --layout-viewport-width: 100vw;
      --layout-viewport-half: 50vw;
    }

    html {
      scroll-behavior: smooth;
      background: var(--bg);
      /* So in-page anchors land below the fixed navbar instead of under it. */
      scroll-padding-top: 90px;
    }

    body {
      font-family: 'Inter', sans-serif;
      background: transparent;
      color: var(--text);
      overflow-x: hidden;
      position: relative;
    }

    /* ── SCROLLBAR ────────────────────────── */
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: var(--bg); }
    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

    /* ── NAV ──────────────────────────────── */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      display: flex; align-items: center; justify-content: space-between;
      padding: 1rem 2.5rem;
      transition: background 0.3s, backdrop-filter 0.3s, border-bottom 0.3s;
    }
    nav.scrolled {
      background: rgba(5, 10, 24, 0.85);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
    }
    .nav-logo {
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 700; font-size: 1.25rem;
      background: linear-gradient(135deg, var(--accent1), var(--accent2));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      text-decoration: none;
    }
    .nav-links { display: flex; gap: 2rem; list-style: none; }
    .nav-links a {
      color: var(--subtle); font-size: 0.9rem; text-decoration: none;
      transition: color 0.2s, text-shadow 0.2s;
    }
    .nav-links a:hover,
    .nav-links a.nav-active { color: var(--accent1); text-shadow: 0 0 14px rgba(59,130,246,0.55); }
    .nav-toggle {
      display: none;
      /* 44×44 hits the WCAG / Apple HIG minimum tap target. */
      width: 44px; height: 44px; border-radius: 8px;
      border: 1px solid var(--border);
      background: rgba(12,18,38,0.78);
      color: var(--text); cursor: pointer;
      align-items: center; justify-content: center; flex-direction: column; gap: 5px;
      transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    }
    .nav-toggle span {
      width: 17px; height: 2px; border-radius: 2px;
      background: currentColor;
      transition: transform 0.2s, opacity 0.2s;
    }
    .nav-toggle:hover,
    .nav-toggle[aria-expanded="true"] {
      border-color: rgba(96,165,250,0.5);
      background: rgba(59,130,246,0.12);
      box-shadow: 0 0 16px rgba(59,130,246,0.18);
    }
    .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* ── HERO ─────────────────────────────── */
    #hero {
      position: relative; min-height: 100vh;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      text-align: center; padding: 0 1.5rem; overflow: hidden;
    }
    #starCanvas {
      position: fixed; top: 0; left: 0;
      width: 100vw; height: 100vh;
      pointer-events: none; z-index: -1;
      transition: opacity 0.8s ease, filter 0.8s ease;
    }
    html[data-site-mood="sleepy"] #starCanvas {
      opacity: 0.66;
      filter: saturate(0.72) brightness(0.82);
    }
    html[data-site-waking="1"] #starCanvas {
      opacity: 1;
      filter: saturate(1.18) brightness(1.12);
    }
    /* Sections that float OVER the starfield (cover stars with solid bg) */
    .solid-section { background: var(--bg); position: relative; z-index: 1; }
    /* Starry sections explicitly transparent so the fixed canvas shows through */
    .star-section  { background: transparent; position: relative; z-index: 1; }
    .hero-content { position: relative; z-index: 1; max-width: 800px; }
    .hero-eyebrow {
      display: inline-flex; align-items: center; gap: 0.45rem;
      font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em;
      text-transform: uppercase; color: var(--subtle);
      border: 1px solid rgba(96,165,250,0.22);
      padding: 0.28rem 0.8rem; border-radius: 100px;
      margin-bottom: 1.1rem;
      background: rgba(59,130,246,0.05);
      box-shadow: 0 0 14px rgba(59,130,246,0.08);
      position: relative; overflow: hidden;
      /* Hidden during the intro — fades in after the sub-line is typed. */
      opacity: 0;
      transform: translateY(4px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .hero-eyebrow.fade-in {
      opacity: 1;
      transform: translateY(0);
    }
    .hero-eyebrow-dot {
      display: inline-block; width: 7px; height: 7px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 10px rgba(52,211,153,0.7);
      animation: livingStatusBreath 3.8s ease-in-out infinite;
    }
    @keyframes livingStatusBreath {
      0%, 100% {
        transform: scale(0.9);
        opacity: 0.78;
        box-shadow: 0 0 8px rgba(52,211,153,0.52);
      }
      50% {
        transform: scale(1.16);
        opacity: 1;
        box-shadow: 0 0 14px rgba(52,211,153,0.86), 0 0 24px rgba(96,165,250,0.18);
      }
    }
    .hero-eyebrow::after {
      content: ''; position: absolute;
      top: 0; bottom: 0; width: 45%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
      transform: translateX(300%);
    }
    .hero-eyebrow.shimmer::after {
      animation: pillShimmer 1.6s ease-in-out forwards;
    }
    @keyframes pillShimmer {
      from { transform: translateX(300%); }
      to   { transform: translateX(-300%); }
    }
    .hero-name {
      font-family: 'Space Grotesk', sans-serif;
      font-size: clamp(3rem, 8vw, 6rem);
      font-weight: 700; line-height: 1.05;
      margin-bottom: 0.75rem;
      white-space: nowrap;
      --hero-greeting-shift: 0px;
    }
    .hero-greeting,
    .hero-name-rest {
      display: inline-block;
      transition:
        opacity 0.8s ease,
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.8s ease;
      will-change: opacity, transform, filter;
    }
    .hero-name.hero-name-final .hero-greeting {
      opacity: 0;
      transform: translateX(-0.4em) scale(0.98);
      filter: blur(2px);
    }
    .hero-name.hero-name-final .hero-name-rest {
      transform: translateX(calc(var(--hero-greeting-shift) * -1));
    }
    .hero-name .hero-name-accent {
      background: linear-gradient(135deg, #60a5fa, #a78bfa, #34d399);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    }
    .hero-name-cursor {
      width: 3px; height: 0.78em;
      vertical-align: -0.08em;
    }
    .hero-sub {
      font-size: clamp(1rem, 2.5vw, 1.2rem);
      color: var(--subtle); max-width: none; margin: 0 auto;
      line-height: 1.7;
      white-space: nowrap;
    }
    /* Allow wrapping on phones where a single line would overflow. The post-
       intro centering transform also has to be disabled — at narrow widths it
       was pushing "I'm Jonathan." off-screen to the left. */
    @media (max-width: 600px) {
      .hero-name {
        white-space: normal;
        font-size: clamp(2.25rem, 11vw, 3.4rem);
        text-align: center;
      }
      .hero-name.hero-name-final .hero-name-rest { transform: none; }
      .hero-sub { white-space: normal; max-width: 500px; }
    }

    /* ── PROJECTS TITLE TYPE ── */
    .projects-type-wrap {
      display: inline-grid;
      white-space: nowrap;
      vertical-align: baseline;
      color: var(--accent1);
      font-family: 'Inter', sans-serif;
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.15em;
    }
    .projects-type-wrap::before {
      content: attr(data-final);
      grid-area: 1 / 1;
      visibility: hidden;
      pointer-events: none;
    }
    .projects-type-live {
      grid-area: 1 / 1;
    }
    #projectsTypeTarget {
      color: inherit;
      font: inherit;
      letter-spacing: inherit;
    }
    .projects-type-cursor { width: 1.5px; height: 0.7rem; background: var(--accent1); }

    .typed-copy {
      display: grid;
      align-items: start;
    }
    .typed-copy::after,
    .typed-copy-live {
      grid-area: 1 / 1;
      min-width: 0;
    }
    .typed-copy::after {
      content: attr(data-final);
      visibility: hidden;
      pointer-events: none;
      white-space: normal;
    }

    /* ── TYPING EFFECT ── */
    #typeTarget { color: var(--text); font-weight: 500; }
    #typeTargetAccent { font-weight: 600; }
    /* Each character of the accent tagline floats away in zero-G after being
       typed — drift direction and rotation are randomized per-char inline. */
    #typeTargetAccent .float-char {
      display: inline-block;
      will-change: transform, opacity;
      transform: translate(var(--x, 0px), var(--y, 0px)) rotate(var(--rot, 0deg));
      opacity: var(--float-opacity, 1);
    }
    #typeTargetAccent .float-char.float-returning {
      text-shadow: 0 0 10px rgba(96,165,250,0.26);
    }
    /* A letter coming back after fully drifting away. */
    @keyframes accentReturn {
      from { opacity: 0; transform: scale(0.85); }
      to   { opacity: 1; transform: scale(1); }
    }
    #typeTargetAccent .accent-return {
      display: inline-block;
      animation: accentReturn 0.55s ease-out;
    }
    .type-cursor {
      display: inline-block; width: 2px; height: 0.85em;
      background: var(--accent1); margin-left: 1px;
      vertical-align: text-bottom;
      animation: cursorBlink 0.9s step-end infinite;
      transition: opacity 0.5s;
    }
    @keyframes cursorBlink { 0%,100%{opacity:1} 50%{opacity:0} }
    /* A cursor that's deliberately hidden during the intro until JS reveals it. */
    .type-cursor.intro-hidden {
      visibility: hidden;
      animation: none;
    }

    /* ── TALKING FACE (shared visual base) ──── */
    .face {
      position: relative;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.7s ease;
      /* Reduced halo — the brightness now lives in the stroke itself rather
         than in a wide soft glow. */
      filter:
        drop-shadow(0 0 6px rgba(167,139,250,0.22))
        drop-shadow(0 0 12px rgba(167,139,250,0.09));
    }
    .face:hover,
    .face:focus-visible {
      filter:
        drop-shadow(0 0 9px rgba(167,139,250,0.36))
        drop-shadow(0 0 18px rgba(167,139,250,0.20))
        drop-shadow(0 0 28px rgba(167,139,250,0.10));
    }
    /* Particle burst — used when the face is "exploded" out. */
    .face-particle {
      position: absolute;
      left: 50%; top: 50%;
      width: 6px; height: 6px;
      border-radius: 50%;
      background: currentColor;
      filter: drop-shadow(0 0 6px currentColor);
      pointer-events: none;
      transform: translate(-50%, -50%) scale(0.6);
      animation: faceParticleBurst 0.95s cubic-bezier(0.18, 0.7, 0.42, 1) forwards;
    }
    @keyframes faceParticleBurst {
      0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 1; }
      55%  { opacity: 1; }
      100% {
        transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty)))
                   scale(0.1) rotate(var(--rot));
        opacity: 0;
      }
    }
    .site-spark-layer {
      position: fixed;
      inset: 0;
      z-index: 180;
      pointer-events: none;
      overflow: hidden;
    }
    .site-spark {
      position: absolute;
      left: 0;
      top: 0;
      width: var(--spark-size);
      height: var(--spark-size);
      border-radius: 999px;
      background: var(--spark-color);
      color: var(--spark-color);
      box-shadow: 0 0 10px currentColor, 0 0 18px rgba(96,165,250,0.18);
      transform: translate3d(var(--spark-x), var(--spark-y), 0) translate(-50%, -50%) scale(0.7);
      animation: siteSparkDrift 1.02s cubic-bezier(0.16, 0.72, 0.32, 1) forwards;
    }
    @keyframes siteSparkDrift {
      0% {
        opacity: 0;
        transform: translate3d(var(--spark-x), var(--spark-y), 0) translate(-50%, -50%) scale(0.55);
      }
      16% { opacity: 1; }
      100% {
        opacity: 0;
        transform:
          translate3d(var(--spark-x), var(--spark-y), 0)
          translate(calc(-50% + var(--spark-tx)), calc(-50% + var(--spark-ty)))
          rotate(var(--spark-rot))
          scale(0.12);
      }
    }
    .mission-ping {
      animation: missionAgentPing 1.05s ease-out;
    }
    .face.is-transmitting {
      filter:
        drop-shadow(0 0 10px rgba(52,211,153,0.28))
        drop-shadow(0 0 20px rgba(96,165,250,0.18));
    }
    @keyframes missionAgentPing {
      0%, 100% { filter: inherit; }
      35% {
        filter:
          drop-shadow(0 0 12px rgba(52,211,153,0.62))
          drop-shadow(0 0 24px rgba(96,165,250,0.30));
      }
    }
    .face.visible { opacity: 1; }
    .face svg {
      width: 100%; height: 100%; display: block;
      transform-origin: center;
      position: relative;
      transition: filter 0.22s ease;
      /* Inner-stroke glow trimmed; the stroke colour below is brighter so the
         face still reads as a neon outline without a soft purple haze. */
      filter:
        drop-shadow(0 0 1.5px rgba(219,234,254,0.20))
        drop-shadow(0 0 7px rgba(167,139,250,0.26))
        drop-shadow(0 0 13px rgba(167,139,250,0.10));
    }
    .face.visible:not(.speaking):not(.startled) svg {
      animation: faceIdleBreath 4.8s ease-in-out infinite;
    }
    .face .face-head,
    .face .face-eye,
    .face .face-brow,
    .face .face-mouth-idle,
    .face .face-mouth-speak {
      fill: none;
      /* Slightly brighter, near-fully-opaque purple — picks up the luminance
         we removed from the surrounding glow without changing the hue. */
      stroke: rgba(196,178,255,0.98);
      stroke-width: 2.4;
      stroke-linecap: round;
      transition: stroke 0.22s ease, stroke-width 0.22s ease, transform 0.24s ease, opacity 0.2s ease;
    }
    .face .face-brow {
      stroke-width: 2.1;
      opacity: 0.82;
      transform-box: fill-box;
      transform-origin: center;
    }
    .face .face-eye {
      stroke-width: 3;
      transform-box: fill-box;
      transform-origin: center;
      transform: translate(var(--face-look-x, 0px), var(--face-look-y, 0px)) scaleY(1);
    }
    .face.visible .face-eye {
      animation: faceBlink 5.8s ease-in-out infinite;
    }
    .face .face-mouth-speak {
      fill: rgba(167,139,250,0.14);
      transform-box: fill-box;
      transform-origin: center;
      opacity: 0;
      transition: opacity 0.25s;
    }
    .face .face-cheek {
      fill: rgba(167,139,250,0.22);
      opacity: 0;
      transform-box: fill-box;
      transform-origin: center;
      transition: opacity 0.24s ease, transform 0.24s ease;
    }
    .face .face-mouth-idle {
      transform-box: fill-box;
      transform-origin: center;
      transition: opacity 0.25s, transform 0.24s ease;
    }
    .face.speaking .face-mouth-idle  { opacity: 0; }
    .face.speaking .face-mouth-speak {
      opacity: 1;
      animation: faceMouthChatter 0.16s ease-in-out infinite;
    }
    .face.speaking .face-brow-left {
      transform: translate(-1px, -1px) rotate(-5deg);
    }
    .face.speaking .face-brow-right {
      transform: translate(1px, -1px) rotate(5deg);
    }
    .face.startled .face-eye {
      animation: none;
      transform: translate(var(--face-look-x, 0px), var(--face-look-y, 0px)) scaleY(1.25);
      stroke: rgba(219,234,254,0.95);
    }
    .face.startled .face-mouth-idle { opacity: 0; }
    .face.startled .face-mouth-speak {
      opacity: 1;
      transform: scale(1.45, 2.6);
      fill: rgba(96,165,250,0.24);
      stroke: rgba(219,234,254,0.9);
    }
    @keyframes faceBlink {
      0%, 46%, 50%, 100% { transform: translate(var(--face-look-x, 0px), var(--face-look-y, 0px)) scaleY(1); }
      48%                { transform: translate(var(--face-look-x, 0px), var(--face-look-y, 0px)) scaleY(0.08); }
    }
    @keyframes faceIdleBreath {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      50%      { transform: translateY(-2px) rotate(-0.6deg); }
    }
    @keyframes faceMouthChatter {
      0%, 100% { transform: scaleY(0.4); }
      50%      { transform: scaleY(2.2); }
    }
    /* Subtle "alive" motion while speaking — irregular timing keyframes so the
       motion drifts naturally rather than feeling like a repeating loop. */
    @keyframes faceTalkBob {
      0%   { transform: translate(0, 0)            rotate(0deg);    }
      11%  { transform: translate(0.6px, -0.3px)   rotate(-0.4deg); }
      24%  { transform: translate(1.8px, -0.9px)   rotate(-1.1deg); }
      37%  { transform: translate(1.4px,  0.2px)   rotate(-0.5deg); }
      48%  { transform: translate(0.3px, -0.5px)   rotate( 0.1deg); }
      59%  { transform: translate(-0.9px, 0.4px)   rotate( 0.6deg); }
      71%  { transform: translate(-1.7px, 0.7px)   rotate( 1.0deg); }
      83%  { transform: translate(-0.6px, 0px)     rotate( 0.4deg); }
      92%  { transform: translate( 0.3px,-0.2px)   rotate(-0.1deg); }
      100% { transform: translate(0, 0)            rotate(0deg);    }
    }
    .face.speaking svg {
      animation: faceTalkBob 4.6s ease-in-out infinite;
      transform-origin: center;
    }
    @keyframes faceNoticeTilt {
      0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
      28%      { transform: translateY(-2px) rotate(-3deg) scale(1.04); }
      62%      { transform: translateY(1px) rotate(2deg) scale(1.02); }
    }
    .face.noticing svg {
      animation: faceNoticeTilt 1.35s cubic-bezier(0.22, 1, 0.36, 1);
      transform-origin: center;
    }
    .face.face-curious .face-brow-left {
      transform: translate(-1px, -3px) rotate(-9deg);
    }
    .face.face-curious .face-brow-right {
      transform: translate(1px, 1px) rotate(8deg);
    }
    .face.face-curious .face-mouth-idle {
      transform: translateY(-1px) scaleX(0.92);
    }
    .face.face-pleased .face-brow-left,
    .face.face-pleased .face-brow-right {
      transform: translateY(-2px);
      opacity: 1;
    }
    .face.face-pleased .face-mouth-idle {
      transform: translateY(-2px) scale(1.12, 1.08);
    }
    .face.face-skeptical .face-brow-left {
      transform: translateY(-4px) rotate(-12deg);
      opacity: 1;
    }
    .face.face-skeptical .face-brow-right {
      transform: translateY(2px) rotate(-6deg);
      opacity: 0.72;
    }
    .face.face-skeptical .face-mouth-idle {
      transform: translateY(1px) rotate(-4deg) scaleX(0.82);
    }
    .face.face-wink .face-eye-left {
      animation: none;
      transform: translate(var(--face-look-x, 0px), var(--face-look-y, 0px)) scaleY(0.08);
    }
    .face.face-wink .face-brow-left {
      transform: translateY(-3px) rotate(-12deg);
    }
    .face.face-wink .face-mouth-idle {
      transform: translateY(-1px) rotate(-3deg) scaleX(1.04);
    }
    .face.face-listening .face-brow-left {
      transform: translate(-1px, -2px) rotate(-4deg);
      opacity: 1;
    }
    .face.face-listening .face-brow-right {
      transform: translate(1px, -3px) rotate(5deg);
      opacity: 1;
    }
    .face.face-listening .face-eye {
      animation: none;
      transform: translate(var(--face-look-x, 0px), var(--face-look-y, 0px)) scaleY(1.08);
    }
    .face.face-listening .face-mouth-idle {
      transform: translateY(-1px) scaleX(0.78);
    }
    .face.face-listening .face-cheek,
    .face.face-pleased .face-cheek,
    .face.face-booped .face-cheek {
      opacity: 0.58;
      transform: scale(1.12);
    }
    .face.face-booped svg {
      animation: faceBoop 0.52s cubic-bezier(0.18, 0.9, 0.34, 1);
    }
    .face.face-booped .face-brow-left,
    .face.face-booped .face-brow-right {
      transform: translateY(-4px);
      opacity: 1;
    }
    .face.face-booped .face-eye {
      animation: none;
      transform: translate(var(--face-look-x, 0px), var(--face-look-y, 0px)) scaleY(1.16);
    }
    .face.face-booped .face-mouth-idle {
      transform: translateY(-2px) scaleX(0.72);
    }
    @keyframes faceBoop {
      0%, 100% { transform: translate(0, 0) scale(1); }
      35%      { transform: translate(var(--face-boop-x, 0px), var(--face-boop-y, -2px)) scale(1.035); }
      65%      { transform: translate(calc(var(--face-boop-x, 0px) * -0.35), 1px) scale(0.995); }
    }
    .face.face-mad svg {
      animation: faceMadShake 0.18s linear infinite;
      filter:
        drop-shadow(0 0 4px rgba(248,113,113,0.58))
        drop-shadow(0 0 12px rgba(248,113,113,0.28));
    }
    .face.face-mad .face-head,
    .face.face-mad .face-eye,
    .face.face-mad .face-brow,
    .face.face-mad .face-mouth-idle,
    .face.face-mad .face-mouth-speak {
      stroke: rgba(248,113,113,0.98);
    }
    .face.face-mad .face-brow-left {
      transform: translateY(-1px) rotate(16deg);
      opacity: 1;
    }
    .face.face-mad .face-brow-right {
      transform: translateY(-1px) rotate(-16deg);
      opacity: 1;
    }
    .face.face-mad .face-mouth-idle {
      opacity: 1;
      transform: translateY(4px) rotate(180deg) scaleX(0.82);
    }
    .face.face-mad .face-mouth-speak {
      opacity: 0;
      animation: none;
    }
    @keyframes faceMadShake {
      0%, 100% { transform: translate(0, 0) rotate(0deg); }
      25%      { transform: translate(-1px, 0) rotate(-1deg); }
      50%      { transform: translate(1px, -0.5px) rotate(1deg); }
      75%      { transform: translate(-0.5px, 0.5px) rotate(-0.6deg); }
    }
    html[data-site-mood="curious"] .face.visible {
      filter: drop-shadow(0 0 7px rgba(96,165,250,0.20));
    }
    html[data-site-mood="focused"] .face.visible {
      filter: drop-shadow(0 0 10px rgba(52,211,153,0.20));
    }
    html[data-site-mood="proud"] .face.visible {
      filter: drop-shadow(0 0 13px rgba(167,139,250,0.24));
    }
    html[data-site-mood="sleepy"] .face.visible {
      filter: drop-shadow(0 0 5px rgba(148,163,184,0.12));
      opacity: 0.72;
    }
    html[data-site-mood="sleepy"] .face.visible .face-brow {
      opacity: 0.52;
      transform: translateY(3px);
    }
    html[data-site-mood] .face.visible:hover,
    html[data-site-mood] .face.visible:focus-visible,
    .face.visible:hover,
    .face.visible:focus-visible {
      filter:
        drop-shadow(0 0 5px rgba(167,139,250,0.22))
        drop-shadow(0 0 10px rgba(167,139,250,0.12));
      opacity: 1;
    }
    .face.visible:hover svg,
    .face.visible:focus-visible svg {
      filter:
        drop-shadow(0 0 1.5px rgba(167,139,250,0.42))
        drop-shadow(0 0 6px rgba(167,139,250,0.24))
        drop-shadow(0 0 10px rgba(167,139,250,0.12));
    }
    .face.visible:hover .face-head,
    .face.visible:focus-visible .face-head,
    .face.visible:hover .face-brow,
    .face.visible:focus-visible .face-brow,
    .face.visible:hover .face-mouth-idle,
    .face.visible:focus-visible .face-mouth-idle,
    .face.visible:hover .face-mouth-speak,
    .face.visible:focus-visible .face-mouth-speak {
      stroke: rgba(217,205,255,1);
      stroke-width: 2.8;
    }
    .face.visible:hover .face-eye,
    .face.visible:focus-visible .face-eye {
      stroke: rgba(217,205,255,1);
      stroke-width: 3.3;
    }
    .face.face-mad.visible:hover .face-head,
    .face.face-mad.visible:focus-visible .face-head,
    .face.face-mad.visible:hover .face-eye,
    .face.face-mad.visible:focus-visible .face-eye,
    .face.face-mad.visible:hover .face-brow,
    .face.face-mad.visible:focus-visible .face-brow,
    .face.face-mad.visible:hover .face-mouth-idle,
    .face.face-mad.visible:focus-visible .face-mouth-idle,
    .face.face-mad.visible:hover .face-mouth-speak,
    .face.face-mad.visible:focus-visible .face-mouth-speak {
      stroke: rgba(248,113,113,1);
    }
    /* Hero placement (centered above the hero stack) */
    .hero-face {
      /* Scales down on narrow phones without going below ~52px (still
         readable as a face) and caps at 72px on big screens. */
      width: clamp(52px, 14vw, 72px);
      height: clamp(52px, 14vw, 72px);
      margin: 0 auto 0.9rem;
      pointer-events: auto;
      cursor: pointer;
      transition: opacity 0.7s ease, transform 0.2s ease;
    }
    .hero-face:hover { transform: scale(1.06); }
    /* Projects placement — sits right of the title, but nudged in from the edge */
    .projects-header { position: relative; padding-right: 110px; }
    .projects-header .section-desc {
      max-width: none;
      white-space: nowrap;
    }
    .projects-face {
      position: absolute;
      top: 1.4rem; right: 3rem;
      width: 72px; height: 72px;
      /* clickable — base .face disables pointer events; re-enable here */
      pointer-events: auto;
      cursor: pointer;
      transition: opacity 0.7s ease, transform 0.2s ease;
    }
    .projects-face:hover { transform: scale(1.06); }

    /* Demo placement — right of the "Explorer of the Solar System" title */
    .demo-band-top .demo-inner { position: relative; padding-right: 110px; }
    /* Keep the short demo description on a single line. */
    .demo-band-top .section-desc { max-width: none; white-space: nowrap; }
    .demo-face {
      position: absolute;
      top: 1.4rem; right: 3rem;
      width: 72px; height: 72px;
      pointer-events: auto;
      cursor: pointer;
      transition: opacity 0.7s ease, transform 0.2s ease;
    }
    .demo-face:hover { transform: scale(1.06); }
    @media (max-width: 768px) {
      /* width/height come from the clamp() above. Only the bottom margin
         needs tightening on mobile. */
      .hero-face { margin-bottom: 0.85rem; }
      /* On phones, pop the projects/demo faces above their titles instead of
         floating in the cramped right margin. */
      .projects-header { padding-right: 0; }
      .projects-header .section-desc { white-space: normal; }
      .projects-face {
        position: static;
        width: 60px; height: 60px;
        margin: 0 auto 0.75rem;
      }
      .demo-band-top .demo-inner { padding-right: 0; }
      .demo-band-top .section-desc { white-space: normal; }
      .demo-face {
        position: static;
        width: 60px; height: 60px;
        margin: 0 auto 0.75rem;
      }
    }


    .hero-ctas { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
    .btn {
      display: inline-flex; align-items: center; gap: 0.5rem;
      padding: 0.75rem 1.75rem; border-radius: 8px;
      font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.9rem;
      text-decoration: none; transition: all 0.2s; cursor: pointer; border: none;
    }
    .btn-primary {
      background: linear-gradient(135deg, var(--accent1), var(--accent2));
      color: #fff; box-shadow: 0 4px 20px rgba(59,130,246,0.35);
    }
    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(59,130,246,0.5); }
    .btn-primary svg { animation: arrowNudge 3.6s ease-in-out infinite; }
    @keyframes arrowNudge {
      0%, 70%, 100% { transform: translateX(0); }
      78%           { transform: translateX(-4px); }
      85%           { transform: translateX(0); }
      92%           { transform: translateX(-2px); }
    }

    /* ── REDUCED MOTION SUPPORT ── */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }
    .btn-outline {
      background: transparent; color: var(--text);
      border: 1px solid var(--border);
      box-shadow: 0 0 16px rgba(59,130,246,0.08);
    }
    .btn-outline:hover { border-color: var(--accent1); color: var(--accent1); background: rgba(59,130,246,0.06); box-shadow: 0 0 22px rgba(59,130,246,0.22); }
    .scroll-hint {
      position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
      display: flex; flex-direction: column; align-items: center; gap: 0.55rem;
      color: var(--subtle); font-size: 0.82rem; letter-spacing: 0.14em;
      text-transform: uppercase; z-index: 1;
      text-decoration: none; cursor: pointer;
      animation: bounce 2s infinite;
      text-shadow: 0 0 12px rgba(96,165,250,0.25);
      transition: color 0.25s, text-shadow 0.25s;
    }
    .scroll-hint:hover { color: var(--accent1); text-shadow: 0 0 18px rgba(96,165,250,0.55); }
    .scroll-hint svg { width: 22px; height: 22px; filter: drop-shadow(0 0 6px rgba(96,165,250,0.35)); }
    @keyframes scrollHintAttract {
      0%, 100% {
        color: var(--subtle);
        text-shadow: 0 0 12px rgba(96,165,250,0.25);
      }
      35%, 65% {
        color: #dbeafe;
        text-shadow: 0 0 28px rgba(96,165,250,0.85), 0 0 8px rgba(96,165,250,0.55);
      }
    }
    /* Layer the attract pulse on top of the existing bounce so neither breaks. */
    .scroll-hint.attract {
      animation: bounce 2s infinite, scrollHintAttract 1.5s ease-in-out 3;
    }
    .scroll-hint.attract svg {
      animation: scrollHintAttract 1.5s ease-in-out 3;
    }
    @keyframes bounce {
      0%, 100% { transform: translateX(-50%) translateY(0); }
      50%       { transform: translateX(-50%) translateY(6px); }
    }

    /* ── SECTIONS (shared) ────────────────── */
    section { padding: 6rem 2.5rem; max-width: 1100px; margin: 0 auto; }
    .section-label {
      font-size: 0.75rem; font-weight: 600; letter-spacing: 0.15em;
      text-transform: uppercase; color: var(--accent1); margin-bottom: 0.75rem;
    }
    .contact-kicker {
      display: flex;
      justify-content: center;
      align-items: baseline;
      gap: 0.32em;
    }
    .touch-burst-word {
      appearance: none;
      border: 0;
      background: transparent;
      color: inherit;
      font: inherit;
      letter-spacing: inherit;
      text-transform: inherit;
      padding: 0 0.08em;
      cursor: pointer;
      position: relative;
      display: inline-flex;
      line-height: 1;
      border-radius: 5px;
    }
    .touch-burst-word:focus-visible {
      outline: 1px solid rgba(96,165,250,0.7);
      outline-offset: 4px;
    }
    .touch-letter {
      display: inline-block;
      transform: translate(0, 0) rotate(0deg) scale(1);
      transform-origin: center;
      will-change: transform, opacity, filter;
    }
    .touch-burst-word.is-bursting .touch-letter {
      animation: touchLetterBurst 1.05s cubic-bezier(0.16, 0.78, 0.32, 1) forwards;
      animation-delay: var(--touch-delay, 0ms);
    }
    .touch-burst-word.is-returning .touch-letter {
      animation: touchLetterReturn 0.48s cubic-bezier(0.2, 0.9, 0.24, 1) both;
      animation-delay: var(--touch-return-delay, 0ms);
    }
    @keyframes touchLetterBurst {
      0% {
        opacity: 1;
        filter: drop-shadow(0 0 0 rgba(96,165,250,0));
        transform: translate(0, 0) rotate(0deg) scale(1);
      }
      58% {
        opacity: 0.94;
        filter: drop-shadow(0 0 9px rgba(96,165,250,0.44));
      }
      100% {
        opacity: 0;
        filter: drop-shadow(0 0 14px rgba(52,211,153,0.28));
        transform: translate(var(--touch-x), var(--touch-y)) rotate(var(--touch-rot)) scale(0.72);
      }
    }
    @keyframes touchLetterReturn {
      from {
        opacity: 0;
        transform: translate(calc(var(--touch-x) * 0.24), calc(var(--touch-y) * 0.24)) rotate(calc(var(--touch-rot) * 0.22)) scale(0.86);
      }
      to {
        opacity: 1;
        transform: translate(0, 0) rotate(0deg) scale(1);
      }
    }
    .section-title {
      font-family: 'Space Grotesk', sans-serif;
      font-size: clamp(1.8rem, 4vw, 2.5rem);
      font-weight: 700; margin-bottom: 1rem;
      text-wrap: balance;
    }
    .section-desc { color: var(--subtle); max-width: 560px; line-height: 1.7; }

    /* fade-in on scroll */
    .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s ease; }
    .reveal.visible { opacity: 1; transform: none; }

    /* ── DIVIDER ──────────────────────────── */
    .divider {
      width: 100%; height: 1px;
      background: linear-gradient(90deg, transparent, var(--border), transparent);
      margin: 0 auto;
    }

    /* About-section hover glow — section glows more intensely while the
       cursor is parked over it, smoothly fading in and out. */
    #about {
      transition: box-shadow 0.5s ease, border-color 0.5s ease;
    }
    #about:hover {
      box-shadow: 0 0 64px rgba(96,165,250,0.45),
                  0 0 14px rgba(167,139,250,0.25) !important;
      border-color: rgba(96,165,250,0.45) !important;
    }

    /* ── ABOUT ────────────────────────────── */
    #about {
      display: flex; flex-direction: column; justify-content: center;
      min-height: 74vh;
      padding-top: 4.75rem;
      padding-bottom: 4.75rem;
      position: relative;
      isolation: isolate;
      background: transparent;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: 0 0 40px rgba(59,130,246,0.10);
      --training-hole-x: 100%;
      --training-hole-y: 0px;
      --training-hole-w: 0px;
      --training-hole-h: 0px;
    }
    #about::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;
      border-radius: inherit;
      background:
        linear-gradient(180deg, rgba(6,10,22,0.96), rgba(5,10,24,0.94)),
        var(--bg);
      pointer-events: none;
      -webkit-mask:
        linear-gradient(#000 0 0) top / 100% var(--training-hole-y) no-repeat,
        linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--training-hole-y) - var(--training-hole-h)) no-repeat,
        linear-gradient(#000 0 0) left var(--training-hole-y) / var(--training-hole-x) var(--training-hole-h) no-repeat,
        linear-gradient(#000 0 0) right var(--training-hole-y) / calc(100% - var(--training-hole-x) - var(--training-hole-w)) var(--training-hole-h) no-repeat;
      mask:
        linear-gradient(#000 0 0) top / 100% var(--training-hole-y) no-repeat,
        linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--training-hole-y) - var(--training-hole-h)) no-repeat,
        linear-gradient(#000 0 0) left var(--training-hole-y) / var(--training-hole-x) var(--training-hole-h) no-repeat,
        linear-gradient(#000 0 0) right var(--training-hole-y) / calc(100% - var(--training-hole-x) - var(--training-hole-w)) var(--training-hole-h) no-repeat;
    }
    #about .about-text .section-label { margin-bottom: 0.5rem; color: var(--accent1); }
    #about .about-text .section-title { margin-bottom: 0.95rem; }
    .about-grid {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 3rem; align-items: stretch; margin-top: 0;
      position: relative;
      z-index: 1;
    }
    .about-text {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-width: 0;
    }
    .about-text p { color: var(--subtle); line-height: 1.65; margin-bottom: 0.75rem; }
    .about-text p:last-of-type { margin-bottom: 0; }
    .about-text p strong { color: var(--text); }
    .about-side {
      display: flex; flex-direction: column;
      align-items: flex-start; justify-content: center;
      gap: 1rem;
      min-width: 0;
    }
    .training-module-face {
      flex: 0 0 auto;
      width: 62px;
      height: 62px;
      pointer-events: auto;
      cursor: pointer;
      transition: opacity 0.7s ease, transform 0.2s ease, filter 0.2s ease;
      filter:
        drop-shadow(0 0 7px rgba(203,213,225,0.22))
        drop-shadow(0 0 14px rgba(96,165,250,0.12));
    }
    .training-module-face:hover,
    .training-module-face:focus-visible {
      transform: scale(1.06);
      filter:
        drop-shadow(0 0 10px rgba(203,213,225,0.34))
        drop-shadow(0 0 20px rgba(96,165,250,0.18));
    }
    .training-module-face svg,
    .training-module-face.visible:hover svg,
    .training-module-face.visible:focus-visible svg {
      filter:
        drop-shadow(0 0 2px rgba(248,250,252,0.22))
        drop-shadow(0 0 8px rgba(96,165,250,0.18));
    }
    /* Full-body pixel astronaut — same proportions and colours as the lander
       card SVG and the canvas drawAstro sprite. */
    .training-astronaut-face .training-astronaut-sprite {
      shape-rendering: crispEdges;
      transform-origin: center bottom;
      transform-box: fill-box;
    }
    .training-astronaut-face.visible:not(.speaking):not(.startled):not(.is-autonomous) .training-astronaut-sprite {
      animation: astronautSuitBob 2.6s ease-in-out infinite;
    }
    .training-astronaut-face.is-autonomous .training-astronaut-sprite {
      transform: translate(var(--astro-x, 0px), var(--astro-y, 0px))
                 rotate(var(--astro-rot, 0deg))
                 scaleX(var(--astro-facing, 1));
      transition: transform 1.45s cubic-bezier(0.22, 1, 0.36, 1), filter 0.35s ease;
      filter:
        drop-shadow(0 0 8px rgba(59,130,246,0.40))
        drop-shadow(0 0 15px rgba(52,211,153,0.12));
    }
    .training-astronaut-face .astronaut-body {
      transform-origin: center bottom;
      transform-box: fill-box;
    }
    .training-astronaut-face.is-autonomous .astronaut-body {
      animation: astronautSuitBob 2.6s ease-in-out infinite;
    }
    .training-astronaut-face .astronaut-arm-right,
    .training-astronaut-face .astronaut-arm-left,
    .training-astronaut-face .astronaut-visor-glint {
      transform-origin: center top;
      transform-box: fill-box;
    }
    .training-astronaut-face.is-autonomous.is-waving .astronaut-arm-right {
      animation: astronautWave 0.44s ease-in-out 3;
    }
    .training-astronaut-face.is-autonomous.is-looking .astronaut-visor-glint {
      animation: astronautVisorScan 0.8s steps(3, end) 2;
    }
    .training-astronaut-face.is-autonomous.is-alert .training-astronaut-sprite {
      filter:
        drop-shadow(0 0 10px rgba(52,211,153,0.56))
        drop-shadow(0 0 18px rgba(96,165,250,0.22));
    }
    .training-astronaut-face.is-autonomous.is-alert .astronaut-body {
      animation: astronautAlertBob 0.38s ease-in-out 3;
    }
    .training-astronaut-face .astronaut-helmet-shell {
      fill: #dbeafe;
      stroke: none;
      filter: drop-shadow(0 0 8px rgba(96,165,250,0.18));
    }
    .training-astronaut-face .astronaut-visor {
      fill: #172554;
      stroke: none;
      filter: drop-shadow(0 0 8px rgba(96,165,250,0.22));
    }
    .training-astronaut-face .astronaut-visor-glint {
      fill: #60a5fa;
    }
    .training-astronaut-face .astronaut-torso { fill: #e8eef7; }
    .training-astronaut-face .astronaut-arm-left,
    .training-astronaut-face .astronaut-arm-right { fill: #94a3b8; }
    .training-astronaut-face .astronaut-leg-left,
    .training-astronaut-face .astronaut-leg-right { fill: #cbd5e1; }
    .training-astronaut-face .astronaut-boot-left,
    .training-astronaut-face .astronaut-boot-right { fill: #60a5fa; }
    .training-astronaut-face .astronaut-suit-panel {
      fill: #1e2d4a;
    }
    .training-astronaut-face .astronaut-comms-dot {
      fill: #34d399;
      filter: drop-shadow(0 0 5px rgba(52,211,153,0.65));
    }
    .training-module-face .face-head,
    .training-module-face .face-eye,
    .training-module-face .face-brow,
    .training-module-face .face-mouth-idle,
    .training-module-face .face-mouth-speak {
      stroke: rgba(191,219,254,0.98);
    }
    .training-astronaut-face .face-head {
      stroke: none;
    }
    .training-module-face .face-mouth-speak {
      fill: rgba(96,165,250,0.24);
    }
    .training-module-face .face-brow,
    .training-module-face .face-mouth-idle {
      opacity: 0.34;
    }
    .training-module-face .face-brow {
      stroke: rgba(52,211,153,0.9);
    }
    .training-module-face .face-eye {
      stroke: rgba(52,211,153,0.98);
      filter: drop-shadow(0 0 5px rgba(52,211,153,0.34));
    }
    .training-module-face.face-mad .astronaut-visor,
    .training-module-face.face-mad .face-eye,
    .training-module-face.face-mad .face-brow,
    .training-module-face.face-mad .face-mouth-idle,
    .training-module-face.face-mad .face-mouth-speak {
      stroke: rgba(248,113,113,0.98);
    }
    .training-module-face.face-pleased .face-cheek,
    .training-module-face.face-listening .face-cheek,
    .training-module-face.face-booped .face-cheek {
      fill: rgba(52,211,153,0.28);
    }
    .training-tags {
      display: flex;
      flex: 0 0 auto;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 0.36rem;
    }
    .training-tags .badge {
      padding-left: 0.48rem;
      padding-right: 0.48rem;
    }
    .training-window {
      width: min(100%, 440px);
      border: 1px solid rgba(96,165,250,0.32);
      border-radius: 8px;
      background: transparent;
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.025),
        0 0 28px rgba(59,130,246,0.12);
      overflow: hidden;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .training-window:hover {
      border-color: rgba(96,165,250,0.58);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.035),
        0 0 34px rgba(59,130,246,0.2);
    }
    .training-bar {
      display: grid;
      grid-template-columns: auto 1fr auto auto;
      align-items: center;
      gap: 0.55rem;
      padding: 0.55rem 0.7rem;
      border-bottom: 1px solid rgba(96,165,250,0.22);
      background: rgba(59,130,246,0.08);
      color: var(--subtle);
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.14em;
    }
    .training-light {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 10px rgba(52,211,153,0.8);
      animation: livingStatusBreath 3.8s ease-in-out infinite;
    }
    .training-run { color: var(--accent1); }
    .training-play-btn {
      font: inherit;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #dbeafe;
      background: rgba(59,130,246,0.18);
      border: 1px solid rgba(96,165,250,0.36);
      border-radius: 5px;
      padding: 0.25rem 0.55rem;
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
    }
    .training-play-btn:hover,
    .training-play-btn:focus-visible {
      background: rgba(59,130,246,0.3);
      border-color: rgba(96,165,250,0.7);
      box-shadow: 0 0 14px rgba(59,130,246,0.28);
      outline: none;
    }
    #trainingCanvas {
      display: block;
      width: 100%;
      aspect-ratio: 16 / 9;
      background: transparent;
      image-rendering: pixelated;
    }
    .training-readout {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      padding: 0.5rem 0.7rem 0.6rem;
      border-top: 1px solid rgba(96,165,250,0.16);
      color: var(--muted);
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .bot-telemetry-strip {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.35rem;
      padding: 0.42rem 0.7rem 0.55rem;
      border-top: 1px solid rgba(96,165,250,0.12);
      background: rgba(5,10,24,0.2);
      color: rgba(191,219,254,0.74);
      font-size: 0.52rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      line-height: 1.25;
      text-transform: uppercase;
    }
    .bot-telemetry-strip span {
      min-width: 0;
      white-space: nowrap;
    }
    .bot-telemetry-strip span:nth-child(2) { color: rgba(52,211,153,0.82); }
    .bot-telemetry-strip span:nth-child(3) {
      color: rgba(167,139,250,0.82);
      text-align: right;
    }
    #trainingScore { color: var(--green); }
    #trainingStatus {
      transition: color 0.25s ease, text-shadow 0.25s ease;
    }
    #trainingStatus[data-bot-mood="focused"],
    #trainingStatus[data-bot-mood="curious"] {
      color: #bfdbfe;
      text-shadow: 0 0 10px rgba(96,165,250,0.24);
    }
    #trainingStatus[data-bot-mood="excited"],
    #trainingStatus[data-bot-mood="proud"] {
      color: #bbf7d0;
      text-shadow: 0 0 12px rgba(52,211,153,0.34);
    }
    #trainingStatus[data-bot-mood="recovering"] {
      color: #fecaca;
      text-shadow: 0 0 12px rgba(248,113,113,0.28);
    }
    .training-project-card {
      width: min(100%, 440px);
      padding: 1rem;
      border: 1px solid rgba(96,165,250,0.18);
      border-radius: 8px;
      background: rgba(15,23,42,0.22);
    }
    .training-project-top {
      width: min(100%, 440px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 0.85rem;
    }
    .training-project-heading {
      display: flex;
      align-items: center;
      gap: 0.68rem;
      flex: 1 1 auto;
      min-width: 0;
    }
    .training-project-heading > div:last-child {
      min-width: 0;
    }
    .training-project-kicker {
      display: block;
      margin-bottom: 0.15rem;
      color: var(--accent1);
      font-size: 0.64rem;
      font-weight: 700;
      letter-spacing: 0.13em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .training-project-title {
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 600;
      font-size: 1rem;
      color: var(--text);
      line-height: 1.1;
      white-space: normal;
      overflow-wrap: anywhere;
    }
    .training-caption {
      margin: 0;
      color: rgba(148,163,184,0.84);
      font-size: 0.78rem;
      line-height: 1.55;
    }
    .training-project-tags { margin-top: 0.8rem; }
    .skills-grid {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      gap: 0.48rem;
      width: 100%;
      margin-top: 0.95rem;
      padding: 0.18rem 0;
    }
    .skill-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.42rem 0.44rem;
      align-items: center;
      position: relative;
      z-index: 4;
    }
    .skill-row::before {
      content: attr(data-skill-group);
      flex: 0 0 5.35rem;
      color: rgba(148,163,184,0.58);
      font-size: 0.58rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }
    .skill-tag {
      padding: 0.3rem 0.62rem; border-radius: 100px; font-size: 0.72rem; font-weight: 500;
      border: 1px solid var(--border); color: var(--subtle);
      background: rgba(255,255,255,0.018);
      opacity: 0; transform: translateY(8px);
      transition: opacity 0.5s ease, transform 0.5s ease,
                  border-color 0.2s, color 0.2s, background 0.2s, box-shadow 0.2s;
    }
    .skill-tag.skill-break {
      margin-left: calc(5.35rem + 0.44rem);
    }
    .skill-tag.skill-visible { opacity: 1; transform: translateY(0); }
    .skill-tag.highlight { border-color: rgba(59,130,246,0.4); color: var(--accent1); background: rgba(59,130,246,0.08); box-shadow: 0 0 14px rgba(59,130,246,0.12); }
    .skill-tag.language-pill {
      border-color: rgba(52,211,153,0.38);
      color: #86efac;
      background: rgba(52,211,153,0.07);
      box-shadow: 0 0 12px rgba(52,211,153,0.10);
    }
    .skill-tag.game-pill {
      border-color: rgba(167,139,250,0.38);
      color: #c4b5fd;
      background: rgba(167,139,250,0.10);
      box-shadow: 0 0 12px rgba(167,139,250,0.12);
    }
    @media (max-width: 640px) {
      .stat-row {
        grid-template-columns: 1fr;
      }
      .skill-row::before {
        flex-basis: 100%;
        margin-bottom: -0.12rem;
      }
      .skill-tag.skill-break {
        margin-left: 0;
      }
    }

    .training-game-section {
      display: none;
      max-width: none;
      width: var(--layout-viewport-width);
      margin-left: calc(50% - var(--layout-viewport-half));
      margin-right: calc(50% - var(--layout-viewport-half));
      margin-top: 4rem;
      padding: 0;
    }
    .training-game-section.open { display: block; }
    .training-game-shell {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      max-width: none;
      width: 100%;
      margin: 0;
      padding: 2.5rem clamp(1.25rem, 5vw, 4rem) 6.75rem;
      border-top: 1px solid rgba(96,165,250,0.25);
      border-bottom: 1px solid rgba(96,165,250,0.25);
      background: transparent;
      box-shadow:
        0 -14px 42px rgba(59,130,246,0.08),
        0 16px 48px rgba(0,0,0,0.28);
      --platformer-hole-x: 100%;
      --platformer-hole-y: 0px;
      --platformer-hole-w: 0px;
      --platformer-hole-h: 0px;
    }
    .training-game-shell::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 0;
      background:
        linear-gradient(180deg, rgba(6,10,22,0.96), rgba(5,10,24,0.94)),
        var(--bg);
      pointer-events: none;
      -webkit-mask:
        linear-gradient(#000 0 0) top / 100% var(--platformer-hole-y) no-repeat,
        linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--platformer-hole-y) - var(--platformer-hole-h)) no-repeat,
        linear-gradient(#000 0 0) left var(--platformer-hole-y) / var(--platformer-hole-x) var(--platformer-hole-h) no-repeat,
        linear-gradient(#000 0 0) right var(--platformer-hole-y) / calc(100% - var(--platformer-hole-x) - var(--platformer-hole-w)) var(--platformer-hole-h) no-repeat;
      mask:
        linear-gradient(#000 0 0) top / 100% var(--platformer-hole-y) no-repeat,
        linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--platformer-hole-y) - var(--platformer-hole-h)) no-repeat,
        linear-gradient(#000 0 0) left var(--platformer-hole-y) / var(--platformer-hole-x) var(--platformer-hole-h) no-repeat,
        linear-gradient(#000 0 0) right var(--platformer-hole-y) / calc(100% - var(--platformer-hole-x) - var(--platformer-hole-w)) var(--platformer-hole-h) no-repeat;
    }
    .training-game-shell > * {
      position: relative;
      z-index: 1;
    }
    .training-game-head {
      display: grid;
      grid-template-columns: minmax(220px, 1fr) auto auto;
      gap: 1rem;
      align-items: center;
      margin-bottom: 1rem;
    }
    .training-game-head .section-title { margin-bottom: 0; }
    .training-game-info {
      position: relative;
      padding-right: 88px;
      min-width: 0;
    }
    .training-game-face {
      position: absolute;
      top: 0.9rem;
      right: 0;
      width: 68px;
      height: 68px;
      pointer-events: auto;
      cursor: pointer;
      transition: opacity 0.7s ease, transform 0.2s ease;
    }
    .training-game-face:hover { transform: scale(1.06); }
    .training-game-face::after,
    .market-snapshot::after,
    .dashboard-region-btn::after {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: #dbeafe;
      color: #60a5fa;
      opacity: 0;
      pointer-events: none;
      transform: translate(-50%, -50%) scale(0.3);
      box-shadow:
        0 0 0 0 currentColor,
        0 0 0 0 #34d399,
        0 0 0 0 #a78bfa;
      z-index: 3;
    }
    .market-snapshot:active::after,
    .dashboard-region-btn:active::after,
    .training-game-face.is-victory-spark::after {
      animation: controlSparkBurst 0.78s cubic-bezier(0.16, 0.72, 0.32, 1) forwards;
    }
    @keyframes controlSparkBurst {
      0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.3) rotate(0deg);
        box-shadow:
          0 0 0 -2px currentColor,
          0 0 0 -2px #34d399,
          0 0 0 -2px #a78bfa;
      }
      18% { opacity: 1; }
      100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95) rotate(70deg);
        box-shadow:
          24px -18px 0 -2px currentColor,
          -22px -14px 0 -2px #34d399,
          18px 22px 0 -2px #a78bfa,
          -20px 18px 0 -2px #dbeafe,
          0 -28px 0 -2px #bfdbfe;
      }
    }
    .training-game-stats {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 0.45rem;
    }
    .training-game-stats span {
      color: var(--muted);
      border: 1px solid rgba(96,165,250,0.24);
      border-radius: 6px;
      background: rgba(59,130,246,0.08);
      padding: 0.45rem 0.65rem;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .training-game-stats b { color: var(--text); }
    .training-game-stats .ai-stat .ai-runs {
      display: inline-flex; flex-wrap: wrap; gap: 0.35rem;
      margin-left: 0.4rem; letter-spacing: 0; text-transform: none;
      font-weight: 700;
    }
    .training-game-stats .ai-stat .ai-time {
      color: var(--text);
      padding: 0 0.1rem;
      transition: color 0.3s, text-shadow 0.3s;
    }
    .training-game-stats .ai-stat .ai-time.best {
      color: #34d399;
      text-shadow: 0 0 10px rgba(52,211,153,0.6);
    }
    .training-game-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; }
    .platformer-frame {
      position: relative;
      border: 1px solid rgba(96,165,250,0.38);
      border-radius: 8px;
      overflow: hidden;
      background: transparent;
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.025),
        0 0 34px rgba(59,130,246,0.16);
    }
    #platformerCanvas {
      display: block;
      width: 100%;
      aspect-ratio: 8 / 3;
      background: transparent;
      /* Bitmap is rendered at display × DPR so text is crisp; chunky pixel art
         is preserved by drawing at integer logical coords inside the canvas. */
      image-rendering: auto;
    }
    /* Voice line overlay — the face's typed dialogue prints inside the game
       window so the surrounding stats / buttons don't reflow as characters
       arrive. No box / border — just text with a soft glow for legibility. */
    .platformer-voice {
      position: absolute;
      top: 1rem;
      left: 1.1rem;
      right: 1.1rem;
      z-index: 2;
      color: rgba(219,234,254,0.94);
      font-size: 0.82rem;
      line-height: 1.55;
      font-weight: 500;
      letter-spacing: 0.005em;
      text-shadow:
        0 1px 2px rgba(5,10,24,0.95),
        0 0 6px rgba(5,10,24,0.85),
        0 0 14px rgba(5,10,24,0.55);
      pointer-events: none;
      transition: opacity 0.45s ease, transform 0.45s ease;
      max-width: min(720px, calc(100% - 2.2rem));
    }
    .platformer-voice:empty { opacity: 0; }
    .platformer-frame.is-active .platformer-voice {
      opacity: 0;
      transform: translateY(-6px);
    }
    .platformer-voice .type-cursor {
      color: rgba(167,139,250,0.95);
    }
    @media (max-width: 640px) {
      .platformer-voice {
        font-size: 0.72rem;
        top: 0.65rem;
        left: 0.7rem;
        right: 0.7rem;
      }
    }
    .platformer-touch {
      position: absolute;
      left: 0.75rem;
      right: 0.75rem;
      bottom: 0.55rem;
      display: none;
      justify-content: space-between;
      pointer-events: none;
    }
    .platformer-touch-btn {
      width: 44px;
      height: 44px;
      border-radius: 10px;
      border: 1px solid rgba(96,165,250,0.45);
      color: #bfdbfe;
      background: rgba(8,13,28,0.54);
      backdrop-filter: blur(6px);
      font-weight: 800;
      pointer-events: auto;
    }

    /* ── CARD FIGURES (astronaut + lander on Lunar Lander card border) ── */
    @keyframes floatBob {
      0%, 100% { translate: 0 0; }
      50%      { translate: 0 -3px; }
    }
    .card-lander {
      position: absolute; bottom: calc(100% - 3px); left: 80px;
      width: 58px; height: 58px;
      pointer-events: none; user-select: none;
      filter: drop-shadow(0 0 8px rgba(59,130,246,0.35));
      opacity: 0; transform: translateY(8px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }
    .card-lander.visible { opacity: 1; transform: translateY(0); }
    .card-lander.mission-ping,
    .contact-lunar-lander.mission-ping {
      animation: landerMissionPing 1.05s ease-out;
    }
    .card-lander .lander-beacon,
    .contact-lunar-lander .lander-beacon {
      transform-origin: center;
      transform-box: fill-box;
      animation: landerBeaconPulse 2.2s ease-in-out infinite;
      filter: drop-shadow(0 0 6px rgba(52,211,153,0.62));
    }
    .card-lander .lander-thruster,
    .contact-lunar-lander .lander-thruster {
      animation: landerThrusterWarmth 3.8s ease-in-out infinite;
    }
    .card-lander .lander-dust,
    .contact-lunar-lander .lander-dust {
      transform-origin: center;
      transform-box: fill-box;
      animation: landerDustBreathe 3.4s ease-in-out infinite;
    }
    .card-lander .lander-dust-right,
    .contact-lunar-lander .lander-dust-right {
      animation-delay: 0.4s;
    }
    .project-card.has-figure.wip::after {
      content: '';
      position: absolute;
      left: 48px;
      bottom: calc(100% + 14px);
      width: 92px;
      height: 1px;
      border-top: 1px dashed rgba(96,165,250,0.48);
      transform: rotate(-14deg);
      transform-origin: left center;
      pointer-events: none;
      opacity: 0.58;
      filter: drop-shadow(0 0 8px rgba(96,165,250,0.36));
      animation: approachVectorPulse 4.2s ease-in-out infinite;
    }
    @keyframes landerBeaconPulse {
      0%, 100% {
        fill: #3b82f6;
        transform: scale(1);
        filter: drop-shadow(0 0 5px rgba(96,165,250,0.45));
      }
      48% {
        fill: #34d399;
        transform: scale(1.48);
        filter:
          drop-shadow(0 0 8px rgba(52,211,153,0.82))
          drop-shadow(0 0 16px rgba(96,165,250,0.28));
      }
    }
    @keyframes landerThrusterWarmth {
      0%, 100% { fill: #1e2d4a; }
      50% { fill: #203b61; }
    }
    @keyframes landerDustBreathe {
      0%, 100% { opacity: 0.58; transform: scaleX(0.82); }
      45% { opacity: 0.9; transform: scaleX(1.18); }
    }
    @keyframes approachVectorPulse {
      0%, 100% {
        opacity: 0.24;
        clip-path: inset(0 78% 0 0);
      }
      45%, 62% {
        opacity: 0.76;
        clip-path: inset(0 0 0 0);
      }
    }
    @keyframes landerMissionPing {
      0%, 100% {
        filter: drop-shadow(0 0 8px rgba(59,130,246,0.35));
      }
      42% {
        filter:
          drop-shadow(0 0 12px rgba(52,211,153,0.64))
          drop-shadow(0 0 24px rgba(96,165,250,0.28));
      }
    }

    .stat-row {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.6rem;
      margin-top: 1.15rem;
      padding: 0.45rem;
      border: 1px solid rgba(96,165,250,0.22);
      border-radius: 8px;
      background: rgba(8,13,28,0.22);
      box-shadow:
        0 0 14px rgba(96,165,250,0.07),
        inset 0 0 28px rgba(96,165,250,0.045);
    }
    .stat {
      display: flex;
      flex-direction: column;
      min-width: 0;
      padding: 0.45rem 0.55rem;
      border: 1px solid rgba(148,163,184,0.10);
      border-radius: 7px;
      background: rgba(255,255,255,0.018);
      cursor: pointer;
      overflow: visible;
      position: relative;
      transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
      user-select: none;
      -webkit-user-select: none;
    }
    .stat:hover,
    .stat:focus-visible {
      border-color: rgba(96,165,250,0.42);
      background: rgba(59,130,246,0.045);
      box-shadow:
        0 0 16px rgba(96,165,250,0.16),
        inset 0 0 16px rgba(96,165,250,0.045);
      outline: none;
    }
    .stat::after {
      content: '';
      position: absolute;
      inset: -2px;
      border-radius: inherit;
      border: 1px solid rgba(96,165,250,0);
      box-shadow: 0 0 0 rgba(96,165,250,0);
      pointer-events: none;
      opacity: 0;
    }
    .stat.is-charging::after {
      animation: statCharge 3.2s linear forwards;
    }
    .stat.is-charging {
      animation: statBodyCharge 3.2s linear forwards;
    }
    .stat.is-exploded {
      pointer-events: none;
    }
    .stat.is-exploded .stat-num,
    .stat.is-exploded .stat-label {
      opacity: 0;
    }
    .stat-fragment {
      position: absolute;
      left: var(--x);
      top: var(--y);
      color: var(--fragment-color);
      font: inherit;
      font-size: var(--fragment-size);
      font-weight: var(--fragment-weight);
      line-height: 1;
      pointer-events: none;
      text-shadow: 0 0 8px currentColor;
      transform: translate(-50%, -50%) scale(0.95);
      animation: statFragmentBurst 1.45s cubic-bezier(0.16, 0.78, 0.34, 1) forwards;
      z-index: 3;
    }
    .stat-spark {
      position: absolute;
      left: 50%;
      top: 50%;
      width: var(--spark-size);
      height: var(--spark-size);
      border-radius: 50%;
      background: currentColor;
      color: var(--fragment-color);
      box-shadow: 0 0 8px currentColor;
      pointer-events: none;
      transform: translate(-50%, -50%) scale(0.8);
      animation: statFragmentBurst 1.1s cubic-bezier(0.16, 0.78, 0.34, 1) forwards;
      z-index: 2;
    }
    @keyframes statCharge {
      0% {
        opacity: 0.28;
        border-color: rgba(96,165,250,0.22);
        box-shadow: 0 0 10px rgba(96,165,250,0.12), inset 0 0 8px rgba(96,165,250,0.04);
      }
      25% {
        opacity: 0.48;
        border-color: rgba(96,165,250,0.36);
        box-shadow: 0 0 18px rgba(96,165,250,0.18), inset 0 0 10px rgba(96,165,250,0.07);
      }
      65% {
        opacity: 0.78;
        border-color: rgba(96,165,250,0.56);
        box-shadow: 0 0 30px rgba(96,165,250,0.3), inset 0 0 16px rgba(96,165,250,0.12);
      }
      100% {
        opacity: 1;
        border-color: rgba(167,139,250,0.82);
        box-shadow: 0 0 46px rgba(167,139,250,0.4), inset 0 0 28px rgba(96,165,250,0.18);
      }
    }
    @keyframes statBodyCharge {
      0% {
        background: rgba(255,255,255,0.022);
        border-color: rgba(96,165,250,0.28);
        box-shadow: 0 0 12px rgba(96,165,250,0.12), inset 0 0 10px rgba(96,165,250,0.04);
      }
      25% {
        background: rgba(59,130,246,0.036);
        border-color: rgba(96,165,250,0.42);
        box-shadow: 0 0 20px rgba(96,165,250,0.2), inset 0 0 14px rgba(96,165,250,0.08);
      }
      70% {
        background: rgba(59,130,246,0.065);
        border-color: rgba(96,165,250,0.62);
        box-shadow: 0 0 32px rgba(96,165,250,0.32), inset 0 0 22px rgba(96,165,250,0.14);
      }
      100% {
        background: rgba(96,165,250,0.095);
        border-color: rgba(167,139,250,0.9);
        box-shadow: 0 0 52px rgba(167,139,250,0.46), inset 0 0 32px rgba(96,165,250,0.2);
      }
    }
    @keyframes statFragmentBurst {
      0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.95) rotate(0deg);
      }
      78% { opacity: 1; }
      100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty)))
                   scale(0.1) rotate(var(--rot));
      }
    }
    .stat-num {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 1.55rem; font-weight: 700;
      background: linear-gradient(135deg, #60a5fa, #a78bfa, #34d399);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      white-space: nowrap;
      line-height: 1.05;
    }
    .stat-domain .stat-num {
      font-size: 1.02rem;
      color: #dbeafe;
      background: none;
      -webkit-text-fill-color: currentColor;
    }
    .stat-label {
      margin-top: 0.24rem;
      font-size: 0.68rem;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    /* ── PROJECTS ─────────────────────────── */
    .projects-header { margin-bottom: 2.5rem; }
    .projects-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
      gap: 1.25rem;
    }
    .project-card {
      background: var(--card); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 1.45rem;
      transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
      display: flex; flex-direction: column; gap: 0.8rem;
      position: relative; overflow: hidden;
      box-shadow: 0 0 18px rgba(59,130,246,0.055);
    }
    .project-card::before {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(135deg, rgba(59,130,246,0.04), transparent);
      opacity: 0; transition: opacity 0.3s;
      border-radius: inherit;
      pointer-events: none;
    }
    .project-card.has-figure { overflow: visible; }
    .card-astronaut {
      --astro-x: 0px;
      --astro-y: 0px;
      --astro-rot: 0deg;
      --astro-facing: 1;
      position: absolute; bottom: calc(100% - 1px); left: 32px;
      width: 18px; height: 31px;
      pointer-events: none; user-select: none;
      filter: drop-shadow(0 0 8px rgba(59,130,246,0.35));
      opacity: 0;
      shape-rendering: crispEdges;
      transform-origin: center bottom;
    }
    .card-astronaut.visible {
      animation: astronautHop 1.4s linear forwards;
    }
    .card-astronaut.visible.is-autonomous {
      opacity: 1;
      animation: none;
      transform: translate(var(--astro-x), var(--astro-y)) rotate(var(--astro-rot)) scaleX(var(--astro-facing));
      transition: transform 1.45s cubic-bezier(0.22, 1, 0.36, 1), filter 0.35s ease;
      filter:
        drop-shadow(0 0 8px rgba(59,130,246,0.40))
        drop-shadow(0 0 15px rgba(52,211,153,0.12));
    }
    .card-astronaut .astronaut-body {
      transform-origin: center bottom;
      transform-box: fill-box;
    }
    .card-astronaut.is-autonomous .astronaut-body {
      animation: astronautSuitBob 2.6s ease-in-out infinite;
    }
    .card-astronaut .astronaut-arm-right,
    .card-astronaut .astronaut-arm-left,
    .card-astronaut .astronaut-visor-glint {
      transform-origin: center top;
      transform-box: fill-box;
    }
    .card-astronaut.is-autonomous.is-waving .astronaut-arm-right {
      animation: astronautWave 0.44s ease-in-out 3;
    }
    .card-astronaut.is-autonomous.is-looking .astronaut-visor-glint {
      animation: astronautVisorScan 0.8s steps(3, end) 2;
    }
    .card-astronaut.is-autonomous.is-alert {
      filter:
        drop-shadow(0 0 10px rgba(52,211,153,0.56))
        drop-shadow(0 0 18px rgba(96,165,250,0.22));
    }
    .card-astronaut.is-autonomous.is-alert .astronaut-body {
      animation: astronautAlertBob 0.38s ease-in-out 3;
    }
    @keyframes astronautHop {
      0%   { opacity: 0; transform: translateX(48px) translateY(0); }
      5%   { opacity: 1; transform: translateX(47px) translateY(0); }
      20%  {             transform: translateX(32px) translateY(-30px); }
      35%  {             transform: translateX(18px) translateY(0); }
      43%  {             transform: translateX(18px) translateY(0); }
      57%  {             transform: translateX(9px)  translateY(-17px); }
      70%  {             transform: translateX(0)    translateY(0); }
      78%  {             transform: translateX(0)    translateY(-5px); }
      86%  {             transform: translateX(0)    translateY(0); }
      100% { opacity: 1; transform: translateX(0)    translateY(0); }
    }
    @keyframes astronautSuitBob {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      45%      { transform: translateY(-2px) rotate(-2deg); }
      70%      { transform: translateY(1px) rotate(1deg); }
    }
    @keyframes astronautAlertBob {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      38%      { transform: translateY(-3px) rotate(-4deg); }
      68%      { transform: translateY(1px) rotate(3deg); }
    }
    @keyframes astronautWave {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      50%      { transform: translateY(-1px) rotate(-28deg); }
    }
    @keyframes astronautVisorScan {
      0%   { transform: translateX(-2px); opacity: 0.55; }
      50%  { transform: translateX(2px); opacity: 1; }
      100% { transform: translateX(0); opacity: 0.72; }
    }
    .card-astronaut-pixel .astronaut-comms-dot,
    .training-astronaut-face .astronaut-comms-dot {
      transform-origin: center;
      transform-box: fill-box;
      animation: fieldAgentCommsBlink 3.6s ease-in-out infinite;
    }
    .card-astronaut-pixel.mission-ping .astronaut-comms-dot,
    .training-astronaut-face.mission-ping .astronaut-comms-dot,
    .contact-lunar-astronaut.mission-ping .astronaut-comms-dot {
      animation: fieldAgentCommsBurst 0.72s ease-out 2;
    }
    @keyframes fieldAgentCommsBlink {
      0%, 100% {
        opacity: 0.72;
        filter: drop-shadow(0 0 4px rgba(52,211,153,0.46));
      }
      48% {
        opacity: 1;
        filter:
          drop-shadow(0 0 7px rgba(52,211,153,0.82))
          drop-shadow(0 0 13px rgba(96,165,250,0.22));
      }
    }
    @keyframes fieldAgentCommsBurst {
      0%, 100% { transform: scale(1); opacity: 0.8; }
      50% {
        transform: scale(1.9);
        opacity: 1;
        filter:
          drop-shadow(0 0 10px rgba(52,211,153,0.96))
          drop-shadow(0 0 18px rgba(96,165,250,0.36));
      }
    }
    .project-card:hover {
      transform: translateY(-4px);
      border-color: rgba(96,165,250,0.45);
      box-shadow: 0 0 64px rgba(96,165,250,0.45),
                  0 0 14px rgba(167,139,250,0.25),
                  0 12px 40px rgba(0,0,0,0.4);
    }
    .project-card:hover::before { opacity: 1; }
    .project-card.is-life-awake:not(:hover) {
      border-color: rgba(96,165,250,0.32);
    }
    .project-card.is-life-pulse:not(:hover) {
      border-color: rgba(96,165,250,0.38);
      box-shadow:
        0 0 22px rgba(96,165,250,0.12),
        0 0 10px rgba(52,211,153,0.05),
        0 12px 34px rgba(0,0,0,0.34);
      animation: cardLifePulse 0.85s ease-out;
    }
    .is-life-pulse:not(.project-card):not(.face) {
      animation: elementLifePulse 1.05s ease-out;
    }
    @keyframes elementLifePulse {
      0%, 100% {
        filter: drop-shadow(0 0 0 rgba(96,165,250,0));
      }
      42% {
        filter:
          drop-shadow(0 0 10px rgba(96,165,250,0.32))
          drop-shadow(0 0 18px rgba(52,211,153,0.16));
      }
    }
    .project-card.is-life-pulse:not(:hover)::before {
      opacity: 0.14;
      background:
        radial-gradient(circle at var(--life-x, 50%) var(--life-y, 50%),
          rgba(96,165,250,0.10), rgba(52,211,153,0.04) 20%, transparent 48%),
        linear-gradient(135deg, rgba(59,130,246,0.025), transparent);
    }
    html[data-site-mood="sleepy"] .project-card:not(:hover):not(.dashboard-expanded) {
      filter: saturate(0.84) brightness(0.9);
    }
    html[data-site-waking="1"] .project-card.is-life-pulse:not(:hover) {
      filter: saturate(1.04) brightness(1.02);
    }
    @keyframes cardLifePulse {
      0%   { box-shadow: 0 0 18px rgba(96,165,250,0.08), 0 12px 34px rgba(0,0,0,0.34); }
      45%  { box-shadow: 0 0 26px rgba(96,165,250,0.13), 0 0 10px rgba(52,211,153,0.05), 0 12px 34px rgba(0,0,0,0.34); }
      100% { box-shadow: 0 0 18px rgba(59,130,246,0.055); }
    }
    .project-card.featured { border-color: rgba(59,130,246,0.3); background: linear-gradient(135deg, #0f1828, #0c1226); }
    #solarSystemCard {
      border-color: rgba(96,165,250,0.42);
      box-shadow:
        0 0 28px rgba(96,165,250,0.14),
        0 0 10px rgba(52,211,153,0.04),
        0 12px 34px rgba(0,0,0,0.34);
    }
    .project-card.primary-featured {
      grid-column: 1 / -1;
      min-height: 280px;
      padding: 1.75rem;
      isolation: isolate;
      background: transparent;
      border-color: rgba(96,165,250,0.42);
      box-shadow: 0 0 30px rgba(59,130,246,0.10);
      --market-hole-x: 100%;
      --market-hole-y: 0px;
      --market-hole-w: 0px;
      --market-hole-h: 0px;
    }
    .project-card.primary-featured::before { display: none; }
    .project-card.primary-featured::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;
      border-radius: inherit;
      background:
        radial-gradient(circle at 85% 20%, rgba(52,211,153,0.11), transparent 34%),
        linear-gradient(135deg, #101a2c, #0b1224);
      pointer-events: none;
      -webkit-mask:
        linear-gradient(#000 0 0) top / 100% var(--market-hole-y) no-repeat,
        linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--market-hole-y) - var(--market-hole-h)) no-repeat,
        linear-gradient(#000 0 0) left var(--market-hole-y) / var(--market-hole-x) var(--market-hole-h) no-repeat,
        linear-gradient(#000 0 0) right var(--market-hole-y) / calc(100% - var(--market-hole-x) - var(--market-hole-w)) var(--market-hole-h) no-repeat;
      mask:
        linear-gradient(#000 0 0) top / 100% var(--market-hole-y) no-repeat,
        linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--market-hole-y) - var(--market-hole-h)) no-repeat,
        linear-gradient(#000 0 0) left var(--market-hole-y) / var(--market-hole-x) var(--market-hole-h) no-repeat,
        linear-gradient(#000 0 0) right var(--market-hole-y) / calc(100% - var(--market-hole-x) - var(--market-hole-w)) var(--market-hole-h) no-repeat;
    }
    .project-card.primary-featured > * {
      position: relative;
      z-index: 1;
    }
    .project-card.primary-featured:hover {
      border-color: rgba(96,165,250,0.6);
      box-shadow: 0 0 64px rgba(96,165,250,0.45),
                  0 0 14px rgba(167,139,250,0.25),
                  0 12px 40px rgba(0,0,0,0.4);
    }
    .project-card.primary-featured .card-title { font-size: clamp(1.35rem, 3vw, 1.9rem); }
    .project-card.primary-featured .card-desc {
      max-width: 680px;
      font-size: 0.9rem;
    }
    .market-feature-body {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(270px, 360px);
      gap: clamp(1.4rem, 4vw, 2.5rem);
      align-items: stretch;
    }
    .market-feature-copy {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      min-width: 0;
    }
    .market-snapshot {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 260px;
      padding: 1rem;
      border: 1px solid rgba(96,165,250,0.34);
      border-radius: 8px;
      background: transparent;
      color: var(--text);
      text-align: left;
      cursor: pointer;
      overflow: hidden;
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.025),
        0 0 30px rgba(59,130,246,0.12);
      transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    }
    .market-snapshot:hover,
    .market-snapshot:focus-visible {
      border-color: rgba(96,165,250,0.68);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.04),
        0 0 38px rgba(59,130,246,0.22);
      transform: translateY(-2px);
      outline: none;
    }
    .market-snapshot-kicker {
      color: var(--accent1);
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }
    .market-snapshot-title {
      margin-top: 0.25rem;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 1.05rem;
      font-weight: 700;
      line-height: 1.2;
    }
    #marketSnapshotCanvas {
      display: block;
      width: 100%;
      height: 142px;
      margin: 0.4rem 0 0.3rem;
      background: transparent;
    }
    .market-snapshot-caption {
      color: var(--subtle);
      font-size: 0.76rem;
      line-height: 1.45;
    }
    .market-snapshot-cta {
      margin-top: 0.55rem;
      color: #bfdbfe;
      font-size: 0.74rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .project-card.primary-featured.dashboard-expanded {
      width: var(--layout-viewport-width);
      max-width: var(--layout-viewport-width);
      margin-left: calc(50% - var(--layout-viewport-half));
      margin-right: calc(50% - var(--layout-viewport-half));
      background: transparent;
      border-left: 0;
      border-right: 0;
      border-radius: 0;
      padding-left: max(2rem, calc((100vw - 1100px) / 2 + 2.5rem));
      padding-right: max(2rem, calc((100vw - 1100px) / 2 + 2.5rem));
      box-shadow:
        0 -10px 42px rgba(59,130,246,0.12),
        0 10px 42px rgba(59,130,246,0.12);
    }
    .project-card.primary-featured.dashboard-expanded,
    .project-card.primary-featured.dashboard-expanded:hover,
    .project-card.primary-featured.dashboard-expanded.is-magnet,
    .project-card.primary-featured.dashboard-expanded.is-magnet-settling {
      transform: none !important;
      transition: border-color 0.2s, box-shadow 0.2s;
      will-change: auto;
    }
    .project-card.primary-featured.dashboard-expanded::after {
      display: block;
      border-radius: 0;
      background:
        radial-gradient(circle at 82% 14%, rgba(52,211,153,0.10), transparent 32%),
        linear-gradient(135deg, #101a2c, #0b1224 58%, #050a18);
    }
    .project-card.primary-featured.dashboard-expanded .dashboard-frame {
      height: clamp(640px, 78vh, 960px);
    }
    .project-card.wip { opacity: 0.75; }
    .card-top { display: flex; align-items: flex-start; justify-content: space-between; }
    .card-icon {
      width: 44px; height: 44px; border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.4rem;
      background: rgba(59,130,246,0.1); border: 1px solid rgba(59,130,246,0.2);
      cursor: pointer;
      transition: transform 0.22s ease, border-color 0.22s ease,
                  box-shadow 0.22s ease, background 0.22s ease,
                  filter 0.22s ease;
    }
    .card-icon svg {
      width: 32px;
      height: 32px;
      overflow: visible;
    }
    .card-icon svg * {
      vector-effect: non-scaling-stroke;
    }
    .icon-orbit-ring {
      fill: none;
      stroke: rgba(96,165,250,0.72);
      stroke-width: 1.5;
    }
    .icon-orbit-ring.alt {
      transform: rotate(62deg);
      transform-origin: 22px 22px;
      stroke: rgba(167,139,250,0.58);
    }
    .icon-orbit-core {
      fill: rgba(219,234,254,0.88);
      filter: drop-shadow(0 0 5px rgba(96,165,250,0.42));
    }
    .icon-orbit-dot {
      fill: #34d399;
      filter: drop-shadow(0 0 5px rgba(52,211,153,0.42));
    }
    .icon-screen,
    .icon-house {
      fill: rgba(15,23,42,0.72);
      stroke: rgba(96,165,250,0.78);
      stroke-width: 1.7;
    }
    .icon-stand,
    .icon-code,
    .icon-house-roof,
    .icon-chart {
      fill: none;
      stroke: rgba(219,234,254,0.82);
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .icon-code {
      stroke: rgba(52,211,153,0.84);
      stroke-width: 1.55;
    }
    .icon-chart {
      stroke: rgba(52,211,153,0.88);
    }
    .icon-chart-dot {
      fill: #34d399;
      filter: drop-shadow(0 0 5px rgba(52,211,153,0.42));
    }
    @media (prefers-reduced-motion: no-preference) {
      .card-icon-orbit .icon-orbit-dot {
        transform-origin: 22px 22px;
        animation: iconSatelliteOrbit 6.8s linear infinite;
      }
      .card-icon-orbit .icon-orbit-ring {
        stroke-dasharray: 78 16;
        animation: iconOrbitCurrent 7.4s linear infinite;
      }
      .card-icon-web .icon-code {
        stroke-dasharray: 8 4;
        animation: iconCodeMarch 3.3s ease-in-out infinite;
      }
      .card-icon-market .icon-chart {
        stroke-dasharray: 26;
        animation: iconChartTrace 3.8s ease-in-out infinite;
      }
      .card-icon-market .icon-chart-dot {
        transform-box: fill-box;
        transform-origin: center;
        animation: iconChartBeacon 2.4s ease-in-out infinite;
      }
      .card-icon-moon svg {
        animation: iconMoonDrift 5.6s ease-in-out infinite;
      }
    }
    @keyframes iconSatelliteOrbit {
      to { transform: rotate(360deg); }
    }
    @keyframes iconOrbitCurrent {
      to { stroke-dashoffset: -94; }
    }
    @keyframes iconCodeMarch {
      0%, 100% { stroke-dashoffset: 0; }
      50% { stroke-dashoffset: -18; }
    }
    @keyframes iconChartTrace {
      0%, 100% { stroke-dashoffset: 0; }
      45% { stroke-dashoffset: -18; }
      70% { stroke-dashoffset: -26; }
    }
    @keyframes iconChartBeacon {
      0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 5px rgba(52,211,153,0.42));
      }
      50% {
        transform: scale(1.36);
        filter: drop-shadow(0 0 11px rgba(52,211,153,0.74));
      }
    }
    @keyframes iconMoonDrift {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-1.5px); }
    }
    .card-icon:hover,
    .card-icon:focus-visible,
    .card-icon.is-speaking {
      transform: translateY(-2px) scale(1.05);
      background: rgba(59,130,246,0.16);
      border-color: rgba(96,165,250,0.54);
      box-shadow: 0 0 20px rgba(96,165,250,0.22),
                  0 0 8px rgba(167,139,250,0.14);
      filter: saturate(1.12);
      outline: none;
    }
    .is-pressing {
      animation: alivePress 0.42s cubic-bezier(0.18, 0.9, 0.28, 1);
    }
    @keyframes alivePress {
      0%, 100% { transform: translateY(0) scale(1); }
      32%      { transform: translateY(1px) scale(0.965); }
      68%      { transform: translateY(-1px) scale(1.025); }
    }
    .card-desc.is-typing {
      color: #dbeafe;
      text-shadow: 0 0 16px rgba(96,165,250,0.16);
    }
    .card-icon-moon svg {
      width: 38px;
      height: 38px;
      filter: drop-shadow(0 0 10px rgba(203,213,225,0.22));
    }
    .card-badges { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; }
    .badge {
      font-size: 0.7rem; font-weight: 600; padding: 0.2rem 0.6rem;
      border-radius: 100px; letter-spacing: 0.05em;
      position: relative;
      overflow: hidden;
      transform: translateZ(0);
    }
    .badge::after {
      content: '';
      position: absolute;
      inset: -1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
      opacity: 0;
      transform: translateX(-130%);
      pointer-events: none;
    }
    @media (prefers-reduced-motion: no-preference) {
      .project-card:hover .card-badges .badge,
      .project-card:focus-within .card-badges .badge,
      .training-project-top:hover .training-tags .badge,
      .training-project-top:focus-within .training-tags .badge {
        animation: badgeCalibrate 0.92s cubic-bezier(0.18, 0.85, 0.28, 1) both;
        animation-delay: var(--badge-delay, 0ms);
      }
      .project-card:hover .card-badges .badge::after,
      .project-card:focus-within .card-badges .badge::after,
      .training-project-top:hover .training-tags .badge::after,
      .training-project-top:focus-within .training-tags .badge::after {
        animation: badgeScan 0.92s ease-out both;
        animation-delay: var(--badge-delay, 0ms);
      }
      .card-badges .badge:nth-child(2),
      .training-tags .badge:nth-child(2) { --badge-delay: 80ms; }
      .card-badges .badge:nth-child(3),
      .training-tags .badge:nth-child(3) { --badge-delay: 150ms; }
    }
    @keyframes badgeCalibrate {
      0%, 100% { transform: translateY(0) scale(1); filter: none; }
      24% { transform: translateY(-1px) scale(1.045); filter: brightness(1.2); }
      48% { transform: translateY(0) scale(0.985); filter: brightness(1.05); }
      72% { transform: translateY(-0.5px) scale(1.015); }
    }
    @keyframes badgeScan {
      0% { opacity: 0; transform: translateX(-130%); }
      24% { opacity: 0.62; }
      100% { opacity: 0; transform: translateX(130%); }
    }
    .badge-blue   { background: rgba(59,130,246,0.15); color: #60a5fa; }
    .badge-green  { background: rgba(52,211,153,0.15); color: #34d399; }
    .badge-purple { background: rgba(167,139,250,0.15); color: #a78bfa; }
    .badge-orange { background: rgba(251,146,60,0.15); color: #fb923c; }
    .badge-gray   { background: rgba(100,116,139,0.15); color: #94a3b8; }
    .card-title {
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 600; font-size: 1.04rem;
      line-height: 1.2;
    }
    .card-desc { color: var(--subtle); font-size: 0.84rem; line-height: 1.55; flex: 1; }
    .card-tags { display: flex; flex-wrap: wrap; gap: 0.32rem; }
    .tag {
      font-size: 0.68rem; color: var(--muted); padding: 0.16rem 0.48rem;
      border-radius: 4px; background: rgba(255,255,255,0.04); border: 1px solid var(--border);
    }
    .card-readout {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.35rem;
      padding: 0.42rem;
      border: 1px solid rgba(96,165,250,0.13);
      border-radius: 7px;
      background:
        linear-gradient(90deg, rgba(96,165,250,0.08), rgba(167,139,250,0.04)),
        rgba(255,255,255,0.018);
    }
    .card-readout span {
      color: var(--muted);
      font-size: 0.64rem;
      line-height: 1.25;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      white-space: nowrap;
    }
    .card-readout b {
      color: #dbeafe;
      font-weight: 800;
      text-shadow: 0 0 10px rgba(96,165,250,0.28);
    }
    .card-links { display: flex; gap: 0.75rem; margin-top: auto; }
    .card-link {
      font-size: 0.8rem; font-weight: 500; color: var(--accent1);
      text-decoration: none; display: flex; align-items: center; gap: 0.35rem;
      transition: color 0.2s;
    }
    .card-link:hover { color: var(--accent2); }
    .card-link.demo-link {
      background: rgba(59,130,246,0.12); border: 1px solid rgba(59,130,246,0.25);
      padding: 0.35rem 0.9rem; border-radius: 6px;
      transition: all 0.2s;
    }
    .card-link.demo-link:hover { background: rgba(59,130,246,0.2); }
    .wip-label {
      font-size: 0.75rem; color: var(--muted); font-style: italic;
      display: flex; align-items: center; gap: 0.35rem;
    }
    .dashboard-launch {
      display: flex; flex-wrap: wrap; gap: 0.6rem;
      align-items: center; margin-top: 0.25rem;
    }
    .dashboard-region-btn,
    .dashboard-collapse {
      font-family: 'Inter', sans-serif;
      font-size: 0.78rem; font-weight: 600;
      color: var(--subtle);
      text-decoration: none;
      background: rgba(255,255,255,0.05);
      border: 1px solid var(--border);
      border-radius: 7px;
      padding: 0.45rem 0.8rem;
      cursor: pointer;
      display: inline-flex; align-items: center;
      position: relative;
      overflow: hidden;
      transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
    }
    .dashboard-region-btn:hover,
    .dashboard-region-btn.active,
    .dashboard-collapse:hover {
      color: #bfdbfe;
      background: rgba(59,130,246,0.14);
      border-color: rgba(96,165,250,0.46);
      box-shadow: 0 0 16px rgba(59,130,246,0.18);
    }
    .dashboard-region-btn.active {
      background: linear-gradient(135deg, rgba(59,130,246,0.32), rgba(129,140,248,0.22));
    }
    @keyframes regionFlashAttract {
      0%, 100% {
        box-shadow: 0 0 0 rgba(96,165,250,0);
        border-color: var(--border);
        color: var(--subtle);
      }
      35%, 65% {
        box-shadow: 0 0 28px rgba(96,165,250,0.7), 0 0 6px rgba(96,165,250,0.45);
        border-color: rgba(96,165,250,0.9);
        color: #dbeafe;
        background: rgba(59,130,246,0.22);
      }
    }
    .dashboard-region-btn.flash-attract {
      animation: regionFlashAttract 0.9s ease-in-out 3;
    }
    .dashboard-embed {
      display: none;
      margin-top: 1.25rem;
      border: 1px solid rgba(96,165,250,0.28);
      border-radius: 10px;
      overflow: hidden;
      background: #050a18;
      box-shadow: inset 0 0 32px rgba(59,130,246,0.08), 0 0 30px rgba(59,130,246,0.1);
      position: relative;
    }
    .dashboard-embed.open { display: block; }
    .dashboard-embed.is-loading::after,
    .dashboard-embed.has-error::after {
      position: absolute;
      inset: 3.5rem 0 0;
      display: grid;
      place-items: center;
      z-index: 3;
      padding: 2rem;
      color: var(--subtle);
      font-weight: 700;
      letter-spacing: 0.04em;
      background: rgba(5,10,24,0.78);
      backdrop-filter: blur(6px);
      pointer-events: none;
    }
    .dashboard-embed.is-loading::after {
      content: 'Loading dashboard...';
    }
    .dashboard-embed.has-error::after {
      content: 'Dashboard could not load. Open the Full App link instead.';
      color: #fca5a5;
    }
    .dashboard-embed-bar {
      display: flex; justify-content: space-between; align-items: center; gap: 1rem;
      padding: 0.7rem 0.85rem;
      border-bottom: 1px solid rgba(96,165,250,0.18);
      background: rgba(12,18,38,0.82);
    }
    .dashboard-embed-title {
      font-size: 0.72rem; color: var(--subtle);
      text-transform: uppercase; letter-spacing: 0.1em;
      font-weight: 600;
    }
    .dashboard-frame {
      display: block;
      width: 100%;
      /* JS expands this to the embedded dashboard content height so the
         portfolio page keeps normal scroll ownership after a region opens. */
      height: clamp(640px, 78vh, 960px);
      border: 0;
      background: var(--bg);
    }

    /* ── SOLAR SYSTEM DEMO ────────────────── */
    #demo-section {
      padding: 0; max-width: 100%;
      position: relative; z-index: 1;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      background: transparent;
      box-shadow: 0 -6px 28px rgba(59,130,246,0.07), 0 6px 28px rgba(59,130,246,0.07);
    }
    /* Blue bands sit above and below the sim; the sim itself is a clear
       window down to the page starfield. */
    .demo-band { background: var(--bg); }
    .demo-band-top    { padding: 3.75rem 0 2.25rem; }
    .demo-band-bottom { height: 5rem; }
    .demo-sim-wrap    { padding-top: 0; padding-bottom: 0; }
    .demo-inner { max-width: 1100px; margin: 0 auto; padding: 0 2rem; }
    .demo-sim-wrap { max-width: 1260px; }
    .sim-container {
      position: relative; margin-top: 0;
      background: transparent; border: 1px solid rgba(96,165,250,0.44);
      border-radius: 16px; overflow: hidden;
      /* Persistent glow around the sim border, layered on top of the
         100vmax dark fill that creates the demo strip beside the canvas. */
      box-shadow:
        0 0 28px rgba(96,165,250,0.16),
        0 0 0 100vmax var(--bg),
        0 0 0 1px rgba(96,165,250,0.22),
        inset 0 0 18px rgba(96,165,250,0.10),
        inset 0 0 48px rgba(96,165,250,0.045);
      clip-path: inset(0 -100vmax);
    }
    #solarCanvas {
      display: block; width: 100%;
      cursor: pointer; touch-action: auto;
      height: clamp(540px, 68vh, 680px);
    }
    .sim-container.sim-active #solarCanvas {
      cursor: grab;
      touch-action: none;
    }
    #solarCanvas:active { cursor: grabbing; }
    .sim-controls {
      position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%);
      display: flex; gap: 0.5rem; background: rgba(0,0,0,0.6);
      backdrop-filter: blur(8px); border: 1px solid var(--border);
      padding: 0.5rem 0.75rem; border-radius: 100px;
      box-shadow: 0 0 24px rgba(59,130,246,0.14);
    }
    .sim-btn {
      background: rgba(255,255,255,0.06); border: 1px solid var(--border);
      color: var(--subtle); border-radius: 6px; padding: 0.35rem 0.75rem;
      font-size: 0.75rem; font-weight: 600; cursor: pointer;
      transition: all 0.2s; font-family: 'Inter', sans-serif;
    }
    .sim-btn:hover { background: rgba(59,130,246,0.15); color: var(--accent1); border-color: rgba(59,130,246,0.3); }
    .sim-btn.active {
      background: rgba(59,130,246,0.22);
      color: #bfdbfe;
      border-color: rgba(96,165,250,0.58);
      box-shadow: 0 0 16px rgba(59,130,246,0.28);
    }
    .sim-info {
      position: absolute; top: 1rem; left: 1rem;
      font-size: 0.7rem; color: rgba(148,163,184,0.5);
      font-family: 'Inter', sans-serif; pointer-events: none;
      line-height: 1.6;
    }
    /* Bodies dropdown */
    .body-list {
      position: absolute; bottom: calc(1rem + 48px); left: 50%;
      transform: translateX(-50%) translateY(8px);
      background: rgba(10, 15, 35, 0.95);
      backdrop-filter: blur(16px);
      border: 1px solid var(--border); border-radius: 12px;
      padding: 0.4rem; min-width: 220px;
      max-height: 320px; overflow-y: auto;
      box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 24px rgba(59,130,246,0.18);
      opacity: 0; visibility: hidden;
      transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
      z-index: 9; font-family: 'Inter', sans-serif;
    }
    .body-list.open {
      opacity: 1; visibility: visible;
      transform: translateX(-50%) translateY(0);
    }
    .body-list-header {
      font-size: 0.6rem; color: var(--muted);
      text-transform: uppercase; letter-spacing: 0.12em;
      padding: 0.5rem 0.6rem 0.25rem; font-weight: 600;
    }
    .body-list-item {
      display: flex; align-items: center; gap: 0.55rem;
      padding: 0.4rem 0.6rem; border-radius: 6px;
      cursor: pointer; font-size: 0.78rem; color: var(--subtle);
      transition: background 0.15s, color 0.15s;
      user-select: none;
    }
    .body-list-item:hover {
      background: rgba(59,130,246,0.15); color: var(--accent1);
    }
    .body-list-item.moon { padding-left: 1.5rem; font-size: 0.72rem; opacity: 0.85; }
    .body-list-dot {
      width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
      box-shadow: 0 0 6px currentColor;
    }
    .body-list-item.moon .body-list-dot { width: 7px; height: 7px; }

    /* planet data panel */
    #planetPanel {
      position: absolute; top: 0; right: 0; bottom: 0;
      width: 280px; background: rgba(10, 15, 35, 0.95);
      backdrop-filter: blur(16px); border-left: 1px solid var(--border);
      padding: 1.5rem; transform: translateX(100%);
      transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
      overflow-y: auto; z-index: 10;
    }
    #planetPanel.open { transform: translateX(0); }
    .panel-close {
      position: absolute; top: 0.85rem; right: 0.85rem;
      background: rgba(59,130,246,0.15); border: 1px solid rgba(59,130,246,0.4);
      color: var(--text); width: 34px; height: 34px; border-radius: 50%;
      cursor: pointer; font-size: 1rem; line-height: 1; display: flex;
      align-items: center; justify-content: center; transition: all 0.2s;
      box-shadow: 0 0 12px rgba(59,130,246,0.25);
      z-index: 2;
    }
    .panel-close:hover {
      background: rgba(59,130,246,0.3); color: #fff;
      border-color: rgba(59,130,246,0.7);
      box-shadow: 0 0 16px rgba(59,130,246,0.45);
    }
    .panel-planet-name {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 1.4rem; font-weight: 700; margin-bottom: 0.25rem;
      margin-right: 2rem;
    }
    .panel-type { font-size: 0.75rem; color: var(--muted); margin-bottom: 1.25rem; }
    .panel-stats { display: flex; flex-direction: column; gap: 0.75rem; }
    .panel-stat {
      display: flex; flex-direction: column; gap: 0.2rem;
      padding: 0.6rem 0.75rem;
      background: rgba(255,255,255,0.03); border-radius: 8px;
      border: 1px solid rgba(255,255,255,0.05);
    }
    .panel-stat-label { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
    .panel-stat-value { font-size: 0.9rem; font-weight: 500; color: var(--text); }
    .panel-fact {
      margin-top: 1rem; padding: 0.75rem; border-radius: 8px;
      background: rgba(59,130,246,0.06); border: 1px solid rgba(59,130,246,0.15);
      font-size: 0.8rem; color: var(--subtle); line-height: 1.6;
    }
    .panel-dot {
      width: 32px; height: 32px; border-radius: 50%; margin-bottom: 0.75rem;
    }

    /* ── CONTACT ──────────────────────────── */
    #contact {
      text-align: center;
      padding-bottom: 7.1rem;
      position: relative;
    }
    #contact > :not(.contact-lunar-scene) {
      position: relative;
      z-index: 1;
    }
    #contact .section-desc {
      max-width: min(920px, calc(100vw - 2rem));
      font-size: clamp(0.82rem, 1.65vw, 1rem);
      white-space: nowrap;
    }
    .contact-desc { margin: 0 auto; }
    .contact-title-row {
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 1rem;
    }
    .contact-title-row .section-title { margin-bottom: 0; }
    .contact-face {
      width: 72px; height: 72px;
      margin-right: 1.25rem;
      flex-shrink: 0;
      pointer-events: auto;
      cursor: pointer;
      transition: opacity 0.7s ease, transform 0.2s ease,
                  width 0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
                  margin-right 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .contact-face:hover { transform: scale(1.06); }
    /* Once exploded, collapse the slot so the title bounces back to center. */
    .contact-face.collapsed {
      width: 0;
      margin-right: 0;
      overflow: hidden;
    }
    @media (max-width: 768px) {
      .contact-face { width: 56px; height: 56px; margin-right: 0.9rem; }
    }
    .contact-lunar-scene {
      position: absolute;
      right: clamp(0.9rem, 3vw, 2.4rem);
      bottom: 0;
      width: clamp(168px, 20vw, 232px);
      height: 86px;
      pointer-events: none;
      z-index: 0;
      opacity: 0.94;
      isolation: isolate;
    }
    .contact-lunar-scene::before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(148,163,184,0.42), rgba(96,165,250,0.36), transparent);
      box-shadow:
        0 0 10px rgba(96,165,250,0.18),
        0 5px 18px rgba(15,23,42,0.46);
      z-index: 0;
    }
    .contact-lunar-scene::after {
      content: '';
      position: absolute;
      left: 14%;
      right: 22%;
      bottom: 2px;
      height: 7px;
      border-radius: 999px;
      background:
        radial-gradient(ellipse at 18% 50%, rgba(148,163,184,0.20) 0 12%, transparent 13%),
        radial-gradient(ellipse at 58% 44%, rgba(148,163,184,0.16) 0 10%, transparent 11%),
        radial-gradient(ellipse at 82% 50%, rgba(148,163,184,0.14) 0 9%, transparent 10%);
      opacity: 0.9;
      z-index: 0;
    }
    .contact-lunar-lander {
      position: absolute;
      right: 12px;
      bottom: -7px;
      width: 58px;
      height: 58px;
      z-index: 2;
      filter: drop-shadow(0 0 8px rgba(59,130,246,0.35));
    }
    .contact-lunar-flag {
      position: absolute;
      right: 124px;
      bottom: 0;
      width: 16px;
      height: 38px;
      z-index: 4;
      opacity: 0;
      overflow: visible;
      transform:
        translateX(var(--flag-x, -52px))
        translateY(3px)
        scaleY(0.62);
      transform-origin: 50% 100%;
      transition:
        opacity 0.18s ease,
        transform 0.58s cubic-bezier(0.18, 0.9, 0.28, 1.18);
      filter:
        drop-shadow(0 0 7px rgba(167,139,250,0.40))
        drop-shadow(0 0 14px rgba(96,165,250,0.12));
    }
    .contact-lunar-flag.is-planted {
      opacity: 1;
      transform:
        translateX(var(--flag-x, -52px))
        translateY(0)
        scaleY(1);
    }
    .contact-lunar-flag.is-planted .contact-lunar-flag-cloth {
      transform-origin: 5px 11px;
      animation: contactFlagFlutter 3.2s ease-in-out infinite;
    }
    .contact-lunar-astronaut {
      position: absolute;
      right: 124px;
      bottom: 0;
      width: 18px;
      height: 32px;
      z-index: 3;
      transform-origin: center bottom;
      transform-box: border-box;
      filter:
        drop-shadow(0 0 8px rgba(59,130,246,0.40))
        drop-shadow(0 0 15px rgba(52,211,153,0.12));
    }
    .contact-lunar-astronaut-sprite {
      display: block;
      width: 18px;
      height: 32px;
      overflow: visible;
      shape-rendering: crispEdges;
    }
    .contact-lunar-astronaut.is-autonomous {
      transform:
        translate(var(--astro-x, 0px), var(--astro-y, 0px))
        rotate(var(--astro-rot, 0deg))
        scaleX(var(--astro-facing, 1));
      transition: transform 1.8s cubic-bezier(0.22, 1, 0.36, 1), filter 0.35s ease;
    }
    .contact-lunar-astronaut .astronaut-body {
      transform-origin: center bottom;
      transform-box: fill-box;
    }
    .contact-lunar-astronaut.is-autonomous .astronaut-body {
      animation: astronautSuitBob 2.6s ease-in-out infinite;
    }
    .contact-lunar-astronaut .astronaut-arm-right,
    .contact-lunar-astronaut .astronaut-arm-left,
    .contact-lunar-astronaut .astronaut-visor-glint {
      transform-origin: center top;
      transform-box: fill-box;
    }
    .contact-lunar-astronaut.is-autonomous.is-waving .astronaut-arm-right {
      animation: astronautWave 0.44s ease-in-out 3;
    }
    .contact-lunar-astronaut.is-autonomous.is-looking .astronaut-visor-glint {
      animation: astronautVisorScan 0.8s steps(3, end) 2;
    }
    .contact-lunar-astronaut.is-autonomous.is-alert {
      filter:
        drop-shadow(0 0 10px rgba(52,211,153,0.56))
        drop-shadow(0 0 18px rgba(96,165,250,0.22));
    }
    .contact-lunar-astronaut.is-autonomous.is-alert .astronaut-body {
      animation: astronautAlertBob 0.38s ease-in-out 3;
    }
    .contact-lunar-astronaut.is-planting-flag .astronaut-body {
      animation: astronautPlantFlag 0.9s ease-in-out 2;
    }
    .contact-lunar-astronaut.is-planting-flag .astronaut-arm-right {
      animation: astronautPlantArm 0.62s ease-in-out 3;
    }
    @keyframes contactFlagFlutter {
      0%, 100% { transform: skewY(0deg) translateX(0); }
      45%      { transform: skewY(-5deg) translateX(0.4px); }
      72%      { transform: skewY(3deg) translateX(-0.2px); }
    }
    @keyframes astronautPlantFlag {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      38%      { transform: translateY(1px) rotate(4deg); }
      70%      { transform: translateY(-1px) rotate(-2deg); }
    }
    @keyframes astronautPlantArm {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      42%      { transform: translateY(1px) rotate(-38deg); }
      74%      { transform: translateY(-1px) rotate(-18deg); }
    }
    @media (max-width: 768px) {
      #contact { padding-bottom: 7.75rem; }
      .contact-lunar-scene {
        right: 50%;
        bottom: 0;
        width: 184px;
        transform: translateX(50%);
      }
      .contact-lunar-lander {
        right: 6px;
      }
      .contact-lunar-flag {
        right: 104px;
      }
      .contact-lunar-astronaut {
        right: 104px;
      }
    }

    /* ── Inertial cursor magnetism on project cards ───────────────────────── */
    .project-card.is-magnet {
      /* While JS drives the transform via rAF, disable the CSS transition so
         each frame's value is shown directly without interpolation lag. */
      transition: border-color 0.2s, box-shadow 0.2s;
      will-change: transform;
    }
    .project-card.is-magnet-settling {
      /* Brief ease-out as the card returns to rest after pointerleave. */
      transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                  border-color 0.2s, box-shadow 0.2s;
    }
    .project-card[data-no-magnet],
    .project-card[data-no-magnet]:hover,
    .project-card[data-no-magnet].is-magnet,
    .project-card[data-no-magnet].is-magnet-settling {
      transform: none !important;
      will-change: auto;
    }

    /* ── Spring-damped scrollspy nav indicator ────────────────────────────── */
    .nav-links { position: relative; }
    .nav-indicator {
      position: absolute;
      top: 50%;
      left: 0;
      width: 0;
      height: 22px;
      transform: translate3d(0, -50%, 0);
      border-radius: 999px;
      background: rgba(59,130,246,0.14);
      box-shadow: 0 0 18px rgba(59,130,246,0.32),
                  inset 0 0 0 1px rgba(96,165,250,0.45);
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.35s ease;
      z-index: 0;
    }
    .nav-indicator.nav-indicator-visible { opacity: 1; }
    .nav-links li, .nav-links a { position: relative; z-index: 1; }
    .nav-trail-dot {
      position: absolute;
      top: 50%;
      left: 0;
      width: 3px;
      height: 3px;
      border-radius: 999px;
      background: #bfdbfe;
      box-shadow: 0 0 9px rgba(96,165,250,0.62),
                  0 0 16px rgba(52,211,153,0.22);
      pointer-events: none;
      z-index: 0;
      opacity: 0;
      transform: translate3d(var(--trail-x), calc(-50% + var(--trail-y)), 0) scale(0.7);
      animation: navTrailDrift 0.82s ease-out forwards;
      animation-delay: var(--trail-delay, 0ms);
    }
    @keyframes navTrailDrift {
      0% {
        opacity: 0;
        transform: translate3d(var(--trail-x), calc(-50% + var(--trail-y)), 0) scale(0.7);
      }
      18% { opacity: 0.9; }
      100% {
        opacity: 0;
        transform: translate3d(
          calc(var(--trail-x) + var(--trail-dx)),
          calc(-50% + var(--trail-y) - 8px),
          0
        ) scale(0.12);
      }
    }

    /* ── Constellation lines on skill chips ───────────────────────────────── */
    .skills-grid { position: relative; }
    .skill-constellation {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.9s ease;
      z-index: 0;
      filter: drop-shadow(0 0 6px rgba(96,165,250,0.2));
    }
    .skill-constellation.visible { opacity: 1; }
    .skills-grid .skill-tag { position: relative; z-index: 1; }

    /* ── Gravity-well particle canvas on solar-system card ────────────────── */
    .gravity-well-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
      opacity: 0;
      transition: opacity 0.35s ease;
    }
    .gravity-well-canvas.active { opacity: 1; }
    /* Lift the real content above the absolute canvas without dragging the
       canvas itself back into flow — :not() keeps the layout-affecting rule
       off the canvas, which is meant to stay position:absolute. */
    #solarSystemCard > *:not(.gravity-well-canvas) {
      position: relative;
      z-index: 1;
    }
    .contact-links { display: flex; justify-content: center; gap: 1rem; margin-top: 2.5rem; flex-wrap: wrap; }
    .contact-link {
      display: flex; align-items: center; gap: 0.6rem;
      padding: 0.75rem 1.5rem; border-radius: 8px;
      border: 1px solid var(--border); color: var(--subtle);
      text-decoration: none; font-size: 0.875rem; font-weight: 500;
      position: relative;
      overflow: hidden;
      transition: transform 0.2s ease, color 0.3s ease,
                  border-color 0.3s ease, box-shadow 0.3s ease,
                  background 0.3s ease;
      box-shadow: 0 0 20px rgba(59,130,246,0.08);
    }
    .contact-link[data-social-placeholder] {
      padding-right: 4.35rem;
      cursor: help;
    }
    .contact-link[data-social-placeholder]::after {
      content: attr(data-state-label);
      position: absolute;
      top: 50%;
      right: 0.65rem;
      transform: translateY(-50%);
      padding: 0.16rem 0.38rem;
      border: 1px solid rgba(96,165,250,0.26);
      border-radius: 999px;
      color: #bfdbfe;
      background: rgba(15,23,42,0.82);
      font-size: 0.56rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      line-height: 1;
      text-transform: uppercase;
      box-shadow: 0 0 12px rgba(59,130,246,0.14);
      pointer-events: none;
      transition: color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    }
    .contact-link[data-social-placeholder].is-coming-soon::after,
    .contact-link[data-social-placeholder]:hover::after,
    .contact-link[data-social-placeholder]:focus-visible::after {
      color: #f8fafc;
      border-color: currentColor;
      animation: placeholderSignal 1.15s ease-out;
    }
    @keyframes placeholderSignal {
      0%, 100% { box-shadow: 0 0 12px rgba(59,130,246,0.14); }
      45% { box-shadow: 0 0 18px rgba(96,165,250,0.42), 0 0 28px rgba(52,211,153,0.18); }
    }
    .contact-link:hover {
      transform: translateY(-2px);
      color: #dbeafe;
      background: rgba(59,130,246,0.10);
      border-color: rgba(96,165,250,0.55);
      box-shadow: 0 0 38px rgba(96,165,250,0.45),
                  0 0 14px rgba(167,139,250,0.25);
    }
    .contact-link.linkedin-link:hover,
    .contact-link.linkedin-link:focus-visible,
    .contact-link.linkedin-link.is-coming-soon {
      color: #fecaca;
      background: rgba(127,29,29,0.24);
      border-color: rgba(248,113,113,0.72);
      box-shadow: 0 0 34px rgba(248,113,113,0.35),
                  0 0 12px rgba(239,68,68,0.25);
    }
    .contact-desc.is-coming-soon {
      color: #fecaca;
      text-shadow: 0 0 16px rgba(248,113,113,0.28);
    }
    .contact-link.github-link:hover,
    .contact-link.github-link:focus-visible,
    .contact-link.github-link.is-coming-soon {
      color: #fed7aa;
      background: rgba(124,45,18,0.24);
      border-color: rgba(251,146,60,0.72);
      box-shadow: 0 0 34px rgba(251,146,60,0.32),
                  0 0 12px rgba(245,158,11,0.22);
    }
    footer {
      position: relative; z-index: 1;
      padding: 2.25rem 1.5rem 2rem;
      color: var(--muted); font-size: 0.8rem;
      border-top: 1px solid rgba(96,165,250,0.25);
      background: var(--bg);
      box-shadow: 0 -8px 40px rgba(59,130,246,0.10);
      transition: border-color 0.5s ease, box-shadow 0.5s ease;
    }
    footer:hover {
      border-top-color: rgba(96,165,250,0.45);
      box-shadow: 0 -10px 64px rgba(96,165,250,0.34),
                  0 -2px 14px rgba(167,139,250,0.20);
    }
    .footer-inner {
      max-width: 1100px; margin: 0 auto;
      display: flex; flex-direction: column; align-items: center;
      gap: 0.5rem;
    }
    .footer-mark {
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 700; font-size: 1.05rem;
      letter-spacing: 0.01em;
      text-decoration: none;
      background: linear-gradient(135deg, var(--accent1), var(--accent2));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    }
    .footer-meta {
      display: inline-flex; align-items: center; gap: 0.15rem;
      font-size: 0.78rem; color: var(--subtle);
    }
    .footer-status { display: inline-flex; align-items: center; gap: 0.4rem; }
    .footer-status-text {
      transition: color 0.35s ease, text-shadow 0.35s ease;
    }
    .footer-status-dot {
      display: inline-block; width: 7px; height: 7px; border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 10px rgba(52,211,153,0.7);
      animation: livingStatusBreath 3.8s ease-in-out infinite;
      transition: background 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
    }
    footer[data-footer-mood="curious"] .footer-status-dot {
      background: #60a5fa;
      box-shadow: 0 0 12px rgba(96,165,250,0.82), 0 0 24px rgba(167,139,250,0.18);
    }
    footer[data-footer-mood="focused"] .footer-status-dot {
      background: #34d399;
      box-shadow: 0 0 13px rgba(52,211,153,0.84), 0 0 24px rgba(96,165,250,0.16);
    }
    footer[data-footer-mood="proud"] .footer-status-dot {
      background: #a78bfa;
      box-shadow: 0 0 13px rgba(167,139,250,0.84), 0 0 24px rgba(52,211,153,0.16);
      transform: scale(1.08);
    }
    footer[data-footer-mood="sleepy"] .footer-status-dot {
      background: #94a3b8;
      box-shadow: 0 0 8px rgba(148,163,184,0.42);
      transform: scale(0.92);
    }
    footer[data-systems="awake"] .footer-status-dot {
      background: #34d399;
      box-shadow:
        0 0 13px rgba(52,211,153,0.9),
        0 0 26px rgba(96,165,250,0.22);
      transform: scale(1.12);
    }
    footer[data-systems="awake"] .footer-status-text {
      color: #dbeafe;
      text-shadow: 0 0 12px rgba(96,165,250,0.22);
    }
    .footer-link {
      color: var(--subtle); text-decoration: none;
      transition: color 0.2s, text-shadow 0.2s;
    }
    .footer-link:hover { color: var(--accent1); text-shadow: 0 0 12px rgba(96,165,250,0.5); }
    .footer-credit { font-size: 0.72rem; color: var(--muted); margin-top: 0.15rem; }

    /* ── RESPONSIVE ───────────────────────── */
    @media (max-width: 768px) {
      nav { padding: 1rem 1.25rem; }
      .nav-toggle { display: inline-flex; }
      .nav-links {
        position: absolute; top: calc(100% + 0.5rem); right: 1rem;
        display: flex; flex-direction: column; gap: 0.2rem;
        min-width: 190px; padding: 0.45rem;
        border: 1px solid var(--border); border-radius: 10px;
        background: rgba(5,10,24,0.94);
        backdrop-filter: blur(14px);
        box-shadow: 0 18px 45px rgba(0,0,0,0.35), 0 0 24px rgba(59,130,246,0.12);
        opacity: 0; visibility: hidden;
        transform: translateY(-8px);
        transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
      }
      nav.menu-open .nav-links {
        opacity: 1; visibility: visible;
        transform: translateY(0);
      }
      .nav-links a {
        display: block;
        padding: 0.7rem 0.8rem;
        border-radius: 7px;
      }
      .nav-links a:hover,
      .nav-links a.nav-active {
        background: rgba(59,130,246,0.1);
      }
      /* The sliding pill only makes sense for a horizontal nav. In the
         mobile vertical dropdown the .nav-active background highlight
         already conveys the active state. */
      .nav-indicator { display: none; }
      section { padding: 4rem 1.25rem; }
      #about {
        min-height: auto;
        padding-top: 3.75rem;
        padding-bottom: 3.75rem;
      }
      .about-grid { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
      .about-side { align-items: center; }
      .training-window { width: min(100%, 440px); }
      .training-module-face { width: 56px; height: 56px; }
      .training-game-shell { padding: 1.5rem 1.25rem 4.25rem; }
      .training-game-head { grid-template-columns: 1fr; align-items: start; }
      .training-game-info { padding-right: 0; }
      .training-game-face { position: static; width: 48px; height: 48px; margin-bottom: 0.6rem; }
      .training-game-stats,
      .training-game-actions { justify-content: flex-start; }
      #platformerCanvas { aspect-ratio: 8 / 3; }
      .platformer-touch { display: flex; }
      .projects-grid { grid-template-columns: minmax(0, 1fr); }
      .project-card { min-width: 0; }
      .project-card.primary-featured {
        min-height: auto;
        padding: 1.5rem;
      }
      .project-card.primary-featured.dashboard-expanded {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
      }
      .dashboard-launch { flex-direction: column; align-items: stretch; }
      .market-feature-body { grid-template-columns: 1fr; }
      .market-snapshot { min-height: 240px; }
      .dashboard-frame {
        /* dashboard-embed.js sets inline style.height to fit content, which
           overrides any CSS height. This min-height is just a floor for the
           pre-measurement loading state on mobile. */
        min-height: 560px;
      }
      /* Touch-friendly minimum height for the region/collapse pills inside
         the dashboard card. Desktop pills stay compact. */
      .dashboard-region-btn,
      .dashboard-collapse {
        min-height: 40px;
        padding: 0.55rem 0.85rem;
      }
      .demo-inner { padding: 0 1rem; }
      .demo-band-top { padding: 4.25rem 0 1.75rem; }
      .demo-band-bottom { height: 3.5rem; }
      #solarCanvas {
        height: clamp(390px, 58vh, 480px);
      }
      #planetPanel { width: 230px; }
      .sim-info { right: 1rem; max-width: calc(100% - 2rem); }
      /* Swipeable controls: pill spans width, scrolls horizontally on touch */
      .sim-controls {
        left: 0.4rem; right: 0.4rem; transform: none;
        max-width: calc(100% - 0.8rem);
        justify-content: flex-start;
        overflow-x: auto; overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -ms-overflow-style: none;
        /* subtle edge fade hints there's more to swipe */
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
                mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
      }
      .sim-controls::-webkit-scrollbar { display: none; }
      .sim-btn { flex: 0 0 auto; scroll-snap-align: start; }
    }
    @media (max-width: 640px) {
      #contact .section-desc { white-space: normal; }
    }

    /* ── MOBILE / TOUCH POLISH ───────────────────────────────────────────── */
    @media (hover: none) and (pointer: coarse) {
      /* Hover state on a touch device sticks after tap until the user taps
         elsewhere — that's why the lifted card stays lifted on iOS. Nuke the
         hover transform on cards for touch users; the underlying nav still
         conveys interactivity via the link arrow + tag visuals. */
      .project-card:hover { transform: none; }
      .face:hover,
      .face:focus-visible { filter: inherit; }

      /* Bigger tap targets for in-card links. The visual size doesn't change
         on desktop because this rule is gated to coarse pointers. */
      .card-link {
        padding: 0.55rem 0.4rem;
        min-height: 36px;
      }
      .card-link.demo-link {
        padding: 0.6rem 1rem;
        min-height: 40px;
      }
      /* Remove the 300ms tap delay on older Android WebViews and prevent
         double-tap-zoom on buttons/links the user is rapidly tapping. */
      button, a, .card-link, .nav-toggle, .skill-tag,
      .sim-btn, .dashboard-region-btn, .dashboard-collapse,
      .platformer-touch-btn, .market-snapshot-cta {
        touch-action: manipulation;
      }
    }

    /* ── KEYBOARD FOCUS RINGS ────────────────────────────────────────────────
       Elements with their own custom :focus-visible style (faces, snapshot,
       stat tiles, etc.) keep those — this is a fallback ring for everything
       else that's tabbable, so keyboard users never lose track of where they
       are. Mouse clicks are unaffected because :focus-visible only fires for
       keyboard navigation. */
    a:focus-visible,
    button:focus-visible,
    [role="button"]:focus-visible,
    .nav-links a:focus-visible,
    .nav-toggle:focus-visible,
    .skill-tag:focus-visible,
    .card-link:focus-visible,
    .contact-link:focus-visible,
    .dashboard-region-btn:focus-visible,
    .dashboard-collapse:focus-visible,
    .sim-btn:focus-visible,
    .platformer-touch-btn:focus-visible,
    .region-pill:focus-visible {
      outline: 2px solid rgba(96,165,250,0.85);
      outline-offset: 3px;
      border-radius: inherit;
    }
    /* Use a tighter offset on tightly-packed pill rows so the ring doesn't
       collide with neighbours. */
    .skill-tag:focus-visible,
    .region-pill:focus-visible,
    .dashboard-region-btn:focus-visible {
      outline-offset: 2px;
    }