/* Developer tools batch 3 (Lee, 30 Oct 2026: "Build another 28 tools to the website"). On top of projects.css, tools.css and tools2.css. No style attributes in markup; JS sets sizes and colours through the CSSOM. */
.tl-app pre.tl-pre,.tl-app textarea.tl-pre{max-width:100%;box-sizing:border-box}
textarea.tl-pre{width:100%;min-height:6rem;resize:vertical;font:inherit;font-family:var(--mono);font-size:.82rem;color:var(--ink);background:var(--bg);border:0;border-radius:0 0 10px 10px;padding:.7rem;overflow-wrap:anywhere;word-break:break-all}
.tl-h4{font-size:.9rem;margin:1rem 0 .5rem}
.tl-btn[aria-pressed="true"]{border-color:var(--b);color:var(--ink);background:color-mix(in srgb,var(--b) 18%,transparent)}
.tl-app [aria-invalid="true"]{border-color:var(--r)}
/* colour converter */
.cv-sw{height:72px;border-radius:12px;border:1px solid var(--line);margin:.2rem 0 .8rem;overflow:hidden;background-color:#fff;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%,transparent 75%,#ccc 75%),linear-gradient(45deg,#ccc 25%,transparent 25%,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,8px 8px}
.cv-sw span{display:block;height:100%}
.cv-list,.ch-list{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.cv-item{display:grid;grid-template-columns:7.5rem minmax(0,1fr) auto;gap:.5rem;align-items:center;padding:.4rem .5rem;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.cv-k{font-size:.78rem;color:var(--mut);font-weight:600}
.cv-v{font-family:var(--mono);font-size:.82rem;overflow-wrap:anywhere;min-width:0}
.cv-ct{font-size:.82rem;color:var(--mut)}
@media (max-width:520px){.cv-item{grid-template-columns:minmax(0,1fr) auto}.cv-k{grid-column:1/-1}}
/* harmony */
.ch-list{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
.ch-item{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg);min-width:0}
.ch-sw{display:block;height:64px}
.ch-b{display:block;padding:.4rem .5rem;font-size:.78rem}
.ch-hex{font-family:var(--mono);font-size:.8rem;display:block}
.ch-demo{border-radius:12px;border:1px solid var(--line);padding:1rem;margin:.6rem 0;display:grid;gap:.4rem}
.ch-demo>*{margin:0}
.ch-demo>:nth-child(3){display:inline-block;justify-self:start;padding:.45rem .8rem;border-radius:8px;font-weight:600;font-size:.86rem}
.ch-table .tl-sw,.ch-table td .tl-sw{display:inline-block;width:28px;height:28px;border-radius:6px;border:1px solid var(--line);vertical-align:middle}
/* aspect ratio */
.ar-big{font-family:var(--display);font-size:2.6rem;font-weight:700;margin:0 0 .6rem;line-height:1}
.ar-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem;margin:0 0 .8rem}
.ar-facts div{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.4rem .6rem;min-width:0}
.ar-facts dt{font-size:.74rem;color:var(--mut)}.ar-facts dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.ar-stage{display:flex;align-items:center;justify-content:center;height:220px;border:1px dashed var(--line);border-radius:12px;padding:10px;box-sizing:border-box;overflow:hidden}
.ar-box{max-height:100%;max-width:100%;background:color-mix(in srgb,var(--b) 22%,transparent);border:2px solid var(--b);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:600;box-sizing:border-box;overflow:hidden}
/* specificity */
.sp-table td:first-child{white-space:normal;overflow-wrap:anywhere;min-width:12rem}
.sp-v{font-family:var(--mono);font-weight:700}
.sp-bad{color:var(--r)}[data-theme="light"] .sp-bad{color:#c01c43}
/* resize and crop */
.rc-stage{position:relative;overflow:hidden;border-radius:10px;border:1px solid var(--line);background:var(--bg);touch-action:none;user-select:none;max-width:100%}
.rc-stage canvas,.rc-stage img{display:block;width:100%;height:auto}
.rc-box{position:absolute;outline:2px solid #fff;box-shadow:0 0 0 9999px rgba(0,0,0,.55);cursor:move;box-sizing:border-box}
.rc-box:focus-visible{outline:3px solid var(--b);outline-offset:0}
.rc-hd{position:absolute;right:-9px;bottom:-9px;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--b);cursor:nwse-resize}
/* exif */
.ex-table td:last-child{white-space:normal;overflow-wrap:anywhere;min-width:10rem}
.ex-sens th,.ex-sens td{color:var(--y)}[data-theme="light"] .ex-sens th,[data-theme="light"] .ex-sens td{color:#946200}
/* svg to jsx */
.sj-prev{display:flex;gap:1rem;flex-wrap:wrap}
.sj-prev figure{margin:0;padding:.6rem;border:1px solid var(--line);border-radius:10px;background:#fff;color:#111;text-align:center}
.sj-prev figcaption{font-size:.74rem;color:#555}
.sj-prev img{display:block;max-width:96px;height:auto}
.sj-col{display:grid;gap:.8rem;min-width:0}
/* slug */
.sl-table td{white-space:normal;overflow-wrap:anywhere}
.sl-t{font-family:var(--mono)}
/* markdown */
.md-prev{border:1px solid var(--line);border-radius:12px;padding:1rem;background:var(--bg);overflow-wrap:anywhere;min-width:0;max-height:32rem;overflow:auto}
.md-prev>:first-child{margin-top:0}
.md-prev pre{overflow-x:auto;background:var(--card);padding:.6rem;border-radius:8px;font-size:.82rem}
.md-prev code{font-family:var(--mono);font-size:.88em}
.md-prev blockquote{margin:.6rem 0;padding-left:.8rem;border-left:3px solid var(--line);color:var(--mut)}
.md-prev table{border-collapse:collapse;display:block;overflow-x:auto;max-width:100%}
.md-prev th,.md-prev td{border:1px solid var(--line);padding:.3rem .5rem}
.md-prev img{max-width:100%;height:auto}
.md-img{display:inline-block;padding:.2rem .5rem;border:1px dashed var(--line);border-radius:6px;font-size:.8rem;color:var(--mut)}
.md-left{text-align:left}.md-right{text-align:right}.md-center{text-align:center}
/* regex */
.rx-line{display:grid;grid-template-columns:auto minmax(0,1fr) auto 5.5rem;gap:.4rem;align-items:end}
.rx-line>span{font-family:var(--mono);font-size:1.2rem;opacity:.6;padding-bottom:.55rem}
.rx-hint{display:block;margin:.3rem 0 .6rem}
.rx-view{font-family:var(--mono);font-size:.86rem;white-space:pre-wrap;overflow-wrap:anywhere;border:1px solid var(--line);border-radius:10px;padding:.7rem;background:var(--bg);min-height:3rem;max-height:20rem;overflow:auto}
.rx-view mark{border-radius:3px;padding:0 1px;color:inherit}
.rx-m0{background:color-mix(in srgb,var(--b) 35%,transparent)}.rx-m1{background:color-mix(in srgb,var(--g) 35%,transparent)}
.rx-empty{font-size:.7em;opacity:.7}
.rx-table td{white-space:normal;overflow-wrap:anywhere}
.rx-g{font-family:var(--mono);font-size:.78rem;white-space:pre-wrap}
#rx-explain{margin:0;padding-left:1.2rem;font-size:.86rem;display:grid;gap:.2rem}
#rx-explain code{font-family:var(--mono);background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:0 .25rem}
/* diff */
.df-out{font-family:var(--mono);font-size:.8rem;border:1px solid var(--line);border-radius:10px;background:var(--bg);overflow:auto;max-height:28rem}
.df-l{display:grid;grid-template-columns:2.6rem 1.2rem minmax(0,1fr);align-items:start}
.df-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.df-n{color:var(--mut);text-align:right;padding:.1rem .4rem .1rem 0;user-select:none;border-right:1px solid var(--line)}
.df-s{text-align:center;user-select:none;padding:.1rem 0}
.df-c{white-space:pre-wrap;overflow-wrap:anywhere;padding:.1rem .4rem .1rem 0;min-width:0}
.df-add{background:color-mix(in srgb,var(--g) 14%,transparent)}.df-del{background:color-mix(in srgb,var(--r) 14%,transparent)}
.df-gap{background:repeating-linear-gradient(45deg,transparent 0 6px,color-mix(in srgb,var(--line) 60%,transparent) 6px 7px)}
.df-c ins{text-decoration:none;background:color-mix(in srgb,var(--g) 40%,transparent);border-radius:2px}
.df-c del{text-decoration:line-through;background:color-mix(in srgb,var(--r) 40%,transparent);border-radius:2px}
@media (max-width:640px){.df-split{grid-template-columns:minmax(0,1fr)}.df-split .df-gap{display:none}}
/* url */
.ue-parts{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.4rem;margin:0}
.ue-parts div{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.4rem .6rem;min-width:0}
.ue-parts dt{font-size:.74rem;color:var(--mut)}.ue-parts dd{margin:0;font-family:var(--mono);font-size:.82rem;overflow-wrap:anywhere}
.ue-qs{display:grid;gap:.5rem;margin:.6rem 0}
.ue-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;gap:.5rem;align-items:end;padding:.4rem;border-radius:10px;border:1px solid transparent}
.ue-track{border-color:var(--y);background:color-mix(in srgb,var(--y) 8%,transparent)}
@media (max-width:560px){.ue-row{grid-template-columns:minmax(0,1fr)}}
/* hash */
.hg-table td{white-space:normal}
.hg-hex{font-family:var(--mono);font-size:.78rem;word-break:break-all}
.hg-hit{background:color-mix(in srgb,var(--g) 16%,transparent)}
/* jwt */
.jw-parts{font-family:var(--mono);font-size:.82rem;word-break:break-all;line-height:1.5;padding:.6rem;border:1px solid var(--line);border-radius:10px;background:var(--bg);margin:.4rem 0}
.jw-parts:empty{display:none}
.jw-p0{color:#e11d48}.jw-p1{color:#7c3aed}.jw-p2{color:#0891b2}.jw-dot{color:var(--mut)}
[data-theme="dark"] .jw-p0,html:not([data-theme="light"]) .jw-p0{color:#fb7185}html:not([data-theme="light"]) .jw-p1{color:#c4b5fd}html:not([data-theme="light"]) .jw-p2{color:#67e8f9}
[data-theme="light"] .jw-p0{color:#be123c}[data-theme="light"] .jw-p1{color:#6d28d9}[data-theme="light"] .jw-p2{color:#0e7490}
/* password */
.pw-one{font-family:var(--mono);font-size:1.15rem;font-weight:600;word-break:break-all;padding:.7rem;border:1px solid var(--line);border-radius:10px;background:var(--bg);margin:0 0 .5rem}
.pw-meter{height:8px;border-radius:99px;background:var(--line);overflow:hidden;margin:.5rem 0 1rem}
.pw-meter span{display:block;height:100%;width:0;background:var(--g);transition:width .2s}
.pw-meter .pw-fail{background:var(--r)}.pw-meter .pw-mid{background:var(--y)}
/* timestamps, cron */
.ts-table td,.cr-table td{white-space:normal;overflow-wrap:anywhere}
.ts-table th{white-space:normal;min-width:7rem}
.cr-say{font-size:1.1rem;font-weight:600;margin:0 0 .8rem}
.cr-next{margin:0 0 1rem;padding-left:1.4rem;display:grid;gap:.2rem;font-family:var(--mono);font-size:.84rem}
.cr-next li.fail{color:var(--r)}
/* status codes */
.hs-list{list-style:none;margin:.6rem 0 1rem;padding:0;display:grid;gap:.5rem}
.hs-c{border:1px solid var(--line);border-left:4px solid var(--mut);border-radius:10px;padding:.6rem .8rem;background:var(--bg);font-size:.88rem;min-width:0;overflow-wrap:anywhere}
.hs-c p{margin:.15rem 0}
.hs-h{font-weight:600;display:flex;flex-wrap:wrap;gap:.3rem .5rem;align-items:baseline}
.hs-n{font-family:var(--mono);font-size:1rem}
.hs-g{font-size:.74rem;color:var(--mut);font-weight:400;margin-left:auto}
.hs-seo{color:var(--mut);font-size:.84rem}
.hs-1{border-left-color:#64748b}.hs-2{border-left-color:var(--g)}.hs-3{border-left-color:var(--b)}.hs-4{border-left-color:var(--y)}.hs-5{border-left-color:var(--r)}
/* word counter */
.wc-stats{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
.wc-limits{list-style:none;margin:0;padding:0;display:grid;gap:.3rem;font-size:.85rem}
.wc-limits li{padding:.35rem .6rem .35rem 1.8rem;border:1px solid var(--line);border-radius:8px;position:relative;overflow-wrap:anywhere}
.wc-limits li::before{position:absolute;left:.6rem;font-weight:700}
.wc-limits .pass::before{content:"✓";color:var(--g)}.wc-limits .fail::before{content:"✕";color:var(--r)}.wc-limits .mid::before{content:"!";color:var(--y)}
.wc-top{margin:0;padding-left:1.4rem;font-size:.86rem;display:grid;gap:.15rem}
/* entities */
.he-grid{list-style:none;margin:.6rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:.3rem;max-height:22rem;overflow:auto}
.he-ch{width:100%;min-height:44px;font-size:1.25rem;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);cursor:pointer;font-family:inherit}
.he-ch:hover{border-color:var(--b)}.he-ch:focus-visible{outline:2px solid var(--b);outline-offset:2px}
.he-ch[aria-pressed="true"]{border-color:var(--b);background:color-mix(in srgb,var(--b) 20%,transparent)}
.he-big{font-size:4rem;line-height:1.1;text-align:center;margin:0 0 .6rem;min-height:4.4rem;overflow-wrap:anywhere}
.he-table td{white-space:normal;overflow-wrap:anywhere}
.he-table td code{font-family:var(--mono)}