.df-browser{background:#ffffff;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px rgba(4,16,51,.1),0 50px 100px -30px rgba(4,16,51,.55),0 24px 48px -24px rgba(4,16,51,.45)}.df-bar{height:36px;background:#f3f2ef;border-bottom:1px solid #e2e0da;display:flex;align-items:center;gap:7px;padding:0 14px;position:relative}.df-bar i{width:11px;height:11px;border-radius:50%;display:block;background:#28c840}.df-bar i:first-child{background:#ff5f57}.df-bar i:nth-child(2){background:#febc2e}.df-url{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(46%,300px);height:22px;border-radius:7px;background:#e6e4df;display:flex;align-items:center;justify-content:center;font:500 11.5px var(--font-work-sans),system-ui,sans-serif;color:#3a3f4b;white-space:nowrap;overflow:hidden}@media (max-width:760px){.df-url{width:70%}}.df-view{position:relative;aspect-ratio:16/10;overflow:hidden;background:#ffffff}.df-view img{object-fit:cover;object-position:50% 0}.df-scroll{aspect-ratio:16/11}.df-scroll img{animation:df-site-scroll 14s cubic-bezier(.65,0,.35,1) infinite}@keyframes df-site-scroll{0%,14%{object-position:50% 0}46%,60%{object-position:50% 100%}92%,to{object-position:50% 0}}@media (prefers-reduced-motion:reduce){.df-scroll img{animation:none}}.df-phone{position:relative;width:250px;flex:none;aspect-ratio:9/18.6;border-radius:15.5%/7.5%;padding:.64%;box-sizing:border-box;background:linear-gradient(160deg,#3a3d44,#1b1c20 22%,#26282e 55%,#141518);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 0 0 1px rgba(0,0,0,.6),0 50px 90px -30px rgba(0,0,0,.75),0 22px 40px -20px rgba(0,0,0,.55)}.df-bezel{border-radius:15%/7.25%;background:#000000;padding:1.04%;box-sizing:border-box}.df-bezel,.df-screen{width:100%;height:100%}.df-screen{position:relative;border-radius:14.2%/6.9%;overflow:hidden;background:#0f1f4a}.df-phone[data-safe=light] .df-screen{background:#f6f7fb}.df-phone[data-safe=white] .df-screen{background:#ffffff}.df-phone[data-safe=grey] .df-screen{background:#f7f7f8}.df-phone[data-safe=dim] .df-screen{background:#87888a}.df-shot{position:absolute;left:0;right:0;bottom:0;top:5.6%}.df-shot img{object-fit:cover;object-position:50% 0}.df-screen:after{content:"";position:absolute;inset:0;background:linear-gradient(118deg,rgba(255,255,255,.1),rgba(255,255,255,0) 30%);pointer-events:none}.df-island{position:absolute;top:1.5%;left:50%;transform:translateX(-50%);width:30%;height:3.6%;border-radius:999px;background:#000000;z-index:3}.df-key{position:absolute;width:1.4%;border-radius:2px;background:#2a2c31;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}.df-key.a{left:-1%;top:17%;height:4.5%}.df-key.u{left:-1%;top:25%;height:8%}.df-key.d{left:-1%;top:35%;height:8%}.df-key.p{right:-1%;top:28%;height:12%}