/* design-dna · mode: landing · aesthetic: dark keyboard poster · pre-emit: Ф4 И4 Исп4 Спец5 Сдерж4 Разн4 · scoped controls/tokens/geometry: pass; pixel contrast min 7.15; whole-page baseline exceptions: brief.md, implementation.md */
.explainers {
  --explainer-word: var(--text-6xl);
  --explainer-phrase: var(--text-4xl);
  --explainer-selection: #3d2924;
  --explainer-stage: 96px;
  --explainer-phrase-stage: 80px;
  --explainer-control: 216px;
  --explainer-target: 44px;
  min-width: 0;
}
.explainers .explainer-caption { color: var(--muted); font-size: var(--text-sm); line-height: var(--leading-sm); }
.explainers .explainer { padding-block: var(--s300); border-bottom: 1px solid var(--line); min-width: 0; }
.explainers h3 { font-size: var(--text-base); line-height: var(--leading-base); letter-spacing: 0; }
.explainers .explainer-language { display: flex; gap: var(--s100); margin-top: var(--s200); color: var(--soft); font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: 700; }
.explainers .explainer-language span:nth-child(2) { color: var(--accent-hover); }
.explainers .explainer-stage { position: relative; display: grid; grid-template-rows: var(--leading-base) 1fr; align-items: center; height: var(--explainer-stage); margin-block: var(--s75); font-size: var(--explainer-word); line-height: 1; font-weight: 700; letter-spacing: -.035em; white-space: nowrap; }
.explainers .explainer-before { color: var(--soft); font-size: var(--text-base); }
.explainers .explainer-static-arrow { position: absolute; top: 0; right: 0; font-size: var(--text-xl); color: var(--accent-hover); }
.explainers .explainer-after { color: var(--accent-hover); }
.explainers .explainer-keys { display: flex; gap: var(--s75); max-width: 328px; }
.explainers .explainer-keys>span { display: flex; flex: 1; justify-content: space-between; align-items: flex-end; height: var(--s600); padding: var(--s75); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--soft); font-size: var(--text-sm); line-height: var(--leading-sm); }
.explainers .explainer-keys b { align-self: flex-start; color: var(--muted); font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: 400; }
.explainers .explainer-phrase .explainer-stage { height: var(--explainer-phrase-stage); font-size: var(--explainer-phrase); }
.explainers .explainer-phrase .explainer-before>span { background: var(--explainer-selection); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.explainers .explainer-command { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s75); color: var(--muted); font-size: var(--text-sm); line-height: var(--leading-sm); }
.explainers kbd { font: inherit; color: var(--soft); }
.explainers .explainer-command kbd { padding: var(--s50) var(--s75); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.explainers .explainer-controls { display: none; margin-top: var(--s200); }
.explainers .explainer-play { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--s100); width: var(--explainer-control); min-height: var(--explainer-target); padding: var(--s75) var(--s100); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); text-align: left; cursor: pointer; font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: 600; }
.explainers .explainer-play>span { color: var(--accent-hover); }
.explainers .explainer-play:active { transform: translateY(1px); }
.explainers .explainer-play:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: var(--s50); }
.explainers .explainer-status,.explainers .explainer-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.explainers .explainer-notes { display: grid; gap: var(--s75); padding-top: var(--s300); color: var(--muted); font-size: var(--text-sm); line-height: var(--leading-sm); max-width: 56ch; }
.explainers [data-ready] .explainer-controls { display: block; }
.explainers [data-ready] .explainer-stage { grid-template-rows: 1fr; }
.explainers [data-ready] .explainer-before,.explainers [data-ready] .explainer-after { grid-area: 1 / 1; font-size: inherit; }
.explainers [data-ready] .explainer-static-arrow { display: none; }
.explainers [data-ready] .explainer-after { opacity: 0; transform: translateY(8px); }
.explainers [data-state="done"] .explainer-before { opacity: 0; transform: translateY(-8px); }
.explainers [data-state="done"] .explainer-after { opacity: 1; transform: none; }
@media (max-width: 640px) {
  .explainers { --explainer-word: var(--text-5xl); --explainer-phrase: var(--text-3xl); }
}
@media (hover: hover) and (pointer: fine) {
  .explainers .explainer-play:hover { background: var(--surface-2); border-color: var(--soft); }
}
@media (prefers-reduced-motion: reduce) {
  .explainers [data-ready] .explainer-before,.explainers [data-ready] .explainer-after { transform: none; }
  .explainers .explainer-play:active { transform: none; }
}