/* How-it-works demo: one mock of the app in a browser frame, slow camera, cursor. Everything that moves is transform/opacity. */
#demo{position:relative;--ease:cubic-bezier(.2,.7,.2,1);--cam:cubic-bezier(.65,0,.3,1)}
#demo .frame{position:relative;width:100%;aspect-ratio:1000/562;border-radius:16px;overflow:hidden;border:1px solid var(--line-2);background:#06090B;box-shadow:0 50px 120px -40px #000}
#demo .chrome{position:absolute;left:0;top:0;right:0;height:34px;display:flex;align-items:center;gap:8px;padding:0 14px;border-bottom:1px solid var(--line);background:#0A0F12;font-family:var(--mono);font-size:11px;color:var(--muted-2);z-index:3}
#demo .chrome i{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
#demo .chrome .url{margin-left:8px;border:1px solid var(--line);border-radius:6px;padding:3px 10px}
#demo .chrome .url b{color:var(--muted);font-weight:400}
#demo .stage{position:absolute;top:34px;left:0;right:0;bottom:0;overflow:hidden}
#demo .inner{position:absolute;left:0;top:0;width:1000px;height:528px;transform-origin:0 0;backface-visibility:hidden;background:radial-gradient(55% 45% at 22% 0%,#14F1951C,transparent 60%),radial-gradient(40% 40% at 100% 100%,#9945FF14,transparent 60%),#06090B}
#demo .veil{position:absolute;inset:0;background:#06090B;opacity:0;pointer-events:none;transition:opacity .7s ease;z-index:6}
#demo .veil.on{opacity:1}

/* app chrome inside the mock */
#demo .mnav{height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid var(--line)}
#demo .mnav .brand{font-size:13px}#demo .mnav .brand img{width:26px;height:26px}
#demo .mnav .links a{font-size:11px;padding:6px 10px}
#demo .mnav .btn{padding:8px 14px;font-size:11px}
#demo #nPill{display:none}
#demo .body{display:grid;grid-template-columns:1fr 1fr;gap:26px;padding:26px 34px 0}
#demo .dp{background:#0C1215;border:1px solid var(--line-2);border-radius:16px;padding:22px;transition:border-color 1s var(--ease),box-shadow 1s var(--ease),opacity 1.2s var(--ease)}
#demo .dp.dim{opacity:.45}
#demo .dp.live{border-color:#14F19555;box-shadow:0 30px 80px -40px var(--acc)}
#demo .lbl{font-size:10px}
#demo .ttl{font-family:var(--head);font-size:15px;font-weight:700;text-transform:uppercase;margin-bottom:14px}

/* launch form */
#demo .field{margin-top:12px}
#demo .field label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
#demo .in{background:#080C0E;border:1px solid var(--line-2);border-radius:11px;padding:11px 14px;font-size:14.5px;min-height:44px;color:var(--muted);transition:border-color .5s var(--ease),box-shadow .5s var(--ease)}
#demo .in.focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
#demo .caret::after{content:"";display:inline-block;width:2px;height:15px;background:var(--ink);margin-left:2px;vertical-align:-2px;animation:dblink 1s steps(1) infinite}
@keyframes dblink{50%{opacity:0}}
#demo .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#demo .seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
#demo .seg span{background:#080C0E;border:1px solid var(--line-2);color:var(--muted);border-radius:10px;padding:11px 0;font-weight:600;font-size:13px;text-align:center}
#demo .seg span.on{border-color:var(--acc);color:var(--ink);background:var(--acc-soft)}
#demo .qgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
#demo .q{display:flex;flex-direction:column;align-items:center;gap:8px;background:#080C0E;border:1px solid var(--line-2);border-radius:12px;padding:14px 8px 12px;transition:border-color .8s var(--ease),background .8s var(--ease),transform .8s var(--ease),box-shadow .8s var(--ease)}
#demo .q.on{border-color:var(--acc);background:var(--acc-soft);transform:translateY(-3px);box-shadow:0 18px 40px -18px var(--acc)}
#demo .q img{width:34px;height:34px;border-radius:9px;background:#fff;object-fit:cover}
#demo .q b{font-size:12.5px;font-weight:600}
#demo .q small{font-family:var(--mono);font-size:10px;color:var(--muted)}
#demo .go{margin-top:16px;padding:14px;font-size:13px;transition:opacity .6s var(--ease),transform .2s}
#demo .go::after{display:none;animation:none}
#demo .go.hit{transform:scale(.98)}

