@import "tailwindcss"; @theme {  /* Single page background — applied once on body. Anything that needs an     opaque-ish backdrop (mermaid blocks, code chips) reads --bg directly. */  --color-bg: var(--bg);  --color-surface-primary: var(--surface-primary);  --color-surface-subtle: var(--surface-subtle);  --color-border: var(--border-color);  --color-line-subtle: var(--line-subtle);  --color-text-primary: var(--text-primary);  --color-text-secondary: var(--text-secondary);  --color-text-muted: var(--text-muted);  --color-text-icon-muted: var(--text-icon-muted);  --color-item-hover-bg: var(--item-hover-bg);  --color-item-active-bg: var(--item-active-bg);  --color-kbd-bg: var(--kbd-bg);  --color-code-bg: var(--code-bg);  --color-link: var(--link-color);} @utility scrollbar-none {  scrollbar-width: none !important;  scrollbar-color: transparent transparent !important;  &::-webkit-scrollbar {    display: none !important;  }} :root {  /* Primary tokens — pushed by JS via applyThemeTokens(). Defaults below are     last-resort fallbacks for the brief window before settings hydrate. */  --accent: #ff6a00;  --bg-base: #111111;  --fg-base: #fcfcfc;  --ui-font:    -apple-system-body, ui-sans-serif, -apple-system, system-ui, "Segoe UI", Helvetica,    "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";  --editor-font:    -apple-system-body, ui-sans-serif, -apple-system, system-ui, "Segoe UI", Helvetica,    "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";  --bg-opacity: 0.715;  --contrast: 0.328;   /* Derived background — applied once on body. Editor and settings pages     don't add their own bg layer; doing so would multiply opacity and break     translucency. Every other surface uses fg-on-transparent so OS vibrancy     bleeds through globally when bg-opacity < 1. */  --bg: color-mix(in srgb, var(--bg-base) calc(var(--bg-opacity) * 100%), transparent);   /* Text — fg-on-transparent so the alpha lets the real backdrop (including     translucency) show through, instead of fixing a gray mid-tone against the     opaque bg-base. */  --text-primary: var(--fg-base);  --text-secondary: color-mix(in srgb, var(--fg-base) 80%, transparent);  --text-muted: color-mix(in srgb, var(--fg-base) 54%, transparent);  --text-icon-muted: color-mix(in srgb, var(--fg-base) 40%, transparent);   /* Overlays — alpha scales with --contrast (slider 0..200 → 0..2). Base     factors are tuned so slider=100 lands at "comfortable, fully visible"     contrast and slider=200 saturates to opaque. */  --border-color: color-mix(in srgb, var(--fg-base) calc(var(--contrast) * 24%), transparent);  --line-subtle: color-mix(in srgb, var(--fg-base) calc(var(--contrast) * 24%), transparent);  --line-subtler: color-mix(in srgb, var(--fg-base) calc(var(--contrast) * 15%), transparent);  --focus-border: color-mix(in srgb, var(--fg-base) calc(var(--contrast) * 65%), transparent);  --sidebar-divider-right: var(--line-subtler);   --surface-primary: var(--bg-base);  --surface-card: color-mix(in srgb, var(--fg-base) calc(var(--contrast) * 16%), transparent);  --surface-subtle: color-mix(in srgb, var(--fg-base) calc(var(--contrast) * 18%), transparent);  --surface-subtle-strong: color-mix(    in srgb,    var(--fg-base) calc(var(--contrast) * 36%),    transparent  );  --surface-input: color-mix(in srgb, var(--fg-base) calc(var(--contrast) * 28%), transparent);  --surface-selected: color-mix(in srgb, var(--fg-base) calc(var(--contrast) * 26%), transparent);  --surface-palette: color-mix(in srgb, var(--bg-base) 80%, transparent);   --item-hover-bg: color-mix(in srgb, var(--fg-base) calc(var(--contrast) * 16%), transparent);  --item-active-bg: color-mix(in srgb, var(--fg-base) calc(var(--contrast) * 26%), transparent);  --tab-active-bg: color-mix(in srgb, var(--fg-base) calc(var(--contrast) * 24%), transparent);   --code-bg: color-mix(in srgb, var(--fg-base) calc(var(--contrast) * 16%), transparent);  --kbd-bg: color-mix(in srgb, var(--fg-base) calc(var(--contrast) * 16%), transparent);  --scrollbar-bg: transparent;  --scrollbar-thumb: color-mix(in srgb, var(--fg-base) calc(var(--contrast) * 58%), transparent);  --blockquote-border: color-mix(in srgb, var(--fg-base) calc(var(--contrast) * 58%), transparent);   --link-color: var(--accent);  --editor-selection-bg: color-mix(in srgb, var(--accent) 30%, transparent);   /* Select chevron uses fg-base via color-mix in fill — but SVG `stroke` can't     consume CSS vars, so we recreate via stroke= with currentColor and apply     color: var(--text-icon-muted) on the host. The data-URL fallback here     still works for the dropdown-arrow background-image path. */  --select-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='gray' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 4.5l3 3 3-3'/></svg>");   --chrome-control-height: 32px;  --chrome-control-padding: 12px;  --chrome-drag-height: 72px;  --writer-editor-max-width: 734px;  --writer-editor-side-padding: clamp(1.5rem, 4vw, 4rem);  --writer-editor-outer-width: calc(    var(--writer-editor-max-width) + var(--writer-editor-side-padding) +      var(--writer-editor-side-padding)  );  --writer-editor-font-family: var(--editor-font);  --writer-editor-font-size: 16px;  --writer-editor-line-height: 1.8;  --writer-editor-letter-spacing: 0em;   font-family: var(--ui-font);  line-height: 1.5;  color: var(--text-secondary);  background-color: var(--bg);} /* Light mode: settings/theme cards rely on their border alone — a tinted fill   reads as a heavy block on a light surface. Inputs also need a lighter fill   since dark-on-light overlays read denser than light-on-dark at the same   alpha. */[data-theme="light"] {  --surface-card: transparent;  --surface-input: color-mix(in srgb, var(--fg-base) calc(var(--contrast) * 20%), transparent);} /* Dark mode: bump tab active bg so the focused tab stands out against the   translucent chrome bg without bleeding into the surrounding tab strip. */[data-theme="dark"] {  --tab-active-bg: color-mix(in srgb, var(--fg-base) calc(var(--contrast) * 34%), transparent);} /* App-wide focus indicator for keyboard navigation */:focus-visible {  outline: 2px solid var(--accent, rgba(100, 149, 237, 0.7));  outline-offset: -2px;} /* Remove focus-visible on CodeMirror — it manages its own cursor */.cm-editor:focus-visible,/* Remove focus-visible on editor inputs that manage their own styles */[data-document-header] textarea:focus-visible,[data-frontmatter] input:focus-visible,[data-settings-panel] input:focus-visible,[data-settings-panel] select:focus-visible,[data-settings-panel] button:focus-visible,[data-search-overlay] input:focus-visible,[data-search-overlay] button:focus-visible {  outline: none;} html,body,#root {  height: 100%;  overflow: hidden;  background: transparent;} /* Prevent text selection everywhere except editor and form inputs */*:not(.cm-editor):not(.cm-content):not(.cm-line):not(textarea):not(input) {  -webkit-user-select: none;  user-select: none;} .cm-editor,.cm-editor *,textarea,input {  -webkit-user-select: text;  user-select: text;} * {  scroll-padding-block-start: 32px;  scroll-padding-block-end: 32px;  scrollbar-color: transparent transparent;} *:hover,*:active {  scrollbar-color: var(--scrollbar-thumb) transparent;} ::-webkit-scrollbar {  width: 18px;  height: 18px;} ::-webkit-scrollbar-track {  background: transparent;} ::-webkit-scrollbar-thumb {  background: transparent;  border: 6px solid transparent;  background-clip: padding-box;  border-radius: 9px;} *:hover::-webkit-scrollbar-thumb {  background: var(--scrollbar-thumb);  background-clip: padding-box;} /* While dragging a sidebar item, force the grabbing-hand cursor everywhere so   element-specific cursors (text, pointer) don't override it. */body.tree-dragging,body.tree-dragging * {  cursor: grabbing !important;} /* Freeze tree-row hover states during a drag. WebKit doesn't reliably clear   `:hover` while a pointer button is held, so rows the cursor passes over get   stuck showing their hover background/arrow. Making rows non-hit-testable   removes `:hover` entirely; drop targeting uses row geometry, not hit-testing. */body.tree-dragging [data-tree-path] {  pointer-events: none;} /* cmdk command palette */[cmdk-overlay] {  position: fixed;  inset: 0;  background: transparent;  z-index: 100;} /* Floating card surface — shared by `<SurfaceCard>` (section-rail popover,   editor search overlay) and cmdk's library-rendered `[cmdk-dialog]`. The   `::before` layer paints `--bg-base` at 55% so the card reads opaque enough   while the backdrop-blur still picks up editor content behind. Establish a   stacking context (`isolation: isolate`) so the under-layer stays inside. */.surface-card,[cmdk-dialog] {  background: var(--surface-card);  backdrop-filter: blur(16px);  -webkit-backdrop-filter: blur(16px);  border: 1px solid var(--line-subtler);  border-radius: 16px;  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);  isolation: isolate;} .surface-card::before,[cmdk-dialog]::before {  content: "";  position: absolute;  inset: 0;  border-radius: inherit;  background: color-mix(in srgb, var(--bg-base) 55%, transparent);  z-index: -1;  pointer-events: none;} .compact-picker-shell {  --compact-picker-duration: 260ms;  --compact-picker-easing: cubic-bezier(0.32, 0, 0.2, 1);  --compact-picker-trigger-bg-tint: color-mix(    in srgb,    var(--fg-base) calc(var(--contrast) * 22%),    transparent  );  --compact-picker-trigger-bg-opacity: 0;  --compact-picker-trigger-bg-closed-opacity: 0.05;  --compact-picker-trigger-bg-delay: 0ms;  isolation: isolate;  overflow: visible;  transition: opacity var(--compact-picker-duration) var(--compact-picker-easing);} .compact-picker-card-frame {  border-radius: var(--compact-picker-frame-radius-x) / var(--compact-picker-frame-radius-y);  contain: paint;  isolation: isolate;  overflow: hidden;  transform-origin: top left;  will-change: border-radius, transform;} .compact-picker-card-shadow {  border-radius: var(--compact-picker-frame-radius-x) / var(--compact-picker-frame-radius-y);  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);  opacity: 0;  pointer-events: none;  transform-origin: top left;  transition: opacity var(--compact-picker-duration) var(--compact-picker-easing);  will-change: opacity, transform, border-radius;} [data-theme="light"] .compact-picker-shell[data-state="open"] .compact-picker-card-shadow {  opacity: 1;} .compact-picker-card-surface {  border-radius: inherit;  background:    linear-gradient(      color-mix(in srgb, var(--bg-base) 55%, transparent),      color-mix(in srgb, var(--bg-base) 55%, transparent)    ),    var(--surface-card);  backdrop-filter: blur(16px);  -webkit-backdrop-filter: blur(16px);} .compact-picker-card-surface::before {  content: "";  position: absolute;  inset: 0;  background: var(--compact-picker-trigger-bg-tint);  opacity: var(--compact-picker-trigger-bg-opacity);  pointer-events: none;  transition: opacity var(--compact-picker-duration) var(--compact-picker-easing)    var(--compact-picker-trigger-bg-delay);  will-change: opacity;} [data-theme="dark"] .compact-picker-shell {  --compact-picker-trigger-bg-tint: white;} [data-theme="light"] .compact-picker-shell {  --compact-picker-trigger-bg-tint: color-mix(in srgb, var(--fg-base) 60%, transparent);} .compact-picker-card-border {  border-color: var(--compact-picker-border-color);  border-radius: inherit;  border-style: solid;  border-width: var(--compact-picker-border-y-width) var(--compact-picker-border-x-width)    var(--compact-picker-border-y-width) var(--compact-picker-border-x-width);  box-sizing: border-box;  pointer-events: none;  transition: border-color 100ms ease-out;} .compact-picker-content-scale {  transform: scale(var(--compact-picker-content-scale-x), var(--compact-picker-content-scale-y));  transform-origin: top center;  will-change: transform;} .compact-picker-content {  opacity: 0;  transform: translate3d(0, -30px, 0);  transition:    opacity var(--compact-picker-duration) var(--compact-picker-easing),    transform var(--compact-picker-duration) var(--compact-picker-easing);  will-change: opacity, transform;} .compact-picker-content-open {  opacity: 1;  transform: translate3d(0, 0, 0);  transition-delay: 45ms;} /* CodeMirror autocomplete tooltip (wiki-link suggestions). Mirrors the   surface-card chrome but can't share the rule directly because   `--surface-card` is set to `transparent` in light mode (so settings-panel   static cards stay flat). The blur depends on the wiki-link extension   appending the tooltip to `document.body` via `tooltips({ parent:   document.body })`, otherwise `EditorScrollContainer`'s `mask-image`   ancestor neutralizes `backdrop-filter`. `!important` is required on   background/border/radius because `@codemirror/view`'s baseTheme injects   `&light .cm-tooltip { backgroundColor: #f5f5f5; border: 1px solid #bbb }`   after our stylesheet with higher specificity. */.cm-tooltip.cm-tooltip-autocomplete {  background: transparent !important;  backdrop-filter: blur(16px);  -webkit-backdrop-filter: blur(16px);  border: 1px solid var(--line-subtler) !important;  border-radius: 16px !important;  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);  isolation: isolate;} .cm-tooltip.cm-tooltip-autocomplete::before {  content: "";  position: absolute;  inset: 0;  border-radius: inherit;  background: color-mix(in srgb, var(--bg-base) 70%, transparent);  z-index: -1;  pointer-events: none;} [cmdk-dialog] {  position: fixed;  top: 16%;  left: 50%;  transform: translateX(-50%);  width: min(560px, 90vw);  z-index: 101;  overflow: hidden;} [cmdk-input] {  width: 100%;  padding: 14px 16px;  border: none;  border-bottom: 1px solid var(--line-subtler);  background: transparent;  color: var(--text-secondary);  font-size: 13px;  font-family: inherit;  letter-spacing: -0.02em;  outline: none;} [cmdk-list] {  max-height: 320px;  overflow: auto;  padding: 6px;  scrollbar-gutter: stable;} [cmdk-group-heading] {  padding: 6px 10px;  font-size: 11px;  color: var(--text-muted);  user-select: none;} [cmdk-item] {  padding: 10px 12px;  border-radius: 10px;   font-size: 13px;  color: var(--text-secondary);  letter-spacing: -0.02em;  user-select: none;} [cmdk-item][data-selected="true"] {  background: var(--surface-subtle);} [cmdk-empty] {  padding: 8px 12px;  font-size: 13px;  color: var(--text-muted);}