/* Hypospark — quiet surfaces, clear selection, comfortable writing. */
:root[data-theme="light"]{
  --bg:#f3f5f6;--bg-elev:#fafbfc;--panel-solid:#fff;--panel-elev:#fff;
  --line:#202c3912;--line-soft:#202c390d;--line-strong:#202c3920;
  --text:#26333e;--muted:#7c8792;--muted-strong:#53616c;
  --acc:#27816a;--acc2:#1e6b57;--acc-strong:#236d59;
  --acc-dim:#27816a12;--chip:#edf1f3;--input-bg:#fff;
  --violet:#737d99;--violet2:#697595;
  --shadow:0 3px 12px #26333e06;--shadow-lg:0 12px 36px #26333e10;
  --rail-bg:#eaf0ef;--sidebar-bg:#f6f8f9;--paper:#fff;
  --hover:#202c3908;--selection:#27816a14;
}
:root[data-theme="dark"]{
  --bg:#13171e;--bg-elev:#191e27;--panel-solid:#1b212b;--panel-elev:#242b36;
  --line:#d9e3f011;--line-soft:#d9e3f00a;--line-strong:#d9e3f01b;
  --text:#dce3eb;--muted:#84909f;--muted-strong:#a9b4c3;
  --acc:#83cdb3;--acc2:#5cb799;--acc-strong:#a0dcc6;
  --acc-dim:#83cdb315;--chip:#242c37;--input-bg:#1b212b;
  --violet:#a0acc8;--violet2:#acb8d2;
  --rail-bg:#161d24;--sidebar-bg:#191f28;--paper:#1c232d;
  --hover:#d9e3f009;--selection:#83cdb318;
}
:root[data-theme]{--tree:252px;--meta:224px;--ribbon:48px;--radius:14px;--radius-sm:8px}
body::before{opacity:.35}
::selection{background:var(--selection);color:var(--text)}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
*{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:8px}
::-webkit-scrollbar-track{background:transparent}
.wrap{max-width:1240px;padding:22px 28px 48px}
header.appbar{padding:8px 0 18px;margin-bottom:24px;gap:20px}
:root[data-theme] header.appbar .app-nav{flex:0 1 auto;gap:4px;padding:4px;background:var(--chip);border-radius:10px}
.nav-link{border:0;border-radius:7px;padding:10px 19px;font-size:13px;letter-spacing:0}
:root[data-theme] .nav-link.is-active{background:var(--panel-solid);color:var(--acc);box-shadow:var(--shadow);border:0}
.nav-link:hover{background:var(--hover)}
.site-logo{gap:10px}
:root[data-theme] .site-logo-mark{width:36px;height:36px;transform:none;border-radius:10px;background:var(--panel-solid);border:1px solid var(--line-strong);box-shadow:var(--shadow)}
.site-logo-mark::before,.site-logo-mark::after{display:none}
.site-logo-mark b{font-size:18px;text-shadow:none!important;color:var(--acc)!important}
.site-logo-mark i{width:6px;height:6px;right:3px;top:3px;box-shadow:none}
.site-logo-type strong{font-size:12px;letter-spacing:.2em}
.site-logo-type small{font-size:7px;letter-spacing:.14em;color:var(--muted)}
.site-logo:hover .site-logo-mark{transform:none}
.theme-toggle{width:32px;height:32px;min-height:32px}
:root[data-theme] .theme-toggle{background:transparent;color:var(--muted);border-color:var(--line-strong)}
:root[data-theme] .user-menu-btn{background:var(--panel-solid);border:1px solid var(--line);box-shadow:var(--shadow);color:var(--muted-strong);font-size:12px}
.panel{border-radius:16px;padding:26px;gap:18px;background:var(--panel-solid)!important;border-color:var(--line)!important;box-shadow:var(--shadow)}
.panel-head h2,.modal h2,.page-intro h1{font-family:var(--font);font-weight:600;letter-spacing:-.025em}
.panel-head h2{font-size:23px}
.panel-desc{font-size:13px;margin-top:7px}
.page-intro{padding:14px 2px 28px}
.page-intro h1{font-size:clamp(24px,3vw,32px);margin:12px 0}
.eyebrow{color:var(--muted);font-size:10px;letter-spacing:.13em}
.page-stats{gap:14px;margin-bottom:20px}
:root[data-theme] .stat{background:var(--panel-solid);border-color:var(--line);border-radius:12px;padding:18px 20px;box-shadow:var(--shadow)}
.stat::before{left:0;top:22px;bottom:22px;width:3px;opacity:.6}
.stat .l{font-family:var(--font);font-size:12px;letter-spacing:0}
.stat .n{font-size:27px;font-weight:600;margin-top:10px}
.stat .s{font-size:12px;margin-top:7px}
.task-item{padding:14px!important;border-color:var(--line)!important;background:transparent}
.task-title{font-size:14px;font-weight:500}
.task-item.overdue{border-left:3px solid var(--warn)!important}
.result-count{font-size:11px}
th{font-family:var(--font);font-size:12px;letter-spacing:0}
td{padding:14px 10px}
tbody tr:hover{background:var(--hover)}
input,select{font-size:13px}
input:focus,select:focus,textarea:focus{border-color:var(--acc)}
:root[data-theme] .filter-tabs button{border:1px solid transparent;background:transparent;color:var(--muted)}
:root[data-theme] .filter-tabs button[aria-pressed="true"]{background:var(--selection);color:var(--acc);border-color:transparent}
/* The global light button rule must not paint every tree row green. */
:root[data-theme] .nt-row{background:transparent;color:var(--muted-strong);border:0;box-shadow:none;border-radius:7px;min-height:34px;padding-top:7px;padding-bottom:7px;gap:8px;margin:2px 0;font-size:12.5px}
:root[data-theme] .nt-row:hover{background:var(--hover);color:var(--text)}
:root[data-theme] .nt-row.is-active{background:var(--selection);color:var(--acc-strong);box-shadow:inset 2px 0 0 var(--acc);font-weight:600}
.nt-name{font-weight:400}
.nt-row.is-active .nt-name{font-weight:600}
.nt-ico{opacity:.5}
.nt-twist{opacity:.45}
html.is-notes .wrap,html:has(#page-notes:not([hidden])) .wrap{padding:16px 20px 20px}
html.is-notes header.appbar,html:has(#page-notes:not([hidden])) header.appbar{padding:4px 0 16px;margin-bottom:16px}
:root[data-theme] .notes-shell{background:var(--paper);border-color:var(--line-strong);border-radius:14px;box-shadow:var(--shadow-lg)}
:root[data-theme] .notes-ribbon{background:var(--rail-bg);padding:16px 0;gap:10px;border-color:var(--line)}
:root[data-theme] .ribbon-btn{background:transparent;color:var(--muted);border-color:transparent;border-radius:9px}
:root[data-theme] .ribbon-btn.is-active{background:var(--panel-solid);color:var(--acc);border-color:var(--line);box-shadow:var(--shadow)}
:root[data-theme] .notes-sidebar{background:var(--sidebar-bg);border-color:var(--line)}
.notes-sidebar-head{padding:24px 18px 18px;border-bottom:0}
.notes-side-brand .eyebrow{font-size:10px;color:var(--muted);margin-bottom:10px}
.notes-side-title{font-family:var(--font);font-size:17px;font-weight:600;letter-spacing:0}
.notes-search-wrap{padding:0 14px 8px}
.notes-search-wrap input{background:var(--paper);border-color:var(--line);min-height:36px;font-size:12px;padding:9px 10px}
.notes-create-actions{padding:2px 14px 12px;gap:5px}
:root[data-theme] .notes-create-actions button{background:transparent;border:1px solid var(--line-strong);color:var(--muted-strong);font-size:11px;min-height:29px;padding:4px 7px}
:root[data-theme] .notes-create-actions button:first-child{background:var(--selection);border-color:transparent;color:var(--acc)}
.notes-tree{padding:4px 10px 20px}
.notes-compose{padding:8px 14px 14px}
:root[data-theme] .notes-main,:root[data-theme] .notes-editor-pane{background:var(--paper)}
:root[data-theme] .notes-editor-bar{background:var(--paper);border-color:var(--line);padding:13px 22px;min-height:58px;gap:12px}
.notes-path-wrap{gap:10px;overflow:hidden;flex:1 1 140px}
.notes-path-label{font:11px/1.4 var(--font);letter-spacing:0;color:var(--muted)}
.notes-path{font:500 13px/1.4 var(--font);color:var(--text);max-width:100%}
.notes-editor-actions{gap:10px;flex-shrink:0}
.notes-hint{font-size:10px;letter-spacing:0}
.notes-modes{padding:3px;border-radius:8px;background:var(--sidebar-bg);gap:2px}
:root[data-theme] .notes-modes button{background:transparent;border:0;color:var(--muted);font-size:11px;padding:4px 9px;min-height:27px;box-shadow:none;border-radius:6px}
:root[data-theme] .notes-modes button[aria-pressed="true"]{background:var(--panel-solid);color:var(--text);box-shadow:var(--shadow)}
:root[data-theme] #notesSave{background:var(--acc);color:var(--paper);border:0;border-radius:7px;font-size:11px;min-height:32px;padding:6px 13px}
:root[data-theme="dark"] #notesSave{color:#132c23}
#notesSave:disabled{opacity:.35}
:root[data-theme] .notes-preview{background:var(--paper);font-family:var(--font);font-size:15px;line-height:1.95;color:var(--text)}
.notes-preview.is-reading{padding:42px clamp(24px,6%,80px) 100px}
.notes-preview>*{max-width:820px;margin-left:auto;margin-right:auto}
.notes-preview h1,.notes-preview h2,.notes-preview h3,.notes-preview h4{font-family:var(--font);font-weight:600;letter-spacing:-.02em;line-height:1.5}
.notes-preview h1{font-size:27px;margin-top:0;margin-bottom:24px}
.notes-preview h2{font-size:21px;margin-top:32px;margin-bottom:16px}
.notes-preview h3{font-size:17px;color:var(--text);margin-top:24px}
.notes-preview p{margin-bottom:18px}
.notes-preview a{color:var(--acc);text-decoration:none;border-bottom:1px solid var(--line-strong)}
.notes-preview a:hover{border-bottom-color:var(--acc)}
.notes-preview blockquote{background:var(--sidebar-bg);border-left:3px solid var(--acc);border-radius:0 8px 8px 0;color:var(--muted-strong);padding:14px 18px}
.notes-preview blockquote p:last-child{margin-bottom:0}
.notes-preview table{border:1px solid var(--line);font-size:13px;border-radius:8px}
.notes-preview table th{background:var(--sidebar-bg);padding:11px 14px;font-weight:500;color:var(--muted-strong)}
.notes-preview table td{padding:11px 14px;line-height:1.7}
.notes-preview hr{margin-top:28px;margin-bottom:28px}
.notes-preview pre{border-radius:10px;background:var(--sidebar-bg);border-color:var(--line)}
.notes-editor{padding:32px 36px;font-size:14px;line-height:1.95;tab-size:2;background:var(--paper)}
.notes-editor-pane.split .notes-preview{padding:32px 30px}
:root[data-theme] .notes-meta{background:var(--sidebar-bg);border-color:var(--line);padding:12px 12px 20px}
.notes-meta-body{padding:8px 2px 0;gap:28px}
.notes-meta h3{font-family:var(--font);font-size:11px;letter-spacing:0;color:var(--muted);font-weight:500;margin:0 8px 9px}
:root[data-theme] .ol-item,:root[data-theme] .bl-item{background:transparent;color:var(--muted-strong);border:0;box-shadow:none;font-size:12px;font-weight:400;padding:7px 9px;border-radius:6px;line-height:1.6}
:root[data-theme] .ol-item:hover,:root[data-theme] .bl-item:hover{background:var(--hover);color:var(--acc)}
.notes-meta .muted{padding:0 8px;font-size:11px}
:root[data-theme] .notes-shell.is-meta-collapsed .notes-meta{width:32px;padding:8px 0}
.ol-item.lv-1{font-weight:500}
:root[data-theme] .notes-meta-fold{background:transparent;color:var(--muted);border:0}
:root[data-theme] .notes-status{background:var(--sidebar-bg);border-color:var(--line);padding:7px 18px;min-height:32px}
.notes-status-right{font-family:var(--font);font-size:10px;letter-spacing:0}
.notes-status .msg{font-family:var(--font);font-size:11px}
.login-hero h1{font-family:var(--font);font-size:clamp(36px,6vw,58px);font-weight:600;letter-spacing:-.04em}
.login-lead{font-size:14px;color:var(--muted);letter-spacing:0}
.login-eyebrow{font-size:10px;color:var(--acc);letter-spacing:.18em}
.login-card{border-radius:18px;padding:30px;box-shadow:var(--shadow-lg);border-color:var(--line)}
.login-card input{min-height:44px;border-color:var(--line-strong);border-radius:9px}
.login-card .field-password input{border-top-right-radius:0;border-bottom-right-radius:0}
:root[data-theme] .login-card #btn{background:var(--acc);color:var(--paper);border:0;font-size:14px;min-height:44px}
:root[data-theme="dark"] .login-card #btn{color:#132c23}
:root[data-theme] .pw-toggle{background:var(--sidebar-bg);color:var(--muted);border-color:var(--line-strong)}
.node-field{opacity:.45;background-size:auto,auto,36px 36px}
@media(max-width:1100px){:root[data-theme]{--tree:220px;--meta:190px}.notes-hint{display:none}.notes-editor-bar{padding:12px 16px}.notes-path-label{display:none}}
@media(max-width:900px){
  :root[data-theme]{--ribbon:44px}
  .notes-sidebar{width:min(260px,78vw)}
  .notes-preview.is-reading{padding:28px 28px 80px}
  .notes-editor-pane.split .notes-preview{padding:20px 24px}
  .notes-editor{padding:24px}
  .notes-editor-actions{margin-left:auto}
}
@media(max-width:640px){
  .wrap{padding:14px 14px 30px}
  header.appbar{gap:10px;flex-wrap:wrap;padding-bottom:14px;margin-bottom:20px}
  :root[data-theme] header.appbar .app-nav{order:3;flex:1 0 100%;justify-content:center}
  .nav-link{flex:1;justify-content:center;padding:10px 12px}
  .site-logo-type small{display:none}
  .panel{padding:20px 16px}
  .page-stats{gap:10px}
  :root[data-theme] .stat{padding:16px}
  .stat .n{font-size:24px}
  html.is-notes .wrap,html:has(#page-notes:not([hidden])) .wrap{padding:10px 10px 12px}
  html.is-notes header.appbar,html:has(#page-notes:not([hidden])) header.appbar{margin-bottom:10px;padding-bottom:10px}
  .notes-editor-bar{padding:10px 12px}
  .notes-preview.is-reading{padding:24px 20px 72px}
  .notes-preview h1{font-size:24px}
  .notes-preview h2{font-size:19px}
  .notes-editor-actions{gap:6px}
  .notes-dirty{font-size:10px}
  .notes-modes button{padding:4px 7px}
  .login-card{padding:24px}
}
/* Code cards — inspired by the blog's sage palette. */
:root[data-theme="light"]{--code-bg:#eff6f2;--code-bar:#e4efe9;--code-line:#ccdfd4;--code-text:#2b5849;--code-muted:#6a8b7c;--code-shadow:0 10px 30px #244e3e09}
:root[data-theme="dark"]{--code-bg:#172722;--code-bar:#1e312a;--code-line:#334a40;--code-text:#cae5d7;--code-muted:#85a897;--code-shadow:0 10px 30px #00000018}
:root[data-theme] .notes-preview .code-card{display:block;width:100%;min-width:0;max-width:820px;margin:26px auto 30px;border:1px solid var(--code-line);border-radius:13px;background:var(--code-bg);box-shadow:var(--code-shadow);overflow:hidden}
.code-card-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;min-height:48px;background:var(--code-bar);border-bottom:1px solid var(--code-line)}
.code-card-label{display:flex;align-items:center;gap:10px;font:600 10px/1 var(--mono);letter-spacing:.12em;color:var(--code-text);min-width:0;overflow:hidden;text-overflow:ellipsis}
.code-card-mark{display:grid;place-items:center;width:22px;height:22px;border:1px solid var(--code-line);border-radius:5px;color:var(--code-muted);font:500 12px/1 var(--mono);letter-spacing:0}
.code-card-actions{display:flex;align-items:center;gap:14px;flex-shrink:0}
.code-card-lines{font:11px/1 var(--font);color:var(--code-muted)}
:root[data-theme] .notes-preview .code-copy{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:5px 9px;border:1px solid var(--code-line);border-radius:6px;background:var(--paper);color:var(--code-text);font:500 11px/1 var(--font);box-shadow:0 1px 2px #163b2910;letter-spacing:0}
:root[data-theme] .notes-preview .code-copy:hover{background:var(--code-bg);border-color:var(--code-muted);filter:none;transform:none}
.code-copy svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6}
:root[data-theme] .notes-preview .code-copy.is-copied{color:var(--acc);border-color:var(--acc)}
:root[data-theme] .notes-preview .code-card .md-pre{display:block;width:100%;min-width:0;max-width:100%;overflow-x:auto;overflow-y:hidden;margin:0;padding:22px 24px 24px;background:var(--code-bg);color:var(--code-text);border:0;border-radius:0;box-shadow:none;font:13px/1.85 var(--mono);white-space:pre;word-break:normal;overflow-wrap:normal;tab-size:2;scrollbar-width:thin;scrollbar-color:var(--code-line) transparent}
:root[data-theme] .notes-preview .code-card .md-pre code{display:block;width:max-content;min-width:100%;background:transparent;color:inherit;padding:0;border:0;border-radius:0;font:inherit;white-space:pre;word-break:normal;overflow-wrap:normal}
.notes-preview .code-card .md-pre::-webkit-scrollbar{height:6px}
.notes-preview .code-card .md-pre::-webkit-scrollbar-thumb{background:var(--code-line)}
:root[data-theme] .notes-preview p>code,:root[data-theme] .notes-preview li>code{background:var(--code-bar);color:var(--code-text);border:1px solid var(--code-line);border-radius:5px;padding:2px 5px;font-size:.85em}
@media(max-width:640px){.code-card-bar{padding:9px 12px;gap:8px}.code-card-actions{gap:8px}.code-card-lines{display:none}:root[data-theme] .notes-preview .code-card .md-pre{padding:17px 16px;font-size:12px}.code-card-label{font-size:9px;letter-spacing:.08em}}
/* Vault picker */
.notes-side-brand{width:100%;min-width:0}
.vault-switcher{position:relative;width:100%}
.vault-switcher>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;border-radius:8px;padding:7px 9px;margin:0 -9px;color:var(--text);font:600 16px/1.4 var(--font);user-select:none}
.vault-switcher>summary::-webkit-details-marker{display:none}
.vault-switcher>summary:hover,.vault-switcher[open]>summary{background:var(--hover)}
.vault-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vault-chevron{font-size:18px;color:var(--muted);font-weight:400}
.vault-switcher[open] .vault-chevron{transform:rotate(180deg)}
.vault-menu{position:absolute;top:calc(100% + 8px);left:-5px;right:-5px;z-index:20;padding:8px;background:var(--panel-solid);border:1px solid var(--line-strong);border-radius:12px;box-shadow:var(--shadow-lg)}
.vault-menu-caption{margin:5px 8px 9px;font:11px/1.4 var(--font);color:var(--muted)}
.vault-menu>a{display:flex;align-items:center;gap:9px;padding:10px 9px;border-radius:7px;color:var(--muted-strong);text-decoration:none;font:500 13px/1.5 var(--font)}
.vault-menu>a:hover{background:var(--hover);color:var(--text)}
.vault-menu>a.is-selected{background:var(--selection);color:var(--acc-strong)}
.vault-menu>a>span:nth-child(2){flex:1;min-width:0}
.vault-menu small{display:block;font-size:10px;font-weight:400;color:var(--muted);margin-top:3px}
.vault-icon{font-size:20px;color:var(--muted);font-weight:400}
.vault-check{visibility:hidden;color:var(--acc);font-size:14px}
.vault-menu>a.is-selected .vault-check{visibility:visible}