/* Original native device/notification composition, scoped to the Tracking example. */
.track-phone-figure{--phone-progress:1;position:relative;margin:24px 0 30px;text-align:center;isolation:isolate}
.tracking-layout>.tracking-desk{align-self:start}
.track-phone-scene{height:580px;position:relative;perspective:1100px;isolation:isolate}
.phone-aura{position:absolute;inset:35px -12px 15px;background:radial-gradient(ellipse at 54% 48%,#9e79d54d 0,#9672be21 36%,transparent 69%);filter:blur(9px);z-index:-2}
.phone-ground{position:absolute;left:15%;right:5%;bottom:17px;height:30px;border-radius:50%;background:#11111b7d;filter:blur(19px);transform:rotate(-6deg);z-index:-1}
.parcel-phone{position:absolute;left:50%;top:17px;width:276px;height:531px;transform:translateX(-46%) rotateX(4deg) rotateY(-10deg) rotateZ(-6deg);transform-style:preserve-3d;border-radius:48px;background:linear-gradient(110deg,#17171c,#94909c 28%,#27272f 45%,#090b10 78%,#88818f);padding:3px;box-shadow:2px 1px 1px #ece2f77a,7px 6px 0 #3f3e48,11px 8px 0 #17191f,14px 9px 1px #7b738355,19px 22px 27px #0909118c,-2px -1px 1px #c5bfcd99;will-change:transform}
.phone-rim{width:100%;height:100%;padding:9px;border-radius:45px;background:linear-gradient(115deg,#43424a,#111217 30%,#27262e 72%,#5d5863);box-shadow:inset 0 0 0 1px #b2a8bb5c,inset 2px 2px 2px #ffffff24}
.phone-screen{position:relative;overflow:hidden;border-radius:36px;width:100%;height:100%;background:linear-gradient(148deg,#615274 0,#373344 37%,#25242f 74%);border:1px solid #121218;box-shadow:inset 2px 1px 3px #ffffff2b}
.phone-screen:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(113deg,#ffffff1a,transparent 32%,transparent 69%,#ffffff08 70%,transparent 79%);z-index:4}
.phone-camera{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:79px;height:22px;border-radius:16px;background:linear-gradient(#0a0b10,#18181c);box-shadow:inset 0 1px 2px #000,0 1px 1px #ffffff13;z-index:5}.phone-camera i{position:absolute;right:9px;top:6px;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 60% 40%,#7995b0 0,#273444 22%,#11161c 48%,#29303b 64%,#060a0e 71%)}
.phone-side-key,.phone-power-key{position:absolute;left:-4px;top:102px;width:4px;height:44px;border-radius:3px 0 0 3px;background:linear-gradient(90deg,#14141b,#85818c);box-shadow:-1px 0 1px #af9fbc66}.phone-side-key.key-two{top:158px}.phone-power-key{left:auto;right:-10px;top:148px;height:66px;width:4px;border-radius:0 3px 3px 0;background:linear-gradient(90deg,#5a5361,#0c0d12)}
.phone-wallpaper{position:absolute;inset:0;background:radial-gradient(ellipse at 90% 86%,#8f69c287,transparent 48%),radial-gradient(ellipse at 5% 4%,#a796c43d,transparent 42%)}
.phone-orbit{position:absolute;border-radius:50%;border:1px solid #d4b9ff32;box-shadow:inset 12px 0 36px #b294d821;transform:rotate(-25deg)}.orbit-one{width:380px;height:520px;left:-225px;top:30px}.orbit-two{width:335px;height:510px;left:90px;top:144px;border-width:18px;border-color:#a786d424;filter:blur(1px)}
.phone-lock{position:relative;z-index:2;display:flex;align-items:center;flex-direction:column;padding-top:61px;color:#f5efd9}.phone-lock img{width:50px;height:50px;filter:drop-shadow(0 5px 7px #11121a55)}.phone-lock>span{font:500 11px/1.5 Parcel,Arial,sans-serif;letter-spacing:.16em;margin-top:11px;color:#dbd0e8}.phone-lock strong{font:500 27px/1.14 Parcel,Arial,sans-serif;letter-spacing:-.025em;margin-top:8px}.phone-home-bar{position:absolute;bottom:10px;left:32%;right:32%;height:4px;border-radius:5px;background:#eee6f18a}
.track-phone-figure .parcel-notifications{list-style:none;padding:0;margin:0;position:absolute;inset:0;line-height:1.4}
.parcel-notification{--arrival:1;position:absolute;display:flex;align-items:center;gap:12px;width:calc(100% - 20px);max-width:367px;min-height:96px;padding:15px 17px;border-radius:21px;text-align:left;color:#302d39;background:linear-gradient(128deg,#fffdf4fa,#eeebedee);border:1px solid #ffffffe0;box-shadow:0 2px 1px #ffffff5c inset,0 -2px 0 #c7bfd966 inset,0 12px 26px #0c0b174d,0 3px 5px #0c0b171a;backdrop-filter:blur(15px);transform-origin:50% 70%;will-change:transform,opacity}
.notification-1{top:230px;left:-6px;transform:rotate(-2deg);z-index:3}.notification-2{top:336px;right:-5px;transform:rotate(1deg);z-index:4}.notification-3{top:442px;left:10px;transform:rotate(-1deg);z-index:5}
.notification-icon{display:grid;place-items:center;flex:0 0 39px;height:39px;border-radius:12px;background:linear-gradient(140deg,#e6def5,#bba6dd);box-shadow:inset 0 1px 1px #fff,0 2px 5px #75608d30}.notification-icon img{width:32px;height:32px}.notification-icon svg{width:24px;height:24px;fill:none;stroke:#564173;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.notification-copy{min-width:0;display:grid;gap:3px}.notification-source{font:500 10px/1.2 Parcel,Arial,sans-serif;letter-spacing:.11em;color:#746780}.notification-copy strong{font:600 16px/1.3 Parcel,Arial,sans-serif;letter-spacing:-.025em}.notification-detail{font:400 13px/1.35 Arial,sans-serif;color:#655e70}
.track-phone-figure figcaption{font:400 12px/1.5 Parcel,Arial,sans-serif;color:var(--muted);margin:4px 0 1px}.phone-motion-toggle{font-size:12px;min-height:32px;padding:4px 0;color:var(--muted)}
@media(min-width:901px) and (max-width:1190px){.parcel-phone{width:242px;height:496px}.track-phone-scene{height:550px}.parcel-notification{padding:13px 12px;gap:9px}.notification-copy strong{font-size:14px}.notification-1{top:215px}.notification-2{top:316px}.notification-3{top:417px}}
@media(max-width:900px){.track-phone-figure{max-width:490px;margin-left:auto;margin-right:auto}.parcel-phone{transform:translateX(-47%) rotateX(3deg) rotateY(-6deg) rotateZ(-3deg)}}
@media(max-width:600px){.track-phone-scene{height:554px}.parcel-phone{width:254px;height:506px;top:14px;left:50%;border-radius:43px}.phone-rim{border-radius:40px;padding:8px}.phone-screen{border-radius:32px}.notification-1{left:0;top:216px}.notification-2{right:0;top:319px}.notification-3{left:5px;top:422px}.parcel-notification{width:calc(100% - 6px);min-height:94px;padding:13px 12px;gap:10px;border-radius:18px}.notification-copy strong{font-size:15px}.notification-detail{font-size:12px}.notification-source{font-size:10px}.notification-icon{flex-basis:35px;height:35px;border-radius:10px}.phone-aura{inset:20px -8px 15px}}
@media(max-width:350px){.track-phone-scene{height:531px}.parcel-phone{width:224px;height:479px;top:12px;border-radius:39px;left:49%}.phone-rim{border-radius:36px;padding:7px}.phone-screen{border-radius:29px}.phone-lock{padding-top:56px}.phone-lock strong{font-size:24px}.phone-lock img{width:43px;height:43px}.phone-lock>span{font-size:10px}.phone-camera{height:19px;width:70px}.phone-camera i{top:5px;width:9px;height:9px}.notification-1{top:197px}.notification-2{top:298px}.notification-3{top:399px}.parcel-notification{padding:12px 10px;gap:8px;min-height:93px}.notification-copy strong{font-size:14px}.notification-icon{flex-basis:32px;height:32px}.notification-icon img{width:29px;height:29px}.notification-detail{font-size:12px}.phone-aura{inset:20px 0 15px}}
@media(prefers-reduced-motion:reduce){.parcel-phone,.parcel-notification{will-change:auto}.parcel-notification{opacity:1!important}}
.phone-lock{padding-top:52px}.phone-lock img{width:46px;height:46px}.phone-lock>span{margin-top:8px}.phone-lock strong{font-size:25px;margin-top:6px}.notification-source{font-size:12px;letter-spacing:.07em}
@media(max-width:350px){.phone-lock{padding-top:45px}.phone-lock img{width:40px;height:40px}.phone-lock strong{font-size:23px}.notification-source{font-size:11px}}
.phone-motion-toggle{display:none}.track-phone-figure[data-phone-ready="true"] .phone-motion-toggle{display:inline-block}