.demo-effect{position:absolute;pointer-events:none;z-index:8;width:0;height:0}.demo-stage{position:absolute;bottom:65px;left:-90px;width:180px;text-align:center;font-size:11px;font-weight:700;color:#173c35;background:#fffef2e8;border-radius:6px;padding:4px}.demo-cone{position:absolute;top:-12px;left:-85px;width:170px;height:95px;background:linear-gradient(105deg,#82634b,#ba8760 48%,#69513e);clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);z-index:-1}.demo-prop{position:absolute;top:84px;left:-60px;width:120px;text-align:center;color:#70533d;font-size:10px}.demo-foam{position:absolute;bottom:12px;left:-24px;width:48px;height:var(--rise);border-radius:48% 45% 25% 30%;background:radial-gradient(circle at 30% 30%,#fff 0 3px,transparent 4px) 0 0/13px 17px,var(--foam);box-shadow:12px 6px 0 -5px var(--foam),-13px 18px 0 -6px var(--foam);animation:demo-bubble .6s infinite alternate}.demo-overflow{position:absolute;top:-6px;left:calc(-1 * var(--spread));width:calc(2 * var(--spread));height:75px;border-radius:40% 40% 35% 35%;background:radial-gradient(circle,#fff8 0 3px,transparent 4px) 0 0/14px 14px,var(--foam);opacity:.94;clip-path:polygon(40% 0,60% 0,75% 35%,100% 94%,80% 100%,59% 70%,50% 100%,32% 80%,0 100%,20% 45%)}#demoStatus{border-left:4px solid #6d9d7c;padding:12px;background:#f1f6f0;line-height:1.65}#demoPreset{max-width:100%;padding:10px}@keyframes demo-bubble{to{transform:translateY(-3px);background-position:3px -7px}}@media(prefers-reduced-motion:reduce){.demo-foam{animation:none}}
.demo-effect:has(.demo-cone) .demo-stage{bottom:calc(var(--rise) + 25px);z-index:2;color:#75404a;background:#fff9f5}.demo-effect:has(.demo-cone){z-index:9}