/* uling19 mobile v2 — normal document flow, desktop >=901px intentionally untouched */
@media (max-width: 900px) {
  :root { --mobile-nav-h: 68px; }

  html,
  body {
    width: 100% !important;
    min-height: 100% !important;
    height: auto !important;
    overflow-x: clip !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    -webkit-text-size-adjust: 100%;
  }

  body { padding: 0 !important; }
  html body:not(.mobile-modal-open) {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: clip !important;
    overflow-y: auto !important;
  }
  body.mobile-modal-open { overflow: hidden !important; touch-action: none; }

  html body .deck,
  html body .slides-wrap {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    transform: none !important;
    overflow: visible !important;
  }

  html body .slides-wrap { padding: 0 !important; }

  html body .deck .slides-wrap > section.slide,
  html body .deck .slides-wrap > section.slide.active,
  html body .slides-wrap > .slide {
    display: none !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    overflow: visible !important;
    border-radius: 0 !important;
    pointer-events: none !important;
  }

  html body .deck .slides-wrap > section.slide.active,
  html body .slides-wrap > .slide.active {
    display: block !important;
    pointer-events: auto !important;
  }

  html body .deck .slides-wrap > section.slide > .slide-inner,
  html body .deck .slides-wrap > section.slide.active > .slide-inner,
  html body .slides-wrap > .slide > .slide-inner {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 20px 16px calc(var(--mobile-nav-h) + 28px + env(safe-area-inset-bottom)) !important;
    transform: none !important;
    overflow: visible !important;
    border-radius: 0 !important;
  }

  html body .slide .circuit-overlay { position: fixed !important; pointer-events: none !important; }

  /* Shared mobile typography and header */
  html body .slide .slide-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  html body .slide .slide-head > div:first-child { width: 100% !important; min-width: 0 !important; }
  html body .slide .title {
    display: block !important;
    font-size: clamp(2rem, 9vw, 2.55rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -.035em !important;
    padding: 0 0 .08em !important;
    margin: 0 !important;
    transform: none !important;
    overflow: visible !important;
  }
  html body .slide .section-title,
  html body .slide .slide-head > div:first-child > .section-title {
    display: block !important;
    font-size: clamp(1.7rem, 7.5vw, 2.1rem) !important;
    line-height: 1.18 !important;
    letter-spacing: -.025em !important;
    padding: 0 0 .08em !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  html body .slide .slide-head > div:first-child > .lead {
    display: block !important;
    max-width: none !important;
    max-height: none !important;
    margin: 10px 0 0 !important;
    font-size: .98rem !important;
    line-height: 1.75 !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
  }
  html body .slide .eyebrow { font-size: .72rem !important; line-height: 1.4 !important; }
  html body .slide .subtitle { font-size: .9rem !important; line-height: 1.5 !important; margin-top: 7px !important; }
  html body .slide .top-theme {
    align-self: flex-start !important;
    position: static !important;
    width: auto !important;
    min-height: 44px !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
    overflow: visible !important;
  }
  html body .slide .top-theme button { min-width: 52px !important; min-height: 40px !important; transform: none !important; }

  /* Every content grid becomes normal flow first. */
  html body .slide .menu-grid,
  html body .slide .ulhome-v2,
  html body .slide .ulh-grid,
  html body .slide .projects-grid,
  html body .slide .awards-board,
  html body .slide .awards-grid,
  html body .slide .paper-grid,
  html body .slide .paper-side-grid,
  html body .slide .signal-grid,
  html body .slide .ability-grid {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    transform: none !important;
    overflow: visible !important;
    align-content: start !important;
  }

  /* Directory */
  html body .slide[data-index="0"] .menu-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    gap: 14px !important;
  }
  html body .slide[data-index="0"] .menu-grid > .menu-card {
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    min-height: 148px !important;
    padding: 18px !important;
    gap: 10px !important;
    overflow: visible !important;
  }
  html body .slide[data-index="0"] .menu-card h3 { font-size: 1.12rem !important; line-height: 1.3 !important; }
  html body .slide[data-index="0"] .menu-card p { display: block !important; font-size: .92rem !important; line-height: 1.65 !important; -webkit-line-clamp: unset !important; overflow: visible !important; }

  /* Home */
  html body .slide[data-index="1"] .ulhome-v2 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: "intro" "console" !important;
    gap: 16px !important;
  }
  html body .slide[data-index="1"] .ulh-intro { grid-area: intro !important; }
  html body .slide[data-index="1"] .ulh-console { grid-area: console !important; }
  html body .slide[data-index="1"] .ulh-card {
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 18px !important;
    overflow: visible !important;
  }
  html body .slide[data-index="1"] .ulh-name { font-size: 1.7rem !important; line-height: 1.25 !important; }
  html body .slide[data-index="1"] .ulh-lead { font-size: .94rem !important; line-height: 1.75 !important; }
  html body .slide[data-index="1"] .ulh-stats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    gap: 10px !important;
    width: 100% !important;
    height: auto !important;
  }
  html body .slide[data-index="1"] .ulh-stat { min-height: 84px !important; height: auto !important; padding: 12px 8px !important; }
  html body .slide[data-index="1"] .ulh-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    height: auto !important;
  }
  html body .slide[data-index="1"] .ulh-btn { min-width: 0 !important; min-height: 46px !important; height: auto !important; white-space: normal !important; }
  html body .slide[data-index="1"] .ulh-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    gap: 10px !important;
  }
  html body .slide[data-index="1"] .ulh-svc {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 70px !important;
    height: auto !important;
    padding: 12px !important;
    overflow: visible !important;
  }
  html body .slide[data-index="1"] .ulh-svc-text { min-width: 0 !important; }
  html body .slide[data-index="1"] .ulh-svc-text span { white-space: normal !important; overflow-wrap: anywhere !important; text-overflow: clip !important; overflow: visible !important; }
  html body .slide[data-index="1"] .ulh-id { grid-template-columns: auto minmax(0,1fr) !important; height: auto !important; min-height: 72px !important; }
  html body .slide[data-index="1"] .ulh-id-badge { grid-column: 1 / -1 !important; justify-self: start !important; }
  html body .slide[data-index="1"] .ulh-foot { display: grid !important; grid-template-columns: 1fr !important; gap: 7px !important; }

  /* Projects */
  html body .slide[data-index="2"] .projects-grid,
  html body .slide[data-index="2"] .projects-grid.site-projects-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    gap: 14px !important;
  }
  html body .slide[data-index="2"] .project-card,
  html body .slide[data-index="2"] .project-card.project-featured {
    box-sizing: border-box !important;
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 178px !important;
    max-height: none !important;
    padding: 18px !important;
    overflow: visible !important;
  }
  html body .slide[data-index="2"] .project-card .award-meta { height: auto !important; min-height: 0 !important; }
  html body .slide[data-index="2"] .project-card .award-meta > h3,
  html body .slide[data-index="2"] .project-card.project-featured .award-meta > h3 { font-size: 1.12rem !important; line-height: 1.35 !important; }
  html body .slide[data-index="2"] .project-card p { display: block !important; font-size: .91rem !important; line-height: 1.65 !important; -webkit-line-clamp: unset !important; overflow: visible !important; }
  html body .slide[data-index="2"] .project-card-foot span { white-space: normal !important; overflow-wrap: anywhere !important; }

  /* Awards */
  html body .slide[data-index="3"] .awards-board { display: flex !important; flex-direction: column !important; gap: 18px !important; }
  html body .slide[data-index="3"] .award-cluster,
  html body .slide[data-index="3"] .award-cluster-main {
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 16px !important;
    overflow: visible !important;
  }
  html body .slide[data-index="3"] .cluster-head { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; height: auto !important; }
  html body .slide[data-index="3"] .awards-grid,
  html body .slide[data-index="3"] .awards-grid-2025,
  html body .slide[data-index="3"] .awards-grid-2024 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    gap: 12px !important;
  }
  html body .slide[data-index="3"] .award-card,
  html body .slide[data-index="3"] .award-cluster-main .award-card {
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    min-height: 164px !important;
    padding: 16px !important;
    gap: 9px !important;
    overflow: visible !important;
  }
  html body .slide[data-index="3"] .award-card h3 { display: block !important; font-size: 1.02rem !important; line-height: 1.4 !important; -webkit-line-clamp: unset !important; overflow: visible !important; }
  html body .slide[data-index="3"] .award-card p { display: block !important; font-size: .9rem !important; line-height: 1.62 !important; -webkit-line-clamp: unset !important; overflow: visible !important; }
  html body .slide[data-index="3"] .award-hint { margin-top: auto !important; font-size: .78rem !important; }

  /* Paper */
  html body .slide[data-index="4"] .paper-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    gap: 16px !important;
  }
  html body .slide[data-index="4"] .paper-grid > *,
  html body .slide[data-index="4"] .paper-card {
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  html body .slide[data-index="4"] .paper-grid > .paper-card { padding: 18px !important; }
  html body .slide[data-index="4"] .paper-grid .section-title { font-size: 1.2rem !important; line-height: 1.45 !important; overflow-wrap: anywhere !important; }
  html body .slide[data-index="4"] .paper-hero-text { display: block !important; font-size: .92rem !important; line-height: 1.7 !important; -webkit-line-clamp: unset !important; overflow: visible !important; }
  html body .slide[data-index="4"] .paper-side-grid,
  html body .slide[data-index="4"] .paper-grid > .paper-card .paper-side-grid,
  html body .slide[data-index="4"] .signal-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    grid-auto-rows: auto !important;
    gap: 12px !important;
    flex: none !important;
  }
  html body .slide[data-index="4"] .paper-side-grid .card,
  html body .slide[data-index="4"] .paper-grid > .paper-card .paper-side-grid .card,
  html body .slide[data-index="4"] .signal-grid .stat {
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 14px !important;
    overflow: visible !important;
  }
  html body .slide[data-index="4"] .paper-side-grid .card h3,
  html body .slide[data-index="4"] .signal-grid .stat h3 { font-size: 1rem !important; line-height: 1.35 !important; }
  html body .slide[data-index="4"] .paper-side-grid .card p,
  html body .slide[data-index="4"] .paper-grid .card p,
  html body .slide[data-index="4"] .signal-grid .stat p { display: block !important; font-size: .88rem !important; line-height: 1.62 !important; -webkit-line-clamp: unset !important; overflow: visible !important; }
  html body .slide[data-index="4"] .terminal { width: 100% !important; height: auto !important; overflow: hidden !important; }
  html body .slide[data-index="4"] pre { display: block !important; max-width: 100% !important; overflow-x: auto !important; overflow-y: visible !important; white-space: pre !important; font-size: .76rem !important; -webkit-overflow-scrolling: touch; }

  /* Ability */
  html body .slide[data-index="5"] .ability-grid,
  html body .slide[data-index="5"] .ability-grid-evidence {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    gap: 14px !important;
  }
  html body .slide[data-index="5"] .ability-card {
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    min-height: 190px !important;
    padding: 18px !important;
    overflow: visible !important;
  }
  html body .slide[data-index="5"] .ability-card p { display: block !important; font-size: .92rem !important; line-height: 1.65 !important; -webkit-line-clamp: unset !important; overflow: visible !important; }
  html body .slide[data-index="5"] .ability-evidence { height: auto !important; overflow: visible !important; }

  /* Mobile navigation: six page buttons; AI is a separate floating control above it. */
  html body .mobile-nav {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    align-items: center !important;
    position: fixed !important;
    inset: auto 0 0 0 !important;
    z-index: 1000 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom)) !important;
    min-height: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom)) !important;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom)) !important;
    gap: 2px !important;
    transform: none !important;
    overflow: visible !important;
  }
  html body .mobile-nav > .rail-btn:not(.mobile-guide-btn),
  html body .mobile-nav > .rail-btn:not(.mobile-guide-btn).active {
    position: relative !important;
    z-index: 2 !important;
    pointer-events: auto !important;
    transform: none !important;
    animation: none !important;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease !important;
    opacity: 1 !important;
    visibility: visible !important;
    min-width: 0 !important;
    width: 100% !important;
    min-height: 48px !important;
    height: auto !important;
    padding: 6px 2px !important;
    font-size: clamp(.66rem, 2.6vw, .8rem) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }
  html body #mobileGuideBtn.mobile-guide-btn {
    display: flex !important;
    position: fixed !important;
    right: 12px !important;
    bottom: calc(var(--mobile-nav-h) + 12px + env(safe-area-inset-bottom)) !important;
    left: auto !important;
    top: auto !important;
    z-index: 1002 !important;
    align-items: center !important;
    justify-content: center !important;
    width: 54px !important;
    min-width: 54px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    border-radius: 24px !important;
    touch-action: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }
  html body #mobileGuideBtn.mobile-guide-btn.guide-open-hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  html body .left-rail,
  html body .slide .footerbar,
  html body #mobileDotNav,
  html body .mobile-dot-nav { display: none !important; }

  /* Welcome, guide, modal, certificate */
  html body .welcome { position: fixed !important; inset: 0 !important; width: 100% !important; min-height: 100dvh !important; overflow-y: auto !important; padding: 16px !important; }
  html body .welcome-box { box-sizing: border-box !important; width: calc(100vw - 32px) !important; max-width: 560px !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding: 28px 20px !important; transform: none !important; }
  html body .welcome-box .title { font-size: clamp(2.2rem, 12vw, 3.3rem) !important; line-height: 1.12 !important; }
  html body .welcome-box .lead { display: block !important; font-size: .98rem !important; line-height: 1.7 !important; -webkit-line-clamp: unset !important; overflow: visible !important; }

  html body .ai-panel {
    position: fixed !important;
    box-sizing: border-box !important;
    inset: auto 12px calc(var(--mobile-nav-h) + 12px + env(safe-area-inset-bottom)) 12px !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: min(72dvh, 680px) !important;
    transform: none !important;
    overflow: hidden !important;
    z-index: 1100 !important;
  }
  html body .ai-panel .ai-body { overflow-y: auto !important; max-height: calc(min(72dvh, 680px) - 64px) !important; }

  html body .modal-backdrop,
  html body .award-lightbox { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100dvh !important; padding: 12px !important; overflow: auto !important; }
  html body .modal-backdrop .modal,
  html body .award-lightbox .award-lightbox-inner {
    box-sizing: border-box !important;
    width: calc(100vw - 24px) !important;
    max-width: 760px !important;
    height: auto !important;
    max-height: 90dvh !important;
    margin: auto !important;
    transform: none !important;
    overflow: auto !important;
  }
  html body .award-lightbox-body { max-height: calc(90dvh - 72px) !important; overflow: auto !important; }
  html body .award-lightbox img { display: block !important; width: 100% !important; height: auto !important; max-height: calc(90dvh - 120px) !important; object-fit: contain !important; }

  html body .orientation-tip { display: none !important; }
}