/* market card */
#demo .mh{display:flex;align-items:center;gap:12px}
#demo .mh .av{width:44px;height:44px;border-radius:12px;font-size:12px;display:grid;place-items:center;font-family:var(--head);font-weight:900;color:#05080A;background:hsl(268 60% 62%)}
#demo .mh .nm{font-family:var(--head);font-size:17px;font-weight:700;text-transform:uppercase;line-height:1.1}
#demo .mh small{display:block;font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:3px}
#demo .mh .st{margin-left:auto;transition:color .8s,border-color .8s,background .8s}
#demo .big{margin-top:18px;display:flex;gap:22px;align-items:flex-end}
#demo .big .v{font-family:var(--head);font-weight:700;font-variant-numeric:tabular-nums;transform:translateZ(0);will-change:contents}
#demo .big .px{font-size:26px;line-height:1}
#demo .big .sm{font-size:15px;line-height:1.2}
#demo .chart{margin-top:16px;height:150px;background:#080C0E;border:1px solid var(--line);border-radius:12px;padding:10px;transform:translateZ(0)}
#demo .chart svg{width:100%;height:100%;display:block;overflow:visible}
#demo .chart .l{fill:none;stroke:var(--acc);stroke-width:2.4;vector-effect:non-scaling-stroke;transition:stroke-dashoffset .9s var(--ease)}
#demo .chart .a{fill:url(#dmg);opacity:0;transition:opacity 1s var(--ease)}
#demo .chart .d{fill:var(--acc);opacity:0;transition:opacity .5s,cx .9s var(--ease),cy .9s var(--ease)}
#demo .prog{margin-top:14px}
#demo .prog .r{font-size:10.5px}
#demo .bar{transform:translateZ(0)}
#demo .bar i{transition:width 1.2s var(--ease)}
#demo .grad{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap;opacity:0;transform:translateY(8px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
#demo .grad.in{opacity:1;transform:none}
#demo .grad span{font-family:var(--mono);font-size:10.5px;color:var(--green);border:1px solid #3DF2A355;background:#3DF2A314;border-radius:999px;padding:5px 10px}
#demo .empty{margin-top:18px;color:var(--muted);font-size:13px;line-height:1.5;transition:opacity .6s var(--ease)}
#demo .empty.gone{opacity:0;position:absolute;pointer-events:none}
#demo .lv{opacity:0;transition:opacity 1s var(--ease)}
#demo .lv.in{opacity:1}

