:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #091018; color: #d9e4ee; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 74% 4%, #172437 0, transparent 32rem), #091018; }
button, input { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 290px minmax(0, 1fr); }
.loading { margin: auto; color: #9db0c2; }
.sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 25px 16px; border-right: 1px solid #243548; background: rgba(6, 13, 21, .85); }
.brand { display: flex; align-items: center; gap: 12px; color: #d9e4ee; text-decoration: none; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.brand b { color: #71e3ff; font-size: 20px; letter-spacing: .02em; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #38bdf8; color: #38bdf8; font-family: Georgia, serif; font-size: 24px; }
.search { display: grid; gap: 7px; margin: 28px 0 20px; color: #8fa5b7; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
.search input { width: 100%; border: 1px solid #2a3f54; border-radius: 6px; padding: 10px; color: #e9f4fc; background: #111d2a; outline-color: #38bdf8; }
.folders section { margin: 0 0 17px; }.folders h2 { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; color: #9eb2c4; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }.folders h2 i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }.folders h2 small { margin-left: auto; color: #5e7387; }
.tree-note { display: block; width: 100%; overflow: hidden; padding: 5px 7px; border: 0; border-left: 2px solid transparent; color: #91a7b9; background: none; text-align: left; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }.tree-note:hover, .tree-note.active { border-left-color: #38bdf8; color: #f0f8ff; background: #142131; }.no-match { color: #597085; font-size: 12px; padding: 0 7px; }
.workspace { min-width: 0; }.note-view, .graph-view { width: min(1080px, 100%); min-height: 100vh; margin: 0 auto; padding: 55px clamp(24px, 6vw, 90px); }.note-header { display: flex; align-items: start; justify-content: space-between; gap: 20px; margin-bottom: 25px; border-bottom: 1px solid #26394c; padding-bottom: 26px; }.eyebrow { color: var(--accent, #71e3ff); font: 11px ui-monospace, monospace; text-transform: uppercase; letter-spacing: .15em; }.note-header h1 { margin: 8px 0 0; color: #f4f8fb; font-family: Georgia, serif; font-size: clamp(30px, 5vw, 52px); font-weight: 400; }.note-header p { color: #8fa5b7; }.graph-button { flex: none; border: 1px solid #2d5269; background: #102536; color: #9beaff; padding: 10px 13px; border-radius: 4px; }.graph-button span { padding-left: 8px; font-size: 17px; }
.metadata { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 38px; color: #7891a8; font-size: 12px; }.metadata div { display: flex; gap: 7px; }.metadata dt { text-transform: uppercase; letter-spacing: .08em; }.metadata dd { margin: 0; color: #c5d5e1; }
article { max-width: 820px; color: #c9d7e2; font-size: 16px; line-height: 1.75; } article h1, article h2, article h3 { margin: 2.1em 0 .5em; color: #eff7fc; font-family: Georgia, serif; line-height: 1.2; } article h1 { font-size: 2em; } article h2 { font-size: 1.45em; } article h3 { font-size: 1.15em; } article p, article ul, article ol { margin: 0 0 1.2em; } article li { margin: .35em 0; } article code { border-radius: 3px; padding: .12em .35em; color: #99e8ff; background: #122335; font-size: .86em; } article pre { overflow-x: auto; padding: 18px; border: 1px solid #263d53; background: #08131e; } article hr { border: 0; border-top: 1px solid #26394c; }.wikilink { border: 0; border-bottom: 1px solid #3a84a3; padding: 0; color: #78dff9; background: none; }.wikilink:hover { color: #d2f5ff; }.missing-link { color: #d0a163; }
.graph-view { width: min(1280px, 100%); }.graph-legend { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 14px; color: #9ab0c2; font-size: 12px; }.graph-legend span { display: flex; align-items: center; gap: 6px; }.graph-legend i { width: 8px; height: 8px; border-radius: 50%; } #graph { display: block; width: 100%; height: min(67vh, 720px); border: 1px solid #263e54; border-radius: 8px; background: radial-gradient(circle at 50% 50%, #102438, #081018 72%); touch-action: none; }.graph-help { color: #70889d; font-size: 12px; }
@media (max-width: 800px) { .app-shell { display: block; }.sidebar { position: relative; height: auto; max-height: 44vh; border-right: 0; border-bottom: 1px solid #243548; }.folders { columns: 2; }.folders section { break-inside: avoid; }.note-view, .graph-view { padding: 32px 20px; }.note-header { align-items: flex-start; }.graph-button { font-size: 12px; }.metadata { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
@media (max-width: 460px) { .folders { columns: 1; }.note-header { display: block; }.graph-button { margin-top: 18px; }.metadata { grid-template-columns: 1fr; } }
.folder-toggle{cursor:pointer;user-select:none}.collapse-arrow{display:inline-block;transition:transform .15s}.collapse-arrow.collapsed{transform:rotate(-90deg)}.folder-contents.hidden{display:none}