@media (min-width: 600px) and (max-width: 900px) {
  html body .slide[data-index="0"] .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (min-width: 480px) and (max-width: 900px) {
  html body .slide[data-index="1"] .ulh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 380px) {
  html body .slide[data-index="1"] .ulh-actions { grid-template-columns: 1fr !important; }
  html body .slide > .slide-inner { padding-left: 14px !important; padding-right: 14px !important; }
}

@media (max-width: 900px) {
  html body .cursor-glow,
  html body .mouse-blur { display: none !important; }
  html body #auroraCanvas {
    display: block !important;
    opacity: .82 !important;
    mix-blend-mode: normal !important;
  }
  html body #ambientCanvas {
    display: block !important;
    opacity: .58 !important;
    mix-blend-mode: normal !important;
    pointer-events: none !important;
  }
  html body #cometCanvas {
    display: block !important;
    opacity: .94 !important;
  }
  html body .slide {
    background:
      linear-gradient(180deg, rgba(9, 14, 31, .54), rgba(9, 14, 31, .36)),
      linear-gradient(160deg, rgba(35, 47, 86, .42), rgba(12, 19, 42, .30)) !important;
    backdrop-filter: blur(10px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.12) !important;
  }
  html[data-theme="light"] body .slide {
    background:
      linear-gradient(180deg, rgba(255,255,255,.58), rgba(246,249,255,.42)),
      linear-gradient(160deg, rgba(255,255,255,.50), rgba(229,238,255,.36)) !important;
  }
  html body .slide[data-index="4"] .paper-card,
  html body .slide[data-index="4"] .paper-side-grid .card,
  html body .slide[data-index="4"] .signal-grid .stat,
  html body .slide[data-index="4"] .terminal {
    background: rgba(10, 16, 34, .58) !important;
    border-color: rgba(126, 245, 255, .18) !important;
    box-shadow: 0 18px 48px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08) !important;
    backdrop-filter: blur(12px) saturate(1.16) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.16) !important;
  }
  html[data-theme="light"] body .slide[data-index="4"] .paper-card,
  html[data-theme="light"] body .slide[data-index="4"] .paper-side-grid .card,
  html[data-theme="light"] body .slide[data-index="4"] .signal-grid .stat,
  html[data-theme="light"] body .slide[data-index="4"] .terminal {
    background: rgba(255,255,255,.66) !important;
    border-color: rgba(63, 112, 190, .16) !important;
    box-shadow: 0 18px 42px rgba(72, 92, 140, .14), inset 0 1px 0 rgba(255,255,255,.72) !important;
  }
  html body .menu-card:hover,
  html body .project-card:hover,
  html body .award-card:hover,
  html body .ability-card:hover { transform: none !important; }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html body #auroraCanvas,
  html body #ambientCanvas,
  html body #cometCanvas { display: none !important; }
}