.demo{padding:16px}.demo-head{justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px;display:flex}.demo-head code{overflow-wrap:anywhere;color:#f1f1ec;min-width:0;font:12px/1.5 var(--mono);background:#20201f;border-radius:7px;padding:4px 9px}.demo-head button{color:#4a4a44;cursor:pointer;background:#fff;border:1px solid #e0e0da;border-radius:9px;flex-shrink:0;align-items:center;gap:6px;padding:6px 10px;font-size:12px;font-weight:600;display:inline-flex}.demo-head button:hover:not(:disabled){background:#f2f2ef}.demo-head button:disabled{opacity:.45;cursor:default}.demo-panels{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.demo-panel{background:#fff;border:1.5px solid #dcdcd5;border-radius:12px;flex-direction:column;gap:9px;min-width:0;padding:12px;display:flex}.demo-panel.is-bad{border-color:#e0a08c}.demo-panel.is-good{border-color:#309b62}.demo-panel h3{color:#30302d;justify-content:space-between;align-items:baseline;gap:6px;font-size:13px;font-weight:680;display:flex}.demo-panel.is-bad h3{color:#a8462a}.demo-panel.is-good h3{color:#1f7444}.demo-panel h3 small{color:#8a8a80;text-align:right;font-size:10.5px;font-weight:500}.demo-status{color:#7a7a73;font-variant-numeric:tabular-nums;margin-top:auto;padding-top:2px;font-size:11.5px;line-height:1.5}.demo-status strong{color:#30302d}.demo-status.is-done{color:#30302d;font-weight:600}.demo-label{color:#8a8a80;font:600 10px/1.4 var(--mono)}.demo-stack{gap:4px;display:grid}.demo-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;display:grid}.demo-grid.is-five{grid-template-columns:repeat(5,minmax(0,1fr))}.demo-pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;display:grid}.demo-columns{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;display:grid}.demo-chain{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;display:grid}.demo-chain .demo-node{padding:7px 3px}.demo-chain .demo-node strong{font-size:10.5px}.demo-cell,.demo-row,.demo-pill,.demo-code,.demo-node,.demo-column{transition:background .2s,border-color .2s,color .2s,opacity .2s,transform .2s,box-shadow .2s}.demo-cell{color:#5f5f58;min-width:0;height:28px;font:600 11px var(--mono);background:#fafaf8;border:1px solid #e6e6e1;border-radius:7px;justify-content:center;align-items:center;display:flex}.demo-cell.is-hot{color:#a8462a;background:#fdeee8;border-color:#d48a72;transform:scale(1.06)}.demo-cell.is-current{color:#20201f;background:#fff;border-color:#20201f;transform:scale(1.06);box-shadow:0 2px 6px #0000001a}.demo-cell.is-ok{color:#fff;background:#309b62;border-color:#309b62}.demo-cell.is-bad{color:#fff;background:#d0694b;border-color:#d0694b}.demo-cell.is-dim{opacity:.4}.demo-row{color:#5f5f58;background:#fafaf8;border:1px solid #e6e6e1;border-radius:7px;align-items:center;gap:8px;min-height:28px;padding:3px 8px;font-size:11.5px;line-height:1.35;display:flex}.demo-row>span:not([class]){white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;overflow:hidden}.demo-row:has(.demo-bar)>span:first-child{flex:0 0 78px}.demo-row.is-hot{background:#fdeee8;border-color:#d48a72}.demo-row.is-current{color:#30302d;background:#fff;border-color:#20201f}.demo-row.is-ok{color:#1f7444;background:#effaf3;border-color:#9fd3b5}.demo-row.is-bad{color:#a8462a;background:#fdf3ef;border-color:#e9b4a3}.demo-row.is-dim{opacity:.4}.demo-row.is-struck>span:not([class]){text-decoration:line-through}.demo-pill{color:#8a8a80;white-space:nowrap;background:#ecece8;border-radius:999px;flex-shrink:0;padding:1px 7px;font-size:10.5px;font-weight:600}.demo-pill.is-ok{color:#fff;background:#309b62}.demo-pill.is-bad{color:#fff;background:#d0694b}.demo-pill.is-hot{color:#a8462a;background:#fdeee8}.demo-pill.is-current{color:#fff;background:#20201f}.demo-pill.is-dim{opacity:.45}.demo-code{color:#7a7a73;font:10.5px/1.5 var(--mono);white-space:nowrap;text-overflow:ellipsis;background:#f2f2ef;border-radius:7px;padding:5px 8px;display:block;overflow:hidden}.demo-code.is-hot{color:#a8462a;background:#fdeee8}.demo-code.is-current{color:#f1f1ec;background:#20201f}.demo-code.is-ok{color:#1f7444;background:#effaf3}.demo-code.is-bad{color:#a8462a;background:#fdf3ef}.demo-node{text-align:center;background:#fafaf8;border:1.5px solid #dcdcd5;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:2px;min-width:0;padding:9px 6px;display:flex}.demo-node strong{color:#30302d;overflow-wrap:anywhere;font-size:12px;font-weight:680}.demo-node small{color:#7a7a73;font-variant-numeric:tabular-nums;font-size:11px}.demo-node.is-wide{width:100%}.demo-node.is-hot{background:#fdeee8;border-color:#d48a72}.demo-node.is-current{background:#fff;border-color:#20201f;transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}.demo-node.is-ok{background:#effaf3;border-color:#309b62}.demo-node.is-ok strong,.demo-node.is-ok small{color:#1f7444}.demo-node.is-bad{background:#fdf3ef;border-color:#d0694b}.demo-node.is-bad strong,.demo-node.is-bad small{color:#a8462a}.demo-node.is-dim{opacity:.4}.demo-drawer{border:1px dashed #dcdcd5;border-radius:9px;align-items:center;gap:6px;padding:4px;transition:border-color .2s,background .2s,opacity .2s;display:flex}.demo-drawer>.demo-label{text-align:center;flex-shrink:0;width:40px}.demo-drawer-keys{flex:1;gap:4px;min-width:0;display:flex}.demo-drawer-keys .demo-cell{flex:1;height:24px;font-size:10.5px}.demo-drawer.is-open{background:#effaf3;border-style:solid;border-color:#309b62}.demo-drawer.is-open>.demo-label{color:#1f7444}.demo-drawer.is-dim{opacity:.35}.demo-column{background:#fafaf8;border:1.5px solid #dcdcd5;border-radius:10px;flex-direction:column;align-items:center;gap:6px;min-width:0;min-height:118px;padding:9px 6px;display:flex}.demo-column>strong{color:#30302d;font-size:12px;font-weight:680}.demo-column.is-current{background:#fff;border-color:#20201f;box-shadow:0 2px 8px #0000001a}.demo-column.is-bad{opacity:.75;background:#fdf3ef;border-color:#d0694b}.demo-chips{flex-wrap:wrap;justify-content:center;gap:3px;display:flex}.demo-chips span{color:#fff;font:600 10px/1.5 var(--mono);background:#309b62;border-radius:5px;padding:1px 5px;animation:.25s ease-out demo-pop}@keyframes demo-pop{0%{opacity:0;transform:scale(.4)}}.demo-bar{background:#ecece8;border-radius:999px;height:10px;display:block;position:relative;overflow:hidden}.demo-bar>span{border-radius:inherit;background:#d0694b;transition:width .3s linear;position:absolute;inset:0 auto 0 0}.demo-panel.is-good .demo-bar>span,.demo-bar>span.is-ok{background:#309b62}.demo-bar>span.is-bad{background:#d0694b}.demo-bar.is-inline{flex:1;min-width:30px;height:8px}.demo-route{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:6px;display:grid}.demo-distance{color:#8a8a80;font:600 10px var(--mono)}.demo-distance:before,.demo-distance:after{content:" ··· "}.demo-gates{grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(0,1fr));align-items:center;gap:6px;padding:0 8px;display:grid}.demo-row.demo-gates{padding:4px 8px}.demo-row.demo-gates>span:not([class]){white-space:normal}.demo-gates .demo-pill{justify-self:start}.demo-comment{color:#5f5f58;background:#fff;border:1px solid #e6e6e1;border-radius:9px;align-items:center;gap:8px;min-height:34px;padding:6px 9px;font-size:11.5px;display:flex}.demo-comment b{color:#fff;background:#20201f;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:22px;height:22px;font-size:10px;display:flex}.demo-comment code{text-overflow:ellipsis;white-space:nowrap;min-width:0;font:10.5px var(--mono);color:#30302d;overflow:hidden}.demo-broken{color:#a8462a}.demo-funnel-step{justify-items:start;gap:4px;display:grid}.demo-funnel-step>.demo-pill{margin-left:86px}.demo-funnel-step>.demo-row{width:100%}@media (width<=600px){.demo-head{align-items:flex-start}.demo-head code{font-size:11px}.demo-panels{grid-template-columns:minmax(0,1fr)}.demo-chain{gap:3px}.demo-chain .demo-node{padding:7px 1px}.demo-chain .demo-node strong{overflow-wrap:normal;font-size:9px}.demo-gates{grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:4px}}@media (prefers-reduced-motion:reduce){.demo-cell,.demo-row,.demo-pill,.demo-code,.demo-node,.demo-column,.demo-drawer,.demo-bar>span{transition:none}.demo-chips span{animation:none}}