@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
    color-scheme: dark;
    --page: #252a2f;
    --surface: #2d3339;
    --surface-soft: #30373e;
    --surface-raised: #363e46;
    --surface-hover: #3b444d;
    --line: rgba(173, 196, 219, 0.16);
    --line-strong: rgba(161, 194, 224, 0.32);
    --text: #e8edf3;
    --text-soft: #bec9d4;
    --muted: #84919d;
    --blue: #91b7db;
    --blue-strong: #a9c9ea;
    --mint: #a9d4bd;
    --gold: #e3c38f;
    --rose: #e1abb2;
    --lilac: #d8b8d9;
    --danger: #e49da3;
    --shadow: 0 24px 70px rgba(6, 10, 14, 0.25);
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    min-height: 100%;
    margin: 0;
}

body {
    overflow: hidden;
    background:
        radial-gradient(circle at 75% 0%, rgba(112, 145, 174, 0.08), transparent 34%),
        var(--page);
    color: var(--text);
    font-family: "Inter", "Segoe UI", sans-serif;
    letter-spacing: 0;
}

button,
input,
select {
    font: inherit;
}

button,
a,
select {
    -webkit-tap-highlight-color: transparent;
}

button {
    color: inherit;
}

.vault-app {
    display: grid;
    grid-template-rows: 60px minmax(0, 1fr);
    height: 100vh;
    min-height: 0;
}

.vault-header {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 0 18px;
    border-bottom: 1px solid var(--line);
    background: rgba(39, 45, 51, 0.88);
    backdrop-filter: blur(16px);
}

.header-actions,
.editor-header-actions,
.dialog-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vault-header .header-actions {
    justify-self: end;
}

.icon-button,
.mini-icon-button,
.format-button,
.clear-search {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    padding: 0;
    border: 0;
    outline: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: color 130ms ease, background 130ms ease, outline-color 130ms ease, transform 130ms ease;
}

.icon-button {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    color: var(--text-soft);
}

.icon-button:hover,
.icon-button:focus-visible,
.mini-icon-button:hover,
.mini-icon-button:focus-visible,
.format-button:hover,
.format-button:focus-visible,
.clear-search:hover,
.clear-search:focus-visible {
    color: var(--text);
    outline-color: var(--line-strong);
    background: rgba(145, 183, 219, 0.1);
}

.icon-button:active,
.mini-icon-button:active,
.format-button:active {
    transform: translateY(1px);
}

.icon-button svg,
.mini-icon-button svg,
.format-button svg,
.clear-search svg,
.metadata-icon svg,
.search-shell svg,
.folder-glyph svg,
.editor-empty svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.primary-icon {
    color: #20303d;
    background: var(--blue);
}

.primary-icon:hover,
.primary-icon:focus-visible {
    color: #15232e;
    outline-color: #c0d7eb;
    background: #a4c5e2;
}

.home-button {
    color: var(--muted);
    text-decoration: none;
}

.compact-icon {
    width: 34px;
    height: 34px;
}

.danger-icon:hover,
.danger-icon:focus-visible {
    color: var(--danger);
    background: rgba(225, 171, 178, 0.08);
    outline-color: rgba(225, 171, 178, 0.28);
}

.sync-status {
    min-width: 46px;
    color: var(--muted);
    font-size: 12px;
    text-align: right;
}

.sync-status.is-error {
    color: var(--danger);
}

.vault-workspace {
    display: grid;
    grid-template-columns: 248px 330px minmax(420px, 1fr);
    min-height: 0;
    overflow: hidden;
}

.folder-pane,
.note-pane,
.editor-pane {
    min-width: 0;
    min-height: 0;
    background: rgba(45, 51, 57, 0.78);
}

.folder-pane,
.note-pane {
    border-right: 1px solid var(--line);
}

.folder-pane {
    overflow-y: auto;
    padding: 14px 10px 18px;
    scrollbar-width: thin;
    scrollbar-color: rgba(143, 182, 217, 0.28) transparent;
}

.search-shell {
    position: relative;
    display: flex;
    align-items: center;
    height: 38px;
    margin: 0 4px 14px;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(27, 32, 37, 0.46);
    transition: border-color 140ms ease, background 140ms ease;
}

