.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}.demo-card>.render-count{position:absolute;top:12px;right:12px}.render-count{font-size:calc(9px * var(--type-scale));font-family:var(--font-mono);color:var(--color-green);background:var(--color-green-soft);border-radius:3px;align-self:flex-start;align-items:center;gap:4px;padding:2px 6px;display:inline-flex}.render-count>span{font-weight:700}.render-count--flash{--flash-ring:#acc9b4;animation:.9s ease-out render-flash}.dark .render-count--flash{--flash-ring:var(--color-green-soft)}@keyframes render-flash{0%{box-shadow:0 0 0 3px var(--flash-ring)}to{box-shadow:0 0 #0000}}@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)}}