.lss-demo{--demo-fg:var(--lss-ink);--demo-fg-rgb:var(--lss-ink-rgb);--demo-muted:rgb(var(--lss-ink-rgb) / .55);--demo-border:rgb(var(--lss-ink-rgb) / .16);--demo-active:var(--lss-ink);--demo-active-fg:var(--lss-paper);width:100%;color:var(--demo-fg);flex-direction:column;align-items:center;gap:clamp(1.75rem,4vw,2.75rem);display:flex}.lss-demo__layout{grid-template-columns:1fr;place-items:center;gap:clamp(2rem,5vw,4rem);width:100%;display:grid}@media (width>=900px){.lss-demo__benefits{padding-top:.5rem}}.lss-demo__stage{flex-direction:column;align-items:center;gap:clamp(1.25rem,2.5vw,1.75rem);display:flex}@media (width>=900px){.lss-demo__layout{grid-template-columns:auto minmax(0,1fr);justify-items:stretch}.lss-demo__stage{justify-self:center}}.lss-demo[data-demo-tone=navy]{--demo-fg:var(--lss-warm-white);--demo-fg-rgb:var(--lss-warm-white-rgb);--demo-muted:rgb(var(--lss-warm-white-rgb) / .55);--demo-border:rgb(var(--lss-white-rgb) / .2);--demo-active:var(--lss-warm-white);--demo-active-fg:var(--lss-navy)}.lss-demo__switch{border:1px solid var(--demo-border);border-radius:9999px;gap:2px;padding:3px;display:inline-flex}.lss-demo__switch-btn{color:var(--demo-muted);cursor:pointer;font-family:var(--lss-font-body);transition:background var(--lss-duration-fast) var(--lss-ease-out), color var(--lss-duration-fast) var(--lss-ease-out);background:0 0;border:0;border-radius:9999px;align-items:center;gap:.4rem;padding:.5rem 1rem;font-size:.8125rem;font-weight:650;display:inline-flex}.lss-demo__switch-btn svg{flex-shrink:0}.lss-demo__switch-btn:hover{color:var(--demo-fg)}.lss-demo__switch-btn.is-active{background:var(--demo-active);color:var(--demo-active-fg)}.lss-demo__switch-btn:focus-visible{outline:var(--lss-focus-ring);outline-offset:2px}.lss-demo__device{--device-w:clamp(272px, 27vw, 320px);width:var(--device-w);flex-direction:column;align-items:center;display:flex;position:relative}.lss-demo__frame{aspect-ratio:320/600;background:#0b0d10;border:10px solid #0b0d10;border-radius:50px;flex-direction:column;width:100%;display:flex;position:relative;box-shadow:0 0 0 1.5px #3a3f47,0 0 0 3px #16181c,inset 0 1px 1px #ffffff38,0 34px 60px -24px #060c168c,0 10px 24px -12px #060c1666}.lss-demo__frame:before,.lss-demo__frame:after{z-index:5;content:"";background:linear-gradient(#4a5058,#2a2e34);border-radius:2px;width:3px;position:absolute}.lss-demo__frame:before{height:58px;top:112px;left:-13px}.lss-demo__frame:after{height:80px;top:96px;right:-13px}.lss-demo__screen{background:#fff;border-radius:40px;flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden}.lss-demo__island{z-index:6;background:#000;border-radius:999px;justify-content:flex-end;align-items:center;width:86px;height:27px;padding-right:9px;display:flex;position:absolute;top:10px;left:50%;transform:translate(-50%)}.lss-demo__island:after{content:"";background:radial-gradient(circle at 35% 30%,#2d3a4d 0%,#0a0f18 60%);border-radius:50%;width:8px;height:8px}.lss-demo__statusbar{color:#0a0a0a;justify-content:space-between;align-items:center;padding:14px 23px 6px;display:flex}.lss-demo__clock{font-family:var(--lss-font-heading);letter-spacing:-.01em;font-size:.8rem;font-weight:700}.lss-demo__signal{align-items:center;gap:5px;display:flex}.lss-demo__appbar{background:#f7f7faf0;border-bottom:1px solid #0f1c2e17;align-items:center;gap:8px;padding:7px 14px 9px;display:flex}.lss-demo__avatar{color:#fff;background:linear-gradient(160deg,#c8ccd4,#9aa1ad);border-radius:50%;flex-shrink:0;place-items:center;width:30px;height:30px;font-size:.66rem;font-weight:700;display:grid}.lss-demo__appbar-text{flex-direction:column;min-width:0;display:flex}.lss-demo__appbar-name{color:#0a0a0a;font-size:.7rem;font-weight:650;line-height:1.25}.lss-demo__appbar-sub{color:#0f1c2e73;font-size:.58rem;line-height:1.3}.lss-demo__thread{flex-direction:column;flex:1;justify-content:flex-end;gap:7px;padding:12px 12px 6px;display:flex;overflow:hidden}.lss-demo__line{max-width:82%;animation:lss-demo-in .32s var(--lss-ease-out) both;border-radius:17px;padding:7px 11px;font-size:.7rem;line-height:1.4}.lss-demo__line--in{color:#0a0a0a;background:#e9e9eb;border-bottom-left-radius:5px;align-self:flex-start}.lss-demo__line--out{color:#fff;background:linear-gradient(#2b96ff,#0b7cf6);border-bottom-right-radius:5px;align-self:flex-end}.lss-demo[data-demo-active=whatsapp] .lss-demo__line--out{background:linear-gradient(#34c26a,#1faa55)}.lss-demo__line--note{color:#0f1c2e6b;max-width:94%;font-family:var(--lss-font-mono);letter-spacing:.04em;text-align:center;text-transform:uppercase;background:0 0;align-self:center;padding:2px 0;font-size:.54rem;font-weight:650}.lss-demo__line--missed{color:var(--lss-lost-red)}.lss-demo__line--booked{background:rgb(var(--lss-booked-green-rgb) / .15);color:#0f8f5b;max-width:94%;font-family:var(--lss-font-mono);letter-spacing:.04em;text-align:center;text-transform:uppercase;border-radius:10px;align-self:center;padding:6px 12px;font-size:.58rem;font-weight:700}@keyframes lss-demo-in{0%{opacity:0;transform:translateY(8px)scale(.97)}to{opacity:1;transform:none}}.lss-demo__typing{background:#e9e9eb;border-radius:17px 17px 17px 5px;align-self:flex-start;gap:3px;padding:9px 12px;display:flex}.lss-demo__typing span{background:#0f1c2e59;border-radius:50%;width:5px;height:5px;animation:1.2s ease-in-out infinite lss-demo-typing}.lss-demo__typing span:nth-child(2){animation-delay:.16s}.lss-demo__typing span:nth-child(3){animation-delay:.32s}@keyframes lss-demo-typing{0%,60%,to{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}.lss-demo__homebar{background:#0f1c2e42;border-radius:999px;align-self:center;width:36%;height:5px;margin:4px 0 8px}.lss-demo__stamp{top:27%;right:calc(var(--device-w) * -.08);z-index:7;border-radius:var(--lss-radius-sm);background:var(--lss-yellow);color:var(--lss-on-accent);opacity:0;transition:opacity var(--lss-duration-base) var(--lss-ease-out), transform var(--lss-duration-base) var(--lss-ease-out);flex-direction:column;padding:.45rem .7rem;display:flex;position:absolute;transform:translateY(6px);box-shadow:0 10px 22px -10px #060c1680}.lss-demo__stamp.is-shown{opacity:1;transform:none}.lss-demo__stamp-value{font-family:var(--lss-font-heading);letter-spacing:-.02em;font-size:1.1rem;font-weight:780;line-height:1}.lss-demo__stamp-label{font-family:var(--lss-font-mono);letter-spacing:.06em;text-transform:uppercase;font-size:.55rem;font-weight:700}.lss-demo__benefits{flex-direction:column;gap:clamp(1rem,2vw,1.4rem);width:100%;max-width:34rem;margin:0;padding:0;list-style:none;display:flex}.lss-demo__benefit{align-items:flex-start;gap:var(--lss-space-3);display:flex}.lss-demo__benefit-tick{background:rgb(var(--lss-yellow-rgb) / .3);width:1.5rem;height:1.5rem;color:var(--lss-deep-amber);border-radius:9999px;flex-shrink:0;place-items:center;margin-top:.1rem;display:grid}.lss-demo[data-demo-tone=navy] .lss-demo__benefit-tick{background:rgb(var(--lss-yellow-rgb) / .18);color:var(--lss-yellow)}.lss-demo__benefit-text{flex-direction:column;gap:.2rem;min-width:0;display:flex}.lss-demo__benefit-title{color:var(--demo-fg);font-family:var(--lss-font-heading);letter-spacing:-.01em;font-size:clamp(1rem,1.25vw,1.0625rem);font-weight:700;line-height:1.3}.lss-demo__benefit-body{color:rgb(var(--demo-fg-rgb) / .62);font-size:var(--lss-text-sm);line-height:1.6}.lss-demo__replay{margin-top:var(--lss-space-4);color:rgb(var(--demo-fg-rgb) / .45);cursor:pointer;font-family:var(--lss-font-body);background:0 0;border:0;align-items:center;gap:.4rem;padding:.3rem .5rem;font-size:.75rem;font-weight:650;display:inline-flex}.lss-demo__replay:hover{color:var(--demo-fg)}.lss-demo__cta{align-items:center;gap:var(--lss-space-4);text-align:center;flex-direction:column;display:flex}.lss-demo__cta-note{max-width:46ch;color:rgb(var(--demo-fg-rgb) / .5);margin:0;font-size:.8125rem;line-height:1.55}@media (width<=560px){.lss-demo__switch-btn{padding:.5rem .75rem}.lss-demo__device{--device-w:min(300px, 76vw)}.lss-demo__stamp{top:30%;right:calc(var(--device-w) * -.05);padding:.35rem .6rem}.lss-demo__stamp-value{font-size:.9rem}}@media (prefers-reduced-motion:reduce){.lss-demo__line,.lss-demo__typing span{animation:none}.lss-demo__stamp{transition:none}}
