@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap");
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

:root {
  --background: #FFF;
  --text-emphatic: hsl(0 0% 1%);
  --text-primary: hsl(0 0% 12%);
  --text-secondary: hsl(0 0% 35%);
  --text-tertiary: hsl(0 0% 55%);
  --text-disabled: hsl(0 0% 70%);
  --text-inverted: #FFF;
  --text-on-accent: #FFF;
  --link: #0969da;
  --shading: 0,0,0;
  --hover: rgba(var(--shading),0.03);
  --font-h1: 2rem;
  --font-h2: 1.5rem;
  --font-h3: 1.25rem;
  --font-large: 1.1rem;
  --font-body: 15px;
  --font-sub: 0.875rem;
  --font-micro: 0.75rem;
  --color-icon: #212121;
  --color-red: #E65C5C;
  --color-green: #47B36B;
  --color-yellow: #FFDC34;
  --color-blue: #457AE6;
  --color-purple: #7859B3;
  --color-pink: #FF80BF;
  --color-white: #FFF;
  --color-green-light: #5CE6A1;
  --color-green-rgb: 71,179,107;
  --color-soft-grey: #F5F5F7;
  --accent-primary: #63ac70;
  --accent-primary-rgb: 99,172,112;
  --card: #FFF;
  --surface: #FFF;
  --button-disabled: rgba(var(--shading), 0.02);
  --tooltip: var(--accent-primary);
  --selection: var(--accent-primary);
  --scrim: rgba(0,0,0, 0.25);
  --surface-hover: rgba(0,0,0,0.05);
  --button: white;
  --light-text-on-dark: #FFF;
  --divider-primary: rgba(0,0,0,0.1);
  --divider-secondary: rgba(0,0,0,0.05);
  --shading-white: 255,255,255;
  --shading-inverted: 255,255,255;
  --shadow-tint-blue: 9,28,67;
  --icon-opacity: 0.75;
  --icon-opacity-disabled: 0.4;
  --shadow-popover: 0px 0px 4px rgba(0,0,0,0.05),
  	0px 0px 0px 1px rgba(0,0,0,0.12);
  --shadow-level2: 0px 0.5px 1px rgba(0, 0, 0, 0.05),
  	0px 2px 4px rgba(0, 0, 0, 0.03),
  	0px 0px 0px 1px rgba(0, 0, 0, 0.08);
  --shadow-btnComplete: 0px 1px 2px rgba(0, 0, 0, 0.03),
  	0px 2px 4px rgba(0, 0, 0, 0.02),
  	0px 0px 0px 1px rgba(0, 0, 0, 0.12);
  --shadow-level3: 0px 4px 8px rgba(0, 0, 0, 0.08),
  	0px 12px 24px -4px rgba(0, 0, 0, 0.08);
  --shadow-button: inset 0px 1px 0px 0px #fff,
  	0px 0px 0px 1px rgba(0,0,0,.08),
  	0px 1px 0px 0px rgba(0,0,0,.05),
  	0px 2px 4px 0px rgba(0,0,0,.03);
  --shadow-colored-button: 0px 2px 4px 0px rgba(0,0,0,.03);
  --radius-xsmall: 0.3em;
  --radius-small: 0.5em;
  --radius-mid: 0.75em;
  --radius-large: 1.25em;
  --line-height-body: 1.4;
  --weight-normal: 400;
  --weight-bold: 600;
  --letter-spacing-normal: 0em;
  --page-width: 560px;
  --sidebar-width: calc(100% - var(--page-width) - 16px - 16px - 32px);
  --safe-area-bottom: env(safe-area-inset-bottom);
  --safe-area-top: env(safe-area-inset-top);
  --timing-snappy: 0.1s;
  --timing-standard: 0.2s;
  --timing-long: 0.4s;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #121212;
    --text-emphatic: hsl(0 0% 100%);
  }
}
@media screen and (min-width: 640px) and (max-width: 984px) {
  :root {
    --page-width: max(60%, 420px);
    --sidebar-width: calc(100% - var(--page-width) - 16px - 16px - 16px);
  }
}
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -moz-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::-webkit-scrollbar {
  width: 8px;
  max-height: 8px;
}

::-webkit-scrollbar-thumb {
  background: rgba(var(--shading), 0.05);
  border: 1px solid rgba(0, 0, 0, 0);
  background-clip: padding-box;
  -webkit-transition: background-color var(--timing-snappy);
  transition: background-color var(--timing-snappy);
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(var(--shading), 0.08);
}

html {
  position: fixed;
  overflow: hidden;
  width: 100%;
  height: 100%;
  overscroll-behavior: none;
}

body {
  font-family: var(--font-family);
  font-feature-settings: "liga", "kern";
  font-style: normal;
  font-stretch: normal;
  font-size: var(--font-body);
  font-weight: var(--weight-normal);
  letter-spacing: var(--letter-spacing-normal);
  overflow: hidden;
  color: var(--text-primary);
  background-color: var(--background);
  touch-action: none;
  overscroll-behavior: none;
}

#react {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
}
#react > .loading {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}
#react > .loading .spinner {
  scale: 1.5;
}

#app {
  width: 100%;
  height: 100%;
  position: absolute;
}
#app > .wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  max-width: 984px;
  left: 50%;
  translate: calc(-50% - 12px) 0;
}

#app, .view {
  font-family: var(--font-family);
  background: var(--background);
  color: var(--text-primary);
}

h1 {
  font-size: var(--font-h1);
  font-weight: var(--weight-bold);
}

h2 {
  font-size: var(--font-h2);
  font-weight: var(--weight-bold);
}

h3 {
  font-size: var(--font-h3);
  font-weight: var(--weight-bold);
}

h4 {
  font-size: var(--font-body);
}

.button,
dialog button {
  line-height: 36px;
  background: var(--card);
  box-shadow: var(--shadow-level2);
  color: var(--text-primary);
  border-radius: var(--radius-small);
  border: none;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  touch-action: manipulation;
  font-size: var(--font-body);
  font-family: var(--font-family);
}
.button.hidden,
dialog button.hidden {
  display: none;
  opacity: 0;
}
.button.disabled, .button:disabled,
dialog button.disabled,
dialog button:disabled {
  box-shadow: none;
  background: var(--button-disabled);
  color: var(--text-disabled);
  pointer-events: none;
}

button {
  font-size: var(--font-body);
  font-family: var(--font-family);
}

.pill {
  line-height: 24px;
  border: 1px solid var(--text-tertiary);
  color: var(--text-tertiary);
  border-radius: 12px;
  padding: 0 8px;
  font-size: var(--font-sub);
}
.pill:hover {
  cursor: pointer;
  color: var(--text-primary);
  border-color: var(--text-primary);
  animation: pulse 2s ease-in-out infinite;
}

.icon {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
  transition: transform var(--timing-snappy);
}
.icon:active {
  transform: scale(0.85);
}
.icon.size24 {
  width: 24px;
  height: 24px;
  background-image: -webkit-image-set(url("/assets/icons-24@1x.png") 1x, url("/assets/icons-24@2x.png") 2x);
  background-image: image-set(url("/assets/icons-24@1x.png") 1x, url("/assets/icons-24@2x.png") 2x);
}
.icon.size16 {
  width: 16px;
  height: 16px;
  background-image: -webkit-image-set(url("/assets/icons-16@1x.png") 1x, url("/assets/icons-16@2x.png") 2x);
  background-image: image-set(url("/assets/icons-16@1x.png") 1x, url("/assets/icons-16@2x.png") 2x);
}

.pageHeading {
  font-size: var(--font-h3);
}

input, textarea {
  font-feature-settings: "liga", "kern";
  font-family: var(--font-family);
  font-style: normal;
  font-stretch: normal;
  font-weight: var(--weight-normal);
  font-size: var(--font-body);
  letter-spacing: var(--letter-spacing-normal);
  outline: none;
  color: inherit;
}
input::-moz-placeholder, textarea::-moz-placeholder {
  color: var(--text-disabled);
}
input::placeholder, textarea::placeholder {
  color: var(--text-disabled);
}

@media screen and (max-width: 640px) {
  #app > .wrapper {
    translate: -50% 0;
  }
}
.icon.size8 {
  width: 8px;
  height: 8px;
  background-image: -webkit-image-set(url(/assets/icons-8@1x.png) 1x, url(/assets/icons-8@2x.png) 2x);
  background-image: image-set(url(/assets/icons-8@1x.png) 1x, url(/assets/icons-8@2x.png) 2x);
}

/* ICONS */
.icon.size24.back {
  background-position-y: -144px;
}

.icon.size24.calendar {
  background-position-y: -24px;
}

.icon.size24.caretBack {
  background-position-y: -216px;
}

.icon.size24.caretNext {
  background-position-y: -240px;
}

.icon.size24.checkmark {
  background-position-y: -120px;
}

.icon.size24.expand {
  background-position-y: -264px;
}

.icon.size24.goals {
  background-position-y: 0px;
}

.icon.size24.next {
  background-position-y: -168px;
}

.icon.size24.refresh {
  background-position-y: -192px;
}

.icon.size24.search {
  background-position-y: -288px;
}

.icon.size24.settings {
  background-position-y: -48px;
}

.icon.size24.timer {
  background-position-y: -312px;
}

.icon.size24.backlog {
  background-position-y: -336px;
}

.icon.size24.keyboard {
  background-position-y: -360px;
}

.icon.size24.close {
  background-position-y: -384px;
}

.icon.size24.menu {
  background-position-y: -408px;
}

.icon.size24.column1 {
  background-position-y: -432px;
}

.icon.size24.column3 {
  background-position-y: -456px;
}

.icon.size24.column5 {
  background-position-y: -480px;
}

.icon.size24.column7 {
  background-position-y: -504px;
}

.icon.size24.column30 {
  background-position-y: -528px;
}

.icon.size24.box {
  background-position-y: -552px;
}

/* 16px icons */
.icon.size16.cancel {
  background-position-y: 0px;
}

.icon.size16.caretBack {
  background-position-y: -48px;
}

.icon.size16.caretNext {
  background-position-y: -64px;
}

.icon.size16.checkmark {
  background-position-y: -80px;
}

.icon.size16.checkboxEmpty {
  background-position-y: -144px;
}

.icon.size16.checkboxChecked {
  background-position-y: -160px;
}

.icon.size16.checkboxCanceled {
  background-position-y: -176px;
}

.icon.size16.handle {
  background-position-y: -96px;
}

.icon.size16.indent {
  background-position-y: -112px;
}

.icon.size16.moveTo {
  background-position-y: -32px;
}

.icon.size16.outdent {
  background-position-y: -128px;
}

.icon.size16.formatHeader {
  background-position-y: -208px;
}

.icon.size16.formatBold {
  background-position-y: -224px;
}

.icon.size16.formatItalic {
  background-position-y: -240px;
}

.icon.size16.formatList {
  background-position-y: -256px;
}

.icon.size16.formatQuote {
  background-position-y: -272px;
}

.icon.size16.formatCode {
  background-position-y: -288px;
}

.icon.size16.formatHighlight {
  background-position-y: -304px;
}

.icon.size16.formatStrikethrough {
  background-position-y: -320px;
}

.icon.size16.formatUnderline {
  background-position-y: -336px;
}

.icon.size16.remind {
  background-position-y: -352px;
}

.icon.size16.add {
  background-position-y: -368px;
}

.icon.size8.check {
  background-position-y: 0px;
}

.icon.size8.ring {
  background-position-y: -8px;
}

/* Dark mode icons */
@media (prefers-color-scheme: dark) {
  .icon.size24 {
    background-position-x: -24px;
  }
  .icon.size16 {
    background-position-x: -16px;
  }
  .icon.size8 {
    background-position-x: -8px;
  }
}
@font-face {
  font-family: "Graphik Web";
  src: url("/assets/Graphik-Semibold-Web.woff2") format("woff2"), url("/assets/Graphik-Semibold-Web.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-stretch: normal;
}
@font-face {
  font-family: "Graphik Web";
  src: url("/assets/Graphik-Medium-Web.woff2") format("woff2"), url("/assets/Graphik-Medium-Web.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
}
@font-face {
  font-family: "Graphik Web";
  src: url("/assets/Graphik-Regular-Web.woff2") format("woff2"), url("/assets/Graphik-Regular-Web.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
}
.view[data-font=default],
#app[data-font=default] {
  --font-family: "Graphik Web", sans-serif;
  --font-body: 15px;
  --weight-bold: 500;
}

#app[data-font=system],
.view[data-font=system] {
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-body: 15px;
}

#app[data-font=legible],
.view[data-font=legible] {
  --font-family: "Atkinson Hyperlegible", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: 16px;
}

#app[data-font=inter],
.view[data-font=inter] {
  --font-family: "Inter", sans-serif;
  --font-body: 15px;
  letter-spacing: -0.011em;
}

/* ANIMATIONS */
@keyframes loader {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  0% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.75;
  }
}
@keyframes spinner {
  0% {
    width: 24px;
    left: 0px;
    transform: rotateZ(0deg);
  }
  25% {
    width: 2px;
    left: 10px;
    transform: rotateZ(-90deg);
  }
  50% {
    width: 24px;
    left: 0px;
    transform: rotateZ(360deg);
  }
  75% {
    width: 2px;
    left: 10px;
    transform: rotateZ(450deg);
  }
  100% {
    width: 24px;
    left: 0px;
    transform: rotateZ(0deg);
  }
}
@keyframes breathe {
  0% {
    scale: 1;
  }
  50% {
    scale: 1.2;
    border-width: 1.25px;
  }
  100% {
    scale: 1;
  }
}
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  display: flex;
}
.overlay.hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.overlay.center {
  place-items: center;
  display: flex;
  justify-content: center;
}
.overlay.alignBottom {
  justify-content: center;
  align-items: end;
}
.overlay.scrim {
  background-color: var(--scrim);
}
.overlay:not(.visible) .dialog {
  transform: scale(0.9);
  opacity: 0;
}

.overlay.warning {
  display: flex;
  flex-direction: column;
  font-family: sans-serif;
  background: #757575;
  color: #FFF;
  place-content: center;
  text-align: center;
  padding: 0 calc(50% - 40vw);
  font-size: 20px;
  gap: 0.5em;
  line-height: 1.5em;
}
.overlay.warning *:first-child {
  margin-bottom: 1em;
}

