:root {
  font-family:
    "Archivo",
    -apple-system,
    sans-serif;
  color: #ece9f3;
  background: #101015;
  font-size: 16px;
  font-synthesis: none;
  --ink: #0b0a0f;
  --accent: #9c6aff;
  --muted: #97919f;
  --border: #2b2633;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input,
textarea,
select {
  font: inherit;
}
button {
  cursor: pointer;
  border: 1px solid var(--border);
  background: #131017;
  color: inherit;
  border-radius: 7px;
  padding: 9px 13px;
  line-height: 1.2;
}
button:hover {
  background: #20162f;
  border-color: #74509c;
}
button:disabled {
  opacity: 0.48;
  cursor: default;
}
button.primary {
  background: var(--accent);
  color: #faf7ff;
  border-color: var(--accent);
}
button.danger {
  color: #f39aab;
}
button.flat {
  border-color: transparent;
  background: transparent;
}
button.active {
  background: #2a1745;
  color: #c2a1ff;
  border-color: #6b4097;
}
input,
textarea,
select {
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 10px 12px;
  color: inherit;
  background: #131017;
}
input:focus,
textarea:focus,
button:focus-visible,
select:focus {
  outline: 2px solid #ab75ff;
  outline-offset: 2px;
}
label {
  display: grid;
  gap: 7px;
  font-size: 0.9rem;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1 {
  font-size: 1.7rem;
  letter-spacing: -0.04em;
}
h2 {
  font-size: 1.2rem;
  letter-spacing: -0.025em;
}
h3 {
  font-size: 1rem;
}
p {
  line-height: 1.6;
}
a {
  color: #bd92ff;
}
small,
.muted {
  color: var(--muted);
  font-size: 0.875rem;
}
.loading {
  padding: 40px;
}
.login {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.login-brand {
  background: var(--ink);
  color: #faf7ff;
  padding: 12vh 10%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 650;
  font-size: 1.2rem;
}
.brand-symbol {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid #705093;
  border-radius: 10px;
  font-size: 22px;
}
.login-brand h1 {
  font-size: 3.4rem;
  max-width: 450px;
  font-weight: 500;
  line-height: 1.06;
  margin-top: 70px;
}
.login-brand p {
  color: #a397b6;
  max-width: 350px;
}
.login-form {
  display: grid;
  place-items: center;
  padding: 32px;
}
.login-form form {
  width: min(350px, 100%);
  display: grid;
  gap: 22px;
}
.error {
  color: #f39aab;
  font-size: 0.9rem;
  white-space: pre-wrap;
}
.shell {
  display: grid;
  grid-template-columns: 265px minmax(0, 1fr);
  height: 100dvh;
}
.sidebar {
  background: var(--ink);
  color: #b5adbf;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 24px 16px 16px;
  gap: 20px;
}
.sidebar .brand {
  padding: 0 8px;
  color: #faf7ff;
}
.sidebar button {
  background: transparent;
  border-color: transparent;
  color: inherit;
}
.sidebar button:hover,
.sidebar button.active {
  background: #281640;
  color: #faf7ff;
}
.nav {
  display: grid;
  gap: 5px;
}
.nav button {
  text-align: left;
  display: flex;
  gap: 10px;
  align-items: center;
}
.nav .count {
  margin-left: auto;
  font-size: 0.8rem;
  color: #8e819e;
}
.side-caption {
  padding: 0 10px;
  font-size: 0.85rem;
  color: #9b8da9;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.side-caption button {
  padding: 3px 7px;
  font-size: 1.1rem;
}
.tree {
  overflow: auto;
  flex: 1;
  min-height: 120px;
}
.tree details {
  font-size: 0.9rem;
}
.tree summary {
  padding: 8px 7px;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.tree details > div {
  padding-left: 12px;
  border-left: 1px solid #30233f;
  margin-left: 10px;
}
.tree button {
  width: 100%;
  display: block;
  text-align: left;
  font-size: 0.875rem;
  padding: 9px 8px;
  overflow-wrap: anywhere;
}
.tree .empty-tree {
  font-size: 0.875rem;
  color: #92869f;
  padding: 10px;
  line-height: 1.5;
}
.side-bottom {
  border-top: 1px solid #332441;
  padding-top: 14px;
  display: grid;
  gap: 10px;
}
.side-bottom small {
  color: #92869f;
}
.side-bottom button {
  text-align: left;
}
.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: #131017;
}
.topbar {
  height: 76px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 28px;
  border-bottom: 1px solid var(--border);
}
.search {
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: 430px;
  width: 50%;
  color: var(--muted);
}
.search input {
  border: 0;
  background: #101015;
  width: 100%;
  font-size: 0.9rem;
}
.top-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.sync-button {
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 7px;
}
.workspace {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.empty {
  height: 100%;
  min-height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.empty-inner {
  max-width: 530px;
}
.empty-icon {
  margin-bottom: 30px;
  width: 64px;
  height: 64px;
  background: #20162f;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: #9c6aff;
  font-size: 32px;
}
.empty h1 {
  font-size: 2.5rem;
  font-weight: 550;
  line-height: 1.08;
}
.empty p {
  color: var(--muted);
  max-width: 440px;
}
.empty .hints {
  margin-top: 36px;
  border-top: 1px solid var(--border);
  padding-top: 20px;
  font-size: 0.85rem;
}
.empty .hints code {
  font-size: 0.85rem;
  color: #c2a1ff;
}
.note-head {
  padding: 22px 28px 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  border-bottom: 1px solid var(--border);
}
.note-head h1 {
  margin: 0 0 6px;
  overflow-wrap: anywhere;
}
.note-head small {
  display: block;
}
.note-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.note-actions button {
  font-size: 0.85rem;
}
.document-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 255px;
  min-height: calc(100% - 99px);
}
.editor-wrap {
  min-width: 0;
}
.editor-tabs {
  padding: 14px 28px;
  display: flex;
  gap: 5px;
  align-items: center;
}
.editor-tabs button {
  font-size: 0.85rem;
  padding: 7px 12px;
}
.editor-tabs small {
  margin-left: auto;
}
.editor {
  width: 100%;
  min-height: 60vh;
  resize: vertical;
  border: 0;
  border-radius: 0;
  padding: 18px 36px 70px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.94rem;
  line-height: 1.85;
  tab-size: 2;
  outline: none !important;
  white-space: pre-wrap;
}
.preview {
  padding: 20px 36px 60px;
  max-width: 900px;
  line-height: 1.8;
  overflow-wrap: anywhere;
  font-family: "Archivo", sans-serif;
  font-size: 1.08rem;
}
.preview h1 {
  font-size: 2.3rem;
}
.preview h2 {
  font-size: 1.7rem;
}
.preview h3 {
  font-size: 1.3rem;
}
.preview pre {
  overflow: auto;
  background: #101015;
  padding: 16px;
  border-radius: 8px;
  font-size: 0.85rem;
}
.preview code {
  font-family: ui-monospace, monospace;
  font-size: 0.85em;
}
.preview blockquote {
  border-left: 3px solid #9255c7;
  margin-left: 0;
  padding-left: 20px;
  color: #b7a7c7;
}
.preview table {
  border-collapse: collapse;
  width: 100%;
}
.preview td,
.preview th {
  border: 1px solid var(--border);
  padding: 8px;
}
.preview img {
  max-width: 100%;
}
.context {
  border-left: 1px solid var(--border);
  padding: 24px 20px;
  background: #100d15;
}
.context h3 {
  margin-bottom: 16px;
}
.context button {
  display: block;
  max-width: 100%;
  margin-bottom: 7px;
  text-align: left;
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}
.context p {
  font-size: 0.85rem;
  color: var(--muted);
}
.context-section + .context-section {
  border-top: 1px solid var(--border);
  margin-top: 26px;
  padding-top: 24px;
}
.page {
  padding: 30px;
  max-width: 1100px;
  margin: auto;
}
.page-header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}
.page-header p {
  color: var(--muted);
  font-size: 0.9rem;
}
.list {
  border-top: 1px solid var(--border);
}
.list-row {
  padding: 18px 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  border-bottom: 1px solid var(--border);
}
.list-row h3 {
  margin-bottom: 6px;
}
.list-row p {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}
.list-row .actions {
  display: flex;
  gap: 7px;
  flex-shrink: 0;
}
.result {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 18px 0;
  text-align: left;
}
.result strong {
  display: block;
  margin-bottom: 7px;
}
.settings-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 25px;
}
.settings-block {
  margin-bottom: 34px;
}
.settings-block > p {
  color: var(--muted);
  font-size: 0.9rem;
}
.status-pill {
  display: inline-block;
  border-radius: 5px;
  background: #20162f;
  color: #c39cff;
  font-size: 0.8rem;
  padding: 4px 7px;
}
.status-pill.error {
  background: #361b24;
  color: #f39aab;
}
.graph {
  height: calc(100dvh - 210px);
  min-height: 400px;
  background: #100d15;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.graph svg {
  width: 100%;
  height: 100%;
}
.graph line {
  stroke: #553172;
  stroke-width: 1.5;
}
.graph circle {
  fill: #9c6aff;
  stroke: #1d142a;
  stroke-width: 4;
}
.graph text {
  fill: #ece9f3;
  font-size: 14px;
  font-family: inherit;
  paint-order: stroke;
  stroke: #100d15;
  stroke-width: 5px;
  stroke-linejoin: round;
}
.graph g {
  cursor: pointer;
}
.graph g:focus {
  outline: none;
}
.graph g:focus circle {
  stroke: #0b0a0f;
}
.history-item {
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
}
.history-item .actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.diff {
  font-family: ui-monospace, monospace;
  font-size: 0.8rem;
  white-space: pre-wrap;
  max-height: 45vh;
  overflow: auto;
  background: #15111c;
  padding: 16px;
  line-height: 1.6;
}
.diff ins {
  background: #173527;
  text-decoration: none;
}
.diff del {
  background: #482333;
  text-decoration: none;
}
dialog {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
  width: min(640px, calc(100vw - 32px));
  max-height: 85dvh;
  box-shadow: 0 30px 100px #0b0a0f40;
  color: inherit;
}
dialog::backdrop {
  background: #0b0a0f80;
  backdrop-filter: blur(3px);
}
dialog form {
  display: grid;
  gap: 18px;
}
dialog .dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
dialog h2 {
  margin: 0;
}
dialog .dialog-head button {
  padding: 4px 9px;
}
dialog footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}
dialog textarea {
  min-height: 130px;
}
dialog pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #0b0a0f;
  color: #faf7ff;
  padding: 14px 20px;
  border-radius: 9px;
  box-shadow: 0 8px 30px #0b0a0f30;
  z-index: 20;
  max-width: 90vw;
  font-size: 0.9rem;
}
.mobile-menu {
  display: none;
}
.checkbox {
  display: flex;
  align-items: center;
  gap: 9px;
}
.checkbox input {
  width: 18px;
  height: 18px;
}
.field-help {
  font-size: 0.8rem;
  color: var(--muted);
}
@media (max-width: 1050px) {
  .document-layout {
    grid-template-columns: 1fr;
  }
  .context {
    border-top: 1px solid var(--border);
    border-left: 0;
    display: flex;
    gap: 30px;
  }
  .context-section + .context-section {
    border: 0;
    margin: 0;
    padding: 0;
  }
  .shell {
    grid-template-columns: 230px minmax(0, 1fr);
  }
  .note-head {
    flex-direction: column;
  }
  .note-actions {
    justify-content: flex-start;
  }
}
@media (max-width: 720px) {
  .login {
    grid-template-columns: 1fr;
  }
  .login-brand {
    padding: 28px;
    min-height: auto;
  }
  .login-brand h1 {
    font-size: 2rem;
    margin-top: 32px;
  }
  .login-brand p {
    display: none;
  }
  .login-form {
    padding: 35px 24px;
  }
  .shell {
    grid-template-columns: 1fr;
  }
  .sidebar {
    display: none;
    position: fixed;
    inset: 0 auto 0 0;
    width: 280px;
    z-index: 10;
    box-shadow: 20px 0 100px #0b0a0f50;
  }
  .sidebar.open {
    display: flex;
  }
  .mobile-menu {
    display: block;
  }
  .topbar {
    padding: 0 14px;
    height: 66px;
  }
  .top-actions .primary {
    font-size: 0.8rem;
    padding: 9px;
  }
  .sync-button {
    font-size: 0;
  }
  .sync-button span {
    font-size: 1rem;
  }
  .search {
    width: 100%;
  }
  .search input {
    min-width: 0;
  }
  .note-head {
    padding: 20px;
  }
  .editor-tabs {
    padding: 14px 20px;
  }
  .editor,
  .preview {
    padding: 15px 20px 50px;
  }
  .page {
    padding: 24px 18px;
  }
  .page-header {
    flex-direction: column;
    gap: 5px;
  }
  .empty {
    padding: 28px;
  }
  .empty h1 {
    font-size: 2.1rem;
  }
  .context {
    flex-direction: column;
  }
  .list-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .graph {
    height: 60vh;
  }
  .note-actions {
    gap: 4px;
  }
  .note-actions button {
    font-size: 0.8rem;
    padding: 8px;
  }
  .editor-tabs small {
    font-size: 0.75rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }
}

