/* Animated explainers: shared layout, AMM machine, bridge machine */
.prose-explainer { max-width: none; }
.prose-explainer > :not(.xpl) { max-width: 74ch; }

.xpl {
    --xc: var(--sec);
    position: relative;
    max-width: 980px;
    margin: 1.8rem 0 2.2rem;
    padding: 1.1rem 1.1rem 1.2rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--hero-grad);
    box-shadow: var(--shadow);
    font-size: 1rem;
}
.xpl::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    border-radius: var(--radius) var(--radius) 0 0;
    background: var(--sec-grad);
}
.xpl-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .6rem; }
.xpl-bar .hud-label { margin: 0; }
.xpl-svg { display: block; width: 100%; height: auto; overflow: visible; }
.xpl-svg text { font-family: var(--font-body); }

.xpl-seg { display: inline-flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--border-strong); border-radius: 999px; padding: 3px; background: var(--surface); }
.xpl-seg button {
    border: 0; background: transparent; color: var(--muted); font-weight: 650; font-size: .88rem;
    padding: .42rem .85rem; border-radius: 999px; cursor: pointer; min-height: 36px;
}
.xpl-seg button.is-on { background: var(--surface-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--xc); }
.xpl-seg button:disabled { cursor: default; opacity: .6; }

.xpl-tour { margin-top: .8rem; }
.xpl-cap {
    min-height: 5.2em; margin: 0; padding: .8rem 1rem; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--surface); line-height: 1.55;
}
.xpl-cap b { color: var(--text); }
.xpl-steps { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .6rem; }
.xpl-steps .btn { min-width: 44px; min-height: 40px; justify-content: center; }
.xpl-count { margin: 0 0 0 .3rem; }
.xpl-pool { margin: 1rem 0 .2rem; padding: .55rem .8rem; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); overflow-wrap: anywhere; }

.xpl-ctrl { display: grid; gap: .7rem; margin-top: .8rem; }
.xpl-range { display: grid; gap: .35rem; font-size: .95rem; color: var(--muted); }
.xpl-range b { color: var(--text); }
.xpl-range input { width: 100%; accent-color: var(--xc); min-height: 32px; }
.xpl-presets, .xpl-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.xpl-presets .chip { cursor: pointer; }
.xpl-note { margin: 0; font-size: .85rem; color: var(--muted); }
.xpl button:disabled { opacity: .55; cursor: default; }

