/* Homepage hero only. Dimensions are reserved before JavaScript or artwork loads. */
html[data-palette][data-edition="premium"] .factory-hero-media.yx-hero-carousel{position:relative;isolation:isolate;background:#080b12}
html[data-palette][data-edition="premium"] .factory-hero-media.yx-hero-carousel::after{content:none}
.yx-hero-carousel .yx-hero-slide{position:absolute;inset:0}
.yx-hero-carousel .yx-hero-slide[hidden],.yx-hero-carousel .yx-hero-controls[hidden]{display:none}
.yx-hero-carousel .yx-hero-factory>img{width:100%;height:100%;object-fit:cover;object-position:center 48%}
.yx-hero-carousel .yx-hero-factory::after{position:absolute;inset:55% 0 0;content:"";background:linear-gradient(transparent,#101820a8);pointer-events:none}
.yx-hero-carousel .yx-oled-link{position:absolute;inset:0;display:flex;align-items:center;background:#080b12;color:#fff;text-decoration:none}
/* The initial OLED artwork fills the wide desktop frame, with its dark left
   side behind the live copy and the full monitor on the right. */
.yx-hero-carousel .yx-oled-art{position:absolute;inset:0;overflow:hidden}
.yx-hero-carousel .yx-oled-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:right center}
.yx-hero-carousel .yx-oled-copy{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;width:45%;padding:30px 0 34px 4.5%}
.yx-hero-carousel .yx-oled-eyebrow{display:block;margin-bottom:15px;color:#c9c6fa;font-size:11px;font-weight:600;letter-spacing:.22em;line-height:1.3}
.yx-hero-carousel .yx-oled-title{display:block;margin-bottom:14px;color:#fff;font-size:clamp(42px,4.8vw,68px);font-weight:600;letter-spacing:-.045em;line-height:1.04}
.yx-hero-carousel .yx-oled-description{display:block;color:#cdd2e0;font-size:clamp(14px,1.3vw,18px);font-weight:400;line-height:1.5}
.yx-hero-carousel .yx-oled-highlights{display:grid;grid-template-columns:repeat(3,max-content);gap:clamp(13px,2vw,28px);margin-top:24px}
.yx-hero-carousel .yx-oled-highlights>span{display:flex;flex-direction:column;gap:4px}
.yx-hero-carousel .yx-oled-highlights strong{color:#fff;font-size:clamp(13px,1.25vw,17px);font-weight:600;line-height:1.3;white-space:nowrap}
.yx-hero-carousel .yx-oled-highlights small{color:#aeb7cc;font-size:11px;line-height:1.4;white-space:nowrap}
.yx-hero-carousel .yx-oled-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:23px;margin-top:27px;padding:13px 17px;border:1px solid #b9c1e06b;background:#e8eaf4;color:#101521;font-size:12px;font-weight:600;line-height:1.5;transition:background .2s}
.yx-hero-carousel .yx-oled-cta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.yx-hero-carousel .yx-oled-link:hover .yx-oled-cta{background:#fff}
.yx-hero-carousel .yx-oled-link:focus-visible{outline:3px solid #e6d3ff;outline-offset:-5px}
.yx-hero-carousel .yx-hero-controls{position:absolute;z-index:3;right:18px;bottom:17px;display:flex;align-items:center;gap:0;padding:0 3px;border:1px solid #ffffff45;border-radius:30px;background:#090e19d9;color:#fff;backdrop-filter:blur(8px)}
.yx-hero-carousel .yx-hero-controls button{display:grid;place-items:center;flex:0 0 auto;width:40px;height:40px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:#fff;cursor:pointer;font:inherit}
.yx-hero-carousel .yx-hero-controls button:hover{background:#ffffff24}
.yx-hero-carousel .yx-hero-controls button:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.yx-hero-carousel .yx-hero-controls svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.yx-hero-carousel .yx-hero-controls .yx-hero-play-icon{display:none}
.yx-hero-carousel .yx-hero-controls .is-paused .yx-hero-pause-icon{display:none}
.yx-hero-carousel .yx-hero-controls .is-paused .yx-hero-play-icon{display:block}
.yx-hero-carousel .yx-hero-dots{display:flex}
.yx-hero-carousel .yx-hero-dots button{width:28px}
.yx-hero-carousel .yx-hero-dots button[hidden]{display:none}
.yx-hero-carousel .yx-hero-dots span{width:6px;height:6px;border-radius:50%;background:#ffffff55;transition:background .2s,transform .2s}
.yx-hero-carousel .yx-hero-dots [aria-current="true"] span{background:#fff;transform:scale(1.4)}
.yx-hero-carousel .yx-hero-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.yx-hero-carousel .yx-hero-slide.yx-hero-entering:not([hidden]){animation:yx-hero-reveal .45s ease both}
@keyframes yx-hero-reveal{from{opacity:.25}to{opacity:1}}
.yx-hero-carousel .yx-hero-camera .yx-oled-title{font-size:clamp(36px,3.8vw,54px)}
/* The detail window and leader are independent overlays. The full monitor image
   keeps the same element, source, size, object position, and responsive frame. */
.yx-hero-carousel .yx-camera-detail{position:absolute;z-index:2;top:1%;left:28%;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:4px;width:20%;aspect-ratio:2.6;padding:6px;border:1px solid #a6d9ee70;border-radius:4px;background:#07131fec;box-shadow:0 8px 24px #0006;pointer-events:none}
.yx-hero-carousel .yx-camera-detail-image{display:block;min-height:0;overflow:hidden;border-radius:1px}
.yx-hero-carousel .yx-camera-detail-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 46%;transform:scale(1.55);transform-origin:center 46%}
.yx-hero-carousel .yx-camera-detail-caption{display:block;color:#d3edfa;font-size:clamp(8px,.72vw,10px);font-weight:500;letter-spacing:.08em;line-height:1.2;text-align:center;white-space:nowrap}
.yx-hero-carousel .yx-camera-guide{position:absolute;inset:0;z-index:1;width:100%;height:100%;overflow:visible;fill:none;stroke:#b6e6f5c4;stroke-width:1;pointer-events:none}
.yx-hero-carousel .yx-camera-guide path,.yx-hero-carousel .yx-camera-guide circle{vector-effect:non-scaling-stroke}
.yx-hero-carousel .yx-camera-guide circle{fill:#8cdbff18}
.yx-hero-carousel .yx-camera-guide-tablet,.yx-hero-carousel .yx-camera-mobile-guide{display:none}
.yx-hero-carousel .yx-hero-camera:not(.has-camera-detail) .yx-camera-detail,.yx-hero-carousel .yx-hero-camera:not(.has-camera-detail) .yx-camera-guide,.yx-hero-carousel .yx-hero-camera:not(.has-camera-detail) .yx-camera-mobile-guide{visibility:hidden}
@media(min-width:681px) and (max-width:1050px){
 .yx-hero-carousel .yx-oled-copy{padding-left:4%;width:45%;padding-block:22px 42px}
 .yx-hero-carousel .yx-oled-eyebrow{margin-bottom:10px;font-size:10px}
 .yx-hero-carousel .yx-oled-title{font-size:44px;margin-bottom:10px}
 .yx-hero-carousel .yx-oled-description{font-size:14px;line-height:1.45}
 .yx-hero-carousel .yx-oled-highlights{margin-top:18px;gap:15px}
 .yx-hero-carousel .yx-oled-highlights strong{font-size:13px}
 .yx-hero-carousel .yx-oled-highlights small{font-size:10px}
 .yx-hero-carousel .yx-oled-cta{margin-top:18px;padding:10px 13px;font-size:11px}
}
@media(min-width:681px) and (max-width:900px){
 /* The existing tablet factory frame is 16:9. Center a 21:9 artwork area in it
    so cover does not enlarge and crop the left edge of the monitor. */
 .yx-hero-carousel .yx-oled-art{top:12%;bottom:12%}
 .yx-hero-carousel .yx-camera-guide{top:12%;bottom:12%;height:76%}
 .yx-hero-carousel .yx-camera-guide-wide{display:none}
 .yx-hero-carousel .yx-camera-guide-tablet{display:block}
}
@media(max-width:680px){
 html[data-palette][data-edition="premium"] .factory-hero-media.yx-hero-carousel{height:560px;aspect-ratio:auto}
 .yx-hero-carousel .yx-oled-link{align-items:flex-start}
 .yx-hero-carousel .yx-oled-copy{width:100%;padding:26px 24px 0}
 .yx-hero-carousel .yx-oled-eyebrow{font-size:10px;margin-bottom:11px}
 .yx-hero-carousel .yx-oled-title{font-size:48px;margin-bottom:11px}
 .yx-hero-carousel .yx-hero-camera .yx-oled-title{font-size:34px}
 .yx-hero-carousel .yx-oled-description{font-size:14px;line-height:1.45}
 .yx-hero-carousel .yx-oled-highlights{gap:20px;margin-top:18px}
 .yx-hero-carousel .yx-oled-highlights strong{font-size:13px}
 .yx-hero-carousel .yx-oled-highlights small{font-size:10px}
 .yx-hero-carousel .yx-oled-cta{margin-top:19px;padding:10px 14px;font-size:11px}
 .yx-hero-carousel .yx-oled-art{top:auto;left:0;bottom:48px;height:min(250px,calc((100vw - 40px)*.75));mask-image:none}
 .yx-hero-carousel .yx-oled-art img{object-fit:cover;object-position:right center}
 .yx-hero-carousel .yx-hero-camera .yx-oled-copy{padding-top:20px}
 .yx-hero-carousel .yx-hero-camera .yx-oled-eyebrow{margin-bottom:34px}
 .yx-hero-carousel .yx-hero-camera .yx-oled-title{font-size:30px;margin-bottom:9px}
 .yx-hero-carousel .yx-hero-camera .yx-oled-highlights{margin-top:14px}
 .yx-hero-carousel .yx-hero-camera .yx-oled-cta{margin-top:13px}
 .yx-hero-carousel .yx-camera-detail{top:7px;right:18px;left:auto;width:clamp(122px,34vw,160px);padding:5px;gap:3px}
 .yx-hero-carousel .yx-camera-detail-caption{font-size:8px;letter-spacing:.04em}
 .yx-hero-carousel .yx-camera-guide{display:none}
 .yx-hero-carousel .yx-camera-mobile-guide{--detail-art-height:min(250px,calc((100vw - 40px)*.75));position:absolute;inset:0;z-index:1;display:block;pointer-events:none}
 .yx-hero-carousel .yx-camera-mobile-guide>span{position:absolute;background:#b6e6f5b3}
 .yx-hero-carousel .yx-camera-guide-stem{right:18px;top:calc(7px + clamp(122px,34vw,160px)/2.6);bottom:calc(48px + var(--detail-art-height)*.96341463);width:1px}
 .yx-hero-carousel .yx-camera-guide-across{left:calc(100% - var(--detail-art-height)*.69634146);right:18px;bottom:calc(48px + var(--detail-art-height)*.96341463);height:1px}
 .yx-hero-carousel .yx-camera-guide-down{left:calc(100% - var(--detail-art-height)*.69634146);bottom:calc(48px + var(--detail-art-height)*.88414634);width:1px;height:calc(var(--detail-art-height)*.07926829)}
 .yx-hero-carousel .yx-camera-mobile-guide .yx-camera-guide-target{left:calc(100% - var(--detail-art-height)*.69634146);bottom:calc(48px + var(--detail-art-height)*.88414634);width:14px;height:14px;border:1px solid #c4ebfa;border-radius:50%;background:#8cdbff18;transform:translate(-50%,50%)}
 .yx-hero-carousel .yx-hero-controls{right:12px;bottom:9px}
 html[data-palette][data-edition="premium"] .yx-hero-carousel .factory-about-cta{inset:auto 14px 68px;min-width:0;justify-content:space-between}
}
@media(max-width:360px){
 .yx-hero-carousel .yx-oled-copy{padding-inline:19px}
 .yx-hero-carousel .yx-oled-highlights{gap:14px}
 .yx-hero-carousel .yx-oled-highlights strong{font-size:12px}
}
@media(min-width:651px) and (max-width:680px){
 /* At the widest mobile frame cover is width-limited instead of height-limited. */
 .yx-hero-carousel .yx-camera-guide-across,.yx-hero-carousel .yx-camera-guide-down,.yx-hero-carousel .yx-camera-mobile-guide .yx-camera-guide-target{left:70.22940563%}
 .yx-hero-carousel .yx-camera-guide-down,.yx-hero-carousel .yx-camera-mobile-guide .yx-camera-guide-target{bottom:calc(48px + var(--detail-art-height)*.5 + (100vw - 66px)*.16423358)}
 .yx-hero-carousel .yx-camera-guide-down{height:calc(var(--detail-art-height)*.46341463 - (100vw - 66px)*.16423358)}
}
@media(prefers-reduced-motion:reduce){
 .yx-hero-carousel .yx-hero-slide.yx-hero-entering:not([hidden]){animation:none}
 .yx-hero-carousel .yx-oled-cta,.yx-hero-carousel .yx-hero-dots span{transition:none}
}