#intro{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;padding:22px 16px;background:radial-gradient(ellipse,#240405,#080204 65%,#000);overflow:hidden;isolation:isolate}#intro.done{display:none}#intro .intro-title,#intro .smoke,#introCandles{display:none}#intro .intro-frog{--jaw:0px;position:relative;inset:auto;width:min(66svh,76vw,540px);height:auto;aspect-ratio:928/1152;overflow:visible;border-radius:30px;box-shadow:0 0 60px #ff203b44;animation:arrival .8s both;flex-shrink:1;min-height:0;z-index:3}#intro .intro-frog>img{display:block;width:100%;height:100%;object-fit:contain;border-radius:25px;animation:none}.jaw-layer{position:absolute;inset:0;clip-path:polygon(31% 70.4%,78% 68.9%,79% 79%,37% 80%);transform:translateY(var(--jaw));will-change:transform;pointer-events:none}.jaw-layer img{width:100%;height:100%;object-fit:contain;animation:none!important;border-radius:25px}.mouth-shadow{position:absolute;left:39%;top:66.8%;width:38%;height:5.2%;background:radial-gradient(ellipse,#160303 65%,#3b1010);border-radius:45%;transform-origin:top;transform:scaleY(calc(1 + var(--open,0) * .55));opacity:var(--open,0);pointer-events:none}.hypnosis{position:absolute;left:50%;top:45%;width:min(125svh,155vw,1050px);aspect-ratio:1;transform:translate(-50%,-50%);z-index:1;pointer-events:none;opacity:.82;mask-image:radial-gradient(circle,transparent 0 17%,#000 37% 66%,transparent 73%)}.hypnosis svg{width:100%;height:100%;overflow:visible;animation:hypnotize 15s linear infinite;filter:drop-shadow(0 0 8px #fa203c);transform-origin:center}.hypnosis path{fill:none;stroke:#eb1638;stroke-width:8;stroke-linecap:round}.hypnosis .ghost{stroke:#ff7e6e;stroke-width:2;opacity:.65}.orbit-ring{position:absolute;inset:-7%;border:1px solid #ff425c77;border-radius:50%;box-shadow:0 0 30px #ff1b3544;pointer-events:none;animation:hypnotize 12s linear infinite}.orbit-ring:before{content:'';position:absolute;top:13%;left:13%;width:10px;height:10px;background:#ff4f60;border-radius:50%;box-shadow:0 0 20px #ff243e}.welcome-panel{position:relative;z-index:4;text-align:center;width:min(100%,650px)}.welcome-panel h2{font-size:clamp(21px,4vw,34px);margin:0 0 8px;letter-spacing:.04em;color:#f8efe9;text-shadow:0 0 20px #ff283e66}.welcome-panel p{font-size:13px;color:#d4bfc2;margin:8px 0;line-height:1.5}.welcome-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.welcome-actions button{background:#ec2344;color:#fff;border:1px solid #ff6277;border-radius:9px;padding:13px 22px;font-weight:bold;cursor:pointer;box-shadow:0 0 20px #f52b4133}.welcome-actions button.secondary{background:#17090d;border-color:#7e3444}.welcome-actions button:disabled{opacity:.65;cursor:default}#intro .skip{position:relative;inset:auto;align-self:center;padding:10px 18px;z-index:4;background:#13080b;border-color:#783d49;color:#e2c6cc}#intro .skip:focus-visible,.welcome-actions button:focus-visible{outline:3px solid white;outline-offset:3px}.audio-progress{height:3px;width:min(280px,80%);background:#571225;margin:14px auto 8px;border-radius:8px;overflow:hidden}.audio-progress span{height:100%;display:block;background:#ff6b7f;width:0}.welcome-status{min-height:18px}.intro-reopen{position:fixed;right:16px;bottom:16px;z-index:8;border:1px solid #a3434e;border-radius:6px;background:#120a0d;color:white;padding:12px;cursor:pointer}.spiral-paused .hypnosis svg,.spiral-paused .orbit-ring{animation-play-state:paused}body:has(#intro:not(.done)){overflow:hidden}@keyframes hypnotize{to{transform:rotate(360deg)}}@keyframes arrival{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@media(max-height:650px){#intro{gap:8px;padding:12px}#intro .intro-frog{width:min(56svh,65vw)}.welcome-panel h2{font-size:20px}.welcome-panel p{margin:5px 0}.welcome-actions button{padding:9px 15px}}@media(prefers-reduced-motion:reduce){#intro{display:flex}#intro.done{display:none}.hypnosis svg,.orbit-ring{animation:none!important}.jaw-layer{transform:none!important}.mouth-shadow{display:none}}

