*{box-sizing:border-box}html,body{overflow-x:hidden;max-width:100%}html{--color: #000;--note-item-link: #777;--note-item-link-hover: #000;--site-width: 1600px;--site-width-2: 700px}body{--border-color: #cacaca;--border-radius: 5px;background-color:#f4f4f9;font-family:Arial,sans-serif;margin:0}body:has(.note-item:focus){background-color:#fff}button{cursor:pointer}h1{color:#333}input,select,textarea{font-size:1em}ul{list-style-type:disc}li>p:has(+ul){margin-bottom:0}.container{max-width:var(--site-width);margin:0 auto;padding:0 20px}.container--2{max-width:var(--site-width-2)}.layout-columns,#notes-list{--gap: 20px;display:flex;flex-wrap:wrap;gap:var(--gap)}.layout-column,.note-item{--column-count: 1;--gap-count: calc(var(--column-count) - 1);--column-width: calc(100% / var(--column-count) - var(--gap) * var(--gap-count) / var(--column-count));flex-shrink:0;width:var(--column-width)}#search,.input{border:1px solid var(--border-color);border-radius:5px;margin:1rem 0;padding:10px;width:100%}select.input{width:auto}#note-input{border:1px solid var(--border-color);border-radius:5px;margin:1rem 0;padding:10px;min-height:30vh;width:100%;height:400px}.button{background-color:#28a745;border:1px solid #28a745;border-radius:5px;color:#fff;cursor:pointer;padding:10px 20px}.button--ghost,.button:hover{background-color:transparent;color:#28a745}.button--ghost:hover{background-color:#28a745;color:#fff}#notes-list{list-style-type:none;margin:0 0 10rem;padding:0}.note-actions{display:flex;gap:1rem;margin-bottom:1rem;text-align:center}.note-content{overflow:hidden;width:100%}.note-dates small{white-space:nowrap}.note-item{--note-padding: 1rem;background-color:#fff;border:1px solid var(--border-color);border-radius:5px;display:flex;flex-direction:column;padding:var(--note-padding);transition:.3s;max-width:100%;max-height:290px}.note-item.editing,.note-item:focus,.note-item:has(:focus){--border-color: transparent;max-height:10000px}.note-item a{color:var(--note-item-link);transition:.3s}.note-item a:hover{color:var(--note-item-link-hover);text-shadow:0 0 10px #fff}.note-item button{background-color:#dc3545;border:none;border-radius:5px;color:#fff;padding:5px 10px}.note-item button:hover{background-color:#c82333}.note-item h1{color:inherit}.note-item span{margin-right:auto}.note-item li:has(input[type=checkbox]),.note-item li:has(input[type=radio]){list-style:none;margin-inline-start:calc(-1 * var(--padding))}.note-item li:has(input[type=checkbox]:checked),.note-item li:has(input[type=radio]:checked){text-decoration:line-through}.note-item ol,.note-item ul{--padding: 20px;padding-inline-start:var(--padding)}.note-meta{display:none;margin-top:3rem}.note-item:not(.editing):focus,.note-item:not(.editing):has(.note-actions button:focus),.note-item:not(.editing):has(.note-actions button:hover){z-index:1}.note-item:not(.editing):has(:focus) .note-meta,.note-item:not(.editing):has(.note-actions button:focus) .note-meta,.note-item:not(.editing):has(.note-actions button:hover) .note-meta,.note-item:not(.editing):focus .note-meta{display:block}.save-status{margin-left:10px;font-size:.8em;transition:opacity .3s}.save-status:not(:empty){margin-bottom:1em}.save-status.saving{color:orange}.save-status.unsaved{color:#f90;font-style:italic}.save-status.saved{color:green}.save-status.failed{color:red}.note-item.editing{border-left:3px solid blue;background-color:#f0f8ff}#sort-notes{background-color:transparent;color:var(--color);padding-right:10px}@media (min-width: 768px){.note-dates small{margin-right:2rem}.note-item{--column-count: 2;padding:2rem}}@media (min-width: 1200px){.note-item{--column-count: 3}}@media (prefers-color-scheme: dark){html{--color: #e0e0e0;--note-item-link: #777;--note-item-link-hover: #fff}body{--border-color: #333;background-color:#000;color:var(--color)}body:has(.note-item:focus){background-color:#000}.note-item,#note-input,#search{background-color:#000;color:var(--color)}.note-meta{background-color:transparent;color:#777}.note-item.editing{background-color:#1e3a5f;border-left-color:#4d90fe}}.auth-toggle-container{border-bottom:1px solid var(--border-color);background:#ffffff80;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);position:sticky;top:0;z-index:100}@media (prefers-color-scheme: dark){.auth-toggle-container{background:#00000080}}.badge{display:inline-block;padding:2px 8px;border-radius:12px;font-size:.7rem;font-weight:700;text-transform:uppercase;margin-right:8px;vertical-align:middle}.badge--public{background-color:#e6f4ea;color:#1e7e34;border:1px solid #c3e6cb}.badge--unlisted{background-color:#fff3cd;color:#856404;border:1px solid #ffeeba}.badge--draft{background-color:#f8d7da;color:#721c24;border:1px solid #f5c6cb}#editor-zone{transition:all .3s ease}@media (prefers-color-scheme: dark){.badge--public{background-color:#143a1d;color:#81c784;border-color:#1b5e20}.badge--unlisted{background-color:#3e2723;color:#ffb74d;border-color:#4e342e}.badge--draft{background-color:#4a148c;color:#ce93d8;border-color:#6a1b9a}}.view-list{--site-width: var(--site-width-2)}.view-list #notes-list{display:block}.view-list .badge--public{display:none}.view-list .note-item{--column-count: 1;margin-bottom:1rem;max-height:none}.view-list .note-meta{display:block;margin:0 0 1rem;order:-22}