:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}button.active{border-color:#646cff}button.active:hover{border-color:#646caa}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}:root{--image-zoomer-zoom-factor: 2.5;--image-zoomer-lens-size: 200px;--image-zoomer-lens-border: 2px solid rgba(255, 255, 255, .8);--image-zoomer-lens-shadow: 0 4px 8px rgba(0, 0, 0, .2);--image-zoomer-lens-bg: rgba(255, 255, 255, .1);--image-zoomer-lens-backdrop-filter: blur(1px);--image-zoomer-lens-radius: 4px;--image-zoomer-crosshair-color: rgba(255, 255, 255, .9);--image-zoomer-crosshair-size: 20px;--image-zoomer-crosshair-thickness: 2px;--image-zoomer-crosshair-shadow: 0 0 4px rgba(0, 0, 0, .5);--image-zoomer-transition-duration: .2s;--image-zoomer-transition-timing: ease-out;--image-zoomer-viewport-border: 1px solid rgba(0, 0, 0, .1);--image-zoomer-viewport-shadow: 0 8px 32px rgba(0, 0, 0, .12);--image-zoomer-viewport-bg: #ffffff;--image-zoomer-viewport-radius: 0px;--image-zoomer-overlay-backdrop: rgba(0, 0, 0, .1);--image-zoomer-overlay-viewport-shadow: 0 12px 48px rgba(0, 0, 0, .2)}.image-zoomer{position:relative;display:inline-block;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;overflow:visible}.image-zoomer__image{display:block;max-width:100%;height:auto;transition:opacity var(--image-zoomer-transition-duration) var(--image-zoomer-transition-timing)}.image-zoomer--zooming .image-zoomer__image{cursor:none}.image-zoomer__lens{position:absolute;pointer-events:none;border:var(--image-zoomer-lens-border);border-radius:var(--image-zoomer-lens-radius);background:var(--image-zoomer-lens-bg);-webkit-backdrop-filter:var(--image-zoomer-lens-backdrop-filter);backdrop-filter:var(--image-zoomer-lens-backdrop-filter);box-shadow:var(--image-zoomer-lens-shadow);opacity:0;transition:opacity var(--image-zoomer-transition-duration) var(--image-zoomer-transition-timing);z-index:10;width:var(--image-zoomer-lens-size);height:var(--image-zoomer-lens-size);transform:translate(-50%,-50%);overflow:visible}.image-zoomer--zooming .image-zoomer__lens{opacity:1}.image-zoomer__crosshair{position:absolute;pointer-events:none;opacity:0;transition:opacity var(--image-zoomer-transition-duration) var(--image-zoomer-transition-timing);z-index:35;transform:translate(-50%,-50%)}.image-zoomer__crosshair:before,.image-zoomer__crosshair:after{content:"";position:absolute;background:var(--image-zoomer-crosshair-color);box-shadow:var(--image-zoomer-crosshair-shadow)}.image-zoomer__crosshair:before{width:var(--image-zoomer-crosshair-size);height:var(--image-zoomer-crosshair-thickness);top:50%;left:50%;transform:translate(-50%,-50%)}.image-zoomer__crosshair:after{width:var(--image-zoomer-crosshair-thickness);height:var(--image-zoomer-crosshair-size);top:50%;left:50%;transform:translate(-50%,-50%)}.image-zoomer--zooming .image-zoomer__crosshair{opacity:1}.image-zoomer__viewport{position:absolute;background:var(--image-zoomer-viewport-bg);border:var(--image-zoomer-viewport-border);border-radius:var(--image-zoomer-viewport-radius);box-shadow:var(--image-zoomer-viewport-shadow);overflow:hidden;opacity:0;transition:opacity var(--image-zoomer-transition-duration) var(--image-zoomer-transition-timing);z-index:20;pointer-events:none}.image-zoomer--zooming .image-zoomer__viewport{opacity:1}.image-zoomer__zoomed-image{position:absolute;pointer-events:none;transition:transform var(--image-zoomer-transition-duration) var(--image-zoomer-transition-timing);transform-origin:top left}.image-zoomer--overlay .image-zoomer__viewport{z-index:30;box-shadow:var(--image-zoomer-overlay-viewport-shadow)}.image-zoomer--overlay:before{content:"";position:absolute;inset:0;background:var(--image-zoomer-overlay-backdrop);pointer-events:none;opacity:0;transition:opacity var(--image-zoomer-transition-duration) var(--image-zoomer-transition-timing);z-index:5}.image-zoomer--overlay.image-zoomer--zooming:before{opacity:1}.image-zoomer--overlay .image-zoomer__lens{z-index:15}@media (max-width: 768px){:root{--image-zoomer-lens-size: 150px;--image-zoomer-zoom-factor: 2}}@media (max-width: 480px){:root{--image-zoomer-lens-size: 120px;--image-zoomer-zoom-factor: 1.8}}@media (prefers-reduced-motion: reduce){:root{--image-zoomer-transition-duration: .05s}.image-zoomer__lens,.image-zoomer__viewport,.image-zoomer__zoomed-image{transition:none}}@media (prefers-contrast: high){:root{--image-zoomer-lens-border: 3px solid #000000;--image-zoomer-lens-bg: rgba(255, 255, 255, .3);--image-zoomer-viewport-border: 2px solid #000000;--image-zoomer-crosshair-color: #000000;--image-zoomer-crosshair-shadow: 0 0 6px rgba(255, 255, 255, .8)}}*{box-sizing:border-box}#root{--image-zoomer-viewport-bg: #1f1f1f}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;color:#fff;background:repeating-linear-gradient(90deg,transparent,transparent 8px,rgba(255,255,255,.1) 8px,rgba(255,255,255,.1) 9px),repeating-linear-gradient(0deg,transparent,transparent 12px,rgba(0,0,0,.15) 12px,rgba(0,0,0,.15) 13px),repeating-linear-gradient(45deg,transparent,transparent 20px,rgba(255,255,255,.03) 20px,rgba(255,255,255,.03) 21px),#1f1f1f}#root{width:100%;height:100vh}.app{display:flex;height:100vh;overflow:hidden}.main-content{flex:1;display:flex;flex-direction:column;overflow-y:auto;padding-right:300px}header{text-align:start;padding:1rem .2rem;color:#fff;background:#282828cc;border-bottom:1px solid rgba(255,255,255,.15)}header h1{font-size:1.5rem;font-weight:500;margin:0;color:#fff}header p{font-size:1.1rem;margin:.5rem 0 0;opacity:.7;color:#ccc}.controls{position:fixed;top:0;right:0;width:280px;height:100vh;background:#191919f2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-left:1px solid rgba(255,255,255,.1);padding:20px;overflow-y:auto;font-size:13px;box-shadow:-2px 0 10px #00000080;z-index:1000}.controls h3{margin:0 0 15px;font-size:14px;font-weight:600;color:#fff;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid rgba(255,255,255,.2);padding-bottom:8px}.control-group{margin-bottom:20px}.control-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;min-height:24px}.control-row label{font-weight:500;color:#ccc;font-size:12px;margin:0;flex-shrink:0}.zoom-toggle{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:4px;padding:6px 12px;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s ease;text-transform:uppercase;letter-spacing:.5px;width:60px;height:24px;display:flex;align-items:center;justify-content:center}.zoom-toggle:hover{opacity:.8}.zoom-toggle.active{background:linear-gradient(135deg,#10b981,#059669)}input[type=range]{appearance:none;width:120px;height:3px;border-radius:2px;background:#fff3;outline:none;cursor:pointer;margin:0}input[type=range]::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border-radius:50%;background:#667eea;cursor:pointer;transition:all .2s ease}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#667eea;cursor:pointer;border:none;transition:all .2s ease}select{padding:4px 8px;border:1px solid rgba(255,255,255,.3);border-radius:3px;background:#282828e6;color:#fff;font-size:11px;cursor:pointer;width:120px;height:24px}select:focus{outline:none;border-color:#667eea}input[type=checkbox]{appearance:none;width:14px;height:14px;border:1px solid rgba(255,255,255,.3);border-radius:2px;background:#282828e6;cursor:pointer;position:relative;margin:0;transition:all .2s ease}input[type=checkbox]:checked{background:#667eea;border-color:#667eea}input[type=checkbox]:checked:after{content:"✓";color:#fff;font-size:10px;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.value-display{font-size:11px;color:#ccc;font-family:Courier New,monospace;min-width:40px;text-align:right}.demo-section{flex:1;padding:2rem;display:flex;flex-direction:column}.demo-section h2{margin:0 0 1.5rem;font-size:1.5rem;color:#fff;font-weight:600}.image-container{flex:1;display:flex;justify-content:center;align-items:center;background:#28282899;border-radius:8px;border:1px solid rgba(255,255,255,.1);min-height:500px}.controls hr{border:none;border-top:1px solid rgba(255,255,255,.2);margin:20px 0}@media (max-width: 1024px){.controls{width:250px}.main-content{padding-right:250px}}@media (max-width: 768px){.app{flex-direction:column}.main-content{padding-right:0;height:calc(100vh - 200px)}.controls{position:relative;width:100%;height:200px;border-left:none;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;gap:15px;padding:15px}.control-group{margin-bottom:0;flex:1;min-width:120px}.control-row{margin-bottom:8px;flex-direction:column;align-items:flex-start;gap:4px}input[type=range],select{width:100%}header{padding:1rem}header h1{font-size:2rem}.demo-section{padding:1rem}.image-container{min-height:300px}.mouse-position{bottom:210px;right:10px;font-size:10px;padding:4px 8px}}.image-zoomer img{transition:opacity .3s ease}.image-zoomer img[src=""]{opacity:0}.mouse-position{position:fixed;bottom:20px;right:20px;background:#000c;color:#fff;padding:6px 12px;border-radius:4px;font-family:Courier New,monospace;font-size:11px;font-weight:500;z-index:1001;pointer-events:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.1)}.controls::-webkit-scrollbar{width:6px}.controls::-webkit-scrollbar-track{background:transparent}.controls::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}.controls::-webkit-scrollbar-thumb:hover{background:#ffffff4d}