/* ===== 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="table-image"] *). 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="table-image"] *){ --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="table-image"] *){ --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="table-image"] *){ --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="table-image"] *){ /* 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="table-image"] *){--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="table-image"] *){box-sizing:border-box} html:where(#th-tool[data-module="table-image"] *){-webkit-text-size-adjust:100%} body:where(#th-tool[data-module="table-image"] *){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="table-image"] *){color:var(--brand-ink);text-decoration:none} a:hover:where(#th-tool[data-module="table-image"] *){text-decoration:underline;text-underline-offset:3px} h1:where(#th-tool[data-module="table-image"] *),h2:where(#th-tool[data-module="table-image"] *),h3:where(#th-tool[data-module="table-image"] *){line-height:1.1;letter-spacing:-.02em;margin:0} p:where(#th-tool[data-module="table-image"] *){margin:0} button:where(#th-tool[data-module="table-image"] *),input:where(#th-tool[data-module="table-image"] *),select:where(#th-tool[data-module="table-image"] *),textarea:where(#th-tool[data-module="table-image"] *){font:inherit;color:inherit} :focus-visible:where(#th-tool[data-module="table-image"] *){outline:3px solid color-mix(in srgb,var(--ai) 55%,transparent);outline-offset:2px;border-radius:6px} .wrap:where(#th-tool[data-module="table-image"] *){max-width:1280px;margin:0 auto;padding:0 32px} .btn:where(#th-tool[data-module="table-image"] *){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="table-image"] *){ --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="table-image"] *){transition:border-color .3s ease,background-color .3s ease,box-shadow .3s ease,color .2s ease} .btn-brand:where(#th-tool[data-module="table-image"] *){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="table-image"] *)::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="table-image"] *){text-decoration:none;filter:none;box-shadow:var(--btn-glow-hover)} .btn-brand:hover:where(#th-tool[data-module="table-image"] *)::before{opacity:1} .btn-brand:active:where(#th-tool[data-module="table-image"] *){box-shadow:var(--btn-glow-press)} .btn-ghost:where(#th-tool[data-module="table-image"] *){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="table-image"] *){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="table-image"] *)::before{display:none}@media (prefers-reduced-motion:reduce){ .btn:where(#th-tool[data-module="table-image"] *),.btn:where(#th-tool[data-module="table-image"] *)::before{transition:none}} .chip:where(#th-tool[data-module="table-image"] *){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="table-image"] *){border-color:color-mix(in srgb,var(--brand) 45%,var(--line));text-decoration:none} body:has(>.hdr):where(#th-tool[data-module="table-image"] *)::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="table-image"] *)::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="table-image"] *)::before{display:none!important;content:none!important}} .card:where(#th-tool[data-module="table-image"] *){background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)} .inp:where(#th-tool[data-module="table-image"] *){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="table-image"] *){height:auto;padding:var(--pad-field);line-height:var(--lh-text)} .inp:focus:where(#th-tool[data-module="table-image"] *){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="table-image"] *){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}@media (width <= 1024px){ .wrap:where(#th-tool[data-module="table-image"] *){padding:0 18px}}@media (width <= 768px){ body:where(#th-tool[data-module="table-image"] *){padding-bottom:68px}}@media (width <= 576px){ :root:where(#th-tool[data-module="table-image"] *){--h-main:72px}} .chip:where(#th-tool[data-module="table-image"] *){white-space:nowrap} [hidden]:where(#th-tool[data-module="table-image"] *){display:none!important} .row:where(#th-tool[data-module="table-image"] *){display:flex;gap:10px;align-items:center;flex-wrap:wrap} :root:where(#th-tool[data-module="table-image"] *){--acc0:#7C3AED;--acc1:#2563EB;--acc2:#0D9488;--acc3:#D97706;--acc4:#DB2777;--acc5:#059669} :root[data-theme="dark"]:where(#th-tool[data-module="table-image"] *){--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="table-image"] *){--acc0:#8B5CF6;--acc1:#60A5FA;--acc2:#2DD4BF;--acc3:#FBBF24;--acc4:#F472B6;--acc5:#34D399}} small:where(#th-tool[data-module="table-image"] *){font-size:max(var(--fs-min),.85em)} .btn:not(.tool-actions .btn):where(#th-tool[data-module="table-image"] *){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="table-image"] *){height:auto!important;min-height:var(--h-btn-sm);padding-top:6px;padding-bottom:6px} html:where(#th-tool[data-module="table-image"] *),body:where(#th-tool[data-module="table-image"] *){overflow-x:clip}@supports (appearance:base-select){ html select:not([multiple]):not([size]):where(#th-tool[data-module="table-image"] *),html select:not([multiple]):not([size]):where(#th-tool[data-module="table-image"] *)::picker(select){appearance:base-select} html select:not([multiple]):not([size]):where(#th-tool[data-module="table-image"] *){align-items:center} html select:not([multiple]):not([size]):where(#th-tool[data-module="table-image"] *)::picker-icon{display:none} html select:not([multiple]):not([size]):where(#th-tool[data-module="table-image"] *)::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="table-image"] *){ 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="table-image"] *){background:color-mix(in srgb,var(--brand) 10%,transparent);outline:none} html select:not([multiple]):not([size]) option:checked:where(#th-tool[data-module="table-image"] *){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="table-image"] *){opacity:.5} html select:not([multiple]):not([size]) optgroup:where(#th-tool[data-module="table-image"] *){font-weight:700;padding-block:4px} html select:not([multiple]):not([size]) option:where(#th-tool[data-module="table-image"] *)::checkmark{color:var(--brand-ink)}} /* tool.css copy */ :root:where(#th-tool[data-module="table-image"] *){--h-drop:17.5rem} .t-drop:where(#th-tool[data-module="table-image"] *){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="table-image"] *){display:none} .t-drop:hover:where(#th-tool[data-module="table-image"] *),.t-drop.is-drag:where(#th-tool[data-module="table-image"] *){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="table-image"] *){outline:none;border-color:var(--brand);border-style:solid;box-shadow:var(--field-glow-hover)} .t-drop-i:where(#th-tool[data-module="table-image"] *){transition:transform .2s ease} .t-drop:hover .t-drop-i:where(#th-tool[data-module="table-image"] *),.t-drop.is-drag .t-drop-i:where(#th-tool[data-module="table-image"] *){transform:translateY(-3px) scale(1.03)}@media (prefers-reduced-motion:reduce){ .t-drop-i:where(#th-tool[data-module="table-image"] *){transition:none} .t-drop:hover .t-drop-i:where(#th-tool[data-module="table-image"] *),.t-drop.is-drag .t-drop-i:where(#th-tool[data-module="table-image"] *){transform:none}} .tool:where(#th-tool[data-module="table-image"] *){padding:24px;display:flex;flex-direction:column;gap:18px;position:relative;border-radius:24px} .tool:where(#th-tool[data-module="table-image"] *)::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 <= 1024px){ .tool:where(#th-tool[data-module="table-image"] *){padding:16px}} .tool-zone:where(#th-tool[data-module="table-image"] *){padding-bottom:8px} .tool:where(#th-tool[data-module="table-image"] *){padding:22px 24px 20px;gap:16px} .tt-label:where(#th-tool[data-module="table-image"] *){font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .chip[aria-pressed="true"]:where(#th-tool[data-module="table-image"] *){background:var(--ink);color:var(--bg);border-color:var(--ink)} .inp.sm:where(#th-tool[data-module="table-image"] *){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="table-image"] *){height:var(--h-btn-sm);padding:0 12px;font-size:14px;border-radius:10px} .tool-foot:where(#th-tool[data-module="table-image"] *){display:flex;flex-direction:column;gap:12px;border-top:1px dashed var(--line);padding-top:14px} .hist:where(#th-tool[data-module="table-image"] *){display:flex;align-items:center;gap:10px;flex-wrap:wrap} .hist .chip:where(#th-tool[data-module="table-image"] *){cursor:pointer;font-size:13px;font-variant-numeric:tabular-nums} .linkish:where(#th-tool[data-module="table-image"] *){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="table-image"] *){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="table-image"] *){display:contents} #th-tool .t-selw.on:where(#th-tool[data-module="table-image"] *){display:grid;min-width:0;max-width:100%} #th-tool .t-selw.on>select:where(#th-tool[data-module="table-image"] *){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="table-image"] *){color:var(--ink);-webkit-text-fill-color:var(--ink)} #th-tool .t-selt:where(#th-tool[data-module="table-image"] *){display:none} #th-tool .t-selw.on>.t-selt:where(#th-tool[data-module="table-image"] *){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="table-image"] *),#th-tool select.t-fullrow:where(#th-tool[data-module="table-image"] *){width:100%;max-width:100%} #th-tool:where(#th-tool[data-module="table-image"] *){overflow-wrap:break-word} #th-tool .chip:where(#th-tool[data-module="table-image"] *){white-space:normal;overflow-wrap:anywhere} #th-tool .hist .chip:where(#th-tool[data-module="table-image"] *){white-space:normal;overflow-wrap:anywhere;text-overflow:clip;overflow:visible;text-align:left}@media (width <= 576px){ .tool:where(#th-tool[data-module="table-image"] *){padding:16px}} .tool-hero:where(#th-tool[data-module="table-image"] *){position:relative;overflow-x:clip;padding-bottom:30px} .tool-hero:where(#th-tool[data-module="table-image"] *)::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="table-image"] *){position:relative;z-index:1} .tool-zone .tool:where(#th-tool[data-module="table-image"] *){max-width:1040px;margin:0 auto;background:var(--surface);box-shadow:var(--shadow-lg)} .tool-zone .tool:where(#th-tool[data-module="table-image"] *){transition:box-shadow .25s} .tool-zone .tool:focus-within:where(#th-tool[data-module="table-image"] *){box-shadow:var(--shadow-lg),0 0 0 4px color-mix(in srgb,var(--brand) 14%,transparent)}@media print{ html:root:where(#th-tool[data-module="table-image"] *),html:root[data-theme="dark"]:where(#th-tool[data-module="table-image"] *),html:root:not([data-theme="light"]):where(#th-tool[data-module="table-image"] *){--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="table-image"] *){background:#fff!important;color:#111} dialog:where(#th-tool[data-module="table-image"] *){display:none!important} .tool-hero:where(#th-tool[data-module="table-image"] *){background:none!important;padding:0!important} .tool:where(#th-tool[data-module="table-image"] *){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="table-image"] *){break-inside:avoid} .tool :is(h2,h3,h4,legend,summary,label,thead,.t-bx-h,.t-sec-h):where(#th-tool[data-module="table-image"] *){break-after:avoid} body:where(#th-tool[data-module="table-image"] *){padding-bottom:0!important} .tool-zone:where(#th-tool[data-module="table-image"] *){padding-bottom:0!important} .tool .btn:where(#th-tool[data-module="table-image"] *),.hist:where(#th-tool[data-module="table-image"] *){display:none!important} details:not([open])>*:not(summary):where(#th-tool[data-module="table-image"] *){display:none} a:where(#th-tool[data-module="table-image"] *){color:inherit;text-decoration:none}}@media print{ .tool:where(#th-tool[data-module="table-image"] *)::before,.tool:where(#th-tool[data-module="table-image"] *)::after,.tool-hero:where(#th-tool[data-module="table-image"] *)::after{display:none!important;content:none!important}} .t-stack:not([hidden]):where(#th-tool[data-module="table-image"] *){display:flex;flex-direction:column;gap:var(--gap-block)} .t-box:where(#th-tool[data-module="table-image"] *){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="table-image"] *){float:left;width:100%;padding:0;margin:0 0 var(--gap-item);font-size:var(--fs-label);font-weight:650;color:var(--ink)} .t-bx>legend:where(#th-tool[data-module="table-image"] *){margin-bottom:0;font-size:var(--fs-body);font-weight:700} .t-bx>legend small:where(#th-tool[data-module="table-image"] *){display:block;margin-top:2px;font-size:var(--fs-label);font-weight:400;line-height:var(--lh-text);color:var(--muted)} .t-bx-b:where(#th-tool[data-module="table-image"] *){display:flex;flex-direction:column;gap:var(--gap-block);min-width:0} .t-tone:where(#th-tool[data-module="table-image"] *){--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="table-image"] *){color:color-mix(in srgb,var(--tone) 62%,var(--ink))} .t-tone>legend small:where(#th-tool[data-module="table-image"] *){color:var(--muted)} .t-tone>legend:where(#th-tool[data-module="table-image"] *)::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="table-image"] *){--tone:var(--acc0)} .t-tone-1:where(#th-tool[data-module="table-image"] *){--tone:var(--acc1)} .t-tone-2:where(#th-tool[data-module="table-image"] *){--tone:var(--acc2)} .t-tone-5:where(#th-tool[data-module="table-image"] *){--tone:var(--acc5)} .t-choice:where(#th-tool[data-module="table-image"] *){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="table-image"] *){border-color:color-mix(in srgb,var(--brand) 45%,var(--line))} .t-choice:has(input:checked):where(#th-tool[data-module="table-image"] *){border-color:var(--brand);background:color-mix(in srgb,var(--brand) 9%,var(--surface))} .t-choice>input:where(#th-tool[data-module="table-image"] *){flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--brand)} .t-hint:where(#th-tool[data-module="table-image"] *){display:block;margin-top:var(--gap-label);font-size:var(--fs-label);color:var(--muted)} .t-msg:where(#th-tool[data-module="table-image"] *){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-info:where(#th-tool[data-module="table-image"] *){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="table-image"] *){display:none} :root[data-theme="dark"] .t-msg:where(#th-tool[data-module="table-image"] *){color:color-mix(in srgb,var(--warn) 40%,#fff)} :root[data-theme="dark"] .t-msg.is-info:where(#th-tool[data-module="table-image"] *){color:var(--ink)}@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .t-msg:where(#th-tool[data-module="table-image"] *){color:color-mix(in srgb,var(--warn) 40%,#fff)} :root:not([data-theme="light"]) .t-msg.is-info:where(#th-tool[data-module="table-image"] *){color:var(--ink)}} .tool :is(input,textarea):where(#th-tool[data-module="table-image"] *)::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="table-image"] *){--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="table-image"] *){margin:0;font-size:var(--fs-label);line-height:var(--lh-text);color:var(--muted)} .ag-hint b:where(#th-tool[data-module="table-image"] *){color:var(--ink);font-weight:650} .ag-hint .linkish:where(#th-tool[data-module="table-image"] *){margin-left:6px;font-size:var(--fs-label);color:var(--brand-ink);font-weight:600} .ag-i:where(#th-tool[data-module="table-image"] *){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="table-image"] *),.ag-i[aria-expanded="true"]:where(#th-tool[data-module="table-image"] *){background:var(--brand);border-color:var(--brand);color:#fff} .ag-i:focus-visible:where(#th-tool[data-module="table-image"] *){outline:2px solid var(--ai);outline-offset:2px} .ag-how>summary:where(#th-tool[data-module="table-image"] *){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="table-image"] *)::-webkit-details-marker{display:none} .ag-sum-w:where(#th-tool[data-module="table-image"] *){display:inline-flex;align-items:center;gap:10px} .ag-how>summary:hover .ag-sum-t:where(#th-tool[data-module="table-image"] *){color:var(--brand-ink);text-decoration:underline;text-underline-offset:3px} .ag-how>summary:hover .ag-i:where(#th-tool[data-module="table-image"] *),.ag-how[open]>summary .ag-i:where(#th-tool[data-module="table-image"] *){background:var(--brand);border-color:var(--brand);color:#fff} .ag-how>summary:focus-visible:where(#th-tool[data-module="table-image"] *){outline:2px solid var(--ai);outline-offset:2px} .ag-how .ag-howt:where(#th-tool[data-module="table-image"] *){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="table-image"] *){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="table-image"] *){margin:0}@media print{ .ag-i:where(#th-tool[data-module="table-image"] *),.ag-hint .linkish:where(#th-tool[data-module="table-image"] *){display:none!important}} :where(.tool) :is(input,select,textarea):where(#th-tool[data-module="table-image"] *){max-width:100%} .tool .chip:where(#th-tool[data-module="table-image"] *){max-width:100%} .tool .hist .row:where(#th-tool[data-module="table-image"] *){min-width:0;max-width:100%} .tool .hist .chip:where(#th-tool[data-module="table-image"] *){min-width:0;overflow:hidden}@container tool (width <= 22.5rem){ select.inp:where(#th-tool[data-module="table-image"] *){padding-right:26px;background-position:calc(100% - 13px) 20px,calc(100% - 8px) 20px} select.inp.sm:where(#th-tool[data-module="table-image"] *){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="table-image"] *){padding-left:10px;padding-right:24px}} #th-tool .t-btnrow:where(#th-tool[data-module="table-image"] *){display:flex;flex-wrap:nowrap;align-items:stretch;gap:8px;margin:0} #th-tool .t-btnrow>.btn:where(#th-tool[data-module="table-image"] *){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="table-image"] *){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="table-image"] *){flex:0 1 auto}}@container tool (width <= 22.5rem){ #th-tool .t-btnrow>.btn.sm:where(#th-tool[data-module="table-image"] *){padding-left:8px;padding-right:8px;gap:6px}} #th-tool .t-main:where(#th-tool[data-module="table-image"] *){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="table-image"] *){align-self:stretch;width:100%}} #th-tool .t-btnrow:has(>.btn~.btn):not(:has(>.btn~.btn~.btn)):where(#th-tool[data-module="table-image"] *){flex-wrap:wrap} #th-tool .t-btnrow:has(>.btn~.btn):not(:has(>.btn~.btn~.btn))>.btn:where(#th-tool[data-module="table-image"] *){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="table-image"] *){flex:0 1 auto}} #th-tool .t-btnrow:has(>.btn~.btn~.btn):where(#th-tool[data-module="table-image"] *){flex-wrap:wrap} #th-tool .t-btnrow:has(>.btn~.btn~.btn)>.btn:where(#th-tool[data-module="table-image"] *){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="table-image"] *){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="table-image"] *){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="table-image"] *){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="table-image"] *){flex:1 1 100%!important;max-width:none!important} #th-tool .t-bal:where(#th-tool[data-module="table-image"] *){flex-wrap:wrap!important} #th-tool .t-bal>.btn:where(#th-tool[data-module="table-image"] *){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="table-image"] *){display:none} #th-tool .btn:not(.sm)>svg:where(#th-tool[data-module="table-image"] *){width:18px!important;height:18px!important} #th-tool .btn>svg:where(#th-tool[data-module="table-image"] *){flex:none} #th-tool .t-btnrow.t-nat:where(#th-tool[data-module="table-image"] *){justify-content:center} #th-tool .t-btnrow.t-nat>.btn:where(#th-tool[data-module="table-image"] *){flex:0 1 auto!important;max-width:100%} #th-tool .t-next:where(#th-tool[data-module="table-image"] *){display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--gap-item) var(--gap-grid);padding:var(--pad-box);border:1px dashed var(--line);border-radius:var(--radius-sm);background:var(--surface-2)} #th-tool .t-next[hidden]:where(#th-tool[data-module="table-image"] *){display:none} #th-tool .t-next p:where(#th-tool[data-module="table-image"] *){flex:1 1 240px;min-width:0;margin:0;font-size:var(--fs-body);color:var(--ink)} #th-tool .t-next .btn:where(#th-tool[data-module="table-image"] *){flex:none;max-width:100%} #th-tool .t-next-card:where(#th-tool[data-module="table-image"] *){gap:var(--gap-item) var(--gap-grid);padding:var(--pad-box) 20px;border:1.5px solid transparent;border-radius:var(--radius);background:radial-gradient(420px 200px at 0% 0%,var(--glow-a),transparent 70%) padding-box,linear-gradient(var(--surface),var(--surface)) padding-box,var(--grad) border-box;box-shadow:var(--shadow)} #th-tool .t-next-art:where(#th-tool[data-module="table-image"] *){position:relative;flex:none;width:118px;height:92px} #th-tool .t-next-ph:where(#th-tool[data-module="table-image"] *){position:absolute;inset:0} #th-tool .t-next-ph img:where(#th-tool[data-module="table-image"] *){position:absolute;width:84px;height:64px;object-fit:cover;border:3px solid var(--surface);border-radius:10px;background:var(--surface-2);box-shadow:0 6px 16px rgba(11,16,32,.18)} #th-tool .t-next-ph img:first-child:where(#th-tool[data-module="table-image"] *){left:0;top:18px;transform:rotate(-7deg)} #th-tool .t-next-ph img:last-child:where(#th-tool[data-module="table-image"] *){left:30px;top:6px;transform:rotate(5deg)} #th-tool .t-next-ph.t-next-n1 img:where(#th-tool[data-module="table-image"] *){left:12px;top:10px;width:92px;height:70px;transform:rotate(-3deg)} #th-tool .t-next-pen:where(#th-tool[data-module="table-image"] *){position:absolute;right:0;bottom:0;display:grid;place-items:center;width:34px;height:34px;border:2px solid var(--surface);border-radius:12px;background:var(--grad);color:#fff;box-shadow:0 6px 14px rgba(79,70,229,.35)} #th-tool .t-next-tx:where(#th-tool[data-module="table-image"] *){flex:999 1 300px;min-width:0} #th-tool .t-next .t-next-kick:where(#th-tool[data-module="table-image"] *){display:flex;width:fit-content;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:var(--ai-soft);color:var(--ai-ink);font-size:var(--fs-tag);font-weight:650} #th-tool .t-next .t-next-h:where(#th-tool[data-module="table-image"] *){margin:var(--gap-label) 0;font-size:1.125rem;font-weight:720;line-height:1.3;letter-spacing:-.01em} #th-tool .t-next-card .t-next-h + p:where(#th-tool[data-module="table-image"] *){color:var(--muted)} #th-tool .t-next-chips:where(#th-tool[data-module="table-image"] *),#th-tool .t-next-ok:where(#th-tool[data-module="table-image"] *){display:flex;flex-wrap:wrap;gap:var(--gap-label);margin:var(--gap-item) 0 0;padding:0;list-style:none} #th-tool .t-next-chips li:where(#th-tool[data-module="table-image"] *){padding:2px 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);font-size:var(--fs-tag);font-weight:550} #th-tool .t-next-ok:where(#th-tool[data-module="table-image"] *){gap:4px var(--gap-grid);margin-top:var(--gap-min)} #th-tool .t-next-ok li:where(#th-tool[data-module="table-image"] *){display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600} #th-tool .t-next-ok svg:where(#th-tool[data-module="table-image"] *){width:14px;height:14px;color:var(--brand-ink)} #th-tool .t-next-go:where(#th-tool[data-module="table-image"] *){flex:1 1 210px;display:flex;flex-direction:column;align-items:center;gap:var(--gap-label);text-align:center} #th-tool .t-next-go .btn:where(#th-tool[data-module="table-image"] *){width:100%;justify-content:center} #th-tool .t-next-go small:where(#th-tool[data-module="table-image"] *){color:var(--muted);font-size:var(--fs-tag)}@media print{ #th-tool .t-next:where(#th-tool[data-module="table-image"] *){display:none}} #th-tool:where(#th-tool[data-module="table-image"] *){container:tool/inline-size} #th-tool :where(img,video,iframe):where(#th-tool[data-module="table-image"] *){max-width:100%} #th-tool:has(.uc-dir):where(#th-tool[data-module="table-image"] *){-webkit-tap-highlight-color:transparent} /* ===== end of the own copy; the tool's own rules follow ===== */ /* own tooltip (.tableimage-tip) + toast (.tableimage-toast): copied from theme.css .th-tt / .toast and renamed (rule 171 (j)) */ .tableimage-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} .tableimage-toast.show{opacity:1;transform:translateX(-50%) translateY(0)} .tableimage-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} .tableimage-tip.on{opacity:1;transform:none} .tableimage-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} .tableimage-tip.below::after{bottom:auto;top:-5px}@media (prefers-reduced-motion:reduce){ .tableimage-tip{transition:none}}@media print{ .tableimage-toast{display:none}} /* Table to Image Converter: module styles. Tokens only (no raw px for sizes and gaps), no width media queries (the two boxes sit side by side or stack by themselves), light and dark come from the site tokens. */ #th-tool .ti-top{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--gap-item);margin:0} #th-tool .ti-h{margin:0;font-size:var(--fs-h2);font-weight:700;line-height:var(--lh-tight);letter-spacing:-.01em;color:var(--ink)} #th-tool .ti-sub{margin:0;max-width:46rem} #th-tool .ti-help{justify-content:center;align-self:stretch} #th-tool .ti-file{cursor:pointer} .t-msg.ti-msg{position:fixed;inset-inline:var(--gap-item);bottom:28px;margin:0 auto;inline-size:fit-content;max-block-size:40vh;overflow:auto;z-index:60;box-shadow:var(--shadow)} /* progress for every save, copy and hand-over (round 34): the Photo Editor's save panel look, floating at the bottom like the message */ .ti-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:ti-pg-in .25s ease both} .ti-pg[hidden]{display:none} .ti-pgh{display:flex;align-items:center;gap:var(--gap-item);min-inline-size:0} .ti-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)} .ti-pgring::before{content:'';position:absolute;inset:5px;border-radius:50%;background:var(--surface)} .ti-pgring>b{position:relative;font-size:12px;font-weight:800;color:var(--brand);font-variant-numeric:tabular-nums} .ti-pgx{display:flex;flex-direction:column;flex:1 1 auto;min-inline-size:0} .ti-pgt{font-size:var(--fs-body);color:var(--ink);overflow-wrap:anywhere} .ti-pgs{font-size:var(--fs-label);color:var(--muted);overflow-wrap:anywhere} .ti-pgc{flex:none;padding:4px 10px;border-radius:var(--r-pill);background:var(--brand);color:#fff;font-size:var(--fs-label);font-weight:700;font-variant-numeric:tabular-nums} .ti-pgc[hidden]{display:none} .ti-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} .ti-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} .ti-pgbar>i::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-100%);animation:ti-sheen 1.4s ease-in-out infinite} .ti-pgtl{display:flex;flex-wrap:wrap;gap:var(--gap-label)} .ti-pgtl[hidden]{display:none} .ti-pt{position:relative;display:inline-flex;align-items:center;justify-content:center;inline-size:2.25rem;block-size:2.25rem;border-radius:8px;background:var(--surface);border:1px solid var(--line);font-size:11px;font-weight:700;color:var(--muted)} .ti-pt.is-wait{background:linear-gradient(100deg,var(--surface) 30%,color-mix(in srgb,var(--brand) 10%,var(--surface)) 50%,var(--surface) 70%) 0 0/300% 100%;animation:ti-wait 1.6s ease-in-out infinite} .ti-pt.is-now{border:2px solid var(--brand);color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent);animation:ti-now 1s ease-in-out infinite alternate} .ti-pt.is-ok{border-color:transparent;color:var(--ink);box-shadow:var(--shadow);animation:ti-pop .35s cubic-bezier(.2,1.4,.4,1) both} .ti-pt.is-ok::after{content:'';position:absolute;right:2px;bottom:2px;width:14px;height:14px;border-radius:50%;background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;box-shadow:0 0 0 2px var(--surface)} .ti-pt.ti-ptmore{background:var(--brand-soft);border-color:transparent;color:var(--brand);font-size:13px} .ti-pgm{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--gap-label) var(--gap-item);font-size:var(--fs-label);color:var(--muted);font-variant-numeric:tabular-nums} .ti-pgl{font-weight:700;color:var(--brand)} .ti-pgl[hidden]{display:none} .ti-pgcan{display:flex;justify-content:flex-end} .ti-pgcan[hidden]{display:none} .ti-pg .screen-reader-text{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0} @keyframes ti-pg-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} @keyframes ti-sheen{to{transform:translateX(100%)}} @keyframes ti-wait{0%{background-position:100% 0}100%{background-position:0 0}} @keyframes ti-now{from{box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 10%,transparent)}to{box-shadow:0 0 0 5px color-mix(in srgb,var(--brand) 22%,transparent)}} @keyframes ti-pop{from{transform:scale(.8)}to{transform:none}} @media (prefers-reduced-motion:reduce){.ti-pg,.ti-pgbar>i::after,.ti-pt{animation:none}.ti-pgbar>i{transition:none}} #th-tool .ti-warn[hidden],#th-tool .ti-foot[hidden],#th-tool .ti-hl[hidden],#th-tool .ti-chg[hidden],#th-tool .ti-fchg[hidden],#th-tool .ti-cw[hidden],#th-tool .ti-wrow[hidden],#th-tool .ti-qrow[hidden],#th-tool .ti-trow[hidden],#th-tool .ti-prow[hidden],#th-tool .ti-srow[hidden],#th-tool .ti-col[hidden]{display:none} #th-tool .ti-panes{--ti-h:clamp(22rem,68vh,42rem);display:flex;flex-direction:column;gap:var(--gap-grid);margin:0} /* the shared kit (twopane.js) turns it into two boxes with a line between them */ #th-tool .ti-panes>.t-box{margin:0;min-width:0;height:100%} #th-tool .ti-panes .t-bx-b{display:flex;flex-direction:column;gap:var(--gap-item);height:100%} #th-tool .ti-src.is-drag{outline:.125rem dashed var(--brand);outline-offset:.125rem} /* toolbars of the first box */ #th-tool .ti-tbs{position:relative;display:flex;flex-direction:column;gap:var(--gap-min)} #th-tool .ti-tbr{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap-item);padding:var(--pad-card);border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface-2)} #th-tool .ti-tbr .btn.sm{min-width:var(--h-btn-sm);justify-content:center} #th-tool .ti-tbr .btn[aria-pressed="true"]{background:var(--brand-soft);color:var(--brand-ink)} #th-tool .ti-tbr .btn:disabled{opacity:.45} #th-tool .ti-cbtn{position:relative;cursor:pointer;gap:var(--gap-label)} #th-tool .ti-cbtn input[type=color]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0} #th-tool .ti-sw{display:inline-block;width:var(--gap-block);height:var(--gap-item);border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface)} #th-tool .ti-tbr .inp.sm{width:auto;min-width:7rem;height:var(--h-btn-sm)} /* the word menus: a list with an icon and plain words, opening just above the button that was pressed (below it only when there is no room above), never wider than the box */ #th-tool .ti-mt{gap:var(--gap-label)} #th-tool .ti-mt[aria-expanded="true"]{background:var(--brand-soft);color:var(--brand-ink)} #th-tool .ti-mt[aria-expanded="true"] svg:last-child{transform:rotate(180deg)} #th-tool .ti-mpw{position:absolute;inset-inline-start:var(--ti-mx,0);top:var(--ti-my,0);z-index:5} #th-tool .ti-mp{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,7.5rem),1fr));gap:2px var(--gap-min);padding:var(--gap-min);border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);box-shadow:var(--shadow)} #th-tool .ti-mp[hidden]{display:none} #th-tool .ti-mi{justify-content:flex-start;height:auto;min-height:var(--h-btn-sm);padding-inline:var(--gap-min);gap:var(--gap-label);border-color:transparent;background:transparent;font-size:.8125rem;font-weight:500;text-align:start;white-space:normal;line-height:var(--lh-tight)} #th-tool .ti-mi:hover{background:var(--brand-soft);color:var(--brand-ink)} #th-tool .ti-mi svg{width:.9375rem;height:.9375rem;flex:none;opacity:.8} #th-tool .ti-mi[aria-pressed="true"]{background:var(--brand-soft);color:var(--brand-ink)} #th-tool .ti-mi .ti-sw{margin-inline-start:auto} /* the table editor */ #th-tool .ti-ed{flex:1 1 var(--ti-h);min-height:var(--ti-h);overflow:auto;padding:var(--pad-field);border:1px solid var(--line);border-radius:var(--r-card);background:var(--ti-bg,var(--surface));color:var(--ti-text,var(--ink));font-size:var(--fs-body);line-height:var(--lh-text)} #th-tool .ti-t{border-collapse:separate;border-spacing:0;table-layout:auto;min-width:100%;border-radius:var(--ti-rad,0);overflow:hidden} #th-tool .ti-t{font-family:var(--ti-ff,inherit);font-size:var(--ti-fs,inherit);border:var(--ti-bw,1px) solid var(--ti-bd,var(--line))} #th-tool .ti-t tbody td,#th-tool .ti-t tbody th{height:var(--ti-rowh,0)} #th-tool .ti-t thead th{height:var(--ti-headh,0)} #th-tool .ti-t td,#th-tool .ti-t th{border:0 solid var(--ti-line,var(--line));border-right-width:var(--ti-bw,1px);border-bottom-width:var(--ti-bw,1px);padding:var(--ti-py,var(--gap-min)) var(--ti-px,var(--gap-min));min-width:4rem;vertical-align:top;text-align:start;overflow-wrap:anywhere;outline:0;background:var(--ti-bg,var(--surface));color:var(--ti-text,inherit)} #th-tool .ti-t th{background:var(--ti-hd,var(--surface-2));color:var(--ti-hi,inherit);font-weight:700} #th-tool .ti-t :is([data-ti=h],[data-ti=hb]){background:var(--ti-hd,var(--surface-2));color:var(--ti-hi,inherit)} #th-tool .ti-t [data-ti=c]{background:var(--ti-hcol,var(--surface-2));color:var(--ti-text,inherit)} #th-tool .ti-t [data-ti=z]{background:var(--ti-zb,var(--surface-2))} #th-tool .ti-ed[data-grid=rows] .ti-t :is(td,th){border-right-width:0} #th-tool .ti-ed[data-grid=cols] .ti-t :is(td,th){border-bottom-width:0} #th-tool .ti-ed[data-grid=none] .ti-t :is(td,th){border-width:0} #th-tool .ti-t tr>:last-child{border-right-width:0} #th-tool .ti-t tbody tr:last-child>*{border-bottom-width:0} #th-tool .ti-t td:focus,#th-tool .ti-t th:focus{box-shadow:inset 0 0 0 .125rem var(--brand)} #th-tool .ti-t td.ti-sel,#th-tool .ti-t th.ti-sel{background-image:linear-gradient(color-mix(in srgb,var(--brand) 22%,transparent),color-mix(in srgb,var(--brand) 22%,transparent))} #th-tool .ti-t .ti-anchor{box-shadow:inset 0 0 0 .125rem var(--brand)} #th-tool .ti-ed.ti-multi{cursor:cell} #th-tool .ti-ett,#th-tool .ti-ent{cursor:text;padding-inline:var(--gap-min);border-radius:var(--gap-min);overflow-wrap:anywhere;outline:2px dashed transparent;outline-offset:2px} #th-tool .ti-ett{font-family:var(--ti-tff,var(--ti-ff,inherit));font-size:var(--ti-tfs,calc(var(--ti-fs,1rem)*1.35));font-weight:700;line-height:1.3;color:var(--ti-text,inherit);margin:0 0 calc(var(--ti-fs,1rem)*.75)} #th-tool .ti-ent{font-family:var(--ti-nff,var(--ti-ff,inherit));font-size:var(--ti-nfs,max(10px,calc(var(--ti-fs,1rem)*.85)));line-height:1.4;color:color-mix(in srgb,var(--ti-text,var(--ink)) 65%,var(--ti-bg,var(--surface)));margin:calc(var(--ti-fs,1rem)*.75) 0 0} #th-tool .ti-ett:empty::before,#th-tool .ti-ent:empty::before{content:attr(data-ph);color:color-mix(in srgb,var(--ti-text,var(--ink)) 55%,var(--ti-bg,var(--surface)));font-weight:400;pointer-events:none} #th-tool .ti-ett:empty{font-size:1rem} #th-tool .ti-ent:empty{font-size:var(--fs-meta)} #th-tool .ti-ett:hover,#th-tool .ti-ent:hover{outline-color:color-mix(in srgb,var(--ti-text,var(--ink)) 35%,transparent)} #th-tool .ti-ett:focus,#th-tool .ti-ent:focus,#th-tool .ti-ett.ti-tg,#th-tool .ti-ent.ti-tg{outline:2px solid var(--brand);outline-offset:2px} #th-tool .ti-t [data-hide]{text-decoration:underline dotted;text-underline-offset:.2em} #th-tool .ti-count{margin:0;font-size:var(--fs-meta);color:var(--muted)} #th-tool .ti-scope{margin:0;font-size:var(--fs-meta);color:var(--muted)} #th-tool .ti-scope:empty{display:none} /* an empty strip under the table, always there, so a click outside the table is possible */ #th-tool .ti-ed::after{content:"";display:block;min-height:var(--gap-block)} /* the right box */ #th-tool .ti-head{display:flex;flex-direction:column;gap:var(--gap-item)} #th-tool .ti-sum{margin:0;min-width:0;font-weight:650;line-height:var(--lh-tight)} #th-tool .ti-acts{display:flex;flex-wrap:wrap;gap:var(--gap-min);margin:0} #th-tool .ti-acts .btn{flex:1 1 9rem;justify-content:center} #th-tool .ti-sv{display:flex;flex-wrap:wrap;gap:var(--gap-item);align-items:flex-end} #th-tool .ti-sv>*{flex:1 1 12rem;min-width:0} #th-tool .ti-warn{display:flex;flex-direction:column;gap:var(--gap-min);margin:0} #th-tool .ti-warn .t-msg{margin:0} #th-tool .ti-warn .btn{align-self:flex-start} #th-tool .ti-bgs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap-min)} #th-tool .ti-bgl{font-size:var(--fs-label);font-weight:650;color:var(--muted)} #th-tool .ti-bgs .btn[aria-checked="true"]{background:var(--brand-soft);color:var(--brand-ink)} #th-tool .ti-pv{flex:0 1 auto;min-height:0;max-height:calc(var(--ti-h) + 6rem);overflow:auto;display:flex;flex-direction:column;gap:var(--gap-block);padding:var(--pad-field);border:1px solid var(--line);border-radius:var(--r-card);background:#fff;color:#111} #th-tool .ti-pv.is-dark{background:#14161a;color:#eee} #th-tool .ti-pv:focus{outline:.125rem solid var(--brand);outline-offset:.0625rem} #th-tool .ti-pv.is-empty{align-items:center;justify-content:center;min-height:var(--h-drop);text-align:center} #th-tool .ti-ph{margin:0;color:var(--muted)} #th-tool .ti-fig{margin:0;display:flex;flex-direction:column;gap:var(--gap-min);align-items:flex-start} #th-tool .ti-figw{position:relative;max-width:100%;cursor:pointer} #th-tool .ti-cv{display:block;width:100%;height:auto} #th-tool .ti-hl{position:absolute;pointer-events:none;box-shadow:0 0 0 .125rem var(--brand),0 0 0 .25rem #fff;border-radius:.125rem} #th-tool .ti-fcap{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap-item);font-size:var(--fs-meta);color:var(--muted)} #th-tool .ti-pbar{display:inline-flex;flex-wrap:wrap;gap:var(--gap-min)} /* the Photo Editor card under the picture (the shared .t-next-card look in tool.css) */ #th-tool .ti-next{flex:none;margin:0} #th-tool .ti-next[hidden]{display:none} #th-tool .ti-next .t-next-ph img{object-fit:contain;background:#fff} /* Table Size: a closed fold inside Your Choices */ #th-tool .ti-size{margin:0} #th-tool .ti-szr{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:var(--gap-item);align-items:start} #th-tool{--th-pick-area:block-start span-all} #th-tool .ti-cmbw{position:relative;display:block} #th-tool label.ti-sel .ti-cmbw>.ti-cin{position:absolute;top:4px;bottom:4px;right:3.2rem;width:4.4rem;appearance:textfield;height:auto;min-height:0;padding-block:0;padding-inline:8px} #th-tool .ti-cin::-webkit-inner-spin-button,#th-tool .ti-cin::-webkit-outer-spin-button{-webkit-appearance:none;margin:0} #th-tool .ti-cmbw>.ti-pxu{position:absolute;top:50%;right:1.9rem;transform:translateY(-50%);font-weight:600;font-size:var(--fs-meta);color:var(--muted)} #th-tool .ti-fld [hidden]{display:none} #th-tool .ti-size .t-hint{margin:0} /* Your Choices (a closed fold, above the boxes) */ #th-tool .ti-fold{margin:0;border-style:solid;border-width:5px 1px 1px;border-radius:var(--r-card)} #th-tool .ti-fsum{display:flex;align-items:center;justify-content:space-between;gap:var(--gap-item);min-height:var(--tap);padding:var(--pad-card);cursor:pointer;list-style:none} #th-tool .ti-fsum::-webkit-details-marker{display:none} #th-tool .ti-fmain{display:flex;flex-direction:column;gap:var(--gap-label);min-width:0} #th-tool .ti-frow{display:flex;align-items:center;gap:var(--gap-min);flex-wrap:wrap} #th-tool .ti-ftt{font-weight:700} #th-tool .ti-fchg{padding:0 var(--gap-min);border-radius:var(--r-pill);background:var(--brand-soft);color:var(--brand-ink);font-size:var(--fs-tag);font-weight:650} #th-tool .ti-fnow{font-size:var(--fs-meta);color:var(--muted)} #th-tool .ti-fchev{flex:none;display:inline-flex;padding:var(--sp-1);border-radius:50%;background:var(--tone);color:var(--surface);transition:transform .15s} #th-tool .ti-fold[open] .ti-fchev{transform:rotate(180deg)} #th-tool .ti-fbody{padding:0 var(--pad-box) var(--pad-box);display:flex;flex-direction:column;gap:var(--gap-item)} #th-tool .ti-fbody .t-hint{margin:0} #th-tool .ti-fold[open]>.ti-fsum .ti-fnow{display:none} #th-tool .ti-fbody .ti-fold{border-width:3px 1px 1px} #th-tool .ti-fbody .ti-fbody{padding:0 var(--gap-item) var(--gap-item)} #th-tool .ti-fg{display:flex;flex-wrap:wrap;gap:var(--gap-item);align-items:flex-start} #th-tool .ti-fg>*{flex:1 1 11rem;min-width:0} #th-tool .ti-fh{flex-basis:100%;font-weight:400;color:var(--muted);font-size:var(--fs-meta)} /* designs */ #th-tool .ti-pres{display:grid;grid-template-columns:repeat(auto-fill,minmax(6.5rem,1fr));gap:var(--gap-min)} #th-tool .ti-pre{display:flex;flex-direction:column;gap:var(--gap-label);align-items:stretch;min-height:var(--tap);padding:var(--gap-min);border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);color:var(--ink);font:inherit;text-align:start;cursor:pointer} #th-tool .ti-pre[aria-checked="true"]{border-color:var(--brand);box-shadow:inset 0 0 0 .125rem var(--brand);background:var(--brand-soft)} #th-tool .ti-pre:focus-visible{outline:.125rem solid var(--brand);outline-offset:.125rem} #th-tool .ti-pvw{display:grid;grid-template-columns:1fr;border:1px solid var(--line);border-radius:var(--r-btn);overflow:hidden} #th-tool .ti-pvw i{display:block;height:var(--gap-block)} #th-tool .ti-pn{font-size:var(--fs-sm);font-weight:650;display:flex;flex-wrap:wrap;gap:var(--gap-label);align-items:center} #th-tool .ti-cols,#th-tool .ti-dd{display:flex;flex-wrap:wrap;gap:var(--gap-item);align-items:flex-start} #th-tool .ti-cols>*{flex:1 1 6.5rem;min-width:0} #th-tool .ti-dd>*{flex:1 1 14rem;min-width:0} #th-tool .ti-col{display:flex;flex-direction:column;gap:var(--gap-label);font-size:var(--fs-label);font-weight:650} #th-tool .ti-col input[type=color],#th-tool .ti-sel input[type=color]{width:100%;height:var(--h-btn);padding:0;border:1px solid var(--line);border-radius:var(--r-btn);background:var(--surface);cursor:pointer} #th-tool .ti-col .inp{width:100%} #th-tool :is(.ti-col,.ti-sel) input[type=color]{overflow:hidden} #th-tool :is(.ti-col,.ti-sel) input[type=color]::-webkit-color-swatch-wrapper{padding:var(--gap-label)} #th-tool :is(.ti-col,.ti-sel) input[type=color]::-webkit-color-swatch{border:0;border-radius:var(--gap-item)} #th-tool :is(.ti-col,.ti-sel) input[type=color]::-moz-color-swatch{border:0;border-radius:var(--gap-item)} #th-tool .ti-tbr .inp.sm.ti-sel-px{flex:0 0 auto;width:4.5rem;min-width:0;padding-inline:12px 6px} #th-tool label.ti-sel{display:flex;flex-direction:column;gap:var(--gap-label);font-size:var(--fs-label);font-weight:600} #th-tool label.ti-sel .inp,#th-tool .ti-num .inp{width:100%;font-size:var(--fs-sm);font-weight:400} #th-tool .ti-num{display:flex;flex-direction:column;gap:var(--gap-label);font-size:var(--fs-label);font-weight:600;min-width:0} #th-tool .ti-rng{display:flex;flex-direction:column;gap:var(--gap-label);min-width:0} #th-tool .ti-rng>label{font-size:var(--fs-label);font-weight:650} #th-tool .ti-rng>label small{font-weight:400} #th-tool .ti-rng small{color:var(--muted);font-size:var(--fs-meta)} #th-tool .ti-rngb{display:flex;align-items:center;gap:var(--gap-item);min-height:var(--tap)} #th-tool .ti-rngb input[type=range]{-webkit-appearance:none;appearance:none;flex:1 1 auto;min-width:0;height:var(--h-btn-sm);margin:0;background:transparent;cursor:pointer;--p:50%;--fill:linear-gradient(90deg,var(--brand) 0 var(--p),color-mix(in srgb,var(--ink) 14%,var(--surface)) var(--p) 100%)} #th-tool .ti-rngb input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--fill)} #th-tool .ti-rngb input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--fill)} #th-tool .ti-rngb input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-7px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 1px rgba(15,23,42,.14),0 2px 6px rgba(15,23,42,.28);transition:transform .12s ease} #th-tool .ti-rngb input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 1px rgba(15,23,42,.14),0 2px 6px rgba(15,23,42,.28)} #th-tool .ti-rngb input[type=range]:hover::-webkit-slider-thumb,#th-tool .ti-rngb input[type=range]:active::-webkit-slider-thumb{transform:scale(1.12)} #th-tool .ti-rngb input[type=range]:focus-visible{outline:0} #th-tool .ti-rngb input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--brand)} #th-tool .ti-rngb input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--brand)} #th-tool .ti-rngb output{flex:0 0 auto;min-width:3.5rem;text-align:end;font-variant-numeric:tabular-nums;font-weight:650} #th-tool .ti-chips{display:flex;flex-wrap:wrap;gap:var(--gap-min);flex:1 1 14rem} #th-tool .ti-wrow,#th-tool .ti-fr{display:flex;flex-wrap:wrap;gap:var(--gap-item);align-items:flex-end} #th-tool .ti-wrow>.ti-num,#th-tool .ti-fr>*{flex:1 1 9rem} #th-tool .ti-wrow>.ti-num{max-width:12rem} #th-tool .ti-cw{display:flex;flex-direction:column;gap:var(--gap-min)} #th-tool .ti-cwg{display:grid;grid-template-columns:repeat(auto-fill,minmax(7rem,1fr));gap:var(--gap-item);align-items:start} #th-tool .ti-chb{display:flex;flex-direction:column;gap:var(--gap-label);min-width:0} #th-tool .ti-cht{font-weight:650} #th-tool .ti-chb small{color:var(--muted);font-size:var(--fs-meta)} #th-tool .ti-best{font-style:normal;padding:0 var(--gap-min);border-radius:var(--r-pill);background:var(--brand-soft);color:var(--brand-ink);font-size:var(--fs-tag);font-weight:650} /* recent and the method box */ #th-tool .ti-foot{padding-top:var(--gap-grid)} #th-tool #ti-howb{display:flex;flex-direction:column;gap:var(--gap-block)} #th-tool #ti-howb h4{margin:0 0 var(--gap-min);font-size:var(--fs-sm)} #th-tool #ti-howb ol,#th-tool #ti-howb ul,#th-tool #ti-howb p{margin:0} #th-tool #ti-howb ol,#th-tool #ti-howb ul{padding-inline-start:1.4em;display:flex;flex-direction:column;gap:var(--gap-min)} /* the title row of Your Table (Try an example and Clear) and of Your Picture (picture quality) keeps its choices on the right */ #th-tool :is(.ti-src,.ti-out)>legend{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap-min) var(--gap-item)} #th-tool :is(.ti-src,.ti-out)>legend::before{align-self:flex-start;margin-top:.4rem;margin-right:0} #th-tool .ti-lgm{flex:1 1 auto;min-width:0} #th-tool .ti-lga{flex:1 1 30rem;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap-min);margin-inline-start:auto} #th-tool .ti-lga .btn{flex:0 1 auto;justify-content:center} #th-tool .ti-out>legend{align-items:flex-start} /* the picture options (clear background, print size, split) inside Your Picture */ #th-tool .ti-pf{display:flex;flex-wrap:wrap;gap:var(--gap-item);align-items:flex-start} #th-tool .ti-pfi{flex:1 1 14rem;min-width:0;display:flex;flex-direction:column;gap:var(--gap-min)} /* the start panel when there is no table (the look of the shared drop box, t-drop, at the height of the table box) */ #th-tool .ti-empty{flex:1 1 var(--ti-h);min-height:var(--ti-h);cursor:auto} #th-tool .ti-empty:hover:not(.is-drag){border-style:dashed;border-color:color-mix(in srgb,var(--brand) 45%,var(--line));background:color-mix(in srgb,var(--brand) 4%,var(--surface))} #th-tool .ti-ei{display:inline-flex;color:var(--brand)} #th-tool .ti-ei svg{width:3rem;height:3rem} #th-tool .ti-eh{margin:0;font-size:calc(var(--fs-body)*1.25);font-weight:700} #th-tool .ti-et{margin:0;max-width:36rem;color:var(--muted)} #th-tool .ti-eb{justify-content:center} #th-tool .ti-mk{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:var(--gap-item)} #th-tool .ti-mk .ti-num{flex:0 1 7rem} #th-tool .ti-src.is-empty .ti-tbs,#th-tool .ti-src.is-empty .ti-ed,#th-tool .ti-src.is-empty .ti-count{display:none} /* Full screen (the kit adds .tp-fs): the two boxes fill the window */ #th-tool.tp-fs .ti-panes.tp-wide .ti-ed,#th-tool.tp-fs .ti-panes.tp-wide .ti-pv{max-height:none;min-height:0;flex:1 1 0} #th-tool.tp-fs .ti-panes.tp-wide .t-bx-b{min-height:0} #th-tool.tp-fs .ti-panes:not(.tp-wide) .ti-ed,#th-tool.tp-fs .ti-panes:not(.tp-wide) .ti-pv{max-height:none;min-height:max(var(--h-drop),55vh)} @media print{ #th-tool .ag-how,#th-tool .ti-help,#th-tool .ti-tbs,#th-tool .ti-acts,#th-tool .ti-fold,.t-msg.ti-msg,#th-tool .ti-foot,#th-tool .ti-src,#th-tool .ti-sv,#th-tool .ti-bgs,#th-tool .ti-size,#th-tool .ti-warn,#th-tool .ti-pbar{display:none!important} #th-tool .ti-pv,#th-tool .ti-pv.is-dark{max-height:none;overflow:visible;border:0;background:#fff;color:#111} } /* round 21: compact Line / Corners / Space fold, the Whole table / Cell mode button, a note under the toolbar */ #th-tool .ti-shpf{border-width:3px 1px 1px} #th-tool .ti-shpf>.ti-fsum{min-height:0;padding:var(--gap-item) var(--pad-box)} #th-tool .ti-shpf .ti-fbody{padding:0 var(--pad-box) var(--gap-item);gap:var(--gap-min)} #th-tool .ti-shpf .ti-fg>*{flex:1 1 9rem} #th-tool .ti-shpf .ti-rng>label{font-size:var(--fs-meta)} #th-tool .ti-shpf .ti-rngb{min-height:1.75rem} #th-tool .ti-shpf .ti-rngb input[type=range]{height:1.5rem} #th-tool .ti-shpf .ti-rngb input[type=range]::-webkit-slider-thumb{width:14px;height:14px;margin-top:-5px} #th-tool .ti-shpf .ti-rngb input[type=range]::-moz-range-thumb{width:14px;height:14px} #th-tool .ti-shpf .ti-fg{column-gap:var(--gap-section)} #th-tool .ti-shpf .ti-rngb{gap:var(--gap-label)} #th-tool .ti-shpf .ti-rngb output{min-width:2.75rem;font-size:var(--fs-meta);text-align:start} #th-tool .ti-tbr #ti-whole{min-width:7.5rem} #th-tool .ti-tbr .btn.ti-mode-cell,#th-tool .ti-tbr .btn.ti-mode-cell[aria-pressed]{background:var(--brand-soft);color:var(--brand-ink);border-color:color-mix(in srgb,var(--brand) 40%,var(--line))} #th-tool .ti-scope.is-note{color:var(--brand-ink);background:var(--brand-soft);padding:var(--gap-min) var(--gap-item);border-radius:var(--r-card);font-weight:650} #th-tool .ti-shpf .ti-fh{flex:1 1 100%} #th-tool .ti-ed[data-cols] .ti-t{table-layout:fixed;width:var(--ti-tw);min-width:0} #th-tool .ti-ed[data-cols] .ti-t :is(td,th){min-width:0} #th-tool .ti-cwn{display:block;font-weight:400;font-size:var(--fs-meta);color:var(--muted);min-height:1.3em} #th-tool .ti-mp.ti-mpc{grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr))} #th-tool .ti-mp.ti-mpn{grid-template-columns:repeat(2,minmax(0,max-content))} @container tool (max-width:22.5rem){#th-tool .ti-mp.ti-mpn{grid-template-columns:minmax(0,1fr)}} #th-tool .ti-mh{grid-column:1/-1;margin:0;padding:var(--gap-min) var(--gap-min) 0;font-size:var(--fs-meta);color:var(--muted)} #th-tool .ti-tbr .inp.ti-sel-sz{min-width:0;padding-inline:10px 26px;background-position:calc(100% - 13px) 16px,calc(100% - 8px) 16px} #th-tool .ti-mp{padding:var(--gap-min) 4px;column-gap:4px} #th-tool .ti-mi{padding-inline:6px} #th-tool .ti-t [data-na]{text-align:right} /* round 42 (shapes): the bottom edge of the header (left table + design thumbnails) and the outline of the design thumbnails; the picture draws the same curves in tablepic.js */ #th-tool :is(.ti-ed,.ti-pvw)[data-edge=wave]{--ti-em:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0,10 L0,10 L2,9.84 L4,9.38 L6,8.64 L8,7.68 L10,6.55 L12,5.31 L14,4.06 L16,2.87 L18,1.81 L20,0.95 L22,0.35 L24,0.04 L26,0.04 L28,0.35 L30,0.95 L32,1.81 L34,2.87 L36,4.06 L38,5.31 L40,6.55 L42,7.68 L44,8.64 L46,9.38 L48,9.84 L50,10 L52,9.84 L54,9.38 L56,8.64 L58,7.68 L60,6.55 L62,5.31 L64,4.06 L66,2.87 L68,1.81 L70,0.95 L72,0.35 L74,0.04 L76,0.04 L78,0.35 L80,0.95 L82,1.81 L84,2.87 L86,4.06 L88,5.31 L90,6.55 L92,7.68 L94,8.64 L96,9.38 L98,9.84 L100,10 L100,10 Z'/%3E%3C/svg%3E")} #th-tool :is(.ti-ed,.ti-pvw)[data-edge=slant]{--ti-em:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0,10 L0,0 L18,10 L82,10 L100,0 L100,10 Z'/%3E%3C/svg%3E")} #th-tool :is(.ti-ed,.ti-pvw)[data-edge=arch]{--ti-em:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0,10 L0,0 L2.5,0.78 L5,1.56 L7.5,2.33 L10,3.09 L12.5,3.83 L15,4.54 L17.5,5.22 L20,5.88 L22.5,6.49 L25,7.07 L27.5,7.6 L30,8.09 L32.5,8.53 L35,8.91 L37.5,9.24 L40,9.51 L42.5,9.72 L45,9.88 L47.5,9.97 L50,10 L52.5,9.97 L55,9.88 L57.5,9.72 L60,9.51 L62.5,9.24 L65,8.91 L67.5,8.53 L70,8.09 L72.5,7.6 L75,7.07 L77.5,6.49 L80,5.88 L82.5,5.22 L85,4.54 L87.5,3.83 L90,3.09 L92.5,2.33 L95,1.56 L97.5,0.78 L100,0 L100,10 Z'/%3E%3C/svg%3E")} #th-tool :is(.ti-ed,.ti-pvw)[data-edge=zigzag]{--ti-em:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0,10 L25,0 L50,10 L75,0 L100,10 Z'/%3E%3C/svg%3E")} #th-tool :is(.ti-ed,.ti-pvw)[data-edge=scallop]{--ti-em:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0,10 L0,0 L1.67,3.59 L3.33,4.99 L5,6 L6.67,6.8 L8.33,7.45 L10,8 L11.67,8.46 L13.33,8.84 L15,9.17 L16.67,9.43 L18.33,9.64 L20,9.8 L21.67,9.91 L23.33,9.98 L25,10 L26.67,9.98 L28.33,9.91 L30,9.8 L31.67,9.64 L33.33,9.43 L35,9.17 L36.67,8.84 L38.33,8.46 L40,8 L41.67,7.45 L43.33,6.8 L45,6 L46.67,4.99 L48.33,3.59 L50,0 L51.67,3.59 L53.33,4.99 L55,6 L56.67,6.8 L58.33,7.45 L60,8 L61.67,8.46 L63.33,8.84 L65,9.17 L66.67,9.43 L68.33,9.64 L70,9.8 L71.67,9.91 L73.33,9.98 L75,10 L76.67,9.98 L78.33,9.91 L80,9.8 L81.67,9.64 L83.33,9.43 L85,9.17 L86.67,8.84 L88.33,8.46 L90,8 L91.67,7.45 L93.33,6.8 L95,6 L96.67,4.99 L98.33,3.59 L100,0 L100,10 Z'/%3E%3C/svg%3E")} #th-tool .ti-ed[data-edge] .ti-t [data-ti=hb]{position:relative;background-clip:padding-box;border-bottom-color:var(--ti-bg)} #th-tool .ti-ed[data-edge] .ti-t [data-ti=hb]::after{content:"";position:absolute;left:0;right:calc(var(--ti-bw,1px) * -1);bottom:calc(var(--ti-bw,1px) * -1);height:calc(var(--ti-ea,7px) + var(--ti-bw,1px));background:var(--ti-bg);pointer-events:none;-webkit-mask:var(--ti-em) 0 0/100% 100% no-repeat;mask:var(--ti-em) 0 0/100% 100% no-repeat} #th-tool .ti-pvw[data-edge] i:first-child{position:relative} #th-tool .ti-pvw[data-edge] i:first-child::after{content:"";position:absolute;left:0;right:0;bottom:0;height:55%;background:var(--pb,#fff);-webkit-mask:var(--ti-em) 0 0/100% 100% no-repeat;mask:var(--ti-em) 0 0/100% 100% no-repeat} #th-tool .ti-pvw[data-outl=notch]{-webkit-mask-image:radial-gradient(circle .45rem at 0 25%,transparent 96%,#000 100%),radial-gradient(circle .45rem at 100% 25%,transparent 96%,#000 100%);-webkit-mask-composite:source-in;mask-image:radial-gradient(circle .45rem at 0 25%,transparent 96%,#000 100%),radial-gradient(circle .45rem at 100% 25%,transparent 96%,#000 100%);mask-composite:intersect} #th-tool .ti-pvw[data-outl=cut]{clip-path:polygon(.4rem 0,calc(100% - .4rem) 0,100% .4rem,100% calc(100% - .4rem),calc(100% - .4rem) 100%,.4rem 100%,0 calc(100% - .4rem),0 .4rem)} /* round 43: design groups (tabs), header and background blends, 3D looks */ #th-tool .ti-dtabs{display:flex;flex-wrap:wrap;gap:var(--gap-min)} #th-tool .ti-dtab{min-height:var(--tap);padding:0 var(--gap-block);border:1px solid var(--line);border-radius:var(--r-btn);background:var(--surface);color:var(--ink);font:inherit;cursor:pointer} #th-tool .ti-dtab[aria-pressed="true"]{border-color:var(--brand);box-shadow:inset 0 0 0 .125rem var(--brand);background:var(--brand-soft)} #th-tool .ti-dtab:focus-visible{outline:.125rem solid var(--brand);outline-offset:.125rem} #th-tool .ti-pre[hidden],#th-tool .ti-col[hidden]{display:none} @supports selector(:has(a)){ #th-tool .ti-ed[data-hrow] .ti-t tr:has(>:is(th:not([data-ti=c]),[data-ti=h],[data-ti=hb])){background-color:var(--ti-hd);background-image:var(--ti-hrow)} #th-tool .ti-ed[data-hrow] .ti-t :is(th:not([data-ti=c]),[data-ti=h],[data-ti=hb]){background-color:transparent} } #th-tool .ti-ed:is([data-fx=shadow],[data-fx=raised],[data-fx=puffy]) .ti-t{box-shadow:0 .1875rem .5rem rgba(15,23,42,.28)} #th-tool .ti-ed:is([data-fx=raised],[data-fx=puffy]) .ti-t td:not([data-ti^=h]):not(:focus):not(.ti-anchor){box-shadow:inset 0 .0625rem 0 rgba(255,255,255,.55),inset 0 -.125rem .1875rem rgba(0,0,0,.075)} #th-tool .ti-ed[data-bgdir] .ti-t{background-image:linear-gradient(var(--ti-bg),var(--ti-bg2))} #th-tool .ti-ed[data-bgdir] .ti-t td:not([data-ti]){background-color:transparent} #th-tool .ti-pvw:is([data-fx=shadow],[data-fx=raised],[data-fx=puffy]){box-shadow:0 .125rem .25rem rgba(15,23,42,.35)} #th-tool .ti-pvw:is([data-fx=gloss],[data-fx=puffy]) i:first-child{position:relative} #th-tool .ti-pvw:is([data-fx=gloss],[data-fx=puffy]) i:first-child::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.4),rgba(255,255,255,.1) 50%,rgba(255,255,255,0) 50%,rgba(0,0,0,.12))} #th-tool .ti-pvw:is([data-fx=raised],[data-fx=puffy]) i:not(:first-child){box-shadow:inset 0 .0625rem 0 rgba(255,255,255,.55),inset 0 -.0625rem .125rem rgba(0,0,0,.12)} #th-tool :is(.ti-ed,.ti-pvw)[data-edge=saw]{--ti-em:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0,10 L0,10 L0.67,9.8 L1.33,9.6 L2,9.4 L2.67,9.2 L3.33,9 L4,8.8 L4.67,8.6 L5.33,8.4 L6,8.2 L6.67,8 L7.33,7.8 L8,7.6 L8.67,7.4 L9.33,7.2 L10,7 L10.67,6.8 L11.33,6.6 L12,6.4 L12.67,6.2 L13.33,6 L14,5.8 L14.67,5.6 L15.33,5.4 L16,5.2 L16.67,5 L17.33,4.8 L18,4.6 L18.67,4.4 L19.33,4.2 L20,4 L20.67,3.8 L21.33,3.6 L22,3.4 L22.67,3.2 L23.33,3 L24,2.8 L24.67,2.6 L25.33,2.4 L26,2.2 L26.67,2 L27.33,1.8 L28,1.6 L28.67,1.4 L29.33,1.2 L30,1 L30.67,0.8 L31.33,0.6 L32,0.4 L32.67,0.2 L33.33,10 L34,9.8 L34.67,9.6 L35.33,9.4 L36,9.2 L36.67,9 L37.33,8.8 L38,8.6 L38.67,8.4 L39.33,8.2 L40,8 L40.67,7.8 L41.33,7.6 L42,7.4 L42.67,7.2 L43.33,7 L44,6.8 L44.67,6.6 L45.33,6.4 L46,6.2 L46.67,6 L47.33,5.8 L48,5.6 L48.67,5.4 L49.33,5.2 L50,5 L50.67,4.8 L51.33,4.6 L52,4.4 L52.67,4.2 L53.33,4 L54,3.8 L54.67,3.6 L55.33,3.4 L56,3.2 L56.67,3 L57.33,2.8 L58,2.6 L58.67,2.4 L59.33,2.2 L60,2 L60.67,1.8 L61.33,1.6 L62,1.4 L62.67,1.2 L63.33,1 L64,0.8 L64.67,0.6 L65.33,0.4 L66,0.2 L66.67,10 L67.33,9.8 L68,9.6 L68.67,9.4 L69.33,9.2 L70,9 L70.67,8.8 L71.33,8.6 L72,8.4 L72.67,8.2 L73.33,8 L74,7.8 L74.67,7.6 L75.33,7.4 L76,7.2 L76.67,7 L77.33,6.8 L78,6.6 L78.67,6.4 L79.33,6.2 L80,6 L80.67,5.8 L81.33,5.6 L82,5.4 L82.67,5.2 L83.33,5 L84,4.8 L84.67,4.6 L85.33,4.4 L86,4.2 L86.67,4 L87.33,3.8 L88,3.6 L88.67,3.4 L89.33,3.2 L90,3 L90.67,2.8 L91.33,2.6 L92,2.4 L92.67,2.2 L93.33,2 L94,1.8 L94.67,1.6 L95.33,1.4 L96,1.2 L96.67,1 L97.33,0.8 L98,0.6 L98.67,0.4 L99.33,0.2 L100,10 L100,10 Z'/%3E%3C/svg%3E")} #th-tool :is(.ti-ed,.ti-pvw)[data-edge=ripple]{--ti-em:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0,10 L0,10 L1,9.84 L2,9.38 L3,8.64 L4,7.68 L5,6.55 L6,5.31 L7,4.06 L8,2.87 L9,1.81 L10,0.95 L11,0.35 L12,0.04 L13,0.04 L14,0.35 L15,0.95 L16,1.81 L17,2.87 L18,4.06 L19,5.31 L20,6.55 L21,7.68 L22,8.64 L23,9.38 L24,9.84 L25,10 L26,9.84 L27,9.38 L28,8.64 L29,7.68 L30,6.55 L31,5.31 L32,4.06 L33,2.87 L34,1.81 L35,0.95 L36,0.35 L37,0.04 L38,0.04 L39,0.35 L40,0.95 L41,1.81 L42,2.87 L43,4.06 L44,5.31 L45,6.55 L46,7.68 L47,8.64 L48,9.38 L49,9.84 L50,10 L51,9.84 L52,9.38 L53,8.64 L54,7.68 L55,6.55 L56,5.31 L57,4.06 L58,2.87 L59,1.81 L60,0.95 L61,0.35 L62,0.04 L63,0.04 L64,0.35 L65,0.95 L66,1.81 L67,2.87 L68,4.06 L69,5.31 L70,6.55 L71,7.68 L72,8.64 L73,9.38 L74,9.84 L75,10 L76,9.84 L77,9.38 L78,8.64 L79,7.68 L80,6.55 L81,5.31 L82,4.06 L83,2.87 L84,1.81 L85,0.95 L86,0.35 L87,0.04 L88,0.04 L89,0.35 L90,0.95 L91,1.81 L92,2.87 L93,4.06 L94,5.31 L95,6.55 L96,7.68 L97,8.64 L98,9.38 L99,9.84 L100,10 L100,10 Z'/%3E%3C/svg%3E")} #th-tool :is(.ti-ed,.ti-pvw)[data-edge=cove]{--ti-em:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0,10 L0,10 L1,7.2 L2,6.08 L3,5.25 L4,4.57 L5,4 L6,3.5 L7,3.06 L8,2.67 L9,2.32 L10,2 L11,1.72 L12,1.46 L13,1.23 L14,1.02 L15,0.83 L16,0.67 L17,0.53 L18,0.4 L19,0.29 L20,0.2 L21,0.13 L22,0.07 L23,0.03 L24,0.01 L25,0 L26,0.01 L27,0.03 L28,0.07 L29,0.13 L30,0.2 L31,0.29 L32,0.4 L33,0.53 L34,0.67 L35,0.83 L36,1.02 L37,1.23 L38,1.46 L39,1.72 L40,2 L41,2.32 L42,2.67 L43,3.06 L44,3.5 L45,4 L46,4.57 L47,5.25 L48,6.08 L49,7.2 L50,10 L51,7.2 L52,6.08 L53,5.25 L54,4.57 L55,4 L56,3.5 L57,3.06 L58,2.67 L59,2.32 L60,2 L61,1.72 L62,1.46 L63,1.23 L64,1.02 L65,0.83 L66,0.67 L67,0.53 L68,0.4 L69,0.29 L70,0.2 L71,0.13 L72,0.07 L73,0.03 L74,0.01 L75,0 L76,0.01 L77,0.03 L78,0.07 L79,0.13 L80,0.2 L81,0.29 L82,0.4 L83,0.53 L84,0.67 L85,0.83 L86,1.02 L87,1.23 L88,1.46 L89,1.72 L90,2 L91,2.32 L92,2.67 L93,3.06 L94,3.5 L95,4 L96,4.57 L97,5.25 L98,6.08 L99,7.2 L100,10 L100,10 Z'/%3E%3C/svg%3E")} #th-tool :is(.ti-ed,.ti-pvw)[data-edge=steps]{--ti-em:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0,10 L25,10 L25,6.67 L50,6.67 L50,3.33 L75,3.33 L75,0 L100,0 L100,10 Z'/%3E%3C/svg%3E")} #th-tool :is(.ti-ed,.ti-pvw)[data-edge=point]{--ti-em:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0,10 L0,0 L2,0.4 L4,0.8 L6,1.2 L8,1.6 L10,2 L12,2.4 L14,2.8 L16,3.2 L18,3.6 L20,4 L22,4.4 L24,4.8 L26,5.2 L28,5.6 L30,6 L32,6.4 L34,6.8 L36,7.2 L38,7.6 L40,8 L42,8.4 L44,8.8 L46,9.2 L48,9.6 L50,10 L52,9.6 L54,9.2 L56,8.8 L58,8.4 L60,8 L62,7.6 L64,7.2 L66,6.8 L68,6.4 L70,6 L72,5.6 L74,5.2 L76,4.8 L78,4.4 L80,4 L82,3.6 L84,3.2 L86,2.8 L88,2.4 L90,2 L92,1.6 L94,1.2 L96,0.8 L98,0.4 L100,0 L100,10 Z'/%3E%3C/svg%3E")} #th-tool :is(.ti-ed,.ti-pvw)[data-edge=crenel]{--ti-em:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0,10 L16.67,10 L16.67,0 L33.33,0 L33.33,10 L50,10 L50,0 L66.67,0 L66.67,10 L83.33,10 L83.33,0 L100,0 L100,10 Z'/%3E%3C/svg%3E")} /* round 44: more header edges (above), outline shapes on the left table, 3D looks, line style, header letters */ #th-tool .ti-ed[data-outl=cut] .ti-t{border-radius:0;clip-path:polygon(var(--ti-oc,.4rem) 0,calc(100% - var(--ti-oc,.4rem)) 0,100% var(--ti-oc,.4rem),100% calc(100% - var(--ti-oc,.4rem)),calc(100% - var(--ti-oc,.4rem)) 100%,var(--ti-oc,.4rem) 100%,0 calc(100% - var(--ti-oc,.4rem)),0 var(--ti-oc,.4rem))} #th-tool .ti-ed[data-outl=snip] .ti-t{border-radius:0;clip-path:polygon(var(--ti-oc,.4rem) 0,calc(100% - var(--ti-oc,.4rem)) 0,100% var(--ti-oc,.4rem),100% 100%,0 100%,0 var(--ti-oc,.4rem))} #th-tool .ti-ed[data-outl=fold] .ti-t{border-radius:0;clip-path:polygon(0 0,calc(100% - var(--ti-oc,.4rem)) 0,100% var(--ti-oc,.4rem),100% 100%,0 100%)} #th-tool .ti-ed[data-outl=notch] .ti-t{-webkit-mask-image:radial-gradient(circle var(--ti-nr,.01px) at 0 var(--ti-hh,0px),transparent 96%,#000 100%),radial-gradient(circle var(--ti-nr,.01px) at 100% var(--ti-hh,0px),transparent 96%,#000 100%);-webkit-mask-composite:source-in;mask-image:radial-gradient(circle var(--ti-nr,.01px) at 0 var(--ti-hh,0px),transparent 96%,#000 100%),radial-gradient(circle var(--ti-nr,.01px) at 100% var(--ti-hh,0px),transparent 96%,#000 100%);mask-composite:intersect} #th-tool .ti-ed[data-outl=scoop] .ti-t{border-radius:0;-webkit-mask-image:radial-gradient(circle var(--ti-oc,.4rem) at 0 0,transparent 96%,#000 100%),radial-gradient(circle var(--ti-oc,.4rem) at 100% 0,transparent 96%,#000 100%),radial-gradient(circle var(--ti-oc,.4rem) at 0 100%,transparent 96%,#000 100%),radial-gradient(circle var(--ti-oc,.4rem) at 100% 100%,transparent 96%,#000 100%);-webkit-mask-composite:source-in,source-in,source-in;mask-image:radial-gradient(circle var(--ti-oc,.4rem) at 0 0,transparent 96%,#000 100%),radial-gradient(circle var(--ti-oc,.4rem) at 100% 0,transparent 96%,#000 100%),radial-gradient(circle var(--ti-oc,.4rem) at 0 100%,transparent 96%,#000 100%),radial-gradient(circle var(--ti-oc,.4rem) at 100% 100%,transparent 96%,#000 100%);mask-composite:intersect,intersect,intersect} #th-tool .ti-ed[data-fx=deep] .ti-t{box-shadow:0 .25rem .625rem rgba(15,23,42,.4)} #th-tool .ti-ed[data-fx=neu] .ti-t{box-shadow:.25rem .25rem .5rem rgba(120,135,160,.5),-.25rem -.25rem .5rem rgba(255,255,255,.95)} #th-tool .ti-ed[data-lsty=dash] .ti-t :is(td,th){border-style:dashed} #th-tool .ti-ed[data-lsty=dot] .ti-t :is(td,th){border-style:dotted} #th-tool .ti-ed[data-hcase=upper] .ti-t :is(th:not([data-ti=c]),[data-ti=h],[data-ti=hb]){text-transform:uppercase} #th-tool .ti-pvw[data-outl=snip]{clip-path:polygon(.4rem 0,calc(100% - .4rem) 0,100% .4rem,100% 100%,0 100%,0 .4rem)} #th-tool .ti-pvw[data-outl=fold]{clip-path:polygon(0 0,calc(100% - .5rem) 0,100% .5rem,100% 100%,0 100%)} #th-tool .ti-pvw[data-outl=scoop]{-webkit-mask-image:radial-gradient(circle .4rem at 0 0,transparent 96%,#000 100%),radial-gradient(circle .4rem at 100% 0,transparent 96%,#000 100%),radial-gradient(circle .4rem at 0 100%,transparent 96%,#000 100%),radial-gradient(circle .4rem at 100% 100%,transparent 96%,#000 100%);-webkit-mask-composite:source-in,source-in,source-in;mask-image:radial-gradient(circle .4rem at 0 0,transparent 96%,#000 100%),radial-gradient(circle .4rem at 100% 0,transparent 96%,#000 100%),radial-gradient(circle .4rem at 0 100%,transparent 96%,#000 100%),radial-gradient(circle .4rem at 100% 100%,transparent 96%,#000 100%);mask-composite:intersect,intersect,intersect} #th-tool .ti-pvw[data-fx=deep]{box-shadow:0 .1875rem .375rem rgba(15,23,42,.45)} #th-tool .ti-pvw[data-fx=neu]{box-shadow:.125rem .125rem .25rem rgba(120,135,160,.55),-.125rem -.125rem .25rem rgba(255,255,255,.9)} #th-tool .ti-pvw[data-fx=glass] i:first-child{position:relative} #th-tool .ti-pvw[data-fx=glass] i:first-child::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.28),rgba(255,255,255,.04))} /* (Mother 2026-10-25, owner "চালাও": Design Check findings, contrast 4.5:1 / tap targets 24 px) */ .linkish:where(#th-tool[data-module="table-image"] *){min-height:24px} /* (016 round 59) the "Undo" link in the grey bar at the bottom of the page: that bar sits in , outside #th-tool, so the rule above does not reach it. 24 px tap target (Design Check 2026-10-25). */ .t-msg.ti-msg .linkish{display:inline-flex;align-items:center;justify-content:center;min-height:24px;min-width:24px} /* (016 round 59) in a narrow tool box (360 px or less) the start panel (no table yet) grows with its words instead of keeping the fixed box height, so "No table yet" and "Draw my table" no longer run over the boxes above and below (layout check at 264 px). Wider boxes are unchanged. */ @container tool (max-width:22.5rem){#th-tool .ti-empty{flex:1 1 auto}}