@font-face{font-family:space-grotesk;src:url(/assets/space-grotesk-latin-wght-normal-BhU9QXUp.woff2)}:root{--colour-background:#264653;--colour-surface:#2a9d8f;--colour-cta:#e9c46a;--colour-cta-light:#eedaa9;--colour-error:#a63232;--colour-text-on-surface:#fff;--colour-text-on-cta:#000;--colour-text-on-field:#000;--colour-border-on-surface:#195e56;--colour-border-on-cta:#b89a51;--colour-cell-unvisited:#fff;--colour-cell-visited:#eedaa9;--colour-cell-border:#000;--font-primary:space-grotesk;--border-radius:6px;--border-width:2px}html,body,#root{background-color:var(--colour-background);background-image:linear-gradient(#ffffff1a 1px,#0000 1px),linear-gradient(90deg,#ffffff1a 1px,#0000 1px);background-size:50px 50px;width:100%;min-height:100vh;margin:0;padding:0;animation:10s linear infinite scrollGrid}@keyframes scrollGrid{0%{background-position:0 0}to{background-position:100px 100px}}body{font-family:var(--font-primary);color:var(--colour-text-on-surface)}input,select{font:inherit;color:var(--colour-text-on-field);border-radius:var(--border-radius);border:none;padding-left:.5rem}button{font:inherit;background:var(--colour-cta);color:var(--colour-text-on-cta);border:var(--border-width) solid var(--colour-border-on-cta);border-radius:var(--border-radius);cursor:pointer;font-weight:700;transition:background-color .2s}button:disabled{background:var(--colour-background);border:var(--border-width) solid var(--colour-border-on-surface)}.pushableButton{background:var(--colour-border-on-cta);padding:0}.pushableButtonFront{background:var(--colour-cta);border-radius:var(--border-radius);justify-content:center;align-items:center;display:flex;transform:translateY(-6px)}.pushableButton:active .pushableButtonFront{transform:translateY(-2px)}.pushablebackButton:disabled{background:var(--colour-background);border:var(--border-width) solid var(--colour-border-on-surface)}.pushableButton:disabled .pushableButtonFront{background:var(--colour-border-on-surface)}.buttonStyle{font:inherit;background:var(--colour-cta);color:var(--colour-text-on-cta);border:var(--border-width) solid var(--colour-border-on-cta);border-radius:var(--border-radius);font-weight:700}button:hover{filter:brightness(110%)}fieldset{background-color:var(--colour-background);border:var(--border-width) solid var(--colour-border-on-surface);border-radius:var(--border-radius)}legend{font-weight:700}hr{background:var(--colour-border-on-surface);border-radius:var(--border-radius);border:none;width:100%;height:3px}.panel{background:var(--colour-surface);border:var(--border-width) solid var(--colour-border-on-surface);border-radius:var(--border-radius);padding:.75rem;box-shadow:0 4px 8px #0003}.section{margin:2px}.errorMessage{color:var(--colour-error);font-weight:700}input[type=range]{appearance:none;background:var(--colour-background);border-radius:var(--border-radius);outline:none;height:10px;box-shadow:0 2px #0003}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--colour-surface);cursor:pointer;border-radius:50%;width:15px;height:15px}input[type=range]::-moz-range-thumb{background:var(--colour-surface);cursor:pointer;border-radius:50%;width:15px;height:15px}.bounceText span{animation:2s ease-in-out infinite bounce;display:inline-block}@keyframes bounce{0%,to{transform:translateY(15px)}50%{transform:translateY(-15px)}}.tooltip{border-radius:var(--border-radius);color:var(--colour-text-on-surface);opacity:0;background-color:#0000001a;padding:.5rem;font-size:small;transition:opacity .5s;position:absolute;left:50%;transform:translate(-50%)}button:hover .tooltip{opacity:1}input[type=color i]{border-radius:var(--border-radius);block-size:24px;inline-size:24px;width:100%}input[type=color i]::-webkit-color-swatch{border:none}input[type=color i]::-moz-color-swatch{border:none}#contentPanel{grid-template-columns:1fr 1fr;display:grid}#mazePanel{flex-direction:column;display:flex}#mazePlaceholder{justify-content:center;align-items:center;font-size:large;font-weight:700;display:flex}#gridPanel{flex-direction:column;flex-grow:1;justify-content:center;align-items:center;display:flex}#gridLabel{flex-direction:row;justify-content:center;align-items:center;gap:1rem;display:flex}#ioPanel{flex-direction:column;align-self:flex-start;gap:.5rem;display:flex}#hiddenFinalGrid{z-index:-1;position:absolute;top:0;left:-10000px}#requestButtonRow{flex-direction:row;display:flex}#requestButtonRow button{flex:1;height:50px;margin:.25rem}#requestButtonRow button div{gap:1rem;height:45px}.gridSaveStatus{border-radius:var(--border-radius);background-color:#0003;padding:.5rem}.grid{gap:0;width:min-content;margin:0 auto;display:grid;box-shadow:0 4px 8px #0003}.cell{height:var(--cell-size);width:var(--cell-size);box-sizing:border-box;transition-duration:.2s}.cell:hover{filter:brightness(110%)}#configPanel{flex-direction:column;flex-grow:2;display:flex}#configHeaderRow{flex-direction:row;justify-content:center;margin-top:-5px;margin-bottom:-5px;display:flex}#configInputRow,#configDimensions{flex-direction:row;gap:1rem;display:flex}#configDimensionsDivider{margin-top:25px}#configContentRow{background-color:var(--colour-background);flex-direction:row;flex-grow:1;gap:1rem;display:flex}.trait{color:var(--colour-text-on-cta);border-radius:var(--border-radius);background:var(--colour-cta-light);padding:5px;box-shadow:0 4px 8px #0003}.trait:hover{filter:brightness(110%)}#traitRow span+span{margin-left:15px}#configContentTextUseCase{margin-right:20px;font-weight:700}#configContentGif{border:solid;border-color:var(--colour-border-on-surface);border-width:var(--border-width);border-radius:var(--border-radius)}#configSubmit{width:100%;height:50px}#configSubmit div{gap:1rem;height:45px}#configHeaderRow,#configInputRow,#configContentRow{margin-bottom:.5rem}#playbackPanel{flex-direction:row;justify-content:center;align-items:center;gap:.5rem;display:flex}#stepCounter{text-align:center;background-color:var(--colour-background);width:120px;font-size:large;font-weight:700}#speedController{flex-direction:column;justify-content:center;align-items:center;height:50px;display:flex}#speedControllerCounter{margin-bottom:0;font-size:large;font-weight:700}#speedControllerRange{margin-bottom:10px}#speedControllerCounter,#speedControllerRange{margin-top:5px}.playbackButton{width:50px;position:relative}.playbackButtonFront{height:45px}.playbackButton:disabled{background:var(--colour-background);border:var(--border-width) solid var(--colour-border-on-surface)}.playbackButton:disabled .pushableButtonFront{background:var(--colour-border-on-surface)}.playbackTooltip{bottom:calc(100% + .5rem)}#overlay{z-index:1000;background:#0009;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;inset:0}.overlayCard{background:var(--colour-surface);border-color:var(--colour-border-on-surface);border-width:var(--border-width);border-radius:var(--border-radius);text-align:center;justify-content:center;align-items:center;width:min(700px,90vw);padding:2rem}.overlayButtonRow{justify-content:center;align-items:center;gap:.5rem;margin-top:20px;display:flex}.overlayInputRow{text-align:left;flex-direction:row;justify-content:center;align-items:center;gap:.5rem;display:flex}.logoCard{background-blend-mode:lighten;background-color:#2a9d8fcc;background-position:50%;background-repeat:no-repeat}.welcomeList{text-align:left;list-style:none}.welcomeList li{gap:.5rem;margin:.5rem 35px .5rem 0;display:flex}.splitList li{justify-content:space-between}.welcomeList li span{margin-left:5px;margin-right:5px}.welcomeTip{color:#000;border-radius:var(--border-radius);background:#fff;padding:5px;box-shadow:0 4px 8px #0003}.welcomeButton span{padding:10px}#welcomeListDivider{text-align:left;margin-top:-10px;margin-left:50px}.uuidInput{text-align:left;justify-content:center;align-items:center}.uuidInputField{width:100%}#titlePanel{flex-direction:row;justify-content:center;align-items:center;width:100%;display:flex}#titleText{margin-left:1rem;font-size:xx-large;font-weight:700}#logo{filter:invert();width:50px;height:50px}#modeText{margin-bottom:6px;font-weight:700;position:absolute;left:8rem}.titleButton{width:45px}.audioButton{position:absolute;left:1rem}.modeButton{margin-left:.5rem;position:absolute;left:4rem}.githubButton{position:absolute;right:1rem}.aboutButton{margin-right:.5rem;position:absolute;right:4rem}.titleButtonFront{height:40px}.titleTooltip{bottom:calc(-200% - .5rem)}.app{flex-direction:column;min-height:100vh;display:flex}
