/* ========== PAGE-SPECIFIC STYLES ========== */

    html {
      scroll-behavior: smooth;
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
    }
    a { color: inherit; text-decoration: none; }

    /* ========== UNIFIED PAGE HEIGHT ========== */
    section[id]:not(#hero) {
      min-height: 100dvh;
      display: flex;
      flex-direction: column;
      scroll-margin-top: 90px;
    }
    section[id]:not(#hero) > [class*="max-w-"] {
      margin-top: auto;
      margin-bottom: auto;
    }

    /* ========== SCROLL REVEAL ========== */
    .reveal {
      opacity: 0;
      transform: translateY(32px);
      filter: blur(8px);
      transition: opacity 0.8s cubic-bezier(0.32,0.72,0,1), transform 0.8s cubic-bezier(0.32,0.72,0,1), filter 0.8s cubic-bezier(0.32,0.72,0,1);
      will-change: transform, opacity, filter;
    }
    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0);
      will-change: auto;
    }

    /* ========== FLOATING NAV PILL ========== */
    .nav-pill {
      /* Solid, high-contrast look — distinct from cards & page */
      background: rgba(255,255,255,0.92);
      border: 1px solid rgba(0,0,0,0.1);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border-radius: var(--radius-full);
      box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.08), 0 0 0 1px rgba(99,102,241,0.04);
      transition: all 0.7s cubic-bezier(0.32,0.72,0,1);
    }
    .dark .nav-pill {
      background: rgba(15,23,42,0.94);
      border-color: rgba(255,255,255,0.12);
      box-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 4px 20px rgba(0,0,0,0.5), 0 0 0 1px rgba(129,140,248,0.08);
    }
    .nav-pill.scrolled {
      box-shadow: 0 2px 4px rgba(0,0,0,0.08), 0 12px 48px rgba(0,0,0,0.12), 0 0 0 1px rgba(99,102,241,0.08);
    }
    .dark .nav-pill.scrolled {
      box-shadow: 0 2px 4px rgba(0,0,0,0.5), 0 12px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(129,140,248,0.15);
    }
    .nav-link {
      color: var(--text-secondary);
      font-size: var(--text-body-sm);
      font-weight: 500;
      transition: color 0.5s cubic-bezier(0.32,0.72,0,1);
    }
    .nav-link:hover, .nav-link.active { color: var(--accent); }

    /* ========== HAMBURGER MORPH ========== */
    .hamburger-line {
      display: block;
      width: 20px;
      height: 1.5px;
      background: var(--text-primary);
      border-radius: var(--radius-full);
      transition: all 0.5s cubic-bezier(0.32,0.72,0,1);
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
    .hamburger-line:nth-child(1) { top: 8px; }
    .hamburger-line:nth-child(2) { top: 16px; }
    .hamburger-line:nth-child(3) { top: 24px; }
    .hamburger.open .hamburger-line:nth-child(1) {
      top: 16px;
      transform: translateX(-50%) rotate(45deg);
    }
    .hamburger.open .hamburger-line:nth-child(2) {
      opacity: 0;
      transform: translateX(-50%) scaleX(0);
    }
    .hamburger.open .hamburger-line:nth-child(3) {
      top: 16px;
      transform: translateX(-50%) rotate(-45deg);
    }

    /* ========== MOBILE MENU OVERLAY ========== */
    .menu-overlay {
      position: fixed;
      inset: 0;
      z-index: 45;
      background: rgba(255,255,255,0.85);
      backdrop-filter: blur(40px);
      -webkit-backdrop-filter: blur(40px);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.6s cubic-bezier(0.32,0.72,0,1);
    }
    .dark .menu-overlay { background: rgba(2,6,18,0.88); }
    .menu-overlay.open {
      opacity: 1;
      pointer-events: auto;
    }
    .menu-link {
      display: block;
      font-family: var(--font-display);
      font-size: 1.75rem;
      font-weight: 600;
      letter-spacing: -0.02em;
      padding: 0.75rem 0;
      color: var(--text-primary);
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.6s cubic-bezier(0.32,0.72,0,1), transform 0.6s cubic-bezier(0.32,0.72,0,1), color 0.5s ease;
    }
    .menu-overlay.open .menu-link {
      opacity: 1;
      transform: translateY(0);
    }
    .menu-link:hover { color: var(--accent); }

    /* ========== HERO ORBS ========== */
    .hero-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(100px);
      opacity: 0.5;
      pointer-events: none;
      animation: orb-float 10s cubic-bezier(0.32,0.72,0,1) infinite;
    }
    .hero-orb:nth-child(1) { background: #818cf8; width: 350px; height: 350px; top: -100px; right: -80px; animation-delay: 0s; }
    .hero-orb:nth-child(2) { background: #a78bfa; width: 220px; height: 220px; top: 35%; right: 25%; animation-delay: -3s; }
    .hero-orb:nth-child(3) { background: #22d3ee; width: 200px; height: 200px; bottom: -50px; left: -50px; animation-delay: -6s; }
    @keyframes orb-float {
      0%, 100% { transform: translate(0, 0) scale(1); }
      33% { transform: translate(20px, -25px) scale(1.06); }
      66% { transform: translate(-15px, 15px) scale(0.94); }
    }

    /* ========== HERO BIO QUOTE CARD ========== */
    .hero-tags-break { display: none; }
    .hero-bio {
      border-left: 3px solid #6366f1;
      padding-left: 1rem;
      background: var(--glass-bg);
      border-radius: 0 var(--radius-md) var(--radius-md) 0;
      color: var(--text-secondary);
      font-size: var(--text-body-lg);
      line-height: 1.7;
    }
    .dark .hero-bio {
      border-left-color: #818cf8;
    }

    /* ========== SKILL REEL (老虎机窗口 — PC竖排 / 移动横排) ========== */
    .skill-reel {
      position: relative;
      width: 100%;
      height: 5.2rem; /* 3 items uniform height across all cards */
      overflow: hidden;
    }
    /* Fixed indicator bar at vertical center (PC only) */
    .skill-reel::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 2.5px;
      height: 1.35rem;
      border-radius: 2px;
      background: linear-gradient(180deg, #6366f1, #8b5cf6, #06b6d4);
      z-index: 2;
      pointer-events: none;
    }
    .skill-reel-track {
      position: relative;
      width: 100%;
      height: 100%;
    }
    .skill-reel-item {
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      height: 1.733rem; /* 5.2rem / 3 */
      margin-top: -0.867rem; /* half height, center baseline */
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.8125rem;
      font-weight: 500;
      color: var(--text-tertiary);
      transition: transform 0.5s cubic-bezier(0.32,0.72,0,1),
                  opacity 0.5s cubic-bezier(0.32,0.72,0,1),
                  font-size 0.5s cubic-bezier(0.32,0.72,0,1),
                  font-weight 0.5s cubic-bezier(0.32,0.72,0,1),
                  color 0.5s cubic-bezier(0.32,0.72,0,1);
      pointer-events: none;
      white-space: nowrap;
    }
    .skill-reel-item.active {
      font-weight: 700;
      font-size: 0.9375rem;
    }
    .skill-reel-item.dim {
      opacity: 0.42;
      color: var(--text-tertiary);
    }
    .skill-reel-item.off {
      opacity: 0;
      pointer-events: none;
    }

    /* ========== SKILL DETAIL EXPAND ========== */
    .skill-detail-card {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.6s cubic-bezier(0.32,0.72,0,1), opacity 0.5s cubic-bezier(0.32,0.72,0,1), margin 0.6s cubic-bezier(0.32,0.72,0,1);
      opacity: 0;
      margin-top: 0;
    }
    .skill-detail-card.expanded {
      max-height: 300px;
      opacity: 1;
      margin-top: 1rem;
    }
    .skill-card-clickable { cursor: pointer; position: relative; }
    .skill-card-clickable::after {
      content: '点击查看详情';
      position: absolute;
      bottom: 0.5rem;
      right: 0.75rem;
      font-size: var(--text-eyebrow);
      color: var(--text-tertiary);
      opacity: 0;
      transition: opacity 0.5s ease;
    }
    .skill-card-clickable:hover::after { opacity: 1; }

    /* Mobile-only skill description (hidden on desktop, shown on mobile) */
    .skill-mobile-desc { display: none; }

    /* ========== EXPERIENCE CAROUSEL ========== */
    .carousel-container { position: relative; }
    .carousel-viewport { overflow: hidden; }
    .carousel-track {
      display: flex;
      gap: 1rem;
      transition: transform 0.6s cubic-bezier(0.32,0.72,0,1);
      align-items: stretch;
    }
    .carousel-card {
      flex: 0 0 88%;
      opacity: 0.3;
      transition: opacity 0.5s cubic-bezier(0.32,0.72,0,1);
      pointer-events: none;
      user-select: none;
    }
    @media (min-width: 640px) {
      .carousel-card { flex: 0 0 88%; }
    }
    .carousel-card.active { opacity: 1; pointer-events: auto; user-select: auto; }

    .carousel-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 50%;
      border: 1px solid var(--glass-border);
      background: var(--glass-bg-strong);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.5s cubic-bezier(0.32,0.72,0,1);
      color: var(--accent);
      animation: arrow-glow 2.5s cubic-bezier(0.32,0.72,0,1) infinite;
    }
    @keyframes arrow-glow {
      0%, 100% { box-shadow: 0 0 8px rgba(99,102,241,0.1); }
      50% { box-shadow: 0 0 20px rgba(99,102,241,0.25); }
    }
    .carousel-arrow:hover {
      box-shadow: 0 0 32px rgba(99,102,241,0.35);
      transform: translateY(-50%) scale(1.1);
      animation: none;
    }
    .carousel-arrow-left  { left: -0.75rem; }
    .carousel-arrow-right { right: -0.75rem; }

    .carousel-dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1rem; }
    .carousel-dot {
      width: 7px; height: 7px; border-radius: 50%; border: none; cursor: pointer; padding: 0;
      transition: all 0.5s cubic-bezier(0.32,0.72,0,1);
      background: var(--glass-border);
    }
    .carousel-dot.active {
      background: #6366f1;
      box-shadow: 0 0 12px var(--accent-glow);
      width: 22px;
      border-radius: 4px;
    }

    /* Brand-color left accent on experience cards (PC + Mobile) */
    #experience .carousel-card:nth-child(1) .card-inner { border-left: 3px solid #22c55e; }
    #experience .carousel-card:nth-child(2) .card-inner { border-left: 3px solid #3b82f6; }
    #experience .carousel-card:nth-child(3) .card-inner { border-left: 3px solid #f97316; }
    #experience .carousel-card:nth-child(4) .card-inner { border-left: 3px solid #f59e0b; }

    /* ========== TOP PROGRESS BAR ========== */
    .top-progress {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 2px;
      z-index: 60;
      pointer-events: none;
      background: transparent;
    }
    .top-progress-fill {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, #6366f1, #8b5cf6, #06b6d4);
      box-shadow: 0 0 8px var(--accent-glow), 0 0 2px rgba(99,102,241,0.3);
      transition: width 0.15s linear;
      will-change: width;
    }
    .dark .top-progress-fill {
      background: linear-gradient(90deg, #818cf8, #a78bfa, #22d3ee);
    }

    /* ========== SIDE NAVIGATION ========== */
    .side-nav {
      position: fixed;
      right: 1.25rem;
      top: 50%;
      transform: translateY(-50%);
      z-index: 50;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .side-nav-track {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
      padding: 0.75rem 0.5rem;
      border-radius: var(--radius-full);
      background: var(--glass-bg-strong);
      border: 1px solid var(--glass-border);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      box-shadow: 0 0 16px rgba(99,102,241,0.04);
      transition: all 0.6s cubic-bezier(0.32,0.72,0,1);
    }
    .side-nav-track:hover {
      border-color: rgba(99,102,241,0.2);
      box-shadow: 0 0 32px var(--accent-glow);
    }
    .side-nav-dot {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 2rem;
      height: 2rem;
      position: relative;
      cursor: pointer;
      text-decoration: none;
      transition: all 0.4s cubic-bezier(0.32,0.72,0,1);
      opacity: 0;
      transform: translateX(12px);
      animation: dot-enter 0.6s cubic-bezier(0.32,0.72,0,1) forwards;
    }
    .side-nav-dot:nth-child(1) { animation-delay: 0.3s; }
    .side-nav-dot:nth-child(2) { animation-delay: 0.38s; }
    .side-nav-dot:nth-child(3) { animation-delay: 0.46s; }
    .side-nav-dot:nth-child(4) { animation-delay: 0.54s; }
    .side-nav-dot:nth-child(5) { animation-delay: 0.62s; }
    .side-nav-dot:nth-child(6) { animation-delay: 0.70s; }
    .side-nav-dot:nth-child(7) { animation-delay: 0.78s; }
    @keyframes dot-enter {
      to { opacity: 1; transform: translateX(0); }
    }
    .side-nav-dot::before {
      content: '';
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--text-tertiary);
      transition: all 0.5s cubic-bezier(0.32,0.72,0,1);
      z-index: 1;
    }
    .side-nav-dot::after {
      content: '';
      position: absolute;
      inset: 4px;
      border-radius: 50%;
      border: 1.5px solid transparent;
      transition: all 0.5s cubic-bezier(0.32,0.72,0,1);
      opacity: 0;
      transform: scale(0.6);
    }
    .side-nav-dot.active::before {
      width: 8px;
      height: 8px;
      background: #6366f1;
      box-shadow: 0 0 16px var(--accent-glow), 0 0 32px rgba(99,102,241,0.3);
      animation: dot-pulse 2.4s cubic-bezier(0.32,0.72,0,1) infinite;
    }
    @keyframes dot-pulse {
      0%, 100% { box-shadow: 0 0 16px var(--accent-glow), 0 0 32px rgba(99,102,241,0.3); }
      50% { box-shadow: 0 0 24px var(--accent-glow), 0 0 48px rgba(99,102,241,0.5); }
    }
    .dark .side-nav-dot.active::before {
      background: #818cf8;
      box-shadow: 0 0 16px rgba(129,140,248,0.35), 0 0 32px rgba(129,140,248,0.25);
      animation-name: dot-pulse-dark;
    }
    @keyframes dot-pulse-dark {
      0%, 100% { box-shadow: 0 0 16px rgba(129,140,248,0.35), 0 0 32px rgba(129,140,248,0.25); }
      50% { box-shadow: 0 0 24px rgba(129,140,248,0.5), 0 0 48px rgba(129,140,248,0.4); }
    }
    .side-nav-dot.active::after {
      opacity: 1;
      transform: scale(1);
      border-color: rgba(99,102,241,0.3);
      inset: 1px;
    }
    .dark .side-nav-dot.active::after {
      border-color: rgba(129,140,248,0.35);
    }
    .side-nav-dot:hover::before {
      background: var(--accent);
      transform: scale(1.8);
      animation: none;
    }
    .side-nav-dot .side-nav-label {
      position: absolute;
      right: calc(100% + 10px);
      top: 50%;
      transform: translateY(-50%) translateX(8px);
      white-space: nowrap;
      font-size: var(--text-caption);
      font-weight: 600;
      color: var(--text-primary);
      background: var(--glass-bg-strong);
      border: 1px solid var(--glass-border);
      border-radius: var(--radius-full);
      padding: 0.25rem 0.75rem;
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s cubic-bezier(0.32,0.72,0,1), transform 0.4s cubic-bezier(0.32,0.72,0,1);
      box-shadow: var(--card-shadow);
    }
    .side-nav-dot.active:hover .side-nav-label {
      opacity: 1;
      transform: translateY(-50%) translateX(0);
    }
    .side-nav-dot.active .side-nav-label.auto-reveal {
      opacity: 1;
      transform: translateY(-50%) translateX(0);
    }
    .side-nav-dot:not(:last-child) {
      margin-bottom: -2px;
    }

    /* ========== EMAIL TOOLTIP ========== */
    .email-icon {
      cursor: pointer;
      transition: color 0.5s ease;
    }
    .email-tooltip {
      position: absolute;
      top: 50%;
      left: calc(100% + 3px);
      transform: translateY(calc(-50% - 1.5px));
      padding: 6px 12px;
      border-radius: 10px;
      font-size: var(--text-caption);
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.5s ease;
      background: var(--glass-bg-strong);
      border: 1px solid var(--glass-border);
      color: var(--text-primary);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }
    .email-tooltip.show { opacity: 1; pointer-events: auto; }

    /* Chevron circle — hidden by default, shown only on mobile */
    .accordion-chevron { display: none; }

    /* ========== MOBILE (< 768px) ========== */
    @media (max-width: 767px) {
      /* --- Card rounding --- */
      .card-outer { border-radius: var(--radius-xl); padding: 2px; }
      .card-inner { border-radius: calc(1.5rem - 2px); }

      /* --- Carousel arrows (for potential reuse; experience overrides below) --- */
      .carousel-arrow { width: 2rem; height: 2rem; }
      .carousel-arrow-left { left: -0.25rem; }
      .carousel-arrow-right { right: -0.25rem; }

      /* --- Mobile menu --- */
      .menu-link { font-size: 1.25rem; padding: 0.5rem 0; }

      /* --- Hero orbs (smaller) --- */
      .hero-orb:nth-child(1) { width: 180px; height: 180px; top: -40px; right: -30px; }
      .hero-orb:nth-child(2) { width: 110px; height: 110px; }
      .hero-orb:nth-child(3) { width: 100px; height: 100px; }

      /* --- Hero: layered narrative layout --- */
      /* Status bar: full-width centered pill */
      .hero-status { width: 100% !important; justify-content: center !important; font-size: 0.75rem !important; }
      /* Tags: natural flex-wrap flow */
      .hero-tags {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.5rem !important;
      }
      .hero-tags-break { display: block; flex-basis: 100%; height: 0; }
      /* English name: now inside hero-name-block in card fusion layout */
      /* Bio card: keep accent, mobile font size */
      .hero-bio { font-size: 0.8125rem !important; line-height: 1.65 !important; }
      /* CTAs: full-width, stacked vertically */
      .hero-ctas { flex-direction: column !important; width: 100% !important; gap: 0.625rem !important; }
      .hero-ctas .btn-primary,
      .hero-ctas .btn-secondary { width: 100% !important; justify-content: center !important; }
      /* Hero section: fill phone screen naturally */
      #hero { padding-top: 5rem !important; padding-bottom: 2.5rem !important; min-height: 100dvh !important; }
      #hero .max-w-6xl { padding: 0.5rem 0.75rem !important; }

      /* --- Nav pill: tighter to top edge --- */
      #navbar { top: 0.75rem !important; }

      /* --- Experience: accordion mode (cards collapsed, multi-open) --- */
      #experience .carousel-track { flex-direction: column; gap: 1rem; transform: none !important; }
      #experience .carousel-card { flex: 1 1 auto; opacity: 1 !important; pointer-events: auto !important; }
      #experience .carousel-arrow, #experience .carousel-dots { display: none !important; }

      /* Remove old bottom-chevron pseudo-element */
      #experience .accordion-header::after { display: none !important; }

      /* ── Collapsed header: clean horizontal layout ── */
      #experience .accordion-header {
        cursor: pointer;
        position: relative;
        padding: 1rem 3rem 0.875rem 1rem !important;
      }
      /* Force date to its own line so chevron has clear space */
      #experience .accordion-header > div:first-child {
        flex-wrap: wrap !important;
        row-gap: 0.25rem !important;
      }
      #experience .accordion-header > div:first-child > span:last-child {
        flex-basis: 100% !important;
        margin-left: 0 !important;
        padding-left: 3.5rem !important;
        font-size: 0.75rem !important;
        white-space: normal !important;
      }

      /* ── Chevron: small circle button on the right ── */
      #experience .accordion-chevron {
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        width: 1.75rem;
        height: 1.75rem;
        border-radius: 50%;
        background: var(--glass-bg);
        border: 1px solid var(--glass-border);
        color: var(--text-tertiary);
        font-size: 0.75rem;
        transition: transform 0.5s cubic-bezier(0.32,0.72,0,1),
                    background 0.5s ease, border-color 0.5s ease, color 0.5s ease;
      }
      #experience .carousel-card.accordion-open .accordion-chevron {
        transform: translateY(-50%) rotate(180deg);
        background: rgba(99,102,241,0.08);
        border-color: rgba(99,102,241,0.22);
        color: var(--accent);
      }

      /* ── Typography ── */
      #experience .accordion-header h3 {
        font-size: 0.9375rem !important;
        line-height: 1.3 !important;
      }
      #experience .accordion-header p {
        font-size: 0.8125rem !important;
      }
      #experience .accordion-header .gap-3 { gap: 0.75rem !important; }
      #experience .accordion-header .w-10.h-10 {
        width: 2.75rem !important;
        height: 2.75rem !important;
        border-radius: 0.875rem !important;
      }
      #experience .accordion-header .eyebrow {
        font-size: 0.625rem !important;
        padding: 0.22rem 0.55rem !important;
      }

      /* ═══════════════════════════════════════════════
         Expanded content — KEPT EXACTLY AS BEFORE
         ═══════════════════════════════════════════════ */
      #experience .carousel-card .card-inner > .glass-divider { display: none !important; }
      #experience .carousel-card .card-inner > .exp-content { max-height: 0; overflow: hidden; padding-top: 0 !important; padding-bottom: 0 !important; transition: max-height 0.5s ease; }
      #experience .carousel-card.accordion-open .card-inner > .exp-content { max-height: 4000px; padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
      #experience .activity-img { height: 150px; object-fit: cover; }

      /* Sub-card: unchanged */
      #experience .exp-content { padding: 0.75rem !important; gap: 0.5rem !important; }
      #experience .exp-sub-card { padding: 0.5rem 0.75rem !important; }
      #experience .exp-sub-card h4 { font-size: 0.75rem !important; }
      #experience .exp-sub-card p,
      #experience .exp-sub-card li { font-size: 0.6875rem !important; line-height: 1.55 !important; }
      #experience .exp-sub-card .gap-2\.5 { gap: 0.5rem !important; }
      #experience .metric-badge { font-size: 0.5625rem !important; padding: 0.1rem 0.35rem !important; }

      /* --- Skills: vertical card + description stack --- */
      #skills .grid {
        gap: 0.875rem !important;
        grid-template-columns: 1fr !important; /* override desktop 24-col grid */
      }

      /* Hide separate detail cards — descriptions live inside each skill card */
      #skills .skill-detail-card {
        display: none !important;
      }

      /* Show embedded mobile descriptions below carousel */
      #skills .skill-mobile-desc {
        display: block !important;
        font-size: 0.75rem !important;
        line-height: 1.6 !important;
        color: var(--text-secondary) !important;
        margin-top: 0.625rem !important;
        padding-top: 0.625rem !important;
        border-top: 1px solid var(--glass-border) !important;
        text-align: justify !important;
      }

      #skills .skill-card-clickable { cursor: default !important; }
      #skills .skill-card-clickable::after { display: none !important; }

      /* Skill card: comfortable padding, readable carousel */
      #skills .skill-card-clickable .card-inner { padding: 1rem 0.875rem !important; }
      #skills .skill-card-clickable .w-10.h-10 {
        width: 2rem !important;
        height: 2rem !important;
        margin-bottom: 0.5rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
      }
      #skills .skill-card-clickable .w-10.h-10 i {
        font-size: 1rem !important;
      }
      #skills .skill-card-clickable h3 {
        font-size: 0.875rem !important;
        margin-bottom: 0.25rem !important;
      }
      /* --- Skill reel: horizontal scroller on mobile --- */
      #skills .skill-reel {
        height: 2.2rem !important;
        mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%) !important;
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%) !important;
      }
      #skills .skill-reel::before { display: none !important; }
      #skills .skill-reel-track {
        display: flex !important;
        align-items: center !important;
        position: static !important;
        height: 100% !important;
        transition: transform 0.45s cubic-bezier(0.32,0.72,0,1) !important;
        will-change: transform !important;
      }
      #skills .skill-reel-item {
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        flex: 0 0 calc(100% / 3) !important;
        height: auto !important;
        margin-top: 0 !important;
        text-align: center !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 0.6875rem !important;
        transform: scale(0.88) !important;
        opacity: 0.42 !important;
        transition: all 0.45s cubic-bezier(0.32,0.72,0,1) !important;
      }
      #skills .skill-reel-item.active {
        font-size: 0.8125rem !important;
        opacity: 1 !important;
        transform: scale(1) !important;
      }
      #skills .skill-reel-item.dim {
        opacity: 0.42 !important;
        transform: scale(0.88) !important;
      }
      #skills .skill-reel-item.off {
        /* off-screen items hidden by overflow on mobile */
        opacity: 0.42 !important;
        transform: scale(0.88) !important;
      }

      /* --- Email tooltip: position below icon --- */
      .email-tooltip { left: auto !important; right: 0 !important; top: calc(100% + 6px) !important; transform: none !important; }

      /* --- Side nav: hide entirely on mobile (dots too small for reliable tapping) --- */
      .side-nav { display: none !important; }
      .top-progress { height: 2px; }

      /* --- Section spacing: keep compact but well-proportioned --- */
      section[id]:not(#hero) { min-height: auto !important; }
      #education, #skills, #experience, #blog, #projects { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
      #campus { padding-top: 3.5rem !important; }

      /* --- Education card: divider between stacked columns on mobile --- */
      #education .md\:border-r { border-bottom: 1px solid var(--divider-color); padding-bottom: 1rem; }

      /* --- Blog cards: full-width CTA button for easier tapping --- */
      #blog a.card-outer .btn-primary { width: 100%; justify-content: center; }

      /* --- Typography: better line-height for Chinese text on small screens --- */
      p, li { line-height: 1.7; }

      /* --- Hero: card fusion layout (mobile) --- */
      .hero-card { display: block !important; }
      .hero-card .card-outer { border-radius: var(--radius-xl); padding: 2px; }
      .hero-card .card-inner { border-radius: calc(1.5rem - 2px); padding: 1.25rem !important; }

      /* Avatar: portrait card with gradient border ring + glow */
      .hero-avatar {
        width: 110px;
        aspect-ratio: 9 / 16;
        flex-shrink: 0;
        border-radius: 1rem;
        padding: 2px;
        background: linear-gradient(135deg, #6366f1, #8b5cf6, #06b6d4);
        box-shadow: 0 0 32px var(--accent-glow), 0 0 64px rgba(139,92,246,0.08);
      }
      .hero-avatar img {
        width: 100%;
        height: 100%;
        border-radius: calc(1rem - 2px);
        object-fit: cover;
        display: block;
      }

      /* Name block */
      .hero-name-block {
        flex: 1;
        min-width: 0;
        padding-top: 10px;
      }
      .hero-greeting {
        font-size: 0.9375rem;
        color: var(--text-tertiary);
        margin-bottom: 0.125rem;
        font-weight: 500;
      }
      .hero-name-cn {
        font-family: var(--font-display);
        font-size: 3.125rem;
        font-weight: 700;
        line-height: 1.1;
        letter-spacing: -0.02em;
        margin-bottom: 0.125rem;
      }
      .hero-name-en {
        font-family: var(--font-sans);
        font-size: 1.3125rem;
        font-weight: 600;
        color: var(--text-secondary);
        letter-spacing: 0.01em;
      }

      /* Status bar inside card */
      .hero-card-status {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.375rem 0.75rem;
        border-radius: var(--radius-full);
        font-size: 0.6875rem;
        font-weight: 500;
        background: var(--glass-bg-subtle) padding-box,
                    linear-gradient(135deg, #6366f1, #8b5cf6, #06b6d4) border-box;
        border: 1px solid transparent;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        color: var(--text-secondary);
        width: 100%;
        justify-content: center;
      }

      /* ── Viewport Scale: 统一缩放至 430px 参考宽度 ── */
      /* 使用 zoom 而非 transform:scale()：zoom 同时缩放布局和视觉，无需 margin 补偿 */

      /* 修正 hero 视口高度：缩放后需补偿才能填满屏幕 */
      #viewport-scale #hero {
        min-height: calc(100dvh * var(--inv-scale, 1)) !important;
      }

      /* 防止缩放导致横向溢出（放在 html 上，不阻断 body 的 margin collapsing） */
      html {
        overflow-x: clip;
      }
    }

    /* ========== SKILLS BENTO GRID ========== */
    @media (min-width: 768px) {
      #skillProductCard  { grid-row: 1; grid-column: 1 / span 8; }
      #skillAICard       { grid-row: 1; grid-column: 9 / span 8; }
      #skillEnglishCard  { grid-row: 1; grid-column: 17 / span 8; }
      #skillDetailCard,
      #skillAIDetailCard,
      #skillEnglishDetailCard { grid-row: 2; grid-column: 1 / -1; }
    }