:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#1e1e22;--panel:#29292f;--panel-border:#3a3a42;--text:#e8e8ec;--accent:#4da3ff;--accent-active:#2f7fd9;--checker-a:#a0a0a0;--checker-b:#c8c8c8;font-family:system-ui,sans-serif}.checker{background-image:repeating-conic-gradient(var(--checker-a) 0% 25%, var(--checker-b) 0% 50%);background-position:0 0}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text)}button{color:var(--text);border:1px solid var(--panel-border);cursor:pointer;background:#38383f;border-radius:4px;padding:4px 8px;font-size:12px}button:hover:not(:disabled){background:#45454d}button:disabled{opacity:.4;cursor:default}input[type=text],input[type=number],input{color:var(--text);border:1px solid var(--panel-border);background:#1a1a1e;border-radius:4px;padding:3px 6px;font-size:12px}h2,h3{margin:4px 0}label{align-items:center;gap:4px;font-size:12px;display:flex}.app{flex-direction:column;height:100%;display:flex}.top-bar{background:var(--panel);border-bottom:1px solid var(--panel-border);align-items:center;gap:8px;padding:8px 12px;display:flex}.app-title{align-items:center;gap:8px;margin-right:16px;font-weight:700;display:inline-flex}.app-logo{image-rendering:pixelated;border-radius:4px;display:block}.top-bar-head,.top-actions{display:contents}.top-preview-btn{display:none}.export-menu-wrapper{position:relative}.export-menu{background:var(--panel);border:1px solid var(--panel-border);z-index:20;border-radius:4px;flex-direction:column;min-width:180px;display:flex;position:absolute;top:100%;left:0}.export-menu button{text-align:left;border:none;border-radius:0}.app-body{flex:1;gap:8px;min-height:0;padding:8px;display:flex;overflow:auto}.left-column{flex-direction:column;flex-shrink:0;gap:8px;width:220px;display:flex}.right-column{flex-direction:column;flex-shrink:0;gap:8px;width:280px;display:flex}.center-column{flex-direction:column;flex:1;gap:8px;min-width:0;display:flex}.toolbar,.animation-panel{flex-shrink:0}.palette-panel,.layers-panel{flex-direction:column;flex:1 1 0;min-height:0;display:flex}.panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:6px;padding:8px}.panel-header{justify-content:space-between;align-items:center;display:flex}.tool-row{flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px;display:flex}.tool-btn.active,.tool-btn.active:hover{background:var(--accent-active);border-color:var(--accent)}.tool-list{flex-direction:column;gap:4px;display:flex}.tool-divider{background:var(--panel-border);height:1px;margin:8px 0}.tool-toggle{display:none}.tool-body{display:contents}.icon-group{grid-template-columns:repeat(4,1fr);gap:4px;display:grid}.icon-btn{width:100%;height:34px;color:var(--text);justify-content:center;align-items:center;padding:0;display:flex;position:relative}.tool-list .icon-btn{height:38px}.icon-btn.active,.icon-btn.active:hover{background:var(--accent-active);border-color:var(--accent);color:#fff}.icon-tip{white-space:nowrap;color:var(--text);border:1px solid var(--panel-border);opacity:0;pointer-events:none;z-index:50;background:#101014;border-radius:4px;align-items:center;gap:6px;padding:3px 7px;font-size:12px;transition:opacity 80ms;display:flex;position:absolute;top:50%;left:calc(100% + 8px);transform:translateY(-50%)}.icon-tip.top{top:auto;bottom:calc(100% + 6px);left:50%;transform:translate(-50%)}.toolbar .icon-tip.top{left:0;transform:none}.icon-tip.fixed{opacity:1;position:fixed;transform:translate(-50%,-100%)}.icon-btn:hover .icon-tip,.tip-host:hover .icon-tip{opacity:1}.tip-host{position:relative}.icon-tip kbd{border:1px solid var(--panel-border);background:#2a2a30;border-radius:3px;padding:0 4px;font-family:inherit;font-size:11px;line-height:1.5}.palette-top{flex-shrink:0}.palette-scroll{flex:1;min-height:0;padding:3px;overflow:hidden auto}.swatch-grid{grid-template-columns:repeat(auto-fill,minmax(24px,1fr));gap:4px;margin:4px 0;display:grid}.swatch-grid .hint{grid-column:1/-1}.swatch{aspect-ratio:1;border:1px solid var(--panel-border);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;border-radius:3px;width:100%;height:auto;padding:0;position:relative}.swatch.active{outline:2px solid var(--accent)}.swatch-tip{white-space:nowrap;color:var(--text);border:1px solid var(--panel-border);opacity:0;pointer-events:none;z-index:50;background:#101014;border-radius:4px;flex-direction:column;gap:2px;padding:4px 7px;font-size:11px;transition:opacity 80ms;display:flex;position:absolute;bottom:calc(100% + 5px);left:0}.swatch:hover .swatch-tip{opacity:1}.swatch-tip.fixed{opacity:1;position:fixed;bottom:auto;right:auto;transform:translate(-50%,-100%)}.swatch-tip-row{align-items:center;gap:6px;display:flex}.swatch-tip-hint{opacity:.6;font-size:10px}.hex-input{width:80px}.hex-input.full{text-align:center;letter-spacing:.5px;width:100%;margin-top:8px}.hint{opacity:.6;font-size:11px}.color-picker{align-items:center;gap:10px;margin-top:4px;display:flex}.hsb-sliders{flex-direction:column;flex:1;justify-content:center;gap:8px;min-width:0;display:flex}.slider-row{align-items:center;gap:6px;display:flex}.slider-label{opacity:.65;text-align:center;width:10px;font-size:10px}.color-slider{appearance:none;border:1px solid var(--panel-border);cursor:pointer;border-radius:6px;flex:1;min-width:0;height:12px;padding:0}.color-slider::-webkit-slider-runnable-track{background:0 0;height:12px}.color-slider::-webkit-slider-thumb{appearance:none;background:#fff;border:1px solid #000;border-radius:3px;width:8px;height:16px;margin-top:-3px;box-shadow:0 0 0 1px #fff}.color-slider::-moz-range-track{background:0 0;height:12px}.color-slider::-moz-range-thumb{background:#fff;border:1px solid #000;border-radius:3px;width:8px;height:16px;box-shadow:0 0 0 1px #fff}.current-color{border:1px solid var(--panel-border);border-radius:6px;flex-shrink:0;width:56px;height:56px}.palette-header{justify-content:space-between;align-items:center;margin-top:10px;display:flex}.add-current{padding:3px 8px;font-size:11px}.view-mode-bar{background:var(--panel);border:1px solid var(--panel-border);border-radius:6px;flex-wrap:wrap;align-items:center;gap:8px;padding:8px;display:flex}.view-tabs{align-items:center;gap:8px;display:flex}.zoom-field{flex-shrink:0;margin-left:auto}.view-dims{flex-basis:100%;gap:8px;display:flex}.view-dims .field{flex:1}.view-dims .field input{flex:1;min-width:0}.onion-controls{flex-shrink:0;align-items:center;gap:14px;display:flex}.onion-toggle,.onion-op{gap:6px}.onion-op input[type=range]{width:90px}.onion-op-val{opacity:.75;font-variant-numeric:tabular-nums;min-width:34px}.canvas-scroll{border:1px solid var(--panel-border);background:#101012;border-radius:6px;flex:1;justify-content:safe center;align-items:safe center;min-height:200px;display:flex;overflow:auto}.canvas-scroll.pan-ready{cursor:grab}.canvas-scroll.panning{cursor:grabbing}.canvas-scroll.pan-ready .pixel-canvas,.canvas-scroll.panning .pixel-canvas{cursor:inherit}.canvas-stack{border:1px solid #444;flex-shrink:0;line-height:0;position:relative}.pixel-canvas{image-rendering:pixelated;touch-action:none;cursor:crosshair;display:block}.grid-overlay{pointer-events:none;position:absolute;top:0;left:0}.frames-panel{overflow-x:auto}.frame-strip{gap:6px;display:flex;overflow-x:auto}.frame-item{border:1px solid var(--panel-border);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;border-radius:4px;flex-direction:column;flex-shrink:0;align-items:center;gap:2px;padding:4px;display:flex}.frame-item.active{border-color:var(--accent)}.frame-item{transition:margin .12s,transform .1s;position:relative}.frame-item.dragging{opacity:.92;cursor:grabbing;z-index:3;transform:scale(1.06);box-shadow:0 8px 20px #0000008c}.frame-item.gap-before{margin-left:54px}.frame-item.gap-before:before{content:"";background:var(--accent);border-radius:2px;width:3px;position:absolute;top:0;bottom:0;left:-30px}.frame-item.gap-after{margin-right:54px}.frame-item.gap-after:after{content:"";background:var(--accent);border-radius:2px;width:3px;position:absolute;top:0;bottom:0;right:-30px}.onion-opacity{flex-direction:column;gap:3px;margin-top:10px;font-size:12px;display:flex}.onion-opacity input[type=range]{width:100%}.onion-toggle{gap:6px;margin-bottom:4px}.field-label{opacity:.65;margin:8px 0 4px;font-size:11px}.segmented{grid-template-columns:1fr 1fr;gap:4px;display:grid}.segmented .tool-btn{width:100%}kbd{border:1px solid var(--panel-border);background:#2a2a30;border-radius:3px;padding:0 4px;font-family:inherit;font-size:11px;line-height:1.5}.import-modes{border:1px solid var(--panel-border);border-radius:6px;flex-direction:column;gap:6px;margin:4px 0;padding:8px 10px;display:flex}.import-modes legend{opacity:.7;padding:0 6px;font-size:12px}.import-modes label{cursor:pointer;align-items:center;gap:6px;display:flex}.merge-row{align-items:center;gap:6px;margin:4px 0;font-size:13px;display:flex}.merge-tol{opacity:.8;align-items:center;gap:4px;margin-left:6px;font-size:12px;display:flex}.merge-tol input{width:56px}.transport{justify-content:center;gap:6px;display:flex}.transport .icon-btn{flex:1;max-width:64px;height:36px}.transport .icon-btn.transport-play{max-width:96px}.playback-settings{justify-content:space-between;align-items:center;gap:8px;margin-top:10px;display:flex}.field{align-items:center;gap:6px;font-size:12px;display:flex}.playback-settings .field input[type=number]{width:52px}.frame-thumb{image-rendering:pixelated;border:1px solid #555}.frame-index{opacity:.7;font-size:10px}.frame-actions{gap:2px;display:flex}.frame-actions button{padding:1px 4px;font-size:10px}.frame-eye{z-index:2;width:20px;height:20px;color:var(--text);border:1px solid var(--panel-border);background:#141418b8;border-radius:4px;justify-content:center;align-items:center;padding:0;display:flex;position:absolute;top:3px;right:3px}.frame-eye:hover{background:#141418e6}.frame-item.frame-hidden .frame-thumb{opacity:.35}.frame-item.frame-hidden .frame-eye{color:#7b7b85}.frame-add-end{min-width:46px;color:var(--text);border:1px dashed var(--panel-border);background:0 0;border-radius:4px;flex-shrink:0;justify-content:center;align-self:stretch;align-items:center;font-size:30px;line-height:1;display:flex}.frame-add-end:hover{border-color:var(--accent);color:var(--accent);background:#4da3ff14}.layers-panel .panel-header{flex-shrink:0}.layer-list{flex-direction:column;flex:1;gap:4px;min-height:0;margin:0;padding:0;list-style:none;display:flex;overflow-y:auto}.layer-row{border-radius:4px;align-items:center;gap:4px;padding:4px;display:flex}.layer-row.active{background:#35353d}.layer-name{flex:1;min-width:0}.preview-box{aspect-ratio:1;border:1px solid var(--panel-border);background:#101012;border-radius:6px;justify-content:center;align-items:center;width:100%;margin-bottom:8px;display:flex;overflow:hidden}.preview-canvas{image-rendering:pixelated;border:1px solid #555;display:block}.modal-backdrop{z-index:100;background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--panel);border:1px solid var(--panel-border);border-radius:8px;flex-direction:column;gap:8px;min-width:320px;padding:16px;display:flex}.error{color:#ff6b6b;font-size:12px}.anchor-grid{grid-template-rows:repeat(3,32px);grid-template-columns:repeat(3,32px);gap:4px;margin-top:4px;display:grid}.anchor-cell{justify-content:center;align-items:center;padding:0;font-size:16px;display:flex}.anchor-cell.active{background:var(--accent-active);border-color:var(--accent)}@media (width<=820px){html,body,#root,.app{height:auto;min-height:100%}.app-body{flex-direction:column;overflow:visible}.left-column,.center-column,.right-column{display:contents}.view-mode-bar{order:1}.toolbar{order:2}.canvas-scroll{order:3}.frames-panel{order:4}.palette-panel{order:5}.layers-panel{order:6}.toolbar,.frames-panel,.palette-panel,.layers-panel{flex:none}.toolbar{background:0 0;border:none;flex-direction:column;gap:8px;padding:0;display:flex;position:relative;overflow:visible}.toolbar .icon-group{order:1}.toolbar .icon-group .icon-btn{height:46px}.tool-divider{display:none}.tool-toggle{background:var(--panel);border:1px solid var(--panel-border);border-radius:6px;order:2;justify-content:flex-start;align-items:center;gap:8px;width:100%;height:46px;padding:0 14px;display:flex}.tool-toggle-label{text-align:left;flex:1;font-weight:600}.tool-toggle-caret{opacity:.7;transition:transform .15s}.toolbar.tools-open .tool-toggle-caret{transform:rotate(180deg)}.tool-body{order:3;display:none}.toolbar.tools-open .tool-body{z-index:40;background:var(--panel);border:1px solid var(--panel-border);border-radius:8px;flex-direction:column;gap:8px;padding:10px;display:flex;position:absolute;top:calc(100% + 4px);left:0;right:0;box-shadow:0 10px 28px #0000008c}.canvas-scroll{flex:none;height:60vh;min-height:260px}.toolbar.tools-open .tool-list .icon-btn,.toolbar.tools-open .icon-group .icon-btn{height:46px}.palette-scroll{flex:none;max-height:46vh}.layer-list{flex:none;max-height:40vh}.preview-box{max-width:300px;margin-left:auto;margin-right:auto}.top-bar{flex-wrap:wrap}.view-mode-bar{justify-content:flex-start}.view-tabs{flex:100%;order:1}.view-tabs .tool-btn{flex:1;min-width:0}.zoom-field{flex:2 1 0;order:2;min-width:0;margin:0}.view-dims{flex:2 1 0;order:3;min-width:0}.view-dims .field{flex:1;min-width:0}.view-mode-bar .field{flex-direction:column;align-items:stretch;gap:3px}.view-mode-bar .field input{flex:none;width:100%}.modal{width:100%;min-width:0;max-width:calc(100vw - 24px)}.frames-panel .frame-strip{padding-bottom:4px}.top-bar{flex-direction:column;align-items:stretch;gap:8px}.top-bar-head{justify-content:space-between;align-items:center;display:flex}.app-title{margin-right:0}.top-preview-btn{background:var(--accent);color:#fff;border:none;align-items:center;gap:6px;font-weight:600;display:inline-flex}.top-actions{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;display:grid}.top-actions .export-menu-wrapper>button{width:100%;height:100%}.top-actions>button,.top-actions .export-menu-wrapper>button{white-space:normal;padding:6px 4px;font-size:12px;line-height:1.15}.preview-modal{align-items:stretch}}