/* ================= page ================= */
          body {
               margin: 0;
               background: #f1f3f6;
               font-family: var(--fable-ui-font, 'Noto Sans', 'Segoe UI', system-ui, Arial, sans-serif);
               color: #222f3e;
          }

          .demo {
               max-width: 1180px;
               margin: 26px auto;
               padding: 0 18px;
          }

          .demo-bar {
               display: flex;
               gap: 8px;
               align-items: center;
               margin-bottom: 14px;
               font-size: 13.5px;
               color: #556
          }

          .demo-bar button {
               border: 1px solid #cfd6df;
               background: #fff;
               border-radius: 6px;
               padding: 6px 14px;
               font-size: 13px;
               font-family: inherit;
               cursor: pointer
          }

          .demo-bar button.on {
               background: var(--fable-primary, #df3c2b);
               border-color: var(--fable-primary, #df3c2b);
               color: #fff
          }

          /* ================= editor shell (oxide-like skin) ================= */
          .tox {
               background: #fff;
               border: 1px solid #eeeeee;
               border-radius: 10px;
               box-shadow: 0 1px 2px rgba(34, 47, 62, .06);
               display: flex;
               flex-direction: column;
               font-family: var(--fable-ui-font, 'Noto Sans', 'Segoe UI', system-ui, Arial, sans-serif);
               position: relative;
          }

          .tox.fullscreen {
               position: fixed;
               inset: 0;
               z-index: 1000;
               border-radius: 0;
          }

          /* dialogs, popups and context toolbars mount on document.body, so they
             inherit the host page font — give them the editor UI font */
          .dlg,
          .pop,
          .imgctx,
          .selctx,
          .tblctx {
               font-family: var(--fable-ui-font, 'Noto Sans', 'Segoe UI', system-ui, Arial, sans-serif);
          }

          /* menubar */
          .mnb {
               display: flex;
               flex-wrap: wrap;
               padding: 5px 8px;
               gap: 1px;
               border-bottom: 1px solid #eeeeee;
          }

          .mnb button {
               border: 0;
               background: none;
               font-size: 14px;
               line-height: 1;
               font-family: inherit;
               color: #222f3e;
               padding: 5px 20px;
               border-radius: 3px;
               cursor: pointer;
          }

          .mnb button:hover,
          .mnb button.open {
               background: #f0f0f0;
          }

          /* toolbar — rounded pill bar with flat controls */
          .tbr {
               display: flex;
               flex-wrap: wrap;
               align-items: center;
               /* margin: 6px 10px 8px; */
               padding: 5px;
               gap: 7px 10px;
               /* border: 1px solid #e4e6ea; */
               border-radius: 12px;
               background: #fff;
               box-shadow: 0 1px 2px rgba(34, 47, 62, .04);
               position: relative;
          }

          /* responsive one-line toolbar: when the controls overflow a single row
             (mobile/tablet, or a narrow host container) the toolbar clips to one
             row and shows a trailing "…" button that expands the full set */
          .tbr.tbr-measure,
          .tbr.collapsible:not(.expanded) {
               flex-wrap: nowrap;
               overflow: hidden;
               padding-inline-end: 46px;
          }

          .tbr .tbr-more {
               display: none;
          }

          .tbr.collapsible .tbr-more {
               display: flex;
               position: absolute;
               inset-inline-end: 6px;
               top: 5px;
               background: var(--fable-tgrp-bg, #f1f3f6);
               border-radius: 20px;
          }

          .tbr.collapsible .tbr-more.on {
               background: color-mix(in srgb, var(--fable-primary, #df3c2b) 18%, #fff);
          }

          .tgrp {
               display: flex;
               align-items: center;
               padding: 0 5px;
               position: relative;
               background: var(--fable-tgrp-bg, #f1f3f6);
               border-radius: 20px;
          }

          /* .tgrp+.tgrp::before {
               content: "";
               position: absolute;
               inset-inline-start: 0;
               top: 7px;
               bottom: 7px;
               width: 1px;
               background: #e9ebee;
          } */

          .tbtn {
               display: flex;
               align-items: center;
               justify-content: center;
               gap: 0;
               min-width: 25px;
               height: 25px;
               padding: 5px;
               margin: 3px;
               border: 0;
               background: none;
               border-radius: 5px;
               cursor: pointer;
               color: #2f3744;
               position: relative;
          }

          .tbtn:hover {
               background: #f1f2f4;
          }

          .tbtn.on {
               background: color-mix(in srgb, var(--fable-primary, #df3c2b) 12%, #fff);
          }

          .tbtn:disabled {
               opacity: .4;
               cursor: default;
               background: none;
          }

          .tbtn svg {
               width: 21px;
               height: 21px;
               stroke: #2f3744;
               fill: none;
               stroke-width: 1.7;
               stroke-linecap: round;
               stroke-linejoin: round;
          }

          /* undo/redo swap sides under dir=rtl (normal flex reordering of the
             toolbar), but their glyphs stay fixed - without this, both arrows end
             up pointing at each other instead of outward from their new position */
          [dir=rtl] .tbtn[data-id=undo] svg,
          [dir=rtl] .tbtn[data-id=redo] svg {
               transform: scaleX(-1);
          }

          .tbtn svg .f {
               fill: #2f3744;
               stroke: none;
          }

          .tbtn .txt {
               font: 600 15.5px/1 Georgia, 'Times New Roman', serif;
          }

          .tbtn .txt.sans {
               font-family: Arial, sans-serif;
          }

          /* color underline bar inside buttons */
          .colorbar {
               position: absolute;
               bottom: 5px;
               left: 7px;
               right: 7px;
               height: 3px;
               border-radius: 1px;
               background: #000;
          }

          .tbtn.hasmenu .colorbar {
               left: auto;
               right: auto;
               inset-inline-start: 7px;
               inset-inline-end: 19px;
          }

          /* toolbar selects — flat, text + chevron */
          .tsel {
               display: flex;
               align-items: center;
               justify-content: space-between;
               gap: 7px;
               background: none;
               border: 0;
               border-radius: 8px;
               height: 32px;
               margin: 0 1px;
               padding: 0 8px;
               font-weight: 500;
               font-size: 13.5px;
               font-family: inherit;
               color: #2f3744;
               cursor: pointer;
          }

          .tsel:hover {
               background: #f1f2f4;
          }

          .tsel .lbl {
               white-space: nowrap;
               overflow: hidden;
               text-overflow: ellipsis;
               text-align: start;
          }

          .tsel .lbl.empty {
               color: #8b93a1;
          }

          .tsel svg {
               width: 9px;
               height: 9px;
               stroke: #7a828e;
               stroke-width: 2.2;
               fill: none;
               flex: none;
          }

          .tsel.w-font {
               width: 118px;
          }

          .tsel.w-size {
               width: 120px;
          }

          .tsel.w-block {
               width: 116px;
          }

          /* edit area */
          .earea {
               outline: none;
               overflow: auto;
               padding: 16px;
               height: 302px;
               font-family: Helvetica, Arial, sans-serif;
               font-size: 14px;
               line-height: 1.4;
               border-top: 1px solid #eeeeee;
          }

          .tox.fullscreen .earea {
               flex: 1;
               height: auto;
          }

          .earea p {
               margin: 0 0 1em;
          }

          .earea blockquote {
               margin: 0 0 1em;
               padding: 2px 20px 2px 44px;
               border-left: 3px solid var(--fable-primary, #df3c2b);
               position: relative;
               font-style: italic;
               color: #556;
          }

          .earea blockquote::before {
               content: "\201C";
               position: absolute;
               left: 12px;
               top: -6px;
               font-family: Georgia, 'Times New Roman', serif;
               font-style: normal;
               font-size: 34px;
               line-height: 1;
               color: var(--fable-primary, #df3c2b);
               opacity: .55;
          }

          .earea blockquote > :last-child::after {
               content: "\201D";
               font-family: Georgia, 'Times New Roman', serif;
               font-style: normal;
               font-size: 20px;
               color: var(--fable-primary, #df3c2b);
               opacity: .7;
               margin-inline-start: 2px;
          }

          .earea table {
               border-collapse: collapse;
          }

          .earea table td,
          .earea table th {
               padding: 4px 8px;
               min-width: 26px;
               overflow-wrap: break-word;
               word-break: break-word;
          }

          .earea img, .earea video {
               max-width: 100%;
               height: auto;
          }

          /* image / video upload placeholder */
          .earea .img-ph {
               display: flex;
               align-items: center;
               justify-content: center;
               gap: 9px;
               max-width: 360px;
               padding: 18px 14px;
               margin: 8px 0;
               border: 1.5px solid color-mix(in srgb, var(--fable-primary, #df3c2b) 45%, #fff);
               border-radius: 8px;
               background: #fbfdff;
               color: #7a828e;
               font-size: 13.5px;
               text-align: center;
               cursor: pointer;
               -webkit-user-select: none;
               user-select: none;
          }

          .earea .img-ph svg {
               width: 20px;
               height: 20px;
               flex: none;
          }

          .earea .img-ph svg .f {
               fill: #7a828e;
          }

          .earea .img-ph.active {
               outline: 2px solid var(--fable-primary, #df3c2b);
               outline-offset: 1px;
          }

          .earea .img-ph.uploading {
               cursor: wait;
               opacity: 0.75;
          }

          .earea .img-ph.uploading svg {
               animation: img-ph-spin 1s linear infinite;
               transform-origin: center;
          }

          @keyframes img-ph-spin {
               to { transform: rotate(360deg); }
          }

          .earea .img-ph.upload-error {
               border-color: #e03e2d;
               background: #fff5f5;
               color: #c92a2a;
          }

          .earea .img-ph.upload-error svg .f {
               fill: #c92a2a;
          }

          /* template blocks (image + heading/paragraph layouts) */
          .earea .tpl {
               margin: 0 0 1em;
          }

          .earea .tpl::after {
               content: "";
               display: block;
               clear: both;
          }

          .earea .tpl.tpl-selected {
               outline: 2px dashed color-mix(in srgb, var(--fable-primary, #df3c2b) 45%, #fff);
               outline-offset: 4px;
          }

          .earea .tpl-media {
               text-align: center;
               margin: 0 0 0.5em;
          }

          .earea .tpl-media img {
               display: inline-block;
               max-width: 100%;
          }

          .earea .tpl .img-ph {
               display: inline-flex;
               width: 300px;
               max-width: 100%;
               margin: 0;
               box-sizing: border-box;
          }

          /* floated media shrink-wraps to the image, so a small image leaves
             the text beside it and the paragraph overflows below it */
          .earea .tpl-img-left .tpl-media {
               float: left;
               max-width: 50%;
               margin: 0 1em 0.5em 0;
          }

          .earea .tpl-img-right .tpl-media {
               float: right;
               max-width: 50%;
               margin: 0 0 0.5em 1em;
          }

          .earea .tpl-img-left .img-ph,
          .earea .tpl-img-right .img-ph {
               width: 260px;
          }

          .earea .tpl-text > :first-child {
               margin-top: 0;
          }

          /* template picker (popup) — miniature previews of each layout */
          .tplpick {
               display: grid;
               grid-template-columns: 1fr 1fr;
               gap: 8px;
               padding: 8px;
          }

          .tpltile {
               display: flex;
               flex-direction: column;
               gap: 6px;
               width: 132px;
               padding: 6px;
               border: 1px solid #cfd6df;
               border-radius: 8px;
               background: #fff;
               cursor: pointer;
               font: inherit;
          }

          .tpltile:hover {
               border-color: var(--fable-primary, #df3c2b);
               background: color-mix(in srgb, var(--fable-primary, #df3c2b) 6%, #fff);
          }

          .tpllbl {
               font-size: 11px;
               color: #556;
               text-align: center;
          }

          .pv {
               display: flex;
               flex-direction: column;
               gap: 4px;
               height: 78px;
               padding: 7px;
               background: #f7f9fb;
               border-radius: 5px;
               box-sizing: border-box;
          }

          .pv-row {
               display: flex;
               gap: 5px;
               flex: 1;
               min-height: 0;
          }

          .pv-col {
               display: flex;
               flex-direction: column;
               gap: 4px;
               flex: 1;
          }

          .pv-img {
               background: #c9d4e0;
               border-radius: 3px;
               width: 42%;
               flex: none;
          }

          .pv-c .pv-img {
               width: 68%;
               height: 32px;
               align-self: center;
          }

          .pv-h {
               height: 7px;
               width: 55%;
               background: #8fa3b8;
               border-radius: 2px;
               flex: none;
          }

          .pv-l {
               height: 5px;
               background: #dbe3ec;
               border-radius: 2px;
               flex: none;
          }

          .earea table.tbl-selected {
               outline: 2px solid var(--fable-primary, #df3c2b);
               outline-offset: 1px;
          }

          .tbl-handle {
               position: absolute;
               width: 10px;
               height: 10px;
               background: var(--fable-primary, #df3c2b);
               border: 1px solid #fff;
               border-radius: 2px;
               box-shadow: 0 0 0 1px rgba(34, 47, 62, .25);
               z-index: 1150;
          }

          .tbl-colbar {
               position: absolute;
               width: 7px;
               margin-inline-start: -3px;
               z-index: 1140;
               cursor: col-resize;
               border-radius: 2px;
          }

          .tbl-colbar:hover,
          .tbl-colbar.active {
               background: rgba(0, 108, 231, .28);
          }

          /* border around the cell that holds the caret */
          .tbl-cellmark {
               position: absolute;
               pointer-events: none;
               border: 1.5px solid var(--fable-primary, #df3c2b);
               border-radius: 1px;
               z-index: 1145;
          }

          /* dashed highlight over the row/column a hovered operation targets */
          .tbl-opmark {
               position: absolute;
               pointer-events: none;
               border: 1.5px dashed var(--fable-primary, #df3c2b);
               background: rgba(0, 108, 231, .07);
               border-radius: 2px;
               z-index: 1144;
          }

          .tblctx {
               position: absolute;
               display: flex;
               align-items: center;
               gap: 1px;
               background: #fff;
               border-radius: 8px;
               box-shadow: 0 4px 14px rgba(34, 47, 62, .18), 0 0 0 1px rgba(34, 47, 62, .06);
               padding: 4px;
               z-index: 1160;
          }

          .tblctx button {
               display: flex;
               align-items: center;
               justify-content: center;
               width: 32px;
               height: 32px;
               border: 0;
               background: none;
               border-radius: 5px;
               cursor: pointer;
               color: #222f3e;
               padding: 0;
          }

          .tblctx button:hover {
               background: #f0f0f0;
          }

          .tblctx button svg {
               width: 20px;
               height: 20px;
               stroke: #222f3e;
               fill: none;
               stroke-width: 1.7;
               stroke-linecap: round;
               stroke-linejoin: round;
          }

          .tblctx button svg .f {
               fill: #222f3e;
               stroke: none;
          }

          .tblctx .sep {
               width: 1px;
               align-self: stretch;
               margin: 3px 3px;
               background: #eeeeee;
          }

          /* image resize / align toolbar */
          .earea img.img-selected {
               outline: 2px solid var(--fable-primary, #df3c2b);
               outline-offset: 1px;
          }

          /* video align toolbar */
          .earea video.vid-selected,
          .earea .video-embed.vid-selected {
               outline: 2px solid var(--fable-primary, #df3c2b);
               outline-offset: 1px;
          }

          /* embedded hosted players (YouTube & co.) */
          .earea .video-embed {
               display: inline-block;
               max-width: 100%;
          }

          .earea .video-embed iframe {
               /* clicks land on the wrapper so the embed can be selected/aligned */
               pointer-events: none;
               display: block;
               border: 0;
               max-width: 100%;
          }

          .earea .tpl-media video,
          .earea .tpl-media .video-embed {
               max-width: 100%;
          }

          /* inline code runs */
          .earea code {
               background: #f4f5f7;
               border: 1px solid #e4e7eb;
               border-radius: 4px;
               padding: 1px 5px;
               font: 0.9em Consolas, 'Courier New', monospace;
          }

          /* code sample blocks — header bar shows the language */
          .earea pre.code-block {
               position: relative;
               margin: 0.6em 0;
               padding: 36px 14px 12px;
               background: #f7f8fa;
               border: 1px solid #e4e7eb;
               border-radius: 8px;
               overflow-x: auto;
               font: 13px/1.55 Consolas, 'Courier New', monospace;
               white-space: pre;
               cursor: pointer;
               direction: ltr;
               text-align: left;
          }

          .earea pre.code-block::before {
               content: attr(data-lang-label);
               position: absolute;
               top: 0;
               left: 0;
               right: 0;
               padding: 5px 12px;
               font: 11px/1.4 var(--fable-ui-font, 'Noto Sans', 'Segoe UI', system-ui, Arial, sans-serif);
               letter-spacing: .4px;
               color: #667;
               background: #eef0f3;
               border-bottom: 1px solid #e4e7eb;
               border-radius: 7px 7px 0 0;
          }

          .earea pre.code-block code {
               background: none;
               border: 0;
               padding: 0;
               font: inherit;
          }

          .earea pre.code-block.code-selected {
               outline: 2px solid var(--fable-primary, #df3c2b);
               outline-offset: 1px;
          }

          .img-handle {
               position: absolute;
               width: 10px;
               height: 10px;
               background: var(--fable-primary, #df3c2b);
               border: 1px solid #fff;
               border-radius: 2px;
               box-shadow: 0 0 0 1px rgba(34, 47, 62, .25);
               z-index: 1150;
          }

          .img-handle-nw,
          .img-handle-se {
               cursor: nwse-resize;
          }

          .img-handle-ne,
          .img-handle-sw {
               cursor: nesw-resize;
          }

          .imgctx {
               position: absolute;
               display: flex;
               align-items: center;
               gap: 1px;
               background: #fff;
               border-radius: 8px;
               box-shadow: 0 4px 14px rgba(34, 47, 62, .18), 0 0 0 1px rgba(34, 47, 62, .06);
               padding: 4px;
               z-index: 1160;
          }

          .imgctx button {
               display: flex;
               align-items: center;
               justify-content: center;
               width: 32px;
               height: 32px;
               border: 0;
               background: none;
               border-radius: 5px;
               cursor: pointer;
               color: #222f3e;
               padding: 0;
          }

          .imgctx button:hover {
               background: #f0f0f0;
          }

          .imgctx button.on {
               background: color-mix(in srgb, var(--fable-primary, #df3c2b) 18%, #fff);
          }

          .imgctx button svg {
               width: 20px;
               height: 20px;
               stroke: #222f3e;
               fill: none;
               stroke-width: 1.7;
               stroke-linecap: round;
               stroke-linejoin: round;
          }

          .imgctx button svg .f {
               fill: #222f3e;
               stroke: none;
          }

          /* image placeholder toolbar: URL input mode */
          .imgctx input.urlinp {
               width: 240px;
               height: 30px;
               border: 1px solid #cfd6df;
               border-radius: 5px;
               padding: 0 9px;
               font-size: 13.5px;
               font-family: inherit;
               margin: 0 2px;
          }

          .imgctx input.urlinp.err {
               border-color: #e03e2d;
          }

          .imgctx button.txtbtn {
               width: auto;
               padding: 0 12px;
               font-size: 13.5px;
               font-family: inherit;
               white-space: nowrap;
          }

          /* text selection bubble toolbar — same light look as the other
             floating context toolbars (.imgctx) */
          .selctx {
               position: absolute;
               display: flex;
               align-items: center;
               gap: 1px;
               background: #fff;
               border-radius: 8px;
               box-shadow: 0 4px 14px rgba(34, 47, 62, .18), 0 0 0 1px rgba(34, 47, 62, .06);
               padding: 4px;
               z-index: 1160;
          }

          .selctx button {
               position: relative;
               display: flex;
               align-items: center;
               justify-content: center;
               min-width: 32px;
               height: 32px;
               padding: 0 7px;
               border: 0;
               background: none;
               border-radius: 5px;
               cursor: pointer;
               color: #222f3e;
          }

          .selctx button:hover {
               background: #f0f0f0;
          }

          .selctx button.on {
               background: color-mix(in srgb, var(--fable-primary, #df3c2b) 18%, #fff);
          }

          .selctx button svg {
               width: 18px;
               height: 18px;
               stroke: #222f3e;
               fill: none;
               stroke-width: 1.7;
               stroke-linecap: round;
               stroke-linejoin: round;
          }

          .selctx button svg .f {
               fill: #222f3e;
               stroke: none;
          }

          .selctx .sep {
               width: 1px;
               align-self: stretch;
               margin: 3px 3px;
               background: #eeeeee;
          }

          .selctx .colorbar {
               position: absolute;
               bottom: 4px;
               left: 7px;
               right: 7px;
               height: 3px;
               border-radius: 1px;
               background: #000;
          }

          .earea hr.pagebreak {
               border: 0;
               border-top: 2px dashed #aab2bd;
               margin: 14px 0;
               page-break-after: always;
          }

          .earea:focus {}

          /* statusbar */
          .sbar {
               display: flex;
               align-items: center;
               border-top: 1px solid #eeeeee;
               height: 32px;
               padding: 0 10px;
               font-size: 13px;
               color: #7a828e;
               position: relative;
          }

          .sbar .mid {
               position: absolute;
               left: 0;
               right: 0;
               text-align: center;
               pointer-events: none;
          }

          .sbar .words {
               margin-inline-start: auto;
               z-index: 1;
          }

          .sbar .grip {
               width: 16px;
               height: 16px;
               margin-inline-start: 8px;
               cursor: ns-resize;
               z-index: 1;
               display: flex;
               align-items: flex-end;
               justify-content: flex-end;
          }

          .sbar .grip svg {
               width: 11px;
               height: 11px;
               stroke: #9aa2ac;
               stroke-width: 1.6;
          }

          /* ================= popups / menus ================= */
          .pop {
               position: absolute;
               z-index: 1200;
               background: #fff;
               border-radius: 8px;
               padding: 6px;
               box-shadow: 0 6px 18px rgba(34, 47, 62, .16), 0 0 0 1px rgba(34, 47, 62, .07);
               min-width: 160px;
               max-height: 70vh;
               overflow: auto;
          }

          .pop .mi {
               display: flex;
               align-items: center;
               gap: 9px;
               width: 100%;
               min-height: 32px;
               border: 0;
               background: none;
               padding: 6px 10px;
               border-radius: 5px;
               font-size: 14px;
               font-family: inherit;
               color: #222f3e;
               cursor: pointer;
               text-align: start;
               white-space: nowrap;
          }

          .pop .mi:hover {
               background: #f0f0f0;
          }

          .pop .mi.on {
               background: color-mix(in srgb, var(--fable-primary, #df3c2b) 18%, #fff);
          }

          .pop .mi .ic {
               width: 20px;
               flex: none;
               display: flex;
          }

          .pop .mi .ic svg {
               width: 27px;
               height: 27px;
               stroke: #222f3e;
               fill: none;
               stroke-width: 1.7;
               stroke-linecap: round;
               stroke-linejoin: round;
          }

          .pop .mi .ic svg .f {
               fill: #222f3e;
               stroke: none;
          }

          .pop .mi .sc {
               margin-inline-start: auto;
               color: #9aa2ac;
               font-size: 12.5px;
               padding-inline-start: 22px;
               min-width: 46px;
               text-align: end;
          }

          .pop .sep {
               height: 1px;
               background: #ebedf0;
               margin: 5px 8px;
          }

          .mi-grid {
               display: grid;
               grid-template-columns: 1fr 1fr;
               gap: 2px;
          }

          /* flyout submenus */
          .pop.sub {
               z-index: 1210;
          }

          .pop .mi .subarrow {
               margin-inline-start: auto;
               padding-inline-start: 18px;
               display: flex;
               align-items: center;
          }

          .pop .mi .subarrow svg {
               width: 10px;
               height: 10px;
               stroke: #7a828e;
               stroke-width: 2;
               fill: none;
               transform: rotate(-90deg);
          }

          .pop[dir=rtl] .mi .subarrow svg {
               transform: rotate(90deg);
          }

          .pop .mi .prev {
               font-size: 14px
          }

          /* color palette */
          .cpal {
               display: grid;
               grid-template-columns: repeat(5, 34px);
               justify-content: space-between;
               /* gap: 4px;
               padding: 6px; */
                   border-radius: 5px;
    overflow: hidden;
          }

          .cpal button {
               width: 34px;
               height: 34px;
               border: none;
               /* border-radius: 3px; */
               cursor: pointer;
               padding: 0;
               transition: transform .06s ease;
          }

          .cpal button:hover {
               transform: scale(0.9);
               border-radius: 3px;
          }

          /* custom color footer: current color, no-color, custom-color wheel */
          .cfoot {
               display: flex;
               align-items: center;
               justify-content: space-between;
               padding: 6px;
          }

          .cswatch {
               width: 26px;
               height: 26px;
               flex: none;
               border: 1px solid rgba(34, 47, 62, .18);
               border-radius: 5px;
               padding: 0;
               position: relative;
          }

          .cswatch.cur {
               cursor: default;
          }

          .cswatch.cur svg {
               position: absolute;
               inset: 0;
               margin: auto;
               width: 14px;
               height: 14px;
               stroke: #fff;
               fill: none;
               stroke-width: 2.4;
               stroke-linecap: round;
               stroke-linejoin: round;
               filter: drop-shadow(0 0 1px rgba(0, 0, 0, .5));
          }

          .cswatch.nocolor {
               cursor: pointer;
               background: #fff;
          }

          .cswatch.nocolor::after {
               content: "";
               position: absolute;
               inset: 1px;
               border-radius: 3px;
               background: linear-gradient(to top left, transparent calc(50% - 1px), #e03e2d calc(50% - 1px), #e03e2d calc(50% + 1px), transparent calc(50% + 1px));
          }

          .cswatch.nocolor:hover {
               border-color: rgba(34, 47, 62, .35);
          }

          .cwheel {
               cursor: pointer;
               display: flex;
               align-items: center;
               justify-content: center;
          }

          .cwheel:hover {
               border-color: rgba(34, 47, 62, .35);
          }

          .cwheel svg {
               width: 20px;
               height: 20px;
               stroke: #556;
               fill: none;
               stroke-width: 1.6;
               stroke-linecap: round;
               stroke-linejoin: round;
          }

          .cwheel svg .f {
               fill: #556;
               stroke: none;
          }

          .cwheel input[type=color] {
               position: absolute;
               width: 1px;
               height: 1px;
               opacity: 0;
               overflow: hidden;
               border: 0;
               padding: 0;
          }

          .tsel.w-size {
               width: 58px;
          }

          /* toolbar buttons that open a menu */
          .tbtn.hasmenu {
               gap: 4px;
               padding: 0 7px;
          }

          .tbtn.hasmenu svg:last-child {
               width: 9px;
               height: 9px;
               stroke: #7a828e;
               stroke-width: 2.2;
               flex: none;
          }

          /* quick color chips */
          .cchip {
               width: 23px;
               height: 23px;
               flex: none;
               border: 0;
               border-radius: 20px;
               margin: 0 3px;
               padding: 0;
               cursor: pointer;
               box-shadow: inset 0 0 0 1px rgba(34, 47, 62, .08);
               transition: transform .08s ease;
          }

          .cchip:hover {
               transform: scale(1.1);
          }

          .cchip.more {
               display: flex;
               align-items: center;
               justify-content: center;
               background: #222f3e;
          }

          .cchip.more svg {
               width: 11px;
               height: 11px;
               stroke: #fff;
               stroke-width: 2.4;
               fill: none;
               stroke-linecap: round;
               stroke-linejoin: round;
               transform: rotate(-90deg);
          }

          [dir=rtl] .cchip.more svg {
               transform: rotate(90deg);
          }

          /* selection toolbar icons with text glyphs */
          .selctx button svg text {
               fill: #222f3e;
          }

          /* revision history */
          .revwrap {
               display: flex;
               gap: 12px;
               min-width: 560px;
               max-width: 82vw;
          }

          .revlist {
               width: 230px;
               flex: none;
               max-height: 48vh;
               overflow: auto;
               display: flex;
               flex-direction: column;
               gap: 2px;
          }

          .revlist button {
               display: flex;
               flex-direction: column;
               align-items: flex-start;
               gap: 2px;
               text-align: start;
               border: 0;
               background: none;
               border-radius: 5px;
               padding: 8px 10px;
               font-size: 13.5px;
               font-family: inherit;
               color: #222f3e;
               cursor: pointer;
          }

          .revlist button:hover {
               background: #f0f0f0;
          }

          .revlist button.on {
               background: color-mix(in srgb, var(--fable-primary, #df3c2b) 18%, #fff);
          }

          .revlist button .wc {
               font-size: 12px;
               color: #7a828e;
          }

          .revlist button.revrestore {
               display: block;
               text-align: center;
               margin-top: 8px;
               border: 1px solid var(--fable-primary, #df3c2b);
               background: var(--fable-primary, #df3c2b);
               color: #fff;
               padding: 8px 12px;
               border-radius: 6px;
          }

          .revlist button.revrestore:disabled {
               opacity: .45;
               cursor: default;
          }

          .revprev {
               flex: 1;
               min-width: 300px;
               max-height: 48vh;
               overflow: auto;
               border: 1px solid #e3e3e3;
               border-radius: 6px;
               padding: 12px;
               font-family: Helvetica, Arial, sans-serif;
               font-size: 14px;
          }

          /* char / emoji map: fixed category tabs left, glyph grid right */
          .chmap {
               display: flex;
               width: 560px;
               max-width: 76vw;
               height: 320px;
               max-height: 46vh;
          }

          .chmap .chtabs {
               flex: 0 0 158px;
               display: flex;
               flex-direction: column;
               gap: 2px;
               overflow-y: auto;
               padding: 6px 8px 6px 0;
               border-inline-end: 1px solid #e3e8ee;
          }

          .chmap .chtabs button {
               border: 0;
               background: none;
               text-align: start;
               padding: 8px 10px;
               border-radius: 6px;
               font-size: 13.5px;
               font-family: inherit;
               color: #222f3e;
               cursor: pointer;
               white-space: nowrap;
          }

          .chmap .chtabs button:hover {
               background: #f0f0f0;
          }

          .chmap .chtabs button.on {
               background: color-mix(in srgb, var(--fable-primary, #df3c2b) 12%, #fff);
               color: var(--fable-primary, #df3c2b);
               font-weight: 600;
          }

          .chmap .chpanel {
               flex: 1;
               overflow-y: auto;
               padding: 6px 0 6px 8px;
          }

          .chmap .chgrid {
               grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
               padding: 0;
          }

          .chmap .chgrid.emgrid {
               grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
          }

          .chmap .chgrid.emgrid button {
               width: 36px;
               height: 36px;
               font-size: 20px;
          }

          .chgrid {
               display: grid;
               grid-template-columns: repeat(8, 30px);
               gap: 2px;
               padding: 6px;
          }

          .chgrid button {
               width: 30px;
               height: 30px;
               border: 0;
               background: none;
               border-radius: 3px;
               font-size: 15px;
               cursor: pointer;
          }

          .chgrid button:hover {
               background: #f0f0f0;
          }

          /* table grid picker */
          .tgridwrap {
               padding: 8px;
          }

          .tgrid {
               display: grid;
               grid-template-columns: repeat(10, 16px);
               gap: 2px;
               direction: ltr;
          }

          .tgrid span {
               width: 16px;
               height: 16px;
               border: 1px solid #c9d1da;
               border-radius: 2px;
               background: #fff;
          }

          .tgrid span.hot {
               background: color-mix(in srgb, var(--fable-primary, #df3c2b) 18%, #fff);
               border-color: color-mix(in srgb, var(--fable-primary, #df3c2b) 55%, #fff);
          }

          .tgridlbl {
               text-align: center;
               font-size: 12.5px;
               color: #556;
               padding-top: 6px;
          }

          /* ================= dialogs ================= */
          .ovl {
               position: fixed;
               inset: 0;
               background: rgba(34, 47, 62, .5);
               z-index: 1500;
               display: flex;
               align-items: flex-start;
               justify-content: center;
               padding-top: 9vh;
          }

          .dlg {
               background: #fff;
               border-radius: 10px;
               min-width: 420px;
               max-width: 90vw;
               max-height: 80vh;
               display: flex;
               flex-direction: column;
               box-shadow: 0 16px 32px rgba(0, 0, 0, .25);
          }

          .dlg header {
               display: flex;
               align-items: center;
               justify-content: space-between;
               padding: 14px 16px;
               font-size: 18px;
               font-weight: 600;
          }

          .dlg header button {
               border: 0;
               background: none;
               font-size: 20px;
               cursor: pointer;
               color: #222f3e;
               border-radius: 3px;
               width: 32px;
               height: 32px;
          }

          .dlg header button:hover {
               background: #f0f0f0;
          }

          .dlg .body {
               padding: 0 16px 8px;
               overflow: auto;
               font-size: 14px;
          }

          .dlg footer {
               display: flex;
               justify-content: flex-end;
               gap: 8px;
               padding: 12px 16px;
          }

          .dlg footer button {
               border-radius: 6px;
               padding: 8px 16px;
               font-size: 14px;
               font-family: inherit;
               cursor: pointer;
               border: 1px solid #cfd6df;
               background: #fff;
               color: #222f3e;
          }

          .dlg footer button.pri {
               background: var(--fable-primary, #df3c2b);
               border-color: var(--fable-primary, #df3c2b);
               color: #fff;
          }

          .dlg textarea {
               width: 640px;
               max-width: 80vw;
               height: 300px;
               font: 12.5px/1.5 Consolas, monospace;
               border: 1px solid #cfd6df;
               border-radius: 6px;
               padding: 10px;
               resize: vertical;
          }

          /* tabbed dialogs (insert/edit video) */
          .dlg .dtabs {
               display: flex;
               gap: 2px;
               border-bottom: 1px solid #e3e8ee;
               margin-bottom: 14px;
          }

          .dlg .dtabs button {
               border: 0;
               background: none;
               padding: 8px 14px;
               font-size: 14px;
               font-family: inherit;
               color: #556;
               cursor: pointer;
               border-bottom: 2px solid transparent;
               margin-bottom: -1px;
          }

          .dlg .dtabs button.on {
               color: var(--fable-primary, #df3c2b);
               border-bottom-color: var(--fable-primary, #df3c2b);
               font-weight: 600;
          }

          .dlg .dtabbody {
               width: 460px;
               max-width: 76vw;
               min-height: 150px;
          }

          .dlg .dtabpanel textarea {
               width: 100%;
               box-sizing: border-box;
          }

          .dlg .dfield {
               display: flex;
               flex-direction: column;
               gap: 4px;
               margin-bottom: 12px;
               flex: 1;
          }

          .dlg .dfield label {
               font-size: 13px;
               color: #445;
          }

          .dlg .dfield input,
          .dlg .dfield select {
               border: 1px solid #cfd6df;
               border-radius: 6px;
               padding: 8px 10px;
               font-size: 14px;
               font-family: inherit;
               min-width: 0;
               background: #fff;
               color: #222f3e;
          }

          /* custom dropdown for dialog fields */
          .dlg .dsel {
               position: relative;
          }

          .dlg .dsel-btn {
               display: flex;
               align-items: center;
               justify-content: space-between;
               gap: 8px;
               width: 100%;
               box-sizing: border-box;
               border: 1px solid #cfd6df;
               border-radius: 6px;
               padding: 8px 10px;
               font-size: 14px;
               font-family: inherit;
               background: #fff;
               color: #222f3e;
               cursor: pointer;
               text-align: start;
          }

          .dlg .dsel-btn svg {
               width: 10px;
               height: 10px;
               stroke: #222f3e;
               stroke-width: 2;
               fill: none;
               flex: none;
               transition: transform .15s;
          }

          .dlg .dsel.open .dsel-btn {
               border-color: var(--fable-primary, #df3c2b);
          }

          .dlg .dsel.open .dsel-btn svg {
               transform: rotate(180deg);
          }

          .dlg .dsel-list {
               display: none;
               position: absolute;
               top: calc(100% + 4px);
               inset-inline-start: 0;
               min-width: 100%;
               max-height: 220px;
               overflow-y: auto;
               background: #fff;
               border-radius: 8px;
               box-shadow: 0 6px 20px rgba(34, 47, 62, .18), 0 0 0 1px rgba(34, 47, 62, .08);
               padding: 4px;
               z-index: 10;
          }

          .dlg .dsel.open .dsel-list {
               display: block;
          }

          .dlg .dsel-list button {
               display: block;
               width: 100%;
               text-align: start;
               border: 0;
               background: none;
               border-radius: 5px;
               padding: 7px 10px;
               font-size: 13.5px;
               font-family: inherit;
               color: #222f3e;
               cursor: pointer;
          }

          .dlg .dsel-list button:hover {
               background: #f0f0f0;
          }

          .dlg .dsel-list button.on {
               background: color-mix(in srgb, var(--fable-primary, #df3c2b) 12%, #fff);
               color: var(--fable-primary, #df3c2b);
               font-weight: 600;
          }

          .dlg textarea.code-input {
               width: 560px;
               max-width: 76vw;
               height: 220px;
               font: 13px/1.5 Consolas, 'Courier New', monospace;
               white-space: pre;
               direction: ltr;
               text-align: left;
          }

          .dlg .drow {
               display: flex;
               gap: 10px;
               align-items: flex-end;
          }

          .dlg button.txtbtn {
               border: 1px solid #cfd6df;
               background: #fff;
               color: #222f3e;
               border-radius: 6px;
               padding: 8px 12px;
               font-size: 13.5px;
               font-family: inherit;
               cursor: pointer;
               white-space: nowrap;
          }

          .dlg button.txtbtn:hover {
               background: #f0f4f9;
          }

          .dlg table.kbd {
               border-collapse: collapse;
               width: 100%;
          }

          .dlg table.kbd td {
               border-bottom: 1px solid #eee;
               padding: 7px 4px;
          }

          .dlg table.kbd td:last-child {
               text-align: end;
               color: #556;
          }

          /* scoped (not a bare kbd selector) and with its own explicit color -
             a host page's own kbd styling can otherwise out-specificity a bare
             tag selector and override just one of background/color, leaving
             light-on-light text */
          .dlg kbd {
               background: #f3f4f6;
               color: #444c58;
               border-radius: 4px;
               padding: 2px 7px;
               font: 12px Consolas, monospace;
               border: 1px solid #dde2e8;
          }

          /* custom tooltip bubble — replaces the browser's native title tooltips
             across the whole editor UI (toolbar, menus, popups, context toolbars) */
          .etip {
               position: fixed;
               z-index: 2147483000;
               max-width: 260px;
               padding: 5px 10px;
               border-radius: 6px;
               background: #222f3e;
               color: #fff;
               font-family: var(--fable-ui-font, 'Noto Sans', 'Segoe UI', system-ui, Arial, sans-serif);
               font-size: 12px;
               line-height: 1.4;
               letter-spacing: .1px;
               box-shadow: 0 4px 16px rgba(34, 47, 62, .3);
               pointer-events: none;
               opacity: 0;
               transform: translateY(3px);
               transition: opacity .12s ease, transform .12s ease;
          }

          .etip.show {
               opacity: 1;
               transform: none;
          }