:root{--color-brand-base: #f5715f;--color-brand-hover: #2a6ac0;--color-brand-active: #777777;--color-brand-light: #f0f6ff;--color-brand-wash: rgba(53, 124, 208, .08);--color-brand-wash-hover: rgba(53, 124, 208, .2);--color-bg-base: #ffffff;--color-bg-subtle: #edeff0;--color-bg-inset: #EEF5FC;--color-text-main: #4b5466;--color-text-body: #2e2e2e;--color-text-input: #505050;--color-text-muted: #aaaaaa;--color-text-inverse: #ffffff;--color-border-main: #e2e2ee;--color-border-light: #f0f0f8;--color-border-dark: #b0b9ca;--font-sans: "Inter", system-ui, -apple-system, sans-serif;--font-mono: "Fira Code", "Cascadia Code", monospace;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .04);--shadow-md: 0 4px 12px rgba(0, 0, 0, .08);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .12);--shadow-brand-sm: 0 4px 12px rgba(53, 124, 208, .15);--shadow-brand-md: 0 6px 16px rgba(53, 124, 208, .3);--shadow-brand-lg: 0 10px 36px rgba(53, 124, 208, .45)}[data-theme=dark]{--color-bg-base: #1c1e24;--color-bg-subtle: #16191f;--color-bg-inset: #1a1d24;--color-text-main: #f0f2f5;--color-text-body: #d1d5db;--color-text-input: #e5e7eb;--color-text-muted: #8a94a6;--color-text-inverse: #ffffff;--color-border-main: #252932;--color-border-light: #2b2e33;--color-border-dark: #3b4252;--shadow-sm: 0 1px 4px rgba(0, 0, 0, .25);--shadow-md: 0 2px 8px rgba(0, 0, 0, .3);--shadow-lg: 0 4px 16px rgba(0, 0, 0, .35);--shadow-brand-sm: 0 4px 12px rgba(245, 113, 95, .12);--shadow-brand-md: 0 6px 16px rgba(245, 113, 95, .2);--shadow-brand-lg: 0 10px 36px rgba(245, 113, 95, .3)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;scroll-behavior:smooth}body{font-family:Inter,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5;min-height:100vh}img,video{max-width:100%;display:block}a{color:inherit;text-decoration:none}button{cursor:pointer;border:none;background:none}ul,ol{list-style:none}body{background-color:var(--color-bg);color:var(--color-text);font-family:var(--font-sans)}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--color-surface)}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--color-text-muted)}:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px}body{background-color:var(--color-bg-base);color:var(--color-text-body);transition:background-color .3s ease,color .3s ease}.bottom-bar{position:fixed;bottom:20px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:8px;z-index:10}.background-grid{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none}.bezier-curve-overlay{position:fixed;inset:0;width:100vw;height:100vh;z-index:1;pointer-events:none;overflow:visible}.bezier-curve-overlay--pannable{pointer-events:all;cursor:grab}.bezier-curve-overlay--pannable:active{cursor:grabbing}.bezier-handle{pointer-events:all;cursor:grab;transition:r .1s ease}.bezier-handle:hover{r:20px}.bezier-value-pill{pointer-events:none}.bezier-value-pill__bg{fill:var(--color-bg-base);stroke:var(--color-border-main);stroke-width:1px;rx:13px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}.bezier-value-pill__text{fill:var(--color-text-input);font-size:11px;font-weight:600;font-family:var(--font-main, Inter, system-ui);text-anchor:middle;dominant-baseline:middle}.bezier-value-pill__separator{stroke:var(--color-border-dark);stroke-width:2px;stroke-linecap:round}body.is-dragging-handle,body.is-dragging-handle *{cursor:none!important}.pan-reset-btn{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.85);z-index:9;display:flex;align-items:center;justify-content:center;gap:8px;padding:15px 16px;border-radius:12px;font-size:.875rem;font-weight:600;font-family:inherit;opacity:0;pointer-events:none;background-color:var(--color-bg-base);color:var(--color-bg-base);border:1px solid transparent;box-shadow:var(--shadow-brand-sm)}.pan-reset-btn:before{background-color:var(--color-brand-base)}.pan-reset-btn--visible{opacity:1;pointer-events:all;transform:translate(-50%,-50%) scale(1)}.pan-reset-btn--visible:hover{color:var(--color-brand-base);border-color:var(--color-brand-base);box-shadow:var(--shadow-brand-md)}.pan-reset-btn--visible:active{transform:translate(-50%,-50%) scale(.95);box-shadow:var(--shadow-brand-sm)}.morph-btn{position:relative;z-index:1;overflow:hidden;transition:color .3s ease-in-out,border-color .3s cubic-bezier(0,.7,.3,1),box-shadow .3s ease,background-color .3s ease,opacity .25s ease,transform .25s cubic-bezier(.34,1.56,.64,1)}.morph-btn:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;border-radius:inherit;transition:all .3s cubic-bezier(0,.7,.3,1)}.morph-btn.is-tracking:before{transition:width .3s cubic-bezier(0,.7,.3,1),height .3s cubic-bezier(0,.7,.3,1),border-radius .3s cubic-bezier(0,.7,.3,1)}.morph-btn:hover{cursor:none}.morph-btn:hover:before{height:10px;width:10px;top:calc(var(--mouse-y, 50%) - 5px);left:calc(var(--mouse-x, 50%) - 5px);border-radius:25px!important}.playground{position:relative;width:100vw;height:100vh;overflow:hidden}.navbar{position:fixed;top:16px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:2px;background:var(--color-bg-base);border:1px solid var(--color-border-main);border-radius:14px;padding:8px 10px;box-shadow:var(--shadow-md);z-index:10;transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease}.navbar__logo{display:flex;align-items:center;justify-content:center;color:var(--color-brand-base);padding:4px 6px;margin-right:4px}.navbar__link{display:inline-flex;align-items:center;padding:6px 14px;border-radius:9px;font-size:.875rem;font-weight:500;color:var(--color-text-muted);transition:color .15s ease,background .15s ease;white-space:nowrap}.navbar__link:hover{color:var(--color-text-main);background:var(--color-bg-subtle)}.navbar__link--active{color:var(--color-brand-base);font-weight:600}.top-controls{display:flex;align-items:center;gap:4px;background:var(--color-bg-base);border:1px solid var(--color-border-main);border-radius:16px;padding:6px;box-shadow:var(--shadow-md);z-index:10;transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease}.top-controls__btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;color:var(--color-text-body);transition:color .15s ease,background .15s ease}.top-controls__btn:hover{color:var(--color-text-main);background:var(--color-bg-subtle)}.top-controls__btn--active,.top-controls__btn--active:hover{color:var(--color-bg-base);background:var(--color-brand-base)}.top-controls__divider{width:1px;height:24px;background:var(--color-border-main);margin:0 2px;flex-shrink:0}.presets-panel{height:640px;width:220px;background:var(--color-bg-base);border:1px solid var(--color-border-main);border-radius:16px;box-shadow:var(--shadow-lg);z-index:10;display:flex;flex-direction:column;overflow:hidden;padding-top:8px;transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease}.presets-panel__header{padding:14px 14px 10px;flex-shrink:0}.presets-panel__title{font-size:.68rem;font-weight:700;letter-spacing:.12em;color:var(--color-text-muted);text-transform:uppercase}.presets-panel__list{position:relative;flex:1;display:flex;flex-direction:column;gap:12px;overflow-y:scroll;padding:4px 10px 4px 14px;scrollbar-width:thin;scrollbar-color:transparent transparent;transition:scrollbar-color .2s ease}.presets-panel:hover .presets-panel__list{scrollbar-color:var(--color-text-muted) transparent}.presets-panel__list::-webkit-scrollbar{width:4px}.presets-panel__list::-webkit-scrollbar-track{background:transparent}.presets-panel__list::-webkit-scrollbar-thumb{background:transparent;border-radius:100px}.presets-panel:hover .presets-panel__list::-webkit-scrollbar-thumb{background:var(--color-text-muted)}.presets-panel__empty{padding:24px 12px;font-size:.8rem;color:var(--color-text-muted);text-align:center;line-height:1.6}.presets-panel__pill{position:absolute;left:14px;right:10px;border-radius:12px;background:var(--color-brand-base);pointer-events:none;z-index:0}.preset-item{position:relative;z-index:1;width:100%;display:flex;flex-direction:row;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;text-align:left;background:#00000009;color:var(--color-text-main);border:1px solid var(--color-border-light);transition:border-color .2s ease,color .2s ease,background .2s ease}[data-theme=dark] .preset-item{background:#ffffff0a;border-color:var(--color-border-main)}.preset-item:hover:not(.preset-item--active){border-color:var(--color-brand-base);background:#0000000f}[data-theme=dark] .preset-item:hover:not(.preset-item--active){background:#ffffff12}.preset-item--active{background:transparent;color:var(--color-bg-base);cursor:default;border-color:transparent!important}.preset-icon{width:30px;height:30px;flex-shrink:0;border-radius:10px;padding:6px;background:var(--color-brand-wash);color:var(--color-brand-base);transition:color .3s ease,background .3s ease}.preset-item--active .preset-icon{background:#fff3;color:#ffffffd9}[data-theme=dark] .preset-item--active .preset-icon{background:#0f111533;color:#0f1115d9}.preset-item__text{display:flex;flex-direction:column;gap:2px;min-width:0;overflow:hidden;height:36px;justify-content:center}.preset-item__name{font-size:.85rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform:translateY(9px);transition:transform .25s ease;flex-shrink:0}.preset-item:hover .preset-item__name,.preset-item--active .preset-item__name{transform:translateY(0)}.preset-item__values{font-size:.68rem;opacity:0;font-family:var(--font-sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform:translateY(4px);transition:opacity .25s ease,transform .25s ease;flex-shrink:0}.preset-item:hover .preset-item__values{opacity:.6;transform:translateY(0)}.preset-item--active .preset-item__values{opacity:.8;transform:translateY(0)}.presets-panel__footer{padding:40px 12px 12px;flex-shrink:0}.presets-panel__save-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:15px 16px;border-radius:12px;font-size:.875rem;font-weight:600;background-color:var(--color-bg-base);color:var(--color-bg-base);border:1px solid transparent;box-shadow:var(--shadow-brand-sm)}.presets-panel__save-btn:before{background-color:var(--color-brand-base)}.presets-panel__save-btn:hover{color:var(--color-brand-base);border-color:var(--color-brand-base);box-shadow:var(--shadow-brand-md)}.presets-panel__save-btn:active{transform:translateY(0);box-shadow:var(--shadow-brand-sm)}.right-panels{position:fixed;top:0;bottom:0;right:16px;display:flex;flex-direction:column;justify-content:center;gap:10px;z-index:10;pointer-events:none}.right-panels>*{pointer-events:auto}.anim-panel{width:230px;background:var(--color-bg-base);border:1px solid var(--color-border-main);border-radius:16px;box-shadow:var(--shadow-lg);padding:22px 14px 16px;transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease;cursor:pointer}.anim-panel,.anim-panel *{cursor:pointer}.anim-panel .duration-pill,.anim-panel .duration-pill--editing{cursor:text}.anim-panel:hover{border-color:var(--color-brand-base);box-shadow:var(--shadow-lg),0 0 0 1px var(--color-brand-base)}.anim-panel__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.anim-panel__label{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted)}.anim-panel__icon{color:#a0a0c0;display:flex;align-items:center}.anim-panel__body{display:flex;align-items:center;justify-content:center}.translate-track{position:relative;width:100%;height:28px;background:var(--color-border-light);border-radius:100px}.translate-track__indicator{position:absolute;top:3px;left:calc(3px + var(--anim-translate-x, 0) * (100% - 40px - 6px));width:40px;height:22px;background:var(--color-brand-base);border-radius:100px}.scale-box{width:100%;aspect-ratio:1 / 1;background:var(--color-border-light);border-radius:14px;display:flex;align-items:center;justify-content:center;padding:12px;overflow:hidden}.scale-box__circle{background:var(--color-brand-base);border-radius:50%;transition:width .12s ease-out,height .12s ease-out;flex-shrink:0}.opacity-track{width:100%;height:38px;background:var(--color-border-light);border-radius:100px;padding:5px}.opacity-track__pill{width:100%;height:100%;background:var(--color-brand-base);border-radius:100px;transition:opacity .12s ease-out}.curve-values-bar{display:flex;align-items:stretch;background:var(--color-bg-base);border:1px solid var(--color-border-main);border-radius:16px;padding:6px;gap:4px;box-shadow:var(--shadow-lg);z-index:10;transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease}.curve-values-bar__divider{width:1px;height:24px;align-self:center;background:var(--color-border-main);border-radius:99px;margin:0 2px;flex-shrink:0}.curve-values-bar__copy-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;color:var(--color-text-body);background:transparent;border:none;cursor:pointer;flex-shrink:0;perspective:300px;transition:color .15s ease,background .15s ease,transform .1s ease}.curve-values-bar__copy-btn:hover{color:var(--color-text-main);background:var(--color-bg-subtle)}.curve-values-bar__copy-btn:active{transform:scale(.92)}.curve-values-bar__copy-btn--copied{color:var(--color-brand-base);background:var(--color-brand-wash);animation:copyFlip .35s ease-out}.curve-values-bar__copy-btn--copied:hover{color:var(--color-brand-base);background:var(--color-brand-wash)}@keyframes copyFlip{0%{transform:rotateY(90deg) scale(.95)}60%{transform:rotateY(-8deg) scale(1)}to{transform:rotateY(0) scale(1)}}.curve-value-box{position:relative;display:flex;align-items:center;justify-content:center;padding:8px 4px;min-width:84px}.curve-value-box+.curve-value-box:before{content:"";position:absolute;left:-2px;top:25%;height:50%;width:2px;background:var(--color-border-dark);border-radius:99px}.curve-value-box__input{width:72px;border:none;background:transparent;font-size:1.05rem;color:var(--color-text-input);text-align:center;font-family:inherit;padding:2px 4px;border-radius:6px;cursor:text;outline:none;transition:color .15s ease,font-weight .15s ease;-moz-appearance:textfield;appearance:textfield}.curve-value-box__input--is-dragged{color:var(--color-brand-base);font-weight:700}.curve-value-box__input:focus{outline:none;background:transparent;box-shadow:none}.curve-value-box__input::-webkit-outer-spin-button,.curve-value-box__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.duration-pill{display:inline-flex;align-items:center;padding:3px 10px;border-radius:100px;background:var(--color-bg-inset);color:var(--color-brand-base);font-size:.8rem;font-weight:700;font-family:inherit;border:1.5px solid transparent;cursor:pointer;transition:background .2s ease,color .2s ease,transform .1s ease;white-space:nowrap}.duration-pill:hover,.duration-pill:active{background:var(--color-brand-base);color:var(--color-bg-base);border-color:transparent}.duration-pill:active{transform:scale(.95)}.duration-pill--editing{width:62px;text-align:center;padding:3px 8px;border-radius:100px;background:var(--color-brand-base);color:var(--color-text-inverse);font-size:.8rem;font-weight:700;font-family:inherit;border:1.5px solid transparent;outline:none;-moz-appearance:textfield;appearance:textfield}.duration-pill--editing::-webkit-outer-spin-button,.duration-pill--editing::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.duration-slider-wrap{width:100%;padding:2px 0}.duration-slider{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:100px;background:linear-gradient(to right,var(--color-brand-base) var(--fill-pct, 0%),var(--color-border-main) var(--fill-pct, 0%));outline:none;cursor:pointer}.duration-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--color-bg-base);border:2.5px solid var(--color-brand-base);box-shadow:0 1px 6px #357cd059;transition:box-shadow .15s ease,transform .1s ease}.duration-slider::-webkit-slider-thumb:hover{box-shadow:0 2px 10px #357cd080;transform:scale(1.1)}.duration-slider:active::-webkit-slider-thumb{transform:scale(1.05)}.duration-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--color-bg-base);border:2.5px solid var(--color-brand-base);box-shadow:0 1px 6px #357cd059;cursor:pointer;transition:box-shadow .15s ease}.duration-slider::-moz-range-thumb:hover{box-shadow:0 2px 10px #357cd080}::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}::view-transition-old(root){z-index:1}::view-transition-new(root){z-index:2}.theme-toggle{position:fixed;top:16px;right:16px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:14px;background:var(--color-bg-base);border:1px solid var(--color-border-main);box-shadow:var(--shadow-md);color:var(--color-text-body);cursor:pointer;z-index:9999;transition:background-color .3s ease,border-color .3s ease,color .3s ease,transform .2s cubic-bezier(.34,1.56,.64,1)}.theme-toggle:hover{color:var(--color-brand-base);transform:scale(1.05)}.theme-toggle:active{transform:scale(.95)}.theme-toggle__svg{width:22px;height:22px}.theme-toggle__sun-moon{transform-origin:center center;transition:r .4s cubic-bezier(.4,0,.2,1)}.theme-toggle__mask-circle{transform-origin:center center;cx:24px;cy:4px;transition:cx .4s cubic-bezier(.4,0,.2,1),cy .4s cubic-bezier(.4,0,.2,1)}.theme-toggle__sun-rays{transform-origin:center center;transition:opacity .3s ease,transform .4s cubic-bezier(.4,0,.2,1)}.theme-toggle--dark .theme-toggle__sun-moon{r:9px}.theme-toggle--dark .theme-toggle__mask-circle{cx:17px;cy:7px}.theme-toggle--dark .theme-toggle__sun-rays{opacity:0;transform:scale(.6) rotate(45deg)}.save-modal-backdrop{position:fixed;inset:0;background:#0006;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:999;display:flex;align-items:center;justify-content:center;animation:modalFadeIn .25s cubic-bezier(.4,0,.2,1) forwards}[data-theme=dark] .save-modal-backdrop{background:#000000b3}.save-modal{width:90%;max-width:440px;background:var(--color-bg-base);border:1px solid var(--color-border-main);border-radius:20px;box-shadow:var(--shadow-lg),0 20px 48px #0000001a;padding:24px;display:flex;flex-direction:column;gap:20px;animation:modalSlideUp .35s cubic-bezier(.34,1.56,.64,1) forwards}[data-theme=dark] .save-modal{box-shadow:var(--shadow-lg),0 20px 48px #0006}.save-modal__heading{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted);margin:0;text-align:center}.save-modal__preview{display:flex;flex-direction:row;align-items:center;gap:16px;padding:16px 20px;background:#00000009;color:var(--color-text-main);border-radius:16px;border:1px solid var(--color-border-light);transition:border-color .2s ease}[data-theme=dark] .save-modal__preview{background:#ffffff0a;border-color:var(--color-border-main)}.save-modal__icon-wrap{width:56px;height:56px;flex-shrink:0;border-radius:14px;padding:10px;background:var(--color-brand-wash);color:var(--color-brand-base);display:flex;align-items:center;justify-content:center}.save-modal__icon{width:100%;height:100%}.save-modal__details{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}.save-modal__input{width:100%;background:transparent;border:none;color:var(--color-text-main);font-size:1.25rem;font-weight:600;font-family:var(--font-sans);padding:0 0 4px;outline:none;transition:border-color .2s ease}.save-modal__input::placeholder{color:var(--color-text-muted);opacity:.5}.save-modal__input:focus{border-bottom-color:var(--color-brand-base)}.save-modal__values{font-size:.9rem;color:var(--color-text-muted);font-family:var(--font-mono);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.save-modal__actions{display:flex;gap:12px;margin-top:8px}.save-modal__btn{flex:1;padding:12px 0;border-radius:12px;font-size:.9rem;font-weight:600;cursor:pointer;border:1px solid transparent;transition:all .2s ease}.save-modal__btn--cancel{background:#00000009;color:var(--color-text-body);border-color:var(--color-border-light)}[data-theme=dark] .save-modal__btn--cancel{background:#ffffff0a;border-color:var(--color-border-main)}.save-modal__btn--cancel:hover{background:#0000000f;color:var(--color-text-main)}[data-theme=dark] .save-modal__btn--cancel:hover{background:#ffffff12}.save-modal__btn--save{background:var(--color-brand-base);color:var(--color-text-inverse);box-shadow:var(--shadow-brand-sm)}.save-modal__btn--save:hover{transform:translateY(-1px);box-shadow:var(--shadow-brand-md);filter:brightness(1.05)}.save-modal__btn--save:active{transform:scale(.97)}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalSlideUp{0%{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.draggable-panel{position:relative}.draggable-panel--presets{position:fixed;top:50%;left:16px;z-index:10}.drag-handle{position:absolute;top:0;left:0;right:0;height:20px;display:flex;align-items:center;justify-content:center;cursor:grab;z-index:5;border-radius:16px 16px 0 0}.drag-handle:active{cursor:grabbing}.drag-handle__line{width:28px;height:3px;border-radius:2px;background:var(--color-border-dark);opacity:.2;transition:opacity .2s ease,width .2s ease,background .2s ease}.draggable-panel:hover .drag-handle__line{opacity:.45}.drag-handle:hover .drag-handle__line{opacity:1;width:36px;background:var(--color-text-muted)}.draggable-panel--dragging .drag-handle__line{opacity:1;width:36px;background:var(--color-brand-base)}.draggable-panel--dragging{z-index:100;transition:none!important}.draggable-panel--dragging .anim-panel,.draggable-panel--dragging .presets-panel{box-shadow:var(--shadow-lg),0 16px 48px #0000002e}[data-theme=dark] .draggable-panel--dragging .anim-panel,[data-theme=dark] .draggable-panel--dragging .presets-panel{box-shadow:var(--shadow-lg),0 16px 48px #00000080}.draggable-panel--settling{transition:transform .35s cubic-bezier(.25,1,.5,1)}.drag-ghost{position:fixed;border:2px dashed var(--color-brand-base);opacity:.3;border-radius:16px;pointer-events:none;z-index:1;animation:ghostFadeIn .2s ease-out;transition:opacity .15s ease,box-shadow .15s ease}.drag-ghost--near-snap{opacity:.75;box-shadow:0 0 0 1px var(--color-brand-base),0 0 20px #357cd066}@keyframes ghostFadeIn{0%{opacity:0;transform:scale(.97)}to{opacity:.3;transform:scale(1)}}.draggable-panel__content{width:100%;height:100%}.ray{position:absolute;mix-blend-mode:difference}