.dynamic-island.mock-face-id{display:grid;place-items:center;overflow:hidden;pointer-events:none}.dynamic-island.mock-face-id.is-active{z-index:60;animation:mock-face-id-shell var(--face-id-duration) cubic-bezier(.4,0,.2,1) both}.mock-face-id__visual{position:relative;width:100px;height:100px;color:#8cf497;opacity:0;transform:scale(.55)}.mock-face-id__orb{position:absolute;top:0;right:0;bottom:0;left:0;perspective:260px;transform-style:preserve-3d}.mock-face-id__orb svg,.mock-face-id__confirmation{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:visible;transform-origin:50% 50%}.mock-face-id__orb svg{stroke:currentColor;stroke-width:2.4;opacity:0}.mock-face-id__orb .mock-face-id__halo{stroke-width:8;filter:blur(5px)}.mock-face-id__strand{filter:blur(.7px) drop-shadow(0 0 3px rgb(119 248 140 / 55%))}.mock-face-id__rim{filter:drop-shadow(0 0 1px rgb(119 248 140 / 40%))}.mock-face-id__dot{fill:currentColor;opacity:0}.mock-face-id__tick{stroke:currentColor;stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}.is-active .mock-face-id__visual{animation:mock-face-id-presence var(--face-id-duration) linear both}.is-active .mock-face-id__halo{animation:mock-face-id-halo var(--face-id-duration) ease-in-out both}.is-active .mock-face-id__strand--one{animation:mock-face-id-strand-one var(--face-id-duration) ease-in-out both}.is-active .mock-face-id__strand--two{animation:mock-face-id-strand-two var(--face-id-duration) ease-in-out both}.is-active .mock-face-id__strand--three{animation:mock-face-id-strand-three var(--face-id-duration) ease-in-out both}.is-active .mock-face-id__rim{animation:mock-face-id-rim var(--face-id-duration) ease-in-out both}.is-active .mock-face-id__dot{animation:mock-face-id-dot var(--face-id-duration) linear both}.is-active .mock-face-id__tick{animation:mock-face-id-tick var(--face-id-duration) linear both}.mock-face-id__status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@keyframes mock-face-id-shell{0%{width:122px;height:35px;border-radius:20px;box-shadow:0 0 #0000}5%{width:120px;height:44px;border-radius:22px}11%{width:133px;height:112px;border-radius:33px}17%{width:136px;height:140px;border-radius:36px}22%,84%{width:136px;height:136px;border-radius:36px;box-shadow:0 12px 28px #00000029}90%{width:134px;height:108px;border-radius:32px}96%{width:126px;height:49px;border-radius:24px}to{width:122px;height:35px;border-radius:20px;box-shadow:0 0 #0000}}@keyframes mock-face-id-presence{0%,7%{opacity:0;transform:scale(.55)}13%{opacity:.35;transform:scale(.72)}19%{opacity:1;transform:scale(.94)}26%,80%{opacity:1;transform:scale(1)}85%{opacity:0;transform:scale(.92)}to{opacity:0;transform:scale(.6)}}@keyframes mock-face-id-halo{0%,10%{opacity:0;transform:rotateX(62deg) rotateY(-28deg) rotate(-40deg) scale(.7)}18%{opacity:.3;transform:rotateX(35deg) rotateY(34deg) rotate(-25deg) scale(.82)}25%{opacity:.5;transform:rotateX(-24deg) rotateY(48deg) rotate(24deg) scale(.93)}32%{opacity:.3;transform:rotateX(28deg) rotateY(-35deg) rotate(-16deg) scale(.98)}40%{opacity:.18;transform:rotateX(-10deg) rotateY(20deg) rotate(8deg) scale(1)}49%,to{opacity:0;transform:rotateX(0) rotateY(0) rotate(0) scale(1)}}@keyframes mock-face-id-rim{0%,10%{opacity:0;transform:rotateX(65deg) rotateY(-32deg) rotate(-35deg) scale(.78);stroke-width:4}18%{opacity:.3;transform:rotateX(28deg) rotateY(52deg) rotate(-26deg) scale(.86);stroke-width:3.6}25%{opacity:.6;transform:rotateX(-22deg) rotateY(-34deg) rotate(32deg) scale(.94)}32%{opacity:.9;transform:rotateX(16deg) rotateY(58deg) rotate(-18deg) scale(1)}39%{opacity:1;transform:rotateX(-14deg) rotateY(-28deg) rotate(16deg) scale(1.02)}46%{opacity:1;transform:rotateX(5deg) rotateY(10deg) rotate(-4deg) scale(1);stroke-width:2.8}52%,to{opacity:1;transform:rotateX(0) rotateY(0) rotate(0) scale(1);stroke-width:2.8}}@keyframes mock-face-id-strand-one{0%,12%{opacity:0;transform:rotateX(48deg) rotateY(55deg) rotate(-40deg) scale(.8)}20%{opacity:.5;transform:rotateX(-32deg) rotateY(68deg) rotate(24deg) scale(.9)}27%{opacity:.75;transform:rotateX(42deg) rotateY(-36deg) rotate(-28deg) scale(1)}34%{opacity:.6;transform:rotateX(-18deg) rotateY(62deg) rotate(32deg) scale(1.03)}41%{opacity:.45;transform:rotateX(16deg) rotateY(-30deg) rotate(-12deg) scale(1)}48%{opacity:.15;transform:rotateX(2deg) rotateY(8deg) rotate(2deg) scale(1)}53%,to{opacity:0;transform:rotateX(0) rotateY(0) rotate(0) scale(1)}}@keyframes mock-face-id-strand-two{0%,12%{opacity:0;transform:rotateX(-58deg) rotateY(-38deg) rotate(32deg) scale(.72)}20%{opacity:.45;transform:rotateX(52deg) rotateY(-64deg) rotate(-22deg) scale(.9)}27%{opacity:.65;transform:rotateX(-42deg) rotateY(42deg) rotate(28deg) scale(.98)}34%{opacity:.6;transform:rotateX(28deg) rotateY(-58deg) rotate(-26deg) scale(1)}41%{opacity:.35;transform:rotateX(-12deg) rotateY(24deg) rotate(10deg) scale(1)}48%{opacity:.12;transform:rotateX(-2deg) rotateY(-6deg) rotate(-2deg) scale(1)}53%,to{opacity:0;transform:rotateX(0) rotateY(0) rotate(0) scale(1)}}@keyframes mock-face-id-strand-three{0%,14%{opacity:0;transform:rotateX(70deg) rotateY(18deg) rotate(-32deg) scale(.8)}22%{opacity:.4;transform:rotateX(-46deg) rotateY(-48deg) rotate(34deg) scale(.96)}29%{opacity:.55;transform:rotateX(58deg) rotateY(24deg) rotate(-24deg) scale(1.04)}36%{opacity:.4;transform:rotateX(-35deg) rotateY(-32deg) rotate(18deg) scale(1)}43%{opacity:.25;transform:rotateX(12deg) rotateY(16deg) rotate(-8deg) scale(1)}50%,to{opacity:0;transform:rotateX(0) rotateY(0) rotate(0) scale(1)}}@keyframes mock-face-id-dot{0%,52%{opacity:0}54%,57%{opacity:1}60%,to{opacity:0}}@keyframes mock-face-id-tick{0%,55%{stroke-dashoffset:1;opacity:0}56%{stroke-dashoffset:1;opacity:1}59%{stroke-dashoffset:.8;opacity:1}62%{stroke-dashoffset:.62;opacity:1}68%,to{stroke-dashoffset:0;opacity:1}}@media (max-width: 440px){.dynamic-island.mock-face-id{display:none}.dynamic-island.mock-face-id.is-active{display:grid}}.phone{--screen-w: 390px;--screen-h: 844px;--bezel: 12px;position:relative;width:calc(var(--screen-w) + var(--bezel) * 2);height:calc(var(--screen-h) + var(--bezel) * 2);padding:var(--bezel);border-radius:62px;background:#0b0b0d;box-shadow:0 0 0 2px #3a3d44,0 0 0 4px #1a1c20,0 40px 80px #0000008c,inset 0 0 0 2px #222;flex-shrink:0;transform-origin:center}@media (max-height: 940px){.phone{transform:scale(.88)}}@media (max-height: 820px){.phone{transform:scale(.76)}}@media (max-height: 700px){.phone{transform:scale(.64)}}@media (max-width: 440px){.stage{padding:0}.phone{transform:none;width:100vw;height:100dvh;padding:0;border-radius:0;box-shadow:none}.phone-screen{border-radius:0!important}.phone-btn,.dynamic-island{display:none}}.phone-btn{position:absolute;width:4px;background:#2b2e34;border-radius:2px}.phone-btn--silent{left:-6px;top:140px;height:30px}.phone-btn--vol-up{left:-6px;top:196px;height:58px}.phone-btn--vol-down{left:-6px;top:268px;height:58px}.phone-btn--power{right:-6px;top:220px;height:92px}.phone-screen{position:relative;width:100%;height:100%;border-radius:50px;overflow:hidden;background:#f2f3f5;display:flex;flex-direction:column;isolation:isolate}.dynamic-island{position:absolute;top:11px;left:50%;transform:translate(-50%);width:122px;height:35px;border-radius:20px;background:#000;z-index:50}.home-indicator{position:absolute;bottom:8px;left:50%;transform:translate(-50%);width:136px;height:5px;border-radius:3px;background:#111;z-index:50;pointer-events:none}.status-bar{flex:0 0 auto;height:50px;padding:16px 30px 0 44px;display:flex;align-items:center;justify-content:space-between;background:transparent;font-weight:700;position:relative;z-index:49}.status-time{display:inline-flex;align-items:center;gap:3px;font-size:16px;letter-spacing:-.2px}.status-mute{margin-top:1px}.status-right{display:inline-flex;align-items:center;gap:6px}.signal{display:inline-flex;align-items:flex-end;gap:2px;height:11px}.signal i{width:3px;background:#111;border-radius:1px}.lte{font-size:13px;letter-spacing:.2px}.battery{display:inline-flex;align-items:center}.battery-body{width:25px;height:13px;border-radius:4px;background:#c9ccd1;position:relative;overflow:hidden;display:grid;place-items:center}.battery-body:before{content:"";position:absolute;top:0;right:51%;bottom:0;left:0;background:#ffd60a}.battery-level{position:relative;font-size:10.5px;font-weight:800;color:#111}.battery-cap{width:2px;height:5px;margin-left:1px;border-radius:0 2px 2px 0;background:#c9ccd1}
