html,body{margin:0;padding:0}*{box-sizing:border-box}:root{--quicksand:"Quicksand", sans-serif;--courgette:"Courgette", sans-serif;font:18px/145% var(--quicksand);letter-spacing:.2px}.app-layout{background-color:var(--color-bg);width:100%;min-height:100dvh;color:var(--color-font);display:flex;position:relative}.main-content{flex:auto;min-width:0;min-height:100dvh;padding:clamp(16px,3vw,32px);overflow-x:auto}.app-layout button{color:inherit}.app-layout.sidebar-collapsed .main-content{padding-left:max(72px,3vw)}.mobile-header{display:contents}.sidebar{border-right:2px solid var(--color-sidebar-border);background:var(--color-sidebar-bg);flex-direction:column;align-self:flex-start;width:clamp(220px,20vw,320px);height:100dvh;padding:40px 20px 20px;transition:width .2s,padding .2s,border-width .2s;display:flex;position:sticky;top:0;overflow:hidden auto}.sidebar-toggle{z-index:10;color:inherit;cursor:pointer;background:0 0;border:0;align-self:flex-start;margin:16px 0 0 16px;padding:8px;font-size:28px;line-height:1;position:fixed}.sidebar.collapsed{border-right-width:0;width:0;padding-left:0;padding-right:0}.sidebar nav{flex-direction:column;gap:10px;display:flex}.menal-title{cursor:pointer}.sidebar nav button{text-align:left;cursor:pointer;font-family:var(--quicksand);background:0 0;border:none;padding:10px;font-size:18px}.sidebar button:hover{background:var(--color-sidebar-button-hover)}.sidebar-footer{flex-direction:column;gap:12px;margin-top:auto;display:flex}.logout-button{background-color:var(--color-sidebar-bg);width:64px;height:28px;font-family:var(--quicksand);border:1px solid #d3d3d3;border-radius:999px;font-size:14px}.theme-switch{background:var(--color-sidebar-bg);cursor:pointer;border:1px solid #d3d3d3;border-radius:999px;justify-content:center;align-items:center;width:64px;height:28px;padding:3px;transition:background .2s;display:flex}.theme-switch.dark{background:#2f3542}@media (width<=700px){.app-layout{display:block}.main-content,.app-layout.sidebar-collapsed .main-content{width:100%;min-width:0;padding:16px;overflow-x:hidden}.mobile-header{z-index:30;border-bottom:1px solid var(--color-sidebar-border);background:var(--color-sidebar-bg);align-items:center;width:100%;height:64px;display:flex;position:sticky;top:0;box-shadow:0 2px 8px #0000001a}.sidebar{z-index:20;border-right:0;width:100%;height:100dvh;padding:64px 20px 20px;transition:transform .2s;position:fixed;inset:0;transform:translate(0)}.sidebar.collapsed{border-right-width:0;width:100%;padding:64px 20px 20px;transform:translate(-100%)}.sidebar-toggle{margin:0 0 0 12px;position:static}}.landing-page-header{background-color:var(--color-sidebar-bg);border-bottom:1px solid var(--color-sidebar-border);justify-content:space-between;align-items:center;padding:1rem 5rem;display:flex;box-shadow:0 2px 10px #17222114}.landing-page-header .menal-title{color:inherit;font:inherit;cursor:pointer;background:0 0;border:0;align-items:center;gap:.625rem;padding:0;display:flex}.landing-page-header .menal-title img{width:2rem;height:2rem}.landing-page-header .menal-title span{font-size:1.75rem;font-weight:700}.registration{align-items:center;gap:1rem;display:flex}.registration button{border:2px solid var(--color-write-log-button);min-height:2.5rem;font:inherit;cursor:pointer;border-radius:.625rem;padding:.625rem 1rem;font-size:.9rem;font-weight:700;transition:background-color .15s,color .15s,transform .15s,box-shadow .15s}.sign-in-button{color:#209c55;background-color:#0000}.sign-in-button:hover{background-color:#2ecc711f}.register-button{background-color:var(--color-write-log-button);color:#10261a;box-shadow:0 4px 12px #2ecc713d}.register-button:hover{background-color:#27b863;border-color:#27b863}.registration button:hover{transform:translateY(-1px)}.registration button:focus-visible,.landing-page .menal-title:focus-visible{outline-offset:3px;outline:3px solid #2ecc7159}@media (width<=48rem){.landing-page-header{gap:1rem;padding:.875rem 1.25rem}.landing-page .menal-title{flex-shrink:0;gap:.5rem}.landing-page .menal-title img{width:1.75rem;height:1.75rem}.landing-page .menal-title span{font-size:1.4rem}.registration{gap:.5rem}.registration button{white-space:nowrap;min-height:2.25rem;padding:.45rem .7rem;font-size:.8rem}.registration .theme-switch{width:2.5rem;min-width:2.5rem;padding:0}}@media (width<=31rem){.landing-page-header{flex-wrap:wrap;justify-content:center;padding:.75rem 1rem}.landing-page .menal-title,.registration{justify-content:center;width:100%}.registration button{flex:0 auto}}.login-page{background:var(--color-bg);min-height:100vh;color:var(--color-font);flex-direction:column;justify-content:center;align-items:center;display:flex}.login-card{background:var(--color-db-card-bg);border:1px solid var(--color-db-card-border);border-radius:18px;flex-direction:column;gap:14px;width:360px;padding:32px;display:flex}.login-card h1,.login-card p{margin:0}.login-card input{border:1px solid var(--color-border);border-radius:10px;padding:12px 14px;font-family:inherit;font-size:15px}.login-card button{color:var(--color-font);cursor:pointer;background:#2ecc71;border:none;border-radius:10px;padding:12px;font-family:inherit;font-size:16px}.register-text{text-align:center;margin-top:20px;font-size:14px}.register-link{color:#2ecc71;cursor:pointer;font-weight:600}.register-link:hover{text-decoration:underline}.error-message{color:#0000;opacity:0;background:0 0;border:1px solid #0000;border-radius:8px;align-items:center;min-height:38px;padding:8px 12px;font-size:14px;line-height:20px;transition:opacity .15s,background-color .15s,border-color .15s;display:flex}.error-message--visible{color:#b42318;opacity:1;background:#fef3f2;border-color:#fecdca}:root{--surface-bg:white;--surface-card:white;--surface-border:lightgray;--color-border:lightgray;--color-bg:var(--surface-card);--color-sidebar-bg:#fffbf7;--color-sidebar-border:#ddd;--color-sidebar-button-hover:#eaeaea;--color-font:black;--color-db-card-bg:var(--surface-card);--color-db-card-border:lightgray;--color-write-log-button-font:var(--surface-card);--color-write-log-button:#2ecc71;--color-parameter-selector-bg:var(--surface-card);--color-parameter-selector-font:black;--color-year-button-bg:var(--surface-card);--color-year-button-border:lightgray;--color-week-button-bg:#var(--surface-card);--color-week-button-border:lightgray;--color-week-button-hover:#eaeaea;--color-week-button-active-font:var(--surface-card);--color-journal-entry-bg:var(--surface-card);--color-journal-entry-border:lightgray;--color-date-selector-bg:var(--surface-card);--color-date-selector-border:lightgray;--color-date-arrow:var(--surface-card);--color-log-entry-bg:var(--surface-card);--color-heatmap-bg:var(--surface-card);--color-heatmap-border:lightgray;--color-year-buttons-bg:#var(--surface-card);--color-year-buttons-border:#d0d7de;--color-year-buttons-hover:#eaeaea;--color-year-select-bg:var(--color-sidebar-bg);--color-year-select-border:var(--color-sidebar-border);--color-name-input-bg:white;--color-name-input-border:lightgray;--color-calendar-rating-input-bg:var(--surface-card);--color-calendar-rating-input-border:var(--surface-border);--color-rating-buttons-bg:var(--surface-card);--color-rating-buttons-border:var(--surface-border);--color-scale-selector-bg:var(--surface-card);--color-scale-selector-border:var(--surface-border);--color-color-buttons-bg:var(--surface-card);--color-color-buttons-border:var(--surface-border);--color-calendar-preview-bg:var(--surface-card);--color-calendar-preview-border:var(--surface-border);--color-color-picker-button-border:var(--surface-border);--color-heatmap-preview-bg:var(--surface-card);--color-heatmap-preview-border:var(--surface-border)}.dark-mode{--surface-bg:#121212;--surface-card:#181818;--surface-border:#3a3a3a;--color-font:white;--color-bg:var(--surface-bg);--color-sidebar-bg:var(--surface-card);--color-sidebar-border:var(--surface-border);--color-sidebar-button-hover:#2a2a2a;--color-db-card-bg:var(--surface-card);--color-db-card-border:var(--surface-border);--color-write-log-button-font:black;--color-write-log-button:#2ecc71;--color-parameter-selector-bg:var(--surface-card);--color-parameter-selector-font:white;--color-year-button-bg:var(--surface-card);--color-year-button-border:var(--surface-border);--color-week-button-bg:var(--surface-card);--color-week-button-border:--surface-border;--color-week-button-hover:#2a2a2a;--color-week-button-active-font:black;--color-journal-entry-bg:var(--surface-card);--color-journal-entry-border:--surface-border;--color-date-selector-bg:var(--surface-card);--color-date-selector-border:--surface-border;--color-date-arrow:var(--surface-card);--color-log-entry-bg:var(--surface-card);--color-rating-container-bg:var(--surface-card);--color-rating-container-border:--surface-border;--color-heatmap-bg:var(--surface-card);--color-heatmap-border:var(--surface-border);--color-year-buttons-bg:var(--surface-card);--color-year-buttons-border:--surface-border;--color-year-buttons-hover:#2a2a2a;--color-year-select-bg:var(--surface-card);--color-year-select-border:var(--surface-border);--color-year-select-selected-bg:#2d4f7a;--color-year-select-selected-border:#4f8ef7;--color-name-input-bg:var(--surface-card);--color-name-input-border:var(--surface-border);--color-calendar-rating-input-bg:var(--surface-card);--color-calendar-rating-input-border:var(--surface-border);--color-rating-buttons-bg:var(--surface-card);--color-rating-buttons-border:var(--surface-border);--color-scale-selector-bg:var(--surface-card);--color-scale-selector-border:var(--surface-border);--color-color-buttons-bg:var(--surface-card);--color-color-buttons-border:var(--surface-border);--color-calendar-preview-bg:var(--surface-card);--color-calendar-preview-border:var(--surface-border);--color-color-picker-button-border:var(--surface-border);--color-heatmap-preview-bg:var(--surface-card);--color-heatmap-preview-border:var(--surface-border)}.register-page{background:var(--color-bg);min-height:100vh;color:var(--color-font);flex-direction:column;justify-content:center;align-items:center;display:flex}.register-card{background:var(--color-db-card-bg);border:1px solid var(--color-db-card-border);border-radius:18px;flex-direction:column;gap:14px;width:360px;padding:32px;display:flex}.register-card h1,.register-card p{margin:0}.register-card input{border:1px solid var(--color-border);border-radius:10px;padding:12px 14px;font-family:inherit;font-size:15px}.register-card button{color:var(--color-font);cursor:pointer;background:#2ecc71;border:none;border-radius:10px;padding:12px;font-family:inherit;font-size:16px}.login-text{text-align:center;margin-top:20px;font-size:14px}.login-link{color:#2ecc71;cursor:pointer;font-weight:600}.login-link:hover{text-decoration:underline}.landing-sidebar{z-index:20;background-color:#0000;flex-direction:column;width:12rem;padding:4rem 2rem 2rem;transition:transform .2s;display:flex;position:fixed;inset:0 auto 0 0;transform:translate(-100%)}.landing-sidebar.open{transform:translate(0)}.landing-sidebar nav{flex-direction:column;gap:1.25rem;display:flex;position:absolute;top:50%;left:2rem;right:2rem;transform:translateY(-50%)}.landing-sidebar nav button{color:var(--color-font);font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:.5rem;padding:.75rem}.landing-sidebar nav button:hover{background-color:var(--color-sidebar-button-hover)}.landing-sidebar-footer{margin-top:auto}.landing-sidebar-toggle{z-index:30;width:3rem;height:4rem;color:var(--color-font);font:inherit;cursor:pointer;background:0 0;border:0;padding:0;font-size:3.5rem;line-height:1;transition:left .2s;position:fixed;top:50%;left:0;transform:translateY(-50%)}.landing-sidebar-toggle.open{left:10.5rem}.landing-sidebar-toggle:focus-visible{outline-offset:2px;outline:3px solid #2ecc7159}@media (width<=700px){.landing-sidebar{z-index:40;background-color:var(--surface-bg);width:100%;padding:2rem}.landing-sidebar nav{align-items:center;width:min(16rem,100% - 4rem);left:50%;right:auto;transform:translate(-50%,-50%)}.landing-sidebar nav button{text-align:center;width:100%}.landing-sidebar-footer{justify-content:center;display:flex}.landing-sidebar-toggle{z-index:50}.landing-sidebar-toggle.open{left:calc(100% - 3rem)}}.landing-page{background-color:var(--surface-bg);min-height:100dvh;color:var(--color-font)}.landing-page-content{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:100dvh;padding:3rem;display:flex}.landing-page-title{white-space:nowrap;justify-content:center;align-items:baseline;gap:1.25rem;margin:0;font-size:clamp(1.75rem,2.4vw,2.75rem);font-weight:700;line-height:1.2;display:flex}.landing-page-name{color:var(--color-write-log-button);font-family:var(--courgette)}.landing-page-description{margin:4rem 0 0;font-size:1.35rem;font-weight:400}.landing-page-login-link{color:var(--color-font);-webkit-text-decoration-color:var(--color-write-log-button);text-decoration-color:var(--color-write-log-button);text-underline-offset:.35rem;margin-top:3rem;font-size:1rem;font-weight:500}.landing-page-login-link:hover{color:var(--color-write-log-button)}.landing-page-footer{color:var(--color-font);font-size:.8rem;position:fixed;bottom:1.5rem;left:50%;transform:translate(-50%)}@media (width<=700px){.landing-page-content{padding:2rem 1.25rem}.landing-page-title{white-space:normal;flex-direction:column;align-items:center;gap:.75rem;max-width:24rem;font-size:1.65rem}.landing-page-description{margin-top:3rem;font-size:1.1rem}.landing-page-login-link{margin-top:2.5rem}.landing-page-footer{text-align:center;width:100%;bottom:1rem}}