@media (prefers-color-scheme: dark) {
:root {
    --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    --font-mono-brutal: ui-monospace, SFMono-Regular, "Cascadia Code", "IBM Plex Mono", "Roboto Mono", "DejaVu Sans Mono", "Liberation Mono", Menlo, Monaco, "Consolas", "Source Code Pro", monospace;
    --color-neo-bg: #1F1D1A;
    --color-neo-text: #E8E3D8;
    --color-neo-border: #C8C2B5;
    --color-neo-blue: #2E5CFF;
    --color-neo-lime: #A5B888;
    --color-neo-orange: #e8912d;
    --col-tx: #E8E3D8 !important;
    --col-tx-alt: #A8A192 !important;
    --col-bg: #262624 !important;
    --col-bg-alt: #1F1E1D !important;
    --col-inline-code: #1F1D1A !important; /* dark text on sage chip */
    --col-inline-code-bg: #2E2B25 !important;
    --col-link: #E8E3D8 !important;
    --col-link-hover: #E8E3D8 !important;
    --col-url: #A8A192 !important;
    --col-tx-sel: #FFF !important;
    --col-msg-sel: color-mix(in srgb, #FFF, transparent 60%) !important;
    --col-bg-active: #2A2722 !important;
    --col-border: #58534E !important;
    --col-marker: var(--color-neo-orange);
    --col-accent: #E8E3D8;
}

/* Checkbox icon: glyph PNG colorized to the muted-burnt-amber
   `--color-neo-orange` (#B86A40), matching the ol/ul markers and code
   chip text color. */
.cm-s-hypermd-light span.cm-formatting-task.hmd-hidden-token {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAwCAMAAAA8VkqRAAAAclBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACa4vOeAAAAJXRSTlMADcjpDswcLZOzsvOYBvWdbtvTX0D69+ORa1dRJCDtuaF7ZDkoQyuUXgAAAMhJREFUOMvt0reywjAUhOFjKxmcrgMZboL//V8Rm6GwkNUx0LClvhkVZ1fEZoqHqMwO7wuUSb0YxcJKxtLpxIt2SzJRykkQp5RgdAjaIKRJCEn6gWdA9OzRoqLVRscQnc9bdtXX/eyurOF7N3erLVDPwCGHxoVwamH1LwGUBfBbhrCvoLlMitL9DY8trLtJg7qoCj18VAN1OYE/YJBuDe1RJtBVo5wbqPb+GL5yWG1GLX0YZYw5iQ93yQ/yAHfZzu5qt/mxr97VFS15JGSVM0C6AAAAAElFTkSuQmCC") !important;
    filter: brightness(0) saturate(100%) invert(63%) sepia(64%) saturate(2000%) hue-rotate(346deg) brightness(94%) contrast(95%);
}

#toolbar {
    padding-bottom: 8px !important;
}

#toolbar svg {
    stroke: var(--col-tx-alt) !important;
}

#toolbar button:hover svg {
    border-radius: 0;
    stroke: var(--color-neo-orange) !important;
}

#close-chat, #fullscreen-chat {
    color: var(--col-tx-alt) !important;
}

#open-chat-modal:hover svg {
   stroke: var(--col-accent) !important;
}

#close-chat:hover, #fullscreen-chat:hover {
    color: var(--color-neo-orange) !important;
}

#open-chat-modal svg {
    stroke: #F5F5F5 !important;
}

#close-sidebar, #close-editor2, #go-forward svg, #go-backward svg {
    color: var(--col-tx-alt) !important;
    stroke: var(--col-tx-alt) !important;
}

#close-sidebar:hover {
    color: var(--color-neo-orange) !important;
    stroke: var(--color-neo-orange) !important;
}

#close-editor2:hover, #go-forward:hover svg, #go-backward:hover svg {
    color: var(--color-neo-orange) !important;
    stroke: var(--color-neo-orange) !important;
}

/* The `×` glyph in Space Mono sits high in its line-box, so it visually
   lifts off the arrow row. Force a sans-serif on the button only - so
   the glyph renders at a natural baseline regardless of body font. */
#close-editor2 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

#open-sidebar {
    background: var(--col-bg-alt);
}

.message.own {
    background: color-mix(in srgb, var(--col-bg) 60%, transparent);
}

