:root{color-scheme:dark}:root{--rp-base: #191724;--rp-surface: #1f1d2e;--rp-overlay: #26233a;--rp-muted: #6e6a86;--rp-subtle: #908caa;--rp-text: #e0def4;--rp-love: #eb6f92;--rp-gold: #f6c177;--rp-rose: #ebbcba;--rp-pine: #31748f;--rp-foam: #9ccfd8;--rp-iris: #c4a7e7;--rp-highlight-low: #21202e;--rp-highlight-med: #403d52;--rp-highlight-high: #524f67;--rp-moon-base: #232136;--rp-moon-surface: #2a273f;--rp-moon-overlay: #393552;--rp-moon-muted: #6e6a86;--rp-moon-subtle: #908caa;--rp-moon-text: #e0def4;--rp-moon-love: #eb6f92;--rp-moon-gold: #f6c177;--rp-moon-rose: #ea9a97;--rp-moon-pine: #3e8fb0;--rp-moon-foam: #9ccfd8;--rp-moon-iris: #c4a7e7;--rp-moon-highlight-low: #2a283e;--rp-moon-highlight-med: #44415a;--rp-moon-highlight-high: #56526e;--rp-dawn-base: #faf4ed;--rp-dawn-surface: #fffaf3;--rp-dawn-overlay: #f2e9e1;--rp-dawn-muted: #9893a5;--rp-dawn-subtle: #797593;--rp-dawn-text: #575279;--rp-dawn-love: #b4637a;--rp-dawn-gold: #ea9d34;--rp-dawn-rose: #d7827e;--rp-dawn-pine: #286983;--rp-dawn-foam: #56949f;--rp-dawn-iris: #907aa9;--rp-dawn-highlight-low: #f4ede8;--rp-dawn-highlight-med: #dfdad9;--rp-dawn-highlight-high: #cecacd}:root{--clr-base: var(--rp-moon-base);--clr-surface: var(--rp-moon-surface);--clr-overlay: var(--rp-moon-overlay);--clr-muted: var(--rp-moon-muted);--clr-subtle: var(--rp-moon-subtle);--clr-text: var(--rp-moon-text);--clr-love: var(--rp-moon-love);--clr-gold: var(--rp-moon-gold);--clr-rose: var(--rp-moon-rose);--clr-pine: var(--rp-moon-pine);--clr-foam: var(--rp-moon-foam);--clr-iris: var(--rp-moon-iris);--clr-highlight-low: var(--rp-moon-highlight-low);--clr-highlight-med: var(--rp-moon-highlight-med);--clr-highlight-high: var(--rp-moon-highlight-high)}*{box-sizing:border-box}.flex{flex:1}.subtle{color:var(--clr-subtle)}.italic{font-style:italic}.bold{font-weight:700}.ellipsis{display:block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}body{background-color:var(--clr-base);color:var(--clr-text);font-family:sans-serif}main{width:100%;max-width:640px;margin:0 auto;padding:8px}header{display:flex;align-items:center}header h1{flex:1}footer{margin-top:128px;color:var(--clr-subtle)}footer summary{margin-bottom:8px}a{color:var(--clr-foam)}input{font-size:1rem}button,a.buttonLike{flex:1;padding:8px 16px;height:48px;background-color:var(--clr-highlight-med);border:0;color:var(--clr-text);cursor:pointer}button:hover,a.buttonLike:hover{background-color:var(--clr-highlight-high)}button:disabled,a.buttonLike:disabled{pointer-events:none;color:var(--clr-muted)}button svg,a.buttonLike svg{width:16px;height:16px;transform:translateY(2px)}button.close,a.buttonLike.close{float:right;width:48px;height:48px;padding:0;margin-top:-4px;margin-right:-4px;border-radius:48px}a.buttonLike{display:flex;align-items:center;justify-content:center}a.buttonLike:disabled{pointer-events:none;color:var(--clr-muted)}a.buttonLike svg{transform:translateY(0)}input,select{padding:2px 8px;height:48px;background-color:var(--clr-highlight-low);border:solid 1px var(--clr-highlight-med)}textarea{padding:2px 8px;min-height:64px;background-color:var(--clr-highlight-low);border:solid 1px var(--clr-highlight-med);font-family:sans-serif;resize:vertical}form label{display:block;margin-bottom:4px}form input,form textarea,form button{width:100%;margin-bottom:16px}form input[type=text],form input[type=number]{flex:1 1 0;min-width:5em}form button{flex:0 0 auto;height:48px}form.oneline{display:flex;flex-wrap:wrap}form.oneline button{width:5em}form .categoryRadioWrapper{display:flex;gap:8px;margin-bottom:16px}form .categoryRadioWrapper input[type=radio]{display:none;position:relative;width:32px;height:32px;margin:0}form .categoryRadioWrapper input[type=radio]+label{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;color:var(--clr-base);border-radius:40px;cursor:pointer}form .categoryRadioWrapper input[type=radio]+label span{opacity:0;transform:translateY(3px)}form .categoryRadioWrapper input[type=radio]+label:hover span{opacity:.5}form .categoryRadioWrapper input[type=radio]:checked+label{border-color:var(--clr-text)}form .categoryRadioWrapper input[type=radio]:checked+label span{opacity:1}form .categoryRadioWrapper input[type=radio][value="0"]+label{background-color:var(--clr-highlight-high);color:var(--clr-text)}form .categoryRadioWrapper input[type=radio][value="1"]+label{background-color:var(--clr-iris)}form .categoryRadioWrapper input[type=radio][value="2"]+label{background-color:var(--clr-foam)}form .categoryRadioWrapper input[type=radio][value="3"]+label{background-color:var(--clr-gold)}form .categoryRadioWrapper input[type=radio][value="4"]+label{background-color:var(--clr-love)}nav div{display:flex;justify-content:end;gap:8px;height:48px}nav div button{flex:0 0 48px;border-radius:48px}nav div button.active{color:var(--clr-base);background-color:var(--clr-foam)}dialog{max-width:360px;width:100%;background-color:var(--clr-overlay);border:0;border-radius:16px}dialog::backdrop{background-color:#000;opacity:.5}dialog form h3:first-child{margin-top:0}.buttonCollection{display:flex;width:100%;height:48px;margin-bottom:8px}.buttonCollection button,.buttonCollection a{flex:1;padding-left:4px;padding-right:4px}.buttonCollection button.main,.buttonCollection a.main{flex:0 0 48px;border-radius:100%;margin-right:16px}.buttonCollection button.active,.buttonCollection button.active.mark,.buttonCollection a.active,.buttonCollection a.active.mark{color:var(--clr-base);background-color:var(--clr-gold)}.buttonCollection button.mark,.buttonCollection a.mark{color:var(--clr-gold);font-weight:700}.timeline{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.timeline p:first-child{margin-top:0}.timeline p:last-child{margin-bottom:0}.timeline>button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:12px;background-color:var(--clr-overlay);border-radius:4px}.timeline>button svg{width:24px;height:24px}.timeline>button:hover{background-color:var(--clr-highlight-med)}.appointment{display:flex;gap:8px;padding:8px;background-color:var(--clr-overlay);border-radius:4px}.appointment .appointmentProgress{flex:0 0 6px;background-color:var(--clr-highlight-high);border-radius:3px;overflow:hidden}.appointment.inProgress .appointmentProgress{position:relative;background-color:var(--clr-pine)}.appointment.inProgress .appointmentProgress>div{position:absolute;top:0;width:100%;background-color:var(--clr-gold)}.appointment.inProgress.skip{background-color:var(--clr-surface)!important;opacity:.6!important}.appointment.inProgress.skip .appointmentTitle{text-decoration:line-through}.appointment.inProgress.past{background-color:var(--clr-surface);opacity:.6}.appointment.inProgress.current .appointmentProgress>div:after{content:"";position:absolute;top:0;left:0;right:0;animation:playing_vertical 2s ease-out;background-color:#fff}.appointment .appointmentWrapper{flex:1 1 100%;overflow:hidden}.appointment .appointmentContent{display:flex;gap:24px}.appointment .appointmentTitle{overflow:hidden}.appointment .appointmentInformation{flex:1;overflow:hidden}.appointment .appointmentInformation span{display:block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.appointment[data-is-open=true] .appointmentTitle span,.appointment[data-is-open=true] .appointmentInformation span{overflow:visible;white-space:normal}.appointment .appointmentTitle{display:flex}.appointment .appointmentAddress,.appointment .appointmentPhone{color:var(--clr-foam);text-decoration:none}.appointment .appointmentAddress:hover,.appointment .appointmentPhone:hover{color:var(--clr-gold)}.appointment .appointmentAddress,.appointment .appointmentPhone,.appointment .appointmentNotes{display:flex;gap:4px;margin:0 0 4px}.appointment .appointmentAddress .icon,.appointment .appointmentPhone .icon,.appointment .appointmentNotes .icon{flex:0 0 16px}.appointment .appointmentAddress svg,.appointment .appointmentPhone svg,.appointment .appointmentNotes svg{width:16px;height:16px;transform:translateY(2px)}.appointment .appointmentButtons{display:flex;justify-content:end;gap:8px;height:48px;margin-top:8px}.appointment .appointmentButtons button,.appointment .appointmentButtons a.buttonLike{flex:0 0 48px;border-radius:48px}.appointment .appointmentButtons button:disabled{opacity:.4}.appointment .appointmentCategory{display:block;width:24px;height:24px;margin-left:8px;background-color:var(--clr-highlight-high);border-radius:24px}.appointment[data-category="1"] .appointmentCategory{background-color:var(--clr-iris)}.appointment[data-category="2"] .appointmentCategory{background-color:var(--clr-foam)}.appointment[data-category="3"] .appointmentCategory{background-color:var(--clr-gold)}.appointment[data-category="4"] .appointmentCategory{background-color:var(--clr-love)}.timestamp{margin-right:8px;color:var(--clr-gold);font-weight:700;border-radius:4px}.playing{position:relative}.playing:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;animation:playing 2s ease-out infinite;background-color:#fff;border-radius:100%}@keyframes playing{0%{opacity:.5;transform:scale(0)}40%{opacity:0;transform:scale(1)}to{opacity:0;transform:scale(1)}}@keyframes playing_vertical{0%{opacity:.5;height:0%}40%{opacity:0;height:100%}to{opacity:0;height:100%}}