:root{--bg-color: #1e1e1e;--text-color: #cccccc;--text-muted: #9a9a9a;--panel-bg: #252525;--panel-border: #3e3e3e;--accent-color: #6b6b6b;--accent-hover: #888888;--grid-line: rgba(255, 255, 255, .05);--grid-bg: #2d2d2d;--button-bg: #323232;--button-hover: #3e3e3e;--radius-lg: 0px;--radius-md: 0px;--radius-sm: 0px;--shadow-lg: 0 2px 8px rgba(0, 0, 0, .4)}*{margin:0;padding:0;box-sizing:border-box;font-family:Outfit,sans-serif;-ms-overflow-style:none;scrollbar-width:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}*::-webkit-scrollbar{width:0;height:0;display:none}html,body{width:100%;height:100%;margin:0;padding:0;overflow:hidden;background-color:var(--bg-color);color:var(--text-color)}body{display:flex;justify-content:center;align-items:center}#root{width:100%;height:100%}.editor-container{width:100%;height:100vh;height:100dvh;background:var(--panel-bg);display:flex;flex-direction:column;position:relative}.app-notification{position:absolute;top:14px;left:50%;z-index:1200;display:flex;align-items:center;gap:12px;max-width:min(420px,calc(100vw - 32px));padding:8px 10px 8px 12px;color:#f4f4f4;background:#262626f5;border:1px solid var(--panel-border);box-shadow:var(--shadow-lg);font-size:.8rem;font-weight:600;transform:translate(-50%);pointer-events:auto}.app-notification.error{border-color:#ef4444bf}.app-notification.info{border-color:#60a5fabf}.app-notification-close{display:flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--text-muted);background:transparent;border:none;cursor:pointer;font-size:18px;line-height:1}.app-notification-close:hover{color:#fff}.view-controls{position:absolute;top:12px;right:20px;z-index:100;display:flex;gap:16px;color:#888;font-size:.8rem}.view-toggle{border:none;background:none;color:#666;cursor:pointer;font-family:inherit;font-size:.8rem}.view-toggle.active{color:#ccc}.collab-pending-banner{position:absolute;top:56px;left:50%;transform:translate(-50%);z-index:1200;display:flex;align-items:center;gap:10px;max-width:min(440px,calc(100vw - 32px));padding:8px 10px 8px 12px;color:var(--text-color);background:#262626f5;border:1px solid var(--panel-border);border-radius:var(--radius-sm);font-size:.8rem}.collab-pending-spinner{width:10px;height:10px;flex-shrink:0;border:2px solid var(--panel-border);border-top-color:var(--accent-color);border-radius:50%;animation:collabSpin .9s linear infinite}@keyframes collabSpin{to{transform:rotate(360deg)}}.share-status-dot{display:inline-block;width:6px;height:6px;margin-left:6px;border-radius:999px;background:#55d6be;box-shadow:0 0 6px #55d6becc;vertical-align:middle}.share-status-dot.degraded{background:#e8b34b;box-shadow:0 0 6px #e8b34bcc}.collab-modal-backdrop{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px;background:#05070cb8;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.collab-modal{width:min(420px,100%);padding:22px;display:flex;flex-direction:column;gap:14px;color:var(--text-color, #ddd);background:var(--panel-bg, #171923);border:1px solid var(--panel-border, #353849);border-radius:10px;box-shadow:0 24px 80px #0000008c}.collab-modal h2,.collab-modal p{margin:0}.collab-flow-badge{align-self:flex-start;margin-top:-6px;padding:2px 8px;color:var(--accent-color);background:color-mix(in srgb,var(--accent-color) 16%,transparent);border-radius:999px;font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.4px}.collab-connecting-status{display:flex;align-items:center;gap:8px}.collab-modal button:focus-visible,.collab-pending-banner button:focus-visible{outline:2px solid var(--accent-color);outline-offset:1px}.collab-modal-header,.collab-session-summary,.collab-modal-actions{display:flex;align-items:center;gap:10px}.collab-modal-header{justify-content:space-between}.collab-modal-actions{flex-wrap:wrap}.collab-close{border:0;padding:2px 8px;color:#aaa;background:transparent;font-size:24px;cursor:pointer}.collab-peer-dot,.timeline-presence span{width:8px;height:8px;border-radius:999px}.collab-session-summary>span:last-child{margin-left:auto;color:#8c91a6;font-size:.75rem}.collab-error{color:#ff8b91}.collab-fine-print{color:#777d91;font-size:.72rem;line-height:1.45}.collab-copy-offer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;color:#9fa5b8;background:#55d6be14;border:1px solid rgba(85,214,190,.24);border-radius:6px;font-size:.75rem}.collab-palette-preview{display:grid;grid-template-columns:repeat(16,1fr);overflow:hidden;min-height:36px;border:1px solid #343849;border-radius:5px}.collab-palette-preview span{min-height:18px}.collab-art-preview{width:160px;height:160px;align-self:center;background:#11131b;border:1px solid #343849;border-radius:5px;image-rendering:pixelated}.presence-cursors{position:absolute;inset:0;z-index:8;overflow:hidden;pointer-events:none}.presence-cursor{position:absolute;left:var(--presence-x);top:var(--presence-y);width:calc(var(--presence-cells) * 100% / 32);transition:left 80ms linear,top 80ms linear}.presence-cursor.is-centered{transform:translate(-50%,-50%)}.presence-cursor-art{display:block;width:100%}.presence-cursor-tag{position:absolute;left:85%;top:85%;padding:2px 4px;color:#091014;background:var(--presence-color);border-radius:3px;font-size:7px;font-weight:700;white-space:nowrap}.timeline-presence{position:absolute;right:3px;top:3px;z-index:4;display:flex;gap:2px}.timeline-presence span{display:block}.workspace{flex:1;display:flex;overflow:hidden}.panel{background:var(--panel-bg);border-right:1px solid var(--panel-border);padding:16px;display:flex;flex-direction:column;gap:16px}.shortcuts-panel{width:240px;margin-left:12px;padding:12px;font-size:.8rem}.shortcuts-title{margin:0 0 12px;color:#888;font-size:.9rem}.shortcuts-table{width:100%;border-collapse:collapse}.shortcuts-section-heading{padding:12px 0 4px;border-bottom:1px solid #333;color:#666;font-size:.75rem;font-weight:700;text-transform:uppercase}.shortcuts-spacer{height:8px}.shortcuts-label{padding:3px 0;color:#ccc}.shortcuts-keys{padding:3px 0;text-align:right}.shortcut-key{display:inline-block;margin-left:4px;padding:2px 5px;border-radius:3px;background:#333;font-family:monospace;font-size:.75rem}.tools-panel{width:clamp(100px,15vw,200px);display:flex;flex-direction:column;align-items:center;padding:clamp(4px,1vw,12px) clamp(4px,.5vw,8px);gap:clamp(8px,1.5vw,20px);max-height:100%;overflow:hidden;flex-shrink:0}.canvas-area{flex:1;display:flex;flex-direction:column;justify-content:space-between;align-items:center;background:var(--bg-color);position:relative;padding:16px 8px 0;height:100%;min-width:0;overflow:hidden}.magnifying-glass{position:fixed;left:var(--magnifier-left);top:var(--magnifier-top);z-index:9999;width:var(--magnifier-size);height:var(--magnifier-size);overflow:hidden;border-radius:50%;background:#000;box-shadow:0 4px 12px #00000080;pointer-events:none}.magnifying-glass-canvas{width:100%;height:100%}.tool-group,.action-group{display:flex;flex-direction:column;gap:8px;width:100%}.brush-size-group{flex-direction:row;gap:4px}.separator{width:100%;height:1px;background:var(--panel-border);margin:4px 0}.tool-btn,.action-btn{width:100%;height:clamp(28px,3.5vw,44px);border-radius:4px;border:1px solid transparent;background:var(--button-bg);color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;font-size:clamp(.6rem,.8vw,.85rem);font-weight:500;text-transform:capitalize}.tool-btn:hover,.action-btn:hover{background:var(--button-hover);color:var(--text-color)}.tool-btn.active,.action-btn.active{background:var(--accent-color);color:#fff;border-color:var(--accent-hover);transform:scale(.95)}.brush-size-btn{font-size:.8rem}.action-btn:disabled,.tool-btn:disabled,.top-bar-btn:disabled{opacity:.4;cursor:default}.timeline-header{width:100%;max-width:512px;display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;padding:0 4px}.timeline-section{width:100%;max-width:100vw;margin-top:16px;display:flex;flex-direction:column;align-items:center;min-width:0}:root{--frame-size: 100px;--grid-size: 32}.timeline-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;padding:0 12px;width:100%}.timeline-frame-list{display:flex;flex:1;flex-wrap:nowrap;overflow-x:auto;gap:0;width:100%;max-width:100%;background:var(--panel-border);padding:0;border:1px solid var(--panel-border);align-items:center;min-width:0;-webkit-user-select:none;user-select:none}.timeline-fps-controls{display:flex;align-items:center;justify-content:center;height:100%;padding:0 8px;gap:4px;color:#888;font-size:.8rem}.timeline-fps-button{min-width:20px;padding:2px 4px}.timeline-fps-value{min-width:45px;text-align:center;font-variant-numeric:tabular-nums}.timeline-ghost-strip{display:inline-flex}.timeline-add-frame-wrapper{display:inline-block}.timeline-drag-overlay-strip{display:flex;gap:4px}.timeline-spacer{flex:0 0 calc(50% - (var(--frame-size) / 2));width:calc(50% - (var(--frame-size) / 2));pointer-events:none}.timeline-frame{position:relative;flex:0 0 var(--frame-size);width:var(--frame-size);height:var(--frame-size);background-color:var(--grid-line);background-image:linear-gradient(45deg,#2a2a2a 25%,transparent 25%),linear-gradient(-45deg,#2a2a2a 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#2a2a2a 75%),linear-gradient(-45deg,transparent 75%,#2a2a2a 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px;cursor:pointer;border:1px solid transparent}.timeline-frame.active{z-index:10;box-shadow:0 0 0 2px var(--accent-color)}@media(hover:hover)and (pointer:fine){.timeline-frame-list:not(.is-dragging) .timeline-frame:hover{z-index:5;box-shadow:inset 0 0 0 1px var(--text-muted)}}.frame-number{position:absolute;top:4px;left:4px;font-size:10px;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8);pointer-events:none;z-index:5}.transform-controls{display:grid;grid-template-columns:repeat(2,1fr);gap:4px;width:100%;margin-bottom:24px}.transform-controls .action-btn{height:48px;font-size:.8rem;padding:0}.sprite-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:16px;padding:24px;width:100%;height:100%}.sprite-card{background:var(--button-bg);border:1px solid var(--panel-border);border-radius:2px;padding:8px;display:flex;flex-direction:column;cursor:pointer;transition:all .2s ease;position:relative}.sprite-card:hover{border-color:var(--accent-color)}.sprite-card.active{border-color:var(--accent-color);background:var(--button-hover)}.sprite-header{font-size:.7rem;font-weight:400;text-align:center;margin-bottom:6px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;cursor:grab;-webkit-user-select:none;user-select:none}.sprite-header:active{cursor:grabbing}.sprite-card.active .sprite-header{color:var(--text-color)}.sprite-card.dragging{opacity:.5}.sprite-placeholder{background:var(--accent-color);border:2px dashed var(--accent-color);border-radius:2px;padding:8px;opacity:.3;pointer-events:none}.sprite-actions{position:absolute;top:4px;left:50%;transform:translate(-50%);display:flex;gap:4px;opacity:0;transition:opacity .2s;z-index:10}.sprite-card:hover .sprite-actions{opacity:1}.sprite-action-btn{width:22px;height:22px;border-radius:4px;border:1px solid rgba(255,255,255,.2);background:#000c;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;transition:all .2s}.sprite-action-btn:hover{background:#ffffff1a;border-color:#fff}.sprite-action-btn.delete:hover{background:#ef4444;border-color:#ef4444}.sprite-action-btn.duplicate:hover{background:#3b82f6;border-color:#3b82f6}.sprite-action-btn.move-left:hover,.sprite-action-btn.move-right:hover{background:var(--accent-color);border-color:var(--accent-color)}.sprite-action-btn svg{width:12px;height:12px}.add-sprite-card{background:var(--bg-color);border:1px dashed var(--panel-border);border-radius:2px;padding:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s}.add-sprite-card:hover{border-color:var(--accent-color)}.add-sprite-btn{width:40px;height:40px;border-radius:2px;background:var(--button-bg);color:var(--text-muted);border:none;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}.add-sprite-btn:hover{background:var(--button-hover);color:var(--text-color)}.property-panel h3{font-size:.85rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);margin-bottom:12px}.animation-section{margin-bottom:24px}.animation-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}.fps-control{display:flex;flex-direction:column;gap:8px}.fps-control label{font-size:.85rem;color:var(--text-muted)}.fps-control input[type=range]{width:100%;accent-color:var(--accent-color)}.animation-preview{margin-top:16px;display:flex;flex-direction:column;align-items:center;gap:8px}.preview-label{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}#preview-canvas{width:128px;height:128px;image-rendering:pixelated;image-rendering:crisp-edges;border-radius:var(--radius-sm);background-image:linear-gradient(45deg,#18181b 25%,transparent 25%),linear-gradient(-45deg,#18181b 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#18181b 75%),linear-gradient(-45deg,transparent 75%,#18181b 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0px;background-color:#27272a}.color-picker-section,.palette-section{margin-bottom:32px}#main-color-picker{-webkit-appearance:none;appearance:none;border:none;width:100%;height:48px;border-radius:var(--radius-sm);cursor:pointer;background:none;padding:0;overflow:hidden}#main-color-picker::-webkit-color-swatch-wrapper{padding:0}#main-color-picker::-webkit-color-swatch{border:1px solid var(--panel-border);border-radius:var(--radius-sm)}.hex-input-wrapper{display:flex;align-items:center;background:#0000004d;padding:8px 12px;border-radius:var(--radius-sm);margin-top:12px;border:1px solid transparent}.hex-input-wrapper:focus-within{border-color:var(--accent-color)}.hash{color:var(--text-muted);margin-right:4px}#hex-input{background:transparent;border:none;color:var(--text-color);width:100%;font-family:monospace;font-size:1rem;outline:none;text-transform:uppercase}.tools-panel h3{font-size:.7rem;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:8px;text-align:center;width:100%}.palette-header{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:8px}.palette-header h3,.palette-sidebar .palette-header h3{width:auto;margin-bottom:0}.palette-settings-btn{display:flex;align-items:center;justify-content:center;background:transparent;border:none;padding:2px;border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer}.palette-settings-btn:hover{color:var(--text-color)}.palette-settings-btn.active{color:var(--accent-color)}.palette-selector-overlay{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;background:var(--panel-bg)}.palette-selector-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 24px;border-bottom:1px solid var(--panel-border)}.palette-selector-header h2{font-size:.8rem;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted)}.palette-selector-close{display:flex;align-items:center;justify-content:center;background:transparent;border:none;padding:4px;border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer}.palette-selector-close:hover{color:var(--text-color)}.palette-frames-bar{display:flex;align-items:center;justify-content:center;gap:10px;flex:1;min-width:0;padding:0 16px}.palette-frames-strip{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}.palette-frames-strip::-webkit-scrollbar{display:none}.palette-frame-thumb{width:44px;height:44px;flex-shrink:0;padding:2px;background:#0000004d;border:1px solid var(--panel-border);border-radius:var(--radius-sm);cursor:pointer}.palette-frame-thumb canvas{width:100%;height:100%;image-rendering:pixelated;display:block}.palette-frame-thumb.active{border-color:var(--accent-color)}.palette-selector-body{display:flex;flex:1;min-height:0}.palette-canvas-preview{display:flex;flex-direction:column;align-items:center;gap:20px;padding:24px;border-right:1px solid var(--panel-border);overflow-y:auto}.palette-previews-row{display:flex;flex-direction:column;gap:20px}.palette-preview-block{display:flex;flex-direction:column;align-items:center}.palette-canvas-preview canvas{width:176px;height:176px;image-rendering:pixelated;background:repeating-conic-gradient(rgba(255,255,255,.06) 0% 25%,transparent 0% 50%) 0 0 / 16px 16px;border:1px solid var(--panel-border);border-radius:var(--radius-sm);cursor:crosshair}.palette-canvas-preview canvas.previewing{border-color:var(--accent-color)}.palette-undo-btn{display:flex;align-items:center;gap:6px}.palette-undo-btn:disabled{opacity:.4;cursor:default}.palette-manual{max-width:200px}.palette-manual ul{margin:0;padding-left:16px;display:flex;flex-direction:column;gap:6px}.palette-manual li{font-size:.8rem;line-height:1.5;color:var(--text-muted)}.palette-cap-note{margin-top:8px;max-width:180px;font-size:.7rem;line-height:1.4;color:var(--text-muted);text-align:center}.palette-selector-columns{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:24px;align-items:start;padding:24px;overflow-y:auto;flex:1;min-height:0}.palette-column{display:flex;flex-direction:column;align-items:center;box-sizing:border-box;padding:12px;border:1px solid var(--panel-border);border-radius:var(--radius-sm);background:#0003}.palette-column-title{font-size:.65rem;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:10px;text-align:center;white-space:nowrap}.palette-column-current{border-color:var(--accent-color)}.palette-column-hints{border-style:dashed;grid-column:span 2;align-self:stretch;align-items:flex-start}.palette-hints-body{display:flex;flex-direction:column;gap:12px}.palette-hints-heading{font-size:.65rem;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:4px}.palette-hints-group p{font-size:.75rem;line-height:1.5;color:var(--text-muted);margin:0 0 6px}.palette-column-actions{display:flex;flex-direction:column;gap:6px;margin-top:8px;width:100%}.palette-column-actions .secondary-btn-small:disabled{opacity:.4;cursor:default}.palette-danger{color:#f27d7d;border-color:#f27d7d}.palette-column-preset .palette-column-title{max-width:100%;overflow:hidden;text-overflow:ellipsis}.palette-preset-tables{display:flex;align-items:flex-start;gap:12px}.palette-preset-list{display:flex;flex-direction:column;padding:8px 10px;border:1px solid transparent}.palette-preset-row{display:flex;align-items:center;gap:8px;height:20px;background:transparent;border:none;padding:0;cursor:pointer}.palette-preset-hex{font-family:monospace;font-size:.85rem;line-height:20px;color:var(--text-color);text-transform:lowercase}.palette-preset-row:hover .palette-preset-hex,.palette-preset-hex.copied{color:var(--accent-color)}.palette-preset-apply{margin-top:8px}.palette-hex-tables{display:flex;align-items:flex-start;gap:12px}.palette-hex-editor{display:flex;gap:8px;background:#0000004d;border:1px solid transparent;border-radius:var(--radius-sm);padding:8px 10px}.palette-hex-editor:focus-within{border-color:var(--accent-color)}.palette-hex-gutter{display:flex;flex-direction:column}.palette-hex-gutter-swatch{height:20px;display:flex;align-items:center}.palette-hex-gutter-swatch:before{content:"";width:14px;height:14px;border-radius:2px;background:var(--swatch-color, transparent);border:1px solid var(--panel-border)}.palette-hex-gutter-swatch.invalid:before{border:1px dashed var(--text-muted);background:transparent}.palette-hex-gutter-swatch.highlight:before{box-shadow:0 0 0 2px var(--accent-color)}.palette-preset-row.highlight .palette-preset-hex{color:var(--accent-color)}.palette-hex-textarea{background:transparent;border:none;outline:none;resize:none;overflow:hidden;color:var(--text-color);font-family:monospace;font-size:.85rem;line-height:20px;width:8ch;text-transform:lowercase;white-space:pre}.palette-apply-bar{display:flex;align-items:center;justify-content:center;gap:12px;padding:14px 24px;border-top:1px solid var(--panel-border)}.palette-apply-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.5px;color:var(--text-color)}.palette-download-input{background:#0000004d;border:1px solid var(--panel-border);border-radius:var(--radius-sm);color:var(--text-color);font-family:monospace;font-size:.85rem;padding:6px 10px;width:260px;outline:none}.palette-download-input:focus{border-color:var(--accent-color)}.top-bar-swatch.palette-gear{display:flex;align-items:center;justify-content:center;background:#0000004d;border:1px dashed var(--panel-border);color:var(--text-muted);padding:0;cursor:pointer}@media(max-width:768px){.palette-selector-header{padding:8px 12px;gap:8px}.palette-frames-bar{padding:0 4px;gap:6px}.palette-frame-thumb{width:36px;height:36px}.palette-selector-body{flex-direction:column;overflow-y:auto}.palette-canvas-preview{gap:12px;padding:12px;border-right:none;border-bottom:1px solid var(--panel-border);overflow-y:visible}.palette-previews-row{flex-direction:row;justify-content:center;gap:12px}.palette-canvas-preview canvas{width:120px;height:120px}.palette-manual,.palette-hints-hotkeys{display:none}.palette-selector-columns{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;padding:12px;flex:initial;overflow-y:visible;min-height:auto}.palette-apply-bar{flex-wrap:wrap;gap:8px;padding:10px 12px}.palette-download-input{width:100%;max-width:260px}}.palette-sidebar{width:100%;margin-top:clamp(4px,.8vw,12px);margin-bottom:0;flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.palette-sidebar::-webkit-scrollbar{display:none}.palette-sidebar h3{font-size:clamp(.5rem,.7vw,.7rem);text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:clamp(2px,.5vw,8px);text-align:center}.palette-sidebar .palette-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1px,.3vw,4px);width:100%;padding:4px}.palette-sidebar .recent-colors-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1px,.3vw,4px);width:100%;padding:4px;margin-bottom:clamp(4px,1vw,16px)}.palette-mobile{display:none}.palette-grid{width:100%}.palette-color{width:100%;aspect-ratio:1;border-radius:0;cursor:pointer;border:none;transition:all .15s;min-height:0}.palette-color.has-color,.top-bar-swatch.has-color{background-color:var(--swatch-color)}.palette-color:hover{transform:scale(1.1);border-color:#fff}.palette-color.active{border:3px solid white;box-shadow:0 0 0 1px var(--panel-bg);transform:scale(1.1);z-index:2}.palette-color.empty,.top-bar-swatch.empty{background:#333;opacity:.1}.clear-swatch{background-color:#2d2d2d!important;position:relative;overflow:hidden}.clear-swatch:after{content:"";position:absolute;top:50%;left:50%;width:140%;height:2px;background-color:#f33;transform:translate(-50%,-50%) rotate(-45deg);box-shadow:0 0 2px #00000080}.tools-panel .export-section{display:flex;flex-direction:column;gap:8px;width:100%}.export-section{display:flex;flex-direction:column;gap:8px}.primary-btn,.secondary-btn{width:100%;padding:10px;border:none;border-radius:2px;font-weight:400;font-size:.85rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .15s}.primary-btn{background:var(--accent-color);color:#fff}.primary-btn:hover{background:var(--accent-hover)}.primary-btn:active{transform:translateY(0)}.secondary-btn{background:var(--button-bg);color:var(--text-color);border:1px solid var(--panel-border)}.secondary-btn:hover{background:var(--button-hover)}.secondary-btn:active{transform:translateY(0)}.secondary-btn:disabled{opacity:.4;cursor:not-allowed}.main-editor-container{flex:1;display:flex;justify-content:center;align-items:center;position:relative;width:100%;padding:4px;margin:auto;overflow:auto;cursor:default;touch-action:none}.canvas-area{flex:1;display:flex;justify-content:center;align-items:center;padding:0;overflow:hidden;background-image:radial-gradient(circle at 1px 1px,#333 1px,transparent 0);background-size:20px 20px}.main-sprite-editor.playing{background-image:none!important;background-color:transparent!important;border-color:transparent!important;box-shadow:none!important}.main-sprite-editor.playing:after{display:none}.main-sprite-editor.cursor-masked{cursor:var(--cursor-faint)!important}.main-sprite-editor.is-drawing.drag-start-inside:not(.cursor-masked){cursor:var(--selection-cursor)!important}.stamp-animation-canvas{animation:stampCanvasPop .22s cubic-bezier(.2,.9,.18,1) both;filter:drop-shadow(0 0 0 rgba(255,255,255,0));transform-origin:center center;will-change:transform,opacity,filter}.dropper-hold-overlay{position:absolute;inset:0;z-index:22;pointer-events:none}.dropper-hold-cell{position:absolute;left:var(--dropper-left);top:var(--dropper-top);width:var(--dropper-width);height:var(--dropper-height);overflow:hidden}.dropper-hold-fill{position:absolute;top:0;right:0;left:0;height:var(--dropper-progress);background:var(--dropper-color, var(--grid-bg));transition:height var(--dropper-transition-ms) linear}.shape-hold-overlay{position:absolute;inset:0;z-index:23;pointer-events:none}@property --shape-hold-angle{syntax: "<angle>"; inherits: false; initial-value: 0deg;}.shape-hold-ring{position:absolute;left:var(--ring-left);top:var(--ring-top);width:13%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:conic-gradient(var(--ring-color, #ffffff) var(--shape-hold-angle),color-mix(in srgb,var(--ring-color, #ffffff) 28%,transparent) 0);-webkit-mask:radial-gradient(closest-side,transparent 66%,#000 67%,#000 92%,transparent 93%);mask:radial-gradient(closest-side,transparent 66%,#000 67%,#000 92%,transparent 93%);filter:drop-shadow(0 0 2px rgba(0,0,0,.5)) drop-shadow(0 0 1px rgba(255,255,255,.4));opacity:0;animation:shapeHoldSweep var(--ring-sweep) linear var(--ring-delay) forwards}@keyframes shapeHoldSweep{0%{opacity:1;--shape-hold-angle: 0deg}to{opacity:1;--shape-hold-angle: 360deg}}@keyframes stampCanvasPop{0%{opacity:.95;filter:brightness(1) drop-shadow(0 0 0 rgba(255,255,255,0));transform:translateY(0) scale(1)}22%{opacity:1;filter:brightness(1.08) drop-shadow(0 5px 4px rgba(0,0,0,.45));transform:translateY(-9px) scale(1.01)}56%{opacity:1;filter:brightness(1.15) drop-shadow(0 2px 3px rgba(0,0,0,.35));transform:translateY(-4px) scale(1.006)}78%{opacity:.9;filter:brightness(1.35) drop-shadow(0 0 6px rgba(255,255,255,.42));transform:translateY(1px) scale(.998)}to{opacity:0;filter:brightness(1) drop-shadow(0 0 0 rgba(255,255,255,0));transform:translateY(0) scale(1)}}.timeline-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;padding:0 12px;width:100%;gap:8px}.timeline-controls-left,.timeline-header .file-controls{display:flex;align-items:center;gap:8px}.timeline-header span{font-size:.8rem;color:var(--text-color);font-weight:600;text-transform:uppercase;letter-spacing:.5px}.control-btn-small{background:var(--accent-color);color:#fff;border:none;padding:4px 12px;border-radius:var(--radius-sm);font-family:inherit;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .2s ease}.control-btn-small:active,.control-btn-small.active{background:#ef4444;transition:background-color 0s}.selection-controls{position:absolute;bottom:160px;left:50%;z-index:50;display:flex;align-items:center;justify-content:center;gap:16px;padding:8px 16px;border:1px solid #333;border-radius:8px;background-color:#1e1e1ef2;box-shadow:0 4px 12px #00000080;pointer-events:auto;transform:translate(calc(-50% + var(--selection-controls-x, 0px)),var(--selection-controls-y, 0px))}.selection-controls.is-mobile{gap:8px;padding:6px 8px}.selection-controls-drag-handle{display:flex;align-items:center;margin:-8px 0 -8px -12px;padding:0 4px;cursor:grab;opacity:.5;touch-action:none}.selection-controls.is-mobile .selection-controls-drag-handle{margin:-6px 0 -6px -6px;padding:0 2px}.selection-stamp-button{font-weight:700;touch-action:none}.selection-controls.is-mobile .selection-stamp-button{padding:2px 6px;font-size:.75rem}.selection-tool-group{display:flex;gap:4px}.selection-controls.is-mobile .selection-tool-group{gap:2px}.selection-icon-button{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0}.selection-controls.is-mobile .selection-icon-button{width:22px;height:22px}.selection-nudge-button{touch-action:none}.selection-controls.is-mobile .selection-nudge-button{font-size:.8rem}.selection-controls-divider{width:1px;height:16px;margin:0 4px;background-color:#444}.selection-controls.is-mobile .selection-controls-divider{height:12px}.selection-nudge-arrow{display:inline-block}.selection-nudge-arrow.is-left{transform:rotate(90deg)}.selection-nudge-arrow.is-up{transform:rotate(180deg)}.selection-nudge-arrow.is-right{transform:rotate(-90deg)}.secondary-btn-small{padding:4px 8px;font-size:.75rem;background:#ffffff1a;color:var(--text-muted);border:1px solid var(--panel-border);border-radius:var(--radius-sm);cursor:pointer;transition:all .2s ease}.secondary-btn-small:hover{background:#fff3;color:var(--text-color)}.import-export-menu{display:flex;gap:8px;position:relative;z-index:100}.import-export-trigger{position:relative}.hidden-file-input{display:none}.import-export-dropdown{position:absolute;bottom:100%;right:0;left:auto;z-index:100;display:flex;min-width:150px;margin-bottom:4px;padding:8px;flex-direction:column;gap:6px;border:1px solid #444;border-radius:4px;background:#2a2a2a;box-shadow:0 -4px 6px #0000004d}.import-export-dropdown.wide{min-width:200px}.menu-action{padding:6px 8px;border:none;border-radius:3px;background:transparent;color:#ccc;cursor:pointer;font:inherit;text-align:left}.menu-action:hover{background:#333}.menu-action.primary{border:1px solid #444;background:#333}.menu-action.primary:hover{background:#444}.menu-divider{height:1px;margin:4px 0;background:#444}.menu-label{padding:0 4px;color:#888;font-size:.75rem}.menu-select{width:100%;margin-bottom:4px;padding:4px;border:1px solid #444;border-radius:3px;background:#222;color:#ccc;font:inherit}.project-name-input{background:#ffffff0d;color:var(--text-color);border:1px solid var(--panel-border);border-radius:var(--radius-sm);padding:4px 12px;font-size:.75rem;font-weight:500;font-family:inherit;width:150px;outline:none;transition:all .2s ease;text-align:center}.project-name-input:focus{background:#ffffff1a;border-color:var(--accent-color);color:#fff}.project-name-input:hover{background:#ffffff14}.import-export-dropdown .project-name-input{width:100%;padding:4px 8px;border-color:#444;border-radius:3px;background:#222;color:#ccc;font-size:.8rem;text-align:left}.file-controls .secondary-btn:hover{background:#fff3;border-color:var(--accent-color)}.control-btn:hover:not(:disabled){background:var(--button-hover);color:var(--text-color);border-color:var(--accent-color)}.control-btn:disabled{opacity:.5;cursor:not-allowed}.editor-workspace{display:flex;align-items:flex-start;transform:translate(var(--editor-pan-x),var(--editor-pan-y)) scale(var(--editor-zoom));transform-origin:center center}.editor-layer-preview-column,.editor-main-column{display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0}.editor-layer-preview-column.is-left{margin-right:16px}.editor-layer-preview-column.is-right{margin-left:16px}.editor-main-column{position:relative}.editor-layer-label{color:var(--text-muted);font-size:11px;font-weight:700;transform:scale(var(--inverse-zoom));transform-origin:center bottom}.editor-layer-label.is-active{color:var(--text-color);white-space:nowrap}.main-sprite-editor{position:relative;border:2px solid var(--panel-border);width:var(--editor-size, min(463px, 75vw, 65vh));height:var(--editor-size, min(463px, 75vw, 65vh));box-sizing:content-box;flex-shrink:0;overflow:hidden;background-color:var(--grid-bg);cursor:var(--cursor-normal)}.layer-preview{position:relative;width:var(--editor-size, min(463px, 75vw, 65vh));height:var(--editor-size, min(463px, 75vw, 65vh));flex-shrink:0;overflow:hidden;border:2px solid var(--panel-border);box-sizing:content-box;background-color:var(--grid-bg);cursor:pointer;opacity:.68}.layer-preview-canvas{width:100%;height:100%;image-rendering:pixelated;pointer-events:none}.editor-canvas-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.editor-main-canvas,.editor-stamp-canvas{image-rendering:pixelated}.editor-main-canvas{z-index:1}.editor-overlay-canvas{z-index:10}.editor-peer-selection-canvas{z-index:11}.editor-stamp-canvas{z-index:12}.editor-stack-button{position:absolute;top:calc(100% + 8px);left:50%;white-space:nowrap;transform:translate(-50%) scale(var(--inverse-zoom));transform-origin:center top}.editor-frame-number{position:absolute;top:calc(100% + 9px);right:0;color:var(--text-muted);font-size:12px;font-weight:700;line-height:1;opacity:.8;pointer-events:none;transform:scale(var(--inverse-zoom));transform-origin:right top}.main-sprite-editor:after,.layer-preview:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:8;background-image:linear-gradient(90deg,var(--grid-line) 0px,var(--grid-line) 1px,transparent 1px,transparent 100%),linear-gradient(0deg,var(--grid-line) 0px,var(--grid-line) 1px,transparent 1px,transparent 100%);background-size:3.125% 3.125%}.timeline-section{width:100%;max-width:100%;margin-bottom:0;display:flex;flex-direction:column;align-items:center;position:relative;overflow:visible}.timeline-frame{aspect-ratio:1 / 1;background:var(--grid-bg);border:1px solid var(--panel-border);border-radius:0;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;cursor:pointer;overflow:hidden;transition:transform .15s ease-out}@media(hover:hover)and (pointer:fine){.timeline-frame-list:not(.is-dragging) .timeline-frame:hover{border-color:var(--accent-color);z-index:1}}.timeline-frame.add-new{border-style:dashed;background:transparent;opacity:1;transition:all .2s;position:relative}.timeline-frame.add-new:hover{border-color:var(--accent-color);background:var(--button-bg);border-style:solid}.timeline-frame-canvas{width:100%;height:100%;image-rendering:pixelated;pointer-events:none}.timeline-frame.add-new .timeline-frame-canvas{opacity:.5}.timeline-add-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.add-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:2rem;font-weight:700;color:#fff;text-shadow:0 0 4px rgba(0,0,0,.8);pointer-events:none;z-index:2}.timeline-frame.active{border-color:var(--accent-color);box-shadow:inset 0 0 0 1px var(--accent-color)}.timeline-frame.select-pending{border-color:#3b82f6d9}.timeline-frame.select-pending:after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(90deg,#3b82f673,#3b82f63d);transform:scaleX(0);transform-origin:left center;animation:timeline-select-pending-fill var(--frame-select-duration, .5s) linear forwards;will-change:transform}.timeline-frame.select-pending.selected:after{background:linear-gradient(270deg,#3b82f673,#3b82f63d);transform-origin:right center}@keyframes timeline-select-pending-fill{to{transform:scaleX(1)}}.delete-confirm{background-color:#f44!important;color:#fff!important;border-color:red!important;animation:pulse-red 1s infinite}@keyframes pulse-red{0%{box-shadow:0 0 #f446}70%{box-shadow:0 0 0 6px #f440}to{box-shadow:0 0 #f440}}.timeline-frame-wrapper{position:relative;flex:0 0 var(--frame-size);width:var(--frame-size);height:var(--frame-size);box-sizing:content-box;overflow:visible;touch-action:pan-x pan-down!important}.timeline-drag-hint{position:absolute;left:var(--timeline-drag-hint-left, 0px);top:var(--timeline-drag-hint-top, 0px);width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:#7fb0ff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.85));pointer-events:none;z-index:1000;transform:translate(-50%,1px);animation:timeline-drag-hint-arc-right .72s steps(1,end) infinite}.timeline-drag-hint.is-left{animation-name:timeline-drag-hint-arc-left}@keyframes timeline-drag-hint-arc-right{0%,30%{transform:translate(-50%,1px) rotate(0)}33%,63%{transform:translate(calc(-50% + 7px),-5px) rotate(45deg)}66%,96%{transform:translate(calc(-50% + 14px),-9px) rotate(90deg)}to{transform:translate(-50%,1px) rotate(0)}}@keyframes timeline-drag-hint-arc-left{0%,30%{transform:translate(-50%,1px) rotate(0)}33%,63%{transform:translate(calc(-50% - 7px),-5px) rotate(-45deg)}66%,96%{transform:translate(calc(-50% - 14px),-9px) rotate(-90deg)}to{transform:translate(-50%,1px) rotate(0)}}@media(prefers-reduced-motion:reduce){.timeline-drag-hint{animation:none}}.timeline-frame.selected{box-shadow:0 0 0 2px #3b82f6,0 0 8px #3b82f699!important;border-color:#3b82f6!important;z-index:20!important}.timeline-frame.ghost{opacity:.5;border:1px dashed var(--text-muted)!important;background-color:var(--panel-bg)}.timeline-frame.ghost.add-new{opacity:.7;border:1px dashed var(--accent-color)!important}@media(max-width:1024px){:root{--frame-size: 75px}}.top-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--panel-bg);border-bottom:1px solid var(--panel-border);overflow-x:auto;flex-shrink:0}.top-bar-group{display:flex;gap:4px;flex-shrink:0}.top-bar-btn{height:34px;padding:0 10px;border-radius:4px;border:1px solid transparent;background:var(--button-bg);color:var(--text-muted);cursor:pointer;font-size:.75rem;font-weight:500;white-space:nowrap;transition:all .15s}.top-bar-btn:hover{background:var(--button-hover);color:var(--text-color)}.top-bar-btn.active{background:var(--accent-color);color:#fff;border-color:var(--accent-hover)}.top-bar-divider{width:1px;height:24px;background:var(--panel-border);flex-shrink:0}.top-bar-colors{display:flex;gap:3px;flex-shrink:0}.top-bar-swatch{width:24px;height:24px;border-radius:2px;cursor:pointer;border:2px solid transparent;transition:all .15s;flex-shrink:0}.top-bar-swatch:hover{transform:scale(1.15)}.top-bar-swatch.active{border-color:#fff;transform:scale(1.15);z-index:2}.mobile-toggles{display:flex;justify-content:center;gap:16px;padding:4px 12px;background:var(--panel-bg);border-bottom:1px solid var(--panel-border);flex-shrink:0}@media(max-width:768px){:root{--frame-size: 56px}.canvas-area{padding:8px 4px 0}.main-editor-container{padding:2px}.timeline-section{margin-top:8px}.canvas-area>span,.canvas-area>div>span{font-size:.65rem!important}.timeline-frame-list span{font-size:.65rem!important}.timeline-header{padding:0 8px;margin-bottom:4px}.control-btn-small{padding:3px 8px;font-size:.65rem}.secondary-btn-small{padding:3px 6px;font-size:.65rem}.view-toggle{font-size:.7rem}.frame-number{font-size:8px;top:2px;left:2px}.file-controls .secondary-btn{padding:4px 8px;font-size:.7rem}.canvas-area button{font-size:.7rem;padding:4px 10px}.top-bar{padding:6px 8px;gap:6px}.top-bar-btn{height:28px;padding:0 8px;font-size:.65rem}.top-bar-swatch{width:20px;height:20px}.top-bar-divider{height:20px}}