/* Market vortex and voice-responsive swamp energy. */
#intro{--voice:0;background:radial-gradient(ellipse at 35% 35%,#153c2466,transparent 53%),radial-gradient(ellipse at 68% 65%,#5b071a66,transparent 58%),#020605}
.hypnosis{opacity:.95;mask-image:radial-gradient(circle,transparent 0 19%,#000 32% 65%,transparent 73%)}
.hypnosis svg{animation:market-vortex 28s linear infinite;filter:none}
.spiral-candle line{stroke:currentColor;stroke-width:2}.spiral-candle rect{fill:currentColor}
.spiral-candle.bull{color:#54ff95;filter:drop-shadow(0 0 5px #17ec6e)}.spiral-candle.bear{color:#ff365e;filter:drop-shadow(0 0 5px #ff2040)}
#intro .intro-frog{box-shadow:0 0 45px #20ed6d33,0 0 75px #ff203b22}
.swamp-energy{position:absolute;left:50%;top:43%;width:min(65svh,78vw,530px);aspect-ratio:1;transform:translate(-50%,-50%);z-index:2;pointer-events:none;opacity:calc(.55 + var(--voice)*.4)}
.energy-halo{position:absolute;inset:-5%;border-radius:50%;border:2px solid #65ffab99;box-shadow:0 0 22px #27ff7755,inset 0 0 22px #27ff7733;animation:swamp-wave 4.8s ease-out infinite}
.energy-halo.second{border-color:#ff426b88;box-shadow:0 0 22px #ff204044;animation-delay:-2.4s}
.energy-spark{position:absolute;left:50%;top:50%;width:4px;height:12px;border-radius:50%;background:#7affb5;box-shadow:0 0 12px #32ff82;animation:swamp-spark 4.8s ease-out infinite;animation-delay:var(--delay)}
.energy-spark:nth-child(3n){background:#ff5073;box-shadow:0 0 12px #ff254c}
.orbit-ring{border-color:#58ff9455;box-shadow:0 0 30px #25f77a33}.orbit-ring:before{background:#73ffad;box-shadow:0 0 20px #2fff77}.orbit-ring:after{content:'';position:absolute;bottom:13%;right:13%;width:8px;height:8px;border-radius:50%;background:#ff4163;box-shadow:0 0 18px #ff2044}
.audio-progress span{background:linear-gradient(90deg,#ff4163,#6dff9f)}
.spiral-paused .swamp-energy *{animation-play-state:paused}
@keyframes market-vortex{to{transform:rotate(360deg)}}
@keyframes swamp-wave{0%{transform:scale(.72);opacity:0}20%{opacity:.65}100%{transform:scale(1.65);opacity:0}}
@keyframes swamp-spark{0%{transform:rotate(var(--angle)) translateY(-100px) scale(.3);opacity:0}25%{opacity:.85}100%{transform:rotate(var(--angle)) translateY(calc(-100px - var(--travel))) scale(.1);opacity:0}}
@media(prefers-reduced-motion:reduce){.hypnosis svg,.swamp-energy *{animation:none!important}.energy-spark{display:none}.energy-halo{opacity:.22}.swamp-energy{opacity:.55}}