
#dstudio{ position:absolute; inset:0; z-index:95; overflow:hidden; touch-action:none; background:#1c1830;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
#dstudio[hidden]{ display:none; }
#dstudio .dst-layer{ position:absolute; inset:0; }
#dstudio .dst-bg{ z-index:1; }
#dstudio .dst-wall{ position:absolute; left:0; right:0; top:0; }
#dstudio .dst-floor{ position:absolute; left:0; right:0; bottom:0; overflow:hidden; perspective:640px; box-shadow:inset 0 30px 40px -20px rgba(0,0,0,.35); }
#dstudio .dst-pat{ position:absolute; left:-100%; right:-100%; top:0; height:300%; transform-origin:50% 0; transform:rotateX(64deg); }
#dstudio .dst-skirting{ position:absolute; left:0; right:0; height:14px; margin-top:-7px; background:linear-gradient(#3b2a22,#5a4032); box-shadow:0 3px 6px rgba(0,0,0,.25); }
#dstudio .dst-rug{ position:absolute; border-radius:50%; }
#dstudio .dst-deco{ z-index:2; pointer-events:none; }
#dstudio .dst-piece{ position:absolute; }
#dstudio .dst-piece img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 6px 6px rgba(0,0,0,.28)); }
#dstudio .dst-piece img.dst-rec{ inset:auto; left:13%; top:12%; width:74%; height:59%; filter:none; }
#dstudio .dst-stars{ position:absolute; left:12%; width:76%; height:18.5%; top:74.25%; display:flex; justify-content:space-between; align-items:center; pointer-events:none; }
#dstudio .dst-stars svg{ height:100%; width:auto; display:block; overflow:visible; }
#dstudio .dst-stagewrap{ z-index:5; pointer-events:none; }
#dstudio .dst-stage{ position:absolute; border:0; background:transparent; pointer-events:none; }
#dstudio .dst-shadow{ position:absolute; width:230px; height:36px; margin-left:-115px; border-radius:50%; background:radial-gradient(rgba(0,0,0,.32),rgba(0,0,0,0) 70%); }
#dstudio .dst-boom{ z-index:4; pointer-events:none; }                      
#dstudio .dst-stand{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
#dstudio .dst-waves{ position:absolute; width:60px; height:60px; z-index:6; }
#dstudio .dst-waves i{ position:absolute; left:0; top:0; width:60px; height:60px; border:4px solid rgba(255,230,120,.9); border-radius:50%; opacity:0; box-sizing:border-box; }
#dstudio .dst-promptlayer{ z-index:9; pointer-events:none; }
#dstudio .dst-prompt{ position:absolute; pointer-events:auto; z-index:1; }   
#dstudio .al-roman-btn{ pointer-events:auto; }
#dstudio .dst-card{ position:absolute; inset:0; background:#fff; box-shadow:0 6px 0 rgba(0,0,0,.18); }
#dstudio .dst-pic{ position:absolute; display:flex; align-items:center; justify-content:center; }
#dstudio .dst-pic img{ max-width:100%; max-height:100%; object-fit:contain; }
#dstudio .dst-digit{ font-family:var(--font-read); font-weight:800; font-size:120px; line-height:1; color:#1b3a63; }
#dstudio .dst-blob{ width:70%; height:70%; border-radius:48% 52% 45% 55% / 55% 45% 55% 45%; box-shadow:inset 0 -10px 0 rgba(0,0,0,.14), 0 4px 0 rgba(0,0,0,.12); }
#dstudio .dst-leaf{ width:72%; height:84%; background:#fff; border-radius:14px; box-shadow:0 4px 0 rgba(0,0,0,.14); overflow:hidden; display:flex; flex-direction:column; }
#dstudio .dst-leaf-band{ height:30%; background-size:cover; background-position:center; }
#dstudio .dst-leaf-text{ flex:1; display:flex; align-items:center; justify-content:center; font-family:var(--font-read); font-weight:800; font-size:54px; color:#1b3a63; }
#dstudio .dst-pill{ position:absolute; left:50%; top:calc(100% + 14px); transform:translateX(-50%); font-family:var(--font-read); font-weight:700;
  color:#233; background:#fff; border-radius:40px; padding:8px 26px; box-shadow:0 4px 0 rgba(0,0,0,.18); white-space:nowrap; }