@media (max-width: 720px) {
  #sync-state {
    display: none;
  }
  .top-actions #new-note {
    white-space: nowrap;
  }
  .sync-button {
    padding: 9px;
  }
  .search input {
    font-size: 0.85rem;
  }
}

.grant-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  margin-bottom: 10px;
}
.grant-row input,
.grant-row select {
  min-width: 0;
}
@media (max-width: 540px) {
  .grant-row {
    grid-template-columns: 1fr auto;
  }
  .grant-row input {
    grid-column: 1/-1;
  }
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/archivo-latin-400-normal.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 500;
  src: url("/fonts/archivo-latin-500-normal.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 600;
  src: url("/fonts/archivo-latin-600-normal.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-display: swap;
}
:root {
  color-scheme: dark;
  --orange: #f39354;
  --purple: #9c6aff;
  --ink: #0b0a0f;
  --accent: #9c6aff;
  --muted: #97919f;
  --border: #2b2633;
}
body {
  background: #0b0a0f;
}
.main {
  background: #0e0d12;
}
.sidebar {
  background: #100b18;
  border-right: 1px solid #2b1c3c;
  padding-top: 28px;
  gap: 22px;
}
.brand {
  font-weight: 600;
  letter-spacing: -0.035em;
}
.brand-symbol {
  color: #c399ff;
  border-color: #51316f;
  background: #1e112c;
}
.sidebar .brand {
  color: #eee7f7;
}
.nav button {
  height: 42px;
  font-size: 0.88rem;
  gap: 12px;
}
.nav button.active {
  background: #2b1742 !important;
  color: #d4b7f6 !important;
  box-shadow: inset 3px 0 #b779ef;
  border-radius: 5px;
}
.brain-switch {
  margin: 2px 6px 0;
}
.brain-switch label {
  font-size: 0.75rem;
  color: #897b97;
  margin-bottom: 9px;
}
.brain-switch > div {
  display: flex;
  gap: 6px;
}
.brain-switch select {
  width: 100%;
  min-width: 0;
  background: #1b1225;
  border-color: #3a264d;
  font-size: 0.9rem;
  font-weight: 500;
}
.brain-switch button {
  border: 1px solid #3a264d;
  padding: 8px 11px;
  color: #c6a2ea;
}
.topbar {
  height: 78px;
  background: #0e0d12;
  padding: 0 32px;
}
.search input {
  background: #18131f;
  border: 1px solid #2b2335;
  border-radius: 6px;
  height: 38px;
  max-width: 460px;
}
.top-actions {
  gap: 12px;
}
.sync-button {
  background: transparent;
  border-color: #302637;
  color: #b4a6bf;
}
.primary {
  background: var(--orange) !important;
  color: #241409 !important;
  border-color: var(--orange) !important;
  font-weight: 600;
}
.primary:hover {
  background: #ffa773 !important;
}
.sidebar .side-bottom {
  margin-top: auto;
}
.tree summary {
  font-size: 0.84rem;
  color: #b3a2c2;
}
.tree button {
  color: #94869f;
  font-size: 0.82rem;
}
.tree button.active {
  color: #dfc5f6;
  background: #261634;
}
.tree details > div {
  border-left: 1px solid #32213f;
}
.workspace {
  scrollbar-color: #49315b transparent;
}
.page {
  max-width: 1400px;
  padding: 38px 40px;
}
.library-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}
.eyebrow {
  display: block;
  font-size: 0.83rem;
  color: #a28daf;
  margin-bottom: 12px;
}
.library-heading h1 {
  font-size: 2.1rem;
  font-weight: 500;
  letter-spacing: -0.045em;
  margin-bottom: 12px;
}
.library-heading p {
  margin: 0;
  font-size: 0.86rem;
}
.workspace-badge {
  font-size: 0.75rem;
  color: #b6a3c4;
  border: 1px solid #3a2a47;
  padding: 6px 10px;
  border-radius: 5px;
  margin-top: 6px;
  white-space: nowrap;
}
.library-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 22px;
}
.segmented {
  display: flex;
  gap: 2px;
  background: #16111e;
  padding: 4px;
  border: 1px solid #2d2139;
  border-radius: 7px;
}
.segmented button {
  background: transparent;
  border: 0;
  font-size: 0.83rem;
  padding: 8px 14px;
  color: #8c7e99;
}
.segmented button.active {
  color: #d9b8fa;
  background: #30203f;
}
.library-toolbar select {
  background: #17121d;
  font-size: 0.83rem;
  max-width: 320px;
  height: 38px;
}
.table-head {
  display: grid;
  grid-template-columns: 1fr 165px;
  color: #8c7e99;
  font-size: 0.76rem;
  padding: 12px 46px 12px 50px;
  border-top: 1px solid #2c2334;
  border-bottom: 1px solid #2c2334;
}
.document-row {
  display: flex;
  align-items: center;
  text-align: left;
  width: 100%;
  gap: 15px;
  border: 0;
  border-bottom: 1px solid #211b29;
  border-radius: 0;
  padding: 17px 12px;
  background: transparent;
}
.document-row:hover {
  background: #1c1425;
  border-color: #3f2954;
}
.document-icon {
  color: #a977d6;
  flex: 0 0 23px;
  font-size: 20px;
}
.document-name {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 6px;
}
.document-name strong {
  font-size: 0.91rem;
  font-weight: 500;
  color: #dcd5e5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.document-name small {
  color: #80718d;
  font-size: 0.74rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.document-row time {
  flex: 0 0 160px;
  color: #9789a4;
  font-size: 0.75rem;
}
.row-arrow {
  color: #9d69c4;
  font-size: 18px;
  margin-left: 12px;
}
.load-more {
  display: block;
  margin: 25px auto;
  background: #21162c;
  color: #be9adb;
  border-color: #49315c;
  font-size: 0.85rem;
}
.library-empty {
  padding: 70px 20px;
  text-align: center;
}
.library-empty .empty-icon {
  margin: 0 auto 24px;
  background: #271633;
  color: #c38dea;
}
.library-empty h2 {
  font-size: 1.7rem;
}
.library-empty p {
  color: #9d8ca9;
}
.note-head {
  padding: 24px 32px;
  border-bottom: 1px solid #2d2138;
  background: #110d17;
}
.note-head h1 {
  font-weight: 500;
  font-size: 1.65rem;
  line-height: 1.3;
  max-width: 700px;
}
.breadcrumb {
  font-size: 0.75rem;
  padding: 0;
  margin-bottom: 15px;
  color: #a681c3;
}
.note-actions button {
  background: #201529;
  border-color: #422b54;
  color: #cbb4dc;
}
.note-actions .primary {
  color: #241409;
}
.note-actions .danger {
  color: #ecacbc;
}
.editor-tabs {
  background: #100d16;
  border-bottom: 1px solid #261b31;
}
.editor-tabs button {
  background: transparent;
  color: #9985aa;
  border-color: transparent;
}
.editor-tabs button.active {
  color: #d5b2f4;
  background: #2b1a3b;
  border-color: #503163;
}
.editor {
  background: #110e16;
  color: #e0d4eb;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.86rem;
  line-height: 1.95;
}
.preview {
  font-family: "Archivo", sans-serif;
  font-size: 1rem;
  color: #c8bdcf;
  line-height: 1.85;
  max-width: 920px;
  padding: 32px 45px 80px;
}
.preview h1,
.preview h2,
.preview h3 {
  color: #eee4f5;
  letter-spacing: -0.025em;
  line-height: 1.3;
}
.preview h1 {
  font-size: 2rem;
}
.preview h2 {
  font-size: 1.55rem;
  margin-top: 34px;
}
.preview h3 {
  font-size: 1.2rem;
  margin-top: 26px;
}
.preview a {
  color: #c78aee;
  text-decoration-color: #684085;
  text-underline-offset: 4px;
}
.preview pre {
  background: #1b1323;
  border: 1px solid #35213f;
}
.preview code {
  font-family: "IBM Plex Mono", monospace;
  color: #d0a5e8;
}
.context {
  background: #110d17;
  border-color: #2e2039;
}
.context h3 {
  color: #cab4dc;
  font-size: 0.86rem;
}
.context p {
  color: #8a7899;
  font-size: 0.8rem;
}
.context button {
  background: #201529;
  color: #b99acb;
  border-color: #352042;
}
.context-section + .context-section {
  border-color: #33223f;
}
.graph {
  background: #120b1b;
  border-color: #332041;
}
.graph line {
  stroke: #744591;
}
.graph circle {
  fill: #af6adb;
  stroke: #21102e;
}
.graph text {
  fill: #d7c0e7;
  stroke: #120b1b;
}
.graph-focus {
  max-width: 100%;
  font-size: 0.85rem;
  flex-basis: 100%;
}
.page-header:has(.graph-focus) {
  flex-wrap: wrap;
}
.agent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}
.agent-card {
  padding: 24px;
  text-align: left;
  background: #18101f;
  border: 1px solid #382046;
  border-radius: 9px;
  min-height: 200px;
}
.agent-card:hover {
  background: #251332;
  border-color: #71428b;
}
.agent-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid #63407c;
  border-radius: 10px;
  color: #cb94ec;
  margin-bottom: 23px;
  font-size: 25px;
}
.agent-card h2 {
  color: #e2c9ee;
  overflow-wrap: anywhere;
}
.agent-card p {
  color: #826b92;
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}
.agent-status {
  font-size: 0.72rem;
  color: #cf9b72;
}
.agent-footnote {
  margin-top: 28px;
  color: #8d789b;
  font-size: 0.8rem;
}
dialog {
  background: #19111f;
  border-color: #513263;
  box-shadow: 0 25px 100px #0009;
}
dialog::backdrop {
  background: #050208b3;
}
dialog input,
dialog textarea,
dialog select {
  background: #100b16;
  border-color: #45304f;
  color: #e2d1ed;
}
.login {
  background: #0c090f;
}
.login-brand {
  background: #180d22;
  border-right: 1px solid #3f224e;
}
.login-brand h1 {
  color: #e5d4f1;
  font-family: "Archivo", sans-serif;
  font-size: 3.5rem;
  font-weight: 500;
}
.login-brand p {
  color: #aa90b9;
}
.login-form form {
  gap: 24px;
}
.login-form h1 {
  font-weight: 500;
}
.login-form input {
  background: #19101f;
  border-color: #3a2645;
}
.login-form label {
  color: #baa4c7;
}
.status-pill {
  background: #31203f;
  color: #c699e1;
}
#toast {
  background: #2e173d;
  color: #ecd9f9;
  border: 1px solid #67417d;
}
.document-layout {
  grid-template-columns: minmax(0, 1fr) 245px;
}
button,
input,
select,
textarea {
  font-family: inherit;
}
.nav svg,
.document-icon svg {
  width: 19px;
  height: 19px;
  vertical-align: middle;
}
@media (max-width: 1050px) {
  .document-layout {
    grid-template-columns: 1fr;
  }
  .page {
    padding: 28px;
  }
  .context {
    border-top: 1px solid #342040;
  }
}
@media (max-width: 720px) {
  .page {
    padding: 26px 18px;
  }
  .topbar {
    padding: 0 12px;
    height: 66px;
  }
  .library-heading {
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 25px;
  }
  .library-heading h1 {
    font-size: 1.9rem;
  }
  .workspace-badge {
    display: none;
  }
  .library-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .library-toolbar select {
    max-width: 100%;
  }
  .document-row {
    gap: 10px;
    padding: 15px 2px;
  }
  .document-row time,
  .table-head span:last-child {
    display: none;
  }
  .table-head {
    padding-left: 36px;
    grid-template-columns: 1fr;
  }
  .row-arrow {
    margin-left: 0;
  }
  .document-name strong {
    font-size: 0.86rem;
  }
  .preview {
    padding: 25px 20px 60px;
  }
  .note-head {
    padding: 22px 20px;
  }
  .login-brand h1 {
    font-size: 2.3rem;
  }
  .login-brand {
    border-right: 0;
    border-bottom: 1px solid #3f224e;
  }
  .agent-grid {
    grid-template-columns: 1fr;
  }
  .note-actions {
    gap: 6px;
  }
}
.top-actions {
  flex-shrink: 0;
}
.top-actions button {
  white-space: nowrap;
}
.graph-pages {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 16px 0;
}
.graph-pages span {
  color: var(--muted);
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
}

