/* ---------- интерактивные цепи серии «Педалборды музыкантов» (общие стили, /chain.css) ---------- */
.mc-fig{ padding-bottom:16px; scroll-margin-top:90px; }
.mc-how{ font-size:14.5px; line-height:1.6; color:var(--fg-2); margin:0 0 16px; }
.mc-how strong{ color:var(--fg); }
.mc-nojs{ font-size:14px; color:var(--fg-2); }
.mc-fig.mc-js .mc-nojs{ display:none; }
.mc-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-bottom:14px; }
.mc-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; }
.mc-play:hover{ background:var(--accent-hov); transform:translateY(-1px); }
.mc-play:active{ transform:none; }
.mc-ico{ font-size:12px; line-height:1; }
.mc-seg{ display:flex; flex-wrap:wrap; gap:6px; }
.mc-seg button, .mc-pre, .mc-dbl, .mc-tg{ 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; }
.mc-seg button:hover, .mc-pre:hover, .mc-dbl:hover, .mc-tg:hover{ border-color:var(--fg-mute); color:var(--fg); }
.mc-seg button[aria-pressed="true"], .mc-pre[aria-pressed="true"], .mc-dbl[aria-pressed="true"], .mc-tg[aria-pressed="true"]{ border-color:var(--fg); background:var(--fg); color:var(--bg); }
.mc-presets{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:16px; }
.mc-pl{ font:10.5px/1.4 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--fg-mute); margin-right:6px; }

