:root {
  font-family:
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif;
  color: #37352f;
  background: #fff;
  font-size: 14px;
  font-synthesis: none;
}
.ui-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
.ui-icon svg {
  width: 100%;
  height: 100%;
}
.emoji {
  font-family:
    "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-weight: 400;
}
.emoji-art {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.12em;
  object-fit: contain;
}
.page-link .emoji-art {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
#iconButton .emoji-art {
  width: 1em;
  height: 1em;
}
#sidebar button {
  gap: 8px;
}
#sidebar .sidebar-add,
#sidebar .sidebar-bottom button {
  display: flex;
  align-items: center;
}
#sidebar nav button > .ui-icon {
  width: 18px;
  font-size: inherit;
}
.tree-toggle {
  padding: 3px 0 3px 4px;
  color: #9b9a97;
}
.tree-toggle .ui-icon {
  width: 12px;
  height: 12px;
}
.tree-toggle.expanded svg {
  transform: rotate(90deg);
}
#star.is-favorite svg {
  fill: #e7b251;
  stroke: #bb8a28;
}
#presence {
  font-size: 11px;
  color: #9b9a97;
  white-space: nowrap;
}
#presence.shared {
  color: #287b69;
  background: #eaf5f0;
  padding: 4px 8px;
  border-radius: 12px;
}
#saveStatus {
  display: flex;
  align-items: center;
  gap: 5px;
}
#saveStatus::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #a4b8ac;
}
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
  padding: 5px;
}
#menu.emoji-picker {
  width: 268px;
}
.emoji-grid button {
  font-size: 24px;
  text-align: center;
  padding: 5px;
  width: 38px;
  height: 38px;
}
.picker-heading {
  font-size: 12px;
  color: #9b9a97;
  padding: 9px 10px;
  border-bottom: 1px solid #eee;
}
.block.number {
  counter-increment: listitem;
}
#editor {
  counter-reset: listitem;
}
.block.number .marker {
  font-size: 0;
}
.block.number .marker::after {
  content: counter(listitem) ".";
  font-size: 16px;
}
.block-handle .ui-icon {
  width: 15px;
  height: 20px;
}
@media (max-width: 600px) {
  #presence {
    display: none;
  }
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input {
  font: inherit;
}
button {
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
  border-radius: 5px;
  padding: 6px 8px;
}
button:hover {
  background: #e9e9e7;
}
button:focus-visible {
  outline: 2px solid #2383e2;
  outline-offset: 2px;
}
input {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 9px;
  background: #fff;
  color: inherit;
}
a {
  color: inherit;
  text-decoration: underline;
}
button.primary {
  background: #2383e2;
  color: white;
  padding: 9px 16px;
  border: 1px solid #1674ce;
  font-weight: 500;
}
button.primary:hover {
  background: #1674ce;
}
[hidden] {
  display: none !important;
}
.media-figure { width:100%; margin:12px 0; min-width:0; }
.document-image,.document-video { display:block;max-width:100%;max-height:720px;margin:auto;border-radius:5px; }
.document-video {width:100%;background:#191919;}
.document-frame {display:block;width:100%;border:1px solid #e9e9e7;border-radius:6px;background:#f7f7f5;}
.media-actions {display:flex;align-items:center;gap:10px;font-size:12px;color:#9b9a97;padding:6px 0;}
.media-actions a {text-decoration:none;}
.media-caption {font-size:13px;text-align:center;color:#8b8b87;min-height:24px;}
.media-caption:empty:before {content:'Add a caption…';color:#bbb;}
.media-empty {padding:24px;background:#f7f7f5;color:#999;border-radius:5px;}
.media-dialog {width:min(760px,94vw);padding:22px;}
.media-dialog label {display:flex;flex-direction:column;gap:7px;margin:14px 0;font-size:13px;}
.media-dialog textarea {width:100%;height:280px;font:13px/1.5 Consolas,monospace;padding:12px;border:1px solid #ddd;border-radius:5px;}
.media-dialog p {font-size:12px;line-height:1.5;color:#888;}
.dialog-actions {display:flex;justify-content:flex-end;gap:8px;}
#uploadMedia {margin-left:18px;color:#999;font-size:12px;}
#shell {
  display: flex;
  min-height: 100vh;
}
#sidebar {
  width: 248px;
  position: fixed;
  inset: 0 auto 0 0;
  background: #f7f7f5;
  display: flex;
  flex-direction: column;
  padding: 10px 8px;
  color: #5e5e5b;
  border-right: 1px solid #eee;
  overflow-y: auto;
  z-index: 20;
}
.workspace-name {
  display: flex;
  gap: 9px;
  align-items: center;
  width: 100%;
  text-align: left;
  font-weight: 600;
  color: #37352f;
  padding: 7px;
}
.avatar {
  background: #e9e7e3;
  border-radius: 4px;
  width: 22px;
  height: 22px;
  text-align: center;
  padding-top: 2px;
  color: #777;
}
.muted {
  color: #aaa;
  margin-left: auto;
}
nav {
  margin: 12px 0 22px;
}
nav button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  font-weight: 500;
}
nav button > span {
  font-size: 20px;
  width: 20px;
  color: #8c8c86;
}
kbd {
  margin-left: auto;
  font-family: inherit;
  font-size: 11px;
  color: #aaa;
}
.section-label {
  font-size: 12px;
  font-weight: 600;
  color: #91918a;
  display: flex;
  align-items: center;
  padding: 6px 10px;
}
.section-label button {
  margin-left: auto;
  padding: 0 4px;
  font-size: 19px;
}
.page-row {
  display: flex;
  border-radius: 5px;
  align-items: center;
  min-height: 30px;
}
.page-row.active {
  background: #eaeae7;
  color: #37352f;
}
.page-row:hover {
  background: #eeeeeb;
}
.page-row .page-link {
  display: flex;
  gap: 8px;
  min-width: 0;
  flex: 1;
  text-align: left;
  align-items: center;
}
.page-link span:last-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-row .child-add {
  opacity: 0;
  padding: 2px 7px;
}
.page-row:hover .child-add {
  opacity: 1;
}
.sidebar-add {
  color: #91918a;
  text-align: left;
  margin: 7px 3px;
}
.sidebar-bottom {
  margin-top: auto;
  padding-top: 50px;
}
.sidebar-bottom button {
  display: block;
  text-align: left;
  width: 100%;
  padding: 8px 10px;
  color: #777;
}
.sidebar-foot {
  font-size: 11px;
  color: #aaa;
  padding: 12px 10px;
}
main {
  margin-left: 248px;
  flex: 1;
  min-width: 0;
}
header {
  height: 46px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  gap: 10px;
  position: sticky;
  top: 0;
  background: #fffffff2;
  z-index: 10;
}
#breadcrumb {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
#saveStatus {
  font-size: 11px;
  color: #aaa;
  white-space: nowrap;
}
#star {
  font-size: 22px;
}
#more {
  font-weight: bold;
  letter-spacing: 2px;
}
#mobileMenu {
  display: none;
}
#pageWrap {
  padding: 65px 7vw 130px;
}
article {
  max-width: 740px;
  margin: auto;
}
.page-tools {
  height: 70px;
  display: flex;
  align-items: center;
  margin-bottom: 13px;
}
#iconButton {
  font-size: 47px;
  padding: 0 2px;
}
#title {
  font-size: 40px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -1.2px;
  margin: 0 0 30px;
  outline: none;
  word-break: break-word;
}
#title:empty:before {
  content: attr(data-placeholder);
  color: #b9b9b4;
}
.block {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 3px 0;
  min-height: 32px;
}
.block-handle {
  position: absolute;
  right: 100%;
  top: 3px;
  margin-right: 6px;
  opacity: 0;
  color: #aaa;
  white-space: nowrap;
  padding: 3px 5px;
  cursor: grab;
}
.block:hover .block-handle,
.block:focus-within .block-handle {
  opacity: 1;
}
.editable {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  line-height: 1.65;
  outline: none;
  word-break: break-word;
  min-height: 26px;
  padding: 0 2px;
  white-space: pre-wrap;
}
.editable:empty:focus:before {
  content: "Type '/' for commands";
  color: #b0b0aa;
  pointer-events: none;
}
.block.h1 {
  margin-top: 28px;
}
.block.h2 {
  margin-top: 22px;
}
.block.h3 {
  margin-top: 15px;
}
.block.h1 .editable {
  font-size: 30px;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: -0.5px;
}
.block.h2 .editable {
  font-size: 24px;
  font-weight: 650;
  line-height: 1.4;
}
.block.h3 .editable {
  font-size: 19px;
  font-weight: 650;
}
.block.quote {
  border-left: 3px solid #37352f;
  padding-left: 14px;
  margin: 7px 0;
}
.block.callout {
  background: #f7f7f5;
  border-radius: 4px;
  padding: 15px;
  margin: 12px 0;
}
.block.code {
  background: #f7f6f3;
  padding: 16px 48px 16px 16px;
  border-radius: 4px;
  margin: 10px 0;
}
.block.code .editable {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 14px;
}
.code-copy {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 5px;
  border-radius: 4px;
  color: #8b8984;
}
.code-copy svg { width: 17px; height: 17px; }
.code-copy:hover, .code-copy:focus-visible { color: #37352f; background: #eae9e5; }
.marker {
  font-size: 17px;
  padding-top: 3px;
  min-width: 18px;
  text-align: center;
}
.block input[type="checkbox"] {
  margin-top: 8px;
  accent-color: #2383e2;
  width: 15px;
  height: 15px;
}
.block.done .editable {
  color: #999;
  text-decoration: line-through;
}
.block.divider {
  margin: 14px 0;
}
.block hr {
  width: 100%;
  border: 0;
  border-top: 1px solid #e8e8e5;
}
#bottomAdd {
  color: #bbb;
  display: block;
  text-align: left;
  width: 100%;
  padding: 12px 0;
}
#bottomAdd span {
  font-size: 13px;
  margin-left: 6px;
}
#bottomAdd:hover {
  background: none;
  color: #888;
}
.popover {
  position: fixed;
  z-index: 100;
  background: #fff;
  border: 1px solid #e9e9e7;
  box-shadow: 0 4px 20px #0002;
  border-radius: 7px;
  padding: 5px;
  min-width: 200px;
  max-height: 350px;
  overflow: auto;
}
.popover button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
}
.popover button.selected {
  background: #f1f1ef;
}
.popover small {
  display: block;
  font-size: 11px;
  color: #999;
  margin-top: 3px;
}
#format {
  display: flex;
  min-width: 0;
}
#format button {
  width: 32px;
}
dialog {
  border: 1px solid #e5e5e3;
  box-shadow: 0 12px 60px #0003;
  border-radius: 10px;
  padding: 0;
  width: min(600px, 92vw);
  color: #37352f;
}
dialog::backdrop {
  background: #0004;
}
#searchDialog {
  margin-top: 15vh;
}
.search-input {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid #eee;
}
.search-input > span {
  font-size: 25px;
  color: #888;
}
.search-input input {
  flex: 1;
  border: 0;
  outline: none;
  min-width: 0;
  font-size: 17px;
}
.search-input button {
  font-size: 11px;
  color: #aaa;
}
#searchResults {
  padding: 8px;
  min-height: 100px;
  max-height: 50vh;
  overflow: auto;
}
#searchResults button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px;
}
.empty {
  color: #999;
  padding: 24px;
  text-align: center;
}
dialog footer {
  padding: 12px 18px;
  font-size: 11px;
  color: #999;
  border-top: 1px solid #eee;
}
.dialog-heading {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid #eee;
}
.dialog-heading button {
  margin-left: auto;
}
#historyList {
  max-height: 60vh;
  overflow: auto;
  padding: 10px;
}
#historyList button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px;
}
#toast {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 20px;
  background: #37352f;
  color: #fff;
  border-radius: 7px;
  z-index: 200;
  max-width: 90vw;
}
#login {
  display: grid;
  place-items: center;
  min-height: 100vh;
}
#login form {
  width: min(360px, 90vw);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.brand-mark {
  font-family: Georgia, serif;
  font-size: 32px;
  font-weight: bold;
  border: 2px solid #37352f;
  border-radius: 6px;
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
}
#login h1 {
  font-size: 32px;
  letter-spacing: -1px;
  margin: 16px 0 0;
}
#login p {
  color: #888;
  line-height: 1.5;
  margin: 0 0 10px;
}
#login label {
  font-size: 12px;
  font-weight: 600;
}
#login small {
  color: #aaa;
  text-align: center;
  margin-top: 20px;
}
#login #loginError {
  color: #b34040;
  font-size: 13px;
}
#emptyState {
  text-align: center;
  padding-top: 70px;
}
#emptyState p {
  color: #999;
}
@media (max-width: 750px) {
  #sidebar {
    transform: translateX(-100%);
    transition: transform 0.15s;
    width: 248px;
    box-shadow: 3px 0 18px #0001;
  }
  body.sidebar-open #sidebar {
    transform: translateX(0);
  }
  main {
    margin-left: 0;
  }
  #mobileMenu {
    display: block;
  }
  header {
    padding: 0 10px;
    gap: 6px;
  }
  #saveStatus {
    font-size: 10px;
  }
  #pageWrap {
    padding: 40px 27px 100px;
  }
  #title {
    font-size: 34px;
  }
  .page-tools {
    height: 55px;
  }
  #iconButton {
    font-size: 40px;
  }
  .block-handle {
    margin-right: 0;
    padding: 2px;
    font-size: 10px;
  }
  #bottomAdd span {
    font-size: 11px;
  }
  .page-row .child-add {
    opacity: 1;
  }
}

