.ob-demo{--vis: 13.6rem;--ob-ink: #2e1b26;--ob-mute: #8a7480;--ob-line: #eddcd5;--ob-soft: #faf6f3;--ob-rose: #cd5484;--ob-rose-d: #962c58;--ob-plum: #3a1a2c;--ob-plum-d: #2a1220;--ob-ok: #047857;--ob-ok-bg: #ecfdf5;--ob-gold: #8a6420;--ob-gold-bg: #f6ecd6;position:relative;height:15rem;overflow:hidden;isolation:isolate;border-radius:.875rem;background:radial-gradient(22rem 12rem at 85% -2rem,rgb(205 84 132 / .16),transparent 70%),radial-gradient(18rem 10rem at 0% 110%,rgb(138 100 32 / .1),transparent 70%),#f6ece8;color:var(--ob-ink);font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:.625rem;line-height:1.35;-webkit-user-select:none;user-select:none;contain:layout paint}@media(min-width:640px){.ob-demo{height:16.5rem;--vis: 15.1rem}}.ob-demo *,.ob-demo *:before,.ob-demo *:after{box-sizing:border-box}.ob-demo p{margin:0}.ob-loop{position:absolute;inset:0;transition:opacity .45s ease}.ob-demo.ob-fading .ob-loop{opacity:0}.ob-phone{position:absolute;left:50%;top:1rem;z-index:1;width:12.5rem;height:26rem;margin-left:-6.25rem;padding:.4rem;border-radius:1.9rem;background:linear-gradient(160deg,#3b2833,#1d1118 60%);box-shadow:0 1px #fff3 inset,0 22px 44px -20px #2a122099}.ob-phone:before{content:"";position:absolute;z-index:30;top:.78rem;left:50%;width:3.4rem;height:.9rem;margin-left:-1.7rem;border-radius:1rem;background:#120a0f}.ob-screen{position:relative;height:100%;overflow:hidden;border-radius:1.5rem;background:#fff}.ob-status{position:relative;z-index:25;display:flex;align-items:center;justify-content:space-between;height:1.5rem;padding:.2rem .95rem 0;font-size:.5rem;font-weight:700;color:inherit}.ob-status i{display:inline-block;width:.75rem;height:.4rem;border:1px solid currentColor;border-radius:2px;opacity:.8}.ob-browser{position:absolute;left:50%;top:1rem;z-index:1;width:min(27rem,calc(100% - 2rem));height:20rem;transform:translate(-50%);overflow:hidden;border-radius:.75rem;border:1px solid var(--ob-line);background:#fff;box-shadow:0 22px 44px -22px #2a122080}.ob-bar{display:flex;align-items:center;gap:.3rem;height:1.5rem;padding:0 .6rem;background:#f3e7e2;border-bottom:1px solid var(--ob-line)}.ob-bar>i{width:.4rem;height:.4rem;border-radius:50%;background:#d9c3bb}.ob-url{flex:1;max-width:15rem;margin:0 auto;padding:.12rem .5rem;overflow:hidden;border-radius:1rem;background:#fff;color:var(--ob-mute);font-size:.5rem;text-align:center;white-space:nowrap;text-overflow:ellipsis}.ob-browser-body{position:relative;display:flex;height:calc(100% - 1.5rem);background:#faf6f3}.ob-tap{position:absolute;z-index:40;left:50%;top:60%;width:1.5rem;height:1.5rem;margin:-.75rem 0 0 -.75rem;border-radius:50%;background:#2a122038;border:2px solid rgb(255 255 255 / .95);box-shadow:0 3px 10px #2a12204d;opacity:0;pointer-events:none;transition:left .55s cubic-bezier(.4,0,.2,1),top .55s cubic-bezier(.4,0,.2,1),opacity .25s ease,transform .15s ease,background-color .15s ease}.ob-tap:after{content:"";position:absolute;inset:-.2rem;border-radius:50%;border:2px solid var(--ob-rose);opacity:0;transform:scale(.6)}.ob-demo.is-playing .ob-tap.show{opacity:1}.ob-demo.is-playing .ob-tap.press{transform:scale(.78);background:#cd548473}.ob-demo.is-playing .ob-tap.press:after{animation:ob-ripple .5s ease-out}@keyframes ob-ripple{0%{opacity:.9;transform:scale(.6)}to{opacity:0;transform:scale(1.9)}}.ob-demo [data-at],.ob-demo [data-until]{transition:opacity .35s ease,visibility .35s,transform .45s cubic-bezier(.2,.8,.2,1),background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease,width var(--t, .45s) linear}.ob-demo.ob-reset,.ob-demo.ob-reset *{transition:none!important}.ob-demo.is-playing .ob-in:not(.on){opacity:0;transform:translateY(.45rem) scale(.97)}.ob-demo.is-playing .ob-pop:not(.on){opacity:0;transform:scale(.4)}.ob-pop{transition-timing-function:cubic-bezier(.3,1.6,.5,1)!important}.ob-demo.is-playing .ob-slide:not(.on){transform:translate(104%)}.ob-demo.is-playing .ob-drop:not(.on){opacity:0;transform:translateY(-130%)}.ob-gone{opacity:0;visibility:hidden}.ob-demo.is-playing .ob-gone:not(.on){opacity:1;visibility:visible}.ob-flash{opacity:0;visibility:hidden}.ob-demo.is-playing .ob-flash.on:not(.off){opacity:1;visibility:visible}.ob-demo.is-playing .ob-hide.on:not(.off){opacity:0}.ob-demo.is-playing .ob-add:not(.on){display:none}.ob-demo.is-playing .ob-add.on{animation:ob-add .4s cubic-bezier(.2,.8,.2,1)}@keyframes ob-add{0%{opacity:0;transform:translateY(.5rem) scale(.94)}}.ob-demo.is-playing .ob-float.on{transform:translateY(-.9rem);transition:transform 1.3s ease-out,opacity .3s ease,visibility .3s}.ob-demo.is-playing .ob-glow.on:not(.off){background-color:#fdeef4;box-shadow:0 0 0 1px #f6c8da inset}.ob-demo.is-playing .ob-fill:not(.on){width:0!important}.ob-sel{box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--ob-rose)}.ob-demo.is-playing .ob-sel:not(.on){box-shadow:0 0 #fff,0 0 0 0 var(--ob-rose)}.ob-tick{color:#34b7f1}.ob-demo.is-playing .ob-tick:not(.on){color:#9aa5ab}.ob-row{display:flex;align-items:center;gap:.4rem}.ob-grow{min-width:0;flex:1}.ob-trunc{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ob-b{font-weight:700}.ob-s{font-size:.5rem;color:var(--ob-mute)}.ob-h{font-family:Fraunces,Georgia,serif;font-weight:600;letter-spacing:-.01em;font-size:.8125rem;line-height:1.15;color:var(--ob-ink)}.ob-k{font-size:.4375rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ob-mute)}.ob-card{border:1px solid var(--ob-line);border-radius:.5rem;background:#fff}.ob-btn{display:inline-flex;align-items:center;justify-content:center;gap:.25rem;min-height:1.35rem;padding:.2rem .55rem;border-radius:.4rem;white-space:nowrap;font-size:.5rem;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--ob-rose),var(--ob-rose-d) 80%);box-shadow:0 1px 2px #5512324d}.ob-btn-2{color:var(--ob-ink);background:#fff;border:1px solid var(--ob-line);box-shadow:none}.ob-btn-wa{background:#1f9d55}.ob-btn-lg{min-height:1.9rem;width:100%;font-size:.5625rem;border-radius:.55rem}.ob-pill{display:inline-flex;align-items:center;gap:.15rem;padding:.05rem .35rem;border-radius:1rem;white-space:nowrap;font-size:.4375rem;font-weight:700;background:#f6ece8;color:#6b5562}.ob-pill-ok{background:var(--ob-ok-bg);color:var(--ob-ok)}.ob-pill-gold{background:var(--ob-gold-bg);color:var(--ob-gold)}.ob-pill-warn{background:#fffbeb;color:#92400e}.ob-pill-rose{background:#fdeef4;color:var(--ob-rose-d)}.ob-stack{display:grid}.ob-stack>*{grid-area:1 / 1}.ob-spin{width:.6rem;height:.6rem;border-radius:50%;border:1.5px solid rgb(255 255 255 / .4);border-top-color:#fff;animation:ob-spin .7s linear infinite}@keyframes ob-spin{to{transform:rotate(360deg)}}.ob-check{display:grid;place-items:center;border-radius:50%;color:#fff;background:#059669;box-shadow:0 6px 16px -6px #04785799}.ob-avatar{display:grid;place-items:center;flex-shrink:0;width:1.35rem;height:1.35rem;border-radius:50%;font-size:.5rem;font-weight:700;color:#fff;background:linear-gradient(135deg,#e7a1bd,var(--ob-rose-d))}.ob-toast{position:absolute;z-index:35;display:flex;align-items:center;gap:.35rem;padding:.35rem .55rem;border-radius:.5rem;background:var(--ob-plum);color:#fff;font-size:.5rem;font-weight:600;white-space:nowrap;box-shadow:0 10px 24px -10px #2a1220b3}.ob-toast b{color:#f6a5c4}.ob-panel{position:absolute;inset:0;padding-top:1.5rem;background:#fff}.ob-side{display:flex;flex-direction:column;gap:.3rem;flex-shrink:0;width:2.9rem;padding:.55rem .4rem;background:linear-gradient(180deg,var(--ob-plum-d),var(--ob-plum))}.ob-side>i{display:block;height:.3rem;border-radius:.2rem;background:#ffffff29}.ob-side>i.on-page{background:linear-gradient(90deg,#cd5484b3,#fff3)}.ob-side>i:first-child{height:.45rem;width:80%;margin-bottom:.3rem;background:#ffffff8c}.ob-main{position:relative;min-width:0;flex:1;padding:.6rem .7rem;overflow:hidden}.ob-topbar{display:flex;align-items:center;justify-content:space-between;height:2rem;margin-top:-1.5rem;padding:1.5rem .7rem 0;box-sizing:content-box;background:linear-gradient(180deg,var(--ob-plum-d),var(--ob-plum));color:#fff}.ob-topbar .ob-h{color:#fff;font-size:.6875rem}.ob-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.3rem}.ob-stat{min-width:0;padding:.3rem .4rem;border-radius:.4rem;background:var(--ob-soft)}.ob-stat-v{margin-top:.05rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-family:Fraunces,Georgia,serif;font-size:.75rem;font-weight:600;color:var(--ob-ink);font-variant-numeric:tabular-nums}.ob-list>*+*{border-top:1px solid #f6ece8}.ob-li{display:flex;align-items:center;gap:.4rem;padding:.3rem .4rem;border-radius:.3rem}.ob-chat-head{display:flex;align-items:center;gap:.35rem;height:2.1rem;margin-top:-1.5rem;padding:1.5rem .5rem 0;box-sizing:content-box;background:#0f6b5c;color:#fff}.ob-chat-head .ob-s{color:#ffffffbf}.ob-chat{position:absolute;left:0;right:0;top:3.6rem;bottom:0;padding:.45rem .45rem calc(26rem - var(--vis) + 1.95rem);display:flex;flex-direction:column;justify-content:flex-end;gap:.3rem;overflow:hidden;background:radial-gradient(circle at 1px 1px,rgb(15 107 92 / .07) 1px,transparent 1.5px) 0 0 / .7rem .7rem,#efe7dc}.ob-day{align-self:center;padding:.05rem .4rem;border-radius:.3rem;background:#fffc;font-size:.4375rem;color:var(--ob-mute)}.ob-bub{position:relative;max-width:82%;padding:.3rem .4rem .25rem;border-radius:.5rem;font-size:.5625rem;line-height:1.3;box-shadow:0 1px 1px #00000014;transform-origin:100% 100%}.ob-bub-in{align-self:flex-start;background:#fff;border-top-left-radius:.1rem;transform-origin:0 100%}.ob-bub-out{align-self:flex-end;background:#d9fdd3;border-top-right-radius:.1rem}.ob-meta{display:flex;justify-content:flex-end;align-items:center;gap:.15rem;margin-top:.1rem;font-size:.4rem;color:#7d8b88}.ob-link{color:#0b63a8;text-decoration:underline;word-break:break-all}.ob-preview{margin:-.05rem -.15rem .25rem;padding:.3rem .35rem;border-radius:.35rem;background:#0000000d;border-left:2px solid var(--ob-rose)}.ob-compose{position:absolute;left:.4rem;right:.4rem;top:calc(var(--vis) - 2.15rem);display:flex;align-items:center;gap:.3rem}.ob-field{position:relative;display:flex;align-items:center;min-width:0;flex:1;height:1.55rem;padding:0 .55rem;border-radius:1rem;background:#fff;font-size:.5625rem;color:var(--ob-ink);overflow:hidden;white-space:nowrap;box-shadow:0 1px 1px #00000014}.ob-field>*{flex-shrink:0}.ob-field .ob-placeholder{position:absolute;left:.55rem;color:#9aa5ab}.ob-send{display:grid;place-items:center;flex-shrink:0;width:1.55rem;height:1.55rem;border-radius:50%;background:#0f6b5c;color:#fff}.ob-caret{display:inline-block;width:1px;height:.7rem;margin-left:1px;background:#0f6b5c;vertical-align:middle;animation:ob-blink 1s steps(1) infinite}@keyframes ob-blink{50%{opacity:0}}.ob-cover{position:relative;display:grid;place-items:center;overflow:hidden;border-radius:.35rem;aspect-ratio:3 / 4;color:#fff;text-align:center}.ob-cover:before{content:"";position:absolute;inset:10%;border:1px solid rgb(255 255 255 / .55);border-radius:40% 40% .2rem .2rem}.ob-cover>span{position:relative;font-family:Fraunces,Georgia,serif;font-style:italic;font-size:.6875rem;line-height:1.1}.ob-cover-1{background:radial-gradient(circle at 50% 30%,#f9d9e5,#cd5484 75%)}.ob-cover-2{background:radial-gradient(circle at 50% 25%,#e8d39a,#8a6420 80%)}.ob-cover-3{background:radial-gradient(circle at 50% 25%,#6c7fb8,#1f2a52 80%)}.ob-cover-4{background:radial-gradient(circle at 50% 30%,#bfe0cf,#2f6b50 80%)}.ob-cover-3>span,.ob-cover-2>span{color:#f7e7b4}.ob-confetti{position:absolute;width:.35rem;height:.5rem;border-radius:.1rem}@media(prefers-reduced-motion:reduce){.ob-demo *,.ob-demo *:before,.ob-demo *:after{animation:none!important;transition:none!important}}.ob-demo.is-paused *,.ob-demo.is-paused *:after{animation-play-state:paused!important}