*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--colorBackgroundPrimary:#fff;--colorBackgroundSecondary:#f2f2f7;--colorBackgroundSheet:#fff;--colorTypePrimary:#000;--colorTypeSecondary:#c7c7cc;--colorTypeContrast:#fff;--colorThumb:#fff;--colorAccent:#5ac8fa;--colorClear:#ff3b30;--colorConfirm:#34c759;--colorBackdrop:#00000059;--opacityActive:.75;--scaleHover:scale(1.05);--scaleActive:scale(.95);--animation:.35s;--base:1rem;--multiplier:1.2;--base-large-1:calc(var(--base) * pow(var(--multiplier), 1));--base-large-2:calc(var(--base) * pow(var(--multiplier), 2));--base-large-3:calc(var(--base) * pow(var(--multiplier), 3));--base-large-4:calc(var(--base) * pow(var(--multiplier), 4));--base-large-5:calc(var(--base) * pow(var(--multiplier), 5));--base-small-1:calc(var(--base) / pow(var(--multiplier), 1));--base-small-2:calc(var(--base) / pow(var(--multiplier), 2));--base-small-3:calc(var(--base) / pow(var(--multiplier), 3));--base-small-4:calc(var(--base) / pow(var(--multiplier), 4));--base-small-5:calc(var(--base) / pow(var(--multiplier), 5))}header,nav,main,section,aside,footer{width:100%;max-width:390px}html{background:var(--colorBackgroundPrimary);min-height:100dvh;max-height:100dvh;color:var(--colorTypePrimary);font-family:sans-serif;font-size:var(--base)}body{min-height:inherit;max-height:inherit;width:100%;padding:var(--base);align-items:center;gap:var(--base-large-3);flex-direction:column;display:flex}header{display:inherit}header.main{align-items:center;gap:var(--base)}main{display:inherit;gap:inherit;flex-direction:column}section{display:inherit;flex-direction:inherit;gap:var(--base-large-1)}nav.calendar{display:inherit;text-align:center;color:var(--colorTypeSecondary);justify-content:space-between;align-items:center;font-weight:500}section.calendar{background:var(--colorBackgroundSecondary);padding:var(--base-large-2);border-radius:var(--base-large-2)}.calendar-grid,.days-of-week{gap:var(--base-small-5);grid-template-columns:repeat(7,1fr);display:grid}.days-of-week{text-align:center;font-size:var(--base-small-2);color:var(--colorTypeSecondary);text-transform:uppercase;cursor:default;font-weight:600}.breakdown-line{height:calc(var(--base) / 8);border-radius:calc(var(--base) / 8);gap:calc(var(--base) / 8);display:flex;overflow:hidden}.breakdown-line .segment{border-radius:calc(var(--base) / 8);min-width:calc(var(--base) / 4);transition:flex var(--animation) ease}.breakdown-line .empty{background:var(--colorTypeSecondary);flex:1}.calendar-day{aspect-ratio:1}.calendar-day:not(.empty){border-radius:var(--base-small-3);cursor:pointer;transition:transform var(--animation), filter var(--animation);font-size:var(--base-small-1);background:0 0;border:none;justify-content:center;align-items:center;display:flex;position:relative}.calendar-day:not(.empty):hover{transform:var(--scaleHover)}.calendar-day:not(.empty):active{transform:var(--scaleActive)}.calendar-day.is-today span{font-weight:600}.today-dot{top:calc(var(--base) / 4);width:calc(var(--base) / 4);height:calc(var(--base) / 4);background:var(--colorAccent);pointer-events:none;border-radius:50%;position:absolute;left:50%;transform:translate(-50%)}.medicine-marker{top:calc(var(--base) / -2);right:calc(var(--base) / -2);width:var(--base);height:var(--base);background:var(--colorAccent);border:calc(var(--base) / 4) solid var(--colorBackgroundSecondary);pointer-events:none;border-radius:50%;position:absolute}.backdrop{pointer-events:none;z-index:1;transition:background var(--animation);position:fixed;inset:0}.backdrop.open{background:var(--colorBackdrop);pointer-events:all}aside.sheet{background:var(--colorBackgroundSheet);border-radius:var(--base-large-3) var(--base-large-3) 0 0;z-index:2;width:100%;max-height:100dvh;transition:transform var(--animation);padding-bottom:env(safe-area-inset-bottom,var(--base));flex-direction:column;display:flex;position:fixed;bottom:0;left:50%;transform:translate(-50%)translateY(105%)}aside.sheet.open{transform:translate(-50%)translateY(0)}.pull-wrapper{padding:var(--base);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;flex-shrink:0;justify-content:center;display:flex}.pull-wrapper:active{cursor:grabbing}.pull-bar{width:var(--base-large-5);height:calc(var(--base) / 4);border-radius:calc(var(--base) / 8);background:var(--colorTypeSecondary)}section.sheet{padding:var(--base) var(--base-large-3) var(--base-large-3);overscroll-behavior:contain;overflow-y:auto}header.sheet{flex-direction:inherit;gap:calc(var(--base) / 8)}.intensity-grid{gap:var(--base-small-5);grid-template-columns:repeat(auto-fit,minmax(60px,1fr));display:grid}button.intensity span{font-size:var(--base-small-1);font-weight:500}.toggle{width:calc(var(--base) * 2.5 + var(--base) / 6);height:calc(var(--base) * 1.25 + var(--base) / 3);background:var(--colorTypeSecondary);transition:background var(--animation);border-radius:13px;position:relative}.thumb{top:calc(var(--base) / 6);left:calc(var(--base) / 6);width:calc(var(--base) * 1.25);height:calc(var(--base) * 1.25);background:var(--colorThumb);transition:transform var(--animation) cubic-bezier(.35, 1.3, .65, 1);border-radius:50%;position:absolute}button.medicine.on .thumb{transform:translateX(calc(var(--base) * 1.25 - var(--base) / 6))}button.medicine.on .toggle{background:var(--colorAccent)}.medicine-list{gap:var(--base-small-2);flex-direction:column;display:flex}.medicine-list .entry{align-items:center;gap:var(--base-small-1);border-bottom:1px solid var(--colorBackgroundSecondary);min-height:38px;display:flex}.medicine-list .entry:last-of-type{border-bottom:none}select.medicine{font-size:var(--base);cursor:pointer;text-overflow:ellipsis;background:0 0;border:none;outline:none;flex:1;min-width:0;font-weight:500}input.time{color:var(--colorTypeSecondary);cursor:pointer;text-align:right;background:0 0;border:none;outline:none;font-family:inherit}input.time:focus{color:var(--colorTypePrimary)}.confirm-screen{background:var(--colorBackdrop);z-index:3;transition:background var(--animation);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.confirm-screen .message{background:var(--colorBackgroundSheet);border-radius:var(--base-large-1);padding:var(--base-large-2);gap:var(--base);flex-direction:column;width:100%;max-width:300px;display:flex}.confirm-screen .message p{text-align:center}.confirm-screen .buttons{gap:var(--base-small-1);display:flex}.swatch{width:var(--base-large-1);height:var(--base-large-1);border-radius:50%}.settings-item-row{align-items:center;gap:var(--base-small-1);padding:var(--base-small-2) 0;border-bottom:1px solid var(--colorBackgroundSecondary);min-height:44px;display:flex}.settings-item-row:last-child{border-bottom:none}.settings-item-name{font-size:var(--base);text-overflow:ellipsis;white-space:nowrap;flex:1;font-weight:500;overflow:hidden}.settings-item-placeholder{color:var(--colorTypeSecondary);font-style:normal}.settings-level-block{border-bottom:1px solid var(--colorBackgroundSecondary);flex-direction:column;display:flex}.settings-level-block:last-of-type{border-bottom:none}.settings-level-row{align-items:center;gap:var(--base-small-1);padding:var(--base-small-2) 0;min-height:44px;display:flex}.settings-row-actions{align-items:center;gap:var(--base-small-3);flex-shrink:0;display:flex}.settings-level-block.dragging,.settings-item-row.dragging{opacity:.4;border-radius:var(--base-small-3);box-shadow:0 2px 12px #0000001f}.level-name-input{font-family:inherit;font-size:var(--base);color:var(--colorTypePrimary);padding:var(--base-small-3) 0;cursor:pointer;min-width:0;transition:border-color var(--animation);background:0 0;border:none;border-bottom:1.5px solid #0000;outline:none;flex:1;font-weight:500}.level-name-input[readonly]{cursor:default;color:var(--colorTypeSecondary)}.level-name-input.editing{border-bottom-color:var(--colorAccent);cursor:text}.color-picker{gap:var(--base-small-1);padding:var(--base-small-2) 0 var(--base-small-1);padding-left:calc(28px + var(--base-small-1));flex-wrap:wrap;display:flex}.picker{cursor:pointer;transition:transform var(--animation), border-color var(--animation);border:2.5px solid #0000}.picker:active{transform:scale(.88)}.picker.active{border-color:var(--colorTypePrimary);transform:scale(1.12)}.med-add-row{align-items:center;gap:var(--base-small-1);padding:var(--base-small-2) 0;border-bottom:1px solid var(--colorBackgroundSecondary);min-height:44px;display:flex}.toast-wrap{bottom:calc(env(safe-area-inset-bottom,0px) + var(--base-large-2));z-index:300;pointer-events:none;justify-content:center;display:flex;position:fixed;left:50%;transform:translate(-50%)}.toast{background:var(--colorTypePrimary);color:var(--colorTypeContrast);font-family:inherit;font-size:var(--base-small-1);padding:var(--base-small-2) var(--base-large-1);white-space:nowrap;animation:toast-in var(--animation) cubic-bezier(.35, 1.3, .65, 1) both;border-radius:999px;font-weight:500}@keyframes toast-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}h1{font-size:var(--base-large-3);cursor:default;flex:1;font-weight:600}h2{font-size:var(--base-large-2);font-weight:600}h3{font-size:var(--base);font-weight:600}h4{font-size:var(--base);color:var(--colorTypeSecondary);cursor:default;font-weight:500}button{cursor:pointer;font-family:inherit;font-size:var(--base);-webkit-appearance:none;color:inherit;background:0 0;border:none}svg{width:100%;height:100%;display:block}button.settings:hover,button.settings:active,button.arrow:active,button.clear:active,button.add:hover,button.back:hover,button.today:hover,button.add:active,button.back:active,button.today:active,button.action:active,button.medicine:active,button.cancel:active,button.confirm:active{opacity:var(--opacityActive)}button.cancel:hover,button.confirm:hover{transform:var(--scaleHover)}button.settings{width:var(--base-large-2);height:var(--base-large-2);transition:opacity var(--animation);justify-content:center;align-items:center;display:flex}button.arrow{width:var(--base);height:var(--base);color:inherit;transition:opacity var(--animation);justify-content:center;align-items:center;display:flex}button.intensity{aspect-ratio:1;justify-content:center;align-items:center;gap:var(--base-small-2);border-radius:var(--base-small-2);transition:all var(--animation);flex-direction:column;display:flex}button.clear{width:100%;color:var(--colorClear);text-align:center;padding:var(--base-small-2) 0 0;transition:opacity var(--animation);font-weight:400;display:block}button.add,button.back,button.today{align-items:center;gap:var(--base-small-4);color:var(--colorAccent);transition:opacity var(--animation);font-weight:500;display:flex}button.add svg,button.back svg{width:var(--base);height:var(--base)}button.grip{width:var(--base);height:var(--base);cursor:grab;color:var(--colorTypeSecondary);touch-action:none;flex-shrink:0;align-items:center;display:flex}button.grip:active{cursor:grabbing}button.action{width:var(--base-small-1);height:var(--base-small-1);transition:opacity var(--animation), color var(--animation);align-items:center;display:flex}button.action.delete{color:var(--colorClear)}button.action.submit{color:var(--colorConfirm)}button.swatch.selected{transition:transform var(--animation)}button.swatch.selected:not(:disabled):active{transform:scale(.88)}button.swatch.selected:disabled{cursor:default;opacity:.5}button.medicine{width:100%;transition:opacity var(--animation);justify-content:space-between;align-items:center;display:flex}button.cancel,button.confirm{border-radius:var(--base-small-1);padding:var(--base-small-1);transition:opacity var(--animation), transform var(--animation);flex:1}button.cancel{background:var(--colorBackgroundSecondary);font-weight:500}button.confirm{background:var(--colorClear);color:var(--colorTypeContrast);font-weight:600}.loading-screen,.login-screen{flex-direction:column;justify-content:center;align-items:center;gap:16px;min-height:100dvh;display:flex}.login-screen h1{flex:0;font-size:2rem}.login-screen p{color:var(--color-text-secondary)}button.sign-in{color:#fff;cursor:pointer;background:#000;border:none;border-radius:12px;padding:12px 24px;font-size:1rem;font-weight:500}button.sign-out{font-size:var(--base-small-1);color:var(--colorClear);text-align:left;cursor:pointer;background:0 0;border:none}.calendar-day.has-color,.intensity{background:color-mix(in srgb, var(--day-color) 10%, transparent)}.intensity.active{background:color-mix(in srgb, var(--day-color) 35%, transparent)}