@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/IBMPlexMono-Regular.woff2") format("woff2");
}

:root {
  --accent-green: #a0d92e;
  --accent-red: #f92652;
  --accent-blue: #61cce0;
  --accent-orange: #fd971f;
  --muted: #767676;
  --ease-out: cubic-bezier(.22, .61, .21, 1);
}

*,*::before,*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  background: #fff;
  color: #383838;
  height: 100%;
  font-size: 100%;
  transition: background-color .25s ease, color .25s ease;
}
html.night {
  background: #15181d;
  color: #e8eaf0;
}

body {
  height: 100%;
  font-family: "IBM Plex Mono", "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1em;
  line-height: 1.7;
  padding: 1em 0;
  
  -moz-osx-font-smoothing: grayscale;
}

ul {
  list-style: none;
}

::-moz-selection {
  background: #ddd;
}

::selection {
  background: #ddd;
}

html.night ::-moz-selection {
  background: #2e3a4f;
}

html.night ::selection {
  background: #2e3a4f;
}

button,input[type="text"],textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  border: transparent;
}

input[type="text"],textarea {
  display: block;
  width: 100%;
  padding: .5em;
}

::-webkit-input-placeholder {
    color: #767676;
}
:-moz-placeholder {
    color: #767676;
}
::-moz-placeholder {
    color: #767676;
}
:-ms-input-placeholder {
    color: #767676;
}

input#fileName::-webkit-input-placeholder {
    font-weight: bold;
}
input#fileName:-moz-placeholder {
    font-weight: bold;
}
input#fileName::-moz-placeholder {
    font-weight: bold;
}
input#fileName:-ms-input-placeholder {
    font-weight: bold;
}

input#fileName {
    margin-top: 8px;
}

textarea {
  resize: none;
  background: inherit;
  height: 100%;
  line-height: 1.9;
  padding-top: 4em;
  padding-left: 1em;
  padding-right: 1em;
  padding-bottom: 2.5em;
  caret-color: #4d7c0f;
}

html.night textarea {
  caret-color: #b8e62e;
}

@media(min-width:48em){
  textarea {
    padding-left: 3em;
    padding-right: 3em;
  }
}

@media(min-width:57.5em){
  textarea {
    padding-left: 5em;
    padding-right: 5em;
  }
}

@media(min-width:64em) {
  textarea {
    padding-left: 8em;
    padding-right: 8em;
  }
}

@media(min-width:75em) {
  textarea {
    padding-left: 10em;
    padding-right: 10em;
  }
}

button {
  background: inherit;
  display: inline;
  position: relative;
  cursor: pointer;
}

button:focus,input:focus,textarea:focus {
  outline: none;
}

svg {
  width: 2em;
  height: 2em;
  fill: #767676;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
}

nav, .settings-menu__item {
  display: flex;
  align-items: center;
}

nav input {
  flex: 1;
  background: inherit;
  max-width: 12em;
}

nav a {
  flex: 1;
  background: inherit;
  max-width: 12em;
  text-align: center;
  line-height: 2.5; 
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
}

.btn-group {
  flex: 2;
  text-align: right;
  padding: .5em 2em 0 0;
}


.btn-group button svg,
footer button svg,
.settings-menu__item button svg {
  transition:
    transform 180ms var(--ease-out),
    fill 180ms ease;
  transform-origin: center;
}

.btn-group button:active svg,
footer button:active svg,
.settings-menu__item button:active svg {
  transform: scale(.9);
}


.save-btn:hover svg {
  fill: #a0d92e;
  transform: scale(1.08);
}

.clear-btn:hover svg {
  fill: #f92652;
  transform: scale(1.08);
}

.settings-btn:hover svg {
  fill: #fd971f;
  transform: scale(1.08);
}

.btn-group button,
footer button,
section button {
  position: relative;
  overflow: hidden;
}


.btn-group button::after,
footer button::after,
section button::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  left: var(--ripple-x);
  top: var(--ripple-y);
  border-radius: 50%;
  background: rgba(153, 153, 153, 0.35);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
}

.btn-group button.ripple::after,
footer button.ripple::after,
section button.ripple::after {
  background: rgba(153, 153, 153, 0.28);
  animation: ripple 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes ripple {
  from {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.8;
  }

  to {
    transform: translate(-50%, -50%) scale(8);
    opacity: 0;
  }
}

.settings-menu {
  position: absolute;
  top: 4em;
  right: 2em;
  width: 14em;
  height: 16em;
  background: #fff;
  color: currentColor;
  font-size: .875em;
  box-shadow: 0 0 5px rgba(0,0,0,.1);
  padding: 0 1em;
  z-index: 3;
  opacity: 0;
  -webkit-transform: translateX(14em);
  -ms-transform: translateX(14em);
  transform: translateX(14em);
  -webkit-transition: -webkit-transform .3s var(--ease-out), opacity .3s var(--ease-out), background-color .25s ease;
  transition: transform .3s var(--ease-out), opacity .3s var(--ease-out), background-color .25s ease;
}

.settings-menu--open {
  opacity: 1;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
}

.night .settings-menu {
  background: #1f242c;
  box-shadow: 0 0 5px rgba(0,0,0,.5);
}

.settings-menu__item {
  padding: 1em 0;
  border-bottom: 1px solid #eee;
}

.settings-menu li:last-child {
  padding-top: 1em;
  border: none;
}

.night .settings-menu__item {
  border-bottom: 1px solid #353c48;
}

.settings-menu__item button {
  width: 50%;
}

.notes-menu {
  position: absolute;
  top: 4em;
  right: 2em;
  width: 14em;
  max-height: 16em;
  overflow-y: auto;
  background: #fff;
  color: currentColor;
  font-size: .875em;
  box-shadow: 0 0 5px rgba(0,0,0,.1);
  padding: 0 1em;
  z-index: 3;
  opacity: 0;
  -webkit-transform: translateX(14em);
  -ms-transform: translateX(14em);
  transform: translateX(14em);
  -webkit-transition: -webkit-transform .3s var(--ease-out), opacity .3s var(--ease-out), background-color .25s ease;
  transition: transform .3s var(--ease-out), opacity .3s var(--ease-out), background-color .25s ease;
}

.notes-menu--open {
  opacity: 1;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
}

.night .notes-menu {
  background: #1f242c;
  box-shadow: 0 0 5px rgba(0,0,0,.5);
}

.notes-menu ul {
  margin: 0;
  padding: 0;
}

.notes-menu li {
  display: flex;
  align-items: center;
  padding: .5em 0;
  border-bottom: 1px solid #eee;
}

.night .notes-menu li {
  border-bottom: 1px solid #353c48;
}

.notes-menu li {
  gap: .25em;
  border-radius: 8px;
  transition: background 150ms ease;
}

.notes-menu li:hover {
  background: rgba(0, 0, 0, .04);
}

html.night .notes-menu li:hover {
  background: rgba(255, 255, 255, .06);
}

.notes-menu .note-open {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notes-menu .note--current .note-open {
  font-weight: bold;
}

.notes-menu .note-delete {
  color: #f92652;
  padding: 0 .25em;
}

#newNote {
  display: block;
  width: 100%;
  padding: .75em 0;
  text-align: center;
  transition: background 180ms ease, transform 180ms var(--ease-out);
}

#newNote:hover {
  background: rgba(160, 217, 46, .15);
}

#newNote:active {
  transform: scale(.98);
}

.notes-btn:hover svg,
.notes-btn--active svg {
  fill: #61cce0;
  transform: scale(1.08);
}

input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  margin-left: 1rem;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  background: #767676;
  border-radius: 10px;
  border: none;
}

input[type=range]::-webkit-slider-thumb {
  border: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #767676;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -9px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #767676;
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  background: #767676;
  border-radius: 10px;
  border: none;
}

input[type=range]::-moz-range-thumb {
  border: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #767676;
  cursor: pointer;
}

input[type=range]::-ms-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

input[type=range]::-ms-fill-lower {
  background: #767676;
  border: none;
  border-radius: 20px;
}

input[type=range]::-ms-fill-upper {
  background: #767676;
  border: none;
  border-radius: 20px;
}

input[type=range]::-ms-thumb {
  border: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #767676;
  cursor: pointer;
  height: 2px;
}

input[type=range]:focus::-ms-fill-lower {
  background: #767676;
}

input[type=range]:focus::-ms-fill-upper {
  background: #767676;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,.9);
  z-index: 5;
  display: none;
}

.night .overlay {
  background: rgba(21,24,29,.92);
}

.overlay.active {
  display: block;
  overflow-y: scroll;
}

section {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 45ch;
  height: 30em;
  text-align: center;
  padding: 1em;
  margin: auto auto;
}

section svg {
  width: 3em;
  height: 3em;
  fill: currentColor;
}

section h1 {
  text-transform: uppercase;
  font-size: 1.5em;
  font-weight: 400;
  margin-bottom: .5em;
}

section p {
  font-size: .875em;
  text-align: left;
  margin-bottom: 1.4em;
}

section button {
  background: #a0d92e;
  color: #fff;
  min-width: 5em;
  padding: .5em;
  margin-bottom: 1.4em;
  transition: transform 180ms var(--ease-out), filter 180ms ease;
}

section button:hover {
  transform: scale(1.02);
  filter: brightness(1.06);
}

section button:active {
  transform: scale(.97);
}

.footnote {
  font-size: 80%;
  text-align: center;
}

.notfound-code {
  font-size: 3.5em;
  font-weight: 400;
  letter-spacing: .05em;
  margin-bottom: .25em;
}

.notfound-back {
  display: inline-block;
  background: #a0d92e;
  color: #fff;
  min-width: 5em;
  padding: .5em 1em;
  margin-top: .5em;
  border-radius: 10px;
  transition: transform 180ms var(--ease-out), filter 180ms ease;
}

.notfound-back:hover {
  color: #fff;
  transform: scale(1.02);
  filter: brightness(1.06);
}

.notfound-back:active {
  transform: scale(.97);
}

a {
  color: #f92652;
  text-decoration: none;
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 2;
}

.info-btn {
  position: absolute;
  bottom: .5em;
  left: 1em;
}

.info-btn:hover svg {
  fill: #61cce0;
}

.install-tip {
  position: absolute;
  bottom: .65em;
  left: 3.2em;
  font-size: 70%;
  color: #767676;
  background: none;
  border: 0;
  padding: 0;
  white-space: nowrap;
  cursor: pointer;
}

.night .install-tip {
  color: #9aa3b2;
}

.install-tip[hidden] {
  display: none;
}

.counter {
  position: absolute;
  bottom: 0;
  right: 1em;
  width: 50%;
  text-align: right;
}

.logo {
  position: relative;
  left: 49px;
  margin-right: 6px;
}

.offline-tip {
  text-align: center;
  font-size: 80%;
  background: rgba(160, 217, 46, 0.15);
  border: 1px dashed #a0d92e;
  border-radius: 4px;
  padding: .5em .75em;
}

.net-status {
  position: absolute;
  bottom: .9em;
  left: 50%;
  transform: translateX(-50%);
  font-size: 75%;
  color: #767676;
  white-space: nowrap;
  pointer-events: none;
}

.night .net-status {
  color: #9aa3b2;
}
.store-status { position: absolute; bottom: .1em; left: 50%; transform: translateX(-50%); font-size: 70%; color: #767676; white-space: nowrap; background: none; border: 0; padding: 0; cursor: pointer; }
.night .store-status { color: #9aa3b2; }
.store-status[data-low="1"] { color: #b00020; }
.trash-tools { display: flex; gap: .5em; padding: .5em 0; }
.trash-tools button { flex: 1; padding: .4em; border-radius: 8px; }
.trash-row { display: flex; gap: .25em; align-items: center; padding: .4em 0; border-bottom: 1px solid #eee; }
.night .trash-row { border-bottom-color: #353c48; }
.trash-restore { color: #4d7c0f; padding: 0 .25em; }
@media (max-width: 48em) { .store-status { display: none; } }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 2px solid #61cce0;
  outline-offset: 2px;
}

.btn-group button,
footer button,
section button,
.dialog-actions button,
.notes-tools select,
#newNote {
  border-radius: 10px;
}

header nav {
  flex-wrap: wrap;
}

.rename-banner {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75em;
  max-width: 46em;
  margin: 0 auto .75em;
  padding: .45em .8em;
  font-size: .85em;
  text-align: center;
  color: #383838;
  background: #f2f7e4;
  border: 1px solid var(--accent-green);
  border-radius: .5em;
}

.rename-banner[hidden] {
  display: none;
}

html.night .rename-banner {
  color: #e8eaf0;
  background: #232a1f;
}

.rename-banner button {
  flex: none;
  padding: 0 .5em;
  font-size: 1.1em;
  line-height: 1.4;
  cursor: pointer;
  background: transparent;
}

.btn-group {
  padding: .5em 1em 0 0;
}

@media (max-width: 48em) {
  nav a {
    max-width: 8em;
  }
  .btn-group {
    flex: 1;
    padding-right: .5em;
  }
  .btn-group svg {
    width: 1.6em;
    height: 1.6em;
  }
  nav input#fileName {
    order: 5;
    flex-basis: 100%;
    max-width: none;
    margin: 0 1em .5em;
  }
}

.settings-menu,
.notes-menu {
  width: min(20em, calc(100vw - 2em));
  height: auto;
  max-height: 80vh;
  overflow-y: auto;
  border-radius: 14px;
  border: 1px solid #eee;
}

.night .settings-menu,
.night .notes-menu {
  border-color: #353c48;
}

@media (max-width: 48em) {
  .settings-menu,
  .notes-menu {
    right: 1em;
  }
}

.night svg {
  fill: #c3c9d4;
}

.editor {
  height: 100%;
}

.preview {
  resize: none;
  background: inherit;
  height: 100%;
  line-height: 1.9;
  padding-top: 4em;
  padding-left: 1em;
  padding-right: 1em;
  padding-bottom: 2.5em;
  overflow-y: auto;
  word-wrap: break-word;
  border-radius: 8px;
}

.preview h1,
.preview h2,
.preview h3,
.preview h4,
.preview h5,
.preview h6 {
  margin: .8em 0 .4em;
  line-height: 1.3;
}

.preview p {
  margin: 0 0 .8em;
}

.preview ul {
  list-style: disc;
  padding-left: 1.5em;
  margin: 0 0 .8em;
}

.preview li {
  margin-bottom: .25em;
}

.preview li.task {
  list-style: none;
  display: flex;
  gap: .5em;
  align-items: baseline;
}

.preview li.task input {
  accent-color: #a0d92e;
}

.preview pre {
  background: rgba(0, 0, 0, .06);
  border-radius: 8px;
  padding: .75em 1em;
  overflow-x: auto;
  margin: 0 0 .8em;
}

.night .preview pre {
  background: rgba(255, 255, 255, .08);
}

.preview code {
  font-family: inherit;
  background: rgba(0, 0, 0, .06);
  border-radius: 4px;
  padding: .1em .3em;
}

.night .preview code {
  background: rgba(255, 255, 255, .08);
}

.preview pre code {
  background: none;
  padding: 0;
}

.preview blockquote {
  border-left: 3px solid #a0d92e;
  padding-left: 1em;
  margin: 0 0 .8em;
  color: inherit;
  opacity: .85;
}

.preview a {
  color: #f92652;
}

.night .preview a {
  color: #ff6b9d;
}

.notes-tools {
  display: flex;
  gap: .5em;
  padding: .75em 0;
  border-bottom: 1px solid #eee;
}

.night .notes-tools {
  border-bottom-color: #353c48;
}

#noteSearch {
  flex: 1;
  min-width: 0;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: .4em .6em;
  background: inherit;
}

.night #noteSearch {
  border-color: #4a5261;
}

#noteSort {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: .4em;
  background: inherit;
  color: inherit;
  font-family: inherit;
  font-size: .9em;
  max-width: 8em;
}

.night #noteSort {
  border-color: #4a5261;
}

.notes-empty {
  padding: 1em 0;
  text-align: center;
  color: #767676;
}

.night .notes-empty {
  color: #9aa3b2;
}

.notes-menu .note-open {
  display: block;
  min-width: 0;
}

.note-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-meta {
  display: flex;
  justify-content: space-between;
  gap: .5em;
  font-size: 80%;
  color: #767676;
}

.night .note-meta {
  color: #9aa3b2;
}

.note-snippet {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.note-date {
  white-space: nowrap;
}

.notes-menu .note-pin {
  color: #767676;
  padding: 0 .25em;
  font-size: 1.1em;
  border-radius: 6px;
}

.notes-menu .note-pin.is-pinned {
  color: #e6a800;
}

.night .notes-menu .note-pin.is-pinned {
  color: #ffd23e;
}

.preview-btn--active svg,
.preview-btn:hover svg,
.copy-btn:hover svg {
  fill: #61cce0;
  transform: scale(1.08);
}

.preview-btn--active svg {
  fill: #a0d92e;
}

.info-btn:hover svg {
  fill: #61cce0;
  transform: scale(1.08);
}

#theme:hover svg {
  fill: #e6a800;
  transform: scale(1.08);
}

html.night #theme:hover svg {
  fill: #ffd23e;
}
#exportData, #importData {
  display: block;
  width: 100%;
  text-align: left;
  font-weight: bold;
}
#exportData { color: #4d7c0f; }
.night #exportData { color: #b8e62e; }
.settings-menu__item--compact {
  padding: .6em 0;
  border-bottom: 0;
}
#resetSettings {
  display: block;
  width: 100%;
  padding: .2em 0;
  font-size: .85em;
  text-align: center;
  color: #767676;
}
#resetSettings:hover { color: #f92652; }
.night #resetSettings { color: #9aa3b2; }
.night #resetSettings:hover { color: #ff8fab; }
#theme { width: 100%; }

.save-status {
  position: absolute;
  bottom: .85em;
  left: 4.25em;
  font-size: 75%;
  color: #767676;
  white-space: nowrap;
  background: rgba(0, 0, 0, .05);
  border-radius: 999px;
  padding: .2em .8em;
  transition: color .2s ease, background .2s ease;
}

.save-status[data-state="saved"] {
  color: #4d7c0f;
}

.save-status[data-state="saving"] {
  color: #767676;
}

.save-status[data-state="error"] {
  color: #b00020;
}

.night .save-status {
  color: #c3c9d4;
  background: rgba(255, 255, 255, .1);
}

.night .save-status[data-state="saved"] {
  color: #b8e62e;
}

.night .save-status[data-state="error"] {
  color: #ff8fab;
}

@media (max-width: 48em) {
  .save-status {
    left: 3.75em;
    max-width: 10em;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.app-dialog {
  margin: auto;
  border: 2px solid #383838;
  border-radius: 14px;
  padding: 1.5em;
  max-width: min(24em, calc(100vw - 2em));
  width: 100%;
  background: #fff;
  color: #383838;
  font-family: inherit;
  text-align: center;
}

.night .app-dialog {
  background: #1f242c;
  border-color: #4a5261;
  color: #e8eaf0;
}

.app-dialog[open] {
  animation: dialog-in 160ms var(--ease-out);
}

@keyframes dialog-in {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.app-dialog::backdrop {
  background: rgba(255, 255, 255, .9);
}

.night .app-dialog::backdrop {
  background: rgba(21,24,29,.92);
}

#dialogMessage {
  margin-bottom: 1em;
  line-height: 1.6;
  overflow-wrap: break-word;
}

#dialogInput {
  width: 100%;
  border: 1px solid #767676;
  border-radius: 8px;
  padding: .5em;
  margin-bottom: 1em;
  text-align: center;
  background: inherit;
  color: inherit;
}

.dialog-actions {
  display: flex;
  justify-content: center;
  gap: .5em;
}

.dialog-actions button {
  background: #fff;
  border: 2px solid #383838;
  color: #383838;
  min-width: 5em;
  padding: .5em;
  transition: background 180ms ease, transform 180ms var(--ease-out);
}

.dialog-actions button:hover {
  background: rgba(160, 217, 46, .15);
}

.dialog-actions button:active {
  transform: scale(.97);
}

.night .dialog-actions button {
  background: transparent;
  border-color: #4a5261;
  color: #e8eaf0;
}

.night .dialog-actions button:hover {
  background: rgba(160, 217, 46, .2);
}

#fileName,
#noteSearch {
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none;
    transition: none;
  }
  .btn-group button::after,
  footer button::after,
  section button::after {
    display: none;
  }
  .settings-menu,
  .notes-menu {
    transition: none;
  }
}

@media print {
  header,
  footer,
  #homepage,
  .notes-menu,
  .settings-menu,
  #appDialog,
  #fileInput,
  #previewToggle,
  #copyNote {
    display: none;
  }
  body {
    padding: 0;
  }
  .editor {
    padding: 0;
  }
  textarea {
    padding: 0;
    height: auto;
    overflow: visible;
  }
  .preview {
    padding: 0;
    height: auto;
    overflow: visible;
  }
}