@keyframes blink{0%{background-color:maroon}to{background-color:#9f9f00}}*,:after,:before{box-sizing:border-box}:root{font-family:Inter Tight,system-ui,Avenir,Helvetica,Arial,sans-serif;font-variant-numeric:tabular-nums;line-height:1.3;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;--work-bg:#4caf50;--break-bg:#00bfff;--fun-bg:#bc9600}button,input,select,textarea{font-family:inherit}body{padding:1.25rem}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}h1{line-height:1.1;margin-top:0}body,h2,h3{margin:0}.mb-0{margin-bottom:0!important}.fw-900{font-weight:900!important}.app{padding-inline:2rem;margin:0 auto}button{border-radius:.5rem;border:2px solid transparent;font-size:1rem;font-weight:600;transition:border-color .25s;padding:.25rem .625rem;min-width:9ch;-webkit-user-select:none;-moz-user-select:none;user-select:none}button:not(:disabled){cursor:pointer;background-color:#3d3d3d;color:#fff}button:not(:disabled):hover{background-color:#464646;border-color:#646cff;color:#fff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color;z-index:555}button.highlighted{background-color:red;animation:blink .75s infinite alternate}.button-group{display:flex;justify-content:center}.button-group>button{min-width:auto;flex-basis:max-content;padding-inline:1ch}.button-group>button:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.button-group>button:not(:last-child){border-right-color:#555;border-top-right-radius:0;border-bottom-right-radius:0}.button-group>button.button--sm{color:#ccc;font-weight:400}.button-group>button.button--xs{color:#aaa;font-size:.625rem}.button-group--connected{border-radius:.5rem;overflow:hidden}.button-group--connected>button{border-radius:0}.button-group--connected>button:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}.button-group--connected>button:not(:last-child){border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}.button-group--tight>button{padding-inline:.5ch}.controls{display:flex;gap:.625rem;flex-wrap:wrap;margin-bottom:1.25rem;align-items:baseline;justify-content:center}.timeline{background-color:#87ceeb;font-weight:700;min-height:4rem;margin-top:2rem;margin-bottom:2.5rem;display:grid;grid-template-columns:repeat(var(--total-minutes),1fr);-webkit-user-select:none;-moz-user-select:none;user-select:none}.timeline__period{position:relative;color:#fff;text-align:right;border-right:1px solid #fff;background-color:var(--period-bg, #fff);grid-column-start:span var(--period-minutes);display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid}.timeline__period[style*="--period-minutes: 0"]{display:none}.timeline__period--work{--period-bg:var(--work-bg)}.timeline__period--break{--period-bg:var(--break-bg)}.timeline__period--fun{--period-bg:var(--fun-bg)}.timeline__period--active{outline:2px solid #fff;z-index:1}.timeline__elapsed-time{position:absolute;width:calc(var(--elapsed-minutes)/var(--period-minutes)*100%);top:0;bottom:0;left:0;background-color:#eeeeee90}.timeline__current-time{--line-overshoot:16px;position:absolute;width:100%;top:calc(-1*var(--line-overshoot));bottom:calc(-1*var(--line-overshoot));left:0;padding-block:var(--line-overshoot);border-right:2px solid #fff}.timeline__text{font-size:.75rem;line-height:1.3;width:100%;min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content;padding:.25rem .3rem .25rem .4rem;justify-self:start;grid-column:1/-1;display:grid;gap:.25rem;grid-template-columns:1fr -webkit-max-content;grid-template-columns:1fr max-content;grid-template-rows:1fr auto}.timeline__type{text-align:left}.timeline__note{font-weight:400}.timeline__end-time{grid-column-end:-1;position:absolute;top:100%;right:0;translate:0 30%;opacity:50%}.timeline__period:not(:last-child) .timeline__end-time{translate:50% 30%}.timeline__end-time,.timeline__start-time{font-size:.625rem}.timeline__start-time{text-align:left}.timeline__elapsed{font-size:1rem;width:-webkit-max-content;width:-moz-max-content;width:max-content;text-align:left;display:block;position:absolute;right:0;transform:translate(calc(50% + 1px))}.timeline__elapsed--timer{top:100%}.timeline__elapsed--period{bottom:90%;font-size:.75rem}.timeline__symbol{font-size:60%;vertical-align:middle}.timeline__subinterval{--subinterval-minutes:12;--subinterval-color-a:rgb(0 0 0 / 12%);--subinterval-color-b:rgb(0 0 0 / 6%);--subinterval-width:calc(100% / var(--period-minutes) * var(--subinterval-minutes));background-image:repeating-linear-gradient(to right,var(--subinterval-color-a)0 var(--subinterval-width),var(--subinterval-color-b) var(--subinterval-width) calc(var(--subinterval-width)*2));grid-column:1/-1;grid-row:1/2;z-index:-1}.timeline__userintended{display:grid;grid-row:1/2;z-index:-1;grid-template-columns:subgrid;grid-column-start:var(--userintended-minutes);grid-column-end:-1;background-color:#ac0000}.timeline__period--editable{cursor:pointer}.timeline__period--editable:hover{outline:4px solid rgba(255,255,255,.9);z-index:10}.timeline__period--editing{z-index:10;outline:4px solid #fff}.timeline__edit-form{display:flex;flex-direction:column;gap:.5rem;padding:.5rem;background-color:#0000001a}.timeline__edit-row{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:.5rem}button.button-group-item:not(:disabled){background:#999;color:#333;transition:all .15s ease;padding:.375rem 1ch;cursor:pointer;font-family:inherit}.button-group--tight button.button-group-item:not(:disabled){padding-inline:.5ch}button.button-group-item:not(:disabled):hover{background-color:#aaa;border-color:transparent;color:#333;z-index:30}button.button-group-item:not(:disabled):focus{z-index:30}button.button-group-item.button-group-item--semiactive:not(:disabled){background-color:#666;color:#fff}button.button-group-item.button-group-item--semiactive:not(:disabled):hover{background-color:#555;color:#fff}button.button-group-item.button-group-item--active:not(:disabled){background-color:#464646;color:#fff}button.button-group-item.button-group-item--active:not(:disabled):hover{background-color:#444;color:#fff}.timeline__edit-delete,.timeline__edit-duration,.timeline__edit-note{background:#ffffffe6;border:0;padding:.375rem .5rem;color:#333}.timeline__edit-delete,.timeline__edit-note{padding:.375rem}.timeline__edit-note{flex:1;min-width:100px}.timeline__edit-delete{cursor:pointer;min-width:30px;display:flex;align-items:center;justify-content:center}.timeline__edit-delete:hover{background:#f00c;color:#fff}.timeline__add-period{position:absolute;left:100%;top:50%;translate:-50% -50%;width:1.5rem;height:1.5rem;padding:0;min-width:auto;border-radius:50%;font-size:.5rem;line-height:1;transition:opacity .1s ease;z-index:20;opacity:0}.timeline__period:hover .timeline__add-period{opacity:.5}.timeline__period:hover .timeline__add-period:hover{opacity:1}.stats{font-weight:700;margin-bottom:1rem;--break-max:max(var(--break-original), var(--break-planned));--break-percentage:calc(var(--break-elapsed) / var(--break-planned) * 100%);--fun-max:max(var(--fun-original), var(--fun-planned));--fun-percentage:calc(var(--fun-elapsed) / var(--fun-planned) * 100%);--work-max:max(var(--work-original), var(--work-planned));--work-percentage:calc(var(--work-elapsed) / var(--work-planned) * 100%);--total-width:calc(var(--break-max) + var(--fun-max) + var(--work-max));--middle-line-left:var(--break-max);--middle-line-right:calc(var(--break-max) + var(--fun-max))}.stats-bars{display:grid;grid-template-columns:repeat(var(--total-width),1fr);grid-template-rows:repeat(3,1fr);height:4rem}.stats-bar,.stats-elapsed{font-size:.75rem;align-content:end}.stats-bar{background-color:#000;position:relative}.stats-bar--break{text-align:left;background-color:var(--break-bg);grid-column-end:var(--middle-line-left)}.stats-bar--break.stats-bar--original{grid-column-start:calc(var(--middle-line-left) - var(--break-original) + 1)}.stats-bar--break.stats-bar--current{grid-column-start:calc(var(--middle-line-left) - var(--break-planned) + 1)}.stats-bar--fun{text-align:center;background-color:var(--fun-bg);grid-column-start:var(--middle-line-left);grid-column-end:var(--middle-line-right)}.stats-bar--fun.stats-bar--original{grid-column-start:calc(var(--middle-line-left) + var(--fun-max) - var(--fun-original));grid-column-end:calc(var(--middle-line-right) - var(--fun-max) + var(--fun-original))}.stats-bar--fun.stats-bar--current{grid-column-start:calc(var(--middle-line-left) + var(--fun-max) - var(--fun-planned));grid-column-end:calc(var(--middle-line-right) - var(--fun-max) + var(--fun-planned))}.stats-bar--work{text-align:right;background-color:var(--work-bg);grid-column-start:var(--middle-line-right)}.stats-bar--work.stats-bar--original{grid-column-end:calc(var(--middle-line-right) + var(--work-original) + 1)}.stats-bar--work.stats-bar--current{grid-column-end:calc(var(--middle-line-right) + var(--work-planned) + 1)}.stats-bar--current,.stats-bar--original{grid-row:1/4;border:1px solid #fff}.stats-bar--current{grid-row:2/3;z-index:1}.stats-elapsed{position:absolute;top:0;height:100%;background-color:#ffffff80}.stats-bar--break .stats-elapsed{right:0;border-left:2px solid #fff;width:var(--break-percentage)}.stats-bar--fun .stats-elapsed{left:calc((100% - var(--fun-percentage))/2);border-right:2px solid #fff;border-left:2px solid #fff;width:var(--fun-percentage)}.stats-bar--work .stats-elapsed{left:0;border-right:2px solid #fff;width:var(--work-percentage)}.stats-elapsed--none{display:none}.stats-text{padding:.125rem}.stats-elapsed-text{position:relative;top:-100%}.stats-bar--break .stats-elapsed-text{position:absolute;right:100%}.stats-bar--fun .stats-elapsed-text{text-align:center}.stats-bar--work .stats-elapsed-text{text-align:right}details code{min-width:24ch;display:inline-block}details .tempPeriods{display:grid;grid-template-columns:-webkit-min-content repeat(5,-webkit-min-content);grid-template-columns:min-content repeat(5,min-content);gap:.25rem 2rem}details .tempPeriod{display:contents}details .tempPeriod__data{padding:.25rem;font-size:.75rem;text-wrap:nowrap}.tempPeriod--current details .tempPeriod__data{outline:2px solid #fff}.tempPeriod--finished details .tempPeriod__data{background-color:#004600;color:#fff}details .sound-notifications{display:grid;grid-template-columns:repeat(6,-webkit-min-content);grid-template-columns:repeat(6,min-content);gap:.25rem 1rem;font-size:.75rem}details .sound-notifications__header{display:contents;font-weight:700}details .sound-notifications__header span{padding:.25rem;border-bottom:1px solid #ddd}details .sound-notifications__row{display:contents}details .sound-notifications__row--active code,details .sound-notifications__row--active span{background-color:#fff3cd;outline:1px solid #ffeaa7}details .sound-notifications__row code,details .sound-notifications__row span{padding:.25rem;text-wrap:nowrap;border-bottom:1px solid #eee}details .sound-notifications__row code{min-width:auto}details .sound-playback-log{display:grid;grid-template-columns:repeat(5,-webkit-min-content);grid-template-columns:repeat(5,min-content);gap:.25rem 1rem;font-size:.75rem;margin-top:.5rem}details .sound-playback-log__header{display:contents;font-weight:700}details .sound-playback-log__header span{padding:.25rem;border-bottom:1px solid #ddd}details .sound-playback-log__row{display:contents}details .sound-playback-log__row code,details .sound-playback-log__row span{padding:.25rem;text-wrap:nowrap;border-bottom:1px solid #eee}details .sound-playback-log__row code{min-width:auto}.build-info{position:absolute;top:.5rem;right:.5rem;color:#eee;font-size:1.5rem;font-weight:700;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:auto;cursor:default;z-index:1000}