:root{--space-xl:100px;--space-lg:75px;--space:50px;--space-sm:25px;--space-xs:10px;--space-neg:-50px;--space-neg-sm:-25px;--size:40px;--gap:calc(var(--size)/5);--radius-lg:75px;--radius:25px;--radius-sm:13px;--transition:background-color .5s ease-out;--color:#000;--color2:#666;--color-background:#efefef;--color-background2:#fff;--color-empty:#dedede;--color-empty-today:#fff;--color-button:#000;--color-warning:#ee6352;--color-feedback:#e2a28c;--color-submit:#7ba38c;--color-input:#000;--color-input-background:#ddd;--shadow:0 5px 10px 0 rgba(0,0,0,.05);--font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--font-icon:"Font Awesome 5 Pro";--size-font-sm:12px;--size-font:16px;--size-font-lg:22px;--size-font-xl:32px;--size-font-icon:22px;--size-font-input:22px;--red:#d67b61;--purple:#858aa8;--green:#7a9e8d;--tan:#a8a490;--orange:#efc986;--grey:#757575;--blue:#82b1bd;--brown:#646057;--bw:#333}[data-theme=dark]{--color:#fff;--color2:#666;--color-background:#222;--color-background2:#333;--color-empty:#333;--color-empty-today:#555;--color-button:#fff;--color-warning:#ee6352;--color-feedback:#9b6d5e;--color-submit:#5a7063;--color-input:#fff;--color-input-background:#666;--shadow:none;--red:#b35041;--purple:#6a638d;--green:#52846f;--tan:#ada88f;--orange:#9e6f40;--grey:#717171;--blue:#55799f;--brown:#8b8069;--bw:#ccc}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--color-background);-webkit-size-adjust:100%}.container{height:100vh}.container,.content{display:flex;flex-direction:column}.content{align-items:center;flex-grow:1;opacity:0;overflow:auto;overflow-x:auto;overflow-y:auto;position:relative;transition:opacity .15s ease-out}.content--loaded{opacity:1}.header{background:var(--color-background);display:flex;justify-content:space-between;margin:var(--space-neg) var(--space-neg) 0;margin-bottom:var(--space-sm);padding:var(--space-sm) var(--space) var(--space-sm) var(--space-sm);position:sticky;top:0;z-index:100}.header__button{border-radius:var(--radius-sm);display:block;font-weight:700;padding:calc(var(--space-sm) - var(--space-xs)) var(--space-sm)}.header__button--submit{background:var(--color-submit);color:var(--color-background2)}@media (max-width:699px){.header{margin:var(--space-neg-sm) var(--space-neg-sm) 0;margin-bottom:var(--space-sm);padding:var(--space-xs) var(--space-sm)}}body{-webkit-tap-highlight-color:rgba(0,0,0,0);font-family:var(--font);font-weight:400;line-height:1.5;-webkit-user-select:none;-moz-user-select:none;user-select:none}a,body{color:var(--color)}a{text-decoration:none}.feedback{background:var(--color-feedback);border-radius:var(--radius-sm);padding:var(--space-sm)}hr{background:var(--color-background2);border:none;display:block;height:1px;margin:var(--space-sm) 0}h3{font-size:var(--size-font-lg);margin:var(--space-xs) 0}h3,h4{text-align:center}.group{background:var(--color-background2);border-radius:var(--radius);gap:var(--space-xs);margin:0 0 var(--space);padding:var(--space-xs)}.group,.habits{display:flex;flex-direction:column}.habits{flex-grow:1;gap:20px;max-width:100vw;padding:75px var(--space) 150px;transition:opacity .15s ease-out;width:-moz-max-content;width:max-content}.habits--loading{opacity:0}.habits__container{position:relative}.habits__container,.habits__list{display:flex;flex-direction:column;gap:20px}.habits__list{width:-moz-max-content;width:max-content}.habits__list--remote{pointer-events:none}.habits__habit{display:flex;width:-moz-max-content;width:max-content}.habits__header{align-self:flex-start;flex-shrink:0;left:var(--space-xs);position:sticky;z-index:10}.habits__account{font-size:var(--size-font-sm);left:0;letter-spacing:.2em;position:sticky;text-align:center;text-transform:uppercase}.habits__icon{align-items:center;background:var(--color-background);border:4px solid;border-radius:100px;color:var(--color);display:flex;font-size:calc(var(--size)/2.5);justify-content:center;line-height:1em;z-index:5}.habits__day,.habits__icon{aspect-ratio:1;position:relative;width:var(--size)}.habits__day{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-empty-today);border:none;border-radius:200px;flex-shrink:0;transform:scale(.6);z-index:2}.habits__day[data-today]{background:var(--color-empty-today);transform:scale(1)}.habits__day[data-future]{background:var(--color-empty);pointer-events:none}.habits__day:active{transform:scale(.5)}.habits__day[data-today]:active{transform:scale(.9)}.habits__day--complete{background:var(--color)!important;border:none;transform:none!important}.habits__day--complete:after{align-items:center;color:var(--color-background);content:"\f00c";display:flex;font-family:var(--font-icon);font-size:calc(var(--size)/2.5);font-weight:800;height:100%;justify-content:center;width:100%}.habits__day--click:before{background:url(../../images/click.svg) 50% no-repeat;background-size:100%;content:"";height:125%;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:125%;z-index:100}.habits__space{--overlap:calc(var(--size)/2);flex-shrink:0;height:var(--size);margin:0 calc(var(--overlap)*-1);position:relative;width:calc(var(--gap) + var(--overlap)*2)}.habits__space svg{display:none;height:100%;width:100%}.habits__space--filled svg{display:block}.habits__weekdays{display:flex;gap:var(--gap)}.habits__weekday{align-items:center;aspect-ratio:1;display:flex;flex-shrink:0;font-size:var(--size-font-sm);opacity:.25;transform:rotate(-90deg);width:var(--size)}.habits__weekday--today{font-weight:700;opacity:1}.habits__dates{display:flex;gap:var(--gap);width:100%}.habits__date{align-items:center;display:flex;flex-shrink:0;font-size:16px;justify-content:center;opacity:.25;width:var(--size)}.habits__date--today{font-weight:700;opacity:1}.habits__new{align-items:center;aspect-ratio:1;background:var(--color-background);border:4px solid;border-radius:100px;color:var(--color);display:flex;flex-shrink:0;font-size:calc(var(--size)/2);justify-content:center;left:var(--space-xs);line-height:1em;opacity:.5;position:sticky;width:var(--size);z-index:10}.dragdrop--ghost{opacity:0}.dragdrop--dragging{overflow:hidden;width:100vw}.toolbar{background:var(--color-background2);border-radius:var(--radius);bottom:var(--space);box-shadow:var(--shadow);display:flex;flex-grow:0;flex-shrink:0;gap:var(--space-xs);left:50%;max-width:600px;padding:var(--space-xs) var(--space-sm);position:fixed;transform:translateX(-50%);z-index:100}.toolbar__button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;border-radius:var(--radius-sm);color:var(--color2);flex-basis:1;flex-grow:1;flex-shrink:1;font-family:inherit;font-size:var(--size-font-icon);font-weight:400;min-height:var(--size);padding:15px 30px}.toolbar__button:active{transform:translateY(1px)}.toolbar__button--active{color:var(--color)}[data-current-screen=habit] .toolbar,[data-current-screen=reset] .toolbar,[data-current-screen=signin] .toolbar,[data-current-screen=signup] .toolbar{display:none}@media (max-width:699px){.toolbar{--margin:30px;bottom:var(--margin);max-width:none;width:calc(100vw - var(--margin)*2)}.toolbar__button{padding:15px}}.icons__container{display:flex;flex-wrap:wrap;gap:var(--space-sm)}.icons__input{display:none}.icons__icon{align-items:center;aspect-ratio:1;background:var(--color-background2);border-radius:200px;display:flex;font-size:calc(var(--size)/2.5);justify-content:center;width:var(--size)}.icons :checked+.icons__icon{border:4px solid}.colors{display:flex;flex-wrap:wrap;gap:var(--space-xs);justify-content:flex-start}.colors :checked+.colors__swatch{border:4px solid}.colors :checked+.colors__swatch:after{color:var(--color);content:"\f00c";font-family:var(--font-icon);font-size:20px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.colors__color{flex:1}.colors__swatch{aspect-ratio:2;background:var(--color);border-radius:var(--radius-sm);height:var(--space);position:relative;width:100%}.colors__input{display:none}@media screen and (max-width:699px){.colors__swatch{height:calc(var(--space)*2)}}form{gap:var(--space-sm);position:relative}.form__group,form{display:flex;flex-direction:column}.form__group{gap:var(--space-xs)}input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:4px solid var(--color-input-background);border-radius:var(--radius-sm);color:var(--color-input);font-family:inherit;font-size:var(--size-font-lg);outline:none;padding:var(--space-sm) var(--space-sm)}button{background:transparent;color:inherit;font-family:inherit;font-size:inherit}.button,button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none}.button{background:var(--color-button);border-radius:var(--radius-sm);color:var(--color-background);font-weight:700;padding:var(--space-sm) var(--space-sm);text-align:center}.button--small{width:-moz-fit-content;width:fit-content}.button--warning{background:transparent;color:var(--color-warning)}fieldset{border:none}input[type=text]{font-family:inherit;outline:none}.input--title{background:var(--color-background);color:inherit;font-size:32px;padding:var(--space-xs);width:100%}.input--title,.select{border-radius:var(--radius-sm);font-weight:700}.select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-input-background);border:none;color:var(--color-input);font-family:inherit;font-size:var(--size-font);outline:none;padding:var(--space-xs) var(--space-sm)}.modal{height:100vh;left:0;padding:var(--space);position:absolute;top:0;width:100vw;z-index:100}.modal,.modal__container{background:var(--color-background)}.modal__container{border-radius:var(--radius);margin:0 auto;max-width:600px;padding:var(--space) var(--space) var(--space-xl);position:relative}.modal__actions{border-top:1px solid var(--color-background);display:flex;flex-direction:column;gap:var(--space-sm)}.modal__action{background:var(--color-button);border-radius:var(--radius-sm);color:var(--color-background2);flex-grow:1;font-size:var(--size-font);font-weight:700;line-height:1em;padding:var(--space-sm) var(--space-sm);text-align:center}.modal__action--secondary{background:transparent;border:2px solid;color:inherit}.modal__action--warning{background:transparent;color:var(--color-warning)}@media screen and (max-width:699px){.modal{padding:0}.modal__container{border:none;border-radius:0;height:100vh;max-width:none;width:100vw}:root{--space:20px}}.nav{gap:var(--gap);justify-content:space-between;left:50%;padding:var(--space-xs) var(--space);position:fixed;top:0;transform:translateX(-50%);z-index:100}.nav,.nav__month{align-items:center;display:flex}.nav__month{font-size:var(--size-font-sm);font-weight:400;height:var(--size);letter-spacing:.2em;padding:0 var(--space-sm);text-align:center;text-transform:uppercase}.nav__button,.nav__month{background:var(--color-background2);border-radius:200px}.nav__button{aspect-ratio:1;width:var(--size)}@media (max-width:699px){.nav{width:100vw}}.theme{display:flex}.theme__option{flex-grow:1}.theme__label{border-radius:var(--radius-sm);display:flex;flex-direction:column;font-weight:700;gap:5px;padding:var(--space-xs) var(--space-sm);text-align:center}.theme__input{display:none}.theme__input:checked+.theme__label{background:var(--color);color:var(--color-background)}.viewers{flex-direction:column}.viewers,.viewers__viewer{display:flex;gap:var(--space-xs)}.viewers__viewer{background:var(--color-background);border-radius:var(--radius-sm);justify-content:space-between;padding:var(--space-xs) var(--space-xs) var(--space-xs) var(--space-sm)}.viewers__name{font-size:var(--size-font-lg);font-weight:700}.viewers__remove{align-items:center;background:var(--color-background);border-radius:var(--radius-sm);display:flex;justify-content:center;line-height:1em;padding:0 var(--space-xs)}