@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap";:root{--color-brand-primary: #FFE135;--color-brand-secondary: #00E5FF;--color-brand-accent: #FF0055;--bg-app: #050505;--bg-panel: rgba(20, 20, 20, .7);--bg-surface: rgba(30, 30, 30, .5);--text-primary: #ffffff;--text-secondary: #a0a0a0;--text-muted: #555555;--text-inverse: #000000;--border-light: rgba(255, 255, 255, .1);--border-glow: rgba(255, 225, 53, .3);--shadow-card: 0 8px 32px 0 rgba(0, 0, 0, .37);--glass-blur: blur(12px);--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 16px;--font-sans: "Inter", system-ui, sans-serif;--font-mono: "JetBrains Mono", monospace}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg-app);color:var(--text-primary);min-height:100vh;overflow-x:hidden;line-height:1.5;-webkit-font-smoothing:antialiased}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-app)}::-webkit-scrollbar-thumb{background:var(--bg-surface);border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb:hover{background:var(--color-brand-primary)}.container{max-width:1440px;margin:0 auto;padding:0 var(--spacing-md);height:100vh;display:flex;flex-direction:column}h1,h2,h3,h4{font-weight:700;letter-spacing:-.02em}h1{font-size:2.5rem;background:linear-gradient(to right,var(--color-brand-primary),#fff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}button{cursor:pointer;border:none;font-family:var(--font-sans);transition:all .2s ease}.btn-primary{background:var(--color-brand-primary);color:var(--text-inverse);padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-md);font-weight:600;text-transform:uppercase;letter-spacing:.05em}.btn-primary:hover{box-shadow:0 0 15px var(--color-brand-primary);transform:translateY(-1px)}.card{background:var(--bg-panel);border:1px solid var(--border-light);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-card)}input,textarea,select{background:var(--bg-surface);border:1px solid var(--border-light);color:var(--text-primary);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);font-family:var(--font-sans);width:100%;transition:border-color .2s}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--color-brand-primary);box-shadow:0 0 0 1px #ffe13533}.sprite-editor-overlay{position:fixed;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.sprite-editor-modal{background:var(--bg-panel);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:var(--spacing-lg);min-width:400px;max-width:90vw;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 20px 60px #00000080}.sprite-editor-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--border-light)}.sprite-editor-header h3{color:var(--color-brand-primary);font-size:1.2rem}.sprite-editor-header .close-btn{background:transparent;color:var(--text-secondary);font-size:1.2rem;padding:var(--spacing-xs);border-radius:var(--radius-sm)}.sprite-editor-header .close-btn:hover{color:var(--color-brand-accent);background:#ff00551a}.sprite-editor-content{display:flex;flex-direction:column;gap:var(--spacing-md);flex:1;overflow:auto}.sprite-editor-toolbar{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm);background:var(--bg-surface);border-radius:var(--radius-md)}.tool-group{display:flex;gap:4px}.tool-btn{background:transparent;padding:var(--spacing-sm);border-radius:var(--radius-sm);font-size:1.2rem;min-width:40px;min-height:40px;display:flex;align-items:center;justify-content:center}.tool-btn:hover{background:#ffffff1a}.tool-btn.active{background:var(--color-brand-primary);box-shadow:0 0 10px var(--color-brand-primary)}.tool-btn:disabled{opacity:.3;cursor:not-allowed}.tool-divider{width:1px;height:30px;background:var(--border-light);margin:0 var(--spacing-xs)}.grid-toggle{display:flex;align-items:center;gap:var(--spacing-xs);color:var(--text-secondary);font-size:.85rem;cursor:pointer;margin-left:auto}.grid-toggle input{width:auto;cursor:pointer}.sprite-editor-canvas-container{display:flex;justify-content:center;padding:var(--spacing-md);background:repeating-conic-gradient(#202020 0% 25%,#151515 0% 50%) 50% / 20px 20px;border-radius:var(--radius-md);border:1px solid var(--border-light)}.sprite-editor-canvas-wrapper{border:2px solid var(--color-brand-secondary);box-shadow:0 0 20px #00e5ff4d}.sprite-editor-canvas-wrapper canvas{display:block}.sprite-editor-colors{display:flex;flex-direction:column;gap:var(--spacing-sm)}.current-color{display:flex;align-items:center;gap:var(--spacing-sm)}.current-color label{color:var(--text-secondary);font-size:.85rem}.current-color input[type=color]{width:40px;height:40px;padding:0;border:2px solid var(--border-light);border-radius:var(--radius-sm);cursor:pointer}.color-hex{font-family:var(--font-mono);font-size:.85rem;color:var(--text-muted)}.recent-colors{display:flex;gap:4px;flex-wrap:wrap}.color-swatch{width:28px;height:28px;border:2px solid var(--border-light);border-radius:var(--radius-sm);cursor:pointer;transition:transform .15s,border-color .15s}.color-swatch:hover{transform:scale(1.1);border-color:var(--color-brand-primary)}.sprite-editor-actions{display:flex;justify-content:flex-end;align-items:center;gap:var(--spacing-sm);margin-top:var(--spacing-md);padding-top:var(--spacing-md);border-top:1px solid var(--border-light)}.sprite-editor-nav{display:flex;align-items:center;justify-content:center;gap:var(--spacing-md);padding:var(--spacing-sm);background:var(--bg-surface);border-radius:var(--radius-md)}.nav-btn{background:var(--color-brand-secondary);color:#000;border:none;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-sm);font-weight:600;font-size:.85rem;cursor:pointer;transition:all .15s}.nav-btn:hover{transform:scale(1.05);box-shadow:0 0 10px var(--color-brand-secondary)}.frame-indicator{font-family:var(--font-mono);font-size:.85rem;color:var(--text-secondary);min-width:120px;text-align:center}.btn-secondary{background:transparent;color:var(--text-secondary);padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-md);border:1px solid var(--border-light);font-weight:500}.btn-secondary:hover{background:#ffffff0d;color:var(--text-primary)}@media(max-width:768px){.container{height:auto;min-height:100vh;padding:var(--spacing-sm)}.container>div{flex-direction:column}aside,main{width:100%!important;height:auto!important;overflow:visible!important}.sprite-editor-modal{width:100%;height:100%;max-width:100%;max-height:100%;border-radius:0;padding:var(--spacing-sm)}.sprite-editor-content{gap:var(--spacing-sm)}.sprite-editor-canvas-wrapper{max-width:100%;max-height:60vh;overflow:auto}}