:root{
    /* ONE consistent background colour for the whole page — the flat cream
       sampled from the new images' outer colour (#F2EBD9), so the images'
       own cream margins are indistinguishable from the page itself */
    --bg:#F2EBD9;
    --bg-soft:#F2EBD9;
    --surface:#F2EBD9;
    --surface-2:#F2EBD9;
    /* Golden-tinted text throughout: deep antique-gold / gold-brown tones,
       kept dark enough to stay clearly readable on the cream backgrounds */
    --ink:#4E3B12;
    --ink-soft:#6E571F;
    --muted:#8C7339;
    --gold:#9A7B2D;
    --gold-2:#BFA45C;
    --gold-deep:#77590F;
    /* Headings: ONE flat PURE GOLD everywhere (#C9A227) — a true bright
       metallic gold, not dark/antique, no gradient. Embossed via layered
       text-shadow (see .gold-3d rule below). */
    --heading-gold:#C9A227;
    /* Scroll cue: deeper dark gold, clearly darker than the base's cue */
    --cue-gold:#755812;
    /* Order-of-the-day containers: one lighter cream, lighter than the page */
    --detail-bg:#FCF8EE;
    --gold-pale:#EADCAE;
    --green:#46532F;
    --green-soft:#71835A;
    --pistachio:#8FA877;
    --pistachio-bg:#EEF2E1;
    --rose:#C9928C;
    --rose-deep:#B57F7A;
    --seal:#F3DEC8;
    --line:#DECFA2;
    --line-soft:#EDE2BE;
    --shadow:0 18px 45px rgba(74,63,28,.14);
    --shadow-sm:0 8px 24px rgba(74,63,28,.10);
  }
  
  html{ scroll-behavior:smooth; background:var(--bg); }
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:"Cormorant Garamond", Georgia, serif;
    font-size:19px; line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  body.locked{ overflow:hidden; }
  h1,h2,h3,h4,p,figure{ margin:0; }
  img{ max-width:100%; display:block; }
  a{ color:var(--gold); }
  button{ font:inherit; cursor:pointer; }
  .sans{ font-family:"Jost", system-ui, sans-serif; }
  .script{ font-family:"Great Vibes", cursive; font-weight:400; }
  .wrap-narrow{ max-width:620px; margin:0 auto; padding:0 18px; }
  section{ padding:56px 0 4px; }
  .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

  /* ============ Envelope cover: her exact envelope image, full screen ============ */
  .cover{
    position:fixed; inset:0; z-index:100; overflow:hidden; cursor:pointer;
    background:#C88771; width:100vw; width:100dvw; height:100vh; height:100dvh;
    transition:opacity .8s ease;
  }
  
  .env-frame{
    position:absolute; inset:0;
    width:100vw; width:100dvw; height:100vh; height:100dvh;
    transition:transform .8s ease;
  }
  .env-frame img{ width:100%; height:100%; object-fit:cover; object-position:center; pointer-events:none; }
  /* Soft pulsing glow over the gold TAP TO OPEN pill baked into the envelope image */
  .tap-glow{
    position:absolute; left:50%; top:89.2%; width:62%; height:6.2%;
    transform:translate(-50%,-50%); border-radius:999px; pointer-events:none;
    border:1.5px solid rgba(255,244,214,.0);
    animation:tapGlowPulse 1.9s ease-in-out infinite;
  }
  @keyframes tapGlowPulse{
    0%,100%{ box-shadow:0 0 0 0 rgba(255,226,160,0), 0 0 10px rgba(255,226,160,.15); border-color:rgba(255,244,214,.15); }
    50%{ box-shadow:0 0 0 7px rgba(255,226,160,.14), 0 0 30px rgba(255,226,160,.55); border-color:rgba(255,244,214,.75); }
  }
  /* Pulsing rings over the wax seal baked into the image (seal centre is at ~50% / 49% of the frame) */
  .seal-pulse{
    position:absolute; left:50%; top:49.5%; width:37%; aspect-ratio:1/1;
    transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
  }
  .seal-pulse::before, .seal-pulse::after{
    content:""; position:absolute; inset:0; border-radius:50%;
    border:3px solid rgba(255,244,214,.95);
    box-shadow:0 0 0 2px rgba(154,123,45,.35), 0 0 26px rgba(255,226,160,.55);
    animation:sealPing 2s cubic-bezier(0,0,.2,1) infinite;
  }
  .seal-pulse::after{ animation-delay:1s; }
  @keyframes sealPing{
    0%{ transform:scale(.82); opacity:1; }
    70%{ transform:scale(1.22); opacity:0; }
    100%{ transform:scale(1.22); opacity:0; }
  }
  .seal-glow{
    position:absolute; inset:5%; border-radius:50%; pointer-events:none;
    background:radial-gradient(circle, rgba(255,232,175,.5) 0%, rgba(255,232,175,0) 68%);
    animation:sealGlow 2s ease-in-out infinite;
  }
  @keyframes sealGlow{ 0%,100%{ opacity:.35; transform:scale(.94); } 50%{ opacity:.95; transform:scale(1.06); } }
  /* Animated "Tap to Open" pill (shown on wide screens, where the full-bleed
     crop can hide the pill baked into the image) */
  .tap-cue{
    position:absolute; left:50%; bottom:max(20px, env(safe-area-inset-bottom)); transform:translateX(-50%);
    display:inline-flex; align-items:center; gap:11px; pointer-events:none; white-space:nowrap;
    font-family:"Jost",sans-serif; font-size:15.5px; font-weight:600; letter-spacing:.34em; text-indent:.1em;
    text-transform:uppercase; color:#FFF8E6;
    background:linear-gradient(135deg, var(--gold-2) 0%, var(--gold) 55%, var(--gold-deep) 100%);
    border:1px solid rgba(255,248,230,.75); padding:15px 30px 15px 24px; border-radius:999px;
    box-shadow:0 12px 30px rgba(90,45,40,.4);
    animation:tapBounce 1.6s ease-in-out infinite;
  }
  .tap-cue .tap-dot{ position:relative; width:13px; height:13px; border-radius:50%; background:#FFF8E6; flex:0 0 13px; }
  .tap-cue .tap-dot::before, .tap-cue .tap-dot::after{
    content:""; position:absolute; inset:-3px; border-radius:50%; border:2px solid rgba(255,248,230,.9);
    animation:tapRipple 1.6s ease-out infinite;
  }
  .tap-cue .tap-dot::after{ animation-delay:.55s; }
  @keyframes tapRipple{ 0%{ transform:scale(.6); opacity:1; } 100%{ transform:scale(2.1); opacity:0; } }
  @keyframes tapBounce{
    0%,100%{ transform:translateX(-50%) translateY(0) scale(1); }
    30%{ transform:translateX(-50%) translateY(-9px) scale(1.045); }
    55%{ transform:translateX(-50%) translateY(0) scale(1); }
    70%{ transform:translateX(-50%) translateY(-4px) scale(1.02); }
  }
  .cover.opening{ opacity:0; pointer-events:none; }
  .tap-cue-wide{ display:none; }
  @media (min-aspect-ratio: 3/4){
    .tap-cue-wide{ display:inline-flex; }
  }
  .cover.opening .env-frame{ transform:scale(1.05); }
  .cover.gone{ display:none; }

  /* ============ Image panels: COMPLETE artwork, touching the margins ============
     All three artworks (inside cover, Nikkah, Walima) are shown COMPLETE
     AND UNCROPPED at their natural aspect ratio — the entire artwork,
     including the cover's widest printed lines, fully visible — and each
     TOUCHES THE MARGINS: width:100% of the screen, edge to edge, no side
     padding, no gap, no page background at its sides. No object-fit:cover,
     no forced 100dvh height. */
  .full-panel{
    position:relative; width:100%;
    overflow:hidden; background:var(--bg);
  }
  .panel-main{
    position:relative; z-index:2; width:100%; height:auto; max-width:none;
    display:block;
  }
  /* The hero (inside-cover) panel: the cover image sits at the top of the
     page, full width and uncropped, and the scroll cue sits IN FLOW
     immediately below the image's bottom edge — image a bit high, cue
     just below it. */
  .hero-panel{
    margin:0; padding:0;
  }

  /* Elegant scroll cue — in flow immediately below the cover image. Deep
     dark gold (#755812, unchanged — the cue is not a header), slightly
     smaller lettering, a soft breathing glow, and three chevrons
     cascading downward in a staggered fade-and-drift loop — slow and
     graceful. */
  .scroll-cue{
    position:relative; z-index:3;
    display:flex; flex-direction:column; align-items:center;
    margin-top:-28px;
    color:var(--cue-gold); background:none; border:0; box-shadow:none; padding:16px 26px 8px;
    animation:scBob 3.6s ease-in-out infinite, scGlowPulse 3.6s ease-in-out infinite;
  }
  .scroll-cue::before{
    content:""; position:absolute; inset:-6px -14px; z-index:-1; border-radius:50%;
    background:radial-gradient(ellipse at center, rgba(255,252,240,.62) 0%, rgba(255,252,240,0) 72%);
  }
  
  @keyframes scBob{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(7px); }
  }
  @keyframes scGlowPulse{
    0%,100%{ filter:drop-shadow(0 0 2px rgba(117,88,18,.12)); }
    50%{ filter:drop-shadow(0 0 10px rgba(117,88,18,.5)); }
  }
  .scroll-cue .sc-t{
    font-family:"Cormorant Garamond", Georgia, serif; font-size:17.5px; font-weight:600;
    letter-spacing:.4em; text-indent:.4em; text-transform:uppercase; line-height:1.2;
    white-space:nowrap;
    /* solid deep dark gold — one flat colour, no gradient, no shimmer */
    color:var(--cue-gold);
  }
  .scroll-cue .sc-line{
    display:block; width:46px; height:1.5px; margin-top:10px; border-radius:2px;
    background:var(--cue-gold);
    animation:scLinePulse 3.6s ease-in-out infinite;
  }
  @keyframes scLinePulse{ 0%,100%{ opacity:.5; transform:scaleX(.8); } 50%{ opacity:1; transform:scaleX(1); } }
  .scroll-cue .sc-chevs{ margin-top:8px; }
  .scroll-cue .chev{ display:block; line-height:0; margin-top:-6px; opacity:0; animation:chevCascade 2.9s ease-in-out infinite; }
  .scroll-cue .chev.c2{ animation-delay:.48s; }
  .scroll-cue .chev.c3{ animation-delay:.96s; }
  @keyframes chevCascade{
    0%{ transform:translateY(-5px); opacity:0; }
    32%{ transform:translateY(0); opacity:1; }
    68%{ transform:translateY(5px); opacity:.85; }
    100%{ transform:translateY(9px); opacity:0; }
  }

  /* ================= Fireflies =================
     Fixed full-screen layer of tiny warm golden spots that twinkle and
     float upward. Started only after the envelope is opened, then present
     throughout the whole invitation. Never intercepts taps. */
  #fireflies{
    position:fixed; inset:0; width:100%; height:100%;
    z-index:55; pointer-events:none; opacity:0; transition:opacity 1.4s ease;
  }
  #fireflies.on{ opacity:1; }

  /* ================= Countdown (hers: arch cells) ================= */
  .count-head{ text-align:center; padding:0 18px; }
  .count-title{ font-size:clamp(24px,6.4vw,32px); letter-spacing:.34em; text-indent:.34em; text-transform:uppercase; color:var(--heading-gold); font-weight:600; }
  
  .count-sub{ font-style:italic; color:var(--ink-soft); font-size:19px; margin-top:8px; }
  .cd-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; max-width:620px; margin:26px auto 0; padding:0 18px; }
  .cd-cell{
    /* Light background inside each counter box: the same lighter cream
       as the order-of-the-day containers (#FCF8EE); the page around the
       boxes stays flat #F2EBD9. */
    background:var(--detail-bg);
    border:1px solid var(--gold-2); border-radius:999px 999px 14px 14px;
    padding:26px 6px 16px; text-align:center; position:relative;
  }
  .cd-cell::before{ content:""; position:absolute; inset:5px; border:1px solid var(--line-soft); border-radius:999px 999px 10px 10px; pointer-events:none; }
  .cd-num{ font-size:clamp(28px,8vw,40px); font-weight:600; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
  .cd-lab{ font-family:"Jost",sans-serif; font-size:10.5px; letter-spacing:.3em; text-indent:.3em; text-transform:uppercase; color:var(--muted); margin-top:8px; }

  /* ================= Ceremony headings ================= */
  .ceremony-head{ text-align:center; padding:0 18px; margin-bottom:20px; }
  .ceremony-kicker{ font-family:"Jost",sans-serif; font-size:12.5px; letter-spacing:.42em; text-indent:.42em; text-transform:uppercase; color:var(--heading-gold); font-weight:500; }
  .ceremony-title{ font-size:clamp(42px,10.5vw,58px); color:var(--heading-gold); line-height:1.15; margin-top:8px; }
  
  .ceremony-venue{ margin-top:8px; font-size:15.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-soft); }
  .ceremony-date{ margin-top:10px; font-size:24px; font-weight:600; color:var(--ink); }
  .ceremony-place{ font-size:19px; font-style:italic; color:var(--ink-soft); }

  /* ================= Detail cards (hers: arched, order of the day) ================= */
  .detail{
    margin-top:52px; position:relative;
    /* Order-of-the-day container: ONE lighter cream (#FCF8EE), lighter than
       the page — the single deliberate background exception, the same for
       both celebrations. Flat colour: no gradient, no shadow tinting the
       page around it. The generous top padding sits the "Order of the
       Day" heading clearly LOWER within its section. */
    background:var(--detail-bg);
    border:1px solid var(--gold-2); border-radius:180px 180px 20px 20px;
    padding:72px 30px 30px; text-align:center;
  }
  .detail::before{ content:""; position:absolute; inset:8px; border:1px solid var(--line); border-radius:172px 172px 14px 14px; pointer-events:none; }
  .detail > *{ position:relative; }
  .dash-div{ border-top:1.5px dashed var(--line); margin:22px 4px; }
  /* "Order of the Day" — always ONE single line in both sections: never
     wraps, sized (with tighter letterspacing) to fit a phone width. */
  .order-title{ font-size:16.5px; letter-spacing:.26em; text-indent:.26em; text-transform:uppercase; color:var(--heading-gold); font-weight:600; white-space:nowrap; }
  
  .otl{ max-width:400px; margin:24px auto 0; position:relative; text-align:left; }
  .otl::before{ content:""; position:absolute; left:118px; top:14px; bottom:14px; width:1.5px; background:var(--line); }
  .ot-row{ display:grid; grid-template-columns:96px 45px 1fr; align-items:center; padding:11px 0; }
  .ot-time{ font-size:19.5px; font-weight:600; color:var(--ink); text-align:right; font-variant-numeric:tabular-nums; }
  .ot-dot{ justify-self:center; width:15px; height:15px; border-radius:50%; background:var(--green-soft); border:2.5px solid var(--detail-bg); box-shadow:0 0 0 1.5px var(--green-soft); position:relative; z-index:1; }
  .ot-lab{ font-size:20.5px; color:var(--ink); }
  @media (max-width:420px){ .otl::before{ left:104px; } .ot-row{ grid-template-columns:84px 40px 1fr; } .ot-time{ font-size:17.5px; } .ot-lab{ font-size:19px; } }
  /* Dress theme sits lower in the card — below the order of the day, with
     generous space above it. Text only — no colour swatch icons. */
  .dress-block{ margin-top:30px; }
  /* Dress theme — always ONE single line on a phone ("Dress theme: Cream,
     White and Pastel" included): never wraps, sized down to fit. */
  .dress-theme{
    font-size:16.5px; font-style:italic; color:var(--ink-soft); letter-spacing:.01em; line-height:1.5; white-space:nowrap;
  }
  .dress-theme strong{ font-style:normal; }
  /* Timeline (BOTH celebrations): each row highlights as it slides into view */
  .detail .ot-row{ border-radius:12px; transition:background .55s ease, box-shadow .55s ease; }
  .detail .ot-row .ot-time{ transition:color .45s ease, transform .45s ease, text-shadow .45s ease; }
  .detail .ot-row .ot-dot{ transition:transform .45s ease, background .45s ease, box-shadow .45s ease; }
  .detail .ot-row .ot-lab{ transition:color .45s ease; }
  .detail .ot-row.active{
    background:linear-gradient(90deg, rgba(191,164,92,.22), rgba(191,164,92,.05) 75%, transparent);
    box-shadow:inset 0 0 0 1px rgba(191,164,92,.35);
  }
  .detail .ot-row.active .ot-time{
    color:var(--gold-deep); transform:scale(1.1); text-shadow:0 0 16px rgba(191,164,92,.6);
  }
  
  .detail .ot-row.active .ot-dot{
    background:var(--gold); transform:scale(1.3);
    box-shadow:0 0 0 5px rgba(191,164,92,.28), 0 0 18px rgba(191,164,92,.75);
  }
  .detail .ot-row.active .ot-lab{ color:var(--gold-deep); font-weight:600; }
  
  .map-btn{
    display:inline-flex; align-items:center; gap:9px; margin-top:26px;
    font-size:19px; letter-spacing:.06em; color:#FFF8E6; text-decoration:none;
    padding:15px 42px; border-radius:999px; box-shadow:var(--shadow-sm);
    background:linear-gradient(135deg, var(--gold-2) 0%, var(--gold) 55%, var(--gold-deep) 100%);
  }
  .map-btn:hover{ filter:brightness(1.07); }
  .rsvp-t{ font-size:17px; letter-spacing:.5em; text-indent:.5em; text-transform:uppercase; color:var(--heading-gold); font-weight:600; }
  
  .rsvp-line{ font-size:19.5px; color:var(--ink); margin-top:10px; line-height:1.5; }
  .rsvp-line a{ font-weight:600; text-decoration:none; border-bottom:1px dotted var(--gold-2); white-space:nowrap; }
  .rsvp-line a:hover{ text-decoration:underline; }

  /* Add to calendar */
  .cal-row{ margin-top:24px; display:flex; justify-content:center; }
  .cal-wrap{ position:relative; }
  .cal-btn{
    font-family:"Jost",sans-serif; font-size:13px; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
    background:transparent; color:var(--gold-deep); border:1px solid var(--gold-2);
    padding:11px 22px; border-radius:999px; display:inline-flex; align-items:center; gap:8px;
  }
  
  .cal-btn:hover{ background:var(--surface-2); }
  .cal-menu{
    position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); z-index:30; min-width:258px;
    background:var(--bg); border:1px solid var(--line); border-radius:16px;
    padding:8px; display:none; text-align:left;
  }
  .cal-menu.open{ display:block; }
  .cal-menu button, .cal-menu a{
    display:flex; align-items:center; gap:10px; width:100%; box-sizing:border-box; text-align:left;
    font-family:"Jost",sans-serif; font-size:14px; font-weight:500; color:var(--ink);
    background:none; border:0; border-radius:10px; padding:11px 12px; text-decoration:none;
  }
  .cal-menu button:hover, .cal-menu a:hover{ background:var(--surface-2); }
  .cal-menu .cm-ic{ font-size:16px; width:22px; text-align:center; flex:0 0 22px; }
  .cal-menu small{ display:block; font-size:12px; color:var(--muted); font-weight:400; }

  /* ================= Journey: the car, Islamabad -> Multan ================= */
  .journey-strip{ text-align:center; padding:6px 18px 0; }
  .journey-strip .j-kicker{ font-family:"Jost",sans-serif; font-size:11.5px; letter-spacing:.34em; text-indent:.34em; text-transform:uppercase; color:var(--heading-gold); font-weight:600; }
  .journey-strip .j-title{ font-size:clamp(36px,9vw,46px); color:var(--heading-gold); line-height:1.15; margin-top:6px; }
  
  .journey-strip .j-date{ font-style:italic; color:var(--ink-soft); font-size:17.5px; margin-top:4px; }
  .journey-anim{ margin:4px auto 0; max-width:560px; }
  .journey-anim svg{ width:100%; height:auto; display:block; }
  .j-city{ font-family:"Jost",sans-serif; font-size:13px; letter-spacing:.16em; fill:var(--gold-deep); font-weight:600; }
  
  .j-sub{ font-family:"Jost",sans-serif; font-size:10.5px; letter-spacing:.06em; fill:var(--muted); }

  /* ================= Footer (hers) — the invitation ends here ================= */
  .foot-orn{ display:flex; align-items:center; gap:14px; max-width:420px; margin:0 auto; }
  .foot-orn::before,.foot-orn::after{ content:""; flex:1; height:1px; background:var(--gold-2); }
  .foot-orn span{ color:var(--gold); font-size:14px; }
  .foot-qh{ font-size:64px; color:var(--heading-gold); line-height:1.1; margin-top:14px; }
  
  .foot-line{ font-style:italic; color:var(--ink-soft); font-size:19px; margin-top:6px; }
  footer{ text-align:center; padding:10px 18px 54px; }


  /* ================= Gold speaker button (hers, fixed) ================= */
  .music-btn{
    position:fixed; right:16px; bottom:16px; z-index:60;
    width:58px; height:58px; border-radius:50%; border:1px solid var(--gold-deep);
    background:radial-gradient(circle at 32% 28%, #E9D193 0%, var(--gold-2) 45%, var(--gold) 100%);
    color:#FFF8E6; display:none; place-items:center; box-shadow:var(--shadow);
  }
  .music-btn.show{ display:grid; }
  .music-btn svg{ width:26px; height:26px; }
  .music-btn .ic-off{ display:none; }
  .music-btn.off .ic-on{ display:none; }
  .music-btn.off .ic-off{ display:block; }
  .music-btn.off{ filter:grayscale(.35) brightness(.94); }
  .music-btn.playing{ animation:pulse 2.4s ease-in-out infinite; }
  @keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(154,123,45,.35), var(--shadow); } 50%{ box-shadow:0 0 0 10px rgba(154,123,45,0), var(--shadow); } }

  /* ================= Headings: flat PURE GOLD, embossed =================
     Every main heading that sits OUTSIDE the artwork images is ONE flat
     pure gold (#C9A227 via --heading-gold) — the exact same value for
     all of them. No dark/antique tone, no gradient fill, no
     background-clip text. The letters are EMBOSSED — raised/stamped
     from the page — with layered soft text-shadows: a pale cream
     highlight offset below-left and a soft deeper-gold shade offset
     above-right, while the letter fill itself stays the one flat
     pure-gold colour. (Headings inside the artwork are baked into the
     images and untouched. The scroll cue is not a header and keeps its
     darker #755812.) */
  .gold-3d{
    color:var(--heading-gold);
    text-shadow:
      -1px -1px 1px rgba(122, 92, 16, .38),
      0 -1px 2px rgba(122, 92, 16, .22),
      1px 1px 0 rgba(255, 251, 232, .95),
      1px 2px 3px rgba(255, 251, 232, .55),
      0 2px 5px rgba(146, 110, 20, .28);
  }
  /* The small kicker headers share the same flat pure-gold colour (via
     --heading-gold in their own rules) and the same emboss, scaled to
     their smaller letterspaced type. */
  .ceremony-kicker, .journey-strip .j-kicker{
    text-shadow:
      -0.5px -0.5px 0.5px rgba(122, 92, 16, .35),
      0.5px 0.5px 0 rgba(255, 251, 232, .9),
      0 1px 3px rgba(146, 110, 20, .25);
  }

  /* ================= Toast ================= */
  .toast{
    position:fixed; left:50%; bottom:22px; transform:translate(-50%, 90px); z-index:90;
    background:var(--green); color:#FDF8E7; font-family:"Jost",sans-serif; font-size:14px;
    padding:13px 22px; border-radius:999px; box-shadow:var(--shadow); transition:transform .35s ease;
    max-width:calc(100vw - 32px); text-align:center;
  }
  
  .toast.show{ transform:translate(-50%, 0); }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .toast{ transition:none; }
    .seal-pulse::before, .seal-pulse::after, .seal-glow, .tap-cue, .tap-cue .tap-dot::before, .tap-cue .tap-dot::after,
    .scroll-cue, .scroll-cue .sc-t, .scroll-cue .sc-line, .scroll-cue .chev, .tap-glow, .music-btn.playing,
    #fireflies{ display:none; }
    .cover, .env-frame{ transition-duration:.2s; }
  }