* { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body { background:#0a0a0b; color:#ffffff; font-family:'Manrope',sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
  h1,h2,h3 { font-family:'Manrope',sans-serif; letter-spacing:-0.03em; }
  a { color:inherit; text-decoration:none; }
  a:hover { color:#ff8a3a; }
  ::selection { background:#ff6a1a; color:#0a0a0b; }
  @keyframes flicker { 0%,100%{opacity:0.5} 50%{opacity:0.85} }
  @keyframes grainshift { 0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)} 40%{transform:translate(3%,-5%)} 60%{transform:translate(-3%,4%)} 80%{transform:translate(5%,2%)} 100%{transform:translate(0,0)} }
  @keyframes grainboil { 0%{transform:translate(0,0)} 25%{transform:translate(4%,-3%)} 50%{transform:translate(-5%,4%)} 75%{transform:translate(3%,5%)} 100%{transform:translate(-2%,-4%)} }
  @keyframes glowpulse { 0%,100%{opacity:0.55;transform:translate(-50%,0) scale(1)} 50%{opacity:0.85;transform:translate(-50%,0) scale(1.08)} }
  @keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
  @keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
  @keyframes popin { 0%{opacity:0;transform:scale(0.82)} 60%{transform:scale(1.06)} 100%{opacity:1;transform:scale(1)} }
  @keyframes tickpop { 0%{transform:translateY(3px);opacity:0.4} 100%{transform:translateY(0);opacity:1} }
  @keyframes wireflow { to { background-position:22px 0; } }
  @keyframes nodepulse { 0%,100%{box-shadow:0 8px 30px rgba(255,106,26,0.28)} 50%{box-shadow:0 8px 44px rgba(255,106,26,0.55)} }
  @keyframes floatthumb { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }

  /* NOTE: this is a React DC — the browser re-serializes inline styles WITH spaces
     (repeat(3, 1fr), aspect-ratio: 2.39 / 1, min-width: 78px, font-size: 80px).
     Selectors below use the spaced form; no-space forms kept as a fallback. */

  /* ---- wide desktop: use more of the screen ---- */
  @media (min-width: 1200px) {
    [style*="max-width: 1240px"] { max-width: 1440px !important; }
    [style*="max-width: 1040px"] { max-width: 1320px !important; }
  }

  /* ---- global overflow guard (all viewports) ---- */
  html, body { max-width: 100%; overflow-x: hidden; }

  /* ---- before/after sliders: allow vertical page scroll, capture horizontal drag ---- */
  [style*="aspect-ratio: 2.39 / 1"], [style*="aspect-ratio:2.39/1"] {
    touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  }

  /* ---- tablet ---- */
  @media (max-width: 940px) {
    [style*="repeat(4, 1fr)"], [style*="repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
    [style*="repeat(3, 1fr)"], [style*="repeat(3,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
    [style*="80px 1fr 1.1fr"] { grid-template-columns: 56px 1fr !important; }
    [style*="80px 1fr 1.1fr"] > div:last-child { grid-column: 1 / -1 !important; }
    [style*="1fr 1.15fr"] { grid-template-columns: 1fr !important; }
    [style*="1fr 1fr 1.2fr"] { grid-template-columns: repeat(2, 1fr) !important; }
  }

  /* ---- phone (≤680px) ---- */
  @media (max-width: 680px) {
    /* nav */
    nav { padding: 14px 16px !important; }
    nav [style*="gap: 40px"], nav [style*="gap:40px"] { gap: 14px !important; }
    nav [style*="gap: 40px"] > span, nav [style*="gap:40px"] > span { display: none !important; }
    nav button { padding: 11px 16px !important; font-size: 13px !important; }
    nav [style*="letter-spacing: 0.32em"], nav [style*="letter-spacing:0.32em"] { letter-spacing: 0.2em !important; font-size: 13px !important; }
    nav img { width: 38px !important; height: 38px !important; }

    /* every section: tighter side padding */
    section { padding-left: 18px !important; padding-right: 18px !important; }
    section[style*="88px 40px 64px"] { padding-top: 48px !important; padding-bottom: 40px !important; }
    section[style*="90px 40px"] { padding: 56px 18px !important; }
    section[style*="48px 40px 20px"] { padding: 40px 18px 16px !important; }

    /* collapse every multi-column grid */
    [style*="repeat(4, 1fr)"], [style*="repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
    [style*="repeat(3, 1fr)"], [style*="repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
    [style*="repeat(2, 1fr)"], [style*="repeat(2,1fr)"] { grid-template-columns: 1fr !important; }
    [style*="1fr 1.15fr"] { grid-template-columns: 1fr !important; }
    [style*="1fr 1fr 1.2fr"] { grid-template-columns: 1fr !important; }
    [style*="0.9fr 1.1fr"] { grid-template-columns: 1fr !important; gap: 26px !important; }
    [style*="260px 1fr"] { grid-template-columns: 1fr !important; gap: 28px !important; padding: 34px 24px !important; text-align: center; }
    [style*="260px 1fr"] [style*="letter-spacing:0.16em"] { justify-content: center; }
    [style*="80px 1fr 1.1fr"] { grid-template-columns: 1fr !important; gap: 16px !important; padding: 24px 20px !important; text-align: center; }

    /* stat band cells */
    [style*="repeat(4, 1fr)"] > div, [style*="repeat(4,1fr)"] > div { padding: 30px 18px !important; }

    /* type scale — h1/h2 tags plus explicit sizes */
    h1 { font-size: 38px !important; line-height: 1.04 !important; }
    h2 { font-size: 27px !important; }
    [style*="font-size: 80px"], [style*="font-size:80px"] { font-size: 38px !important; }
    [style*="font-size: 46px"], [style*="font-size:46px"] { font-size: 27px !important; }
    [style*="font-size: 32px"], [style*="font-size:32px"] { font-size: 25px !important; }
    [style*="font-size: 19px"], [style*="font-size:19px"] { font-size: 16px !important; }

    /* node-tree diagram: stack vertically on phone (no more sideways scroll) */
    [data-om-raster] { overflow-x: visible !important; padding: 30px 18px !important; }
    [data-om-raster] > div:first-child { flex-direction: column !important; }
    [data-om-raster] [style*="width:40px;height:2px"] { width: 2px !important; height: 26px !important; }
    [data-om-raster] [style*="width:172px"], [data-om-raster] [style*="width:150px"] { width: 220px !important; }

    /* countdown boxes: let 4 wrap/shrink cleanly */
    [style*="min-width: 78px"], [style*="min-width:78px"] { min-width: 0 !important; flex: 1 1 64px !important; padding: 13px 6px !important; }

    footer [style*="justify-content: space-between"], footer [style*="justify-content:space-between"] { flex-direction: column !important; text-align: center !important; gap: 16px !important; }
    footer [style*="1.6fr 1fr 1.4fr"] { grid-template-columns: 1fr !important; gap: 34px !important; padding: 48px 20px 32px !important; }
  }

  /* ---- small phone (≤400px) ---- */
  @media (max-width: 400px) {
    h1, [style*="font-size: 80px"], [style*="font-size:80px"] { font-size: 32px !important; }
    h2, [style*="font-size: 46px"], [style*="font-size:46px"] { font-size: 24px !important; }
    [style*="repeat(4, 1fr)"], [style*="repeat(4,1fr)"] { grid-template-columns: 1fr !important; }
    section { padding-left: 15px !important; padding-right: 15px !important; }
  }