.dropdown {
  background: var(--surface);
  border-radius: var(--radius-mid);
  box-shadow: var(--shadow-button);
  font-size: var(--font-sub);
  padding: 4px 4px;
  min-width: 160px;
  position: absolute;
}

.dropdown,
dialog.move,
dialog.options {
  font-size: var(--font-body);
}
.dropdown > .heading,
dialog.move > .heading,
dialog.options > .heading {
  padding: 20px;
  padding-bottom: 12px;
}
.dropdown > .action,
dialog.move > .action,
dialog.options > .action {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 12px;
  padding: 0.85em 0.5em;
  border-radius: 4px;
  min-height: 36px;
  transition: background var(--timing-snappy) var(--ease-standard);
}
.dropdown > .action:hover,
dialog.move > .action:hover,
dialog.options > .action:hover {
  background-color: var(--hover);
  cursor: pointer;
}
.dropdown .labels,
dialog.move .labels,
dialog.options .labels {
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}
.dropdown .labels .label,
dialog.move .labels .label,
dialog.options .labels .label {
  color: var(--text-primary);
}
.dropdown .labels .sublabel,
dialog.move .labels .sublabel,
dialog.options .labels .sublabel {
  color: var(--text-tertiary);
}

dialog {
  border: none;
  padding: 0;
  border-radius: var(--radius-mid);
  background: var(--surface);
  box-shadow: var(--shadow-level3);
  width: calc(100% - 40px);
  max-width: 400px;
}
dialog form.feedback {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
dialog form textarea {
  border: none;
  background: none;
  outline: none;
}
dialog > h3 {
  margin: 20px 16px;
}
dialog[open] {
  animation: showDialog 0.2s ease;
}
dialog[open].move, dialog[open].options, dialog[open].feedback {
  display: flex;
  flex-direction: column;
}
dialog[open]::backdrop {
  animation: fadeIn 0.25s ease;
}
dialog.feedback form.feedback {
  padding: 16px;
  padding-bottom: 0;
}
dialog.feedback form.feedback h3 {
  margin-top: 8px;
  margin-bottom: 16px;
}
dialog.feedback form.feedback textarea {
  resize: none;
  font-size: var(--font-body);
  font-family: var(--font-family);
}
dialog.feedback form.feedback button {
  margin: 0;
  margin-bottom: 4px;
}
dialog.feedback > button:last-child {
  margin-top: 4px;
}
dialog > .action {
  padding-left: 0;
  padding-right: 0;
}
dialog > button:last-child {
  margin: 16px 16px 16px 16px;
  width: calc(100% - 32px);
}
dialog > .button + button {
  margin-top: 8px;
}
dialog::backdrop {
  background: rgba(0, 0, 0, 0.25);
}
dialog .table {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 0 20px;
}
dialog .table > div {
  line-height: 36px;
  border-bottom: 1px solid var(--divider-secondary);
}
dialog .table > div:nth-child(2n) {
  color: var(--text-tertiary);
}
dialog .table > div:last-child, dialog .table > div:nth-last-child(2) {
  border: none;
}

.dialog {
  display: flex;
  flex-direction: column;
  gap: 20px;
  border: none;
  border-radius: 10px;
  box-shadow: var(--shadow-button);
  background: var(--surface);
  width: 90%;
  max-width: 400px;
  padding: 20px;
  transition: all var(--timing-standard) var(--ease-standard) 0.08s;
  transform: scale(1);
  opacity: 1;
}
.dialog.dialog {
  gap: 12px;
}
.dialog .heading {
  font-size: var(--font-h2);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}
.dialog .text {
  font-size: var(--font-body);
  color: var(--text-secondary);
  line-height: var(--line-height-body);
}
.dialog .text + button {
  margin-top: 8px;
}
.dialog button {
  padding: 4px 32px;
}
.dialog button.cancel {
  color: var(--color-red);
}
.dialog textarea {
  font: var(--font-family);
  font-size: var(--font-body);
  border: none;
  resize: none;
  line-height: 1.5;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes showDialog {
  from {
    opacity: 0;
    scale: 0.96;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}
@media screen and (max-width: 640px) {
  dialog.options > .action,
  dialog.move > .action {
    padding: 14px 12px;
  }
}
@media (pointer: coarse) {
  button {
    outline: none;
  }
}
#nav-mobile {
  display: flex;
  height: 72px;
  justify-content: space-between;
  text-align: center;
  align-items: center;
}
#nav-mobile .tapTarget {
  width: 64px;
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: var(--icon-opacity);
}
#nav-mobile #nav-expand .loader {
  display: none;
}
#nav-mobile #nav-expand.loading {
  pointer-events: none;
}
#nav-mobile #nav-expand.loading .icon {
  display: none;
}
#nav-mobile #nav-expand.loading .loader {
  display: block;
}
#nav-mobile #nav-logo {
  font-size: var(--font-sub);
  color: var(--text-tertiary);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}
#nav-mobile img {
  width: 24px;
  height: 24px;
}

#tabBar {
  position: absolute;
  bottom: auto;
  left: 0;
  width: 64px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--background);
  border-right: 1px solid var(--divider-primary);
  z-index: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  justify-content: center;
}
#tabBar .tab {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0px;
  cursor: pointer;
  transition: opacity var(--timing-snappy), transform var(--timing-snappy);
}
#tabBar .tab:active {
  transform: scale(0.85);
}

.focusedNote {
  width: 100%;
  height: 100%;
  background: var(--surface);
  box-shadow: var(--shadow-level3);
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.focusedNote .header {
  width: 100%;
  height: 64px;
  line-height: 64px;
  padding: 0 24px;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 16px;
}
.focusedNote .header .icon {
  opacity: 0.45;
}
.focusedNote .header .date {
  flex: 1;
}
.focusedNote .header .formatting {
  display: flex;
  gap: 24px;
}
.focusedNote .header .formatting .font {
  cursor: pointer;
}
.focusedNote .header .formatting .font.serif {
  font-family: "Charter", serif;
}
.focusedNote .header .formatting .font.mono {
  font-family: "IBM Plex Mono", monospace;
}
.focusedNote .text {
  flex-grow: 1;
}
.focusedNote .text textarea {
  width: 100%;
  height: 100%;
  border: none;
  line-height: 1.618;
  background: none;
  padding: 40px calc(50% - 360px);
  padding-bottom: 50%;
  font-size: var(--font-large);
  resize: none;
}
.focusedNote .text textarea.serif {
  font-family: "Charter", serif;
  font-size: 1.2em;
}
.focusedNote .text textarea.mono {
  font-family: "IBM Plex Mono", monospace;
  font-size: 1.025em;
}
.focusedNote .text textarea.lock {
  padding-top: calc(50% - 40px);
  padding-bottom: calc(50% - 40px);
}

#btnShortcuts {
  position: fixed;
  bottom: 16px;
  right: 16px;
  opacity: 0.3;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--radius-small);
  transition: all var(--timing-snappy);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
#btnShortcuts .label {
  display: none;
}
#btnShortcuts:hover {
  background: rgba(var(--shading), 0.05);
  opacity: 1;
}