.search-shell:focus-within {
    color: var(--blue-strong);
    border-color: rgba(145, 183, 219, 0.45);
    background: rgba(27, 32, 37, 0.66);
}

.search-shell > svg {
    width: 18px;
    height: 18px;
    margin-left: 10px;
}

.search-shell input {
    min-width: 0;
    width: 100%;
    height: 100%;
    padding: 0 34px 0 9px;
    color: var(--text);
    border: 0;
    outline: 0;
    background: transparent;
}

.search-shell input::placeholder,
.note-title::placeholder,
.tag-input::placeholder {
    color: #7e8a95;
}

.clear-search {
    position: absolute;
    right: 4px;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
}

.search-shell.has-value .clear-search {
    opacity: 1;
    pointer-events: auto;
}

.clear-search svg {
    width: 16px;
    height: 16px;
}

.folder-nav,
.folder-list {
    display: grid;
    gap: 3px;
}

.folder-row-wrap {
    position: relative;
    min-width: 0;
}

.folder-row {
    position: relative;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 38px;
    padding: 5px 8px;
    overflow: hidden;
    color: var(--text-soft);
    text-align: left;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    transition: color 130ms ease, border-color 130ms ease, background 130ms ease;
}

.folder-row:hover,
.folder-row:focus-visible {
    color: var(--text);
    border-color: rgba(177, 198, 218, 0.11);
    background: rgba(255, 255, 255, 0.035);
    outline: 0;
}

.folder-row.is-active {
    color: #eef5fb;
    border-color: rgba(145, 183, 219, 0.17);
    background: rgba(145, 183, 219, 0.11);
}

.folder-row > span:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.folder-glyph {
    position: relative;
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    color: var(--folder-color, var(--blue));
}

.folder-glyph::after {
    content: "";
    position: absolute;
    left: -8px;
    width: 3px;
    height: 22px;
    border-radius: 2px;
    background: var(--folder-color, transparent);
    opacity: 0.85;
}

.folder-glyph svg {
    width: 18px;
    height: 18px;
}

.all-notes-glyph {
    --folder-color: #93b8da;
}

.unfiled-glyph {
    --folder-color: #a7b3bf;
}

.row-count {
    color: var(--muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.folder-more {
    position: absolute;
    right: 4px;
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    color: var(--muted);
    border: 0;
    border-radius: 5px;
    background: var(--surface-soft);
    opacity: 0;
    cursor: pointer;
    transition: opacity 120ms ease, color 120ms ease, background 120ms ease;
}

.folder-row-wrap:hover .folder-more,
.folder-row-wrap:focus-within .folder-more,
.folder-more:focus-visible {
    opacity: 1;
}

.folder-more:hover,
.folder-more:focus-visible {
    color: var(--text);
    background: var(--surface-hover);
    outline: 1px solid var(--line-strong);
}

.folder-more svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
}

.section-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 34px;
    margin: 14px 8px 4px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.mini-icon-button {
    width: 27px;
    height: 27px;
    color: var(--muted);
    border-radius: 6px;
}

.mini-icon-button svg {
    width: 16px;
    height: 16px;
}

.tag-filter-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 8px;
}

.tag-section[hidden] {
    display: none;
}

.tag-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 27px;
    max-width: 100%;
    padding: 3px 9px;
    color: #b9c5cf;
    font-size: 12px;
    border: 1px solid rgba(192, 207, 221, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.025);
    cursor: pointer;
}

.tag-filter:hover,
.tag-filter:focus-visible,
.tag-filter.is-active {
    color: #e9f0f5;
    border-color: rgba(169, 212, 189, 0.38);
    background: rgba(169, 212, 189, 0.08);
    outline: 0;
}

.tag-filter span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tag-filter .row-count {
    color: inherit;
    opacity: 0.62;
}

.note-pane {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

.note-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 72px;
    padding: 13px 14px;
    border-bottom: 1px solid var(--line);
}

.note-list-kicker,
.note-list-count {
    margin: 0;
}