.mc-chain{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; align-items:stretch; }
.mc-gtr{ grid-column:1/-1; display:flex; align-items:center; gap:10px; font:700 11px/1.3 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--fg-2); }
.mc-gtr svg{ width:12px; height:21px; }
.mc-gtr::after{ content:""; flex:1 1 auto; height:2px; background:var(--fg-mute); opacity:.4; }
.mc-dev, .mc-amp{ position:relative; display:flex; flex-direction:column; gap:8px; padding:.75rem .8rem .7rem; border-radius:12px; background:var(--bg-soft); border:2px solid transparent; transition:border-color 140ms ease-out, background 140ms ease-out; }
.mc-dev.on{ border-color:var(--accent); background:var(--bg); }
.mc-dev::before{ content:attr(data-n); position:absolute; top:8px; left:10px; font:700 11px/1 var(--font-mono); color:var(--fg-mute); }
.mc-art{ display:flex; justify-content:center; align-items:center; min-height:96px; padding:6px 0 2px; cursor:pointer; border-radius:8px; }
.mc-art:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.mc-art svg{ display:block; height:112px; width:auto; max-width:100%; filter:saturate(.55) brightness(.92); transition:filter 180ms ease-out; }
.mc-rack .mc-art svg{ height:96px; }
.mc-dev.on .mc-art svg{ filter:none; }
.mc-led{ fill:#6a6a6a; } .mc-dev.on .mc-led, .mc-amp .mc-led{ fill:#ff4a2b; }
.mc-amp .mc-led{ fill:#6a6a6a; } .mc-live .mc-amp .mc-led{ fill:#ff4a2b; }
.mc-reel{ transform-box:fill-box; transform-origin:center; }
.mc-live .mc-dev.on .mc-reel{ animation:mc-spin 2.4s linear infinite; }
@keyframes mc-spin{ to{ transform:rotate(360deg); } }
.mc-meta{ text-align:center; }
.mc-meta b{ display:block; font:600 14px/1.25 var(--font-body); color:var(--fg); }
.mc-meta span{ display:block; font:10.5px/1.5 var(--font-mono); letter-spacing:.05em; color:var(--fg-mute); margin-top:2px; }
.mc-modes{ justify-content:center; }
.mc-modes button{ min-height:44px; padding:.3rem .65rem; font-size:12px; border-radius:8px; }
.mc-tgs{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.mc-tg{ border-radius:8px; font-size:12px; padding:.3rem .65rem; }
.mc-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); }
.mc-knob input{ width:100%; min-height:30px; accent-color:var(--accent); margin:0; }
.mc-mv{ display:flex; gap:6px; justify-content:center; }
.mc-mv button{ min-height:44px; min-width:44px; border:1px solid var(--rule); border-radius:10px; background:var(--bg); color:var(--fg); font:500 15px/1 var(--font-body); cursor:pointer; transition:border-color 140ms ease-out; }
.mc-mv button:hover:not(:disabled){ border-color:var(--fg-mute); }
.mc-mv button:disabled{ opacity:.3; cursor:default; }
.mc-amp{ grid-column:1/-1; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 22px; background:var(--bg); border-color:var(--rule); }
.mc-amp .mc-art{ cursor:default; flex:0 0 auto; }
.mc-amp .mc-art svg{ height:140px; filter:none; }
.mc-amp .mc-meta{ text-align:left; flex:1 1 150px; }
.mc-amp .mc-ams{ flex:2 1 260px; }
.mc-amp .mc-knob{ flex:1 1 180px; }
.mc-bar button:focus-visible, .mc-chain button:focus-visible, .mc-presets button:focus-visible, .mc-knob input:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.mc-now{ font:12.5px/1.55 var(--font-mono); color:var(--fg-2); margin:14px 0 10px; min-height:3.1em; }
.mc-scope{ border-radius:10px; background:var(--bg); border:1px solid var(--rule); padding:6px 8px; }
.mc-scope canvas{ display:block; width:100%; height:64px; }

/* оформления: «тёмный стоп-бокс», «светлый», «мини» */
.mc-sh-flat .mc-art svg{ height:84px; } .mc-sh-mini .mc-art svg{ height:112px; }
.mc-amp.mc-look-strip .mc-art{ display:none; }

@media (max-width:760px){
  .mc-chain{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .mc-dev{ padding:.6rem .5rem .55rem; gap:6px; }
  .mc-art svg{ height:84px; } .mc-rack .mc-art svg{ height:70px; max-width:100%; }
  .mc-art{ min-height:70px; }
  .mc-modes button{ padding:.3rem .45rem; font-size:11.5px; }
  .mc-tg{ font-size:11.5px; padding:.3rem .45rem; }
  .mc-amp{ flex-direction:column; flex-wrap:nowrap; }
  .mc-amp > *{ flex:0 0 auto !important; }
  .mc-amp .mc-meta{ text-align:center; }
  .mc-amp .mc-ams{ justify-content:center; }
  .mc-amp .mc-knob{ width:100%; }
  .mc-amp .mc-one svg, .mc-amp .mc-art svg{ height:96px; }
  .mc-amp .mc-art{ flex-wrap:wrap; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){ .mc-live .mc-dev.on .mc-reel{ animation:none; } }

.mc-amp .mc-art{ gap:8px; } .mc-one{ display:block; } .mc-amp .mc-one svg{ height:140px; }
@media (max-width:760px){ .mc-amp .mc-art{ flex-direction:row; width:100%; } .mc-amp .mc-one{ flex:0 1 auto; min-width:0; } .mc-amp .mc-one svg{ height:auto; width:100%; max-width:150px; } }
/* ---------- визуальные темы блоков в учебнике (mc-t-*) ---------- */
.mc-t-lab{ --mc-a:#1f8a8a; }
.mc-t-lab .mc-chain{ padding:14px; border:1px dashed var(--mc-a); border-radius:14px; background:repeating-linear-gradient(90deg,transparent 0 23px,rgba(31,138,138,.07) 23px 24px); }
.mc-t-lab .mc-dev.on{ border-color:var(--mc-a); }
.mc-t-lab .mc-play{ background:var(--mc-a); }
.mc-t-lab .mc-knob input{ accent-color:var(--mc-a); }
.mc-t-lab .mc-pl{ color:var(--mc-a); }

.mc-t-scope{ --mc-a:#2fae5f; }
.mc-t-scope .mc-scope{ background:#0d1612; border-color:#1d3a2a; padding:10px 12px; box-shadow:inset 0 0 24px rgba(47,174,95,.18); }
.mc-t-scope .mc-scope canvas{ height:110px; }
.mc-t-scope .mc-dev{ background:linear-gradient(180deg,var(--bg-soft),transparent); }
.mc-t-scope .mc-dev.on{ border-color:var(--mc-a); }
.mc-t-scope .mc-play{ background:#1d7a44; }
.mc-t-scope .mc-knob input{ accent-color:var(--mc-a); }
.mc-t-scope .mc-now{ border-left:3px solid var(--mc-a); padding-left:10px; }

.mc-t-blueprint{ --mc-a:#2f6fd0; }
.mc-t-blueprint .mc-chain{ padding:16px; border-radius:6px; border:1px solid rgba(47,111,208,.45); background-color:rgba(47,111,208,.06); background-image:linear-gradient(rgba(47,111,208,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(47,111,208,.14) 1px,transparent 1px); background-size:20px 20px; }
.mc-t-blueprint .mc-dev{ border-radius:4px; }
.mc-t-blueprint .mc-dev.on{ border-color:var(--mc-a); }
.mc-t-blueprint .mc-scope canvas{ height:96px; }
.mc-t-blueprint .mc-play{ background:var(--mc-a); border-radius:6px; }
.mc-t-blueprint .mc-knob input{ accent-color:var(--mc-a); }

.mc-t-board{ --mc-a:#c0392b; }
.mc-t-board .mc-chain{ padding:14px; border-radius:10px; background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.12)); border:1px solid var(--rule); box-shadow:inset 0 2px 8px rgba(0,0,0,.1); }
.mc-t-board .mc-dev{ box-shadow:0 2px 0 rgba(0,0,0,.18); }
.mc-t-board .mc-dev.on{ border-color:var(--mc-a); }
.mc-t-board .mc-play{ background:var(--mc-a); }
.mc-t-board .mc-knob input{ accent-color:var(--mc-a); }

.mc-t-wood{ --mc-a:#9a6a2f; }
.mc-t-wood .mc-chain{ padding:14px; border-radius:12px; background:linear-gradient(135deg,rgba(154,106,47,.14),rgba(154,106,47,.05)); border:1px solid rgba(154,106,47,.4); }
.mc-t-wood .mc-amp{ border-color:var(--mc-a); border-width:2px; }
.mc-t-wood .mc-play{ background:var(--mc-a); }
.mc-t-wood .mc-knob input{ accent-color:var(--mc-a); }
.mc-t-wood .mc-pl{ color:var(--mc-a); }

.mc-t-hall{ --mc-a:#6a5acd; }
.mc-t-hall .mc-chain{ padding:14px; border-radius:18px; background:radial-gradient(ellipse at 50% 0,rgba(106,90,205,.16),transparent 70%); border:1px solid rgba(106,90,205,.3); }
.mc-t-hall .mc-dev{ border-radius:16px; }
.mc-t-hall .mc-dev.on{ border-color:var(--mc-a); }
.mc-t-hall .mc-play{ background:var(--mc-a); }
.mc-t-hall .mc-knob input{ accent-color:var(--mc-a); }
.mc-t-hall .mc-scope canvas{ height:84px; }