@media screen and (max-width: 984px) {
  #btnShortcuts {
    display: none;
  }
}
.primaryGoal .container:has(.btnComplete:active), .primaryGoal:has(.btnComplete:active) {
  z-index: 1;
}
.primaryGoal .btnComplete {
  width: 32px;
  height: 32px;
  position: absolute;
  bottom: 16px;
  right: 16px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
}
.primaryGoal .btnComplete > .disc {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--card);
  position: relative;
}
.primaryGoal .btnComplete > .disc svg.circle {
  rotate: -90deg;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
}
.primaryGoal .btnComplete > .disc svg.circle circle {
  stroke: var(--accent-primary);
  stroke-width: 1.75px;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
.primaryGoal .btnComplete > .disc svg.circle.track circle {
  stroke: rgba(var(--shading), 0.12);
  stroke-dashoffset: 0;
}
.primaryGoal .btnComplete > .disc svg.check {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: 1;
}
.primaryGoal .btnComplete > .disc svg.check path {
  stroke: rgba(var(--shading), 0.12);
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
.primaryGoal .btnComplete > .disc svg.check.track path {
  stroke-dashoffset: 0;
  stroke: rgba(var(--shading), 0.12);
}
.primaryGoal .btnComplete .burst {
  position: absolute;
  width: 1200px;
  height: 1200px;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--accent-primary);
  scale: 0;
  pointer-events: none;
}
.primaryGoal .btnComplete.complete .disc {
  background: var(--accent-primary);
}
.primaryGoal .btnComplete.complete svg.circle circle {
  stroke: var(--light-text-on-dark);
  stroke-dashoffset: 0;
}
.primaryGoal .btnComplete.complete svg.check path {
  stroke: var(--light-text-on-dark);
  stroke-dashoffset: 200;
}
.primaryGoal .btnComplete:not(.complete) .disc:hover svg.circle.track circle,
.primaryGoal .btnComplete:not(.complete) .disc:hover svg.check path {
  stroke: rgba(var(--shading), 0.25);
  transition: stroke 0.1s;
}
@keyframes pulse {
  0% {
    opacity: 0.75;
    scale: 0.5;
  }
  100% {
    opacity: 0;
    scale: 4;
  }
}

[data-component=taskList] {
  --day-padding: 1.5em;
}
[data-component=taskList] .goal {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  border-radius: 0.375rem;
  padding-right: 20px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  --grab-height: var(--goal-min-height);
  --goal-text-line-height: 1.5em;
}
[data-component=taskList] .goal .handleBox {
  width: 24px;
  height: var(--grab-height);
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  cursor: grab;
  opacity: 0.01;
  touch-action: none;
}
[data-component=taskList] .goal .handleBox .handle {
  opacity: var(--icon-opacity);
}
[data-component=taskList] .goal .handleBox .icon {
  cursor: inherit;
}
[data-component=taskList] .goal .checkBox {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--grab-height);
  opacity: var(--icon-opacity);
  padding-right: 0.75em;
}
[data-component=taskList] .goal .checkBox .checkboxCanceled {
  opacity: 0.25;
}
[data-component=taskList] .goal .checkBox .icon {
  opacity: 0.87;
}
[data-component=taskList] .goal .checkBox .icon.done {
  opacity: 0.25;
  pointer-events: none;
}
[data-component=taskList] .goal .selectorBox {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  height: var(--grab-height);
  min-width: 32px;
  opacity: 0;
  cursor: pointer;
}
[data-component=taskList] .goal .selectorBox .selector {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(var(--shading), 0.25);
}
[data-component=taskList] .goal .selectorBox:hover > .selector {
  border-color: rgba(var(--shading), 0.5);
}
[data-component=taskList] .goal .contentBox {
  flex: 1;
  margin-bottom: 0.25rem;
  max-width: calc(100% - 32px - 24px - 16px - 0.75rem);
}
[data-component=taskList] .goal .contentBox .textField {
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}
[data-component=taskList] .goal .reminderBox {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  gap: 0.15rem;
  font-size: var(--font-micro);
  width: auto;
  color: var(--text-secondary);
  margin-top: 0.25rem;
  margin-left: -0.15rem;
}
[data-component=taskList] .goal .reminderBox .icon {
  scale: 0.75;
  opacity: 0.5;
}
[data-component=taskList] .goal .reminderBox .close {
  display: none;
}
[data-component=taskList] .goal .reminderBox.sent {
  color: var(--color-red);
  font-weight: var(--weight-bold);
}
[data-component=taskList] .goal .reminderBox.sent .icon.remind {
  opacity: 1;
  background-position-y: -368px;
}
[data-component=taskList] .goal.goal-adder {
  margin: 0 24px;
  min-height: 32px;
}
[data-component=taskList] .goal.selected .selectorBox {
  transition: opacity var(--timing-snappy);
}
[data-component=taskList] .goal.selected .selector {
  background: var(--accent-primary);
  border-color: rgba(var(--shading), var(--opacity-icon-light));
}
[data-component=taskList] .goal.isDragging {
  pointer-events: none;
}
[data-component=taskList] .goal[data-dragged=true] > * {
  opacity: 0.2;
}
[data-component=taskList] .goal[data-dragged=true] .handle, [data-component=taskList] .goal[data-dragged=true] .selector {
  opacity: 0;
  pointer-events: none;
}
[data-component=taskList] .goal[data-targeted=true] {
  position: relative;
  touch-action: none;
}
[data-component=taskList] .goal[data-targeted=true]:before {
  content: "";
  position: absolute;
  width: calc(100% - 48px);
  height: 1px;
  top: 0px;
  left: 24px;
  background: var(--accent-primary);
}
[data-component=taskList] .goal[data-targeted=true][data-dragplacement=after]:before {
  top: 100%;
}
[data-component=taskList] .goal[data-targeted=true][data-dragindent=true]:before {
  left: 52px;
  width: calc(100% - 76px);
}
[data-component=taskList] .goal[data-targeted=true] .handle, [data-component=taskList] .goal[data-targeted=true] .selector {
  opacity: 0;
  pointer-events: none;
}
[data-component=taskList] .goal.highlighted {
  background: var(--hover);
}
[data-component=taskList] .goal.target {
  position: relative;
}
[data-component=taskList] .goal.target:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  top: 0px;
  background: var(--accent-primary);
}
[data-component=taskList] .goal.target.first:after {
  top: 0%;
}
[data-component=taskList] .goal.indent {
  padding-left: 28px;
}
[data-component=taskList] .goal.isNew .handleBox {
  width: 24.5px;
}
[data-component=taskList] .goal.isNew .handleBox,
[data-component=taskList] .goal.isNew .selectorBox {
  opacity: 0 !important;
  pointer-events: none;
}
[data-component=taskList] .goal.isNew .checkBox {
  opacity: var(--icon-opacity-disabled);
  pointer-events: none;
}
[data-component=taskList] .goal .textField {
  flex: 1;
  outline: none;
  padding-top: calc(var(--goal-min-height) / 2 - var(--goal-text-line-height) / 1.95);
  white-space: normal;
  line-height: var(--goal-text-line-height);
  min-height: 1rem;
  min-width: 1rem;
}
[data-component=taskList] .goal .textField:is(:empty):after {
  content: "Add task";
  position: absolute;
  color: var(--text-disabled);
}
[data-component=taskList] .goal > textarea {
  margin: 0.4em 0px;
  line-height: var(--goal-text-line-height);
  border: none;
  border-radius: 0px;
  padding: 0px;
  background: none;
  resize: none;
  height: 24px;
  color: var(--text-primary);
  flex: 1;
  font-size: var(--font-body);
  overflow: hidden;
}
[data-component=taskList] .goal.done textarea, [data-component=taskList] .goal.done .textField {
  text-decoration: line-through;
  color: var(--text-tertiary);
}
[data-component=taskList] .goal.canceled textarea, [data-component=taskList] .goal.canceled .textField {
  color: var(--text-tertiary);
}
@media (any-hover: none) {
  [data-component=taskList] .goal .reminderBox {
    pointer-events: none;
  }
}
@media (any-hover: hover) {
  [data-component=taskList] .goal:hover .reminderBox .close,
  [data-component=taskList] [data-component=taskList][data-mode=select] .goal .reminderBox .close {
    display: block;
  }
  [data-component=taskList] .goal:hover .reminderBox .remind,
  [data-component=taskList] [data-component=taskList][data-mode=select] .goal .reminderBox .remind {
    display: none;
  }
}
[data-component=taskList][data-mode=select] .goal:hover {
  opacity: 1;
}
[data-component=taskList][data-mode=select] .goal.selected {
  opacity: 1;
}
[data-component=taskList][data-mode=select] .goal .handleBox {
  pointer-events: auto;
  opacity: 1;
}
[data-component=taskList][data-mode=select] .goal .selectorBox {
  pointer-events: auto;
  opacity: 1;
  transition: scale var(--timing-snappy);
}
[data-component=taskList][data-mode=select] .goal .selectorBox:active {
  scale: 0.9;
}
[data-component=taskList].modeMove {
  touch-action: none;
}
[data-component=taskList] .section:first-child {
  padding-bottom: var(--day-padding);
}
[data-component=taskList] .dropzone:nth-child(2) {
  padding-bottom: var(--day-padding);
}
[data-component=taskList] .dropzone.single {
  width: 100%;
  height: var(--day-padding);
}
[data-component=taskList] .dropzone.single[data-istarget=true] {
  position: relative;
  touch-action: none;
}
[data-component=taskList] .dropzone.single[data-istarget=true]:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  top: 0;
  background: var(--accent-primary);
}
[data-component=taskList] .dropzone.single[data-dragindent=true]:after {
  left: 24px;
  width: calc(100% - 24px);
}
[data-component=taskList] .dropzone.area[data-istarget=true] .goal.isNew {
  position: relative;
  touch-action: none;
}
[data-component=taskList] .dropzone.area[data-istarget=true] .goal.isNew:after {
  content: "";
  position: absolute;
  width: calc(100% - 36px);
  height: 1px;
  top: 0;
  left: 20px;
  background: var(--accent-primary);
}
[data-component=taskList] .dropzone.area[data-dragindent=true] .goal.isNew::after {
  left: 52px;
  width: calc(100% - 76px);
}
[data-component=taskList] .divider {
  background-color: rgba(var(--shading), 0.05);
  height: 2px;
  border-radius: 2px;
  margin: 0 24px;
}
[data-component=taskList] h4 {
  color: var(--text-emphatic);
  font-weight: var(--weight-bold);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
[data-component=taskList] .divider + h4 {
  margin: 0 24px;
  margin-top: 28px;
}
[data-component=taskList] .shadow {
  position: sticky;
  width: 100%;
  height: 8px;
  left: 0;
  top: -8px;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
}
[data-component=taskList] .shadow.visible {
  opacity: 1;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
}
[data-component=taskList] .task-list + .header {
  margin-top: 20px;
}
[data-component=taskList] .header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  margin-bottom: 16px;
}
[data-component=taskList] .header .action {
  cursor: pointer;
  color: var(--text-tertiary);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
[data-component=taskList] .header .action.disabled {
  color: var(--text-disabled);
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
[data-component=taskList] .tasks + .daily-note {
  margin-top: 24px;
}
[data-component=taskList] .tasks .goals-container {
  display: flex;
  flex-direction: column;
}
@media (any-hover: hover) {
  [data-component=taskList] .goal:not(.isNew):hover .handleBox {
    opacity: 1;
  }
  [data-component=taskList] .goal:not(.isNew):hover .selectorBox {
    opacity: 1;
  }
  [data-component=taskList] button {
    outline: initial;
  }
}

[data-component=toolbar] {
  width: calc(100% - 32px);
  max-width: 420px;
  left: 50%;
  transform: translateX(-50%) translateY(2px);
  background: var(--accent-primary);
  color: var(--color-white);
  border-radius: 8px;
  font-size: var(--font-sub);
  display: flex;
  box-shadow: var(--shadow-colored-button);
  position: absolute;
  padding: 4px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: opacity var(--timing-snappy), transform var(--timing-snappy);
  z-index: 1;
}
[data-component=toolbar] .control {
  display: flex;
  flex: 1;
  flex-direction: column;
  border-radius: 4px;
  padding: 4px 0px 6px 0px;
  align-items: center;
  justify-content: center;
  gap: 3px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
[data-component=toolbar] .control:hover {
  background: var(--hover);
}
[data-component=toolbar] .control .icon {
  background-position-x: -16px;
}
[data-component=toolbar] .control .label .key {
  display: none;
  font-size: 0.6em;
  line-height: 10px;
  padding: 0.1em 0.25em;
  margin-left: 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.05);
  text-align: center;
  vertical-align: middle;
}
[data-component=toolbar] [data-variant=goals] {
  display: flex;
  flex: 1;
}
@media screen and (min-width: 984px) {
  [data-component=toolbar] .control .label .key {
    display: inline-block;
  }
}

#page-login {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  --landing-card-width: calc(100% - 3em);
  --landing-card-max-width: 560px;
}
#page-login > p {
  max-width: 360px;
  margin: 0 40px;
  font-size: var(--font-sub);
  line-height: 1.5;
  text-align: center;
  color: var(--text-tertiary);
}
#page-login > .button {
  width: calc(100% - 80px);
  max-width: 240px;
}
#page-login.hidden {
  display: none;
}
#page-login .manifesto {
  display: flex;
  flex-direction: column;
  font-size: var(--font-large);
  justify-content: center;
  align-items: center;
  line-height: 1.75em;
  gap: 2em;
  flex-grow: 1;
  padding: 0px 4em;
}
#page-login .manifesto > div {
  width: 100%;
  max-width: 320px;
}
#page-login .manifesto .faded {
  color: var(--text-disabled);
}
#page-login .manifesto .body {
  display: flex;
  gap: 1em;
  flex-direction: column;
  color: var(--text-secondary);
}
#page-login .manifesto .title {
  display: flex;
  flex-direction: column;
  gap: 1em;
  text-align: center;
  align-items: center;
}
#page-login .manifesto .title h2 {
  font-weight: var(--weight-normal);
  font-size: var(--font-h2);
  color: var(--text-emphatic);
}
#page-login .manifesto .title .subline {
  color: var(--text-secondary);
}
#page-login .manifesto .title img {
  -webkit-clip-path: polygon(100% 50%, 100% 56.6%, 100% 59.3%, 100% 61.4%, 99.9% 63.2%, 99.9% 64.8%, 99.9% 66.2%, 99.8% 67.5%, 99.8% 68.7%, 99.7% 69.8%, 99.6% 70.8%, 99.5% 71.8%, 99.5% 72.8%, 99.4% 73.7%, 99.3% 74.6%, 99.1% 75.4%, 99% 76.3%, 98.9% 77%, 98.8% 77.8%, 98.6% 78.5%, 98.5% 79.2%, 98.3% 79.9%, 98.1% 80.6%, 98% 81.3%, 97.8% 81.9%, 97.6% 82.5%, 97.4% 83.1%, 97.2% 83.7%, 97% 84.3%, 96.8% 84.8%, 96.5% 85.4%, 96.3% 85.9%, 96% 86.4%, 95.8% 86.9%, 95.5% 87.4%, 95.3% 87.9%, 95% 88.3%, 94.7% 88.8%, 94.4% 89.2%, 94.1% 89.7%, 93.8% 90.1%, 93.4% 90.5%, 93.1% 90.9%, 92.8% 91.3%, 92.4% 91.7%, 92% 92%, 91.7% 92.4%, 91.3% 92.8%, 90.9% 93.1%, 90.5% 93.4%, 90.1% 93.8%, 89.7% 94.1%, 89.2% 94.4%, 88.8% 94.7%, 88.3% 95%, 87.9% 95.3%, 87.4% 95.5%, 86.9% 95.8%, 86.4% 96%, 85.9% 96.3%, 85.4% 96.5%, 84.8% 96.8%, 84.3% 97%, 83.7% 97.2%, 83.1% 97.4%, 82.5% 97.6%, 81.9% 97.8%, 81.3% 98%, 80.6% 98.1%, 79.9% 98.3%, 79.2% 98.5%, 78.5% 98.6%, 77.8% 98.8%, 77% 98.9%, 76.3% 99%, 75.4% 99.1%, 74.6% 99.3%, 73.7% 99.4%, 72.8% 99.5%, 71.8% 99.5%, 70.8% 99.6%, 69.8% 99.7%, 68.7% 99.8%, 67.5% 99.8%, 66.2% 99.9%, 64.8% 99.9%, 63.2% 99.9%, 61.4% 100%, 59.3% 100%, 56.6% 100%, 50% 100%, 43.4% 100%, 40.7% 100%, 38.6% 100%, 36.8% 99.9%, 35.2% 99.9%, 33.8% 99.9%, 32.5% 99.8%, 31.3% 99.8%, 30.2% 99.7%, 29.2% 99.6%, 28.2% 99.5%, 27.2% 99.5%, 26.3% 99.4%, 25.4% 99.3%, 24.6% 99.1%, 23.7% 99%, 23% 98.9%, 22.2% 98.8%, 21.5% 98.6%, 20.8% 98.5%, 20.1% 98.3%, 19.4% 98.1%, 18.7% 98%, 18.1% 97.8%, 17.5% 97.6%, 16.9% 97.4%, 16.3% 97.2%, 15.7% 97%, 15.2% 96.8%, 14.6% 96.5%, 14.1% 96.3%, 13.6% 96%, 13.1% 95.8%, 12.6% 95.5%, 12.1% 95.3%, 11.7% 95%, 11.2% 94.7%, 10.8% 94.4%, 10.3% 94.1%, 9.9% 93.8%, 9.5% 93.4%, 9.1% 93.1%, 8.7% 92.8%, 8.3% 92.4%, 8% 92%, 7.6% 91.7%, 7.2% 91.3%, 6.9% 90.9%, 6.6% 90.5%, 6.2% 90.1%, 5.9% 89.7%, 5.6% 89.2%, 5.3% 88.8%, 5% 88.3%, 4.7% 87.9%, 4.5% 87.4%, 4.2% 86.9%, 4% 86.4%, 3.7% 85.9%, 3.5% 85.4%, 3.2% 84.8%, 3% 84.3%, 2.8% 83.7%, 2.6% 83.1%, 2.4% 82.5%, 2.2% 81.9%, 2% 81.3%, 1.9% 80.6%, 1.7% 79.9%, 1.5% 79.2%, 1.4% 78.5%, 1.2% 77.8%, 1.1% 77%, 1% 76.3%, 0.9% 75.4%, 0.7% 74.6%, 0.6% 73.7%, 0.5% 72.8%, 0.5% 71.8%, 0.4% 70.8%, 0.3% 69.8%, 0.2% 68.7%, 0.2% 67.5%, 0.1% 66.2%, 0.1% 64.8%, 0.1% 63.2%, 0% 61.4%, 0% 59.3%, 0% 56.6%, 0% 50%, 0% 43.4%, 0% 40.7%, 0% 38.6%, 0.1% 36.8%, 0.1% 35.2%, 0.1% 33.8%, 0.2% 32.5%, 0.2% 31.3%, 0.3% 30.2%, 0.4% 29.2%, 0.5% 28.2%, 0.5% 27.2%, 0.6% 26.3%, 0.7% 25.4%, 0.9% 24.6%, 1% 23.7%, 1.1% 23%, 1.2% 22.2%, 1.4% 21.5%, 1.5% 20.8%, 1.7% 20.1%, 1.9% 19.4%, 2% 18.7%, 2.2% 18.1%, 2.4% 17.5%, 2.6% 16.9%, 2.8% 16.3%, 3% 15.7%, 3.2% 15.2%, 3.5% 14.6%, 3.7% 14.1%, 4% 13.6%, 4.2% 13.1%, 4.5% 12.6%, 4.7% 12.1%, 5% 11.7%, 5.3% 11.2%, 5.6% 10.8%, 5.9% 10.3%, 6.2% 9.9%, 6.6% 9.5%, 6.9% 9.1%, 7.2% 8.7%, 7.6% 8.3%, 8% 8%, 8.3% 7.6%, 8.7% 7.2%, 9.1% 6.9%, 9.5% 6.6%, 9.9% 6.2%, 10.3% 5.9%, 10.8% 5.6%, 11.2% 5.3%, 11.7% 5%, 12.1% 4.7%, 12.6% 4.5%, 13.1% 4.2%, 13.6% 4%, 14.1% 3.7%, 14.6% 3.5%, 15.2% 3.2%, 15.7% 3%, 16.3% 2.8%, 16.9% 2.6%, 17.5% 2.4%, 18.1% 2.2%, 18.7% 2%, 19.4% 1.9%, 20.1% 1.7%, 20.8% 1.5%, 21.5% 1.4%, 22.2% 1.2%, 23% 1.1%, 23.7% 1%, 24.6% 0.9%, 25.4% 0.7%, 26.3% 0.6%, 27.2% 0.5%, 28.2% 0.5%, 29.2% 0.4%, 30.2% 0.3%, 31.3% 0.2%, 32.5% 0.2%, 33.8% 0.1%, 35.2% 0.1%, 36.8% 0.1%, 38.6% 0%, 40.7% 0%, 43.4% 0%, 50% 0%, 56.6% 0%, 59.3% 0%, 61.4% 0%, 63.2% 0.1%, 64.8% 0.1%, 66.2% 0.1%, 67.5% 0.2%, 68.7% 0.2%, 69.8% 0.3%, 70.8% 0.4%, 71.8% 0.5%, 72.8% 0.5%, 73.7% 0.6%, 74.6% 0.7%, 75.4% 0.9%, 76.3% 1%, 77% 1.1%, 77.8% 1.2%, 78.5% 1.4%, 79.2% 1.5%, 79.9% 1.7%, 80.6% 1.9%, 81.3% 2%, 81.9% 2.2%, 82.5% 2.4%, 83.1% 2.6%, 83.7% 2.8%, 84.3% 3%, 84.8% 3.2%, 85.4% 3.5%, 85.9% 3.7%, 86.4% 4%, 86.9% 4.2%, 87.4% 4.5%, 87.9% 4.7%, 88.3% 5%, 88.8% 5.3%, 89.2% 5.6%, 89.7% 5.9%, 90.1% 6.2%, 90.5% 6.6%, 90.9% 6.9%, 91.3% 7.2%, 91.7% 7.6%, 92% 8%, 92.4% 8.3%, 92.8% 8.7%, 93.1% 9.1%, 93.4% 9.5%, 93.8% 9.9%, 94.1% 10.3%, 94.4% 10.8%, 94.7% 11.2%, 95% 11.7%, 95.3% 12.1%, 95.5% 12.6%, 95.8% 13.1%, 96% 13.6%, 96.3% 14.1%, 96.5% 14.6%, 96.8% 15.2%, 97% 15.7%, 97.2% 16.3%, 97.4% 16.9%, 97.6% 17.5%, 97.8% 18.1%, 98% 18.7%, 98.1% 19.4%, 98.3% 20.1%, 98.5% 20.8%, 98.6% 21.5%, 98.8% 22.2%, 98.9% 23%, 99% 23.7%, 99.1% 24.6%, 99.3% 25.4%, 99.4% 26.3%, 99.5% 27.2%, 99.5% 28.2%, 99.6% 29.2%, 99.7% 30.2%, 99.8% 31.3%, 99.8% 32.5%, 99.9% 33.8%, 99.9% 35.2%, 99.9% 36.8%, 100% 38.6%, 100% 40.7%, 100% 43.4%);
          clip-path: polygon(100% 50%, 100% 56.6%, 100% 59.3%, 100% 61.4%, 99.9% 63.2%, 99.9% 64.8%, 99.9% 66.2%, 99.8% 67.5%, 99.8% 68.7%, 99.7% 69.8%, 99.6% 70.8%, 99.5% 71.8%, 99.5% 72.8%, 99.4% 73.7%, 99.3% 74.6%, 99.1% 75.4%, 99% 76.3%, 98.9% 77%, 98.8% 77.8%, 98.6% 78.5%, 98.5% 79.2%, 98.3% 79.9%, 98.1% 80.6%, 98% 81.3%, 97.8% 81.9%, 97.6% 82.5%, 97.4% 83.1%, 97.2% 83.7%, 97% 84.3%, 96.8% 84.8%, 96.5% 85.4%, 96.3% 85.9%, 96% 86.4%, 95.8% 86.9%, 95.5% 87.4%, 95.3% 87.9%, 95% 88.3%, 94.7% 88.8%, 94.4% 89.2%, 94.1% 89.7%, 93.8% 90.1%, 93.4% 90.5%, 93.1% 90.9%, 92.8% 91.3%, 92.4% 91.7%, 92% 92%, 91.7% 92.4%, 91.3% 92.8%, 90.9% 93.1%, 90.5% 93.4%, 90.1% 93.8%, 89.7% 94.1%, 89.2% 94.4%, 88.8% 94.7%, 88.3% 95%, 87.9% 95.3%, 87.4% 95.5%, 86.9% 95.8%, 86.4% 96%, 85.9% 96.3%, 85.4% 96.5%, 84.8% 96.8%, 84.3% 97%, 83.7% 97.2%, 83.1% 97.4%, 82.5% 97.6%, 81.9% 97.8%, 81.3% 98%, 80.6% 98.1%, 79.9% 98.3%, 79.2% 98.5%, 78.5% 98.6%, 77.8% 98.8%, 77% 98.9%, 76.3% 99%, 75.4% 99.1%, 74.6% 99.3%, 73.7% 99.4%, 72.8% 99.5%, 71.8% 99.5%, 70.8% 99.6%, 69.8% 99.7%, 68.7% 99.8%, 67.5% 99.8%, 66.2% 99.9%, 64.8% 99.9%, 63.2% 99.9%, 61.4% 100%, 59.3% 100%, 56.6% 100%, 50% 100%, 43.4% 100%, 40.7% 100%, 38.6% 100%, 36.8% 99.9%, 35.2% 99.9%, 33.8% 99.9%, 32.5% 99.8%, 31.3% 99.8%, 30.2% 99.7%, 29.2% 99.6%, 28.2% 99.5%, 27.2% 99.5%, 26.3% 99.4%, 25.4% 99.3%, 24.6% 99.1%, 23.7% 99%, 23% 98.9%, 22.2% 98.8%, 21.5% 98.6%, 20.8% 98.5%, 20.1% 98.3%, 19.4% 98.1%, 18.7% 98%, 18.1% 97.8%, 17.5% 97.6%, 16.9% 97.4%, 16.3% 97.2%, 15.7% 97%, 15.2% 96.8%, 14.6% 96.5%, 14.1% 96.3%, 13.6% 96%, 13.1% 95.8%, 12.6% 95.5%, 12.1% 95.3%, 11.7% 95%, 11.2% 94.7%, 10.8% 94.4%, 10.3% 94.1%, 9.9% 93.8%, 9.5% 93.4%, 9.1% 93.1%, 8.7% 92.8%, 8.3% 92.4%, 8% 92%, 7.6% 91.7%, 7.2% 91.3%, 6.9% 90.9%, 6.6% 90.5%, 6.2% 90.1%, 5.9% 89.7%, 5.6% 89.2%, 5.3% 88.8%, 5% 88.3%, 4.7% 87.9%, 4.5% 87.4%, 4.2% 86.9%, 4% 86.4%, 3.7% 85.9%, 3.5% 85.4%, 3.2% 84.8%, 3% 84.3%, 2.8% 83.7%, 2.6% 83.1%, 2.4% 82.5%, 2.2% 81.9%, 2% 81.3%, 1.9% 80.6%, 1.7% 79.9%, 1.5% 79.2%, 1.4% 78.5%, 1.2% 77.8%, 1.1% 77%, 1% 76.3%, 0.9% 75.4%, 0.7% 74.6%, 0.6% 73.7%, 0.5% 72.8%, 0.5% 71.8%, 0.4% 70.8%, 0.3% 69.8%, 0.2% 68.7%, 0.2% 67.5%, 0.1% 66.2%, 0.1% 64.8%, 0.1% 63.2%, 0% 61.4%, 0% 59.3%, 0% 56.6%, 0% 50%, 0% 43.4%, 0% 40.7%, 0% 38.6%, 0.1% 36.8%, 0.1% 35.2%, 0.1% 33.8%, 0.2% 32.5%, 0.2% 31.3%, 0.3% 30.2%, 0.4% 29.2%, 0.5% 28.2%, 0.5% 27.2%, 0.6% 26.3%, 0.7% 25.4%, 0.9% 24.6%, 1% 23.7%, 1.1% 23%, 1.2% 22.2%, 1.4% 21.5%, 1.5% 20.8%, 1.7% 20.1%, 1.9% 19.4%, 2% 18.7%, 2.2% 18.1%, 2.4% 17.5%, 2.6% 16.9%, 2.8% 16.3%, 3% 15.7%, 3.2% 15.2%, 3.5% 14.6%, 3.7% 14.1%, 4% 13.6%, 4.2% 13.1%, 4.5% 12.6%, 4.7% 12.1%, 5% 11.7%, 5.3% 11.2%, 5.6% 10.8%, 5.9% 10.3%, 6.2% 9.9%, 6.6% 9.5%, 6.9% 9.1%, 7.2% 8.7%, 7.6% 8.3%, 8% 8%, 8.3% 7.6%, 8.7% 7.2%, 9.1% 6.9%, 9.5% 6.6%, 9.9% 6.2%, 10.3% 5.9%, 10.8% 5.6%, 11.2% 5.3%, 11.7% 5%, 12.1% 4.7%, 12.6% 4.5%, 13.1% 4.2%, 13.6% 4%, 14.1% 3.7%, 14.6% 3.5%, 15.2% 3.2%, 15.7% 3%, 16.3% 2.8%, 16.9% 2.6%, 17.5% 2.4%, 18.1% 2.2%, 18.7% 2%, 19.4% 1.9%, 20.1% 1.7%, 20.8% 1.5%, 21.5% 1.4%, 22.2% 1.2%, 23% 1.1%, 23.7% 1%, 24.6% 0.9%, 25.4% 0.7%, 26.3% 0.6%, 27.2% 0.5%, 28.2% 0.5%, 29.2% 0.4%, 30.2% 0.3%, 31.3% 0.2%, 32.5% 0.2%, 33.8% 0.1%, 35.2% 0.1%, 36.8% 0.1%, 38.6% 0%, 40.7% 0%, 43.4% 0%, 50% 0%, 56.6% 0%, 59.3% 0%, 61.4% 0%, 63.2% 0.1%, 64.8% 0.1%, 66.2% 0.1%, 67.5% 0.2%, 68.7% 0.2%, 69.8% 0.3%, 70.8% 0.4%, 71.8% 0.5%, 72.8% 0.5%, 73.7% 0.6%, 74.6% 0.7%, 75.4% 0.9%, 76.3% 1%, 77% 1.1%, 77.8% 1.2%, 78.5% 1.4%, 79.2% 1.5%, 79.9% 1.7%, 80.6% 1.9%, 81.3% 2%, 81.9% 2.2%, 82.5% 2.4%, 83.1% 2.6%, 83.7% 2.8%, 84.3% 3%, 84.8% 3.2%, 85.4% 3.5%, 85.9% 3.7%, 86.4% 4%, 86.9% 4.2%, 87.4% 4.5%, 87.9% 4.7%, 88.3% 5%, 88.8% 5.3%, 89.2% 5.6%, 89.7% 5.9%, 90.1% 6.2%, 90.5% 6.6%, 90.9% 6.9%, 91.3% 7.2%, 91.7% 7.6%, 92% 8%, 92.4% 8.3%, 92.8% 8.7%, 93.1% 9.1%, 93.4% 9.5%, 93.8% 9.9%, 94.1% 10.3%, 94.4% 10.8%, 94.7% 11.2%, 95% 11.7%, 95.3% 12.1%, 95.5% 12.6%, 95.8% 13.1%, 96% 13.6%, 96.3% 14.1%, 96.5% 14.6%, 96.8% 15.2%, 97% 15.7%, 97.2% 16.3%, 97.4% 16.9%, 97.6% 17.5%, 97.8% 18.1%, 98% 18.7%, 98.1% 19.4%, 98.3% 20.1%, 98.5% 20.8%, 98.6% 21.5%, 98.8% 22.2%, 98.9% 23%, 99% 23.7%, 99.1% 24.6%, 99.3% 25.4%, 99.4% 26.3%, 99.5% 27.2%, 99.5% 28.2%, 99.6% 29.2%, 99.7% 30.2%, 99.8% 31.3%, 99.8% 32.5%, 99.9% 33.8%, 99.9% 35.2%, 99.9% 36.8%, 100% 38.6%, 100% 40.7%, 100% 43.4%);
}
#page-login .bottomBar {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2em 0;
  background: var(--card);
}
#page-login .bottomBar .button {
  width: calc(100% - 40px);
  max-width: 560px;
}
#page-login .footer, #page-login .links {
  position: absolute;
  bottom: 2rem;
  display: flex;
  gap: 2em;
}
#page-login .footer a, #page-login .links a {
  color: var(--text-secondary);
  text-decoration: none;
}

