.x4-scene{--mx:0;--my:0;background:#08090c}.x4-stage{pointer-events:none;position:absolute;inset:0;overflow:hidden}.x4-light{background:radial-gradient(55% 45% at 34% 34%,#3caac829 0%,#3caac80a 45%,#0000 70%),linear-gradient(#0d1016 0%,#08090c 60%,#060709 100%);position:absolute;inset:0}.x4-scene .lg-ui,.x4-scene .lg-body,.x4-scene .lg-header{pointer-events:none}.x4-scene .lg-header>*,.x4-scene .lg-lead,.x4-scene .lg-panel,.x4-scene .lg-footer{pointer-events:auto}.x4-scene .lg-header{gap:14px;height:96px}.x4-scene .lg-header img{width:224px;height:39px}.x4-scene .lg-ops{letter-spacing:.2em;font-size:14px}.x4-scene .lg-body{flex-direction:column;justify-content:flex-end;align-items:flex-end;gap:18px;padding-top:0;padding-bottom:196px;display:flex}.x4-scene .lg-lead{align-self:flex-end;width:min(100%,440px);max-width:none;padding-top:0}.x4-scene .lg-lead h1{font-size:clamp(30px,2.8vw,40px)}.x4-scene .lg-lead p{max-width:none;margin-top:8px;font-size:15px}.x4-scene .lg-panel{justify-self:auto;width:min(100%,440px)}.x4-type{text-align:center;position:absolute;top:44vh;left:0;right:34vw;overflow:hidden;translate:0 -50%}.x4-type span{letter-spacing:-.06em;white-space:nowrap;color:#0000;-webkit-text-stroke:1px #ffffff38;transform:translate3d(calc(var(--mx) * -10px), calc(var(--my) * -6px), 0);font-size:clamp(120px,26vw,380px);font-weight:700;line-height:.85;animation:1.1s cubic-bezier(.2,.7,.2,1) both x4TypeIn;display:inline-block}.x4-rig{pointer-events:auto;touch-action:pan-y;-webkit-user-select:none;user-select:none;height:60vh;position:absolute;top:13vh;left:4vw;right:max(36vw,508px)}.x4-rig img{-webkit-user-drag:none}.x4-hero{cursor:grab}.x4-rig[data-drag],.x4-rig[data-drag] .x4-hero{cursor:grabbing}.x4-hero{transform-origin:50% 70%;transform:rotateY(calc(var(--mx) * 5deg)) rotateX(calc(var(--my) * -2deg));animation:.9s cubic-bezier(.2,.7,.2,1) both x4HeroIn;position:absolute;inset:0 12% 26%}.x4-layer{position:absolute;inset:0}.x4-layer img{object-fit:contain;object-position:50% 50%;filter:drop-shadow(0 36px 46px #0009)}.x4-shadow{filter:blur(8px);background:radial-gradient(50% 50%,#000000b3,#0000 70%);height:8%;position:absolute;bottom:-2%;left:12%;right:12%}.x4-plate{left:calc(var(--ox) * 1%);top:calc(var(--oy) * 1%);width:clamp(104px,9.5vw,150px);transform:translate3d(calc(var(--mx) * var(--dx) * 14px), calc(var(--my) * var(--dy) * 10px), 0);animation:1.2s cubic-bezier(.2,.7,.2,1) both x4PlateIn;animation-delay:calc(.2s + var(--i) * .1s);margin:0;position:absolute}.x4-plateImg{aspect-ratio:1.15;animation:7s ease-in-out infinite x4Float;animation-delay:calc(var(--i) * -1.7s);background:#0e1014;border:1px solid #ffffff29;position:relative;overflow:hidden;box-shadow:0 30px 60px -20px #000000e6,inset 0 1px #ffffff14}.x4-plateImg img{object-fit:cover;filter:brightness(.92)contrast(1.06)saturate(.9)}.x4-plate figcaption{grid-template-columns:auto 1fr;gap:1px 8px;width:150%;margin-top:8px;font-size:12px;line-height:1.3;display:grid}.x4-n{color:#ffffff73;letter-spacing:.06em;grid-row:1/span 2;padding-top:2px;font-size:11px;font-weight:500}.x4-name{color:#fff;font-weight:600}.x4-note{color:#ffffff8c;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.x4-chips{z-index:11;pointer-events:auto;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;font-size:12px;display:flex;position:absolute;top:max(-8%,104px - 13vh);right:0}.x4-chipsModel{color:#fff;margin-right:4px;font-weight:600}.x4-chip{color:#ffffffbf;height:26px;font:inherit;cursor:pointer;background:#ffffff0a;border:1px solid #ffffff38;border-radius:999px;padding:0 10px;font-size:12px;transition:background .2s,border-color .2s,color .2s}.x4-chip:hover,.x4-chip:focus-visible{color:#fff;border-color:#ffffff80;outline:none}.x4-chip[data-on]{color:#121212;background:#fff;border-color:#fff}.x4-strip{pointer-events:auto;grid-template-columns:repeat(10,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none;display:grid;position:absolute;bottom:52px;left:4vw;right:4vw}.x4-card{min-width:0}.x4-card button{color:#fff;width:100%;font:inherit;text-align:left;cursor:pointer;background:#ffffff08;border:1px solid #ffffff1a;outline:none;padding:8px 8px 7px;transition:border-color .25s,background .25s,transform .3s cubic-bezier(.2,.7,.2,1);display:block}.x4-card button:hover,.x4-card button:focus-visible{background:#ffffff0f;border-color:#ffffff59;transform:translateY(-3px)}.x4-card[data-on] button{background:#3cc8e614;border-color:#78dcf0b3}.x4-cardImg{aspect-ratio:7/4;display:block;position:relative}.x4-cardImg img{object-fit:contain;width:100%;height:100%;position:absolute;inset:0}.x4-b{opacity:0;transition:opacity .35s}.x4-card[data-hv] .x4-b{opacity:1}.x4-model{margin-top:6px;font-size:12px;font-weight:600;display:block}.x4-color{color:#ffffff8c;white-space:nowrap;text-overflow:ellipsis;font-size:11px;display:block;overflow:hidden}.x4-scene .lg-panel{-webkit-backdrop-filter:blur(10px)saturate(1.1);background:#080a0ec7;border-color:#ffffff2e;box-shadow:0 40px 100px #0000008c,inset 0 1px #78dcf073}@keyframes x4TypeIn{0%{opacity:0;transform:translateY(50px)}to{opacity:1}}@keyframes x4HeroIn{0%{opacity:0;transform:translate(24px)}to{opacity:1}}@keyframes x4PlateIn{0%{opacity:0;transform:translate3d(calc(var(--dx) * -120px), calc(var(--dy) * -100px), 0) scale(.7)}to{opacity:1}}@keyframes x4Float{0%,to{transform:translateY(0)}50%{transform:translateY(-7px)}}@media (max-height:820px){.x4-rig{height:56vh;top:13vh}.x4-plate{width:clamp(90px,8vw,120px)}}@media (max-width:1200px){.x4-strip{grid-template-columns:repeat(5,minmax(0,1fr));bottom:44px}.x4-scene .lg-body{padding-bottom:300px}}@media (max-width:900px){.x4-type{top:24svh;right:0;translate:0}.x4-type span{font-size:40vw}.x4-rig{height:34svh;top:9svh;left:3vw;right:3vw}.x4-hero{bottom:10%;left:10%;right:10%}.x4-chips{scrollbar-width:none;flex-wrap:nowrap;justify-content:center;margin-top:8px;padding:0 8px;top:100%;left:0;right:0;overflow-x:auto}.x4-chips::-webkit-scrollbar{display:none}.x4-chipsModel{display:none}.x4-chip{flex:none;height:28px}.x4-plate{width:64px}.x4-plate figcaption{column-gap:5px;width:170%;margin-top:5px;font-size:10px}.x4-n{font-size:9px}.x4-note{display:none}.x4-plate{left:calc(var(--mox) * 1%);top:calc(var(--moy) * 1%)}.x4-strip{scrollbar-width:none;gap:8px;padding:0 16px;display:flex;position:absolute;inset:calc(43svh + 48px) 0 auto;overflow-x:auto}.x4-strip::-webkit-scrollbar{display:none}.x4-card{flex:0 0 112px}.x4-scene .lg-header{height:64px}.x4-scene .lg-header img{width:168px;height:29px}.x4-scene .lg-body{justify-content:flex-start;align-items:stretch;gap:14px;padding-top:calc(43svh + 120px);padding-bottom:24px}.x4-scene .lg-lead,.x4-scene .lg-panel{width:100%}.x4-scene .lg-lead h1{font-size:30px}}@media (prefers-reduced-motion:reduce){.x4-type span,.x4-hero,.x4-plate,.x4-plateImg{animation:none!important}.x4-hero,.x4-card button{transition:none!important}}
