.pattern-intro h1{font-size:clamp(28px,4vw,42px)}
.task-example{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.7}
.demo textarea{display:block;width:100%;box-sizing:border-box;border:1px solid #b8ceec;border-radius:9px;padding:10px;font:16px/1.5 monospace;background:white;color:#111}
.hist-chart{height:220px;display:flex;align-items:stretch;gap:3px;border-bottom:2px solid #174ea6;margin:25px 0 35px}
.hist-column{flex:1;position:relative;min-width:0}
.hist-bar{position:absolute;bottom:0;width:100%;background:#c9ddfa;border:1px solid #174ea6;box-sizing:border-box;min-height:1px;transition:height .2s}
.hist-column.active .hist-bar{background:#174ea6}
.hist-rectangle{position:absolute;bottom:0;width:100%;background:#06a4b640;border-top:3px solid #007c9c;box-sizing:border-box;pointer-events:none}
.hist-value{position:absolute;left:50%;transform:translateX(-50%);font:700 11px system-ui;color:#101e36}
.hist-index{position:absolute;bottom:-23px;left:50%;transform:translateX(-50%);font:11px system-ui}
.hist-stat{font-size:20px;color:#174ea6;font-weight:700}.hist-stack{overflow-wrap:anywhere;min-height:25px}
.expression{white-space:pre-wrap;overflow-wrap:anywhere;font-weight:700;color:#174ea6}
.hist-chart.dense .hist-value{writing-mode:vertical-rl;transform:none;left:0}
pre[data-code] code{counter-reset:min-line}pre[data-code] code>span::before{counter-increment:min-line;content:counter(min-line);display:inline-block;width:2em;margin-right:.8em;text-align:right;color:#536480;font-size:.8em;user-select:none}
@media(prefers-reduced-motion:reduce){.hist-bar{transition:none}}