.to-recent-btn,
.action-btn svg {
    fill: var(--col-tx-alt);
    color: var(--col-tx-alt) !important;
    stroke: var(--col-tx-alt) !important;
}
.to-recent-btn:hover,
.action-btn:hover svg {
    fill: var(--col-accent);
    color: var(--col-accent) !important;
    stroke: var(--col-accent) !important;
}

/* Headers: heavy weight + a hard light rule under H1 / H2. */
.cm-s-hypermd-light .cm-header.cm-header-1 {
    font-size: 32px !important;
    line-height: 38px !important;
    font-weight: 700 !important;
}

.cm-s-hypermd-light pre.HyperMD-header.HyperMD-header-1 {
    padding-top: 18px !important;
    padding-bottom: 0 !important;
}

.cm-s-hypermd-light .CodeMirror-code > pre.HyperMD-header.HyperMD-header-1:first-child,
.cm-s-hypermd-light .CodeMirror-code > :first-child pre.HyperMD-header.HyperMD-header-1 {
    padding-top: 0 !important;
}

/* Keep the breathing room after the first H1; subsequent H1s stay tight. */
.cm-s-hypermd-light .CodeMirror-code pre.HyperMD-header.HyperMD-header-1:nth-child(1 of pre.HyperMD-header.HyperMD-header-1) {
    padding-bottom: 16px !important;
}

/* Header immediately after the first H1: drop its own top padding so we
   don't get stacked margins. */
.cm-s-hypermd-light .CodeMirror-code pre.HyperMD-header.HyperMD-header-1:nth-child(1 of pre.HyperMD-header.HyperMD-header-1) + pre.HyperMD-header {
    padding-top: 0 !important;
}

.cm-s-hypermd-light pre.HyperMD-header.HyperMD-header-2 {
    padding-top: 18px !important;
    padding-bottom: 6px !important;
    font-size: 24px !important;
    line-height: 30px !important;
    font-weight: 700 !important;
}

.cm-s-hypermd-light pre.HyperMD-header.HyperMD-header-3 {
    padding-top: 16px !important;
    padding-bottom: 5px !important;
    font-size: 22px !important;
    line-height: 28px !important;
    font-weight: 700 !important;
}

.cm-s-hypermd-light pre.HyperMD-header.HyperMD-header-4 {
    padding-top: 14px !important;
    padding-bottom: 4px !important;
    font-size: 20px !important;
    line-height: 26px !important;
    font-weight: 700 !important;
}

.cm-s-hypermd-light pre.HyperMD-header.HyperMD-header-5 {
    padding-top: 12px;
    padding-bottom: 4px;
    font-size: 18px;
    line-height: 24px !important;
    font-weight: 700 !important;
}

.cm-s-hypermd-light pre.HyperMD-header.HyperMD-header-6 .cm-header-6 {
    padding-top: 12px;
    padding-bottom: 4px;
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
}

