:root{color-scheme:light;font-family:Comic Sans MS,Chalkboard SE,Marker Felt,ui-sans-serif,system-ui,sans-serif;line-height:1.5}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100vh;background:#fef9ef;color:#333}.app{min-height:100vh;display:flex;flex-direction:column}.header{background:linear-gradient(135deg,#ff6b6b,#ffa36b,#ffd93d,#6bcb77,#4d96ff,#9b59b6);padding:1rem 2rem;text-align:center;box-shadow:0 4px 12px #00000026}.header h1{margin:0;font-size:2rem;color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.3);letter-spacing:.02em}.header p{margin:.25rem 0 0;color:#ffffffe6;font-size:1rem}.main-content{flex:1;display:flex;flex-direction:column;align-items:center;padding:1.5rem;gap:1.5rem}@media(min-width:900px){.main-content{flex-direction:row;align-items:flex-start;justify-content:center}}.sidebar{display:flex;flex-direction:column;gap:1.25rem;width:100%;max-width:280px}@media(min-width:900px){.sidebar{position:sticky;top:1.5rem}}.panel{background:#fff;border-radius:1rem;padding:1rem;box-shadow:0 2px 12px #00000014;border:2px solid #f0e6d6}.panel-title{font-size:1rem;font-weight:700;margin:0 0 .75rem;color:#555;text-align:center}.color-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem}.color-swatch{width:100%;aspect-ratio:1;border-radius:50%;border:3px solid transparent;cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s;box-shadow:0 2px 4px #00000026;position:relative}.color-swatch:hover{transform:scale(1.15)}.color-swatch.active{border-color:#333;transform:scale(1.15);box-shadow:0 0 0 2px #fff,0 0 0 4px #333}.color-swatch.eraser{background:#fff!important;border:3px dashed #ccc}.color-swatch.eraser.active{border:3px dashed #333;box-shadow:0 0 0 2px #fff,0 0 0 4px #333}.color-swatch.eraser:after{content:"";position:absolute;top:20%;left:20%;width:60%;height:60%;background:linear-gradient(135deg,#ff6b6b 0%,#ff6b6b 45%,transparent 45%,transparent 55%,#ff6b6b 55%,#ff6b6b 100%);border-radius:2px;opacity:.6}.tool-group{display:flex;gap:.5rem}.tool-btn{flex:1;padding:.6rem .75rem;border:2px solid #e0d5c5;border-radius:.75rem;background:#faf6ef;font-family:inherit;font-size:.85rem;font-weight:600;color:#666;cursor:pointer;transition:all .15s}.tool-btn:hover{background:#f0e6d6;border-color:#d0c5b5}.tool-btn.danger{color:#e74c3c;border-color:#f5c6cb}.tool-btn.danger:hover{background:#fde8e8}.canvas-area{flex:1;max-width:640px;width:100%}.page-nav{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:1rem}.page-nav button{background:#fff;border:2px solid #e0d5c5;border-radius:50%;width:40px;height:40px;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;color:#666}.page-nav button:hover:not(:disabled){background:#f0e6d6;border-color:#c0b5a5}.page-nav button:disabled{opacity:.3;cursor:default}.page-label{font-weight:700;font-size:1.1rem;color:#555;min-width:120px;text-align:center}.svg-canvas{background:#fff;border-radius:1.25rem;box-shadow:0 4px 20px #0000001a;border:3px solid #e8ddd0;width:100%;aspect-ratio:1;display:block;cursor:pointer}.svg-canvas path,.svg-canvas ellipse,.svg-canvas circle,.svg-canvas rect,.svg-canvas polygon{stroke:#333;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;fill:#fff;transition:fill .1s;cursor:pointer}.svg-canvas path:hover,.svg-canvas ellipse:hover,.svg-canvas circle:hover,.svg-canvas rect:hover,.svg-canvas polygon:hover{stroke-width:3.5;filter:brightness(.97)}.size-row{display:flex;gap:.5rem;align-items:center}.size-btn{width:36px;height:36px;border-radius:50%;border:2px solid #e0d5c5;background:#faf6ef;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}.size-btn:hover{background:#f0e6d6}.size-btn.active{border-color:#ff6b6b;background:#fff0f0}.size-dot{background:#333;border-radius:50%}@keyframes wiggle{0%,to{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}.header h1{animation:wiggle 3s ease-in-out infinite;display:inline-block}.bottom-bar{background:#f5efe4;border-top:2px solid #e8ddd0;padding:.75rem 2rem;display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap}.tip{font-size:.85rem;color:#999}.tip strong{color:#777}