.demo{position:relative;width:100%;height:100%;background:#F4F5F7;font:12px/1.35 Inter,system-ui,sans-serif;color:#0E1726;overflow:hidden;text-align:left}
.d-top{display:flex;align-items:center;gap:7px;padding:12px 12px 8px;background:#F4F5F7}
.d-logo{width:24px;height:24px;border-radius:7px;background:#13233F url(/favicon.svg) center/cover}
.d-top b{display:block;font-size:12.5px}.d-top small{color:#5D6778;font-size:9.5px}
.d-scr{position:absolute;inset:46px 0 46px;padding:4px 12px;opacity:0;transform:translateX(14px);transition:opacity .45s,transform .45s}
.d-scr{transform:translateX(100%);opacity:1;visibility:hidden;transition:transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s .45s;background:#F4F5F7}.d-scr.on{visibility:visible;transition:transform .45s cubic-bezier(.2,.8,.2,1)}.d-scr.out{visibility:hidden;transform:translateX(-28%);transition:transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s .45s}.d-scr.out::after{content:"";position:absolute;inset:0;background:rgba(14,23,38,.12)}.d-scr.fade{transform:none;transition:none}
.d-scr.on{opacity:1;transform:none}
.d-tab{position:absolute;left:0;right:0;bottom:0;height:46px;background:#fff;border-top:1px solid #E4E7EC;display:flex;justify-content:space-between;padding:0 22px 6px;align-items:center;font-size:8.5px;color:#5D6778}
.d-tab span.on{color:#13233F;font-weight:700}
.d-h{font-size:19px;font-weight:800;letter-spacing:-.02em;margin:2px 0 2px}.d-sub{color:#5D6778;font-size:10.5px;margin:0 0 8px}
.d-card{background:#fff;border:1px solid #E4E7EC;border-radius:12px;padding:9px 10px;margin-bottom:7px}
.d-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px solid #EEF0F3}.d-row:first-child{border-top:0}
.d-ic{width:22px;height:22px;border-radius:7px;background:#EEF1F6;flex:none;display:grid;place-items:center;font-size:11px;color:#13233F}
.d-btn{display:block;text-align:center;background:#13233F;color:#fff;border-radius:10px;padding:8px;font-weight:700;font-size:11px}
.d-btn.soft{background:#EEF1F6;color:#13233F}
.d-lab{font-size:9px;color:#5D6778;margin-top:5px;display:flex;justify-content:space-between}
.d-in{border:1px solid #E4E7EC;border-radius:7px;padding:4px 7px;font-weight:600;font-size:11px;min-height:22px;background:#fff}
.d-pill{font-size:8.5px;font-weight:700;border-radius:99px;padding:1px 6px}.g{background:#E5F3EA;color:#25794A}.rd{background:#FBE7E5;color:#B5372B}.y{background:#FBF1DD;color:#8A6417}
.d-drop{border:1.5px dashed #C9CFD8;border-radius:12px;padding:18px 10px;text-align:center;color:#5D6778;font-size:10.5px}
.d-drop b{display:block;color:#0E1726;font-size:12px;margin-bottom:3px}
.d-pdf{display:flex;gap:8px;align-items:center;background:#fff;border:1px solid #E4E7EC;border-radius:10px;padding:8px;margin-top:10px;box-shadow:0 6px 16px rgba(19,35,63,.12)}
.d-pdf i{font-style:normal;background:#B5372B;color:#fff;border-radius:5px;font-size:8px;font-weight:800;padding:5px 4px}
.d-scr.on .d-pdf{animation:d-drop 1s .5s both}
@keyframes d-drop{from{opacity:0;transform:translateY(-60px) rotate(-4deg)}to{opacity:1;transform:none}}
.d-fill{opacity:.15}.d-scr.on .d-fill{animation:d-in .4s both;animation-delay:calc(.25s + var(--i)*.22s)}
@keyframes d-in{to{opacity:1}}
.d-ern .d-in{border-color:#B5372B}.d-ern .d-v{opacity:0}.d-scr.on .d-ern .d-v{animation:d-in .3s 1.9s both}
@keyframes d-ok{to{border-color:#E4E7EC}}@keyframes d-hide{to{opacity:0;width:0;padding:0;display:none}}
.d-chk{width:16px;height:16px;border-radius:5px;border:1.5px solid #C9CFD8;flex:none;display:grid;place-items:center;color:#fff;font-size:10px}
.d-scr.on .d-tick .d-chk{animation:d-tk .3s both;animation-delay:calc(.3s + var(--i)*.45s)}
@keyframes d-tk{to{background:#25794A;border-color:#25794A}}
.d-flag{border-color:#E9C987;background:#FFFBF2}
.d-scr.on .d-flag{animation:d-pulse 1s 1.8s 2}
@keyframes d-pulse{50%{box-shadow:0 0 0 4px rgba(216,181,122,.45)}}
.d-sheet{position:absolute;left:0;right:0;bottom:-46px;background:#fff;border-radius:16px 16px 0 0;padding:12px 12px 56px;box-shadow:0 -10px 30px rgba(19,35,63,.18);transform:translateY(100%);transition:transform .5s .6s}
.d-scr.on .d-sheet{transform:none}
.d-msg{border:1px solid #E4E7EC;border-radius:9px;padding:7px;font-size:10.5px;margin:6px 0 8px}
.d-bar{display:flex;gap:3px;margin:7px 0 5px}.d-bar i{flex:1;height:4px;border-radius:2px;background:#E4E7EC}.d-bar i.f{background:#13233F}.d-bar i.c{background:#D8B57A}
.d-big{background:linear-gradient(160deg,#13233F,#24406b);color:#fff;border-radius:14px;padding:12px}
.d-big small{font-size:8.5px;letter-spacing:.08em;opacity:.8;font-weight:700}.d-big b{display:block;font-size:24px;letter-spacing:-.02em;margin:2px 0}
.demo-cap{margin:14px 0 0;text-align:center;font-weight:600;color:#13233F;min-height:1.4em;font-size:15px}
.demo-cap span{color:#A17C3A;margin-right:6px}
@media(prefers-reduced-motion:reduce){.d-scr,.d-sheet{transition:none}.d-scr.on *{animation:none!important}.d-scr.on .d-chk{background:#25794A;border-color:#25794A}.d-fill,.d-ern .d-v,.d-pdf{opacity:1}.d-scr{transition:none!important}.c-swap .c-act:first-child{display:block}.c-swap .c-done{display:none}}

.d-chat{inset:0;z-index:3;padding:0;display:flex;flex-direction:column}
.c-top{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 8px;font-size:12.5px}.c-bk,.c-plus{width:22px;font-size:18px;color:#13233F;line-height:1}.c-plus{text-align:right}
.c-th{flex:1;padding:4px 10px;display:flex;flex-direction:column;gap:8px;overflow:hidden}
.c-me{align-self:flex-end;background:#13233F;color:#fff;border-radius:14px 14px 4px 14px;padding:7px 10px;max-width:82%;font-size:11px}
.c-bot{background:#fff;border:1px solid #E9ECF0;border-radius:14px 14px 14px 4px;padding:8px 9px;box-shadow:0 2px 8px rgba(19,35,63,.06);font-size:10.5px}
.c-who{display:flex;align-items:center;gap:5px;font-size:9px;font-weight:700;color:#5D6778;margin-bottom:4px}.c-sp{display:grid;place-items:center;width:16px;height:16px;border-radius:5px;background:linear-gradient(145deg,#13233F,#24406b);color:#C9A063;font-size:8px}
.c-dr{margin-left:auto;font-size:8px;letter-spacing:.04em;text-transform:uppercase;color:#7A5620;background:#F5ECDD;border-radius:99px;padding:1px 6px}
.c-act{margin-top:8px;border:1px solid #E4E7EC;border-radius:11px;padding:8px;background:#F8F9FB}.c-ah{display:flex;justify-content:space-between;align-items:center}.c-ah>span{display:flex;gap:6px;align-items:center}
.c-l{font-size:8px;font-weight:700;color:#5D6778;letter-spacing:.04em;margin:6px 0 2px}.c-f{background:#fff;border:1px solid #E4E7EC;border-radius:7px;padding:5px 7px;font-size:10.5px}
.c-btns{display:flex;gap:6px;margin-top:8px}.c-btns .d-btn{flex:1;padding:7px}.c-btns .soft{flex:.6}
.c-done{display:flex;gap:8px;align-items:center}.c-done small{display:block;color:#5D6778;font-size:9.5px}
.c-foot{display:flex;gap:6px;align-items:center;padding:8px 10px 14px;background:#F4F5F7;border-top:1px solid #E9ECF0}
.c-in{flex:1;background:#fff;border:1px solid #DDE1E7;border-radius:12px;padding:7px 9px;font-size:10.5px;min-height:16px;white-space:nowrap;overflow:hidden}.c-ph{color:#98A1AE}.c-typed:not(:empty)+.c-ph{display:none}
.c-typed.caret::after{content:"";display:inline-block;width:1px;height:12px;background:#13233F;vertical-align:-2px;margin-left:1px;animation:c-blink 1s steps(1) infinite}@keyframes c-blink{50%{opacity:0}}
.c-send{width:28px;height:28px;border-radius:9px;background:#13233F;color:#fff;display:grid;place-items:center;font-weight:800}
.c-a .c-me,.c-a .c-dots{display:none}.c-a.sent .c-me{display:block;animation:c-pop .3s both}.c-a.sent .c-dots{display:flex;animation:c-pop .3s .35s both}
.c-dots{gap:4px;align-self:flex-start;padding:9px 11px}.c-dots i{width:5px;height:5px;border-radius:50%;background:#98A1AE;animation:c-dot 1s infinite}.c-dots i:nth-child(2){animation-delay:.15s}.c-dots i:nth-child(3){animation-delay:.3s}
@keyframes c-dot{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-2px)}}
@keyframes c-pop{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
.d-scr.c-b.fade{transition:none}.c-b.on .c-bot{animation:c-pop .35s both}.c-b.on .c-act{animation:c-pop .35s 1.1s both}
.c-c .c-done{display:none}.c-c.on .c-ok{animation:c-press .35s 1.2s both;position:relative;overflow:hidden}.c-c.on .c-swap .c-act:first-child{animation:c-gone .01s 1.75s both}.c-c.on .c-done{display:flex;opacity:0;animation:c-pop .3s 1.75s both}
@keyframes c-gone{to{display:none;height:0;padding:0;margin:0;border:0;opacity:0}}
.d-press{position:relative;overflow:hidden}.d-scr.on .d-press{animation:c-press .35s var(--t) both}
@keyframes c-press{0%{transform:none;filter:none}30%,70%{transform:scale(.96);filter:brightness(1.45)}100%{transform:none;filter:none}}
.c-ok::after,.d-press::after{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px;border-radius:50%;background:rgba(255,255,255,.22);opacity:0}
.c-c.on .c-ok::after{animation:c-touch .45s 1.2s both}.d-scr.on .d-press::after{animation:c-touch .45s var(--t) both}
@keyframes c-touch{0%{opacity:0;transform:scale(.4)}35%{opacity:1}100%{opacity:0;transform:scale(1.7)}}
@media(prefers-reduced-motion:reduce){.d-scr.on *{animation:none!important}.c-a .c-me{display:block}}
.d-scr.on{z-index:4}
.c-hello{text-align:center;padding:26px 6px 0}.c-hello b{display:block;font-size:16px;letter-spacing:-.02em;margin:8px 0 4px}.c-hello p{color:#5D6778;font-size:10px;margin:0 0 10px}
.c-sp.lg{width:30px;height:30px;border-radius:10px;font-size:14px;margin:0 auto}
.c-chips{display:flex;flex-wrap:wrap;gap:5px;justify-content:center}.c-chips span{background:#fff;border:1px solid #E4E7EC;border-radius:99px;padding:4px 8px;font-size:9px;font-weight:600;color:#13233F}
.c-a.sent .c-hello{display:none}
.c-brief{padding:9px}.c-it{display:flex;gap:7px;align-items:center;padding:5px 0;border-top:1px solid #EEF0F3}.c-it:first-of-type{margin-top:5px}
.c-it b{display:block;font-size:10px}.c-it small{display:block;color:#5D6778;font-size:9px;line-height:1.3}
.c-th>.c-chips{justify-content:flex-start}
.c-a.sent .c-brief,.c-a.sent>.c-th>.c-chips{display:none}
.demo-cap{min-height:2.9em}.demo-cap .dc-n{color:#A17C3A;margin-right:6px}.demo-cap small{display:block;font-weight:400;color:#5D6778;font-size:13.5px;margin-top:2px}
.demo-nav{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:6px}
.dn-btn{width:44px;height:44px;border-radius:50%;border:1px solid #D5DAE2;background:#fff;color:#13233F;font-size:24px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0 0 3px}
.dn-btn:hover{background:#F4F5F7}.dn-btn:focus-visible,.dn-dot:focus-visible{outline:2px solid #A17C3A;outline-offset:2px}
.dn-dots{display:flex}.dn-dot{width:28px;height:44px;border:0;background:none;padding:0;cursor:pointer;display:grid;place-items:center}
.dn-dot::before{content:"";width:8px;height:8px;border-radius:50%;background:#C9CFD8;transition:width .2s}.dn-dot[aria-current=step]::before{background:#13233F;width:18px;border-radius:4px}
#demo{touch-action:pan-y}
/* manual / reduced-motion: render every step's finished state */
.demo.man .d-scr,.demo.man .d-sheet{transition:none!important}.demo.man .d-scr.on *,.demo.man .d-scr.on *::after{animation:none!important}
.demo.man .d-scr.on .d-chk{background:#25794A;border-color:#25794A}.demo.man .d-fill,.demo.man .d-ern .d-v,.demo.man .d-pdf{opacity:1}
.demo.man .c-c .c-swap .c-act:first-child{display:none}.demo.man .c-c .c-done{display:flex;opacity:1}
.demo.man .c-a.sent .c-me{display:block}.demo.man .c-a.sent .c-dots{display:flex}
@media(prefers-reduced-motion:reduce){.c-c .c-swap .c-act:first-child{display:none}.c-c .c-done{display:flex!important;opacity:1}.dn-dot::before{transition:none}}
/* real-app demo */
.rd{font:inherit}
.rd .d-scr{position:absolute;inset:0;padding:0;transform:none;visibility:visible;opacity:0;z-index:0;background:#F4F5F7;transition:opacity 0s .4s}
.rd .d-scr.on{opacity:1;z-index:1;transition:opacity .4s ease}
.rd .d-scr::after{display:none}
.rd .fr{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;display:block;opacity:0;z-index:0;transition:opacity 0s .35s}
.rd .fr.on{opacity:1;z-index:1;transition:opacity .35s ease}
.rd:not(.js) .d-scr:first-child,.rd:not(.js) .d-scr:first-child .fr:first-child{opacity:1}
.rd .tap{position:absolute;z-index:4;left:50%;top:50%;width:15%;aspect-ratio:1;margin:-7.5% 0 0 -7.5%;border-radius:50%;background:radial-gradient(circle,rgba(40,44,52,.34) 0 45%,rgba(40,44,52,.16) 62%,rgba(40,44,52,0) 72%);opacity:0;transform:scale(.55);pointer-events:none}
.rd .tap.go{animation:rdtap .75s ease-out both}
@keyframes rdtap{0%{opacity:0;transform:scale(1.25)}25%{opacity:1;transform:scale(.8)}55%{opacity:.9;transform:scale(.72)}100%{opacity:0;transform:scale(1.05)}}
.rd.man .tap{display:none}
@media(prefers-reduced-motion:reduce){.rd .d-scr,.rd .d-scr.on,.rd .fr,.rd .fr.on{transition:none}.rd .tap{display:none}}