@charset "UTF-8";
:root{color-scheme:dark;--mx:0;--my:0;--light-x:50%;--light-y:35%}
*{box-sizing:border-box}html,body{margin:0;min-width:280px;min-height:100%;background:#102e36}body{min-height:100svh;overflow-x:hidden;color:#fff4dc;font-family:"Arial Rounded MT Bold","Segoe UI",system-ui,sans-serif;isolation:isolate}
.universe{position:fixed;inset:0;overflow:hidden;z-index:-1;background:radial-gradient(ellipse at var(--light-x) var(--light-y),#326b69 0,transparent 44%),radial-gradient(ellipse at 12% 85%,#283e63 0,transparent 55%),linear-gradient(145deg,#10343c,#143a40 48%,#19263d)}
.universe:after{content:"";position:absolute;inset:0;opacity:.14;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23ffffff' opacity='.2' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");pointer-events:none}
.aurora{position:absolute;width:75vw;height:75vw;border-radius:50%;filter:blur(65px);opacity:.16;animation:aurora 22s ease-in-out infinite alternate}.aurora-one{background:#51d9a5;top:-60vw;left:0}.aurora-two{background:#b395e3;right:-55vw;bottom:-36vw;animation-delay:-10s}
.moon{position:absolute;border-radius:50%;box-shadow:inset -13px -12px 26px #10282f55,0 0 35px #dbaf8055;transform:translate(calc(var(--mx)*-12px),calc(var(--my)*-10px));transition:transform .2s ease-out}.moon-one{width:65px;height:65px;left:12%;top:22%;background:radial-gradient(circle at 30% 25%,#f9dc9f,#dc9a70 65%,#a65d66)}.moon-two{width:24px;height:24px;right:17%;top:39%;background:radial-gradient(circle at 25% 25%,#e9dfae,#99bf95 60%,#507c76)}
.land{position:absolute;width:115vw;height:42vh;border-radius:50% 55% 0 0;bottom:-31vh;box-shadow:inset 0 3px 0 #aacfa116,0 -20px 100px #10353844}.land-back{left:-45vw;transform:rotate(11deg);background:linear-gradient(135deg,#36716b,#173943)}.land-front{right:-55vw;bottom:-29vh;transform:rotate(-15deg);background:linear-gradient(155deg,#64757e,#253849 65%)}
.mote{position:absolute;width:3px;height:3px;border-radius:50%;background:#e8d79b;box-shadow:0 0 10px 2px #ffe4a844;opacity:.45;animation:drift var(--duration) ease-in-out infinite alternate;animation-delay:var(--delay)}
main{min-height:100svh;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:28px 22px 60px;outline:none}main:focus-visible h1{outline:2px solid #f3d4a5;outline-offset:16px;border-radius:8px}
.encounter{position:relative;width:min(540px,82vw);aspect-ratio:1;flex-shrink:0;touch-action:pan-y;user-select:none;--hop:0px}
.portal{position:absolute;inset:13% 7% 7%;border-radius:50%;background:conic-gradient(from 25deg,#e9c28c,#77b9a1,#d3dfb1,#e5b8a0,#e9c28c);box-shadow:0 0 0 1px #f1d5a44d,0 0 0 13px #f0d9ac05,0 0 80px #d7c08e20;transform:translate(calc(var(--mx)*-7px),calc(var(--my)*-6px));animation:halo 7s ease-in-out infinite}
.portal-inner{position:absolute;inset:2px;border-radius:inherit;background:radial-gradient(circle at 45% 35%,#f6dfb1,#d2d0a1 50%,#8eb5a0 77%,#487f79);box-shadow:inset 0 0 45px #ffebc480}
.portal:after{content:"";position:absolute;inset:-20px;border:1px solid #c7ddbf20;border-radius:50%;border-left-color:#decb9e70;border-bottom-color:transparent;transform:rotate(-25deg)}
.plinth{position:absolute;width:60%;height:8%;left:20%;bottom:10%;border-radius:50%;background:radial-gradient(ellipse,#133e3b85 0,#234c4e70 35%,transparent 70%);filter:blur(8px);transform:translate(calc(var(--mx)*8px),0)}
.mascot-track{position:absolute;inset:-2%;transform:translate(calc(var(--mx)*12px),calc(var(--my)*7px)) rotate(calc(var(--mx)*2.5deg));transition:transform .16s ease-out;transform-origin:50% 75%}
.mascot-float{width:100%;height:100%;animation:float 5s ease-in-out infinite}.mascot{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 18px #17353035);-webkit-user-drag:none;transform-origin:50% 82%}
.encounter.is-awake .mascot{animation:hop .8s cubic-bezier(.22,.8,.3,1)}.ripple{position:absolute;left:25%;right:25%;height:10%;bottom:8%;border-radius:50%;border:2px solid #f7dfae;opacity:0}.is-awake .ripple{animation:ripple .95s ease-out}
h1{margin:-8px 0 0;text-align:center;font-weight:900;position:relative;z-index:2;text-shadow:0 5px 22px #10283160}.name{display:block;font-size:clamp(56px,7.3vw,98px);letter-spacing:-.065em;line-height:1.08;color:#fff0d4}.promise{display:block;margin-top:12px;font-size:clamp(20px,2.4vw,28px);letter-spacing:.035em;font-weight:500;color:#c5ded1}
.sparkles{position:absolute;inset:0;pointer-events:none}.spark{position:absolute;left:50%;top:55%;width:7px;height:7px;border-radius:50%;background:var(--color);box-shadow:0 0 15px var(--color);animation:spark .95s ease-out forwards}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}@keyframes halo{0%,100%{filter:brightness(1)}50%{filter:brightness(1.07)}}@keyframes hop{0%,100%{transform:translateY(0) scale(1)}18%{transform:translateY(5px) scale(1.035,.965)}48%{transform:translateY(-32px) rotate(-3deg) scale(.98,1.02)}75%{transform:translateY(0) scale(1.025,.975)}}@keyframes ripple{10%{opacity:.5;transform:scale(.6)}100%{opacity:0;transform:scale(2.6)}}@keyframes spark{0%{opacity:0;transform:translate(0,0) scale(.3)}15%{opacity:.9}100%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(.3)}}@keyframes drift{to{transform:translate(12px,-25px);opacity:.08}}@keyframes aurora{to{transform:translate(5%,12%) scale(1.12)}}
@media(min-width:800px) and (max-height:850px){.encounter{width:min(470px,58svh)}main{padding:15px 20px 35px}.name{font-size:78px}}
@media(max-width:600px){main{padding:24px 18px 65px}.encounter{width:min(480px,94vw)}.moon-one{width:32px;height:32px;left:5%;top:14%}.moon-two{right:8%;top:72%;width:18px;height:18px}h1{margin-top:0}.promise{margin-top:14px}.portal:after{inset:-12px}.land{height:35vh;bottom:-24vh}.land-front{bottom:-23vh}}
@media(max-height:520px) and (min-width:600px){main{flex-direction:row;gap:40px;padding:20px}.encounter{width:70svh}.name{font-size:clamp(48px,8vw,75px)}.promise{font-size:21px}h1{text-align:left}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.mascot-track,.portal,.moon,.plinth{transform:none!important}.sparkles,.ripple{display:none}.encounter.is-awake .portal-inner{filter:brightness(1.08)}}