:root{--blue:#0A84FF;--teal:#30D5C8;--coral:#FF6B6B;}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;font-family:'Bricolage Grotesque',-apple-system,sans-serif;background:#05070f;overflow:hidden;user-select:none}
.mono{font-family:'JetBrains Mono',monospace}
.stage{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.45;animation:float 18s ease-in-out infinite}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,-40px) scale(1.2)}}
.phone{position:relative;width:390px;height:844px;border-radius:56px;padding:12px;background:linear-gradient(145deg,#3a3f4a,#15181f);box-shadow:0 40px 100px rgba(0,0,0,.7),inset 0 0 0 2px #555c6a}
.screen{position:relative;width:100%;height:100%;border-radius:46px;overflow:hidden;background:#000}
.sidebtn{position:absolute;right:-4px;top:200px;width:5px;height:80px;border-radius:3px;background:#4a505c;cursor:pointer}
@media (max-width:500px){.phone{width:100vw;height:100dvh;border-radius:0;padding:0;box-shadow:none;background:none}.screen{border-radius:0}.sidebtn,.outfoot{display:none}}
.wall{position:absolute;inset:0;overflow:hidden}
.wave{position:absolute;left:-50%;width:200%;height:60%;animation:sway 12s ease-in-out infinite}
@keyframes sway{0%,100%{transform:translateX(0)}50%{transform:translateX(12%)}}
.glass{background:rgba(255,255,255,.18);backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);border:1px solid rgba(255,255,255,.22)}
.glassd{background:rgba(20,24,35,.55);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.press{transition:transform .18s cubic-bezier(.3,1.6,.5,1)}.press:active{transform:scale(.88)}
.jiggle{animation:jig .28s ease-in-out infinite}
@keyframes jig{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
.appopen{animation:zoom .38s cubic-bezier(.2,1.2,.4,1)}
@keyframes zoom{from{transform:scale(.2);opacity:0;border-radius:60px}to{transform:scale(1);opacity:1}}
.slideup{transition:transform .5s cubic-bezier(.3,1.3,.5,1),opacity .5s}
.island{transition:all .45s cubic-bezier(.3,1.5,.5,1)}
.bar{animation:eq .8s ease-in-out infinite alternate}
@keyframes eq{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.tsunami{animation:tsu 2.4s ease-in-out}
@keyframes tsu{0%{transform:none}25%{transform:translate(80px,-40px) rotate(40deg)}50%{transform:translate(-90px,60px) rotate(-60deg)}75%{transform:translate(40px,120px) rotate(30deg)}100%{transform:none}}
.surf::after{content:'';position:absolute;inset:auto 0 0 0;height:80px;pointer-events:none;background:repeating-radial-gradient(circle at 50% 120%,rgba(48,213,200,.25) 0 10px,transparent 10px 22px);animation:sway 5s infinite}
.fill{animation:tide 2.2s ease-in-out forwards}
@keyframes tide{from{height:0}to{height:100%}}
input[type=range]{accent-color:#fff}
::-webkit-scrollbar{display:none}
.outfoot a{color:#30D5C8;font-size:12px}