.cm-s-hypermd-light .cm-header {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.cm-s-hypermd-light .cm-strong, .cm-s-hypermd-light span.cm-url {
    font-family: var(--font) !important;
    font-weight: 400;
}

.cm-s-hypermd-light span.cm-formatting-list-ol {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    color: var(--color-neo-orange) !important;
    font-weight: 700 !important;
}

.cm-s-hypermd-light .cm-formatting-list-ul {
    color: var(--color-neo-orange) !important;
}

.cm-s-hypermd-light .cm-strong {
    font-weight: 800;
}

.cm-s-hypermd-light pre.HyperMD-list-line {
    padding-top: 0 !important;
}

.cm-s-hypermd-light span.cm-url:not(.cm-string) {
    color: var(--col-url) !important;
    font-weight: 400;
}

.cm-s-hypermd-light span.cm-link,
.cm-s-hypermd-light span.cm-string.cm-url.cm-hmd-barelink {
    line-height: 1.6 !important;
    color: #6CB4E5 !important;
    background: transparent !important;
    border-bottom: 1px solid #6CB4E5 !important;
    font-weight: 500;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    transition: background .15s, color .15s;
}

.cm-s-hypermd-light pre.CodeMirror-activeline span.cm-link,
.cm-s-hypermd-light pre.CodeMirror-activeline span.cm-string.cm-url.cm-hmd-barelink {
    background: var(--color-neo-lime) !important;
    color: var(--color-neo-blue) !important;
    border-bottom: none !important;
}

.cm-s-hypermd-light span.cm-link:hover,
.cm-s-hypermd-light span.cm-string.cm-url.cm-hmd-barelink:hover {
    background: transparent !important;
    color: var(--color-neo-orange) !important;
    border-bottom: 3px solid var(--color-neo-orange) !important;
}

.cm-s-hypermd-light pre.HyperMD-quote-1:before {
    background: var(--color-neo-orange) !important;
    width: 4px !important;
}

.cm-s-hypermd-light pre.HyperMD-quote-1 {
    background: color-mix(in srgb, var(--color-neo-orange) 8%, var(--col-bg)) !important;
}
/* Match escape chars to the theme text color (hypermd.css default is too light). */
.cm-s-hypermd-light span.cm-hmd-escape-backslash,
.cm-s-hypermd-light span.cm-hmd-escape-char {
    color: var(--col-tx) !important;
}
/* Hide the leading/trailing "dummy" table separators HyperMD inserts. */
.cm-s-hypermd-light pre.HyperMD-table-row span.cm-hmd-table-sep.cm-hmd-table-sep-dummy {
    visibility: hidden !important;
}
/* Round the outer corners of a multi-line blockquote, matching the code-block treatment. */
.cm-s-hypermd-light pre.HyperMD-quote-1:first-child,
.cm-s-hypermd-light :not(pre.HyperMD-quote-1) + pre.HyperMD-quote-1 {
    border-top-left-radius: 7px !important;
    border-top-right-radius: 7px !important;
}
.cm-s-hypermd-light pre.HyperMD-quote-1:last-child,
.cm-s-hypermd-light pre.HyperMD-quote-1:has(+ :not(pre.HyperMD-quote-1)) {
    border-bottom-left-radius: 7px !important;
    border-bottom-right-radius: 7px !important;
}

.cm-s-hypermd-light span.cm-formatting-quote {
    color: var(--color-neo-orange);
    position: relative;
    left: 1px;
}

.cm-s-hypermd-light pre.HyperMD-quote-1.hmd-inactive-line {
    text-indent: -8px !important;
}

.cm-s-hypermd-light pre.HyperMD-quote-1:not(:has(span.cm-formatting-quote)) {
    text-indent: 0 !important;
}

.cm-s-hypermd-light .cm-inline-code,
.cm-s-hypermd-light code {
    font-family: var(--font-mono-brutal) !important;
}

.cm-s-hypermd-light span.cm-inline-code:not(.cm-formatting):not(.cm-hmd-indented-code) {
    font-family: var(--font-mono-brutal) !important;
    background: #28251F !important;
    color: var(--color-neo-orange) !important;
    border: 1px solid var(--col-border) !important;
    border-radius: 4px !important;
    padding: 0.1em 0.4em !important;
    font-size: 0.9em !important;
    position: relative;
    top: -1px;
}

.cm-s-hypermd-light div.HyperMD-codeblock-bg {
    background: var(--col-bg-alt) !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
}
.cm-s-hypermd-light div.HyperMD-codeblock-begin-bg {
    border-top-left-radius: 7px !important;
    border-top-right-radius: 7px !important;
}
.cm-s-hypermd-light div.HyperMD-codeblock-end-bg {
    border-bottom-left-radius: 7px !important;
    border-bottom-right-radius: 7px !important;
}
/* Raw-math chip tinted with the theme accent (neo-orange) instead of the
   code-block panel color, so editable math stands out distinctly from code. */
.cm-s-hypermd-light span.cm-math,
.cm-s-hypermd-light span.hmd-fold-math-placeholder {
    background: color-mix(in srgb, var(--color-neo-orange), transparent 75%) !important;
}

.cm-s-hypermd-light pre.HyperMD-codeblock {
    font-family: var(--font-mono-brutal) !important;
    font-size: 0.9em !important;
    padding-left: 20px !important;
    color: var(--col-tx) !important;
}

.cm-hmd-comment,
.cm-hmd-comment-marker {
    color: var(--color-neo-lime) !important;
}
.cm-s-hypermd-light pre.hmd-inactive-line .cm-hmd-comment-marker {
    display: none;
}

@keyframes sidebar-highlight-brutal {
    0%   { color: var(--color-neo-orange); opacity: 1; }
    20%  { color: var(--color-neo-orange); opacity: 0.7; }
    25%  { color: var(--color-neo-orange); opacity: 0.5; }
    30%  { color: var(--color-neo-orange); opacity: 0.7; }
    45%  { color: var(--color-neo-orange); opacity: 1; }
    50%  { color: var(--color-neo-orange); opacity: 0.5; }
    55%  { color: var(--color-neo-orange); opacity: 0.7; }
    75%  { color: var(--color-neo-orange); opacity: 1; }
    100% { color: var(--color-neo-orange); opacity: 1; }
}
.sidebar-blink {
    animation-name: sidebar-highlight-brutal !important;
}

.cm-s-hypermd-light img.hmd-image {
    border-radius: 7px !important;
    border: none !important;
}

.cm-s-hypermd-light pre.HyperMD-hr {
    color: var(--col-border) !important;
    background: transparent !important;
}

.cm-s-hypermd-light div.HyperMD-hr-bg {
    background: var(--col-border) !important;
    height: 2px !important;
}

::selection {
    background: color-mix(in srgb, var(--color-neo-blue), transparent 60%) !important;
}
::-moz-selection {
    background: color-mix(in srgb, var(--color-neo-blue), transparent 60%) !important;
}
.CodeMirror-selected,
.CodeMirror-focused .CodeMirror-selected {
    background: color-mix(in srgb, var(--color-neo-blue), transparent 60%) !important;
}


.tree-container li span.tree-item {
    border-radius: 0 !important;
}

.tree-container li span.tree-item:hover {
    background-color: var(--color-neo-orange) !important;
    color: #1F1D1A !important;
}
.tree-container li span.tree-item:hover .tree-mod_icon svg {
    stroke: #1F1D1A !important;
}

.tree-container span.tree-item.tree-leaf.selected,
.tree-container span.tree-item.tree-leaf.selected:hover {
    background-color: var(--color-neo-blue) !important;
    color: #E8E3D8 !important;
}
.tree-container span.tree-item.tree-leaf.selected .tree-mod_icon svg,
.tree-container span.tree-item.tree-leaf.selected:hover .tree-mod_icon svg {
    stroke: #E8E3D8 !important;
}

#search-results .focused,
#move-results .focused {
    background-color: var(--color-neo-orange) !important;
    color: #1F1D1A !important;
    border-radius: 0 !important;
}

