/* Full-size terminal canvases inside the horizontal story. Values remain illustrative. */
.showcase-visual{container-type:size}
.showcase-visual .fs-scene,.showcase-visual .cs-frame{height:100%;border-radius:14px;box-shadow:0 24px 70px -36px #000;min-height:0;container-type:normal}
.showcase-visual .fs-scene{--fs-muted:#a3afbd;--fs-line:#9da7b426;display:flex;flex-direction:column}
.showcase-visual .fs-head,.showcase-visual .cs-head{height:auto;min-height:clamp(40px,9cqh,54px);padding:10px clamp(14px,3.4cqw,26px);flex:none}
.showcase-visual .fs-head strong,.showcase-visual .cs-head strong{font-size:clamp(12px,2.4cqw,16px)}
.showcase-visual .fs-detail{display:inline;font-size:clamp(9px,1.7cqw,11px)}
.showcase-visual .fs-status,.showcase-visual .cs-badge{font-size:clamp(9px,1.7cqw,11px);color:#9fb0bd}
.showcase-visual .fs-eyebrow{font-size:clamp(10px,1.9cqw,12px)}
.showcase-visual .fs-foot{display:flex;min-height:clamp(27px,6.5cqh,39px);padding:7px clamp(14px,3.4cqw,26px);font-size:clamp(9px,1.7cqw,11px);color:#a3afbd;flex:none}
.showcase-visual .fs-flow-overview{padding:clamp(10px,3.3cqh,21px) clamp(14px,3.4cqw,26px) 0;flex:none}
.showcase-visual .fs-metric{font-size:clamp(27px,5.6cqw,38px)}
.showcase-visual .fs-legend{font-size:clamp(10px,1.9cqw,12px);gap:clamp(8px,2cqw,14px)}
.showcase-visual .fs-flow-plot{padding:7px clamp(14px,3.4cqw,26px) 10px;flex:1;min-height:0;display:flex;flex-direction:column}
.showcase-visual .fs-flow-plot>.fs-chart{height:0;flex:1;min-height:0;width:100%}
.showcase-visual .fs-time{font-size:clamp(9px,1.8cqw,12px);margin-top:4px;flex:none}
.showcase-visual .fs-tape{display:block;margin:0 clamp(14px,3.4cqw,26px) clamp(7px,2cqh,13px);flex:none}
.showcase-visual .fs-tape-title{display:flex;font-size:clamp(10px,1.9cqw,12px);padding-top:clamp(7px,2cqh,13px)}
.showcase-visual .fs-tape thead{display:table-header-group}
.showcase-visual .fs-tape table{margin-top:4px;font-size:clamp(11px,2.1cqw,14px)}
.showcase-visual .fs-tape th{font-size:clamp(10px,1.9cqw,12px);padding:clamp(3px,.9cqh,6px) 0;color:#a3afbd}
.showcase-visual .fs-tape td{padding:clamp(4px,1.1cqh,7px) 0;font-size:clamp(11px,2.1cqw,14px)}
.showcase-visual .fs-contract,.showcase-visual .fs-tape-symbol{font-size:clamp(10px,1.9cqw,12px)}

.showcase-visual .fs-scenario{padding:clamp(10px,2.8cqh,17px) clamp(14px,3.4cqw,26px);flex:none;flex-direction:row;align-items:center}
.showcase-visual .fs-scenario-chip{font-size:clamp(10px,1.8cqw,12px)}
.showcase-visual .fs-hedge-lane{padding:clamp(8px,2.2cqh,14px) clamp(14px,3.4cqw,26px);display:flex;flex-direction:column;flex:1;min-height:0}
.showcase-visual .fs-gamma{font-size:clamp(18px,3.7cqw,25px);min-width:clamp(32px,6cqw,43px)}
.showcase-visual .fs-lane-label>div strong{font-size:clamp(12px,2.3cqw,15px)}
.showcase-visual .fs-lane-label>div>span{font-size:clamp(10px,1.9cqw,12px)}
.showcase-visual .fs-lean{font-size:clamp(9px,1.8cqw,11px)}
.showcase-visual .fs-sensitivity{height:0;flex:1;min-height:0;margin-block:8px 3px}
.showcase-visual .fs-lane-axis{font-size:clamp(9px,1.8cqw,12px)}

.showcase-visual .fs-alignment{font-size:clamp(10px,1.9cqw,12px);padding:clamp(10px,2.6cqh,16px) clamp(14px,3.4cqw,26px);flex:none}
.showcase-visual .fs-ladder-head{padding:0 clamp(14px,3.4cqw,26px) 7px clamp(32px,7cqw,48px);flex:none}
.showcase-visual .fs-ladder-head>span{font-size:clamp(13px,2.8cqw,18px)}
.showcase-visual .fs-ladder-head small{font-size:clamp(9px,1.8cqw,11px)}
.showcase-visual .fs-ladder-plot{height:0;min-height:0;flex:1;padding:0 clamp(14px,3.4cqw,26px)}
.showcase-visual .fs-level-label{left:clamp(14px,3.4cqw,26px);font-size:clamp(9px,1.8cqw,11px)}
.showcase-visual .fs-expected{display:block;flex:none;margin:7px clamp(14px,3.4cqw,26px) clamp(10px,2.8cqh,17px);padding-top:clamp(9px,2.4cqh,15px)}
.showcase-visual .fs-range-title,.showcase-visual .fs-range-labels{font-size:clamp(10px,1.9cqw,12px)}
.showcase-visual .fs-range{margin-block:clamp(13px,3.2cqh,20px) 11px}

.showcase-visual .fs-context-title{padding:clamp(10px,2.6cqh,16px) clamp(14px,3.4cqw,26px);flex:none}
.showcase-visual .fs-context-title strong{font-size:clamp(13px,2.7cqw,18px);margin-top:5px}
.showcase-visual .fs-context-spark{width:clamp(55px,16cqw,106px);flex-basis:clamp(55px,16cqw,106px)}
.showcase-visual .fs-context-rows{margin-inline:clamp(14px,3.4cqw,26px);flex:none}
.showcase-visual .fs-context-rows>div{min-height:clamp(27px,7.7cqh,45px)}
.showcase-visual .fs-context-rows dt,.showcase-visual .fs-context-rows dd{font-size:clamp(10px,2.1cqw,13px)}
.showcase-visual .fs-context-rows dd{max-width:62%}
.showcase-visual .fs-source-num{width:18px;height:18px;font-size:10px;flex:none}
.showcase-visual .fs-chat{margin:clamp(9px,2.5cqh,16px) clamp(10px,2.3cqw,16px);padding:clamp(10px,3cqh,18px) clamp(12px,2.7cqw,20px);flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center}
.showcase-visual .fs-chat-label{font-size:clamp(12px,2.4cqw,15px)}
.showcase-visual .fs-upcoming{font-size:clamp(9px,1.7cqw,11px)}
.showcase-visual .fs-question{font-size:clamp(11px,2.3cqw,14px);margin-top:clamp(9px,2.5cqh,15px);padding:clamp(5px,1.6cqh,9px) 10px}
.showcase-visual .fs-answer{margin-top:clamp(8px,2.2cqh,13px)}
.showcase-visual .fs-answer p{font-size:clamp(10px,2.3cqw,14px);line-height:1.6}
.showcase-visual .fs-sources{font-size:clamp(9px,1.8cqw,11px);margin-top:clamp(7px,1.9cqh,11px)}

/* Equal scale inventory bars and volatility shapes expand with their canvas. */
.showcase-visual .cs-frame{--cs-muted:#a7b4c2;--cs-line:#9da7b426;background:linear-gradient(145deg,#11171cb8,transparent 48%),#07080a;display:flex;flex-direction:column;font-size:clamp(11px,2.1cqw,14px)}
.showcase-visual .cs-inventory-legend{padding:clamp(14px,4cqh,24px) clamp(14px,3.4cqw,26px);font-size:clamp(11px,2.1cqw,14px);flex:none}
.showcase-visual .cs-key{width:clamp(10px,2.2cqw,15px);height:7px}
.showcase-visual .cs-ladder{width:calc(100% - clamp(28px,6.8cqw,52px));margin:0 clamp(14px,3.4cqw,26px);height:100%;min-height:0;flex:1;font-size:clamp(12px,2.5cqw,16px)}
.showcase-visual .cs-ladder tr{height:20%}
.showcase-visual .cs-ladder th{width:clamp(63px,15cqw,90px);font-size:clamp(13px,2.8cqw,18px)}
.showcase-visual .cs-ladder th small{font-size:clamp(10px,1.9cqw,12px);margin-left:5px}
.showcase-visual .cs-ladder td:last-child{width:clamp(69px,16cqw,94px);font-size:clamp(13px,2.8cqw,18px)}
.showcase-visual .cs-ladder td:nth-child(2){padding-inline:clamp(6px,1.5cqw,12px)}
.showcase-visual .cs-gamma-track{height:clamp(30px,7.3cqh,43px)}
.showcase-visual .cs-oi-bar{height:70%;top:15%;border-radius:2px}
.showcase-visual .cs-adjusted-bar{height:25%;top:37.5%;border-radius:2px}
.showcase-visual .cs-total{padding:clamp(14px,4cqh,24px) clamp(14px,3.4cqw,26px);margin-top:clamp(10px,3cqh,18px);font-size:clamp(11px,2.1cqw,14px);flex:none}
.showcase-visual .cs-total>span:last-child{gap:clamp(10px,2.5cqw,18px)}
.showcase-visual .cs-total b{font-size:clamp(15px,3.2cqw,21px)}
.showcase-visual .cs-total strong{font-size:clamp(19px,4.2cqw,28px)}
.showcase-visual .cs-vol-metrics{padding:clamp(16px,5cqh,30px) clamp(14px,3.4cqw,26px) 0;gap:clamp(10px,2.7cqw,20px);flex:none}
.showcase-visual .cs-vol-metrics>div+div{padding-left:clamp(10px,2.7cqw,20px)}
.showcase-visual .cs-vol-metrics dt{font-size:clamp(10px,2.1cqw,14px)}
.showcase-visual .cs-vol-metrics dd{font-size:clamp(31px,6.7cqw,46px);margin-top:8px}
.showcase-visual .cs-vol-metrics dd>span{font-size:clamp(16px,3.2cqw,23px)}
.showcase-visual .cs-vol-metrics>div:last-child dd{font-size:clamp(26px,5.6cqw,38px);padding-top:7px}
.showcase-visual .cs-move-band{padding:clamp(27px,8cqh,48px) clamp(14px,3.4cqw,26px) clamp(20px,6cqh,36px);flex:none}
.showcase-visual .cs-band{height:6px;margin-inline:5px}
.showcase-visual .cs-band:before{inset:-7px 0}
.showcase-visual .cs-band i{top:-5px;bottom:-5px}
.showcase-visual .cs-band b{height:8px;width:8px;left:calc(50% - 4px)}
.showcase-visual .cs-band-labels{font-size:clamp(11px,2.3cqw,14px);margin-top:15px}
.showcase-visual .cs-vol-bottom{padding:clamp(15px,4.5cqh,27px) clamp(14px,3.4cqw,26px);gap:clamp(12px,3cqw,22px);min-height:0;flex:1}
.showcase-visual .cs-vol-bottom>div{display:flex;flex-direction:column;min-height:0}
.showcase-visual .cs-vol-bottom>div+div{padding-left:clamp(12px,3cqw,22px)}
.showcase-visual .cs-mini-heading{gap:7px;flex:none}
.showcase-visual .cs-mini-heading strong,.showcase-visual .cs-mini-heading span{font-size:clamp(10px,2.1cqw,13px)}
.showcase-visual .cs-mini-chart{height:0;min-height:0;flex:1;max-height:180px;margin-top:clamp(7px,2cqh,14px);overflow:visible}

@container (max-width:420px){
 .showcase-visual .fs-detail{display:none}
 .showcase-visual .fs-head,.showcase-visual .cs-head{padding-block:8px}
 .showcase-visual .fs-status{letter-spacing:.035em}
 .showcase-visual .fs-flow .fs-head{min-height:38px}
 .showcase-visual .fs-flow-overview{padding-top:8px}
 .showcase-visual .fs-flow .fs-metric{font-size:27px}
 .showcase-visual .fs-flow-plot{padding-block:4px 7px}
 .showcase-visual .fs-tape{margin-bottom:5px}
 .showcase-visual .fs-tape-title{padding-top:6px}
 .showcase-visual .fs-tape table{margin-top:2px}
 .showcase-visual .fs-tape th{padding-block:2px}
 .showcase-visual .fs-tape td{padding-block:2px;font-size:10.5px}
 .showcase-visual .fs-flow .fs-foot{min-height:25px;padding-block:5px}
 .showcase-visual .fs-scenario{gap:5px;padding-block:8px}
 .showcase-visual .fs-scenario-chip{font-size:9px}
 .showcase-visual .fs-scenario-chip b{margin-inline:3px}
 .showcase-visual .fs-source-num{height:14px;width:14px;font-size:8px}
 .showcase-visual .fs-context-rows dt{gap:5px}
 .showcase-visual .fs-ai .fs-context-title{padding-block:9px}
 .showcase-visual .fs-ai .fs-context-rows>div{min-height:26px}
 .showcase-visual .fs-chat{padding-block:8px;margin-block:7px;justify-content:flex-start}
 .showcase-visual .fs-question{margin-top:8px;padding:5px 8px}
 .showcase-visual .fs-sources{margin-top:6px;gap:4px}
 .showcase-visual .fs-ai .fs-sources{display:none}
 .showcase-visual .fs-answer{gap:7px;margin-top:7px}
 .showcase-visual .fs-answer p{line-height:1.5}
 .showcase-visual .cs-mini-heading{flex-direction:column;align-items:start;gap:4px}
 .showcase-visual .cs-vol-metrics{gap:8px}
 .showcase-visual .cs-vol-metrics>div+div{padding-left:9px}
 .showcase-visual .cs-vol-metrics dt{font-size:10px}
 .showcase-visual .cs-vol-metrics dd{font-size:30px}
 .showcase-visual .cs-vol-metrics>div:last-child dd{font-size:24px}
 .showcase-visual .cs-move-band{padding-block:25px 20px}
}