@property --progress{syntax:"<integer>";inherits:true;initial-value:0}:root{--color-border:#e5e7eb;--color-text-muted:#6b7280;--color-text-hover:#111827;--bg-hover:#f3f4f6;--color-active:#111827;--color-panel-1:var(--color-active);--color-panel-2:var(--color-active);--color-panel-3:var(--color-active);--color-panel-4:var(--color-active)}*{box-sizing:border-box}button{font:inherit}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;height:100%;margin:0}body.debug{--color-panel-1:#3b82f6;--color-panel-2:#10b981;--color-panel-3:#8b5cf6;--color-panel-4:#f97316}body{background-color:#f5f5f5;height:100%;margin:0;font-family:Roboto,sans-serif;font-weight:400}main{justify-content:center;align-items:center;width:100%;height:100%;padding:20px;display:flex}.tabs-wrapper{timeline-scope:--panel-1, --panel-2, --panel-3, --panel-4;background-color:#fff;border:1px solid #2933640f;border-radius:.5rem;max-width:100vw;position:relative;overflow:hidden;box-shadow:0 10px 10px #2933640d}.tabs{scroll-behavior:smooth;box-shadow:inset 0 -1px 0 var(--color-border);display:flex;position:relative;overflow-x:auto}body:not(.debug) .tabs{scrollbar-width:none}body:not(.debug) .tabs::-webkit-scrollbar{display:none}.tab{cursor:pointer;white-space:nowrap;color:var(--color-text-muted);background:0 0;border:none;flex:none;align-items:stretch;padding:.75rem 1rem;font-size:.875rem;font-weight:500;transition:background-color .2s,border-radius .2s;animation:linear active-tab-style;display:flex;position:relative}.tab:after{content:"";background-color:var(--color-active);z-index:1;height:2px;animation:linear active-underline-style;position:absolute;bottom:0;left:0;right:0;transform:scaleX(0)}.tab .tab-icon{background-color:#fff;align-self:center;width:0;height:1.125rem;animation:linear active-icon-tab-style;display:block}.style-tab-icon .tab .tab-icon{z-index:9;width:1.125rem;animation:none;box-shadow:0 0 5px 5px #fff}.tab .icon{opacity:0;flex-shrink:0;width:1.125rem;height:1.125rem;animation:linear active-icon-style;overflow:hidden;transform:translate(-.8rem)}.style-tab-icon .tab .icon{z-index:9;opacity:1;animation:none;transform:translate(0)}.tab .tab-label{z-index:9;background-color:#fff;align-self:center;font-weight:500;display:block;position:relative;box-shadow:0 0 5px 5px #fff}.style-tab-icon .tab .tab-label{width:0;box-shadow:none;z-index:0;margin-left:0;animation:linear active-label-tab-style}.style-tab-icon .tab .tab-label span{opacity:0;animation:linear active-label-style;display:block;transform:translate(-20px)}.tab:hover{color:var(--color-active)!important}.tab.suppress-animation,.tab.suppress-animation *{animation:none!important}.tab.tab-1{--color-active:var(--color-panel-1);animation-timeline:--panel-1}.tab.tab-1 .tab-icon,.tab.tab-1 .icon,.tab.tab-1 .tab-label,.tab.tab-1 .tab-label span,.tab.tab-1:after{animation-timeline:--panel-1}.tab.tab-2{--color-active:var(--color-panel-2);animation-timeline:--panel-2}.tab.tab-2 .tab-icon,.tab.tab-2 .icon,.tab.tab-2 .tab-label,.tab.tab-2 .tab-label span,.tab.tab-2:after{animation-timeline:--panel-2}.tab.tab-3{--color-active:var(--color-panel-3);animation-timeline:--panel-3}.tab.tab-3 .tab-icon,.tab.tab-3 .icon,.tab.tab-3 .tab-label,.tab.tab-3 .tab-label span,.tab.tab-3:after{animation-timeline:--panel-3}.tab.tab-4{--color-active:var(--color-panel-4);animation-timeline:--panel-4}.tab.tab-4 .tab-icon,.tab.tab-4 .icon,.tab.tab-4 .tab-label,.tab.tab-4 .tab-label span,.tab.tab-4:after{animation-timeline:--panel-4}.content-scroll-container{scroll-snap-type:x mandatory;scroll-behavior:smooth;display:flex;overflow-x:auto}.disable-scroll .content-scroll-container{overflow-x:hidden}body:not(.debug) .content-scroll-container{scrollbar-width:none}body:not(.debug) .content-scroll-container::-webkit-scrollbar{display:none}.content-scroll-container .content-panel{box-sizing:border-box;scroll-snap-align:start;flex:0 0 100%;min-width:100%;height:200px;max-height:100%;padding:2rem 1rem;position:relative}.content-scroll-container .content-panel.panel-1{view-timeline:--panel-1 inline}body.debug .content-scroll-container .content-panel.panel-1{border:1px solid var(--color-panel-1)}.content-scroll-container .content-panel.panel-2{view-timeline:--panel-2 inline}body.debug .content-scroll-container .content-panel.panel-2{border:1px solid var(--color-panel-2)}.content-scroll-container .content-panel.panel-3{view-timeline:--panel-3 inline}body.debug .content-scroll-container .content-panel.panel-3{border:1px solid var(--color-panel-3)}.content-scroll-container .content-panel.panel-4{view-timeline:--panel-4 inline}body.debug .content-scroll-container .content-panel.panel-4{border:1px solid var(--color-panel-4)}.content-scroll-container .content-panel .progress-block{color:#fff;background-color:var(--color-active);border-radius:99px;width:fit-content;margin-bottom:1rem;padding:.25rem .75rem;font-size:.875rem;font-weight:700;position:sticky;left:1rem}.content-scroll-container .content-panel .progress-block:after{counter-reset:percent var(--progress);content:"Scroll scope: " counter(percent) "%";animation:linear count-progress}.content-scroll-container .content-panel.panel-1 .progress-block:after{animation-timeline:--panel-1}.content-scroll-container .content-panel.panel-2 .progress-block:after{animation-timeline:--panel-2}.content-scroll-container .content-panel.panel-3 .progress-block:after{animation-timeline:--panel-3}.content-scroll-container .content-panel.panel-4 .progress-block:after{animation-timeline:--panel-4}body.debug .content-scroll-container .content-panel{display:block}body.debug .content-scroll-container .content-panel.panel-1 .progress-block{background-color:var(--color-panel-1)}body.debug .content-scroll-container .content-panel.panel-2 .progress-block{background-color:var(--color-panel-2)}body.debug .content-scroll-container .content-panel.panel-3 .progress-block{background-color:var(--color-panel-3)}body.debug .content-scroll-container .content-panel.panel-4 .progress-block{background-color:var(--color-panel-4)}.content-scroll-container .content-panel h2{color:var(--color-text-hover);margin-top:0;margin-bottom:.5rem;font-size:1.25rem;font-weight:600}.content-scroll-container .content-panel p{color:var(--color-text-muted);margin:0;line-height:1.5}.h-scroll{opacity:.5;pointer-events:none;flex-direction:column;justify-content:center;align-items:center;margin:0 auto;font-size:10px;display:flex;position:absolute;bottom:5px;left:0;right:0}.h-scroll svg{width:30px}.disable-scroll .h-scroll{display:none}@keyframes count-progress{0%{--progress:0}to{--progress:100}}@keyframes active-tab-style{0%,25%{color:var(--color-text-muted)}50%{color:var(--color-active)}75%,to{color:var(--color-text-muted)}}@keyframes active-underline-style{0%{transform-origin:0;transform:scaleX(0)}49.99%{transform:scaleX(1)}50%{transform-origin:0;transform:scaleX(1)}50.01%{transform-origin:100%;transform:scaleX(1)}to{transform-origin:100%;transform:scaleX(0)}}@keyframes active-icon-tab-style{0%{width:0;margin-right:0}50%{width:1.125rem;margin-right:8px}to{width:0;margin-right:0}}@keyframes active-label-tab-style{0%{width:0;margin-left:0}50%{width:calc-size(auto, size);margin-left:8px}to{width:0;margin-left:0}}@keyframes active-icon-style{0%{opacity:0;transform:translate(-.8rem)}50%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-.8rem)}}@keyframes active-label-style{0%{opacity:0;transform:translate(-20px)}50%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-20px)}}.tp-dfwv{z-index:99}.co-footer{flex-direction:column;justify-content:center;align-items:center;margin:0 auto;display:flex;position:absolute;bottom:0;left:0;right:0}.co-footer-links{flex-wrap:wrap;justify-content:center;column-gap:10px;display:flex}.co-footer-btn{text-transform:uppercase;color:#000;text-align:center;background:0 0;border:1px solid #000;border-radius:5px;margin-bottom:10px;padding:7px 10px;font-size:12px;font-weight:500;text-decoration:none}.co-footer-btn:hover{color:#fff;background-color:#000}.co-footer-btn--link{border:1px solid #0000;text-decoration:underline}.co-footer-btn--link:hover{color:#fff;background-color:#6a5306}.co-footer-btn--link:after{content:"↗";font-family:arial;font-weight:800;text-decoration:none}