@import"https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400;500;600;700&display=swap";:root{--background: #1a1a2e;--surface: #16213e;--primary: #e94560;--primary-hover: #ff6b81;--text: #eaeaea;--text-secondary: #a0a0a0;--text-muted: #666666;--border: #2a2a4e;--border-light: #3a3a5e;--success: #4ade80;--warning: #fbbf24;--error: #ef4444;--info: #3b82f6;--shadow-sm: 2px 2px 0 rgba(0, 0, 0, .3);--shadow-md: 4px 4px 0 rgba(0, 0, 0, .3);--shadow-lg: 6px 6px 0 rgba(0, 0, 0, .3);--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--font-family: "Pixelify Sans", monospace;--font-size-xs: 12px;--font-size-sm: 14px;--font-size-base: 16px;--font-size-lg: 18px;--font-size-xl: 24px;--font-size-2xl: 32px;--font-size-3xl: 48px;--transition-fast: .1s ease;--transition-normal: .2s ease;--transition-slow: .3s ease;--z-base: 0;--z-dropdown: 100;--z-sticky: 200;--z-modal: 300;--z-tooltip: 400;--z-toast: 500}[data-theme=light]{--background: #f5f5f5;--surface: #ffffff;--primary: #e94560;--primary-hover: #d63a54;--text: #1a1a2e;--text-secondary: #4a4a5e;--text-muted: #8a8a9e;--border: #e0e0e0;--border-light: #d0d0d0;--shadow-sm: 2px 2px 0 rgba(0, 0, 0, .1);--shadow-md: 4px 4px 0 rgba(0, 0, 0, .1);--shadow-lg: 6px 6px 0 rgba(0, 0, 0, .1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}body{font-family:var(--font-family);font-size:var(--font-size-base);line-height:1.5;color:var(--text);background-color:var(--background);min-height:100vh;overflow-x:hidden}h1,h2,h3,h4,h5,h6{font-family:var(--font-family);font-weight:700;line-height:1.2;color:var(--text)}h1{font-size:var(--font-size-3xl)}h2{font-size:var(--font-size-2xl)}h3{font-size:var(--font-size-xl)}h4{font-size:var(--font-size-lg)}h5,h6{font-size:var(--font-size-base)}p{font-family:var(--font-family);color:var(--text)}a{color:var(--primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--primary-hover)}button,input,select,textarea{font-family:var(--font-family);font-size:var(--font-size-base);border-radius:0;border:2px solid var(--border);background-color:var(--surface);color:var(--text);outline:none}button{cursor:pointer;border:none;background-color:var(--primary);color:var(--text);padding:var(--spacing-sm) var(--spacing-md);transition:background-color var(--transition-fast),transform var(--transition-fast)}button:hover{background-color:var(--primary-hover)}button:active{transform:translate(2px,2px)}button:disabled{opacity:.5;cursor:not-allowed}button:disabled:active{transform:none}input,select,textarea{padding:var(--spacing-sm) var(--spacing-md)}input:focus,select:focus,textarea:focus{border-color:var(--primary)}:focus{outline:none}:focus-visible{outline:2px solid var(--primary);outline-offset:2px}::selection{background-color:var(--primary);color:var(--text)}::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track{background:var(--surface);border:2px solid var(--border)}::-webkit-scrollbar-thumb{background:var(--border-light);border:2px solid var(--border)}::-webkit-scrollbar-thumb:hover{background:var(--primary)}::-webkit-scrollbar-corner{background:var(--surface)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.pixel-border{border:2px solid var(--border)}.pixel-shadow{box-shadow:var(--shadow-md)}.pixel-art,canvas{image-rendering:pixelated;image-rendering:crisp-edges}.no-select{user-select:none;-webkit-user-select:none}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--spacing-md)}@media(max-width:768px){:root{--font-size-3xl: 36px;--font-size-2xl: 28px;--font-size-xl: 20px}}@media(max-width:480px){:root{--font-size-3xl: 28px;--font-size-2xl: 24px;--font-size-xl: 18px}}:root{--touch-target-min: 44px;--mobile-spacing: 12px;--sidebar-collapsed-width: 48px;--sidebar-expanded-width: 280px;--bottom-nav-height: 56px}@media(max-width:1024px){button,input,select,textarea{min-height:var(--touch-target-min)}input[type=text],input[type=email],input[type=password],input[type=number],textarea{font-size:16px;padding:var(--spacing-sm) var(--spacing-md)}.container{padding:0 var(--mobile-spacing)}}@media(max-width:768px){html{font-size:14px}button{min-height:var(--touch-target-min);min-width:var(--touch-target-min);padding:var(--spacing-sm) var(--spacing-md)}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-thumb{border:none}}.sidebar-collapsible{transition:width var(--transition-normal),transform var(--transition-normal),opacity var(--transition-normal);will-change:width,transform}.sidebar-collapsible.collapsed{width:var(--sidebar-collapsed-width);overflow:hidden}.sidebar-collapsible.collapsed .sidebar-content,.sidebar-collapsible.collapsed .panel-content{opacity:0;visibility:hidden;pointer-events:none}.sidebar-toggle{display:none;position:absolute;z-index:var(--z-sticky);width:32px;height:32px;padding:0;background-color:var(--surface);border:2px solid var(--border);color:var(--text);cursor:pointer;transition:background-color var(--transition-fast)}.sidebar-toggle:hover{background-color:var(--border)}.sidebar-toggle:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.sidebar-toggle svg{transition:transform var(--transition-fast)}.sidebar-toggle.collapsed svg{transform:rotate(180deg)}@media(max-width:1024px){.sidebar-toggle{display:flex;align-items:center;justify-content:center}}@media(max-width:768px){.sidebar-collapsible{position:fixed;top:0;bottom:0;z-index:var(--z-modal);width:var(--sidebar-expanded-width);max-width:85vw;background-color:var(--surface);box-shadow:var(--shadow-lg);transform:translate(-100%)}.sidebar-collapsible.right{right:0;left:auto;transform:translate(100%)}.sidebar-collapsible.open{transform:translate(0)}.sidebar-backdrop{position:fixed;inset:0;background-color:#00000080;z-index:calc(var(--z-modal) - 1);opacity:0;visibility:hidden;transition:opacity var(--transition-normal),visibility var(--transition-normal)}.sidebar-backdrop.visible{opacity:1;visibility:visible}}.bottom-nav{display:none}@media(max-width:768px){.bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;height:var(--bottom-nav-height);background-color:var(--surface);border-top:2px solid var(--border);z-index:var(--z-sticky);justify-content:space-around;align-items:center;padding:0 var(--spacing-sm);padding-bottom:env(safe-area-inset-bottom,0)}.bottom-nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;height:100%;max-width:80px;padding:var(--spacing-xs);background:none;border:none;color:var(--text-muted);font-family:var(--font-family);font-size:var(--font-size-xs);text-decoration:none;cursor:pointer;transition:color var(--transition-fast);gap:2px}.bottom-nav-item:hover,.bottom-nav-item:focus{color:var(--text)}.bottom-nav-item.active{color:var(--primary)}.bottom-nav-item:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}.bottom-nav-item svg{width:24px;height:24px}.bottom-nav-item span{font-size:10px;text-transform:uppercase;letter-spacing:.5px}body.has-bottom-nav{padding-bottom:var(--bottom-nav-height)}}@media(max-width:768px){.editor-page{height:calc(100vh - var(--bottom-nav-height));height:calc(100dvh - var(--bottom-nav-height))}.mobile-tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--touch-target-min),1fr));gap:var(--spacing-xs);padding:var(--spacing-sm)}.swipe-indicator{display:flex;justify-content:center;gap:var(--spacing-xs);padding:var(--spacing-xs)}.swipe-indicator-dot{width:8px;height:8px;background-color:var(--border-light);transition:background-color var(--transition-fast)}.swipe-indicator-dot.active{background-color:var(--primary)}}@media(max-width:480px){.panel-stack{display:flex;flex-direction:column;gap:var(--spacing-sm)}.color-palette-compact{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:var(--spacing-xs)}.color-palette-compact .color-swatch{width:100%;aspect-ratio:1;min-width:0}.fab{position:fixed;bottom:calc(var(--bottom-nav-height) + var(--spacing-md));right:var(--spacing-md);width:56px;height:56px;border-radius:0;background-color:var(--primary);color:var(--text);border:none;box-shadow:var(--shadow-md);z-index:var(--z-sticky);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color var(--transition-fast),transform var(--transition-fast)}.fab:hover{background-color:var(--primary-hover)}.fab:active{transform:translate(2px,2px);box-shadow:none}.fab svg{width:24px;height:24px}}@media(pointer:coarse){input[type=range]{height:var(--touch-target-min);cursor:pointer}input[type=range]::-webkit-slider-thumb{width:24px;height:24px}input[type=range]::-moz-range-thumb{width:24px;height:24px}input[type=checkbox],input[type=radio]{width:24px;height:24px}.color-swatch-touch{min-width:var(--touch-target-min);min-height:var(--touch-target-min)}.touch-spacing>*+*{margin-top:var(--spacing-md)}.touch-spacing-horizontal>*+*{margin-left:var(--spacing-md)}}@media(hover:none){button:active,a:active{opacity:.8}}@supports (padding: env(safe-area-inset-bottom)){.bottom-nav{padding-bottom:env(safe-area-inset-bottom)}.header-safe{padding-top:env(safe-area-inset-top)}@media(orientation:landscape){.sidebar-collapsible.left{padding-left:env(safe-area-inset-left)}.sidebar-collapsible.right{padding-right:env(safe-area-inset-right)}}}@media(max-width:768px){.modal-mobile-fullscreen{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border-radius:0}.modal-bottom-sheet{position:fixed;bottom:0;left:0;right:0;max-height:90vh;width:100%;margin:0;border-radius:0;border-bottom:none;transform:translateY(100%);transition:transform var(--transition-normal)}.modal-bottom-sheet.open{transform:translateY(0)}.modal-drag-handle{display:flex;justify-content:center;padding:var(--spacing-sm)}.modal-drag-handle:before{content:"";width:40px;height:4px;background-color:var(--border-light)}}@media(max-width:768px)and (orientation:landscape){.header{height:40px}.bottom-nav{height:48px}.bottom-nav-item span{display:none}.toolbar-landscape{flex-direction:row;flex-wrap:wrap}}@media print{.header,.sidebar-collapsible,.bottom-nav,.toolbar,.modal,.toast{display:none!important}.canvas-wrapper{width:100%;height:100vh;display:flex;align-items:center;justify-content:center}canvas{image-rendering:pixelated!important;image-rendering:crisp-edges!important}}