.viewer{background:#f5f5f5;border:1px solid #e0e0e0;margin-bottom:24px;padding:16px}.canvas-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}.figure{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid #e0e0e0;padding:16px}.figure--full{grid-column:1 / -1}.figure figcaption{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#000;display:flex;justify-content:space-between;gap:8px;align-items:center}.figure-note{font-size:11px;font-weight:400;color:#666;text-transform:none;letter-spacing:0}.canvas-shell{position:relative;width:100%;background:#f8fafc;border:1px solid #e0e0e0;border-radius:6px;overflow:auto;min-height:220px}.canvas-stage{position:relative;width:100%;min-height:220px;display:flex;align-items:center;justify-content:center}.canvas-shell canvas{width:100%;max-width:100%;height:auto;display:block;border:none;background:transparent}.checker{background-color:#fff;background-image:linear-gradient(45deg,#e5e7eb 25%,transparent 25%),linear-gradient(-45deg,#e5e7eb 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e5e7eb 75%),linear-gradient(-45deg,transparent 75%,#e5e7eb 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}#frameCanvas{cursor:crosshair}.empty{color:#777;font-size:13px;text-align:center;padding:24px;line-height:1.45}@media(max-width:768px){.canvas-grid{grid-template-columns:1fr}.figure--full{grid-column:auto}.viewer{padding:16px}}@media(max-width:480px){.viewer{padding:12px}}