button[data-preview]{font:inherit;color:inherit;cursor:zoom-in}button[data-preview]:has(img){display:block;width:100%;padding:0;border:0;background:transparent;text-align:inherit}button[data-preview].quiet-link{background:none;border:0;border-bottom:1px solid currentColor;padding:0 0 4px;text-align:left}button[data-preview]:focus-visible{outline:2px solid currentColor;outline-offset:5px}.photo-study button[data-preview]{box-shadow:0 20px 40px #0002;border:1px solid #444;background:#222}.operation-image button[data-preview]{border:1px solid #ccc;box-shadow:0 15px 40px #0000000a}.site-history button[data-preview]{background:transparent;border:0;text-decoration:underline;font-size:inherit}.image-preview{width:min(1400px,96vw);max-width:96vw;max-height:94dvh;padding:0;border:1px solid #555;border-radius:10px;background:#171717;color:#eee;box-shadow:0 30px 100px #0008}.image-preview::backdrop{background:#000c}.preview-toolbar{display:flex;gap:20px;justify-content:space-between;align-items:center;padding:17px 22px;border-bottom:1px solid #444}.preview-toolbar h2{font:400 13px Inter,Arial,sans-serif;margin:0;line-height:1.5;max-width:80%;letter-spacing:0}.preview-close{font:12px Inter,Arial,sans-serif;background:#eee;color:#111;border:0;border-radius:25px;padding:10px 18px;cursor:pointer;white-space:nowrap}.preview-close:focus-visible{outline:2px solid white;outline-offset:4px}.preview-scroll{max-height:calc(94dvh - 78px);overflow:auto;overscroll-behavior:contain}.preview-full-image{display:block;width:100%;height:auto;object-fit:contain;margin:auto;filter:grayscale(1)}body.preview-open{overflow:hidden}
.demo-interface{position:relative;--x1:35%;--y1:28%;--x2:60%;--y2:47%;--x3:79%;--y3:62%}.demo-interface button[data-preview]{position:relative;overflow:hidden}.demo-commerce{--x1:40%;--y1:45%;--x2:65%;--y2:51%;--x3:82%;--y3:59%}.demo-systems{--x1:34%;--y1:28%;--x2:60%;--y2:28%;--x3:83%;--y3:28%}.demo-backend{--x1:38%;--y1:27%;--x2:75%;--y2:44%;--x3:40%;--y3:62%}.demo-social{--x1:32%;--y1:25%;--x2:61%;--y2:25%;--x3:72%;--y3:43%}.demo-team{--x1:35%;--y1:30%;--x2:59%;--y2:47%;--x3:81%;--y3:30%}.demo-cursor{position:absolute;width:22px;height:28px;left:14%;top:76%;z-index:3;pointer-events:none;filter:drop-shadow(0 2px 2px #0004);animation:demoPointer 12s ease-in-out infinite;animation-play-state:paused}.demo-cursor svg{display:block;width:100%;height:100%}.demo-click{position:absolute;width:32px;height:32px;left:var(--x1);top:var(--y1);margin:-16px;border:2px solid #333;border-radius:50%;z-index:2;pointer-events:none;opacity:0;animation:demoClick 12s linear infinite;animation-play-state:paused}.demo-selection{position:absolute;left:var(--x1);top:var(--y1);width:17%;height:8%;transform:translate(-45%,-40%);background:#00000009;border:1px solid #0005;border-radius:3px;opacity:0;pointer-events:none;animation:demoHighlight 12s linear infinite;animation-play-state:paused}.demo-running .demo-cursor,.demo-running .demo-click,.demo-running .demo-selection{animation-play-state:running}.demo-label{font-size:9px;color:#777;margin:12px 0 0;letter-spacing:.04em}
@keyframes demoPointer{0%,100%{left:14%;top:76%}13%,27%{left:var(--x1);top:var(--y1)}20%,48%,76%{scale:.83}23%,51%,79%{scale:1}41%,55%{left:var(--x2);top:var(--y2)}69%,85%{left:var(--x3);top:var(--y3)}}
@keyframes demoClick{0%,18%{left:var(--x1);top:var(--y1);opacity:0;transform:scale(.3)}20%{opacity:.7;transform:scale(.35)}27%{opacity:0;transform:scale(1.6)}28%,46%{left:var(--x2);top:var(--y2);opacity:0;transform:scale(.3)}48%{opacity:.7;transform:scale(.35)}55%{opacity:0;transform:scale(1.6)}56%,74%{left:var(--x3);top:var(--y3);opacity:0;transform:scale(.3)}76%{opacity:.7;transform:scale(.35)}85%,100%{left:var(--x3);top:var(--y3);opacity:0;transform:scale(1.6)}}
@keyframes demoHighlight{0%,19%{left:var(--x1);top:var(--y1);opacity:0}21%,31%{left:var(--x1);top:var(--y1);opacity:1}35%{opacity:0}36%,47%{left:var(--x2);top:var(--y2);opacity:0}49%,59%{left:var(--x2);top:var(--y2);opacity:1}63%{opacity:0}64%,75%{left:var(--x3);top:var(--y3);opacity:0}77%,86%{left:var(--x3);top:var(--y3);opacity:1}93%,100%{opacity:0}}
@media(max-width:600px){.demo-cursor{width:17px;height:23px}.preview-toolbar{padding:12px}.preview-toolbar h2{font-size:11px}.preview-close{padding:9px 12px}.image-preview{width:96vw}}
@media(prefers-reduced-motion:reduce){.demo-cursor,.demo-click,.demo-selection{display:none;animation:none!important}}