.product-demo{background:var(--color-paper);color:var(--color-ink);border:1px solid var(--color-line);text-align:left;min-width:0;font-size:14px}.product-demo header,.product-demo footer{flex-wrap:wrap;justify-content:space-between;gap:16px;padding:22px 24px;display:flex}.product-demo header{border-bottom:1px solid var(--color-line)}.product-demo small,.demo-caption,.product-demo footer p{color:var(--color-body);font-size:11px;line-height:1.6}.product-demo footer{border-top:1px solid var(--color-line);display:block}.product-demo footer p{margin-top:14px}.demo-metrics{grid-template-columns:repeat(3,1fr);gap:16px;padding:26px 24px;display:grid}.demo-metrics span{color:var(--color-body);font-size:11px;display:block}.demo-metrics strong{font:28px var(--font-mono);letter-spacing:-.05em;margin-top:8px;display:block}.demo-tabs{border-bottom:1px solid var(--color-line);flex-wrap:wrap;gap:24px;padding:0 24px;display:flex}.demo-tabs button{cursor:pointer;border-bottom:2px solid #0000;padding:14px 0}.demo-tabs button[aria-pressed=true]{color:var(--color-klein-600);border-color:currentColor}.demo-rows{padding:20px 24px}.demo-bar-row{margin:20px 0}.demo-bar-row>div:first-child{justify-content:space-between;gap:12px;margin-bottom:10px;font-size:12px;display:flex}.demo-bar-row strong{font:12px var(--font-mono)}.demo-track{background:var(--color-band);gap:2px;height:12px;display:flex}.demo-track>span{height:100%}.series-0{background:var(--color-chart-1)}.series-1{background:var(--color-chart-2)}.series-2{background:var(--color-chart-4)}.demo-key{flex-wrap:wrap;gap:18px;font-size:11px;display:flex}.demo-key span{align-items:center;gap:7px;display:flex}.demo-key i{width:8px;height:8px}.product-demo button:focus-visible,.product-demo select:focus-visible,.product-demo input:focus-visible{outline:2px solid var(--color-klein-600);outline-offset:4px}.demo-body{padding:24px}.demo-body p{color:var(--color-body);margin:12px 0;line-height:1.7}.demo-body h3{font-size:20px}.demo-body label{margin:16px 0;font-size:12px;display:block}.demo-body select,.demo-body input{border:1px solid var(--color-line);background:var(--color-paper);width:100%;margin-top:7px;padding:10px}.demo-button{border:1px solid var(--color-line);cursor:pointer;padding:9px 14px}.demo-primary{background:var(--color-ink);color:var(--color-paper)}.demo-blocks{background:var(--color-band);grid-template-columns:repeat(3,1fr);gap:12px;padding:20px;display:grid}.demo-block{background:var(--color-paper);border:1px solid var(--color-line);min-width:0;padding:20px}.demo-block.wide{grid-column:1/-1}.demo-block strong{font:26px var(--font-mono);margin-top:10px;display:block}.demo-block button{color:var(--color-klein-600);cursor:pointer;font-size:11px}.demo-block table{text-align:left;width:100%;font-size:12px}.demo-block td,.demo-block th{border-bottom:1px solid var(--color-line);padding:12px 5px}.demo-layout{position:relative}.demo-drawer{border-left:1px solid var(--color-line);background:var(--color-paper);z-index:2;width:min(360px,100%);position:absolute;top:0;bottom:0;right:0;overflow:auto;box-shadow:-10px 0 30px #0001}.demo-drawer header button{cursor:pointer}.demo-flow{background:var(--color-band);gap:12px;padding:24px;display:grid}.demo-flow button{text-align:left;background:var(--color-paper);border:1px solid var(--color-line);cursor:pointer;padding:18px}.demo-flow button[aria-pressed=true]{border-color:var(--color-klein-600)}.demo-flow small{margin-top:5px;display:block}.demo-note{background:var(--color-band);padding:18px 24px;font-size:12px;line-height:1.7}.score-badge{font:36px var(--font-mono);align-items:center;gap:10px;display:inline-flex}.score-badge svg{width:40px;height:36px;color:var(--color-klein-600)}@media (width<=600px){.demo-metrics{gap:8px;padding:20px 16px}.demo-metrics strong{font-size:23px}.demo-blocks{grid-template-columns:1fr}.demo-block{grid-column:1/-1}.product-demo header{padding:18px}.demo-block.wide{overflow-x:auto}}.company-demo .demo-key{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 18px;display:grid}.company-demo .demo-key a{color:var(--color-ink);align-items:center;gap:7px;font-size:10px;text-decoration:none;display:flex}.company-demo .demo-key img,.company-demo .demo-key i{flex-shrink:0}.company-demo .demo-bar-row{margin:16px 0}.company-demo .demo-track{gap:0}.company-demo .demo-track>span{border-right:2px solid var(--color-paper)}@media (width<=600px){.company-demo .demo-key{grid-template-columns:repeat(2,minmax(0,1fr))}}
