.cr-hero{position:relative!important;overflow:hidden!important;contain:paint!important;clip-path:inset(0)!important}
.cr-hero:has(.cr-hero-flames){isolation:isolate}
.cr-hero-flames{position:absolute;pointer-events:none;z-index:1;overflow:hidden!important;contain:paint!important;clip-path:inset(0)!important}
.cr-hero-flames[data-layer="front"],.cr-hero-flame-clip[data-layer="front"],.cr-hero-flames.cr-hero-flames--front,.cr-hero-flame-clip.cr-hero-flames--front{z-index:50!important}
.cr-hero-flames[data-layer="behind"],.cr-hero-flame-clip[data-layer="behind"]{z-index:1!important}
.cr-hero-flames[data-layer="under"],.cr-hero-flame-clip[data-layer="under"]{z-index:0!important}
.cr-hero-flames[hidden]{display:none!important}
.cr-hero__content{position:relative;z-index:3}
.cr-flame-editor{margin:12px 0;padding:12px;border:1px solid #51352a;border-radius:8px;background:#201a18;color:#f6e7df;font:12px/1.5 system-ui}
.cr-flame-editor h3{font:600 14px/1.4 system-ui;margin:0 0 8px;color:#ffbd8a}
.cr-flame-editor label{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:8px 0}
.cr-flame-editor input[type=number]{width:78px!important;min-width:0}
.cr-flame-editor input,.cr-flame-editor select,.cr-flame-editor button{font:inherit;color:inherit;background:#312721;border:1px solid #7d5844;border-radius:4px;padding:5px;max-width:100%;box-sizing:border-box}
.cr-flame-editor button{cursor:pointer;margin:4px 4px 4px 0}
.cr-flame-editor button:focus-visible,.cr-flame-editor input:focus-visible,.cr-flame-editor select:focus-visible{outline:2px solid #ffbd8a;outline-offset:2px}
.cr-flame-editor details{margin-top:10px;border-top:1px solid #51352a;padding-top:8px}
.cr-flame-editor summary{cursor:pointer;font-weight:600}
.cr-flame-status{display:block;min-height:2em;margin:6px 0;color:#ffccaa}
.cr-flame-transform{position:absolute;z-index:10;outline:2px dashed #ffad6d;cursor:move;touch-action:none;pointer-events:auto;background:rgba(255,155,70,.035);box-sizing:border-box}
.cr-flame-transform[hidden]{display:none!important}
.cr-flame-transform button{position:absolute;right:-7px;bottom:-7px;width:18px;height:18px;min-width:0;padding:0;background:#ffad6d;border:1px solid #271509;cursor:nwse-resize;touch-action:none}

/* Realistic CSS Cinders + Subtle Flames */
.cinder-effect{
  --cinder-brightness:.92;
  --flame-strength:.75;
  --spark-strength:.88;
  --smoke-strength:.45;
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  isolation:isolate;
  opacity:var(--cinder-brightness);
  z-index:2;
}
.cinder-effect,.cinder-effect *{box-sizing:border-box}
.cinder-effect>div{position:absolute;inset:0}

.cinder-effect__ambient{
  background:
    radial-gradient(ellipse 54% 25% at 52% 103%,var(--cinder-color-bed,rgba(235,53,9,.45)) 0%,rgba(134,30,11,.22) 45%,transparent 100%),
    radial-gradient(ellipse 17% 19% at 12% 98%,rgba(246,78,20,.35),transparent 80%),
    radial-gradient(ellipse 20% 20% at 88% 102%,rgba(242,66,9,.25),transparent 90%);
  animation:cinder-ambient-flicker 7s ease-in-out infinite alternate;
}
.cinder-effect__coals{
  bottom:calc(var(--cinder-bottom-offset, 0px) - 8px)!important;
  height:120px;
  top:auto!important;
  filter:saturate(1.3) drop-shadow(0 0 14px rgba(255,60,0,.6));
}
.cinder-coal{
  position:absolute;
  left:var(--x);
  bottom:var(--b);
  width:var(--w);
  height:calc(var(--w) * .45);
  display:block;
  transform:translateX(-50%) rotate(var(--rot)) scale(var(--cinder-coal-scale, 1.25));
  background:
    radial-gradient(ellipse at 58% 88%,var(--cinder-color-core,rgba(255,159,34,.95)),var(--cinder-color-body,rgba(230,55,15,.82)) 22%,transparent 47%),
    radial-gradient(ellipse at 18% 73%,var(--cinder-color-bed,rgba(246,88,23,.68)),transparent 40%),
    radial-gradient(ellipse at 70% 25%,#35302b 0%,#17191b 33%,#07080a 78%);
  clip-path:polygon(3% 44%,12% 22%,28% 8%,49% 15%,61% 0%,83% 15%,98% 48%,85% 79%,64% 91%,45% 100%,19% 82%);
  filter:drop-shadow(0 0 10px rgba(255,58,7,.45));
  animation:cinder-coal-pulse var(--dur) ease-in-out var(--delay) infinite alternate;
}
.cinder-coal::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:var(--heat);
  background:
    linear-gradient(112deg,transparent 27%,rgba(252,87,19,.04) 30%,var(--cinder-color-hot,rgba(255,173,51,.9)) 33%,rgba(255,66,14,.5) 35%,transparent 38%),
    linear-gradient(27deg,transparent 54%,rgba(245,77,12,.85) 56%,var(--cinder-color-core,rgba(255,140,39,.75)) 57%,transparent 61%),
    linear-gradient(-65deg,transparent 61%,rgba(255,119,22,.8) 63%,transparent 65%);
  filter:blur(.7px);
}

.cinder-effect__flames{
  opacity:var(--flame-strength);
  mix-blend-mode:screen;
  filter:blur(1.4px) drop-shadow(0 0 18px rgba(255,80,0,.55));
  bottom:calc(var(--cinder-bottom-offset, 0px) + 0px);
}
.cinder-flame{
  position:absolute;
  left:var(--x);
  bottom:calc(var(--cinder-bottom-offset, 0px) + 19px);
  width:calc(var(--w) * var(--cinder-flame-scale, 1.5));
  height:calc(var(--h) * var(--cinder-flame-scale, 1.7));
  display:block;
  opacity:calc(var(--heat) * 1.25);
  transform-origin:50% 100%;
  border-radius:78% 16% 64% 37% / 90% 18% 77% 15%;
  background:linear-gradient(0deg,
     var(--cinder-color-root,rgba(255,199,72,.95)) 0%,
     var(--cinder-color-core,rgba(255,107,18,.82)) 18%,
     var(--cinder-color-body,rgba(244,58,8,.58)) 52%,
     rgba(159,24,6,.25) 78%,
     transparent 100%);
  box-shadow:0 12px 24px rgba(244,55,8,.35);
  animation:cinder-flame-dance var(--dur) ease-in-out var(--delay) infinite alternate;
}
.cinder-flame::after{
  content:"";
  position:absolute;
  left:31%;bottom:-1%;width:39%;height:60%;
  border-radius:72% 28% 63% 21% / 100% 40% 69% 10%;
  background:linear-gradient(to top,var(--cinder-color-hot,rgba(255,224,121,.94)),var(--cinder-color-core,rgba(255,134,33,.34)) 55%,transparent 100%);
  filter:blur(3px);
}

.cinder-effect__sparks{
  opacity:var(--spark-strength);
  bottom:calc(var(--cinder-bottom-offset, 0px) + 0px);
}
.cinder-spark{
  position:absolute;
  left:var(--x);
  bottom:calc(var(--cinder-bottom-offset, 0px) + var(--start));
  width:var(--sz);
  height:var(--sz);
  border-radius:50%;
  display:block;
  background:radial-gradient(circle,var(--cinder-color-hot,#fff3c0) 0%,var(--cinder-color-core,#ffc267) 24%,var(--cinder-color-body,#ff6d20) 63%,rgba(240,53,12,0) 100%);
  box-shadow:0 0 5px 1px rgba(255,128,37,.66),0 0 15px 3px rgba(255,71,12,.18);
  opacity:0;
  animation:cinder-spark-rise var(--dur) linear var(--delay) infinite;
}
.cinder-spark:nth-child(5n){filter:blur(.8px)}
.cinder-spark:nth-child(7n){background:#ff5720;box-shadow:0 0 10px rgba(240,45,10,.6)}
.cinder-spark:nth-child(9n){width:1px;height:5px;border-radius:3px}

.cinder-effect__smoke{
  opacity:var(--smoke-strength);
  filter:blur(13px);
  bottom:calc(var(--cinder-bottom-offset, 0px) + 0px);
}
.cinder-smoke{
  position:absolute;
  left:var(--x);
  bottom:calc(var(--cinder-bottom-offset, 0px) + 22px);
  display:block;
  width:80px;height:190px;
  border-radius:50% 50% 40% 60%;
  background:radial-gradient(ellipse at 50% 67%,rgba(174,138,120,.30),rgba(108,96,89,.09) 47%,transparent 73%);
  opacity:0;
  animation:cinder-smoke-rise var(--dur) ease-out var(--delay) infinite;
}

@keyframes cinder-coal-pulse{
  0%,100%{filter:brightness(.72) drop-shadow(0 0 3px rgba(255,58,7,.12))}
  55%{filter:brightness(1.27) drop-shadow(0 0 9px rgba(255,65,12,.43))}
}
@keyframes cinder-ambient-flicker{
  0%,100%{opacity:.65;transform:scaleX(.97)}
  40%{opacity:1;transform:scaleX(1.04)}
  70%{opacity:.78;transform:scaleX(.99)}
}
@keyframes cinder-flame-dance{
  0%{transform:translateX(-50%) rotate(calc(var(--rot) - 11deg)) scaleX(.70) scaleY(.72);opacity:calc(var(--heat) * .57)}
  45%{transform:translateX(-43%) rotate(calc(var(--rot) + 7deg)) scaleX(1.08) scaleY(1.01);opacity:var(--heat)}
  100%{transform:translateX(-56%) rotate(calc(var(--rot) - 5deg)) scaleX(.78) scaleY(.87);opacity:calc(var(--heat) * .68)}
}
@keyframes cinder-spark-rise{
  0%{transform:translate3d(0,5px,0) scale(.28);opacity:0}
  8%{opacity:var(--life)}
  29%{opacity:calc(var(--life) * .77)}
  48%{transform:translate3d(calc(var(--drift) * .43),calc(var(--rise) * -.48),0) scale(.90);opacity:var(--life)}
  74%{opacity:calc(var(--life) * .39)}
  100%{transform:translate3d(var(--drift),calc(var(--rise) * -1),0) scale(.16);opacity:0}
}
@keyframes cinder-smoke-rise{
  0%{transform:translate3d(-25px,40px,0) scale(.50);opacity:0}
  25%{opacity:.36}
  65%{opacity:.16}
  100%{transform:translate3d(var(--drift),-270px,0) scale(1.8);opacity:0}
}
.cr-hero-flames--reduced-motion .cinder-effect,
.cr-hero-flames--reduced-motion .cinder-effect *{
  animation-duration:9s!important;
}
.cr-hero-flames--reduced-motion .cinder-effect__smoke{
  opacity:.15!important;
}

@media (prefers-reduced-motion: reduce) {
  .cr-hero-flames:not(.cr-hero-flames--reduced-motion) .cinder-effect,
  .cr-hero-flames:not(.cr-hero-flames--reduced-motion) .cinder-effect *,
  .cr-hero-flames:not(.cr-hero-flames--reduced-motion) .cinder-effect *::before,
  .cr-hero-flames:not(.cr-hero-flames--reduced-motion) .cinder-effect *::after {
    animation-iteration-count: infinite !important;
  }
  .cr-hero-flames:not(.cr-hero-flames--reduced-motion) .cinder-flame {
    animation: cinder-flame-dance var(--dur) ease-in-out var(--delay) infinite alternate !important;
    animation-duration: var(--dur) !important;
    animation-iteration-count: infinite !important;
  }
  .cr-hero-flames:not(.cr-hero-flames--reduced-motion) .cinder-spark {
    animation: cinder-spark-rise var(--dur) linear var(--delay) infinite !important;
    animation-duration: var(--dur) !important;
    animation-iteration-count: infinite !important;
  }
  .cr-hero-flames:not(.cr-hero-flames--reduced-motion) .cinder-coal {
    animation: cinder-coal-pulse var(--dur) ease-in-out var(--delay) infinite alternate !important;
    animation-duration: var(--dur) !important;
    animation-iteration-count: infinite !important;
  }
  .cr-hero-flames:not(.cr-hero-flames--reduced-motion) .cinder-smoke {
    animation: cinder-smoke-rise var(--dur) ease-out var(--delay) infinite !important;
    animation-duration: var(--dur) !important;
    animation-iteration-count: infinite !important;
  }
  .cr-hero-flames:not(.cr-hero-flames--reduced-motion) .cinder-effect__ambient {
    animation: cinder-ambient-flicker 3.2s ease-in-out infinite !important;
    animation-duration: 3.2s !important;
    animation-iteration-count: infinite !important;
  }
}