@layer theme,base;@layer components{.co-demo{--co-max:268px;--co-frame:#1a1a1a;--co-frame-edge:#1a1a1ae6;--co-scr:var(--offwhite);--co-sheet:var(--paper);--co-text:#1a1a1a;--co-text-2:var(--ink-2);--co-line:#1a1a1a1f;--co-ph:#e7e2f1;--co-ph-2:#d9d2e8;--co-bar:#1a1a1a38;--co-accent:var(--purple);--co-accent-soft:#5c00bf12;--co-on-accent:#fff;--co-dim:#1a1a1a61;--co-apple:#000;gap:14px;min-width:0;margin:0;display:grid;container-type:inline-size}.co-demo.co-s{--co-max:236px}.co-demo .co-stage{background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);border-radius:14px;place-items:center;padding:clamp(28px,8cqi,48px) 16px;display:grid;position:relative;overflow:hidden}.co-demo .co-pp{top:12px;z-index:2;position:absolute;inset-inline-end:12px}.co-demo .co-pp[hidden]{display:none}.co-demo .co-phone{width:min(var(--co-max), calc(100cqi - 48px));background:var(--co-frame);box-shadow:inset 0 0 0 1px var(--co-frame-edge), 0 30px 60px -36px #1a003c8c;border-radius:36px;padding:7px}.co-demo .co-scr{aspect-ratio:9/18.6;background:var(--co-scr);color:var(--co-text);isolation:isolate;border-radius:29px;font-size:11px;line-height:1.3;position:relative;overflow:hidden}.co-demo .co-store{grid-template-rows:auto auto auto 1fr;align-content:start;gap:10px;padding:0 12px;display:grid;position:absolute;inset:0}.co-demo .co-island{background:var(--co-frame);border-radius:12px;width:34%;height:20px;margin:8px auto 0}.co-demo .co-bar{align-items:center;gap:7px;padding-top:2px;display:flex}.co-demo .co-bar b{font-size:12px;font-weight:700}.co-demo .co-bar svg{width:15px;height:15px;color:var(--co-text-2);margin-inline-start:auto}.co-demo .co-mk{background:var(--co-text);border-radius:5px;flex:none;width:16px;height:16px}.co-demo .co-banner{background:var(--co-ph);border-radius:14px;align-content:end;gap:6px;height:92px;padding:14px;display:grid;position:relative;overflow:hidden}.co-demo .co-banner i{inset-inline-end:-14px;background:#d9cbb2;border-radius:50%;width:90px;height:90px;position:absolute;top:-18px}.co-demo .co-banner span,.co-demo .co-prod span{background:var(--co-bar);border-radius:4px;width:46%;height:6px;display:block}.co-demo .co-banner span+span{background:var(--co-line);width:30%}.co-demo .co-grid{grid-template-columns:1fr 1fr;align-content:start;gap:10px;display:grid}.co-demo .co-prod{gap:5px;display:grid}.co-demo .co-prod i{aspect-ratio:1;background:var(--co-sheet);box-shadow:inset 0 0 0 1px var(--co-line);border-radius:11px;position:relative;overflow:hidden}.co-demo .co-prod i:after{content:"";border-radius:40% 40% 12px 12px;position:absolute;inset:22% 26%}.co-demo .t-a:after{background:#b8a58a}.co-demo .t-b:after{background:#9fb59d;border-radius:50%!important}.co-demo .t-c:after{background:#a79cc9}.co-demo .t-d:after{background:#c9a08f;border-radius:12px!important}.co-demo .co-prod span{width:70%;height:5px}.co-demo .co-prod span+span{background:var(--co-ph-2);width:36%}.co-demo .co-dim{background:var(--co-dim);position:absolute;inset:0}.co-demo .co-sheet{inset-inline:0;z-index:1;background:var(--co-sheet);color:var(--co-text);border-radius:20px 20px 0 0;gap:8px;padding:8px 14px 18px;display:grid;position:absolute;bottom:0;box-shadow:0 -18px 36px -16px #1a1a1a59}.co-demo .co-grab{background:var(--co-bar);border-radius:4px;width:36px;height:4px;margin:0 auto 2px}.co-demo .co-top{border-bottom:1px solid var(--co-line);justify-content:space-between;align-items:baseline;gap:8px;padding-bottom:8px;display:flex}.co-demo .co-top b{font-size:14px;font-weight:700}.co-demo .co-top span{color:var(--co-text-2);white-space:nowrap;font-size:10.5px}.co-demo .co-tot{color:var(--co-text-2);justify-content:space-between;align-items:baseline;font-size:12px;display:flex}.co-demo .co-tot b{color:var(--co-text);font-size:14px;font-weight:700}.co-demo .co-ap{background:var(--co-apple);border-radius:10px;place-items:center;height:42px;transition:box-shadow .3s;display:grid}.co-demo .co-ap img{width:auto;height:30px}.co-demo .co-ap.on{box-shadow:0 0 0 2px var(--co-sheet), 0 0 0 4px var(--co-accent)}.co-demo .co-or{color:var(--co-text-2);align-items:center;gap:8px;font-size:10px;display:flex}.co-demo .co-or:before,.co-demo .co-or:after{content:"";background:var(--co-line);flex:1;height:1px}.co-demo .co-ms{gap:6px;display:grid}.co-demo .co-m{height:33px;box-shadow:inset 0 0 0 1px var(--co-line);border-radius:9px;align-items:center;gap:9px;padding:0 10px;transition:box-shadow .3s,background-color .3s;display:flex}.co-demo .co-m i{width:13px;height:13px;box-shadow:inset 0 0 0 1.5px var(--co-bar);border-radius:50%;flex:none;transition:box-shadow .3s}.co-demo .co-m b{font-size:12px;font-weight:600}.co-demo .co-m svg{width:15px;height:15px;color:var(--co-text-2);margin-inline-start:auto}.co-demo .co-m.on{box-shadow:inset 0 0 0 1.5px var(--co-accent);background:var(--co-accent-soft)}.co-demo .co-m.on i{box-shadow:inset 0 0 0 4px var(--co-accent)}.co-demo .co-pay{background:var(--co-accent);height:38px;color:var(--co-on-accent);border-radius:999px;justify-content:center;align-items:center;gap:6px;margin-top:2px;font-size:12.5px;font-weight:700;display:flex}.co-demo .co-pay svg{width:13px;height:13px}.co-demo .co-done{text-align:center;background:var(--co-sheet);opacity:0;visibility:hidden;border-radius:20px 20px 0 0;place-content:center;justify-items:center;gap:8px;display:grid;position:absolute;inset:0}.co-demo .co-done.on{opacity:1;visibility:visible}.co-demo .co-done svg{width:54px;height:54px}.co-demo .co-done b{font-size:15px;font-weight:700}.co-demo .co-done>span{color:var(--co-text-2);font-size:11.5px}.co-demo .co-ring,.co-demo .co-tick{stroke:var(--co-accent)}.co-demo .co-tick{stroke-dasharray:30;stroke-dashoffset:0}.co-demo .co-cap{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 16px;display:flex}.co-demo .co-cap[hidden]{display:none}.co-demo .co-ill{color:var(--text-3);font-size:13.5px}.co-demo .co-seq{flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;display:flex}.co-demo .co-seq li{color:var(--text-3);box-shadow:inset 0 0 0 1.5px var(--line);border-radius:999px;padding:7px 11px;font-size:12.5px;font-weight:600;line-height:1;transition:background-color .3s,color .3s,box-shadow .3s}html[lang=ar] .co-demo .co-seq li{font-size:13.5px}.co-demo .co-seq li.on{background:var(--mint);color:var(--ink);box-shadow:none}.co-demo.co-static .co-seq{display:none}@container (max-width:460px){.co-demo .co-stage{padding-top:68px}}@media (prefers-reduced-motion:reduce){.co-demo .co-pp{display:none}.co-demo .co-sheet{transform:none!important}.co-demo .co-seq{display:none}}}@layer utilities;