.demo{position:relative}.demo__title{font-size:var(--t-lg);letter-spacing:-.01em;margin-bottom:1.75rem}.demo-steps{display:grid;gap:.5rem;list-style:none;margin-bottom:2rem}@media(min-width:48rem){.demo-steps{grid-template-columns:repeat(3,1fr);gap:1.5rem}}.demo-step{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;align-items:start;width:100%;padding:1.1rem 1.25rem;text-align:left;background:transparent;border:2px solid transparent;border-radius:var(--r-card);font:inherit;color:var(--ink-2);cursor:pointer;transition:background-color .2s,border-color .2s}.demo-step:hover{background:#fff9}.demo-step__n{grid-row:span 2;display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:50%;border:2px solid var(--sky-3);background:var(--paper);font:900 1rem/1 var(--font-display);color:var(--ink-3);transition:background-color .2s,border-color .2s,color .2s}.demo-step__t{font:900 var(--t-md)/1.25 var(--font-display);color:var(--ink)}.demo-step__d{font-size:var(--t-sm);line-height:1.45}.demo-step[aria-current=step]{background:var(--paper);border-color:var(--violet-line)}.demo-step[aria-current=step] .demo-step__n{background:var(--violet);border-color:var(--violet);color:#fff}.demo-step.is-done .demo-step__n{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}@media(max-width:47.99rem){.demo-steps{grid-template-columns:repeat(3,1fr)}.demo-step{grid-template-columns:1fr;justify-items:center;text-align:center;padding:.6rem .25rem}.demo-step__n{grid-row:auto}.demo-step__t{font-size:var(--t-sm)}.demo-step__d{display:none}}.demo-caption{display:none;margin:-.25rem 0 .9rem;font-size:var(--t-sm);text-align:center;color:var(--ink-2);min-height:2.9em}@media(max-width:47.99rem){.demo-caption{display:block}}.demo-stage{display:grid;gap:0;background:var(--paper);border:1px solid var(--sky-2);border-radius:var(--r-stage);overflow:hidden;padding-top:1.25rem}@media(min-width:56rem){.demo-stage{grid-template-columns:1fr 16rem;gap:3rem;padding:2.5rem 3rem;align-items:center;overflow:visible}}.plan{position:relative;aspect-ratio:3 / 2;container-type:inline-size}.plan>svg{width:100%;height:100%}.plan .room-label{font:800 13px/1 var(--font-display);fill:var(--ink-2)}.spot-ring{position:absolute;width:11cqi;aspect-ratio:1;translate:-50% -50%;border:2.5px dashed var(--dot);border-radius:50%;opacity:0;scale:.6;transition:opacity .3s,scale .3s var(--ease);pointer-events:none}.plan.show-rings .spot-ring{opacity:1;scale:1}.spot{position:absolute;display:grid;place-items:center;width:max(2.75rem,9cqi);aspect-ratio:1;translate:-50% -50%;padding:0;border:0;background:none;cursor:pointer;visibility:hidden}.spot.is-placed{visibility:visible}.spot__card{position:relative;display:block;width:7.6cqi;min-width:2.2rem;aspect-ratio:1;padding:12%;background:var(--paper);border-radius:var(--r-paper);box-shadow:var(--shadow-paper);rotate:var(--rot, 0deg);transition:scale .15s var(--ease)}.spot__card .tape{width:70%;height:22%;top:-14%}.spot:hover .spot__card{scale:1.08}.spot__check{position:absolute;right:-32%;top:-32%;display:none;place-items:center;width:58%;aspect-ratio:1;border-radius:50%;background:var(--ok);color:#fff;box-shadow:0 0 0 2px #fff}.spot__check svg{width:62%}.spot.is-found .spot__check{display:grid}.spot.is-found .spot__card{box-shadow:0 0 0 3px var(--dot),var(--shadow-paper)}.spot.is-flying{transition:transform .7s var(--ease)}.spot.is-wrong .spot__card{animation:wobble .45s}.spot.is-hint:before{content:"";position:absolute;inset:-10%;border-radius:50%;border:3px solid var(--violet);animation:ping 1.1s ease-out 3}@keyframes wobble{20%{translate:-4px 0}40%{translate:4px 0}60%{translate:-3px 0}80%{translate:2px 0}}@keyframes ping{0%{opacity:1;scale:.8}to{opacity:0;scale:1.6}}.sheet{position:absolute;left:70%;top:3%;width:27%;aspect-ratio:210 / 297;padding:4% 3.4%;rotate:-3deg;display:flex;flex-direction:column;gap:4%;transition:opacity .4s,translate .4s var(--ease),scale .3s var(--ease)}.sheet .tape{top:-3%;width:34%;height:5%}.sheet__title{font:900 3.1cqi/1.1 var(--font-display);color:var(--ink);text-align:center}.demo-logo{display:grid;place-items:center;padding:.35em .6em;border:1.5px dashed var(--sky-3);border-radius:4px;background:#ffffffd9;font:700 var(--t-xs)/1.2 var(--font-body);color:var(--ink-3);text-align:center}.sheet .demo-logo{font-size:1.5cqi;margin:-2% 15% 0}.screen__cover .demo-logo{position:absolute;left:.6rem;top:.6rem;z-index:1}.screen--done .demo-logo{margin:1rem auto 0}.sheet__sub{font:600 1.7cqi/1.3 var(--font-body);color:var(--ink-3);text-align:center;margin-top:-2%}.sheet__grid{display:grid;grid-template-columns:1fr 1fr;gap:6%;flex:1;align-content:center}.sheet__slot{position:relative;aspect-ratio:1;border:1.5px dashed var(--sky-3);border-radius:2px;display:grid;place-items:center}.sheet__slot span{position:absolute;left:6%;top:4%;font:900 1.7cqi/1 var(--font-display);color:var(--ink-3)}.sheet__qr{width:66%;aspect-ratio:1;transition:opacity .2s}.sheet__slot.is-taken .sheet__qr{opacity:0}.sheet.is-pop{animation:pop .45s var(--ease)}.sheet.is-gone{opacity:0;translate:0 -8%;pointer-events:none}@keyframes pop{40%{scale:1.06}}.demo-stage .note-tape{position:absolute;z-index:3;width:max(6.5rem,17cqi);padding:2.2cqi 1.6cqi 2.4cqi;border-radius:1px 1px 2px 6px;background:linear-gradient(#f2d43f 0 12%,var(--tape) 12%);font-size:clamp(.72rem,2.1cqi,.9rem);line-height:1.25;box-shadow:0 1px 1px #4a3b002e,3px 9px 12px -7px #1b224173;transition:opacity .3s}.demo-stage .note-tape[hidden]{display:block;opacity:0;pointer-events:none}.note--sheet{left:70%;top:0;translate:-50% -30%;rotate:-5deg}.note--time{left:42%;top:76%;translate:-50% -50%;rotate:3deg}.note--try{display:none}@media(min-width:56rem){.demo-stage{position:relative}.demo-stage .note--try{display:block;right:17.5rem;bottom:4.2rem;width:auto;padding:.75rem .9rem .85rem;font-size:.9rem;font-weight:700;rotate:-3deg}}.is-guide:after{content:"";position:absolute;right:14%;bottom:-1.1rem;z-index:4;width:2.6rem;aspect-ratio:1;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b2241' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23fff' stroke='none' d='M6 14V4a2 2 0 0 1 4 0v5a2 2 0 0 1 4 0v1a2 2 0 0 1 4 0v1a2 2 0 0 1 4 0v3a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-6-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L6 14z'/%3E%3Cpath d='M22 14a8 8 0 0 1-8 8M18 11v-1a2 2 0 0 0-4 0M14 10V9a2 2 0 0 0-4 0v1M10 9.5V4a2 2 0 0 0-4 0v10M18 11a2 2 0 1 1 4 0v3a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15'/%3E%3C/svg%3E") center / contain no-repeat;filter:drop-shadow(0 2px 2px rgba(27,34,65,.3));animation:tap 1.8s ease-in-out infinite}.btn.is-guide,.quiz button.is-guide{position:relative}.spot.is-guide:after{right:-20%;bottom:-35%}@keyframes tap{0%,to{translate:6px 10px}45%,55%{translate:0 0;scale:.9}}@media(prefers-reduced-motion:reduce){.is-guide:after{animation:none}}.trail{fill:none;stroke:var(--dot);stroke-width:4;stroke-linecap:round;stroke-dasharray:2 10}.trail-mask{fill:none;stroke:#fff;stroke-width:10;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s var(--ease)}.trail-mask.is-on{stroke-dashoffset:0}.treasure{position:absolute;left:82.5%;top:70%;width:17%;translate:-50% -70%;opacity:0;scale:.3;transition:opacity .4s,scale .6s cubic-bezier(.3,1.6,.5,1);pointer-events:none;z-index:2}.treasure.is-on{opacity:1;scale:1}.phone{position:relative;display:flex;flex-direction:column;overflow:hidden;background:var(--paper);border:8px solid var(--ink);border-bottom-width:0;border-radius:30px 30px 0 0;margin:0 .75rem;min-height:17.5rem;box-shadow:0 -10px 30px -20px #1b224166}@media(min-width:56rem){.phone{margin:0;border-width:9px;border-radius:38px;height:34rem;box-shadow:var(--shadow-phone)}.phone:before{content:"";position:absolute;top:8px;left:50%;translate:-50% 0;width:5.5rem;height:1.3rem;border-radius:99px;background:var(--ink);z-index:2}}.screen{display:flex;flex-direction:column;flex:1;padding:1.1rem 1.1rem 1.2rem;animation:screen-in .35s var(--ease)}@media(min-width:56rem){.screen{padding-top:2.4rem}}@keyframes screen-in{0%{opacity:0;translate:0 8px}}.screen__kicker{font:800 var(--t-xs)/1.3 var(--font-display);color:var(--violet)}.screen__title{margin-top:.25rem;font:900 1.375rem/1.15 var(--font-display);color:var(--ink)}.screen__text{margin-top:.5rem;font-size:var(--t-sm);line-height:1.5;color:var(--ink-2)}.screen__clue{margin-top:.35rem;font:900 1.25rem/1.3 var(--font-display);color:var(--ink)}.screen__found{font:800 var(--t-sm)/1.35 var(--font-display);color:var(--ok)}.screen__note{margin-top:.75rem;padding:.55rem .75rem;border-radius:10px;background:var(--warn-soft);color:var(--warn-ink);font:700 var(--t-xs)/1.4 var(--font-body)}.screen__foot{margin-top:auto;padding-top:1rem;display:grid;gap:.5rem}.screen__hint{display:flex;gap:.5rem;align-items:center;font:700 var(--t-xs)/1.35 var(--font-display);color:var(--ink-2)}.screen__hint svg{flex:none;width:1.25rem;height:1.25rem;color:var(--violet)}.screen__cover{min-height:0;overflow:hidden;margin:-1.1rem -1.1rem 1rem;aspect-ratio:16 / 9;display:grid;place-items:center;background:radial-gradient(120% 90% at 50% 100%,#fff 0 30%,#dfe8fb 70%)}@media(min-width:56rem){.screen__cover{margin-top:-2.4rem;aspect-ratio:4 / 3}}.screen__cover--inset,.screen__cover.screen__cover--inset{margin:0 0 1rem;border-radius:12px;aspect-ratio:16 / 9}.screen__cover{position:relative}.screen__cover img{position:absolute;inset:8% 0 0;width:100%;height:92%;object-fit:contain}.screen__url{display:flex;align-items:center;gap:.4rem;margin:-.4rem 0 .75rem;padding:.35rem .6rem;border-radius:99px;background:var(--sky);font:500 var(--t-xs)/1 var(--font-body);color:var(--ink-3)}.screen__chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.6rem}.screen__chips span{padding:.2rem .55rem;border-radius:99px;background:var(--sky);font:600 var(--t-xs)/1.4 var(--font-body);color:var(--ink-2)}.screen__price{display:flex;align-items:baseline;justify-content:space-between;margin-top:.75rem;font:900 var(--t-lg)/1 var(--font-display);color:var(--ink)}.screen__price small{font:500 var(--t-xs)/1 var(--font-body);color:var(--ink-3)}.progress{display:flex;gap:.3rem;margin-bottom:.9rem}.progress span{flex:1;height:.35rem;border-radius:99px;background:var(--sky-2)}.progress span.is-on{background:var(--dot)}.screen--quiz{background:linear-gradient(var(--violet-soft),#e8dcfd);text-align:center}.screen--quiz .screen__kicker{margin-top:.9rem}.screen--quiz .progress span:not(.is-on){background:#fffc}.quiz{display:grid;gap:.45rem}.quiz button{min-height:var(--tap);border:2px solid var(--violet-line);border-radius:16px;background:var(--paper);font:800 var(--t-md)/1.2 var(--font-display);color:var(--ink);cursor:pointer;box-shadow:0 2px #7c3aed1f}.quiz button:hover{border-color:var(--violet)}.phone.is-buzz{animation:buzz .5s linear}@keyframes buzz{10%,50%{translate:-5px 0;rotate:-2deg}30%,70%{translate:5px 0;rotate:2deg}90%{translate:-2px 0;rotate:-.5deg}}.screen--done{text-align:center}.screen--done .screen__title{font-size:1.6rem}.btn-pulse{animation:pulse 1.8s ease-in-out infinite}@keyframes pulse{0%,to{box-shadow:0 0 #7c3aed73}60%{box-shadow:0 0 0 10px #7c3aed00}}.confetti{position:absolute;left:50%;top:35%;width:8px;height:12px;border-radius:2px;pointer-events:none;animation:confetti 1.2s ease-out forwards}@keyframes confetti{to{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}}.demo-facts{margin-top:2rem}.demo-survey{margin-top:1.5rem;padding:1.25rem 1.4rem;border-radius:var(--r-card);background:var(--paper);border:1px solid var(--sky-2)}.demo-survey[hidden]{display:none}.demo-survey h3{font-size:var(--t-md)}.demo-survey .chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}.demo-survey .chips button{min-height:var(--tap);padding:0 1rem;border-radius:99px;border:2px solid var(--sky-3);background:var(--paper);font:700 var(--t-sm)/1 var(--font-display);color:var(--ink);cursor:pointer}.demo-survey .chips button:hover{border-color:var(--violet-line);background:var(--violet-soft)}.demo-survey .chips button[aria-pressed=true]{background:var(--violet);border-color:var(--violet);color:#fff}.demo-survey p{margin-top:.6rem}@media(max-width:55.99rem){.screen__cover,.screen__cover.screen__cover--inset{aspect-ratio:5 / 2}.screen__title{font-size:1.2rem}.screen__clue{font-size:1.1rem}}