.viewport-frame{position:relative;height:100%;width:100%;overflow:auto;background:#20242c;background-image:linear-gradient(45deg,#262b34 25%,transparent 25%),linear-gradient(-45deg,#262b34 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#262b34 75%),linear-gradient(-45deg,transparent 75%,#262b34 75%);background-position:0 0,0 12px,12px -12px,-12px 0;background-size:24px 24px;padding:48px}.canvas-stage{position:relative;margin:auto;background:repeating-conic-gradient(#d8d8d8 0 25%,#fff 0 50%) 50%/24px 24px;box-shadow:0 0 0 1px #05070a,0 0 0 3px #f8f7f2,0 0 0 5px #111827,0 18px 45px #0009;transform-origin:top left}.canvas-stage::before{content:"Artboard";position:absolute;left:0;top:-24px;color:#d7dee9;font:700 11px/1 ui-sans-serif,system-ui;text-transform:uppercase;letter-spacing:.08em}.canvas-stage::after{content:"";position:absolute;inset:0;pointer-events:none;outline:2px solid #f8f7f2;outline-offset:-2px}canvas{display:block;background:transparent;touch-action:none;cursor:crosshair;image-rendering:auto}.zoom-overlay{position:absolute;left:10px;bottom:10px;z-index:5;min-width:54px;padding:4px 7px;border:1px solid #4a5361;background:#111827d9;color:#eef2f7;font:700 12px/1 ui-sans-serif,system-ui;text-align:center;box-shadow:0 8px 20px #0007;pointer-events:none}