@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap");.smartboard-container{position:relative;width:100%;height:100%;background-color:#1a1a1a;color:white;overflow:hidden;font-family:Inter,-apple-system,sans-serif}.smartboard-container *{box-sizing:border-box;touch-action:none}#viewport{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#000;overflow:hidden}#easel,#viewport{position:relative}#easel{transform-origin:center center;transition:transform .05s ease-out}#canvas-wrapper{border-radius:12px;box-shadow:0 50px 100px rgba(0,0,0,.8),0 0 40px rgba(133,88,205,.2);position:relative;overflow:hidden;width:2000px;height:2000px;background-color:white}#canvas-wrapper.story{background-image:linear-gradient(rgba(133,88,205,.1) 1px,transparent 0),linear-gradient(90deg,rgba(255,0,0,.1) 1px,transparent 0);background-size:100% 40px,100px 100%;background-position:0 40px,80px 0}#canvas-wrapper.grid{background-image:linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 0),linear-gradient(180deg,rgba(0,0,0,.05) 1px,transparent 0);background-size:20px 20px}#canvas-wrapper.dots{background-image:radial-gradient(rgba(0,0,0,.1) 1px,transparent 0);background-size:20px 20px}#display-canvas{display:block;width:2000px;height:2000px;position:relative;z-index:1}#bar-bottom,#nav-top,#toolbar-left{position:absolute;z-index:100}#nav-top{top:20px;left:50%;transform:translateX(-50%);width:fit-content;max-width:calc(100% - 40px);height:64px;border-radius:2rem;align-items:center;padding:0 24px;box-shadow:0 10px 40px rgba(0,0,0,.4);border:1px solid hsl(var(--border));white-space:nowrap}#nav-top,#toolbar-left{display:flex;backdrop-filter:blur(20px);background:hsl(var(--background)/.85)}#toolbar-left{left:20px;top:50%;transform:translateY(-50%);padding:12px;border-radius:3rem;flex-direction:column;gap:12px;box-shadow:0 20px 60px rgba(0,0,0,.4);border:1px solid hsl(var(--border))}#bar-bottom{bottom:24px;left:50%;transform:translateX(-50%)}.tool-btn{border:none;background:transparent;color:hsl(var(--muted-foreground));cursor:pointer;border-radius:1rem;transition:all .4s cubic-bezier(.34,1.56,.64,1)}.tool-btn:hover{background:hsl(var(--accent)/.1);color:hsl(var(--accent));transform:scale(1.15) rotate(5deg)}.tool-btn.active{background:hsl(var(--primary));color:white;box-shadow:0 8px 20px rgba(133,88,205,.4)}.cursor-grab{cursor:grab}.cursor-grabbing{cursor:grabbing}.cursor-crosshair{cursor:crosshair}.context-menu{animation:pop-in .2s cubic-bezier(.34,1.56,.64,1)}@keyframes pop-in{0%{opacity:0;transform:scale(.9) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}