.viewer{background:#f5f5f5;border:1px solid #e0e0e0;margin-bottom:24px;padding:16px}.canvas-grid{display:grid;grid-template-columns:1fr;gap:16px}.figure{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid #e0e0e0;padding:16px}.figure figcaption{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#000}.canvas-shell{position:relative;width:100%;background:#f8fafc;border:1px solid #e0e0e0;border-radius:6px;overflow:hidden}.preview-wrap{position:relative;width:100%;overflow:hidden;min-height:360px}.preview-wrap.has-image{min-height:0}.checker-canvas,.preview-image,.preview-overlay{width:100%;height:100%;display:block;min-height:0}.checker-canvas{background-color:#dce6f0;background-image:linear-gradient(45deg,#c4d3e2 25%,transparent 25%),linear-gradient(-45deg,#c4d3e2 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#c4d3e2 75%),linear-gradient(-45deg,transparent 75%,#c4d3e2 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}.checker-canvas{position:absolute;inset:0;z-index:0}.preview-image,.preview-overlay{position:absolute;inset:0;min-height:auto;z-index:1}.preview-image{object-fit:contain;background-color:#dce6f0;background-image:linear-gradient(45deg,#c4d3e2 25%,transparent 25%),linear-gradient(-45deg,#c4d3e2 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#c4d3e2 75%),linear-gradient(-45deg,transparent 75%,#c4d3e2 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}.preview-overlay{pointer-events:none;z-index:2;background:transparent}.zoom-overlay{position:absolute;inset:0;pointer-events:none;display:none;z-index:3}.zoom-overlay.active{display:block}.zoom-box{position:absolute;border:2px solid rgba(0,180,255,.95);border-radius:3px;box-shadow:0 0 0 2000px #0000004d;transition:left .6s cubic-bezier(.4,0,.2,1),top .6s cubic-bezier(.4,0,.2,1),width .6s cubic-bezier(.4,0,.2,1),height .6s cubic-bezier(.4,0,.2,1)}.zoom-box:before,.zoom-box:after{content:"";position:absolute;width:12px;height:12px;border-color:#00dcff;border-style:solid}.zoom-box:before{top:-2px;left:-2px;border-width:2px 0 0 2px}.zoom-box:after{bottom:-2px;right:-2px;border-width:0 2px 2px 0}.crosshair-h,.crosshair-v{position:absolute;background:#00c8ff33;pointer-events:none;transition:top .6s cubic-bezier(.4,0,.2,1),left .6s cubic-bezier(.4,0,.2,1)}.crosshair-h{height:1px;left:0;right:0}.crosshair-v{width:1px;top:0;bottom:0}.zoom-label{position:absolute;top:8px;left:50%;transform:translate(-50%);background:#000000bf;color:#fff;font-size:10px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:3px 10px;border-radius:3px;white-space:nowrap;opacity:0;transition:opacity .3s}.zoom-label.show{opacity:1}@media(max-width:768px){.viewer{padding:16px}}@media(max-width:480px){.viewer{padding:12px}.preview-wrap{min-height:280px}}