.play-demo{--demo-acid:#dcff30;--demo-paper:#f4f0e4;--demo-phone:#1b2422;--demo-bubble:#354741;position:relative;isolation:isolate;background:var(--demo-acid);color:var(--ink)}
.demo-scene{position:relative;container-type:inline-size;width:min(100%,1740px);height:clamp(960px,104svh,1180px);margin:0 auto;isolation:isolate;--demo-exit:0}
.play-demo:before{content:"";position:absolute;left:0;right:0;top:-10px;height:18px;background:var(--demo-acid);clip-path:polygon(0 44%,4% 25%,7% 49%,12% 22%,17% 40%,22% 19%,27% 48%,33% 28%,39% 43%,46% 20%,51% 48%,58% 22%,65% 40%,71% 25%,78% 45%,84% 20%,89% 43%,94% 23%,100% 40%,100% 100%,0 100%)}
.demo-title{position:absolute;z-index:2;left:3.7%;top:5.5%;margin:0;font:950 13.7cqw/.81 var(--display);letter-spacing:-.092em;transform:translateY(calc(var(--demo-exit) * -35px)) rotate(-3deg);transform-origin:20% 30%;pointer-events:none}
.demo-title>span{display:block;white-space:nowrap}
.demo-title-red{color:var(--red);margin-top:.025em;transform:translateX(-.02em)}
.demo-title>span:last-child{margin-top:.025em}
.demo-intro{position:absolute;z-index:4;left:4.2%;top:61%;width:21%;margin:0;font:600 italic 1.46cqw/1.2 var(--body);letter-spacing:-.025em}
.demo-intro svg{display:block;color:var(--red);width:68%;height:22px;margin:12px 0 0 8%;overflow:visible}
.demo-phone-anchor{position:absolute;z-index:5;right:5.3%;top:4.6%;width:29%;aspect-ratio:380/660}
.demo-phone-exit{width:100%;height:100%;transform:translateX(calc(var(--demo-exit) * 36px)) scale(calc(1 + var(--demo-exit) * .025));transform-origin:center}
.demo-phone-arrive,.demo-phone-tilt,.demo-phone-vibrate{position:relative;width:100%;height:100%}
.demo-phone-tilt{transform:rotate(11deg);transition:transform .28s ease-out}
.play-demo[data-phase="responded"] .demo-phone-tilt{transform:rotate(7deg)}
.demo-phone-frame{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:url(#ink-rough)}
.demo-ground-shadow{position:absolute;z-index:-1;left:-9%;bottom:-5%;width:145%;height:25%;transform:rotate(-12deg) skewX(-10deg);opacity:.85}
.demo-phone-ui{position:absolute;inset:5.7% 10% 9% 9.5%;overflow:hidden;container-type:inline-size;color:#f5f5f0;border-radius:7%}
.demo-phone-top{display:flex;justify-content:space-between;align-items:center;padding:1% 4% 0;font-size:6.2cqw;font-weight:700}
.demo-phone-top>span{font-size:6cqw;letter-spacing:.1em}
.demo-notch{position:absolute;top:-2%;left:36%;width:36%;height:6%;border-radius:0 0 14px 14px;background:#101713}
.demo-contact{display:flex;gap:4%;align-items:center;padding:12% 1% 6%;border-bottom:1px solid #f4f0e433}
.demo-avatar{display:grid;place-items:center;width:13cqw;height:13cqw;flex:none;border-radius:50%;background:#c1c5b8;color:#1b2422;font:700 9cqw/1 Georgia,serif}
.demo-contact strong{display:block;font:700 6.1cqw/1.15 var(--body);letter-spacing:-.03em;white-space:nowrap}
.demo-status{display:block;margin-top:3px;font:4.1cqw/1.2 var(--body);color:#bac4b8;min-height:1.2em}
.demo-messages{position:absolute;top:26%;left:0;right:0;bottom:1%;overflow-y:auto;scrollbar-width:none;padding:2% 1% 9%}
.demo-messages::-webkit-scrollbar{display:none}
.demo-message-list{display:flex;flex-direction:column;gap:11px}
.demo-message{position:relative;flex:none;margin:0;max-width:98%;padding:4% 5% 3%;border:1px solid transparent;border-radius:13px;background:var(--demo-bubble);font:400 clamp(14px,5.35cqw,22px)/1.35 var(--body);color:#f5f5f0;overflow-wrap:break-word}
.demo-message>span{display:block;text-wrap:balance}
.demo-message time{display:block;text-align:right;color:#c1cdbf;font:400 clamp(10px,3.7cqw,14px)/1.2 var(--body);margin-top:4px}
.demo-message--mine{max-width:91%;align-self:flex-end;background:var(--demo-acid);color:#1b2422;border-color:#1b2422;font-weight:700}
.demo-message--mine time{color:#34452e}
.demo-message--reply{box-shadow:inset 3px 0 0 var(--red)}
.demo-typing{display:flex;gap:7px;align-items:center;width:max-content;margin-top:12px;padding:13px 17px;border-radius:12px;background:var(--demo-bubble)}
.demo-typing span{display:block;width:6px;height:6px;background:#e3e9d9;border-radius:50%;animation:demo-dot .8s ease-in-out infinite}
.demo-typing span:nth-child(2){animation-delay:.12s}.demo-typing span:nth-child(3){animation-delay:.24s}
.demo-launch-point{position:absolute;left:22%;right:8%;bottom:13%;height:8%;pointer-events:none}
.demo-ring-lines{position:absolute;left:-8%;top:-1%;width:116%;height:102%;overflow:visible;pointer-events:none;opacity:0}
.demo-is-ringing .demo-phone-vibrate{animation:demo-ring .25s linear}
.demo-is-ringing .demo-ring-lines{animation:demo-ring-marks .27s linear}
.demo-is-ringing .demo-ground-shadow{animation:demo-shadow-ring .27s .05s linear}
.demo-options{position:absolute;inset:0;z-index:10;pointer-events:none}
.demo-choice-anchor{position:absolute;width:39%;pointer-events:auto}
.demo-choice-anchor--identity{left:25.2%;top:55.2%;--sticker-angle:-12deg}
.demo-choice-anchor--trust{left:21.3%;top:71%;--sticker-angle:-10deg}
.demo-sticker{position:relative;display:block;width:100%;margin:0;padding:0;border:0;overflow:visible;background:transparent;color:#191d1b;font:900 italic 2.53cqw/1.06 var(--body);letter-spacing:-.045em;text-align:left;transform:rotate(var(--sticker-angle,-12deg));transform-origin:center;transition:transform .18s ease-out;isolation:isolate}
.sticker-depth{position:absolute;inset:9px -7px -13px 7px;background:#20251c;border-radius:25px;box-shadow:5px 9px 0 #191c1833;transform:skewX(-2deg);transition:box-shadow .18s}
.sticker-depth:after{content:"";position:absolute;right:1%;top:8%;bottom:6%;width:9px;background:repeating-linear-gradient(30deg,transparent 0 3px,#e2d39b70 3px 4px)}
.sticker-paper{position:relative;display:flex;align-items:center;min-height:9cqw;padding:20px 25px 23px;border:2px solid #191d1b;border-radius:25px;background:var(--demo-paper,#f4f0e4);overflow:hidden}
.sticker-paper:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.13;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath d='M0 0h120v120H0z' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");mix-blend-mode:multiply}
.sticker-text{position:relative;z-index:1;display:block;text-wrap:balance}
.sticker-rays{position:absolute;right:-7%;top:-44%;width:17%;height:75%;color:var(--red);overflow:visible;opacity:0;transform:scale(.8);transition:opacity .16s,transform .18s;pointer-events:none}
.demo-sticker:hover:not(:disabled),.demo-sticker:focus-visible:not(:disabled){transform:translateY(-7px) rotate(calc(var(--sticker-angle,-12deg) + 2deg))}
.demo-sticker:hover:not(:disabled) .sticker-depth,.demo-sticker:focus-visible:not(:disabled) .sticker-depth{box-shadow:7px 14px 0 #191c1844}
.demo-sticker:hover:not(:disabled) .sticker-rays,.demo-sticker:focus-visible:not(:disabled) .sticker-rays{opacity:1;transform:scale(1)}
.demo-sticker:active:not(:disabled){transform:translateY(-2px) rotate(var(--sticker-angle,-12deg)) scale(.975)}
.demo-sticker:focus-visible{outline:3px solid var(--ink);outline-offset:12px;border-radius:25px}
.demo-sticker:disabled{opacity:1}
.demo-flying-sticker{position:fixed;z-index:45;pointer-events:none!important;will-change:transform;transform-origin:0 0;transition:none!important;letter-spacing:-.045em}
.demo-flying-sticker .sticker-paper{box-sizing:border-box;width:100%;height:100%;min-height:0;display:block}
.demo-flying-sticker .sticker-rays{display:none}
.demo-flight-time{position:absolute;z-index:2;right:15px;bottom:10px;color:#34452e;opacity:0;font-style:normal;font-weight:400;letter-spacing:0}
.demo-send-arrow{position:absolute;inset:0;z-index:9;width:100%;height:100%;pointer-events:none;overflow:visible;opacity:0}
.demo-send-arrow path{stroke:var(--red);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;filter:url(#ink-rough)}
.play-demo[data-phase="sending"] .demo-send-arrow{opacity:1}
.demo-sent-stamp{position:absolute;z-index:14;right:3.5%;top:43%;width:max-content;max-width:70%;padding:8px 12px 10px;border:4px solid var(--red);outline:1px solid var(--red);outline-offset:4px;color:var(--red);background:#191d1be8;font:950 2.65cqw/1 var(--display);letter-spacing:-.045em;transform:rotate(-12deg);opacity:0;pointer-events:none}
.demo-sent-stamp.is-stamping{animation:demo-stamp .4s both}
.demo-outcome{position:absolute;z-index:6;right:3.8%;bottom:5.3%;width:43%;text-align:center}
.demo-outcome p{position:relative;display:inline-block;margin:0;font:900 italic 2.3cqw/1.06 var(--body);letter-spacing:-.04em}
.demo-outcome svg{position:absolute;left:0;bottom:-24px;width:100%;height:24px;color:var(--red);overflow:visible}
.demo-replay{margin-top:40px;min-height:44px;border:0;border-bottom:1px solid currentColor;background:transparent;padding:6px 0;font:600 16px/1.3 var(--body);text-align:center}
.demo-replay>span{display:inline-block;margin-left:5px;font-size:21px;transition:transform .18s}
.demo-replay:hover>span{transform:translate(3px,-2px)}
html.js .play-demo:not(.is-entered) .demo-title>span,html.js .play-demo:not(.is-entered) .demo-phone-arrive{opacity:0}
html.js .play-demo[data-phase="entering"] .demo-options,html.js .play-demo[data-phase="incoming"] .demo-options{visibility:hidden}
.play-demo.is-entered .demo-title>span{animation:demo-title-land .42s .12s both cubic-bezier(.18,.8,.2,1)}
.play-demo.is-entered .demo-title>span:nth-child(2){animation-delay:.19s}
.play-demo.is-entered .demo-title>span:nth-child(3){animation-delay:.25s}
.play-demo.is-entered .demo-phone-arrive{animation:demo-phone-land .58s .25s both cubic-bezier(.18,.75,.2,1)}
@keyframes demo-title-land{0%{opacity:0;transform:translateY(19px) scale(1.04)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes demo-phone-land{0%{opacity:0;transform:translateY(33px) rotate(6deg) scale(1.025)}76%{opacity:1;transform:translateY(-3px) rotate(-.7deg) scale(.998)}100%{opacity:1;transform:none}}
@keyframes demo-ring{0%,100%{transform:none}17%{transform:translateX(-3px) rotate(-.4deg)}34%{transform:translateX(3px) rotate(.4deg)}51%{transform:translateX(-2px) rotate(-.25deg)}68%{transform:translateX(2px) rotate(.2deg)}85%{transform:translateX(-1px)}}
@keyframes demo-shadow-ring{0%,100%{transform:rotate(-12deg) skewX(-10deg)}35%{transform:translateX(2px) rotate(-12deg) skewX(-10deg)}70%{transform:translateX(-1px) rotate(-12deg) skewX(-10deg)}}
@keyframes demo-ring-marks{0%,100%{opacity:0}25%,65%{opacity:1}45%,85%{opacity:.3}}
@keyframes demo-dot{0%,70%,100%{opacity:.45;transform:none}35%{opacity:1;transform:translateY(-3px)}}
@keyframes demo-stamp{0%{opacity:0;transform:rotate(-12deg) scale(1.25)}25%{opacity:1;transform:rotate(-12deg) scale(.96)}40%,67%{opacity:1;transform:rotate(-12deg) scale(1)}100%{opacity:0;transform:rotate(-12deg) scale(1)}}
@media(min-width:1800px){.demo-scene{height:1180px}.demo-title{font-size:13.2cqw}.demo-phone-anchor{top:4%;width:28.5%}.demo-choice-anchor--identity{top:56%}.demo-choice-anchor--trust{top:72%}.demo-outcome{bottom:4%}}
@media(min-width:1000px) and (max-width:1279px){
  .demo-scene{height:1060px}
  .demo-title{top:7%;font-size:14cqw}
  .demo-phone-anchor{top:7.5%;right:5%;width:33%}
  .demo-intro{top:49%;font-size:1.7cqw;width:25%}
  .demo-choice-anchor{width:45%}
  .demo-choice-anchor--identity{left:16%;top:61%}
  .demo-choice-anchor--trust{left:12%;top:75%}
  .demo-sticker{font-size:2.9cqw}
  .sticker-paper{min-height:11cqw;padding:20px 23px}
  .demo-outcome{bottom:3.7%;right:4%;width:45%}
  .demo-outcome p{font-size:2.5cqw}
}
@media(min-width:768px) and (max-width:999px){
  .demo-scene{height:1130px}
  .demo-title{top:4.7%;font-size:16cqw}
  .demo-phone-anchor{top:22%;right:8%;width:39%}
  .demo-intro{top:43%;left:5%;width:32%;font-size:2.35cqw}
  .demo-choice-anchor{width:50%}
  .demo-choice-anchor--identity{left:7%;top:66%}
  .demo-choice-anchor--trust{left:4%;top:80%}
  .demo-sticker{font-size:3.4cqw}
  .sticker-paper{min-height:12cqw;padding:18px 22px}
  .demo-outcome{right:5%;bottom:3.7%;width:43%}
  .demo-outcome p{font-size:2.5cqw}
  .demo-replay{font-size:14px}
}
@media(max-width:767px){
  .demo-scene{width:100%;height:1430px}
  .demo-title{left:5.2%;top:3.7%;font-size:22cqw;line-height:.8;letter-spacing:-.092em}
  .demo-phone-anchor{top:27.3%;right:15%;width:69%;max-width:390px}
  .demo-phone-tilt{transform:rotate(7deg)}
  .play-demo[data-phase="responded"] .demo-phone-tilt{transform:rotate(4deg)}
  .demo-contact strong{font-size:clamp(12px,6.5cqw,18px)}
  .demo-phone-top{font-size:clamp(14px,6.2cqw,18px)}
  .demo-status{font-size:clamp(10px,4.7cqw,13px)}
  .demo-message{font-size:clamp(14px,6.9cqw,18px);line-height:1.35}
  .demo-message time{font-size:clamp(10px,4.5cqw,12px)}
  .demo-contact{padding-top:10%;padding-bottom:5%}
  .demo-messages{top:25%;bottom:0;padding-bottom:7%}
  .demo-message-list{gap:9px}
  .demo-intro{left:8%;top:21.2%;width:84%;font-size:4.25cqw;line-height:1.25}
  .demo-intro br:last-of-type{display:none}
  .demo-intro svg{width:32%;height:17px;margin-top:5px;margin-left:1%}
  .demo-choice-anchor{width:81%;left:9%}
  .demo-choice-anchor--identity{top:64.5%;--sticker-angle:-6deg}
  .demo-choice-anchor--trust{top:74.5%;left:7%;--sticker-angle:-4deg}
  .demo-sticker{font-size:6.3cqw;line-height:1.08}
  .sticker-paper{min-height:24cqw;padding:17px 20px 20px;border-radius:21px}
  .sticker-depth{border-radius:21px;inset:7px -5px -10px 6px}
  .sticker-rays{right:-3%;top:-32%;width:15%;height:50%}
  .demo-outcome{right:7%;left:7%;bottom:4.7%;width:auto}
  .demo-outcome p{font-size:5.7cqw;line-height:1.13}
  .demo-outcome svg{bottom:-18px;height:19px}
  .demo-replay{margin-top:29px;font-size:16px}
  .demo-sent-stamp{font-size:7cqw;border-width:3px;max-width:85%}
  .demo-send-arrow path{stroke-width:5}
}
@media(min-width:501px) and (max-width:767px){
  .demo-scene{height:1740px}
  .demo-title{font-size:20cqw;top:3.3%}
  .demo-intro{top:23%;font-size:3.5cqw}
  .demo-phone-anchor{top:31%;right:19%;width:60%}
  .demo-choice-anchor{width:75%;left:12%}
  .demo-choice-anchor--identity{top:70%}
  .demo-choice-anchor--trust{top:80%;left:10%}
  .demo-sticker{font-size:5.2cqw}
  .sticker-paper{min-height:20cqw}
  .demo-outcome{bottom:3%;left:12%;right:12%}
  .demo-outcome p{font-size:4.3cqw}
}
@media(max-width:380px){
  .demo-scene{height:1300px}
  .demo-title{top:3.8%}
  .demo-intro{top:19%;font-size:4.5cqw}
  .demo-phone-anchor{top:25.3%;width:72%;right:13%}
  .demo-choice-anchor--identity{top:64%}
  .demo-choice-anchor--trust{top:74%}
  .demo-sticker{font-size:6.4cqw}
  .sticker-paper{min-height:26cqw;padding:17px 18px 19px}
  .demo-outcome{bottom:5%}
  .demo-outcome p{font-size:5.8cqw}
}
@media(prefers-reduced-motion:reduce){
  .demo-title,.demo-phone-exit{transform:none}
  .demo-phone-tilt,.play-demo[data-phase="responded"] .demo-phone-tilt{transform:rotate(3deg)}
  html.js .play-demo .demo-title>span,html.js .play-demo .demo-phone-arrive{opacity:1}
  .demo-ring-lines{display:none}
  .demo-sticker:hover:not(:disabled),.demo-sticker:focus-visible:not(:disabled){transform:rotate(var(--sticker-angle,-6deg))}
}