/* Интерактивные блоки учебника (общие стили, /ix.css). Префикс .ix-, работает внутри <figure class="fig mc-fig ix"> */
.ix{padding-bottom:16px;scroll-margin-top:90px}
.ix .mc-how{font-size:14.5px;line-height:1.6;color:var(--fg-2);margin:0 0 16px}
.ix .mc-how strong{color:var(--fg)}
.ix .mc-nojs{font-size:14px;color:var(--fg-2)}
.ix.ix-js .mc-nojs{display:none}
.ix-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 14px}
.ix-play{display:inline-flex;align-items:center;gap:.55rem;min-height:44px;padding:.55rem 1.3rem;border:0;border-radius:999px;background:var(--accent);color:#fff;font:500 14px/1 var(--font-body);cursor:pointer;transition:background 140ms ease-out,transform 140ms ease-out}
.ix-play:hover{background:var(--accent-hov);transform:translateY(-1px)}
.ix-play:active{transform:none}
.ix-play .ix-ico{width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent #fff}
.ix-play[aria-pressed="true"] .ix-ico{width:10px;height:10px;border:0;background:#fff;border-radius:1px}
.ix-seg{display:flex;flex-wrap:wrap;gap:6px}
.ix-seg button,.ix-btn{min-height:44px;padding:.4rem .9rem;border:1px solid var(--rule);border-radius:999px;background:var(--bg);color:var(--fg-2);font:500 13px/1.2 var(--font-body);cursor:pointer;transition:background 140ms ease-out,border-color 140ms ease-out,color 140ms ease-out}
.ix-seg button:hover,.ix-btn:hover{border-color:var(--fg-mute);color:var(--fg)}
.ix-seg button[aria-pressed="true"],.ix-btn[aria-pressed="true"]{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.ix-lbl{font:10.5px/1.4 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-mute)}
.ix-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 22px;margin:0 0 14px}
.ix-knob{display:flex;flex-direction:column;gap:2px;font:10.5px/1.4 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-mute)}
.ix-knob span.ix-v{color:var(--fg);letter-spacing:0;text-transform:none;font-size:12px}
.ix-knob input{width:100%;min-height:30px;accent-color:var(--accent);margin:0}
.ix-knob input:focus-visible,.ix-seg button:focus-visible,.ix-play:focus-visible,.ix-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ix-cv{position:relative;border-radius:10px;background:#16150f;overflow:hidden;margin:0 0 12px}
.ix-cv canvas{display:block;width:100%}
.ix-cv .ix-cap{padding:2px 10px 8px;font:10px/1.3 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:#a89e8a}
.ix-out{font:12px/1.55 var(--font-mono);color:var(--fg);min-height:3.1em;margin:0 0 4px}
.ix-out b{color:var(--accent-dim);font-weight:500}
.ix-key{display:flex;flex-wrap:wrap;gap:2px;margin:0 0 12px}
.ix-key i{flex:1 1 0;min-width:18px;height:44px;border:1px solid var(--rule);border-radius:3px;background:var(--bg);font:9.5px/1 var(--font-mono);font-style:normal;color:var(--fg-mute);display:flex;align-items:flex-end;justify-content:center;padding-bottom:4px}
.ix-key i.on{background:var(--accent);border-color:var(--accent);color:#fff}
.ix-key i.root{background:var(--fg);border-color:var(--fg);color:var(--bg)}
@media (max-width:520px){.ix-grid{grid-template-columns:1fr}.ix-play{width:100%;justify-content:center}}
@media (prefers-reduced-motion:reduce){.ix-play{transition:none}}