.loggedIn #settings-list .setting.requireLogin {
  display: flex;
}

.signOutCover {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--background);
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}

.firebase-emulator-warning {
  top: 0px !important;
  bottom: auto !important;
  font-size: 11px;
  padding: 0px !important;
  border: 0 !important;
  background-color: red !important;
  height: 2px !important;
  overflow: hidden;
}

@media screen and (max-width: 640px) {
  #page-login .demo {
    flex-direction: column;
    gap: 4em;
    padding: 1.5em;
  }
  #page-login .manifesto {
    width: 100%;
    padding: 10em 2em;
    gap: 1.5em;
  }
  #page-login .deviceFrame.mobile {
    width: 100%;
  }
}
#page-goals {
  display: flex;
  flex-direction: column;
  z-index: 2;
}
#page-goals .card {
  display: flex;
  flex: 1;
  flex-direction: column;
  background: var(--surface);
  box-shadow: var(--shadow-level2);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  width: 100%;
  overflow: hidden;
}
#page-goals #goals-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  width: 100%;
  padding: 0 12px 0 24px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  touch-action: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
#page-goals > .spacer {
  pointer-events: none;
}
#page-goals > .handle {
  display: flex;
  justify-content: center;
  align-items: center;
  place-items: center;
  height: 36px;
  width: 100%;
  background: rgba(0, 0, 0, 0.0001);
  touch-action: none;
}
#page-goals > .handle .thumb {
  content: "";
  width: 48px;
  height: 6px;
  border-radius: 3px;
  background: rgba(var(--shading), 0.12);
  transition: background var(--timing-snappy);
}
#page-goals ::-webkit-scrollbar:horizontal {
  display: none;
}

#days {
  position: relative;
  width: 100%;
  height: calc(100% - 80px);
  overflow-y: hidden;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  white-space: nowrap;
  transition: opacity var(--timing-snappy);
  --goal-min-height: 36px;
}
#days.hidden {
  opacity: 0;
  pointer-events: none;
}
#days > .wrapper {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-y: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
#days > .wrapper > .day {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-y: scroll;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  --day-padding: 24px;
}
#days > .wrapper > .day::-webkit-scrollbar {
  display: none;
}
#days > .wrapper > .day:not(:has(.primaryGoal)) {
  overflow-y: auto;
}
#days > .wrapper > .day:not(:has(.primaryGoal)) .shadow {
  opacity: 1;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
  top: 0px;
  transform: translateY(-8px);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
