/* Animated how-tos: line-drawn hardware with the real firmware recorded from the simulator.
   Built by the infographics thread; frames live in howto/<id>.json and load when a card scrolls into view. */
.howto{--glass:#131316;--stage:#f6f4f0;--line:#2a2830;--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--r-lg,12px);overflow:hidden;background:var(--bg);margin:var(--sp-5,1.5rem) 0}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .howto{--glass:#050507;--stage:#17161d;--line:#d9d7e0}}
:root[data-theme="dark"] .howto{--glass:#050507;--stage:#17161d;--line:#d9d7e0}
.howto-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;padding:14px 18px 0}
.howto-head b{font-size:1rem}
.howto-head span{color:var(--fg-dim);font-size:.84rem}
.howto-stage{background:var(--stage);margin:12px 12px 0;border-radius:var(--r-md,8px)}
.howto-stage svg{display:block;width:100%;height:auto}
.howto .howto-steps{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr));gap:4px;list-style:none;margin:0;padding:12px}
.howto .howto-steps li{display:flex;gap:10px;align-items:flex-start;padding:10px;border-radius:8px;color:var(--fg-dim);font-size:.86rem;line-height:1.35;transition:background .3s,color .3s;margin:0}
.howto .howto-steps li i{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:700 .72rem var(--sans);font-style:normal;border:1.5px solid var(--border);color:var(--fg-dim);transition:all .3s}
.howto .howto-steps li>span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.howto .howto-steps li.on{background:var(--gold-dim);color:var(--fg)}
.howto .howto-steps li.on i{background:var(--gold);border-color:var(--gold);color:#fff}
@media (max-width:620px){.howto .howto-steps{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:4px 12px 14px}
.howto .howto-steps li{padding:3px;background:none}.howto .howto-steps li>span{display:none}.howto .howto-steps li.on{background:none}}
.howto .hw[data-hold="1"] .holdarc.h3{animation-duration:3s}
.howto-note{font-size:.8rem;color:var(--fg-dim);padding:0 18px 14px;margin:0}
.howto-stage.rig{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-evenly;gap:14px 0;padding:18px 8px 12px}
.rig-dev{display:flex;flex-direction:column;align-items:center;min-width:0}
.rig-dev.b{flex:0 0 41%}.rig-dev.r{flex:0 0 29%}.rig-dev.m{flex:0 0 19%}
.rig-dev .hw{width:100%}
.rig-dev>span{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dim);margin-top:8px;white-space:nowrap}
@media (max-width:620px){.rig-dev.b{flex-basis:82%}.rig-dev.r{flex-basis:58%}.rig-dev.m{flex-basis:34%}}
/* what is happening right now: a caption in step with the recording, a box on the part of the screen
   that just changed, the devices not involved dimmed, and a pulse from the device that acted to the one that answered */
