* { box-sizing: border-box; margin: 0; padding: 0; font-family: Inter, Arial, sans-serif; }
    *::-webkit-scrollbar {
      width: 14px;
      height: 14px;
      background: transparent;
    }
    *::-webkit-scrollbar-track,
    *::-webkit-scrollbar-track-piece,
    *::-webkit-scrollbar-corner {
      background: transparent;
      border: 0;
      box-shadow: none;
    }
    *::-webkit-scrollbar-thumb {
      min-height: 32px;
      background-color: color-mix(in srgb, var(--flow-accent-2, #777) 16%, transparent);
      background-clip: padding-box;
      border: 4px solid transparent;
      border-radius: 999px;
      box-shadow: none;
    }
    *::-webkit-scrollbar-thumb:hover,
    *::-webkit-scrollbar-thumb:active {
      background-color: var(--flow-accent, #999);
    }
    *::-webkit-scrollbar-button,
    *::-webkit-scrollbar-button:single-button,
    *::-webkit-scrollbar-button:vertical:start:decrement,
    *::-webkit-scrollbar-button:vertical:end:increment {
      display: none;
      width: 0;
      height: 0;
      background: transparent;
    }
    * {
      scrollbar-width: thin;
      scrollbar-color: color-mix(in srgb, var(--flow-accent-2, #777) 18%, transparent) transparent;
    }

    :root {
      --left-panel: 360px;
      --doc-panel: 460px;
      --bg: #202020;
      --panel: #1f1f1f;
      --border: #383838;
      --text: #dedede;
      --muted: #a4a4a4;
      --danger-bg: #3a2525;
      --danger-border: #5f3737;
    }

    html { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--bg); }
    body { width: 100%; min-width: 100vw; height: 100vh; height: 100dvh; margin: 0; overflow: hidden; background: var(--bg); color: var(--text); }
    body.graph-full-mode .app { display: block !important; width: 100vw !important; width: 100dvw !important; height: 100vh !important; height: 100dvh !important; overflow: hidden !important; }
    body.graph-full-mode .canvas-wrap { position: fixed !important; inset: 0 !important; width: 100vw !important; width: 100dvw !important; height: 100vh !important; height: 100dvh !important; border: none !important; z-index: 1 !important; }
    body.graph-full-mode .left-panel, body.graph-full-mode .doc-panel { display: none !important; }

    .app {
      display: grid;
      grid-template-columns: var(--left-panel) 1fr var(--doc-panel);
      height: 100vh;
      height: 100dvh;
      width: 100vw;
      width: 100dvw;
      overflow: hidden;
      transition: grid-template-columns 220ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .panel, .doc-panel {
      background: var(--panel);
      border-right: 1px solid var(--border);
      padding: 18px;
      overflow: auto;
      z-index: 80;
      min-width: 0;
      transition: opacity 220ms ease;
    }

    .left-panel {
      position: relative;
      overflow-x: hidden;
      overflow-y: auto;
      scrollbar-gutter: stable;
      background: rgba(31,31,31,0.08);
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
    }
    .left-panel > *:not(.input-glass-bg) { position: relative; z-index: 2; }
    
    .left-panel textarea,
.left-panel input,
.left-panel select,
.left-panel button { background: rgba(25,25,25,0.34); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
    .left-panel textarea, .left-panel input, .left-panel select { color: #f1f1f1; }
    .left-panel button { color: #f1f1f1; }
    .left-panel .danger { background: rgba(58,37,37,0.45); }

    .doc-panel { border-left: 1px solid var(--border); border-right: none; padding: 0; display: flex; flex-direction: column; position: relative; overflow: hidden; }
    .doc-glass-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: none; z-index: 0; pointer-events: none; background: #202020; }
    .doc-panel.doc-glass .doc-glass-bg { display: block; }
    .doc-panel.doc-glass { background: rgba(31,31,31,0.08); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
    .doc-panel.doc-glass .doc-header { background: rgba(31,31,31,0.12); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
    .doc-panel.doc-glass .doc-body { background: rgba(32,32,32,0.03); }
    .doc-panel.doc-glass .doc-empty { color: rgba(235,235,235,0.62); text-shadow: 0 2px 10px rgba(0,0,0,0.55); }
    body.hide-left .left-panel, body.hide-doc .doc-panel { padding: 0; opacity: 0; pointer-events: none; overflow: hidden; border: none; }

    h1 { font-size: 22px; margin-bottom: 8px; color: #f0f0f0; letter-spacing: -0.03em; }
    .subtitle { font-size: 13px; color: var(--muted); line-height: 1.45; margin-bottom: 16px; }

    textarea, input, select { width: 100%; background: #191919; color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 12px; outline: none; font-size: 14px; }
    textarea { min-height: 300px; resize: vertical; line-height: 1.45; }
    textarea:focus, input:focus, select:focus { border-color: #555; box-shadow: 0 0 0 2px rgba(255,255,255,0.035); }
    label { display: block; font-size: 13px; color: #c6c6c6; margin: 14px 0 6px; }

    button { border: 1px solid #474747; border-radius: 10px; padding: 11px 14px; font-weight: 800; cursor: pointer; color: #ededed; background: #303030; transition: background 120ms ease, border 120ms ease, transform 120ms ease; font-size: 14px; }
    button:hover { background: #3a3a3a; border-color: #5a5a5a; }
    button:active { transform: translateY(1px); }

    .danger { background: var(--danger-bg); border-color: var(--danger-border); color: #f0cccc; }
    .danger:hover { background: #4a2c2c; border-color: #7a4444; }

    .canvas-wrap { position: relative; overflow: hidden; background: #202020; cursor: grab; user-select: none; isolation: isolate; }
    .canvas-wrap.panning, .canvas-wrap.dragging-node { cursor: grabbing; }
    .canvas-wrap.right-link-gesture { cursor: grabbing; }
    .canvas-wrap.structure-box-gesture { cursor: crosshair; }
    .canvas-wrap.right-link-gesture.connecting-link { cursor: crosshair; }
    .canvas-wrap.right-link-gesture.breaking-link { cursor: not-allowed; }
    #graphCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #202020; z-index: 0; }
    /* GPU layer (plain links, dots, names) and the Canvas layer above it: see graphGpuBeginFrame */
    #graphGpuCanvas, #graphOverlayCanvas { position: absolute; left: 0; top: 0; display: none; pointer-events: none; z-index: 0; }
    #graphTransitionCanvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
      pointer-events: none;
      background: #202020;
      object-fit: cover;
      opacity: 0;
      visibility: hidden;
      z-index: 1;
      transition: opacity var(--graph-transition-fade, 180ms) ease-out;
    }
    #graphTransitionCanvas.active {
      opacity: 1;
      visibility: visible;
      transition: none;
    }
    #graphTransitionCanvas.releasing {
      opacity: 0;
      visibility: visible;
      transition: opacity var(--graph-transition-fade, 180ms) ease-out;
    }

    /* One-frame layout commit cover for Graph Full.
       It prevents the previous split layout from appearing before the full-size canvas paints. */
    #graphFullLayoutCover {
      position: fixed;
      inset: 0;
      width: 100vw;
      height: 100vh;
      width: 100dvw;
      height: 100dvh;
      display: block;
      pointer-events: none;
      background: #202020;
      opacity: 0;
      visibility: hidden;
      z-index: 999996;
      transition: opacity 90ms ease-out;
    }
    #graphFullLayoutCover.active {
      opacity: 1;
      visibility: visible;
      transition: none;
    }
    #graphFullLayoutCover.releasing {
      opacity: 0;
      visibility: visible;
      transition: opacity 90ms ease-out;
    }

    .topbar { position: fixed; top: 12px; left: 0; right: 0; z-index: 999997; display: flex; gap: 10px; align-items: flex-start; justify-content: center; pointer-events: none; opacity: 0; transform: translateY(-12px); transition: opacity 160ms ease, transform 160ms ease; }
    body.topbar-visible .topbar, .topbar:hover { opacity: 1; transform: translateY(0); }
    .topbar-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; pointer-events: none; }
    
    .hint-chip, .zoom-chip { background: rgba(31,31,31,0.86); border: 1px solid #3a3a3a; color: var(--text); padding: 9px 12px; border-radius: 999px; font-size: 12px; font-weight: 750; backdrop-filter: blur(3px); box-shadow: 0 12px 32px rgba(0,0,0,0.18); }
    .hint-chip { color: var(--muted); font-weight: 650; }
    .topbar button { pointer-events: auto; padding: 8px 11px; font-size: 12px; border-radius: 999px; background: rgba(31,31,31,0.88); border-color: #3a3a3a; }
    .settings-button { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0 !important; font-size: 18px !important; border-radius: 12px !important; }
    #nodeStyleBtn { display: none; }
    body.has-selected-node #nodeStyleBtn { display: inline-flex; }

    .settings-popover, .node-style-popover { position: fixed; top: 62px; right: 14px; width: 340px; max-height: calc(100vh - 84px); overflow: auto; z-index: 999999; background: rgba(31,31,31,0.98); border: 1px solid #3a3a3a; border-radius: 16px; padding: 14px; box-shadow: 0 20px 50px rgba(0,0,0,0.45); backdrop-filter: blur(3px); display: none; pointer-events: auto; }
    .node-style-popover { width: 300px; right: 108px; }
    
    body.show-settings #settingsPanel { display: block; }
    body.show-graph-settings #graphSettingsPanel { display: block; }
    body.show-node-style .node-style-popover { display: block; }

    .control-title { font-size: 13px; color: #e2e2e2; font-weight: 850; margin-bottom: 10px; }
    .settings-section { border-top: 1px solid #343434; margin-top: 0; }
    .settings-section:first-child { border-top: none; }
    .settings-heading { color: #e2e2e2; font-size: 13px; font-weight: 900; padding: 14px 0; margin-bottom: 0; display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; }
    .settings-heading::before { content: '›'; color: #8e8e8e; font-size: 23px; font-weight: 700; margin-right: 10px; transform: translateY(-1px); transition: transform 210ms cubic-bezier(.2,.8,.2,1); }
    .settings-section.open .settings-heading::before { transform: rotate(90deg) translateX(-1px); }
    .settings-content {
      display: grid;
      grid-template-rows: 0fr;
      overflow: hidden;
      opacity: 0;
      transition:
        grid-template-rows 240ms cubic-bezier(.2,.8,.2,1),
        opacity 170ms ease;
    }
    .settings-content-inner {
      min-height: 0;
      overflow: hidden;
      padding-bottom: 0;
      transition: padding-bottom 240ms cubic-bezier(.2,.8,.2,1);
    }
    .settings-section.open .settings-content {
      grid-template-rows: 1fr;
      opacity: 1;
    }
    .settings-section.open .settings-content-inner { padding-bottom: 14px; }
    .slider-row { margin-top: 12px; }
    .slider-row span { display: flex; justify-content: space-between; color: #c8c8c8; font-size: 12px; margin-bottom: 8px; }
    input[type="range"] { padding: 0; accent-color: #bdbdbd; border: none; background: transparent; }
    .sound-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; color: #c8c8c8; font-size: 12px; cursor: pointer; user-select: none; }
    .sound-toggle-row span { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .sound-toggle-row b { color: #d8d8d8; font-size: 12px; }
    .sound-toggle-row em { color: #bdbdbd; font-style: normal; }
    .sound-toggle-row input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 auto; padding: 0; accent-color: #bdbdbd; }

    .group-row { display: grid; grid-template-columns: 72px 44px 1fr 34px 28px; gap: 10px; align-items: center; margin-top: 12px; color: #c8c8c8; font-size: 12px; }
    .group-name { font-weight: 750; color: #d8d8d8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .node-style-popover input[type="color"] { width: 42px; height: 30px; padding: 2px; border-radius: 8px; background: #2b2b2b; border: 1px solid #444; }

    /* Group color picker: smooth circular swatch like the Shop palette dots. */
    .group-row input[type="color"] {
      width: 30px;
      height: 30px;
      min-width: 30px;
      padding: 0;
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 50%;
      background: transparent;
      overflow: hidden;
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
    }
    .group-row input[type="color"]::-webkit-color-swatch-wrapper {
      padding: 0;
      border-radius: 50%;
    }
    .group-row input[type="color"]::-webkit-color-swatch {
      border: 0;
      border-radius: 50%;
    }
    .group-row input[type="color"]::-moz-color-swatch {
      border: 0;
      border-radius: 50%;
    }
    .group-row input[type="range"] { width: 100%; }
    .group-size-value { color: #bdbdbd; text-align: right; font-style: italic; }
    .delete-group-btn { width: 28px; height: 28px; padding: 0; border-radius: 8px; border: none; background: transparent; color: #a8a8a8; font-size: 22px; font-weight: 400; line-height: 1; }
    .delete-group-btn:hover { background: #333; color: #eeeeee; }
    .new-group-btn { width: 100%; margin-top: 14px; background: #313131; border-color: #454545; }

    .empty-state { position: absolute; inset: 0; display: none !important; align-items: center; justify-content: center; color: #8f8f8f; text-align: center; padding: 30px; pointer-events: none; z-index: 2; }

    .doc-header { padding: 10px 14px; border-bottom: 1px solid #333; background: #1f1f1f; position: relative; z-index: 2; }
    .doc-header-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
    .doc-title-small { color: #aaa; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
    .doc-close { width: auto; padding: 7px 10px; border-radius: 999px; background: #303030; font-size: 12px; }
    
    .doc-toolbar {
      display: flex;
      gap: 2px;
      flex-wrap: wrap;
      align-items: center;
      margin: 0 0 14px;
      overflow: visible;
      padding-bottom: 4px;
      white-space: nowrap;
      position: relative;
      z-index: 20;
    }
    body.layout-default .doc-toolbar {
      flex-wrap: nowrap;
      overflow-x: auto;
      overflow-y: hidden;
    }
    .doc-toolbar button,
    .doc-toolbar select,
    .doc-toolbar input {
      width: auto;
      height: 28px;
      padding: 3px 6px;
      border-radius: 6px;
      background: transparent;
      border-color: transparent;
      color: #d7d7d7;
      box-shadow: none;
      flex: 0 0 auto;
      font-size: 13px;
    }

    #fontSizeInput::-webkit-outer-spin-button,
    #fontSizeInput::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    #fontSizeInput {
      appearance: textfield;
      -moz-appearance: textfield;
    }

    body.doc-one-highlight-active .doc-title-input::selection,
    body.doc-one-highlight-active .doc-editor::selection,
    body.doc-one-highlight-active .doc-title-input *::selection,
    body.doc-one-highlight-active .doc-editor *::selection {
      background: transparent;
      color: inherit;
    }

    body.saved-highlight-active .doc-title-input::selection,
    body.saved-highlight-active .doc-editor::selection,
    body.saved-highlight-active .doc-title-input *::selection,
    body.saved-highlight-active .doc-editor *::selection {
      background: transparent;
      color: inherit;
    }

    /* Hide heading dropdown and keep contenteditable placeholders reliable after delete */
    #formatSelect { display: none !important; }
    .doc-title-input.placeholder-empty::before,
    .doc-editor.placeholder-empty::before {
      content: attr(data-placeholder);
      color: #8f8f8f;
      pointer-events: none;
    }
    .doc-toolbar button { min-width: 26px; display: inline-flex; align-items: center; justify-content: center; }
    #imageUploadBtn { width: 28px; padding: 3px 5px; }
    .upload-image-icon { width: 15px; height: 15px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .92; }
    .doc-toolbar select { max-width: 122px; }
    .doc-toolbar button:hover,
    .doc-toolbar select:hover,
    .doc-toolbar input:hover { background: #333; }
    .doc-toolbar button.active,
    .doc-toolbar select.active,
    .toolbar-menu-btn.active {
      background: #3a3a3a;
      border-color: #4d4d4d;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07);
    }
    .doc-toolbar button.active:hover { background: #424242; }
    .toolbar-separator { width: 1px; height: 22px; background: #3a3a3a; margin: 0 3px; flex: 0 0 auto; }

    .toolbar-menu { position: relative; flex: 0 0 auto; }
    .toolbar-menu-btn::after { content: '⌄'; font-size: 10px; margin-left: 4px; opacity: .7; }
    .toolbar-menu-panel {
      position: absolute;
      top: 32px;
      left: 0;
      display: none;
      min-width: 116px;
      padding: 6px;
      border: 1px solid #3f3f3f;
      border-radius: 10px;
      background: rgba(31,31,31,0.98);
      box-shadow: 0 16px 34px rgba(0,0,0,.38);
      z-index: 999999;
    }
    .toolbar-menu.open .toolbar-menu-panel { display: grid; gap: 4px; }
    .toolbar-menu-panel button {
      width: 100%;
      justify-content: flex-start;
      min-width: 0;
      height: 28px;
      padding: 4px 8px;
      border-radius: 7px;
    }

    .doc-title-input {
      display: block;
      width: 100%;
      min-height: 42px;
      font-size: 30px;
      font-weight: 850;
      line-height: 1.15;
      background: transparent;
      border: none;
      padding: 0;
      color: #f0f0f0;
      margin: 8px 0 18px;
      outline: none;
      white-space: pre-wrap;
    }
    .doc-title-input:empty::before {
      content: attr(data-placeholder);
      color: #8f8f8f;
      pointer-events: none;
    }

    .doc-editor h1, .doc-title-input h1 { font-size: 36px; line-height: 1.18; font-weight: 850; margin: 0.45em 0 0.25em; }
    .doc-editor h2, .doc-title-input h2 { font-size: 28px; line-height: 1.22; font-weight: 820; margin: 0.45em 0 0.25em; }
    .doc-editor h3, .doc-title-input h3 { font-size: 22px; line-height: 1.28; font-weight: 780; margin: 0.45em 0 0.25em; }
    .doc-editor p, .doc-title-input p { margin: 0.35em 0; }
    .doc-editor img {
      max-width: 100%;
      height: auto;
      border-radius: 8px;
      cursor: pointer;
      image-rendering: auto;
    }
    .image-resize-wrap {
      display: inline-block;
      position: relative;
      max-width: 100%;
      line-height: 0;
      margin: 8px 0;
      user-select: none;
      vertical-align: top;
      cursor: grab;
    }
    .image-resize-wrap:active { cursor: grabbing; }
    .image-resize-wrap img {
      display: block;
      max-width: 100%;
      height: auto;
      pointer-events: none;
    }
    .image-resize-wrap.selected {
      outline: 2px solid rgba(160,180,255,.75);
      outline-offset: 3px;
      border-radius: 8px;
    }
    .image-resize-handle {
      position: absolute;
      width: 11px;
      height: 11px;
      background: #d8d8d8;
      border: 1px solid #1d1d1d;
      border-radius: 2px;
      z-index: 5;
      display: none;
      pointer-events: auto;
    }
    .image-resize-wrap.selected .image-resize-handle { display: block; }
    .image-resize-handle.tl { left: -7px; top: -7px; cursor: nwse-resize; }
    .image-resize-handle.t { left: 50%; top: -7px; transform: translateX(-50%); cursor: ns-resize; }
    .image-resize-handle.tr { right: -7px; top: -7px; cursor: nesw-resize; }
    .image-resize-handle.r { right: -7px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
    .image-resize-handle.br { right: -7px; bottom: -7px; cursor: nwse-resize; }
    .image-resize-handle.b { left: 50%; bottom: -7px; transform: translateX(-50%); cursor: ns-resize; }
    .image-resize-handle.bl { left: -7px; bottom: -7px; cursor: nesw-resize; }
    .image-resize-handle.l { left: -7px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }

    .doc-editor {
      position: relative;
    }
    .image-resize-wrap.image-free {
      position: absolute;
      margin: 0;
      max-width: none;
      z-index: 3;
    }
    .image-resize-wrap.image-free img {
      max-width: none;
    }

    .doc-body { flex: 1; overflow: auto; padding: 0; background: #202020; position: relative; z-index: 2; }
    .doc-card { background: transparent; border: none; box-shadow: none; padding: 34px clamp(22px, 4vw, 70px); max-width: none; min-height: 100%; margin: 0; }
    .doc-empty { color: #999; line-height: 1.55; text-align: center; padding: 60px 20px; }
    .doc-id { display: inline-flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; max-width: 100%; padding: 3px 7px; border-radius: 999px; background: transparent; border: 1px solid rgba(255,255,255,.08); font-size: 10px; font-weight: 800; color: rgba(255,255,255,.58); margin-bottom: 12px; white-space: normal; text-align: center; }
    .doc-id-extra-toggle {
      display: inline-grid;
      place-items: center;
      width: 15px;
      height: 15px;
      min-width: 15px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: rgba(255,255,255,.07);
      color: rgba(255,255,255,.58);
      font: 800 11px/1 Inter, Arial, sans-serif;
      cursor: pointer;
    }
    .doc-id-extra-toggle:hover { background: rgba(255,255,255,.13); color: rgba(255,255,255,.88); }
    .doc-id-extra { opacity: .72; }
    .doc-editor { min-height: 68vh; width: 100%; resize: none; border: none; background: transparent; color: #d7d7d7; font-size: 16px; line-height: 1.75; padding: 8px 0 80px; outline: none; white-space: pre-wrap; }
    .doc-editor:empty::before { content: attr(data-placeholder); color: #8f8f8f; pointer-events: none; }

    /* Document spacing stability: keep line boxes simple and predictable. */
    .doc-title-input,
    .doc-editor {
      line-height: 1.35 !important;
    }
    .doc-title-input div,
    .doc-title-input p,
    .doc-editor div,
    .doc-editor p,
    .doc-editor li {
      margin-top: 0 !important;
      margin-bottom: 0 !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      line-height: inherit !important;
    }
    .doc-title-input span,
    .doc-title-input font,
    .doc-editor span,
    .doc-editor font,
    .doc-editor b,
    .doc-editor strong,
    .doc-editor i,
    .doc-editor em,
    .doc-editor u,
    .doc-editor a {
      line-height: inherit !important;
      vertical-align: baseline !important;
    }

    /* Layout 6 only: make Document Full feel like a centered page */
    body.layout-doc-full .doc-body {
      display: block;
    }
    body.layout-doc-full .doc-card {
      width: min(100%, 960px);
      max-width: 960px;
      margin-left: auto;
      margin-right: auto;
      padding-left: clamp(28px, 5vw, 86px);
      padding-right: clamp(28px, 5vw, 86px);
    }
    body.layout-doc-full .doc-toolbar {
      justify-content: flex-start;
    }

    .doc-title-input::selection,
    .doc-editor::selection,
    .doc-title-input *::selection,
    .doc-editor *::selection {
      background: rgba(0, 95, 255, 0.55);
      color: inherit;
    }

    /* First/default layout only: reduce document side gap so text has more width */
    body.layout-default .doc-card { padding-left: 22px; padding-right: 22px; }
    body.layout-default .doc-title-input { font-size: 28px; }

    /* Markdown document system: simple Clarieus/Discord-style single surface. */
    #docEditor .doc-toolbar { display: none !important; }
    #docText { display: none !important; }
    .markdown-editor-shell {
      width: 100%;
      min-height: 68vh;
      padding-bottom: 80px;
      position: relative;
    }
    .markdown-mode-tabs,
    .markdown-library-note {
      display: none !important;
    }
    .markdown-editor-box { display: none; width: 100%; }
    .markdown-editor-shell.editing .markdown-editor-box { display: block; }
    .markdown-editor-shell.editing .markdown-preview { display: none !important; }
    #markdownTextarea {
      width: 100%;
      min-height: 430px;
      resize: vertical;
      border: none;
      border-radius: 12px;
      background: transparent;
      color: #e7e7e7;
      font-family: Inter, Arial, sans-serif;
      font-size: 16px;
      line-height: 1.75;
      padding: 0 0 80px;
      outline: none;
      box-shadow: none;
    }
    #markdownTextarea:focus { outline: none; }

    /* Live Markdown editing surface: CodeMirror/EasyMDE, but stripped down so it feels like a simple note. */
    .markdown-editor-box .EasyMDEContainer {
      width: 100%;
      background: transparent !important;
      color: #dedede;
    }
    .markdown-editor-box .editor-toolbar,
    .markdown-editor-box .editor-statusbar,
    .markdown-editor-box .editor-preview-side,
    .markdown-editor-box .editor-preview,
    .markdown-editor-box .CodeMirror-sided {
      display: none !important;
    }
    .markdown-editor-box .CodeMirror {
      min-height: 430px;
      height: auto;
      border: none !important;
      background: transparent !important;
      color: #dedede !important;
      font-family: Inter, Arial, sans-serif;
      font-size: 16px;
      line-height: 1.75;
      padding: 0 0 80px;
      box-shadow: none !important;
    }
    .markdown-editor-box .CodeMirror-scroll {
      min-height: 430px;
      overflow: hidden !important;
    }
    /* Keep the document body as the only vertical scrollbar. */
    .doc-panel .markdown-editor-box .CodeMirror-vscrollbar,
    .doc-panel .markdown-editor-box .CodeMirror-hscrollbar,
    .doc-panel .markdown-editor-box .CodeMirror-scrollbar-filler,
    .doc-panel .markdown-editor-box .CodeMirror-gutter-filler {
      display: none !important;
    }
    .markdown-editor-box .CodeMirror-lines {
      padding: 0;
    }
    .markdown-editor-box .CodeMirror pre.CodeMirror-line,
    .markdown-editor-box .CodeMirror pre.CodeMirror-line-like {
      font-family: Inter, Arial, sans-serif;
      line-height: 1.75;
      color: #dedede;
    }
    .markdown-editor-box .CodeMirror-cursor { border-left: 1px solid #f0f0f0; }
    .markdown-editor-box .CodeMirror-selected,
    .markdown-editor-box .CodeMirror-focused .CodeMirror-selected {
      background: rgba(0, 95, 255, 0.42) !important;
    }
    .markdown-editor-box .cm-header {
      color: #f0f0f0 !important;
      font-weight: 850;
      line-height: 1.25;
    }
    .markdown-editor-box .cm-header-1 { font-size: 2.0em; }
    .markdown-editor-box .cm-header-2 { font-size: 1.55em; }
    .markdown-editor-box .cm-header-3 { font-size: 1.25em; }
    .markdown-editor-box .cm-header-4 { font-size: 1.08em; }
    .markdown-editor-box .cm-header-5 { font-size: 1.0em; }
    .markdown-editor-box .cm-header-6 { font-size: 0.95em; }
    .markdown-editor-box .cm-strong {
      color: #f0f0f0 !important;
      font-weight: 850;
    }
    .markdown-editor-box .cm-em { font-style: italic; color: #e8e8e8 !important; }
    .markdown-editor-box .cm-link { color: #b59cff !important; text-decoration: underline; }
    .markdown-editor-box .cm-url { color: #8fb6ff !important; }
    .markdown-editor-box .cm-quote { color: #bdbdbd !important; }
    .markdown-editor-box .cm-comment,
    .markdown-editor-box .cm-code { font-family: monospace; background: #151515; color: #eeeeee !important; }
    .markdown-editor-box .cm-formatting,
    .markdown-editor-box .cm-formatting-header,
    .markdown-editor-box .cm-formatting-strong,
    .markdown-editor-box .cm-formatting-em,
    .markdown-editor-box .cm-formatting-list,
    .markdown-editor-box .cm-formatting-link {
      color: #8e8e8e !important;
      font-weight: 650;
      text-decoration: none !important;
    }
    .markdown-editor-box .CodeMirror-placeholder { color: #8f8f8f !important; }

    .markdown-preview {
      min-height: 430px;
      border: none;
      border-radius: 12px;
      background: transparent;
      color: #dedede;
      padding: 0 0 80px;
      line-height: 1.75;
      overflow-wrap: anywhere;
      cursor: text;
    }
    .markdown-preview:empty::before {
      content: 'Click here to write...';
      color: #8f8f8f;
    }
    .markdown-preview h1, .markdown-preview h2, .markdown-preview h3,
    .markdown-preview h4, .markdown-preview h5, .markdown-preview h6 {
      color: #f0f0f0;
      line-height: 1.25;
      margin: 1.05em 0 .45em;
      letter-spacing: -0.02em;
    }
    .markdown-preview h1 { font-size: 2.0em; }
    .markdown-preview h2 { font-size: 1.55em; }
    .markdown-preview h3 { font-size: 1.25em; }
    .markdown-preview h4 { font-size: 1.08em; }
    .markdown-preview h5 { font-size: 1.0em; }
    .markdown-preview h6 { font-size: 0.95em; }
    .markdown-preview p, .markdown-preview ul, .markdown-preview ol, .markdown-preview blockquote, .markdown-preview pre { margin: .7em 0; }
    .markdown-preview ul, .markdown-preview ol { padding-left: 1.5em; }
    .markdown-preview a { color: #b59cff; text-decoration: underline; }
    .markdown-preview blockquote {
      border-left: 3px solid #555;
      padding-left: 12px;
      color: #bdbdbd;
    }
    .markdown-preview code {
      background: #151515;
      border: 1px solid #303030;
      border-radius: 6px;
      padding: 2px 5px;
      color: #eee;
    }
    .markdown-preview pre {
      background: #151515;
      border: 1px solid #303030;
      border-radius: 12px;
      padding: 14px;
      overflow: auto;
    }
    .markdown-preview pre code { border: none; padding: 0; background: transparent; }
    .markdown-preview img { max-width: 100%; border-radius: 10px; }
    .markdown-preview table { border-collapse: collapse; width: 100%; margin: .9em 0; }
    .markdown-preview th, .markdown-preview td { border: 1px solid #3a3a3a; padding: 8px 10px; }
    .markdown-preview th { background: #262626; color: #eee; }

    .markdown-preview mark {
      background: rgba(255, 224, 102, 0.28);
      color: #f3f3f3;
      padding: 0 3px;
      border-radius: 4px;
    }
    .markdown-preview .internal-link {
      color: #b59cff;
      text-decoration: none;
      border-bottom: 1px solid rgba(181,156,255,.45);
      background: rgba(181,156,255,.08);
      border-radius: 5px;
      padding: 0 3px;
    }
    .markdown-preview .md-tag {
      color: #d7c7ff;
      background: rgba(181,156,255,.12);
      border: 1px solid rgba(181,156,255,.18);
      border-radius: 999px;
      padding: 1px 7px;
      font-size: .9em;
      white-space: nowrap;
    }
    .markdown-preview input[type="checkbox"] {
      width: auto;
      height: auto;
      margin-right: 8px;
      accent-color: #b59cff;
    }
    .markdown-preview del { color: #aaa; }
    .markdown-preview hr { border: none; border-top: 1px solid #444; margin: 1.2em 0; }

    .markdown-editor-shell.drag-image-over .markdown-editor-box,
    .markdown-editor-shell.drag-image-over .markdown-preview {
      outline: 1px dashed rgba(181,156,255,.55);
      outline-offset: 8px;
      border-radius: 12px;
    }

    /* True Clarieus-style single surface: the editor is always the document.
       Markdown symbols are hidden until the cursor is inside that exact formatted span. */
    .markdown-editor-shell .markdown-editor-box,
    .markdown-editor-shell.editing .markdown-editor-box,
    .markdown-editor-shell.edit-only .markdown-editor-box,
    .markdown-editor-shell.preview-only .markdown-editor-box {
      display: block !important;
    }
    .markdown-editor-shell .markdown-preview,
    .markdown-editor-shell.editing .markdown-preview,
    .markdown-editor-shell.preview-only .markdown-preview {
      display: none !important;
    }
    .markdown-editor-box .CodeMirror .cm-md-hidden-format {
      color: transparent !important;
      font-size: 0 !important;
      letter-spacing: 0 !important;
      text-decoration: none !important;
      user-select: none;
    }
    .markdown-editor-box .CodeMirror .cm-active-markdown-format,
    .markdown-editor-box .CodeMirror .cm-active-markdown-format * {
      color: #8e8e8e !important;
      font-size: inherit !important;
      letter-spacing: normal !important;
      text-decoration: none !important;
      user-select: text;
    }

    /* Keep active heading Markdown markers (#, ##, etc.) big like preview 54/85 headings. */
    .markdown-editor-box .CodeMirror .cm-active-markdown-format.cm-formatting-header.cm-header-1 { font-size: 2.0em !important; }
    .markdown-editor-box .CodeMirror .cm-active-markdown-format.cm-formatting-header.cm-header-2 { font-size: 1.55em !important; }
    .markdown-editor-box .CodeMirror .cm-active-markdown-format.cm-formatting-header.cm-header-3 { font-size: 1.25em !important; }
    .markdown-editor-box .CodeMirror .cm-active-markdown-format.cm-formatting-header.cm-header-4 { font-size: 1.08em !important; }
    .markdown-editor-box .CodeMirror .cm-active-markdown-format.cm-formatting-header.cm-header-5 { font-size: 1.0em !important; }
    .markdown-editor-box .CodeMirror .cm-active-markdown-format.cm-formatting-header.cm-header-6 { font-size: 0.95em !important; }

    /* Small Markdown polish for the Clarieus-style surface:
       - show bullets as real bullets when the cursor is not on that list item
       - show task items as checkboxes
       - show --- as a horizontal rule directly on its own line
       - keep normal Markdown setext headings, so text followed by -- still becomes a heading */
    .markdown-editor-box .CodeMirror .cm-md-rendered-marker {
      color: #dedede !important;
      font-size: inherit !important;
      font-weight: inherit !important;
      letter-spacing: normal !important;
      user-select: none;
      display: inline-block;
      white-space: pre;
    }
    .markdown-editor-box .CodeMirror .cm-md-rendered-bullet {
      width: 1.1em;
      text-align: center;
      color: #dedede !important;
    }
    .markdown-editor-box .CodeMirror .cm-md-rendered-task {
      width: 1.35em;
      text-align: center;
      color: #dedede !important;
      font-weight: 800 !important;
    }
    .markdown-editor-box .CodeMirror .cm-md-rendered-hr {
      display: block !important;
      width: 100%;
      max-width: 100%;
      height: 0;
      border-top: 1px solid #555;
      margin: 0.85em 0 0.65em;
      color: transparent !important;
    }

    /* Extra live-markdown styling. The parser/editor still comes from EasyMDE + CodeMirror; this only makes the live editor feel Clarieus-like. */
    .markdown-editor-box .CodeMirror .cm-header:not(.cm-formatting-header) {
      color: #f0f0f0 !important;
      font-weight: 850 !important;
    }
    .markdown-editor-box .CodeMirror .cm-formatting-header {
      color: #9a9a9a !important;
      font-weight: 850 !important;
    }
    .markdown-editor-box .CodeMirror .cm-strikethrough { text-decoration: line-through; color: #aaa !important; }
    .markdown-editor-box .CodeMirror .cm-hr { color: #888 !important; }
    .markdown-editor-box .CodeMirror .cm-variable-2 { color: #dedede !important; }
    .markdown-editor-box .CodeMirror .cm-md-highlight {
      background: rgba(255, 224, 102, 0.24);
      color: #f3f3f3 !important;
      border-radius: 4px;
    }
    .markdown-editor-box .CodeMirror .cm-md-wikilink,
    .markdown-editor-box .CodeMirror .cm-md-tag {
      color: #d7c7ff !important;
      background: rgba(181,156,255,.10);
      border-radius: 5px;
    }

    /* Smart objects: still Markdown underneath, but no toolbar and no tabs. */
    .markdown-preview a {
      color: #b59cff;
      text-decoration: underline;
      text-underline-offset: 2px;
      cursor: pointer;
    }

    .markdown-preview img {
      max-width: min(100%, 540px);
      height: auto;
      display: block;
      border-radius: 12px;
      border: 1px solid #3c3c3c;
      background: #242424;
      margin: 10px 0;
      cursor: pointer;
    }

    .markdown-preview img.md-selected-image {
      outline: 2px solid rgba(181,156,255,.72);
      outline-offset: 3px;
    }

    .md-smart-popover {
      position: fixed;
      z-index: 1000000;
      width: min(390px, calc(100vw - 32px));
      border: 1px solid #3f3f3f;
      border-radius: 16px;
      background: rgba(31,31,31,.98);
      box-shadow: 0 18px 55px rgba(0,0,0,.48);
      padding: 12px;
      color: #e8e8e8;
      display: none;
      backdrop-filter: blur(8px);
    }

    .md-smart-popover.show { display: block; }

    .md-smart-popover-title {
      font-size: 14px;
      font-weight: 900;
      margin-bottom: 4px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .md-smart-popover-sub {
      color: #aaa;
      font-size: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-bottom: 10px;
    }

    .md-smart-popover-actions {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
      flex-wrap: wrap;
    }

    .md-smart-popover-actions button {
      padding: 7px 10px;
      border-radius: 999px;
      font-size: 12px;
      min-width: 0;
      height: auto;
    }

    .md-smart-modal-backdrop {
      position: fixed;
      inset: 0;
      z-index: 1000001;
      background: rgba(0,0,0,.48);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .md-smart-modal-backdrop.show { display: flex; }

    .md-smart-modal {
      width: min(430px, 100%);
      border: 1px solid #444;
      border-radius: 18px;
      background: #202020;
      box-shadow: 0 22px 65px rgba(0,0,0,.55);
      padding: 16px;
    }

    .md-smart-modal h3 {
      font-size: 17px;
      margin: 0 0 12px;
      color: #f1f1f1;
    }

    .md-smart-modal label {
      margin: 10px 0 6px;
      color: #cfcfcf;
      font-size: 12px;
      font-weight: 800;
    }

    .md-smart-modal input {
      height: 38px;
      border-radius: 10px;
      background: #181818;
      border: 1px solid #3b3b3b;
      color: #f1f1f1;
      padding: 9px 11px;
    }

    .md-smart-modal-hint {
      color: #8f8f8f;
      font-size: 12px;
      margin-top: 8px;
      line-height: 1.4;
    }

    .md-smart-modal-actions {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
      margin-top: 14px;
    }

    .md-smart-modal-actions button {
      padding: 8px 12px;
      border-radius: 999px;
      font-size: 12px;
    }

    /* Compact document actions in the document header. */
    .md-smart-add {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 50;
      width: 32px;
      height: 32px;
      border-radius: 999px;
      border: 1px solid #444;
      background: rgba(38,38,38,.92);
      color: #e8e8e8;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 10px 28px rgba(0,0,0,.35);
      transition: background 120ms ease, border-color 120ms ease;
    }

    .md-smart-add svg {
      width: 15px;
      height: 15px;
      fill: currentColor;
    }

    body.has-selected-node .doc-header .md-smart-add {
      display: inline-flex;
    }

    .md-smart-add:hover {
      background: #333;
      border-color: #555;
    }

    .md-smart-add-menu {
      position: absolute;
      right: 10px;
      top: calc(100% - 3px);
      z-index: 60;
      display: none;
      min-width: 190px;
      gap: 2px;
      padding: 6px;
      border: 1px solid #444;
      border-radius: 12px;
      background: rgba(27,27,29,.94);
      box-shadow: 0 18px 45px rgba(0,0,0,.42);
      backdrop-filter: blur(18px) saturate(1.12);
      -webkit-backdrop-filter: blur(18px) saturate(1.12);
    }

    .md-smart-add-menu.show {
      display: grid;
    }

    .md-smart-add-menu button {
      display: grid;
      grid-template-columns: 18px minmax(0,1fr);
      align-items: center;
      gap: 8px;
      min-height: 32px;
      padding: 6px 9px;
      border: 0 !important;
      border-radius: 8px !important;
      background: transparent !important;
      box-shadow: none !important;
      color: #e8e8e8;
      font-size: 12px;
      font-weight: 700;
      text-align: left;
      justify-content: flex-start;
    }

    .md-smart-add-menu button:hover {
      background: var(--notes-accent-soft-themed, rgba(164,132,236,.14)) !important;
      color: var(--notes-accent-hover-themed, #d8c9ff);
      border-color: transparent !important;
    }

    .md-smart-add-menu button.danger {
      color: #d99a9a;
    }

    .md-smart-add-menu button.danger:hover {
      color: #ffd0d0;
      background: rgba(150,54,54,.18) !important;
    }

    .md-smart-add-menu svg {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .markdown-editor-box .cm-md-rendered-link {
      color: #b59cff !important;
      text-decoration: underline;
      text-underline-offset: 2px;
      cursor: pointer;
      border-radius: 4px;
      padding: 0 1px;
    }
    .markdown-editor-box .cm-md-rendered-link:hover {
      background: rgba(181,156,255,.12);
    }
    .markdown-editor-box .cm-md-rendered-image {
      display: inline-block;
      max-width: min(100%, 420px);
      max-height: 260px;
      width: auto;
      height: auto;
      border-radius: 12px;
      border: 1px solid #3c3c3c;
      background: #242424;
      margin: 8px 0;
      vertical-align: top;
      cursor: pointer;
      box-shadow: 0 10px 26px rgba(0,0,0,.18);
    }
    .markdown-editor-box .cm-md-rendered-image:hover {
      outline: 2px solid rgba(181,156,255,.55);
      outline-offset: 3px;
    }

    .markdown-editor-box .cm-smart-image-token {
      color: #aaa !important;
      background: rgba(181,156,255,.12);
      border: 1px solid rgba(181,156,255,.20);
      border-radius: 6px;
      padding: 1px 5px;
      font-weight: 750;
    }

    /* Google Slides-style image widget inside the live Markdown editor.
       Images are absolute layers now, so they do not create a giant text line,
       do not push document text around, and only move/delete when selected. */
    .markdown-editor-box .CodeMirror .cm-md-rendered-image-wrap {
      position: absolute !important;
      display: block;
      vertical-align: top;
      line-height: 0;
      margin: 0;
      cursor: move;
      user-select: none;
      z-index: 100000 !important;
      box-sizing: border-box;
      overflow: visible;
      pointer-events: auto;
      isolation: isolate;
    }
    .markdown-editor-box .CodeMirror .cm-md-rendered-image-wrap::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 0;
      border-radius: 10px;
      background: #202020;
      pointer-events: none;
    }
    .markdown-editor-box .CodeMirror .cm-md-rendered-image-wrap img.cm-md-rendered-image {
      position: relative;
      z-index: 1;
      display: block;
      width: 260px;
      max-width: none !important;
      max-height: none !important;
      height: auto;
      border-radius: 10px;
      border: 1px solid #3c3c3c;
      background: #242424;
      pointer-events: none;
      box-sizing: border-box;
    }
    .markdown-editor-box .CodeMirror .cm-md-rendered-image-wrap {
      box-sizing: border-box;
    }
    .markdown-editor-box .CodeMirror .cm-md-rendered-image-wrap.selected {
      outline: 1px solid rgba(190,190,190,.9);
      outline-offset: 0;
      border-radius: 10px;
    }
    .markdown-editor-box .CodeMirror .cm-md-image-handle {
      position: absolute;
      width: 11px;
      height: 11px;
      background: #bdbdbd;
      border: 1px solid #555;
      border-radius: 999px;
      display: none;
      z-index: 3;
      pointer-events: auto;
      box-shadow: 0 1px 5px rgba(0,0,0,.35);
    }
    .markdown-editor-box .CodeMirror .cm-md-rendered-image-wrap.selected .cm-md-image-handle { display: block; }
    body.md-smart-image-selected .markdown-editor-box .CodeMirror-cursor,
    body.md-smart-image-selected .markdown-editor-box .CodeMirror-secondarycursor {
      opacity: 0 !important;
      display: none !important;
    }
    body.md-smart-image-selected .markdown-editor-box .CodeMirror-selected,
    body.md-smart-image-selected .markdown-editor-box .CodeMirror-focused .CodeMirror-selected {
      background: transparent !important;
    }
    .markdown-editor-box .CodeMirror .cm-md-image-handle.tl { left: -6px; top: -6px; cursor: nwse-resize; }
    .markdown-editor-box .CodeMirror .cm-md-image-handle.t { left: 50%; top: -6px; transform: translateX(-50%); cursor: ns-resize; }
    .markdown-editor-box .CodeMirror .cm-md-image-handle.tr { right: -6px; top: -6px; cursor: nesw-resize; }
    .markdown-editor-box .CodeMirror .cm-md-image-handle.r { right: -6px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
    .markdown-editor-box .CodeMirror .cm-md-image-handle.br { right: -6px; bottom: -6px; cursor: nwse-resize; }
    .markdown-editor-box .CodeMirror .cm-md-image-handle.b { left: 50%; bottom: -6px; transform: translateX(-50%); cursor: ns-resize; }
    .markdown-editor-box .CodeMirror .cm-md-image-handle.bl { left: -6px; bottom: -6px; cursor: nesw-resize; }
    .markdown-editor-box .CodeMirror .cm-md-image-handle.l { left: -6px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }

    /* Image click now enters Google Slides-style edit mode only; no Replace/Remove popup on click. */
    #mdSmartImagePopover { display: none !important; }

    /* Keep the text cursor normal height beside image widgets.
       CodeMirror makes the cursor match the tallest object on the line; images can make it huge. */
    .markdown-editor-box .CodeMirror .CodeMirror-cursor {
      height: 1.75em !important;
      max-height: 28px !important;
      min-height: 18px !important;
      margin-top: 2px !important;
      border-left: 1px solid #f0f0f0 !important;
    }
    .markdown-editor-box .CodeMirror .cm-md-rendered-image-wrap.selected ~ .CodeMirror-cursor,
    .markdown-editor-box .CodeMirror .cm-md-rendered-image-wrap.selected + .CodeMirror-cursor {
      height: 1.75em !important;
      max-height: 28px !important;
    }

    body.md-image-is-resizing,
    body.md-image-is-resizing * {
      user-select: none !important;
      cursor: ns-resize;
    }

    /* Let Google-Slides-style image widgets grow vertically without being clipped by CodeMirror line boxes. */
    .markdown-editor-box .CodeMirror,
    .markdown-editor-box .CodeMirror-scroll,
    .markdown-editor-box .CodeMirror-sizer,
    .markdown-editor-box .CodeMirror-lines,
    .markdown-editor-box .CodeMirror-code,
    .markdown-editor-box .CodeMirror pre.CodeMirror-line,
    .markdown-editor-box .CodeMirror pre.CodeMirror-line-like {
      overflow: visible !important;
    }
    .markdown-editor-box .CodeMirror .CodeMirror-line,
    .markdown-editor-box .CodeMirror pre.CodeMirror-line,
    .markdown-editor-box .CodeMirror pre.CodeMirror-line-like {
      position: relative !important;
    }
    .markdown-editor-box .CodeMirror .cm-md-rendered-image-wrap {
      position: absolute !important;
    }

    /* Final image-resize fix: remove the old preview max-height cap so vertical handles never hit the 260px image limit. */
    .markdown-editor-box .CodeMirror .cm-md-rendered-image-wrap,
    .markdown-editor-box .CodeMirror .cm-md-rendered-image-wrap img.cm-md-rendered-image {
      max-height: none !important;
      max-width: none !important;
    }
    .markdown-editor-box .CodeMirror .cm-md-rendered-image-wrap img.cm-md-rendered-image {
      object-fit: fill !important;
    }

    /* Document/fullscreen stability fix:
       The image-resize work made some CodeMirror internals overflow visibly so tall images could resize.
       That can let normal document text visually leak outside the document panel after fullscreen/layout changes.
       Keep the document clipped to its panel/page, while still allowing selected image handles to show inside it. */
    .doc-panel {
      isolation: isolate !important;
      contain: layout paint !important;
      overflow: hidden !important;
    }
    .doc-body {
      overflow: auto !important;
      contain: layout paint !important;
    }
    .doc-card,
    .markdown-editor-shell,
    .markdown-editor-box,
    .markdown-editor-box .EasyMDEContainer,
    .markdown-editor-box .CodeMirror {
      max-width: 100% !important;
      box-sizing: border-box !important;
    }
    .markdown-editor-box .CodeMirror,
    .markdown-editor-box .CodeMirror-scroll {
      overflow: hidden !important;
    }
    .markdown-editor-box .CodeMirror-sizer,
    .markdown-editor-box .CodeMirror-lines,
    .markdown-editor-box .CodeMirror-code {
      max-width: 100% !important;
    }
    .markdown-editor-box .CodeMirror pre.CodeMirror-line,
    .markdown-editor-box .CodeMirror pre.CodeMirror-line-like {
      overflow: visible !important;
      max-width: 100% !important;
    }

    /* Make Document Full a real full-screen document, not a split layout with graph ghosting/leaking behind it. */
    body.layout-doc-full .app {
      display: block !important;
      width: 100vw !important;
      width: 100dvw !important;
      height: 100vh !important;
      height: 100dvh !important;
      overflow: hidden !important;
    }
    body.layout-doc-full .left-panel,
    body.layout-doc-full .canvas-wrap {
      display: none !important;
    }
    body.layout-doc-full .doc-panel {
      position: fixed !important;
      inset: 0 !important;
      width: 100vw !important;
      width: 100dvw !important;
      height: 100vh !important;
      height: 100dvh !important;
      max-height: 100vh !important;
      max-height: 100dvh !important;
      border: none !important;
      z-index: 100 !important;
      overflow: hidden !important;
    }
    body.layout-doc-full .doc-body {
      height: calc(100vh - 0px) !important;
      height: calc(100dvh - 0px) !important;
      overflow: auto !important;
    }

    /* Stable note layout after fullscreen/layout changes.
       CodeMirror is first created while the document panel can be hidden, so it may keep a stale width.
       These rules keep the Markdown surface tied to the visible document panel while JS re-measures it. */
    #docEditor,
    #markdownDocShell,
    #markdownDocShell .markdown-editor-box,
    #markdownDocShell .EasyMDEContainer,
    #markdownDocShell .CodeMirror,
    #markdownDocShell .CodeMirror-scroll {
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }
    #markdownDocShell .CodeMirror-sizer,
    #markdownDocShell .CodeMirror-lines,
    #markdownDocShell .CodeMirror-code {
      max-width: 100% !important;
      box-sizing: border-box !important;
    }
    #markdownDocShell .CodeMirror-measure,
    #markdownDocShell .CodeMirror-measure pre {
      max-width: none !important;
    }

    /* Final fix: keep the node title and note body in normal document order.
       Edge fullscreen changes can leave CodeMirror with stale measured offsets, which made
       the note body visually jump above the node title. This clamps the Markdown editor
       inside its shell and keeps the card as a simple vertical stack. */
    #docEditor.doc-card {
      overflow: hidden !important;
      contain: layout paint !important;
    }
    #docEditor[style*="display: block"],
    #docEditor[style*="display: flex"] {
      display: flex !important;
      flex-direction: column !important;
      align-items: stretch !important;
    }
    #docId {
      order: 0 !important;
      flex: 0 0 auto !important;
      align-self: flex-start !important;
    }
    #docTitle {
      order: 1 !important;
      flex: 0 0 auto !important;
      position: relative !important;
      z-index: 2 !important;
    }
    #docText { order: 2 !important; }
    #markdownDocShell {
      order: 3 !important;
      flex: 0 0 auto !important;
      position: relative !important;
      inset: auto !important;
      left: auto !important;
      top: auto !important;
      transform: none !important;
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 !important;
      z-index: 1 !important;
      overflow: hidden !important;
      contain: layout paint !important;
      box-sizing: border-box !important;
    }
    #markdownDocShell .markdown-editor-box,
    #markdownDocShell .EasyMDEContainer,
    #markdownDocShell .CodeMirror,
    #markdownDocShell .CodeMirror-scroll {
      position: relative !important;
      inset: auto !important;
      left: 0 !important;
      top: 0 !important;
      transform: none !important;
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 !important;
      box-sizing: border-box !important;
    }
    #markdownDocShell .CodeMirror-scroll {
      padding: 0 !important;
      overflow: hidden !important;
    }
    #markdownDocShell .CodeMirror-sizer {
      margin-left: 0 !important;
      min-width: 0 !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }
    #markdownDocShell .CodeMirror-lines,
    #markdownDocShell .CodeMirror-code {
      max-width: 100% !important;
      box-sizing: border-box !important;
    }
    #markdownDocShell .CodeMirror-gutters {
      display: none !important;
    }

    /* Clean simple/workshop input: Clarieus-like, minimal, no tutorial clutter. */
    .left-panel > .subtitle,
    #settingsPanel > .control-title,
    .hint-chip {
      display: none !important;
    }

    /* Final Simple workshop polish: keep the original default layout and make the node tool a compact Clarieus-style puck, not a big rectangle button. */
    body.layout-default .app {
      grid-template-columns: var(--left-panel) 1fr var(--doc-panel);
    }

    /* Project home / intro: local profile + project dashboard. */
    body.project-home-open .app {
      filter: blur(10px) brightness(0.72) saturate(0.9);
      transform: scale(1.012);
      pointer-events: none;
      transition: filter 220ms ease, transform 220ms ease;
    }
    .project-home {
      position: fixed;
      inset: 0;
      z-index: 1000002;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 28px;
      background:
        radial-gradient(circle at 28% 18%, rgba(255,255,255,0.07), transparent 32%),
        radial-gradient(circle at 78% 72%, rgba(255,255,255,0.035), transparent 38%),
        rgba(15,15,15,0.54);
      color: #eeeeee;
      backdrop-filter: blur(7px);
      -webkit-backdrop-filter: blur(7px);
    }
    body.project-home-open .project-home { display: flex; }

    .project-action-row button,
.project-profile-card button {
      height: 38px;
      border-radius: 999px;
      padding: 8px 13px;
      background: rgba(48,48,48,0.78);
      border: 1px solid rgba(255,255,255,0.11);
      color: #eeeeee;
      font-size: 12px;
      font-weight: 900;
    }
    .project-action-row button:hover,
.project-profile-card button:hover {
      background: rgba(62,62,62,0.86);
      border-color: rgba(255,255,255,0.18);
    }
    .project-home-close {
      width: 38px !important;
      padding: 0 !important;
      font-size: 18px !important;
    }
    
    .project-profile-card {
      width: min(520px, 100%);
      margin: 18px auto;
      padding: 26px;
      border-radius: 24px;
      background: rgba(28,28,28,0.72);
      border: 1px solid rgba(255,255,255,0.10);
      box-shadow: 0 18px 55px rgba(0,0,0,.38);
      text-align: center;
    }
    .project-profile-card h2 {
      font-size: 34px;
      letter-spacing: -.05em;
      margin-bottom: 8px;
    }
    .project-profile-card p {
      color: #aaa;
      line-height: 1.5;
      margin-bottom: 18px;
    }
    .project-name-input {
      height: 46px;
      text-align: center;
      background: rgba(20,20,20,0.72);
      border: 1px solid rgba(255,255,255,0.12);
      color: #f2f2f2;
      border-radius: 999px;
      font-size: 18px;
      font-weight: 850;
      margin-bottom: 12px;
    }
    .project-action-row {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 18px;
    }
    .project-action-row button { flex: 1 1 138px; height: 42px; }
    .project-section-title {
      font-size: 13px;
      color: #aaa;
      font-weight: 900;
      letter-spacing: .05em;
      text-transform: uppercase;
      margin: 4px 0 14px;
    }
    .project-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
      gap: 14px;
    }
    .project-card {
      text-align: left;
      border-radius: 20px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(28,28,28,0.66);
      overflow: hidden;
      cursor: pointer;
      padding: 0;
      min-height: 205px;
      box-shadow: 0 14px 34px rgba(0,0,0,.18);
    }
    .project-card:hover {
      border-color: rgba(255,255,255,0.20);
      background: rgba(36,36,36,0.74);
      transform: translateY(-1px);
    }
    .project-card.active-project {
      border-color: rgba(255,255,255,0.34);
      box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 16px 38px rgba(0,0,0,.26);
    }
    .project-thumb {
      height: 122px;
      background: #202020;
      border-bottom: 1px solid rgba(255,255,255,0.07);
      position: relative;
      overflow: hidden;
    }
    .project-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      opacity: .92;
    }
    .project-thumb-empty {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      color: #737373;
      font-size: 12px;
      font-weight: 850;
      letter-spacing: .03em;
    }
    .project-card-info { padding: 12px 13px 13px; }
    .project-card-title {
      font-size: 15px;
      font-weight: 950;
      color: #eeeeee;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      margin-bottom: 5px;
    }
    .project-card-meta {
      color: #8f8f8f;
      font-size: 12px;
      margin-bottom: 10px;
    }
    .project-card-actions {
      display: flex;
      gap: 7px;
    }
    .project-card-actions button {
      flex: 1;
      height: 30px;
      border-radius: 999px;
      font-size: 11px;
      padding: 5px 8px;
      background: rgba(45,45,45,0.9);
      border: 1px solid rgba(255,255,255,0.08);
    }
    .project-card-actions .project-delete-btn {
      flex: 0 0 auto;
      width: 34px;
      color: #e0b4b4;
    }
    .project-empty-note {
      border: 1px dashed rgba(255,255,255,0.14);
      border-radius: 20px;
      min-height: 205px;
      display: grid;
      place-items: center;
      color: #858585;
      font-weight: 850;
      text-align: center;
      padding: 20px;
      background: rgba(20,20,20,0.35);
    }
    .settings-project-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    .settings-project-actions button { width: 100%; }
    .settings-project-actions .wide { grid-column: 1 / -1; }
    .active-project-mini {
      color: #9e9e9e;
      font-size: 12px;
      line-height: 1.35;
      margin: -2px 0 11px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Minimal home: blurred graph behind, no boxed intro card. */
    body.project-home-open .app {
      filter: blur(3px) brightness(0.78) saturate(0.96) !important;
      transform: scale(1.006) !important;
      pointer-events: none !important;
      transition: filter 260ms ease, transform 260ms ease !important;
    }
    /* Startup: Home is visible immediately, but the graph stays hidden until
       the saved/cloud project has finished hydrating. This prevents node/canvas flashes. */
    body.clarieus-home-booting .app {
      opacity: 0 !important;
      visibility: hidden !important;
      transition: none !important;
    }
    body.clarieus-home-booting .project-welcome-stage {
      animation: none !important;
    }
    .project-home {
      position: fixed !important;
      inset: 0 !important;
      z-index: 1000002 !important;
      display: none;
      align-items: center !important;
      justify-content: center !important;
      padding: clamp(18px, 4vw, 52px) !important;
      background:
        radial-gradient(circle at 50% 48%, rgba(255,255,255,0.055), transparent 28%),
        radial-gradient(circle at 22% 18%, rgba(255,255,255,0.04), transparent 34%),
        rgba(10,10,10,0.18) !important;
      color: #f2f2f2 !important;
      backdrop-filter: blur(2px) !important;
      -webkit-backdrop-filter: blur(2px) !important;
    }
    body.project-home-open .project-home { display: flex !important; }
    body.project-home-open .topbar { display: none !important; opacity: 0 !important; pointer-events: none !important; }

    .project-welcome-stage {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-width: min(92vw, 760px);
      min-height: 40vh;
      text-align: center;
      cursor: pointer;
      user-select: none;
      animation: homeWelcomeIn 420ms cubic-bezier(.22,1,.36,1) both;
    }
    @keyframes homeWelcomeIn {
      from { opacity: 0; transform: translateY(12px) scale(.985); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* Welcome is the signed-out security boundary. It cannot be closed to reveal a graph underneath. */
    body:not(.project-home-projects):not(.project-home-setup) .project-home-close { display: none !important; }
    .project-home-close {
      position: fixed !important;
      z-index: 1000003 !important;
      height: auto !important;
      width: auto !important;
      min-width: 0 !important;
      border: none !important;
      background: transparent !important;
      box-shadow: none !important;
      color: rgba(235,235,235,.62) !important;
      padding: 10px 12px !important;
      border-radius: 999px !important;
      font-size: 13px !important;
      font-weight: 850 !important;
      letter-spacing: -.01em !important;
    }
    .project-home-close { top: 22px !important; right: 24px !important; font-size: 22px !important; }
    
    .project-home-close:hover,
.project-action-row button:hover,
.project-card-actions button:hover,
.project-profile-actions button:hover {
      color: #fff !important;
      background: rgba(255,255,255,.038) !important;
    }

    /* Clarieus account control: custom shell with Google authentication underneath. */

    @keyframes clarieusAccountMenuIn {
      from { opacity: 0; transform: translateY(5px) scale(.985); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* The official Google button remains the click/auth surface, but Clarieus owns the visible UI. */

.project-profile-card {
      display: none;
      width: min(560px, 92vw) !important;
      margin: 0 auto !important;
      padding: 0 !important;
      border: none !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      text-align: center !important;
    }
    .profile-welcome-word {
      font-size: clamp(48px, 8vw, 92px);
      line-height: .9;
      letter-spacing: -.075em;
      font-weight: 950;
      margin-bottom: 22px;
    }
    .project-name-input {
      background: transparent !important;
      border: none !important;
      border-bottom: 1px solid rgba(255,255,255,.20) !important;
      border-radius: 0 !important;
      color: #f2f2f2 !important;
      height: 54px !important;
      padding: 4px 0 !important;
      text-align: center !important;
      font-size: clamp(28px, 4vw, 44px) !important;
      font-weight: 900 !important;
      outline: none !important;
      box-shadow: none !important;
    }
    .project-profile-actions,
    .project-action-row {
      display: flex !important;
      gap: 18px !important;
      justify-content: center !important;
      align-items: center !important;
      flex-wrap: wrap !important;
      margin: 18px 0 0 !important;
    }
    .project-profile-actions button,
    .project-action-row button,
    .project-card-actions button {
      border: none !important;
      background: transparent !important;
      height: auto !important;
      padding: 8px 10px !important;
      color: rgba(235,235,235,.62) !important;
      font-size: 13px !important;
      font-weight: 850 !important;
      box-shadow: none !important;
      border-radius: 999px !important;
      flex: 0 0 auto !important;
    }
    .project-dashboard {
      width: min(980px, 92vw) !important;
      max-height: min(76vh, 760px) !important;
      overflow: auto !important;
      padding: 0 !important;
      animation: homeWelcomeIn 260ms ease both;
    }
    .project-dashboard-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 20px;
    }
    .project-section-title {
      margin: 0 !important;
      color: #f0f0f0 !important;
      text-transform: none !important;
      letter-spacing: -.055em !important;
      font-size: clamp(36px, 5vw, 62px) !important;
      line-height: .9 !important;
      font-weight: 950 !important;
    }
    .project-grid {
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: 0 !important;
    }
    .project-card {
      display: grid !important;
      grid-template-columns: 112px 1fr auto !important;
      align-items: center !important;
      gap: 18px !important;
      min-height: 82px !important;
      padding: 14px 0 !important;
      border: none !important;
      border-top: 1px solid rgba(255,255,255,.09) !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      cursor: pointer !important;
      transition: opacity 120ms ease, transform 120ms ease !important;
    }
    .project-card:hover { transform: translateX(2px) !important; background: transparent !important; border-color: rgba(255,255,255,.16) !important; }
    .project-card.active-project { box-shadow: none !important; border-color: rgba(255,255,255,.18) !important; }
    .project-thumb {
      width: 112px !important;
      height: 58px !important;
      border: none !important;
      border-radius: 999px !important;
      background: rgba(255,255,255,.045) !important;
      overflow: hidden !important;
      filter: grayscale(.15) contrast(.94) !important;
      opacity: .9 !important;
    }
    .project-thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
    .project-thumb-empty { position: static !important; height: 100% !important; display: grid !important; place-items: center !important; color: rgba(235,235,235,.36) !important; font-size: 11px !important; }
    .project-card-info { padding: 0 !important; min-width: 0 !important; }
    .project-card-title {
      color: #f0f0f0 !important;
      font-size: 18px !important;
      font-weight: 920 !important;
      letter-spacing: -.03em !important;
      margin: 0 0 4px !important;
    }
    .project-card-meta {
      color: rgba(235,235,235,.62) !important;
      font-size: 12px !important;
      margin: 0 !important;
    }
    .project-card-actions { display: flex !important; gap: 10px !important; justify-content: flex-end !important; }
    .project-card-actions .project-delete-btn { width: auto !important; color: rgba(255,190,190,.55) !important; }
    .project-empty-note {
      min-height: 120px !important;
      border: none !important;
      border-top: 1px solid rgba(255,255,255,.09) !important;
      border-radius: 0 !important;
      background: transparent !important;
      color: rgba(235,235,235,.52) !important;
      display: grid !important;
      place-items: center !important;
      text-align: center !important;
      font-weight: 850 !important;
      padding: 24px !important;
    }
    body.project-home-projects .project-welcome-stage,
    body.project-home-projects .project-profile-card { display: none !important; }
    body.project-home-projects .project-dashboard { display: block !important; }
    body.project-home-setup .project-welcome-stage,
    body.project-home-setup .project-dashboard { display: none !important; }
    body.project-home-setup .project-profile-card { display: block !important; }
    #homeTopBtn { display: inline-flex !important; }
    @media (max-width: 720px) {
      .project-dashboard-top { align-items: flex-start; flex-direction: column; }
      .project-card { grid-template-columns: 76px 1fr; }
      .project-card-actions { grid-column: 1 / -1; justify-content: flex-start; }
      .project-thumb { width: 76px !important; height: 46px !important; }
    }

    /* Project dashboard cleanup:
       - Projects screen has its own clean dark surface, not the blurred graph behind it.
       - No horizontal bottom scrollbar.
       - Empty project state stays empty/simple instead of showing ghost graph content. */
    body.project-home-open.project-home-projects .app {
      opacity: 0 !important;
      filter: none !important;
      transform: none !important;
      visibility: hidden !important;
    }
    body.project-home-open.project-home-projects .project-home {
      background: #181818 !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      overflow: hidden !important;
    }
    body.project-home-open.project-home-projects .project-dashboard {
      overflow-x: hidden !important;
      overflow-y: auto !important;
    }
    body.project-home-open.project-home-projects .project-grid,
    body.project-home-open.project-home-projects .project-card,
    body.project-home-open.project-home-projects .project-card * {
      max-width: 100% !important;
      box-sizing: border-box !important;
    }
    body.project-home-open.project-home-projects .project-empty-note {
      place-items: start !important;
      justify-content: start !important;
      text-align: left !important;
      min-height: 70px !important;
      padding: 22px 0 !important;
    }

    /* Final home/settings polish: home shows graph only, not input/doc panels; background gently follows the mouse. */
    :root {
      --home-pan-x: 0px;
      --home-pan-y: 0px;
      --home-mouse-x: 50%;
      --home-mouse-y: 50%;
    }
    body.project-home-open:not(.project-home-projects) .app {
      display: block !important;
      width: 100vw !important;
      width: 100dvw !important;
      height: 100vh !important;
      height: 100dvh !important;
      overflow: hidden !important;
      filter: blur(2.5px) brightness(0.80) saturate(0.96) !important;
      transform: translate3d(var(--home-pan-x), var(--home-pan-y), 0) scale(1.018) !important;
      transform-origin: center center !important;
      pointer-events: none !important;
      transition: filter 220ms ease, transform 90ms ease-out !important;
      opacity: 1 !important;
      visibility: visible !important;
    }
    body.project-home-open:not(.project-home-projects) .left-panel,
    body.project-home-open:not(.project-home-projects) .doc-panel {
      display: none !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }
    body.project-home-open:not(.project-home-projects) .canvas-wrap {
      position: fixed !important;
      inset: 0 !important;
      width: 100vw !important;
      width: 100dvw !important;
      height: 100vh !important;
      height: 100dvh !important;
      border: none !important;
      z-index: 1 !important;
    }
    body.project-home-open:not(.project-home-projects) .project-home {
      background:
        radial-gradient(circle at var(--home-mouse-x) var(--home-mouse-y), rgba(255,255,255,0.050), transparent 22%),
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.030), transparent 32%),
        rgba(10,10,10,0.22) !important;
      backdrop-filter: blur(1.5px) !important;
      -webkit-backdrop-filter: blur(1.5px) !important;
    }
    .project-home > * {
      position: relative;
      z-index: 2;
    }
    .home-top-button {
      width: 42px !important;
      height: 42px !important;
      border-radius: 15px !important;
      background: rgba(28,28,28,0.70) !important;
      border: 1px solid rgba(255,255,255,0.11) !important;
      box-shadow: 0 14px 34px rgba(0,0,0,0.24), inset 0 0 0 1px rgba(255,255,255,0.025) !important;
      backdrop-filter: blur(8px) !important;
      -webkit-backdrop-filter: blur(8px) !important;
    }
    .home-top-button svg {
      width: 18px;
      height: 18px;
      display: block;
      fill: none;
      stroke: rgba(238,238,238,.88);
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .home-top-button:hover {
      background: rgba(42,42,42,0.82) !important;
      border-color: rgba(255,255,255,0.20) !important;
      transform: translateY(-1px) !important;
    }
    #distanceSlider { step: 1; }

    /* The same Shop button stays above the backdrop so it can close the menu again. */

    body[data-ui-skin="glass"] { --panel: rgba(28,28,30,.78); --border: rgba(255,255,255,.10); }
    body[data-ui-skin="glass"] .panel,
    body[data-ui-skin="glass"] .doc-panel,
    body[data-ui-skin="glass"] .settings-popover,
    body[data-ui-skin="glass"] .node-style-popover {
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      background: rgba(26,26,28,.78);
    }
    body[data-ui-skin="midnight"] { --bg:#171923; --panel:#1a1d29; --border:#30364b; --text:#e8ebff; --muted:#a3a8c4; }
    body[data-ui-skin="contrast"] { --bg:#161616; --panel:#101010; --border:#4a4a4a; --text:#f5f5f5; --muted:#bdbdbd; }
    body[data-ui-skin="warm"] { --bg:#201c1a; --panel:#211c19; --border:#45372f; --text:#f2e9df; --muted:#b9aaa0; }

    /* Flow Shop v2: make cosmetics affect the whole workspace, including the document. */
    :root {
      --flow-accent: #d0d0d0;
      --flow-accent-2: #b8b8b8;
      --flow-accent-3: #9f9f9f;
      --flow-accent-soft: rgba(208,208,208,.14);
      --flow-accent-softer: rgba(208,208,208,.075);
      --flow-accent-selection: rgba(208,208,208,.28);
      --flow-accent-outline: rgba(208,208,208,.32);
      --notes-accent-themed: #b8a0f4;
      --notes-accent-hover-themed: #cbb7ff;
      --notes-accent-soft-themed: rgba(164,132,236,.14);
      --notes-id-themed: #9f88d7;
      --doc-panel-bg-themed: #202020;
      --doc-header-bg-themed: #1f1f1f;
      --doc-border-themed: #383838;
      --doc-title-themed: #f0f0f0;
      --doc-text-themed: #d7d7d7;
      --doc-muted-themed: #8c8c8c;
      --app-font: Inter, Arial, sans-serif;
      --title-font: Inter, Arial, sans-serif;
      --node-font: Inter, Arial, sans-serif;
      --button-radius-themed: 10px;
      --panel-radius-themed: 16px;
      --button-outline-themed: rgba(255,255,255,.12);
      --button-bg-themed: rgba(48,48,48,.92);
      --button-hover-themed: rgba(58,58,58,.95);
      --workspace-shadow-themed: 0 20px 55px rgba(0,0,0,.28);
    }

    /* Keep Graphite's current purple Notes accents.
       Other wallpapers follow the same live accent used by the scrollbar and divider. */
    body[data-wallpaper]:not([data-wallpaper="graphite"]) {
      --notes-accent-themed: var(--flow-accent-2, #b8a0f4);
      --notes-accent-hover-themed: var(--flow-accent, #cbb7ff);
      --notes-accent-soft-themed: var(--flow-accent-soft, rgba(164,132,236,.14));
      --notes-id-themed: var(--flow-accent-2, #9f88d7);
    }

    /* Shop Text Font should affect document writing + graph node labels only.
       Keep app buttons, topbar icons, settings, shop UI, and other interface text on the original UI font. */
    body .doc-title-input,
    body .doc-editor,
    body #markdownTextarea,
    body .markdown-preview,
    body .markdown-editor-box .CodeMirror,
    body .markdown-editor-box .CodeMirror pre.CodeMirror-line,
    body .markdown-editor-box .CodeMirror pre.CodeMirror-line-like {
      font-family: var(--app-font) !important;
    }
    body .doc-title-input,
    body .markdown-preview h1,
    body .markdown-preview h2,
    body .markdown-preview h3,
    body .markdown-editor-box .cm-header:not(.cm-formatting-header) {
      font-family: var(--title-font) !important;
    }
    #graph3dBtn,
    .mode-3d-button {
      font-family: Inter, Arial, sans-serif !important;
      font-variant-numeric: tabular-nums;
    }

    body .doc-panel {
      background: var(--doc-panel-bg-themed) !important;
      border-color: var(--doc-border-themed) !important;
      box-shadow: var(--workspace-shadow-themed);
    }
    body .doc-header {
      background: var(--doc-header-bg-themed) !important;
      border-bottom-color: var(--doc-border-themed) !important;
    }
    body .doc-body {
      background: var(--doc-panel-bg-themed) !important;
      color: var(--doc-text-themed) !important;
    }
    body .doc-title-small,
    body .doc-header .doc-title-small {
      color: var(--flow-accent-2) !important;
      text-shadow: 0 0 18px var(--flow-accent-softer);
    }
    body .doc-id {
      background: transparent !important;
      border-color: rgba(255,255,255,.08) !important;
      color: rgba(255,255,255,.58) !important;
      box-shadow: none !important;
    }
    body .doc-title-input,
    body .markdown-preview h1,
    body .markdown-preview h2,
    body .markdown-preview h3,
    body .markdown-editor-box .cm-header:not(.cm-formatting-header) {
      color: var(--doc-title-themed) !important;
      text-shadow: 0 0 18px var(--flow-accent-softer);
    }
    body .doc-editor,
    body .markdown-preview,
    body .markdown-editor-box .CodeMirror,
    body .markdown-editor-box .CodeMirror pre.CodeMirror-line,
    body .markdown-editor-box .CodeMirror pre.CodeMirror-line-like {
      color: var(--doc-text-themed) !important;
    }
    body .markdown-editor-box .CodeMirror-placeholder,
    body .doc-empty,
    body .markdown-preview:empty::before {
      color: var(--doc-muted-themed) !important;
    }
    body .markdown-editor-box .CodeMirror-cursor {
      border-left-color: var(--flow-accent) !important;
    }
    body .markdown-editor-box .CodeMirror-selected,
    body .markdown-editor-box .CodeMirror-focused .CodeMirror-selected,
    body .doc-title-input::selection,
    body .doc-editor::selection,
    body .doc-title-input *::selection,
    body .doc-editor *::selection {
      background: var(--flow-accent-selection) !important;
      color: inherit !important;
    }
    body .markdown-preview a,
    body .markdown-editor-box .cm-link,
    body .markdown-editor-box .cm-url,
    body .markdown-editor-box .cm-md-rendered-link,
    body .markdown-preview .internal-link {
      color: var(--flow-accent-2) !important;
    }
    body .markdown-preview blockquote {
      border-left-color: var(--flow-accent-outline) !important;
      background: var(--flow-accent-softer);
    }
    body .markdown-preview mark,
    body .markdown-editor-box .cm-md-highlight {
      background: var(--flow-accent-soft) !important;
    }
    body .md-smart-add,
    body .doc-close,
    body .topbar button,
    body button {
      border-radius: var(--button-radius-themed) !important;
      border-color: var(--button-outline-themed) !important;
      background: var(--button-bg-themed);
    }
    body button:hover,
    body .topbar button:hover,
    body .md-smart-add:hover {
      background: var(--button-hover-themed) !important;
      border-color: var(--flow-accent-outline) !important;
    }
    body .settings-popover,
body .node-style-popover,
body .project-card {
      border-radius: var(--panel-radius-themed) !important;
      border-color: var(--doc-border-themed) !important;
    }

    body[data-wallpaper="nebula"] {
      --doc-panel-bg-themed: radial-gradient(circle at 80% 8%, rgba(170,105,255,.10), transparent 34%), linear-gradient(180deg,#201e28,#1c1c21 62%,#1b1b1b);
      --doc-header-bg-themed: rgba(28,25,36,.96);
      --doc-border-themed: rgba(181,156,255,.18);
    }
    body[data-wallpaper="forest"] {
      --doc-panel-bg-themed: radial-gradient(circle at 12% 0%, rgba(80,185,130,.08), transparent 38%), linear-gradient(180deg,#1b231f,#1b1f1d 66%,#1b1b1b);
      --doc-header-bg-themed: rgba(26,35,30,.96);
      --doc-border-themed: rgba(120,210,160,.16);
    }
    body[data-wallpaper="sunset"] {
      --doc-panel-bg-themed: radial-gradient(circle at 12% 0%, rgba(255,180,92,.09), transparent 36%), linear-gradient(180deg,#241d20,#1f1d1e 62%,#1b1b1b);
      --doc-header-bg-themed: rgba(35,27,28,.96);
      --doc-border-themed: rgba(255,180,120,.17);
    }

    body[data-wallpaper="frost"] {
      --doc-panel-bg-themed: radial-gradient(circle at 18% 0%, rgba(220,232,255,.08), transparent 34%), linear-gradient(180deg,#1a1d24,#1c2027);
      --doc-header-bg-themed: rgba(24,28,36,.97);
      --doc-border-themed: rgba(168,184,215,.16);
    }
    body[data-wallpaper="aurora"] {
      --doc-panel-bg-themed: radial-gradient(circle at 10% 0%, rgba(100,255,190,.09), transparent 34%), radial-gradient(circle at 88% 10%, rgba(140,115,255,.10), transparent 36%), linear-gradient(180deg,#171f22,#1c1c21);
      --doc-header-bg-themed: rgba(22,29,32,.97);
      --doc-border-themed: rgba(125,230,210,.17);
    }
    body[data-wallpaper="velvet"] {
      --doc-panel-bg-themed: radial-gradient(circle at 20% 0%, rgba(255,92,160,.08), transparent 38%), linear-gradient(180deg,#241b28,#1c1b20);
      --doc-header-bg-themed: rgba(32,24,36,.97);
      --doc-border-themed: rgba(255,120,190,.16);
    }
    body[data-wallpaper="paper"] {
      --doc-panel-bg-themed: linear-gradient(180deg,#242321,#1e1e1d);
      --doc-header-bg-themed: #242321;
      --doc-border-themed: rgba(238,223,190,.16);
    }

    body[data-wallpaper="signal"] {
      --doc-panel-bg-themed: radial-gradient(circle at 18% 0%, rgba(90,255,210,.08), transparent 34%), radial-gradient(circle at 84% 12%, rgba(90,160,255,.08), transparent 34%), linear-gradient(180deg,#151b1f,#191d22);
      --doc-header-bg-themed: rgba(20,27,31,.98);
      --doc-border-themed: rgba(90,210,185,.17);
    }
    body[data-wallpaper="ocean"] {
      --doc-panel-bg-themed: radial-gradient(circle at 16% 0%, rgba(80,180,255,.10), transparent 34%), linear-gradient(180deg,#16212a,#1a1d20);
      --doc-header-bg-themed: rgba(18,29,38,.97);
      --doc-border-themed: rgba(90,175,255,.18);
    }
    body[data-wallpaper="eclipse"] {
      --doc-panel-bg-themed: radial-gradient(circle at 84% 10%, rgba(255,205,120,.08), transparent 24%), linear-gradient(180deg,#1c1b20,#1b1c20);
      --doc-header-bg-themed: rgba(28,27,32,.97);
      --doc-border-themed: rgba(215,186,120,.14);
    }
    body[data-wallpaper="smoke"] {
      --doc-panel-bg-themed: radial-gradient(circle at 78% 0%, rgba(255,255,255,.04), transparent 28%), linear-gradient(180deg,#1b1c1f,#1d1f24);
      --doc-header-bg-themed: rgba(27,28,32,.98);
      --doc-border-themed: rgba(170,175,186,.12);
    }
    body[data-wallpaper="ember"] {
      --doc-panel-bg-themed: radial-gradient(circle at 12% 0%, rgba(255,150,90,.08), transparent 30%), linear-gradient(180deg,#231c1b,#1f1d1e);
      --doc-header-bg-themed: rgba(34,27,26,.98);
      --doc-border-themed: rgba(215,132,95,.16);
    }
    body[data-wallpaper="royal"] {
      --doc-panel-bg-themed: radial-gradient(circle at 90% 0%, rgba(180,130,255,.10), transparent 36%), linear-gradient(180deg,#1b1728,#1b1b20);
      --doc-header-bg-themed: rgba(25,21,36,.97);
      --doc-border-themed: rgba(170,130,255,.18);
    }

    body[data-wallpaper="moon-dust"] { --doc-panel-bg-themed: radial-gradient(circle at 82% 0%, rgba(220,228,242,.06), transparent 26%), linear-gradient(180deg,#191c22,#1a1c20); --doc-header-bg-themed:rgba(24,27,33,.98); --doc-border-themed:rgba(174,182,198,.13); }
    body[data-wallpaper="void-bloom"] { --doc-panel-bg-themed: radial-gradient(circle at 18% 0%, rgba(115,78,150,.07), transparent 30%), linear-gradient(180deg,#1a171e,#1a1a1e); --doc-header-bg-themed:rgba(25,22,29,.98); --doc-border-themed:rgba(140,110,166,.13); }
    body[data-wallpaper="dusk-horizon"] { --doc-panel-bg-themed:linear-gradient(180deg,#1a1b20,#201d20 70%,#1b1b1d); --doc-header-bg-themed:rgba(26,26,31,.98); --doc-border-themed:rgba(188,135,110,.13); }
    body[data-wallpaper="moss-stone"] { --doc-panel-bg-themed:radial-gradient(circle at 14% 0%, rgba(115,140,105,.07), transparent 30%),linear-gradient(180deg,#1c211e,#1b1d1c); --doc-header-bg-themed:rgba(27,31,29,.98); --doc-border-themed:rgba(120,140,115,.13); }
    body[data-wallpaper="copper-fog"] { --doc-panel-bg-themed:radial-gradient(circle at 14% 0%, rgba(183,113,70,.07), transparent 30%),linear-gradient(180deg,#211d1b,#1e1c1b); --doc-header-bg-themed:rgba(31,27,25,.98); --doc-border-themed:rgba(170,115,83,.13); }
    body[data-wallpaper="arctic-halo"] { --doc-panel-bg-themed:radial-gradient(circle at 80% 0%, rgba(184,213,235,.07), transparent 30%),linear-gradient(180deg,#1b2026,#1b1e22); --doc-header-bg-themed:rgba(25,30,36,.98); --doc-border-themed:rgba(157,185,207,.14); }
    body[data-wallpaper="ink-wash"] { --doc-panel-bg-themed:linear-gradient(180deg,#1a1a1a,#1c1d1e); --doc-header-bg-themed:#1a1a1b; --doc-border-themed:rgba(255,255,255,.08); }
    body[data-wallpaper="starlight"] { --doc-panel-bg-themed:radial-gradient(circle at 82% 0%, rgba(85,135,205,.07), transparent 30%),linear-gradient(180deg,#151920,#181b21); --doc-header-bg-themed:rgba(19,23,30,.98); --doc-border-themed:rgba(95,130,175,.13); }

    body[data-ui-skin="obsidian"] {
      --button-radius-themed: 10px;
      --panel-radius-themed: 16px;
      --button-outline-themed: rgba(255,255,255,.12);
      --button-bg-themed: rgba(48,48,48,.92);
      --button-hover-themed: rgba(58,58,58,.96);
    }
    body[data-ui-skin="glass"] {
      --button-radius-themed: 14px;
      --panel-radius-themed: 20px;
      --button-outline-themed: rgba(255,255,255,.16);
      --button-bg-themed: rgba(255,255,255,.075);
      --button-hover-themed: rgba(255,255,255,.12);
      --workspace-shadow-themed: 0 28px 80px rgba(0,0,0,.36);
    }
    body[data-ui-skin="midnight"] {
      --button-radius-themed: 12px;
      --panel-radius-themed: 18px;
      --button-outline-themed: rgba(130,150,255,.18);
      --button-bg-themed: rgba(38,44,72,.72);
      --button-hover-themed: rgba(48,56,92,.86);
    }
    body[data-ui-skin="contrast"] {
      --button-radius-themed: 8px;
      --panel-radius-themed: 10px;
      --button-outline-themed: rgba(255,255,255,.32);
      --button-bg-themed: rgba(30,30,30,.98);
      --button-hover-themed: rgba(64,64,64,.98);
      --workspace-shadow-themed: 0 18px 48px rgba(0,0,0,.45);
    }
    body[data-ui-skin="warm"] {
      --button-radius-themed: 12px;
      --panel-radius-themed: 18px;
      --button-outline-themed: rgba(255,190,130,.16);
      --button-bg-themed: rgba(58,43,34,.78);
      --button-hover-themed: rgba(74,54,42,.88);
    }
    body[data-ui-skin="neon"] {
      --bg:#111316; --panel:#15171c; --border: rgba(125,235,255,.22); --text:#effcff; --muted:#9bb9c2;
      --button-radius-themed: 12px;
      --panel-radius-themed: 20px;
      --button-outline-themed: var(--flow-accent-outline);
      --button-bg-themed: rgba(18,24,30,.88);
      --button-hover-themed: var(--flow-accent-softer);
      --workspace-shadow-themed: 0 0 0 1px var(--flow-accent-softer), 0 30px 82px rgba(0,0,0,.50);
    }
    body[data-ui-skin="neon"] button,
    body[data-ui-skin="neon"] .topbar button {
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 0 18px var(--flow-accent-softer) !important;
    }
    body[data-ui-skin="floating"] {
      --button-radius-themed: 999px;
      --panel-radius-themed: 26px;
      --button-outline-themed: rgba(255,255,255,.13);
      --button-bg-themed: rgba(255,255,255,.075);
      --button-hover-themed: rgba(255,255,255,.12);
      --workspace-shadow-themed: 0 34px 90px rgba(0,0,0,.42);
    }
    body[data-ui-skin="floating"] .doc-panel,
    body[data-ui-skin="floating"] .panel {
      margin: 10px !important;
      height: calc(100vh - 20px) !important;
      height: calc(100dvh - 20px) !important;
      border-radius: 26px !important;
      overflow: hidden !important;
    }
    body.layout-doc-full[data-ui-skin="floating"] .doc-panel,
    body.graph-full-mode[data-ui-skin="floating"] .canvas-wrap {
      margin: 0 !important;
      border-radius: 0 !important;
      height: 100vh !important;
      height: 100dvh !important;
    }
    body[data-ui-skin="slate"] {
      --bg:#1b1f22; --panel:#20262b; --border:#38434b; --text:#eef3f5; --muted:#a7b2b8;
      --button-radius-themed: 7px;
      --panel-radius-themed: 12px;
      --button-outline-themed: rgba(185,205,215,.20);
      --button-bg-themed: rgba(46,55,62,.86);
      --button-hover-themed: rgba(56,67,75,.96);
    }
    body[data-ui-skin="royal"] {
      --bg:#17131f; --panel:#1e182b; --border: rgba(176,139,255,.22); --text:#f3eeff; --muted:#b7a8d7;
      --button-radius-themed: 15px;
      --panel-radius-themed: 24px;
      --button-outline-themed: rgba(176,139,255,.24);
      --button-bg-themed: rgba(58,42,90,.62);
      --button-hover-themed: rgba(70,52,110,.78);
      --workspace-shadow-themed: 0 24px 75px rgba(30,0,70,.26), 0 24px 75px rgba(0,0,0,.42);
    }
    body[data-ui-skin="minimal"] {
      --button-radius-themed: 4px;
      --panel-radius-themed: 8px;
      --button-outline-themed: rgba(255,255,255,.10);
      --button-bg-themed: rgba(35,35,35,.92);
      --button-hover-themed: rgba(45,45,45,.96);
      --workspace-shadow-themed: none;
    }

    /* Experimental 3D graph mode. Keeps the normal 2D graph data, but renders it with a perspective camera. */
    .mode-3d-button {
      font-size: 12px !important;
      font-weight: 950 !important;
      letter-spacing: -0.02em;
    }
    .mode-3d-button.active {
      background: rgba(118, 92, 255, 0.28) !important;
      border-color: rgba(150, 130, 255, 0.72) !important;
      color: #ffffff !important;
      box-shadow: 0 0 0 1px rgba(150,130,255,0.16), 0 12px 30px rgba(80,60,180,0.22) !important;
    }
    body.graph-3d-mode .canvas-wrap { cursor: grab; }
    body.graph-3d-mode .canvas-wrap.orbiting-3d,
    body.graph-3d-mode .canvas-wrap.dragging-node { cursor: grabbing; }

    /* 3D mode panels should feel like glass panels, not solid boxes. */
    body.graph-3d-mode .left-panel,
    body.graph-3d-mode .doc-panel {
      background: rgba(31,31,31,0.20) !important;
      backdrop-filter: blur(8px) saturate(1.08) !important;
      -webkit-backdrop-filter: blur(8px) saturate(1.08) !important;
    }
    body.graph-3d-mode .doc-header {
      background: rgba(31,31,31,0.22) !important;
    }
    body.graph-3d-mode .doc-body {
      background: rgba(32,32,32,0.08) !important;
    }
    body.graph-3d-mode .left-panel textarea,
body.graph-3d-mode .left-panel input,
body.graph-3d-mode .left-panel select,
body.graph-3d-mode .left-panel button {
      background: rgba(22,22,22,0.36) !important;
    }

    /* Final requested polish: shop button is icon-only, all top buttons match Home, document font stays document-only, and document glass stays transparent. */
    .topbar-right > button.settings-button {
      width: 42px !important;
      height: 42px !important;
      min-width: 42px !important;
      padding: 0 !important;
      border-radius: 15px !important;
      background: rgba(28,28,28,0.70) !important;
      border: 1px solid rgba(255,255,255,0.11) !important;
      color: rgba(238,238,238,.88) !important;
      box-shadow: 0 14px 34px rgba(0,0,0,0.24), inset 0 0 0 1px rgba(255,255,255,0.025) !important;
      backdrop-filter: blur(8px) !important;
      -webkit-backdrop-filter: blur(8px) !important;
      transform: none;
      font-family: Inter, Arial, sans-serif !important;
    }
    .topbar-right > button.settings-button:hover,
.topbar-right > button.settings-button.active,
body.project-home-open #homeTopBtn,
body.show-settings #settingsBtn,
body.show-graph-settings #graphSettingsBtn,
body.show-node-style #nodeStyleBtn {
      background: rgba(42,42,42,0.82) !important;
      border-color: rgba(255,255,255,0.20) !important;
      color: #ffffff !important;
      transform: translateY(-1px) !important;
    }
    .topbar-right > button.settings-button svg {
      width: 18px !important;
      height: 18px !important;
      display: block !important;
      fill: none !important;
      stroke: currentColor !important;
      stroke-width: 1.9 !important;
      stroke-linecap: round !important;
      stroke-linejoin: round !important;
    }

    #graph3dBtn,
    .mode-3d-button {
      font-family: Inter, Arial, sans-serif !important;
      font-weight: 900 !important;
      letter-spacing: -0.02em !important;
    }

    /* Text Font from the shop applies to the document panel only. */
    #docTitle,
    #docText,
    #markdownDocShell,
    #markdownDocShell .CodeMirror,
    #markdownDocShell .CodeMirror pre.CodeMirror-line,
    #markdownDocShell .CodeMirror pre.CodeMirror-line-like,
    #markdownDocShell .CodeMirror-line span,
    #markdownDocShell .markdown-preview,
    #markdownTextarea {
      font-family: var(--app-font) !important;
    }
    #docTitle,
    #markdownDocShell .cm-header:not(.cm-formatting-header),
    #markdownDocShell .markdown-preview h1,
    #markdownDocShell .markdown-preview h2,
    #markdownDocShell .markdown-preview h3,
    #markdownDocShell .markdown-preview h4,
    #markdownDocShell .markdown-preview h5,
    #markdownDocShell .markdown-preview h6 {
      font-family: var(--title-font) !important;
    }
    #markdownDocShell .cm-code,
    #markdownDocShell .cm-comment,
    #markdownDocShell code,
    #markdownDocShell pre code {
      font-family: "Cascadia Code", Consolas, monospace !important;
    }

    /* Keep the document panel glass/transparent like the input panel, even while a node document is open. */
    .doc-panel.doc-glass {
      background: rgba(31,31,31,0.08) !important;
      backdrop-filter: blur(3px) !important;
      -webkit-backdrop-filter: blur(3px) !important;
    }
    .doc-panel.doc-glass .doc-glass-bg {
      display: block !important;
      opacity: 1 !important;
    }
    .doc-panel.doc-glass .doc-header {
      background: rgba(31,31,31,0.12) !important;
      backdrop-filter: blur(3px) !important;
      -webkit-backdrop-filter: blur(3px) !important;
    }
    .doc-panel.doc-glass .doc-body {
      background: rgba(32,32,32,0.03) !important;
    }
    .doc-panel > *:not(.doc-glass-bg) {
      position: relative;
      z-index: 2;
    }

    /* Final layout/image cleanup:
       - image widgets are true front layers, without a fake dark backing/void
       - layout presets switch instantly so the graph does not shrink/open from the top-left
       - Document Full keeps the same readable document-page ratio instead of stretching oddly */
    .markdown-editor-box .CodeMirror .cm-md-rendered-image-wrap::before {
      display: none !important;
      content: none !important;
      background: transparent !important;
    }
    .markdown-editor-box .CodeMirror .cm-md-rendered-image-wrap,
    .markdown-editor-box .CodeMirror .cm-md-rendered-image-wrap img.cm-md-rendered-image {
      background: transparent !important;
      z-index: 1000000 !important;
    }
    .markdown-editor-box .CodeMirror .cm-md-rendered-image-wrap {
      pointer-events: auto !important;
      will-change: transform, width, height;
    }
    .markdown-editor-box .CodeMirror .cm-md-rendered-image-wrap.selected {
      outline-offset: 0 !important;
    }
    body.layout-switching .app,
    body.layout-switching .panel,
    body.layout-switching .doc-panel,
    body.layout-switching .canvas-wrap,
    body.layout-switching #graphCanvas {
      transition: none !important;
      animation: none !important;
    }
    body.layout-doc-full #docEditor.doc-card {
      width: min(100%, 960px) !important;
      max-width: 960px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: clamp(28px, 5vw, 86px) !important;
      padding-right: clamp(28px, 5vw, 86px) !important;
      box-sizing: border-box !important;
    }
    @media (max-width: 980px) {
      body.layout-doc-full #docEditor.doc-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
      }
    }

    /* 3D document glass stays synchronized with the active wallpaper/theme. */
    body.graph-3d-mode .doc-panel.doc-glass,
    body[data-graph-mode="3d"] .doc-panel.doc-glass {
      background: rgba(24,24,27,.07) !important;
      backdrop-filter: blur(4px) !important;
      -webkit-backdrop-filter: blur(4px) !important;
    }
    body.graph-3d-mode .doc-panel.doc-glass .doc-glass-bg,
    body[data-graph-mode="3d"] .doc-panel.doc-glass .doc-glass-bg {
      opacity: .88 !important;
    }
    body.graph-3d-mode .doc-panel.doc-glass .doc-header,
    body[data-graph-mode="3d"] .doc-panel.doc-glass .doc-header {
      background: rgba(24,24,27,.16) !important;
    }
    body.graph-3d-mode .doc-panel.doc-glass .doc-body,
    body[data-graph-mode="3d"] .doc-panel.doc-glass .doc-body {
      background: rgba(24,24,27,.035) !important;
    }

    /* Real lightweight 3D document glass: no copied graph and no fake wallpaper canvas. */
    body.graph-3d-mode .doc-panel.doc-glass,
    body[data-graph-mode="3d"] .doc-panel.doc-glass {
      background: rgba(20,22,24,.10) !important;
      backdrop-filter: blur(5px) saturate(.96) !important;
      -webkit-backdrop-filter: blur(5px) saturate(.96) !important;
    }
    body.graph-3d-mode .doc-panel.doc-glass .doc-glass-bg,
    body[data-graph-mode="3d"] .doc-panel.doc-glass .doc-glass-bg {
      display: none !important;
      opacity: 0 !important;
      filter: none !important;
      transform: none !important;
    }
    body.graph-3d-mode .doc-panel.doc-glass .doc-header,
    body[data-graph-mode="3d"] .doc-panel.doc-glass .doc-header {
      background: rgba(20,22,24,.14) !important;
      backdrop-filter: blur(4px) !important;
      -webkit-backdrop-filter: blur(4px) !important;
    }
    body.graph-3d-mode .doc-panel.doc-glass .doc-body,
    body[data-graph-mode="3d"] .doc-panel.doc-glass .doc-body {
      background: rgba(20,22,24,.015) !important;
    }

    /* True 3D document glass: put the real graph canvas underneath the panel.
       No mirrored/screenshot canvas is drawn, so camera motion remains live and smooth. */
    body.graph-3d-mode.has-selected-node.layout-doc-right .app,
    body.graph-3d-mode.has-selected-node.layout-doc-left .app {
      position: fixed !important;
      inset: 0 !important;
      display: block !important;
      width: 100vw !important;
      width: 100dvw !important;
      height: 100vh !important;
      height: 100dvh !important;
      overflow: hidden !important;
    }
    body.graph-3d-mode.has-selected-node.layout-doc-right .canvas-wrap,
    body.graph-3d-mode.has-selected-node.layout-doc-left .canvas-wrap {
      position: fixed !important;
      inset: 0 !important;
      display: block !important;
      width: 100vw !important;
      width: 100dvw !important;
      height: 100vh !important;
      height: 100dvh !important;
      max-height: 100vh !important;
      max-height: 100dvh !important;
      z-index: 1 !important;
      border: none !important;
    }
    body.graph-3d-mode.has-selected-node.layout-doc-right .doc-panel,
    body.graph-3d-mode.has-selected-node.layout-doc-left .doc-panel {
      position: fixed !important;
      top: 0 !important;
      bottom: 0 !important;
      display: flex !important;
      width: var(--flow-document-panel-width, 50vw) !important;
      height: 100vh !important;
      height: 100dvh !important;
      max-height: 100vh !important;
      max-height: 100dvh !important;
      z-index: 80 !important;
      background: rgba(20,22,24,.18) !important;
      backdrop-filter: blur(7px) saturate(.94) !important;
      -webkit-backdrop-filter: blur(7px) saturate(.94) !important;
      box-shadow: -18px 0 48px rgba(0,0,0,.16) !important;
    }
    body.graph-3d-mode.has-selected-node.layout-doc-right .doc-panel {
      left: auto !important;
      right: 0 !important;
      border-left: 1px solid rgba(255,255,255,.11) !important;
      border-right: none !important;
    }
    body.graph-3d-mode.has-selected-node.layout-doc-left .doc-panel {
      left: 0 !important;
      right: auto !important;
      border-left: none !important;
      border-right: 1px solid rgba(255,255,255,.11) !important;
      box-shadow: 18px 0 48px rgba(0,0,0,.16) !important;
    }
    body.graph-3d-mode.has-selected-node.layout-doc-right .doc-panel .doc-header,
    body.graph-3d-mode.has-selected-node.layout-doc-left .doc-panel .doc-header {
      background: rgba(20,22,24,.22) !important;
    }
    body.graph-3d-mode.has-selected-node.layout-doc-right .doc-panel .doc-body,
    body.graph-3d-mode.has-selected-node.layout-doc-left .doc-panel .doc-body {
      background: rgba(20,22,24,.055) !important;
    }

    /* Keep the normal three-panel layout capable of the same real glass effect. */
    body.graph-3d-mode.has-selected-node.layout-default .canvas-wrap {
      position: fixed !important;
      top: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      left: var(--left-panel) !important;
      width: auto !important;
      height: 100vh !important;
      height: 100dvh !important;
      z-index: 1 !important;
    }
    body.graph-3d-mode.has-selected-node.layout-default .left-panel {
      position: relative !important;
      z-index: 90 !important;
    }
    body.graph-3d-mode.has-selected-node.layout-default .doc-panel {
      position: fixed !important;
      top: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      width: var(--doc-panel) !important;
      height: 100vh !important;
      height: 100dvh !important;
      z-index: 80 !important;
      background: rgba(20,22,24,.18) !important;
      backdrop-filter: blur(7px) saturate(.94) !important;
      -webkit-backdrop-filter: blur(7px) saturate(.94) !important;
    }
    body.graph-3d-mode.has-selected-node.layout-default .doc-panel .doc-header {
      background: rgba(20,22,24,.22) !important;
    }
    body.graph-3d-mode.has-selected-node.layout-default .doc-panel .doc-body {
      background: rgba(20,22,24,.055) !important;
    }

    /* One active 3D layout at a time: the inactive choice has no render/physics loop. */
    .graph3d-layout-toggle {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 7px;
      padding: 5px;
      border: 1px solid rgba(255,255,255,.09);
      border-radius: 13px;
      background: rgba(12,12,12,.28);
    }
    .graph3d-layout-choice {
      min-width: 0;
      height: 38px;
      border: 1px solid transparent !important;
      border-radius: 9px !important;
      background: transparent !important;
      color: #929292 !important;
      font-size: 12px !important;
      font-weight: 900 !important;
      cursor: pointer;
      transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
    }
    .graph3d-layout-choice:hover {
      color: #dedede !important;
      background: rgba(255,255,255,.045) !important;
    }
    .graph3d-layout-choice.active {
      color: #fff !important;
      border-color: rgba(162,139,255,.46) !important;
      background: rgba(137,112,239,.18) !important;
      box-shadow: inset 0 0 0 1px rgba(162,139,255,.07);
    }
    .graph3d-layout-note {
      margin-top: 8px;
      color: #818181;
      font-size: 10px;
      line-height: 1.38;
    }

    /* Title size uses the existing toggle styling; only the column count differs. */
    .graph-title-size-toggle { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    /* colourful icon previews and self-contained game boards. */

    #canvasWrap::after {
      content:'';
      position:absolute;
      inset:0;
      z-index:24;
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transition:opacity 180ms ease,visibility 180ms ease;
    }

    #canvasWrap::before {
      content:'';
      position:absolute;
      inset:0;
      z-index:2;
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transition:opacity 220ms ease,visibility 220ms ease;
    }

  /* Minimal Notes drawer: translucent, isolated, and fully dormant while closed. */
  body.va-layout .left-panel,
  body.va-layout.graph-full-mode .left-panel {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    display: none !important;
    flex-direction: column !important;
    width: var(--notes-panel-width, 50vw) !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-right: 1px solid var(--doc-border-themed, #383838) !important;
    border-radius: 0 !important;
    background: var(--doc-panel-bg-themed, #202020) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    transform: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: none !important;
    contain: layout paint style;
    z-index: 999994 !important;
  }

  body.va-layout.notes-dock-right .left-panel,
  body.va-layout.notes-dock-right.graph-full-mode .left-panel {
    inset: 0 0 0 auto !important;
    border-right: 0 !important;
    border-left: 1px solid var(--doc-border-themed, #383838) !important;
  }

  body.va-layout.notes-drawer-open .left-panel {
    display: flex !important;
    transform: none !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: none !important;
  }

  /* Match the Notes/input drawer: the graph remains live and full-screen below
     the document, while the document itself is a fixed side layer. */
  body.va-layout.has-selected-node.layout-doc-left .app,
  body.va-layout.has-selected-node.layout-doc-right .app {
    position: fixed !important;
    inset: 0 !important;
    display: block !important;
    width: 100vw !important;
    width: 100dvw !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }

  body.va-layout.has-selected-node.layout-doc-left .canvas-wrap,
  body.va-layout.has-selected-node.layout-doc-right .canvas-wrap {
    position: fixed !important;
    inset: 0 !important;
    display: block !important;
    width: 100vw !important;
    width: 100dvw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    border: 0 !important;
    z-index: 1 !important;
  }

  body.va-layout.has-selected-node.layout-doc-left .doc-panel,
  body.va-layout.has-selected-node.layout-doc-right .doc-panel {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    z-index: 80 !important;
  }

  body.va-layout.has-selected-node.layout-doc-left .doc-panel {
    left: 0 !important;
    right: auto !important;
    border-left: 0 !important;
    border-right: 1px solid var(--doc-border-themed, var(--border)) !important;
  }

  body.va-layout.has-selected-node.layout-doc-right .doc-panel {
    left: auto !important;
    right: 0 !important;
    border-left: 1px solid var(--doc-border-themed, var(--border)) !important;
    border-right: 0 !important;
  }

  body.va-layout.has-selected-node .doc-panel.doc-glass {
    background: rgba(31,31,31,.08) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
  }

  body.va-layout.has-selected-node .doc-panel.doc-glass .doc-glass-bg,
  body.va-layout .document-swipe-backdrop {
    display: none !important;
    opacity: 0 !important;
  }

  body.va-layout.notes-drawer-gesture.notes-gesture-left .left-panel {
    inset: 0 auto 0 0 !important;
    border-right: 1px solid var(--doc-border-themed, #383838) !important;
    border-left: 0 !important;
  }

  body.va-layout.notes-drawer-gesture.notes-gesture-right .left-panel {
    inset: 0 0 0 auto !important;
    border-right: 0 !important;
    border-left: 1px solid var(--doc-border-themed, #383838) !important;
  }

  body.va-layout.notes-drawer-gesture .left-panel {
    display: flex !important;
    visibility: visible !important;
    pointer-events: none !important;
    transform: translate3d(var(--notes-swipe-offset, 0px), 0, 0) !important;
    transition: none !important;
    will-change: transform;
  }

  body.va-layout.notes-drawer-gesture.notes-gesture-animating .left-panel {
    transform: translate3d(var(--notes-swipe-offset, 0px), 0, 0) !important;
    transition: transform 180ms cubic-bezier(.2,.8,.2,1) !important;
    will-change: transform;
  }

  body.document-swipe-gesture .doc-panel {
    transform: translate3d(var(--document-swipe-offset, 0px), 0, 0) !important;
    transition: none !important;
    pointer-events: none !important;
    will-change: transform;
    box-shadow: none !important;
  }

  body.document-swipe-gesture.document-swipe-animating .doc-panel {
    transform: translate3d(var(--document-swipe-offset, 0px), 0, 0) !important;
    transition: transform 180ms cubic-bezier(.2,.8,.2,1) !important;
    will-change: transform;
  }

  /* v0.3.8.18: Local Graph documents enter and exit at the same calm speed.
     Manual cancelled swipes keep the original fast snap-back above; only a real
     open/close transition uses this longer duration. */
  body.document-swipe-gesture.document-swipe-animating.document-local-transition .doc-panel {
    transition: transform 560ms cubic-bezier(.2,.72,.2,1) !important;
  }

  .document-swipe-backdrop {
    position: fixed;
    display: none;
    pointer-events: none;
    z-index: 79;
    background: var(--bg, #202020);
  }

  body.document-swipe-gesture .document-swipe-backdrop.ready {
    display: block;
  }

  body.va-layout:not(.has-selected-node) .doc-panel {
    display: none !important;
  }

  body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .doc-panel,
  body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .doc-panel.doc-glass {
    background: var(--doc-panel-bg-themed, #202020) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .doc-panel .doc-glass-bg,
  body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .doc-panel.doc-glass .doc-glass-bg {
    display: none !important;
  }

  body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .doc-panel.doc-glass .doc-header {
    background: rgba(24,24,26,.94) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .doc-panel.doc-glass .doc-body {
    background: transparent !important;
  }

  body.va-layout .left-panel textarea,
body.va-layout .left-panel input,
body.va-layout .left-panel button {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .doc-header {
    cursor: grab;
    touch-action: none;
    overflow: visible;
    padding-right: 54px;
    z-index: 30;
  }

  .notes-view {
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
  }

  .notes-view[hidden] {
    display: none !important;
  }

  #notesListView {
    display: grid;
    grid-template-rows: auto minmax(0,1fr);
  }

  .notes-commandbar {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 38px;
    padding: 7px 9px 5px;
    flex: 0 0 auto;
  }

  .notes-command {
    display: inline-grid;
    place-items: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent !important;
    color: var(--notes-accent-themed, var(--flow-accent-2, #67b7ef)) !important;
    cursor: pointer;
    transition: color 130ms ease, background 130ms ease, transform 130ms ease;
  }

  .notes-command:hover,
  .notes-command.active {
    color: var(--notes-accent-hover-themed, #cbb7ff) !important;
    background: var(--notes-accent-soft-themed, rgba(164,132,236,.14)) !important;
  }

  .notes-command:active { transform: scale(.94); }
  .notes-command svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .notes-command[aria-pressed="true"] svg {
    fill: currentColor;
    fill-opacity: .16;
  }

  .notes-command.notes-mode-command {
    color: var(--doc-muted-themed, #828287) !important;
  }

  .notes-command.notes-mode-command:hover {
    color: var(--doc-text-themed, #e8e8e8) !important;
    background: rgba(255,255,255,.06) !important;
  }

  .notes-command.notes-mode-command.active {
    color: var(--doc-text-themed, #f1f1f1) !important;
    background: rgba(255,255,255,.105) !important;
  }

  .notes-command-divider {
    width: 1px;
    height: 18px;
    margin: 0 2px;
    background: rgba(255,255,255,.09);
    flex: 0 0 auto;
  }

  .notes-context-menu {
    position: fixed;
    z-index: 20020;
    display: grid;
    min-width: 188px;
    padding: 6px;
    border: 1px solid var(--doc-border-themed, rgba(255,255,255,.14));
    border-radius: 12px;
    background: rgba(26,26,28,.94);
    box-shadow: 0 18px 46px rgba(0,0,0,.46);
    backdrop-filter: blur(18px) saturate(1.12);
    -webkit-backdrop-filter: blur(18px) saturate(1.12);
  }

  .notes-context-menu[hidden] { display: none !important; }

  .notes-context-menu button {
    display: grid;
    grid-template-columns: 18px minmax(0,1fr);
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 6px 9px;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #dedede !important;
    font-size: 12px;
    font-weight: 700;
    text-align: left;
  }

  .notes-context-menu button:hover {
    color: var(--notes-accent-hover-themed, #d8c9ff) !important;
    background: var(--notes-accent-soft-themed, rgba(164,132,236,.14)) !important;
  }

  .notes-context-menu button.danger { color: #d99a9a !important; }
  .notes-context-menu button.danger:hover {
    color: #ffd0d0 !important;
    background: rgba(150,54,54,.18) !important;
  }

  .notes-context-menu svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .notes-context-separator {
    height: 1px;
    margin: 3px 5px;
    background: rgba(255,255,255,.08);
  }

  .notes-search-panel {
    display: none;
    margin: 2px 9px 8px;
    padding: 7px;
    border: 1px solid var(--doc-border-themed, rgba(255,255,255,.12));
    border-radius: 11px;
    background: rgba(19,19,21,.76);
    box-shadow: 0 12px 30px rgba(0,0,0,.20);
  }

  .notes-commandbar.search-open + #notesListView .notes-search-panel {
    display: block;
  }

  .notes-search-box {
    display: grid;
    grid-template-columns: 18px minmax(0,1fr);
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 8px;
    background: rgba(8,8,10,.66);
    color: var(--doc-muted-themed, #89898d);
  }

  .notes-search-box:focus-within {
    border-color: var(--flow-accent-outline, rgba(164,132,236,.54));
    box-shadow: 0 0 0 2px var(--flow-accent-softer, rgba(164,132,236,.10));
  }

  .notes-search-box svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  #notesSearchInput {
    width: 100%;
    min-height: 34px;
    padding: 4px 0;
    border: 0 !important;
    border-radius: 0;
    outline: 0;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--doc-text-themed, #e8e8e8);
    font-size: 12px;
  }

  .notes-search-help {
    display: grid;
    gap: 1px;
    margin-top: 7px;
    padding: 3px;
    border-radius: 8px;
    background: rgba(255,255,255,.025);
  }

  .notes-search-help-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 26px;
    padding: 3px 7px 5px;
    color: var(--doc-text-themed, #d9d9dc);
    font-size: 11px;
    font-weight: 800;
  }

  .notes-search-help-title span {
    display: inline-grid;
    place-items: center;
    width: 17px;
    height: 17px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 50%;
    color: var(--doc-muted-themed, #8b8b91);
    font-size: 10px;
  }

  .notes-search-option {
    display: grid !important;
    grid-template-columns: 48px minmax(0,1fr);
    align-items: center;
    gap: 7px;
    width: 100%;
    min-height: 27px;
    padding: 4px 7px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: var(--doc-muted-themed, #929298) !important;
    font-size: 10.5px;
    text-align: left;
  }

  .notes-search-option:hover {
    color: var(--doc-text-themed, #e7e7e9) !important;
    background: var(--notes-accent-soft-themed, rgba(164,132,236,.12)) !important;
  }

  .notes-search-option b {
    color: var(--notes-accent-themed, var(--flow-accent-2, #67b7ef));
    font: inherit;
    font-weight: 800;
  }

  .notes-tree {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding: 0 6px 18px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
  }

  .notes-tree-row {
    display: grid;
    grid-template-columns: 14px minmax(0,1fr);
    column-gap: 1px;
    align-items: center;
    position: relative;
    isolation: isolate;
    min-height: 30px;
    margin: 0;
    padding: 1px 4px 1px calc(4px + var(--note-depth, 0) * 14px);
    background: transparent !important;
    content-visibility: visible;
    contain: none;
  }

  .notes-tree-row::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 1px 2px;
    border-radius: 6px;
    background: transparent;
    pointer-events: none;
    transition: background-color 130ms ease;
  }

  .notes-tree-row > * {
    position: relative;
    z-index: 1;
  }

  .notes-tree-branch {
    display: grid;
    grid-template-rows: 0fr;
    min-height: 0;
    opacity: 0;
    overflow: hidden;
    transition:
      grid-template-rows 220ms cubic-bezier(.2,.8,.2,1),
      opacity 160ms ease;
  }

  .notes-tree-branch.expanded {
    grid-template-rows: 1fr;
    opacity: 1;
  }

  .notes-tree-branch-inner {
    min-height: 0;
    overflow: hidden;
  }

  .notes-folder-toggle {
    display: grid;
    place-items: center;
    width: 14px;
    height: 28px;
    padding: 0;
    border: 0;
    background: transparent !important;
    color: rgba(224,224,224,.40) !important;
    appearance: none;
    -webkit-appearance: none;
    isolation: isolate;
    transition: color 130ms ease;
  }

  .notes-folder-toggle svg {
    width: 12px;
    height: 12px;
    overflow: visible;
    transform-origin: center;
    transition: transform 180ms cubic-bezier(.2,.8,.2,1);
  }

  .notes-folder-toggle.expanded svg {
    transform: rotate(90deg);
  }
  .notes-folder-toggle.leaf { visibility: hidden; }

  /* Folder chevrons are glyphs, not themed buttons. Keep their click target while
     removing the dark oval that the global button skin otherwise paints behind them. */
  body button.notes-folder-toggle,
  body button.notes-folder-toggle:hover,
  body button.notes-folder-toggle:focus,
  body button.notes-folder-toggle:active {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .notes-tree-note {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    min-height: 28px;
    padding: 3px 3px;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    text-align: left;
    cursor: grab;
    transition: background 130ms ease, opacity 130ms ease, box-shadow 130ms ease;
  }

  .notes-tree-note:hover { background: transparent !important; }
  .notes-region-folder-note { cursor: pointer; }
  .notes-region-folder-note:active { cursor: pointer; }
  .notes-region-folder-note .notes-tree-copy b {
    color: rgba(238,238,240,.84);
    font-weight: 650;
  }
  .notes-tree-note:active { cursor: grabbing; }
  .notes-tree-note.dragging { opacity: .34; }
  .notes-tree-note.drop-target {
    background: var(--notes-accent-soft-themed, rgba(164,132,236,.14)) !important;
    box-shadow: inset 0 0 0 1px var(--notes-accent-themed, #b8a0f4);
  }
  .notes-tree-note.drop-blocked { cursor: not-allowed; }
  .notes-tree-copy {
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent !important;
    text-align: left;
  }
  .notes-tree-copy b {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .notes-tree-copy b {
    color: rgba(232,232,232,.72);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    transition: color 130ms ease;
  }
  .notes-tree-id { color: var(--notes-id-themed, #9f88d7); font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
  .notes-tree-empty { padding: 28px 14px; color: #8f8f8f; text-align: center; font-size: 12px; }

  #flowSourceView {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding: 6px 12px 18px;
  }

  .format-editor {
    overflow: hidden;
    border: 1px solid var(--doc-border-themed, #383838);
    border-radius: 12px;
    background: rgba(12,12,14,.34);
  }

  #flowSourceView #input {
    display: block;
    min-height: 52vh;
    margin: 0;
    padding: 13px 14px 18px;
    border: 0;
    border-radius: 0;
    background: rgba(8,8,10,.28) !important;
    box-shadow: none;
    resize: vertical;
    color: var(--doc-text-themed, #d7d7d7);
    font: 500 12px/1.58 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    caret-color: var(--flow-accent, #d0d0d0);
  }

  #flowSourceView #input:focus {
    border: 0;
    box-shadow: inset 3px 0 0 var(--flow-accent-outline, rgba(208,208,208,.32));
  }

  body.layout-panel-dragging {
    user-select: none !important;
    cursor: grabbing !important;
  }

  body.layout-divider-dragging {
    user-select: none !important;
    cursor: col-resize !important;
  }

  .layout-snap-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000005;
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 18px;
    pointer-events: none;
    background: rgba(8,8,10,.18);
  }

  body.layout-panel-dragging .layout-snap-overlay {
    display: grid;
  }

  .layout-snap-zone {
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    background: rgba(22,22,25,.32);
    color: rgba(255,255,255,.62);
    transition: background .1s ease, border-color .1s ease;
  }

  .layout-snap-zone.active {
    border-color: rgba(177,145,255,.78);
    background: rgba(111,78,178,.28);
    color: #eee7ff;
  }

  .layout-snap-preview {
    width: min(180px, 34vw);
    aspect-ratio: 16 / 10;
    display: grid;
    grid-template-columns: 44% 56%;
    overflow: hidden;
    border: 1px solid currentColor;
    border-radius: 12px;
    opacity: .9;
  }

  .layout-snap-zone[data-side="right"] .layout-snap-preview {
    grid-template-columns: 56% 44%;
  }

  .layout-snap-preview::before,
  .layout-snap-preview::after {
    content: "";
    display: block;
  }

  .layout-snap-preview::before {
    background: rgba(255,255,255,.04);
  }

  .layout-snap-preview::after {
    background: rgba(177,145,255,.26);
    border-left: 1px solid currentColor;
  }

  .layout-snap-zone[data-side="left"] .layout-snap-preview::before {
    order: 2;
  }

  .layout-snap-zone[data-side="left"] .layout-snap-preview::after {
    order: 1;
    border-left: 0;
    border-right: 1px solid currentColor;
  }

  .layout-resize-divider {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: 1000001;
    display: none;
    width: 14px;
    margin-left: 0;
    cursor: col-resize;
    touch-action: none;
  }

  /* Keep the resize hit area on the graph side of the boundary. This leaves
     the panel-side scrollbar fully clickable instead of covering half of it. */
  .layout-resize-divider[data-panel-side="right"] {
    margin-left: -14px;
  }

  .layout-resize-divider::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    transform: translateX(-50%);
    background: rgba(255,255,255,.10);
    transition: background .1s ease, width .1s ease;
  }

  .layout-resize-divider[data-panel-side="right"]::after {
    left: auto;
    right: 0;
    transform: translateX(50%);
  }

  .layout-resize-divider:hover::after {
    width: 3px;
    background: var(--flow-accent-2, #999);
  }

  .layout-resize-bubble {
    position: absolute;
    top: 50%;
    left: 50%;
    display: none;
    transform: translate(-50%, -50%);
    padding: 5px 8px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 8px;
    background: #202024;
    color: #eee;
    font: 700 10px/1 var(--app-font);
    white-space: nowrap;
  }

  body.layout-divider-dragging .layout-resize-bubble {
    display: block;
  }

  @media (max-width: 700px) {
    body.va-layout .left-panel,
    body.va-layout.graph-full-mode .left-panel {
      width: 100vw !important;
    }
    .layout-resize-divider {
      display: none !important;
    }
  }

  /* Keep the input drawer glassy, but more opaque than the document panel. */
  body.va-layout .left-panel,
  body.va-layout.graph-full-mode .left-panel {
    background: rgba(31, 31, 31, 0.34) !important;
    backdrop-filter: blur(3px) saturate(.98) !important;
    -webkit-backdrop-filter: blur(3px) saturate(.98) !important;
  }

  /* A note opened from the Input uses a fully solid workspace on both sides. */
  body.va-layout.notes-drawer-open.note-document-opaque .left-panel,
  body.va-layout.notes-drawer-open.note-document-opaque.graph-full-mode .left-panel {
    background: var(--doc-panel-bg-themed, #202020) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Compact glass settings, matching the clean input Format workspace. */
  body > #settingsPanel,
  body > #graphSettingsPanel {
    width: min(326px, calc(100vw - 24px));
    padding: 10px;
    overflow-x: hidden;
    background: rgba(24, 24, 27, 0.76) !important;
    border: 1px solid var(--doc-border-themed, rgba(255,255,255,.11)) !important;
    border-radius: 12px !important;
    box-shadow: 0 18px 46px rgba(0,0,0,.30) !important;
    backdrop-filter: blur(14px) saturate(1.05) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.05) !important;
    display: block !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px) scale(.985);
    transform-origin: top right;
    transition:
      opacity 170ms ease,
      transform 190ms cubic-bezier(.22,1,.36,1),
      visibility 170ms ease;
    will-change: opacity, transform;
  }

  body.show-settings > #settingsPanel,
  body.show-graph-settings > #graphSettingsPanel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }

  /* Swipe-to-close for Settings and Graph Settings.
     The gesture can begin only inside the visible panel itself. */
  body.settings-swipe-active > #settingsPanel.settings-swipe-panel,
  body.settings-swipe-active > #graphSettingsPanel.settings-swipe-panel {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(var(--settings-swipe-x, 0px), 0, 0) scale(1) !important;
    transition: none !important;
    will-change: transform;
  }

  body.settings-swipe-active.settings-swipe-animating > #settingsPanel.settings-swipe-panel,
  body.settings-swipe-active.settings-swipe-animating > #graphSettingsPanel.settings-swipe-panel {
    transition: transform 180ms cubic-bezier(.2,.8,.2,1) !important;
  }

  /* Keep a panel fully hidden for the single frame where the completed swipe
     is committed back to its normal CSS state. Without this hand-off guard,
     removing the swipe transform briefly puts the panel back on-screen before
     its regular opacity/visibility rules finish closing it. */
  body > #settingsPanel.settings-swipe-close-hidden,
  body > #graphSettingsPanel.settings-swipe-close-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: none !important;
  }

  body > #settingsPanel > .control-title,
  body > #graphSettingsPanel > .control-title,
  body > #settingsPanel .settings-heading,
  body > #graphSettingsPanel .settings-heading {
    touch-action: pan-y;
  }

  /* Keep force sliders under pointer control even when the cursor leaves the track. */
  body > #settingsPanel input[type="range"],
  body > #graphSettingsPanel input[type="range"] {
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    cursor: pointer;
  }

  body > #settingsPanel > .control-title,
  body > #graphSettingsPanel > .control-title {
    display: block !important;
    margin: 1px 4px 7px;
    color: rgba(242,242,244,.92);
    font-size: 12px;
    font-weight: 850;
  }

  body > #settingsPanel .settings-section,
  body > #graphSettingsPanel .settings-section {
    border-top-color: rgba(255,255,255,.075);
  }

  body > #settingsPanel .settings-heading,
  body > #graphSettingsPanel .settings-heading {
    min-height: 38px;
    padding: 9px 4px;
    color: rgba(235,235,238,.88);
    font-size: 12px;
    font-weight: 800;
  }

  body > #settingsPanel .settings-heading::before,
  body > #graphSettingsPanel .settings-heading::before {
    margin-right: 7px;
    color: rgba(230,230,235,.42);
    font-size: 18px;
  }

  body > #settingsPanel .settings-content,
  body > #graphSettingsPanel .settings-content {
    padding: 0;
  }

  body > #settingsPanel .settings-content-inner,
  body > #graphSettingsPanel .settings-content-inner {
    padding-right: 4px;
    padding-left: 4px;
  }

  body > #settingsPanel .settings-section.open .settings-content-inner,
  body > #graphSettingsPanel .settings-section.open .settings-content-inner {
    padding-bottom: 11px;
  }

  body > #settingsPanel .active-project-mini {
    margin: 0 0 8px;
    padding: 7px 9px;
    border: 1px solid rgba(255,255,255,.065);
    border-radius: 8px;
    background: rgba(8,8,10,.18);
    color: rgba(225,225,230,.58);
    font-size: 10px;
  }

  body > #settingsPanel .settings-project-actions {
    gap: 6px;
  }

  body > #settingsPanel .settings-project-actions button,
  body > #graphSettingsPanel > button {
    min-height: 32px;
    padding: 6px 9px;
    border-color: rgba(255,255,255,.075) !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,.045) !important;
    color: rgba(240,240,242,.88);
    font-size: 11px;
    font-weight: 780;
    box-shadow: none !important;
  }

  body > #settingsPanel .settings-project-actions button:hover,
  body > #graphSettingsPanel > button:hover {
    background: rgba(255,255,255,.085) !important;
  }

  body > #settingsPanel .settings-project-actions .danger {
    background: rgba(92,48,51,.25) !important;
    color: rgba(244,210,212,.86);
  }

  body > #settingsPanel .sound-toggle-row {
    margin-top: 8px;
  }

  /* Smooth handoff from the Projects screen into the selected graph. */
  body.project-opening .project-home {
    opacity: 1 !important;
    transform: scale(1);
    transform-origin: center;
    pointer-events: none !important;
    transition:
      opacity 270ms ease,
      transform 320ms cubic-bezier(.22,1,.36,1) !important;
    will-change: opacity, transform;
  }

  body.project-home-open.project-home-projects.project-opening .app {
    opacity: 1 !important;
    visibility: visible !important;
    filter: blur(4px) brightness(.82) saturate(.96) !important;
    transform: scale(1.018) !important;
    pointer-events: none !important;
    transition:
      filter 300ms ease,
      transform 340ms cubic-bezier(.22,1,.36,1) !important;
    will-change: filter, transform;
  }

  body.project-opening .topbar {
    display: flex !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 210ms ease !important;
  }

  body.project-opening.project-opening-reveal .project-home {
    opacity: 0 !important;
    transform: scale(1.012);
  }

  body.project-home-open.project-home-projects.project-opening.project-opening-reveal .app {
    filter: none !important;
    transform: scale(1) !important;
  }

  body.project-opening.project-opening-reveal .topbar {
    opacity: 1 !important;
  }

  @media (prefers-reduced-motion: reduce) {
    body.project-opening .project-home,
    body.project-home-open.project-home-projects.project-opening .app,
    body.project-opening .topbar {
      transition-duration: 1ms !important;
    }
  }

  /* Document options fix: visible horizontal dots, reliable clicks, and menu always above note text. */
  .doc-panel .doc-header {
    position: relative !important;
    z-index: 10000 !important;
    overflow: visible !important;
    isolation: isolate;
  }
  .doc-panel .doc-body {
    position: relative !important;
    z-index: 1 !important;
  }
  .doc-panel .md-smart-add {
    z-index: 10002 !important;
    pointer-events: auto !important;
    cursor: pointer;
  }
  .md-smart-add-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 18px;
    height: 8px;
    pointer-events: none;
  }
  .md-smart-add-dots > span {
    display: block;
    width: 3px;
    height: 3px;
    flex: 0 0 3px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: none;
  }
  .doc-panel .md-smart-add-menu {
    z-index: 10003 !important;
    pointer-events: auto !important;
  }

    /* notes opened from the Input stay opaque, but use the same active theme as Graph View documents. */
    body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .doc-panel,
    body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .doc-panel.doc-glass {
      background: var(--doc-panel-bg-themed, #202020) !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }
    body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .doc-panel .doc-glass-bg,
    body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .doc-panel.doc-glass .doc-glass-bg {
      display: none !important;
      opacity: 0 !important;
    }
    body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .doc-panel.doc-glass .doc-header {
      background: var(--doc-header-bg-themed, #1f1f1f) !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      border-bottom-color: var(--doc-border-themed, var(--border)) !important;
    }
    body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .doc-panel.doc-glass .doc-body {
      background: var(--doc-panel-bg-themed, #202020) !important;
    }

    /* hard-stop transparency for documents opened from the Notes/Input panel. */
    body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .doc-panel,
    body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .doc-panel.doc-glass {
      background-color: var(--panel, #202020) !important;
      background-image: var(--doc-panel-bg-themed, none) !important;
      opacity: 1 !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }
    body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .doc-panel::before,
    body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .doc-panel::after,
    body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .doc-glass-bg {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
    }
    body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .doc-header {
      background: var(--doc-header-bg-themed, #1f1f1f) !important;
      opacity: 1 !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }
    body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .doc-body,
    body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .doc-card,
    body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque #markdownDocShell,
    body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .markdown-editor-box,
    body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .EasyMDEContainer,
    body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .CodeMirror {
      background: transparent !important;
      opacity: 1 !important;
    }

  /* Home is a clean full-graph presentation: no leftover panels, menus, or divider line. */
  body.project-home-open .layout-resize-divider,
body.project-home-open .layout-resize-bubble,
body.project-home-open > #settingsPanel,
body.project-home-open > #graphSettingsPanel,
body.project-home-open > #nodeStylePanel,
body.project-home-open > .notes-context-menu,
body.project-home-open > .md-smart-add-menu {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* local graph, zoom reset, accurate wallpaper previews, and merged node controls. */
  #zoomChip {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    min-width: 58px;
    text-align: center;
  }
  #zoomChip:hover { background: color-mix(in srgb, var(--flow-accent-2, #8fa7bd) 12%, rgba(31,31,31,.92)); }
  body.note-document-opaque #zoomChip {
    position: relative;
    color: transparent !important;
    background: color-mix(in srgb, #9b3f47 60%, var(--panel, #202020)) !important;
    border-color: color-mix(in srgb, #ef8b93 52%, var(--border, #444)) !important;
  }
  body.note-document-opaque #zoomChip::after {
    content: 'Exit';
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #ffd9dc;
    font-weight: 900;
  }

  #nodeStyleBtn,
  .legacy-node-style-panel { display: none !important; }

  .node-document-options-menu {
    width: 232px !important;
    min-width: 232px !important;
    max-height: min(620px, calc(100vh - 92px));
    overflow: auto;
  }
  .node-document-options-menu .doc-menu-node-style[hidden] { display: none !important; }

  .node-menu-control-row,
  .node-menu-size-control {
    display: grid;
    gap: 8px;
    margin: 8px 6px;
    color: #d7d7d7;
    font-size: 12px;
    font-weight: 800;
  }
  .node-menu-control-row { grid-template-columns: 1fr 46px; align-items: center; }
  .node-menu-control-row input[type="color"] { width: 44px; height: 30px; padding: 2px; border-radius: 8px; }
  .node-menu-size-control > span { display: flex; justify-content: space-between; align-items: center; }
  .node-menu-size-control em { color: #aaa; font-style: normal; }
  .node-menu-size-control input[type="range"] { width: 100%; }
  .node-document-options-menu .node-menu-reset {
    width: calc(100% - 6px) !important;
    margin: 3px !important;
    display: flex !important;
    justify-content: flex-start !important;
  }

  /* Notes panel interaction:
     - no permanent black boxes
     - a soft rounded box appears only while hovering
     - the document that is currently open keeps its own slightly stronger grey box */
  #notesCommandbar .notes-command {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
    transition:
      background-color 140ms ease,
      color 140ms ease,
      transform 140ms ease !important;
  }

  #notesCommandbar .notes-command:hover,
  #notesCommandbar .notes-command:focus-visible {
    background: rgba(255,255,255,.065) !important;
    border-color: transparent !important;
  }

  #notesCommandbar .notes-command.active {
    background: rgba(255,255,255,.095) !important;
    border-color: transparent !important;
  }

  #notesTree .notes-tree-note {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    border-radius: 0 !important;
    transition:
      background-color 145ms ease,
      box-shadow 145ms ease,
      opacity 130ms ease !important;
  }

  #notesTree .notes-tree-note:hover {
    background: transparent !important;
  }

  #notesTree .notes-tree-note.active-document {
    background: transparent !important;
  }

  #notesTree .notes-tree-note.active-document:hover {
    background: transparent !important;
  }

  #notesTree .notes-tree-row:hover {
    background: transparent !important;
  }

  #notesTree .notes-tree-row:hover::before {
    background: rgba(255,255,255,.060);
  }

  #notesTree .notes-tree-row:has(.notes-tree-note.active-document)::before {
    background: rgba(255,255,255,.105);
  }

  #notesTree .notes-tree-row:has(.notes-tree-note.active-document):hover::before {
    background: rgba(255,255,255,.135);
  }

  #notesTree .notes-tree-row:hover .notes-tree-copy b,
  #notesTree .notes-tree-row:has(.notes-tree-note.active-document) .notes-tree-copy b {
    color: #f2f2f2 !important;
  }

  #notesTree .notes-tree-row:hover .notes-folder-toggle,
  #notesTree .notes-tree-row:has(.notes-tree-note.active-document) .notes-folder-toggle {
    color: rgba(242,242,242,.72) !important;
  }

  #notesTree .notes-tree-copy,
  #notesTree .notes-tree-copy:hover,
  #notesTree .notes-tree-copy:focus,
  #notesTree .notes-tree-copy:focus-visible,
  #notesTree .notes-tree-copy:active {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
  }

  /* Preserve the useful branch-drop indicator only while reorganizing notes. */
  #notesTree .notes-tree-note.drop-target {
    background: var(--notes-accent-soft-themed, rgba(164,132,236,.14)) !important;
    box-shadow: inset 0 0 0 1px var(--notes-accent-themed, #b8a0f4) !important;
  }

  /* Clarieus-style note browser: clean system text and no compositor-backed
     rectangles over the 3D canvas. */
  .left-panel,
  .left-panel button,
  .left-panel input,
  .left-panel textarea,
  #notesTree,
  #notesTree button {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif !important;
  }

  #notesTree .notes-tree-row,
  #notesTree .notes-folder-toggle {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    filter: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body:not(.show-flow-numbers) #docId {
    display: none !important;
  }

  /* One solid colour ONLY in the exact Input/Notes + Document split.
     Every other Input or Document format keeps its original wallpaper, gradient,
     glass, transparency, and graph-backed appearance. */
  :root {
    --input-document-split-solid: #202020;
  }

  body[data-wallpaper="graphite"] {
    --input-document-split-solid: #202020;
  }
  body[data-wallpaper="nebula"] {
    --input-document-split-solid: #1e1c24;
  }
  body[data-wallpaper="forest"] {
    --input-document-split-solid: #1b211e;
  }
  body[data-wallpaper="sunset"] {
    --input-document-split-solid: #211d1f;
  }
  body[data-wallpaper="midnight-grid"],
  body[data-wallpaper="blueprint"] {
    --input-document-split-solid: #1b1e27;
  }
  body[data-wallpaper="aurora"] {
    --input-document-split-solid: #192124;
  }
  body[data-wallpaper="velvet"] {
    --input-document-split-solid: #211b24;
  }
  body[data-wallpaper="paper"] {
    --input-document-split-solid: #22211f;
  }
  body[data-wallpaper="cyber-grid"] {
    --input-document-split-solid: #151b1e;
  }
  body[data-wallpaper="ocean"] {
    --input-document-split-solid: #182129;
  }
  body[data-wallpaper="royal"] {
    --input-document-split-solid: #1b1824;
  }

  body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .left-panel,
  body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .doc-panel,
  body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .doc-panel.doc-glass,
  body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .doc-header,
  body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .doc-body,
  body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .doc-card,
  body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque #markdownDocShell,
  body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .markdown-editor-box,
  body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .EasyMDEContainer,
  body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .CodeMirror,
  body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .CodeMirror-scroll {
    background: var(--input-document-split-solid) !important;
    background-color: var(--input-document-split-solid) !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .left-panel::before,
body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .left-panel::after,
body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .doc-panel::before,
body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .doc-panel::after,
body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .doc-glass-bg,
body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .doc-panel.doc-glass .doc-glass-bg {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: none !important;
  }

  /* The red Input Exit button must always remain above the split panels. */
  body.note-document-opaque #zoomChip {
    position: relative !important;
    z-index: 1000300 !important;
    pointer-events: auto !important;
    touch-action: manipulation;
  }

  body.note-document-opaque .topbar,
  body.note-document-opaque .topbar-right {
    z-index: 1000299 !important;
    pointer-events: none;
  }

  body.note-document-opaque #zoomChip {
    pointer-events: auto !important;
  }

  /* ==========================================================
     REGULAR INPUT:
     The normal Document already has the glass look we want.
     Make the Input use that SAME .08 panel opacity instead of its darker .34
     override, and reveal the same live wallpaper/graph underneath. */
  body.va-layout:not(.note-document-opaque) .left-panel,
  body.va-layout.graph-full-mode:not(.note-document-opaque) .left-panel {
    background: rgba(31,31,31,.08) !important;
    background-color: rgba(31,31,31,.08) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
  }

  /* WALLPAPER-ONLY CANVAS FOR THE SPLIT.
     It lives in the graph wrapper, exactly where the normal graph wallpaper is,
     but contains only the wallpaper — never nodes, links, labels, or workshop UI. */
  #splitBlankWallpaperCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: none;
    pointer-events: none;
    background: #202020;
    opacity: 0;
    z-index: 3;
    will-change: opacity;
  }

  body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque #splitBlankWallpaperCanvas {
    display: block;
  }

  /* Start with the real graph visible through the transparent panels. */
  body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque.note-document-background-intro #splitBlankWallpaperCanvas {
    opacity: 0;
    transition: none;
  }

  /* Then softly cover the graph with the exact same wallpaper, making the
     nodes/links disappear without a cut. */
  body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque.note-document-background-fading #splitBlankWallpaperCanvas {
    opacity: 1;
    transition: opacity 920ms cubic-bezier(.22,.61,.36,1);
  }

  body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque.note-document-background-settled #splitBlankWallpaperCanvas {
    opacity: 1;
    transition: none;
  }

  /* Keep the live graph visible underneath during the fade. The fully opaque
     wallpaper-only canvas naturally hides it once the transition finishes. */
  body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque #graphCanvas {
    opacity: 1 !important;
    visibility: visible !important;
  }

  body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque #graphTransitionCanvas {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  /* SPLIT INPUT + DOCUMENT:
     Same panel transparency on BOTH sides. No opaque workspace. */
  body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .left-panel,
  body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .doc-panel,
  body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .doc-panel.doc-glass {
    background: rgba(31,31,31,.08) !important;
    background-color: rgba(31,31,31,.08) !important;
    background-image: none !important;
    opacity: 1 !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
  }

  body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .doc-glass-bg,
body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .doc-panel.doc-glass .doc-glass-bg {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  /* Keep the normal Document's own header/body glass treatment.
     The main panel transparency is identical to Input; the header still has its
     normal subtle header layer exactly like a regular node-open Document. */
  body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .doc-header,
  body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .doc-panel.doc-glass .doc-header {
    background: rgba(31,31,31,.12) !important;
    background-color: rgba(31,31,31,.12) !important;
    background-image: none !important;
    opacity: 1 !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
  }

  body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .doc-body,
  body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .doc-panel.doc-glass .doc-body {
    background: rgba(32,32,32,.03) !important;
    background-color: rgba(32,32,32,.03) !important;
    background-image: none !important;
  }

  body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .doc-card,
  body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque #markdownDocShell,
  body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .markdown-editor-shell,
  body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .markdown-editor-box,
  body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .EasyMDEContainer,
  body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .CodeMirror,
  body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .CodeMirror-scroll {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
  }

  /* DOCUMENT ENTRY FROM THE OPPOSITE SIDE OF INPUT.
     Input left  -> Document starts beyond the right edge.
     Input right -> Document starts beyond the left edge. */
  body.note-document-enter-start:not(.notes-dock-right) .doc-panel {
    transform: translate3d(104%,0,0) !important;
    transition: none !important;
    will-change: transform;
  }

  body.note-document-enter-start.notes-dock-right .doc-panel {
    transform: translate3d(-104%,0,0) !important;
    transition: none !important;
    will-change: transform;
  }

  body.note-document-enter-start .doc-panel,
  body.note-document-entering .doc-panel {
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    contain: paint !important;
    isolation: isolate !important;
    pointer-events: none !important;
  }

  body.note-document-entering .doc-panel {
    transform: translate3d(0,0,0) !important;
    transition: transform 680ms cubic-bezier(.2,.72,.2,1) !important;
    will-change: transform;
  }

  /* Split workspace: optional draggable local-branch preview. It is completely
     dormant outside the split Input + Document layout. */
  .split-mini-graph-menu-action { display: none !important; }
  body.notes-drawer-open.has-selected-node .split-mini-graph-menu-action { display: grid !important; }
  .split-mini-graph-popup {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 240000;
    width: min(400px, calc(100vw - 28px));
    height: min(310px, calc(100vh - 28px));
    display: block;
    overflow: hidden;
    border: 1px solid var(--doc-border-themed, rgba(255,255,255,.16));
    border-radius: var(--panel-radius-themed, 16px);
    background: transparent;
    box-shadow: 0 18px 50px rgba(0,0,0,.28);
    backdrop-filter: blur(5px) saturate(1.02);
    -webkit-backdrop-filter: blur(5px) saturate(1.02);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(.97);
    transform-origin: center center;
    transition: opacity 150ms ease, transform 180ms cubic-bezier(.22,1,.36,1), visibility 150ms ease;
    isolation: isolate;
  }
  body.split-mini-graph-open .split-mini-graph-popup {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1);
  }
  .split-mini-graph-close {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    z-index: 3 !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 10px !important;
    background: rgba(18,18,20,.36) !important;
    color: rgba(245,245,245,.78) !important;
    font-size: 19px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
  }
  .split-mini-graph-close:hover {
    color: #fff !important;
    border-color: var(--flow-accent-outline, rgba(185,156,255,.40)) !important;
    background: var(--flow-accent-softer, rgba(185,156,255,.09)) !important;
  }
  .split-mini-graph-stage {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: transparent;
  }
  .split-mini-graph-canvas {
    width: 100%;
    height: 100%;
    display: block;
    cursor: grab;
    touch-action: none;
    opacity: 0;
    position: relative;
    z-index: 2;
  }
  .split-mini-graph-canvas.dragging { cursor: grabbing; }
  .split-mini-graph-vector {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    shape-rendering: geometricPrecision;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
  }

  /* Final workspace geometry: every Notes row is exactly 34px, producing one
     identical 2px space between every adjacent highlight. */
  #notesTree .notes-tree-row {
    box-sizing: border-box !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
  }

  #notesTree .notes-folder-toggle,
  #notesTree .notes-tree-note {
    box-sizing: border-box !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
  }

  /* The panel border supplies the idle boundary. Keep the wide invisible drag
     target, but draw only one thin themed line on hover/drag. */
  .layout-resize-divider::after {
    width: 0 !important;
    background: transparent !important;
  }

  .layout-resize-divider:hover::after,
  body.layout-divider-dragging .layout-resize-divider::after {
    width: 1px !important;
    background: var(--flow-accent-2, #999) !important;
  }

  /* Remove the visible Document top bar in every layout while leaving its
     original blank footprint, so the document title/content does not move. */
  .doc-panel .doc-header,
  .doc-panel.doc-glass .doc-header,
  body.graph-3d-mode .doc-panel .doc-header,
  body[data-graph-mode="3d"] .doc-panel .doc-header {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .doc-panel .doc-header > * {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Keep the intentionally hidden Document top-bar copy, but restore the
     three-dot options control and its dropdown above that blanket rule. */
  .doc-panel .doc-header > #mdSmartAddBtn {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    display: inline-flex !important;
  }

  .doc-panel .doc-header > #mdSmartAddMenu {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* remove the permanent blank top "bar" while preserving the
     document's initial text position. The old header footprint becomes scrollable
     top space instead of a fixed visual strip. */
  .doc-panel {
    --flow-document-header-space: 67px;
  }

  .doc-panel .doc-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: var(--flow-document-header-space) !important;
    min-height: var(--flow-document-header-space) !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none;
  }

  .doc-panel .doc-header > #mdSmartAddBtn,
  .doc-panel .doc-header > #mdSmartAddMenu {
    pointer-events: auto !important;
  }

  .doc-panel .doc-body {
    flex: 1 1 100% !important;
    height: 100% !important;
    padding-top: var(--flow-document-header-space) !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
  }

  /* The free image layer was being clipped by CodeMirror's own hidden overflow,
     which looked like black bars on the sides/bottom. Let the image layer paint
     naturally; the Document panel itself still contains the page. */
  .doc-panel .markdown-editor-box .CodeMirror,
  .doc-panel .markdown-editor-box .CodeMirror-scroll,
  .doc-panel .markdown-editor-box .CodeMirror-sizer,
  .doc-panel .markdown-editor-box .CodeMirror-lines,
  .doc-panel .markdown-editor-box .CodeMirror-code {
    overflow: visible !important;
  }

  .doc-panel .doc-card,
  .doc-panel .markdown-editor-shell,
  .doc-panel .markdown-editor-box,
  .doc-panel .EasyMDEContainer,
  .doc-panel .CodeMirror,
  .doc-panel .CodeMirror-scroll {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  /* the right/bottom "black bars" were the Document's
     scroll/clipping surfaces. Keep scrolling functional, but hide the visual
     scrollbar chrome and let free image widgets paint past the editor shell. */
  .doc-panel .doc-body {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .doc-panel .doc-body::-webkit-scrollbar,
  .doc-panel .doc-body::-webkit-scrollbar-track,
  .doc-panel .doc-body::-webkit-scrollbar-track-piece,
  .doc-panel .doc-body::-webkit-scrollbar-thumb,
  .doc-panel .doc-body::-webkit-scrollbar-corner,
  .doc-panel .doc-body::-webkit-scrollbar-button {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
    background: transparent !important;
    border: 0 !important;
  }

  /* Remove the remaining internal clipping rectangles that could cut off a
     selected free image at the right or bottom edge of the Markdown surface.
     This does not move the title/text or change their widths/padding. */
  .doc-panel #docEditor.doc-card,
  .doc-panel #markdownDocShell,
  .doc-panel #markdownDocShell .markdown-editor-box,
  .doc-panel #markdownDocShell .EasyMDEContainer,
  .doc-panel #markdownDocShell .CodeMirror,
  .doc-panel #markdownDocShell .CodeMirror-scroll,
  .doc-panel #markdownDocShell .CodeMirror-sizer,
  .doc-panel #markdownDocShell .CodeMirror-lines,
  .doc-panel #markdownDocShell .CodeMirror-code {
    overflow: visible !important;
  }

  .doc-panel #docEditor.doc-card,
  .doc-panel #markdownDocShell {
    contain: none !important;
  }

  /* Do not render any internal CodeMirror horizontal/vertical scrollbar layer. */
  .doc-panel .CodeMirror-vscrollbar,
  .doc-panel .CodeMirror-hscrollbar,
  .doc-panel .CodeMirror-scrollbar-filler,
  .doc-panel .CodeMirror-gutter-filler {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
  }

  /* one exact Notes-row geometry in every branch depth. */
  #notesTree .notes-tree-row {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
    overflow: hidden !important;
  }

  #notesTree .notes-tree-row::before {
    top: 1px !important;
    right: 2px !important;
    bottom: 1px !important;
    left: 2px !important;
    height: 32px !important;
    box-sizing: border-box !important;
  }

  #notesTree .notes-folder-toggle,
  #notesTree .notes-tree-note {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  /* A heavier Clarieus-style folder disclosure mark, while retaining the
     existing transparent click target and rotation. */
  #notesTree .notes-folder-toggle svg {
    width: 15px !important;
    height: 15px !important;
  }

  #notesTree .notes-folder-toggle svg path {
    stroke-width: 3.25 !important;
  }

  /* The split layout had a stronger selector repainting the header after the
     general rule above. Make header and body use the same uninterrupted panel
     surface and remove the separator itself, not merely its colour. */
  body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .doc-panel .doc-header,
  body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .doc-panel.doc-glass .doc-header,
  body.graph-3d-mode.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .doc-panel .doc-header,
  body[data-graph-mode="3d"].va-layout.notes-drawer-open.has-selected-node.note-document-opaque .doc-panel .doc-header {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .doc-panel .doc-body,
  body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .doc-panel.doc-glass .doc-body,
  body.graph-3d-mode.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .doc-panel .doc-body,
  body[data-graph-mode="3d"].va-layout.notes-drawer-open.has-selected-node.note-document-opaque .doc-panel .doc-body {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
  }

  /* keep the entire document on one continuous panel surface.
     The body previously painted a faint second layer beneath the transparent
     header, which made the preserved top-bar footprint look like a darker
     strip. This deliberately leaves the document panel outline untouched. */
  body .doc-panel .doc-body,
  body .doc-panel.doc-glass .doc-body,
  body.graph-3d-mode .doc-panel .doc-body,
  body[data-graph-mode="3d"] .doc-panel .doc-body,
  body.graph-3d-mode .doc-panel.doc-glass .doc-body,
  body[data-graph-mode="3d"] .doc-panel.doc-glass .doc-body,
  body.graph-3d-mode.has-selected-node.layout-doc-right .doc-panel .doc-body,
  body.graph-3d-mode.has-selected-node.layout-doc-left .doc-panel .doc-body,
  body.graph-3d-mode.has-selected-node.layout-default .doc-panel .doc-body,
  body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .doc-panel .doc-body,
  body.va-layout.notes-drawer-open.has-selected-node.note-document-opaque .doc-panel.doc-glass .doc-body {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
  }

  @media (max-width: 700px) {
    .split-mini-graph-popup {
      width: min(320px, calc(100vw - 18px));
      height: min(260px, calc(100vh - 18px));
    }
  }

  /* ============================================================
     ACTUAL side/bottom image-clipping fix.

     The previous attempts removed scrollbar chrome and CodeMirror overflow,
     but older "stability" rules still applied `contain: layout paint` to
     .doc-panel / .doc-body. Paint containment clips descendants regardless of
     a child's huge z-index or overflow:visible, which is why the image could
     still look like a dark side/bottom bar was sitting over it.

     Remove those paint-containment boundaries and all visual panel edge lines.
     Do NOT change document/card padding, title position, text width, or image
     saved x/y/width/height values.
  */
  .doc-panel,
  .doc-panel .doc-body,
  .doc-panel #docEditor.doc-card,
  .doc-panel #markdownDocShell,
  .doc-panel #markdownDocShell .markdown-editor-box,
  .doc-panel #markdownDocShell .EasyMDEContainer,
  .doc-panel #markdownDocShell .CodeMirror,
  .doc-panel #markdownDocShell .CodeMirror-scroll,
  .doc-panel #markdownDocShell .CodeMirror-sizer,
  .doc-panel #markdownDocShell .CodeMirror-lines,
  .doc-panel #markdownDocShell .CodeMirror-code {
    contain: none !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    mask: none !important;
    -webkit-mask: none !important;
  }

  /* The Document panel itself must not act as a paint clipping box. */
  .doc-panel {
    overflow: visible !important;
    border: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }

  /* The body remains the ONLY scrolling surface, but no paint-containment
     boundary is allowed to cover the free image layer. */
  .doc-panel .doc-body {
    contain: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }

  /* Kill every stronger layout-specific divider selector that can repaint a
     vertical edge after the generic .doc-panel rule. */
  body.va-layout.has-selected-node.layout-doc-left .doc-panel,
  body.va-layout.has-selected-node.layout-doc-right .doc-panel,
  body.graph-3d-mode.has-selected-node.layout-doc-left .doc-panel,
  body.graph-3d-mode.has-selected-node.layout-doc-right .doc-panel,
  body.graph-3d-mode.has-selected-node.layout-default .doc-panel,
  body[data-graph-mode="3d"].has-selected-node.layout-doc-left .doc-panel,
  body[data-graph-mode="3d"].has-selected-node.layout-doc-right .doc-panel,
  body[data-graph-mode="3d"].has-selected-node.layout-default .doc-panel,
  body.layout-doc-full .doc-panel {
    border: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }

  /* No CodeMirror wrapper may re-introduce a dark side/bottom clipping box. */
  .doc-panel #markdownDocShell,
  .doc-panel #markdownDocShell .markdown-editor-box,
  .doc-panel #markdownDocShell .EasyMDEContainer,
  .doc-panel #markdownDocShell .CodeMirror,
  .doc-panel #markdownDocShell .CodeMirror-scroll,
  .doc-panel #markdownDocShell .CodeMirror-sizer,
  .doc-panel #markdownDocShell .CodeMirror-lines,
  .doc-panel #markdownDocShell .CodeMirror-code {
    overflow: visible !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }

  /* Keep the actual image widget above the editor surface and remove any
     backing rectangle. Selection handles/outline remain functional. */
  .doc-panel .cm-md-rendered-image-wrap {
    z-index: 2147483000 !important;
    overflow: visible !important;
    background: transparent !important;
  }
  .doc-panel .cm-md-rendered-image-wrap::before,
  .doc-panel .cm-md-rendered-image-wrap::after {
    display: none !important;
    content: none !important;
    background: transparent !important;
  }

  /* ============================================================
     Restore the visual Document surface WITHOUT restoring clipping.

     Important:
     - contain:none stays in force from the panel itself stays overflow:visible, so free images are not cropped
     - only visual shade/outline/scrollbar chrome comes back
  */

  /* Dark translucent Document shade. This is visual only and does not clip. */
  .doc-panel,
  .doc-panel.doc-glass,
  body.va-layout.has-selected-node .doc-panel,
  body.va-layout.has-selected-node .doc-panel.doc-glass,
  body.graph-3d-mode.has-selected-node .doc-panel,
  body[data-graph-mode="3d"].has-selected-node .doc-panel {
    background: rgba(31,31,31,.88) !important;
    background-color: rgba(31,31,31,.88) !important;
    background-image: none !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    overflow: visible !important;
    contain: none !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow:
      inset 0 0 0 1px var(--doc-border-themed, #383838),
      var(--workspace-shadow-themed, 0 20px 55px rgba(0,0,0,.28)) !important;
  }

  /* Keep the document's interior one continuous surface. */
  .doc-panel .doc-body {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    contain: none !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }

  /* exact original scrollbar look.
     Only the bottom/horizontal black bar stays removed. */
  .doc-panel .doc-body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin !important;
    scrollbar-color:
      color-mix(in srgb, var(--flow-accent-2, #777) 18%, transparent)
      transparent !important;
  }

  .doc-panel .doc-body::-webkit-scrollbar {
    display: block !important;
    width: 14px !important;
    height: 0 !important;
    background: transparent !important;
  }

  .doc-panel .doc-body::-webkit-scrollbar-track,
  .doc-panel .doc-body::-webkit-scrollbar-track-piece,
  .doc-panel .doc-body::-webkit-scrollbar-corner {
    display: block !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .doc-panel .doc-body::-webkit-scrollbar-thumb {
    display: block !important;
    min-height: 32px !important;
    background-color:
      color-mix(in srgb, var(--flow-accent-2, #777) 16%, transparent) !important;
    background-clip: padding-box !important;
    border: 4px solid transparent !important;
    border-radius: 999px !important;
    box-shadow: none !important;
  }

  .doc-panel .doc-body::-webkit-scrollbar-thumb:hover,
  .doc-panel .doc-body::-webkit-scrollbar-thumb:active {
    background-color: var(--flow-accent, #999) !important;
    background-clip: padding-box !important;
  }

  .doc-panel .doc-body::-webkit-scrollbar-button,
  .doc-panel .doc-body::-webkit-scrollbar-button:single-button,
  .doc-panel .doc-body::-webkit-scrollbar-button:vertical:start:decrement,
  .doc-panel .doc-body::-webkit-scrollbar-button:vertical:end:increment {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
  }

  /* reliable Document options hit target. */
  .doc-panel .doc-header > #mdSmartAddBtn {
    right: 20px !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    z-index: 2147483001 !important;
    isolation: isolate;
  }
  .doc-panel .doc-header > #mdSmartAddBtn::before {
    content: "" !important;
    position: absolute !important;
    inset: -6px !important;
    display: block !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 14px !important;
    pointer-events: auto !important;
  }
  .doc-panel .doc-header > #mdSmartAddBtn .md-smart-add-dots {
    position: relative;
    z-index: 1;
    pointer-events: none !important;
  }

  /* Settings and Graph Settings now share the same neutral panel surface. */
  body > #settingsPanel,
  body > #graphSettingsPanel {
    background: rgba(31,31,31,.88) !important;
    background-color: rgba(31,31,31,.88) !important;
    background-image: none !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow:
      inset 0 0 0 1px var(--doc-border-themed, #383838),
      var(--workspace-shadow-themed, 0 18px 46px rgba(0,0,0,.30)) !important;
    backdrop-filter: blur(3px) saturate(.98) !important;
    -webkit-backdrop-filter: blur(3px) saturate(.98) !important;
  }

  /* ============================================================
     THREE-DOT PRESS
     Keep the normal centered transform even during :active. The generic
     button:active rule used to REPLACE translateY(-50%) with translateY(1px),
     which caused the large visible jump and made edge presses miss the click.
  */
  .doc-panel .doc-header > #mdSmartAddBtn:active {
    transform: translateY(calc(-50% + 1px)) !important;
  }

  /* SETTINGS / GRAPH SETTINGS
     Both use the same wallpaper-aware panel family as the Document. */
  body > #settingsPanel,
  body > #graphSettingsPanel {
    background: var(--doc-panel-bg-themed, #202020) !important;
    border: 1px solid var(--doc-border-themed, #383838) !important;
    outline: 0 !important;
    box-shadow: var(--workspace-shadow-themed, 0 20px 55px rgba(0,0,0,.28)) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
  }

  /* DOCUMENT WALLPAPER / GLASS PANEL — restored from supplied old file.
     2D uses the active wallpaper's themed document surface.
     3D uses the old lightweight live-glass values so the wallpaper/graph remains
     visible through the Document instead of turning into a solid themed block.
     The old paint containment is intentionally NOT restored. */

  /* Old 2D/themed Document surface. */
  body .doc-panel {
    background: var(--doc-panel-bg-themed, #202020) !important;
    border-color: var(--doc-border-themed, #383838) !important;
    box-shadow: var(--workspace-shadow-themed, 0 20px 55px rgba(0,0,0,.28)) !important;
    contain: none !important;
    overflow: visible !important;
  }

  /* Old lightweight 3D document glass. */
  body.graph-3d-mode .doc-panel.doc-glass,
  body[data-graph-mode="3d"] .doc-panel.doc-glass {
    background: rgba(20,22,24,.10) !important;
    backdrop-filter: blur(5px) saturate(.96) !important;
    -webkit-backdrop-filter: blur(5px) saturate(.96) !important;
  }

  body.graph-3d-mode .doc-panel.doc-glass .doc-glass-bg,
  body[data-graph-mode="3d"] .doc-panel.doc-glass .doc-glass-bg {
    display: none !important;
    opacity: 0 !important;
    filter: none !important;
    transform: none !important;
  }

  /* Old selected 3D split-document panel. */
  body.graph-3d-mode.has-selected-node.layout-doc-right .doc-panel,
  body.graph-3d-mode.has-selected-node.layout-doc-left .doc-panel {
    background: rgba(20,22,24,.18) !important;
    backdrop-filter: blur(7px) saturate(.94) !important;
    -webkit-backdrop-filter: blur(7px) saturate(.94) !important;
    contain: none !important;
    overflow: visible !important;
  }

  body.graph-3d-mode.has-selected-node.layout-doc-right .doc-panel {
    border-left: 1px solid rgba(255,255,255,.11) !important;
    border-right: none !important;
    box-shadow: -18px 0 48px rgba(0,0,0,.16) !important;
  }

  body.graph-3d-mode.has-selected-node.layout-doc-left .doc-panel {
    border-left: none !important;
    border-right: 1px solid rgba(255,255,255,.11) !important;
    box-shadow: 18px 0 48px rgba(0,0,0,.16) !important;
  }

  /* Old 3D default three-panel Document surface. */
  body.graph-3d-mode.has-selected-node.layout-default .doc-panel {
    background: rgba(20,22,24,.18) !important;
    backdrop-filter: blur(7px) saturate(.94) !important;
    -webkit-backdrop-filter: blur(7px) saturate(.94) !important;
    contain: none !important;
    overflow: visible !important;
  }

  /* Preserve the already-approved removal of the visible top/header band. */
  .doc-panel .doc-header,
  .doc-panel.doc-glass .doc-header,
  body.graph-3d-mode .doc-panel .doc-header,
  body[data-graph-mode="3d"] .doc-panel .doc-header {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Keep one continuous panel surface and preserve the black-bar fix. */
  body .doc-panel .doc-body,
  body .doc-panel.doc-glass .doc-body,
  body.graph-3d-mode .doc-panel .doc-body,
  body[data-graph-mode="3d"] .doc-panel .doc-body,
  body.graph-3d-mode.has-selected-node.layout-doc-right .doc-panel .doc-body,
  body.graph-3d-mode.has-selected-node.layout-doc-left .doc-panel .doc-body,
  body.graph-3d-mode.has-selected-node.layout-default .doc-panel .doc-body {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: var(--doc-text-themed, #d7d7d7) !important;
    contain: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* ============================================================
     Exact old-file 2D document glass behavior.

     This specific selector existed in the supplied old file and was being
     overridden by the later opaque .88 panel rule. Put the old
     selector LAST so theme/wallpaper changes remain visible through the
     Document exactly like the reference build.
  */
  body.va-layout.has-selected-node .doc-panel.doc-glass {
    background: rgba(31,31,31,.08) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    contain: none !important;
    overflow: visible !important;
  }

  body.va-layout.has-selected-node .doc-panel.doc-glass .doc-glass-bg,
  body.va-layout .document-swipe-backdrop {
    display: none !important;
    opacity: 0 !important;
  }

  body.va-layout.has-selected-node .doc-panel.doc-glass .doc-body {
    background: rgba(32,32,32,.03) !important;
    background-color: rgba(32,32,32,.03) !important;
    background-image: none !important;
    contain: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* Keep the already-approved invisible header band while retaining the old
     glass panel itself. */
  body.va-layout.has-selected-node .doc-panel.doc-glass .doc-header {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* ============================================================
     Images are document content again, not floating canvas objects.
     Their Markdown location owns vertical position, so when the divider makes
     text wrap onto more lines the image is pushed down automatically. */
  .doc-panel .markdown-editor-box .CodeMirror .cm-md-rendered-image-wrap {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    display: inline-block !important;
    vertical-align: top !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 8px 0 !important;
    cursor: default !important;
    z-index: 3 !important;
    overflow: visible !important;
    contain: none !important;
  }

  .doc-panel .markdown-editor-box .CodeMirror .cm-md-rendered-image-wrap::before,
  .doc-panel .markdown-editor-box .CodeMirror .cm-md-rendered-image-wrap::after {
    display: none !important;
    content: none !important;
  }

  .doc-panel .markdown-editor-box .CodeMirror .cm-md-rendered-image-wrap img.cm-md-rendered-image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: fill !important;
    pointer-events: none !important;
  }

  /* Legacy rich-text images also return to normal flow if an older note still
     contains one of the old image-free wrappers. */
  .doc-panel .image-resize-wrap.image-free {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    display: inline-block !important;
    max-width: 100% !important;
    margin: 8px 0 !important;
  }

  /* ============================================================
     Match the supplied old Document panel edge treatment:
     - Document on RIGHT -> only LEFT/graph-facing divider
     - Document on LEFT  -> only RIGHT/graph-facing divider
     - no top, bottom, or outside/window-edge outline
     - no inset outline around all four sides
     The panel glass/theme, scrollbar, and anti-clipping behavior are unchanged.
  */

  body.va-layout.has-selected-node.layout-doc-right .doc-panel {
    border: 0 !important;
    border-left: 1px solid var(--doc-border-themed, var(--border)) !important;
    border-right: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    outline: 0 !important;
    box-shadow: -18px 0 48px rgba(0,0,0,.16) !important;
  }

  body.va-layout.has-selected-node.layout-doc-left .doc-panel {
    border: 0 !important;
    border-left: 0 !important;
    border-right: 1px solid var(--doc-border-themed, var(--border)) !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    outline: 0 !important;
    box-shadow: 18px 0 48px rgba(0,0,0,.16) !important;
  }

  /* Same one-edge rule in 3D. */
  body.graph-3d-mode.has-selected-node.layout-doc-right .doc-panel,
  body[data-graph-mode="3d"].has-selected-node.layout-doc-right .doc-panel {
    border: 0 !important;
    border-left: 1px solid rgba(255,255,255,.11) !important;
    border-right: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    outline: 0 !important;
    box-shadow: -18px 0 48px rgba(0,0,0,.16) !important;
  }

  body.graph-3d-mode.has-selected-node.layout-doc-left .doc-panel,
  body[data-graph-mode="3d"].has-selected-node.layout-doc-left .doc-panel {
    border: 0 !important;
    border-left: 0 !important;
    border-right: 1px solid rgba(255,255,255,.11) !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    outline: 0 !important;
    box-shadow: 18px 0 48px rgba(0,0,0,.16) !important;
  }

  /* Full Document has no edge divider because there is no graph beside it. */
  body.layout-doc-full .doc-panel {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }

  /* CodeMirror replacement widgets (especially images) change
     geometry above the viewport. Browser scroll anchoring can then shift the
     Document by itself while our caret code also scrolls it. Disable native
     anchoring so the outer Document has exactly one scroll owner. */
  .doc-panel .doc-body,
  .doc-panel .markdown-editor-box,
  .doc-panel .CodeMirror,
  .doc-panel .CodeMirror-scroll,
  .doc-panel .CodeMirror-sizer,
  .doc-panel .CodeMirror-lines,
  .doc-panel .CodeMirror-code,
  .doc-panel .cm-md-rendered-image-wrap {
    overflow-anchor: none !important;
  }

  /* ============================================================
     The scrollbar should represent REAL content only.

     Older editor defaults forced:
       - 68vh minimum shell height
       - 430px minimum editor/scroller height
       - multiple 80px bottom paddings
     Those values could make a short note a few pixels taller than the panel,
     causing the transparent scrollbar to appear even when there was nothing
     meaningful to scroll.

     Keep the exact same text starting position and scrollbar appearance; only
     remove the artificial extra document height.
  */
  .doc-panel #docEditor.doc-card {
    min-height: 0 !important;
  }

  .doc-panel #markdownDocShell,
  .doc-panel .markdown-editor-shell {
    min-height: 0 !important;
    padding-bottom: 0 !important;
  }

  .doc-panel #markdownTextarea {
    min-height: 0 !important;
    padding-bottom: 0 !important;
  }

  .doc-panel .markdown-editor-box .CodeMirror {
    min-height: 0 !important;
    height: auto !important;
    padding-bottom: 0 !important;
  }

  .doc-panel .markdown-editor-box .CodeMirror-scroll,
  .doc-panel .markdown-editor-box .CodeMirror-sizer,
  .doc-panel .markdown-editor-box .CodeMirror-lines,
  .doc-panel .markdown-editor-box .CodeMirror-code {
    min-height: 0 !important;
  }

  .doc-panel .markdown-preview {
    min-height: 0 !important;
    padding-bottom: 0 !important;
  }

  /* ============================================================
     ONE Document selection layer only.

     CodeMirror normally paints multi-line selections as rectangular geometry:
       first partial line + one huge middle rectangle + final partial line.
     That is the "two different gray boxes" visible in the screenshots.

     Hide those native geometry boxes and draw the selection directly on the
     selected text spans instead. Blank lines and empty space stay transparent.
  */
  body .doc-panel .markdown-editor-box .CodeMirror-selected,
  body .doc-panel .markdown-editor-box .CodeMirror-focused .CodeMirror-selected {
    background: transparent !important;
  }

  body .doc-panel .markdown-editor-box .CodeMirror .cm-flow-text-selection {
    background: var(--flow-accent-selection, rgba(208,208,208,.28)) !important;
    color: inherit !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  /* ============================================================
     Google Docs-style full Document writing surface.

     Keep short notes from shrinking CodeMirror to only their text height. The
     real editor now flexes through all remaining Document space, so the whole
     page uses the I-beam and belongs to the editor. Content can still grow past
     the viewport normally, with .doc-body remaining the only scrollbar.
  */
  .doc-panel,
  .doc-panel .doc-body,
  .doc-panel #docEditor.doc-card,
  .doc-panel #markdownDocShell,
  .doc-panel #markdownDocShell .markdown-editor-box,
  .doc-panel #markdownDocShell .EasyMDEContainer,
  .doc-panel #markdownDocShell .CodeMirror,
  .doc-panel #markdownDocShell .CodeMirror-scroll {
    cursor: text;
  }

  .doc-panel #docEditor.doc-card {
    min-height: 100% !important;
  }

  .doc-panel #docEditor[style*="display: block"],
  .doc-panel #docEditor[style*="display: flex"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .doc-panel #markdownDocShell {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }

  .doc-panel #markdownDocShell .markdown-editor-box,
  .doc-panel #markdownDocShell .EasyMDEContainer {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }

  .doc-panel #markdownDocShell .CodeMirror,
  .doc-panel #markdownDocShell .CodeMirror-scroll,
  .doc-panel #markdownTextarea {
    flex: 1 1 auto !important;
    min-height: 100% !important;
  }

  /* ============================================================
     Real inner copy elements make vertical centering reliable in buttons.
     The bounded text fitter still switches genuinely overflowing answers back
     to the safe top edge so long explanations can scroll without being cut.
  */

  /* Installable Calendar panel. */

  body.calendar-open .topbar {
    z-index: 1000001;
  }

  body.calendar-open .topbar button:not(#calendarBtn) {
    pointer-events: none;
  }

  /* Settings panels return to the lightweight glass surface. */
  body > #settingsPanel,
  body > #graphSettingsPanel {
    background: rgba(22, 22, 25, .48) !important;
    background-color: rgba(22, 22, 25, .48) !important;
    background-image: none !important;
    border: 1px solid rgba(255,255,255,.11) !important;
    box-shadow: 0 20px 55px rgba(0,0,0,.24) !important;
    backdrop-filter: blur(10px) saturate(.96) !important;
    -webkit-backdrop-filter: blur(10px) saturate(.96) !important;
  }

  /* Settings workspace: one full-screen home for general, graph,
     2D controls, 3D controls, and sound configuration. */
  body > #settingsPanel.settings-workspace {
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-columns: 258px minmax(0, 1fr);
    color: #e9e9ec;
    background: rgba(12,13,17,.14) !important;
    background-color: rgba(12,13,17,.14) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 0 !important;
    box-shadow: 0 24px 80px rgba(0,0,0,.16) !important;
    backdrop-filter: blur(12px) saturate(1.02) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.02) !important;
    transform: scale(.992) !important;
    transform-origin: center !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 2100000 !important;
    transition: opacity 160ms ease, transform 190ms cubic-bezier(.22,1,.36,1), visibility 160ms ease !important;
  }

  body.show-settings > #settingsPanel.settings-workspace {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: scale(1) !important;
  }

  body.show-settings { overflow: hidden; }

  .settings-workspace-sidebar {
    min-width: 0;
    padding: 20px 14px;
    overflow-y: auto;
    background: rgba(20,21,25,.20);
    border-right: 1px solid rgba(255,255,255,.075);
    backdrop-filter: blur(10px) saturate(1.02);
    -webkit-backdrop-filter: blur(10px) saturate(1.02);
    box-shadow: inset -1px 0 0 rgba(255,255,255,.03);
  }

  .settings-workspace-sidebar-head {
    height: 38px;
    margin: 0 4px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .settings-workspace-sidebar-head strong {
    color: rgba(245,245,247,.94);
    font-size: 17px;
    font-weight: 850;
    letter-spacing: -.02em;
  }

  .settings-build-version {
    display: inline-flex;
    align-items: center;
    margin-left: 7px;
    padding: 3px 7px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 999px;
    background: rgba(255,255,255,.055);
    color: rgba(235,235,240,.58);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .035em;
    vertical-align: 2px;
    white-space: nowrap;
  }

  .settings-build-value {
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
  }

  .settings-workspace-close {
    width: 32px;
    height: 32px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.09) !important;
    border-radius: 9px !important;
    background: rgba(255,255,255,.035) !important;
    color: rgba(236,236,240,.68) !important;
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
  }

  .settings-workspace-close:hover { background: rgba(255,255,255,.085) !important; color: #fff !important; }

  .settings-search-shell {
    height: 38px;
    margin-bottom: 18px;
    padding: 0 11px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 10px;
    background: rgba(255,255,255,.045);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .settings-search-shell svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    fill: none;
    stroke: rgba(232,232,237,.44);
    stroke-width: 1.8;
  }

  .settings-search-shell input {
    min-width: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0 !important;
    outline: 0;
    background: transparent !important;
    color: #ededf0;
    font-size: 12px;
  }

  .settings-search-shell input::placeholder { color: rgba(232,232,237,.58); }
  .settings-nav-label { margin: 0 9px 7px; color: rgba(232,232,237,.58); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
  .settings-workspace-nav { display: grid; gap: 3px; }

  .settings-nav-button {
    width: 100%;
    min-height: 38px;
    padding: 0 11px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: rgba(234,234,238,.66) !important;
    font-size: 12px;
    font-weight: 720;
    text-align: left;
  }

  .settings-nav-button svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
  .settings-nav-button:hover {
    background: rgba(255,255,255,.05) !important;
    color: rgba(244,244,247,.88) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  }
  .settings-nav-button.active {
    background: rgba(255,255,255,.095) !important;
    color: #f4f4f6 !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 24px rgba(0,0,0,.12);
  }

  .settings-workspace-main {
    min-width: 0;
    overflow-y: auto;
    padding: 64px clamp(26px, 6vw, 92px) 90px;
    background: rgba(10,11,14,.035);
    scrollbar-gutter: stable;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }

  .settings-page { width: min(860px, 100%); margin: 0 auto; display: none; }
  .settings-page.active { display: block; }
  .settings-workspace.searching .settings-page { display: none; }
  .settings-workspace.searching .settings-page.search-match { display: block; margin-bottom: 44px; }
  .settings-page-heading { margin-bottom: 27px; }
  .settings-page-heading h2 { margin: 0 0 7px; color: rgba(247,247,249,.95); font-size: 24px; font-weight: 830; letter-spacing: -.035em; }
  .settings-page-heading p { margin: 0; color: rgba(230,230,235,.44); font-size: 12px; line-height: 1.5; }

  .settings-card {
    margin-bottom: 26px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 16px;
    background: rgba(255,255,255,.035);
    box-shadow: 0 16px 38px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.025);
    backdrop-filter: blur(8px) saturate(1.02);
    -webkit-backdrop-filter: blur(8px) saturate(1.02);
  }
  .settings-card-title { margin: 0; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.065); color: rgba(243,243,246,.90); font-size: 12px; font-weight: 820; background: rgba(255,255,255,.012); }

  .settings-row {
    min-height: 68px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    border-top: 1px solid rgba(255,255,255,.06);
  }

  .settings-card-title + .settings-row { border-top: 0; }
  .settings-row-copy { min-width: 0; display: grid; gap: 4px; }
  .settings-row-copy b { color: rgba(242,242,245,.88); font-size: 12px; font-weight: 760; }
  .settings-row-copy small { color: rgba(228,228,233,.42); font-size: 10.5px; line-height: 1.45; }
  .settings-row-control { min-width: 210px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
  .settings-row-control input[type="range"] { width: min(230px, 24vw); }
  .settings-value-pill { min-width: 54px; padding: 5px 8px; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; background: rgba(255,255,255,.035); color: rgba(242,242,245,.72); font-size: 10px; font-style: normal; font-weight: 780; text-align: center; }
  .settings-project-block { padding: 16px 18px; }

  #settingsPanel .active-project-mini { margin: 0 0 12px !important; padding: 10px 12px !important; border: 1px solid rgba(255,255,255,.09) !important; border-radius: 10px !important; background: rgba(255,255,255,.025) !important; color: rgba(232,232,236,.60) !important; font-size: 11px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.03) !important; }
  #settingsPanel .settings-project-actions { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }

  #settingsPanel .settings-project-actions button,
  #settingsPanel .settings-secondary-button,
  #settingsPanel .new-group-btn,
  #settingsPanel #settingsFitBtn,
  #settingsPanel #settingsResetBtn {
    min-height: 36px;
    padding: 7px 11px;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 9px !important;
    background: rgba(255,255,255,.055) !important;
    color: rgba(241,241,244,.82) !important;
    font-size: 11px;
    font-weight: 740;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 6px 18px rgba(0,0,0,.08) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }

  #settingsPanel .settings-project-actions button:hover,
  #settingsPanel .settings-secondary-button:hover,
  #settingsPanel .new-group-btn:hover,
  #settingsPanel #settingsFitBtn:hover,
  #settingsPanel #settingsResetBtn:hover { background: rgba(255,255,255,.085) !important; }
  #settingsPanel .settings-project-actions .danger,
  #settingsPanel #settingsResetBtn { background: rgba(100,47,52,.21) !important; color: rgba(245,211,214,.83) !important; }

  .settings-card-body { padding: 16px 18px; }
  .settings-graph-sliders { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px 26px; }
  .graph-mode-settings-tabs {
    width: min(360px, 100%);
    margin: 0 0 24px;
    padding: 4px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 4px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    background: rgba(255,255,255,.04);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .graph-mode-settings-tab {
    min-height: 36px;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: rgba(236,236,240,.48) !important;
    font-size: 11px;
    font-weight: 820;
  }

  .graph-mode-settings-tab:hover { color: rgba(246,246,248,.82) !important; background: rgba(255,255,255,.045) !important; }
  .graph-mode-settings-tab.active { color: #f5f5f7 !important; background: rgba(255,255,255,.11) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 22px rgba(0,0,0,.12); }
  .graph-mode-settings-panel { display: none; }
  .graph-mode-settings-panel.active { display: block; }
  .settings-workspace.searching .graph-mode-settings-tabs { display: none; }
  .settings-workspace.searching .graph-mode-settings-panel { display: block; }
  #settingsPanel .slider-row { margin: 0; }
  #settingsPanel .slider-row span { color: rgba(232,232,236,.62); font-size: 11px; }
  #settingsPanel .graph3d-layout-toggle { margin-top: 0; }
  #settingsPanel .graph3d-layout-choice { min-height: 38px; }
  #settingsPanel .group-row { min-height: 46px; border-bottom-color: rgba(255,255,255,.055); }
  .settings-card-note { margin-top: 10px; color: rgba(228,228,233,.40); font-size: 10.5px; line-height: 1.5; }
  
  .settings-keybind-list { display: grid; }

  .settings-keybind-row {
    min-height: 62px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid rgba(255,255,255,.06);
  }

  .settings-keybind-row:first-child { border-top: 0; }
  .settings-keybind-copy { min-width: 0; display: grid; gap: 3px; }
  .settings-keybind-copy b { color: rgba(241,241,244,.86); font-size: 11.5px; font-weight: 750; }
  .settings-keybind-copy small { color: rgba(228,228,233,.38); font-size: 10px; }
  .settings-keybind-buttons { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }

  .settings-keybind-button {
    min-width: 50px;
    min-height: 32px;
    padding: 5px 10px;
    border: 1px solid rgba(255,255,255,.11) !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,.055) !important;
    color: rgba(244,244,246,.80) !important;
    font-size: 10px;
    font-weight: 770;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 6px 14px rgba(0,0,0,.08) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }

  .settings-keybind-button:hover { background: rgba(255,255,255,.085) !important; border-color: rgba(255,255,255,.18) !important; }
  .settings-keybind-button.listening { min-width: 92px; border-color: rgba(210,210,220,.46) !important; background: rgba(255,255,255,.12) !important; color: #fff !important; }
  .settings-reset-row { padding: 14px 18px; display: flex; justify-content: flex-end; border-top: 1px solid rgba(255,255,255,.06); }
  #settingsPanel .sound-toggle-row { width: 100%; margin: 0 !important; }

  @media (max-width: 760px) {
    body > #settingsPanel.settings-workspace { grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); }
    .settings-workspace-sidebar { padding: 10px 12px 9px; overflow: visible; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.075); }
    .settings-workspace-sidebar-head { height: 32px; margin-bottom: 8px; }
    .settings-search-shell { margin-bottom: 9px; }
    .settings-nav-label { display: none; }
    .settings-workspace-nav { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; }
    .settings-workspace-nav::-webkit-scrollbar { display: none; }
    .settings-nav-button { width: auto; min-width: max-content; padding: 0 10px; }
    .settings-nav-button svg { display: none; }
    .settings-workspace-main { padding: 28px 14px 60px; }
    .settings-page-heading h2 { font-size: 21px; }
    .settings-row { align-items: flex-start; flex-direction: column; gap: 12px; }
    .settings-row-control { width: 100%; min-width: 0; justify-content: space-between; }
    .settings-row-control input[type="range"] { width: 100%; }
    .settings-graph-sliders { grid-template-columns: 1fr; }
    #settingsPanel .settings-project-actions { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .settings-keybind-row { align-items: flex-start; flex-direction: column; }
    .settings-keybind-buttons { width: 100%; justify-content: flex-start; }
  }