#days > .wrapper > .day.hidden {
  opacity: 0;
}
#days > .wrapper > .day.modeMove {
  touch-action: none;
}
#days > .wrapper > .day .divider {
  background-color: rgba(var(--shading), 0.05);
  height: 2px;
  border-radius: 2px;
  margin: 0 24px;
}
#days > .wrapper > .day h4 {
  color: var(--text-emphatic);
  font-weight: var(--weight-bold);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
#days > .wrapper > .day .divider + h4 {
  margin: 0 24px;
  margin-top: 28px;
}
#days > .wrapper > .day .shadow {
  position: sticky;
  width: 100%;
  height: 8px;
  left: 0;
  top: -8px;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
}
#days > .wrapper > .day .shadow.visible {
  opacity: 1;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
}
#days > .wrapper > .day .notes {
  display: flex;
  flex-direction: column;
  position: relative;
  flex: 1;
  min-height: 0;
}
#days > .wrapper > .day .notes .controls {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 var(--column-padding);
  border-bottom: 1px solid var(--divider-primary);
  gap: 4px;
  min-height: 36px;
}
#days > .wrapper > .day .notes .controls .control {
  cursor: pointer;
  opacity: 0.87;
  line-height: 2.5em;
  height: 28px;
  width: 28px;
  display: grid;
  place-content: center;
  position: relative;
  transition: scale 0.15s;
}
#days > .wrapper > .day .notes .controls .control.active {
  opacity: 1;
  background-color: var(--selection);
  border-radius: var(--radius-xsmall);
}
#days > .wrapper > .day .notes .controls .control:active {
  scale: 0.85;
}
#days > .wrapper > .day .notes .controls .control:active .icon {
  transform: none;
}
#days > .wrapper > .day .notes .DraftEditor-root {
  min-height: 0;
  height: calc(100% - 36px);
  line-height: 1.618;
  flex-grow: 1;
  overflow-y: scroll;
  padding: 1.25em var(--column-padding);
  color: var(--text-primary);
  --block-margin: calc(var(--column-padding) / 2);
}
#days > .wrapper > .day .notes .DraftEditor-root .DraftEditor-editorContainer {
  margin-bottom: 30dvh;
}
#days > .wrapper > .day .notes .DraftEditor-root .public-DraftEditorPlaceholder-root {
  width: auto;
  color: var(--text-disabled);
}
#days > .wrapper > .day .notes .DraftEditor-root .public-DraftEditorPlaceholder-hasFocus {
  display: none;
}
#days > .wrapper > .day .notes .DraftEditor-root blockquote, #days > .wrapper > .day .notes .DraftEditor-root .public-DraftStyleDefault-pre {
  background-color: var(--note-block);
  padding: calc(var(--column-padding) / 3) calc(var(--column-padding) / 2);
  color: var(--text-secondary);
  border-radius: var(--radius-small);
}
#days > .wrapper > .day .notes .DraftEditor-root .public-DraftEditor-content .public-DraftStyleDefault-ol,
#days > .wrapper > .day .notes .DraftEditor-root .public-DraftEditor-content .public-DraftStyleDefault-ul,
#days > .wrapper > .day .notes .DraftEditor-root .public-DraftEditor-content .public-DraftStyleDefault-pre,
#days > .wrapper > .day .notes .DraftEditor-root .public-DraftEditor-content blockquote {
  margin: 1em 0;
}
#days > .wrapper > .day .notes .DraftEditor-root .public-DraftEditor-content blockquote + blockquote {
  margin-top: -0.5em;
}
#days > .wrapper > .day .notes .DraftEditor-root .public-DraftEditor-content h2, #days > .wrapper > .day .notes .DraftEditor-root .public-DraftEditor-content h3 {
  margin-bottom: 0.5em;
}
#days > .wrapper > .day .notes .DraftEditor-root .public-DraftEditor-content h2:not(:first-child), #days > .wrapper > .day .notes .DraftEditor-root .public-DraftEditor-content h3:not(:first-child) {
  margin-top: 1em;
}
#days > .wrapper > .day .notes .DraftEditor-root .public-DraftEditor-content .mediaContainer:empty {
  background-color: var(--color-soft-grey);
  width: 300px;
  height: 200px;
  max-width: 100%;
  border-radius: 0.5rem;
  position: relative;
  overflow: hidden;
}
#days > .wrapper > .day .notes .DraftEditor-root .public-DraftEditor-content .mediaContainer:empty:after {
  /* Diagonal gradient */
  content: "";
  position: absolute;
  top: 0;
  left: -12.5%;
  width: 125%;
  height: 100%;
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.125) 50%, rgba(0, 0, 0, 0) 100%);
  animation: shimmer 1.5s infinite cubic-bezier(0.4, 0.2, 0, 1);
}
#days > .wrapper > .day .notes .DraftEditor-root .public-DraftEditor-content .mediaContainer img {
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.03), 0px 1px 0.5px rgba(0, 0, 0, 0.12);
  border-radius: 0.35rem;
  max-height: 65dvh;
}
@keyframes shimmer {
  0% {
    translate: -75% 0;
  }
  50% {
    translate: 75% 0;
  }
  100% {
    translate: -75% 0;
  }
}
#days > .wrapper > .day .notes .DraftEditor-root .public-DraftEditor-content .public-DraftStyleDefault-pre {
  font-family: ui-monospace, "Menlo", "Consolas";
  font-size: 0.9em;
}
@media (any-hover: hover) {
  #days > .wrapper > .day .notes .controls > div {
    opacity: 0.75;
    border-radius: var(--radius-xsmall);
  }
  #days > .wrapper > .day .notes .controls > div:hover {
    opacity: 1;
    background-color: var(--hover);
  }
}
#days > .wrapper > .day .primaryGoal + .events {
  padding-top: 28px;
}
#days > .wrapper > .day .primaryGoal {
  width: 100%;
  text-align: center;
  position: relative;
  margin-bottom: 28px;
}
#days > .wrapper > .day .primaryGoal .actions {
  display: flex;
  -moz-user-select: none;
       user-select: none;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  transition: opacity 0.25s;
  margin: 0 24px;
}
#days > .wrapper > .day .primaryGoal .actions .button {
  touch-action: none;
  border-radius: var(--radius-small);
  flex: 1;
}
#days > .wrapper > .day .primaryGoal .container {
  outline: none;
  line-height: 1.4em;
  white-space: normal;
  background-color: var(--card);
  box-shadow: var(--shadow-level2);
  border-radius: 12px;
  min-height: 216px;
  position: relative;
  margin: 0 20px;
  justify-content: center;
  align-items: center;
  display: flex;
  overflow: hidden;
}
#days > .wrapper > .day .primaryGoal .container.completed {
  background-color: var(--accent-primary);
  color: var(--text-inverted);
  box-shadow: var(--shadow-colored-button);
  text-decoration: line-through;
}
#days > .wrapper > .day .primaryGoal .container.completed ::-moz-placeholder {
  color: rgba(255, 255, 255, 0.4);
}
#days > .wrapper > .day .primaryGoal .container.completed ::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
#days > .wrapper > .day .primaryGoal .container textarea {
  width: 100%;
  overflow: hidden;
  text-align: center;
  outline: none;
  padding: 0 32px;
  line-height: 1.4em;
  font-size: var(--font-h3);
  white-space: normal;
  border: none;
  resize: none;
  background: transparent;
  height: 32px;
  position: absolute;
}
#days > .wrapper > .day .primaryGoal .container .bloom {
  position: absolute;
  bottom: 0;
  height: 0;
  width: 100%;
  pointer-events: none;
  background-color: var(--accent-primary);
}
#days > .wrapper > .day .primaryGoal .container:empty:not(:focus):before {
  content: attr(data-placeholder);
  color: var(--text-tertiary);
}
#days > .wrapper > .day .notes {
  margin: 16px 24px;
}
#days > .wrapper > .day .notes .controls {
  display: none;
}
#days > .wrapper > .day .notes .public-DraftStyleDefault-pre,
#days > .wrapper > .day .notes blockquote {
  --column-padding: 1.5em;
}
#days > .wrapper > .day .task-list + .header {
  margin-top: 20px;
}
#days > .wrapper > .day .shadow + .header {
  margin-top: 16px;
}
#days > .wrapper > .day .header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  margin-bottom: 16px;
}
#days > .wrapper > .day .header .action {
  cursor: pointer;
  color: var(--text-tertiary);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
#days > .wrapper > .day .header .action.disabled {
  color: var(--text-disabled);
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
#days > .wrapper > .day .tasks + .daily-note {
  margin-top: 24px;
}
#days > .wrapper > .day .tasks .goals-container {
  display: flex;
  flex-direction: column;
}

#days .tasks[data-isselecting=true] {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

#goals-date-heading {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#goals-date-heading .calendar-day {
  font-size: var(--font-h3);
  color: var(--text-emphatic);
  font-weight: var(--weight-bold);
}
#goals-date-heading .calendar-date {
  font-size: var(--font-sub);
}

#dropIndicator {
  box-sizing: border-box;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  border-top: 1px solid var(--accent-primary);
  pointer-events: none;
}
#dropIndicator:before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  translate: 0 -50%;
}
#dropIndicator[data-indent=false]:before {
  border-left: none;
}

#goal-nav {
  display: flex;
  flex-direction: row;
  touch-action: none;
}
#goal-nav > div {
  width: 48px;
  height: 48px;
  display: flex;
  place-items: center;
  justify-content: center;
  cursor: pointer;
}
#goal-nav .icon {
  opacity: var(--icon-opacity);
}

@media screen and (min-width: 984px) {
  #page-goals {
    top: 32px;
    right: 16px;
    height: calc(100% - 32px);
    width: var(--page-width);
  }
  #toolbar {
    bottom: max(20px, 12px + env(safe-area-inset-bottom));
  }
  @supports not (-webkit-touch-callout: none) {
    #days > .day .primaryGoal .container {
      margin-right: 12px;
    }
    #days > .day .primaryGoal .actions {
      margin-right: 16px;
    }
  }
}
@media screen and (min-width: 640px) and (max-width: 984px) {
  #page-goals {
    top: 24px;
    bottom: max(24px, 8px + env(safe-area-inset-bottom));
    right: 24px;
    width: var(--page-width);
  }
  #page-goals .card {
    border-radius: 12px;
  }
  #toolbar {
    max-width: 384px;
    bottom: max(20px, env(safe-area-inset-bottom));
  }
}
@media screen and (min-width: 640px) {
  #page-goals {
    position: absolute;
  }
  #page-goals > .handle {
    display: none;
  }
}
@media screen and (max-width: 640px) {
  body {
    -webkit-text-size-adjust: none;
  }
  #toolbar {
    max-width: 384px;
    bottom: max(20px, env(safe-area-inset-bottom));
  }
}
@media (any-hover: none) and (pointer: coarse) {
  [data-component=taskList][data-mode=normal] .goal .selectorBox,
  [data-component=taskList][data-mode=normal] .goal .handleBox {
    opacity: 0;
    pointer-events: none;
  }
  [data-component=taskList][data-mode=select] .goal:active {
    scale: 0.97;
    transition: scale 0.2s;
  }
  [data-component=taskList][data-mode=select] .goal > textarea,
  [data-component=taskList][data-mode=select] .goal > .textField {
    pointer-events: none;
  }
}
/* SETTINGS PAGE */
#page-settings {
  display: block;
}
#page-settings.hidden {
  display: none;
  pointer-events: none;
}
#page-settings > .pageHeading {
  margin: 12px 0px 28px 0px;
}
#page-settings #profile.hidden + .button {
  margin-top: 40px;
}

#settings-list {
  margin-top: 20px;
}
#settings-list .setting {
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  line-height: 1em;
  height: 72px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
#settings-list .setting.requireLogin {
  display: none;
}
#settings-list .setting.loading {
  pointer-events: none;
  opacity: 0.5;
}
#settings-list .setting:last-child {
  border-bottom: none;
}
#settings-list .setting .labels {
  line-height: 1em;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: space-between;
  width: 100%;
}
#settings-list .setting .labels .sublabel {
  font-size: var(--font-sub);
  color: var(--text-tertiary);
}
#settings-list .setting .labels .sublabel::first-letter {
  text-transform: uppercase;
}
#settings-list .dropdown {
  position: absolute;
  right: 0px;
  top: 16px;
}

#page-feedback {
  display: none;
}
#page-feedback h1 {
  margin: 32px 0px;
}
#page-feedback .actions {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#page-feedback .feedback {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  line-height: 1.5;
  border-bottom: 1px solid var(--divider-secondary);
}
#page-feedback .feedback-content {
  font-size: var(--font-body);
  margin-bottom: 4px;
}
#page-feedback .feedback-user,
#page-feedback .feedback-timestamp,
#page-feedback .feedback-device {
  font-size: var(--font-sub);
  color: var(--text-tertiary);
}

#profile {
  display: flex;
  margin-bottom: 28px;
}
#profile #profile-pic > img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin-right: 16px;
}
#profile #profile-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
#profile #profile-role.bff {
  color: var(--color-green);
}
#profile #profile-role.jdoc {
  color: var(--color-red);
}

#btn-logIn.hidden,
#btn-logOut.hidden,
#profile.hidden {
  display: none;
}

