#technology .dev-webapp{grid-template-columns:290px minmax(0,1fr);gap:45px}
#technology .app-scene{width:290px;height:320px;aspect-ratio:auto;position:relative;display:block;background:radial-gradient(ellipse at 60% 48%,#f0442514,transparent 70%)}
.app-phone{position:absolute;left:99px;top:2px;width:163px;height:282px;border:2px solid #756052;border-radius:27px;padding:8px;background:#191512;box-shadow:14px 18px 40px #0006;transform:rotate(5deg)}
.app-speaker{position:absolute;left:57px;top:9px;width:47px;height:12px;border-radius:12px;background:#191512;z-index:4}
.app-phone-screen{position:relative;height:100%;overflow:hidden;border-radius:19px;background:linear-gradient(155deg,#3b2318,#151110 70%)}
.app-home{position:absolute;inset:0;padding:28px 12px;color:#fff}.app-clock{display:block;font-size:30px;font-weight:600;letter-spacing:-.05em;text-align:center}.app-home-icons{display:flex;gap:9px;justify-content:center;margin-top:18px}.app-home-icons i{width:21px;height:21px;border-radius:6px;background:#e4b89516;border:1px solid #cf997722}
.app-installed{width:46px;height:46px;margin:19px auto 0;background:#f01f01;border-radius:12px;box-shadow:0 5px 18px #f01f0130;color:white;display:grid;place-items:center}.app-installed svg{width:32px;height:32px}.app-icon-name{display:block;text-align:center;font-size:10px;margin-top:7px;color:#e6c7b2}.app-home-bar{position:absolute;bottom:13px;left:56px;width:49px;height:3px;border-radius:3px;background:#dbcdc075}
.app-browser{position:absolute;left:0;top:85px;width:135px;border:1px solid #987152;border-radius:10px;background:#1c1713;box-shadow:5px 10px 20px #0007;transform:rotate(-7deg);z-index:5;overflow:hidden}
.app-browser-bar{display:flex;gap:4px;padding:9px;border-bottom:1px solid #ffffff14}.app-browser-bar i{width:3px;height:3px;border-radius:50%;background:#b7947a}.app-browser-lines{padding:12px}.app-browser-lines b,.app-browser-lines i{display:block;height:3px;background:#c4a78d5c;width:66%;margin-bottom:6px}.app-browser-lines b{height:6px;background:#e2c3a8;width:78%}.app-browser-lines span{display:block;width:36px;height:11px;border-radius:3px;background:#f04425;margin-top:10px}.app-add{display:block;background:#302117;border-top:1px solid #98715240;color:#f3d0b3;font-size:10px;text-align:center;padding:8px 3px}
.app-tap{position:absolute;left:58px;top:141px;width:34px;height:34px;border:2px solid #ffd2b7;border-radius:50%;opacity:0}
.app-open-screen{position:absolute;inset:0;padding:32px 12px 15px;background:#171310;opacity:0;transform:scale(.8)}.app-mini-brand{font-size:7px;letter-spacing:.07em;color:#cdb9a8;display:flex;gap:5px;align-items:center}.app-mini-brand i{width:6px;height:6px;background:#f01f01;border-radius:50%}.app-open-screen strong{display:block;font-size:17px;line-height:1.12;letter-spacing:-.035em;margin-top:17px;color:#fff}.app-open-screen em{color:#ff6748;font-style:normal}.app-mini-image{height:57px;margin:13px 0;background:radial-gradient(circle,#a7391e,#291810 70%);border:1px solid #a66b473d;border-radius:7px;display:grid;place-items:center;color:#ffcbaa;font-size:32px}.app-mini-products{display:flex;gap:5px}.app-mini-products i{height:24px;flex:1;background:#bc8d6815;border:1px solid #bc8d6833;border-radius:4px}.app-mini-button{display:block;background:#f01f01;text-align:center;color:white;font-size:8px;padding:7px 0;border-radius:4px;margin-top:10px}
#technology .app-scene-note{position:absolute;bottom:0;left:0;right:0;height:22px;text-align:center;font-size:12px;color:#c2a48e}.app-scene-note span{position:absolute;inset:0}.app-note-open{opacity:0}
@keyframes app-browser-cycle{0%,18%{opacity:1;transform:rotate(-7deg) translate(0,0)}30%,85%{opacity:0;transform:rotate(0) translate(72px,15px) scale(.4)}94%,100%{opacity:1;transform:rotate(-7deg)}}
@keyframes app-open-cycle{0%,43%,92%,100%{opacity:0;transform:scale(.8)}51%,83%{opacity:1;transform:scale(1)}}
@keyframes app-tap-cycle{0%,32%,49%,100%{opacity:0;transform:scale(1.3)}38%{opacity:1;transform:scale(.8)}45%{opacity:0;transform:scale(1.4)}}
@keyframes app-note-cycle{0%,44%,94%,100%{opacity:0}52%,84%{opacity:1}}
@keyframes app-note-inverse{0%,44%,94%,100%{opacity:1}52%,84%{opacity:0}}
@media(prefers-reduced-motion:no-preference){html:not([data-motion="off"]) .dev-webapp.is-in-view .app-browser{animation:app-browser-cycle 9s ease-in-out infinite}html:not([data-motion="off"]) .dev-webapp.is-in-view .app-open-screen{animation:app-open-cycle 9s ease-in-out infinite}html:not([data-motion="off"]) .dev-webapp.is-in-view .app-tap{animation:app-tap-cycle 9s ease-in-out infinite}html:not([data-motion="off"]) .dev-webapp.is-in-view .app-note-open{animation:app-note-cycle 9s ease-in-out infinite}html:not([data-motion="off"]) .dev-webapp.is-in-view .app-note-install{animation:app-note-inverse 9s ease-in-out infinite}}
@media(max-width:900px){#technology .dev-webapp{grid-template-columns:1fr;gap:24px}#technology .app-scene{justify-self:center}}
@media(max-width:400px){#technology .app-scene{width:260px}.app-phone{left:85px}}