.stage{grid-area:stage;position:relative;isolation:isolate;align-self:start;margin:8px calc(-1 * var(--g)) 0;padding:16px var(--g)}.stage:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(closest-side at 38% 52%,#a6ceff80,#a6ceff00 88%),radial-gradient(closest-side at 68% 42%,#bff0e480,#bff0e400 88%)}.frame{position:relative;width:var(--cardw);margin:0 auto}.demo{position:relative;width:100%;aspect-ratio:360/412;border-radius:calc(var(--cardw) / 12);overflow:hidden;background:#fff;container-type:inline-size;isolation:isolate;box-shadow:0 0 0 1px #0f173312,0 26px 50px -20px #0f173357,0 8px 18px -8px #0f173324;direction:ltr;text-align:left;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.demo img,.demo svg{display:block}.demo p{margin:0}@media(min-width:1024px){.stage{margin:0;padding:40px 0;align-self:center}.frame{max-width:100%}}.demo .scene{position:absolute;inset:0;--u:1px;--u:calc(100cqw / 360);overflow:hidden;font-family:var(--sys);opacity:0;visibility:hidden;filter:blur(12px);transition:opacity .4s ease,filter .4s ease,visibility 0s .4s}.demo .scene.on{opacity:1;visibility:visible;filter:none;transition:opacity .42s ease .06s,filter .42s ease .06s,visibility 0s}.demo .scene *{box-sizing:border-box}.demo .scene svg{display:block}.demo .fb{position:absolute;left:0;top:0;z-index:7;width:calc(var(--u)*50);height:calc(var(--u)*50);border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 calc(var(--u)*1) calc(var(--u)*3) #0003}.demo .fb svg{width:calc(var(--u)*24);height:calc(var(--u)*24);color:#2456e8}.demo .scope{position:absolute;left:0;top:0;z-index:8;width:calc(var(--u)*45);height:calc(var(--u)*45);opacity:0;transform-origin:calc(var(--u)*17.32) calc(var(--u)*17.32);overflow:visible}.demo .rip{position:absolute;left:0;top:0;z-index:12;width:calc(var(--u)*38);height:calc(var(--u)*38);border-radius:50%;box-shadow:inset 0 0 0 calc(var(--u)*2) #181c2647;opacity:0}.demo .fing{position:absolute;left:0;top:0;z-index:13;width:calc(var(--u)*38);height:calc(var(--u)*38);border-radius:50%;background:#181c2633;box-shadow:inset 0 0 0 calc(var(--u)*1.5) #ffffffbf,0 calc(var(--u)*1.5) calc(var(--u)*4) #0000002e;opacity:0}.demo .dcard{position:absolute;left:0;top:0;z-index:14;display:flex;align-items:center;background:#fff;border-radius:calc(var(--u)*8);padding:calc(var(--u)*10) calc(var(--u)*12);box-shadow:0 calc(var(--u)*4) calc(var(--u)*12) #0000002b,0 calc(var(--u)*1) calc(var(--u)*3) #00000014;transform-origin:30% 0;font:700 calc(var(--u)*15)/calc(var(--u)*21) var(--text);color:#1a1a1c}.demo .dcard .txt{display:block;width:100%;text-wrap:balance}.demo .dcard .bars{position:absolute;inset:0;pointer-events:none;opacity:0}.demo .dcard .bar{position:absolute;left:calc(var(--u)*12);height:calc(var(--u)*11);border-radius:calc(var(--u)*6);background-color:#e3e3e6;background-image:linear-gradient(90deg,#f3f3f500,#f4f4f6,#f3f3f500);background-repeat:no-repeat;background-size:0 100%}.demo .fm{position:absolute;left:50%;top:50%;width:calc(var(--u)*32);height:calc(var(--u)*32);margin:calc(var(--u)*-16) 0 0 calc(var(--u)*-16);border-radius:50%;background:#007aff40;box-shadow:inset 0 0 0 calc(var(--u)*2) #007aff99;opacity:0;pointer-events:none;z-index:4}.demo .wv{display:inline-grid;white-space:nowrap;vertical-align:top}.demo .wv-l{grid-area:1/1;white-space:inherit}.demo .wv-g{display:inline-block;white-space:pre}.demo .wv.multi{display:grid;white-space:normal}.demo .wv-w{display:inline-block;white-space:nowrap}.demo .wv.multi .wv-l[dir=rtl]{text-align:right}.demo .s-msg{background:#ece8e3}.demo .s-msg .wall{position:absolute;inset:0;background-image:radial-gradient(circle,#3c2d1e14 0 calc(var(--u)*1.1),#3c2d1e00 calc(var(--u)*1.4));background-size:calc(var(--u)*14) calc(var(--u)*14)}.demo .ch{position:absolute;left:0;right:0;top:0;height:calc(var(--u)*50);z-index:2;display:flex;align-items:center;gap:calc(var(--u)*8);padding:0 calc(var(--u)*10) 0 calc(var(--u)*6);background:#fff;box-shadow:inset 0 calc(var(--u)*-1) 0 #0000000f}.demo .ch .back{width:calc(var(--u)*24);height:calc(var(--u)*24);color:#54656f;flex:none}.demo .ch .av{flex:none;width:calc(var(--u)*32);height:calc(var(--u)*32);border-radius:50%;background:linear-gradient(135deg,#f7b38a,#e86c8a);color:#fff;display:grid;place-items:center;font:600 calc(var(--u)*14)/1 var(--text)}.demo .ch .who{flex:1;display:flex;flex-direction:column;min-width:0}.demo .ch .nm{font-size:calc(var(--u)*15);line-height:calc(var(--u)*17);font-weight:500;color:#111b21}.demo .ch .st{font-size:calc(var(--u)*11.5);line-height:calc(var(--u)*14);color:#667781}.demo .ch .more{width:calc(var(--u)*20);height:calc(var(--u)*20);color:#54656f;flex:none}.demo .bub{position:absolute;left:calc(var(--u)*10);display:flex;align-items:flex-end;padding:calc(var(--u)*6) calc(var(--u)*8) calc(var(--u)*5) calc(var(--u)*9);background:#fff;border-radius:calc(var(--u)*3) calc(var(--u)*9) calc(var(--u)*9) calc(var(--u)*9);box-shadow:0 calc(var(--u)*.6) calc(var(--u)*1) #0b141a26;color:#111b21;font-size:calc(var(--u)*14.5);line-height:calc(var(--u)*19);white-space:nowrap}.demo .bub .tm{font-size:calc(var(--u)*10.5);line-height:calc(var(--u)*14);color:#667781;margin-left:calc(var(--u)*10)}.demo .msgs{position:absolute;left:0;right:0;top:calc(var(--u)*50);bottom:calc(var(--u)*78);overflow:hidden}.demo .mv{position:absolute;inset:0}.demo .b-wow{top:calc(var(--u)*213)}.demo .b-msg{top:calc(var(--u)*248)}.demo .b-sent{top:calc(var(--u)*283);left:auto;right:calc(var(--u)*10);background:#d9f4cf;border-radius:calc(var(--u)*9) calc(var(--u)*3) calc(var(--u)*9) calc(var(--u)*9);transform-origin:100% 100%;opacity:0}.demo .b-sent .tm{display:inline-flex;align-items:center;gap:calc(var(--u)*3)}.demo .tkb{color:#3c9be0}.demo .pho{position:absolute;right:calc(var(--u)*10);top:calc(var(--u)*58);padding:calc(var(--u)*3);background:#d9f4cf;border-radius:calc(var(--u)*9) calc(var(--u)*3) calc(var(--u)*9) calc(var(--u)*9);box-shadow:0 calc(var(--u)*.6) calc(var(--u)*1) #0b141a26}.demo .pho img{width:calc(var(--u)*192);height:calc(var(--u)*144);object-fit:cover;border-radius:calc(var(--u)*7)}.demo .pho .shade{position:absolute;right:calc(var(--u)*3);bottom:calc(var(--u)*3);width:calc(var(--u)*96);height:calc(var(--u)*34);border-bottom-right-radius:calc(var(--u)*7);background:linear-gradient(to bottom right,#0000 35%,#00000059)}.demo .pho .tm{position:absolute;right:calc(var(--u)*9);bottom:calc(var(--u)*6);display:flex;align-items:center;gap:calc(var(--u)*3);color:#fff;font-size:calc(var(--u)*10.5);line-height:calc(var(--u)*14);text-shadow:0 calc(var(--u)*1) calc(var(--u)*2) rgba(0,0,0,.45)}.demo .tk{width:calc(var(--u)*15);height:calc(var(--u)*10)}.demo .comp{position:absolute;left:calc(var(--u)*6);right:calc(var(--u)*6);bottom:calc(var(--u)*30);height:calc(var(--u)*42);display:flex;gap:calc(var(--u)*6);align-items:center}.demo .comp .pill{position:relative;flex:1;height:100%;background:#fff;border-radius:calc(var(--u)*21);box-shadow:0 calc(var(--u)*.6) calc(var(--u)*1) #0b141a26;color:#54656f}.demo .l-idle,.demo .l-typed{position:absolute;inset:0;display:flex;align-items:center;gap:calc(var(--u)*10);padding:0 calc(var(--u)*12)}.demo .l-typed{opacity:0}.demo .comp .pill svg{width:calc(var(--u)*20);height:calc(var(--u)*20);flex:none}.demo .typ{flex:1;min-width:0;display:flex;align-items:center;overflow:hidden;white-space:nowrap;font-size:calc(var(--u)*14.5);line-height:calc(var(--u)*19);color:#111b21}.demo .typ-c{flex:none;width:calc(var(--u)*1.5);height:calc(var(--u)*18);margin-left:calc(var(--u)*.5);background:#1e9e6a}.demo .comp .hint{flex:1;font-size:calc(var(--u)*15);color:#667781}.demo .comp .snd{position:relative;flex:none;width:calc(var(--u)*42);height:calc(var(--u)*42);border-radius:50%;background:#1e9e6a;color:#fff}.demo .comp .snd svg{position:absolute;left:calc(var(--u)*11);top:calc(var(--u)*11);width:calc(var(--u)*20);height:calc(var(--u)*20)}.demo .comp .s-go{opacity:0}.demo .gbar{position:absolute;left:calc(var(--u)*126);bottom:calc(var(--u)*10);width:calc(var(--u)*108);height:calc(var(--u)*4);border-radius:calc(var(--u)*2);background:#6677818c}.demo .s-msg .dcard{width:calc(var(--u)*244);transform:translate(calc(var(--u)*8),calc(var(--u)*295))}.demo .s-msg .txt,.demo .s-pic .txt{opacity:1}.demo .s-msg .fb{transform:translate(calc(var(--u)*6),calc(var(--u)*79))}.demo .rscrim{position:absolute;inset:0;z-index:10;background:#00000080;opacity:0}.demo .bub[dir=rtl]{flex-direction:row-reverse}.demo .dcard[dir=rtl],.demo .hint[dir=rtl]{text-align:right}.demo .dcard[dir=rtl] .bar{left:auto;right:calc(var(--u)*12)}.demo .typ[dir=rtl] .typ-c{margin-left:0;margin-right:calc(var(--u)*.5)}.demo .rcard{position:absolute;left:0;top:0;z-index:11;width:calc(var(--u)*312);padding:calc(var(--u)*20) 0 calc(var(--u)*12);border-radius:calc(var(--u)*16);background:#fff;box-shadow:0 calc(var(--u)*12) calc(var(--u)*28) #0000004d;opacity:0;transform-origin:50% 50%;color:#1a1a1c}.demo .rc-body{position:relative;padding:0 calc(var(--u)*20)}.demo .rc-txt{display:flex;flex-direction:column;align-items:center;text-align:center}.demo .rc-tr{margin:0;font:600 calc(var(--u)*16)/calc(var(--u)*22) var(--text)}.demo .rc-ed{margin:calc(var(--u)*4) 0 0;display:flex;align-items:center;gap:calc(var(--u)*4);font:500 calc(var(--u)*12)/calc(var(--u)*18) var(--text);color:#2456e8}.demo .rc-ed svg{width:calc(var(--u)*14);height:calc(var(--u)*14)}.demo .rc-dv{display:block;align-self:stretch;height:calc(var(--u)*1);margin:calc(var(--u)*8) 0;background:#e3e3e6}.demo .rc-bk{margin:0;font:400 calc(var(--u)*14)/calc(var(--u)*20) var(--text);color:#55565c}.demo .rc-sk{position:absolute;left:calc(var(--u)*20);right:calc(var(--u)*20);top:0;bottom:0;display:flex;flex-direction:column;align-items:center}.demo .rc-sk i{display:block;border-radius:calc(var(--u)*6);background-color:#e3e3e6;background-image:linear-gradient(90deg,#f3f3f500,#f4f4f6,#f3f3f500);background-repeat:no-repeat;background-size:0 100%}.demo .rc-sk .k1{height:calc(var(--u)*13);margin-top:calc(var(--u)*4)}.demo .rc-sk .k2{width:calc(var(--u)*52);height:calc(var(--u)*10);margin-top:calc(var(--u)*10)}.demo .rc-sk .rc-dv{margin:calc(var(--u)*11) 0 calc(var(--u)*10)}.demo .rc-sk .k3{height:calc(var(--u)*11);margin-top:calc(var(--u)*2)}.demo .rc-act{display:flex;align-items:center;margin-top:calc(var(--u)*8);padding:0 calc(var(--u)*8)}.demo .rc-x{width:calc(var(--u)*44);height:calc(var(--u)*40);display:grid;place-items:center;color:#55565c}.demo .rc-x svg{width:calc(var(--u)*20);height:calc(var(--u)*20)}.demo .rc-e{padding:0 calc(var(--u)*12);font:500 calc(var(--u)*14)/calc(var(--u)*36) var(--text);color:#55565c}.demo .rc-send{margin:0 calc(var(--u)*8) 0 calc(var(--u)*4);height:calc(var(--u)*36);padding:0 calc(var(--u)*20);border-radius:calc(var(--u)*18);background:#dce2f9;color:#151b2c;font:500 calc(var(--u)*14)/calc(var(--u)*36) var(--text);transform-origin:50% 50%}.demo .s-pic{background:#fff}.demo .ph{position:absolute;left:0;right:0;top:calc(var(--u)*50);bottom:calc(var(--u)*44);overflow:hidden}.demo .ph img{width:100%;height:100%;object-fit:cover}.demo .ph .grad{position:absolute;left:0;right:0;top:0;height:55%;background:linear-gradient(#00204047,#00204000)}.demo .ph .hl{position:absolute;left:calc(var(--u)*16);top:calc(var(--u)*16);width:calc(var(--u)*316);font:700 calc(var(--u)*25)/calc(var(--u)*29) var(--text);letter-spacing:calc(var(--u)*-.2);color:#fff;text-shadow:0 calc(var(--u)*1) calc(var(--u)*10) rgba(0,30,60,.25);text-wrap:balance}.demo .ph-head{position:absolute;left:0;right:0;top:0;height:calc(var(--u)*50);display:flex;align-items:center;gap:calc(var(--u)*10);padding:0 calc(var(--u)*12);background:#fff}.demo .ph-head .av{flex:none;width:calc(var(--u)*32);height:calc(var(--u)*32);border-radius:50%;background:linear-gradient(135deg,#1fa7c4,#0e6fa8);display:grid;place-items:center;color:#fff}.demo .ph-head .av svg{width:calc(var(--u)*20);height:calc(var(--u)*20)}.demo .ph-head b{display:block;font-size:calc(var(--u)*14);line-height:calc(var(--u)*17);font-weight:500;color:#111418}.demo .ph-head small{display:block;font-size:calc(var(--u)*11.5);line-height:calc(var(--u)*14);color:#6b7280}.demo .ph-act{position:absolute;left:0;right:0;bottom:0;height:calc(var(--u)*44);display:flex;align-items:center;gap:calc(var(--u)*16);padding:0 calc(var(--u)*14);background:#fff;color:#111418}.demo .ph-act svg{width:calc(var(--u)*23);height:calc(var(--u)*23);flex:none}.demo .flip{transform:scaleX(-1)}.demo .sp{flex:1}.demo .s-pic .dcard{width:calc(var(--u)*300);min-height:calc(var(--u)*70);transform:translate(calc(var(--u)*12),calc(var(--u)*60))}.demo .s-pic .fb{transform:translate(calc(var(--u)*6),calc(var(--u)*247))}.demo .s-kb{background:#fff}.demo .kh,.demo .ib,.demo .ob,.demo .fld{position:absolute;top:0}.demo .kh{left:0;right:0;z-index:3;height:calc(var(--u)*42);display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*8);background:#fff;box-shadow:inset 0 calc(var(--u)*-.6) 0 #3c3c4333}.demo .kav{width:calc(var(--u)*28);height:calc(var(--u)*28);border-radius:50%;background:linear-gradient(#8cbffa,#548ced);color:#fff;display:grid;place-items:center;font-size:calc(var(--u)*14);font-weight:600}.demo .knm{font-size:calc(var(--u)*14);line-height:calc(var(--u)*17);font-weight:600;color:#000}.demo .ib,.demo .ob{font-size:calc(var(--u)*15.5);line-height:calc(var(--u)*19);padding:calc(var(--u)*8) calc(var(--u)*13);border-radius:calc(var(--u)*18);white-space:nowrap}.demo .ib{left:calc(var(--u)*12);top:calc(var(--u)*52);background:#e9e9eb;color:#000}.demo .ob{right:calc(var(--u)*12);top:calc(var(--u)*97);background:#007aff;color:#fff;transform-origin:100% 100%;opacity:0}.demo .fld{left:calc(var(--u)*12);right:calc(var(--u)*12);height:calc(var(--u)*38);border-radius:calc(var(--u)*19);background:#fff;box-shadow:inset 0 0 0 calc(var(--u)*.6) #3c3c435c;display:flex;align-items:center;gap:calc(var(--u)*6);padding:0 calc(var(--u)*5) 0 calc(var(--u)*12);font-size:calc(var(--u)*15);color:#000;transform:translateY(calc(var(--u)*95))}.demo .fglow{position:absolute;inset:0;border-radius:calc(var(--u)*19);box-shadow:inset 0 0 0 calc(var(--u)*1.5) #007aff,0 0 calc(var(--u)*10) calc(var(--u)*1) #007aff61;opacity:0;pointer-events:none}.demo .ftxt{position:relative;flex:1;min-width:0;height:100%;display:flex;align-items:center;overflow:hidden}.demo .caret{display:inline-block;width:calc(var(--u)*2);height:calc(var(--u)*18);border-radius:calc(var(--u)*1);background:#007aff;vertical-align:middle;margin-left:calc(var(--u)*1)}.demo .fsend{position:relative;flex:none;width:calc(var(--u)*26);height:calc(var(--u)*26);color:#007aff}.demo .fsend>svg{width:calc(var(--u)*26);height:calc(var(--u)*26)}.demo .ftag{position:absolute;left:calc(var(--u)*8);top:calc(var(--u)*-25);height:calc(var(--u)*18);padding:0 calc(var(--u)*7);border-radius:calc(var(--u)*9);background:#007aff1f;color:#007aff;font-size:calc(var(--u)*10);font-weight:600;display:flex;align-items:center;gap:calc(var(--u)*3);opacity:0}.demo .ftag svg{width:calc(var(--u)*8);height:calc(var(--u)*8)}.demo .kb{position:absolute;left:0;right:0;bottom:0;z-index:2;background:#e2e4e8;border-radius:calc(var(--u)*22) calc(var(--u)*22) 0 0}.demo .pnl{position:relative;height:calc(var(--u)*66);overflow:hidden}.demo .pnl-in{position:absolute;left:0;right:0;bottom:0;height:calc(var(--u)*66);padding:calc(var(--u)*6) calc(var(--u)*12) calc(var(--u)*8);display:flex;flex-direction:column;gap:calc(var(--u)*4)}.demo .pnl-in:after{content:"";position:absolute;left:calc(var(--u)*12);right:calc(var(--u)*12);bottom:0;height:calc(var(--u)*.6);background:#0000001f}.demo .pl1{display:flex;align-items:center;gap:calc(var(--u)*8)}.demo .porig{flex:1;min-width:0;font-size:calc(var(--u)*12);line-height:calc(var(--u)*15);color:#3c3c4399;white-space:nowrap;overflow:hidden}.demo .px{flex:none;width:calc(var(--u)*26);height:calc(var(--u)*26);border-radius:50%;background:#00000012;display:grid;place-items:center;color:#3c3c4399}.demo .px svg{width:calc(var(--u)*10);height:calc(var(--u)*10)}.demo .pl2{position:relative;height:calc(var(--u)*20);display:flex;align-items:center;font-size:calc(var(--u)*16);line-height:calc(var(--u)*20);color:#000}.demo .pw{position:relative;display:inline-block}.demo .pglow{position:absolute;left:calc(var(--u)*-6);right:calc(var(--u)*-6);top:calc(var(--u)*-2);bottom:calc(var(--u)*-2);border-radius:calc(var(--u)*7);background:#007aff24;opacity:0}.demo .krow{display:flex;align-items:center;gap:calc(var(--u)*8);height:calc(var(--u)*46);padding:calc(var(--u)*7) calc(var(--u)*8)}.demo .lchip{flex:none;height:calc(var(--u)*32);padding:0 calc(var(--u)*10);border-radius:calc(var(--u)*16);background:#00000012;display:flex;align-items:center;gap:calc(var(--u)*3);font-size:calc(var(--u)*13);font-weight:300;color:#000}.demo .lchip svg{width:calc(var(--u)*8);height:calc(var(--u)*8);color:#3c3c4399}.demo .mid{position:relative;flex:1;height:calc(var(--u)*32);display:flex;align-items:center;justify-content:center;min-width:0}.demo .sugg{font-size:calc(var(--u)*14);color:#000;opacity:0}.demo .paste{position:absolute;inset:0;display:flex;align-items:center;gap:calc(var(--u)*8);transform-origin:0 50%;opacity:0}.demo .pbtn{position:relative;flex:none;width:calc(var(--u)*56);height:calc(var(--u)*32);border-radius:calc(var(--u)*16);background:#007aff;color:#fff;display:grid;place-items:center}.demo .pbtn svg{width:calc(var(--u)*16);height:calc(var(--u)*16)}.demo .pcap{font-size:calc(var(--u)*12);color:#3c3c4399;white-space:nowrap}.demo .tbtn{position:relative;flex:none;width:calc(var(--u)*56);height:calc(var(--u)*32);border-radius:calc(var(--u)*16);background:#007aff;color:#fff;display:grid;place-items:center}.demo .tbtn svg{width:calc(var(--u)*17);height:calc(var(--u)*17)}.demo .tring{position:absolute;inset:0;border-radius:calc(var(--u)*16);box-shadow:0 0 0 calc(var(--u)*1.5) #007affd9,inset 0 0 0 calc(var(--u)*1.5) #007affd9;opacity:0}.demo .keys{padding:0 calc(var(--u)*6) calc(var(--u)*18)}.demo .krw{display:flex;gap:calc(var(--u)*5);height:calc(var(--u)*30)}.demo .krw+.krw{margin-top:calc(var(--u)*7)}.demo .krw.r2{padding:0 calc(var(--u)*17.65)}.demo .krw.r3{justify-content:space-between}.demo .krw .grp{display:flex;gap:calc(var(--u)*5);flex:0 0 auto}.demo .k{flex:1;display:grid;place-items:center;background:#fefefe;border-radius:calc(var(--u)*7);box-shadow:0 calc(var(--u)*1) 0 #00000024;font-size:calc(var(--u)*18);line-height:1;color:#000}.demo .grp .k{flex:0 0 calc(var(--u)*30.3);width:calc(var(--u)*30.3)}.demo .k.w42{flex:0 0 calc(var(--u)*42)}.demo .k.w46{flex:0 0 calc(var(--u)*46);font-size:calc(var(--u)*15)}.demo .k.w40{flex:0 0 calc(var(--u)*40)}.demo .k.w84{flex:0 0 calc(var(--u)*84)}.demo .k svg{width:calc(var(--u)*20);height:calc(var(--u)*20)}.demo .s-scr{background:#edf0f5}.demo .iph{position:absolute;left:0;top:0;width:calc(var(--u)*210);height:calc(var(--u)*412);transform-origin:0 0;transform:translate(calc(var(--u)*81.3),calc(var(--u)*12.4)) scale(.94)}.demo .iscr{position:absolute;inset:calc(var(--u)*7);border-radius:calc(var(--u)*27);overflow:hidden;background:#fff}.demo .ibez{position:absolute;inset:0;border-radius:calc(var(--u)*34);box-shadow:inset 0 0 0 calc(var(--u)*7.5) #3a3a3c;pointer-events:none}.demo .iisl{position:absolute;left:calc(var(--u)*76);top:calc(var(--u)*14);width:calc(var(--u)*58);height:calc(var(--u)*16);border-radius:calc(var(--u)*8);background:#000}.demo .pp{position:absolute;left:0;top:0;width:calc(var(--u)*196);height:calc(var(--u)*398);padding-top:calc(var(--u)*29);background:#fff;color:#000}.demo .pp-h{display:flex;align-items:center;gap:calc(var(--u)*7);padding:calc(var(--u)*8) calc(var(--u)*10)}.demo .pav{flex:none;width:calc(var(--u)*22);height:calc(var(--u)*22);border-radius:50%;background:linear-gradient(#f4a261,#e76f51)}.demo .pp-h b{font-size:calc(var(--u)*11);line-height:calc(var(--u)*13);font-weight:600}.demo .pp-ph{position:relative;height:calc(var(--u)*150);overflow:hidden}.demo .pp-ph img{width:100%;height:100%;object-fit:cover}.demo .pp-hl{position:absolute;left:0;right:0;bottom:0;padding:calc(var(--u)*12);font-size:calc(var(--u)*13);line-height:calc(var(--u)*16);font-weight:700;color:#fff;text-shadow:0 calc(var(--u)*1) calc(var(--u)*1.5) rgba(0,0,0,.6)}.demo .pp-lab{position:absolute;left:calc(var(--u)*10);right:calc(var(--u)*10);bottom:calc(var(--u)*10);padding:calc(var(--u)*7) calc(var(--u)*9);border-radius:calc(var(--u)*8);background:#00000057;-webkit-backdrop-filter:blur(calc(var(--u)*6)) saturate(1.2);backdrop-filter:blur(calc(var(--u)*6)) saturate(1.2);box-shadow:inset 0 0 0 calc(var(--u)*.6) #ffffff40;font-size:calc(var(--u)*13);line-height:calc(var(--u)*16);font-weight:700;color:#fff}.demo .pp-ic{display:flex;align-items:center;gap:calc(var(--u)*11);padding:calc(var(--u)*8) calc(var(--u)*10) calc(var(--u)*4)}.demo .pp-ic svg{width:calc(var(--u)*15);height:calc(var(--u)*15);flex:none}.demo .pp-cap{margin:0;padding:0 calc(var(--u)*10);font-size:calc(var(--u)*10.5);line-height:calc(var(--u)*14)}.demo .pp-a{will-change:filter}.demo .itint{position:absolute;inset:0;background:#ffffff40;opacity:0}.demo .rc{position:absolute;left:calc(var(--u)*7);top:calc(var(--u)*21.5);width:calc(var(--u)*182);height:calc(var(--u)*355);padding:calc(var(--u)*7);border-radius:calc(var(--u)*22);background:#ffffff8c;box-shadow:inset 0 0 0 calc(var(--u)*.75) #ffffffd9,0 calc(var(--u)*8) calc(var(--u)*14) #0000002e;transform:translateY(calc(var(--u)*400))}.demo .rshot{position:relative;width:calc(var(--u)*168);height:calc(var(--u)*341);border-radius:calc(var(--u)*15);overflow:hidden}.demo .rshot .pp{transform:scale(.857);transform-origin:0 0}.demo .tt{position:absolute;left:calc(var(--u)*283);top:calc(var(--u)*160);width:calc(var(--u)*46);display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*3);color:#007aff;opacity:.9}.demo .tpz{position:relative;width:calc(var(--u)*22);height:calc(var(--u)*22)}.demo .tpz svg{position:absolute;inset:0;width:calc(var(--u)*22);height:calc(var(--u)*22)}.demo .pr{position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 calc(var(--u)*1.5) #007aff;opacity:0}.demo .tt b{font-size:calc(var(--u)*9.5);line-height:calc(var(--u)*12);font-weight:600;white-space:nowrap}.boot .demo .scene{transition:none!important}html:not(.scenes-on) .demo .scene[data-pick~=a]{opacity:1;visibility:visible;filter:none;transition:none}html[data-os=ios]:not(.scenes-on) .demo .scene[data-pick~=a]:not([data-pick~=i]){opacity:0;visibility:hidden}html[data-os=ios]:not(.scenes-on) .demo .scene[data-pick~=i]{opacity:1;visibility:visible;filter:none;transition:none}@media(prefers-reduced-motion:reduce){.demo .scene,.demo .scene.on{filter:none;transition:opacity .2s,visibility 0s}}