:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body,html{margin:0;display:flex;width:100%;height:100%}div{display:flex;box-sizing:border-box}@keyframes pulse{0%{transform:rotate(-5deg) scale(.95)}50%{transform:rotate(-5deg) scale(1.05)}to{transform:rotate(-5deg) scale(.95)}}#app{width:100%;height:100%}.outer:not(.mobile){align-items:center;justify-content:center;--width: 240px}.outer.mobile{padding-top:32px;width:100%;--width: 160px;overflow-y:auto;overflow-x:hidden;gap:20px}.outer.mobile .outer-title{justify-content:center;text-align:center;padding:0 16px}.outer.mobile .inner{gap:16px;padding:0 16px;justify-content:center}.outer.mobile .inner .right .right-inner .info{width:0}.outer.mobile .inner .right .right-inner .info .scroll-offset{left:12px}.outer.mobile .inner .right .right-inner .info .scroll-offset .scroll-offset-label{position:absolute;right:24px;transition:opacity .2s ease}.outer.mobile .inner .right .right-inner .info .container-height{left:12px}.outer.mobile .controls{gap:16px;padding:0 16px}.outer.mobile .controls .controls-inner{gap:8px;justify-content:center}.outer.mobile .code-block{white-space:nowrap;font-size:12px;border-radius:0}.outer{gap:40px;flex-grow:1;flex-direction:column}.outer .outer-title{flex-direction:column;align-items:center;gap:16px}.outer .outer-title .virtual-scrolling{font-size:28px;font-weight:700;background:#f3863a;padding:0 16px;border-radius:5px}.outer .outer-title .blurb{font-weight:700}.outer .title-bar{gap:32px}.outer .title-bar .section-title{font-size:18px;font-weight:700;width:var(--width);justify-content:center;background:#333;padding:4px 0;border-radius:5px}.outer .inner{gap:32px;align-items:stretch}.outer .border{width:4px;border-radius:5px;background:#333}.outer .controls{flex-direction:column;gap:16px}.outer .controls .controls-inner{gap:16px}.outer .controls .controls-inner .input-outer{flex-direction:column;gap:8px}.outer .controls .controls-inner .input-outer .input-label{font-size:14px;font-weight:700;border-radius:5px;padding:2px 8px;justify-content:center}.outer .controls .controls-inner .input-outer .item-height{background:#8c52ff}.outer .controls .controls-inner .input-outer .item-gap{background:#ffde59;color:#333}.outer .controls .controls-inner .input-outer .item-count{background:#a4d8d4;color:#333}.outer .controls .controls-inner input{width:90px;background:none;border:2px solid #555;border-radius:5px;padding:4px 8px;font-size:14px;font-weight:700}.outer .code-block{background:#111;color:#fff;font-family:monospace;display:inline;border-radius:5px;padding:12px;font-weight:700}.outer .code-block .scrollOffset{color:#ff66c4}.outer .code-block .comment{color:#aaa}.outer .code-block .first-index{color:#00bf63}.outer .code-block .last-index{color:#38b6ff}.outer .code-block .container-height{color:#f3863a}.outer .code-block .item-gap{color:#ffde59}.outer .code-block .item-height{color:#b6a3f8}.outer .code-block .item-count{color:#a4d8d4}.outer .left{flex-direction:column;gap:40px}.outer .left .title-bar{position:relative}.outer .left .title-bar .floating-tip{position:absolute;top:calc(100% + 20px);background:#fe4365;border-radius:5px;z-index:5;left:-20px;padding:2px 8px;animation:pulse 1s ease-in-out infinite;transition:opacity .2s ease}.outer .left .scrolling-container-outer{overflow-y:auto;overflow-x:hidden;height:480px;width:var(--width);background:#f3863a;border-radius:2px}.outer .left .scrolling-container-outer .scrolling-container-inner{position:relative;flex-direction:column;align-items:stretch}.outer .left .scrolling-container-outer .scrolling-container-inner .list-item{position:absolute;padding:8px;border-radius:5px;width:calc(var(--width) - 16px);height:40px;box-sizing:border-box;left:8px;justify-content:center;align-items:center;font-weight:700;font-size:20px}.outer .right{position:relative;flex-direction:column;gap:40px}.outer .right .right-inner{position:relative}.outer .right .overview-outer{height:480px;position:relative}.outer .right .overview-outer .track{height:480px;width:var(--width);background:#333;position:relative}.outer .right .overview-outer .track .first,.outer .right .overview-outer .track .last{position:absolute;width:100%;left:0;z-index:1}.outer .right .overview-outer .viewport{position:absolute;background:#f3863a;width:calc(var(--width) + 16px);left:-8px;border-radius:2px}.outer .right .overview-outer .viewport .viewport-handle{position:absolute;height:4px;width:100px;left:-30px;background:#f3863a;z-index:-1}.outer .right .overview-outer .first-index,.outer .right .overview-outer .last-index{position:absolute;width:var(--width);align-items:center;justify-content:center;font-weight:700;color:#fff}.outer .right .overview-outer .label-inner{border-radius:5px;padding:2px 8px;font-size:14px}.outer .right .overview-outer .first-index>.label-inner{background:#00bf63}.outer .right .overview-outer .last-index>.label-inner{background:#38b6ff}.outer .right .info{flex-direction:column;position:relative;width:200px;font-size:14px}.outer .right .info .scroll-offset{left:16px;position:absolute;align-items:center;padding-left:16px;height:0px}.outer .right .info .scroll-offset .scroll-offset-bar{position:absolute;left:0;top:0;width:6px;border-radius:5px;background:#ff66c4;height:100%}.outer .right .info .scroll-offset .scroll-offset-label{font-weight:700;border-radius:5px;background:#ff66c4;padding:2px 8px;white-space:nowrap}.outer .right .info .container-height{position:absolute;align-items:center;padding-left:16px;left:16px}.outer .right .info .container-height .container-height-bar{position:absolute;left:0;top:0;width:6px;border-radius:5px;background:#f3863a;height:100%}.outer .right .info .container-height .container-height-label{font-weight:700;border-radius:5px;background:#f3863a;padding:2px 8px;white-space:nowrap}