/* A self-contained, fictional market preview. No brokerage feed is used. */
.market-demo {
 --demo-up:#ff8291; --demo-down:#7daaff; --demo-muted:#a7b8d2;
 position:relative; isolation:isolate; overflow:hidden; padding:14px;
 color:#f1f6ff; background:linear-gradient(135deg,#172d50 0%,#10213c 55%,#142b49 100%);
 border:1px solid #2b4264; border-radius:11px; font-size:10px; line-height:1.45;
 box-shadow:0 10px 30px #18305421; font-variant-numeric:tabular-nums;
}
.market-demo [hidden]{display:none!important}
.market-demo button{cursor:pointer}
.market-demo :focus-visible{outline-color:#a9c5ff;outline-offset:3px}
.market-demo-top,.demo-controls,.demo-stream,.demo-panel-heading,.demo-footer{display:flex;align-items:center;justify-content:space-between;gap:8px}
.market-demo-top{min-height:27px}
.demo-stream{justify-content:flex-start;font-size:10px;color:#d6e3f8}
.demo-stream>i{width:6px;height:6px;border-radius:50%;background:#77ddc0;box-shadow:0 0 0 4px #77ddc010}
.demo-badge{font:8px/1.4 monospace;letter-spacing:1px;color:#b8c9e3;border:1px solid #4a5d79;border-radius:4px;padding:3px 5px}
#demo-toggle{color:#dce8fa;border:1px solid #475d7c;background:#ffffff08;border-radius:5px;min-width:62px;min-height:28px;padding:4px 8px;font-size:9px}
#demo-toggle:hover{background:#ffffff16;border-color:#8da9d2}
.demo-quote{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0 12px;border-bottom:1px solid #ffffff13}
.market-demo .demo-quote h3{font-size:13px;letter-spacing:-.25px;margin:0 0 4px;color:#f3f7ff}
.demo-quote h3>span{display:inline-block;font-size:9px;font-weight:400;letter-spacing:0;color:var(--demo-muted);margin-left:6px}
.demo-price-line{display:flex;align-items:baseline;gap:5px;position:relative;white-space:nowrap}
#demo-price{font-size:32px;line-height:1.1;font-weight:700;letter-spacing:-1px;color:var(--demo-up)}
.demo-currency{font-size:11px;color:#b6c7e0}
.quote-spark{font-size:22px;color:var(--demo-up);margin-left:7px;opacity:.7}
.demo-change{color:var(--demo-up);font-size:10px;font-weight:700;margin:5px 0 0}
.market-demo[data-direction="down"] #demo-price,.market-demo[data-direction="down"] .demo-change,.market-demo[data-direction="down"] .quote-spark{color:var(--demo-down)}
.quote-label{text-align:right;display:grid;gap:3px}
.quote-label>span{font:8px/1.4 monospace;letter-spacing:1px;color:#9fb9e1}
.quote-label>b{font-size:15px;color:#e7effd;letter-spacing:-.4px}
.quote-label>small{font-size:9px;color:var(--demo-muted);margin-top:3px}
.demo-metrics{display:flex;justify-content:space-between;flex-wrap:wrap;gap:5px 10px;padding:9px 0 10px;font-size:9px;color:var(--demo-muted)}
.demo-metrics b{color:#e2ebfa;font-size:9px;margin-left:4px;font-weight:400}
#demo-high{color:var(--demo-up)}#demo-low{color:var(--demo-down)}
.demo-market-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(112px,1fr);gap:13px}
.demo-chart-panel,.demo-book-panel{min-width:0}
.demo-panel-heading{min-height:28px;margin-bottom:4px}
.demo-panel-heading h4{font-size:10px;font-weight:700;letter-spacing:0;white-space:nowrap;margin:0}
.demo-panel-heading h4>span{font:7px monospace;letter-spacing:.8px;color:var(--demo-muted);margin-left:4px}
.chart-switch{display:flex;align-items:center;gap:2px;padding:2px;border-radius:5px;background:#0b1932;border:1px solid #2b405f}
.chart-switch button{font-size:9px;line-height:1.4;min-height:23px;padding:3px 7px;background:transparent;border:0;border-radius:3px;color:var(--demo-muted)}
.chart-switch button[aria-pressed="true"]{color:#f4f8ff;background:#2b4670;box-shadow:0 1px 4px #020b201f}
.chart-switch button:hover{color:#fff}
.demo-chart{display:block;width:100%;height:145px;overflow:visible}
.demo-grid-lines{fill:none;stroke:#2e4566;stroke-dasharray:3 5;stroke-width:1}
.demo-candle.up{color:var(--demo-up)}.demo-candle.down{color:var(--demo-down)}
.candle-wick{fill:none;stroke:currentColor;stroke-width:1.3;vector-effect:non-scaling-stroke}
.candle-body{fill:currentColor;stroke:none}
.demo-volume.up{fill:#ff829148}.demo-volume.down{fill:#7daaff48}
#demo-area{fill:url(#demo-chart-fill)}
#demo-line{fill:none;stroke:#8fb5ff;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
#demo-line,#demo-area{opacity:0;transition:opacity .35s}
#demo-candles{opacity:1;transition:opacity .35s}
.market-demo[data-chart="line"] #demo-line,.market-demo[data-chart="line"] #demo-area{opacity:1}
.market-demo[data-chart="line"] #demo-candles{opacity:0}
.demo-current-line{stroke:#90b3e1;stroke-dasharray:3 4;stroke-width:.8;opacity:.65}
.demo-price-dot{fill:#dce9ff;stroke:#8eb5ff;stroke-width:2}
.demo-chart-axis{display:flex;justify-content:space-between;color:var(--demo-muted);font-size:8px;margin-top:2px}
.demo-chart-axis>span:last-child{display:flex;align-items:center;gap:4px}
.demo-chart-axis i{height:4px;width:4px;border-radius:50%;background:#77ddc0}
.book-unit{font-size:8px;color:var(--demo-muted);white-space:nowrap}
.demo-orderbook{display:grid;gap:2px}
.book-row{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1fr;gap:5px;align-items:center;min-height:23px;padding:3px 6px;font-size:10px;overflow:hidden;border-radius:2px}
.book-row.ask{color:var(--demo-down)}.book-row.bid{color:var(--demo-up)}
.book-row:nth-child(4){margin-top:3px}
.book-volume{color:#b9c9df;font-size:9px}
.book-price{text-align:right;font-weight:700}
.book-bar{position:absolute;z-index:-1;inset:0 0 0 auto;width:var(--depth,50%);background:#709cf326;transition:width .7s cubic-bezier(.22,.7,.2,1)}
.bid .book-bar{background:#ff7c9124}
.book-totals{display:flex;justify-content:space-between;gap:4px;margin-top:5px;font-size:8px;color:var(--demo-muted)}
.book-totals b{font-size:8px;font-weight:400;margin-left:2px}
#demo-ask-total{color:var(--demo-down)}#demo-bid-total{color:var(--demo-up)}
.demo-tape{display:flex;align-items:center;gap:9px;margin-top:12px;padding:9px 0;border-top:1px solid #ffffff13;border-bottom:1px solid #ffffff13;min-width:0}
.tape-label{flex:none;font-size:9px;color:#c3d3eb}
#demo-trades{display:flex;justify-content:space-between;gap:6px;flex:1;min-width:0}
.trade-chip{display:flex;align-items:center;gap:5px;white-space:nowrap;font-size:9px}
.trade-chip>span:first-child{font-size:8px;color:var(--demo-muted)}
.trade-chip.up{color:var(--demo-up)}.trade-chip.down{color:var(--demo-down)}
.demo-footer{font-size:8px;color:var(--demo-muted);padding-top:9px;gap:6px;flex-wrap:wrap}
.demo-footer>span:last-child{font-family:monospace;font-size:9px;white-space:nowrap}
.market-demo[data-running="true"] .demo-stream>i{animation:demo-heartbeat 2s ease-in-out infinite}
.market-demo[data-running="true"] .demo-price-dot{animation:demo-chart-beat 1.5s ease-in-out infinite}
.market-demo[data-running="true"].is-ticking #demo-price{animation:demo-quote-tick .55s ease-out}
.market-demo[data-running="true"].is-ticking .trade-chip:first-child{animation:demo-trade-enter .5s ease-out}
.market-demo[data-running="false"] .book-bar{transition:none}
.workspace-preview:has(.market-demo[data-running="true"]) .connection-lines:after{animation:demo-data-packet 1.5s ease-in-out infinite}
.workspace-preview:has(.market-demo[data-running="true"]) .center-node{animation:demo-hub-glow 3s ease-in-out infinite}
@keyframes demo-heartbeat{0%,100%{box-shadow:0 0 0 3px #77ddc00d;opacity:.75}50%{box-shadow:0 0 0 5px #77ddc025;opacity:1}}
@keyframes demo-chart-beat{0%,100%{stroke-width:2;stroke-opacity:.9}50%{stroke-width:6;stroke-opacity:.2}}
@keyframes demo-quote-tick{0%{text-shadow:0 0 18px #ff91a280;transform:translateY(-2px)}100%{text-shadow:none;transform:translateY(0)}}
@keyframes demo-trade-enter{from{opacity:.3;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes demo-data-packet{0%{transform:translateY(-10px);opacity:0}35%{opacity:1}100%{transform:translateY(9px);opacity:0}}
@keyframes demo-hub-glow{0%,100%{box-shadow:0 3px 12px #234a9510}50%{box-shadow:0 0 16px #2864db2c;border-color:#98b6ed}}
/* Keep the animated workspace compact within the existing hero. */
.preview-content .connection-map{padding-bottom:13px}
.preview-content .broker-node{padding-top:6px;padding-bottom:6px}
.preview-content .center-node{padding-top:4px;padding-bottom:4px;margin-top:9px}
@media(min-width:761px) and (max-width:1100px){.market-demo{padding:11px}.demo-market-grid{grid-template-columns:minmax(0,1.35fr) minmax(100px,1fr);gap:9px}.demo-panel-heading h4>span{display:none}.quote-label>small{max-width:95px;line-height:1.6}.demo-metrics{gap:5px 8px}.demo-metrics>span{min-width:40%}.trade-chip>span:first-child{display:none}.demo-chart{height:145px}.book-row{font-size:9px;padding:3px 4px}.book-volume{font-size:8px}.demo-footer{font-size:8px}}
@media(max-width:760px){.market-demo{padding:12px}.demo-quote{padding:11px 0}.demo-market-grid{grid-template-columns:minmax(0,1.4fr) minmax(102px,1fr);gap:9px}.demo-panel-heading h4>span{display:none}.demo-metrics{gap:5px 8px}.demo-metrics>span{min-width:40%}.demo-chart{height:145px}.quote-label>small{display:none}.trade-chip>span:first-child{display:none}.trade-chip{font-size:9px}.demo-footer{font-size:8px}.book-row{font-size:9px}.book-volume{font-size:8px}#demo-price{font-size:30px}.quote-label>b{font-size:13px}}
@media(max-width:380px){.preview-content .broker-node{flex-direction:column;gap:5px;white-space:nowrap}.market-demo{padding:10px}.demo-market-grid{grid-template-columns:minmax(0,1.25fr) minmax(87px,1fr);gap:7px}.demo-controls{gap:5px}.demo-stream{font-size:9px;gap:7px}#demo-toggle{min-width:55px;padding:4px 5px}.demo-badge{font-size:7px;padding:3px}.quote-label>span{font-size:7px;letter-spacing:.4px}.quote-label>b{font-size:12px}.demo-price-line{gap:3px}.quote-spark{margin-left:3px}#demo-price{font-size:28px}.demo-metrics,.demo-metrics b{font-size:8px}.demo-quote h3>span{font-size:8px;margin-left:3px}.demo-panel-heading h4{font-size:9px}.chart-switch button{font-size:8px;padding:3px 4px;min-height:25px}.demo-market-grid .demo-panel-heading{gap:3px}.book-unit{font-size:7px}.book-row{padding:3px 4px;gap:3px;font-size:9px}.book-volume{font-size:8px}.book-totals{font-size:7px;gap:3px}.book-totals b{font-size:7px;margin-left:0}.demo-tape{gap:7px}.tape-label{font-size:8px}#demo-trades{gap:5px}.trade-chip{font-size:8px}.demo-footer{font-size:7px;gap:5px}.demo-footer>span:last-child{font-size:8px}}
@media(prefers-reduced-motion:reduce){.market-demo *,.workspace-preview .connection-lines:after,.workspace-preview .center-node{animation:none!important;transition:none!important}}