/* KI-Texte erkennen (/ki-texte-erkennen, /en/detecting-ai-generated-text):
   three-column figures, method cards with a limit line, the AI use statement
   generator and the cards of the SynthID chat demo. Builds on site.css,
   article-longform.css and (for the chat window) ki-assistent.css. */

/* ─── Figures: three columns ───────────────────────────────────────────── */
.kn-figures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kn-figures .figure__label { max-width: 30ch; }

/* ─── Cards: limit line sits at the bottom, aligned across the row ─────── */
.kn-limit {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
}
.kn-limit strong { color: var(--ink); font-weight: 600; }
.cards-3 > .card > .text-link:last-child { align-self: flex-start; margin-top: auto; padding-top: 6px; }

/* ─── Indications panel ────────────────────────────────────────────────── */
.kn-panel {
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--bg-soft);
}
.kn-panel h3 { margin-bottom: 18px; font-size: clamp(20px, 1.7vw, 24px); font-weight: 500; letter-spacing: -.018em; }
.kn-panel .check-list li { color: var(--ink); }
.kn-panel > p { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-strong); color: var(--ink-2); font-size: 15.5px; }

.kn-highlight { margin-top: 28px; }
.kn-steps { margin-top: 32px; }
.kn-related { margin-top: 32px; }

/* ─── Generator ────────────────────────────────────────────────────────── */
.kn-card h3 { margin-bottom: 4px; }
.kn-group { min-width: 0; margin: 24px 0 0; padding: 0; border: 0; }
.kn-group legend,
.kn-field label,
.kn-result label { display: block; margin-bottom: 10px; padding: 0; color: var(--ink); font-size: 14.5px; font-weight: 500; }
.kn-optional { margin-left: 4px; color: var(--muted); font-size: 13px; font-weight: 400; }

.kn-options { display: flex; flex-wrap: wrap; gap: 8px; }
.kn-opt {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 8px 14px;
  border: 1px solid var(--line); border-radius: 999px;
  background: #fff;
  color: var(--ink-2); font-size: 14.5px; line-height: 1.3;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.kn-opt input { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; accent-color: var(--blue); cursor: pointer; }
.kn-opt:hover { border-color: var(--line-strong); }
.kn-opt:active { background: var(--bg-soft); }
.kn-opt:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); color: var(--ink); }
.kn-opt:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }

