.wf-canvasbar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:10px 13px; border-bottom:1px solid #4c355e; background:#281b33; }
.wf-canvasbar>span:first-child { margin-right:auto; }
.wf-viewport { flex:1; min-height:0; overflow:auto; background:radial-gradient(#4e355e 1px,transparent 1px) 0 0/18px 18px,#170f21; }
.wf-sizer { position:relative; min-width:100%; min-height:100%; }
.wf-board { position:absolute; top:25px; left:25px; transform-origin:top left; box-shadow:0 12px 50px #08030c88; }
.wf-art { pointer-events:none; display:block; }
.wf-hit { position:absolute; border:1px solid transparent; cursor:move; touch-action:none; }
.wf-hit:hover { border-color:#a56ae0; }
.wf-hit.selected { border:2px solid #a356f0; box-shadow:0 0 0 1px white; }
.wf-resize { display:none; position:absolute; bottom:-5px; right:-5px; width:10px; height:10px; border:2px solid #7b33c2; background:white; cursor:nwse-resize; }
.wf-hit.selected .wf-resize { display:block; }
.wf-palette { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.wf-palette button { font-size:11px; justify-content:flex-start; padding:10px 6px; text-transform:capitalize; }
.wf-preview { position:relative; margin:20px auto; max-width:1100px; width:100%; background:white; border-radius:5px; overflow:hidden; box-shadow:0 10px 50px #05010966; }
.wf-preview>svg { width:100%; height:100%; display:block; }
.aw-page button.wf-hotspot { position:absolute; opacity:0; border:2px solid #a256e8; padding:0; min-height:0; border-radius:0; }
.aw-page button.wf-hotspot:hover, .aw-page button.wf-hotspot:focus-visible { opacity:.25; background:#ba82ff; font-size:0; }