:root{color:#1e293b;background-color:#ffd6c2}html,body,#root{height:100%;margin:0;padding:0}body{background-color:#ffd6c2;font-family:Poppins,Segoe UI,sans-serif}.app-background{background-color:#ffd6c2;justify-content:center;align-items:center;min-height:100vh;padding:1rem;display:flex}.app-wrap{text-align:center;background:#fff3ad;border-radius:20px;width:100%;max-width:3000px;padding:2rem;box-shadow:0 8px 30px #0000001a}.header h1{color:#333;margin:0;font-size:2rem}.lead{color:#555;margin-top:5px}.canvas-container{background-color:#fcf5c7;border-radius:16px;flex-direction:column;align-items:center;margin-top:1.5rem;padding:2rem;display:flex}.canvas-container h1{color:#333;margin-bottom:1rem;font-weight:700}.canvas-container canvas{cursor:crosshair;background-color:#fff;border:2px solid #b6f7bd;border-radius:15px;box-shadow:0 4px 10px #0000001a}.controls{align-items:center;gap:1rem;margin-bottom:1rem;display:flex}.controls input[type=color]{cursor:pointer;background:0 0;border:none;width:35px;height:35px}.buttons{gap:15px;margin-top:20px;display:flex}button{cursor:pointer;color:#fff;border:none;border-radius:12px;padding:12px 30px;font-size:1rem;font-weight:600;transition:background .2s}.clear-btn{background-color:#fcbad3}.clear-btn:hover{background-color:#f9a5c0}.save-btn{background-color:#a7d8ff}.save-btn:hover{background-color:#8ecbfa}#root{text-align:center;max-width:1280px;margin:0 auto;padding:2rem}.logo{will-change:filter;height:6em;padding:1.5em;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion:no-preference){a:nth-of-type(2) .logo{animation:20s linear infinite logo-spin}}.card{padding:4em}.read-the-docs{color:#888}