*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,system-ui,sans-serif;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}.app{display:flex;background:#ffffffb3;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:20px;box-shadow:0 20px 60px #00000026,0 4px 16px #00000014;overflow:hidden;max-width:900px;width:100%;transition:all .3s}.sidebar{width:220px;padding:20px 16px;display:flex;flex-direction:column;gap:16px;border-right:1px solid rgba(0,0,0,.05);background:linear-gradient(180deg,#fff,#f8f9ff)}.sidebar h1{font-size:20px;font-weight:600;color:#1e293b;text-align:center;letter-spacing:-.3px;margin-bottom:4px}.toolbar{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.tool-btn{width:44px;height:44px;border:1px solid #e2e8f0;border-radius:12px;background:#fff;cursor:pointer;font-size:20px;display:flex;align-items:center;justify-content:center;transition:all .15s ease;box-shadow:0 1px 3px #0000000f}.tool-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #3b82f633;border-color:#93c5fd}.tool-btn.active{background:#3b82f6;border-color:#3b82f6;color:#fff;box-shadow:0 4px 14px #3b82f666}.tool-btn:active{transform:translateY(0)}.controls{display:flex;flex-direction:column;gap:12px}.controls label{font-size:13px;color:#475569;display:flex;align-items:center;gap:8px}.controls input[type=color]{width:36px;height:36px;border:1px solid #d1d5db;border-radius:8px;cursor:pointer;padding:0;background:none}.controls input[type=range]{flex:1;accent-color:#3b82f6;height:4px}.controls span{font-weight:600;color:#1e293b;min-width:24px;text-align:center}.actions{display:flex;flex-direction:column;gap:8px}.action-btn{padding:10px;border:none;border-radius:10px;font-size:14px;font-weight:500;cursor:pointer;transition:all .15s;background:#f1f5f9;color:#1e293b;text-align:center}.action-btn:hover{background:#e2e8f0;transform:translateY(-1px);box-shadow:0 2px 8px #00000014}.action-btn:active{transform:translateY(0)}.action-btn.danger{background:#fee2e2;color:#b91c1c}.action-btn.danger:hover{background:#fecaca}.action-btn.save{background:#dbeafe;color:#1d4ed8}.action-btn.save:hover{background:#bfdbfe}.shortcuts{font-size:12px;color:#64748b;line-height:1.6;padding:8px;background:#00000005;border-radius:10px}.shortcuts kbd{display:inline-block;padding:1px 6px;border:1px solid #cbd5e1;border-radius:4px;background:#f8fafc;font-family:monospace;font-size:11px;margin:1px 2px;box-shadow:0 1px 2px #0000000d}.canvas-wrapper{flex:1;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;background:radial-gradient(circle at 20% 30%,#ffffff80,#e2e8f04d)}.canvas{width:100%;max-width:600px;height:auto;aspect-ratio:600 / 450;border:1px solid #e2e8f0;border-radius:16px;background:#fff;cursor:crosshair;box-shadow:0 8px 24px #00000014;touch-action:none;transition:box-shadow .3s ease}.canvas:hover{box-shadow:0 12px 32px #3b82f61f}.empty-hint{position:absolute;bottom:20px;left:50%;transform:translate(-50%);background:#00000080;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:8px 16px;border-radius:20px;color:#fff;font-size:14px;pointer-events:none;animation:fadeInUp .5s ease forwards,pulseHint 2s 1s infinite}@keyframes fadeInUp{0%{opacity:0;transform:translate(-50%) translateY(10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes pulseHint{0%,to{opacity:1}50%{opacity:.7}}@media (max-width: 700px){.app{flex-direction:column;border-radius:16px}.sidebar{width:100%;border-right:none;flex-direction:row;flex-wrap:wrap;padding:12px}.sidebar h1{width:100%;font-size:16px}.toolbar,.controls,.actions{flex-direction:row;flex-wrap:wrap}.controls label{min-width:120px}.shortcuts{display:none}.canvas-wrapper{padding:12px}}