@font-face{font-family:Lilita;src:url('/assets/lilita-latin.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Nunito;src:url('/assets/nunito-latin.woff2') format('woff2');font-style:normal;font-weight:500;font-display:swap}
:root{color-scheme:dark;background:#050b12;color:#f3f0ff;font-family:Nunito,Arial,sans-serif;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:calc(12px + env(safe-area-inset-top,0px)) max(0px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(0px,env(safe-area-inset-left,0px));background:radial-gradient(ellipse at 50% 68%,#19202944,transparent 57%),radial-gradient(ellipse at 50% 27%,#11142777,transparent 42%),#050b12;-webkit-tap-highlight-color:transparent}
.landing{position:relative;width:min(100%,440px,calc((100vh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) * .510204));width:min(100%,440px,calc((100dvh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) * .510204));aspect-ratio:750/1470;container-type:inline-size;isolation:isolate;transition:opacity .22s ease,transform .22s ease}
.artwork{position:absolute;background-image:url('/assets/taikita-artwork.webp');background-repeat:no-repeat}
/* Reuse the supplied art as a CSS atlas: no phone frame or browser chrome is shown. */
.mascot{left:36.267%;top:.068%;width:27.2%;aspect-ratio:204/190;background-size:432.353% auto;background-position:49.8525% 12.1783%;mask-image:radial-gradient(ellipse,#000 52%,transparent 74%);animation:mascot-float 6s ease-in-out infinite}
.wordmark{margin:0;left:10%;top:12.245%;width:80%;aspect-ratio:600/171;background-size:147% auto;background-position:50% 23.13896%;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(transparent,#000 12%,#000 83%,transparent);mask-composite:intersect;animation:brand-breathe 7s ease-in-out infinite}
.tagline{z-index:2;left:6.667%;top:24.08%;width:87.2%;aspect-ratio:654/65;margin:0;background-size:134.8624% auto;background-position:50.4386% 31.8393%;mask-image:linear-gradient(transparent,#000 15%,#000 83%,transparent),linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-composite:intersect}
.description{position:absolute;z-index:2;top:29.83%;width:100%;margin:0;text-align:center;font-size:5.6cqw;line-height:1.32;font-weight:500;letter-spacing:0;color:#e4e2ed;text-shadow:0 1px 3px #0009}
.bathroom{left:0;top:36.87%;width:100%;aspect-ratio:750/650;background-size:117.6% auto;background-position:49.2424% 64.872%;mask-image:linear-gradient(transparent,#000 12%,#000 95%,transparent)}
.start-button{z-index:3;left:6.533%;top:80.68%;width:87.2%;aspect-ratio:654/183;border:0;border-radius:999px;cursor:pointer;touch-action:manipulation;padding:0;background-color:#ffc83f;background-size:134.8624% auto;background-position:50% 86.1875%;box-shadow:0 5px 0 #b9631633,0 8px 30px #ed8d1238;transition:transform .14s ease,box-shadow .14s ease;overflow:hidden;isolation:isolate}
.start-button:active{transform:scale(.97);box-shadow:0 2px 0 #b9631622,0 4px 16px #ed8d1220;animation:none}
.start-button:focus-visible{outline:3px solid #fff4bc;outline-offset:7px}
.promise{position:absolute;top:96.2%;left:0;width:100%;margin:0;text-align:center;font-size:4.27cqw;line-height:1.25;white-space:nowrap;letter-spacing:.005em;color:#b5bbc9}
.accessible-text,.resource{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.splash{position:fixed;z-index:10;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#050b12;visibility:hidden;opacity:0;pointer-events:none}
.splash span{font:400 30px/1 Lilita,Arial,sans-serif;letter-spacing:1px;text-shadow:0 0 20px #b6a5f05c}
.is-loading .splash{visibility:visible;opacity:1}
.is-loading .landing{opacity:0;transform:scale(.992)}
.artwork-unavailable .wordmark,.artwork-unavailable .tagline,.artwork-unavailable .start-button{background-image:none;mask-image:none;display:grid;place-items:center}
.artwork-unavailable .accessible-text{position:static;width:auto;height:auto;margin:0;clip-path:none;overflow:visible;font-family:Lilita,Arial,sans-serif}
.artwork-unavailable .wordmark{font-size:18cqw;text-shadow:0 3px #ba95ec,0 0 24px #9274eb}
.artwork-unavailable .tagline{font-size:6cqw;white-space:nowrap}
.artwork-unavailable .start-button{font-size:6.3cqw;color:#11171b;background:linear-gradient(#ffdf5c,#ffb929)}
@keyframes mascot-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes brand-breathe{0%,100%{filter:brightness(1)}50%{filter:brightness(1.035)}}
/* Landing-only light: gradients are painted once; only opacity/transform move. */
.bathroom::before,.bathroom::after,.start-button::before,.start-button::after{content:"";position:absolute;pointer-events:none;opacity:0}
.bathroom::before{left:33%;top:54.5%;width:34%;height:15%;border-radius:50%;background:radial-gradient(ellipse,#fff4bdd9 0%,#ffd56899 28%,#ffb84033 52%,transparent 72%)}
.bathroom::after{left:22%;top:87%;width:57%;height:12%;background:radial-gradient(ellipse,#ffd07955,transparent 70%)}
.start-button::before{inset:0 auto 0 0;width:40%;background:linear-gradient(105deg,transparent,#fff9d466,transparent);transform:translateX(-140%) skewX(-16deg)}
.start-button::after{inset:0;border-radius:inherit;box-shadow:inset 0 0 18px 3px #fff0a88c;background:linear-gradient(transparent,#fff3b31f)}
[data-app-state="landing"]:not(.is-loading) .bathroom::before{animation:toilet-light 5.8s ease-in-out infinite}
[data-app-state="landing"]:not(.is-loading) .bathroom::after{animation:toilet-reflection 5.8s ease-in-out infinite}
[data-app-state="landing"]:not(.is-loading) .start-button:not(:disabled)::before{animation:button-welcome-shine 1100ms 900ms ease-in-out both}
[data-app-state="landing"]:not(.is-loading) .start-button:not(:disabled)::after{animation:button-gentle-reminder 1000ms 8s ease-in-out both}
@keyframes toilet-light{0%,100%{opacity:.35;transform:scale(.94)}45%{opacity:.9;transform:scale(1.05)}}
@keyframes toilet-reflection{0%,100%{opacity:.12;transform:scaleX(.96)}45%{opacity:.4;transform:scaleX(1.05)}}
@keyframes button-welcome-shine{0%{opacity:0;transform:translateX(-140%) skewX(-16deg)}20%,75%{opacity:.85}100%{opacity:0;transform:translateX(350%) skewX(-16deg)}}
@keyframes button-gentle-reminder{0%,100%{opacity:0}50%{opacity:.72}}
/* Twelve fixed light motes: no emitter, JavaScript timers, images or frame loop. */
.toilet-motes{position:absolute;inset:0;pointer-events:none}
.toilet-motes span{position:absolute;left:49%;top:61.5%;width:calc(var(--size,1.65cqw) * 1.25);aspect-ratio:1;border-radius:50%;opacity:0;background:radial-gradient(circle at 35% 30%,#fffbd3 0 14%,#ffe269 38%,#ffc225 66%,#d98305 100%);box-shadow:0 0 6px #ffde52b3,0 0 14px 3px #ffbd3480;--rise:33cqw;--drift:0cqw;--flight:4.2s;--delay:0s}
.toilet-motes span:nth-child(1){left:44%;--drift:-3cqw;--rise:35cqw;--delay:-.2s;--size:1.9cqw}
.toilet-motes span:nth-child(2){left:51%;--drift:2cqw;--rise:31cqw;--delay:-1.5s;--flight:3.8s}
.toilet-motes span:nth-child(3){left:56%;--drift:3.5cqw;--rise:37cqw;--delay:-2.8s;--flight:4.6s;--size:1.4cqw}
.toilet-motes span:nth-child(4){left:47%;--drift:-1.5cqw;--rise:30cqw;--delay:-3.3s;--flight:4.1s;--size:2.1cqw}
.toilet-motes span:nth-child(5){left:53%;--drift:-2cqw;--rise:39cqw;--delay:-.9s;--flight:4.8s;--size:1.3cqw}
.toilet-motes span:nth-child(6){left:42%;--drift:1cqw;--rise:32cqw;--delay:-2.1s;--flight:4.5s}
.toilet-motes span:nth-child(7){left:49%;--drift:3cqw;--rise:36cqw;--delay:-3.8s;--flight:4.7s;--size:1.9cqw}
.toilet-motes span:nth-child(8){left:57%;--drift:-1cqw;--rise:29cqw;--delay:-.6s;--flight:3.9s;--size:1.35cqw}
.toilet-motes span:nth-child(9){left:45%;--drift:-4cqw;--rise:38cqw;--delay:-2.5s;--flight:4.9s;--size:1.5cqw}
.toilet-motes span:nth-child(10){left:52%;--drift:4cqw;--rise:34cqw;--delay:-3.7s;--flight:4.4s;--size:2cqw}
.toilet-motes span:nth-child(11){left:48%;--drift:1cqw;--rise:28cqw;--delay:-1.2s;--flight:3.7s;--size:1.45cqw}
.toilet-motes span:nth-child(12){left:54%;--drift:-3cqw;--rise:36cqw;--delay:-2s;--flight:4.3s;--size:1.8cqw}
[data-app-state="landing"]:not(.is-loading) .toilet-motes span{animation:toilet-mote-rise var(--flight) linear var(--delay) infinite}
@keyframes toilet-mote-rise{0%{opacity:0;transform:translate3d(0,0,0) scale(.45)}12%,62%{opacity:1}100%{opacity:0;transform:translate3d(var(--drift),calc(var(--rise) * -1 - 8cqw),0) scale(1.15)}}
@media(orientation:landscape) and (max-height:500px){body{min-height:640px}.landing{width:min(100%,310px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}