@property --rx{syntax:"<angle>";inherits:true;initial-value:0deg}@property --ry{syntax:"<angle>";inherits:true;initial-value:0deg}@property --rz{syntax:"<angle>";inherits:true;initial-value:0deg}@property --tx{syntax:"<angle>";inherits:true;initial-value:0deg}@property --ty{syntax:"<angle>";inherits:true;initial-value:0deg}.finish-titanium{--f-hi:#d6d6da;--f-base:#3a3a3d;--f-lo:#0a0a0b}.finish-orange{--f-hi:#ffc39a;--f-base:#e9772f;--f-lo:#a2441a}.finish-blue{--f-hi:#93a5c9;--f-base:#3a4d74;--f-lo:#19223a}.finish-silver{--f-hi:#fff;--f-base:#dfe0e3;--f-lo:#a3a5aa}.finish-graphite{--f-hi:#a3a3a8;--f-base:#414145;--f-lo:#1a1a1c}.finish-sand{--f-hi:#f6e8d4;--f-base:#cdb291;--f-lo:#8e7254}.phone{--phone-depth:11.2cqw;--phone-r:16.4cqw;aspect-ratio:780/1634;position:relative;container-type:inline-size}.phone-body{position:absolute;inset:0}.phone-front{border-radius:var(--phone-r);background:conic-gradient(from 215deg, var(--f-hi), var(--f-base) 9%, var(--f-lo) 22%, var(--f-base) 34%, var(--f-hi) 44%, var(--f-base) 55%, var(--f-lo) 70%, var(--f-base) 84%, var(--f-hi));padding:1.1cqw;position:absolute;inset:0}.phone-front:before{content:"";border-radius:inherit;pointer-events:none;background:linear-gradient(128deg,#ffffff57,#0000 20% 72%,#ffffff29);position:absolute;inset:0;box-shadow:inset 0 0 0 .26cqw #fff3,inset 0 0 0 .8cqw #0003,0 0 0 .1cqw #0000008c}.phone-bezel{background:#050506;border-radius:15.3cqw;width:100%;height:100%;padding:2.3cqw;position:relative;box-shadow:inset 0 0 0 .22cqw #ffffff12}.phone-screen{background:#000;border-radius:13cqw;width:100%;height:100%;position:relative;overflow:hidden;container-type:inline-size}.phone-island{z-index:30;background:#000;border-radius:4.3cqw;width:30cqw;height:8.6cqw;position:absolute;top:2.7cqw;left:50%;translate:-50%}.phone-island:after{content:"";aspect-ratio:1;background:radial-gradient(circle at 38% 34%,#26263a,#07070a 62%);border-radius:50%;width:3.3cqw;position:absolute;top:50%;right:2.6cqw;translate:0 -50%}.phone-glare{z-index:35;pointer-events:none;background:linear-gradient(116deg,#ffffff1c 0%,#ffffff08 24%,#0000 40%);position:absolute;inset:0}.phone-dark{z-index:34;pointer-events:none;opacity:calc(1 - var(--wake,1));background:#000;position:absolute;inset:0}.phone-rail{pointer-events:none;position:absolute;inset:0}.phone-btn{background:linear-gradient(90deg, var(--f-lo), var(--f-hi) 45%, var(--f-base) 70%, var(--f-lo));border-radius:.65cqw;width:1.3cqw;position:absolute}.phone-btn[data-side=l]{left:-.75cqw}.phone-btn[data-side=r]{right:-.75cqw}.phone-btn[data-key=action]{height:5.4%;top:17.4%}.phone-btn[data-key=up]{height:8.6%;top:25.4%}.phone-btn[data-key=down]{height:8.6%;top:35.8%}.phone-btn[data-key=side]{height:12%;top:26%}.phone-btn[data-key=camera]{background:linear-gradient(90deg,#0b0b0c,#45454a 55%,#0b0b0c);width:.8cqw;height:9.2%;top:58%;right:-.35cqw}.phone-shadow{filter:blur(2cqw);background:radial-gradient(closest-side,#0000004d,#0000);border-radius:50%;height:6%;position:absolute;bottom:-3.5%;left:12%;right:12%}.phone-3d .phone-body{transform-style:preserve-3d;transform:perspective(430cqw) rotateX(calc(var(--rx) + var(--tx))) rotateY(calc(var(--ry) + var(--ty))) rotateZ(var(--rz));will-change:transform}.phone-3d .phone-front{backface-visibility:hidden;transform:translateZ(.02cqw)}.phone-3d .phone-rail{transform:translateZ(calc(var(--phone-depth) * -.5))}.phone-edge{border-radius:var(--phone-r);transform:translateZ(calc(var(--phone-depth) * var(--z) * -1));position:absolute;inset:.15cqw}.phone-back{border-radius:var(--phone-r);transform:translateZ(calc(var(--phone-depth) * -1)) rotateY(180deg);backface-visibility:hidden;background:radial-gradient(120% 55% at 18% 0%, color-mix(in oklab, var(--f-hi) 45%, transparent), transparent 62%), linear-gradient(168deg, var(--f-base), color-mix(in oklab, var(--f-base) 72%, var(--f-lo)) 58%, var(--f-lo));box-shadow:inset 0 0 0 .8cqw color-mix(in oklab, var(--f-hi) 30%, transparent);position:absolute;inset:0;overflow:hidden}.phone-plateau{border-radius:var(--phone-r) var(--phone-r) 6cqw 6cqw;background:linear-gradient(180deg, color-mix(in oklab, var(--f-hi) 32%, var(--f-base)), var(--f-base) 50%, color-mix(in oklab, var(--f-base) 70%, var(--f-lo)));height:47cqw;box-shadow:0 .7cqw 0 color-mix(in oklab, var(--f-lo) 70%, #000), inset 0 -.35cqw 0 color-mix(in oklab, var(--f-hi) 45%, transparent);position:absolute;inset:0 0 auto}.phone-lens{aspect-ratio:1;background:radial-gradient(circle, #06070a 0 29%, #161b27 30% 39%, #040507 40% 55%, #2b2b30 56% 60%, color-mix(in oklab, var(--f-lo) 60%, #000) 61% 77%, color-mix(in oklab, var(--f-hi) 70%, var(--f-base)) 78% 83%, color-mix(in oklab, var(--f-lo) 80%, #000) 84%);border-radius:50%;width:18.5cqw;position:absolute;box-shadow:0 .6cqw 1.2cqw #00000059}.phone-lens:after{content:"";background:radial-gradient(circle at 34% 30%,#aab4ff99 0 5%,#0000 16%),radial-gradient(circle at 64% 68%,#5ac8be40 0 7%,#0000 20%),radial-gradient(circle,#2834608c,#0000 72%);border-radius:50%;position:absolute;inset:24%}.phone-flash,.phone-lidar{aspect-ratio:1;border-radius:50%;width:6.8cqw;position:absolute}.phone-flash{background:radial-gradient(circle,#fbf7ea 0 30%,#d9d0b6 34% 58%,#8f8877 62%)}.phone-lidar{background:radial-gradient(circle,#101014 0 48%,#2c2c32 52% 64%,#0a0a0c 68%)}.phone-window{background:linear-gradient(180deg, color-mix(in oklab, var(--f-base) 90%, #fff), color-mix(in oklab, var(--f-base) 86%, var(--f-lo)));box-shadow:inset 0 0 0 .25cqw color-mix(in oklab, var(--f-lo) 45%, transparent);color:color-mix(in oklab, var(--f-lo) 55%, var(--f-base));border-radius:9cqw;justify-content:center;align-items:flex-start;padding-top:38cqw;display:flex;position:absolute;inset:60cqw 8cqw 9cqw}.phone-window svg{width:13cqw;height:auto}@keyframes phone-enter{0%{--rx:16deg;--ry:-30deg;--rz:3deg;translate:0 10%}}@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){.phone-enter{animation:linear both phone-enter;animation-timeline:view();animation-range:entry cover 45%}}}
.px{--ease-ui:cubic-bezier(.23, 1, .32, 1);--spring:cubic-bezier(.34, 1.56, .64, 1)}.px-draw{stroke-dasharray:100;stroke-dashoffset:0}.px-fly{offset-rotate:auto;offset-distance:var(--end,100%)}.px-spin,.px-toast,.px-in{opacity:0}@media (hover:hover){:is([data-screen],[data-play]):has(.px){cursor:pointer}}@keyframes px-rise{0%{opacity:0;translate:0 6cqw}}@keyframes px-fade{0%{opacity:0}}@keyframes px-slide{0%{opacity:0;translate:12cqw}}@keyframes px-pop{0%{opacity:0;scale:.3}70%{opacity:1;scale:1.12}to{opacity:1;scale:1}}@keyframes px-line{0%{translate:0 108%}}@keyframes px-type{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}@keyframes px-draw-in{0%{stroke-dashoffset:100px}}@keyframes px-fly-in{0%{offset-distance:0%}}@keyframes px-grow{0%{scale:0 1}}@keyframes px-grow-y{0%{scale:1 0}}@keyframes px-odo{0%{translate:0}}@keyframes px-press{0%,to{scale:1}40%{scale:.93}}@keyframes px-out{to{opacity:0}}@keyframes px-in{0%{opacity:0}to{opacity:1}}@keyframes px-spin{to{rotate:720deg}}@keyframes px-spin-vis{0%{opacity:0}15%,80%{opacity:1}to{opacity:0}}@keyframes px-toast{0%{opacity:0;translate:0 -120%}14%,78%{opacity:1;translate:0}to{opacity:0;translate:0 -60%}}@keyframes px-ping{75%,to{opacity:0;scale:2.2}}@keyframes px-shift{0%{translate:var(--from,0) 0}}@keyframes px-fill{0%{width:var(--from-w,0%)}}@media (prefers-reduced-motion:no-preference){:is([data-play],[data-screen][data-in]) :is(.px-rise,.px-fade,.px-slide,.px-pop,.px-line,.px-type,.px-draw,.px-fly,.px-grow,.px-grow-y,.px-odo,.px-press,.px-out,.px-in,.px-spin,.px-toast,.px-shift,.px-fill){animation-duration:.7s;animation-delay:var(--t,0s);animation-fill-mode:both;animation-timing-function:var(--ease-ui)}:is([data-play],[data-screen][data-in]) .px-rise{animation-name:px-rise}:is([data-play],[data-screen][data-in]) .px-fade{animation-name:px-fade}:is([data-play],[data-screen][data-in]) .px-slide{animation-name:px-slide}:is([data-play],[data-screen][data-in]) .px-pop{animation-name:px-pop;animation-duration:.55s;animation-timing-function:var(--spring)}:is([data-play],[data-screen][data-in]) .px-line{animation-name:px-line;animation-duration:.8s}:is([data-play],[data-screen][data-in]) .px-type{animation-name:px-type;animation-duration:var(--dur,.9s);animation-timing-function:steps(var(--n,12), end)}:is([data-play],[data-screen][data-in]) .px-draw{animation-name:px-draw-in;animation-duration:var(--dur,1.2s);animation-timing-function:var(--ease-cleo)}:is([data-play],[data-screen][data-in]) .px-fly{animation-name:px-fly-in;animation-duration:var(--dur,1.2s);animation-timing-function:var(--ease-cleo)}:is([data-play],[data-screen][data-in]) .px-grow{animation-name:px-grow;animation-duration:var(--dur,.9s)}:is([data-play],[data-screen][data-in]) .px-grow-y{animation-name:px-grow-y;animation-duration:var(--dur,.9s)}:is([data-play],[data-screen][data-in]) .px-odo{animation-name:px-odo;animation-duration:1.1s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}:is([data-play],[data-screen][data-in]) .px-press{animation-name:px-press;animation-duration:.35s;animation-fill-mode:none}:is([data-play],[data-screen][data-in]) .px-out{animation-name:px-out;animation-duration:.2s}:is([data-play],[data-screen][data-in]) .px-in{animation-name:px-in;animation-duration:.3s}:is([data-play],[data-screen][data-in]) .px-spin{animation-name:px-spin,px-spin-vis;animation-duration:.9s;animation-timing-function:linear}:is([data-play],[data-screen][data-in]) .px-toast{animation-name:px-toast;animation-duration:2.6s}:is([data-play],[data-screen][data-in]) .px-shift{animation-name:px-shift;animation-duration:.5s}:is([data-play],[data-screen][data-in]) .px-fill{animation-name:px-fill;animation-duration:var(--dur,1s)}.px-ping{animation:1.6s cubic-bezier(0,0,.2,1) infinite px-ping}}