*{box-sizing:border-box}#root,body,html{height:100%;margin:0;padding:0;width:100%}body{background-color:#000}.Screen{display:flex;flex-direction:column}.Screen Canvas{min-height:85vh}.StyledButtonGate.active{background-color:gold}@media (max-width:600px){.Screen Canvas{min-height:46vh}}.OutBox{align-items:center;background-color:#000;color:#e5e5e5;display:flex;flex-direction:column;justify-content:space-around;overflow:hidden}.OutBox h1{margin:0}.OutBox>div{box-shadow:0 0 10px #0003;font-size:smaller;gap:1rem;width:100vw}.Container,.OutBox>div{display:flex;flex-direction:row;justify-content:center;text-align:center}.Container{align-items:flex-start;background-color:#fffc;border-radius:10px;box-shadow:0 0 10px #fff;left:85vw;max-height:84vh;max-width:250px;overflow:hidden;position:absolute;top:30%;transform:translate(-50%,-50%);-webkit-user-select:none;user-select:none;width:250px;z-index:5}.Container h1{color:#333;font-size:1.5rem;margin-bottom:1rem}.Container label{display:flex;flex-direction:column;gap:.5rem}.Container label input[type=range]{cursor:pointer;width:100%}.Container label span{color:#777;font-size:.8rem}@media (max-width:600px){.Container{border-radius:0;box-shadow:0 0 0 #fff0;left:auto;max-width:100vw;position:static;top:auto;transform:none;width:100vw}}.GatesSpan{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr)}.CheckSpan,.GatesSpan{grid-gap:1rem;display:grid;gap:1rem;margin-bottom:1rem;margin-left:1rem;margin-right:1rem}.CheckSpan{grid-template-columns:repeat(4,1fr)}.SettingsDiv{gap:1rem}.SettingsDiv,.SettingsDiv div{display:flex;flex-direction:column}@media (max-width:600px){.SettingsDiv{font-size:smaller}.SettingsDiv div{width:98vw}}.StyledButtonGate{background:linear-gradient(180deg,#0075ff,#0075ff);border:none;border-radius:6px;box-shadow:0 2px 2px #0003;color:#fff;cursor:pointer;font-size:16px;padding:10px}.StyledButtonGate:hover{background:#4282d3}.StyledButtonGate:active{box-shadow:0 1px 1px #0000001a;transform:translateY(2px)}.StyledButtonGate.active{background:gold;border-color:#e6c200;box-shadow:0 0 10px #ffd70080;color:#000;transform:scale(1.05)}.StyledButtonGate.active:hover{background:#e6c200}.CheckBoxContainer{align-items:center;cursor:pointer;display:flex;gap:8px;-webkit-user-select:none;user-select:none}.CheckBoxInput{-webkit-appearance:none;appearance:none;border:2px solid #0075ff;border-radius:3px;cursor:pointer;height:16px;width:16px}.CheckBoxInput:checked{background-color:#0075ff}.CheckBoxLabel{color:#333;font-size:16px}