*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,sans-serif;background:linear-gradient(135deg,#fce4f3,#e8d5f5,#d5e8f5);min-height:100vh}.container{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;position:relative;overflow:hidden}.floating{position:fixed;font-size:2rem;animation:floatUp linear infinite;pointer-events:none;opacity:.6}@keyframes floatUp{0%{transform:translateY(110vh) rotate(0);opacity:0}10%{opacity:.6}90%{opacity:.6}to{transform:translateY(-10vh) rotate(360deg);opacity:0}}.card{background:#ffffffbf;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:2.5rem;padding:3.5rem 4rem;text-align:center;box-shadow:0 20px 60px #c878c833;max-width:520px;width:100%;animation:popIn .7s cubic-bezier(.34,1.56,.64,1) both}@keyframes popIn{0%{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}.rainbow-text{font-size:3rem;font-weight:900;background:linear-gradient(90deg,#ff6eb4,#a855f7,#3b82f6,#22d3ee);background-size:300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shimmer 3s ease-in-out infinite alternate;line-height:1.2}@keyframes shimmer{0%{background-position:0%}to{background-position:100%}}.subtitle{margin-top:.8rem;font-size:1.15rem;color:#9d6fb5;font-weight:500}.divider{margin:2rem auto;width:60px;height:4px;border-radius:2px;background:linear-gradient(90deg,#ff6eb4,#a855f7)}.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:.5rem}.menu-item{background:linear-gradient(135deg,#fff0fa,#f3e8ff);border:2px solid rgba(200,150,220,.25);border-radius:1.25rem;padding:1.4rem 1rem;cursor:pointer;transition:transform .2s,box-shadow .2s;text-decoration:none}.menu-item:hover{transform:translateY(-6px) scale(1.04);box-shadow:0 12px 30px #b464c833}.menu-item .icon{font-size:2.2rem;display:block;margin-bottom:.5rem}.menu-item .label{font-size:.95rem;font-weight:700;color:#7c3aed}.footer{margin-top:2.5rem;font-size:.85rem;color:#c084e0}.bounce{display:inline-block;animation:bounce 1.5s ease-in-out infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.drawing-board{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1.5rem;min-height:100vh;background:linear-gradient(135deg,#fce4f3,#e8d5f5,#d5e8f5)}.toolbar{display:flex;align-items:center;gap:1.2rem;background:#ffffffd9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:.75rem 1.5rem;border-radius:2rem;box-shadow:0 4px 20px #b464c826;flex-wrap:wrap;justify-content:center}.colors{display:flex;gap:.4rem}.color-btn{width:28px;height:28px;border-radius:50%;border:3px solid transparent;cursor:pointer;transition:transform .15s,border-color .15s;box-shadow:0 2px 6px #0003}.color-btn:hover{transform:scale(1.2)}.color-btn.active{border-color:#7c3aed;transform:scale(1.2)}.brush-size{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:#7c3aed}.brush-size input[type=range]{width:80px;accent-color:#a855f7}.clear-btn{background:linear-gradient(135deg,#ff6eb4,#a855f7);color:#fff;border:none;border-radius:1rem;padding:.4rem 1rem;font-size:.9rem;font-weight:600;cursor:pointer;transition:transform .15s,opacity .15s}.clear-btn:hover{transform:scale(1.05);opacity:.9}.status{font-size:.85rem;font-weight:600;padding:.3rem .8rem;border-radius:1rem}.status.online{color:#16a34a;background:#dcfce7}.status.offline{color:#dc2626;background:#fee2e2}.canvas{background:#fff;border-radius:1.5rem;box-shadow:0 8px 40px #b464c833;cursor:crosshair;max-width:100%;touch-action:none}