.note-list-kicker {
    overflow: hidden;
    color: #e8eef4;
    font-size: 15px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.note-list-count {
    margin-top: 2px;
    color: var(--muted);
    font-size: 11px;
}

.note-list {
    min-height: 0;
    overflow-y: auto;
    padding: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(143, 182, 217, 0.28) transparent;
}

.note-list-item {
    position: relative;
    display: block;
    width: 100%;
    min-height: 104px;
    margin: 0 0 6px;
    padding: 13px 13px 12px 16px;
    overflow: hidden;
    color: inherit;
    text-align: left;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    cursor: pointer;
    transition: border-color 130ms ease, background 130ms ease;
}

.note-list-item::before {
    content: "";
    position: absolute;
    inset: 10px auto 10px 4px;
    width: 3px;
    border-radius: 3px;
    background: var(--note-folder-color, #77838e);
    opacity: 0.82;
}

.note-list-item:hover,
.note-list-item:focus-visible {
    border-color: rgba(183, 204, 223, 0.13);
    background: rgba(255, 255, 255, 0.032);
    outline: 0;
}

.note-list-item.is-active {
    border-color: rgba(145, 183, 219, 0.25);
    background: rgba(145, 183, 219, 0.085);
}

.note-list-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    overflow: hidden;
    color: #eef3f7;
    font-size: 14px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.note-list-title svg {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    fill: var(--gold);
    stroke: var(--gold);
}

.note-list-preview {
    display: -webkit-box;
    margin: 6px 0 7px;
    overflow: hidden;
    color: #aab6c1;
    font-size: 12px;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.note-list-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #77848f;
    font-size: 10px;
}

.note-list-tags {
    display: flex;
    min-width: 0;
    gap: 4px;
    overflow: hidden;
}

.note-list-tag {
    overflow: hidden;
    padding: 1px 5px;
    color: #9eb9ce;
    border-radius: 999px;
    background: rgba(143, 182, 217, 0.08);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.note-list-empty {
    display: grid;
    min-height: 180px;
    place-items: center;
    color: #77838f;
    font-size: 13px;
}

.editor-pane {
    position: relative;
    overflow: hidden;
}

.editor-empty {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    color: rgba(157, 176, 194, 0.18);
}

.editor-empty[hidden] {
    display: none;
}

.editor-empty svg {
    width: 72px;
    height: 72px;
    stroke-width: 1.1;
}

.editor-active {
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    width: 100%;
    height: 100%;
    min-height: 0;
}

.editor-active[hidden] {
    display: none;
}

.editor-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 20px 5px;
}

.note-title {
    min-width: 0;
    width: 100%;
    padding: 0;
    overflow: hidden;
    color: #f0f4f7;
    font-size: clamp(21px, 1.8vw, 28px);
    font-weight: 600;
    line-height: 1.15;
    text-overflow: ellipsis;
    border: 0;
    outline: 0;
    background: transparent;
}

#pin-note-button[aria-pressed="true"] {
    color: var(--gold);
    background: rgba(227, 195, 143, 0.08);
    outline-color: rgba(227, 195, 143, 0.24);
}

.note-metadata {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    padding: 0 20px 8px;
}

.folder-select-shell {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 8px;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.022);
}

.metadata-icon {
    display: grid;
    place-items: center;
}

.metadata-icon svg {
    width: 16px;
    height: 16px;
}

.folder-select-shell select {
    max-width: 190px;
    min-height: 28px;
    padding: 0 20px 0 7px;
    color: var(--text-soft);
    border: 0;
    outline: 0;
    background: transparent;
    cursor: pointer;
}

.folder-select-shell option {
    color: var(--text);
    background: #30373e;
}

.note-tags {
    display: contents;
}

.note-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 29px;
    padding: 3px 6px 3px 9px;
    color: #b7cbda;
    font-size: 12px;
    border: 1px solid rgba(143, 182, 217, 0.16);
    border-radius: 999px;
    background: rgba(143, 182, 217, 0.065);
}

.remove-tag {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    padding: 0;
    color: inherit;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.remove-tag:hover,
.remove-tag:focus-visible {
    color: #edf4f8;
    background: rgba(255, 255, 255, 0.08);
    outline: 0;
}

.remove-tag svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
}

.tag-input {
    width: 74px;
    min-height: 29px;
    padding: 3px 7px;
    color: var(--text-soft);
    font-size: 12px;
    border: 1px solid transparent;
    border-radius: 6px;
    outline: 0;
    background: transparent;
}

.tag-input:focus {
    width: 120px;
    border-color: var(--line-strong);
    background: rgba(255, 255, 255, 0.025);
}