@media screen and (max-width: 640px) {
  #page-settings > .pageHeading {
    margin: 12px 0px 28px 0px;
  }
}
#page-search {
  display: flex;
  flex-direction: column;
  opacity: 1;
}
#page-search.hidden {
  display: none;
  pointer-events: none;
}
#page-search > .pageHeading {
  margin: 12px 0px 24px 0px;
}
#page-search #search-header {
  display: flex;
  width: 100%;
  padding-bottom: 12px;
}
#page-search #search-header #search-input {
  width: 100%;
  background: var(--hover);
  border: 1px solid transparent;
  font-size: var(--font-body);
  line-height: 40px;
  border-radius: 6px;
  padding: 0 8px;
}
#page-search #search-header #search-input:focus {
  border: 1px solid var(--accent-primary);
}
#page-search #search-header .placeholder {
  position: absolute;
  top: 50%;
  transform: scale(1);
  pointer-events: none;
  transition: all var(--timing-snappy);
}
#page-search #search-header:focus-within .placeholder {
  top: 8px;
  font-size: var(--font-sub);
  color: var(--text-tertiary);
  font-weight: var(--weight-normal);
}
#page-search #search-header #search-input:not(:-moz-placeholder-shown) + .placeholder {
  top: 8px;
  font-size: var(--font-sub);
  color: var(--text-tertiary);
  font-weight: var(--weight-normal);
}
#page-search #search-header #search-input:not(:placeholder-shown) + .placeholder {
  top: 8px;
  font-size: var(--font-sub);
  color: var(--text-tertiary);
  font-weight: var(--weight-normal);
}
#page-search #search-results {
  top: 72px;
  bottom: 0px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: scroll;
  overflow-x: hidden;
  padding-top: 16px;
}
#page-search #search-results .day {
  display: flex;
  flex-direction: column;
  gap: 6px;
  line-height: var(--line-height-body);
  cursor: pointer;
}
#page-search #search-results .day .date {
  font-size: var(--font-sub);
  color: var(--text-tertiary);
}
#page-search #search-results .day .date .month {
  font-size: var(--font-micro);
  text-transform: uppercase;
}
#page-search #search-results .day .results {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#page-search #search-results .day .results .result {
  display: flex;
  flex-direction: column;
}
#page-search #search-results .day .results .result .text {
  font-size: var(--font-sub);
}
#page-search #search-results .day .results .result mark {
  background: var(--surface);
}
#page-search #search-results .no-results {
  display: flex;
  place-items: center;
  place-content: center;
  align-self: center;
  padding: 24px 0px;
}
#page-search #search-results .loader.ring {
  place-content: center;
  align-self: center;
  margin: 24px 0px;
  opacity: 0.75;
  scale: 1.5;
}

@media screen and (max-width: 640px) {
  #page-search > .pageHeading {
    margin: 36px 24px 24px 24px;
  }
  #page-search #search-results {
    gap: 24px;
  }
  #page-search #search-results .day {
    padding: 0 24px;
  }
}
#page-backlog {
  display: flex;
  flex-direction: column;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  --padding-vertical: 0.4em;
  --icon-margin-vertical: calc(var(--padding-vertical) * 0.5);
  --goal-text-line-height: 1.35;
  --backlog-left-margin: 24px;
  --goal-min-height: 32px;
}
#page-backlog.hidden {
  display: none;
  pointer-events: none;
}
#page-backlog > .pageHeading {
  margin: 12px 0px 28px var(--backlog-left-margin);
}
#page-backlog [data-component=add] {
  display: flex;
  gap: 0.5em;
  padding: var(--padding-vertical) 0;
  min-height: 1.5em;
  margin-left: var(--backlog-left-margin);
  border-bottom: 1px solid var(--divider-primary);
  padding-bottom: 0.75em;
}
#page-backlog [data-component=add] .icon {
  opacity: 0.45;
  width: 16px;
  transition: opacity var(--timing-snappy);
  margin-top: var(--icon-margin-vertical);
}
#page-backlog [data-component=add] [data-component=text] {
  outline: none;
  flex: 1;
  line-height: var(--goal-text-line-height);
}
#page-backlog [data-component=add] [data-component=text]:is(:empty):before {
  content: "Add to backlog";
  color: var(--text-tertiary);
}
#page-backlog [data-component=add]:has(:focus) .icon {
  opacity: 1;
}
#page-backlog [data-component=backlog] {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: 0.75em;
}
#page-backlog [data-component=taskList] .goal {
  padding-right: 0;
}
#page-backlog [data-component=taskList] .goal .selectorBox {
  min-width: 24px;
}
#page-backlog [data-component=taskList] .goal .contentBox {
  max-width: none;
}
#page-backlog [data-component=taskList] .goal.isNew {
  display: none;
}

@media screen and (max-width: 640px) {
  #page-backlog {
    padding-top: 24px;
  }
  #page-backlog .pageHeading {
    margin-bottom: 1em;
  }
  #page-backlog [data-component=add] {
    margin: 0;
    padding: var(--padding-vertical) var(--backlog-left-margin);
    padding-bottom: 0.75em;
  }
  #page-backlog [data-component=taskList] .goal {
    padding-right: 0.75em;
  }
}
@media screen and (min-width: 640px) {
  #sidebar {
    display: block;
    position: absolute;
    top: 32px;
    left: 16px;
    bottom: max(8px, env(safe-area-inset-bottom));
    width: var(--sidebar-width);
  }
  #nav-mobile {
    position: absolute;
    bottom: 0;
    left: 24px;
    width: calc(100% - 24px);
  }
  #page-settings,
  #page-search,
  #page-backlog {
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 72px;
    left: 0;
  }
  #page-search,
  #page-settings {
    left: 24px;
    width: calc(100% - 24px);
  }
  #page-search {
    overflow-y: scroll;
  }
}
@media screen and (min-width: 640px) and (max-width: 984px) {
  #sidebar {
    left: 24px;
    top: 24px;
    bottom: max(24px, env(safe-area-inset-bottom));
    --sidebar-width: calc(100% - var(--page-width) - 24px - 24px - 24px);
  }
}
#calendar {
  position: absolute;
  top: 0px;
  left: 24px;
  width: calc(100% - 24px);
  display: block;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  container-type: inline-size;
  container-name: calendar;
}
#calendar.hidden {
  display: none;
}
#calendar #calendar-nav {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  font-size: var(--font-body);
  z-index: 1;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}
#calendar #calendar-nav .icon {
  opacity: var(--icon-opacity);
  position: relative;
}
#calendar #calendar-nav .icon:after {
  content: "";
  width: calc(100% + 32px);
  height: calc(100% + 32px);
  transform: translate(-50%, -50%);
  position: absolute;
}
#calendar #calendar-day-headers {
  display: inline-grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  justify-content: space-between;
  width: 100%;
  line-height: 32px;
  text-align: center;
  color: var(--text-tertiary);
  margin-bottom: 12px;
}

#calendar-months .titleOfMonth {
  display: none;
}
#calendar-months .loadMoreContainer {
  width: 100%;
  height: 80px;
  display: grid;
  place-items: center;
  scroll-snap-align: start;
}
#calendar-months .loadMoreContainer .button.loadMore {
  box-shadow: none;
  width: 200px;
  border-radius: 18px;
  background: rgba(var(--shading), 0.03);
}
#calendar-months .loadMoreContainer .button.loadMore:active {
  background: rgba(var(--shading), 0.08);
}
#calendar-months .month {
  position: absolute;
  width: 100%;
  left: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  grid-template-columns: repeat(7, 1fr);
  display: inline-grid;
  gap: 6px;
  justify-content: space-between;
}
#calendar-months .month.active {
  display: block;
}
#calendar-months .month.hidden {
  display: none;
  pointer-events: none;
}
#calendar-months .month .dayContainer {
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  grid-template-columns: repeat(7, 1fr);
  display: inline-grid;
  gap: 6px;
  justify-content: space-between;
}
#calendar-months .day {
  color: var(--text-secondary);
  cursor: pointer;
  position: relative;
  text-align: center;
  display: flex;
  align-items: center;
  place-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.5em;
  border-radius: 0.5em;
  border: 1px solid transparent;
  box-sizing: border-box;
  padding: 0.5em 0px;
}
#calendar-months .day .label {
  color: var(--text-secondary);
}
#calendar-months .day .status {
  width: 8px;
  height: 8px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
#calendar-months .day .status.hasGoals {
  background: rgba(var(--shading), 0.12);
}
#calendar-months .day .status.complete {
  background: var(--accent-primary);
}
#calendar-months .day .status > .icon.size8.check {
  opacity: 0.45;
}
#calendar-months .day .status .dot.complete {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-primary);
}
#calendar-months .day .status .dot.incomplete {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(var(--shading), 0.2);
}
#calendar-months .day .heading {
  color: var(--text-tertiary);
  margin-bottom: 12px;
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
}
#calendar-months .day .heading .divider {
  flex: 1;
}
#calendar-months .day .heading .divider hr {
  background-color: var(--divider-primary);
  height: 1px;
  border: none;
}
#calendar-months .day.today {
  background: var(--divider-secondary);
}
#calendar-months .day.today .marker .outline {
  position: absolute;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1.5px solid var(--text-primary);
  border-radius: 9px;
}
#calendar-months .day.today .marker > .icon {
  display: block;
  background-position-x: 0px;
  opacity: 0.25;
}
#calendar-months .day.today.complete {
  background: var(--accent-primary);
}
#calendar-months .day.selected {
  background: var(--accent-primary);
  box-shadow: 0px 2px 8px rgba(var(--color-green-rgb), 0.08);
}
#calendar-months .day.selected .label {
  color: var(--light-text-on-dark);
}
#calendar-months .day.selected .status .dot.complete {
  background-color: var(--color-white);
}
#calendar-months .day.complete {
  color: var(--text-inverted);
}
#calendar-months .day.complete .marker {
  background: var(--accent-primary);
}
#calendar-months .day.selected .marker.complete {
  background: var(--color-white);
}
#calendar-months .day.target {
  box-shadow: inset 0px 0px 0px 1px var(--accent-primary);
}
#calendar-months .day.filler .label {
  color: var(--text-disabled);
}
#calendar-months .day:nth-child(7n) {
  border-right: none;
}

@container calendar (max-width:280px) {
  #calendar-day-headers {
    font-size: var(--font-sub);
  }
  #calendar-months {
    font-size: var(--font-sub);
  }
  #calendar-months .month {
    gap: 0.25em;
  }
  #calendar-months .month .day {
    gap: 0.25em;
    padding: 0.35em 0px 0.45em 0px;
    border-radius: var(--radius-small);
  }
}
@media screen and (max-width: 640px) {
  #calendar {
    top: env(safe-area-inset-top);
    width: 100%;
    height: 100%;
    left: 0;
  }
  #calendar #calendar-months {
    position: absolute;
    width: 100%;
    height: calc(100% - 128px);
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    padding-bottom: 128px;
    display: grid;
    place-items: center;
  }
  #calendar #calendar-months .month.hidden {
    display: grid;
    pointer-events: auto;
  }
  #calendar .titleOfMonth {
    padding: 0 20px;
    padding-bottom: 12px;
    font-size: var(--font-sub);
    color: var(--text-tertiary);
    margin-bottom: 16px;
    margin-top: 64px;
    display: flex;
    width: 100%;
  }
  #calendar .loadMoreContainer + .titleOfMonth {
    margin-top: 24px;
  }
  #calendar .month {
    position: relative;
    display: inline-grid;
    scroll-snap-align: start;
    padding: 0 8px;
  }
  #calendar .month .day.filler {
    opacity: 0;
    pointer-events: none;
  }
  #calendar #calendar-day-headers {
    padding: 0 8px;
  }
  #calendar #calendar-nav {
    padding: 0 20px;
    padding-top: 24px;
    text-align: left;
    height: auto;
  }
  #calendar #calendar-nav #calendar-nav-title {
    flex: 1;
    font-size: var(--font-h3);
    padding-top: 12px;
    padding-bottom: 24px;
  }
  #calendar #calendar-nav #calendar-nav-back {
    display: none;
  }
  #calendar #calendar-nav #calendar-nav-next {
    display: none;
  }
}
.timer.widget {
  position: absolute;
  bottom: 80px;
  width: 100%;
  background: var(--surface);
  box-shadow: var(--shadow-level2);
  border-radius: 8px;
  padding: 16px;
  gap: 8px;
  display: flex;
  flex-direction: column;
}
.timer.widget .presets {
  display: flex;
  gap: 12px;
  color: var(--text-tertiary);
  align-items: center;
}
.timer.widget .presets .spacer {
  flex-grow: 1;
}
.timer.widget .presets .close {
  opacity: var(--icon-opacity);
  position: relative;
}
.timer.widget .presets .close:after {
  content: "";
  width: calc(100% + 16px);
  height: calc(100% + 16px);
  transform: translate(-50%, -50%);
  position: absolute;
}
.timer.widget .presets > div:hover {
  cursor: pointer;
  color: var(--text-primary);
}
.timer.widget .precise {
  min-height: 40px;
  position: relative;
  display: flex;
  align-items: center;
}
.timer.widget .precise input[type=range] {
  width: 100%;
  opacity: 0;
}
.timer.widget .precise .track {
  position: absolute;
  width: 100%;
  left: 0;
  top: 18px;
  height: 4px;
  background: rgba(var(--shading), 0.12);
  pointer-events: none;
}
.timer.widget .precise .track .fill {
  height: 4px;
  width: 0px;
  background: var(--accent-primary);
}
.timer.widget .precise .track .thumb {
  position: absolute;
  top: 50%;
  left: 0px;
  transform: translateY(-50%);
  background: var(--surface);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: var(--shadow-level2);
}
.timer.widget .body {
  display: flex;
  align-items: center;
}
.timer.widget .body .time {
  flex-grow: 1;
  font-size: var(--font-h2);
}
.timer.widget .body > *:last-child {
  cursor: pointer;
}

@media screen and (max-width: 420px) {
  .timer.widget {
    width: calc(100% - 16px);
    left: 8px;
  }
}
@media (prefers-color-scheme: dark) {
  .timer.widget .precise .track {
    background: rgba(var(--shading), 0.08);
  }
  .timer.widget .precise .track .thumb {
    background: var(--accent-primary);
  }
}
html[data-theme=blueberry] .timer.widget .precise .track {
  background: rgba(var(--shading), 0.08);
}
html[data-theme=blueberry] .timer.widget .precise .track .thumb {
  background: var(--accent-primary);
}

#joinBeta .card {
  display: flex;
  flex-direction: column;
  width: calc(100% - 40px);
  padding: 2em;
  max-width: 400px;
  background: var(--surface);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-level2);
  line-height: 1.45em;
  color: var(--text-secondary);
  gap: 1.25em;
}
#joinBeta .card h3 {
  color: var(--text-emphatic);
}
#joinBeta .card .subtext {
  color: var(--text-secondary);
}
#joinBeta .card input[type=text] {
  line-height: 36px;
  font-size: var(--text-normal);
  border: 1px solid var(--divider-primary);
  border-radius: var(--radius-small);
  padding: 0 0.5em;
  text-align: center;
  background: var(--card);
}
#joinBeta .card input[type=text]:focus {
  border-color: var(--accent-primary);
}

