:root{--darker:#1d213d;--dark:#21465c;--neutral:#51a1d8;--bright:#58a898;--brighter:#dfc850;--buncss-light: ;--buncss-dark:initial;color-scheme:dark}*,*:before,*:after{box-sizing:border-box;user-select:none;font-family:Roboto,Arial,sans-serif;font-weight:700}body{background-color:var(--darker);color:var(--neutral);display:flex;overflow:hidden;overscroll-behavior:none;flex-direction:column;justify-content:center;align-items: center;height:100svh;margin:0;padding:0;font-size:16px}.hide{display:none!important}#main{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);grid-column-gap:20px;grid-row-gap:20px;width:100%;height:100%;padding:20px 50px}#main #planContainerBox{grid-area:1/1/5/4}#main .planControlsBox{grid-area:1/4/2/5;border-radius:10px;padding:20px}#main .groupControlsBox{grid-area:2/4/4/5;border-radius:10px;padding:20px}#main .solveControlsBox{grid-area:4/4/5/5;border-radius:10px;padding:20px}#planContainerBox{display:flex;justify-content:center;align-items: center}#planContainerBox #planContainer{--gapSize:10px;--paddingSize:20px;--seatSize:40px;--scalingFactor:calc(min(var(--width)/(var(--seatSize)*var(--xCount) + var(--gapSize)*(var(--xCount) - 1) + var(--paddingSize)*2),var(--height)/(var(--seatSize)*var(--yCount) + var(--gapSize)*(var(--yCount) - 1) + var(--paddingSize)*2),1));background-color:var(--dark);padding:var(--paddingSize);display:flex;justify-content:center;align-items: center;gap:var(--gapSize);scale:var(--scalingFactor);border-radius:10px;flex-direction:column;box-shadow:0 4px 8px #0003}#planContainerBox #planContainer .row{display:flex;gap:var(--gapSize)}#planContainerBox #planContainer .row .seat{width:var(--seatSize);height:var(--seatSize);aspect-ratio:1;background-color:var(--neutral);color:var(--darker);display:flex;cursor:pointer;position:relative;border-radius:5px;justify-content:center;align-items: center;transition-property:background-color,color,opacity,transform,scale,outline;transition-duration:.2s;transition-timing-function:ease-in-out;box-shadow:0 2px 4px #0000001a}#planContainerBox #planContainer .row .seat:before{content:"";position:absolute;background-color:var(--dark);opacity:0;z-index:-1;border-radius:2px;width:2px;height:0;transition:all .2s ease-in-out}#planContainerBox #planContainer .row .seat:after{content:"";position:absolute;background-color:var(--dark);opacity:0;z-index:-1;border-radius:2px;width:2px;height:0;transition:all .2s ease-in-out}#planContainerBox #planContainer .row .seat:before{rotate:45deg}#planContainerBox #planContainer .row .seat:after{rotate:-45deg}#planContainerBox #planContainer .row .seat.disallowed{background-color:var(--darker);color:var(--neutral);box-shadow:none;scale:.8}#planContainerBox #planContainer .row .seat.disallowed:before{opacity:1;width:3px;height:70%}#planContainerBox #planContainer .row .seat.disallowed:after{opacity:1;width:3px;height:70%}#planContainerBox #planContainer .row .seat.highlight{outline:2px solid var(--brighter);box-shadow:0 0 10px var(--brighter);scale:1.2}#planContainerBox #planContainer.solving .seat:not(.disallowed){border:2px solid var(--darker);background-color:#0000}.planControlsBox{display:flex;background-color:var(--dark);justify-content:center;align-items: center}.planControlsBox .xyCountControl{display:flex;flex-direction:row;justify-content:center;align-items: center;gap:10px}.planControlsBox .xyCountControl input{text-align:center;width:60px}.planControlsBox .xyCountControl input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.planControlsBox .xyCountControl input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.groupControlsBox{display:flex;background-color:var(--dark);flex-direction:column;justify-content:flex-start;align-items: center}.groupControlsBox #groupList{display:flex;flex-direction:column;justify-content:center;align-items: center;gap:10px;margin-top:10px}.groupControlsBox #groupList .group{display:flex;justify-content:center;align-items: center;gap:10px}.groupControlsBox #groupList .groupColour{aspect-ratio:1;border-radius:5px;height:100%}.groupControlsBox #groupList input{text-align:center;width:60px}.solveControlsBox{display:flex;background-color:var(--dark);flex-direction:column;justify-content:flex-start;align-items: center}