*{box-sizing:border-box}
html,body,#root{margin:0;padding:0;height:100%;background:#eef1f5}
input[type=range]{-webkit-appearance:none;appearance:none;height:4px;border-radius:99px;background:#dde2e9;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:15px;height:15px;border-radius:50%;background:#fff;border:1px solid #c4cad3;box-shadow:0 1px 2px rgba(20,30,50,.18);cursor:pointer;transition:transform .08s}
input[type=range]::-webkit-slider-thumb:active{transform:scale(1.18)}
input[type=number]{font-family:'IBM Plex Mono',monospace}
input:focus-visible{outline:2px solid #3b6fe0;outline-offset:1px}
::placeholder{color:#aab1bb}
.scroll::-webkit-scrollbar{width:9px}
.scroll::-webkit-scrollbar-thumb{background:#d4d9e1;border-radius:9px;border:2px solid #f6f8fb}

/* ---- org chart (pure-CSS connector tree) ---- */
.orgchart{overflow-x:auto;padding:14px 4px 6px}
.orgchart ul{display:flex;justify-content:center;position:relative;padding-top:22px;margin:0;list-style:none}
.orgchart li{display:inline-block;vertical-align:top;text-align:center;list-style:none;position:relative;padding:22px 8px 0}
/* connectors from each node up to the horizontal sibling line */
.orgchart li::before,.orgchart li::after{content:'';position:absolute;top:0;right:50%;width:50%;height:22px;border-top:1px solid #cfd5de}
.orgchart li::after{right:auto;left:50%;border-left:1px solid #cfd5de}
.orgchart li:only-child::before,.orgchart li:only-child::after{display:none}
.orgchart li:only-child{padding-top:22px}
.orgchart li:first-child::before,.orgchart li:last-child::after{border:0 none}
.orgchart li:last-child::before{border-right:1px solid #cfd5de;border-radius:0 6px 0 0}
.orgchart li:first-child::after{border-radius:6px 0 0 0}
/* vertical line dropping into each child group */
.orgchart ul ul::before{content:'';position:absolute;top:0;left:50%;width:0;height:22px;border-left:1px solid #cfd5de}