:root{--font-display:-apple-system, "Segoe UI", system-ui, sans-serif;--font-ui:-apple-system, "Segoe UI", system-ui, sans-serif;--font-mono:ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;--text:#171a21;--text-muted:#6b7280;--bg:#fff;--bg-alt:#f5f6f8;--bg-hover:#ebeef1;--border:#e2e5e9;--accent:#2563eb;--accent-strong:#1d4ed8;--accent-soft:#eaf1fe;--danger:#dc2626;--radius:8px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font:14.5px/1.55 var(--font-ui);color:var(--text);background:var(--bg)}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--text:#e7eaee;--text-muted:#8b909a;--bg:#14161a;--bg-alt:#1b1e23;--bg-hover:#23272d;--border:#2a2e35;--accent:#60a5fa;--accent-strong:#93c5fd;--accent-soft:#182338}}:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--text:#171a21;--text-muted:#6b7280;--bg:#fff;--bg-alt:#f5f6f8;--bg-hover:#ebeef1;--border:#e2e5e9;--accent:#2563eb;--accent-strong:#1d4ed8;--accent-soft:#eaf1fe}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--text:#e7eaee;--text-muted:#8b909a;--bg:#14161a;--bg-alt:#1b1e23;--bg-hover:#23272d;--border:#2a2e35;--accent:#60a5fa;--accent-strong:#93c5fd;--accent-soft:#182338}*{box-sizing:border-box}body{margin:0}button{font:inherit;color:inherit;cursor:pointer}textarea,input{font:inherit;color:inherit}a{color:var(--accent-strong)}::selection{background:var(--accent-soft)}:focus-visible{outline:2px solid var(--accent);outline-offset:1px}@media (prefers-reduced-motion:reduce){*{transition-duration:.001ms!important;animation-duration:.001ms!important}}.app{flex-direction:column;height:100svh;display:flex}.app-header{border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;padding:14px 24px;display:flex}.app-header-left{align-items:center;gap:10px;display:flex}.app-header h1{font-family:var(--font-display);letter-spacing:-.01em;align-items:center;gap:8px;margin:0;font-size:16px;font-weight:600;display:flex}.sidebar-toggle{border:1px solid var(--border);width:30px;height:30px;color:var(--text-muted);background:0 0;border-radius:8px;justify-content:center;align-items:center;transition:background .15s,color .15s,border-color .15s;display:none}.sidebar-toggle:hover{background:var(--bg-hover);color:var(--accent);border-color:var(--accent)}.logo-mark{color:var(--accent);flex-shrink:0}.tld{color:var(--text-muted);font-weight:500}.theme-toggle{border:1px solid var(--border);width:30px;height:30px;color:var(--text-muted);background:0 0;border-radius:8px;justify-content:center;align-items:center;transition:background .15s,color .15s,border-color .15s;display:flex}.theme-toggle:hover{background:var(--bg-hover);color:var(--accent);border-color:var(--accent)}.app-body{flex:1;min-height:0;display:flex}.note-list{background:var(--bg-alt);border-right:1px solid var(--border);flex-direction:column;flex-shrink:0;width:252px;transition:width .18s,opacity .18s;display:flex;overflow-y:auto}.note-list.collapsed{opacity:0;pointer-events:none;border-right:none;width:0}.new-note{background:var(--accent);color:#fff;border-radius:var(--radius);font-family:var(--font-ui);border:none;justify-content:center;align-items:center;gap:7px;margin:14px;padding:9px;font-size:13px;font-weight:600;transition:background .15s;display:flex}.new-note:hover{background:var(--accent-strong)}.new-note svg{flex-shrink:0}.note-list-empty{color:var(--text-muted);text-align:center;margin:24px 16px;font-size:13px}.note-list ul{flex-direction:column;gap:1px;margin:0;padding:2px 10px 16px;list-style:none;display:flex}.note-list li{border-radius:var(--radius);align-items:center;transition:background .12s;display:flex}.note-list li:hover{background:var(--bg-hover)}.note-list li.active{background:var(--accent-soft)}.note-item{text-align:left;background:0 0;border:none;flex-direction:column;flex:1;gap:2px;min-width:0;padding:8px 10px;display:flex}.note-list li.active .note-title{color:var(--accent-strong)}.note-title{font-family:var(--font-ui);white-space:nowrap;text-overflow:ellipsis;min-width:0;font-size:13.5px;font-weight:600;overflow:hidden}.delete-note{width:26px;height:26px;color:var(--text-muted);opacity:0;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;margin-right:6px;transition:opacity .12s,background .12s,color .12s;display:flex}.note-list li:hover .delete-note,.note-list li.active .delete-note{opacity:1}.delete-note:hover{background:var(--border);color:var(--danger)}.note-editor{flex-direction:column;flex:1;min-width:0;display:flex}.note-editor-header{border-bottom:1px solid var(--border);flex-shrink:0;align-items:center;gap:14px;padding:14px 32px;display:flex}.note-title-input{font-family:var(--font-display);letter-spacing:-.01em;background:0 0;border:none;outline:none;flex:1;min-width:0;font-size:21px;font-weight:600}.note-title-input::placeholder{color:var(--text-muted);font-weight:500}.preview-toggle{border:1px solid var(--border);border-radius:var(--radius);font-family:var(--font-ui);letter-spacing:.01em;color:var(--text-muted);background:0 0;flex-shrink:0;padding:6px 14px;font-size:12.5px;font-weight:600;transition:border-color .12s,color .12s}.preview-toggle:hover{border-color:var(--accent);color:var(--accent)}.note-body-input{resize:none;font-family:var(--font-mono);background:0 0;border:none;outline:none;flex:1;max-width:760px;padding:28px 32px;font-size:13.5px;line-height:1.75}.note-body-input::placeholder{color:var(--text-muted)}.markdown-preview{flex:1;max-width:760px;padding:28px 32px;line-height:1.7;overflow-y:auto}.markdown-preview :first-child{margin-top:0}.markdown-preview h1,.markdown-preview h2,.markdown-preview h3{font-family:var(--font-display);letter-spacing:-.01em;font-weight:600}.markdown-preview p{margin:0 0 14px}.markdown-preview pre{background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;overflow-x:auto}.markdown-preview code{background:var(--bg-alt);font-family:var(--font-mono);border-radius:4px;padding:2px 5px;font-size:.9em}.markdown-preview pre code{background:0 0;padding:0}.markdown-preview blockquote{border-left:2px solid var(--accent);color:var(--text-muted);margin:0 0 14px;padding-left:14px}.markdown-preview a{color:var(--accent-strong);text-underline-offset:2px;text-decoration:underline}.empty-state{color:var(--text-muted);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:16px;display:flex}.empty-state p{font-family:var(--font-display);margin:0;font-size:15px;font-weight:500}.empty-state button{background:var(--accent);color:#fff;border-radius:var(--radius);font-family:var(--font-ui);border:none;padding:8px 18px;font-size:13px;font-weight:600;transition:background .15s}.empty-state button:hover{background:var(--accent-strong)}@media (width<=720px){.sidebar-toggle{display:flex}.app-body{position:relative;overflow:hidden}.note-list{z-index:10;width:100%;transition:transform .2s,opacity .2s;position:absolute;inset:0}.note-list.collapsed{width:100%;transform:translate(-100%)}}