/*version GOLDEN */

/* ======================================================
   COMPONENTS (GOLDEN)
   ------------------------------------------------------
   01. App layout: incubator root
   02. Global controls
       02.1 Info button
       02.2 PWA (standalone) offsets
       02.3 Shared close button
   03. Nest UI
       03.1 Sticky header (anti-bleed shield)
       03.2 Item layout + swipe underlay
       03.3 Item age styling (new / expiring / lastday)
       03.4 Action buttons (pointer-mode variants)
       03.5 Overlay + card
   04. Info modal
   05. Modebar + segmented buttons + cooldown dot + mute
   06. Incubator wrapper + filters + chips
   07. Egg stage + hint + ring + egg + sparkles
   08. Fact bubble base + fact text fade + actions + favorite
   09. FX layer + flying egg + aurora test dev
   10. HUD / badges + responsive HUD layout
   11. Coopfucius (image + bubble + states)

   ====================================================== */


@layer components{

  /*added the below two lines*/

  /* ======================================================
     01. APP LAYOUT — INCUBATOR ROOT
     ====================================================== */

  #incubatorRoot {
    display: grid;
    place-items: center;
    min-height: 100svh;
    margin: 0;
    /*padding-block: 3.5rem *//*space for chips and hint*/
  }

  /*PWA: safe-area top padding */
   #incubatorRoot{
    padding-top: calc(3.5rem + var(--safe-top));
  }

  html.is-premium #incubatorRoot{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;

    /* ✅ bump this up until it clears your mode bar */
    /*padding-top: calc(3.75rem + var(--safe-top));*/
    padding-top: calc(1.75rem + var(--safe-top));
    padding-bottom: 2.75rem;
  }

  html.is-premium #incubatorRoot{
    --subfilters-nudge: 0px;
  }

  /*#incubatorRoot{
    min-height: 100svh;
    margin: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    padding-top: calc(3.25rem + var(--safe-top));
    padding-bottom: 1.75rem;
  }*/

    /* ======================================================
     02. GLOBAL CONTROLS
     ====================================================== */

      /* ---------- 02.1 Info button ---------- */

  .info-btn {
    position: fixed;
    top: calc(12px + var(--safe-top));
    left: 8px;
    z-index: 20;

    width: 30px;
    height: 30px;
    padding: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 9999px;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.08);

    color: #fff;
    font-weight: 500;
    font-size: 14px;      /* single source of truth */
    line-height: 1;
    cursor: pointer;

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    opacity: 0.86;
    transition: opacity 180ms ease, transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  }

  .info-btn:hover,
  .info-btn:focus-visible {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.24);
    box-shadow: 0 0 8px rgba(205, 224, 255, 0.14);
  }

  .settings-btn{
    position: fixed;
    top: calc(12px + var(--safe-top));
    right: 8px;
    z-index: 20;

    width: 30px;
    height: 30px;
    padding: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 9999px;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.08);

    color: #fff;
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    opacity: 0.86;
    transition: opacity 180ms ease, transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  }

  .settings-btn:hover,
  .settings-btn:focus-visible {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.24);
    box-shadow: 0 0 8px rgba(205, 224, 255, 0.14);
  }

  /* ---------- 02.2 PWA standalone offsets ---------- */

  @media (display-mode: standalone) {
    .modebar { top: calc(12px + var(--safe-top));}
    .info-btn { top: calc(12px + var(--safe-top));}
    .settings-btn { top: calc(12px + var(--safe-top));}
  }
    
  /* ---------- 02.3 Shared close button (Nest + Info) ---------- */

  .close-btn {
    width: 28px;
    height: 28px;

    display: grid;
    place-items: center;

    border-radius: 8px;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.1);

    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-align: center;

    cursor: pointer;
    padding: 0;

    -webkit-appearance: none;
    appearance: none;

    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  }

  .close-btn:active {
    transform: scale(0.96);
  }

        /* ======================================================
                           03. NEST UI
     ====================================================== */

  /* ---------- 03.1 Sticky header (glass + anti-bleed) ---------- */

  .nest-headerwrap{
    position: sticky;
    top: 0;
    z-index: 5;

    margin: 0;
    padding: 14px 14px 10px;

    border-radius: 16px 16px 12px 12px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.25);

    /* important: let pseudo-elements render */
    overflow: visible;
  }

  /* The "shield": blocks text behind it */
  .nest-headerwrap::before{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;

    /* go more opaque so text doesn't show through */
    background: rgba(28,28,28,0.97);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border-bottom: 1px solid rgba(255,255,255,0.08);

    z-index: 0;
    pointer-events: none;
  }

  /* The "lip": soft fade at the bottom edge */
  .nest-headerwrap::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -14px;
    height: 14px;

    background: linear-gradient(
      to bottom,
      rgba(28,28,28,0.97),
      rgba(28,28,28,0)
    );

    z-index: 1;
    pointer-events: none;
  }

  /* Ensure header content sits above the shield/lip */
  .nest-headerwrap > *{
    position: relative;
    z-index: 2;
  }

    /* ---------- 03.2 Item layout + swipe underlay ---------- */

  .nest-front{
    display: grid;
    gap: 8px;
    align-items: center;

    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    padding: 10px;

    transform: translateX(0);
    transition: transform 180ms ease, opacity 180ms ease;

    /* anti-cover */
    position: relative;
    isolation: isolate;
  }

  /* ✅ Ensure pseudo-elements never cover text/buttons inside nest-front  */
  .nest-front::before,
  .nest-front::after{
    z-index: 0;
    pointer-events: none;
  }

        .nest-front > *{
    position: relative;
    z-index: 1;
  }

  .nest-item{
    position: relative;
    overflow: hidden;
    border-radius: 12px;
  }

  .nest-action-underlay{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 84px;

    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0;
    pointer-events: none;

    background: linear-gradient(to right,
      rgba(255,255,255,0.04),
      rgba(255,255,255,0.00)
    );
  }

  /* Hard guarantee: action buttons always above sheen/phase layers */
  .nest-front .nest-iconbtn{
    position: relative;
    z-index: 3;
  }

        /* ---------- 03.3 Item age styling (v2: glass sheen + phase) ---------- */

  /* --- NEW: silver glass sheen sweep --- */
  .nest-item.is-new .nest-front{
    border-color: rgba(255,255,255,0.18);
    box-shadow: 0 0 14px rgba(255,255,255,0.08);
    overflow: hidden;
  }

  /* sheen sweep */
  .nest-item.is-new .nest-front::after{
    content:"";
    position:absolute;
    inset:-35%;
    pointer-events:none;
    z-index:0;

    background: linear-gradient(120deg,
      transparent 40%,
      rgba(255,255,255,0.22) 50%,
      transparent 60%
    );

    filter: blur(2px);
    opacity: 0.0;
    transform: translateX(-35%);
    animation: nestSheen 12s ease-in-out infinite;
  }

  /* micro-sparkles */
  .nest-item.is-new .nest-front::before{
    content:"";
    position:absolute;
    inset: 0;
    pointer-events:none;
    z-index:0;

    background:
      radial-gradient(circle, rgba(255,255,255,.30) 0 1px, transparent 2px) 12px 16px / 86px 86px,
      radial-gradient(circle, rgba(255,255,255,.22) 0 1px, transparent 2px) 48px 34px / 120px 120px;
    opacity: 0.18;
    filter: blur(.2px);
  }

  /* --- EXPIRING SOON: phase shimmer (not yellow) --- */
  .nest-item.is-expiring .nest-front{
    border-color: rgba(255, 214, 102, 0.22);
    box-shadow: 0 0 16px rgba(255,214,102,0.08);
  }

  .nest-item.is-expiring .nest-front::after{
    content:"";
    position:absolute;
    inset: -20%;
    pointer-events:none;
    z-index:0;

    background:
      repeating-linear-gradient(
        0deg,
        rgba(255,255,255,0.00) 0px,
        rgba(255,255,255,0.00) 6px,
        rgba(255,255,255,0.06) 7px,
        rgba(255,255,255,0.00) 9px
      );
    opacity: 0.0;
    filter: blur(0.6px);
    animation: nestPhase 3.8s ease-in-out infinite;
  }

  /* --- LAST DAY: a bit more "phasing" --- */
  .nest-item.is-lastday .nest-front{
    box-shadow: 0 0 18px rgba(255,214,102,0.12);
    animation: nestGhost 2.8s ease-in-out infinite;
  }

  .nest-item.is-lastday .nest-front::after{
    animation-duration: 2.6s;
    opacity: 0.0; /* base; animation raises it */
  }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce){
    .nest-item.is-new .nest-front::after,
    .nest-item.is-expiring .nest-front::after{
      animation: none !important;
      opacity: 0.12;
    }
  }

   /* ---------- 03.4 Action buttons (pointer-mode variants) ---------- */

  .nest-iconbtn{
    padding: 6px 10px;
    border-radius: 9999px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.08);
    color: #fff;
    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    -webkit-tap-highlight-color: transparent;
  }

  .nest-iconbtn:hover{ background: rgba(255,255,255,0.12);}
  .nest-iconbtn:active{ transform: scale(0.97);}

  .nest-iconbtn.is-secondary{
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.2);
  }

  .nest-iconbtn.is-primary{
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.32);
    color: rgba(255,255,255,0.98);
  }

  .fav-chip.is-pressing{
    transform: scale(0.96);
    filter: brightness(1.04);
  }

  .nest-front.is-pressing{
    background: rgba(255,255,255,0.1);
  }

  /* Calm Keep Close action on main screen */
  .keep-chip-calm{
    border-radius: 9999px;
    padding: 6px 10px;
    font-size: 12px;
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.94);
  }

  .keep-chip-calm:hover{
    background: rgba(255,255,255,0.1);
  }

  .keep-chip-calm.is-on{
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.28);
    color: rgba(255,255,255,0.98);
  }

  /* Desktop-like input: mouse/trackpad */
  @media (hover: hover) and (pointer: fine){
    /* inline buttons are available */
    .nest-front .nest-iconbtn{
      display: inline-flex;
      position: relative;
      z-index: 3; /* keep above sheen/phase */
    }
  }

  /* Touch-like input: phones/tablets */
  @media (hover: none) and (pointer: coarse){
    /* hide inline buttons; swipe reveals underlay actions */
    .nest-front .nest-iconbtn{
      display: none !important;
    }

    .nest-action-underlay .nest-iconbtn{
      display: inline-flex !important;
    }
  }

  /* ---------- 03.5 Overlay + card ---------- */

  .nest-overlay{
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.35);
  }

  .nest-overlay.is-open{
    display: flex;
  }

  .nest-card{
    max-width: 520px;
    width: 92vw;
    max-height: 70vh;

    background: rgba(28,28,28,0.9);
    color: #fff;

    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;

    padding: 0 14px 14px; /* flush header, keep content padding */
    overflow: auto;

    box-shadow: 0 12px 40px rgba(0,0,0,0.4);

    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .sky-overlay{
    position: fixed;
    inset: 0;
    z-index: 21000;
    display: none;
    pointer-events: none;
    background: #0b0f1a;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .sky-overlay.is-open{
    display: block;
    pointer-events: auto;
  }

  /* Defensive hit-testing guardrails:
     closed overlays must never steal egg taps (notably iOS PWA standalone). */
  .sky-overlay:not(.is-open),
  .keep-close-modal-overlay:not(.is-open),
  .info-overlay:not(.is-open){
    pointer-events: none !important;
  }

  /* Ensure egg interaction layer stays tappable under passive visual layers. */
  #eggWrap,
  #egg{
    pointer-events: auto;
    position: relative;
  }

  .sky-scene{
    position: absolute;
    inset: 0;
    overflow: hidden;
    --sky-drawer-accent-rgb: 198, 162, 93;
    --sky-drawer-edge-rgb: 214, 180, 115;
    --sky-drawer-bg-rgb: 10, 16, 28;
    --sky-drawer-text-rgb: 236, 243, 255;
    background:
      url("../assets/CCNclean.png") center 60% / cover no-repeat,
      #0b0f1a;
    background-attachment: scroll;
  }

  .sky-scene::before{
    content: none;
  }

  .sky-parallax{
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
  }

  .sky-parallax-layer{
    position: absolute;
    inset: 0;
  }

  .sky-parallax-layer.l1{ animation: drift1 180s linear infinite; }
  .sky-parallax-layer.l2{ animation: drift2 240s linear infinite; }
  .sky-parallax-layer.l3{ animation: drift3 300s linear infinite; }

  .sky-parallax-star{
    position: absolute;
    width: var(--sz, 1px);
    height: var(--sz, 1px);
    border-radius: 50%;
    background: radial-gradient(
      circle,
      rgba(235, 242, 255, calc(var(--o, 0.28) * 0.65)),
      rgba(235, 242, 255, calc(var(--o, 0.28) * 0.15)) 62%,
      transparent 100%
    );
    opacity: var(--o, 0.28);
    animation: twinkle var(--tw, 7s) ease-in-out infinite;
  }

  .sky-parallax-meteor{
    position: absolute;
    width: 1px;
    height: 1px;
    border-radius: 999px;
    background: rgba(233, 240, 255, 0.58);
    box-shadow: 0 0 6px 1px rgba(233, 240, 255, 0.26);
    transform: translate(-50%,-50%);
    transform-origin: left center;
    animation: shoot 1200ms cubic-bezier(.22,1,.36,1) forwards;
  }

  .sky-parallax-meteor::after{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    height: 1px;
    width: 80px;
    transform-origin: left center;
    transform: rotate(var(--a, -20deg)) translateY(-50%);
    background: linear-gradient(
      to left,
      rgba(235, 242, 255, 0.62),
      rgba(235, 242, 255, 0)
    );
    border-radius: 2px;
    opacity: 0.5;
  }

  .sky-svg{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: auto;
    opacity: 0;
    z-index: 1;
  }

  .sky-viewport-debug{
    position: absolute;
    left: 0;
    top: 0;
    border: 1px dashed rgba(255, 214, 102, 0.9);
    box-shadow: inset 0 0 0 1px rgba(255, 214, 102, 0.35);
    pointer-events: none;
    z-index: 2;
    display: none;
  }

  .sky-svg.is-ready{
    animation: skyConstellationFadeIn 220ms ease-out forwards;
  }

  .sky-header{
    position: absolute;
    top: calc(10px + var(--safe-top));
    left: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 4;
    pointer-events: none;
  }

  .sky-title{
    font-size: 13px;
    letter-spacing: 0.02em;
    opacity: 0.68;
  }

  .sky-close-btn{
    pointer-events: auto;
  }

  .sky-constellation{
    cursor: pointer;
    transition: opacity 220ms ease;
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }

  .sky-constellation:focus,
  .sky-constellation:focus-visible{
    outline: none;
  }

  .sky-constellation .sky-link,
  .sky-constellation .sky-star-halo,
  .sky-constellation .sky-star-core{
    transition: opacity 220ms ease, filter 220ms ease, transform 220ms ease;
  }

  .sky-constellation.is-highlight .sky-link{
    opacity: 0.38;
  }

  .sky-constellation.is-highlight .sky-star-halo{
    opacity: 1.22;
  }

  .sky-constellation.is-highlight .sky-star-core{
    opacity: 1.08;
  }

  .sky-link{
    stroke-width: 0.14;
    stroke-linecap: round;
    opacity: 0.2;
  }

  .sky-star-small{
    fill: rgba(236, 241, 255, 0.13);
  }

  .sky-star-halo{
    opacity: 1;
    filter: blur(0.46px);
    transform-box: fill-box;
    transform-origin: center;
    will-change: transform, opacity;
  }

  .sky-star-halo.is-reflection-pulse{
    animation: skyReflectionPulse 5.6s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
  }

  .sky-star-core{
    opacity: 1;
    vector-effect: non-scaling-stroke;
    paint-order: stroke fill;
  }

  .sky-star-core.is-reflection-pulse-core{
    animation: skyReflectionCorePulse 5.6s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
  }

  .sky-reflection-guide-ring{
    opacity: 0;
    animation: skyReflectionGuide 1100ms ease-out 2;
    transform-origin: center;
    transform-box: fill-box;
    pointer-events: none;
  }

  @keyframes skyReflectionGuide{
    0%{
      opacity: 0.72;
      transform: scale(0.88);
    }
    72%{
      opacity: 0.26;
      transform: scale(1.44);
    }
    100%{
      opacity: 0;
      transform: scale(1.58);
    }
  }

  .sky-star-spark{
    stroke-linecap: round;
    stroke-width: 0.08;
    opacity: 0.28;
  }

  /* iOS / coarse-pointer fallback:
     preserve JS-driven dynamic fill/stroke/opacity, but avoid dull SVG blur rendering */
  @supports (-webkit-touch-callout: none) {
    @media (pointer: coarse) and (hover: none) and (max-width: 480px) {
      .sky-star-halo{
        /* iOS fallback keeps JS-driven SVG radialGradient alpha/radius.
           We only expand/soften the rendered halo footprint on mobile. */
        filter: blur(0.18px);
        opacity: 0.96;
        transform: scale(2.02);
        mix-blend-mode: screen;
        transform-box: fill-box;
        transform-origin: center;
        shape-rendering: geometricPrecision;
        will-change: transform, opacity;
      }

      .sky-star-core{
        /* Keep JS alpha/radius dynamics, but reduce flat pure-white "UI dot" feel */
        opacity: 0.70;
        transform: scale(0.72);
        transform-box: fill-box;
        transform-origin: center;
        filter: saturate(0.72) brightness(0.9);
        /* Remove persistent outline ring on iOS; halo carries glow */
        stroke: none !important;
        stroke-width: 0 !important;
        shape-rendering: geometricPrecision;
      }

      /* Ring accent only when constellation is actively highlighted */
      .sky-constellation.is-highlight .sky-star-core{
        stroke: rgba(224, 236, 255, 0.62) !important;
        stroke-width: 0.06 !important;
        opacity: 0.9;
      }

      .sky-star-spark{
        opacity: 0.26;
      }
      .sky-constellation .sky-link,
      .sky-constellation .sky-star-core,
      .sky-constellation .sky-star-halo{
        transition: opacity 180ms ease, filter 180ms ease, stroke-width 180ms ease;
      }

      .sky-constellation:not(.is-active) .sky-link{
        opacity: 0.12;
      }

      .sky-constellation.is-active .sky-link{
        opacity: 0.52;
        stroke-width: 0.18;
        filter: drop-shadow(0 0 0.8px rgba(176, 202, 242, 0.42));
      }

      .sky-constellation.is-active .sky-star-halo{
        opacity: 1.1;
        filter: blur(0.24px);
      }

      .sky-constellation.is-active .sky-star-core{
        opacity: 0.86;
      }
      /* Mobile-only Keep Close star pulse: keep core softer, push brightness into halo */
      .sky-star-halo.is-reflection-pulse{
        opacity: 1.02;
        transform: scale(1.96);
        filter: blur(0.24px);
        animation: skyReflectionPulseMobile 6.2s ease-in-out infinite;
      }

      .sky-star-core.is-reflection-pulse-core{
        opacity: 0.64;
        transform: scale(0.66);
        filter: saturate(0.66) brightness(0.88);
        animation: skyReflectionCorePulseMobile 6.2s ease-in-out infinite;
      }
      @keyframes skyReflectionPulseMobile{
        0%{
          opacity: 0.98;
          filter: blur(0.24px);
          transform: scale(1.92);
        }
        50%{
          opacity: 1.46;
          filter: blur(0.62px);
          transform: scale(3.18);
        }
        100%{
          opacity: 0.98;
          filter: blur(0.24px);
          transform: scale(1.92);
        }
      }

      @keyframes skyReflectionCorePulseMobile{
        0%{
          opacity: 0.6;
          transform: scale(0.62);
        }
        50%{
          opacity: 0.76;
          transform: scale(0.72);
        }
        100%{
          opacity: 0.6;
          transform: scale(0.62);
        }
      }
    }
  }

  .sky-ambient{
    pointer-events: none;
  }

  .sky-ambient-star{
    fill: rgba(228, 236, 255, 0.12);
  }

  .sky-flash{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 18px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
    color: rgba(236, 243, 255, 0.86);
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    text-shadow: 0 1px 10px rgba(120, 146, 198, 0.24);
  }

  .sky-flash.is-visible{
    animation: skyLabelFade 1600ms ease-in-out forwards;
  }

  @keyframes skyConstellationFadeIn{
    from{
      opacity: 0;
      transform: translateY(1px);
    }
    to{
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes skyReflectionPulse{
    0%{
      opacity: 0.94;
      filter: blur(0.5px);
      transform: scale(1);
    }
    50%{
      opacity: 1.82;
      filter: blur(1.05px);
      transform: scale(1.54);
    }
    100%{
      opacity: 0.94;
      filter: blur(0.5px);
      transform: scale(1);
    }
  }

  @keyframes skyReflectionCorePulse{
    0%{
      opacity: 1;
      transform: scale(1);
    }
    50%{
      opacity: 1.28;
      transform: scale(1.1);
    }
    100%{
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes skyLabelFade{
    0%{ opacity: 0; }
    18.75%{ opacity: 0.62; }   /* 300ms */
    81.25%{ opacity: 0.62; }   /* hold 1000ms */
    100%{ opacity: 0; }        /* fade out 300ms */
  }

  .sky-reflection-overlay{
    position: absolute;
    inset: 0;
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 13, 20, 0.36);
    padding: 16px;
  }

  .sky-reflection-card{
    --sky-reflection-tint: 176, 190, 205;
    width: min(420px, calc(100vw - 32px));
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.14);
    background:
      radial-gradient(130% 100% at 20% 0%, rgba(var(--sky-reflection-tint), 0.2), rgba(21, 27, 40, 0) 56%),
      radial-gradient(120% 105% at 88% 96%, rgba(var(--sky-reflection-tint), 0.08), rgba(21, 27, 40, 0) 66%),
      linear-gradient(145deg, rgba(var(--sky-reflection-tint), 0.08), rgba(18, 23, 34, 0) 42%),
      rgba(18, 23, 34, 0.95);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    padding: 14px;
    box-shadow:
      0 10px 30px rgba(0,0,0,0.3),
      0 0 0 1px rgba(var(--sky-reflection-tint), 0.08),
      0 0 16px rgba(var(--sky-reflection-tint), 0.1),
      -6px -10px 22px rgba(var(--sky-reflection-tint), 0.08);
    position: relative;
    overflow: hidden;
  }

  .sky-reflection-card[data-cat="biochem"]{ --sky-reflection-tint: 110, 212, 160; }
  .sky-reflection-card[data-cat="mind"]{ --sky-reflection-tint: 183, 148, 246; }
  .sky-reflection-card[data-cat="animals"]{ --sky-reflection-tint: 124, 207, 115; }
  .sky-reflection-card[data-cat="cosmos"]{ --sky-reflection-tint: 141, 162, 251; }
  .sky-reflection-card[data-cat="words"]{ --sky-reflection-tint: 242, 200, 96; }
  .sky-reflection-card[data-cat="koop"]{ --sky-reflection-tint: 255, 216, 74; }
  .sky-reflection-card[data-cat="prism"]{ --sky-reflection-tint: 234, 178, 255; }

  .sky-reflection-close{
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    pointer-events: auto;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.06);
    color: rgba(245, 249, 255, 0.84);
    font-size: 12px;
    line-height: 1;
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
  }

  .sky-reflection-close:hover,
  .sky-reflection-close:focus-visible{
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.24);
  }

  .sky-reflection-close:active{
    transform: scale(0.96);
  }

  .sky-reflection-title{
    font-size: 13px;
    letter-spacing: 0.03em;
    opacity: 0.56;
    font-weight: 500;
    text-transform: none;
  }

  .sky-reflection-fact{
    margin-top: 10px;
    line-height: 1.38;
    font-weight: 600;
    padding-right: 20px;
  }

  .sky-reflection-label{
    margin-top: 12px;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: none;
    opacity: 0.46;
  }

  .sky-reflection-note{
    margin-top: 6px;
    line-height: 1.45;
    opacity: 0.86;
    color: rgba(244, 238, 226, 0.9);
    font-style: italic;
    font-family: "Spectral", Georgia, "Times New Roman", serif;
  }

  .sky-reflection-actions{
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }

  .sky-reflection-actions .nest-iconbtn.is-primary{
    background: rgba(var(--sky-reflection-tint), 0.12);
    border-color: rgba(var(--sky-reflection-tint), 0.26);
    color: rgba(245, 250, 255, 0.92);
    box-shadow: none;
  }

  .sky-reflection-actions .nest-iconbtn.is-primary:hover,
  .sky-reflection-actions .nest-iconbtn.is-primary:focus-visible{
    background: rgba(var(--sky-reflection-tint), 0.16);
    border-color: rgba(var(--sky-reflection-tint), 0.34);
    box-shadow: 0 0 10px rgba(var(--sky-reflection-tint), 0.16);
  }

  .sky-reflection-extra{
    margin-top: 10px;
  }

  .sky-reflection-list{
    margin: 6px 0 0;
    padding: 0 0 0 16px;
    max-height: 108px;
    overflow: auto;
  }

  .sky-reflection-list-item{
    margin: 0 0 4px;
    color: rgba(244, 238, 226, 0.84);
    line-height: 1.4;
    font-family: "Spectral", Georgia, "Times New Roman", serif;
    font-style: italic;
  }

  .settings-card{
    width: min(88vw, 500px);
    max-width: 500px;
    border-radius: 18px;
    padding: 16px;
  }

  .settings-section-title{
    font-weight: 700;
    margin-top: 8px;
  }

  .settings-pref-row{
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
  }

  .settings-pref-row .nest-iconbtn.is-active{
    outline: 2px solid rgba(255,214,102,.65);
  }

  .settings-mode-toggle{
    width: min(100%, 250px);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 11px;
    padding: 3px;
    background: rgba(0,0,0,0.26);
    gap: 4px !important;
  }

  .settings-mode-btn{
    flex: 1 1 100px;
    justify-content: center;
    min-height: 30px;
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: 0.15px;
  }

  .settings-mode-toggle .settings-mode-btn.is-active{
    outline: none;
    background: linear-gradient(180deg, rgba(255,214,102,0.30), rgba(255,214,102,0.18));
    border-color: rgba(255,214,102,0.62);
    color: #fff7e0;
    box-shadow: 0 0 0 1px rgba(255,214,102,0.33) inset, 0 4px 14px rgba(255,214,102,0.22);
  }

  .settings-toggle-row{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    margin-top: 14px;
    opacity: 0.92;
    user-select: none;
  }

  .settings-toggle-row input[type="checkbox"]{
    width: 16px;
    height: 16px;
    margin: 0;
  }

  .settings-config-block{
    margin-top: 2px;
  }

  .dev-card{
    width: min(94vw, 920px);
    max-width: 920px;
    height: min(88vh, 860px);
    max-height: 88vh;
    border-radius: 18px;
  }

  .settings-dev-details{
    margin-top: 10px;
  }

  .settings-dev-inline-host{
    margin-top: 8px;
  }

  .dev-card-inline{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    border-radius: 12px !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .dev-subtext{
    opacity: .82;
    font-size: 13px;
    margin-bottom: 12px;
  }

  .dev-section{
    margin-top: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    background: rgba(255,255,255,0.015);
    overflow: hidden;
  }

  .dev-section-summary{
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    font-size: 14px;
    padding: 11px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.02);
    user-select: none;
  }

  .dev-section-summary::-webkit-details-marker{
    display: none;
  }

  .dev-section-summary::before{
    content: "\25B8";
    font-size: 12px;
    opacity: 0.76;
    transform: translateY(-1px);
    transition: transform 180ms ease;
  }

  .dev-section[open] .dev-section-summary::before{
    transform: rotate(90deg) translateX(1px);
  }

  .dev-section-body{
    display: grid;
    gap: 8px;
    padding: 10px 12px 12px;
  }

  .dev-section-hint{
    font-size: 12px;
    opacity: 0.76;
    margin-bottom: 2px;
  }

  .dev-toggle-row{
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.02);
  }

  .dev-field{
    display: grid;
    gap: 6px;
  }

  .dev-field-title{
    font-size: 13px;
    font-weight: 600;
  }

  .dev-field-hint{
    font-size: 12px;
    opacity: 0.78;
  }

  .dev-btn-row{
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 4px;
  }

  .dev-lock-row{
    margin-top: 2px;
    padding-top: 2px;
  }

  .dev-select,
  .dev-number-input{
    min-height: 36px;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(0,0,0,0.25);
    color: #fff;
  }

  .dev-select{
    min-width: 180px;
  }

  .dev-number-input{
    width: 120px;
  }

  .dev-range-label{
    font-size: 13px;
    margin: 4px 0 2px;
  }

  .dev-range-input{
    width: 100%;
  }

  .dev-action-btn{
    margin-top: 10px;
  }

  .nest-headerrow{
    display:flex;
    justify-content:space-between;
    align-items:center;
  }

  .nest-header-actions{
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .nest-sky-btn{
    width: 30px;
    height: 30px;
    padding: 0;
    flex: 0 0 30px;
    opacity: 0.88;
  }

  .nest-title{
    font-weight:700;
    margin-bottom:10px;
  }

  .nest-list{
    display:grid;
    gap:10px;
    padding: 0 14px 14px;
    padding-top: 18px;
  }

  .keep-close-slot{
    display: grid;
    gap: 10px;
    padding: 0 14px 0;
  }

  .keep-close-slot:empty{
    display: none;
    padding: 0;
    margin: 0;
  }

  .nest-list.has-keep-close{
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.08);
  }

  .nest-summary{
    opacity:.85;
    font-size:.9em;
    margin:6px 0 10px;
  }

  .nest-summary-main{
    line-height: 1.35;
  }

  .nest-summary-subtle{
    margin-top: 4px;
    font-size: 0.9em;
    opacity: 0.66;
    line-height: 1.3;
  }

  .nest-divider{
    border-top:1px solid rgba(255,255,255,0.1);
    margin:6px 0 10px;
  }

