/**
 * The ribbon surface's markup and stylesheet — the two static assets `ribbon.ts`
 * wires behaviour onto.
 *
 * They live in their own module because they are *data*: one HTML template and
 * one stylesheet, both authored to be read as a unit. Keeping them out of
 * `ribbon.ts` leaves that file as pure wiring.
 *
 * ── Addressing ──────────────────────────────────────────────────────────────
 * Every control carries `data-dxr="<name>"`. `ribbon.ts` walks those on mount
 * and stamps `id = idPrefix + name`, so the historical element ids from the
 * standalone demo page survive (specs and bookmarklets keep working) while a
 * second ribbon on the same page can take a prefix and stay collision-free.
 * `data-dxr-list` does the same job for the `<input list>` → `<datalist id>`
 * link, which is by-id and cannot use a data attribute directly.
 *
 * ── Responsiveness ──────────────────────────────────────────────────────────
 * Layout keys off `data-chrome` on the root ("full" | "compact"), which
 * `ribbon.ts` sets from a ResizeObserver on the ROOT rather than from viewport
 * media queries. A narrow embed inside a wide desktop page is narrow, and only
 * container measurement gets that right. Compact is the base (mobile-first);
 * `[data-chrome="full"]` adds back the desktop affordances.
 */
/** Bumped whenever RIBBON_CSS changes, so a stale injected stylesheet is replaced. */
export declare const RIBBON_STYLE_VERSION = "5";
export declare const RIBBON_STYLE_ATTR = "data-docxodus-ribbon-styles";
/**
 * The ribbon stylesheet. Every rule is scoped under `.dxr` so injecting it is
 * safe on a host page we do not control — the same guarantee `embed.ts` gives
 * for the converter's document CSS, achieved here by authoring rather than by
 * rewriting.
 */