.howto-cap{display:flex;gap:10px;align-items:flex-start;min-height:3.1em;padding:12px 18px 0;font-size:1rem;line-height:1.4;color:var(--fg)}
.howto-cap i{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:700 .72rem var(--sans);font-style:normal;background:var(--gold);color:#fff;margin-top:1px}
.howto-cap span,.howto-cap i{transition:opacity .2s}
.howto-cap.swap span,.howto-cap.swap i{opacity:0}
.howto .hw .spot{fill:none;stroke:var(--gold);stroke-width:2.5;opacity:0;pointer-events:none}
.howto .hw .spot.on{animation:spot 1.8s ease-out forwards}
@keyframes spot{0%{opacity:0;stroke-width:7}12%{opacity:1;stroke-width:2.5}70%{opacity:1}100%{opacity:0}}
.howto-stage.rig{position:relative}
@media (max-width:620px){.howto-stage{margin:10px 8px 0}.howto-stage.rig{gap:16px 0;padding:14px 4px 10px}.rig-dev>span{font-size:.6rem;margin-top:4px}
.howto-head{padding:12px 14px 0;gap:2px 12px}.howto-head span{font-size:.8rem}.howto-cap{padding:12px 14px 0;font-size:.95rem}
.howto .howto-steps{gap:2px;padding:6px 8px 12px}.howto .howto-steps li{padding:2px}}
.rig4 .rig-dev.q{order:-1;flex:0 0 21%}.rig4 .rig-dev.b{flex-basis:32%}.rig4 .rig-dev.r{flex-basis:23%}.rig4 .rig-dev.m{flex-basis:15%}
@media (max-width:620px){.rig4 .rig-dev.q{order:-2;flex-basis:54%}.rig4 .rig-dev.m{order:-1;flex-basis:34%}.rig4 .rig-dev.b{flex-basis:82%}.rig4 .rig-dev.r{flex-basis:58%}}
.howto .hw .qtl{font:500 8px var(--sans);fill:#8d8b96}
.howto .hw .qsb{font:600 13px var(--sans);fill:#fff}
.howto .hw .qhd{font:500 7px var(--sans);fill:#8d8b96}
.howto .hw .qln{stroke:#3a3940;stroke-width:1}
.howto .hw .qr rect{fill:transparent}
.howto .hw .qr text{font:500 8.5px var(--sans);fill:#c9c7d1}
.howto .hw .qr.on rect{fill:#2f4b7c}
.howto .hw .qr.on text{fill:#fff}
.howto .hw .qgo rect{fill:#1f6f33;stroke:#51cf66;stroke-width:1.2;transition:fill .15s}
.howto .hw .qgo text{font:700 13px var(--sans);fill:#fff}
.howto .hw .qsb.gb{display:none}
.howto .hw .inset{fill:#111;stroke:#8d8b96;stroke-width:1.2}
.howto .hw .qr.gb text{font-size:5.6px}
.howto.rig4.gb .rig-dev.q{flex-basis:13%}
.howto .hw[data-touch="1"] .qgo rect{fill:#51cf66}
@media (prefers-reduced-motion:reduce){.howto .hw .spot.on{animation:none;opacity:1}.rig-dev{transition:none}}
.howto .howto-steps li{display:flex;gap:10px;align-items:flex-start;padding:10px;border-radius:8px;color:var(--fg-dim);font-size:.86rem;line-height:1.35;transition:background .3s,color .3s}
.howto .howto-steps li i{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:700 .72rem var(--sans);font-style:normal;border:1.5px solid var(--border);color:var(--fg-dim);transition:all .3s}
.howto .howto-steps li.on{background:var(--gold-dim);color:var(--fg)}
.howto .howto-steps li.on i{background:var(--gold);border-color:var(--gold);color:#fff}
.howto .hw{color:var(--line)}
.howto .hw .body{fill:var(--bg);stroke:currentColor;stroke-width:1.5}
.howto .hw .glass{fill:var(--glass)}
.howto .hw .bezel{fill:none;stroke:#ffffff;stroke-opacity:.08;stroke-width:1}
.howto .hw .nub{fill:var(--bg);stroke:currentColor;stroke-width:1.3}
.howto .hw .nub.boot{stroke:#f5b324;stroke-width:1.8}
.howto .hw .slot{fill:none;stroke:currentColor;stroke-width:1.2;opacity:.45}
.howto .hw .cap{font:600 10.5px var(--sans);letter-spacing:.08em;fill:var(--fg-dim)}
.howto .hw .cap.boot{fill:var(--gold-ink)}
.howto .hw .port{fill:var(--glass);stroke:currentColor;stroke-width:1.3}
.howto .hw .scr{transition:opacity .45s}
.howto .hw .press{transition:transform .18s}
.howto .hw .dot{fill:#f5b324;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.3);transition:opacity .2s,transform .25s cubic-bezier(.3,.7,.3,1)}
.howto .hw .ring{fill:none;stroke:#f5b324;stroke-width:2;opacity:0}
.howto .hw[data-touch="1"] .dot{opacity:.9;transform:scale(1)}
.howto .hw[data-touch="1"] .ring{opacity:1;animation:ring 1.2s ease-out infinite}
@keyframes ring{from{r:6;opacity:.9}to{r:20;opacity:0}}
.howto .hw .cue{opacity:0;transition:opacity .25s}
.howto .hw[data-touch="1"] .cue.down{opacity:1;animation:bob 1s ease-in-out infinite}
.howto .hw[data-plug="1"][data-step="2"] .cue.left{opacity:1;animation:nudge 1s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(3px)}}
@keyframes nudge{50%{transform:translateX(-4px)}}
.howto .hw .cue path{fill:none;stroke:#f5b324;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.howto .hw .plug{transition:transform .7s cubic-bezier(.3,.7,.3,1);transform:translateX(64px)}
.howto .hw[data-plug="1"] .plug{transform:none}
.howto .hw .mold{fill:var(--stage);stroke:currentColor;stroke-width:1.5}
.howto .hw .shell{fill:#d9dbe0;stroke:currentColor;stroke-width:1.3;stroke-linejoin:round}
.howto .hw .tube-o{fill:none;stroke:currentColor;stroke-linecap:butt}
.howto .hw .tube-i{fill:none;stroke:var(--stage);stroke-linecap:butt}
.howto .hw .inset circle{fill:var(--bg);stroke:currentColor;stroke-width:1;opacity:.9}
.howto .hw .inset .face{fill:var(--glass);stroke:currentColor;stroke-width:1.3}
.howto .hw .inset .tg{stroke:#8a8792;stroke-width:1.8;stroke-linecap:round}
.howto .hw .inset text{font:10px var(--sans);fill:var(--fg-dim)}
.howto .hw .inset{opacity:0;transition:opacity .3s}
.howto .hw[data-step="2"] .inset,.howto .hw[data-step="1"] .inset{opacity:1}
.howto .hw .tongue{stroke:currentColor;stroke-width:1.4;stroke-linecap:round;opacity:.6}
.howto .hw .seam{stroke:currentColor;stroke-width:1;opacity:.4}
.howto .hw .cable{fill:none;stroke:currentColor;stroke-linecap:butt}
.howto .hw .grip{stroke:currentColor;stroke-width:1.1;opacity:.35;stroke-linecap:round}
.howto .hw .badge{opacity:0;transition:opacity .35s}
.howto .hw[data-ok="1"] .badge{opacity:1}
.howto .hw .badge rect{fill:var(--bg);stroke:var(--green);stroke-width:1.2}
.howto .hw .badge text{font:600 12px var(--sans);fill:var(--fg)}
.howto .hw .badge path{fill:none;stroke:var(--green);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){.howto .hw *{transition:none!important;animation:none!important}}
.howto .net .ln{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.howto .net .wire{fill:none;stroke:currentColor;stroke-width:1.2;stroke-dasharray:3 4;opacity:.5}
.howto .net .lbl{font:600 12px var(--sans);fill:var(--fg)}
.howto .net .sub{font:11px var(--sans);fill:var(--fg-dim)}
.howto .net .mono{font:600 11px var(--mono);fill:var(--fg)}
.howto .net .row rect{fill:var(--bg);stroke:currentColor;stroke-width:1;opacity:.9}
.howto .net .row.hot rect{transition:fill .3s}
.howto .net .go{fill:none;stroke:#f5b324;stroke-width:2;opacity:0}
.howto .net[data-s="1"] .go{opacity:1;animation:ring 1.2s ease-out infinite}
.howto .net .pkt{opacity:0;transition:transform 1.3s cubic-bezier(.45,0,.3,1),opacity .2s}
.howto .net .pkt rect{fill:#f5b324} .net .pkt text{font:700 11px var(--mono);fill:#1a1a1a}
.howto .net[data-s="2"] .pkt{opacity:1;transform:translateX(238px)}
.howto .net .slot rect{fill:var(--bg);stroke:currentColor;stroke-width:1.2;transition:fill .25s,stroke .25s}
.howto .net[data-s="3"] .slot rect,.howto .net[data-s="4"] .slot rect{fill:#f5b324;stroke:#f5b324}
.howto .net[data-s="3"] .slot text,.howto .net[data-s="4"] .slot text{fill:#1a1a1a}
.howto .net .slot{opacity:1;stroke:none}
.howto .net .burst{fill:none;stroke:#f5b324;stroke-width:2;stroke-linecap:round;opacity:0}
.howto .net[data-s="3"] .burst{opacity:1;animation:bob .5s ease-in-out 3}
.howto .net .ack{opacity:0;transition:transform 1.2s cubic-bezier(.45,0,.3,1),opacity .2s}
.howto .net .ack rect{fill:var(--bg);stroke:var(--green);stroke-width:1.2} .net .ack text{font:600 11px var(--sans);fill:var(--green)}
.howto .net[data-s="4"] .ack{opacity:1;transform:translateX(-238px)}
.howto .net .done{opacity:0;transition:opacity .3s} .net[data-s="4"] .done{opacity:1}
.howto .net .done path{fill:none;stroke:var(--green);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.howto .net .tall{display:none}
.howto .net[data-s="2"] .tall .pkt{transform:translateY(118px)}
.howto .net[data-s="4"] .tall .ack{transform:translateY(-112px)}
.howto .hw[data-btn="1"] .press{transform:translateY(3.5px)}
.howto .hw .holdarc{fill:none;stroke:#f5b324;stroke-width:2.5;stroke-linecap:round;opacity:0;transform-box:fill-box;transform-origin:center;transform:rotate(-90deg)}
.howto .hw[data-hold="1"] .holdarc{opacity:1;animation:holdfill 5s linear forwards}
@keyframes holdfill{from{stroke-dashoffset:113}to{stroke-dashoffset:0}}
.howto .hw .holdlbl{font:700 11px var(--sans);fill:var(--gold-ink);opacity:0}
.howto .hw[data-hold="1"] .holdlbl{opacity:1}
.howto .hw .mark{fill:none;stroke:#f5b324;stroke-width:2;stroke-dasharray:4 3}
.howto .hw .ant{fill:#1a191e;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
.howto .hw .sma{fill:#4a4852;stroke:currentColor;stroke-width:1.2}
.howto .hw .smaf{stroke:#6c6a74;stroke-width:1;fill:none}
.howto .hw .col{fill:#26252b;stroke:currentColor;stroke-width:1.2}
.howto .hw .rib{stroke:#55535c;stroke-width:1;fill:none}
.howto .hw .knob{fill:#1d1c21;stroke:#4a4852;stroke-width:1.2}
.howto .hw .krib{stroke:#3a3941;stroke-width:1.2;fill:none}
.howto .hw .kdish{fill:#19181d;stroke:#2e2d34;stroke-width:1}
.howto .hw .kbtn{fill:#232228;stroke:#f5b324;stroke-width:2}
.howto .hw .led{fill:#000028;stroke:#3a3942;stroke-width:.8;transition:fill .12s}
.howto .hw .fobb{fill:#1d1c21;stroke:currentColor;stroke-width:1.4}
.howto .hw .fobled{fill:#3a3842}
.howto .hw .fobk{fill:#2c2b32;stroke:#55535c;stroke-width:1.2;transition:fill .2s,stroke .2s}
.howto .hw .fobring{fill:none;stroke:currentColor;stroke-width:1.4}
.howto .hw .wave{fill:none;stroke:#f5b324;stroke-width:2;stroke-linecap:round;opacity:0}
.howto #fig-rflearn[data-step="3"] .fobk.hot{fill:#f5b324;stroke:#f5b324}
.howto #fig-rflearn[data-step="3"] .fobled{fill:#ff4d4d}
.howto #fig-rflearn[data-step="3"] .wave{animation:wave 1s ease-out infinite}
.howto #fig-rflearn[data-step="3"] .wave.w1{animation-delay:.18s}
.howto #fig-rflearn[data-step="3"] .wave.w2{animation-delay:.36s}
@keyframes wave{0%{opacity:0}20%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.howto #fig-rflearn[data-step="3"] .wave{animation:none;opacity:1}}
.howto .hw .tv{font:600 8.5px var(--sans);letter-spacing:.14em;fill:#b9b7c1}
.howto .hw .ts{font-weight:400;letter-spacing:.04em;opacity:.8}
.howto .hw .sma{fill:#4a4852;stroke:currentColor;stroke-width:1.2}
.howto .hw .smaf{stroke:#6c6a74;stroke-width:1;fill:none}
.howto .hw .col{fill:#26252b;stroke:currentColor;stroke-width:1.2}
.howto .hw .rib{stroke:#55535c;stroke-width:1;fill:none}
.howto .hw .knob{fill:#1d1c21;stroke:#4a4852;stroke-width:1.2}
.howto .hw .krib{stroke:#3a3941;stroke-width:1.2;fill:none}
.howto .hw .kdish{fill:#19181d;stroke:#2e2d34;stroke-width:1}
.howto .hw .kbtn{fill:#232228;stroke:#f5b324;stroke-width:2}
.howto .hw .led{fill:#000028;stroke:#3a3942;stroke-width:.8;transition:fill .12s}
.howto .hw .tv{font:600 8.5px var(--sans);letter-spacing:.14em;fill:#b9b7c1}
.howto .hw .ts{font-weight:400;letter-spacing:.04em;opacity:.8}
.howto .hw .dot{fill:#f5b324;stroke:#fff;stroke-width:1.6}
.howto .hw .spot{stroke:#f5b324}
.howto .hw[data-touch="1"] .dot{opacity:1}
.howto .hw .ring{stroke:#f5b324;stroke-width:2.5}
.howto .hw[data-touch="1"] .ring{animation:tapring 1.1s ease-out infinite}
@keyframes tapring{from{r:7;opacity:1}to{r:24;opacity:0}}
@media (max-width:620px){.howto .net .wide{display:none}.howto .net .tall{display:block;width:100%;max-width:320px;margin:0 auto}
.howto.rig4.gb .rig-dev.q{flex-basis:30%}
.howto .howto-steps li{padding:2px;background:none}.howto .howto-steps li.on{background:none}}
.howto .hw .mark{stroke:#fff;stroke-width:2.5;stroke-dasharray:none;filter:drop-shadow(0 0 1.5px #000) drop-shadow(0 0 1px #000)}
@media (min-width:621px){.howto.n2 .howto-stage.rig{justify-content:center;column-gap:5%}.howto.n2 .rig-dev.b{flex-basis:46%}.howto.n2 .rig-dev.r{flex-basis:36%}
.howto.rig4.n3 .rig-dev.q{flex-basis:27%}.howto.rig4.n3 .rig-dev.b{flex-basis:40%}.howto.rig4.n3 .rig-dev.r{flex-basis:28%}.howto.rig4.n3 .rig-dev.m{flex-basis:19%}
.howto.rig4.n3.gb .rig-dev.q{flex-basis:16%}
.howto.rig4.n2 .rig-dev.q{flex-basis:38%}.howto.rig4.n2 .rig-dev.m{flex-basis:24%}.howto.rig4.n2 .rig-dev.b{flex-basis:46%}
.howto.rig4.n2.gb .rig-dev.q{flex-basis:19%}.howto.rig4.n2.gb .rig-dev.b{flex-basis:56%}}
@media (max-width:620px){.howto.rig4.n2.gb .rig-dev.q>span{white-space:normal;text-align:center}.howto.rig4.n2.gb .rig-dev.q{order:-1;flex-basis:27%}.howto.rig4.n2.gb .rig-dev.b{flex-basis:68%}}
.howto.shots .win{fill:none;stroke:var(--line);stroke-opacity:.35;stroke-width:1.5}
.howto .curve svg{color:var(--line)}
.howto .curve .ln{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.howto .curve .sub{font:14px var(--sans);fill:var(--fg-dim)}
.howto .curve .mono{font:600 15px var(--mono);fill:var(--fg)}
.howto .curve .big{font:700 32px var(--sans);fill:var(--fg)}
.howto .curve .ucled{fill:#0b0b0b;stroke:#3a3a3a;stroke-width:1.5}.howto .curve .ln.ucbody{fill:#1a1a1a}
.howto.still *{animation-play-state:paused!important}
.howto .curve .gt{stroke:currentColor;stroke-opacity:.45;stroke-width:1}
.howto .curve .tg{stroke:currentColor;stroke-opacity:.18;stroke-width:1}
.howto .curve .pk rect{fill:none;stroke:currentColor;stroke-width:1.5;transition:fill .3s,stroke .3s}
.howto .curve .pk.on rect{fill:rgba(245,179,36,.18);stroke:#f5b324}
.howto .curve .trace{fill:none;stroke:#f5b324;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.howto .curve .head,.howto .curve .tip{fill:#f5b324}
.howto .curve .horn{stroke:currentColor;stroke-width:9;stroke-linecap:round}
.howto .curve .hub{fill:var(--stage)}
.howto .hw .plug.v{transform:translateX(var(--out))}
.howto .hw[data-plug="1"] .plug.v{transform:none}
.howto .hw .tp .dot{opacity:0;transform:scale(.3)}.howto .hw .tp .ring{opacity:0;animation:none}
.howto .hw[data-k="1"] .tp.k .dot,.howto .hw[data-r="1"] .tp.r .dot{opacity:.9;transform:scale(1)}
.howto .hw[data-k="1"] .tp.k .ring,.howto .hw[data-r="1"] .tp.r .ring{opacity:1;animation:ring 1.2s ease-out infinite}
.howto .hw .scr.on{opacity:0}.howto .hw[data-on="1"] .scr.on{opacity:1}
.howto.bootset .set-tabs{display:flex;gap:4px;margin:10px 12px 0;padding:3px;border:1px solid var(--border);border-radius:10px;width:max-content;max-width:calc(100% - 24px)}
.howto.bootset .set-tabs button{font:600 .84rem var(--sans);color:var(--fg-dim);background:none;border:0;border-radius:7px;padding:6px 12px;cursor:pointer;white-space:nowrap}
.howto.bootset .set-tabs button[aria-selected="true"]{background:var(--gold-dim);color:var(--fg)}
.howto.sub{border:0;border-radius:0;margin:0}.howto.sub>.howto-head{display:none}.howto.sub[hidden]{display:none}
.howto.bootset .set-tabs{flex-wrap:wrap}
.howto.bootset .set-lead{margin:2px 14px 0;font-size:.9rem;line-height:1.45;color:var(--fg-mid)}
.howto.bootset .set-foot{margin:0 14px 12px;font-size:.84rem;line-height:1.45;color:var(--fg-mid)}
.howto.sub.plain .howto-steps{display:block;margin:12px 0 10px;padding:0 14px}
.howto.sub.plain .howto-steps li{display:flex;gap:10px;align-items:flex-start;margin:0 0 8px;background:none;padding:0;color:var(--fg)}
.howto.sub.plain .howto-steps li>span{display:block}
/* the connect card: the Mac's own screens over the QLab window, shown on the steps they belong to */
.howto .hw .mac{opacity:0;transition:opacity .4s}
.howto .hw .mp{fill:#2b2a31;stroke:#55535e;stroke-width:.8}.howto .hw .ml{stroke:#55535e;stroke-width:.6}
.howto .hw .mh{font:700 8px var(--sans);fill:#e8e6ef}.howto .hw .mn{font:600 8.5px var(--sans);fill:#fff}.howto .hw .ms{font:500 7px var(--sans);fill:#a9a7b3}
.howto .hw .mw{fill:#2f7cf6}.howto .hw .mwg{fill:none;stroke:#fff;stroke-width:1.1;stroke-linecap:round}.howto .hw .mwd{fill:#fff}.howto .hw .mg{fill:#34c759}.howto .hw .mck{fill:none;stroke:#2f7cf6;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.howto .hw[data-step="0"] .mac.s0{opacity:1}.howto .hw[data-step="1"] .mac.s1{opacity:1}.howto .hw[data-step="2"] .mac.s2{opacity:1}.howto .hw[data-step="3"] .mac.s3{opacity:1}.howto .hw[data-step="4"] .mac.s4{opacity:1}.howto .hw[data-step="5"] .mac.s5{opacity:1}
.howto .hw .plug.cu{opacity:0;transform:translateX(60px);transition:transform .7s cubic-bezier(.3,.7,.3,1),opacity .3s}.howto .hw:not([data-step="0"]) .plug.cu{opacity:1;transform:none}
@media (max-width:620px){.howto.bootset .set-tabs{width:auto}.howto.bootset .set-tabs button{flex:1 1 30%;padding:6px 4px}}