:root,[data-theme=dark]{--bg: #1e1e23;--bg-elev: #26262e;--bg-input: #2d2d37;--border: #3a3a45;--text: #e6e6ec;--text-dim: #9a9aa8;--accent: #6ea8fe;--accent-dim: #2f4a73;--on-accent: #0b1220;--danger: #ff8a8a;--code-bg: #0d1117}[data-theme=light]{--bg: #ffffff;--bg-elev: #f4f4f7;--bg-input: #ececf1;--border: #d9d9e0;--text: #1b1b22;--text-dim: #6b6b78;--accent: #2f6fed;--accent-dim: #cfe0ff;--on-accent: #ffffff;--danger: #d63d3d;--code-bg: #0d1117}:root{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color-scheme:light dark}*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:var(--bg);color:var(--text)}#app{display:grid;grid-template-columns:260px 1fr;height:100vh}#sidebar{background:var(--bg-elev);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--border)}.brand{font-weight:700;letter-spacing:.02em}.brand-mark{margin-right:.1rem}.header-actions{display:flex;align-items:center;gap:.4rem}#theme-toggle{font-size:1rem;line-height:1;width:1.8rem;height:1.8rem;padding:0;border-radius:.4rem}#new-note{font-size:1.1rem;line-height:1;width:1.8rem;height:1.8rem;padding:0;border-radius:.4rem}.search-wrap{padding:.5rem .75rem;border-bottom:1px solid var(--border)}#search{width:100%;background:var(--bg-input);border:1px solid var(--border);border-radius:.45rem;color:var(--text);font-size:.85rem;padding:.4rem .6rem}#search:focus{outline:none;border-color:var(--accent)}.note-empty{list-style:none;color:var(--text-dim);font-size:.83rem;padding:.75rem .6rem;text-align:center}#note-list{list-style:none;margin:0;padding:.5rem;overflow-y:auto;flex:1}.note-item{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:.4rem;row-gap:.15rem;padding:.55rem .6rem;border-radius:.45rem;cursor:pointer}.note-item:hover{background:var(--bg-input)}.note-item.active{background:var(--accent-dim)}.note-item-title{grid-column:1;grid-row:1;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.note-item-meta{grid-column:1;grid-row:2;font-size:.72rem;color:var(--text-dim)}.note-pin{grid-column:2;grid-row:1 / span 2;background:transparent;border:none;padding:.1rem .2rem;font-size:.85rem;line-height:1;border-radius:.3rem;opacity:0;transition:opacity .12s ease}.note-item:hover .note-pin,.note-item.pinned .note-pin,.note-pin:focus-visible{opacity:1}.note-pin:hover{border:none}#main{display:flex;flex-direction:column;min-width:0}#toolbar{display:flex;align-items:center;gap:.75rem;padding:.6rem 1rem;border-bottom:1px solid var(--border)}#note-title{flex:1;background:transparent;border:none;color:var(--text);font-size:1.05rem;font-weight:600;padding:.35rem 0}#note-title:focus{outline:none}.toolbar-actions{display:flex;align-items:center;gap:.6rem}button{background:var(--bg-input);color:var(--text);border:1px solid var(--border);border-radius:.45rem;padding:.4rem .8rem;font-size:.85rem;cursor:pointer;transition:border-color .15s ease,background .15s ease,color .15s ease}button:hover:not(:disabled){border-color:var(--accent)}button:disabled{opacity:.5;cursor:not-allowed}.icon-btn{color:var(--text-dim)}.icon-btn:hover:not(:disabled){color:var(--text);border-color:var(--accent)}.icon-btn.danger:hover:not(:disabled){color:var(--danger);border-color:var(--danger)}.view-switch{position:relative;display:inline-flex;background:var(--bg-input);border:1px solid var(--border);border-radius:.5rem;padding:.2rem}.view-thumb{position:absolute;top:.2rem;left:.2rem;width:calc(50% - .2rem);height:calc(100% - .4rem);background:var(--accent);border-radius:.35rem;transition:transform .2s ease;z-index:0}.view-switch:has(#view-preview.active) .view-thumb{transform:translate(100%)}.view-switch .seg{position:relative;z-index:1;background:transparent;border:none;padding:.3rem .95rem;font-size:.83rem;font-weight:600;color:var(--text-dim)}.view-switch .seg:hover:not(:disabled){color:var(--text)}.view-switch .seg.active{color:var(--on-accent)}.view-switch:has(.seg:disabled){opacity:.5}#content{flex:1;min-height:0;display:flex}#editor{flex:1;resize:none;border:none;outline:none;background:var(--bg);color:var(--text);padding:1.25rem 1.5rem;font-family:SF Mono,ui-monospace,Cascadia Code,Menlo,monospace;font-size:.95rem;line-height:1.6}#preview{flex:1;overflow-y:auto;padding:1.25rem 1.75rem;line-height:1.65}#preview :is(h1,h2,h3){border-bottom:1px solid var(--border);padding-bottom:.25rem}#preview pre{background:var(--code-bg);color:#e6edf3;padding:.85rem 1rem;border-radius:.5rem;overflow-x:auto}#preview code{background:var(--bg-elev);padding:.1rem .35rem;border-radius:.3rem}#preview pre code{padding:0}#preview blockquote{border-left:3px solid var(--accent-dim);margin:0;padding-left:1rem;color:var(--text-dim)}#preview a{color:var(--accent)}#preview table{border-collapse:collapse;width:100%;margin:.75rem 0}#preview th,#preview td{border:1px solid var(--border);padding:.45rem .7rem;text-align:left}#preview thead th{background:var(--bg-elev)}#preview tbody tr:nth-child(2n){background:var(--bg-elev)}#preview li:has(>input[type=checkbox]){list-style:none;margin-left:-1.2rem}#preview input[type=checkbox]{margin-right:.45rem;accent-color:var(--accent)}#preview img{max-width:100%;border-radius:.4rem}#preview hr{border:none;border-top:1px solid var(--border);margin:1.25rem 0}#stats{display:flex;align-items:center;gap:1.25rem;padding:.5rem 1.5rem;border-top:1px solid var(--border);background:var(--bg-elev);font-size:.8rem;color:var(--text-dim)}.stat strong{color:var(--text);font-weight:600}.stat-badge{margin-left:auto;background:var(--accent-dim);color:var(--accent);padding:.1rem .5rem;border-radius:.3rem;font-weight:600;letter-spacing:.05em}.sidebar-footer{padding:.5rem 1rem;border-top:1px solid var(--border)}.link-btn{background:transparent;border:none;padding:.2rem 0;color:var(--text-dim);font-size:.8rem}.link-btn:hover{color:var(--accent);border:none}#about-modal{width:min(28rem,92vw);border:1px solid var(--border);border-radius:.75rem;background:var(--bg-elev);color:var(--text);padding:0}#about-modal::backdrop{background:#00000080}.about-body{padding:1.5rem}.about-body h2{margin:0 0 .75rem}.about-body p{margin:0 0 .75rem;line-height:1.55;font-size:.92rem}.about-links a{color:var(--accent)}.primary{margin-top:.5rem;background:var(--accent);color:var(--on-accent);border:1px solid var(--accent);font-weight:600}.primary:hover:not(:disabled){filter:brightness(1.05)}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}