.notes-page{padding:48px 0 72px}
.notes-heading{margin-bottom:28px}
.notes-heading h1{font-size:clamp(32px,5vw,52px);letter-spacing:-.04em;margin:5px 0}
.notes-heading>p:last-child,#graph-help,#graph-count{color:var(--muted)}
.notes-layout{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:22px;align-items:start}
.notes-layout[hidden],.note-content[hidden],#notes-status:empty{display:none}
.notes-panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px}
.notes-sidebar label{display:block;font-weight:650;margin-bottom:8px}
.notes-sidebar input{width:100%;font:inherit;color:var(--ink);padding:7px 10px;border:1px solid var(--line);border-radius:7px;background:var(--page)}
.notes-sidebar nav{max-height:62vh;overflow:auto;margin-top:12px}
.notes-sidebar a{display:block;padding:5px 8px;border-radius:6px;overflow-wrap:anywhere}
.notes-sidebar a:hover,.notes-sidebar a[aria-current]{background:var(--file);color:var(--ink)}
.notes-main{min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.notes-graph-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.notes-graph-heading h2{font-size:19px}
#graph-help{margin-top:5px}
#graph-view svg{display:block;width:100%;max-height:305px;margin-top:12px;background:var(--page);border:1px solid var(--line);border-radius:9px}
#graph-view line{stroke:var(--green);stroke-opacity:.55}
#graph-view circle{fill:var(--blue);stroke:var(--surface);stroke-width:2px}
#graph-view a[data-selected=true] circle{fill:var(--red)}
#graph-view a:hover circle,#graph-view a:focus-visible circle{fill:var(--gold);stroke:var(--ink)}
#graph-related{display:flex;flex-wrap:wrap;gap:6px}
#graph-related:not(:empty){margin-top:10px}
#graph-related a{border-radius:6px;background:var(--file);padding:3px 8px}
#graph-related a:first-child{background:var(--gold-light)}
.note-content{min-width:0;font-size:15px;line-height:1.8;overflow-wrap:anywhere;padding:clamp(16px,4vw,36px)}
.note-content>*+*{margin-top:1em}
.note-content h1{font-size:clamp(23px,4vw,34px)}
.note-content h2{font-size:22px;margin-top:1.45em}
.note-content a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.note-content pre,.note-content table{overflow:auto;max-width:100%;display:block}
.note-content pre{background:var(--page);border:1px solid var(--line);border-radius:8px;padding:14px}
.note-content td,.note-content th{padding:6px 10px;border-bottom:1px solid var(--line);text-align:left}
.note-content img{max-width:100%;height:auto}
.note-content blockquote{border-left:3px solid var(--green);padding-left:12px;margin-inline:0;color:var(--muted)}
@media(max-width:760px){
    .notes-page{padding-top:28px}
    .notes-layout{grid-template-columns:minmax(0,1fr)}
    .notes-sidebar nav{max-height:185px}
}

#graph-view{position:relative}
#graph-view svg{aspect-ratio:18/11;max-height:410px;cursor:grab;touch-action:none}
#graph-view svg:active{cursor:grabbing}
#graph-view a{cursor:pointer}
#graph-view a[data-isolated=true] circle{fill:var(--green)}
#graph-view text{fill:var(--ink);font-size:10px;pointer-events:none;paint-order:stroke;stroke:var(--page);stroke-width:4px;stroke-linejoin:round}
#graph-view a[data-selected=true] text,#graph-view a.graph-focus text{font-size:13px;font-weight:650}
#graph-view .graph-dim{opacity:.18}
.graph-controls{position:absolute;inset:8px 8px auto auto;display:flex;gap:4px}
.graph-controls button,#source-preview button{font:inherit;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:3px 9px;cursor:pointer}
.graph-controls button:hover,#source-preview button:hover{background:var(--file)}
#source-preview{width:min(900px,calc(100% - 32px));max-height:85vh;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);padding:20px}
#source-preview::backdrop{background:rgb(46 64 60 / .48)}
#source-preview header{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
#source-preview h2{font-size:18px;margin-right:auto;overflow-wrap:anywhere}
#source-download{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
#source-status:not(:empty){margin-top:12px;color:var(--muted)}
#source-body{max-height:60vh;overflow:auto;background:var(--page);border:1px solid var(--line);border-radius:8px;padding:16px;tab-size:4}

.notes-sidebar details{min-width:0}
.notes-sidebar details>details,.notes-sidebar details>a{margin-left:12px}
.notes-sidebar summary{padding:5px 7px;border-radius:6px;font-weight:600;color:var(--file-ink);cursor:pointer;overflow-wrap:anywhere}
.notes-sidebar summary:hover,.notes-sidebar summary:focus-visible{background:var(--file)}

#graph-view line[data-tag=true]{stroke:var(--gold);stroke-dasharray:4 3}
#graph-view a[data-tag=true] circle{fill:var(--gold);stroke:var(--surface)}
#graph-view a[data-tag=true] text{display:block;font-size:11px}
#graph-related a[data-tag=true]{background:var(--gold-light)}

.graph-filter{display:inline-flex;align-items:center;gap:8px;margin-top:10px;color:var(--muted)}
.graph-filter select{font:inherit;color:var(--ink);background:var(--page);border:1px solid var(--line);border-radius:6px;padding:4px 8px}

.graph-page{width:min(1500px,calc(100% - 32px));padding-top:28px}
.graph-page #notes-graph{margin-top:12px}
.graph-page #graph-view svg{height:clamp(360px,72vh,900px);max-height:none;aspect-ratio:auto}
#graph-status:empty{display:none}
#graph-view text{visibility:hidden}

.notes-layout.notes-directory:not([hidden]){display:block;width:min(100%,740px);margin-inline:auto}
.notes-directory .notes-main{display:none}
.notes-directory .notes-sidebar{padding:clamp(18px,4vw,36px)}
.notes-directory .notes-sidebar nav{max-height:64vh;font-size:16px}