export declare const RIBBON_CSS = "\n.dxr {\n  --dxr-ink: #101418;\n  --dxr-sheet: #ffffff;\n  --dxr-chrome: #eef1f6;\n  --dxr-chrome-sunk: #e3e8f0;\n  --dxr-rule: #d3dae4;\n  --dxr-accent: #1f5fd0;\n  --dxr-wash: #dde8fb;\n  --dxr-muted: #5d6975;\n  --dxr-data: #0b6f6a;\n  --dxr-danger: #a3341f;\n  --dxr-desk: #dfe3ea;\n  --dxr-ui: system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n  --dxr-mono: ui-monospace, SFMono-Regular, \"Cascadia Mono\", Consolas, monospace;\n  --dxr-tap: 30px;\n\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n  isolation: isolate;\n  font-family: var(--dxr-ui);\n  color: var(--dxr-ink);\n  background: var(--dxr-desk);\n  -webkit-text-size-adjust: 100%;\n}\n.dxr *, .dxr *::before, .dxr *::after { box-sizing: border-box; }\n\n/* Touch devices get bigger hit targets everywhere the token is used. */\n@media (pointer: coarse) { .dxr { --dxr-tap: 40px; } }\n\n/* \u2500\u2500 Chrome shell \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.dxr-chrome {\n  position: sticky;\n  top: 0;\n  z-index: 10;\n  flex: 0 0 auto;\n  background: var(--dxr-chrome);\n  border-bottom: 1px solid var(--dxr-rule);\n}\n\n.dxr-titlebar {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 6px 10px 0;\n}\n.dxr-brand {\n  display: flex;\n  align-items: baseline;\n  gap: 7px;\n  min-width: 0;\n  font-size: 13px;\n  font-weight: 600;\n  letter-spacing: -.01em;\n}\n.dxr-brand .dxr-mark {\n  flex: 0 0 auto;\n  width: 9px;\n  height: 9px;\n  background: var(--dxr-accent);\n  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);\n}\n.dxr-brand .dxr-docname {\n  overflow: hidden;\n  max-width: 22ch;\n  color: var(--dxr-muted);\n  font-size: 12px;\n  font-weight: 400;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.dxr-quick { flex: 0 0 auto; display: flex; align-items: center; gap: 3px; }\n.dxr-titlebar .dxr-spacer { flex: 1; }\n.dxr-status {\n  overflow: hidden;\n  max-width: 42ch;\n  color: var(--dxr-muted);\n  font-family: var(--dxr-mono);\n  font-size: 11.5px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* \u2500\u2500 Tab strip \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.dxr-tabs {\n  display: flex;\n  gap: 1px;\n  padding: 6px 10px 0;\n  overflow-x: auto;\n  scrollbar-width: none;\n}\n.dxr-tabs::-webkit-scrollbar { display: none; }\n.dxr-tab {\n  flex: 0 0 auto;\n  padding: 6px 15px 7px;\n  border: 1px solid transparent;\n  border-bottom: none;\n  border-radius: 5px 5px 0 0;\n  background: none;\n  color: var(--dxr-muted);\n  font: inherit;\n  font-size: 12.5px;\n  cursor: pointer;\n}\n.dxr-tab:hover { color: var(--dxr-ink); background: #e6ebf3; }\n.dxr-tab[aria-selected=\"true\"] {\n  color: var(--dxr-ink);\n  font-weight: 600;\n  background: var(--dxr-chrome-sunk);\n  border-color: var(--dxr-rule);\n  box-shadow: inset 0 2px 0 var(--dxr-accent);\n}\n/* Contextual tab \u2014 present only while the caret is inside a table. */\n.dxr-tab[data-contextual] { color: var(--dxr-accent); }\n.dxr-tab[hidden] { display: none; }\n\n/* \u2500\u2500 Ribbon panels \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.dxr-ribbon { background: var(--dxr-chrome-sunk); border-top: 1px solid var(--dxr-rule); }\n.dxr-ribbon[aria-disabled=\"true\"] { opacity: .45; pointer-events: none; }\n.dxr-panel {\n  display: none;\n  align-items: stretch;\n  padding: 7px 10px 8px;\n  overflow-x: auto;\n  overscroll-behavior-x: contain;\n}\n.dxr-panel[data-active] { display: flex; }\n/* Group label sits ABOVE its controls (a spec-sheet reading), with hairline\n   dividers rather than boxes \u2014 lighter than the boxed, label-under convention. */\n.dxr-group {\n  flex: 0 0 auto;\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n  padding: 0 13px;\n  border-right: 1px solid var(--dxr-rule);\n}\n.dxr-group:last-child { border-right: none; }\n.dxr-group:first-child { padding-left: 0; }\n.dxr-glabel {\n  color: var(--dxr-muted);\n  font-size: 9.5px;\n  font-weight: 600;\n  letter-spacing: .11em;\n  text-transform: uppercase;\n}\n.dxr-row { display: flex; gap: 3px; align-items: center; }\n\n/* \u2500\u2500 Controls \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.dxr button, .dxr label.dxr-btn {\n  min-height: var(--dxr-tap);\n  padding: 5px 9px;\n  border: 1px solid transparent;\n  border-radius: 4px;\n  background: none;\n  color: var(--dxr-ink);\n  font: inherit;\n  font-size: 13px;\n  line-height: 1.15;\n  cursor: pointer;\n}\n.dxr label.dxr-btn { display: inline-flex; align-items: center; }\n.dxr button:hover, .dxr label.dxr-btn:hover { background: #d6deea; }\n.dxr button:active { background: #c8d3e3; }\n.dxr button:disabled { opacity: .38; cursor: default; background: none; }\n.dxr button.dxr-on { color: var(--dxr-accent); background: var(--dxr-wash); border-color: #b3ccf2; }\n.dxr-quick button, .dxr-quick label.dxr-btn {\n  padding: 4px 10px;\n  border-color: var(--dxr-rule);\n  background: #f7f9fc;\n  font-size: 12.5px;\n}\n.dxr-quick button:hover, .dxr-quick label.dxr-btn:hover { background: #fff; border-color: #b9c4d4; }\n.dxr-quick button:disabled:hover { background: #f7f9fc; border-color: var(--dxr-rule); }\n.dxr button.dxr-icon { min-width: var(--dxr-tap); text-align: center; }\n/* Icons are inline SVG drawn from the same shapes the control acts on (text lines,\n   rules), so alignment and indent read at a glance instead of relying on arrow\n   glyphs that collide with undo/redo. currentColor keeps them in step with state. */\n.dxr button svg { display: block; margin: 0 auto; fill: currentColor; }\n.dxr button.dxr-wide { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }\n.dxr button.dxr-danger:hover { color: var(--dxr-danger); background: #f6dcd6; }\n.dxr select, .dxr input[type=\"number\"], .dxr input[type=\"text\"] {\n  min-height: var(--dxr-tap);\n  padding: 4px 6px;\n  border: 1px solid var(--dxr-rule);\n  border-radius: 4px;\n  background: #f7f9fc;\n  color: var(--dxr-ink);\n  font: inherit;\n  font-size: 12.5px;\n}\n.dxr select:focus-visible, .dxr input:focus-visible, .dxr button:focus-visible,\n.dxr .dxr-tab:focus-visible, .dxr label.dxr-btn:focus-within {\n  outline: 2px solid var(--dxr-accent);\n  outline-offset: 1px;\n}\n.dxr [data-dxr=\"fontsize\"] { width: 62px; }\n.dxr [data-dxr=\"fontfamily\"] { max-width: 132px; }\n.dxr [data-dxr=\"pgstart\"] { width: 64px; }\n.dxr-toggle {\n  display: inline-flex;\n  gap: 5px;\n  align-items: center;\n  color: var(--dxr-ink);\n  font-size: 12.5px;\n  white-space: nowrap;\n  cursor: pointer;\n}\n.dxr-note { color: var(--dxr-muted); font-size: 11.5px; }\n\n/* \u2500\u2500 Anchor rail \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   The addressing spine made permanent chrome. Every block in this editor is\n   addressable as kind:scope:unid, and the model of record is a live WASM session \u2014\n   so the surface states both, live, instead of hiding them behind devtools. It also\n   reports each command's real cost, which is what a smoke test needs to see. */\n.dxr-rail {\n  display: flex;\n  align-items: center;\n  height: 25px;\n  padding: 0 10px;\n  overflow-x: auto;\n  background: #f7f9fc;\n  border-top: 1px solid var(--dxr-rule);\n  color: var(--dxr-muted);\n  font-family: var(--dxr-mono);\n  font-size: 11.5px;\n  scrollbar-width: none;\n}\n.dxr-rail::-webkit-scrollbar { display: none; }\n.dxr-rail .dxr-cell {\n  display: flex;\n  align-items: baseline;\n  gap: 6px;\n  padding: 0 13px;\n  border-right: 1px solid var(--dxr-rule);\n  white-space: nowrap;\n}\n.dxr-rail .dxr-cell:first-child { padding-left: 0; }\n.dxr-rail .dxr-cell:last-child { border-right: none; }\n.dxr-rail .dxr-k {\n  color: #8b96a3;\n  font-family: var(--dxr-ui);\n  font-size: 9.5px;\n  letter-spacing: .1em;\n  text-transform: uppercase;\n}\n.dxr-rail .dxr-v { color: var(--dxr-data); }\n.dxr-rail .dxr-v.dxr-flash { animation: dxr-railflash .45s ease-out; }\n@keyframes dxr-railflash { from { background: #b9ecdf; } to { background: transparent; } }\n\n/* \u2500\u2500 Hint \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.dxr-hint {\n  flex: 0 0 auto;\n  max-width: 920px;\n  margin: 0 auto;\n  padding: 9px 16px 0;\n  color: var(--dxr-muted);\n  font-size: 12px;\n  line-height: 1.5;\n}\n.dxr-hint kbd {\n  padding: 0 4px;\n  border: 1px solid var(--dxr-rule);\n  border-radius: 3px;\n  background: #e8ecf3;\n  font-family: var(--dxr-mono);\n  font-size: 11px;\n}\n\n/* \u2500\u2500 Document surface \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   The surface is also the element the converter's own stylesheet treats as the\n   document body: in an embed, its \"body { margin: 20px }\" is rewritten to\n   [data-docxodus-embed-root=\"dN\"] [data-dxr-surface] \u2014 (0,2,0), and inserted AFTER\n   this sheet, so it wins a tie. Rules that own the SHEET BOX (centering, page\n   padding, the paper itself) therefore qualify with the root's data-chrome to reach\n   (0,3,0). Rules that only style CONTENT stay unqualified \u2014 there the converter\n   SHOULD win.\n   (No backticks in this file's comments: the stylesheet is a template literal.) */\n.dxr-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; }\n.dxr[data-chrome] .dxr-surface { max-width: 920px; margin: 26px auto; padding: 0 16px 96px; }\n.dxr-surface[data-view=\"continuous\"] > * { background: var(--dxr-sheet); }\n.dxr[data-chrome] .dxr-surface[data-view=\"continuous\"] {\n  padding: 56px 72px;\n  border-radius: 3px;\n  background: var(--dxr-sheet);\n  box-shadow: 0 1px 3px rgba(16, 20, 24, .14), 0 8px 24px rgba(16, 20, 24, .05);\n}\n.dxr-surface [contenteditable=\"true\"]:focus {\n  outline: 2px solid var(--dxr-accent);\n  outline-offset: 2px;\n  border-radius: 2px;\n}\n@media (hover: hover) { .dxr-surface [contenteditable=\"true\"]:hover { background: #f2f7ff; } }\n\n/* Header/footer bands: stories live in their own OOXML parts outside the body,\n   so they dock as their own regions. Styled from the same tokens as the ribbon\n   so the surface reads as one instrument rather than two apps. */\n.dxr-surface .docx-hf-band {\n  margin: 0 0 14px;\n  padding: 9px 72px 13px;\n  border: 1px solid var(--dxr-rule);\n  border-left: 2px solid #c2ccd9;\n  border-radius: 3px;\n  background: var(--dxr-sheet);\n}\n.dxr-surface .docx-hf-band + .docx-body-flow { margin-top: 0; }\n.dxr-surface .docx-hf-band[data-hf-band=\"footer\"] { margin: 14px 0 0; }\n.dxr-surface .docx-hf-chrome {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  flex-wrap: wrap;\n  margin: 0 0 7px -60px;\n  color: var(--dxr-muted);\n  font-size: 9.5px;\n  font-weight: 600;\n  letter-spacing: .11em;\n  text-transform: uppercase;\n}\n.dxr-surface .docx-hf-chrome select, .dxr-surface .docx-hf-chrome input {\n  padding: 3px 5px;\n  border: 1px solid var(--dxr-rule);\n  border-radius: 4px;\n  background: #f7f9fc;\n  color: var(--dxr-ink);\n  font: inherit;\n  font-family: var(--dxr-ui);\n  font-size: 12.5px;\n  font-weight: 400;\n  letter-spacing: normal;\n  text-transform: none;\n}\n.dxr-surface .docx-hf-chrome input[data-hf-pagestart] { width: 64px; }\n.dxr-surface .docx-hf-label { font-weight: 600; }\n.dxr-surface .docx-hf-warning {\n  margin: 0 0 8px -60px;\n  padding: 7px 9px;\n  border: 1px solid #e8d9a8;\n  border-left: 2px solid #c9a227;\n  border-radius: 3px;\n  background: #fdf6e3;\n  color: #6b5310;\n  font-size: 12px;\n  line-height: 1.45;\n}\n.dxr-surface .docx-hf-warning button {\n  margin-left: 6px;\n  padding: 2px 8px;\n  border-color: #e8d9a8;\n  background: #fff;\n  font-size: 12px;\n}\n.dxr-surface .docx-hf-placeholder { color: #9aa4b1; font-style: italic; }\n.dxr-surface .docx-hf-inherited {\n  color: var(--dxr-muted);\n  font-style: italic;\n  font-weight: 400;\n  letter-spacing: normal;\n  text-transform: none;\n}\n.dxr-surface .docx-hf-band[data-hf-inherited] { border-style: dashed; }\n.dxr[data-chrome] .dxr-surface[data-view=\"continuous\"]:has(.docx-body-flow) {\n  padding: 0;\n  background: transparent;\n  box-shadow: none;\n}\n.dxr[data-chrome] .dxr-surface[data-view=\"continuous\"] .docx-body-flow {\n  padding: 56px 72px;\n  border-radius: 3px;\n  background: var(--dxr-sheet);\n  box-shadow: 0 1px 3px rgba(16, 20, 24, .14), 0 8px 24px rgba(16, 20, 24, .05);\n}\n\n/* \u2500\u2500 Table size picker \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.dxr-pop {\n  display: none;\n  position: absolute;\n  z-index: 30;\n  padding: 9px;\n  border: 1px solid var(--dxr-rule);\n  border-radius: 6px;\n  background: #fff;\n  box-shadow: 0 4px 16px rgba(16, 20, 24, .18);\n}\n.dxr-pop[data-open] { display: block; }\n.dxr-gridcells { display: grid; grid-template-columns: repeat(10, 16px); gap: 2px; }\n.dxr-gridcells div {\n  width: 16px;\n  height: 16px;\n  border: 1px solid var(--dxr-rule);\n  border-radius: 2px;\n  background: #f2f5f9;\n  cursor: pointer;\n}\n.dxr-gridcells div[data-on] { background: var(--dxr-wash); border-color: var(--dxr-accent); }\n.dxr-popfoot {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 10px;\n  margin-top: 8px;\n  font-size: 12px;\n}\n\n/* \u2500\u2500 Compact chrome (the mobile-first base) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   One scrolling strip per tab instead of a multi-row ribbon: group labels turn\n   into inline dividers, the rail and hint step aside, and the picker becomes a\n   bottom sheet because there is no room to hang a popover off a button. */\n/* A 320px phone cannot hold the product name AND the file actions, and the file\n   actions are what a user came for. The strip also scrolls, so nothing is stranded. */\n.dxr[data-chrome=\"compact\"] .dxr-titlebar {\n  gap: 6px;\n  padding: 5px 8px 0;\n  overflow-x: auto;\n  scrollbar-width: none;\n}\n.dxr[data-chrome=\"compact\"] .dxr-titlebar::-webkit-scrollbar { display: none; }\n.dxr[data-chrome=\"compact\"] .dxr-brandname { display: none; }\n.dxr[data-chrome=\"compact\"] .dxr-brand { flex: 0 1 auto; }\n/* A filename clipped to \"do...\" tells you less than no filename at all, so it keeps a\n   readable floor and the strip scrolls instead. The tighter file-action padding is what\n   buys that floor back on a 390px screen. */\n.dxr[data-chrome=\"compact\"] .dxr-brand .dxr-docname { min-width: 6ch; max-width: 14ch; }\n.dxr[data-chrome=\"compact\"] .dxr-quick button,\n.dxr[data-chrome=\"compact\"] .dxr-quick label.dxr-btn { padding: 4px 8px; }\n.dxr[data-chrome=\"compact\"] .dxr-status { display: none; }\n.dxr[data-chrome=\"compact\"] .dxr-tabs { padding: 5px 8px 0; }\n.dxr[data-chrome=\"compact\"] .dxr-tab { padding: 6px 12px 7px; font-size: 12px; }\n.dxr[data-chrome=\"compact\"] .dxr-panel {\n  align-items: center;\n  gap: 4px;\n  padding: 5px 8px;\n  scroll-snap-type: x proximity;\n}\n.dxr[data-chrome=\"compact\"] .dxr-group {\n  flex-direction: row;\n  align-items: center;\n  gap: 4px;\n  padding: 0 8px;\n  scroll-snap-align: start;\n}\n.dxr[data-chrome=\"compact\"] .dxr-glabel { display: none; }\n.dxr[data-chrome=\"compact\"] .dxr-note { display: none; }\n.dxr[data-chrome=\"compact\"] .dxr-rail { display: none; }\n.dxr[data-chrome=\"compact\"] .dxr-hint { display: none; }\n.dxr[data-chrome=\"compact\"] .dxr-surface { margin: 12px auto; padding: 0 10px 64px; }\n.dxr[data-chrome=\"compact\"] .dxr-surface[data-view=\"continuous\"] { padding: 22px 18px; }\n.dxr[data-chrome=\"compact\"] .dxr-surface[data-view=\"continuous\"] .docx-body-flow { padding: 22px 18px; }\n.dxr[data-chrome=\"compact\"] .dxr-surface .docx-hf-band { padding: 9px 18px 13px; }\n.dxr[data-chrome=\"compact\"] .dxr-surface .docx-hf-chrome,\n.dxr[data-chrome=\"compact\"] .dxr-surface .docx-hf-warning { margin-left: 0; }\n/* A popover anchored to a button has nowhere to go on a narrow surface, so the\n   picker docks to the bottom edge where a thumb already is. */\n.dxr[data-chrome=\"compact\"] .dxr-pop[data-open] {\n  position: fixed;\n  left: 50%;\n  right: auto;\n  bottom: 12px;\n  top: auto !important;\n  transform: translateX(-50%);\n  max-width: calc(100vw - 20px);\n}\n\n/* \u2500\u2500 Loading overlay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   Kept from the shipped demo: the wait is real (a .NET runtime is streaming), so\n   the surface spends it explaining what is being built rather than showing a\n   spinner. It covers the whole instrument so half-built chrome never flashes. */\n.dxr-loader {\n  position: absolute;\n  inset: 0;\n  z-index: 40;\n  display: grid;\n  place-items: center;\n  padding: 24px;\n  color: #f4f9ff;\n  background:\n    radial-gradient(circle at 20% 20%, rgba(63, 128, 255, .24), transparent 22rem),\n    radial-gradient(circle at 82% 80%, rgba(176, 91, 255, .22), transparent 24rem),\n    linear-gradient(145deg, #071221 0%, #0b1930 52%, #101426 100%);\n  transition: opacity .55s ease, visibility .55s ease;\n}\n.dxr-loader[hidden] { display: none; }\n/* pointer-events drops the instant the fade starts: the surface underneath is already\n   live, so a click during the half-second fade should reach it rather than be eaten. */\n.dxr-loader[data-done] { opacity: 0; visibility: hidden; pointer-events: none; }\n.dxr-loader-grid {\n  width: min(850px, 100%);\n  display: grid;\n  grid-template-columns: 1fr;\n  align-items: center;\n  gap: 22px;\n  text-align: center;\n}\n.dxr-visual { position: relative; width: min(170px, 52vw); aspect-ratio: 1; margin: 0 auto; }\n.dxr-orbit {\n  position: absolute;\n  inset: 7%;\n  border: 1px solid rgba(115, 204, 255, .22);\n  border-radius: 50%;\n  animation: dxr-spin 9s linear infinite;\n}\n.dxr-orbit.dxr-two {\n  inset: 20%;\n  border-style: dashed;\n  border-color: rgba(196, 128, 255, .32);\n  animation-duration: 6s;\n  animation-direction: reverse;\n}\n.dxr-orbit::before, .dxr-orbit::after {\n  position: absolute;\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  content: \"\";\n  background: #52e5ff;\n  box-shadow: 0 0 18px #52e5ff;\n}\n.dxr-orbit::before { top: -5px; left: 50%; }\n.dxr-orbit::after { right: 7%; bottom: 12%; background: #b26cff; box-shadow: 0 0 18px #b26cff; }\n.dxr-card {\n  position: absolute;\n  inset: 24% 28%;\n  padding: 20px 15px;\n  border: 1px solid rgba(255, 255, 255, .33);\n  border-radius: 14px;\n  background: linear-gradient(150deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .06));\n  box-shadow: 0 22px 50px rgba(0, 0, 0, .35), 0 0 45px rgba(71, 150, 255, .13);\n  backdrop-filter: blur(10px);\n  animation: dxr-float 3.6s ease-in-out infinite;\n}\n.dxr-card::before {\n  position: absolute;\n  top: -9px;\n  right: -9px;\n  padding: 4px 7px;\n  border-radius: 6px;\n  background: #52e5ff;\n  color: #06111d;\n  content: \"DOCX\";\n  font-size: 8px;\n  font-weight: 900;\n  letter-spacing: .12em;\n}\n.dxr-card i {\n  display: block;\n  height: 4px;\n  margin-bottom: 10px;\n  border-radius: 4px;\n  background: rgba(255, 255, 255, .56);\n  transform-origin: left;\n  animation: dxr-pulse 2.2s ease-in-out infinite;\n}\n.dxr-card i:nth-child(2) { width: 76%; animation-delay: -.45s; }\n.dxr-card i:nth-child(3) { width: 88%; animation-delay: -.85s; }\n.dxr-card i:nth-child(4) { width: 58%; background: rgba(255, 111, 139, .75); animation-delay: -1.2s; }\n.dxr-chip {\n  position: absolute;\n  display: grid;\n  width: 34px;\n  height: 34px;\n  place-items: center;\n  border: 1px solid rgba(255, 255, 255, .17);\n  border-radius: 11px;\n  background: rgba(12, 28, 49, .88);\n  box-shadow: 0 12px 30px rgba(0, 0, 0, .28);\n  font-size: 11px;\n  font-weight: 850;\n}\n.dxr-chip.dxr-b { left: 2%; top: 30%; color: #52e5ff; animation: dxr-chip 3s ease-in-out infinite; }\n.dxr-chip.dxr-r { right: -2%; bottom: 24%; color: #ff8da0; animation: dxr-chip 3s -1.4s ease-in-out infinite; }\n.dxr-chip.dxr-s { left: 20%; bottom: 0; color: #52e0a2; animation: dxr-chip 3s -.7s ease-in-out infinite; }\n.dxr-eyebrow { color: #52e5ff; font-size: 10px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }\n.dxr-loader h2 {\n  margin: 10px auto 10px;\n  max-width: 520px;\n  font-size: clamp(23px, 5vw, 40px);\n  line-height: 1.05;\n  letter-spacing: -.045em;\n}\n.dxr-loader-copy > p { margin: 0 auto; max-width: 46ch; color: #9eb2c9; font-size: 13.5px; line-height: 1.6; }\n.dxr-ad {\n  display: flex;\n  gap: 12px;\n  margin: 20px auto 0;\n  max-width: 420px;\n  padding: 13px;\n  border: 1px solid rgba(126, 160, 200, .16);\n  border-radius: 13px;\n  background: rgba(255, 255, 255, .04);\n  text-align: left;\n}\n.dxr-ad .dxr-num { color: #b26cff; font: 800 10px/1.4 var(--dxr-mono); }\n.dxr-ad strong { display: block; font-size: 12.5px; }\n.dxr-ad .dxr-adcopy { display: block; margin-top: 4px; color: #849bb5; font-size: 11.5px; line-height: 1.45; }\n.dxr-ad[data-swap] { animation: dxr-swap .4s ease; }\n.dxr-track {\n  height: 3px;\n  margin: 22px auto 0;\n  max-width: 420px;\n  overflow: hidden;\n  border-radius: 999px;\n  background: rgba(255, 255, 255, .09);\n}\n.dxr-bar {\n  width: 12%;\n  height: 100%;\n  border-radius: inherit;\n  background: linear-gradient(90deg, #52e5ff, #5c7cff, #b26cff);\n  box-shadow: 0 0 16px rgba(82, 229, 255, .55);\n  transition: width .65s cubic-bezier(.22, .8, .28, 1);\n}\n.dxr-meta {\n  display: flex;\n  justify-content: space-between;\n  gap: 14px;\n  margin: 9px auto 0;\n  max-width: 420px;\n  color: #647e9c;\n  font: 700 9px/1 var(--dxr-mono);\n  letter-spacing: .09em;\n  text-transform: uppercase;\n}\n.dxr-retry {\n  display: none;\n  margin-top: 18px;\n  padding: 9px 14px;\n  border: 1px solid rgba(255, 127, 145, .4);\n  border-radius: 9px;\n  background: rgba(255, 127, 145, .12);\n  color: #fff;\n  cursor: pointer;\n}\n.dxr-loader[data-error] .dxr-retry { display: inline-flex; }\n.dxr-loader[data-error] .dxr-visual { opacity: .35; }\n\n/* Two columns once there is room \u2014 the visual earns its space beside the copy. */\n@media (min-width: 760px) {\n  .dxr-loader-grid {\n    grid-template-columns: minmax(220px, .8fr) minmax(300px, 1.2fr);\n    gap: clamp(28px, 6vw, 72px);\n    text-align: left;\n  }\n  .dxr-visual { width: min(280px, 30vw); }\n  .dxr-loader h2 { margin-left: 0; }\n  .dxr-loader-copy > p { margin-left: 0; min-height: 44px; }\n  .dxr-ad, .dxr-track, .dxr-meta { margin-left: 0; }\n}\n\n@keyframes dxr-spin { to { transform: rotate(360deg); } }\n@keyframes dxr-float { 0%, 100% { transform: translateY(-5px) rotate(-2deg); } 50% { transform: translateY(7px) rotate(1deg); } }\n@keyframes dxr-chip { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(5px); } }\n@keyframes dxr-pulse { 0%, 100% { transform: scaleX(.65); opacity: .45; } 50% { transform: scaleX(1); opacity: .95; } }\n@keyframes dxr-swap { from { opacity: .1; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }\n\n@media (prefers-reduced-motion: reduce) {\n  .dxr *, .dxr *::before, .dxr *::after {\n    animation-duration: .01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: .01ms !important;\n  }\n}\n";
/**
 * The ribbon's DOM, as one template.
 *
 * `data-dxr` names are the addressing contract (see the module header); the
 * behavioural attributes (`data-cmd`, `data-align`, `data-indent`, `data-list`,
 * `data-tt`) are what `ribbon.ts` delegates on, so adding a control here that
 * follows an existing convention needs no wiring change.
 */
export declare const RIBBON_HTML: string;
/** The default hint copy, shown above the document in full chrome. */
export declare const RIBBON_HINT_HTML: string;
//# sourceMappingURL=ribbon-chrome.d.ts.map