/* My Note Page (mynote.page) | Created by Lâm Thái Sơn (lamthaison.me) */

body.dark-mode,body.light-mode{--body-bg:#202124;--box-scrollbar-bg:transparent;--box-scrollbar-track:transparent}#search-input,.edit-textarea,body,button,textarea{font-family:Merriweather,serif;font-optical-sizing:auto;font-variation-settings:"wdth" 100}.edit-controls-container,.note-item.fade-in{animation:fadeinup var(--duration-slow) var(--timing-function)}.modal-overlay,button{-webkit-tap-highlight-color:#fff0}:root{--duration-default:250ms;--duration-fast:100ms;--duration-medium:150ms;--duration-slow:250ms;--scrollbar-width:0.75rem;--scrollbar-bg:#202124;--scrollbar-thumb:#3c3e43;--scrollbar-thumb-hover:#45474e;--timing-function:cubic-bezier(0.4, 0, 0.2, 1)}body.light-mode{--container-bg:#faf9f5;--textarea-bg:#ffffff;--textarea-text:#2c2b29;--text-primary:#2c2b29;--text-secondary:#73706b;--text-selection-bg:#e0ddc7;--text-selection-color:#222120;--border-light:#d9d4b1;--border-medium:#d9d4b1;--input-focus-border:#d3caa7;--box-shadow-light:rgba(0, 0, 0, 0.07);--box-shadow-medium:rgba(0, 0, 0, 0.09);--input-focus-shadow:rgba(0, 0, 0, 0.09);--button-primary-bg:#e6e1ce;--button-primary-bg-hover:#ded9be;--button-primary-text:#2c2b29;--button-secondary-bg:#ebe8d8;--button-secondary-bg-hover:#ded9be;--button-secondary-text:#363532;--link-bg-hover:#e4e0cb;--note-highlight-bg:#f2ea9d;--note-highlight-text:#222120;--pinned-note-border:#afa363;--pinned-note-shadow:rgba(175, 163, 99, 0.15);--notification-status-bg-light:#ffffff;--notification-status-text-light:#2c2b29;--box-scrollbar-thumb:#ebe8d8;--box-scrollbar-thumb-hover:#ded9be}body.dark-mode{--container-bg:#292b2e;--textarea-bg:#202124;--textarea-text:#e3e3e6;--text-primary:#e5e5e8;--text-secondary:#b1b1ba;--text-selection-bg:#eff0f1;--text-selection-color:#323439;--border-light:#45474e;--border-medium:#45474e;--input-focus-border:#4e5158;--box-shadow-light:rgba(0, 0, 0, 0.2);--box-shadow-medium:rgba(0, 0, 0, 0.2);--input-focus-shadow:rgba(138, 180, 248, 0.4);--button-primary-bg:#3c3e43;--button-primary-bg-hover:#45474e;--button-primary-text:#e5e5e8;--button-secondary-bg:#3c3e43;--button-secondary-bg-hover:#45474e;--button-secondary-text:#e5e5e8;--link-bg-hover:#45474e;--note-highlight-bg:#45474e;--note-highlight-text:#f9fafa;--pinned-note-border:#cccccc;--pinned-note-shadow:rgba(204, 204, 204, 0.15);--notification-status-bg-dark:#f2f4f5;--notification-status-text-dark:#333333;--box-scrollbar-thumb:#3c3e43;--box-scrollbar-thumb-hover:#45474e}body{display:flex;align-items:flex-start;justify-content:center;min-height:100vh;padding:1.5rem;box-sizing:border-box;font-size:.96rem;line-height:1.56;color:var(--text-primary);background-color:var(--body-bg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800' style='background:%23202124'%3E%3Cg%3E%3Cpath fill='%23222326' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23242528' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%2325272a' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%2327292c' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23292B2E' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%2327292c' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%2325272a' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23242528' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23222326' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23202124' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");background-size:cover;background-attachment:fixed;transition:background-color var(--duration-medium) ease,color var(--duration-medium) ease}body::selection{background-color:var(--text-selection-bg);color:var(--text-selection-color)}body::-moz-selection{background-color:var(--text-selection-bg);color:var(--text-selection-color)}h1{margin-top:1.25rem;margin-bottom:1.25rem;font-size:2rem;font-weight:700;text-align:center}.note-content .hashtag-link,.note-content a,a{color:inherit;text-decoration:underline}.container{width:100%;max-width:36.25rem;padding:0 1.125rem 0.625rem;background-color:var(--container-bg);border-radius:0.75rem;box-shadow:var(--box-shadow-light) 0 1px 0.125rem 0,var(--box-shadow-medium) 0 0.125rem 0.375rem 0.125rem;opacity:0;transition:opacity var(--duration-slow) var(--timing-function)}#close-search-modal-btn,#close-trash-btn,.btn-primary,.btn-secondary{color:var(--button-primary-text);background-color:var(--button-primary-bg)}.container.show{opacity:1}.note-input-container{display:flex;flex-direction:column;gap:1.125rem;margin-bottom:1.875rem}.notes-list{display:grid;gap:1.125rem;margin-bottom:1.875rem}button{padding:0.625rem 1.25rem;border:1px solid #fff0;border-radius:0.5rem;font-size:.9375rem;font-weight:400;cursor:pointer;transition:background-color var(--duration-fast) var(--timing-function),border-color var(--duration-fast) var(--timing-function),box-shadow var(--duration-fast) var(--timing-function),transform var(--duration-fast) ease}button:active,button:hover{box-shadow:none}button:active{transform:translateY(1px)}.note-actions button,.read-less-btn,.read-more-btn{border-radius:0.375rem;color:var(--button-secondary-text);background-color:var(--button-secondary-bg);padding:0.5rem 0.875rem;font-size:.9375rem}#close-search-modal-btn:hover,#close-trash-btn:hover,.btn-primary:hover,.btn-secondary:hover{background-color:var(--button-primary-bg-hover)}.note-actions button:hover,.read-less-btn:hover,.read-more-btn:hover{background-color:var(--button-secondary-bg-hover)}.read-less-btn,.read-more-btn{align-self:flex-start;margin-top:0.875rem}#load-more-btn{display:none;width:100%;margin-top:-0.625rem;margin-bottom:1.875rem}#close-search-modal-btn,#close-trash-btn{width:auto;min-width:unset;padding:0.5rem 0.875rem;font-size:.9375rem}.edit-buttons-container .btn-primary,.edit-buttons-container .btn-secondary{flex:0 1 7.5rem;min-width:5rem;padding:0.5rem 1rem;text-align:center}.edit-buttons-container .btn-primary{margin-right:1.125rem}.modal-actions .btn-primary,.modal-actions .btn-secondary{min-width:5.5rem;padding:0.5rem 2.5rem;text-align:center}#search-input,.edit-textarea,textarea{width:100%;box-sizing:border-box;font-size:.96rem;line-height:1.56;color:var(--text-primary);background-color:var(--textarea-bg);border:1px solid var(--border-medium);outline:0;resize:none;transition:background-color var(--duration-medium) ease,border-color var(--duration-medium) var(--timing-function),box-shadow var(--duration-medium) var(--timing-function)}#search-input:hover,.edit-textarea:hover,.note-item:hover,textarea:hover{box-shadow:0 0.125rem 0.375rem var(--box-shadow-medium)}textarea#note-text{min-height:23dvh;max-height:60dvh;padding:1.125rem 0.625rem 1.125rem 1.125rem;border-radius:0.5rem;overflow-y:auto}.edit-textarea{min-height:35dvh;max-height:60dvh;padding:1.125rem 0.625rem 0 1.125rem;overflow-y:auto;color:var(--textarea-text);border:1px solid var(--input-focus-border)}.modal-content,.note-item{padding:1.125rem;display:flex}#search-input{padding:0.875rem 1rem;border-radius:0.5rem}#search-input::placeholder,textarea#note-text::placeholder{color:var(--text-secondary)}textarea#note-text:focus::placeholder{color:var(--text-primary)}#search-input:focus,.edit-textarea:focus,textarea#note-text:focus{border-color:var(--input-focus-border);box-shadow:0 0.125rem 0.375rem var(--box-shadow-medium)}.note-item{flex-direction:column;background-color:var(--container-bg);border:1px solid var(--border-light);border-radius:0.5rem;box-shadow:0 1px 0.125rem var(--box-shadow-light);overflow:hidden;word-break:break-word;transition:border-color var(--duration-medium) var(--timing-function),box-shadow var(--duration-medium) var(--timing-function),opacity var(--duration-slow) var(--timing-function),transform var(--duration-slow) var(--timing-function),height var(--duration-slow) var(--timing-function),margin var(--duration-slow) var(--timing-function)}.note-item.pinned{order:-1;border-color:var(--pinned-note-border);box-shadow:0 1px 0.125rem var(--pinned-note-shadow)}.note-item.pinned:hover{box-shadow:0 0.125rem 0.375rem var(--pinned-note-shadow)}.note-item.deleting{height:0;margin:0;padding:0;border:none;opacity:0;transform:scale(.92) translateY(2rem);transform-origin:top;overflow:hidden;transition:opacity var(--duration-slow) var(--timing-function),transform var(--duration-slow) var(--timing-function),height var(--duration-slow) var(--timing-function),margin var(--duration-slow) var(--timing-function),padding var(--duration-slow) var(--timing-function)}.note-content{flex-grow:1;width:100%;font-size:.96rem;white-space:pre-wrap}.credit a:hover,.note-content .hashtag-link:hover{text-decoration:underline}.note-actions{display:flex;flex-wrap:wrap;gap:0.5rem;justify-content:flex-end;width:100%;margin-top:0.9375rem}.edit-controls-container{display:flex;flex-direction:column;gap:0.625rem;width:100%}.edit-buttons-container{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0.625rem;width:100%;margin-top:0.4375rem;margin-bottom:1.125rem}.note-item:has(.edit-controls-container){padding:0;background-color:var(--textarea-bg)}.note-item:has(.edit-controls-container) .edit-textarea{background-color:#fff0;border-color:#fff0}.note-item:has(.edit-controls-container) .edit-textarea:focus{box-shadow:none}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:rgb(0 0 0 / .7);opacity:0;pointer-events:none;transition:opacity var(--duration-default) ease;z-index:1001}.modal-overlay.show{opacity:1;pointer-events:all;visibility:visible}.modal-content{flex-direction:column;gap:1rem;width:90%;max-width:36.25rem;background-color:var(--container-bg);border-radius:0.75rem;box-shadow:0 1px 0.1875rem var(--box-shadow-light),0 1px 0.125rem var(--box-shadow-medium);opacity:0;transform:translateY(1.25rem);transition:background-color var(--duration-medium) ease,opacity var(--duration-default) var(--timing-function),transform var(--duration-default) var(--timing-function)}.modal-overlay.show .modal-content{opacity:1;transform:translateY(0)}.modal-header{display:flex;align-items:center;justify-content:space-between}.modal-header h2{margin:0;font-size:1.45rem}.modal-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0.625rem;width:100%;margin-top:0.9375rem;margin-bottom:0.3125rem}.search-results-list,.trash-notes-list{margin:0;padding:0.1875rem 0 1px;max-height:63dvh;overflow-y:auto}.trash-notes-list{max-height:66dvh}.search-results-list .note-item,.trash-notes-list .note-item{margin:0}.copy-notification{position:fixed;left:50%;bottom:1.25rem;padding:0.625rem 1.125rem;border-radius:0.5rem;box-shadow:0 0.125rem 0.625rem rgb(0 0 0 / .4);font-size:.96rem;white-space:nowrap;opacity:0;visibility:hidden;transform:translateX(-50%) translateY(1.25rem);transition:opacity var(--duration-medium) ease-out,transform var(--duration-medium) ease-out,visibility var(--duration-medium) ease-out;z-index:1100}.copy-notification.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}body.light-mode .copy-notification.status{color:var(--notification-status-text-light);background-color:var(--notification-status-bg-light)}body.dark-mode .copy-notification.status{color:var(--notification-status-text-dark);background-color:var(--notification-status-bg-dark)}.highlight{padding:0.125rem 0;color:var(--note-highlight-text);background-color:var(--note-highlight-bg);border-radius:0.125rem}.trash-auto-delete{display:flex;justify-content:space-evenly;margin:0 0 0.3125rem!important;padding:0!important;text-align:center}#empty-trash-link{display:none}.credit,.empty-state-message,.no-search-results-message,.no-trash-notes-message,.usage-guideline{padding:0 0.25rem;margin:1.25rem 0;font-size:.96rem;line-height:1.56;color:var(--text-primary);text-align:center}.empty-state-message{margin-top:0.3125rem;margin-bottom:-0.25rem}.no-trash-notes-message{margin-top:-0.4375rem;margin-bottom:0.6875rem}.no-search-results-message{margin-top:0.5625rem;margin-bottom:0.625rem}#confirmation-title{padding-bottom:0;margin-bottom:-0.3125rem}#confirmation-message{margin-top:0;margin-bottom:0.3125rem;font-size:.96rem;line-height:1.7;color:var(--text-primary);text-align:left}::-webkit-scrollbar{width:0.5rem;background-color:var(--scrollbar-bg)}::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb);border-radius:0.625rem}::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover)}::-webkit-scrollbar-track{background-color:var(--scrollbar-bg)}.edit-textarea::-webkit-scrollbar,.search-results-list::-webkit-scrollbar,.trash-notes-list::-webkit-scrollbar,textarea::-webkit-scrollbar{background-color:var(--box-scrollbar-bg);width:var(--scrollbar-width)}.edit-textarea::-webkit-scrollbar-track,.search-results-list::-webkit-scrollbar-track,.trash-notes-list::-webkit-scrollbar-track,textarea::-webkit-scrollbar-track{background:#fff0;border-radius:0.625rem}.edit-textarea::-webkit-scrollbar-thumb,.search-results-list::-webkit-scrollbar-thumb,.trash-notes-list::-webkit-scrollbar-thumb,textarea::-webkit-scrollbar-thumb{border:0.1875rem solid #fff0;border-radius:0.625rem;background-color:var(--box-scrollbar-thumb);background-clip:content-box}.edit-textarea::-webkit-scrollbar-thumb:hover,.search-results-list::-webkit-scrollbar-thumb:hover,.trash-notes-list::-webkit-scrollbar-thumb:hover,textarea::-webkit-scrollbar-thumb:hover{background-color:var(--box-scrollbar-thumb-hover)}@keyframes fadeinup{from{opacity:0;transform:translateY(0.625rem)}to{opacity:1;transform:translateY(0)}}@keyframes fadeupdate-dark{0%,100%{background-color:var(--container-bg)}50%{background-color:var(--button-secondary-bg)}}@keyframes fadeupdate-light{0%,100%{background-color:var(--container-bg)}50%{background-color:var(--button-secondary-bg)}}body.dark-mode .note-item.updated{animation:.5s fadeupdate-dark}body.light-mode .note-item.updated{animation:.5s fadeupdate-light}.trash-notes-list .note-item.fade-out{opacity:0;transform:translateY(0.625rem) scale(.95);transition:opacity .3s,transform .3s}@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}@media (max-width:540px){a,a:active{-webkit-tap-highlight-color:#fff0}body{padding:0;margin:0;background-color:var(--container-bg);background-image:none}a:active{color:inherit;background-color:var(--link-bg-hover);border-radius:0.125rem}.container{min-height:100vh;padding:0 0.875rem 0.875rem;border-radius:0;box-shadow:none}h1{margin-top:1.125rem;margin-bottom:1.125rem;font-size:1.8rem}.note-input-container{gap:0.875rem;margin-bottom:1.375rem}.notes-list{gap:0.875rem}.note-item{padding:1rem 0.875rem 0.875rem}.note-item.pinned:hover,.note-item:hover{box-shadow:0 1px 0.125rem var(--box-shadow-light)}.note-actions{gap:0.5rem;margin-top:0.875rem}.note-actions button{flex-grow:1;padding:0.5rem;font-size:.9375rem}textarea#note-text{min-height:9.375rem;max-height:50dvh;padding:0.875rem 0.5rem 0.875rem 0.875rem;font-size:.96rem;resize:none}.edit-textarea{min-height:23dvh;max-height:50dvh;padding:0.875rem 0.5rem 0 0.875rem;resize:none}.edit-buttons-container,.modal-actions{gap:0.5rem;justify-content:center}.edit-buttons-container{width:auto;margin:0.25rem 0.875rem 0.875rem}.edit-buttons-container .btn-primary{margin-right:0}.edit-buttons-container .btn-primary,.edit-buttons-container .btn-secondary,.modal-actions .btn-primary,.modal-actions .btn-secondary{flex:1 1 45%!important;max-width:12.5rem;min-width:unset;padding:0.5rem 1rem;font-size:.9375rem}.modal-actions .btn-primary,.modal-actions .btn-secondary{padding:0.625rem 1rem}#load-more-btn{margin-top:-1rem;margin-bottom:1.875rem;padding:0.625rem 0.9375rem}.modal-content{position:fixed;top:6dvh;left:1dvh;right:1dvh;width:auto;margin:auto;padding:0.875rem;gap:0.875rem;border-radius:0.5rem}.modal-header h2{padding:0.3125rem 0.3125rem 0.125rem;font-size:1.35rem}.modal-actions{margin:0}#search-input{padding:0.75rem 0.875rem;font-size:.96rem}#close-search-modal-btn{padding:0.5rem 0.875rem;font-size:.9375rem}#confirmation-message{padding:0 0.3125rem}.search-results-list,.trash-notes-list{margin:-0.125rem 0 -0.375rem;padding:0.125rem 0 0.4375rem;max-height:71dvh}.search-results-list{max-height:69dvh}.read-less-btn,.read-more-btn{padding:0.5rem 0.875rem;font-size:.9375rem;margin-top:0.875rem;margin-bottom:0}.empty-state-message{margin-top:0.625rem;margin-bottom:-0.5rem}.no-search-results-message{padding:0;margin-top:0.5625rem;margin-bottom:0.625rem;font-size:.96rem}.no-trash-notes-message{padding:0;margin-top:-0.375rem;margin-bottom:0.625rem;font-size:.96rem}.credit,.usage-guideline{padding:0 1.375rem;font-size:.96rem}.credit{margin-bottom:0.6875rem}.edit-textarea::-webkit-scrollbar,textarea::-webkit-scrollbar{width:0.625rem}.search-results-list::-webkit-scrollbar,.trash-notes-list::-webkit-scrollbar{width:0}}@media (max-width:430px){.credit,.usage-guideline{padding:0 1.125rem}}@media (max-width:393px){.credit,.usage-guideline{padding:0 0.5625rem}}@media (max-width:390px){.credit,.usage-guideline{padding:0 1rem}}@media (max-width:375px){#close-search-modal-btn,#close-trash-btn,#search-input,.edit-buttons-container .btn-primary,.edit-buttons-container .btn-secondary,.modal-actions .btn-primary,.modal-actions .btn-secondary,.note-actions button,.read-less-btn,.read-more-btn,button{font-size:.88rem}.credit,.usage-guideline{padding:0 0.3125rem}}@media (max-width:360px){.note-actions button{padding:0.5rem 0.125rem}}@keyframes fadeInUp{from{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:translate3d(0,0,0)}}