/* Browser tools — shared studio UI. Namespaced tk-, visual language matches the Growth Diagnostic (gx-). */

.tk {
  --tk-bg: var(--ix-paper, #efe9de);
  --tk-card: #fffdf8;
  --tk-soft: #f4efe4;
  --tk-soft-2: #e9e1d2;
  --tk-ink: #14251f;
  --tk-muted: #56645d;
  --tk-line: rgba(20, 37, 31, .11);
  --tk-line-2: rgba(20, 37, 31, .22);
  --tk-dark: #14251f;
  --tk-orange: #d9522d;
  --tk-lime: #dfff63;
  --tk-c: #ffb48c;
  --tk-on-c: #14251f;
  --tk-ok: #1d7f52;
  --tk-warn: #9a5b06;
  --tk-err: #c2412d;
  --tk-shadow: 0 40px 80px -48px rgba(20, 37, 31, .5), 0 2px 6px -3px rgba(20, 37, 31, .12);
  --tk-lift: 0 16px 32px -18px rgba(20, 37, 31, .5);
  --tk-display: var(--ix-display, "DM Serif Display", Georgia, serif);
  --tk-sans: var(--ix-sans, "Manrope", system-ui, sans-serif);
  --tk-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --tk-ease: cubic-bezier(.2, .8, .2, 1);
  position: relative;
  display: block;
  overflow-x: clip;
  color: var(--tk-ink);
  background: var(--tk-bg);
  font: 500 15.5px/1.6 var(--tk-sans);
}
html.theme-dark .tk {
  --tk-card: #18231e;
  --tk-soft: #203029;
  --tk-soft-2: #2a3b33;
  --tk-ink: #f2efe7;
  --tk-muted: #a5b1ab;
  --tk-line: rgba(242, 239, 231, .09);
  --tk-line-2: rgba(242, 239, 231, .2);
  --tk-ok: #62d69c;
  --tk-warn: #f0b64f;
  --tk-err: #ff8a73;
  --tk-shadow: 0 40px 90px -46px rgba(0, 0, 0, .9), 0 0 0 1px rgba(242, 239, 231, .06);
  --tk-lift: 0 18px 36px -18px rgba(0, 0, 0, .8);
}
.tk *, .tk *::before, .tk *::after { box-sizing: border-box; }
.tk :where(h1, h2, h3, h4, p, ul, ol, figure, dl, dd) { margin: 0; }
.tk :where(ul, ol) { padding: 0; list-style: none; }
.tk :where(h1, h2, h3, h4) { color: inherit; font-family: var(--tk-display); font-weight: 400; line-height: 1.1; }
.tk :where(button, input, select, textarea) { font: inherit; color: inherit; }
.tk :where(button) { cursor: pointer; }
.tk :where(a) { color: inherit; }
.tk [hidden] { display: none !important; }
.tk :focus-visible { outline: 3px solid var(--tk-orange); outline-offset: 3px; }
body .tk .interior-motion-target, body .tk.interior-motion-target { opacity: 1; translate: none; }
.tk code { padding: 1px 6px; border-radius: 6px; background: var(--tk-soft); font: 600 .88em ui-monospace, SFMono-Regular, Menlo, monospace; }
.tk-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.tk-i { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.tk-wrap { position: relative; z-index: 1; width: min(calc(100% - 40px), 1180px); margin-inline: auto; }
.tk-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tk kbd { display: inline-grid; min-width: 22px; height: 22px; padding: 0 6px; place-items: center; border-radius: 7px; background: var(--tk-card); box-shadow: inset 0 -2px 0 var(--tk-line-2), 0 0 0 1px var(--tk-line); font: 800 11.5px/1 var(--tk-sans); }

/* ---------- Hero ---------- */
.tk-blobs { position: absolute; inset: 0 0 auto; z-index: 0; height: 760px; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(#000 45%, transparent); mask-image: linear-gradient(#000 45%, transparent); }
.tk-blobs i { position: absolute; width: 380px; height: 380px; border-radius: 50%; filter: blur(80px); opacity: .5; animation: tk-float 18s ease-in-out infinite alternate; }
.tk-blobs i:nth-child(1) { top: -120px; left: -80px; background: var(--tk-c); }
.tk-blobs i:nth-child(2) { top: 60px; right: -120px; background: #dfff63; animation-delay: -6s; opacity: .35; }
.tk-blobs i:nth-child(3) { top: 320px; left: 38%; background: #9dd4ff; animation-delay: -11s; opacity: .25; }
html.theme-dark .tk-blobs i { opacity: .13; }
@keyframes tk-float { to { transform: translate(40px, 30px) scale(1.12); } }

.tk-hero { position: relative; z-index: 1; padding: clamp(26px, 4vw, 44px) 0 clamp(26px, 3.4vw, 38px); text-align: center; }
.tk-hero-inner { display: flex; flex-direction: column; align-items: center; }
.tk-crumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 18px; color: var(--tk-muted); font: 600 13px/1.3 var(--tk-sans); }
.tk-crumbs a { text-decoration: none; transition: color .2s; }
.tk-crumbs a:hover { color: var(--tk-ink); }
.tk-crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .45; }
.tk-crumbs [aria-current] { color: var(--tk-ink); }
.tk-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px 8px 9px; border-radius: 99px; background: var(--tk-card); box-shadow: var(--tk-lift); font: 700 13px/1 var(--tk-sans); }
.tk-badge > span { display: grid; width: 24px; height: 24px; place-items: center; color: var(--tk-on-c); border-radius: 50%; background: var(--tk-c); }
.tk-badge .tk-i { width: 14px; height: 14px; stroke-width: 2.4; }
.tk-hero h1 { max-width: 820px; margin-top: 20px; font: 400 clamp(40px, 5.4vw, 64px)/1.03 var(--tk-display); letter-spacing: -.022em; text-wrap: balance; }
.tk-scribble { position: relative; z-index: 0; display: inline-block; color: var(--tk-orange); font-style: italic; white-space: nowrap; }
html.theme-dark .tk-scribble { color: #f2683c; }
.tk-scribble::after { content: ""; position: absolute; z-index: -1; left: -3%; right: -3%; bottom: -.08em; height: .3em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 14c40-9 90-12 194-6' fill='none' stroke='%23dfff63' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; transform-origin: left; animation: tk-draw 1s .25s var(--tk-ease) both; }
html.theme-dark .tk-scribble::after { opacity: .55; }
@keyframes tk-draw { from { transform: scaleX(0); } }
.tk-sub { max-width: 600px; margin-top: 14px; color: var(--tk-muted); font-size: clamp(16px, 1.5vw, 18px); line-height: 1.55; text-wrap: pretty; }
.tk-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; margin-top: 18px; color: var(--tk-muted); font: 700 13px/1.3 var(--tk-sans); }
.tk-trust li { display: inline-flex; align-items: center; gap: 6px; }
.tk-trust .tk-i { width: 15px; height: 15px; color: var(--tk-orange); stroke-width: 2.6; }

/* ---------- Studio ---------- */
.tk-app { position: relative; z-index: 1; padding-bottom: clamp(24px, 3vw, 40px); }
.tk-studio { position: relative; border-radius: 34px; background: var(--tk-card); box-shadow: var(--tk-shadow); }
.tk-studio-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px 14px 18px; border-bottom: 1px solid var(--tk-line); }
.tk-studio-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tk-tileic { display: grid; flex: 0 0 auto; width: 42px; height: 42px; place-items: center; color: var(--tk-on-c); border-radius: 14px; background: var(--tk-c); transform: rotate(-5deg); transition: transform .4s var(--tk-bounce); }
.tk-studio:hover .tk-tileic { transform: rotate(0); }
.tk-studio-id b { display: block; font: 800 15px/1.2 var(--tk-sans); }
.tk-studio-id small { display: block; overflow: hidden; color: var(--tk-muted); font: 600 12.5px/1.3 var(--tk-sans); white-space: nowrap; text-overflow: ellipsis; }
.tk-steps { display: flex; align-items: center; gap: 6px; }
.tk-steps li { display: flex; align-items: center; gap: 7px; padding: 5px 12px 5px 5px; color: var(--tk-muted); border-radius: 99px; font: 700 13px/1 var(--tk-sans); transition: background .3s, color .3s, transform .35s var(--tk-bounce); }
.tk-steps li > span { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: var(--tk-soft); font: 800 12px/1 var(--tk-sans); transition: background .3s, color .3s; }
.tk-steps li + li::before { content: ""; width: 14px; height: 2px; margin-right: 4px; margin-left: -8px; border-radius: 2px; background: var(--tk-line-2); }
.tk-steps li.is-done { color: var(--tk-ink); }
.tk-steps li.is-done > span { color: #fff; background: var(--tk-dark); }
html.theme-dark .tk-steps li.is-done > span { color: var(--tk-dark); background: var(--tk-ink); }
.tk-steps li.is-now { color: var(--tk-on-c); background: var(--tk-c); transform: scale(1.04); }
.tk-steps li.is-now > span { background: rgba(255, 255, 255, .65); }
.tk-private { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; color: var(--tk-muted); border-radius: 99px; background: var(--tk-soft); font: 700 12.5px/1 var(--tk-sans); white-space: nowrap; }
.tk-private .tk-i { width: 15px; height: 15px; color: var(--tk-ok); }

.tk-studio-body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
.tk-studio-body.is-wide { grid-template-columns: minmax(0, 1fr) 400px; }
.tk-studio-body > * { min-width: 0; }
.tk-work { padding: 18px; }
.tk-panel { position: sticky; top: 92px; margin: 12px 12px 12px 0; padding: 20px; border-radius: 26px; background: var(--tk-soft); }
.tk-panel-title { margin-bottom: 16px; font: 400 24px/1.1 var(--tk-display); }
.tk-panel-foot { margin-top: 20px; }
.tk-hint { margin-top: 10px; color: var(--tk-muted); font: 600 12.5px/1.45 var(--tk-sans); text-align: center; }

@media (max-width: 1040px) {
  .tk-private { display: none; }
}
@media (max-width: 980px) {
  .tk-studio-body, .tk-studio-body.is-wide { grid-template-columns: 1fr; }
  .tk-panel { position: static; margin: 0 12px 12px; }
}
@media (max-width: 720px) {
  .tk-studio { border-radius: 26px; }
  .tk-studio-bar { flex-wrap: wrap; padding: 12px 14px; }
  .tk-steps { width: 100%; justify-content: space-between; }
  .tk-steps li { padding-right: 10px; font-size: 12px; }
  .tk-steps li:not(.is-now) b { display: none; }
  .tk-steps li + li::before { flex: 1; min-width: 8px; }
  .tk-work { padding: 12px; }
  .tk-panel { margin: 0 8px 8px; padding: 16px; border-radius: 22px; }
}

/* ---------- Dropzone ---------- */
.tk-drop { position: relative; display: grid; align-content: center; justify-items: center; gap: 10px; min-height: 440px; padding: 36px 22px; text-align: center; border: 2px dashed var(--tk-line-2); border-radius: 26px; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--tk-c) 26%, transparent), transparent 62%), var(--tk-soft); cursor: pointer; transition: border-color .25s, background-color .25s, transform .3s var(--tk-bounce); }
.tk-drop:hover { border-color: var(--tk-ink); }
.tk-drop.is-over { border-color: var(--tk-orange); background-color: color-mix(in srgb, var(--tk-c) 30%, var(--tk-soft)); transform: scale(1.008); }
.tk-drop input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tk-drop-art { position: relative; width: 240px; height: 132px; margin-bottom: 10px; }
.tk-sticker { position: absolute; top: 12px; left: 50%; display: grid; width: 88px; height: 108px; margin-left: -44px; padding: 12px; align-content: space-between; color: #14251f; border-radius: 18px; background: var(--c); box-shadow: var(--tk-lift); text-align: left; transform: translateX(var(--x)) rotate(var(--r)); transition: transform .45s var(--tk-bounce); }
.tk-sticker:nth-child(1) { --x: -64px; --r: -12deg; z-index: 1; }
.tk-sticker:nth-child(2) { --x: 0px; --r: 2deg; z-index: 3; top: 0; }
.tk-sticker:nth-child(3) { --x: 64px; --r: 13deg; z-index: 2; }
.tk-drop:hover .tk-sticker:nth-child(1), .tk-drop.is-over .tk-sticker:nth-child(1) { --x: -78px; --r: -16deg; }
.tk-drop:hover .tk-sticker:nth-child(2), .tk-drop.is-over .tk-sticker:nth-child(2) { --r: -2deg; transform: translate(0, -8px) rotate(-2deg); }
.tk-drop:hover .tk-sticker:nth-child(3), .tk-drop.is-over .tk-sticker:nth-child(3) { --x: 78px; --r: 17deg; }
.tk-sticker .tk-i { width: 24px; height: 24px; }
.tk-sticker b { font: 800 14px/1 var(--tk-sans); letter-spacing: .02em; }
.tk-sticker i { display: block; height: 5px; margin-top: 5px; border-radius: 3px; background: rgba(20, 37, 31, .18); }
.tk-sticker i + i { width: 62%; }
.tk-drop-title { font: 400 clamp(28px, 3.2vw, 38px)/1.08 var(--tk-display); letter-spacing: -.01em; }
.tk-drop-text { max-width: 420px; color: var(--tk-muted); font-size: 15px; }
.tk-drop-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }
.tk-drop-hint { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 8px; color: var(--tk-muted); font: 600 13px/1.4 var(--tk-sans); }
.tk-drop-types { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 4px; }
.tk-drop-types span { padding: 4px 10px; border-radius: 99px; background: var(--tk-card); color: var(--tk-muted); font: 800 11px/1.2 var(--tk-sans); letter-spacing: .04em; }
@media (max-width: 720px) {
  .tk-drop { min-height: 360px; padding: 28px 16px; border-radius: 22px; }
  .tk-drop-art { transform: scale(.85); margin-bottom: 0; }
}

/* Whole-page drop veil */
.tk-veil { position: fixed; inset: 0; z-index: 10040; display: grid; place-items: center; padding: 24px; background: rgba(20, 37, 31, .55); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .2s; }
.tk-veil.is-on { opacity: 1; }
.tk-veil div { display: grid; justify-items: center; gap: 12px; padding: 40px 56px; color: #14251f; border: 3px dashed rgba(20, 37, 31, .4); border-radius: 34px; background: var(--tk-c, #dfff63); font: 400 34px/1.1 var(--ix-display, Georgia, serif); transform: rotate(-2deg); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5); }
.tk-veil .tk-i { width: 40px; height: 40px; }

/* ---------- Buttons ---------- */
.tk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 0 20px; color: var(--tk-ink); border: 0; border-radius: 99px; background: var(--tk-card); box-shadow: inset 0 0 0 1.5px var(--tk-line-2); font: 800 14.5px/1 var(--tk-sans); text-decoration: none; white-space: nowrap; transition: transform .3s var(--tk-bounce), box-shadow .3s, background .2s, opacity .2s; }
.tk-btn:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--tk-ink); }
.tk-btn:active { transform: translateY(0) scale(.98); }
.tk-btn .tk-i { width: 18px; height: 18px; }
.tk-btn-primary { color: #fff; background: var(--tk-orange); box-shadow: 0 10px 22px -12px rgba(217, 82, 45, .8); }
.tk-btn-primary:hover { background: #c94622; box-shadow: 0 16px 30px -14px rgba(217, 82, 45, .9); transform: translateY(-3px) rotate(-1deg); }
.tk-btn-dark { color: #fff; background: var(--tk-dark); box-shadow: none; }
.tk-btn-dark:hover { box-shadow: var(--tk-lift); transform: translateY(-3px) rotate(-1deg); }
html.theme-dark .tk-btn-dark { color: #14251f; background: var(--tk-lime); }
.tk-on-c .tk-btn-dark, html.theme-dark .tk-on-c .tk-btn-dark { color: #fff; background: #14251f; }
.tk-btn-soft { background: var(--tk-soft); box-shadow: none; }
.tk-btn-soft:hover { background: var(--tk-soft-2); box-shadow: none; }
.tk-btn-ghost { background: transparent; box-shadow: none; }
.tk-btn-ghost:hover { background: var(--tk-soft); box-shadow: none; transform: none; }
.tk-btn-lg { min-height: 56px; padding: 0 26px; font-size: 16px; }
.tk-btn-sm { min-height: 36px; padding: 0 14px; font-size: 13px; }
.tk-btn-sm .tk-i { width: 16px; height: 16px; }
.tk-btn-block { width: 100%; }
.tk-btn:disabled, .tk-btn[aria-disabled=true] { opacity: .42; transform: none; cursor: not-allowed; }
.tk-btn-primary:disabled { box-shadow: none; }
.tk-iconbtn { display: inline-grid; width: 36px; height: 36px; padding: 0; place-items: center; color: var(--tk-muted); border: 0; border-radius: 12px; background: transparent; transition: background .2s, color .2s, transform .25s var(--tk-bounce); }
.tk-iconbtn:hover { color: var(--tk-ink); background: var(--tk-card); transform: scale(1.06); }
.tk-iconbtn.is-danger:hover { color: var(--tk-err); }
.tk-iconbtn:disabled { opacity: .28; transform: none; cursor: not-allowed; background: transparent; }
.tk-iconbtn .tk-i { width: 18px; height: 18px; }
.tk-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ---------- Form controls ---------- */
.tk-field { display: grid; gap: 8px; }
.tk-field + .tk-field, .tk-grid2 + .tk-field, .tk-field + .tk-grid2, .tk-grid2 + .tk-grid2 { margin-top: 18px; }
.tk-label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: var(--tk-ink); font: 800 13.5px/1.3 var(--tk-sans); }
.tk-label output, .tk-label .tk-val { color: var(--tk-muted); font: 700 13px/1 var(--tk-sans); font-variant-numeric: tabular-nums; }
.tk-label .tk-req { color: var(--tk-orange); font: 800 11px/1 var(--tk-sans); letter-spacing: .05em; text-transform: uppercase; }
.tk-help { color: var(--tk-muted); font: 600 12.5px/1.45 var(--tk-sans); }
.tk-help.is-err { color: var(--tk-err); }
.tk-input, .tk-select, .tk-textarea { width: 100%; min-height: 46px; padding: 0 16px; color: var(--tk-ink); border: 0; border-radius: 14px; background: var(--tk-card); box-shadow: inset 0 0 0 1.5px var(--tk-line); font: 600 15px/1.4 var(--tk-sans); transition: box-shadow .2s; }
.tk-textarea { min-height: 110px; padding: 12px 16px; resize: vertical; line-height: 1.55; }
.tk-input::placeholder, .tk-textarea::placeholder { color: var(--tk-muted); opacity: .75; font-weight: 500; }
.tk-input:hover, .tk-select:hover, .tk-textarea:hover { box-shadow: inset 0 0 0 1.5px var(--tk-line-2); }
.tk-input:focus, .tk-select:focus, .tk-textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--tk-ink), 0 0 0 5px color-mix(in srgb, var(--tk-c) 55%, transparent); }
.tk-input.is-invalid { box-shadow: inset 0 0 0 2px var(--tk-err); }
.tk-select { appearance: none; padding-right: 42px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356645d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; }
.tk-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tk-grid2 > .tk-field + .tk-field { margin-top: 0; }
@media (max-width: 460px) { .tk-grid2 { grid-template-columns: 1fr; } }

.tk-seg { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 16px; background: var(--tk-card); box-shadow: inset 0 0 0 1.5px var(--tk-line); }
.tk-seg button { flex: 1 1 auto; min-height: 38px; padding: 0 12px; color: var(--tk-muted); border: 0; border-radius: 12px; background: transparent; font: 800 13px/1.1 var(--tk-sans); transition: background .2s, color .2s, transform .3s var(--tk-bounce), box-shadow .2s; }
.tk-seg button:hover { color: var(--tk-ink); background: var(--tk-soft); }
.tk-seg button[aria-pressed=true] { color: var(--tk-on-c); background: var(--tk-c); box-shadow: 0 6px 14px -10px rgba(20, 37, 31, .8); }
.tk-seg.is-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tk-seg.is-grid button { display: grid; justify-items: center; gap: 5px; min-height: 64px; padding: 8px 4px; }
.tk-seg.is-grid button .tk-i { width: 20px; height: 20px; }
@media (max-width: 460px) { .tk-seg.is-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tk-seg.is-grid button { font-size: 11.5px; } }

.tk-range { width: 100%; height: 26px; margin: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; --p: 50%; }
.tk-range:focus-visible { outline: none; }
.tk-range::-webkit-slider-runnable-track { height: 8px; border-radius: 99px; background: linear-gradient(to right, var(--tk-orange) var(--p), var(--tk-line-2) var(--p)); }
.tk-range::-moz-range-track { height: 8px; border-radius: 99px; background: var(--tk-line-2); }
.tk-range::-moz-range-progress { height: 8px; border-radius: 99px; background: var(--tk-orange); }
.tk-range::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -8px; border: 3px solid var(--tk-orange); border-radius: 50%; background: #fff; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .5); -webkit-appearance: none; transition: transform .2s var(--tk-bounce); }
.tk-range::-moz-range-thumb { width: 18px; height: 18px; border: 3px solid var(--tk-orange); border-radius: 50%; background: #fff; }
.tk-range:hover::-webkit-slider-thumb, .tk-range:focus-visible::-webkit-slider-thumb { transform: scale(1.15); }
.tk-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px color-mix(in srgb, var(--tk-c) 70%, transparent); }

.tk-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 700 14px/1.35 var(--tk-sans); cursor: pointer; }
.tk-switch input { position: relative; flex: 0 0 auto; width: 44px; height: 26px; margin: 0; border-radius: 99px; background: var(--tk-line-2); appearance: none; -webkit-appearance: none; cursor: pointer; transition: background .25s; }
.tk-switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); transition: transform .3s var(--tk-bounce); }
.tk-switch input:checked { background: var(--tk-orange); }
.tk-switch input:checked::after { transform: translateX(18px); }

