*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#1e1e1e;color:#e0e0e0;overflow:hidden}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.canvas-container{display:flex;align-items:center;justify-content:center;padding:20px}.canvas-container canvas{border:2px solid #404040;background:transparent;cursor:crosshair}.toolbar h3{font-size:12px;font-weight:600;margin-bottom:10px;color:#ccc;text-transform:uppercase}.toolbar-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.tool-btn{padding:12px;background:#3c3c3c;border:1px solid #404040;border-radius:4px;cursor:pointer;font-size:20px;transition:all .2s}.tool-btn:hover{background:#4a4a4a}.tool-btn.active{background:#007acc;border-color:#007acc}.layers-panel{display:flex;flex-direction:column}.panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.panel-header h3{font-size:12px;font-weight:600;color:#ccc;text-transform:uppercase}.add-btn{width:24px;height:24px;background:#3c3c3c;border:1px solid #404040;border-radius:4px;color:#e0e0e0;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center}.add-btn:hover{background:#4a4a4a}.layers-list{display:flex;flex-direction:column;gap:4px}.layer-item{display:flex;align-items:center;gap:8px;padding:8px;background:#3c3c3c;border:1px solid #404040;border-radius:4px;cursor:pointer}.layer-item:hover{background:#4a4a4a}.layer-item.active{background:#007acc;border-color:#007acc}.visibility-btn{background:none;border:none;cursor:pointer;font-size:16px;padding:0;width:20px;height:20px}.layer-name{flex:1;font-size:14px}.layer-actions{display:flex;gap:4px}.mirror-btn{background:none;border:none;cursor:pointer;font-size:14px;padding:2px 4px;opacity:.7;transition:opacity .2s}.mirror-btn:hover{opacity:1}.frames-panel{display:flex;flex-direction:column}.frames-list{display:flex;flex-direction:column;gap:4px}.frame-item{display:flex;align-items:center;justify-content:center;padding:12px;background:#3c3c3c;border:1px solid #404040;border-radius:4px;cursor:pointer}.frame-item:hover{background:#4a4a4a}.frame-item.active{background:#007acc;border-color:#007acc}.frame-number{font-size:14px;font-weight:600}.color-picker h3{font-size:12px;font-weight:600;margin-bottom:10px;color:#ccc;text-transform:uppercase}.color-preview{width:100%;height:40px;border:1px solid #404040;border-radius:4px;margin-bottom:10px}.color-input{width:100%;height:40px;border:1px solid #404040;border-radius:4px;margin-bottom:10px;cursor:pointer}.color-presets{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}.color-preset{aspect-ratio:1;border:1px solid #404040;border-radius:2px;cursor:pointer;padding:0}.color-preset:hover{border-color:#007acc}.alpha-control{margin-bottom:10px}.alpha-control label{display:block;font-size:11px;color:#ccc;margin-bottom:4px}.alpha-slider{width:100%;height:6px;border-radius:3px;background:#404040;outline:none;-webkit-appearance:none}.alpha-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#007acc;cursor:pointer}.alpha-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#007acc;cursor:pointer;border:none}.pixel-size-control h3{font-size:12px;font-weight:600;margin-bottom:10px;color:#ccc;text-transform:uppercase}.size-control{margin-bottom:10px}.size-control label{display:block;font-size:11px;color:#ccc;margin-bottom:4px}.size-slider{width:100%;height:6px;border-radius:3px;background:#404040;outline:none;-webkit-appearance:none}.size-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#007acc;cursor:pointer}.size-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#007acc;cursor:pointer;border:none}.app{display:flex;flex-direction:column;height:100vh;width:100vw}.app-header{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;background:#2d2d2d;border-bottom:1px solid #404040}.app-header h1{font-size:18px;font-weight:600}.export-buttons{display:flex;gap:10px}.export-btn{padding:8px 16px;background:#007acc;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px}.export-btn:hover{background:#005a9e}.app-content{display:flex;flex:1;overflow:hidden}.left-panel{width:200px;background:#252526;border-right:1px solid #404040;padding:10px;display:flex;flex-direction:column;gap:20px}.center-panel{flex:1;display:flex;align-items:center;justify-content:center;background:#1e1e1e;overflow:auto}.right-panel{width:250px;background:#252526;border-left:1px solid #404040;display:flex;flex-direction:column;gap:20px;padding:10px}