/* Free tools kit (Oct 2026). Uses the site tokens from app.css. */
.tk-head h1 { max-width: 18ch; }
.tk .flow { background: var(--tile); }
.tk .tk-k, .tk-k { margin: 0 0 8px; font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-soft); }
.tk .tk-big, .tk-big { margin: 0; font-family: var(--display); font-weight: 300; font-size: clamp(72px, 9vw, 128px); line-height: .95; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.tk-big small { font-size: .32em; letter-spacing: 0; color: var(--fg-soft); margin-left: 6px; }
.tk .tk-band { margin: 10px 0 4px; font-size: var(--step-lead); font-weight: 500; }
.tk-res { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(18px, 3vw, 36px); padding: clamp(12px, 2vw, 24px); }
.tk-res__score, .tk-res__fix { min-width: 0; display: grid; align-content: start; gap: 8px; }
.tk-res .fine { margin-top: 10px; }
.tk-fixes { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: fx; }
.tk-fixes li { counter-increment: fx; position: relative; padding: 16px 18px 16px 52px; border-radius: 18px; background: var(--bg); animation: lkIn .5s var(--ease) both; animation-delay: var(--d, 0ms); }
.tk-fixes li::before { content: counter(fx); position: absolute; left: 16px; top: 14px; width: 26px; height: 26px; border-radius: 50%; background: var(--orange); color: #fff; font-size: 14px; font-weight: 500; display: grid; place-items: center; }
.tk-fix__t { margin: 0; font-weight: 500; }
.tk-fix__w { margin: 4px 0 8px; color: var(--fg-soft); font-size: 15px; line-height: 1.45; }
.tk-chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--fg); color: var(--fg); font-size: 12px; font-weight: 500; line-height: 1.3; text-decoration: none; }
a.tk-chip:hover { background: var(--fg); color: var(--bg); }
.tk-level { margin: 6px 0 0; padding: 14px 16px; border-radius: 16px; background: #121212; color: #f6f5f2; font-size: 15px; line-height: 1.45; }
.tk-level b { color: #ff9b6b; font-weight: 500; }
.tk-stages { display: grid; gap: 8px; margin-top: 14px; }
.tk-stage { display: grid; grid-template-columns: 9.5em 1fr 2.4em; align-items: center; gap: 10px; font-size: 15px; }
.tk-stage b { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.tk-stage__bar { height: 8px; border-radius: 8px; background: color-mix(in srgb, var(--fg) 12%, transparent); overflow: hidden; }
.tk-stage__bar i { display: block; height: 100%; border-radius: 8px; background: var(--fg); transition: width .6s var(--ease); }
.tk-stage__bar i.is-low { background: var(--orange); }
.tk-next { display: grid; gap: 12px; padding: clamp(12px, 2vw, 24px); border-top: 1px solid color-mix(in srgb, var(--fg) 12%, transparent); margin-top: 8px; }
.tk-mail { display: flex; flex-wrap: wrap; gap: 10px; max-width: 560px; }
.tk-mail .input { flex: 1 1 240px; min-width: 0; }
.tk-disclose { margin: 0; font-size: 14px; color: var(--fg-soft); }
.tk-cap { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--fg-soft); }
.tk-cap__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex-shrink: 0; }
.tk-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tk-how__i { padding: 22px; border-radius: var(--r); background: var(--tile); }
.tk-how__i h3 { margin: 6px 0 6px; font-size: 19px; font-weight: 500; }
.tk-how__i p { margin: 0; }
.tk-how__n { width: 28px; height: 28px; border-radius: 50%; background: var(--fg); color: var(--bg); display: grid; place-items: center; font-size: 14px; font-weight: 500; }
.tk-src { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; font-size: 15px; }
.tk-src a { color: inherit; }
.tk-field { display: grid; gap: 6px; font-weight: 500; }
.tk-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tk-out { white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; line-height: 1.5; padding: 16px; border-radius: 16px; background: var(--bg); overflow-x: auto; }
@media (max-width: 860px) { .tk-res, .tk-how { grid-template-columns: 1fr; } .tk-stage { grid-template-columns: 7.5em 1fr 2.2em; font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .tk-fixes li { animation: none; } .tk-stage__bar i { transition: none; } }
:root[data-theme="dark"] .tk-level { background: #f6f5f2; color: #121212; } :root[data-theme="dark"] .tk-level b { color: #a9380c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tk-level { background: #f6f5f2; color: #121212; } :root:not([data-theme="light"]) .tk-level b { color: #a9380c; } }
.tk-fixes li.is-clear { padding-left: 18px; } .tk-fixes li.is-clear::before { display: none; }
.tk-next .tlink { display: inline-flex; align-items: center; min-height: 44px; }