.tabs { border:var(--bd) solid var(--line); background:var(--panel-code); }
.samples { margin-top:var(--s5); overflow:hidden; }
.samples pre { margin:0; border:0; background:transparent;
               padding:var(--s5); font:var(--fs-code)/1.75 var(--mono); overflow-x:auto; }
.samples code { font:inherit; }                      


.destpick { margin-top:var(--s4); }
.destpick > .tabbar { flex-wrap:wrap; }
.destpick > .tabbar label { font-size:var(--fs-ui); text-transform:none; letter-spacing:.02em; }
.destpick > section { padding:var(--s5); }
.destpick > section > :first-child { margin-top:0; }

.destpick > .tabbar label.rec { display:inline-flex; align-items:center; gap:var(--s2); }
.destpick > .tabbar label.rec::before { content:""; width:8px; height:8px; background:var(--acc);
                                        box-shadow:0 0 8px rgba(var(--acc-rgb),.6); }


.flow { list-style:none; margin:var(--s5) 0 0; padding:0; display:grid; gap:var(--s4); }
.flow .fl { display:grid; grid-template-columns:auto 1fr; gap:var(--s1) var(--s4); align-items:baseline; }
.flow .fl-no { font:500 var(--fs-lg)/1 var(--mono); color:var(--acc); }
.flow .fl-k { font:600 var(--fs-ui)/1.5 var(--ui); color:var(--text); }
.flow .fl-b { min-width:0; }
.flow .cmds { margin-top:var(--s3); }


.destpick pre { position:relative; }
.destpick pre .copy { position:absolute; top:var(--s2); right:var(--s2);
            font:600 var(--fs-micro)/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
            color:var(--muted); background:var(--panel-code); border:1px solid var(--line);
            padding:6px 9px; cursor:pointer;
            transition:color var(--t), border-color var(--t), background var(--t); }
.destpick pre .copy:hover { color:var(--text); border-color:rgba(var(--acc-rgb),.5); }
.destpick pre .copy:focus-visible { outline:1px solid var(--acc); outline-offset:2px; }

.destpick pre .copy.copied { color:var(--acc); border-color:var(--acc);
            background:rgba(var(--acc-rgb),.12); }
.split { display:grid; gap:var(--s6); align-items:start;
         grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); }
.setup { display:grid; gap:var(--s5); margin-top:var(--s5);
         grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); }
.step { display:grid; grid-template-columns:auto 1fr; gap:var(--s2) var(--s4); align-items:baseline; }
.step .no { grid-row:span 2; font:500 var(--fs-lg)/1 var(--mono); color:var(--acc); }
.step .k { font:600 var(--fs-ui)/1.3 var(--ui); color:var(--text); }
.step .note { grid-column:2; margin:0; }
.step3 { display:flex; align-items:baseline; gap:var(--s4); margin:var(--s6) 0 0; }
.step3 .no { font:500 var(--fs-lg)/1 var(--mono); color:var(--acc); }
.step3 .k { font:600 var(--fs-lg)/1.3 var(--ui); color:var(--text); }
pre.wide { margin:var(--s5) 0 0; background:var(--panel-code); border:var(--bd) solid var(--line);
           padding:var(--s5);
           font:var(--fs-code)/1.7 var(--mono); overflow-x:auto; }

.cmds { display:flex; flex-direction:column; gap:var(--s4); margin-top:var(--s4); }
.cmds pre.wide { margin:0; padding:var(--s3) var(--s4); line-height:1.55; }
.cmds pre.wide.is-mine { border-color:rgba(var(--acc-rgb),.4); }


.dls { display:flex; flex-wrap:wrap; gap:var(--s3); margin:var(--s5) 0 var(--s3); }
.dl { align-items:center; justify-content:flex-start; gap:var(--s3); text-align:left;
      flex:1 1 200px; min-height:60px; padding:var(--s3) var(--s4); }
.dl .os-ico { width:24px; height:24px; flex:none; }
.dl .t { display:flex; flex-direction:column; gap:3px; line-height:1.1; }
.dl .nm { font:600 var(--fs-ui)/1.1 var(--ui); letter-spacing:.01em; }
.dl small { font:var(--fs-micro)/1.2 var(--mono); letter-spacing:.02em; opacity:.7; }