/* Archivo: a single family, stronger headings and calm reading weights. */
@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-latin-800-normal.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}
:root {
  --light-x: 50vw;
  --light-y: 30vh;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(
      650px circle at var(--light-x) var(--light-y),
      rgba(154, 100, 226, 0.085),
      transparent 70%
    ),
    radial-gradient(
      420px circle at calc(var(--light-x) + 210px) calc(var(--light-y) + 180px),
      rgba(240, 142, 77, 0.025),
      transparent 75%
    );
}
#app {
  position: relative;
  z-index: 1;
}
.main {
  background: transparent;
}
.brand,
.content h2,
.library-heading h1,
.page-header h1 {
  font-weight: 800;
  letter-spacing: -0.025em;
}
.preview {
  font-weight: 400;
}
.sidebar {
  background:
    linear-gradient(155deg, rgba(44, 33, 58, 0.24), transparent 42%), #100d16;
}
.topbar {
  background: linear-gradient(
    110deg,
    rgba(170, 150, 195, 0.035),
    transparent 55%
  );
}
button,
select,
input,
.agent-card,
.document-row {
  transition:
    background-color 480ms ease,
    border-color 480ms ease,
    box-shadow 600ms ease,
    color 400ms ease,
    transform 480ms cubic-bezier(0.2, 0.65, 0.3, 1);
}
.agent-card,
.brain-switch {
  background-image:
    radial-gradient(
      450px circle at var(--shine-x, 30%) var(--shine-y, 0%),
      rgba(180, 150, 219, 0.13),
      transparent 65%
    ),
    linear-gradient(
      135deg,
      rgba(215, 205, 229, 0.055),
      transparent 35%,
      rgba(148, 98, 198, 0.045) 70%,
      transparent
    );
}
.agent-card:hover {
  border-color: #72548d;
  box-shadow:
    0 8px 32px #0003,
    inset 0 1px 0 #d7baf526;
  transform: translateY(-2px);
}
.document-row:hover {
  background-image: radial-gradient(
    440px circle at var(--shine-x, 50%) var(--shine-y, 50%),
    rgba(159, 120, 208, 0.11),
    transparent 75%
  );
  transform: translateX(2px);
}
.primary {
  background-color: #ee9459;
  background-image:
    radial-gradient(
      180px circle at var(--shine-x, 20%) var(--shine-y, 0%),
      rgba(255, 240, 212, 0.4),
      transparent 70%
    ),
    linear-gradient(125deg, #ffffff18, transparent 35%, #5a21091a);
  box-shadow:
    inset 0 1px 0 #ffe0b64d,
    0 3px 12px #dc6f2510;
}
.primary:hover {
  box-shadow:
    inset 0 1px 0 #fff0d880,
    0 5px 24px #f1873826;
}
.brand-symbol {
  background-image:
    radial-gradient(
      circle at var(--shine-x, 20%) var(--shine-y, 15%),
      #dfc5ff25,
      transparent 65%
    ),
    linear-gradient(135deg, #ad83db18, transparent 45%, #ebc4ff0d);
  box-shadow: inset 0 1px 0 #dcc1ff1a;
}
@media (prefers-reduced-motion: reduce) {
  body::before {
    display: none;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .agent-card:hover,
  .document-row:hover {
    transform: none;
  }
}
/* Graph workspace: native-tool density and a full-bleed interactive canvas. */
.graph-studio {
  height: calc(100dvh - 78px);
  min-height: 420px;
  display: flex;
  flex-direction: column;
  background: #1b1b1f;
  margin: 0;
  color: #c8c5ce;
}
.graph-toolbar {
  height: 46px;
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid #2b292f;
}
.graph-toolbar h1 {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  margin: 0;
}
.graph-toolbar #graph-count {
  font-size: 11px;
  color: #918b9a;
  margin-right: auto;
  margin-left: 12px;
}
.graph-toolbar button,
.graph-bottom button {
  padding: 5px 9px;
  min-height: 28px;
  font-size: 12px;
  background: transparent;
  border: 1px solid transparent;
}
.graph-toolbar button:hover,
.graph-bottom button:hover {
  background: #302d35;
  border-color: #44404b;
}
.graph-surface {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
}
.graph-surface canvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: grab;
}
.graph-surface canvas:focus-visible {
  outline: 2px solid #9c7bc5;
  outline-offset: -3px;
}
.graph-controls {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 274px;
  max-height: calc(100% - 65px);
  overflow: auto;
  background: #242328f2;
  border: 1px solid #39363e;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 6px 24px #0004;
  font-size: 12px;
}
.graph-controls[hidden] {
  display: none;
}
.graph-controls details {
  border-bottom: 1px solid #39363e;
  padding: 10px 0;
}
.graph-controls details:last-child {
  border: 0;
}
.graph-controls summary {
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 3px 0;
}
.graph-controls label {
  display: block;
  margin: 12px 0 4px;
  font-size: 12px;
  font-weight: 400;
}
.graph-controls
  input:not([type="checkbox"]):not([type="range"]):not([type="color"]),
.graph-controls select {
  width: 100%;
  padding: 7px 8px;
  font-size: 12px;
  min-height: 30px;
  background: #19181d;
  border-color: #3c3743;
  color: #ddd7e4;
}
.graph-controls input[type="range"] {
  display: block;
  width: 100%;
  padding: 0;
  margin: 9px 0;
  height: 12px;
  min-height: 0;
  accent-color: #a083c5;
}
.graph-controls input[type="checkbox"] {
  width: 28px;
  height: 15px;
  min-height: 0;
  accent-color: #a083c5;
}
.graph-controls .graph-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.graph-controls output {
  float: right;
  color: #98909f;
  font-size: 11px;
}
.graph-controls small {
  display: block;
  font-size: 10px;
  line-height: 1.5;
  color: #938b9e;
  margin-top: 7px;
}
.graph-controls button {
  font-size: 11px;
  padding: 5px 9px;
  min-height: 26px;
}
.graph-group {
  display: flex;
  gap: 5px;
  align-items: center;
  margin-top: 9px;
}
.graph-group input[type="color"] {
  padding: 0;
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  border: 0;
  background: none;
}
.graph-group input[data-query] {
  min-width: 0;
}
.graph-bottom {
  position: absolute;
  bottom: 8px;
  left: 15px;
  right: 15px;
  display: flex;
  align-items: center;
  gap: 5px;
  pointer-events: none;
}
.graph-bottom span {
  margin-right: auto;
  color: #817b88;
  font-size: 11px;
}
.graph-bottom button {
  pointer-events: auto;
  background: #242128;
}
.graph-tooltip {
  position: absolute;
  pointer-events: none;
  padding: 6px 9px;
  background: #09080dea;
  border: 1px solid #484050;
  border-radius: 5px;
  font-size: 11px;
  max-width: 270px;
  overflow-wrap: anywhere;
}
.graph-menu {
  position: absolute;
  background: #27232d;
  border: 1px solid #49404f;
  box-shadow: 0 4px 16px #0005;
  padding: 5px;
  border-radius: 6px;
}
.graph-menu button {
  display: block;
  width: 100%;
  padding: 8px;
  font-size: 12px;
  text-align: left;
  background: none;
  border: 0;
}
.graph-error {
  padding: 10px 16px;
  font-size: 12px;
  color: #f1b180;
  margin: 0;
  background: #2a1d17;
}
body:has(.graph-studio)::before {
  display: none;
}
@media (max-width: 650px) {
  .graph-toolbar {
    padding: 0 8px;
    gap: 2px;
  }
  .graph-toolbar h1 {
    font-size: 12px;
  }
  .graph-toolbar #graph-count {
    display: none;
  }
  .graph-toolbar h1 {
    margin-right: auto;
  }
  .graph-controls {
    width: 245px;
    right: 8px;
  }
  .graph-bottom span {
    max-width: 65%;
    font-size: 10px;
  }
}
#document-width {
  margin-left: 12px;
  width: auto;
  min-height: 30px;
  padding: 4px 9px;
  font-size: 12px;
}
.document-layout[data-width="center"],
.document-layout[data-width="full"] {
  grid-template-columns: minmax(0, 1fr);
}
.document-layout[data-width="center"] .preview,
.document-layout[data-width="center"] .editor {
  width: 100%;
  max-width: 80ch;
  margin-inline: auto;
  display: block;
}
.document-layout[data-width="left"] .preview {
  margin-inline: 0;
  max-width: 80ch;
}
.document-layout[data-width="full"] .preview,
.document-layout[data-width="full"] .editor {
  max-width: none;
  width: 100%;
  margin-inline: 0;
}
.document-layout[data-width="center"] .context,
.document-layout[data-width="full"] .context {
  border-left: 0;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 24px 32px;
  gap: 32px;
}
.editor-tabs {
  flex-wrap: wrap;
}
@media (max-width: 650px) {
  #document-width {
    margin-left: auto;
  }
  .document-layout[data-width="center"] .context,
  .document-layout[data-width="full"] .context {
    grid-template-columns: 1fr;
  }
  .editor-tabs #save-status {
    width: 100%;
    margin: 4px 0;
  }
}
.graph-controls label[hidden] {
  display: none;
}
/* Compact document chrome keeps the first paragraph close to the controls. */
.note-head {
  padding: 12px 22px;
  align-items: center;
}
.note-head h1 {
  font-size: 22px;
  line-height: 1.25;
  margin: 4px 0;
}
.note-head small {
  font-size: 11px;
  color: var(--muted);
}
.note-head .breadcrumb {
  padding: 0;
  min-height: 20px;
  font-size: 11px;
}
.note-actions button {
  padding: 6px 9px;
  min-height: 30px;
  font-size: 12px;
}
.editor-tabs {
  padding: 8px 22px;
  border-bottom: 1px solid #29242f;
}
.editor-tabs button {
  min-height: 29px;
  padding: 4px 9px;
  font-size: 12px;
}
.document-layout {
  min-height: 0;
}
.preview {
  padding: 20px 28px 36px;
  line-height: 1.7;
}
.preview > :first-child {
  margin-top: 0;
}
.preview h1 {
  font-size: 28px;
}
.preview h2 {
  font-size: 22px;
}
.editor {
  padding: 20px 28px 36px;
  line-height: 1.7;
}
@media (max-width: 650px) {
  .note-head {
    padding: 12px 16px;
    align-items: flex-start;
  }
  .note-head h1 {
    font-size: 20px;
  }
  .editor-tabs {
    padding: 8px 14px;
  }
  .preview,
  .editor {
    padding: 18px 20px 30px;
  }
}

