/* Method overviews (CFOP, Roux, ZZ): goal of each step on a 3D cube, example solve. 3D styles come from cube/view.js. */
.mt-3d { margin: 0 -8px; }
.mt-cap { margin: 4px 0 0; font-size: 16px; color: var(--ink); min-height: 48px; }
.mt-viewbtns { margin-top: 8px; }
.mt-mode { margin-bottom: 14px; }
.mt-list, .mt-stages { list-style: none; margin: 0; padding: 0; }
.mt-list li + li, .mt-stages li + li { margin-top: 8px; }
.mt-step { display: block; width: 100%; text-align: left; font: inherit; color: var(--body); background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; cursor: pointer; min-height: 44px; }
.mt-step:hover { border-color: var(--ink); }
.mt-step[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 3px 0 0 var(--ink); }
.mt-step b { display: block; color: var(--ink); font-weight: 600; }
.mt-step span { display: block; font-size: 14px; color: var(--muted); margin-top: 2px; }
.mt-scr code { font-family: var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.mt-ex .actions { margin: 10px 0 14px; }
.mt-st { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; }
.mt-st.on { border-color: var(--ink); }
.mt-st-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.mt-st-h b { color: var(--ink); }
.mt-st .moves { margin-top: 8px; font-size: 14px; }
.mt-st .moves li { padding: 2px 7px; min-width: 32px; }