.message {
    transition: background 0.15s ease !important;
}
.message:hover {
    background: #000 !important;
}
.complete-btn:hover {
    background: transparent !important;
}
#chat .message-content,
#chat .message-content:hover {
    background: transparent !important;
    cursor: pointer !important;
}
.message-content.editing {
    background: color-mix(in srgb, var(--color-neo-lime) 25%, transparent) !important;
    border: 1px solid var(--color-neo-blue) !important;
}
.message-time {
    color: var(--col-tx-alt) !important;
}
.action-btn:hover {
    background: var(--color-neo-orange) !important;
}
.message.actions-pinned,
.message.selected {
    background: color-mix(in srgb, var(--color-neo-blue) 18%, transparent) !important;
    border-color: var(--color-neo-blue) !important;
}

.cm-s-hypermd-light .CodeMirror-line {
    line-height: 1.9 !important;
}

.empty-title {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    letter-spacing: normal;
}
.empty-title {
    font-weight: 400 !important;
    font-size: 28px !important;
    margin-bottom: 20px !important;
}
#search, #move,
#search-input, #move-input,
.message-content,
.message-actions,
.CodeMirror-hints,
.CodeMirror-hint,
.sidebar-ctx-menu {
    border-radius: 0 !important;
}

#chat-container.modal {
    border-radius: 7px !important;
}
#chat-input {
    border-radius: 6px !important;
}

.CodeMirror-hints,
.CodeMirror-hint {
    font-family: var(--font) !important;
}
.CodeMirror-hint-active {
    background-color: var(--color-neo-orange) !important;
    color: #1F1D1A !important;
}
.sidebar-ctx-menu-item:hover {
    background: var(--color-neo-orange) !important;
    color: #1F1D1A !important;
}

/* Tooltips in dark theme: solid black bubble + light text (rather than the
   inverted off-white that --col-accent would give us). Stands out clearly
   over the dark page. */
#toolbar button::after,
#close-sidebar::after,
#go-backward::after,
#go-forward::after,
#close-editor2::after,
.btn-label {
    background: #000 !important;
    color: #E8E3D8 !important;
}
#toolbar button::before,
#close-sidebar::before,
#go-backward::before,
#go-forward::before,
#close-editor2::before {
    border-bottom-color: #000 !important;
}
.btn-label::after {
    border-top-color: #000 !important;
}
} /* end @media (prefers-color-scheme: dark) */