/* Folder-first library navigation */
.sidebar .nav { border-top: 1px solid #302638; padding-top: 12px; flex-shrink: 0; }
.side-caption .library-home {font-size: .9rem; text-align:left; flex:1; padding:6px 0;}
.side-caption .count {font-size:.75rem; color:#91839f; margin-left:8px;}
.folder-breadcrumb {display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:#a99ab8;margin-bottom:20px;}
.folder-breadcrumb button {padding:4px 6px;background:transparent;border:0;color:inherit;}
.folder-breadcrumb button:hover {color:#eee4f6;}

/* Long code remains readable; copying preserves the original text. */
.preview .code-block {min-width:0;max-width:100%;margin:20px 0;border:1px solid #382943;border-radius:8px;background:#101015;}
.preview .copy-code {display:block;margin:8px 8px 0 auto;padding:5px 10px;font-size:.8rem;}
.preview .code-block pre {margin:0;border:0;white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal;overflow:visible;max-width:100%;}
.preview .code-block code {white-space:inherit;overflow-wrap:inherit;}
.preview table {table-layout:fixed;width:100%;max-width:100%;}
.preview th,.preview td {min-width:0;white-space:normal;overflow-wrap:anywhere;word-break:normal;}
.preview td code,.preview th code {white-space:pre-wrap;overflow-wrap:anywhere;}
.brain-label{display:block;font-size:.75rem;color:#a99ab8;margin-bottom:8px}
.brain-picker{position:relative;flex:1;min-width:0}
.brain-picker summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid #483454;border-radius:6px;background:#211827;font-size:.9rem;cursor:pointer}
.brain-picker summary::-webkit-details-marker{display:none}
.brain-picker summary:focus-visible{outline:2px solid #b58bd6;outline-offset:2px}
.brain-options{position:absolute;display:grid;top:calc(100% + 6px);left:0;right:0;z-index:50;padding:5px;background:#201726;border:1px solid #50345f;border-radius:8px;box-shadow:0 16px 36px #0009;max-height:300px;overflow:auto}
.brain-switch .brain-options button{width:100%;display:flex;justify-content:space-between;gap:12px;padding:10px;border:0;background:transparent;font-size:.875rem}
.brain-switch .brain-options button[aria-pressed=true]{background:#3b2649;color:#e4c5ff}
.loading-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;background:radial-gradient(ellipse at center,#20142b 0, #0d0b10 55%);font-family:Archivo,sans-serif}
.loading-mark{width:58px;height:58px;border:1px solid #74508c;border-radius:16px;display:grid;place-items:center;font-size:38px;color:#c59ae5;background:linear-gradient(145deg,#3a254a,#19131e);box-shadow:0 0 32px #784ba326}
.loading-screen strong{font-size:22px;font-weight:600}.loading-screen>span{font-size:13px;color:#ac9cb7}
.loading-track{width:112px;height:2px;background:#34283e;overflow:hidden;border-radius:2px;margin-top:7px}.loading-track i{display:block;width:40%;height:100%;background:#e59b60;animation:loading-slide 2.4s ease-in-out infinite}
@keyframes loading-slide{0%,100%{transform:translateX(-100%)}50%{transform:translateX(250%)}}
.sync-button>span:first-child{font-size:0;display:block;width:6px;height:6px;border-radius:50%;background:#b69cc8}
.sync-button[data-status=syncing]>span:first-child{background:#d6b3ef;animation:sync-pulse 1.8s ease-in-out infinite}
.sync-button[data-status=attention]>span:first-child{background:#eea166}.sync-button[data-status=ready]>span:first-child{background:#ae91c5}
@keyframes sync-pulse{50%{box-shadow:0 0 0 4px #b88ade22;opacity:.5}}
@media(prefers-reduced-motion:reduce){.loading-track i,.sync-button[data-status=syncing]>span:first-child{animation:none}}

.reader-welcome{display:flex;min-height:65vh;align-items:center;justify-content:center;flex-direction:column;gap:14px;padding:30px;text-align:center}.reader-welcome h1{font-size:24px;margin:0}.reader-welcome p{color:#a99ab8;margin:0 0 10px}.reader-welcome .brand-symbol{font-size:32px;color:#be96dd}

/* Multi-note workspace */
.note-tabbar{display:flex;gap:3px;overflow:auto;flex-shrink:0;border-bottom:1px solid var(--border);padding:6px 12px;background:var(--ink)}.note-tab{display:flex;align-items:center;flex-shrink:0;border-radius:6px;border:1px solid transparent}.note-tab.active{border-color:var(--accent);background:#2a1745}.note-tab button{border:0;background:transparent;padding:7px 10px;white-space:nowrap}.note-tab .close-tab{padding:7px}.tree-tools{display:flex;gap:4px;padding:4px 12px}.tree-tools select{min-width:0;width:100%;font-size:11px}.tree-tools button{padding:3px 7px}.quick-results{max-height:55vh;overflow:auto}.quick-results button{display:block;text-align:left;width:100%;margin:4px 0}.quick-results button.selected{background:#2a1745;color:#c2a1ff}.workspace-split{display:flex;min-height:55vh}.workspace-split>.editor{flex:0 0 var(--editor-ratio,50%);min-width:100px;width:var(--editor-ratio,50%);resize:none}.workspace-split>.preview{flex:1;min-width:100px;overflow-wrap:anywhere;padding:24px}.split-handle{width:6px;flex:0 0 6px;cursor:col-resize;background:var(--border);touch-action:none}.context[hidden]{display:none}.outline button{display:block;text-align:left;width:100%;font-size:12px}.properties-source{width:100%;min-height:130px;font-family:monospace}.link-hover{position:fixed;z-index:1000;max-width:360px;max-height:230px;overflow:hidden;white-space:pre-wrap;padding:16px;background:#19141f;box-shadow:0 6px 30px #0008;border:1px solid var(--border);border-radius:8px;pointer-events:none}.context-menu{position:fixed;z-index:1001;background:#19141f;padding:6px;box-shadow:0 4px 25px #0008;border-radius:7px}.context-menu button{display:block;width:100%;text-align:left}.drop-target{outline:2px solid var(--accent)}.quick-input{width:100%;margin-bottom:12px}@media(max-width:760px){.workspace-split{display:block}.workspace-split>.editor{width:100%;min-height:45vh}.split-handle{display:none}.workspace-split>.preview{padding:16px}}

.document-layout .context[hidden]{display:none}
.document-layout .workspace-split>.editor{width:var(--editor-ratio,50%);max-width:none;margin:0;display:block;flex:0 0 var(--editor-ratio,50%)}
.document-layout .workspace-split>.preview{max-width:none;width:auto;margin:0;flex:1}
.document-panes{display:flex;align-items:stretch;min-height:100%;width:100%;min-width:0}.main-document{flex:0 0 var(--main-pane-ratio,55%);width:var(--main-pane-ratio,55%);min-width:0}.document-pane-handle{flex:0 0 6px;cursor:col-resize;touch-action:none;background:var(--border)}.right-document{flex:1;min-width:0;overflow:auto;border-left:1px solid var(--border)}.right-document>header{position:sticky;top:0;padding:14px;background:var(--ink);border-bottom:1px solid var(--border);z-index:1}.right-document strong{overflow-wrap:anywhere}.right-document small{display:block;margin-top:5px;opacity:.7}.reference-actions{display:flex;gap:4px;flex-wrap:wrap;margin-top:12px}.reference-actions button{font-size:11px;padding:5px 7px}.right-document>.preview{padding:24px;max-width:none;width:100%;overflow-wrap:anywhere}.document-panes .note-head{padding:20px;flex-wrap:wrap}.document-panes .note-actions{flex-wrap:wrap}.document-panes .document-layout{padding-inline:12px}.document-panes .context{padding:16px!important;gap:12px!important}.document-panes .editor-tabs{padding-inline:8px}.document-panes .preview img{max-width:100%}@media(max-width:900px){.document-panes{flex-direction:column}.main-document{width:100%;flex:auto}.document-pane-handle{display:none}.right-document{border-top:2px solid var(--border);min-height:350px}.document-panes .workspace-split{display:block}.document-panes .workspace-split>.editor{width:100%}}
#draft-storage-warning{margin:0;padding:10px 16px;background:#392318;color:#ffca92;font-size:12px}#draft-storage-warning[hidden]{display:none}

/* Keep 3D overlays inside their canvas under the production CSP. */
.graph-mode { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:8px 18px; }
[data-graph-host] { flex:1; min-height:0; display:flex; flex-direction:column; }
.graph3d-surface { position:relative; flex:1; min-height:400px; overflow:hidden; isolation:isolate; }
.graph3d-surface [data-canvas] { position:absolute; inset:0; }
.graph3d-surface .graph-controls { z-index:2; max-width:calc(100% - 28px); }
.graph3d-surface .graph-bottom { z-index:2; }
.graph-toolbar { flex-wrap:wrap; height:auto; min-height:46px; padding-top:6px; padding-bottom:6px; }
.graph-toolbar [role="status"] { font-size:11px; color:#aaa4b2; margin-right:auto; }

.pdf-export { display:none; }
@media print {
  @page { size:A4; margin:18mm; }
  body { background:white!important; color:#111!important; margin:0!important; overflow:visible!important; }
  body > :not(.pdf-export) { display:none!important; }
  body::before,body::after { display:none!important; }
  .pdf-export { display:block!important; max-width:none!important; width:auto!important; margin:0!important; padding:0!important; font:11pt/1.55 Archivo,Arial,sans-serif!important; color:#111!important; background:white!important; }
  .pdf-export * { color:#111!important; text-shadow:none!important; box-shadow:none!important; }
  .pdf-export button { display:none!important; }
  .pdf-export h1,.pdf-export h2,.pdf-export h3 { break-after:avoid; }
  .pdf-export h1 { font-size:22pt; }
  .pdf-export h2 { font-size:17pt; }
  .pdf-export h3 { font-size:13pt; }
  .pdf-export img { max-width:100%; max-height:240mm; object-fit:contain; break-inside:avoid; }
  .pdf-export pre,.pdf-export code { white-space:pre-wrap!important; overflow-wrap:anywhere; background:#f3f3f3!important; }
  .pdf-export pre { border:1px solid #ddd; padding:10px; }
  .pdf-export table { width:100%; border-collapse:collapse; table-layout:fixed; }
  .pdf-export th,.pdf-export td { border:1px solid #bbb; padding:6px; overflow-wrap:anywhere; }
  .pdf-export thead { display:table-header-group; }
  .pdf-export tr { break-inside:avoid; }
  .pdf-export a { text-decoration:underline; }
}

.tree-tools { display:flex; flex-direction:column; gap:7px; padding:4px 14px 12px; }
.tree-order { position:relative; }
.tree-order summary { list-style:none; display:flex; align-items:center; gap:9px; cursor:pointer; min-height:34px; padding:6px 10px; border:1px solid #322b3c; border-radius:7px; background:#17131e; color:#c9bfd7; font-size:12px; }
.tree-order summary::-webkit-details-marker { display:none; }
.tree-order-symbol { color:#a98ccf; font-size:16px; }
.tree-order-chevron { margin-left:auto; color:#8d819c; }
.tree-order[open] summary { border-color:#80619f; background:#21182c; }
.tree-order-menu { position:absolute; top:calc(100% + 5px); left:0; right:0; z-index:30; padding:5px; border:1px solid #44334e; border-radius:8px; background:#211a2a; box-shadow:0 12px 30px #0006; }
.tree-order-menu button { display:flex; justify-content:space-between; width:100%; border:0; border-radius:4px; padding:8px; background:transparent; font-size:11px; text-align:left; }
.tree-order-menu button[aria-pressed="true"],.tree-order-menu button:hover { background:#362442; color:#e3ccff; }
.tree-utilities { display:flex; gap:5px; }
.tree-utilities button { display:flex; flex:1; justify-content:center; align-items:center; gap:6px; padding:5px 3px; min-height:29px; font-size:10px; color:#a89bb7; background:transparent; border:1px solid transparent; border-radius:5px; }
.tree-utilities button:hover { background:#261c32; color:#e1d3ef; border-color:#3b2d48; }
.tree-utilities svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.tree-order summary:focus-visible { outline:2px solid #ab86d7; outline-offset:2px; }

.visual-edit-help {padding:10px 24px;color:#aa9db8;font-size:12px;border-bottom:1px solid var(--border)}
.visual-block {position:relative;margin:0}
.visual-block [contenteditable] {min-height:1.6em;outline:none;border-radius:4px}
.visual-block [contenteditable]:focus {box-shadow:inset 2px 0 #9b70c4;padding-left:10px}
.visual-protected-label {font-size:10px!important;color:#aa9db8;opacity:.7}
.visual-protected {border-left:1px solid #40334c;padding-left:12px}

.correction-pair {padding:12px 0;border-bottom:1px solid var(--border)}.correction-pair del,.correction-pair ins{display:block;white-space:pre-wrap;overflow-wrap:anywhere;padding:6px}.correction-pair del{color:#e3a1a1}.correction-pair ins{color:#b2dbaf;text-decoration:none}

.reference-actions .close-reference-panel { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:40px; padding:8px 12px; flex-shrink:0; margin-left:auto; border:1px solid #806598; background:#30223f; color:#f0e6fa; font-size:12px; font-weight:600; white-space:nowrap; }
.reference-actions .close-reference-panel span {font-size:20px;line-height:1;}
.reference-actions .close-reference-panel:hover {background:#49315c;border-color:#b28dd1;}
.reference-actions .close-reference-panel:focus-visible {outline:2px solid #c8a3ec;outline-offset:3px;}
@media(max-width:600px){.reference-actions .close-reference-panel {flex-basis:100%;margin-left:0;}}

.learning-report {padding:14px 0;border-top:1px solid var(--border)}.learning-report textarea{width:100%;min-height:100px}.learning-report button{margin:5px}

.variant-tree{padding:10px 0 18px;overflow:auto}.variant-branch{position:relative;padding:5px 0}.variant-children{border-left:1px solid #705780;margin-left:14px;padding-left:20px}.variant-children>.variant-branch::before{content:"";position:absolute;left:-20px;top:25px;width:20px;border-top:1px solid #705780}.variant-branch-label{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:4px;max-width:100%;white-space:normal;overflow-wrap:anywhere;background:#201927;border:1px solid #403249;padding:10px 14px;border-radius:8px}.variant-branch-label small{font-size:11px;color:#bba8c9}.variant-branch-label.current{border-color:#b28bd1;background:#352341}.variant-branch>details>summary{cursor:pointer;font-size:11px;color:#bba8c9;padding:4px 0;list-style:none}.variant-branch>details>summary::-webkit-details-marker{display:none}.variant-branch>details:not([open])>summary span{display:inline-block;opacity:.8}.variant-branch>details:not([open])>.variant-branch-label{display:flex}

/* Variant threads in the file navigator. */
.sidebar-thread-row{display:flex;align-items:center;gap:3px;min-width:0}
.tree .sidebar-thread-row .thread-note{flex:1;min-width:0;width:auto}
.tree .sidebar-thread-row .thread-toggle,.tree .sidebar-thread-row .thread-follow{width:30px;flex:0 0 30px;padding:8px 3px;text-align:center;background:transparent;border:0}
.thread-note small{display:block;font-size:12px;color:#b2a2c2;margin-top:4px}
.sidebar-thread-children{margin-left:15px;padding-left:10px;border-left:2px solid #775198}
.sidebar-thread-children[hidden]{display:none}
.tree .thread-history{font-size:12px;color:#c6a5e9;padding:3px 8px 9px;background:transparent;border:0}
.thread-follow[aria-pressed="true"]{color:#efba70}

.correction-pair pre{white-space:pre-wrap;overflow-wrap:anywhere;margin:6px 0 12px;padding:10px;background:var(--bg);font-family:inherit}.correction-pair mark{background:#60421f;color:#ffe0ab;border-radius:2px}.correction-pair strong{font-size:12px;color:var(--muted)}

.speech-dialog{width:min(980px,94vw);max-width:980px;height:min(850px,92vh);max-height:92vh;padding:0;background:#100d15;color:#ddd3e6;border:1px solid #483453;border-radius:18px;overflow:hidden}.speech-dialog[open]{display:flex;flex-direction:column}.speech-dialog::backdrop{background:#09070cbd;backdrop-filter:blur(5px)}.speech-head{display:flex;justify-content:space-between;align-items:center;padding:24px 32px;border-bottom:1px solid #302538;gap:20px}.speech-head h2{font-size:20px;margin:8px 0 0;overflow-wrap:anywhere}.speech-head small{font-size:11px;letter-spacing:.13em;color:#ae92c0}.speech-copy{overflow:auto;flex:1;padding:32px 48px;font-size:24px;line-height:1.95;white-space:pre-wrap;min-height:120px}.speech-word{display:inline;font:inherit;line-height:inherit;background:transparent;border:0;border-radius:5px;color:#c1b4cc;padding:2px;margin:0;cursor:pointer}.speech-word.active{background:#624183;color:#fff0df;box-shadow:0 0 0 1px #ae83ca55}.speech-word:hover{color:white;background:#35243f}.speech-controls{padding:20px 30px;background:#19131f;border-top:1px solid #45314f}.speech-options,.speech-transport{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.speech-options{margin-bottom:14px}.speech-options label{font-size:13px}.speech-options select{margin-left:6px}.speech-transport input{flex:1;min-width:100px;accent-color:#b896d2}.speech-controls p{font-size:13px;color:#c1a8d0;margin:12px 0 6px}.speech-controls small{font-size:11px;color:#9e91a7}.speech-head button{font-size:25px}.speech-dialog button:focus-visible{outline:2px solid #f2a067}@media(max-width:600px){.speech-copy{padding:20px;font-size:20px}.speech-controls,.speech-head{padding:16px}.speech-options{gap:8px}}

/* Fogler · Resplandor. Official palette, Fo and a single type family. */
@font-face{font-family:Lexend;src:url('/fonts/lexend-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Lexend;src:url('/fonts/lexend-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Lexend;src:url('/fonts/lexend-800.woff2') format('woff2');font-weight:800;font-display:swap}
:root{font-family:Lexend,sans-serif;color:#fff;background:#050405;--ink:#050405;--accent:#F2823C;--muted:#B8A1D2;--border:rgba(184,161,210,.24)}
body,.main,.workspace,.sidebar,.topbar,.note-tabbar,.editor-tabs,.note-head,.context,.editor-wrap,.login-form{background-color:#050405;color:#fff}
body,button,input,textarea,select,.brand,.editor,.markdown,.preview,.note-content,.loading-screen,code,pre{font-family:Lexend,sans-serif}
h1,h2,h3,.brand{font-weight:800}button,strong,b{font-weight:600}
button.primary{background:#F2823C;color:#050405;border-color:#F2823C}button.primary:hover{background:#FBF7F2;color:#050405}
button.active,.nav button.active{background:rgba(129,79,179,.3);color:#fff;border-color:#814FB3}
button:hover{border-color:#B8A1D2}button.danger,.error{color:#F2823C}
input:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:2px solid #B8A1D2;outline-offset:3px}
a{color:#B8A1D2}.muted,.field-help,small{color:#B8A1D2}
.fo-mark{width:44px;height:44px;object-fit:cover;border-radius:50%;margin-right:12px}.brand{gap:12px}
.login-brand{background:linear-gradient(140deg,#35283F 0%,#814FB3 49%,#CF8A9C 80%,#F2823C 100%);position:relative;overflow:hidden}
.login-brand:after{content:'';position:absolute;width:min(32vw,350px);height:min(32vw,350px);bottom:9%;right:10%;background:url('/assets/fo-reposo.png') center/contain no-repeat;border-radius:50%;box-shadow:0 0 80px rgba(242,130,60,.18);pointer-events:none}
.login-brand>div,.login-brand>small{position:relative;z-index:1}.login-brand>small{color:#fff}.login-brand h1{max-width:15ch;font-weight:800}.login-brand p{max-width:32ch}.login-form h1{font-weight:800}
.knowledge{max-width:1050px;margin:0 auto;padding:36px;line-height:1.6}.knowledge-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--border);padding-bottom:28px;margin-bottom:28px}.knowledge-heading h1{font-size:clamp(26px,4vw,40px);line-height:1.2;max-width:18ch;margin:0}.knowledge-heading p{color:#B8A1D2}.knowledge-heading img{object-fit:cover;border-radius:50%;box-shadow:0 0 50px rgba(129,79,179,.22)}
.knowledge form{display:grid;gap:12px}.knowledge textarea{width:100%;resize:vertical;min-height:108px;padding:16px;background:#050405;color:#fff;border:1px solid #814FB3}.knowledge-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.knowledge-actions a{margin-left:auto;font-size:14px}.knowledge-text{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.75}.knowledge-answer{padding:18px 0 30px}.knowledge-hit{padding:22px 0;border-top:1px solid var(--border)}.knowledge-source{display:flex;justify-content:space-between;gap:18px;width:100%;text-align:left;padding:0;border:0;background:none;font-weight:600}.knowledge-source span{color:#B8A1D2;white-space:nowrap;font-size:13px}.knowledge-hit p{color:#B8A1D2;white-space:pre-wrap;overflow-wrap:anywhere;max-height:220px;overflow:auto}.knowledge-selection{margin-top:36px;border-top:1px solid var(--border);padding-top:24px}.knowledge-selection summary{cursor:pointer}.knowledge-selected-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;font-size:14px;overflow-wrap:anywhere}.knowledge-dialog{max-width:900px;width:90vw;max-height:85vh;padding:28px;background:#050405;color:#fff;border:1px solid #814FB3}.knowledge-dialog header{display:flex;align-items:start;justify-content:space-between;gap:20px}.knowledge-dialog::backdrop{background:rgba(5,4,5,.8)}
@media(max-width:700px){.knowledge{padding:22px 16px}.knowledge-heading{gap:12px}.knowledge-heading img{width:68px;height:68px}.knowledge-actions a{width:100%;margin:0}.knowledge-selected-row{align-items:flex-start;flex-direction:column}.login-brand:after{display:none}.note-actions{flex-wrap:wrap}.fo-mark{width:32px;height:32px}.knowledge-dialog{padding:18px}.knowledge-dialog h2{font-size:20px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
@media(max-width:700px){.topbar{display:grid;grid-template-columns:38px minmax(80px,1fr) auto;gap:8px;padding:10px 12px;min-height:62px}.topbar .search{width:auto;min-width:0;max-width:none}.topbar .search input{width:100%;min-width:0}.top-actions{gap:6px;min-width:0}.top-actions #attachments,.top-actions #quick-open,.top-actions #open-folder,.top-actions #commands{display:none}.top-actions #sync{padding:8px;min-width:36px}.top-actions #sync-state{display:none}.top-actions #new-note{font-size:0;padding:8px;min-width:36px}.top-actions #new-note:after{content:'+';font-size:22px;line-height:1}.mobile-menu{width:36px;padding:8px}}
.login-brand h1,.login-brand p{color:#FFFFFF}.login-brand p{text-shadow:0 1px 12px rgba(5,4,5,.3)}
.knowledge p,.knowledge-text{font-weight:400}.source-markdown{white-space:normal}.source-markdown p{margin:1em 0}.source-markdown h2{font-size:23px;margin-top:1.6em}.source-markdown h3{font-size:19px}.source-markdown a{color:#B8A1D2;text-decoration:underline}.source-highlight{background:rgba(129,79,179,.3);border-left:3px solid #F2823C;padding:14px}.knowledge-dialog header{position:sticky;top:-28px;background:#050405;padding:12px 0;z-index:1}
.nav .nav-rag{display:block;text-decoration:none;color:#B8A1D2;padding:12px 13px;border:1px solid transparent;border-radius:7px;font-weight:600;font-size:14px}.nav .nav-rag:hover{border-color:#814FB3;background:rgba(129,79,179,.18);color:#fff}
.vault-actions{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}.vault-list{display:grid;gap:12px}.vault-row{display:grid;text-align:left;gap:8px;padding:16px}.vault-row span,.vault-row small{color:#B8A1D2;font-size:13px}.vault-path{overflow-wrap:anywhere;color:#B8A1D2;font-size:14px}.vault-row strong{font-size:18px}
/* Fogler workspace: quiet reading surfaces, warm action, violet depth. */
:root{--surface:rgba(255,255,255,.035);--border:rgba(184,161,210,.19);--muted:#B8A1D2;font-weight:400}
button{font-weight:600;border-radius:12px;transition:background .16s,border-color .16s,color .16s}button.primary{border-radius:999px;padding:11px 20px;box-shadow:0 3px 18px rgba(242,130,60,.08)}
input,textarea,select{border-radius:14px;background:rgba(255,255,255,.035);border-color:var(--border);padding:12px 14px;color:#fff}input:focus,textarea:focus,select:focus{border-color:#814FB3;box-shadow:0 0 0 4px rgba(129,79,179,.18);outline:none}label{font-weight:600;font-size:13px}p,input,textarea{font-weight:400}
.sidebar{border-right:1px solid var(--border);background:radial-gradient(ellipse at 20% 0%,rgba(129,79,179,.1),transparent 55%),#050405;gap:22px}.sidebar .brand{font-size:24px;font-weight:800;letter-spacing:-1px;gap:16px}.fo-mark{width:36px;height:36px;margin-right:0}.brain-picker summary{border-radius:12px;background:rgba(255,255,255,.025);border:1px solid var(--border)}.brain-label,.side-caption{color:#B8A1D2}.nav button,.nav .nav-rag,.side-bottom button{min-height:44px;border-radius:12px}.nav button.active,.sidebar button.active{background:rgba(129,79,179,.2);color:#fff;box-shadow:inset 3px 0 #F2823C}.side-bottom{border-top:1px solid var(--border);padding-top:14px}
.topbar{border-bottom:1px solid var(--border);min-height:76px;padding:16px 24px}.topbar .search input{background:rgba(255,255,255,.03)}.note-tabbar{border-color:var(--border)}.workspace{background:radial-gradient(ellipse at 90% 0%,rgba(129,79,179,.045),transparent 45%),#050405}.page{padding:36px;max-width:1180px;margin:0 auto}.page-header{margin-bottom:28px}.page-header h1{font-size:32px}.page-header p{color:#B8A1D2}.settings-tabs{gap:8px;border-bottom:1px solid var(--border);padding-bottom:16px;margin-bottom:28px}.settings-tabs button{padding:11px 17px}.settings-block{background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:24px;margin-bottom:22px}.settings-block h2{font-size:20px}.settings-block p{color:#B8A1D2;max-width:78ch}.settings-block strong{color:#fff}.settings-block .device{border-color:var(--border)}
.note-head{padding:24px 28px;border-color:var(--border)}.note-head h1{font-size:28px;line-height:1.3}.note-actions button{font-size:12px}.preview,.markdown{line-height:1.8;font-size:16px}.preview h1,.markdown h1{font-size:34px;line-height:1.2}.preview h2,.markdown h2{font-size:25px;line-height:1.35;margin-top:1.8em}.preview blockquote,.markdown blockquote{border-left:3px solid #814FB3;color:#B8A1D2}.editor{line-height:1.75;font-weight:400}.reader-welcome{background:radial-gradient(ellipse at 50% 45%,rgba(129,79,179,.13),transparent 60%);gap:16px}.welcome-fo{width:128px;height:128px;border-radius:50%;box-shadow:0 12px 80px rgba(129,79,179,.18);margin-bottom:12px}.reader-welcome h1{font-size:clamp(26px,3vw,40px);margin-bottom:0}.reader-welcome p{color:#B8A1D2;max-width:42ch}.eyebrow{font-size:11px;letter-spacing:2px;color:#F2823C;font-weight:600}.empty-tree{color:#B8A1D2;line-height:1.7;padding:16px;font-size:13px}
.login-brand{background:radial-gradient(ellipse at 55% 80%,rgba(129,79,179,.32),transparent 60%),#050405;border-right:1px solid var(--border);padding:8vh 10%}.login-brand:after{width:200px;height:200px;bottom:13%;right:12%;box-shadow:0 0 95px rgba(129,79,179,.22)}.login-brand .brand{font-size:28px;font-weight:800;gap:20px}.login-brand h1{font-size:clamp(38px,4.4vw,68px);line-height:1.08;max-width:12ch;margin-top:70px}.login-brand em{font-style:normal;color:#F2823C}.login-brand p{color:#B8A1D2;text-shadow:none;max-width:33ch}.login-brand>small{font-size:10px;letter-spacing:2px;color:#B8A1D2}.login-form{background:radial-gradient(ellipse at 100% 100%,rgba(129,79,179,.07),transparent 70%),#050405}.login-form form{width:min(390px,100%);gap:24px}.login-form h1{font-size:30px;margin-bottom:12px}.login-form label{display:grid;gap:10px}.login-form input{height:50px}.login-form button.primary{padding:15px 24px}.login-form .error:empty{display:none}
.loading-screen{background:radial-gradient(ellipse at center,rgba(129,79,179,.12),transparent 55%),#050405!important}.loading-fo{width:80px;height:80px;border-radius:50%;margin-bottom:10px}.loading-track{background:rgba(184,161,210,.2)}.loading-track i{background:#F2823C}
dialog{background:#0d0b0f;color:#fff;border:1px solid rgba(184,161,210,.3);border-radius:22px;padding:28px;box-shadow:0 30px 120px rgba(5,4,5,.8);max-width:min(760px,calc(100vw - 32px))}dialog::backdrop{background:rgba(5,4,5,.76);backdrop-filter:blur(5px)}dialog h2{font-size:24px}dialog p{color:#B8A1D2}dialog footer{gap:12px;margin-top:24px}dialog header{border-color:var(--border)}.vault-entry{border:1px solid var(--border);border-radius:18px;padding:8px 16px 16px;background:rgba(129,79,179,.045)}.vault-row{width:100%;border:0;background:none;padding:12px 0 16px}.vault-row:hover{background:none}.vault-row span{font-size:12px}.vault-entry>[data-connect-existing]{font-size:12px}.vault-entry [data-vault-links] button{margin-top:10px;font-size:12px;color:#B8A1D2;border:0;background:none;padding-left:0}.vault-path{padding:12px 14px;border-radius:12px;background:rgba(184,161,210,.055)}.vault-actions{margin:24px 0}.vault-manager>p{max-width:56ch}
.knowledge-heading{border:0;padding:28px;border-radius:22px;background:radial-gradient(ellipse at 90% 50%,rgba(129,79,179,.2),transparent 65%),var(--surface)}.knowledge-heading h1{font-size:36px}.knowledge form{padding:24px;border:1px solid var(--border);border-radius:22px}.knowledge textarea{border-radius:14px;line-height:1.6}.knowledge-answer{padding:24px;border:1px solid var(--border);border-radius:22px;margin-bottom:18px;background:var(--surface)}.knowledge-hit{padding:22px;border:1px solid var(--border);border-radius:18px;margin-bottom:12px}.knowledge-hit p{margin:14px 0 0}.knowledge-source{text-align:left;border-radius:0}.knowledge-source:hover{background:none}.knowledge-selection{border-color:var(--border)}#knowledge-status{display:flex;align-items:center;gap:12px;min-height:28px;color:#B8A1D2}.knowledge-dialog{border-radius:22px}.error,[role=alert]{font-weight:600;color:#F2823C}#toast{border-radius:16px;background:#151019;border:1px solid #814FB3;color:#fff;padding:16px 22px;box-shadow:0 12px 44px rgba(5,4,5,.5)}
@media(max-width:1000px){.page{padding:24px}.topbar{padding:12px 16px}.top-actions{gap:6px}.top-actions button{padding:9px 12px;font-size:12px}}
@media(max-width:700px){.page{padding:22px 16px}.page-header h1{font-size:28px}.settings-block{padding:18px;border-radius:18px}.settings-tabs{overflow:auto;flex-wrap:nowrap}.settings-tabs button{white-space:nowrap;font-size:12px}.note-head{padding:20px 16px}.preview,.markdown{font-size:15px}.knowledge-heading{padding:20px;gap:14px}.knowledge-heading h1{font-size:27px}.knowledge form{padding:18px}.knowledge-hit{padding:18px}.knowledge-source{flex-direction:column;gap:8px}.knowledge-actions button{flex:1}.knowledge-actions a{font-size:12px}.login{display:flex;flex-direction:column}.login-brand{padding:32px 24px;border:0;border-bottom:1px solid var(--border)}.login-brand h1{font-size:38px;margin:28px 0 18px}.login-brand p{margin-bottom:24px}.login-brand>small{display:none}.login-form{padding:32px 24px 48px}.login-form h1{font-size:25px}.login-brand:after{display:block;width:86px;height:86px;bottom:32px;right:22px;opacity:.7}.login-brand p{max-width:24ch}.reader-welcome{padding:28px}.welcome-fo{width:96px;height:96px}dialog{padding:20px}.vault-actions{gap:8px}.vault-actions button{font-size:12px}.topbar{padding:10px 12px}.note-actions{gap:6px}.top-actions #new-note{font-size:0}}
.fo-mark{display:block;object-position:-9999px;width:36px;height:36px;background:#050405 url('/assets/fo-reposo.png') center 50%/106px 106px no-repeat;flex-shrink:0}.welcome-fo,.loading-fo,.knowledge-heading img{object-position:-9999px;background:#050405 url('/assets/fo-reposo.png') center 50%/300% 300% no-repeat}.login-brand:after{background-size:300% 300%;background-position:center 50%}
.note-head{align-items:flex-start;gap:24px}.note-head>div:first-child{flex:1;min-width:0}.note-head h1{overflow-wrap:anywhere}.note-actions{flex:0 0 auto;align-items:center;gap:8px;max-width:420px}.note-more{position:relative}.note-more summary{cursor:pointer;list-style:none;border:1px solid var(--border);border-radius:12px;padding:9px 13px;font-size:12px;font-weight:600;white-space:nowrap}.note-more summary::-webkit-details-marker{display:none}.note-more summary span{margin-left:12px;color:#B8A1D2}.note-more-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:35;display:grid;gap:5px;width:260px;padding:12px;border:1px solid #814FB3;border-radius:16px;background:#100c14;box-shadow:0 18px 60px rgba(5,4,5,.75)}.note-more-menu button{text-align:left;padding:12px;border:0;background:transparent}.note-more-menu button:hover{background:rgba(129,79,179,.2)}.note-more-menu button.danger{border-top:1px solid var(--border);border-radius:0;margin-top:5px}.context h3{font-size:12px;color:#B8A1D2;letter-spacing:.02em}.context p{font-size:12px;line-height:1.7}
@media(max-width:1100px){.note-head{flex-direction:column;gap:18px}.note-actions{max-width:100%;width:100%;justify-content:flex-start}.note-actions #save{margin-left:auto}}
.graph-mode{background:#050405;border-color:var(--border);padding:12px 24px;gap:8px}.graph-mode button[aria-pressed=true]{background:#814FB3;border-color:#814FB3;color:#fff}.graph-toolbar{background:#050405;border-color:var(--border);padding:18px 24px;gap:10px}.graph-toolbar h1{font-size:23px;font-weight:800}.graph-toolbar button,.graph-toolbar select{font-size:12px;border-radius:12px}.graph-toolbar [role=status]{color:#B8A1D2}.graph-surface,.graph3d-surface{background:radial-gradient(ellipse at center,rgba(129,79,179,.065),transparent 65%),#050405}.graph-controls{background:rgba(13,10,16,.96);border:1px solid var(--border);border-radius:18px;box-shadow:0 14px 45px rgba(5,4,5,.35);padding:18px;color:#fff}.graph-controls details{border-color:var(--border)}.graph-controls summary{font-weight:600;color:#fff}.graph-controls small,.graph-controls label{color:#B8A1D2}.graph-controls input:not([type=range]):not([type=checkbox]):not([type=color]),.graph-controls select{background:rgba(255,255,255,.035);border-radius:10px;color:#fff;border-color:var(--border)}.graph-controls input{accent-color:#814FB3}.graph-bottom{background:rgba(5,4,5,.92);color:#B8A1D2;border-color:var(--border)}.graph-tooltip,.graph-menu{background:#100c14;color:#fff;border:1px solid #814FB3;border-radius:12px;font-family:Lexend,sans-serif}.graph-empty{position:absolute;inset:20% 300px 20% 20px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;text-align:center;pointer-events:none}.graph-empty[hidden]{display:none}.graph-empty strong{font-size:26px}.graph-empty span{max-width:34ch;line-height:1.7;color:#B8A1D2;font-size:14px}.page-header>button{align-self:flex-start}
@media(max-width:700px){.graph-mode{padding:10px 16px}.graph-mode .muted{font-size:10px}.graph-toolbar{padding:12px 16px;flex-wrap:wrap}.graph-toolbar h1{font-size:20px;width:100%}.graph-controls{max-width:calc(100% - 24px);max-height:65%;top:12px;right:12px}.graph-toolbar select{max-width:130px}.graph-empty{inset:25% 20px}.graph-bottom{font-size:11px;gap:8px}.graph-empty strong{font-size:22px}}
.workspace:has(>[data-graph-host]){display:flex;flex-direction:column;overflow:hidden}.graph-studio{height:auto;min-height:0;flex:1;color:#fff;background:#050405}.graph-toolbar{height:auto;min-height:68px}.graph-surface,.graph3d-surface{min-height:180px}.graph-toolbar h1{letter-spacing:-.025em}.graph-controls{max-height:calc(100% - 64px)}
.vault-progress{position:fixed;z-index:2000;bottom:24px;right:24px;max-width:calc(100vw - 32px);display:flex;align-items:center;gap:14px;padding:18px 22px;border:1px solid #814FB3;border-radius:18px;background:#100c14;box-shadow:0 16px 70px rgba(5,4,5,.65);font-size:14px;pointer-events:none}.vault-progress small{display:block;font-size:11px;line-height:1.6;margin-top:5px}