*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#090a0c;color:#f2f1e9}body{font-family:Arial,Helvetica,sans-serif}main{position:relative;width:100%;height:100%;height:100svh;isolation:isolate}#universe,.fallback,.grain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#universe{opacity:0;transition:opacity 1.5s}body.ready #universe{opacity:1}.fallback{display:grid;place-items:center;background:radial-gradient(ellipse at center,#1c2422 0,transparent 55%)}.fallback div{width:min(52vw,550px);aspect-ratio:1;border-radius:43% 57% 61% 39%;background:conic-gradient(from 30deg,#283838,#e0e8d5,#606b79,#c8b5d2,#212c2e,#d6f7ab,#283838);box-shadow:inset 30px -40px 70px #080b10;transform:rotate(-25deg);animation:liquid 14s ease-in-out infinite alternate}body.ready .fallback{opacity:0}h1{position:absolute;z-index:3;margin:0;left:50%;top:50%;transform:translate(-50%,-50%);font-size:clamp(36px,9.15vw,170px);font-weight:400;letter-spacing:-.075em;line-height:1;white-space:nowrap;mix-blend-mode:exclusion;user-select:none;animation:reveal 1.5s cubic-bezier(.16,1,.3,1) both}h1 span{font-weight:700}.grain{z-index:5;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.8' filter='url(%23n)'/%3E%3C/svg%3E")}.corner{position:absolute;width:13px;height:13px;border-color:#666b63;border-style:solid;opacity:.6}.top-left{left:32px;top:32px;border-width:1px 0 0 1px}.top-right{right:32px;top:32px;border-width:1px 1px 0 0}.bottom-left{left:32px;bottom:32px;border-width:0 0 1px 1px}.bottom-right{right:32px;bottom:32px;border-width:0 1px 1px 0}.mark{position:absolute;left:56px;top:53px;width:27px;height:27px}.mark i{position:absolute;left:13px;top:0;height:27px;width:1px;background:#d6f7ab}.mark i:nth-child(2){transform:rotate(60deg)}.mark i:nth-child(3){transform:rotate(-60deg)}.controls{position:absolute;right:55px;bottom:52px;display:flex;gap:10px;z-index:6}button{width:46px;height:46px;border:1px solid #ffffff26;border-radius:50%;color:#e1e6db;background:#14171965;backdrop-filter:blur(10px);display:grid;place-items:center;cursor:pointer;transition:background .3s,border-color .3s,transform .3s}button:hover{background:#d6f7ab;color:#111;border-color:#d6f7ab;transform:rotate(15deg)}button:focus-visible{outline:2px solid #d6f7ab;outline-offset:5px}button svg{width:21px;height:21px}.progress{position:absolute;left:56px;bottom:73px;display:flex;gap:7px}.progress i{height:3px;width:18px;background:#414740;transition:background .4s,width .4s}.progress i.active,.progress i:first-child{background:#d6f7ab}.progress i.active{width:34px}.progress:has(.active) i:not(.active){background:#414740}.cursor{position:absolute;top:0;left:0;width:9px;height:9px;border:1px solid #d6f7ab;border-radius:50%;pointer-events:none;z-index:9;opacity:0;transition:opacity .3s}body.paused .fallback div{animation-play-state:paused}@keyframes liquid{to{transform:rotate(35deg);border-radius:60% 40% 38% 62%}}@keyframes reveal{from{opacity:0;filter:blur(12px);transform:translate(-50%,-35%)}to{opacity:1;filter:blur(0);transform:translate(-50%,-50%)}}@media(max-width:600px){h1{font-size:9.5vw}.fallback div{width:80vw}.corner.top-left{left:18px;top:18px}.corner.top-right{right:18px;top:18px}.corner.bottom-left{left:18px;bottom:18px}.corner.bottom-right{right:18px;bottom:18px}.mark{left:35px;top:35px}.controls{right:34px;bottom:34px}.progress{left:35px;bottom:56px}.cursor{display:none}}@media(prefers-reduced-motion:reduce){h1,.fallback div{animation:none}*{transition:none!important}}