/* ==========================================================================
   Free developer tools (/tools/*)
   Black-and-white, mobile-first. Fixed pixel sizing because the site root
   font-size is 62.5%. Colour is only used for meaning (errors, matches).
   ========================================================================== */
.kt {
  --kt-ink: #0a0a0a;
  --kt-body: #262626;
  --kt-muted: #595959;
  --kt-line: #e5e5e5;
  --kt-line-strong: #d4d4d4;
  --kt-soft: #f5f5f5;
  --kt-bg: #fafafa;
  --kt-card: #ffffff;
  --kt-err: #b91c1c;
  --kt-err-bg: #fef2f2;
  --kt-ok: #15803d;
  --kt-ok-bg: #f0fdf4;
  --kt-mark: #fde047;
  --kt-mark-alt: #bfdbfe;
  --kt-head: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --kt-text: 'Inter', system-ui, sans-serif;
  --kt-mono: 'JetBrains Mono', 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--kt-bg);
  color: var(--kt-body);
  font: 400 16px/1.65 var(--kt-text);
  -webkit-font-smoothing: antialiased;
}
.kt *, .kt *::before, .kt *::after { box-sizing: border-box; }
.kt h1, .kt h2, .kt h3 { font-family: var(--kt-head); color: var(--kt-ink); letter-spacing: -0.02em; margin: 0; }
.kt p { margin: 0; font-size: inherit; line-height: 1.65; letter-spacing: 0; color: inherit; }
.kt a { color: var(--kt-ink); }
.kt code, .kt kbd { font: 500 0.9em var(--kt-mono); background: var(--kt-soft); border: 1px solid var(--kt-line); color: var(--kt-ink); padding: 1px 6px; border-radius: 6px; word-break: break-word; }
.kt :focus-visible { outline: 3px solid var(--kt-ink); outline-offset: 2px; }
.kt-wrap { width: min(1200px, calc(100% - 32px)); margin: 0 auto; }
.kt .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------------------------------------------------------------- hero */
.kt-hero { padding: 20px 0 18px; background: #fff; border-bottom: 1px solid var(--kt-line); }
.kt-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; color: var(--kt-muted); margin-bottom: 12px; }
.kt-crumbs a { color: var(--kt-ink); text-decoration: none; font-weight: 600; }
.kt-crumbs a:hover { text-decoration: underline; }
.kt-crumbs i { font-size: 9px; opacity: .5; }
.kt-eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 700 12px/1.4 var(--kt-text); letter-spacing: .08em; text-transform: uppercase; color: var(--kt-muted); }
.kt-hero h1 { margin-top: 6px; font-size: clamp(28px, 6vw, 46px); font-weight: 800; line-height: 1.08; }
.kt .kt-lede { margin-top: 10px; max-width: 760px; font-size: 16px; line-height: 1.55; color: var(--kt-body); }
@media (min-width: 768px) { .kt .kt-lede { font-size: 17.5px; } }

/* ------------------------------------------------------------- buttons */
.kt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 10px;
  border: 1.5px solid var(--kt-ink); background: var(--kt-ink); color: #fff; font: 600 15px/1.2 var(--kt-text); text-decoration: none; cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .1s ease; white-space: nowrap; }
