/* Home page: animated designer demo. */
.how-grid{grid-template-columns:1fr !important;gap:40px !important;}
.how-visual{order:2 !important;}
@media (min-width:900px){.how .steps{flex-direction:row;gap:32px;}.how .step{flex:1;}}
.nsd{width:100%;max-width:1000px;margin:0 auto;font-family:var(--nss-body,'Figtree',system-ui,sans-serif);}
.nsd-win{position:relative;background:#fff;border:1px solid #dcebe7;border-radius:18px;box-shadow:0 40px 80px -40px rgba(11,59,54,.5),0 2px 0 rgba(255,255,255,.8) inset;overflow:hidden;}
.nsd-bar{display:flex;align-items:center;gap:6px;padding:11px 14px;background:#f3f8f6;border-bottom:1px solid #e3eeeb;}
.nsd-bar i{width:10px;height:10px;border-radius:50%;background:#cfe0db;}
.nsd-bar span{margin-left:10px;font:600 12px/1 var(--nss-body,system-ui);color:#6a7c78;letter-spacing:.02em;}
.nsd-body{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.45fr);gap:22px;padding:20px;}
.nsd-lab{font:700 10.5px/1 var(--nss-body,system-ui);letter-spacing:.14em;text-transform:uppercase;color:#7d8c89;margin:0 0 9px;}
.nsd-chips{display:flex;gap:8px;margin-bottom:18px;}
.nsd-chip{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;padding:5px;border:1.5px solid #e3eeeb;border-radius:10px;background:#fff;transition:border-color .25s,box-shadow .25s,transform .25s;}
.nsd-chip img{display:block;width:100%;aspect-ratio:591/1004;object-fit:cover;object-position:top;border-radius:6px;max-height:84px;}
.nsd-chip b{font:700 10px/1.1 var(--nss-body,system-ui);color:#0b3b36;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nsd-chip.on{border-color:#0F766E;box-shadow:0 0 0 3px rgba(15,118,110,.14);}
.nsd-chip.hot{transform:scale(.95);}
.nsd-rows{display:flex;flex-direction:column;gap:7px;margin-bottom:14px;min-height:112px;}
.nsd-row{display:none;gap:6px;}
.nsd-row.show{display:flex;animation:nsd-in .4s cubic-bezier(.2,.8,.2,1);}
.nsd-f{flex:1.2;min-width:0;height:30px;padding:0 9px;border:1px solid #d3e3df;border-radius:8px;background:#fbfdfc;font:600 12px/28px var(--nss-body,system-ui);color:#0b3b36;white-space:nowrap;overflow:hidden;}
.nsd-f2{flex:1;font-weight:500;color:#4b5a57;}
.nsd-f.typing{border-color:#14b8a6;box-shadow:0 0 0 3px rgba(20,184,166,.16);}
.nsd-f.typing::after{content:"";display:inline-block;width:1.5px;height:13px;margin-left:1px;vertical-align:-2px;background:#0F766E;animation:nsd-blink .7s steps(1) infinite;}
.nsd-btns{display:flex;flex-wrap:wrap;gap:7px;}
.nsd-btn{padding:8px 11px;border:1px solid #cfe3de;border-radius:999px;background:#fff;font:700 11px/1 var(--nss-body,system-ui);color:#0F766E;transition:transform .2s,background .2s,border-color .2s;white-space:nowrap;}
.nsd-btn.hot{transform:scale(.93);background:#EAF7F3;border-color:#14b8a6;}
.nsd-r{display:flex;flex-direction:column;gap:10px;min-width:0;}
.nsd-count{font:600 12px/1 var(--nss-body,system-ui);color:#6a7c78;}
.nsd-count b{color:#0F766E;font-weight:800;}
.nsd-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start;flex:1;}
.nsd-card{opacity:0;transform:translateY(14px) scale(.92);transition:opacity .5s,transform .6s cubic-bezier(.2,1.1,.3,1);}
.nsd-card.show{opacity:1;transform:none;}
.nsd-cq{container-type:inline-size;}
.nsd-ci{position:relative;aspect-ratio:591/1004;border-radius:5cqw;overflow:hidden;background:#fff center/cover no-repeat;box-shadow:0 14px 26px -14px rgba(11,59,54,.55),0 0 0 1px rgba(11,59,54,.08);background-image:var(--bgi);transition:filter .3s;}
.nsd-ci[data-t="1"]{--px:198;--py:250;--pw:196;--ph:205;--ny:565;--ns:34;--nc:#12386b;--yy:604;--ys:19;--yc:#444;--lx:226;--ly:60;--lw:140;--rad:7cqw;--bgi:url(demo/bg-p1-s.jpg);}
.nsd-ci[data-t="2"]{--px:216;--py:330;--pw:160;--ph:160;--ny:642;--ns:30;--nc:#7a1a1a;--yy:678;--ys:16;--yc:#7a1a1a;--lx:246;--ly:70;--lw:100;--rad:50%;--bgi:url(demo/bg-p2-s.jpg);}
.nsd-ci[data-t="3"]{--px:216;--py:300;--pw:160;--ph:180;--ny:592;--ns:30;--nc:#0b6b6b;--yy:626;--ys:15;--yc:#0b6b6b;--lx:246;--ly:56;--lw:100;--rad:9cqw;--bgi:url(demo/bg-p3-s.jpg);}
.nsd-ph{position:absolute;left:calc(var(--px) / 591 * 100%);top:calc(var(--py) / 1004 * 100%);width:calc(var(--pw) / 591 * 100%);height:calc(var(--ph) / 1004 * 100%);object-fit:cover;border-radius:var(--rad);opacity:0;transform:scale(.7);transition:opacity .45s,transform .55s cubic-bezier(.2,1.3,.4,1);}
.nsd-ci.has-photo .nsd-ph{opacity:1;transform:none;}
.nsd-nm,.nsd-ps{position:absolute;left:0;right:0;text-align:center;white-space:nowrap;line-height:1;}
.nsd-nm{top:calc((var(--ny) - var(--ns) * .9) / 1004 * 100%);font-size:calc(var(--ns) / 591 * 100cqw);font-weight:800;color:var(--nc);}
.nsd-ps{top:calc((var(--yy) - var(--ys) * .9) / 1004 * 100%);font-size:calc(var(--ys) / 591 * 100cqw);font-weight:600;color:var(--yc);}
.nsd-nm em,.nsd-ps em{font-style:normal;opacity:.28;}
.nsd-logo{position:absolute;left:calc(var(--lx) / 591 * 100%);top:calc(var(--ly) / 1004 * 100%);width:calc(var(--lw) / 591 * 100%);aspect-ratio:2.2/1;opacity:0;transform:scale(.6);transition:opacity .4s,transform .5s cubic-bezier(.2,1.3,.4,1);background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 50'%3E%3Cpath d='M18 4l12 7v14l-12 7-12-7V11z' fill='%230F766E'/%3E%3Cpath d='M18 12l5 3v6l-5 3-5-3v-6z' fill='%23fff'/%3E%3Crect x='38' y='14' width='58' height='7' rx='3.500' fill='%230b3b36'/%3E%3Crect x='38' y='26' width='38' height='5' rx='2.500' fill='%2314b8a6'/%3E%3C/svg%3E");}
.nsd-ci[data-t="2"] .nsd-logo,.nsd-ci[data-t="3"] .nsd-logo{filter:brightness(0) invert(1);}
.nsd-ci.has-logo .nsd-logo{opacity:1;transform:none;}
.nsd-ci.swap{animation:nsd-swap .5s cubic-bezier(.2,.8,.2,1);}
.nsd-order{position:relative;display:flex;align-items:center;justify-content:center;height:42px;border-radius:999px;background:#0F766E;color:#fff;font:700 13px/1 var(--nss-body,system-ui);overflow:hidden;transition:transform .2s,background .3s;}
.nsd-order span{position:absolute;transition:opacity .3s,transform .3s;}
.nsd-order .o2{opacity:0;transform:translateY(10px);}
.nsd-order.hot{transform:scale(.96);}
.nsd-order.done{background:#0b3b36;}
.nsd-order.done .o1{opacity:0;transform:translateY(-10px);}
.nsd-order.done .o2{opacity:1;transform:none;}
.nsd-toast{position:absolute;left:50%;bottom:16px;transform:translate(-50%,20px);padding:10px 16px;border-radius:999px;background:#0b3b36;color:#fff;font:600 12.5px/1 var(--nss-body,system-ui);opacity:0;transition:opacity .4s,transform .5s cubic-bezier(.2,1.2,.4,1);box-shadow:0 14px 30px -12px rgba(11,59,54,.6);white-space:nowrap;}
.nsd-toast.show{opacity:1;transform:translate(-50%,0);}
.nsd-cur{position:absolute;left:0;top:0;z-index:5;pointer-events:none;opacity:0;transition:transform .8s cubic-bezier(.45,.05,.2,1),opacity .3s;filter:drop-shadow(0 4px 6px rgba(0,0,0,.25));}
.nsd-cur.on{opacity:1;}
.nsd-cur.click{animation:nsd-click .35s;}
.nsd-cap{margin:12px 4px 0;text-align:center;font:500 13px/1.4 var(--nss-body,system-ui);color:#6a7c78;}
@keyframes nsd-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes nsd-blink{50%{opacity:0}}
@keyframes nsd-swap{0%{opacity:.2;transform:scale(.94)}100%{opacity:1;transform:none}}
@keyframes nsd-click{50%{transform:var(--cur-t) scale(.8)}}
/* step list reacts to the demo */
.how .step{opacity:.5;transition:opacity .4s;}
.how .step.is-on{opacity:1;}
.how .step.is-on .num{box-shadow:0 0 0 6px rgba(15,118,110,.16);}
.how .step .num{transition:box-shadow .4s;}
.nsd.static .nsd-card,.nsd.static .nsd-ph,.nsd.static .nsd-logo{transition:none;}
@media (max-width:640px){
  .nsd-body{grid-template-columns:1fr;padding:14px;gap:14px;}
  .nsd-chip img{max-height:64px;}
  .nsd-rows{min-height:0;}
  .nsd-r{order:-1;}
  .nsd-btns .nsd-btn{padding:7px 10px;}
  .nsd-toast{font-size:11.5px;bottom:10px;}
}
@media (prefers-reduced-motion:reduce){.nsd-cur{display:none;}.nsd-card,.nsd-ph,.nsd-logo{transition:none;}}