/* ===== OWN COPY of the shared theme.css + tool.css rules this tool uses (rule 171, separation plan P3, 2026-10-25) =====
   Copied from theme  by devkit/sep.js (rules that match this box in every state + the class names its own scripts add),
   every selector scoped to :where(#th-tool[data-module="html-text"] *). The shared files no longer reach inside this box (data-own).
   Change these rules only for THIS tool, in its own chat. ===== */
/* theme.css copy */
:root:where(#th-tool[data-module="html-text"] *){
  --bg:#FAFAFC; --surface:#FFFFFF; --surface-2:#F2F3F8; --ink:#0B1020; --muted:#5B6275; --line:#E4E6EE;
  --brand:#4338CA; --brand-2:#4F46E5; --brand-ink:#3730A3; --brand-soft:#EEF0FF; --on-brand:#FFFFFF;
  --ai:#7C3AED; --ai-ink:#6D28D9; --ai-soft:#F4EFFF; --blue:#2563EB;
  --grad:linear-gradient(135deg,#2563EB 0%,#4F46E5 45%,#7C3AED 100%);
  --warn:#9A4A07; --ok:#1B6B3A;
  --shadow:0 1px 2px rgba(11,16,32,.04),0 4px 16px rgba(11,16,32,.05);
  --shadow-lg:0 2px 4px rgba(11,16,32,.04),0 24px 60px rgba(11,16,32,.10);
  --radius:16px; --radius-sm:10px;
  --font:'Geist','Geist Variable',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Instrument Serif',ui-serif,Georgia,serif;
  --mono:'Geist Mono','Geist Mono Variable',ui-monospace,SFMono-Regular,Menlo,monospace;
  --dot:rgba(11,16,32,.06); --glow-a:rgba(37,99,235,.14); --glow-b:rgba(124,58,237,.14);
  --stripe:rgba(11,16,32,.035);
  color-scheme:light;
}
:root[data-theme="dark"]:where(#th-tool[data-module="html-text"] *){
  --bg:#07090F; --surface:#0E121B; --surface-2:#161B27; --ink:#EEF0F6; --muted:#9AA3B8; --line:#212738;
  --brand:#6366F1; --brand-2:#4F46E5; --brand-ink:#A5B4FC; --brand-soft:#171A36; --on-brand:#FFFFFF;
  --ai:#8B5CF6; --ai-ink:#C4B5FD; --ai-soft:#1C1733; --blue:#60A5FA;
  --grad:linear-gradient(135deg,#60A5FA 0%,#818CF8 45%,#C084FC 100%);
  --shadow:0 1px 0 rgba(255,255,255,.03) inset,0 1px 2px rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.35);
  --shadow-lg:0 1px 0 rgba(255,255,255,.04) inset,0 24px 60px rgba(0,0,0,.55);
  --dot:rgba(255,255,255,.045); --glow-a:rgba(59,130,246,.22); --glow-b:rgba(139,92,246,.24);
  --stripe:rgba(255,255,255,.035);
  color-scheme:dark;
}@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]):where(#th-tool[data-module="html-text"] *){
  --bg:#07090F; --surface:#0E121B; --surface-2:#161B27; --ink:#EEF0F6; --muted:#9AA3B8; --line:#212738;
  --brand:#6366F1; --brand-2:#4F46E5; --brand-ink:#A5B4FC; --brand-soft:#171A36; --on-brand:#FFFFFF;
  --ai:#8B5CF6; --ai-ink:#C4B5FD; --ai-soft:#1C1733; --blue:#60A5FA;
  --grad:linear-gradient(135deg,#60A5FA 0%,#818CF8 45%,#C084FC 100%);
  --shadow:0 1px 0 rgba(255,255,255,.03) inset,0 1px 2px rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.35);
  --shadow-lg:0 1px 0 rgba(255,255,255,.04) inset,0 24px 60px rgba(0,0,0,.55);
  --dot:rgba(255,255,255,.045); --glow-a:rgba(59,130,246,.22); --glow-b:rgba(139,92,246,.24);
  --stripe:rgba(255,255,255,.035);
  color-scheme:dark;
  }}
