.sp { --sp-cl:#1F5BFF; --sp-re:#7C93FF; --sp-so:#98A2BD; --sp-ok:#12A97A; --sp-ok-ink:#0B8A63; --sp-no:#E0475B;
  position:relative; isolation:isolate; overflow:hidden; margin-bottom:24px; border:1px solid var(--line); border-radius:22px; background:var(--surface);
  box-shadow:0 1px 2px rgba(19,28,59,.04),0 34px 80px -46px rgba(19,28,59,.38); container-type:inline-size; }
.sp::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(520px 260px at 22% 46%,rgba(31,91,255,.09),transparent 70%),
    linear-gradient(rgba(61,107,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(61,107,255,.04) 1px,transparent 1px);
  background-size:auto,32px 32px,32px 32px;
  -webkit-mask-image:radial-gradient(ellipse 85% 75% at 50% 40%,#000 30%,transparent 88%); mask-image:radial-gradient(ellipse 85% 75% at 50% 40%,#000 30%,transparent 88%); }
.sp-head { padding:26px 28px 4px; }
.sp-kicker { display:inline-flex; align-items:center; gap:10px; margin:0; font:600 11.5px/1.5 'JetBrains Mono',monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
html[lang="ar"] .sp-kicker,html[lang="hi"] .sp-kicker { letter-spacing:0; font-family:inherit; font-size:13px; text-transform:none; }
.sp-kicker i { width:8px; height:8px; border-radius:50%; background:var(--sp-cl); animation:spPing 2.2s ease-out infinite; }
@keyframes spPing { 0% { box-shadow:0 0 0 0 rgba(31,91,255,.5); } 70%,100% { box-shadow:0 0 0 10px rgba(31,91,255,0); } }
.sp h2 { margin:8px 0 8px; font-size:clamp(22px,2.6cqi,30px); line-height:1.15; font-weight:650; letter-spacing:-.025em; color:var(--ink); }
.sp-lead { margin:0; max-width:68ch; font-size:15px; line-height:1.65; color:var(--ink-2); }

.sp-stage { display:grid; grid-template-columns:1fr; gap:14px; margin:18px 20px 0; }
.sp-gain { display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"coin k" "coin pick" "chips chips"; align-items:center; gap:8px 16px; padding:16px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(180deg,var(--surface),var(--surface-alt)); }
.sp-gain-k { grid-area:k; margin:0; font-size:13px; font-weight:600; color:var(--ink-2); }
.sp-coin { grid-area:coin; position:relative; display:grid; place-items:center; width:92px; height:92px; margin:0; border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#6C93FF,var(--sp-cl) 62%,#1440C4); box-shadow:0 18px 34px -16px rgba(31,91,255,.75),inset 0 -6px 12px rgba(0,0,0,.18),inset 0 4px 10px rgba(255,255,255,.25);
  transition:background .5s, box-shadow .5s, transform .5s cubic-bezier(.34,1.56,.64,1); }
.sp-coin::after { content:''; position:absolute; inset:7px; border-radius:50%; border:1.5px dashed rgba(255,255,255,.35); }
.sp-coin b { position:relative; z-index:1; max-width:84%; font:700 17px/1 'JetBrains Mono',monospace; letter-spacing:-.03em; color:#fff; direction:ltr; unicode-bidi:isolate; white-space:nowrap; font-variant-numeric:tabular-nums; }
html[lang="ar"] .sp-coin b { max-width:none!important; }
.sp-on .sp-coin { animation:spFloat 4.2s ease-in-out infinite; }
@keyframes spFloat { 50% { transform:translateY(-4px); } }
.sp.is-zero .sp-coin { background:radial-gradient(circle at 34% 28%,#D5DAE6,#A4ADC2 62%,#7F89A3); box-shadow:0 12px 26px -16px rgba(19,28,59,.45),inset 0 -6px 12px rgba(0,0,0,.12); animation:none; }
.sp-pick { grid-area:pick; display:flex; flex-direction:column; gap:6px; font-size:12.5px; color:var(--ink-3); }
.sp-pick input { width:100%; height:24px; margin:0; accent-color:var(--sp-cl); cursor:pointer; }
.sp-chips { grid-area:chips; display:flex; gap:8px; }
.sp-chips button { flex:1; min-height:36px; padding:0 10px; border:1px solid var(--line-2); border-radius:999px; background:var(--surface); color:var(--ink-2); font:600 13px 'JetBrains Mono',monospace; direction:ltr; unicode-bidi:isolate; cursor:pointer; transition:border-color .2s, color .2s, background .2s, box-shadow .2s; }
.sp-chips button:hover { border-color:var(--sp-cl); color:var(--sp-cl); }
.sp-chips button.is-on { background:var(--sp-cl); border-color:var(--sp-cl); color:#fff; box-shadow:0 0 0 4px rgba(31,91,255,.14); }
.sp-chips button:focus-visible,.sp-pick input:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.is-bump { animation:spBump .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes spBump { 40% { transform:scale(1.12); } }

.sp-scenes { display:grid; min-width:0; }
.sp-scene { grid-area:1/1; display:flex; min-width:0; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .45s ease, transform .55s cubic-bezier(.16,1,.3,1), visibility 0s .45s; }
.sp-scene.is-on { opacity:1; visibility:visible; transform:none; transition:opacity .45s ease .05s, transform .55s cubic-bezier(.16,1,.3,1) .05s, visibility 0s; }
.sp-scene>div { flex:1; min-width:0; padding:16px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(180deg,var(--surface),var(--surface-alt)); }

.sp-vessels { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:end; align-content:center; gap:12px; }
.sp-vessel { --c:var(--sp-cl); --f:0; display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; text-align:center; }
.sp-network { --c:var(--sp-re); }
.sp-company { --c:var(--sp-so); }
.sp-jar { position:relative; width:min(100%,104px); height:150px; border:1.5px solid var(--line-2); border-top:0; border-radius:0 0 22px 22px; background:var(--surface); overflow:hidden; box-shadow:inset 0 -10px 24px -18px rgba(19,28,59,.35); }
.sp-jar::before { content:''; position:absolute; top:0; left:50%; width:4px; height:100%; margin-left:-2px; border-radius:2px; background:linear-gradient(var(--c),transparent); opacity:0; transform:scaleY(0); transform-origin:top; transition:opacity .25s, transform .35s ease; z-index:2; }
.sp-vessel.is-pour .sp-jar::before { opacity:.85; transform:scaleY(1); }
.sp-jar i { position:absolute; left:0; right:0; bottom:0; height:calc(var(--h) * var(--f)); background:linear-gradient(180deg,color-mix(in srgb,var(--c) 78%,#fff),var(--c)); }
.sp-jar i::before { content:''; position:absolute; left:-50%; top:-7px; width:200%; height:14px; background:radial-gradient(10px 7px at 10px 7px,color-mix(in srgb,var(--c) 78%,#fff) 98%,transparent 100%) 0 0/20px 14px repeat-x; animation:spWave 2.4s linear infinite; }
.sp-vessel:not(.is-on) .sp-jar i::before { opacity:0; }
@keyframes spWave { to { transform:translateX(20px); } }
.sp-pct { position:absolute; top:10px; left:0; right:0; z-index:3; font:700 clamp(18px,2.8cqi,26px)/1 Inter,sans-serif; letter-spacing:-.04em; color:var(--ink); direction:ltr; unicode-bidi:isolate; }
.sp-name { margin:8px 0 0; font-size:13px; font-weight:650; line-height:1.3; color:var(--ink); }
.sp-amt { margin:0; min-height:1.2em; font:700 clamp(16px,2.4cqi,21px)/1.2 'JetBrains Mono',monospace; letter-spacing:-.03em; color:var(--c); direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums; }
.sp-company .sp-amt { color:var(--ink-2); }
.sp-note { margin:0; font-size:12px; line-height:1.4; color:var(--ink-3); }
.sp-vessel { opacity:.55; transition:opacity .35s; }
.sp-vessel.is-on { opacity:1; }

.sp-net { display:flex; flex-direction:column; justify-content:center; gap:14px; }
.sp-net-k { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:4px 12px; margin:0; }
.sp-net-k b { font-size:14px; color:var(--ink); }
.sp-net-k span { font:500 12.5px/1.4 'JetBrains Mono',monospace; color:var(--ink-3); unicode-bidi:plaintext; }
html[lang="ar"] .sp-net-k span,html[lang="hi"] .sp-net-k span { font-family:inherit; }
.sp-net-amt { align-self:flex-start; margin:0; padding:6px 14px; border-radius:12px; background:color-mix(in srgb,var(--sp-re) 16%,transparent); border:1px solid color-mix(in srgb,var(--sp-re) 45%,transparent); font:700 clamp(20px,3cqi,26px)/1.2 'JetBrains Mono',monospace; letter-spacing:-.03em; color:var(--ink); direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums; }
.sp-bar { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; height:12px; padding:3px; border-radius:999px; background:var(--surface); border:1px solid var(--line); }
.sp-bar i { border-radius:999px; background:var(--line); transform-origin:left; transition:background .35s; }
[dir="rtl"] .sp-bar i { transform-origin:right; }
.sp-bar i.is-on { background:linear-gradient(90deg,color-mix(in srgb,var(--sp-re) 70%,#fff),var(--sp-re)); animation:spSeg .5s cubic-bezier(.16,1,.3,1); }
@keyframes spSeg { from { transform:scaleX(0); } }
.sp-levels { position:relative; list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:6px 0 0; padding:0; }
.sp-levels::before { content:''; position:absolute; top:24px; left:12%; right:12%; height:2px; background:repeating-linear-gradient(90deg,var(--line-2) 0 6px,transparent 6px 11px); z-index:0; }
.sp-levels li { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; padding:0 4px 10px; text-align:center; opacity:.35; transform:translateY(6px); transition:opacity .4s, transform .5s cubic-bezier(.16,1,.3,1); }
.sp-levels li.is-on { opacity:1; transform:none; }
.sp-lv-i { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:var(--surface); border:1.5px solid var(--line-2); color:var(--ink-3); transition:background .35s, border-color .35s, color .35s, box-shadow .35s; }
.sp-lv-i svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; }
.sp-levels li.is-on .sp-lv-i { background:var(--sp-re); border-color:var(--sp-re); color:#fff; box-shadow:0 0 0 5px color-mix(in srgb,var(--sp-re) 18%,transparent); }
.sp-levels b { font-size:12.5px; font-weight:650; line-height:1.3; color:var(--ink); }
.sp-lv-p { font:600 12px 'JetBrains Mono',monospace; color:var(--ink-3); direction:ltr; unicode-bidi:isolate; }
html[lang="ar"] .sp-lv-p,html[lang="hi"] .sp-lv-p { font-family:inherit; }
.sp-levels em { min-height:1.3em; font:700 14px/1.3 'JetBrains Mono',monospace; font-style:normal; color:var(--sp-cl); direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums; }

.sp-never { display:flex; flex-direction:column; justify-content:center; gap:12px; }
.sp-never-k { margin:0; font-size:14px; font-weight:650; color:var(--ink); }
.sp-never ul { list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0; padding:0; }
.sp-never li { position:relative; display:flex; align-items:center; gap:8px; min-width:0; padding:8px 12px; border-radius:12px; border:1px solid var(--line); background:var(--surface); font-size:13px; line-height:1.35; color:var(--ink-2); opacity:.35; transition:opacity .35s, border-color .35s; }
.sp-never li span { position:relative; min-width:0; }
.sp-never li span::after { content:''; position:absolute; left:0; right:0; top:52%; height:1.5px; background:var(--sp-no); transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.16,1,.3,1) .1s; }
[dir="rtl"] .sp-never li span::after { transform-origin:right; }
.sp-never li i { position:relative; flex:none; width:20px; height:20px; border-radius:50%; background:var(--line); transition:background .3s, transform .35s cubic-bezier(.34,1.56,.64,1); }
.sp-never li i::before,.sp-never li i::after { content:''; position:absolute; left:50%; top:50%; width:10px; height:2px; margin:-1px 0 0 -5px; border-radius:1px; background:#fff; transform:rotate(45deg); }
.sp-never li i::after { transform:rotate(-45deg); }
.sp-never li.is-on { opacity:1; border-color:color-mix(in srgb,var(--sp-no) 35%,var(--line)); }
.sp-never li.is-on i { background:var(--sp-no); transform:scale(1.08); }
.sp-never li.is-on span { color:var(--ink-3); }
.sp-never li.is-on span::after { transform:scaleX(1); }
.sp-zero { display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; padding:12px 14px; border-radius:14px; border:1px dashed var(--line-2); background:var(--surface); opacity:.35; transition:opacity .4s, border-color .4s, box-shadow .4s; }
.sp-zero.is-on { opacity:1; border-style:solid; border-color:color-mix(in srgb,var(--sp-so) 70%,transparent); box-shadow:0 14px 30px -24px rgba(19,28,59,.5); }
.sp-zero-k { margin:0; font-size:13px; font-weight:650; color:var(--ink); }
.sp-zero-row { display:flex; gap:6px; }
.sp-zero-row span { padding:3px 9px; border-radius:999px; border:1px solid var(--line); font:700 12px 'JetBrains Mono',monospace; color:var(--ink-3); direction:ltr; unicode-bidi:isolate; }
.sp-zero-row span b { font-weight:700; }
.sp-zero-row .sp-client { border-color:color-mix(in srgb,var(--sp-cl) 40%,transparent); }
.sp-zero-row .sp-network { border-color:color-mix(in srgb,var(--sp-re) 40%,transparent); }
.sp-zero-v { margin:0; margin-inline-start:auto; font-size:13px; font-weight:650; color:var(--ink-2); }
.sp-zero.is-on .sp-zero-row span { animation:spShake .5s ease .1s; }
@keyframes spShake { 25% { transform:translateX(-3px); } 50% { transform:translateX(3px); } 75% { transform:translateX(-2px); } }
.sp-foot { margin:0; padding-inline-start:12px; border-inline-start:3px solid var(--sp-cl); font-size:14px; font-weight:600; line-height:1.5; color:var(--ink); }

.sp-steps { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:14px 20px 0; padding:0; }
.sp-steps button { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; column-gap:8px; row-gap:8px; width:100%; padding:8px 4px 4px; border:0; background:none; font:inherit; color:var(--ink-3); cursor:pointer; text-align:start; }
.sp-step-n { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; border:1.5px solid var(--line-2); font:700 11.5px/1 'JetBrains Mono',monospace; transition:background .3s, color .3s, border-color .3s; }
.sp-step-l { font-size:13px; font-weight:600; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sp-step-bar { grid-column:1/-1; height:3px; border-radius:3px; background:var(--line); overflow:hidden; }
.sp-step-bar i { display:block; height:100%; background:linear-gradient(90deg,var(--sp-cl),var(--sp-re)); transform-origin:left; transform:scaleX(0); }
[dir="rtl"] .sp-step-bar i { transform-origin:right; }
.sp-steps button.is-on,.sp-steps button.is-done { color:var(--ink); }
.sp-steps button.is-on .sp-step-n { background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 0 0 4px rgba(61,107,255,.15); }
.sp-steps button.is-done .sp-step-n { border-color:var(--accent); color:var(--accent); }
.sp-foot-bar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 20px; margin-top:12px; padding:14px 22px 16px; border-top:1px solid var(--line); background:var(--surface-alt); }
.sp-cap { flex:1 1 320px; min-height:3.1em; margin:0; font-size:14px; line-height:1.55; color:var(--ink-2); }
.sp-ctrl { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.sp-ctrl button { min-height:40px; padding:0 16px; border:1px solid var(--line-2); border-radius:999px; background:var(--surface); color:var(--ink); font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; transition:border-color .2s, color .2s; }
.sp-ctrl button:hover { border-color:var(--accent); color:var(--accent); }
.sp-ctrl button:focus-visible,.sp-steps button:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.sp:not(.sp-on) .sp-stage { opacity:0; translate:0 18px; }
.sp-stage { transition:opacity .7s ease, translate .9s cubic-bezier(.16,1,.3,1); }

@container (min-width:780px) {
  .sp-stage { grid-template-columns:minmax(210px,.72fr) minmax(0,1.28fr); align-items:stretch; margin:20px 28px 0; }
  .sp-gain { grid-template-columns:1fr; grid-template-areas:"k" "coin" "pick" "chips"; justify-items:center; align-content:center; gap:14px; padding:20px 18px; text-align:center; }
  .sp-coin { width:132px; height:132px; }
  .sp-coin b { font-size:22px; }
  .sp-pick { width:100%; }
  .sp-chips { width:100%; }
  .sp-scene>div { padding:20px 20px 18px; }
  .sp-jar { height:170px; }
  .sp-steps { margin-left:28px; margin-right:28px; }
  .sp-foot-bar { padding:14px 28px 18px; }
}
@container (max-width:560px) {
  .sp-head { padding:22px 18px 2px; }
  .sp-stage { margin:14px 12px 0; }
  .sp-gain { padding:14px; column-gap:14px; }
  .sp-coin { width:84px; height:84px; }
  .sp-coin b { font-size:13.5px; }
  .sp-scene>div { padding:14px 12px; }
  .sp-vessels { gap:8px; }
  .sp-jar { height:140px; border-radius:0 0 18px 18px; }
  .sp-note { display:none; }
  .sp-levels { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:14px; }
  .sp-levels::before { display:none; }
  .sp-never ul { gap:6px; }
  .sp-never li { gap:6px; padding:7px 8px; font-size:12px; }
  .sp-never li i { width:16px; height:16px; }
  .sp-never li i::before,.sp-never li i::after { width:8px; margin-left:-4px; }
  .sp-never li span::after { display:none; }
  .sp-never li.is-on span { text-decoration:line-through; text-decoration-color:var(--sp-no); text-decoration-thickness:1.5px; }
  .sp-zero-v { margin-inline-start:0; flex-basis:100%; }
  .sp-steps { margin-left:12px; margin-right:12px; }
  .sp-steps button { grid-template-columns:1fr; justify-items:center; }
  .sp-step-l { display:none; }
  .sp-foot-bar { padding:12px 16px 14px; }
}
@media (prefers-reduced-motion:reduce) { .sp *,.sp::before { animation:none!important; transition:none!important; } }
html.nbx-rm .sp *,html.nbx-rm .sp::before { animation:none!important; transition:none!important; }
@media print { .sp { display:none!important; } }