.tokenManager .button.connect {
  margin: 16px;
  margin-bottom: 0px;
}
.tokenManager .empty {
  line-height: 1.45em;
  color: var(--text-primary);
  padding: 0 20px;
  padding-bottom: 8px;
}
.tokenManager .token {
  display: flex;
  padding: 0 20px;
  align-items: center;
}
.tokenManager .token .info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 0.4em;
}
.tokenManager .token .info .email {
  color: var(--text-secondary);
}
.tokenManager .token .remove {
  width: 64px;
  height: 64px;
  display: flex;
  justify-content: right;
  align-items: center;
  cursor: pointer;
}

.toast {
  background: var(--card);
  box-shadow: var(--shadow-level3);
  position: fixed;
  top: 24px;
  left: 50%;
  translate: -50% 0%;
  display: flex;
  min-height: 56px;
  width: clamp(320px, 60%, 640px);
  border-radius: 28px;
  align-items: center;
  padding: 0 20px;
}
.toast .message {
  flex-grow: 1;
}

dialog.move {
  font-size: var(--font-body);
}
dialog.move > .action {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 12px;
  padding: 0.85em 0.5em;
  border-radius: 4px;
  min-height: 36px;
  transition: background var(--timing-snappy) var(--ease-standard);
}
dialog.move > .action:hover {
  background-color: var(--hover);
  cursor: pointer;
}
dialog.move .labels {
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}
dialog.move .labels .label {
  color: var(--text-primary);
}
dialog.move .labels .sublabel {
  color: var(--text-tertiary);
}
dialog.move .moveMiniCal {
  margin: 0 16px;
  --text-disabled: rgba(var(--shading), 0.35);
}
dialog.move .moveMiniCal .quickActions {
  display: flex;
  gap: 0.5em;
  margin: 0.5em;
}
dialog.move .moveMiniCal .quickActions button {
  flex: 1;
}
dialog.move .moveMiniCal .actions .action {
  display: flex;
  align-items: center;
  padding: 1em 0.25em;
  cursor: pointer;
  gap: 1em;
}
dialog.move .moveMiniCal .actions .action .mini {
  width: 24px;
  height: 24px;
  position: relative;
}
dialog.move .moveMiniCal .actions .action .mini .label.day {
  position: absolute;
  width: 24px;
  height: 24px;
  top: 0;
  display: grid;
  place-items: center;
  font-size: var(--font-micro);
  font-weight: var(--weight-bold);
}
dialog.move .moveMiniCal .actions .action .text {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  flex: 1;
}
dialog.move .moveMiniCal .actions .action .text :nth-child(2) {
  color: var(--text-tertiary);
}
dialog.move .moveMiniCal .actions .action > .icon:last-child {
  opacity: 0.45;
}
dialog.move .moveMiniCal .actions .action + .action {
  border-top: 1px solid var(--divider-secondary);
}
dialog.move .moveMiniCal .days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
dialog.move .moveMiniCal .days .day {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  background: var(--surface);
  cursor: pointer;
  min-height: 3em;
  border-radius: var(--radius-small);
  border: 1px solid transparent;
  margin: 0;
  box-shadow: none;
  line-height: 1em;
}
dialog.move .moveMiniCal .days .day.past, dialog.move .moveMiniCal .days .day.origin {
  pointer-events: none;
  color: var(--text-disabled);
}
dialog.move .moveMiniCal .days .day.today {
  background-color: var(--hover);
}
dialog.move .moveMiniCal .days .day.today.past, dialog.move .moveMiniCal .days .day.today.origin {
  color: var(--text-disabled);
  background: none;
}
dialog.move .moveMiniCal .days .day .label {
  font-size: var(--font-micro);
  text-transform: uppercase;
}
dialog.move .moveMiniCal .days .day.heading {
  color: var(--text-tertiary);
}

@media (hover: hover) {
  dialog.move .moveMiniCal .days .day:not(.heading):hover {
    background-color: var(--selection);
  }
}
dialog.remind .pickers {
  display: flex;
  gap: 16px;
  margin: 16px;
  margin-bottom: 8px;
}
dialog.remind .pickers input {
  flex: 1;
  line-height: 36px;
  border-radius: var(--radius-small);
  background-color: var(--background);
  border: none;
  padding: 0 0.5rem;
}
dialog.remind button:not(:last-child) {
  width: calc(100% - 32px);
  margin: 16px;
  margin-bottom: -4px;
}

.goalGhost {
  position: fixed;
  display: flex;
  align-items: center;
  gap: 0.75em;
  min-height: 36px;
  width: clamp(240px, 80%, 344px);
  background-color: var(--surface);
  color: inherit;
  border-radius: var(--radius-small);
  padding: 0 20px 0 0;
  box-shadow: var(--shadow-level2);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
  cursor: grabbing;
}
.goalGhost.multiple {
  width: 176px;
  padding: 0 0.5rem;
}
.goalGhost.multiple .count {
  background: var(--accent-primary);
  color: var(--light-text-on-dark);
  width: 1.25rem;
  line-height: 1.25rem;
  border-radius: 0.25rem;
  text-align: center;
}
.goalGhost p {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  flex: 1;
  line-height: 36px;
}
.goalGhost .icon {
  opacity: 0.6525;
}
.goalGhost .handle {
  transform: translateX(8px);
}

@media screen and (max-width: 600px) {
  .goalGhost {
    width: 100%;
  }
}
.spinner {
  position: relative;
}
.spinner .ring {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  top: 0;
  left: 0;
  border: 1.5px solid rgba(var(--shading), 1);
  animation: 2s breathe ease-in-out infinite;
}
.spinner path {
  stroke: rgba(var(--shading), 1);
}

.loader.ring {
  scale: 2;
}
.loader.ring svg circle, .loader.ring svg path {
  stroke: rgba(var(--shading), 0.45);
}
.loader.ring svg circle {
  animation: 2s borderSpin ease-in-out infinite;
  stroke-dasharray: 100;
  transform-origin: center center;
}
@keyframes borderSpin {
  0% {
    stroke-dashoffset: 100;
    rotate: -90deg;
  }
  50% {
    stroke-dashoffset: 0;
    rotate: 270deg;
  }
  100% {
    stroke-dashoffset: 100;
    rotate: 630deg;
  }
}

#debugger {
  position: fixed;
  bottom: 0;
  left: 0;
  font-family: monospace;
  font-size: 0.75em;
  background: rgba(0, 0, 0, 0.75);
  color: white;
  padding: 1.5em;
  line-height: 1.35;
  display: flex;
  flex-direction: column;
  gap: 1em;
  max-width: 100%;
  white-space: pre-wrap;
}

#app[data-theme=default],
.view[data-theme=default] {
  --accent-primary: hsl(131 31% 53%);
  --selection: hsla(131, 31%, 53%, 0.12);
  --tooltip: var(--accent-primary);
}
@media (prefers-color-scheme: light) {
  #app[data-theme=default],
  .view[data-theme=default] {
    --background: hsl(60, 10%, 97%);
    --text-emphasis: hsl(0 0% 2%);
    --text-primary: hsl(60 5% 5%);
    --text-secondary: hsl(60 3% 35%);
    --text-tertiary: hsl(60 2% 55%);
    --text-disabled: hsl(60 0% 65%);
    --card: #FFF;
    --surface: #FFF;
    --note-block: var(--background);
    --hover: hsla(60, 5%, 15%, 0.05);
    --scrim: rgba(0,0,0, 0.25);
    --surface-hover: rgba(0,0,0,0.05);
    --button: white;
    --button-disabled: hsl(60, 9%, 98%);
    --light-text-on-dark: #FFF;
  }
}
@media (prefers-color-scheme: dark) {
  #app[data-theme=default],
  .view[data-theme=default] {
    --background: hsl(60 5% 8%);
    --surface: hsl(60 2% 12%);
    --surface-hover: hsl(120 1% 20%);
    --card: hsl(60 2% 20%);
    --hover: rgba(var(--shading), 0.05);
    --note-block: var(--surface-hover);
  }
  #app[data-theme=default] dialog,
  .view[data-theme=default] dialog {
    color: var(--text-primary);
  }
  #app[data-theme=default] dialog::backdrop,
  .view[data-theme=default] dialog::backdrop {
    background: rgba(0, 0, 0, 0.65);
  }
}
#app[data-theme=default] #calendar-months .day.selected .icon.check,
.view[data-theme=default] #calendar-months .day.selected .icon.check {
  background-position-x: -8px;
  opacity: 1;
}

#app[data-theme=swiss],
.view[data-theme=swiss] {
  --radius-xsmall: 0px;
  --radius-small: 0px;
  --radius-mid: 0px;
  --button-disabled: rgba(var(--shading), 0.02);
  --accent-primary: hsl(14, 84%, 54%);
  --accent-rgb: 236,87,41;
  --selection: rgba(var(--accent-rgb), 0.12);
  --color-green: #00973B;
  --shadow-button: none;
}
@media (prefers-color-scheme: light) {
  #app[data-theme=swiss],
  .view[data-theme=swiss] {
    --background: #F3F3F5;
    --accent-primary: #EC5729;
    --accent-secondary: #0079C7;
    --button: #F0F0F0;
    --overlay: #363636;
    --surface: #FFFFFF;
    --card: #FFFFFF;
    --note-block: hsl(14, 0%, 96%);
    --shadow-level2: 0px 1px 0px inset rgba(255,255,255,1),
    	0px 0px 0px 1px rgba(0, 0, 0, 0.08);
    --shadow-level3: 0px 4px 8px rgba(0, 0, 0, 0.08),
    	0px 12px 24px -4px rgba(0, 0, 0, 0.08);
  }
  #app[data-theme=swiss] .icon.size24,
  .view[data-theme=swiss] .icon.size24 {
    background-position-x: -48px;
  }
  #app[data-theme=swiss] .icon.size16,
  .view[data-theme=swiss] .icon.size16 {
    background-position-x: -32px;
  }
}
@media (prefers-color-scheme: dark) {
  #app[data-theme=swiss],
  .view[data-theme=swiss] {
    --background: #1A1A1A;
    --accent-secondary: #0079C7;
    --button: #323232;
    --overlay: #323232;
    --surface: #262626;
    --card: hsl(0, 0%, 18%);
    --note-block: hsl(0, 0%, 20%);
    --shadow-level2: 0px 1px 0px inset rgba(255,255,255,0.03),
    	0px 0px 0px 1px rgba(0, 0, 0, 0.08);
    --shadow-level3: 0px 4px 8px rgba(0, 0, 0, 0.08),
    	0px 12px 24px -4px rgba(0, 0, 0, 0.08);
  }
  #app[data-theme=swiss] .icon.size24,
  .view[data-theme=swiss] .icon.size24 {
    background-position-x: -72px;
  }
  #app[data-theme=swiss] .icon.size16,
  .view[data-theme=swiss] .icon.size16 {
    background-position-x: -48px;
  }
}
#app[data-theme=swiss] #btn-feedback,
#app[data-theme=swiss] #cover-login,
.view[data-theme=swiss] #btn-feedback,
.view[data-theme=swiss] #cover-login {
  background-color: var(--color-white);
}
#app[data-theme=swiss] .button,
.view[data-theme=swiss] .button {
  border-radius: var(--radius-small);
  box-shadow: var(--shadow-button);
}
#app[data-theme=swiss] .dropdown,
.view[data-theme=swiss] .dropdown {
  background-color: var(--overlay);
  color: var(--color-white);
  box-shadow: var(--shadow-colored-button);
  border-radius: 6px;
}
#app[data-theme=swiss] .dropdown > .action,
.view[data-theme=swiss] .dropdown > .action {
  padding-top: 10px;
  padding-bottom: 10px;
}
#app[data-theme=swiss] .dropdown > .action .icon,
.view[data-theme=swiss] .dropdown > .action .icon {
  background-position-x: -16px;
}
#app[data-theme=swiss] .dropdown > .action:hover,
.view[data-theme=swiss] .dropdown > .action:hover {
  background-color: rgba(var(--shading-inverted), 0.05);
}
#app[data-theme=swiss] .dropdown .heading,
.view[data-theme=swiss] .dropdown .heading {
  color: rgba(var(--shading-inverted), 0.75);
}
#app[data-theme=swiss] .dropdown .labels .sublabel,
.view[data-theme=swiss] .dropdown .labels .sublabel {
  color: rgba(var(--shading-inverted), 0.75);
}
#app[data-theme=swiss] #calendar-months .day,
.view[data-theme=swiss] #calendar-months .day {
  border-radius: 0;
}
#app[data-theme=swiss] #calendar-months .day .marker,
.view[data-theme=swiss] #calendar-months .day .marker {
  border-radius: 0;
}
#app[data-theme=swiss] #calendar-months .day.selected .icon.check,
.view[data-theme=swiss] #calendar-months .day.selected .icon.check {
  background-position-x: -8px;
  opacity: 1;
}
#app[data-theme=swiss] #days .day .primaryGoal .container,
.view[data-theme=swiss] #days .day .primaryGoal .container {
  border-radius: 0px;
  margin-bottom: 12px;
}
#app[data-theme=swiss] #days .day .primaryGoal .container.completed,
.view[data-theme=swiss] #days .day .primaryGoal .container.completed {
  background-color: var(--accent-primary);
}
#app[data-theme=swiss] #days .day .primaryGoal .container .bloom,
.view[data-theme=swiss] #days .day .primaryGoal .container .bloom {
  background-color: var(--accent-primary);
}
#app[data-theme=swiss] #days .day .primaryGoal .button,
.view[data-theme=swiss] #days .day .primaryGoal .button {
  background-color: var(--divider-secondary);
  line-height: 40px;
}
#app[data-theme=swiss] #days .goal .selector,
.view[data-theme=swiss] #days .goal .selector {
  width: 14px;
  height: 14px;
}
#app[data-theme=swiss] #goal-nav .icon,
.view[data-theme=swiss] #goal-nav .icon {
  opacity: 0.87;
}
#app[data-theme=swiss] #page-goals .card,
.view[data-theme=swiss] #page-goals .card {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}
#app[data-theme=swiss] #nav-mobile .tapTarget,
.view[data-theme=swiss] #nav-mobile .tapTarget {
  opacity: 0.87;
}
#app[data-theme=swiss] #goal-controls,
.view[data-theme=swiss] #goal-controls {
  border-radius: 4px;
}
#app[data-theme=swiss] #toolbar .control .icon,
.view[data-theme=swiss] #toolbar .control .icon {
  background-position-x: -48px;
}
#app[data-theme=swiss] dialog,
.view[data-theme=swiss] dialog {
  border-radius: var(--radius-small);
}
@media screen and (max-width: 640px) {
  #app[data-theme=swiss] #page-goals .card,
  .view[data-theme=swiss] #page-goals .card {
    border-radius: 0px;
  }
}
@media (prefers-color-scheme: dark) {
  #app[data-theme=swiss] #btn-feedback,
  #app[data-theme=swiss] #cover-login,
  .view[data-theme=swiss] #btn-feedback,
  .view[data-theme=swiss] #cover-login {
    background-color: var(--button);
  }
  #app[data-theme=swiss] .dropdown .heading,
  .view[data-theme=swiss] .dropdown .heading {
    color: var(--text-tertiary);
  }
  #app[data-theme=swiss] .dropdown .labels .sublabel,
  .view[data-theme=swiss] .dropdown .labels .sublabel {
    color: var(--text-tertiary);
  }
}

