:root{
    --brand:#168FC8;   /* sampled from the logo */
    --bg:#ffffff;
  }

  /* ---- Full-screen loader overlay ----
     Hides automatically when the page has fully loaded (window 'load' event).
     You can also hide it manually at any time with:
       DalaliaLoader.hide();
  */
  #dalalia-loader{
    position:fixed; inset:0; z-index:9999;
    display:flex; align-items:center; justify-content:center;
    background:var(--bg);
    transition:opacity .45s ease, visibility .45s ease;
  }
  #dalalia-loader.is-done{ opacity:0; visibility:hidden; }

  /* the 2x2 window grid, breathing gently as a whole */
  .loader-grid{
    display:grid;
    grid-template-columns:repeat(2, 26px);
    grid-template-rows:repeat(2, 26px);
    gap:7px;
    animation:breathe 1.8s ease-in-out infinite;
  }
  @keyframes breathe{
    0%,100%{ transform:scale(1); }
    50%    { transform:scale(1.06); }
  }

  /* each pane pulses in a clockwise wave: TL -> TR -> BR -> BL */
  .pane{
    background:var(--brand);
    border-radius:3px;
    animation:pane 1.8s ease-in-out infinite;
  }
  .pane:nth-child(1){ animation-delay:0s;    } /* top-left */
  .pane:nth-child(2){ animation-delay:.18s;  } /* top-right */
  .pane:nth-child(4){ animation-delay:.36s;  } /* bottom-right */
  .pane:nth-child(3){ animation-delay:.54s;  } /* bottom-left */
  @keyframes pane{
    0%,100%{ transform:scale(.55); opacity:.3; }
    35%    { transform:scale(1.08); opacity:1; }
    50%    { transform:scale(1);    opacity:1; }
  }

  @media (prefers-reduced-motion: reduce){
    .loader-grid,.pane{ animation:none; opacity:1; transform:none; }
  }