/* /embed/ - "Put BX on your site" builder. Page look comes from picks.css + bindex.css. */
.eb-grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 16px; margin: 18px 0 14px; align-items: start; }
.eb-ctl { display: flex; flex-direction: column; gap: 12px; background: rgba(13,23,18,.6); border: 1px solid rgba(139,255,190,.18); border-radius: 14px; padding: 14px; }
.eb-f { display: flex; flex-direction: column; gap: 6px; }
.eb-f[hidden] { display: none; }
.eb-f > span { font: 700 10px/1 var(--mono); letter-spacing: .14em; color: var(--dim); }
.eb-f .seg, .eb-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.seg button { cursor: pointer; }
.eb-prev { border: 1px solid rgba(139,255,190,.18); border-radius: 14px; overflow: hidden; min-width: 0; }
.eb-prev-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; font: 700 10px/1 var(--mono); letter-spacing: .14em; color: var(--dim); border-bottom: 1px solid rgba(139,255,190,.12); }
.eb-bgsw button { font-size: 10px; padding: 3px 8px; }
.eb-stage { padding: 24px; min-height: 240px; display: flex; align-items: center; justify-content: center;
  background: #0b0f10 radial-gradient(rgba(143,166,156,.12) 1px, transparent 1px) 0 0 / 14px 14px; transition: background-color .2s; }
.eb-stage.light { background-color: #f3f6f4; background-image: radial-gradient(rgba(13,26,20,.12) 1px, transparent 1px); }
.eb-stage iframe { border: 0; display: block; background: transparent; max-width: 100%; color-scheme: light; }
.eb-code { border: 1px solid rgba(139,255,190,.18); border-radius: 14px; padding: 12px; background: rgba(13,23,18,.6); }
#code { margin: 10px 0 8px; padding: 12px; border-radius: 10px; background: #050a07; border: 1px solid rgba(139,255,190,.14); color: #CFE9DA;
  font: 12px/1.55 var(--mono); white-space: pre-wrap; word-break: break-all; max-height: 220px; overflow: auto; }
.eb-acts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.eb-copy { font: 800 12px var(--mono); letter-spacing: .06em; color: #061008; background: #2BFF7A; border: 0; border-radius: 999px; padding: 8px 18px; cursor: pointer; }
.eb-copy:hover { box-shadow: 0 0 16px rgba(43,255,122,.45); }
.eb-more { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; margin-top: 22px; }
.eb-api { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 6px; }
.eb-api li { display: flex; flex-direction: column; gap: 2px; }
.eb-api code, .eb-terms code { font: 12px var(--mono); color: #CFE9DA; overflow-wrap: anywhere; }
.eb-api span { font: 11px var(--mono); color: var(--dim); }
.eb-terms { padding-left: 18px; margin: 8px 0; line-height: 1.6; }
@media (max-width: 820px) { .eb-grid, .eb-more { grid-template-columns: 1fr; } .eb-stage { padding: 14px; min-height: 180px; } }

/* "Seen on" (2026-10-31) */
.eb-seen { margin-top: 22px; }
.eb-seen[hidden] { display: none; }
.eb-seen .bx-h2 small { font: 600 11px var(--mono); color: var(--dim); margin-left: 8px; letter-spacing: .04em; }
.eb-seen-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.eb-site { font: 700 12px/1 var(--mono); color: #E7ECE9; text-decoration: none; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(139,255,190,.25); background: rgba(13,23,18,.6); }
.eb-site:hover { border-color: #2BFF7A; color: #2BFF7A; }
.eb-site::before { content: "●"; color: #2BFF7A; margin-right: 6px; font-size: 9px; vertical-align: 1px; }