.winnix-media{min-width:0}.winnix-arc{container-type:inline-size;position:relative;width:100%;height:300px;perspective:1000px;isolation:isolate}.winnix-phone{position:absolute;left:50%;top:46%;width:min(20cqw,116px);aspect-ratio:316/656;transform:translate(calc(-50% + var(--spread)),calc(-50% + var(--rise))) rotateZ(var(--rz));outline:none;transform-style:preserve-3d;z-index:2}.winnix-phone:nth-child(3){z-index:4}.winnix-phone:nth-child(2),.winnix-phone:nth-child(4){z-index:3}.phone-frame{position:relative;width:100%;height:100%;padding:5px;border-radius:20px;background:linear-gradient(120deg,#65676c,#181a1e 25%,#45474d 62%,#17191b);border:1px solid #ffffff40;box-shadow:inset 0 0 0 1px #08090b,9px 20px 25px #0007;transform:rotateY(calc(var(--ry) + var(--tilt-y,0deg))) rotateX(var(--tilt-x,0deg)) translateZ(var(--lift,0px));transform-style:preserve-3d;transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .4s;box-sizing:border-box}.phone-frame::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(125deg,#ffffff18,transparent 40%,#ffffff04);border-right:2px solid #ffffff15}.phone-screen{position:relative;width:100%;height:100%;border-radius:15px;overflow:hidden;background:#11141a;aspect-ratio:300/640}.phone-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}.phone-screen img[hidden]{display:none}.phone-camera{position:absolute;top:9px;left:50%;translate:-50% 0;width:5px;height:5px;border-radius:50%;background:#03040a;box-shadow:0 0 0 2px #151820;pointer-events:none}.phone-placeholder{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:radial-gradient(ellipse at top,#323d37,#121718 65%);color:#aab8af;font-family:system-ui}.phone-placeholder span{font-size:8px;letter-spacing:2px}.phone-placeholder strong{font-size:36px;font-weight:400;color:#fff}.phone-placeholder small{font-size:8px}.winnix-phone:hover,.winnix-phone:focus-visible{z-index:6}.winnix-phone:focus-visible .phone-frame{outline:2px solid #fff;outline-offset:4px;--tilt-y:12deg;--lift:25px}.winnix-phone:hover .phone-frame{box-shadow:inset 0 0 0 1px #08090b,12px 28px 35px #0009}.winnix-arc.is-tracking .phone-frame{transition:transform .18s ease-out,box-shadow .4s}@media(max-width:900px){.winnix-arc{height:240px}.phone-frame{border-radius:16px;padding:4px}.phone-screen{border-radius:12px}.winnix-phone{--rise:16px!important}.winnix-phone:nth-child(3){--rise:-8px!important}}@media(prefers-reduced-motion:reduce){.phone-frame,.winnix-arc.is-tracking .phone-frame{transition:none}}
.winnix-phone{cursor:zoom-in;transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .35s;transform:translate(calc(-50% + var(--spread) + var(--isolate-shift,0px)),calc(-50% + var(--rise))) rotateZ(var(--rz))}.winnix-phone.is-selected{z-index:8;transform:translate(calc(-50% + var(--spread) + var(--isolate-shift,0px)),calc(-50% + var(--rise) - 12px)) rotateZ(calc(var(--rz)*.55)) scale(1.18)}.winnix-phone.is-muted{opacity:.48}.winnix-viewer{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;border:0;padding:24px;background:#0b0c0fed;color:#fff;box-sizing:border-box;overflow:auto}.winnix-viewer::backdrop{background:#000b;backdrop-filter:blur(12px)}.winnix-viewer-content{width:min(100%,760px);margin:auto;min-height:calc(100dvh - 48px);display:flex;flex-direction:column;justify-content:center;gap:16px}.winnix-viewer header{display:flex;justify-content:space-between;align-items:center;gap:16px}.winnix-viewer h2{font:500 16px system-ui;margin:0}.winnix-viewer button{display:grid;place-items:center;width:42px;height:42px;flex:none;border:1px solid #ffffff24;border-radius:50%;background:#ffffff0a;color:#fff;cursor:pointer;font:20px system-ui;transition:background .2s}.winnix-viewer button:hover{background:#ffffff20}.winnix-viewer button:focus-visible{outline:2px solid #fff;outline-offset:4px}.viewer-stage{display:flex;align-items:center;justify-content:center;gap:24px}.zoom-phone{width:min(300px,calc((100dvh - 180px)*.46875),calc(100vw - 160px));aspect-ratio:300/640;background:#15181c;border:6px solid #303238;border-radius:26px;overflow:hidden;box-shadow:0 20px 70px #0008}.zoom-phone>img{display:block;width:100%;height:100%;object-fit:contain}.zoom-phone .phone-placeholder span{font-size:12px}.zoom-phone .phone-placeholder strong{font-size:60px}.zoom-phone .phone-placeholder small{font-size:12px}.viewer-caption,.winnix-viewer small{text-align:center;font:13px system-ui;margin:0;color:#ffffffa0}.winnix-viewer small{font-size:11px;color:#ffffff60}@media(max-width:600px){.winnix-viewer{padding:16px}.viewer-stage{gap:10px}.winnix-viewer button{width:36px;height:36px}.zoom-phone{width:min(300px,calc((100dvh - 170px)*.46875),calc(100vw - 135px))}.winnix-viewer-content{min-height:calc(100dvh - 32px)}}@media(prefers-reduced-motion:reduce){.winnix-phone{transition:none}}
/* Thin bezel, exact screen ratio, and a deeper chassis behind the front glass. */
.winnix-phone{aspect-ratio:auto}.phone-frame{height:auto;padding:2px;border-radius:14px}.phone-screen{height:auto;aspect-ratio:300/640;border-radius:11px}.phone-frame::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#17191d,#676b74 45%,#26282e);transform:translateZ(-0.5px);box-shadow:0 0 0 1px #838791,1px 0 0 #454951,2px 0 0 #3c4048,3px 0 0 #343840,4px 0 0 #2e3239,5px 0 0 #282c33;pointer-events:none}.phone-frame::after{border-right:1px solid #ffffff30}.phone-camera{top:5px;width:3px;height:3px;box-shadow:0 0 0 1px #151820}.zoom-phone{aspect-ratio:auto;border:3px solid #303238;border-radius:18px}.zoom-phone>img,.zoom-phone>.phone-placeholder{aspect-ratio:300/640;height:auto}.zoom-phone>.phone-placeholder{min-height:100%}@media(max-width:900px){.phone-frame{padding:2px;border-radius:12px}.phone-screen{border-radius:9px}}
.winnix-phone{transform:translate(calc(-50% + var(--stack-x,0%)),calc(-50% + var(--stack-y,0px))) rotateZ(var(--stack-rz,0deg))}.winnix-phone:nth-child(1){--stack-x:-12%;--stack-y:8px;--stack-rz:-5deg}.winnix-phone:nth-child(2){--stack-x:-6%;--stack-y:4px;--stack-rz:-2.5deg}.winnix-phone:nth-child(4){--stack-x:6%;--stack-y:4px;--stack-rz:2.5deg}.winnix-phone:nth-child(5){--stack-x:12%;--stack-y:8px;--stack-rz:5deg}.winnix-arc .phone-frame{transform:rotateY(var(--tilt-y,0deg)) rotateX(var(--tilt-x,0deg)) translateZ(var(--lift,0px))}.winnix-arc.is-expanded .winnix-phone{transform:translate(calc(-50% + var(--spread) + var(--isolate-shift,0px)),calc(-50% + var(--rise))) rotateZ(var(--rz))}.winnix-arc.is-expanded .phone-frame{transform:rotateY(calc(var(--ry) + var(--tilt-y,0deg))) rotateX(var(--tilt-x,0deg)) translateZ(var(--lift,0px))}.winnix-arc.is-expanded .winnix-phone.is-selected{transform:translate(calc(-50% + var(--spread) + var(--isolate-shift,0px)),calc(-50% + var(--rise) - 12px)) rotateZ(calc(var(--rz)*.55)) scale(1.18)}.winnix-arc:not(.is-expanded) .winnix-phone.is-muted{opacity:1}.winnix-arc.is-expanded .winnix-phone:nth-child(1){transition-delay:0ms}.winnix-arc.is-expanded .winnix-phone:nth-child(2){transition-delay:12ms}.winnix-arc.is-expanded .winnix-phone:nth-child(4){transition-delay:12ms}.winnix-arc.is-expanded .winnix-phone:nth-child(5){transition-delay:0ms}
@media(prefers-reduced-motion:reduce){.winnix-arc .winnix-phone{transition:none;transition-delay:0ms}}

/* Keep front glass, screen and chassis joined during every 3D rotation. */
.phone-frame{transform-style:flat;isolation:isolate}.phone-frame::before{z-index:-1}.phone-screen,.phone-camera,.phone-frame::after{transform:translateZ(0);backface-visibility:hidden}
.phone-screen img,.zoom-phone img,.ticketbox-native-screen img{-webkit-user-drag:none;user-select:none}