#sidebar-container{position:absolute;top:0;left:0;height:100%;display:flex;align-items:center;z-index:10}@media (max-width: 1024px) and (orientation: portrait){#sidebar-container{display:none}}#sidebarAndColorBoxContainer{position:relative;display:flex;flex-direction:column;height:100vh;transition:transform .4s ease-in-out;transform:translate(0)}#sidebarAndCollapseContainer{display:flex}#sidebarAndCollapseContainer{transition:transform .4s ease-in-out;transform:translate(0)}#sidebar-container.collapsed #sidebarAndCollapseContainer{transform:translate(-100%)}#sidebarToggleBtn-expandIcon{position:absolute;left:0}#sidebarToggleBtn-expandIcon,#sidebarToggleBtn{top:6rem;cursor:pointer}@media (max-width: 1024px){#sidebarToggleBtn-expandIcon,#sidebarToggleBtn{top:3rem}}@media (max-width: 1024px){#sidebarToggleBtn-expandIcon img,#sidebarToggleBtn img{width:30px}}#sidebarToggleBtn{position:relative}#colorBoxContainer{flex-shrink:0;background-color:#000c;display:flex;justify-content:center;align-items:center;padding:14px}@media (max-width: 1024px){#colorBoxContainer{padding:3px}}#colorBoxContainer>#colorBoxDiv{border:none;background-color:#0000}#sidebar{background-color:#0009;padding:24px 20px;display:flex;flex-direction:column;gap:10px;align-items:flex-start;width:429px;flex-grow:1;overflow-y:scroll}#sidebar::-webkit-scrollbar{width:9px}#sidebar::-webkit-scrollbar-thumb{background:#727272;border-radius:10px;border:3px solid transparent;background-clip:padding-box}@media (max-width: 1280px){#sidebar{min-width:200px}}@media (max-width: 1024px){#sidebar{width:245px;gap:3px;padding:12px}}@media (max-width: 680px){#sidebar{width:215px;gap:3px;padding:12px 8px}}#sidebar-logo{border-bottom:2px solid;border-image:linear-gradient(to right,#4169e100,#1df0ff,#4169e100) 1;padding:15px 0;margin-bottom:20px;display:flex;align-items:center;justify-content:center;cursor:pointer}#sidebar-logo img{width:90%;height:auto;object-fit:contain}@media (max-width: 768px){#sidebar-logo{margin-bottom:13px}}.sidebar-item{display:flex;align-items:center;gap:10px;width:100%;padding:15px 8px;transition:background-color .3s ease;cursor:pointer;color:#fafafa}@media (max-width: 1024px){.sidebar-item{padding:5px 8px}}.category-icon{background-color:#73737299;padding:8px 10px;border-radius:10px;display:flex;height:45px;width:45px;align-items:center;justify-content:center;overflow:hidden}@media (max-width: 1024px){.category-icon{height:34px;width:34px;border-radius:6px;padding:6px}}@media (max-width: 768px){.category-icon{height:28px;width:28px}}.category-icon img{width:100%;height:100%;object-fit:contain}.category-label{font-size:28px;font-family:Barlow;font-weight:400;flex:1}@media (max-width: 1024px){.category-label{font-size:16px}}@media (max-width: 768px){.category-label{font-size:16px}}.carrot{display:flex;justify-content:center;align-items:center;font-size:14px}.carrot svg{width:24px;height:auto}@media (max-width: 1024px){.carrot svg{width:12px}}.subcategory-list{display:none;width:100%;padding-inline:10px;padding-bottom:10px;transition:all .3s ease-in-out;margin-top:-12px}@media (max-width: 1024px){.subcategory-list{margin-top:-5px}}.subcategory-item{font-family:Barlow;font-weight:400;font-size:24px;border-bottom:1px solid rgb(95,95,95);padding-block:30px;color:#fafafa;cursor:pointer}@media (max-width: 1024px){.subcategory-item{font-size:14px;padding-block:10px}}@media (max-width: 768px){.subcategory-item{font-size:14px;padding-block:10px}}.subcategory-content{color:#eee;padding-block:9px 11.5px;font-size:20px;display:none;transition:all .3s ease-in-out;background-image:linear-gradient(to right,#0000,#1df0ff3b,#0000);font-family:Barlow;font-weight:400}@media (max-width: 1024px){.subcategory-content{font-size:14px}}.activeCategory{color:#1df0ff!important}.activeCategory>.carrot{transform:rotate(180deg)}.activeSubCategoryItem{color:#1df0ff;border:none}.activeSubcategory-list{display:block}.activeSubCategoryContent{display:block;border-bottom:3px solid;border-top:3px solid;border-image:linear-gradient(to right,#4169e100,#1df0ff,#4169e100) 1}@media (max-width: 1024px){.activeSubCategoryContent{border-bottom:1px solid;border-top:1px solid}}#header-container{position:absolute;top:0;width:100%;padding:20px}#header{width:100%;display:flex;justify-content:space-between;word-wrap:break-word}#header-buttons{display:flex;align-items:center;gap:10px;flex-direction:column}@media (max-width: 1024px) and (orientation: portrait){#header-buttons{display:none}}@media (max-width: 768px){#header-buttons{gap:5px}}.header-btn{border-right:2px solid #464646;width:60px;aspect-ratio:1;display:flex;justify-content:center;cursor:pointer}.header-btn:last-child{border-right:none}@media (max-width: 1024px){.header-btn{width:40px}}@media (max-width: 1024px){.header-btn img{width:45px}}@media (max-width: 768px){.header-btn img{width:30px}}.header-btn-long{padding-inline:30px;border-right:2px solid #464646;display:flex;justify-content:center;color:#fff;cursor:pointer;font-size:24px}@media (max-width: 1024px){.header-btn-long{font-size:16px;padding-inline:10px}}#autoManualBtn-container{min-width:150px}@media (max-width: 1024px){#autoManualBtn-container{min-width:125px}}#auto-mode-switch-btn{display:flex;justify-content:space-between;align-items:center;gap:10px}#auto-mode-switch-btn img{width:19px;object-fit:fill}@media (max-width: 768px){#auto-mode-switch-btn img{width:16px}}#header-buttons-row1{background-color:#0009;border:2px solid #464646!important;border-radius:10px;display:flex;flex-direction:row;justify-content:flex-end;width:100%}@media (max-width: 1024px){#header-buttons-row1{border-radius:8px}}@media (max-width: 1024px) and (orientation: portrait){#header-logo{margin:auto}}#header-logo img{width:380px;margin:auto}@media (max-width: 1024px){#header-logo img{display:block;width:200px}}@media (max-width: 1024px) and (orientation: portrait){#header-logo img{display:block;width:300px}}#footer-container{position:absolute;width:100%;bottom:0;display:flex;justify-content:center;padding:15px 10px;flex-direction:column;align-items:center;overflow:hidden;gap:20px}@media (max-width: 1024px){#footer-container{padding:8px 10px;gap:8px}}#colorBoxDiv{padding:7px 20px;background-color:#0009;display:flex;flex-direction:column;border:2px solid #464646;min-width:150px;width:fit-content;gap:8px}#colorBoxFooter-container{display:none}@media (max-width: 1024px) and (orientation: portrait){#colorBoxFooter-container{display:block;width:107%}}#dummyDiv{display:none;height:69px;width:100%}@media (max-width: 1024px) and (orientation: portrait){#dummyDiv{display:block}}#colorName-container{width:100%;text-align:center;color:#fff;font-size:16px;font-family:Barlow;font-weight:400}#color-tabs{display:flex;justify-content:center;gap:50px}@media (max-width: 1024px){#color-tabs{gap:22px}}.colorBtn{cursor:pointer}#colorSelectedImg{width:45px;height:45px}@media (max-width: 1024px){#colorSelectedImg{width:25px;height:25px}}.colorBtn{border-radius:50%;border:none;width:45px;height:45px;display:flex;align-items:center;justify-content:center;position:relative}@media (max-width: 1024px){.colorBtn{width:25px;height:25px}}.colorBtn svg{position:absolute;width:38px;height:38px;z-index:2;pointer-events:none}@media (max-width: 1024px){.colorBtn svg{width:20px;height:20px}}.colorBtn .circle{width:100%;height:100%;border-radius:50%;background-color:inherit;cursor:pointer}#colorBoxName{font-size:18px}@media (max-width: 1024px){#colorBoxName{font-size:16px}}@media (max-width: 768px){#colorBoxName{font-size:14px}}#subtitle-container{background-color:#000000b2;padding:15px;border:2px solid rgba(94,94,94,.1176470588);width:70%;border-radius:10px}@media (max-width: 1024px){#subtitle-container{width:90%;padding:10px 7px;line-height:.75em;border-radius:4px}}#subtitle-heading{font-size:28px;color:#1df0ff;margin-bottom:.5em}@media (max-width: 1024px){#subtitle-heading{font-size:16px}}#mainheading{font-family:Barlow;font-weight:500}#subheading{font-family:Barlow;font-weight:400}#subtitle-description{color:#fff;font-size:22px;font-family:Barlow;font-weight:400}@media (max-width: 1024px){#subtitle-description{font-size:14px}}#mobileRotateMessage-Container{background-color:#0009;color:#fff;padding:5px 12px;width:100%;display:none;margin-top:20px}@media (max-width: 1024px) and (orientation: portrait){#mobileRotateMessage-Container{display:flex}}#rotateCamera-img img{width:100px}#rotateCamera-text{display:flex;justify-content:center;align-items:center;padding:10px}#rotateCamera-text p{height:fit-content;font-size:14px}#autoModeTimeline-container{width:70%}@media (max-width: 1024px){#autoModeTimeline-container{width:90%}}.category-container{width:100%;height:10px;background:#0009;border-radius:2px;overflow:hidden;position:relative}@media (max-width: 1024px){.category-container{height:4px}}@media (max-width: 1024px) and (orientation: portrait){#textContainer{display:none}}@media (max-width: 1024px){#textContainer{top:20%!important;min-width:100px!important}}@media (max-width: 1024px){#rangeInfo-container{gap:5px!important}}#speedTextContainer{position:absolute;bottom:40%;font-size:70px;font-weight:700;color:#0ff;right:15%;line-height:.5em;background-color:#0009;padding:5px 10px;width:150px;text-align:left}#speedTextLabel{color:#fffe;font-size:18px;font-family:Barlow;font-weight:400}#speedIncrementNumber-container{display:flex;flex-direction:row;gap:4px;align-items:baseline}#speedIncrementNumber{font-size:50px;font-weight:medium;text-align:right}#speedKmLabel{font-family:Barlow;font-size:24px;font-weight:400}#chargingTextContainer{position:absolute;top:15%;left:49%;text-align:center;font-family:Barlow;font-weight:500;color:#000}@media (max-width: 1024px){#chargingTextContainer{top:19.5%;left:48%}}#chargingTextLabel{font-size:3rem;font-weight:600}@media (max-width: 1024px){#chargingTextLabel{font-size:1.4rem}}#chargingSubtitle{font-size:2rem;font-weight:400}@media (max-width: 1024px){#chargingSubtitle{font-size:1rem}}#bottom-btn-container{position:absolute;bottom:2%;left:50%;transform:translate(-50%);z-index:1000}#playback-buttons{display:flex;gap:25px}@media (max-width: 1024px){#playback-buttons{gap:15px}}#exit-button,#prev-button,#next-button,#replay-button,#start-button{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer}@media (max-width: 1024px){#exit-button,#prev-button,#next-button,#replay-button,#start-button{gap:3px}}@media (max-width: 1024px) and (orientation: portrait){#start-button{display:none}}.playback-button-text{text-shadow:0px 0px 10px rgba(0,0,0,.7)}#exit-button img,#prev-button img,#next-button img,#replay-button img,#start-button img{width:54px;height:54px}@media (max-width: 1024px){#exit-button img,#prev-button img,#next-button img,#replay-button img,#start-button img{width:25px;height:25px}}#prev-button.disabled,#next-button.disabled{pointer-events:none;opacity:.5}#prev-button img{transform:scaleX(-1)}.playback-button-text{color:#fff;font-size:24px;justify-self:center;font-weight:500}@media (max-width: 1024px){.playback-button-text{font-size:12px}}#textContainer{position:absolute;top:13%;left:50%!important;color:#000;text-align:center;font-family:sans-serif;min-width:211px}@media (max-width: 1024px){#textContainer{left:18%;top:18%}}#rangeInfo-container{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}#rangeTextLabel{font-size:2rem;font-weight:400;margin:0 0 -5px;padding:0}@media (max-width: 1024px){#rangeTextLabel{font-size:1rem;margin-bottom:-8px}}#rangeIncrementNumber-container{display:flex;flex-direction:row;align-items:baseline;justify-content:center;gap:10px;font-weight:600;margin-top:4px}@media (max-width: 1024px){#rangeIncrementNumber-container{gap:6px}}#rangeIncrementNumber{font-size:3rem;font-weight:700;margin:0;padding:0}@media (max-width: 1024px){#rangeIncrementNumber{font-size:1.4rem}}#rangeKmLabel{font-size:3rem;font-weight:600;margin:0;padding:0}@media (max-width: 1024px){#rangeKmLabel{font-size:1.4rem}}@font-face{font-family:Barlow;src:url(fonts/Barlow-Regular.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Barlow;src:url(fonts/Barlow-Medium.ttf) format("truetype");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:Barlow;src:url(fonts/Barlow-SemiBold.ttf) format("truetype");font-weight:600;font-style:normal;font-display:swap}*{margin:0;padding:0;box-sizing:border-box;font-family:Barlow,sans-serif}#app,#renderCanvas{width:100%;height:100dvh;overflow:hidden}#app{background-color:#000}body{margin:0;padding:0;overflow-y:hidden}#loading-container{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000;display:flex;align-items:center;justify-content:center;z-index:9999}#loading-screen{text-align:center;color:#fff;font-family:Arial,sans-serif;font-size:20px}#loading-bar-container{width:300px;height:3px;background-color:#fff3;border-radius:5px;margin-top:10px;position:relative}#loading-bar{width:0%;height:100%;background:linear-gradient(90deg,#21293b,#2e7ed5,#5cd9f5);border-radius:5px;transition:width 1s ease-in-out;box-shadow:0 0 15px #5cd9f5cc,0 0 30px #5cd9f5cc;animation:glow 1.5s infinite alternate;z-index:5}#loading-bar:after{content:"";position:absolute;top:0;right:0;bottom:0;background:linear-gradient(90deg,#21293b,#2e7ed5,#5cd9f5);background-size:500%;filter:blur(10px);left:50%}#loading-logo img{width:250px}@keyframes glow{0%{box-shadow:0 0 15px #5cd9f5cc,0 0 30px #5cd9f5cc}to{box-shadow:0 0 30px #5cd9f5,0 0 60px #5cd9f5}}#autoModeTimeline{width:100%;display:flex;flex-direction:row;gap:10px}.progress-bar{width:100%;height:100%;position:relative}.progress-fill{width:0%;height:100%;background:#1df0ff;transition:width linear}#staticTextContainer{position:absolute;top:20.5%;left:53%;transform:translate(-50%,-10%);color:#000}.static-layout-row{display:flex;flex-direction:row;gap:3px;justify-content:end;align-items:baseline}.static-layout-column{display:flex;flex-direction:column;text-align:center;align-items:center}#mainStaticText{font-size:3.5rem;font-weight:500}@media (max-width: 1024px){#mainStaticText{font-size:1.4rem}}#subStaticText{font-size:1.5rem;font-weight:400}@media (max-width: 1024px){#subStaticText{font-size:.8rem}}#columnLabel{font-size:2rem;font-weight:400}@media (max-width: 1024px){#columnLabel{font-size:1rem}}#columnValue{font-size:3rem;font-weight:600}@media (max-width: 1024px){#columnValue{font-size:1.4rem}}.hidden{display:none!important}
