.demo{gap:20px;min-width:0;display:grid}.demo-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:13px;display:grid}.demo-grid--stack{grid-template-columns:minmax(0,1fr)}.demo-card{border:1px solid var(--color-line);background:var(--color-paper);border-radius:7px;flex-direction:column;gap:8px;min-width:0;padding:17px;display:flex;position:relative}.demo-card--wide{grid-column:1/-1}.demo-card label{font-size:calc(11px * var(--type-scale));color:var(--color-ink);flex-direction:column;gap:6px;font-weight:550;display:flex}.demo-card input:not([type=checkbox]):not([type=radio]),.demo-card select,.demo-card textarea{width:100%;font-size:calc(12px * var(--type-scale));border-radius:7px;padding:9px}.demo-card>span,.demo-title{font-size:calc(11px * var(--type-scale));color:var(--color-ink);font-weight:550}.demo-card button,.demo-button{background:var(--color-paper);min-height:34px;font-size:calc(12px * var(--type-scale));color:var(--color-ink);cursor:pointer;border:1px solid #dbe1dc;border-radius:7px;justify-content:center;align-items:center;gap:8px;padding:8px 12px;font-weight:550;transition:background .18s,border-color .18s;display:inline-flex}.dark .demo-card button,.dark .demo-button{border-color:var(--color-line)}.demo-card button:hover,.demo-button:hover{background:var(--color-soft);border-color:#b4c1b8}.dark .demo-card button:hover,.dark .demo-button:hover{border-color:var(--color-line)}.demo-card .demo-button--primary,.demo-button--primary{background:var(--color-ink);border-color:var(--color-ink);color:#fff}.dark .demo-card .demo-button--primary,.dark .demo-button--primary{color:var(--color-paper)}.demo-card .demo-button--primary:hover,.demo-button--primary:hover{background:#354239;border-color:#354239}.dark .demo-card .demo-button--primary:hover,.dark .demo-button--primary:hover{background:color-mix(in srgb, var(--color-ink) 85%, var(--color-paper));border-color:color-mix(in srgb, var(--color-ink) 85%, var(--color-paper))}.demo-card .demo-text-button,.demo-text-button{min-height:0;font-size:calc(13px * var(--type-scale));color:var(--color-green);background:0 0;border:0;padding:0;font-weight:550}.demo-card .demo-text-button:hover,.demo-text-button:hover{text-underline-offset:5px;background:0 0;text-decoration:underline}.segmented{border:0;flex-wrap:wrap;gap:5px;min-width:0;margin:0;padding:0;display:flex}.segmented legend{font-weight:550;font-size:calc(11px * var(--type-scale));color:var(--color-ink);margin-bottom:8px;padding:0}.demo-card .segmented label{flex-direction:row;font-weight:400;position:relative}.segmented input{opacity:0;cursor:pointer;width:100%;height:100%;margin:0;position:absolute;inset:0}.segmented span{font-size:calc(10px * var(--type-scale));color:var(--color-muted);border-radius:4px;padding:5px 8px;display:block}.segmented input:checked+span{background:var(--color-green-soft);color:var(--color-green)}.segmented input:focus-visible+span{outline:2px solid var(--color-green);outline-offset:2px}.demo-json{font-size:calc(10px * var(--type-scale));white-space:pre-wrap;overflow-wrap:anywhere;background:var(--color-soft);border:1px solid var(--color-line);color:#414a43;border-radius:5px;margin:0;padding:10px 12px;line-height:1.8}.dark .demo-json{color:var(--color-muted)}.demo-caption{font-size:calc(11px * var(--type-scale));color:var(--color-muted);margin:0;line-height:1.6}@media (width<=760px){.demo-card label,.demo-card>span,.demo-title,.segmented legend{font-size:calc(12px * var(--type-scale))}.demo-card input:not([type=checkbox]):not([type=radio]),.demo-card select,.demo-card textarea,.demo-card button,.demo-button{font-size:calc(14px * var(--type-scale))}.segmented span,.demo-caption,.demo-json{font-size:calc(12px * var(--type-scale))}}@media (width<=370px){.demo-grid{grid-template-columns:minmax(0,1fr)}}.demo-actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.demo-card button:disabled,.demo-button:disabled{opacity:.5;cursor:not-allowed}.demo-stats{grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px;margin:0;display:grid}.demo-stat{border:1px solid var(--color-line);background:var(--color-soft);border-radius:5px;min-width:0;padding:10px 12px}.demo-results{min-width:0;container-type:inline-size}.demo-results-grid{grid-template-columns:minmax(0,1fr);gap:13px;display:grid}@container (width>=600px){.demo-results-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.demo-stats--fixed{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-stats--fixed .demo-stat--wide{grid-column:1/-1}.demo-stats--fixed :is(dt,dd){white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.demo-stat dt{font-size:calc(9px * var(--type-scale));letter-spacing:.04em;text-transform:uppercase;color:var(--color-muted)}.demo-stat dd{font-family:var(--font-mono);font-size:calc(15px * var(--type-scale));color:var(--color-ink);overflow-wrap:anywhere;margin:4px 0 0}.demo-stat--good{background:var(--color-green-soft);border-color:#cfddd2}.demo-stat--good dd{color:var(--color-green)}.demo-stat--bad{background:var(--color-red-soft);border-color:#ebcec9}.demo-stat--bad dd{color:var(--color-red)}.dark .demo-stat--good,.dark .demo-stat--bad{border-color:var(--color-line)}.demo-progress{background:var(--color-soft);border:1px solid var(--color-line);border-radius:99px;height:8px;overflow:hidden}.demo-progress>span{background:var(--color-green);width:0;height:100%;transition:width .12s linear;display:block}.demo-pulse{border:1px solid var(--color-line);background:var(--color-soft);border-radius:5px;align-items:flex-end;gap:3px;height:34px;padding:6px 8px;display:flex;overflow:hidden}.demo-pulse>span{background:var(--color-green);border-radius:2px;flex:1 1 0;min-width:2px;max-width:6px}.demo-pulse>span.late{background:var(--color-red)}.demo-pulse>span.empty{background:var(--color-line);height:12%}.demo-pulse>span.newest{background:var(--color-ink);height:100%!important}.demo-lanes{gap:6px;margin:0;padding:0;list-style:none;display:grid}.demo-lane{font-family:var(--font-mono);font-size:calc(10px * var(--type-scale));color:var(--color-muted);grid-template-columns:62px minmax(0,1fr) 74px;align-items:center;gap:8px;display:grid}.demo-lane .demo-progress>span{transition:none}.demo-lane--done{color:var(--color-green)}.demo-status{font-size:calc(12px * var(--type-scale));color:var(--color-ink);margin:0;line-height:1.6}@media (width<=760px){.demo-stat dd{font-size:calc(14px * var(--type-scale))}.demo-status{font-size:calc(13px * var(--type-scale))}}.demo-lane--result{white-space:nowrap;grid-template-columns:150px minmax(0,1fr) 146px 58px}.demo-lane--result>span:nth-of-type(n+2){text-align:right}@media (width<=760px){.demo-lane--result{white-space:normal;grid-template-columns:minmax(0,1fr) auto}.demo-lane--result .demo-progress{grid-area:2/1/auto/-1}.demo-lane--result>span:last-child{text-align:left;grid-column:1/-1}}