.section{scroll-snap-align:start;justify-content:center;align-items:center;font-size:3rem;font-family:sans-serif;color:#fff;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;height:100vh;width:100vw;background-color:var(--background)}.first-page-chart{position:fixed;width:calc(100vw - 180px);right:140px;top:160px;flex:2;border-radius:var(--border);box-shadow:0 4px 10px #00000080;height:50vh}.circleholder{position:relative;width:100px;height:100px;border-radius:50%;z-index:2000}.scroll-container{height:auto;overflow:visible}html,body{scroll-snap-type:y mandatory;margin:0;scrollbar-width:none}.sidebar li:first-child a span{opacity:0;pointer-events:none}.page-header{display:flex;justify-content:space-between;align-items:center;height:150px}.page-header h1{font-size:3rem;font-weight:700;color:var(--primary)}#firstPage{height:100%}.scroll-container{height:100vh;width:100vw;overflow-y:scroll;scroll-snap-type:y mandatory;scroll-behavior:smooth;scrollbar-width:none}.scroll-container::-webkit-scrollbar{display:none}.section{width:100vw;height:100vh;scroll-snap-align:start;display:flex}.page{width:calc(100vw - var(--sidebar-width));height:100%;display:flex;flex-direction:column;padding:var(--big-padding)}#secondPage,#thirdPage{width:100%;height:100%}.first-page{background-color:var(--background);color:var(--primary);position:relative;height:100%;bottom:0}.first-page-arrow-container{position:absolute;bottom:1rem;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center;height:4rem;z-index:5000}.chartwrapper{width:100%;height:10vh}.radial-bar-chart{position:relative;width:100%;height:100%}.circular-progress,.circular-hide{position:relative;border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:12;width:100px;height:100px}.circular-inner-mask{position:absolute;border-radius:50%;background:var(--background);z-index:10}.circular-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:20}.cap-start,.cap-end{position:absolute;border-radius:50%}.cap-start{z-index:15}.cap-end{z-index:16}*{margin:0;padding:0;box-sizing:border-box}:root{--font-family-sans: "Inter", "Helvetica Neue", Arial, sans-serif;--font-family-serif: "Georgia", "Times New Roman", serif;--font-family-mono: "Fira Code", "Courier New", monospace;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.25rem;--font-size-xl: 1.5rem;--line-height-tight: 1.2;--line-height-normal: 1.5;--line-height-loose: 1.8}:root{--background: #0f1116;--box-background: #181c25;--primary: #0099ff;--secondary: rgb(131, 200, 243);--highlight: #00ff00;--positive: #0099ff;--negative: #ff0000}:root{--sidebar-width: 140px;--sidebar-border: 20px;--very-small-padding: 6px;--small-padding: 10px;--padding: 15px;--big-padding: 40px;--very-small-border: 6px;--small-border: 10px;--border: 15px;--big-border: 40px;--very-small-gap: 6px;--small-gap: 10px;--gap: 15px;--big-gap: 40px;--border-width: 2px;--radial-bar-chart-size: 100px}.arrow-down-container{width:100px;height:100px;display:flex;justify-content:center;align-items:center}.arrow-down{width:10px;height:40px;border-radius:var(--border);margin:6px;animation:move 1.1s infinite ease-in-out}.arrow-down:nth-of-type(1){transform:rotate(-45deg)}.arrow-down:nth-of-type(2){transform:rotate(45deg)}@keyframes move{0%{transform:translateY(-10px) rotate(var(--angle))}50%{transform:translateY(10px) rotate(var(--angle))}to{transform:translateY(-10px) rotate(var(--angle))}}.arrow-down:nth-of-type(1){--angle: -45deg}.arrow-down:nth-of-type(2){--angle: 45deg}.score-bar{display:flex;align-items:center;gap:var(--small-gap);padding:var(--very-small-padding) var(--small-padding);border-radius:var(--border);font-family:sans-serif;font-size:.85rem;background:none;border-radius:var(--small-border);background-color:var(--box-background);width:100%;height:100%}.progress-wrapper{flex:0 0 50%;height:18px;border:1px solid var(--box-background);border-radius:var(--big-border);position:relative;overflow:hidden;background:linear-gradient(90deg,var(--positive),var(--negative))}.progress-fill{position:absolute;top:0;right:0;bottom:0;width:calc(100% - var(--p));background:var(--box-background);transition:width 2.8s ease-in-out}.progress-dot{position:absolute;top:50%;left:var(--p);transform:translate(-50%,-50%);width:18px;height:18px;border-radius:50%;pointer-events:none;transition:left .8s ease-in-out,background .8s ease-in-out}.macroboxholder{display:flex;flex-direction:column;gap:var(--gap);background-color:var(--box-background);border-radius:var(--border);width:calc(100% - 5px)}.visualizerholder{display:flex;flex-direction:column;gap:10px;width:calc(100% - 5px);height:100%}.half{height:calc(50% - 5px);width:100%}.score-sipra-bar{display:flex;align-items:center;gap:var(--small-gap);padding:var(--small-padding) var(--padding);border-radius:var(--border);font-family:sans-serif;font-size:.85rem;background:none}.emoji{font-size:1.2rem}.title{font-weight:500;flex-shrink:0}.barchart{width:150px;height:150px}.lineindicatorwrapper{width:100%}.info-btn{margin-left:auto;background:none;border:1px solid var(--primary);color:var(--primary);padding:var(--very-small-padding) var(--small-padding);border-radius:var(--border);cursor:pointer;font-size:.8rem}.info-btn:hover{background:var(--primary);color:var(--background)}.twocomponentsfullsize{display:flex;flex-direction:column;height:100%}.page-header{height:150px;flex-shrink:0;display:flex;align-items:center;padding:0 var(--padding);background-color:var(--background)}.pageHolder{flex:1;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);overflow:hidden}.sidebar{display:flex;flex-direction:column;gap:var(--big-gap);list-style:none;margin:0;width:100%;padding:var(--sidebar-border)}.sidebar li{display:flex;align-items:center;justify-content:center;width:var(--radial-bar-chart-size);height:var(--radial-bar-chart-size)}.sidebar li a{display:flex;align-items:center;justify-content:center;width:100%;height:100%;text-decoration:none;background-color:transparent}.sidebar li:nth-child(1) a{visibility:hidden}.sidebar-container{position:fixed;top:50%;right:0;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000;width:var(--sidebar-width);height:100%}
