:root{--blur-radius:7px;--color-bg:black;--color-fg:white;--color-mid:color-mix(in srgb, var(--color-bg) 70%,
        var(--color-fg) 30%);--color-nok:#FF2020;--color-ok:#20FF20;--font-size:1.3rem;--line-width:3px;--margin:1rem;--transition-time:0.5s}*{border:none;box-sizing:border-box;font-family:helvetica;margin:0;padding:0}body{background-color:var(--color-bg);color:var(--color-fg);display:flex;flex-direction:column;height:100cqh;user-select:none}div.input{display:flex;flex-direction:column;margin-bottom:1em}div.input:last-child{flex-flow:column-reverse;flex-grow:1;margin-bottom:0}div.row{align-items:center;display:flex;flex-flow:row}div.row *{margin-left:var(--margin)}div.row :first-child{flex-grow:1;margin-left:0;margin-right:var(--margin)}input,select{background-color:var(--color-bg);border-radius:var(--line-width);border:var(--line-width) solid var(--color-fg);color:var(--color-fg);height:min-content;padding:calc(3 * var(--line-width))}input.nok,select.nok{border-color:var(--color-nok);color:var(--color-nok)}input.ok,select.ok{border-color:var(--color-ok);color:var(--color-ok)}::picker(select),select{align-items:center;appearance:base-select}select{transition:var(--transition-time)}select:focus,select:hover{background:var(--color-mid)}#logo{align-items:center;display:flex;flex-direction:row;height:5vh;margin:var(--margin)}#logo svg{fill:var(--color-fg);height:100%;max-height:100%;stroke-opacity:0;stroke-width:7px;stroke:var(--color-fg);transition:fill var(--transition-time),stroke-opacity .1s}.nok #logo svg,.running #logo svg{fill:var(--color-nok);stroke:var(--color-nok)}.running #logo svg{animation:calc(2 * var(--transition-time)) linear 0s infinite alternate burn}@keyframes burn{from{stroke-opacity:0}to{stroke-opacity:50%}}#main{display:flex;flex-direction:column;flex-grow:1;transition:opacity var(--transition-time)}#main section{flex-direction:column;flex-grow:1;margin:var(--margin)}#main *{font-size:var(--font-size)}#configuring{display:none}.configuring #configuring{display:flex}#revealing{display:none}.revealing #revealing{display:flex}#revealing .lower,#revealing .upper{align-items:center;background-color:var(--color-bg);border-radius:calc(2 * var(--line-width));border:calc(2 * var(--line-width)) solid var(--color-fg);color:var(--color-fg);display:flex;font-size:calc(2 * var(--font-size));height:3em;justify-content:center;padding:var(--line-width);width:80%}#revealing .container{align-items:center;display:flex;flex-flow:column;flex-grow:1;justify-content:center;width:100%}#revealing .upper{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:calc(.5 * var(--line-width)) solid var(--color-fg)}#revealing .lower{border-top-left-radius:0;border-top-right-radius:0;border-top:calc(.5 * var(--line-width)) solid var(--color-fg)}#revealing .target{font-size:2em;max-height:0;opacity:0;overflow-y:hidden;transition:max-height var(--transition-time),opacity var(--transition-time)}.nok #revealing .target,.ok #revealing .target{max-height:2em;opacity:100%}.nok #revealing .target{color:var(--color-nok)}#running{display:none}.running #running{display:flex}#running .topic{align-items:center;display:flex;font-size:1em;justify-content:center}#running .topic::before{content:"—"}#running .topic::after{content:"—"}#running .target{align-items:center;display:flex;flex-grow:2;font-family:mono;font-size:4em;justify-content:center}.nok #running .target{color:var(--color-nok);text-shadow:0 0 var(--blur-radius)}#finishing{display:none}.finishing #finishing{display:flex}#finishing .notification{align-items:center;display:flex;flex-grow:2;font-family:mono;font-size:3em;justify-content:center;text-align:center}