.demo-shell{color:#1f3b5b;padding-top:32px;scroll-margin-top:100px}.demo-intro{max-width:680px;margin-bottom:32px}.demo-kicker{letter-spacing:.12em;text-transform:uppercase;margin:0 0 10px;font-size:11px;font-weight:600}.demo-intro h3{letter-spacing:-.04em;margin:0 0 12px;font-size:clamp(24px,3vw,36px);font-weight:550;line-height:1.12}.demo-intro>p:last-child{color:#48627b;margin:0;font-size:14px;line-height:1.7}.demo-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;display:grid}.demo-controls{background:#fff;border:1px solid #d9e5ee;border-radius:22px;padding:28px}.demo-card-heading{align-items:center;gap:12px;margin-bottom:30px;display:flex}.demo-card-heading h4{margin:0 0 3px;font-size:15px;font-weight:600}.demo-card-heading span{color:#526c83;font-size:12px}.demo-control{margin:0 0 22px}.demo-control-label{justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:5px;font-size:13px;line-height:1.4;display:flex}.demo-control-label label{color:#48627b}.demo-control-label output{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}.demo-control input[type=range]{accent-color:#527fa6;cursor:pointer;background:0 0;width:100%;min-height:30px;margin:0;display:block}.demo-control input[type=range]:focus-visible{outline-offset:4px;border-radius:6px;outline:2px solid #1f3b5b}.demo-reset{color:#48627b;cursor:pointer;min-height:40px;font:inherit;background:0 0;border:0;align-items:center;gap:7px;margin-top:2px;padding:0;font-size:12px;display:inline-flex}.demo-reset:hover{color:#1f3b5b;text-underline-offset:4px;text-decoration:underline}.demo-reset:focus-visible{outline-offset:4px;border-radius:4px;outline:2px solid #1f3b5b}.demo-results{flex-direction:column;justify-content:center;gap:30px;min-width:0;padding:12px 0;display:flex}.demo-oee>span{color:#48627b;font-size:13px}.demo-oee>strong{letter-spacing:-.07em;font-variant-numeric:tabular-nums;margin:6px 0 8px;font-size:clamp(56px,6vw,84px);font-weight:500;line-height:1;display:block}.demo-oee>strong small{letter-spacing:-.04em;margin-left:3px;font-size:.45em}.demo-oee>p{color:#48627b;margin:0;font-size:11px;line-height:1.6}.demo-metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid}.demo-metric{flex-direction:column;align-items:center;gap:10px;display:flex}.demo-ring{border-radius:50%;width:82px;height:82px;padding:5px}.demo-ring>span{font-variant-numeric:tabular-nums;background:#f8fbfe;border-radius:50%;justify-content:center;align-items:center;gap:1px;height:100%;font-size:16px;font-weight:550;display:flex}.demo-ring small{font-size:10px}.demo-metric-label{color:#48627b;font-size:11px}.demo-loss{background:#eaf6ff;border-radius:18px;padding:22px}.demo-loss>span{color:#48627b;font-size:12px;line-height:1.5;display:block}.demo-loss>strong{letter-spacing:-.045em;font-variant-numeric:tabular-nums;margin:8px 0;font-size:clamp(28px,3.5vw,40px);font-weight:500;line-height:1.15;display:block}.demo-loss>strong small{color:#48627b;letter-spacing:0;white-space:nowrap;font-size:13px;font-weight:400}.demo-loss>p{color:#48627b;margin:0;font-size:11px;line-height:1.7}.demo-footnote{color:#526c83;max-width:860px;margin:24px 0 0;font-size:11px;line-height:1.8}@media (max-width:700px){.demo-grid{grid-template-columns:minmax(0,1fr);gap:30px}.demo-controls{padding:22px}.demo-results{gap:26px;padding:0}.demo-ring{width:76px;height:76px}.demo-oee>strong{font-size:68px}}@media (max-width:360px){.demo-controls{padding:18px}.demo-control-label{font-size:12px}.demo-ring{width:66px;height:66px}.demo-ring>span{font-size:14px}.demo-metric-label{font-size:10px}}