/* ---------- editor (CodeMirror 5: Live Preview / Source) ---------- */
                     .kn-cm { position: relative; }
                     .kn-cm .CodeMirror { height: auto; background: transparent; color: var(--kn-text); font: 16px/1.5 var(--kn-font); }
                     .kn-cm .CodeMirror-lines { padding: 0 0 0 8px; }
                     .kn-cm .CodeMirror pre.CodeMirror-line, .kn-cm .CodeMirror pre.CodeMirror-line-like { padding: 0; }
                     .kn-cm .CodeMirror-cursor { border-left: 1.5px solid var(--kn-text); }
                     .kn-cm .CodeMirror-selected, .kn-cm .CodeMirror-focused .CodeMirror-selected, .kn-cm .CodeMirror-line::selection,
.kn-cm .CodeMirror-line > span::selection, .kn-cm .CodeMirror-line > span > span::selection { background: var(--kn-select); }
.kn-cm .CodeMirror-placeholder { color: var(--kn-faint) !important; }
.kn-cm .cm-header { color: var(--kn-text); line-height: 1.2; letter-spacing: -.015em; }
.kn-cm .cm-header-1 { font-size: 1.618em; font-weight: 700; } .kn-cm .cm-header-2 { font-size: 1.462em; font-weight: 680; }
.kn-cm .cm-header-3 { font-size: 1.318em; font-weight: 660; } .kn-cm .cm-header-4 { font-size: 1.188em; font-weight: 640; }
.kn-cm .cm-header-5 { font-size: 1.076em; font-weight: 620; } .kn-cm .cm-header-6 { font-size: 1em; font-weight: 600; }
.kn-cm .kn-h1-line { padding-top: 16px !important; } .kn-cm .kn-h2-line, .kn-cm .kn-h3-line { padding-top: 12px !important; }
.kn-cm .cm-formatting-header { color: var(--kn-faint); }
.kn-cm .cm-strong { font-weight: 700; } .kn-cm .cm-em { font-style: italic; }
.kn-cm .cm-strikethrough { text-decoration: line-through; }
.kn-cm .cm-link, .kn-cm .cm-kn-wl, .kn-cm .cm-kn-wl-alias { color: var(--kn-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.kn-cm .cm-url, .kn-cm .cm-string.cm-url { color: var(--kn-faint); text-decoration: none; }
.kn-cm .cm-formatting-link, .kn-cm .cm-kn-wl-open, .kn-cm .cm-kn-wl-close { color: var(--kn-faint); text-decoration: none; }
.kn-cm .cm-comment { font-family: var(--kn-mono); font-size: .875em; background: var(--kn-code); border-radius: 4px; padding: .1em .25em; }
.kn-cm .kn-code-line { font-family: var(--kn-mono); font-size: .875em; background: var(--kn-code); padding-left: 16px !important; }
.kn-cm .kn-code-line .cm-comment { background: none; padding: 0; }
.kn-cm .cm-quote { color: var(--kn-text); }
.kn-cm .kn-quote-line { border-left: 2px solid var(--kn-accent); padding-left: 24px !important; }
.kn-cm .cm-kn-tag { background: var(--kn-tag-bg); color: var(--kn-tag); border-radius: 2em; padding: .25em .65em; font-size: .875em; }
.kn-cm .cm-kn-hl { background: var(--kn-hl); }
.kn-cm .cm-kn-comment { color: var(--kn-faint); }
.kn-cm .cm-kn-math { color: var(--kn-tag); font-family: var(--kn-mono); font-size: .9em; }
.kn-cm .cm-kn-blockid, .kn-cm .cm-kn-fn { color: var(--kn-faint); }
.kn-cm .cm-hr { color: var(--kn-faint); }
.kn-cm .cm-meta, .kn-cm .cm-atom, .kn-cm .cm-def, .kn-cm .cm-formatting-list { color: var(--kn-faint); }
.kn-cm .cm-variable-2, .kn-cm .cm-variable-3, .kn-cm .cm-keyword { color: var(--kn-text); }
.kn-cm .kn-fm-line { font-family: var(--kn-mono); font-size: .875em; color: var(--kn-muted); }
.kn-cm .CodeMirror-widget { cursor: default; }
/* Live Preview: markup hidden outside the lines being edited */
.kn-live .CodeMirror-line:not(.kn-cur) .cm-formatting:not(.cm-formatting-list):not(.cm-formatting-task):not(.cm-formatting-code-block),
.kn-live .CodeMirror-line:not(.kn-cur) .cm-kn-hide,
.kn-live .CodeMirror-line:not(.kn-cur) .cm-url { display: none; }
.kn-live .CodeMirror-line:not(.kn-cur) .cm-formatting-list-ul { position: relative; color: transparent; }
.kn-live .CodeMirror-line:not(.kn-cur) .cm-formatting-list-ul::before { content: ""; position: absolute; left: .2em; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--kn-faint); }
.kn-live .kn-task-line:not(.kn-cur) .cm-formatting-list-ul::before { content: none; }
.kn-live .kn-task-line:not(.kn-cur) .cm-formatting-list-ul { font-size: 0; }
.kn-live .CodeMirror-line:not(.kn-cur) .cm-link, .kn-live .CodeMirror-line:not(.kn-cur) .cm-kn-wl, .kn-live .CodeMirror-line:not(.kn-cur) .cm-kn-wl-alias { cursor: pointer; }
.kn-live .kn-hr-line:not(.kn-cur) { color: transparent; background: linear-gradient(var(--kn-border), var(--kn-border)) center / 100% 2px no-repeat; }
.kn-live .kn-hr-line:not(.kn-cur) * { color: transparent; }
.kn-live .kn-task-done:not(.kn-cur) > span > :not(.CodeMirror-widget) { color: var(--kn-faint); text-decoration: line-through; }
.kn-cm .kn-w-check { margin: 0 6px 0 0; }
.kn-cm .kn-w-img img { max-width: 100%; display: block; margin: 4px 0; }
.kn-cm .kn-w-img.kn-media { position: relative; display: inline-block; max-width: 100%; vertical-align: bottom; }
.kn-cm .kn-w-img.kn-media, .kn-cm .kn-w-block.kn-media { max-width: calc(100% - 20px); }
.kn-cm .kn-media.kn-placed { z-index: 3; }
.kn-cm .kn-media .kn-canvas-mini { height: var(--kn-h, 320px) !important; }
.kn-media { position: relative; display: inline-block; max-width: 100%; vertical-align: bottom; }
.kn-media img.kn-media-img { max-width: 100%; max-height: 70vh; height: auto; object-fit: contain; display: block; margin: 4px 0; }
.kn-cm .kn-w-img.kn-media img { max-width: 100%; max-height: 70vh; height: auto; object-fit: contain; display: block; margin: 4px 0; }
/* Media toolbar (zoom / path): a small translucent pill over the corner of the
 m edia, drawn like a video overlay instead of two heavy white boxes*. */                                                                                         *
 .kn-media-actions { position: absolute; top: 8px; right: 8px; z-index: 10; display: flex; align-items: center; gap: 2px; padding: 3px; margin: 0; box-sizing: border-box; border-radius: 8px; background: rgba(28, 24, 22, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); line-height: 1; white-space: nowrap; user-select: none; -webkit-user-select: none; opacity: 1; pointer-events: auto; }
 .kn-canvas-mini .kn-media-actions { opacity: 1; transform: none; pointer-events: auto; }   /* canvas: no hover, the buttons are always there */
 .kn-media:hover .kn-media-actions, .kn-media:focus-within .kn-media-actions { opacity: 1; transform: none; pointer-events: auto; }
 @media (hover: none) { .kn-media-actions { opacity: 1; transform: none; pointer-events: auto; } }
 .kn-media-btn { -webkit-appearance: none; appearance: none; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; margin: 0; padding: 0; border: 0; border-radius: 6px; background: transparent; color: rgba(255, 255, 255, .88); box-shadow: none; font: inherit; font-size: 12px; line-height: 1; cursor: pointer; transition: background .12s ease, color .12s ease; }
 .kn-media-btn i { font-size: 12px; line-height: 1; pointer-events: none; }
 .kn-media-btn:hover { background: rgba(255, 255, 255, .2); color: #fff; }
 .kn-media-btn:active { background: rgba(255, 255, 255, .3); }
 .kn-media-btn:focus { outline: none; }
 .kn-media-btn:focus-visible { outline: 2px solid var(--kn-accent); outline-offset: 1px; }
 .kn-media-btn.is-on { background: rgba(217, 119, 6, .85); color: #fff; }
 /* Word-like layout handles (editor live only): resize grip bottom-right,
  * move grip top-left, always visible like the actions pill. */
 .kn-media-resize { position: absolute; right: 0; bottom: 0; z-index: 11; width: 20px; height: 20px; cursor: nwse-resize;
   touch-action: none;
   background: linear-gradient(135deg, transparent 50%, rgba(255,255,255,.9) 50%, rgba(0,0,0,.55) 60%, transparent 60%);
   border-bottom-right-radius: 6px; opacity: 1; }
   .kn-media-move { position: absolute; left: 6px; top: 6px; z-index: 11; width: 28px; height: 28px; display: inline-flex;
     align-items: center; justify-content: center; border-radius: 6px; background: rgba(28,24,22,.62); color: rgba(255,255,255,.9);
     cursor: move; touch-action: none; opacity: 1; }
     .kn-media-move i { font-size: 12px; pointer-events: none; }
     /* Move hitbox: the whole card expanded 5px out as a dashed safe-area
      * pattern; the visible button stays inside. The video/audio menu (actions
      * pill, play bar) sits above it, so buttons keep working and only the
      * picture surface drags. */
     /* Marco invisible de 5px por fuera de la tarjeta (como un padding): los
      * bordes mueven, las esquinas redimensionan. El interior no se tapa. */
     /* sin anclaje de scroll del navegador en la nota: con tarjetas desplazadas
      * por x/y, Chrome elegía mal la referencia al cambiar un alto y la ventana
      * saltaba cientos de píxeles al mover o redimensionar */
     .kn-viewbody, .kn-viewbody .CodeMirror-scroll { overflow-anchor: none; }
     .kn-media-hitbox { position: absolute; inset: -5px; z-index: 12; pointer-events: none; }
     /* cada línea de CodeMirror es una capa: la de la tarjeta va encima de la
      * siguiente para que la franja inferior del marco no quede tapada */
     .kn-cm .CodeMirror-line:has(.kn-media-hitbox) { z-index: 3; }
     /* un elemento con x/y se dibuja desplazado sobre otras líneas: su línea va
      * delante de todas (como «delante del texto» en Word); si no, el texto de
      * debajo recibía el clic, movía el cursor y la ventana saltaba */
     .kn-cm .CodeMirror-line:has(.kn-media.kn-placed) { z-index: 6; }
     .kn-cm .CodeMirror-line:has(.kn-media.kn-dragging) { z-index: 7; }
     /* las líneas de CodeMirror ocupan todo el ancho: la parte vacía de la línea
      * de un elemento no recibe clics (pasan a lo que hay debajo); solo la
      * tarjeta y su marco los reciben */
     .kn-cm .CodeMirror-line:has(> span > .CodeMirror-widget .kn-media-hitbox) { pointer-events: none; }
     .kn-cm .CodeMirror-line .kn-media { pointer-events: auto; }
     .kn-hb-e, .kn-hb-c { position: absolute; pointer-events: auto; touch-action: none; background: transparent; }
     .kn-hb-t { top: 0; left: 0; right: 0; height: 5px; cursor: move; }
     .kn-hb-b { bottom: 0; left: 0; right: 0; height: 5px; cursor: move; }
     .kn-hb-l { top: 0; bottom: 0; left: 0; width: 5px; cursor: move; }
     .kn-hb-r { top: 0; bottom: 0; right: 0; width: 5px; cursor: move; }
     .kn-hb-c { width: 12px; height: 12px; z-index: 1; }
     .kn-hb-nw { top: 0; left: 0; cursor: nwse-resize; }
     .kn-hb-se { bottom: 0; right: 0; cursor: nwse-resize; }
     .kn-hb-ne { top: 0; right: 0; cursor: nesw-resize; }
     .kn-hb-sw { bottom: 0; left: 0; cursor: nesw-resize; }
       .kn-media .meet-play-bar, .kn-media .meet-play-view { position: relative; z-index: 11; }
       /* la barra nunca sale de la tarjeta: en tarjetas estrechas los controles
        * bajan de línea, así editor, lector y lector público miden la misma caja */
       .kn-media .meet-play-bar { flex-wrap: wrap; row-gap: 6px; min-width: 0; }
       /* el lector público reinicia los <select>: mismo alto que en el editor */
       .kn-media .meet-play-rate { box-sizing: border-box; height: 34px; line-height: 20px; padding: 6px; }
       .kn-media:hover .kn-media-resize, .kn-media:hover .kn-media-move,
.kn-media:focus-within .kn-media-resize, .kn-media:focus-within .kn-media-move { opacity: 1; }
.kn-media.kn-media-armed { outline: 3px solid #dc2626; outline-offset: 3px; border-radius: 6px; }
.kn-media.kn-dragging { outline: 2px solid var(--kn-accent); outline-offset: 2px; will-change: transform; z-index: 20; touch-action: none; cursor: grabbing; }
/* During a live drag the CodeMirror box must not clip the translate. */
.kn-cm.kn-drag-host .CodeMirror, .kn-cm.kn-drag-host .CodeMirror-scroll { overflow: visible !important; clip-path: none !important; }
/* Reading view: floated media with the paragraph flowing around it. */
/* mismo margen que el editor: 10px a cada lado de la nota */
.kn-media-wrap { max-width: calc(100% - 20px); }
.kn-media-wrap .kn-media { max-width: 100%; }
.kn-media-wrap img, .kn-media-wrap video { max-width: 100%; }
.kn-media-wrap.kn-float-l { float: left; }
.kn-media-wrap.kn-float-r { float: right; }
.kn-media-wrap.kn-float-c { display: block; }
/* Lector y lector público con la geometría del editor: el texto empieza a
 * 8px del origen del plano (padding de las líneas de CodeMirror) y las
 * tarjetas sin x/y llevan 10px más, como en el editor en vivo. */
.kn-md.kn-read-host, .kn-md.kn-reader { padding-left: 8px; }
.kn-md.kn-read-host > .kn-media, .kn-md.kn-reader > .kn-media,
.kn-md.kn-read-host > .kn-embed, .kn-md.kn-reader > .kn-embed,
.kn-md.kn-read-host > .kn-media-wrap:not(.kn-pos):not(.kn-float-c):not(.kn-float-r),
.kn-md.kn-reader > .kn-media-wrap:not(.kn-pos):not(.kn-float-c):not(.kn-float-r) { margin-left: 10px; }
.kn-md.kn-read-host > .kn-media, .kn-md.kn-reader > .kn-media,
.kn-md.kn-read-host > .kn-embed, .kn-md.kn-reader > .kn-embed { max-width: calc(100% - 20px); }
/* el espacio entre bloques lo dan las líneas vacías (.kn-gap), como en el
 * editor: los párrafos no suman márgenes propios */
.kn-md.kn-read-host > p, .kn-md.kn-reader > p { margin-top: 0; margin-bottom: 0; }
/* editor: un bloque (lienzo, nota incrustada) dentro de los envoltorios en
 * línea de CodeMirror dejaba una línea fantasma de 24px debajo; como
 * bloques, la línea mide lo mismo que la tarjeta y coincide con el lector */
.kn-cm .CodeMirror-widget:has(> .kn-w-block),
.kn-cm pre.kn-media-line > span:has(> .CodeMirror-widget > .kn-w-block) { display: block; }
/* cada línea vacía de más ocupa un alto de línea, como en el editor */
.kn-gap { height: 1.6em; height: 1lh; }
/* x/y: como en el editor, la tarjeta reserva su hueco en el texto y se
 * dibuja desplazada (left/top los calcula kn_markdown.js) */
.kn-media-wrap.kn-pos { position: relative; z-index: 5; }
.kn-media-wrap.kn-pos .kn-media { width: 100%; display: block; }
.kn-media-wrap.kn-pos img { width: 100%; height: auto; max-height: var(--kn-h, none); object-fit: contain; }
.kn-media-wrap.kn-pos [data-p="stage"] { max-height: var(--kn-h, none); }
.kn-media-wrap.kn-pos .kn-canvas-mini { height: var(--kn-h, 320px) !important; }

/* audio is a thin bar: the pill sits just above its corner instead of covering the controls */
.kn-media[data-kn-media="audio"] .kn-media-actions { top: auto; bottom: calc(100% + 2px); right: 0; background: var(--kn-bg2); border: 1px solid var(--kn-border); -webkit-backdrop-filter: none; backdrop-filter: none; }
.kn-media[data-kn-media="audio"] .kn-media-btn { color: var(--kn-muted); }
.kn-media[data-kn-media="audio"] .kn-media-btn:hover { background: var(--kn-hover); color: var(--kn-text); }
/* Path editor (button </>): inline field at the top of the media block;
 t he media itself stays visible (never hidden on open). */         *                                                                                            *
 .kn-media-path-editor { display: block; margin: 0 0 4px; }
 .kn-media-path-input { display: block; width: 100%; box-sizing: border-box; height: 30px; background: var(--kn-bg); border: 1px solid var(--kn-border); border-radius: 4px; padding: 0 8px; outline: none; font-size: 14px; color: var(--kn-text); }
 .kn-media-path-input:focus { border-color: var(--kn-accent); box-shadow: 0 0 0 2px var(--kn-active-hover); }
 .kn-media-path { display: none; font-size: 11px; color: var(--kn-faint, #888); word-break: break-all; margin: 2px 0 4px; }
 .kn-cm .kn-w-block { display: block; cursor: pointer; }
 .kn-cm .kn-w-block:hover { box-shadow: 0 0 0 1px var(--kn-border); border-radius: 4px; }
 .kn-cm .kn-w-block:has(.kn-canvas-mini):hover { box-shadow: none; }   /* canvas: no hover outline */
 .kn-cm .kn-w-props { display: block; cursor: default; }
 .kn-cm .kn-w-table { display: block; cursor: text; }
 .kn-cm .kn-w-table table { border-collapse: collapse; margin: 4px 0; }
 .kn-cm .kn-broken-link { opacity: .7; }

 /* [[ autocomplete (editor suggest) */
 .kn-ac { position: fixed; z-index: 85; width: 360px; max-height: 300px; overflow: auto; background: var(--kn-bg); border: 1px solid var(--kn-border-strong);
   border-radius: 8px; box-shadow: var(--kn-shadow-s); padding: 6px; font-size: 14px; }
   .kn-ac .kn-sug { font-size: 14px; padding: 5px 10px; }

   /* graph view */
   .kn-graph-wrap { position: absolute; inset: 0; background: var(--kn-bg); }
   .kn-graph-wrap canvas { width: 100%; height: 100%; display: block; touch-action: none; }
   .kn-graph-wrap canvas { position: absolute; inset: 0; }   /* WebGL below, labels on top */
   .kn-graph-ctl { position: absolute; top: 12px; right: 12px; width: 240px; max-height: calc(100% - 24px); overflow: auto; z-index: 3;
     background: var(--kn-bg); border: 1px solid var(--kn-border); border-radius: 8px; box-shadow: var(--kn-shadow-s); font-size: 13px; }
     .kn-graph-ctl.kn-collapsed { width: auto; border: 0; box-shadow: none; background: transparent; }
     .kn-graph-ctl details + details { border-top: 1px solid var(--kn-border); }
     .kn-graph-ctl summary { height: 40px; padding: 0 8px 0 12px; display: flex; align-items: center; gap: 4px; cursor: pointer; list-style: none; color: var(--kn-text); }
     .kn-graph-ctl summary::-webkit-details-marker { display: none; }
     .kn-graph-ctl summary .kn-chev .kn-svg { width: 14px; height: 14px; color: var(--kn-faint); transition: transform .1s; }
     .kn-graph-ctl details[open] > summary .kn-chev .kn-svg { transform: rotate(90deg); }
     .kn-graph-ctl summary .kn-acts { margin-left: auto; display: flex; }
     .kn-graph-ctl .kn-gc-body { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 8px; }
     .kn-graph-ctl .kn-gc-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; color: var(--kn-text); }
     .kn-graph-ctl .kn-gc-col { display: flex; flex-direction: column; gap: 6px; color: var(--kn-text); }
     .kn-graph-ctl input[type=range] { width: 100%; accent-color: var(--kn-accent); }
     .kn-graph-ctl .kn-gc-group { display: flex; gap: 6px; align-items: center; }
     .kn-graph-ctl .kn-gc-group input[type=color] { width: 22px; height: 22px; border: 0; padding: 0; background: none; }

     /* canvas */
     .kn-canvas { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none; background-color: var(--kn-bg);
       background-image: radial-gradient(var(--kn-border-strong) .8px, transparent .8px); }
       .kn-canvas.kn-panning { cursor: grabbing; }
       .kn-canvas-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
       .kn-canvas-edges { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
       .kn-canvas-edges path { fill: none; stroke: var(--kn-faint); stroke-width: 3; pointer-events: stroke; cursor: pointer; }
       .kn-canvas-edges path.kn-sel { stroke: var(--kn-accent); }
       .kn-canvas-edges text { fill: var(--kn-muted); font-size: 14px; }
       .kn-cnode { position: absolute; background: var(--kn-bg); border: 2px solid var(--kn-border-strong); border-radius: 12px; cursor: default; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
       .kn-cnode.kn-sel { border-color: var(--kn-accent); box-shadow: 0 0 0 2px var(--kn-active-hover); }
       .kn-cnode-body { position: absolute; inset: 0; overflow: auto; padding: 12px 24px; border-radius: 10px; }
       .kn-cnode-body.kn-md { font-size: 16px; }
       .kn-cnode textarea { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; outline: none; resize: none; padding: 12px 24px; background: var(--kn-bg); border-radius: 10px; font: 16px/1.5 var(--kn-font); color: var(--kn-text); }
       .kn-cnode-label { position: absolute; top: -30px; left: 0; font-size: 15px; font-weight: 500; color: var(--kn-muted); white-space: nowrap; background: var(--kn-bg2); padding: 2px 8px; border-radius: 6px; }
       .kn-cnode.kn-group-node { background: rgba(198, 93, 59, .03); }
       .kn-cnode-file { position: absolute; top: -24px; left: 4px; font-size: 13px; color: var(--kn-muted); white-space: nowrap; }
       .kn-chandle { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--kn-bg); border: 2px solid var(--kn-accent); opacity: 0; cursor: crosshair; z-index: 2; }
       .kn-cnode:hover .kn-chandle, .kn-cnode.kn-sel .kn-chandle { opacity: 1; }
       .kn-cresize { position: absolute; right: -4px; bottom: -4px; width: 16px; height: 16px; cursor: nwse-resize; z-index: 2; }
       .kn-canvas-bar { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; gap: 2px; padding: 4px; z-index: 3;
         background: var(--kn-bg); border: 1px solid var(--kn-border); border-radius: 8px; box-shadow: var(--kn-shadow-s); }
         .kn-canvas-zoom { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; padding: 4px; z-index: 3;
           background: var(--kn-bg); border: 1px solid var(--kn-border); border-radius: 8px; box-shadow: var(--kn-shadow-s); }
           .kn-c1 { --cc: 201, 74, 53; } .kn-c2 { --cc: 214, 120, 22; } .kn-c3 { --cc: 201, 162, 39; }
           .kn-c4 { --cc: 47, 138, 91; } .kn-c5 { --cc: 22, 156, 150; } .kn-c6 { --cc: 133, 92, 196; }
           .kn-cnode.kn-colored { border-color: rgb(var(--cc)); background: rgba(var(--cc), .07); }
           .kn-cnode.kn-colored.kn-sel { border-color: rgb(var(--cc)); box-shadow: 0 0 0 2px rgba(var(--cc), .35); }
           .kn-cnode.kn-ctarget { box-shadow: 0 0 0 3px var(--kn-accent); }
           .kn-canvas-colors { position: absolute; z-index: 5; display: flex; gap: 6px; padding: 6px 8px; background: var(--kn-bg2); border: 1px solid var(--kn-border); border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, .15); }
           .kn-sw { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer; background: rgb(var(--cc)); position: relative; }
           .kn-sw.kn-on { border-color: var(--kn-text); box-shadow: 0 0 0 2px var(--kn-bg2) inset; }
           .kn-sw-none { background: var(--kn-bg); border-color: var(--kn-border-strong); }
           .kn-sw-none::after { content: ""; position: absolute; left: 2px; right: 2px; top: 50%; height: 2px; background: var(--kn-muted); transform: rotate(-45deg); }
           .kn-sw-custom { background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); overflow: hidden; }
           .kn-sw-custom input { opacity: 0; width: 100%; height: 100%; cursor: pointer; }

           /* phones: sidebars become drawers, as in Obsidian mobile */
           .kn-mobile-only { display: none !important; }
           @media (max-width: 860px) {
             /* the ribbon stays: it carries the formatting buttons (font, alignment,
              R TL, colour); narrow, and it scrolls when the screen is short */*                                                                                 *
              .kn-ribbon-col { width: 40px; }
              .kn-ribbon { overflow-y: auto; gap: 2px; padding: 6px 0; }
              .kn-mobile-only { display: inline-flex !important; }
              .kn-side { position: absolute; top: 0; bottom: 0; z-index: 50; box-shadow: var(--kn-shadow-l); width: min(86vw, 320px) !important; }
              .kn-side-l { left: 0; } .kn-side-r { right: 0; }
              .kn-doc { width: calc(100% - 32px); }
              .kn-status { display: none; }
              .kn-prop-key { width: 7em; }
              .kn-tab { min-width: 90px; }
              .kn-group + .kn-group { display: none; }
              .kn-settings { flex-direction: column; }
              .kn-set-nav { width: 100%; max-height: 34%; border-right: 0; border-bottom: 1px solid var(--kn-border); }
              .kn-set-body { padding: 24px 16px 48px; }
           }

           /* Admin menu hidden from the workspace ribbon: only while the knowledge tab is shown */
           body.kn-panel-hidden:has(#tab-kn:not(.hidden)) #panelSide { display: none !important; }
           @media (max-width: 767px) { #knRbPanel { display: none; } }

           /* bottom row of the ribbon: same height and line as the panel menu's footer, so the line runs straight across */
           .kn-ribbon-foot { height: var(--kn-foot-h, 42px); flex: none; display: flex; align-items: center; justify-content: center; border-top: 1px solid var(--kn-border); }

           /* public Conocimiento reader (lector): the page's own card is the background */
           .kn-reader { background: transparent; }
           .kn-reader .kn-link.kn-broken { cursor: default; text-decoration: none; }

           /* --- Themes (Ajustes > Apariencia): html[data-kn-theme] overrides the
            p alette above; "" = default (follows the page light/dark mode). --*- */                                                                              *
            /* Pergamino */
            html[data-kn-theme="pergamino"] .kn-app, html[data-kn-theme="pergamino"] .kn-ac, html[data-kn-theme="pergamino"] .kn-menu, html[data-kn-theme="pergamino"] .kn-modal-bg, html[data-kn-theme="pergamino"] .kn-notice-box, html[data-kn-theme="pergamino"] .kn-pop, html[data-kn-theme="pergamino"] .kn-reader {
              --kn-bg: #fbf6ea; --kn-bg-alt: #f6efdf; --kn-bg2: #efe5cf; --kn-bg2-alt: #f8f1e2;
              --kn-border: #e2d4b6; --kn-border-strong: #d4c29d;
              --kn-text: #3b2f20; --kn-muted: #6e5a3e; --kn-faint: #ad9a7c;
              --kn-accent: #8a5a1a; --kn-accent-hover: #734a12; --kn-on-accent: #ffffff;
              --kn-hover: rgba(59, 47, 32, .07); --kn-active-hover: rgba(138, 90, 26, .10); --kn-select: rgba(138, 90, 26, .20);
              --kn-link: #8a5a1a; --kn-tag: #7a4e14; --kn-tag-bg: rgba(138, 90, 26, .10);
              --kn-hl: rgba(229, 172, 64, .28); --kn-code: #f6efdf; --kn-cover: rgba(226, 212, 182, .45);
              --kn-shadow-s: 0 1px 2px rgba(42, 37, 34, .1), 0 3.4px 6.7px rgba(42, 37, 34, .14), 0 15px 30px rgba(42, 37, 34, .2);
              --kn-shadow-l: 0 1.8px 7.3px rgba(42, 37, 34, .1), 0 6.3px 24.7px rgba(42, 37, 34, .14), 0 30px 90px rgba(42, 37, 34, .2);
              --kn-graph-line: #d4c29d; --kn-graph-node: #6e5a3e; --kn-graph-tag: #4f9e6b; --kn-graph-att: #d19a2a;
              --kn-scroll: rgba(59, 47, 32, .14);
              color-scheme: light;
            }
            /* Papel */
            html[data-kn-theme="papel"] .kn-app, html[data-kn-theme="papel"] .kn-ac, html[data-kn-theme="papel"] .kn-menu, html[data-kn-theme="papel"] .kn-modal-bg, html[data-kn-theme="papel"] .kn-notice-box, html[data-kn-theme="papel"] .kn-pop, html[data-kn-theme="papel"] .kn-reader {
              --kn-bg: #ffffff; --kn-bg-alt: #f7f7f8; --kn-bg2: #f0f0f2; --kn-bg2-alt: #fafafa;
              --kn-border: #e2e2e6; --kn-border-strong: #d0d0d6;
              --kn-text: #1f2126; --kn-muted: #5c6070; --kn-faint: #a2a6b3;
              --kn-accent: #3b6cc5; --kn-accent-hover: #2f5aa8; --kn-on-accent: #ffffff;
              --kn-hover: rgba(31, 33, 38, .07); --kn-active-hover: rgba(59, 108, 197, .10); --kn-select: rgba(59, 108, 197, .20);
              --kn-link: #3b6cc5; --kn-tag: #2f5aa8; --kn-tag-bg: rgba(59, 108, 197, .10);
              --kn-hl: rgba(229, 172, 64, .28); --kn-code: #f7f7f8; --kn-cover: rgba(226, 226, 230, .45);
              --kn-shadow-s: 0 1px 2px rgba(42, 37, 34, .1), 0 3.4px 6.7px rgba(42, 37, 34, .14), 0 15px 30px rgba(42, 37, 34, .2);
              --kn-shadow-l: 0 1.8px 7.3px rgba(42, 37, 34, .1), 0 6.3px 24.7px rgba(42, 37, 34, .14), 0 30px 90px rgba(42, 37, 34, .2);
              --kn-graph-line: #d0d0d6; --kn-graph-node: #5c6070; --kn-graph-tag: #4f9e6b; --kn-graph-att: #d19a2a;
              --kn-scroll: rgba(31, 33, 38, .14);
              color-scheme: light;
            }
            /* Arena */
            html[data-kn-theme="arena"] .kn-app, html[data-kn-theme="arena"] .kn-ac, html[data-kn-theme="arena"] .kn-menu, html[data-kn-theme="arena"] .kn-modal-bg, html[data-kn-theme="arena"] .kn-notice-box, html[data-kn-theme="arena"] .kn-pop, html[data-kn-theme="arena"] .kn-reader {
              --kn-bg: #fdf8ef; --kn-bg-alt: #f8f1e3; --kn-bg2: #f1e7d3; --kn-bg2-alt: #f9f3e8;
              --kn-border: #e5d8bf; --kn-border-strong: #d6c6a6;
              --kn-text: #2f2a22; --kn-muted: #665c4b; --kn-faint: #aa9f8b;
              --kn-accent: #1f8f7a; --kn-accent-hover: #187563; --kn-on-accent: #ffffff;
              --kn-hover: rgba(47, 42, 34, .07); --kn-active-hover: rgba(31, 143, 122, .10); --kn-select: rgba(31, 143, 122, .20);
              --kn-link: #1f8f7a; --kn-tag: #187563; --kn-tag-bg: rgba(31, 143, 122, .10);
              --kn-hl: rgba(229, 172, 64, .28); --kn-code: #f8f1e3; --kn-cover: rgba(229, 216, 191, .45);
              --kn-shadow-s: 0 1px 2px rgba(42, 37, 34, .1), 0 3.4px 6.7px rgba(42, 37, 34, .14), 0 15px 30px rgba(42, 37, 34, .2);
              --kn-shadow-l: 0 1.8px 7.3px rgba(42, 37, 34, .1), 0 6.3px 24.7px rgba(42, 37, 34, .14), 0 30px 90px rgba(42, 37, 34, .2);
              --kn-graph-line: #d6c6a6; --kn-graph-node: #665c4b; --kn-graph-tag: #4f9e6b; --kn-graph-att: #d19a2a;
              --kn-scroll: rgba(47, 42, 34, .14);
              color-scheme: light;
            }
            /* Lavanda */
            html[data-kn-theme="lavanda"] .kn-app, html[data-kn-theme="lavanda"] .kn-ac, html[data-kn-theme="lavanda"] .kn-menu, html[data-kn-theme="lavanda"] .kn-modal-bg, html[data-kn-theme="lavanda"] .kn-notice-box, html[data-kn-theme="lavanda"] .kn-pop, html[data-kn-theme="lavanda"] .kn-reader {
              --kn-bg: #fbf9ff; --kn-bg-alt: #f5f1fd; --kn-bg2: #ede7fa; --kn-bg2-alt: #f8f5fe;
              --kn-border: #ddd3f2; --kn-border-strong: #cbbdea;
              --kn-text: #2a2438; --kn-muted: #62587a; --kn-faint: #a69cbd;
              --kn-accent: #7a4fc4; --kn-accent-hover: #6640a8; --kn-on-accent: #ffffff;
              --kn-hover: rgba(42, 36, 56, .07); --kn-active-hover: rgba(122, 79, 196, .10); --kn-select: rgba(122, 79, 196, .20);
              --kn-link: #7a4fc4; --kn-tag: #6640a8; --kn-tag-bg: rgba(122, 79, 196, .10);
              --kn-hl: rgba(229, 172, 64, .28); --kn-code: #f5f1fd; --kn-cover: rgba(221, 211, 242, .45);
              --kn-shadow-s: 0 1px 2px rgba(42, 37, 34, .1), 0 3.4px 6.7px rgba(42, 37, 34, .14), 0 15px 30px rgba(42, 37, 34, .2);
              --kn-shadow-l: 0 1.8px 7.3px rgba(42, 37, 34, .1), 0 6.3px 24.7px rgba(42, 37, 34, .14), 0 30px 90px rgba(42, 37, 34, .2);
              --kn-graph-line: #cbbdea; --kn-graph-node: #62587a; --kn-graph-tag: #4f9e6b; --kn-graph-att: #d19a2a;
              --kn-scroll: rgba(42, 36, 56, .14);
              color-scheme: light;
            }
            /* Bosque */
            html[data-kn-theme="bosque"] .kn-app, html[data-kn-theme="bosque"] .kn-ac, html[data-kn-theme="bosque"] .kn-menu, html[data-kn-theme="bosque"] .kn-modal-bg, html[data-kn-theme="bosque"] .kn-notice-box, html[data-kn-theme="bosque"] .kn-pop, html[data-kn-theme="bosque"] .kn-reader {
              --kn-bg: #1c2420; --kn-bg-alt: #212b26; --kn-bg2: #27332d; --kn-bg2-alt: #2c3a33;
              --kn-border: #34443b; --kn-border-strong: #425448;
              --kn-text: #e6eee8; --kn-muted: #a9bcb0; --kn-faint: #6d8276;
              --kn-accent: #5fb37f; --kn-accent-hover: #72c491; --kn-on-accent: #0f1a14;
              --kn-hover: rgba(230, 238, 232, .07); --kn-active-hover: rgba(95, 179, 127, .14); --kn-select: rgba(95, 179, 127, .30);
              --kn-link: #7cc99a; --kn-tag: #8fd4a9; --kn-tag-bg: rgba(95, 179, 127, .16);
              --kn-hl: rgba(229, 172, 64, .28); --kn-code: #212b26; --kn-cover: rgba(12, 10, 9, .5);
              --kn-shadow-s: 0 1px 2px rgba(0, 0, 0, .1), 0 3.4px 6.7px rgba(0, 0, 0, .14), 0 15px 30px rgba(0, 0, 0, .2);
              --kn-shadow-l: 0 1.8px 7.3px rgba(0, 0, 0, .1), 0 6.3px 24.7px rgba(0, 0, 0, .14), 0 30px 90px rgba(0, 0, 0, .2);
              --kn-graph-line: #425448; --kn-graph-node: #a9bcb0; --kn-graph-tag: #6fc48c; --kn-graph-att: #e3c766;
              --kn-scroll: rgba(230, 238, 232, .14);
              color-scheme: dark;
            }
            /* Océano */
            html[data-kn-theme="oceano"] .kn-app, html[data-kn-theme="oceano"] .kn-ac, html[data-kn-theme="oceano"] .kn-menu, html[data-kn-theme="oceano"] .kn-modal-bg, html[data-kn-theme="oceano"] .kn-notice-box, html[data-kn-theme="oceano"] .kn-pop, html[data-kn-theme="oceano"] .kn-reader {
              --kn-bg: #172231; --kn-bg-alt: #1b2838; --kn-bg2: #213045; --kn-bg2-alt: #26374e;
              --kn-border: #2e4058; --kn-border-strong: #3a4f6b;
              --kn-text: #e3ebf5; --kn-muted: #a3b4c9; --kn-faint: #66788f;
              --kn-accent: #4f9fe0; --kn-accent-hover: #67aee6; --kn-on-accent: #0b1520;
              --kn-hover: rgba(227, 235, 245, .07); --kn-active-hover: rgba(79, 159, 224, .14); --kn-select: rgba(79, 159, 224, .30);
              --kn-link: #7ab8ec; --kn-tag: #8cc3f0; --kn-tag-bg: rgba(79, 159, 224, .16);
              --kn-hl: rgba(229, 172, 64, .28); --kn-code: #1b2838; --kn-cover: rgba(12, 10, 9, .5);
              --kn-shadow-s: 0 1px 2px rgba(0, 0, 0, .1), 0 3.4px 6.7px rgba(0, 0, 0, .14), 0 15px 30px rgba(0, 0, 0, .2);
              --kn-shadow-l: 0 1.8px 7.3px rgba(0, 0, 0, .1), 0 6.3px 24.7px rgba(0, 0, 0, .14), 0 30px 90px rgba(0, 0, 0, .2);
              --kn-graph-line: #3a4f6b; --kn-graph-node: #a3b4c9; --kn-graph-tag: #6fc48c; --kn-graph-att: #e3c766;
              --kn-scroll: rgba(227, 235, 245, .14);
              color-scheme: dark;
            }
            /* Medianoche */
            html[data-kn-theme="medianoche"] .kn-app, html[data-kn-theme="medianoche"] .kn-ac, html[data-kn-theme="medianoche"] .kn-menu, html[data-kn-theme="medianoche"] .kn-modal-bg, html[data-kn-theme="medianoche"] .kn-notice-box, html[data-kn-theme="medianoche"] .kn-pop, html[data-kn-theme="medianoche"] .kn-reader {
              --kn-bg: #13121a; --kn-bg-alt: #18171f; --kn-bg2: #1e1c27; --kn-bg2-alt: #24222e;
              --kn-border: #2d2a38; --kn-border-strong: #3a3647;
              --kn-text: #ece9f5; --kn-muted: #a9a4bd; --kn-faint: #6c6780;
              --kn-accent: #a07cf0; --kn-accent-hover: #b293f4; --kn-on-accent: #120e1c;
              --kn-hover: rgba(236, 233, 245, .07); --kn-active-hover: rgba(160, 124, 240, .14); --kn-select: rgba(160, 124, 240, .30);
              --kn-link: #b89cf5; --kn-tag: #c4acf7; --kn-tag-bg: rgba(160, 124, 240, .16);
              --kn-hl: rgba(229, 172, 64, .28); --kn-code: #18171f; --kn-cover: rgba(12, 10, 9, .5);
              --kn-shadow-s: 0 1px 2px rgba(0, 0, 0, .1), 0 3.4px 6.7px rgba(0, 0, 0, .14), 0 15px 30px rgba(0, 0, 0, .2);
              --kn-shadow-l: 0 1.8px 7.3px rgba(0, 0, 0, .1), 0 6.3px 24.7px rgba(0, 0, 0, .14), 0 30px 90px rgba(0, 0, 0, .2);
              --kn-graph-line: #3a3647; --kn-graph-node: #a9a4bd; --kn-graph-tag: #6fc48c; --kn-graph-att: #e3c766;
              --kn-scroll: rgba(236, 233, 245, .14);
              color-scheme: dark;
            }
            /* Carbón */
            html[data-kn-theme="carbon"] .kn-app, html[data-kn-theme="carbon"] .kn-ac, html[data-kn-theme="carbon"] .kn-menu, html[data-kn-theme="carbon"] .kn-modal-bg, html[data-kn-theme="carbon"] .kn-notice-box, html[data-kn-theme="carbon"] .kn-pop, html[data-kn-theme="carbon"] .kn-reader {
              --kn-bg: #1e1e1e; --kn-bg-alt: #232323; --kn-bg2: #2a2a2a; --kn-bg2-alt: #303030;
              --kn-border: #383838; --kn-border-strong: #464646;
              --kn-text: #ececec; --kn-muted: #ababab; --kn-faint: #717171;
              --kn-accent: #e8833a; --kn-accent-hover: #ef9654; --kn-on-accent: #1a0f06;
              --kn-hover: rgba(236, 236, 236, .07); --kn-active-hover: rgba(232, 131, 58, .14); --kn-select: rgba(232, 131, 58, .30);
              --kn-link: #f0a066; --kn-tag: #f3ad78; --kn-tag-bg: rgba(232, 131, 58, .16);
              --kn-hl: rgba(229, 172, 64, .28); --kn-code: #232323; --kn-cover: rgba(12, 10, 9, .5);
              --kn-shadow-s: 0 1px 2px rgba(0, 0, 0, .1), 0 3.4px 6.7px rgba(0, 0, 0, .14), 0 15px 30px rgba(0, 0, 0, .2);
              --kn-shadow-l: 0 1.8px 7.3px rgba(0, 0, 0, .1), 0 6.3px 24.7px rgba(0, 0, 0, .14), 0 30px 90px rgba(0, 0, 0, .2);
              --kn-graph-line: #464646; --kn-graph-node: #ababab; --kn-graph-tag: #6fc48c; --kn-graph-att: #e3c766;
              --kn-scroll: rgba(236, 236, 236, .14);
              color-scheme: dark;
            }
            /* Mar Muerto */
            html[data-kn-theme="marmuerto"] .kn-app, html[data-kn-theme="marmuerto"] .kn-ac, html[data-kn-theme="marmuerto"] .kn-menu, html[data-kn-theme="marmuerto"] .kn-modal-bg, html[data-kn-theme="marmuerto"] .kn-notice-box, html[data-kn-theme="marmuerto"] .kn-pop, html[data-kn-theme="marmuerto"] .kn-reader {
              --kn-bg: #211a12; --kn-bg-alt: #271f16; --kn-bg2: #2e251a; --kn-bg2-alt: #352b1f;
              --kn-border: #3f3324; --kn-border-strong: #4d3f2d;
              --kn-text: #efe3cd; --kn-muted: #bfae90; --kn-faint: #7e6e55;
              --kn-accent: #d4a24a; --kn-accent-hover: #ddb162; --kn-on-accent: #1e1408;
              --kn-hover: rgba(239, 227, 205, .07); --kn-active-hover: rgba(212, 162, 74, .14); --kn-select: rgba(212, 162, 74, .30);
              --kn-link: #e0b468; --kn-tag: #e6c07c; --kn-tag-bg: rgba(212, 162, 74, .16);
              --kn-hl: rgba(229, 172, 64, .28); --kn-code: #271f16; --kn-cover: rgba(12, 10, 9, .5);
              --kn-shadow-s: 0 1px 2px rgba(0, 0, 0, .1), 0 3.4px 6.7px rgba(0, 0, 0, .14), 0 15px 30px rgba(0, 0, 0, .2);
              --kn-shadow-l: 0 1.8px 7.3px rgba(0, 0, 0, .1), 0 6.3px 24.7px rgba(0, 0, 0, .14), 0 30px 90px rgba(0, 0, 0, .2);
              --kn-graph-line: #4d3f2d; --kn-graph-node: #bfae90; --kn-graph-tag: #6fc48c; --kn-graph-att: #e3c766;
              --kn-scroll: rgba(239, 227, 205, .14);
              color-scheme: dark;
            }
            /* Alto contraste */
            html[data-kn-theme="contraste"] .kn-app, html[data-kn-theme="contraste"] .kn-ac, html[data-kn-theme="contraste"] .kn-menu, html[data-kn-theme="contraste"] .kn-modal-bg, html[data-kn-theme="contraste"] .kn-notice-box, html[data-kn-theme="contraste"] .kn-pop, html[data-kn-theme="contraste"] .kn-reader {
              --kn-bg: #000000; --kn-bg-alt: #0a0a0a; --kn-bg2: #141414; --kn-bg2-alt: #1a1a1a;
              --kn-border: #5a5a5a; --kn-border-strong: #8a8a8a;
              --kn-text: #ffffff; --kn-muted: #e0e0e0; --kn-faint: #b0b0b0;
              --kn-accent: #ffd400; --kn-accent-hover: #ffe14d; --kn-on-accent: #000000;
              --kn-hover: rgba(255, 255, 255, .07); --kn-active-hover: rgba(255, 212, 0, .14); --kn-select: rgba(255, 212, 0, .30);
              --kn-link: #ffe14d; --kn-tag: #ffd400; --kn-tag-bg: rgba(255, 212, 0, .16);
              --kn-hl: rgba(229, 172, 64, .28); --kn-code: #0a0a0a; --kn-cover: rgba(12, 10, 9, .5);
              --kn-shadow-s: 0 1px 2px rgba(0, 0, 0, .1), 0 3.4px 6.7px rgba(0, 0, 0, .14), 0 15px 30px rgba(0, 0, 0, .2);
              --kn-shadow-l: 0 1.8px 7.3px rgba(0, 0, 0, .1), 0 6.3px 24.7px rgba(0, 0, 0, .14), 0 30px 90px rgba(0, 0, 0, .2);
              --kn-graph-line: #8a8a8a; --kn-graph-node: #e0e0e0; --kn-graph-tag: #6fc48c; --kn-graph-att: #e3c766;
              --kn-scroll: rgba(255, 255, 255, .14);
              color-scheme: dark;
            }
            .kn-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 12px 0; }
            .kn-theme { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 10px; border: 2px solid var(--kn-border); background: var(--kn-bg); cursor: pointer; text-align: left; color: var(--kn-text); }
            .kn-theme:hover { border-color: var(--kn-faint); }
            .kn-theme.kn-active { border-color: var(--kn-accent); }
            .kn-theme-prev { height: 56px; border-radius: 6px; display: flex; overflow: hidden; border: 1px solid rgba(0, 0, 0, .12); }
            .kn-theme-prev span { flex: 1; }
            .kn-theme-name { font-size: 13px; font-weight: 600; }

            /* --- phones and tablets ------------------------------------------------------- */
            .kn-scrim { display: none; }
            @media (max-width: 860px) {

              .kn-scrim.kn-on { display: block; position: absolute; inset: 0; z-index: 45; background: var(--kn-cover); animation: kn-fade .15s ease-out; }
              .kn-side:not(.kn-closed) { animation: kn-slide-l .18s ease-out; }
              .kn-side-r:not(.kn-closed) { animation-name: kn-slide-r; }
              /* 16px inputs: iOS Safari zooms the page into smaller ones */
              .kn-app input, .kn-app select, .kn-app textarea, .kn-modal-bg input, .kn-modal-bg select, .kn-modal-bg textarea { font-size: 16px; }
              /* finger-sized rows in the file tree and menus */
              .kn-tree-item { padding-top: 7px; padding-bottom: 7px; }
              .kn-menu-item { min-height: 40px; }
              /* settings: themes two per row with a lower preview */
              .kn-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
              .kn-theme-prev { height: 38px; }
              .kn-modal-bg { padding-top: 8vh; }
              .kn-settings { width: 96vw; height: 88vh; margin-top: -4vh; }
              .kn-graph-ctl:not(.kn-collapsed) { width: min(260px, calc(100% - 24px)); }
            }
            @keyframes kn-fade { from { opacity: 0; } to { opacity: 1; } }
            @keyframes kn-slide-l { from { transform: translateX(-24px); opacity: .6; } to { transform: none; opacity: 1; } }
            @keyframes kn-slide-r { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
            /* touch: the graph and the canvas take the gestures themselves (pinch, pan) */
            .kn-graph-wrap canvas, .kn-canvas { touch-action: none; }

            /* ribbon: font button shows a plain "F" */
            .kn-rb-font { font: 700 15px/1 Georgia, serif; }
            /* .tmd {rtl}…{/rtl}: right-to-left text inside the line */
            .kn-md .kn-rtl { direction: rtl; unicode-bidi: isolate; }
            /* .tmd paragraph format per line: {c} {r} {j} alignment, {rtl} direction
             ( editor lines and reader blocks) */                               *                                                                                 *
             .kn-al-left, .kn-al-center, .kn-al-right, .kn-al-justify, .kn-md .kn-dir-rtl { display: block; }
             .kn-al-left { text-align: left; } .kn-al-center { text-align: center; } .kn-al-right { text-align: right; } .kn-al-justify { text-align: justify; }
             .CodeMirror-line.kn-dir-rtl { direction: rtl; }
             .kn-ribbon .kn-icon.kn-on { color: var(--kn-accent); background: var(--kn-hover); }