#mobile-dots, #mobile-dot-art { display: none; }
@media (max-width: 760px) {
  html, body { scroll-snap-type: none !important; scroll-behavior: auto !important; }
  #story { position: relative; }
  .ch { height: auto !important; min-height: 0 !important; scroll-snap-align: none !important; scroll-snap-stop: normal !important; }
  .ch-inner, .ch.is-active .ch-inner {
    position: relative !important; inset: auto !important; height: auto !important; min-height: 0 !important;
    visibility: visible !important; pointer-events: auto !important; overflow: visible !important;
    transform: none !important; display: flex; justify-content: center !important;
    padding: 60px 20px 68px !important;
  }
  .ch.ch-hero, .ch.ch-hero .ch-inner, .ch.ch-hero.is-active .ch-inner { min-height: 82svh !important; }
  .ch.ch-hero .ch-inner, .ch.ch-hero.is-active .ch-inner { justify-content: flex-end !important; padding-bottom: calc(85px + env(safe-area-inset-bottom)) !important; }
  .ch-work .ch-inner, .ch-contact .ch-inner { overflow: visible !important; justify-content: center !important; }
  .bands { display: none !important; }
  .split .wi, .ch.is-past .split .wi, .ch.is-active .split .wi { opacity: 1 !important; transform: none !important; transition: none !important; will-change: auto !important; }
  .rv, .ch.is-past .rv, .ch.is-active .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  body.mobile-reveal .ch .mobile-reveal-item { opacity: 0 !important; transform: translateY(26px) !important; transition: opacity .75s ease, transform .9s var(--ease) !important; transition-delay: var(--reveal-delay, 0ms) !important; }
  body.mobile-reveal .ch .mobile-reveal-item.is-shown { opacity: 1 !important; transform: none !important; }
  .ch-inner > * { flex-shrink: 0; }
  #gl { display: none !important; }
  body.no-gl { background: var(--bg); background-attachment: initial; }
  #mobile-dots {
    display: block; position: fixed; inset: 0; z-index: 1;
    overflow: hidden; pointer-events: none;
  }
  #mobile-dots .mobile-dot-layer {
    position: absolute; inset: 0;
    animation: mobile-dot-drift var(--duration) ease-in-out var(--delay) infinite alternate;
    will-change: transform;
  }
  #mobile-dots i {
    position: absolute; left: var(--x); top: var(--y);
    width: var(--size); height: var(--size); border-radius: 50%;
    background: var(--dot-color); opacity: var(--dot-opacity);
  }
  #mobile-dot-art {
    display: block; position: fixed; z-index: 0; pointer-events: none;
    width: min(88vw, 390px); aspect-ratio: 1; left: 50%; top: 13svh;
    transform: translateX(-50%);
  }
  #mobile-dot-art svg {
    display: block; width: 100%; height: 100%;
    animation: dot-cloud-float 5.5s ease-in-out infinite alternate;
    will-change: transform;
  }
  #mobile-dot-art g { animation: dot-hologram var(--float-duration) ease-in-out var(--float-delay) infinite alternate; will-change: transform, opacity; }
  #mobile-dot-art .dot-violet { fill: var(--violet); }
  #mobile-dot-art .dot-cyan { fill: var(--cyan); }
  body[data-mobile-chapter="0"] #mobile-dot-art { top: 18svh; }
  @keyframes dot-cloud-float {
    to { transform: translate3d(0, -16px, 0) rotate(5deg) scale(1.04); }
  }
  @keyframes dot-hologram {
    from { opacity: .55; transform: translate3d(var(--from-x),var(--from-y),0); }
    to { opacity: 1; transform: translate3d(var(--to-x),var(--to-y),0); }
  }
  body[data-mobile-chapter="4"] #mobile-dot-art, body[data-mobile-chapter="5"] #mobile-dot-art { top: 8svh; transform: translateX(-50%) scale(.68); }
  .ch-tools .ch-inner { justify-content: center !important; gap: 24px; }
  .ch-tools .ring-wrap { position: relative; inset: auto; width: 100%; height: auto; flex-shrink: 0; margin: 10px 0; }
  .ch-tools .ring { position: static !important; left: auto !important; top: auto !important; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; width: 100%; height: auto; }
  .ch-tools .ring span { position: static !important; transform: none !important; opacity: 1 !important; filter: none !important; z-index: auto !important; backdrop-filter: none; -webkit-backdrop-filter: none; will-change: auto; padding: 8px 12px; }
  @keyframes mobile-dot-drift {
    to { transform: translate3d(var(--dx),var(--dy),0); }
  }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  #mobile-dots .mobile-dot-layer { animation: none; will-change: auto; }
  #mobile-dot-art svg { animation: none; will-change: auto; }
  #mobile-dot-art g { animation: none; }
}