granite-mem 0.1.7 → 0.1.9

package/dist/public/style.css

@@ -1,923 +1 @@
-/* ═══════════════════════════════════════════════
-   GRANITE — Editorial knowledge interface
-   Typography: Instrument Sans + Instrument Serif
-   ═══════════════════════════════════════════════ */
-
-*, *::before, *::after {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-:root {
-  /* ── Palette ── */
-  --bg-0: #08080a;
-  --bg-1: #0e0e11;
-  --bg-2: #141418;
-  --bg-3: #1a1a1f;
-  --bg-hover: #1e1e24;
-  --bg-active: #24242b;
-  --border: #222228;
-  --border-subtle: #1a1a1f;
-
-  --text-0: #f0f0f3;
-  --text-1: #b0b0b8;
-  --text-2: #6e6e7a;
-  --text-3: #44444f;
-
-  --accent: #6366f1;
-  --accent-soft: rgba(99, 102, 241, 0.12);
-  --accent-text: #a5b4fc;
-
-  --link: #818cf8;
-  --link-hover: #a5b4fc;
-  --link-broken: #f87171;
-
-  --tag-bg: rgba(99, 102, 241, 0.08);
-  --tag-border: rgba(99, 102, 241, 0.15);
-  --tag-text: #a5b4fc;
-
-  --success: #34d399;
-
-  /* ── Type ── */
-  --font-sans: 'Instrument Sans', -apple-system, sans-serif;
-  --font-serif: 'Instrument Serif', Georgia, serif;
-  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;
-
-  /* ── Easing ── */
-  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
-  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
-
-  /* ── Layout ── */
-  --sidebar-rail: 48px;
-  --sidebar-panel: 260px;
-  --sidebar-total: 308px;
-  --content-max: 680px;
-  --radius: 8px;
-  --radius-sm: 5px;
-}
-
-html, body {
-  height: 100%;
-  font-family: var(--font-sans);
-  background: var(--bg-0);
-  color: var(--text-1);
-  font-size: 13px;
-  line-height: 1.5;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  overflow: hidden;
-}
-
-/* ── Scrollbar ── */
-::-webkit-scrollbar { width: 4px; }
-::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
-::-webkit-scrollbar-thumb:hover { background: var(--text-3); }
-
-/* ── App layout ── */
-#app {
-  display: flex;
-  height: 100%;
-  background: var(--bg-0);
-}
-
-/* ═══════════════════════════════════
-   SIDEBAR
-   ═══════════════════════════════════ */
-
-#sidebar {
-  display: flex;
-  height: 100%;
-  flex-shrink: 0;
-  border-right: 1px solid var(--border);
-  transition: width 0.3s var(--ease-out);
-}
-
-#sidebar.expanded { width: var(--sidebar-total); }
-#sidebar.collapsed { width: var(--sidebar-rail); }
-
-/* ── Rail ── */
-#sidebar-rail {
-  width: var(--sidebar-rail);
-  min-width: var(--sidebar-rail);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 12px 0;
-  gap: 4px;
-  background: var(--bg-1);
-  border-right: 1px solid var(--border-subtle);
-  z-index: 2;
-}
-
-#brand-mark {
-  width: 32px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--accent);
-  background: none;
-  border: none;
-  cursor: pointer;
-  border-radius: var(--radius-sm);
-  margin-bottom: 12px;
-  transition: color 0.15s;
-}
-#brand-mark:hover { color: var(--text-0); }
-
-.rail-btn {
-  width: 32px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--text-2);
-  background: none;
-  border: none;
-  cursor: pointer;
-  border-radius: var(--radius-sm);
-  transition: all 0.15s;
-}
-.rail-btn:hover { color: var(--text-1); background: var(--bg-hover); }
-.rail-btn.active { color: var(--accent-text); background: var(--accent-soft); }
-
-/* ── Panel ── */
-#sidebar-panel {
-  width: var(--sidebar-panel);
-  display: flex;
-  flex-direction: column;
-  background: var(--bg-1);
-  overflow: hidden;
-  transition: width 0.3s var(--ease-out), opacity 0.2s;
-}
-
-#sidebar.collapsed #sidebar-panel {
-  width: 0;
-  opacity: 0;
-  pointer-events: none;
-}
-
-/* ── Search ── */
-#sidebar-search { padding: 12px 12px 8px; }
-
-#search-wrapper {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 10px;
-  background: var(--bg-2);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  transition: border-color 0.15s;
-}
-#search-wrapper:focus-within {
-  border-color: var(--accent);
-  box-shadow: 0 0 0 2px var(--accent-soft);
-}
-
-#search-box {
-  flex: 1;
-  background: none;
-  border: none;
-  color: var(--text-0);
-  font-family: var(--font-sans);
-  font-size: 12.5px;
-  outline: none;
-}
-#search-box::placeholder { color: var(--text-3); }
-
-#search-wrapper kbd {
-  font-family: var(--font-sans);
-  font-size: 10px;
-  color: var(--text-3);
-  background: var(--bg-0);
-  border: 1px solid var(--border);
-  border-radius: 3px;
-  padding: 1px 4px;
-  line-height: 1.4;
-}
-
-/* ── Type filters ── */
-#type-filters {
-  display: flex;
-  gap: 4px;
-  padding: 4px 12px 8px;
-  flex-wrap: wrap;
-}
-
-.type-chip {
-  padding: 3px 10px;
-  font-family: var(--font-sans);
-  font-size: 11px;
-  font-weight: 500;
-  letter-spacing: 0.01em;
-  border-radius: 20px;
-  border: 1px solid transparent;
-  background: transparent;
-  color: var(--text-2);
-  cursor: pointer;
-  transition: all 0.15s;
-}
-.type-chip:hover { color: var(--text-1); background: var(--bg-hover); }
-.type-chip.active {
-  color: var(--accent-text);
-  background: var(--accent-soft);
-  border-color: var(--tag-border);
-}
-
-/* ── Note list ── */
-#note-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 0 8px 8px;
-}
-
-.note-item {
-  padding: 8px 10px;
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  transition: background 0.1s;
-  margin-bottom: 1px;
-}
-.note-item:hover { background: var(--bg-hover); }
-.note-item.active { background: var(--bg-active); }
-.note-item.keyboard-focus {
-  background: var(--bg-hover);
-  outline: 1px solid var(--border);
-}
-
-.note-item-title {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--text-0);
-  line-height: 1.4;
-  margin-bottom: 2px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.note-item-meta {
-  font-size: 11px;
-  color: var(--text-3);
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.note-item-type {
-  font-size: 10px;
-  font-weight: 500;
-  letter-spacing: 0.03em;
-  text-transform: uppercase;
-  color: var(--text-2);
-}
-.note-item-type.fleeting { color: #fbbf24; }
-.note-item-type.permanent { color: var(--accent-text); }
-.note-item-type.reference { color: var(--success); }
-.note-item-type.person { color: #f9a8d4; }
-.note-item-type.meeting { color: #93c5fd; }
-.note-item-type.project { color: #c4b5fd; }
-.note-item-type.decision { color: #fca5a5; }
-
-.note-item-dot {
-  width: 2px;
-  height: 2px;
-  border-radius: 50%;
-  background: var(--text-3);
-}
-
-.note-item-snippet {
-  font-size: 11px;
-  color: var(--text-3);
-  margin-top: 3px;
-  line-height: 1.4;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-.note-item-snippet mark {
-  background: var(--accent-soft);
-  color: var(--accent-text);
-  border-radius: 2px;
-  padding: 0 1px;
-}
-
-/* ═══════════════════════════════════
-   CREATION PANEL
-   ═══════════════════════════════════ */
-
-#create-panel {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  padding: 0 12px 12px;
-  animation: fadeSlideIn 0.25s var(--ease-out);
-}
-
-#create-panel-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 0 12px;
-}
-
-.create-panel-title {
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--text-1);
-  letter-spacing: 0.02em;
-}
-
-.create-panel-close {
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--text-3);
-  background: none;
-  border: none;
-  cursor: pointer;
-  border-radius: var(--radius-sm);
-  transition: all 0.15s;
-}
-.create-panel-close:hover { color: var(--text-1); background: var(--bg-hover); }
-
-.create-label {
-  font-size: 10px;
-  font-weight: 600;
-  color: var(--text-3);
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  margin-bottom: 4px;
-  margin-top: 10px;
-  display: block;
-}
-.create-label:first-of-type { margin-top: 0; }
-
-.create-select,
-.create-input {
-  width: 100%;
-  padding: 6px 10px;
-  background: var(--bg-2);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  color: var(--text-0);
-  font-family: var(--font-sans);
-  font-size: 12.5px;
-  outline: none;
-  transition: border-color 0.15s;
-}
-.create-select:focus,
-.create-input:focus {
-  border-color: var(--accent);
-  box-shadow: 0 0 0 2px var(--accent-soft);
-}
-.create-select {
-  appearance: none;
-  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236e6e7a' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 10px center;
-  padding-right: 28px;
-  cursor: pointer;
-}
-.create-select option { background: var(--bg-2); color: var(--text-0); }
-
-.create-textarea {
-  width: 100%;
-  min-height: 160px;
-  padding: 10px;
-  background: var(--bg-2);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  color: var(--text-0);
-  font-family: var(--font-mono);
-  font-size: 12px;
-  line-height: 1.6;
-  outline: none;
-  resize: vertical;
-  transition: border-color 0.15s;
-}
-.create-textarea:focus {
-  border-color: var(--accent);
-  box-shadow: 0 0 0 2px var(--accent-soft);
-}
-.create-textarea::placeholder { color: var(--text-3); }
-
-.create-submit {
-  margin-top: 12px;
-  width: 100%;
-  padding: 8px;
-  background: var(--accent);
-  color: #fff;
-  font-family: var(--font-sans);
-  font-size: 12.5px;
-  font-weight: 600;
-  border: none;
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  transition: opacity 0.15s, transform 0.1s;
-}
-.create-submit:hover { opacity: 0.9; }
-.create-submit:active { transform: scale(0.98); }
-
-/* ═══════════════════════════════════
-   MAIN CONTENT
-   ═══════════════════════════════════ */
-
-#main {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  position: relative;
-  background: var(--bg-0);
-}
-
-#content-wrapper {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  scroll-behavior: smooth;
-}
-
-/* ── Note header ── */
-#note-header {
-  display: none;
-  max-width: var(--content-max);
-  width: 100%;
-  margin: 0 auto;
-  padding: 48px 32px 0;
-  animation: fadeSlideIn 0.4s var(--ease-out);
-}
-
-#note-breadcrumb {
-  font-size: 11px;
-  color: var(--text-3);
-  margin-bottom: 8px;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  font-weight: 500;
-}
-
-#note-title {
-  font-family: var(--font-serif);
-  font-size: clamp(26px, 4vw, 34px);
-  font-weight: 400;
-  color: var(--text-0);
-  line-height: 1.2;
-  letter-spacing: -0.01em;
-  margin-bottom: 12px;
-}
-
-#note-meta {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  font-size: 12px;
-  color: var(--text-2);
-  padding-bottom: 28px;
-  border-bottom: 1px solid var(--border-subtle);
-}
-
-.meta-badge {
-  font-size: 10px;
-  font-weight: 600;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-  padding: 2px 8px;
-  border-radius: 3px;
-  background: var(--accent-soft);
-  color: var(--accent-text);
-  border: 1px solid var(--tag-border);
-}
-
-.meta-date { color: var(--text-3); }
-
-#note-tags { display: flex; gap: 4px; }
-
-.tag {
-  font-size: 11px;
-  color: var(--text-2);
-  padding: 1px 7px;
-  border-radius: 3px;
-  background: var(--bg-3);
-  border: 1px solid var(--border);
-}
-
-/* ═══════════════════════════════════
-   NOTE BODY — Rendered Markdown
-   ═══════════════════════════════════ */
-
-#note-body {
-  display: none;
-  max-width: var(--content-max);
-  width: 100%;
-  margin: 0 auto;
-  padding: 28px 32px 40px;
-  animation: fadeSlideIn 0.45s var(--ease-out) 0.05s both;
-}
-
-/* ── Headings ── */
-#note-body .md-h1 {
-  font-family: var(--font-serif);
-  font-size: 24px;
-  font-weight: 400;
-  color: var(--text-0);
-  line-height: 1.3;
-  margin: 32px 0 12px;
-  letter-spacing: -0.01em;
-}
-
-#note-body .md-h2 {
-  font-family: var(--font-serif);
-  font-size: 20px;
-  font-weight: 400;
-  color: var(--text-0);
-  line-height: 1.35;
-  margin: 28px 0 10px;
-}
-
-#note-body .md-h3 {
-  font-family: var(--font-sans);
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--accent-text);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  margin: 24px 0 8px;
-}
-
-/* ── Body text ── */
-#note-body .md-body {
-  font-family: var(--font-sans);
-  font-size: 14px;
-  color: var(--text-1);
-  line-height: 1.75;
-  margin: 0 0 4px;
-}
-
-/* ── Lists ── */
-#note-body .md-list {
-  padding-left: 20px;
-  margin: 4px 0;
-}
-
-#note-body .md-list li {
-  font-family: var(--font-sans);
-  font-size: 14px;
-  color: var(--text-1);
-  line-height: 1.75;
-  margin: 2px 0;
-}
-
-#note-body .md-list li::marker {
-  color: var(--text-3);
-}
-
-#note-body ul.md-list { list-style-type: disc; }
-#note-body ul.md-list li::marker { color: var(--text-3); font-size: 8px; }
-
-/* ── Blockquotes ── */
-#note-body .md-blockquote {
-  font-family: var(--font-serif);
-  font-style: italic;
-  font-size: 14px;
-  color: var(--text-2);
-  line-height: 1.75;
-  margin: 12px 0;
-  padding: 2px 0 2px 16px;
-  border-left: 2px solid var(--border);
-}
-
-/* ── Code blocks ── */
-#note-body .code-block {
-  margin: 14px 0;
-  background: var(--bg-2);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  position: relative;
-  overflow: hidden;
-}
-
-#note-body .code-block .code-lang {
-  position: absolute;
-  top: 0;
-  right: 0;
-  font-family: var(--font-sans);
-  font-size: 10px;
-  font-weight: 500;
-  color: var(--text-3);
-  padding: 4px 10px;
-  letter-spacing: 0.02em;
-}
-
-#note-body .code-block pre {
-  padding: 14px;
-  overflow-x: auto;
-}
-
-#note-body .code-block code {
-  font-family: var(--font-mono);
-  font-size: 12.5px;
-  line-height: 1.6;
-  color: #c4ccda;
-}
-
-/* ── Inline code ── */
-#note-body .inline-code {
-  font-family: var(--font-mono);
-  font-size: 12px;
-  color: #c4ccda;
-  background: var(--bg-2);
-  border: 1px solid var(--border);
-  border-radius: 3px;
-  padding: 1px 5px;
-}
-
-/* ── Horizontal rule ── */
-#note-body .md-hr {
-  border: none;
-  height: 1px;
-  background: var(--border);
-  margin: 28px 20%;
-}
-
-/* ── Strong / Emphasis ── */
-#note-body strong {
-  font-weight: 600;
-  color: var(--text-0);
-}
-
-#note-body em {
-  font-family: var(--font-serif);
-  font-style: italic;
-}
-
-/* ── External links ── */
-#note-body .external-link {
-  color: var(--text-2);
-  text-decoration: underline;
-  text-decoration-color: var(--border);
-  text-underline-offset: 2px;
-  transition: color 0.15s, text-decoration-color 0.15s;
-}
-#note-body .external-link:hover {
-  color: var(--text-1);
-  text-decoration-color: var(--text-2);
-}
-
-/* ═══════════════════════════════════
-   WIKILINKS
-   ═══════════════════════════════════ */
-
-.wikilink {
-  color: var(--link);
-  text-decoration: none;
-  border-bottom: 1px solid transparent;
-  transition: color 0.15s, border-color 0.2s;
-  cursor: pointer;
-}
-.wikilink:hover {
-  color: var(--link-hover);
-  border-bottom-color: var(--link-hover);
-}
-
-.wikilink-broken {
-  color: var(--link-broken);
-  border-bottom: 1px dashed rgba(248, 113, 113, 0.4);
-}
-
-/* ── Wikilink Preview Popup ── */
-.wikilink-preview {
-  position: fixed;
-  z-index: 100;
-  width: 280px;
-  background: var(--bg-2);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 14px 16px;
-  pointer-events: none;
-  opacity: 0;
-  transform: translateY(4px);
-  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
-}
-
-.wikilink-preview.visible {
-  opacity: 1;
-  transform: translateY(0);
-  pointer-events: auto;
-}
-
-.wikilink-preview .preview-type {
-  font-size: 10px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--accent-text);
-  margin-bottom: 4px;
-}
-
-.wikilink-preview .preview-title {
-  font-family: var(--font-serif);
-  font-size: 16px;
-  color: var(--text-0);
-  line-height: 1.3;
-  margin-bottom: 8px;
-}
-
-.wikilink-preview .preview-snippet {
-  font-size: 12px;
-  color: var(--text-2);
-  line-height: 1.5;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.wikilink-preview .preview-tags {
-  display: flex;
-  gap: 4px;
-  margin-top: 8px;
-}
-
-.wikilink-preview .preview-tags:empty { display: none; }
-
-.wikilink-preview .preview-tag {
-  font-size: 10px;
-  color: var(--text-3);
-  padding: 1px 6px;
-  border-radius: 3px;
-  background: var(--bg-3);
-  border: 1px solid var(--border);
-}
-
-/* ═══════════════════════════════════
-   BACKLINKS
-   ═══════════════════════════════════ */
-
-#backlinks-panel {
-  display: none;
-  max-width: var(--content-max);
-  width: 100%;
-  margin: 0 auto;
-  padding: 0 32px 48px;
-  animation: fadeSlideIn 0.5s var(--ease-out) 0.1s both;
-}
-
-#backlinks-header {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--text-3);
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  padding: 20px 0 10px;
-  border-top: 1px solid var(--border-subtle);
-}
-
-#backlinks-count { color: var(--text-2); }
-
-.backlink-item {
-  padding: 8px 12px;
-  margin: 2px 0;
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  transition: background 0.1s;
-}
-.backlink-item:hover { background: var(--bg-hover); }
-
-.backlink-title {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--link);
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.backlink-arrow {
-  font-size: 11px;
-  color: var(--text-3);
-}
-
-.backlink-context {
-  font-size: 11.5px;
-  color: var(--text-3);
-  margin-top: 2px;
-  line-height: 1.5;
-}
-
-/* ═══════════════════════════════════
-   GRAPH VIEW
-   ═══════════════════════════════════ */
-
-#graph-view {
-  flex: 1;
-  position: relative;
-  overflow: hidden;
-}
-
-#graph-canvas {
-  display: block;
-  width: 100%;
-  height: 100%;
-  cursor: grab;
-}
-#graph-canvas:active { cursor: grabbing; }
-
-#graph-tooltip {
-  position: fixed;
-  z-index: 50;
-  font-family: var(--font-sans);
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--text-0);
-  background: var(--bg-2);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  padding: 4px 10px;
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity 0.12s;
-  white-space: nowrap;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-}
-
-/* ═══════════════════════════════════
-   EMPTY STATE
-   ═══════════════════════════════════ */
-
-#empty-state {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  color: var(--text-3);
-  font-size: 13px;
-  animation: fadeIn 0.6s var(--ease-out);
-}
-
-#empty-icon {
-  margin-bottom: 8px;
-  opacity: 0.5;
-}
-
-.empty-hint {
-  font-size: 12px;
-  color: var(--text-3);
-  opacity: 0.6;
-}
-
-.empty-hint kbd {
-  font-family: var(--font-sans);
-  font-size: 10px;
-  background: var(--bg-2);
-  border: 1px solid var(--border);
-  border-radius: 3px;
-  padding: 1px 5px;
-}
-
-/* ═══════════════════════════════════
-   ANIMATIONS
-   ═══════════════════════════════════ */
-
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-@keyframes fadeSlideIn {
-  from {
-    opacity: 0;
-    transform: translateY(8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* ═══════════════════════════════════
-   RESPONSIVE
-   ═══════════════════════════════════ */
-
-@media (max-width: 768px) {
-  #sidebar.expanded { width: var(--sidebar-rail); }
-  #sidebar.expanded #sidebar-panel { width: 0; opacity: 0; pointer-events: none; }
-  #note-header { padding: 32px 20px 0; }
-  #note-body { padding: 20px 20px 32px; }
-  #backlinks-panel { padding: 0 20px 32px; }
-}
+:root{--bg: #ece6dd;--bg-grad-top: #f0ebe4;--bg-grad-bottom: #e6dfd5;--panel: rgba(250, 247, 242, .62);--panel-strong: rgba(251, 248, 244, .82);--panel-dark: rgba(21, 18, 16, .7);--panel-raised: rgba(255, 255, 255, .24);--panel-quiet: rgba(255, 255, 255, .12);--ink: #1d1712;--ink-soft: #5f554b;--ink-faint: #887a6d;--ink-on-dark: rgba(255, 246, 236, .92);--ink-on-dark-soft:rgba(255, 236, 220, .58);--line: rgba(69, 53, 40, .14);--line-strong: rgba(69, 53, 40, .22);--line-on-dark: rgba(255, 236, 220, .08);--accent: #ba6844;--accent-soft: rgba(186, 104, 68, .1);--accent-deep: #945136;--accent-gradient: linear-gradient(135deg, #c16b47, #945136);--forest: #2e6b5b;--forest-soft: rgba(46, 107, 91, .12);--gold: #987b43;--gold-soft: rgba(152, 123, 67, .12);--violet: #735bb0;--violet-soft: rgba(113, 88, 170, .12);--broken: #9a7161;--graph-bg-1: #140f0d;--graph-bg-2: #181210;--graph-bg-3: #0f0b09;--shadow-sm: 0 2px 6px rgba(40, 28, 18, .06);--shadow: 0 18px 48px rgba(40, 28, 18, .08);--shadow-lg: 0 28px 80px rgba(40, 28, 18, .12);--radius-sm: 6px;--radius: 8px;--radius-md: 10px;--radius-lg: 12px;--radius-pill: 999px;--ease: cubic-bezier(.22, 1, .36, 1);--dur-fast: .12s;--dur: .16s;--dur-slow: .22s;--font-display: "Fraunces", Georgia, "Times New Roman", serif;--font-sans: "Manrope", system-ui, -apple-system, sans-serif;--font-mono: "IBM Plex Mono", ui-monospace, monospace}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;background:#140f0d;font-family:var(--font-sans);color:#fff8ef}body{overflow:hidden}button{font:inherit;color:inherit}.dirA{position:relative;width:100%;height:100vh;overflow:hidden;background:radial-gradient(circle at 18% 14%,rgba(214,154,118,.08),transparent 32%),radial-gradient(circle at 82% 82%,rgba(103,181,161,.06),transparent 34%),radial-gradient(circle at 50% 50%,#23181400 50%,#00000059),linear-gradient(135deg,#140f0d,#181210 42%,#0f0b09);color:#fff6eceb;font-family:var(--font-sans);isolation:isolate}.dirA:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(rgba(255,244,232,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,244,232,.02) 1px,transparent 1px);background-size:140px 140px;mask-image:radial-gradient(circle at 50% 50%,black 40%,transparent 95%)}.dirA:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background-image:radial-gradient(1px 1px at 12% 22%,rgba(255,240,220,.5),transparent 100%),radial-gradient(1px 1px at 78% 18%,rgba(255,230,200,.35),transparent 100%),radial-gradient(1px 1px at 32% 78%,rgba(255,240,220,.4),transparent 100%),radial-gradient(1px 1px at 88% 64%,rgba(255,230,200,.35),transparent 100%),radial-gradient(1px 1px at 55% 42%,rgba(255,240,220,.3),transparent 100%),radial-gradient(1px 1px at 22% 58%,rgba(255,220,200,.3),transparent 100%),radial-gradient(1px 1px at 68% 88%,rgba(255,240,220,.4),transparent 100%)}.dirA-topbar{position:absolute;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;gap:16px;padding:18px 24px;pointer-events:none}.dirA-topbar>*{pointer-events:auto}.dirA-brand{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 10px;border-radius:10px;background:#1a1310b8;border:1px solid rgba(255,236,220,.09);backdrop-filter:blur(10px)}.dirA-brand-mark{width:28px;height:28px;display:grid;place-items:center;color:#f1c49e}.dirA-brand-name{font-family:var(--font-display);font-size:1.1rem;letter-spacing:-.03em;color:#fff8ef;line-height:1}.dirA-brand-sub{font-size:.54rem;text-transform:uppercase;letter-spacing:.16em;color:#ffecdc85;margin-top:3px}.dirA-search{flex:0 1 440px;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;background:#1a13109e;border:1px solid rgba(255,236,220,.09);backdrop-filter:blur(10px);color:#ffecdcb8;cursor:pointer;text-align:left;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}.dirA-search:hover{background:#1a1310d1;border-color:#ffecdc29}.dirA-search-text{flex:1;font-size:.86rem;color:#ffecdc80}.dirA-search .kbd,.dirA-footer .kbd{font-family:var(--font-mono);font-size:.58rem;padding:2px 7px;border-radius:999px;border:1px solid rgba(255,236,220,.12);background:#ffecdc0a;color:#ffecdcb3}.dirA-filters{display:flex;gap:4px;margin-left:auto;padding:5px;border-radius:10px;background:#1a13109e;border:1px solid rgba(255,236,220,.09);backdrop-filter:blur(10px);flex-wrap:wrap;max-width:48vw}.dirA-filter{appearance:none;border:none;background:transparent;padding:6px 11px;border-radius:8px;font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#ffecdc8a;cursor:pointer;transition:all .16s var(--ease);display:inline-flex;align-items:center;gap:6px}.dirA-filter:hover{color:#fff8ef}.dirA-filter.active{background:#ffecdc14;color:#fff8ef}.dirA-filter .dot{width:7px;height:7px;border-radius:999px;background:var(--tc, rgba(255,236,220,.5));box-shadow:0 0 8px var(--tc, transparent)}.dirA-title{position:absolute;left:28px;top:92px;z-index:15;pointer-events:none;max-width:420px}.dirA-title .eyebrow{font-size:.58rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#ffecdc85}.dirA-title h1{margin:10px 0 0;font-family:var(--font-display);font-weight:500;font-size:3rem;letter-spacing:-.045em;line-height:.95;color:#fff8ef}.dirA-title h1 em{font-style:italic;font-weight:400;color:#d9a684}.dirA-title .sub{margin-top:14px;font-size:.85rem;line-height:1.55;color:#ffecdc99;max-width:34ch}.dirA-pulse{position:absolute;right:28px;top:94px;z-index:15;display:flex;gap:8px;pointer-events:none}.dirA-pulse-stat{min-width:78px;padding:9px 12px;border-radius:10px;background:#1a13108f;border:1px solid rgba(255,236,220,.08);backdrop-filter:blur(10px)}.dirA-pulse-stat .label{font-size:.5rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#ffecdc80}.dirA-pulse-stat .value{margin-top:4px;font-family:var(--font-display);font-weight:500;font-size:1.4rem;letter-spacing:-.03em;color:#fff8ef;line-height:1}.dirA-stage{position:absolute;inset:0;z-index:5;cursor:grab;overflow:hidden;user-select:none;-webkit-user-select:none;background:radial-gradient(ellipse 70% 55% at 30% 40%,rgba(186,104,68,.1),transparent 70%),radial-gradient(ellipse 55% 45% at 72% 64%,rgba(113,88,170,.08),transparent 70%),radial-gradient(ellipse 50% 40% at 50% 80%,rgba(46,107,91,.07),transparent 70%)}.dirA-stage.dragging{cursor:grabbing}.dirA-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}.dirA-labels{position:absolute;inset:0;pointer-events:none;z-index:2;font-family:var(--font-sans)}.dirA-lbl{position:absolute;font-size:10.5px;letter-spacing:.01em;color:#fff0dc8c;text-align:center;text-shadow:0 1px 3px rgba(20,14,8,.85),0 0 6px rgba(20,14,8,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .16s ease}.dirA-lbl.hop1{color:#fff4e2eb;font-weight:500;font-size:11px}.dirA-lbl.active{color:#fff8ef;font-weight:600;font-size:12.5px;text-shadow:0 0 10px rgba(255,200,140,.6),0 1px 3px rgba(20,14,8,.9)}.dirA-zoom{position:absolute;right:28px;bottom:22px;z-index:15;display:flex;align-items:center;gap:4px;padding:6px;border-radius:10px;background:#1a1310ad;border:1px solid rgba(255,236,220,.08);backdrop-filter:blur(10px)}.dirA-zoom button{appearance:none;width:30px;height:30px;border:none;background:transparent;color:#ffecdcb3;font-family:var(--font-mono);font-size:.85rem;font-weight:700;cursor:pointer;border-radius:7px;transition:all .16s var(--ease)}.dirA-zoom button:hover{background:#ffecdc14;color:#fff8ef}.dirA-zoom .zoom-val{color:#ffecdc99;font-family:var(--font-mono);font-size:.66rem;padding:0 8px}.dirA-footer{position:absolute;left:28px;bottom:22px;z-index:15;display:flex;align-items:center;gap:14px;padding:8px 14px;border-radius:10px;background:#1a1310ad;border:1px solid rgba(255,236,220,.08);backdrop-filter:blur(10px);font-size:.62rem;color:#ffecdc9e}.dirA-footer .kbd{margin-right:5px}.dirA-footer .sep{width:3px;height:3px;border-radius:999px;background:#ffecdc40}.dirA-empty-hint{position:absolute;right:28px;top:50%;transform:translateY(-50%);z-index:30;width:min(360px,40vw);padding:26px 28px;border-radius:14px;border:1px solid rgba(255,236,220,.1);background:#1a1310c7;backdrop-filter:blur(12px);color:#ffecdcc7;text-align:center}.dirA-empty-hint[hidden]{display:none}.dirA-empty-hint h3{margin:0;font-family:var(--font-display);font-weight:500;font-size:1.6rem;letter-spacing:-.03em;color:#fff8ef}.dirA-empty-hint p{margin:10px 0 0;font-size:.82rem;line-height:1.55}.dirA-reader{position:absolute;top:88px;right:24px;bottom:72px;width:var(--reader-w, min(900px, 62vw));z-index:30;border-radius:16px;border:1px solid rgba(69,53,40,.14);background:linear-gradient(180deg,#faf6f1fa,#f5efe9f5);box-shadow:0 40px 120px #00000080,0 18px 48px #281c123d;color:#1d1712;display:flex;flex-direction:column;overflow:hidden;animation:dirA-reader-in .42s var(--ease) both}.dirA-reader[hidden]{display:none}@keyframes dirA-reader-in{0%{opacity:0;transform:translate(24px) scale(.98)}to{opacity:1;transform:translate(0) scale(1)}}.dirA-reader.resizing{transition:none;user-select:none}.dirA-reader.resizing *{cursor:col-resize!important}.dirA-reader-resizer{position:absolute;top:0;left:-3px;bottom:0;width:8px;cursor:col-resize;z-index:5}.dirA-reader-resizer:before{content:"";position:absolute;left:3px;top:50%;transform:translateY(-50%);width:2px;height:48px;border-radius:999px;background:#45352829;transition:all .16s var(--ease)}.dirA-reader-resizer:hover:before,.dirA-reader.resizing .dirA-reader-resizer:before{background:var(--accent);height:72px}.dirA-reader-progress{position:absolute;top:0;left:0;height:2px;width:0;background:var(--accent-gradient);z-index:10;transition:width 80ms linear}.dirA-reader-chrome{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid rgba(69,53,40,.14);background:#ffffff57;backdrop-filter:blur(8px);position:relative;z-index:2}.dirA-reader-breadcrumb{display:flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:.64rem;color:var(--ink-faint);letter-spacing:.02em;overflow:hidden;min-width:0;flex:1}.dirA-reader-breadcrumb svg{flex:0 0 auto;color:var(--ink-faint)}.dirA-reader-breadcrumb .crumb{cursor:pointer;padding:3px 7px;border-radius:5px;color:var(--ink-faint);transition:all .16s var(--ease);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:180px}.dirA-reader-breadcrumb .crumb:hover{color:var(--accent);background:#ba684414}.dirA-reader-breadcrumb .crumb.current{color:var(--ink);font-weight:700}.dirA-reader-breadcrumb .sep{color:var(--ink-faint);opacity:.5}.dirA-reader-nav{display:flex;gap:4px;align-items:center}.dirA-nav-btn{appearance:none;width:30px;height:30px;border-radius:8px;border:1px solid rgba(69,53,40,.14);background:#ffffff80;color:var(--ink-soft);cursor:pointer;display:grid;place-items:center;transition:all .16s var(--ease)}.dirA-nav-btn:hover{background:#ba684414;color:var(--accent);border-color:#ba68444d}.dirA-nav-btn.close{margin-left:8px}.dirA-reader-body{flex:1;overflow-y:auto;padding:36px 56px 56px;position:relative;scroll-behavior:smooth}.dirA-reader-kicker{display:flex;align-items:center;gap:10px;color:var(--ink-faint);font-size:.66rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase}.dirA-reader-type{padding:4px 10px;border-radius:999px;font-size:.58rem;font-weight:800;letter-spacing:.14em}.dirA-reader-title{margin:14px 0 0;font-family:var(--font-display);font-weight:500;font-size:clamp(2.4rem,3.6vw,3.2rem);line-height:.98;letter-spacing:-.05em;color:var(--ink);text-wrap:balance}.dirA-reader-deck{margin:18px 0 0;max-width:52ch;font-family:var(--font-display);font-style:italic;font-weight:400;font-size:1.18rem;line-height:1.5;color:var(--ink-soft)}.dirA-reader-deck:empty{display:none}.dirA-reader-metaline{margin-top:22px;padding:12px 0;border-top:1px solid rgba(69,53,40,.14);border-bottom:1px solid rgba(69,53,40,.14);display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-family:var(--font-mono);font-size:.7rem;color:var(--ink-faint)}.dirA-reader-metaline .slug{color:var(--accent)}.dirA-reader-metaline .tag{padding:2px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:.68rem;font-weight:600}.dirA-reader-article{margin-top:28px;position:relative}.dirA-reader-article>.md-body:first-child:first-letter,.dirA-reader-article>.md-h2:first-child+.md-body:first-letter{font-family:var(--font-display);font-weight:500;font-size:4.2rem;line-height:.85;float:left;margin:6px 10px 0 0;color:var(--accent);letter-spacing:-.04em}.md-h1{font-family:var(--font-display);font-weight:500;font-size:2rem;line-height:1.04;margin:40px 0 16px;letter-spacing:-.03em;color:var(--ink)}.md-h2{font-family:var(--font-display);font-weight:500;font-size:1.72rem;line-height:1.08;margin:40px 0 16px;letter-spacing:-.03em;color:var(--ink)}.md-h3{font-family:var(--font-display);font-weight:500;font-size:1.22rem;line-height:1.2;margin:30px 0 12px;letter-spacing:-.02em;color:var(--ink)}.md-body{font-size:1.02rem;line-height:1.82;color:var(--ink-soft);margin:0}.md-body+.md-body{margin-top:14px}.md-body strong,.md-list strong{color:var(--ink)}.md-list{margin:12px 0 12px 22px;padding:0}.md-list li{margin:6px 0;color:var(--ink-soft);line-height:1.75}.md-list li::marker{color:var(--accent)}.md-hr{border:none;border-top:1px solid rgba(69,53,40,.14);margin:28px 0}.md-blockquote{margin:30px -16px;padding:22px 28px;border-left:3px solid var(--accent);background:linear-gradient(90deg,#fff6ebcc,#fff6eb4d);border-radius:0 10px 10px 0;font-family:var(--font-display);font-style:italic;font-size:1.24rem;line-height:1.5;color:var(--ink);position:relative}.md-blockquote:before{content:"\201c";position:absolute;top:-10px;left:12px;font-family:var(--font-display);font-size:4rem;color:#ba684440;line-height:1}.inline-code{font-family:var(--font-mono);padding:2px 7px;border-radius:6px;background:var(--accent-soft);color:#975033;font-size:.88em}.code-block{position:relative;margin:22px 0;padding:20px 22px;background:#191310;color:#ffecdce0;border-radius:10px;overflow-x:auto;font-family:var(--font-mono);font-size:.86rem;line-height:1.55}.code-block .code-lang{display:block;font-size:.58rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#ffecdc73;margin-bottom:8px}.code-block pre{margin:0;white-space:pre}.code-block code{font:inherit}.md-table-wrap{overflow-x:auto;margin:22px 0;border-radius:10px;border:1px solid rgba(69,53,40,.14)}.md-table{width:100%;border-collapse:collapse;font-size:.92rem}.md-table th,.md-table td{padding:10px 14px;border-bottom:1px solid rgba(69,53,40,.14);text-align:left}.md-table th{font-weight:700;color:var(--ink);background:#ffffff80;font-size:.78rem;letter-spacing:.04em}.md-table td{color:var(--ink-soft)}.md-table tr:last-child td{border-bottom:none}.md-image{max-width:100%;border-radius:8px;margin:18px 0}.wikilink{text-decoration:none;font-weight:700;color:var(--accent);cursor:pointer;background-image:linear-gradient(transparent calc(100% - .08em),#ba684447 0);background-repeat:no-repeat;background-size:100% 100%;transition:background-size .16s var(--ease),color .16s var(--ease);padding:0 2px;border-radius:3px}.wikilink:hover{background-size:100% .22em;color:var(--accent-deep)}.wikilink-broken{color:var(--broken);border-bottom:1px dashed rgba(154,113,97,.4)}.external-link{color:var(--accent);text-decoration:underline;text-decoration-color:#ba684466;text-underline-offset:2px}.dirA-links-grid{margin-top:40px;padding-top:28px;border-top:1px solid rgba(69,53,40,.14);display:grid;gap:24px}.dirA-links-grid:empty{display:none}.dirA-links-section-label{color:var(--ink-faint);font-size:.64rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;display:flex;align-items:center;gap:10px}.dirA-links-section-label .count{padding:1px 8px;border-radius:999px;background:#ba684424;color:var(--accent);font-size:.66rem;letter-spacing:.05em}.dirA-links-list{display:grid;gap:10px;margin-top:14px}.dirA-linkcard{padding:14px 16px;border:1px solid rgba(69,53,40,.14);border-radius:10px;background:#fff6;cursor:pointer;transition:all .16s var(--ease);display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;text-align:left}.dirA-linkcard:hover{background:#ffffffb3;border-color:#ba68444d;transform:translate(3px);box-shadow:0 4px 14px #281c1214}.dirA-linkcard-dot{width:10px;height:10px;border-radius:999px;flex:0 0 auto}.dirA-linkcard-title{color:var(--ink);font-weight:800;font-size:.94rem}.dirA-linkcard-deck{color:var(--ink-soft);font-size:.82rem;line-height:1.45;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.dirA-linkcard-arrow{color:var(--accent);font-size:1.1rem;font-family:var(--font-display)}.wl-preview{position:fixed;z-index:200;width:340px;padding:16px 18px;border:1px solid rgba(69,53,40,.14);border-radius:12px;background:linear-gradient(180deg,#fbf7f2fa,#f6f1ecf5);box-shadow:0 24px 60px #00000073,0 10px 30px #281c1224;backdrop-filter:blur(10px);animation:wl-in .18s var(--ease) both;color:var(--ink);pointer-events:none}.wl-preview[hidden]{display:none}@keyframes wl-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.wl-preview-header{display:flex;align-items:center;justify-content:space-between;gap:10px}.wl-preview-type{padding:3px 9px;border-radius:999px;font-size:.56rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.wl-preview-meta{font-family:var(--font-mono);font-size:.64rem;color:var(--ink-faint);letter-spacing:.04em}.wl-preview-title{margin-top:10px;font-family:var(--font-display);font-size:1.26rem;line-height:1.1;color:var(--ink);letter-spacing:-.02em;font-weight:500}.wl-preview-snippet{margin-top:10px;color:var(--ink-soft);font-size:.86rem;line-height:1.55}.wl-preview-footer{margin-top:12px;padding-top:10px;border-top:1px solid rgba(69,53,40,.1)}.wl-preview-slug{font-family:var(--font-mono);font-size:.64rem;color:var(--accent);letter-spacing:.02em}.overlay{position:fixed;inset:0;z-index:300;display:flex;align-items:flex-start;justify-content:center;padding-top:14vh;background:#0e0a0885;backdrop-filter:blur(6px);animation:overlay-in .16s var(--ease) both}.overlay.hidden{display:none}@keyframes overlay-in{0%{opacity:0}to{opacity:1}}#command-bar{width:min(640px,90vw);border-radius:14px;border:1px solid rgba(255,236,220,.14);background:#1a1310eb;box-shadow:0 40px 120px #0000008c,0 12px 30px #00000059;overflow:hidden;animation:cmd-in .2s var(--ease) both}@keyframes cmd-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.command-input-wrap{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid rgba(255,236,220,.08);color:#ffecdcb8}.command-icon{flex:0 0 auto}#command-input{flex:1;background:transparent;border:none;outline:none;color:#fff8ef;font:inherit;font-size:.98rem}#command-input::placeholder{color:#ffecdc73}.command-kbd{font-family:var(--font-mono);font-size:.6rem;padding:2px 7px;border-radius:999px;border:1px solid rgba(255,236,220,.14);background:#ffecdc0a;color:#ffecdcb3}#command-results{max-height:50vh;overflow-y:auto}.command-result{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid rgba(255,236,220,.04);cursor:pointer;color:#ffecdcd1;transition:background .12s var(--ease)}.command-result:last-child{border-bottom:none}.command-result:hover,.command-result.active{background:#ffecdc0f}.command-result-dot{width:8px;height:8px;border-radius:999px;flex:0 0 auto}.command-result-body{flex:1;min-width:0}.command-result-title{font-weight:600;font-size:.92rem;color:#fff8ef;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.command-result-slug{font-family:var(--font-mono);font-size:.66rem;color:#ffecdc80;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.command-result-type{font-size:.58rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:2px 8px;border-radius:999px;flex:0 0 auto}.command-empty{padding:20px 16px;text-align:center;color:#ffecdc80;font-size:.86rem}@media(max-width:1200px){.dirA-topbar{flex-wrap:wrap;row-gap:10px;padding:14px 18px}.dirA-search{flex:1 1 auto;min-width:240px}.dirA-filters{width:100%;margin-left:0;max-width:none;order:3;justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap}.dirA-pulse{top:auto;bottom:80px;right:18px;flex-wrap:wrap}.dirA-title{left:18px;top:150px;max-width:300px}.dirA-title h1{font-size:2.2rem}.dirA-reader{top:160px;right:14px;bottom:64px}.dirA-empty-hint{top:auto;bottom:90px;right:18px;transform:none}}@media(max-width:820px){.dirA-topbar{padding:10px 14px;gap:10px}.dirA-brand-sub,.dirA-title{display:none}.dirA-pulse{right:14px;bottom:70px;gap:4px}.dirA-pulse-stat{min-width:58px;padding:6px 9px}.dirA-pulse-stat .value{font-size:1.1rem}.dirA-footer{font-size:.56rem;padding:6px 10px;gap:8px}.dirA-footer span:nth-child(n+5){display:none}.dirA-reader{inset:auto 10px 60px;width:auto!important;height:70vh}.dirA-reader-resizer{display:none}.dirA-reader-body{padding:24px 22px 40px}.dirA-empty-hint{inset:auto 14px 74px;transform:none;width:auto}}