@font-face{font-family:Manrope;src:url('assets/fonts/Manrope-Medium.ttf') format('truetype');font-weight:400 500;font-display:swap}
@font-face{font-family:Manrope;src:url('assets/fonts/Manrope-Semibold.ttf') format('truetype');font-weight:600 800;font-display:swap}
:root{color-scheme:dark;--pink:#ff008a;--bottom:env(safe-area-inset-bottom,0px);--ease-smooth-out:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#000;color:#fff;font-family:Manrope,Arial,sans-serif}body{overflow:hidden}button{font:inherit}button:focus-visible{outline:2px solid #fff;outline-offset:5px}[hidden]{display:none!important}
.intro{position:fixed;inset:0;width:min(100%,480px);margin:auto;overflow:hidden;background:#000;z-index:10;transition:opacity .5s var(--ease-smooth-out),visibility .5s;transform-origin:50% 55%}
.intro.finished{opacity:0;visibility:hidden;pointer-events:none}
.poster{position:absolute;inset:0;overflow:hidden;user-select:none;pointer-events:none}
.piece{position:absolute;inset:0;width:100%;height:100%;opacity:0;--art-height:max(100dvh,calc(min(100vw,480px)*1.777778))}
.piece>img{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center bottom;visibility:hidden;-webkit-user-drag:none}
.piece>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hemisphere{clip-path:inset(calc(100% - var(--art-height)*.308) 0 0);transform:translate3d(0,36dvh,0);will-change:transform}
.running .hemisphere{animation:hemisphere-rise 1.65s .12s var(--ease-smooth-out) both}
@keyframes hemisphere-rise{0%{opacity:1;transform:translate3d(0,36dvh,0)}100%{opacity:1;transform:translate3d(0,0,0)}}
.wordmark{clip-path:inset(calc(100% - var(--art-height)*.548) 0 calc(var(--art-height)*.457));transform:translateY(-18dvh)}
.tagline{clip-path:inset(calc(100% - var(--art-height)*.447) 0 calc(var(--art-height)*.407));transform:translateY(-18dvh)}
.running .wordmark,.running .tagline{opacity:1}
.pen-stroke{stroke-dasharray:1;stroke-dashoffset:1}
.running .pen-stroke{animation:pen-write var(--duration) var(--delay) cubic-bezier(.4,0,.2,1) both}
@keyframes pen-write{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.ink-finish{opacity:0}.running .ink-finish{animation:ink-settle .2s 2.05s ease both}
@keyframes ink-settle{to{opacity:1}}
.tagline-ink{clip-path:inset(0 100% 0 0);opacity:0}.running .tagline-ink{animation:tagline-write .7s 1.45s var(--ease-smooth-out) both}
@keyframes tagline-write{to{clip-path:inset(0 0 0 0);opacity:1}}
.loading{position:absolute;z-index:3;left:10%;right:10%;top:43%;max-width:248px;margin:auto;opacity:0;pointer-events:none}
.running .loading{animation:loading-in .5s .2s var(--ease-smooth-out) both}
@keyframes loading-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.loading-meta{display:flex;flex-direction:column-reverse;align-items:center;gap:19px;margin-bottom:22px}
.percent{display:flex;align-items:baseline;justify-content:center;gap:7px;font-size:clamp(78px,22vw,108px);line-height:1.05;letter-spacing:-.075em;font-weight:500;font-variant-numeric:tabular-nums;color:#fff}
.percent small{font-size:21px;font-weight:500;color:var(--pink);letter-spacing:-.03em}
.loading-label{font-size:13px;line-height:1.5;font-weight:500;color:#bcb4bc;letter-spacing:-.01em;text-align:center;-webkit-font-smoothing:antialiased}
.track{position:relative;height:6px;width:188px;margin:auto;border-radius:99px;background:#191519;isolation:isolate}
.track::before{content:'';position:absolute;inset:-10px -5px;border-radius:50%;background:radial-gradient(ellipse at center,#ff008a20,transparent 70%);z-index:-1;opacity:.7}
.track>div{position:relative;height:100%;width:100%;transform:scaleX(0);transform-origin:left center;border-radius:inherit;background:linear-gradient(90deg,#d90070 0%,#ff008a 65%,#ff6cb4 100%);box-shadow:0 0 6px #ff008a55,0 0 18px #ff008a25;overflow:hidden;will-change:transform}
.track>div::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,#ffffff60 50%,transparent 80%);transform:translateX(-100%)}
.holding .track>div::after{animation:bar-shimmer 1.05s ease-in-out infinite}
@keyframes bar-shimmer{to{transform:translateX(100%)}}
.app{height:100dvh;max-width:480px;margin:auto;position:relative;padding-top:env(safe-area-inset-top,0px)}
.empty-page{height:70vh}
.navbar{--active:0;position:absolute;bottom:calc(14px + max(var(--bottom),var(--tg-safe-area-inset-bottom,0px)));left:16px;right:16px;display:grid;grid-template-columns:repeat(4,1fr);gap:3px;padding:7px;border:1px solid #ffffff12;border-radius:30px;background:linear-gradient(160deg,#1d1b20e8,#111014f5);box-shadow:0 12px 40px #0009,inset 0 1px 0 #ffffff0a;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);isolation:isolate}
.nav-indicator{position:absolute;top:7px;bottom:7px;left:7px;width:calc((100% - 23px)/4);border-radius:23px;background:linear-gradient(150deg,#ff008a20,#ff008a0c);border:1px solid #ff4da225;box-shadow:inset 0 1px 0 #ffffff08;transform:translateX(calc(var(--active)* (100% + 3px)));transition:transform .38s var(--ease-smooth-out);z-index:-1}
.nav-item{position:relative;min-width:0;min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:0;border-radius:23px;background:transparent;color:#77737e;font-size:10px;font-weight:600;cursor:pointer;padding:6px 2px;transition:color .25s ease,transform .18s ease;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none}
.nav-item.active{color:#ff389d}.nav-item:active{transform:scale(.93)}.nav-item .rune-icon{width:23px;height:23px;transition:filter .25s ease}.nav-item.active .rune-icon{filter:drop-shadow(0 0 7px #ff008a24)}
.entered .navbar{animation:nav-enter .55s var(--ease-smooth-out) both}@keyframes nav-enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.rune-icon{display:inline-block;width:22px;height:22px;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
.error{position:absolute;inset:40% 20px auto;text-align:center;background:#000;padding:24px;z-index:5}.error button{background:var(--pink);color:#000;border:0;border-radius:12px;padding:12px 18px;cursor:pointer}
@media(max-height:650px){.loading{top:41%}.percent{font-size:76px}.loading-meta{gap:12px;margin-bottom:16px}.wordmark,.tagline{transform:translateY(-20dvh)}}
@media(prefers-reduced-motion:reduce){.running .hemisphere,.running .loading{animation:none;opacity:1;transform:none}.running .pen-stroke{animation:none;stroke-dashoffset:0}.running .ink-finish,.running .tagline-ink{animation:none;opacity:1;clip-path:none}.holding .track>div::after{animation:none}.intro{transition-duration:.15s}}

@media(prefers-reduced-motion:reduce){.nav-indicator,.nav-item,.nav-item .rune-icon{transition:none}.entered .navbar{animation:none}}
/* Quiet holding screen: one headline, one bounded interactive scene. */
.empty-page{position:relative;height:calc(100dvh - 108px - var(--bottom));min-height:360px;overflow:hidden;isolation:isolate}
.coming-copy{position:absolute;top:clamp(48px,12dvh,110px);left:30px;right:24px;z-index:2;pointer-events:none}
.coming-status{display:flex;align-items:center;gap:8px;color:#b399a6;font-size:8px;font-weight:600;letter-spacing:.16em}.coming-status i{width:5px;height:5px;background:var(--pink);border-radius:50%;box-shadow:0 0 10px #ff008a50;animation:status-breathe 3s ease-in-out infinite}
.coming-copy h1{font-size:clamp(34px,9.4vw,45px);line-height:1.12;letter-spacing:-.065em;font-weight:600;margin:23px 0 17px}.coming-copy h1 span{color:var(--pink)}.coming-copy p{font-size:13px;line-height:1.65;color:#8a818c;letter-spacing:-.015em;margin:0}
.entered .coming-copy{animation:copy-enter .75s .1s var(--ease-smooth-out) both}@keyframes copy-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes status-breathe{50%{opacity:.35}}
.bubble-field{position:absolute;left:18px;right:18px;top:46%;bottom:43px;min-height:180px}
.bubble{position:absolute;left:var(--x);top:var(--y);width:min(var(--size),24vw);height:min(var(--size),24vw);border-radius:50%;border:1px solid #ff5aac55;background:radial-gradient(circle at 28% 22%,#ffffff25 0%,#ff78bf15 15%,#ff008a06 43%,#fa007a25 78%,#ff429657 100%);box-shadow:inset -6px -8px 18px #ff008a18,inset 2px 2px 10px #ffffff08,0 10px 35px #ff008a08;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;animation:bubble-drift var(--duration) var(--phase) ease-in-out infinite;will-change:transform;transition:border-color .2s ease}
.bubble::before{content:'';position:absolute;top:14%;left:19%;width:28%;height:12%;border-radius:50%;background:#ffcee548;filter:blur(2px);transform:rotate(-32deg)}.bubble::after{content:'';position:absolute;inset:5px;border-radius:50%;border-top:1px solid #ffd4ec24;border-bottom:1px solid #ff008a20}.bubble:active{border-color:#ffc3e5}.bubble:focus-visible{outline-offset:7px}.bubble-2,.bubble-4{border-color:#ffffff25;background:radial-gradient(circle at 28% 20%,#ffffff26,#ffffff03 45%,#ffffff09 80%,#ffffff22)}
@keyframes bubble-drift{0%,100%{transform:translate3d(0,0,0) rotate(-4deg)}50%{transform:translate3d(7px,-23px,0) rotate(4deg)}}
.bubble-hint{position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:9px;color:#81717d;font-size:10px;letter-spacing:-.01em}.hint-line{width:15px;height:1px;background:#c22174}
.bubble-thought{position:absolute;z-index:6;width:220px;text-align:center;pointer-events:none;font-size:17px;font-weight:500;letter-spacing:-.035em;color:#ffe6f3;animation:thought-rise 2.1s ease both;text-shadow:0 2px 15px #000}
@keyframes thought-rise{0%{opacity:0;transform:translate(-50%,12px) scale(.97)}18%,72%{opacity:1;transform:translate(-50%,-8px) scale(1)}100%{opacity:0;transform:translate(-50%,-35px)}}
.bubble-ring{position:absolute;width:65px;height:65px;border:1px solid #ff80bf80;border-radius:50%;pointer-events:none;animation:ring-out .5s ease-out both}@keyframes ring-out{from{transform:translate(-50%,-50%) scale(.6);opacity:.8}to{transform:translate(-50%,-50%) scale(1.7);opacity:0}}
.positive-live{position:absolute;overflow:hidden;clip-path:inset(50%);width:1px;height:1px;white-space:nowrap}.paused .bubble{animation-play-state:paused}
@media(max-height:650px){.coming-copy{top:35px}.coming-copy h1{font-size:32px;margin:16px 0 10px}.coming-copy p{font-size:12px}.bubble-field{top:49%;bottom:36px}.bubble{width:min(var(--size),19vw);height:min(var(--size),19vw)}}
@media(prefers-reduced-motion:reduce){.bubble,.coming-status i,.entered .coming-copy{animation:none}.bubble-ring{display:none}.bubble-thought{animation:thought-quiet 2.1s ease both}@keyframes thought-quiet{0%,100%{opacity:0;transform:translateX(-50%)}15%,80%{opacity:1;transform:translateX(-50%)}}}
.bubble-spark{position:absolute;z-index:5;width:4px;height:4px;border-radius:50%;background:#ff72b6;pointer-events:none;box-shadow:0 0 6px #ff008a30}
.bubble:nth-of-type(even)::before{animation:glint-wander 5s ease-in-out infinite alternate}@keyframes glint-wander{to{opacity:.45;transform:translate(7px,3px) rotate(-15deg)}}
@media(prefers-reduced-motion:reduce){.bubble::before{animation:none!important}.bubble-spark{display:none}}