*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Arial,sans-serif;background:#103d46;color:#fff}.scene{height:100svh;width:100%;overflow:hidden;position:relative;background:#123c46}.ocean{position:absolute;width:100%;height:100%;object-fit:cover;object-position:58% center;animation:drift 36s ease-in-out infinite alternate;transform:scale(1.07)}.scene:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,25,32,.1),transparent 45%,rgba(0,25,32,.25));pointer-events:none}.wordmark{position:absolute;z-index:1;top:32px;left:36px;margin:0;font-size:22px;font-weight:600;letter-spacing:-1px;text-shadow:0 1px 12px #174c5460}.egg{position:absolute;z-index:2;right:max(22px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));width:44px;height:44px;display:grid;place-items:center;color:#fff;opacity:.48;border-radius:50%;transition:opacity .3s,background .3s}.egg:hover,.egg:focus-visible{opacity:1;background:#ffffff1c;outline:1px solid #ffffff80}.egg svg{width:23px;height:23px}.signin{min-height:100svh;display:grid;place-items:center;padding:24px;background:linear-gradient(#0a293a66,#0a293a99),url('/welcome/surf.jpg') 58% center/cover}.panel{width:min(100%,390px);padding:36px;background:#fcfaf5;color:#203d42;border-radius:18px;box-shadow:0 20px 80px #062a3b44}.panel h1{font-size:26px;margin:0 0 12px;letter-spacing:-1px}.panel p{font-size:14px;line-height:1.5}.panel label{display:block;font-size:13px}.panel input{display:block;width:100%;margin-top:8px;padding:12px;border:1px solid #ccd6d3;border-radius:7px;font-size:16px;background:white}.panel button{width:100%;border:0;border-radius:7px;background:#14545b;color:white;font-size:15px;padding:13px;cursor:pointer}.back{display:inline-block;color:#52706e;text-decoration:none;margin-top:22px;font-size:13px}@keyframes drift{from{transform:scale(1.07) translate(-.6%,.4%)}to{transform:scale(1.12) translate(.6%,-.4%)}}@media(prefers-reduced-motion:reduce){.ocean{animation:none;transform:scale(1.02)}}@media(max-width:600px){.wordmark{top:24px;left:24px}.ocean{object-position:60% center}}
