.ch21-demo{margin:1.5em 0 2em;padding:1.25em;border:1px solid #dbe3e9;border-radius:10px;background:#f8fafc;color:#263544;line-height:1.65}
.ch21-demo p,.ch21-demo h4,.ch21-demo label{ text-indent:0 }
.ch21-demo h4{margin:0 0 .7em;font-size:1.05em;color:inherit}
.ch21-demo .ch21-kicker{font-size:.78em;letter-spacing:.06em;color:#526a7c;margin-bottom:.4em}
.ch21-demo .ch21-muted{font-size:.84em;color:#536575;margin:.7em 0 0}
.ch21-demo .ch21-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2em;align-items:start}
.ch21-demo .ch21-controls{display:flex;align-items:center;flex-wrap:wrap;gap:.65em;margin:.9em 0}
.ch21-demo button{font:inherit;font-size:.85em;color:#244e70;border:1px solid #aac1d2;border-radius:5px;background:white;padding:.35em .8em;cursor:pointer}
.ch21-demo button[aria-pressed=true],.ch21-demo button.ch21-active{background:#245e88;color:white;border-color:#245e88}
.ch21-demo button:focus-visible,.ch21-demo input:focus-visible{outline:3px solid #dc941d;outline-offset:3px}
.ch21-demo input[type=range]{width:100%;accent-color:#286a99}
.ch21-demo figure{margin:0;text-align:center}.ch21-demo figure img{display:block;margin:0 auto;width:100%;max-width:270px;border-radius:5px}
.ch21-demo figcaption{margin:.45em 0;font-size:.85em}.ch21-demo .ch21-pixel{image-rendering:pixelated}
.ch21-demo .ch21-original{padding:.85em;background:white;border-radius:5px;white-space:pre-wrap}
.ch21-demo .ch21-tokens{display:flex;flex-wrap:wrap;gap:.4em;margin:.8em 0}
.ch21-demo .ch21-token{display:inline-flex;flex-direction:column;padding:.45em .6em;border-radius:5px;border:1px solid #bdceda;background:#e7f0f8;min-width:2.7em;text-align:center;white-space:pre}
.ch21-demo .ch21-token:nth-child(3n+2){background:#eeeafa}.ch21-demo .ch21-token:nth-child(3n){background:#e4f3ec}
.ch21-demo .ch21-token small{font:11px ui-monospace,monospace;color:#596d7d;display:block;white-space:normal}
.ch21-demo .ch21-token.ch21-accepted{background:#dceee3;border-color:#4d8867}.ch21-demo .ch21-token.ch21-rejected{background:#f9dfd8;border-color:#c0573e}.ch21-demo .ch21-token.ch21-discarded{background:#eee;color:#858585;text-decoration:line-through}
.ch21-demo .ch21-token.ch21-pending{background:white;color:#7b8590}.ch21-demo .ch21-token.ch21-high{background:#dcefe3;border-color:#308758}.ch21-demo .ch21-token.ch21-low{background:#f5eee6;border-color:#c7ac8c}
.ch21-demo .ch21-result{border-left:3px solid #36856b;padding:.7em 1em;background:#edf5f0;min-height:3em;margin-top:.8em;text-indent:0}
.ch21-demo .ch21-metrics{display:flex;flex-wrap:wrap;gap:1.2em;margin:.7em 0}.ch21-demo .ch21-metrics strong{font-size:1.55em;font-variant-numeric:tabular-nums;display:block;color:#235c83}.ch21-demo .ch21-metrics span{font-size:.8em}
.ch21-demo .ch21-matrix{padding:.8em .6em;background:#e7eef5;border:1px solid #aebfcc;border-radius:5px;text-align:center}.ch21-demo .ch21-matrix small{display:block}.ch21-demo .ch21-rank-flow{display:flex;align-items:center;justify-content:center;gap:.7em;flex-wrap:wrap}
.ch21-demo table{font-size:.85em;background:white;width:100%;margin:.6em 0}.ch21-demo th,.ch21-demo td{padding:.4em .5em}.ch21-demo .ch21-answer{padding:1em;background:white;border-radius:5px;border:1px solid #dbe3e9}
.ch21-code{border:1px solid #e3e7eb;border-radius:6px;margin:1em 0}.ch21-code summary{padding:.55em .8em;cursor:pointer;color:#496378;font-size:.85em}.ch21-code>div{margin:0}
.ch21-demo noscript{display:block;padding:.6em;background:#fff4d5}.ch21-demo .ch21-status{min-height:2em;font-size:.9em;margin:.5em 0}
@media(max-width:600px){.ch21-demo{padding:.8em}.ch21-demo .ch21-columns{grid-template-columns:1fr}.ch21-demo figure img{max-width:220px}.ch21-demo .ch21-metrics strong{font-size:1.25em}}