:root{--text: #1a1a1a;--line: #d0d7de;--background: #ffffff;--hover: #f6f8fa;--active: #eaeef2;--scroll: #c1c8cd;--accent: #0969da}@media (prefers-color-scheme: dark){:root{--text: #e1e4e8;--line: #30363d;--background: #0d1117;--hover: #161b22;--active: #21262d;--scroll: #30363d;--accent: #58a6ff}}html,body{margin:0;padding:0;height:100%;overflow:hidden}body{font-family:Roboto Mono,monospace;font-weight:400;font-size:16px;color:var(--text);line-height:1.618;background-color:var(--background)}#root{height:100%}#app{display:flex;flex-direction:column;height:100%}header{display:flex;justify-content:space-between;align-items:center;padding:.6rem .7rem .6rem 1.4rem;border-bottom:1px solid var(--line)}header h1{font-size:1.2rem;margin:0;cursor:pointer;-webkit-user-select:none;user-select:none}.header-left{flex:1}#actions{display:flex;gap:.5rem;flex:1;justify-content:flex-end}main{display:flex;flex:1;overflow:hidden}#list-container{width:360px;display:flex;flex-direction:column;border-right:1px solid var(--line)}#search{position:relative;display:flex;align-items:center;border-bottom:1px solid var(--line)}.search-icon{position:absolute;left:1.5rem;color:var(--text);opacity:.5;pointer-events:none}#search input{font-family:Roboto Mono,monospace;font-weight:400;color:var(--text);background-color:var(--background);border:none;padding:1rem 1.5rem 1rem 3.25rem;font-size:.9rem;width:100%}#search input:focus{outline-width:2px;outline-style:solid;outline-color:var(--accent);outline-offset:-2px}#search input::placeholder{color:var(--text);opacity:.5}#list{flex:1;margin:0;padding:0;overflow-y:auto}#list li{list-style:none;padding:1.236rem 1.618rem;border-bottom:1px solid var(--line);cursor:pointer}#list li:hover,#list li.active{background-color:var(--hover)}#list h3{margin:0 0 .25rem;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#list p{margin:0;font-size:.9rem;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#detail{flex:1;display:flex;flex-direction:column}#detail .empty{margin:2rem;text-align:center}#detail .empty p{opacity:.8}#list .message{text-align:center;padding:1rem}#detail form{display:flex;flex-direction:column;height:100%;width:100%;margin:0 auto}.note-editor{flex:1;font-family:Roboto Mono,monospace;font-weight:400;color:var(--text);background-color:var(--background);border:none;padding:2rem max(2rem,calc((100vw - 1000px)/2)) 6rem;margin:0;resize:none;font-size:1.2rem;line-height:1.618}button{font-family:Roboto Mono,monospace;font-weight:400;color:var(--text);background-color:var(--background);border:1px solid var(--line);padding:.375rem .75rem;cursor:pointer;font-size:1rem}header button{padding:.5rem;font-size:1.5rem;display:flex;align-items:center;justify-content:center}header button img{width:20px;height:20px;filter:invert(0)}@media (prefers-color-scheme: dark){header button img{filter:invert(1)}}button:hover{background-color:var(--hover)}button:active{background-color:var(--active)}button:disabled{opacity:.5;cursor:not-allowed}button.danger:hover{border-color:#d32f2f;color:#d32f2f}button.danger:focus{outline-color:#d32f2f}@media (prefers-color-scheme: dark){button.danger:hover{border-color:#f85149;color:#f85149}button.danger:focus{outline-color:#f85149}}button[hidden]{display:none}#list li:focus{outline-width:2px;outline-style:solid;outline-color:var(--accent);outline-offset:-2px}button:focus{outline-width:2px;outline-style:solid;outline-color:var(--accent);outline-offset:-2px}.note-editor:focus{outline:none}::-webkit-scrollbar{width:14px;height:12px}::-webkit-scrollbar-thumb{background:var(--scroll)}@media (max-width: 600px){main{position:relative}#list-container{position:absolute;top:0;bottom:0;width:100%;z-index:1;background:var(--background)}#list-container.hidden{display:none}#detail{width:100%}.note-editor{padding-bottom:12rem}}.auth-container{display:flex;align-items:center;justify-content:center;height:100vh;padding:2rem}.auth-form{display:flex;flex-direction:column;gap:1rem;width:100%;max-width:400px}.auth-form h1{margin:0 0 1rem;text-align:center;font-size:1.5rem}.auth-form input{font-family:Roboto Mono,monospace;font-weight:400;color:var(--text);background-color:var(--background);border:1px solid var(--line);padding:.75rem 1rem;font-size:1rem}.auth-form input:focus{outline-width:2px;outline-style:solid;outline-color:var(--accent);outline-offset:-2px}.auth-form button{padding:.75rem 1rem;font-size:1rem}.auth-form button[type=button]{background-color:transparent;border:none;color:var(--accent);text-decoration:underline;cursor:pointer}.auth-form button[type=button]:hover{background-color:transparent;opacity:.8}.error{color:#d32f2f;font-size:.9rem;text-align:center;padding:.5rem;border:1px solid #d32f2f;background-color:#d32f2f1a}@media (prefers-color-scheme: dark){.error{color:#f85149;border-color:#f85149;background-color:#f851491a}}