.method-figure { width: 100%; }
.method-tour { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg); }
.method-tour button { font-family: inherit; color: var(--ink-2); cursor: pointer; }
.method-tour button:focus-visible, #ma-scrubber:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ma-timeline { padding: 8px 24px 6px; border-top: 1px solid var(--line); }
#ma-scrubber { --progress: 0%; display: block; width: 100%; height: 22px; margin: 0; padding: 0; background: transparent; cursor: pointer; appearance: none; -webkit-appearance: none; }
#ma-scrubber::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: linear-gradient(to right,var(--accent) var(--progress),var(--line) var(--progress)); }
#ma-scrubber::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; margin-top: -5px; border-radius: 50%; background: var(--accent); border: 2px solid white; box-shadow: 0 0 0 1px #93c5fd; }
#ma-scrubber::-moz-range-track { height: 3px; border-radius: 2px; background: var(--line); }
#ma-scrubber::-moz-range-progress { height: 3px; background: var(--accent); }
#ma-scrubber::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); border: 2px solid white; box-shadow: 0 0 0 1px #93c5fd; }
.ma-marks { position: relative; height: 25px; margin: 0 6px; }
.ma-marks button { position: absolute; left: var(--position); top: 0; transform: translateX(-50%); border: 0; background: transparent; padding: 0 3px 4px; font-size: 12px; line-height: 1.4; }
.ma-marks button:first-child { transform: none; padding-left: 0; }
.ma-marks button:last-child { transform: translateX(-100%); padding-right: 0; }
.ma-marks i { display: block; width: 1px; height: 4px; background: #d4d4d8; margin: 0 auto 3px; }
.ma-marks button[aria-current="true"] { color: var(--accent); }
.ma-canvas { display: block; width: 100%; height: auto; }
.ma-canvas text { font-family: inherit; font-size: 13px; fill: var(--ink); }
.ma-canvas text[fill] { fill: revert-layer; }
.ma-canvas .ma-kicker { font-size: 17px; font-weight: 600; fill: var(--ink-2); }
.ma-canvas .ma-view-name { font-size: 14px; fill: var(--ink-2); }
.ma-canvas .ma-prominent { font-size: 15px; fill: var(--ink-2); }
.ma-canvas .ma-cls-label { font-size: 13px; font-weight: 600; fill: var(--accent); }
.ma-canvas .ma-block-label { font-size: 16px; }
.ma-canvas .ma-loss-note { font-size: 13px; fill: var(--ink-2); }
.ma-canvas .ma-loss-panel { rx: 6px; stroke: var(--line); stroke-width: 1; }
.ma-canvas .ma-loss-label { font-size: 14px; font-weight: 500; fill: var(--ink); }
.ma-canvas .ma-loss-detail { font-size: 13px; fill: var(--ink-3); }
.ma-canvas .ma-bar-key { rx: 1px; }
.ma-canvas .ma-point-name { font-size: 15px; font-weight: 500; }
#ma-tubelets > g { filter: drop-shadow(0 0 1px white) drop-shadow(0 0 .5px white); }
.ma-patch { transform: scale(var(--patch-x, 1), var(--patch-y, 1)); }
#results tbody th, #retrieval tbody th { font-size: inherit; font-weight: 500; color: var(--ink); }
#results .table-scroll + .table-scroll { margin-top: 36px; }
.table-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 620px) {
  .ma-timeline { padding: 10px 16px; }
  .ma-marks button { font-size: 10px; }
  .ma-marks button[data-phase="1"] span { visibility: hidden; }
  .ma-marks button:last-child span { display: none; }
  .ma-marks button:last-child::after { content: "End"; }
}
@media (max-width: 380px) {
  .ma-marks button { font-size: 9px; padding-inline: 1px; }
}