/* Tastekit page (/tastekit/). Uses the shared base and marketing tokens; only the film frame and steps are new. */
.tk-hero h1 { max-width: 16ch; }
.tk-film { margin: 0; }
.tk-film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--fg); border-radius: var(--radius); box-shadow: var(--shadow); }
.tk-film figcaption { margin-top: 12px; }
.tk-steps { counter-reset: tk; list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 14px; max-width: 72ch; }
.tk-steps li { counter-increment: tk; position: relative; padding-left: 48px; min-height: 32px; }
.tk-steps li::before {
  content: counter(tk); position: absolute; left: 0; top: -2px; width: 32px; height: 32px; border-radius: 50%;
  background: var(--fg); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .9rem;
}
.tk-req { max-width: 72ch; }
.tk-req ul { margin: 0 0 12px; padding-left: 1.2em; }
.tk-req li { margin-bottom: .3em; }
.tk-req .fine { margin: 0; }
html[lang="zh-Hans"] .tk-hero h1 { max-width: 13em; }

/* Pro benefit: badge, license box and the install prompt. */
.tk-included { margin: 0 0 16px; }
.tk-install { max-width: 72ch; }
.tk-install h3 { margin-top: 0; }
.tk-key label { display: block; font-weight: 600; margin: 4px 0 6px; }
.tk-key-row { display: flex; gap: 10px; flex-wrap: wrap; }
.tk-key-row input { flex: 1 1 220px; min-width: 0; font: inherit; font-family: var(--font-mono); padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--fg); }
.tk-key .form-error, #tk-failed .form-error { color: #b3261e; margin: 8px 0 0; font-weight: 600; }
.tk-locked-buy { margin: 16px 0 0; }
.tk-prompt { margin: 8px 0 14px; padding: 16px; max-height: 420px; overflow: auto; background: #f5f2ea; border: 1px solid var(--border); border-radius: 10px; font: .82rem/1.55 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--fg); }
.tk-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }