body{background-color:var(--background-color);color:var(--text-color);margin:0}:root{--color-base: #FAFAFA;--color-contrast: #1E1E1E;--color-danger: #EA3A3A;--background-color: var(--color-base);--text-color: var(--color-contrast)}@media(prefers-color-scheme:dark){:root{--background-color: var(--color-contrast);--text-color: var(--color-base)}}.list-page{max-width:800px;margin:2rem auto;padding:2rem}.list-page__header{align-items:flex-end;display:flex;font-size:2rem;font-weight:600;justify-content:space-between;margin:0 0 1.5rem}.list-page__header a{color:var(--text-color);text-decoration:none;font-weight:400;opacity:.8}.list-page__header a:hover{opacity:1}.note-list{display:flex;flex-direction:row;flex-wrap:wrap;gap:1rem;list-style:none;margin:0;padding:0}.note-list__item{margin:0;max-width:100%;padding:0;width:100%}.note-list__link{box-sizing:border-box;display:block;padding:1rem 1.25rem;min-width:160px;background-color:var(--background-color);color:var(--text-color);text-decoration:none;border:2px solid #e0e0e0;border-radius:.5rem;transition:border-color .2s ease,box-shadow .2s ease}.note-list__link:hover{border-color:var(--text-color);box-shadow:0 0 0 3px #0000000d}.note-list__title{font-weight:500;font-size:1rem}.note-list__empty{margin:1rem 0 0;color:var(--text-color);opacity:.8;font-size:.9375rem}.note-list__empty a{color:var(--text-color);text-decoration:underline}.note-list__empty a:hover{opacity:1}@media(prefers-color-scheme:dark){.note-list__link{border-color:#404040}.note-list__link:hover{box-shadow:0 0 0 3px #ffffff0d}}@media screen and (min-width:600px){.note-list__item{max-width:calc(50% - .75rem)}}@media screen and (min-width:768px){.note-list__item{max-width:calc(100% / 3 - .75rem)}}@media screen and (min-width:1024px){.note-list__item{max-width:calc(25% - .75rem)}}.note-page{max-width:800px;margin:2rem auto;padding:2rem}.note-page__actions{margin-bottom:1rem}.note-page__back{font-size:.9375rem;color:var(--text-color);opacity:.8;text-decoration:none;transition:opacity .2s ease}.note-page__back:hover{opacity:1}.note-page__missing{text-align:center}.note-page form{display:flex;flex-direction:column;gap:1.5rem}.note-page__form-item{display:flex;flex-direction:column;gap:.5rem}.note-page__form-label{font-size:.875rem;font-weight:500;color:var(--text-color);opacity:.8}.note-page__form-input,.note-page__form-textarea{width:100%;padding:.75rem 1rem;font-size:1rem;font-family:inherit;border:2px solid #e0e0e0;border-radius:.5rem;background-color:var(--background-color);color:var(--text-color);transition:border-color .2s ease,box-shadow .2s ease;box-sizing:border-box}.note-page__form-footer{align-items:center;display:flex;flex-direction:row;gap:1rem;justify-content:space-between}.note-page__form-button{appearance:none;border:none;border-radius:.25em}.note-page__form-button--delete{background-color:var(--color-danger)}@media(prefers-color-scheme:dark){.note-page input[type=text],.note-page textarea{border-color:#404040}}.note-page input[type=text]:focus,.note-page textarea:focus{outline:none;border-color:var(--text-color);box-shadow:0 0 0 3px #0000000d}@media(prefers-color-scheme:dark){.note-page input[type=text]:focus,.note-page textarea:focus{box-shadow:0 0 0 3px #ffffff0d}}.note-page textarea{min-height:200px;resize:vertical;font-family:inherit;line-height:1.6}.note-page button[type=submit]{padding:.875rem 2rem;font-size:1rem;font-weight:500;color:var(--background-color);background-color:var(--text-color);border:none;border-radius:.5rem;cursor:pointer;transition:opacity .2s ease,transform .1s ease;align-self:flex-start}.note-page button[type=submit]:hover{opacity:.9;transform:translateY(-1px)}.note-page button[type=submit]:active{transform:translateY(0)}@media(max-width:768px){.note-page{margin:1rem;padding:1.5rem}.note-page h1,.note-page>p:first-child{font-size:1.5rem;margin-bottom:1.5rem}}
