/* HTML labels + vector plots stay sharp at every pixel density. */
[data-analytics-demo]{color:#182234;font-family:Inter,system-ui,sans-serif;min-width:0;text-align:left}
.demo-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:8px 2px 20px}
.demo-project{font-size:14px;font-weight:600;letter-spacing:-.02em}
.demo-periods{display:flex;padding:3px;background:#edf1f8;border:1px solid #e3e9f2;border-radius:10px;gap:2px}
.demo-periods button{border:0;background:transparent;color:#5f6d82;font:600 11px/1 Inter,system-ui,sans-serif;min-width:38px;min-height:32px;padding:8px 10px;border-radius:7px;cursor:pointer}
.demo-periods button[aria-pressed=true]{color:#334bc2;background:#fff;box-shadow:0 1px 4px #24377a14}
.demo-periods button:focus-visible,.demo-chart svg:focus-visible{outline:2px solid #6366f1;outline-offset:3px}
.demo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.demo-card{min-width:0;padding:22px 20px 18px;border:1px solid #e5eaf2;border-radius:16px;background:#fff;box-shadow:0 2px 3px #263e7003;overflow:hidden}
.demo-requests,.demo-latency{grid-column:span 2}
.demo-card h3{font:500 13px/1.4 Inter,system-ui,sans-serif;color:#66738a;letter-spacing:0;margin:0}
.demo-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.demo-value{font-size:29px;line-height:1.15;font-weight:600;letter-spacing:-1.2px;font-variant-numeric:tabular-nums;margin-top:12px;white-space:nowrap}
.demo-value small{font-size:13px;font-weight:400;letter-spacing:0;margin-left:5px;color:#5f6d82}
.demo-context{font-size:10px!important;line-height:1.5!important;color:#5f6d82!important;margin:7px 0 23px!important}
.demo-legend{display:flex;gap:12px;font-size:10px;color:#5f6d82;flex-wrap:wrap}
.demo-legend span{display:flex;align-items:center;gap:5px}.demo-legend i{display:inline-block;width:6px;height:6px;border-radius:50%}
.demo-chart{position:relative;display:flex;gap:10px;height:148px;min-width:0}
.demo-y{display:flex;flex-direction:column;justify-content:space-between;padding:14px 0 6px;flex:none;min-width:34px;color:#5f6d82;font-size:9px;text-align:right;font-variant-numeric:tabular-nums}
.demo-chart svg{display:block;width:100%;height:100%;min-width:0;overflow:visible;cursor:crosshair}
.demo-guides line{stroke:#edf0f5;stroke-width:1;vector-effect:non-scaling-stroke}
.demo-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.demo-cursor{stroke:#99a7be;stroke-dasharray:3 4;stroke-width:1;vector-effect:non-scaling-stroke}
.demo-x{display:flex;justify-content:space-between;margin:9px 0 0 44px;gap:12px;font-size:9px;color:#5f6d82}
.demo-tooltip{position:absolute;top:0;z-index:2;background:#17243a;color:#fff;border-radius:9px;padding:9px 12px;box-shadow:0 4px 14px #17243a20;font:11px/1.7 Inter,system-ui,sans-serif;white-space:pre-line;pointer-events:none;max-width:100%;font-variant-numeric:tabular-nums}
.demo-donut{position:relative;max-width:180px;width:100%;margin:23px auto 16px;aspect-ratio:1}
.demo-donut svg{display:block;width:100%;height:100%}.demo-donut>div{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}.demo-donut strong{font-size:25px;font-weight:600;letter-spacing:-1px}.demo-donut span{font-size:10px;color:#5f6d82}.demo-error-legend{justify-content:center}
.demo-table-head{display:flex;justify-content:space-between;margin-top:27px;font-size:9px;color:#5f6d82}
.demo-ranking ol{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:14px}
.demo-ranking li{display:flex;align-items:center;gap:8px;min-width:0;font-size:10px}.demo-ranking li strong{font-size:10px;font-weight:500;font-variant-numeric:tabular-nums;color:#66738a;flex:none}
.demo-rank-name{position:relative;flex:1;min-width:0;padding:10px 7px;white-space:nowrap}.demo-rank-name>span:last-child{position:relative;display:block;overflow:hidden;text-overflow:ellipsis}.demo-rank-fill{position:absolute;inset:0 auto 0 0;border-radius:5px}
.demo-hero-body{overflow:hidden;border:1px solid #e5eaf2;border-radius:16px;background:#fff;box-shadow:0 2px 3px #263e7003}.demo-hero-body>.demo-card{border:0;border-radius:0;box-shadow:none}
.demo-mini-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 20px;border-top:1px solid #e8edf4}.demo-mini-stats>div{display:grid;align-content:start;gap:5px;min-width:0;padding:16px 14px 18px}.demo-mini-stats>div+div{border-left:1px solid #e8edf4}.demo-mini-stats span,.demo-mini-stats small{overflow-wrap:anywhere;color:#66738a;font-size:10px;line-height:1.35}.demo-mini-stats strong{font-size:17px;font-weight:600;line-height:1.2;letter-spacing:-.35px;font-variant-numeric:tabular-nums;white-space:nowrap}.demo-mini-stats small{margin-top:3px;color:#8792a4}
.product-hero .demo-card{padding:24px 20px 14px}.product-hero .demo-chart{height:166px}.product-hero .demo-value{font-size:34px}.product-hero .demo-toolbar{padding:8px 8px 18px}
@media(prefers-reduced-motion:no-preference){.demo-entered .demo-line{animation:demo-draw 1.15s ease-out both}.demo-entered .demo-bar{transform-origin:bottom;animation:demo-grow .7s ease-out both}.demo-periods button{transition:background .18s,color .18s}@keyframes demo-draw{from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0}}@keyframes demo-grow{from{transform:scaleY(.05);opacity:.3}to{transform:scaleY(1);opacity:1}}}
@media(max-width:1000px){.demo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-requests,.demo-latency{grid-column:span 2}.demo-donut{max-width:150px}.demo-ranking li,.demo-ranking li strong{font-size:12px}}
@media(max-width:600px){.demo-grid{grid-template-columns:minmax(0,1fr);gap:10px}.demo-requests,.demo-latency{grid-column:auto}.demo-card{padding:20px 16px}.demo-periods button{min-height:40px;min-width:42px}.demo-project{font-size:13px}.demo-chart{height:160px}.demo-donut{max-width:180px}.demo-ranking ol{gap:8px}.demo-value{font-size:29px}.demo-toolbar{padding:8px 4px 16px}.product-hero .demo-value{font-size:30px}.product-hero .demo-chart{height:154px}.demo-mini-stats{margin-inline:14px}.demo-mini-stats>div{padding:14px 8px 16px}.demo-mini-stats strong{font-size:14px}.demo-mini-stats span,.demo-mini-stats small{font-size:9px}}