@layer layout{.hero-canvas{--canvas-tone:var(--studio);--canvas-ink:var(--studio-ink);--canvas-clock:paused;isolation:isolate;width:min(100%,600px);margin-inline:auto;position:relative}.hero-canvas[data-stage=launch]{--canvas-tone:var(--launch);--canvas-ink:var(--launch-ink)}.hero-canvas[data-stage=operate]{--canvas-tone:var(--operate);--canvas-ink:var(--operate-ink)}.hero-canvas[data-running=true]{--canvas-clock:running}.hero-canvas:before{content:"";z-index:-1;border:1px solid rgba(var(--violet-rgb), .08);pointer-events:none;background:linear-gradient(150deg,#e8e0f2,#f2e8e1);border-radius:28px;position:absolute;inset:28px -10px 33px 13px;transform:rotate(2.5deg)}.hc-window{border:1px solid rgba(var(--ink-rgb), .1);background:#fffdf8;border-radius:22px;overflow:hidden;box-shadow:0 24px 60px #3a285b1c,0 3px 9px #3a285b0a,inset 0 1px #fff}.hc-chrome{border-bottom:1px solid rgba(var(--ink-rgb), .07);grid-template-columns:auto 1fr 28px;align-items:center;gap:10px;height:49px;padding-inline:18px;display:grid}.hc-brand{color:var(--ink);letter-spacing:-.035em;align-items:center;gap:7px;font-size:.82rem;font-weight:730;display:inline-flex}.hc-demo-label{color:var(--muted);white-space:nowrap;justify-self:end;align-items:center;gap:6px;font-size:.59rem;display:inline-flex}.hc-demo-label i{background:var(--success);width:5px;height:5px;box-shadow:0 0 0 3px rgba(var(--operate-rgb), .08);border-radius:50%}.hc-play{border:1px solid rgba(var(--ink-rgb), .09);width:28px;height:28px;color:var(--ink-soft);cursor:pointer;background:0 0;border-radius:8px;place-items:center;display:grid}.hc-play:hover{color:var(--violet-deep);background:rgba(var(--violet-rgb), .06)}.hc-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:9px 12px 0;display:grid}.hc-tabs button{min-width:0;min-height:42px;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:9px 9px 0 0;align-items:center;gap:7px;padding:7px 10px 10px;transition:background .18s,color .18s;display:flex;position:relative;overflow:hidden}.hc-tabs button:hover{background:rgba(var(--violet-rgb), .035);color:var(--ink)}.hc-tabs button[data-active=true]{background:color-mix(in srgb, var(--canvas-tone) 6%, #fffdf8);color:var(--ink)}.hc-tab-icon{color:var(--muted);display:inline-flex}.hc-tabs button[data-active=true] .hc-tab-icon{color:var(--canvas-ink)}.hc-tabs strong{font-size:.75rem;font-weight:680}.hc-tab-number{color:rgba(var(--ink-rgb), .32);font-family:var(--font-mono,monospace);margin-left:auto;font-size:.52rem}.hc-progress{background:var(--canvas-tone);transform-origin:0;height:2px;position:absolute;inset:auto 0 0;transform:scaleX(0)}.hc-tabs button[data-active=true] .hc-progress{transform:scaleX(1)}.hc-panel{padding:20px 22px 18px}.hc-panel-heading{min-height:66px}.hc-panel-heading>span{color:var(--canvas-ink);letter-spacing:.09em;text-transform:uppercase;margin-bottom:7px;font-size:.59rem;font-weight:650;display:block}.hc-panel-heading h3{max-width:25em;color:var(--ink);letter-spacing:-.035em;text-wrap:pretty;font-size:1.16rem;font-weight:660;line-height:1.25}.hc-stage{height:314px}.hc-scene{height:100%;position:relative}.hc-studio{isolation:isolate}.hc-source{border:1px solid rgba(var(--ink-rgb), .08);width:33%;height:211px;box-shadow:0 9px 24px rgba(var(--ink-rgb), .09);background:#fff;border-radius:13px;flex-direction:column;margin:0;padding:10px;display:flex;position:absolute;top:32px;left:3%;transform:rotate(-6deg)}.hc-source figcaption{color:var(--ink-soft);white-space:nowrap;align-items:center;gap:5px;font-size:.55rem;display:flex}.hc-source-photo{background:#f0ede7;border-radius:5px;flex:1;margin-top:10px;position:relative}.hc-source-photo img{object-fit:contain;filter:saturate(.82);padding:5px}.hc-source-meta{color:#a3978d;letter-spacing:.04em;padding-top:9px;font-size:.45rem}.hc-result{background:#e8ab78;border-radius:15px;width:58%;height:298px;margin:0;position:absolute;inset:0 0 auto auto;overflow:hidden;box-shadow:0 10px 26px #884d261f}.hc-result>img{object-fit:cover;object-position:center 20%}.hc-result figcaption{color:#48744f;background:#fffdf8f0;border:1px solid #ffffffb3;border-radius:6px;align-items:center;gap:4px;max-width:calc(100% - 20px);padding:5px 7px;font-size:.51rem;font-weight:650;display:flex;position:absolute;top:11px;right:10px}.hc-transform{z-index:2;background:var(--violet-deep);width:44px;height:44px;box-shadow:0 4px 13px rgba(var(--violet-rgb), .18);color:#fff;border:4px solid #fffdf8;border-radius:13px;place-items:center;display:grid;position:absolute;top:105px;left:33%}.hc-transform:before{content:"";z-index:-1;border-top:1px dashed rgba(var(--violet-rgb), .4);width:22px;position:absolute;right:calc(100% + 4px)}.hc-output{z-index:3;border:1px solid rgba(var(--ink-rgb), .07);width:64%;min-height:59px;box-shadow:0 8px 25px rgba(var(--ink-rgb), .1);background:#fffdf8f7;border-radius:12px;align-items:center;gap:10px;padding:12px 14px;display:flex;position:absolute;bottom:1px;left:1%}.hc-output-check{color:#507b52;background:#e8f0e6;border-radius:50%;flex-shrink:0;place-items:center;width:31px;height:31px;display:grid}.hc-output>span:nth-child(2){gap:4px;min-width:0;display:grid}.hc-output strong{color:var(--ink);font-size:.67rem;font-weight:650}.hc-output small{color:var(--muted);font-size:.57rem;line-height:1.3}.hc-output>svg{color:var(--muted);flex-shrink:0;margin-left:auto}.hc-launch{flex-direction:column;align-items:center;gap:14px;display:flex}.hc-store{width:100%;height:266px;box-shadow:0 8px 19px rgba(var(--ink-rgb), .06);background:#fff;border:1px solid #e6ddd4;border-radius:13px;flex-shrink:0;transition:width .5s cubic-bezier(.16,1,.3,1);overflow:hidden}.hc-store-browser{background:#f8f5ee;border-bottom:1px solid #eee8e0;align-items:center;gap:9px;height:29px;padding-inline:10px;display:flex}.hc-store-browser>span:first-child{gap:3px;display:flex}.hc-store-browser i{background:#d6cdc3;border-radius:50%;width:4px;height:4px}.hc-store-browser small{color:#8a7e72;flex:1;justify-content:center;align-items:center;gap:4px;font-size:.48rem;display:flex}.hc-store-ready{color:#877160;font-size:.47rem}.hc-store-page{padding:12px}.hc-store-nav{color:#60513f;align-items:center;gap:10px;height:27px;margin-bottom:10px;display:flex}.hc-store-nav>strong{letter-spacing:-.075em;font-family:Georgia,serif;font-size:1.25rem;font-weight:500}.hc-store-nav>span{letter-spacing:.12em;margin-left:auto;font-size:.36rem}.hc-store-nav>svg{margin-left:5px}.hc-store-hero{background:#f1e5d5;border-radius:7px;grid-template-columns:1fr 46%;height:155px;display:grid;overflow:hidden}.hc-store-copy{flex-direction:column;justify-content:center;align-items:flex-start;gap:10px;padding:12px 15px;display:flex}.hc-store-copy>small{color:#9a6c4e;letter-spacing:.05em;text-transform:uppercase;font-size:.39rem}.hc-store-copy>strong{color:#614331;letter-spacing:-.045em;font-family:Georgia,serif;font-size:clamp(1rem,1.55vw,1.35rem);font-weight:400;line-height:1.05}.hc-store-copy>span{color:#fff5e9;background:#8e5438;border-radius:3px;place-items:center;width:34px;height:23px;display:grid}.hc-store-photo{position:relative}.hc-store-photo img{object-fit:cover;object-position:center 15%}.hc-store-details{color:#847564;justify-content:center;gap:18px;padding-top:10px;display:flex}.hc-store-details>span{white-space:nowrap;align-items:center;gap:4px;font-size:.45rem;display:inline-flex}.hc-launch[data-mobile=true] .hc-store{width:205px}.hc-launch[data-mobile=true] .hc-store-page{padding:9px}.hc-launch[data-mobile=true] .hc-store-nav{margin-bottom:6px}.hc-launch[data-mobile=true] .hc-store-nav>span{font-size:.29rem}.hc-launch[data-mobile=true] .hc-store-hero{grid-template-columns:1fr 44%;height:164px}.hc-launch[data-mobile=true] .hc-store-copy{gap:8px;padding:9px}.hc-launch[data-mobile=true] .hc-store-copy>strong{font-size:.96rem}.hc-launch[data-mobile=true] .hc-store-copy>small{font-size:.34rem}.hc-launch[data-mobile=true] .hc-store-details{gap:8px}.hc-launch[data-mobile=true] .hc-store-details>span{font-size:.35rem}.hc-action{border:1px solid rgba(var(--ink-rgb), .1);min-height:33px;color:var(--ink-soft);cursor:pointer;background:#fff;border-radius:8px;justify-content:center;align-items:center;gap:8px;padding:7px 12px;font-size:.65rem;font-weight:600;transition:background .18s,border-color .18s;display:inline-flex}.hc-action:hover{border-color:rgba(var(--violet-rgb), .3);background:#f7f3fc}.hc-device-action{padding-block:5px}.hc-operate{flex-direction:column;gap:14px;display:flex}.hc-order{border-bottom:1px solid rgba(var(--ink-rgb), .07);align-items:center;gap:9px;min-height:41px;padding-bottom:9px;display:flex}.hc-order-icon{width:33px;height:33px;color:var(--operate-ink);background:#e9f2f0;border-radius:9px;place-items:center;display:grid}.hc-order>span:nth-child(2){gap:4px;display:grid}.hc-order small{color:var(--muted);font-size:.59rem}.hc-order strong{color:var(--ink);font-size:.79rem;font-weight:650}.hc-draft-label{color:var(--operate-ink);margin-left:auto;font-size:.53rem}.hc-customer{align-items:flex-start;gap:9px;display:flex}.hc-customer>span{color:#8b7562;background:#f0e8df;border-radius:50%;flex-shrink:0;place-items:center;width:25px;height:25px;font-size:.49rem;display:grid}.hc-customer p{color:var(--ink-soft);background:#f6f2ec;border-radius:0 9px 9px;padding:7px 11px;font-size:.78rem;line-height:1.5}.hc-reply{background:#f8f5fc;border:1px solid #e4deef;border-radius:11px;margin-left:34px;padding:12px 13px;transition:border-color .22s,background .22s}.hc-reply-author{color:var(--violet-deep);align-items:center;gap:6px;display:flex}.hc-reply-author strong{font-size:.71rem;font-weight:660}.hc-reply-author>span{color:var(--violet);margin-left:auto}.hc-reply p{color:var(--ink-soft);margin-top:6px;font-size:.78rem;line-height:1.55}.hc-context-facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding-block:2px;display:grid}.hc-context-facts li{min-width:0;color:var(--operate-ink);gap:6px;display:flex}.hc-context-facts li[data-state=attention]{color:var(--studio-ink)}.hc-context-facts li>svg{flex-shrink:0;margin-top:1px}.hc-context-facts li>span{gap:3px;display:grid}.hc-context-facts strong{color:var(--ink-soft);font-size:.6rem;font-weight:600}.hc-context-facts small{color:var(--muted);font-size:.53rem;line-height:1.35}.hc-approve{border-color:var(--violet-deep);background:var(--violet-deep);color:#fff;align-self:flex-end;margin-top:auto}.hc-approve:hover{border-color:var(--violet);background:var(--violet)}.hc-operate[data-approved=true] .hc-reply{background:#f1f7f0;border-color:#cddfd1}.hc-operate[data-approved=true] .hc-approve{color:#487147;background:#eaf2e7;border-color:#d1dfd0}.hc-shared-context{border-top:1px solid rgba(var(--ink-rgb), .06);min-height:36px;color:var(--muted);align-items:center;gap:7px;padding:9px 20px;font-size:.55rem;display:flex}.hc-shared-context>span{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.hc-shared-context>svg{color:var(--violet);flex-shrink:0}.hc-shared-context>svg:last-child{color:#7f947f;margin-left:auto}.hc-note{color:var(--muted);text-align:center;margin:13px 12px 0;font-size:.58rem;line-height:1.5}.hero-canvas button:focus-visible,.hc-panel:focus-visible{outline:2px solid var(--violet);outline-offset:-3px}@media (prefers-reduced-motion:no-preference){.hero-canvas[data-autoplay=true] .hc-tabs button[data-active=true] .hc-progress{animation:hc-step-progress var(--canvas-duration) linear both;animation-play-state:var(--canvas-clock)}.hc-stage{animation:.48s cubic-bezier(.16,1,.3,1) both hc-stage-enter}.hc-source{animation:.8s cubic-bezier(.16,1,.3,1) both hc-source-enter}.hc-result{animation:.95s cubic-bezier(.16,1,.3,1) both hc-result-enter}.hc-output{animation:.8s cubic-bezier(.16,1,.3,1) .22s both hc-output-enter}.hc-reply{animation:.65s cubic-bezier(.16,1,.3,1) .15s both hc-stage-enter}}@keyframes hc-step-progress{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes hc-stage-enter{0%{opacity:.65;transform:translateY(6px)}to{opacity:1;transform:none}}@keyframes hc-source-enter{0%{transform:translate(10px,8px)rotate(-2deg)}to{transform:rotate(-6deg)}}@keyframes hc-result-enter{0%{transform:translate(6px,8px)scale(.98)}to{transform:none}}@keyframes hc-output-enter{0%{opacity:.65;transform:translateY(8px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.hero-canvas *,.hero-canvas :before{transition:none!important;animation:none!important}}@media (max-width:559px){.hero-canvas:before{inset-inline:8px -5px;transform:rotate(1.5deg)}.hc-window{border-radius:18px}.hc-chrome{grid-template-columns:auto 1fr 29px;gap:8px;height:45px;padding-inline:13px}.hc-brand{gap:5px;font-size:.77rem}.hc-brand img{width:20px;height:20px}.hc-demo-label{gap:4px;font-size:.49rem}.hc-play{width:29px;height:31px}.hc-tabs{gap:3px;padding-inline:8px}.hc-tabs button{gap:5px;min-height:43px;padding-inline:7px}.hc-tabs strong{font-size:.65rem}.hc-tab-number{display:none}.hc-tab-icon svg{width:14px;height:14px}.hc-panel{padding:18px 14px 15px}.hc-panel-heading{min-height:65px}.hc-panel-heading h3{font-size:1.05rem}.hc-stage{height:303px}.hc-source{width:37%;height:191px;padding:8px;top:34px;left:1%}.hc-source figcaption{gap:3px;font-size:.47rem}.hc-source-meta{font-size:.39rem}.hc-result{width:57%;height:281px}.hc-result figcaption{padding:5px;font-size:.46rem;right:7px}.hc-transform{border-width:3px;border-radius:10px;width:37px;height:37px;top:111px;left:33%}.hc-transform svg{width:16px}.hc-output{gap:8px;width:76%;min-height:54px;padding:10px;bottom:3px}.hc-output strong{font-size:.6rem}.hc-output small{font-size:.51rem}.hc-output-check{width:27px;height:27px}.hc-store{height:258px}.hc-launch{gap:11px}.hc-store-page{padding:10px}.hc-store-copy{padding:11px}.hc-store-copy>strong{font-size:1.06rem}.hc-operate{gap:9px}.hc-customer{gap:6px}.hc-customer>span{width:23px;height:23px}.hc-customer p{padding:6px 9px;font-size:.68rem}.hc-reply{margin-left:28px;padding:10px}.hc-reply p{font-size:.68rem;line-height:1.48}.hc-context-facts{gap:6px}.hc-context-facts li{gap:4px}.hc-context-facts strong{font-size:.46rem}.hc-context-facts small{font-size:.43rem}.hc-action{min-height:35px;font-size:.58rem}.hc-shared-context{padding-inline:14px;font-size:.5rem}.hc-note{margin-top:11px;font-size:.53rem}}@media (max-width:359px){.hc-demo-label{font-size:.43rem}.hc-panel{padding-inline:12px}.hc-panel-heading h3{font-size:.97rem}.hc-stage{height:315px}.hc-source figcaption{font-size:.42rem}.hc-result figcaption{font-size:.4rem}.hc-source-photo{margin-top:7px}.hc-context-facts small{display:none}.hc-draft-label{font-size:.47rem}}}