.xpl-read-h { margin: 1.1rem 0 .4rem; }
.xpl-read { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem; margin: 0 0 1rem; }
.xpl-read > div { padding: .55rem .75rem; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); min-width: 0; }
.xpl-read dt { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.xpl-read dd { margin: .15rem 0 0; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.xpl-read small { font-weight: 500; color: var(--muted); }

.xpl-lp { margin-top: .8rem; padding: .8rem 1rem; border-radius: var(--radius-sm); border: 1px dashed var(--border-strong); background: var(--surface); }
.xpl-lp .hud-label { margin: 0 0 .3rem; }
.xpl-lp p:last-child { margin: 0; }
.xpl-foot { margin-top: .9rem; font-size: .86rem; color: var(--muted); }

/* --- shared SVG parts --- */
.xpl .lbl { fill: var(--text); font-size: 22px; font-weight: 800; text-anchor: middle; letter-spacing: .02em; }
.xpl .lbl-m { fill: var(--text); font-size: 19px; font-weight: 800; text-anchor: middle; }
.xpl .lbl-s { fill: var(--muted); font-size: 16px; font-weight: 700; }
.xpl .lbl-l { text-anchor: start; }
.xpl .lbl-c { font-size: 17px; }
.xpl .val { fill: var(--xc); font-size: 24px; font-weight: 800; }
.xpl .box { fill: var(--surface); stroke: var(--border-strong); stroke-width: 2; }
.xpl .ico-stroke { fill: none; stroke: var(--muted); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.xpl .ico-flame { fill: var(--orange); }
.xpl .ico-flame-in { fill: #FFD36B; }
.xpl .glow-flood { flood-color: var(--xc); flood-opacity: .75; }
.xpl [data-part] { transition: opacity .35s ease; }
.xpl-amm [data-part].is-hl { filter: url(#amm-glow); }
.xpl-brg [data-part].is-hl { filter: url(#brg-glow); }
.xpl [data-part].is-hl > .box,
.xpl [data-part].is-hl > .tank,
.xpl [data-part].is-hl > rect:first-child { stroke: var(--xc); stroke-width: 3; }
.xpl .coin { stroke: rgba(255, 255, 255, .85); stroke-width: 1.5; }
.xpl .c-x { fill: #9D7BFF; }
.xpl .c-y { fill: #2EF5A6; }
.xpl .c-fee { fill: #FFC93C; }
.xpl .pipe { fill: none; stroke: var(--surface-3); stroke-width: 16; stroke-linecap: round; stroke-linejoin: round; }
.xpl .pipe-core { fill: none; stroke: var(--border-strong); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 14; }
.xpl .pipe-core.is-on { stroke: var(--xc); animation: xpl-dash .6s linear infinite; }
.xpl .route { fill: none; stroke: none; }
.xpl .feeline { fill: none; stroke: var(--border-strong); stroke-width: 3; stroke-dasharray: 5 7; }
.xpl .feeline.is-on { stroke: #FFC93C; animation: xpl-dash .5s linear infinite; }
@keyframes xpl-dash { to { stroke-dashoffset: -16; } }

/* --- AMM machine --- */
.amm-machine .tank { fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 2; }
.amm-machine .chamber { fill: var(--bg); stroke: var(--border); stroke-width: 1.5; }
.amm-machine .gx1 { stop-color: #5FD3FF; }
.amm-machine .gx2 { stop-color: #8E5CFF; }
.amm-machine .gy1 { stop-color: #4DFFB8; }
.amm-machine .gy2 { stop-color: #11A9B8; }
.amm-machine .liq-x { fill: url(#amm-gx); opacity: .9; }
.amm-machine .liq-y { fill: url(#amm-gy); opacity: .9; }
.amm-machine .sh1 { stop-color: #FFFFFF; stop-opacity: 0; }
.amm-machine .sh2 { stop-color: #FFFFFF; stop-opacity: .08; }
.amm-machine .sheen { fill: url(#amm-sheen); pointer-events: none; }
.amm-machine .bubble { fill: rgba(255, 255, 255, .55); }
.amm-machine .tk { fill: #0F0B14; font-size: 20px; font-weight: 850; text-anchor: middle; letter-spacing: .03em; paint-order: stroke; stroke: rgba(255, 255, 255, .45); stroke-width: 3px; }
.amm-machine .tk.is-dry { fill: var(--text); stroke: var(--bg); }
.amm-plate rect { fill: var(--surface); stroke: var(--border-strong); stroke-width: 2; }
.amm-gear path { fill: var(--gold); stroke: rgba(0, 0, 0, .35); stroke-width: 1.5; }
.amm-curve .axis { fill: none; stroke: var(--border-strong); stroke-width: 2; }
.amm-curve .guide { fill: none; stroke: var(--border-strong); stroke-width: 1.5; stroke-dasharray: 4 5; }
.amm-curve .curve { fill: none; stroke: #2EF5A6; stroke-width: 4; stroke-linecap: round; }
.amm-curve .curve-t { fill: var(--muted); text-anchor: end; }
.amm-curve .delta { fill: none; stroke: #FFC93C; stroke-width: 3.5; transition: opacity .2s; opacity: 0; }
.amm-curve .ah { fill: #FFC93C; }
.amm-curve .delta-t { fill: var(--text); text-anchor: middle; paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }
.amm-curve [data-dy-t] { text-anchor: start; }
.amm-curve .pt-a { fill: var(--bg); stroke: var(--muted); stroke-width: 3; }
.amm-curve .pt-b { fill: #FFC93C; stroke: var(--bg); stroke-width: 3; }

[data-theme="light"] .amm-curve .curve { stroke: #00916A; }
[data-theme="light"] .amm-curve .delta { stroke: #C77700; }
[data-theme="light"] .amm-curve .ah { fill: #C77700; }
[data-theme="light"] .amm-curve .pt-b { fill: #E59500; }
[data-theme="light"] .xpl .feeline.is-on { stroke: #C77700; }
[data-theme="light"] .amm-gear path { fill: #F2A900; }

/* --- bridge machine --- */
.brg-machine .lbl { font-size: 17px; }
.brg-machine .lbl-c { font-size: 15px; }
.brg-machine .lbl-s { font-size: 13px; }
.xpl-brg.is-narrow .brg-machine .lbl-s { font-size: 16.5px; }
.xpl-brg.is-narrow .brg-machine .lbl-c { font-size: 15.5px; }
.xpl-brg.is-narrow .brg-machine .lbl-s.lbl-l { font-size: 14px; }
.xpl-amm.is-narrow .amm-machine .lbl-s { font-size: 18px; }
.brg-machine .chain-t { font-size: 18px; font-weight: 850; letter-spacing: .12em; }
.brg-machine .chain-eth { fill: #8EA2F5; }
.brg-machine .chain-pls { fill: url(#brg-pls); }
.brg-machine .pg1 { stop-color: #3DE8FF; }
.brg-machine .pg2 { stop-color: #A05CFF; }
.brg-machine .pg3 { stop-color: #E64FE6; }
.brg-machine .blk { fill: var(--surface-3); stroke: var(--border-strong); stroke-width: 1; }
.brg-machine .blk-dep { fill: #FFC93C; stroke: none; }
.brg-machine .link { fill: none; stroke: var(--border-strong); stroke-width: 3; stroke-dasharray: 4 6; }
.brg-machine .link-x { stroke-width: 3.5; }
.brg-machine .ring { fill: none; stroke: var(--border-strong); stroke-width: 2; stroke-dasharray: 3 6; }
.xpl-brg.has-quorum .ring { stroke: var(--mint); stroke-dasharray: none; }
.brg-machine .node circle { fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 2; transition: fill .25s, stroke .25s; }
.brg-machine .node-ok { fill: none; stroke: #0F0B14; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.brg-machine .node.is-signed circle { fill: var(--mint); stroke: var(--mint); }
.brg-machine .node.is-signed .node-ok { opacity: 1; }
.brg-machine .lbl-big { fill: var(--text); font-size: 30px; font-weight: 850; text-anchor: middle; font-variant-numeric: tabular-nums; }
.xpl-brg.has-quorum .lbl-big { fill: var(--mint); }
.brg-machine .val-s { fill: var(--xc); }
.brg-machine .lock-body { fill: var(--gold); }
.brg-machine .lock-shackle { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round; transition: transform .3s ease; }
.brg-machine .press-head, .brg-machine .press-base { fill: var(--violet); }
.brg-machine .press-rod { stroke: var(--violet); stroke-width: 4; }
.brg-machine .brg-flame { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; transition: opacity .2s; }
.brg-machine .brg-flame.is-on { opacity: 1; animation: xpl-flicker .18s ease-in-out infinite alternate; }
@keyframes xpl-flicker { from { transform: scale(1, 1); } to { transform: scale(.92, 1.1); } }
.brg-machine .mcoin circle { fill: #2775CA; stroke: #FFFFFF; stroke-width: 2; }
.brg-machine .mcoin.is-bridged circle { stroke: url(#brg-pls); stroke-width: 4; }
.brg-machine .mcoin text { fill: #FFFFFF; font-size: 15px; font-weight: 850; }
.brg-machine .menv rect { fill: #F3EEF6; stroke: #0F0B14; stroke-width: 1.5; }
.brg-machine .menv path { fill: none; stroke: #0F0B14; stroke-width: 1.5; }
.brg-machine .menv .seal { fill: var(--mint); stroke: #0F0B14; stroke-width: 1.5; opacity: 0; }
.brg-machine .menv.is-sealed .seal { opacity: 1; }
.brg-machine .key-badge { opacity: 0; transition: opacity .3s; }
.brg-machine .key-badge circle { fill: #FFC93C; stroke: #0F0B14; stroke-width: 1.5; }
.brg-machine .key-badge path { fill: none; stroke: #0F0B14; stroke-width: 2; stroke-linecap: round; }
.xpl-brg.show-keys .key-badge { opacity: 1; }
.xpl-brg.show-keys [data-part]:not([data-part$="wallet"]) .box { stroke-dasharray: 6 4; }
.brg-machine .fee-chip rect { fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 1.5; }
.brg-machine .fee-chip { opacity: .45; transition: opacity .3s; }
.brg-machine .fee-chip.is-on { opacity: 1; }
.brg-machine .fee-chip.is-on rect { stroke: #FFC93C; }
.xpl-keys.is-on { border-color: #FFC93C; }
[data-theme="light"] .brg-machine .chain-eth { fill: #3C4FA8; }
[data-theme="light"] .brg-machine .node-ok { stroke: #FFFFFF; }
[data-theme="light"] .brg-machine .lock-body { fill: #C77700; }
[data-theme="light"] .brg-machine .lock-shackle { stroke: #C77700; }
[data-theme="light"] .brg-machine .pg1 { stop-color: #006B8F; }
[data-theme="light"] .brg-machine .pg2 { stop-color: #6D00D9; }
[data-theme="light"] .brg-machine .pg3 { stop-color: #A8005F; }

/* no JS: the drawing stays, the controls go */
.xpl:not(.is-ready) .xpl-steps,
.xpl:not(.is-ready) .xpl-ctrl,
.xpl:not(.is-ready) .xpl-seg,
.xpl:not(.is-ready) .xpl-js { display: none; }

@media (max-width: 640px) {
    .xpl { margin-inline: -1rem; padding: .9rem .75rem 1rem; border-radius: 0; border-left: 0; border-right: 0; }
    .xpl::before { border-radius: 0; }
    .xpl-seg button { padding: .4rem .65rem; font-size: .84rem; }
    .xpl-read { grid-template-columns: 1fr 1fr; }
    .amm-curve .lbl-s { font-size: 24px; }
}
@media (max-width: 360px) {
    .amm-curve .lbl-s { font-size: 27px; }
}
[data-fx="off"] .xpl .pipe-core.is-on, [data-fx="off"] .xpl .feeline.is-on, [data-fx="off"] .brg-machine .brg-flame.is-on { animation: none; }
[data-fx="off"] .xpl [data-part], [data-fx="off"] .brg-machine .lock-shackle { transition: none; }
@media (prefers-reduced-motion: reduce) {
    .xpl .pipe-core.is-on, .xpl .feeline.is-on, .brg-machine .brg-flame.is-on { animation: none; }
    .xpl [data-part], .brg-machine .lock-shackle { transition: none; }
}