starmark 1.0.0

package/public/styles.css

@@ -0,0 +1,1564 @@
+:root {
+  color-scheme: light dark;
+  --bg: #0f1117;
+  --surface: #171a22;
+  --border: #2a3040;
+  --text: #e8ecf4;
+  --muted: #9aa4b8;
+  --accent: #6ea8ff;
+  --accent-hover: #8cbcff;
+  --colon-block: #8cbcff;
+  --code: #7ee787;
+  --blockquote: #8cbcff;
+  --list: #c5ced9;
+  --md: #7ee787;
+  --mdx: #56d364;
+  --page-gradient: radial-gradient(circle at top, #1a2030 0%, var(--bg) 55%);
+  --font-mono:
+    "SF Mono",
+    ui-monospace,
+    "Cascadia Code",
+    "Source Code Pro",
+    Menlo,
+    Monaco,
+    Consolas,
+    monospace;
+  font-family:
+    "SF Pro Text",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--bg);
+  color: var(--text);
+}
+
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  background: var(--page-gradient);
+  pointer-events: none;
+}
+
+.top-bar {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  display: flex;
+  justify-content: center;
+  padding: 0.85rem 0;
+  border-bottom: 1px solid rgb(255 255 255 / 8%);
+  background: var(--page-gradient);
+  background-attachment: fixed;
+  box-shadow: 0 4px 16px -4px rgb(0 0 0 / 28%);
+}
+
+.top-bar-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 90%;
+  max-width: 1200px;
+}
+
+.top-bar-title {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  letter-spacing: -0.03em;
+}
+
+.top-bar-btn {
+  padding: 0.45rem 0.85rem;
+  font-size: 0.9rem;
+}
+
+.container {
+  width: 90%;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 1.5rem 0 4rem;
+}
+
+.projects-dialog {
+  width: min(520px, calc(100vw - 2rem));
+  max-height: calc(100vh - 2rem);
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  background: var(--surface);
+  color: var(--text);
+  overflow: auto;
+}
+
+.projects-dialog::backdrop {
+  background: rgb(0 0 0 / 55%);
+}
+
+.dialog-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1.1rem 1.25rem 0;
+}
+
+.dialog-header h2 {
+  margin: 0;
+  font-size: 1.15rem;
+}
+
+.dialog-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--muted);
+  font-size: 1.4rem;
+  line-height: 1;
+}
+
+.dialog-close:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--border) 60%, transparent);
+  border-color: transparent;
+  color: var(--text);
+}
+
+.projects {
+  margin: 0 1.25rem 1.25rem;
+}
+
+.projects-heading {
+  margin: 0 0 0.65rem;
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.project-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.project-list li + li {
+  border-top: 1px solid var(--border);
+}
+
+.project-item {
+  display: grid;
+  gap: 0.2rem;
+  width: 100%;
+  padding: 0.85rem 1rem;
+  border: none;
+  border-radius: 0;
+  background: var(--surface);
+  text-align: left;
+}
+
+.project-item:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
+}
+
+.project-name {
+  font-weight: 600;
+}
+
+.project-path {
+  color: var(--muted);
+  font-size: 0.85rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.picker {
+  margin: 0.75rem 1.25rem 1.25rem;
+  padding: 1.25rem;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--bg) 92%, white 8%);
+}
+
+.picker label {
+  display: block;
+  margin-bottom: 0.65rem;
+  font-size: 0.9rem;
+  color: var(--muted);
+}
+
+.picker-row {
+  display: grid;
+  grid-template-columns: 1fr auto auto;
+  gap: 0.65rem;
+}
+
+input[type="text"],
+input[type="search"] {
+  width: 100%;
+  padding: 0.75rem 0.85rem;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg);
+  color: var(--text);
+  font: inherit;
+}
+
+button {
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--surface);
+  color: var(--text);
+  font: inherit;
+  cursor: pointer;
+}
+
+button:hover:not(:disabled) {
+  border-color: var(--accent);
+}
+
+button.primary {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #08111f;
+  font-weight: 600;
+}
+
+button.primary:hover:not(:disabled) {
+  background: var(--accent-hover);
+  border-color: var(--accent-hover);
+}
+
+button:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.scan-info {
+  margin: 0.85rem 0 0;
+  font-size: 0.9rem;
+  color: var(--muted);
+}
+
+.results {
+  margin-top: 0;
+}
+
+.results-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.75rem 0;
+  margin-bottom: 0.75rem;
+}
+
+.results-header h2 {
+  margin: 0;
+  font-size: 1.1rem;
+}
+
+.results-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.results-icon-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--muted);
+}
+
+.results-icon-btn:hover:not(:disabled) {
+  border-color: var(--border);
+  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
+  color: var(--accent);
+}
+
+.results-icon-btn svg {
+  display: block;
+  flex-shrink: 0;
+}
+
+.file-count {
+  color: var(--muted);
+  font-size: 0.9rem;
+}
+
+.search-box {
+  margin-bottom: 0.75rem;
+}
+
+.empty-state {
+  margin: 0;
+  padding: 1.25rem;
+  border: 1px dashed var(--border);
+  border-radius: 10px;
+  color: var(--muted);
+}
+
+.file-list,
+.file-tree {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  overflow: hidden;
+  --tree-indent: 1.15rem;
+  --tree-count-num-width: 3ch;
+  --tree-count-col-width: calc(1rem + 0.2rem + var(--tree-count-num-width));
+  --tree-actions-col-width: 11rem;
+  --tree-badge-width: 8rem;
+}
+
+.file-tree > .tree-folder > details > summary {
+  border-top: none;
+}
+
+.tree-folder details {
+  display: block;
+}
+
+.tree-folder-header {
+  display: grid;
+  grid-template-columns:
+    minmax(0, 1fr)
+    var(--tree-count-col-width)
+    var(--tree-count-col-width)
+    var(--tree-actions-col-width);
+  align-items: center;
+  gap: 0.65rem;
+  padding: 0.75rem 1rem;
+  border-top: 1px solid var(--border);
+  background: var(--surface);
+  cursor: pointer;
+  list-style: none;
+}
+
+.tree-folder-main,
+.tree-file-main {
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+  min-width: 0;
+  padding-left: calc(1rem + var(--depth, 0) * var(--tree-indent));
+}
+
+.tree-folder-prefix {
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+  min-width: 0;
+  flex-shrink: 0;
+}
+
+.tree-folder-header:hover {
+  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
+}
+
+.tree-folder-header::-webkit-details-marker {
+  display: none;
+}
+
+.tree-folder-chevron {
+  width: 0.45rem;
+  height: 0.45rem;
+  border-right: 2px solid var(--muted);
+  border-bottom: 2px solid var(--muted);
+  transform: rotate(-45deg);
+  transition: transform 0.15s ease;
+  flex-shrink: 0;
+}
+
+details[open] > .tree-folder-header .tree-folder-chevron {
+  transform: rotate(45deg);
+}
+
+.tree-folder-name,
+.tree-file .file-name {
+  min-width: 0;
+  flex: 1;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tree-folder-count-col {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.2rem;
+  color: var(--muted);
+  font-size: 0.8rem;
+}
+
+.tree-folder-count-col svg {
+  display: block;
+  flex-shrink: 0;
+}
+
+.tree-folder-count-col.is-empty {
+  opacity: 0.2;
+}
+
+.tree-folder-count-value {
+  display: block;
+  width: var(--tree-count-num-width);
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+
+.tree-folder-header .file-actions,
+.tree-file .file-actions {
+  margin-left: 0;
+  justify-self: end;
+}
+
+.tree-children {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.tree-file {
+  display: grid;
+  grid-template-columns:
+    minmax(0, 1fr)
+    var(--tree-count-col-width)
+    var(--tree-count-col-width)
+    var(--tree-actions-col-width);
+  align-items: center;
+  gap: 0.65rem;
+  padding: 0.65rem 1rem;
+  border-top: 1px solid var(--border);
+  background: color-mix(in srgb, var(--surface) 92%, var(--bg) 8%);
+  cursor: pointer;
+}
+
+.tree-file:hover {
+  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
+}
+
+.file-list li {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  gap: 0.85rem;
+  align-items: center;
+  padding: 0.85rem 1rem;
+  border-top: 1px solid var(--border);
+  background: var(--surface);
+}
+
+.badges {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.file-list li:first-child {
+  border-top: none;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  min-width: 2.75rem;
+  padding: 0.15rem 0.45rem;
+  border-radius: 999px;
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+}
+
+.badge svg {
+  display: block;
+  flex-shrink: 0;
+}
+
+.file-tree .badge {
+  box-sizing: border-box;
+  width: var(--tree-badge-width);
+  min-width: var(--tree-badge-width);
+  justify-content: center;
+  white-space: nowrap;
+}
+
+.badge.md {
+  background: color-mix(in srgb, var(--md) 18%, transparent);
+  color: var(--md);
+}
+
+.badge.mdx {
+  background: color-mix(in srgb, var(--mdx) 18%, transparent);
+  color: var(--mdx);
+}
+
+.badge.source.content {
+  background: color-mix(in srgb, #79c0ff 18%, transparent);
+  color: #79c0ff;
+}
+
+.badge.source.pages {
+  background: color-mix(in srgb, #79c0ff 18%, transparent);
+  color: #79c0ff;
+}
+
+.badge.source.project {
+  background: color-mix(in srgb, var(--muted) 18%, transparent);
+  color: var(--muted);
+}
+
+.badge.folder {
+  background: color-mix(in srgb, #79c0ff 18%, transparent);
+  color: #79c0ff;
+}
+
+.badge.page {
+  background: color-mix(in srgb, #f2cc60 18%, transparent);
+  color: #f2cc60;
+}
+
+.file-meta {
+  min-width: 0;
+}
+
+.file-name {
+  font-weight: 600;
+}
+
+.file-path {
+  margin-top: 0.15rem;
+  color: var(--muted);
+  font-size: 0.85rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.error {
+  margin-top: 0.85rem;
+  color: #ff8b8b;
+  font-size: 0.9rem;
+}
+
+.file-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+.tree-action-btn,
+.edit-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--muted);
+}
+
+.tree-action-btn:hover:not(:disabled),
+.edit-btn:hover:not(:disabled) {
+  border-color: var(--border);
+  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
+  color: var(--accent);
+}
+
+.tree-folder-header .tree-action-btn {
+  cursor: pointer;
+}
+
+.tree-action-btn svg,
+.edit-btn svg {
+  display: block;
+  flex-shrink: 0;
+}
+
+.tree-action-btn.move-btn:disabled,
+.edit-btn.move-btn:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.tree-action-btn.delete-btn:hover:not(:disabled),
+.edit-btn.delete-btn:hover:not(:disabled) {
+  border-color: color-mix(in srgb, #ff8b8b 45%, var(--border));
+  background: color-mix(in srgb, #ff8b8b 12%, var(--surface));
+  color: #ff8b8b;
+}
+
+.edit-view {
+  margin-top: 0;
+}
+
+.edit-sticky-bar {
+  position: sticky;
+  top: var(--top-bar-height, 3.6rem);
+  z-index: 9;
+  margin-bottom: 0.75rem;
+  background: var(--bg);
+}
+
+.edit-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  padding: 0.75rem 0 0;
+}
+
+.edit-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0;
+  border-bottom: 1px solid var(--border);
+}
+
+.toolbar-group {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.toolbar-separator {
+  width: 1px;
+  height: 1.25rem;
+  background: var(--border);
+  flex-shrink: 0;
+}
+
+.toolbar-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--muted);
+}
+
+.toolbar-btn svg {
+  display: block;
+  flex-shrink: 0;
+}
+
+.toolbar-btn:hover:not(:disabled) {
+  border-color: var(--border);
+  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
+  color: var(--accent);
+}
+
+.edit-back-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.45rem 0.75rem;
+  font-size: 0.9rem;
+  flex-shrink: 0;
+}
+
+.edit-back-btn svg {
+  display: block;
+  flex-shrink: 0;
+}
+
+.edit-file-info {
+  min-width: 0;
+  flex: 1;
+}
+
+.edit-save-btn {
+  flex-shrink: 0;
+  align-self: center;
+  padding: 0.45rem 0.9rem;
+  font-size: 0.9rem;
+}
+
+.edit-save-btn.is-error {
+  background: color-mix(in srgb, #c0392b 18%, var(--surface));
+  border-color: #c0392b;
+  color: #c0392b;
+}
+
+.edit-file-name {
+  margin: 0;
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+
+.edit-file-path {
+  margin: 0.2rem 0 0;
+  color: var(--muted);
+  font-size: 0.85rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.frontmatter-panel {
+  margin-bottom: 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: var(--surface);
+  overflow: hidden;
+}
+
+.frontmatter-panel-header {
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+  padding: 0.65rem 1rem;
+  cursor: pointer;
+  list-style: none;
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: var(--muted);
+  user-select: none;
+}
+
+.frontmatter-panel-header:hover {
+  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
+  color: var(--text);
+}
+
+.frontmatter-panel-header::-webkit-details-marker {
+  display: none;
+}
+
+.frontmatter-panel-header::before {
+  content: "";
+  width: 0.45rem;
+  height: 0.45rem;
+  border-right: 2px solid var(--muted);
+  border-bottom: 2px solid var(--muted);
+  transform: rotate(-45deg);
+  transition: transform 0.15s ease;
+  flex-shrink: 0;
+}
+
+.frontmatter-panel[open] > .frontmatter-panel-header::before {
+  transform: rotate(45deg);
+}
+
+.frontmatter-editor {
+  border-top: 1px solid var(--border);
+}
+
+.frontmatter-form {
+  padding: 0.85rem 1rem 1rem;
+}
+
+.frontmatter-form-error {
+  margin-bottom: 0.75rem;
+  padding: 0.65rem 0.75rem;
+  border: 1px solid color-mix(in srgb, #ff8b8b 45%, var(--border));
+  border-radius: 8px;
+  background: color-mix(in srgb, #ff8b8b 10%, var(--surface));
+  color: #ffb4b4;
+  font-size: 0.85rem;
+  line-height: 1.45;
+}
+
+.frontmatter-content,
+.frontmatter-key-input,
+.frontmatter-value-input,
+.frontmatter-type-select {
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0;
+  padding: 0.55rem 0.65rem;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg);
+  color: var(--text);
+  font: inherit;
+  font-size: 0.85rem;
+  line-height: 1.4;
+  outline: none;
+}
+
+.frontmatter-content {
+  display: block;
+  min-height: 8rem;
+  font-family: var(--font-mono);
+  resize: vertical;
+}
+
+.frontmatter-content:focus,
+.frontmatter-key-input:focus,
+.frontmatter-value-input:focus,
+.frontmatter-type-select:focus {
+  border-color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 4%, var(--bg));
+}
+
+.frontmatter-field,
+.frontmatter-array-entry {
+  margin-bottom: 0.5rem;
+}
+
+.frontmatter-row,
+.frontmatter-array-item {
+  display: grid;
+  grid-template-columns: minmax(7rem, 0.9fr) 6.5rem minmax(0, 1.6fr) 2rem;
+  gap: 0.5rem;
+  align-items: start;
+}
+
+.frontmatter-row--compact,
+.frontmatter-array-item.frontmatter-row--compact {
+  grid-template-columns: minmax(7rem, 0.9fr) 6.5rem 2rem;
+}
+
+.frontmatter-array-item {
+  grid-template-columns: 1rem 6.5rem minmax(0, 1.6fr) 2rem;
+}
+
+.frontmatter-array-item.frontmatter-row--compact {
+  grid-template-columns: 1rem 6.5rem 2rem;
+}
+
+.frontmatter-children {
+  margin-top: 0.35rem;
+  margin-left: 0.75rem;
+  padding-left: 0.85rem;
+  border-left: 2px solid color-mix(in srgb, var(--accent) 25%, var(--border));
+}
+
+.frontmatter-array-marker {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2.15rem;
+  color: var(--muted);
+  font-weight: 600;
+}
+
+.frontmatter-value-host {
+  min-width: 0;
+}
+
+.frontmatter-scalar {
+  width: 100%;
+}
+
+.frontmatter-boolean-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  min-height: 2.15rem;
+  color: var(--muted);
+  font-size: 0.85rem;
+}
+
+.frontmatter-boolean-input {
+  width: 1rem;
+  height: 1rem;
+  margin: 0;
+  accent-color: var(--accent);
+}
+
+.frontmatter-nested,
+.frontmatter-array {
+  padding-top: 0.15rem;
+}
+
+.frontmatter-empty {
+  margin: 0 0 0.5rem;
+  color: var(--muted);
+  font-size: 0.82rem;
+  font-style: italic;
+}
+
+.frontmatter-form-footer {
+  margin-top: 0.35rem;
+}
+
+.frontmatter-add-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.45rem 0.7rem;
+  border: 1px dashed color-mix(in srgb, var(--accent) 35%, var(--border));
+  border-radius: 8px;
+  background: transparent;
+  color: var(--muted);
+  font-size: 0.82rem;
+}
+
+.frontmatter-add-btn:hover:not(:disabled) {
+  border-color: var(--accent);
+  color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
+}
+
+.frontmatter-add-btn svg {
+  display: block;
+  flex-shrink: 0;
+}
+
+.frontmatter-remove-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2.15rem;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--muted);
+}
+
+.frontmatter-remove-btn:hover:not(:disabled) {
+  border-color: color-mix(in srgb, #ff8b8b 45%, var(--border));
+  background: color-mix(in srgb, #ff8b8b 12%, var(--surface));
+  color: #ff8b8b;
+}
+
+.frontmatter-remove-btn svg {
+  display: block;
+  flex-shrink: 0;
+}
+
+.markdown-editor {
+  min-height: calc(100vh - 12rem);
+  padding: 1.25rem;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: var(--surface);
+  font-family: var(--font-mono);
+  font-size: 1rem;
+  line-height: 1.6;
+  word-break: break-word;
+  outline: none;
+}
+
+.markdown-editor > p,
+.markdown-editor > h1,
+.markdown-editor > h2,
+.markdown-editor > h3,
+.markdown-editor > h4,
+.markdown-editor > h5,
+.markdown-editor > h6 {
+  margin: 0;
+  white-space: pre-wrap;
+}
+
+.markdown-editor > h1:not(:first-child),
+.markdown-editor > h2:not(:first-child),
+.markdown-editor > h3:not(:first-child),
+.markdown-editor > h4:not(:first-child),
+.markdown-editor > h5:not(:first-child),
+.markdown-editor > h6:not(:first-child) {
+  margin-top: 0.65em;
+}
+
+.markdown-editor > h1 {
+  font-size: 1.75rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+
+.markdown-editor > h2 {
+  font-size: 1.45rem;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+}
+
+.markdown-editor > h3 {
+  font-size: 1.2rem;
+  font-weight: 600;
+}
+
+.markdown-editor > h4 {
+  font-size: 1.05rem;
+  font-weight: 600;
+}
+
+.markdown-editor > h5 {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--muted);
+}
+
+.markdown-editor > h6 {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.markdown-editor > .is-code-block {
+  color: var(--code);
+}
+
+.markdown-editor > .is-blockquote {
+  color: var(--blockquote);
+}
+
+.markdown-editor > .is-list {
+  color: var(--list);
+}
+
+.markdown-editor > .is-colon-block-start,
+.markdown-editor > .is-colon-block-end {
+  color: var(--colon-color);
+  padding-left: 0.65rem;
+  border-left: var(--colon-border-width, 3px) solid var(--colon-accent);
+  background: color-mix(in srgb, var(--colon-accent) var(--colon-bg-strength, 14%), transparent);
+}
+
+.markdown-editor > .is-colon-inline {
+  color: var(--colon-color, var(--colon-block));
+}
+
+.markdown-editor > .is-colon-inline.colon-depth-1 {
+  --colon-color: color-mix(in srgb, var(--colon-block) 42%, var(--text));
+}
+
+.markdown-editor > .is-colon-inline.colon-depth-2 {
+  --colon-color: color-mix(in srgb, var(--colon-block) 58%, var(--text));
+}
+
+.markdown-editor > .is-colon-block-start.colon-depth-3,
+.markdown-editor > .is-colon-block-end.colon-depth-3 {
+  --colon-color: #79aef0;
+  --colon-accent: #4d86dc;
+  --colon-border-width: 3px;
+  --colon-bg-strength: 12%;
+}
+
+.markdown-editor > .is-colon-block-start.colon-depth-4,
+.markdown-editor > .is-colon-block-end.colon-depth-4 {
+  --colon-color: #b8d8ff;
+  --colon-accent: #79b4ff;
+  --colon-border-width: 4px;
+  --colon-bg-strength: 20%;
+}
+
+.markdown-editor > .is-colon-block-start.colon-depth-5,
+.markdown-editor > .is-colon-block-end.colon-depth-5 {
+  --colon-color: #d2e8ff;
+  --colon-accent: #96c8ff;
+  --colon-border-width: 5px;
+  --colon-bg-strength: 28%;
+}
+
+.markdown-editor > .is-colon-block-start.colon-depth-6,
+.markdown-editor > .is-colon-block-end.colon-depth-6 {
+  --colon-color: #edf5ff;
+  --colon-accent: #b8daff;
+  --colon-border-width: 6px;
+  --colon-bg-strength: 36%;
+}
+
+.markdown-editor:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
+}
+
+.markdown-editor.is-empty::before {
+  content: "Start writing…";
+  color: var(--muted);
+  pointer-events: none;
+}
+
+.editor-image-preview {
+  display: inline-block;
+  vertical-align: middle;
+  width: 0;
+  height: 1em;
+  margin-left: 0.35em;
+  position: relative;
+  cursor: zoom-in;
+}
+
+.editor-image-preview::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 2.5rem;
+  height: 1.875rem;
+  border-radius: 4px;
+  border: 1px solid var(--border);
+  background-color: color-mix(in srgb, var(--border) 30%, transparent);
+  background-image: var(--editor-image-url);
+  background-size: cover;
+  background-position: center;
+  box-shadow: 0 1px 4px rgb(0 0 0 / 25%);
+  transition:
+    transform 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.editor-image-preview:hover::after,
+.editor-image-preview:focus-visible::after {
+  transform: translateY(-50%) scale(1.08);
+  box-shadow: 0 2px 8px rgb(0 0 0 / 35%);
+}
+
+.image-lightbox {
+  position: relative;
+  width: min(920px, calc(100vw - 2rem));
+  max-height: calc(100vh - 2rem);
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  background: var(--surface);
+  color: var(--text);
+  overflow: hidden;
+}
+
+.image-lightbox::backdrop {
+  background: rgb(0 0 0 / 72%);
+}
+
+.image-lightbox-close {
+  position: absolute;
+  top: 0.65rem;
+  right: 0.65rem;
+  z-index: 1;
+  border-radius: 999px;
+  background: rgb(0 0 0 / 45%);
+  color: #fff;
+}
+
+.image-lightbox-close:hover {
+  background: rgb(0 0 0 / 62%);
+}
+
+.image-lightbox-figure {
+  margin: 0;
+  display: grid;
+  gap: 0.75rem;
+  padding: 1rem;
+}
+
+.image-lightbox-img {
+  display: block;
+  width: 100%;
+  max-height: calc(100vh - 8rem);
+  object-fit: contain;
+  border-radius: 8px;
+  background: var(--bg);
+}
+
+.image-lightbox-caption {
+  margin: 0;
+  padding: 0 0.25rem;
+  color: var(--muted);
+  font-size: 0.9rem;
+  text-align: center;
+}
+
+.image-lightbox-caption[hidden] {
+  display: none;
+}
+
+.link-dialog {
+  width: min(420px, calc(100vw - 2rem));
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  background: var(--surface);
+  color: var(--text);
+}
+
+.link-dialog::backdrop {
+  background: rgb(0 0 0 / 55%);
+}
+
+.link-form {
+  margin: 0.75rem 1.25rem 1.25rem;
+  display: grid;
+  gap: 0.85rem;
+}
+
+.link-field label {
+  display: block;
+  margin-bottom: 0.4rem;
+  font-size: 0.9rem;
+  color: var(--muted);
+}
+
+.link-form-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 0.15rem;
+}
+
+.new-item-dialog {
+  width: min(420px, calc(100vw - 2rem));
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  background: var(--surface);
+  color: var(--text);
+}
+
+.new-item-dialog::backdrop {
+  background: rgb(0 0 0 / 55%);
+}
+
+.new-item-form {
+  margin: 0.75rem 1.25rem 1.25rem;
+  display: grid;
+  gap: 0.85rem;
+}
+
+.new-item-field label {
+  display: block;
+  margin-bottom: 0.4rem;
+  font-size: 0.9rem;
+  color: var(--muted);
+}
+
+.new-item-hint {
+  margin: 0.45rem 0 0;
+  font-size: 0.85rem;
+  color: var(--muted);
+}
+
+.new-item-error {
+  margin: 0.45rem 0 0;
+  font-size: 0.85rem;
+  color: #ff8b8b;
+}
+
+.new-item-error[hidden] {
+  display: none;
+}
+
+.new-item-form-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 0.15rem;
+}
+
+.confirm-dialog {
+  width: min(420px, calc(100vw - 2rem));
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  background: var(--surface);
+  color: var(--text);
+}
+
+.confirm-dialog::backdrop {
+  background: rgb(0 0 0 / 55%);
+}
+
+.confirm-dialog-body {
+  margin: 0.75rem 1.25rem 1.25rem;
+  display: grid;
+  gap: 0.85rem;
+}
+
+.confirm-delete-message {
+  margin: 0;
+  line-height: 1.5;
+}
+
+.confirm-delete-error {
+  margin: 0;
+  font-size: 0.85rem;
+  color: #ff8b8b;
+}
+
+.confirm-delete-error[hidden] {
+  display: none;
+}
+
+.confirm-dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-top: 0.15rem;
+}
+
+button.destructive {
+  background: #c93c3c;
+  border-color: #c93c3c;
+  color: #fff;
+  font-weight: 600;
+}
+
+button.destructive:hover:not(:disabled) {
+  background: #e05252;
+  border-color: #e05252;
+}
+
+.media-dialog {
+  width: min(960px, calc(100vw - 2rem));
+  max-height: calc(100vh - 2rem);
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  background: var(--surface);
+  color: var(--text);
+  overflow: auto;
+}
+
+.media-dialog::backdrop {
+  background: rgb(0 0 0 / 55%);
+}
+
+.media-browser {
+  margin: 0.75rem 1.25rem 1.25rem;
+}
+
+.image-form {
+  margin: 0.75rem 1.25rem 1.25rem;
+  display: grid;
+  gap: 0.85rem;
+}
+
+.image-selected-name {
+  margin: 0;
+  font-size: 0.9rem;
+  color: var(--muted);
+  word-break: break-all;
+}
+
+.image-checkbox-field {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.95rem;
+  color: var(--text);
+  cursor: pointer;
+}
+
+.image-checkbox-field input {
+  width: 1rem;
+  height: 1rem;
+  margin: 0;
+  accent-color: var(--accent);
+}
+
+.image-form-actions {
+  justify-content: space-between;
+}
+
+.media-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 0.85rem;
+}
+
+.media-search {
+  margin-bottom: 0.85rem;
+}
+
+.media-search-input {
+  padding: 0.55rem 0.75rem;
+  font-size: 0.9rem;
+}
+
+.media-up-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.45rem 0.75rem;
+  font-size: 0.9rem;
+  flex-shrink: 0;
+}
+
+.media-breadcrumb {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem;
+  min-width: 0;
+  font-size: 0.9rem;
+  color: var(--muted);
+}
+
+.media-breadcrumb button {
+  padding: 0.2rem 0.35rem;
+  border: none;
+  background: transparent;
+  color: var(--accent);
+  font: inherit;
+  font-size: 0.9rem;
+}
+
+.media-breadcrumb button:hover:not(:disabled) {
+  text-decoration: underline;
+}
+
+.media-breadcrumb-separator {
+  color: var(--muted);
+}
+
+.media-status {
+  margin: 0 0 0.85rem;
+  font-size: 0.9rem;
+  color: var(--muted);
+}
+
+.media-status.is-error {
+  color: #ff8f8f;
+}
+
+.media-up-btn svg {
+  display: block;
+}
+
+.media-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: 0.75rem;
+  min-height: min(480px, 55vh);
+  align-content: start;
+  align-items: start;
+}
+
+.media-item-btn {
+  display: flex;
+  flex-direction: column;
+  gap: 0.45rem;
+  min-width: 0;
+  padding: 0.45rem;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--bg) 92%, white 8%);
+  color: var(--text);
+  text-align: center;
+  font: inherit;
+}
+
+.media-item-btn:hover:not(:disabled) {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
+}
+
+.media-item-preview {
+  aspect-ratio: 1 / 1;
+  width: 100%;
+  border-radius: 6px;
+  background: var(--bg);
+}
+
+.media-folder-preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--accent);
+}
+
+.media-folder-preview svg {
+  display: block;
+  width: 2.75rem;
+  height: 2.75rem;
+}
+
+.media-image-preview {
+  object-fit: cover;
+}
+
+.media-add-btn {
+  cursor: pointer;
+  border-style: dashed;
+  color: var(--muted);
+}
+
+.media-upload-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.media-add-preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+}
+
+.media-add-preview svg {
+  display: block;
+  width: 2.75rem;
+  height: 2.75rem;
+}
+
+.media-add-btn:hover:not(:has(.media-upload-input:disabled)) {
+  border-color: var(--accent);
+  color: var(--accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
+}
+
+.media-add-btn:has(.media-upload-input:disabled) {
+  opacity: 0.6;
+  cursor: wait;
+}
+
+.media-item-name {
+  font-size: 0.78rem;
+  color: var(--muted);
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@media (max-width: 640px) {
+  .picker-row {
+    grid-template-columns: 1fr;
+  }
+}