:root{--bg:#f8f9f5;--surface:#fff;--side:#f0f2eb;--text:#293128;--muted:#8b9387;--line:#e5e9df;--accent:#536b43;--accent-soft:#e3eadb;--shadow:0 20px 80px #202f2520;--paper:#fff;--sage:#edf3e7;--sand:#faf1df;--rose:#f8eaea;--sky:#eaf1f6}*{box-sizing:border-box}body{margin:0;color:var(--text);background:var(--bg);font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif;font-size:14px;letter-spacing:.1px}button,input,textarea,select{font:inherit}button{cursor:pointer;border:0;background:none;color:inherit}button,input,textarea,select{outline-color:#95ad7f}button{transition:background .2s,transform .2s}button:disabled{opacity:.5;cursor:wait}button:hover{filter:brightness(.97)}button:active{transform:translateY(1px)}[hidden]{display:none!important}svg{width:19px;height:19px;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}i{display:inline-flex;font-style:normal;align-items:center;justify-content:center}.brand{display:flex;gap:10px;align-items:center;font-size:23px;letter-spacing:2px;font-weight:650}.brand-icon{display:grid;place-items:center;background:var(--accent);color:#fff;border-radius:11px;width:37px;height:39px;font-size:19px}.brand small{font-size:10px;font-weight:500;letter-spacing:2px;color:var(--muted);margin:6px 0 0 -3px}.primary{background:var(--accent);color:white;padding:13px 20px;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:12px;font-weight:550}.primary:hover{background:#425936}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:35px;height:35px;border-radius:9px}.icon-button:hover,.subtle:hover{background:var(--accent-soft)}#app{display:flex;min-height:100vh}aside{width:244px;position:fixed;inset:0 auto 0 0;background:var(--side);padding:35px 23px 0;display:flex;flex-direction:column;border-right:1px solid var(--line);z-index:4}.new-note{width:100%;margin:39px 0 31px;justify-content:flex-start;padding:12px 15px}.new-note>span{font-size:23px;font-weight:300}.new-note kbd{margin-left:auto;opacity:.5;border:1px solid #ffffff55;background:none;color:white}.nav-label{font-size:10px;letter-spacing:2px;color:var(--muted);padding:0 12px 12px}nav{display:flex;flex-direction:column;gap:7px}.nav{padding:13px 12px;display:flex;align-items:center;gap:12px;border-radius:9px;text-align:left;color:#737e6a;font-size:13px}.nav.active{background:#e0e8d6;color:#435936;font-weight:600}.nav b{margin-left:auto;font-size:11px;font-weight:500;opacity:.75}.nav:hover{background:var(--accent-soft)}.sidebar-bottom{margin-top:auto;padding-top:34px}.side-quote{padding:22px 14px 30px;color:#7e8d6e}.side-quote>span{font-size:39px;display:block}.side-quote p{font-family:Georgia,"Microsoft YaHei",serif;font-size:21px;line-height:1.7;font-weight:300;margin:9px 0 13px}.side-quote small{font-size:8px;letter-spacing:1.4px}#export{display:flex;gap:10px;color:#7e8778;font-size:12px;padding:15px 10px;margin-bottom:15px}.profile{border-top:1px solid #dfe4d7;display:flex;align-items:center;gap:10px;padding:21px 0}.profile>span{width:34px;height:34px;border-radius:50%;background:#dedfcb;display:grid;place-items:center;font:18px Georgia}.profile strong{font-size:12px;font-weight:550;display:block;max-width:100px;overflow:hidden;text-overflow:ellipsis}.profile small{display:block;font-size:10px;color:var(--muted);margin-top:4px}.profile button{margin-left:auto;color:#85907b;padding:5px}.profile svg{width:16px}main{margin-left:244px;flex:1;min-width:0}header{height:83px;display:flex;align-items:center;justify-content:space-between;padding:0 48px;border-bottom:1px solid var(--line)}.breadcrumb{font-size:12px;color:#9aa191;display:flex;gap:15px}.breadcrumb strong{color:#596550;font-weight:500}.header-right{display:flex;align-items:center;gap:22px}.save-indicator{font-size:10px;color:#839178;display:flex;gap:7px;align-items:center}.save-indicator em{width:6px;height:6px;background:#83a56f;border-radius:50%}.main-content{max-width:1500px;margin:auto;padding:46px 48px 0}.intro{display:flex;align-items:center;justify-content:space-between;margin-bottom:34px}.eyebrow{font-size:10px;letter-spacing:2px;color:#8c9a80}.intro h1{font-family:Georgia,"Microsoft YaHei",serif;font-size:38px;letter-spacing:1px;font-weight:500;margin:16px 0 14px}.intro h1 span{color:#9dad8f}.intro p{color:#8d9687;font-size:13px}.intro-mark{font-size:82px;color:#cdd7bf;line-height:1;margin-right:12px;transform:rotate(-12deg)}.tools{display:flex;gap:13px;align-items:center}.search{height:45px;display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:0 15px;flex:1;max-width:520px;color:#939d8b}.search input{width:100%;border:0;outline:0;background:none;color:var(--text);font-size:12px}.search input::placeholder{color:#a1a89a}kbd{font-family:inherit;font-size:10px;background:var(--bg);border:1px solid var(--line);padding:2px 5px;border-radius:4px;white-space:nowrap;color:#9ba491}.tools select{height:42px;margin-left:auto;border:1px solid var(--line);background:var(--surface);color:#7a8571;border-radius:9px;padding:0 12px;font-size:11px}.collection-bar{display:flex;justify-content:space-between;align-items:center;margin:31px 0 19px;font-size:12px;color:#7c8872}.collection-bar b{font-size:10px;padding:3px 7px;border-radius:5px;background:var(--accent-soft);margin-left:6px}.collection-bar>span:last-child{font-size:10px;color:#a1aa98}#cards{columns:3 235px;column-gap:20px;min-height:280px}.card{break-inside:avoid;display:inline-block;width:100%;padding:23px 24px 15px;margin-bottom:20px;border:1px solid #3447270c;border-radius:13px;background:var(--paper);cursor:pointer;transition:transform .22s,box-shadow .22s;position:relative}.card:hover{transform:translateY(-3px);box-shadow:0 10px 26px #293e2910}.card[data-color=sage]{background:var(--sage)}.card[data-color=sand]{background:var(--sand)}.card[data-color=rose]{background:var(--rose)}.card[data-color=sky]{background:var(--sky)}.card-type{color:#8e9a83;display:flex;align-items:center;gap:7px;font-size:9px;letter-spacing:1.5px;margin-bottom:16px}.card-type svg{width:13px;height:13px}.card-type .pin-mark{margin-left:auto;color:var(--accent)}.card h2{font-size:17px;line-height:1.6;letter-spacing:.3px;margin:0 0 10px;font-weight:550;overflow-wrap:anywhere}.card .body-preview{font-size:12px;color:#79806f;line-height:1.95;white-space:pre-wrap;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden;margin:0 0 12px}.card-img{width:calc(100% + 48px);margin:0 -24px 18px;max-height:210px;object-fit:cover;display:block}.attachment-chip{background:#ffffff70;display:flex;gap:8px;padding:9px;border-radius:7px;align-items:center;font-size:11px;color:#7b8970;margin-bottom:10px;overflow:hidden}.attachment-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-bottom{display:flex;align-items:center;justify-content:space-between;color:#9ba38f;border-top:1px solid #7a8e6112;padding-top:11px;margin-top:14px;font-size:9px}.card-actions{display:flex;gap:4px}.card-actions button{padding:4px;border-radius:5px;opacity:.65}.card-actions button:hover{background:#ffffff99;opacity:1}.card-actions svg{width:14px;height:14px}.add-card{min-height:157px;border:1px dashed #cfd8c5;background:transparent;color:#94a186;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}.add-card span{font-size:31px;font-weight:200;margin-bottom:10px}.add-card strong{font-size:12px;font-weight:400}.add-card small{font-size:10px;margin-top:10px;color:#adb6a4}#cards.list{columns:1}.list .card{padding:20px 25px}.list .card .body-preview{-webkit-line-clamp:2}.list .card-img{width:130px;height:85px;float:right;margin:0 0 0 20px;border-radius:8px}.list .add-card{min-height:100px}#empty{text-align:center;padding:62px 15px 90px}.empty-symbol{font-size:44px;color:#8a9c78;background:var(--accent-soft);border-radius:24px;display:grid;place-items:center;width:84px;height:84px;margin:0 auto 26px;transform:rotate(-7deg)}#empty h2{font-size:21px;font-weight:500}#empty p{color:var(--muted);font-size:13px;line-height:1.8}#empty button{margin:25px auto 0;font-size:12px}footer{border-top:1px solid var(--line);padding:24px 0;margin-top:30px;display:flex;justify-content:space-between;font-size:10px;color:#a5ae9b}footer span{font-size:9px;letter-spacing:2px}#menu{display:none}dialog{border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--text);padding:0;width:min(760px,94vw);max-height:91vh;box-shadow:var(--shadow)}dialog::backdrop{background:#26302455;backdrop-filter:blur(5px)}.editor-top{display:flex;justify-content:space-between;align-items:center;padding:15px 23px;border-bottom:1px solid var(--line)}.editor-label{display:flex;gap:9px;align-items:center;color:#7f9270;font-size:19px}.editor-label span{font-size:11px}.editor-top>div{display:flex;align-items:center;gap:12px}#saveStatus{font-size:10px;color:#8e9b82}#saveStatus.error{color:#b3534b}.editor-content{padding:25px 32px;max-height:calc(91vh - 130px);overflow-y:auto}#noteTitle{border:0;width:100%;background:transparent;font-size:27px;font-weight:550;line-height:1.6;outline:none;color:var(--text)}#noteTitle::placeholder{color:#bdc4b5}.edit-meta{display:flex;justify-content:space-between;margin:13px 0 23px;color:#a1aa98;font-size:10px}.format-bar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;gap:7px;padding:7px 0;align-items:center;color:#7e8a74}.format-bar button{padding:7px 9px;border-radius:5px;font-size:12px}.format-bar button:hover{background:var(--side)}.format-bar span{flex:1}.format-bar svg{width:15px;height:15px}#attach{display:flex;align-items:center;gap:7px}#noteBody{width:100%;min-height:250px;resize:vertical;border:0;padding:22px 0 10px;line-height:1.95;background:transparent;color:var(--text);outline:none;font-size:14px}#noteBody::placeholder{color:#adb5a4}#dropzone{border:1px dashed #cfd8c5;border-radius:10px;display:flex;flex-direction:column;align-items:center;gap:9px;color:#8fa07f;padding:22px 12px;font-size:11px;background:var(--bg);cursor:pointer}#dropzone.drag{background:var(--accent-soft)}#dropzone small{color:#abb4a1;font-size:10px}.editor-bottom{display:flex;align-items:center;justify-content:space-between;padding:14px 23px;border-top:1px solid var(--line)}.editor-bottom>div{display:flex;align-items:center;gap:7px}#colors button{width:21px;height:21px;border-radius:50%;border:1px solid #293e2922;padding:0}#colors button.active{outline:2px solid #8a9c79;outline-offset:3px}.subtle{display:flex;align-items:center;gap:6px;font-size:11px;padding:8px 10px;border-radius:6px;color:#7b8970}.subtle svg{width:14px;height:14px}#editorFiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}.media-item{padding:10px;border:1px solid var(--line);border-radius:10px;min-width:0}.media-item img,.media-item video{width:100%;border-radius:6px;max-height:280px;object-fit:contain}.media-item audio{width:100%;height:36px}.media-item a{display:block;color:var(--accent);font-size:11px;overflow-wrap:anywhere;text-decoration:none;margin-top:7px}.media-item small{color:var(--muted);font-size:9px}#toast{position:fixed;bottom:30px;left:50%;transform:translate(-50%,20px);background:#34472d;color:white;padding:13px 24px;border-radius:10px;box-shadow:var(--shadow);z-index:20;opacity:0;pointer-events:none;transition:.25s;font-size:12px}#toast.show{opacity:1;transform:translate(-50%,0)}#login{display:grid;grid-template-columns:1.1fr 1fr;min-height:100vh}.login-art{position:relative;overflow:hidden;background:#e7eddf;min-height:100vh;padding:80px}.orb{position:absolute;border-radius:50%}.orb-a{width:650px;height:650px;right:-180px;top:-220px;background:#d9e3cd}.orb-b{width:460px;height:460px;left:-160px;bottom:-170px;background:#cfdac2}.art-note{position:relative;margin-top:12vh;transform:rotate(-3deg);background:#f7f8ee;max-width:430px;padding:50px 40px 75px;box-shadow:10px 20px 50px #50613e13}.art-note>span{font-size:10px;letter-spacing:3px;color:#93a183}.art-note h1{font-size:50px;line-height:1.55;font-family:Georgia,"Microsoft YaHei",serif;letter-spacing:4px;font-weight:400;color:#4f6642;margin:28px 0}.art-note p{font-size:13px;line-height:2.2;color:#8e9b80}.art-stroke{position:absolute;right:30px;bottom:10px;font-size:80px;color:#b9c8a6}.art-footer{position:absolute;bottom:35px;left:60px;color:#768a65;font-size:12px;letter-spacing:2px}.art-footer span{font-size:8px;display:block;letter-spacing:3px;margin-top:10px}#loginForm{align-self:center;width:min(360px,80%);margin:50px auto}#loginForm>.brand{margin-bottom:65px}#loginForm h2{font-weight:500;font-size:32px;margin:16px 0 12px}.muted{color:var(--muted);font-size:12px}#loginForm label{display:block;font-size:11px;color:#78886b;margin-top:26px}#loginForm input{display:block;width:100%;height:46px;margin-top:9px;border:1px solid var(--line);border-radius:9px;background:var(--surface);padding:0 14px;color:var(--text)}#loginForm input::placeholder{color:#b2baa9}#loginForm .primary{width:100%;margin-top:30px;justify-content:space-between;padding:15px 19px;font-size:12px}#loginError{color:#b4564e;font-size:11px;min-height:15px}.login-hint{text-align:center;font-size:10px;color:#a2ad97;margin-top:30px}body.dark{--bg:#1e241d;--surface:#282f26;--side:#222a20;--text:#e1e7db;--muted:#8d9b84;--line:#384233;--accent:#819c6b;--accent-soft:#35442b;--paper:#293226;--sage:#303e29;--sand:#413d2d;--rose:#413332;--sky:#2b3b42}.dark .nav.active{background:#35442b;color:#c4d6b2}.dark .card .body-preview{color:#b3bea9}.dark .attachment-chip{background:#ffffff0b}.dark .login-art{filter:brightness(.7)}@media(min-width:1600px){#cards{columns:4 245px}}@media(max-width:1100px){aside{width:210px;padding:30px 17px 0}main{margin-left:210px}header{padding:0 30px}.main-content{padding:35px 30px 0}.side-quote{padding-left:8px}.login-art{padding:45px}.art-note h1{font-size:40px}}@media(max-width:760px){aside{transform:translateX(-100%);transition:transform .25s;width:235px;box-shadow:var(--shadow)}aside.open{transform:translateX(0)}main{margin-left:0}#menu{display:flex;margin-right:10px}header{height:65px;padding:0 20px;justify-content:flex-start}.header-right{margin-left:auto;gap:10px}.breadcrumb{font-size:10px;gap:10px}.main-content{padding:29px 20px 0}.intro{margin-bottom:22px}.intro h1{font-size:29px}.intro-mark{font-size:57px}.eyebrow{font-size:8px}.intro p{font-size:11px}.search{padding:0 10px}.search input{font-size:11px}.search kbd{display:none}.tools{gap:7px}.tools select{font-size:10px;padding:0 5px;max-width:90px}.tools>.icon-button{width:29px}.collection-bar>span:last-child{display:none}#cards{columns:2 150px;column-gap:12px}.card{padding:17px 16px 11px;margin-bottom:12px;border-radius:11px}.card h2{font-size:14px}.card .body-preview{font-size:11px;-webkit-line-clamp:6}.card-type{margin-bottom:11px;font-size:8px}.card-img{width:calc(100% + 32px);margin:0 -16px 12px}.card-bottom{font-size:8px}.card-actions{gap:1px}.card-actions button{padding:2px}.card-actions svg{width:13px;height:13px}.editor-content{padding:21px}#noteTitle{font-size:22px}.edit-meta{font-size:9px}.edit-meta span:last-child{display:none}.editor-bottom{padding:13px 17px}.editor-bottom .subtle{padding:6px;font-size:10px}#colors button{width:17px;height:17px}#login{display:block}.login-art{display:none}#loginForm{margin:0 auto;padding:60px 0;width:80%}#loginForm>.brand{margin-bottom:70px}footer{font-size:9px}#editorFiles{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

#colors [data-color=paper]{background:var(--paper)} #colors [data-color=sage]{background:var(--sage)} #colors [data-color=sand]{background:var(--sand)} #colors [data-color=rose]{background:var(--rose)} #colors [data-color=sky]{background:var(--sky)} /* Markdown writing surface and local syntax highlighting */
#editor{width:min(1060px,96vw)}.editor-view-tabs{display:flex;align-items:center;gap:5px;padding:13px 0;color:var(--muted)}.editor-view-tabs button{padding:7px 12px;border-radius:6px;font-size:11px}.editor-view-tabs button.active{background:var(--accent-soft);color:var(--accent)}.editor-view-tabs small{margin-left:auto;font-size:10px}.format-bar select{max-width:120px;background:var(--bg);color:var(--accent);border:1px solid var(--line);border-radius:6px;padding:6px;font-size:11px}#writingArea{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:18px}.source-pane,.preview-pane{min-width:0}.preview-pane{border-left:1px solid var(--line);background:var(--bg);padding:0 17px 18px;max-height:480px;overflow:auto}.source-pane{padding:0 17px}.pane-label{font-size:8px;color:var(--muted);letter-spacing:1.3px;padding:15px 0 5px}#noteBody{font-family:Consolas,"Cascadia Code","Microsoft YaHei",monospace;font-size:13px;line-height:1.85;min-height:330px;tab-size:4;padding-top:15px}.markdown-content{font-size:13px;line-height:1.85;overflow-wrap:anywhere;white-space:normal}.markdown-content p{margin:12px 0}.markdown-content h2,.markdown-content h3,.markdown-content h4{margin:18px 0 10px;font-weight:600;line-height:1.5}.markdown-content h2{font-size:21px}.markdown-content h3{font-size:18px}.markdown-content h4{font-size:15px}.markdown-content .preview-placeholder{color:var(--muted);font-size:12px}.inline-code{font-family:Consolas,"Cascadia Code",monospace;font-size:.92em;background:var(--accent-soft);color:var(--accent);padding:2px 5px;border-radius:4px}.md-task,.md-list{display:flex;gap:9px;margin:5px 0}.md-task.done{color:var(--muted)}.md-task.done span+span{text-decoration:line-through}.code-block{background:#202a32;border:1px solid #35434d;border-radius:10px;overflow:hidden;margin:15px 0;color:#dee7ee;white-space:normal}.code-block-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#28343e;padding:9px 13px;color:#a4b6c5;font:10px "Segoe UI",sans-serif;letter-spacing:.3px}.code-block-bar button{display:inline-flex;align-items:center;padding:5px 9px;border-radius:5px;border:1px solid #52606d;color:#dae7ee;font-size:10px;white-space:nowrap;background:#34434f}.code-block-bar button:hover{background:#455866}.code-block pre{margin:0;padding:15px 16px;overflow:auto;white-space:pre;tab-size:4;line-height:1.8;max-height:420px;font-family:"Cascadia Code",Consolas,"Liberation Mono",monospace;font-size:12px;overflow-wrap:normal}.code-block code{font:inherit;color:#dee7ee;white-space:pre}.hljs-keyword,.hljs-selector-tag,.hljs-literal{color:#d6a5f4}.hljs-string,.hljs-regexp,.hljs-addition,.hljs-meta .hljs-string{color:#a6dca2}.hljs-number,.hljs-symbol,.hljs-bullet{color:#efbf86}.hljs-comment,.hljs-quote{color:#879ba7;font-style:italic}.hljs-title,.hljs-title.function_,.hljs-section{color:#89c9f4}.hljs-variable,.hljs-attr,.hljs-attribute,.hljs-property{color:#e6c985}.hljs-built_in,.hljs-type{color:#88d5d0}.hljs-tag{color:#9aabb7}.hljs-name{color:#edaa9d}.hljs-params{color:#dce7ec}.card .markdown-content.body-preview{display:block;max-height:300px;overflow:hidden;line-height:1.85;white-space:normal}.card .markdown-content p{margin:7px 0}.card .markdown-content h2{font-size:16px}.card .code-block pre{font-size:10px;max-height:160px;padding:11px}.card .code-block-bar{padding:6px 8px;font-size:9px}.card .code-block-bar button{font-size:9px;padding:4px 6px}.list .card .markdown-content.body-preview{max-height:210px}#writingArea[data-view=edit]{grid-template-columns:minmax(0,1fr)}#writingArea[data-view=edit] .preview-pane{display:none}#writingArea[data-view=preview]{grid-template-columns:minmax(0,1fr)}#writingArea[data-view=preview] .source-pane{display:none}#writingArea[data-view=preview] .preview-pane{border-left:0;min-height:200px;max-height:none}@media(max-width:760px){.format-bar{flex-wrap:wrap;gap:2px}.format-bar button{padding:6px}.format-bar select{max-width:105px;font-size:10px}.editor-view-tabs small{display:none}#writingArea{grid-template-columns:minmax(0,1fr)}.preview-pane{border-left:0;border-top:1px solid var(--line);max-height:none}.source-pane,.preview-pane{padding-left:12px;padding-right:12px}#noteBody{min-height:220px}.code-block pre{font-size:11px}.editor-content{padding:17px}.card .code-block-bar{gap:5px}.card .code-block-bar button{padding:3px 5px;font-size:8px}}