:root:where(#th-tool[data-module="html-text"] *){
  /* spacing scale (4 px steps) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px;
  /* what the spacing is for */
  --gap-label:6px;      /* label → its box, box → its hint line */
  --gap-msg:12px;       /* v1.40: a box → the message or hint under it — the smallest space between two different things */
  --gap-min:8px;        /* v1.40: the absolute minimum between any two boxes, buttons or messages (the spacing check fails below it) */
  --gap-item:12px;      /* items in a list, choice cards in a box */
  --gap-grid:16px;      /* boxes/cards side by side */
  --gap-block:20px;     /* blocks inside one part of a tool (input → result → check) */
  --gap-section:22px;   /* main parts of a tool card */
  --sec-pad:26px;       /* space above a new part that starts with a divider line */
  --pad-box:16px;       /* inside a bordered box */
  --pad-card:12px 14px; /* inside a small choice card */
  --pad-result:24px 26px; /* inside the big result panel */
  --r-box:16px; --r-card:12px; --r-btn:12px; --r-pill:999px;
  --tap:44px;           /* smallest thing a finger has to hit */
  --h-btn:44px;         /* v1.39.1 THE button height (owner rule: every normal button is this tall — never set a custom height) */
  --h-btn-sm:36px;      /* small buttons in tool toolbars (.btn.sm) */
  --pad-field:14px 16px; /* inside every text box and output panel: text never touches a border */
  /* type scale = the Word Counter / Case Converter / KM to Miles standard; never bigger */
  --fs-meta:12.5px;     /* counts, small notes */
  --fs-label:13px;      /* field labels, box titles, hints */
  --fs-sm:14px;         /* checklist lines, choice text */
  --fs-body:15px;       /* sentences, buttons, part titles */
  --fs-input:20px;      /* the main text box */
  --fs-slug:22px;       /* one-line mono result */
  --fs-result:clamp(30px,3vw,36px); /* big number result (v1.37: was up to 48 px — owner: too big) */
  /* v1.37 ToolHa type standard (owner 2026-09-30): nothing bigger than these, no text smaller than --fs-min */
  --fs-hero:clamp(36px,5vw,60px);  /* ONE big hero title per landing page (home, All tools, A–Z, company pages) */
  --fs-h1:clamp(30px,3.4vw,42px);  /* page / tool title */
  --fs-h2:clamp(22px,2.2vw,28px);  /* section titles */
  --fs-h3:clamp(17px,1.5vw,19px);  /* v1.41.3: a smaller title for an optional part inside a tool (between --fs-h2 and a box title) */
  --fs-min:12.5px;                 /* smallest normal text (notes, units, counts) */
  --fs-tag:12px;                   /* only UPPERCASE labels, badges and number pins */
  --lh-tight:1.35; --lh-text:1.5;
}@media (width <= 768px){
:root:where(#th-tool[data-module="html-text"] *){--pad-field:12px 14px;--gap-grid:14px;--gap-block:16px;--gap-section:18px;--sec-pad:22px;--pad-box:14px;--pad-result:20px;--fs-slug:19px}}
*:where(#th-tool[data-module="html-text"] *){box-sizing:border-box}
html:where(#th-tool[data-module="html-text"] *){-webkit-text-size-adjust:100%}
body:where(#th-tool[data-module="html-text"] *){margin:0;font-family:var(--font);background:var(--bg);color:var(--ink);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a:where(#th-tool[data-module="html-text"] *){color:var(--brand-ink);text-decoration:none}
a:hover:where(#th-tool[data-module="html-text"] *){text-decoration:underline;text-underline-offset:3px}
h1:where(#th-tool[data-module="html-text"] *),h2:where(#th-tool[data-module="html-text"] *),h3:where(#th-tool[data-module="html-text"] *){line-height:1.1;letter-spacing:-.02em;margin:0}
p:where(#th-tool[data-module="html-text"] *){margin:0}
button:where(#th-tool[data-module="html-text"] *),input:where(#th-tool[data-module="html-text"] *),select:where(#th-tool[data-module="html-text"] *),textarea:where(#th-tool[data-module="html-text"] *){font:inherit;color:inherit}
:focus-visible:where(#th-tool[data-module="html-text"] *){outline:3px solid color-mix(in srgb,var(--ai) 55%,transparent);outline-offset:2px;border-radius:6px}
.wrap:where(#th-tool[data-module="html-text"] *){max-width:1280px;margin:0 auto;padding:0 32px}
.btn:where(#th-tool[data-module="html-text"] *){height:var(--h-btn);padding:0 18px;border-radius:12px;border:1px solid transparent;display:inline-flex;align-items:center;gap:8px;font-weight:650;cursor:pointer;font-size:15px}
:root:where(#th-tool[data-module="html-text"] *){
  --btn-grad:linear-gradient(120deg,var(--brand-2) 0%,var(--ai) 100%);
  /* v1.35 main typing box (see tool.css "v1.35"): same height as the homepage search box (76 px, 72 px on phones) */
  --h-main:76px;--r-main:20px;
  --field-ring:linear-gradient(120deg,var(--brand-2) 0%,var(--ai) 100%);
  --field-glow:0 6px 22px -10px color-mix(in srgb,var(--ai) 45%,transparent);
  --field-glow-hover:0 8px 28px -10px color-mix(in srgb,var(--ai) 60%,transparent);
  --btn-grad-hover:linear-gradient(120deg,color-mix(in srgb,var(--brand-2) 40%,var(--ai)) 0%,color-mix(in srgb,var(--ai) 88%,#fff) 100%);
  --btn-glow:0 6px 18px -9px color-mix(in srgb,var(--ai) 60%,transparent);
  --btn-glow-hover:0 10px 26px -9px color-mix(in srgb,var(--ai) 85%,transparent);
  --btn-glow-press:0 3px 10px -6px color-mix(in srgb,var(--ai) 70%,transparent);
  --btn2-border:color-mix(in srgb,var(--brand) 24%,var(--line));
  --btn2-border-hover:color-mix(in srgb,var(--brand) 55%,var(--line));
  --btn2-bg-hover:color-mix(in srgb,var(--brand) 5%,var(--surface));
  --btn2-shade:0 8px 20px -12px color-mix(in srgb,var(--brand) 60%,transparent);
}
.btn:where(#th-tool[data-module="html-text"] *){transition:border-color .3s ease,background-color .3s ease,box-shadow .3s ease,color .2s ease}
.btn-brand:where(#th-tool[data-module="html-text"] *){position:relative;isolation:isolate;border-color:transparent;color:#fff;background:var(--btn-grad) border-box;box-shadow:var(--btn-glow);filter:none}
.btn-brand:where(#th-tool[data-module="html-text"] *)::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;pointer-events:none;background:var(--btn-grad-hover);opacity:0;transition:opacity .35s ease}
.btn-brand:hover:where(#th-tool[data-module="html-text"] *){text-decoration:none;filter:none;box-shadow:var(--btn-glow-hover)}
.btn-brand:hover:where(#th-tool[data-module="html-text"] *)::before{opacity:1}
.btn-brand:active:where(#th-tool[data-module="html-text"] *){box-shadow:var(--btn-glow-press)}
.btn.done:where(#th-tool[data-module="html-text"] *)::before{opacity:0}
.btn-ghost:where(#th-tool[data-module="html-text"] *){background:var(--surface);border-color:var(--btn2-border);color:var(--ink);box-shadow:0 1px 2px rgba(11,16,32,.04)}
.btn-ghost:hover:where(#th-tool[data-module="html-text"] *){text-decoration:none;background:var(--btn2-bg-hover);border-color:var(--btn2-border-hover);box-shadow:var(--btn2-shade)}
.btn[disabled]:where(#th-tool[data-module="html-text"] *)::before{display:none}@media (prefers-reduced-motion:reduce){
.btn:where(#th-tool[data-module="html-text"] *),.btn:where(#th-tool[data-module="html-text"] *)::before{transition:none}}
.chip:where(#th-tool[data-module="html-text"] *){display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:14px;font-weight:550;white-space:nowrap}
.chip:hover:where(#th-tool[data-module="html-text"] *){border-color:color-mix(in srgb,var(--brand) 45%,var(--line));text-decoration:none}
body:has(>.hdr):where(#th-tool[data-module="html-text"] *)::before{content:"";position:absolute;left:0;right:0;top:0;height:760px;z-index:-1;pointer-events:none;background-image:linear-gradient(var(--dot) 1px,transparent 1px),linear-gradient(90deg,var(--dot) 1px,transparent 1px);background-size:56px 56px;background-position:50% -1px;-webkit-mask-image:radial-gradient(ellipse 75% 100% at 50% 0%,#000 35%,transparent 80%);mask-image:radial-gradient(ellipse 75% 100% at 50% 0%,#000 35%,transparent 80%)}@media (width <= 768px){
body:has(>.hdr):where(#th-tool[data-module="html-text"] *)::before{height:560px;-webkit-mask-image:linear-gradient(#000 45%,transparent);mask-image:linear-gradient(#000 45%,transparent)}}@media print{
body:where(#th-tool[data-module="html-text"] *)::before{display:none!important;content:none!important}}
.card:where(#th-tool[data-module="html-text"] *){background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.inp:where(#th-tool[data-module="html-text"] *){height:46px;border:1px solid var(--line);border-radius:12px;padding:0 14px;background:var(--surface);font-size:16px;width:100%}
textarea.inp:where(#th-tool[data-module="html-text"] *){height:auto;padding:var(--pad-field);line-height:var(--lh-text)}
.inp:focus:where(#th-tool[data-module="html-text"] *){outline:none;border-color:var(--ai);box-shadow:0 0 0 4px color-mix(in srgb,var(--ai) 18%,transparent)}
select.inp:where(#th-tool[data-module="html-text"] *){appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
table.t:where(#th-tool[data-module="html-text"] *){width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;font-variant-numeric:tabular-nums}
table.t th:where(#th-tool[data-module="html-text"] *),table.t td:where(#th-tool[data-module="html-text"] *){padding:11px 16px;text-align:left;border-bottom:1px solid var(--line);font-size:15.5px}
table.t th:where(#th-tool[data-module="html-text"] *){background:var(--surface-2);font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
table.t tr:last-child td:where(#th-tool[data-module="html-text"] *){border-bottom:0}@media (width <= 1024px){
.wrap:where(#th-tool[data-module="html-text"] *){padding:0 18px}}@media (width <= 768px){
body:where(#th-tool[data-module="html-text"] *){padding-bottom:68px}}@media (width <= 576px){
:root:where(#th-tool[data-module="html-text"] *){--h-main:72px}}
.chip:where(#th-tool[data-module="html-text"] *){white-space:nowrap}
[hidden]:where(#th-tool[data-module="html-text"] *){display:none!important}
.row:where(#th-tool[data-module="html-text"] *){display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.r mark:where(#th-tool[data-module="html-text"] *){background:color-mix(in srgb,var(--brand) 16%,transparent);color:inherit;border-radius:4px;padding:0 1px}
:root:where(#th-tool[data-module="html-text"] *){--acc0:#7C3AED;--acc1:#2563EB;--acc2:#0D9488;--acc3:#D97706;--acc4:#DB2777;--acc5:#059669}
:root[data-theme="dark"]:where(#th-tool[data-module="html-text"] *){--acc0:#8B5CF6;--acc1:#60A5FA;--acc2:#2DD4BF;--acc3:#FBBF24;--acc4:#F472B6;--acc5:#34D399}@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]):where(#th-tool[data-module="html-text"] *){--acc0:#8B5CF6;--acc1:#60A5FA;--acc2:#2DD4BF;--acc3:#FBBF24;--acc4:#F472B6;--acc5:#34D399}}
small:where(#th-tool[data-module="html-text"] *){font-size:max(var(--fs-min),.85em)}
.btn:not(.tool-actions .btn):where(#th-tool[data-module="html-text"] *){height:auto!important;min-height:var(--h-btn);padding-top:8px;padding-bottom:8px;line-height:1.25}
.btn.sm:not(.tool-actions .btn):where(#th-tool[data-module="html-text"] *){height:auto!important;min-height:var(--h-btn-sm);padding-top:6px;padding-bottom:6px}
html:where(#th-tool[data-module="html-text"] *),body:where(#th-tool[data-module="html-text"] *){overflow-x:clip}@supports (appearance:base-select){
html select:not([multiple]):not([size]):where(#th-tool[data-module="html-text"] *),html select:not([multiple]):not([size]):where(#th-tool[data-module="html-text"] *)::picker(select){appearance:base-select}
html select:not([multiple]):not([size]):where(#th-tool[data-module="html-text"] *){align-items:center}
html select:not([multiple]):not([size]):where(#th-tool[data-module="html-text"] *)::picker-icon{display:none}
html select:not([multiple]):not([size]):where(#th-tool[data-module="html-text"] *)::picker(select){
    box-sizing:border-box;min-inline-size:anchor-size(self-inline);
    max-inline-size:min(calc(100% - 16px),max(anchor-size(self-inline),20rem));
    max-block-size:min(24rem,calc(100dvh - 16px));overflow:auto;overscroll-behavior:contain;
    position-area:var(--th-pick-area,block-end span-all);justify-self:anchor-center;margin:4px 8px;padding:4px;border:1px solid var(--line);border-radius:12px;
    background:var(--surface);color:var(--ink);box-shadow:0 12px 32px rgba(15,23,42,.18);
    position-try-order:normal;position-try-fallbacks:flip-block,--th-pick-fit}
html select:not([multiple]):not([size]) option:where(#th-tool[data-module="html-text"] *){
    padding:8px 10px;border-radius:8px;white-space:normal;overflow-wrap:anywhere;line-height:1.35;gap:8px;min-block-size:36px}
html select:not([multiple]):not([size]) option:is(:hover,:focus-visible):where(#th-tool[data-module="html-text"] *){background:color-mix(in srgb,var(--brand) 10%,transparent);outline:none}
html select:not([multiple]):not([size]) option:checked:where(#th-tool[data-module="html-text"] *){background:color-mix(in srgb,var(--brand) 16%,transparent);color:var(--brand-ink);font-weight:600}
html select:not([multiple]):not([size]) option:disabled:where(#th-tool[data-module="html-text"] *){opacity:.5}
html select:not([multiple]):not([size]) optgroup:where(#th-tool[data-module="html-text"] *){font-weight:700;padding-block:4px}
html select:not([multiple]):not([size]) option:where(#th-tool[data-module="html-text"] *)::checkmark{color:var(--brand-ink)}}
/* tool.css copy */
:root:where(#th-tool[data-module="html-text"] *){--h-drop:17.5rem}
.t-drop:where(#th-tool[data-module="html-text"] *){position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--gap-item);min-height:var(--h-drop);padding:var(--pad-result);border:2px dashed color-mix(in srgb,var(--brand) 45%,var(--line));border-radius:var(--r-card);background:color-mix(in srgb,var(--brand) 4%,var(--surface));text-align:center;cursor:pointer;transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease}
.t-drop[hidden]:where(#th-tool[data-module="html-text"] *){display:none}
.t-drop:hover:where(#th-tool[data-module="html-text"] *),.t-drop.is-drag:where(#th-tool[data-module="html-text"] *){border-color:var(--brand);border-style:solid;background:color-mix(in srgb,var(--brand) 10%,var(--surface))}
.t-drop:focus-visible:where(#th-tool[data-module="html-text"] *){outline:none;border-color:var(--brand);border-style:solid;box-shadow:var(--field-glow-hover)}
.t-drop-i:where(#th-tool[data-module="html-text"] *){transition:transform .2s ease}
.t-drop:hover .t-drop-i:where(#th-tool[data-module="html-text"] *),.t-drop.is-drag .t-drop-i:where(#th-tool[data-module="html-text"] *){transform:translateY(-3px) scale(1.03)}@media (prefers-reduced-motion:reduce){
.t-drop-i:where(#th-tool[data-module="html-text"] *){transition:none}
.t-drop:hover .t-drop-i:where(#th-tool[data-module="html-text"] *),.t-drop.is-drag .t-drop-i:where(#th-tool[data-module="html-text"] *){transform:none}}
.tool:where(#th-tool[data-module="html-text"] *){padding:24px;display:flex;flex-direction:column;gap:18px;position:relative;border-radius:24px}
.tool:where(#th-tool[data-module="html-text"] *)::before{content:"";position:absolute;inset:-1px;border-radius:25px;padding:1px;background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 55%,transparent),transparent 35%,transparent 65%,color-mix(in srgb,var(--ai) 55%,transparent));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}@media (width <= 576px){
table.t th:where(#th-tool[data-module="html-text"] *),table.t td:where(#th-tool[data-module="html-text"] *){padding:10px 10px;font-size:14.5px}}@media (width <= 1024px){
.tool:where(#th-tool[data-module="html-text"] *){padding:16px}}
.tool-zone:where(#th-tool[data-module="html-text"] *){padding-bottom:8px}
.tool:where(#th-tool[data-module="html-text"] *){padding:22px 24px 20px;gap:16px}
.tt-label:where(#th-tool[data-module="html-text"] *){font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.chip[aria-pressed="true"]:where(#th-tool[data-module="html-text"] *){background:var(--ink);color:var(--bg);border-color:var(--ink)}
.inp.sm:where(#th-tool[data-module="html-text"] *){height:36px;font-size:14px;padding:0 34px 0 12px;width:auto;border-radius:10px;background-position:calc(100% - 16px) 16px,calc(100% - 11px) 16px}
.btn.sm:where(#th-tool[data-module="html-text"] *){height:var(--h-btn-sm);padding:0 12px;font-size:14px;border-radius:10px}
.tool-foot:where(#th-tool[data-module="html-text"] *){display:flex;flex-direction:column;gap:12px;border-top:1px dashed var(--line);padding-top:14px}
.hist:where(#th-tool[data-module="html-text"] *){display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hist .chip:where(#th-tool[data-module="html-text"] *){cursor:pointer;font-size:13px;font-variant-numeric:tabular-nums}
.linkish:where(#th-tool[data-module="html-text"] *){background:none;border:0;color:var(--muted);cursor:pointer;font-size:13px;text-decoration:underline;text-underline-offset:3px;padding:0}
#th-tool .t-fullrow:where(#th-tool[data-module="html-text"] *){grid-column:1/-1!important;flex:1 1 100%!important;max-width:100%!important;min-width:0}
#th-tool .t-selw:where(#th-tool[data-module="html-text"] *){display:contents}
#th-tool .t-selw.on:where(#th-tool[data-module="html-text"] *){display:grid;min-width:0;max-width:100%}
#th-tool .t-selw.on>select:where(#th-tool[data-module="html-text"] *){grid-area:1/1;width:100%!important;max-width:100%!important;height:auto!important;color:transparent!important;-webkit-text-fill-color:transparent;text-shadow:none}
#th-tool .t-selw.on>select option:where(#th-tool[data-module="html-text"] *){color:var(--ink);-webkit-text-fill-color:var(--ink)}
#th-tool .t-selt:where(#th-tool[data-module="html-text"] *){display:none}
#th-tool .t-selw.on>.t-selt:where(#th-tool[data-module="html-text"] *){display:block;grid-area:1/1;align-self:center;min-width:0;pointer-events:none;white-space:normal;overflow-wrap:anywhere;text-align:start;z-index:1}
#th-tool .t-fullrow select:where(#th-tool[data-module="html-text"] *),#th-tool select.t-fullrow:where(#th-tool[data-module="html-text"] *){width:100%;max-width:100%}
#th-tool:where(#th-tool[data-module="html-text"] *){overflow-wrap:break-word}
#th-tool .chip:where(#th-tool[data-module="html-text"] *){white-space:normal;overflow-wrap:anywhere}
#th-tool .hist .chip:where(#th-tool[data-module="html-text"] *){white-space:normal;overflow-wrap:anywhere;text-overflow:clip;overflow:visible;text-align:left}@media (width <= 576px){
.tool:where(#th-tool[data-module="html-text"] *){padding:16px}}
.tool-hero:where(#th-tool[data-module="html-text"] *){position:relative;overflow-x:clip;padding-bottom:30px}
.tool-hero:where(#th-tool[data-module="html-text"] *)::after{content:"";position:absolute;left:50%;top:120px;width:900px;max-width:100%;height:360px;transform:translateX(-50%);background:radial-gradient(closest-side at 35% 50%,var(--glow-a),transparent 70%),radial-gradient(closest-side at 65% 50%,var(--glow-b),transparent 70%);filter:blur(24px);opacity:.8;pointer-events:none}
.tool-hero>.wrap:where(#th-tool[data-module="html-text"] *){position:relative;z-index:1}
.tool-zone .tool:where(#th-tool[data-module="html-text"] *){max-width:1040px;margin:0 auto;background:var(--surface);box-shadow:var(--shadow-lg)}
.tool-zone .tool:where(#th-tool[data-module="html-text"] *){transition:box-shadow .25s}
.tool-zone .tool:focus-within:where(#th-tool[data-module="html-text"] *){box-shadow:var(--shadow-lg),0 0 0 4px color-mix(in srgb,var(--brand) 14%,transparent)}
.uc-dir:where(#th-tool[data-module="html-text"] *){display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);align-self:center;max-width:100%;overflow-x:auto;scrollbar-width:none}
.uc-dir button:where(#th-tool[data-module="html-text"] *){border:0;background:transparent;color:var(--muted);font-weight:650;font-size:14px;padding:8px 16px;border-radius:999px;cursor:pointer;white-space:nowrap;display:inline-flex;gap:6px;align-items:center;transition:.18s}
.uc-dir button:hover:where(#th-tool[data-module="html-text"] *){color:var(--ink)}
.uc-dir button[aria-pressed="true"]:where(#th-tool[data-module="html-text"] *){background:var(--grad);color:#fff;box-shadow:0 6px 18px color-mix(in srgb,var(--brand) 35%,transparent)}@container tool (width <= 22.5rem){
.uc-dir button:where(#th-tool[data-module="html-text"] *){padding:8px 12px;font-size:13px}}@media print{
html:root:where(#th-tool[data-module="html-text"] *),html:root[data-theme="dark"]:where(#th-tool[data-module="html-text"] *),html:root:not([data-theme="light"]):where(#th-tool[data-module="html-text"] *){--bg:#fff;--surface:#fff;--surface-2:#F3F4F6;--ink:#111;--muted:#4B5563;--line:#D1D5DB;--brand-soft:#EEF0FF;--brand-ink:#3730A3;color-scheme:light}
body:where(#th-tool[data-module="html-text"] *){background:#fff!important;color:#111}
dialog:where(#th-tool[data-module="html-text"] *){display:none!important}
.tool-hero:where(#th-tool[data-module="html-text"] *){background:none!important;padding:0!important}
.tool:where(#th-tool[data-module="html-text"] *){box-shadow:none!important;border:1px solid #D1D5DB!important;break-inside:auto}
.tool :is(tr,li,figure,img,svg,canvas,.t-msg,.t-btnrow,.uc-thermo):where(#th-tool[data-module="html-text"] *){break-inside:avoid}
.tool :is(h2,h3,h4,legend,summary,label,thead,.t-bx-h,.t-sec-h):where(#th-tool[data-module="html-text"] *){break-after:avoid}
body:where(#th-tool[data-module="html-text"] *){padding-bottom:0!important}
.tool-zone:where(#th-tool[data-module="html-text"] *){padding-bottom:0!important}
.tool .btn:where(#th-tool[data-module="html-text"] *),.uc-dir:where(#th-tool[data-module="html-text"] *),.hist:where(#th-tool[data-module="html-text"] *){display:none!important}
details:not([open])>*:not(summary):where(#th-tool[data-module="html-text"] *){display:none}
a:where(#th-tool[data-module="html-text"] *){color:inherit;text-decoration:none}}@media print{
.tool:where(#th-tool[data-module="html-text"] *)::before,.tool:where(#th-tool[data-module="html-text"] *)::after,.tool-hero:where(#th-tool[data-module="html-text"] *)::after{display:none!important;content:none!important}}
.t-stack:not([hidden]):where(#th-tool[data-module="html-text"] *){display:flex;flex-direction:column;gap:var(--gap-block)}
.t-box:where(#th-tool[data-module="html-text"] *){margin:0;min-width:0;border:1px solid var(--line);border-radius:var(--r-box);padding:var(--pad-box);background:var(--surface);display:flex;flex-direction:column;gap:var(--gap-item)}
.t-box>legend:where(#th-tool[data-module="html-text"] *){float:left;width:100%;padding:0;margin:0 0 var(--gap-item);font-size:var(--fs-label);font-weight:650;color:var(--ink)}
.t-tone:where(#th-tool[data-module="html-text"] *){--tone:var(--brand);border-color:color-mix(in srgb,var(--tone) 40%,var(--line));border-top:5px solid var(--tone);background:color-mix(in srgb,var(--tone) 8%,var(--surface))}
.t-tone>legend:where(#th-tool[data-module="html-text"] *){color:color-mix(in srgb,var(--tone) 62%,var(--ink))}
.t-tone>legend small:where(#th-tool[data-module="html-text"] *){color:var(--muted)}
.t-tone>legend:where(#th-tool[data-module="html-text"] *)::before{content:"";display:inline-block;width:10px;height:10px;margin-right:8px;border-radius:50%;background:var(--tone)}
.t-tone-0:where(#th-tool[data-module="html-text"] *){--tone:var(--acc0)}
.t-choices:where(#th-tool[data-module="html-text"] *){clear:both;display:flex;flex-direction:column;gap:var(--gap-item)}
.t-choice:where(#th-tool[data-module="html-text"] *){display:flex;align-items:flex-start;gap:var(--sp-3);min-height:var(--tap);padding:var(--pad-card);border:1.5px solid var(--line);border-radius:var(--r-card);background:var(--surface-2);cursor:pointer;font-size:var(--fs-sm);line-height:var(--lh-tight);transition:border-color .15s,background-color .15s}
.t-choice:hover:where(#th-tool[data-module="html-text"] *){border-color:color-mix(in srgb,var(--brand) 45%,var(--line))}
.t-choice:has(input:checked):where(#th-tool[data-module="html-text"] *){border-color:var(--brand);background:color-mix(in srgb,var(--brand) 9%,var(--surface))}
.t-choice>input:where(#th-tool[data-module="html-text"] *){flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--brand)}
.t-hint:where(#th-tool[data-module="html-text"] *){display:block;margin-top:var(--gap-label);font-size:var(--fs-label);color:var(--muted)}
.t-q:not([hidden]):where(#th-tool[data-module="html-text"] *){display:flex;flex-direction:column;gap:var(--gap-msg)}
.t-msg:where(#th-tool[data-module="html-text"] *){margin:0;padding:10px 14px;border-radius:var(--r-card);font-size:var(--fs-sm);font-weight:600;line-height:var(--lh-text);color:var(--warn);background:color-mix(in srgb,var(--warn) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--warn) 30%,var(--line))}
.t-msg.is-err:where(#th-tool[data-module="html-text"] *){color:var(--bad,#c0392b);background:color-mix(in srgb,var(--bad,#c0392b) 8%,var(--surface));border-color:color-mix(in srgb,var(--bad,#c0392b) 30%,var(--line))}
.t-msg.is-ok:where(#th-tool[data-module="html-text"] *){color:var(--ok,#1e8e5a);background:color-mix(in srgb,var(--ok,#1e8e5a) 8%,var(--surface));border-color:color-mix(in srgb,var(--ok,#1e8e5a) 30%,var(--line))}
.t-msg.is-info:where(#th-tool[data-module="html-text"] *){color:var(--ink);background:var(--brand-soft);border-color:color-mix(in srgb,var(--brand) 25%,var(--line))}
.t-msg[hidden]:where(#th-tool[data-module="html-text"] *),.t-q[hidden]:where(#th-tool[data-module="html-text"] *){display:none}
:root[data-theme="dark"] .t-msg:where(#th-tool[data-module="html-text"] *){color:color-mix(in srgb,var(--warn) 40%,#fff)}
:root[data-theme="dark"] .t-msg.is-err:where(#th-tool[data-module="html-text"] *){color:color-mix(in srgb,var(--bad,#c0392b) 45%,#fff)}
:root[data-theme="dark"] .t-msg.is-ok:where(#th-tool[data-module="html-text"] *){color:color-mix(in srgb,var(--ok,#1e8e5a) 40%,#fff)}
:root[data-theme="dark"] .t-msg.is-info:where(#th-tool[data-module="html-text"] *){color:var(--ink)}@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .t-msg:where(#th-tool[data-module="html-text"] *){color:color-mix(in srgb,var(--warn) 40%,#fff)}
:root:not([data-theme="light"]) .t-msg.is-err:where(#th-tool[data-module="html-text"] *){color:color-mix(in srgb,var(--bad,#c0392b) 45%,#fff)}
:root:not([data-theme="light"]) .t-msg.is-ok:where(#th-tool[data-module="html-text"] *){color:color-mix(in srgb,var(--ok,#1e8e5a) 40%,#fff)}
:root:not([data-theme="light"]) .t-msg.is-info:where(#th-tool[data-module="html-text"] *){color:var(--ink)}}
.t-tw:where(#th-tool[data-module="html-text"] *){overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.t-table:where(#th-tool[data-module="html-text"] *){width:100%;border-collapse:collapse;font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.t-table th:where(#th-tool[data-module="html-text"] *),.t-table td:where(#th-tool[data-module="html-text"] *){padding:10px 14px;text-align:left;border-bottom:1px solid var(--line)}
.t-table thead th:where(#th-tool[data-module="html-text"] *){font-size:var(--fs-label);color:var(--muted);font-weight:650;background:var(--surface-2)}
.t-table tbody tr:last-child td:where(#th-tool[data-module="html-text"] *){border-bottom:0}
.tool :is(input,textarea):where(#th-tool[data-module="html-text"] *)::placeholder{color:color-mix(in srgb,var(--muted) 70%,transparent);opacity:1;font-weight:400;font-size:max(12px,.875em);letter-spacing:0}
:root:where(#th-tool[data-module="html-text"] *){--glow-card:0 16px 36px -20px color-mix(in srgb,var(--ai) 50%,transparent),0 1px 2px rgba(11,16,32,.04)}
.ag-hint:where(#th-tool[data-module="html-text"] *){margin:0;font-size:var(--fs-label);line-height:var(--lh-text);color:var(--muted)}
.ag-hint b:where(#th-tool[data-module="html-text"] *){color:var(--ink);font-weight:650}
.ag-hint .linkish:where(#th-tool[data-module="html-text"] *){margin-left:6px;font-size:var(--fs-label);color:var(--brand-ink);font-weight:600}
.ag-bh:where(#th-tool[data-module="html-text"] *){display:flex;align-items:center;gap:8px}
.ag-bt:where(#th-tool[data-module="html-text"] *){margin:0;font-size:var(--fs-body);font-weight:700;color:var(--ink);line-height:var(--lh-tight)}
.ag-i:where(#th-tool[data-module="html-text"] *){flex:none;display:inline-grid;place-items:center;width:22px;height:22px;padding:0;border-radius:50%;border:1px solid color-mix(in srgb,var(--brand) 35%,var(--line));background:var(--brand-soft);color:var(--brand-ink);font:italic 700 13px/1 Georgia,serif;cursor:help}
.ag-i:hover:where(#th-tool[data-module="html-text"] *),.ag-i[aria-expanded="true"]:where(#th-tool[data-module="html-text"] *){background:var(--brand);border-color:var(--brand);color:#fff}
.ag-i:focus-visible:where(#th-tool[data-module="html-text"] *){outline:2px solid var(--ai);outline-offset:2px}
.ag-tip:where(#th-tool[data-module="html-text"] *){margin:8px 0 0;padding:10px 12px;border-radius:12px;background:var(--brand-soft);font-size:var(--fs-label);line-height:var(--lh-text);color:var(--ink)}
.ag-tip[hidden]:where(#th-tool[data-module="html-text"] *){display:none}
.ag-how>summary:where(#th-tool[data-module="html-text"] *){list-style:none;display:flex;align-items:center;gap:10px;width:100%;min-height:var(--tap);cursor:pointer;border-radius:10px;font-size:var(--fs-sm);font-weight:650;color:var(--ink)}
.ag-how>summary:where(#th-tool[data-module="html-text"] *)::-webkit-details-marker{display:none}
.ag-sum-w:where(#th-tool[data-module="html-text"] *){display:inline-flex;align-items:center;gap:10px}
.ag-how>summary:hover .ag-sum-t:where(#th-tool[data-module="html-text"] *){color:var(--brand-ink);text-decoration:underline;text-underline-offset:3px}
.ag-how>summary:hover .ag-i:where(#th-tool[data-module="html-text"] *),.ag-how[open]>summary .ag-i:where(#th-tool[data-module="html-text"] *){background:var(--brand);border-color:var(--brand);color:#fff}
.ag-how>summary:focus-visible:where(#th-tool[data-module="html-text"] *){outline:2px solid var(--ai);outline-offset:2px}
.ag-how .ag-howt:where(#th-tool[data-module="html-text"] *){margin-top:var(--gap-label);padding:var(--pad-field);border-radius:var(--r-card);background:var(--surface-2)}
.ag-howt:where(#th-tool[data-module="html-text"] *){margin-top:10px;display:grid;gap:8px;font-size:var(--fs-sm);line-height:var(--lh-text);color:var(--ink)}
.ag-howt p:where(#th-tool[data-module="html-text"] *){margin:0}@media print{
.ag-i:where(#th-tool[data-module="html-text"] *),.ag-hint .linkish:where(#th-tool[data-module="html-text"] *){display:none!important}}
:where(.tool) :is(input,select,textarea):where(#th-tool[data-module="html-text"] *){max-width:100%}
.tool .chip:where(#th-tool[data-module="html-text"] *){max-width:100%}
.tool .hist .row:where(#th-tool[data-module="html-text"] *){min-width:0;max-width:100%}
.tool .hist .chip:where(#th-tool[data-module="html-text"] *){min-width:0;overflow:hidden}@container tool (width <= 22.5rem){
:where(.tool) .uc-dir:where(:not(:has(>:nth-child(4))))>button:where(#th-tool[data-module="html-text"] *){flex:0 1 auto;min-width:0;white-space:normal;flex-wrap:wrap;row-gap:0;justify-content:center;text-align:center}}@container tool (width <= 22.5rem){
:where(.tool) .uc-dir:where(:not(:has(>:nth-child(4))))>button:has(>span)>svg:where(#th-tool[data-module="html-text"] *){display:none}}@container tool (width <= 22.5rem){
select.inp:where(#th-tool[data-module="html-text"] *){padding-right:26px;background-position:calc(100% - 13px) 20px,calc(100% - 8px) 20px}
select.inp.sm:where(#th-tool[data-module="html-text"] *){padding-right:28px;background-position:calc(100% - 14px) 16px,calc(100% - 9px) 16px}}@container tool (width <= 22.5rem){
select.inp:where(:not(.sm)):where(#th-tool[data-module="html-text"] *){padding-left:10px;padding-right:24px}}
#th-tool .t-btnrow:where(#th-tool[data-module="html-text"] *){display:flex;flex-wrap:nowrap;align-items:stretch;gap:8px;margin:0}
#th-tool .t-btnrow>.btn:where(#th-tool[data-module="html-text"] *){flex:1 1 auto;min-width:min-content;justify-content:center;text-align:center;white-space:normal}
#th-tool .t-btnrow>label.btn:where(#th-tool[data-module="html-text"] *){font-size:14px;font-weight:650;color:var(--ink)}@container tool (width > 36rem){
#th-tool .t-btnrow.t-btnrow-nat>.btn:where(#th-tool[data-module="html-text"] *){flex:0 1 auto}}@container tool (width <= 22.5rem){
#th-tool .t-btnrow>.btn.sm:where(#th-tool[data-module="html-text"] *){padding-left:8px;padding-right:8px;gap:6px}}
#th-tool .t-acts:where(#th-tool[data-module="html-text"] *){display:flex;flex-direction:column;flex-wrap:nowrap;align-items:flex-start;gap:var(--gap-block);margin:0}
#th-tool .t-acts>.t-btnrow:where(#th-tool[data-module="html-text"] *){align-self:stretch}
#th-tool .t-main:where(#th-tool[data-module="html-text"] *),#th-tool .t-acts>.btn-brand:where(#th-tool[data-module="html-text"] *){align-self:flex-start;flex:0 0 auto;width:auto;max-width:100%}@container tool (width <= 22.5rem){
#th-tool .t-main:where(#th-tool[data-module="html-text"] *),#th-tool .t-acts>.btn-brand:where(#th-tool[data-module="html-text"] *){align-self:stretch;width:100%}}
#th-tool .t-btnrow.t-btnrow-pairs:where(#th-tool[data-module="html-text"] *){flex-wrap:wrap}
#th-tool .t-btnrow.t-btnrow-pairs>.btn:where(#th-tool[data-module="html-text"] *){flex:0 1 auto;min-width:min(calc(50% - 4px),max(0px,calc((600px - 100%) * 999)));max-width:max(calc(50% - 4px),calc((100% - 600px) * 999))}
#th-tool .t-btnrow:has(>.btn~.btn):not(:has(>.btn~.btn~.btn)):where(#th-tool[data-module="html-text"] *){flex-wrap:wrap}
#th-tool .t-btnrow:has(>.btn~.btn):not(:has(>.btn~.btn~.btn))>.btn:where(#th-tool[data-module="html-text"] *){flex:1 1 max-content;max-width:none}@container tool (width > 36rem){
#th-tool .t-btnrow.t-btnrow-nat:has(>.btn~.btn):not(:has(>.btn~.btn~.btn))>.btn:where(#th-tool[data-module="html-text"] *){flex:0 1 auto}}
#th-tool .t-btnrow:has(>.btn~.btn~.btn):where(#th-tool[data-module="html-text"] *){flex-wrap:wrap}
#th-tool .t-btnrow:has(>.btn~.btn~.btn)>.btn:where(#th-tool[data-module="html-text"] *){flex:1 1 0px;max-width:none;min-width:min(100%,max(0px,calc((480px - 100%) * 999)))}
#th-tool .t-btnrow:has(>.btn~.btn~.btn~.btn~.btn)>.btn:where(#th-tool[data-module="html-text"] *){min-width:min(100%,max(0px,calc((600px - 100%) * 999)))}@container tool (width > 36rem){
#th-tool .t-btnrow.t-btnrow-nat:has(>.btn~.btn~.btn)>.btn:where(#th-tool[data-module="html-text"] *){flex:0 1 auto}}
#th-tool .t-btnrow:has(>.btn~.btn~.btn~.btn):not(:has(>.btn~.btn~.btn~.btn~.btn))>.btn:where(#th-tool[data-module="html-text"] *){flex:0 1 auto;min-width:min(calc(50% - 4px),max(0px,calc((600px - 100%) * 999)));max-width:max(calc(50% - 4px),calc((100% - 600px) * 999))}
#th-tool .t-btnrow.t-stack>.btn:where(#th-tool[data-module="html-text"] *){flex:1 1 100%!important;max-width:none!important}
#th-tool .t-bal:where(#th-tool[data-module="html-text"] *){flex-wrap:wrap!important}
#th-tool .t-bal>.btn:where(#th-tool[data-module="html-text"] *){flex:1 1 var(--bal-w)!important;max-width:var(--bal-w)!important;min-width:0!important}
#th-tool .btn.t-noicon>svg:where(#th-tool[data-module="html-text"] *){display:none}
#th-tool .btn:not(.sm)>svg:where(#th-tool[data-module="html-text"] *){width:18px!important;height:18px!important}
#th-tool .btn>svg:where(#th-tool[data-module="html-text"] *){flex:none}
#th-tool .t-btnrow.t-nat:where(#th-tool[data-module="html-text"] *){justify-content:center}
#th-tool .t-btnrow.t-nat>.btn:where(#th-tool[data-module="html-text"] *){flex:0 1 auto!important;max-width:100%}
#th-tool:where(#th-tool[data-module="html-text"] *){container:tool/inline-size}
#th-tool :where(img,video,iframe):where(#th-tool[data-module="html-text"] *){max-width:100%}
#th-tool:has(.uc-dir):where(#th-tool[data-module="html-text"] *){-webkit-tap-highlight-color:transparent}
#th-tool:has(.uc-dir) .uc-dir button:not([aria-pressed="true"]):active:where(#th-tool[data-module="html-text"] *){background:var(--btn2-bg-hover);color:var(--ink)}
/* ===== end of the own copy; the tool's own rules follow ===== */
/* own tooltip (.hx-tip) + toast (.hx-toast): copied from theme.css .th-tt / .toast and renamed (rule 171 (j), plan P4, 2026-10-25) */
.hx-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:12px;font-size:14px;font-weight:600;opacity:0;transition:.25s;z-index:60;pointer-events:none}
.hx-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.hx-tip{position:fixed;z-index:9999;left:0;top:0;padding:7px 11px;border-radius:10px;background:var(--ink);color:var(--bg);font:500 12.5px/1.45 var(--font,system-ui,sans-serif);box-shadow:0 6px 24px rgba(11,16,32,.22);pointer-events:none;opacity:0;transform:translateY(3px);transition:opacity .12s,transform .12s;white-space:normal;overflow-wrap:anywhere}
.hx-tip.on{opacity:1;transform:none}
.hx-tip::after{content:"";position:absolute;left:var(--ax,50%);bottom:-5px;width:10px;height:10px;margin-left:-5px;background:inherit;transform:rotate(45deg);border-radius:2px}
.hx-tip.below::after{bottom:auto;top:-5px}@media (prefers-reduced-motion:reduce){
.hx-tip{transition:none}}@media print{
.hx-toast{display:none}}
/* ToolHa module: HTML to Text Converter (Core 1.63). Loaded only on this tool's page (kit.php, per-module CSS).
   Site tokens and .t-* blocks; the two sides wear the main-box gradient ring; code colours mix the site colours with
   --ink so they stay readable in light and dark. */
#th-tool.hx{display:flex;flex-direction:column;gap:var(--gap-section);font-variant-ligatures:none} /* no font ligatures: --> must not turn into an arrow */
.hx [hidden]{display:none!important}
.hx .hx-tabs{align-self:center}
.hx .hx-tabs button{justify-content:center;min-height:var(--tap,44px);font-size:var(--fs-body);padding:8px 16px}
.hx-one,.hx-many{display:flex;flex-direction:column;gap:var(--gap-block)}
.hx-top{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--gap-item)} /* owner round 1: the question sits in the middle, under the tabs */
.hx-h{margin:0;font-size:var(--fs-h2);font-weight:700;line-height:var(--lh-tight);letter-spacing:-.01em;color:var(--ink)}
.hx-sub{margin:0} /* round 44: the two lines under the question use the full width (fewer lines, the boxes sit higher) */
.hx-help{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.hx .btn{gap:6px}
.hx .btn.done{background:var(--ok);border-color:transparent;color:#fff}
.hx-file{cursor:pointer}
.hx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the two sides */
.hx-sw{display:none;align-items:center}
.hx-sw button{justify-content:center;min-height:var(--tap,44px);font-size:var(--fs-body)}
.hx-swi{display:inline-flex;align-items:center;color:var(--muted);padding:0 2px;cursor:pointer}
.hx-one{--hx-gut:20px}
/* three columns: text side · the line you can drag · code side (the widths come from --hx-l and --hx-r, set by the line) */
.hx-panes{display:grid;grid-template-columns:minmax(0,var(--hx-l,1fr)) var(--hx-gut) minmax(0,var(--hx-r,1fr));grid-template-rows:auto auto minmax(0,1fr) auto;column-gap:0;height:var(--hx-h,clamp(560px,80vh,900px))}
/* each side uses the same 4 rows (title · tool strip · writing box · counts), so both boxes start and end at the same height */
.hx-pane{grid-row:1/span 4;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-rows:subgrid;min-width:0;min-height:0}
.hx-pt{grid-column:var(--hx-ptc,1)}.hx-pc{grid-column:var(--hx-pcc,3)}
/* round 45: the swap button (shown from 860 px, see the min-width block) */
.hx-swapb{display:none;grid-column:2;grid-row:1;justify-self:center;align-self:start;place-items:center;position:relative;z-index:2;width:38px;height:38px;margin-top:3px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--surface,#fff);color:var(--ai-ink,var(--brand-ink,var(--brand)));box-shadow:0 1px 3px rgba(0,0,0,.08);cursor:pointer;transition:transform .25s,border-color .2s,background .2s}
.hx-swapb:hover{border-color:var(--ai);background:color-mix(in srgb,var(--ai) 10%,var(--surface,#fff))}
.hx-swapb:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--ai) 35%,transparent)}
.hx-swapb[aria-pressed="true"]{transform:rotate(180deg)}
/* the line between the sides */
.hx-split{grid-column:2;grid-row:2/span 2;position:relative;display:flex;align-items:center;justify-content:center;cursor:col-resize;touch-action:none;outline:none;border-radius:10px}
.hx-split::before{content:"";position:absolute;top:14px;bottom:14px;left:50%;width:2px;margin-left:-1px;border-radius:2px;background:var(--ai);opacity:0;transition:opacity .2s}
.hx-spg{position:relative;width:6px;height:48px;border-radius:999px;background:color-mix(in srgb,var(--muted) 45%,var(--line));box-shadow:0 0 0 3px var(--surface);transition:background .2s,height .2s}
.hx-split:hover::before,.hx-split:focus-visible::before,.hx-drag .hx-split::before{opacity:.55}
.hx-split:hover .hx-spg,.hx-split:focus-visible .hx-spg,.hx-drag .hx-spg{background:var(--ai);height:64px}
.hx-split:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--ai) 35%,transparent)}
.hx-drag,.hx-drag *{cursor:col-resize!important;-webkit-user-select:none;user-select:none}
.hx-ph{grid-row:1;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:var(--tap);padding-bottom:var(--gap-item);flex-wrap:wrap}
.hx-pth{margin:0;font-size:var(--fs-body);font-weight:700;color:var(--ink)}
.hx-pts{font-size:var(--fs-label);font-weight:500;color:var(--muted);margin-left:4px}
.hx .hx-view{align-self:auto;padding:3px}
.hx .hx-view button{padding:6px 14px;font-size:var(--fs-sm);min-height:var(--h-btn-sm)}
/* the box: one gradient ring around the tool strip and the writing area */
.hx-frame{grid-row:2/span 2;grid-column:1;border:2px solid transparent;border-radius:var(--r-main);
  background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--field-ring) border-box;box-shadow:var(--field-glow);transition:box-shadow .3s ease}
.hx-pane:hover .hx-frame{box-shadow:var(--field-glow-hover)}
.hx-pane:focus-within .hx-frame{box-shadow:var(--field-glow-hover),0 0 0 4px color-mix(in srgb,var(--ai) 20%,transparent)}
.hx-drop .hx-frame{box-shadow:0 0 0 4px color-mix(in srgb,var(--ai) 40%,transparent)}
.hx-strip{grid-row:2;grid-column:1;display:flex;flex-direction:column;gap:8px;margin:2px 2px 0;padding:8px 10px;background:color-mix(in srgb,var(--surface-2) 65%,var(--surface));border-bottom:1px solid var(--line);border-radius:calc(var(--r-main) - 2px) calc(var(--r-main) - 2px) 0 0;min-width:0}
.hx-snote{margin:0;font-size:var(--fs-label);line-height:var(--lh-text);color:var(--muted);min-height:var(--h-btn-sm);display:flex;align-items:center}
.hx-cnote{min-height:0}
.hx-ctools{display:flex;flex-wrap:wrap;gap:8px}
.hx-ed{grid-row:3;grid-column:1;position:relative;display:flex;flex-direction:column;min-height:0;margin:0 2px 2px}
.hx-area{flex:1;min-height:0;width:100%;border:0;border-radius:0 0 calc(var(--r-main) - 2px) calc(var(--r-main) - 2px);background:transparent;color:var(--ink);outline:none}
.hx-area:focus,.hx-area:focus-within{outline:none}
.hx-pf{grid-row:4;padding-top:8px;display:flex;justify-content:flex-end;gap:8px;font-size:var(--fs-meta);color:var(--muted);font-variant-numeric:tabular-nums}
.hx-big{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap-item);width:max-content;max-width:calc(100% - 2rem)}
.hx-big>.btn{flex:1 1 auto}
.hx:not(.hx-is-empty) .hx-big{display:none}

/* Formatted side: the visitor's own content, shown simply (their own styles are not loaded) */
.hx-rich{overflow:auto;padding:var(--pad-field);font-size:16px;line-height:var(--lh-text);overflow-wrap:anywhere}
.hx-rich:empty::before{content:attr(data-ph);color:var(--muted);pointer-events:none}
.hx-rich>:first-child{margin-top:0}
.hx-rich>:last-child{margin-bottom:0}
.hx-rich p{margin:0 0 .8em}
.hx-rich h1,.hx-rich h2,.hx-rich h3,.hx-rich h4,.hx-rich h5,.hx-rich h6{margin:1em 0 .5em;line-height:var(--lh-tight);font-weight:700;color:var(--ink)}
.hx-rich :is(h1,h2,h3,h4,h5,h6,th) :is(b,strong),.hx-hb .hx-rich :is(h1,h2,h3,h4,h5,h6){font-weight:800} /* round 56 / 57: bold inside a heading, and every heading while HTML Options → Headings is Bold, look a bit heavier */
/* the sizes every browser uses for a web page with no styles of its own (HTML standard: text 16 px, h1 2em = 32 px, h2 1.5em = 24, h3 1.17em ≈ 18.7, h4 1em = 16, h5 .83em ≈ 13.3, h6 .67em ≈ 10.7), so the text looks here as it will on a plain page */
.hx-rich h1{font-size:2em}.hx-rich h2{font-size:1.5em}.hx-rich h3{font-size:1.17em}.hx-rich h4{font-size:1em}.hx-rich h5{font-size:.83em}.hx-rich h6{font-size:.67em}
.hx-rich ul,.hx-rich ol{margin:0 0 .8em;padding-left:1.5em}
.hx-rich li{margin:.2em 0}
.hx-rich blockquote{margin:0 0 .8em;padding:2px 0 2px 14px;border-left:3px solid color-mix(in srgb,var(--brand) 45%,var(--line));color:var(--muted)}
.hx-rich pre{margin:0 0 .8em;padding:10px 12px;border-radius:10px;background:var(--surface-2);font-family:var(--mono);font-size:var(--fs-sm);white-space:pre-wrap}
.hx-rich code{font-family:var(--mono);font-size:.92em;background:var(--surface-2);padding:1px 4px;border-radius:4px}
.hx-rich table{border-collapse:collapse;margin:0 0 .8em;max-width:100%}
/* dashed guide lines show where the cells are; a table's own look (inline styles: lines, header colour, stripes) wins */
.hx-rich td,.hx-rich th{border:1px dashed color-mix(in srgb,var(--muted) 45%,transparent);padding:6px 10px;vertical-align:top;min-width:3em}
.hx-rich th{font-weight:650}
.hx-rich :is(td,th):empty{height:2.4em}
.hx-rich a{color:var(--brand-ink,var(--brand));text-decoration:underline}
.hx-rich img{max-width:100%;height:auto}
.hx-rich img.hx-noimg{display:inline-block;min-width:120px;min-height:48px;padding:8px;border:1px dashed var(--line);border-radius:8px;background:var(--surface-2);color:var(--muted);font-size:var(--fs-sm);vertical-align:middle}
.hx-rich hr{border:0;border-top:1px solid var(--line);margin:1em 0}
.hx-chip{display:inline-flex;align-items:center;margin:2px 0;padding:2px 10px;border-radius:999px;background:var(--ai-soft);color:var(--ai-ink);font-family:var(--mono);font-size:var(--fs-label);font-weight:600;user-select:none;cursor:default}
.hx-plainw{position:relative}
.hx-plain{position:absolute;inset:0;width:100%;height:100%;margin:0;border:0;border-radius:inherit;background:transparent;color:var(--ink);outline:none;resize:none;padding:var(--pad-field);font-family:var(--font);font-size:var(--fs-body);line-height:var(--lh-text)}
.hx-plain::placeholder{color:var(--muted)}

/* the toolbar (owner round 5: a modern editor) — quiet icon buttons with no frames, groups split by a thin line,
   a soft tint on hover and a brand tint when on; one row: what does not fit goes into More (⋯), which opens over the text */
.hx-strip{position:relative}
.hx-tb{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:8px 13px;min-width:0}
.hx-tg{display:inline-flex;flex-wrap:wrap;align-items:center;gap:2px;max-width:100%}
.hx-tb>.hx-tg.hx-rowstart::before{display:none}
.hx-tb>.hx-tg+.hx-tg::before,.hx-sep{content:"";flex:none;width:1px;height:20px;margin:0 5px;background:var(--line)}
/* round 51: the line between two tool groups sits in the gap and takes no room, so hiding it at the start of a row no longer changes the row width (that made the toolbar jump between 2 and 3 rows every frame at some widths: the boxes shook up and down) */
.hx-tb>.hx-tg{position:relative}
.hx-tb>.hx-tg+.hx-tg::before{position:absolute;left:-7px;top:50%;margin:0;transform:translateY(-50%)}
.hx-tbb{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:2px;flex:none;width:var(--h-btn-sm);height:var(--h-btn-sm);padding:0;border:0;border-radius:9px;background:transparent;color:color-mix(in srgb,var(--ink) 78%,var(--muted));font-size:16px;font-family:inherit;line-height:1;cursor:pointer;transition:background-color .12s,color .12s}
.hx-tbb svg{width:18px;height:18px;flex:none}
.hx-tbb:hover{background:color-mix(in srgb,var(--ink) 7%,transparent);color:var(--ink)}
.hx-tbb:active{background:color-mix(in srgb,var(--ink) 11%,transparent)}
.hx-tbb[aria-pressed="true"]{background:color-mix(in srgb,var(--ai) 15%,transparent);color:var(--ai-ink,var(--brand-ink,var(--brand)))}
.hx-tbb:focus-visible{outline:2px solid var(--ai);outline-offset:1px}
.hx-tbt b,.hx-tbt i,.hx-tbt u,.hx-tbt s{font-size:16px;font-family:Georgia,"Times New Roman",serif}
.hx-tbt b{font-family:inherit;font-weight:800}
.hx-tbb[hidden]{display:none}
.hx-tbw{width:auto;padding:0 6px 0 8px}
.hx-tbw svg:last-child{width:12px;height:12px;opacity:.6;margin-left:1px;transition:transform .15s}
.hx-tmb[aria-expanded="true"],.hx-tmoreb[aria-expanded="true"]{background:color-mix(in srgb,var(--ai) 15%,transparent);color:var(--ai-ink,var(--brand-ink,var(--brand)))}
.hx-tmb[aria-expanded="true"] svg:last-child{transform:rotate(180deg)}
.hx-blkb{width:142px;justify-content:space-between;padding:0 8px 0 11px;font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.hx-blkl,.hx-blkl2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* font name and the text size box (− [16] px +), always in sight */
.hx-fntb{width:132px;justify-content:space-between;padding:0 8px 0 11px;font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.hx-fntl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hx-sz{display:inline-flex;align-items:center;gap:1px}
.hx-szb{width:28px}
.hx-szb svg{width:15px;height:15px}
.hx-szw{display:inline-flex;align-items:center}
.hx-szi{width:72px;height:30px;padding:0 24px 0 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:600 var(--fs-sm)/1 var(--font);text-align:center;font-variant-numeric:tabular-nums}
.hx-szi:hover{border-color:color-mix(in srgb,var(--ai) 45%,var(--line))}
.hx-szi:focus{outline:2px solid var(--ai);outline-offset:0;border-color:transparent}
.hx-szi::placeholder{color:var(--muted)}
.hx-szu{position:absolute;right:7px;top:50%;transform:translateY(-50%);font-size:12px;font-weight:600;color:var(--muted);pointer-events:none}
.hx-pop.hx-szl[role="menu"]{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;min-width:0;width:212px;max-height:none}
.hx-pop.hx-szl[role="menu"] .hx-tact{justify-content:center;min-height:34px;padding:4px 0;font-variant-numeric:tabular-nums}
.hx-pop.hx-szl[role="menu"] .hx-szd{grid-column:1/-1;justify-content:flex-start;padding:4px 10px}
.hx-bkpx{font:500 12px/1 var(--font);color:var(--muted);white-space:nowrap}
.hx-measure{position:absolute!important;left:-9999px;top:0;visibility:hidden;pointer-events:none;height:auto!important;min-height:0!important}
.hx-bblk{font-size:var(--fs-sm);font-weight:600;color:var(--ink);padding:0 6px 0 10px}
.hx-tbl{width:auto;gap:7px;padding:0 12px 0 10px;font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.hx-tbl svg{color:var(--brand-ink,var(--brand))}
/* More (⋯): the groups that do not fit, as a second row that floats over the text */
.hx-tmore{position:absolute;z-index:9;right:0;top:calc(100% + 10px);display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;max-width:min(100%,560px);padding:5px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px -12px rgba(15,23,42,.30),0 2px 8px rgba(15,23,42,.08);animation:hx-in .14s ease-out}
.hx-tmore[hidden]{display:none}
/* the kind-of-line list: each kind shown in its own size, with its key */
.hx-blkm{min-width:250px}
.hx-pop[role="menu"] .hx-bki{gap:12px;min-height:38px;padding:6px 10px}
.hx-bkt{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border-radius:7px;background:var(--surface-2);border:1px solid var(--line);color:var(--muted);font-size:11.5px;font-weight:700;font-family:var(--font)}
.hx-bkn{flex:1;color:var(--ink)}
.hx-bk-h1{font-size:1.25em;font-weight:750}.hx-bk-h2{font-size:1.15em;font-weight:700}.hx-bk-h3{font-size:1.06em;font-weight:700}.hx-bk-h4,.hx-bk-h5,.hx-bk-h6{font-weight:700}
.hx-bk-h6{font-size:.86em}.hx-bk-blockquote{font-style:italic}.hx-bk-pre{font-family:var(--mono);font-size:.92em}
.hx-bki kbd{font:500 11.5px/1 var(--mono);color:var(--muted);background:none;border:0;padding:0}
.hx-bki[aria-checked="true"]{background:color-mix(in srgb,var(--ai) 12%,transparent)}
.hx-bki[aria-checked="true"] .hx-bkt{border-color:transparent;background:var(--ai);color:#fff}
/* plain view: the toolbar steps aside but keeps its room, so the boxes do not move */
.hx-plainv .hx-tb{visibility:hidden}
#hx-pnote{position:absolute;inset:0;padding:0 14px;z-index:1}
.hx-fr .inp{height:var(--h-btn-sm);min-height:var(--h-btn-sm);padding:0 12px;font-size:var(--fs-sm)}

/* the two tool strips: their row is shared, so each strip centres its content; the code hint sits next to its buttons when there is room */
.hx-strip{justify-content:center}
#hx-pc-s{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;align-content:center;column-gap:14px;row-gap:6px}
#hx-pc-s .hx-cnote{flex:1 1 240px;min-width:0}
/* things that float over the text (owner round 5): next to what they belong to, so nothing on the page moves */
@keyframes hx-in{from{opacity:0;transform:translateY(4px) scale(.98)}to{opacity:1;transform:none}}
.hx-flt{position:absolute;z-index:8;left:0;top:0}
.hx-flt[hidden]{display:none}
.hx-bub,.hx-lcard,.hx-tbar,.hx-icard{display:flex;align-items:center;gap:2px;padding:4px;background:var(--surface);border:1px solid color-mix(in srgb,var(--line) 80%,var(--ink) 8%);border-radius:13px;box-shadow:0 16px 36px -10px rgba(15,23,42,.32),0 2px 6px rgba(15,23,42,.08);white-space:nowrap}
.hx-bub.is-in,.hx-lcard:not([hidden]),.hx-tbar:not([hidden]),.hx-icard:not([hidden]){animation:hx-in .14s ease-out}
.hx-bub .hx-sep,.hx-lcard .hx-sep,.hx-tbar .hx-sep,.hx-icard .hx-sep{height:22px;margin:0 3px}
.hx-lca{display:inline-flex;align-items:center;gap:7px;max-width:260px;height:var(--h-btn-sm);padding:0 10px;border-radius:9px;color:var(--brand-ink,var(--brand));font-size:var(--fs-sm);font-weight:600;text-decoration:none}
.hx-lca span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hx-lca:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.hx-lca[aria-disabled="true"]{color:var(--muted);pointer-events:none}
.hx-lca svg{flex:none;width:16px;height:16px}
.hx-lnk.hx-flt{z-index:9}
.hx-lph{position:absolute;z-index:1;pointer-events:none;color:var(--muted);opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
.hx-lph[hidden]{display:none}
/* a chosen picture: outline + its card (description, size, place, remove) */
.hx-rich img{cursor:pointer}
.hx-rich img.hx-isel{outline:3px solid var(--ai);outline-offset:2px;border-radius:2px}
.hx-icard .hx-tbl{padding:0 9px;min-width:36px}
.hx-icard .hx-pop{min-width:280px}
.hx-lnk .hx-tck{min-height:30px;font-size:var(--fs-label)}
/* the "/" list */
.hx-slash{z-index:9;display:flex;flex-direction:column;gap:1px;width:290px;max-width:calc(100% - 8px);max-height:min(340px,70vh);overflow:auto;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px -12px rgba(15,23,42,.30),0 2px 8px rgba(15,23,42,.08);animation:hx-in .12s ease-out;overscroll-behavior:contain}
.hx-slh{margin:2px 8px 6px;font-size:var(--fs-label);font-weight:650;color:var(--muted)}
.hx-sle{margin:6px 8px;font-size:var(--fs-sm);color:var(--muted)}
.hx-sli{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:5px 8px;border:0;border-radius:9px;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.hx-sli[aria-selected="true"],.hx-sli:hover{background:color-mix(in srgb,var(--ai) 11%,transparent)}
.hx-slt{display:inline-grid;place-items:center;flex:none;width:34px;height:34px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);font-size:12.5px;font-weight:750}
.hx-slt svg{width:18px;height:18px}
.hx-sln{display:flex;flex-direction:column;min-width:0}
.hx-sln b{font-size:var(--fs-sm);font-weight:650}
.hx-sln small{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the find box floats over the code, top right, like code editors */
.hx-fr.hx-flt{left:auto;right:14px;top:10px;z-index:9;width:min(430px,calc(100% - 28px));box-shadow:0 18px 40px -12px rgba(15,23,42,.30),0 2px 8px rgba(15,23,42,.08);background:var(--surface);animation:hx-in .14s ease-out}

/* tables: a small bar floats next to the table while the cursor is in it; its lists and the new-table box open over the text, so nothing moves */
.hx-pop[hidden]{display:none}
.hx-tico{display:inline-grid;place-items:center;width:28px;color:var(--muted)}
.hx-tbar .btn.sm{border-color:transparent;background:transparent;box-shadow:none;padding:0 10px;font-weight:600}
.hx-tbar .btn.sm:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.hx-tbar .hx-tmb[aria-expanded="true"]{background:color-mix(in srgb,var(--ai) 15%,transparent)}
.hx-tbar .hx-tdel:hover{color:var(--err,#dc2626);background:color-mix(in srgb,var(--err,#dc2626) 10%,transparent)}
.hx-tm{position:relative}
.hx-pop{position:absolute;z-index:10;left:0;top:calc(100% + 8px);display:flex;flex-direction:column;gap:10px;min-width:220px;max-width:min(360px,calc(100vw - 32px));padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px -12px rgba(15,23,42,.30),0 2px 8px rgba(15,23,42,.08);animation:hx-in .14s ease-out;white-space:normal}
.hx-pop[role="menu"]{gap:0;padding:6px}
.hx-pop[role="menu"] .hx-tact{display:flex;align-items:center;gap:10px;width:100%;min-height:var(--tap);padding:8px 12px;border:0;border-radius:8px;background:transparent;color:var(--ink);font:inherit;font-size:var(--fs-sm);text-align:left;white-space:nowrap;cursor:pointer}
.hx-pop[role="menu"] .hx-tact:hover,.hx-pop[role="menu"] .hx-tact:focus-visible{background:color-mix(in srgb,var(--ink) 6%,transparent);outline:none}
.hx-pop[role="menu"] .hx-tact[aria-checked="true"]{background:color-mix(in srgb,var(--ai) 12%,transparent);font-weight:600}
.hx-mg{display:contents}
.hx-msep{display:block;height:1px;margin:4px 6px;background:var(--line)}
.hx-pop[role="menu"] .hx-tact svg{flex:none;color:var(--brand-ink,var(--brand))}
.hx-pop[role="menu"] .hx-tact[data-t$="Del"] svg{color:var(--muted)}
.hx-tins{left:12px;width:max-content}
.hx-poph{margin:0;font-size:var(--fs-sm);font-weight:700;color:var(--ink)}
.hx-tinr{display:flex;flex-wrap:wrap;gap:10px 16px}
.hx-tbtns{display:flex;flex-wrap:wrap;gap:8px}
.hx-tlab{font-size:var(--fs-label);font-weight:650;color:var(--muted)}
.hx-tck{display:flex;align-items:center;gap:8px;min-height:var(--h-btn-sm);font-size:var(--fs-sm);color:var(--ink);cursor:pointer}
.hx-tck input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--brand);cursor:pointer}
.hx-num{display:inline-flex;align-items:center;gap:6px}
.hx-num label{min-width:4.2em;font-size:var(--fs-sm);font-weight:650;color:var(--ink)}
.hx-num .inp{width:4.2em;height:var(--h-btn-sm);min-height:var(--h-btn-sm);padding:0 6px;text-align:center;font-size:var(--fs-sm);-moz-appearance:textfield;appearance:textfield}
.hx-num .inp::-webkit-inner-spin-button,.hx-num .inp::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.hx-nb{display:inline-grid;place-items:center;width:var(--h-btn-sm);height:var(--h-btn-sm);padding:0;border:1px solid var(--btn2-border);border-radius:10px;background:var(--surface);color:var(--ink);cursor:pointer;transition:border-color .15s,background-color .15s}
.hx-nb:hover:not(:disabled){border-color:var(--btn2-border-hover);background:var(--btn2-bg-hover)}
.hx-nb:disabled{opacity:.4;cursor:not-allowed}
.hx-tprev{display:grid;grid-template-columns:repeat(var(--tc,3),minmax(0,22px));gap:3px;width:max-content;padding:6px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2)}
.hx-tprev i{display:block;height:12px;border-radius:3px;background:color-mix(in srgb,var(--muted) 30%,var(--surface))}
.hx-tprev i.hx-tph{background:var(--brand)}
.hx-tprev.hx-tmore-c{border-right-style:dashed}
.hx-tprev.hx-tmore-r{border-bottom-style:dashed}
.hx-tcols{display:flex;flex-direction:column;gap:8px}
.hx-tsws{display:flex;flex-wrap:wrap;gap:8px;padding:2px}
.hx-tsw{position:relative;flex:none;width:30px;height:30px;padding:0;border:1px solid color-mix(in srgb,var(--ink) 28%,transparent);border-radius:50%;background:var(--c,var(--surface));cursor:pointer;transition:box-shadow .15s}
.hx-tsw[data-c=""]{background:linear-gradient(135deg,transparent 44%,#dc2626 44%,#dc2626 56%,transparent 56%),var(--surface)}
.hx-tsw[aria-pressed="true"],.hx-tswx.is-on{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--brand)}
.hx-tsw:disabled,.hx-tswx:has(input:disabled){opacity:.35;cursor:not-allowed}
.hx-tswx{display:inline-block;overflow:hidden;background:conic-gradient(#ef4444,#f59e0b,#22c55e,#06b6d4,#3b82f6,#a855f7,#ef4444)}
.hx-tswx input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;cursor:pointer}
.hx-tswx input:disabled{cursor:not-allowed}
.hx-tsw:focus-visible,.hx-tswx:focus-within,.hx-nb:focus-visible{outline:2px solid var(--ai);outline-offset:3px}
.hx-tcols.is-off .hx-tlab{opacity:.6}
/* the formatting toolbar's own lists (colour, font, size, list style, align, special characters) */
.hx-tb .hx-pop[role="menu"] .hx-tact{min-height:var(--h-btn-sm)}
.hx-lsm{margin-left:auto;padding-left:16px;color:var(--muted)}
.hx-chars{display:grid;grid-template-columns:repeat(8,var(--h-btn-sm));gap:6px}
.hx-chr{display:inline-grid;place-items:center;width:var(--h-btn-sm);height:var(--h-btn-sm);padding:0;border:1px solid transparent;border-radius:8px;background:var(--surface-2);color:var(--ink);font:inherit;font-size:var(--fs-body);cursor:pointer}
.hx-chr:hover{border-color:var(--btn2-border-hover);background:var(--btn2-bg-hover)}
.hx-chr:focus-visible{outline:2px solid var(--ai);outline-offset:2px}
.hx-ipop{width:min(420px,calc(100vw - 32px))}
.hx-ipop .inp{width:100%;height:var(--h-btn-sm);min-height:var(--h-btn-sm);padding:0 12px;font-size:var(--fs-sm)}
.hx-ipop .hx-file{align-self:flex-start}
.hx-rich mark{padding:0 2px;border-radius:2px}
.hx-rich pre code{padding:0;background:none}

/* the code side: a textarea over a coloured copy of the same text, with line numbers */
.hx-code{position:relative;overflow:hidden;padding:0;font-family:var(--mono);font-size:var(--fs-label)}
.hx-gut,.hx-hl,.hx-ta{font-family:var(--mono);font-size:var(--fs-label);line-height:1.6;letter-spacing:0;tab-size:4;white-space:pre;word-wrap:normal;overflow-wrap:normal}
.hx-gut{position:absolute;top:0;bottom:0;left:0;width:var(--hx-gw,calc(2ch + 22px));box-sizing:border-box;overflow:hidden;padding:14px 8px 14px 12px;text-align:right;color:var(--muted);background:var(--surface-2);border-right:1px solid var(--line);border-radius:0 0 0 calc(var(--r-main) - 2px);user-select:none;font-variant-numeric:tabular-nums}
.hx-cw{position:absolute;top:0;bottom:0;right:0;left:var(--hx-gw,calc(2ch + 22px))}
.hx-hl,.hx-ta{position:absolute;inset:0;margin:0;padding:14px 16px;border:0}
.hx-hl{overflow:hidden;color:var(--ink);pointer-events:none}
.hx-ta{width:100%;height:100%;resize:none;background:transparent;color:transparent;caret-color:var(--ink);overflow:auto;outline:none;border-radius:0 0 calc(var(--r-main) - 2px) 0}
.hx-ta::placeholder{color:var(--muted)}
.hx-ta::selection{background:color-mix(in srgb,var(--brand) 30%,transparent);color:transparent}
.hx-nohl .hx-ta{color:var(--ink)}
.hx-nohl .hx-ta::selection{color:inherit}
.hx-nohl .hx-hl{display:none}
.hx-k-p{color:color-mix(in srgb,var(--muted) 85%,var(--ink))}
.hx-k-n{color:var(--brand-ink,var(--brand));font-weight:600}
.hx-k-a{color:var(--ai-ink,var(--ai))}
.hx-k-v{color:color-mix(in srgb,var(--ok) 72%,var(--ink))}
.hx-k-e{color:color-mix(in srgb,var(--warn) 75%,var(--ink))}
.hx-k-c,.hx-k-d{color:var(--muted)}
.hx-k-c{font-style:italic}
.hx-hl mark{color:inherit;border-radius:3px}
.hx-hl mark.hx-mt{background:color-mix(in srgb,var(--ai) 22%,transparent)}
.hx-hl mark.hx-fhit{background:color-mix(in srgb,var(--warn) 22%,transparent)}
.hx-hl mark.hx-fcur{background:color-mix(in srgb,var(--warn) 50%,transparent)}
/* round 46: the words chosen on one side, lit up on the other side */
.hx-hl mark.hx-sync{background:color-mix(in srgb,var(--warn) 45%,transparent);border-radius:3px;box-shadow:0 0 0 1px color-mix(in srgb,var(--warn) 70%,transparent)}
.hx-rich ::highlight(hx-sync){background-color:color-mix(in srgb,var(--warn) 45%,transparent)}
::highlight(hx-sync){background-color:rgba(245,158,11,.38)}
.hx-fr{display:flex;flex-direction:column;gap:6px;padding:8px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}
/* the find box, like code editors: one slim field with the count inside, then quiet icon buttons */
.hx-frr{display:flex;align-items:center;gap:2px}
.hx-fin{position:relative;flex:1;min-width:0;display:flex;margin-right:4px}
.hx-fin .inp{flex:1;min-width:0;width:100%;border-radius:9px;padding-right:76px}
.hx-fin .hx-fn{position:absolute;right:10px;top:50%;transform:translateY(-50%);min-width:0;pointer-events:none}
.hx-frr .hx-tbl{padding:0 10px}
.hx-fcase{width:auto;padding:0 8px;font:700 13px/1 var(--mono);cursor:pointer}
.hx-fcase input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.hx-fcase:has(input:checked){background:color-mix(in srgb,var(--ai) 15%,transparent);color:var(--ai-ink,var(--brand-ink,var(--brand)))}
.hx-fcase:has(input:focus-visible){outline:2px solid var(--ai);outline-offset:1px}
.hx-fro{justify-content:space-between}
.hx-fn{min-width:7ch;font-size:var(--fs-label);color:var(--muted);font-variant-numeric:tabular-nums}
.hx-fn:empty{display:none}
.hx-fnone{color:var(--warn)}
.hx-ftick{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-label);color:var(--muted);cursor:pointer}

/* actions: text actions under the text side, code actions under the code side */
.hx-acts{display:grid;grid-template-columns:minmax(0,var(--hx-l,1fr)) minmax(0,var(--hx-r,1fr));gap:var(--gap-grid) var(--hx-gut)}
.hx-ag{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
/* round 22: nothing on either side = the four action buttons look switched off (aria-disabled; a click still explains). Grey by filter: the theme's button colours sit in a layer that a module rule cannot override */
.hx-acts .btn[aria-disabled="true"]{filter:grayscale(1);opacity:.5;box-shadow:none;cursor:not-allowed}
.hx-acts .btn[aria-disabled="true"]:hover,.hx-acts .btn[aria-disabled="true"]:active{transform:none;box-shadow:none}
.hx-dl{position:relative}
.hx-dlb svg:last-child{margin-left:-2px}
.hx-dlm{position:absolute;z-index:5;left:0;top:calc(100% + 6px);display:flex;flex-direction:column;min-width:220px;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-lg)}
.hx-dlm button{display:block;width:100%;min-height:var(--tap);padding:8px 12px;border:0;border-radius:8px;background:transparent;color:var(--ink);font:inherit;font-size:var(--fs-sm);text-align:left;cursor:pointer}
.hx-dlm button:hover,.hx-dlm button:focus-visible{background:var(--surface-2);outline:none}
.hx-dlm b{font-weight:650}
.hx-msg .linkish{font-weight:650}

/* boxes under the tool */
.hx-opts{display:flex;flex-direction:column;gap:var(--gap-block)}
.hx-box2{gap:var(--gap-item)}
.hx-bb{display:flex;flex-direction:column;gap:var(--gap-block);min-width:0}
.hx .t-choices.hx-cards4,.hx .t-choices.hx-cards2{display:grid;gap:var(--gap-item)}
.hx-cards4{grid-template-columns:repeat(4,minmax(0,1fr))}
.hx-cards2{grid-template-columns:repeat(2,minmax(0,1fr))}
.hx-cb{display:flex;flex-direction:column;gap:3px;min-width:0}
.hx-ct{font-size:var(--fs-sm);font-weight:650;color:var(--ink);line-height:var(--lh-tight)}
.hx-cs{font-size:var(--fs-label);font-weight:500;color:var(--muted);line-height:var(--lh-text)}
.hx-best{display:inline-block;padding:1px 8px;border-radius:999px;font-size:var(--fs-tag);font-weight:650;color:color-mix(in srgb,var(--ok) 80%,var(--ink));background:color-mix(in srgb,var(--ok) 13%,transparent);white-space:nowrap;vertical-align:1px}
.hx-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-block) var(--gap-grid)}
.hx-row{display:flex;flex-direction:column;gap:var(--gap-label);min-width:0}
.hx-rl{display:block;font-size:var(--fs-label);font-weight:650;color:var(--muted)}
.hx-chips{display:flex;flex-wrap:wrap;gap:8px}
.hx .hx-chips .chip{cursor:pointer;min-height:var(--h-btn-sm)}
.hx .hx-chips .chip[aria-checked="true"]{background:var(--grad);border-color:transparent;color:#fff}
.hx .hx-chips .chip[aria-checked="true"] .hx-best{color:#fff;background:rgba(255,255,255,.22)}
.hx .hx-chips .chip:focus-visible{outline:2px solid var(--ai);outline-offset:2px}
.hx-ticks2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-item)}
.hx-n{display:inline-block;padding:1px 8px;border-radius:999px;font-size:var(--fs-tag);font-weight:650;white-space:nowrap;vertical-align:1px}
.hx-n:empty{display:none}
.hx-wait{margin:0;font-size:var(--fs-sm);color:var(--muted);font-style:italic}
.hx-csum{margin:0;font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.hx-diff{max-height:420px;overflow:auto;padding:8px 0;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);font-family:var(--mono);font-size:var(--fs-label);line-height:1.6}
.hx-dli{position:relative;padding:0 12px 0 32px;white-space:pre-wrap;overflow-wrap:anywhere}
.hx-ds{position:absolute;left:12px;color:var(--muted)}
.hx-dm{box-shadow:inset 0 0 0 999px color-mix(in srgb,var(--bad,#c0392b) 11%,transparent)} /* a tint, not a box: diff lines sit right under each other like code lines */
.hx-dp{box-shadow:inset 0 0 0 999px color-mix(in srgb,var(--ok) 13%,transparent)}
.hx-dg{padding:2px 12px;color:var(--muted);font-style:italic;font-family:var(--font)}

/* many at once */
/* many at once: three short steps (calm square number tiles), one way shown at a time */
.hx-mhead{display:flex;flex-direction:column;gap:4px}
.hx-mhead .ag-hint{margin:0}
.hx-mhead .hx-h{margin:0}
.hx-mlead{margin:2px 0 0;color:var(--ink);font-size:var(--fs-body);line-height:1.55}
.hx-mlead code{font-family:var(--mono);font-size:.86em;padding:0 4px;border-radius:5px;background:var(--surface-2);border:1px solid var(--line)}
.hx-muses{list-style:none;margin:8px 0 4px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-item)}
.hx-muses li{display:flex;flex-direction:column;gap:2px;padding:12px 14px 12px 40px;position:relative;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.hx-muses li::before{content:"";position:absolute;left:14px;top:15px;width:16px;height:16px;border-radius:50%;background:color-mix(in srgb,var(--ok) 18%,transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='%23178a46' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.hx-muses b{font-size:var(--fs-body);color:var(--ink)}
.hx-muses span{font-size:var(--fs-sm);color:var(--muted);line-height:1.45}
.hx .hx-tabs button{flex-direction:column;gap:0;line-height:1.2}
.hx-tabs .hx-tt{font-weight:inherit}
.hx-tabs .hx-tsub{font-size:var(--fs-tag);font-weight:500;opacity:.78}
.hx-mprev th.hx-mgap span{display:block;font-size:var(--fs-tag);font-weight:500}
.hx-mprev .hx-rep{cursor:pointer}
.hx-mprev .hx-was{display:block;margin-top:4px;font-size:var(--fs-tag);color:var(--muted);font-family:var(--mono);word-break:break-all}
.hx-mstep{display:flex;flex-direction:column;gap:var(--gap-item);min-width:0}
.hx-msh{display:flex;align-items:center;gap:12px;margin:0;font-size:var(--fs-h3);font-weight:700;line-height:var(--lh-tight);color:var(--ink)}
.hx-msn{flex:none;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-ink);border:1px solid color-mix(in srgb,var(--brand) 28%,var(--line));font-family:var(--mono);font-size:15px;font-weight:750}
.hx-msb{display:flex;flex-direction:column;gap:var(--gap-item);padding-left:44px;min-width:0}
.hx-mhow[hidden]{display:none}
.hx-mmore{align-self:flex-start;font-size:var(--fs-label)}
.hx-mhow.hx-tick,.hx-mhow .hx-tick{max-width:520px}
.hx-srci{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-ink)}
.hx-srci svg,.hx-dri svg,.hx-mfi svg{width:22px;height:22px}
.hx-mp{display:flex;flex-direction:column;gap:var(--gap-item);min-width:0}
.hx-mp[hidden],.hx-mcol[hidden],.hx-drop2[hidden]{display:none}
.hx-drop2{gap:6px;padding:24px 16px} /* rule 161: look, hover / drag-over and height = shared .t-drop (tool.css) */
.hx-dri{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:#fff;margin-bottom:4px}
.hx-drt{font-size:var(--fs-body);font-weight:650;color:var(--ink)}
.hx-dro{font-size:var(--fs-label);color:var(--muted)}
/* round 60: the one box of Many at once (look = shared .t-drop, rule 161) */
.hx-drs{max-width:34rem;font-size:var(--fs-label);color:var(--muted)}
.hx-drbs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:6px 0 2px}
.hx-mback{margin:0}
/* round 60: the three jobs sit in one row, or one under the other on a narrow box (never 2 + 1) */
.hx-drb{pointer-events:none}
.hx-mcol{display:flex;flex-direction:column;gap:var(--gap-item);min-width:0}
.hx-mcol .t-q{display:flex;flex-direction:column;gap:6px}
.hx-mcol .ag-hint{margin:0}
.hx-mfile{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface-2)}
.hx-mfi{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-ink)}
.hx-mfn{flex:1;min-width:150px;display:flex;flex-direction:column;gap:2px;font-size:var(--fs-sm);color:var(--ink)}
.hx-mfn b{overflow-wrap:anywhere}
.hx-mfn span{font-size:var(--fs-label);color:var(--muted)}
.hx-mq{font-size:var(--fs-sm);color:var(--ink)}
.hx-mpv{display:flex;flex-direction:column;gap:6px;min-width:0}
.hx-mcap{margin:0;font-size:var(--fs-label);color:var(--muted)}
.hx-mprev th,.hx-mprev td{cursor:pointer;max-width:260px;overflow-wrap:anywhere;vertical-align:top}
.hx-mprev th{white-space:nowrap}
.hx-mprev td{min-width:90px}
.hx-mprev .hx-on{background:color-mix(in srgb,var(--brand) 13%,transparent)}
.hx-mprev th.hx-on{color:var(--brand-ink)}
.hx-mprev .hx-new{background:color-mix(in srgb,var(--ok) 13%,transparent)}
.hx-mprev th.hx-new{color:color-mix(in srgb,var(--ok) 75%,var(--ink));cursor:default}
.hx-mprev td.hx-new{cursor:default}
.hx-mprev .hx-mgap{color:var(--muted);font-weight:500;cursor:default;white-space:nowrap}
.hx-mprev td,.hx-mtbl td{white-space:pre-line}
.hx-tag{display:inline-block;margin-left:4px;padding:0 7px;border-radius:999px;font-size:var(--fs-tag);font-weight:650;line-height:18px;vertical-align:1px;background:color-mix(in srgb,var(--brand) 16%,transparent);color:var(--brand-ink)}
.hx-tagn{background:color-mix(in srgb,var(--ok) 18%,transparent);color:color-mix(in srgb,var(--ok) 75%,var(--ink))}
.hx-mwhat{margin:0;font-size:var(--fs-sm);line-height:var(--lh-text);color:var(--ink)}
.hx-mres[hidden],.hx-merr[hidden]{display:none}
.hx-merr{margin:0}
.hx-mta{font-family:var(--mono);font-size:var(--fs-sm);line-height:var(--lh-text);resize:vertical;min-height:130px}
.hx-mbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.hx-mbar:empty{display:none}
.hx-sample{margin:0}
.hx-mtbl td{max-width:420px;overflow-wrap:anywhere;vertical-align:top}
.hx-mtbl td.hx-mno{color:var(--muted);white-space:nowrap}
.hx-mbusy{cursor:progress}

/* full screen: the tool fills the browser window (above the page header 40 and phone menu 50, under messages 60) */
.hx-fsbar{display:none}
html.hx-fs-on{overflow:hidden}
.hx-fs-lift{z-index:auto!important}
#th-tool.hx.hx-fs{position:fixed;inset:0;z-index:55;width:auto;max-width:none;margin:0;border:0;border-radius:0;padding:12px 24px 16px;overflow:hidden auto;overscroll-behavior:contain;gap:0}
.admin-bar #th-tool.hx.hx-fs{top:var(--wp-admin--admin-bar--height,32px)} /* signed-in site owners: below the WordPress bar */
@media (width <= 600px){.admin-bar #th-tool.hx.hx-fs{top:0}} /* 600 px = the WordPress admin bar's own point (it stops being fixed there), not a layout step */
.hx-fs>:not(.hx-one),#th-tool.hx-fs::before,#th-tool.hx-fs::after{display:none!important}
.hx-fs .hx-one{flex:1 1 0;min-height:0;gap:12px}
.hx-fs .hx-one>*{flex-shrink:0}
.hx-fs .hx-one>:not(.hx-fsbar,.hx-top,.hx-sw,.hx-panes,.hx-acts,.hx-msg){display:none!important}
.hx-fs .hx-h,.hx-fs .hx-sub,.hx-fs .hx-fsb{display:none}
.hx-fs .hx-fsbar{display:flex;align-items:center;gap:12px;min-height:var(--tap);padding-bottom:10px;border-bottom:1px solid var(--line)}
.hx-fst{margin:0;line-height:var(--lh-tight);font-size:var(--fs-body);font-weight:700;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hx-fsk{font-size:var(--fs-label);color:var(--muted)}
.hx-fsbar .btn{margin-left:auto;flex-shrink:0}
.hx-fs .hx-panes{flex:1;height:auto;min-height:420px}

/* screens */
@container tool (width > 48rem){
  .hx-sw{display:none!important}
  /* round 45: the swap button sits on the line between the two titles; each title row keeps room for it on its inner side */
  .hx-swapb{display:inline-grid}
  .hx-pt .hx-ph{padding-right:22px}
  .hx-pc .hx-ph{padding-left:22px}
  .hx.hx-swap :is(.hx-pt,.hx-pc){--hx-ptc:3;--hx-pcc:1}
  .hx.hx-swap .hx-pt .hx-ph{padding-right:0;padding-left:22px}
  .hx.hx-swap .hx-pc .hx-ph{padding-left:0;padding-right:22px}
  .hx.hx-swap .hx-acts>.hx-ag1{grid-column:2;grid-row:1}
  .hx.hx-swap .hx-acts>.hx-ag2{grid-column:1;grid-row:1}
}
@container tool (width <= 48rem){
  .hx-muses{grid-template-columns:minmax(0,1fr)}
  .hx-sw{display:flex;align-self:center}
  .hx-panes{grid-template-columns:minmax(0,1fr)}
  .hx:not(.hx-show-code) .hx-pc,.hx.hx-show-code .hx-pt{display:none}
  .hx-pane{grid-column:1}
  .hx-split,.hx-fsk{display:none}
  .hx-acts{grid-template-columns:minmax(0,1fr);gap:8px}
  .hx-ag{display:grid;grid-template-columns:repeat(auto-fit,minmax(max(8.5rem,calc(50% - 4px)),1fr))}
  .hx-ag .btn,.hx-ag .hx-dl,.hx-ag .hx-dlb{width:100%;justify-content:center}
  .hx-dlm{right:0}
  .hx-cmpbox{display:none}
  .hx-cards4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container tool (width <= 36rem){
  .hx-tbb{width:32px}
  .hx-tbw,.hx-tbl{width:auto}
  .hx-blkb{width:118px}
  .hx-fntb{width:104px}
  .hx-szb{width:26px}
  .hx-tb>.hx-tg+.hx-tg::before,.hx-sep{margin:0 3px}
  .hx-tb{column-gap:9px}
  .hx-tb>.hx-tg+.hx-tg::before{left:-5px;margin:0}
  .hx-tico{display:none}
  .hx-ag>:last-child:nth-child(odd){grid-column:1/-1}
  .hx-rows,.hx-ticks2,.hx-cards2{grid-template-columns:minmax(0,1fr)}
  .hx-msb{padding-left:0}
  .hx-mprev{table-layout:fixed;width:100%}
  .hx-mprev th{white-space:normal}
  .hx-mprev td{min-width:0}
  .hx-panes{height:var(--hx-h,clamp(520px,82vh,720px))}
  .hx-pts{display:block;margin:2px 0 0}
}
@media (width <= 768px){#th-tool.hx.hx-fs{padding:8px 12px 12px}}
@container tool (width <= 36rem){
  .hx-bub .hx-bblk,.hx-bub .hx-bblk+.hx-sep,.hx-bub [data-cmd=code],.hx-bub [data-cmd=removeFormat],.hx-bub [data-cmd=mark],.hx-bub .hx-szb,.hx-bub>.hx-tm:first-child,.hx-bub>.hx-tm:first-child+.hx-sep,.hx-bub [data-cmd=strikeThrough]{display:none}
  .hx-bub .hx-szi{width:64px}
  .hx-bub .hx-tmb svg:last-child{display:none} /* Line up and colour on a phone: the icon only */
  .hx-bub .hx-sep{margin:0 2px}
  .hx-tbar .hx-tmb svg:last-child{display:none} /* the floating bar fits a phone */
  .hx-blkb{width:128px}
  .hx-tbar .hx-tico{display:none}
  .hx-icard{flex-wrap:wrap;max-width:calc(100% - 8px);row-gap:2px}
  .hx-icard #hx-ialb{padding:0;width:var(--h-btn-sm);justify-content:center}
  .hx-icard #hx-ialb span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hx-tbar .hx-tdel{width:var(--h-btn-sm);padding:0;justify-content:center}
  .hx-tbar .hx-tdel span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hx-tbar .btn.sm{padding:0 8px}
  .hx-fs .hx-help{flex-wrap:nowrap;gap:6px}
  .hx-fs .hx-help .btn{width:var(--tap,44px);min-width:0;padding:0;justify-content:center}
  .hx-fs .hx-help .btn>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* full screen on a phone: one row of icons (names stay for screen readers) */
  .hx-fs .hx-panes{min-height:min(720px,80vh)}
  .hx-ag .btn{white-space:nowrap;padding-inline:10px}
}
@container tool (width <= 22.5rem){
  .hx-cards4{grid-template-columns:minmax(0,1fr)}
  .hx .hx-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .hx .hx-tabs button{padding:8px 10px;font-size:var(--fs-sm)}
  .hx-tabs .hx-tsub{font-size:12px}
}

/* print: both sides, full length, no buttons */
@media print{
  .hx-tabs,.hx-help,.hx-sw,.hx-split,.hx-swapb,.hx-fsbar,.hx-strip,.hx-big,.hx-acts,.hx-msg,.hx-opts,.hx-fr,#hx-find,.hx-foot,.hx-view,.hx-gut,.hx-ta{display:none!important}
  .hx-panes{grid-template-columns:minmax(0,1fr)}
  .hx-pt,.hx-pc{display:block!important} /* round 44: in print each side reads top to bottom: its title, the box at full width, the counts under it */
  .hx-pt{margin-bottom:18px}
  .hx-ed,.hx-pf{display:block}
  .hx-ed{min-height:0}
  .hx-panes,.hx-pane{height:auto;display:block}
  .hx-frame{display:none}
  .hx-area{box-shadow:none;border:1px solid #ccc;background:#fff}
  .hx-code{display:block;position:static}
  .hx-gut{display:none}
  .hx-cw{position:static}
  .hx-hl{position:static;overflow:visible;white-space:pre-wrap}
  .hx-rich,.hx-plain{overflow:visible;height:auto;position:static}
}

/* options (owner round 6): every option explains itself on hover; titles carry an icon and a plain line */
.hx-bico{display:inline-grid;place-items:center;flex:none;width:30px;height:30px;border-radius:9px;background:color-mix(in srgb,var(--ai) 12%,transparent);color:var(--ai-ink,var(--brand-ink,var(--brand)))}
.hx-bico svg{width:17px;height:17px}
.hx-bsub{display:block;margin-top:1px;font-size:var(--fs-label);font-weight:500;color:var(--muted)}
.hx-box2 .ag-bh{align-items:center;gap:10px}
.hx-qm{display:inline-grid;place-items:center;width:17px;height:17px;margin-left:3px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line);color:var(--muted);font-size:12px;font-weight:700;line-height:1;vertical-align:1px;cursor:help}
.hx-rl[title]{cursor:help}
.hx-fin input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.hx-rich img::selection{background:transparent}

/* tables, cells (2026-10-07): a chosen block of cells (on screen only), the Cells list in the table bar */
.hx-rich td.hx-csel,.hx-rich th.hx-csel{box-shadow:inset 0 0 0 9999px color-mix(in srgb,var(--ai) 16%,transparent);outline:2px solid color-mix(in srgb,var(--ai) 75%,transparent);outline-offset:-2px}
.hx-rich.hx-cs-on ::selection{background:transparent}
.hx-rich.hx-cs-on{caret-color:transparent}
#hx-txm{min-width:284px}
.hx-thint{margin:0;font-size:var(--fs-label);line-height:1.45;color:var(--muted)}
.hx-tlist{display:flex;flex-direction:column;margin:0 -6px}
.hx-tlist .hx-tact{display:flex;align-items:center;gap:10px;width:100%;min-height:var(--tap,44px);padding:8px 12px;border:0;border-radius:8px;background:transparent;color:var(--ink);font:inherit;font-size:var(--fs-sm);text-align:left;white-space:normal;cursor:pointer}
.hx-tlist .hx-tact:hover,.hx-tlist .hx-tact:focus-visible{background:color-mix(in srgb,var(--ink) 6%,transparent);outline:none}
.hx-tlist .hx-tact svg{flex:none;color:var(--brand-ink,var(--brand))}
.hx-tlist .hx-tact[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.hx-tlist .hx-tact[data-c2="cellClear"] svg{color:var(--muted)}
.hx-csw[data-cc=""]{background:linear-gradient(135deg,transparent 44%,#dc2626 44%,#dc2626 56%,transparent 56%),var(--surface)}
.hx-tcl2{display:flex;flex-direction:column;gap:8px}
.hx-talg{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.hx-talg .hx-sep{height:22px;margin:0 4px}
.hx-tab{display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);cursor:pointer}
.hx-tab:hover{background:color-mix(in srgb,var(--ink) 6%,var(--surface))}
.hx-tab[aria-pressed="true"]{background:color-mix(in srgb,var(--ai) 15%,var(--surface));border-color:var(--ai);color:var(--ai-ink,var(--brand-ink,var(--brand)))}

/* tables, hover (2026-10-08): the shade under the mouse shows live in the box (the same rules the code gets), and the Hover list */
.hx-rich table[data-hover] > tbody > tr > *{transition:background-color .15s ease,color .15s ease}
.hx-rich table[data-hover][data-hover-fade="off"] > tbody > tr > *{transition:none}
.hx-rich table[data-hover~="row"] > tbody > tr:hover > *{background-color:var(--hover-bg,#dfe8fc)!important;color:var(--hover-ink,inherit)!important}
.hx-rich table[data-hover~="cell"] > tbody > tr > :hover{background-color:var(--hover-cell,var(--hover-bg,#dfe8fc))!important;color:var(--hover-cell-ink,var(--hover-ink,inherit))!important}
@media (prefers-reduced-motion:reduce){.hx-rich table[data-hover] > tbody > tr > *{transition:none}}
#hx-thvm{min-width:284px}
.hx-hvopts{display:flex;flex-direction:column;gap:12px}
.hx-hvopts.is-off{opacity:.5}
.hx-hvsh{display:flex;flex-wrap:wrap;gap:0 16px}
#hx-thvb.is-set::after{content:"";flex:none;width:7px;height:7px;margin-left:2px;border-radius:50%;background:var(--ai)}
#hx-tbar{flex-wrap:wrap;row-gap:2px;max-width:calc(100vw - 16px)} /* the bar wraps instead of running past a phone screen */
.hx-tbar .hx-tunm{color:var(--ai-ink,var(--brand-ink,var(--brand)))} /* Unmerge, shown while a merged cell is chosen */

/* settings boxes fold (2026-10-10): the title line is a button, closed boxes show only their title + what is set now */
.hx-box2 .ag-bt{flex:1 1 auto;min-width:0}
.hx-fbtn{display:flex;flex-wrap:wrap;align-items:center;column-gap:10px;row-gap:2px;width:100%;margin:0;padding:2px 0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.hx-fbtn:focus-visible{outline:2px solid var(--ai);outline-offset:4px;border-radius:6px}
.hx-ftt{display:flex;flex-direction:column;min-width:0}
.hx-fsum{order:4;flex:1 1 100%;font-size:var(--fs-label);font-weight:400;line-height:1.4;color:var(--muted)}
.hx-fchg{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;background:color-mix(in srgb,var(--ai) 14%,transparent);color:var(--ai-ink,var(--brand-ink,var(--brand)));font-size:12px;font-weight:600}
.hx-fchg[hidden]{display:none}
.hx-fchev{display:inline-flex;margin-left:auto;color:var(--muted);transition:transform .15s ease}
.hx-fchev svg{width:18px;height:18px}
.hx-fbtn[aria-expanded="false"] .hx-fchev{transform:rotate(-90deg)}
.hx-fbtn:hover .hx-fchev{color:var(--ink)}
@media (prefers-reduced-motion:reduce){.hx-fchev{transition:none}}
/* round 29: Many at once: the 3 easy steps line, and one fold for the result choices */
.hx-measy{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 0;padding:0;list-style:none;counter-reset:hxe}
.hx-measy li{counter-increment:hxe;display:inline-flex;align-items:center;gap:8px;margin:0;padding:5px 14px 5px 5px;border:1px solid var(--line);border-radius:999px;font-size:var(--fs-label);color:var(--ink)}
.hx-measy li::before{content:counter(hxe);display:inline-flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;border-radius:50%;background:color-mix(in srgb,var(--ai) 14%,transparent);color:var(--ai);font-weight:700;font-size:13px}
.hx-mopt{padding:var(--pad-box)} /* round 68: spacing ladder (rule 136) */
.hx-mopt>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--gap-item)}
.hx-mopt>summary::-webkit-details-marker{display:none}
.hx-mopt>summary:focus-visible{outline:2px solid var(--ai);outline-offset:4px;border-radius:6px}
.hx-mopt>summary:hover .hx-fchev{color:var(--ink)}
.hx-mopt-t{font-weight:600;color:var(--ink)}
.hx-mopt-o{font-weight:400;color:var(--muted);font-size:var(--fs-label)}
.hx-mopt:not([open]) .hx-fchev{transform:rotate(-90deg)}
.hx-mopt[open]>summary{margin-bottom:var(--gap-item)}
.hx-mopt>.hx-mhow{margin-top:var(--gap-block)}
.hx-mopt>.hx-mhost:empty~.hx-mhow{margin-top:0}
/* round 33: the list and column Convert buttons use the shared .t-acts / .t-main / .t-btnrow of theme tool.css part B (rule 93); no button layout here */

/* round 35: the files that wait for Convert (look only; the buttons use the shared .t-acts / .t-btnrow, rule 93) */
.hx-mfl{display:flex;flex-direction:column;gap:var(--gap-item)}
.hx-mfl[hidden]{display:none}
.hx-mfl-h{margin:0;font-size:var(--fs-sm);font-weight:650;line-height:var(--lh-text);color:var(--ink)}
.hx-mfl-ul{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);max-height:320px;overflow:auto}
.hx-mfl-ul li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:6px 6px 6px 14px;border-top:1px solid var(--line);font-size:var(--fs-sm);line-height:var(--lh-tight)}
.hx-mfl-ul li:first-child{border-top:0}
.hx-mfn{flex:1 1 160px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.hx-mfs{flex:0 0 auto;color:var(--muted)}
.hx-mft{flex:0 1 auto;padding:1px 8px;border-radius:999px;font-size:var(--fs-tag);font-weight:650;line-height:18px}
.hx-mft.ok{background:color-mix(in srgb,var(--ok) 18%,transparent);color:color-mix(in srgb,var(--ok) 75%,var(--ink))}
.hx-mft.no{background:color-mix(in srgb,var(--warn) 22%,transparent);color:color-mix(in srgb,var(--warn) 55%,var(--ink))}
.hx-mfx{flex:0 0 auto;width:36px;height:36px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--muted);font:inherit;font-size:20px;line-height:1;cursor:pointer}
.hx-mfx:hover,.hx-mfx:focus-visible{background:var(--surface-2);color:var(--ink)}

/* round 40 (owner 2026-10-10): Many at once, one step at a time: a calm header, numbered steps joined by a line,
   cards with an icon and a check mark, a chosen step folds into one line with Change. No @media: the step indent
   and the line switch off by themselves when the box is narrower than 560 px (clamp on the box width). */
#th-tool.hx .hx-many [hidden]{display:none!important}
#th-tool.hx .hx-many .hx-mhead{gap:6px;padding:0 0 18px;border-bottom:1px solid var(--line)}
#th-tool.hx .hx-many .hx-mhead .hx-h{font-size:var(--fs-h2);letter-spacing:-.01em}
#th-tool.hx .hx-many .hx-mlead{margin:0;color:var(--muted);font-size:var(--fs-body);line-height:var(--lh-text)}
#th-tool.hx .hx-many .hx-mpriv{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin:6px 0 0;padding:4px 12px;border-radius:999px;font-size:var(--fs-label);line-height:1.4;color:color-mix(in srgb,var(--ok) 70%,var(--ink));background:color-mix(in srgb,var(--ok) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--ok) 24%,var(--surface))}
#th-tool.hx .hx-many .hx-mpriv svg{flex:none;width:14px;height:14px}
#th-tool.hx .hx-many .hx-mstep{position:relative;gap:14px;padding:22px 0 4px clamp(0px,calc((100% - 560px) * 999),46px)}
#th-tool.hx .hx-many .hx-mstep::before{content:"";position:absolute;left:15px;top:60px;bottom:-24px;width:clamp(0px,calc((100% - 560px) * 999),2px);background:var(--line);border-radius:2px}
#th-tool.hx .hx-many #hx-mstep3::before{display:none}
#th-tool.hx .hx-many .hx-msh{position:static;padding-left:clamp(0px,calc((560px - 100%) * 999),44px);min-height:32px}
#th-tool.hx .hx-many .hx-msn{position:absolute;left:0;top:22px;width:32px;height:32px;border-radius:50%;border:0;background:var(--brand);color:var(--on-brand);font-family:var(--font);font-size:14px;font-weight:700;box-shadow:0 0 0 4px var(--brand-soft)}
#th-tool.hx .hx-many .hx-msb{padding:0;margin:0;display:flex;flex-direction:column;gap:12px;min-width:0}
#th-tool.hx .hx-many .t-choice.hx-card{position:relative;display:flex;flex-direction:row;align-items:flex-start;gap:12px;margin:0;padding:14px 46px 14px 14px;background:var(--surface);border:1.5px solid var(--line);border-radius:14px;cursor:pointer;transition:border-color .15s,box-shadow .15s,background-color .15s}
#th-tool.hx .hx-many .t-choice.hx-card:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--line));box-shadow:var(--shadow)}
#th-tool.hx .hx-many .t-choice.hx-card:has(input:checked){border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent)}
#th-tool.hx .hx-many .t-choice.hx-card>input{position:absolute;inset:auto;top:0;left:0;width:1px;height:1px;margin:0;opacity:0;transform:none;pointer-events:none}
#th-tool.hx .hx-many .t-choice.hx-card::after{content:"";position:absolute;top:15px;right:15px;width:20px;height:20px;box-sizing:border-box;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--muted) 40%,transparent);background:var(--surface)}
#th-tool.hx .hx-many .t-choice.hx-card:has(input:checked)::after{border-color:var(--brand);background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
#th-tool.hx .hx-many .t-choice.hx-card:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:2px}
#th-tool.hx .hx-many .hx-srci{flex:0 0 40px;width:40px;height:40px;border-radius:10px;background:var(--surface-2);color:var(--brand)}
#th-tool.hx .hx-many .hx-card:has(input:checked) .hx-srci{background:var(--surface)}
#th-tool.hx .hx-many .hx-srci svg{width:20px;height:20px}
#th-tool.hx .hx-many .hx-card .hx-cb{display:flex;flex-direction:column;gap:4px;min-width:0}
#th-tool.hx .hx-many .hx-card .hx-ct{font-size:15px;font-weight:650;color:var(--ink)}
#th-tool.hx .hx-many .hx-card .hx-cs{font-size:var(--fs-label);color:var(--muted)}
#th-tool.hx .hx-many .hx-mopt{margin:0;border-style:solid;border-width:5px 1px 1px;border-radius:var(--r-card)} /* round 62: the site tone box (t-tone-0 purple) holds the colors, like LinkedIn Formatter round 33 */
#th-tool.hx .hx-many .hx-mopt .hx-fchev{flex:none;padding:var(--sp-1);border-radius:50%;background:var(--tone);color:var(--surface)}
.hx-mjobs{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border:1px solid var(--line);border-radius:25px;background:var(--surface-2);width:fit-content;max-width:100%;margin-inline:auto} /* round 61: the job is one segmented row, not three cards; round 88 (owner): two jobs = a small pill switch */
.hx-mj{position:relative;flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:6px 18px;border-radius:20px;cursor:pointer;font-weight:600;font-size:.9375rem;color:var(--ink)}
.hx-mj input{position:absolute;opacity:0;pointer-events:none}
.hx-mj:hover{background:var(--surface)}
.hx-mj:has(input:checked){background:var(--grad);color:var(--on-brand)}
.hx-mj:has(input:focus-visible){outline:2px solid var(--ai);outline-offset:2px}
.hx-mji{display:inline-flex}
.hx-mji svg{width:18px;height:18px}
.hx-mjx{margin:8px 0 0;color:var(--muted);font-size:var(--fs-label);text-align:center}
.hx-mhost{display:grid;gap:var(--gap-item)}
.hx-mhost:empty{display:none}
.hx-mhost .hx-n{display:none} /* counts speak about the One document text */
.hx-mhost .hx-row:has([data-k="tables"]){display:none} /* Many has its own tables-in-cells row */
#th-tool.hx .hx-many #hx-mfw{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;font-size:var(--fs-label);color:var(--muted)}
#th-tool.hx .hx-many .hx-mfw-l{margin-right:2px}
#th-tool.hx .hx-many .hx-mft{padding:3px 10px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink);font-size:12px;line-height:1.5;white-space:nowrap}

#th-tool.hx .hx-many .hx-mstep::before{display:none}
#th-tool.hx .hx-many .hx-mstep:has(+ .hx-mstep:not([hidden]))::before{display:block}
/* final check (2026-10-10): long words never push past a phone screen: file-list reasons and file names wrap, option chips may wrap */
#th-tool.hx .hx-mfl-ul li .hx-mft{white-space:normal;min-width:0}
#th-tool.hx .hx-mfl-ul li .hx-mfn{min-width:0;overflow-wrap:anywhere}
#th-tool.hx .hx-chips .chip{white-space:normal;max-width:100%}

/* round 50: the Button box (add a button, or double-click one to change it) */
.hx-bpop{width:min(27.5rem,calc(100% - 8px));max-width:calc(100% - 8px)}
.hx-bpop .hx-chips{display:flex;flex-wrap:wrap;gap:6px}
.hx-bds{display:grid;gap:6px}
.hx-bd{display:flex;align-items:center;justify-content:center;min-height:44px;padding:4px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;font:inherit}
.hx-bd:hover{border-color:var(--btn2-border-hover)}
.hx-bd[aria-checked="true"]{border-color:var(--brand);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 35%,transparent)}
.hx-bd:focus-visible,.hx-bsw:focus-visible{outline:2px solid var(--ai);outline-offset:2px}
.hx-bd span{pointer-events:none;max-width:100%;overflow-wrap:anywhere}
.hx-bcrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.hx-bsws{display:flex;flex-wrap:wrap;gap:6px}
.hx-bsw{width:32px;height:32px;padding:0;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px var(--line);cursor:pointer}
.hx-bsw[aria-checked="true"]{box-shadow:0 0 0 2px var(--brand)}
.hx-bcl{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-label);color:var(--ink)}
.hx-bcl[hidden]{display:none}
.hx-bcl input[type=color]{width:36px;height:32px;padding:0;border:1px solid var(--line);border-radius:8px;background:none;cursor:pointer}
.hx-bpv{display:flex;padding:14px;border:1px dashed var(--line);border-radius:10px;background:#fff;overflow:hidden}
.hx-bpv a{pointer-events:none;max-width:100%;overflow-wrap:anywhere}
.hx-bpop .ag-hint{margin:0}
.hx-bpop{gap:8px;max-height:min(640px,calc(100vh - 96px));overflow:auto;overscroll-behavior:contain}
.hx-bds{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
/* round 52: tidy color row, Size / Corners / Place folded under "More choices" */
.hx-bcrow{gap:8px 10px}
.hx-bcs{align-self:stretch;width:1px;min-height:28px;background:var(--line)}
.hx-bcl{min-height:36px;padding:2px 12px 2px 3px;border:1px solid var(--line);border-radius:999px;background:var(--surface);cursor:pointer}
.hx-bcl:hover{border-color:var(--btn2-border-hover)}
.hx-bcl input[type=color]{flex:none;width:30px;height:30px;border:0;border-radius:50%;overflow:hidden}
.hx-bcl input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.hx-bcl input[type=color]::-webkit-color-swatch{border:1px solid var(--line);border-radius:50%}
.hx-bcl input[type=color]::-moz-color-swatch{border:1px solid var(--line);border-radius:50%}
.hx-bmore{border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.hx-bmore>summary{display:flex;align-items:center;flex-wrap:wrap;gap:2px 10px;min-height:44px;padding:6px 34px 6px 12px;position:relative;cursor:pointer;list-style:none;border-radius:10px}
.hx-bmore>summary::-webkit-details-marker{display:none}
.hx-bmore>summary::after{content:"";position:absolute;right:14px;top:50%;width:7px;height:7px;margin-top:-6px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .15s}
.hx-bmore[open]>summary::after{margin-top:-2px;transform:rotate(-135deg)}
.hx-bmore>summary:focus-visible{outline:2px solid var(--ai);outline-offset:2px}
.hx-bmt{font-weight:600;font-size:var(--fs-label);color:var(--ink)}
.hx-bms{min-width:0;color:var(--muted);font-size:var(--fs-label);overflow-wrap:anywhere}
.hx-bmin{display:grid;gap:8px;padding:2px 12px 12px}
.hx-bsel{display:grid;grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));gap:8px}
.hx-bsf{display:grid;gap:4px;min-width:0}
.hx-bsf .hx-rl{margin:0}
.hx-bsf select{width:100%;min-height:40px}
/* round 53: own gradient (shown only with the Gradient design) */
.hx-bgr{display:grid;gap:8px}
.hx-bgr[hidden]{display:none}
.hx-bgr>.hx-rl{margin:0}
.hx-bgrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.hx-bswap{padding:2px 14px;font:inherit;font-size:var(--fs-label)}
.hx-bgd{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0}
.hx-bgd .hx-rl{margin:0}
.hx-bgd select{width:auto;max-width:100%;min-height:36px}
/* round 55: the preview and the buttons stay in sight at the bottom of the Button box */
.hx-bfoot{position:sticky;bottom:-12px;z-index:2;display:grid;gap:8px;margin:0 -12px -12px;padding:10px 12px 12px;background:var(--surface);border-top:1px solid var(--line);border-radius:0 0 14px 14px}
.hx-bfoot .hx-bpv{max-height:9rem;overflow:auto}
/* round 55: drag bar under the two boxes */
.hx-hgrip{position:relative;display:flex;align-items:center;justify-content:center;height:22px;margin-top:4px;border-radius:8px;cursor:row-resize;touch-action:none}
.hx-hgrip::after{content:"";position:absolute;inset:-8px 0}
.hx-hgrip>span{width:56px;height:5px;border-radius:999px;background:var(--line);transition:background .15s}
.hx-hgrip:hover>span,.hx-hgrip:focus-visible>span,.hx-hdrag .hx-hgrip>span{background:var(--brand)}
.hx-hgrip:focus-visible{outline:2px solid var(--ai);outline-offset:2px}
.hx-hdrag,.hx-hdrag *{cursor:row-resize;user-select:none}
.hx-bpop{max-height:calc(100vh - 120px)}
.hx-bds{grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr))}
.hx-bpv{padding:10px}
.hx-bchk{display:flex;flex-wrap:wrap;gap:0 16px}

/* round 72: progress panel while files convert */
.hx-prog{display:grid;gap:var(--gap-item);padding:var(--pad-box);border:1px solid color-mix(in srgb,var(--brand) 35%,var(--line));border-radius:var(--r-card);background:color-mix(in srgb,var(--brand) 5%,var(--surface))}
.hx-prog[hidden]{display:none}
.hx-prog-top{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap-item)}
.hx-prog-t{flex:1 1 auto;min-width:0;color:var(--ink)}
.hx-prog-pc{font-weight:700;font-variant-numeric:tabular-nums;color:var(--brand-ink)}
.hx-prog-spin{flex:none;width:var(--sp-5);height:var(--sp-5);border-radius:50%;border:3px solid color-mix(in srgb,var(--brand) 20%,transparent);border-top-color:var(--brand);animation:hx-spin .8s linear infinite}
.hx-prog-bar{height:var(--sp-3);border-radius:999px;background:color-mix(in srgb,var(--brand) 14%,var(--surface));overflow:hidden}
.hx-prog-bar>span{display:block;height:100%;width:0;border-radius:inherit;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.28) 0 8px,transparent 8px 16px),linear-gradient(90deg,var(--brand),var(--acc0));background-size:22.6px 22.6px,100% 100%;transition:width .35s ease;animation:hx-stripe .9s linear infinite}
.hx-prog-n{margin:0;color:var(--muted);font-size:var(--fs-label);overflow-wrap:anywhere}
.hx-prog.is-off .hx-prog-spin,.hx-prog.is-off .hx-prog-bar>span{animation:none}
@keyframes hx-spin{to{transform:rotate(360deg)}}
@keyframes hx-stripe{to{background-position:22.6px 0,0 0}}
@media (prefers-reduced-motion:reduce){.hx-prog-spin,.hx-prog-bar>span{animation:none;transition:none}}
@media print{.hx-prog{display:none}}

/* progress panel for every file the visitor gets (rule 182): own copy of the Table to Image panel (.ti-pg*, rule 171 (f)); a child of body, floating at the bottom */
.hx-pg{position:fixed;inset-inline:var(--gap-item);bottom:28px;margin:0 auto;max-inline-size:26rem;z-index:61;display:flex;flex-direction:column;gap:var(--gap-item);padding:var(--gap-item);border-radius:var(--r-card);border:1px solid color-mix(in srgb,var(--brand) 35%,var(--line));background:color-mix(in srgb,var(--brand) 6%,var(--surface));box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 8%,transparent),var(--shadow);animation:hx-pg-in .25s ease both}
.hx-pg[hidden]{display:none}
.hx-pgh{display:flex;align-items:center;gap:var(--gap-item);min-inline-size:0}
.hx-pgring{--p:0;position:relative;flex:none;display:grid;place-items:center;inline-size:3rem;block-size:3rem;border-radius:50%;background:conic-gradient(var(--brand) calc(var(--p)*1%),color-mix(in srgb,var(--brand) 16%,var(--surface)) 0)}
.hx-pgring::before{content:'';position:absolute;inset:5px;border-radius:50%;background:var(--surface)}
.hx-pgring>b{position:relative;font-size:12px;font-weight:800;color:var(--brand);font-variant-numeric:tabular-nums}
.hx-pgx{display:flex;flex-direction:column;flex:1 1 auto;min-inline-size:0}
.hx-pgt{font-size:var(--fs-body);color:var(--ink);overflow-wrap:anywhere}
.hx-pgs{font-size:var(--fs-label);color:var(--muted);overflow-wrap:anywhere}
.hx-pgbar{position:relative;display:block;block-size:8px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--brand) 14%,var(--surface));overflow:hidden}
.hx-pgbar>i{position:absolute;inset:0 auto 0 0;width:0;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--brand) 70%,#fff),var(--brand));transition:width .35s ease;overflow:hidden}
.hx-pgbar>i::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-100%);animation:hx-pg-sheen 1.4s ease-in-out infinite}
.hx-pgm{font-size:var(--fs-label);color:var(--muted);font-variant-numeric:tabular-nums}
.hx-pgsr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}
@keyframes hx-pg-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes hx-pg-sheen{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.hx-pg,.hx-pgbar>i::after{animation:none}.hx-pgbar>i{transition:none}}
@media print{.hx-pg{display:none}}
/* round 100: a table with its own look (lines or colors on the table, a row or a cell) shows no dashed guide lines; its own lines win */
.hx-rich table:is([border]:not([border="0"]),[style*="border:"],[style*="border-top"],[style*="border-bottom"],[style*="border-left"],[style*="border-right"],[style*="border-color"],[style*="border-style"],[style*="border-width"],[style*="background"],:has([style*="border:"],[style*="border-top"],[style*="border-bottom"],[style*="border-left"],[style*="border-right"],[style*="border-color"],[style*="border-style"],[style*="border-width"],[style*="background"])) :is(td,th){border-style:none}
/* round 100: Web preview (a dialog on the page body) */
.hx-wp{inline-size:calc(100% - 24px);max-inline-size:1200px;block-size:calc(100% - 24px);max-block-size:none;padding:0;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);color:var(--text);box-shadow:var(--shadow);overflow:hidden}
.hx-wp[open]{display:flex;flex-direction:column}
.hx-wp::backdrop{background:rgba(15,18,25,.55)}
.hx-wph{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:12px 16px;border-bottom:1px solid var(--line)}
.hx-wph h2{margin:0;font-size:var(--fs-h3,1.15rem);flex:1 1 auto}
.hx-wpo{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.hx-wpo span{font-size:var(--fs-label);color:var(--muted);margin-inline-end:4px}
.hx-wpo button{min-block-size:36px;padding:4px 12px;border:1px solid var(--line);border-radius:999px;background:transparent;color:inherit;font:inherit;font-size:var(--fs-sm,.9rem);cursor:pointer}
.hx-wpo button[aria-checked="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.hx-wpo button:focus-visible,.hx-wpx:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.hx-wpn{margin:0;padding:8px 16px;font-size:var(--fs-label);color:var(--muted)}
.hx-wpf{flex:1 1 auto;min-block-size:0;display:flex;justify-content:center;padding:0 16px 16px}
.hx-wpf iframe{display:block;inline-size:100%;block-size:100%;min-block-size:300px;border:1px solid var(--line);border-radius:10px}
.hx-wpf[data-w="phone"] iframe{inline-size:375px;max-inline-size:100%}
.hx-wpf[data-w="tablet"] iframe{inline-size:768px;max-inline-size:100%}
@media print{.hx-wp{display:none}}