:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;--ink: #172033;--muted: #6d7788;--label: #465166;--page: #f3f5f8;--line: #dce2ea;--surface: #ffffff;--surface-soft: #f7f9fb;--surface-control: #ffffff;--hover: #eef3fa;--selected: #edf4ff;--editor-text: #2d374a;--code-surface: #101827;--code-text: #e6edf7;--accent: #2563eb;--accent-strong: #1748bb;--mint: #0f766e;--danger: #b42318;--shadow: 0 18px 45px rgba(23, 32, 51, .08);color:var(--ink);background:var(--page)}html[data-theme=dark]{--ink: #f0f1ef;--muted: #a8aaa9;--label: #d1d3d1;--page: #101112;--line: #303337;--surface: #171819;--surface-soft: #202223;--surface-control: #202223;--hover: #2a2c2d;--selected: #26334e;--editor-text: #e4e6e5;--code-surface: #0b0c0d;--code-text: #eef0ef;--accent: #6d9cff;--accent-strong: #8aafff;--mint: #5eead4;--danger: #ff8f85;--shadow: 0 18px 45px rgba(0, 0, 0, .28)}*{box-sizing:border-box}html{min-width:320px}body{margin:0;min-width:320px;min-height:100dvh;overflow-x:hidden;background:var(--page)}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.65}input,textarea,select{min-width:0;max-width:100%}.auth-layout{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(380px,.9fr);background:var(--code-surface)}.auth-hero{padding:clamp(38px,8vw,110px);color:#f7fafc;display:flex;flex-direction:column;justify-content:center;background:var(--code-surface)}.auth-hero h1{margin:18px 0;font-size:74px;line-height:.98;letter-spacing:0}.auth-hero h1 span{color:#83b1ff}.hero-copy{max-width:520px;color:#b6c3d7;font-size:17px;line-height:1.7}.hero-facts{display:grid;gap:12px;margin-top:30px;color:#dce7f7;font-size:14px}.hero-facts i,.connection-pill i{width:7px;height:7px;display:inline-block;border-radius:50%;background:#5eead4;margin-right:9px}.brand-mark{width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.25);border-radius:8px;color:#fff;font-weight:800;letter-spacing:0}.brand-mark.small{width:32px;height:32px;border-color:#bdc9d9;color:#1748bb;font-size:12px}.auth-panel{display:flex;flex-direction:column;justify-content:center;padding:clamp(30px,7vw,90px);background:var(--surface)}.auth-tabs,.segmented{display:inline-flex;padding:4px;border-radius:8px;background:var(--surface-soft);gap:3px;width:fit-content}.auth-tabs button,.segmented button{border:0;background:transparent;color:var(--muted);padding:9px 15px;border-radius:6px;font-weight:700}.auth-tabs button.active,.segmented button.active{background:var(--surface);color:var(--ink);box-shadow:0 2px 7px #1720331a}.panel-heading{margin:48px 0 30px}.panel-heading h2{margin:8px 0 12px;font-size:32px;letter-spacing:0}.panel-heading p:not(.eyebrow){margin:0;color:var(--muted);line-height:1.6}.eyebrow{margin:0;color:#5e6b7f;font-size:11px;font-weight:800;letter-spacing:1.6px}.auth-hero .eyebrow{color:#86a5d0}.form-stack{display:grid;gap:18px}.form-stack label,.metadata-row label{display:grid;gap:8px;color:var(--label);font-size:13px;font-weight:700}input,textarea,select{border:1px solid var(--line);outline:none;background:var(--surface-control);color:var(--ink);border-radius:7px}input:focus,textarea:focus,select:focus{border-color:#6d99ec;box-shadow:0 0 0 3px #2563eb1a}.form-stack input{width:100%;padding:13px 14px}.primary-button{border:0;border-radius:7px;padding:13px 18px;color:#fff;background:var(--accent);font-weight:800;transition:background .15s,transform .15s}.primary-button:hover{background:var(--accent-strong);transform:translateY(-1px)}.primary-button.compact{width:fit-content;padding:11px 16px}.auth-note{margin:24px 0 0;color:#8993a3;font-size:12px;line-height:1.6}.download-link{align-self:flex-start;margin-top:12px;color:var(--accent-strong);font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:3px}.form-error{margin:0;color:var(--danger);font-size:13px}.app-shell{min-height:100vh;background:var(--page)}.topbar{height:68px;padding:0 26px;display:flex;align-items:center;justify-content:space-between;background:var(--surface);border-bottom:1px solid var(--line)}.topbar-brand,.topbar-actions,.editor-actions,.editor-footer,.editor-breadcrumb{display:flex;align-items:center}.topbar-brand{min-width:0;gap:11px}.topbar-brand>div:last-child{min-width:0}.topbar-brand strong,.topbar-brand span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.topbar-brand strong{font-size:14px}.topbar-brand span{margin-top:2px;color:var(--muted);font-size:11px}.topbar-actions{min-width:0;gap:14px;flex-wrap:wrap;justify-content:flex-end}.connection-pill{color:var(--muted);font-size:12px}.connection-pill.offline i{background:#f59e0b}.status-text{color:var(--muted);font-size:12px}.ghost-button,.icon-button,.new-button{border:0;background:transparent;color:var(--muted)}.ghost-button{padding:8px 4px;font-size:13px;font-weight:700}.icon-button{width:34px;height:34px;display:grid;place-items:center;border-radius:6px;font-size:19px}.icon-button:hover,.new-button:hover{background:var(--hover);color:var(--ink)}.workspace{display:grid;grid-template-columns:320px minmax(0,1fr);min-height:calc(100vh - 68px)}.sidebar{min-width:0;border-right:1px solid var(--line);background:var(--surface-soft);padding:26px 18px;overflow:auto}.sidebar-head{display:flex;align-items:center;justify-content:space-between;padding:0 8px 22px}.sidebar-head h2{margin:5px 0 0;font-size:26px;letter-spacing:0}.new-button{width:34px;height:34px;border:1px solid var(--line);border-radius:7px;background:var(--surface-control);font-size:22px;line-height:1}.search-wrap{display:flex;align-items:center;gap:8px;padding:0 12px;background:var(--surface-control);border:1px solid var(--line);border-radius:7px}.search-wrap span{color:#8a96a8;font-size:21px}.search-wrap input{width:100%;min-width:0;flex:1;border:0;padding:12px 0;box-shadow:none}.category-filter{width:100%;margin-top:10px;padding:10px 11px;color:var(--label)}.note-count{padding:22px 8px 10px;color:#8993a3;font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase}.note-list{display:grid;gap:6px}.note-row{display:grid;width:100%;min-width:0;gap:6px;text-align:left;border:1px solid transparent;border-radius:8px;padding:13px 12px;background:transparent;color:var(--ink)}.note-row:hover{background:var(--hover)}.note-row.selected{border-color:#b9cdf4;background:var(--selected)}.note-row-title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:800}.note-row-preview{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--muted);font-size:12px}.note-row-meta{min-width:0;overflow:hidden;color:#8a95a6;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.empty-list{padding:42px 15px;text-align:center;color:#8993a3}.empty-list span{color:#87a9ed;font-size:28px}.empty-list p{margin:12px 0 4px;color:var(--label);font-weight:800}.empty-list small{font-size:12px}.editor-area{min-width:0;background:var(--surface)}.editor{max-width:980px;min-width:0;min-height:calc(100vh - 68px);margin:0 auto;padding:36px clamp(24px,7vw,92px) 28px;display:flex;flex-direction:column}.editor-head{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:12px}.editor-breadcrumb{min-width:0;gap:9px;color:#8a95a6;font-size:12px}.editor-breadcrumb span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.editor-breadcrumb b{color:#c1c9d4}.title-input{width:100%;min-width:0;margin:24px 0 20px;border:0;padding:0;font-size:52px;font-weight:850;letter-spacing:0}.title-input:focus{box-shadow:none}.metadata-row{display:grid;grid-template-columns:1fr 1fr auto;gap:14px;align-items:end;padding-bottom:25px;border-bottom:1px solid var(--line)}.metadata-row label{min-width:0}.metadata-row input{width:100%;padding:10px 11px;font-size:13px}.updated-label{color:#8993a3;font-size:11px;line-height:1.5}.updated-label strong{color:var(--label);font-size:12px}.editor-toolbar{display:flex;align-items:center;justify-content:space-between;padding:20px 0 12px}.editor-toolbar-controls,.markdown-tools,.theme-picker{min-width:0}.editor-toolbar-controls,.markdown-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.theme-picker{display:flex;align-items:center;gap:6px}.theme-picker select{max-width:100%;padding:7px 9px;font-size:12px}.editor-tool{min-width:30px;height:30px;padding:0 8px;border:1px solid var(--line);border-radius:6px;color:var(--label);background:var(--surface-control);font-size:12px;font-weight:800}.editor-tool:hover{border-color:#b9cdf4;color:var(--accent-strong);background:var(--selected)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.auth-theme-picker{align-self:flex-end;margin-bottom:18px}.markdown-hint{color:#97a2b2;font-size:11px}.body-input{width:100%;min-width:0;max-width:100%;flex:1;min-height:420px;resize:vertical;border:0;border-radius:0;padding:14px 0;color:var(--editor-text);font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:15px;line-height:1.85}.body-input:focus{box-shadow:none}.markdown-preview{min-width:0;flex:1;min-height:420px;padding:14px 0;color:var(--editor-text);font-size:16px;line-height:1.75;overflow-wrap:anywhere}.markdown-preview h1,.markdown-preview h2,.markdown-preview h3{color:var(--ink);line-height:1.3;margin:1.2em 0 .55em}.markdown-preview h1{font-size:30px}.markdown-preview h2{font-size:24px}.markdown-preview h3{font-size:19px}.markdown-preview p{margin:.7em 0}.markdown-preview ul{padding-left:22px}.markdown-preview a{color:var(--accent-strong);text-decoration:underline;text-underline-offset:2px}.markdown-preview code{padding:2px 5px;border-radius:4px;color:var(--accent-strong);background:var(--selected);font-size:.9em}.markdown-preview pre{padding:15px;overflow:auto;border-radius:7px;background:var(--code-surface);color:var(--code-text)}.markdown-preview pre code{padding:0;color:inherit;background:transparent}.editor-footer{min-width:0;gap:8px;padding-top:16px;border-top:1px solid var(--line)}.status-dot{width:7px;height:7px;border-radius:50%;background:#10b981}.status-dot.pending{background:#f59e0b}.word-count{margin-left:auto;color:#9aa4b3;font-size:11px}.editor-footer .status-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.word-count{white-space:nowrap}.empty-editor{min-height:calc(100vh - 68px);display:grid;place-content:center;justify-items:center;padding:30px;text-align:center}.empty-orbit{width:72px;height:72px;display:grid;place-items:center;border:1px solid #bbcdf0;border-radius:50%;color:#5f8ee7;font-size:28px;background:#f2f6ff}.empty-editor h2{margin:22px 0 7px;font-size:27px}.empty-editor p{margin:0 0 22px;color:var(--muted)}.toast{position:fixed;right:22px;bottom:22px;max-width:min(380px,calc(100vw - 44px));padding:12px 16px;border-radius:7px;color:#fff;background:#172033;box-shadow:var(--shadow);font-size:13px;z-index:10}.toast.error{background:#8c221b}.toast.hidden{display:none}html[data-theme=dark] body,html[data-theme=dark] .app-shell{background:#101112;color:var(--ink)}html[data-theme=dark] .auth-panel,html[data-theme=dark] .topbar,html[data-theme=dark] .editor-area{background:#171819}html[data-theme=dark] .sidebar{background:#141516}html[data-theme=dark] input,html[data-theme=dark] textarea,html[data-theme=dark] select,html[data-theme=dark] .search-wrap,html[data-theme=dark] .new-button{color:var(--ink);background:#202223;border-color:var(--line)}html[data-theme=dark] .search-wrap input,html[data-theme=dark] .title-input,html[data-theme=dark] .body-input{background:transparent;color:var(--ink)}html[data-theme=dark] .auth-tabs,html[data-theme=dark] .segmented{background:#292b2d}html[data-theme=dark] .auth-tabs button.active,html[data-theme=dark] .segmented button.active{color:var(--ink);background:#3a3d40}html[data-theme=dark] .auth-hero{background:#101112}html[data-theme=dark] .note-row{color:var(--ink)}html[data-theme=dark] .note-row:hover{background:#242628}html[data-theme=dark] .note-row.selected{border-color:#4669a3;background:#1a3158}html[data-theme=dark] .icon-button:hover,html[data-theme=dark] .new-button:hover{background:#2a2d30;color:var(--ink)}html[data-theme=dark] .editor-tool{color:var(--muted);background:#202223;border-color:var(--line)}html[data-theme=dark] .editor-tool:hover{color:var(--ink);background:#243a61;border-color:#4669a3}html[data-theme=dark] .markdown-preview{color:#d4deeb}html[data-theme=dark] .markdown-preview h1,html[data-theme=dark] .markdown-preview h2,html[data-theme=dark] .markdown-preview h3{color:var(--ink)}html[data-theme=dark] .markdown-preview code{color:#b3c8ff;background:#1c3157}html[data-theme=dark] .updated-label strong{color:#c5d2e3}html[data-theme=dark] .empty-orbit{border-color:#405d8e;color:#9ab9ff;background:#172a4a}@media(max-width:820px){.auth-layout{grid-template-columns:1fr}.auth-hero{min-height:auto;padding:max(42px,env(safe-area-inset-top)) 28px 35px}.auth-hero h1{font-size:44px}.auth-panel{padding:35px 28px max(48px,env(safe-area-inset-bottom))}.topbar{height:auto;min-height:68px;padding:max(14px,env(safe-area-inset-top)) 16px 14px;gap:12px;flex-wrap:wrap}.topbar-brand{flex:1 1 180px}.topbar-actions{flex:1 1 auto;gap:10px}.topbar-actions .status-text{display:none}.workspace{grid-template-columns:1fr;min-height:calc(100dvh - 68px)}.sidebar{border-right:0;border-bottom:1px solid var(--line);max-height:min(44dvh,430px);padding:18px 14px}.sidebar-head{padding-bottom:16px}.note-list{grid-template-columns:repeat(auto-fill,minmax(min(220px,calc(100vw - 44px)),1fr))}.editor{min-height:auto;padding:25px 18px 22px}.metadata-row{grid-template-columns:1fr 1fr}.updated-label{grid-column:1 / -1}.body-input,.markdown-preview{min-height:min(52dvh,420px)}}@media(max-width:520px){.topbar{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));gap:9px}.topbar-brand span{display:none}.topbar-brand{flex:1 1 120px}.topbar-actions{margin-left:auto;gap:6px;flex:0 1 auto;flex-wrap:nowrap}.topbar .theme-picker select{width:80px}.connection-pill{display:none}.ghost-button{font-size:12px;white-space:nowrap}.icon-button{flex:0 0 34px}.sidebar{max-height:min(44dvh,400px);padding:16px 12px}.sidebar-head{padding:0 6px 14px}.sidebar-head h2{font-size:22px}.note-list{grid-template-columns:1fr}.metadata-row{grid-template-columns:1fr;gap:12px;padding-bottom:20px}.updated-label{grid-column:auto}.editor{width:100%;padding:20px max(16px,env(safe-area-inset-left)) max(22px,env(safe-area-inset-bottom))}.editor-head{align-items:flex-start}.editor-toolbar{align-items:center;gap:8px;flex-direction:row;flex-wrap:wrap;padding:16px 0 8px}.editor-toolbar-controls,.markdown-tools{width:100%}.theme-picker,.markdown-hint{margin-left:auto}.title-input{margin:18px 0;font-size:32px;line-height:1.15}.body-input,.markdown-preview{min-height:min(54dvh,420px);font-size:15px;line-height:1.75}.editor-footer{gap:6px;padding-top:12px;flex-wrap:wrap}.editor-footer .status-text{max-width:calc(100% - 54px)}.word-count{margin-left:auto}}.mobile-back-button,#mobile-back-button{display:none}@media(max-width:600px){.app-shell[data-mobile-view=list] .workspace,.app-shell.mobile-view-list .workspace{display:block;min-height:calc(100dvh - 68px)}.app-shell[data-mobile-view=list] .editor-area,.app-shell.mobile-view-list .editor-area{display:none}.app-shell[data-mobile-view=list] .sidebar,.app-shell.mobile-view-list .sidebar{min-height:calc(100dvh - 68px);max-height:none;border-bottom:0}.app-shell[data-mobile-view=editor],.app-shell.mobile-view-editor{min-height:100dvh}.app-shell[data-mobile-view=editor] .topbar,.app-shell[data-mobile-view=editor] .sidebar,.app-shell.mobile-view-editor .topbar,.app-shell.mobile-view-editor .sidebar{display:none}.app-shell[data-mobile-view=editor] .workspace,.app-shell.mobile-view-editor .workspace{display:block;min-height:100dvh}.app-shell[data-mobile-view=editor] .editor-area,.app-shell.mobile-view-editor .editor-area{display:block;width:100%;min-height:100dvh}.app-shell[data-mobile-view=editor] .editor,.app-shell.mobile-view-editor .editor{width:100%;max-width:none;min-height:100dvh;height:100dvh;margin:0;padding:max(10px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));overflow:hidden}.app-shell[data-mobile-view=editor] .editor-head,.app-shell.mobile-view-editor .editor-head{flex:0 0 auto;min-height:36px;align-items:center}.app-shell[data-mobile-view=editor] .mobile-back-button,.app-shell[data-mobile-view=editor] #mobile-back-button,.app-shell.mobile-view-editor .mobile-back-button,.app-shell.mobile-view-editor #mobile-back-button{display:inline-grid;flex:0 0 34px;place-items:center;width:34px;height:34px;margin-right:auto}.app-shell[data-mobile-view=editor] .editor-breadcrumb,.app-shell[data-mobile-view=editor] .metadata-row,.app-shell[data-mobile-view=editor] .markdown-hint,.app-shell[data-mobile-view=editor] .editor-footer,.app-shell.mobile-view-editor .editor-breadcrumb,.app-shell.mobile-view-editor .metadata-row,.app-shell.mobile-view-editor .markdown-hint,.app-shell.mobile-view-editor .editor-footer{display:none}.app-shell[data-mobile-view=editor] .editor-actions,.app-shell.mobile-view-editor .editor-actions{width:100%;margin-left:0;justify-content:space-between}.app-shell[data-mobile-view=editor] .title-input,.app-shell.mobile-view-editor .title-input{flex:0 0 auto;width:100%;margin:14px 0 12px;padding:0;font-size:30px;line-height:1.2}.app-shell[data-mobile-view=editor] .editor-toolbar,.app-shell.mobile-view-editor .editor-toolbar{flex:0 0 auto;display:block;width:100%;padding:8px 0 10px}.app-shell[data-mobile-view=editor] .editor-toolbar-controls,.app-shell.mobile-view-editor .editor-toolbar-controls{display:flex;width:100%;min-width:0;align-items:center;gap:8px;flex-wrap:wrap}.app-shell[data-mobile-view=editor] .markdown-tools,.app-shell.mobile-view-editor .markdown-tools{display:flex;width:100%;min-width:0;max-width:100%;flex:1 1 100%;align-items:center;gap:6px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}.app-shell[data-mobile-view=editor] .markdown-tools .editor-tool,.app-shell.mobile-view-editor .markdown-tools .editor-tool{flex:0 0 30px}.app-shell[data-mobile-view=editor] .segmented,.app-shell.mobile-view-editor .segmented{flex:0 0 auto}.app-shell[data-mobile-view=editor] .body-input,.app-shell[data-mobile-view=editor] .markdown-preview,.app-shell.mobile-view-editor .body-input,.app-shell.mobile-view-editor .markdown-preview{flex:1 1 auto;min-height:0;width:100%;overflow:auto}.app-shell[data-mobile-view=editor] .body-input,.app-shell.mobile-view-editor .body-input{resize:none;padding:10px 0 0;font-size:15px;line-height:1.75}.app-shell[data-mobile-view=editor] .markdown-preview,.app-shell.mobile-view-editor .markdown-preview{padding:10px 0 0;font-size:15px;line-height:1.7}}