:root{font-family:Inter,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{margin:0;min-width:320px;min-height:100vh;overflow-x:hidden}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}*,*:before,*:after{box-sizing:inherit}html{box-sizing:border-box}html body{padding:0;margin:0;overflow-y:inherit}#root{min-width:100vw;min-height:100vh;text-align:center}div#header{background-color:#2d2525;min-width:100%;min-height:75vh;display:flex;flex-direction:column}#header>.logo{margin-top:3rem;margin-bottom:1rem;display:flex;flex-direction:column;gap:1rem}#header>.logo>img.icon{align-self:center;width:150px}#header h1{font-size:1.8rem}#header div.description{display:flex;flex-direction:column;gap:.25rem;padding:.5rem}#header .input-bar{margin-top:2rem}#header .sticky{background-color:#000;position:fixed;top:0;margin:0;width:100%;padding:.5rem;z-index:9998}#header p.sticky{position:fixed;top:2.5rem;margin:0;width:100%;padding:.5rem;z-index:9997}div#content{background-color:#211687aa;height:100vh;scroll-margin-top:50px;display:grid;grid-template-rows:repeat(10,1fr);grid-template-columns:300px repeat(7,1fr) 300px}div#content .content-bar.showing{position:fixed;z-index:9999;bottom:0;left:0;max-width:375px}div#content div.content-bar.in-place{background-color:green;z-index:100;position:relative;grid-column:span 1;grid-row:1 / -1}div#content .content-bar.hiding{background-color:plum;position:absolute;left:-520px}div#content div.video-section{height:100vh;grid-column:span 8}@media (min-width: 845px) and (max-width: 992px){div#content{grid-template-rows:repeat(10,10vh);grid-template-columns:repeat(9,1fr) 300px}div#content div.video-section{background-color:#2f4f4f;grid-column:span 10}}div.input-container{display:flex;flex-direction:column;gap:.25rem}div.input-bar{display:flex;justify-content:center;padding-top:.4rem;padding-bottom:.2rem}.input-bar>input{flex-grow:1;border:none;max-width:75%;padding:.6rem .75rem;background-color:#514e51;caret-color:#e7dfdd;box-shadow:none}.input-bar>input:focus{outline:none}.input-bar>input.invalid{box-shadow:0 0 3px #c00}input:focus::placeholder{color:transparent}.input-bar>button{width:40px;border:0;transition-duration:.1s;background-color:#f2c38b}.input-bar>button.margin-right{margin-right:auto}.input-bar>button:hover{background-color:#eda85e;transform:scale(1.05) translateY(-2.5%);box-shadow:1px 1px 3px #514e51}svg.input-svg{width:25px;height:25px;stroke:#514e51}svg.invalid{stroke:#c00}svg.valid{stroke:green}svg.animate-svg{animation:slide .4s 1 ease-in-out}p.input-bar-info,p.visible{color:#c00}p.hidden{opacity:0;color:transparent}p.shake{animation:shake .5s ease-in-out 1}p.input-bar-info.valid{color:green}p.input-bar-info.invalid{color:#c00}input.processing{background:linear-gradient(90deg,#f2c38b 33%,#eda85e 50%,#f2c38b 66%)#e7dfdd;background-size:300% 100%;animation:l1 1s infinite linear}@keyframes l1{0%{background-position:right}}svg.menu-button{width:35px;fill:none;margin-right:auto;margin-left:1rem}svg.menu-button:hover{background-color:#f2c38b80;border-radius:50%;transform:scale(1.05) translateY(-2.5%)}svg.show-burger{display:inline}svg.hide-burger{display:none}@media (min-width: 992px) and (max-width: 100vw){.input-bar>input{max-width:55%}}@keyframes slide{0%{stroke:#fff;transform:translate(0)}5%{transform:scale(1.025) translateY(15%)}25%{transform:scale(1.025) translateY(5%)}70%{stroke:#e7dfdd;transform:scale(1) translateY(-20%)}90%{transform:scale(1)}to{transform:none}}@keyframes shake{0%{transform:translateY(0);text-shadow:0 0 0 #F2C38B,0 0 0 #E7DFDD,0 0 0 #514E51,0 0 0 #EDA85E}20%{transform:translateY(-.25rem);text-shadow:.125em .125rem 0 #F2C38B,.25em .25rem 0 #E7DFDD,-.125em -.125rem 0 #514E51,-.25em -.25rem 0 #EDA85E}40%{transform:translate(.05rem,.25rem);text-shadow:0 0 0 #EDA85E,0 0 0 #E7DFDD,0 0 0 #514E51,0 0 0 #EDA85E}60%{transform:translateY(-.1rem);text-shadow:.03125rem .03125rem 0 #EDA85E,.0625rem .0625rem 0 #E7DFDD,-.03125rem -.03125rem 0 #514E51,-.0625rem -.0625rem 0 #EDA85E}80%{transform:translateY(0);text-shadow:0 0 0 #EDA85E,0 0 0 #E7DFDD,0 0 0 #514E51,0 0 0 #EDA85E}}div.content-bar{background-color:pink;height:100vh;display:flex;flex-direction:column;overflow-y:scroll}div.content-bar .header{display:flex;align-items:center;padding:.4rem 0 .4rem .4rem;background-color:red}div.content-bar h2.title{margin-left:1rem;margin-bottom:.2rem;font-size:1.5rem}svg.close{width:35px;fill:none;margin-left:1rem}svg.close:hover{background-color:#f2c38b80;border-radius:50%;transform:scale(1.03) translateY(-2.5%)}div.info-card{background-color:#8a2be2;display:flex;padding:.5rem;gap:.5rem;align-items:center;height:6rem}div.info-card:hover{background-color:#000;cursor:pointer}div.info-card.hidden{visibility:hidden}div.info-card.selected{background-color:#000}div.info-card img.thumbnail{width:auto;height:3.5rem}div.text-container{width:100%;display:flex;align-items:center;justify-content:space-between;padding:0 .5rem;gap:.5rem}div.text-container div.texts{display:flex;flex-direction:column;justify-content:center;gap:.25rem;text-align:left;height:5rem}div.text-container .mid-text{text-align:right}div.video-section{background-color:#deb887;width:100%;display:grid;grid-template-rows:repeat(20,5%);grid-template-columns:repeat(9,1fr) 300px}div.video-section.vertical{display:flex;flex-direction:column;background-color:#ffebcd;width:100vw}div.video-section div.content{background-color:#5f9ea0;grid-row:2 / 8;grid-column:2 / 9}div.video-section div.content.vertical{background-color:#87cefa;width:70%;padding:1rem;margin:0 auto}div.content iframe{aspect-ratio:16 / 9;width:100%;height:auto}div.content .info{background-color:#00f;display:flex;gap:.15rem;align-items:center;justify-content:center;padding:.5rem 0 1rem}div.content .info p{text-align:center}div.content .controls{background-color:#fff0f5;position:relative;width:100%;margin-top:1rem;display:flex;align-items:center;justify-content:center;gap:1.3rem}div.content .controls.vertical{background-color:#ff4500;position:relative;width:100%;margin-top:0;display:flex;align-items:center;justify-content:center;gap:1.3rem}div.content .controls svg.interact{width:40px;height:40px}div.content .controls .button{width:32px;height:32px}g.button-fill-colour,path.button-fill-colour{fill:#000}div.video-section div.menu{background-color:#9acd32;z-index:9990;grid-row:1 / -1;grid-column:10 / -1;overflow-y:scroll}div.video-section div.menu.vertical{background-color:gray;height:100%}div.video-section div.menu .header{display:flex;align-items:center;padding:.4rem 0 .4rem .4rem;background-color:red}div.video-section div.menu h2.title{margin-left:1rem;margin-bottom:.2rem;font-size:1.5rem}.info-card-custom{padding:0 .3rem!important;height:auto!important}