:root{--bg:#1e1e1e;--bg-surface:#2d2d2d;--text:#ccc;--text-bright:#fff;--border:#444;--accent:#4fc3f7}*{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:500}.app-header{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.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;margin-bottom:32px;padding:32px;transition:border-color .2s,background .2s}.drop-zone:hover,.drop-zone--active{border-color:var(--accent);background:#4fc3f70d}.drop-zone p{color:var(--text);font-size:16px}.drop-zone strong{color:var(--text-bright)}.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);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;font-size:12px}.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;display:flex}.pixelated{image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges}.main-preview{margin-bottom:48px}.size-toggles{justify-content:center;gap:8px;margin-bottom:24px;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:#000}.size-grid{flex-wrap:wrap;justify-content:center;gap:32px;display:flex}.size-grid .pixel-preview__images{gap:16px}