.tk-color { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 5px 12px 5px 5px; border-radius: 14px; background: var(--tk-card); box-shadow: inset 0 0 0 1.5px var(--tk-line); }
.tk-color input[type=color] { width: 36px; height: 36px; flex: 0 0 auto; padding: 0; border: 0; border-radius: 10px; background: none; cursor: pointer; }
.tk-color input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.tk-color input[type=color]::-webkit-color-swatch { border: 1px solid var(--tk-line-2); border-radius: 10px; }
.tk-color input[type=color]::-moz-color-swatch { border: 1px solid var(--tk-line-2); border-radius: 10px; }
.tk-color input[type=text] { flex: 1; min-width: 0; border: 0; background: transparent; font: 700 14px/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }
.tk-color input[type=text]:focus { outline: none; }
.tk-color:focus-within { box-shadow: inset 0 0 0 2px var(--tk-ink); }
.tk-color input:disabled { opacity: .4; }
.tk-divider { height: 1px; margin: 20px 0; border: 0; background: var(--tk-line-2); opacity: .7; }

/* ---------- Lists ---------- */
.tk-listbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 2px 14px; }
.tk-listbar h2 { display: flex; align-items: baseline; gap: 10px; font: 400 26px/1.1 var(--tk-display); }
.tk-count { padding: 4px 10px; color: var(--tk-on-c); border-radius: 99px; background: var(--tk-c); font: 800 12px/1.2 var(--tk-sans); }
.tk-list { display: grid; gap: 10px; }
.tk-item { position: relative; display: grid; grid-template-columns: auto 64px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 10px 10px 4px; border-radius: 20px; background: var(--tk-soft); transition: box-shadow .2s, background .2s; touch-action: pan-y; }
.tk-item:hover { box-shadow: inset 0 0 0 1.5px var(--tk-line-2); }
.tk-item.is-dragging { z-index: 5; background: var(--tk-card); box-shadow: var(--tk-lift), inset 0 0 0 2px var(--tk-ink); rotate: -1deg; }
.tk-item.is-error { box-shadow: inset 0 0 0 1.5px var(--tk-err); }
.tk-item.is-plain { grid-template-columns: 64px minmax(0, 1fr) auto; padding-left: 10px; }
.tk-grip { display: grid; width: 28px; height: 44px; padding: 0; place-items: center; color: var(--tk-muted); border: 0; border-radius: 10px; background: none; cursor: grab; touch-action: none; }
.tk-grip:hover { color: var(--tk-ink); background: var(--tk-card); }
.tk-grip:active { cursor: grabbing; }
.tk-grip .tk-i { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.tk-thumb { position: relative; display: grid; width: 64px; height: 64px; place-items: center; color: var(--tk-orange); border-radius: 12px; background: #fff; box-shadow: 0 8px 16px -10px rgba(20, 37, 31, .6), 0 0 0 1px rgba(20, 37, 31, .06); }
.tk-thumb.is-checker { background: #fff repeating-conic-gradient(#e9e4da 0 25%, #fff 0 50%) 0 0 / 12px 12px; }
.tk-thumb img, .tk-thumb canvas { display: block; width: 100%; height: 100%; padding: 3px; border-radius: 12px; object-fit: contain; transition: transform .3s var(--tk-ease); }
.tk-thumb .tk-i { width: 26px; height: 26px; }
.tk-n { position: absolute; top: -7px; left: -7px; display: grid; min-width: 22px; height: 22px; padding: 0 5px; place-items: center; color: #fff; border-radius: 99px; background: var(--tk-dark); box-shadow: 0 0 0 2px var(--tk-soft); font: 800 11px/1 var(--tk-sans); }
html.theme-dark .tk-n { color: var(--tk-dark); background: var(--tk-ink); }
.tk-item-main { min-width: 0; }
.tk-item-name { display: block; overflow: hidden; font: 800 15px/1.3 var(--tk-sans); white-space: nowrap; text-overflow: ellipsis; }
.tk-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tk-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; color: var(--tk-muted); border-radius: 99px; background: var(--tk-card); font: 700 12px/1.2 var(--tk-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tk-chip .tk-i { width: 13px; height: 13px; }
.tk-chip.is-ok { color: var(--tk-ok); background: color-mix(in srgb, var(--tk-ok) 14%, var(--tk-card)); }
.tk-chip.is-err { color: var(--tk-err); background: color-mix(in srgb, var(--tk-err) 12%, var(--tk-card)); white-space: normal; }
.tk-chip.is-hl { color: var(--tk-on-c); background: var(--tk-c); }
.tk-item-extra { margin-top: 8px; }
.tk-item-extra .tk-input { min-height: 38px; padding: 0 12px; border-radius: 11px; font-size: 13.5px; }
.tk-item-tools { display: flex; align-items: center; gap: 2px; }
@media (max-width: 560px) {
  .tk-item { grid-template-columns: auto 52px minmax(0, 1fr); gap: 10px; }
  .tk-item.is-plain { grid-template-columns: 52px minmax(0, 1fr); }
  .tk-thumb { width: 52px; height: 52px; }
  .tk-item-tools { grid-column: 1 / -1; justify-content: flex-end; margin-top: -4px; }
  .tk-item-name { font-size: 14px; }
}

/* ---------- KPIs, notes, progress ---------- */
.tk-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tk-kpis.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tk-kpi { min-width: 0; padding: 12px 12px 11px; border-radius: 16px; background: var(--tk-card); }
.tk-kpi b { display: block; overflow: hidden; font: 400 26px/1 var(--tk-display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; text-overflow: ellipsis; }
.tk-kpi span { display: block; margin-top: 6px; color: var(--tk-muted); font: 700 12px/1.2 var(--tk-sans); }
.tk-kpi.is-hl { color: var(--tk-on-c); background: var(--tk-c); }
.tk-kpi.is-hl span { color: inherit; opacity: .75; }

.tk-note { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; color: var(--tk-ink); border-radius: 16px; background: var(--tk-card); font: 600 13.5px/1.45 var(--tk-sans); }
.tk-note > .tk-i { width: 18px; height: 18px; margin-top: 1px; color: var(--tk-muted); }
.tk-note.is-ok > .tk-i { color: var(--tk-ok); }
.tk-note.is-warn { background: color-mix(in srgb, #f0b64f 22%, var(--tk-card)); }
.tk-note.is-warn > .tk-i { color: var(--tk-warn); }
.tk-note.is-err { background: color-mix(in srgb, var(--tk-err) 14%, var(--tk-card)); }
.tk-note.is-err > .tk-i { color: var(--tk-err); }

.tk-progress { display: grid; gap: 8px; margin-top: 14px; }
.tk-progress-top { display: flex; justify-content: space-between; gap: 10px; color: var(--tk-muted); font: 700 13px/1.3 var(--tk-sans); font-variant-numeric: tabular-nums; }
.tk-progress-bar { height: 10px; overflow: hidden; border-radius: 99px; background: var(--tk-card); box-shadow: inset 0 0 0 1px var(--tk-line); }
.tk-progress-bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--tk-orange) repeating-linear-gradient(-45deg, rgba(255, 255, 255, .22) 0 8px, transparent 8px 16px); background-size: 22px 22px; animation: tk-stripes .7s linear infinite; transition: width .25s var(--tk-ease); }
@keyframes tk-stripes { to { background-position: 22px 0; } }

/* ---------- Result ---------- */
.tk-done { position: relative; overflow: hidden; display: grid; gap: 16px; margin-bottom: 16px; padding: 22px; color: #14251f; border-radius: 26px; background: var(--tk-c); box-shadow: var(--tk-lift); animation: tk-in .55s var(--tk-bounce) both; }
.tk-done::before { content: ""; position: absolute; top: -70px; right: -50px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255, 255, 255, .35); }
.tk-done > * { position: relative; }
.tk-done-head { display: flex; align-items: center; gap: 16px; }
.tk-done-stamp { display: grid; flex: 0 0 auto; width: 56px; height: 56px; place-items: center; color: #dfff63; border-radius: 50%; background: #14251f; transform: rotate(-10deg); animation: tk-stamp .6s .15s var(--tk-bounce) both; }
.tk-done-stamp .tk-i { width: 28px; height: 28px; stroke-width: 2.8; }
.tk-done h3 { font: 400 clamp(24px, 2.6vw, 30px)/1.1 var(--tk-display); }
.tk-done p { margin-top: 4px; font: 600 14px/1.45 var(--tk-sans); opacity: .78; overflow-wrap: anywhere; }
.tk-done .tk-btn:not(.tk-btn-dark) { color: #14251f; background: rgba(255, 255, 255, .55); box-shadow: none; }
.tk-done .tk-btn:not(.tk-btn-dark):hover { background: rgba(255, 255, 255, .8); }
.tk-done .tk-btn-dark, html.theme-dark .tk-done .tk-btn-dark { color: #fff; background: #14251f; }
.tk-done .tk-note { background: rgba(255, 255, 255, .6); color: #14251f; }
.tk-compare { display: grid; gap: 8px; padding: 14px; border-radius: 18px; background: rgba(255, 255, 255, .5); }
.tk-compare div { display: grid; grid-template-columns: 56px minmax(0, 1fr) 76px; align-items: center; gap: 10px; font: 700 13px/1 var(--tk-sans); font-variant-numeric: tabular-nums; }
.tk-compare div > i { display: block; height: 12px; border-radius: 99px; background: rgba(20, 37, 31, .2); transform-origin: left; animation: tk-grow .8s .2s var(--tk-ease) both; }
.tk-compare div:last-child > i { background: #14251f; }
.tk-compare b { text-align: right; }
@keyframes tk-in { from { opacity: 0; transform: translateY(24px) rotate(1.5deg) scale(.97); } }
@keyframes tk-stamp { from { opacity: 0; transform: rotate(-40deg) scale(1.7); } }
@keyframes tk-grow { from { transform: scaleX(0); } }

/* Gallery */
.tk-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.tk-tile { display: grid; gap: 8px; margin: 0; padding: 8px; border-radius: 18px; background: var(--tk-soft); animation: tk-in .45s var(--tk-bounce) both; }
.tk-tile-img { display: grid; place-items: center; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 12px; background: #fff; }
.tk-tile-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tk-tile figcaption { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 2px 2px 6px; color: var(--tk-muted); font: 700 12px/1.35 var(--tk-sans); font-variant-numeric: tabular-nums; }
.tk-tile figcaption b { display: block; color: var(--tk-ink); font-size: 13px; }

.tk-code { position: relative; margin: 0; padding: 14px 16px; overflow: auto; max-height: 300px; color: var(--tk-ink); border-radius: 16px; background: var(--tk-card); box-shadow: inset 0 0 0 1.5px var(--tk-line); font: 600 12.5px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; }
.tk-empty { display: grid; justify-items: center; gap: 8px; padding: 36px 20px; color: var(--tk-muted); text-align: center; font: 600 14px/1.5 var(--tk-sans); }
.tk-empty .tk-i { width: 32px; height: 32px; opacity: .6; }

/* ---------- Toast + mobile dock ---------- */
.tk-toasts { position: fixed; z-index: 10050; left: 50%; bottom: 24px; display: grid; gap: 8px; width: max-content; max-width: calc(100% - 32px); pointer-events: none; transform: translateX(-50%); }
.tk-toast { display: flex; align-items: center; gap: 10px; padding: 12px 18px 12px 12px; color: #f2efe7; border-radius: 99px; background: #14251f; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .5); font: 700 14px/1.3 var(--ix-sans, "Manrope", system-ui, sans-serif); animation: tk-toast .45s cubic-bezier(.34, 1.56, .64, 1) both; }
.tk-toast > span:first-child { display: grid; width: 26px; height: 26px; place-items: center; color: #14251f; border-radius: 50%; background: #dfff63; }
.tk-toast.is-err > span:first-child { background: #ffb48c; }
.tk-toast .tk-i { width: 15px; height: 15px; stroke-width: 2.8; }
@keyframes tk-toast { from { opacity: 0; transform: translateY(16px) scale(.9); } }
body.tk-dock-on .tk-toasts { bottom: 100px; }

.tk-dock { position: fixed; z-index: 10030; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); display: none; align-items: center; gap: 12px; padding: 8px 8px 8px 18px; color: #f2efe7; border-radius: 22px; background: #14251f; box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .6); transform: translateY(160%); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.tk-dock.is-on { transform: none; }
.tk-dock span { flex: 1; min-width: 0; overflow: hidden; font: 700 13.5px/1.3 var(--ix-sans, "Manrope", system-ui, sans-serif); white-space: nowrap; text-overflow: ellipsis; }
.tk-dock button { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px; color: #fff; border: 0; border-radius: 16px; background: #d9522d; font: 800 14.5px/1 var(--ix-sans, "Manrope", system-ui, sans-serif); cursor: pointer; }
.tk-dock button:disabled { opacity: .5; }
.tk-dock .tk-i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 980px) { .tk-dock { display: flex; } }

/* ---------- Info sections ---------- */
.tk-section { position: relative; padding: clamp(56px, 8vw, 96px) 0; text-align: center; }
.tk-section + .tk-section { padding-top: 0; }
.tk-h2 { font: 400 clamp(32px, 3.8vw, 48px)/1.05 var(--tk-display); letter-spacing: -.015em; text-wrap: balance; }
.tk-lead { max-width: 580px; margin: 12px auto 0; color: var(--tk-muted); font-size: 16.5px; text-wrap: pretty; }
.tk-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 40px; text-align: left; }
.tk-how li { position: relative; padding: 24px 24px 28px; color: #14251f; border-radius: 28px; background: var(--c); transform: rotate(var(--r)); transition: transform .45s var(--tk-bounce); }
.tk-how li:hover { transform: rotate(0) translateY(-6px); }
.tk-how-top { display: flex; align-items: center; justify-content: space-between; }
.tk-how-ic { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 16px; background: rgba(255, 255, 255, .6); }
.tk-how-ic .tk-i { width: 24px; height: 24px; }
.tk-how-n { font: 400 52px/1 var(--tk-display); opacity: .28; }
.tk-how b { display: block; margin-top: 18px; font: 400 25px/1.1 var(--tk-display); }
.tk-how p { margin-top: 8px; font: 500 15px/1.55 var(--tk-sans); opacity: .82; }
.tk-how code { background: rgba(255, 255, 255, .55); }
@media (max-width: 860px) { .tk-how { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }

.tk-band { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 28px 32px; color: #f2efe7; border-radius: 34px; background: #17382d; text-align: left; }
html.theme-dark .tk-band { background: #1f4536; }
.tk-band-ic { display: grid; width: 64px; height: 64px; place-items: center; color: #14251f; border-radius: 22px; background: #dfff63; transform: rotate(-6deg); }
.tk-band-ic .tk-i { width: 30px; height: 30px; }
.tk-band h2 { font: 400 clamp(24px, 2.6vw, 32px)/1.1 var(--tk-display); color: #f2efe7; }
.tk-band p { margin-top: 6px; color: rgba(242, 239, 231, .75); font-size: 15px; }
.tk-band ul { display: grid; gap: 8px; }
.tk-band li { display: flex; align-items: center; gap: 8px; font: 700 13.5px/1.2 var(--tk-sans); white-space: nowrap; }
.tk-band li .tk-i { width: 16px; height: 16px; color: #dfff63; stroke-width: 2.6; }
@media (max-width: 860px) { .tk-band { grid-template-columns: 1fr; padding: 26px; } .tk-band ul { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .tk-band ul { grid-template-columns: 1fr; } }

.tk-faq { display: grid; gap: 10px; max-width: 820px; margin: 36px auto 0; text-align: left; }
.tk-faq details { border-radius: 22px; background: var(--tk-card); box-shadow: inset 0 0 0 1px var(--tk-line); transition: box-shadow .25s; }
.tk-faq details[open] { box-shadow: var(--tk-lift), inset 0 0 0 1px var(--tk-line); }
.tk-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; font: 800 16.5px/1.35 var(--tk-sans); list-style: none; cursor: pointer; }
.tk-faq summary::-webkit-details-marker { display: none; }
.tk-faq summary > span { display: grid; flex: 0 0 auto; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: var(--tk-soft); transition: transform .35s var(--tk-bounce), background .2s; }
.tk-faq summary .tk-i { width: 16px; height: 16px; stroke-width: 2.6; }
.tk-faq details[open] summary > span { color: var(--tk-on-c); background: var(--tk-c); transform: rotate(45deg); }
.tk-faq details p { padding: 0 22px 22px; color: var(--tk-muted); font-size: 15.5px; line-height: 1.6; }
.tk-faq details a { color: var(--tk-orange); font-weight: 700; }

.tk-more { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin-top: 36px; text-align: left; }
.tk-more a { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 24px; background: var(--tk-card); box-shadow: inset 0 0 0 1px var(--tk-line); text-decoration: none; transition: transform .35s var(--tk-bounce), box-shadow .3s; }
.tk-more a:hover { transform: translateY(-4px) rotate(-.6deg); box-shadow: var(--tk-lift), inset 0 0 0 1px var(--tk-line); }
.tk-more-ic { display: grid; flex: 0 0 auto; width: 48px; height: 48px; place-items: center; color: #14251f; border-radius: 16px; background: var(--c); transform: rotate(-6deg); transition: transform .4s var(--tk-bounce); }
.tk-more a:hover .tk-more-ic { transform: rotate(0) scale(1.06); }
.tk-more b { display: block; font: 800 15.5px/1.25 var(--tk-sans); }
.tk-more small { display: block; margin-top: 2px; color: var(--tk-muted); font: 600 13px/1.35 var(--tk-sans); }
.tk-more .tk-go { width: 18px; height: 18px; margin-left: auto; color: var(--tk-muted); transition: transform .3s, color .2s; }
.tk-more a:hover .tk-go { color: var(--tk-ink); transform: translate(2px, -2px); }

@media (prefers-reduced-motion: reduce) {
  .tk *, .tk *::before, .tk *::after, .tk-toast, .tk-dock { animation: none !important; transition: none !important; }
}

/* ---------- Blocks, file card, suffix inputs ---------- */
.tk-block { padding: 20px; border-radius: 24px; background: var(--tk-soft); }
.tk-block + .tk-block, .tk-block + .tk-done, .tk-done + .tk-block { margin-top: 12px; }
.tk-block-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin-bottom: 16px; }
.tk-block-head h2 { display: flex; align-items: center; gap: 10px; font: 400 24px/1.15 var(--tk-display); }
.tk-block-n { display: grid; flex: 0 0 auto; width: 30px; height: 30px; place-items: center; color: var(--tk-on-c); border-radius: 50%; background: var(--tk-c); font: 800 13px/1 var(--tk-sans); transform: rotate(-6deg); }
.tk-block .tk-input, .tk-block .tk-select, .tk-block .tk-textarea, .tk-block .tk-color { background: var(--tk-card); }
.tk-suffix { position: relative; }
.tk-suffix .tk-input { padding-right: 58px; }
.tk-suffix > span { position: absolute; top: 50%; right: 16px; color: var(--tk-muted); font: 700 14px/1 var(--tk-sans); transform: translateY(-50%); pointer-events: none; }
.tk-filecard { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 18px; border-radius: 24px; background: var(--tk-soft); animation: tk-in .45s var(--tk-bounce) both; }
.tk-filecard-thumb { display: grid; width: 112px; height: 144px; place-items: center; overflow: hidden; color: var(--tk-orange); border-radius: 12px; background: #fff; box-shadow: var(--tk-lift); transform: rotate(-3deg); }
.tk-filecard-thumb canvas, .tk-filecard-thumb img { display: block; max-width: 100%; max-height: 100%; }
.tk-filecard-thumb .tk-i { width: 34px; height: 34px; }
.tk-kicker { display: block; margin-bottom: 4px; color: var(--tk-muted); font: 800 11.5px/1 var(--tk-sans); letter-spacing: .08em; text-transform: uppercase; }
.tk-filecard b { display: block; overflow: hidden; font: 400 24px/1.15 var(--tk-display); white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 560px) {
  .tk-filecard { grid-template-columns: 80px minmax(0, 1fr); gap: 14px; padding: 14px; }
  .tk-filecard-thumb { width: 80px; height: 104px; }
  .tk-filecard > .tk-btn { grid-column: 1 / -1; }
  .tk-filecard b { font-size: 20px; }
}
.tk-results { margin-top: 12px; padding: 20px; border-radius: 24px; background: var(--tk-soft); }
.tk-results .tk-tile { background: var(--tk-card); }
.tk-drop.is-short { min-height: 330px; }
.tk-panel.is-static { position: static; }
.tk-grid2 .tk-label { min-height: 26px; align-items: center; }
.tk-addrow { display: flex; width: 100%; align-items: center; justify-content: center; gap: 10px; min-height: 64px; margin-top: 10px; padding: 12px 16px; color: var(--tk-muted); border: 2px dashed var(--tk-line-2); border-radius: 20px; background: transparent; font: 800 14px/1.3 var(--tk-sans); transition: border-color .2s, color .2s, background .2s; }
.tk-addrow:hover { color: var(--tk-ink); border-color: var(--tk-ink); background: var(--tk-soft); }
.tk-addrow small { color: var(--tk-muted); font: 600 13px/1.3 var(--tk-sans); }
@media (max-width: 560px) { .tk-addrow small { display: none; } }

/* Link-buttons: beat the site-wide `.redesign-interior a { color: inherit }`, which loads after this file in production. */
.tk a.tk-btn { color: var(--tk-ink); }
.tk a.tk-btn-primary, .tk a.tk-btn-dark { color: #fff; }
html.theme-dark .tk a.tk-btn-dark { color: #14251f; }
.tk-btn[aria-pressed=true] { color: var(--tk-on-c); background: var(--tk-c); box-shadow: none; }