@font-face{font-family:'Open Sans';src:url('/fonts/open-sans-variable.ttf') format('truetype');font-weight:300 800;font-display:swap}
@font-face{font-family:Manrope;src:url('/fonts/manrope-variable.ttf') format('truetype');font-weight:200 800;font-display:swap}
:root{font-family:'Open Sans',Arial,sans-serif;color:#171d23;background:#f5f7fa;font-synthesis:none;line-height:1.65}
*{box-sizing:border-box}body{margin:0}a{color:#0076ba;text-underline-offset:3px}a:hover{color:#005384}button,input{font:inherit}button{cursor:pointer}button,a,input{transition:background-color .15s,color .15s,box-shadow .15s}button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid #0089d9;outline-offset:4px}
.demo-shell{width:min(1260px,calc(100% - 48px));margin:0 auto;padding:28px 0 48px}.demo-nav{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px}.demo-brand{font:800 23px Manrope,sans-serif;color:#171d23;text-decoration:none;white-space:nowrap}.demo-nav>a:last-child{text-align:right}.demo-header{margin-bottom:24px}.demo-label{font-size:13px;color:#52616d;margin:0 0 8px}h1,h2{font-family:Manrope,sans-serif;line-height:1.25}h1{font-size:clamp(28px,3.3vw,46px);letter-spacing:-.025em;margin:0 0 16px;overflow-wrap:anywhere}h2{font-size:23px;margin:24px 0 16px}p{margin:0 0 16px}.demo-panel{padding:28px;background:#fff;border-radius:28px;min-width:0}.demo-panel>*:last-child{margin-bottom:0}.demo-note{margin-top:24px;padding:16px 20px;background:#eaf6ff;border-radius:16px}.demo-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:auto;padding:10px 18px;background:#0089d9;color:#fff;border:0;border-radius:12px;text-decoration:none}.demo-button:hover{background:#0076ba;color:#fff}.demo-button:disabled{cursor:default;opacity:.5}.demo-button.secondary{background:#eaf6ff;color:#00659f}.demo-footer{margin-top:24px;color:#52616d;font-size:14px}[hidden]{display:none!important}img{max-width:100%;height:auto}
.style1{min-height:3em;padding:12px;background:#f5f7fa}.style1 img{vertical-align:middle;width:64px;margin:0 10px}.style2{background:#777;padding:3em 16px;color:#fff;text-align:center}.style3{display:table;width:100%;height:7em;text-align:center;background:#fff5d7}.style3>div{display:table-cell;vertical-align:middle;padding:12px}.style3>div:nth-child(2){background:#9f9}.style3 p{margin:0}
.animal-demo{display:flex;align-items:center;gap:28px;flex-wrap:wrap}.animal-image{display:grid;place-items:center;min-height:160px;min-width:160px;padding:24px;border:1px solid #dce4eb;border-radius:16px}.animal-image img{width:100px;height:100px;object-fit:contain}.animal-links{display:flex;flex-direction:column;align-items:flex-start;gap:12px}.animal-links a[aria-current=true]{font-weight:700}
.table-scroll{width:100%;overflow:auto}table{width:100%;border-collapse:collapse}caption{text-align:left;font-weight:700;margin-bottom:12px}th,td{padding:12px 16px;text-align:left;border:1px solid #d5dfe7}thead th{background:#eaf6ff}.row-table tbody th{background:lightblue;width:72px}.row-table tbody tr:hover:not(.clicked_Row),.row-table tbody tr:focus-within:not(.clicked_Row){background:#fff5b2}.row-table .clicked_Row{background:lightgreen}.row-select{border:0;border-radius:8px;padding:4px 10px;background:transparent;color:inherit;min-width:40px}.row-select[aria-pressed=true]{font-weight:800}
.demo-menu,.demo-menu ul{list-style:none;padding:0;margin:0}.demo-menu{width:180px}.demo-menu>li{position:relative}.demo-menu button{display:flex;justify-content:space-between;gap:12px;align-items:center;width:100%;border:1px solid #ccc;background:#f0f0f0;padding:10px 14px;text-align:left;color:#36454f}.demo-menu button:hover,.demo-menu button[aria-expanded=true]{color:#fff;background:#5488af}.demo-menu ul{display:none;position:absolute;left:100%;top:0;width:180px;z-index:1}.demo-menu>li.open ul{display:block}.demo-menu ul button{background:#eaf6ff}.menu-result{margin-top:24px}
.checkbox-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}.checkbox-grid label,.checkbox-master{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#f5f7fa;border-radius:12px}.checkbox-master{margin-bottom:20px;font-weight:700;background:#eaf6ff}.checkbox-grid input,.checkbox-master input{width:20px;height:20px;accent-color:#0089d9;flex-shrink:0}.checkbox-status{margin-top:20px}.protected-sample{padding:24px;background:#fff5d7;border-radius:16px;user-select:none;-webkit-user-select:none}.protected-sample p{margin:0}
.chart-wrap{width:100%;min-width:0;margin:20px 0}.chart-wrap svg{display:block;width:100%;height:290px;overflow:visible}.chart-grid{stroke:#dce4eb;stroke-width:1}.chart-axis-label{font:12px 'Open Sans',Arial,sans-serif;fill:#52616d}.chart-line{fill:none;stroke:#0089d9;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.chart-marker{fill:#0089d9;stroke:#fff;stroke-width:2}.chart-controls{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.chart-point{flex-basis:100%;min-height:1.65em;color:#52616d}.chart-status{padding:16px;background:#fff5d7;border-radius:12px}.chart-data{margin-top:24px}.chart-data summary{cursor:pointer;color:#0076ba}.chart-data table{margin-top:16px}.chart-data th:first-child{width:50%}
@media(max-width:600px){.demo-shell{width:calc(100% - 32px);padding-top:20px}.demo-panel{padding:20px;border-radius:20px}.demo-nav{gap:12px;margin-bottom:24px;font-size:14px}.demo-brand{font-size:21px}h2{font-size:20px}th,td{padding:10px}.style3>div{padding:10px 4px}.demo-menu{width:100%}.demo-menu ul{position:static;width:100%;padding-left:20px}.animal-demo{gap:20px}.animal-image{min-height:140px;min-width:140px}.chart-controls .demo-button{padding:9px 14px}.chart-wrap svg{height:280px}}