/* R8 - user controlled, data-linked visualizations. All data on this site is synthetic / browser local. */
:root{--r8-midnight:#101827;--r8-elevated:#172337;--r8-stroke:#33435a;--r8-lime:#c6f77a;--r8-blue:#8d9bff;--r8-cyan:#69e1d3;--r8-muted:#a5b5cc}
.r8-rail{margin:0 0 22px;padding:0;background:#101827;border:1px solid #33435a;border-radius:22px;box-shadow:0 25px 65px #080d1b1c;overflow:hidden;color:#f4f7fc;isolation:isolate}
.r8-rail *{box-sizing:border-box}.r8-top{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:24px 28px 18px;border-bottom:1px solid #26344a;background:radial-gradient(ellipse at 80% -50%,#4855b858,transparent 58%),#101827}
.r8-eyebrow{display:flex;align-items:center;gap:8px;color:#9ba8ff;font-weight:800;font-size:10px;letter-spacing:.17em;text-transform:uppercase}.r8-pulse{width:7px;height:7px;display:inline-block;border-radius:50%;background:#7aeac7;box-shadow:0 0 0 4px #7aeac71f;animation:r8-pulse 2.6s ease infinite}
.r8-top h2{color:#fff;font-size:clamp(21px,2.3vw,30px);font-weight:760;letter-spacing:-.055em;line-height:1.1;margin:9px 0 0}.r8-meta{font-size:11px;color:#9cabbe;text-align:right;max-width:195px;line-height:1.6}.r8-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:10px 14px 17px;gap:6px;background:#111c2e}
.r8-kpi{padding:17px 16px;border-right:1px solid #2d3b52;min-width:0}.r8-kpi:last-child{border:0}.r8-kpi-label{display:flex;align-items:center;gap:7px;text-transform:uppercase;letter-spacing:.09em;color:#a7b5cd;font-size:10px;font-weight:740}.r8-kpi-label:before{content:'';width:6px;height:6px;border-radius:50%;background:var(--r8-cyan);flex-shrink:0}.r8-kpi:nth-child(2) .r8-kpi-label:before{background:var(--r8-blue)}.r8-kpi:nth-child(3) .r8-kpi-label:before{background:var(--r8-lime)}.r8-kpi:nth-child(4) .r8-kpi-label:before{background:#f9b886}
.r8-kpi-value{font:730 clamp(23px,2.5vw,34px)/1.23 ui-sans-serif,system-ui,sans-serif;letter-spacing:-.045em;color:#fff;display:block;margin:9px 0 4px;font-variant-numeric:tabular-nums;white-space:nowrap}.r8-kpi-foot{font-size:11px;color:#8394ad}
.r8-visual{display:grid;grid-template-columns:minmax(0,1fr) 230px;border-top:1px solid #314057}.r8-chartzone{padding:22px 27px 20px;min-width:0}.r8-controls{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.r8-tabs{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border:1px solid #35445c;background:#1b2940;border-radius:12px}.r8-tab{cursor:pointer;border:0;background:transparent;color:#adbbce;border-radius:9px;font:680 11px/1.3 system-ui,sans-serif;padding:9px 13px;transition:background .2s,color .2s,transform .2s}.r8-tab:hover{color:#fff}.r8-tab[aria-selected="true"]{background:#f2f5ff;color:#11182b;box-shadow:0 5px 12px #03091648}
.r8-chart-label{display:flex;justify-content:space-between;align-items:baseline;gap:15px;padding:12px 2px 5px}.r8-chart-label strong{font-size:15px;letter-spacing:-.03em;color:#fff}.r8-chart-label span{font-size:11px;color:#91a3bf}.r8-svg-wrap{height:211px;position:relative;overflow:visible}.r8-svg-wrap svg{height:100%;width:100%;overflow:visible}.r8-chart-empty{min-height:180px;display:flex;align-items:center;justify-content:center;color:#a2b2c9;font-size:12px}
.r8-svg-grid{stroke:#3b4860;stroke-width:1;stroke-dasharray:3 6}.r8-svg-axis{fill:#8b9cb5;font:10px ui-sans-serif,system-ui}.r8-area{fill:url(#r8AreaFill)}.r8-line{stroke:#a3f1d4;stroke-width:3;fill:none;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;animation:r8-line .7s ease both}.r8-dot{fill:#ccfff0;stroke:#13273b;stroke-width:2}.r8-plot-hit{cursor:crosshair;fill:transparent}.r8-plot-hit:focus-visible{stroke:#e8fdac;stroke-width:2;outline:none}.r8-bar{fill:#8496ff;rx:6;transform-box:fill-box;transform-origin:bottom;animation:r8-grow .55s cubic-bezier(.2,.8,.2,1) both}.r8-bar:nth-of-type(odd){fill:#5cdbc9}
.r8-tooltip{position:absolute;z-index:3;pointer-events:none;max-width:200px;min-width:135px;background:#ecfff6;color:#162437;border:1px solid #c5e5d9;border-radius:10px;box-shadow:0 10px 30px #03091675;padding:10px 12px;font-size:11px;line-height:1.65;opacity:0;transform:translate(-50%,-110%);transition:opacity .13s}.r8-tooltip[aria-hidden="false"]{opacity:1}.r8-tooltip b{display:block;font-size:14px;color:#112132}
.r8-bottomline{font-size:10px;color:#8495ae;border-top:1px solid #28394e;padding:12px 0 0;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}.r8-sidebar{background:#152238;border-left:1px solid #2d3a50;padding:24px 20px;display:flex;flex-direction:column;justify-content:space-between;gap:22px}.r8-side-title{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.13em;color:#a6b6cd}.r8-feature-number{color:#d0ffb0;font-size:clamp(25px,3vw,39px);font-weight:760;letter-spacing:-.055em;line-height:1.35;display:block;margin:8px 0}.r8-side-desc{font-size:12px;color:#a8b8cd;line-height:1.65;margin:0}.r8-status-list{display:grid;gap:12px}.r8-status-item{display:flex;gap:8px;color:#b3c0d2;font-size:11px;line-height:1.4}.r8-status-item:before{content:'✓';color:#92e2be;font-weight:900}.r8-action{display:flex;align-items:center;justify-content:space-between;font-weight:740;text-decoration:none;color:#172337;background:#c6f77a;border-radius:10px;padding:13px 15px;font-size:12px;gap:10px}.r8-action:hover{background:#dcffaa}.r8-live{display:inline-flex;align-items:center;gap:5px;font-size:10px;color:#9bacbe}.r8-flash{animation:r8-fade .45s ease}
.r8-progress-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;color:#b1c2d9;margin-top:5px}.r8-progress-track{margin-top:6px;height:7px;border-radius:20px;background:#31435a;overflow:hidden}.r8-progress-fill{height:100%;border-radius:20px;background:linear-gradient(90deg,#7589ef,#7ce8bf);transition:width .55s cubic-bezier(.2,.8,.2,1)}
.r8-trace{padding:14px 20px;background:#101c2e;display:flex;gap:15px;flex-wrap:wrap;align-items:center;justify-content:space-between;border-top:1px solid #2a3c53}.r8-trace span{font-size:10px;color:#a6b8ce}.r8-trace b{color:#c4ffde;font-size:10px;font-weight:700}
.r8-animated-old .d-progress span{transition:width .6s ease}.r8-animated-old .d-metric b,.r8-animated-old .d-display{font-variant-numeric:tabular-nums}
@keyframes r8-grow{from{transform:scaleY(.03);opacity:.25}to{transform:scaleY(1);opacity:1}}@keyframes r8-line{from{opacity:.2;stroke-dashoffset:900}to{opacity:1;stroke-dashoffset:0}}@keyframes r8-pulse{50%{box-shadow:0 0 0 7px #7aeac704}}@keyframes r8-fade{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1050px){.r8-visual{grid-template-columns:minmax(0,1fr) 195px}.r8-sidebar{padding:20px 15px}.r8-chartzone{padding:19px}.r8-kpi{padding:14px 10px}}
@media(max-width:740px){.r8-rail{border-radius:17px}.r8-top{padding:20px;align-items:flex-start}.r8-meta{text-align:left;max-width:140px;font-size:10px}.r8-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}.r8-kpi:nth-child(2){border-right:0}.r8-kpi:nth-child(-n+2){border-bottom:1px solid #2d3b52}.r8-kpi{padding:14px}.r8-visual{grid-template-columns:minmax(0,1fr)}.r8-sidebar{border-left:0;border-top:1px solid #35445c;display:grid;grid-template-columns:1fr 1fr;padding:20px;gap:15px}.r8-sidebar .r8-action{grid-column:1/-1}.r8-svg-wrap{height:190px}.r8-chart-label strong{font-size:13px}}
@media(max-width:420px){.r8-top{flex-direction:column;gap:4px}.r8-meta{max-width:none}.r8-tabs{width:100%}.r8-tab{flex:1;padding:10px 6px;font-size:10px}.r8-chartzone{padding:16px 12px}.r8-sidebar{grid-template-columns:1fr}.r8-kpi-value{font-size:24px}.r8-svg-wrap{height:170px}}
@media(prefers-reduced-motion:reduce){.r8-rail *, .r8-rail *:before,.r8-rail *:after{animation:none!important;transition:none!important}}

/* R8 usability polish for legacy lead and text-edit components in all three design themes. */
.r8-animated-old .lead-tile{background:var(--r-panel);border:1px solid var(--r-line);color:var(--r-ink);border-radius:11px;transition:border-color .2s,background .2s,transform .2s}
.r8-animated-old .lead-tile:hover{background:var(--r-panel2);transform:translateY(-1px)}
.r8-animated-old .lead-tile.d-selected{background:var(--r-panel2)!important;border-color:var(--r-accent)!important;color:var(--r-ink)!important}
.r8-animated-old .lead-tile strong{color:var(--r-ink)}
.r8-animated-old .lead-tile small{color:var(--r-muted)}
.r8-animated-old #lead-draft,.r8-animated-old #privacy-draft,.r8-animated-old #csv-input{background:var(--r-bg);color:var(--r-ink);border:1px solid var(--r-line);border-radius:10px;padding:12px;width:100%;font:inherit;resize:vertical;min-height:100px}
.r8-animated-old #csv-input{font:12px/1.6 ui-monospace,Consolas,monospace!important}
.r8-animated-old #lead-draft:focus-visible,.r8-animated-old #privacy-draft:focus-visible,.r8-animated-old #csv-input:focus-visible{outline:2px solid var(--r-accent);outline-offset:2px}
.r8-animated-old .d-field input[type="file"]{font-size:11px;max-width:100%}