.editor-toolbar {
    display: flex;
    align-items: center;
    gap: 3px;
    min-height: 46px;
    padding: 6px 20px;
    overflow-x: auto;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    scrollbar-width: none;
}

.editor-toolbar::-webkit-scrollbar {
    display: none;
}

.format-select {
    flex: 0 0 auto;
    width: 92px;
    height: 31px;
    padding: 0 8px;
    color: var(--text-soft);
    font-size: 12px;
    border: 1px solid transparent;
    border-radius: 6px;
    outline: 0;
    background: transparent;
    cursor: pointer;
}

.format-select:hover,
.format-select:focus-visible {
    color: var(--text);
    border-color: var(--line-strong);
    background: rgba(145, 183, 219, 0.08);
}

.format-select option {
    color: var(--text);
    background: #30373e;
}

.format-button {
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    color: #aeb9c4;
    font-size: 13px;
    border-radius: 6px;
}

.format-button.is-active {
    color: #eef4f8;
    outline-color: rgba(145, 183, 219, 0.3);
    background: rgba(145, 183, 219, 0.14);
}

.format-button svg {
    width: 18px;
    height: 18px;
}

.italic-button {
    font-family: Georgia, serif;
    font-style: italic;
}

.underline-button {
    text-decoration: underline;
}

.strike-symbol {
    text-decoration: line-through;
}

.toolbar-divider {
    flex: 0 0 1px;
    width: 1px;
    height: 21px;
    margin: 0 5px;
    background: var(--line);
}

.text-colors {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    padding: 0 4px;
}