/* Quiet inline links and compact Notion-style destination inspector. */
#editor .editable a {color:#787774;text-decoration:underline;text-decoration-color:#c9c8c5;text-underline-offset:3px;text-decoration-thickness:1px;cursor:pointer;border-radius:2px;transition:background .12s;}
#editor .editable a:hover {background:rgba(55,53,47,.07);}
#editor .editable a:focus-visible {outline:2px solid #a8c7e8;outline-offset:2px;}
.link-popover {position:fixed;z-index:1200;display:flex;align-items:center;gap:3px;max-width:calc(100vw - 16px);padding:4px 6px;background:#fff;border:1px solid #e9e9e7;border-radius:10px;box-shadow:0 3px 12px rgba(15,15,15,.07);font-size:12px;color:#787774;}
.link-popover[hidden] {display:none;}
.link-popover button,.link-destination {border:0;border-radius:4px;background:transparent;color:inherit;font:inherit;padding:4px 5px;cursor:pointer;line-height:18px;}
.link-popover button:hover,.link-destination:hover {background:#f1f1ef;}
.link-destination {display:flex;align-items:center;gap:5px;text-decoration:none;min-width:0;max-width:300px;}
.link-url {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.link-globe,.link-copy {flex-shrink:0;display:flex;align-items:center;}
.link-globe svg,.link-copy svg {width:14px;height:14px;display:block;}
.link-popover button {color:#37352f;white-space:nowrap;}
.link-edit-form {width:310px;max-width:calc(100vw - 36px);padding:7px;}
.link-edit-form label {display:block;font-size:12px;margin-bottom:9px;}
.link-edit-form input {display:block;box-sizing:border-box;width:100%;margin-top:5px;padding:7px 9px;border:1px solid #e3e3e0;border-radius:5px;font:14px system-ui;color:#37352f;background:#fafaf9;}
.link-edit-actions {display:flex;gap:4px;justify-content:flex-end;}
.link-edit-actions button:first-child {margin-right:auto;}
.link-edit-actions .link-save {background:#2383e2;color:white;}

/* Document-first shell, following the supplied Notion reference. */
:root {font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;color:#37352f;}
#sidebar {width:260px;background:#f8f7f6;padding:3px 8px;border-right:1px solid #f0efed;color:#5f5e5b;}
.workspace-name {font-size:14px;font-weight:500;padding:7px 0;height:32px;}
.avatar {width:20px;height:20px;font-size:13px;padding-top:1px;border-radius:3px;}
#sidebar nav {display:flex;align-items:center;justify-content:space-between;margin:12px 0 18px;gap:8px;}
#sidebar nav button {width:auto;font-weight:500;height:32px;}
#homeButton {background:#eeedeb;border-radius:20px;padding:6px 10px;}
#searchButton {margin-left:auto;color:#8c8b87;}
#sidebar .section-label {font-weight:400;font-size:12px;padding:5px 0 8px;color:#969590;}
.page-row {border-radius:6px;min-height:30px;}
.page-row .page-link {font-size:14px;font-weight:400;padding:5px 0;}
.page-row .ui-icon {color:#999892;}
.page-row.active {background:#eeedeb;}
.sidebar-add {font-size:13px;}
.sidebar-bottom {margin-top:20px;padding-top:8px;}
.sidebar-bottom button {padding:6px 0;font-size:14px;}
.sidebar-foot {display:none;}
#logout {margin-top:16px;color:#9b9a97;}
main {margin-left:260px;}
header {height:38px;padding:0 16px;gap:8px;}
header button {padding:3px;color:#969590;}
header .ui-icon {width:16px;height:16px;flex-basis:16px;}
#breadcrumb {display:flex;align-items:center;gap:7px;color:#787774;min-width:0;}
.crumb-parent {font:inherit;color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;}
.crumb-divider {color:#d3d2d0;}
.crumb-current {overflow:hidden;text-overflow:ellipsis;}
#editedTime {font-size:12px;color:#b1b0ac;white-space:nowrap;}
#privateInfo {display:flex;align-items:center;gap:4px;font-size:12px;}
#saveStatus {font-size:10px;}
#presence:not(.shared) {display:none;}
#pageWrap {padding:78px 72px 130px;}
article {max-width:708px;}
.page-tools {margin-bottom:12px;}
.plain-page .page-tools {height:24px;margin-bottom:13px;gap:12px;}
.plain-page #iconButton {font-size:12px;display:flex;align-items:center;gap:5px;color:#aaa9a5;}
.plain-page #iconButton .ui-icon {width:14px;height:14px;flex-basis:14px;}
.plain-page .page-tools button {opacity:0;transition:opacity .15s;}
.plain-page article:hover .page-tools button,.plain-page .page-tools:focus-within button {opacity:1;}
#uploadMedia {font-size:12px;color:#aaa9a5;}
#title {font-size:40px;font-weight:700;letter-spacing:-.9px;line-height:1.2;margin-bottom:24px;}
.editable {font-size:16px;line-height:1.5;padding:0;}
.block {min-height:30px;padding:3px 0;}
.block.h1 {margin-top:30px;}.block.h2 {margin-top:28px;}.block.h3 {margin-top:24px;}
.block.h2 .editable {font-size:24px;font-weight:600;line-height:1.3;}
.block.h3 .editable {font-size:20px;font-weight:600;line-height:1.3;}
.block-handle {color:#c4c3bf;}
#bottomAdd {font-size:14px;color:#b8b7b3;opacity:0;}article:hover #bottomAdd,#bottomAdd:focus {opacity:1;}
#pageOutline {position:fixed;right:18px;top:165px;margin:0;z-index:9;display:flex;flex-direction:column;gap:2px;}
#pageOutline[hidden] {display:none;}
#pageOutline button {width:26px;height:12px;padding:5px 6px;}
.outline-tick span {display:block;height:2px;width:12px;background:#e3e2df;border-radius:2px;}
.outline-tick:hover span {background:#787774;}
.workspace-info {width:min(430px,90vw);}.workspace-info p {line-height:1.65;color:#787774;}
@media(max-width:1000px){#editedTime {display:none;}#pageWrap {padding-left:44px;padding-right:44px;}#pageOutline {right:8px;}}
@media(max-width:750px){main{margin-left:0;}#sidebar{width:260px;}header{height:44px;padding:0 10px;gap:6px;}#privateInfo{font-size:0;gap:0;}#pageWrap{padding:40px 28px 100px;}#title{font-size:32px;}#pageOutline{display:none;}#saveStatus{max-width:70px;overflow:hidden;white-space:nowrap;}.plain-page .page-tools button{opacity:1;}#bottomAdd{opacity:1;}}