/* Generated by tools/build-critical-css.mjs - do not edit.
   Landing-critical subset of css/index.css. The full stylesheet loads
   asynchronously after this one. Regenerate after editing index.css. */
:root { --font-family-base: 'Inter', sans-serif; --font-family: 'Inter', sans-serif; --color-primary: #2A9484; --color-primary-dark: #1B7769; --color-secondary: #2196F3; --color-secondary-dark: #1e88e5; --color-accent: #2196f3; --color-accent-dark: #fbc02d; --color-background: #f7f7f7; --color-surface: #ffffff; --color-border: #e0e0e0; --color-text-primary: #333333; --color-text-secondary: #666666; --color-text-on-primary: #ffffff; --color-text-on-secondary: #ffffff; --color-text-on-accent: #333333; --color-disabled: #cccccc; --color-disabled-bg: #eeeeee; --color-checkerboard-light: #f0f0f0; --color-checkerboard-dark: transparent; --spacing-xs: 0.25rem; --spacing-sm: 0.8rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --border-radius-sm: 4px; --border-radius-md: 16px; --border-radius-lg: 16px; --border-radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); --transition-speed: 0.2s ease-in-out; --overlay-fade-duration: 0.3s; --content-fade-delay: 0.2s; --content-fade-duration: 0.4s; }
*, ::before, ::after { box-sizing: border-box; margin: 0px; padding: 0px; }
button, input, select, textarea { font-family: inherit; }
body { font-family: var(--font-family-base); background-color: var(--color-background); color: var(--color-text-primary); display: flex; flex-direction: row; gap: 0px; max-width: 1200px; height: 100vh; margin: auto; line-height: 1.6; justify-content: center; overflow-x: auto; min-height: 800px; }
body::-webkit-scrollbar { display: none; }
#editorArea, #previewArea { display: flex; }
#editorArea { position: relative; overflow: hidden; overflow-x: hidden; overflow-y: hidden; height: 93vh; }
#editorScrollContent { overflow-y: auto; height: 100%; }
#editorScrollContent::-webkit-scrollbar { display: none; }
.editor-gradient-overlay-top { pointer-events: none; position: absolute; top: 0px; right: 0px; left: 0px; height: 30px; z-index: 10; }
.editor-gradient-overlay-bottom { pointer-events: none; position: absolute; right: 0px; bottom: 0px; left: 0px; height: 50px; z-index: 10; }
#previewArea { top: var(--spacing-xl); left: 0px; }
#uploadButtonWrapper { display: inline-block; transform-origin: center center; transition: transform 0.5s cubic-bezier(0.6, 0, 0.4, 1) 0.3s, opacity 0.3s linear 0.3s; transform: scaleX(1); opacity: 1; }
#uploadButtonWrapper.upload-choice-group { display: flex; align-items: center; gap: 8px; width: 242px; max-width: calc(-32px + 100vw); }
#uploadButtonWrapper #uploadLabel, #uploadButtonWrapper .paste-json-button { position: relative; display: flex; align-items: center; justify-content: center; height: 50px; min-height: 50px; min-width: 50px; padding: 0px; gap: 0px; box-sizing: border-box; overflow: hidden; border: 0px; border-radius: 999px; background: rgb(42, 148, 132); color: var(--color-text-on-primary); font: 500 1rem/1 var(--font-family-base); cursor: pointer; box-shadow: var(--shadow-sm); animation: auto ease 0s 1 normal none running none; transform: none; transition: flex-grow 360ms cubic-bezier(0.16, 1, 0.3, 1), background-color 180ms, transform 150ms, box-shadow 150ms; }
#uploadButtonWrapper #uploadLabel { flex: 0 0 50px; }
#uploadButtonWrapper .paste-json-button { flex: 1 1 50px; }
.upload-choice-icon, .paste-json-icon { width: 20px; height: 20px; flex: 0 0 20px; opacity: 1; fill: none; stroke: currentcolor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: width 340ms cubic-bezier(0.16, 1, 0.3, 1), flex-basis 340ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms cubic-bezier(0.16, 1, 0.3, 1); }
#uploadButtonWrapper #uploadLabel span, #uploadButtonWrapper .paste-json-button span { max-width: 0px; opacity: 0; white-space: nowrap; overflow: hidden; transition: max-width 360ms cubic-bezier(0.16, 1, 0.3, 1), opacity 220ms cubic-bezier(0.16, 1, 0.3, 1); }
#uploadButtonWrapper .paste-json-button span { max-width: 160px; opacity: 1; }
#uploadButtonWrapper .paste-json-button .paste-json-icon { width: 0px; flex-basis: 0px; opacity: 0; }
#uploadButtonWrapper.active-browse #uploadLabel, #uploadButtonWrapper:not(.js-hover-controlled):has(#uploadLabel:hover, #uploadLabel:focus-visible) #uploadLabel { flex-grow: 1; }
#uploadButtonWrapper.active-browse #uploadLabel span, #uploadButtonWrapper:not(.js-hover-controlled):has(#uploadLabel:hover, #uploadLabel:focus-visible) #uploadLabel span { max-width: 160px; opacity: 1; }
#uploadButtonWrapper.active-browse #uploadLabel .upload-choice-icon, #uploadButtonWrapper:not(.js-hover-controlled):has(#uploadLabel:hover, #uploadLabel:focus-visible) #uploadLabel .upload-choice-icon { width: 0px; flex-basis: 0px; opacity: 0; }
#uploadButtonWrapper.active-browse .paste-json-button, #uploadButtonWrapper:not(.js-hover-controlled):has(#uploadLabel:hover, #uploadLabel:focus-visible) .paste-json-button { flex-grow: 0; }
#uploadButtonWrapper.active-browse .paste-json-button .paste-json-icon, #uploadButtonWrapper:not(.js-hover-controlled):has(#uploadLabel:hover, #uploadLabel:focus-visible) .paste-json-button .paste-json-icon { width: 20px; flex-basis: 20px; opacity: 1; }
#uploadButtonWrapper.active-browse .paste-json-button span, #uploadButtonWrapper:not(.js-hover-controlled):has(#uploadLabel:hover, #uploadLabel:focus-visible) .paste-json-button span { max-width: 0px; margin-left: 0px; opacity: 0; }
#uploadButtonWrapper #uploadLabel:hover, #uploadButtonWrapper .paste-json-button:hover { background: rgb(27, 119, 105); }
@media (prefers-reduced-motion: reduce) { #uploadButtonWrapper #uploadLabel, #uploadButtonWrapper .paste-json-button, #uploadButtonWrapper span, #uploadButtonWrapper svg { transition: none; } }
#uploadButtonWrapper.animate-out, #uploadButtonWrapper[hidden] { display: none !important; }
.upload-progress-wrapper { box-sizing: border-box; display: flex; align-items: center; width: 242px; max-width: calc(-32px + 100vw); height: 50px; min-height: 50px; padding: 0px; user-select: none; animation: 220ms cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal forwards running uploadProgressIn; transition: opacity 200ms, transform 200ms; }
.upload-progress-wrapper[hidden] { display: none !important; }
.upload-progress-wrapper.animate-out { transform: translateY(-10px) scale(0.96); opacity: 0; pointer-events: none; }
.upload-progress-track { width: 100%; height: 14px; background: rgba(42, 148, 132, 0.16); border-radius: 999px; overflow: hidden; position: relative; }
.upload-progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, rgb(42, 148, 132), rgb(54, 176, 158)); border-radius: 999px; transition: width 160ms cubic-bezier(0.4, 0, 0.2, 1); }
.upload-progress-wrapper.is-indeterminate .upload-progress-bar { width: 40%; transition: none; animation: 1400ms cubic-bezier(0.65, 0, 0.35, 1) 0s infinite normal none running uploadProgressSlide; }
@keyframes uploadProgressSlide { 
  0% { transform: translateX(-115%); }
  100% { transform: translateX(265%); }
}
@media (prefers-reduced-motion: reduce) { .upload-progress-wrapper.is-indeterminate .upload-progress-bar { animation-duration: 2600ms; } }
@keyframes uploadProgressIn { 
  0% { opacity: 0; transform: translateY(10px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0px) scale(1); }
}
#uploadWrapper { box-sizing: border-box; position: relative; width: min(100%, 560px); padding: 145px 24px 195px; min-height: 100svh; }
.home-credit { position: fixed; inset: auto 0px 36px; display: flex; align-items: center; justify-content: center; gap: 12px; color: rgb(115, 115, 115); font-size: 13px; font-weight: 500; transition: opacity 280ms linear; }
.home-credit a { color: inherit; text-decoration: none; }
.home-credit a:hover { color: rgb(49, 61, 54); }
.home-social { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: 0 0 28px; }
.home-social svg { display: block; width: 16px; height: 16px; flex-shrink: 0; }
.home-social[aria-label="Ishant on X"] svg { width: 14px; height: 14px; }
body:has(#uploadWrapper:not([style*="display: none"])) { min-height: 100svh; height: auto; width: 100%; box-sizing: border-box; overflow-x: clip; }
html:has(#uploadWrapper:not([style*="display: none"])) { overflow-x: clip; }
body:not(.has-open-animation) .window-container { display: none; }
.recent-drawer-overlay { opacity: 0; pointer-events: none; position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px; inset: 0px; z-index: 998; }
.recent-drawer-overlay[hidden] { display: none !important; }
.recent-drawer { display: flex; transform: translateX(-50%); position: fixed; bottom: 16px; left: 50%; overflow: hidden; overflow-x: hidden; overflow-y: hidden; max-height: calc(-16px + 85vh); width: min(94vw, 520px); z-index: 999; }
.recent-drawer[hidden] { display: none !important; }
body.has-open-animation .recent-drawer, body.has-open-animation .recent-drawer-overlay, #uploadWrapper.animate-out ~ .recent-drawer, #uploadWrapper.animate-out ~ .recent-drawer-overlay { display: none !important; }
.recent-drawer-handle { display: flex; height: 40px; width: 100%; }
.recent-drawer-history-icon { display: none; height: 17px; width: 17px; }
.recent-drawer:not(.is-open):not(.is-peeking) .recent-drawer-history-icon { display: block; }
.recent-drawer:not(.is-open):not(.is-peeking) .recent-drawer-title-count { display: none; }
.recent-drawer-handle-left { display: inline-flex; }
.recent-drawer-chevron-circle { display: inline-flex; height: 26px; width: 26px; }
.recent-drawer-chevron { height: 16px; width: 16px; }
.recent-drawer-body { display: flex; position: relative; overflow: visible; overflow-x: visible; overflow-y: visible; max-height: calc(-52px + 85vh); width: 100%; }
.recent-files-list { display: flex; width: 100%; }
.recent-show-more-btn { display: none !important; }
.recent-carousel-arrow { display: flex; transform: translateY(-50%); position: absolute; top: calc(50% - 20px); height: 36px; width: 36px; z-index: 10; }
.recent-carousel-arrow:hover { transform: translateY(-50%) scale(1.08); }
.recent-carousel-arrow svg { display: block; height: 18px; width: 18px; }
.recent-carousel-prev { left: 10px; }
.recent-carousel-next { right: 10px; }
.recent-carousel-arrow[hidden], .recent-drawer:not(.is-open):not(.is-peeking) .recent-carousel-arrow { display: none !important; }
#recentSaveStatus { transform: translateX(-50%); position: fixed; bottom: 10px; left: 50%; max-width: min(90vw, 480px); z-index: 10000; }
#recentSaveStatus:empty { display: none; }
@media (max-width: 600px) { .recent-drawer { width: calc(-16px + 100vw); } }
#uploadWrapper { display: flex; gap: 28px; flex-direction: column-reverse; margin: auto; justify-content: center; align-items: center; opacity: 1; transition: transform 450ms cubic-bezier(0.8, 0, 0.9, 0.9), opacity 280ms linear; text-align: center; }
.drag-drop-overlay { width: 18rem; height: 18rem; cursor: pointer; z-index: 99; transition: all var(--transition-speed); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 0px; box-sizing: border-box; }
#dragDropLottie { position: relative; z-index: 2; margin-bottom: -10px; pointer-events: none; width: 120%; }
.chat-bubble { white-space: pre-line; min-width: 180px; min-height: 20px; line-height: 20px; box-sizing: content-box; text-align: left; text-wrap-style: balance; position: absolute; top: auto; bottom: calc(100% - 66px); left: 10px; background-color: rgb(241, 237, 211); color: rgb(49, 61, 54); font-size: 14px; font-weight: 600; padding: 12px 30px; border-radius: 999px; z-index: 1; }
.chat-bubble::after { content: ""; position: absolute; width: 16px; height: 16px; background-color: rgb(241, 237, 211); transform: rotate(45deg); bottom: -8px; left: 40px; border-bottom-right-radius: 3px; z-index: 0; }
@keyframes slideUpFadeIn { 
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0px); }
}
@keyframes slideDownFadeIn { 
  0% { opacity: 0; transform: translateY(-40px); }
  100% { opacity: 1; transform: translateY(0px); }
}
#uploadLabel { animation: 1350ms cubic-bezier(0.1, 0.1, 0.1, 1) 0s 1 normal forwards running slideUpFadeIn; }
.drag-drop-overlay { animation: 950ms cubic-bezier(0.1, 0.1, 0.1, 1) 0s 1 normal forwards running slideDownFadeIn; }
#uploadLabel { display: inline-block; padding: var(--spacing-md) var(--spacing-lg); background-color: rgb(42, 148, 132); color: var(--color-text-on-primary); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; border-radius: var(--border-radius-pill); cursor: pointer; font-size: 1rem; font-weight: 500; transition: background-color var(--transition-speed), transform var(--transition-speed), box-shadow var(--transition-speed); box-shadow: var(--shadow-sm); }
#uploadLabel:hover { background-color: rgb(27, 119, 105); transform: translateY(-2px); box-shadow: var(--shadow-md); }
#fileInput { display: none; }
#mainContent { display: none; visibility: hidden; opacity: 0; pointer-events: none; transform: scale(0.6); width: 100%; }
.btn { font-family: var(--font-family-base); padding: var(--spacing-sm) var(--spacing-md); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; border-radius: var(--border-radius-pill); cursor: pointer; font-size: 0.9rem; font-weight: 500; transition: background-color var(--transition-speed), transform var(--transition-speed), box-shadow var(--transition-speed), opacity var(--transition-speed); display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-sm); text-decoration: none; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:disabled, .btn--loading { background-color: var(--color-disabled-bg); color: var(--color-disabled); cursor: not-allowed; box-shadow: none; transform: none; opacity: 0.5; }
.btn--primary { background-color: var(--color-primary); color: var(--color-text-on-primary); }
.btn--primary:hover:not(:disabled):not(.btn--loading) { background-color: var(--color-primary-dark); }
.btn--secondary:hover:not(:disabled):not(.btn--loading) { background-color: var(--color-secondary-dark); }
.btn--accent:hover:not(:disabled):not(.btn--loading) { background-color: var(--color-accent-dark); }
.btn--danger { background-color: rgb(229, 115, 115); color: white; }
.btn--danger:hover:not(:disabled) { background-color: rgb(239, 83, 80); }
.delete-animation-btn { height: 36px; width: 36px; }
.delete-animation-btn:hover { width: 150px; }
.delete-animation-btn .btn-text { opacity: 0; overflow: hidden; overflow-x: hidden; overflow-y: hidden; max-width: 0px; }
.delete-animation-btn:hover .btn-text { opacity: 1; max-width: 100px; }
.btn--icon { height: 2.5rem; width: 2.5rem; }
#downloadJsonBtn:hover:not(:disabled) { background-color: var(--color-secondary-dark); }
#openStateMachineBuilderBtn:hover:not(:disabled) { background-color: rgb(224, 224, 224); }
#downloadVideoBtn:hover:not(:disabled) { background-color: var(--color-accent-dark); background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23333\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/><polyline points=\"7 10 12 15 17 10\"/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"/></svg>"); }
#downloadGifBtn:hover:not(:disabled):not(.btn--loading) { background-color: var(--color-accent-dark); background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23333\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/><polyline points=\"7 10 12 15 17 10\"/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"/></svg>"); }
#openOverlayBtn:not(:disabled) { opacity: 1; }
#openOverlayBtn:hover:not(:disabled) { background-color: rgb(224, 224, 224); box-shadow: none; }
#openCropBtn:not(:disabled) { opacity: 1; }
#openCropBtn:hover:not(:disabled) { background-color: rgb(224, 224, 224); box-shadow: none; }
.loading-spinner { display: none; position: absolute; top: 50%; left: 50%; height: 1.2rem; width: 1.2rem; }
@keyframes spin { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
input[type="text"], input[type="number"], select { padding: var(--spacing-sm) var(--spacing-md); font-size: 0.9rem; border: 1px solid var(--color-border); border-radius: var(--border-radius-pill); background-color: var(--color-surface); transition: border-color var(--transition-speed), box-shadow var(--transition-speed); width: auto; min-width: 60px; }
input[type="text"]:focus, input[type="number"]:focus, select:focus { outline: none; border-color: var(--color-primary); box-shadow: rgba(76, 175, 80, 0) 0px 0px 0px 2px; }
input[type="color"] { appearance: none; width: 28px; height: 28px; padding: 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; border-radius: 50%; cursor: pointer; vertical-align: middle; transition: transform var(--transition-speed), box-shadow var(--transition-speed); box-shadow: var(--shadow-sm); }
input[type="color"]:hover { transform: scale(1.1); box-shadow: var(--shadow-md); }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0px; border-radius: 50%; }
input[type="color"]::-webkit-color-swatch { border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 50%; }
#colorEditor, #stopEditor, #animatedColorEditor, #animatedGradientEditor, #textEditorContainer { width: 85%; }
.preview-selected-image[hidden] { display: none; }
.asset-card-list { overflow-y: auto; max-height: 60vh; width: 85%; }
.asset-card-list::-webkit-scrollbar { display: none; }
.asset-card-btn:hover:not(:disabled) { background-color: rgb(229, 231, 235); border-color: rgb(156, 163, 175); }
.asset-card-reset-enabled:not(:disabled) { background-color: rgb(209, 250, 229); border-color: rgb(110, 231, 183); color: rgb(5, 150, 105); }
.asset-card-reset-enabled:hover:not(:disabled) { background-color: rgb(167, 243, 208); border-color: rgb(52, 211, 153); }
.preview-selection-dismiss { display: flex; width: fit-content; max-width: 90%; }
.preview-selection-dismiss[hidden] { display: none; }
.preview-selection-box { pointer-events: none; position: absolute; z-index: 9; }
.preview-selection-box[hidden] { display: none; }
.preview-selection-box i { position: absolute; height: 5px; width: 5px; }
.preview-selection-box i:nth-child(1) { top: -3px; left: -3px; }
.preview-selection-box i:nth-child(2) { top: -3px; right: -3px; }
.preview-selection-box i:nth-child(3) { right: -3px; bottom: -3px; }
.preview-selection-box i:nth-child(4) { bottom: -3px; left: -3px; }
#animatedColorLabel::after { display: block; }
.grouping-toggle { display: inline-flex; }
.editor-toolbar { display: flex; width: 85%; }
.editor-toolbar[hidden] { display: none; }
.editor-search-field { display: flex; position: relative; height: 38px; max-width: 340px; }
.editor-search-field .editor-search-input { height: 38px; width: 100%; }
.editor-search-icon { display: flex; transform: translateY(-50%); position: absolute; top: calc(50% - 1px); right: 10px; height: 24px; width: 24px; z-index: 1; }
.editor-search-icon svg { height: 15px; width: 15px; }
.editor-refresh-btn { display: inline-flex; height: 38px; }
.editor-refresh-btn:hover:not(:disabled) { background: rgb(240, 240, 240); color: var(--color-text-primary); border-color: rgb(156, 163, 175); }
.editor-refresh-btn:disabled { opacity: 0.7; }
.section-card { width: 100%; max-width: 400px; }
.section-card h3, .editor-heading { display: block; }
.editor-heading { width: 85%; }
.json-header, .gif-settings-header { display: flex; }
.json-header-controls, .gif-header-controls { display: flex; }
.gif-settings { display: flex; }
.gif-settings .color-input-group-bg { display: inline-flex; }
.gif-settings .color-input-group-bg input[type="text"] { width: 70px; }
.gif-settings .color-input-group-bg input[type="color"] { height: 20px; width: 20px; }
.switch { display: inline-block; position: relative; height: 24px; width: 44px; }
.switch input { opacity: 0; height: 0px; width: 0px; }
.slider { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; inset: 0px; }
.slider::before { position: absolute; bottom: 3px; left: 3px; height: 18px; width: 18px; }
.switch input:checked + .slider::before { transform: translateX(20px); }
input[type="range"] { height: 8px; width: 100%; }
input[type="range"]::-webkit-slider-thumb { height: 20px; width: 20px; }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.1); }
.window-container { display: flex; opacity: 0; position: absolute; overflow: hidden; overflow-x: hidden; overflow-y: hidden; width: 100%; max-width: 400px; z-index: 98; }
.window-header { display: flex; position: relative; z-index: 10; }
.window-title { overflow: hidden; overflow-x: hidden; overflow-y: hidden; }
.window-close { height: 20px; width: 20px; }
.window-body { display: flex; position: relative; overflow: visible; overflow-x: visible; overflow-y: visible; width: 100%; }
#lottiePreview { display: block; position: relative; height: 100%; max-height: 100%; width: 100%; max-width: 100%; }
svg { display: block; }
.preview-bg-toggle { display: flex; position: absolute; top: var(--spacing-sm); right: var(--spacing-sm); z-index: 10; }
.preview-bg-toggle .switch { transform: scale(0.8); }
.overlay { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); display: none; justify-content: center; align-items: center; z-index: 1000; padding: var(--spacing-md); }
.overlay-content { background: var(--color-surface); width: 80%; height: 80%; max-height: 87vh; margin-top: 74px; border-radius: var(--border-radius-lg); box-shadow: var(--shadow-lg); position: relative; overflow-y: auto; display: flex; flex-direction: column; }
.overlay-close { font-family: Inter; font-weight: 600; border: 0px; color: rgb(255, 255, 255); position: absolute; top: 4%; left: calc(50% - 110px); cursor: pointer; height: 36px; border-radius: 999px; background-color: rgba(6, 6, 6, 0.59); background-repeat: no-repeat; background-position: center center; background-size: 55% auto; padding: 0px 17px 0px 8px; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s, transform 650ms cubic-bezier(0.6, 0, 0.4, 1), opacity 500ms; transform: translateY(-190%); opacity: 0; gap: 5px; }
.overlay-close img { width: 18px; height: auto; margin-bottom: 1px; }
.overlay-close:hover { background-color: rgba(229, 69, 69, 0.56); transform: scale(1.06); }
.overlay-close:focus { outline: none; }
#saveAndCloseBtn { background-color: rgba(26, 192, 137, 0.47); left: 50%; padding: 0px 20px 0px 16px; }
#saveAndCloseBtn:hover { background-color: rgb(17, 155, 109); }
.overlay h3 { margin-bottom: var(--spacing-lg); font-size: 1.2rem; color: var(--color-text-primary); flex-shrink: 0; }
.setting-row { margin-bottom: var(--spacing-lg); display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-sm); flex-shrink: 0; }
.setting-row label { font-weight: 500; font-size: 0.9rem; color: var(--color-text-primary); }
.setting-row .controls { display: flex; align-items: center; gap: var(--spacing-sm); }
.setting-row input[type="text"] { width: 100px; }
#customContent { width: 100%; border: 1px solid var(--color-border); border-radius: var(--border-radius-md); flex-grow: 1; }
#gifContainer { position: absolute; top: -9999px; left: -9999px; width: 0px; height: 0px; overflow: hidden; }
@media (max-width: 768px) { body { flex-direction: column; padding: var(--spacing-lg); }
body.postcard-mode-active { overflow: hidden !important; }
body.postcard-mode-active #top-bar { display: none !important; }
body.postcard-mode-active .overlay-close { display: none !important; }
#editorArea { max-height: none; }
#previewArea { position: static; width: 100%; }
.window-container, .section-card { max-width: none; }
.overlay-content { } }
.sr-only { position: absolute; overflow: hidden; overflow-x: hidden; overflow-y: hidden; height: 1px; width: 1px; }
.gif-settings .color-input-group-bg { visibility: visible; opacity: 1; }
.gif-settings > div { display: flex; position: relative; }
.overlay { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); display: flex; justify-content: center; align-items: center; z-index: 1000; padding: var(--spacing-md); opacity: 0; pointer-events: none; transition: opacity 300ms linear 350ms, pointer-events linear 600ms; }
.overlay-content { background: var(--color-surface); max-width: 1024px; width: 100%; height: 90%; max-height: 87vh; margin-top: 74px; border-radius: var(--border-radius-lg); box-shadow: var(--shadow-lg); position: relative; overflow-y: auto; display: flex; flex-direction: column; opacity: 0; transform: translateY(60px); transition: transform 350ms cubic-bezier(0.9, 0, 0.9, 0.9), opacity 300ms linear; }
.confirm-dialog-panel { background-color: var(--color-surface); padding: var(--spacing-lg); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-lg); width: 90%; max-width: 400px; text-align: center; transform: scale(0.95); opacity: 0; transition: transform 0.2s ease-out, opacity 0.2s ease-out; }
.paste-json-overlay { z-index: 1002; background: rgba(0, 0, 0, 0.48); backdrop-filter: blur(8px); transition: opacity 220ms cubic-bezier(0.16, 1, 0.3, 1), backdrop-filter 220ms cubic-bezier(0.16, 1, 0.3, 1), pointer-events linear 220ms; }
.paste-json-panel { width: min(680px, 100% - 32px); background: var(--color-surface); border-radius: var(--border-radius-lg); border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: rgba(0, 0, 0, 0.22) 0px 24px 48px -12px, rgba(0, 0, 0, 0.12) 0px 0px 1px; overflow: hidden; transform-origin: center center; transform: scale(0.92); opacity: 0; transition: transform 200ms cubic-bezier(0.4, 0, 1, 1), opacity 180ms ease-in; }
.paste-json-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-md); padding: 20px 22px 14px; border-bottom: 1px solid var(--color-border-light, #eee); }
.paste-json-header h3 { margin: 0px 0px 5px; color: var(--color-text-primary); font-size: 1.15rem; }
.paste-json-close { width: 32px; height: 32px; flex: 0 0 auto; border: 0px; border-radius: 50%; background: transparent; color: var(--color-text-secondary); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.paste-json-close:hover, .paste-json-close:focus-visible { background: var(--color-bg-lighter, #f0f0f0); }
.paste-json-input { position: relative; margin: 20px 22px 8px; }
.paste-json-input-actions { position: absolute; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 8px; }
.paste-json-mini[hidden] { display: none; }
.paste-json-grab { width: 32px; height: 32px; flex: 0 0 32px; display: flex; align-items: center; justify-content: center; padding: 0px; border: 0px; border-radius: 50%; background: rgb(42, 148, 132); color: rgb(255, 255, 255); cursor: pointer; box-shadow: var(--shadow-sm); transition: background-color var(--transition-speed); }
.paste-json-grab:hover { background: rgb(27, 119, 105); }
.paste-json-grab svg { width: 17px; height: 17px; fill: none; stroke: currentcolor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#pasteJsonTextarea { display: block; width: 100%; min-height: 280px; max-height: 55vh; margin: 0px; padding: 14px 14px 52px; box-sizing: border-box; resize: none; border: 1px solid var(--color-border); border-radius: var(--border-radius-md); background: rgb(251, 251, 251); color: var(--color-text-primary); font: 13px / 1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }
#pasteJsonTextarea:focus { outline: rgba(42, 148, 132, 0.4) solid 2px; border-color: rgb(42, 148, 132); outline-offset: 1px; }
.paste-json-footer { display: flex; justify-content: center; gap: 12px; padding: 14px 22px 20px; }
.paste-json-footer .btn { font-family: var(--font-family-base); font-size: 0.95rem; font-weight: 500; padding: 9px 22px; border-radius: var(--border-radius-pill); }
#cancelPasteJsonBtn { background: rgb(235, 238, 237); color: rgb(55, 65, 81); box-shadow: none; }
#cancelPasteJsonBtn:hover { background: rgb(223, 227, 224); color: rgb(17, 24, 39); }
#loadPastedJsonBtn { background-color: rgb(42, 148, 132); color: rgb(255, 255, 255); box-shadow: rgba(42, 148, 132, 0.25) 0px 2px 6px; }
#loadPastedJsonBtn:hover:not(:disabled) { background-color: rgb(27, 119, 105); box-shadow: rgba(42, 148, 132, 0.35) 0px 4px 10px; }
.confirm-dialog-panel h3 { margin-top: 0px; margin-bottom: var(--spacing-md); font-size: 1.2rem; color: var(--color-text-primary); }
.confirm-dialog-panel p { margin-bottom: var(--spacing-xs); color: var(--color-text-secondary); }
.confirm-dialog-warning { font-size: 0.8rem; color: rgb(229, 115, 115); margin-top: var(--spacing-md); }
.confirm-dialog-buttons { display: flex; justify-content: center; gap: var(--spacing-md); margin-top: var(--spacing-lg); }
.window-title[contenteditable="true"] { display: inline-block; }
#emptyStateDiv { display: flex; pointer-events: none; max-height: 900px; width: 100%; }
#emptyStateDiv img { opacity: 0.7; max-height: 320px; width: 280px; max-width: 90%; }
#midsection { height: 100%; }
.color-row:hover .layer-name-pill:not(.hidden) .pill-icon, .stop-row:hover .layer-name-pill:not(.hidden) .pill-icon, .gradient-accordion:hover > :is(.gradient-header, .accordion-header) .layer-name-pill:not(.hidden) .pill-icon, .layer-name-pill:focus-visible .pill-icon, .layer-name-pill.hidden .pill-icon { display: none; }
.color-row:hover .layer-name-pill:not(.hidden) .property-eye-visible, .stop-row:hover .layer-name-pill:not(.hidden) .property-eye-visible, .gradient-accordion:hover > :is(.gradient-header, .accordion-header) .layer-name-pill:not(.hidden) .property-eye-visible, .layer-name-pill:not(.hidden):focus-visible .property-eye-visible, .layer-name-pill.hidden .property-eye-invisible { display: inline-block; }
#openAssetReplacerBtn:not(:disabled) { opacity: 1; }
#openAssetReplacerBtn:hover:not(:disabled) { background-color: rgb(224, 224, 224); box-shadow: none; }
#headerLottie { cursor: pointer; width: 150px; height: 50px; }
.coffeeRoast-hidden, .coffeeRoast-visible { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); backdrop-filter: blur(0px); z-index: 1000; display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: background-color var(--overlay-fade-duration) ease-in-out,
    backdrop-filter var(--overlay-fade-duration) ease-in-out,
    -webkit-backdrop-filter var(--overlay-fade-duration) ease-in-out,
    opacity var(--overlay-fade-duration) ease-in-out,
    visibility 0s linear var(--overlay-fade-duration); }
#freshBrewFrame { width: 400px; height: 600px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; }
#top-bar { max-width: 1200px; position: absolute; display: flex; left: 50%; top: 0px; width: 100%; height: 80px; transform: translateX(-50%); }
.page-logo { max-width: 700px; height: 36px; z-index: 100; margin-top: 3px; margin-left: 4px; }
.lottie-player-controls { display: flex; position: relative; width: 100%; z-index: 10; }
.control-button { display: flex; }
.control-button svg { height: 20px; width: 20px; }
#lottieSeekbar { height: 12px; }
#lottieSeekbar::-webkit-slider-thumb { height: 16px; width: 16px; }
.speed-control-pill { display: flex; }
.speed-slider-popup { display: none; position: absolute; right: var(--spacing-md); bottom: calc(100% + var(--spacing-sm)); width: 250px; z-index: 10; }
.speed-slider-popup input[type="range"] { height: 8px; width: 100%; }
.speed-slider-popup input[type="range"]::-webkit-slider-thumb { height: 20px; width: 20px; }
.speed-slider-popup input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.1); }
.dismiss-speed-popup svg { height: 16px; width: 16px; }
.info-pill { pointer-events: none; position: absolute; bottom: var(--spacing-sm); left: var(--spacing-sm); z-index: 10; }
.lottie-player-controls + #animationDurationPill { bottom: calc(var(--spacing-sm) + 60px); }
.preview-controls-top-left, .preview-bg-toggle, #deleteAnimationBtn, #animationDurationPill { opacity: 0; pointer-events: none; }
.window-container:hover .preview-controls-top-left, .window-container:hover .preview-bg-toggle, .window-container:hover #deleteAnimationBtn, .window-container:hover #animationDurationPill { opacity: 1; pointer-events: auto; }
#lottieFileChips { overflow: auto hidden; overflow-x: auto; overflow-y: hidden; }
.all-chips-overlay-backdrop { display: none; opacity: 0; position: fixed; top: 0px; left: 0px; height: 100%; width: 100%; z-index: 1000; }
.all-chips-overlay-panel { display: flex; opacity: 0; transform: translateY(-20px); overflow: hidden; overflow-x: hidden; overflow-y: hidden; height: auto; max-height: 80vh; width: 90%; max-width: 450px; }
.all-chips-overlay-header { display: flex; }
.all-chips-overlay-close-btn { height: 28px; width: 28px; }
.all-chips-overlay-list-container { overflow-y: auto; }
#uploadMultipleLabel, #uploadWrapper > div:has(#uploadMultipleLabel) { display: none !important; }
.window-container.dragover-preview { outline: rgb(76, 175, 80) dashed 2px; outline-offset: -2px; }
.state-machine-pill { display: inline-flex; height: 36px; }
#stateMachineBtnView { display: flex; height: 100%; }
.pill-separator { height: 16px; width: 1px; }
.pill-icon-btn { display: flex; height: 100%; width: 32px; }
.pill-icon-btn svg { height: 20px; width: 20px; }
.pill-default-icon { height: 20px; width: 20px; }
.window-share-btn { display: flex; height: 20px; width: auto; }
#shareModalOverlay { display: none; z-index: 1001; }
.share-modal-panel { display: flex; opacity: 0; transform: scale(0.95); width: 90%; max-width: 500px; }
.share-modal-header { display: flex; }
.share-modal-body { display: flex; overflow-y: auto; max-height: 60vh; }
.share-modal-footer { display: flex; }
.window-maximize-btn { display: inline-flex; height: 20px; width: 20px; }
#maximizePreviewOverlay { display: none; z-index: 1000; }
.maximize-preview-panel { display: flex; opacity: 0; transform: scale(0.95); height: 80vh; width: 80vw; }
.maximize-preview-header { display: flex; }
#lottiePreviewMaximized { overflow: hidden; overflow-x: hidden; overflow-y: hidden; height: 100%; width: 100%; }
.export-tabs { display: flex; }
.export-tab.active { height: 30px; }
.segmented-control { display: flex; width: fit-content; }
#videoExportContent { display: flex; }
#gifExportContent { display: flex; }
.custom-dropdown-container { position: relative; }
.custom-dropdown-trigger { display: flex; height: 36px; width: 100%; }
.custom-dropdown-options { display: none; position: absolute; top: calc(100% + 6px); left: -80px; overflow: hidden; overflow-x: hidden; overflow-y: hidden; width: 200px; z-index: 100; }
@keyframes fadeIn { 
  0% { opacity: 0; transform: translateY(-5px); }
  100% { opacity: 1; transform: translateY(0px); }
}
.maximize-player-controls { display: flex; width: 100%; }
#maxSeekbar { height: 6px; }
#closeMaximizePreviewBtn { display: flex; opacity: 0.7; position: static !important; height: 30px; width: 30px; }
#closeMaximizePreviewBtn svg { height: 18px; width: 18px; }
#closeMaximizePreviewBtn:hover { opacity: 1; }
#postcardLandingWrapper { display: flex; position: fixed; top: 0px; left: 0px; height: 100vh; width: 100%; z-index: 200; }
#postcardLandingWrapper.animate-out { transform: scale(0.95) translateY(-20px); opacity: 0; pointer-events: none; }
#postcardLoadingText { opacity: 0; }
#customContent { width: 100vw; height: 100vh; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; display: block; max-width: 100%; }
@keyframes textModalSlideIn { 
  0% { transform: translateY(-20px); opacity: 0; }
  100% { transform: translateY(0px); opacity: 1; }
}
.badge-experimental { display: inline-block; }