.pixel-sand-app{display:flex;flex-direction:column;align-items:center;gap:20px;padding:20px;width:100%;max-width:1200px;margin:0 auto}.controls-panel{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:center;background:var(--surface-1);padding:15px;border-radius:12px;box-shadow:var(--shadow-sm)}.palette{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.swatch-wrapper{position:relative;display:inline-block}.color-swatch{width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .1s,box-shadow .15s}.color-swatch:hover{transform:scale(1.15)}.color-swatch.active{border-color:var(--text-1);box-shadow:0 0 0 2px var(--surface-1),0 0 0 4px var(--primary)}.eraser-swatch{border:2px solid #ccc}.color-picker-input{position:absolute;bottom:-4px;left:50%;transform:translate(-50%);width:0;height:0;padding:0;border:none;opacity:0;pointer-events:none}.brush-control{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text-1);white-space:nowrap}.brush-control label{font-size:18px;cursor:default}#brush-size{width:100px;accent-color:var(--primary);cursor:pointer}#brush-size-label{min-width:22px;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}.paste-panel{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:center;background:var(--surface-1);padding:16px 20px;border-radius:12px;box-shadow:var(--shadow-sm);border:2px solid var(--primary);animation:fadeIn .2s ease}.paste-panel.hidden{display:none}.paste-preview{max-width:120px;max-height:120px;image-rendering:pixelated;border:1px solid var(--surface-3);border-radius:4px;background:#fff}.paste-controls{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text-1);white-space:nowrap}.paste-controls label{font-weight:600}#paste-size{width:140px;accent-color:var(--primary);cursor:pointer}#paste-size-label{min-width:28px;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}.paste-actions{display:flex;gap:8px}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{filter:brightness(1.1)}@keyframes fadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.btn{padding:8px 16px;border-radius:6px;border:none;background:var(--surface-2);color:var(--text-1);cursor:pointer;font-family:inherit;font-size:14px;transition:background .2s}.btn:hover{background:var(--surface-3)}.canvas-container{position:relative;width:100%;max-width:600px;aspect-ratio:1;border:1px solid var(--surface-3);box-shadow:var(--shadow-md);background:#fff;overflow:hidden}#sand-canvas{width:100%;height:100%;image-rendering:pixelated;cursor:crosshair}.pixel-sand-seo{margin-top:40px;max-width:800px;text-align:left;line-height:1.6;color:var(--text-2)}.pixel-sand-seo h2{font-size:1.5rem;color:var(--text-1);margin-bottom:16px;border-bottom:2px solid var(--surface-2);padding-bottom:8px}.pixel-sand-seo ol{margin-bottom:24px;padding-left:24px}.pixel-sand-seo li{margin-bottom:8px}.pixel-sand-seo a{color:var(--primary);text-decoration:none;font-weight:600}.pixel-sand-seo a:hover{text-decoration:underline}.seo-links{margin-top:16px;font-size:.95em;color:var(--text-2)}