@import url(https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap);body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}#root,body,html{height:100vh;width:100vw}.toolbar{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(135deg,#667eea,#764ba2);border-bottom:1px solid #ffffff1a;box-shadow:0 4px 20px #00000026;color:#fff;flex-wrap:wrap;justify-content:space-between;min-height:80px;padding:16px 24px;position:relative;z-index:1000}.toolbar,.toolbar-brand{align-items:center;display:flex;gap:20px}.app-title{color:#fff;font-size:24px;font-weight:700;letter-spacing:-.5px;margin:0;text-shadow:0 2px 4px #0000004d}.connection-status{align-items:center;background:#ffffff1a;border-radius:20px;display:flex;font-size:14px;font-weight:500;gap:8px;padding:8px 12px}.status-indicator{animation:pulse 2s infinite;border-radius:50%;height:8px;width:8px}.status-indicator,.status-indicator.online{background:#4ade80;box-shadow:0 0 8px #4ade8099}.status-indicator.demo{background:orange;box-shadow:0 0 8px #ffa50099}.status-indicator.offline{background:#ef4444;box-shadow:0 0 8px #ef444499}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.toolbar-controls{align-items:center;display:flex;flex-wrap:wrap;gap:24px}.toolbar-section{align-items:flex-start;display:flex;flex-direction:column;gap:8px}.section-label{color:#fffc;font-size:12px;font-weight:600;letter-spacing:.5px;margin-bottom:4px;text-transform:uppercase}.tool-group{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border-radius:12px;display:flex;padding:4px}.tool-btn{align-items:center;background:#0000;border:none;border-radius:8px;color:#fffc;cursor:pointer;display:flex;font-size:14px;font-weight:500;gap:8px;justify-content:center;min-width:80px;padding:12px 16px;transition:all .3s ease}.tool-btn:hover{background:#ffffff26;color:#fff;transform:translateY(-1px)}.tool-btn.active{background:#fff3;box-shadow:0 2px 8px #0003;color:#fff}.size-controls{align-items:center;display:flex;flex-direction:column;gap:8px}.size-presets{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border-radius:12px;display:flex;gap:6px;padding:8px}.size-btn{align-items:center;background:#0000;border:2px solid #ffffff4d;border-radius:8px;cursor:pointer;display:flex;height:36px;justify-content:center;transition:all .3s ease;width:36px}.size-btn:hover{background:#ffffff1a;border-color:#fff9;transform:scale(1.05)}.size-btn.active{background:#fff3;border-color:#fff;box-shadow:0 2px 8px #0003}.size-preview{border-radius:50%;transition:all .3s ease}.size-slider{background:#fff3;border-radius:3px;cursor:pointer;height:6px;outline:none;width:120px}.size-slider::-webkit-slider-thumb{appearance:none;background:#fff;border-radius:50%;box-shadow:0 2px 6px #0000004d;cursor:pointer;height:18px;-webkit-transition:all .3s ease;transition:all .3s ease;width:18px}.size-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.color-section{position:relative;z-index:100}.current-color{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:2px solid #0000;border-radius:12px;cursor:pointer;display:flex;gap:8px;padding:12px 16px;transition:all .3s ease}.current-color:hover{background:#ffffff26;border-color:#ffffff4d}.color-preview{border:2px solid #ffffff4d;border-radius:6px;box-shadow:0 2px 6px #0003;height:24px;width:24px}.color-picker-dropdown{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#fff;border:1px solid #0000001a;border-radius:16px;box-shadow:0 8px 32px #0000004d;left:0;margin-top:8px;min-width:280px;padding:16px;position:absolute;top:100%;transform:translateZ(0);will-change:transform;z-index:9999}.color-grid{grid-gap:8px;display:grid;gap:8px;grid-template-columns:repeat(6,1fr);margin-bottom:16px}.color-option{border:2px solid #e5e7eb;border-radius:8px;box-shadow:0 2px 4px #0000001a;cursor:pointer;height:36px;transition:all .3s ease;width:36px}.color-option:hover{box-shadow:0 4px 12px #0003;transform:scale(1.1)}.color-option.active{border-color:#3b82f6;border-width:3px;transform:scale(1.1)}.custom-color{align-items:center;border-top:1px solid #e5e7eb;display:flex;gap:12px;padding-top:12px}.color-input{background:none;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;height:36px;width:60px}.custom-color label{color:#374151;font-size:14px;font-weight:500}.action-btn,.action-group{display:flex;gap:8px}.action-btn{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:2px solid #fff3;border-radius:12px;color:#fff;cursor:pointer;font-size:14px;font-weight:500;padding:12px 16px;transition:all .3s ease}.action-btn:hover{background:#ffffff26;border-color:#fff6;box-shadow:0 4px 12px #0003;transform:translateY(-2px)}.undo-btn:hover{background:#22c55e33;border-color:#22c55e66}.clear-btn:hover{background:#ef444433;border-color:#ef444466}@media (max-width:768px){.toolbar{align-items:stretch;flex-direction:column;gap:16px;min-height:auto;padding:16px}.toolbar-brand{justify-content:center;text-align:center}.toolbar-controls{gap:16px;justify-content:center}.toolbar-section{align-items:center}.app-title{font-size:20px}.size-presets{flex-wrap:wrap}.color-picker-dropdown{left:50%;transform:translateX(-50%)}}@media (max-width:480px){.toolbar-controls{flex-direction:column;width:100%}.toolbar-section{align-items:center;width:100%}.action-group,.tool-group{justify-content:center;width:100%}}.color-option:disabled{cursor:not-allowed;opacity:.3;transform:none!important}.color-option:disabled:hover{box-shadow:0 2px 4px #0000001a;transform:none!important}.color-input:disabled{cursor:not-allowed;opacity:.3}.current-color:has(input:disabled){opacity:.6;pointer-events:none}.whiteboard-container{background:linear-gradient(135deg,#f5f7fa,#c3cfe2);display:flex;flex-direction:column;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;height:100vh;margin:0;overflow:hidden;padding:0;width:100vw}.demo-banner{background:linear-gradient(135deg,#ff6b6b,orange);box-shadow:0 2px 8px #00000026;color:#fff;font-size:14px;font-weight:500;padding:12px 24px;position:relative;text-align:center;z-index:1001}.demo-content{align-items:center;display:flex;gap:12px;justify-content:center;margin:0 auto;max-width:1200px}.demo-icon{font-size:18px}.demo-text a{color:#fff;font-weight:600;text-decoration:underline}.demo-text a:hover{text-decoration:none}.whiteboard-canvas{background:#fff;border:none;border-radius:12px;box-shadow:0 10px 30px #0000001a,0 1px 8px #0000000d,inset 0 1px 0 #fffc;cursor:crosshair;display:block;flex:1 1;margin:8px;outline:none;padding:0;position:relative;transition:all .3s ease;z-index:1}.whiteboard-canvas:hover{box-shadow:0 20px 40px #00000026,0 4px 16px #0000001a,inset 0 1px 0 #fffc;transform:translateY(-1px)}.whiteboard-canvas:active{cursor:crosshair;transform:translateY(0)}.whiteboard-canvas:before{animation:spin 1s linear infinite;border:3px solid #f3f3f3;border-radius:50%;border-top-color:#667eea;content:"";height:40px;left:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:40px}@keyframes spin{0%{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(1turn)}}.whiteboard-canvas:after{background-image:radial-gradient(circle at 1px 1px,#00000014 1px,#0000 0);background-size:20px 20px;border-radius:12px;bottom:0;content:"";left:0;opacity:.3;pointer-events:none;position:absolute;right:0;top:0}@media (max-width:768px){.whiteboard-canvas{border-radius:8px;margin:4px}}.whiteboard-canvas:focus{outline:2px solid #667eea;outline-offset:2px}@media (prefers-color-scheme:dark){.whiteboard-container{background:linear-gradient(135deg,#1a1a2e,#16213e)}.whiteboard-canvas{background:#2d3748;box-shadow:0 10px 30px #0000004d,0 1px 8px #0003,inset 0 1px 0 #ffffff1a}.whiteboard-canvas:hover{box-shadow:0 20px 40px #0006,0 4px 16px #0000004d,inset 0 1px 0 #ffffff1a}}*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.App,body{overflow:hidden}.App{display:flex;flex-direction:column;height:100vh;position:relative;width:100vw}::-webkit-scrollbar{height:8px;width:8px}::-webkit-scrollbar-track{background:#0000000d;border-radius:4px}::-webkit-scrollbar-thumb{background:#0003;border-radius:4px;-webkit-transition:background .3s ease;transition:background .3s ease}::-webkit-scrollbar-thumb:hover{background:#0000004d}::selection{background:#667eea4d;color:inherit}:focus{outline:2px solid #667eea;outline-offset:2px}button{background:none;border:none;cursor:pointer}button,input{font-family:inherit;outline:none}*{transition:transform .2s ease,box-shadow .2s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.App>*{animation:fadeIn .6s ease-out}
/*# sourceMappingURL=main.3e41c9ad.css.map*/