.viewer{background:#f5f5f5;border:1px solid #e0e0e0;margin-bottom:24px;padding:16px}.canvas-grid{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}.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}.canvas-stage{position:relative;width:100%}.canvas-shell canvas{width:100%;max-width:100%;height:auto;display:block;border:none}canvas{width:100%;max-width:100%;height:auto;background:#fff;border:1px solid #e0e0e0;cursor:crosshair;display:block}#source{position:relative;z-index:1;transform-origin:0 0;background:transparent;touch-action:none}#source.is-pan{cursor:grab}#source.is-pan.is-panning{cursor:grabbing}#source.is-zoomed{image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;image-rendering:pixelated}@media(max-width:768px){.canvas-grid{grid-template-columns:1fr}.viewer{padding:16px}}@media(max-width:480px){.viewer{padding:12px}}.preview-stage{position:relative;width:100%;min-height:360px;overflow:hidden;background:linear-gradient(45deg,#e5e7eb 25%,transparent 25%,transparent 75%,#e5e7eb 75%,#e5e7eb) 0 0/20px 20px,linear-gradient(45deg,#e5e7eb 25%,transparent 25%,transparent 75%,#e5e7eb 75%,#e5e7eb) 10px 10px/20px 20px,#cbd5e1}.viewer-toolbar{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:12px}.viewer-toolbar__button{min-height:40px;padding:0 14px;border:1px solid #d1d5db;background:#fff;color:#111827;font-size:12px;font-weight:700;letter-spacing:.2px;cursor:pointer;transition:border-color .2s ease,background-color .2s ease,color .2s ease,opacity .2s ease}.viewer-toolbar__button:hover:not(:disabled){border-color:#111827}.viewer-toolbar__button:disabled{opacity:.5;cursor:not-allowed}.viewer-toolbar__button.is-active{background:#000;color:#fff}.viewer-eyedropper{display:flex;align-items:flex-start;gap:12px;min-height:40px;padding:10px 12px;border:1px solid #d1d5db;background:#fff;color:#111827;max-width:min(100%,720px)}.viewer-eyedropper__swatch{width:36px;height:36px;border-radius:999px;border:2px solid rgba(15,23,42,.14);background:linear-gradient(45deg,#e5e7eb 25%,transparent 25%,transparent 75%,#e5e7eb 75%,#e5e7eb) 0 0/10px 10px,linear-gradient(45deg,#e5e7eb 25%,transparent 25%,transparent 75%,#e5e7eb 75%,#e5e7eb) 5px 5px/10px 10px,#fff;flex:0 0 auto}.viewer-eyedropper__copy{display:flex;flex-direction:column;gap:4px;min-width:0}.viewer-eyedropper__hex{font-size:13px;font-weight:700;color:#111827}.viewer-eyedropper__rgb,.viewer-eyedropper__family,.viewer-eyedropper__meta{font-size:12px;line-height:1.45;color:#4b5563}.preview-stage.is-raster{min-height:0;overflow:hidden;background:#f8fafc}.preview-stage.is-raster .preview-viewport{position:absolute;inset:0;overflow:hidden}.preview-stage.is-raster .preview-transform{position:absolute;left:0;top:0;display:block;max-width:none}.preview-stage.is-raster .preview-canvas{display:block;width:100%;max-width:none;height:100%;background:linear-gradient(45deg,#e5e7eb 25%,transparent 25%,transparent 75%,#e5e7eb 75%,#e5e7eb) 0 0/20px 20px,linear-gradient(45deg,#e5e7eb 25%,transparent 25%,transparent 75%,#e5e7eb 75%,#e5e7eb) 10px 10px/20px 20px,#f8fafc}.preview-viewport{position:absolute;inset:0;overflow:hidden;touch-action:none}.preview-transform{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0;will-change:transform}.preview-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;font-size:14px;color:#475569}.preview-canvas{display:none;width:auto;max-width:none;height:auto;background:transparent;border:none;transform-origin:0 0;touch-action:none}.preview-canvas.is-visible{display:block}.preview-svg-host{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.preview-empty[hidden],.preview-svg-host[hidden]{display:none!important}.preview-svg-host>svg{display:block;width:100%;height:100%;background:transparent}.preview-stage.has-image .preview-viewport{cursor:grab}.preview-stage.is-dragging .preview-viewport{cursor:grabbing}.preview-stage.is-erase-mode .preview-viewport,.preview-stage.is-erase-mode .preview-svg-host [data-vectorizar-shape]{cursor:crosshair}.preview-svg-host [data-vectorizar-shape].is-debug-stack{filter:drop-shadow(0 0 0 rgba(245,158,11,.98)) drop-shadow(0 0 6px rgba(245,158,11,.98))}.preview-svg-host [data-vectorizar-shape].is-debug-target{filter:drop-shadow(0 0 0 rgba(239,68,68,.98)) drop-shadow(0 0 8px rgba(239,68,68,.98))}.preview-svg-host [data-vectorizar-shape].is-palette-selected{filter:drop-shadow(0 0 0 rgba(37,99,235,.98)) drop-shadow(0 0 8px rgba(37,99,235,.98))}@media(max-width:768px){.viewer-toolbar{flex-direction:column}.preview-stage{min-height:280px}}@media(max-width:480px){.preview-stage{min-height:220px}}