/**
 * 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.
 *
 * ── Shape ───────────────────────────────────────────────────────────────────
 * Word's: a title bar, a tab strip (Home · Insert · Layout · References ·
 * Review · View, plus the contextual Table and Header & Footer tabs), the panel
 * for the active tab, the document with its comment gutter, and a status bar
 * that carries the anchor rail, the page/word counts and the zoom control.
 *
 * ── 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 = "11";
export declare const RIBBON_STYLE_ATTR = "data-docxodus-ribbon-styles";
/** Width of the comment gutter the surface reserves beside the sheet, in px. */
export declare const COMMENT_GUTTER_WIDTH = 264;
/**
 * 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  /* OS-Legal design tokens (github.com/Open-Source-Legal/OS-Legal-Style):\n     deep-teal accent, slate foreground scale, warm neutral surfaces, and\n     \"light touch\" shadows at 0.03-0.06 opacity \u2014 structure over decoration. */\n  --dxr-ink: #1e293b;\n  --dxr-sheet: #ffffff;\n  --dxr-chrome: #ffffff;\n  --dxr-chrome-sunk: #f8fafc;\n  --dxr-rule: #e2e8f0;\n  --dxr-rule-strong: #cbd5e1;\n  --dxr-accent: #0f766e;\n  --dxr-accent-hover: #0d9488;\n  --dxr-accent-active: #115e59;\n  --dxr-wash: #f0fdfa;\n  --dxr-wash-on: #ccfbf1;\n  --dxr-muted: #475569;\n  --dxr-faint: #94a3b8;\n  --dxr-data: #0f766e;\n  --dxr-danger: #dc2626;\n  --dxr-danger-wash: #fef2f2;\n  --dxr-desk: #eef2f6;\n  --dxr-ui: \"Inter\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n  --dxr-serif: Georgia, \"Times New Roman\", serif;\n  --dxr-mono: ui-monospace, SFMono-Regular, \"Cascadia Mono\", Consolas, monospace;\n  --dxr-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);\n  --dxr-shadow-md: 0 1px 3px rgba(15, 23, 42, .06), 0 4px 6px rgba(15, 23, 42, .03);\n  --dxr-shadow-lg: 0 4px 6px rgba(15, 23, 42, .05), 0 10px 15px rgba(15, 23, 42, .04);\n  --dxr-shadow-xl: 0 8px 16px rgba(15, 23, 42, .06), 0 20px 25px rgba(15, 23, 42, .05);\n  --dxr-ease: cubic-bezier(.4, 0, .2, 1);\n  --dxr-tap: 28px;\n  --dxr-gutter: 264px;\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  text-size-adjust: 100%;\n}\n.dxr *, .dxr *::before, .dxr *::after { box-sizing: border-box; }\n\n/* \u2500\u2500 Card frame \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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   A drop-in embed carries its OWN boundary instead of hoping the host clips it:\n   rounded corners, a hairline, and the house elevation. overflow: clip keeps\n   the sticky chrome, scrollbars, and the loading overlay inside the curve.\n   Full-bleed hosts mount with data-frame=\"flush\" and stay edge-to-edge. */\n.dxr[data-frame=\"card\"] {\n  border: 1px solid var(--dxr-rule);\n  border-radius: 14px;\n  box-shadow: var(--dxr-shadow-xl);\n  overflow: clip;\n}\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 Scroll-edge affordances \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 chrome's strips (title bar, tabs, panels, rail) scroll horizontally\n   rather than squashing or wrapping \u2014 the compact rule is \"no command is\n   removed, the strip scrolls\". But a hard clip mid-control reads as a broken\n   layout, especially on a phone, so ribbon.ts measures every strip and stamps\n   data-fade with the edges that hide more content (\"l\", \"r\", or both). The\n   mask dissolves content at exactly those edges \u2014 the horizontal twin of\n   .dxr-scroll's gradient veils \u2014 and lifts entirely once the strip fits, so\n   nothing is ever faded unless there is more behind it. */\n.dxr-titlebar, .dxr-tabs, .dxr-panel, .dxr-rail, .dxr-findbar { --dxr-fade-l: 0px; --dxr-fade-r: 0px; }\n.dxr [data-fade] {\n  -webkit-mask-image: linear-gradient(to right,\n    transparent, #000 var(--dxr-fade-l),\n    #000 calc(100% - var(--dxr-fade-r)), transparent);\n  mask-image: linear-gradient(to right,\n    transparent, #000 var(--dxr-fade-l),\n    #000 calc(100% - var(--dxr-fade-r)), transparent);\n}\n.dxr [data-fade~=\"l\"] { --dxr-fade-l: 28px; }\n.dxr [data-fade~=\"r\"] { --dxr-fade-r: 28px; }\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/* Scrolls in EVERY density (compact just tightens it): the fade affordance\n   marks any overflowing strip as scrollable, so it must actually be. */\n.dxr-titlebar {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 6px 10px 0;\n  overflow-x: auto;\n  scrollbar-width: none;\n}\n.dxr-titlebar::-webkit-scrollbar { display: none; }\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/* A filled circle, echoing the OS-Legal \"Node\" motif rather than a diamond. */\n.dxr-brand .dxr-mark {\n  flex: 0 0 auto;\n  width: 9px;\n  height: 9px;\n  border-radius: 50%;\n  background: var(--dxr-accent);\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: 4px 10px 0;\n  overflow-x: auto;\n  scrollbar-width: none;\n}\n.dxr-tabs::-webkit-scrollbar { display: none; }\n/* Line-variant tabs (the house Tabs default): no boxes, no fills \u2014 the selected\n   tab is a 2px accent underline sitting on the panel's own hairline. */\n.dxr-tab {\n  flex: 0 0 auto;\n  padding: 6px 13px 7px;\n  border: none;\n  background: none;\n  color: var(--dxr-muted);\n  font: inherit;\n  font-size: 12.5px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: color .15s var(--dxr-ease), box-shadow .15s var(--dxr-ease);\n}\n.dxr-tab:hover { color: var(--dxr-ink); }\n.dxr-tab[aria-selected=\"true\"] {\n  color: var(--dxr-ink);\n  font-weight: 600;\n  box-shadow: inset 0 -2px 0 var(--dxr-accent);\n}\n/* Contextual tabs \u2014 present only while the caret is in a table / a header or footer story. */\n.dxr-tab[data-contextual] { color: var(--dxr-accent); }\n.dxr-tab[data-contextual]::before { content: \"\\2022\"; margin-right: 6px; opacity: .6; }\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: 6px 10px 7px;\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: 4px;\n  padding: 0 12px;\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-faint);\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.dxr-row + .dxr-row { margin-top: 1px; }\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/* One button family, house-style: every control is a ghost \u2014 no borders, no\n   fills, no per-button boxes. Hover paints a quiet slate wash; the active\n   (toggled) state paints a teal one. Save alone is the flat primary, so the\n   surface has exactly one accent-colored action. */\n.dxr button, .dxr label.dxr-btn {\n  min-height: var(--dxr-tap);\n  padding: 4px 8px;\n  border: none;\n  border-radius: 6px;\n  background: none;\n  color: var(--dxr-ink);\n  font: inherit;\n  font-size: 12.5px;\n  font-weight: 500;\n  line-height: 1.15;\n  cursor: pointer;\n  transition: background-color .15s var(--dxr-ease), color .15s var(--dxr-ease),\n    box-shadow .15s var(--dxr-ease), transform .15s var(--dxr-ease);\n}\n.dxr label.dxr-btn { display: inline-flex; align-items: center; }\n.dxr button:hover, .dxr label.dxr-btn:hover { background: #f1f5f9; }\n.dxr button:active { background: #e2e8f0; }\n.dxr button:disabled { opacity: .38; cursor: default; background: none; }\n.dxr button.dxr-on, .dxr button[aria-pressed=\"true\"] { color: var(--dxr-accent); background: var(--dxr-wash-on); }\n.dxr-quick button, .dxr-quick label.dxr-btn { padding: 4px 10px; font-size: 12.5px; }\n/* Save \u2014 the house primary: flat accent, sm shadow, the 1px lift on hover. */\n.dxr-quick button[data-dxr=\"save\"]:not(:disabled) {\n  background: var(--dxr-accent);\n  color: #fff;\n  font-weight: 600;\n  box-shadow: var(--dxr-shadow-sm);\n}\n.dxr-quick button[data-dxr=\"save\"]:not(:disabled):hover {\n  background: var(--dxr-accent-hover);\n  box-shadow: var(--dxr-shadow-md);\n  transform: translateY(-1px);\n}\n.dxr-quick button[data-dxr=\"save\"]:not(:disabled):active {\n  background: var(--dxr-accent-active);\n  box-shadow: var(--dxr-shadow-sm);\n  transform: translateY(0);\n}\n/* Icon controls sit quieter than text ones until touched (house IconButton). */\n.dxr button.dxr-icon { min-width: var(--dxr-tap); padding: 4px 6px; text-align: center; color: var(--dxr-muted); }\n.dxr button.dxr-icon:hover:not(:disabled) { color: var(--dxr-ink); }\n.dxr button.dxr-icon.dxr-on { color: var(--dxr-accent); }\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: var(--dxr-danger-wash); }\n.dxr select, .dxr input[type=\"number\"], .dxr input[type=\"text\"], .dxr input[type=\"search\"], .dxr input[type=\"url\"] {\n  min-height: var(--dxr-tap);\n  padding: 3px 6px;\n  border: 1px solid var(--dxr-rule);\n  border-radius: 6px;\n  background: var(--dxr-sheet);\n  color: var(--dxr-ink);\n  font: inherit;\n  font-size: 12.5px;\n}\n.dxr select:hover, .dxr input:hover { border-color: var(--dxr-rule-strong); }\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: 58px; }\n.dxr [data-dxr=\"fontfamily\"] { width: 138px; }\n.dxr [data-dxr=\"style\"] { width: 148px; }\n.dxr [data-dxr=\"pgstart\"], .dxr [data-dxr=\"spacebefore\"], .dxr [data-dxr=\"spaceafter\"],\n.dxr [data-dxr=\"specialindentval\"] { width: 62px; }\n.dxr [data-dxr=\"linespacing\"], .dxr [data-dxr=\"listmenu\"], .dxr [data-dxr=\"highlight\"],\n.dxr [data-dxr=\"markup\"], .dxr [data-dxr=\"zoom\"], .dxr [data-dxr=\"margins\"],\n.dxr [data-dxr=\"orientation\"], .dxr [data-dxr=\"pagesize\"], .dxr [data-dxr=\"specialindent\"] { max-width: 150px; }\n.dxr-toggle {\n  display: inline-flex;\n  gap: 5px;\n  align-items: center;\n  min-height: var(--dxr-tap);\n  color: var(--dxr-ink);\n  font-size: 12.5px;\n  white-space: nowrap;\n  cursor: pointer;\n}\n.dxr-toggle input[type=\"checkbox\"] { accent-color: var(--dxr-accent); margin: 0; }\n.dxr-note { color: var(--dxr-muted); font-size: 11.5px; }\n.dxr-kbd { color: var(--dxr-faint); font-family: var(--dxr-mono); font-size: 10px; }\n\n/* Colour swatch buttons: the button shows the current colour as a bar under its glyph and\n   opens the native picker that sits (visually hidden) inside it. */\n.dxr-swatch { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }\n.dxr-swatch > button { padding-bottom: 6px; }\n.dxr-swatch .dxr-swatch-bar {\n  position: absolute; left: 7px; right: 7px; bottom: 4px; height: 3px; border-radius: 2px;\n  background: var(--dxr-swatch, #1e293b); pointer-events: none;\n}\n.dxr-swatch input[type=\"color\"] {\n  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0;\n}\n.dxr-swatch [data-dxr=\"highlight\"] {\n  min-height: var(--dxr-tap);\n}\n.dxr-hl-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; vertical-align: -2px; margin-right: 4px; border: 1px solid rgba(15,23,42,.15); }\n\n/* \u2500\u2500 Find & replace bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-findbar {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 5px 10px;\n  overflow-x: auto;\n  border-top: 1px solid var(--dxr-rule);\n  background: var(--dxr-chrome);\n  scrollbar-width: none;\n}\n.dxr-findbar[hidden] { display: none; }\n.dxr-findbar > *, .dxr-findbar [data-dxr=\"replacegroup\"] { flex: 0 0 auto; white-space: nowrap; }\n.dxr-findbar [data-dxr=\"replacegroup\"] { display: inline-flex; align-items: center; gap: 6px; }\n.dxr-findbar input[type=\"search\"], .dxr-findbar input[type=\"text\"] { width: 180px; }\n.dxr-findbar .dxr-findcount { min-width: 5ch; color: var(--dxr-muted); font-family: var(--dxr-mono); font-size: 11.5px; }\n\n/* \u2500\u2500 Status bar (carries the 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\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. Word's\n   own status-bar cells (page, words, zoom) sit on the same strip. */\n.dxr-rail {\n  display: flex;\n  align-items: center;\n  flex: 0 0 auto;\n  height: 26px;\n  padding: 0 10px;\n  overflow-x: auto;\n  background: #fafafa;\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 12px;\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.dxr-cell-end { margin-left: auto; border-right: none; padding-right: 0; }\n.dxr-rail .dxr-k {\n  color: var(--dxr-faint);\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.dxr-rail .dxr-v.dxr-plain { color: var(--dxr-ink); font-family: var(--dxr-ui); font-size: 11.5px; }\n@keyframes dxr-railflash { from { background: #ccfbf1; } to { background: transparent; } }\n.dxr-zoom { display: inline-flex; align-items: center; gap: 2px; }\n.dxr-zoom button { min-height: 22px; min-width: 22px; padding: 0 5px; font-size: 13px; color: var(--dxr-muted); }\n.dxr-zoom select { min-height: 22px; padding: 0 4px; font-size: 11.5px; }\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: 4px;\n  background: #f1f5f9;\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/* Soft scroll boundaries: content dissolves at the chrome and at the bottom edge\n   instead of hard-clipping. Sticky gradient veils cost one paint layer each and\n   never intercept input. */\n.dxr-scroll::before, .dxr-scroll::after {\n  content: \"\";\n  position: sticky;\n  z-index: 3;\n  display: block;\n  height: 26px;\n  pointer-events: none;\n}\n.dxr-scroll::before {\n  top: 0;\n  margin-bottom: -26px;\n  background: linear-gradient(to bottom, var(--dxr-desk), transparent);\n}\n.dxr-scroll::after {\n  bottom: 0;\n  margin-top: -26px;\n  background: linear-gradient(to top, var(--dxr-desk), transparent);\n}\n.dxr[data-chrome] .dxr-surface { position: relative; margin: 26px auto; padding: 0 16px 96px; }\n/* Reserve the markup area only while a visible comment or draft needs it. The gutter owns\n   its empty/hidden state, so ordinary documents stay centered without disabling comments. */\n.dxr[data-chrome=\"full\"] .dxr-surface[data-comments=\"on\"]:has(> .docx-comment-gutter:not([data-empty]):not([hidden])) {\n  padding-right: calc(var(--dxr-gutter) + 8px);\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: var(--dxr-wash); } }\n\n/* Header/footer bands (continuous view): the top and bottom margin of the sheet, drawn the way\n   Word draws a header that is being edited \u2014 a dashed rule with a small tag in the margin. */\n.dxr-surface .docx-hf-band {\n  /* Docked outside the zoomed sheet, so it takes the page's on-screen width from the\n     custom property the viewport publishes, including when the page exceeds the surface. */\n  position: relative;\n  width: var(--docx-sheet-width, 100%);\n  margin: 0 auto;\n  padding: 34px 72px 12px;\n  background: var(--dxr-sheet);\n  border-radius: 3px 3px 0 0;\n  box-shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 12px 24px rgba(15, 23, 42, .06);\n}\n.dxr-surface .docx-hf-band[data-hf-band=\"footer\"] { padding: 12px 72px 34px; border-radius: 0 0 3px 3px; }\n/* The band and the sheet are one piece of paper: kill the sheet's own top/bottom corners and\n   let the dashed rule separate the stories from the body. */\n.dxr-surface .docx-hf-band + .docx-body-flow { margin-top: 0; border-radius: 0; box-shadow: none; }\n.dxr-surface .docx-hf-band[data-hf-band=\"footer\"] { margin-top: 0; }\n.dxr[data-chrome] .dxr-surface[data-view=\"continuous\"] .docx-hf-band ~ .docx-body-flow { box-shadow: none; }\n.dxr[data-chrome] .dxr-surface[data-view=\"continuous\"]:has(.docx-hf-band) .docx-body-flow { padding: 18px 0; }\n.dxr-surface .docx-hf-band::after {\n  content: \"\"; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1px dashed var(--dxr-rule-strong);\n}\n.dxr-surface .docx-hf-band[data-hf-band=\"footer\"]::after { top: 0; bottom: auto; border-bottom: 0; border-top: 1px dashed var(--dxr-rule-strong); }\n.dxr-surface .docx-hf-band:hover::after, .dxr-surface .docx-hf-band[data-hf-active]::after { border-color: var(--dxr-accent); }\n.dxr-surface .docx-hf-tag {\n  position: absolute; left: 72px; bottom: -9px; z-index: 2;\n  display: flex; align-items: center; gap: 8px;\n  padding: 1px 7px; border: 1px solid var(--dxr-rule-strong); border-radius: 4px;\n  background: #fff; color: var(--dxr-muted);\n  font-family: var(--dxr-ui); font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;\n}\n.dxr-surface .docx-hf-band[data-hf-band=\"footer\"] .docx-hf-tag { bottom: auto; top: -9px; }\n.dxr-surface .docx-hf-band[data-hf-active] .docx-hf-tag { border-color: var(--dxr-accent); color: var(--dxr-accent); }\n.dxr-surface .docx-hf-kinds { display: inline-flex; gap: 2px; }\n.dxr-surface .docx-hf-kinds button {\n  min-height: 0; padding: 1px 6px; border-radius: 3px; font-family: var(--dxr-ui); font-size: 9.5px; font-weight: 600;\n  letter-spacing: .06em; text-transform: uppercase; color: var(--dxr-muted); background: none;\n}\n.dxr-surface .docx-hf-kinds button[data-on] { background: var(--dxr-wash-on); color: var(--dxr-accent); }\n.dxr-surface .docx-hf-inherited { font-weight: 400; letter-spacing: normal; text-transform: none; font-style: italic; }\n.dxr-surface .docx-hf-placeholder { color: var(--dxr-faint); font-style: italic; cursor: text; }\n/* Bands only: a page host's height is the band the paginator reserved, and a floor here would\n   read as \"the story grew\" and trigger a needless re-paginate. */\n.dxr-surface .docx-hf-band .docx-hf-body { min-height: 1.4em; }\n/* Page view: the page's own header/footer area is click-to-edit. */\n.dxr-surface .page-header[data-hf-page], .dxr-surface .page-footer[data-hf-page] { cursor: text; }\n.dxr-surface .page-header[data-hf-page]:hover, .dxr-surface .page-footer[data-hf-page]:hover {\n  outline: 1px dashed var(--dxr-rule-strong); outline-offset: 2px;\n}\n.dxr-surface .page-header[data-hf-active], .dxr-surface .page-footer[data-hf-active] {\n  outline: 1px dashed var(--dxr-accent); outline-offset: 2px; z-index: 5; background: #fff;\n}\n.dxr-surface [data-hf-active][data-hf-label]::before {\n  content: attr(data-hf-label); position: absolute; left: -2px; top: -18px;\n  padding: 1px 6px; border: 1px solid var(--dxr-accent); border-radius: 4px; background: #fff; color: var(--dxr-accent);\n  font-family: var(--dxr-ui); font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; line-height: 1.4;\n}\n.dxr-surface .page-footer[data-hf-active][data-hf-label]::before { top: auto; bottom: -18px; }\n/* The sheet IS the page. The editor's viewport sizes .docx-body-flow to the section's page\n   width and its section wrappers to the authored text column, so the horizontal gutters here\n   are the document's own w:sectPr margins, not a padding this chrome invents; only the\n   vertical breathing room is ours. Centering is left to margin:auto so a page the viewport\n   has zoomed to fit stays centered at its scaled width. */\n.dxr[data-chrome] .dxr-surface[data-view=\"continuous\"] .docx-body-flow {\n  /* CSS zoom scales the authored page width. A percentage cap would shrink only the\n     paper to the host while its fixed-width section and content keep magnifying. */\n  max-width: none;\n  margin: 0 auto;\n  padding: 56px 0;\n  border-radius: 3px;\n  background: var(--dxr-sheet);\n  box-shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 12px 24px rgba(15, 23, 42, .06);\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: 12px;\n  background: #fff;\n  box-shadow: var(--dxr-shadow-xl);\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: 3px;\n  background: var(--dxr-chrome-sunk);\n  cursor: pointer;\n}\n.dxr-gridcells div[data-on] { background: #ccfbf1; 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/* Small prompt popovers (link URL, page setup), anchored under their button. */\n.dxr-pop form { display: flex; flex-direction: column; gap: 8px; min-width: 260px; font-size: 12.5px; }\n.dxr-pop form label { display: flex; flex-direction: column; gap: 3px; color: var(--dxr-muted); font-size: 11.5px; }\n.dxr-pop form .dxr-row { justify-content: flex-end; }\n.dxr-pop form button[type=\"submit\"] { background: var(--dxr-accent); color: #fff; }\n.dxr-pop form button[type=\"submit\"]:hover { background: var(--dxr-accent-hover); }\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/* Touch targets grow with the LAYOUT, not the pointer alone: a phone-width chrome is driven\n   by a thumb whether or not the browser reports a coarse pointer (an emulated narrow viewport\n   does not), so the compact strip adopts the same 40px control floor the coarse-pointer media\n   query sets, keeping every icon button at a real tap size. */\n.dxr[data-chrome=\"compact\"] { --dxr-tap: 40px; }\n/* The floor buys tap SIZE; the rows must not spend it again on padding. A phone stacks three\n   chrome rows \u2014 title, tabs, commands \u2014 above the page, so every pixel of row padding is paid\n   three times before the document starts, and the arcade demo's card (which sizes itself to the\n   game screen plus its controls) runs out of viewport when it is. */\n.dxr[data-chrome=\"compact\"] .dxr-titlebar {\n  gap: 6px;\n  padding: 0 8px;\n}\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: 0 8px; }\n/* A tab is a WIDE target \u2014 its label plus 11px of side padding already clears the tap floor\n   horizontally \u2014 and it is navigation rather than a command, so it does not need the command\n   row's full height. Word's own phone ribbon keeps its tab strip slim for the same reason: the\n   page starts higher. The commands below keep the full 40px floor. */\n.dxr[data-chrome=\"compact\"] .dxr-tab { min-height: 34px; padding: 6px 11px 7px; font-size: 12px; }\n.dxr[data-chrome=\"compact\"] .dxr-panel {\n  align-items: center;\n  gap: 4px;\n  padding: 2px 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-row + .dxr-row { margin-top: 0; }\n/* Compact trims the chrome around the page, never the page: the document's own column width\n   is what the viewport's fit-to-width zoom scales, so a phone shows a whole smaller page\n   instead of a narrower one that breaks its lines somewhere Word never would. */\n.dxr[data-chrome=\"compact\"] .dxr-surface { margin: 12px auto; padding: 0 10px 64px; }\n.dxr[data-chrome=\"compact\"] .dxr-surface[data-view=\"continuous\"] .docx-body-flow { padding: 22px 0; }\n.dxr[data-chrome=\"compact\"] .dxr-surface .docx-hf-band { padding: 26px 18px 10px; }\n.dxr[data-chrome=\"compact\"] .dxr-surface .docx-hf-band[data-hf-band=\"footer\"] { padding: 10px 18px 26px; }\n.dxr[data-chrome=\"compact\"] .dxr-surface .docx-hf-tag { left: 18px; }\n/* No room for a markup column on a phone: comments stay highlighted, bubbles step aside. */\n.dxr[data-chrome=\"compact\"] .docx-comment-gutter, .dxr[data-chrome=\"compact\"] .docx-comment-leaders { display: none; }\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: #f8fafc;\n  background:\n    radial-gradient(circle at 20% 20%, rgba(13, 148, 136, .2), transparent 22rem),\n    radial-gradient(circle at 82% 80%, rgba(45, 212, 191, .1), transparent 24rem),\n    linear-gradient(150deg, #0b1220 0%, #0f172a 55%, #0f2723 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(45, 212, 191, .24);\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(94, 234, 212, .3);\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: #2dd4bf;\n  box-shadow: 0 0 18px rgba(45, 212, 191, .8);\n}\n.dxr-orbit::before { top: -5px; left: 50%; }\n.dxr-orbit::after { right: 7%; bottom: 12%; background: #5eead4; box-shadow: 0 0 18px rgba(94, 234, 212, .7); }\n.dxr-card {\n  position: absolute;\n  inset: 24% 28%;\n  padding: 20px 15px;\n  border: 1px solid rgba(255, 255, 255, .3);\n  border-radius: 14px;\n  background: linear-gradient(150deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05));\n  box-shadow: 0 22px 50px rgba(0, 0, 0, .35), 0 0 45px rgba(13, 148, 136, .15);\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: #2dd4bf;\n  color: #042f2e;\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(248, 113, 113, .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, .16);\n  border-radius: 11px;\n  background: rgba(15, 30, 46, .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: #5eead4; animation: dxr-chip 3s ease-in-out infinite; }\n.dxr-chip.dxr-r { right: -2%; bottom: 24%; color: #fca5a5; animation: dxr-chip 3s -1.4s ease-in-out infinite; }\n.dxr-chip.dxr-s { left: 20%; bottom: 0; color: #6ee7b7; animation: dxr-chip 3s -.7s ease-in-out infinite; }\n.dxr-eyebrow { color: #5eead4; font-size: 10px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }\n/* Georgia headline \u2014 the house pairing of a serif headline over Inter UI copy. */\n.dxr-loader h2 {\n  margin: 10px auto 10px;\n  max-width: 520px;\n  font-family: var(--dxr-serif);\n  font-size: clamp(23px, 5vw, 38px);\n  font-weight: 500;\n  line-height: 1.08;\n  letter-spacing: -.02em;\n}\n.dxr-loader-copy > p { margin: 0 auto; max-width: 46ch; color: #94a3b8; 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(148, 163, 184, .16);\n  border-radius: 12px;\n  background: rgba(255, 255, 255, .04);\n  text-align: left;\n}\n.dxr-ad .dxr-num { color: #2dd4bf; 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: #8ba0b9; 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, #14b8a6, #2dd4bf, #5eead4);\n  box-shadow: 0 0 16px rgba(45, 212, 191, .5);\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: #64748b;\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(248, 113, 113, .4);\n  border-radius: 9px;\n  background: rgba(248, 113, 113, .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";
/** Word's highlighter palette (ST_HighlightColor) with its screen colours, in Word's order. */
export declare const HIGHLIGHT_COLORS: ReadonlyArray<{
    value: string;
    label: string;
    css: string;
}>;
/** The fonts every Word install has; the document's own fonts are added on top at open. */
export declare const COMMON_FONTS: readonly string[];
/**
 * 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`, `data-hf`, `data-rev`, `data-cmt`) 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