:root{--ink:#0b0e14;--ink-lift:#151b28;--white:#f4f6fb;--pink:#e91e63;--blue:#2196f3;--green:#8bc34a;--text:#f4f6fbc7;--muted:#f4f6fb99;--line:#f4f6fb24;--ring:#f4f6fbd9}html:has(body.landing){background:var(--ink);scroll-behavior:smooth}html.game-open{overflow:hidden}body.landing{background:var(--ink);color:var(--text);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;margin:0;font:400 1.0625rem/1.6 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow-x:clip}body.landing:after{content:"";z-index:100;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:fixed;inset:0}.landing *,.landing :before,.landing :after{box-sizing:border-box}.landing :where(h1,h2,h3,p,dl,dd,ol,ul,figure){margin:0}.landing :where(ol,ul){padding:0;list-style:none}.landing button{color:inherit;font:inherit;cursor:pointer;background:0 0;border:0;padding:0}.landing a{color:inherit}.landing :focus-visible{outline:2px solid var(--white);outline-offset:4px}.landing [hidden],html:not(.js) .needs-js{display:none}.sr-only{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.glow-defs{width:0;height:0;position:absolute;overflow:hidden}.caption{letter-spacing:.28em;text-transform:uppercase;color:var(--muted);font-size:.72rem;font-weight:700}.fine{color:var(--muted);font-size:.9rem}.wrap{width:min(1120px,100% - 40px);margin-inline:auto}.dot-text{width:calc(var(--cols) * var(--pitch,8px));vertical-align:middle;max-width:100%;line-height:0;display:inline-block}.dot-text svg{width:100%;height:auto;display:block;overflow:visible}.dot-text.wave .core{transform-box:fill-box;transform-origin:50%;animation:3.6s ease-in-out infinite dot-wave;animation-delay:calc(var(--c) * .11s - 14.4s)}@keyframes dot-wave{0%,to{transform:scale(1)}50%{transform:scale(1.22)}}[data-tilt] .dot-text.parallax .layer{transform:translate(calc(var(--tx,0) * var(--depth) * 2.2px), calc(var(--ty,0) * var(--depth) * 2.2px))}.store{border:2px solid var(--ring);color:var(--white);backdrop-filter:blur(8px);background:#151b28b8;border-radius:999px;align-items:center;gap:14px;padding:11px 24px 11px 18px;text-decoration:none;transition:transform .2s,box-shadow .3s;display:inline-flex}.store:hover{box-shadow:0 14px 40px -16px var(--pink), 0 14px 50px -20px var(--blue);transform:translateY(-2px)}.store-mark{flex:none;width:16px;height:28px}.store-text{text-align:left;display:grid}.store-small{letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-size:.66rem;font-weight:700;line-height:1.4}.store-big{font-size:1.15rem;font-weight:700;line-height:1.15}.store.large{gap:18px;padding:15px 34px 15px 24px}.store.large .store-mark{width:20px;height:35px}.store.large .store-big{font-size:1.45rem}.store.small{gap:10px;padding:8px 18px 8px 14px}.store.small .store-mark{width:12px;height:21px}.store.small .store-big{font-size:1rem}.store.soon{border-style:dashed;border-color:var(--muted);background:#151b2880}.store.soon:hover{box-shadow:none;transform:none}.store.soon .store-mark,.store.soon .store-big{opacity:.7}.store-mark.apple{aspect-ratio:5/6;width:auto}.stores{flex-wrap:wrap;justify-content:center;gap:12px 14px;display:flex}.stores.large{gap:14px 18px}.stores.small{gap:8px 10px}.topbar{z-index:2;padding:max(18px, env(safe-area-inset-top)) clamp(20px, 4vw, 40px) 0;justify-content:space-between;align-items:center;gap:16px;display:flex;position:absolute;inset:0 0 auto}.topbar .caption{white-space:nowrap}.topbar-link{text-decoration:none;transition:color .2s}@media (width<=420px){.topbar .caption{letter-spacing:.18em;font-size:.66rem}}@media (width<=360px){.topbar .caption{letter-spacing:.1em}}.topbar-link:hover,.topbar-get[open] .topbar-link{color:var(--white)}.topbar-get{position:relative}.topbar-get summary{cursor:pointer;list-style:none}.topbar-get summary::-webkit-details-marker{display:none}.topbar-get summary:after{content:"";border-bottom:2px solid;border-right:2px solid;width:.4em;height:.4em;margin-left:.6em;transition:transform .2s;display:inline-block;transform:translateY(-.2em)rotate(45deg)}.topbar-get[open] summary:after{transform:translateY(.05em)rotate(-135deg)}.topbar-menu{border:1.5px solid var(--line);backdrop-filter:blur(8px);background:#151b28eb;border-radius:16px;gap:2px;min-width:180px;margin:0;padding:8px;list-style:none;display:grid;position:absolute;top:calc(100% + 12px);right:0}.topbar-menu a,.topbar-menu span{color:var(--white);white-space:nowrap;border-radius:10px;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 12px;font-weight:700;text-decoration:none;display:flex}.topbar-menu a:hover{background:#f4f6fb14}.topbar-menu span{color:var(--muted)}.topbar-menu em{letter-spacing:.22em;text-transform:uppercase;font-size:.66rem;font-style:normal}.hero{isolation:isolate;place-items:center;min-height:100svh;padding:76px 20px 92px;display:grid;position:relative;overflow:hidden}.hero-light{z-index:-2;width:190vmax;height:190vmax;transform:translate(calc(var(--tx,0) * -36vw), calc(var(--ty,0) * -36vh));pointer-events:none;background:radial-gradient(closest-side,#ffffff13,#ffffff0f 15%,#ffffff09 35%,#ffffff03 60%,#fff0);margin:-95vmax 0 0 -95vmax;position:absolute;top:32%;left:50%}.hero-canvas{z-index:-1;width:100%;height:100%;position:absolute;inset:0}.hero-inner{text-align:center;flex-direction:column;align-items:center;gap:clamp(18px,3.4vh,34px);width:100%;display:flex}.hero-title{width:100%}.hero-title .dot-text{--pitch:clamp(4px, min(1.9vw, (100vw - 48px) / 47), 15px)}.hero-lede{max-width:24ch;color:var(--white);text-wrap:balance;font-size:clamp(1.2rem,2.2vw,1.55rem);line-height:1.35}.bowl{--bowl:clamp(190px, 29vh, 250px);width:var(--bowl);height:var(--bowl);position:relative}.bowl-canvas{pointer-events:none;width:190%;height:190%;position:absolute;inset:-45%}.bowl-button{border-radius:50%;place-items:center;display:grid;position:absolute;inset:0}.bowl-label{will-change:transform;line-height:0;display:block}.bowl-label .dot-text{--pitch:calc(var(--bowl) * .335 / 23)}.on-pointer{display:none}@media (hover:hover) and (pointer:fine){.on-touch{display:none}.on-pointer{display:inline}}.hero-best{opacity:.5}.hero-best .dot-text{--pitch:3.4px}.scroll-cue{bottom:max(22px, env(safe-area-inset-bottom));flex-direction:column;gap:7px;padding:10px;display:flex;position:absolute;left:50%;translate:-50%}.scroll-cue span{background:var(--white);opacity:.2;border-radius:50%;width:7px;height:7px;animation:1.8s ease-in-out infinite cue}.scroll-cue span:nth-child(2){animation-delay:.2s}.scroll-cue span:nth-child(3){animation-delay:.4s}@keyframes cue{0%,60%,to{opacity:.2;transform:none}30%{opacity:.9;transform:translateY(3px)}}.band{padding-block:clamp(80px,11vw,140px);position:relative}.section-title .dot-text{--pitch:clamp(4.5px, 1.05vw, 8px)}.section-lede{color:#f4f6fbdb;text-wrap:pretty;max-width:38ch;margin-top:20px;font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.45}.meet-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:clamp(40px,6vw,90px);display:grid}.meet-pet{justify-items:center;gap:14px;display:grid}.pet{aspect-ratio:1;border-radius:50%;width:min(100%,420px);display:block;position:relative}.pet:before{content:"";border:1.5px solid var(--line);background:radial-gradient(closest-side,#fff0 70%,#ffffff05 90%,#ffffff12);border-radius:50%;position:absolute;inset:5%}.pet canvas{width:100%;height:100%;display:block;position:relative}.id-card{background:#151b2873;border:3px dotted #f4f6fb33;border-radius:24px;margin-top:32px;padding:4px 24px}.id-card>div{grid-template-columns:9rem minmax(0,1fr);gap:12px;padding:14px 0;display:grid}.id-card>div+div{border-top:3px dotted #f4f6fb1a}.id-card dt{letter-spacing:.24em;text-transform:uppercase;color:var(--muted);padding-top:.2rem;font-size:.7rem;font-weight:700}.id-card dd{color:var(--white)}.swatches{vertical-align:-1px;gap:5px;margin-right:8px;display:inline-flex}.swatches span{background:radial-gradient(circle at 35% 30%, #ffffff8c, #fff0 60%), var(--swatch);width:13px;height:13px;box-shadow:0 0 10px var(--swatch);border-radius:50%}@media (width<=820px){.meet-grid{grid-template-columns:minmax(0,1fr)}.pet{width:min(78vw,340px)}.id-card>div{grid-template-columns:7.5rem minmax(0,1fr)}}.manners-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:22px;margin-top:52px;display:grid}.manner{border:1.5px solid var(--line);background:#151b2880;border-radius:28px;padding:12px 12px 24px}.stage{background:radial-gradient(90% 120% at calc(50% - var(--tx,0) * 40%) calc(25% - var(--ty,0) * 40%), #ffffff0d, #fff0 70%), var(--ink);border-radius:18px;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff0f}.stage canvas{aspect-ratio:16/10;width:100%;display:block}.manner-word{margin:22px 8px 12px;line-height:0}.manner-word .dot-text{--pitch:5px}.manner p{margin:0 8px;font-size:.98rem}.manner strong{color:var(--white)}.turn-inner{border:1.5px solid var(--line);background:radial-gradient(60% 120% at 85%,#ffffff0d,#fff0),#151b2873;border-radius:40px;justify-content:space-between;align-items:center;gap:clamp(32px,6vw,80px);padding:clamp(28px,5vw,60px);display:flex}.turn-text .fine{margin-top:16px}@media (width<=700px){.turn-inner{flex-direction:column;align-items:flex-start}.turn-inner .blob{align-self:center}}.blob{--size:140px;width:var(--size);height:var(--size);background-color:var(--pink);background-image:radial-gradient(circle at calc(36% - var(--tx,0) * 30%) calc(30% - var(--ty,0) * 30%), #ffffff80, #fff0 52%);color:var(--pink);border-radius:50%;flex:none;place-items:center;transition:scale .15s;animation:7.8s linear infinite blob-colour,5s ease-in-out infinite blob-wobble;display:grid;box-shadow:0 0 50px -6px,0 0 140px -30px}.blob:hover{scale:1.04}.blob:active{scale:.94}.blob .dot-text{--pitch:calc(var(--size) * .5 / 23)}.blob-small{--size:118px}.blob-small .dot-text{--pitch:calc(var(--size) * .6 / 29)}@keyframes blob-colour{0%,29.33%{color:#e91e63;background-color:#e91e63}33.33%,62.67%{color:#2196f3;background-color:#2196f3}66.67%,96%{color:#8bc34a;background-color:#8bc34a}to{color:#e91e63;background-color:#e91e63}}@keyframes blob-wobble{0%,to{border-radius:50%}25%{border-radius:53% 47% 51% 49%/48% 53% 47% 52%}50%{border-radius:48% 52% 47% 53%/52% 47% 53% 48%}75%{border-radius:51% 49% 53% 47%/47% 51% 49% 53%}}.shots{scroll-snap-type:x mandatory;scrollbar-width:none;justify-content:safe center;gap:22px;margin-top:56px;padding:16px 20px 24px;scroll-padding-inline:20px;display:flex;overflow-x:auto}.shots::-webkit-scrollbar{display:none}.shot{scroll-snap-align:center;flex:none;width:204px}.phone{transform:perspective(900px) rotateY(calc(var(--tx,0) * 24deg)) rotateX(calc(var(--ty,0) * -24deg));background:#05070b;border:1.5px solid #f4f6fb29;border-radius:30px;padding:6px;position:relative;box-shadow:0 34px 60px -34px #000000f2}.phone img{border-radius:24px;width:100%;height:auto;display:block}.phone:after{content:"";border-radius:inherit;background:radial-gradient(circle at calc(30% - var(--tx,0) * 80%) calc(18% - var(--ty,0) * 80%), #ffffff21, #fff0 45%);pointer-events:none;position:absolute;inset:0}.shot figcaption{margin-top:18px;padding-inline:4px;font-size:.95rem;line-height:1.5}.shot figcaption .caption{color:var(--white);margin-bottom:6px;display:block}.features{grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 40px;margin-top:56px;display:grid}@media (width<=900px){.features{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=560px){.features{grid-template-columns:minmax(0,1fr)}}.feature .icon{border:2px solid var(--ring);border-radius:50%;place-items:center;width:52px;height:52px;margin-bottom:18px;display:grid}.glyph{width:100%;height:100%;fill:var(--white)}.glyph .line,.glyph .tail{fill:none;stroke:var(--white);stroke-width:3px;stroke-linecap:round}.glyph .tail{stroke-width:4px;opacity:.45}.feature h3{color:var(--white);margin-bottom:6px;font-size:1.15rem}.ticker{border-block:1.5px solid var(--line);margin-top:clamp(80px,10vw,120px);padding-block:20px;overflow:hidden;mask-image:linear-gradient(90deg,#0000,#000 12% 88%,#0000)}.ticker-track{width:max-content;animation:48s linear infinite ticker;display:flex}.ticker .dot-text{--pitch:4px;opacity:.85;max-width:none}@keyframes ticker{to{transform:translate(-50%)}}.finale{text-align:center;justify-items:center;gap:36px;padding:clamp(90px,13vw,170px) 20px;display:grid}.finale-title{width:100%}.finale-title .dot-text{--pitch:clamp(2.5px, min(1.25vw, (100vw - 48px) / 83), 12px)}.finale .hero-best{margin-top:-8px}.footer{padding:40px 0 max(48px, env(safe-area-inset-bottom));border-top:1.5px solid var(--line)}.footer-inner{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px 32px;display:flex}.footer .dot-text{--pitch:min(3px, (100vw - 48px) / 119);opacity:.7}.footer nav{gap:24px;display:flex}.footer a{color:var(--muted);text-decoration:none}.footer a:hover{color:var(--white)}.game{z-index:50;background:var(--ink);touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;position:fixed;inset:0;overflow:hidden}.room{pointer-events:none;position:absolute;inset:0;overflow:hidden}.room-light{background:radial-gradient(closest-side,#ffffff13,#ffffff0e 18%,#ffffff08 38%,#ffffff03 62%,#fff0);width:190vmax;height:190vmax;margin:-95vmax 0 0 -95vmax;position:absolute;top:30%;left:50%}.room-wash{background:radial-gradient(farthest-corner, #0000 55%, color-mix(in srgb, var(--wash) 5%, transparent) 70%, color-mix(in srgb, var(--wash) 16%, transparent) 86%, color-mix(in srgb, var(--wash) 26%, transparent));opacity:0;transition:opacity .45s;position:absolute;inset:0}.room-wash.on{opacity:1}.arena{will-change:transform;position:absolute;overflow:hidden;container-type:size}.arena.framed{background:#0b0e1466;border-radius:36px;box-shadow:0 0 0 1.5px #f4f6fb29,0 50px 120px -40px #000000f2}.arena-canvas,.confetti{width:100%;height:100%;display:block;position:absolute;inset:0}.confetti{z-index:3;pointer-events:none}.corner{z-index:2;top:max(18px, env(safe-area-inset-top));border:2px solid var(--ring);border-radius:50%;place-items:center;width:46px;height:46px;display:grid;position:absolute}.corner-left{left:18px}.corner-right{right:18px}.corner .mute{display:none}.corner.off .waves{opacity:.25}.corner.off .mute{display:inline}.arena:has(.panel:not([hidden])) .corner-right{visibility:hidden}.game-hint{z-index:2;inset:auto 0 max(40px, env(safe-area-inset-bottom));text-align:center;color:var(--white);opacity:0;pointer-events:none;padding-inline:24px;transition:opacity .5s;position:absolute}.game-hint.on{opacity:.8}.game-keys{text-align:center;pointer-events:none;position:absolute;inset:auto 0 10px}@media not ((hover:hover) and (pointer:fine) and (width>=640px)){.game-keys{display:none}}.panel{z-index:2;text-align:center;-webkit-backdrop-filter:blur(10px);background:#0b0e148c;flex-direction:column;justify-content:center;align-items:center;gap:clamp(12px,3cqh,26px);padding:24px;animation:.35s both panel-in;display:flex;position:absolute;inset:0}@keyframes panel-in{0%{opacity:0}}.panel-title .dot-text{--pitch:min(5.5px, 72cqw / 53)}.final-score .dot-text{--pitch:clamp(8px, 4.4cqw, 17px);animation:.55s cubic-bezier(.2,1.5,.4,1) both zoom-in}@keyframes zoom-in{0%{opacity:0;transform:scale(.4)}}.new-best{color:#ffc107}.ring{border:2px solid var(--ring);border-radius:50%;place-items:center;width:86px;height:86px;display:grid}.ring .dot-text{--pitch:calc(86px * .64 / 23)}.ring-big{width:124px;height:124px}.ring-big .dot-text{--pitch:calc(124px * .56 / 23)}.over-store{justify-items:center;gap:10px;margin-top:6px;display:grid}.over-store p{color:var(--muted);font-size:.85rem}.flood{z-index:60;pointer-events:none;position:fixed;inset:0}@media (prefers-reduced-motion:reduce){html:has(body.landing){scroll-behavior:auto}.dot-text.wave .core,.scroll-cue span,.ticker-track,.blob,.final-score .dot-text{animation:none}}
