.shimmering-text{display:inline-block;background:linear-gradient(90deg,var(--shimmer-color, #ffffff) 0%,var(--shimmer-color, #ffffff) calc(50% - var(--shimmer-spread, 20%)),var(--shimmer-highlight, #ffffff) 50%,var(--shimmer-color, #ffffff) calc(50% + var(--shimmer-spread, 20%)),var(--shimmer-color, #ffffff) 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:shimmer-sweep var(--shimmer-duration, 2s) linear infinite}@keyframes shimmer-sweep{0%{background-position:100% center}to{background-position:-100% center}}.loader-container{border-radius:60px;padding:60px 80px;display:flex;align-items:center;gap:32px;box-shadow:0 20px 60px #0006,0 0 0 1px #ffffff0d inset;transition:background .3s ease,padding .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);width:fit-content}.loader-container:not(:has(.thinking-text)){padding:60px}.matrix-wrapper{position:relative;display:flex;align-items:center;justify-content:center}.matrix-svg{display:block;overflow:visible}.matrix-wrapper.hdr-glow{position:relative}.matrix-wrapper.hdr-glow:before{content:"";position:absolute;inset:calc(-30px * var(--glow-intensity, 1));background:radial-gradient(circle at center,var(--glow-color),transparent 70%);opacity:calc(.4 * var(--glow-intensity, 1));filter:blur(calc(25px * var(--glow-intensity, 1)));z-index:-1;pointer-events:none}.matrix-off-layer rect{transition:fill .3s ease}.matrix-on-layer rect{transition:opacity .08s ease-out,fill .3s ease}.thinking-text{font-size:72px;font-weight:500;letter-spacing:-1px;transition:color .3s ease;white-space:nowrap}@media (max-width: 900px){.loader-container{padding:50px 60px;border-radius:40px;flex-direction:column;gap:24px}.loader-container:not(:has(.thinking-text)){padding:50px}.thinking-text{font-size:48px}}@media (max-width: 500px){.loader-container{padding:40px;border-radius:30px}.loader-container:not(:has(.thinking-text)){padding:40px}.thinking-text{font-size:36px}}.matrix-wrapper.loader-intro-fade{animation:loaderFadeIn var(--loader-transition-duration, .3s) ease-out forwards}.matrix-wrapper.loader-intro-scale{animation:loaderScaleIn var(--loader-transition-duration, .3s) ease-out forwards}.matrix-wrapper.loader-intro-slide-up{animation:loaderSlideUp var(--loader-transition-duration, .3s) ease-out forwards}.matrix-wrapper.loader-intro-bounce{animation:loaderBounceIn var(--loader-transition-duration, .3s) cubic-bezier(.68,-.55,.265,1.55) forwards}.matrix-wrapper.loader-outro-fade{animation:loaderFadeOut var(--loader-transition-duration, .3s) ease-in forwards}.matrix-wrapper.loader-outro-scale{animation:loaderScaleOut var(--loader-transition-duration, .3s) ease-in forwards}.matrix-wrapper.loader-outro-slide-down{animation:loaderSlideDown var(--loader-transition-duration, .3s) ease-in forwards}.matrix-wrapper.loader-outro-bounce{animation:loaderBounceOut var(--loader-transition-duration, .3s) ease-in forwards}@keyframes loaderFadeIn{0%{opacity:0}to{opacity:1}}@keyframes loaderScaleIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes loaderSlideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes loaderBounceIn{0%{opacity:0;transform:scale(.3)}50%{transform:scale(1.05)}to{opacity:1;transform:scale(1)}}@keyframes loaderFadeOut{0%{opacity:1}to{opacity:0}}@keyframes loaderScaleOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}@keyframes loaderSlideDown{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(20px)}}@keyframes loaderBounceOut{0%{opacity:1;transform:scale(1)}50%{transform:scale(1.05)}to{opacity:0;transform:scale(.3)}}.color-picker-container{display:flex;flex-direction:column;gap:12px;width:100%}.color-picker-selection{position:relative;width:100%;height:140px;border-radius:10px;cursor:crosshair;overflow:hidden;box-shadow:inset 0 0 0 1px #0000001a,0 1px 3px #00000014}.app.dark .color-picker-selection{box-shadow:inset 0 0 0 1px #ffffff14,0 1px 3px #0000004d}.color-picker-cursor{position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid white;box-shadow:0 0 0 1px #0000004d,0 2px 4px #0003;transform:translate(-50%,-50%);pointer-events:none}.color-slider{position:relative;display:flex;align-items:center;width:100%;height:16px;touch-action:none;-webkit-user-select:none;user-select:none}.color-slider-track{position:relative;height:12px;width:100%;flex-grow:1;border-radius:6px;overflow:hidden;box-shadow:inset 0 0 0 1px #00000014,0 1px 2px #0000000a}.app.dark .color-slider-track{box-shadow:inset 0 0 0 1px #ffffff14,0 1px 2px #0003}.color-slider-range{position:absolute;height:100%}.color-slider-thumb{display:block;width:18px;height:18px;background:#fff;border-radius:50%;box-shadow:0 1px 4px #00000026,0 0 0 1px #0000000d;cursor:grab;transition:transform .1s ease,box-shadow .1s ease}.color-slider-thumb:hover{transform:scale(1.1);box-shadow:0 2px 8px #0003,0 0 0 1px #0000000d}.color-slider-thumb:active{cursor:grabbing;transform:scale(1.05)}.color-slider-thumb:focus{outline:none;box-shadow:0 0 0 3px #007aff40,0 1px 4px #00000026}.hue-track{background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.alpha-track{background-image:linear-gradient(90deg,transparent,var(--alpha-color, #000)),repeating-conic-gradient(rgba(128,128,128,.15) 0% 25%,transparent 0% 50%);background-size:100% 100%,8px 8px}.color-picker-eyedropper{width:36px;height:36px;padding:0;display:flex;align-items:center;justify-content:center;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;color:var(--text-secondary);cursor:pointer;transition:all .15s ease;flex-shrink:0}.color-picker-eyedropper:hover{background:var(--bg-secondary);color:var(--text-primary);border-color:var(--accent-color)}.color-picker-eyedropper:active{transform:scale(.95)}.color-picker-format-select{height:36px;padding:0 28px 0 10px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;color:var(--text-primary);font-size:11px;font-weight:600;letter-spacing:.5px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;transition:all .15s ease;flex-shrink:0}.color-picker-format-select:hover{border-color:var(--accent-color)}.color-picker-format-select:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 3px #007aff1f}.color-picker-format{flex:1;display:flex;min-width:0}.color-picker-format.rgb-format,.color-picker-format.hsl-format{gap:4px}.format-field{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}.format-label{font-size:9px;font-weight:600;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.5px}.color-format-input{width:100%;min-width:0;height:32px;padding:0 6px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);font-size:12px;font-family:SF Mono,Monaco,Menlo,monospace;font-weight:500;text-align:center;transition:all .15s ease}.color-format-input:hover{border-color:#8080804d}.color-format-input:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 3px #007aff1f}.color-format-input.hex-input{text-transform:uppercase;letter-spacing:.5px;height:36px;border-radius:8px}.color-picker-preview{width:36px;height:36px;flex-shrink:0;border-radius:8px;overflow:hidden;background-image:repeating-conic-gradient(rgba(128,128,128,.15) 0% 25%,transparent 0% 50%);background-size:8px 8px;box-shadow:inset 0 0 0 1px #0000001a,0 1px 2px #0000000d}.app.dark .color-picker-preview{box-shadow:inset 0 0 0 1px #ffffff1a,0 1px 2px #0003}.color-preview-swatch{width:100%;height:100%}.color-picker-swatches{display:flex;flex-wrap:wrap;gap:6px}.color-swatch-btn{width:24px;height:24px;padding:0;border:none;border-radius:6px;background:var(--swatch-color);cursor:pointer;transition:all .15s ease;box-shadow:inset 0 0 0 1px #00000014,0 1px 2px #0000000a}.color-swatch-btn:hover{transform:scale(1.15);box-shadow:inset 0 0 0 1px #00000014,0 4px 8px #00000026}.color-swatch-btn:active{transform:scale(1.05)}.app.dark .color-swatch-btn{box-shadow:inset 0 0 0 1px #ffffff1a,0 1px 2px #0003}.app.dark .color-swatch-btn:hover{box-shadow:inset 0 0 0 1px #ffffff1a,0 4px 8px #0006}.color-picker-controls-row{display:flex;gap:8px;align-items:center}.controls{position:fixed;top:80px;right:20px;width:280px;max-height:calc(100vh - 100px);background:var(--bg-glass);backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);border-radius:12px;border:1px solid var(--border-color);box-shadow:var(--shadow-xl);display:flex;flex-direction:column;overflow:hidden;z-index:100;animation:slideIn .3s ease}@keyframes slideIn{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.controls-header{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 12px;border-bottom:1px solid var(--border-color);flex-shrink:0}.controls-header h3{font-size:15px;font-weight:600;color:var(--text-primary);margin:0;letter-spacing:-.3px}.selected-badge{font-size:11px;font-weight:600;padding:3px 8px;background:var(--accent-color);color:#fff;border-radius:10px}.controls-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0}.controls-body::-webkit-scrollbar{width:6px}.controls-body::-webkit-scrollbar-track{background:transparent}.controls-body::-webkit-scrollbar-thumb{background:#8080804d;border-radius:3px}.controls-body::-webkit-scrollbar-thumb:hover{background:#80808080}.collapsible-section{border-bottom:1px solid var(--border-color)}.collapsible-section:last-child{border-bottom:none}.section-header-wrapper{width:100%;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:none;border:none;cursor:pointer;color:var(--text-primary);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;transition:background .15s ease}.section-header-wrapper:hover{background:#80808014}.section-title{color:var(--text-secondary);flex:1}.section-chevron{color:var(--text-tertiary);transition:transform .2s ease}.collapsible-section.open .section-chevron{transform:rotate(180deg)}.section-header-right{display:flex;align-items:center;gap:8px}.section-header-action{display:flex;align-items:center;margin-right:8px}.add-color-btn{width:24px;height:24px;border-radius:6px;border:1px dashed var(--border-color);background:transparent;color:var(--text-tertiary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease}.add-color-btn:hover{border-color:var(--accent-color);color:var(--accent-color);background:#007aff14}.reset-inactive-btn{width:100%;padding:8px 12px;margin-top:-4px;margin-bottom:12px;font-size:12px;font-weight:500;background:var(--bg-input);border:1px solid var(--border-color);border-radius:8px;color:var(--text-secondary);cursor:pointer;transition:all .15s ease}.reset-inactive-btn:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--text-tertiary)}.color-control-removable{position:relative}.color-control-removable .color-control{flex:1}.color-control-removable .color-control-header{padding-right:40px;position:relative}.remove-color-btn{position:absolute;right:0;top:0;bottom:0;width:36px;border-radius:0 8px 8px 0;border:none;border-left:1px solid var(--border-color);background:transparent;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease;opacity:.5;z-index:2}.color-control-removable .remove-color-btn{top:0;bottom:auto;height:42px}.remove-color-btn:hover{background:#ffffff0d;color:var(--text-primary);opacity:1}.section-content{max-height:0;overflow:hidden;transition:max-height .25s ease,padding .25s ease;padding:0 16px}.collapsible-section.open .section-content{max-height:600px;padding:4px 16px 16px}.collapsible-section.open .section-content.morph-section-content{max-height:none;overflow:visible}.control-group{margin-bottom:16px}.control-group:last-child{margin-bottom:0}.control-group>label{display:block;font-size:12px;font-weight:500;color:var(--text-secondary);margin-bottom:8px;letter-spacing:-.1px}.control-label-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0}.control-label-row .control-label{font-size:13px;font-weight:500;color:var(--text-primary);margin:0}.control-group>label .value{font-weight:600;color:var(--text-primary);font-variant-numeric:tabular-nums}.pattern-info{font-size:11px;color:var(--text-tertiary);margin-top:6px;font-style:italic}.grid-size-buttons{display:flex;flex-wrap:wrap;gap:4px}.grid-size-btn{min-width:28px;padding:6px 0;border:1px solid var(--border-color);border-radius:6px;background:var(--bg-tertiary);color:var(--text-secondary);font-size:11px;font-weight:600;cursor:pointer;transition:all .15s ease;display:flex;align-items:center;justify-content:center}.grid-size-btn:hover{background:var(--bg-secondary);border-color:var(--accent-color)}.grid-size-btn.active{background:var(--accent-color);border-color:var(--accent-color);color:#fff}.grid-size-btn.expand-btn{display:flex;align-items:center;justify-content:center}.grid-size-more{margin-top:4px}.control-group select{width:100%;padding:10px 32px 10px 12px;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-tertiary);color:var(--text-primary);font-size:13px;font-weight:500;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;transition:all .15s ease}.control-group select:hover{border-color:#0003}.app.dark .control-group select:hover{border-color:#fff3}.control-group select:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 3px #007aff1f}.control-group select optgroup{font-weight:600;color:var(--text-secondary)}.control-group select option{font-weight:400;color:var(--text-primary);padding:8px}.text-input{width:100%;padding:10px 12px;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-tertiary);color:var(--text-primary);font-size:13px;transition:all .15s ease}.text-input:hover{border-color:#0003}.app.dark .text-input:hover{border-color:#fff3}.text-input:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 3px #007aff1f}.text-input::placeholder{color:var(--text-tertiary)}.custom-slider{position:relative;height:28px;cursor:pointer;display:flex;align-items:center;-webkit-user-select:none;user-select:none}.slider-track{width:100%;height:28px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;overflow:hidden;position:relative}.slider-fill{height:100%;background:var(--accent-color);border-radius:5px 0 0 5px;transition:width .05s ease-out}.slider-handle{position:absolute;top:50%;transform:translate(-50%,-50%);width:36px;height:26px;background:linear-gradient(180deg,#fff,#f5f5f5);border:1px solid rgba(0,0,0,.12);border-radius:5px;cursor:grab;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px #0000001a,inset 0 1px #ffffffe6;transition:box-shadow .15s ease}.custom-slider.dragging .slider-handle{cursor:grabbing;box-shadow:0 2px 8px #00000026,inset 0 1px #ffffffe6}.custom-slider:hover .slider-handle{box-shadow:0 2px 6px #0000001f,inset 0 1px #ffffffe6}.handle-grip{display:grid;grid-template-columns:repeat(3,4px);grid-template-rows:repeat(3,4px);gap:2px}.handle-grip span{width:4px;height:4px;background:#0003;border-radius:50%}.app.dark .slider-handle{background:linear-gradient(180deg,#4a4a4a,#3a3a3a);border-color:#ffffff1a;box-shadow:0 1px 3px #0000004d,inset 0 1px #ffffff14}.app.dark .custom-slider:hover .slider-handle,.app.dark .custom-slider.dragging .slider-handle{box-shadow:0 2px 8px #0006,inset 0 1px #ffffff1a}.app.dark .handle-grip span{background:#ffffff40}.checkbox-label{display:flex!important;align-items:center;gap:10px;cursor:pointer;-webkit-user-select:none;user-select:none}.checkbox-label input[type=checkbox]{position:absolute;opacity:0;width:0;height:0}.checkbox-custom{width:18px;height:18px;border:1.5px solid var(--border-color);border-radius:5px;background:var(--bg-tertiary);position:relative;transition:all .15s ease;flex-shrink:0}.checkbox-label:hover .checkbox-custom{border-color:#80808066}.checkbox-label input[type=checkbox]:checked+.checkbox-custom{background:var(--accent-color);border-color:var(--accent-color)}.checkbox-label input[type=checkbox]:checked+.checkbox-custom:after{content:"";position:absolute;left:5px;top:2px;width:5px;height:9px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}.checkbox-label input[type=checkbox]:focus+.checkbox-custom{box-shadow:0 0 0 3px #007aff1f}.color-control{margin-bottom:12px}.color-control:last-child{margin-bottom:0}.color-control-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:10px;cursor:pointer;transition:all .15s ease}.color-control-header:hover{border-color:#8080804d}.color-control-label{font-size:12px;font-weight:500;color:var(--text-secondary)}.color-control-preview{display:flex;align-items:center;gap:8px}.color-control-swatch{width:20px;height:20px;border-radius:5px;box-shadow:inset 0 0 0 1px #0000001a,0 1px 2px #0000000d}.app.dark .color-control-swatch{box-shadow:inset 0 0 0 1px #ffffff1a,0 1px 2px #0003}.color-control-value{font-size:11px;font-family:SF Mono,Monaco,Menlo,monospace;font-weight:500;color:var(--text-tertiary);letter-spacing:.3px}.color-control-chevron{color:var(--text-tertiary);transition:transform .2s ease}.color-control-chevron.open{transform:rotate(180deg)}.color-control-panel{margin-top:8px;padding:12px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:10px;animation:slideDown .2s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.section-header-with-toggle{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border-color)}.collapsible-section.ai-section:not(.open) .section-header-with-toggle,.collapsible-section.builder-section:not(.open) .section-header-with-toggle{border-bottom:none}.section-title-text{font-size:12px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.section-header-actions{display:flex;align-items:center;gap:10px}.section-header-with-toggle .section-chevron{color:var(--text-tertiary);transition:transform .2s ease}.collapsible-section.open .section-header-with-toggle .section-chevron{transform:rotate(180deg)}.collapsible-section.ai-section.open .section-content,.collapsible-section.builder-section.open .section-content{padding:20px 16px 16px}.pattern-select-wrapper{display:flex;gap:6px;align-items:center}.pattern-select-wrapper select{flex:1}.delete-pattern-btn{width:32px;height:32px;border-radius:6px;border:1px solid rgba(255,59,48,.3);background:#ff3b301a;color:#ff3b30;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease;flex-shrink:0}.delete-pattern-btn:hover{background:#ff3b3033;border-color:#ff3b3080}.toggle-switch{position:relative;width:44px;height:26px;flex-shrink:0;cursor:pointer}.toggle-switch.small{width:36px;height:22px}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:26px;transition:all .2s ease}.toggle-slider:before{content:"";position:absolute;width:20px;height:20px;left:2px;top:2px;background:#fff;border-radius:50%;box-shadow:0 1px 3px #0003;transition:transform .2s ease}.toggle-switch.small .toggle-slider:before{width:16px;height:16px;left:2px;top:2px}.toggle-switch input:checked+.toggle-slider{background:var(--accent-color);border-color:var(--accent-color)}.toggle-switch input:checked+.toggle-slider:before{transform:translate(18px)}.toggle-switch.small input:checked+.toggle-slider:before{transform:translate(14px)}.api-key-input-wrapper{display:flex;align-items:center;gap:4px}.api-key-field{flex:1;font-family:ui-monospace,monospace;font-size:12px}.api-key-toggle{width:32px;height:32px;border-radius:6px;border:1px solid var(--border-color);background:var(--bg-tertiary);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease;flex-shrink:0}.api-key-toggle:hover{background:var(--bg-secondary);color:var(--text-primary)}.api-key-link{display:block;margin-top:6px;font-size:11px;color:var(--accent-color);text-decoration:none}.beta-tag{display:inline-flex;align-items:center;padding:2px 6px;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;background:var(--bg-hover);color:var(--text-secondary);border:1px solid var(--border-color);border-radius:4px;margin-left:6px;vertical-align:middle}.shimmer-controls{display:flex;flex-direction:column;gap:16px;padding-top:8px}.shimmer-controls .control-group{margin-bottom:0}.shimmer-controls .control-label{font-size:11px;color:var(--text-secondary);margin-bottom:6px;display:block}.shimmer-controls .slider-value{font-size:11px;color:var(--text-tertiary);margin-top:4px;display:block}.shimmer-section{margin-bottom:8px}.collapsible-section.shimmer-section.open .section-content{padding:20px 16px}.shimmer-color-picker{display:flex;align-items:center;gap:8px}.color-input-mini{width:32px;height:32px;padding:0;border:1px solid var(--border-color);border-radius:6px;cursor:pointer;background:transparent}.color-input-mini::-webkit-color-swatch-wrapper{padding:2px}.color-input-mini::-webkit-color-swatch{border-radius:4px;border:none}.color-hex-input{flex:1;padding:6px 10px;font-size:12px;font-family:ui-monospace,monospace;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);text-transform:uppercase}.color-hex-input:focus{outline:none;border-color:var(--text-tertiary)}.image-mask-section{display:flex;flex-direction:column;gap:12px}.image-mask-hint{font-size:11px;color:var(--text-tertiary);margin:0;line-height:1.4}.image-mask-hint.disabled{opacity:.6;font-style:italic}.image-upload-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;background:var(--bg-input);border:2px dashed var(--border-color);border-radius:8px;color:var(--text-secondary);font-size:13px;font-weight:500;cursor:pointer;transition:all .2s}.image-upload-btn:hover{background:var(--bg-hover);border-color:var(--text-tertiary);color:var(--text-primary)}.image-mask-preview{display:flex;flex-direction:column;gap:10px}.mask-preview-img{width:100%;height:100px;object-fit:cover;border-radius:8px;border:1px solid var(--border-color)}.remove-mask-btn{padding:8px 12px;background:transparent;border:1px solid rgba(239,68,68,.3);border-radius:6px;color:#ef4444;font-size:12px;font-weight:500;cursor:pointer;transition:all .15s ease}.remove-mask-btn:hover{background:#ef44441a;border-color:#ef4444}.preset-import-section{display:flex;flex-direction:column;gap:12px}.preset-import-hint{font-size:11px;color:var(--text-tertiary);margin:0;line-height:1.4}.preset-import-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;background:var(--bg-tertiary);border:1px dashed var(--border-color);border-radius:8px;color:var(--text-secondary);font-size:13px;font-weight:500;cursor:pointer;transition:all .15s ease}.preset-import-btn:hover{background:var(--bg-secondary);border-color:var(--accent-color);color:var(--text-primary)}.svg-import-section{display:flex;flex-direction:column;gap:12px}.svg-import-hint{font-size:11px;color:var(--text-tertiary);margin:0;line-height:1.4}.svg-input{width:100%;padding:10px 12px;background:var(--bg-input);border:1px solid var(--border-color);border-radius:8px;color:var(--text-primary);font-size:12px;font-family:SF Mono,Monaco,Menlo,monospace;resize:vertical;min-height:80px;transition:border-color .2s}.svg-input:focus{outline:none;border-color:var(--accent-color)}.svg-input::placeholder{color:var(--text-tertiary)}.svg-options{display:flex;flex-direction:column;gap:10px}.svg-option{display:flex;align-items:center;gap:10px}.svg-option label{font-size:11px;color:var(--text-secondary);min-width:60px}.svg-option input[type=range]{flex:1;height:4px;background:var(--bg-hover);border-radius:2px;-webkit-appearance:none;-moz-appearance:none;appearance:none}.svg-option input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:var(--text-primary);border-radius:50%;cursor:pointer}.svg-option-value{font-size:11px;color:var(--text-tertiary);min-width:30px;text-align:right}.svg-checkbox{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-secondary);cursor:pointer}.svg-checkbox input[type=checkbox]{width:14px;height:14px;accent-color:var(--accent-color)}.svg-error{font-size:11px;color:#ef4444;margin:0;padding:8px;background:#ef44441a;border-radius:6px}.svg-preview{display:flex;flex-direction:column;gap:8px}.svg-preview-label{font-size:11px;color:var(--text-secondary);margin:0}.svg-preview-grid{display:grid;gap:2px;background:var(--bg-input);border:1px solid var(--border-color);border-radius:8px;padding:8px;aspect-ratio:1;width:100%;max-width:150px;margin:0 auto}.svg-preview-cell{border-radius:2px;background:var(--text-primary);transition:opacity .1s}.svg-actions{display:flex;gap:8px;justify-content:flex-end}.svg-preview-btn,.svg-import-btn,.svg-cancel-btn{display:flex;align-items:center;gap:6px;padding:8px 14px;font-size:12px;font-weight:500;border-radius:8px;cursor:pointer;transition:all .2s}.svg-preview-btn{background:var(--bg-input);border:1px solid var(--border-color);color:var(--text-primary)}.svg-preview-btn:hover:not(:disabled){background:var(--bg-hover);border-color:var(--text-tertiary)}.svg-preview-btn:disabled{opacity:.5;cursor:not-allowed}.svg-cancel-btn{background:transparent;border:1px solid var(--border-color);color:var(--text-secondary)}.svg-cancel-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.svg-import-btn{background:var(--text-primary);border:1px solid var(--text-primary);color:var(--bg-primary)}.svg-import-btn:hover{opacity:.9}.spinning{animation:spin 1s linear infinite}.glow-mode-select{position:relative;width:100%}.glow-mode-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border:1px solid var(--border-color);border-radius:10px;background:var(--bg-tertiary);color:var(--text-primary);font-size:13px;font-weight:500;cursor:pointer;transition:all .15s ease}.glow-mode-trigger:hover{border-color:#80808066;background:var(--bg-secondary)}.glow-mode-trigger.open{border-color:var(--accent-color);box-shadow:0 0 0 3px #007aff1f}.glow-mode-value{flex:1;text-align:left}.glow-mode-arrow{color:var(--text-tertiary);transition:transform .2s ease;flex-shrink:0;margin-left:8px}.glow-mode-trigger.open .glow-mode-arrow{transform:rotate(180deg)}.glow-mode-dropdown{position:fixed;background:#1a1a1a;border:1px solid #333;border-radius:10px;overflow:hidden;z-index:9999;animation:dropdownFadeIn .15s ease;box-shadow:0 8px 24px #00000080}.glow-mode-option{width:100%;display:flex;align-items:center;padding:10px 14px;border:none;background:#1a1a1a;color:#e0e0e0;font-size:13px;cursor:pointer;transition:background .1s ease}.glow-mode-option:hover{background:#2a2a2a}.glow-mode-option.selected{background:#1e3a5f;color:#5b9cf5;font-weight:600}.glow-mode-option:first-child{border-radius:10px 10px 0 0}.glow-mode-option:last-child{border-radius:0 0 10px 10px}.pattern-select-custom{position:relative;width:100%}.pattern-select-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border:1px solid var(--border-color);border-radius:10px;background:var(--bg-tertiary);color:var(--text-primary);font-size:13px;font-weight:500;cursor:pointer;transition:all .15s ease}.pattern-select-trigger:hover{border-color:#80808066;background:var(--bg-secondary)}.pattern-select-trigger.open{border-color:var(--accent-color);box-shadow:0 0 0 3px #007aff1f}.pattern-select-value{flex:1;display:flex;align-items:center;gap:8px;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pattern-trigger-icon{color:var(--text-secondary);flex-shrink:0}.pattern-select-arrow{color:var(--text-tertiary);transition:transform .2s ease;flex-shrink:0;margin-left:8px}.pattern-select-trigger.open .pattern-select-arrow{transform:rotate(180deg)}.pattern-select-dropdown{margin-top:8px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:10px;overflow:hidden;animation:dropdownFadeIn .15s ease;display:flex;flex-direction:column;max-height:280px}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.pattern-search{padding:8px;border-bottom:1px solid var(--border-color);flex-shrink:0}.pattern-search-input{width:100%;padding:8px 10px;border:1px solid var(--border-color);border-radius:6px;background:var(--bg-secondary);color:var(--text-primary);font-size:12px;transition:all .15s ease}.pattern-search-input:focus{outline:none;border-color:var(--accent-color)}.pattern-search-input::placeholder{color:var(--text-tertiary)}.pattern-groups{flex:1;overflow-y:auto;min-height:0;padding:4px 0;scrollbar-width:none;-ms-overflow-style:none}.pattern-groups::-webkit-scrollbar{display:none}.pattern-group{display:contents}.pattern-group-header{width:100%;display:flex;align-items:center;gap:6px;padding:8px 10px;background:none;border:none;color:var(--text-secondary);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;transition:background .1s ease}.pattern-group-header:hover{background:#80808014}.pattern-group-header svg{color:var(--text-tertiary);flex-shrink:0}.pattern-group-name{flex:1;text-align:left}.pattern-group-count{font-size:9px;font-weight:500;color:var(--text-tertiary);background:#80808026;padding:2px 5px;border-radius:6px}.pattern-group-items{padding:2px 6px 6px}.pattern-item{display:flex;align-items:center;border-radius:6px;transition:background .1s ease}.pattern-item:hover{background:#8080801a}.pattern-item.selected{background:#007aff1f}.pattern-item-btn{flex:1;display:flex;align-items:center;gap:6px;text-align:left;padding:6px 8px;background:none;border:none;color:var(--text-primary);font-size:11px;font-weight:500;cursor:pointer;border-radius:6px}.pattern-item-icon{color:var(--text-tertiary);flex-shrink:0}.pattern-item:hover .pattern-item-icon{color:var(--text-secondary)}.pattern-item.selected .pattern-item-btn{color:var(--accent-color);font-weight:600}.pattern-item.selected .pattern-item-icon{color:var(--accent-color)}.pattern-item-actions{display:flex;align-items:center;gap:2px;margin-right:4px;opacity:0;transition:opacity .1s ease}.pattern-item:hover .pattern-item-actions{opacity:1}.pattern-item-edit,.pattern-item-delete{width:24px;height:24px;border:none;border-radius:4px;background:transparent;color:var(--text-tertiary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .1s ease}.pattern-item-edit:hover{background:#6cb4ff26;color:var(--accent-color)}.pattern-item-delete:hover{background:#ff3b3026;color:#ff3b30}.control-hints{display:flex;justify-content:space-between;margin-top:6px;font-size:10px;color:var(--text-tertiary)}.control-hint-subtle{margin-top:4px;font-size:10px;color:var(--text-tertiary);opacity:.7}.toggle-row{display:flex;align-items:center;justify-content:space-between}.toggle-row label:first-child{margin-bottom:0}.builder-hint{font-size:12px;color:var(--text-secondary);margin:0;line-height:1.5}.builder-toggle .checkbox-label{gap:8px}.builder-toggle .checkbox-label svg{color:#10b981}.builder-controls{display:flex;flex-direction:column;gap:12px;padding-top:8px;border-top:1px solid var(--border-color)}.builder-frame-info{display:flex;align-items:center;justify-content:space-between}.frame-badge{font-size:12px;font-weight:600;color:var(--text-primary);background:var(--bg-tertiary);border:1px solid var(--border-color);padding:4px 10px;border-radius:var(--radius-sm)}.frames-total{font-size:11px;color:var(--text-secondary)}.builder-actions{display:flex;gap:8px}.builder-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 12px;border-radius:var(--radius-md);border:1px solid var(--border-color);background:var(--bg-tertiary);color:var(--text-primary);font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease}.builder-btn:hover{border-color:var(--text-secondary);background:var(--bg-secondary)}.builder-btn.primary{background:var(--accent-color);border-color:var(--accent-color);color:#fff}.builder-btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.builder-btn.preview-btn{width:100%;justify-content:center}.builder-btn.preview-btn.active{background:var(--accent-color);border-color:var(--accent-color);color:#fff}.builder-btn.preview-btn.active:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.builder-frames{display:flex;flex-direction:column;gap:8px}.frames-nav{display:flex;flex-wrap:wrap;gap:6px}.frame-dot{width:28px;height:28px;border-radius:var(--radius-sm);border:1px solid var(--border-color);background:var(--bg-tertiary);color:var(--text-secondary);font-size:11px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease}.frame-dot:hover{border-color:var(--text-secondary)}.frame-dot.active{background:var(--accent-color);border-color:var(--accent-color);color:#fff}.frame-dot.new{border-style:dashed;color:var(--text-tertiary)}.frame-dot.new:hover{border-color:var(--accent-color);color:var(--accent-color)}.builder-save-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:var(--radius-md);border:none;background:var(--accent-color);color:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s ease}.builder-save-btn:hover:not(:disabled){background:var(--accent-hover)}.builder-save-btn:disabled{opacity:.5;cursor:not-allowed}.animation-mode-buttons,.button-group{display:flex;gap:6px}.mode-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 8px;border-radius:var(--radius-md);border:1px solid var(--border-color);background:var(--bg-tertiary);color:var(--text-secondary);font-size:11px;font-weight:500;cursor:pointer;transition:all .2s ease}.mode-btn:hover{border-color:var(--text-secondary);background:var(--bg-secondary)}.mode-btn.active{border-color:var(--accent-color);background:var(--accent-color);color:#fff}.mode-btn svg{opacity:.6}.mode-btn:hover svg,.mode-btn.active svg{opacity:1}.direction-buttons{display:flex;gap:6px}.dir-btn{flex:1;display:flex;align-items:center;justify-content:center;padding:10px;border-radius:var(--radius-md);border:1px solid var(--border-color);background:var(--bg-tertiary);color:var(--text-secondary);cursor:pointer;transition:all .2s ease}.dir-btn:hover{border-color:var(--text-secondary);background:var(--bg-secondary)}.dir-btn.active{border-color:var(--accent-color);background:var(--accent-color);color:#fff}.morph-section-content,.morph-pattern-list{display:flex;flex-direction:column;gap:8px}.morph-pattern-item{background:#ffffff08;border-radius:8px;overflow:hidden;transition:all .15s ease;border:1px solid var(--border-color)}.morph-pattern-item.expanded{border-color:var(--border-color)}.morph-pattern-header{display:flex;align-items:center;padding:10px 12px;cursor:pointer;transition:background .15s ease}.morph-pattern-item:not(.selected) .morph-pattern-header:hover{background:var(--bg-secondary)}.morph-pattern-name{flex:1;font-size:13px;font-weight:500;color:var(--text-primary)}.morph-expand-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;color:var(--text-tertiary);cursor:pointer;transition:transform .2s ease,color .15s ease;padding:0}.morph-expand-btn:hover{color:var(--text-primary)}.morph-expand-btn.expanded{transform:rotate(180deg)}.morph-pattern-controls{display:none;padding:0 12px 12px;flex-direction:column;gap:10px}.morph-pattern-controls.visible{display:flex}.morph-pattern-controls-row{display:flex;flex-direction:column;gap:10px}.morph-duration-control,.morph-transition-control,.morph-color-control{display:flex;flex-direction:column;gap:6px}.morph-duration-control label,.morph-transition-control label,.morph-color-control label{font-size:10px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.5px;font-weight:500}.morph-pattern-colors{display:flex;flex-direction:column;gap:12px;padding:0;margin-top:8px}.morph-color-group{display:flex;flex-direction:column;gap:6px}.morph-color-label{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-tertiary);font-weight:500}.morph-pattern-colors .color-control{background:transparent;border-radius:8px}.morph-pattern-colors .color-control-label,.morph-pattern-colors .color-control-chevron{display:none}.morph-pattern-colors .color-control-panel{margin-top:8px}.morph-secondary-color-row{display:flex;align-items:flex-start;gap:8px}.morph-secondary-color-row:has(.color-control.expanded) .morph-color-toggle{display:none}.morph-secondary-color-control{flex:1}.morph-color-toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:10px;color:var(--text-tertiary);cursor:pointer;transition:all .15s ease;flex-shrink:0}.morph-color-toggle:hover{background:var(--bg-secondary);color:var(--text-secondary)}.morph-color-toggle.active,.morph-color-toggle.active:hover{color:var(--accent-color)}.morph-duration-input{display:flex;align-items:center;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;overflow:hidden;transition:border-color .15s ease}.morph-duration-input:focus-within{border-color:var(--accent-color)}.morph-duration-input input{flex:1;min-width:0;padding:10px 12px;border:none;background:transparent;color:var(--text-primary);font-size:13px;font-family:inherit;-webkit-appearance:textfield;appearance:textfield;-moz-appearance:textfield}.morph-duration-input input::-webkit-outer-spin-button,.morph-duration-input input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.morph-duration-input input:focus{outline:none}.morph-duration-input .unit{padding:10px 12px;font-size:12px;color:var(--text-tertiary);font-weight:500;background:var(--bg-tertiary);border-left:1px solid var(--border-color)}.morph-transition-control select{padding:10px 32px 10px 12px;border-radius:8px;border:1px solid var(--border-color);background:var(--bg-secondary);color:var(--text-primary);font-size:13px;font-family:inherit;cursor:pointer;transition:border-color .15s ease;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}.morph-transition-control select:focus{outline:none;border-color:var(--accent-color)}.styled-select{padding:10px 32px 10px 12px;border-radius:8px;border:1px solid var(--border-color);background:var(--bg-secondary);color:var(--text-primary);font-size:13px;font-family:inherit;cursor:pointer;transition:border-color .15s ease;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;width:100%}.styled-select:focus{outline:none;border-color:var(--accent-color)}.morph-pattern-actions{display:flex;gap:8px}.morph-action-btn{flex:1;display:flex;align-items:center;justify-content:center;padding:8px;border-radius:6px;border:1px solid var(--border-color);background:var(--bg-tertiary);color:var(--text-secondary);font-size:12px;cursor:pointer;transition:all .15s ease}.morph-action-btn:hover{background:var(--bg-secondary);color:var(--text-primary)}.morph-change-dropdown{margin-top:8px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:10px;overflow:hidden;box-shadow:0 4px 20px #0000004d}.morph-change-dropdown .pattern-search{padding:8px;border-bottom:1px solid var(--border-color)}.morph-change-dropdown .pattern-groups{max-height:200px;overflow-y:auto}.morph-change-dropdown .pattern-item-btn.selected{background:var(--accent-color);color:#fff}.morph-change-dropdown .pattern-check{margin-left:auto}.morph-pattern-selector{margin:0}.morph-pattern-selector .pattern-select-trigger{background:#ffffff08;border:1px dashed var(--border-color)}.morph-pattern-selector .pattern-select-trigger:hover{background:#ffffff0f;border-style:solid}.morph-crossfade-section{padding:0;margin-top:8px}.morph-crossfade-section .control-group{margin:0}.morph-crossfade-section label{font-size:12px;margin-bottom:10px;display:block}.morph-cycle-info{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--text-tertiary);padding:0 2px;margin-bottom:8px}.morph-cycle-info .cycle-value{color:var(--text-secondary)}.pattern-morph-notice,.color-morph-notice{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--border-color);border-radius:10px;background:var(--bg-tertiary);color:var(--text-secondary);font-size:13px;font-weight:500}.pattern-morph-notice span:first-of-type,.color-morph-notice span:first-of-type{flex:1}.morph-lock-icon{color:var(--text-tertiary);flex-shrink:0}.morph-pattern-count{font-size:11px;background:#007aff26;padding:4px 10px;border-radius:6px;color:#fff;font-weight:600;flex-shrink:0}.color-morph-notice{margin-bottom:12px}.morph-info{padding:12px 16px;background:var(--bg-tertiary);border-radius:10px;text-align:center;border:1px solid var(--border-color)}.morph-outro-section{background:#ffffff08;border:1px solid var(--border-color);border-radius:10px;padding:10px 12px}.morph-outro-section.expanded{padding:12px}.morph-outro-header{display:flex;align-items:center;justify-content:space-between}.morph-outro-section.expanded .morph-outro-header{margin-bottom:12px}.morph-outro-header .outro-title{font-size:13px;font-weight:600;color:var(--text-primary)}.morph-outro-content{display:flex;flex-direction:column;gap:14px}.morph-outro-description{font-size:12px;color:var(--text-tertiary);line-height:1.4;margin:0}.outro-image-upload{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 16px;background:var(--bg-secondary);border:2px dashed var(--border-color);border-radius:10px;cursor:pointer;transition:all .2s ease;gap:6px}.outro-image-upload:hover{border-color:var(--accent-color);background:var(--bg-tertiary)}.outro-image-upload .upload-icon{font-size:24px;margin-bottom:4px}.outro-image-upload .upload-text{font-size:12px;color:var(--text-secondary);font-weight:500}.outro-image-upload .upload-hint{font-size:10px;color:var(--text-tertiary)}.outro-image-preview{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--bg-secondary);border-radius:10px;border:1px solid var(--border-color)}.outro-image-preview img{width:56px;height:56px;object-fit:cover;border-radius:6px;border:1px solid var(--border-color)}.outro-image-preview .preview-info{flex:1;display:flex;flex-direction:column;gap:2px}.outro-image-preview .preview-label{font-size:12px;font-weight:500;color:var(--text-primary)}.outro-image-preview .preview-hint{font-size:10px;color:var(--text-tertiary)}.outro-image-remove-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;border:1px solid var(--border-color);background:var(--bg-tertiary);color:var(--text-secondary);cursor:pointer;transition:all .15s ease;flex-shrink:0}.outro-image-remove-btn:hover{background:var(--bg-secondary);color:var(--text-primary)}.outro-control-group{display:flex;flex-direction:column;gap:8px}.outro-control-group>.outro-label{font-size:11px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.5px;font-weight:500}.outro-control-group select{padding:10px 32px 10px 12px;border-radius:8px;border:1px solid var(--border-color);background:var(--bg-secondary);color:var(--text-primary);font-size:13px;font-family:inherit;cursor:pointer;transition:border-color .15s ease;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}.outro-control-group select:focus{outline:none;border-color:var(--accent-color)}.outro-duration-section{background:var(--bg-tertiary);border-radius:10px;padding:14px;border:1px solid var(--border-color)}.outro-duration-section .control-group{margin:0}.outro-duration-section label{font-size:12px;margin-bottom:10px;display:block}.export-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;animation:fadeIn .2s ease}.export-modal{background:var(--bg-secondary);backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);border-radius:var(--radius-xl);width:100%;max-width:720px;max-height:85vh;display:flex;flex-direction:column;box-shadow:var(--shadow-large),0 0 0 1px var(--border-color);animation:modalIn .25s ease;overflow:hidden}.export-modal .export-modal-body{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column}@keyframes modalIn{0%{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.export-modal-header,.export-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border-color)}.export-modal-header h2,.export-header h2{color:var(--text-primary);font-size:15px;font-weight:600;letter-spacing:-.2px;margin:0}.close-btn{width:28px;height:28px;border:none;background:var(--bg-tertiary);border-radius:50%;color:var(--text-secondary);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease;line-height:1}.close-btn:hover{background:#ff3b301a;color:#ff3b30}.export-tabs{display:flex;gap:4px;padding:12px 20px;border-bottom:1px solid var(--border-color);background:var(--bg-tertiary)}.tab{padding:8px 16px;border:none;background:transparent;border-radius:var(--radius-md);color:var(--text-secondary);font-size:13px;font-weight:500;cursor:pointer;transition:all .15s ease}.tab:hover{background:var(--bg-secondary);color:var(--text-primary)}.tab.active{background:var(--accent-color);color:#fff}.export-preview{display:flex;align-items:center;justify-content:center;padding:24px;background:var(--bg-tertiary);border-bottom:1px solid var(--border-color)}.preview-canvas{border-radius:var(--radius-md)}.export-gif-options{padding:12px 20px 16px;border-bottom:1px solid var(--border-color);background:var(--bg-secondary)}.export-gif-options label{display:block;font-size:12px;font-weight:600;color:var(--text-secondary);margin-bottom:8px}.export-gif-options .line-color-input-wrap{display:flex;align-items:center;gap:10px}.export-gif-options .line-color-input{width:40px;height:32px;padding:2px;border:1px solid var(--border-color);border-radius:var(--radius-md);background:var(--bg-tertiary);cursor:pointer}.export-gif-options .line-color-text{flex:1;min-width:0;max-width:120px;padding:8px 12px;border:1px solid var(--border-color);border-radius:var(--radius-md);background:var(--bg-tertiary);color:var(--text-primary);font-size:13px;font-family:ui-monospace,monospace}.export-code-container{flex:1;overflow:auto;padding:16px 20px;min-height:250px;max-height:45vh}.export-code{flex:1;overflow:auto;padding:16px 20px;min-height:200px;max-height:40vh}.export-code pre{font-family:SF Mono,Monaco,Menlo,Consolas,monospace;font-size:12px;line-height:1.6;color:var(--text-primary);white-space:pre;margin:0;background:var(--bg-tertiary);padding:16px;border-radius:var(--radius-md);overflow-x:auto;border:1px solid var(--border-color)}.export-code code{font-family:inherit}.code-actions{display:flex;gap:8px;padding:12px 20px;border-top:1px solid var(--border-color);background:var(--bg-tertiary)}.code-actions button{display:flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid var(--border-color);background:var(--bg-secondary);border-radius:var(--radius-md);color:var(--text-primary);font-size:13px;font-weight:500;cursor:pointer;transition:all .15s ease}.code-actions button:hover{background:var(--bg-primary);border-color:var(--accent-color)}.export-code-container::-webkit-scrollbar{width:8px;height:8px}.export-code-container::-webkit-scrollbar-track{background:transparent}.export-code-container::-webkit-scrollbar-thumb{background:var(--text-tertiary);border-radius:4px}.export-actions{display:flex;gap:10px;padding:16px 20px;border-top:1px solid var(--border-color);background:var(--bg-tertiary)}.action-btn{flex:1;padding:12px 20px;border:none;border-radius:var(--radius-md);font-size:14px;font-weight:500;cursor:pointer;transition:all .15s ease}.copy-btn{background:var(--accent-color);color:#fff}.copy-btn:hover{background:var(--accent-hover)}.download-btn{background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-primary)}.download-btn:hover{background:var(--bg-primary)}.download-btn:disabled{opacity:.5;cursor:not-allowed}.image-export-container{display:flex;flex-direction:column;padding:20px;gap:16px}.image-export-preview{display:flex;align-items:center;justify-content:center;padding:24px;background:var(--bg-tertiary);border-radius:var(--radius-lg);border:1px solid var(--border-color)}.export-list{display:flex;flex-direction:column;gap:8px}.export-list-item{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;transition:all .15s ease;text-align:left;width:100%}.export-list-item:hover{background:var(--bg-secondary);border-color:var(--accent-color)}.export-list-item:disabled{opacity:.5;cursor:not-allowed}.export-list-item:disabled:hover{background:var(--bg-tertiary);border-color:var(--border-color)}.export-list-icon{color:var(--accent-color);flex-shrink:0}.export-list-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.export-list-label{font-size:14px;font-weight:500;color:var(--text-primary)}.export-list-desc{font-size:12px;color:var(--text-secondary)}.export-list-download{color:var(--text-tertiary);flex-shrink:0;opacity:0;transition:opacity .15s ease}.export-list-item:hover .export-list-download{opacity:1}.export-assets{padding:16px 20px;border-top:1px solid var(--border-color);background:var(--bg-tertiary)}.export-assets h3{font-size:12px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin:0 0 12px}.asset-buttons{display:flex;gap:8px;flex-wrap:wrap}.gif-download-wrap{position:relative}.asset-buttons .asset-btn{display:flex;align-items:center;gap:6px}.asset-buttons .asset-btn .gif-chevron{opacity:.7;margin-left:2px}.asset-buttons .asset-btn.active{border-color:var(--accent-color);background:var(--bg-primary)}.gif-dropdown{position:absolute;bottom:100%;left:0;top:auto;margin-bottom:6px;padding:14px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-large);z-index:1000;min-width:260px}.gif-dropdown-label-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}.gif-dropdown-label{font-size:12px;font-weight:600;color:var(--text-secondary)}.gif-dropdown-reset{display:flex;align-items:center;justify-content:center;padding:6px;border:none;background:none;border-radius:var(--radius-md);color:var(--text-tertiary);cursor:pointer;transition:color .15s ease}.gif-dropdown-reset:hover{color:var(--text-primary)}.gif-dropdown-picker{margin-bottom:12px}.gif-dropdown-picker .color-picker-container{padding:0}.gif-download-confirm{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:10px 14px;border:none;border-radius:var(--radius-md);background:var(--accent-color);color:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:background .15s ease}.gif-download-confirm:hover:not(:disabled){filter:brightness(1.1)}.gif-download-confirm:disabled{opacity:.6;cursor:not-allowed}.asset-buttons button{display:flex;align-items:center;gap:6px;padding:10px 14px;border:1px solid var(--border-color);background:var(--bg-secondary);border-radius:var(--radius-md);color:var(--text-primary);font-size:13px;font-weight:500;cursor:pointer;transition:all .15s ease}.asset-buttons button:hover{background:var(--bg-primary);border-color:var(--accent-color)}.asset-buttons button:disabled,.asset-buttons button.disabled{opacity:.5;cursor:not-allowed}.asset-buttons button:disabled:hover,.asset-buttons button.disabled:hover{background:var(--bg-secondary);border-color:var(--border-color)}.asset-buttons button.has-tooltip{position:relative}.asset-buttons button.has-tooltip:after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);padding:6px 10px;background:#1a1a1a;border:1px solid #333;border-radius:6px;color:#e0e0e0;font-size:11px;font-weight:500;white-space:nowrap;opacity:0;visibility:hidden;transition:opacity .1s ease,visibility .1s ease;pointer-events:none;z-index:100;box-shadow:0 4px 12px #00000026}.asset-buttons button.has-tooltip:hover:after{opacity:1;visibility:visible}.export-dropdown-wrap{position:relative;display:inline-block}.export-dropdown-btn{display:flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--border-color);background:var(--bg-secondary);border-radius:var(--radius-md);color:var(--text-primary);font-size:13px;font-weight:500;cursor:pointer;transition:all .15s ease}.export-dropdown-btn:hover{background:var(--bg-primary);border-color:var(--accent-color)}.export-dropdown-btn.active{border-color:var(--accent-color);background:var(--bg-primary)}.export-chevron{margin-left:auto;opacity:.6;transition:transform .2s ease}.export-chevron.open{transform:rotate(180deg)}.export-dropdown{position:absolute;bottom:100%;left:0;min-width:200px;margin-bottom:6px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-large);overflow:hidden;z-index:100}.export-options{display:flex;flex-direction:column}.export-option{display:flex;align-items:center;gap:10px;width:100%;padding:12px 16px;border:none;background:transparent;color:var(--text-primary);font-size:13px;font-weight:500;cursor:pointer;transition:background .15s ease;text-align:left}.export-option:hover{background:var(--bg-tertiary)}.export-option.disabled{opacity:.5;cursor:not-allowed}.export-option.disabled:hover{background:transparent}.export-option .option-arrow{margin-left:auto;opacity:.5}.export-divider{height:1px;background:var(--border-color);margin:4px 0}.gif-settings-panel{padding:12px;min-width:280px}.gif-back-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:10px 12px;margin-top:8px;border:1px solid var(--border-color);background:var(--bg-tertiary);border-radius:var(--radius-md);color:var(--text-secondary);font-size:13px;font-weight:500;cursor:pointer;transition:all .15s ease}.gif-back-btn:hover{background:var(--bg-secondary);color:var(--text-primary);border-color:var(--text-secondary)}.export-tabs .tab-disabled{opacity:.4;cursor:not-allowed}.bloom-code-notice{padding:20px 16px;text-align:center;color:var(--text-secondary);font-size:13px;line-height:1.6;opacity:.8}.export-progress{text-align:center;padding:10px 16px;background:#007aff1a;border-radius:var(--radius-md);color:var(--accent-color);font-size:13px;font-weight:500}.export-error{margin-top:12px;text-align:center;padding:10px 16px;background:#ff3b301a;border-radius:var(--radius-md);color:#ff3b30;font-size:13px}@media (max-width: 600px){.export-modal{max-height:90vh}.export-modal-header,.export-header{padding:14px 16px}.export-modal-header h2,.export-header h2{font-size:14px}.export-tabs{padding:10px 16px;overflow-x:auto}.tab{padding:6px 12px;font-size:12px;white-space:nowrap}.export-code-container,.export-code{padding:12px 16px}.export-code pre{font-size:11px;padding:12px}.export-actions,.code-actions{padding:12px 16px;flex-direction:column}.action-btn,.code-actions button{padding:14px 20px}.asset-buttons{flex-direction:column}.asset-buttons button{width:100%;justify-content:center}}.live-cursors-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1000;overflow:hidden}.live-cursor{position:absolute;top:0;left:0;pointer-events:none;z-index:1001;transition:transform .05s linear}.cursor-name{position:absolute;top:20px;left:12px;padding:4px 8px;border-radius:4px;font-size:11px;font-weight:600;color:#fff;white-space:nowrap;box-shadow:0 2px 8px #0003}.presence-avatars{display:flex;align-items:center;gap:10px;padding:6px 12px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.presence-label{font-size:12px;font-weight:500;color:var(--text-secondary);white-space:nowrap}.avatar-stack{display:flex;flex-direction:row-reverse}.presence-avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:#fff;border:2px solid var(--bg-secondary);margin-left:-8px;transition:transform .15s ease}.presence-avatar:first-child{margin-left:0}.presence-avatar:hover{transform:scale(1.1);z-index:10}.presence-avatar.overflow{background:var(--bg-hover);color:var(--text-secondary);font-size:10px}.collab-indicator{display:flex;align-items:center;gap:6px;padding:6px 12px;background:#4caf501a;border:1px solid rgba(76,175,80,.3);border-radius:20px;font-size:12px;font-weight:500;color:#4caf50}.collab-dot{width:8px;height:8px;border-radius:50%;background:#4caf50;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.9)}}.app.dark .presence-avatars{background:#1e1e1ee6}.app.dark .presence-avatar{border-color:#1e1e1ee6}.comments-panel{position:fixed;bottom:20px;right:20px;width:340px;max-height:480px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:16px;box-shadow:0 8px 32px #0003;display:flex;flex-direction:column;z-index:1000;overflow:hidden;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.comments-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border-color)}.comments-header h3{display:flex;align-items:center;gap:8px;margin:0;font-size:14px;font-weight:600;color:var(--text-primary)}.close-comments-btn{padding:6px;background:transparent;border:none;border-radius:6px;color:var(--text-tertiary);cursor:pointer;transition:all .15s ease}.close-comments-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.comments-list{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:12px;min-height:200px;max-height:320px}.no-comments{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text-tertiary);font-size:13px;text-align:center;padding:40px 20px}.comment{padding:10px 12px;background:var(--bg-tertiary);border-radius:12px;max-width:85%}.comment.own{align-self:flex-end;background:var(--accent-color)}.comment.own .comment-author,.comment.own .comment-time,.comment.own .comment-text{color:#fff}.comment-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}.comment-author{font-size:12px;font-weight:600}.comment-time{font-size:10px;color:var(--text-tertiary)}.comment-text{font-size:13px;color:var(--text-primary);line-height:1.4;word-wrap:break-word}.comment-input-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--border-color)}.comment-input{flex:1;padding:10px 14px;background:var(--bg-input);border:1px solid var(--border-color);border-radius:20px;font-size:13px;color:var(--text-primary);outline:none;transition:border-color .15s ease}.comment-input:focus{border-color:var(--accent-color)}.comment-input::placeholder{color:var(--text-tertiary)}.send-comment-btn{padding:10px 14px;background:var(--accent-color);border:none;border-radius:20px;color:#fff;cursor:pointer;transition:all .15s ease;display:flex;align-items:center;justify-content:center}.send-comment-btn:hover:not(:disabled){filter:brightness(1.1)}.send-comment-btn:disabled{opacity:.5;cursor:not-allowed}.comments-toggle-btn{position:relative;padding:10px 14px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:50px;color:var(--text-primary);cursor:pointer;transition:all .15s ease;display:flex;align-items:center;gap:6px}.comments-toggle-btn:hover{background:var(--bg-hover);border-color:var(--text-tertiary)}.unread-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;background:#ef4444;border-radius:9px;font-size:11px;font-weight:600;color:#fff;display:flex;align-items:center;justify-content:center}@media (max-width: 480px){.comments-panel{width:calc(100% - 32px);left:16px;right:16px;bottom:16px}}#liveblocks-badge{display:none!important;visibility:hidden!important;opacity:0!important}:root{--bg-primary: #f5f5f7;--bg-secondary: rgba(255, 255, 255, .8);--bg-tertiary: rgba(255, 255, 255, .6);--bg-glass: rgba(255, 255, 255, .72);--text-primary: #1d1d1f;--text-secondary: #86868b;--text-tertiary: #aeaeb2;--border-color: rgba(0, 0, 0, .08);--accent-color: #007aff;--accent-hover: #0066d6;--shadow-subtle: 0 1px 3px rgba(0, 0, 0, .08);--shadow-medium: 0 4px 12px rgba(0, 0, 0, .08);--shadow-large: 0 8px 30px rgba(0, 0, 0, .12);--shadow-xl: 0 12px 40px rgba(0, 0, 0, .15), 0 4px 12px rgba(0, 0, 0, .08);--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--radius-xl: 20px}.app{width:100%;min-height:100vh;display:flex;position:relative;background:var(--bg-primary);font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,SF Pro Text,system-ui,sans-serif;transition:background .3s ease;-webkit-font-smoothing:antialiased}.app.dark{--bg-primary: #1c1c1e;--bg-secondary: rgba(44, 44, 46, .8);--bg-tertiary: rgba(58, 58, 60, .6);--bg-glass: rgba(28, 28, 30, .85);--text-primary: #f5f5f7;--text-secondary: #98989d;--text-tertiary: #6e6e73;--border-color: rgba(255, 255, 255, .08);--shadow-subtle: 0 1px 3px rgba(0, 0, 0, .3);--shadow-medium: 0 4px 12px rgba(0, 0, 0, .3);--shadow-large: 0 8px 30px rgba(0, 0, 0, .4);--shadow-xl: 0 12px 40px rgba(0, 0, 0, .5), 0 4px 12px rgba(0, 0, 0, .3)}.canvas{flex:1;min-height:100vh;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:40px;cursor:grab;background:var(--bg-primary)}.canvas.panning{cursor:grabbing;-webkit-user-select:none;user-select:none}.canvas-grid{position:absolute;top:-5000px;right:-5000px;bottom:-5000px;left:-5000px;width:10000px;height:10000px;background-image:radial-gradient(circle,rgba(0,0,0,.25) 1px,transparent 1px);background-size:20px 20px;pointer-events:auto;transition:none;z-index:0}.app.dark .canvas-grid{background-image:radial-gradient(circle,rgba(255,255,255,.15) 1px,transparent 1px)}.loaders-container{display:flex;flex-wrap:wrap;gap:40px;align-items:center;justify-content:center;z-index:10;transition:none;position:relative}.loader-wrapper{position:relative;cursor:pointer;border-radius:var(--radius-xl);padding:20px;transition:all .2s ease;border:2px solid transparent;background:transparent;z-index:11}.loader-wrapper:hover{background:var(--bg-tertiary);border-color:var(--border-color)}.loader-wrapper.selected{background:var(--bg-secondary);border-color:var(--accent-color);box-shadow:var(--shadow-medium)}.loader-label{position:absolute;bottom:-4px;left:50%;transform:translate(-50%);font-size:11px;font-weight:500;letter-spacing:.3px;color:var(--text-secondary);background:var(--bg-primary);padding:4px 10px;border-radius:var(--radius-sm);white-space:nowrap}.loader-wrapper.selected .loader-label{color:var(--accent-color);font-weight:600}.delete-loader-btn{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;border:none;background:#ff3b301a;color:#ff3b30;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .2s ease;z-index:10}.loader-wrapper:hover .delete-loader-btn{opacity:1}.delete-loader-btn:hover{background:#ff3b3033;transform:scale(1.1)}.loader-wrapper.others-selected{border-color:var(--other-selection-color, #ff6b6b);box-shadow:0 0 0 2px color-mix(in srgb,var(--other-selection-color, #ff6b6b) 30%,transparent)}.loader-wrapper.others-selected.selected{border-color:var(--accent-color);box-shadow:var(--shadow-medium),0 0 0 3px color-mix(in srgb,var(--other-selection-color, #ff6b6b) 40%,transparent)}.others-selection-avatars{position:absolute;top:-10px;left:50%;transform:translate(-50%);display:flex;gap:-8px;z-index:20}.other-avatar{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:#fff;border:2px solid var(--bg-primary);margin-left:-6px;text-transform:uppercase}.other-avatar:first-child{margin-left:0}.other-avatar.overflow{background:var(--bg-tertiary);color:var(--text-secondary);font-size:9px}.add-loader-btn{position:fixed;bottom:24px;left:50%;transform:translate(-50%);width:48px;height:48px;border-radius:50%;border:none;background:var(--accent-color);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;box-shadow:var(--shadow-medium);z-index:100}.add-loader-btn:hover{transform:translate(-50%) scale(1.08);background:var(--accent-hover);box-shadow:var(--shadow-large)}.reset-view-btn{position:fixed;top:16px;left:50%;transform:translate(-50%);padding:8px 14px;background:var(--bg-glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-secondary);font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap;z-index:200;display:flex;align-items:center;gap:8px}.reset-view-btn:hover{background:var(--bg-secondary);color:var(--text-primary)}.reset-view-btn .shortcut-key{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:4px;font-size:11px;font-weight:600;color:var(--text-secondary);font-family:ui-monospace,monospace}.top-buttons{position:fixed;top:16px;right:16px;display:flex;gap:8px;z-index:200}.btn-primary{position:relative;padding:8px 14px;background:linear-gradient(to top,var(--accent-color),color-mix(in srgb,var(--accent-color) 85%,transparent));border:1px solid rgba(9,9,11,.25);border-radius:var(--radius-md);color:#fff;font-size:13px;font-weight:500;cursor:pointer;transition:filter .2s ease;display:flex;align-items:center;justify-content:center;gap:6px;box-shadow:0 4px 6px -1px #09090b33,inset 0 1px #fff3}.btn-primary:hover{filter:brightness(1.1)}.btn-primary:active{filter:brightness(.9)}.app.dark .btn-primary{border-color:#fff3;box-shadow:0 4px 6px -1px #09090b33}.btn-secondary{position:relative;padding:8px 14px;background:var(--bg-secondary);border:1px solid rgba(212,212,216,1);border-radius:var(--radius-md);color:var(--text-secondary);font-size:13px;font-weight:500;cursor:pointer;transition:all .15s ease;display:flex;align-items:center;justify-content:center;gap:6px;box-shadow:0 1px 2px #09090b1a,inset 0 1px #fffc}.btn-secondary:hover{background:var(--bg-primary);color:var(--text-primary)}.btn-secondary:active{filter:brightness(.95)}.app.dark .btn-secondary{background:#3f3f4640;border-color:var(--border-color);box-shadow:0 1px 2px #09090b1a}.app.dark .btn-secondary:hover{background:#3f3f4680}.theme-toggle-btn,.btn-secondary.icon-only{width:36px;height:36px;padding:0}.share-btn.active{background:var(--bg-secondary);color:var(--text-primary)}.preview-btn{display:flex;align-items:center;gap:6px}.preview-btn.disabled,.preview-btn:disabled{opacity:.4;cursor:not-allowed}.preview-btn.disabled:hover,.preview-btn:disabled:hover{background:var(--bg-secondary);color:var(--text-secondary)}.share-btn.copied{background:#34c75926;border-color:#34c7594d;color:#34c759;box-shadow:0 1px 2px #34c7591a,inset 0 1px #34c75933}.share-dropdown-container{position:relative}.share-dropdown{position:absolute;top:calc(100% + 8px);right:0;width:320px;background:var(--bg-glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);padding:16px;z-index:1000}.share-dropdown-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-weight:600;font-size:14px;color:var(--text-primary)}.share-dropdown-close{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:all .15s ease}.share-dropdown-close:hover{background:var(--bg-tertiary);color:var(--text-primary)}.share-description{font-size:13px;color:var(--text-secondary);line-height:1.5;margin:0 0 16px}.share-link-display{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-md);margin-bottom:12px}.share-link-display svg{color:var(--text-tertiary);flex-shrink:0}.share-link-text{flex:1;font-size:12px;font-family:ui-monospace,monospace;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.copy-link-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:all .15s ease;flex-shrink:0}.copy-link-btn:hover{background:var(--bg-primary);color:var(--text-primary)}.share-warning{display:flex;gap:8px;padding:10px 12px;background:#ff95001a;border:1px solid rgba(255,149,0,.2);border-radius:var(--radius-md);margin-bottom:12px}.share-warning svg{color:#ff9500;flex-shrink:0;margin-top:1px}.share-warning span{font-size:12px;color:var(--text-secondary);line-height:1.4}.generate-link-btn,.generate-new-link-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;font-size:13px;font-weight:500;border-radius:var(--radius-md);cursor:pointer;transition:all .15s ease}.generate-link-btn{background:linear-gradient(to top,var(--accent-color),color-mix(in srgb,var(--accent-color) 85%,transparent));border:1px solid rgba(9,9,11,.25);color:#fff;box-shadow:0 4px 6px -1px #09090b33,inset 0 1px #fff3}.generate-link-btn:hover:not(:disabled){filter:brightness(1.1)}.generate-link-btn:disabled{opacity:.7;cursor:not-allowed}.generate-new-link-btn{background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-secondary)}.generate-new-link-btn:hover:not(:disabled){background:var(--bg-secondary);color:var(--text-primary)}.generate-new-link-btn:disabled{opacity:.7;cursor:not-allowed}.app.dark .generate-link-btn{border-color:#fff3}.export-btn.disabled,.export-btn:disabled{opacity:.4;cursor:not-allowed;filter:none}.export-btn.disabled:hover,.export-btn:disabled:hover{filter:none}.bottom-actions{position:fixed;bottom:24px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;z-index:100}.bottom-buttons{display:flex;align-items:center;gap:8px}.bottom-actions .add-loader-btn{position:static;transform:none}.bottom-actions .add-loader-btn:hover{transform:scale(1.08)}.ai-generate-btn{width:48px;height:48px;border-radius:50%;background:transparent;border:2px solid var(--text-tertiary);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.ai-generate-btn:hover{border-color:var(--accent-color);color:var(--accent-color)}.ai-generate-btn.active{border-color:var(--accent-color);background:var(--accent-color);color:#fff}.draw-canvas-container{display:flex;flex-direction:column;align-items:center;gap:16px}.draw-canvas-main{display:grid;gap:3px;background:#0a0a0a;padding:20px;border-radius:16px;-webkit-user-select:none;user-select:none;box-shadow:0 4px 24px #0006,inset 0 1px #ffffff0d;width:min(500px,85vw)}.draw-canvas-cell{aspect-ratio:1;width:100%;border-radius:4px;cursor:crosshair;transition:background-color .15s ease,box-shadow .15s ease;background-color:#2a2a2a}.draw-canvas-cell:hover{background-color:#3a3a3a}.draw-canvas-cell.on{background-color:var(--grid-color);box-shadow:0 0 8px var(--grid-color)}.draw-canvas-label{font-size:13px;font-weight:500;color:var(--text-secondary);background:var(--bg-tertiary);padding:6px 14px;border-radius:var(--radius-md)}.draw-canvas-main.preview .draw-canvas-cell{cursor:default}.draw-canvas-main.preview .draw-canvas-cell:hover{background-color:#2a2a2a}.draw-canvas-main.preview .draw-canvas-cell.on:hover{background-color:var(--grid-color)}.ai-input-container{position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:12px;display:flex;flex-direction:column;align-items:center;gap:8px;animation:slideUp .2s ease}@keyframes slideUp{0%{opacity:0;transform:translate(-50%) translateY(10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.ai-input-wrapper{display:flex;align-items:center;gap:8px;background:var(--bg-secondary);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-color);border-radius:100px;padding:6px 8px 6px 16px;box-shadow:var(--shadow-large);width:320px}.ai-input-icon{color:var(--text-tertiary);flex-shrink:0}.ai-input{flex:1;padding:8px 0;background:transparent;border:none;color:var(--text-primary);font-size:14px;font-family:inherit;outline:none!important;box-shadow:none!important;min-width:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.ai-input:focus{outline:none!important;box-shadow:none!important}.ai-input::placeholder{color:var(--text-tertiary)}.ai-send-btn{width:32px;height:32px;border-radius:50%;border:none;background:var(--accent-color);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0}.ai-send-btn:hover:not(:disabled){background:var(--accent-hover);transform:scale(1.05)}.ai-send-btn:disabled{opacity:.4;cursor:not-allowed}.ai-send-btn .spinning{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ai-error{padding:8px 12px;background:#ff3b301a;border-radius:100px;color:#ff3b30;font-size:12px;max-width:320px;text-align:center}.ai-api-key-btn{padding:8px 16px;background:transparent;border:1px solid var(--border-color);border-radius:100px;color:var(--text-secondary);font-size:12px;cursor:pointer;transition:all .2s ease}.ai-api-key-btn:hover{background:var(--bg-tertiary);color:var(--text-primary)}.api-key-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.api-key-modal{background:var(--bg-secondary);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-color);border-radius:var(--radius-xl);padding:24px;width:380px;box-shadow:var(--shadow-xl);animation:scaleIn .2s ease}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.api-key-modal h3{margin:0 0 8px;font-size:17px;font-weight:600;color:var(--text-primary)}.api-key-modal p{margin:0 0 16px;font-size:13px;color:var(--text-secondary);line-height:1.5}.api-key-input{width:100%;padding:12px 14px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-size:14px;font-family:ui-monospace,monospace;outline:none;transition:border-color .2s ease;box-sizing:border-box}.api-key-input:focus{border-color:var(--accent-color)}.api-key-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}.api-key-actions button{padding:8px 16px;border-radius:var(--radius-md);font-size:13px;font-weight:500;cursor:pointer}.api-key-actions button:not(.primary){background:var(--bg-secondary);border:1px solid rgba(212,212,216,1);color:var(--text-primary);transition:all .15s ease;box-shadow:0 1px 2px #09090b1a,inset 0 1px #fffc}.api-key-actions button:not(.primary):hover{background:var(--bg-primary)}.app.dark .api-key-actions button:not(.primary){background:#3f3f4640;border-color:var(--border-color);box-shadow:0 1px 2px #09090b1a}.app.dark .api-key-actions button:not(.primary):hover{background:#3f3f4680}.api-key-actions button.primary{background:linear-gradient(to top,var(--accent-color),color-mix(in srgb,var(--accent-color) 85%,transparent));border:1px solid rgba(9,9,11,.25);color:#fff;transition:filter .2s ease;box-shadow:0 4px 6px -1px #09090b33,inset 0 1px #fff3}.api-key-actions button.primary:hover{filter:brightness(1.1)}.api-key-actions button.primary:active{filter:brightness(.9)}.app.dark .api-key-actions button.primary{border-color:#fff3;box-shadow:0 4px 6px -1px #09090b33}.api-key-link{display:block;margin-top:16px;padding-top:16px;border-top:1px solid var(--border-color);font-size:12px;color:var(--accent-color);text-decoration:none;text-align:center}.api-key-link:hover{text-decoration:underline}.share-loading{display:flex;align-items:center;justify-content:center;height:100vh;width:100%;background:#000}.share-loading .thinking-loader-wrapper{background:transparent;box-shadow:none;padding:0;border-radius:0}.share-error{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;gap:16px;color:var(--text-secondary)}.share-error button{padding:10px 20px;background:var(--text-primary);color:var(--bg-primary);border:none;border-radius:50px;cursor:pointer;font-size:14px;font-weight:500;transition:opacity .2s}.share-error button:hover{opacity:.8}.toast{position:fixed;bottom:100px;left:50%;transform:translate(-50%);padding:12px 20px;background:var(--bg-glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-color);border-radius:50px;color:var(--text-primary);font-size:13px;font-weight:500;box-shadow:var(--shadow-medium);z-index:1000;animation:toastIn .3s ease;white-space:nowrap}@keyframes toastIn{0%{opacity:0;transform:translate(-50%) translateY(10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.attribution-link{position:fixed;bottom:16px;left:16px;font-size:11px;color:var(--text-tertiary);text-decoration:none;opacity:.6;transition:opacity .2s;z-index:10}.attribution-link:hover{opacity:1;color:var(--text-secondary)}@media (max-width: 768px){.reset-view-btn{top:12px;font-size:12px;padding:6px 12px}.top-buttons{top:auto;bottom:16px;right:16px}.bottom-actions{bottom:70px}.ai-input-wrapper{width:280px}.api-key-modal{width:calc(100% - 32px);margin:16px}}*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-text-size-adjust:100%}body{font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,SF Pro Text,system-ui,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;background:#f5f5f7;color:#1d1d1f;line-height:1.47059;letter-spacing:-.022em}::selection{background:#007aff33;color:inherit}:focus-visible{outline:2px solid #007aff;outline-offset:2px}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;letter-spacing:inherit}@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}.hide-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.hide-scrollbar::-webkit-scrollbar{display:none}