/* Rule 171 / separation plan P3 (2026-10-25, Mother): every style rule here carries :where(:not(#th-tool[data-own] *)) on the element it styles,
   so it never reaches inside a separated tool box (#th-tool[data-own]); :where adds no weight. New rules MUST carry it too (claude/tools/wall.js). */

/* rule 149 (owner 2026-10-18): ONE height for every drag & drop / paste box on every screen; benchmark = HEIC to JPG (17.5rem = 280 px).
   Every drop box: min-height:var(--h-drop), content centred; taller only when its content needs it; never a px number of its own. */
:root:where(:not(#th-tool[data-own] *)){--h-drop:17.5rem}
/* rule 161 (owner 2026-10-21): ONE upload box look for every photo / image / PDF / file drop box, now and later (reference: HEIC to JPG + Photo Editor). Markup: the box carries t-drop, its big icon t-drop-i. Dashed 45 % brand + 4 % tint, --r-card, min-height --h-drop, content centred, the same height empty and with files listed. Hover / drag-over (common.js adds .is-drag) = solid brand border + 10 % tint, the icon lifts (not with reduced motion). The whole box opens the picker: a <label> for its file input, or data-th-pick="<input id>" (common.js). Tools never copy this CSS; their module keeps only padding / gap and the inner parts. */
.t-drop:where(:not(#th-tool[data-own] *)){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(:not(#th-tool[data-own] *)){display:none}
.t-drop:hover:where(:not(#th-tool[data-own] *)),.t-drop.is-drag:where(:not(#th-tool[data-own] *)){border-color:var(--brand);border-style:solid;background:color-mix(in srgb,var(--brand) 10%,var(--surface))}
.t-drop:focus-visible:where(:not(#th-tool[data-own] *)){outline:none;border-color:var(--brand);border-style:solid;box-shadow:var(--field-glow-hover)}



.thead:where(:not(#th-tool[data-own] *)){display:flex;flex-direction:column;gap:14px}
.thead h1:where(:not(#th-tool[data-own] *)){font-size:clamp(32px,4.4vw,52px);font-weight:720;letter-spacing:-.035em}
.thead .serif:where(:not(#th-tool[data-own] *)){font-size:1.06em}
.tool:where(:not(#th-tool[data-own] *)){padding:24px;display:flex;flex-direction:column;gap:18px;position:relative;border-radius:24px}
.tool:where(:not(#th-tool[data-own] *))::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}
.ask:where(:not(#th-tool[data-own] *)){display:flex;align-items:center;gap:10px;padding:6px 6px 6px 10px;border-radius:14px;background:var(--surface-2)}
.ask .inp:where(:not(#th-tool[data-own] *)){border:0;background:transparent;height:40px}
.ask .inp:focus:where(:not(#th-tool[data-own] *)){box-shadow:none}
.inp.big:where(:not(#th-tool[data-own] *)){height:58px;font-size:20px;font-weight:600;border-radius:14px}
select.inp.big:where(:not(#th-tool[data-own] *)){background-position:calc(100% - 20px) 26px,calc(100% - 15px) 26px}
.swap:where(:not(#th-tool[data-own] *)){height:58px;width:48px;border-radius:14px}
.result:where(:not(#th-tool[data-own] *)){display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 22px;border-radius:18px;background:linear-gradient(120deg,var(--brand-soft),color-mix(in srgb,var(--ai-soft) 70%,var(--surface)))}
.rv #ru:where(:not(#th-tool[data-own] *)){font-size:.5em;font-weight:600;color:var(--muted);letter-spacing:0}
.acts:where(:not(#th-tool[data-own] *)){display:flex;gap:8px;flex-wrap:wrap}
#pin[aria-pressed="true"]:where(:not(#th-tool[data-own] *)){background:var(--ink);color:var(--bg)}
.all:where(:not(#th-tool[data-own] *)){display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.all button:where(:not(#th-tool[data-own] *)){display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface);cursor:pointer;text-align:left}
.all button:hover:where(:not(#th-tool[data-own] *)){border-color:var(--brand)}
.all small:where(:not(#th-tool[data-own] *)){font-size:12px;color:var(--muted);font-weight:600}
.all button:where(:not(#th-tool[data-own] *)){min-width:0}.all small:where(:not(#th-tool[data-own] *)),.all b:where(:not(#th-tool[data-own] *)){max-width:100%;overflow-wrap:anywhere}.all b:where(:not(#th-tool[data-own] *)){font-size:15px;font-variant-numeric:tabular-nums}



.src:where(:not(#th-tool[data-own] *)){display:block;font-size:14.5px!important;color:var(--muted)!important;margin-top:12px;padding:12px 14px;border-radius:12px;background:var(--surface-2)}

.pad-s:where(:not(#th-tool[data-own] *)){padding:18px;display:flex;flex-direction:column;gap:2px}
.pad-s .k:where(:not(#th-tool[data-own] *)){font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:8px;display:flex;gap:6px;align-items:center}
.rl:where(:not(#th-tool[data-own] *)){display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);color:var(--ink);font-weight:600;font-size:15px}
.rl span:where(:not(#th-tool[data-own] *)){color:var(--muted);font-weight:500;font-size:13px}
.more-l:where(:not(#th-tool[data-own] *)){display:inline-flex;gap:6px;align-items:center;margin-top:10px;font-weight:650}


@media (width <= 576px){.ask:where(:not(#th-tool[data-own] *)){flex-direction:column;align-items:stretch;gap:2px}table.t th:where(:not(#th-tool[data-own] *)),table.t td:where(:not(#th-tool[data-own] *)){padding:10px 10px;font-size:14.5px}}
@container tool (width <= 22.5rem){.acts:where(:not(#th-tool[data-own] *)){display:grid;grid-template-columns:repeat(3,1fr);width:100%}.acts .btn:where(:not(#th-tool[data-own] *)){justify-content:center;padding:0 8px}}
@media (width <= 1024px){.tool:where(:not(#th-tool[data-own] *)){padding:16px}.g4:where(:not(#th-tool[data-own] *)){grid-template-columns:1fr 1fr}}
@container tool (width <= 48rem){.result:where(:not(#th-tool[data-own] *)){flex-direction:column;align-items:flex-start}.all:where(:not(#th-tool[data-own] *)){grid-template-columns:repeat(2,minmax(0,1fr))}}


/* related tool cards */
.tc2:where(:not(#th-tool[data-own] *)){display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:16px;background:var(--surface);border:1px solid var(--line);color:var(--ink);transition:.18s}
.tc2:hover:where(:not(#th-tool[data-own] *)){border-color:color-mix(in srgb,var(--brand) 40%,var(--line));box-shadow:var(--shadow-lg);text-decoration:none;transform:translateY(-2px)}
.tc2 b:where(:not(#th-tool[data-own] *)){font-size:16px;letter-spacing:-.01em}
.tc2 span:where(:not(#th-tool[data-own] *)){font-size:13.5px;color:var(--muted)}
.tc2 .meta:where(:not(#th-tool[data-own] *)){display:flex;gap:6px;margin-top:4px}

/* ===== v1.2 tool page: tool zone first, guide below ===== */
.tool-zone:where(:not(#th-tool[data-own] *)){padding-bottom:8px}
.thead:where(:not(#th-tool[data-own] *)){margin-top:14px;margin-bottom:22px}
.thead .lead:where(:not(#th-tool[data-own] *)){max-width:760px}
.thead .badge svg:where(:not(#th-tool[data-own] *)){flex-shrink:0}
.tool:where(:not(#th-tool[data-own] *)){padding:22px 24px 20px;gap:16px}

.tt-label:where(:not(#th-tool[data-own] *)){font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.presets:where(:not(#th-tool[data-own] *)){display:flex;gap:6px;flex-wrap:wrap;flex:1}
.presets .chip:where(:not(#th-tool[data-own] *)){cursor:pointer;padding:5px 11px;font-size:13.5px;font-variant-numeric:tabular-nums;flex-wrap:wrap;row-gap:0}
.presets .chip[aria-pressed="true"]:where(:not(#th-tool[data-own] *)),.chip[aria-pressed="true"]:where(:not(#th-tool[data-own] *)){background:var(--ink);color:var(--bg);border-color:var(--ink)}
.inp.sm:where(:not(#th-tool[data-own] *)){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(:not(#th-tool[data-own] *)){height:var(--h-btn-sm);padding:0 12px;font-size:14px;border-radius:10px}




.all button.on:where(:not(#th-tool[data-own] *)){border-color:var(--brand);background:var(--brand-soft)}
.all b em:where(:not(#th-tool[data-own] *)){font-style:normal;font-weight:600;color:var(--muted);font-size:12.5px}
.hist:where(:not(#th-tool[data-own] *)){display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hist .chip:where(:not(#th-tool[data-own] *)){cursor:pointer;font-size:13px;font-variant-numeric:tabular-nums}
.linkish:where(:not(#th-tool[data-own] *)){background:none;border:0;color:var(--muted);cursor:pointer;font-size:13px;text-decoration:underline;text-underline-offset:3px;padding:0}

/* actions bar */
.tool-actions:where(:not(#th-tool[data-own] *)){display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding:10px 12px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.ta-left:where(:not(#th-tool[data-own] *)){display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tool-actions .btn:where(:not(#th-tool[data-own] *)){height:40px;font-size:14.5px;padding:0 14px}
#ta-save[aria-pressed="true"]:where(:not(#th-tool[data-own] *)){background:var(--brand-soft);border-color:color-mix(in srgb,var(--brand) 45%,var(--line));color:var(--brand-ink)}
#ta-save[aria-pressed="true"] svg:where(:not(#th-tool[data-own] *)){fill:currentColor}
.ta-right:where(:not(#th-tool[data-own] *)){display:flex;align-items:center;gap:8px;font-size:14px}





.share-wrap:where(:not(#th-tool[data-own] *)){position:relative}
.share-pop:where(:not(#th-tool[data-own] *)){position:absolute;left:0;top:calc(100% + 8px);z-index:35;width:340px;max-width:calc(100vw - 32px);background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);padding:14px;display:flex;flex-direction:column;gap:12px}
.share-pop[hidden]:where(:not(#th-tool[data-own] *)){display:none}
.sp-head:where(:not(#th-tool[data-own] *)){display:flex;flex-direction:column;gap:2px}.sp-head small:where(:not(#th-tool[data-own] *)){color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums;word-break:break-word}
.sp-grid:where(:not(#th-tool[data-own] *)){display:grid;grid-template-columns:1fr 1fr;gap:6px}
.sp-grid button:where(:not(#th-tool[data-own] *)),.sp-grid a:where(:not(#th-tool[data-own] *)){display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:14px;font-weight:550;cursor:pointer;text-decoration:none}
.sp-grid button:hover:where(:not(#th-tool[data-own] *)),.sp-grid a:hover:where(:not(#th-tool[data-own] *)){border-color:var(--brand);background:var(--brand-soft);text-decoration:none}
.sp-grid svg:where(:not(#th-tool[data-own] *)){color:var(--brand-ink)}
.sp-ic:where(:not(#th-tool[data-own] *)){width:22px;height:22px;border-radius:7px;background:var(--c);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;font-family:var(--font)}
.sp-native:where(:not(#th-tool[data-own] *)){justify-content:center}

/* related tools right under the tool */
.rel-zone:where(:not(#th-tool[data-own] *)){margin-top:26px}
.rz-head:where(:not(#th-tool[data-own] *)){display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.rz-head h2:where(:not(#th-tool[data-own] *)){font-size:20px;display:flex;align-items:center;gap:10px}.rz-head h2 svg:where(:not(#th-tool[data-own] *)){color:var(--brand-ink)}
.rz-head a:where(:not(#th-tool[data-own] *)){font-weight:650;font-size:14.5px;display:inline-flex;gap:6px;align-items:center}
.rz-grid:where(:not(#th-tool[data-own] *)){display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.rz-card:where(:not(#th-tool[data-own] *)){display:flex;align-items:center;gap:12px;padding:14px;border-radius:16px;background:var(--surface);border:1px solid var(--line);color:var(--ink);transition:.18s;min-width:0}
.rz-card:hover:where(:not(#th-tool[data-own] *)){border-color:color-mix(in srgb,var(--brand) 45%,var(--line));box-shadow:var(--shadow);text-decoration:none;transform:translateY(-2px)}
.rz-card .ti:where(:not(#th-tool[data-own] *)){width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand-soft),var(--ai-soft));color:var(--brand-ink);flex-shrink:0}
.rz-t:where(:not(#th-tool[data-own] *)){display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.rz-t b:where(:not(#th-tool[data-own] *)){font-size:15px;line-height:1.25}
.rz-t small:where(:not(#th-tool[data-own] *)){color:var(--muted);font-size:12.5px;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rz-go:where(:not(#th-tool[data-own] *)){color:var(--muted);flex-shrink:0;transition:.18s}.rz-card:hover .rz-go:where(:not(#th-tool[data-own] *)){color:var(--brand-ink);transform:translateX(3px)}
.recent-zone:where(:not(#th-tool[data-own] *)){display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.recent-zone[hidden]:where(:not(#th-tool[data-own] *)){display:none}
/* recent-tools chips: a long tool name wraps inside the chip instead of sticking out at 280 / 320 px (015 handoff, 2026-10-18) */
.recent-zone > .row:where(:not(#th-tool[data-own] *)){min-width:0;max-width:100%}
.recent-zone .chip:where(:not(#th-tool[data-own] *)){max-width:100%;white-space:normal;overflow-wrap:anywhere;line-height:1.3}#th-tool .t-selw.on:where(:not(#th-tool[data-own] *)){display:grid;min-width:0;max-width:100%}
#th-tool .t-selw.on>select:where(:not(#th-tool[data-own] *)){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(:not(#th-tool[data-own] *)){color:var(--ink);-webkit-text-fill-color:var(--ink)}


/* rule 151: text never spills out of a tool: long words and links break inside their box, chips wrap their words */
#th-tool:where(:not(#th-tool[data-own] *)){overflow-wrap:break-word}
#th-tool .chip:where(:not(#th-tool[data-own] *)){white-space:normal;overflow-wrap:anywhere}
/* rule 151: the converter table on a very narrow box keeps both columns inside it */


/* rule 151: a saved-history chip shows its whole text (it wraps), never "…" */
#th-tool .hist .chip:where(:not(#th-tool[data-own] *)){white-space:normal;overflow-wrap:anywhere;text-overflow:clip;overflow:visible;text-align:left}
.rz-label:where(:not(#th-tool[data-own] *)){display:inline-flex;gap:6px;align-items:center;font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.tz-ad:where(:not(#th-tool[data-own] *)){margin-top:22px}.tz-ad:empty:where(:not(#th-tool[data-own] *)){display:none}

/* guide zone: clearly separate from the tool */
.guide-zone:where(:not(#th-tool[data-own] *)){margin-top:48px;padding:48px 0 8px;background:linear-gradient(180deg,var(--surface-2),transparent 420px);border-top:1px solid var(--line)}
.guide:where(:not(#th-tool[data-own] *)){min-width:0}
.g-head:where(:not(#th-tool[data-own] *)){display:flex;flex-direction:column;gap:10px;padding-bottom:22px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.g-eyebrow:where(:not(#th-tool[data-own] *)){display:inline-flex;gap:6px;align-items:center;align-self:flex-start;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ai-ink);background:var(--ai-soft);padding:4px 10px;border-radius:999px}
.g-title:where(:not(#th-tool[data-own] *)){font-size:clamp(28px,3.2vw,38px);font-weight:720;letter-spacing:-.03em}
.g-meta:where(:not(#th-tool[data-own] *)){font-size:14px}
.toc:where(:not(#th-tool[data-own] *)){display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}.toc[hidden]:where(:not(#th-tool[data-own] *)){display:none}
.toc .muted:where(:not(#th-tool[data-own] *)){font-size:13px;margin-right:4px}.toc .chip:where(:not(#th-tool[data-own] *)){font-size:13px;padding:5px 10px}
.guide .entry:where(:not(#th-tool[data-own] *)){max-width:760px}
.guide .entry h2:where(:not(#th-tool[data-own] *)){scroll-margin-top:90px}
.src:where(:not(#th-tool[data-own] *)){max-width:760px}

@media (width <= 1024px){.rz-grid:where(:not(#th-tool[data-own] *)){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (width <= 1024px){.tool-actions:where(:not(#th-tool[data-own] *)){flex-direction:column;align-items:stretch}.ta-right:where(:not(#th-tool[data-own] *)){justify-content:space-between}.guide-zone:where(:not(#th-tool[data-own] *)){margin-top:32px;padding-top:32px}}
@media (width <= 576px){.rz-grid:where(:not(#th-tool[data-own] *)){grid-template-columns:1fr}.tool-actions .btn span:where(:not(#th-tool[data-own] *)){display:none}.tool-actions .btn:where(:not(#th-tool[data-own] *)){padding:0 12px}.ta-left .btn:first-child span:where(:not(#th-tool[data-own] *)){display:inline}.share-pop:where(:not(#th-tool[data-own] *)){position:fixed;left:16px;right:16px;top:auto;bottom:80px;width:auto}.tool:where(:not(#th-tool[data-own] *)){padding:16px}}
.acts .btn:where(:not(#th-tool[data-own] *)){white-space:nowrap}
@container tool (width <= 22.5rem){.result .acts:where(:not(#th-tool[data-own] *)){width:100%}.result .acts .btn:where(:not(#th-tool[data-own] *)){width:100%;justify-content:center}}

/* ===== v1.5 clean tool page (tool first, like the big tool sites) ===== */
.tool-hero:where(:not(#th-tool[data-own] *)){position:relative;overflow-x:clip;padding-bottom:30px}
.tool-hero:where(:not(#th-tool[data-own] *))::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(:not(#th-tool[data-own] *)){position:relative;z-index:1}
.tool-zone .thead:where(:not(#th-tool[data-own] *)){align-items:center;text-align:center;gap:10px;margin:0 auto 26px;max-width:860px}
.tool-zone .crumb:where(:not(#th-tool[data-own] *)){padding-top:26px;font-size:13px}
.tool-zone .thead h1:where(:not(#th-tool[data-own] *)){font-size:clamp(30px,4vw,48px);margin-top:6px}
.tool-zone .thead .lead:where(:not(#th-tool[data-own] *)){font-size:clamp(16px,1.5vw,18.5px);color:var(--muted)}
.tool-zone .tool:where(:not(#th-tool[data-own] *)){max-width:1040px;margin:0 auto;background:var(--surface);box-shadow:var(--shadow-lg)}
.t-trust:where(:not(#th-tool[data-own] *)){display:flex;justify-content:center;flex-wrap:wrap;gap:6px 18px;margin:16px auto 0;max-width:1040px;font-size:13.5px;color:var(--muted)}
.t-trust span:where(:not(#th-tool[data-own] *)),.t-trust a:where(:not(#th-tool[data-own] *)){display:inline-flex;align-items:center;gap:6px;color:var(--muted)}
.t-trust svg:where(:not(#th-tool[data-own] *)){color:var(--brand-ink)}
.tool-zone .tool-actions:where(:not(#th-tool[data-own] *)){max-width:max-content;margin:16px auto 0;padding:6px;border-radius:999px;gap:6px 14px;box-shadow:var(--shadow)}
.tool-zone .tool-actions .btn:where(:not(#th-tool[data-own] *)){height:36px;border-radius:999px;font-size:14px} /* colours: the site button style (theme.css v1.34) */
.tool-zone .ta-right:where(:not(#th-tool[data-own] *)){padding-left:14px;border-left:1px solid var(--line);font-size:13.5px}

.ta-report:where(:not(#th-tool[data-own] *)){width:34px;height:34px;border-radius:999px;display:grid;place-items:center;color:var(--muted)}
.ta-report:hover:where(:not(#th-tool[data-own] *)){color:var(--brand-ink);background:var(--surface-2)}

/* how to use: three visual steps */
.how:where(:not(#th-tool[data-own] *)){text-align:center;padding-top:56px}
.how h2:where(:not(#th-tool[data-own] *)){font-size:clamp(24px,2.6vw,32px);font-weight:720;letter-spacing:-.02em}
.how>.muted:where(:not(#th-tool[data-own] *)){margin-top:6px}
.how-steps:where(:not(#th-tool[data-own] *)){list-style:none;margin:34px auto 0;padding:0;display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:24px;max-width:1040px;position:relative}
.how-steps:where(:not(#th-tool[data-own] *))::before{content:"";position:absolute;left:calc(50% / var(--n,3));right:calc(50% / var(--n,3));top:28px;height:2px;background:linear-gradient(90deg,var(--brand-soft),color-mix(in srgb,var(--brand) 40%,var(--line)),var(--ai-soft))}
.how-steps li:where(:not(#th-tool[data-own] *)){display:flex;flex-direction:column;align-items:center;gap:8px;position:relative}
.hs-n:where(:not(#th-tool[data-own] *)){width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:#fff;font-weight:750;font-size:21px;font-family:var(--mono);box-shadow:0 8px 24px color-mix(in srgb,var(--brand) 35%,transparent),0 0 0 6px var(--bg);margin-bottom:6px}
.how-steps b:where(:not(#th-tool[data-own] *)){font-size:17px}
.hs-t:where(:not(#th-tool[data-own] *)){color:var(--muted);font-size:14.5px;max-width:280px}
.tz-ad:where(:not(#th-tool[data-own] *)){margin-top:40px}
.rel-zone:where(:not(#th-tool[data-own] *)){margin-top:56px}
.rel-zone .rz-head h2:where(:not(#th-tool[data-own] *)){font-size:22px}
.recent-zone:where(:not(#th-tool[data-own] *)){margin-top:18px}
.guide-zone:where(:not(#th-tool[data-own] *)){margin-top:64px}
@media (width <= 1024px){
  .tool-zone .tool-actions:where(:not(#th-tool[data-own] *)){max-width:none;border-radius:18px;flex-direction:row;flex-wrap:wrap;justify-content:center}
  .tool-zone .ta-right:where(:not(#th-tool[data-own] *)){border-left:0;padding-left:0}
  .how:where(:not(#th-tool[data-own] *)){padding-top:40px}
  .how-steps:where(:not(#th-tool[data-own] *)){grid-template-columns:1fr;gap:18px;max-width:420px;text-align:left}
  .how-steps:where(:not(#th-tool[data-own] *))::before{left:27px;right:auto;top:28px;bottom:28px;width:2px;height:auto}
  .how-steps li:where(:not(#th-tool[data-own] *)){display:grid;grid-template-columns:56px 1fr;column-gap:16px;align-items:center}
  .how-steps li .hs-n:where(:not(#th-tool[data-own] *)){grid-row:span 2;margin:0}
  .rel-zone:where(:not(#th-tool[data-own] *)){margin-top:40px}}
@media (width <= 576px){.tool-zone .crumb:where(:not(#th-tool[data-own] *)){padding-top:16px}.t-trust:where(:not(#th-tool[data-own] *)){font-size:12.5px;gap:4px 12px}.tool-zone .tool-actions .btn span:where(:not(#th-tool[data-own] *)){display:none}.tool-zone .ta-left .btn:first-child span:where(:not(#th-tool[data-own] *)){display:inline}}
@media (width <= 576px){.tool-zone .crumb:where(:not(#th-tool[data-own] *)){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.rz-head:where(:not(#th-tool[data-own] *)){flex-direction:column;align-items:flex-start;gap:4px}}

/* ===== v1.6 — AI-era polish: rating, share, conversions, related cards, converter extras ===== */
.tool-zone .tool:where(:not(#th-tool[data-own] *)){transition:box-shadow .25s}
.tool-zone .tool:focus-within:where(:not(#th-tool[data-own] *)){box-shadow:var(--shadow-lg),0 0 0 4px color-mix(in srgb,var(--brand) 14%,transparent)}

/* direction switch */




.presets .chip b:where(:not(#th-tool[data-own] *)){font-weight:700;color:var(--brand-ink);margin-right:2px}
.presets .chip[aria-pressed="true"] b:where(:not(#th-tool[data-own] *)){color:inherit}
.presets .chip small:where(:not(#th-tool[data-own] *)){font-size:.86em;color:var(--muted);font-weight:500;margin-left:1px}

.presets .chip[aria-pressed="true"] small:where(:not(#th-tool[data-own] *)){color:inherit;opacity:.75}
/* result extras */


.result .acts:where(:not(#th-tool[data-own] *)){flex-direction:column;align-items:flex-end;gap:10px}








/* running pace */






/* stars */
.stars:where(:not(#th-tool[data-own] *)){display:inline-flex;gap:2px}
.stars button:where(:not(#th-tool[data-own] *)){border:0;background:none;padding:2px;cursor:pointer;line-height:0;color:color-mix(in srgb,var(--muted) 45%,transparent);transition:transform .12s,color .12s}
.stars button svg:where(:not(#th-tool[data-own] *)){fill:currentColor}
.stars button.on:where(:not(#th-tool[data-own] *)){color:#F5B301}
.stars button:hover:where(:not(#th-tool[data-own] *)){transform:scale(1.15)}
.stars.big button svg:where(:not(#th-tool[data-own] *)){width:36px;height:36px}
.r-sum:where(:not(#th-tool[data-own] *)){font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
/* popular conversions */
.cv-zone:where(:not(#th-tool[data-own] *)){text-align:center;padding-top:56px}
.cv-zone[hidden]:where(:not(#th-tool[data-own] *)){display:none}
.cv-zone h2:where(:not(#th-tool[data-own] *)){font-size:clamp(24px,2.6vw,32px);font-weight:720;letter-spacing:-.02em}
.cv-zone>.muted:where(:not(#th-tool[data-own] *)){margin-top:6px}
.cv-grid:where(:not(#th-tool[data-own] *)){display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:1040px;margin:26px auto 0;text-align:left}







/* rate & share */
.rs-zone:where(:not(#th-tool[data-own] *)){padding-top:56px}
.rs-card:where(:not(#th-tool[data-own] *)){display:grid;grid-template-columns:1fr 1.25fr;max-width:1040px;margin:0 auto;border-radius:26px;border:1px solid var(--line);background:var(--surface);overflow:hidden;box-shadow:var(--shadow)}
.rs-card>div:where(:not(#th-tool[data-own] *)){padding:28px 30px;display:flex;flex-direction:column;gap:10px}
.rs-rate:where(:not(#th-tool[data-own] *)){background:radial-gradient(420px 220px at 0% 0%,color-mix(in srgb,#F5B301 14%,transparent),transparent 70%),linear-gradient(160deg,var(--brand-soft),var(--surface) 75%);border-right:1px solid var(--line);align-items:flex-start}
.rs-k:where(:not(#th-tool[data-own] *)){display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--brand-ink)}
.rs-card h2:where(:not(#th-tool[data-own] *)){font-size:22px;font-weight:720;letter-spacing:-.02em}
.rs-sum:where(:not(#th-tool[data-own] *)){font-size:15px;color:var(--muted)}.rs-sum b:where(:not(#th-tool[data-own] *)){color:var(--ink);font-size:20px}
.rs-msg:where(:not(#th-tool[data-own] *)){font-size:13.5px;color:var(--muted)}
.sh-grid:where(:not(#th-tool[data-own] *)){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:4px}
.sh-grid a:where(:not(#th-tool[data-own] *)),.sh-grid button:where(:not(#th-tool[data-own] *)){display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;transition:.15s;font-family:inherit}
.sh-grid a:hover:where(:not(#th-tool[data-own] *)),.sh-grid button:hover:where(:not(#th-tool[data-own] *)){border-color:color-mix(in srgb,var(--brand) 45%,var(--line));background:var(--brand-soft);text-decoration:none;transform:translateY(-1px)}
.sh-grid [hidden]:where(:not(#th-tool[data-own] *)){display:none}
.sh-grid .sp-ic:where(:not(#th-tool[data-own] *)){width:26px;height:26px;border-radius:8px}
.sh-grid .sp-ic svg:where(:not(#th-tool[data-own] *)),.sp-grid .sp-ic svg:where(:not(#th-tool[data-own] *)){color:#fff} /* 2026-10-16: the result Share menu (.sp-grid) too: its .sp-grid svg brand-ink colour made a dark glyph on the brand tile */
/* related tools — modern cards */
.rel-zone .rz-grid:where(:not(#th-tool[data-own] *)){grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.rel-zone .rz-card:where(:not(#th-tool[data-own] *)){position:relative;flex-direction:column;align-items:flex-start;gap:14px;padding:20px 20px 18px;border-radius:22px;border:1px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(140deg,color-mix(in srgb,var(--brand) 40%,var(--line)),var(--line) 45%,var(--line) 60%,color-mix(in srgb,var(--ai) 40%,var(--line))) border-box;overflow:hidden;isolation:isolate}
.rel-zone .rz-card:where(:not(#th-tool[data-own] *))::before{content:"";position:absolute;right:-60px;top:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--ai) 22%,transparent),transparent);opacity:.5;transition:opacity .25s,transform .25s;z-index:-1}
.rel-zone .rz-card:hover:where(:not(#th-tool[data-own] *)){transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.rel-zone .rz-card:hover:where(:not(#th-tool[data-own] *))::before{opacity:1;transform:scale(1.15)}
.rel-zone .rz-card .ti:where(:not(#th-tool[data-own] *)){width:48px;height:48px;border-radius:15px;background:var(--grad);color:#fff;box-shadow:0 8px 22px color-mix(in srgb,var(--brand) 32%,transparent)}
.rel-zone .rz-t b:where(:not(#th-tool[data-own] *)){font-size:16.5px;letter-spacing:-.01em}
.rel-zone .rz-t small:where(:not(#th-tool[data-own] *)){font-size:13.5px;margin-top:2px}
.rel-zone .rz-go:where(:not(#th-tool[data-own] *)){position:absolute;top:18px;right:18px;width:34px;height:34px;padding:9px;border-radius:50%;border:1px solid var(--line);background:var(--surface);box-sizing:border-box}
.rel-zone .rz-card:hover .rz-go:where(:not(#th-tool[data-own] *)){background:var(--grad);color:#fff;border-color:transparent;transform:rotate(-45deg)}
@media (width <= 1024px){
  .rs-card:where(:not(#th-tool[data-own] *)){grid-template-columns:1fr}.rs-rate:where(:not(#th-tool[data-own] *)){border-right:0;border-bottom:1px solid var(--line)}
  .cv-grid:where(:not(#th-tool[data-own] *)){grid-template-columns:1fr}}
@container tool (width <= 48rem){.result .acts:where(:not(#th-tool[data-own] *)){align-items:stretch;width:100%}}
@media (width <= 576px){
  .rs-card:where(:not(#th-tool[data-own] *)){grid-template-columns:minmax(0,1fr)}.rs-card>div:where(:not(#th-tool[data-own] *)){padding:22px 18px;min-width:0}
  
  .tool-zone .ta-right:where(:not(#th-tool[data-own] *)){flex-wrap:wrap;justify-content:center}
  .rel-zone .rz-grid:where(:not(#th-tool[data-own] *)){grid-template-columns:1fr}}

.sh-grid .sp-ic:where(:not(#th-tool[data-own] *)),.sp-grid .sp-ic:where(:not(#th-tool[data-own] *)){box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
/* rule 151 (m) 2026-10-19: the Rate & share card fits 264-360 px: one column of share buttons under about 300 px, two from 320 px, smaller buttons up to 360 px */
@media (width <= 360px){.sh-grid:where(:not(#th-tool[data-own] *)){gap:6px}.sh-grid a:where(:not(#th-tool[data-own] *)),.sh-grid button:where(:not(#th-tool[data-own] *)){padding:8px;gap:7px;font-size:12.5px}.sh-grid .sp-ic:where(:not(#th-tool[data-own] *)){width:22px;height:22px;flex:none}}


@container tool (width <= 22.5rem){.result .acts .btn:where(:not(#th-tool[data-own] *)){width:100%}}
/* ===== v1.7 ===== */
.t-trust:where(:not(#th-tool[data-own] *)){margin-top:28px}
.tool-zone .tool-actions:where(:not(#th-tool[data-own] *)){margin-top:16px}
#ta-save[aria-pressed="true"]:where(:not(#th-tool[data-own] *)){color:color-mix(in srgb,#E11D48 75%,var(--ink));border-color:transparent;background:color-mix(in srgb,#E11D48 10%,transparent)}
#ta-save[aria-pressed="true"] svg:where(:not(#th-tool[data-own] *)){fill:#E11D48}
/* Rule 109 (owner 2026-10-13): the heart at the top right of a tool page's title area (tool-page.js adds it; same job as
   “Save” in the action bar). The crumb keeps 52 px free on both sides all the time, so nothing moves when the heart appears. */
.tool-zone>.thead:where(:not(#th-tool[data-own] *)){position:relative}
.tool-zone>.thead>.crumb:where(:not(#th-tool[data-own] *)){padding-left:52px;padding-right:52px}
.th-fav:where(:not(#th-tool[data-own] *)){position:absolute;top:14px;right:0;width:44px;height:44px;padding:0;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--muted);box-shadow:var(--shadow);cursor:pointer;transition:color .2s,border-color .2s,background-color .2s}
.th-fav:hover:where(:not(#th-tool[data-own] *)){color:#E11D48;border-color:color-mix(in srgb,#E11D48 40%,var(--line))}
.th-fav:focus-visible:where(:not(#th-tool[data-own] *)){outline:2px solid var(--brand);outline-offset:2px}
.th-fav svg:where(:not(#th-tool[data-own] *)){width:20px;height:20px}
.th-fav[aria-pressed="true"]:where(:not(#th-tool[data-own] *)){color:#E11D48;border-color:color-mix(in srgb,#E11D48 35%,var(--line));background:color-mix(in srgb,#E11D48 10%,var(--surface))}
.th-fav[aria-pressed="true"] svg:where(:not(#th-tool[data-own] *)){fill:#E11D48}
@media (width <= 576px){.th-fav:where(:not(#th-tool[data-own] *)){top:4px}}
@media print{.th-fav:where(:not(#th-tool[data-own] *)){display:none!important}}
.sec-k:where(:not(#th-tool[data-own] *)){display:inline-flex;align-items:center;gap:6px;margin-bottom:10px;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--brand-ink);background:var(--brand-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 22%,transparent)}
/* in real life */



/* v1.41: scoped to the converter's "in real life" chips — the same class name also styled the side-rail tool links as touching cards */




/* copy feedback */

/* share popover: compact 3-column grid for many networks */
.share-pop:where(:not(#th-tool[data-own] *)){width:420px}
.share-pop .sp-grid:where(:not(#th-tool[data-own] *)){grid-template-columns:repeat(3,minmax(0,1fr))}
.share-pop .sp-grid button:where(:not(#th-tool[data-own] *)),.share-pop .sp-grid a:where(:not(#th-tool[data-own] *)){padding:8px 9px;font-size:13px;gap:8px}
.share-pop .sp-ic:where(:not(#th-tool[data-own] *)){width:22px;height:22px;font-size:11px}
.sh-grid a:where(:not(#th-tool[data-own] *)),.sh-grid button:where(:not(#th-tool[data-own] *)){padding:9px 11px;font-size:13.5px}
.sh-grid:where(:not(#th-tool[data-own] *)){grid-template-columns:repeat(4,minmax(0,1fr))}
/* scroll reveal (added by JS only, so content never hides without JS) */
.js-rv:where(:not(#th-tool[data-own] *)){opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.js-rv.in:where(:not(#th-tool[data-own] *)){opacity:1;transform:none}
/* rule 117: a part that has not faded in yet must still print (it used to print as empty pages) */
@media print{.js-rv:where(:not(#th-tool[data-own] *)){opacity:1!important;transform:none!important;transition:none!important}}
/* back to the tool */
.to-tool:where(:not(#th-tool[data-own] *)){position:fixed;right:20px;bottom:24px;z-index:40;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border:0;border-radius:999px;background:var(--grad);color:#fff;font:600 14px/1 var(--font);cursor:pointer;box-shadow:0 12px 30px color-mix(in srgb,var(--brand) 40%,transparent);animation:tt-in .25s ease}
.to-tool[hidden]:where(:not(#th-tool[data-own] *)){display:none}
@keyframes tt-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (width <= 768px){.to-tool:where(:not(#th-tool[data-own] *)){bottom:84px;right:14px;height:40px;padding:0 14px;font-size:13px}}
@media (width <= 1024px){.sh-grid:where(:not(#th-tool[data-own] *)){grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (width <= 576px){
  .share-pop:where(:not(#th-tool[data-own] *)){width:auto}.share-pop .sp-grid:where(:not(#th-tool[data-own] *)){grid-template-columns:repeat(2,minmax(0,1fr))}
  .sh-grid:where(:not(#th-tool[data-own] *)){grid-template-columns:repeat(auto-fit,minmax(min(100%,6.75rem),1fr))}.sh-grid a:where(:not(#th-tool[data-own] *)),.sh-grid button:where(:not(#th-tool[data-own] *)){min-width:0}
  .t-trust:where(:not(#th-tool[data-own] *)){margin-top:22px}}
/* ===== v1.8 help us improve ===== */
.hi-zone:where(:not(#th-tool[data-own] *)){padding-top:56px}
.hi-card:where(:not(#th-tool[data-own] *)){max-width:1040px;margin:0 auto;display:grid;grid-template-columns:1fr 1.35fr;gap:26px;align-items:center;padding:28px 30px;border-radius:26px;border:1px solid var(--line);background:radial-gradient(500px 240px at 100% 0%,color-mix(in srgb,var(--ai) 16%,transparent),transparent 70%),var(--surface);box-shadow:var(--shadow)}
.hi-txt h2:where(:not(#th-tool[data-own] *)){font-size:22px;font-weight:720;letter-spacing:-.02em;margin-bottom:6px}
.hi-txt p:where(:not(#th-tool[data-own] *)){font-size:14.5px}
.hi-acts:where(:not(#th-tool[data-own] *)){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.hi-btn:where(:not(#th-tool[data-own] *)){display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:16px;border-radius:18px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);cursor:pointer;text-align:left;font-family:inherit;transition:.18s}
.hi-btn:hover:where(:not(#th-tool[data-own] *)){border-color:color-mix(in srgb,var(--brand) 45%,var(--line));transform:translateY(-2px);box-shadow:var(--shadow)}
.hi-ic:where(:not(#th-tool[data-own] *)){font-size:22px;line-height:1;margin-bottom:4px}
.hi-btn b:where(:not(#th-tool[data-own] *)){font-size:14.5px}.hi-btn small:where(:not(#th-tool[data-own] *)){font-size:12.5px;color:var(--muted)}
@media (width <= 1024px){.hi-card:where(:not(#th-tool[data-own] *)){grid-template-columns:1fr}}
@media (width <= 576px){.hi-card:where(:not(#th-tool[data-own] *)){padding:22px 18px}.hi-acts:where(:not(#th-tool[data-own] *)){grid-template-columns:1fr}.hi-btn:where(:not(#th-tool[data-own] *)){flex-direction:row;align-items:center;gap:10px}.hi-btn small:where(:not(#th-tool[data-own] *)){display:none}.hi-ic:where(:not(#th-tool[data-own] *)){margin:0}}
/* ===== v1.9 table tools, print, embed ===== */
.tbl-tools:where(:not(#th-tool[data-own] *)){display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.tbl-tools button:where(:not(#th-tool[data-own] *)){border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:999px;padding:6px 12px;font:600 12.5px var(--font);cursor:pointer}
.tbl-tools button:hover:where(:not(#th-tool[data-own] *)){color:var(--brand-ink);border-color:color-mix(in srgb,var(--brand) 40%,var(--line))}
.emb-open:where(:not(#th-tool[data-own] *)){margin-top:6px;align-self:flex-start;border:1px dashed color-mix(in srgb,var(--brand) 40%,var(--line));background:transparent;color:var(--brand-ink);border-radius:999px;padding:8px 14px;font:650 13.5px var(--font);cursor:pointer}
.emb-open:hover:where(:not(#th-tool[data-own] *)){border-style:solid;background:var(--brand-soft)}
.emb-code:where(:not(#th-tool[data-own] *)){width:100%;font:12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;padding:12px;resize:vertical}
/* print-only parts of a guide table (rule 108): never shown on screen, even while the print dialog is open */


/* ===== v1.13 word counter ===== */


















/* rule 151: on a narrow box the small number cells go 2 per line (a lone last one takes the whole line), so no label is cut */









































/* ===== v1.13 actions pill: embed + open on phone ===== */
.ta-emb .ta-code:where(:not(#th-tool[data-own] *)){font:700 12.5px var(--mono);letter-spacing:-.04em}
.qr-dlg .qr-box:where(:not(#th-tool[data-own] *)){display:grid;place-items:center;padding:14px;margin:6px auto 0;border-radius:18px;background:#fff;width:max-content}
.qr-dlg .qr-box svg:where(:not(#th-tool[data-own] *)){display:block;width:220px;height:220px}
.qr-dlg .qr-url:where(:not(#th-tool[data-own] *)){font-size:13px;color:var(--muted);word-break:break-all;text-align:center}
/* "On your phone" (QR) button: hidden on touch screens; on mouse screens shown down to 375 px (owner 2026-10-07) */
@media (hover:none),(width <= 576px){.ta-phone:where(:not(#th-tool[data-own] *)){display:none!important}}

/* ===== v1.14 related tools: shaded cards ===== */
.rel-zone .rz-card .ti:where(:not(#th-tool[data-own] *)){width:48px;height:48px;border-radius:15px}
.rel-zone .rz-card:hover .rz-go:where(:not(#th-tool[data-own] *)){background:var(--tc);color:#fff;border-color:transparent}

/* ===== v1.15 word counter: selection scope, focus keyword, compare, voice typing ===== */











@keyframes wcxp{50%{opacity:.55}}





































/* ===== v1.15 converter table, history export, shortcuts, print ===== */










/* convert a list (unit converter v4) */











.t-keys:where(:not(#th-tool[data-own] *)){display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:0;font:inherit;color:var(--muted);cursor:pointer}
.t-keys:hover:where(:not(#th-tool[data-own] *)){color:var(--brand-ink)}
.keys-tbl:where(:not(#th-tool[data-own] *)){width:100%;border-collapse:collapse;margin-top:10px;font-size:14.5px}
.keys-tbl td:where(:not(#th-tool[data-own] *)){padding:9px 4px;border-bottom:1px solid var(--line);vertical-align:middle}
.keys-tbl td:first-child:where(:not(#th-tool[data-own] *)){white-space:nowrap;width:1%;padding-right:18px;color:var(--muted)}
.keys-tbl kbd:where(:not(#th-tool[data-own] *)){display:inline-block;min-width:24px;padding:2px 7px;border-radius:7px;border:1px solid var(--line);border-bottom-width:2px;background:var(--surface-2);font:600 12.5px var(--mono);color:var(--ink);text-align:center}
.print-only:where(:not(#th-tool[data-own] *)){display:none}
@media (hover:none),(width <= 1024px){.t-keys:where(:not(#th-tool[data-own] *)){display:none}}

@media print{
  html:root:where(:not(#th-tool[data-own] *)),html:root[data-theme="dark"]:where(:not(#th-tool[data-own] *)),html:root:not([data-theme="light"]):where(:not(#th-tool[data-own] *)){--bg:#fff;--surface:#fff;--surface-2:#F3F4F6;--ink:#111;--muted:#4B5563;--line:#D1D5DB;--brand-soft:#EEF0FF;--brand-ink:#3730A3;color-scheme:light}
  body:where(:not(#th-tool[data-own] *)){background:#fff!important;color:#111}
  .hdr:where(:not(#th-tool[data-own] *)),.mnav:where(:not(#th-tool[data-own] *)),.ftr:where(:not(#th-tool[data-own] *)),.ad-top:where(:not(#th-tool[data-own] *)),.ad-below-hdr:where(:not(#th-tool[data-own] *)),.ad-foot:where(:not(#th-tool[data-own] *)),.tz-ad:where(:not(#th-tool[data-own] *)),.ads-live:where(:not(#th-tool[data-own] *)),.tool-actions:where(:not(#th-tool[data-own] *)),.t-trust:where(:not(#th-tool[data-own] *)),.to-tool:where(:not(#th-tool[data-own] *)),.share-pop:where(:not(#th-tool[data-own] *)),dialog:where(:not(#th-tool[data-own] *)),.toast:where(:not(#th-tool[data-own] *)),.recent-zone:where(:not(#th-tool[data-own] *)),.rs-zone:where(:not(#th-tool[data-own] *)),.hi-zone:where(:not(#th-tool[data-own] *)),.rel-zone:where(:not(#th-tool[data-own] *)),.tbl-tools:where(:not(#th-tool[data-own] *)),.tbl-hint:where(:not(#th-tool[data-own] *)){display:none!important}
  .tool-hero:where(:not(#th-tool[data-own] *)){background:none!important;padding:0!important}
  .tool:where(:not(#th-tool[data-own] *)){box-shadow:none!important;border:1px solid #D1D5DB!important;break-inside:auto}
  /* rule 115: the tool box flows over pages like the screen (a box taller than the room left on page 1 used to jump whole to
     page 2 and leave page 1 empty); only small parts stay whole, and a title never sits alone at the bottom of a page */
  
  
  /* rule 115 (g): the phone bar room (body padding-bottom 68 px under 900 px) and the tool zone padding would spill onto an empty last page */
  body:where(:not(#th-tool[data-own] *)){padding-bottom:0!important}.tool-zone:where(:not(#th-tool[data-own] *)){padding-bottom:0!important}
  .tool .btn:where(:not(#th-tool[data-own] *)),.hist:where(:not(#th-tool[data-own] *)),.acts:where(:not(#th-tool[data-own] *)){display:none!important}
  
  
  .print-only:where(:not(#th-tool[data-own] *)){display:block!important}
  .print-foot:where(:not(#th-tool[data-own] *)){margin-top:18px;font-size:10pt;color:#4B5563;text-align:center}
  details:not([open])>*:not(summary):where(:not(#th-tool[data-own] *)){display:none}
  a:where(:not(#th-tool[data-own] *)){color:inherit;text-decoration:none}
  body.print-tool .how:where(:not(#th-tool[data-own] *)),body.print-tool .cv-zone:where(:not(#th-tool[data-own] *)),body.print-tool .guide-zone:where(:not(#th-tool[data-own] *)){display:none!important}}
.wcx-grp .btn:where(:not(#th-tool[data-own] *)){height:36px;padding:0 14px;border-radius:10px;font-size:13.5px;gap:7px;border-color:transparent;background:transparent;box-shadow:none}
.wcx-grp .btn-ghost:hover:where(:not(#th-tool[data-own] *)){background:var(--btn2-bg-hover);border-color:var(--btn2-border-hover);box-shadow:var(--btn2-shade)}
.wcx-grp .btn-brand:where(:not(#th-tool[data-own] *)){background:var(--btn-grad) border-box;border-color:transparent;color:#fff;box-shadow:var(--btn-glow)}
.wcx-grp .btn-brand:hover:where(:not(#th-tool[data-own] *)){box-shadow:var(--btn-glow-hover)}
.wcx-grp .btn[disabled]:where(:not(#th-tool[data-own] *)){opacity:.4}


@container tool (width <= 36rem){
  .wcx-grp .btn:where(:not(#th-tool[data-own] *)){height:38px;padding:0 13px}}

/* ===== v1.16 word counter: voice typing next to the target ===== */










/* ===== v1.17 word counter: open / copy / .txt / PDF next to Dictate; drop a file; print fix ===== */






@media print{
  /* decorative layers (gradient border mask, glows, dotted grid) turn into a blank cover when backgrounds are not printed */
  .tool:where(:not(#th-tool[data-own] *))::before,.tool:where(:not(#th-tool[data-own] *))::after,.tool-hero:where(:not(#th-tool[data-own] *))::after,.hero:where(:not(#th-tool[data-own] *))::after{display:none!important;content:none!important}
  .grad-text:where(:not(#th-tool[data-own] *)),.h1 .serif:where(:not(#th-tool[data-own] *)),.logo .lh:where(:not(#th-tool[data-own] *)),.th-answer strong:where(:not(#th-tool[data-own] *)){background:none!important;color:#3730A3!important;-webkit-text-fill-color:#3730A3!important}}



/* ===== v1.18 word counter: input and output groups; Google pixel-width preview ===== */













/* ===== v1.19: top row fills the width — row 1: Target · Dictate · Upload; row 2: Copy/.txt/PDF · Save draft ===== */





/* ===== v1.20: Google preview that looks like a real result ===== */





























/* ===== v1.21: live dictation bar under the top row ===== */









/* ===== v1.21.1: "Applies to" chip sits right above the case / clean-up buttons ===== */




/* ===== v1.22: searchable voice-typing language picker ===== */














/* ===== v1.23: long texts print from the first page (the text box may run over several pages) ===== */

/* ===== v1.24: share the text itself (inside the link), read-only shared texts ===== */
.sp-opts:where(:not(#th-tool[data-own] *)){display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:12px;background:var(--surface-2);font-size:13.5px}
.sp-opts[hidden]:where(:not(#th-tool[data-own] *)){display:none}
.sp-chk:where(:not(#th-tool[data-own] *)){display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--ink);font-weight:550}
.sp-chk input:where(:not(#th-tool[data-own] *)){width:16px;height:16px;accent-color:var(--brand);flex:0 0 16px}

.sp-opts small:where(:not(#th-tool[data-own] *)){color:var(--muted);font-size:12.5px;line-height:1.45}









/* ===== v1.25: site logo at the top of printed pages and PDFs ===== */
.print-brand:where(:not(#th-tool[data-own] *)){display:none}
@media print{
  .print-brand:where(:not(#th-tool[data-own] *)){display:flex!important;align-items:center;justify-content:space-between;gap:16px;padding:0 0 10px;margin:0 0 14px;border-bottom:1px solid #D1D5DB}
  .pb-logo:where(:not(#th-tool[data-own] *)){display:flex;align-items:center;gap:10px;font-weight:750;font-size:22px;line-height:1;letter-spacing:-.03em;color:#111}
  .pb-logo .mark:where(:not(#th-tool[data-own] *)){width:32px;height:32px;flex:0 0 32px}
  .pb-logo .lh:where(:not(#th-tool[data-own] *)){color:#4F46E5!important;-webkit-text-fill-color:#4F46E5!important;background:none!important}
  .pb-url:where(:not(#th-tool[data-own] *)){font-size:10pt;color:#4B5563}}
/* ===== v1.25.1: "More apps…" (the device's own share menu) was transparent inside the actions bar ===== */
.tool-zone .tool-actions .sp-native:where(:not(#th-tool[data-own] *)){width:100%;height:40px;border-radius:12px;gap:8px;background:linear-gradient(180deg,var(--brand-2),var(--brand));color:var(--on-brand);border-color:transparent}
.tool-zone .tool-actions .sp-native:hover:where(:not(#th-tool[data-own] *)),.tool-zone .tool-actions .sp-native:focus-visible:where(:not(#th-tool[data-own] *)){background:linear-gradient(180deg,var(--brand-2),var(--brand));color:var(--on-brand);filter:brightness(1.1)}
.tool-zone .tool-actions .sp-native[hidden]:where(:not(#th-tool[data-own] *)){display:none}
/* ===== v1.29: Text Kit — generic text tools (module text-cleaner: Whitespace Remover, Line Break Remover, Case Converter…) ===== */









/* ===== v1.29.1: screenshots in the tool guide (annotated how-to images) ===== */
.entry figure.wp-block-image:where(:not(#th-tool[data-own] *)),.entry .wp-block-image>figure:where(:not(#th-tool[data-own] *)){margin:20px 0 8px}
.entry figure.wp-block-image img:where(:not(#th-tool[data-own] *)),.entry .wp-block-image>figure img:where(:not(#th-tool[data-own] *)){display:block;width:100%;max-width:100%;height:auto;border:1px solid var(--line);box-shadow:var(--shadow);background:#EEF0F6}
.entry figure.wp-block-image a:where(:not(#th-tool[data-own] *)),.entry .wp-block-image>figure a:where(:not(#th-tool[data-own] *)){display:block;cursor:zoom-in}
.entry figure.wp-block-image figcaption:where(:not(#th-tool[data-own] *)),.entry .wp-block-image>figure figcaption:where(:not(#th-tool[data-own] *)){margin-top:8px;font-size:13.5px;line-height:1.5;color:var(--muted);text-align:center}
/* 1.29.21: a picture set to a smaller width (e.g. a phone screenshot) sits in the middle, caption as wide as the picture.
   WordPress writes centred pictures two ways: figure.wp-block-image.aligncenter, or div.wp-block-image > figure.aligncenter */
.entry .wp-block-image .aligncenter:where(:not(#th-tool[data-own] *)){display:table;margin-left:auto;margin-right:auto;max-width:100%}
.entry .wp-block-image .aligncenter>figcaption:where(:not(#th-tool[data-own] *)){display:table-caption;caption-side:bottom}


/* ===== v1.29.2: guide — "On this page" card, number badges, steps and picture viewer ===== */
.guide-zone .layout:where(:not(#th-tool[data-own] *)){align-items:stretch}
.guide-zone .rail:where(:not(#th-tool[data-own] *)){position:static}
.g-toc:where(:not(#th-tool[data-own] *)){background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:6px 6px 8px;box-shadow:var(--shadow)}
.g-toc-h:where(:not(#th-tool[data-own] *)){display:flex;align-items:center;gap:8px;width:100%;padding:12px 12px 10px;border:0;background:none;font:inherit;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);cursor:default;text-align:left}
.g-toc-h svg:where(:not(#th-tool[data-own] *)){color:var(--brand-ink);flex-shrink:0}
.g-toc-h small:where(:not(#th-tool[data-own] *)){margin-left:auto;font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted)}
.g-toc ol:where(:not(#th-tool[data-own] *)){list-style:none;margin:0;padding:0 0 2px;counter-reset:t;overscroll-behavior:contain}
.g-toc li:where(:not(#th-tool[data-own] *)){counter-increment:t}
.g-toc a:where(:not(#th-tool[data-own] *)){display:flex;gap:10px;padding:7px 10px;border-radius:10px;color:var(--muted);font-size:14px;line-height:1.38;transition:background .15s,color .15s;text-decoration:none}
.g-toc a:where(:not(#th-tool[data-own] *))::before{content:counter(t,decimal-leading-zero);flex-shrink:0;min-width:18px;font:700 11.5px/1.9 var(--mono);color:color-mix(in srgb,var(--muted) 70%,transparent);font-variant-numeric:tabular-nums}
.g-toc a:hover:where(:not(#th-tool[data-own] *)){background:var(--surface-2);color:var(--ink);text-decoration:none}
.g-toc a.on:where(:not(#th-tool[data-own] *)){background:var(--brand-soft);color:var(--brand-ink);font-weight:650}
.g-toc a.on:where(:not(#th-tool[data-own] *))::before{color:var(--brand-ink)}
@media (width > 1024px){
  .guide-zone .rail .g-toc:where(:not(#th-tool[data-own] *)){position:sticky;top:88px}
  .guide-zone .rail .g-toc ol:where(:not(#th-tool[data-own] *)){max-height:calc(100vh - 170px);overflow-y:auto;scrollbar-width:thin}}
@media (width <= 1024px){
  .g-head .g-toc:where(:not(#th-tool[data-own] *)){margin-top:16px;box-shadow:none}
  .g-toc-h:where(:not(#th-tool[data-own] *)){cursor:pointer}
  .g-toc-h small:where(:not(#th-tool[data-own] *)){margin-left:auto;margin-right:6px}
  .g-toc-h:where(:not(#th-tool[data-own] *))::after{content:"";width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .2s;margin-top:-4px}
  .g-toc.open .g-toc-h:where(:not(#th-tool[data-own] *))::after{transform:rotate(-135deg);margin-top:4px}
  .g-toc:not(.open) ol:where(:not(#th-tool[data-own] *)){display:none}}
/* picture pins in the text (numbering style D, v1.29.4): a small picture icon + the same number as in the screenshot.
   The number is wrapped in <b> by ToolHa Core (blocks.php); clicking a pin opens that picture (tool-page.js). */
.entry .th-n:where(:not(#th-tool[data-own] *)){display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 2px 0 6px;margin:0 3px;border-radius:999px;background:color-mix(in srgb,var(--brand-soft) 75%,var(--surface));border:1px solid color-mix(in srgb,var(--brand) 24%,var(--line));color:var(--brand-ink);font:700 11px/1 var(--mono);vertical-align:.1em;white-space:nowrap;letter-spacing:0;transition:border-color .15s,box-shadow .15s}
/* v1.41: a line with number pins gets room, so pins on two lines never touch (22 px pin, 30 px line) */
.entry :is(p,li):has(>.th-n):where(:not(#th-tool[data-own] *)){line-height:2}
.entry .th-n:where(:not(#th-tool[data-own] *))::before{content:"";width:12px;height:12px;flex-shrink:0;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Ccircle cx='9' cy='10' r='1.8'/%3E%3Cpath d='m21 16-5-5-9 9'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Ccircle cx='9' cy='10' r='1.8'/%3E%3Cpath d='m21 16-5-5-9 9'/%3E%3C/svg%3E") center/contain no-repeat}
.entry .th-n b:where(:not(#th-tool[data-own] *)){display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--grad);color:#fff;font:700 10.5px/1 var(--mono)}
.entry .th-n.go:where(:not(#th-tool[data-own] *)){cursor:zoom-in}
.entry .th-n.go:hover:where(:not(#th-tool[data-own] *)),.entry .th-n.go:focus-visible:where(:not(#th-tool[data-own] *)){border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent);outline:0}
.entry td .th-n:where(:not(#th-tool[data-own] *)),.entry li>strong .th-n:first-child:where(:not(#th-tool[data-own] *)){margin-left:0}
.entry figcaption .th-n:where(:not(#th-tool[data-own] *)){height:20px}
.entry td:first-child .th-n:where(:not(#th-tool[data-own] *)){height:25px;padding:0 3px 0 7px}
.entry td:first-child .th-n b:where(:not(#th-tool[data-own] *)){min-width:19px;height:19px;font-size:11.5px}
/* numbered steps (style D): calm square tiles = "do this next"; picture pins above = "look here in the picture" */
.entry .th-steps:where(:not(#th-tool[data-own] *)){counter-reset:s;list-style:none;padding-left:0;margin-top:18px}
.entry .th-steps>li:where(:not(#th-tool[data-own] *)){counter-increment:s;position:relative;padding:4px 0 18px 48px;margin:0}
.entry .th-steps>li+li:where(:not(#th-tool[data-own] *)){margin-top:0}
.entry .th-steps>li:where(:not(#th-tool[data-own] *))::before{content:counter(s);position:absolute;left:0;top:0;box-sizing:border-box;width:32px;height:32px;border-radius:9px;background:var(--brand-soft);border:1px solid color-mix(in srgb,var(--brand) 24%,var(--line));color:var(--brand-ink);font:700 14px/30px var(--mono);text-align:center}
.entry .th-steps>li:not(:last-child):where(:not(#th-tool[data-own] *))::after{content:"";position:absolute;left:15px;top:38px;bottom:4px;width:0;border-left:2px dotted color-mix(in srgb,var(--brand) 28%,var(--line))}
/* picture viewer */
.entry figure.wp-block-image img:where(:not(#th-tool[data-own] *)),.entry .wp-block-image>figure img:where(:not(#th-tool[data-own] *)){cursor:zoom-in}
.lbx:where(:not(#th-tool[data-own] *)){position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:56px 64px 40px;background:rgba(8,10,20,.86);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);cursor:zoom-out;animation:lbx-in .18s ease-out}
.lbx[hidden]:where(:not(#th-tool[data-own] *)){display:none}
.lbx figure:where(:not(#th-tool[data-own] *)){margin:0;max-width:min(1400px,100%);display:flex;flex-direction:column;align-items:center;gap:12px;cursor:default}
.lbx img:where(:not(#th-tool[data-own] *)){max-width:100%;max-height:calc(100vh - 150px);width:auto;height:auto;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.45);background:#EEF0F6}
.lbx figcaption:where(:not(#th-tool[data-own] *)){color:#E5E7EB;font-size:14.5px;line-height:1.5;text-align:center;max-width:760px}
.lbx figcaption .th-n:where(:not(#th-tool[data-own] *)){display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 2px 0 6px;margin:0 2px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#C7D2FE;vertical-align:.1em}
.lbx figcaption .th-n:where(:not(#th-tool[data-own] *))::before{content:"";width:12px;height:12px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Ccircle cx='9' cy='10' r='1.8'/%3E%3Cpath d='m21 16-5-5-9 9'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Ccircle cx='9' cy='10' r='1.8'/%3E%3Cpath d='m21 16-5-5-9 9'/%3E%3C/svg%3E") center/contain no-repeat}
.lbx figcaption .th-n b:where(:not(#th-tool[data-own] *)){display:inline-grid;place-items:center;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--grad);color:#fff;font:700 10px/1 var(--mono)}
.lbx-c:where(:not(#th-tool[data-own] *)){color:#9CA3AF;font:600 12.5px var(--mono)}
.lbx button:where(:not(#th-tool[data-own] *)){position:absolute;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.1);color:#fff;font-size:28px;line-height:1;cursor:pointer;transition:background .15s}
.lbx button:hover:where(:not(#th-tool[data-own] *)),.lbx button:focus-visible:where(:not(#th-tool[data-own] *)){background:rgba(255,255,255,.22)}
.lbx-x:where(:not(#th-tool[data-own] *)){top:14px;right:14px}
.lbx-p:where(:not(#th-tool[data-own] *)){left:14px;top:50%;transform:translateY(-50%)}
.lbx-n:where(:not(#th-tool[data-own] *)){right:14px;top:50%;transform:translateY(-50%)}
html.lbx-on:where(:not(#th-tool[data-own] *)){overflow:hidden}
@keyframes lbx-in{from{opacity:0}to{opacity:1}}
@media (width <= 768px){.lbx:where(:not(#th-tool[data-own] *)){padding:60px 8px 24px}.lbx-p:where(:not(#th-tool[data-own] *)),.lbx-n:where(:not(#th-tool[data-own] *)){top:auto;bottom:14px;transform:none}.lbx img:where(:not(#th-tool[data-own] *)){max-height:calc(100vh - 170px)}}
@media (prefers-reduced-motion:reduce){.lbx:where(:not(#th-tool[data-own] *)){animation:none}}
/* 1.29.23 — "More tools like this" sits in the same 1040px column as the cards above, inside a soft panel
   like "Rate & share" and "Your ideas"; "Your tools" lives inside the panel; cards always fill the row */
.rel-zone:where(:not(#th-tool[data-own] *)){max-width:calc(1040px + 64px)}
.rel-zone .rel-in:where(:not(#th-tool[data-own] *)){padding:28px 30px 26px;border-radius:26px;border:1px solid var(--line);background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 5%,var(--surface)),var(--surface) 70%);box-shadow:var(--shadow)}
.rel-zone .rz-head h2:where(:not(#th-tool[data-own] *)){font-size:22px;font-weight:720;letter-spacing:-.02em}
.rel-zone .rz-grid:where(:not(#th-tool[data-own] *)){grid-template-columns:repeat(3,minmax(0,1fr))}
.rel-zone .rz-grid:has(>:only-child):where(:not(#th-tool[data-own] *)){grid-template-columns:minmax(0,1fr)}
.rel-zone .rz-grid:has(>:nth-child(2):last-child):where(:not(#th-tool[data-own] *)){grid-template-columns:repeat(2,minmax(0,1fr))}
.rel-zone .recent-zone:where(:not(#th-tool[data-own] *)){margin-top:20px;padding-top:16px;border-top:1px dashed var(--line)}
.rel-zone .recent-zone[hidden]:where(:not(#th-tool[data-own] *)){display:none}
@media (width <= 768px){.rel-zone .rel-in:where(:not(#th-tool[data-own] *)){padding:22px 16px 18px;border-radius:22px}.rel-zone .rz-grid:where(:not(#th-tool[data-own] *)),.rel-zone .rz-grid:has(>:nth-child(2):last-child):where(:not(#th-tool[data-own] *)){grid-template-columns:minmax(0,1fr)}}
/* 1.29.25 — Case Converter (module case-converter): 8 case buttons, each written in its own style; options drawer */




















/* 1.29.26 — Case Converter: Undo · Clear · Reset sit on the right of "Applies to", right above the case buttons */





/* 1.29.26 — Sources card under every tool guide (th_sources_card): numbered list, site name, Official source badge */
.th-srcs:where(:not(#th-tool[data-own] *)){margin:32px 0 8px;padding:20px 22px 18px;border:1px solid var(--line);border-radius:20px;background:var(--surface)}
.th-srcs-k:where(:not(#th-tool[data-own] *)){display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.th-srcs-k svg:where(:not(#th-tool[data-own] *)){color:var(--brand-ink)}
.th-srcs ol:where(:not(#th-tool[data-own] *)){list-style:none;counter-reset:src;margin:0;padding:0;display:grid;gap:10px}
.th-srcs li:where(:not(#th-tool[data-own] *)){counter-increment:src;position:relative;padding-left:34px;font-size:14.5px;line-height:1.5}
.th-srcs li:where(:not(#th-tool[data-own] *))::before{content:counter(src);position:absolute;left:0;top:1px;display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:var(--surface-2);border:1px solid var(--line);font:600 12px var(--mono);color:var(--muted)}
.th-srcs li a:where(:not(#th-tool[data-own] *)){font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--brand) 35%,transparent)}
.th-srcs li a:hover:where(:not(#th-tool[data-own] *)){color:var(--brand-ink);border-bottom-color:currentColor}
.th-srcs li a:where(:not(#th-tool[data-own] *))::after{content:" \2197";font-size:12px;color:var(--muted)}
.th-srcs-d:where(:not(#th-tool[data-own] *)){margin-left:8px;font-size:13px;color:var(--muted)}
.th-srcs-b:where(:not(#th-tool[data-own] *)){display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--brand-ink);background:color-mix(in srgb,var(--brand) 12%,var(--surface));vertical-align:1px}

@media (width <= 768px){.th-srcs:where(:not(#th-tool[data-own] *)){padding:16px 16px 14px;border-radius:16px}.th-srcs-d:where(:not(#th-tool[data-own] *)){display:block;margin-left:0}.th-srcs-b:where(:not(#th-tool[data-own] *)){margin-left:0;margin-top:4px}}
@media print{.th-srcs li a:where(:not(#th-tool[data-own] *))::after{content:" (" attr(href) ")"}}
/* 1.29.29 — universal top row: a tool without voice typing has Upload file alone on the first row, so on desktop it joins
   the second row, in the middle: Copy · .txt · PDF  |  Upload file  |  Save draft (one row less above the text box). */

/* 1.29.31 — the Sources card is as wide as the article text above it (it sits outside .entry) */
.guide .th-srcs:where(:not(#th-tool[data-own] *)){max-width:760px}
@media print{.g-toc:where(:not(#th-tool[data-own] *)),.lbx:where(:not(#th-tool[data-own] *)){display:none!important}}

/* ===== v1.29.12 word counter v5 (one tool = one job): 5 counts + selected-text counts ===== */























/* ===== v1.29.19 word & character counter: target switch + responsive top row ===== */















/* ===== v1.29.20 word & character counter: letters line + "How we count" ===== */










/* ===== v1.31: pair converter pages (Celsius to Fahrenheit, KG to Pounds …) — simpler layout, SAME font sizes as every other tool =====
   Owner rule (v1.31.1): the font sizes of the Word Counter, Case Converter and KM to Miles are the standard — never bigger. */






























.th-u:where(:not(#th-tool[data-own] *)){font-size:12.5px;font-weight:700;color:var(--muted)}















/* v1.32 Slug Generator (Core 1.48) — standard font sizes, same look as the other tools */
















.sg .btn.done:where(:not(#th-tool[data-own] *)){background:var(--ok);border-color:transparent;color:#fff}





.sg:where(:not(#th-tool[data-own] *)){--sg-ok:#15803d;--sg-tip:#b45309}
:root[data-theme="dark"] .sg:where(:not(#th-tool[data-own] *)){--sg-ok:#4ade80;--sg-tip:#fbbf24}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sg:where(:not(#th-tool[data-own] *)){--sg-ok:#4ade80;--sg-tip:#fbbf24}}


.sg-set-top .btn:where(:not(#th-tool[data-own] *)){flex:none}




























/* v1.32.3 more breathing room (owner: sections felt crowded) */
.tool.sg:where(:not(#th-tool[data-own] *)){gap:var(--gap-section)}




 /* tablets: the answer box stacks, text starts on the left */








 /* phone spacing comes from the tokens */

/* ===== v1.33 building blocks for every new tool (use these instead of new numbers) =====
   .t-stack   parts that sit under each other (input → result → check)
   .t-sec     a new part with a dashed line above it, .t-sec-top/.t-sec-h/.t-sec-sub for its heading
   .t-grid    boxes side by side (3 → 2 → 1 columns; set --cols for another count)
   .t-box     a bordered box (fieldset or div); its <legend>/.t-box-h is the box title
   .t-choices + .t-choice   big tappable choice cards (radio or checkbox inside a <label>)
   .t-hint    the small grey line under a box */

.t-sec:where(:not(#th-tool[data-own] *)){display:flex;flex-direction:column;gap:var(--gap-block);border-top:1px dashed var(--line);padding-top:var(--sec-pad);margin-top:var(--gap-label)}
/* v1.46 (2026-10-11, "010 Meta Title & Description Checker" round 11; owner: boxes must be spaced the same in every tool + the main parts in their own colour). ADDS ONLY.
   THE SPACING LADDER (check it with claude/tools/thladder.js): label to its box 6 (--gap-label) · things that belong together 12 (--gap-item, --gap-msg: field, its buttons, its message; a box title to its first part)
   · parts of one result 16 (--gap-grid) · box to box, part to part, both sides of a divider line 20 (--gap-block) · inside every bordered box 16 (--pad-box).
   .t-bx = a .t-box whose title sits exactly --gap-item above its first part (the plain .t-box adds a 12 px margin AND a 12 px gap = 24) and is a little bigger;
   .t-bx-b = the parts inside a .t-bx, --gap-block apart; .t-bx-res = a result under a dashed line (the same space above and below the line);
   .t-tone + .t-tone-0 to .t-tone-5 = a box in one of the six site accent colours (--acc0 purple, 1 blue, 2 teal, 3 amber, 4 pink, 5 green; they have dark variants) */
.t-bx>legend:where(:not(#th-tool[data-own] *)){margin-bottom:0;font-size:var(--fs-body);font-weight:700}











.t-hint:where(:not(#th-tool[data-own] *)){display:block;margin-top:var(--gap-label);font-size:var(--fs-label);color:var(--muted)}
/* ===== v1.40 spacing system (owner rule 2026-09-30: "nothing may sit on top of its neighbour") =====
   .t-q     one question: its box(es), the hint line and the message, each --gap-msg apart (12 px)
   .t-msg   THE message box for every tool (.is-err / .is-ok / .is-info; default = a warning). It never has its own
            margin — the space above it always comes from the stack it sits in (.t-q / .t-stack / .t-box).
   .t-tw + .t-table   THE table for every tool: rounded frame, 10×14 cells, grey header, numbers line up
   .t-list  a list of rows (milestones, steps, results): each row a soft card, --gap-min apart
   Rules: never a negative margin inside a tool; never less than --gap-min (8 px) between two boxes, buttons or
   messages; run the spacing check (claude/tools/thspace.js) before a tool is called done. */
.t-q:not([hidden]):where(:not(#th-tool[data-own] *)){display:flex;flex-direction:column;gap:var(--gap-msg)}
.t-msg:where(:not(#th-tool[data-own] *)){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-ok:where(:not(#th-tool[data-own] *)){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(:not(#th-tool[data-own] *)){color:var(--ink);background:var(--brand-soft);border-color:color-mix(in srgb,var(--brand) 25%,var(--line))}
.t-msg[hidden]:where(:not(#th-tool[data-own] *)){display:none}
/* dark mode: message text kept the light-theme colours (about 2.6:1 on the dark box); lighten them so they read at 8:1 (tool 012) */
:root[data-theme="dark"] .t-msg:where(:not(#th-tool[data-own] *)){color:color-mix(in srgb,var(--warn) 40%,#fff)}

:root[data-theme="dark"] .t-msg.is-ok:where(:not(#th-tool[data-own] *)){color:color-mix(in srgb,var(--ok,#1e8e5a) 40%,#fff)}
:root[data-theme="dark"] .t-msg.is-info:where(:not(#th-tool[data-own] *)){color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .t-msg:where(:not(#th-tool[data-own] *)){color:color-mix(in srgb,var(--warn) 40%,#fff)}:root:not([data-theme="light"]) .t-msg.is-ok:where(:not(#th-tool[data-own] *)){color:color-mix(in srgb,var(--ok,#1e8e5a) 40%,#fff)}:root:not([data-theme="light"]) .t-msg.is-info:where(:not(#th-tool[data-own] *)){color:var(--ink)}}









/* v1.34: the Slug Generator's small list buttons (chips) use the site's second-button look */
.sg .chip:where(:not(#th-tool[data-own] *)){border-color:var(--btn2-border);box-shadow:0 1px 2px rgba(11,16,32,.04);transition:border-color .3s ease,background-color .3s ease,box-shadow .3s ease}
.sg .chip:hover:where(:not(#th-tool[data-own] *)){background:var(--btn2-bg-hover);border-color:var(--btn2-border-hover);box-shadow:var(--btn2-shade)}

/* v1.35 (owner rule 2026-09-30): the MAIN typing box of every tool (the single-line box where the user types first,
   class input.inp.big — dropdowns keep their normal look) is as tall as the homepage search box and wears the brand gradient ring, so nobody has to look for
   where to type — on phones and computers alike. Height and radius come from --h-main / --r-main (theme.css).
   min-height stops the box from ever being squeezed thin in a flex layout (the Slug Generator box was 28 px on phones). */
input.inp.big:where(:not(#th-tool[data-own] *)){height:var(--h-main);min-height:var(--h-main);border-radius:var(--r-main);border:2px solid transparent;padding:0 20px;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--field-ring) border-box;
  box-shadow:var(--field-glow);transition:box-shadow .3s ease}
input.inp.big:hover:where(:not(#th-tool[data-own] *)){box-shadow:var(--field-glow-hover)}
input.inp.big:focus:where(:not(#th-tool[data-own] *)){border-color:transparent;box-shadow:var(--field-glow-hover),0 0 0 4px color-mix(in srgb,var(--ai) 20%,transparent)}
/* rule 119: placeholders are a quiet hint, never look typed: smaller, lighter, normal weight (all tool pages; the home page has no .tool) */ .tool :is(input,textarea):where(:not(#th-tool[data-own] *))::placeholder{color:color-mix(in srgb,var(--muted) 70%,transparent);opacity:1;font-weight:400;font-size:max(12px,.875em);letter-spacing:0}




/* Slug Generator: the box grows sideways only; Paste / Clear sit centred beside it (desktop) or under it (phones) */




/* v1.36 (owner 2026-09-30): the action bar under every tool (favorites, share, embed, phone, print, stars) redesigned.
   Computer: one pill with soft icon buttons. Tablet + phone: a card with equal tiles (icon on top, word below —
   nothing is hidden, so an older visitor still reads what each button does) and the stars centred underneath.
   Fixes the phone bug where the Embed button showed as an empty sliver (its "</>" mark was hidden with the labels). */
.tool-zone .tool-actions:where(:not(#th-tool[data-own] *)){padding:6px;gap:4px 10px;border:1px solid color-mix(in srgb,var(--brand) 16%,var(--line));
  background:var(--surface); /* no backdrop-filter: it would trap the fixed Share pop-up on phones */
  box-shadow:0 12px 32px -16px color-mix(in srgb,var(--ai) 45%,transparent),var(--shadow)}
.tool-zone .ta-left:where(:not(#th-tool[data-own] *)){gap:2px}
.tool-zone .ta-left :is(.ta-left>.btn,.share-wrap>.btn):where(:not(#th-tool[data-own] *)){gap:7px;padding:0 14px;border-color:transparent;background:transparent;box-shadow:none;color:var(--ink);font-weight:600}
.tool-zone .ta-left :is(.ta-left>.btn,.share-wrap>.btn) svg:where(:not(#th-tool[data-own] *)),.tool-zone .tool-actions .ta-code:where(:not(#th-tool[data-own] *)){color:var(--brand-ink)}
.tool-zone .ta-left :is(.ta-left>.btn,.share-wrap>.btn):hover:where(:not(#th-tool[data-own] *)),.tool-zone .ta-left :is(.ta-left>.btn,.share-wrap>.btn):focus-visible:where(:not(#th-tool[data-own] *)){background:var(--brand-soft);border-color:transparent;box-shadow:none}
.tool-zone .ta-left :is(.ta-left>.btn,.share-wrap>.btn)[aria-expanded="true"]:where(:not(#th-tool[data-own] *)){background:var(--brand-soft)}
.tool-zone .ta-right:where(:not(#th-tool[data-own] *)){border-left-color:color-mix(in srgb,var(--brand) 16%,var(--line))}
@media (width <= 1024px){
  .tool-zone .tool-actions:where(:not(#th-tool[data-own] *)){display:flex;flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:10px;width:100%;max-width:560px;margin:16px auto 0;padding:10px;border-radius:20px}
  .tool-zone .ta-left:where(:not(#th-tool[data-own] *)){display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;width:100%}
  .tool-zone .ta-left>*:where(:not(#th-tool[data-own] *)){align-self:stretch}
  .tool-zone .ta-left .share-wrap:where(:not(#th-tool[data-own] *)){display:flex;min-width:0}
  .tool-zone .ta-left :is(.ta-left>.btn,.share-wrap>.btn):where(:not(#th-tool[data-own] *)){width:100%;height:auto;min-height:66px;flex-direction:column;justify-content:center;gap:5px;padding:9px 4px 8px;border-radius:14px;
    background:color-mix(in srgb,var(--brand) 5%,var(--surface));border:1px solid color-mix(in srgb,var(--brand) 13%,var(--line));
    font-size:12.5px;line-height:1.2;text-align:center;white-space:normal;height:100%}
  .tool-zone .ta-left :is(.ta-left>.btn,.share-wrap>.btn) span:where(:not(#th-tool[data-own] *)){display:block}
  .tool-zone .ta-left :is(.ta-left>.btn,.share-wrap>.btn) svg:where(:not(#th-tool[data-own] *)){width:20px;height:20px;flex-shrink:0}
  .tool-zone .tool-actions .ta-code:where(:not(#th-tool[data-own] *)){font-size:14px;line-height:20px}
  .tool-zone .ta-right:where(:not(#th-tool[data-own] *)){justify-content:center;gap:10px;padding:10px 0 2px;border-left:0;border-top:1px dashed var(--line)}
  .tool-zone .ta-right .stars button svg:where(:not(#th-tool[data-own] *)){width:26px;height:26px}}
@media (width <= 576px){.tool-zone .share-pop:where(:not(#th-tool[data-own] *)){max-height:calc(100dvh - 110px);overflow-y:auto;overscroll-behavior:contain}}

/* v1.37 ToolHa type standard (tokens in theme.css): tool title, section titles and big results no bigger than the
   standard; small notes, units and pins never below --fs-min / --fs-tag. */
.thead h1:where(:not(#th-tool[data-own] *)),.tool-zone .thead h1:where(:not(#th-tool[data-own] *)){font-size:var(--fs-h1)}
.g-title:where(:not(#th-tool[data-own] *)),.how h2:where(:not(#th-tool[data-own] *)),.cv-zone h2:where(:not(#th-tool[data-own] *)){font-size:var(--fs-h2)}
.presets .chip small:where(:not(#th-tool[data-own] *)){font-size:max(var(--fs-min),.86em)}
.rl small:where(:not(#th-tool[data-own] *)),.g-toc-h small:where(:not(#th-tool[data-own] *)){font-size:var(--fs-min)}
.th-srcs-b:where(:not(#th-tool[data-own] *)){font-size:var(--fs-tag)}
.entry .th-n:where(:not(#th-tool[data-own] *)){height:24px}
.entry .th-n b:where(:not(#th-tool[data-own] *)){min-width:19px;height:19px;font-size:var(--fs-tag)}
.entry td:first-child .th-n b:where(:not(#th-tool[data-own] *)){min-width:20px;height:20px;font-size:var(--fs-tag)}
.lbx figcaption .th-n b:where(:not(#th-tool[data-own] *)){min-width:18px;height:18px;font-size:var(--fs-tag)}




/* v1.37.2 (owner 2026-09-30): the soft brand glow of the action bar is now the ONE card shadow for the big cards
   around a tool and in its guide — article pictures, tables, "On this page", Sources, Rate/Share, Your ideas,
   More tools like this. Static shadow only (no animation, no filter, no JS): painted once, so it does not slow the page.
   FAQ items and tip boxes stay flat on purpose, so the page does not glow everywhere. */
:root:where(:not(#th-tool[data-own] *)){--glow-card:0 16px 36px -20px color-mix(in srgb,var(--ai) 50%,transparent),0 1px 2px rgba(11,16,32,.04)}
.rs-card:where(:not(#th-tool[data-own] *)),.hi-card:where(:not(#th-tool[data-own] *)),.rel-zone .rel-in:where(:not(#th-tool[data-own] *)),.g-toc:where(:not(#th-tool[data-own] *)),.th-srcs:where(:not(#th-tool[data-own] *)),.entry figure.wp-block-table:where(:not(#th-tool[data-own] *)),.entry figure.wp-block-image img:where(:not(#th-tool[data-own] *)),.entry .wp-block-image>figure img:where(:not(#th-tool[data-own] *)){box-shadow:var(--glow-card);border-color:color-mix(in srgb,var(--brand) 14%,var(--line))}

/* v1.37.3 (owner 2026-09-30): more air around guide pictures and table buttons, and a lighter caption.
   Picture → next text 30 px (phones 24), caption 12 px under the picture at the smallest standard size, balanced lines,
   caption pins a size smaller; "Download CSV / Print table" sit 12 px under the table with 26 px (phones 22) before the next block. */
.entry figure.wp-block-image:where(:not(#th-tool[data-own] *)),.entry .wp-block-image>figure:where(:not(#th-tool[data-own] *)){margin-bottom:30px}
.entry figure.wp-block-image figcaption:where(:not(#th-tool[data-own] *)),.entry .wp-block-image>figure figcaption:where(:not(#th-tool[data-own] *)){margin:12px auto 0;max-width:680px;font-size:var(--fs-min);line-height:1.6;letter-spacing:.005em;text-wrap:balance}
.entry figcaption .th-n:where(:not(#th-tool[data-own] *)){height:20px;margin:0 2px}
.entry figcaption .th-n b:where(:not(#th-tool[data-own] *)){min-width:17px;height:17px}
.tbl-tools:where(:not(#th-tool[data-own] *)){margin:12px 0 26px}
@media (width <= 768px){.entry figure.wp-block-image:where(:not(#th-tool[data-own] *)),.entry .wp-block-image>figure:where(:not(#th-tool[data-own] *)){margin-bottom:24px}.tbl-tools:where(:not(#th-tool[data-own] *)){margin-bottom:22px}}
/* v1.37 converters: "Quick values" row in a standard order — label left, Rounding + Reset right, all quick-value
   chips on their own full-width line underneath (phones: label, chips, then the controls). Chips wrap, never scroll. */






/* rule 151 (003, 2026-10-19): between 521 and ~760 px the grid column for the controls (Rounding + Degrees + Reset, 577 px on Celsius) was wider than the tool box and stuck out by up to 129 px. From 521 px up the bar is a wrapping flex row: the controls drop under the label when they do not fit and wrap inside themselves. Same picture as before when everything fits. */



/* v1.38.0 HD pictures: <picture> adds no box of its own */
.entry picture.th-hd:where(:not(#th-tool[data-own] *)){display:contents}

/* v1.38.2 converters on phones (owner 2026-09-30): From and To one under the other, so unit names are never cut off
   ("Kilometers (km)", "Nautical miles (nmi)"), and the "5 mi = 8.0467 km" button sits under Copy result instead of
   running past the edge of the answer box */
@container tool (width <= 22.5rem){
  #th-tool .result .acts:where(:not(#th-tool[data-own] *)){grid-template-columns:minmax(0,1fr);justify-items:stretch}
  #th-tool .result .acts>*:where(:not(#th-tool[data-own] *)){width:100%;min-width:0}}

/* ===== v1.39.1 Buttons: one standard height (owner rule 2026-09-30). A normal button is --h-btn (44 px), a small
   toolbar button (.btn.sm) is --h-btn-sm (36 px). A button that must fill the width gets .btn-block — never a custom
   height. The guard below stops any button inside a tool from growing taller than the standard. ===== */

/* v1.45.20: the max-height guard that was here is gone; buttons grow with a wrapped label (global rule in theme.css, v1.41 layer). */

/* ===== v1.39.0 Age Calculator (Core 1.49, module age-calculator) — owner 2026-09-30: easy enough for a child who just
   learned the internet and for someone aged 90. One question at a time, the month as a word, standard boxes and one
   standard button; standard font sizes (v1.37 tokens), building blocks from v1.33.
   v1.39.1: the button is the standard .btn height (no custom height — see "Buttons" in theme.css v1.39.1); the extra
   answers are plain boxes with an (i) tip instead of folding sections; no February 29 choice box. ===== */
#th-tool.ag:where(:not(#th-tool[data-own] *)){display:flex;flex-direction:column;gap:var(--gap-block)}

 /* v1.39.2: the two questions are the page's headlines */
 /* v1.39.2: Year · Month · Day */


/* the date boxes are the tool's MAIN typing boxes: the same height, ring and text size as every tool's main box (v1.35) */











/* Age Calculator, year + month only (round 7): no Day box, time or weekday; Year and Month share a row, on small boxes they stack */



 /* v1.40.3: its own box under the answer (t-box) */





















@keyframes agpop{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ai) 45%,transparent)}100%{box-shadow:0 0 0 14px transparent}}

/* the answer boxes: title + (i) tip, always open */







 /* v1.40.4: both boxes end on the same line */



.ag-i:where(:not(#th-tool[data-own] *)){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(:not(#th-tool[data-own] *)),.ag-i[aria-expanded="true"]:where(:not(#th-tool[data-own] *)){background:var(--brand);border-color:var(--brand);color:#fff}
.ag-i:focus-visible:where(:not(#th-tool[data-own] *)){outline:2px solid var(--ai);outline-offset:2px}






































 /* round numbers: two columns on wide screens */













/* v1.40 Month / Day grid under the box (computers) */








/* v1.40.1 the weekday of the birth date — a small calendar page + "You were born on a Wednesday" (read-only) */



@keyframes agwd{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}









/* v1.40.2 "How we count": a plain line with the (i) icon — no box, no arrow; the whole line opens it (owner) */
.ag-how>summary:where(:not(#th-tool[data-own] *)){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(:not(#th-tool[data-own] *))::-webkit-details-marker{display:none}
.ag-sum-w:where(:not(#th-tool[data-own] *)){display:inline-flex;align-items:center;gap:10px} /* the tip sits over the icon and the words, not the middle of the line */
.ag-how>summary:hover .ag-sum-t:where(:not(#th-tool[data-own] *)){color:var(--brand-ink);text-decoration:underline;text-underline-offset:3px}
.ag-how>summary:hover .ag-i:where(:not(#th-tool[data-own] *)),.ag-how[open]>summary .ag-i:where(:not(#th-tool[data-own] *)){background:var(--brand);border-color:var(--brand);color:#fff}
.ag-how>summary:focus-visible:where(:not(#th-tool[data-own] *)){outline:2px solid var(--ai);outline-offset:2px}
.ag-how .ag-howt:where(:not(#th-tool[data-own] *)){margin-top:var(--gap-label);padding:var(--pad-field);border-radius:var(--r-card);background:var(--surface-2)}





.ag-howt:where(:not(#th-tool[data-own] *)){margin-top:10px;display:grid;gap:8px;font-size:var(--fs-sm);line-height:var(--lh-text);color:var(--ink)}
.ag-howt p:where(:not(#th-tool[data-own] *)){margin:0}








@media print{.ag-i:where(:not(#th-tool[data-own] *)){display:none!important}}
/* v1.39.3 (owner): two tabs at the top — "One person" (the default) and "A group of people" — so each tab shows only its own
   boxes. The site's segmented switch (.uc-dir, the same as the Slug Generator's "One title / Many titles at once"). */







/* v1.45.6 author photo next to the guide byline */
.g-avatar:where(:not(#th-tool[data-own] *)){display:inline-block;width:28px;height:28px;border-radius:50%;object-fit:cover;vertical-align:middle;margin:-3px 8px 0 0;box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--line)}

/* ===== Case Converter extras (2026-10-05, chat 2.3; moved here from the old module file case-converter.css, which is gone):
   the "Kept as written" line under the result, the "Special words" card and the small (?) help marks.
   Their phone rules are in the universal responsive system below, part C. ===== */






















@keyframes ccflash{0%{box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 50%,transparent)}100%{box-shadow:0 0 0 0 transparent}}



/* ===================== UNIVERSAL RESPONSIVE SYSTEM (owner 2026-10-05, chat 2.3) =====================
   The ONE place for every phone / tablet / desktop layout rule of the tools (pages outside the tools: the matching
   block at the end of theme.css). Full standard: claude/toolha-responsive-system.md. In short:
   1. Every responsive rule lives here. A tool never gets its own CSS file for responsive rules (no per-tool files).
   2. Shared parts get ONE rule that covers every tool, old and new (part A); repeated layouts are shared patterns a tool
      switches on with a class (part B).
   3. When something breaks on a screen size, fix the shared rule here (or turn the layout into a shared part):
      never a one-off patch inside one tool.
   4. Only a layout that exists in one tool alone gets a rule in part C, named after the tool.
   5. Every change: claude/tools/thresponsive.js = 0 on all pages at 320–1920 px, light + dark, every fold open, every
      tool state; a before/after layout comparison shows changes only where intended; a 320 px screenshot is checked. */

/* ---- A. Shared parts: one rule each, every tool ----
   nothing inside a tool may be wider than its card: fields, inputs, chips and chip rows may shrink;
   never less than 8 px between two buttons or chips (design DNA spacing rule) */
.tool .field:where(:not(#th-tool[data-own] *)){min-width:0}
:where(.tool) :is(input,select,textarea):where(:not(#th-tool[data-own] *)){max-width:100%}
.presets:where(:not(#th-tool[data-own] *)){gap:8px}
/* history ("Recent") and other chips: a very long chip shrinks to the row instead of pushing out of the card */
.tool .chip:where(:not(#th-tool[data-own] *)){max-width:100%}
.tool .hist .row:where(:not(#th-tool[data-own] *)){min-width:0;max-width:100%}
.tool .hist .chip:where(:not(#th-tool[data-own] *)){min-width:0;overflow:hidden}
/* segmented tabs (.uc-dir with 2–3 choices: the converters' direction switch, the Slug Generator's mode, the Age
   Calculator's "One person / A group of people", …): when the pill no longer fits a phone, the tabs shrink and their words
   go to a second line, instead of a cut-off tab that has to be swiped; on small phones a tab that has words drops its
   little picture. While the pill fits, nothing changes. (A switch with 4 or more choices keeps its own wrapping layout.) */


/* every select box (.inp, .inp.big, .inp.sm) on small phones: the arrow moves closer to the edge, so the words get the
   room ("Month / Day / Year (USA)" fits at 320 px). The text stays 16 px: smaller text makes phones zoom in. */
@container tool (width <= 22.5rem){
  select.inp:where(:not(#th-tool[data-own] *)){padding-right:26px;background-position:calc(100% - 13px) 20px,calc(100% - 8px) 20px}
  select.inp.big:where(:not(#th-tool[data-own] *)){background-position:calc(100% - 13px) 26px,calc(100% - 8px) 26px}
  select.inp.sm:where(:not(#th-tool[data-own] *)){padding-right:28px;background-position:calc(100% - 14px) 16px,calc(100% - 9px) 16px}}
@container tool (width <= 22.5rem){select.inp:where(:not(.sm)):where(:not(#th-tool[data-own] *)){padding-left:10px;padding-right:24px}}

/* one-row button group (rules 50 + 52): the pattern of the Slug Generator (.sg-lgrid) and the Age Calculator (.ag-tbar), made a shared
   class for its third user (Link Preview Checker round 1, 2026-10-07). The buttons that belong to one box sit under it as ONE row at
   every width: they share the row and their words wrap (the button grows, rule 52), no word is cut (min-width:min-content).
   .t-btnrow-nat: from 641 px the buttons keep their natural width instead of filling the row. */
#th-tool .t-btnrow:where(:not(#th-tool[data-own] *)){display:flex;flex-wrap:nowrap;align-items:stretch;gap:8px;margin:0}
#th-tool .t-btnrow>.btn:where(:not(#th-tool[data-own] *)){flex:1 1 auto;min-width:min-content;justify-content:center;text-align:center;white-space:normal}
#th-tool .t-btnrow>label.btn:where(:not(#th-tool[data-own] *)){font-size:14px;font-weight:650;color:var(--ink)}

@container tool (width <= 22.5rem){#th-tool .t-btnrow>.btn.sm:where(:not(#th-tool[data-own] *)){padding-left:8px;padding-right:8px;gap:6px}}
#th-tool .t-acts>.btn-brand:where(:not(#th-tool[data-own] *)){align-self:flex-start;flex:0 0 auto;width:auto;max-width:100%}
@container tool (width <= 22.5rem){#th-tool .t-acts>.btn-brand:where(:not(#th-tool[data-own] *)){align-self:stretch;width:100%}}


/* .t-btnrow arranges itself (rule 101, owner 2026-10-11; rule 104 the same day: 2-button case + 3-button limit 480 px):
   by how many buttons it holds and how wide the ROW is (measured on the row, no @media, no extra class; it also wins over
   .t-btnrow-pairs, so a tool never picks the class by hand).
   1 button: as before. 2 buttons: one row while both labels fit on one line, otherwise each button on its own full-width
   line (no two-line labels squeezed side by side). 3 buttons: one row while the row is 480 px or wider, narrower = every
   button on its own full-width line (never 2 + 1, rule 50). 4 buttons: two by two below 600 px (the .t-btnrow-pairs look).
   5 or more: one row from 600 px, narrower = one full-width line each. With .t-btnrow-nat (from 641 px) the one-row buttons
   keep their natural width. */
#th-tool .t-btnrow:has(>.btn~.btn):not(:has(>.btn~.btn~.btn)):where(:not(#th-tool[data-own] *)){flex-wrap:wrap}
#th-tool .t-btnrow:has(>.btn~.btn):not(:has(>.btn~.btn~.btn))>.btn:where(:not(#th-tool[data-own] *)){flex:1 1 max-content;max-width:none}

#th-tool .t-btnrow:has(>.btn~.btn~.btn):where(:not(#th-tool[data-own] *)){flex-wrap:wrap}
#th-tool .t-btnrow:has(>.btn~.btn~.btn)>.btn:where(:not(#th-tool[data-own] *)){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(:not(#th-tool[data-own] *)){min-width:min(100%,max(0px,calc((600px - 100%) * 999)))}

#th-tool .t-btnrow:has(>.btn~.btn~.btn~.btn):not(:has(>.btn~.btn~.btn~.btn~.btn))>.btn:where(:not(#th-tool[data-own] *)){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))}
/* Rule 106 (owner 2026-10-11): common.js gives .t-stack to a row of 3+ buttons that sits on one line while a label breaks
   onto two lines; then every button takes its own full-width line. Measured on the row, so no px limit has to change when a
   tool has longer labels. !important: it must win over the -pairs / -nat / button-count rules above. */

/* Rule 145 (b, owner 2026-10-17): a button group that would leave ONE button alone on its last line is balanced by common.js
   (.t-bal + --bal-w = equal cells, c per line: 6 -> 3 + 3, 5 -> 3 + 2); never set by hand, never on toolbars. */

/* Rule 130 (owner 2026-10-15): smart icons. common.js gives .t-noicon to a button (and to every button sharing its parent)
   only when the icon is what pushes its label onto a second line or out of the button; measured on the button, never by
   screen width. Tools never write their own icon-hiding CSS. */

/* Rule 136 (owner 2026-10-16, after the Photo Editor start screen): (a) the icon inside every normal button is 18 px
   (.btn.sm keeps its own small icon); (b) 1-2 helper buttons in a wide row keep their own width and sit in the middle
   (common.js gives the row .t-nat from 641 px, measured on the row); .t-btnrow-fill keeps the old full-width look on purpose. */
#th-tool .btn:not(.sm)>svg:where(:not(#th-tool[data-own] *)){width:18px!important;height:18px!important}
/* Rule 147 (owner 2026-10-17, from "005."): a button icon never shrinks (small toolbar buttons too). When a row is too narrow the
   label would overflow instead, and the rule 130 watcher in common.js hides the icons of that group, so the label stays readable. */
#th-tool .btn>svg:where(:not(#th-tool[data-own] *)){flex:none}


/* ---- C. One-tool layouts (only where no shared part fits) ---- */
/* converters' running pace: on phones Distance, Time and the results each get the full width */

/* Age Calculator date row: the Day box never cuts "Day", the Month box never cuts "September" */


/* Case Converter: bigger chips on phones; the two word boxes one under the other; "Applies to" and Undo · Clear · Reset
   always on their own lines up to 480 px (they never fit side by side there, so nothing jumps when the text changes) */


/* Slug Generator, many titles: the buttons are in two groups, each under its own box (titles: Paste · Upload · Clear; slugs:
   Copy all · Download). A group is ONE row at every width: its buttons share the row and their words wrap, so no button is
   ever alone on a second row. From 641 px the two boxes and the two button rows line up (subgrid). */


/* the "Upload a list" button is a <label>: inside the two boxes' fields it must not take the small grey field-label look */


/* Age Calculator, group tab: the buttons are in two groups, each under its own box (list: Paste list · Upload a list · Clear, with the
   sample line; result: Copy results · Download the ages (.csv), with the file note). A group is ONE row at every width: its buttons
   share the row and their words wrap, so no button is ever alone on a second row. */





/* a label may wrap to 2 lines and the button grows with the site padding (theme.css v1.45.20); no word is ever cut (min-width:min-content) */

/* the "Upload a list" button is a <label>: it keeps the button font (14 px, 650, ink) wherever it sits */



/* group tab, 641-760 px: the settings column (date format select) is only about 217 px wide and cut "Month / Day / Year (USA)"; the two columns stack until 760 px */
/* Link Preview Checker (rule 43, round 1 2026-10-07): the width rules that lived in link-preview.css, same values, with the
   #th-tool.lp prefix (this file loads before the module file, so the prefix keeps them winning over its base rules, as before) */



/* the four tabs need about 660 px in one row (at 641 px the last tab stuck out 19 px, found in round 1): 2 x 2 up to 680 px */


/* Many links (rule 30): the two "how do you want to add your links" tiles sit under each other on phones */



/* rule 153 (owner 2026-10-19): a next step after a result: one quiet line + one button that opens the tool for the natural
   next job (first: HEIC to JPG → Photo Editor). Only after a result, never a pop-up, at most one per result. */




/* owner 2026-10-21 ("014. HEIC to JPG"): .t-next-card = the rule 153 next step as a small card (adds only, rule 62): the visitor's
   own result pictures with a pencil badge, a kicker, a Title Case line, what the next tool does, small chips, true trust ticks and
   one brand button. Same limits as rule 153: only after a result, inside the result box, never a pop-up, no autoplay. */

#th-tool .t-next-art:where(:not(#th-tool[data-own] *)){position:relative;flex:none;width:118px;height:92px}
#th-tool .t-next-ph:where(:not(#th-tool[data-own] *)){position:absolute;inset:0}
#th-tool .t-next-ph img:where(:not(#th-tool[data-own] *)){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(:not(#th-tool[data-own] *)){left:0;top:18px;transform:rotate(-7deg)}
#th-tool .t-next-ph img:last-child:where(:not(#th-tool[data-own] *)){left:30px;top:6px;transform:rotate(5deg)}
#th-tool .t-next-go .btn:where(:not(#th-tool[data-own] *)){width:100%;justify-content:center}

/* ===== ToolHa Layout System v1 (rule 154, 2026-10-19; full standard: claude/toolha-layout-system.md) =====
   Layout follows the TOOL BOX, never the screen. The tool box is a size container named "tool".
   The only four size steps (tool box inner width): 22.5rem (360) · 36rem (576) · 48rem (768) · 64rem (1024).
   Tools build their layout ONLY from these blocks; module CSS has no @media width rules. */
#th-tool:where(:not(#th-tool[data-own] *)){container:tool/inline-size}
/* 1. Stack: parts one under the other */


/* 2. Row: items side by side, wrap to the next line when there is no room */


/* 3. Grid: as many equal columns as fit, each at least --l-min wide */



/* 4. Split: ALL side by side while the box is at least --l-at wide, else ALL stacked (never 2 + 1) */


/* 5. Side: a narrow side part + a main part; the side drops under / over when the main part would get too narrow */




/* 6. Panes: two equal working panes (input | output) from 48rem, stacked below */


/* 7. Field: a label over its control; the control is never wider than the field */


/* 8. Scroll: the ONLY allowed sideways scroll (a toolbar or a wide picture), marked on purpose */

/* Safety net for media inside a tool */
#th-tool :where(img,video,iframe):where(:not(#th-tool[data-own] *)){max-width:100%}
/* ===== Converter family on the layout system (rule 154 phase 3, 2026-10-19; full standard: claude/toolha-layout-system.md) =====
   KM / KG / °C parts follow the tool box (#th-tool), never the screen. The rules above are the narrow layout;
   these switch at the four steps only. Replaced the old 520 / 560 / 900 px screen rules of these parts. */
/* From / To and the two pace boxes: two side by side only when each gets at least 14rem / 13rem, never three (no screen number) */
.conv>.field:first-child:where(:not(#th-tool[data-own] *)){grid-column:1 / -1}

@container tool (width <= 22.5rem){
  
  
  
   /* rule 154 phase 4: 1 column when a chip cannot fit half of a very narrow box (264 px screens), never 3 */
  
  
  null}

@container tool (width <= 48rem){
  .swap:where(:not(#th-tool[data-own] *)){display:none}}
@container tool (width > 48rem){.conv>.field:first-child:where(:not(#th-tool[data-own] *)){grid-column:auto}}
/* v1.46 (2026-10-23, "003 Celsius to Fahrenheit", owner: make Quick values + Rounding + Degrees clearer). Temperature pair page only (the markup `.tool-top.tt-v2` is drawn by `topT()` in unit-converter.js for the temperature type only; KM to Miles and KG to Pounds keep the old bar). Every size is a token; every wrap comes from the layout blocks (flex-wrap / auto-fit grid), no screen number. */






















/* v1.47 (2026-10-23, "003 Celsius to Fahrenheit", owner: on a phone a sky-coloured square flashed behind the page when the direction was tapped): the phone's own tap flash (a grey-blue box over the tapped part and over the parts the page redraws under it) is switched off for every unit converter (Celsius to Fahrenheit, KG to Pounds since 2026-10-23, KM to Miles the same day, \"001 KM to Miles\", owner: the same flash on its direction tap); the tapped direction pill, quick value and choice pill show their own soft press colour instead. */
#th-tool:has(.uc-dir):where(:not(#th-tool[data-own] *)){-webkit-tap-highlight-color:transparent}