/* Takenick accessibility override (WCAG 2.2 AA). Loads after site CSS. Generated 2026-06-30. */
/* B  Skip link */
.skip-link{position:absolute;left:8px;top:-72px;z-index:99999;background:#0b1020;color:#fff;padding:10px 16px;border:2px solid #fff;border-radius:0 0 6px 6px;font:600 15px/1.2 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;text-decoration:none;transition:top .15s ease}
.skip-link:focus{top:0;outline:3px solid #ffd400;outline-offset:2px}
/* D  Focus visible (keyboard). Fallback for engines without :focus-visible. */
a[href]:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:not([tabindex="-1"]):focus-visible,[role="button"]:focus-visible,[contenteditable="true"]:focus-visible{outline:3px solid #0b57d0;outline-offset:3px;border-radius:4px}
.drop-zone:focus-within,label.drop:focus-within,.drop:focus-within{outline:3px solid #0b57d0;outline-offset:3px;border-radius:4px}
@supports not selector(:focus-visible){a[href]:focus,button:focus,input:focus,select:focus,textarea:focus,summary:focus,[tabindex]:not([tabindex="-1"]):focus,[role="button"]:focus{outline:3px solid #0b57d0;outline-offset:3px;border-radius:4px}}
:where(a,button,input,select,textarea,summary,[tabindex],[role="button"]){scroll-margin-top:84px}
/* E  Target size: real controls get >=24px; primary action buttons aim 44px via existing padding. */
button,[role="button"],input[type="submit"],input[type="button"],input[type="reset"]{min-height:24px;min-width:24px}
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),select,textarea{min-height:24px}
nav a{padding:6px 10px}
/* F  Link distinguishability: underline in-text / legal / footer links (not buttons, cards, nav pills, brand). */
main p a,main li a,main td a,.content a,.prose a,article a,.policy-page a,.legal a,.legal__b a,.post a,.copy a{text-decoration:underline;text-underline-offset:2px}
footer a:not(.button):not(.btn):not(.card):not(.brand):not(.logo):not([class*="cta"]){text-decoration:underline;text-underline-offset:2px}
/* H  Overflow / reflow / wrapping */
*,*::before,*::after{box-sizing:border-box}
img,svg,video,canvas{max-width:100%}
pre,code,output,table{max-width:100%}
pre,output,.tk-scroll{overflow:auto}
:where(main,.content,article) a[href]{overflow-wrap:anywhere}
/* I  Scrollable region keyboard focus ring */
.tk-scroll:focus,.tk-scroll:focus-visible,[role="region"][tabindex="0"]:focus,[role="region"][tabindex="0"]:focus-visible{outline:3px solid #0b57d0;outline-offset:2px}
/* M  Reduced motion */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* C  takenick: footer h4->h2, legal policy h3->h2 */
.f-col h2.tk-a11y-fh{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--on-ink-soft);margin-bottom:18px}
.legal h2.tk-a11y-lh{font-family:var(--display);font-weight:700;font-size:1.06rem;margin:26px 0 10px;color:var(--ink)}


/* ================= v3 global-compliance additions (2026-06-30). Loads after v2 a11y. ================= */
/* B2  Programmatic :focus (not only :focus-visible) so keyboard+scripted focus is always visible */
a[href]:focus,button:focus,input:focus,select:focus,textarea:focus,summary:focus,[tabindex]:not([tabindex="-1"]):focus,[role="button"]:focus,[contenteditable="true"]:focus{outline:3px solid #0b57d0;outline-offset:3px;border-radius:4px}
/* C2  Target size strict-safe. Inline links need a box to take min-height (v2 padding alone did not). */
.btn,a.btn,button.btn,[role="button"].btn,.tool-action,.primary-action,.secondary-action,.download-btn,.copy-btn,.clear-btn,.reset-btn,.play-btn,.run-btn,.action-btn,.cta,.btn-primary,.btn-secondary{min-height:44px}
.btn,a.btn,.tool-action,.primary-action,.download-btn,.copy-btn,.play-btn,.run-btn,.cta{display:inline-flex;align-items:center;justify-content:center}
button:not(.tk-ad__label){min-height:24px;min-width:24px}
nav a,.tabs a,.tab,.chip,.filter-btn,.pill,.crumbs a,.breadcrumb a,.pagination a,.pager a,.page-link{min-height:24px;display:inline-flex;align-items:center}
.pagination a,.pager a,.page-link,.icon-btn,.lang-btn,[aria-label][role="button"]{min-width:24px;justify-content:center}
/* D2  Link distinguishability beyond v2 (breadcrumbs, answer block, generic main links) */
main a:not(.btn):not(.button):not(.card):not(.tk-ad__label):not([class*="cta"]):not(.brand):not(.logo):not(.pill):not(.chip):not(.tab),.breadcrumb a,.crumbs a,.answer-first a{text-decoration:underline;text-underline-offset:2px}
/* F2  Reflow + WCAG 1.4.12 text-spacing tolerance: wrap, never clip, no fixed-height text traps */
p,li,dd,dt,blockquote,figcaption,.sub,.toolnote,.lead{overflow-wrap:break-word}
code,kbd,samp,pre,.path,.url,.mono,.hash{overflow-wrap:anywhere;word-break:normal}
.tk-scroll,[role="region"][tabindex]{outline-offset:2px}
/* G2  Keep explicitly-dimensioned media from distorting once width/height are added in HTML */
img[width][height]{height:auto;max-width:100%}
/* H2  Answer-first / AI summary block (visible, readable, mobile-safe) */
.answer-first{max-width:72ch;margin:.9rem 0 1.1rem;padding:.8rem 1rem;border-left:3px solid #0b57d0;background:rgba(11,87,208,.05);border-radius:6px;line-height:1.6}
.answer-first p{margin:0}
.answer-first b,.answer-first strong{font-weight:700}
@media (max-width:480px){.answer-first{padding:.7rem .85rem}}


/* ================= v4 global-compliance additions (2026-06-30). Loads after v3. ================= */
/* C  Strong focus with limited !important (only on outline/box-shadow) so neither site CSS nor a detector can hide it */
a[href]:focus,button:focus,input:focus,select:focus,textarea:focus,summary:focus,details:focus,[tabindex]:not([tabindex="-1"]):focus,[role="button"]:focus,[contenteditable="true"]:focus,a[href]:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:not([tabindex="-1"]):focus-visible,[role="button"]:focus-visible{outline:3px solid #0b57d0 !important;outline-offset:3px !important;box-shadow:0 0 0 2px #fff,0 0 0 5px rgba(11,87,208,.35) !important;border-radius:4px}
/* keep focus rings from being clipped by ancestor overflow */
:where(main,header,nav,footer,section,.wrap,.content,.panel,.card){overflow:visible}
/* D  Region: trailing content sections are wrapped in one .tk-postmain div placed inside main; it spans full width in grid/flex layouts (no effect in block flow), and its children flow normally */
main#main-content>.tk-postmain{grid-column:1 / -1;min-width:0;max-width:100%}
main#main-content>.tk-postmain>*{max-width:100%}
/* B  Target-size strict-safe-plus: footer/breadcrumb/nav/chip/pagination link clusters get a real box; wrap to avoid overflow */
footer a:not(.btn):not(.button):not(.brand):not(.logo),.breadcrumb a,.crumbs a,.bc a,.tabs a,.chips a,.tag-list a,.pager a,.pagination a{min-height:24px;display:inline-flex;align-items:center}
nav ul,footer .links,.breadcrumb,.crumbs,.pagination,.pager,.chips,.tabs{flex-wrap:wrap}
/* N  Contrast: nudge known muted/secondary TEXT tokens darker on light surfaces (brand hues/CTAs left alone; measurement still delegated) */
.tk-trademark,.tm,.muted,.secondary,.note,.brand-note,.subtle,.help small,.fineprint,.disclaimer-text{color:#44474d}
a.u,.copy a,.legal a,.policy-page a{color:#0b57d0}
/* F  Reflow tolerance for the wrapped trailing region */
main#main-content .tk-postmain{overflow-wrap:break-word}
/* O  Visible focus ring for scrollable output wrappers made focusable in HTML */
[data-tk-scroll][tabindex="0"]:focus,[data-tk-scroll][tabindex="0"]:focus-visible,.tk-scroll[tabindex="0"]:focus{outline:3px solid #0b57d0 !important;outline-offset:2px !important}


/* ================= v5 rendered-compliance additions (2026-06-30). Loads after v4. ================= */
/* C  Target size (WCAG 2.2): native checkbox/radio to 24px, range/summary to >=24px, link clusters >=24px */
input[type="checkbox"],input[type="radio"]{min-width:24px;min-height:24px;width:24px;height:24px}
input[type="range"]{min-height:24px}
input[type="color"]{min-height:24px;min-width:24px}
summary{min-height:24px;padding-block:2px}
:where(footer,.crumbs,.breadcrumb,.bc,.crumb,.pager,.pagination,.chips,.tabs) a:not(.btn):not(.button):not(.cta):not(.brand):not(.logo){min-height:24px;display:inline-flex;align-items:center}
a.feat,a.card,.game-card a,.tile a{min-height:24px}
:where(.sec__head,.section-head,.sec-head) a:not(.btn),article.card a:not(.btn),article.gcard a:not(.btn){min-height:24px;display:inline-flex;align-items:center}
/* D  Decorative overflow containment (does not clip focus rings; x-only clip keeps vertical scroll intact) */
.marquee,.marquee__t{overflow:hidden}
.tk-ad,.tk-ad--rect,.tk-ad--mid,.tk-ad--leaderboard,.tk-ad__box{max-width:100%;overflow:hidden}
.orb,.orbs,.bg-orb,.decor,.glow,.blob{pointer-events:none}
/* I  dynamic preview / lightbox imgs (JS-populated on upload/click): scale responsively, never distort/overflow */
img#prev,.imgprev,.lb__p img,.lb img,.lightbox img,figure.gallery img{max-width:100%;height:auto}
/* E  Focus must remain visible even on overflow-contained ancestors */
:where(.marquee,.tk-ad){contain:layout}

/* light body muted text -> dark */
.lead,.crumb,small,.tk-trademark,.tm,.muted,.secondary,.note,.fineprint,.subtle,.u{color:#34373c!important}
/* all body links -> dark blue (light surfaces); brand/skip excluded */
a:not(.btn):not(.brand):not(.skip-link){color:#0b57d0!important}
/* dark footer (#0f0f12): links -> light blue (matches body :not chain + footer, so it wins) */
footer a:not(.btn):not(.brand):not(.skip-link){color:#9ec5fb!important}
/* dark .ink section (#16161a): light labels/values/links */
.ink .k{color:#c2c9d4!important}
.ink .vv,.ink .vv a,.section.ink a:not(.btn):not(.brand):not(.skip-link){color:#9ec5fb!important}
.reveal,.rl{opacity:1!important}

/* ================= v6 final rendered-compliance additions ================= */
/* A: ad centerline — flex-center the box so it aligns to page/main center regardless of container offset */
.tk-ad{width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;box-sizing:border-box!important;text-align:center!important}
.tk-ad__label{width:100%!important;text-align:center!important;margin-left:auto!important;margin-right:auto!important}
.tk-ad__box{margin-left:auto!important;margin-right:auto!important;max-width:100%!important}
/* C: overflow safety (real + long content) — contain, do not hide expected output */
pre,code,samp,kbd,table,.tablewrap,.table-wrap,.codewrap,.out,#out,output,.output{max-width:100%}
pre,.tablewrap,.table-wrap,.codewrap,#out,.out,.output,.scrollx{overflow:auto}
.answer-first p,.lead,.note,.help,.tk-tag,p.brand-note,.crumb,.copy{overflow-wrap:anywhere}
:where(.row,.grid,.flex,.cols,.controls,.toolbar,.actions,.opts)>*{min-width:0}
/* C: single-column grid mains whose track sized to content (wider than viewport) -> size to container; clip-free */
main{grid-template-columns:minmax(0,1fr)}
main>*{min-width:0;max-width:100%}
/* F: broken preview image — hide the compressor/preview img until JS assigns a real src (no broken-image icon on first render) */
img#prev:not([src]),img.imgprev:not([src]),img#out:not([src]){display:none!important}
/* F/H: dynamic preview + lightbox imgs scale responsively (no distortion, no overflow) */
img#prev,.imgprev,.lb__p img,.lb img,.lightbox img,figure.gallery img{max-width:100%;height:auto}
/* target-size: segmented / swatch buttons floored to 24px */
.seg,.swatch,button.seg{min-width:24px;min-height:24px}

/* ================= v7 final UI alignment + contrast ================= */
/* Align the tool header (eyebrow + H1) to the content column and make it span the full grid track at every viewport
   (webdev .xform grid was centering/narrowing the header at 768+ while answer-first/panels stayed full-width) */
main>header{padding-left:0!important;padding-right:0!important;grid-column:1/-1!important;justify-self:stretch!important;width:auto!important;max-width:100%!important;margin-left:0!important;margin-right:0!important}
/* keep answer-first, panels, io, and ad on the same content column */
main>header,main>.answer-first,main>section,main>.tk-ad,main>.tk-postmain,main>.seo,main>.wrap{max-width:100%}
/* spell-checker error chip is on a red (#c0392b) background -> white text passes contrast */
.chip.spelling,.chip.error,.chip.err,.chip.bad{color:#ffffff!important}

/* ================= v8 final alignment: force tool grids to single-column stacked at ALL viewports ================= */
/* Desktop 2/3-col tool grids scattered input/output panels across columns (zig-zag 491-662px). Stack every tool wrapper. */
main.xform,main.tool,main.formwrap,main.fancy,main.genwrap,main.typewrap,main.wgwrap,main.voicewrap,main.edwrap,main.chkwrap,main.solo,main.wpmcalc{grid-template-columns:minmax(0,1fr)!important}
main.xform>*,main.tool>*,main.formwrap>*,main.fancy>*,main.genwrap>*,main.typewrap>*,main.wgwrap>*,main.voicewrap>*,main.edwrap>*,main.chkwrap>*,main.solo>*,main.wpmcalc>*{grid-column:1/-1!important;min-width:0!important;max-width:100%!important}
/* inner input grids (diff tools) -> single column */
.diffin{grid-template-columns:minmax(0,1fr)!important}
.diffin>*{min-width:0!important;max-width:100%!important}
/* schema/sitemap style: a control row whose input is flex-pushed off the content column -> keep it left/full */
main .ctrls,main .row,main .inrow{justify-content:flex-start!important}
main .ctrls>textarea,main .ctrls>input,main .inrow>textarea{margin-left:0!important;margin-right:0!important;width:100%!important;flex:1 1 100%!important}
/* labeled inputs: <label class="ctl">Text <textarea/input></label> pushed the field right of its label -> wrap field to full width (checkboxes/radios unaffected) */
label.ctl{flex-wrap:wrap!important}
label.ctl>textarea,label.ctl>input[type=text],label.ctl>input[type=url],label.ctl>input[type=email],label.ctl>input[type=number],label.ctl>input[type=search],label.ctl>input[type=password],label.ctl>input:not([type]){flex:1 1 100%!important;width:100%!important;min-width:0!important}
/* multiple text-field labels in one .ctrls flex row wrapped 2-per-line -> give each its own row (checkbox/radio/button labels stay inline) */
main .ctrls>label.ctl:has(textarea),main .ctrls>label.ctl:has(input:not([type=checkbox]):not([type=radio]):not([type=range])){flex:1 1 100%!important;width:100%!important;min-width:0!important}

/* ================= v9 ROOT-CAUSE: inner-wrapper content-column normalization ================= */
/* every direct child + nested structural/callout wrapper of a tool main shares ONE content column */
main.xform>*,main.tool>*,main.formwrap>*,main.fancy>*,main.genwrap>*,main.typewrap>*,main.wgwrap>*,main.voicewrap>*,main.edwrap>*,main.chkwrap>*,main.solo>*,main.wpmcalc>*,main.google-anno-skip>*,
main .ctrls,main .single,main .io,main .iometa,main .iobar,main .panel,main .content,main .content .wrap,main .wrap,main .seo-rich,main .help,main .t18opts,main .toolctrls,main .readout,main .tk-postmain,main .tk-trademark,main .tk-tag,main .answer-first,main .diffin,main .wggrp,main .wggroup,main .tk-intent,main .tk-workflow,main .tk-wf-example,main .tk-usewhen,main .tk-usecase,main .grid2,main .intro,main .toolnote,main .big,main .gauge,main .track,main .stats,main .counts,main .related,main .result-panel,main .result-value,main .output-panel{
 width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important;justify-self:stretch!important;align-self:stretch!important;box-sizing:border-box!important;min-width:0!important}
/* inner tool grids (word-counter stats, diff panes, side-by-side outputs) -> single column; directory grids excluded */
main.xform .grid,main.tool .grid,main.formwrap .grid,main.fancy .grid,main.genwrap .grid,main.typewrap .grid,main.wgwrap .grid,main.voicewrap .grid,main.edwrap .grid,main.chkwrap .grid,main.solo .grid,main.wpmcalc .grid,main.google-anno-skip .grid,
main .diffin,main .readout>.grid,main .stats,main .counts,main .io .grid{grid-template-columns:minmax(0,1fr)!important}
/* .related directory grid keeps its multi-column card layout but stays full-width & left-aligned to the column */
main .related{display:grid!important}
/* transparent STRUCTURAL wrappers: strip horizontal padding so their children pass through to the ONE 28px content column.
   (styled boxes .panel/.io/.tk-intent/.tk-ad/.result-panel keep their own padding and are NOT listed here) */
main .ctrls,main .single,main .toolctrls,main .t18opts,main .formwrap,main .readout,main .content,main .content>.wrap,main .gobar,main .tk-postmain>.single{padding-left:0!important;padding-right:0!important}
/* unnamed grouping wrappers inside tool mains are often display:flex (side-by-side panels) -> stack them single-column */
main.xform>div:not([class]),main.tool>div:not([class]),main.formwrap>div:not([class]),main.genwrap>div:not([class]),main.fancy>div:not([class]),main .single:not([class]) ,main.xform>div:not([class])>.panel{display:block!important}
main.xform>div:not([class]),main.tool>div:not([class]){flex-direction:column!important;grid-template-columns:minmax(0,1fr)!important}
/* target-size (D7): ensure number/short inputs meet 24px min height without breaking layout */
main input[type=number],main input[type=text],main input[type=url],main input[type=search],main input#c_maxlen,main input.mini,main input.small,main select{min-height:24px!important}
/* homepage hero (D4): align H1 with the answer-first block (calc home-main centered-H1 vs full-width answer-first) */
main.home-main .hero h1,main.home-main .hero .answer-first,main.home-main .hero>p,main.home-main .hero .sub,main.home-main .hero .lead,main.home-main .hero .intro{max-width:100%!important;margin-left:0!important;margin-right:0!important}


/* ================= v10 surgical patch (appended, loads last) ================= */
/* D2 overflow: wide CTA buttons/links must fit the mobile viewport */
main a.btn,main .btn,a.btn.btn-solid,.hero a.btn,.hero .btn{max-width:100%!important;box-sizing:border-box!important;overflow-wrap:anywhere}
/* D2 overflow: color chart / wheel / swatch wraps must never push the page width */
main .wheelwrap,main .wheel,main .colorwheel,main .chart,main .chartwrap,main .picker,main .swatches{max-width:100%!important;box-sizing:border-box!important;overflow-x:auto}
/* D2 overflow: defensive fit for dense families at small widths (page-level, not global clip) */
main .ctrls,main .readout,main .counts,main .stats,main .panel,main .tk-postmain,main pre,main code,main table{min-width:0!important;max-width:100%!important;box-sizing:border-box!important;overflow-wrap:anywhere!important}
main table{table-layout:auto}
main th,main td{overflow-wrap:anywhere;word-break:normal}