*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;background:#d9dbe0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:white}.stage{display:flex;flex-direction:column;align-items:center;gap:15px}.phone{width:348px;height:734px;padding:7px;border-radius:58px;background:linear-gradient(130deg,#555,#080809 40%,#333);box-shadow:0 28px 55px #1c1c2235}.screen{height:100%;position:relative;overflow:hidden;border-radius:51px;background:#17191c;isolation:isolate}.wallpaper{position:absolute;inset:0;z-index:-1;background:linear-gradient(#08090b25,#08090b35),url('https://images.unsplash.com/photo-1470770841072-f978cf4d019e?auto=format&fit=crop&w=1000&q=85') center/cover}.status{position:absolute;top:18px;left:36px;right:34px;display:flex;justify-content:space-between;font-size:12px;font-weight:700}.island{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:100px;height:29px;border-radius:20px;background:#030304}.date{position:absolute;top:82px;width:100%;text-align:center;font-size:14px}.time{position:absolute;top:96px;width:100%;text-align:center;font-size:66px;font-weight:300;letter-spacing:-3px}.notification{position:absolute;bottom:104px;left:12px;width:calc(100% - 24px);display:flex;align-items:center;gap:9px;padding:10px 12px;min-height:54px;text-align:left;border:1px solid #ffffff25;border-radius:20px;background:#73757bdc;color:white;backdrop-filter:blur(18px);cursor:pointer}.phoneIcon{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#58c56c;font-size:17px}.notification b,.notification small{display:block;font-size:11px;font-weight:400}.notification b{font-size:12px;margin-bottom:3px}.yesterday{margin-left:auto;align-self:flex-start}.lockActions{position:absolute;bottom:42px;left:22px;right:22px;display:flex;align-items:center;justify-content:space-between}.round{width:40px;height:40px;border:0;border-radius:50%;background:#ffffff45;color:white;font-size:18px;cursor:pointer}.round.on{background:#f5d76e;color:#222}.swipe{border:0;background:transparent;color:white;font-size:11px;font-weight:600;padding:12px 2px;cursor:pointer}.home{padding:78px 20px 20px;animation:appear .25s}.homeDate{font-size:10px;letter-spacing:2px}.home h2{font-size:25px;margin:10px 0}.sub{font-size:11px}.apps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 12px;margin:36px 0}.apps button{display:flex;flex-direction:column;align-items:center;gap:6px;border:0;background:transparent;color:white;font-size:10px;cursor:pointer}.apps i{width:49px;height:49px;border-radius:14px;display:grid;place-items:center;font-style:normal;font-size:25px;box-shadow:0 5px 12px #0002}.green{background:#4dc96c}.rainbow{background:linear-gradient(135deg,#f6cc4b,#ef6b55,#c65cbe,#5888ed)}.pink{background:linear-gradient(135deg,#f9b1c5,#b36da6)}.yellow{background:#fff2a6;color:#665d4b}.gray{background:#aeb5bf}.dock{position:absolute;bottom:30px;left:13px;right:13px;padding:10px;display:flex;justify-content:space-around;border:1px solid #ffffff35;border-radius:23px;background:#ffffff3a;backdrop-filter:blur(20px)}.dock button{width:43px;height:43px;border:0;border-radius:13px;background:#ffffff35;color:white;font-size:22px;cursor:pointer}.hidden{display:none!important}.app{position:absolute;inset:0;background:#fffafc;color:#443641;padding-top:49px;animation:appear .2s}.app header{height:46px;display:flex;align-items:center;gap:20px;padding:0 14px;border-bottom:1px solid #eee4e9}.app header button,.back{border:0;background:transparent;color:#ae6384;font-size:13px;cursor:pointer}.app header b{font-size:14px}.app #content{height:calc(100% - 50px);overflow:auto;padding:15px}.app h2{font-family:Georgia,serif}.chat{width:100%;display:flex;gap:10px;align-items:center;padding:13px 3px;border:0;border-bottom:1px solid #eee4e9;background:transparent;color:#443641;text-align:left;cursor:pointer}.chat span{font-size:12px}.chat small{display:block;color:#9b8793;margin-top:4px}.bubble{max-width:85%;margin:8px 0;padding:10px 12px;border-radius:15px;background:#f2e8ee;color:#443641;font-size:12px}.bubble.me{margin-left:auto;background:#dcefdc}.send{display:flex;gap:6px;margin-top:12px}.send input{min-width:0;flex:1;padding:10px;border:1px solid #e8dbe2;border-radius:12px}.send button,.like{border:0;border-radius:10px;padding:9px 11px;background:#b86f8e;color:white;cursor:pointer}.gallery{display:grid;grid-template-columns:1fr 1fr;gap:9px}.gallery img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px}.post{padding:13px 0;border-bottom:1px solid #eee4e9;color:#443641;font-size:12px}.post p{line-height:1.5}.note{width:100%;min-height:220px;background:#fffbe2;border:1px solid #eee2a5;padding:12px;font:14px/1.7 Georgia,serif}.camera{position:absolute;inset:0;background:#151515;display:flex;flex-direction:column;align-items:center;justify-content:space-around;padding:60px 15px 45px}.camera p{text-align:center;font-size:13px;line-height:1.7}.camera small{color:#aaa}.shutter{width:62px;height:62px;border:5px solid white;border-radius:50%;background:#eee;cursor:pointer}.camera #closeCamera{position:absolute;bottom:54px;left:18px;border:0;border-radius:10px;padding:8px 12px;background:#ffffff25;color:white}.homeBar{position:absolute;z-index:10;bottom:7px;left:50%;transform:translateX(-50%);width:108px;height:4px;border-radius:4px;background:white;cursor:pointer}.hint{color:#707177;font-size:11px;text-align:center}.hidden~.homeBar{display:block}@keyframes appear{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@media(max-width:500px){body{background:#08090b}.stage{width:100%;height:100dvh}.phone{width:100%;height:100dvh;padding:0;border-radius:0;box-shadow:none}.screen{border-radius:0}.hint{display:none}}