@scope (.kkh-lab) {
.layout{position:relative}
.summon{position:absolute;z-index:1;display:block;inline-size:var(--summon-size);block-size:var(--summon-size);transform:translate(-50%,-50%);border-radius:50%;isolation:isolate;cursor:pointer}
.summon[hidden]{display:none}
.summon{border-radius:0;container-type:inline-size;overflow:hidden}
.summon .summon-floor{position:absolute;display:block;left:5%;top:16%;width:90%;height:90%;transform:perspective(calc(var(--summon-size) * 2.3)) rotateX(50deg);overflow:hidden}
.summon-stroke{fill:none;stroke:#a3b18a;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.summon-ring{stroke-width:2;stroke:url(#summon-depth)}
.summon-down{stroke:#819672}
.summon-dial{stroke:#72866a;opacity:0}
.summon-core,.summon-nodes{fill:#c4d9a0;opacity:0}
.summon-wave{stroke:#b8c99a;stroke-width:1;opacity:0;transform-origin:center}
.summon-mark{position:absolute;inset:12% 0 auto;text-align:center;line-height:1.12;opacity:0;color:#d8f0c8;font:800 19cqi/1.12 "Cascadia Mono",Consolas,monospace;letter-spacing:-.08em;white-space:nowrap;text-shadow:0 .06em #64816a,0 .12em #314c39,0 .22em .33em #07130c,0 0 .48em #98d8a477}
.summon-beam{position:absolute;inset:14% 22% 37%;opacity:0;background:radial-gradient(ellipse at 50% 100%,#b6ecc387,transparent 68%);clip-path:polygon(25% 0,75% 0,100% 100%,0 100%);transform-origin:bottom}
.summon-pool{opacity:0}
.summon[data-state=playing] .summon-core{animation:summon-energy .5s ease both}
.summon[data-state=playing] .summon-ring{animation:summon-draw 1s .5s linear both}
.summon[data-state=playing] .summon-dial{animation:summon-dial-in .45s 1.12s ease both}
.summon[data-state=playing] .summon-up{animation:summon-draw 1s 1.5s linear both}
.summon[data-state=playing] .summon-down{animation:summon-draw 1s 2.5s linear both}
.summon[data-state=playing] .summon-nodes{animation:summon-charge .5s 3.5s ease both}
.summon[data-state=playing] .summon-pool{animation:summon-pool 1.5s 3.5s ease both}
.summon[data-state=playing] .summon-beam{animation:summon-beam 1.5s 3.5s ease both}
.summon[data-state=playing] .summon-wave{animation:summon-radiate .75s 3.5s ease-out both}
.summon[data-state=playing] .summon-mark{animation:summon-arrive 1s 4s cubic-bezier(.15,.55,.28,1) both}
.summon[data-state=complete] .summon-stroke{stroke-dashoffset:0}
.summon[data-state=complete] .summon-dial{opacity:.75}
.summon[data-state=complete] .summon-nodes{opacity:.65}
.summon[data-state=complete] .summon-pool{opacity:.7}
.summon[data-state=complete] .summon-beam{opacity:.25}
.summon[data-state=complete] .summon-mark{opacity:1;animation:summon-pulse 3.6s ease-in-out infinite}
.summon.summon-paused *{animation-play-state:paused!important}
@keyframes summon-energy{from{opacity:0}to{opacity:.8}}
@keyframes summon-draw{to{stroke-dashoffset:0}}
@keyframes summon-dial-in{to{opacity:.75}}
@keyframes summon-charge{0%{opacity:0}65%{opacity:1}100%{opacity:.65}}
@keyframes summon-arrive{0%{opacity:0;transform:translateY(38cqi) scale(.74);clip-path:inset(0 0 100% 0)}45%{opacity:.92;clip-path:inset(0 0 0 0)}100%{opacity:1;transform:translateY(0) scale(1);clip-path:inset(0 0 0 0)}}
@keyframes summon-beam{0%{opacity:0;transform:scaleY(.08)}35%{opacity:.95;transform:scaleY(1)}100%{opacity:.25;transform:scaleY(1)}}
@keyframes summon-pool{0%{opacity:0}45%{opacity:1}100%{opacity:.7}}
@keyframes summon-radiate{from{opacity:.55;transform:scale(.35)}to{opacity:0;transform:scale(1.9)}}
@keyframes summon-pulse{50%{opacity:.65}}
@media(prefers-reduced-motion:reduce){.summon *{animation:none!important}}

}