/* Motion layer. Nothing here hides content unless the animation runs, so the site reads the same with no JS. */
@keyframes lzRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
header + section :is(h1,h1 + p,p:has(+ h1)),#top div:has(> h1) + div,#top figure{animation:lzRise .7s cubic-bezier(.16,1,.3,1) both}
header + section h1{animation-delay:.06s}
header + section h1 + p,#top div:has(> h1) + div{animation-delay:.16s}
#top figure{animation-delay:.28s}

.lz-progress{position:fixed;left:0;top:0;right:0;height:2px;background:#FF5A1F;transform:scaleX(0);transform-origin:0 50%;z-index:50;pointer-events:none}

a,button{transition:color .15s ease,background-color .15s ease,border-color .15s ease}
.btn-o,.btn-l,.btn-k{will-change:transform}

/* Inspection brackets: the corners from the product preview, used as the hover state. */
.lz-rt{position:relative}
.lz-rt::after{content:"";position:absolute;inset:-1px;pointer-events:none;opacity:0;transform:scale(1.015);transition:opacity .2s ease,transform .3s cubic-bezier(.16,1,.3,1);--c:#FF5A1F;
  background:
    linear-gradient(var(--c),var(--c)) 0 0/16px 2px,linear-gradient(var(--c),var(--c)) 0 0/2px 16px,
    linear-gradient(var(--c),var(--c)) 100% 0/16px 2px,linear-gradient(var(--c),var(--c)) 100% 0/2px 16px,
    linear-gradient(var(--c),var(--c)) 0 100%/16px 2px,linear-gradient(var(--c),var(--c)) 0 100%/2px 16px,
    linear-gradient(var(--c),var(--c)) 100% 100%/16px 2px,linear-gradient(var(--c),var(--c)) 100% 100%/2px 16px;
  background-repeat:no-repeat}
@media (hover:hover){.lz-rt:hover::after{opacity:1;transform:none}}
.lz-slide{transition:transform .3s cubic-bezier(.16,1,.3,1)}
@media (hover:hover){.lz-slide:hover{transform:translateX(8px)}}

/* Module switcher */
.lz-switch{position:relative}
.lz-ind{position:absolute;left:0;top:0;width:100%;background:#0A0A0A;pointer-events:none}
.lz-switch.lz-on .lz-mod{position:relative;background:transparent}
.lz-switch.lz-on .lz-mod:hover:not([aria-pressed="true"]){background:#F5F5F5}

/* Interactive preview */
.lz-live .lz-det{animation:none}
.lz-live g.lz-det{opacity:0;transform-box:fill-box}
.lz-live div.lz-det{position:relative;min-height:88px;transition:background-color .2s ease,opacity .25s ease;opacity:.28}
.lz-live div.lz-det.lz-found{opacity:1}
.lz-live .lz-sel{background:#1A1A1A;box-shadow:inset 3px 0 0 #FF5A1F}
.lz-live.lz-focus div.lz-det:not(.lz-sel){opacity:.5}
.lz-pick{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer}
.lz-pick:hover{background:rgba(255,255,255,.04)}
.lz-pick:focus-visible,.lz-mark:focus-visible,.lz-act:focus-visible{outline:2px solid #FF5A1F;outline-offset:-2px}
.lz-acts{position:absolute;right:18px;bottom:10px;z-index:1;display:none;gap:6px}
.lz-sel .lz-acts{display:flex}
.lz-act{min-height:28px;padding:0 10px;border:1px solid #757575;background:#0A0A0A;color:#FFFFFF;font:500 13px Inter,system-ui,sans-serif;cursor:pointer}
.lz-act:hover{border-color:#FF5A1F;color:#FF5A1F}
.lz-verdict{position:absolute;right:18px;bottom:14px;display:none;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.1em;color:#FFFFFF}
.lz-done .lz-verdict{display:block}
.lz-done .lz-acts{display:none}
.lz-mark{position:absolute;top:-6px;width:27px;height:28px;margin-left:-12px;padding:0;border:0;background:none;cursor:pointer}
.lz-mark::before{content:"";position:absolute;left:12px;top:6px;width:3px;height:16px;background:#FF5A1F;transition:transform .2s cubic-bezier(.16,1,.3,1)}
.lz-mark:hover::before,.lz-mark[aria-pressed="true"]::before{transform:scaleY(1.5)}
.lz-live svg{will-change:transform}
.lz-aim{cursor:crosshair}
.lz-aim.lz-over{cursor:pointer}
.lz-hair{position:absolute;inset:0;opacity:0;pointer-events:none;z-index:1}
.lz-hx,.lz-hy,.lz-ro{position:absolute;left:0;top:0;will-change:transform}
.lz-hx{width:100%;height:1px;background:rgba(255,90,31,.35)}
.lz-hy{width:1px;height:100%;background:rgba(255,90,31,.35)}
.lz-ro{padding:3px 6px;background:#0A0A0A;border:1px solid #2E2E2E;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.1em;color:#FFFFFF;white-space:nowrap}
.lz-lock{position:absolute;left:0;top:0;width:0;height:0;opacity:0;pointer-events:none;z-index:1;--c:#FFFFFF;
  background:
    linear-gradient(var(--c),var(--c)) 0 0/12px 2px,linear-gradient(var(--c),var(--c)) 0 0/2px 12px,
    linear-gradient(var(--c),var(--c)) 100% 0/12px 2px,linear-gradient(var(--c),var(--c)) 100% 0/2px 12px,
    linear-gradient(var(--c),var(--c)) 0 100%/12px 2px,linear-gradient(var(--c),var(--c)) 0 100%/2px 12px,
    linear-gradient(var(--c),var(--c)) 100% 100%/12px 2px,linear-gradient(var(--c),var(--c)) 100% 100%/2px 12px;
  background-repeat:no-repeat}

@media (max-width:480px){.lz-live div.lz-det{flex-wrap:wrap}.lz-live div.lz-det > div:not(.lz-acts){flex-basis:60%}.lz-acts,.lz-verdict{position:relative;right:auto;bottom:auto;flex-basis:100%;margin-left:42px}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto !important}
  header + section *{animation-name:none !important}
  .lz-rt::after,.lz-slide{transition:none;transform:none !important}
  .lz-progress{display:none}
}
@media print{*{opacity:1 !important;transform:none !important}.lz-progress{display:none}}