:root{--bg:#1e1e1e;--bg-surface:#2d2d2d;--bg-card:#252525;--text:#ccc;--text-bright:#fff;--border:#444;--separator:#3a3a3a;--accent:#863bff;--accent-hover:#9b5fff;--accent-bg:#863bff0d}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);min-height:100vh;font-family:system-ui,-apple-system,sans-serif}#root{max-width:1200px;margin:0 auto;padding:24px}h1{color:var(--text-bright);font-size:24px;font-weight:700}.app-header{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.tagline{color:var(--text);margin-top:4px;font-size:14px;font-weight:400}.github-link{color:var(--text);border:1px solid var(--border);border-radius:4px;align-items:center;gap:6px;padding:6px 12px;font-size:14px;text-decoration:none;transition:border-color .2s,color .2s;display:flex}.github-link:hover{color:var(--text-bright);border-color:var(--text)}.drop-zone{border:2px dashed var(--border);text-align:center;cursor:pointer;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;min-height:120px;margin-bottom:32px;padding:32px;transition:border-color .2s,background .2s,transform .2s;display:flex;position:relative}.drop-zone:hover{border-color:var(--accent);background:var(--accent-bg)}.drop-zone--active{border-color:var(--accent);background:var(--accent-bg);transform:scale(1.015)}.drop-zone p{color:var(--text);font-size:16px}.drop-zone strong{color:var(--text-bright)}.drop-zone__upload-icon{color:var(--accent);margin-bottom:8px}.drop-zone__file-info{align-items:center;gap:12px;display:flex}.drop-zone__thumbnail{background:var(--bg-surface);border-radius:4px;width:32px;height:32px}.drop-zone__clear-btn{border:1px solid var(--border);width:28px;height:28px;color:var(--text);cursor:pointer;background:0 0;border-radius:50%;justify-content:center;align-items:center;transition:background .2s,color .2s,border-color .2s;display:flex;position:absolute;top:8px;right:8px}.drop-zone__clear-btn:hover{background:var(--bg-surface);color:var(--text-bright);border-color:var(--text)}.drop-zone__paste-toggle{color:var(--text);cursor:pointer;text-underline-offset:3px;background:0 0;border:none;margin-top:8px;font-size:13px;-webkit-text-decoration:underline dashed;text-decoration:underline dashed;transition:color .2s}.drop-zone__paste-toggle:hover{color:var(--accent)}.svg-textarea{background:var(--bg);border:1px solid var(--border);width:100%;max-width:500px;min-height:60px;max-height:120px;color:var(--text);resize:vertical;border-radius:4px;margin-top:8px;padding:8px;font-family:monospace;font-size:13px}.svg-textarea:focus{border-color:var(--accent);outline:none}.pixel-preview{flex-direction:column;align-items:center;display:flex}.pixel-preview__label{color:var(--text-bright);margin-bottom:12px;font-size:14px;font-weight:600}.pixel-preview__images{align-items:flex-start;gap:32px;display:flex}.pixel-preview__cell{flex-direction:column;align-items:center;display:flex}.pixel-preview__subtitle{color:var(--text);margin-bottom:8px;font-size:13px}.checkerboard{background-color:#1a1a1a;background-image:linear-gradient(45deg,#2a2a2a 25%,#0000 25%),linear-gradient(-45deg,#2a2a2a 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#2a2a2a 75%),linear-gradient(-45deg,#0000 75%,#2a2a2a 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;border-radius:4px;justify-content:center;align-items:center;max-width:100%;display:flex}.preview-bg{border-radius:4px;justify-content:center;align-items:center;max-width:100%;display:flex}.pixelated{image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges}.main-preview{margin-bottom:48px}.controls-bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.controls-left{align-items:center;gap:8px;display:flex}.controls-right{align-items:center;gap:12px;display:flex}.size-toggles{align-items:center;gap:8px;display:flex}.size-toggle{border:1px solid var(--border);color:var(--text);cursor:pointer;background:0 0;border-radius:4px;padding:6px 16px;font-size:14px;transition:border-color .2s,background .2s,color .2s}.size-toggle:hover{border-color:var(--accent)}.size-toggle--active{background:var(--accent);border-color:var(--accent);color:#fff}.select-all-btn{border:1px solid var(--border);color:var(--text);cursor:pointer;white-space:nowrap;background:0 0;border-radius:4px;padding:6px 12px;font-size:12px;transition:border-color .2s,color .2s}.select-all-btn:hover{border-color:var(--accent);color:var(--text-bright)}.bg-toggle{align-items:center;gap:4px;display:flex}.bg-toggle__btn{border:1px solid var(--border);width:28px;height:28px;color:var(--text);cursor:pointer;background:0 0;border-radius:4px;justify-content:center;align-items:center;padding:0;font-size:11px;transition:border-color .2s,background .2s,color .2s;display:flex}.bg-toggle__btn:hover{border-color:var(--accent)}.bg-toggle__btn--active{border-color:var(--accent);background:var(--accent);color:#fff}.bg-toggle__color-input{border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:4px;width:28px;height:28px;padding:0}.bg-toggle__color-input::-webkit-color-swatch-wrapper{padding:2px}.bg-toggle__color-input::-webkit-color-swatch{border:none;border-radius:2px}.view-toggle{align-items:center;gap:4px;display:flex}.view-toggle__btn{border:1px solid var(--border);width:28px;height:28px;color:var(--text);cursor:pointer;background:0 0;border-radius:4px;justify-content:center;align-items:center;padding:0;transition:border-color .2s,background .2s,color .2s;display:flex}.view-toggle__btn:hover{border-color:var(--accent)}.view-toggle__btn--active{border-color:var(--accent);background:var(--accent);color:#fff}.separator{border:none;border-top:1px solid var(--separator);margin:16px 0 24px}.preview-card{background:var(--bg-card);border-radius:12px;padding:24px}.size-grid{flex-wrap:wrap;justify-content:center;gap:32px;display:flex}.size-grid .pixel-preview__images{gap:16px}.compact-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;display:grid}.compact-cell{cursor:pointer;border-radius:8px;flex-direction:column;align-items:center;padding:12px;transition:background .2s;display:flex}.compact-cell:hover{background:var(--bg-surface)}.compact-cell--expanded{outline:2px solid var(--accent);background:var(--bg-surface)}.compact-cell__label{color:var(--text);margin-top:8px;font-size:13px}.expanded-detail{border-top:1px solid var(--separator);margin-top:24px;padding-top:24px}.download-btn{border:1px solid var(--border);color:var(--text);cursor:pointer;background:0 0;border-radius:4px;align-items:center;gap:4px;margin-top:8px;padding:4px 8px;font-size:12px;transition:border-color .2s,color .2s;display:inline-flex}.download-btn:hover{border-color:var(--accent);color:var(--text-bright)}.demo-section{text-align:center;margin-top:8px}.demo-label{color:var(--text);opacity:.7;margin-bottom:16px;font-size:13px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fade-in{animation:.3s ease-out fadeIn}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.loading-skeleton{background:linear-gradient(90deg,#0000 25%,#ffffff0a 50%,#0000 75%) 0 0/200% 100%;animation:1.5s infinite shimmer}@media (width<=768px){#root{padding:16px}.app-header{flex-direction:column;align-items:flex-start;gap:8px}.pixel-preview__images{flex-direction:column;gap:16px}.size-grid{flex-direction:column;align-items:center}.controls-bar{flex-direction:column;align-items:stretch}.controls-left,.controls-right,.size-toggles{flex-wrap:wrap;justify-content:center}.compact-grid{grid-template-columns:repeat(2,1fr)}.checkerboard img,.preview-bg img{max-width:100%;height:auto}.preview-card{padding:16px}}@media (width<=480px){.compact-grid{grid-template-columns:1fr}h1{font-size:20px}}