html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;margin:0;background-color:#f4f4f8;color:#333;line-height:1.6}#root{max-width:800px;margin:0 auto;padding:0;text-align:left}.app-container{display:flex;flex-direction:column;min-height:100vh;background-color:#fff;box-shadow:0 0 10px #0000001a}.app-header{background-color:#4a5568;color:#fff;padding:1rem 1.5rem;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 4px #0000001a}.app-header h1{margin:0;font-size:1.5rem}.toggle-view-button,.new-memo-button{background-color:#4299e1;color:#fff;border:none;padding:.6rem 1rem;border-radius:.375rem;cursor:pointer;font-size:.9rem;transition:background-color .2s}.toggle-view-button:hover,.new-memo-button:hover{background-color:#3182ce}.app-main{flex-grow:1;padding:1.5rem;overflow-y:auto}.memo-editor{display:flex;flex-direction:column;height:100%}.memo-textarea{flex-grow:1;width:100%;padding:1rem;font-size:1rem;border:1px solid #cbd5e0;border-radius:.375rem;box-sizing:border-box;resize:none;margin-bottom:1rem}.memo-textarea:focus{outline:none;border-color:#4299e1;box-shadow:0 0 0 2px #4299e180}.new-memo-button{align-self:flex-end}.memo-list{padding:0}.memo-list h2{margin-top:0;margin-bottom:1rem;font-size:1.25rem;color:#4a5568}.memo-list.empty{color:#718096;text-align:center;padding:2rem}.memo-list ul{list-style:none;padding:0;margin:0}.memo-list-item{background-color:#edf2f7;border:1px solid #e2e8f0;padding:.75rem 1rem;margin-bottom:.5rem;border-radius:.375rem;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:background-color .2s,box-shadow .2s}.memo-list-item:hover{background-color:#e2e8f0;box-shadow:0 1px 3px #0000000d}.memo-list-item.active{background-color:#c3dafe;border-left:4px solid #4299e1;padding-left:calc(1rem - 4px)}.memo-item-content{flex-grow:1;display:flex;flex-direction:column}.memo-item-text{font-weight:500;color:#2d3748;margin-bottom:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.memo-item-date{font-size:.8rem;color:#718096}.delete-memo-button{background:none;border:none;color:#e53e3e;cursor:pointer;font-size:1.2rem;padding:.25rem .5rem;margin-left:.5rem;opacity:.7;transition:opacity .2s}.delete-memo-button:hover{opacity:1;color:#c53030}@media (max-width: 600px){.app-header{padding:.75rem 1rem}.app-header h1{font-size:1.25rem}.toggle-view-button,.new-memo-button{padding:.5rem .75rem;font-size:.8rem}.app-main{padding:1rem}.memo-textarea{font-size:.95rem}}