
#kg{position:fixed;inset:0;z-index:12;pointer-events:none;visibility:hidden}
#kg.on{visibility:visible}
#kg .kg-dim{position:absolute;inset:0;pointer-events:auto;opacity:0;transition:opacity .7s ease;cursor:default;
 background:radial-gradient(circle at calc(1rem + 1.7rem) calc(100% - env(safe-area-inset-bottom,0px) - 2.25rem),rgba(5,7,11,0) 0,rgba(5,7,11,0) 2.4rem,rgba(5,7,11,.72) 7rem,rgba(5,7,11,.82) 100%)}
#kg.on .kg-dim{opacity:1}
#kg .kg-girl{position:absolute;left:.4rem;bottom:calc(env(safe-area-inset-bottom,0px) + 3.9rem);width:min(46vw,250px);pointer-events:none;
 transform:translateY(40px);opacity:0;transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .7s ease;filter:drop-shadow(0 8px 24px rgba(0,0,0,.6))}
#kg.in .kg-girl{transform:none;opacity:1}
#kg.out .kg-girl{transform:translateY(24px);opacity:0;transition:transform .7s ease,opacity .6s ease}
#kg.out .kg-dim{opacity:0;transition:opacity .7s ease}
#kg .kg-fig{position:relative;display:block;width:100%;aspect-ratio:560/613;animation:kgfloat 4.2s ease-in-out infinite}
#kg .kg-fig{-webkit-mask-image:linear-gradient(#000 82%,transparent);mask-image:linear-gradient(#000 82%,transparent)}
#kg .kg-fig img{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none}
#kg .kg-fig .shut{opacity:0}
#kg.shut .kg-fig .shut{opacity:1}
#kg.blink .kg-fig .shut{opacity:1}
@keyframes kgfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
#kg .kg-bub{position:absolute;left:calc(min(46vw,250px) + .8rem);bottom:calc(env(safe-area-inset-bottom,0px) + 3.9rem + min(46vw,250px)*.5);width:min(calc(54vw - 1.6rem),21rem);
 padding:.9rem 1rem 1rem;background:rgba(10,12,18,.9);border:1px solid rgba(224,52,63,.55);box-shadow:0 0 28px rgba(179,32,44,.28);
 color:var(--paper,#efe6d6);opacity:0;transform:translateY(8px);transition:opacity .5s ease .5s,transform .5s ease .5s;pointer-events:auto;
 clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}
#kg.in .kg-bub{opacity:1;transform:none}
#kg.out .kg-bub{opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease}
#kg .kg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#kg .kg-nm{display:block;font:400 .6rem var(--sans,system-ui);letter-spacing:.32em;text-transform:uppercase;color:var(--red-hi,#e0343f);margin-bottom:.5rem}
#kg .kg-tx{font:300 .95rem/1.55 var(--serif,Georgia,serif);min-height:4.6em}
#kg .kg-tx b{font-weight:500;color:var(--red-hi,#e0343f)}
#kg .kg-tx.type::after{content:"";display:inline-block;width:.45ch;height:1em;margin-left:2px;vertical-align:-.12em;background:var(--red-hi,#e0343f);animation:kgcur .8s steps(1) infinite}
@keyframes kgcur{50%{opacity:0}}
#kg .kg-later{margin-top:.5rem;min-height:44px;padding:0 .2rem;background:none;border:0;color:rgba(239,230,214,.6);font:400 .64rem var(--sans,system-ui);letter-spacing:.24em;text-transform:uppercase;cursor:pointer;pointer-events:auto}
#kg .kg-later:hover,#kg .kg-later:focus-visible{color:var(--paper,#efe6d6)}
#kg .kg-tap{position:absolute;left:calc(1rem + 3.4rem + .7rem);bottom:calc(env(safe-area-inset-bottom,0px) + 1rem);height:2.5rem;display:flex;align-items:center;gap:.5rem;
 font:400 .66rem var(--sans,system-ui);letter-spacing:.3em;text-transform:uppercase;color:var(--red-hi,#e0343f);text-shadow:0 1px 12px #000;opacity:0;transition:opacity .5s ease 1s}
#kg.in .kg-tap{opacity:1}
#kg.out .kg-tap,#kg.shut .kg-tap{opacity:0;transition:opacity .3s}
#kg .kg-tap i{font-style:normal;display:inline-block;animation:kgnudge 1.1s ease-in-out infinite}
@keyframes kgnudge{0%,100%{transform:translateX(0)}50%{transform:translateX(-5px)}}
body.kg-on #snd::after{content:"";position:absolute;inset:-6px;border:1px solid rgba(224,52,63,.85);border-radius:999px;pointer-events:none;animation:kgring 1.6s ease-out infinite}
@keyframes kgring{0%{transform:scale(.8);opacity:.9}100%{transform:scale(1.35);opacity:0}}
body.kg-on #snd{filter:drop-shadow(0 0 10px rgba(224,52,63,.7))}
@media (min-width:700px){#kg .kg-bub{width:21rem}#kg .kg-tx{font-size:1.05rem}}
@media (prefers-reduced-motion:reduce){#kg .kg-fig{animation:none}#kg .kg-girl,#kg .kg-bub,#kg .kg-dim{transition:opacity .4s ease!important;transform:none!important}
 body.kg-on #snd::after,#kg .kg-tap i{animation:none}#kg .kg-tx.type::after{animation:none}}