#app[data-theme=gravel],
.view[data-theme=gravel] {
  --radius-small: 6px;
  --radius-mid: 8px;
  --radius-large: 16px;
}
@media (prefers-color-scheme: light) {
  #app[data-theme=gravel],
  .view[data-theme=gravel] {
    --background: hsl(0 0% 97.5%);
    --text-emphatic: hsl(0 0% 0%);
    --text-primary: hsl(0 0% 0%);
    --text-secondary: hsl(0 0% 25%);
    --text-tertiary: hsl(0 0% 65%);
    --text-disabled: hsl(0 0% 65%);
    --accent-primary: hsl(0 0% 20%);
    --selection: rgba(0,0,0,0.08);
    --note-block: rgba(0,0,0,0.05);
    --divider-primary: hsl(0 0% 88%);
    --divider-secondary: hsl(0 0% 92%);
    --shadow-level2: 0px 0px 0px 1px var(--divider-primary);
    --icon-opacity: 1;
  }
}
@media (prefers-color-scheme: dark) {
  #app[data-theme=gravel],
  .view[data-theme=gravel] {
    --background: hsl(0 0% 8%);
    --accent-primary: hsl(0 0% 30%);
    --text-primary: hsl(0 0% 87%);
    --text-secondary: hsl(0 0% 70%);
    --text-tertiary: hsl(0 0% 45%);
    --text-disabled: hsl(0 0% 45%);
    --card: hsl(0 0% 16%);
    --surface: hsl(0 0% 12%);
    --note-block: var(--card);
    --selection: rgba(255,255,255,0.08);
  }
  #app[data-theme=gravel] .button,
  .view[data-theme=gravel] .button {
    background: var(--card);
    box-shadow: none;
    border-radius: var(--radius-small);
  }
  #app[data-theme=gravel] dialog,
  .view[data-theme=gravel] dialog {
    color: var(--text-primary);
  }
}
#app[data-theme=gravel] #days .day .primaryGoal .container,
.view[data-theme=gravel] #days .day .primaryGoal .container {
  box-shadow: var(--shadow-level2);
  border-radius: var(--radius-large);
}
#app[data-theme=gravel] #days .day .primaryGoal .container.completed,
.view[data-theme=gravel] #days .day .primaryGoal .container.completed {
  background-color: var(--accent-primary);
  color: var(--light-text-on-dark);
  box-shadow: none;
}
#app[data-theme=gravel] #days .goal .checkBox .checkboxChecked,
#app[data-theme=gravel] #days .goal .checkBox .checkboxCanceled,
.view[data-theme=gravel] #days .goal .checkBox .checkboxChecked,
.view[data-theme=gravel] #days .goal .checkBox .checkboxCanceled {
  opacity: 0.45;
}
#app[data-theme=gravel] #calendar-months .day,
.view[data-theme=gravel] #calendar-months .day {
  border-radius: var(--radius-small);
}
#app[data-theme=gravel] #calendar-months .day .marker.complete,
.view[data-theme=gravel] #calendar-months .day .marker.complete {
  background: var(--text-secondary);
}
#app[data-theme=gravel] #calendar-months .day.selected .icon.check,
.view[data-theme=gravel] #calendar-months .day.selected .icon.check {
  background-position-x: -8px;
  opacity: 1;
}

#app[data-theme=blueberry],
.view[data-theme=blueberry] {
  --background: #1A1525;
  --surface: #32303E;
  --card: #3F3E4D;
  --note-block: var(--surface);
  --shading: 255,255,255;
  --accent-primary: #5C6DD9;
  --accent-rgb: 92,109,217;
  --text-emphatic: #FFF;
  --text-primary: #FFF;
  --text-secondary: hsl(0 0% 75%);
  --text-tertiary: hsla(0, 0%, 100%, 0.45);
  --text-disabled: hsla(0, 0%, 100%, 0.3);
  --selection: rgba(var(--accent-rgb), 0.15);
  --divider-primary: rgba(var(--shading), 0.1);
  --divider-secondary: rgba(var(--shading),0.05);
  --icon-opacity: 1;
  background-color: var(--background);
  --shadow-level2: 0px 1px 2px rgba(0, 0, 0, 0.05),
  	0px 1px 0px inset rgba(255,255,255,0.08),
  	0px 2px 4px rgba(0, 0, 0, 0.02),
  	0px 0px 0px 1px rgba(0, 0, 0, 0.12);
  --shadow-button: 0px -1px 0px 0px hsla(0,0%,100%,.04),
  	0px 0px 0px 1px hsla(0,0%,100%,.12),
  	0px 0px 1px 0px rgba(0,0,0,.04),
  	0px 2px 2px 0px rgba(0,0,0,.04),
  	0px 4px 2px 0px rgba(0,0,0,.04),
  	0px 6px 3px 0px rgba(0,0,0,.04);
}
#app[data-theme=blueberry] .icon.size24,
.view[data-theme=blueberry] .icon.size24 {
  background-position-x: -24px;
}
#app[data-theme=blueberry] .icon.size16,
.view[data-theme=blueberry] .icon.size16 {
  background-position-x: -16px;
}
#app[data-theme=blueberry] .icon.size8,
.view[data-theme=blueberry] .icon.size8 {
  background-position-x: -8px;
}
#app[data-theme=blueberry] dialog,
.view[data-theme=blueberry] dialog {
  color: var(--text-primary);
}
#app[data-theme=blueberry] dialog::backdrop,
.view[data-theme=blueberry] dialog::backdrop {
  background: rgba(0, 0, 0, 0.54);
}
#app[data-theme=blueberry] #calendar-months .day.selected .icon.check,
.view[data-theme=blueberry] #calendar-months .day.selected .icon.check {
  background-position-x: -8px;
  opacity: 1;
}
#app[data-theme=blueberry] .moveMiniCal,
.view[data-theme=blueberry] .moveMiniCal {
  color: var(--text-primary);
}
#app[data-theme=blueberry] .navBar,
.view[data-theme=blueberry] .navBar {
  background-color: transparent;
}
#app[data-theme=blueberry] .week.one, #app[data-theme=blueberry] .week.three, #app[data-theme=blueberry] .week.five,
.view[data-theme=blueberry] .week.one,
.view[data-theme=blueberry] .week.three,
.view[data-theme=blueberry] .week.five {
  background-color: transparent;
}
#app[data-theme=blueberry] .week .day .wrapper,
.view[data-theme=blueberry] .week .day .wrapper {
  background-color: transparent;
}

@media (prefers-color-scheme: light) {
  :root {
    --opacity-icon: 0.45;
    --opacity-icon-light: 0.25;
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: #121212;
    --text-emphatic: #FFF;
    --text-primary: #FFF;
    --text-secondary: #CCC;
    --text-tertiary: rgba(255,255,255,0.45);
    --text-inverted: #222;
    --text-disabled: rgba(255,255,255,0.25);
    --link: #58a6ff;
    --shading: 255,255,255;
    --shading-inverted: 0,0,0;
    --card: #333;
    --surface: #232323;
    --divider-primary: rgba(255,255,255,0.12);
    --divider-secondary: rgba(255,255,255,0.05);
    --button: #4a4a4a;
    --opacity-icon: 0.25;
    --opacity-icon-light: 0.1;
    --shadow-button: 0px -1px 0px 0px hsla(0,0%,100%,.04),
    	0px 0px 0px 1px hsla(0,0%,100%,.12),
    	0px 0px 1px 0px rgba(0,0,0,.04),
    	0px 2px 2px 0px rgba(0,0,0,.04),
    	0px 4px 2px 0px rgba(0,0,0,.04),
    	0px 6px 3px 0px rgba(0,0,0,.04);
    --shadow-lifted: 0px 1px 3px rgba(0, 0, 0, 0.1),
    	0px 6px 12px rgba(0, 0, 0, 0.05),
    	0px 0px 0px 1px rgba(0, 0, 0, 0.5),
    	inset 0px 1px 0px 0px rgba(255,255,255,0.05);
    --shadow-level2: 0px 1px 2px rgba(0, 0, 0, 0.05),
    	0px 1px 0px inset rgba(255,255,255,0.08),
    	0px 2px 4px rgba(0, 0, 0, 0.02),
    	0px 0px 0px 1px rgba(0, 0, 0, 0.12);
  }
  #calendar-months .day .label {
    color: var(--text-tertiary);
  }
  #goal-main:hover {
    background-color: var(--surface-hover);
  }
  dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
  }
  .dialog textarea {
    background: var(--surface);
    color: var(--text-primary);
  }
  #calendar .day.today .marker .outline {
    border-color: white;
    opacity: 0.2;
  }
  #calendar .day.today.complete .marker .outline {
    opacity: 1;
  }
  .page .day .primaryGoalContainer.completed {
    color: var(--text-primary);
  }
  input {
    color-scheme: dark;
  }
}
@media screen and (min-width: 640px) {
  #scroll-wrapper {
    position: absolute;
    top: 32px;
    left: 16px;
    bottom: 0px;
    width: var(--sidebar-width);
    display: block;
  }
  #left-container {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
  }
  #left-container #nav-mobile {
    width: 100%;
    position: absolute;
    bottom: 0px;
  }
  #left-container #page-settings,
  #left-container #page-search {
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 72px;
    left: 0;
  }
  #left-container #page-search {
    overflow-y: scroll;
  }
  #calendar {
    will-change: transform;
  }
}
@media screen and (max-width: 640px) {
  ::-webkit-scrollbar {
    display: none;
  }
  body {
    height: 100%;
    overflow: hidden;
  }
  #app {
    height: 100%;
    width: 100%;
    max-width: 640px;
    overflow: hidden;
  }
  #scroll-wrapper {
    position: absolute;
    top: 0;
    width: 100%;
    height: calc(100% - 72px - env(safe-area-inset-bottom));
    will-change: height, z-index;
    overflow: hidden;
  }
  #sidebar {
    position: absolute;
    width: 100%;
    height: calc(100dvh - 72px - env(safe-area-inset-bottom));
  }
  #sidebar #nav-mobile {
    position: absolute;
    bottom: 0px;
    width: 100%;
    border-top: 1px solid var(--divider-secondary);
    background-color: var(--background);
  }
  #sidebar #page-settings,
  #sidebar #page-search,
  #sidebar #page-backlog {
    height: calc(100% - 72px);
    overflow-y: scroll;
    top: 0px;
    width: 100%;
    position: absolute;
  }
  dialog {
    width: calc(100% - 24px);
  }
  #toolbar {
    position: fixed;
  }
  #page-goals {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: block;
    scroll-snap-type: y mandatory;
    position: absolute;
  }
  #page-goals > .handle {
    cursor: pointer;
  }
  #page-goals .spacer {
    width: 100%;
    height: calc(100% - 72px - env(safe-area-inset-bottom));
    scroll-snap-stop: always;
    scroll-snap-align: start;
  }
  #page-goals .card {
    flex: auto;
    height: calc(100% - 36px);
    scroll-snap-stop: always;
    scroll-snap-align: start;
  }
  #page-goals.docked #days {
    pointer-events: none;
  }
  #page-goals.docked #goal-nav {
    pointer-events: none;
  }
  #page-settings {
    padding: 24px;
  }
  #page-search #search-header #search-input {
    width: calc(100% - 40px);
    margin-left: 20px;
  }
  #page-search #search-header .placeholder {
    left: 20px;
  }
  #page-feedback {
    padding: 24px;
    padding-top: calc(32px + env(safe-area-inset-top));
    height: 100%;
    transform: translate3d(100%, 0, 0);
    transition: var(--timing-standard);
    z-index: 1;
  }
  #page-feedback.active {
    transform: translate3d(0, 0, 0);
  }
  #days {
    width: 100%;
  }
  #days .daily-note .header .action {
    display: none;
  }
  #page-goals > .header,
  #page-calendar > .header {
    padding-left: 24px;
    padding-right: 12px;
    height: 72px;
    margin-top: calc(0px + env(safe-area-inset-top));
  }
  #page-home > img {
    width: 60%;
  }
}
@media screen and (max-width: 420px) {
  .overlay {
    opacity: 1;
    visibility: visible;
    transition: all 0.25s, transform 0s;
    background: rgba(0, 0, 0, 0.2);
  }
  .overlay.center {
    place-items: start;
    padding-top: 20px;
  }
  .overlay.hidden {
    visibility: hidden;
    opacity: 0;
    background: rgba(0, 0, 0, 0);
  }
  #page-goals {
    position: absolute;
  }
  #days .day .primaryGoal .container {
    min-height: 176px !important;
  }
  #days .day .primaryGoalSection {
    margin: 20px;
    margin-top: 16px;
  }
  #days .day .secondary .header-tasks {
    padding: 0 20px;
  }
  #days .goal {
    -webkit-user-select: none;
    -moz-user-select: none;
         user-select: none;
    margin: 0;
    padding-right: 16px;
  }
  .dropdown {
    top: auto !important;
    bottom: calc(16px + env(safe-area-inset-bottom));
    left: 16px !important;
    width: calc(100% - 32px);
    transform: translateY(0);
    transition: all var(--timing-snappy) 0.1s;
    transition-timing-function: var(--ease-standard);
    font-size: var(--font-body);
  }
  .dropdown > .action {
    padding: 12px;
    min-height: 48px;
  }
  .overlay.hidden .dropdown {
    transform: translateY(200px);
  }
  .page .day .goal.indent {
    padding-left: 24px;
  }
}/*# sourceMappingURL=style.css.map */