.demo {
  width: min(360px, 100%); margin-inline: auto; position: relative;
  background: rgba(4, 6, 14, .96); border: 1px solid rgba(0, 245, 255, .18); border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 40px rgba(0,245,255,.09);
  font-size: 13px; overflow: hidden;
}
.demo-head {
  display: flex; align-items: center; gap: 8px; padding: 11px 13px;
  background: linear-gradient(180deg, rgba(0,245,255,.07), transparent);
  border-bottom: 1px solid rgba(0,245,255,.12);
}
.demo-head b { font-size: 10px; font-weight: 800; letter-spacing: .16em; color: var(--cyan); text-shadow: 0 0 10px rgba(0,245,255,.5); margin-right: auto; }
.d-crown { color: var(--gold); font-size: 15px; filter: drop-shadow(0 0 5px rgba(255,210,63,.7)); }
.d-pill { font-size: 8.5px; font-weight: 800; letter-spacing: .12em; padding: 4px 8px; border-radius: 6px; color: #04140a; background: var(--green); box-shadow: 0 0 10px rgba(57,255,136,.5); }

/* his alert, sliding in */
.demo-alert {
  margin: 11px 13px 0; padding: 9px 11px; border-radius: 9px; font-size: 11.5px; color: #cfe6f5;
  background: rgba(255,210,63,.07); border: 1px solid rgba(255,210,63,.28);
  opacity: 0; transform: translateY(-10px); transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.demo-alert.show { opacity: 1; transform: none; }
.d-who { color: var(--gold); font-weight: 800; }
.demo-alert b { color: #fff; }
.d-mc { color: var(--dim); }

/* the caught row */
.demo-row {
  margin: 11px 13px; padding: 11px; border-radius: 10px;
  background: rgba(255,255,255,.02); border: 1px solid var(--line);
  opacity: 0; transform: translateY(8px); transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.demo-row.show { opacity: 1; transform: none; }
.d-line { display: flex; align-items: baseline; gap: 8px; }
.d-coin { font-weight: 800; font-size: 15px; color: #eaf6ff; }
.d-tag { font-size: 8px; font-weight: 800; letter-spacing: .1em; padding: 3px 6px; border-radius: 5px; color: #04140a; background: var(--green); }
.d-tag.sold { background: var(--pink); color: #2b0509; }
.d-amt { margin-left: auto; font-weight: 900; font-size: 15px; color: var(--green); font-variant-numeric: tabular-nums; }
.d-amt i { font-style: normal; font-size: 8px; color: var(--dim); margin-left: 3px; letter-spacing: .12em; }
.d-sub { margin-top: 4px; font-size: 9.5px; color: var(--dim); font-family: ui-monospace, monospace; letter-spacing: .03em; min-height: 13px; }

.d-pos {
  display: flex; align-items: center; gap: 8px; margin-top: 9px; padding: 7px 9px; border-radius: 8px;
  background: rgba(57,255,136,.05); border: 1px solid rgba(57,255,136,.2);
  opacity: 0; max-height: 0; overflow: hidden; transition: opacity .3s, max-height .3s;
}
.d-pos.show { opacity: 1; max-height: 44px; }
.d-pct { font-size: 17px; font-weight: 900; color: var(--green); text-shadow: 0 0 14px rgba(57,255,136,.5); font-variant-numeric: tabular-nums; }
.d-held { margin-left: auto; font-size: 9.5px; color: var(--dim); font-family: ui-monospace, monospace; }

.d-btns { display: flex; gap: 6px; margin-top: 9px; }
.d-btn {
  flex: 1; padding: 7px; border-radius: 8px; font-size: 10px; font-weight: 800; letter-spacing: .1em;
  border: 1px solid; background: none; cursor: default; transition: all .18s;
}
.d-btn.buy { color: var(--green); border-color: rgba(57,255,136,.4); background: rgba(57,255,136,.07); }
.d-btn.sell { color: #ff6b8f; border-color: rgba(255,59,107,.4); background: rgba(255,59,107,.07); }
.d-btn.fire { transform: scale(.97); }
.d-btn.buy.fire { background: var(--green); color: #04140a; box-shadow: 0 0 22px rgba(57,255,136,.7); }
.d-btn.sell.fire { background: var(--pink); color: #2b0509; box-shadow: 0 0 22px rgba(255,59,107,.7); }

.demo-foot {
  padding: 9px 13px; border-top: 1px solid var(--line); font-size: 9px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--dim); text-align: center;
}
.demo-foot.live { color: var(--cyan); }
.demo-note { margin-top: 10px; text-align: center; font-size: 11px; color: var(--dim); }

@media (prefers-reduced-motion: reduce) {
  .demo-alert, .demo-row, .d-pos { opacity: 1; transform: none; max-height: none; }
}
.rdemo {
  width: min(330px, 100%); margin-inline: auto; overflow: hidden;
  background: rgba(4, 6, 14, .96); border: 1px solid rgba(0, 245, 255, .2); border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 40px rgba(0,245,255,.1);
}
.rd-head { display: flex; align-items: center; gap: 8px; padding: 10px 13px; border-bottom: 1px solid var(--line); }
.rd-head b { font-size: 12px; font-weight: 800; letter-spacing: .06em; }
.rd-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 9px var(--cyan); }
.rd-tag { margin-left: auto; font-size: 8.5px; font-weight: 800; letter-spacing: .12em; padding: 3px 7px; border-radius: 5px; background: rgba(255,210,63,.15); color: var(--gold); }
.rd-label { display: flex; align-items: center; gap: 7px; font-style: normal; font-size: 8.5px; font-weight: 800; letter-spacing: .16em; color: #5b7288; }
.rd-main { padding: 13px 13px 9px; transition: background .2s; }
.rd-big { display: block; font-size: 44px; line-height: 1.05; font-weight: 900; letter-spacing: -.03em; color: var(--cyan); text-shadow: 0 0 16px rgba(0,245,255,.5); font-variant-numeric: tabular-nums; }
.rd-speed { display: block; font-size: 15px; font-weight: 800; color: #7f9bb0; font-variant-numeric: tabular-nums; }
.rd-led { width: 9px; height: 9px; border-radius: 50%; background: #10331f; box-shadow: inset 0 0 3px rgba(0,0,0,.8); transition: background .12s; }
.rdemo.hot .rd-led { background: var(--green); box-shadow: 0 0 9px var(--green), 0 0 20px var(--green); animation: vrled .7s ease-in-out infinite; }
.rdemo.hot .rd-main { background: rgba(57,255,136,.07); }
.rdemo.hot .rd-big, .rdemo.hot .rd-speed { color: var(--green); text-shadow: 0 0 16px rgba(57,255,136,.55); }
.rd-bars { display: flex; align-items: flex-end; gap: 2px; height: 46px; padding: 0 13px 10px; }
.rd-bars i { flex: 1; background: linear-gradient(180deg, var(--cyan), rgba(0,245,255,.15)); border-radius: 2px 2px 0 0; height: 6%; transition: height .28s var(--ease), background .28s; }
.rdemo.hot .rd-bars i { background: linear-gradient(180deg, var(--green), rgba(57,255,136,.15)); }
.rd-vol { display: flex; align-items: baseline; gap: 9px; padding: 9px 13px; border-top: 1px solid var(--line); }
.rd-vol b { font-size: 14px; color: var(--green); text-shadow: 0 0 9px rgba(57,255,136,.45); font-variant-numeric: tabular-nums; }
.rd-vol span { margin-left: auto; font-size: 11px; font-weight: 700; color: #7f9bb0; font-variant-numeric: tabular-nums; }
.rd-call {
  padding: 10px 13px; text-align: center; font-size: 10px; font-weight: 800; letter-spacing: .18em;
  border-top: 1px solid var(--line); color: #5b7288; transition: color .25s, background .25s;
}
.rd-call.watch { color: var(--cyan); background: rgba(0,245,255,.06); }
.rd-call.stay  { color: var(--green); background: rgba(57,255,136,.08); text-shadow: 0 0 10px rgba(57,255,136,.5); }

/* ---------- Kong Simulator animation ---------- */
.kdemo {
  width: min(320px, 100%); margin-inline: auto; overflow: hidden;
  background: #18181a; border: 1px solid #323542; border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  font-family: "Geist Variable", ui-sans-serif, system-ui, sans-serif;
}
.kd-head { display: flex; align-items: center; padding: 11px 13px; border-bottom: 1px solid rgba(50,53,66,.6); }
.kd-head b { font-size: 9.5px; font-weight: 800; letter-spacing: .16em; color: #00f5ff; }
.kd-bal { margin-left: auto; font-size: 13px; font-weight: 500; color: #c8c9d1; font-variant-numeric: tabular-nums; }
.kd-bal::before { content: "\224B "; color: #777a8c; }
.kd-sec { padding: 11px 13px 0; }
.kd-label { display: block; font-style: normal; font-size: 8.5px; font-weight: 800; letter-spacing: .16em; color: #777a8c; margin-bottom: 7px; }
.kd-grid { display: flex; }
.kd-grid button {
  flex: 1; height: 33px; background: none; border: .5px solid rgba(47,227,172,.5); color: #2fe3ac;
  font: inherit; font-size: 13px; font-weight: 500; cursor: default; transition: all .16s;
}
.kd-grid button + button { margin-left: -.5px; }
.kd-grid button:first-child { border-radius: 4px 0 0 4px; }
.kd-grid button:last-child { border-radius: 0 4px 4px 0; }
.kd-grid.sell button { border-color: rgba(236,57,122,.5); color: #ec397a; }
.kd-grid button.fire { background: #2fe3ac; color: #04140a; box-shadow: 0 0 20px rgba(47,227,172,.65); }
.kd-grid.sell button.fire { background: #ec397a; color: #2b0509; box-shadow: 0 0 20px rgba(236,57,122,.65); }
.kd-pos { padding: 12px 13px; margin: 11px 13px 0; border-radius: 6px; background: rgba(255,255,255,.03); border: 1px solid rgba(50,53,66,.7); }
.kd-pos b { display: block; font-size: 24px; font-weight: 900; letter-spacing: -.02em; color: #777a8c; font-variant-numeric: tabular-nums; }
.kd-pos b.up { color: #2fe3ac; text-shadow: 0 0 14px rgba(47,227,172,.5); }
.kd-pos span { display: block; margin-top: 3px; font-size: 10px; color: #777a8c; font-family: ui-monospace, monospace; }
.kd-foot {
  margin-top: 11px; padding: 10px 13px; border-top: 1px solid rgba(50,53,66,.6);
  font-size: 10px; letter-spacing: .1em; color: #777a8c; text-align: center; transition: color .25s;
}
.kd-foot.win { color: #2fe3ac; text-shadow: 0 0 10px rgba(47,227,172,.45); font-weight: 700; }