:root{--bg:#f1f2f2;--card:#fff;--title:#0d221ccc;--preview:#0d221c8a;--date:#0d221c5c;--accent:#00c28b;--link:#00875f;--error:#c62828;--icon:#0d221c99;color:var(--title);background:var(--bg);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;-webkit-tap-highlight-color:transparent;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{background:var(--bg);min-height:100vh;margin:0}button{font:inherit;color:inherit}.hint{color:var(--preview)}.error{color:var(--error)}.spacer{flex:1}.icon-btn{cursor:pointer;background:0 0;border:0;border-radius:50%;flex:none;justify-content:center;align-items:center;width:48px;height:48px;padding:0;display:inline-flex}button:focus:not(:focus-visible){outline:none}.icon-btn:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}.icon-btn:disabled{opacity:.35;cursor:default}.top-bar{z-index:5;background:var(--accent);color:#fff;align-items:center;height:56px;padding:0 4px 0 16px;display:flex;position:sticky;top:0;box-shadow:0 2px 4px #00000026}.top-bar:has(.search-input){padding-left:4px}.top-title{flex:1;margin:0;font-size:20px;font-weight:500}.logo-btn{color:inherit;font:inherit;cursor:pointer;background:0 0;border:0;padding:0}.search-input{color:#fff;min-width:0;height:40px;font:inherit;background:0 0;border:0;outline:none;flex:1;padding:0 8px;font-size:18px}.search-input::placeholder{color:#ffffffb3}.search-input::-webkit-search-cancel-button{display:none}.find-input::-webkit-search-cancel-button{display:none}@keyframes spin{to{transform:rotate(-360deg)}}.spin{animation:1s linear infinite spin}.sync-error{color:#ffe082}.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:8px 8px 88px;display:grid}@media (width>=560px){.tiles{grid-template-columns:repeat(auto-fill,176px);justify-content:center}}.tile{aspect-ratio:1;background:var(--card);cursor:pointer;border-radius:2px;flex-direction:column;width:100%;padding:8px;display:flex;position:relative;overflow:hidden;box-shadow:0 1px 2px #00000029}.tile-title{white-space:nowrap;text-overflow:ellipsis;color:var(--title);font-size:16px;line-height:1.25;overflow:hidden}.tile-star+.tile-title{padding-right:14px}.tile-star{color:var(--accent);position:absolute;top:6px;right:6px}.tile-preview{-webkit-line-clamp:8;line-clamp:8;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--preview);-webkit-box-orient:vertical;margin-top:4px;font-size:12px;line-height:1.1;display:-webkit-box;overflow:hidden}.tile-date{color:var(--date);margin-top:auto;padding-top:4px;font-size:10px}.empty{text-align:center}.fab{right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:6;background:var(--accent);color:#fff;cursor:pointer;border:0;border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;display:flex;position:fixed;box-shadow:0 3px 6px #00000040}.menu-overlay{z-index:30;position:fixed;inset:0}.menu{background:#fff;border-radius:2px;min-width:180px;padding:8px 0;position:absolute;top:4px;right:4px;box-shadow:0 4px 12px #00000040}.menu-item{text-align:left;width:100%;height:48px;color:var(--title);cursor:pointer;background:0 0;border:0;padding:0 16px;font-size:16px;display:block}.menu-item:disabled{opacity:.4;cursor:default}.toast{left:50%;bottom:calc(88px + env(safe-area-inset-bottom));z-index:40;color:#fff;background:#212121eb;border-radius:4px;max-width:calc(100% - 32px);padding:12px 16px;font-size:14px;position:fixed;transform:translate(-50%);box-shadow:0 3px 6px #00000040}.page-error{margin:8px}.login-screen{padding:16px}.relogin{background:var(--card);border-radius:2px;margin:8px;padding:8px 12px 12px}.relogin .hint{margin:4px 0 8px}.login{flex-direction:column;gap:8px;max-width:400px;display:flex}.login input{font:inherit;border:1px solid #0d221c33;border-radius:2px;padding:10px}.login button{background:var(--accent);color:#fff;cursor:pointer;border:0;border-radius:2px;padding:10px}.editor{z-index:20;background:#fff;flex-direction:column;display:flex;position:fixed;inset:0}.editor-bar,.find-bar{height:56px;color:var(--icon);flex:none;align-items:center;padding:0 4px;display:flex}.find-bar{border-top:1px solid #0d221c14;border-bottom:1px solid #0d221c14;height:48px}.star-btn.on{color:var(--accent)}.find-input{min-width:0;height:36px;font:inherit;color:var(--title);background:0 0;border:0;outline:none;flex:1;padding:0 12px;font-size:16px}.find-count{text-align:center;min-width:40px;color:var(--preview);font-size:13px}.banner{background:#fff8e1;flex-wrap:wrap;flex:none;align-items:center;gap:4px 8px;padding:8px 16px;font-size:14px;display:flex}.banner span{flex:1;min-width:160px}.banner-buttons{gap:8px;display:flex}.banner-buttons button{color:var(--link);cursor:pointer;background:0 0;border:0;border-radius:2px;padding:6px 10px;font-weight:600}.editor-body{overscroll-behavior:contain;flex:1;overflow-y:auto}.note-text{min-height:100%;position:relative}.note-input,.note-mirror{font:inherit;letter-spacing:normal;white-space:pre-wrap;overflow-wrap:break-word;word-break:normal;tab-size:4;border:0;margin:0;padding:8px 16px 16px;font-size:16px;line-height:1.5}.note-input{resize:none;color:#0000;width:100%;height:100%;caret-color:var(--title);background:0 0;outline:none;position:absolute;inset:0;overflow:hidden}.note-input::placeholder{color:var(--date)}.note-mirror{z-index:1;pointer-events:none;min-height:100%;color:var(--title);position:relative}.note-mirror .link{color:var(--link);text-decoration:underline}.note-mirror mark{color:inherit;background:#ffd54f73;border-radius:2px}.note-mirror mark.hit-active{background:#ffb300}.note-input::selection{background:var(--accent);color:#0000}.note-mirror .sel{color:#fff}.note-mirror mark.sel{background:0 0}.link-fab{right:16px;bottom:calc(64px + env(safe-area-inset-bottom));z-index:3;background:var(--accent);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;display:flex;position:fixed;box-shadow:0 3px 6px #00000040}.editor-tools{height:48px;padding:0 4px calc(env(safe-area-inset-bottom));color:var(--icon);background:#fafafa;border-top:1px solid #0d221c14;flex:none;align-items:center;display:flex}.restore-btn{background:var(--accent);color:#fff;cursor:pointer;border:0;border-radius:2px;height:32px;margin-right:8px;padding:0 16px;font-size:14px}.restore-btn:hover{filter:brightness(.95)}.tag-btn.on{color:var(--accent)}.dialog-overlay{z-index:40;background:#0000004d;justify-content:center;align-items:flex-start;padding:18vh 16px 0;display:flex;position:fixed;inset:0}.dialog{background:#fff;border-radius:2px;width:100%;max-width:508px;padding:8px 24px 20px;box-shadow:0 4px 20px #0003}.dialog-head{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.dialog-head h2{color:#262626;margin:0;font-size:24px;font-weight:400}.dialog-input{width:100%;height:36px;font:inherit;color:#262626;border:1px solid #d5d8d7;border-radius:2px;outline:none;padding:0 10px;font-size:15px}.dialog-input:focus{border-color:var(--accent)}.dialog-error{margin:8px 0 0;font-size:13px}.dialog-buttons{justify-content:flex-end;gap:16px;margin-top:40px;display:flex}.btn-cancel,.btn-ok{cursor:pointer;border-radius:2px;min-width:100px;height:36px;padding:0 16px;font-size:15px}.btn-cancel{color:#262626;background:#f5f6f6;border:1px solid #d5d8d7}.btn-ok{background:var(--accent);color:#fff;border:0}.picker-backdrop{z-index:40;position:fixed;inset:0}.picker-backdrop.dim{background:#0000004d}.tag-picker{z-index:41;background:#fff;border-radius:2px;flex-direction:column;max-height:75vh;display:flex;position:fixed;top:10vh;left:16px;right:16px;box-shadow:0 4px 20px #0003}.picker-top{border-bottom:1px solid #ebebeb;padding:16px}.picker-scroll{flex:1;min-height:120px;overflow-y:auto}.picker-section{color:#757575;background:#f5f5f5;padding:6px 16px;font-size:13px}.picker-chips{flex-wrap:wrap;gap:8px;padding:12px 16px;display:flex}.tag-chip{background:var(--accent);color:#fff;border-radius:2px;align-items:center;gap:4px;height:26px;padding:0 4px 0 8px;font-size:14px;font-weight:500;display:inline-flex}.tag-chip button{color:inherit;cursor:pointer;background:0 0;border:0;padding:2px;display:flex}.picker-row{color:#262626;cursor:pointer;border-bottom:1px solid #f0f0f0;justify-content:space-between;align-items:center;min-height:48px;padding:0 16px;font-size:15px;display:flex}.picker-row input{width:18px;height:18px;accent-color:var(--accent);cursor:pointer}.picker-hint{padding:12px 16px}.tag-picker .dialog-buttons{border-top:1px solid #ebebeb;margin:0;padding:16px}.filter-bar{padding:8px 8px 0}.tags-panel{z-index:25;background:#fff;position:fixed;inset:0;overflow-y:auto}.panel-row{color:#262626;text-align:left;cursor:pointer;background:0 0;border:0;border-bottom:1px solid #f0f0f0;align-items:center;gap:16px;width:100%;min-height:52px;padding:0 8px 0 16px;font-size:16px;display:flex}.panel-row svg{color:#a3a3a3;flex:none}.panel-row.active,.panel-row.active svg{color:var(--accent)}.panel-row.tag{padding:0 4px 0 0}.panel-tag{min-height:52px;font:inherit;color:inherit;text-align:left;cursor:pointer;background:0 0;border:0;flex:1;align-items:center;gap:16px;padding:0 0 0 16px;display:flex}@media (width>=768px){.top-bar{padding-left:30px}.main-area{min-height:calc(100vh - 56px);display:flex}.side{background:#f7f7f7;border-right:1px solid #ebebeb;flex:none;width:240px;height:calc(100vh - 56px);padding:30px;position:sticky;top:56px}.new-note-btn{background:var(--accent);color:#fff;cursor:pointer;border:0;border-radius:2px;width:156px;height:30px;font-size:14px;font-weight:400}.new-note-btn:hover{filter:brightness(.95)}.side-nav{margin:19px -30px 0}.side-link{color:#262626;cursor:pointer;background:0 0;border:0;border-left:3px solid #0000;align-items:center;gap:16px;width:100%;height:40px;padding:0 0 0 30px;font-size:15px;display:flex}.side-link svg{color:#a3a3a3}.side-link:hover{background:#efefef}.side-link.active,.side-link.active svg{color:var(--accent)}.side-link.active{border-left-color:var(--accent)}.side-sep{border:0;border-top:1px solid #e3e3e3;margin:16px 30px 16px 33px}.notes-area{background:#fdfdfd;flex:1;min-width:0}.tiles{grid-template-columns:repeat(auto-fill,238px);justify-content:center;gap:22px;max-width:1082px;margin:0 auto;padding:30px 32px 40px}.tile{aspect-ratio:auto;background:#fff;border:1px solid #ebebeb;height:178px;padding:15px 16px;box-shadow:0 1px 3px #0000000f}.tile:hover{box-shadow:0 1px 4px #0000001f}.tile-title{color:#262626;font-weight:400;line-height:24px}.tile-star{top:8px;right:8px}.tile-preview{-webkit-line-clamp:4;line-clamp:4;color:#757575;margin-top:0;font-size:13px;line-height:21px}.tile-preview.gap{margin-top:10px}.tile-date{color:#a3a3a3;font-size:12px}.editor-wide{top:56px;left:240px}.editor-wide .editor-bar,.editor-wide .find-bar,.editor-wide .banner,.editor-wide .note-text{width:calc(100% - 48px);max-width:720px;margin:0 auto}.editor-wide .editor-bar{border-bottom:1px solid #e6e6e6;gap:4px;height:50px;margin-top:24px;padding:0 0 8px}.editor-wide .editor-bar .icon-btn{width:40px;height:40px}.editor-wide .editor-bar .icon-btn:not(:disabled):hover{background:#0d221c0f}.back-btn{height:32px;color:var(--title);cursor:pointer;background:#f5f6f6;border:1px solid #d5d8d7;border-radius:2px;margin-right:12px;padding:0 20px;font-size:14px}.back-btn:hover{background:#eceeed}.save-status{color:#a3a3a3;white-space:nowrap;margin-right:8px;font-size:13px}.side-chevron{margin-left:auto;margin-right:30px;transition:transform .15s;transform:rotate(-90deg)}.side-chevron.open{transform:none}.side-tag{border-left:3px solid #0000;align-items:center;height:40px;display:flex}.side-tag:hover{background:#efefef}.side-tag-name{color:#262626;text-align:left;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;background:0 0;border:0;flex:1;min-width:0;height:100%;padding:0 0 0 66px;font-size:15px;overflow:hidden}.side-more{color:#a3a3a3;visibility:hidden;cursor:pointer;background:0 0;border:0;margin-right:24px;padding:4px;display:flex}.side-tag:hover .side-more,.side-more:focus-visible{visibility:visible}@media (hover:none){.side-more{visibility:visible}}.side-tag.active{border-left-color:var(--accent)}.side-tag.active .side-tag-name,.side-tag.active .side-more{color:var(--accent)}.picker-anchor{z-index:41;width:calc(100% - 48px);max-width:720px;height:0;margin:0 auto;position:relative}.tag-picker.wide{width:320px;max-height:440px;position:absolute;top:-6px;left:auto;right:96px}.editor-wide .note-input,.editor-wide .note-mirror{padding:16px 0 32px;font-size:15px;line-height:21px}.editor-wide .link-fab{bottom:24px;right:24px}}