/* overlays: connect (Phantom) and paid */
#demo .ov{position:absolute;inset:0;background:#06090BD9;display:grid;place-items:center;z-index:5;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility 0s .7s}
#demo .ov.on{opacity:1;visibility:visible;transition:opacity .7s ease,visibility 0s}
#demo .ov .box{width:380px;background:#0C1215;border:1px solid var(--line-2);border-radius:16px;padding:20px;transform:translateY(12px);transition:transform .7s var(--ease);box-shadow:0 40px 100px -30px #000}
#demo .ov.on .box{transform:none}
#demo .ov h3{font-size:17px;margin-bottom:12px}
#demo .wopt{display:flex;align-items:center;gap:12px;background:#080C0E;border:1px solid var(--line-2);border-radius:12px;padding:12px;transition:border-color .5s,background .5s}
#demo .wopt.hi{border-color:var(--acc);background:var(--acc-soft)}
#demo .wopt .wico{width:42px;height:42px;border-radius:11px;background:#AB9FF2;display:grid;place-items:center;flex:none}
#demo .wopt b{display:block;font-size:14.5px}#demo .wopt small{display:block;color:var(--muted);font-size:12px}
/* Phantom sign-message popup, styled like the extension window */
#demo .sign{width:340px;background:#1A1A1F;border:1px solid #2E2E36;border-radius:14px;display:none;box-shadow:0 40px 100px -30px #000;font-family:var(--sans);color:#F5F5F7;overflow:hidden}
#demo .sign .ph{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid #2A2A31;font-size:13px;font-weight:600}
#demo .sign .ph .g{width:22px;height:22px;border-radius:7px;background:#AB9FF2;display:grid;place-items:center}
#demo .sign .ph .acct{margin-left:auto;font-size:11px;color:#9B9BA6;background:#26262E;border-radius:999px;padding:4px 10px}
#demo .sign .bd{padding:16px}
#demo .sign h4{font-size:17px;font-weight:700;margin:0 0 12px;letter-spacing:-.01em}
#demo .sign .site{display:flex;align-items:center;gap:8px;background:#26262E;border-radius:10px;padding:9px 12px;font-size:12.5px;color:#D6D6DE}
#demo .sign .site img{width:18px;height:18px;border-radius:5px}
#demo .sign .msgl{font-size:11px;color:#9B9BA6;margin:14px 0 6px}
#demo .sign .msg{background:#26262E;border-radius:10px;padding:12px;font-size:12.5px;line-height:1.5;color:#D6D6DE;white-space:pre-line}
#demo .sign .btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 16px 16px}
#demo .sign .btns span{border-radius:10px;padding:11px;text-align:center;font-weight:600;font-size:13px;transition:transform .15s}
#demo .sign .cancel{background:#2E2E36;color:#F5F5F7}
#demo .sign .ok{background:#AB9FF2;color:#151518}
#demo .sign .ok.hit{transform:scale(.96)}
#demo .paid{position:absolute;inset:0;display:grid;place-items:center;z-index:4;background:radial-gradient(600px 300px at 50% 55%,#14F19522,transparent 70%),#06090BEB;opacity:0;pointer-events:none;transition:opacity 1.1s ease}
#demo .paid.in{opacity:1}
#demo .paid .pc{text-align:center;transform:translateY(16px);transition:transform 1.1s var(--cam)}
#demo .paid.in .pc{transform:none}
#demo .paid .eb{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--c)}
#demo .paid .n{font-family:var(--head);font-size:76px;font-weight:900;line-height:1;color:var(--green);margin:12px 0 6px;font-variant-numeric:tabular-nums;transform:translateZ(0)}
#demo .paid .s{color:var(--muted);font-size:14px}
#demo .paid .chips{display:flex;justify-content:center;gap:8px;margin-top:22px}
#demo .paid .chips span{font-size:12px;color:var(--muted);border:1px solid var(--line-2);border-radius:999px;padding:6px 14px;background:#0C1215;opacity:0;transform:translateY(8px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
#demo .paid.in .chips span{opacity:1;transform:none}
#demo .paid.in .chips span:nth-child(2){transition-delay:.15s}#demo .paid.in .chips span:nth-child(3){transition-delay:.3s}
#demo .paid .chips b{color:var(--ink);font-weight:600;margin-left:4px}

/* cursor */
#demo #dcur{position:absolute;left:0;top:0;width:20px;height:24px;z-index:8;pointer-events:none;transform:translate3d(520px,300px,0);will-change:transform}
#demo #dcur svg{width:20px;height:24px;display:block;transition:transform .15s;filter:drop-shadow(0 3px 6px rgba(0,0,0,.6))}
#demo #dcur.click svg{transform:scale(.85)}

/* player */
#demo .player{margin-top:14px}
#demo .segs{display:flex;gap:6px;max-width:520px}
#demo .segs button{flex:1;height:14px;border:0;background:transparent;padding:5px 0;cursor:pointer}
#demo .segs button i{display:block;height:4px;border-radius:2px;background:var(--line-2);overflow:hidden}
#demo .segs button i b{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--c),var(--acc))}
#demo .segs button.done i b{width:100%}
#demo .segs button.on i b{animation:dfill var(--d) linear forwards}
@keyframes dfill{from{width:0}to{width:100%}}
#demo .foot{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:start}
@media(max-width:640px){#demo .foot{grid-template-columns:1fr}}
#demo .caption{max-width:600px;margin:12px 0 0;color:var(--muted);font-size:16px;font-weight:500;min-height:48px;line-height:1.5;transition:opacity .45s ease,transform .45s ease}
#demo .caption.swap{opacity:0;transform:translateY(6px)}
#demo .ctrl{display:flex;align-items:center;gap:8px;margin-top:14px}
#demo .ctrl .btn{padding:7px 14px;font-size:12px}
#demo .ctrl .time{font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:6px}