.keep-close-modal{
    max-width: 420px;
    width: min(86vw, 420px);
    padding: 24px;
    border-radius: 20px;
  }

  .keep-close-modal-body{
    display: grid;
    gap: 16px;
    margin-top: 10px;
  }

  .keep-close-modal-section{
    display: grid;
    gap: 5px;
  }

  .keep-close-modal-section.is-current{
    opacity: 0.64;
    margin-bottom: 2px;
  }

  .keep-close-modal-section.is-replace{
    opacity: 1;
  }

  .keep-close-modal-label{
    font-size: 12px;
    letter-spacing: 0.2px;
  }

  .keep-close-modal-text{
    font-size: 13px;
    line-height: 1.4;
  }

.keep-close-modal-actions{
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 26px;
  }

  .keep-close-modal-note-toggle{
    margin-top: -2px;
    justify-self: start;
    padding: 5px 10px;
    opacity: 0.74;
  }

  .keep-close-modal-note-toggle.is-hidden{
    display: none;
  }

  .keep-close-modal-note-wrap{
    margin-top: -4px;
    display: grid;
    gap: 6px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 220ms ease, opacity 180ms ease;
  }

  .keep-close-modal-note-wrap.is-open{
    max-height: 220px;
    opacity: 1;
  }

  .keep-close-modal-note-input{
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    resize: vertical;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(0,0,0,0.22);
    color: rgba(255,255,255,0.94);
    padding: 9px 10px;
    font: inherit;
    line-height: 1.35;
    overflow-wrap: anywhere;
    overflow-x: hidden;
  }

  .keep-close-modal-note-input:focus{
    outline: none;
    border-color: rgba(255,255,255,0.2);
    box-shadow: 0 0 0 2px rgba(255,255,255,0.08);
  }

  .keep-close-modal-note-count{
    justify-self: end;
    font-size: 11px;
    opacity: 0.56;
  }

  .keep-close-modal-overlay{
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 15500;
    align-items: center;
    justify-content: center;
    padding:
      max(12px, calc(10px + env(safe-area-inset-top, 0px)))
      12px
      max(12px, calc(10px + env(safe-area-inset-bottom, 0px)));
  }

  .keep-close-modal-overlay .keep-close-modal{
    transform: translateY(clamp(8px, 1.6vh, 14px));
  }

  .keep-close-modal .nest-iconbtn.is-secondary{
    background: rgba(255,255,255,0.015);
    border-color: rgba(255,255,255,0.14);
    color: rgba(255,255,255,0.76);
  }

  .keep-close-modal .nest-iconbtn.is-primary{
    background: rgba(255,255,255,0.16);
    border-color: rgba(255,255,255,0.26);
    color: rgba(255,255,255,0.96);
  }

  .keep-close-release-body{
    margin-top: 10px;
    gap: 0;
  }

  .keep-close-release-text{
    opacity: 0.82;
    line-height: 1.45;
  }

  .keep-close-release-modal{
    width: calc(100% - 40px);
    max-width: 340px;
    padding: 26px 18px 18px;
    border-radius: 22px;
  }

  @media (min-width: 760px){
    .keep-close-release-modal{
      max-width: 380px;
    }
  }

  .keep-close-release-modal .nest-title{
    font-weight: 760;
    margin-bottom: 0;
  }

  .keep-close-release-actions{
    margin-top: 22px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .keep-close-release-actions .nest-iconbtn{
    width: 100%;
    justify-content: center;
  }

  .keep-close-share-modal{
    width: calc(100% - 32px);
    max-width: 360px;
    max-height: min(92svh, 820px);
    border-radius: 22px;
    padding: 22px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    position: relative;
    overflow-y: auto;
  }

  @media (min-width: 760px){
    .keep-close-share-modal{
      max-width: 420px;
    }
  }

  @media (max-width: 640px){
    .keep-close-modal-overlay{
      align-items: center;
      justify-content: center;
      padding:
        max(12px, calc(8px + env(safe-area-inset-top, 0px)))
        10px
        max(12px, calc(8px + env(safe-area-inset-bottom, 0px)));
    }

    .keep-close-share-modal{
      max-height: calc(100svh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
      margin: 0 auto;
    }
  }

  .keep-close-share-body{
    gap: 11px;
    margin-top: 4px;
  }

  .keep-close-share-row{
    font-size: 13px;
    line-height: 1.4;
    opacity: 0.9;
  }

  .keep-close-share-title{
    margin-right: 44px;
  }

  .keep-close-share-close{
    position: absolute;
    top: 10px;
    right: 10px;
  }

  .keep-close-share-subtext{
    font-size: 12px;
    line-height: 1.4;
    opacity: 0.78;
  }

  .keep-close-share-toggle-wrap{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    opacity: 0.88;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 10px;
    padding: 6px 8px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    transition: border-color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
  }

  .keep-close-share-toggle-wrap.is-checked{
    opacity: 1;
    border-color: rgba(255,255,255,0.34);
    background: rgba(255,255,255,0.08);
  }

  .keep-close-share-toggle{
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    border: 1.4px solid rgba(255,255,255,0.64);
    border-radius: 4px;
    background: rgba(16,20,30,0.66);
    display: grid;
    place-content: center;
    margin: 0;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  }

  .keep-close-share-toggle::after{
    content: "";
    width: 8px;
    height: 4px;
    border-left: 2px solid rgba(255,255,255,0.95);
    border-bottom: 2px solid rgba(255,255,255,0.95);
    transform: rotate(-45deg) scale(0);
    transform-origin: center;
    transition: transform 0.14s ease;
  }

  .keep-close-share-toggle:checked{
    border-color: rgba(255,255,255,0.9);
    background: rgba(255,255,255,0.16);
  }

  .keep-close-share-toggle:checked::after{
    transform: rotate(-45deg) scale(1);
  }

  .keep-close-share-toggle:focus-visible{
    outline: none;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.24);
  }

  .keep-close-share-hint{
    font-size: 11.5px;
    line-height: 1.35;
    opacity: 0.62;
  }

  .keep-close-share-preview{
    position: relative;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    background: rgba(0,0,0,0.16);
    padding: 10px 11px;
    min-height: 72px;
  }

  .keep-close-share-preview::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 24px;
    border-radius: 0 0 10px 10px;
    background: linear-gradient(to bottom, rgba(28,28,28,0), rgba(28,28,28,0.95));
    pointer-events: none;
  }

  .keep-close-share-preview-text{
    margin: 0;
    font-size: 12px;
    line-height: 1.35;
    opacity: 0.78;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .keep-close-share-preview-text.has-reflection{
    -webkit-line-clamp: 8;
  }

  .sharecard-preview{
    min-height: 156px;
    display: grid;
    place-items: center;
    background: rgba(7, 12, 22, 0.8);
    padding: 14px;
  }

  .sharecard-preview-img{
    width: min(92%, 360px);
    height: auto;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    display: block;
  }

  .keep-close-share-underlay{
    width: 84px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
  }

  .keep-close-share-actions{
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
  }

  .share-primary-actions{
    margin-top: 6px;
    gap: 6px;
    justify-content: stretch;
    width: 100%;
  }

  .share-primary-actions .nest-iconbtn{
    min-height: 42px;
    padding: 9px 14px;
    border-radius: 12px;
  }

  .keep-close-share-format-group{
    margin-top: 10px;
  }

  .keep-close-share-section-label{
    margin: 0 0 7px;
    font-size: 11px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(233, 240, 255, 0.72);
  }

  .keep-close-share-format-row{
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 0;
  }

  .keep-close-share-format-segment{
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border-radius: 13px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(12, 16, 24, 0.5);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
    width: 100%;
  }

  .share-format-btn{
    min-height: 36px;
    min-width: 0;
    flex: 1 1 0;
    padding: 5px 11px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    opacity: 0.78;
  }

  .share-format-btn::before{
    content: "";
    display: inline-block;
    border: 1.5px solid currentColor;
    border-radius: 3px;
    opacity: 0.84;
    flex: 0 0 auto;
  }

  .share-format-btn.is-portrait::before{
    width: 11px;
    height: 17px;
  }

  .share-format-btn.is-square::before{
    width: 14px;
    height: 14px;
  }

  .share-format-btn.is-active{
    background: linear-gradient(180deg, rgba(255,255,255,0.26), rgba(179, 208, 255, 0.18));
    border-color: rgba(200,220,255,0.36);
    box-shadow: 0 6px 14px rgba(0,0,0,0.24), inset 0 0 0 1px rgba(255,255,255,0.08);
    opacity: 1;
  }

  .share-action-group{
    margin-top: 14px;
  }

  .share-png-btn{
    width: 100%;
    background: linear-gradient(180deg, rgba(214,228,255,0.42), rgba(146,176,228,0.36));
    border-color: rgba(226,237,255,0.72);
    box-shadow:
      0 12px 22px rgba(0,0,0,0.32),
      0 0 20px rgba(141,162,251,0.24),
      inset 0 0 0 1px rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.98);
    font-weight: 740;
  }

  .share-secondary-actions{
    width: 100%;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
  }

  .share-secondary-btn{
    flex: 1 1 0;
    min-width: 0;
    border-color: rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.015);
    box-shadow: none;
    color: rgba(240,246,255,0.86);
    font-weight: 560;
  }

  .share-send-egg-btn{
    width: 100%;
    border-color: rgba(196, 216, 255, 0.46);
    background: rgba(150, 183, 255, 0.025);
    box-shadow:
      0 0 12px rgba(141,162,251,0.1),
      inset 0 0 0 1px rgba(214,228,255,0.16);
    color: rgba(228,237,252,0.88);
    font-weight: 600;
  }

  .share-egg-actions{
    width: 100%;
    display: block;
  }

  @media (max-width: 640px){
    .share-primary-actions{
      gap: 8px;
    }
  }

  .keep-close-share-wa{
    opacity: 0.74;
  }

  .copy-buffer{
    position: fixed;
    left: -9999px;
    top: 0;
    opacity: 0;
    pointer-events: none;
  }

  .gift-send-sparkle-host{
    position: fixed;
    width: 0;
    height: 0;
    z-index: 19000;
    pointer-events: none;
    contain: layout style paint;
  }

  .gift-send-sparkle{
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(236,244,255,0.95) 0%, rgba(179,206,255,0.58) 55%, rgba(179,206,255,0) 100%);
    box-shadow: 0 0 8px rgba(168,194,245,0.42);
    opacity: 0;
    transform: translate3d(0,0,0) scale(0.85);
    animation: giftSendSparkleFloat 720ms ease-out forwards;
    pointer-events: none;
    will-change: transform, opacity;
  }

  @keyframes giftSendSparkleFloat{
    0%{
      opacity: 0;
      transform: translate3d(0,0,0) scale(0.72);
    }
    18%{
      opacity: 0.95;
      transform: translate3d(calc(var(--tx, 0px) * 0.36), calc(var(--ty, 0px) * 0.34), 0) scale(1);
    }
    100%{
      opacity: 0;
      transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) scale(0.78);
    }
  }

  @media (prefers-reduced-motion: reduce){
    .gift-send-sparkle{
      animation: none !important;
      opacity: 0 !important;
    }
  }

  .is-capturing *,
  .is-capturing *::before,
  .is-capturing *::after{
    transition: none !important;
    animation: none !important;
    filter: none !important;
  }

  .gift-egg-overlay{
    position: fixed;
    inset: 0;
    z-index: 17000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(8, 10, 18, 0.72);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }

  .gift-egg-card{
    --gift-egg-content-shift: clamp(28px, 6vh, 62px);
    width: min(92vw, 520px);
    background: linear-gradient(180deg, rgba(20,24,36,0.96), rgba(14,18,28,0.96));
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 18px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.45);
    padding: 18px 16px 16px;
    position: relative;
    display: flex;
    flex-direction: column;
    height: min(76vh, 640px);
    max-height: calc(100dvh - 36px);
    overflow: hidden;
    isolation: isolate;
  }

  .gift-egg-card.is-prehatch .gift-egg-shell-wrap{
    margin-top: auto;
    margin-bottom: auto;
    transform: translateY(calc((var(--gift-egg-content-shift) * -0.58) + 10px));
  }

  .gift-egg-card.is-hatched .gift-egg-shell-wrap{
    margin-top: auto;
    margin-bottom: auto;
  }

  .gift-egg-card.is-hatched .gift-egg-shell-wrap .gift-egg-shell{
    opacity: 0.46;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.18)) saturate(0.92) brightness(0.9);
    transition: opacity 260ms ease, filter 320ms ease;
  }

  .gift-egg-close{
    position: absolute;
    right: 10px;
    top: 10px;
  }

  .gift-egg-title{
    text-align: center;
    font-weight: 700;
    font-size: 1.08rem;
    margin-top: 2px;
    letter-spacing: 0.01em;
  }

  .gift-egg-subtitle{
    text-align: center;
    margin-top: 5px;
    opacity: 0.58;
    font-size: 0.82rem;
    font-weight: 450;
  }

  .gift-egg-shell-wrap{
    margin: 10px auto 0;
    width: min(48vw, 220px);
    border: 0;
    background: transparent;
    padding: 0;
    display: block;
    cursor: pointer;
    position: relative;
    z-index: 1;
    transform: translateY(calc(var(--gift-egg-content-shift) * -1));
    transition: transform 70ms ease;
  }

  .gift-egg-shell-wrap.is-pressing{
    transform: translateY(calc(var(--gift-egg-content-shift) * -1)) scale(0.985);
  }

  .gift-egg-shell-wrap::after{
    content: none;
  }

  .gift-egg-shell-wrap .gift-egg-shell{
    width: 100%;
    filter: drop-shadow(0 8px 17px rgba(0,0,0,0.34));
    animation: giftEggBreathe 2500ms ease-in-out infinite;
    position: relative;
  }

  .gift-egg-shell-wrap .gift-egg-shell.idle{
    animation:
      giftEggBreathe 2500ms ease-in-out infinite,
      idleGlow 3500ms ease-in-out infinite;
  }

  .gift-egg-shell-wrap.is-hatching{
    pointer-events: none;
  }

  .gift-egg-shell-wrap.is-hatching-out .gift-egg-shell{
    transform: scale(0.92);
    opacity: 0;
    visibility: hidden;
    filter: drop-shadow(0 5px 12px rgba(0,0,0,0.24));
    transition:
      transform 230ms cubic-bezier(.22,.78,.2,1),
      opacity 220ms ease,
      filter 220ms ease;
  }

  .gift-egg-shell-wrap.is-hatching .gift-egg-shell{
    animation: none !important;
  }

  .gift-egg-shell-wrap .gift-egg-shell.is-tap-glow{
    animation: giftEggTapGlow 150ms ease-out 1;
  }

  .gift-egg-shell-wrap .gift-egg-shell::after{
    content: "";
    position: absolute;
    inset: -10% -8% auto -8%;
    height: 56%;
    border-radius: 999px;
    pointer-events: none;
    background: linear-gradient(
      115deg,
      rgba(255,255,255,0) 22%,
      rgba(255,255,255,0.2) 46%,
      rgba(255,255,255,0) 68%
    );
    transform: translateX(-115%) rotate(-10deg);
    opacity: 0;
    filter: blur(0.2px);
    animation: giftEggShimmer 1800ms ease-out 1 both;
  }

  .gift-egg-reveal{
    --gift-reveal-from-x: 0px;
    --gift-reveal-from-y: 10px;
    --gift-reveal-from-scale: 0.96;
    position: absolute;
    left: 16px;
    right: 16px;
    top: 50%;
    bottom: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    transform: translate(var(--gift-reveal-from-x), calc(var(--gift-reveal-from-y) - 50%)) scale(var(--gift-reveal-from-scale));
    transform-origin: center center;
    transition:
      opacity 240ms ease,
      transform 240ms cubic-bezier(.22,.78,.2,1);
    pointer-events: none;
    z-index: 3;
  }

  .gift-egg-reveal.is-visible{
    opacity: 1;
    transform: translate(0, -50%) scale(1);
    pointer-events: auto;
  }

  .gift-egg-reveal.is-visible .gift-egg-cta.is-shimmer::before{
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(
      120deg,
      transparent 35%,
      rgba(255,214,102,0.42) 50%,
      transparent 65%
    );
    transform: translateX(-60%);
    filter: blur(1.5px);
    opacity: 0;
    animation: giftEggCtaShimmer 1100ms ease-out 1;
    pointer-events: none;
  }

  @keyframes giftEggBreathe{
    0%, 100%{
      transform: scale(1);
    }
    50%{
      transform: scale(1.02);
    }
  }

  @keyframes giftEggTapGlow{
    0%{
      filter: drop-shadow(0 10px 20px rgba(0,0,0,0.35)) brightness(1);
    }
    100%{
      filter: drop-shadow(0 13px 24px rgba(190,212,255,0.28)) brightness(1.08);
    }
  }

  .gift-egg-gift-message{
    margin: 0 auto 2px;
    max-width: 34ch;
    text-align: center;
    font-size: 0.79rem;
    line-height: 1.35;
    letter-spacing: 0.01em;
    font-weight: 460;
    color: rgba(232, 238, 252, 0.76);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 260ms ease, transform 260ms ease;
    pointer-events: none;
  }

  .gift-egg-gift-message.is-visible{
    opacity: 1;
    transform: translateY(0);
  }

  .gift-egg-note-pill{
    align-self: center;
    margin: 0 auto -4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid rgba(235, 202, 136, 0.18);
    background: rgba(22, 28, 42, 0.7);
    color: rgba(206, 214, 230, 0.78);
    font-size: 0.7rem;
    line-height: 1.2;
    letter-spacing: 0.01em;
    font-weight: 460;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 260ms ease, transform 260ms ease;
    pointer-events: none;
    max-width: min(88%, 34ch);
    text-align: center;
    position: relative;
    z-index: 4;
    box-shadow:
      0 4px 10px rgba(0,0,0,0.24),
      inset 0 0 0 1px rgba(255,255,255,0.03);
  }

  .gift-egg-note-pill.is-visible{
    opacity: 1;
    transform: translateY(0);
  }

  .gift-egg-footer-wordmark{
    margin-top: auto;
    text-align: center;
    padding-bottom: 2px;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(230, 236, 250, 0.34);
    pointer-events: none;
  }

  @keyframes giftEggCtaFadeIn{
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes giftEggCtaShimmer{
    0%   { opacity: 0; transform: translateX(-60%); }
    25%  { opacity: .55; }
    100% { opacity: 0; transform: translateX(60%); }
  }

  @keyframes giftEggShimmer{
    0%, 58%, 100%{
      opacity: 0;
      transform: translateX(-115%) rotate(-10deg);
    }
    22%{
      opacity: 0.34;
      transform: translateX(8%) rotate(-10deg);
    }
    40%{
      opacity: 0;
      transform: translateX(128%) rotate(-10deg);
    }
  }

  @media (prefers-reduced-motion: reduce){
    .gift-egg-shell-wrap .gift-egg-shell{
      animation: none !important;
    }
    .gift-egg-shell-wrap .gift-egg-shell::after{
      animation: none !important;
      opacity: 0 !important;
    }
    .gift-egg-shell-wrap::after{
      transition: none !important;
      opacity: 0.18;
      transform: none !important;
    }
    .gift-egg-reveal{
      transition: none !important;
      transform: translate(0, -50%) scale(1) !important;
    }
    .gift-egg-cta{
      transition: none !important;
      animation: none !important;
      opacity: 1;
    }
    .gift-egg-cta::before{
      animation: none !important;
      opacity: 0 !important;
    }
  }

  .gift-egg-fact-card{
    background: rgba(255, 248, 227, 0.95);
    color: #2a1f13;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.08);
    padding: 14px 14px 12px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.24);
    max-height: min(18vh, 124px);
    overflow: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .gift-egg-fact-text{
    font-family: "Spectral", Georgia, "Times New Roman", serif;
    font-size: var(--gift-fact-size, 1rem);
    line-height: 1.46;
    font-style: normal;
    text-align: center;
    max-width: 30ch;
    margin: 0 auto;
  }

  .gift-egg-fact-card.has-reflection{
    justify-content: flex-start;
  }

  .gift-egg-reflection{
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid rgba(42,31,19,0.18);
    font-family: "Spectral", Georgia, "Times New Roman", serif;
    font-size: 0.95rem;
    line-height: 1.5;
    font-style: italic;
    opacity: 0.86;
  }

  .gift-egg-cta{
    margin-top: 0;
    width: fit-content;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    min-height: 42px;
    border-radius: 13px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(220, 188, 118, 0.42);
    background:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--gift-egg-cta-accent, #8da2fb) 26%, rgba(18, 24, 38, 0.98)),
        color-mix(in srgb, var(--gift-egg-cta-accent, #8da2fb) 16%, rgba(11, 15, 26, 0.98))
      );
    color: rgba(248, 250, 255, 0.96);
    box-shadow:
      0 8px 18px rgba(0,0,0,0.28),
      0 0 0 0.5px rgba(220, 188, 118, 0.24),
      0 0 12px rgba(220, 188, 118, 0.12);
    transition:
      opacity 180ms ease,
      transform 180ms cubic-bezier(.22,.78,.2,1),
      filter 180ms ease,
      box-shadow 220ms ease,
      background 220ms ease;
    opacity: 0;
    transform: translateY(6px);
  }

  .gift-egg-cta.is-visible{
    opacity: 1;
    transform: translateY(0);
  }

  .keep-close-share-message-group{
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .keep-close-share-message-toggle{
    width: 100%;
    min-height: 36px;
    justify-content: flex-start;
    font-size: 0.86rem;
    color: rgba(236, 243, 255, 0.88);
    border-color: rgba(255,255,255,0.18);
    background: rgba(12, 17, 28, 0.58);
  }

  .keep-close-share-message-panel{
    padding: 6px 0 0;
  }

  .keep-close-share-message-select{
    width: 100%;
    min-height: 38px;
  }

  .share-send-egg-overlay{
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }

  .keep-close-send-egg-modal{
    width: min(92vw, 440px);
    max-height: min(76vh, 560px);
  }

  .keep-close-send-egg-preview{
    margin-top: 2px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(12, 18, 30, 0.56);
    color: rgba(236, 243, 255, 0.9);
    font-family: "Spectral", Georgia, "Times New Roman", serif;
    font-size: 0.92rem;
    line-height: 1.44;
    max-height: 116px;
    overflow: auto;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,0.05),
      inset 0 10px 24px rgba(255, 214, 138, 0.07),
      0 8px 16px rgba(0,0,0,0.18);
  }

  .keep-close-send-note-label{
    margin-top: 2px;
    font-size: 0.74rem;
    letter-spacing: 0.02em;
    color: rgba(236, 243, 255, 0.56);
  }

  .keep-close-send-note-list{
    display: flex;
    flex-direction: column;
    gap: 7px;
  }

  .keep-close-send-custom-wrap{
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .keep-close-send-custom-label{
    font-size: 0.72rem;
    color: rgba(236, 243, 255, 0.54);
    letter-spacing: 0.01em;
  }

  .keep-close-send-custom-input{
    width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.13);
    background: rgba(10, 14, 24, 0.62);
    color: rgba(236, 243, 255, 0.9);
    padding: 8px 10px;
    font: inherit;
    font-size: 0.83rem;
    line-height: 1.36;
    resize: vertical;
    min-height: 64px;
    max-height: 120px;
  }

  .keep-close-send-custom-input:focus-visible{
    outline: none;
    border-color: rgba(223, 192, 128, 0.55);
    box-shadow:
      0 0 0 1px rgba(223, 192, 128, 0.25),
      0 0 10px rgba(223, 192, 128, 0.14);
  }

  .keep-close-send-custom-count{
    align-self: flex-end;
    font-size: 0.7rem;
    color: rgba(236, 243, 255, 0.48);
    line-height: 1;
  }

  .keep-close-send-note-item{
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 11px;
    background: rgba(14, 20, 32, 0.62);
    color: rgba(236, 243, 255, 0.86);
    min-height: 38px;
    padding: 8px 10px 8px 38px;
    text-align: left;
    font-size: 0.86rem;
    position: relative;
    transition: border-color 160ms ease, box-shadow 180ms ease, background 180ms ease, color 160ms ease;
  }

  .keep-close-send-note-item::before{
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.36);
    transform: translateY(-50%);
    background: rgba(255,255,255,0.03);
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.18);
    transition: border-color 160ms ease, box-shadow 180ms ease, background 180ms ease;
  }

  .keep-close-send-note-item.is-selected{
    border-color: rgba(221, 188, 118, 0.52);
    background: rgba(28, 24, 18, 0.62);
    color: rgba(249, 239, 210, 0.96);
    box-shadow:
      0 0 0 1px rgba(221, 188, 118, 0.2) inset,
      0 0 10px rgba(221, 188, 118, 0.16);
  }

  .keep-close-send-note-item.is-selected::before{
    border-color: rgba(236, 200, 124, 0.84);
    background: radial-gradient(circle at center, rgba(239, 205, 136, 0.95) 0 36%, rgba(239, 205, 136, 0.18) 42%, rgba(0,0,0,0) 100%);
    box-shadow:
      0 0 0 2px rgba(236, 200, 124, 0.18),
      0 0 8px rgba(236, 200, 124, 0.2);
  }

  .keep-close-send-actions{
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .keep-close-send-primary{
    width: 100%;
    min-height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(230, 198, 128, 0.42);
    background:
      linear-gradient(
        180deg,
        rgba(72, 82, 106, 0.9),
        rgba(38, 46, 66, 0.94)
      );
    color: rgba(250, 253, 255, 0.98);
    font-weight: 700;
    box-shadow:
      0 10px 20px rgba(0,0,0,0.28),
      0 0 0 1px rgba(221, 188, 118, 0.24) inset,
      0 0 14px rgba(221, 188, 118, 0.14);
  }

  .keep-close-send-primary:hover,
  .keep-close-send-primary:focus-visible{
    filter: brightness(1.07);
    box-shadow:
      0 12px 24px rgba(0,0,0,0.32),
      0 0 0 1px rgba(236, 205, 136, 0.32) inset,
      0 0 16px rgba(236, 205, 136, 0.22);
  }

  .keep-close-send-primary:active{
    transform: translateY(1px) scale(0.995);
    filter: brightness(1.03);
  }

  .keep-close-send-caption{
    text-align: center;
    font-size: 0.75rem;
    line-height: 1.3;
    color: rgba(226, 232, 246, 0.58);
    letter-spacing: 0.01em;
    user-select: none;
  }

  .gift-egg-cta:hover,
  .gift-egg-cta:focus-visible{
    filter: brightness(1.04);
    box-shadow:
      0 10px 22px rgba(0,0,0,0.32),
      0 0 0 0.5px rgba(230, 198, 128, 0.34),
      0 0 16px rgba(230, 198, 128, 0.2);
  }

  .gift-egg-cta:active{
    transform: translateY(1px) scale(0.992);
    filter: brightness(1.01);
  }

  .keep-close-item{
    margin: 16px 0 18px;
    max-height: 520px;
    overflow: hidden;
    transition: max-height 300ms ease, margin 300ms ease, opacity 240ms ease;
  }

  .keep-close-front{
    border-radius: 16px;
    padding: 12px 12px 14px 10px;
    grid-template-columns: 1fr;
    background: rgba(255,255,255,0.045);
    border-top-color: rgba(255,255,255,0.16);
    border-right-color: rgba(255,255,255,0.12);
    border-bottom-color: rgba(255,255,255,0.12);
    overflow: hidden;
    touch-action: pan-y;
    position: relative;
  }

  .keep-close-front.is-releasing{
    pointer-events: none;
    animation: keepCloseReleaseOut 240ms ease forwards;
  }

  .keep-close-front.is-gone{
    opacity: 0;
    visibility: hidden;
  }

  .keep-close-item.is-collapsing{
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    opacity: 0;
  }

  .keep-close-front.is-releasing::after{
    content: "";
    position: absolute;
    inset: -8%;
    pointer-events: none;
    z-index: 0;
    background:
      radial-gradient(circle at 18% 30%, rgba(255,255,255,0.2) 0 1px, transparent 4px),
      radial-gradient(circle at 62% 22%, rgba(255,255,255,0.17) 0 1px, transparent 4px),
      radial-gradient(circle at 80% 58%, rgba(255,255,255,0.14) 0 1px, transparent 5px),
      radial-gradient(circle at 35% 70%, rgba(255,255,255,0.13) 0 1px, transparent 5px);
    opacity: 0.18;
    animation: keepCloseSparkleFade 240ms ease-out forwards;
  }

  @keyframes keepCloseReleaseOut{
    from{
      opacity: 1;
      transform: translateY(0) scale(1);
      filter: blur(0);
    }
    to{
      opacity: 0;
      transform: translateY(-6px) scale(0.992);
      filter: blur(0.7px);
    }
  }

  @keyframes keepCloseSparkleFade{
    from{
      opacity: 0.18;
      transform: translateY(0);
    }
    to{
      opacity: 0;
      transform: translateY(-4px);
    }
  }

  .keep-close-kicker{
    font-size: 12px;
    font-weight: 500;
    opacity: 0.68;
    margin-bottom: 6px;
  }

  .keep-close-fact-text{
    line-height: 1.38;
  }

  .keep-close-actions{
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 11px;
    margin-bottom: 3px;
  }

  .keep-close-reflection{
    margin-top: 14px;
    padding: 2px 12px 8px 10px;
    border-left: 1px solid rgba(255,255,255,0.11);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .keep-close-reflection-label{
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.5;
    margin-bottom: 6px;
  }

  .keep-close-read{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 8px;
    cursor: text;
  }

  .keep-close-read.is-empty .keep-close-note-view{
    opacity: 0.7;
    font-style: italic;
  }

  .keep-close-edit-btn{
    padding: 4px 8px;
    opacity: 0.78;
  }

  .keep-close-note-view{
    font-size: 0.95em;
    opacity: 0.78;
    font-style: italic;
    font-family: "Spectral", Georgia, "Times New Roman", serif;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.52;
  }

  .keep-close-note-wrap{
    margin-top: 2px;
    padding-right: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
  }

  .keep-close-note-input{
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(0,0,0,0.2);
    color: #fff;
    font-family: "Spectral", Georgia, "Times New Roman", serif;
    font-style: italic;
    padding: 8px;
    line-height: 1.4;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    overflow-x: hidden;
    resize: vertical;
  }

  .keep-close-note-count{
    margin-top: 4px;
    font-size: 11px;
    opacity: 0.7;
    text-align: right;
  }

  .keep-close-edit-actions{
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
  }

  .keep-close-done-btn{
    padding: 4px 8px;
    opacity: 0.9;
  }

      /* ======================================================
    04. INFO MODAL
    ====================================================== */

  .info-card{ position: relative;} /* anchor for absolute close button */

  .info-card .close-btn{
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 60; /* higher than your topMask (50) */
  }

      /* Info modal overlay + card */
  .info-overlay{
    position: fixed;
    inset: 0;
    z-index: 16000;

    background: rgba(0,0,0,0.35);

    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }

  .info-overlay.is-open{
    display: flex;
    pointer-events: auto;
  }

  .info-card{
    max-width: 520px;
    width: 92vw;
    max-height: 70vh;

    background: rgba(28,28,28,0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    color: #fff;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    padding: 18px;

    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
    overflow-y: auto;

    /*position: relative; /* anchor for absolute children */
  }

  .info-footnote {
    font-size: 0.75rem;
    opacity: 0.6;
    margin-top: 6px;
    line-height: 1.4;
  }

  .info-muted {
    opacity: 0.7;
    font-size: 0.9rem;
  }

      /* ======================================================
     05. MODEBAR + SEGMENTED BUTTONS + COOLDOWN DOT + MUTE
     ====================================================== */

  .modebar {
    position: fixed;       /* fixed = independent of incubator */
    top: calc(12px + var(--safe-top));
    left: 50%;             /* center horizontally */
    transform: translateX(-50%);

    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;

    padding: 6px 10px;
    border-radius: 9999px;
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.12);
    z-index: 10;
  }

  .mode-label {
    font: 600 12px/1 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    opacity: 0.8;
  }

  /* Segmented buttons */
  .segbtn {
    font: 600 12px/1 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    padding: 6px 12px;
    border-radius: 9999px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.08);
    color: #fff;
    cursor: pointer;
    transition: transform .08s ease, background .2s ease, border-color .2s ease;
  }

  .segbtn:hover { transform: translateY(-1px); }

  /* Cooldown badge is a dot regardless of inner text */
  .cooldown-badge{
    position: relative;
    display: inline-block;
    width: 10px;               /* dot size */
    height: 10px;
    margin-left: 8px;
    vertical-align: middle;

    /* hide any text the JS sets ("Ready", "12s", etc.) */
    font-size: 0;
    color: transparent;
    overflow: hidden;
  }

  /* green "ready" dot */
  .cooldown-badge::after{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #2ecc71;
    box-shadow: 0 0 6px #2ecc71aa;
    animation: pulse 2s infinite;
  }

      /* Modebar mute button (moved from JS inline styles) */
  .modebar-mute {
    width: 30px;
    height: 30px;
    padding: 0;
    margin-left: 0;
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
  }

  .modebar-icon-wrap{
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .modebar-iconbtn{
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    box-sizing: border-box;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.08);
    color: #fff;
    padding: 0;
    cursor: pointer;
    transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
  }

  .modebar-iconbtn:hover,
  .modebar-iconbtn:focus-visible{
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.24);
  }

  .modebar-iconbtn:active{
    transform: scale(0.97);
  }

  .modebar-iconbtn.is-active{
    background: rgba(255,255,255,0.16);
    border-color: rgba(214, 226, 255, 0.34);
    box-shadow: 0 0 10px rgba(172, 194, 255, 0.18);
  }

  html.touch-large .modebar{
    gap: 10px !important;
    padding: 7px 12px !important;
  }

  @media (hover: none) and (pointer: coarse){
    html.touch-large .modebar{
      top: calc(4px + var(--safe-top)) !important;
    }
  }

  html.touch-large .modebar-iconbtn,
  html.touch-large .modebar-mute,
  html.touch-large .info-btn,
  html.touch-large .settings-btn{
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    flex-basis: 40px !important;
    font-size: 16px !important;
  }

  html.touch-large .modebar-skybtn svg{
    width: 14px;
    height: 14px;
  }

  html.touch-large .close-btn{
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    font-size: 16px;
  }

  .modebar-skybtn svg{
    width: 12px;
    height: 12px;
    stroke: rgba(235, 243, 255, 0.88);
    stroke-width: 1.2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .modebar-skybtn svg circle{
    fill: rgba(235, 243, 255, 0.88);
    stroke: none;
  }

  .modebar-skybtn.is-glow{
    animation: skyTopGlow var(--sky-glow-duration, 2500ms) ease-in-out 1;
  }

  .modebar-skybtn.is-glow-long{
    animation: skyTopGlowLong var(--sky-glow-duration, 3600ms) ease-in-out 1;
  }

  .modebar-skybtn.is-glow svg,
  .modebar-skybtn.is-glow-long svg{
    stroke: rgba(241, 247, 255, 0.98);
  }

  .modebar-skybtn.is-glow svg circle,
  .modebar-skybtn.is-glow-long svg circle{
    fill: rgba(241, 247, 255, 0.98);
  }

  @keyframes skyTopGlow{
    0%{
      transform: scale(1);
      background: rgba(255,255,255,0.08);
      border-color: rgba(255,255,255,0.16);
      box-shadow: 0 0 0 rgba(141,162,251,0);
    }
    50%{
      transform: scale(1.045);
      background: rgba(137, 163, 255, 0.24);
      border-color: rgba(172, 194, 255, 0.66);
      box-shadow:
        0 0 12px rgba(141,162,251,0.36),
        0 0 22px rgba(141,162,251,0.18);
    }
    100%{
      transform: scale(1);
      background: rgba(255,255,255,0.08);
      border-color: rgba(255,255,255,0.16);
      box-shadow: 0 0 0 rgba(141,162,251,0);
    }
  }

  @keyframes skyTopGlowLong{
    0%{
      transform: scale(1);
      background: rgba(255,255,255,0.08);
      border-color: rgba(255,255,255,0.16);
      box-shadow: 0 0 0 rgba(141,162,251,0);
    }
    22%{
      transform: scale(1.04);
      background: rgba(128, 156, 255, 0.2);
      border-color: rgba(168, 189, 255, 0.58);
      box-shadow:
        0 0 10px rgba(141,162,251,0.28),
        0 0 18px rgba(141,162,251,0.14);
    }
    52%{
      transform: scale(1.048);
      background: rgba(137, 163, 255, 0.26);
      border-color: rgba(176, 198, 255, 0.68);
      box-shadow:
        0 0 14px rgba(141,162,251,0.38),
        0 0 24px rgba(141,162,251,0.18);
    }
    78%{
      transform: scale(1.035);
      background: rgba(125, 151, 241, 0.18);
      border-color: rgba(161, 183, 246, 0.52);
      box-shadow:
        0 0 9px rgba(141,162,251,0.24),
        0 0 16px rgba(141,162,251,0.12);
    }
    100%{
      transform: scale(1);
      background: rgba(255,255,255,0.08);
      border-color: rgba(255,255,255,0.16);
      box-shadow: 0 0 0 rgba(141,162,251,0);
    }
  }

  .sky-memory-hint{
    position: fixed;
    top: calc(68px + var(--safe-top));
    left: 50%;
    transform: translateX(-50%);
    z-index: 32;
    pointer-events: none;
    width: fit-content;
    max-width: min(82vw, 420px);
    padding: 0;
    border-radius: 0;
    border: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: rgba(236, 243, 255, 0.78);
    font-size: 12px;
    font-family: "Spectral", Georgia, "Times New Roman", serif;
    font-style: normal;
    font-weight: 520;
    letter-spacing: 0.06em;
    text-align: center;
    text-shadow: none;
    box-shadow: none;
    opacity: 0;
  }

  .sky-memory-hint.is-visible{
    animation: skyMemoryHintFade var(--sky-memory-duration, 4300ms) ease-in-out forwards;
  }

  @keyframes skyMemoryHintFade{
    0%{ opacity: 0; transform: translateX(-50%) translateY(-4px); }
    6%{ opacity: 0.92; transform: translateX(-50%) translateY(0); }
    84%{ opacity: 0.92; transform: translateX(-50%) translateY(0); }
    100%{ opacity: 0; transform: translateX(-50%) translateY(-2px); }
  }

  .sky-date-stamp{
    position: absolute;
    left: 50%;
    top: calc(25% + var(--safe-top, 0px));
    transform: translateX(-50%);
    z-index: 3;
    pointer-events: none;
    width: fit-content;
    max-width: min(80vw, 420px);
    color: rgba(236, 243, 255, 0.72);
    font-size: 12px;
    font-family: "Spectral", Georgia, "Times New Roman", serif;
    font-style: normal;
    font-weight: 520;
    letter-spacing: 0.04em;
    text-align: center;
    text-shadow: none;
    opacity: 0.94;
  }

  @media (max-width: 680px){
    .sky-date-stamp{
      top: calc(26% + var(--safe-top, 0px));
      font-size: 11.5px;
    }
  }

  .sky-timeline-hud{
    position: absolute;
    left: 50%;
    bottom: calc(16px + var(--safe-bottom, 0px));
    transform: translateX(-50%);
    z-index: 5;
    width: min(92vw, 560px);
    padding: 8px 10px;
    border-radius: 14px;
    border: 1px solid rgba(var(--sky-drawer-edge-rgb), 0.22);
    background:
      linear-gradient(180deg, rgba(var(--sky-drawer-accent-rgb), 0.12), rgba(var(--sky-drawer-bg-rgb), 0.58) 44%, rgba(var(--sky-drawer-bg-rgb), 0.8)),
      rgba(var(--sky-drawer-bg-rgb), 0.62);
    backdrop-filter: blur(12px) saturate(1.08);
    -webkit-backdrop-filter: blur(12px) saturate(1.08);
    box-shadow:
      0 12px 30px rgba(0,0,0,0.4),
      0 0 0 1px rgba(var(--sky-drawer-accent-rgb), 0.16) inset,
      inset 0 1px 0 rgba(255,255,255,0.06);
    opacity: 1;
    transition: transform 260ms ease, opacity 220ms ease;
    pointer-events: auto;
    overflow: hidden;
  }

  .sky-timeline-hud::before{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.15;
    background-image:
      radial-gradient(circle at 20% 12%, rgba(255,255,255,0.12), transparent 36%),
      radial-gradient(circle at 80% 0%, rgba(0,0,0,0.24), transparent 44%);
  }

  .sky-timeline-hud::after{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.05;
    background-image:
      radial-gradient(rgba(255,255,255,0.7) 0.45px, transparent 0.5px);
    background-size: 3px 3px;
  }

  .sky-dev-hud{
    position: absolute;
    left: 50%;
    top: calc(54px + var(--safe-top, 0px));
    transform: translateX(-50%);
    z-index: 6;
    width: min(92vw, 560px);
    padding: 8px 10px;
    border-radius: 14px;
    border: 1px solid rgba(205, 223, 255, 0.16);
    background:
      linear-gradient(160deg, rgba(38, 54, 86, 0.2), rgba(9, 15, 26, 0.3) 56%, rgba(7, 12, 22, 0.36)),
      rgba(7, 12, 22, 0.3);
    backdrop-filter: blur(8px) saturate(1.04);
    -webkit-backdrop-filter: blur(8px) saturate(1.04);
    box-shadow: 0 8px 24px rgba(0,0,0,0.32);
    pointer-events: auto;
  }

  .sky-dev-hud-body{
    display: block;
  }

  .sky-drawer-scrim{
    position: absolute;
    inset: 0;
    z-index: 4;
    border: 0;
    margin: 0;
    padding: 0;
    background: rgba(4, 8, 16, 0.04);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
  }

  .sky-drawer-trigger{
    position: absolute;
    right: max(12px, calc(10px + var(--safe-right, 0px)));
    bottom: calc(16px + var(--safe-bottom, 0px));
    z-index: 6;
    min-width: 42px;
    min-height: 42px;
    border-radius: 999px;
    border: 1px solid rgba(var(--sky-drawer-edge-rgb), 0.36);
    background:
      radial-gradient(circle at 30% 24%, rgba(var(--sky-drawer-accent-rgb), 0.2), rgba(var(--sky-drawer-bg-rgb), 0.82) 70%);
    color: rgba(var(--sky-drawer-text-rgb), 0.95);
    box-shadow: 0 8px 20px rgba(0,0,0,0.38), 0 0 14px rgba(var(--sky-drawer-accent-rgb), 0.22);
    font-size: 1rem;
    line-height: 1;
    transition: transform 180ms ease, box-shadow 200ms ease, opacity 180ms ease;
  }

  .sky-drawer-trigger.is-open{
    transform: translateY(-1px);
    bottom: calc(74px + var(--safe-bottom, 0px));
    box-shadow: 0 10px 24px rgba(0,0,0,0.44), 0 0 18px rgba(var(--sky-drawer-accent-rgb), 0.28);
  }

  .sky-scene.is-sky-drawer-open .sky-drawer-trigger,
  .sky-timeline-hud.is-open + .sky-drawer-trigger{
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .sky-timeline-hud.is-closed{
    transform: translateX(-50%) translateY(calc(100% + 22px));
    opacity: 0;
    pointer-events: none;
  }

  .sky-timeline-hud.is-open{
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .sky-hud-chrome{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
  }

  .sky-hud-title{
    font-size: 10px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(236, 243, 255, 0.66);
    font-weight: 600;
  }

  .sky-hud-toggle{
    min-height: 26px;
    padding: 4px 9px;
    font-size: 0.72rem;
    border-radius: 8px;
  }

  .sky-timeline-hud.is-collapsed .sky-hud-body{
    display: none;
  }

  .sky-hud-section + .sky-hud-section{
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.1);
  }

  .sky-hud-section-title{
    margin: 0 0 7px;
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(236, 243, 255, 0.62);
    font-weight: 600;
  }

  .sky-timeline-row{
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .sky-field{
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 112px;
  }

  .sky-field-label{
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(236, 243, 255, 0.62);
    line-height: 1;
  }

  .sky-timeline-row + .sky-timeline-row{
    margin-top: 6px;
  }

  .sky-timeline-mode,
  .sky-timeline-speed{
    min-width: 110px;
    width: auto;
  }

  .sky-mode-segmented{
    min-height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(var(--sky-drawer-edge-rgb), 0.2);
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.14));
    padding: 2px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    width: 100%;
    min-width: 168px;
  }

  .sky-mode-seg-btn{
    min-height: 40px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: rgba(236, 243, 255, 0.74);
    font-size: 12px;
    font-weight: 520;
    padding: 0 12px;
    flex: 1 1 0;
    transition: color 180ms ease, background 180ms ease, box-shadow 180ms ease;
  }

  .sky-mode-seg-btn.is-active{
    color: rgba(255, 240, 202, 0.95);
    background: linear-gradient(180deg, rgba(var(--sky-drawer-accent-rgb), 0.22), rgba(var(--sky-drawer-accent-rgb), 0.1));
    box-shadow: 0 0 0 1px rgba(var(--sky-drawer-edge-rgb), 0.28) inset, 0 0 10px rgba(var(--sky-drawer-accent-rgb), 0.16);
  }

  .sky-hud-section .sky-timeline-row .sky-timeline-speed{
    min-width: 88px;
  }

  .sky-speed-stepper{
    min-height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(var(--sky-drawer-edge-rgb), 0.2);
    background: rgba(6, 10, 18, 0.34);
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px;
    min-width: 158px;
  }

  .sky-speed-btn{
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    border-radius: 999px;
    line-height: 1;
    font-size: 0.9rem;
    border: 1px solid rgba(var(--sky-drawer-edge-rgb), 0.18);
    background: rgba(255,255,255,0.04);
  }

  .sky-speed-value{
    min-width: 64px;
    text-align: center;
    font-size: 12px;
    color: rgba(243, 226, 176, 0.9);
    letter-spacing: 0.035em;
    text-shadow: 0 0 8px rgba(var(--sky-drawer-accent-rgb), 0.28);
  }

  .sky-timeline-play{
    margin-left: 0;
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 999px;
    font-size: 0.95rem;
    border: 1px solid rgba(var(--sky-drawer-edge-rgb), 0.26);
    background: radial-gradient(circle at 35% 30%, rgba(var(--sky-drawer-accent-rgb), 0.28), rgba(10, 16, 28, 0.82) 68%);
    box-shadow: 0 0 0 1px rgba(var(--sky-drawer-accent-rgb), 0.12) inset, 0 0 10px rgba(var(--sky-drawer-accent-rgb), 0.18);
  }

  .sky-timeline-play.is-playing{
    box-shadow: 0 0 0 1px rgba(var(--sky-drawer-accent-rgb), 0.18) inset, 0 0 14px rgba(var(--sky-drawer-accent-rgb), 0.34);
    animation: skyPlayPulse 1.8s ease-in-out infinite;
  }

  .sky-pause-inline{
    margin-left: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: rgba(236, 243, 255, 0.82);
    user-select: none;
    white-space: nowrap;
  }

  .sky-pause-inline.is-locked{
    opacity: 0.52;
  }

  .sky-pause-inline.is-locked::after{
    content: "Premium";
    margin-left: 4px;
    font-size: 10px;
    letter-spacing: 0.02em;
    color: rgba(216, 196, 107, 0.86);
  }

  .sky-playback-actions{
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }

  .sky-playback-actions .sky-pause-inline{
    flex: 1 1 auto;
  }

  .sky-pause-inline input{
    accent-color: rgba(188, 206, 255, 0.95);
  }

  .sky-timeline-row.is-slider{
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .sky-timeline-label{
    font-size: 11px;
    color: rgba(236, 243, 255, 0.74);
    letter-spacing: 0.02em;
  }

  .sky-timeline-meta{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 8px;
    font-size: 10.5px;
    color: rgba(236, 243, 255, 0.66);
    letter-spacing: 0.01em;
  }

  .sky-meta-start{
    justify-self: start;
    text-align: left;
  }

  .sky-meta-current{
    justify-self: center;
    text-align: center;
    color: #d8c46b;
    font-weight: 500;
    text-shadow: 0 1px 4px rgba(0,0,0,0.34);
  }

  .sky-meta-end{
    justify-self: end;
    text-align: right;
  }

  .sky-timeline-range{
    font-size: 10.5px;
    color: rgba(236, 243, 255, 0.56);
    letter-spacing: 0.01em;
  }

  .sky-timeline-slider-wrap{
    position: relative;
    --sky-slider-fill: 0%;
  }

  .sky-timeline-slider-wrap.is-playing::after{
    content: "";
    position: absolute;
    top: 50%;
    left: var(--sky-slider-fill);
    width: 26px;
    height: 10px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255,232,175,0), rgba(255,232,175,0.7), rgba(255,232,175,0));
    filter: blur(0.4px);
    animation: skySliderLeadShimmer 1.2s ease-in-out infinite;
  }

  .sky-timeline-slider{
    width: 100%;
    --sky-slider-fill: 0%;
    appearance: none;
    -webkit-appearance: none;
    height: 16px;
    border-radius: 999px;
    background:
      linear-gradient(90deg,
        rgba(203, 170, 102, 0.68) 0%,
        rgba(233, 201, 131, 0.86) var(--sky-slider-fill),
        rgba(183, 191, 205, 0.34) var(--sky-slider-fill),
        rgba(183, 191, 205, 0.34) 100%);
    box-shadow:
      inset 0 0 0 1px rgba(210, 218, 232, 0.2),
      inset 0 0 8px rgba(0,0,0,0.24),
      0 0 8px rgba(var(--sky-drawer-accent-rgb), 0.14);
  }

  .sky-timeline-slider::-webkit-slider-thumb{
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1px solid rgba(255, 231, 177, 0.8);
    background:
      radial-gradient(circle at 30% 30%, rgba(255,248,230,0.98), rgba(244,214,141,0.9) 42%, rgba(223,178,92,0.84) 74%, rgba(130,96,38,0.7));
    box-shadow: 0 0 12px rgba(247, 206, 115, 0.6), 0 0 0 1px rgba(255,255,255,0.18) inset;
    margin-top: -1px;
    transition: transform 120ms ease, box-shadow 120ms ease;
  }

  .sky-timeline-slider::-moz-range-track{
    height: 16px;
    border-radius: 999px;
    border: 1px solid rgba(210, 218, 232, 0.2);
    background: rgba(183, 191, 205, 0.34);
    box-shadow: inset 0 0 8px rgba(0,0,0,0.24);
  }

  .sky-timeline-slider::-moz-range-progress{
    height: 16px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(203, 170, 102, 0.68), rgba(233, 201, 131, 0.86));
  }

  .sky-timeline-slider::-moz-range-thumb{
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1px solid rgba(255, 231, 177, 0.8);
    background: radial-gradient(circle at 30% 30%, rgba(255,248,230,0.98), rgba(244,214,141,0.9) 42%, rgba(223,178,92,0.84) 74%, rgba(130,96,38,0.7));
    box-shadow: 0 0 12px rgba(247, 206, 115, 0.6);
    transition: transform 120ms ease, box-shadow 120ms ease;
  }

  .sky-timeline-slider.is-dragging::-webkit-slider-thumb,
  .sky-timeline-slider.is-dragging::-moz-range-thumb{
    transform: scale(1.14);
    box-shadow: 0 0 14px rgba(247, 206, 115, 0.72);
  }

  .sky-timeline-slider.is-release-pulse::-webkit-slider-thumb,
  .sky-timeline-slider.is-release-pulse::-moz-range-thumb{
    animation: skyKnobReleasePulse 180ms ease-out;
  }

  .sky-timeline-ticks{
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 2px);
    height: 6px;
    pointer-events: none;
    z-index: 1;
  }

  .sky-scene.is-reflection-modal-open .sky-svg{
    pointer-events: none !important;
  }

  .sky-tick{
    position: absolute;
    width: 2px;
    height: 6px;
    margin-left: -1px;
    border-radius: 2px;
    opacity: 0.78;
    background: rgba(214, 201, 173, 0.44);
  }

  .sky-tick.is-reflection{
    width: 3px;
    height: 8px;
    margin-left: -1.5px;
    background: rgba(255, 224, 138, 0.94);
    box-shadow: 0 0 8px rgba(255, 220, 122, 0.56);
  }

  .sky-tick.is-reflection.is-crossed{
    background: rgba(255, 238, 174, 0.98);
    box-shadow: 0 0 10px rgba(255, 233, 156, 0.76);
  }

  .sky-timeline-row.is-toggle{
    gap: 8px;
    font-size: 12px;
    color: rgba(236, 243, 255, 0.8);
    user-select: none;
  }

  .sky-inline-flag{
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .sky-inline-flag-short{
    gap: 4px;
    font-size: 11px;
  }

  .sky-decay-label{
    font-size: 0.92em;
    font-weight: 520;
  }

  .sky-timeline-row.is-toggle input{
    accent-color: rgba(188, 206, 255, 0.95);
  }

  .sky-timeline-notice{
    position: absolute;
    top: calc(30% + var(--safe-top, 0px));
    left: 50%;
    transform: translateX(-50%) translateY(-2px);
    z-index: 3;
    width: fit-content;
    max-width: min(84vw, 460px);
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(236, 243, 255, 0.88);
    font-size: 11.5px;
    letter-spacing: 0.02em;
    font-family: "Spectral", Georgia, "Times New Roman", serif;
    text-align: center;
    pointer-events: none;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.42);
    opacity: 0;
    transition: opacity 220ms ease, transform 220ms ease;
    background-image: linear-gradient(
      110deg,
      rgba(218, 227, 246, 0.8) 0%,
      rgba(247, 251, 255, 0.92) 42%,
      rgba(255, 255, 255, 0.98) 50%,
      rgba(232, 239, 252, 0.9) 58%,
      rgba(214, 224, 244, 0.78) 100%
    );
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: skyNoticeShimmer 3.8s ease-in-out infinite;
  }

  .sky-drawer-upgrade-hint{
    margin-top: 8px;
    font-size: 11px;
    letter-spacing: 0.01em;
    color: rgba(var(--sky-drawer-accent-rgb), 0.92);
    text-shadow: 0 1px 4px rgba(0,0,0,0.32);
  }

  .sky-timeline-notice.is-visible{
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  .sky-timeline-complete-hint{
    position: absolute;
    top: calc(25% + var(--safe-top, 0px));
    left: 50%;
    transform: translateX(-50%) translateY(-2px);
    z-index: 3;
    width: fit-content;
    max-width: min(84vw, 460px);
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(236, 243, 255, 0.9);
    font-size: 11.5px;
    letter-spacing: 0.03em;
    font-family: "Spectral", Georgia, "Times New Roman", serif;
    text-align: center;
    pointer-events: none;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.42);
    opacity: 0;
    transition: opacity 220ms ease, transform 220ms ease;
    background-image: linear-gradient(
      110deg,
      rgba(220, 201, 154, 0.78) 0%,
      rgba(255, 243, 212, 0.95) 46%,
      rgba(255, 251, 236, 0.98) 52%,
      rgba(238, 219, 173, 0.88) 60%,
      rgba(205, 185, 142, 0.74) 100%
    );
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: skyTimelineCompleteShimmer 3.2s ease-in-out infinite;
  }

  .sky-timeline-complete-hint.is-visible{
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  @keyframes skyNoticeShimmer{
    0%{ background-position: 100% 50%; }
    100%{ background-position: -120% 50%; }
  }

  @keyframes skyTimelineCompleteShimmer{
    0%{ background-position: 100% 50%; }
    100%{ background-position: -120% 50%; }
  }

  @keyframes skyPlayPulse{
    0%, 100%{ transform: scale(1); }
    50%{ transform: scale(1.04); }
  }

  @keyframes skySliderLeadShimmer{
    0%, 100%{ opacity: 0.25; }
    50%{ opacity: 0.7; }
  }

  @keyframes skyKnobReleasePulse{
    0%{ transform: scale(1.12); }
    100%{ transform: scale(1); }
  }

  .sky-toggle-wrap{
    gap: 8px;
  }

  .sky-toggle-switch{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    min-width: 46px;
    height: 26px;
  }

  .sky-toggle-switch input{
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
  }

  .sky-toggle-track{
    width: 46px;
    height: 26px;
    border-radius: 999px;
    border: 1px solid rgba(199, 205, 216, 0.4);
    background: linear-gradient(180deg, rgba(124, 132, 148, 0.42), rgba(82, 91, 107, 0.5));
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.35);
    transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
    position: relative;
    display: inline-flex;
    align-items: center;
  }

  .sky-toggle-thumb{
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95), rgba(219, 226, 236, 0.9));
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    transform: translateX(2px);
    transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
  }

  .sky-toggle-switch input:checked + .sky-toggle-track{
    border-color: rgba(233, 199, 126, 0.68);
    background: linear-gradient(180deg, rgba(214, 176, 104, 0.66), rgba(160, 122, 62, 0.68));
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3), 0 0 8px rgba(232, 197, 119, 0.28);
  }

  .sky-toggle-switch input:checked + .sky-toggle-track .sky-toggle-thumb{
    transform: translateX(24px);
    background: radial-gradient(circle at 30% 30%, rgba(255,251,240,0.98), rgba(248, 220, 154, 0.92));
    box-shadow: 0 0 8px rgba(246, 213, 140, 0.45), 0 1px 3px rgba(0,0,0,0.42);
  }

  .sky-toggle-switch input:focus-visible + .sky-toggle-track{
    outline: 2px solid rgba(255, 228, 164, 0.6);
    outline-offset: 2px;
  }

  .sky-timeline-row.is-wrap{
    flex-wrap: wrap;
    column-gap: 14px;
    row-gap: 7px;
  }

  @media (max-width: 680px){
    .sky-timeline-hud{
      width: min(95vw, 560px);
      padding: 9px 10px;
      bottom: calc(12px + var(--safe-bottom, 0px));
    }
    .sky-drawer-trigger{
      right: max(10px, calc(8px + var(--safe-right, 0px)));
      bottom: calc(12px + var(--safe-bottom, 0px));
      min-width: 40px;
      min-height: 40px;
    }
    .sky-drawer-trigger.is-open{
      bottom: calc(66px + var(--safe-bottom, 0px));
    }
    .sky-dev-hud{
      width: min(95vw, 560px);
      top: calc(58px + var(--safe-top, 0px));
      padding: 8px 10px;
    }
    .sky-field{
      min-width: 0;
      flex: 1 1 0;
    }
    .sky-pause-inline{
      width: auto;
      margin-top: 0;
    }
    .sky-timeline-row{
      flex-wrap: wrap;
    }
    .sky-hud-section.is-display .sky-hud-section-title{
      display: none;
    }
    .sky-timeline-notice{
      top: calc(31% + var(--safe-top, 0px));
      font-size: 11px;
    }
    .sky-timeline-complete-hint{
      top: calc(26% + var(--safe-top, 0px));
      font-size: 11px;
    }
  }

  @media (prefers-reduced-motion: reduce){
    .sky-reflection-guide-ring{
      animation: none;
      opacity: 0.38;
      transform: none;
    }
    .sky-timeline-notice{
      animation: none;
      transition: none;
    }
    .sky-timeline-complete-hint{
      animation: none;
      transition: none;
    }
    .sky-timeline-play.is-playing,
    .sky-timeline-slider-wrap.is-playing::after,
    .sky-timeline-slider.is-release-pulse::-webkit-slider-thumb,
    .sky-timeline-slider.is-release-pulse::-moz-range-thumb{
      animation: none;
    }
  }

  /* ======================================================
     06. INCUBATOR WRAPPER + FILTERS + CHIPS
     ====================================================== */

  html.is-premium{
    --chip-row: 44px;
    --chip-gap: 10px; /* whatever your wrap gap is */
  }

  /* layout sheels (wrapper) */
  .incubator { display:grid;
       gap:2.9rem !important;
       justify-items:center;
       user-select:none;
  }

  html.is-premium .incubator{
      gap: 0.6rem !important;
  }

  .filters { display:flex;
       gap:.5rem; flex-wrap:wrap; 
       justify-content:center;
        margin-bottom: 1.25rem;
     }

  html:not(.is-premium) .filters{
    margin-bottom: 0.35rem;
  }


  html.is-premium #filters{
    margin: 0;
    margin-top: 2.75rem;
    margin-bottom: 0.15rem;
    padding: 0; /* 2 rows of chips */
    min-height: calc(var(--chip-row) * 2 + var(--chip-gap));
    align-content: flex-start;
    position: relative;
  }


  /* Subfilters rail: single horizontal scroll line, compact */
  /* ---------- PREMIUM subfilters rail (single source of truth) ---------- */
  html.is-premium #subfilters{
    box-sizing: border-box;
    height: var(--chip-row);

    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;

    width: min(92vw, 520px);
    margin: 0;
    padding: 0 12px;          /* ✅ NO vertical padding */
    gap: 10px;

    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;

    position: relative;
  }

  /* Soft edge fade for horizontally scrolling subfilters */
  html.is-premium #subfilters {
    --fade-size: 28px;

    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      black var(--fade-size),
      black calc(100% - var(--fade-size)),
      transparent 100%
    );

    mask-image: linear-gradient(
      to right,
      transparent 0,
      black var(--fade-size),
      black calc(100% - var(--fade-size)),
      transparent 100%
    );
  }

  /*html.is-premium #subfilters::before{
    content:"";
    position:absolute;
    left: 10%;
    right: 10%;
    top: -6px;
    height: 1px;
    background: rgba(255,255,255,0.08);
  }*/

  html.is-premium #subfilters::-webkit-scrollbar{ display:none; }

  html.is-premium #subfilters .chip{ 
    flex: 0 0 auto; 
    height: 36px;
    align-self: center;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  /* Hidden premium subfilters keep rail height to stabilize premium layout */
  html.is-premium #subfilters[hidden]{
    display:flex !important;
    visibility:hidden;
    pointer-events:none;
  }


    /* IMPORTANT: don’t use negative margins here */
  html.is-premium #incubatorRoot.cat-focused #subfilters{
    transform: translateY(calc(-1 * (var(--chip-row) + var(--chip-gap))));
  }

  html.is-premium .egg-wrap.stage,
  html.is-premium #eggWrap{
    margin-top: 0.75rem; 
    margin-bottom: 2.25rem; /* keep egg close */
  }

  /* Premium tall phones (XR-class): keep chips where they are, drop egg lower */
  @media (min-height: 820px) and (max-width: 430px){
    html.is-premium .egg-wrap.stage,
    html.is-premium #eggWrap{
      margin-top: 3.6rem;
      margin-bottom: 0.95rem;
    }
  }

  /* iPhone premium tweak: move egg down by ~1/6 egg height without changing global layout. */
  @supports (-webkit-touch-callout: none) {
    @media (max-width: 430px) {
      html.is-premium .egg-wrap.stage,
      html.is-premium #eggWrap{
        margin-top: calc(0.75rem + 40px);
      }
    }

    @media (min-height: 820px) and (max-width: 430px) {
      html.is-premium .egg-wrap.stage,
      html.is-premium #eggWrap{
        margin-top: calc(3.6rem + 40px);
      }
    }
  }

  /* Chips / buttons share UI font via body */
  .chip{
    /* layout */
    padding: .45rem .8rem;
    border-radius: 999px;
    border: 1px solid var(--chip-border); 
    display: inline-flex; align-items: center;
    gap: .35rem;

    /* behavior */
    cursor: pointer;
    transition: background .25s ease, color .25s ease, transform .12s ease;

    /*Adjustments for egg fact appear rotation thing, Let the browser interpolate --tilt and --scale */
    @property --tilt { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
    @property --scale { syntax: '<number>'; inherits: true; initial-value: 1; }

    /* visuals */
    font-weight: 600;
    background: var(--chip-bg);         
    color: var(--chip-text);           
    box-shadow: 0 0 8px rgba(0,0,0,.08);
    backdrop-filter: blur(var(--glass-blur));
   }

    /* Selected chip state (theme-aware) */
  .chip[aria-pressed="true"]{
    background: var(--chip-active-bg, #ffd166);
    color: #2e1f00;
    font-weight: 600;
    box-shadow: 0 0 8px rgba(255,209,102,0.4);
  }

  .subchip[aria-pressed="true"]{
    opacity: 1;
    background: var(--chip-active-bg);
    color: #2e1f00;
    border-color: rgba(255,255,255,0.10);
    box-shadow: 0 0 10px rgba(255,209,102,0.25);
  }

    /* NOT PREMIUM  */

    /* Free: hidden means removed */
  html:not(.is-premium) #subfilters[hidden]{
    display: none !important;
  }

    /* PREMIUM */

  /* Premium: hidden keeps rail height (prevents premium layout jump) */
  html.is-premium #subfilters[hidden]{
    display:flex !important;
    visibility:hidden;
    pointer-events: none;
  }

  html.is-premium #incubatorRoot.cat-focused #filters .chip[data-cat] {
    display: none;
  }

  html.is-premium #incubatorRoot.cat-focused #filters .chip[data-cat][aria-pressed="true"] {
    display: inline-flex;
    margin: 0 auto;
  }

  html.is-premium #incubatorRoot.cat-focused #filters {
    justify-content: center;
  }

  html.is-premium #subfilters[hidden]{
    display:flex !important;
    visibility:hidden;
    pointer-events:none;
  }

  #subfilters::-webkit-scrollbar{ display:none; }
  #subfilters .chip{ flex: 0 0 auto; }

  /* When visible, ensure it actually becomes visible again */
  html.is-premium #subfilters:not([hidden]){
    visibility: visible;
    pointer-events: auto;
  }

  html.is-premium .subchip{
    padding: .38rem .7rem;     /* slightly smaller */
    font-size: 0.92rem;
    font-weight: 600;
    opacity: 0.92;
  }

  html.is-premium .subchip[aria-pressed="true"]{
    opacity: 1;
    box-shadow: 0 0 10px rgba(255,209,102,0.35);
  }

  html.is-premium #subfilters .subchip[data-sub=""]{
    opacity: 0.85;
  }

  html.is-premium #subfilters .subchip{
    opacity: 0.92;
    background: rgba(255,255,255,0.07);
  }

  html.is-premium #subfilters .subchip[aria-pressed="false"]{
    opacity: 0.74;
    background: rgba(255,255,255,0.05);
  }
    /* ✅ Pressed subchip = same as category chip */
  html.is-premium #subfilters .subchip[aria-pressed="true"]{
    background: var(--chip-active-bg, #ffd166);
    color: #2e1f00;
    border-color: rgba(255,214,102,0.45);
    box-shadow: 0 0 8px rgba(255,209,102,0.4);
    opacity: 0.95; /* optional: slightly softer than category */
  }

  html.is-premium #incubatorRoot.sub-focused{
  --subfilters-nudge: -4px; /* try -3px to -6px */
}


  html.is-premium #incubatorRoot.cat-focused #subfilters{
    transform: translateY(
      calc(-1 * (var(--chip-row) + var(--chip-gap)) + var(--subfilters-nudge))
    );
  }


  /*
  .theme-pill{
    margin-top: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.88);
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(var(--glass-blur));
    box-shadow: 0 0 8px rgba(0,0,0,0.12);
    opacity: 0.9;
  }

  #incubatorRoot.theme-active .theme-pill{
    background: rgba(255,209,102,0.16);
    border-color: rgba(255,209,102,0.30);
  }*/



    /* ======================================================
     07. EGG STAGE + HINT + RING + EGG + SPARKLES
     ====================================================== */
  .egg-wrap.stage{
    height: 600px;
    position: relative;
    margin: .5rem auto 1.25rem;
    width: 200px;              
    cursor: pointer;
  }

   /* (optional) if you’re using .egg-wrap.stage instead of #eggWrap in your DOM */
  /*html.is-premium #incubatorRoot.cat-focused .egg-wrap.stage{
    margin-top: 1.75rem;
  }*/


  /* NOTE BELOW HINT NOT USED RN */
  .hint {
    text-align: center; font-family: "Georgia", "Garamond", serif;
    font-style: italic; letter-spacing: 0.2px;
    color: #d8c46b; /* warm gold tone */
    text-shadow: 0 1px 0 rgba(0,0,0,.35);
    opacity: 0.9;
    font-size: 0.95rem;
    margin-top: 1rem; margin-bottom: 3rem;
  }

  .ring{
    position: absolute;
    inset: 0;
    margin: auto;
    width: 210px; height: 210px;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    z-index: 3;
    box-shadow: 0 0 0 0 currentColor;
    transition: opacity .35s ease, scale .35s ease, box-shadow .35s ease;
    will-change: opacity, scale, box-shadow;
    backface-visibility: hidden;
  }

    /* Egg – base */
  .egg{
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1.3;
    /*background: radial-gradient(circle at 50% 58%, #fff 0, #f6eddc 60%, #e8dcc6 100%);*/
    background: var(--egg-bg, radial-gradient(circle at 50% 58%, #fff 0, #f6eddc 60%, #e8dcc6 100%));
    border-radius: 50% 50% 46% 46% / 60% 60% 40% 40%;
    box-shadow: inset 0 -12px 24px rgba(0,0,0,.08);
    transform: rotate(var(--tilt)) scale(var(--scale)); 
    transition: transform .28s ease, background .4s ease, filter .4s ease;
    z-index: 4;

    /* shimmer setup */
    --shine: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
    background-blend-mode: normal, overlay;
  }

  /*.egg{*/
  /*transform: rotate(var(--tilt)) scale(var(--scale));*/
  /*transition: transform .28s ease; /* keep your other transitions too }*/

  .egg::after{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--shine);
    background-size: 200% 200%;
    background-position: -150% 0;
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: screen;
    transition: opacity .2s linear;
  }

    /* Sparkles layer (base) */
  .sparkles{
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 6;
    overflow: visible;
  }

  .sparkle{
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, currentColor 65%, transparent 70%);
    box-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
    mix-blend-mode: screen;
    opacity: 0;
    animation: rise var(--t, 1200ms) ease-out forwards;
  }

    /* ======================================================
     08. FACT BUBBLE (BASE) + TEXT FADE + ACTIONS + FAVORITE
     ====================================================== */

  .fact:empty { opacity: 0; pointer-events: none; }

  /* Fact bubble – base (no “.show” state here) */
  .fact{
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(var(--fact-max), max(var(--fact-min), calc(100% - var(--gutter)*2)));
    box-sizing: border-box;
    border-radius: 14px;
    /* AFTER (fix) - testing the rotatecalc version golden 1.3 bug investigation */
    transform: translate3d(-50%,-50%,0)
               rotate(calc(var(--tilt, 0deg) * -1)) 
               scale(0.96);

    /*transform: translate3d(-50%,-50%,0) scale(0.96);/* /* gentle pre-scale */
    transform-origin: 50% 50%;
    opacity: 0;                      /* hidden by default */
    pointer-events: none;        
    z-index: 5;

    /* text + type */
    font-family: var(--font-fact);
    font-weight: 600;
    font-size: clamp(.98rem, 1.1vw + .85rem, 1.15rem);
    line-height: 1.35;
    letter-spacing: .1px;
    text-align: center;
    text-wrap: balance;
    word-break: keep-all;
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

    /* box model (start minimal; animate in on .show) */
    width: min(420px, 92vw);         
    padding: 0;
    border-radius: 22px;
    background: transparent;
    box-shadow: none;

    /* motion */
    transition:
      transform .28s ease,
      opacity .28s ease,
      box-shadow .3s ease,
      background .3s ease,
      padding .2s ease;
  }

  /*BELOW DROP IN 9.29 PM */
    /* --- Fact box text fade (match actual IDs) --- */
  #factText{
    opacity: 0;
    transform: translateY(2px);
    transition:
      opacity 0.25s ease 0.10s,
      transform 0.25s ease 0.10s;
    will-change: opacity, transform;
    pointer-events: none; /* reduces span being the INP target */
  }

  /* When fact bubble is shown, fade the text in */
  .fact.show #factText{
    opacity: 1;
    transform: translateY(0);
  }

  /* 9.29 DROP IN FINISHE D */

  /* --- Fact box text fade --- */

  /*
  #factText {
    opacity: 0;
    transition: opacity 0.25s ease;
  }

  #factBox.show-text #factText { opacity: 1;}*/

  /* fAVORITE BUTTON inside the fact bubble */

  /* Fact actions container (if/when used) */
  #factActions{
    margin-top: 10px;
    display: flex;
    gap: 8px;
    justify-content: center;
    position: relative;
    z-index: 20;
    pointer-events: auto;
  }

  /* Favorite button inside the fact bubble */
  .fav-chip{
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;

    width: 34px;
    height: 34px;
    padding: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px; /* rounded-square, not pill */
    border: 1px solid rgba(255,255,255,0.20);
    background: rgba(23, 28, 40, 0.22);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    color: #fff;
    font-weight: 700;
    font-size: 18px;
    line-height: 1;

    cursor: pointer;
    pointer-events: auto;

    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;

    opacity: 0.84;
    transition: transform .12s ease, opacity .12s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  }

  .fav-chip:active{
    transform: scale(0.92);
  }


  /* Saved state */
  .fav-chip[data-on="1"]{
    background: rgba(255, 214, 102, 0.20);
    border-color: rgba(255, 214, 102, 0.35);
  }

  /* Optional: slightly larger on desktop */
  @media (min-width: 768px){
    .fav-chip{
      width: 38px;
      height: 38px;
      font-size: 20px;
    }
  }

  /* ======================================================
     09. FX LAYER + FLYING EGG
     ====================================================== */

  
    /* FX overlay that sits above everything */
  #fx-layer{ position: fixed; inset: 0; pointer-events: none; z-index: 9999;}

  /* Flying egg clone */
  .egg.flying-egg{
    position: fixed;               /* rooted to viewport inside fx-layer */
    width: 54px;
    aspect-ratio: 1/1.3;
    border-radius: 50% 50% 46% 46% / 60% 60% 40% 40%;
    box-shadow: inset 0 -10px 18px rgba(0,0,0,.08), 0 6px 18px rgba(0,0,0,.25);
    pointer-events: none;}

  @media (prefers-reduced-motion: reduce){
    .egg.flying-egg{ display:none !important; }}


    /* BELOW IS THE AURORA DEV TEST V1.3.A AURORA DEV */

  #eggWrap {
  position: relative;
}

