.potion-studio{--potion:#9c73cf;--liquid:#bce8df}.potion-hero{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:40px 50px;margin-bottom:28px;border-radius:28px;background:radial-gradient(ellipse at 75% 60%,#65527c99,transparent 50%),#28223b;color:#f8f0df;overflow:hidden}.potion-hero small{font-size:11px;letter-spacing:.16em;color:#d9bd88}.potion-hero h2{font:clamp(25px,4vw,40px)/1.4 Georgia,serif;margin:18px 0}.potion-hero p{color:#d2c3da;line-height:1.9;font-size:14px}.potion-hero button{background:#f4e7d2!important;color:#3e3151!important;border:0!important}.potion-bottle{width:160px;height:210px;position:relative;flex-shrink:0;filter:drop-shadow(0 0 25px #c8a5ee33);animation:potion-hover 5s ease-in-out infinite}.potion-neck{position:absolute;left:60px;top:0;width:40px;height:45px;background:linear-gradient(90deg,#ffffff18,#ffffff60,#ffffff16);border:2px solid #ead4f388;border-radius:8px}.potion-neck:before{content:"";position:absolute;left:-5px;right:-5px;top:-4px;height:12px;border-radius:5px;background:#bea57e;border:2px solid #e4c6a0}.potion-glass{position:absolute;top:35px;width:160px;height:160px;border:2px solid #e4cff5aa;border-radius:42% 42% 44% 44%;background:linear-gradient(120deg,#ffffff33,transparent 45%,#ffffff15);overflow:hidden;box-shadow:inset 8px 0 20px #ffffff20,inset -5px 0 15px #c9acec55}.potion-liquid{position:absolute;inset:55px -30px -15px;background:linear-gradient(#b6e9db,#9872c2);border-radius:40%;animation:potion-swish 5s ease-in-out infinite;box-shadow:0 -8px 20px #d4b4ff55}.potion-glass>span{position:absolute;inset:45px 0 0;display:grid;place-items:center;color:#fff8df;font-size:45px;text-shadow:0 0 22px #fff}.potion-glass>b{position:absolute;bottom:25px;left:35px;width:8px;height:8px;border:1px solid #ffffffaa;border-radius:50%;animation:potion-bubble 3s infinite}.potion-glass>b:nth-of-type(2){left:90px;animation-delay:1s;width:12px;height:12px}.potion-glass>b:nth-of-type(3){left:65px;animation-delay:2s}.potion-shadow{position:absolute;width:120px;height:12px;border-radius:50%;bottom:0;left:20px;background:#110b2270;filter:blur(5px)}.potion-design-grid{display:grid;grid-template-columns:minmax(230px,1fr) minmax(0,2fr);grid-gap:24px;gap:24px;align-items:start}.potion-preview{position:-webkit-sticky;position:sticky;top:100px}.potion-savebar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding-top:20px}.potion-savebar span{flex:1 1;font-size:12px;color:#82758c}.potion-code textarea{font:13px/1.8 monospace;width:100%;-moz-tab-size:2;tab-size:2}.potion-modal-backdrop{position:fixed;inset:0;z-index:200;background:#1e172b99;-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);display:grid;place-items:center;padding:20px}.potion-modal{background:#fffcf8;color:#30273d;border:1px solid #e8d9ef;border-radius:26px;width:min(600px,100%);max-height:90dvh;overflow:auto;padding:30px;box-shadow:0 30px 100px #160c3340;animation:potion-appear .35s ease both}.potion-modal form{display:grid;grid-gap:16px;gap:16px}.potion-modal label{display:grid;grid-gap:7px;gap:7px}.potion-modal input,.potion-modal select,.potion-modal textarea{padding:12px;border:1px solid #e1d7e5;border-radius:10px;width:100%;font:inherit;background:#fff}.potion-modal .eco-checkbox{display:flex;align-items:center}.potion-modal .eco-checkbox input{width:auto}.potion-mixing,.potion-success{text-align:center;padding:35px 10px}.potion-mixing .potion-bottle{margin:0 auto 22px;animation:potion-hover 1s ease-in-out infinite}.potion-mixing .potion-liquid{animation-duration:1s}.potion-success>span{font-size:80px;color:#9274b5;display:block;animation:potion-appear .6s ease}.component-return{background:#efe8f8;color:#4c3769;flex-wrap:wrap}.component-return>span{font-size:12px}.component-return>button{margin-left:auto}@keyframes potion-hover{50%{transform:translateY(-10px) rotate(3deg)}}@keyframes potion-swish{50%{transform:rotate(10deg) translateY(-5px)}}@keyframes potion-bubble{0%{transform:translateY(0);opacity:0}20%{opacity:.8}to{transform:translateY(-110px);opacity:0}}@keyframes potion-appear{0%{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}@media(max-width:800px){.potion-hero{padding:28px}.potion-design-grid{grid-template-columns:1fr}.potion-preview{position:static}.potion-hero>.potion-bottle{transform:scale(.75);margin-right:-25px}.potion-hero{gap:10px}.potion-modal{padding:22px}}@media(prefers-reduced-motion:reduce){.potion-studio *{animation:none!important;transition:none!important}}