:root{--primary-color: #0050a0;--accent-color: #e5b700;--p: 0;--deg: calc(var(--p) * 360deg);--pos: calc(var(--p) * 100%);--text: #000}body{font-family:arial}body,html{height:100%;margin:0;display:flex;justify-content:center;align-items:center}#clock{width:90vmin;height:90vmin;border-radius:50%;position:relative;--c: var(--primary-color)}#clock.stage1{background-color:var(--primary-color);--c: var(--accent-color)}#clock.stage2{background-color:var(--accent-color);--c: var(--accent-color)}.arc:before{content:"";position:absolute;border-radius:50%;inset:0;background:conic-gradient(var(--c) var(--pos),transparent var(--pos))}.arrow{position:absolute;width:12px;height:60%;background:#000;left:calc(50% - 6px);transform-origin:50% 91.5%;transform:rotate(var(--deg));border-radius:10px;top:-5%;mask:linear-gradient(#fff 0 0) no-repeat 50% 0 / 100% 30%}.narrow-arrow{position:absolute;--w: 2px;width:calc(var(--w) * 2);height:50%;background:var(--c);left:calc(50% - var(--w));transform-origin:50% 100%;transform:rotate(var(--deg));border-radius:10px}.text{position:absolute;width:100%;height:100%}#time{position:absolute;top:50%;left:50%;font-size:10em;transform:translate(-50%,-50%);text-shadow:-2px -2px 0 #fff,2px -2px 0 #fff,-2px 2px 0 #fff,2px 2px 0 #fff}#total-time{position:absolute;top:30%;left:50%;font-size:5em;transform:translate(-50%,-50%)}#auto-continue{position:absolute;top:10%;left:50%;font-size:5em;transform:translate(-50%,-50%);opacity:0;transition:opacity .5s;cursor:pointer}#auto-continue.show{opacity:1}#info{position:absolute;top:70%;left:50%;width:100%;font-size:3em;text-align:center;transform:translate(-50%,-50%)}.mini #total-time,.mini #info{display:none}#config-select{display:none;position:absolute;top:7%;left:7%;width:10%;text-align:center}#manual-add-time{display:none;position:absolute;top:15%;left:7%;text-align:center}.show{display:block!important}#config-select-dropdown{vertical-align:middle;font-size:1.1em;min-width:100px}#back-button{position:absolute;top:0;left:0;font-size:3em;text-align:center;cursor:pointer;background-color:#aaa;opacity:0;border-radius:0 0 20px;transition:opacity .5s;width:fit-content}#back-button:hover{opacity:1}#back-button a{display:block;padding:20px;color:var(--text)!important;text-decoration:none}