.text-color,
.folder-color {
    width: 18px;
    height: 18px;
    padding: 0;
    border: 3px solid transparent;
    border-radius: 50%;
    outline: 1px solid rgba(255, 255, 255, 0.1);
    background: var(--color, #dfe6ec);
    background-clip: padding-box;
    cursor: pointer;
    transition: outline-color 120ms ease, transform 120ms ease;
}

.text-color:nth-child(2) { --color: #a9c9ea; }
.text-color:nth-child(3) { --color: #a9d4bd; }
.text-color:nth-child(4) { --color: #e3c38f; }
.text-color:nth-child(5) { --color: #d8b8d9; }
.text-color:nth-child(6) { --color: #e1abb2; }

.text-color.is-default {
    --color: #e8edf3;
}

.text-color:hover,
.text-color:focus-visible,
.text-color.is-active,
.folder-color:hover,
.folder-color:focus-visible,
.folder-color.is-active {
    outline-color: rgba(235, 243, 250, 0.72);
    transform: scale(1.12);
}

.clear-format-button {
    margin-left: 3px;
}

.note-editor {
    min-height: 0;
    padding: 26px clamp(24px, 5vw, 72px) 72px;
    overflow-y: auto;
    overscroll-behavior: contain;
    color: #dfe6ec;
    font-size: 16px;
    line-height: 1.72;
    outline: 0;
    caret-color: var(--blue-strong);
    scrollbar-width: thin;
    scrollbar-color: rgba(143, 182, 217, 0.28) transparent;
}

.note-editor:empty::before {
    content: attr(data-placeholder);
    color: #6f7b85;
    pointer-events: none;
}

.note-editor h1,
.note-editor h2,
.note-editor h3,
.note-editor h4,
.note-editor p,
.note-editor ul,
.note-editor ol,
.note-editor blockquote,
.note-editor pre {
    max-width: 880px;
}

.note-editor h1,
.note-editor h2,
.note-editor h3,
.note-editor h4 {
    margin: 1.25em 0 0.42em;
    color: #f0f4f7;
    line-height: 1.24;
}

.note-editor h2 {
    font-size: 1.65em;
}

.note-editor h3 {
    color: #d5e1eb;
    font-size: 1.28em;
}

.note-editor p {
    margin: 0 0 0.86em;
}

.note-editor ul,
.note-editor ol {
    margin: 0.35em 0 1em;
    padding-left: 1.65em;
}

.note-editor li {
    margin: 0.22em 0;
}

.note-editor blockquote {
    margin: 1em 0;
    padding: 2px 0 2px 16px;
    color: #bdc9d3;
    border-left: 3px solid var(--lilac);
}

.note-editor code,
.note-editor pre {
    font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
}

.note-editor code {
    padding: 0.12em 0.34em;
    color: #c9dcec;
    border-radius: 4px;
    background: rgba(17, 23, 28, 0.48);
}

.note-editor pre {
    padding: 14px 16px;
    overflow-x: auto;
    color: #c9dcec;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(17, 23, 28, 0.48);
}

.note-editor a {
    color: var(--blue-strong);
    text-decoration-color: rgba(169, 201, 234, 0.4);
    text-underline-offset: 3px;
}

.note-editor hr {
    max-width: 880px;
    margin: 1.5em 0;
    border: 0;
    border-top: 1px solid var(--line-strong);
}

.vault-dialog {
    width: min(440px, calc(100vw - 28px));
    padding: 0;
    color: var(--text);
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: #31383f;
    box-shadow: var(--shadow);
}

.vault-dialog::backdrop {
    background: rgba(12, 16, 20, 0.62);
    backdrop-filter: blur(4px);
}

.vault-dialog form {
    padding: 20px;
}

.dialog-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.dialog-title-row input {
    min-width: 0;
    height: 44px;
    padding: 0 12px;
    color: var(--text);
    font-size: 18px;
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    outline: 0;
    background: rgba(21, 26, 30, 0.42);
}

.dialog-title-row input:focus {
    border-color: rgba(145, 183, 219, 0.62);
}

.folder-colors {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 2px 24px;
}

.folder-color {
    width: 24px;
    height: 24px;
}

.dialog-actions {
    justify-content: flex-end;
    min-height: 38px;
}

.dialog-actions .danger-text:first-child {
    margin-right: auto;
}

.text-button {
    min-height: 36px;
    padding: 0 13px;
    color: var(--text-soft);
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.025);
    cursor: pointer;
}

.text-button:hover,
.text-button:focus-visible {
    color: var(--text);
    border-color: var(--line-strong);
    outline: 0;
    background: rgba(255, 255, 255, 0.05);
}

.primary-text-button {
    color: #1f2d38;
    border-color: var(--blue);
    background: var(--blue);
}

.primary-text-button:hover,
.primary-text-button:focus-visible {
    color: #14212b;
    background: #a4c5e2;
}

.danger-text {
    color: var(--danger);
}

.confirm-dialog {
    width: min(380px, calc(100vw - 28px));
}

.confirm-dialog p {
    margin: 4px 0 24px;
    color: #e6ebef;
    font-size: 16px;
}

.toast {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 100;
    max-width: min(360px, calc(100vw - 36px));
    padding: 9px 12px;
    color: #eaf0f4;
    font-size: 12px;
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    background: rgba(36, 43, 49, 0.95);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.26);
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 150ms ease, transform 150ms ease;
}

.toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 1050px) {
    body {
        overflow: auto;
    }

    .vault-app {
        min-height: 100vh;
    }

    .vault-workspace {
        grid-template-columns: 215px 290px minmax(390px, 1fr);
        overflow-x: auto;
    }
}

@media (max-width: 760px) {
    body {
        overflow: auto;
    }

    .vault-app {
        display: block;
        height: auto;
        min-height: 100vh;
    }

    .vault-header {
        position: sticky;
        top: 0;
        z-index: 30;
        height: 56px;
        padding: 0 10px;
    }

    .vault-workspace {
        display: block;
        overflow: visible;
    }

    .folder-pane,
    .note-pane,
    .editor-pane {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .folder-pane {
        overflow: visible;
        padding: 12px 8px;
    }

    .folder-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .folder-nav .section-label-row,
    .folder-list {
        grid-column: 1 / -1;
    }

    .folder-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tag-section {
        display: none;
    }

    .note-pane {
        min-height: 300px;
        max-height: 42vh;
    }

    .editor-pane {
        min-height: 68vh;
    }

    .editor-active {
        min-height: 68vh;
    }

    .editor-header {
        padding: 10px 14px 5px;
    }

    .note-metadata {
        padding: 0 14px 8px;
    }

    .editor-toolbar {
        padding-right: 11px;
        padding-left: 11px;
    }

    .note-editor {
        height: 58vh;
        min-height: 52vh;
        max-height: 58vh;
        padding: 20px 16px 62px;
    }

}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}