.tip-bubble{z-index:50;color:#202020;letter-spacing:-.01em;pointer-events:none;opacity:0;background:#fff;border-radius:8px;height:26px;font-size:12px;font-weight:500;line-height:1;transition:opacity .14s,transform .2s cubic-bezier(.22,.61,.36,1),left .28s cubic-bezier(.22,.61,.36,1),width .28s cubic-bezier(.22,.61,.36,1),height .28s cubic-bezier(.22,.61,.36,1),border-radius .28s cubic-bezier(.22,.61,.36,1);position:fixed;overflow:hidden;transform:translateY(-4px);box-shadow:0 0 0 1px #0000000f,0 6px 16px #00000014,0 1px 3px #0000000f}.tip-bubble[data-open]{opacity:1;transition-duration:.16s,.2s,.28s,.28s,.28s,.28s;transform:none}.tip-bubble[data-menu]{border-radius:12px;box-shadow:0 0 0 1px #0000000f,0 12px 32px #0000001f,0 2px 6px #0000000f}.tip-bubble[data-menu][data-open]{pointer-events:auto}.tip-bubble[data-instant]{transition-property:opacity,transform}.tip-labels{transition:opacity .12s}.tip-bubble[data-menu] .tip-labels{opacity:0}.tip-layer{white-space:nowrap;justify-content:center;align-items:center;height:26px;display:flex;position:absolute;top:0;left:0;right:0}.tip-layer>span{align-items:center;gap:6px;display:inline-flex}.tip-hint{font:inherit;color:#8a8a8a}.tip-menu{opacity:0;width:max-content;transition:opacity .12s,transform .2s cubic-bezier(.22,.61,.36,1);position:absolute;top:0;left:0;transform:translateY(-4px)}.tip-bubble[data-menu][data-open] .tip-menu{opacity:1;transition-delay:60ms;transform:none}.tip-layer[data-dir]:not([data-leaving]){animation:.28s cubic-bezier(.22,.61,.36,1) both tip-in}.tip-layer[data-leaving]{animation:.28s cubic-bezier(.22,.61,.36,1) both tip-out}@keyframes tip-in{0%{opacity:0;transform:translateX(calc(var(--dir) * 100%))}}@keyframes tip-out{to{opacity:0;transform:translateX(calc(var(--dir) * 100%))}}@media (prefers-reduced-motion:reduce){.tip-bubble{transform:none}.tip-layer[data-dir]:not([data-leaving]){animation-name:tip-fade-in}.tip-layer[data-leaving]{animation-name:tip-fade-out}}@keyframes tip-fade-in{0%{opacity:0}}@keyframes tip-fade-out{to{opacity:0}}
.studio-shell{--bg:#dadada;--rail:#fff;--fg:#202020;--muted:#737373;--faint:#858585;--inset:#f0f0f0;--line:#ededed;--line-strong:#c9c9c9;--accent:#292929;--accent-hover:#454545;--accent-soft:#eaeaea;--on-accent:#fff;--scrim-crop:#ffffff9e;--ease-reshape:.32s cubic-bezier(.22,.61,.36,1);--preview-motion:.3s cubic-bezier(.22,.61,.36,1);--preview-shift:translate(calc(50vw - var(--frame-cx,50vw)), calc(50dvh - var(--frame-cy,50dvh)));height:100dvh;color:var(--fg);font-family:var(--font-inter), sans-serif;background:#dadada;grid-template-columns:225px minmax(0,1fr) 225px;gap:16px;padding:13px 14px;display:grid;position:relative}.shell-bleed{z-index:0;position:absolute;inset:0;overflow:hidden}.shell-scrim{box-shadow:0 0 0 100vmax var(--scrim-crop);pointer-events:none;border-radius:16px;position:absolute}.stage-loader{color:var(--fg);pointer-events:none;flex-direction:column;justify-content:center;align-items:center;gap:10px;transition:opacity .4s ease-out;animation:.3s ease-out .25s backwards stage-loader-in;display:flex;position:absolute}.stage-loader.is-done{opacity:0}.stage-loader circle:last-child{transition:stroke-dashoffset .2s ease-out}.stage-loader svg.is-spinning{animation:.9s linear infinite stage-loader-spin}.stage-loader-label{font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--muted);font-size:12px}@keyframes stage-loader-in{0%{opacity:0}}@keyframes stage-loader-spin{to{transform:rotate(360deg)}}.shell-scrim,.shell-canvas{transition:transform var(--preview-motion), box-shadow var(--preview-motion)}.shell-scrim.is-eased,.shell-canvas.is-eased{transition:left var(--ease-reshape), top var(--ease-reshape), width var(--ease-reshape), height var(--ease-reshape), transform var(--preview-motion), box-shadow var(--preview-motion)}.shell-mobile-tabs,.shell-style,.shell-scene,.shell-middle{z-index:1;position:relative}.shell-style,.shell-scene{background:#fff;border-radius:20px;min-height:0}.shell-style{flex-direction:column;display:flex;overflow:hidden}.shell-style-export{display:none}.shell-scene{flex-direction:column;display:flex;overflow:hidden}.shell-middle{pointer-events:none;flex-direction:column;gap:10px;min-width:0;min-height:0;display:flex}.shell-middle>header,.shell-strip{pointer-events:auto}.shell-stage{flex:1;justify-content:center;align-items:center;min-width:0;min-height:0;display:flex;position:relative}.shell-canvas{border-radius:16px;position:relative;overflow:hidden;box-shadow:0 0 0 1px #20202033}.shell-strip{background:#fff;border-radius:14px;flex-shrink:0;min-width:0;padding:12px 14px}.shell-mobile-tabs{display:none}.studio-shell.is-previewing{--preview-motion:.64s cubic-bezier(.32,.72,0,1)}.shell-gl,.shell-style,.shell-scene,.shell-middle>header,.shell-strip,.shell-mobile-tabs{transition:transform var(--preview-motion)}.is-previewing .shell-gl,.is-previewing .shell-scrim{transform:var(--preview-shift)}.is-previewing .shell-scrim{box-shadow:0 0 0 100vmax #000}.is-previewing .shell-canvas{transform:var(--preview-shift);box-shadow:0 0 0 1px #fff0}.is-previewing .shell-style{transform:translate(calc(-100% - 40px))}.is-previewing .shell-scene,.is-previewing .shell-mobile-tabs{transform:translate(calc(100% + 40px))}.is-previewing .shell-middle>header{transform:translateY(calc(-100% - 40px))}.is-previewing .shell-strip{transform:translateY(calc(100% + 40px))}.shell-preview{z-index:3;pointer-events:none;outline:none;position:fixed;inset:0}.studio-shell .shell-preview{cursor:default}.is-previewing .shell-preview{pointer-events:auto}.shell-preview-label{color:#fff;opacity:0;transition:opacity .14s ease-out,transform .14s ease-out;position:absolute}.is-previewing .shell-preview-label{opacity:1;transition:opacity .36s ease-out .3s,transform .46s cubic-bezier(.32,.72,0,1) .3s;transform:none}.shell-preview-title{letter-spacing:-.01em;font-size:13px;font-weight:500;top:20px;left:24px;transform:translateY(-4px)}.shell-preview-hint{text-align:center;color:#fff9;font-size:12px;bottom:22px;left:0;right:0;transform:translateY(4px)}.studio-shell button{cursor:pointer}.studio-shell button:disabled{cursor:default}.studio-shell .shadow-sm{box-shadow:none}.shell-scene [aria-label=Lock],.shell-scene [aria-label=Unlock],.shell-scene [aria-label=Hide],.shell-scene [aria-label=Show],.shell-scene [aria-label=Delete]{width:22px}@media (max-height:650px) and (min-width:901px){.shell-overview{padding-top:10px;padding-bottom:10px}.shell-overview>div:nth-child(2){height:95px}.shell-overview>p{display:none}}@media (max-width:1100px) and (min-width:901px){.studio-shell{grid-template-columns:210px minmax(0,1fr) 225px;gap:10px;padding:10px}}@media (max-width:900px){.studio-shell{grid-template-rows:32px minmax(0,1fr);grid-template-columns:minmax(0,1fr) 225px;gap:10px;padding:10px}.shell-mobile-tabs{grid-area:1/2;display:block}.shell-middle{grid-area:1/1/3}.shell-style,.shell-scene{grid-area:2/2;display:none}.shell-style.mobile-active{display:flex}.shell-style-export{flex-shrink:0;display:block}.shell-scene.mobile-active{display:flex}.is-previewing .shell-style{transform:translate(calc(100% + 40px))}}@media (max-width:600px){.studio-shell{grid-template-rows:minmax(260px,46dvh) 32px minmax(0,1fr);grid-template-columns:minmax(0,1fr);gap:8px;padding:8px}.shell-middle{grid-area:1/1;gap:8px}.shell-mobile-tabs{grid-area:2/1}.shell-style,.shell-scene{grid-area:3/1}.shell-overview{display:none}.shell-strip{padding:8px 12px}.shell-canvas,.shell-scrim{border-radius:12px}}@media (prefers-reduced-motion:reduce){.studio-shell *,.studio-shell :before,.studio-shell :after{transition-duration:50ms!important;animation-duration:50ms!important}}.shell-scene [role=radio]{padding-left:3px;padding-right:3px;font-size:11px}