:root{--bg:#14161a;--bg-raised:#1b1e24;--bg-hover:#22262e;--fg:#e8e6e1;--muted:#8b8f98;--accent:#e8b04b;--accent-fg:#14161a;--danger:#e06c5f;--border:#2a2e37;--code:#9ecf7a;--selection:#3a4150;--font-body:"Iowan Old Style", "Palatino", Georgia, serif;--font-ui:-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono:ui-monospace, "SF Mono", Menlo, monospace}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:radial-gradient(60rem 40rem at 85% -10%, #e8b04b0d, transparent 60%), radial-gradient(50rem 35rem at -15% 110%, #9ecf7a08, transparent 60%), var(--bg);color:var(--fg);font-family:var(--font-ui);-webkit-font-smoothing:antialiased}body:after{content:"";z-index:60;pointer-events:none;opacity:.028;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)'/%3E%3C/svg%3E");position:fixed;inset:0}::selection{background:var(--selection)}*{scrollbar-width:thin;scrollbar-color:var(--border) transparent}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button{font:inherit;color:inherit;background:var(--bg-hover);border:1px solid var(--border);cursor:pointer;border-radius:6px;justify-content:center;align-items:center;gap:.4rem;padding:.45rem .9rem;transition:color .12s,border-color .12s,background-color .12s;display:inline-flex}button svg{flex-shrink:0}button:hover{border-color:var(--muted)}button.primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);font-weight:600}button.primary:hover{filter:brightness(1.08)}button.primary:disabled{opacity:.6;cursor:wait}button.ghost{color:var(--muted);background:0 0;border-color:#0000}button.ghost:hover{color:var(--fg);border-color:var(--border)}button.small{min-height:2rem;padding:.35rem .75rem;font-size:.85rem}.sidebar-footer button,.lock-button,.settings-header button{min-width:2rem}button.danger:hover{color:var(--danger)}.app-frame{flex-direction:column;height:100%;display:flex}.app-frame-main{flex:1;min-height:0}.demo-banner{text-align:center;color:var(--accent);background:#e8b04b14;border-bottom:1px solid #e8b04b59;flex-shrink:0;padding:.4rem 1rem;font-size:.82rem}.auth-screen{place-items:center;height:100%;padding:1rem;display:grid}.auth-card{background:var(--bg-raised);border:1px solid var(--border);border-radius:12px;width:min(26rem,100%);padding:2rem;animation:.35s ease-out both rise;box-shadow:inset 0 1px #ffffff0a,0 1rem 3rem #00000059}@keyframes rise{0%{opacity:0;transform:translateY(8px)}}.auth-card h1{font-family:var(--font-body);letter-spacing:.02em;margin:0 0 .25rem}.tagline{color:var(--muted);margin:0 0 1.5rem}.mode-tabs{border-bottom:1px solid var(--border);gap:.25rem;margin-bottom:1.25rem;display:flex}.mode-tabs button{color:var(--muted);background:0 0;border:none;border-bottom:2px solid #0000;border-radius:0;margin-bottom:-1px;padding:.5rem .75rem}.mode-tabs button.active{color:var(--fg);border-bottom-color:var(--accent)}.auth-card form{flex-direction:column;gap:1rem;display:flex}.auth-card label{color:var(--muted);flex-direction:column;gap:.35rem;font-size:.9rem;display:flex}.auth-card input{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:.55rem .7rem}.auth-card input:focus{border-color:var(--accent);outline:none}.error{color:var(--danger);margin:0;font-size:.9rem}.hint{color:var(--muted);margin:1.25rem 0 0;font-size:.85rem}.recovery-code{font-family:var(--font-mono);background:var(--bg);border:1px dashed var(--accent);text-align:center;word-break:break-all;-webkit-user-select:all;user-select:all;border-radius:8px;margin:1.25rem 0;padding:1rem;font-size:1.05rem;display:block}.auth-actions{justify-content:flex-end;gap:.75rem;display:flex}.app-shell{grid-template-columns:16.5rem 1fr;height:100%;display:grid}.sidebar{background:var(--bg-raised);border-right:1px solid var(--border);flex-direction:column;min-height:0;display:flex}.sidebar-header{border-bottom:1px solid var(--border);z-index:10;background:var(--bg-raised);justify-content:space-between;align-items:center;padding:.85rem 1rem;display:flex;position:sticky;top:0}.brand{font-family:var(--font-body);letter-spacing:.02em;font-weight:700}.brand:after{content:".";color:var(--accent)}.note-search{background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238b8f98' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.25'/%3E%3Cpath d='M10.5 10.5L14 14'/%3E%3C/svg%3E") no-repeat .6rem center / 14px;color:inherit;border:1px solid var(--border);border-radius:6px;margin:.5rem .5rem 0;padding:.45rem .65rem .45rem 1.9rem;font-size:.9rem}.note-search:focus{border-color:var(--accent);outline:none}.note-list{flex:1;margin:0;padding:.5rem;list-style:none;overflow-y:auto}.note-item{text-align:left;background:0 0;border:none;border-radius:6px;justify-content:space-between;align-items:baseline;gap:.5rem;width:100%;padding:.55rem .65rem;display:flex}.note-item:hover{background:var(--bg-hover)}.note-item.active{background:var(--bg-hover);box-shadow:inset 2px 0 0 var(--accent)}.note-title{text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-body);font-size:.95rem;overflow:hidden}.note-title svg{vertical-align:-.15em;color:var(--danger)}.credential-name svg{vertical-align:-.15em;color:var(--muted);margin-right:.15rem}.note-when{color:var(--muted);flex-shrink:0;font-size:.75rem}.empty{color:var(--muted);padding:1rem .65rem;font-size:.9rem}.sidebar-footer{border-top:1px solid var(--border);align-items:center;gap:.25rem;padding:.6rem .75rem;font-size:.85rem;display:flex}.sidebar-footer .user{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.main-pane{flex-direction:column;min-width:0;min-height:0;display:flex}.banner{background:var(--bg-hover);border-bottom:1px solid var(--border);border-left:2px solid var(--accent);justify-content:space-between;align-items:center;gap:1rem;padding:.5rem 1rem;font-size:.9rem;animation:.2s ease-out both rise;display:flex}.note-toolbar{border-bottom:1px solid var(--border);z-index:10;-webkit-backdrop-filter:blur(8px);background:#14161ad9;justify-content:space-between;align-items:center;padding:.5rem 1rem;display:flex;position:sticky;top:0}.toolbar-actions{gap:.25rem;display:flex}.save-state{color:var(--muted);align-items:center;gap:.4rem;font-size:.8rem;display:inline-flex}.save-state.saving:before,.save-state.saved:before,.save-state.error:before{content:"";border-radius:50%;flex-shrink:0;width:6px;height:6px}.save-state.saving:before{background:var(--accent);animation:1s ease-in-out infinite breathe}.save-state.saved:before{background:var(--code)}.save-state.error:before{background:var(--danger)}.save-state.error{color:var(--danger)}@keyframes breathe{50%{opacity:.35}}.editor{flex:1;min-height:0}.editor>.cm-editor{height:100%}.placeholder{color:var(--muted);text-align:center;font-family:var(--font-body);flex:1;place-items:center;padding:2rem;font-style:italic;display:grid}.placeholder.pulse{animation:1.6s ease-in-out infinite breathe}.preview{font-family:var(--font-body);flex:1;padding:1.5rem 2rem;font-size:1.02rem;line-height:1.65;overflow-y:auto}.preview>*{max-width:72ch;margin-left:auto;margin-right:auto}.preview h1,.preview h2,.preview h3{font-family:var(--font-body)}.preview a{color:var(--accent)}.preview code{font-family:var(--font-mono);background:var(--bg-raised);color:var(--code);border-radius:4px;padding:.1em .35em;font-size:.9em}.preview pre{background:var(--bg-raised);border:1px solid var(--border);border-radius:8px;padding:1rem;overflow-x:auto}.preview pre code{background:0 0;padding:0}.preview blockquote{border-left:3px solid var(--accent);color:var(--muted);margin-left:0;padding-left:1rem}.settings-overlay{z-index:40;background:#00000073;place-items:center;padding:1rem;display:grid;position:fixed;inset:0}.settings-card{background:var(--bg-raised);border:1px solid var(--border);border-radius:10px;width:min(28rem,100%);max-height:85vh;padding:1.25rem 1.5rem;animation:.25s ease-out both rise;overflow-y:auto;box-shadow:inset 0 1px #ffffff0a,0 1rem 3rem #00000059}.settings-header{justify-content:space-between;align-items:center;display:flex}.settings-card h2{margin:0}.settings-card h3{margin:1.25rem 0 .5rem;font-size:.95rem}.settings-card .muted{color:var(--muted);margin:.5rem 0 0;font-size:.82rem}.credential-list{margin:0 0 .6rem;padding:0;list-style:none}.credential-list li{align-items:baseline;gap:.6rem;padding:.3rem 0;display:flex}.credential-name{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.credential-name em{color:var(--accent);font-style:normal}.credential-when{color:var(--muted);flex-shrink:0;font-size:.78rem}.menu-button,.lock-button,.scrim{display:none}@media (width>=641px){.note-toolbar.no-note{display:none}}@media (width<=640px){.app-shell{grid-template-columns:1fr}.sidebar{z-index:30;width:min(20rem,85vw);transition:transform .2s;position:fixed;top:0;bottom:0;left:0;transform:translate(-105%)}.sidebar.open{transform:translate(0);box-shadow:0 0 2rem #00000059}.scrim{z-index:20;background:#0006;border:none;padding:0;display:block;position:fixed;inset:0}.menu-button,.lock-button{display:inline-flex}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}@media (width<=640px){button{min-height:2.75rem}button.small{padding:.5rem .85rem;font-size:.9rem}.sidebar-footer button,.lock-button,.settings-header button{min-width:2.75rem}.sidebar-footer{gap:.5rem}.note-item{padding:.8rem .65rem}.note-search{padding-top:.6rem;padding-bottom:.6rem;font-size:16px}.auth-card input{padding:.7rem .75rem}}