:root{--color-brand-base: #f5715f;--color-brand-hover: #e05a48;--color-brand-active: #cc4b3a;--color-brand-light: #fef0ee;--color-brand-base-rgb: 245, 113, 95;--color-brand-wash: rgba(var(--color-brand-base-rgb), .08);--color-brand-wash-hover: rgba(var(--color-brand-base-rgb), .2);--color-bg-base: #ffffff;--color-bg-subtle: #edeff0;--color-bg-inset: #fdf5f4;--color-bg-card-subtle: #f8f8fa;--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;--bg-overlay-subtle: rgba(0, 0, 0, .035);--bg-overlay-subtle-hover: rgba(0, 0, 0, .06);--bg-backdrop: rgba(0, 0, 0, .4);--fg-endpoint: #ffffff;--fg-icon-muted: #a0a0c0;--fg-active-icon: color-mix(in srgb, var(--color-bg-base) 85%, transparent);--fg-active-icon-bg: color-mix(in srgb, var(--color-bg-base) 20%, transparent);--color-grid-line: rgba(0, 0, 0, .05);--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(245, 113, 95, .15);--shadow-brand-md: 0 6px 16px rgba(245, 113, 95, .3);--shadow-brand-lg: 0 10px 36px rgba(245, 113, 95, .45);--elevation-component: rgba(0, 0, 0, .1);--elevation-drag: rgba(0, 0, 0, .18);--elevation-snap-glow: rgba(245, 113, 95, .4)}[data-theme=dark]{--color-bg-base: #1c1e24;--color-bg-subtle: #16191f;--color-bg-inset: #0f1115;--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;--bg-overlay-subtle: rgba(255, 255, 255, .04);--bg-overlay-subtle-hover: rgba(255, 255, 255, .07);--bg-backdrop: rgba(0, 0, 0, .7);--fg-endpoint: var(--color-border-light);--fg-icon-muted: #6b7394;--color-grid-line: rgba(255, 255, 255, .05);--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);--elevation-component: rgba(0, 0, 0, .4);--elevation-drag: rgba(0, 0, 0, .5);--elevation-snap-glow: rgba(245, 113, 95, .4);--color-bg-card-subtle: var(--color-bg-subtle)}*,*: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-visualizer-dot{fill:var(--color-brand-base);pointer-events:none;transform:translate(calc(var(--origin-x, 0px) + var(--anim-progress-x, 0) * var(--unit-px, 0px)),calc(var(--origin-y, 0px) - var(--anim-progress-y, 0) * var(--unit-px, 0px)));filter:drop-shadow(0px 2px 4px var(--elevation-component))}.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 var(--elevation-component))}.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}.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__btn--reset-active{color:var(--color-bg-base);background:var(--color-brand-base);animation:resetGlowPulse 1.8s ease-in-out infinite}.top-controls__btn--reset-active:hover{color:var(--color-bg-base);background:var(--color-brand-base);filter:brightness(1.06)}@keyframes resetGlowPulse{0%,to{box-shadow:0 0 rgba(var(--color-brand-base-rgb),.5)}50%{box-shadow:0 0 11px 3px rgba(var(--color-brand-base-rgb),.55)}}.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;padding-bottom:16px;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-wrapper{position:relative;width:100%;z-index:2}.preset-item-wrapper:hover{z-index:10}.preset-item__delete-btn{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:6px;background-color:var(--color-bg-base);border:1px solid var(--color-brand-base);color:var(--color-text-muted);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 5px #0000001f;transition:all .2s ease;z-index:5;opacity:0;pointer-events:none}.preset-item-wrapper:hover .preset-item__delete-btn{opacity:1;pointer-events:auto}.preset-item__delete-btn:hover{background-color:color-mix(in srgb,var(--color-brand-base) 8%,var(--color-bg-base));color:var(--color-brand-base);transform:scale(1.1)}.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:var(--bg-overlay-subtle);color:var(--color-text-main);border:1px solid var(--color-border-light);transition:border-color .2s ease,color .2s ease,background .2s ease}.preset-item-wrapper:hover .preset-item:not(.preset-item--active){border-color:var(--color-brand-base);background:var(--bg-overlay-subtle-hover)}.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:var(--fg-active-icon-bg);color:var(--fg-active-icon)}.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-wrapper: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-wrapper:hover .preset-item__values{opacity:.6;transform:translateY(0)}.preset-item--active .preset-item__values{opacity:.8;transform:translateY(0)}.save-preset-btn{display:flex;align-items:center;justify-content:center;width:52px;height:52px;flex-shrink:0;border-radius:16px;background-color:var(--color-bg-base);color:var(--color-bg-base);border:1px solid transparent;box-shadow:var(--shadow-brand-sm)}.save-preset-btn:before{background-color:var(--color-brand-base)}.save-preset-btn:hover{color:var(--color-brand-base);border-color:var(--color-brand-base);box-shadow:var(--shadow-brand-md)}.save-preset-btn:active{box-shadow:var(--shadow-brand-sm)}.save-preset-btn--disabled{background-color:var(--color-border-light)!important;color:var(--color-text-muted)!important;box-shadow:none!important;cursor:not-allowed!important;opacity:.5}.save-preset-btn--disabled:before{background-color:transparent!important;opacity:0!important}.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:var(--fg-icon-muted);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 rgba(var(--color-brand-base-rgb),.35);transition:box-shadow .15s ease,transform .1s ease}.duration-slider::-webkit-slider-thumb:hover{box-shadow:0 2px 10px rgba(var(--color-brand-base-rgb),.5);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 rgba(var(--color-brand-base-rgb),.35);cursor:pointer;transition:box-shadow .15s ease}.duration-slider::-moz-range-thumb:hover{box-shadow:0 2px 10px rgba(var(--color-brand-base-rgb),.5)}::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:var(--bg-backdrop);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}.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 var(--elevation-component);padding:24px;display:flex;flex-direction:column;gap:20px;animation:modalSlideUp .35s cubic-bezier(.34,1.56,.64,1) forwards}.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:var(--bg-overlay-subtle);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{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:var(--bg-overlay-subtle);color:var(--color-text-body);border-color:var(--color-border-light)}[data-theme=dark] .save-modal__btn--cancel{border-color:var(--color-border-main)}.save-modal__btn--cancel:hover{background:var(--bg-overlay-subtle-hover);color:var(--color-text-main)}.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 var(--elevation-drag)}.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 var(--elevation-snap-glow)}@keyframes ghostFadeIn{0%{opacity:0;transform:scale(.97)}to{opacity:.3;transform:scale(1)}}.draggable-panel__content{width:100%;height:100%}.settings-backdrop{position:fixed;inset:0;background-color:var(--bg-backdrop);display:flex;align-items:center;justify-content:center;z-index:1000;animation:backdropFadeIn .25s cubic-bezier(.4,0,.2,1) forwards;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.settings-modal{display:flex;width:75vw;height:65vh;min-width:680px;min-height:480px;max-width:960px;max-height:640px;background-color:var(--color-bg-base);border:1px solid var(--color-border-main);border-radius:14px;box-shadow:var(--elevation-drag);overflow:hidden;outline:none;animation:modalSlideUp .35s cubic-bezier(.34,1.56,.64,1) forwards}.settings-sidebar{width:28%;min-width:180px;max-width:240px;flex-shrink:0;border-right:1px solid var(--color-border-light);padding:32px 16px;background-color:#fff9;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:flex;flex-direction:column;gap:20px}[data-theme=dark] .settings-sidebar{background-color:#1c1e2499}.settings-sidebar__title{font-size:24px;font-weight:700;color:var(--color-text-main);margin:0 0 12px 12px;letter-spacing:-.02em}.settings-nav{display:flex;flex-direction:column;gap:4px;position:relative}.settings-nav__pill{position:absolute;background-color:var(--color-brand-light);border-radius:8px;z-index:0;pointer-events:none}[data-theme=dark] .settings-nav__pill{background-color:rgba(var(--color-brand-base-rgb),.15)}.settings-nav-item{display:flex;align-items:center;gap:12px;width:100%;padding:10px 14px;border:none;background:transparent;border-radius:8px;text-align:left;font-size:14px;font-weight:500;color:var(--color-text-main);cursor:pointer;transition:color .15s ease;position:relative;z-index:1}.settings-nav-item:hover:not(.is-active){background-color:var(--bg-overlay-subtle)}.settings-nav-item.is-active{color:var(--color-brand-active)}[data-theme=dark] .settings-nav-item.is-active{color:var(--color-brand-base)}.settings-nav-icon{display:inline-flex;align-items:center;justify-content:center;color:currentColor}.settings-nav-item:focus-visible,.settings-close-btn:focus-visible,.segmented-control__btn:focus-visible,.accent-color-preview-btn:focus-visible{outline:2px solid var(--color-brand-base);outline-offset:-1px}.settings-content{flex-grow:1;padding:40px 48px;display:flex;flex-direction:column;position:relative;overflow:hidden;background-color:var(--color-bg-base);height:100%;box-sizing:border-box}.settings-close-btn{align-self:flex-end;margin-top:16px;padding:8px 22px;border:1px solid var(--color-border-dark);background-color:var(--color-bg-base);color:var(--color-text-main);border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;transition:all .15s ease;flex-shrink:0}.settings-close-btn:hover{background-color:var(--color-bg-subtle);border-color:var(--color-text-main)}.theme-settings-panel{display:flex;flex-direction:column;width:100%;flex:1;min-height:0;box-sizing:border-box}.theme-settings-panel__body{flex-grow:1;overflow-y:auto;padding-right:8px;scrollbar-gutter:stable}.theme-settings-panel__title{font-size:20px;font-weight:700;color:var(--color-brand-base);margin:0 0 24px;letter-spacing:-.02em;flex-shrink:0}.theme-settings-panel__section{display:flex;flex-direction:column}.theme-settings-panel__section:not(:first-child){margin-top:24px}.theme-settings-panel__section-header{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-muted);margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid var(--color-border-light)}.settings-row{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--color-border-light);gap:32px}.settings-row:last-of-type{border-bottom:none}.settings-row__info{display:flex;flex-direction:column;gap:4px;max-width:65%}.settings-row__title{font-size:15px;font-weight:600;color:var(--color-text-main)}.settings-row__description{font-size:13px;color:var(--color-text-muted);line-height:1.4}.color-picker-grid{display:flex;gap:8px;align-items:center}.color-swatch{width:20px;height:20px;border-radius:50%;border:1px solid rgba(0,0,0,.15);background-color:var(--swatch-color);cursor:pointer;position:relative;padding:0;transition:transform .1s ease}[data-theme=dark] .color-swatch{border-color:#fff3}.color-swatch:hover,.color-swatch.is-selected{transform:scale(1.1)}.color-swatch.is-selected:after{content:"";position:absolute;inset:-4px;border:2px solid var(--swatch-color);border-radius:50%}.color-swatch:focus-visible{outline:2px solid var(--color-text-main);outline-offset:4px}.accent-color-container{position:relative;display:inline-block}.accent-color-preview-wrap{width:220px;height:44px;background-color:var(--color-border-light);border:1px solid var(--color-border-main);border-radius:100px;padding:6px;box-sizing:border-box;display:flex;align-items:stretch;justify-content:stretch}.accent-color-preview-btn{flex:1;border-radius:100px;border:1px solid rgba(0,0,0,.08);cursor:pointer;box-shadow:0 1px 2px #0000000d;transition:transform .1s ease,filter .15s ease;padding:0;outline:none}[data-theme=dark] .accent-color-preview-btn{border-color:#ffffff1a}.accent-color-preview-btn:hover{filter:brightness(1.05)}.accent-color-preview-btn:active{transform:scale(.98)}.accent-color-popover{position:absolute;top:calc(100% + 8px);left:0;width:220px;box-sizing:border-box;background-color:var(--color-bg-base);border:1px solid var(--color-border-main);border-radius:22px;padding:12px 15px;box-shadow:var(--shadow-lg),0 10px 24px var(--elevation-component);display:flex;flex-wrap:wrap;gap:12px 22px;justify-content:flex-start;align-items:center;z-index:10;animation:popoverFadeIn .15s cubic-bezier(.16,1,.3,1) forwards}@keyframes popoverFadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.segmented-control{display:flex;background-color:var(--color-border-light);border:1px solid var(--color-border-main);border-radius:100px;padding:6px;gap:4px;width:220px;height:44px;box-sizing:border-box}.segmented-control__btn{flex:1;border:none;background:transparent;color:var(--color-text-body);font-size:13px;font-weight:500;border-radius:100px;cursor:pointer;transition:all .15s ease;outline:none;display:flex;align-items:center;justify-content:center}.segmented-control__btn:hover:not(.is-active){color:var(--color-text-main);background-color:var(--bg-overlay-subtle)}.segmented-control__btn.is-active{background-color:var(--color-brand-base);color:var(--color-text-inverse);box-shadow:0 1px 3px #0000001f}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}@keyframes backdropFadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalSlideUp{0%{opacity:0;transform:scale(.97) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}:root{--slider-inactive-track: var(--color-border-light)}.slider-wrapper{width:260px;display:flex;flex-direction:column;gap:8px;position:relative}.slider-track-container{position:relative;height:44px;display:flex;align-items:center;cursor:pointer;outline:none}.slider-track-container:focus-visible{outline:2px solid var(--color-brand-base);outline-offset:4px;border-radius:4px}.slider-track{position:absolute;left:0;right:0;height:44px;border-radius:22px;pointer-events:none;background-color:var(--slider-inactive-track)}.slider-custom-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:56px;height:32px;border-radius:100px;background-color:var(--color-brand-base);box-shadow:0 1px 3px #0000002e;pointer-events:auto;cursor:grab;transition:transform .1s ease,left .2s cubic-bezier(.25,1,.5,1)}.slider-custom-thumb:active{cursor:grabbing}.slider-wrapper.is-dragging .slider-custom-thumb{transition:transform .1s ease}.slider-labels{position:relative;height:16px}.slider-label{position:absolute;top:0;transform:translate(-50%);font-size:11px;font-weight:500;color:var(--color-text-muted);cursor:pointer;transition:color .15s ease,font-size .15s ease,font-weight .15s ease;-webkit-user-select:none;user-select:none}.slider-label:hover{color:var(--color-text-main)}.slider-label.is-active{color:var(--color-brand-base);font-weight:700;font-size:13px}@media(max-width:767px){.settings-modal{flex-direction:column;width:100vw;height:100vh;max-width:100vw;max-height:100vh;border-radius:0;animation:none;border:none}.settings-sidebar{width:100%;border-right:none;border-bottom:1px solid var(--color-border-light);overflow-x:auto;padding:16px;gap:12px}.settings-sidebar__title{margin:0 0 0 4px;font-size:20px}.settings-nav{flex-direction:row;gap:8px}.settings-nav-item{white-space:nowrap;width:auto;padding:8px 14px;font-size:13px}.settings-content{padding:24px 24px 96px}.settings-close-btn{position:fixed;bottom:24px;right:24px;left:24px;width:calc(100% - 48px);text-align:center}.settings-row{flex-direction:column;align-items:flex-start;gap:12px;padding:16px 0}.settings-row__info{max-width:100%}.settings-row__control{width:100%;display:flex;justify-content:flex-start}}.copy-format-dropdown{position:relative;width:220px;height:44px;background-color:var(--color-border-light);border:1px solid var(--color-border-main);border-radius:100px;box-sizing:border-box;padding:0;display:flex}.copy-format-dropdown__btn{flex:1;display:flex;justify-content:space-between;align-items:center;padding:0 18px;background:transparent;border:none;color:var(--color-brand-base);font-family:inherit;font-weight:600;border-radius:100px;font-size:13px;text-align:left;cursor:pointer;outline:none;transition:transform .1s ease}.copy-format-dropdown__btn:active{transform:scale(.98)}.copy-format-dropdown__btn:focus-visible{outline:2px solid var(--color-brand-base)}.chevron-icon{color:var(--color-text-muted);transition:transform .2s ease;font-size:14px}.chevron-icon.is-open{transform:rotate(180deg)}.copy-format-dropdown__popover{position:absolute;top:calc(100% + 8px);left:0;width:220px;box-sizing:border-box;background-color:var(--color-bg-base);border:1px solid var(--color-border-main);border-radius:22px;padding:8px;box-shadow:var(--shadow-lg),0 10px 24px var(--elevation-component);display:flex;flex-direction:column;gap:4px;z-index:1010;animation:popoverFadeIn .15s cubic-bezier(.16,1,.3,1) forwards}.copy-format-dropdown__option{width:100%;padding:8px 12px;font-size:13px;font-weight:500;color:var(--color-text-main);border-radius:12px;cursor:pointer;outline:none;box-sizing:border-box;transition:background-color .15s ease,color .15s ease}.copy-format-dropdown__option:hover,.copy-format-dropdown__option:focus-visible{background-color:var(--bg-overlay-subtle)}.copy-format-dropdown__option.is-selected{background-color:var(--color-brand-base);color:#fff;font-weight:600}.theme-checkbox-container{display:inline-block;position:relative;cursor:pointer;width:26px;height:26px}.theme-checkbox-input{position:absolute;opacity:0;width:0;height:0}.theme-checkbox-box{width:100%;height:100%;border:1px solid var(--color-border-dark);border-radius:6px;background-color:var(--color-bg-base);transition:background-color .15s,border-color .15s,box-shadow .15s;display:flex;align-items:center;justify-content:center;color:#fff}.theme-checkbox-container:hover:not(.is-disabled) .theme-checkbox-box{border-color:var(--color-brand-base);background-color:var(--color-brand-wash)}.theme-checkbox-input:focus-visible+.theme-checkbox-box{outline:2px solid var(--color-brand-base);outline-offset:2px}.theme-checkbox-input:checked+.theme-checkbox-box{background-color:var(--color-brand-base);border-color:var(--color-brand-base);box-shadow:var(--shadow-brand-sm)}.theme-checkbox-check{width:16px;height:16px;stroke-dasharray:22;stroke-dashoffset:22;opacity:0;transform:scale(.6);transition:stroke-dashoffset .2s ease-in-out,opacity .15s ease,transform .15s ease}.theme-checkbox-input:checked+.theme-checkbox-box .theme-checkbox-check{stroke-dashoffset:0;opacity:1;transform:scale(1)}.theme-checkbox-container.is-disabled{opacity:.35;cursor:not-allowed}.theme-checkbox-container.is-disabled .theme-checkbox-box{background-color:var(--color-bg-subtle);border-color:var(--color-border-light)}.theme-checkbox-container.is-disabled *{pointer-events:none}.copy-format-dropdown__separator{height:1px;background-color:var(--color-border-light);margin:4px 0}.copy-format-dropdown__option--custom{display:flex;align-items:center;gap:8px;font-weight:500}.pencil-icon{width:14px;height:14px;color:var(--color-text-muted)}.copy-format-dropdown__option--custom:hover .pencil-icon,.copy-format-dropdown__option--custom.is-selected .pencil-icon{color:inherit}.preview-container-wrapper{margin-top:24px;width:100%}.preview-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);margin-bottom:8px}.custom-preview-box{background-color:var(--color-bg-card-subtle);border:1px solid var(--color-border-main);border-radius:12px;padding:16px 20px;min-height:48px;display:flex;align-items:center;box-sizing:border-box;transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}.preview-container-wrapper.is-editing .custom-preview-box{border-color:var(--color-brand-base);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-brand-base) 15%,transparent);background-color:var(--color-bg-base)}.segmented-input-strip{display:flex;align-items:center;gap:6px;width:100%}.strip-input{border:1px solid var(--color-border-light);background-color:var(--color-bg-subtle);color:var(--color-text-main);padding:4px 8px;border-radius:6px;font-family:var(--font-mono);font-size:12px;min-width:32px;flex:1;text-align:center;outline:none;box-sizing:border-box;transition:border-color .15s ease,background-color .15s ease}.strip-input:focus{border-color:var(--color-brand-base);background-color:color-mix(in srgb,var(--color-brand-base) 6%,var(--color-bg-base))}.strip-input.prefix{flex:2;text-align:right}.strip-input.suffix{flex:2;text-align:left}.coord-token{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--color-brand-base);padding:0 2px;-webkit-user-select:none;user-select:none}.custom-done-btn{padding:6px 12px;background-color:var(--color-brand-base);color:#fff;border:none;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;margin-left:8px;transition:background-color .15s ease,transform .1s ease}.custom-done-btn:hover{background-color:var(--color-brand-hover)}.custom-done-btn:active{transform:scale(.96)}.static-preview-text{display:flex;justify-content:space-between;align-items:center;width:100%}.export-preview-box__code{margin:0;font-family:var(--font-mono);font-size:13px;line-height:1.6;color:var(--color-brand-base);word-break:break-all;white-space:pre-wrap}.inline-edit-trigger{background:none;border:none;color:var(--color-brand-base);font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;padding:4px 10px;border-radius:6px;background-color:var(--color-brand-wash);transition:background-color .15s ease,transform .1s ease}.inline-edit-trigger:hover{background-color:color-mix(in srgb,var(--color-brand-base) 15%,transparent)}.inline-edit-trigger:active{transform:scale(.96)}.ray{position:absolute;mix-blend-mode:difference}