.hero-inner{grid-template-columns:1fr 1fr;gap:46px;padding-top:36px;padding-bottom:24px}
.weebu-demo{position:relative;z-index:2;width:100%;max-width:490px;justify-self:end;color:#fff;animation:product-in .8s both}
.demo-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 17px;font-size:18px;font-weight:600;letter-spacing:-.025em}
.demo-badge{font-size:12px;font-weight:400;letter-spacing:.02em;color:#e3c6ec}
.demo-stage{display:grid;grid-template-columns:minmax(0,1fr) 172px;align-items:center;gap:25px;position:relative}
.demo-phone{position:relative;width:224px;max-width:100%;aspect-ratio:480/1014;justify-self:center;overflow:hidden;border-radius:12% / 5.7%;background:#16111d;box-shadow:0 22px 50px #09001080,0 0 62px #bd82e232;isolation:isolate}
.demo-phone img,.demo-phone video{display:block;width:100%;height:100%;object-fit:fill}
.demo-phone [hidden],.weebu-demo [hidden]{display:none!important}
.demo-hotspots{position:absolute;inset:0;z-index:2}
.demo-hotspot{position:absolute;background:transparent;border:2px solid transparent;border-radius:7px;padding:0;transition:background .18s,border-color .18s}
.demo-hotspot:hover,.demo-hotspot:focus-visible{background:#be75d032;border-color:#b758bf;outline-offset:-2px}
.demo-hotspot span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.spot-place{left:35%;top:14%;width:31%;height:21%}.spot-road{left:67%;top:14%;width:29%;height:21%}.spot-chat{left:5%;top:39%;width:90%;height:15%}.spot-events{left:24%;top:89%;width:18%;height:9%}
.demo-choices{display:flex;flex-direction:column;gap:0}
.demo-choices button{display:flex;align-items:center;gap:9px;width:100%;min-height:55px;text-align:left;background:transparent;color:#e5d6ec;border:0;border-bottom:1px solid #ffffff26;padding:10px 0;font-size:14px;line-height:1.3;transition:color .18s,transform .18s}
.demo-index{font-size:11px;color:#ba9cc8;flex:none}.demo-choice-arrow{margin-left:auto;opacity:0;transition:opacity .2s}
.demo-choices button:hover{color:#fff;transform:translateX(3px)}.demo-choices button[aria-pressed=true]{color:#ffcef0;border-bottom-color:#f5b8e4}.demo-choices button[aria-pressed=true] .demo-choice-arrow{opacity:1}
.demo-choice-hint{font-size:12px;line-height:1.5;margin-top:18px;color:#d0b9dc;max-width:150px}
.demo-story{min-height:70px;margin-top:17px;max-width:460px}
.demo-description{font-size:15px;line-height:1.5;color:#eee3f3}
.demo-chat-gallery{border:0;border-bottom:1px solid #c594d5;color:#f5b8e4;background:transparent;padding:4px 0;font-size:14px;line-height:1.5;margin-top:6px}
.demo-controls{display:flex;align-items:center;gap:17px;flex-wrap:wrap;padding-top:10px;border-top:1px solid #ffffff26}
.demo-controls button{background:transparent;border:0;color:#f5dff9;padding:6px 0;font-size:13px;min-height:36px}.demo-controls button:disabled{opacity:.4;cursor:default}.demo-controls button:last-child{margin-left:auto}.demo-controls button:hover:not(:disabled){color:#fff;text-decoration:underline}
.demo-loading{position:absolute;left:10%;right:10%;bottom:10%;padding:8px 12px;border-radius:6px;background:#29103de8;text-align:center;color:white;font-size:14px;z-index:3}
.demo-status:empty{display:none}.demo-status{font-size:13px;line-height:1.5;margin-top:8px;color:#f5b8e4}.demo-no-script{font-size:13px}
@media(min-width:1100px){.hero-inner{min-height:665px}.hero h1{font-size:clamp(42px,4.25vw,64px)}}
@media(min-width:761px) and (max-width:1000px){.hero-inner{gap:25px;padding-inline:30px}.demo-stage{grid-template-columns:minmax(0,1fr) 128px;gap:15px}.demo-phone{width:195px}.demo-choices button{font-size:13px}.demo-heading{font-size:16px}}
@media(max-width:760px){.hero-inner{display:flex;flex-direction:column;align-items:stretch;gap:32px;padding:30px 24px 25px}.hero h1{font-size:39px}.hero-description{margin-top:20px}.weebu-demo{align-self:center;max-width:410px}.demo-stage{grid-template-columns:minmax(0,1fr) 132px;gap:17px}.demo-phone{width:198px}.demo-heading{font-size:17px;margin-bottom:15px}.demo-choices button{min-height:55px;font-size:14px;gap:6px}.demo-story{min-height:69px}.demo-controls{gap:14px}.demo-choice-hint{font-size:12px}.demo-badge{font-size:12px}.hero-foot{padding-inline:24px}}
@media(max-width:360px){.hero-inner{padding-inline:18px}.demo-stage{grid-template-columns:minmax(0,1fr) 120px;gap:12px}.demo-heading{flex-wrap:wrap}.demo-controls{gap:12px}}
@media(prefers-reduced-motion:reduce){.weebu-demo{animation:none}.demo-choices button,.demo-hotspot,.demo-choice-arrow{transition:none}}

/* Supplied 1024 × 1536 hand: screen x269 y126, 428 × 936.
   The scene crops the empty margins; all layers scale from the same coordinates. */
.weebu-demo{max-width:530px}
.demo-stage{grid-template-columns:minmax(0,1fr) 158px;gap:14px}
.demo-hand-stage{position:relative;width:100%;max-width:336px;aspect-ratio:680/1100;justify-self:center;isolation:isolate}
.demo-hand-visual{position:absolute;inset:0;overflow:hidden;pointer-events:none;mask-image:linear-gradient(to right,#000 82%,transparent),linear-gradient(to bottom,#000 94%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(to right,#000 82%,transparent),linear-gradient(to bottom,#000 94%,transparent);-webkit-mask-composite:source-in}
.demo-hand-visual img{position:absolute;width:150.588235%;max-width:none;height:auto;left:-23.529412%;top:-5.454545%}
.demo-hand-stage .demo-phone{position:absolute;left:16.029412%;top:6%;width:62.941176%;height:85.090909%;max-width:none;aspect-ratio:auto;border-radius:11.7% / 5.35%;box-shadow:none;background:#000}
.demo-hand-stage .demo-phone>.demo-home-image,.demo-hand-stage .demo-phone>.demo-video{position:absolute;width:109.45%;height:104.8%;max-width:none;left:-4.74%;top:-2.4%;object-fit:fill}
.demo-hand-stage .spot-place{left:33.6%;top:12.2%;width:33%;height:22%}.demo-hand-stage .spot-road{left:68%;top:12.2%;width:30%;height:22%}.demo-hand-stage .spot-chat{left:2%;top:38%;width:95%;height:16%}.demo-hand-stage .spot-events{left:22%;top:91%;width:21%;height:8%}
@media(min-width:761px) and (max-width:1000px){.demo-stage{grid-template-columns:minmax(0,1fr) 118px;gap:8px}}
@media(max-width:760px){.weebu-demo{max-width:440px}.demo-stage{display:flex;flex-direction:column;gap:4px}.demo-hand-stage{max-width:300px}.demo-choices{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:12px}.demo-choices button{font-size:13px;min-height:48px}.demo-choices .demo-choice-arrow,.demo-choices .demo-index{display:none}.demo-choice-hint{grid-column:1/-1;max-width:none;margin-top:10px;font-size:12px}.demo-story{margin-top:14px}}
@media(max-width:360px){.demo-choices{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Six product areas, contextual navigation and a pointer-local affordance. */
.demo-stage{grid-template-columns:minmax(0,1fr) 172px}
.demo-heading{margin-bottom:6px}
.demo-back{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 4px;color:#f5dff9;background:none;border:0;font-size:14px}
.demo-back:disabled{visibility:hidden}
.demo-back:hover{color:#fff;text-decoration:underline}
.demo-hotspot,.demo-hotspot:hover,.demo-hotspot:focus-visible{border:0;background:transparent;outline:0}
.demo-hotspot:focus-visible:after{content:'+';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:38px;height:38px;border:2px solid #fff;border-radius:50%;background:#6c258fcc;color:#fff;font-size:24px;box-shadow:0 0 0 3px #772b9a}
.demo-cursor{position:absolute;z-index:5;pointer-events:none;transform:translate(-50%,-50%);display:grid;place-items:center;width:36px;height:36px;border:2px solid #fff;border-radius:50%;background:#792d99bd;color:#fff;font-size:23px;line-height:1;box-shadow:0 2px 12px #1c072b80}
@media(hover:hover) and (pointer:fine){.demo-hotspot{cursor:none}}
.demo-hand-stage .spot-people{left:1%;top:12.2%;width:31%;height:22%}
.demo-hand-stage .spot-stories{left:0;top:91%;width:21%;height:8%}
.demo-choices button{font-size:14px;min-height:52px}
.demo-submenu{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.demo-submenu button{border:1px solid #b990c8;border-radius:6px;background:transparent;color:#eedff6;padding:8px 12px;min-height:44px;font-size:14px;line-height:1.3}
.demo-submenu button[aria-pressed=true]{color:#2b103b;background:#f5b8e4;border-color:#f5b8e4}
.demo-submenu button:hover{border-color:white}
.demo-footnote{color:#d0b9dc;font-size:12px;line-height:1.5;margin-top:10px}
.demo-choice-hint{font-size:14px;max-width:none;margin-top:14px}
.demo-controls button{font-size:14px;min-height:44px}
.demo-story{min-height:72px}
@media(min-width:761px) and (max-width:1000px){.demo-stage{grid-template-columns:minmax(0,1fr) 135px}.demo-choices button{font-size:14px}}
@media(max-width:760px){.demo-stage{display:flex}.demo-choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}.demo-choices button{font-size:14px;min-height:55px}.demo-submenu{gap:6px}.demo-submenu button{padding-inline:10px}}


@media(min-width:761px){.demo-story{min-height:104px}}
@media(min-width:761px) and (max-height:900px){
 .hero-inner{min-height:0;padding-top:16px;padding-bottom:16px}
 .demo-hand-stage{max-width:220px}
 .demo-choices button{min-height:46px;padding-block:6px}
 .demo-choice-hint{margin-top:10px}
 .demo-story{margin-top:8px}
 .demo-description{font-size:14px;line-height:1.45}
 .demo-submenu{margin-bottom:8px}
 .demo-controls{padding-top:0}
 .demo-footnote{margin-top:5px}
}