*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#949a9d;color:#fff;font-family:Arial,Helvetica,sans-serif}body{min-height:100svh}.page{position:relative;min-height:100svh;overflow:hidden;display:grid;grid-template-columns:59% 41%}.scene{position:absolute;inset:0 41% 0 0;overflow:hidden;background:linear-gradient(130deg,#abb0b2,#949a9d)}.stage{display:block;width:100%;height:100%;position:absolute;inset:0;overflow:hidden;isolation:isolate}.content{grid-column:2;position:relative;display:flex;align-items:center;justify-content:center;min-height:100svh;padding:65px 5vw 85px 20px;background:linear-gradient(120deg,#9da3a6,#92989b 80%)}.brand-block{width:100%;max-width:730px;text-align:center}.logo-wrap{outline:none;transition:filter .4s,transform .4s}.logo-wrap:focus-visible{outline:2px solid #cee6ff;outline-offset:10px;border-radius:4px}.logo{display:block;width:100%;height:auto}.eyebrow{margin:42px 0 12px;font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.28em;color:#f4f6f7}h1{font-size:clamp(36px,3.5vw,66px);font-weight:300;letter-spacing:-.055em;margin:0 0 24px;line-height:1.1}h1 strong{font-weight:700}.countdown{display:flex;align-items:flex-start;justify-content:center;gap:clamp(8px,1.3vw,24px);font-variant-numeric:tabular-nums}.unit{min-width:44px;transition:filter .3s,transform .3s}.unit:hover{filter:drop-shadow(0 0 8px #c4e2ff);transform:translateY(-2px)}.number{display:block;font-size:clamp(30px,3.1vw,58px);line-height:1;font-weight:300;letter-spacing:.02em}.label{display:block;margin-top:12px;font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:#edf0f2}.colon{font-size:28px;line-height:1.4;opacity:.5;font-weight:300}.launch-date{font-size:10px;letter-spacing:.1em;color:#e6eaec;margin:30px 0 0}.footer{position:absolute;bottom:27px;left:20px;right:5vw;display:flex;justify-content:space-between;gap:10px;font-size:8px;letter-spacing:.14em;color:#edf0f2;text-transform:uppercase}.status{display:flex;align-items:center;gap:7px}.dot{height:5px;width:5px;border-radius:50%;background:#236fd1;box-shadow:0 0 0 4px #ffffff12;flex-shrink:0}.motion-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;margin:24px auto 0;padding:9px 12px;min-height:36px;border:1px solid #ffffff38;border-radius:24px;background:#ffffff08;color:#fff;font:10px Arial,sans-serif;letter-spacing:.04em;cursor:pointer;transition:background .25s}.motion-toggle:hover{background:#ffffff20}.motion-toggle:focus-visible{outline:2px solid #e0f0ff;outline-offset:4px}.motion-icon{font-size:17px;line-height:1}.object-caption{position:absolute;top:24px;left:24px;display:flex;flex-direction:column;gap:5px;padding:13px 18px;border:1px solid #ffffff4d;background:#64717bd1;backdrop-filter:blur(12px);border-radius:3px;pointer-events:none;opacity:0;transform:translateY(-6px);transition:opacity .25s,transform .25s}.object-caption.visible{opacity:1;transform:translateY(0)}#object-name{font-size:14px;letter-spacing:.01em}
/* Every clipped layer and hit area share the original image coordinates. */
.scene{background:#a1a7a9}
.object{cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent}.object-visual{pointer-events:none;transition:filter .4s,transform .5s;transform-box:fill-box;transform-origin:center}.object-visual>use{opacity:0;transition:opacity .4s}.hit{fill:transparent;stroke:none;pointer-events:all}.rim{fill:none;stroke:#b9ddff;stroke-width:2;opacity:0;pointer-events:none;transition:opacity .4s;filter:drop-shadow(0 0 7px #8fc6ff)}.scan-beam,.glint{opacity:0;pointer-events:none}.model-halo,.model-light{opacity:0;pointer-events:none;transition:opacity .6s}.object:is(.is-hovered,.is-selected,:focus-visible) .object-visual>use{opacity:1}.object:is(.is-hovered,.is-selected,:focus-visible) .object-visual{filter:brightness(1.07) drop-shadow(0 0 5px #d2eaff80)}.object:is(.is-hovered,.is-selected,:focus-visible) .rim{opacity:.7}.model:is(.is-hovered,.is-selected,:focus-visible) .model-halo{opacity:.7}.model:is(.is-hovered,.is-selected,:focus-visible) .model-light{opacity:.3}.model .rim{stroke-width:1}.model:is(.is-hovered,.is-selected,:focus-visible) .rim{opacity:.2}.object:focus-visible .rim{stroke:#fff;stroke-width:4;opacity:1}
@media(prefers-reduced-motion:no-preference){
body:not(.motion-paused) .brand-block{animation:reveal .9s ease both}
body:not(.motion-paused) .object:not(.model):is(.is-hovered,.is-selected,:focus-visible) .object-visual{transform:translateY(-2px)}
body:not(.motion-paused) .safe:is(.is-hovered,.is-selected,:focus-visible) .scan-beam{opacity:1;animation:safe-scan 2.5s ease-in-out infinite}
body:not(.motion-paused) .counter:is(.is-hovered,.is-selected,:focus-visible) .scan-beam{opacity:.7;animation:counter-scan 1.8s ease-in-out infinite}
body:not(.motion-paused) .shredder:is(.is-hovered,.is-selected,:focus-visible) .glint{opacity:.75;animation:product-shine 2.8s ease-in-out infinite}
body:not(.motion-paused) .laminator:is(.is-hovered,.is-selected,:focus-visible) .glint{opacity:.8;animation:product-shine 2.2s ease-in-out infinite}
body:not(.motion-paused) .logo-shine{animation:logo-shine 9s ease-in-out infinite}
body:not(.motion-paused) .logo-wrap:is(:hover,:focus-visible){filter:drop-shadow(0 0 14px #c5e2ff60);transform:translateY(-2px)}
body:not(.motion-paused) .number.digit-change{animation:digit-change .4s ease both}
@keyframes safe-scan{0%{transform:translateY(0);opacity:0}15%{opacity:.7}80%{opacity:.7}100%{transform:translateY(510px);opacity:0}}
@keyframes counter-scan{0%{transform:translateY(0);opacity:0}15%{opacity:.6}85%{opacity:.6}100%{transform:translateY(320px);opacity:0}}
@keyframes product-shine{0%{transform:translateX(0);opacity:0}20%{opacity:.7}80%{opacity:.7}100%{transform:translateX(650px);opacity:0}}
@keyframes logo-shine{0%,65%{transform:translateX(0);opacity:0}70%{opacity:.8}90%,100%{transform:translateX(1100px);opacity:0}}
@keyframes digit-change{0%{opacity:.55;transform:translateY(4px)}100%{opacity:1;transform:translateY(0)}}
@keyframes reveal{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}}
.motion-paused *, .motion-paused *::before,.motion-paused *::after{animation:none!important;transition:none!important}.motion-paused .object-visual,.motion-paused .unit{transform:none!important}
@media(max-width:960px){.page{display:flex;flex-direction:column}.scene{position:relative;inset:auto;height:auto;aspect-ratio:1148/1080;width:100%;flex-shrink:0}.content{min-height:500px;padding:32px 28px 65px;background:linear-gradient(145deg,#9da3a6,#848c91)}.brand-block{max-width:410px}.logo-wrap{width:84%;margin:auto}.eyebrow{margin:25px 0 10px;font-size:8px}h1{font-size:39px;margin-bottom:23px}.number{font-size:38px}.countdown{gap:15px}.unit{min-width:45px}.colon{font-size:25px}.label{font-size:8px;margin-top:10px}.launch-date{margin-top:23px;font-size:9px}.footer{left:28px;right:28px;bottom:20px;font-size:7px}.object-caption{left:15px;top:15px;padding:10px 12px}#object-name{font-size:12px}.motion-toggle{margin-top:20px}}

@media(max-width:350px){.countdown{gap:8px}.unit{min-width:40px}.number{font-size:32px}.content{padding-left:20px;padding-right:20px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.object-visual,.unit{transform:none!important}.motion-toggle:disabled{cursor:default;opacity:.8}}