/* Diwali 2026 ribbon + fireworks canvas (see diwali.js). */
#dw-ribbon{
  position:relative;z-index:60;overflow:hidden;
  background:radial-gradient(120% 180% at 50% 0%,#5a1a00 0%,#2a0a12 55%,#14060c 100%);
  color:#FFF3D6;font:600 14px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  border-bottom:1px solid rgba(255,196,80,.35);
  box-shadow:inset 0 -12px 24px -18px rgba(255,170,40,.6);
}
#dw-ribbon .dw-lights{display:flex;justify-content:space-between;padding:0 8px;height:12px;
  background:linear-gradient(#0000 5px,rgba(255,220,150,.25) 5px 6px,#0000 6px)}
#dw-ribbon .dw-lights i{
  width:7px;height:9px;margin-top:4px;border-radius:50% 50% 45% 45%;
  background:#FFC84A;box-shadow:0 0 8px 2px rgba(255,190,60,.8);
  animation:dw-twinkle 1.26s ease-in-out infinite alternate;animation-delay:var(--d);
}
#dw-ribbon .dw-lights i:nth-child(3n+1){background:#FF5E7E;box-shadow:0 0 8px 2px rgba(255,80,120,.75)}
#dw-ribbon .dw-lights i:nth-child(3n+2){background:#7CF5FF;box-shadow:0 0 8px 2px rgba(110,230,255,.7)}
#dw-ribbon .dw-row{display:flex;align-items:center;justify-content:center;gap:12px;
  padding:6px 44px 9px;text-align:center}
#dw-ribbon strong{
  background:linear-gradient(90deg,#FFD54A,#FF9A3D,#FFE9A8,#FFD54A);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-size:15px;letter-spacing:.02em;animation:dw-shine 3s linear infinite;
}
#dw-ribbon .dw-text span{opacity:.92;font-weight:500}
/* Clay diya with a flickering flame. */
#dw-ribbon .dw-diya{position:relative;flex:0 0 auto;width:26px;height:20px}
#dw-ribbon .dw-diya::before{content:"";position:absolute;left:1px;right:1px;bottom:0;height:9px;
  border-radius:0 0 14px 14px;background:linear-gradient(#E0742A,#9C3A12);
  box-shadow:0 0 10px rgba(255,140,40,.55)}
#dw-ribbon .dw-diya b{position:absolute;left:50%;bottom:7px;width:8px;height:13px;margin-left:-4px;
  border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;
  background:radial-gradient(circle at 50% 70%,#fff 0 18%,#FFE066 30%,#FF8A00 70%,#0000 72%);
  filter:drop-shadow(0 0 6px #FFB020);transform-origin:50% 100%;
  animation:dw-flame .9s ease-in-out infinite alternate}
#dw-ribbon .dw-x{position:absolute;right:8px;top:50%;margin-top:-3px;width:28px;height:28px;
  border:0;border-radius:50%;background:rgba(255,255,255,.08);color:#FFE3B0;font-size:18px;
  line-height:28px;cursor:pointer}
#dw-ribbon .dw-x:hover{background:rgba(255,255,255,.18)}
@media (max-width:560px){
  #dw-ribbon{font-size:12.5px}
  #dw-ribbon .dw-text span{display:block;font-size:11.5px}
  #dw-ribbon .dw-row{gap:8px;padding:5px 38px 8px 10px}
  #dw-ribbon .dw-diya:first-child{display:none}
}
#dw-fw{position:fixed;inset:0;width:100vw;height:100vh;z-index:2147483000;pointer-events:none;
  transition:opacity .6s ease}
#dw-fw.dw-gone{opacity:0}
/* Light string fixed across the top of every page. */
#dw-garland{position:fixed;left:0;right:0;top:0;height:26px;z-index:2147482000;pointer-events:none;overflow:hidden}
#dw-garland svg{position:absolute;left:0;top:0;display:block}
#dw-garland i{position:absolute;top:10px;width:8px;height:11px;border-radius:50% 50% 45% 45%;
  background:var(--c);box-shadow:0 0 6px 2px var(--c),0 0 16px 4px color-mix(in srgb,var(--c) 45%,transparent);
  animation:dw-twinkle 1.6s ease-in-out infinite alternate;animation-delay:var(--d)}
#dw-garland i::before{content:"";position:absolute;left:2px;top:-3px;width:4px;height:4px;border-radius:1px;background:#3a2a18}
/* Sound on/off for the fireworks. */
#dw-mute{position:fixed;left:14px;bottom:20px;z-index:2147483001;width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(255,196,80,.45);background:rgba(30,10,8,.82);color:#fff;font-size:18px;line-height:38px;
  text-align:center;cursor:pointer;box-shadow:0 0 14px rgba(255,170,40,.45);padding:0}
#dw-mute:hover{background:rgba(70,25,10,.9)}
@media (max-width:760px){#dw-mute{bottom:92px;left:10px;width:36px;height:36px;line-height:34px;font-size:16px}}
/* Rising diya embers. */
#dw-embers{position:fixed;inset:0;width:100vw;height:100vh;z-index:2147481000;pointer-events:none;mix-blend-mode:screen}
html[data-theme="light"] #dw-embers{mix-blend-mode:normal;opacity:.75}
@keyframes dw-twinkle{from{opacity:.35;transform:scale(.85)}to{opacity:1;transform:scale(1.05)}}
@keyframes dw-shine{to{background-position:-200% 0}}
@keyframes dw-flame{from{transform:scaleY(.9) rotate(-4deg)}to{transform:scaleY(1.12) rotate(4deg)}}
/* The site-wide reduce-motion rule cuts animations to 0.01ms; this festive banner is
   one day only and gentle, so it keeps its own timing. */
@media (prefers-reduced-motion:reduce){
  html #dw-ribbon .dw-lights i{animation-duration:1.26s !important;animation-iteration-count:infinite !important}
  html #dw-garland i{animation-duration:1.6s !important;animation-iteration-count:infinite !important}
  html #dw-ribbon strong{animation-duration:3s !important;animation-iteration-count:infinite !important}
  html #dw-ribbon .dw-diya b{animation-duration:.9s !important;animation-iteration-count:infinite !important}
}