:root{--bg: #ffffff;--sidebar-bg: #fbfbfa;--fg: #37352f;--muted: #8a8884;--border: #e9e9e7;--border-strong: #dcdcda;--accent: #2383e2;--accent-fg: #ffffff;--danger: #c0392b;--radius-sm: 4px;--radius: 6px;--radius-lg: 10px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--space-7: 48px;--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", ui-sans-serif, system-ui, sans-serif;--shadow-sm: 0 1px 2px rgba(15, 15, 15, .08)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--font-sans);color:var(--fg);background:var(--bg);-webkit-font-smoothing:antialiased}button{font-family:inherit}.app{display:flex;height:100vh;overflow:hidden}.sidebar{width:280px;min-width:280px;background:var(--sidebar-bg);border-right:1px solid var(--border);display:flex;flex-direction:column;height:100%}.sidebar-header{padding:var(--space-4) var(--space-4) var(--space-2)}.sidebar-title{font-size:.95rem;font-weight:700;margin:0 0 var(--space-3);letter-spacing:-.01em}.search-input{width:100%;padding:var(--space-2) var(--space-3);border:1px solid var(--border-strong);border-radius:var(--radius-sm);font-size:.85rem;background:var(--bg);color:var(--fg)}.search-input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.new-note-btn{margin:var(--space-2) var(--space-4);padding:var(--space-2) var(--space-3);border:none;border-radius:var(--radius-sm);background:var(--accent);color:var(--accent-fg);font-size:.85rem;font-weight:600;cursor:pointer;transition:background .15s ease;min-height:40px}.new-note-btn:hover{background:#1a6fc4}.new-note-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.note-list{list-style:none;margin:0;padding:var(--space-1) var(--space-2) var(--space-4);overflow-y:auto;flex:1}.note-list-item{border-radius:var(--radius-sm);margin-bottom:var(--space-1)}.note-list-btn{width:100%;text-align:left;background:none;border:none;border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);cursor:pointer;display:block;color:var(--fg);min-height:48px}.note-list-btn:hover{background:#37352f0f}.note-list-btn:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.note-list-item.active .note-list-btn{background:#2383e21f}.note-list-title{font-size:.88rem;font-weight:600;margin:0 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.note-list-snippet{font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}.sidebar-empty{padding:var(--space-4);color:var(--muted);font-size:.85rem;line-height:1.5}.main{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--bg)}.editor-toolbar{display:flex;align-items:center;gap:var(--space-1);padding:var(--space-3) var(--space-5);border-bottom:1px solid var(--border);flex-wrap:wrap}.toolbar-btn{border:1px solid transparent;background:none;border-radius:var(--radius-sm);min-width:36px;min-height:36px;font-size:.9rem;cursor:pointer;color:var(--fg);transition:background .15s ease}.toolbar-btn:hover{background:#37352f14}.toolbar-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.toolbar-spacer{flex:1}.save-status{font-size:.78rem;color:var(--muted);padding:0 var(--space-2);white-space:nowrap}.delete-btn{border:1px solid var(--border-strong);background:var(--bg);color:var(--danger);border-radius:var(--radius-sm);padding:var(--space-1) var(--space-3);font-size:.8rem;cursor:pointer;min-height:36px;transition:background .15s ease,border-color .15s ease}.delete-btn:hover{background:#c0392b14;border-color:var(--danger)}.delete-btn:focus-visible{outline:2px solid var(--danger);outline-offset:1px}.editor-scroll{flex:1;overflow-y:auto}.editor-wrap{max-width:740px;margin:0 auto;padding:var(--space-6) var(--space-5) var(--space-7)}.title-input{width:100%;border:none;outline:none;font-size:2rem;font-weight:700;letter-spacing:-.02em;margin-bottom:var(--space-3);color:var(--fg);background:transparent}.title-input::placeholder{color:var(--muted)}.content-editable{min-height:50vh;outline:none;font-size:1rem;line-height:1.7}.content-editable:empty:before{content:attr(data-placeholder);color:var(--muted)}.content-editable h1{font-size:1.6rem;margin:var(--space-5) 0 var(--space-2)}.content-editable h2{font-size:1.3rem;margin:var(--space-4) 0 var(--space-2)}.content-editable p{margin:0 0 var(--space-3)}.content-editable ul,.content-editable ol{margin:0 0 var(--space-3);padding-left:1.4rem}.empty-state,.loading-state,.error-state{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--space-3);color:var(--muted);padding:var(--space-6);text-align:center}.empty-state h2,.error-state h2{color:var(--fg);font-size:1.2rem;margin:0}.empty-state p,.error-state p{margin:0;max-width:32ch;font-size:.9rem}@media (max-width: 768px){.app{flex-direction:column}.sidebar{width:100%;min-width:0;height:40vh;border-right:none;border-bottom:1px solid var(--border)}.main{height:60vh}.editor-wrap{padding:var(--space-4) var(--space-4) var(--space-6)}}@media (prefers-reduced-motion: reduce){*{transition:none!important}}