.kt-btn:hover { background: #262626; color: #fff; }
.kt-btn:active { transform: translateY(1px); }
.kt-btn--ghost { background: #fff; color: var(--kt-ink); border-color: var(--kt-line-strong); }
.kt-btn--ghost:hover { background: var(--kt-soft); color: var(--kt-ink); border-color: var(--kt-ink); }
.kt-btn--light { background: #fff; color: var(--kt-ink); border-color: #fff; }
.kt-btn--light:hover { background: var(--kt-soft); color: var(--kt-ink); }
.kt-btn--sm { min-height: 36px; padding: 6px 12px; font-size: 13.5px; border-radius: 8px; }
.kt-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ------------------------------------------------------------- the tool */
.kt-app { padding: 22px 0 8px; }
.kt-panel { background: var(--kt-card); border: 1px solid var(--kt-line); border-radius: 16px; padding: 14px; }
.kt-panel + .kt-panel { margin-top: 14px; }
.kt-panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 10px; }
.kt-panel__title { font: 700 14px/1.3 var(--kt-text); letter-spacing: .04em; text-transform: uppercase; color: var(--kt-ink); margin: 0; }
.kt-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kt-split { display: grid; gap: 14px; }
.kt-field { display: grid; gap: 6px; }
.kt-label { font: 600 13px/1.3 var(--kt-text); color: var(--kt-muted); }
.kt-select, .kt-input { min-height: 40px; padding: 8px 12px; border: 1.5px solid var(--kt-line-strong); border-radius: 10px; background: #fff; color: var(--kt-ink);
  font: 500 15px/1.3 var(--kt-text); }
.kt-input--mono { font-family: var(--kt-mono); font-size: 15px; }
.kt-select:focus, .kt-input:focus, .kt-code:focus { outline: none; border-color: var(--kt-ink); box-shadow: 0 0 0 3px rgba(10, 10, 10, .12); }
.kt-check { display: inline-flex; align-items: center; gap: 6px; font: 500 14px/1.3 var(--kt-text); color: var(--kt-body); cursor: pointer; user-select: none; min-height: 36px; }
.kt-check input { width: 18px; height: 18px; accent-color: var(--kt-ink); }

/* Code areas: 16px font so iOS does not zoom on focus. */
.kt-code { display: block; width: 100%; min-height: 260px; margin: 0; padding: 12px 14px; border: 1.5px solid var(--kt-line-strong); border-radius: 12px; background: #fff;
  color: var(--kt-ink); font: 400 14px/1.6 var(--kt-mono); tab-size: 2; white-space: pre; overflow: auto; resize: vertical; }
@media (max-width: 767px) { .kt-code, .kt-input--mono { font-size: 16px; } }
.kt-code[readonly] { background: var(--kt-soft); }
.kt-code--wrap { white-space: pre-wrap; word-break: break-word; }

/* Line-numbered editor */
.kt-editor { position: relative; display: flex; border: 1.5px solid var(--kt-line-strong); border-radius: 12px; background: #fff; overflow: hidden; }
.kt-editor:focus-within { border-color: var(--kt-ink); box-shadow: 0 0 0 3px rgba(10, 10, 10, .12); }
.kt-editor .kt-code { border: 0; border-radius: 0; box-shadow: none; min-height: 240px; flex: 1 1 auto; min-width: 0; }
.kt-gutter { flex: 0 0 auto; min-width: 44px; padding: 12px 8px 12px 6px; background: var(--kt-soft); border-right: 1px solid var(--kt-line); color: #8a8a8a;
  font: 400 14px/1.6 var(--kt-mono); text-align: right; overflow: hidden; user-select: none; white-space: pre; }
@media (max-width: 767px) { .kt-gutter { font-size: 16px; } }
.kt-gutter span { display: block; padding-right: 2px; }
.kt-gutter span.is-err { background: var(--kt-err); color: #fff; border-radius: 4px; }

/* Status line under an editor */
.kt-status { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--kt-line);
  background: var(--kt-soft); font: 500 14.5px/1.5 var(--kt-text); color: var(--kt-body); min-height: 44px; }
.kt-status i { margin-top: 3px; }
.kt-status.is-ok { background: var(--kt-ok-bg); border-color: #bbf7d0; color: #14532d; }
.kt-status.is-err { background: var(--kt-err-bg); border-color: #fecaca; color: #7f1d1d; }
.kt-status b { font-weight: 700; }
.kt-status__link { background: none; border: 0; padding: 0; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.kt-errsnip { margin: 10px 0 0; padding: 10px 12px; background: #fff; border: 1px solid #fecaca; border-radius: 10px; font: 400 13.5px/1.55 var(--kt-mono); color: var(--kt-ink);
  white-space: pre; overflow-x: auto; }
.kt-errsnip .caret { color: var(--kt-err); font-weight: 700; }

/* --------------------------------------------------------- info + FAQ */
.kt-info { padding: 30px 0 8px; }
.kt-info__grid { display: grid; gap: 16px; }
.kt-box { background: #fff; border: 1px solid var(--kt-line); border-radius: 16px; padding: 22px; }
.kt-box h2, .kt-faq h2, .kt-more h2 { font-size: clamp(21px, 3vw, 26px); font-weight: 800; margin-bottom: 12px; }
.kt-steps { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.kt .kt-steps { list-style: decimal; }
.kt .kt-steps li { display: list-item; list-style: inherit; padding-left: 4px; font-size: 16px; line-height: 1.6; letter-spacing: 0; color: var(--kt-body); }
.kt .kt-steps li::marker { font-weight: 700; color: var(--kt-ink); }
.kt-privacy { margin-top: 14px !important; font-size: 14px; color: var(--kt-muted); }
.kt-course { background: var(--kt-ink); color: #d4d4d4; border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.kt-course h2 { color: #fff; font-size: 22px; }
.kt-course__eyebrow { font: 700 12px/1.4 var(--kt-text); letter-spacing: .08em; text-transform: uppercase; color: #a3a3a3; }
.kt-course .kt-btn { margin-top: 6px; white-space: normal; text-align: center; }
.kt-faq { padding: 26px 0 8px; }
.kt-faq__item { background: #fff; border: 1px solid var(--kt-line); border-radius: 14px; margin-top: 10px; }
.kt-faq__item summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px; cursor: pointer; list-style: none; }
.kt-faq__item summary::-webkit-details-marker { display: none; }
.kt-faq__item h3 { font: 700 16.5px/1.45 var(--kt-text); letter-spacing: 0; }
.kt-faq__item summary i { margin-top: 6px; font-size: 12px; color: var(--kt-muted); transition: transform .2s ease; }
.kt-faq__item[open] summary i { transform: rotate(180deg); }
.kt-faq__item p { padding: 0 18px 16px; }
.kt-more { padding: 26px 0 64px; }
.kt-more__list { display: flex; flex-wrap: wrap; gap: 10px; }
.kt-more__list a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; background: #fff; border: 1px solid var(--kt-line-strong); border-radius: 999px;
  font: 600 14.5px/1.2 var(--kt-text); color: var(--kt-ink); text-decoration: none; }
.kt-more__list a:hover { border-color: var(--kt-ink); }

@media (min-width: 768px) {
  .kt-hero { padding: 34px 0 26px; }
  .kt-editor .kt-code { min-height: 300px; }
  .kt-panel { padding: 18px; }
  .kt-info__grid { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
}
@media (prefers-reduced-motion: reduce) {
  .kt *, .kt *::before, .kt *::after { transition: none !important; animation: none !important; }
}

/* --------------------------------------------------------- regex tester */
.rx-pattern { display: flex; align-items: center; gap: 6px; }
.rx-pattern .kt-input { flex: 1 1 auto; min-width: 0; min-height: 48px; font-size: 16px; }
.rx-slash { font: 400 22px/1 var(--kt-mono); color: #a3a3a3; }
.rx-flags { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 10px 0 0; padding: 0; border: 0; }
.rx-flags b { font-family: var(--kt-mono); }
.rx-split { margin-top: 14px; }
.rx-split .kt-panel + .kt-panel { margin-top: 0; }
.rx-split + .kt-panel { margin-top: 14px; }
.rx-text { min-height: 200px; }
.rx-view { min-height: 200px; max-height: 420px; overflow: auto; padding: 12px 14px; border: 1.5px solid var(--kt-line); border-radius: 12px; background: var(--kt-soft);
  font: 400 14px/1.7 var(--kt-mono); color: var(--kt-ink); white-space: pre-wrap; word-break: break-word; }
@media (max-width: 767px) { .rx-view { font-size: 15px; } }
.rx-view mark { padding: 1px 0; border-radius: 3px; color: var(--kt-ink); }
.rx-view .rx-m0 { background: var(--kt-mark); box-shadow: 0 0 0 1px #ca8a04 inset; }
.rx-view .rx-m1 { background: var(--kt-mark-alt); box-shadow: 0 0 0 1px #2563eb inset; }
.rx-view .rx-zero { display: inline-block; width: 2px; height: 1.2em; margin: 0 -1px; vertical-align: text-bottom; background: var(--kt-err); padding: 0; }
.rx-nl { color: #a3a3a3; }
.rx-empty { color: var(--kt-muted); font-family: var(--kt-text); }
.rx-list { margin-top: 4px; overflow-x: auto; }
.rx-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rx-table th { text-align: left; font: 700 12px/1.3 var(--kt-text); letter-spacing: .05em; text-transform: uppercase; color: var(--kt-muted); padding: 8px; border-bottom: 1.5px solid var(--kt-ink); }
.rx-table td { padding: 8px; border-bottom: 1px solid var(--kt-line); vertical-align: top; }
.rx-table td:first-child, .rx-table td:nth-child(2) { font-family: var(--kt-mono); color: var(--kt-muted); white-space: nowrap; width: 1%; }
.rx-table code { white-space: pre-wrap; }
.rx-g { display: inline-block; margin: 0 8px 4px 0; padding: 2px 8px; border: 1px solid var(--kt-line-strong); border-radius: 6px; font: 400 13px/1.5 var(--kt-mono); background: #fff; }
.rx-g b { color: var(--kt-muted); font-weight: 600; margin-right: 2px; }
.rx-none, .rx-more { color: var(--kt-muted); font-size: 13.5px; }
.rx-more { margin-top: 8px !important; }
.rx-codeline { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 8px 8px 8px 12px; background: var(--kt-ink); border-radius: 10px; }
.rx-codeline code { flex: 1 1 auto; min-width: 0; overflow-x: auto; white-space: nowrap; background: none; border: 0; color: #f5f5f5; font-size: 13.5px; padding: 0; }
.rx-codeline .kt-btn { background: #fff; }
.rx-cheat { display: grid; gap: 18px; }
.rx-cheat h3 { font: 700 15px/1.3 var(--kt-text); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.rx-cheat dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; }
.rx-cheat dt { font-weight: 400; }
.rx-cheat dd { margin: 0; font-size: 14.5px; }
.rx-patterns { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rx-patterns li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--kt-line); border-radius: 12px; }
.rx-patterns__name { font-weight: 700; color: var(--kt-ink); }
.rx-patterns code { grid-column: 1 / -1; grid-row: 2; overflow-x: auto; white-space: nowrap; font-size: 13px; }
.rx-patterns .kt-btn { grid-column: 2; grid-row: 1; }
@media (min-width: 768px) {
  .rx-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rx-cheat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rx-patterns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* style.css sets font-family on every element (*), so children of code areas
   would fall back to Urbanist instead of inheriting the monospace font. */
.kt .rx-view *, .kt .kt-errsnip *, .kt .kt-gutter *, .kt code *, .kt pre * { font-family: inherit; }

/* Regex match table: one stacked card per match on phones. */
@media (max-width: 767px) {
  .rx-table thead { display: none; }
  .rx-table tr { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--kt-line); }
  .rx-table td { padding: 0; border: 0; width: auto !important; }
  .rx-table td:first-child::before { content: "#"; }
  .rx-table td:nth-child(2)::before { content: "at index "; font-family: var(--kt-text); }
  .rx-table td:nth-child(3), .rx-table td:nth-child(4) { grid-column: 1 / -1; }
  .rx-table code { word-break: break-all; }
}

/* ---------------------------------------------------------- typing test */
.ts-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ts-stats > div, .ts-result__nums > div { display: flex; flex-direction: column; align-items: center; padding: 10px 6px; border: 1px solid var(--kt-line); border-radius: 12px; background: #fff; }
.ts-stats span, .ts-result__nums span { font: 800 24px/1.1 var(--kt-head); color: var(--kt-ink); font-variant-numeric: tabular-nums; }
.ts-stats small, .ts-result__nums small { font: 600 11.5px/1.3 var(--kt-text); letter-spacing: .06em; text-transform: uppercase; color: var(--kt-muted); margin-top: 2px; }
.ts-progress { height: 4px; margin: 12px 0; background: var(--kt-line); border-radius: 99px; overflow: hidden; }
.ts-progress span { display: block; height: 100%; width: 0; background: var(--kt-ink); transition: width .15s ease; }
.ts-stage { position: relative; max-height: 340px; overflow: auto; border: 1.5px solid var(--kt-line-strong); border-radius: 12px; background: #fff; cursor: text; }
.ts-stage.is-focus { border-color: var(--kt-ink); box-shadow: 0 0 0 3px rgba(10, 10, 10, .12); }
.ts-input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; resize: none; font-size: 16px; caret-color: transparent; }
.ts-code { margin: 0; padding: 16px 18px; font: 400 17px/1.75 var(--kt-mono); color: #a3a3a3; white-space: pre-wrap; word-break: break-word; tab-size: 4; }
@media (min-width: 768px) { .ts-code { font-size: 19px; padding: 20px 24px; } }
.ts-ch { border-radius: 2px; }
.ts-ch.ok { color: var(--kt-ink); }
.ts-ch.bad { color: #fff; background: var(--kt-err); }
.ts-ch.ts-nl { color: #d4d4d4; font-size: .8em; padding: 0 2px; }
.ts-ch.ts-nl.ok { color: #a3a3a3; }
.ts-ch.cur { color: var(--kt-ink); box-shadow: inset 0 -3px 0 var(--kt-ink); background: var(--kt-soft); }
.ts-stage.is-focus .ts-ch.cur { animation: tsBlink 1s steps(2, start) infinite; }
@keyframes tsBlink { 50% { box-shadow: inset 0 -3px 0 transparent; } }
.ts-start { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; background: rgba(255, 255, 255, .78);
  font: 700 16px/1.3 var(--kt-text); color: var(--kt-ink); pointer-events: none; transition: opacity .15s ease; text-align: center; padding: 16px; }
.ts-stage.is-focus .ts-start, .ts-stage.is-done .ts-start { opacity: 0; }
.ts-result { margin-top: 14px; padding: 16px; border: 1.5px solid var(--kt-ink); border-radius: 14px; background: #fff; }
.ts-result__nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ts-result__nums > div:first-child { background: var(--kt-ink); border-color: var(--kt-ink); }
.ts-result__nums > div:first-child span, .ts-result__nums > div:first-child small { color: #fff; }
.kt .ts-result__tip { margin: 12px 0; font-size: 15.5px; color: var(--kt-ink); }
.kt .ts-hint { margin-top: 14px; min-height: 26px; font-size: 15px; color: var(--kt-body); }
.ts-kbd { margin-top: 8px; display: grid; gap: 4px; user-select: none; }
.ts-row { display: flex; gap: 4px; }
.ts-key { flex: 1 1 0; min-width: 0; height: 34px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--kt-line-strong);
  border-radius: 6px; font: 600 11px/1 var(--kt-mono); color: var(--kt-ink); background: #fff; overflow: hidden; white-space: nowrap; transition: background .1s ease, color .1s ease; }
.ts-key small { font-size: 9px; color: var(--kt-muted); margin-bottom: 2px; }
.ts-key.is-home { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.f-lp, .f-rp { background: #bdbdbd; }
.f-lr, .f-rr { background: #d9d9d9; }
.f-lm, .f-rm { background: #eeeeee; }
.f-li, .f-ri, .f-th { background: #fff; }
.ts-key.is-next, .ts-key.is-shift { background: var(--kt-ink); color: #fff; border-color: var(--kt-ink); }
.ts-key.is-next small, .ts-key.is-shift small { color: #d4d4d4; }
.ts-key.is-shift { background: #525252; border-color: #525252; }
@media (min-width: 768px) { .ts-key { height: 42px; font-size: 13px; } .ts-row, .ts-kbd { gap: 6px; } .ts-key small { font-size: 10px; } }
.ts-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; margin: 12px 0 0; padding: 0; font-size: 13.5px; color: var(--kt-muted); }
.ts-legend li { display: inline-flex; align-items: center; gap: 6px; }
.ts-sw { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--kt-line-strong); display: inline-block; }
.ts-sw--next { background: var(--kt-ink); border-color: var(--kt-ink); }
.ts-tips { display: grid; gap: 18px; }
.ts-tips h3, .kt .ts-sub { font: 700 17px/1.35 var(--kt-text); letter-spacing: 0; margin-bottom: 6px; }
.kt .ts-sub { margin: 24px 0 10px; }
.ts-symtable { display: grid; border: 1px solid var(--kt-line); border-radius: 12px; overflow: hidden; }
.ts-symtable > div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 9px 12px; border-top: 1px solid var(--kt-line); font-size: 14.5px; align-items: center; }
.ts-symtable > div:first-child { border-top: 0; }
.ts-symtable > div:nth-child(odd) { background: var(--kt-soft); }
@media (min-width: 768px) {
  .ts-tips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ts-result__nums { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Show code exactly as typed: JetBrains Mono would draw => as an arrow. */
.kt .kt-code, .kt .ts-code, .kt .rx-view, .kt code, .kt pre, .kt .kt-gutter, .kt .kt-input--mono { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
.kt .ts-code { word-break: normal; overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .kt .ts-code { font-size: 15px; padding: 14px; }
  .ts-stats span { font-size: 19px; }
  .ts-stats small { font-size: 10.5px; letter-spacing: .03em; }
}

/* ---------------------------------------------------------- base64 */
.kt-btn[aria-pressed="false"] { background: #fff; color: var(--kt-ink); border-color: var(--kt-line-strong); }
.kt-btn[aria-pressed="false"]:hover { background: var(--kt-soft); border-color: var(--kt-ink); }
.b64-drop { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 12px; padding: 14px; border: 1.5px dashed var(--kt-line-strong);
  border-radius: 12px; background: var(--kt-soft); }
.b64-drop.is-over { border-color: var(--kt-ink); background: #fff; }
.b64-drop > i { font-size: 22px; color: var(--kt-ink); }
.b64-drop__txt { flex: 1 1 220px; min-width: 0; display: grid; gap: 2px; }
.b64-drop__txt label { font-size: 15px; color: var(--kt-ink); cursor: pointer; }
.b64-drop__txt small { font-size: 13px; color: var(--kt-muted); }
.b64-drop__input { flex: 1 1 100%; max-width: 100%; font: 500 14px/1.3 var(--kt-text); color: var(--kt-body); }
.b64-drop__input::file-selector-button { margin-right: 10px; min-height: 40px; padding: 8px 14px; border: 1.5px solid var(--kt-ink); border-radius: 10px; background: var(--kt-ink);
  color: #fff; font: 600 14px/1.2 var(--kt-text); cursor: pointer; }
.b64-preview { margin-top: 12px; padding: 12px; border: 1px solid var(--kt-line); border-radius: 12px; background:
  repeating-conic-gradient(#f0f0f0 0% 25%, #fff 0% 50%) 0 0 / 16px 16px; text-align: center; }
.b64-preview img { max-width: 100%; max-height: 320px; height: auto; }
@media (min-width: 768px) { .b64-drop__input { flex: 0 1 auto; } }

/* ---------------------------------------------------------- JWT decoder */
.jwt-notice { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; padding: 14px 16px; border: 1.5px solid var(--kt-ink); border-radius: 14px; background: #fff; }
.jwt-notice > i { margin-top: 3px; font-size: 20px; color: var(--kt-ink); }
.kt .jwt-notice p { font-size: 15px; line-height: 1.55; color: var(--kt-ink); }
.jwt-input { min-height: 130px; word-break: break-all; }
.jwt-parts { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--kt-line); border-radius: 10px; background: var(--kt-soft); font: 400 13px/1.6 var(--kt-mono);
  word-break: break-all; max-height: 150px; overflow: auto; }
.kt .jwt-parts *, .kt .jwt-sig * { font-family: inherit; }
.jwt-h { color: #be123c; } .jwt-p { color: #7e22ce; } .jwt-s { color: #0369a1; } .jwt-dot { color: var(--kt-ink); font-weight: 700; }
.jwt-key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; vertical-align: 1px; }
.jwt-key--h { background: #be123c; } .jwt-key--p { background: #7e22ce; } .jwt-key--s { background: #0369a1; }
.jwt-unverified { font-weight: 700; white-space: nowrap; }
#jwt-results { margin-top: 14px; }
.jwt-split .kt-panel + .kt-panel { margin-top: 0; }
.jwt-split + .kt-panel, #jwt-results > .kt-panel + .kt-panel { margin-top: 14px; }
.kt .jwt-alg { margin-top: 10px; font-size: 14px; color: var(--kt-muted); }
.kt .jwt-alg b { color: var(--kt-ink); font-family: var(--kt-mono); }
.jwt-warnings { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.jwt-warnings li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid #fde68a; border-radius: 10px; background: #fffbeb; color: #78350f;
  font: 500 14.5px/1.5 var(--kt-text); }
.jwt-warnings i { margin-top: 3px; }
.jwt-claims { overflow-x: auto; }
.jwt-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.jwt-table th, .jwt-table td { padding: 10px 8px; border-bottom: 1px solid var(--kt-line); text-align: left; vertical-align: top; }
.jwt-table tr:last-child th, .jwt-table tr:last-child td { border-bottom: 0; }
.jwt-table th { width: 38%; font-weight: 400; }
.jwt-table th small { display: block; margin-top: 4px; font-size: 13px; color: var(--kt-muted); line-height: 1.4; }
.jwt-table td code { word-break: break-all; }
.jwt-time { display: block; margin-top: 6px; font-size: 13.5px; color: var(--kt-body); }
.jwt-rel { font-weight: 700; color: var(--kt-ink); }
.kt .jwt-none { color: var(--kt-muted); }
.jwt-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--kt-err-bg); border: 1px solid #fecaca; color: #7f1d1d;
  font: 700 12.5px/1.3 var(--kt-text); letter-spacing: .03em; text-transform: uppercase; }
.kt .jwt-sig { display: block; padding: 10px 12px; color: #0369a1; word-break: break-all; font-size: 13.5px; }
.kt .jwt-sig-note { margin-top: 10px; font-size: 14px; color: var(--kt-muted); }
@media (min-width: 900px) { .jwt-split { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; } }
@media (max-width: 767px) {
  .jwt-table tr { display: grid; padding: 10px 0; border-bottom: 1px solid var(--kt-line); }
  .jwt-table th, .jwt-table td { width: auto; padding: 0; border: 0; }
  .jwt-table td { margin-top: 6px; }
}

/* ---------------------------------------------------------- UUID generator */
.uu-one { display: block; padding: 16px 14px; border: 1.5px solid var(--kt-ink); border-radius: 12px; background: #fff; text-align: center;
  font: 600 clamp(13px, 3.4vw, 30px)/1.3 var(--kt-mono); color: var(--kt-ink); letter-spacing: 0; word-break: break-all; font-variant-ligatures: none; }
.uu-hero .kt-toolbar { justify-content: center; }
.uu-opts { margin-bottom: 12px; }
.kt-check .uu-count { width: 96px; height: auto; min-height: 44px; }
.uu-check { width: 100%; min-height: 48px; }
.kt-status code { word-break: break-all; }
/* Read-only, so no iOS focus zoom: a smaller font lets a whole UUID fit at 390px. */
@media (max-width: 767px) { .kt #uu-output { font-size: 13px; padding: 10px; } }

/* ---------------------------------------------------------- cron expression */
.kt .cr-input { width: 100%; min-height: 56px; font-size: clamp(18px, 4.6vw, 26px); font-weight: 600; text-align: center; letter-spacing: .04em; }
.cr-fields { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.cr-field { display: grid; gap: 2px; text-align: center; min-width: 0; }
.kt .cr-field .kt-input { width: 100%; min-width: 0; min-height: 42px; padding: 6px 4px; text-align: center; font-size: 16px; }
.cr-field .kt-input.is-err { border-color: var(--kt-err); background: var(--kt-err-bg); }
.cr-field span { font: 700 12px/1.25 var(--kt-text); color: var(--kt-ink); }
.cr-field small { font: 500 11.5px/1.2 var(--kt-mono); color: var(--kt-muted); }
.kt .cr-human { margin-top: 14px; font: 700 clamp(19px, 3vw, 24px)/1.35 var(--kt-head); color: var(--kt-ink); letter-spacing: -0.01em; }
.kt .cr-human.is-err { color: var(--kt-err); }
.cr-fix { margin-top: 10px; }
.cr-split { margin-top: 14px; }
.cr-split .kt-panel + .kt-panel { margin-top: 0; }
.cr-split + .kt-panel { margin-top: 14px; }
.cr-runs { list-style: none; margin: 0; padding: 0; counter-reset: run; }
.cr-runs li { counter-increment: run; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; padding: 10px 0 10px 34px;
  border-bottom: 1px solid var(--kt-line); position: relative; }
.cr-runs li:last-child { border-bottom: 0; }
.cr-runs li::before { content: counter(run); position: absolute; left: 0; top: 10px; width: 24px; height: 24px; border-radius: 50%; background: var(--kt-ink); color: #fff;
  font: 700 12px/24px var(--kt-text); text-align: center; }
.cr-runs li.cr-none { padding-left: 0; color: var(--kt-muted); }
.cr-runs li.cr-none::before { display: none; }
.cr-when { font: 600 15.5px/1.4 var(--kt-mono); color: var(--kt-ink); font-variant-numeric: tabular-nums; }
.cr-rel { font-size: 14px; color: var(--kt-muted); }
.cr-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.cr-cheat { display: grid; gap: 18px; }
.cr-cheat h3 { font: 700 15px/1.3 var(--kt-text); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.cr-cheat dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 14px; margin: 0; }
.cr-cheat dt { font-weight: 400; }
.cr-cheat dd { margin: 0; font-size: 14.5px; }
.cr-examples { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cr-examples button { width: 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 8px 10px; border: 1px solid var(--kt-line); border-radius: 10px;
  background: #fff; font: 500 14.5px/1.45 var(--kt-text); color: var(--kt-body); text-align: left; cursor: pointer; }
.cr-examples button:hover { border-color: var(--kt-ink); }
@media (min-width: 768px) {
  .cr-fields { gap: 10px; }
  .cr-split { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .cr-cheat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------- case converter */
.kt .cc-text { min-height: 160px; font-family: var(--kt-text); font-size: 16px; line-height: 1.6; }
.cc-modes { display: grid; gap: 8px; margin-top: 14px; }
.cc-modes .kt-label { margin-top: 4px; }
.kt .cc-mode { min-height: 40px; padding: 8px 14px; }
.kt .cc-mode--code { font-family: var(--kt-mono); font-size: 14.5px; font-weight: 600; }
.kt .cc-mode[aria-pressed="true"] { background: var(--kt-ink); border-color: var(--kt-ink); color: #fff; }
.cc-cheat { display: grid; gap: 18px; }
.cc-cheat dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 14px; margin: 0; }
.cc-cheat dt { font-weight: 700; color: var(--kt-ink); font-size: 14.5px; }
.cc-cheat dd { margin: 0; font-size: 14.5px; }
.cc-cheat dd code { margin-right: 6px; }
@media (min-width: 900px) { .cc-cheat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .cc-cheat dl { grid-template-columns: 1fr; gap: 2px; }
  .cc-cheat dd { margin-bottom: 8px; }
  .kt .cc-mode { flex: 1 1 auto; }
}

/* ---------------------------------------------------------- word counter */
.wc-layout { display: grid; gap: 14px; }
.wc-layout .kt-panel + .kt-panel { margin-top: 0; }
.wc-side { display: grid; gap: 14px; align-content: start; }
.kt .wc-text { min-height: 240px; height: 34vh; font-family: var(--kt-text); font-size: 16px; line-height: 1.65; }
.wc-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.wc-stat { padding: 10px 12px; border: 1px solid var(--kt-line); border-radius: 12px; background: var(--kt-bg); min-width: 0; }
.wc-stat dt { font: 600 12.5px/1.3 var(--kt-text); color: var(--kt-muted); }
.wc-stat dd { margin: 2px 0 0; font: 800 20px/1.2 var(--kt-head); color: var(--kt-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.wc-stat--big { background: var(--kt-ink); border-color: var(--kt-ink); }
.wc-stat--big dt { color: #d4d4d4; }
.wc-stat--big dd { color: #fff; font-size: 30px; }
.wc-speed { margin-top: 12px; flex-wrap: wrap; }
.wc-top { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wc-top li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; }
.wc-top__w { font-weight: 700; color: var(--kt-ink); overflow-wrap: anywhere; }
.wc-top__n { font: 500 13px/1.3 var(--kt-mono); color: var(--kt-muted); white-space: nowrap; }
.wc-top__bar { grid-column: 1 / -1; grid-row: 2; height: 6px; border-radius: 3px; background: var(--kt-ink); opacity: .8; }
.wc-top li.wc-none { display: block; color: var(--kt-muted); font-size: 14.5px; }
@media (min-width: 900px) {
  .wc-layout { grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr); align-items: start; }
  .kt .wc-text { height: 560px; }
  .wc-side { position: sticky; top: 90px; }
}
@media (max-width: 767px) { .kt .wc-text { height: 220px; min-height: 180px; } }
.kt .wc-mini { margin-top: 8px; font: 600 14px/1.4 var(--kt-text); color: var(--kt-ink); font-variant-numeric: tabular-nums; }
@media (min-width: 900px) { .kt .wc-mini { display: none; } }

/* ---------------------------------------------------------- text compare */
.tc-inputs .kt-panel + .kt-panel { margin-top: 0; }
.kt .tc-text { min-height: 220px; height: 260px; }
.tc-result { margin-top: 14px; }
.tc-bar { gap: 8px 16px; }
.tc-bar__end { display: inline-flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.kt .tc-seg[aria-pressed="true"] { background: var(--kt-ink); border-color: var(--kt-ink); color: #fff; }
.tc-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; }
.tc-stats > div { padding: 8px 12px; border: 1px solid var(--kt-line); border-radius: 12px; background: var(--kt-bg); min-width: 0; }
.tc-stats dt { font: 600 12.5px/1.3 var(--kt-text); color: var(--kt-muted); }
.tc-stats dd { margin: 2px 0 0; font: 800 22px/1.2 var(--kt-head); color: var(--kt-ink); font-variant-numeric: tabular-nums; }
.tc-stats .tc-stats--ins { background: var(--kt-ok-bg); border-color: #bbf7d0; }
.tc-stats .tc-stats--del { background: var(--kt-err-bg); border-color: #fecaca; }
.tc-stats .tc-stats--chg { background: #fefce8; border-color: #fde68a; }
.tc-view { margin-top: 12px; border: 1.5px solid var(--kt-line-strong); border-radius: 12px; background: #fff; overflow: auto; max-height: 75vh; }
.tc-empty { padding: 28px 16px; text-align: center; color: var(--kt-muted); }
.tc-table { width: 100%; border-collapse: collapse; table-layout: fixed; font: 400 13.5px/1.6 var(--kt-mono); color: var(--kt-ink); }
.tc-table col.tc-c-n { width: 48px; }
.tc-table col.tc-c-s { width: 24px; }
.tc-table td { padding: 1px 8px; vertical-align: top; }
.tc-table .tc-n { padding-right: 6px; text-align: right; color: #8a8a8a; background: var(--kt-soft); border-right: 1px solid var(--kt-line); user-select: none; font-size: 12.5px; }
.tc-table .tc-t { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
.tc-table--split .tc-n + .tc-t { border-right: 1px solid var(--kt-line); }
.tc-table .tc-s { text-align: center; font-weight: 700; padding: 1px 0; user-select: none; }
.tc-table .tc-del { background: var(--kt-err-bg); }
.tc-table .tc-ins { background: var(--kt-ok-bg); }
.tc-table .tc-s.tc-del { color: var(--kt-err); }
.tc-table .tc-s.tc-ins { color: var(--kt-ok); }
.tc-table .tc-blank { background: repeating-linear-gradient(-45deg, #fafafa, #fafafa 5px, #f0f0f0 5px, #f0f0f0 10px); }
.tc-table mark { padding: 0 1px; border-radius: 3px; color: var(--kt-ink); }
.tc-table .tc-w-del { background: #fca5a5; text-decoration: line-through; text-decoration-color: rgba(127, 29, 29, .55); }
.tc-table .tc-w-ins { background: #86efac; }
.tc-fold td { padding: 4px 12px; text-align: center; background: var(--kt-soft); color: var(--kt-muted); font: 600 12.5px/1.5 var(--kt-text); border-top: 1px solid var(--kt-line); border-bottom: 1px solid var(--kt-line); }
.kt .tc-table * { font-family: inherit; }
.kt .tc-note { margin-top: 10px; font-size: 14px; color: var(--kt-muted); }
.tc-key { padding: 0 6px; border-radius: 4px; font-weight: 600; }
.tc-key--del { background: #fca5a5; }
.tc-key--ins { background: #86efac; }
@media (min-width: 768px) { .tc-inputs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .kt .tc-text { height: 180px; min-height: 140px; }
  .tc-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tc-stats > div:last-child { grid-column: span 2; }
  .tc-stats dd { font-size: 18px; }
  .tc-bar__end { margin-left: 0; }
  .tc-table { font-size: 13px; }
  .tc-table col.tc-c-n { width: 34px; }
  .tc-table td { padding: 1px 5px; }
  .tc-table .tc-n { font-size: 11.5px; padding-right: 4px; }
}

/* ---------------------------------------------------------- slug generator */
.kt .sg-text { min-height: 96px; height: 120px; font-family: var(--kt-text); font-size: 17px; line-height: 1.55; }
.sg-opts { margin-top: 12px; gap: 8px 18px; }
.sg-slug { display: block; padding: 16px 14px; border: 1.5px solid var(--kt-ink); border-radius: 12px; background: #fff;
  font: 600 clamp(16px, 2.6vw, 24px)/1.4 var(--kt-mono); color: var(--kt-ink); word-break: break-all; font-variant-ligatures: none; }
.kt .sg-url-row { margin-top: 8px; font: 400 14px/1.5 var(--kt-mono); color: var(--kt-muted); word-break: break-all; }
.sg-actions { margin-top: 12px; }
.sg-split { margin-top: 14px; }
.sg-split .kt-panel + .kt-panel { margin-top: 0; }
.kt .sg-out { min-height: 200px; height: 240px; }
.sg-prefix { width: 100%; }
.kt .sg-hint { margin-top: 6px; font-size: 13.5px; color: var(--kt-muted); }
.kt .sg-h3 { margin: 18px 0 8px; font: 700 15px/1.3 var(--kt-text); text-transform: uppercase; letter-spacing: .05em; }
.sg-rules { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14.5px; }
@media (min-width: 768px) { .sg-split { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
@media (max-width: 767px) { .kt #sg-output { font-size: 14px; } }