.kn-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.kn-form > .kn-field { margin-top: 24px; }
.kn-form input[type="text"],
.kn-form textarea {
  display: block; width: 100%;
  border: 1px solid var(--line-strong); border-radius: var(--radius-s);
  background: #fff;
  color: var(--ink); font: inherit; font-size: 16px;
  transition: border-color .2s ease;
}
.kn-form input[type="text"] { height: 46px; padding: 0 14px; }
.kn-form input[type="text"]::placeholder { color: #8a93a1; }
.kn-form input[type="text"]:hover { border-color: #aab4c3; }
.kn-form input[type="text"]:focus,
.kn-form textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(26, 78, 140, .12); }
.kn-more { margin-top: 10px; }

.kn-checks { display: grid; gap: 10px; }
.lm-card .kn-checks .ai-form__consent { margin: 0; }

.kn-result { margin-top: 28px; }
.kn-form textarea {
  min-height: 280px; padding: 14px 16px;
  background: var(--bg-soft);
  font-size: 15px; line-height: 1.6;
  resize: vertical;
}
.kn-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.lm-card .kn-actions .btn { margin-top: 0; }
.kn-status { min-height: 1.5em; margin-top: 12px; color: #176a4b; font-size: 14px; text-align: center; }
.kn-status.is-error { color: #a2242f; }

/* ─── Sources: h2 styled like the article sources heading ─────────────── */
.kn-sources { margin-top: 0; padding-top: 0; border-top: 0; }
.kn-author { width: min(100% - 2 * var(--gutter), 880px); margin-top: clamp(40px, 5vw, 64px); }
.kn-sources h2 { margin: 0 0 14px; color: var(--muted); font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }

@media (min-width: 901px) {
  .kn-sticky { position: sticky; top: calc(var(--nav-h) + 32px); }
}
@media (min-width: 641px) and (max-width: 900px) {
  /* site.css wraps figures into two columns here; three still fit. */
  .kn-figures .figure:nth-child(3) { margin-top: 0; padding-left: 24px; border-top: 0; border-left: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .kn-figures { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .kn-fields, .kn-actions { grid-template-columns: minmax(0, 1fr); }
  .kn-opt { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .kn-opt, .kn-form input[type="text"], .kn-form textarea { transition: none; }
}

/* ─── Wasserzeichen live: SynthID chat with Avi ─────────────────────────── */
/* Tabs, window layout and streaming come from ki-assistent.css and alwisr-demo.js. .kn-avi turns
   the dark Alwisr window into Avi's light Avolang look (as in the TikTok video): soft surface,
   white cards, one blue for everything that scores.
   Base styles are the final state (no JS, reduced motion). Animations start when a card streams
   in (.is-on); data-hold on the card makes the chat wait until they are done. */
.alw-window.kn-avi { border-color: var(--line); background: var(--bg-soft); color: var(--ink); box-shadow: 0 2px 6px rgba(15, 39, 68, .06), 0 32px 80px rgba(15, 39, 68, .16); }
.kn-avi .alw-window__bar { gap: 12px; padding: 12px 18px; border-bottom-color: var(--line); background: #fff; }
.kn-avi__id { display: flex; align-items: center; gap: 11px; min-width: 0; }
.kn-avi__avatar { display: grid; flex: 0 0 auto; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--blue); box-shadow: 0 4px 12px rgba(26, 78, 140, .28); color: #fff; font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; }
.kn-avi__name { display: grid; min-width: 0; line-height: 1.2; }
.kn-avi__name strong { color: var(--ink); font-size: 15.5px; font-weight: 600; }
.kn-avi__name span { overflow: hidden; color: var(--muted); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.kn-avi .alw-window__status { padding: 4px 11px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.kn-avi .alw-window__status::before { content: none; }
.kn-avi .alw-window__body { scrollbar-color: rgba(15, 39, 68, .2) transparent; }
.kn-avi .alw-window__pin { background: linear-gradient(180deg, var(--bg-soft) 72%, rgba(244, 246, 249, 0)); }
.kn-avi .alw-window__pin span { background: var(--blue); box-shadow: none; color: #fff; }
.kn-avi .alw-scene + .alw-scene { border-top-color: var(--line-strong); }
.kn-avi .alw-msg--user { background: var(--blue); color: #fff; }
.kn-avi .alw-msg__who { color: var(--blue); }
.kn-avi .alw-result { border-color: var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 6px 18px rgba(15, 39, 68, .05); }
.kn-avi .alw-result__metrics span { background: var(--bg-soft); color: var(--muted); }
.kn-avi .alw-result__metrics strong { color: var(--ink); }
.kn-avi .alw-result__metrics .ok strong { color: var(--blue); }
.kn-avi .alw-result__rows li span { color: var(--ink-2); }
.kn-avi .alw-result__rows li span:first-child { color: var(--ink); font-weight: 600; }
.kn-avi .alw-btn { border-color: var(--line-strong); background: #fff; color: var(--ink); }
.kn-avi .alw-btn--primary { border-color: var(--blue); background: var(--blue); color: #fff; }
.kn-avi .alw-btn::after { border-color: var(--blue); }
.kn-avi .alw-done { color: var(--ink); }
.kn-avi .alw-done a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
/* Thinking: Avi's work indicator, three blue bars in a small box, then the label. */
.kn-avi .alw-typing { position: relative; gap: 4px; padding: 6px 0 6px 8px; border-radius: 0; background: none; }
.kn-avi .alw-typing::before { content: ''; position: absolute; top: 50%; left: 0; width: 37px; height: 28px; border: 1.5px solid var(--line-strong); border-radius: 8px; background: #fff; transform: translateY(-50%); }
.kn-avi .alw-typing i { position: relative; z-index: 1; order: -1; width: 5px; height: 14px; border-radius: 2px; background: var(--blue); transform-origin: 50% 100%; }
.kn-avi .alw-typing span { margin: 0 0 0 16px; color: var(--muted); font-size: 14px; font-style: italic; }
.js .kn-avi .alw-typing.is-shown i { animation: kn-bar 1.15s var(--ease-in-out) infinite; }
.js .kn-avi .alw-typing.is-shown i:nth-child(3) { animation-delay: .16s; }
.js .kn-avi .alw-typing.is-shown i:nth-child(4) { animation-delay: .32s; }
@keyframes kn-bar { 0%, 100% { opacity: .38; transform: scaleY(.38); } 40% { opacity: 1; transform: scaleY(1); } }
/* Composer: white field, round blue send button that wakes up once there is text. */
.is-enhanced .kn-avi .alw-composer { padding: 7px 7px 7px 18px; border: 1.5px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 8px 22px rgba(15, 39, 68, .06); transition: border-color .25s ease, box-shadow .25s ease; }
.kn-avi .alw-composer.is-typing, .kn-avi .alw-composer.is-ready { border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
.kn-avi .alw-composer__text { color: var(--ink); }
.kn-avi .alw-composer__text:empty::before { color: #8a94a6; }
.kn-avi .alw-composer__caret { background: var(--ink); }
.kn-avi .alw-composer__send { width: 38px; height: 38px; border-radius: 50%; background: var(--blue); opacity: .3; transition: opacity .2s ease; }
.kn-avi .alw-composer.is-typing .alw-composer__send, .kn-avi .alw-composer.is-ready .alw-composer__send, .kn-avi .alw-composer.is-sending .alw-composer__send { opacity: 1; }
.kn-avi .alw-composer.is-ready .alw-composer__send { box-shadow: none; }

/* Cards */
.alw-msg .kn-models, .alw-msg .kn-access { margin: 0; padding: 0; }
.kn-models li { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.1fr) minmax(0, 1.1fr); gap: 12px; align-items: baseline; }
.kn-avi .kn-models li.kn-models__head span { color: var(--muted); font-size: 12px; font-weight: 400; letter-spacing: .02em; }
.kn-access li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; }
.alw-result__metrics.kn-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.kn-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.kn-card-head > span:first-child { color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.kn-key { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 9px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.kn-key svg { width: 14px; height: 14px; }
.kn-sentence { color: var(--ink); font-size: 16px; }
.kn-slot { display: inline-block; min-width: 6.4em; padding: 0 6px; border-bottom: 2px dashed rgba(26, 78, 140, .45); text-align: center; }
.kn-slot span { display: inline-block; color: var(--blue); font-weight: 600; }
.kn-foot { color: var(--muted); font-size: 13px; }

/* Tournament: four candidates, two rounds, one pick. Wires are borders, arrowheads are <i>. */
.kn-bracket {
  --row: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) 40px minmax(0, 1fr);
  grid-template-rows: auto repeat(4, var(--row));
  align-items: center;
}
.kn-round { padding-bottom: 6px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.kn-round--1 { grid-area: 1 / 1; }
.kn-round--2 { grid-area: 1 / 3; }
.kn-round--3 { grid-area: 1 / 5; }
.kn-cand { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; height: 32px; padding: 0 5px 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; color: var(--ink); font-size: 14px; }
.kn-cand b { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.kn-cand i { display: grid; flex: 0 0 auto; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line-strong); color: var(--muted); font-size: 11.5px; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.kn-cand i.is-1 { background: var(--blue); box-shadow: none; color: #fff; }
.kn-cand.is-out { filter: opacity(.45); }
.kn-c1 { grid-area: 2 / 1; }
.kn-c2 { grid-area: 3 / 1; }
.kn-c3 { grid-area: 4 / 1; }
.kn-c4 { grid-area: 5 / 1; }
.kn-fin--a { grid-column: 3; grid-row: 2 / span 2; border-color: var(--blue); background: var(--blue-soft); }
.kn-fin--b { grid-column: 3; grid-row: 4 / span 2; }
.kn-pick { grid-column: 5; grid-row: 2 / span 4; justify-content: center; padding: 0 10px; border-color: var(--blue); background: var(--blue); color: #fff; box-shadow: 0 0 0 4px var(--blue-soft); }
.kn-pick b { font-weight: 600; }
.kn-br { position: relative; align-self: stretch; color: #9aa7b8; }
.kn-br--a { grid-column: 2; grid-row: 2 / span 2; --inset: calc(var(--row) / 2); }
.kn-br--b { grid-column: 2; grid-row: 4 / span 2; --inset: calc(var(--row) / 2); }
.kn-br--c { grid-column: 4; grid-row: 2 / span 4; --inset: var(--row); }
.kn-br::before { content: ''; position: absolute; top: var(--inset); bottom: var(--inset); left: 4px; width: 40%; border: 1.5px solid currentColor; border-left: 0; border-radius: 0 7px 7px 0; }
.kn-br::after { content: ''; position: absolute; top: calc(50% - .75px); left: calc(40% + 4px); right: 8px; border-top: 1.5px solid currentColor; }
.kn-br i { position: absolute; top: 50%; right: 2px; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; border-left: 7px solid currentColor; transform: translateY(-50%); }

/* Detection: a bar per word (tall = point), the average against the 50 % line. */
.kn-words { display: flex; flex-wrap: wrap; gap: 10px 8px; }
.kn-words span { position: relative; min-width: 26px; padding-top: 32px; color: var(--muted); font-size: 14px; line-height: 1.3; text-align: center; }
.kn-words span::before, .kn-words span::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 26px; border-radius: 5px; }
.kn-words span::before { background: var(--bg-soft); }
.kn-words span::after { background: var(--line-strong); transform: scaleY(.2); transform-origin: 50% 100%; }
.kn-words span.is-1 { color: var(--ink); }
.kn-words span.is-1::after { background: linear-gradient(180deg, #3a70b0, var(--blue)); transform: none; }
.kn-words span:nth-child(2) { --n: 1; }
.kn-words span:nth-child(3) { --n: 2; }
.kn-words span:nth-child(4) { --n: 3; }
.kn-words span:nth-child(5) { --n: 4; }
.kn-words span:nth-child(6) { --n: 5; }
.kn-words span:nth-child(7) { --n: 6; }
.kn-words span:nth-child(8) { --n: 7; }
.kn-words span:nth-child(9) { --n: 8; }
.kn-words span:nth-child(10) { --n: 9; }
.kn-words span:nth-child(11) { --n: 10; }
.kn-words span:nth-child(12) { --n: 11; }
.kn-words span:nth-child(13) { --n: 12; }
.kn-meter { padding-top: 22px; }
.kn-meter__track { position: relative; height: 12px; border-radius: 999px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line); }
.kn-meter__fill { position: absolute; inset: 0; border-radius: inherit; background: var(--blue); transform: scaleX(.77); transform-origin: 0 50%; }
.kn-meter__mark { position: absolute; top: -5px; bottom: -5px; left: 50%; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink); }
.kn-meter__value { position: absolute; bottom: calc(100% + 6px); left: 77%; color: var(--blue); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; transform: translateX(-50%); }
.kn-meter__scale { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; margin-top: 8px; color: var(--muted); font-size: 11.5px; }
.kn-meter__scale span:last-child { text-align: right; }

/* What a match means: input → arrow → meaning. */
.kn-means { gap: 12px; }
.kn-mean { display: grid; grid-template-columns: 112px 52px minmax(0, 1fr); gap: 10px; align-items: center; }
.kn-mean__in { display: flex; justify-content: center; padding: 7px 10px; border: 1px solid var(--blue); border-radius: 8px; background: var(--blue-soft); color: var(--blue); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.kn-mean__in.is-none { border-color: var(--line-strong); background: #fff; color: var(--muted); }
.kn-arrow { position: relative; height: 12px; color: var(--blue); }
.kn-arrow::before { content: ''; position: absolute; top: calc(50% - .75px); left: 0; right: 6px; border-top: 1.5px solid currentColor; }
.kn-arrow i { position: absolute; top: 50%; right: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid currentColor; transform: translateY(-50%); }
.kn-mean__out { display: grid; gap: 1px; }
.kn-mean__out strong { color: var(--ink); font-size: 14.5px; font-weight: 600; }
.kn-mean__out small { color: var(--muted); font-size: 13px; }

/* Choreography */
.is-enhanced .kn-card-head.is-on .kn-key svg { animation: kn-turn .7s var(--ease-out) .2s both; }
.is-enhanced .kn-bracket.is-on .kn-c1 { animation: kn-in .35s var(--ease-out) both; }
.is-enhanced .kn-bracket.is-on .kn-c2 { animation: kn-in .35s var(--ease-out) .12s both, kn-dim .4s ease 1.7s both; }
.is-enhanced .kn-bracket.is-on .kn-c3 { animation: kn-in .35s var(--ease-out) .24s both, kn-dim .4s ease 1.7s both; }
.is-enhanced .kn-bracket.is-on .kn-c4 { animation: kn-in .35s var(--ease-out) .36s both; }
.is-enhanced .kn-bracket.is-on .kn-c1 i { animation: kn-pop .4s var(--ease-out) .8s both; }
.is-enhanced .kn-bracket.is-on .kn-c2 i { animation: kn-pop .4s var(--ease-out) .95s both; }
.is-enhanced .kn-bracket.is-on .kn-c3 i { animation: kn-pop .4s var(--ease-out) 1.1s both; }
.is-enhanced .kn-bracket.is-on .kn-c4 i { animation: kn-pop .4s var(--ease-out) 1.25s both; }
.is-enhanced .kn-bracket.is-on .kn-br--a, .is-enhanced .kn-bracket.is-on .kn-br--b { animation: kn-draw .5s var(--ease-out) 1.8s both; }
.is-enhanced .kn-bracket.is-on .kn-round--2 { animation: kn-fade .3s ease 2.1s both; }
.is-enhanced .kn-bracket.is-on .kn-fin--a { animation: kn-in .35s var(--ease-out) 2.25s both; }
.is-enhanced .kn-bracket.is-on .kn-fin--b { animation: kn-in .35s var(--ease-out) 2.25s both, kn-dim .4s ease 3.1s both; }
.is-enhanced .kn-bracket.is-on .kn-fin--a i { animation: kn-pop .4s var(--ease-out) 2.65s both; }
.is-enhanced .kn-bracket.is-on .kn-fin--b i { animation: kn-pop .4s var(--ease-out) 2.8s both; }
.is-enhanced .kn-bracket.is-on .kn-br--c { animation: kn-draw .5s var(--ease-out) 3.2s both; }
.is-enhanced .kn-bracket.is-on .kn-round--3 { animation: kn-fade .3s ease 3.45s both; }
.is-enhanced .kn-bracket.is-on .kn-pick { animation: kn-pop .45s var(--ease-out) 3.6s both; }
/* The pick drops into the sentence; without :has() the word simply stays visible. */
@supports selector(:has(*)) {
  .is-enhanced .kn-tour:not(:has(.kn-bracket.is-on)) .kn-slot span { opacity: 0; }
  .is-enhanced .kn-tour:has(.kn-bracket.is-on) .kn-slot span { animation: kn-drop .5s var(--ease-out) 3.8s both; }
}
.is-enhanced .kn-words.is-on span { animation: kn-lit .3s ease both; animation-delay: calc(var(--n, 0) * .16s + .1s); }
.is-enhanced .kn-words.is-on span::after { animation: kn-grow .45s var(--ease-out) both; animation-delay: calc(var(--n, 0) * .16s + .1s); }
.is-enhanced .kn-meter.is-on .kn-meter__fill { animation: kn-fill 1.2s var(--ease-out) .1s both; }
.is-enhanced .kn-meter.is-on .kn-meter__value { animation: kn-fade .3s ease 1.1s both; }
.is-enhanced .kn-mean.is-on .kn-arrow { animation: kn-draw .45s var(--ease-out) .15s both; }
.is-enhanced .kn-mean.is-on .kn-mean__out { animation: kn-in .35s var(--ease-out) .5s both; }

@keyframes kn-in { from { opacity: 0; transform: translateX(-8px); } }
@keyframes kn-fade { from { opacity: 0; } }
@keyframes kn-pop { from { opacity: 0; transform: scale(.4); } 60% { opacity: 1; transform: scale(1.15); } }
@keyframes kn-dim { from { filter: none; } }
@keyframes kn-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes kn-grow { from { transform: scaleY(0); } }
@keyframes kn-lit { from { color: #a3acb9; } }
@keyframes kn-fill { from { transform: scaleX(0); } }
@keyframes kn-turn { from { transform: rotate(-40deg); } }
@keyframes kn-drop { from { opacity: 0; transform: translateY(-8px) scale(.92); } }

@media (max-width: 900px) {
  .kn-avi .alw-window__status { display: inline-flex; }
}
@media (max-width: 560px) {
  .kn-avi .alw-window__status { display: none; }
  /* Too narrow for three columns: the sentence above shows the pick. */
  .kn-bracket { --row: 38px; grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr); }
  .kn-round--3, .kn-br--c, .kn-pick { display: none; }
  .kn-models li { grid-template-columns: 72px minmax(0, 1fr); row-gap: 0; }
  .kn-models li span:nth-child(3) { grid-column: 2; }
  .kn-models .kn-models__head { display: none; }
  .kn-access li { grid-template-columns: 64px minmax(0, 1fr); gap: 10px; }
  .kn-mean { grid-template-columns: 98px 32px minmax(0, 1fr); gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .is-enhanced .kn-tour *, .is-enhanced .kn-detect *, .is-enhanced .kn-detect *::after, .is-enhanced .kn-means * { animation: none !important; }
}