/*
#auroraLayer {
  position: absolute;
  inset: -20%;
  border-radius: 999px;
  pointer-events: none;
  z-index: 5; 
}*/

 /* #auroraLayer{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 150%;
    height: 170%;
    transform: translate(-50%, -50%);
    border-radius: 999px; 
    pointer-events: none;
    z-index: 5;
  }*/

  #auroraLayer{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5; /* above stars, below egg & UI */

    /* 🌌 fade behavior *//*
  opacity: 0;
  transition: opacity 2200ms ease;
  will-change: opacity;

  transform: translateZ(0); *//* ✅ key */
}




  /* ======================================================
   10. HUD / BADGES
   ====================================================== */

    /* HUD container*/

  .egg-hud{
    display:flex;
    position: fixed;
    width: 100vw;
    height: 56px;
    z-index:90;
    gap:12px;
    justify-content:center;
    align-items:center;
    margin:.5rem 0 1rem;
    will-change: transform;
    transform: translateZ}

    /*badge base*/
  .hud-badge{font:600 .9rem/1.1 var(--font-ui, system-ui);padding:.3rem .6rem;border-radius:999px;background:rgba(255,255,255,.10);backdrop-filter:blur(4px)}
  
  /* warning and danger varients*/
  .hud-badge[data-warn="1"]{background:rgba(255,214,102,.17);box-shadow:0 0 0 1px rgba(255,214,102,.35)}
  .hud-badge[data-danger="1"]{background:rgba(255,90,90,.18);box-shadow:0 0 0 1px rgba(255,90,90,.35)}

  /* Daily complete (no eggs left) */
  .hud-badge[data-complete="1"]{
    background: linear-gradient(
      135deg,
      rgba(255, 214, 102, 0.24),
      rgba(255, 236, 170, 0.18)
    );
    border: 1px solid rgba(255,214,102,0.45);
    box-shadow:
      0 0 0 1px rgba(255,214,102,0.25),
      0 0 14px rgba(255,214,102,0.35);
    color: #2e1f00;
  }

  /* Accessibility helper */

  .visually-hidden{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0!important;border:0!important;height:1px!important;width:1px!important;overflow:hidden}

    /* === HUD fine-tuning (spacing + numerals) === */
  .hud-badge {letter-spacing: .2px; font-variant-numeric: tabular-nums; /* keep numbers aligned */}
  .hud-badge b {padding-left: .15em; /* space before the number */}
  .hud-badge::first-letter {margin-right: .1em; /* breathing room after emoji */}

  /* HUD responsive / layout adjustments
   NOTE: this is currently max-width: 3000px (so always true).
   Keeping as-is, but consider renaming later to “@media (min-width: 0px)”
   or just removing the query if it’s meant to always apply. */

   @media (max-width: 3000px) {
    .egg-hud {
      position: fixed; left: 0; right: 0;
      bottom: max(10px, env(safe-area-inset-bottom));
      display: flex; justify-content:center; gap: 12px; align-items:center;
      justify-content: center; gap: 12px;
      z-index: 100;
      will-change: transform;
      margin: 0 !important;
      width: auto;
      height: 56px;
      pointer-events: none;}
      .hint { display: none; }
      #incubatorRoot .hud-badge .lbl {
      display: none;
    }

    /* give the egg area a stable box so animations can't push siblings */
    #eggWrap {
      position: relative;
      /* width: 200px;    */
      width: clamp(220px, 59vw, 320px);       
      height: 270px;         
      margin: .5rem auto 1.25rem;
      overflow: visible;      
    }
    
    /*.incubator {
      padding-top: 56px;
      padding-bottom: calc(56px + env(safe-area-inset-bottom));
    }*/

        /* FREE only: create breathing room under the fixed modebar */
    html:not(.is-premium) .incubator{
      padding-top: 56px;
      padding-bottom: calc(56px + env(safe-area-inset-bottom));
    }

    /* PREMIUM: do not add extra top padding here (premium already sets its own) */
    html.is-premium .incubator{
      padding-top: 0;
      padding-bottom: calc(56px + env(safe-area-inset-bottom));
    }


    #egg{ position: relative; }
    #egg[data-theme="koop"]::before{
      will-change: transform, opacity;
      pointer-events: none;
      /* keep it purely transforms (rotate/scale) + opacity */
    }

    .egg-hud > * { pointer-events: auto; } /* keep buttons clickable */
    html, body { overflow-x: hidden; } /* this one seems to fix all? */
  }


  /* ======================================================
   11. COOPFUCIUS (image + bubble + states)
   ====================================================== */

  .coopfucius{
    position: fixed;
    right: 12px;
    bottom: 0px;
    /* PWA adjustment */

    /*bottom: max(0px, env(safe-area-inset-bottom));*/
    z-index: 9999;

    display: inline-block; /* or flex, see note below */
    width: auto;

    opacity: 0;
    transform: translateY(18px);
    pointer-events: none;

    transition: opacity 0.4s ease, transform 0.4s ease;
  }

  /* Chicken image: sets the visual box; torso will sit on bottom edge */
  .coopfucius img {
    display: block;
    width: clamp(220px, 32vw, 340px);
    height: auto;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4));
  }

  /* Bubble: overlay anchored to coopfucius box (over his torso / near beak) */
  .coop-bubble {
    position: absolute;

    /* tweak these two to line up with the beak */
    bottom: 38%;          /* higher % = move bubble up */
    right: 65%;           /* higher % = move closer to center */

    font-family: 'Spectral', serif;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.15px;

    padding: 0.45rem 0.85rem;
    min-width: 120px;
    /*max-width: min(300px, 75vw);*/
    width: fit-content;
    white-space: normal;
    word-break: keep-all;

    /* background: rgba(255, 255, 225, 0.86); replacing for now, new block below*/
    background: linear-gradient(135deg,
      rgba(255, 255, 180, 0.98) 0%,
      rgba(255, 210, 80, 0.98) 50%,
      rgba(255, 255, 220, 0.98) 100%);

    background-size: 200% 200%;
    animation: shimmerGold 7s ease-in-out infinite;

    color: #000;
    line-height: 1.4;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.45);
    pointer-events: auto;
  }

  /* Tail pointing toward beak */
  .coop-bubble::after {
    content: "";
    position: absolute;
    bottom: 12px;        /* below bubble edge  note was 12px, -8px (bottom, right) */
    right: -8px;         /* tweak to hit beak */
    border-width: 6px 0 6px 8px;
    border-style: solid;
    border-color: transparent transparent transparent rgba(255, 210, 80, 0.98);
  /* border-color: rgb(255, 226, 120) transparent transparent transparent;*/
    filter: brightness(0.98); /* softens edge contrast */
  }

  /* States */
  .coopfucius.coop-hidden {
    opacity: 0;
    transform: translateY(18px);
    pointer-events: none;
  }

  .coopfucius.coop-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

/* ======================================================
   Site footer (copyright)
   ====================================================== */

  .site-footer,
  footer.site-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: max(4px, calc(4px + var(--safe-bottom)), calc(4px + env(safe-area-inset-bottom)));
    padding-bottom: max(0px, var(--safe-bottom), env(safe-area-inset-bottom));

    text-align: center;
    font-size: 12px;
    letter-spacing: 0.3px;

    opacity: 0.45;
    color: var(--ink-light);

    pointer-events: none; /* purely informational */
    z-index: 80; /* below HUD (90/100), above background */

    transition: opacity 240ms ease;
  }

  /* Mobile: push footer below HUD row (about 1.5x HUD height). */
  @media (max-width: 900px) {
    .site-footer,
    footer.site-footer {
      bottom: calc(max(4px, calc(4px + var(--safe-bottom)), calc(4px + env(safe-area-inset-bottom))) - 84px);
    }
  }

    /* Theme pill slot: positioned safely, doesn't block taps except on the pill */
  /* Slot stays non-blocking */
  /* Theme pill slot: anchored above egg */
  .theme-pill-slot{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(92px + var(--safe-top));
    z-index: 30;
    pointer-events: none;
  }
  .theme-pill-slot > *{ pointer-events: auto; }

  @media (max-height: 700px){
    .theme-pill-slot{
      top: calc(102px + var(--safe-top));
    }
  }


  /* Active state */
  html.theme-active #themePill{
    border-color: rgba(255,255,255,.22);
    background: rgba(12,16,24,.48);
  }


  #themePill[hidden]{ display:none !important; }


  /* NEW DEV MODE THEME TESTING*/

    /* ========= Theme tint system ========= */
  /* We'll set --themeTint on :root in JS based on theme category */
  :root{
    --themeTint: rgba(170, 255, 140, .35); /* fallback */
    --themeHint: rgba(170, 255, 140, .35); /* fallback */
  }

  /* Shared surface style */

  /* Shared surface style (NO color-mix) */
  .theme-surface{
    background: rgba(14,18,28,.56);
    border: 1px solid rgba(255,255,255,.16);

    box-shadow:
      0 12px 24px rgba(0,0,0,.28),
      0 0 10px rgba(0,0,0,.24),
      0 0 0 1px rgba(255,255,255,.04) inset,
      0 0 12px color-mix(in srgb, var(--themeTint) 24%, transparent);

    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));

    color: rgba(241,246,255,.94);
    text-shadow: 0 1px 2px rgba(0,0,0,.55);
  }

  /* ========= Pill (CTA) ========= */
  /* Pill CTA */
  #themePill{
    position: relative;
    overflow: visible;

    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: .14rem;
    padding: .52rem .92rem;
    border-radius: 999px;

    font: inherit;
    text-align: center;
    white-space: nowrap;
    appearance: none;
    -webkit-appearance: none;

    /* neutral glass surface + subtle category edge glow */
    background: rgba(12,16,24,.46);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow:
      0 6px 14px rgba(0,0,0,.24),
      0 0 0 1px rgba(255,255,255,.05) inset,
      0 0 0 0.5px color-mix(in srgb, var(--themeHint) 42%, transparent),
      0 0 10px color-mix(in srgb, var(--themeHint) 16%, transparent);
    opacity: .86;
    transition: opacity .18s ease, transform .18s ease, box-shadow .22s ease, border-color .22s ease, background-color .22s ease;
  }
  #themePill.theme-surface{ /* just in case you apply class via JS */
    border-radius: 999px;
    background: rgba(12,16,24,.46);
    box-shadow:
      0 6px 14px rgba(0,0,0,.24),
      0 0 0 1px rgba(255,255,255,.05) inset,
      0 0 0 0.5px color-mix(in srgb, var(--themeHint) 42%, transparent),
      0 0 10px color-mix(in srgb, var(--themeHint) 16%, transparent);
  }

  /* Hint line: make it intentional and “soft gold/cream” not grey */
  #themePill .hint{
    font-size: .78rem;
    font-weight: 600;
    opacity: .84;
    letter-spacing: .01em;
    color: rgba(227,235,247,.92);
  }

  /* Active press feel */
  #themePill:active{ transform: translateY(1px) scale(.99); }
  #themePill:hover,
  #themePill:focus-visible{
    opacity: .93;
    border-color: rgba(255,255,255,.24);
    background: rgba(12,16,24,.52);
    box-shadow:
      0 8px 16px rgba(0,0,0,.26),
      0 0 0 1px rgba(255,255,255,.06) inset,
      0 0 0 1px color-mix(in srgb, var(--themeHint) 52%, transparent),
      0 0 14px color-mix(in srgb, var(--themeHint) 22%, transparent);
  }

  /* Outer glow aura (your nice effect, tuned) */
  #themePill::after{
    content:"";
    position:absolute;
    inset:-10px;
    border-radius: inherit;
    background: radial-gradient(circle at 42% 40%,
      color-mix(in srgb, var(--themeHint) 20%, transparent),
      transparent 68%);
    filter: blur(10px);
    opacity: .24;
    pointer-events:none;
  }

  /* Make the CTA line feel “button-y” */
  #themePill .pill-title{
    font-weight: 760;
    letter-spacing: .01em;
    font-size: .94rem;
    color: rgba(244,248,255,.96);
  }
  #themePill .pill-title::after{
    content: " >";
    opacity: .75;
    font-weight: 900;
  }

  /* ========= Theme Card (confirmation) ========= */
  /* Theme card lives under the pill, doesn't block egg taps */
  #themeCard{
    position: absolute;
    left: 50%;
    top: calc(100% + 10px);   /* below the pill */
    transform: translateX(-50%) translateY(-4px);

    width: max-content;
    min-width: 240px;
    max-width: min(320px, calc(100vw - 32px));
    padding: .85rem 1.1rem;
    border-radius: 18px;

    pointer-events: none;     /* doesn’t steal egg taps */
  }


  /* keep your animation behaviour */

 /* .theme-card{
    opacity: 0;
    transition: opacity .22s ease, transform .22s ease;
    text-align: center;
  }*/

    /* ===== Theme card: size + position + stronger tint (put at END of CSS) ===== */
  /* Theme card styling */
  /* ===== Theme card (single source of truth) ===== */
  #themeCard.theme-card.theme-surface{
    position: absolute;
    left: 50%;
    top: calc(100% + 10px);
    transform: translateX(-50%);

    min-width: 260px;
    max-width: min(360px, calc(100vw - 28px));
    padding: .95rem 1.15rem;
    border-radius: 18px;
    text-align: center;
    z-index: 31;

    /* Strong tint that ALWAYS works (no color-mix) */
    background:
        /* subtle tint wash */
        radial-gradient(140% 180% at 50% 0%,
          color-mix(in srgb, var(--themeTint) 35%, rgba(255,255,255,.10)),
          transparent 72%),
        /* your light glass base */
        rgba(255,255,255,.06);

      border: 1px solid rgba(255,255,255,.14);

      box-shadow:
        0 18px 44px rgba(0,0,0,.34),
        /* coloured edge glow */
        0 0 34px color-mix(in srgb, var(--themeTint) 55%, transparent),
        /* crisp inner edge */
        inset 0 0 0 1px rgba(255,255,255,.06);

    /*box-shadow:
      0 18px 44px rgba(0,0,0,.40),
      0 0 34px var(--themeTint);*/

    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));

    color: rgba(255,255,255,.95);
    text-shadow: 0 1px 2px rgba(0,0,0,.55);
  }

  /* visible state */
  #themeCard.theme-card.is-showing{
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

    .theme-card-kicker{
    font-size: .72rem;
    opacity: .82;
    font-weight: 750;
    letter-spacing: .03em;
  }

  .theme-card-title{
    font-size: 1.08rem;
    font-weight: 900;
    line-height: 1.1;
    margin-top: .15rem;
  }

  .theme-card-sub{
    font-size: .78rem;
    opacity: .78;
    font-weight: 650;
    margin-top: .15rem;
    color: color-mix(in srgb, var(--themeTint) 55%, rgba(255,255,255,.9));
  }

  #themeCard .theme-card-kicker{
    opacity: .82;
    letter-spacing: .02em;
    color: color-mix(in srgb, var(--themeTint) 60%, rgba(255,255,255,.9));
  }

  #themeCard{
    max-width: min(360px, calc(100vw - 28px));
  }

  #themePill[hidden], #themeCard[hidden]{ display:none !important; }

  /* =========================
   FREE MODE LAYOUT FIX
   ========================= */

  /* 1) Free mode should not have the gigantic row gap */
  html:not(.is-premium) .incubator{
    gap: 0.95rem !important;        /* was 2.9rem */
    padding-top: 0 !important;     /* cancel the 56px top pad */
  }

  /* 2) Make free incubatorRoot padding balanced (top and bottom) */
  html:not(.is-premium) #incubatorRoot{
    padding-top: calc(1.5rem + var(--safe-top)) !important;
    padding-bottom: calc(2.25rem + var(--safe-bottom)) !important;

    /* IMPORTANT: override earlier padding-block */
    padding-left: 0;
    padding-right: 0;
  }

    /* FREE: reduce extra space under filters */
  html:not(.is-premium) .filters{
    margin-bottom: 0.15rem !important;  /* was 1.25rem */
  }

  /* FREE: remove extra top margin on eggWrap (optional) */
  html:not(.is-premium) #eggWrap{
    margin-top: 0.1rem !important;  /* was .5rem */
  }

  /* FREE mode spacing correction (keep stack tighter under filters) */
  html:not(.is-premium){
    --free-top-pad: calc(4.3rem + var(--safe-top));
    --free-stack-gap: 2.2rem;
    --free-filters-bottom: 1rem;
    --free-egg-top: 0.8rem;
  }

  @media (max-height: 700px){
    html:not(.is-premium){
      --free-top-pad: calc(4.0rem + var(--safe-top)); /* iPhone SE-class */
      --free-stack-gap: 1.85rem;
      --free-filters-bottom: 0.78rem;
      --free-egg-top: 1.3rem;
    }

    html:not(.is-premium) .modebar{
      padding: 4px 8px;
      gap: 6px;
    }

    html:not(.is-premium) .segbtn{
      padding: 5px 10px;
      font-size: 11px;
    }

    html:not(.is-premium) .modebar-mute{
      width: 28px;
      height: 28px;
      font-size: 13px;
    }

    html:not(.is-premium) .modebar-iconbtn{
      width: 28px;
      height: 28px;
      flex-basis: 28px;
    }

    html:not(.is-premium) .filters{
      gap: 0.42rem;
    }

    html:not(.is-premium) .chip{
      padding: 0.36rem 0.68rem;
      font-size: 0.95rem;
    }
  }

  @media (min-height: 820px){
    html:not(.is-premium){
      --free-top-pad: calc(4.8rem + var(--safe-top)); /* iPhone XR-class */
      --free-stack-gap: 5rem;
      --free-filters-bottom: 1.25rem;
      --free-egg-top: 4.6rem;
    }
  }

  /* iPhone 12/13/14 regular-height class: lower free-mode egg slightly */
  @media (min-height: 780px) and (max-height: 900px) and (max-width: 430px){
    html:not(.is-premium){
      --free-stack-gap: 5rem;
      --free-egg-top: 2.6rem;
    }
  }

  /* iOS long-press text/callout suppression for interactive UI surfaces */
  #eggWrap,
  #factBox,
  #factActions,
  .modebar-iconbtn,
  .chip,
  .nest-front,
  .keep-close-front,
  #themePill,
  .close-btn,
  .info-btn,
  .settings-btn{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  /* Keep touch-action override only on compact controls, not whole egg/fact containers */
  .modebar-iconbtn,
  .chip,
  #themePill,
  .close-btn,
  .info-btn,
  .settings-btn,
  .fav-chip{
    touch-action: manipulation;
  }

  input,
  textarea,
  [contenteditable="true"],
  .keep-close-note-input{
    -webkit-touch-callout: default;
    -webkit-user-select: text;
    user-select: text;
  }

  @media (hover: none) and (pointer: coarse){
    .keep-close-modal-note-input,
    .keep-close-note-input{
      font-size: 16px;
    }
  }

  .dev-build-info{
    margin-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 8px;
    font-size: 11px;
    line-height: 1.45;
    opacity: 0.76;
    word-break: break-word;
  }

  html:not(.is-premium) #incubatorRoot{
    padding-top: var(--free-top-pad) !important;
    place-items: start center !important;
    align-content: start !important;
  }

  html:not(.is-premium) .incubator{
    gap: var(--free-stack-gap) !important;
    align-content: start !important;
  }

  html:not(.is-premium) .filters{
    margin-bottom: var(--free-filters-bottom) !important;
  }

  html:not(.is-premium) #eggWrap{
    margin-top: var(--free-egg-top) !important;
  }

  /* Desktop proportional tuning: larger controls and egg stage for readability/balance. */
  @media (min-width: 1024px) and (pointer: fine){
    .modebar{
      top: calc(16px + var(--safe-top));
      gap: 10px;
      padding: 8px 14px;
    }

    .mode-label{
      font-size: 13px;
    }

    .segbtn{
      font-size: 13px;
      padding: 7px 14px;
    }

    .modebar-iconbtn,
    .modebar-mute{
      width: 34px;
      height: 34px;
      flex-basis: 34px;
      font-size: 15px;
    }

    .filters{
      gap: 0.65rem;
      margin-bottom: 1rem;
    }

    .chip{
      padding: 0.52rem 0.95rem;
      font-size: 14px;
    }

    #eggWrap,
    .egg-wrap.stage{
      width: clamp(260px, 24vw, 340px) !important;
      height: clamp(340px, 44vh, 460px);
      margin-top: 1.25rem;
      margin-bottom: 2rem;
    }

    .egg-hud{
      bottom: max(18px, env(safe-area-inset-bottom));
      gap: 14px;
      height: 62px;
    }

    .hud-badge{
      font-size: 1rem;
      padding: 0.38rem 0.78rem;
    }
  }

}