#dstudio .dst-btnlayer{ z-index:10; pointer-events:none; }
#dstudio .dst-btn{ position:absolute; pointer-events:auto; touch-action:none; border-radius:50%; }
#dstudio .dst-face{ position:absolute; inset:0; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:transform .08s;
  background:radial-gradient(circle at 36% 30%,#ff9a9a 0,#ea2f38 45%,#a1111b 100%); box-shadow:0 8px 0 rgba(0,0,0,.28), inset 0 0 0 6px #fff; }
#dstudio .dst-btn.down .dst-face{ transform:scale(.93); }
#dstudio .dst-face{ transition:transform .08s, filter .25s, opacity .25s, background .25s, box-shadow .25s; }
#dstudio .dst-face img{ transition:opacity .25s; }
#dstudio .dst-btn.shut.look-a .dst-face{ filter:grayscale(1) brightness(1.08); opacity:.55; }                       
#dstudio .dst-btn.shut.look-b .dst-face{ filter:grayscale(1) brightness(1.08); opacity:.6; }                        
#dstudio .dst-btn .dst-lock{ position:absolute; right:-4%; bottom:-4%; width:38%; height:38%; opacity:0; transform:scale(.4); transition:opacity .25s, transform .25s; pointer-events:none; }
#dstudio .dst-btn.shut.look-b .dst-lock{ opacity:1; transform:scale(1); }
#dstudio .dst-btn.shut.look-c .dst-face{ transform:scale(.9); background:radial-gradient(circle at 36% 30%,#f3d6d8 0,#d9a9ad 60%,#b98a8e 100%); box-shadow:0 2px 0 rgba(0,0,0,.18), inset 0 0 0 6px #eee; } 
#dstudio .dst-btn.shut.look-c .dst-face img{ opacity:.45; }
#dstudio .dst-btn.shut.look-d .dst-face{ filter:saturate(.35) brightness(.9); }                                    
#dstudio .dst-btn .dst-wait{ position:absolute; inset:-14px; border-radius:50%; border:7px dotted rgba(255,255,255,.9); opacity:0; transition:opacity .25s; pointer-events:none; }
#dstudio .dst-btn.shut.look-d .dst-wait{ opacity:1; animation:dst-spin 2.4s linear infinite; }
@keyframes dst-spin{ to{ transform:rotate(360deg); } }
#dstudio .dst-face img{ width:56%; height:56%; object-fit:contain; pointer-events:none; }
#dstudio .dst-ring{ position:absolute; pointer-events:none; overflow:visible; }
#dstudio .dst-bars{ position:absolute; width:132px; height:80px; display:flex; align-items:flex-end; gap:6px; pointer-events:none; opacity:0; transition:opacity .15s; }
#dstudio .dst-bars.live{ opacity:1; }
#dstudio .dst-bars i{ width:12px; border-radius:6px; background:linear-gradient(#ffe066,#ff8a3d); height:10px; }
#dstudio .dst-ghost, #dstudio .dst-finger{ position:absolute; z-index:11; pointer-events:none; opacity:0; }
#dstudio .dst-finger{ filter:drop-shadow(0 6px 6px rgba(0,0,0,.35)); }
#dstudio .dst-confetti{ z-index:12; pointer-events:none; width:1194px; height:834px; }
#dstudio .dst-fx{ z-index:13; pointer-events:none; }
#dstudio .dst-fx > *{ position:absolute; }
#dstudio .dst-bubring{ border-radius:50%; border:5px solid rgba(255,255,255,.95); box-shadow:0 0 12px rgba(255,255,255,.7); box-sizing:border-box; }
#dstudio .dst-drop{ border-radius:50%; box-shadow:inset -2px -2px 0 rgba(0,0,0,.08); }
#dstudio .dst-prompt.card-none .dst-card{ background:transparent; box-shadow:none; }
#dstudio .dst-prompt.card-none .dst-pic img{ filter:drop-shadow(0 6px 6px rgba(0,0,0,.28)); border-radius:14px; }   
#dstudio .dst-kw{ position:absolute; pointer-events:none; font-family:var(--font-read); font-weight:800; white-space:nowrap; line-height:1; letter-spacing:.02em; }
#dstudio .dst-btn.kw-a .dst-kw, #dstudio .dst-btn.kw-e .dst-kw{ inset:0; }
#dstudio .dst-btn.kw-a .dst-kw svg, #dstudio .dst-btn.kw-e .dst-kw svg{ display:block; overflow:visible; }
#dstudio .dst-btn.kw-a .dst-kw text, #dstudio .dst-btn.kw-e .dst-kw text{ fill:#fff; font-family:var(--font-read); font-weight:800; letter-spacing:.2em; text-transform:uppercase; }   
#dstudio .dst-btn.kw-a .dst-face img{ width:38%; height:38%; transform:translateY(16%); }
#dstudio .dst-btn.kw-e .dst-face img{ width:44%; height:44%; transform:translateY(-12%); }
#dstudio .dst-btn.kw-b .dst-kw{ left:50%; top:calc(100% + 16px); transform:translateX(-50%); color:#a1111b; background:#fff; border-radius:40px; padding:8px 18px; box-shadow:0 4px 0 rgba(0,0,0,.22); }
#dstudio .dst-btn.kw-c .dst-face{ flex-direction:column; }
#dstudio .dst-btn.kw-c .dst-face img{ width:40%; height:40%; transform:translateY(-14%); }
#dstudio .dst-btn.kw-c .dst-kw{ position:static; color:#fff; text-align:center; white-space:normal; width:72%; text-transform:uppercase; transform:translateY(-6%); text-shadow:0 2px 0 rgba(0,0,0,.25); }
#dstudio .dst-btn.kw-d .dst-kw{ left:50%; bottom:calc(100% + 22px); transform:translateX(-50%); color:#fff; background:#a1111b; border-radius:14px; padding:9px 16px; box-shadow:0 4px 0 rgba(0,0,0,.25); }
#dstudio .dst-btn.kw-d .dst-kw::after{ content:''; position:absolute; left:50%; top:100%; margin-left:-11px; border:11px solid transparent; border-top-color:#a1111b; border-bottom:0; }
#dstudio .dst-btn.kw-d.down .dst-kw{ opacity:0; }   
#dstudio .dst-sets{ position:absolute; left:360px; right:14px; top:440px; height:150px; z-index:14; display:flex; align-items:center; justify-content:center; gap:12px; }
#dstudio .dst-set{ width:104px; height:104px; flex:0 0 auto; padding:12px; box-sizing:border-box; border:0; border-radius:22%; cursor:pointer;
  background:linear-gradient(#fff9e8,#ffe9b3); box-shadow:0 8px 0 #c9962e, 0 12px 18px rgba(0,0,0,.45), inset 0 4px 0 rgba(255,255,255,.9);
  -webkit-tap-highlight-color:transparent; transform:scale(0); animation:dst-set-in .38s cubic-bezier(.34,1.56,.64,1) forwards; }
#dstudio .dst-set > span{ display:block; width:100%; height:100%; font-size:24px; pointer-events:none; }
#dstudio .dst-sets.done .dst-set{ animation:dst-set-out .3s ease-in forwards; animation-delay:0s !important; }
#dstudio .dst-sets.done .dst-set.picked{ animation:dst-set-pick .42s ease-out forwards; }
@keyframes dst-set-in{ from{ transform:scale(0); } to{ transform:scale(1); } }
@keyframes dst-set-out{ from{ transform:scale(1); opacity:1; } to{ transform:scale(0); opacity:0; } }
@keyframes dst-set-pick{ 0%{ transform:scale(1); } 40%{ transform:scale(1.18); } 100%{ transform:scale(0); opacity:0; } }
