/* Decorative sparkle layer v2 — denser glitter matching the selected reference. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
}

.particle-field {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 39;
}

.spark-particle {
  --size: 8px;
  --duration: 10s;
  --delay: 0s;
  --drift: 30px;
  position: absolute;
  left: var(--left);
  bottom: -32px;
  width: var(--size);
  height: var(--size);
  opacity: 0;
  color: var(--color, #ffd257);
  filter: drop-shadow(0 0 4px currentColor);
  animation: particle-rise var(--duration) linear var(--delay) infinite;
  will-change: transform, opacity;
}

.spark-particle::before,
.spark-particle::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  border-radius: 999px;
  background: currentColor;
}

.spark-particle::before { width: 100%; height: 24%; }
.spark-particle::after { width: 24%; height: 100%; }
.spark-particle.round::before { width: 58%; height: 58%; box-shadow: 0 0 10px currentColor; }
.spark-particle.round::after { display: none; }
.spark-particle.diamond {
  transform: rotate(45deg);
  border-radius: 2px;
  background: currentColor;
  box-shadow: 0 0 7px currentColor, 0 0 14px #fff;
}
.spark-particle.diamond::before,
.spark-particle.diamond::after { display: none; }
.particle-field.paused .spark-particle{animation-play-state:paused}

body::before {
  opacity: .82;
  background:
    radial-gradient(circle at 8% 18%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 15% 42%, #ffd866 0 1.5px, transparent 3px),
    radial-gradient(circle at 22% 72%, #ffd65c 0 2px, transparent 3px),
    radial-gradient(circle at 43% 14%, #fff 0 1.5px, transparent 3px),
    radial-gradient(circle at 52% 62%, #fff 0 2px, transparent 3.5px),
    radial-gradient(circle at 67% 34%, #ffb5cf 0 2px, transparent 3px),
    radial-gradient(circle at 84% 12%, #fff4a8 0 2px, transparent 3px),
    radial-gradient(circle at 91% 43%, #ffd5ec 0 1.5px, transparent 3px),
    radial-gradient(circle at 94% 68%, #fff 0 1.5px, transparent 3px);
  background-size:100% 100%;
  opacity: .55;
}

body::after {
  display:none;
}

.canvas::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(circle at 13% 9%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 31% 23%, #ffd85c 0 1.5px, transparent 3px),
    radial-gradient(circle at 61% 8%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 87% 27%, #ff91b7 0 1.5px, transparent 3px),
    radial-gradient(circle at 76% 82%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 19% 88%, #ffe36d 0 1.5px, transparent 3px);
  opacity:.62;
}

.canvas::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(circle at 10% 20%,#fff 0 1.5px,transparent 3px),
    radial-gradient(circle at 24% 49%,#ffe16b 0 1.5px,transparent 3px),
    radial-gradient(circle at 38% 31%,#ff9fc9 0 1.5px,transparent 3px),
    radial-gradient(circle at 55% 73%,#fff 0 2px,transparent 4px),
    radial-gradient(circle at 69% 22%,#ffe16b 0 1.5px,transparent 3px),
    radial-gradient(circle at 82% 57%,#ffc5e2 0 2px,transparent 4px),
    radial-gradient(circle at 94% 36%,#fff 0 1.5px,transparent 3px);
  display:none;
}

.head:not(:first-child),.session{position:relative;overflow:hidden;isolation:isolate}
.head:not(:first-child)::after,.session::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 8% 35%,#fff 0 1px,transparent 2px),
    radial-gradient(circle at 24% 72%,#fff8 0 1px,transparent 2px),
    radial-gradient(circle at 48% 28%,#fff 0 1.4px,transparent 2.6px),
    radial-gradient(circle at 68% 62%,#fff9 0 1px,transparent 2px),
    radial-gradient(circle at 91% 35%,#fff 0 1.4px,transparent 2.6px),
    linear-gradient(105deg,transparent 30%,#fff8 48%,transparent 65%);
  background-size:100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,220% 100%;
  opacity:.68;
}

.logo {
  animation:none;
}

.workbar button,
.tool-buttons button,
.template button,
.session-actions button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.workbar button::after,
.tool-buttons button::after,
.template button::after,
.session-actions button::after {
  content: "";
  position: absolute;
  inset: -40% auto -40% -55%;
  width: 32%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #fff9, transparent);
  transform: skewX(-20deg);
  transition: left .55s ease;
}

.workbar button:hover::after,
.tool-buttons button:hover::after,
.template button:hover::after,
.session-actions button:hover::after {
  left: 125%;
}

.sticker-option:hover {
  filter: drop-shadow(0 0 7px #ffd45f) drop-shadow(0 0 3px #ff91b7);
}

.title::before,
.title::after {
  content: "✦";
  color: #f3b739;
  font-size: 13px;
  text-shadow: 0 0 8px #fff, 0 0 10px #ffc95c;
  animation: star-pop 3.4s ease-in-out infinite;
}

.title::after {
  animation-delay: 1.1s;
}

@keyframes ambient-twinkle {
  from { opacity: .25; transform: scale(.99); }
  to { opacity: .7; transform: scale(1.015); }
}

@keyframes canvas-sparkle {
  from { opacity: .25; }
  to { opacity: .85; }
}

@keyframes glitter-shift {
  from { opacity:.28;transform:translate3d(-3px,2px,0) scale(.995); }
  to { opacity:.95;transform:translate3d(5px,-3px,0) scale(1.008); }
}

@keyframes bar-glitter {
  0% { background-position:0 0,0 0,0 0,0 0,0 0,180% 0;opacity:.45; }
  50% { opacity:1; }
  100% { background-position:0 0,0 0,0 0,0 0,0 0,-120% 0;opacity:.55; }
}

@keyframes page-glimmer {
  0%, 62% { transform: translateX(-110%); }
  82%, 100% { transform: translateX(110%); }
}

@keyframes logo-glow {
  from { filter: drop-shadow(0 0 0 transparent); }
  to { filter: drop-shadow(0 0 7px #ffd55f); }
}

@keyframes star-pop {
  0%, 100% { opacity: .35; transform: scale(.75) rotate(0); }
  50% { opacity: 1; transform: scale(1.25) rotate(25deg); }
}

@keyframes particle-rise {
  0% { opacity: 0; transform: translate3d(0, 25px, 0) scale(.35) rotate(0deg); }
  12% { opacity: .8; }
  48% { transform: translate3d(var(--drift), -48vh, 0) scale(1) rotate(150deg); }
  82% { opacity: .65; }
  100% { opacity: 0; transform: translate3d(calc(var(--drift) * -.55), -108vh, 0) scale(.55) rotate(320deg); }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after,
  .canvas::before,
  .canvas::after,
  .logo,
  .title::before,
  .title::after {
    animation: none !important;
  }
  .head:not(:first-child)::after,.session::after{animation:none!important}
  .particle-field { display: none; }
}

@media (max-width: 650px) {
  body::before { opacity: .35; }
  body::after { display: none; }
  .spark-particle:nth-child(n+11) { display: none; }
}